/* ===========================================================================
   ZILOPE storefront design system
   ---------------------------------------------------------------------------
   Everything is driven by the tokens in :root — a type scale, a spacing scale,
   a neutral ramp and one brand ramp. Components below only ever reference
   tokens, never raw values, so the whole store can be retuned from one block.
   =========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --accent:#0f766e;          /* primary actions, links, active states */
  --accent-hover:#0b5f58;
  --accent-press:#084c46;
  --accent-deep:#0b3c38;     /* hero / footer grounds */
  --accent-soft:#e8f4f2;     /* tinted surfaces */
  --accent-line:#bfdedb;
  --accent-bright:#2dd4bf;   /* highlights on dark only */

  /* --- Neutrals (warm, to sit with the off-white page) ------------------- */
  --ink:#15151d;             /* strongest text */
  --ink-2:#3d3d4a;           /* body text */
  --muted:#6d6d7c;           /* secondary text */
  --faint:#9a9aa8;           /* tertiary text, on-dark body */
  --line:#e7e4de;            /* hairlines */
  --line-strong:#d5d1c9;     /* input borders, dividers that must read */
  --bg:#faf9f6;              /* page */
  --card:#fff;               /* raised surface */
  --sunken:#f1efe9;          /* image wells, inset fields */

  /* --- Status ----------------------------------------------------------- */
  --ok:#0f766e; --ok-bg:#e8f4f2;
  --warn:#9a5b00; --warn-bg:#fdf3e2;
  --err:#a51f1f; --err-bg:#fdecec; --err-line:#f5cfcf;

  /* --- Type scale (1.125 minor third, tuned) ---------------------------- */
  --fs-2xs:.6875rem; --fs-xs:.75rem;  --fs-sm:.8125rem; --fs-md:.875rem;
  --fs-base:.9375rem; --fs-lg:1.0625rem; --fs-xl:1.25rem; --fs-2xl:1.5rem;
  --fs-3xl:1.875rem;

  /* --- Spacing ---------------------------------------------------------- */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;   --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem;   --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;

  /* --- Radii ------------------------------------------------------------ */
  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:15px; --r-xl:22px; --r-full:999px;

  /* --- Elevation (layered, low-opacity — reads as paper, not drop shadow) */
  --sh-1:0 1px 2px rgba(21,21,29,.05), 0 1px 1px rgba(21,21,29,.04);
  --sh-2:0 1px 3px rgba(21,21,29,.06), 0 6px 16px -6px rgba(21,21,29,.10);
  --sh-3:0 2px 6px rgba(21,21,29,.07), 0 18px 36px -12px rgba(21,21,29,.18);
  --sh-4:0 24px 60px -18px rgba(21,21,29,.32);

  /* --- Motion ----------------------------------------------------------- */
  --ease:cubic-bezier(.32,.72,0,1);
  --dur:.18s;

  --shell:1140px;            /* page content max-width */
  --header-h:60px;
}

*, *::before, *::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto,
              "Helvetica Neue", Arial, sans-serif;
  font-size:var(--fs-base);
  line-height:1.55;
  background:var(--bg);
  color:var(--ink-2);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1;
}

/* Headings carry the brand voice: tight tracking, tight leading, strong ink. */
h1, h2, h3, h4 {
  color:var(--ink);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.018em;
  text-wrap:balance;
  margin:0 0 var(--sp-3);
}
h1 { font-size:var(--fs-3xl); letter-spacing:-.026em; margin-bottom:var(--sp-6); }
h2 { font-size:var(--fs-2xl); letter-spacing:-.022em; }
h3 { font-size:var(--fs-lg); }
/* Section headings need air above them, but not when they open a page or a
   panel — :not(:first-child) covers both without per-page overrides. */
h2:not(:first-child) { margin-top:var(--sp-10); }
h3:not(:first-child) { margin-top:var(--sp-6); }
p { margin:0 0 var(--sp-4); }
p:last-child { margin-bottom:0; }
a { color:var(--accent); }

/* Prices, counts and totals get lining tabular figures so columns line up and
   digits don't jitter as quantities change. */
.money, .price, .totals .grand, .sumline, td, th, .pcard .from,
.qty span, .sr-price { font-variant-numeric:tabular-nums; }

/* One focus treatment for the entire store. :focus-visible keeps it off mouse
   clicks but guarantees it for keyboard users. */
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

::selection { background:var(--accent-soft); color:var(--accent-press); }

/* Inline SVG icons, sized from their container's font-size. inline-block with
   a baseline nudge lets an icon sit mid-sentence in running text; inside a
   flex parent (buttons, pills) the display is blockified anyway, so one rule
   covers both cases. */
.ico { width:1.15em; height:1.15em; flex-shrink:0; display:inline-block; vertical-align:-.18em; }
.ico-sm { width:1em; height:1em; }

