/* ====================================================================
   shopperchecked — the blue review-site identity (Inter, #119ed1, navy band, soft blue washes).

   Loaded AFTER app.css and overrides it. app.css IS byte-identical to
   the chaogolden engine so upstream fixes merge cleanly; everything that
   makes wowpilot look like wowpilot lives here.

   Direction: coral-rose primary, warm white ground, soft pink washes,
   big radii and pill shapes, floating shadowed cards, all-sans type
   (the --font-serif token is pointed at the sans stack so every serif
   heading in the engine turns sans without touching a view).
   ==================================================================== */

:root {
    /* ----- palette ----- */
    --color-primary:        #119ed1;
    --color-primary-dark:   #0c86b3;
    --color-primary-tint:   #cbe9f5;
    --color-primary-wash:   #eaf6fb;

    --color-accent:         #f47b20;
    --color-accent-dark:    #d9650f;
    --color-accent-light:   #fff1e6;

    --color-peach:          #e2f3fa;
    --color-peach-light:    #f5fbfd;
    --color-cream:          #ffffff;
    --color-paper:          #f1f8fb;

    --color-text:           #142d50;
    --color-text-muted:     #61738c;
    --color-text-faint:     #8597ad;

    --color-bg:             #ffffff;
    --color-surface:        #ffffff;
    --color-surface-alt:    #f2f9fc;
    --color-border:         #dfe7f1;
    --color-border-strong:  #bde2f0;

    /* "dark" sections become coral gradients — tokens keep readable text on them */
    --color-dark-bg:        #15375e;
    --color-dark-surface:   rgba(255,255,255,0.14);
    --color-dark-text:      #ffffff;
    --color-dark-muted:     #c1d4ec;
    --color-dark-border:    rgba(255,255,255,0.28);

    --color-danger:         #b42318;
    --color-danger-bg:      #fef3f2;
    --color-danger-border:  #fecdca;
    --color-success:        #1a9c5b;
    --color-success-bg:     #e8f8ef;
    --color-success-border: #bde9d0;

    /* ----- shape ----- */
    --radius-sm:   8px;
    --radius:      12px;
    --radius-lg:   20px;
    --radius-xl:   24px;

    --shadow-sm: 0 1px 2px rgba(20, 45, 80, 0.06);
    --shadow:    0 4px 12px rgba(20, 45, 80, 0.08), 0 1px 3px rgba(20, 45, 80, 0.05);
    --shadow-md: 0 10px 24px rgba(20, 45, 80, 0.10), 0 2px 6px rgba(20, 45, 80, 0.05);
    --shadow-lg: 0 24px 48px rgba(20, 45, 80, 0.14), 0 6px 14px rgba(20, 45, 80, 0.06);

    /* ----- type: Outfit (geometric, confident) for headlines, DM Sans for text and UI — both via config web_fonts_url ----- */
    --font-display: "Inter", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-sans:  "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: var(--font-display);
}

body { background: var(--color-bg); }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.025em; font-weight: 700; }
a { color: var(--color-primary); }

/* ----- buttons: chunkier pills, glowing primary ----- */
.btn { font-weight: 700; padding: 12px 24px; }
.btn-lg { padding: 15px 30px; }
.btn-sm { padding: 8px 16px; }
.btn-primary { box-shadow: 0 6px 16px rgba(17, 158, 209, 0.28); }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(17, 158, 209, 0.34); transform: translateY(-1px); }
.btn-secondary { background: var(--color-primary-wash); color: var(--color-primary-dark); border-color: transparent; }
.btn-secondary:hover { background: var(--color-primary-tint); }
.btn, .btn-outline, .btn-outline-dark { border-radius: 10px; }
.btn-danger { background: var(--color-danger); border-color: transparent; }
.btn-danger:hover { background: #8f1c13; }

/* ----- forms ----- */
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], select, textarea {
    border-radius: 14px;
}
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px var(--color-primary-wash); border-color: var(--color-primary); }

/* ----- alerts + generic card ----- */
.alert { border-radius: var(--radius); }
.card { border-radius: var(--radius-lg); border-color: var(--color-border); box-shadow: var(--shadow-sm); }

/* ====================================================================
   Header — white, blurred, search bar in the middle, pill links
   ==================================================================== */
