/* ===================================================================
   XANI SHOP — Premium Commerce v2 (T2)  ·  Cabinet Grotesk × Figtree
   Warm layered system · single accent (orange) · depth + motion
   =================================================================== */

:root{
  --ink:#191520; --ink-soft:#262030; --ink-line:rgba(255,255,255,.10);
  --paper:#f6f1e9; --sand:#ece2d3; --card:#fffdfa;
  --accent:#e8882d; --accent-deep:#cf7415; --accent-press:#b4620f; --accent-ink:#9c540b;
  --green:#1a7a4d; --green-bg:#e9f4ee; --red:#d23b2f;
  --text:#211d26; --muted:#6d6660; --faint:#9c948b;
  --line:rgba(25,21,32,.12); --line-soft:rgba(25,21,32,.07);
  --radius:14px; --radius-sm:9px; --radius-lg:22px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-near:0 1px 2px rgba(25,21,32,.06),0 3px 8px rgba(25,21,32,.05);
  --shadow-far:0 26px 54px -22px rgba(25,21,32,.30);
  --maxw:1300px; --pad:28px;
  --font-display:"Cabinet Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; color-scheme:light; }
html,body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  font-family:var(--font-body); color:var(--text); background:var(--paper);
  line-height:1.6; min-height:100vh; display:flex; flex-direction:column;
  overflow-wrap:break-word;
}
main{ flex:1; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; line-height:1.04; word-break:keep-all; }
::selection{ background:var(--accent); color:#fff; }

/* cross-document view transitions (progressive, cheap) */
@view-transition{ navigation:auto; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* grain texture for dark fields */
.grain{ position:relative; }
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ REVEAL (uniform, quiet) — visible by default, JS opts into hidden ============ */
.js-motion .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js-motion .reveal-left{ opacity:0; transform:translateX(-28px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js-motion .reveal-scale{ opacity:0; transform:scale(.93); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js-motion .reveal.in,.js-motion .reveal-left.in,.js-motion .reveal-scale.in{ opacity:1; transform:none; }
.js-motion .reveal-d1{ transition-delay:.06s } .js-motion .reveal-d2{ transition-delay:.12s }
.js-motion .reveal-d3{ transition-delay:.18s } .js-motion .reveal-d4{ transition-delay:.24s }
.js-motion .reveal-d5{ transition-delay:.3s }

/* ========================= TOPBAR (announcement) ========================= */
.topbar{
  background:var(--ink); color:rgba(255,255,255,.82); font-size:.72rem; font-weight:500;
  letter-spacing:.01em; border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar-inner{ max-width:var(--maxw); margin:0 auto; padding:7px var(--pad); display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; }
.topbar-item{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.topbar-item svg{ width:13px; height:13px; color:var(--accent); flex-shrink:0; }
.topbar a{ color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(255,255,255,.3); }
.topbar a:hover{ text-decoration-color:var(--accent); }
.topbar-sep{ opacity:.28; }

/* ========================= HEADER ========================= */
.site-header{ position:sticky; top:0; z-index:200; background:rgba(246,241,233,.86); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line-soft); transition:box-shadow .3s var(--ease), background .3s var(--ease); }
.site-header.scrolled{ background:rgba(246,241,233,.94); box-shadow:0 8px 30px -18px rgba(25,21,32,.4); }
.header-inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); height:78px; display:flex; align-items:center; gap:26px; transition:height .3s var(--ease); }
.site-header.scrolled .header-inner{ height:66px; }

/* Wordmark: oversized Cabinet type mark */
.logo{ display:inline-flex; align-items:baseline; gap:2px; flex-shrink:0; line-height:1; }
.logo-img{ display:none; }
.logo-mark{ font-family:var(--font-display); font-weight:800; font-size:1.72rem; letter-spacing:-.04em; color:var(--ink); line-height:.9; }
.logo-mark .lm-shop{ color:var(--accent); }
.logo-shop{ display:none; }

.header-search{ flex:1; max-width:440px; position:relative; }
.header-search input{ width:100%; padding:11px 16px 11px 42px; border:1.5px solid var(--line); border-radius:100px; font-family:inherit; font-size:.86rem; background:var(--card); transition:border-color .2s, box-shadow .2s; }
.header-search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(232,136,45,.12); }
.header-search svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted); pointer-events:none; }
.header-search button{ position:absolute; right:5px; top:5px; bottom:5px; border:none; background:none; padding:0 12px; font:inherit; font-size:.8rem; font-weight:700; color:var(--accent-ink); cursor:pointer; border-radius:100px; }
.header-search button:hover{ color:var(--accent-press); }

.main-nav{ display:flex; gap:24px; align-items:center; margin-left:auto; }
.main-nav a{ font-size:.86rem; font-weight:600; color:var(--text); position:relative; padding:4px 0; }
.main-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--accent); transition:right .28s var(--ease); }
.main-nav a:hover::after{ right:0; }
.main-nav .cart-link{ display:none; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; color:var(--ink); padding:8px; margin-left:auto; }
.nav-toggle svg{ width:24px; height:24px; }