/* ===========================================================================
   Header
   =========================================================================== */

.announce {
  background:var(--accent-deep);
  color:#d9f2ee;
  text-align:center;
  padding:var(--sp-2) var(--sp-4);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:.01em;
}

header {
  background:var(--ink);
  color:#fff;
  padding:0 var(--sp-6);
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}

.logo {
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-shrink:0;
}
/* LOGO_WRAP sizes the mark inline, so the only thing left to size here is the
   wordmark. An earlier `.logo img` rule squared every image in the header at
   30px, which letterboxed the 516x82 logotype down to a sliver. */
.brand-word { height:12px; width:auto; display:block; }

/* The lockup answers the pointer the same way a product card does: the whole
   thing lifts, the art scales inside it, and a click presses it back down.
   Same duration and easing tokens as .pcard so the store moves with one
   vocabulary. :focus-visible is included so it is reachable from the keyboard,
   and the global prefers-reduced-motion block collapses every duration here. */
.logo, .foot-logo { transition:transform var(--dur) var(--ease); }
.logo:hover, .logo:focus-visible,
.foot-logo:hover, .foot-logo:focus-visible { transform:translateY(-2px); }
.logo:active, .foot-logo:active { transform:translateY(0); transition-duration:.08s; }

.logo-mark { transition:transform .35s var(--ease), filter var(--dur) var(--ease); }
.logo:hover .logo-mark, .logo:focus-visible .logo-mark,
.foot-logo:hover .logo-mark, .foot-logo:focus-visible .logo-mark {
  transform:scale(1.06);
  filter:drop-shadow(0 3px 9px rgba(0,0,0,.5));
}
.logo:active .logo-mark, .foot-logo:active .logo-mark {
  transform:scale(.95); transition-duration:.08s;
}

/* The wordmark is metal, so it catches the light rather than moving much. */
.brand-word { transition:transform .35s var(--ease), filter var(--dur) var(--ease); }
.logo:hover .brand-word, .logo:focus-visible .brand-word,
.foot-logo:hover .brand-word, .foot-logo:focus-visible .brand-word {
  transform:scale(1.03); filter:brightness(1.16);
}
.logo:active .brand-word, .foot-logo:active .brand-word {
  transform:scale(.98); transition-duration:.08s;
}

header nav { display:flex; gap:var(--sp-5); flex-shrink:0; }
header nav a {
  position:relative;
  color:rgba(255,255,255,.66);
  text-decoration:none;
  font-size:var(--fs-md);
  font-weight:500;
  padding:var(--sp-2) 0;
  white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
header nav a:hover { color:#fff; }
/* Underline lives on a pseudo-element so hover/active never shifts layout. */
header nav a::after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  border-radius:2px;
  background:var(--accent-bright);
  transform:scaleX(0);
  transition:transform var(--dur) var(--ease);
}
header nav a.active { color:#fff; font-weight:600; }
header nav a.active::after { transform:scaleX(1); }

.hdr-right { display:flex; gap:var(--sp-3); align-items:center; flex-shrink:0; }
.user-menu-wrap { position:relative; }

#user-chip {
  font:inherit;
  font-size:var(--fs-md);
  font-weight:500;
  color:rgba(255,255,255,.72);
  background:none;
  border:none;
  cursor:pointer;
  padding:var(--sp-2) var(--sp-1);
  white-space:nowrap;
  border-radius:var(--r-sm);
  transition:color var(--dur) var(--ease);
}
#user-chip:hover { color:#fff; }

.user-menu {
  position:absolute;
  top:calc(100% + 12px); right:0;
  background:var(--card);
  color:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  overflow:hidden;
  min-width:180px;
  z-index:15;
  padding:var(--sp-1);
}
.user-menu a, .user-menu button {
  display:block; width:100%; text-align:left;
  padding:var(--sp-2) var(--sp-3);
  font:inherit; font-size:var(--fs-md);
  color:inherit; text-decoration:none;
  background:none; border:none; border-radius:var(--r-xs);
  cursor:pointer;
}
.user-menu a:hover, .user-menu button:hover { background:var(--sunken); color:var(--ink); }
.user-menu hr { border:none; border-top:1px solid var(--line); margin:var(--sp-1) 0; }

/* Header icon buttons (wishlist) and the cart CTA share one silhouette. */
#wish-btn {
  color:rgba(255,255,255,.72);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-1);
  padding:var(--sp-2);
  border-radius:var(--r-sm);
  position:relative;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
#wish-btn:hover { color:#fff; background:rgba(255,255,255,.09); }
#wish-btn .ico { width:19px; height:19px; }
#wish-btn span {
  position:absolute; top:0; right:-1px;
  font-size:var(--fs-2xs); font-weight:700; line-height:1;
  background:var(--accent-bright); color:var(--ink);
  border-radius:var(--r-full);
  padding:.15rem .3rem; min-width:1.1rem; text-align:center;
}

