/* JFC extras: layout fixes, accessibility, admin dashboard, empty states, form errors */
section{ padding-block:clamp(40px,6vw,72px); }
.cat-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cat-tile{ position:relative; display:block; aspect-ratio:4/3; border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.cat-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.cat-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,0) 60%); }
.cat-tile span{ position:absolute; left:18px; right:18px; bottom:16px; z-index:2; color:#fff; display:flex; flex-direction:column; gap:2px; }
.cat-tile b{ font-family:var(--font-display); font-size:22px; }
.cat-tile small{ font-size:13.5px; color:#f3e6d3; }
.cat-tile:hover img,.cat-tile:focus-visible img{ transform:scale(1.04); }
@media(max-width:700px){ .cat-tiles{ grid-template-columns:1fr; } .cat-tile{ aspect-ratio:16/9; } }

/* featured row: arrow sits in its own gutter so it never covers the 4th card */
.featured-host{ padding-right:34px; }
.featured-next{ right:-6px !important; }
@media(max-width:820px){ .featured-host{ padding-right:0; } }

/* photos: consistent crop, gentler hover */
.card-photo{ object-fit:cover; width:100%; aspect-ratio:4/3; }
@media(hover:hover){ .card:hover .card-photo{ transform:scale(1.03) !important; } }
.price small{ font-size:12px; color:var(--muted); font-weight:600; }

/* hero controls: bigger targets */
.hc-arrow{ width:48px !important; height:48px !important; }
.hc-dot{ width:14px !important; height:14px !important; position:relative; }
.hc-dot::after{ content:""; position:absolute; inset:-12px; }
:focus-visible{ outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 5px #8a5a00; }

/* checkout progress + sticky summary */
.steps-bar{ display:flex; gap:8px; justify-content:center; margin:0 auto 22px; padding:0; list-style:none; flex-wrap:wrap; }
.steps-bar li{ display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:99px; border:1px solid var(--line); color:var(--muted); font-weight:600; font-size:14px; }
.steps-bar li.on{ background:var(--gold); color:#1b1206; border-color:var(--gold); }
.steps-bar li.done{ color:var(--heading); }
.sticky-summary{ position:sticky; top:96px; align-self:start; }

/* field errors */
.field-error{ border-color:#e5484d !important; }
.err-msg{ color:#ff8a8d; font-size:12.8px; margin-top:5px; }
[data-theme="light"] .err-msg{ color:#b42318; }

/* empty states */
.empty-state{ text-align:center; padding:44px 20px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); }
.empty-state svg{ width:84px; height:84px; margin:0 auto 12px; display:block; color:var(--gold); }
.empty-state h3{ margin:0 0 6px; color:var(--heading); font-family:var(--font-display); }
.empty-state .btn{ margin:14px 6px 0; }

/* admin dashboard */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin:18px 0; }
.kpi{ background:var(--card-bg); border:1px solid var(--line); border-radius:14px; padding:16px; }
.kpi b{ display:block; font-size:26px; color:var(--heading); font-family:var(--font-display); }
.kpi span{ color:var(--muted); font-size:13px; }
.panel{ background:var(--card-bg); border:1px solid var(--line); border-radius:16px; padding:18px; margin-bottom:20px; }
.panel h3{ margin:0 0 12px; font-family:var(--font-display); }
.filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:14px 0; }
.filters label{ font-size:12.5px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.filters input,.filters select,.admin-table select,.admin-table input,.modal-box input,.modal-box select,.modal-box textarea{ background:var(--bg,#14100c); color:var(--heading); border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit; }
.bars{ display:flex; align-items:end; gap:6px; height:180px; padding-top:10px; overflow-x:auto; }
.bar{ flex:1 0 34px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; font-size:11px; color:var(--muted); gap:4px; }
.bar i{ display:block; width:100%; max-width:36px; background:linear-gradient(180deg,var(--gold),var(--gold-dark)); border-radius:6px 6px 0 0; min-height:2px; }
.bar em{ font-style:normal; color:var(--heading); font-size:11px; }
.two{ display:grid; grid-template-columns:2fr 1fr; gap:20px; } @media(max-width:900px){ .two{ grid-template-columns:1fr; } }
.toprow{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.tabs button{ background:none; border:1px solid var(--line); color:var(--heading); border-radius:99px; padding:9px 16px; cursor:pointer; font-weight:600; }
.tabs button.on{ background:var(--gold); color:#1b1206; border-color:var(--gold); }
.modal-bg{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:300; padding:16px; }
.modal-box{ background:var(--card-bg,#1b1610); border:1px solid var(--line); border-radius:16px; padding:22px; width:min(460px,100%); max-height:92vh; overflow:auto; }
.modal-box .field{ margin-bottom:12px; } .modal-box label{ display:block; font-size:13px; color:var(--muted); margin-bottom:4px; } .modal-box input,.modal-box select,.modal-box textarea{ width:100%; }
.role-badge{ font-size:12px; padding:3px 10px; border-radius:99px; background:var(--gold); color:#1b1206; font-weight:700; }
.table-wrap{ overflow-x:auto; }

/* hero video */
.hero-product{ aspect-ratio:640 / 702; max-width:440px; margin-inline:auto; background:transparent !important; box-shadow:none !important; border-radius:0 !important; overflow:visible !important; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-ctrl{ display:none !important; }

/* toast with View cart link */
.toast.has-link{ display:flex; align-items:center; gap:10px; }
.toast-link{ margin-left:6px; padding:8px 14px; min-height:36px; display:inline-flex; align-items:center; border-radius:99px; background:#F4A825; color:#1b1206 !important; font-weight:700; text-decoration:none; white-space:nowrap; }

.modal-bg[hidden]{ display:none !important; }

[hidden]{ display:none !important; }

/* logo: no box or border, transparent */
.brand-logo, .site-footer .brand-logo, .admin-side .brand-logo{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; }

.hero-video{ background:transparent; -webkit-mask-image:linear-gradient(#000 86%,transparent); mask-image:linear-gradient(#000 86%,transparent); filter:drop-shadow(0 22px 28px rgba(0,0,0,.45)); }
.hero-video.opaque{ background:#000; border-radius:22px; -webkit-mask-image:none; mask-image:none; filter:none; }
/* soften the video frame edges so the bucket blends into the hero */
.hero-video:not(.opaque){
  -webkit-mask-image:linear-gradient(#000 84%,transparent), linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(#000 84%,transparent), linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-composite:intersect;
}

/* ===== v12: hero bucket – fully transparent, floating, glowing ===== */
.hero-product{ position:relative; isolation:isolate; overflow:visible !important; }
.hero-product::before{ /* warm glow behind the bucket */
  content:""; position:absolute; z-index:-1; left:50%; top:46%; width:92%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,176,40,.34) 0%,rgba(230,70,30,.16) 40%,transparent 68%);
  filter:blur(18px); animation:jfcGlow 5s ease-in-out infinite alternate; pointer-events:none;
}
.hero-product::after{ /* soft ground shadow */
  content:""; position:absolute; z-index:-1; left:50%; bottom:-2%; width:70%; height:7%; transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%); filter:blur(8px); pointer-events:none;
}
.hero-video{
  background:transparent !important; border-radius:0 !important; box-shadow:none !important;
  object-fit:contain; transform:scale(1.04);
  -webkit-mask-image:linear-gradient(#000 88%,transparent), linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(#000 88%,transparent), linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-composite:intersect;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(255,170,40,.18));
  animation:jfcFloat 6s ease-in-out infinite;
}
/* Safari fallback (opaque MP4): its black backdrop blends away on the dark hero */
.hero-video.opaque{ border-radius:0 !important; mix-blend-mode:screen; filter:none; }
@keyframes jfcFloat{ 0%,100%{ transform:translateY(0) scale(1.04); } 50%{ transform:translateY(-8px) scale(1.04); } }
@keyframes jfcGlow{ from{ opacity:.7; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .hero-video,.hero-product::before{ animation:none; } }

/* ===== v12: menu cards – zoom-in hover ===== */
.card{ will-change:transform; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), border-color .25s; }
.card-media{ position:relative; }
.card-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35)); opacity:0; transition:opacity .35s; pointer-events:none; }
.card-media img.card-photo{ transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s; }
@media (hover:hover){
  .card:hover, .card:focus-visible{
    transform:scale(1.045); z-index:5; border-color:var(--gold);
    box-shadow:0 26px 54px rgba(0,0,0,.6), 0 0 0 1px rgba(255,198,41,.35), 0 0 34px rgba(255,198,41,.16);
  }
  .card:hover .card-photo, .card:focus-visible .card-photo{ transform:scale(1.14); filter:saturate(1.1) brightness(1.04); }
  .card:hover .card-media::after{ opacity:1; }
}
.card:active{ transform:scale(1.02); }
@media (prefers-reduced-motion:reduce){ .card,.card-photo{ transition:none !important; } }

/* ===== v13: new hero video – transparent feathered border + 2s fades ===== */
.hero-product::after{ display:none; }
.hero-video, .hero-video:not(.opaque), .hero-video.opaque{
  object-fit:cover; transform:none; animation:none !important; mix-blend-mode:normal;
  filter:none; border-radius:0 !important; background:transparent !important;
  opacity:0; transition:opacity .6s ease-out;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,rgba(0,0,0,.5) 80%,transparent 100%) !important;
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,rgba(0,0,0,.5) 80%,transparent 100%) !important;
  -webkit-mask-composite:source-over !important; mask-composite:add !important;
}
.hero-video.is-on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .hero-video{ transition:none; } }

/* ===== v13: home page polish ===== */
.hero-inner > div:first-child > *{ animation:jfcUp .8s cubic-bezier(.2,.8,.2,1) both; }
.hero-inner > div:first-child > :nth-child(2){ animation-delay:.08s; }
.hero-inner > div:first-child > :nth-child(3){ animation-delay:.16s; }
.hero-inner > div:first-child > :nth-child(4){ animation-delay:.24s; }
.hero-inner > div:first-child > :nth-child(5){ animation-delay:.32s; }
@keyframes jfcUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.hero h1 em{ background:linear-gradient(90deg,#FFC629,#FF9A3C); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-chip{ animation:jfcBob 4.5s ease-in-out infinite; }
.hero-chip.c2{ animation-delay:-2s; }
@keyframes jfcBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@media (prefers-reduced-motion:reduce){ .hero-chip,.hero-inner > div:first-child > *{ animation:none; } }

.stats-band{ padding:0; margin-top:-34px; position:relative; z-index:3; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--card-bg); border:1px solid var(--line); border-radius:22px; box-shadow:0 22px 50px rgba(0,0,0,.35); overflow:hidden; }
.stat{ padding:22px 20px; text-align:center; border-right:1px solid var(--line); transition:background .25s; }
.stat:last-child{ border-right:0; }
.stat:hover{ background:rgba(255,198,41,.07); }
.stat b{ display:block; font-size:clamp(24px,3vw,34px); line-height:1.1; color:var(--gold); font-weight:800; }
.stat b small{ font-size:.5em; font-weight:700; }
.stat span{ display:block; margin-top:6px; font-size:13px; color:var(--muted); }
@media (max-width:760px){ .stats-grid{ grid-template-columns:1fr 1fr; } .stat:nth-child(2){ border-right:0; } .stat:nth-child(-n+2){ border-bottom:1px solid var(--line); } }

.cat-tile{ overflow:hidden; }
.cat-tile img{ transition:transform .6s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover){ .cat-tile:hover img{ transform:scale(1.1); } }

.promo-cta{ padding:30px 0 80px; }
.promo-card{ display:grid; grid-template-columns:1.1fr .9fr; align-items:stretch; border-radius:28px; overflow:hidden; border:1px solid rgba(255,198,41,.35);
  background:radial-gradient(circle at 12% 0%,rgba(255,176,40,.22),transparent 55%),linear-gradient(135deg,#1c130b,#0d0a07); box-shadow:0 26px 60px rgba(0,0,0,.4); }
.promo-text{ padding:clamp(26px,4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.promo-text h2{ color:#fff; font-size:clamp(26px,3.4vw,40px); margin-bottom:12px; }
.promo-text p{ color:#E9D9C7; margin-bottom:24px; max-width:460px; }
.promo-card img{ width:100%; height:100%; min-height:260px; object-fit:cover; display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%); mask-image:linear-gradient(90deg,transparent,#000 28%); }
@media (max-width:820px){ .promo-card{ grid-template-columns:1fr; } .promo-card img{ order:-1; max-height:260px; -webkit-mask-image:linear-gradient(#000 60%,transparent); mask-image:linear-gradient(#000 60%,transparent); } }

/* about: portrait store photo shows uncropped and centered */
.store-gallery{ grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),360px)); justify-content:center; }
.store-gallery img{ aspect-ratio:3/4; }



/* =========================================================
   v14: sticky header, contact layout, server-rendered pages
   ========================================================= */

/* --- Sticky header ------------------------------------------------------
   Root cause of the old header not sticking: `overflow-x:hidden` on BOTH html
   and body turns <body> into its own scroll container, so `position:sticky`
   on the header sticks to a box that never scrolls. Only <html> may clip
   horizontal overflow; <body> must stay `visible` (or `clip`, which does not
   create a scroll container). */
html{ overflow-x:hidden; scroll-padding-top:calc(var(--header-h) + 22px); }
body{ overflow-x:visible; }
@supports (overflow:clip){ body{ overflow-x:clip; } }
.site-header{ position:-webkit-sticky; position:sticky; top:0; z-index:100; }
[id]{ scroll-margin-top:calc(var(--header-h) + 22px); }

/* --- Contact section ----------------------------------------------------
   Info cards run across the top; below them the form and the map sit side by
   side and stretch to the same height, so there is no empty column. */
.contact-info-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; margin-bottom:clamp(20px,3vw,32px); }
.contact-info-row .contact-info-card{ margin-bottom:0; height:100%; }
.contact-main{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(20px,3vw,32px); align-items:stretch; }
.contact-form-panel{ margin:0 !important; display:flex; flex-direction:column; }
.contact-form-panel h3{ margin-top:0; }
.contact-form-panel form{ display:flex; flex-direction:column; flex:1 1 auto; }
.contact-form-panel .field.grow{ flex:1 1 auto; display:flex; flex-direction:column; }
.contact-form-panel .field.grow textarea{ flex:1 1 auto; min-height:140px; resize:vertical; }
.contact-form-panel .btn{ align-self:flex-start; }
.contact-side{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.contact-side .map-wrap{ margin:0; flex:1 1 auto; aspect-ratio:auto; min-height:280px; }
.contact-side .map-frame{ width:100%; height:100%; min-height:280px; border:0; display:block; }
.contact-side .map-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.contact-form-panel .form-status{ margin:12px 0 0; font-size:14px; font-weight:600; }
.contact-form-panel .form-status[data-kind="ok"]{ color:var(--green); }
.contact-form-panel .form-status[data-kind="err"]{ color:#ff8a8d; }
[data-theme="light"] .contact-form-panel .form-status[data-kind="err"]{ color:#b42318; }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
@media (max-width:900px){
  .contact-main{ grid-template-columns:minmax(0,1fr); }
  .contact-side .map-wrap{ min-height:240px; aspect-ratio:16/10; }
  .contact-form-panel .btn{ align-self:stretch; }
}

/* --- Auth / account pages (PHP) --- */
.alert{ padding:12px 14px; border-radius:12px; font-size:14px; font-weight:600; margin:0 0 14px; border:1px solid transparent; }
.alert-error{ background:rgba(229,72,77,.12); border-color:rgba(229,72,77,.45); color:#ff8a8d; }
.alert-ok{ background:rgba(46,158,91,.12); border-color:rgba(46,158,91,.45); color:var(--green); }
[data-theme="light"] .alert-error{ color:#b42318; }
.field .err-msg{ margin-top:5px; }
.dash-nav button.dash-logout{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; font:inherit; color:inherit; cursor:pointer; text-align:left; padding:inherit; min-height:46px; }
.dash-nav form{ margin:0; display:contents; }
.auth-foot a + a{ margin-left:12px; }
.admin-login-note{ font-size:12.5px; color:var(--muted); text-align:center; margin-top:14px; }
.inline-form{ display:inline; margin:0; }
.admin-table .btn-sm{ white-space:nowrap; }
.admin-main .field input, .admin-main .field select, .admin-main .field textarea{ width:100%; }
.pager{ display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:12px; font-size:13px; color:var(--muted); }
.badge-off{ background:rgba(229,72,77,.15); color:#ff8a8d; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.badge-on{ background:rgba(46,158,91,.15); color:var(--green); padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.admin-nav button.link-btn{ display:flex; align-items:center; gap:10px; width:100%; padding:12px; border:0; background:none; border-radius:10px; font:inherit; font-size:13.8px; font-weight:600; color:#D8C4AC; cursor:pointer; text-align:left; }
.admin-nav button.link-btn:hover{ background:rgba(255,255,255,.08); color:#fff; }
.admin-nav form{ margin:0; }
.msg-body{ white-space:pre-wrap; overflow-wrap:anywhere; }


/* =========================================================
   v15: COD-only checkout, order workflow, reviews, receipts
   (colours come from the existing theme variables only)
   ========================================================= */
.sr-only{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.req{ color:var(--red); } .opt{ color:var(--muted); font-weight:500; font-size:12px; }
.field-hint{ margin-top:6px; font-size:12.8px; color:var(--brown-soft); }

/* place-order button: spinner while sending, form locked */
.btn.is-loading{ position:relative; opacity:.85; cursor:progress; }
.btn.is-loading .btn-label::before{ content:""; display:inline-block; width:16px; height:16px; margin-right:10px; vertical-align:-3px; border:2.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:jfcSpin .7s linear infinite; }
@keyframes jfcSpin{ to{ transform:rotate(360deg); } }
form.is-busy{ pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .btn.is-loading .btn-label::before{ animation-duration:2s; } }

/* statuses */
.status-chip.cancelled{ background:rgba(229,72,77,.14); color:#b42318; }
[data-theme="dark"] .status-chip.cancelled{ background:rgba(229,72,77,.18); color:#ff8a8d; }
.badge-warn{ background:rgba(244,168,37,.18); color:var(--gold-dark); padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
[data-theme="dark"] .badge-warn{ color:var(--gold); }
.stock-flag{ font-weight:700; } .stock-flag.out{ color:#b42318; } .stock-flag.low{ color:var(--gold-dark); }
[data-theme="dark"] .stock-flag.out{ color:#ff8a8d; } [data-theme="dark"] .stock-flag.low{ color:var(--gold); }
.btn[disabled][data-pz-add], .card-actions .btn[disabled]{ cursor:not-allowed; }
.count-pill{ display:inline-block; min-width:20px; padding:1px 8px; border-radius:999px; background:var(--gold); color:#1b1206; font-size:11.5px; font-weight:800; text-align:center; }

/* tracking timeline: 7 steps, cancelled variant */
.track-note{ margin:0; text-align:center; font-size:13.5px; color:var(--brown-soft); }
.tracker .t-step.cancelled.current .t-dot{ background:#b42318; border-color:#b42318; box-shadow:0 0 0 5px rgba(229,72,77,.18); }
.tracker .t-step.cancelled.current .t-dot svg{ display:block; stroke:#fff; }
.tracker.is-cancelled .fill{ background:#b42318; box-shadow:none; }
@media (min-width:721px) and (max-width:900px){ .t-step h4{ font-size:11.8px; } }

/* order history */
.order-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.order-tabs a{ padding:9px 16px; border:1px solid var(--line); border-radius:999px; font-weight:600; font-size:14px; color:var(--heading); }
.order-tabs a.on{ background:var(--gold); border-color:var(--gold); color:#1b1206; }
.tab-hint{ margin:0 0 8px; font-size:12.5px; color:var(--muted); }
.order-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex:1 1 100%; }
.order-actions .inline-form{ display:inline-flex; }
.reviewed{ font-size:13px; color:var(--muted); display:inline-flex; gap:6px; align-items:center; }
.notice-row{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--line); font-size:14px; }
.notice-row.unread{ background:rgba(244,168,37,.10); border-left:3px solid var(--gold); font-weight:600; }
.notice-row small{ color:var(--muted); font-weight:400; }
@media (max-width:640px){ .order-actions .btn, .order-actions form{ flex:1 1 calc(50% - 8px); } .order-actions form .btn{ width:100%; } }

/* stars + reviews */
.stars{ color:var(--gold); letter-spacing:2px; white-space:nowrap; } .stars .off{ color:var(--line); }
.star-input{ display:inline-flex; flex-direction:row-reverse; gap:4px; }
.star-input input{ position:absolute; opacity:0; width:1px; height:1px; }
.star-input label{ font-size:36px; line-height:1; color:var(--line); cursor:pointer; padding:2px 4px; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label{ color:var(--gold); }
.star-input input:focus-visible + label{ outline:3px solid var(--gold); border-radius:6px; }
.rate-field{ border:0; padding:0; margin:0 0 14px; } .rate-field legend{ font-weight:600; margin-bottom:6px; color:var(--heading); }
.rating-summary{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card-bg); }
.rating-big{ display:flex; flex-direction:column; align-items:center; gap:4px; } .rating-big b{ font-size:46px; line-height:1; color:var(--heading); font-family:var(--font-display); } .rating-big span:last-child{ color:var(--muted); font-size:13px; }
.dist-row{ display:grid; grid-template-columns:34px 1fr 28px; gap:10px; align-items:center; font-size:13px; color:var(--muted); margin:4px 0; }
.dist-row i{ display:block; height:8px; border-radius:99px; background:var(--line); overflow:hidden; } .dist-row em{ display:block; height:100%; background:var(--gold); }
.review-card{ padding:18px; margin-bottom:14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card-bg); }
.review-card header{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .review-card header small{ color:var(--muted); margin-left:auto; }
.review-card p{ margin:10px 0 6px; } .review-items{ color:var(--muted); display:block; }
.review-photo{ margin-top:10px; max-width:min(320px,100%); max-height:240px; width:auto; height:auto; border-radius:12px; border:1px solid var(--line); }
@media (max-width:560px){ .rating-summary{ grid-template-columns:1fr; } }

/* receipt (screen + print) */
.receipt-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:0 auto 18px; max-width:560px; }
.receipt{ max-width:560px; margin:0 auto; padding:clamp(18px,4vw,30px); background:#fff; color:#2A1B10; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.receipt-head{ display:flex; gap:12px; align-items:center; border-bottom:2px dashed #cdb998; padding-bottom:12px; } .receipt-head small{ display:block; color:#6F6152; }
.receipt-no{ margin:14px 0 8px; font-family:var(--font-display); color:#A9270F; font-size:19px; overflow-wrap:anywhere; }
.receipt-meta{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:14px; } .receipt-meta dt{ color:#6F6152; } .receipt-meta dd{ margin:0; font-weight:600; text-align:right; overflow-wrap:anywhere; }
.receipt-items{ width:100%; margin-top:14px; border-collapse:collapse; font-size:14px; } .receipt-items th{ text-align:left; font-size:12px; text-transform:uppercase; color:#6F6152; border-bottom:1px solid #cdb998; padding:6px 0; }
.receipt-items td{ padding:7px 0; border-bottom:1px solid #eee1ce; } .receipt-items .num{ text-align:right; white-space:nowrap; padding-left:10px; }
.receipt-totals{ margin-top:12px; font-size:14.5px; } .receipt-totals div{ display:flex; justify-content:space-between; padding:3px 0; } .receipt-totals .grand{ font-weight:800; font-size:18px; border-top:2px solid #2A1B10; margin-top:6px; padding-top:8px; }
.receipt-foot{ margin:14px 0 0; font-size:12.5px; color:#6F6152; }
@media print{
  body{ background:#fff !important; } .no-print, .site-header, .site-footer, .mobile-nav, .toast, .to-top, .admin-side, .admin-topbar, .alert{ display:none !important; }
  .admin-shell{ display:block !important; } .admin-main{ padding:0 !important; }
  .receipt{ border:0; box-shadow:none; max-width:none; } section{ padding:0 !important; }
}

/* cart: let the item column shrink so the remove button never slides past the card at ~1024px */
.cart-grid > *{ min-width:0; }
/* the progress bar is injected as the first child of the grid: span both columns instead of taking the first cell */
.cart-grid > .steps-bar, .checkout-grid > .steps-bar{ grid-column:1 / -1; }

/* ===== v16: store availability (banner, pills, locked checkout) ===== */
.store-banner{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:9px 16px; font-size:14px; line-height:1.4; border-bottom:1px solid var(--line); background:var(--card-bg,#fff); color:var(--text,inherit); text-align:center; }
.store-banner[hidden]{ display:none; }
.store-banner[data-state="open"]{ background:#effaf3; border-color:#cdeedb; color:#14532d; }
.store-banner[data-state="closed"]{ background:#fdeeee; border-color:#f5cccc; color:#7a1d16; }
.store-banner[data-state="paused"]{ background:#fff6e0; border-color:#f3dfa6; color:#6b4a00; }
.store-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.04em; white-space:nowrap; }
.store-pill::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.store-pill.store-open{ background:#d7f2e1; color:#14632f; }
.store-pill.store-closed{ background:#fbd9d6; color:#9b1c12; }
.store-pill.store-paused{ background:#fdebb8; color:#7a5200; }
.store-lock-note{ margin:0 0 12px; padding:12px 14px; border-radius:12px; background:#fff6e0; border:1px solid #f3dfa6; color:#6b4a00; font-size:14px; line-height:1.5; }
#goCheckout.is-disabled{ opacity:.55; cursor:not-allowed; }
#placeOrderBtn:disabled{ opacity:.6; cursor:not-allowed; }
[data-theme="dark"] .store-banner[data-state="open"]{ background:#10261a; border-color:#1d4a30; color:#8fe0ae; }
[data-theme="dark"] .store-banner[data-state="closed"]{ background:#2b1411; border-color:#5a2620; color:#ff9d94; }
[data-theme="dark"] .store-banner[data-state="paused"]{ background:#2b2209; border-color:#5c4a14; color:#f5cf6b; }
[data-theme="dark"] .store-lock-note{ background:#2b2209; border-color:#5c4a14; color:#f5cf6b; }
@media (max-width:480px){ .store-banner{ font-size:13px; padding:8px 12px; } }

/* ===== v17: small polish ===== */
.brand-logo{ filter:drop-shadow(0 2px 4px rgba(0,0,0,.18)) !important; }
.page-head{ padding:clamp(22px,3.2vw,34px) 0 !important; }
.cat-count{ margin-left:8px; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:700; line-height:18px; background:rgba(0,0,0,.07); color:inherit; }
.cat-pill.active .cat-count{ background:rgba(255,255,255,.22); }
[data-theme="dark"] .cat-count{ background:rgba(255,255,255,.1); }
.search-box input{ text-overflow:ellipsis; }

/* ===== v18: compact, non-blocking cart toast (mobile first, safe-area aware, light + dark) ===== */
.toast{
  left:50%; right:auto; top:auto;
  bottom:calc(max(12px, env(safe-area-inset-bottom)) + 6px);
  width:max-content; max-width:min(calc(100vw - 24px), 380px);
  padding:8px 8px 8px 14px; gap:10px; border-radius:14px;
  font-size:14px; line-height:1.35; font-weight:600;
  box-shadow:0 8px 22px rgba(20,10,4,.22);
  pointer-events:none; transform:translate(-50%,14px);
  transition:opacity .2s ease, transform .2s ease;
  z-index:400;
}
.toast.show{ transform:translate(-50%,0); }
.toast svg{ flex:0 0 auto; width:16px; height:16px; }
.toast-msg{ min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:left; }
.toast-link{ flex:0 0 auto; min-height:36px; padding:6px 13px; margin-left:2px; pointer-events:auto; }
.toast-x{
  pointer-events:auto; flex:0 0 auto; width:32px; height:32px; min-height:32px; margin-left:2px;
  border:0; border-radius:999px; background:rgba(255,255,255,.12); color:inherit; font-size:18px; line-height:1; cursor:pointer;
}
.toast-x:focus-visible, .toast-link:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (min-width:600px){ .toast{ bottom:26px; } }
[data-theme="dark"] .toast{ background:#2a1f18; border:1px solid #3d3026; color:#f6ede4; }
@media (prefers-reduced-motion:reduce){ .toast{ transition:none; transform:translate(-50%,0); } }

/* ===== v19: mobile touch targets (44px minimum) and calmer header on phones ===== */
@media (max-width:600px){
  .site-header .theme-toggle, .site-header .icon-btn, .site-header .hamburger{
    width:44px; height:44px; min-width:44px; min-height:44px;
  }
  .site-header .header-actions{ gap:8px; }
  .card .btn.btn-sm{ min-height:44px; height:auto; padding-top:10px; padding-bottom:10px; }
}
/* the header itself stays put; only its buttons grow, so the layout does not move */
.site-header .hamburger, .site-header .theme-toggle, .site-header .icon-btn{ touch-action:manipulation; }

/* ===== v19b: restrained interaction feedback (transform/opacity only; off for reduced motion) ===== */
.card .btn.btn-sm{ transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.card .btn.btn-sm:active:not(:disabled){ transform:scale(.97); filter:brightness(.96); }
@media (hover:hover) and (min-width:900px){
  .card{ transition:transform .2s ease, box-shadow .2s ease; }
  .card:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(40,20,8,.12); }
}
@media (prefers-reduced-motion:reduce){
  .card, .card .btn.btn-sm, .toast{ transition:none !important; }
  .card:hover{ transform:none; }
  .card .btn.btn-sm:active:not(:disabled){ transform:none; }
  .hero-video{ transition:none !important; }
}

/* ===== v20: tracking page – warning note when the status could not be confirmed with the server ===== */
.track-note.is-warning{ padding:10px 14px; border-radius:12px; background:#fff6e0; border:1px solid #f3dfa6; color:#6b4a00; }
[data-theme="dark"] .track-note.is-warning{ background:#2b2209; border-color:#5c4a14; color:#f5cf6b; }

/* ===== v20: admin order filters – messages ===== */
.filter-note{ margin:0 0 10px; padding:8px 12px; border-radius:10px; background:#fff6e0; border:1px solid #f3dfa6; color:#6b4a00; font-size:13.5px; }
.filter-sub{ margin:-4px 0 12px; font-size:12.5px; color:var(--muted); }
[data-theme="dark"] .filter-note{ background:#2b2209; border-color:#5c4a14; color:#f5cf6b; }

/* ===== v20: mobile – hero feature row and stats band (desktop untouched) =====
   Cause: the stats card is the same element as the page container (class="container stats-grid"), so on phones it ran
   edge to edge with the gutter as inner padding, and it overlaps the hero by 34px while the hero only had 26px of bottom
   padding, so the last hero row was cut off. */
@media (max-width:760px){
  .hero{ padding-bottom:64px; }                                  /* 34px overlap of the stats card + 30px of breathing room */
  .stats-band .stats-grid{
    width:auto; padding:0; margin-left:var(--gutter,16px); margin-right:var(--gutter,16px);
    border-radius:18px; box-shadow:0 12px 28px rgba(0,0,0,.28);
  }
  .stat{ padding:18px 10px; display:flex; flex-direction:column; justify-content:center; }
  .stat b{ font-size:clamp(24px,7vw,30px); }
  .stat span{ margin-top:4px; font-size:12.5px; line-height:1.35; }
}
@media (max-width:420px){
  /* three short facts: the long one gets its own row, the other two share the next row; nothing wraps into an orphan */
  .hero-trust{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; margin-top:26px; }
  .hero-trust li, .hero-trust li + li{ padding:0; border-left:0; min-width:0; }
  .hero-trust li:first-child{ grid-column:1 / -1; }
}
@media (min-width:761px){
  /* same overlap on tablets/laptops: the stats card pulls up 34px, so keep at least ~20px between it and the hero's last row */
  .hero{ padding-bottom:calc(34px + clamp(20px,2vw,40px)); }
}
@media (min-width:761px) and (max-width:1240px){
  .stats-band .stats-grid{ width:calc(100% - 2 * var(--gutter,24px)); padding:0; margin-left:auto; margin-right:auto; }
}