/* PhytoStore — base styles shared by all themes */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body, 'Inter', sans-serif);
    background: var(--bg);
    color: var(--tx);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

/* ── LAYOUT ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.section    { padding: 40px 0; }

/* ── NAV ── */
.nav {
    position: sticky; top: 0; z-index: 200;
    background: var(--sf); border-bottom: 1px solid var(--bd);
    height: 58px; display: flex; align-items: center;
    padding: 0 24px; gap: 18px; box-shadow: var(--sh);
}
.nav-brand {
    font-family: var(--font-head); font-weight: 700; font-size: 17px;
    display: flex; align-items: center; gap: 8px;
}
.nav-brand em { color: var(--ac); font-style: normal; }
.nav-brand img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.nav-links { display: flex; gap: 20px; margin-left: auto; }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--mu); transition: color .15s; }
.nav-links a:hover { color: var(--tx); }
.nav-right { display: flex; align-items: center; gap: 10px; margin-left: 12px; }
.icon-btn {
    width: 38px; height: 38px; border-radius: var(--r);
    border: 1.5px solid var(--bd); display: flex; align-items: center;
    justify-content: center; position: relative; transition: all .15s;
}
.icon-btn:hover { border-color: var(--ac); color: var(--ac); }
.cart-badge {
    position: absolute; top: -6px; right: -6px;
    background: var(--cta); color: var(--ct);
    font-size: 10px; font-weight: 700;
    width: 18px; height: 18px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
}
.cart-badge.on { display: flex; }

/* ── HERO ── */
.hero {
    position: relative; color: #fff; overflow: hidden;
    min-height: 360px; display: flex; align-items: center; justify-content: center; text-align: center;
}
/* Rotating gallery hero is taller than the static one — but capped at 58vh so
   the trust bar and the first product row still clear the fold on a laptop.
   600px was chosen over the 720px originally floated for exactly that reason. */
.hero-rot { min-height: clamp(420px, 58vh, 600px); padding-bottom: 34px; }

.hero-bg { position: absolute; inset: 0; background: var(--ac); }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }

/* Slides stack and crossfade. Never slide horizontally: lateral motion reads
   as advertising and yanks the eye, a crossfade reads as a gallery and can be
   comfortably ignored while you shop. */
.hero-slide {
    position: absolute; inset: 0; opacity: 0;
    transition: opacity .9s ease;
    background-size: cover; background-position: center;   /* LQIP sits here */
}
.hero-slide.on { opacity: 1; }
.hero-slide img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    /* .82, not the static hero's .45 — these are the seller's own photographs
       and the whole point is that you can see them. Legibility is bought back
       by the tint layer and the text halo below, not by hiding the picture. */
    opacity: .82;
}
/* Ken Burns. 12s and 6% — below the threshold where you notice it moving,
   above the threshold where the hero feels like a dead screenshot. */
.hero-slide.on img { animation: hero-kb 12s ease-out forwards; }
@keyframes hero-kb { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Per-slide colour, extracted from the image at upload. Multiply keeps the
   photo's own shading and pushes it toward the tint rather than flattening it. */
.hero-tint {
    position: absolute; inset: 0;
    background: var(--ht, #12211c); opacity: .42; mix-blend-mode: multiply;
    transition: background .9s ease;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.55) 100%); }
.hero-rot .hero-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.68) 100%);
}

.hero-inner { position: relative; z-index: 2; padding: 52px 24px 44px; max-width: 600px; margin: 0 auto; }
/* Omnidirectional halo. A layered shadow, not -webkit-text-stroke: a real
   stroke fattens 15px body copy and costs more legibility than it buys. This
   is what lets the image sit at .82 without the copy dissolving into a
   bright flower. */
