:root{
  --cream: #FBF7EE;
  --cream-card: #FFFDF9;
  --ink: #1D1F15;
  --ink-soft: #55583F;
  --ink-faint: #8A8D6E;
  --olive-deep: #2E3320;
  --olive: #56692E;
  --olive-mid: #6B7F42;
  --copper: #B9691E;
  --copper-soft: #D98A34;
  --gold-tint: #F3E3C4;
  --line: #E4DAC4;
  --radius: 14px;
  --shadow: 0 10px 30px -12px rgba(30,34,20,.28);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--font-display); font-weight:700; margin:0; color:var(--olive-deep); text-wrap:balance;}
p{margin:0;}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,48px);}

/* Ticker + header stay stacked together and pinned at the top while the
   page scrolls — one sticky wrapper, so neither has to know the other's
   height. */
.sticky-top-stack{position:sticky; top:0; z-index:40;}

/* promo ticker — a scrolling marquee of active site-wide deals (bulk
   discount, shipping promos), on every page via layout(). Absent entirely
   when nothing is running. Text flows left-to-right; when a shipping promo
   is active, a small delivery truck drives the same direction along its
   own dark "road" lane underneath, so it's never lost against the banner's
   own color. */
.promo-ticker{background:linear-gradient(90deg, var(--copper), var(--copper-soft)); color:#fff; overflow:hidden; position:relative; box-shadow:0 3px 10px -4px rgba(0,0,0,.35);}
.promo-ticker-track{display:flex; width:max-content; white-space:nowrap; animation:promoScroll 22s linear infinite; transform:translateX(-25%);}
.promo-ticker-item{display:inline-flex; align-items:center; padding:9px 28px; font-size:.85rem; font-weight:700; letter-spacing:.02em; text-shadow:0 1px 2px rgba(0,0,0,.15);}
.promo-ticker-item::after{content:'•'; margin-left:28px; opacity:.6;}
@keyframes promoScroll{from{transform:translateX(-25%);} to{transform:translateX(0%);}}
.promo-ticker-road{position:relative; height:54px; background:#1c1c1c; overflow:hidden;}
.promo-ticker-road::before{content:''; position:absolute; bottom:9px; left:0; width:100%; height:2px;
  background-image:repeating-linear-gradient(90deg, #fff 0, #fff 16px, transparent 16px, transparent 34px);}
/* The truck drives to the middle of the strip and comes to a full stop. The
   driver gets out of the FRONT (cab) door — the cargo box's own rear doors
   stay shut the whole time, drawn but never animated — walks the length of
   the truck to the back carrying a box, sets it down there, and walks back
   empty-handed to the front door; the door swings shut and the truck drives
   off. One continuous 16s loop, drawn as our own SVG/CSS shapes (brand
   colors, real cab/windshield/wheel detail — not a fixed-color emoji) so it
   reads clearly against the copper ticker above. The cargo box carries
   whatever the admin's actual active shipping promo says (a percentage or
   "free") — never fixed placeholder text. */
.delivery-truck{position:absolute; bottom:1px; left:0; will-change:transform; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); animation:truckDriveStop 16s ease-in-out infinite;}
.truck-body{display:block;}
.truck-front-door{position:absolute; left:96px; top:18px; width:18px; height:22px; background:linear-gradient(180deg,#F3E3C4,#DCC79A); border-radius:1px; box-shadow:inset -2px 0 0 rgba(0,0,0,.15); transform-origin:right center; animation:frontDoorOpen 16s ease-in-out infinite;}
.truck-front-door::after{content:''; position:absolute; right:3px; top:45%; width:5px; height:2px; background:#8A6B3A; border-radius:1px;}
/* The box is a separate element from the courier (not nested inside him) so
   it can stay behind on the ground, exactly where he set it down, while his
   own walk-back animation keeps moving without it. */
.courier{position:absolute; left:100px; bottom:0; opacity:0; transform-origin:bottom; animation:courierWalk 16s ease-in-out infinite;}
.courier-box{position:absolute; left:98px; bottom:2px; width:14px; height:11px; background:linear-gradient(180deg,#C68A4A,#A5672A); border-radius:1px; box-shadow:0 1px 2px rgba(0,0,0,.4); opacity:0; animation:boxCarry 16s ease-in-out infinite;}
.courier-box::before{content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 44%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 56%);}
@keyframes truckDriveStop{
  0%{transform:translateX(-18vw); opacity:0;}
  4%{opacity:1;}
  36%{transform:translateX(42vw);}
  40%{transform:translateX(44vw);}
  70%{transform:translateX(44vw);}
  74%{transform:translateX(46vw);}
  94%{transform:translateX(120vw); opacity:1;}
  97%{opacity:0;}
  100%{transform:translateX(120vw); opacity:0;}
}
@keyframes frontDoorOpen{
  0%,43%{transform:translateX(0) rotate(0deg);}
  47%,65%{transform:translateX(6px) rotate(18deg);}
  69%,100%{transform:translateX(0) rotate(0deg);}
}
@keyframes courierWalk{
  0%,44%{opacity:0; transform:translateX(0);}
  48%{opacity:1; transform:translateX(0);}
  54%,60%{transform:translateX(-90px);}
  66%{opacity:1; transform:translateX(0);}
  68%,100%{opacity:0; transform:translateX(0);}
}
@keyframes boxCarry{
  0%,45%{opacity:0; transform:translate(0,0);}
  49%{opacity:1; transform:translate(0,-9px);}
  55%{transform:translate(-90px,-9px);}
  58%,64%{opacity:1; transform:translate(-90px,0);}
  67%,100%{opacity:0; transform:translate(-90px,0);}
}
@media (prefers-reduced-motion: reduce){.promo-ticker-track{animation:none; transform:none; overflow-x:auto;} .delivery-truck, .truck-front-door, .courier, .courier-box{animation:none; display:none;} .promo-ticker-road::before{animation:none;}}
@media (max-width:560px){.delivery-truck{display:none;}}

/* header */
.site-header{background:var(--olive-deep); color:#F5EFDD;}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px clamp(16px,4vw,48px);}
.brand{font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:#fff; letter-spacing:.01em;}
.brand small{display:block; font-family:var(--font-body); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--copper-soft); font-weight:600; margin-top:2px;}
.nav-left{display:flex; align-items:center; gap:10px; min-width:0;}
@media (max-width:520px){.nav-left{gap:6px;} .brand small{display:none;}}
.pages-menu-btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.5em; background:transparent; border:1px solid rgba(255,255,255,.22); color:#F5EFDD; font-family:var(--font-body); font-weight:600; font-size:.86rem; padding:.55em 1.1em; border-radius:999px; cursor:pointer; transition:border-color .15s; white-space:nowrap;}
.pages-menu-btn-bg{position:absolute; left:50%; top:50%; width:auto; height:220%; transform:translate(-50%,-50%); opacity:.22; z-index:0; pointer-events:none;}
.pages-menu-btn-icon, .pages-menu-btn span{position:relative; z-index:1;}
.pages-menu-btn-icon{fill:var(--copper-soft); flex-shrink:0;}
.pages-menu-btn:hover{border-color:var(--copper-soft);}
.pages-menu-btn:hover .pages-menu-btn-bg{opacity:.32;}
@media (max-width:520px){.pages-menu-btn span{display:none;} .pages-menu-btn{padding:.55em .7em;}}
.admin-quick-link{color:#E8E2CC; opacity:.85; font-size:.86rem; white-space:nowrap;}
.admin-quick-link:hover, .admin-quick-link.active{opacity:1; color:var(--copper-soft);}
.nav-actions{display:flex; align-items:center; gap:14px; font-size:.86rem;}
.nav-actions a, .nav-actions button{color:#E8E2CC; background:none; border:0; font-family:var(--font-body); font-size:.86rem; cursor:pointer;}
.nav-actions a:hover, .nav-actions button:hover{color:var(--copper-soft);}
.cart-link{position:relative; display:inline-flex; align-items:center;}
.cart-badge{display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; margin-left:6px; border-radius:999px; background:var(--copper); color:#fff; font-size:.68rem; font-weight:700; line-height:1;}
.lang-select{background:rgba(255,255,255,.08); color:#E8E2CC; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.35em .8em; font-family:var(--font-body); font-size:.8rem; cursor:pointer;}
.lang-select:hover{border-color:var(--copper-soft);}
.lang-select option{background:#FFFDF9; color:var(--ink);}
.mobile-panel .lang-select{margin-top:12px; width:100%;}
.btn{display:inline-flex; align-items:center; gap:.5em; justify-content:center; font-weight:600; font-size:.92rem; padding:.85em 1.6em; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .12s, box-shadow .15s, background .15s;}
.btn:active{transform:translateY(1px);}
.btn-copper{background:linear-gradient(135deg, var(--copper-soft), var(--copper)); color:#fff; box-shadow:0 6px 18px -6px rgba(185,105,30,.6);}
.btn-copper:hover{box-shadow:0 10px 24px -6px rgba(185,105,30,.75);}
.btn-outline{background:transparent; border-color:#E8E2CC; color:#F5EFDD;}
.btn-outline:hover{background:rgba(255,255,255,.08);}
.btn-dark-outline{background:transparent; border-color:var(--olive); color:var(--olive);}
.btn-dark-outline:hover{background:var(--gold-tint);}
.btn-dark{background:var(--olive-deep); color:#fff; box-shadow:0 6px 18px -8px rgba(30,34,20,.5);}
.btn-dark:hover{background:var(--olive);}
.btn-block{width:100%;}

/* mobile nav */
.nav-toggle{display:inline-flex; background:none; border:1px solid #444; color:#F5EFDD; border-radius:8px; width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer;}
@media (min-width:1200px){.nav-toggle{display:none;}}
.mobile-panel{background:var(--olive-deep); border-top:1px solid rgba(255,255,255,.1); padding:6px clamp(16px,4vw,48px) 18px; display:flex; flex-direction:column;}
.mobile-panel[hidden]{display:none;}
.mobile-panel a{color:#E8E2CC; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08);}

/* pages menu — a dropdown that opens directly below the button, topped with
   a real olive-branch photo; page names "planted" beneath it as tags. */
.pages-menu-anchor{position:relative;}
.pages-menu-dropdown{position:absolute; top:calc(100% + 14px); left:0; width:300px; max-width:min(320px, 88vw); max-height:80vh; overflow-y:auto; overflow-x:hidden; background:transparent; z-index:80; animation:pagesMenuDrop .22s cubic-bezier(.2,.9,.3,1) both;}
.pages-menu-dropdown[hidden]{display:none;}
@keyframes pagesMenuDrop{from{opacity:0; transform:translateY(-8px) scale(.97);} to{opacity:1; transform:none;}}
/* Grid-stacked so the photo and the link list share the same box: if a shop
   with many pages makes the link list taller than the photo, the container
   grows to fit them all (row = max of the two), instead of the list running
   off the bottom edge onto the plain page background behind it. */
.pages-menu-visual{position:relative; display:grid; border-radius:16px; overflow:hidden; background:var(--olive-deep); box-shadow:0 22px 44px -16px rgba(20,22,12,.5);}
.pages-menu-visual > *{grid-area:1/1;}
.pages-menu-banner{display:block; width:100%; height:auto; align-self:start; justify-self:stretch;}
.pages-menu-overlay-content{position:relative; align-self:start; padding:16px 14px 18px; background:linear-gradient(180deg, rgba(20,22,12,.55) 0%, rgba(20,22,12,.15) 55%, rgba(20,22,12,.35) 100%);}
.tree-menu-close{position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:999px; border:1px solid rgba(255,255,255,.5); background:rgba(20,22,12,.35); color:#fff; font-size:1.1rem; line-height:1; cursor:pointer; z-index:2;}
.tree-menu-close:hover{background:rgba(20,22,12,.6);}
.tree-menu-title{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0 0 10px; color:#F5EFDD; text-shadow:0 1px 4px rgba(0,0,0,.5);}
.tree-menu-sprouts{display:flex; flex-direction:column; gap:6px;}
.sprout{display:flex; align-items:center; gap:8px; padding:.6em .95em; border-radius:999px; background:rgba(255,255,255,.06); backdrop-filter:blur(3px); color:#F5EFDD; font-weight:600; font-size:.85rem; border:1px solid rgba(255,255,255,.28); text-shadow:0 1px 3px rgba(0,0,0,.6); transition:transform .12s, background .15s, color .15s, text-shadow .15s;}
.sprout svg{fill:#F5EFDD; flex-shrink:0; transition:fill .15s;}
.sprout:hover{background:rgba(255,255,255,.92); color:var(--olive-deep); text-shadow:none; transform:translateX(3px);}
.sprout:hover svg{fill:var(--copper);}
@media (max-width:520px){.pages-menu-dropdown{left:50%; margin-left:-140px; width:280px;}}

/* hero */
.hero{position:relative; color:#fff; overflow:hidden;}
.hero-bg{position:absolute; inset:0; object-fit:cover; width:100%; height:100%;}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(115deg, rgba(23,26,15,.92) 0%, rgba(23,26,15,.72) 45%, rgba(23,26,15,.35) 100%);}
.hero-inner{position:relative; padding:clamp(64px,12vw,120px) 0 clamp(56px,9vw,90px);}
.eyebrow{font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--copper-soft);}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.08; margin:.5em 0 .5em; color:#fff;}
.hero h1 em{font-style:italic; color:var(--copper-soft);}
.hero p.lede{font-size:1.1rem; color:#E8E2CC; max-width:48ch;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:1.8em;}

/* A deliberate solid-color bridge between the hero photo/video and the olive
   grove photo below it — two full-bleed images butted directly against each
   other read as a harsh, accidental seam, so this replaces that edge with an
   actual designed moment: an angled (not rectangular) band carrying a real
   headline about the oil itself, bigger and more considered than the small
   rotating heritage lines further down the page. */
.section-divider{position:relative; background:linear-gradient(135deg, var(--olive-deep), var(--olive)); padding:clamp(44px,7vw,68px) 0; text-align:center;}
.section-divider-accent{width:54px; height:54px; margin:0 auto 18px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.28);}
.section-divider-title{color:#fff; font-style:italic; font-size:clamp(1.5rem,3.2vw,2.15rem); line-height:1.25; margin:0 0 12px; max-width:26ch; margin-left:auto; margin-right:auto;}
.section-divider-sub{color:#E8E2CC; font-size:1.02rem; max-width:58ch; margin:0 auto;}

/* category hero — distinct per-category banner */
.cat-hero{position:relative; color:#fff; overflow:hidden;}
.cat-hero-bg{position:absolute; inset:0; object-fit:cover; width:100%; height:100%;}
.cat-hero-scrim{position:absolute; inset:0; background:linear-gradient(115deg, rgba(23,26,15,.90) 0%, rgba(23,26,15,.68) 50%, rgba(23,26,15,.30) 100%);}
.cat-hero-inner{position:relative; padding:clamp(48px,9vw,84px) 0 clamp(40px,6vw,60px); max-width:70ch;}
.cat-hero-eyebrow{color:var(--copper-soft);}
.cat-hero-title{font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,4vw,2.8rem); color:#fff; margin:.4em 0 .5em;}
.cat-hero-intro{font-size:1.02rem; color:#E8E2CC; max-width:56ch;}
.cat-hero-plain{background:linear-gradient(120deg, var(--olive-deep), var(--olive));}
.cat-hero-plain .cat-hero-icon{width:64px; height:64px; opacity:.85; margin-bottom:8px;}
.cat-hero-plain .cat-hero-icon svg{width:100%; height:100%;}
.cat-hero-plain .cat-hero-intro{color:#EDE8D2;}

/* founder strip */
.founder{background:var(--cream-card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.founder-grid{display:grid; grid-template-columns:1fr; gap:28px; padding:clamp(40px,7vw,72px) 0; align-items:center;}
@media (min-width:860px){.founder-grid{grid-template-columns:1.1fr 1fr;}}
.founder-photos{display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr; gap:10px; height:340px;}
.founder-photos img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow);}
.founder-photos .ph1{grid-row:1/3;}
.founder-text .eyebrow{color:var(--olive);}
.founder-text h2{font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:.4em;}
.founder-text p{color:var(--ink-soft); margin-top:1em; font-size:1rem;}

/* sections */
section{padding:clamp(48px,7vw,84px) 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:clamp(24px,4vw,36px);}
.section-head h2{font-size:clamp(1.6rem,2.8vw,2.2rem);}
.section-head p{color:var(--ink-soft); margin-top:.6em;}
/* :not(.btn) matters here: a real button (.btn-copper, .btn-dark-outline...)
   placed inside a .section-head — "+ Neu", "+ Neue Seite" — was losing its
   own white/olive text color to this rule's higher specificity (a class +
   an element beats a single class), leaving copper text on a copper
   button background: unreadable, not just low-contrast. */
.section-head a:not(.btn){font-size:.88rem; font-weight:600; color:var(--copper); white-space:nowrap;}
.section-head a:not(.btn):hover{text-decoration:underline;}

/* category teasers on home */
.cat-teasers{display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:760px){.cat-teasers{grid-template-columns:repeat(3,1fr);}}
.cat-teaser{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--olive-deep); color:#fff; min-height:260px; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; box-shadow:var(--shadow); text-decoration:none; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;}
.cat-teaser:hover{transform:translateY(-6px); box-shadow:0 22px 40px -18px rgba(23,26,15,.55);}
/* Real per-page photo (or short looping video) instead of a flat color —
   the image itself slowly zooms on hover for a bit of life; the scrim keeps
   the title/CTA legible over any photo without needing a fixed dark patch. */
.cat-teaser-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); z-index:0;}
.cat-teaser:hover .cat-teaser-bg{transform:scale(1.09);}
.cat-teaser-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,26,15,.1) 0%, rgba(23,26,15,.5) 62%, rgba(23,26,15,.88) 100%); z-index:1; transition:opacity .35s;}
.cat-teaser:hover .cat-teaser-scrim{opacity:.85;}
.cat-teaser.no-media{background:var(--olive-deep);}
.cat-teaser .icon-wrap{position:absolute; top:20px; right:20px; opacity:.18; z-index:1;}
.cat-teaser .icon-wrap svg{width:64px; height:64px;}
.cat-teaser-content{position:relative; z-index:2; transform:translateY(4px); transition:transform .35s;}
.cat-teaser:hover .cat-teaser-content{transform:translateY(0);}
.cat-teaser h3{color:#fff; font-size:1.3rem; text-shadow:0 1px 4px rgba(0,0,0,.35);}
.cat-teaser-cta{color:var(--copper-soft); font-size:.86rem; font-weight:600; margin-top:6px; display:inline-flex; align-items:center; gap:4px; transition:gap .3s;}
.cat-teaser:hover .cat-teaser-cta{gap:9px;}
@media (prefers-reduced-motion: reduce){.cat-teaser, .cat-teaser-bg, .cat-teaser-scrim, .cat-teaser-content, .cat-teaser-cta{transition:none;}}

/* product grid */
.product-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2.2vw,22px);}
@media (min-width:640px){.product-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:960px){.product-grid{grid-template-columns:repeat(4,1fr);}}
.card-wrap{position:relative;}
.card-wrap .wishlist-bell{top:10px; right:10px;}
.card{background:var(--cream-card); border-radius:var(--radius); overflow:hidden; box-shadow:0 6px 18px -10px rgba(30,34,20,.18); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s;}
.sale-badge{position:absolute; top:10px; left:10px; z-index:2; background:#B03A2E; color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:4px; overflow:hidden; animation:salePulse 1.7s ease-in-out infinite;}
.sale-badge::after{content:""; position:absolute; top:0; left:0; width:35%; will-change:transform; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,.65), transparent); animation:saleShine 2.6s ease-in-out infinite;}
@keyframes salePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
@keyframes saleShine{0%{transform:translateX(-171%);}55%{transform:translateX(371%);}100%{transform:translateX(371%);}}
@media (prefers-reduced-motion: reduce){.sale-badge, .sale-badge::after{animation:none;}}
.sale-countdown-row{margin-top:6px; font-size:.74rem;}
.sale-countdown-row--detail{margin:10px 0 0;}
.sale-ends-static{color:var(--ink-faint); font-weight:600;}
.sale-countdown{display:inline-flex; align-items:center; gap:5px; color:#fff; background:#B03A2E; font-weight:700; padding:3px 9px; border-radius:999px; animation:salePulse 1.2s ease-in-out infinite;}
.sale-countdown-time{font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion: reduce){.sale-countdown{animation:none;}}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.card-media{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:var(--gold-tint); overflow:hidden;}
.card-media img, .product-media img{width:100%; height:100%; object-fit:cover;}
.card-media svg{width:46%; height:46%;}
.card-body{padding:16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-body h3{font-size:.98rem; font-family:var(--font-body); font-weight:700;}
.card-body .desc{font-size:.82rem; color:var(--ink-faint); flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.stars{color:var(--copper); letter-spacing:1px; font-size:.85rem;}
.stars-row{display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink-faint);}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:8px;}
.price{font-variant-numeric:tabular-nums; font-weight:700; font-size:.95rem;}
.add-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--olive); background:var(--cream); color:var(--olive); cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s;}
.add-btn:hover{background:var(--olive); color:#fff;}

/* product detail page */
.product-detail{display:grid; grid-template-columns:1fr; gap:36px;}
@media (min-width:860px){.product-detail{grid-template-columns:1fr 1fr;}}
.product-media{background:var(--gold-tint); border-radius:var(--radius); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.product-media svg{width:44%; height:44%;}
.gallery-thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px;}
.gallery-thumb{background:var(--gold-tint); border:2px solid transparent; border-radius:10px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; overflow:hidden;}
.gallery-thumb svg{width:44%; height:44%;}
.gallery-thumb img{width:100%; height:100%; object-fit:cover;}
.gallery-thumb.is-active{border-color:var(--copper);}
.gallery-thumb[data-view="b"] svg{filter:hue-rotate(8deg) brightness(.9) saturate(1.15);}
.gallery-thumb[data-view="c"] svg{filter:hue-rotate(-8deg) brightness(1.1) saturate(.85);}
.gallery-main.view-b svg{filter:hue-rotate(8deg) brightness(.9) saturate(1.15);}
.gallery-main.view-c svg{filter:hue-rotate(-8deg) brightness(1.1) saturate(.85);}
.gallery-note{font-size:.72rem; color:var(--ink-faint); margin-top:8px; text-align:center;}
.gallery-main{position:relative; cursor:zoom-in;}
.gallery-zoom{position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%; border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.9); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.gallery-zoom svg{width:18px; height:18px;}
.gallery-zoom:hover{background:#fff;}
.wishlist-bell{position:absolute; top:10px; right:10px; z-index:3; width:34px; height:34px; border-radius:50%; border:1px solid rgba(0,0,0,.1); background:rgba(255,255,255,.92); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:background .15s, color .15s, border-color .15s;}
.wishlist-bell svg{width:16px; height:16px;}
.wishlist-bell:hover{background:#fff; color:var(--copper);}
.wishlist-bell.is-active{background:var(--copper); color:#fff; border-color:var(--copper);}
.wishlist-bell--detail{top:12px; left:12px; right:auto;}
.bell-tip{position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; font-size:.72rem; font-weight:600; padding:5px 10px; border-radius:6px; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s; box-shadow:0 4px 12px rgba(0,0,0,.2); z-index:4;}
.bell-tip::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--ink);}
.wishlist-bell:hover .bell-tip, .wishlist-bell:focus .bell-tip{opacity:1; visibility:visible;}

.consent-overlay{position:fixed; inset:0; background:rgba(20,22,14,.55); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;}
.consent-card{background:var(--cream-card); border-radius:var(--radius); max-width:400px; width:100%; padding:28px 26px; box-shadow:var(--shadow); text-align:center;}
.consent-card .consent-icon{width:44px; height:44px; border-radius:50%; background:var(--gold-tint); color:var(--copper); display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.consent-card .consent-icon svg{width:22px; height:22px;}
.consent-card h3{font-size:1.05rem; margin:0 0 10px;}
.consent-card p{color:var(--ink-soft); font-size:.9rem; line-height:1.55; margin:0 0 22px;}
.consent-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.consent-actions .btn{padding:.7em 1.4em; font-size:.88rem;}

.lb-overlay{position:fixed; inset:0; background:rgba(10,12,7,.92); z-index:80; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .2s;}
.lb-overlay.is-open{opacity:1; pointer-events:auto;}
.lb-stage{width:100%; max-width:1100px; height:78vh; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; cursor:grab;}
.lb-stage.is-grabbing{cursor:grabbing;}
.lb-stage img, .lb-stage svg{max-width:92%; max-height:92%; object-fit:contain; user-select:none; will-change:transform; pointer-events:none;}
.lb-close{position:absolute; top:18px; right:22px; z-index:2; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer;}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; font-size:1.9rem; line-height:1; cursor:pointer;}
.lb-prev{left:18px;} .lb-next{right:18px;}
.lb-dots{position:absolute; bottom:22px; left:0; right:0; display:flex; gap:8px; justify-content:center;}
.lb-dots button{width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.35); cursor:pointer; padding:0;}
.lb-dots button.is-active{background:var(--copper-soft);}
.size-select{width:100%; padding:.7em .9em; border-radius:8px; border:1px solid var(--line); background:#fff; font-family:var(--font-body); font-size:.92rem; margin-top:1.2em;}
.product-info .eyebrow{color:var(--olive);}
.product-info h1{font-size:clamp(1.7rem,3vw,2.3rem); margin-top:.3em;}
.product-info .price{font-size:1.6rem; margin-top:.5em; display:block;}
.product-info .desc{color:var(--ink-soft); margin-top:1em; font-size:1rem;}
.product-sku{color:var(--ink-faint); font-size:.8rem; margin-top:.3em;}
.product-info .buy-actions{margin-top:1.6em; display:flex; gap:12px; flex-wrap:wrap;}
.product-info .buy-actions .btn{white-space:nowrap;}

/* wood product customization: engraving + gift packaging */
.product-customize{margin-top:1.4em; padding:18px; background:var(--gold-tint); border-radius:var(--radius);}
.product-customize h3{font-size:1rem; margin-bottom:12px;}
.engrave-toggle{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.92rem; font-weight:600;}
.engrave-toggle input{width:17px; height:17px; accent-color:var(--copper);}
.engrave-hint{color:var(--ink-faint); font-size:.8rem; margin:6px 0 10px;}
.engrave-text{width:100%; padding:.7em .9em; border-radius:8px; border:1px solid var(--line); background:#fff; font-family:var(--font-body); font-size:.9rem;}
.engrave-text:disabled{background:var(--cream); color:var(--ink-faint); cursor:not-allowed;}
.cart-addon-line{color:var(--copper); font-size:.8rem; margin-top:2px;}
.price-breakdown{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);}
.price-breakdown-row{display:flex; justify-content:space-between; font-size:.85rem; color:var(--ink-soft); padding:3px 0;}
.price-breakdown-row[hidden]{display:none;}
.price-breakdown-total{margin-top:6px; padding-top:8px; border-top:1px solid var(--line); font-weight:700; font-size:1rem; color:var(--ink);}
.checkout-summary{margin-top:16px;}
.checkout-summary-row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.9rem;}

/* my orders */
.my-order-card{background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-bottom:18px; box-shadow:0 2px 14px rgba(0,0,0,.05); transition:box-shadow .25s ease;}
.my-order-card:hover{box-shadow:0 6px 22px rgba(0,0,0,.08);}
.my-order-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.9rem; margin-bottom:10px;}
.my-order-head span{color:var(--ink-faint); font-size:.82rem;}
.my-order-items{color:var(--ink-soft); font-size:.88rem; line-height:1.7;}
.my-order-total{font-weight:700; margin-top:10px;}
.my-order-tracking{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-size:.88rem; color:var(--copper);}
.my-order-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.my-order-auto-note{margin-top:8px; font-size:.8rem; color:var(--ink-faint); font-style:italic;}

/* order tracker — Ordered -> Shipped -> Delivered, with a live-filling line */
.order-tracker{display:flex; align-items:flex-start; margin:16px 0 6px;}
.tracker-step{display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; width:76px;}
.tracker-icon{width:36px; height:36px; border-radius:50%; background:var(--cream); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:1.1rem; filter:grayscale(1) opacity(.6); position:relative; z-index:1;}
.tracker-step.is-done .tracker-icon{background:var(--gold-tint); border-color:var(--copper); filter:none;}
.tracker-step.is-active .tracker-icon{animation:trackerPulse 1.8s ease-in-out infinite;}
@keyframes trackerPulse{0%,100%{box-shadow:0 0 0 0 rgba(179,110,58,.45);} 50%{box-shadow:0 0 0 7px rgba(179,110,58,0);}}
.tracker-step span:last-child{font-size:.72rem; color:var(--ink-faint); text-align:center;}
.tracker-step.is-done span:last-child{color:var(--olive-deep); font-weight:600;}
.tracker-step.is-active span:last-child{color:var(--copper);}
.tracker-line{flex:1; height:3px; background:var(--line); margin-top:17px; border-radius:2px; overflow:visible; position:relative;}
.tracker-line-fill{height:100%; background:var(--copper); border-radius:2px; transition:width 1s ease; position:relative;}
.tracker-line--live .tracker-line-fill{background:linear-gradient(90deg, var(--copper), var(--olive-deep), var(--copper)); background-size:200% 100%; animation:trackerFlow 2.4s linear infinite;}
@keyframes trackerFlow{0%{background-position:0% 0;} 100%{background-position:-200% 0;}}
.tracker-truck-live{position:absolute; top:50%; transform:translate(-50%,-50%) scaleX(-1); font-size:1rem; transition:left 1s ease; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); z-index:2;}
.tracker-line--live .tracker-truck-live{animation:trackerTruckBob 1.1s ease-in-out infinite;}
@keyframes trackerTruckBob{0%,100%{transform:translate(-50%,-50%) scaleX(-1) translateY(0);} 50%{transform:translate(-50%,-50%) scaleX(-1) translateY(-3px);}}
.order-tracker-eta{font-size:.82rem; color:var(--ink-faint); margin-bottom:10px;}
@media (prefers-reduced-motion: reduce){.tracker-step.is-active .tracker-icon{animation:none;} .tracker-line--live .tracker-line-fill{animation:none;} .tracker-line--live .tracker-truck-live{animation:none;}}

/* my-orders: disabled action buttons before the delivery window ends */
.my-order-actions-hint{margin-top:6px; font-size:.78rem; color:var(--ink-faint); font-style:italic;}
.my-order-actions button[disabled]{opacity:.45; cursor:not-allowed;}

/* post-delivery review prompt: rate the product(s) + our service, inline */
.review-prompt{margin-top:16px; padding:18px; background:linear-gradient(135deg, var(--gold-tint), var(--cream-card)); border:1px solid var(--copper); border-radius:var(--radius);}
.review-prompt h3{margin:0 0 4px; font-size:1rem;}
.review-prompt > p{margin:0 0 14px; font-size:.85rem; color:var(--ink-soft);}
.review-prompt-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px;}
.review-prompt-item{background:var(--cream-card); border:1px solid var(--line); border-radius:10px; padding:14px;}
.review-prompt-item-name{font-weight:600; font-size:.85rem; margin:0 0 6px;}
.review-prompt-item textarea{width:100%; margin:8px 0; font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; resize:vertical;}
.star-picker--sm{margin:4px 0 10px;}
.star-picker--sm label{font-size:1.3rem;}
.star-picker--links{display:flex; gap:4px;}
.star-picker--links a{font-size:1.3rem; color:var(--line); text-decoration:none; transition:color .15s ease, transform .15s ease;}
.star-picker--links a:hover{color:var(--copper); transform:scale(1.15);}

/* cart quantity stepper */
.cart-line-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.qty-stepper{display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--cream-card);}
.qty-stepper form{display:flex;}
.qty-stepper button{border:0; background:transparent; font-size:1.05rem; line-height:1; padding:.45em .75em; cursor:pointer; color:var(--ink-soft); font-family:inherit;}
.qty-stepper button:hover{background:var(--gold-tint); color:var(--copper);}
.qty-value{min-width:2.2em; text-align:center; font-weight:600; font-size:.9rem; border-left:1px solid var(--line); border-right:1px solid var(--line); padding:.45em 0;}

/* admin analytics dashboard */
.analytics-bars{display:flex; align-items:flex-end; gap:6px; height:120px; margin-top:12px; padding:10px; background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius);}
.analytics-bar{flex:1; background:linear-gradient(180deg, var(--copper), var(--olive-mid)); border-radius:4px 4px 0 0; min-height:4px; position:relative; display:flex; align-items:flex-start; justify-content:center;}
.analytics-bar span{position:relative; top:-18px; font-size:.72rem; color:var(--ink-faint);}

/* GDPR consent banner */
.consent-banner{position:fixed; left:0; right:0; bottom:0; z-index:80; background:var(--olive-deep); color:#F5EFDD; padding:16px 20px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; box-shadow:0 -4px 20px rgba(0,0,0,.25);}
.consent-banner-text{flex:1; min-width:240px;}
.consent-banner-text strong{display:block; font-size:.95rem; margin-bottom:4px;}
.consent-banner-text p{margin:0; font-size:.82rem; color:#D8D3BE; max-width:60ch;}
.consent-banner-text a{color:#F5EFDD; text-decoration:underline;}
.consent-banner-links{margin-top:6px !important; font-size:.78rem !important;}
.consent-banner-actions{display:flex; gap:10px; flex-wrap:wrap;}
.consent-banner-actions form{display:inline;}
.consent-banner .btn-dark-outline{border-color:#D8D3BE; color:#F5EFDD;}
@media (max-width:640px){.consent-banner{flex-direction:column; align-items:stretch;} .consent-banner-actions{justify-content:stretch;} .consent-banner-actions form{flex:1;} .consent-banner-actions button{width:100%;}}
/* The cookie banner is fixed to the bottom of the viewport — on a page whose
   own last element (e.g. the checkout page's payment buttons) would otherwise
   land in that same strip, it can visually and click-wise cover it. Reserve
   real space at the bottom of the page for as long as the banner is showing,
   so nothing important is ever hidden or unclickable underneath it. */
body:has(.consent-banner){padding-bottom:130px;}
@media (max-width:640px){body:has(.consent-banner){padding-bottom:280px;}}

.reviews-block{margin-top:56px; border-top:1px solid var(--line); padding-top:36px;}
.review-summary{display:flex; align-items:center; gap:14px; margin-bottom:24px;}
.review-summary .avg{font-family:var(--font-display); font-size:2.2rem; color:var(--olive-deep);}
.review-item{border-bottom:1px solid var(--line); padding:14px 0;}
.review-item--pending{background:var(--gold-tint); border:1px dashed var(--copper); border-radius:8px; padding:12px 14px; margin-bottom:10px;}
.review-pending-badge{color:var(--copper); font-size:.78rem; font-weight:600; margin:4px 0;}
.review-item .head{display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:.9rem;}
.review-item p{color:var(--ink-soft); font-size:.9rem; margin-top:6px;}
.review-photos{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.review-photo{display:block; width:110px; height:110px; border-radius:8px; object-fit:cover;}
.review-replies{margin:12px 0 0 20px; padding-left:14px; border-left:2px solid var(--line);}
.review-reply{margin-bottom:10px; font-size:.88rem;}
.review-reply .head{font-weight:600; margin-bottom:2px;}
.review-reply p{margin:0; color:var(--ink-soft);}
.review-reply--shop{background:var(--gold-tint); border-radius:8px; padding:8px 10px; margin-left:-10px;}
.review-reply--shop .head{color:var(--copper);}
.review-reply-toggle summary{cursor:pointer; font-size:.8rem; color:var(--copper); font-weight:600; list-style:none;}
.review-reply-toggle summary::-webkit-details-marker{display:none;}
.review-reply-form{display:flex; gap:8px; margin-top:8px; align-items:flex-start; flex-wrap:wrap;}
.review-reply-form textarea{flex:1; min-width:180px; font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; resize:vertical;}
.filter-bar{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin:16px 0 24px; padding:16px; background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius);}
.filter-bar select, .filter-bar input{padding:.6em .8em; border-radius:8px; border:1px solid var(--line); font-family:var(--font-body); font-size:.88rem;}
.review-empty{color:var(--ink-faint); font-size:.9rem;}
.review-form{background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-top:24px;}
.star-picker{display:flex; gap:6px; margin:8px 0 16px;}
.star-picker label{cursor:pointer; font-size:1.7rem; color:var(--line);}
.star-picker input{position:absolute; opacity:0; pointer-events:none;}
.star-picker input:checked ~ label, .star-picker label:hover, .star-picker label:hover ~ label{color:var(--copper);}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-size:.82rem; font-weight:600; color:var(--ink-soft);}
.field input, .field textarea{padding:.75em .95em; border-radius:8px; border:1px solid var(--line); background:#fff; font-family:var(--font-body); font-size:.95rem;}
.login-cta{background:var(--gold-tint); border-radius:var(--radius); padding:20px; text-align:center; font-size:.92rem; color:var(--ink-soft);}
.login-cta a{color:var(--copper); font-weight:600; text-decoration:underline;}

/* auth pages */
.auth-wrap{max-width:420px; margin:0 auto; padding:clamp(56px,10vw,90px) 20px;}
.auth-card{background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow);}
.auth-card h1{font-size:1.6rem;}
.auth-card .sub{color:var(--ink-soft); margin-top:.5em; font-size:.92rem;}
.auth-card form{margin-top:24px;}
.checkbox-line{display:flex; align-items:flex-start; gap:8px; font-size:.85rem; color:var(--ink-soft); line-height:1.5; margin:10px 0; cursor:pointer;}
.checkbox-line input{margin-top:3px; flex-shrink:0;}
.checkbox-line a{color:var(--copper); font-weight:600;}
.header-avatar-link{display:inline-flex; align-items:center; gap:6px;}
.header-avatar{width:22px; height:22px; border-radius:50%; object-fit:cover;}
.flash-error{background:#F7DEDA; color:#8A3324; border-radius:8px; padding:12px 14px; font-size:.86rem; margin-bottom:16px;}
.flash-ok{background:#E1EBD4; color:#3C5223; border-radius:8px; padding:12px 14px; font-size:.86rem; margin-bottom:16px;}
.contact-details{background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin-bottom:20px;}
.contact-details p{margin:0;}
.contact-details p + p{margin-top:12px;}

/* Haddabal game */
.haddabal-header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.haddabal-balance-pill{display:inline-flex; align-items:center; gap:6px; background:var(--gold-tint); color:var(--olive-deep); border-radius:99px; padding:.4em 1em; font-weight:700; text-decoration:none; font-size:.9rem;}
.haddabal-balance-pill span{font-weight:500; opacity:.8; font-size:.82rem;}
.haddabal-balance-card{display:flex; align-items:center; gap:14px; background:var(--olive-deep); color:var(--cream); border-radius:var(--radius); padding:20px 24px; font-size:1.6rem; margin:16px 0;}
.haddabal-balance-card span{font-size:.85rem; opacity:.8; font-weight:400;}
.haddabal-coin-icon{display:inline-block; width:1.2em; height:1.2em; border-radius:50%; background-image:url(/img/haddabal-coin-front.jpg); background-size:cover; background-position:center; vertical-align:middle; flex-shrink:0;}
.haddabal-balance-card .haddabal-coin-icon{width:40px; height:40px;}

/* A real coin flip, not a decorative spin: the front and back faces are two
   separate real photos, each hidden on its own reverse side, so whichever
   face is toward the viewer at any moment is a genuine, undistorted face —
   never a stretched/cropped fake like the old single wide composite image. */
.coin-spin-3d{position:relative; perspective:600px; flex-shrink:0;}
.coin-spin-3d-inner{position:absolute; inset:0; transform-style:preserve-3d;}
.coin-spin-3d-inner img{position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; backface-visibility:hidden; box-shadow:0 4px 14px rgba(0,0,0,.35);}
.coin-spin-3d-inner img.coin-back{transform:rotateY(180deg);}
/* Idle by default (shows the front face at rest) — .auto-spin keeps it
   turning forever (banner, wallet balance); .is-spinning is toggled by the
   wheel page's own JS only for the few seconds the wheel itself is spinning,
   at a much faster rate so the coin and the wheel feel like one motion. */
.coin-spin-3d-inner.auto-spin{animation:coinSpinY 4.5s linear infinite;}
.coin-spin-3d-inner.is-spinning{animation:coinSpinY .55s linear infinite;}
@keyframes coinSpinY{from{transform:rotateY(0deg);} to{transform:rotateY(360deg);}}
@media (prefers-reduced-motion: reduce){.coin-spin-3d-inner{animation:none !important;}}

/* Coin-rain burst, fired once when the wheel lands — purely decorative,
   removed from the DOM after it finishes falling so a few spins in a row
   never pile up nodes. */
.coin-rain-overlay{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:9999;}
.coin-rain-piece{position:absolute; top:-40px; width:26px; height:26px; border-radius:50%; object-fit:cover; box-shadow:0 2px 6px rgba(0,0,0,.4); animation-name:coinFall; animation-timing-function:cubic-bezier(0.4,0.1,0.7,0.9); animation-fill-mode:forwards;}
@keyframes coinFall{ 0%{transform:translateY(0) rotate(0deg); opacity:1;} 100%{transform:translateY(115vh) rotate(var(--coin-spin,720deg)); opacity:.85;} }
/* A falling gift reuses .coin-rain-piece's same fall animation/timing, just
   swapped from a circular coin photo to an emoji glyph — no image, no
   circular crop/shadow, otherwise identical motion. */
.gift-rain-piece{background:none; box-shadow:none; border-radius:0; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1;}
@media (prefers-reduced-motion: reduce){.coin-rain-piece{display:none;}}

/* Fireworks: each burst is a handful of small dots flung outward from one
   point and faded out — pure CSS keyframe per particle, JS only picks the
   burst position and each particle's flight vector (randomized per firing,
   so no two bursts look identical). Removed from the DOM once spent. */
.firework-burst{position:fixed; width:0; height:0; pointer-events:none; z-index:9999;}
.firework-particle{position:absolute; left:0; top:0; width:6px; height:6px; border-radius:50%; animation:fireworkFly 900ms ease-out forwards;}
@keyframes fireworkFly{ 0%{transform:translate(0,0) scale(1); opacity:1;} 100%{transform:translate(var(--tx), var(--ty)) scale(.3); opacity:0;} }
@media (prefers-reduced-motion: reduce){.firework-burst{display:none;}}
.level-map{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-top:20px;}
.level-tile{background:var(--cream-card); border:1px solid var(--line); border-radius:12px; padding:16px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px;}
.level-tile-num{font-family:var(--font-display); font-size:1.5rem; color:var(--ink-faint);}
.level-tile.is-open .level-tile-num{color:var(--copper);}
.level-tile.is-done{background:var(--gold-tint); border-color:var(--copper);}
.level-tile.is-done .level-tile-num{color:var(--olive-deep);}
.level-tile-label{font-size:.82rem; font-weight:600;}
.level-tile-status{font-size:.72rem; color:var(--ink-faint);}
.level-tile.is-locked{opacity:.55;}
.wheel-stage{position:relative; width:260px; height:260px; margin:0 auto;}
.wheel-disc{width:260px; height:260px; border-radius:50%; box-shadow:0 10px 30px -10px rgba(30,34,20,.4); border:4px solid var(--cream-card); overflow:hidden;}
.wheel-disc svg{display:block;}
.wheel-pointer{position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:1.8rem; color:var(--olive-deep); z-index:3; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));}
.wheel-hub{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:92px; height:92px; border-radius:50%; overflow:hidden; border:4px solid var(--cream-card); box-shadow:0 3px 12px rgba(0,0,0,.4); z-index:2;}
@media (prefers-reduced-motion: reduce){.wheel-disc{transition:none !important;}}

/* homepage haddabal marketing banner */
/* Full-bleed photo banner between the hero and the founder section — a real
   olive grove, not a cut-out prop, so it needed no background trick at all.
   The Haddabal promo card floats on top as translucent glass (not a solid
   block hiding the photo), rises in on load and keeps a slow breathing glow
   so it never reads as a dead, static box. Beneath it, one heritage line at
   a time fades in and out — plain CSS, no JS — cycling through the whole
   set forever. */
.heritage-banner{position:relative; color:#fff; overflow:hidden; min-height:clamp(420px, 52vw, 560px); display:flex; align-items:center;}
.heritage-banner-bg{position:absolute; inset:0; object-fit:cover; width:100%; height:100%;}
.heritage-banner-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,22,12,.35) 0%, rgba(20,22,12,.55) 55%, rgba(20,22,12,.78) 100%);}
.heritage-banner-inner{position:relative; padding:clamp(48px,8vw,72px) 0;}

.haddabal-promo{border-radius:var(--radius); padding:28px 32px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
/* Visible and animated-in by default (bannerGlow keeps it breathing even
   with no JS at all) — .js-pending is only ever added by app.js right
   before it wires up the scroll observer, so a page with JS disabled or
   IntersectionObserver unsupported never gets stuck hidden. .is-revealed
   (added the moment the card first scrolls into view) plays the actual
   rise-in plus the coin/firework/gift celebration once. */
.haddabal-promo--overlay{position:relative; overflow:hidden; max-height:600px; background:rgba(24,27,16,.78); border:1px solid rgba(255,255,255,.2); box-shadow:0 20px 50px -20px rgba(0,0,0,.6);}
.haddabal-promo--overlay::before{content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 44px 2px rgba(217,138,52,.38); opacity:0; pointer-events:none; animation:bannerGlow 5s ease-in-out infinite;}
.haddabal-promo--overlay.js-pending{opacity:0; transform:translateY(28px) scale(.96);}
.haddabal-promo--overlay.js-pending::before{animation:none;}
.haddabal-promo--overlay.is-revealed{animation:bannerRise .6s cubic-bezier(.2,.8,.2,1) forwards;}
.haddabal-promo--overlay::after{content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%); transform:translateX(-130%); pointer-events:none;}
.haddabal-promo--overlay.is-revealed::after{animation:bannerShine 1.3s ease-out .35s 1;}
.haddabal-promo-coin{width:72px; height:72px; border-radius:50%; overflow:hidden; flex-shrink:0; border:3px solid rgba(255,255,255,.25);}
.haddabal-promo-eyebrow{display:inline-block; background:var(--copper); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 10px; border-radius:99px; margin-bottom:8px;}
.haddabal-promo h3{color:#fff; margin:0 0 6px; font-size:1.3rem;}
.haddabal-promo p{color:#E4E0CC; margin:0; font-size:.92rem; max-width:52ch;}
.haddabal-promo-cta{margin-inline-start:auto; flex-shrink:0;}
@media (max-width:640px){.haddabal-promo{flex-direction:column; text-align:center;} .haddabal-promo-cta{margin-inline-start:0;}}
@keyframes bannerRise{
  0%{opacity:0; transform:translateY(36px) scale(.96);}
  65%{opacity:1; transform:translateY(-5px) scale(1.012);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes bannerGlow{0%,100%{opacity:0;} 50%{opacity:1;}}
@keyframes bannerShine{to{transform:translateX(130%);}}

.heritage-lines{position:relative; min-height:4.6em; margin-top:30px; text-align:center;}
.heritage-line{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 16px; font-family:var(--font-display); font-style:italic; font-size:1.4rem; line-height:1.4; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.65); opacity:0; animation:heritageFade 16s ease-in-out infinite;}
@keyframes heritageFade{
  0%{opacity:0; transform:translateY(10px);}
  5%,20%{opacity:1; transform:translateY(0);}
  25%,100%{opacity:0; transform:translateY(-10px);}
}
@media (prefers-reduced-motion: reduce){.haddabal-promo--overlay, .haddabal-promo--overlay.js-pending, .haddabal-promo--overlay.is-revealed{animation:none; opacity:1; transform:none;} .haddabal-promo--overlay.is-revealed::after{animation:none; display:none;} .heritage-line{animation:none; opacity:1; position:static;} .heritage-lines{min-height:auto;}}
@media (max-width:640px){.heritage-lines{min-height:6.4em;} .heritage-line{font-size:1.15rem;}}

/* footer */
footer{background:var(--olive-deep); color:#C9C6AE; padding:clamp(40px,6vw,64px) 0 28px;}
.foot-grid{display:grid; grid-template-columns:1fr; gap:28px;}
@media (min-width:760px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;}}
footer h4{color:#fff; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px;}
footer a{color:#C9C6AE;}
footer a:hover{color:var(--copper-soft);}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:32px; padding-top:18px; font-size:.78rem; color:#8E8B72; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* B2B / wholesale */
.b2b-hero{background:linear-gradient(135deg, var(--olive-deep) 0%, var(--olive) 100%); color:#fff; padding:clamp(56px,10vw,96px) 0; text-align:center;}
.b2b-hero .eyebrow{color:var(--copper-soft);}
.b2b-hero h1{color:#fff; font-size:clamp(1.9rem, 4vw, 2.8rem); margin-top:10px; max-width:22ch; margin-left:auto; margin-right:auto;}
.b2b-sub{color:#E8E2CC; max-width:56ch; margin:16px auto 28px; font-size:1.05rem; line-height:1.65;}
.b2b-intro{display:grid; grid-template-columns:1fr; gap:24px; padding:clamp(48px,7vw,72px) 0;}
@media (min-width:760px){.b2b-intro{grid-template-columns:1fr 1fr;}}
.b2b-intro-col{background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:0 6px 18px -10px rgba(30,34,20,.14);}
.b2b-intro-col svg{fill:var(--copper); margin-bottom:12px;}
.b2b-intro-col h3{font-size:1.15rem; margin-bottom:10px;}
.b2b-intro-col p{color:var(--ink-soft); font-size:.94rem; line-height:1.65;}
.b2b-benefits-section{background:var(--gold-tint); padding:clamp(48px,7vw,72px) 0;}
.b2b-benefits-section h2, .b2b-process h2{text-align:center; font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:36px;}
.b2b-benefit-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:640px){.b2b-benefit-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:980px){.b2b-benefit-grid{grid-template-columns:1fr 1fr 1fr;}}
.b2b-benefit{background:#fff; border-radius:var(--radius); padding:22px; box-shadow:0 6px 18px -10px rgba(30,34,20,.16);}
.b2b-benefit h4{font-size:1.02rem; margin-bottom:8px; color:var(--olive-deep);}
.b2b-benefit p{color:var(--ink-soft); font-size:.9rem; line-height:1.6;}
.b2b-process{padding:clamp(48px,7vw,72px) 0;}
.b2b-step-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:24px; max-width:760px; margin:0 auto;}
@media (min-width:640px){.b2b-step-list{grid-template-columns:1fr 1fr;}}
.b2b-step-list li{display:flex; gap:16px; align-items:flex-start;}
.b2b-step-num{flex-shrink:0; width:38px; height:38px; border-radius:999px; background:var(--olive-deep); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.05rem;}
.b2b-step-list h4{font-size:1rem; margin-bottom:4px;}
.b2b-step-list p{color:var(--ink-soft); font-size:.88rem; line-height:1.55;}
.b2b-form-section{padding:clamp(48px,7vw,80px) 0 clamp(64px,9vw,96px);}
.b2b-form-card{max-width:640px; margin:0 auto; background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,5vw,40px); box-shadow:var(--shadow);}
.b2b-form-card h2{font-size:1.5rem; text-align:center;}
.b2b-form-intro{text-align:center; color:var(--ink-soft); font-size:.92rem; margin:10px 0 26px;}
.b2b-form-row{display:grid; grid-template-columns:1fr; gap:0 16px;}
@media (min-width:520px){.b2b-form-row{grid-template-columns:1fr 1fr;}}
.b2b-interest-group{display:flex; flex-wrap:wrap; gap:10px;}
.b2b-radio{position:relative; cursor:pointer;}
.b2b-radio input{position:absolute; opacity:0; width:1px; height:1px;}
.b2b-radio span{display:inline-block; padding:.6em 1.1em; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:.88rem; font-weight:600; color:var(--ink-soft); transition:background .15s, border-color .15s, color .15s;}
.b2b-radio input:checked ~ span{background:var(--olive-deep); border-color:var(--olive-deep); color:#fff;}
.b2b-radio input:focus-visible ~ span{outline:2px solid var(--copper); outline-offset:2px;}
.b2b-required-note{font-size:.78rem; color:var(--ink-faint); margin:4px 0 18px;}
.b2b-product-picker{margin-bottom:14px;}
.b2b-products-intro{color:var(--ink-soft); font-size:.85rem; margin:2px 0 12px;}
.b2b-product-search{width:100%; padding:.7em .9em; border-radius:8px; border:1px solid var(--line); margin-bottom:10px; font-family:var(--font-body); font-size:.9rem;}
.b2b-product-grid{display:grid; grid-template-columns:1fr; gap:6px; max-height:340px; overflow-y:auto; padding:6px; border:1px solid var(--line); border-radius:10px; background:#fff;}
@media (min-width:560px){.b2b-product-grid{grid-template-columns:1fr 1fr;}}
.b2b-product-item{display:flex; align-items:center; gap:10px; padding:7px; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:background .15s, border-color .15s;}
.b2b-product-item:hover{background:var(--gold-tint);}
.b2b-product-item.is-selected{background:var(--gold-tint); border-color:var(--copper-soft);}
.b2b-product-item[hidden]{display:none;}
.b2b-product-item input[type="checkbox"]{width:16px; height:16px; flex-shrink:0; accent-color:var(--copper);}
.b2b-product-item .card-media{width:38px; height:38px; border-radius:6px; flex-shrink:0; aspect-ratio:auto;}
.b2b-product-item .card-media svg{width:60%; height:60%;}
.b2b-product-name{flex:1; font-size:.85rem; font-weight:600; color:var(--ink); min-width:0;}
.b2b-product-qty-wrap{display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--ink-faint); white-space:nowrap;}
.b2b-product-qty{width:54px; padding:.3em .4em; border-radius:6px; border:1px solid var(--line); font-size:.83rem;}
.b2b-selected-count{margin-top:10px; font-size:.85rem; font-weight:600; color:var(--copper);}
.b2b-product-item--variants{display:flex; flex-direction:column; gap:6px; cursor:default; grid-column:1 / -1;}
.b2b-product-item-head{display:flex; align-items:center; gap:10px;}
.b2b-variant-all{display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink-faint); cursor:pointer; margin-left:48px;}
.b2b-variant-all input{width:14px; height:14px; accent-color:var(--copper);}
.b2b-variant-list{display:flex; flex-direction:column; gap:4px; margin-left:48px; padding-left:10px; border-left:2px solid var(--line);}
.b2b-variant-row{display:flex; align-items:center; gap:10px; padding:5px 7px; border-radius:6px; cursor:pointer; transition:background .15s;}
.b2b-variant-row:hover{background:var(--gold-tint);}
.b2b-variant-row.is-selected{background:var(--gold-tint);}
.b2b-variant-row input[type="checkbox"]{width:15px; height:15px; flex-shrink:0; accent-color:var(--copper);}
.b2b-variant-row span:not(.b2b-product-qty-wrap){flex:1; font-size:.83rem; color:var(--ink);}
.b2b-thumb-wrap{position:relative; flex-shrink:0;}
.b2b-thumb-wrap[data-b2b-zoom]{cursor:zoom-in;}
.b2b-zoom-hint{position:absolute; bottom:-4px; right:-4px; width:18px; height:18px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; pointer-events:none; box-shadow:0 2px 5px rgba(30,34,20,.2);}
.b2b-zoom-overlay{position:fixed; inset:0; background:rgba(10,12,6,.92); z-index:95; display:flex; align-items:center; justify-content:center; gap:14px; padding:24px; cursor:zoom-out;}
.b2b-zoom-overlay[hidden]{display:none;}
.b2b-zoom-overlay img{max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 24px 60px rgba(0,0,0,.5); cursor:default;}
.b2b-zoom-nav{flex-shrink:0; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.b2b-zoom-nav:hover{background:rgba(255,255,255,.25);}
@media (max-width:560px){.b2b-zoom-nav{width:38px; height:38px; font-size:1.3rem;}}

.notice{background:var(--gold-tint); border-radius:var(--radius); padding:12px 18px; font-size:.86rem; color:var(--ink-soft); margin-bottom:20px;}
.breadcrumb{font-size:.82rem; color:var(--ink-faint); margin-bottom:18px;}
.breadcrumb a{color:var(--olive);}

/* admin */
.admin-tabs{display:flex; gap:8px; flex-wrap:wrap; padding:18px clamp(16px,4vw,48px) 0;}
.admin-tabs a{font-size:.86rem; font-weight:600; color:var(--ink-soft); padding:8px 14px; border-radius:999px;}
.admin-tabs a.is-active{background:var(--olive-deep); color:#fff;}
.admin-stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px;}
@media (min-width:640px){.admin-stat-grid{grid-template-columns:repeat(4,1fr);}}
.admin-stat{background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-align:center;}
.admin-stat strong{display:block; font-family:var(--font-display); font-size:1.8rem; color:var(--olive-deep);}
.admin-stat span{font-size:.8rem; color:var(--ink-faint);}
.admin-form .field{max-width:none;}
.field-highlight{background:linear-gradient(135deg, var(--gold-tint), var(--cream-card)); border:1px solid var(--copper); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px;}
.field-highlight label{font-family:var(--font-display); font-size:1.05rem; color:var(--olive-deep);}
.field-highlight textarea{font-size:.95rem; line-height:1.6; padding:12px 14px;}
.admin-grid-2{display:grid; grid-template-columns:1fr; gap:0 16px;}
@media (min-width:640px){.admin-grid-2{grid-template-columns:1fr 1fr;}}
.admin-lang-more{margin:16px 0 22px; border:1px solid var(--line); border-radius:var(--radius); padding:4px 16px 14px; background:var(--cream-card);}
.admin-lang-more summary{cursor:pointer; padding:12px 0; font-weight:600; font-size:.9rem; color:var(--olive);}
.admin-lang-block{padding:12px 0; border-top:1px solid var(--line);}
.admin-lang-block h4{margin:0 0 10px; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint);}
.admin-grid-3{display:grid; grid-template-columns:1fr; gap:0 16px;}
@media (min-width:640px){.admin-grid-3{grid-template-columns:1fr 1fr 1fr;}}
.admin-grid-4{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
@media (min-width:900px){.admin-grid-4{grid-template-columns:1fr 1fr 1fr 1fr;}}
.photo-manage-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; margin-top:8px;}
.photo-manage-item{display:flex; flex-direction:column; gap:6px; font-size:.74rem; color:var(--ink-soft); cursor:pointer;}
.photo-manage-item img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; border:1px solid var(--line);}
.admin-table-wrap{overflow-x:auto; margin-top:16px;}
.admin-table{width:100%; border-collapse:collapse; font-size:.88rem; background:var(--cream-card);}
.admin-table th, .admin-table td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle;}
.admin-table th{font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);}
.admin-actions{display:flex; gap:12px; align-items:center; white-space:nowrap;}
.admin-actions a{color:var(--copper); font-weight:600;}
.link-btn-danger{background:none; border:0; color:#B03A2E; font-weight:600; cursor:pointer; font-size:.88rem; padding:0; font-family:var(--font-body);}
.btn-link{background:none; border:0; color:var(--copper); font-weight:600; cursor:pointer; font-size:.85rem; padding:0; font-family:var(--font-body); white-space:nowrap;}
.btn-link:hover{text-decoration:underline;}
.admin-row--new{background:var(--gold-tint);}
.publish-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:20px;}
.btn-cancel-link{color:var(--ink-faint); font-size:.88rem; text-decoration:underline;}
.status-badge{display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 10px; border-radius:999px; vertical-align:middle; margin-left:10px;}
.status-badge--live{background:#DDF0DC; color:#2E6B3E;}
.status-badge--draft{background:#F3E3C4; color:#8A5A00;}
.admin-table-inline-form{display:inline-flex; gap:8px; align-items:center;}


/* ---- mobile header fix ----
   On a 390px phone the header's right-hand group (language select + cart +
   login + register + menu button) measured 461px wide, which forced the
   whole page to ~493px and let it pan/wobble sideways. On small screens only
   the cart and the menu button stay in the bar; everything else lives in the
   menu panel. */
html, body{overflow-x:clip;}
@media (min-width:1200px){.nav-desk{display:contents;}}
@media (max-width:1199px){
  .nav-desk{display:none;}
  .nav-left .admin-quick-link{display:none;}
  .nav{gap:10px;}
  .nav-left{flex:1 1 auto; min-width:0;}
  .bell-tip{display:none;}
}
@media (max-width:520px){
  .brand{font-size:1.15rem;}
  .nav-actions{gap:10px;}
}
.mobile-panel > a, .mobile-panel > form button, .mobile-panel > span{font-size:1rem;}
.mobile-panel > form{display:block;}
.mobile-panel > form button{background:none; border:0; border-bottom:1px solid rgba(255,255,255,.08); color:#E8E2CC; padding:10px 0; width:100%; text-align:start; font-family:var(--font-body); cursor:pointer;}
.mobile-panel > span{color:var(--copper-soft); padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08);}
.mobile-panel > a.btn{align-self:flex-start; margin:12px 0 4px; border-bottom:0;}

/* product grid: plain 1fr can't shrink below its content's min-width, which
   pushed the 2-column grid to ~392px and clipped the right card on phones
   narrower than that. minmax(0,1fr) lets the columns shrink with the screen. */
.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:640px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:960px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.card-body, .card-body h3, .card-body .desc{min-width:0; overflow-wrap:anywhere;}
.card-foot{flex-wrap:wrap; gap:6px;}

/* wholesale product picker: same 1fr-can't-shrink problem as the product grid */
.b2b-product-grid{grid-template-columns:minmax(0,1fr);}
@media (min-width:560px){.b2b-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.b2b-product-item, .b2b-product-item-head, .b2b-product-name{min-width:0; overflow-wrap:anywhere;}

/* temporary Haddabal policy-change notice (set from the admin panel, auto-expires) */
.policy-notice{background:var(--gold-tint, #F1E1BC); color:var(--ink); border-bottom:1px solid var(--line); font-size:.86rem;}
.policy-notice-inner{padding:9px 0; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;}
.policy-notice a{font-weight:700; text-decoration:underline; white-space:nowrap;}

/* ---- order tracker (customer account + admin preview) ----
   Vertical timeline on phones, horizontal step bar from 720px up. Only
   transform/opacity animate (one soft pulse on the current step) so it stays
   cheap on weak GPUs. */
.flow{margin:14px 0 6px;}
.flow-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; position:relative;}
.flow-step{display:flex; align-items:center; gap:12px; padding:7px 0; position:relative; color:var(--ink-faint);}
.flow-step:not(:last-child)::before{content:""; position:absolute; left:15px; top:36px; bottom:-7px; width:2px; background:var(--line);}
.flow-step.is-done:not(:last-child)::before{background:var(--olive);}
.flow-dot{flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--cream-card, #fff); border:2px solid var(--line); font-size:.95rem; line-height:1; position:relative; z-index:1;}
.flow-step.is-done .flow-dot{background:var(--olive); border-color:var(--olive); color:#fff; font-weight:700;}
.flow-step.is-current .flow-dot{border-color:var(--copper); background:var(--gold-tint, #F1E1BC);}
.flow-step.is-current .flow-dot::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--copper); opacity:0; animation:flowPulse 2s ease-out infinite;}
@keyframes flowPulse{0%{transform:scale(.75); opacity:.7;} 100%{transform:scale(1.15); opacity:0;}}
.flow-label{font-size:.9rem; line-height:1.3;}
.flow-step.is-done .flow-label{color:var(--ink-soft);}
.flow-step.is-current .flow-label{color:var(--ink); font-weight:700;}
.flow-now{margin-top:12px; padding:14px 16px; background:var(--cream, #F5F1E4); border:1px solid var(--line); border-radius:10px;}
.flow-now-title{font-weight:700; font-size:1.02rem; color:var(--ink);}
.flow-now p{margin:6px 0 0; font-size:.9rem; color:var(--ink-soft);}
.flow-now-note{padding-top:8px; border-top:1px dashed var(--line);}
.flow-meta{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px; font-size:.86rem;}
.flow-meta em{font-style:normal; color:var(--ink-faint); margin-right:4px;}
.flow-track-btn{margin-top:12px; padding:.55em 1.2em; font-size:.85rem;}
.flow-history{margin-top:10px; font-size:.86rem;}
.flow-history summary{cursor:pointer; color:var(--olive); font-weight:600;}
.flow-history ul{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.flow-history li{display:flex; gap:12px; flex-wrap:wrap;}
.flow-h-time{flex:0 0 150px; color:var(--ink-faint); font-size:.8rem;}
.flow-h-body{display:flex; flex-direction:column; min-width:0; flex:1 1 180px;}
.flow-h-note{color:var(--ink-soft); font-size:.84rem; overflow-wrap:anywhere;}
@media (min-width:720px){
  .flow-steps{flex-direction:row; justify-content:space-between; gap:6px;}
  .flow-step{flex-direction:column; text-align:center; flex:1 1 0; min-width:0; padding:0; gap:8px;}
  .flow-step:not(:last-child)::before{left:calc(50% + 20px); right:calc(-50% + 20px); top:15px; bottom:auto; width:auto; height:2px;}
  .flow-label{font-size:.8rem;}
}

/* ---- admin: order fulfilment ---- */
.stage-chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px;}
.stage-chip{display:inline-block; padding:.4em .95em; border:1px solid var(--line); border-radius:999px; font-size:.82rem; color:var(--ink-soft); background:var(--cream-card, #fff);}
.stage-chip.is-active{background:var(--olive-deep); border-color:var(--olive-deep); color:#fff;}
.stage-badge{display:inline-block; font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:999px; vertical-align:middle;}
.stage-badge--open{background:#F3E3C4; color:#8A5A00;}
.stage-badge--moving{background:#DCE8F5; color:#254E7A;}
.stage-badge--done{background:#DDF0DC; color:#2E6B3E;}
.stage-mini{display:inline-flex; gap:3px; margin-top:6px;}
.stage-mini i{width:16px; height:5px; border-radius:3px; background:var(--line);}
.stage-mini i.on{background:var(--olive);}
.stage-quick{padding:.45em 1em; font-size:.78rem; white-space:nowrap;}
.stage-options{display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:14px;}
.stage-option{display:block; cursor:pointer;}
.stage-option input{position:absolute; opacity:0; pointer-events:none;}
.stage-option-body{display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--cream-card, #fff);}
.stage-option-body small{display:block; color:var(--ink-faint); font-size:.76rem; margin-top:2px;}
.stage-option-icon{font-size:1.3rem;}
.stage-option input:checked + .stage-option-body{border-color:var(--copper); background:var(--gold-tint, #F1E1BC); box-shadow:0 0 0 1px var(--copper);}
.stage-option input:focus-visible + .stage-option-body{outline:2px solid var(--copper); outline-offset:2px;}
.admin-card{background:var(--cream-card, #fff); border:1px solid var(--line); border-radius:12px; padding:18px 20px;}

/* ---- admin: automatic stages + manual email state ---- */
.auto-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; background:var(--cream-card, #fff); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin:0 0 14px; font-size:.9rem;}
.auto-bar form{margin:0;}
.auto-dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:#B5B29B; margin-right:4px; vertical-align:middle;}
.auto-dot.on{background:#3E8E4B;}
.auto-tag{display:inline-block; font-size:.68rem; font-weight:700; background:#E4E6D4; color:var(--olive-deep); padding:2px 8px; border-radius:999px; vertical-align:middle;}
.mail-state{font-size:.74rem; margin-top:5px;}
.mail-state--ok{color:#2E6B3E;}
.mail-state--pending{color:#B03A2E; font-weight:600;}
.auto-timeline{display:flex; gap:3px; margin:0 0 14px; min-height:44px;}
.auto-seg{flex-basis:0; min-width:0; background:var(--olive); color:#fff; border-radius:6px; padding:6px 8px; font-size:.72rem; line-height:1.25; display:flex; align-items:center; overflow:hidden;}
.auto-seg:nth-child(2){background:#5C6A38;} .auto-seg:nth-child(3){background:#6E7D44;} .auto-seg:nth-child(4){background:#B07D24;} .auto-seg:nth-child(5){background:#8A5A00;}
.auto-sched{list-style:none; margin:8px 0 0; padding:0; font-size:.86rem; display:flex; flex-direction:column; gap:4px;}
.auto-sched li{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--ink-faint);}
.auto-sched li.is-done{color:var(--ink);}

/* ---- receipt confirmation (My Orders) ---- */
.receipt-panel{margin-top:16px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--cream, #F5F1E4);}
.receipt-head{display:flex; gap:12px; align-items:flex-start;}
.receipt-icon{font-size:1.7rem; line-height:1;}
.receipt-head strong{font-size:1.02rem;}
.receipt-head p{margin:2px 0 0; font-size:.86rem; color:var(--ink-soft);}
.receipt-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.receipt-actions > form, .receipt-actions > div{flex:1 1 220px; margin:0; min-width:0;}
.receipt-actions > div > form{margin:0;}
.receipt-btn{width:100%; padding:.8em 1.2em; font-size:.92rem; white-space:normal; text-align:center;}
.receipt-btn--bad{background:transparent; border:2px solid #B03A2E; color:#B03A2E;}
.receipt-btn--bad:hover:not(:disabled){background:#B03A2E; color:#fff;}
.receipt-btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none;}
.receipt-lock{margin:10px 0 0; font-size:.82rem; color:var(--ink-faint);}
.receipt-auto{margin:12px 0 0; padding-top:10px; border-top:1px dashed var(--line); font-size:.82rem; color:var(--ink-soft);}
.receipt-panel--reported{background:#FBEDEA; border-color:#E8B7AF;}
.receipt-reported{margin:0; color:#8C2F24; font-weight:600; font-size:.9rem;}
.flow-flag{margin:8px 0 0; font-size:.86rem; font-weight:600; color:#2E6B3E;}
.flow-flag--warn{color:#B03A2E;}

/* ---- the single review banner (with Haddabal reward) ---- */
.review-banner{margin-top:16px; border-radius:14px; overflow:hidden; border:1px solid #D9A441; background:linear-gradient(135deg, #FFF6DC 0%, #F6E2B0 100%); box-shadow:0 12px 30px -18px rgba(176,125,36,.7);}
.review-banner-top{display:flex; gap:16px; align-items:center; padding:18px 18px 8px;}
.review-banner-coin{flex:none; width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 6px 16px -6px rgba(0,0,0,.45);}
.review-banner-badge{display:inline-block; background:linear-gradient(135deg, var(--copper-soft), var(--copper)); color:#fff; font-weight:800; font-size:.8rem; letter-spacing:.04em; padding:3px 12px; border-radius:999px; margin-bottom:6px;}
.review-banner h3{margin:0 0 4px; font-size:1.2rem; color:#3A2A08;}
.review-banner-text p{margin:0; font-size:.9rem; color:#5B4A22;}
.rv-list{display:flex; flex-direction:column; gap:10px; padding:10px 18px 4px;}
.rv-item{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; background:rgba(255,255,255,.78); border:1px solid rgba(176,125,36,.3); border-radius:10px; padding:10px 12px;}
.rv-item-name{flex:1 1 180px; font-weight:600; font-size:.9rem; min-width:0; overflow-wrap:anywhere; color:var(--ink);}
.rv-cta{padding:.5em 1.1em; font-size:.8rem; white-space:nowrap;}
.review-banner-hint{margin:8px 18px 16px; font-size:.78rem; color:#7A6A3E;}
.review-reward{margin:0 0 12px; padding:10px 14px; background:var(--gold-tint, #F1E1BC); border:1px solid var(--copper); border-radius:10px; font-size:.9rem;}
@media (max-width:480px){.review-banner-top{flex-direction:column; align-items:flex-start;} .rv-cta{width:100%; text-align:center;}}

/* ---- admin: alert for "not received" reports ---- */
.alert-bar{background:#FBEDEA; border:1px solid #E8B7AF; color:#8C2F24; border-radius:12px; padding:12px 16px; margin:0 0 14px; font-size:.9rem;}
.alert-bar a{color:#8C2F24; font-weight:700; text-decoration:underline;}
.nav-badge{display:inline-block; min-width:18px; padding:0 6px; border-radius:999px; background:#B03A2E; color:#fff; font-size:.7rem; font-weight:800; line-height:18px; text-align:center; margin-left:4px;}

/* admin buttons on a review inside the public product page */
.review-admin-actions{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px;}
.review-admin-actions form{margin:0;}
.review-admin-actions .btn{padding:.4em 1em; font-size:.78rem;}
.zw-confirm-msg{margin:0 0 16px; font-size:1rem; color:var(--ink); text-align:center;}

/* admin shipping page: labelled inputs inside a table row */
.ship-cell{display:inline-flex; flex-direction:column; gap:2px; font-size:.72rem; color:var(--ink-faint); margin-right:8px;}
.ship-cell input{font-size:.9rem; color:var(--ink);}

/* delivery time + shipping price for the visitor's country (product page) */
.ship-info{margin:14px 0; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--cream, #F5F1E4); font-size:.9rem;}
.ship-info-line{display:flex; gap:8px; align-items:flex-start; margin-bottom:8px; color:var(--ink);}
.ship-info-icon{font-size:1.1rem; line-height:1.3;}
.ship-info-hint{margin:0 0 8px; color:var(--ink-soft);}
.ship-info select{width:100%; padding:.55em .8em; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font:inherit; font-size:.86rem;}

/* ---- admin: live count badges on the tabs, task list, and the site-wide owner bar ---- */
.nav-badge--new{background:#2F6FB3;}
.nav-badge--transit{background:#B07D24;}
.nav-badge--amber{background:#C9861A;}
.nav-badge--red{background:#B03A2E;}
.admin-tasks{display:flex; flex-direction:column; gap:8px; max-width:720px;}
.admin-task{display:flex; align-items:center; gap:14px; padding:12px 16px; border:1px solid var(--line); border-left:5px solid #2F6FB3; border-radius:10px; background:var(--cream-card, #fff); color:var(--ink); text-decoration:none;}
.admin-task:hover{box-shadow:0 6px 16px -10px rgba(30,34,20,.4);}
.admin-task--red{border-left-color:#B03A2E; background:#FBEDEA;}
.admin-task--amber{border-left-color:#C9861A;}
.admin-task-n{min-width:34px; height:34px; border-radius:50%; background:var(--olive-deep); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem;}
.admin-task--red .admin-task-n{background:#B03A2E;}
.admin-task span:nth-child(2){flex:1;}
.admin-task-go{font-weight:700; color:var(--copper);}
.admin-bar{background:#22261B; color:#F5EFDD; border-bottom:3px solid var(--copper); font-size:.85rem;}
.admin-bar-inner{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:9px 0;}
.admin-bar-title{font-weight:800; margin-right:4px;}
.admin-bar-item{display:inline-block; padding:3px 11px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; text-decoration:none; font-weight:600;}
.admin-bar-item:hover{background:rgba(255,255,255,.22);}
.admin-bar-item.is-red{background:#B03A2E;}
.admin-bar-item.is-amber{background:#9A6A12;}
.admin-bar-reviews{flex-basis:100%;}
.admin-bar-reviews summary{cursor:pointer; display:inline-block; padding:3px 11px; border-radius:999px; background:var(--copper); color:#fff; font-weight:700; list-style:none;}
.admin-bar-reviews summary::-webkit-details-marker{display:none;}
.abr-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; margin-top:10px;}
.abr-card{background:#fff; color:var(--ink); border-radius:10px; padding:12px 14px;}
.abr-head{font-size:.84rem;}
.abr-stars{color:#C9861A;}
.abr-card p{margin:6px 0; font-size:.86rem; color:var(--ink-soft); overflow-wrap:anywhere;}
.abr-empty{color:var(--ink-faint) !important;}
.abr-actions{display:flex; flex-wrap:wrap; gap:8px;}
.abr-actions form{margin:0;}
.abr-actions .btn{padding:.4em 1em; font-size:.78rem;}
.abr-more{align-self:center; color:#fff; font-weight:700;}