#cart-btn {
  background:var(--accent);
  color:#fff;
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-sm);
  text-decoration:none;
  font-size:var(--fs-md);
  font-weight:600;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  transition:background var(--dur) var(--ease);
}
#cart-btn:hover { background:var(--accent-hover); }
#cart-btn .ico { width:17px; height:17px; }
/* Count reads as a badge on the CTA rather than parenthetical text. */
#cart-count {
  background:rgba(255,255,255,.22);
  border-radius:var(--r-full);
  padding:0 .4rem; min-width:1.35rem;
  text-align:center; font-size:var(--fs-xs); font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* --- Search --------------------------------------------------------------- */

.search-wrap { position:relative; flex:1; max-width:440px; margin-left:auto; }
.search-wrap .search-ico {
  position:absolute; left:var(--sp-3); top:50%;
  transform:translateY(-50%);
  width:16px; height:16px;
  color:var(--faint);
  pointer-events:none;
}
/* Solid white field. A translucent one tinted from the dark header behind it
   and read as disabled — on a dark bar the search has to be the one light
   surface to look like somewhere you can type. */
.search-wrap input {
  width:100%;
  padding:var(--sp-2) var(--sp-4) var(--sp-2) 2.35rem;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  background:var(--card);
  color:var(--ink);
  font-size:var(--fs-md);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.search-wrap input::placeholder { color:var(--muted); }
.search-wrap input:hover { border-color:var(--line-strong); }
.search-wrap input:focus {
  outline:none;
  border-color:var(--accent-bright);
  box-shadow:0 0 0 3px rgba(45,212,191,.3);
}

#search-results {
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:var(--card); color:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  overflow:hidden;
  padding:var(--sp-1);
}
.sr-item {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2);
  border-radius:var(--r-sm);
  text-decoration:none; color:inherit;
}
.sr-item:hover { background:var(--sunken); }
.sr-thumb {
  width:38px; height:38px;
  background:var(--sunken);
  border-radius:var(--r-xs);
  display:inline-flex; flex-shrink:0;
}
.sr-thumb svg { width:100%; height:100%; }
.sr-title { flex:1; font-size:var(--fs-md); color:var(--ink); }
.sr-price { font-size:var(--fs-sm); color:var(--muted); white-space:nowrap; }
.sr-empty { padding:var(--sp-3) var(--sp-4); font-size:var(--fs-md); color:var(--muted); }

/* ===========================================================================
   Layout
   =========================================================================== */

main {
  max-width:var(--shell);
  margin:0 auto;
  padding:var(--sp-8) var(--sp-6) var(--sp-12);
  width:100%;
  flex:1;
}

footer {
  background:var(--ink);
  color:var(--faint);
  padding:var(--sp-10) var(--sp-6) var(--sp-6);
  font-size:var(--fs-md);
  margin-top:var(--sp-16);
}
footer a {
  color:rgba(255,255,255,.72);
  text-decoration:none;
  transition:color var(--dur) var(--ease);
}
footer a:hover { color:#fff; }
.foot-cols {
  display:flex; justify-content:space-between; gap:var(--sp-8);
  max-width:var(--shell); margin:0 auto; flex-wrap:wrap;
}
.foot-brand { display:flex; flex-direction:column; gap:var(--sp-3); line-height:1.5; }
.foot-logo { display:flex; align-items:center; gap:var(--sp-2); }
.foot-logo .brand-word { height:15px; }
.foot-tag { color:var(--faint); font-size:var(--fs-md); }
.foot-links { display:flex; gap:var(--sp-6); align-items:center; flex-wrap:wrap; }
.foot-legal {
  max-width:var(--shell); margin:var(--sp-8) auto 0;
  padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.10);
  font-size:var(--fs-xs); color:#7a7a88; text-align:center; line-height:1.6;
}

@media (max-width:640px) {
  .foot-cols { flex-direction:column; align-items:center; text-align:center; gap:var(--sp-6); }
  .foot-brand { align-items:center; }
  .foot-links { justify-content:center; gap:var(--sp-4); }
}

/* ===========================================================================
   Home hero
   =========================================================================== */