.hero-rot .hero-inner {
    text-shadow: 0 0 4px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.9);
}
.hero-badge {
    display: inline-block; padding: 4px 14px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.4); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; color: rgba(255,255,255,.9);
}
.hero-rot .hero-badge { background: rgba(0,0,0,.22); backdrop-filter: blur(3px); }
.hero h1 {
    font-family: var(--font-head); font-weight: 700;
    font-size: clamp(24px, 5vw, 42px); line-height: 1.18;
    margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hero-rot h1 { text-shadow: none; }   /* the .hero-inner halo covers it */
.hero p { font-size: 15px; opacity: .85; margin-bottom: 26px; line-height: 1.6; }
.hero-rot p { opacity: .94; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-rot .hero-actions .btn { text-shadow: none; }

/* Ribbon. Height is reserved whatever the slide type, so advancing the
   rotation never nudges the h1 or the buttons above it. */
.hero-ribbon {
    position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3;
    height: 34px; padding: 0 18px; pointer-events: none;
}
.hero-cap {
    position: absolute; left: 0; right: 0; padding: 0 18px;
    display: flex; align-items: center; justify-content: center;
    gap: 9px; flex-wrap: wrap;
    opacity: 0; transform: translateY(6px);
    transition: opacity .4s ease, transform .4s ease;
    font-size: 12.5px; line-height: 1.45;
    text-shadow: 0 0 4px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.85);
}
/* The caption arrives 200ms after the image settles. That stagger is the whole
   trick — simultaneous reads accidental, offset reads authored. */
.hero-cap.on { opacity: 1; transform: none; transition-delay: .2s; }
.hero-stars  { color: #fbbf24; letter-spacing: .5px; font-size: 12px; }
.hero-quote  { color: rgba(255,255,255,.95); font-style: italic; max-width: 60ch; }
.hero-by     { color: rgba(255,255,255,.72); font-size: 11.5px; }
.hero-name   { color: #fff; font-weight: 700; pointer-events: auto; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.hero-name:hover { border-bottom-color: #fff; }
.hero-wiki {
    pointer-events: auto; font-size: 10.5px; font-weight: 600;
    padding: 1px 8px; border-radius: 999px; text-decoration: none;
    color: rgba(255,255,255,.9); background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
}
.hero-wiki:hover { background: rgba(255,255,255,.28); }

.hero-dots { position: absolute; bottom: 9px; left: 0; right: 0; z-index: 4; display: flex; gap: 6px; justify-content: center; }
.hero-dot {
    width: 6px; height: 6px; border-radius: 50%; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.38); border: none; transition: all .25s;
}
.hero-dot:hover { background: rgba(255,255,255,.75); transform: scale(1.25); }
.hero-dot.on { background: #fff; width: 18px; border-radius: 3px; }

/* Progress hairline. Turns the rotation from unpredictable (irritating) into
   paced (calm), and hints that the dots are interactive. */
.hero-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 4; background: rgba(255,255,255,.14); }
.hero-prog span { display: block; height: 100%; width: 0; background: rgba(255,255,255,.75); }
.hero-prog span.run { transition: width linear; }

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
    .hero-slide.on img { animation: none; }
    .hero-cap { transition: none; }
    .hero-prog { display: none; }
}

/* ── BUTTONS ── */
.btn { padding: 11px 24px; border-radius: var(--r); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; transition: all .18s; }
.btn-primary  { background: var(--cta); color: var(--ct); border: 2px solid transparent; }
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-outline  { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); }
.btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-ac       { background: var(--ac); color: #fff; border: 2px solid transparent; }
.btn-ac:hover { filter: brightness(1.1); }

/* ── REVIEWS PAGE ──
   Store-wide consolidation of every approved review. The rating here is only
   ever what customers left on this site — Google reviews are never merged in
   (see storefront/reviews.php header for why that is a hard constraint, not a
   preference). */
.rvp-summary {
    display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
    padding: 20px 22px; margin-bottom: 26px;
    background: var(--sf); border: 1px solid var(--bd); border-radius: 12px;
}
.rvp-score { text-align: center; flex-shrink: 0; min-width: 116px; }
.rvp-score-num { font-family: var(--font-head); font-size: 40px; font-weight: 800; line-height: 1; color: var(--tx); }
.rvp-score-stars { color: #f59e0b; font-size: 15px; letter-spacing: 1px; margin: 5px 0 3px; }
.rvp-dim { color: var(--bd); }
.rvp-score-count { font-size: 12px; color: var(--mu); }

.rvp-bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 5px; }
.rvp-bar-row {
    display: flex; align-items: center; gap: 9px;
    text-decoration: none; color: inherit; padding: 1px 4px;
    border-radius: 6px; transition: background .15s;
}
.rvp-bar-row:hover { background: var(--bg); }
.rvp-bar-row.on { background: var(--bg); outline: 1px solid var(--ac); }
.rvp-bar-label { font-size: 11px; color: var(--mu); width: 22px; flex-shrink: 0; }
.rvp-bar-track { flex: 1; height: 7px; background: var(--bd); border-radius: 4px; overflow: hidden; }
.rvp-bar-fill  { display: block; height: 100%; background: #f59e0b; border-radius: 4px; }
.rvp-bar-n { font-size: 11px; color: var(--mu); width: 26px; text-align: right; flex-shrink: 0; }

.rvp-tools { margin-bottom: 18px; }
.rvp-tools-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rvp-sort { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.rvp-sort-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); }
.rvp-sort select {
    padding: 8px 11px; border: 1px solid var(--bd); border-radius: 9px;
    background: var(--sf); color: var(--tx); font-size: 13px; cursor: pointer;
}
.rvp-sort select:focus { outline: none; border-color: var(--ac); }
.rvp-search {
    width: 100%; max-width: 460px; padding: 9px 13px;
    border: 1px solid var(--bd); border-radius: 9px;
    background: var(--sf); color: var(--tx); font-size: 13.5px;
}
.rvp-search:focus { outline: none; border-color: var(--ac); }
.rvp-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 11px; }
.rvp-chips-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); margin-right: 3px; }
.rvp-chip {
    font-size: 12px; font-weight: 600; padding: 4px 11px;
    border: 1px solid var(--bd); border-radius: 999px;
    background: var(--sf); color: var(--tx); transition: all .15s;
}
.rvp-chip:hover { border-color: var(--ac); color: var(--ac); }
.rvp-chip.on { background: var(--ac); border-color: var(--ac); color: #fff; }
.rvp-chip-n { color: var(--mu); font-weight: 500; }
.rvp-chip.on .rvp-chip-n { color: rgba(255,255,255,.75); }
.rvp-count { font-size: 12.5px; color: var(--mu); margin-top: 10px; }

.rvp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.rvp-card {
    background: var(--sf); border: 1px solid var(--bd); border-radius: 12px;
    padding: 15px 16px; display: flex; flex-direction: column;
}
.rvp-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.rvp-stars { color: #f59e0b; font-size: 13px; letter-spacing: 1px; }
.rvp-date  { font-size: 11px; color: var(--mu); }
.rvp-title { font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.rvp-body  { font-size: 13.5px; line-height: 1.6; color: var(--tx); margin: 0 0 13px; }
.rvp-foot {
    margin-top: auto; padding-top: 11px; border-top: 1px solid var(--bd);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.rvp-by { font-size: 12px; font-weight: 600; color: var(--mu); flex-shrink: 0; }
.rvp-prod {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    text-decoration: none; color: var(--ac); font-size: 12px; font-weight: 600;
}
.rvp-prod img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.rvp-prod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rvp-google {
    margin-top: 30px; padding: 22px; text-align: center;
    border: 1px solid var(--bd); border-radius: 12px; background: var(--sf);
}
.rvp-google-txt { font-size: 13.5px; color: var(--mu); margin-bottom: 12px; }
.rvp-google-btn {
    display: inline-block; padding: 10px 22px;
    background: #fff; border: 1px solid #dadce0; border-radius: 8px;
    color: #3c4043; font-size: 14px; font-weight: 600; text-decoration: none;
}
.rvp-google-btn:hover { background: #f8f9fa; }

@media (max-width: 640px) {
    .rvp-summary { gap: 16px; padding: 16px; }
    .rvp-score { min-width: 92px; }
    .rvp-score-num { font-size: 32px; }
    .rvp-grid { grid-template-columns: 1fr; }
    .rvp-sort { margin-left: 0; }
    .rvp-search { max-width: none; }
}

/* ── PRODUCT GRID ── */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.prod-card {
    background: var(--sf); border-radius: var(--r); border: 1px solid var(--bd);
    overflow: hidden; box-shadow: var(--sh); transition: transform .18s, box-shadow .18s; cursor: pointer;
}
.prod-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.13); }
.prod-card-img  { aspect-ratio: 1; position: relative; overflow: hidden; background: #e8e8e0; }
.prod-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.prod-card:hover .prod-card-img img { transform: scale(1.04); }
.prod-card-body { padding: 13px 15px; }
.prod-cat   { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin-bottom: 4px; }
.prod-name  { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.prod-name em { font-style: italic; font-weight: 400; }
.prod-foot  { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prod-price { font-size: 16px; font-weight: 700; }
.prod-cmp   { font-size: 12px; color: var(--mu); text-decoration: line-through; margin-left: 4px; }
.prod-add   { width: 32px; height: 32px; border-radius: var(--r); background: var(--ac); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; transition: all .15s; }
.prod-add:hover { filter: brightness(1.12); transform: scale(1.07); }
.prod-add.oos { background: var(--bd); color: var(--mu); cursor: not-allowed; }

/* ── BADGES ── */
.badge-pill { position: absolute; top: 9px; left: 9px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; z-index: 2; }
.badge-sale { background: #e53e3e; color: #fff; }
.badge-low  { background: var(--cta); color: var(--ct); }
.badge-new  { background: var(--ac); color: #fff; }
.badge-bo   { background: #6b46c1; color: #fff; }

/* ── WATERMARK ── */
.wm-overlay {
    position: absolute; bottom: 7px; right: 8px;
    background: rgba(0,0,0,.46); color: rgba(255,255,255,.8);
    font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 3px;
    pointer-events: none; user-select: none; letter-spacing: .05em; z-index: 3;
}

/* ── FILTERS ── */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.filter-pill { padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1.5px solid var(--bd); background: var(--sf); color: var(--mu); cursor: pointer; transition: all .15s; }
.filter-pill.on, .filter-pill:hover { border-color: var(--ac); color: var(--ac); }

/* ── TRUST BAR ── */
.trust-bar { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; padding: 12px 24px; background: var(--sf); border-bottom: 1px solid var(--bd); }
.trust-item { font-size: 12px; font-weight: 500; color: var(--mu); display: flex; align-items: center; gap: 5px; }

/* ── CART DRAWER ── */
.cart-overlay { position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,.4); display: none; }
.cart-overlay.on { display: block; }
.cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(390px, 100vw);
    background: var(--sf); z-index: 601;
    display: flex; flex-direction: column;
    box-shadow: -4px 0 30px rgba(0,0,0,.15);
    transform: translateX(100%); transition: transform .28s ease;
}
.cart-overlay.on .cart-drawer { transform: translateX(0); }
.cart-hd { padding: 18px 20px 14px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; }
.cart-hd h3 { font-family: var(--font-head); font-size: 17px; font-weight: 700; }
.cart-body { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.cart-empty { text-align: center; padding: 40px 20px; color: var(--mu); font-size: 14px; }
.cart-foot { padding: 14px 18px; border-top: 1px solid var(--bd); display: flex; flex-direction: column; gap: 10px; }
.cart-item { display: flex; gap: 12px; align-items: flex-start; }
.cart-item-img { width: 58px; height: 58px; border-radius: var(--r); overflow: hidden; background: #e8e8e0; border: 1px solid var(--bd); flex-shrink: 0; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── FORM ELEMENTS ── */
.fg { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.fg label { font-size: 11px; font-weight: 600; color: var(--mu); text-transform: uppercase; letter-spacing: .06em; }
.fg input, .fg select, .fg textarea {
    padding: 9px 12px; border: 1.5px solid var(--bd); border-radius: var(--r);
    font-size: 14px; color: var(--tx); background: var(--bg); outline: none;
    transition: border-color .15s; width: 100%;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--ac); }
.pwd-field { position: relative; width: 100%; }
.pwd-field input { padding-right: 38px !important; }
.pwd-toggle {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 6px 8px;
    font-size: 15px; line-height: 1; color: var(--mu);
}
.pwd-toggle:hover { color: var(--tx); }

/* ── FOOTER ── */
footer { background: var(--tx); color: rgba(255,255,255,.7); padding: 34px 20px 20px; margin-top: 60px; }
.ft-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; }
.ft-brand { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }
.ft-brand img { width: 28px; height: 28px; border-radius: 50%; }
.ft-tag { font-size: 13px; line-height: 1.6; margin-bottom: 10px; }
.ft-pow { font-size: 11px; opacity: .38; }
.ft-col h4 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ft-col ul li a { font-size: 13px; transition: color .15s; cursor: pointer; }
.ft-col ul li a:hover { color: #fff; }
.ft-bot { max-width: 1100px; margin: 20px auto 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); font-size: 11px; opacity: .36; text-align: center; }

/* ── ANNOUNCEMENT + NEWS TICKER ──
   These were a solid accent fill, then briefly a 50% accent wash. Both fought
   the page: on a white storefront whose only other strong colour block is the
   hero, a full-width slab of accent reads as a foreign object and competes
   with the thing directly below it that is supposed to win.

   So they are recessive now — surface-toned, near-white, with the accent
   surviving only as a hairline and as the label/emphasis colour. Present,
   readable, and the hero remains the single strong colour block on the page.

   Contrast note, do not undo: white text cannot live on these bars. Measured
   white-on-50%-accent across the three themes it was 2.00 / 1.70 / 2.37
   against a 4.5:1 requirement, and var(--ac) as text was no better
   (2.15 / 1.72 / 2.76). Body copy here stays var(--tx). */
.announce-bar, .ticker-wrap { position: relative; isolation: isolate; }
.announce-bar::before, .ticker-wrap::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--ac); opacity: .07;
}
.announce-bar {
    color: var(--tx);
    border-bottom: 1px solid color-mix(in srgb, var(--ac) 18%, transparent);
}
.announce-bar .announce-line::before {
    content: ''; display: inline-block; vertical-align: middle;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--ac); margin-right: 9px;
}
.announce-line {
    max-width: 900px; margin: 0 auto; padding: 8px 20px;
    font-size: 13px; font-weight: 600; text-align: center; line-height: 1.5;
}
.ticker-wrap {
    color: var(--tx);
    overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--ac) 18%, transparent);
    height: 32px; display: flex; align-items: center;
}
.ticker-inner { display: flex; align-items: center; width: 100%; overflow: hidden; }
.ticker-label {
    flex-shrink: 0; padding: 0 14px;
    font-size: 9px; font-weight: 800; letter-spacing: .12em;
    color: var(--ac); border-right: 1px solid color-mix(in srgb, var(--ac) 22%, transparent);
    height: 100%; display: flex; align-items: center;
}
.ticker-track { flex: 1; overflow: hidden; }
.ticker-content {
    display: flex; align-items: center; gap: 0; white-space: nowrap;
    width: max-content;
    animation: ticker-scroll 30s linear infinite;
    will-change: transform;
}
.ticker-wrap:hover .ticker-content { animation-play-state: paused; }
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.tick-item { font-size: 12px; font-weight: 600; padding: 0 18px; text-decoration: none; color: inherit; }
/* Sale/new were #fde68a and #bbf7d0 — pale tints chosen to read against a
   solid accent fill. On the 50% tinted bar they measure under 2:1 and vanish.
   No single hex clears 4.5:1 on all three themes (best candidate managed 3.96
   on robust), so the distinction is carried by weight and the emoji already in
   the markup instead of by colour, which is the accessible answer anyway. */
.tick-item.sale { font-weight: 800; }
.tick-item.new  { font-weight: 700; }
.tick-item:hover { opacity: .7; }
.tick-sep { opacity: .35; font-size: 14px; }

/* ── HERO BOTANICAL FALLBACK (no banner image) ── */
.hero-botanical {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--ac) 0%, color-mix(in srgb, var(--ac) 70%, #000) 100%);
}
.hero-botanical::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(ellipse 120px 180px at 80% 40%, rgba(255,255,255,.06) 0%, transparent 70%),
        radial-gradient(ellipse 80px 120px at 70% 70%, rgba(255,255,255,.04) 0%, transparent 70%),
        radial-gradient(ellipse 60px 90px at 60% 20%, rgba(255,255,255,.05) 0%, transparent 70%),
        radial-gradient(ellipse 200px 300px at 85% 50%, rgba(255,255,255,.03) 0%, transparent 70%);
}
.hero-botanical::after {
    content: '';
    position: absolute; right: 0; top: 0; bottom: 0; width: 55%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' opacity='.12'%3E%3Cellipse cx='320' cy='180' rx='60' ry='120' fill='%23fff' transform='rotate(-20 320 180)'/%3E%3Cellipse cx='280' cy='280' rx='50' ry='100' fill='%23fff' transform='rotate(15 280 280)'/%3E%3Cellipse cx='350' cy='320' rx='40' ry='90' fill='%23fff' transform='rotate(-10 350 320)'/%3E%3Cellipse cx='200' cy='150' rx='35' ry='75' fill='%23fff' transform='rotate(25 200 150)'/%3E%3Cline x1='300' y1='500' x2='300' y2='100' stroke='%23fff' stroke-width='3' stroke-dasharray='8 6'/%3E%3Cline x1='260' y1='500' x2='310' y2='150' stroke='%23fff' stroke-width='2' stroke-dasharray='6 8'/%3E%3Cline x1='340' y1='500' x2='295' y2='200' stroke='%23fff' stroke-width='2' stroke-dasharray='6 8'/%3E%3C/svg%3E");
    background-size: cover; background-position: center right;
}

/* ── NO RIGHT CLICK ── */
img { -webkit-user-drag: none; }

/* ── RESPONSIVE ── */

/* Tablet: 2-col products */
@media (max-width: 900px) {
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
    .ft-inner { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 700px) {
    /* NAV */
    .hamburger { display: flex !important; }
    .nav { gap: 10px; }
    /* Brand claims the free space; icon cluster stays compact on the right */
    .nav-right { margin-left: auto; gap: 6px; flex-shrink: 0; }
    /* Let the store name use all available width, ellipsis only at the true edge */
    .nav-brand { min-width: 0; flex: 1 1 auto; }
    .nav-brand span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .nav-links {
        display: none;
        position: fixed; inset: 0; top: 58px; z-index: 500;
        flex-direction: column; gap: 0;
        background: var(--sf); border-top: 1px solid var(--bd);
        padding: 16px 0; box-shadow: 0 8px 30px rgba(0,0,0,.15);
    }
    .nav-links.nav-open { display: flex; }
    .nav-links a {
        padding: 14px 24px; font-size: 15px; font-weight: 500;
        color: var(--tx); border-bottom: 1px solid var(--bd);
    }
    .nav-links a:last-child { border-bottom: none; }

    /* Products */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .prod-card-body { padding: 10px 11px; }
    .prod-name { font-size: 13px; }
    .prod-price { font-size: 14px; }

    /* Hero */
    .hero { min-height: 260px; }
    .hero h1 { font-size: 22px; }
    .hero p { font-size: 13px; }
    .hero-inner { padding: 36px 18px 30px; }

    /* Rotation runs on mobile too — full parity, just a shorter hero and a
       taller ribbon, because the quote wraps to two lines at this width. */
    .hero-rot { min-height: 340px; padding-bottom: 46px; }
    .hero-rot .hero-inner { padding: 30px 18px 22px; }
    .hero-ribbon { bottom: 24px; height: 44px; }
    .hero-cap { font-size: 11.5px; gap: 6px; }
    .hero-quote { font-size: 11.5px; max-width: 40ch; }
    .hero-by { display: none; }       /* quote + product name earn the space */

    /* Container */
    .container { padding: 0 14px; }
    .section { padding: 28px 0; }

    /* Footer */
    .ft-inner { grid-template-columns: 1fr; gap: 20px; }

    /* Buttons — touch target 44px min */
    .btn { padding: 13px 22px; }
    .icon-btn { width: 42px; height: 42px; }

    /* Cart drawer fills screen on mobile */
    .cart-drawer { width: 100vw !important; }

    /* Trust bar */
    .trust-bar { gap: 14px; padding: 10px 14px; }
    .trust-item { font-size: 11px; }
}

/* Hamburger hidden on desktop */
.hamburger { display: none; }

/* PWA safe-area insets */
@supports (padding: env(safe-area-inset-bottom)) {
    .nav { padding-left: calc(24px + env(safe-area-inset-left)); padding-right: calc(24px + env(safe-area-inset-right)); }
    footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
    /* Tighter nav padding on phones so the store name has room (overrides the 24px above on mobile) */
    @media (max-width: 700px) {
        .nav { padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)); }
    }
}

/* PWA standalone — hide browser chrome hints */
@media (display-mode: standalone) {
    .nav { padding-top: env(safe-area-inset-top, 0); height: calc(58px + env(safe-area-inset-top, 0)); }
}