.nav-v2 {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-border);
}
.nav-v2-inner { padding: 12px 0; gap: var(--space-4); }
.nav-v2-brand { flex-shrink: 0; }
.nav-v2-brand img { height: 34px; } /* star wordmark is wider and shorter than the old lockup */
.nav-v2-search {
    background: var(--color-surface-alt);
    border-color: transparent;
    padding: 9px 16px;
    max-width: 420px;
}
.nav-v2-search:focus-within { background: #fff; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-wash); }
.nav-v2-search svg { color: var(--color-primary); }
.nav-v2-links { gap: 4px; }
.nav-v2-links a { border-radius: 10px; font-weight: 600; padding: 8px 14px; }
.nav-v2-links a:hover { background: var(--color-primary-wash); color: var(--color-primary-dark); }
.nav-v2-links a.is-accent {
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    padding: 7px 16px;
}
.nav-v2-links a.is-accent:hover { background: var(--color-primary); color: #fff; }
.nav-v2-links a.is-primary { padding: 8px 18px; box-shadow: 0 4px 12px rgba(17, 158, 209, 0.28); }
.nav-v2-lang-btn { border-radius: 10px; }
.nav-v2-lang-menu { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.nav-v2-mobile-toggle { border-radius: 10px; }
@media (max-width: 900px) {
    .nav-v2-search { display: flex; flex-basis: 100%; order: 3; max-width: none; }
}

/* ====================================================================
   Hero — two columns: copy + search on the left, a floating live
   review card on the right. Falls back to one centred column on mobile.
   ==================================================================== */
.hero-v2 {
    text-align: left;
    padding: var(--space-9) 0 var(--space-9);
    background:
        radial-gradient(900px 420px at 85% 0%, #d4eef8 0%, transparent 60%),
        radial-gradient(700px 360px at 0% 100%, #eaf6fb 0%, transparent 60%),
        var(--color-cream);
}
.hero-v2 .container {
    display: grid; grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-8); align-items: center;
}
.hero-v2-copy { min-width: 0; }
.hero-v2 h1 {
    margin: 0 0 var(--space-4);
    max-width: 16ch;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.02;
}
.hero-v2 h1 em { font-style: normal; color: var(--color-primary); }
.hero-v2-lede { margin: 0 0 var(--space-6); max-width: 40rem; }
.hero-v2-search {
    margin: 0 0 var(--space-4);
    border-radius: 10px;
    border-color: transparent;
    padding: 6px 6px 6px 8px;
    box-shadow: var(--shadow-md);
    max-width: 620px;
}
.hero-v2-search:focus-within { box-shadow: 0 0 0 5px var(--color-primary-wash), var(--shadow-md); }
.hero-v2-search-inner { padding: 10px 14px; }
.hero-v2-search-inner svg { color: var(--color-primary); }
.hero-v2-search button { border-radius: 10px; padding: 0 26px; font-weight: 700; }
.hero-v2-popular { justify-content: flex-start; margin: 0 0 var(--space-5); max-width: none; }
.hero-v2-popular a { background: var(--color-surface-alt); border-color: transparent; padding: 6px 12px; font-weight: 600; color: var(--color-text-muted); }
.hero-v2-popular a:hover { background: var(--color-primary-tint); color: var(--color-primary-dark); }
.hero-v2-trust { margin-bottom: var(--space-4); }
.hero-v2-ctas { justify-content: flex-start; }

/* the floating card stack */
.hero-v2-card { position: relative; margin: 18px 12px 18px 0; }
.hero-v2-card-main {
    position: relative; z-index: 2;
    background: #fff; border-radius: var(--radius-xl);
    padding: var(--space-5); box-shadow: var(--shadow-lg);
    transform: rotate(-1.5deg);
}
.hero-v2-card-main .review-card-head { margin-bottom: var(--space-3); }
.hero-v2-card-main .review-card-title { font-size: 19px; margin-bottom: 6px; }
.hero-v2-card-main .review-card-body { -webkit-line-clamp: 3; }
.hero-v2-card-main .review-card-foot { border-top: 0; padding-top: var(--space-3); }
.hero-v2-card-ghost {
    position: absolute; z-index: 1; inset: 0;
    background: var(--color-primary-tint); border-radius: var(--radius-xl);
    transform: rotate(4deg) translate(14px, 18px);
}
.hero-v2-card-stat {
    position: absolute; z-index: 3;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 10px;
    background: #fff; box-shadow: var(--shadow-md);
    font-size: 13px; font-weight: 700; color: var(--color-text);
}
.hero-v2-card-stat strong { color: var(--color-primary); font-size: 16px; }
.hero-v2-card-stat--tl { top: -18px; left: -18px; transform: rotate(-3deg); }
.hero-v2-card-stat--br { bottom: -16px; right: -10px; transform: rotate(2deg); }
.hero-v2-rating-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 10px;
    background: var(--color-primary); color: #fff; font-weight: 800; font-size: 14px;
}
@media (max-width: 960px) {
    .hero-v2 { text-align: center; }
    .hero-v2 .container { grid-template-columns: 1fr; }
    .hero-v2 h1 { margin-left: auto; margin-right: auto; }
    .hero-v2-lede { margin-left: auto; margin-right: auto; }
    .hero-v2-search { margin-left: auto; margin-right: auto; }
    .hero-v2-popular, .hero-v2-ctas { justify-content: center; }
    .hero-v2-card { display: none; }
}

/* ====================================================================
   Sections, tiles, cards
   ==================================================================== */
.section-v2 { padding: var(--space-10) 0; }
.section-v2--alt { background: var(--color-surface-alt); }
.section-v2--dark {
    background: linear-gradient(135deg, #119ed1 0%, #0c86b3 60%, #b3262c 100%);
    color: #fff;
}
.section-v2-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); }
.section-v2-head-link {
    padding: 8px 16px; border-radius: 10px;
    background: var(--color-primary-wash); color: var(--color-primary-dark);
}
.section-v2-head-link:hover { background: var(--color-primary-tint); text-decoration: none; }

/* category tiles → rounded app-style pills */
.cat-grid { gap: var(--space-3); }
.cat-tile {
    border-radius: 10px; padding: 10px 18px 10px 10px;
    border-color: transparent; background: #fff; box-shadow: var(--shadow-sm);
}
.cat-tile:hover { background: #fff; border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cat-tile-icon { border-radius: 10px; width: 42px; height: 42px; background: var(--color-primary-wash); color: var(--color-primary); }
.cat-tile-name { font-weight: 700; }
.cat-tile-arrow { color: var(--color-primary); }
.cat-sub-list a { border-color: transparent; background: #fff; box-shadow: var(--shadow-sm); font-weight: 600; }
.cat-sub-list a:hover { background: var(--color-primary-wash); }
.cat-sub-group h3 a { color: var(--color-primary-dark); }

/* business cards */
.biz-card {
    border-radius: var(--radius-lg); border-color: transparent;
    box-shadow: var(--shadow); padding: var(--space-5);
}
.biz-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.biz-card-logo { border-radius: 10px; width: 48px; height: 48px; border-color: transparent; background: var(--color-primary-wash); }
.biz-card-logo-favicon { border-radius: 10px; }
.biz-card-rating-num {
    font-size: 15px; min-width: 0;
    padding: 6px 12px; border-radius: 10px;
    background: var(--color-primary); color: #fff; font-weight: 800;
}
.biz-card-cta { color: var(--color-primary); }

/* review cards → chat bubbles */
.review-card {
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 6px;
    border-color: transparent; box-shadow: var(--shadow); padding: var(--space-5);
}
.review-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
.review-card-avatar { box-shadow: 0 0 0 3px var(--color-primary-wash); }
.review-card-title { font-size: 17px; }
.review-card-foot { border-top-style: solid; border-top-color: var(--color-border); }

/* trust grid */
.trust-item { border-radius: var(--radius-lg); border-color: transparent; box-shadow: var(--shadow-sm); }
.trust-item-icon { border-radius: 10px; width: 44px; height: 44px; }

/* moderation flow on the coral band */
.mod-flow-step {
    background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22);
    border-radius: var(--radius-lg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mod-flow-step-n { background: #fff; color: var(--color-primary); }
.section-v2--dark .btn-outline-dark { border-color: rgba(255,255,255,0.6); color: #fff; }
.section-v2--dark .btn-outline-dark:hover { background: #fff; color: var(--color-primary-dark); }

/* business CTA band */
.biz-cta {
    background: linear-gradient(120deg, #3cb3dd 0%, #119ed1 55%, #0c86b3 100%);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.biz-cta p, .biz-cta-feature { color: #c1d4ec; }
.biz-cta-feature svg { color: #fff; }
.biz-cta-actions .btn-primary { background: #fff; color: var(--color-primary-dark); box-shadow: none; }
.biz-cta-actions .btn-primary:hover { background: #f5fbfd; }
.biz-cta-actions .btn-secondary { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.35); }
.biz-cta-actions .btn-secondary:hover { background: rgba(255,255,255,0.22); }

/* ====================================================================
   Footer — light, rounded top, pink wash instead of a dark slab
   ==================================================================== */
.footer-v2 {
    background: var(--color-surface-alt); color: var(--color-text-muted);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-top: 1px solid var(--color-border);
}
.footer-v2-brand p { color: var(--color-text-muted); }
.footer-v2-social a { background: #fff; color: var(--color-primary); box-shadow: var(--shadow-sm); }
.footer-v2-social a:hover { background: var(--color-primary); color: #fff; }
.footer-v2-col h4 { color: var(--color-text); }
.footer-v2-col a { color: var(--color-text-muted); }
.footer-v2-col a:hover { color: var(--color-primary); }
.footer-v2-bar { border-top-color: var(--color-border); color: var(--color-text-faint); }

/* ====================================================================
   Page heroes: category index, category, business profile
   ==================================================================== */
.breadcrumbs { background: transparent; border-bottom: 0; }
.cat-index-hero, .cat-hero, .biz-profile-hero {
    background:
        radial-gradient(800px 320px at 90% 0%, #d4eef8 0%, transparent 60%),
        var(--color-cream);
    border-bottom: 0;
}
.cat-hero-icon, .cat-index-hero .cat-hero-icon { border-radius: 10px; }
.cat-hero-search, .cat-index-hero .cat-hero-search { border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.cat-hero-search button { border-radius: 10px; }

.biz-profile-hero { padding: var(--space-8) 0; }
.biz-profile-hero-grid {
    background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
    padding: var(--space-6);
}
.biz-profile-logo { border-radius: 24px; border-color: transparent; background: var(--color-primary-wash); }
.biz-profile-anchor {
    border-radius: 10px; border-color: transparent;
    background: var(--color-primary-wash); padding: 8px 18px 8px 8px;
}
.biz-profile-anchor-num {
    background: var(--color-primary); color: #fff;
    border-radius: 10px; padding: 6px 14px; font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    min-width: 0;
}
.biz-profile-actions .btn { border-radius: 10px; }
.biz-profile-card { border-radius: var(--radius-lg); border-color: transparent; box-shadow: var(--shadow-sm); }
.biz-profile-trust-item { border-radius: 10px; }
.profile-review, .review-list > * { border-radius: var(--radius-lg); }

/* rating pills that use the accent stars keep amber; numbers go coral */
.rating-stars-fill { color: var(--color-accent); }

/* admin / account shells inherit the tokens; just soften their corners */
.adm-table, .dash-panel, .acc-shell, .admin-shell, .acc-empty { border-radius: var(--radius-lg); }
.adm-pill { border-radius: 10px; }

/* hero card fallback (no reviews yet): category chips instead of a review */
.hero-v2-card-main--cats .review-card-title { margin: 0 0 6px; }
.hero-v2-card-main--cats .review-card-body { margin: 0 0 var(--space-4); }
.hero-v2-card-main--cats .cat-sub-list a { background: var(--color-primary-wash); box-shadow: none; }

/* ====================================================================
   Engine rules that hardcode the green instead of using a token — the
   dark sidebars of the account / business-dashboard / admin shells,
   their avatars, and a few focus rings. Overridden here so app.css can
   stay byte-identical to the engine.
   ==================================================================== */
.acc-side, .biz-dash-side { background: #1f1416; color: #e4ebf6; }
.acc-side-avatar, .acc-preview-avatar { background: linear-gradient(135deg, #0c86b3, #3cb3dd); }
.acc-side-email, .acc-side-toggle { color: #b39a9d; }
.acc-side-item, .biz-dash-item { color: #dcc9cb; }
.acc-side-item.is-active { background: linear-gradient(90deg, rgba(17, 158, 209,0.34), rgba(17, 158, 209,0.08)); }
.biz-dash-item.is-active { background: rgba(17, 158, 209,0.28); }
.field select:focus { box-shadow: 0 0 0 3px rgba(17, 158, 209, 0.18); }
.media-slot[data-state="empty"]:focus-visible { box-shadow: 0 0 0 3px rgba(17, 158, 209, 0.28); }
.compare-add-list a { background: rgba(17, 158, 209, 0.06); }

/* Google sign-in button: pill like every other wowpilot button */
.auth-v2-google { border-radius: 10px; border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.auth-v2-google:hover { border-color: var(--color-primary); background: #fff; box-shadow: var(--shadow); }

.footer-v2-brand img { height: 36px; }

/* "What customers say" — coral card with the logo's stripe on the left edge (engine card is a plain sand box). */
.biz-profile-summary {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #e8f5fa 0%, #f5fbfd 55%, #ffffff 100%);
    border: 1px solid #a6d7eb; border-radius: 16px;
    padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 10px);
    box-shadow: 0 6px 24px rgba(17, 158, 209, 0.08);
}
.biz-profile-summary::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
    background: repeating-linear-gradient(180deg, #7ccde9 0 10px, #119ed1 10px 20px, #b52d32 20px 30px);
}
.biz-profile-summary-head h2 {
    font-family: var(--font-sans); font-style: italic; font-weight: 800; font-size: 19px; letter-spacing: -0.01em;
    color: var(--color-primary-dark);
}
.biz-profile-summary-head h2 svg { color: var(--color-primary); }
.biz-profile-summary-text { color: #3b2a2b; font-size: 15px; }

/* Customer photo strip — same family as the summary card. */
.biz-profile-gallery { border-radius: var(--radius-lg); border-color: #a6d7eb; box-shadow: var(--shadow-sm); }
.biz-profile-gallery-head h2 { font-family: var(--font-sans); font-style: italic; font-weight: 800; font-size: 19px; color: var(--color-primary-dark); }
.biz-profile-gallery-item { border-radius: 14px; }

/* Grouped nav (config nav_menu) is wider than the engine's flat list: tighten
   between the hamburger breakpoint and ~1180px, and drop the inline search
   below 1100px (it is still in the mobile menu and on /search). */
@media (max-width: 1180px) and (min-width: 901px) {
    .nav-v2-search { max-width: 240px; padding: 8px 12px; }
    .nav-v2-links { gap: 2px; }
    .nav-v2-links a, .nav-v2-group-btn { padding: 8px 9px; font-size: 13.5px; }
    .nav-v2-links a.is-accent { padding: 7px 12px; }
    .nav-v2-links a.is-primary { padding: 8px 14px; }
}
@media (max-width: 1100px) and (min-width: 901px) { .nav-v2-search { display: none; } }
.nav-v2-group-btn { border-radius: 10px; font-weight: 600; }
.nav-v2-group-btn:hover, .nav-v2-group.is-open .nav-v2-group-btn { background: var(--color-primary-wash); color: var(--color-primary-dark); }
.nav-v2-group-menu { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.nav-v2-group-menu a:hover { background: var(--color-primary-wash); color: var(--color-primary-dark); }
/* Longer locales (de, fr) make the grouped nav wide: let the search give way first. */
.nav-v2-search { flex: 1 1 220px; min-width: 150px; }
.nav-v2-links { flex-shrink: 0; }
/* non-English labels are longer: below 1440px the inline search goes (still on /search and in the mobile menu) */
@media (min-width: 901px) and (max-width: 1439px) { html:not([lang="en"]) .nav-v2-search { display: none; } }
@media (min-width: 901px) and (max-width: 1440px) { .nav-v2-links a, .nav-v2-group-btn { padding-left: 10px; padding-right: 10px; } }

/* Account menu — one avatar button where the name and "Log out" used to sit
   side by side; the menu opens right-aligned so it never runs off-screen. */
.nav-v2-account .nav-v2-group-btn { padding: 3px 8px 3px 3px; gap: 6px; }
.nav-v2-avatar {
    width: 32px; height: 32px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; overflow: hidden;
    background: var(--color-primary-wash); color: var(--color-primary-dark);
    font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
}
.nav-v2-avatar { position: relative; }
.nav-v2-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-v2-account-name { display: none; }
.nav-v2-account .nav-v2-group-menu { left: auto; right: 0; min-width: 230px; }
.nav-v2-group-menu .nav-v2-account-head { padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--color-border); }
.nav-v2-account-head b { display: block; font-size: 14px; }
.nav-v2-account-head small {
    display: block; max-width: 230px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--color-text-muted); font-size: 12.5px;
}
.nav-v2-group-menu .nav-v2-account-out { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border); }
@media (max-width: 900px) {
    .nav-v2-account-name { display: inline; margin-right: auto; font-weight: 600; }
    .nav-v2-group-menu .nav-v2-account-head { display: none; }
    .nav-v2-account .nav-v2-group-btn { padding: 6px 12px 6px 6px; }
}

/* The header runs wider than the page column (1320px, the .container-wide
   measure): seven links, the language menu and the account button left the
   search box too narrow to read its own placeholder at laptop widths. */
.nav-v2 .nav-v2-inner { max-width: 1320px; }
.nav-v2-search { min-width: 180px; }
/* German, French and the rest run their labels 25–35% longer than English;
   they show the inline search only from 1440px (rule above) and get a little
   more width there so it is still a usable box. */
html:not([lang="en"]) .nav-v2 .nav-v2-inner { max-width: 1480px; }

/* Monthly awards at the head of a business page's trust strip (site/partials/business_awards.php)
   and on the dashboard (partials/award_panel.php): medal colours as on the type pages. */
.biz-award { padding: 4px 12px 4px 4px; border: 1px solid #f1d9a6; background: #fffaf0; color: var(--color-text); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.biz-award:hover { box-shadow: 0 4px 14px rgba(20, 45, 80, .10); transform: translateY(-1px); }
.biz-award strong { font-weight: 700; }
.biz-award-medal { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.biz-profile-trust-item.biz-award .biz-award-medal svg { color: inherit; }
.biz-award-month { color: var(--color-text-faint); font-weight: 500; }
.biz-award--gold { background: #fff8e6; border-color: #efd28c; }
.biz-award--gold .biz-award-medal { background: linear-gradient(135deg, #f9d976, #e5a823); color: #4a3300; box-shadow: 0 2px 6px rgba(229, 168, 35, .35); }
.biz-award--silver { background: #f6f8fa; border-color: #cfd6dd; }
.biz-award--silver .biz-award-medal { background: linear-gradient(135deg, #eef1f4, #a9b3be); color: #2f3a44; box-shadow: 0 2px 6px rgba(120, 135, 150, .30); }
.biz-award--bronze { background: #fdf4ec; border-color: #e9c3a0; }
.biz-award--bronze .biz-award-medal { background: linear-gradient(135deg, #f3c7a0, #c9824b); color: #3d230d; box-shadow: 0 2px 6px rgba(201, 130, 75, .30); }
.biz-award--top { background: var(--color-primary-wash); border-color: #a6d7eb; }
.biz-award--top .biz-award-medal { background: var(--color-primary); color: #fff; }

/* Header gutter: the inner row keeps the page's side padding (it was 12px 0,
   which put the logo against the screen edge below 1320px). */
.nav-v2 .nav-v2-inner { padding: 12px var(--space-5); }
@media (min-width: 901px) and (max-width: 1440px) { .nav-v2-links a, .nav-v2-group-btn { padding-left: 8px; padding-right: 8px; } }

/* Compact header — phones, tablets, and desktops where the links do not fit
   (the header script sets .is-compact; .no-search only hides the search).
   One row: logo left, a smaller search in the middle, menu button right.
   On narrow phones the search drops to its own row under the other two. */
.nav-v2.no-search .nav-v2-search { display: none; }
.nav-v2.is-compact .nav-v2-inner { flex-wrap: wrap; align-items: center; gap: 12px; }
.nav-v2.is-compact .nav-v2-brand { order: 1; }
.nav-v2.is-compact .nav-v2-brand img { height: 30px; }
html body .nav-v2.is-compact .nav-v2-search {
    display: flex; order: 2; flex: 1 1 200px; max-width: 420px; min-width: 0;
    margin: 0 auto; padding: 7px 12px;
}
.nav-v2.is-compact .nav-v2-search input { min-width: 0; font-size: 14px; }
.nav-v2.is-compact .nav-v2-mobile-toggle {
    order: 3; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: #fff; border: 1px solid var(--color-border-strong); border-radius: 10px;
    width: 42px; height: 42px; cursor: pointer;
}
.nav-v2.is-compact .nav-v2-links {
    order: 4; display: none; flex-basis: 100%; flex-direction: column; align-items: stretch;
    padding-bottom: var(--space-4); flex-shrink: 1;
}
.nav-v2.is-compact .nav-v2-links.is-open { display: flex; }
.nav-v2.is-compact .nav-v2-group-btn { width: 100%; justify-content: space-between; }
.nav-v2.is-compact .nav-v2-group-menu { position: static; box-shadow: none; border: 0; padding: 0 0 4px 12px; background: transparent; }
.nav-v2.is-compact .nav-v2-group:hover .nav-v2-group-menu { display: none; }
.nav-v2.is-compact .nav-v2-group.is-open .nav-v2-group-menu { display: block; }
.nav-v2.is-compact .nav-v2-account-name { display: inline; margin-right: auto; font-weight: 600; }
.nav-v2.is-compact .nav-v2-group-menu .nav-v2-account-head { display: none; }
@media (max-width: 560px) {
    .nav-v2 .nav-v2-inner { padding: 10px 16px; }
    .nav-v2.is-compact .nav-v2-inner { gap: 10px; }
    .nav-v2.is-compact .nav-v2-brand { margin-right: auto; }
    .nav-v2.is-compact .nav-v2-brand img { height: 28px; }
    html body .nav-v2.is-compact .nav-v2-search { order: 4; flex-basis: 100%; max-width: none; margin: 0; }
    .nav-v2.is-compact .nav-v2-links { order: 5; }
}

/* ====================================================================
   Business page — ShopperChecked profile layout (the approved "people"
   design): a full-width blue band holding breadcrumb, identity and
   actions; a pale-blue body with the review feed and one sticky panel.
   Same markup as the engine; only the look and arrangement change.
   ==================================================================== */
:root { --sc-band: #eaf6fb; --sc-band-line: #dce7f7; --sc-body: #f5fbfd; --sc-ink: #142d50; --sc-muted: #61738c; --sc-blue: #119ed1; }

/* The band: breadcrumb + hero run edge to edge */
.breadcrumbs:has(+ .biz-profile-hero), .breadcrumbs:has(+ * .biz-profile-hero) { background: var(--sc-band); margin: 0; padding: 22px 0 6px; border: 0; }
.biz-profile-hero { background: var(--sc-band); border-bottom: 1px solid var(--sc-band-line); padding: 18px 0 30px; margin: 0; }
.biz-profile-hero::before, .biz-profile-hero::after { display: none !important; }
.biz-profile-hero-grid { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; }
.biz-profile-logo { width: 96px; height: 96px; border-radius: 22px; background: #fff; border: 1px solid #dce7f8; box-shadow: 0 5px 16px rgba(55, 97, 141, .05); overflow: hidden; display: grid; place-items: center; }
.biz-profile-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.biz-profile-id h1 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; letter-spacing: -1.3px; line-height: 1.15; color: var(--sc-ink); margin: 0 0 6px; }
.biz-profile-meta { color: #3f86a6; font-size: 13px; }
.biz-profile-meta a { color: #3f86a6; }
.biz-profile-anchor, .biz-profile-score { background: transparent !important; border: 0 !important; padding: 0 !important; margin-top: 12px; box-shadow: none !important; }
.biz-profile-anchor-num { background: var(--sc-blue) !important; color: #fff !important; border-radius: 10px !important; font-size: 18px !important; padding: 6px 10px !important; min-width: 0 !important; }
.biz-profile-actions { display: flex; flex-direction: column; gap: 8px; align-self: center; }
.biz-profile-actions .btn { border-radius: 10px; }
.biz-profile-actions .btn-secondary { background: #fff; border: 1px solid #bde2f0; color: var(--sc-blue); }
.biz-profile-actions .btn-sm { background: transparent; border: 0; box-shadow: none; font-size: 12px; }
.biz-profile-trust { border: 0 !important; margin-top: 18px; padding: 0 !important; gap: 18px; color: var(--sc-muted); font-size: 12px; }

/* The body: pale blue, feed left, one sticky panel right */
.section-v2:has(.biz-profile-body) { background: var(--sc-body); padding-top: 28px; }
.biz-profile-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.biz-profile-side { background: #fff; border: 1px solid #e0e9f5; border-radius: 20px; padding: 6px 22px; box-shadow: 0 6px 20px rgba(44, 85, 133, .04); }
.biz-profile-side > * { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 18px 0 !important; margin: 0 !important; }
.biz-profile-side > * + * { border-top: 1px solid #e6edf6 !important; }
.biz-profile-overall-num { font-size: 52px; font-weight: 700; letter-spacing: -2px; color: var(--sc-ink); }

/* Summary: a quiet note, not a banner */
.biz-profile-summary { background: #ecf7fb !important; border: 1px solid #e5edfc !important; border-radius: 12px !important; box-shadow: none !important; }
.biz-profile-summary::before, .biz-profile-summary::after { display: none !important; }

/* Controls: one clean row */
.biz-profile-reviews-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -.7px; }
.biz-profile-controls { background: #fff; border: 1px solid #dbe6f5; border-radius: 12px; box-shadow: none; }

/* Review cards: lighter, stars under the name, date on the right */
.review-list { display: grid; gap: 14px; }
.profile-review { background: #fff; border: 1px solid #e0e9f5; border-radius: 15px; padding: 22px 24px; box-shadow: 0 5px 15px rgba(44, 86, 137, .03); margin: 0; }
.profile-review-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av id date" "stars stars stars"; align-items: center; column-gap: 10px; row-gap: 14px; }
.profile-review-avatar { grid-area: av; width: 36px; height: 36px; border-radius: 50%; background: #f2e8dc; color: #7c6250; font-weight: 600; }
.profile-review:nth-child(3n+2) .profile-review-avatar { background: #e1eee7; color: #486e5b; }
.profile-review:nth-child(3n+3) .profile-review-avatar { background: #e9e4f4; color: #796491; }
.profile-review-id { grid-area: id; display: contents; }
.profile-review-name { grid-area: id; margin: 0; font-weight: 600; font-size: 14px; }
.profile-review-date { grid-area: date; margin: 0; font-size: 12px; color: #6780a1; }
.profile-review-head > .rating-stars { grid-area: stars; justify-self: start; }
.profile-review .rating-stars, .profile-review .rating-stars-fill { color: var(--sc-blue); }
.profile-review-title { font-size: 18px; font-weight: 600; letter-spacing: -.3px; line-height: 1.45; margin: 12px 0 8px; color: var(--sc-ink); }
.profile-review-body { font-size: 14px; line-height: 1.85; color: #536a88; }
.review-helpful { margin-top: 16px; gap: 16px; }
.review-helpful-btn, .review-share-link { border: 0 !important; background: none !important; padding: 0 !important; color: #637e9f; font-size: 12px; }
.review-helpful-btn[aria-pressed="true"] { color: var(--sc-blue); }
.review-report summary { font-size: 11px; color: #8597ad; margin-top: 10px; }
.profile-review [class*="reply"]:not(button):not(form) { background: #ebf7fb; border: 0; border-left: 3px solid #9dd3e8; border-radius: 0 10px 10px 0; }

@media (max-width: 900px) {
    .biz-profile-hero-grid { grid-template-columns: auto minmax(0, 1fr); }
    .biz-profile-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .biz-profile-body { grid-template-columns: minmax(0, 1fr); }
    .biz-profile-side { position: static; }
}
@media (max-width: 560px) {
    .biz-profile-logo { width: 66px; height: 66px; border-radius: 15px; }
    .profile-review { padding: 18px; }
}
.biz-profile-hero .rating-stars, .biz-profile-hero .rating-stars-fill, .biz-profile-side .rating-stars, .biz-profile-side .rating-stars-fill { color: var(--sc-blue); }
.biz-profile-summary-head, .biz-profile-summary-head * { font-style: normal !important; color: var(--sc-ink) !important; font-family: var(--font-sans) !important; font-size: 15px; font-weight: 600; }
.profile-review-title { margin: 10px 0 6px; }
.profile-review-body { margin: 0; }
.review-helpful { margin-top: 12px; }
.review-report { margin-top: 4px; }
.review-report summary { margin-top: 6px; }
.profile-review > :last-child { margin-bottom: 0; }
.profile-review { gap: 0; }
.profile-review > .profile-review-title { margin: 12px 0 6px; }

/* Header — a plain white bar like the approved design: text links, a bordered search, one outlined button */
.nav-v2 { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid #e9eff7; }
.nav-v2-inner { padding: 14px 0; }
.nav-v2-search { background: #fff !important; border: 1px solid #d2dff1 !important; border-radius: 10px !important; box-shadow: none !important; }
.nav-v2-links a, .nav-v2-group-btn { background: none !important; border: 0 !important; box-shadow: none !important; padding: 6px 4px !important; font-size: 13px; font-weight: 600; color: var(--sc-ink); }
.nav-v2-links { gap: 18px; }
.nav-v2-links a:hover, .nav-v2-group-btn:hover { color: var(--sc-blue); background: none !important; }
.nav-v2-links .btn, .nav-v2-links a.btn-primary, .nav-v2-links a[class*="btn"] { border: 1px solid #bde2f0 !important; background: #f5fbfd !important; color: var(--sc-blue) !important; border-radius: 10px !important; padding: 9px 14px !important; box-shadow: none !important; }
.nav-v2-lang-btn { border: 0 !important; background: none !important; }
.nav-v2-links a.is-primary { background: var(--sc-blue) !important; color: #fff !important; border-radius: 10px !important; padding: 9px 16px !important; }
.nav-v2-links a.is-primary:hover { background: #0c86b3 !important; color: #fff !important; }

/* ====================================================================
   Browse, category and search pages — the same profile language:
   a full-width blue band on top, a pale-blue body, white cards with
   blue stars and a line above each card's footer.
   ==================================================================== */
.breadcrumbs:has(+ .cat-index-hero), .breadcrumbs:has(+ .cat-hero),
.breadcrumbs:has(+ * .cat-index-hero), .breadcrumbs:has(+ * .cat-hero) { background: var(--sc-band); margin: 0; padding: 22px 0 6px; }
.cat-index-hero, .cat-hero { background: var(--sc-band) !important; border-bottom: 1px solid var(--sc-band-line); padding: 18px 0 34px !important; margin: 0 !important; }
.cat-index-hero::before, .cat-index-hero::after, .cat-hero::before, .cat-hero::after { display: none !important; }
.cat-index-hero h1, .cat-hero h1 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -1.4px; line-height: 1.15; color: var(--sc-ink); }
.cat-index-hero p, .cat-hero p { color: #5f7390; }
.cat-hero-search { background: #fff; border: 1px solid #d2dff1 !important; border-radius: 13px !important; box-shadow: 0 10px 28px rgba(53, 92, 148, .10) !important; }
.cat-hero-search button { border-radius: 9px !important; }
.cat-hero-inner > [class*="icon"], .cat-hero-icon { background: #fff !important; border: 1px solid #dce7f8; border-radius: 16px !important; color: #1592c0 !important; }
.cat-hero-subs a, .cat-sub-list a { background: #fff !important; border: 1px solid #dfe8f6 !important; border-radius: 8px !important; box-shadow: none !important; font-size: 13px; }
.cat-hero-subs a:hover, .cat-sub-list a:hover { border-color: #a6d7eb !important; color: var(--sc-blue); }

/* body sections */
.cat-index-hero + .section-v2, .section-v2:has(.cat-grid), .section-v2:has(.biz-grid), .section-v2--alt:has(.cat-spotlights) { background: var(--sc-body); }
.section-v2--alt:has(.cat-spotlights) { border-bottom: 1px solid #e9eff7; }

/* category tiles: the homepage panel's tiles */
.cat-grid { gap: 12px; }
.cat-tile { background: #fff !important; border: 1px solid #e6edf7 !important; border-radius: 12px !important; box-shadow: none !important; padding: 13px 15px !important; }
.cat-tile:hover { background: #e4f4fa !important; border-color: #a6d7eb !important; transform: none !important; }
.cat-tile-icon { background: #f2f9fc !important; color: #1592c0 !important; border-radius: 10px !important; }
.cat-tile-name { font-weight: 600; color: var(--sc-ink); }
.cat-tile-arrow { color: #9db1cc; }

/* spotlights */
.cat-spotlight { background: #fff !important; border: 1px solid #e0e9f5 !important; border-radius: 16px !important; box-shadow: none !important; }
.cat-spotlight .rating-stars, .cat-spotlight .rating-stars-fill { color: var(--sc-blue); }

/* filter chips and sort */
.cat-filter-chips { background: #fff; border: 1px solid #dbe6f5 !important; border-radius: 12px !important; box-shadow: none !important; }
.rating-pill { border-radius: 7px !important; }
.rating-pill.is-active { background: #eaf6fb !important; color: var(--sc-blue) !important; border: 1px solid #a6d7eb !important; font-weight: 600; }

/* business cards */
.biz-grid { gap: 16px; }
.biz-card { background: #fff !important; border: 1px solid #dfe7f2 !important; border-radius: 20px !important; box-shadow: 0 4px 16px rgba(32, 69, 116, .03) !important; padding: 21px !important; transform: none !important; }
.biz-card:hover { border-color: #a8d8eb !important; box-shadow: 0 7px 21px rgba(27, 70, 117, .07) !important; }
.biz-card-logo { width: 54px; height: 54px; border-radius: 14px !important; background: #f3f6fb; border: 1px solid #e0e7f0; overflow: hidden; }
.biz-card-name { font-size: 16px; font-weight: 700; letter-spacing: -.3px; color: var(--sc-ink); }
.biz-card-meta { font-size: 12px; color: var(--sc-muted); }
.biz-card-rating-num { background: transparent !important; color: var(--sc-ink) !important; padding: 0 !important; font-weight: 700; font-size: 15px !important; }
.biz-card .rating-stars, .biz-card .rating-stars-fill, .search-results .rating-stars-fill { color: var(--sc-blue); }
.biz-card blockquote, .biz-card q, .biz-card-quote { color: #657993; font-size: 13px; line-height: 1.75; }
.biz-card > :last-child { border-top: 1px solid var(--sc-line, #dfe7f1); padding-top: 11px; margin-top: 14px; font-size: 12px; font-weight: 600; }
.biz-card-verified { background: transparent !important; border: 0 !important; color: #3f86a6 !important; }

/* Search results — band on top, filters panel, white result rows with blue stars */
.search-hero { background: var(--sc-band) !important; border-bottom: 1px solid var(--sc-band-line); padding: 34px 0 30px !important; margin: 0 !important; }
.search-hero::before, .search-hero::after { display: none !important; }
.search-hero h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -1.3px; color: var(--sc-ink); }
.search-hero-form { background: #fff; border: 1px solid #d2dff1 !important; border-radius: 13px !important; box-shadow: 0 10px 28px rgba(53, 92, 148, .10) !important; overflow: hidden; }
.search-hero-form button { border-radius: 9px !important; margin: 5px; }
.fbar { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.fbar-row { background: #fff !important; border: 1px solid #dbe6f5 !important; border-radius: 12px !important; box-shadow: none !important; }
.section-v2:has(.search-layout) { background: var(--sc-body); }
.search-filters { background: #fff !important; border: 1px solid #e0e9f5 !important; border-radius: 20px !important; box-shadow: none !important; }
.search-filter-group a.is-active, .search-filter-group .is-active { background: #eaf6fb !important; color: var(--sc-blue) !important; border-radius: 8px !important; }
.search-filter-stars, .search-filter-stars * { color: var(--sc-blue) !important; }
.search-list { display: grid; gap: 12px; }
.search-row { background: #fff !important; border: 1px solid #dfe7f2 !important; border-radius: 16px !important; box-shadow: 0 4px 16px rgba(32, 69, 116, .03) !important; padding: 18px 20px !important; }
.search-row:hover { border-color: #a8d8eb !important; }
.search-row-logo { border-radius: 14px !important; background: #f3f6fb; border: 1px solid #e0e7f0; overflow: hidden; }
.search-row-name { font-weight: 700; color: var(--sc-ink); letter-spacing: -.3px; }
.search-row-meta { color: var(--sc-muted); font-size: 12px; }
.search-row-snippet { color: #657993; font-size: 13px; line-height: 1.7; }
.search-row .rating-stars, .search-row .rating-stars-fill { color: var(--sc-blue); }

/* Write a review — business in the band, then one clean form card per step */
.write-hero { background: var(--sc-band) !important; border-bottom: 1px solid var(--sc-band-line); padding: 26px 0 30px !important; margin: 0 !important; }
.write-hero::before, .write-hero::after { display: none !important; }
.write-steps li { background: #fff !important; border: 1px solid #dfe8f6 !important; border-radius: 8px !important; font-size: 12px; }
.write-steps li.is-active { border-color: #a6d7eb !important; color: var(--sc-blue); font-weight: 600; }
.write-hero-biz { background: #fff !important; border: 1px solid #dce7f8 !important; border-radius: 20px !important; box-shadow: 0 5px 16px rgba(55, 97, 141, .05) !important; }
.write-hero-logo { border-radius: 14px !important; border: 1px solid #e0e7f0; overflow: hidden; }
.section-v2:has(.write-form) { background: var(--sc-body); }
.write-card { background: #fff !important; border: 1px solid #bfe3f0 !important; border-radius: 20px !important; box-shadow: 0 6px 20px rgba(44, 86, 137, .06) !important; padding: 26px 26px 24px !important; margin: 0 0 18px !important; }
.write-card > legend { float: left; width: 100%; padding: 0 !important; margin: 0 0 4px !important; background: none !important; font-size: 20px; font-weight: 700; letter-spacing: -.5px; color: var(--sc-ink); }
.write-card > legend + * { clear: both; }
.write-step-tag { background: #eaf6fb !important; color: var(--sc-blue) !important; border-radius: 6px !important; font-size: 11px; }
.rating-picker { gap: 8px; justify-content: flex-start !important; }
.rating-picker label, .rating-picker button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #dbe6f8; border-radius: 9px; background: #fff; color: #bfd0e6; }
.rating-picker label:hover, .rating-picker button:hover { border-color: #a2d5ea; }
.write-form input[type="text"], .write-form textarea { border: 1px solid #d7e3f4 !important; border-radius: 9px !important; }
.media-uploader { border: 1px dashed #bfe3f0 !important; border-radius: 14px !important; background: #f5fbfd !important; }
.media-uploader > legend { float: left; width: 100%; padding: 0 !important; margin: 0 0 8px !important; background: none !important; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sc-ink); }
.media-uploader > legend + * { clear: both; }
.media-uploader { padding: 16px !important; }
.write-submit { background: #fff !important; border: 1px solid #e0e9f5 !important; border-radius: 20px !important; box-shadow: none !important; }

/* Blog list and info pages — band on top; posts as a grid of white cards, picture first */
.breadcrumbs:has(+ .doc-hero), .breadcrumbs:has(+ * .doc-hero) { background: var(--sc-band); margin: 0; padding: 22px 0 6px; }
.doc-hero { background: var(--sc-band) !important; border-bottom: 1px solid var(--sc-band-line) !important; padding: 18px 0 34px !important; margin: 0 !important; }
.doc-hero::before, .doc-hero::after { display: none !important; }
.doc-hero h1 { font-size: clamp(30px, 3.6vw, 44px) !important; font-weight: 700 !important; letter-spacing: -1.4px; color: var(--sc-ink); }
.doc-hero-lede { color: #5f7390 !important; }
.section-v2:has(.blog-list) { background: var(--sc-body); }
.blog-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px !important; list-style: none; padding: 0; }
.blog-card { display: flex !important; flex-direction: column; gap: 0 !important; background: #fff !important; border: 1px solid #dfe7f2 !important; border-radius: 20px !important;
    box-shadow: 0 4px 16px rgba(32, 69, 116, .03) !important; padding: 0 !important; overflow: hidden; }
.blog-card:hover { border-color: #a8d8eb !important; }
.blog-card > a:first-child { border-radius: 0 !important; aspect-ratio: 16 / 9 !important; }
.blog-card > div { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.blog-card h2 { font-family: var(--font-sans) !important; font-size: 17px !important; font-weight: 700; letter-spacing: -.35px; line-height: 1.4; }
.blog-card h2 + p { font-size: 13px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.blog-card > div > :last-child { margin-top: auto !important; padding-top: 12px; border-top: 1px solid #e6edf6; font-size: 12px; font-weight: 600; }
@media (max-width: 900px) { .blog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .blog-list { grid-template-columns: minmax(0, 1fr); } }
/* Posts without a picture get a branded panel, so every card keeps the same shape */
.blog-card > div:first-child::before { content: ''; display: block; aspect-ratio: 16 / 9; margin: -18px -20px 18px;
    background: #eaf6fb url('../img/shopperchecked-logo.png') center / 150px auto no-repeat; border-bottom: 1px solid #dce7f7; }

/* Log in / sign up — the form card on the pale-blue ground */
.auth-v2 { background: var(--sc-band) radial-gradient(ellipse at 86% 10%, #d4eef8 0, transparent 55%) !important; padding-top: 56px !important; padding-bottom: 72px !important; }
.auth-v2::before, .auth-v2::after { display: none !important; }
.auth-v2-card { background: #fff !important; border: 1px solid #dce7f8 !important; border-radius: 20px !important; box-shadow: 0 16px 38px rgba(20, 50, 82, .08) !important; }
.auth-v2-head h1, .auth-v2-card h1 { font-size: 28px !important; font-weight: 700 !important; letter-spacing: -.9px; color: var(--sc-ink); }

/* Footer — flat, pale blue, a line on top (no rounded slab) */
.footer-v2 { background: #f3f7fc !important; border-top: 1px solid #e4ebf5 !important; border-radius: 0 !important; box-shadow: none !important; margin-top: 0 !important; }
.footer-v2::before, .footer-v2::after { display: none !important; }
.footer-v2-col h4 { font-size: 12px !important; letter-spacing: .02em !important; text-transform: none !important; font-weight: 700; color: var(--sc-ink) !important; }
.footer-v2-col a { font-size: 13px; color: #5b7292 !important; }
.footer-v2-social a { box-shadow: none !important; border: 1px solid #dce6f4; }
.footer-v2-bar { font-size: 12px; color: #6c7f99 !important; border-top-color: #dfe7f2 !important; }
/* Primary buttons keep white text even inside article text, where links turn blue */
a.btn-primary, a.btn-primary:visited, a.btn-primary:hover { color: #fff !important; text-decoration: none !important; }

/* Account and business dashboards — light sidebar (no dark slab), blue highlight on the active item */
.acc-side, .biz-dash-side { background: #fff !important; color: var(--sc-ink) !important; border-right: 1px solid #e4ebf5; }
.acc-side-email, .acc-side-toggle, .biz-dash-side-role { color: var(--sc-muted) !important; }
.acc-side-identity, .biz-dash-side-head { border-color: #e9eff7 !important; }
.biz-dash-side-name, .acc-side-id-body strong, .acc-side-id-body b { color: var(--sc-ink) !important; }
.acc-side-item, .biz-dash-item, .biz-dash-nav a { color: #3d557a !important; border-radius: 8px; }
.acc-side-item:hover, .biz-dash-item:hover, .biz-dash-nav a:hover { background: #f1f8fb !important; color: var(--sc-ink) !important; }
.acc-side-item.is-active, .biz-dash-item.is-active { background: #eaf6fb !important; color: var(--sc-blue) !important; font-weight: 600; box-shadow: inset 3px 0 0 var(--sc-blue); }
.acc-side-nav h4, .acc-side-nav [class*="label"], .acc-side [class*="section"] { color: #8597ad !important; }
.biz-dash-side-foot a, .biz-dash-side-foot .btn, .acc-side-foot a.is-upgrade { background: #eaf6fb !important; color: var(--sc-blue) !important; border: 1px solid #bde2f0 !important; }
.biz-dash-side a[href*="my-businesses"], .biz-dash-side-inner > a:first-child { background: #fff !important; color: var(--sc-ink) !important; border: 1px solid #dfe7f2 !important; }
.biz-dash-side button, .acc-side button { background: #fff !important; color: var(--sc-muted) !important; border-color: #dfe7f2 !important; }
.biz-dash-side svg, .acc-side svg { color: inherit; }
/* star distribution bars: one brand blue, as on the business page */
[style*="background:#6d28d9"], [style*="background: #6d28d9"], [style*="background:#dc2626"], [style*="background: #dc2626"] { background: var(--sc-blue) !important; }
.acc-side-id-body, .acc-side-id-body * { color: var(--sc-ink) !important; } .acc-side-id-body .acc-side-email { color: var(--sc-muted) !important; }
.biz-h1-suffix { font-weight: 600; color: #3f5876; }

/* ====================================================================
   Site header (layouts/nav.site.php) — a slim navy trust strip, then a
   clean white main bar that stays pinned (the strip scrolls away).
   ==================================================================== */
.scn { position: sticky; top: calc(-36px + env(safe-area-inset-top, 0px)); z-index: 60; font-family: var(--font-sans); }
.scn-strip { background: #0f2a44; color: #c3d6e8; font-size: 12.5px; }
.scn-strip-inner { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.scn-strip-trust { margin: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scn-strip-trust svg { color: #5fc8ec; flex: none; }
.scn-dot { opacity: .5; margin: 0 2px; }
.scn-strip-links { display: flex; align-items: center; gap: 20px; }
.scn-strip-links a, .scn-lang > button { color: #c3d6e8; text-decoration: none; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: inherit; }
.scn-strip-links a:hover, .scn-lang > button:hover { color: #fff; }
.scn-lang { position: relative; }

.scn-main { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); border-bottom: 1px solid #e6eef4; transition: box-shadow .2s; }
.scn.is-scrolled .scn-main { box-shadow: 0 6px 24px rgba(15, 42, 68, .08); }
.scn-main-inner { height: 74px; display: flex; align-items: center; gap: 30px; }
.scn-brand { flex: none; display: flex; }
.scn-brand img { height: 42px; width: auto; display: block; }
.scn-links { display: flex; align-items: center; gap: 4px; }
.scn-link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 10px 12px; font: 600 14px/1 var(--font-sans); color: #142d50; text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: 8px; }
.scn-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: #119ed1; transform: scaleX(0); transition: transform .18s; }
.scn-link:hover, .scn-link.is-here { color: #0c86b3; }
.scn-link:hover::after, .scn-link.is-here::after { transform: scaleX(1); }
.scn-group { position: relative; }
.scn-group.is-open > .scn-link { color: #0c86b3; }

.scn-menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px; margin: 0; padding: 8px; list-style: none; background: #fff;
    border: 1px solid #e3edf3; border-radius: 14px; box-shadow: 0 18px 44px rgba(15, 42, 68, .14); z-index: 70; }
.scn-group.is-open > .scn-menu, .scn-lang.is-open > .scn-menu { display: block; }
.scn-menu--right { left: auto; right: 0; }
.scn-menu li a, .scn-menu > a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; color: #142d50; text-decoration: none; font-size: 14px; font-weight: 500; }
.scn-menu li a:hover { background: #eaf6fb; color: #0c86b3; }
.scn-menu--cats { width: 460px; padding: 16px; }
.scn-menu--cats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.scn-menu--cats small { color: #8597ad; font-size: 12px; font-variant-numeric: tabular-nums; }
.scn-menu-title { margin: 0 0 8px; padding: 0 12px; font-size: 12px; font-weight: 600; color: #61738c; }
.scn-menu-all { margin-top: 8px; border-top: 1px solid #edf2f6; padding-top: 12px !important; color: #0c86b3 !important; font-weight: 600 !important; }
.scn-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid #edf2f6; margin-bottom: 6px; display: grid; gap: 2px; }
.scn-menu-head small { color: #61738c; font-size: 12px; }
.scn-menu-out a { color: #b42318 !important; }
.scn-mobile-extra { display: none; }

.scn-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.scn-search { display: flex; align-items: center; gap: 8px; width: 230px; height: 42px; padding: 0 14px; background: #f3f8fb; border: 1px solid #e1ecf2; border-radius: 12px; color: #6b8299; transition: border-color .15s, background .15s, width .2s; }
.scn-search:focus-within { background: #fff; border-color: #7ccde9; box-shadow: 0 0 0 3px rgba(17, 158, 209, .14); width: 270px; }
.scn-search input { border: 0 !important; background: none !important; box-shadow: none !important; outline: 0; width: 100%; min-width: 0; padding: 0 !important; font: 500 14px var(--font-sans); color: #142d50; }
.scn-login { font: 600 14px var(--font-sans); color: #142d50; text-decoration: none; }
.scn-login:hover { color: #0c86b3; }
.scn-cta { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; background: #119ed1; color: #fff !important; font: 700 14px var(--font-sans); text-decoration: none; box-shadow: 0 6px 16px rgba(17, 158, 209, .28); transition: background .15s, transform .15s; }
.scn-cta:hover { background: #0c86b3; transform: translateY(-1px); }
.scn-avatar-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; color: #61738c; }
.scn-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #119ed1, #3cb3dd); color: #fff; font: 700 13px var(--font-sans); }
.scn-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scn-burger { display: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid #e1ecf2; background: #fff; color: #142d50; cursor: pointer; place-items: center; }

@media (max-width: 1180px) { .scn-search { width: 180px; } .scn-search:focus-within { width: 210px; } .scn-main-inner { gap: 18px; } }
@media (max-width: 1040px) {
    .scn-burger { display: grid; }
    .scn-search { display: none; }
    .scn-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px max(16px, env(safe-area-inset-left, 0px)) 18px;
        background: #fff; border-bottom: 1px solid #e6eef4; box-shadow: 0 18px 30px rgba(15, 42, 68, .1); max-height: calc(100vh - 110px); overflow: auto; }
    .scn.is-menu-open .scn-links { display: flex; }
    .scn-main { position: relative; }
    .scn-link { width: 100%; justify-content: space-between; padding: 14px 6px; font-size: 15px; border-bottom: 1px solid #f0f4f7; border-radius: 0; }
    .scn-link::after { display: none; }
    .scn-menu { position: static; box-shadow: none; border: 0; padding: 4px 0 8px; width: auto !important; }
    .scn-menu--cats ul { grid-template-columns: 1fr; }
    .scn-mobile-extra { display: block; }
}
@media (max-width: 640px) {
    .scn-strip-links a:not(:first-child) { display: none; }
    .scn-strip-trust { font-size: 11.5px; }
    .scn-main-inner { height: 64px; }
    .scn-brand img { height: 34px; }
    .scn-cta span { display: none; }
    .scn-cta { padding: 0 12px; }
    .scn-login { display: none; }
}

/* ====================================================================
   Site footer (layouts/footer.site.php) — deep navy, a business call
   to action, brand promise, four link columns, the legal bar.
   ==================================================================== */
/* header labels never wrap; on smaller laptops the search narrows first, then Top 100 steps out */
.scn-link, .scn-login, .scn-cta, .scn-strip-links a { white-space: nowrap; }
.scn-links, .scn-actions { flex-wrap: nowrap; }
.scn-search { flex: 0 1 230px; min-width: 150px; width: auto; }
.scn-search:focus-within { flex-basis: 270px; width: auto; }
@media (max-width: 1480px) { .scn-link[href$="/top-100"] { display: none; } }
@media (max-width: 1040px) { .scn-link[href$="/top-100"] { display: flex; } }
.scn svg { flex: none; }
.scn-search { min-width: 190px; }

/* Write a review — form on the left, tips and the moderation promise on the right */
.write-body { padding-top: 32px !important; }
.write-container { max-width: 1120px !important; }
.write-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.write-aside { display: grid; gap: 14px; position: sticky; top: 96px; }
.write-aside-card { background: #fff; border: 1px solid #dceaf1; border-radius: 18px; padding: 22px; }
.write-aside-card h3 { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: #142d50; letter-spacing: -.2px; }
.write-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.write-tips li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 13.5px; line-height: 1.6; color: #61738c; }
.write-tips li svg { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: #eaf6fb; color: #119ed1; box-sizing: border-box; }
.write-tips b { color: #142d50; font-weight: 600; }
.write-aside-card--trust { background: linear-gradient(160deg, #0f2a44, #164b6e); border-color: transparent; }
.write-aside-card--trust h3 { color: #fff; margin-top: 12px; }
.write-aside-card--trust p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.7; color: #b9cfe2; }
.write-aside-card--trust a { font-size: 13.5px; font-weight: 600; color: #7ccde9; text-decoration: none; }
.write-aside-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #7ccde9; }
.write-aside-icon svg { width: 20px; height: 20px; }
/* the star picker: big, left-aligned, the word beside it */
.write-card .rating-picker { justify-content: flex-end !important; flex-direction: row-reverse; display: inline-flex !important; gap: 10px; margin-top: 6px; }
.write-card .rating-picker label { width: 58px !important; height: 58px !important; border-radius: 14px !important; }
.write-card .rating-picker label svg { width: 32px; height: 32px; }
.write-card .rating-picker input:checked ~ label, .write-card .rating-picker label:hover, .write-card .rating-picker label:hover ~ label { background: #119ed1 !important; border-color: #119ed1 !important; color: #fff !important; }
.rating-picker-word { text-align: left !important; font-size: 14px !important; font-weight: 600; color: #0c86b3 !important; }
/* steps and business on one row in the band */
.write-hero .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "biz steps"; align-items: center; gap: 20px; }
.write-hero .write-steps { grid-area: steps; margin: 0 !important; }
.write-hero .write-hero-biz { grid-area: biz; margin: 0 !important; }
@media (max-width: 980px) {
    .write-layout { grid-template-columns: minmax(0, 1fr); }
    .write-aside { position: static; }
    .write-hero .container { grid-template-columns: minmax(0, 1fr); grid-template-areas: "steps" "biz"; }
}
@media (max-width: 520px) { .write-card .rating-picker label { width: 48px !important; height: 48px !important; } }
/* footer: every feature page, five groups */

/* ====================================================================
   Site footer (layouts/footer.site.php): a navy-to-teal "check before
   you buy" band with search and live figures, then a light area with
   category chips, three link cards, a flowing feature index, a slim bar.
   ==================================================================== */
.scx { font-family: var(--font-sans); background: #f4f9fc; border-top: 1px solid #e2edf3; color: #3d557a; }
.scx a { text-decoration: none; }

.scx-check { background: linear-gradient(120deg, #0f2a44 0%, #12466a 55%, #0e7fae 100%); color: #fff; position: relative; overflow: hidden; }
.scx-check::after { content: ""; position: absolute; right: -120px; top: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 205, 233, .28), transparent 65%); pointer-events: none; }
.scx-check-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 52px; padding-bottom: 52px; }
.scx-check h2 { margin: 0 0 8px; font: 700 clamp(28px, 3.4vw, 40px)/1.1 var(--font-sans); letter-spacing: -1.2px; color: #fff; }
.scx-check p { margin: 0 0 22px; font-size: 15.5px; color: #c4d9ea; }
.scx-search { display: flex; align-items: center; gap: 10px; max-width: 560px; height: 58px; padding: 0 6px 0 18px; background: #fff; border-radius: 14px; color: #6b8299; box-shadow: 0 18px 40px rgba(4, 20, 36, .35); }
.scx-search input { flex: 1; min-width: 0; border: 0 !important; background: none !important; box-shadow: none !important; outline: 0; padding: 0 !important; font: 500 15px var(--font-sans); color: #142d50; }
.scx-search button { height: 46px; padding: 0 22px; border: 0; border-radius: 10px; background: #119ed1; color: #fff; font: 700 14.5px var(--font-sans); cursor: pointer; }
.scx-search button:hover { background: #0c86b3; }
.scx-figures { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.scx-figures div { padding: 20px 18px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.scx-figures dt { font: 700 26px/1.1 var(--font-sans); letter-spacing: -.8px; color: #fff; font-variant-numeric: tabular-nums; }
.scx-figures dd { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: #b4cde0; }

.scx-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 30px 0 26px; border-bottom: 1px solid #e2edf3; }
.scx-label { margin-right: 6px; font-size: 13px; font-weight: 700; color: #142d50; }
.scx-cats a { padding: 7px 13px; border: 1px solid #d8e7ef; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 500; color: #3d557a; transition: all .15s; }
.scx-cats a:hover { border-color: #119ed1; color: #0c86b3; background: #eaf6fb; }
.scx-cats a.scx-cats-all { border-color: transparent; background: none; color: #0c86b3; font-weight: 600; }

.scx-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 30px 0; }
.scx-group { background: #fff; border: 1px solid #e2edf3; border-radius: 18px; padding: 22px 24px; }
.scx-group h3 { margin: 0 0 4px; font: 700 16px var(--font-sans); color: #142d50; letter-spacing: -.2px; }
.scx-group p { margin: 0 0 14px; font-size: 13px; color: #6b8299; }
.scx-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
.scx-group a { font-size: 14px; font-weight: 500; color: #3d557a; }
.scx-group a:hover { color: #0c86b3; }

.scx-index { padding: 22px 26px; margin-bottom: 26px; border-radius: 18px; background: #eaf4f9; display: grid; gap: 10px; }
.scx-index-row { margin: 0; font-size: 13px; line-height: 1.9; color: #9db1c4; }
.scx-index-row a { color: #4a6385; }
.scx-index-row a:hover { color: #0c86b3; text-decoration: underline; }
.scx-index-row span { margin: 0 7px; }
.scx-index-row .scx-index-group { margin-right: 12px; font-weight: 700; color: #142d50; }

.scx-bar { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding: 22px 0 30px; border-top: 1px solid #e2edf3; }
.scx-logo img { height: 34px; width: auto; display: block; }
.scx-copy { margin: 0; font-size: 13px; color: #6b8299; }
.scx-legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.scx-legal a { font-size: 13px; font-weight: 500; color: #3d557a; }
.scx-legal a:hover { color: #0c86b3; }

@media (max-width: 980px) {
    .scx-check-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .scx-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .scx-figures { grid-template-columns: minmax(0, 1fr); }
    .scx-search button { padding: 0 14px; }
    .scx-legal { margin-left: 0; }
    .scx-index { padding: 18px; }
}

/* An always-visible, branded page scrollbar. Styling it stops Chrome and Edge on
   Windows from using their auto-hiding overlay scrollbar; Firefox takes the colours. */
html { overflow-y: scroll; scrollbar-color: #8fd0e8 #eef5f9; scrollbar-width: auto; }
html::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track { background: #eef5f9; }
html::-webkit-scrollbar-thumb { background: #8fd0e8; border-radius: 10px; border: 3px solid #eef5f9; }
html::-webkit-scrollbar-thumb:hover { background: #119ed1; }