.hero {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(120% 140% at 88% 12%, rgba(45,212,191,.22), transparent 58%),
    linear-gradient(122deg, #072e2a 0%, var(--accent-deep) 42%, #0d6a62 100%);
  color:#fff;
  border-radius:var(--r-xl);
  padding:var(--sp-16) var(--sp-12);
  margin-bottom:var(--sp-12);
  box-shadow:var(--sh-3);
}
/* A fine top highlight keeps the slab from reading as a flat fill. */
.hero::before {
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  pointer-events:none;
}
.hero-inner { position:relative; max-width:34rem; }

.hero-art {
  position:absolute; right:3rem; top:50%;
  transform:translateY(-50%);
  width:min(32%, 300px);
  pointer-events:none;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
  animation:hero-zoom 2s cubic-bezier(.2,.8,.25,1) both;
}
/* Zoom the Z mark up from small to full size on page load. translateY(-50%)
   keeps it vertically centered through every frame. */
@keyframes hero-zoom {
  from { transform:translateY(-50%) scale(.12); opacity:0; }
  to   { transform:translateY(-50%) scale(1); opacity:1; }
}
@media (prefers-reduced-motion:reduce) { .hero-art { animation:none; } }

.hero-kicker {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-2xs); font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent-bright);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  padding:var(--sp-1) var(--sp-3);
  border-radius:var(--r-full);
  margin-bottom:var(--sp-5);
}
.hero h1 {
  margin:0 0 var(--sp-4);
  color:#fff;
  font-size:clamp(2.1rem, 4.6vw, 3.15rem);
  line-height:1.04;
  letter-spacing:-.035em;
}
.hero p {
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:var(--fs-lg);
  line-height:1.6;
  max-width:30rem;
}
.hero-cta { display:flex; gap:var(--sp-5); align-items:center; margin-top:var(--sp-8); flex-wrap:wrap; }
.hero-btn {
  background:#fff; color:var(--accent-deep);
  font-weight:650; font-size:var(--fs-base);
  padding:var(--sp-3) var(--sp-6);
  border-radius:var(--r-sm);
  text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero-btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.28); }
.hero-btn:active { transform:translateY(0); }
.hero-link {
  color:rgba(255,255,255,.82);
  text-decoration:none; font-weight:600; font-size:var(--fs-base);
  display:inline-flex; align-items:center; gap:var(--sp-2);
  transition:color var(--dur) var(--ease);
}
.hero-link:hover { color:#fff; }
.hero-link .ico { width:1em; height:1em; transition:transform var(--dur) var(--ease); }
.hero-link:hover .ico { transform:translateX(3px); }

.hero-perks {
  display:flex; gap:var(--sp-6); flex-wrap:wrap; list-style:none;
  margin:var(--sp-8) 0 0; padding:0;
  font-size:var(--fs-md); color:rgba(255,255,255,.72);
}
.hero-perks li { display:flex; align-items:center; gap:var(--sp-2); }
.hero-perks .ico { width:15px; height:15px; color:var(--accent-bright); }

@media (max-width:880px) {
  /* Too narrow for the mark to sit beside the headline, so the hero becomes a
     column with the mark on top (order:0). Static positioning replaces the
     desktop absolute-centering, with a matching keyframe that has no
     translateY offset. */
  .hero { display:flex; flex-direction:column; padding:var(--sp-10) var(--sp-8); }
  .hero-art {
    display:block; position:static; order:0; opacity:1;
    width:min(70%, 290px); margin:0 auto 1.4rem;
    right:auto; top:auto;
    animation:hero-zoom-m 2s cubic-bezier(.2,.8,.25,1) both;
  }
  .hero-inner { order:1; max-width:none; }
}
@keyframes hero-zoom-m {
  from { transform:scale(.12); opacity:0; }
  to   { transform:scale(1); opacity:1; }
}

/* ===========================================================================
   Shop header + category filters
   =========================================================================== */

.shop-head {
  display:flex; align-items:baseline; gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
.shop-head h2 { margin:0; font-size:var(--fs-2xl); }

.cats {
  display:flex; gap:var(--sp-2); flex-wrap:wrap;
  margin-bottom:var(--sp-8);
}
.cat {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-full);
  background:var(--card); color:var(--ink-2);
  border:1px solid var(--line);
  cursor:pointer;
  font:inherit; font-size:var(--fs-md); font-weight:550;
  box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease),
             background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cat:hover { border-color:var(--line-strong); color:var(--ink); box-shadow:var(--sh-2); }
.cat .ic { font-size:1.05rem; line-height:1; }
.cat .n {
  font-size:var(--fs-2xs); font-weight:700; line-height:1;
  color:var(--muted); background:var(--sunken);
  border-radius:var(--r-full); padding:.2rem .4rem; min-width:1.2rem; text-align:center;
}
.cat.active {
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 1px 2px rgba(15,118,110,.3), 0 6px 14px -6px rgba(15,118,110,.5);
}
.cat.active .n { background:rgba(255,255,255,.22); color:#fff; }

/* ===========================================================================
   Empty state
   =========================================================================== */

.empty {
  text-align:center;
  padding:var(--sp-16) var(--sp-6);
  background:var(--card);
  border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);
}
.empty-icon {
  width:44px; height:44px;
  margin:0 auto var(--sp-4);
  color:var(--faint);
  font-size:2.4rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.empty-icon .ico { width:100%; height:100%; }
.empty h3 { margin:0 0 var(--sp-2); font-size:var(--fs-lg); }
.empty p { margin:0 0 var(--sp-6); color:var(--muted); }

/* ===========================================================================
   Product grid
   =========================================================================== */

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(238px, 1fr));
  gap:var(--sp-6);
}

