/* Design Style System - Shared by demo.html and index.html */

/* ===== SWISS MINIMALIST ===== */
.style-swiss main * { letter-spacing: -0.01em; }
/* Swiss nav — the cleanest possible top edge.
   • No drop-shadow (Tailwind's shadow-md): keep the page edge crisp.
   • No bottom border: a hairline rule reads as "design", Swiss reads as
     "absence of design".
   • Solid 100% surface-card background (defeats the v6 glass-nav rule
     which is "color-mix surface-card 80% transparent" + backdrop-blur —
     that translucency reads modern but not minimal).
   Higher-specificity selector (body class + nav.shadow-md / body[data-v6])
   is needed to beat both Tailwind's .shadow-md and the v6 glass-nav rule
   that ships with !important. */
.style-swiss nav,
.style-swiss nav.shadow-md,
body.style-swiss nav.shadow-md,
body[data-v6="true"].style-swiss nav,
body[data-v6="true"].style-swiss nav.bg-white,
body[data-v6="true"].style-swiss nav.shadow-md {
    box-shadow: none !important;
    border-bottom: none !important;
    background: var(--surface-card, #ffffff) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.style-swiss section:not(.hero-pattern):not(#google-reviews) { border-radius: 0 !important; border: none !important; border-top: 1px solid rgba(0,0,0,0.1) !important; padding: 60px 0 !important; }
.style-swiss h1, .style-swiss h2, .style-swiss h3 { font-weight: 300; line-height: 1.1; margin: 0; letter-spacing: -0.03em; }
.style-swiss h1 { font-size: 3.5rem; }
.style-swiss #hero-logo, .style-swiss #nav-logo { background: none !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }

.style-swiss .hero-pattern a[href="#contact"],
.style-swiss .hero-pattern a[href="#action"] {
    border-radius: 0 !important;
    border: 2px solid currentColor !important;
    font-weight: 600;
    /* Padding NOT overridden — let Tailwind's px-4 py-3 from the markup
       carry. Earlier override (14px 20px) was way too wide for the CTA copy. */
    transition: all 0.2s;
    box-shadow: none !important;
}
.style-swiss .hero-pattern a[href="#contact"]:hover,
.style-swiss .hero-pattern a[href="#action"]:hover { 
    opacity: 0.8;
}

.style-swiss #hero-phone {
    border-radius: 0 !important;
    border: 2px solid currentColor !important;
    font-weight: 600;
    /* Padding NOT overridden — let Tailwind's px-4 py-3 from the markup carry. */
    transition: all 0.2s;
    box-shadow: none !important;
}
.style-swiss #hero-phone:hover { 
    opacity: 0.8;
}

