/* Build a Gift — theme3: "The Gift Market" — a marketplace look inspired by
   Etsy's structure (search-first hero, trending grid, shop spotlights,
   category browsing) but with its own identity: deep plum + antique gold on
   warm parchment, not orange/coral. Playfair Display + Inter + Caveat. */
:root{
  /* Accent is now a bright yellow-green — text ON it must be dark (--dark),
     never white. --plum-deep split in two: --dark is the actual dark
     surface color for large sections (footer/topbar/band, still dark with
     light text, unrelated to the accent hue now); --plum-hover is a
     darkened shade of the accent itself, for hovering a green button
     without jumping to an unrelated dark color mid-interaction.
     --plum-text exists because #cee87b as TEXT on this page's near-white
     background measures 1.3:1 contrast (WCAG AA needs 4.5:1) — nearly
     unreadable. It's a 55%-darkened olive shade of the same hue (5.8:1,
     passes AA) used ONLY where --plum was being used as a text color on a
     light background (link hovers, active states, etc.); backgrounds,
     borders, and tints keep using the bright --plum directly since those
     don't need text-contrast math. */
  --plum:#cee87b; --plum-hover:#a9be65; --plum-text:#5d6837; --plum-soft:#e9f5c4; --plum-tint:#f4fae2;
  --dark:#170e15;
  --gold:#b6852f; --gold-deep:#8f6620; --gold-soft:#f6e9c9; --gold-bright:#e8b04b;
  --evergreen:#2f5d4c; --evergreen-soft:#e3ede8;
  --ink:#241521; --ink-2:#5a4d57; --muted:#8d7f89; --line:#e7dde3;
  --bg:#fdfbf7; --panel:#ffffff; --cream:#f4ead9; --greige:#ece0cc;
  --r:18px; --r-sm:12px; --r-lg:26px; --r-pill:999px;
  --sh-sm:0 1px 3px rgba(36,21,33,.06),0 6px 18px -12px rgba(36,21,33,.16);
  --sh:0 16px 42px -18px rgba(36,21,33,.28);
  --wrap:1440px;
  --display:"Playfair Display",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --script:"Caveat",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.62;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:100;border-radius:8px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;justify-content:center;font-family:var(--sans);
  font-weight:700;border:0;border-radius:var(--r-pill);padding:.9em 1.6em;cursor:pointer;font-size:.96rem;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .22s,background .22s,color .2s;line-height:1}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--plum);color:var(--dark);box-shadow:0 10px 24px -12px rgba(206,232,123,.55)}