.pcard {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
  box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.pcard:hover {
  transform:translateY(-3px);
  box-shadow:var(--sh-3);
  border-color:var(--line-strong);
}
.pcard .img {
  aspect-ratio:1;
  background:var(--sunken);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.pcard .img svg { width:80%; height:80%; transition:transform .35s var(--ease); }
.pcard:hover .img svg { transform:scale(1.06); }

/* The type chip sits on a translucent white ground so it stays legible over
   any garment colour. */
.pcard .ptag {
  position:absolute; top:var(--sp-3); left:var(--sp-3); z-index:1;
  font-size:var(--fs-2xs); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  padding:.25rem .55rem;
  border-radius:var(--r-xs);
  line-height:1.25;
  background:rgba(255,255,255,.92);
  color:var(--ink-2);
  box-shadow:var(--sh-1);
  backdrop-filter:blur(4px);
}
/* Hot keeps its original orange pill and flame — the badge has to shout, and
   a mono-tone chip with an 11px glyph did neither. */
.pcard .hot {
  position:absolute; top:.65rem; right:.65rem; z-index:1;
  background:#b45309; color:#fff;
  font-size:.72rem; font-weight:700;
  padding:.2rem .6rem;
  border-radius:99px;
  line-height:1.35;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}

.pcard .wish {
  position:absolute; bottom:var(--sp-3); right:var(--sp-3); z-index:1;
  width:34px; height:34px;
  border-radius:var(--r-full);
  border:1px solid var(--line);
  background:rgba(255,255,255,.94);
  color:var(--muted);
  padding:0; cursor:pointer;
  box-shadow:var(--sh-1);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity var(--dur) var(--ease), color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
/* Revealed on hover for pointer devices; always visible on touch (where hover
   never fires) and whenever the item is already saved or keyboard-focused. */
.pcard:hover .wish, .pcard .wish:focus-visible, .pcard .wish.on { opacity:1; }
@media (hover:none) { .pcard .wish { opacity:1; } }
.pcard .wish:hover { color:#e0245e; background:#fff; transform:scale(1.08); }
.pcard .wish.on { color:#e0245e; }
.pcard .wish .ico { width:17px; height:17px; }

.pcard .body {
  padding:var(--sp-4);
  display:flex; flex-direction:column; flex:1; gap:var(--sp-1);
}
.pcard h3 {
  margin:0;
  font-size:var(--fs-md);
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.008em;
  /* Clamped to two lines so every card in a row is the same height and the
     grid never goes ragged on long SEO titles. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.8em;
}
/* Price sits at the bottom of the card regardless of title length. */
.pcard .from {
  margin-top:auto; padding-top:var(--sp-2);
  color:var(--muted); font-size:var(--fs-sm);
}
.pcard .from b { color:var(--ink); font-size:var(--fs-lg); font-weight:700; letter-spacing:-.015em; }
.pcard .dots { display:flex; gap:var(--sp-1); align-items:center; margin-top:var(--sp-2); }
.pcard .dots span {
  width:12px; height:12px; border-radius:var(--r-full);
  background:var(--c); box-shadow:inset 0 0 0 1px rgba(21,21,29,.16);
}
.pcard .dots small { color:var(--muted); margin-left:var(--sp-1); font-size:var(--fs-xs); }

/* Wishlist page: per-card size/color pickers below the body. */
.wl-actions {
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4) var(--sp-4);
  border-top:1px solid var(--line);
  cursor:default;
}
.wl-actions select { flex:1 1 40%; min-width:90px; padding:var(--sp-2); font-size:var(--fs-sm); }
.wl-actions .wl-add { flex:1 1 100%; white-space:nowrap; font-size:var(--fs-sm); }

/* ===========================================================================
   Buttons & form controls
   =========================================================================== */

button, .btn {
  font:inherit;
  font-size:var(--fs-md);
  font-weight:600;
  letter-spacing:-.005em;
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-4);
  min-height:2.375rem;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
button:hover, .btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
button:active, .btn:active { background:var(--accent-press); border-color:var(--accent-press); }
button:disabled, .btn:disabled {
  background:var(--line); border-color:var(--line);
  color:var(--faint); cursor:not-allowed;
}

.btn-quiet {
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--line-strong);
}
.btn-quiet:hover { background:var(--sunken); border-color:var(--muted); color:var(--ink); }
.btn-quiet:active { background:var(--line); }

select, input, textarea {
  font:inherit;
  font-size:var(--fs-md);
  color:var(--ink);
  padding:var(--sp-2) var(--sp-3);
  min-height:2.375rem;
  border-radius:var(--r-sm);
  border:1px solid var(--line-strong);
  background:var(--card);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input::placeholder, textarea::placeholder { color:var(--faint); }
select:hover, input:hover, textarea:hover { border-color:var(--muted); }
select:focus, input:focus, textarea:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(15,118,110,.15);
}
input[type=checkbox], input[type=radio] {
  min-height:0;
  accent-color:var(--accent);
  width:1rem; height:1rem;
}

/* ===========================================================================
   Surfaces & content blocks
   =========================================================================== */

.panel {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  box-shadow:var(--sh-1);
}
.note { color:var(--muted); font-size:var(--fs-md); }
.row { display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; }

/* Legal / info pages */
.prose { max-width:44rem; }
.prose h2 { margin-top:var(--sp-10); font-size:var(--fs-xl); }
.prose p, .prose li { line-height:1.7; font-size:var(--fs-base); }
.prose li { margin-bottom:var(--sp-2); }
.prose details { border-bottom:1px solid var(--line); padding:var(--sp-4) 0; }
.prose details:last-child { border-bottom:none; }
.prose summary {
  font-weight:600; color:var(--ink); cursor:pointer;
  list-style:none; position:relative; padding-right:var(--sp-6);
}
.prose summary::-webkit-details-marker { display:none; }
/* Chevron drawn in CSS so no icon markup is needed inside every <summary>. */
.prose summary::after {
  content:''; position:absolute; right:var(--sp-1); top:.45em;
  width:.45em; height:.45em;
  border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);
  transform:rotate(45deg);
  transition:transform var(--dur) var(--ease);
}
.prose details[open] summary::after { transform:rotate(-135deg); }
.prose details p { margin:var(--sp-3) 0 0; color:var(--ink-2); }
.prose code {
  font-size:.9em; background:var(--sunken); color:var(--ink);
  padding:.1em .35em; border-radius:var(--r-xs);
}

table { width:100%; border-collapse:collapse; }
td, th {
  padding:var(--sp-3) var(--sp-2);
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:var(--fs-md);
}
th {
  color:var(--muted); font-weight:600;
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.06em;
}
tr:last-child td { border-bottom:none; }

.qty {
  display:inline-flex; align-items:center;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  overflow:hidden;
  background:var(--card);
}
.qty button {
  background:var(--card); color:var(--ink-2);
  border:none; border-radius:0;
  padding:0 var(--sp-3); min-height:2.25rem;
  font-size:var(--fs-lg); font-weight:500;
}
.qty button:hover { background:var(--sunken); color:var(--ink); }
.qty span {
  padding:0 var(--sp-3); min-width:2.4rem; text-align:center;
  font-weight:600; color:var(--ink); font-size:var(--fs-md);
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  line-height:2.25rem;
}

.alert {
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  margin:var(--sp-4) 0;
  font-size:var(--fs-md);
  border:1px solid transparent;
}
.alert.ok  { background:var(--ok-bg);  color:var(--accent-press); border-color:var(--accent-line); }
.alert.err { background:var(--err-bg); color:var(--err); border-color:var(--err-line); }

/* Order progress rail */
.timeline { display:flex; gap:0; margin:var(--sp-6) 0; }
.tstep {
  flex:1; text-align:center; position:relative;
  color:var(--muted); font-size:var(--fs-xs);
}
.tstep::before {
  content:''; display:block;
  width:12px; height:12px; border-radius:var(--r-full);
  background:var(--card); border:2px solid var(--line-strong);
  margin:0 auto var(--sp-2); position:relative; z-index:1;
}
.tstep::after {
  content:''; position:absolute; top:5px;
  left:calc(50% + 10px); right:calc(-50% + 10px);
  height:2px; background:var(--line-strong);
}
.tstep:last-child::after { display:none; }
.tstep.done { color:var(--accent); font-weight:600; }
.tstep.done::before { background:var(--accent); border-color:var(--accent); }
.tstep.done::after { background:var(--accent); }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin:var(--sp-4) 0; }
.form-grid input { width:100%; }
.form-grid .full { grid-column:1/-1; }

/* Order status chips */
.st {
  display:inline-block;
  padding:.2rem .55rem;
  border-radius:var(--r-full);
  font-size:var(--fs-2xs); font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
  background:#e6edfb; color:#1d4ed8;
}
.st-shipped, .st-delivered { background:var(--ok-bg); color:var(--accent-press); }
.st-in_production { background:var(--warn-bg); color:var(--warn); }
.st-payment_failed, .st-submit_failed, .st-cancelled { background:var(--err-bg); color:var(--err); }

#toast {
  position:fixed; bottom:var(--sp-6); left:50%;
  transform:translate(-50%, 8px);
  background:var(--ink); color:#fff;
  padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-md);
  font-size:var(--fs-md); font-weight:500;
  box-shadow:var(--sh-4);
  opacity:0;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
  pointer-events:none;
  z-index:20;
  max-width:calc(100vw - 2rem);
}
#toast.show { opacity:1; transform:translate(-50%, 0); }