.header-right{ display:flex; align-items:center; gap:4px; }
.cart-icon-link,.header-account{ position:relative; color:var(--ink); display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; transition:background .18s, color .18s; }
.cart-icon-link:hover,.header-account:hover{ background:rgba(232,136,45,.10); color:var(--accent-press); }
.cart-badge,.cart-badge-icon{ background-image:linear-gradient(var(--accent),var(--accent)); forced-color-adjust:none; color:#fff; font-family:var(--font-display); font-size:.62rem; font-weight:800; border-radius:100px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; position:absolute; top:5px; right:3px; padding:0 4px; box-shadow:0 2px 6px rgba(232,136,45,.4); }
.cart-link .cart-badge{ position:static; display:inline-flex; margin-left:6px; }

/* ========================= BUTTONS ========================= */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 26px; border-radius:100px; font-family:var(--font-display); font-size:.9rem; font-weight:700; letter-spacing:-.01em; cursor:pointer; border:none; transition:transform .18s var(--ease), box-shadow .22s var(--ease), background-color .18s; text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn-primary,.btn-buy{ background-image:linear-gradient(var(--accent),var(--accent)); forced-color-adjust:none; color:#fff; box-shadow:0 6px 18px -6px rgba(232,136,45,.6); }
.btn-primary:hover,.btn-buy:hover{ background-image:linear-gradient(var(--accent-deep),var(--accent-deep)); box-shadow:0 12px 26px -8px rgba(232,136,45,.7); transform:translateY(-2px); }
.btn-buy{ font-size:1rem; padding:15px 40px; }
.btn-lg{ padding:16px 40px; font-size:1rem; }
.btn-outline{ background:transparent; border:1.5px solid var(--line); color:var(--text); }
.btn-outline:hover{ border-color:var(--ink); background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn-ghost-light{ background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.btn-ghost-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-sm{ padding:8px 16px; font-size:.78rem; background-image:linear-gradient(var(--accent),var(--accent)); forced-color-adjust:none; color:#fff; border-radius:100px; }
.btn-sm:hover{ background-image:linear-gradient(var(--accent-deep),var(--accent-deep)); }
.btn-full{ width:100%; }
.btn svg{ width:17px; height:17px; }

/* ========================= HERO (asymmetric split) ========================= */
.hero{ position:relative; }
.hero-split{ max-width:var(--maxw); margin:0 auto; padding:44px var(--pad) 0; display:grid; grid-template-columns:0.92fr 1.08fr; gap:0; align-items:stretch; }
.hero-panel{ position:relative; z-index:3; background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:52px 48px; box-shadow:var(--shadow-far); align-self:center; margin-right:-64px; }
.hero-kicker{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:20px; }
.hero-kicker::before{ content:""; width:26px; height:2px; background:var(--accent); }
.hero-title{ font-size:clamp(2.3rem,4vw,3.5rem); line-height:.98; letter-spacing:-.035em; color:var(--ink); }
.hero-title em{ font-style:normal; color:var(--accent); }
.hero-sub{ margin:20px 0 30px; font-size:1.05rem; color:var(--muted); max-width:34ch; line-height:1.55; }
.hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:30px; padding-top:26px; border-top:1px solid var(--line-soft); }
.hero-chip{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:var(--text); white-space:nowrap; }
.hero-chip svg{ width:16px; height:16px; color:var(--green); flex-shrink:0; }
.hero-chip a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
.hero-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:520px; box-shadow:var(--shadow-far); }
.hero-media img.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:66% 62%; animation:heroZoom 22s ease-in-out infinite alternate; }
.hero-media::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(25,21,32,.34) 0%, rgba(25,21,32,0) 42%); }
@keyframes heroZoom{ 0%{ transform:scale(1) } 100%{ transform:scale(1.07) } }

/* ========================= MARQUEE RIBBON (contrast field) ========================= */
.ribbon{ background:var(--ink); color:#fff; overflow:hidden; padding:15px 0; margin-top:-40px; position:relative; z-index:1; }
.ribbon-track{ display:flex; gap:0; width:max-content; animation:ribbonScroll 34s linear infinite; }
.ribbon-item{ display:inline-flex; align-items:center; gap:12px; padding:0 30px; font-family:var(--font-display); font-size:.94rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap; color:rgba(255,255,255,.9); }
.ribbon-item svg{ width:16px; height:16px; color:var(--accent); }
.ribbon-item .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); }
@keyframes ribbonScroll{ 0%{ transform:translateX(0) } 100%{ transform:translateX(-50%) } }
.ribbon:hover .ribbon-track{ animation-play-state:paused; }

/* ========================= SECTION SHELL ========================= */
.featured,.page-section,.cat-section,.home-section{ max-width:var(--maxw); margin:0 auto; padding:76px var(--pad); }
/* Bestseller-Sheet hebt sich über das dunkle Trust-Band (Overlap-Tiefe) */
#bestseller.featured{ position:relative; z-index:3; background:var(--sand); border-radius:28px 28px 0 0; margin-top:-44px; padding-top:56px; box-shadow:0 -20px 50px -30px rgba(25,21,32,.5); }
#bestseller .product-card{ background:var(--card); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:38px; flex-wrap:wrap; }
.section-head-left{ position:relative; }
.section-kicker{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:12px; }
.section-kicker::before{ content:""; width:24px; height:2px; background:var(--accent); }
.section-head h2,.featured h2{ font-size:clamp(1.7rem,2.6vw,2.4rem); color:var(--ink); letter-spacing:-.03em; }
.section-sub{ color:var(--muted); font-size:.98rem; margin-top:8px; max-width:46ch; }
.section-link{ font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--ink); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.section-link svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.section-link:hover{ color:var(--accent-press); } .section-link:hover svg{ transform:translateX(4px); }
/* legacy centered header kept for inner pages */
.section-header{ text-align:center; margin-bottom:38px; }
.section-tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:12px; }
.section-header h2{ font-size:clamp(1.7rem,2.6vw,2.3rem); color:var(--ink); }
.text-center{ text-align:center; margin-top:48px; }