.btn-primary:hover{background:var(--plum-hover)}
.btn-ghost{background:var(--gold-soft);color:var(--gold-deep)}
.btn-ghost:hover{background:#eeddab}
.btn-green{background:transparent;color:var(--plum-text);border:1.5px solid var(--line)}
.btn-green:hover{border-color:var(--plum-text);background:var(--plum-tint)}
.btn-block{display:flex;width:100%}
.btn-sm{padding:.62em 1.1em;font-size:.86rem}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover{transform:none}

.pink-script{font-family:var(--script);color:var(--gold-deep);font-weight:400;line-height:.9}

/* Top bar + header */
.topbar{background:var(--dark);color:#f3ede0;font-size:.8rem;text-align:center;letter-spacing:.02em}
.topbar .wrap{padding:9px 22px}
.site-head{position:sticky;top:0;z-index:50;background:rgba(253,251,247,.86);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;gap:26px;padding:15px 22px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:1.4rem}
/* Logo sizing. THE REAL FIX WAS IN THE ASSET, NOT THE CSS — read this before
   trying to make the logo bigger with CSS again.
   Three CSS techniques were tried and all "did nothing" visually: a
   percentage-width box, transform:scale(), and position:absolute at a larger
   size. None of them were broken; the problem was that the source SVG
   (gift-box-darker-green.svg) is a 1024x1024 canvas whose artwork only spans
   x 182-863 / y 131-896 — i.e. ~33% of the canvas is transparent padding. So
   every px added to the box mostly inflated empty space, and object-fit:contain
   letterboxed whatever was left. At 72px the visible gift box was only ~48px.
   Fix: gift-box-darker-green-tight.svg is the same artwork with the viewBox
   cropped to its true bounds (128 119 789 789), so the drawing fills 86% of
   the canvas instead of 66% — ~30% larger at an identical box size. With that,
   plain width/height works normally and no positioning tricks are needed.
   If a NEW logo file ever looks smaller than its box suggests, check its
   viewBox padding first (see CLAUDE.md for the measuring snippet) rather than
   reaching for CSS workarounds.

   SIZING MODEL — two numbers, and they do different jobs:
   - .brand-mark's box is pinned to 46px to MATCH .nav-search's height. This is
     the only number .head-inner's flex row measures, so keeping it <= 46px
     guarantees the logo can never become the tallest child and can never make
     the header taller. Do not raise it to "make the logo bigger".
   - The image is position:absolute at 83px and centred on that box, so it
     overflows ~18px above AND below equally. Absolutely positioned elements are
     removed from flow entirely, so this size is invisible to the row's height
     math — the artwork simply overlays the header. Centring (rather than
     anchoring to one edge) is what keeps the overflow symmetric so the icon
     doesn't appear shifted up or down.
   To resize the logo: change ONLY the 83px pair below. 46px stays put. */
.brand-mark{display:inline-flex;position:relative;width:46px;height:46px;font-size:1.5rem}
.brand-mark svg,.brand-mark img{position:absolute;top:50%;left:50%;width:83px;height:83px;
  transform:translate(-50%,-50%);object-fit:contain}
.brand-name{letter-spacing:-.01em}
.brand-a{color:var(--plum-text)}
.main-nav{display:flex;gap:30px;margin-left:auto;font-weight:600;font-size:.95rem}
.main-nav a{padding:6px 2px;position:relative;color:var(--ink-2)}
.main-nav a:hover,.main-nav a.active{color:var(--plum-text)}
.main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--gold-bright);border-radius:2px}
.cart-link{position:relative;display:flex;align-items:center;gap:8px;font-weight:700;padding:9px 16px;
  border:1.5px solid var(--line);border-radius:var(--r-pill);transition:.2s}
.cart-link:hover{border-color:var(--plum-text);color:var(--plum-text)}
.cart-badge{position:absolute;top:-8px;right:-8px;background:var(--plum);color:var(--dark);font-size:.68rem;font-weight:800;
  min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

/* --- Etsy-style market header (theme3 only) --------------------------- */
.market-head .head-inner{gap:20px;padding:16px 22px;justify-content:center}
.market-head .brand{flex-shrink:0}

.cat-menu{position:relative;flex-shrink:0}
.cat-menu-btn{display:flex;align-items:center;gap:8px;background:none;border:0;font:inherit;font-weight:700;
  font-size:.95rem;color:var(--ink);cursor:pointer;padding:10px 4px}
.cat-menu-btn svg{width:19px;height:19px}
.cat-menu-panel{position:absolute;top:calc(100% + 10px);left:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh);padding:8px;min-width:220px;max-height:min(70vh,560px);overflow-y:auto;
  display:none;flex-direction:column;z-index:60}