/* ===========================================================================
   Password fields (eye toggle + strength meter)
   =========================================================================== */

.pw-wrap { position:relative; }
.pw-wrap input { padding-right:2.75rem; width:100%; }
.pw-eye {
  position:absolute; right:var(--sp-1); top:50%;
  transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  padding:var(--sp-1); min-height:0;
  color:var(--muted); border-radius:var(--r-xs);
}
.pw-eye:hover { background:var(--sunken); color:var(--ink); border-color:transparent; }
.pw-eye svg { width:18px; height:18px; display:block; }
.pw-meter { margin:var(--sp-2) 0 var(--sp-3); }
.pw-meter .bar { height:5px; border-radius:var(--r-full); background:var(--line); overflow:hidden; }
.pw-meter .bar i {
  display:block; height:100%; width:0;
  border-radius:var(--r-full);
  transition:width .28s var(--ease), background .28s var(--ease);
}
.pw-meter .lbl { font-size:var(--fs-xs); color:var(--muted); display:block; margin-top:var(--sp-1); }

/* ===========================================================================
   AI assistant widget
   =========================================================================== */

#asst-launch {
  position:fixed; bottom:var(--sp-6); right:var(--sp-6); z-index:30;
  width:52px; height:52px;
  border-radius:var(--r-full);
  border:none; padding:0;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
  box-shadow:0 4px 12px rgba(15,118,110,.35), var(--sh-3);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