/* ========================= CATEGORY EDITORIAL (home) ========================= */
.cat-section{ padding-top:20px; }
.cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:172px; gap:16px; }
.cat-tile{ position:relative; grid-column:span 2; border-radius:var(--radius); overflow:hidden; background:var(--sand); border:1px solid var(--line-soft); box-shadow:var(--shadow-near); transition:transform .3s var(--ease), box-shadow .3s var(--ease); display:flex; align-items:flex-end; }
.cat-tile.feat{ grid-column:span 3; grid-row:span 2; }
.cat-tile.tall{ grid-row:span 2; }
.cat-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-far); }
.cat-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.cat-tile:hover img{ transform:scale(1.06); }
.cat-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(25,21,32,.9) 0%, rgba(25,21,32,.55) 42%, rgba(25,21,32,.4) 100%); }
.cat-tile-name{ text-shadow:0 1px 10px rgba(0,0,0,.5); }
.cat-tile-body{ position:relative; z-index:2; padding:18px 20px; color:#fff; width:100%; }
.cat-tile-name{ font-family:var(--font-display); font-weight:800; font-size:1.02rem; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }
.cat-tile.feat .cat-tile-name{ font-size:1.5rem; }
.cat-tile-count{ font-size:.76rem; color:rgba(255,255,255,.75); margin-top:2px; font-weight:500; }
.cat-tile-icon{ position:absolute; top:16px; right:16px; z-index:2; width:38px; height:38px; border-radius:11px; background:rgba(25,21,32,.42); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; color:#fff; }
.cat-tile-icon svg{ width:19px; height:19px; }

/* fallback simple category grid (still referenced) */
.categories-section{ max-width:var(--maxw); margin:0 auto; padding:56px var(--pad) 32px; }
.category-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.category-card{ background:var(--card); border-radius:var(--radius); padding:22px 16px; text-align:center; border:1px solid var(--line-soft); box-shadow:var(--shadow-near); transition:transform .25s var(--ease), box-shadow .25s var(--ease); display:flex; flex-direction:column; align-items:center; gap:8px; }
.category-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-far); }
.category-icon{ color:var(--accent); } .category-icon svg{ width:26px; height:26px; }
.category-name{ font-family:var(--font-display); font-size:.86rem; font-weight:700; color:var(--ink); }
.category-count{ font-size:.7rem; color:var(--faint); }

/* ========================= TRUST / STATS BAND (ink, real numbers) ========================= */
.trust-band{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.trust-band-inner{ max-width:var(--maxw); margin:0 auto; padding:60px var(--pad); display:grid; grid-template-columns:1.2fr 2fr; gap:44px; align-items:center; position:relative; z-index:2; }
.trust-band h2{ font-size:clamp(1.6rem,2.4vw,2.1rem); color:#fff; letter-spacing:-.03em; }
.trust-band h2 em{ font-style:normal; color:var(--accent); }
.trust-band p{ color:rgba(255,255,255,.66); margin-top:12px; font-size:.95rem; max-width:40ch; }
.trust-band p a{ color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--accent); }
.trust-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.trust-stat{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); padding:24px 22px; }
.trust-stat .ts-num{ font-family:var(--font-display); font-weight:800; font-size:1.9rem; color:var(--accent); letter-spacing:-.03em; line-height:1; }
.trust-stat .ts-label{ margin-top:8px; font-size:.82rem; color:rgba(255,255,255,.7); font-weight:500; line-height:1.35; }

/* ========================= LIST HEAD BAND (produkte depth plane) ========================= */
.list-head{ background:var(--sand); border-bottom:1px solid var(--line-soft); position:relative; overflow:hidden; }
.list-head::before{ content:""; position:absolute; top:-40%; right:-6%; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(232,136,45,.14), transparent 68%); pointer-events:none; }
.list-head-inner{ max-width:var(--maxw); margin:0 auto; padding:34px var(--pad) 28px; position:relative; z-index:1; }
.list-head h1{ font-size:clamp(1.8rem,3vw,2.4rem); color:var(--ink); margin:6px 0 0; }
.list-head .category-intro{ margin:12px 0 20px; }
.list-section{ max-width:var(--maxw); margin:0 auto; padding:34px var(--pad) 76px; }

/* ========================= EMPTY CART (considered state) ========================= */
.cart-empty{ text-align:center; padding:56px 20px 24px; }
.cart-empty-icon{ width:76px; height:76px; margin:0 auto 22px; border-radius:50%; background:var(--sand); display:flex; align-items:center; justify-content:center; color:var(--accent-ink); }
.cart-empty-icon svg{ width:34px; height:34px; }
.cart-empty h2{ font-size:1.5rem; color:var(--ink); margin-bottom:8px; }
.cart-empty p{ color:var(--muted); margin-bottom:24px; }
.cart-empty-cats{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.cart-empty-cats a{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:100px; background:var(--card); border:1.5px solid var(--line); font-weight:600; font-size:.86rem; transition:all .18s; }
.cart-empty-cats a svg{ width:16px; height:16px; color:var(--accent); }
.cart-empty-cats a:hover{ border-color:var(--accent); color:var(--accent-press); transform:translateY(-2px); }

/* ========================= SEARCH (list page) ========================= */
.search-bar{ display:flex; gap:10px; max-width:560px; margin:0 0 26px; }
.search-bar input{ flex:1; padding:14px 20px; border:1.5px solid var(--line); border-radius:100px; font-family:inherit; font-size:.92rem; background:var(--card); transition:border-color .2s, box-shadow .2s; }
.search-bar input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(232,136,45,.12); }