.style-swiss section:not(#google-reviews) .bg-white { border: none !important; border-top: 1px solid rgba(0,0,0,0.1) !important; border-radius: 0 !important; box-shadow: none !important;}
.style-swiss section:not(#google-reviews) button:not(.demo-panel button) { border-radius: 0 !important; border: 1px solid currentColor !important; font-weight: 400; padding: 14px 20px; transition: all 0.2s; }
.style-swiss section:not(#google-reviews) button:not(.demo-panel button):hover { opacity: 0.8; }
.style-swiss section > .container { max-width: 1200px; }

/* ===== ANTI-DESIGN / IMPERFECT ===== */
.style-antidesign section:not(.hero-pattern):not(#google-reviews) { transform: rotate(-0.5deg); border: 3px solid currentColor; border-radius: 0; }
.style-antidesign section:not(#google-reviews) .bg-white { transform: rotate(0.3deg); border: 2px dashed currentColor !important; box-shadow: 5px 5px 0 rgba(0,0,0,0.2) !important; }
.style-antidesign h2 { font-family: 'Courier New', monospace !important; text-decoration: underline wavy; }
.style-antidesign h1 { font-family: 'Courier New', monospace !important; position: relative; }
.style-antidesign section:not(#google-reviews) button:not(.demo-panel button) { border-radius: 0 !important; border: 3px solid currentColor !important; transform: skew(-2deg); box-shadow: 4px 4px 0 #ff6; font-weight: 700; }
.style-antidesign main img { filter: contrast(1.2) saturate(1.3); }

/* ===== BRUTALIST / BOLD BLOCKS ===== */
.style-brutalist section:not(.hero-pattern):not(#google-reviews) { border: 4px solid currentColor !important; border-radius: 0 !important; box-shadow: 8px 8px 0 currentColor !important; }
.style-brutalist section:not(#google-reviews) .bg-white { border: 3px solid currentColor !important; border-radius: 0 !important; box-shadow: 6px 6px 0 currentColor !important; }
.style-brutalist h1, .style-brutalist h2, .style-brutalist h3 { font-weight: 900; text-transform: uppercase; letter-spacing: -1px; line-height: 0.9; }

/* Hero section buttons - consistent vertical alignment */
.style-brutalist .hero-pattern a[href="#contact"],
.style-brutalist .hero-pattern a[href="#action"],
.style-brutalist #hero-phone,
.style-brutalist .hero-pattern button,
.style-brutalist .hero-pattern a.cc_loylopen { 
    border: 4px solid currentColor !important; 
    border-radius: 0 !important; 
    font-weight: 900; 
    font-size: 18px; 
    padding: 20px 20px !important; 
    box-shadow: 6px 6px 0 rgba(0,0,0,0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* A hero CTA marked .hidden (e.g. the Book/Buy action button when there's no
   bizsite3dframesource, or Get-a-Quote when the quote form is toggled off)
   MUST stay hidden. The per-style `.hero-pattern a[...] { display:inline-flex
   !important }` rules (brutalist above, plus swiss / active / etc.) otherwise
   force it visible because `.hidden` (display:none) carries no !important.
   Higher specificity + !important here wins for every style — so a hidden
   hero CTA stays hidden on all pages, production included. */
body[data-v6="true"] .hero-pattern a.hidden { display: none !important; }

.style-brutalist section:not(#google-reviews) button:not(.demo-panel button) { border: 4px solid currentColor !important; border-radius: 0 !important; font-weight: 900; font-size: 18px; padding: 20px 20px; box-shadow: 6px 6px 0 rgba(0,0,0,0.3); }
.style-brutalist .bg-purple-600, .style-brutalist .bg-purple-700 { filter: brightness(0.9) contrast(1.2); }

/* ===== MOTION & ANIMATIONS ===== */
.style-motion section:not(.hero-pattern):not(#google-reviews) { transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.style-motion section:not(.hero-pattern):not(#google-reviews):hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.style-motion section:not(#google-reviews) .bg-white { transition: all 0.3s ease; animation: float 3s ease-in-out infinite; }
.style-motion section:not(#google-reviews) .bg-white:hover { transform: scale(1.05) rotate(1deg); box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important; }
.style-motion section:not(#google-reviews) button:not(.demo-panel button) { transition: all 0.3s ease; position: relative; overflow: hidden; }
.style-motion section:not(#google-reviews) button:not(.demo-panel button):hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
/* Section H2 accent: paints the last word of every section heading with a
   brand → accent gradient. The `.heading-accent` span is wrapped around the
   last word by theme-runtime.js on DOMContentLoaded; the wrap is universal
   but unstyled outside .style-motion, so it only "lights up" here.
   Falls back to solid --brand on themes without an explicit accent colour. */
.style-motion section h2 .heading-accent {
    background-image: linear-gradient(135deg, var(--brand), var(--brand-accent, var(--brand)));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
                  color: transparent;
}
/* Display-weight upgrade for motion-style section headings — the
   gradient accent reads thin on the default `font-bold` (700). Bump
   to 800/900, tighten tracking, scale up slightly so the type carries
   the colour treatment without looking fragile. */
.style-motion section h2 {
    font-weight: 800 !important;
    letter-spacing: -0.022em;
    font-size: clamp(2rem, 1.6rem + 2.3vw, 3.25rem);
    line-height: 1.05;
}
/* "Why Choose Us?" subhead inside #about gets the FULL gradient accent
   (not just last-word) when motion is active. Mirrors the h2 treatment
   but at the smaller h3 scale — same brand→accent gradient, same
   display-weight bump. Scoped to #why-choose-us so other h3s on the
   page (cards, sidebars) stay normal. */
/* About callout panels (Support Local / Expert Team / Reliable / Quality)
   pick up a soft tint of the lighter gradient stop — --brand-accent at
   10% via color-mix. Creates visual cohesion with the gradient h2/h3
   headings and the four-bar quartet without competing with them. Falls
   back to --brand on legacy themes that don't ship an explicit accent.
   !important overrides theme customStyles that target .bg-purple-50. */
.style-motion #about-callouts-grid > div {
    background: color-mix(in oklch, var(--brand-accent, var(--brand)) 10%, transparent) !important;
}
.style-motion #why-choose-us h3 {
    background-image: linear-gradient(135deg, var(--brand), var(--brand-accent, var(--brand)));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
                  color: transparent;
    font-weight: 800 !important;
    letter-spacing: -0.018em;
}
/* Four-bar scroll-in accent. Outside .style-motion the markup is in
   the DOM (see #about) but display:none — costs nothing. Inside motion
   the bars surface, build in with staggered delay when their section
   scrolls into view (theme-runtime.js adds .in-view). Each bar's colour
   is derived from --brand via color-mix so any theme gets a coherent
   four-colour quartet without per-theme overrides. */
.motion-accent-bars { display: none; }
/* Four-bar accent reads as overkill on dark/rich backgrounds — keep it for light/pale themes only. */
body[data-palette="dark"] .motion-accent-bars { display: none !important; }
.style-motion .motion-accent-bars {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 56px;
    padding-left: 4px;
}
.style-motion .motion-accent-bars span {
    display: block;
    height: 9px;
    border-radius: 9999px;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Descending rhythm — borrowed from the Dublin Bay Foil Fest accent. The
   four bars form a musical-cadence quartet rather than a uniform set. */
.style-motion .motion-accent-bars span:nth-child(1) { width: 96px; background: var(--brand); }
.style-motion .motion-accent-bars span:nth-child(2) { width: 64px; background: var(--brand-accent, color-mix(in oklch, var(--brand) 55%, white)); }
.style-motion .motion-accent-bars span:nth-child(3) { width: 40px; background: color-mix(in oklch, var(--brand) 70%, black); }
.style-motion .motion-accent-bars span:nth-child(4) { width: 24px; background: color-mix(in oklch, var(--brand) 50%, var(--brand-accent, white)); }
.style-motion .motion-accent-bars.in-view span { opacity: 1; transform: translateX(0); }
.style-motion .motion-accent-bars.in-view span:nth-child(1) { transition-delay: 0.05s; }
.style-motion .motion-accent-bars.in-view span:nth-child(2) { transition-delay: 0.15s; }
.style-motion .motion-accent-bars.in-view span:nth-child(3) { transition-delay: 0.25s; }
.style-motion .motion-accent-bars.in-view span:nth-child(4) { transition-delay: 0.35s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ===== ACTIVE SPORTS / OUTDOOR ===== */
.style-active section:not(.hero-pattern):not(#google-reviews) {
    position: relative;
    /* Let theme control background color - design style only adds shape/borders */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
    padding-bottom: 60px !important;
    border-left: 6px solid var(--theme-primary, #4a5568);
    box-shadow: 12px 12px 0 var(--theme-shadow, rgba(0, 0, 0, 0.1));
}

.style-active section:not(#google-reviews) .bg-white:not(button):not(a) {
    /* Let theme control background and text color - design style only adds borders/transforms */
    border-left: 4px solid var(--theme-primary, #4a5568) !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 var(--theme-shadow, rgba(0, 0, 0, 0.1)) !important;
    transform: skew(-2deg);
    transition: all 0.3s ease;
}
.style-active section:not(#google-reviews) .bg-white:not(button):not(a):hover {
    transform: skew(-2deg) translateX(4px);
    box-shadow: 12px 12px 0 var(--theme-shadow, rgba(0, 0, 0, 0.15)) !important;
}

.style-active h1 { 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    line-height: 0.95;
    position: relative;
    display: inline-block;
}
.style-active h1::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100px;
    height: 6px;
    background: var(--theme-primary, #4a5568);
    transform: skew(-20deg);
}

.style-active h2, .style-active h3 { 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 0 var(--theme-shadow, rgba(0, 0, 0, 0.1));
}

.style-active section:not(#google-reviews) button:not(.demo-panel button),
.style-active .hero-pattern a[href="#contact"],
.style-active .hero-pattern a[href="#action"],
.style-active #hero-phone,
.style-active #action,
.style-active .faq-question {
    border-radius: 0 !important;
    border: 3px solid var(--theme-primary, #4a5568) !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 32px;
    box-shadow: 6px 6px 0 var(--theme-shadow, rgba(0, 0, 0, 0.15));
    transition: all 0.2s ease;
    transform: skew(-2deg);
    /* Use CSS variables so themes can override button colors */
    background: var(--active-sports-button-bg, white) !important;
    color: var(--active-sports-button-color, var(--theme-primary, #4a5568)) !important;
}

.style-active section:not(#google-reviews) button:not(.demo-panel button):hover,
.style-active .hero-pattern a[href="#contact"]:hover,
.style-active .hero-pattern a[href="#action"]:hover,
.style-active #action:hover,
.style-active .faq-question:hover {
    transform: skew(-2deg) translateX(2px) translateY(-2px);
    box-shadow: 8px 8px 0 var(--theme-shadow, rgba(0, 0, 0, 0.2));
}

/* Yext post read more buttons - ensure dark text */
.style-active .yext-post-card button,
.style-active .yext-post-card button * {
    color: #000 !important;
}

/* style-active (rule ~246) forces EVERY section button into a chunky "sports"
   pill — including the Read-More expanders, which design-system.css deliberately
   keeps as inline text-links (excluded from the green-pill sweep at ~1193). On a
   DARK palette that left them a white pill carrying pale --brand-300 text
   (1.83:1, fails AA); a previous padding:0 reset only produced a cramped sliver
   and — being class-only — never even matched .product-read-more, which loses on
   specificity to the style-active rule's :not(#google-reviews) (id-level).

   Fix: promote both Read-More buttons to the theme's OWN accessible green CTA —
   the exact brand-gradient pill used by the Send Message / contact buttons —
   with near-black text (~7:1). Padding + skew come from the style-active rule
   (left untouched) so they still read as buttons. The :not(#google-reviews)
   here lifts specificity above that rule so .product-read-more is covered too.
   Scoped to dark + active ONLY: light palette, other styles, the real green
   pills, and the yext-post read-mores are all untouched. */
body[data-v6="true"][data-palette="dark"].style-active section:not(#google-reviews) #about-read-more-btn,
body[data-v6="true"][data-palette="dark"].style-active section:not(#google-reviews) .product-read-more {
    background: linear-gradient(180deg,
        color-mix(in oklch, var(--brand) 100%, white 8%),
        var(--brand-600)) !important;
    color: #1a1a1a !important;
    border: 1px solid color-mix(in oklch, white 18%, transparent) !important;
    box-shadow:
        0 1px 0 color-mix(in oklch, white 20%, transparent) inset,
        0 1px 2px color-mix(in oklch, var(--brand) 25%, transparent),
        0 4px 10px color-mix(in oklch, var(--brand) 18%, transparent) !important;
}
/* inner label span + chevron inherit the near-black text (overrides the
   text-purple-600 -> --brand-300 dark remap that would otherwise keep them pale) */
body[data-v6="true"][data-palette="dark"].style-active section:not(#google-reviews) #about-read-more-btn *,
body[data-v6="true"][data-palette="dark"].style-active section:not(#google-reviews) .product-read-more * {
    color: #1a1a1a !important;
}

/* ============================================
   GOOGLE REVIEWS CAROUSEL — universal Google look
   Theme-agnostic by design: Google reviews are the trust factor
   and must render the same regardless of which color theme or
   design style is active. Hence !important throughout to win
   over theme overrides in theme-runtime.js.
   ============================================ */

#google-reviews {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    color: #202124 !important;
    background: #fff !important;
    padding: 48px 0 !important;
}

/* Header bar */
#google-reviews-header {
    background: #f8f9fa !important;
    border: 1px solid #ebebeb !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
    box-shadow: none !important;
}
#google-reviews-header-inner,
#google-reviews-header > div:first-child {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 768px) {
    #google-reviews-header-inner,
    #google-reviews-header > div:first-child {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
    }
}
#google-reviews-header h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #202124 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: 0 !important;
}
.google-reviews-rating-row {
    display: flex !important;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
#google-rating-value {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #202124 !important;
    line-height: 1 !important;
}
#google-rating-stars {
    display: inline-flex !important;
    color: #fbbc04 !important;
    font-size: 20px;
    gap: 1px;
}
#google-rating-stars i {
    color: #fbbc04 !important;
}
#google-rating-count {
    color: #5f6368 !important;
    font-size: 14px !important;
}

/* Write a Review button — Google-style dark CTA */
#google-write-review {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #1a1a1a !important;
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s !important;
    flex-shrink: 0;
    font-size: 14px !important;
    border: none !important;
}
#google-write-review:hover {
    background: #2d2d2d !important;
}

/* Carousel wrap, track, arrows */
.google-reviews-carousel-wrap {
    position: relative;
}
.google-reviews-track {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 12px 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.google-reviews-track::-webkit-scrollbar {
    display: none;
}
#google-reviews-prev,
#google-reviews-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 9999px !important;
    background: rgba(218, 220, 224, 0.95) !important;
    color: #5f6368 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
    transition: background 0.15s !important;
    z-index: 10;
}
#google-reviews-prev { left: -10px !important; }
#google-reviews-next { right: -10px !important; }
#google-reviews-prev:hover,
#google-reviews-next:hover {
    background: rgba(189, 193, 198, 1) !important;
}
#google-reviews-prev svg,
#google-reviews-next svg {
    width: 16px !important;
    height: 16px !important;
}

/* Cards — Google review look */
.google-reviews-card {
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    background: #fff !important;
    border: 1px solid #ebebeb !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: none !important;
    scroll-snap-align: start !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    color: #202124 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
@media (max-width: 640px) {
    .google-reviews-card {
        flex: 0 0 280px !important;
        width: 280px !important;
        max-width: 280px !important;
    }
}

.google-reviews-card-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.google-reviews-avatar {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}
.google-reviews-avatar-img,
.google-reviews-avatar-fallback {
    width: 44px !important;
    height: 44px !important;
    border-radius: 9999px !important;
    object-fit: cover;
    display: block !important;
}
.google-reviews-avatar-fallback {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    background: #c0c2c8 !important;  /* neutral, theme-agnostic */
    text-transform: uppercase;
}
.google-reviews-google-badge {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    background: #fff !important;
    border-radius: 9999px !important;
    padding: 2px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
    width: 18px;
    height: 18px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: content-box !important;
}
.google-reviews-google-badge svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

.google-reviews-meta {
    flex: 1;
    min-width: 0;
}
.google-reviews-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap;
}
.google-reviews-name {
    font-weight: 600 !important;
    color: #202124 !important;
    font-size: 14px !important;
}
.google-reviews-verified {
    width: 16px !important;
    height: 16px !important;
    color: #1a73e8 !important;
    flex-shrink: 0;
}
.google-reviews-time {
    font-size: 12px !important;
    color: #5f6368 !important;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.google-reviews-stars {
    display: flex !important;
    color: #fbbc04 !important;
    font-size: 14px !important;
    gap: 1px;
    margin-bottom: 10px !important;
}
.google-reviews-stars i {
    color: #fbbc04 !important;
}

.google-reviews-text {
    font-size: 14px !important;
    color: #3c4043 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.google-reviews-text.expanded {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible;
}

.google-review-readmore {
    color: #1a73e8 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
    align-self: flex-start;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    font-family: inherit;
}
.google-review-readmore:hover {
    text-decoration: underline;
}

/* Multi-color Google wordmark */
.google-reviews-wordmark {
    font-weight: 500;
    color: #5f6368;
}
.google-reviews-wordmark .g-o1 { color: #4285F4 !important; }
.google-reviews-wordmark .g-o2 { color: #FBBC05 !important; }
.google-reviews-wordmark .g-g  { color: #34A853 !important; }
.google-reviews-wordmark .g-l  { color: #EA4335 !important; }
.google-reviews-wordmark .g-e  { color: #4285F4 !important; }

/* Pagination dots */
#google-reviews-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
}
#google-reviews-dots button {
    width: 8px !important;
    height: 8px !important;
    border-radius: 9999px !important;
    background: #dadce0 !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}
#google-reviews-dots button:hover {
    background: #9aa0a6 !important;
}
#google-reviews-dots button[aria-current="true"] {
    background: #1a73e8 !important;
    width: 24px !important;
}

/* Skeleton loading state */
.google-reviews-skeleton {
    flex: 0 0 320px !important;
    width: 320px !important;
    background: #fff !important;
    border: 1px solid #ebebeb !important;
    border-radius: 12px !important;
    padding: 20px !important;
    scroll-snap-align: start !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    animation: googleReviewsSkeletonPulse 1.6s ease-in-out infinite !important;
}
@media (max-width: 640px) {
    .google-reviews-skeleton {
        flex: 0 0 280px !important;
        width: 280px !important;
    }
}
.google-reviews-skeleton-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}
.google-reviews-skeleton-avatar {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: #e8eaed;
    flex-shrink: 0;
}
.google-reviews-skeleton-meta {
    flex: 1;
}
.google-reviews-skeleton-bar {
    background: #e8eaed;
    border-radius: 4px;
    height: 12px;
}
.google-reviews-skeleton-bar.gr-w-32 { width: 128px; }
.google-reviews-skeleton-bar.gr-w-24 { width: 96px; }
.google-reviews-skeleton-bar + .google-reviews-skeleton-bar {
    margin-top: 6px;
}
.google-reviews-skeleton-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.google-reviews-skeleton-star {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: #e8eaed;
}
.google-reviews-skeleton-text {
    height: 12px;
    background: #e8eaed;
    border-radius: 4px;
    margin-bottom: 6px;
}
.google-reviews-skeleton-text.gr-short { width: 70%; }

@keyframes googleReviewsSkeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Override any design-style rules that try to theme the cards */
.style-brutalist .google-reviews-card,
.style-swiss .google-reviews-card,
.style-antidesign .google-reviews-card,
.style-motion .google-reviews-card,
.style-active .google-reviews-card,
.style-futuristic .google-reviews-card,
.style-brutalist #google-reviews-header,
.style-swiss #google-reviews-header,
.style-antidesign #google-reviews-header,
.style-motion #google-reviews-header,
.style-active #google-reviews-header,
.style-futuristic #google-reviews-header {
    border-radius: 12px !important;
    border: 1px solid #ebebeb !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #202124 !important;
}
.style-brutalist #google-reviews-header,
.style-swiss #google-reviews-header,
.style-antidesign #google-reviews-header,
.style-motion #google-reviews-header,
.style-active #google-reviews-header,
.style-futuristic #google-reviews-header {
    background: #f8f9fa !important;
    border-radius: 16px !important;
}

/* Hard-reset all design-style/theme overrides for Google Reviews buttons.
   These selectors win over any future design-style additions because they
   pair the design-style class with a high-specificity ID/descendant chain. */
[class*="style-"] #google-reviews-prev,
[class*="style-"] #google-reviews-next {
    border-radius: 9999px !important;
    border: none !important;
    background: rgba(218, 220, 224, 0.95) !important;
    color: #5f6368 !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
    transform: translateY(-50%) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: normal !important;
    clip-path: none !important;
    filter: none !important;
    animation: none !important;
}
[class*="style-"] #google-reviews-prev:hover,
[class*="style-"] #google-reviews-next:hover {
    background: rgba(189, 193, 198, 1) !important;
    transform: translateY(-50%) !important;
}
[class*="style-"] #google-reviews .google-review-readmore {
    border-radius: 0 !important;
    border: none !important;
    background: none !important;
    color: #1a73e8 !important;
    padding: 0 !important;
    margin-top: 8px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    font-family: inherit !important;
}
[class*="style-"] #google-reviews-dots button {
    width: 8px !important;
    height: 8px !important;
    border-radius: 9999px !important;
    background: #dadce0 !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: normal !important;
    clip-path: none !important;
    filter: none !important;
}
[class*="style-"] #google-reviews-dots button[aria-current="true"] {
    background: #1a73e8 !important;
    width: 24px !important;
}
[class*="style-"] #google-write-review {
    background: #1a1a1a !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
}
[class*="style-"] #google-write-review:hover {
    background: #2d2d2d !important;
    transform: none !important;
}

/* ===== Section user-hidden (drives the bizsiteconfig hiddenSections list) =====
   Set when a section is dragged into the "Hidden" bin in the demo panel, or
   listed in theme.hiddenSections of the loaded bizsiteconfig. Wins over the
   data-driven `.hidden` class because of !important. */
.section-user-hidden {
    display: none !important;
}

/* Hide nav <a> tags whose href targets a user-hidden section. Layered with the
   existing data-driven `.hidden` (e.g. #menus-nav-link, #faq-nav-link) — either
   trigger keeps the link off-screen. */
.nav-link-user-hidden {
    display: none !important;
}