#asst-launch:hover { transform:translateY(-2px); background:var(--accent-hover); }
#asst-launch .ico { width:23px; height:23px; }
#asst-launch.hidden { display:none; }

#asst-panel {
  position:fixed; bottom:var(--sp-6); right:var(--sp-6); z-index:31;
  width:378px; max-width:calc(100vw - 2rem);
  height:540px; max-height:calc(100vh - 2rem);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-4);
  display:flex; flex-direction:column;
  overflow:hidden;
}
/* The display above overrides [hidden]'s display:none, so hidden has to be
   re-asserted at higher specificity or the panel can never close. */
#asst-panel[hidden] { display:none; }

.asst-head {
  background:var(--ink); color:#fff;
  padding:var(--sp-4);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
}
.asst-head b { font-size:var(--fs-base); display:block; font-weight:600; letter-spacing:-.01em; }
.asst-head small { color:var(--faint); font-size:var(--fs-xs); }
.asst-head button {
  background:rgba(255,255,255,.10); border:none; color:#fff;
  width:28px; height:28px; min-height:0; padding:0;
  border-radius:var(--r-xs); cursor:pointer; flex-shrink:0;
}
.asst-head button:hover { background:rgba(255,255,255,.2); }
.asst-head button .ico { width:14px; height:14px; }

.asst-msgs {
  flex:1; overflow-y:auto;
  padding:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-3);
  background:var(--bg);
}
.asst-msg {
  max-width:84%;
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-md);
  font-size:var(--fs-md); line-height:1.5;
  word-wrap:break-word;
}
.asst-msg.user { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:var(--r-xs); }
.asst-msg.bot {
  align-self:flex-start; background:var(--card); color:var(--ink-2);
  border:1px solid var(--line); border-bottom-left-radius:var(--r-xs);
}
.asst-msg.bot a { color:var(--accent); }
.asst-msg.user a { color:#fff; text-decoration:underline; }
.asst-msg.typing { display:flex; gap:var(--sp-1); align-items:center; }
.asst-msg.typing span {
  width:6px; height:6px; border-radius:var(--r-full);
  background:var(--faint);
  animation:asst-bounce 1.2s infinite ease-in-out;
}
.asst-msg.typing span:nth-child(2) { animation-delay:.15s; }
.asst-msg.typing span:nth-child(3) { animation-delay:.3s; }
@keyframes asst-bounce {
  0%,80%,100% { transform:translateY(0); opacity:.5; }
  40% { transform:translateY(-5px); opacity:1; }
}

.asst-input {
  display:flex; gap:var(--sp-2);
  padding:var(--sp-3);
  border-top:1px solid var(--line);
  background:var(--card);
}
.asst-input input { flex:1; border-radius:var(--r-full); padding:var(--sp-2) var(--sp-4); }
.asst-input button {
  flex-shrink:0; width:38px; height:38px; min-height:0; padding:0;
  border-radius:var(--r-full);
}
.asst-input button .ico { width:16px; height:16px; }

@media (max-width:480px) {
  #asst-panel {
    bottom:0; right:0; width:100vw; max-width:100vw;
    height:100dvh; max-height:100dvh; border-radius:0; border:none;
  }
  #asst-launch { bottom:var(--sp-4); right:var(--sp-4); }
}