.cat-menu.open .cat-menu-panel{display:flex}
.cat-menu-panel a{padding:10px 14px;border-radius:8px;font-weight:600;font-size:.92rem;color:var(--ink-2)}
.cat-menu-panel a:hover{background:var(--plum-tint);color:var(--plum-text)}
.cat-menu-panel .cat-menu-all{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;margin-bottom:6px;color:var(--plum-text)}
.cat-menu-label{margin:10px 14px 4px;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cat-menu-label:first-child{margin-top:2px}

.nav-search{width:100%;max-width:760px;display:flex;align-items:center;background:var(--panel);
  border:1.5px solid var(--ink);border-radius:var(--r-pill);overflow:hidden;transition:border-color .2s;height:46px}
.nav-search:focus-within{border-color:var(--plum-text)}
.nav-search input{flex:1;height:100%;border:0;background:none;padding:0 22px;font:inherit;font-size:.95rem;color:var(--ink);min-width:0}
.nav-search input:focus{outline:0}
.nav-search input::placeholder{color:var(--muted)}
.nav-search button{border:0;background:var(--plum);color:var(--dark);width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex-shrink:0;transition:background .2s;margin-right:4px;border-radius:50%}
.nav-search button:hover{background:var(--plum-hover)}
.nav-search button svg{width:18px;height:18px}

.signin-link{flex-shrink:0;font-weight:700;font-size:.95rem;color:var(--ink);padding:9px 6px;white-space:nowrap}
.signin-link:hover{color:var(--plum-text)}
.market-head .cart-link{border:0;padding:9px;flex-shrink:0}
.market-head .cart-link .cart-ico{width:24px;height:24px;display:flex}
.market-head .cart-link .cart-ico svg{width:100%;height:100%}

/* Collapses on scroll (assets/js/main.js toggles .subnav-collapsed on
   .market-head past a small scroll threshold) and expands again back at the
   top. max-height transitions where plain height:auto can't; the number
   just needs to comfortably clear the row's real rendered height. */
.subnav-row{max-height:60px;overflow:hidden;transition:max-height .28s ease,opacity .22s ease}
.market-head.subnav-collapsed .subnav-row{max-height:0;opacity:0}
.market-subnav{display:flex;justify-content:center;gap:26px;margin:0;padding:11px 0;font-weight:600;font-size:.9rem;overflow-x:auto}
.market-subnav a{white-space:nowrap;color:var(--ink-2);display:flex;align-items:center}

@media(max-width:900px){
  .market-head .head-inner{flex-wrap:wrap}
  .nav-search{order:3;flex-basis:100%;max-width:none;margin-top:2px}
  .cat-menu-btn span{display:none}
  .signin-link{display:none}
  /* Centering a row that's wider than the viewport just clips both ends
     evenly instead of leaving a scrollable edge to reach for — left-align
     it here so the horizontal scroll (overflow-x:auto, set above) actually
     starts from a visible edge on narrow screens. */
  .market-subnav{justify-content:flex-start}
}

/* Sections */
.section{padding:82px 0}
.section-tight{padding:50px 0}
.section-alt{background:var(--cream)}
.section-head{text-align:center;max-width:680px;margin:0 auto 46px}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}

/* Etsy-style row header: left-aligned title, "View all" pill on the right —
   used for the market's scannable listing rows instead of the centered
   .section-head above. */
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
.row-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0}
.view-all{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.88rem;
  color:var(--ink);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:9px 18px;white-space:nowrap;transition:.2s}
.view-all:hover{border-color:var(--plum-text);color:var(--plum-text)}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.73rem;font-weight:700;color:var(--gold-deep);
  font-family:var(--sans);margin-bottom:14px;display:inline-block}
.lead{color:var(--ink-2);font-size:1.08rem}

/* Hero — market stall: search-first, illustrated gift-stall SVG on the right */
.hero{position:relative;background:
    radial-gradient(120% 100% at 100% 0%, rgba(232,176,75,.14), transparent 55%),
    var(--bg);
  overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;padding-top:72px;padding-bottom:80px}
.hero-eyebrow{color:var(--gold-deep);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.76rem}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.2rem);margin:.22em 0 .3em;font-weight:700;letter-spacing:-.02em}
.hero p{font-size:1.1rem;color:var(--ink-2);max-width:46ch;line-height:1.7}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}

/* Hero search bar — the marketplace's front door */
.hero-search{display:flex;gap:0;margin-top:30px;max-width:560px;background:var(--panel);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:6px;box-shadow:var(--sh-sm)}
.hero-search input[type="text"],.hero-search input[type="search"]{flex:1;border:0;background:none;padding:12px 18px;
  font:inherit;font-size:1rem;color:var(--ink);min-width:0}
.hero-search input:focus{outline:0}
.hero-search button{border:0;background:var(--plum);color:var(--dark);font-weight:700;border-radius:var(--r-pill);
  padding:0 26px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .2s}
.hero-search button:hover{background:var(--plum-hover)}
.hero-search button svg{width:18px;height:18px}
.hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hero-chips a{font-size:.83rem;font-weight:600;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);
  padding:7px 14px;border-radius:var(--r-pill);transition:.18s}
.hero-chips a:hover{border-color:var(--gold-bright);color:var(--gold-deep)}
.hero-trust{display:flex;gap:26px;margin-top:28px;flex-wrap:wrap;color:var(--ink-2);font-size:.9rem;font-weight:600;align-items:center}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust .dot{width:4px;height:4px;border-radius:50%;background:var(--muted)}
.hero-trust svg{width:17px;height:17px;color:var(--gold-bright)}

