:root {
    /* ------------------------------------------------------------------
       Direction C - "Formula"
       Skincare's register rather than makeup's: cool clay grounds, a deep
       sage accent, a soft serif for display. Vermilion is deliberately
       demoted to sale markers only (--sale), so a discount is the one
       genuinely loud thing on the page.
       ------------------------------------------------------------------ */

    /* Accent - sage. Carries navigation, links, buttons and active states. */
    --sage:        #3F6B57;
    --sage-dark:   #2F5241;
    --sage-tint:   #E6EDE8;
    --sage-tint-2: #D3E0D8;

    /* Sale only. Never used for navigation or general emphasis. */
    --sale:        #E23A1E;
    --sale-tint:   #FBE7E2;

    /* Neutrals - cool clay, biased very slightly green so they sit with the sage */
    --ink:         #1E2422;
    --ink-soft:    #3C4643;
    --ink-muted:   #6E7873;
    --line:        #D4D8D0;
    --line-soft:   #E2E5DF;
    --cream:       #EDEEEA;   /* page ground */
    --surface:     #E3E7DF;   /* wells, tiles, inactive tabs */
    --surface-white:#F7F8F5;  /* cards and panels */

    /* Status */
    --success: #3F6B57;
    --danger:  #B3261E;
    --warn:    #8A6A22;

    /* Aliases kept so existing rules keep working. --rose now resolves to
       the sage accent; anything that must stay red uses --sale explicitly. */
    --rose:        var(--sage);
    --rose-dark:   var(--sage-dark);
    --rose-tint:   var(--sage-tint);
    --rose-tint-2: var(--sage-tint-2);
    --gold:        var(--sage);
    --gold-light:  var(--sage-tint);
    --pink:        var(--sage);
    --pink-dark:   var(--sage-dark);
    --pink-light:  var(--sage-tint);
    --dark:        var(--ink);
    --gray:        var(--ink-muted);
    --border:      var(--line);
    --bg:          var(--cream);

    /* Softly rounded rather than sharp - the calm register needs the edge off */
    --r-sm: 3px;
    --r-md: 4px;
    --r-lg: 6px;
    --r-pill: 999px;

    /* Shadows are barely there; this direction leans on space, not elevation */
    --shadow-sm: 0 1px 2px rgba(30, 36, 34, .06);
    --shadow-md: 0 2px 10px rgba(30, 36, 34, .07);
    --shadow-lg: 0 10px 30px rgba(30, 36, 34, .10);

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Structural knobs the theme overrides. Defaults match Formula. */
    --grid-gap: 18px;
    --tile-gap: 14px;
    --card-border: 1px;
    --section-gap: 72px;
    --head-weight: 400;
    --head-track: -.01em;
    --head-transform: none;
    --on-accent: #F7F8F5;

    /* Page width. Set in Admin > Settings > Appearance:
       boxed 1220px | wide 1600px | full 100%. Every page gutter - header,
       top bar, mega menu, sections, footer - reads this one value. */
    --wrap-max: 1220px;

    /* The colour behind the box in boxed mode. Each theme sets its own. */
    --outside: #DDE1D9;
    --box-edge: rgba(30, 36, 34, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
.container { max-width: var(--wrap-max); margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--head-weight); letter-spacing: var(--head-track); line-height: 1.15; text-wrap: balance; }

/* Top announcement bar (admin-managed via Menus > Top Bar) */
.topbar {
    background: var(--ink);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 7px 16px;
}
.topbar-inner {
    max-width: var(--wrap-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.topbar-messages { flex: 1; text-align: center; }
.topbar a { color: #fff; }
.topbar a:hover { color: var(--rose); }
.topbar-sep { opacity: .45; margin: 0 14px; }

.topbar-social { display: flex; align-items: center; gap: 2px; flex: none; }
.topbar-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #fff;
    opacity: .85;
    transition: opacity .15s, color .15s, background .15s;
}
.topbar-social-link:hover { opacity: 1; color: var(--rose); background: rgba(255,255,255,.08); }
.topbar-social-link svg { display: block; }

/* Keep the messages centred by balancing the social block on the left. */
@media (min-width: 901px) {
    .topbar-inner::before { content: ""; flex: none; width: 90px; }
}
@media (max-width: 900px) {
    .topbar { padding: 6px 12px; }
    .topbar-inner { flex-direction: column; gap: 4px; }
    .topbar-messages { width: 100%; }
    .topbar-sep { margin: 0 8px; }
}

/* Header */
.site-header {
    background: var(--surface-white);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(29,26,34,.03);
}
.header-main {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 18px 20px;
    max-width: var(--wrap-max);
    margin: 0 auto;
}
.logo, .footer-top {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
/* The logo is admin-configurable, so it is capped here: a long wordmark or a
   large height setting must never be able to push the header out of shape. */
.site-logo-svg, .site-logo-img { display: block; height: auto; max-width: min(100%, 280px); }
/* The inline SVG logo paints in currentColor, so this is what actually colours
   the wordmark. --ink is light on the dark themes, so it stays legible there. */
.site-logo-svg { color: var(--ink); }
.logo { min-width: 0; }
.logo { flex: none; }
/* Legacy text lockup - kept for any markup still using it */
.logo-mark {
    background: var(--rose);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .5px;
    padding: 7px 10px;
    line-height: 1;
}
.logo-word {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.logo-word b {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: .2px;
    color: var(--ink);
}
.logo-word small {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.search-form {
    flex: 1;
    display: flex;
    background: var(--cream);
    border: 1px solid var(--line);
    padding: 2px 2px 2px 16px;
    transition: border-color .15s;
}
.search-form:focus-within { border-color: var(--ink); }
.search-form input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 6px;
    font-size: 14px;
    font-family: var(--font-body);
    outline: none;
    color: var(--ink);
}
.search-form input::placeholder { color: var(--ink-muted); }
.search-form button {
    background: var(--ink);
    color: #fff;
    border: none;
    padding: 0 22px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: background .15s;
}
.search-form button:hover { background: var(--rose); }
.header-actions { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.header-actions a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink); font-weight: 700; font-size: 13.5px;
    padding: 11px 18px; border: 1.5px solid var(--ink); transition: background .15s, color .15s;
}
.header-actions a:hover { background: var(--ink); color: #fff; }
.header-actions a.action-signin { border-color: transparent; color: var(--rose); padding: 11px 6px; }
.header-actions a.action-signin:hover { background: none; color: var(--rose-dark); text-decoration: underline; }
.header-actions a.action-bag { background: var(--rose); border-color: var(--rose); color: #fff; }
.header-actions a.action-bag:hover { background: var(--rose-dark); border-color: var(--rose-dark); }
.header-actions .icon { display: none; }
.cart-badge {
    background: var(--on-accent);
    color: var(--rose);
    font-size: 11px;
    font-weight: 800;
    padding: 1px 7px;
}

/* Category nav + mega menu */
.category-nav {
    border-top: 1px solid var(--line);
    background: var(--surface-white);
    position: relative;
    z-index: 90;
}
.category-nav ul {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 12px 20px;
    max-width: var(--wrap-max);
    margin: 0 auto;
    flex-wrap: wrap;
}
@media (max-width: 900px) {
    .category-nav ul { flex-wrap: nowrap; overflow-x: auto; }
}
.category-nav li { position: static; }
.category-nav a {
    position: relative;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    color: var(--ink);
    padding-bottom: 4px;
}
.category-nav a::after {
    content: "";
    position: absolute; left: 0; right: 100%; bottom: 0;
    height: 2px; background: var(--rose);
    transition: right .2s ease;
}
.category-nav a:hover, .category-nav a.active { color: var(--ink); }
.category-nav a:hover::after, .category-nav a.active::after { right: 0; }

.category-nav li.nav-offers { margin-left: auto; }
.ribbon {
    display: inline-block;
    color: var(--rose) !important;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding-bottom: 4px;
}
.ribbon::before { display: none; }
.ribbon::after { background: var(--rose); }

.mega-panel {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--surface-white);
    border-top: 3px solid var(--rose);
    box-shadow: var(--shadow-lg);
    z-index: 95;
    padding: 30px 0;
}
.category-nav li.has-mega:hover .mega-panel { display: block; }
.mega-panel-inner {
    max-width: var(--wrap-max); margin: 0 auto; padding: 0 20px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 26px;
}
.mega-col h4 {
    font-family: var(--font-display);
    font-size: 14px; font-weight: 500; margin: 0 0 14px; color: var(--ink);
    padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.mega-col a { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; padding-bottom: 0; }
.mega-col a::after { display: none; }
.mega-col a:hover { color: var(--rose); }

@media (max-width: 900px) {
    .mega-panel { display: none !important; }
}

/* Hero banner (static fallback, unused when the slider is present) */
.hero {
    background: linear-gradient(120deg, var(--rose-tint), var(--rose-tint-2));
    padding: 50px 16px;
    text-align: center;
    margin-bottom: 30px;
}
.hero h1 { font-size: 34px; margin: 0 0 10px; color: var(--ink); }
.hero p { color: var(--ink-muted); margin: 0 0 20px; font-size: 16px; }

/* Hero row: a scrolling carousel (majority width) + a fixed 320px sidebar,
   matching the SR Cosmetics design file's two-column hero. Carousel content
   is admin-managed via Hero Slides; the sidebar surfaces live coupons. */
.hero-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    border-bottom: 2px solid var(--line);
    margin-bottom: 48px;
}
.hero-carousel { position: relative; border-right: 2px solid var(--line); overflow: hidden; }
.hero-carousel-track {
    display: flex;
    /* Each slide keeps its own natural height instead of being stretched to
       the tallest one. Without this a 5:1 banner sharing the slider with a
       16:9 slide sat in ~450px of dead space. The track's height is then set
       to the slide in view by main.js; the transition keeps the change from
       snapping. */
    align-items: flex-start;
    transition: height .28s ease;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.hero-carousel-track::-webkit-scrollbar { display: none; }
.hero-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    min-height: 420px;
}
.hero-slide-text { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; background: var(--ink); color: #fff; }
.hero-slide-tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.hero-slide-text h1 { font-size: 44px; line-height: 1.05; letter-spacing: -.03em; margin: 0; max-width: 11ch; }
.hero-slide-text p { margin: 0; font-size: 15px; max-width: 34ch; opacity: .8; }
.hero-slide-actions { display: flex; gap: 10px; margin-top: 8px; }
.hero-slide-actions .btn-store-outline { border: 1px solid currentColor; color: inherit; background: transparent; padding: 12px 22px; }
.hero-slide-image { background: var(--surface); overflow: hidden; min-height: 420px; }
.hero-slide-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-dots { position: absolute; bottom: 20px; left: 40px; display: flex; gap: 6px; z-index: 2; }
.hero-dots span { width: 28px; height: 4px; background: rgba(255,255,255,.3); }
.hero-dots span.active { background: var(--rose); }
.hero-carousel .slider-arrow.prev { left: 16px; }
.hero-carousel .slider-arrow.next { right: 16px; }

.hero-sidebar { display: flex; flex-direction: column; }
.hero-sidebar-blurb { display: block; padding: 20px; border-bottom: 1px solid var(--line); }
.hero-sidebar-blurb-tag { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--rose); margin-bottom: 6px; }
.hero-sidebar-blurb h4 { margin: 0 0 4px; font-size: 18px; }
.hero-sidebar-blurb p { margin: 0; font-size: 13px; color: var(--ink-muted); }
.hero-sidebar-blurb:hover h4 { color: var(--rose); }
.hero-sidebar-image { flex: 1; min-height: 150px; background: var(--surface); overflow: hidden; }
.hero-sidebar-image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
    .hero-row { grid-template-columns: 1fr; }
    .hero-carousel { border-right: none; border-bottom: 2px solid var(--line); }
    .hero-slide { grid-template-columns: 1fr; min-height: 0; }
    /* min-height from the desktop rule has to be cleared, or it wins and the
       image stays 420px tall on a phone. */
    .hero-slide-image { height: 240px; min-height: 0; }
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.9);
    color: var(--ink);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: background .15s, transform .15s;
}
.slider-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.slider-arrow.prev { left: 18px; }
.slider-arrow.next { right: 18px; }

.btn {
    display: inline-block;
    background: var(--rose);
    color: #fff;
    padding: 13px 26px;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: var(--rose-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn-outline {
    background: transparent;
    color: var(--rose);
    border: 1.5px solid var(--rose);
    box-shadow: none;
}
.btn-outline:hover { background: var(--rose); color: #fff; }
.btn-block { width: 100%; text-align: center; }
.btn-secondary { background: var(--ink); }
.btn-secondary:hover { background: #000; }

/* Section heading */
.section { max-width: var(--wrap-max); margin: 0 auto var(--section-gap); padding: 0 20px; }
.section-title {
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: var(--head-weight);
    letter-spacing: var(--head-track);
    text-transform: var(--head-transform);
    color: var(--ink);
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    position: relative;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.section-title::after { display: none; }
.section-title a {
    font-family: var(--font-body); font-size: 12px; color: var(--rose); font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; padding-bottom: 0;
}
/* Optional supporting line under a section heading (e.g. "Ranked on units
   sold this week."), matching the design file's Best sellers header. */
.section-title-main { display: block; }
.section-title-main small {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-muted);
    margin-top: 4px;
}

/* Category tiles - fixed grid using the divider-as-gap technique from the
   design file: the grid background IS the divider color, showing through
   the 2px gaps between tiles. */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--tile-gap);
    background: transparent;
}
/* The artwork is full-bleed: the card carries no padding of its own, so the
   image reaches the card edges and "overflow:hidden" clips it to the corner
   radius. The label gets its own padding instead. The emoji fallback is given
   the SAME aspect-ratio box as an image, so a grid mixing the two still has
   cards of equal height. */
.category-card {
    background: var(--surface-white);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    border: var(--card-border) solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .18s ease, background .18s ease;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13px;
    color: var(--ink);
    transition: background .15s;
}
.category-card:hover { background: var(--cream); color: var(--rose); }
.category-thumb {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
/* Transparent so the Swatch theme's colour blocks show through behind it. */
.category-emoji {
    font-size: 32px; aspect-ratio: 4 / 3; background: transparent;
    display: flex; align-items: center; justify-content: center;
}
.category-body { display: block; padding: 14px 12px 16px; }
.category-name { display: block; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.category-sub {
    display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.4;
    color: var(--ink-muted); font-family: var(--font-body); font-weight: 400;
    text-transform: none; letter-spacing: 0;
}
.category-cta {
    display: inline-block; margin-top: 10px; font-family: var(--font-body);
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--rose);
}
.category-card:hover .category-cta { text-decoration: underline; }

/* Shop by Brand - horizontally scrollable row with arrow navigation */
.brand-scroller { position: relative; }
.brand-grid {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 2px 10px;
}
.brand-grid::-webkit-scrollbar { display: none; }
.brand-card {
    flex: 0 0 168px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-align: center;
    padding: 20px 10px;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.brand-card:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.brand-badge {
    width: 52px; height: 52px; margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose), var(--gold));
    color: #fff;
    font-family: var(--font-display);
    font-size: 20px; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
}
.brand-name { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-scroller .slider-arrow.prev { left: -18px; }
.brand-scroller .slider-arrow.next { right: -18px; }
@media (max-width: 640px) {
    .brand-scroller .slider-arrow { display: none; }
}

/* New Launches - 4-col grid-divider row of small horizontal cards,
   matching the design file exactly. */
.new-launches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    background: transparent;
}
.new-card {
    background: var(--surface-white);
    border: var(--card-border) solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    display: grid;
    grid-template-columns: 120px minmax(0,1fr);
    transition: box-shadow .18s ease, border-color .18s ease;
}
.new-card:hover { border-color: var(--sage); }
.new-card:hover { box-shadow: var(--shadow-md); }
.new-card-thumb { background: var(--surface); overflow: hidden; min-height: 150px; }
.new-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.new-card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.new-card-just-in {
    align-self: flex-start; background: var(--rose-tint); color: var(--rose-dark);
    font-size: 11px; padding: 3px 10px;
}
.new-card-brand { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.new-card-body h4 { font-family: var(--font-display); font-weight: 500; font-size: 14.5px; line-height: 1.2; margin: 0; }
.new-card-price { font-family: var(--font-display); font-weight: 500; font-size: 15px; margin-top: auto; }

/* Deals strip - solid accent bar, matching the design file */
.deals-strip { background: var(--rose); color: #fff; }
.deals-strip-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.deal-cell { padding: 26px 24px 30px; border-right: 1px solid rgba(255,255,255,.35); }
.deal-cell:last-child { border-right: none; display: flex; flex-direction: column; justify-content: space-between; }
.deal-kicker { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-bottom: 8px; }
.deal-value { font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -.03em; }
.deal-terms { font-size: 13px; margin-top: 6px; opacity: .85; }
.deal-cell .btn { background: #fff; color: var(--rose); align-self: flex-start; margin-top: 10px; }

/* App promo / newsletter split */
.promo-split { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.promo-card { padding: 44px 40px; }
.promo-dark { background: var(--ink); color: #fff; }
.promo-light { background: var(--surface); }
.promo-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.promo-dark .promo-label { color: rgba(255,255,255,.6); }
.promo-label-accent { color: var(--rose); }
.promo-card h2 { font-size: 28px; font-weight: 800; margin: 0 0 14px; line-height: 1.15; color: var(--ink); }
.promo-dark h2 { color: #fff; }
.promo-card p { font-size: 14px; line-height: 1.65; margin: 0 0 26px; max-width: 360px; color: var(--ink-muted); }
.promo-dark p { color: rgba(255,255,255,.72); }
.promo-actions { display: flex; gap: 12px; }
.btn-store { display: inline-block; background: #fff; color: var(--ink); padding: 12px 22px; font-weight: 700; font-size: 13px; border: 1.5px solid #fff; transition: opacity .15s; }
.btn-store-outline { background: transparent; color: #fff; }
.btn-store:hover { opacity: .8; }
.promo-subscribe { display: flex; max-width: 420px; }
.promo-subscribe input { flex: 1; padding: 12px 16px; border: 1px solid var(--line); font-family: var(--font-body); background: var(--surface-white); }
.promo-subscribe button { border: none; background: var(--rose); color: #fff; padding: 0 26px; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s; }
.promo-subscribe button:hover { background: var(--rose-dark); }
@media (max-width: 760px) {
    .promo-split { grid-template-columns: 1fr; }
}

/* Product grid - divider-as-gap technique, matching the design file's
   product tiles exactly (4/5 image, single accent badge, lift-on-hover). */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: var(--grid-gap);
    background: transparent;
}
/* Exactly 5 across, matching the design file's Best sellers row. Steps down
   on smaller screens so cards never get squashed. */
.product-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--grid-gap); }
@media (max-width: 1100px) { .product-grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .product-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .product-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Shop listing sits next to a 250px sidebar, so it needs a tighter track
   count than the full-width homepage rows. */
.product-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
@media (max-width: 1200px) { .product-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .product-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .product-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Cards are stretched to equal height by the grid, but that alone does not
   line up what is INSIDE them: a product with no sale price has a one-line
   price instead of two, which pulled its Add to bag button 23px higher than
   every neighbour. The card is a flex column so the button is pushed to the
   bottom whatever sits above it. */
.product-card {
    background: var(--surface-white);
    border: var(--card-border) solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s ease, border-color .18s ease;
}
/* The link wraps the image and the details; it takes the slack so the
   add-to-cart form below it always sits on the bottom edge. */
.product-card > a { flex: 1 1 auto; display: flex; flex-direction: column; }
.product-card > form:last-of-type { margin-top: auto; }
.product-card:hover { box-shadow: var(--shadow-md); border-color: var(--sage); }
.product-thumb {
    aspect-ratio: 4/5;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-info { padding: 12px 12px 16px; }
.product-brand { font-size: 10px; color: var(--ink-muted); text-transform: uppercase; font-weight: 700; letter-spacing: .1em; }
.product-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 500; margin: 6px 0; height: 36px; overflow: hidden; color: var(--ink); line-height: 1.2; }
.product-rating { font-size: 11px; color: var(--ink-muted); font-weight: 400; }
.product-price { min-height: 46px; margin-top: 8px; font-size: 16px; font-weight: 600; font-family: var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.product-price .mrp { color: var(--ink-muted); font-weight: 400; text-decoration: line-through; margin-left: 6px; font-size: 12px; font-family: var(--font-body); }
.product-price .off { color: var(--sale); font-size: 11px; font-weight: 700; margin-left: 6px; font-family: var(--font-body); }
.badge-featured, .badge-sale {
    position: absolute; top: 0; left: 0;
    background: var(--rose); color: #fff; font-size: 10px; font-weight: 400; text-transform: uppercase;
    letter-spacing: .09em; padding: 4px 8px;
}
.badge-sale { left: auto; right: 0; background: var(--sale); color: #fff; }
.add-cart-btn {
    width: calc(100% - 24px); margin: 0 12px 12px; border: none; background: var(--ink); color: #fff;
    padding: 11px; font-weight: 600; font-family: var(--font-body); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
    transition: background .15s, color .15s;
}
.add-cart-btn:hover { background: var(--rose); }

/* Product detail page (PDP) - matches the design file's media/info split */
.pdp-breadcrumb { padding: 18px 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--line); }
.pdp-breadcrumb a { color: inherit; }
.pdp-breadcrumb a:hover { color: var(--rose); }
.pdp-main { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 0; border-bottom: 2px solid var(--line); }
.pdp-media { border-right: 2px solid var(--line); padding: 24px 24px 32px 0; display: block; }
.pdp-thumbs { display: flex; flex-direction: column; gap: 2px; }
.pdp-info { padding: 24px 0 32px 32px; }

/* Product gallery + lightbox */
.gallery-main-frame { aspect-ratio: 4/5; overflow: hidden; cursor: zoom-in; background: var(--surface); }
.gallery-main-frame img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb {
    aspect-ratio: 1/1; width: 100%; object-fit: cover; background: var(--surface);
    outline: 2px solid transparent; outline-offset: -2px; cursor: pointer; opacity: .75; transition: opacity .15s, outline-color .15s;
}
.gallery-thumb:hover, .gallery-thumb.active { outline-color: var(--rose); opacity: 1; }

.pdp-meta-row { display: flex; align-items: center; gap: 14px; font-size: 13px; margin: 10px 0; }
.pdp-stars { color: var(--rose); }
.pdp-trust-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; background: transparent; margin-top: 20px; }
.pdp-trust-strip > div { background: var(--surface); padding: 14px; }
.pdp-trust-title { font-size: 12.5px; font-weight: 700; }
.text-muted-sm { font-size: 11.5px; color: var(--ink-muted); }
.pdp-details { padding: 32px 0; }
.pdp-details h3 { margin: 0 0 14px; }
.pdp-details .table th { width: 220px; }
.btn-primary-wide { width: 100%; justify-content: flex-start; }
.tag { display: inline-flex; align-items: center; font-size: 12px; padding: 3px 10px; }
.tag-accent { background: var(--sale-tint); color: var(--sale); }

/* Brand page hero - full viewport width regardless of where it sits in the
   page, image always cropped to fill the banner area. */
.brand-hero {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 320px;
    overflow: hidden;
    margin-bottom: 28px;
}
.brand-hero img { width: 100%; height: 100%; object-fit: cover; }
.brand-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.1) 40%, rgba(0,0,0,.6) 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 32px 40px; color: #fff;
}
.brand-hero-overlay h1 { margin: 0 0 6px; font-size: 34px; color: #fff; }
.brand-hero-overlay p { margin: 0; font-size: 14px; opacity: .9; max-width: 640px; }
@media (max-width: 640px) {
    .brand-hero { height: 200px; }
    .brand-hero-overlay { padding: 20px; }
    .brand-hero-overlay h1 { font-size: 22px; }
}

/* Shade / size variant selectors */
.pdp-variant-group { margin: 18px 0; }
.pdp-variant-group h6 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.shade-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.shade-swatch-label { cursor: pointer; }
.shade-swatch-label input { position: absolute; opacity: 0; width: 0; height: 0; }
.shade-swatch { display: block; width: 34px; height: 34px; outline: 2px solid transparent; outline-offset: 2px; }
.shade-swatch-label input:checked + .shade-swatch { outline-color: var(--ink); }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--line); }
.seg-opt { position: relative; padding: 8px 16px; font-size: 13px; cursor: pointer; border-right: 1px solid var(--line); }
.seg-opt:last-child { border-right: none; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt:has(input:checked) { background: var(--ink); color: #fff; }

/* Reviews */
.pdp-reviews { padding: 8px 0 40px; border-top: 2px solid var(--line); }
.pdp-reviews h3 { margin: 24px 0 16px; }
.review-list { display: flex; flex-direction: column; gap: 12px; background: transparent; margin-bottom: 24px; }
.review-item { background: var(--surface-white); padding: 16px 18px; }
.review-item-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.review-item-who { font-family: var(--font-display); font-weight: 500; font-size: 14px; }
.review-item-stars { color: var(--rose); font-size: 13px; }
.review-item-title { font-weight: 700; margin-bottom: 4px; }
.review-form-box { max-width: 480px; padding: 20px; border: 1px solid var(--line); }
.review-form-box h4 { margin: 0 0 14px; }
.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin-bottom: 16px; font-size: 26px; }
.star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-input label { cursor: pointer; color: var(--line); }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--rose); }

/* Shop by Concern */
.concern-row { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 32px; }
.concern-row-intro p { color: var(--ink-muted); font-size: 13.5px; margin: 8px 0 16px; }
.concern-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; background: transparent; }
.concern-card { background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 6px; min-height: 104px; text-align: left; }
.concern-card-name { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--ink); }
.concern-card-count { font-size: 12px; color: var(--ink-muted); }
.concern-card-browse { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); margin-top: auto; }
.concern-card:hover .concern-card-name { color: var(--rose); }
@media (max-width: 860px) {
    .pdp-main { grid-template-columns: 1fr; }
    .pdp-media { border-right: none; border-bottom: 2px solid var(--line); padding: 24px 0; }
    .pdp-info { padding: 24px 0; }
    .concern-row { grid-template-columns: 1fr; }
    .concern-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.lightbox-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15,12,16,.94);
    display: flex; align-items: center; justify-content: center;
}
.lightbox-image { max-width: 88vw; max-height: 84vh; object-fit: contain; border-radius: var(--r-sm); }
.lightbox-close {
    position: absolute; top: 18px; right: 24px; z-index: 1002;
    background: none; border: none; color: #fff; font-size: 34px; line-height: 1;
    cursor: pointer;
}
.lightbox-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 1001;
    width: 46px; height: 46px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.15); color: #fff; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-arrow:hover { background: rgba(255,255,255,.3); }
.lightbox-arrow.prev { left: 24px; }
.lightbox-arrow.next { right: 24px; }
.lightbox-counter {
    position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
    color: rgba(255,255,255,.75); font-size: 13px;
}
@media (max-width: 640px) {
    .lightbox-arrow { width: 38px; height: 38px; font-size: 15px; }
    .lightbox-arrow.prev { left: 10px; }
    .lightbox-arrow.next { right: 10px; }
}
.pd-title { font-family: var(--font-display); font-size: 30px; font-weight: 500; margin: 0 0 8px; color: var(--ink); }
.pd-brand { color: var(--ink-muted); font-weight: 600; margin-bottom: 10px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; }
.pd-price { font-size: 28px; font-weight: 700; margin: 16px 0; color: var(--ink); }
.pd-price .mrp { font-size: 16px; color: var(--ink-muted); text-decoration: line-through; margin-left: 10px; font-weight: 400; }
.pd-price .off { font-size: 14px; color: var(--sale); margin-left: 10px; font-weight: 700; }
/* Description sits under the gallery, spanning both media grid tracks
   (the thumbnail strip and the main image). */
.pd-desc { color: var(--ink-soft); line-height: 1.75; margin: 18px 0 0; grid-column: 1 / -1; }
.pd-desc-heading {
    margin: 0 0 8px; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .7px; color: var(--ink);
}
.qty-input { width: 74px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-family: var(--font-body); }
.pd-actions { display: flex; gap: 14px; margin-top: 22px; align-items: center; }
.stock-ok { color: var(--success); font-weight: 700; font-size: 13px; }
.stock-out { color: var(--danger); font-weight: 700; font-size: 13px; }

/* Forms */
.form-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 36px; max-width: 460px; margin: 48px auto; box-shadow: var(--shadow-sm);
}
.form-card h2 { margin-top: 0; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 7px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px;
    font-family: var(--font-body); color: var(--ink); background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-tint);
}
.form-hint { font-size: 12px; color: var(--ink-muted); margin-top: 5px; }
.form-error { background: #fbeceb; color: var(--danger); padding: 11px 15px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 16px; }
.form-success { background: #e8f5f1; color: var(--success); padding: 11px 15px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 16px; }
.form-footer-link { text-align: center; margin-top: 16px; font-size: 13px; color: var(--ink-soft); }

/* Cart */
.cart-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.cart-table th, .cart-table td { padding: 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
.cart-item-row { display: flex; align-items: center; gap: 14px; }
.cart-item-row img { width: 62px; height: 62px; object-fit: cover; border-radius: var(--r-sm); background: var(--rose-tint); }
.cart-layout { display: grid; grid-template-columns: 1fr 350px; gap: 26px; align-items: start; }
.summary-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; box-shadow: var(--shadow-sm); }
.summary-box h3 { margin-top: 0; font-family: var(--font-display); }
.summary-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 11px; color: var(--ink-soft); }
.summary-row.total { font-weight: 700; font-size: 18px; color: var(--ink); border-top: 1px solid var(--line); padding-top: 12px; }
.qty-controls { display: flex; align-items: center; gap: 8px; }
.qty-controls button { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; border-radius: var(--r-sm); }
.remove-link { color: var(--danger); font-size: 12px; font-weight: 700; }

/* Checkout */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 26px; align-items: start; }
.checkout-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; margin-bottom: 22px; box-shadow: var(--shadow-sm); }
.checkout-box h3 { margin-top: 0; font-size: 16px; font-family: var(--font-display); }
.radio-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.radio-row:last-child { border-bottom: none; }
.discount-toggle { display: flex; gap: 20px; margin-bottom: 14px; }
.pill { display: inline-block; background: var(--rose-tint); color: var(--rose); padding: 4px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; }

/* Loyalty card */
.loyalty-card {
    background: linear-gradient(135deg, #211d29, #4a1636);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 30px;
    max-width: 380px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.loyalty-card::after {
    content: "";
    position: absolute; right: -40px; top: -40px; width: 170px; height: 170px;
    background: rgba(255,255,255,.06); border-radius: 50%;
}
.loyalty-card::before {
    content: "";
    position: absolute; left: -30px; bottom: -50px; width: 140px; height: 140px;
    background: rgba(171,138,63,.15); border-radius: 50%;
}
.loyalty-card .lc-label { font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; opacity: .7; }
.loyalty-card .lc-name { font-family: var(--font-display); font-size: 21px; font-weight: 500; margin: 12px 0 26px; }
.loyalty-card .lc-points { font-family: var(--font-display); font-size: 38px; font-weight: 500; color: var(--gold-light); }
.loyalty-card .lc-points-label { font-size: 12px; opacity: .75; }
.loyalty-card .lc-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 22px; position: relative; }
.loyalty-card .lc-brand { font-family: var(--font-display); font-weight: 500; letter-spacing: 1px; }

/* Dashboard */
.dash-layout { display: grid; grid-template-columns: 226px 1fr; gap: 26px; }
.dash-nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; height: fit-content; box-shadow: var(--shadow-sm); }
.dash-nav a { display: block; padding: 11px 15px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--ink-soft); transition: background .15s, color .15s; }
.dash-nav a:hover, .dash-nav a.active { background: var(--rose-tint); color: var(--rose); }
.order-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.order-card .oc-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-muted); margin-bottom: 9px;}
.status-tag { padding: 4px 11px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; text-transform: capitalize; }
.status-processing { background: var(--gold-light); color: var(--warn); }
.status-confirmed, .status-shipped { background: #e6effc; color: #1a4f9c; }
.status-delivered { background: #e8f5f1; color: var(--success); }
.status-cancelled { background: #fbeceb; color: var(--danger); }
.pay-paid { color: var(--success); font-weight: 700; }
.pay-pending { color: var(--warn); font-weight: 700; }
.pay-failed { color: var(--danger); font-weight: 700; }

/* Footer */
.site-footer { background: var(--cream); color: var(--ink-soft); margin-top: 70px; padding: 48px 20px 0; border-top: 1px solid var(--line); }
.footer-top { max-width: var(--wrap-max); margin: 0 auto 36px; display: flex; align-items: center; gap: 10px; }
.footer-top .logo-word small { color: var(--ink-muted); }
.footer-grid { max-width: var(--wrap-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.4fr) repeat(4, minmax(160px,1fr)); gap: 34px; }
@media (max-width: 860px) {
    .footer-grid { grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
}
.footer-grid h4 { font-family: var(--font-body); color: var(--ink); margin: 0 0 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.footer-grid a { display: block; margin-bottom: 9px; font-size: 13.5px; color: var(--ink-soft); transition: color .15s; }
.footer-grid a:hover { color: var(--rose); }
.newsletter-form { display: flex; margin-top: 12px; border: 1px solid var(--line); }
.newsletter-form input { flex: 1; padding: 11px 16px; border: none; font-family: var(--font-body); background: var(--surface); }
.newsletter-form button { border: none; background: var(--rose); color: #fff; padding: 0 20px; cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .4px; }
.footer-bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    max-width: var(--wrap-max); margin: 40px auto 0; font-size: 12px; color: var(--ink-muted);
    border-top: 1px solid var(--line); padding: 18px 0;
}
.footer-bottom a { color: var(--ink-muted); margin-left: 14px; }
.footer-bottom a:hover { color: var(--ink); }

/* Coupon promo strip */
.coupon-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.coupon-card {
    position: relative;
    background: linear-gradient(135deg, #fff, var(--rose-tint));
    border: 1.5px dashed var(--rose);
    border-radius: var(--r-md);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.coupon-value { font-family: var(--font-display); font-size: 23px; font-weight: 500; color: var(--rose); }
.coupon-terms { font-size: 12px; color: var(--ink-muted); margin: 5px 0 16px; }
.coupon-code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coupon-code {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    background: var(--surface-white);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 7px 13px;
}
.coupon-copy-btn {
    border: none;
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--r-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.coupon-copy-btn:hover { background: var(--rose); }
.coupon-copy-btn.copied { background: var(--success); }

.breadcrumb { font-size: 13px; color: var(--ink-muted); margin: 20px 0; }
.empty-state { text-align: center; padding: 70px 20px; color: var(--ink-muted); }
.alert { padding: 13px 17px; border-radius: var(--r-sm); margin-bottom: 18px; font-size: 14px; }
.alert-success { background: #e8f5f1; color: var(--success); }
.alert-error { background: #fbeceb; color: var(--danger); }
.alert-info { background: #e6effc; color: #1a4f9c; }

@media (max-width: 860px) {
    .product-detail, .cart-layout, .checkout-layout, .dash-layout { grid-template-columns: 1fr; }
    .header-main { flex-wrap: wrap; }
}

/* ===============================================================
   RESPONSIVE - tablet & mobile
   Breakpoints: 900px (tablet / drawer nav), 640px (phone)
   =============================================================== */

/* --- Hamburger + drawer (hidden on desktop) --- */
.nav-toggle { display: none; }
.nav-toggle span {
    display: block; width: 20px; height: 2px; background: var(--ink);
    margin: 4px 0; transition: transform .2s, opacity .2s;
}
/* Closed state uses visibility (not [hidden]) so the slide transition can run
   without needing a rAF tick - rAF is throttled in background tabs. Visibility
   still removes the drawer from the tab order and accessibility tree. */
.drawer-scrim {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility 0s .25s;
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .25s, visibility 0s; }
.mobile-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 201;
    width: min(86vw, 340px);
    background: var(--surface-white);
    border-right: 2px solid var(--line);
    display: flex; flex-direction: column;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s .25s;
    overscroll-behavior: contain;
}
.mobile-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform .25s ease, visibility 0s; }
.mobile-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 2px solid var(--line); flex: none;
}
.mobile-drawer-title { font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.drawer-close { background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink); padding: 0 4px; }
.mobile-drawer-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 40px; }
.drawer-link, .drawer-group > summary {
    display: block; padding: 14px 18px; border-bottom: 1px solid var(--line);
    font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--ink); cursor: pointer; list-style: none;
}
.drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-group > summary::after { content: "+"; float: right; font-weight: 700; }
.drawer-group[open] > summary::after { content: "\2212"; }
.drawer-link.is-highlight { color: var(--rose); }
.drawer-sub { background: var(--cream); padding: 6px 0 12px; }
.drawer-sub a {
    display: block; padding: 9px 18px 9px 30px; font-size: 13.5px;
    color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-weight: 400;
}
.drawer-sub a:hover { color: var(--rose); }
.drawer-all { font-weight: 700 !important; color: var(--rose) !important; }
.drawer-subgroup {
    padding: 12px 18px 4px; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted);
}
.drawer-divider { height: 2px; background: var(--line); margin: 8px 0; }

/* --- Tablet & below --- */
@media (max-width: 900px) {
    .nav-toggle {
        display: block; order: -1; flex: none;
        background: none; border: none; cursor: pointer; padding: 8px 10px 8px 0;
    }
    .header-main { gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
    .logo { flex: 1 1 auto; }
    .site-logo-svg, .site-logo-img { height: 34px !important; width: auto !important; max-width: 190px; }
    /* Search drops to its own full-width row below the logo */
    .search-form { order: 3; flex: 1 0 100%; }
    .header-actions { gap: 8px; flex: none; }
    .header-actions a { padding: 9px 12px; font-size: 12.5px; }
    .header-actions a.action-shopall { display: none; }
    .category-nav { display: none; }

    .container, .section { padding-left: 16px; padding-right: 16px; }
    .section { margin-bottom: 36px; }
    .section-title { font-size: 20px; margin-bottom: 18px; }
    .hero-slide-text { padding: 32px 24px; }
    .hero-slide-text h1 { font-size: 30px; }
    .concern-row { grid-template-columns: 1fr; gap: 20px; }
    .deals-strip-inner { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .deal-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,.35); }
}

/* --- Phone --- */
@media (max-width: 640px) {
    .topbar { font-size: 10.5px; padding: 7px 10px; }
    .header-main { padding: 10px 14px; }
    .site-logo-svg, .site-logo-img { height: 30px !important; max-width: 165px; }
    .header-actions a { padding: 8px 10px; font-size: 12px; }
    .header-actions a.action-signin { padding: 8px 4px; }

    .container, .section { padding-left: 14px; padding-right: 14px; }
    .section-title { font-size: 18px; flex-wrap: wrap; gap: 6px; }
    .section-title a { font-size: 11px; }
    .section-title-main small { font-size: 12px; }

    .hero-slide-text { padding: 26px 18px; }
    .hero-slide-text h1 { font-size: 24px; max-width: none; }
    .hero-slide-text p { font-size: 13.5px; }
    .hero-slide-actions { flex-wrap: wrap; }
    .hero-slide-image { height: 200px; }

    .product-grid, .product-grid-5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .product-name { font-size: 13px; height: 34px; }
    .product-price { font-size: 14.5px; }
    .new-launches-grid { grid-template-columns: 1fr; }
    .deals-strip-inner { grid-template-columns: 1fr; }
    .deal-value { font-size: 28px; }
    .concern-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .promo-card { padding: 30px 20px; }
    .promo-card h2 { font-size: 22px; }
    .promo-actions { flex-wrap: wrap; }
    .promo-subscribe { flex-wrap: wrap; gap: 8px; }
    .promo-subscribe input { flex: 1 0 100%; }

    /* Cart becomes stacked cards - a 5-column table can't fit a phone */
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
    .cart-table tr { border-bottom: 2px solid var(--line); padding: 12px 0; position: relative; }
    .cart-table td { border: none; padding: 6px 12px; }
    .cart-item-row img { width: 54px; height: 54px; }
    .qty-controls { justify-content: flex-start; }

    .pdp-media { grid-template-columns: 1fr; }
    .pdp-thumbs { flex-direction: row; overflow-x: auto; gap: 6px; order: 2; margin-top: 6px; }
    .pdp-thumbs .gallery-thumb { width: 58px; flex: none; }
    .pd-title { font-size: 24px; }
    .pd-price { font-size: 24px; }
    .pdp-trust-strip { grid-template-columns: 1fr; }
    .pd-actions { flex-wrap: wrap; gap: 10px; }
    .btn-primary-wide { width: 100%; justify-content: center; }

    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
    .form-card { padding: 24px 18px; margin: 24px auto; }
    .table { font-size: 13px; }
    .brand-hero { height: 170px; }
}

/* Any wide table left on a small screen scrolls inside its own box
   rather than pushing the whole page sideways. */
@media (max-width: 900px) {
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- Overflow fixes found by measuring real viewports --- */
/* Flex items default to min-width:auto, so this input refused to shrink and
   pushed its button past the viewport on mid-size screens. */
.promo-subscribe input { min-width: 0; }
.promo-subscribe { flex-wrap: wrap; }
.newsletter-form input { min-width: 0; }

@media (max-width: 900px) {
    /* Match the promo split to the same breakpoint as the rest of the layout */
    .promo-split { grid-template-columns: 1fr; }
    /* These arrows sit 18px outside their track, which overflows once the
       page loses its side margins. Tuck them inside instead. */
    .category-scroller .slider-arrow.prev,
    .brand-scroller .slider-arrow.prev { left: 4px; }
    .category-scroller .slider-arrow.next,
    .brand-scroller .slider-arrow.next { right: 4px; }
}

/* ==================================================================
   Content pages: About Us, Contact Us, Track Order
   ================================================================== */

/* Shared page intro block */
.page-hero {
    background: var(--surface-white, #fff);
    padding: 44px 40px;
    border: 1px solid var(--line);
}
.page-hero h1 { font-size: 42px; line-height: 1.05; margin: 0 0 14px; }
.page-hero-lead { font-size: 17px; line-height: 1.65; color: var(--gray); max-width: 720px; }
.page-hero-lead p:last-child { margin-bottom: 0; }

.page-figure { border: 1px solid var(--line); background: var(--surface-white, #fff); }
.page-figure img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }

/* Admin-authored HTML */
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 14px; line-height: 1.7; }
.rich-text h2 { font-size: 26px; margin: 26px 0 10px; }
.rich-text h3 { font-size: 20px; margin: 22px 0 10px; }
.rich-text h4 { font-size: 17px; margin: 18px 0 8px; }
.rich-text ul, .rich-text ol { margin: 0 0 14px; padding-left: 22px; line-height: 1.7; }
.rich-text li { margin-bottom: 5px; }
.rich-text a { color: var(--rose); text-decoration: underline; }
.rich-text img { max-width: 100%; height: auto; margin: 10px 0; }
.rich-text blockquote {
    margin: 16px 0; padding: 12px 18px;
    border-left: 3px solid var(--rose); background: var(--surface, #eae9e9);
}
.rich-text table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.rich-text th, .rich-text td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }

/* About: stats + story */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    background: transparent;
    
}
.stat-cell {
    background: var(--surface-white, #fff);
    padding: 24px 20px;
    text-align: center;
}
.stat-num { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 500; line-height: 1; color: var(--ink); }
.stat-label { display: block; margin-top: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--gray); }

.about-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; background: transparent;  }
.about-story { background: var(--surface-white, #fff); padding: 34px; }
.about-story .btn { margin-top: 8px; }
.about-promises { background: var(--surface-white, #fff); padding: 34px; display: flex; flex-direction: column; gap: 22px; }
.promise-card { border-left: 3px solid var(--rose); padding-left: 14px; }
.promise-num { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--rose); }
.promise-card h4 { margin: 4px 0 6px; font-size: 16px; }
.promise-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gray); }

/* Contact */
.contact-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; background: transparent;  }
.contact-form-panel { background: var(--surface-white, #fff); padding: 34px; }
.contact-details-panel { background: var(--surface, #eae9e9); padding: 34px; }
.contact-form-panel h3, .contact-details-panel h3 { margin: 0 0 20px; font-size: 20px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.req { color: var(--rose); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-detail { padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-detail:last-child { border-bottom: 0; }
.contact-detail-label {
    display: block; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px; color: var(--gray); margin-bottom: 5px;
}
.contact-detail p { margin: 0; line-height: 1.6; }
.contact-detail a { color: var(--ink); }
.contact-detail a:hover { color: var(--rose); }

/* Track order */
.track-form-box {
    background: var(--surface-white, #fff);
    border: 1px solid var(--line);
    padding: 30px 34px;
    max-width: 620px;
}
.track-form .form-group { margin-bottom: 16px; }

.track-result { background: var(--surface-white, #fff); border: 1px solid var(--line); padding: 30px 34px; }
.track-result-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; flex-wrap: wrap;
    padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line);
}
.track-result-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gray); }
.track-result-head h2 { margin: 4px 0 4px; font-size: 26px; }
.track-result-badges { display: flex; gap: 8px; flex-wrap: wrap; }

.status-pill {
    display: inline-block; padding: 6px 12px;
    font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    background: var(--surface, #eae9e9); color: var(--ink);
}
.status-processing { background: #fff3cd; }
.status-confirmed  { background: #cfe2ff; }
.status-shipped    { background: #d7f0e0; }
.status-delivered  { background: #1e7d43; color: #fff; }
.status-cancelled  { background: #f5c6cb; }
.pay-paid    { background: #1e7d43; color: #fff; }
.pay-pending { background: #fff3cd; }
.pay-failed  { background: #f5c6cb; }

.track-steps { display: flex; gap: 10px; margin-bottom: 28px; background: transparent;  }
.track-step {
    flex: 1; background: var(--surface-white, #fff);
    padding: 18px 10px; text-align: center;
}
.track-step-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface, #eae9e9); color: var(--gray);
    font-size: 13px; font-weight: 700; margin-bottom: 8px;
}
.track-step.done .track-step-dot { background: var(--rose); color: #fff; }
.track-step.current { background: var(--surface, #eae9e9); }
.track-step-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.track-step.done .track-step-label { color: var(--ink); }

.track-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.track-panel h4 { margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: .6px; }
.table-plain th { width: 110px; font-weight: 600; color: var(--gray); vertical-align: top; }
.track-items-heading { margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: .6px; }
.table-wrap { overflow-x: auto; }
.ta-r { text-align: right; }
.row-total th, .row-total td { font-size: 16px; font-weight: 800; border-top: 2px solid var(--ink); }

@media (max-width: 900px) {
    .page-hero { padding: 30px 22px; }
    .page-hero h1 { font-size: 30px; }
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    .about-split, .contact-split, .track-panels { grid-template-columns: 1fr; }
    .about-story, .about-promises, .contact-form-panel, .contact-details-panel { padding: 26px 22px; }
    .track-form-box, .track-result { padding: 24px 20px; }
    .track-steps { flex-wrap: wrap; }
    .track-step { flex: 1 1 45%; }
}
@media (max-width: 640px) {
    .page-hero h1 { font-size: 26px; }
    .form-row-2 { grid-template-columns: 1fr; }
    .track-result-head h2 { font-size: 21px; }
    .stat-num { font-size: 27px; }
}

/* ==================================================================
   Shop: faceted filter sidebar
   ================================================================== */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start; }

.shop-filters {
    background: var(--surface-white, #fff);
    border: 1px solid var(--line);
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
.filters-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 18px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--surface-white, #fff); z-index: 2;
}
.filters-head h3 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: .6px; }
.filters-clear { font-size: 12px; color: var(--rose); text-decoration: underline; }
.filters-close { display: none; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink); }

.filter-group { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.filter-group:last-of-type { border-bottom: 0; }
.filter-group h4 {
    margin: 0 0 10px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px; color: var(--gray);
}
.filter-options { display: flex; flex-direction: column; gap: 2px; }
.filter-options-scroll { max-height: 210px; overflow-y: auto; padding-right: 4px; }

.filter-opt {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 4px; font-size: 14px; cursor: pointer;
    text-transform: none; letter-spacing: 0; font-weight: 400;
}
.filter-opt:hover { background: var(--surface, #eae9e9); }
.filter-opt input { width: auto; margin: 0; flex: none; accent-color: var(--rose); }
.filter-opt-name { flex: 1; min-width: 0; }
.filter-opt-count { font-size: 12px; color: var(--gray); flex: none; }
.filter-opt.is-empty { opacity: .4; }

.filter-price { display: flex; align-items: center; gap: 8px; }
.filter-price input { width: 100%; min-width: 0; padding: 8px 10px; font-size: 14px; }
.filter-price-dash { color: var(--gray); flex: none; }
.filter-price-note { margin-top: 7px; font-size: 12px; color: var(--gray); }

.filters-apply { display: none; margin: 0 18px 18px; width: calc(100% - 36px); }

/* Results column */
.shop-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.shop-toolbar-left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.shop-heading { margin: 0; font-size: 26px; }
.shop-count { font-size: 13px; color: var(--gray); }
.shop-sort { display: flex; align-items: center; gap: 8px; }
.shop-sort label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--gray); margin: 0; }
.shop-sort select { padding: 8px 10px; font-size: 14px; border: 1px solid var(--line); background: var(--surface-white, #fff); }

.filters-toggle {
    display: none;
    padding: 9px 16px; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    background: var(--ink); color: #fff; border: 0; cursor: pointer;
}

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; font-size: 12.5px;
    background: var(--surface, #eae9e9); color: var(--ink); border: 1px solid var(--line);
}
.filter-chip:hover { background: var(--ink); color: #fff; }
.filter-chip span { font-size: 15px; line-height: 1; opacity: .6; }
.filter-chip-clear { background: transparent; border-style: dashed; color: var(--rose); }

.filters-backdrop {
    position: fixed; inset: 0; background: rgba(32,30,29,.5); z-index: 199;
}

@media (max-width: 900px) {
    .shop-layout { grid-template-columns: 1fr; gap: 0; }
    .filters-toggle { display: inline-block; }
    .filters-close { display: block; }
    .filters-apply { display: block; }

    /* Sidebar becomes a slide-in drawer */
    .shop-filters {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: min(320px, 86vw);
        max-height: none; z-index: 200;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .25s ease, visibility .25s;
        box-shadow: 0 0 40px rgba(0,0,0,.2);
    }
    .shop-filters.is-open { transform: translateX(0); visibility: visible; }
    body.filters-open { overflow: hidden; }
    .shop-heading { font-size: 20px; }
}
@media (max-width: 640px) {
    .shop-toolbar { gap: 10px; }
    .shop-toolbar-left { width: 100%; }
    .shop-sort { width: 100%; }
    .shop-sort select { flex: 1; }
}

/* ==================================================================
   Wishlist, stock alerts, Q&A, pagination, search suggestions
   ================================================================== */

/* Heart on the product card */
.product-card { position: relative; }
.wish-form { position: absolute; top: 8px; right: 8px; z-index: 3; margin: 0; }
.wish-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-white); border: 1px solid var(--line);
    color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer;
    transition: background .15s, color .15s;
}
.wish-btn:hover { background: #fff; color: var(--rose); }
.wish-btn.is-saved { color: var(--rose); border-color: var(--rose); }
.badge-oos {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    background: var(--ink); color: #fff;
    padding: 4px 9px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
}
.add-cart-btn-muted { background: var(--surface, #eae9e9); color: var(--ink); text-align: center; }

/* Product page */
.pdp-secondary-actions { margin-top: 12px; }
.btn-wishlist {
    background: transparent; border: 1px solid var(--line);
    padding: 11px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
    color: var(--ink); width: 100%;
}
.btn-wishlist:hover { border-color: var(--rose); color: var(--rose); }
.btn-wishlist.is-saved { border-color: var(--rose); color: var(--rose); }

.notify-box {
    margin-top: 16px; padding: 18px;
    background: var(--surface, #eae9e9); border: 1px solid var(--line);
}
.notify-box h4 { margin: 0 0 6px; font-size: 15px; }
.notify-form { display: flex; gap: 8px; margin-top: 10px; }
.notify-form input { flex: 1; min-width: 0; }

.verified-badge {
    display: inline-block; margin-left: 8px; padding: 2px 8px;
    background: #e8f5f1; color: #1e7d43;
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.review-photo { display: inline-block; margin: 10px 0; }
.review-photo img {
    max-width: 160px; max-height: 160px; object-fit: cover;
    border: 1px solid var(--line); display: block;
}

/* Questions & answers */
.pdp-questions { padding: 30px 0; border-top: 1px solid var(--line); }
.pdp-questions h3 { margin: 0 0 18px; font-size: 20px; }
.qa-list { margin-bottom: 26px; }
.qa-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.qa-item:last-child { border-bottom: 0; }
.qa-q, .qa-a { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; line-height: 1.6; }
.qa-q { font-weight: 600; }
.qa-a { color: var(--gray); }
.qa-marker {
    flex: none; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
}
.qa-marker-a { background: var(--rose); }
.qa-form-box { background: var(--surface, #eae9e9); border: 1px solid var(--line); padding: 22px; }
.qa-form-box h4 { margin: 0 0 14px; font-size: 16px; }

/* Pagination */
.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 28px 0 6px; }
.pager-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; padding: 9px 12px;
    border: 1px solid var(--line); background: var(--surface-white, #fff);
    font-size: 14px; font-weight: 600; color: var(--ink);
}
.pager-link:hover { border-color: var(--ink); }
.pager-link.is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pager-link.is-disabled { opacity: .4; pointer-events: none; }
.pager-gap { padding: 0 4px; color: var(--gray); }

/* Search suggestions */
.search-form { position: relative; }
.search-suggest {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
    background: var(--surface-white, #fff); border: 1px solid var(--line);
    box-shadow: 0 12px 32px rgba(32,30,29,.14);
    max-height: 460px; overflow-y: auto;
}
.ss-group { border-bottom: 1px solid var(--line); }
.ss-group:last-child { border-bottom: 0; }
.ss-label {
    padding: 9px 14px 5px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px; color: var(--gray);
}
.ss-item {
    display: block; padding: 9px 14px; font-size: 14px; color: var(--ink);
    text-decoration: none;
}
.ss-item:hover, .ss-item.is-active { background: var(--surface, #eae9e9); }
.ss-item mark { background: transparent; color: var(--rose); font-weight: 700; }
.ss-product { display: flex; align-items: center; gap: 11px; }
.ss-product img, .ss-noimg {
    width: 40px; height: 40px; flex: none; object-fit: cover;
    background: var(--surface, #eae9e9); border: 1px solid var(--line);
}
.ss-text { flex: 1; min-width: 0; }
.ss-brand { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--gray); }
.ss-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-price { flex: none; font-weight: 700; font-size: 13px; text-align: right; }
.ss-price em { display: block; font-size: 10px; font-weight: 400; font-style: normal; color: var(--rose); }
.ss-all { text-align: center; font-weight: 700; color: var(--rose); border-top: 1px solid var(--line); }
.ss-empty { padding: 18px 14px; text-align: center; color: var(--gray); font-size: 14px; }

@media (max-width: 900px) {
    .notify-form { flex-direction: column; }
    .search-suggest { max-height: 60vh; }
}

/* Account: order actions, points history */
.oc-actions { display: flex; gap: 8px; margin-top: 10px; }
.points-delta { font-weight: 700; }
.points-delta.up { color: #1e7d43; }
.points-delta.down { color: var(--rose); }

/* Returns / policy page */
.policy-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; background: transparent;  }
.policy-step { background: var(--surface-white, #fff); padding: 24px 20px; }
.policy-num { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--rose); }
.policy-step h4 { margin: 6px 0 8px; font-size: 16px; }
.policy-step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gray); }
.policy-body { background: var(--surface-white, #fff); border: 1px solid var(--line); padding: 34px; }

@media (max-width: 900px) {
    .policy-steps { grid-template-columns: repeat(2, 1fr); }
    .policy-body { padding: 24px 20px; }
}
@media (max-width: 640px) {
    .policy-steps { grid-template-columns: 1fr; }
    .oc-actions { flex-wrap: wrap; }
}

/* ==================================================================
   Addresses, referrals, gift cards, compare
   ================================================================== */
.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
                background: transparent;  margin-bottom: 24px; }
.address-card { background: var(--surface-white, #fff); padding: 20px; position: relative; }
.address-card.is-default { box-shadow: inset 3px 0 0 var(--rose); }
.address-default-tag { position: absolute; top: 14px; right: 14px; background: var(--rose); color: #fff;
                       font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; }
.address-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gray); margin-bottom: 5px; }
.address-card p { margin: 8px 0 14px; font-size: 14px; line-height: 1.6; color: var(--gray); }
.address-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.address-form-box { background: var(--surface-white, #fff); border: 1px solid var(--line); padding: 26px; }
.address-form-box h3 { margin: 0 0 18px; font-size: 18px; }

.saved-address-row { margin-top: 14px; }
.saved-address-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.saved-address-chip { text-align: left; padding: 10px 14px; font-size: 13px; line-height: 1.45;
                      background: var(--surface, #eae9e9); border: 1px solid var(--line);
                      color: var(--ink); cursor: pointer; font-family: inherit; }
.saved-address-chip:hover, .saved-address-chip.is-active { border-color: var(--rose); background: var(--surface-white); }

.referral-hero { background: var(--surface-white, #fff); border: 1px solid var(--line); padding: 30px 34px; }
.referral-hero h3 { margin: 0 0 8px; font-size: 24px; }
.referral-hero > p { margin: 0 0 20px; color: var(--gray); line-height: 1.65; max-width: 620px; }
.referral-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .8px;
                  text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
.referral-copy { display: flex; gap: 8px; }
.referral-copy input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.referral-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 26px; font-weight: 700;
                 letter-spacing: 4px; background: var(--surface, #eae9e9); padding: 14px 18px; display: inline-block; }
.referral-share { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }

.compare-form { position: absolute; top: 46px; right: 8px; z-index: 3; margin: 0; }
.compare-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
               background: var(--surface-white); border: 1px solid var(--line); color: var(--ink);
               font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.compare-btn:hover { background: #fff; color: var(--rose); }
.compare-btn.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

.compare-table { width: 100%; border-collapse: collapse; background: var(--surface-white, #fff); }
.compare-table th, .compare-table td { border: 1px solid var(--line); padding: 14px; vertical-align: top; font-size: 14px; }
.compare-table thead th { text-align: center; width: 220px; }
.compare-rowhead { width: 150px; background: var(--surface, #eae9e9); font-size: 12px;
                   text-transform: uppercase; letter-spacing: .6px; text-align: left; }
.compare-thumb { display: block; margin-bottom: 10px; }
.compare-thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.compare-brand { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--gray); }
.compare-name { display: block; font-weight: 600; color: var(--ink); margin-top: 3px; }
.compare-desc { font-size: 13px; color: var(--gray); line-height: 1.6; }

/* Loyalty card, restyled to match the template: flat, square, accent-led */
.loyalty-card {
    background: var(--ink);
    color: #fff;
    border-radius: 0;
    padding: 30px 32px;
    max-width: 420px;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    border: 1px solid var(--ink);
}
.loyalty-card::after {
    content: "";
    position: absolute; right: -60px; top: -60px; width: 200px; height: 200px;
    background: var(--rose); opacity: .16; border-radius: 0; transform: rotate(45deg);
}
.loyalty-card::before { content: none; }
.loyalty-card .lc-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; opacity: .7; }
.loyalty-card .lc-name { font-family: var(--font-display); font-size: 20px; font-weight: 500; margin: 10px 0 24px; }
.loyalty-card .lc-points { font-family: var(--font-display); font-size: 44px; font-weight: 500; line-height: 1; color: #fff; }
.loyalty-card .lc-points-label { font-size: 12px; opacity: .75; margin-top: 6px; }
.loyalty-card .lc-footer { display: flex; justify-content: space-between; align-items: flex-end;
                           margin-top: 24px; padding-top: 16px; position: relative;
                           border-top: 1px solid rgba(255,255,255,.18); }
.loyalty-card .lc-brand { font-family: var(--font-display); font-weight: 500; letter-spacing: 1px; color: var(--rose); }

@media (max-width: 900px) {
    .referral-hero { padding: 24px 20px; }
    .referral-code { font-size: 20px; letter-spacing: 3px; }
    .referral-copy { flex-direction: column; }
    .compare-table thead th { width: 170px; }
    .loyalty-card { max-width: none; padding: 24px 22px; }
}

/* ==================================================================
   Home page section types
   ================================================================== */
.hero-row-full { grid-template-columns: 1fr; }

.home-banner { position: relative; border: 1px solid var(--line); overflow: hidden; }
.home-banner img { display: block; width: 100%; height: var(--banner-h, 320px); object-fit: cover; }
.home-banner-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
    gap: 12px; padding: 40px; background: linear-gradient(90deg, rgba(32,30,29,.72), rgba(32,30,29,.15));
    color: #fff;
}
.home-banner-center .home-banner-overlay {
    align-items: center; text-align: center;
    background: linear-gradient(180deg, rgba(32,30,29,.5), rgba(32,30,29,.6));
}
.home-banner-right .home-banner-overlay {
    align-items: flex-end; text-align: right;
    background: linear-gradient(270deg, rgba(32,30,29,.72), rgba(32,30,29,.15));
}
.home-banner-overlay h2 { margin: 0; font-size: 34px; line-height: 1.1; max-width: 620px; }
.home-banner-overlay p { margin: 0; font-size: 15px; line-height: 1.6; max-width: 520px; opacity: .92; }
.home-banner-overlay .btn { align-self: flex-start; }
.home-banner-center .home-banner-overlay .btn { align-self: center; }
.home-banner-right .home-banner-overlay .btn { align-self: flex-end; }

.home-textblock { background: var(--surface-white, #fff); border: 1px solid var(--line); padding: 30px 34px; }
.home-textblock.is-narrow { max-width: 760px; margin: 0 auto; }

.home-newsletter {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: var(--ink); color: #fff; padding: 28px 34px;
}
.home-newsletter-copy h3 { margin: 0 0 6px; font-size: 22px; }
.home-newsletter-copy p { margin: 0; font-size: 14px; opacity: .8; }
.home-newsletter-form { display: flex; gap: 8px; flex: 1; max-width: 420px; min-width: 260px; }
.home-newsletter-form input { flex: 1; min-width: 0; }

@media (max-width: 900px) {
    .home-banner-overlay { padding: 24px; }
    .home-banner-overlay h2 { font-size: 24px; }
    .home-textblock { padding: 24px 20px; }
    .home-newsletter { padding: 24px 20px; }
    .home-newsletter-form { max-width: none; }
}

/* Collapsible filter facets */
.facet-search {
    width: 100%; padding: 7px 10px; margin-bottom: 8px;
    font-size: 13px; border: 1px solid var(--line); background: var(--surface-white, #fff);
}
.facet-list.is-collapsed .filter-opt.is-overflow { display: none; }
.filter-opt.is-filtered-out { display: none !important; }
.facet-noresults { padding: 8px 4px; font-size: 13px; color: var(--gray); }
.facet-toggle {
    margin-top: 6px; padding: 4px 0;
    background: none; border: 0; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: var(--rose);
    text-decoration: underline; text-underline-offset: 2px;
}
.facet-toggle:hover { color: var(--ink); }

/* ==================================================================
   Brand directory (brands.php) + brand scroller extras
   ================================================================== */
.brand-alphabet {
    display: flex; flex-wrap: wrap; gap: 2px;
    background: var(--line); border: 1px solid var(--line);
}
.brand-alphabet a, .brand-alphabet span {
    flex: 1 1 auto; min-width: 34px; padding: 10px 4px;
    text-align: center; font-size: 13px; font-weight: 700;
    background: var(--surface-white, #fff);
}
.brand-alphabet a { color: var(--ink); }
.brand-alphabet a:hover { background: var(--ink); color: #fff; }
.brand-alphabet span { color: var(--gray); opacity: .45; }

.brand-letter-block {
    display: grid; grid-template-columns: 72px 1fr; gap: 2px;
    background: var(--line); border: 1px solid var(--line);
    scroll-margin-top: 90px;
}
.brand-letter {
    background: var(--ink); color: #fff;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 20px 0; font-family: var(--font-display);
    font-size: 30px; font-weight: 500; line-height: 1;
}
.brand-directory-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px; background: transparent;
}
.brand-tile {
    display: flex; align-items: center; gap: 10px;
    padding: 16px; background: var(--surface-white, #fff); color: var(--ink);
}
.brand-tile:hover { background: var(--surface, #eae9e9); }
.brand-tile-badge {
    flex: none; width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface, #eae9e9);
    font-family: var(--font-display); font-size: 19px; font-weight: 500;
}
/* Same 16:9 panel and same cover behaviour as the scroller, so one uploaded
   logo fills both places identically. */
.brand-tile-logo {
    flex: none; width: 96px; height: 54px; padding: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    /* Stays white in every theme: brand artwork is supplied on white. */
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.brand-tile-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-tile-body { min-width: 0; }
.brand-tile-name {
    display: block; font-weight: 700; font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-tile-count { display: block; font-size: 12px; color: var(--gray); margin-top: 2px; }

/* Scroller additions */
.brand-count { font-size: 11px; color: var(--gray); margin-top: 2px; }

/* Brand artwork gets a rounded panel rather than being squeezed into the
   circular initial badge, where it was too small to read. White background so
   logos with transparency stay legible, and "contain" so nothing is cropped.

   The image COVERS the panel: it is scaled up until no background shows, and
   whatever overhangs is cropped. That means the panel is never part-empty, but
   artwork whose shape is far from 16:9 loses its edges - upload logos at 16:9
   (640x360) and nothing is cropped at all. The brands-page panel uses the same
   16:9 so a single upload fits both places.

   Swap 'cover' for 'contain' on the img rules below to go back to showing the
   whole logo with background around it. */
.brand-badge-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    margin: 0 auto 10px;
    border-radius: 10px;
    /* Stays white in every theme: brand artwork is supplied on white. */
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: none;
}
.brand-badge-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A brand card showing artwork is just the artwork - the name and the item
   count are dropped, because the logo already carries the name. Cards with no
   logo keep the letter badge and the printed name below it. */
.brand-card-logo { padding: 0; display: flex; flex-direction: column; }
/* The panel grows to the card's full height instead of keeping its own 16:9.
   Cards in the scroller are stretched to match the tallest one, so a fixed
   ratio would leave dead space under the artwork. */
.brand-card-logo .brand-badge-img {
    border: none; border-radius: 0; margin: 0;
    flex: 1 1 auto; aspect-ratio: auto; width: 100%; height: auto;
}
.brand-card-all .brand-badge-all { background: var(--rose); color: #fff; }
.brand-card-all .brand-name { color: var(--rose); }

@media (max-width: 640px) {
    .brand-letter-block { grid-template-columns: 52px 1fr; }
    .brand-letter { font-size: 22px; padding: 14px 0; }
    .brand-directory-grid { grid-template-columns: 1fr; }
    .brand-alphabet a, .brand-alphabet span { min-width: 28px; padding: 8px 2px; font-size: 12px; }
}

/* Product information tabs (under the image) */
.pd-tabs { margin-top: 22px; }
.pd-tablist {
    display: flex; flex-wrap: wrap; gap: 2px;
    background: var(--line); border: 1px solid var(--line); margin-bottom: 16px;
}
.pd-tab {
    flex: 1 1 auto; padding: 11px 16px;
    background: var(--surface, #eae9e9); color: var(--gray);
    border: 0; cursor: pointer;
    font: 700 12px/1 Archivo, system-ui, sans-serif;
    text-transform: uppercase; letter-spacing: .6px;
    transition: background .15s, color .15s;
}
.pd-tab:hover { color: var(--ink); }
.pd-tab.is-active { background: var(--surface-white, #fff); color: var(--ink); }
.pd-tabpanel { color: var(--ink-soft); line-height: 1.75; }
/* With JS off every panel shows, separated so they stay readable. */
.pd-tabpanel + .pd-tabpanel { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.pd-tabs [data-tabs-ready] .pd-tabpanel + .pd-tabpanel { margin: 0; padding: 0; border: 0; }

@media (max-width: 640px) {
    .pd-tab { flex: 1 1 100%; text-align: left; }
}


/* Panels separated by real space need their own edge - the old grid drew
   those lines with a background showing through 2px gaps. */
.concern-card { border: 1px solid var(--line); border-radius: var(--r-md); }
.pdp-trust-strip > div { border: 1px solid var(--line); border-radius: var(--r-md); }
.review-item { border: 1px solid var(--line); border-radius: var(--r-md); }
.about-story, .about-promises { border: 1px solid var(--line); border-radius: var(--r-md); }
.contact-form-panel, .contact-details-panel { border: 1px solid var(--line); border-radius: var(--r-md); }
.policy-step { border: 1px solid var(--line); border-radius: var(--r-md); }
.track-step { border: 1px solid var(--line); border-radius: var(--r-md); }
.stat-cell { border: 1px solid var(--line); border-radius: var(--r-md); }
.brand-tile { border: 1px solid var(--line); border-radius: var(--r-md); }
.address-card { border: 1px solid var(--line); border-radius: var(--r-md); }


/* ==================================================================
   Boxed layout
   The whole shop sits on a card floating over a deeper "outside"
   colour, so the page has a visible edge instead of bleeding to the
   window. Only applies above the breakpoint - on a phone a box would
   just waste the little width there is.
   ================================================================== */
body.is-boxed { background: var(--outside); }

@media (min-width: 1180px) {
    body.is-boxed .site-box {
        max-width: calc(var(--wrap-max) + 96px);
        margin: 26px auto;
        background: var(--cream);
        box-shadow: 0 2px 4px var(--box-edge), 0 18px 50px var(--box-edge);
        border-radius: var(--r-lg);
        /* Deliberately no overflow:hidden here - it would silently disable
           position:sticky on the header inside. The corners are rounded on
           the first and last children instead. */
    }
    body.is-boxed .topbar,
    body.is-boxed .site-header:first-child {
        border-top-left-radius: var(--r-lg);
        border-top-right-radius: var(--r-lg);
    }
    body.is-boxed .site-footer {
        border-bottom-left-radius: var(--r-lg);
        border-bottom-right-radius: var(--r-lg);
    }
    /* The header sticks to the top of the window, so it needs to stay inside
       the box's horizontal bounds rather than spanning the viewport. */
    body.is-boxed .site-header { border-radius: 0; }
}

/* ==================================================================
   Home sections added for the Glow layout
   ================================================================== */

/* --- Trust strip: one white card, hairline dividers between items --- */
.usp-section { margin-top: calc(var(--section-gap) * -0.35); }
.usp-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: var(--surface-white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 6px 24px rgba(27, 20, 23, .06);
    overflow: hidden;
}
.usp-item {
    display: flex; align-items: center; gap: 11px;
    padding: 18px 16px;
    border-right: 1px solid var(--line-soft);
}
.usp-item:last-child { border-right: none; }
.usp-icon {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--sage-tint); color: var(--sage);
}
.usp-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.usp-text strong {
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink);
}
.usp-text small { font-size: 11.5px; color: var(--ink-muted); line-height: 1.35; }
@media (max-width: 700px) {
    .usp-strip { grid-template-columns: repeat(2, 1fr); }
    /* On two columns the right-hand border of every 2nd cell is the outer edge. */
    .usp-item:nth-child(2n) { border-right: none; }
    .usp-item { border-bottom: 1px solid var(--line-soft); }
}

/* --- Promo tiles --- */
.promo-trio { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(3, 1fr); }
.promo-trio-1 { grid-template-columns: 1fr; }
.promo-trio-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .promo-trio, .promo-trio-2 { grid-template-columns: 1fr; } }
.promo-tile {
    position: relative; overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--sage-tint);
    color: var(--ink);
    min-height: 190px;
    display: flex; align-items: center;
    transition: transform .2s ease, box-shadow .2s ease;
}
a.promo-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(27, 20, 23, .14); }
.promo-tile-dark { background: var(--ink); color: #fff; }
.promo-tile-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: .9;
}
/* With artwork behind it the text needs its own scrim to stay readable. */
.promo-tile-img + .promo-tile-body {
    background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,0) 100%);
}
.promo-tile-dark .promo-tile-img + .promo-tile-body {
    background: linear-gradient(90deg, rgba(20,15,17,.92) 0%, rgba(20,15,17,.66) 55%, rgba(20,15,17,0) 100%);
}
.promo-tile-body { position: relative; padding: 26px 24px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; width: 100%; }
.promo-tile-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--sage); margin-bottom: 7px;
}
.promo-tile-dark .promo-tile-label { color: var(--sage-tint-2); }
.promo-tile-title {
    font-family: var(--font-display); font-size: 22px; font-weight: var(--head-weight);
    line-height: 1.18; margin: 0 0 14px; max-width: 15ch;
}
.promo-tile-btn {
    align-self: flex-start;
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 9px 18px; border-radius: var(--r-pill);
    background: var(--sage); color: var(--on-accent);
}
.promo-tile-dark .promo-tile-btn { background: #fff; color: var(--ink); }

/* --- Customer quotes --- */
.quote-scroller { position: relative; }
.quote-grid {
    display: flex; gap: var(--grid-gap);
    overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
    padding: 4px 2px 10px;
}
.quote-grid::-webkit-scrollbar { display: none; }
.quote-card {
    flex: 0 0 min(360px, 82%);
    margin: 0;
    background: var(--surface-white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px 24px 20px;
    position: relative;
}
.quote-mark {
    font-family: var(--font-display); font-size: 46px; line-height: .6;
    color: var(--sage-tint-2); display: block; margin-bottom: 8px;
}
.quote-card blockquote {
    margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}
.quote-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quote-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.quote-stars { color: var(--sage); font-size: 13px; letter-spacing: 1px; }

/* Dev-mode reminder, shown to a signed-in admin browsing the live site while
   everyone else is seeing the holding page. Deliberately loud. */
.devmode-bar {
    background: #B0202E; color: #fff; text-align: center;
    padding: 9px 14px; font-size: 12.5px; line-height: 1.5;
    position: relative; z-index: 60;
}
.devmode-bar a { color: #fff; text-decoration: underline; margin-left: 6px; }

/* A finished banner slide: one column, artwork at its own aspect ratio so
   nothing is cropped. height:auto is what matters - the split layout's
   min-height would otherwise force a crop on a very wide banner. */
/* Two classes, not one: the active theme sets .hero-slide's 38/62 split from a
   <style> block that loads after this file, so a single-class rule here would
   lose on source order and the banner would render in the 38% column. */
.hero-slide.hero-slide-full { grid-template-columns: 1fr; min-height: 0; }
.hero-slide.hero-slide-full .hero-slide-image { min-height: 0; height: auto; }
.hero-slide.hero-slide-full .hero-slide-image img { width: 100%; height: auto; object-fit: contain; display: block; }
@media (max-width: 900px) {
    .hero-slide.hero-slide-full .hero-slide-image { height: auto; }
    .hero-slide.hero-slide-full .hero-slide-image img { height: auto; }
}

/* ==================================================================
   Product gallery, shown under the description
   ================================================================== */
.pdp-gallery-below { margin-top: 34px; }

.gallery-stage {
    position: relative;
    background: var(--surface-white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
/* Square frame with "contain": product photography arrives in mixed shapes
   (the live catalogue is 800x800, the seed images are 4:5) and cropping a
   product shot can cut the label off. Letterboxing is the safer default. */
.gallery-main-frame { width: 100%; aspect-ratio: 1 / 1; max-height: 560px; }
.gallery-main-frame img {
    width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in;
}

.gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--line); background: rgba(255,255,255,.94); color: var(--ink);
    font-size: 17px; line-height: 1; cursor: pointer; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, box-shadow .15s;
}
.gallery-nav:hover { background: var(--sage); color: var(--on-accent); box-shadow: var(--shadow-md); }
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }

.gallery-count {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    background: rgba(27,20,23,.72); color: #fff;
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
    padding: 4px 10px; border-radius: var(--r-pill);
}

.pdp-thumbs {
    display: flex; flex-direction: row; gap: 10px; margin-top: 12px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.pdp-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb {
    flex: 0 0 74px; width: 74px; height: 74px; padding: 0;
    border: 2px solid var(--line); border-radius: var(--r-md);
    background: var(--surface-white); cursor: pointer; overflow: hidden;
    transition: border-color .15s;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { border-color: var(--sage-tint-2); }
.gallery-thumb.active { border-color: var(--sage); }

@media (max-width: 640px) {
    .gallery-main-frame { max-height: 380px; }
    .gallery-nav { width: 36px; height: 36px; }
    .gallery-thumb { flex-basis: 60px; width: 60px; height: 60px; }
}

/* ==================================================================
   Product page - gallery left, buy column right, tabs full width
   ================================================================== */

/* Discount badge and zoom affordance, over the main image. */
.gallery-badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: var(--sale); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
    padding: 5px 10px; border-radius: var(--r-sm);
}
.gallery-zoom {
    position: absolute; left: 12px; bottom: 12px; z-index: 2;
    /* 44px: below that this is hard to hit accurately on a phone. */
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--line); background: rgba(255,255,255,.94);
    color: var(--ink); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s ease, color .18s ease;
}
.gallery-zoom:hover { background: var(--sage); color: var(--on-accent); }
.gallery-zoom:focus-visible,
.gallery-nav:focus-visible,
.gallery-thumb:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

/* Lead paragraph: the short pitch above the buy controls. */
.pdp-lead {
    margin: 0 0 18px; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft);
    max-width: 62ch;                 /* keeps the measure readable */
}

/* Countdown to the end of a scheduled sale. */
.pdp-countdown { display: flex; gap: 10px; margin: 0 0 20px; }
.cd-cell {
    min-width: 62px; text-align: center;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface-white); padding: 9px 6px;
}
.cd-cell strong {
    display: block; font-family: var(--font-body);
    font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}
.cd-cell span {
    display: block; margin-top: 2px;
    font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-muted);
}

/* Category / share lines. */
.pdp-meta-links { margin: 20px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.pdp-meta-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.pdp-meta-key { color: var(--ink-muted); min-width: 62px; }
.pdp-meta-line a { color: var(--ink-soft); }
.pdp-meta-line a:hover { color: var(--sage); }
.pdp-meta-sep { color: var(--line); }
.pdp-share {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--line); color: var(--ink-soft);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pdp-share:hover { background: var(--sage); border-color: var(--sage); color: var(--on-accent); }

/* Tabs, now full width under both columns. */
.pdp-tabs-full { padding: 30px 0 8px; border-bottom: 2px solid var(--line); }
.pdp-tabs-full .pd-tabs { margin-top: 0; }

@media (max-width: 900px) {
    /* Single column: the gallery stacks above the buy controls. */
    .pdp-main { grid-template-columns: 1fr; }
    .pdp-media { border-right: none; border-bottom: 2px solid var(--line); padding: 20px 0 24px; }
    .pdp-info { padding: 22px 0 28px; }
    .pdp-countdown { gap: 8px; }
    .cd-cell { min-width: 0; flex: 1; }
}
/* Wishlist + compare sit on one row, as on the product cards. */
.pdp-secondary-actions { display: flex; gap: 10px; align-items: stretch; }
.pdp-secondary-actions > form:first-child { flex: 1; }
.pdp-secondary-actions .btn-wishlist { width: 100%; }
.pdp-compare-form { flex: none; }
.btn-compare {
    /* 44px minimum: an icon-only control still has to be tappable. */
    width: 44px; height: 100%; min-height: 44px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface-white); color: var(--ink-soft);
    font-size: 17px; line-height: 1; cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-compare:hover { background: var(--sage); border-color: var(--sage); color: var(--on-accent); }
.btn-compare.is-on { border-color: var(--sage); color: var(--sage); }
.btn-compare:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

/* Long-form policy text: privacy, terms. Narrower than full width because a
   65-75 character line is where legal prose stays readable. */
.policy-body { max-width: 68ch; margin: 0 auto; }
.policy-body h2 {
    font-size: 16px; margin: 32px 0 10px;
    font-family: var(--font-body); font-weight: 700;
    letter-spacing: .04em; color: var(--ink);
}
.policy-body h2:first-child { margin-top: 0; }
.policy-body p, .policy-body li { font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }
.policy-body ul { padding-left: 20px; margin: 10px 0 16px; }
.policy-body li { margin-bottom: 7px; }
.policy-body a { color: var(--sage); }