/* ===========================================================================
   Contact form modal
   =========================================================================== */

#contact-overlay {
  position:fixed; inset:0; z-index:40;
  background:rgba(21,21,29,.55);
  backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4);
}
#contact-overlay[hidden] { display:none; }
#contact-modal {
  background:var(--card);
  border-radius:var(--r-lg);
  width:100%; max-width:29rem;
  max-height:calc(100dvh - 2rem); overflow-y:auto;
  box-shadow:var(--sh-4);
}
.contact-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);
}
.contact-head b { font-size:var(--fs-lg); color:var(--ink); letter-spacing:-.015em; }
#contact-close {
  background:none; color:var(--muted); border:none;
  padding:var(--sp-1); min-height:0;
  border-radius:var(--r-xs);
}
#contact-close:hover { background:var(--sunken); color:var(--ink); }
#contact-close .ico { width:15px; height:15px; }
#contact-form {
  padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-4);
}
#contact-form label {
  display:flex; flex-direction:column; gap:var(--sp-2);
  font-size:var(--fs-sm); font-weight:600; color:var(--ink);
}
#contact-form label .opt { color:var(--muted); font-weight:400; }
#contact-form input, #contact-form textarea { width:100%; font:inherit; font-size:var(--fs-md); font-weight:400; }
#contact-form textarea { resize:vertical; line-height:1.55; }
#contact-form .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
/* Turnstile injects a fixed-size iframe; reserve nothing and let it size
   itself, but keep it from stretching the modal on narrow screens. */
#contact-turnstile { display:flex; justify-content:center; }
#contact-turnstile[hidden] { display:none; }
#contact-turnstile iframe { max-width:100%; }
.contact-err {
  color:var(--err); font-size:var(--fs-md);
  background:var(--err-bg); border:1px solid var(--err-line);
  border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3);
}
.contact-err[hidden] { display:none; }
.contact-actions { display:flex; justify-content:flex-end; gap:var(--sp-3); }
#contact-submit[disabled] { opacity:.65; cursor:default; }

/* ===========================================================================
   Responsive
   =========================================================================== */

@media (max-width:900px) {
  header { gap:var(--sp-4); padding:0 var(--sp-4); }
  header nav { gap:var(--sp-4); }
  main { padding:var(--sp-6) var(--sp-4) var(--sp-10); }
  .hero { padding:var(--sp-10) var(--sp-8); margin-bottom:var(--sp-8); }
}

@media (max-width:760px) {
  /* Stack the header into tidy rows so nothing crowds or clips:
     row 1 = logo (left) + account/wishlist/cart (right); row 2 = nav;
     row 3 = search. */
  header {
    flex-wrap:wrap;
    gap:var(--sp-2) var(--sp-4);
    padding:var(--sp-3) var(--sp-4);
    min-height:0;
  }
  .logo { margin-right:auto; }
  .hdr-right { order:1; margin-left:auto; }
  header nav { order:2; flex-basis:100%; justify-content:center; gap:var(--sp-6); }
  .search-wrap { order:3; flex-basis:100%; max-width:none; margin-left:0; }
  .form-grid { grid-template-columns:1fr; }
  .panel { padding:var(--sp-4); }
  td, th { padding:var(--sp-2) var(--sp-1); font-size:var(--fs-sm); }
  /* Wide tables (orders, cart, admin) scroll inside themselves instead of
     stretching the page. */
  table { display:block; overflow-x:auto; }
  footer { margin-top:var(--sp-10); padding:var(--sp-8) var(--sp-4) var(--sp-5); }
}

@media (max-width:480px) {
  :root { --fs-3xl:1.625rem; --fs-2xl:1.3125rem; }
  .announce { font-size:var(--fs-xs); padding:var(--sp-2) var(--sp-3); }
  #cart-btn { padding:var(--sp-2) var(--sp-3); }
  #cart-btn .cart-label { display:none; }
  .hero { padding:var(--sp-8) var(--sp-5); border-radius:var(--r-lg); }
  .hero p { font-size:var(--fs-base); }
  .hero-cta { gap:var(--sp-4); margin-top:var(--sp-6); }
  .hero-btn { width:100%; text-align:center; }
  .hero-perks { gap:var(--sp-2) var(--sp-5); margin-top:var(--sp-6); }
  .cat { padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); }
  .grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:var(--sp-3); }
  .pcard .body { padding:var(--sp-3); }
  .empty { padding:var(--sp-10) var(--sp-4); }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}