/* Preview-only art-deco header (built only when HOP_HEADER_V2=1).
   Black + gold linework, glowing gold arches, neon-outlined nav pills. */
header.site{
  --gold:#D9B26A; --gold-hi:#F3D48F; --gold-lo:#8C6B2F;
  --hdr-bg:#050403; --hdr-ink:#F3D48F; --hdr-ink-soft:#D9B26A; --hdr-line:rgba(217,178,106,.45);
  background:#050403;border-bottom:1px solid var(--gold-lo);
  box-shadow:0 1px 0 rgba(243,212,143,.35),0 6px 28px -10px rgba(217,178,106,.55)}
header.site::before{
  background:
    radial-gradient(ellipse 40% 140% at 50% 0%, rgba(217,178,106,.22), transparent 70%),
    radial-gradient(circle at 0% 100%, rgba(217,178,106,.28), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(217,178,106,.28), transparent 32%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(217,178,106,.10) 46px 47px)}
nav.links a,.navbtns .icon-btn{color:var(--gold)}
nav.links a{
  padding:9px 20px;border:1px solid rgba(217,178,106,.55);border-radius:2px;
  letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;
  background:linear-gradient(180deg,rgba(217,178,106,.12),rgba(217,178,106,.03));
  box-shadow:0 0 10px rgba(217,178,106,.25),inset 0 0 8px rgba(217,178,106,.10);
  transition:box-shadow .2s,color .2s,border-color .2s}
nav.links a:hover{color:#fff3d1;border-color:var(--gold-hi);
  box-shadow:0 0 18px rgba(243,212,143,.6),inset 0 0 12px rgba(243,212,143,.2)}