/* ========================= FILTER TAGS ========================= */
.filter-tags{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:16px; }
.filter-tag{ display:inline-flex; align-items:center; gap:7px; padding:9px 17px; border-radius:100px; font-size:.83rem; font-weight:600; background:var(--card); border:1.5px solid var(--line); color:var(--text); transition:all .18s; white-space:nowrap; }
.filter-tag svg{ width:15px; height:15px; color:var(--muted); }
.filter-tag:hover{ border-color:var(--accent); color:var(--accent-press); } .filter-tag:hover svg{ color:var(--accent); }
.filter-tag.active{ background:var(--ink); color:#fff; border-color:var(--ink); } .filter-tag.active svg{ color:var(--accent); }
.filter-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.filter-pills{ display:flex; gap:7px; flex-wrap:wrap; }
.filter-pill{ padding:7px 15px; border-radius:100px; font-size:.78rem; font-weight:600; background:var(--sand); color:var(--muted); transition:all .18s; white-space:nowrap; }
.filter-pill:hover{ background:#e2d6c4; color:var(--ink); }
.filter-pill.active{ background:var(--accent-ink); color:#fff; }
.filter-pill-clear{ padding:7px 14px; font-size:.78rem; color:var(--red); font-weight:600; }
.filter-pill-clear:hover{ text-decoration:underline; }
.sort-select select{ padding:9px 15px; border:1.5px solid var(--line); border-radius:100px; font-family:inherit; font-size:.82rem; background:var(--card); cursor:pointer; transition:border-color .2s; }
.sort-select select:focus{ outline:none; border-color:var(--accent); }
.result-count{ color:var(--faint); margin-bottom:22px; font-size:.85rem; font-weight:500; }

/* ========================= PRODUCT GRID + CARD ========================= */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.featured .product-grid{ position:relative; z-index:2; }
.product-card{ background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-soft); box-shadow:var(--shadow-near); display:flex; flex-direction:column; position:relative; min-width:0; transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s; }
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-far); border-color:var(--line); }
.product-card-image{ aspect-ratio:1; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; position:relative; }
.product-card-image img{ width:100%; height:100%; object-fit:contain; padding:20px; transition:transform .45s var(--ease); }
.product-card:hover .product-card-image img{ transform:scale(1.055); }
.no-image,.no-image-large{ color:var(--faint); font-size:.85rem; }
.no-image-large{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:var(--radius); }
.product-card-body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.product-card-body h3{ font-family:var(--font-body); font-size:.9rem; font-weight:600; line-height:1.35; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-brand{ font-family:var(--font-display); font-size:.68rem; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.card-price-row{ display:flex; align-items:baseline; gap:9px; margin-top:auto; padding-top:8px; flex-wrap:wrap; }
.card-price{ font-family:var(--font-display); font-size:1.24rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.card-ship-free{ font-size:.62rem; color:var(--green); font-weight:700; background:var(--green-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.card-vat{ font-size:.64rem; color:var(--faint); display:block; }
.card-badge-sold{ position:absolute; top:12px; left:12px; background-image:linear-gradient(var(--red),var(--red)); forced-color-adjust:none; color:#fff; font-family:var(--font-display); font-size:.66rem; font-weight:700; padding:4px 11px; border-radius:100px; letter-spacing:.02em; z-index:2; }
.card-sales-badge{ margin-bottom:2px; }
.badge-fire,.badge-hot,.badge-recent,.badge-scarce,.badge-popular{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-display); font-size:.66rem; font-weight:700; padding:3px 10px; border-radius:100px; letter-spacing:.01em; }
.badge-fire{ background-image:linear-gradient(var(--accent),var(--accent)); forced-color-adjust:none; color:#fff; }
.badge-hot{ background:rgba(232,136,45,.12); color:var(--accent-ink); }
.badge-recent{ background:rgba(37,99,235,.09); color:#2258c9; }
.badge-scarce{ background:rgba(210,59,47,.1); color:var(--red); }
.badge-popular{ background:var(--green-bg); color:var(--green); }
.detail-sales-badge{ margin-bottom:12px; }
.detail-sales-badge .badge-fire,.detail-sales-badge .badge-hot,.detail-sales-badge .badge-recent,.detail-sales-badge .badge-scarce,.detail-sales-badge .badge-popular{ font-size:.8rem; padding:6px 15px; }
.card-badge-cat{ position:absolute; bottom:10px; left:10px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); color:var(--muted); font-size:.6rem; font-weight:700; padding:3px 10px; border-radius:100px; letter-spacing:.02em; z-index:2; }
.card-variants{ font-size:.7rem; color:var(--muted); background:var(--sand); padding:3px 10px; border-radius:100px; display:inline-block; width:fit-content; font-weight:600; }

/* ========================= PRODUCT DETAIL ========================= */
.product-detail{ max-width:var(--maxw); margin:0 auto; padding:32px var(--pad) 96px; }
.back-link{ color:var(--muted); font-size:.84rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-bottom:26px; transition:color .15s, gap .2s; }
.back-link:hover{ color:var(--accent-press); gap:9px; }
.product-detail-grid{ display:grid; grid-template-columns:1.08fr 1fr; gap:56px; align-items:start; }
.product-images{ position:sticky; top:110px; }
.main-image{ background:#fff; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-soft); box-shadow:var(--shadow-near); aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.main-image img{ width:100%; height:100%; object-fit:contain; padding:34px; }
.image-thumbs{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.thumb{ width:70px; height:70px; object-fit:contain; border-radius:12px; cursor:pointer; border:2px solid var(--line-soft); transition:all .2s; background:#fff; padding:7px; }
.thumb.active,.thumb:hover{ border-color:var(--accent); box-shadow:0 4px 12px rgba(232,136,45,.2); }
.product-info h1{ font-size:clamp(1.5rem,2.4vw,2rem); font-weight:800; margin-bottom:6px; text-align:left; line-height:1.14; letter-spacing:-.025em; color:var(--ink); }
.product-brand{ font-family:var(--font-display); color:var(--accent-ink); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:14px; }
.product-price{ font-family:var(--font-display); font-size:2.4rem; font-weight:800; color:var(--ink); margin:14px 0 2px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.product-vat{ color:var(--muted); font-size:.8rem; margin-bottom:6px; }
.product-shipping{ color:var(--green); font-weight:600; font-size:.84rem; display:flex; align-items:center; gap:7px; }
.product-shipping::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); }
.product-condition{ color:var(--muted); font-size:.82rem; margin-top:12px; background:var(--sand); display:inline-block; padding:6px 13px; border-radius:100px; font-weight:500; }
.product-description{ margin-top:36px; padding-top:26px; border-top:1px solid var(--line-soft); }
.product-description>h3{ font-family:var(--font-display); font-size:1.05rem; font-weight:800; margin-bottom:12px; color:var(--ink); }
.product-description p{ color:var(--text); line-height:1.8; font-size:.9rem; margin-bottom:10px; }
.product-description h2{ font-size:1.05rem; font-weight:800; color:var(--ink); margin:22px 0 8px; }
.product-description ul,.product-description ol{ color:var(--text); font-size:.9rem; line-height:1.8; padding-left:20px; margin-bottom:12px; }
.product-description li{ margin-bottom:5px; }
.product-description table{ width:100%; border-collapse:collapse; font-size:.86rem; margin:12px 0; }
.product-description td,.product-description th{ padding:9px 12px; border:1px solid var(--line-soft); color:var(--text); text-align:left; }
.product-description th,.product-description td:first-child b{ font-weight:700; color:var(--ink); }
.product-description b{ font-weight:700; color:var(--ink); }
.product-meta{ color:var(--faint); font-size:.78rem; margin-top:5px; }

.eu-responsible-link{ margin-top:22px; }
.eu-responsible-link a{ color:var(--faint); font-size:.75rem; text-decoration:underline; text-underline-offset:2px; transition:color .15s; }
.eu-responsible-link a:hover{ color:var(--accent-press); }
.eu-modal{ display:none; position:fixed; inset:0; z-index:999; background:rgba(25,21,32,.45); backdrop-filter:blur(4px); align-items:center; justify-content:center; }
.eu-modal-content{ background:#fff; border-radius:var(--radius-lg); padding:32px 36px; max-width:400px; width:90%; position:relative; box-shadow:var(--shadow-far); }
.eu-modal-content h3{ font-family:var(--font-display); font-size:1rem; font-weight:800; color:var(--ink); margin-bottom:14px; }
.eu-modal-content p{ font-size:.85rem; color:var(--muted); line-height:1.7; margin-bottom:4px; }
.eu-company{ font-weight:700; color:var(--ink); font-size:.9rem; }
.eu-modal-close{ position:absolute; top:14px; right:18px; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--faint); transition:color .15s; }
.eu-modal-close:hover{ color:var(--ink); }

/* variant select / picker */
.variant-select{ margin-top:24px; }
.variant-select label{ font-family:var(--font-display); font-size:.78rem; font-weight:700; color:var(--muted); display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:.06em; }
.variant-select select{ width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-family:inherit; font-size:.9rem; background:var(--card); cursor:pointer; transition:all .2s; }
.variant-select select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(232,136,45,.12); }
.vp-hidden-select{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }
.variant-picker{ margin-top:26px; display:flex; flex-direction:column; gap:22px; }
.vp-group{ display:flex; flex-direction:column; gap:11px; }
.vp-label{ font-family:var(--font-display); font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.vp-chosen{ color:var(--ink); font-weight:800; text-transform:none; letter-spacing:0; }
.vp-swatches{ display:flex; flex-wrap:wrap; gap:12px; }
.vp-swatch{ display:flex; flex-direction:column; align-items:center; gap:6px; width:88px; padding:8px; background:#fff; border:2px solid var(--line); border-radius:14px; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .12s; font-family:inherit; }
.vp-swatch:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 16px rgba(232,136,45,.16); }
.vp-swatch.active{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,136,45,.2); }
.vp-swatch img{ width:68px; height:68px; object-fit:cover; border-radius:9px; background:#f3f1ee; }
.vp-swatch-label{ font-size:.74rem; font-weight:600; color:var(--text); text-align:center; line-height:1.2; }
.vp-sizes{ display:flex; flex-wrap:wrap; gap:10px; }
.vp-size{ min-width:54px; padding:13px 16px; background:#fff; border:2px solid var(--line); border-radius:12px; font-family:var(--font-display); font-size:.94rem; font-weight:700; color:var(--ink); cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s, color .15s; }
.vp-size:hover:not(.vp-unavailable){ border-color:var(--accent); }
.vp-size.active{ border-color:var(--ink); background:var(--ink); color:#fff; box-shadow:0 0 0 3px rgba(232,136,45,.2); }
.vp-size.vp-unavailable{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.variant-picker .variant-hint{ color:var(--red); font-size:.8rem; margin:2px 0 0; font-weight:500; }

/* variant tiles (legacy) */
.variant-tiles{ margin-top:20px; padding:14px; background:var(--sand); border:1px solid var(--line-soft); border-radius:var(--radius-sm); }
.variant-tiles-label{ margin:0 0 10px; font-size:13px; color:var(--muted); }
.variant-tiles-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.variant-tile{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; background:#fff; border:2px solid var(--line); border-radius:10px; cursor:pointer; transition:transform .12s, border-color .12s, box-shadow .12s; text-align:center; font-family:inherit; }
.variant-tile:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 14px rgba(232,136,45,.15); }
.variant-tile.active{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(232,136,45,.15); background:#fff7ef; }
.variant-tile img{ width:72px; height:72px; object-fit:cover; border-radius:6px; background:#f3f4f6; }
.variant-tile-label{ font-size:12px; font-weight:700; color:var(--ink); max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.variant-tile-count{ font-size:10px; color:var(--muted); }

/* add to cart block */
.stock-warning{ color:var(--red); font-size:.84rem; font-weight:700; margin-top:14px; display:inline-flex; align-items:center; gap:7px; }
.stock-warning::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red); }
.stock-ok{ color:var(--green); font-size:.84rem; font-weight:600; margin-top:14px; }
.sold-out-box{ background:#fbeeec; border:1px solid #f3cfc9; border-radius:var(--radius); padding:20px; text-align:center; color:var(--red); font-weight:600; margin:16px 0; }
.add-to-cart-section{ margin-top:28px; padding-top:26px; border-top:1px solid var(--line-soft); }
.add-to-cart-section>label{ font-family:var(--font-display); font-size:.78rem; font-weight:700; color:var(--muted); display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em; }
.qty-row{ display:flex; gap:12px; align-items:stretch; }
.qty-row input[type="number"]{ width:74px; padding:14px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-family:var(--font-display); font-size:1.05rem; text-align:center; font-weight:700; transition:all .2s; }
.qty-row input[type="number"]:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(232,136,45,.12); }
.qty-row .btn-buy{ flex:1; }

.payment-methods{ display:flex; gap:7px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.pay-badge{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 12px; font-family:var(--font-display); font-size:.68rem; font-weight:700; color:var(--muted); letter-spacing:.01em; }
.delivery-info{ display:flex; align-items:center; gap:13px; margin-top:18px; padding:14px 16px; background:var(--green-bg); border:1px solid #cbe6d5; border-radius:var(--radius-sm); font-size:.86rem; color:#15633f; }
.delivery-icon{ display:flex; color:var(--green); flex-shrink:0; } .delivery-icon svg{ width:24px; height:24px; }
.delivery-sub{ font-size:.75rem; color:#1c6b47; font-weight:400; }
.trust-row{ display:flex; gap:20px; margin-top:18px; flex-wrap:wrap; }
.trust-item{ display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--muted); font-weight:600; }
.trust-icon{ display:flex; color:var(--accent); } .trust-icon svg{ width:16px; height:16px; }

/* sticky mobile add-to-cart bar */
.buybar{ position:fixed; left:0; right:0; bottom:0; z-index:150; display:none; align-items:center; gap:14px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,253,250,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line); box-shadow:0 -10px 30px -20px rgba(25,21,32,.4); }
.buybar-info{ min-width:0; }
.buybar-title{ font-size:.76rem; color:var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.buybar-price{ font-family:var(--font-display); font-size:1.15rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.buybar .btn-buy{ margin-left:auto; padding:14px 26px; flex-shrink:0; }

/* ========================= CART ========================= */
.cart-table{ margin-bottom:36px; }
.cart-header-row{ display:grid; grid-template-columns:3fr 1fr 92px 1fr 40px; gap:12px; padding:12px 0; border-bottom:1.5px solid var(--line); font-family:var(--font-display); font-weight:700; font-size:.72rem; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; }
.cart-row{ display:grid; grid-template-columns:3fr 1fr 92px 1fr 40px; gap:12px; padding:20px 0; border-bottom:1px solid var(--line-soft); align-items:center; min-width:0; }
.cart-row>span{ font-variant-numeric:tabular-nums; }
.cart-product{ display:flex; gap:16px; align-items:center; min-width:0; }
.cart-product strong{ font-weight:600; }
.cart-thumb{ width:74px; height:74px; object-fit:contain; border-radius:12px; background:#fff; border:1px solid var(--line-soft); flex-shrink:0; padding:7px; }
.cart-qty{ width:62px; padding:10px; border:1.5px solid var(--line); border-radius:10px; text-align:center; font-family:var(--font-display); font-size:.9rem; font-weight:700; transition:all .2s; }
.cart-qty:focus{ outline:none; border-color:var(--accent); }
.btn-remove{ background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--faint); transition:color .15s; line-height:1; }
.btn-remove:hover{ color:var(--red); }
.cart-summary{ background:var(--card); border-radius:var(--radius-lg); padding:32px; border:1px solid var(--line-soft); box-shadow:var(--shadow-near); max-width:460px; margin-left:auto; }
.summary-row{ display:flex; justify-content:space-between; padding:11px 0; font-size:.92rem; color:var(--muted); }
.summary-row span:last-child{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); }
.summary-total{ border-top:2px solid var(--ink); margin-top:10px; padding-top:16px; font-family:var(--font-display); font-size:1.3rem; font-weight:800; color:var(--ink); }
.summary-total span{ color:var(--ink)!important; }
.vat-note{ font-size:.78rem; color:var(--faint); text-align:right; margin-top:6px; }
.cart-actions{ display:flex; gap:12px; margin-top:28px; justify-content:flex-end; flex-wrap:wrap; }

/* ========================= CHECKOUT ========================= */
.checkout-grid{ display:grid; grid-template-columns:1fr 420px; gap:40px; align-items:start; }
.checkout-left{ display:flex; flex-direction:column; gap:24px; }
.form-card{ background:var(--card); border-radius:var(--radius-lg); padding:32px; border:1px solid var(--line-soft); box-shadow:var(--shadow-near); }
.form-card h2{ font-family:var(--font-display); font-size:1.15rem; font-weight:800; margin-bottom:24px; letter-spacing:-.02em; color:var(--ink); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-group{ margin-bottom:16px; min-width:0; }
.form-group label{ display:block; font-family:var(--font-display); font-size:.72rem; font-weight:700; color:var(--muted); margin-bottom:7px; text-transform:uppercase; letter-spacing:.05em; }
.form-group input,.form-group select,.form-group textarea{ width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:.9rem; font-family:inherit; background:var(--card); transition:all .2s; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(232,136,45,.12); }
.checkbox-label{ display:flex; align-items:center; gap:10px; font-size:.9rem; margin-bottom:18px; cursor:pointer; color:var(--text); font-weight:500; }
.checkbox-label input{ width:auto; accent-color:var(--accent); }
.order-summary{ position:sticky; top:110px; }
.checkout-item{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; font-size:.86rem; border-bottom:1px solid var(--line-soft); color:var(--muted); }
.checkout-item span:last-child{ font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.checkout-legal{ font-size:.72rem; color:var(--faint); margin-top:14px; line-height:1.6; }
.checkout-login-hint{ text-align:center; font-size:.9rem; color:var(--muted); margin-bottom:24px; background:rgba(232,136,45,.07); padding:14px; border-radius:var(--radius-sm); }
.checkout-login-hint a,.checkout-legal a{ color:var(--accent-ink); font-weight:700; }

/* ========================= SUCCESS ========================= */
.success-box{ max-width:520px; margin:0 auto; padding:80px 24px; text-align:center; }
.success-icon{ width:88px; height:88px; border-radius:50%; background-image:linear-gradient(135deg,var(--accent),#f5a55a); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 32px; box-shadow:0 16px 40px -12px rgba(232,136,45,.6); }
.success-icon svg{ width:44px; height:44px; }
.success-box h1{ font-size:1.7rem; font-weight:800; margin-bottom:12px; color:var(--ink); }
.success-box p{ color:var(--muted); margin-bottom:8px; }
.success-detail{ font-family:var(--font-display); color:var(--accent-ink); font-weight:800; font-size:1.2rem; margin:24px 0; letter-spacing:.03em; background:rgba(232,136,45,.08); display:inline-block; padding:10px 22px; border-radius:100px; font-variant-numeric:tabular-nums; }
.success-box .btn{ margin-top:32px; }
.success-details{ max-width:720px; margin:0 auto; }
.success-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; margin-top:8px; text-align:left; }
.success-card{ background:var(--card); border-radius:var(--radius); padding:26px; border:1px solid var(--line-soft); box-shadow:var(--shadow-near); }
.success-card h3{ font-family:var(--font-display); font-size:.85rem; font-weight:800; color:var(--ink); margin-bottom:12px; text-transform:uppercase; letter-spacing:.04em; }
.success-card p{ font-size:.88rem; color:var(--muted); line-height:1.7; }
.success-item{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:.86rem; color:var(--muted); border-bottom:1px solid var(--line-soft); }
.success-item span:last-child{ font-variant-numeric:tabular-nums; }
.success-item-total{ border-top:2px solid var(--ink); border-bottom:none; font-family:var(--font-display); font-weight:800; color:var(--ink); margin-top:8px; padding-top:12px; }

/* ========================= LEGAL / PAGE ========================= */
.page-section h1{ font-size:clamp(1.7rem,3vw,2.3rem); color:var(--ink); margin-bottom:26px; }
.legal{ max-width:820px; }
.legal h1{ text-align:left; margin-bottom:28px; }
.legal h2{ font-family:var(--font-display); font-size:1.1rem; margin:32px 0 8px; color:var(--ink); font-weight:800; }
.legal p,.legal li{ color:var(--text); line-height:1.85; font-size:.9rem; }
.legal ul{ padding-left:24px; margin:8px 0; }
.legal a{ color:var(--accent-ink); font-weight:600; }
.legal a:hover{ text-decoration:underline; }
.legal-date{ margin-top:40px; color:var(--faint); font-size:.78rem; }

/* ========================= FOOTER ========================= */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.56); padding:64px var(--pad) 40px; margin-top:64px; position:relative; overflow:hidden; }
.site-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background-image:linear-gradient(90deg,var(--accent),var(--accent-deep)); }
.footer-inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; align-items:start; position:relative; z-index:2; }
.footer-brandmark{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:-.04em; color:#fff; margin-bottom:14px; }
.footer-brandmark .lm-shop{ color:var(--accent); }
.footer-col{ font-size:.82rem; line-height:1.85; }
.footer-brand strong{ color:rgba(255,255,255,.9); font-size:.86rem; font-weight:600; }
.footer-links{ display:flex; flex-direction:column; gap:8px; }
.footer-links a{ color:rgba(255,255,255,.56); transition:color .15s; width:fit-content; }
.footer-links a:hover{ color:var(--accent); }
.footer-col-title{ font-family:var(--font-display); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.4); margin-bottom:14px; }
.footer-copy{ color:rgba(255,255,255,.36); font-size:.74rem; }

/* ========================= AUTH & ACCOUNT ========================= */
.auth-card{ max-width:460px; margin:40px auto; background:var(--card); border-radius:var(--radius-lg); padding:44px 40px; border:1px solid var(--line-soft); box-shadow:var(--shadow-far); }
.auth-card h1{ text-align:center; font-size:1.6rem; margin-bottom:6px; color:var(--ink); }
.auth-sub{ text-align:center; color:var(--muted); font-size:.9rem; margin-bottom:26px; }
.auth-form{ margin-top:8px; }
.auth-error{ background:#fbeeec; color:var(--red); border:1px solid #f3cfc9; border-radius:var(--radius-sm); padding:13px 16px; font-size:.86rem; margin-bottom:16px; }
.auth-success{ background:var(--green-bg); color:var(--green); border:1px solid #cbe6d5; border-radius:var(--radius-sm); padding:13px 16px; font-size:.86rem; margin-bottom:16px; }
.auth-link{ text-align:center; margin-top:22px; font-size:.86rem; color:var(--muted); }
.auth-link a{ color:var(--accent-ink); font-weight:700; }
.auth-link a:hover{ text-decoration:underline; }
.account-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.account-header h1{ margin-bottom:0; text-align:left; color:var(--ink); }
.account-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.order-list{ display:flex; flex-direction:column; gap:12px; }
.order-item{ border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px; transition:border-color .15s, box-shadow .15s; background:var(--card); }
.order-item:hover{ border-color:var(--accent); box-shadow:var(--shadow-near); }
.order-item-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:10px; }
.order-number{ font-family:var(--font-display); font-weight:700; font-size:.88rem; }
.order-badge{ color:#fff; font-family:var(--font-display); font-size:.68rem; font-weight:700; padding:3px 11px; border-radius:100px; text-transform:capitalize; }
.order-item-body{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted); margin-bottom:4px; }
.order-total{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.order-item-products{ font-size:.78rem; color:var(--faint); }

/* ========================= MISC ========================= */
.recent-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.recent-card{ background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-soft); box-shadow:var(--shadow-near); transition:transform .25s var(--ease), box-shadow .25s var(--ease); display:flex; flex-direction:column; min-width:0; }
.recent-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-far); }
.recent-card img{ width:100%; aspect-ratio:1; object-fit:contain; padding:14px; background:#fff; }
.recent-info{ padding:12px 14px; }
.recent-title{ font-size:.8rem; font-weight:600; color:var(--text); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.recent-price{ font-family:var(--font-display); font-size:.94rem; font-weight:800; color:var(--ink); display:block; margin-top:2px; font-variant-numeric:tabular-nums; }

.error-page{ padding:96px 0; text-align:center; }
.error-code{ font-family:var(--font-display); font-size:6rem; font-weight:800; color:var(--accent); letter-spacing:-.04em; margin-bottom:8px; line-height:1; }
.error-page p{ color:var(--muted); margin-bottom:28px; }
.empty-state{ text-align:center; color:var(--muted); padding:72px 0; font-size:1rem; }
.empty-state a{ color:var(--accent-ink); font-weight:700; }

.toast-container{ position:fixed; bottom:28px; right:28px; z-index:999; display:flex; flex-direction:column; gap:10px; }
.toast{ background:var(--ink); color:#fff; padding:15px 22px; border-radius:14px; font-size:.86rem; font-weight:500; opacity:0; transform:translateY(14px); transition:all .35s var(--ease); box-shadow:var(--shadow-far); border-left:3px solid var(--accent); }
.toast.show{ opacity:1; transform:translateY(0); }

/* breadcrumb */
.breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0 0 18px; font-size:13px; color:var(--muted); }
.breadcrumb li{ display:flex; align-items:center; }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:6px; color:var(--line); }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--accent-press); }
.breadcrumb [aria-current="page"]{ color:var(--ink); font-weight:600; max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.category-intro{ color:var(--muted); max-width:70ch; margin:-4px 0 22px; line-height:1.6; font-size:15px; }

/* ===================================================================
   RESPONSIVE  (overrides at end; edges tested 390/768/900/1024)
   =================================================================== */
@media (max-width:1024px){
  .hero-split{ grid-template-columns:1fr; padding-top:24px; gap:0; }
  .hero-panel{ margin-right:0; margin-bottom:-48px; order:2; z-index:3; padding:40px 32px; }
  .hero-media{ order:1; min-height:340px; }
  .ribbon{ margin-top:0; }
  .product-grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .recent-grid{ grid-template-columns:repeat(3,1fr); }
  .product-detail-grid{ grid-template-columns:1fr; gap:32px; }
  .product-images{ position:static; }
  .checkout-grid{ grid-template-columns:1fr; }
  .order-summary{ position:static; }
  .trust-band-inner{ grid-template-columns:1fr; gap:28px; }
  .cat-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; }
  .cat-tile.feat{ grid-column:span 4; grid-row:span 1; }
  .cat-tile,.cat-tile.tall{ grid-row:span 1; }
  .header-search{ display:none; }
}

@media (max-width:768px){
  :root{ --pad:16px; }
  .topbar-inner{ gap:6px 14px; font-size:.68rem; }
  .topbar-item.hide-sm,.topbar-sep{ display:none; }
  .nav-toggle{ display:block; }
  .main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:rgba(246,241,233,.98); backdrop-filter:blur(12px); flex-direction:column; align-items:flex-start; padding:20px var(--pad); gap:16px; border-bottom:1px solid var(--line-soft); box-shadow:var(--shadow-far); margin-left:0; }
  .main-nav.open{ display:flex; }
  .main-nav a{ font-size:1.05rem; padding:4px 0; width:100%; } .main-nav a::after{ display:none; }
  .main-nav .cart-link{ display:flex; align-items:center; }
  .header-inner{ height:62px; gap:12px; }
  .site-header.scrolled .header-inner{ height:58px; }
  .logo-mark{ font-size:1.5rem; }
  .header-right{ margin-left:auto; }

  .featured,.page-section,.cat-section,.home-section{ padding:48px var(--pad); }
  .hero-panel{ padding:32px 22px; margin-bottom:-40px; }
  .hero-title{ font-size:clamp(2rem,8vw,2.6rem); }
  .hero-sub{ font-size:.98rem; }
  .hero-media{ min-height:270px; border-radius:var(--radius); }
  .ribbon-item{ font-size:.84rem; padding:0 20px; }

  .cat-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; gap:12px; }
  .cat-tile,.cat-tile.feat,.cat-tile.tall{ grid-column:span 1; grid-row:span 1; }
  .cat-tile.feat{ grid-column:span 2; }
  .cat-tile.feat .cat-tile-name{ font-size:1.15rem; }

  .trust-stats{ grid-template-columns:1fr; gap:12px; }
  .trust-stat{ display:flex; align-items:baseline; gap:14px; padding:18px; }
  .trust-stat .ts-label{ margin-top:0; }

  .product-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .recent-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .product-card-image img{ padding:14px; }
  .product-card-body{ padding:13px 14px 16px; }

  .product-detail{ padding:20px var(--pad) 120px; }
  .main-image img{ padding:20px; }
  .thumb{ width:58px; height:58px; }
  .buybar{ display:flex; }

  .cart-header-row{ display:none; }
  .cart-row{ grid-template-columns:1fr; gap:12px; padding:18px 0; }
  .cart-product{ flex-wrap:nowrap; }
  .cart-summary{ max-width:100%; padding:24px; }
  .cart-actions{ justify-content:stretch; } .cart-actions .btn{ flex:1; }

  .form-row{ grid-template-columns:1fr; }
  .form-card{ padding:24px 20px; }
  .success-grid{ grid-template-columns:1fr; }
  .account-grid{ grid-template-columns:1fr; }
  .account-header{ flex-direction:column; align-items:flex-start; }
  .footer-inner{ grid-template-columns:1fr; gap:28px; text-align:left; }
  .section-header h2,.section-head h2,.featured h2{ font-size:1.55rem; }
  .filter-tags{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
  .filter-tags::-webkit-scrollbar{ display:none; }
}

@media (max-width:400px){
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .hero-cta-row .btn{ width:100%; }
  .qty-row{ flex-wrap:wrap; }
}

/* ========================= REDUCED MOTION ========================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .hero-media img.hero-bg{ animation:none; }
  .ribbon-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .js-motion .reveal,.js-motion .reveal-left,.js-motion .reveal-scale{ opacity:1!important; transform:none!important; }
}