/* Illustrated gift-stall hero art (SVG, no external images) */
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:420px}
.hero-stage{position:relative;width:100%;aspect-ratio:1.05;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,#efdff0,#f6e6cf);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center}
.hero-stage svg{width:82%;height:82%}
.hero-badges{position:absolute;inset:0;pointer-events:none}
.floaty{position:absolute;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:13px 17px;box-shadow:var(--sh);font-weight:700;font-size:.86rem;color:var(--ink)}
.floaty .pink-script{font-size:1.5rem;display:block;line-height:.8;margin-bottom:3px}
.floaty small{display:block;color:var(--muted);font-weight:500;font-size:.76rem}
.floaty.f1{left:-5%;bottom:6%}
.floaty.f2{right:-4%;top:10%;display:flex;align-items:center;gap:8px}
.floaty.f3{display:none}

/* Feature columns */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.feature{text-align:center;padding:12px 14px}
.feature .ico{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--plum-tint);border:1.5px solid var(--plum-text);color:var(--plum-text)}
.feature .ico svg{width:26px;height:26px}
.feature h3{font-size:1.16rem;margin-bottom:.4em}
.feature p{color:var(--muted);font-size:.93rem;margin:0}

/* Product grid + cards */
.grid{display:grid;gap:26px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.24s;position:relative}
.card:hover{box-shadow:var(--sh);transform:translateY(-4px);border-color:transparent}
.card-media{aspect-ratio:1;background:var(--cream);position:relative;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.card:hover .card-media img{transform:scale(1.04)}
.card-tag{position:absolute;top:13px;left:13px;background:var(--dark);color:#fff;font-size:.66rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill)}
.card-tag.oos{background:var(--muted)}
.card-tag.free{background:var(--gold-deep)}
.card-body{padding:18px 18px 6px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-cat{font-size:.66rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:800}
.card-title{font-family:var(--display);font-size:1.08rem;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-title a:hover{color:var(--plum-text)}
/* Real price only (no fabricated "was" price) styled in Etsy's own bold
   sale-green, since that's the read a shopper expects from this layout —
   .was is kept for a future real discount system, unused until then. */
.card-price{font-weight:800;color:var(--evergreen);margin-top:auto;font-size:1.04rem}
.card-price .was{color:var(--muted);text-decoration:line-through;font-weight:500;margin-left:6px;font-size:.9em}
.card-actions{padding:14px 18px 18px}
.card-seller a{color:var(--gold-deep);font-weight:600}
.card-seller a:hover{text-decoration:underline}

/* Promo banners */
.promo{position:relative;border-radius:var(--r-lg);padding:60px 44px;color:#f6efe3;text-align:center;overflow:hidden;background:var(--plum)}
.promo::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 88% -10%,rgba(232,176,75,.22),transparent 60%)}
.promo>*{position:relative}
.promo h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem)}
.promo .eyebrow{color:#e9c98e}
.promo.green{background:var(--evergreen)}
.promo .btn{margin-top:16px}

/* Tagline band */
.band{background:var(--dark);color:#f3ede0;text-align:center;padding:74px 0;position:relative;overflow:hidden}
.band h2{color:#fff;font-size:clamp(1.7rem,4vw,2.6rem)}
.band .pink-script{font-size:clamp(2.8rem,7vw,4.4rem);color:var(--gold-bright);display:block}

/* Category tiles (also used for "Shop by category") */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tile{position:relative;border-radius:var(--r);overflow:hidden;min-height:250px;display:flex;
  align-items:flex-end;padding:28px;color:#fff;transition:.24s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 32%,rgba(36,21,33,.66))}
.tile>div{position:relative;z-index:1}
.tile-bg{position:absolute;inset:0}
.tile h3{color:#fff;font-size:1.5rem;margin-bottom:.4em}
.tile .btn{background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(4px)}
.tile .btn:hover{background:rgba(255,255,255,.32)}
.tile a{position:absolute;inset:0;z-index:2}

/* Category chips (compact "shop by category" row, marketplace-style) */
.cat-row{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.cat-pill{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 12px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);transition:.2s;text-align:center}
.cat-pill:hover{border-color:var(--gold-bright);box-shadow:var(--sh-sm);transform:translateY(-3px)}
.cat-pill .cat-ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--plum-tint);color:var(--plum-text)}
.cat-pill .cat-ico svg{width:24px;height:24px}
.cat-pill span{font-weight:700;font-size:.88rem}

/* Steps / how it works */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.step{text-align:center;padding:8px}
.step-ico{width:62px;height:62px;border-radius:50%;border:1.5px solid var(--plum-text);color:var(--plum-text);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.step-ico svg{width:26px;height:26px}
.step-n{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:700;margin-bottom:4px}
.step h3{font-size:1.14rem;margin-bottom:.35em}
.step p{color:var(--muted);font-size:.9rem;margin:0}
.step-num{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--plum-text);color:var(--plum-text);background:transparent;
  font-family:var(--display);font-weight:700;font-size:1.35rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}

/* Shop spotlight cards (featured sellers) */
.shop-spot{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;
  display:flex;flex-direction:column;gap:12px;transition:.2s}
.shop-spot:hover{box-shadow:var(--sh);transform:translateY(-4px)}
.shop-spot-head{display:flex;align-items:center;gap:14px}
.shop-spot-badge{width:54px;height:54px;border-radius:50%;background:linear-gradient(150deg,var(--plum),var(--plum-hover));
  color:var(--dark);display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-weight:700;font-size:1.3rem;flex:none}
.shop-spot h3{margin:0;font-size:1.15rem}
.shop-spot .muted-line{color:var(--muted);font-size:.86rem;margin:0}
.shop-spot p.bio{color:var(--ink-2);font-size:.92rem;margin:0;flex:1}
.shop-empty{background:var(--plum-tint);border:1.5px dashed var(--plum-text);border-radius:var(--r);
  padding:44px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.shop-empty h3{margin:0}
.shop-empty p{color:var(--ink-2);max-width:46ch;margin:0}

/* Breadcrumb + page header */
.page-head{background:var(--cream);padding:56px 0 48px;text-align:center;border-bottom:1px solid var(--line)}
.page-head .pink-script{font-family:var(--display);font-style:italic;color:var(--plum-text);font-size:clamp(1.2rem,2.4vw,1.6rem);display:block;margin-bottom:2px}
.page-head h1{font-size:clamp(2.1rem,4vw,3rem)}
.crumb{font-size:.83rem;color:var(--muted);margin-bottom:10px;font-weight:600}
.crumb a:hover{color:var(--plum-text)}

/* Toolbar / filters */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start}
.filters{position:sticky;top:96px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.filters h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-bottom:12px}
.filters ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:2px}
.filters a{display:flex;justify-content:space-between;padding:8px 12px;border-radius:10px;color:var(--ink-2);font-size:.93rem;font-weight:500}
.filters a:hover{background:var(--cream);color:var(--ink)}
.filters a.active{background:var(--plum-soft);color:var(--dark);font-weight:700}
.shop-count{color:var(--muted);font-size:.9rem;margin-bottom:20px}

/* Product detail */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.pdp-media{border-radius:var(--r-lg);overflow:hidden;background:var(--cream);border:1px solid var(--line)}
.pdp h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.pdp .price{font-size:1.7rem;font-weight:800;color:var(--plum-text);margin:10px 0 18px}
.pdp .qty{display:flex;align-items:center;gap:12px;margin:20px 0}
.qty-box{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--panel)}
.qty-box button{background:none;border:0;padding:9px 15px;font-size:1.1rem;cursor:pointer;color:var(--ink)}
.qty-box button:hover{color:var(--plum-text)}
.qty-box input{width:46px;text-align:center;border:0;font-size:1rem;font-weight:700;font-family:var(--sans);background:transparent}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.swatch{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);cursor:pointer;position:relative;transition:.15s}
.swatch.sel{border-color:var(--plum-text);box-shadow:0 0 0 4px var(--plum-soft)}
.meta-list{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--line);padding-top:20px;color:var(--ink-2);font-size:.93rem}
.meta-list li{margin-bottom:9px;display:flex;gap:9px}