header.site .btn-primary--nav{
  background:linear-gradient(180deg,#F3D48F,#B98A3E);color:#140F05;border:1px solid #F3D48F;
  border-radius:2px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
header.site .btn-primary--nav:hover{box-shadow:0 0 18px rgba(243,212,143,.6)}
.category-nav{border-bottom:1px solid var(--gold-lo)}
.category-nav a{letter-spacing:.14em;color:var(--accent-text);font-weight:700}
.category-nav a:hover,.category-nav a:first-child{color:var(--ink)}
:root[data-theme="dark"] .category-nav a{color:#D9B26A}
:root[data-theme="dark"] .category-nav a:hover,:root[data-theme="dark"] .category-nav a:first-child{color:#fff3d1;text-shadow:0 0 10px rgba(243,212,143,.7)}
.logo-header{filter:drop-shadow(0 0 8px rgba(217,178,106,.45))}

/* ---- Site-wide palette from the gold header (replaces the old muted brass) ---- */
:root{
  --accent:#C9A050; --accent-text:#8A6420; --accent-ink:#140F05; --accent-soft:#F6EBCB;
  --line:rgba(120,90,30,.20);
  --band-bg:#0A0806;
}
:root[data-theme="dark"]{
  --bg:#0B0A08; --bg-elevated:#15120D; --bg-sunken:#070605;
  --accent:#D9B26A; --accent-text:#E4BF78; --accent-ink:#140F05; --accent-soft:#3A2F17;
  --line:rgba(217,178,106,.20);
  --band-bg:#0A0806;
  --card-1:#15120D; --card-2:#15120D; --card-3:#15120D; --card-4:#15120D;
}
:root[data-theme="dark"] body::before{background:
  radial-gradient(circle at 12% 8%, rgba(217,178,106,.14), transparent 40%),
  radial-gradient(circle at 88% 92%, rgba(217,178,106,.11), transparent 42%)}
.btn-primary{background:linear-gradient(180deg,#F3D48F,#C9A050 60%,#B98A3E);color:#140F05;border-color:#E4BF78;
  letter-spacing:.06em;font-weight:700}
.btn-primary:hover{box-shadow:0 0 18px rgba(243,212,143,.5)}

/* ================= One texture: gold vertical lines + glow (no dots) =================
   Header, dark bands (About Us etc.), pre-footer and footer all share it. */
.band::after,footer::after,header.site::after,:root body::after{background-image:none!important;opacity:0!important}
.band::before,footer::before{background:
    radial-gradient(ellipse 45% 130% at 50% 0%, rgba(217,178,106,.20), transparent 70%),
    radial-gradient(circle at 0% 100%, rgba(217,178,106,.26), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(217,178,106,.26), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(217,178,106,.10) 46px 47px)!important}
.band,footer{border-top:1px solid var(--gold-lo,#8C6B2F)}
.band-eyebrow{color:#E4BF78;text-shadow:0 0 12px rgba(243,212,143,.45)}

/* ================= One interaction language: gold outline + glow on hover =================
   Same treatment as the header nav buttons, reused by cards, chips, CTAs. */
.card{transition:box-shadow .25s ease,border-color .25s ease}
.card:hover{border-color:#E4BF78;
  box-shadow:0 0 0 1px rgba(228,191,120,.55),0 0 22px rgba(217,178,106,.45),0 18px 34px -18px var(--shadow)}
.card-cta{border-color:rgba(201,160,80,.55);color:var(--accent-text);letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;
  background:linear-gradient(180deg,rgba(217,178,106,.12),rgba(217,178,106,.03))}
.card:hover .card-cta{background:linear-gradient(180deg,#F3D48F,#B98A3E);color:#140F05;border-color:#F3D48F;
  box-shadow:0 0 14px rgba(243,212,143,.5)}
.tag-chip:hover{border-color:#E4BF78;color:var(--ink);box-shadow:0 0 12px rgba(217,178,106,.35)}
.tag-chip.active{background:linear-gradient(180deg,#F3D48F,#B98A3E);color:#140F05;border-color:#F3D48F}
.tag-chip.active .count,.filter-row--multi .tag-chip.active .count{color:rgba(20,15,5,.6)}
.filter-row--multi .tag-chip.active{background:linear-gradient(180deg,#F3D48F,#B98A3E);border-color:#F3D48F}
.btn-ghost{color:var(--accent-text);border-bottom-color:var(--accent)}
.btn-ghost:hover{opacity:1;text-shadow:0 0 10px rgba(217,178,106,.5)}
input:focus,textarea:focus,select:focus{outline:none;border-color:#E4BF78!important;box-shadow:0 0 0 1px rgba(228,191,120,.5),0 0 14px rgba(217,178,106,.35)}

/* ================= Readability: secondary text on dark =================
   Warm, brighter greys so labels/chips/counts read clearly on the dark theme. */
:root[data-theme="dark"]{--ink-soft:#CFC6B2; --ink-faint:#A89F8B}
:root[data-theme="dark"] .filter-label,:root[data-theme="dark"] .filter-label::after{color:#D9B26A}
:root[data-theme="dark"] .tag-chip{color:#E2DAC7;border-color:rgba(217,178,106,.32)}
:root[data-theme="dark"] .tag-chip .count{color:#A89F8B}
.filter-label{color:var(--accent-text)}
.tag-chip{border-color:rgba(201,160,80,.35)}

/* ================= Hearts (My list) — gold glass, same glow language ================= */
.shortlist-btn{background:rgba(10,8,6,.55);color:#E4BF78;border:1px solid rgba(228,191,120,.6);
  transition:background .2s,box-shadow .2s,color .2s,border-color .2s}
.shortlist-btn:hover{background:rgba(10,8,6,.75);color:#fff3d1;border-color:#F3D48F;box-shadow:0 0 14px rgba(243,212,143,.6)}
.shortlist-btn.active{background:linear-gradient(180deg,#F3D48F,#B98A3E);color:#140F05;border-color:#F3D48F;box-shadow:0 0 12px rgba(243,212,143,.5)}
.shortlist-btn.active svg{fill:#140F05}
.shortlist-btn--labeled{background:none;color:var(--accent-text);border-color:rgba(201,160,80,.55)}
.shortlist-btn--labeled:hover{color:var(--ink);border-color:#E4BF78;background:none;box-shadow:0 0 12px rgba(217,178,106,.4)}
.shortlist-btn--labeled.active{background:linear-gradient(180deg,#F3D48F,#B98A3E);color:#140F05;border-color:#F3D48F}
.card-tag-overlay{background:rgba(10,8,6,.55);color:#F3D48F;border:1px solid rgba(228,191,120,.4)}

/* ================= Empty states + Clear all + 404 ================= */
.clear-all{color:var(--accent-text);text-decoration:none;border-bottom:1px solid currentColor;letter-spacing:.05em;text-transform:uppercase;font-size:.72rem}
.clear-all:hover{color:var(--ink);text-shadow:0 0 10px rgba(217,178,106,.5)}
:root[data-theme="dark"] .clear-all{color:#E4BF78}
.empty-state{border:1px solid rgba(201,160,80,.35);border-radius:16px;margin:8px 0;padding:56px 24px;
  background:linear-gradient(180deg,rgba(217,178,106,.08),rgba(217,178,106,.02));color:var(--ink-soft)}
.empty-state-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(228,191,120,.6);color:#E4BF78;box-shadow:0 0 18px rgba(217,178,106,.35)}
.empty-state-icon svg{width:24px;height:24px}
.empty-state-title{font-family:var(--serif);font-size:1.3rem;margin:0;color:var(--ink)}
.empty-state p{max-width:44ch}
.empty-state-actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:center}
.shortlist-empty{color:var(--ink-soft)}
.notfound-inner{max-width:640px;margin:0 auto;text-align:center;padding:56px 0 72px;display:flex;flex-direction:column;align-items:center;gap:18px}
.notfound-inner .section-h{margin:0}
.notfound-cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px}
.notfound-cats .tag-chip{text-decoration:none}
.suggest-list{border-color:rgba(201,160,80,.5)!important;background:#0A0806!important}
.suggest-item{color:#F3D48F}
.suggest-item:hover{background:rgba(217,178,106,.14)}
.suggest-cat{color:#B79B62}
.suggest-empty{padding:12px 14px;font-size:.84rem;color:#D9C9A0;line-height:1.45}

/* ================= Round 3 fixes ================= */
/* Hero search: one pill, no inner input box, no native blue clear "x" */
.hero-search-input:focus,input.hero-search-input:focus{border:none!important;box-shadow:none!important;outline:none}
.hero-search-input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.hero-search-form{border-color:rgba(201,160,80,.55);transition:box-shadow .2s,border-color .2s}
.hero-search-form:focus-within{border-color:#E4BF78;box-shadow:0 0 0 1px rgba(228,191,120,.5),0 0 18px rgba(217,178,106,.35)}
.hero-search-form svg{color:var(--accent-text)}
.hero-search-form .btn-primary{border-radius:100px}

/* Dark theme: lifted, warmer surfaces so panels separate from the page */
:root[data-theme="dark"]{
  --bg:#17130E; --bg-elevated:#241E15; --bg-sunken:#1F1911;
  --card-1:#241E15; --card-2:#241E15; --card-3:#241E15; --card-4:#241E15;
  --line:rgba(217,178,106,.26);
  --ink-soft:#D8CFBB; --ink-faint:#B3A98F}
:root[data-theme="dark"] .item-specs{background:#241E15;border:1px solid rgba(217,178,106,.30)}
:root[data-theme="dark"] .item-specs .spec dt{color:#C9B98F}
:root[data-theme="dark"] .item-specs .spec dd{color:#F5EBD2}

/* Active filter chips: dark text on gold, in BOTH themes (specificity beats the dark chip rule) */
:root[data-theme="dark"] .tag-chip.active,:root[data-theme="dark"] .filter-row--multi .tag-chip.active,.tag-chip.active{color:#140F05;font-weight:700}
:root[data-theme="dark"] .tag-chip.active .count,.tag-chip.active .count{color:#140F05;opacity:.75}
:root[data-theme="dark"] .tag-chip .count{color:#D9B26A;font-weight:600}
.tag-chip .count{color:var(--accent-text);font-weight:600}

/* Logo: brighter with a gold halo so it matches the glowing nav */
.logo-header{filter:brightness(1.35) contrast(1.05) drop-shadow(0 0 10px rgba(243,212,143,.65))}

/* Form fields share one height so switching Pickup <-> Delivery never shifts the layout */
.fulfil-detail input,.fulfil-detail .pickup-address,.request-form .field input{height:46px!important;min-height:46px!important;box-sizing:border-box!important}
.pickup-address{display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:0 14px!important;line-height:1.2!important;overflow:hidden;font-size:.9rem}
.pickup-address span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pickup-address a{flex-shrink:0;white-space:nowrap;font-size:.78rem!important;text-decoration:underline;text-underline-offset:2px;color:var(--accent-text)}
:root[data-theme="dark"] .pickup-address a{color:#E4BF78}
.pickup-address a .hide-sm{display:inline}
@media (max-width:520px){.pickup-address a .hide-sm{display:none}}