/* Cart */
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}
.cart-lines{display:flex;flex-direction:column;gap:16px}
.cline{display:grid;grid-template-columns:92px 1fr auto;gap:18px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:16px}
.cline img{width:92px;height:92px;border-radius:14px;object-fit:cover;background:var(--cream)}
.cline .kit-parts{font-size:.82rem;color:var(--muted);margin-top:4px}
.summary{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;position:sticky;top:96px}
.summary .row{display:flex;justify-content:space-between;margin-bottom:13px;color:var(--ink-2)}
.summary .row.total{color:var(--ink);font-weight:800;font-size:1.25rem;border-top:1px solid var(--line);padding-top:16px;margin-top:8px}
.empty{text-align:center;padding:84px 20px}
.empty .big{font-size:4.2rem;margin-bottom:12px}

/* Forms */
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:.86rem;margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);font:inherit;background:var(--panel);transition:.18s}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--plum-text);box-shadow:0 0 0 4px var(--plum-soft)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.notice{background:var(--gold-soft);border:1px solid #e5cf94;color:var(--gold-deep);padding:15px 17px;border-radius:var(--r-sm);font-size:.92rem}
.notice.info{background:var(--evergreen-soft);border-color:#c9dcd1;color:var(--evergreen)}

/* Footer */
.site-foot{background:var(--dark);color:#c9c2bb;padding:70px 0 0;margin-top:96px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px;padding-bottom:46px}
.foot-brand{color:#fff;font-family:var(--display);font-size:1.5rem;margin-bottom:14px}
.foot-col h4{color:#fff;font-size:.76rem;text-transform:uppercase;letter-spacing:.15em;margin-bottom:16px}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot-col a:hover{color:var(--gold-bright)}
.foot-about p{font-size:.92rem;line-height:1.75}
.foot-soon{color:#93748e;font-size:.82rem}
.socials{display:flex;gap:10px;margin-top:14px}
.socials a{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;transition:.2s}
.socials a:hover{background:var(--gold-bright);color:var(--dark);transform:translateY(-2px)}
.socials svg{width:18px;height:18px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;
  font-size:.85rem;color:#93748e;flex-wrap:wrap;gap:10px}

/* Toast */
.toast{position:fixed;right:22px;bottom:22px;background:var(--dark);color:#fff;padding:15px 20px;border-radius:14px;
  box-shadow:var(--sh);z-index:200;opacity:0;transform:translateY(14px);transition:.28s;font-weight:700}
.toast.show{opacity:1;transform:none}

/* Responsive */
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-search{margin-left:auto;margin-right:auto}
  .hero-chips{justify-content:center}
  .hero-trust{justify-content:center}
  .hero-art{min-height:auto;margin-top:12px}
  .features{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:1fr 1fr}
  .cat-row{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px}
  .pdp,.cart-layout{grid-template-columns:1fr}
  .shop-layout{grid-template-columns:1fr}
  .filters{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .main-nav{position:fixed;inset:66px 0 auto 0;background:var(--panel);flex-direction:column;gap:0;padding:10px 22px;
    border-bottom:1px solid var(--line);box-shadow:var(--sh);margin:0;
    transform:translateY(-130%);visibility:hidden;
    transition:transform .28s ease,visibility 0s .28s}
  .main-nav.open{transform:none;visibility:visible;transition:transform .28s ease,visibility 0s}
  .main-nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:flex}
  .cart-link .cart-amt{display:none}
  .features,.grid-4,.grid-3,.tiles,.form-grid,.steps{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .cat-row{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .section{padding:56px 0}
  .hero-search{flex-direction:column;border-radius:18px;padding:10px}
  .hero-search button{padding:12px;margin-top:6px}
  .floaty.f1{left:4%}
  .floaty.f2{right:2%}
}

/* ---- Build-a-Gift wizard ---- */
.wizard{--wc-w:330px}
.wiz-tabs{list-style:none;display:flex;gap:12px;padding:0;margin:0 0 30px;flex-wrap:wrap}
.wiz-tab{flex:1;min-width:160px;display:flex;align-items:center;gap:11px;background:var(--panel);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:11px 18px;font-weight:700;cursor:pointer;color:var(--muted);transition:.2s;font-size:.95rem}
.wiz-tab .n{width:27px;height:27px;border-radius:50%;background:var(--cream);color:var(--muted);display:flex;
  align-items:center;justify-content:center;font-size:.85rem;flex:none;font-weight:800}
.wiz-tab.active{border-color:var(--plum-text);color:var(--ink)}
.wiz-tab.active .n{background:var(--plum);color:var(--dark)}
.wiz-tab.done .n{background:var(--gold-bright);color:var(--dark)}
.wiz-body{display:grid;grid-template-columns:1fr var(--wc-w);gap:32px;align-items:start}
.wiz-step{display:none;animation:fade .3s ease}
.wiz-step.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.wiz-step h2{font-size:1.6rem;margin-bottom:.3em}
.pick-grid{margin-top:24px}
.pick{position:relative;background:var(--panel);border:2px solid var(--line);border-radius:var(--r-sm);
  padding:13px;cursor:pointer;text-align:center;font:inherit;display:flex;flex-direction:column;gap:8px;transition:.16s}
.pick:hover{border-color:var(--plum-text);transform:translateY(-3px);box-shadow:var(--sh)}
.pick img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--cream)}
.pick-name{font-weight:700;font-size:.92rem}
.pick-price{color:var(--plum-text);font-weight:800;font-size:.9rem}
.pick-check{position:absolute;top:9px;right:9px;width:27px;height:27px;border-radius:50%;background:var(--plum);
  color:#fff;display:none;align-items:center;justify-content:center;font-weight:800}
.pick.sel{border-color:var(--plum-text);box-shadow:0 0 0 3px var(--plum-soft)}
.pick.sel .pick-check{display:flex}
.pick-badge{position:absolute;top:9px;right:9px;z-index:2;min-width:27px;height:27px;padding:0 7px;
  border-radius:999px;background:var(--plum);color:var(--dark);display:none;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.pick-item.sel .pick-badge{display:flex}
.pick-badge.bump{animation:pickBump .28s ease}
@keyframes pickBump{0%{transform:scale(.5)}60%{transform:scale(1.28)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.pick-badge.bump{animation:none}}
.pick-qty{display:inline-flex;align-items:center;gap:8px;justify-content:center;margin-top:2px}
.pick-qty button{width:31px;height:31px;border-radius:50%;border:1.5px solid var(--line);background:var(--panel);
  font-size:1.1rem;cursor:pointer;line-height:1}
.pick-qty button:hover{border-color:var(--plum-text);color:var(--plum-text)}
.pick-qty [data-count]{min-width:22px;font-weight:800}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:32px;
  border-top:1px solid var(--line);padding-top:24px;flex-wrap:wrap}
.wiz-nav-right{display:flex;gap:10px;align-items:center;margin-left:auto;flex-wrap:wrap}
.wiz-cart{position:sticky;top:96px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden}
.wiz-cart-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
  background:var(--cream);border-bottom:1px solid var(--line)}
.wiz-cart-head h3{margin:0;font-size:1.15rem}
.wiz-cart-toggle{background:none;border:0;font-size:1.1rem;cursor:pointer;display:none}
.wiz-cart-body{max-height:340px;overflow:auto;padding:8px 20px}
.wiz-cart-empty{color:var(--muted);font-size:.9rem;padding:24px 0;text-align:center}
.wiz-cart-list{list-style:none;margin:0;padding:0}
.wc-line{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:.9rem}
.wc-kind{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:#fff;
  background:var(--plum);border-radius:6px;padding:2px 7px}
.wc-name{font-weight:600}
.wc-price{font-weight:800;white-space:nowrap}
.wiz-cart-foot{padding:18px 20px;border-top:1px solid var(--line)}
.wiz-cart-total{display:flex;justify-content:space-between;font-size:1.1rem;margin-bottom:4px;font-weight:700}
.wiz-cart-total strong{color:var(--plum-text)}
.wiz-cart-note{font-size:.78rem;color:var(--muted);margin:8px 0 14px}
.wiz-cart.collapsed .wiz-cart-body,.wiz-cart.collapsed .wiz-cart-foot{display:none}
@media(max-width:960px){
  .wiz-body{grid-template-columns:1fr}
  .wiz-cart{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:18px 18px 0 0;z-index:40;margin:0}
  .wiz-cart-toggle{display:block}
  .wiz-cart-body{max-height:200px}
  .pick-grid.grid-4{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:520px){.pick-grid.grid-4,.pick-grid.grid-3{grid-template-columns:repeat(2,1fr)}}

/* drawer palette (theme3). --cd-accent is used as TEXT everywhere except
   .cd-count (a background badge, handled separately below with --dark
   text) so it points at --plum-text, not the bright --plum, for the same
   contrast reason documented on --plum-text above. */
:root{--cd-bg:var(--panel);--cd-line:var(--line);--cd-ink:var(--ink);--cd-muted:var(--muted);
  --cd-accent:var(--plum-text);--cd-soft:var(--cream);--cd-display:var(--display)}

/* ---- Slide-out cart drawer ---- */
body.cd-lock{overflow:hidden}
.cd-overlay{position:fixed;inset:0;background:rgba(36,21,33,.45);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .28s ease;z-index:90}
.cd-overlay.show{opacity:1}
.cd{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);z-index:91;
  background:var(--cd-bg);border-left:1px solid var(--cd-line);
  display:flex;flex-direction:column;transform:translateX(102%);
  transition:transform .3s cubic-bezier(.22,.8,.3,1);box-shadow:-18px 0 46px -22px rgba(36,21,33,.5)}
.cd.open{transform:none}
.cd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--cd-line);flex:none}
.cd-head h2{margin:0;font-size:1.15rem;display:flex;align-items:center;gap:9px}
.cd-count{background:var(--plum);color:var(--dark);font-family:var(--sans);font-size:.72rem;font-weight:800;
  min-width:22px;height:22px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.cd-x{background:none;border:0;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--cd-muted);padding:0 4px}
.cd-x:hover{color:var(--cd-ink)}
.cd-inner{flex:1;display:flex;flex-direction:column;min-height:0}
.cd-items{flex:1;overflow-y:auto;padding:6px 20px}
.cd-item{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--cd-line)}
.cd-item img{width:72px;height:72px;border-radius:10px;object-fit:cover;background:var(--cd-soft)}
.cd-name{font-family:var(--cd-display);font-weight:700;font-size:.98rem;line-height:1.3}
.cd-parts{font-size:.78rem;color:var(--cd-muted);margin-top:3px;line-height:1.4}
.cd-edit{display:inline-block;margin-top:5px;font-size:.78rem;font-weight:700;color:var(--cd-accent);text-decoration:underline}
.cd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.cd-qty{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--cd-line);border-radius:999px;overflow:hidden}
.cd-qty button{background:none;border:0;width:30px;height:30px;font-size:1.05rem;cursor:pointer;color:var(--cd-ink);line-height:1}
.cd-qty button:hover{color:var(--cd-accent)}
.cd-qty span{min-width:24px;text-align:center;font-weight:800;font-size:.9rem}
.cd-price{font-weight:800}
.cd-remove{background:none;border:0;padding:0;margin-top:7px;font:inherit;font-size:.78rem;
  color:var(--cd-muted);text-decoration:underline;cursor:pointer}
.cd-remove:hover{color:#c0392b}
.cd-foot{flex:none;padding:18px 20px;border-top:1px solid var(--cd-line);background:var(--cd-soft)}
.cd-sub{display:flex;justify-content:space-between;align-items:baseline;font-size:1.1rem;margin-bottom:4px}
.cd-sub strong{font-size:1.3rem;color:var(--cd-accent)}
.cd-note{font-size:.76rem;color:var(--cd-muted);margin:6px 0 13px}
.cd-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 26px;gap:2px}
.cd-empty-ico{font-size:2.6rem;margin-bottom:6px}
.cd-empty p{margin:0 0 4px}
.cd-muted{color:var(--cd-muted);font-size:.9rem;margin-bottom:16px!important}
.cd-empty .btn{max-width:260px}
@media(max-width:520px){ .cd{width:100%} }

/* Stripe embedded checkout */
.stripe-embed{min-height:520px}
.stripe-loading{padding:44px 20px;text-align:center;color:var(--cd-muted,#777);font-size:.95rem}
#shipping-element,#payment-element{margin-bottom:4px}
#co-pay[disabled]{opacity:.6;cursor:progress}