/* ============================================================
   JOOYA × La.Bea — Official Shop
   Design system: modern collector toy / cyber-pop / premium
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Instrument+Serif:ital@0;1&family=Baloo+2:wght@500;600;700;800&display=swap');

:root{
  /* neutrals — warm gallery off-white */
  --bg:        #f3f1ec;
  --bg-2:      #eceae4;
  --surface:   #ffffff;
  --ink:       #15141b;
  --ink-2:     #4b4956;
  --ink-3:     #8c8a96;
  --line:      #e3e0d8;
  --line-2:    #d6d3ca;

  /* brand accents — La.Bea signature */
  --blue:      #2f63ff;   /* electric blue */
  --blue-deep: #1b1247;   /* cyber indigo */
  --pink:      #ff4fa3;   /* neon pink */
  --pink-soft: #ffd6e8;
  --blue-soft: #dbe4ff;
  --accent:    var(--blue);
  --accent-ink:#ffffff;

  /* misc */
  --radius:    22px;
  --radius-sm: 14px;
  --radius-lg: 32px;
  --shadow:    0 1px 2px rgba(20,20,30,.04), 0 18px 40px -20px rgba(20,20,40,.18);
  --shadow-lg: 0 30px 80px -30px rgba(25,20,60,.35);
  --maxw:      1240px;
  --header-h:  68px;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;
}

/* vibe variants (Tweaks) */
[data-vibe="neon"]{ --accent:#7b5cff; --blue:#7b5cff; --bg:#0e0a1f; --bg-2:#160f2e; --surface:#1b1336; --ink:#f4f1ff; --ink-2:#bcb4d8; --ink-3:#8780a3; --line:#2c2350; --line-2:#3a2f63; --shadow:0 18px 50px -22px rgba(0,0,0,.6); --shadow-lg:0 40px 90px -30px rgba(0,0,0,.7); }
[data-vibe="premium"]{ --blue:#1f1b2e; --accent:#1f1b2e; --pink:#c9456f; --bg:#f6f4ef; --bg-2:#edeae2; }

/* ── Editorial Kawaii ── serif headlines · cobalt & magenta · paper texture */
[data-vibe="editorial"]{
  --bg:#fbf3e8; --bg-2:#f2e7d6; --surface:#fffaf2; --ink:#211c2e; --ink-2:#5c5468; --ink-3:#9a8f86;
  --line:#e7dcca; --line-2:#d9ccb6;
  --accent:#2540cf; --blue:#2540cf; --blue-deep:#1a1a4a; --pink:#e3367f; --pink-soft:#fbd9e8; --blue-soft:#dde2ff;
  --radius:10px; --radius-sm:7px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(40,30,20,.05), 0 16px 30px -22px rgba(60,40,30,.28);
  --font-display:'Instrument Serif', Georgia, serif;
}
[data-vibe="editorial"] body{ background-image:radial-gradient(rgba(120,90,50,.05) 1px, transparent 1px); background-size:4px 4px; }
[data-vibe="editorial"] .display{ font-weight:400; letter-spacing:-.01em; line-height:1.0; }
[data-vibe="editorial"] h1.display{ font-size:clamp(50px,8vw,118px); }
[data-vibe="editorial"] .logo-word{ font-family:'Instrument Serif',serif; font-weight:400; font-size:30px; letter-spacing:0; }
[data-vibe="editorial"] .hero__copy .kick{ font-style:italic; color:var(--pink); }
[data-vibe="editorial"] .coll__body h3,
[data-vibe="editorial"] .blind__copy h2,
[data-vibe="editorial"] .news h2,
[data-vibe="editorial"] .pdp__info h1,
[data-vibe="editorial"] .drawer__head h3,
[data-vibe="editorial"] .confirm h1{ font-weight:400; }
[data-vibe="editorial"] .btn{ border-radius:8px; }
[data-vibe="editorial"] .chip{ border-radius:6px; }
[data-vibe="editorial"] .card__price,[data-vibe="editorial"] .hero__meta b,[data-vibe="editorial"] .odds div b{ font-weight:400; }
[data-vibe="editorial"] .hero__stage{ background:linear-gradient(160deg,#2540cf,#1a1a4a 70%); }
[data-vibe="editorial"] .news{ background:linear-gradient(120deg,#2540cf,#e3367f); }
[data-vibe="editorial"] .band{ background:#1a1a4a; }
[data-vibe="editorial"] .band .track{ font-family:'Instrument Serif',serif; font-weight:400; font-size:26px; }

/* ── Pebble Soft-Tech ── plump pastel bubbles · peach & butter · chunky shadows */
[data-vibe="pebble"]{
  --bg:#fff3e2; --bg-2:#ffe7cf; --surface:#fffdf8; --ink:#4a3b2e; --ink-2:#8a7560; --ink-3:#b6a48f;
  --line:#f3ddc2; --line-2:#eccfac;
  --accent:#ff8a5b; --blue:#ff8a5b; --blue-deep:#5a3b2a; --pink:#ff6fa5; --pink-soft:#ffe0ec; --blue-soft:#ffe6d2;
  --radius:30px; --radius-sm:20px; --radius-lg:40px;
  --shadow:0 8px 0 rgba(214,160,110,.30); --shadow-lg:0 16px 0 rgba(214,160,110,.30);
  --font-display:'Baloo 2', system-ui, sans-serif;
}
[data-vibe="pebble"] .display{ font-weight:800; letter-spacing:-.01em; }
[data-vibe="pebble"] .logo-word{ font-family:'Baloo 2',sans-serif; font-weight:800; }
[data-vibe="pebble"] .btn{ box-shadow:0 5px 0 rgba(180,120,80,.3); }
[data-vibe="pebble"] .btn:hover{ transform:translateY(-1px); box-shadow:0 6px 0 rgba(180,120,80,.3); }
[data-vibe="pebble"] .btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(180,120,80,.3); }
[data-vibe="pebble"] .btn--accent{ background:var(--accent); color:#fff; }
[data-vibe="pebble"] .card{ border-width:2px; box-shadow:0 6px 0 rgba(214,160,110,.22); }
[data-vibe="pebble"] .card:hover{ box-shadow:0 12px 0 rgba(214,160,110,.26); transform:translateY(-3px); }
[data-vibe="pebble"] .chip{ font-weight:700; }
[data-vibe="pebble"] .merch,[data-vibe="pebble"] .typeopt,[data-vibe="pebble"] .pay-card,[data-vibe="pebble"] .field input,[data-vibe="pebble"] .field select,[data-vibe="pebble"] .osummary{ border-width:2px; }
[data-vibe="pebble"] .iconbtn:hover{ background:var(--bg-2); }
[data-vibe="pebble"] .hero__stage{ background:radial-gradient(120% 120% at 70% 12%, #ffb07a 0%, #ff8a5b 45%, #ff6fa5 100%); }
[data-vibe="pebble"] .blind{ background:linear-gradient(150deg,#ff8a5b,#ff6fa5); }
[data-vibe="pebble"] .blind__copy .eyebrow,[data-vibe="pebble"] .blind__copy p{ color:rgba(255,255,255,.92); }
[data-vibe="pebble"] .news{ background:linear-gradient(120deg,#ff8a5b,#ff6fa5); }
[data-vibe="pebble"] .band{ background:#5a3b2a; }
[data-vibe="pebble"] .band .track .glyph{ color:#ffc49b; }
[data-vibe="pebble"] .footer{ background:#5a3b2a; }
[data-vibe="pebble"] .pill,[data-vibe="pebble"] .qty,[data-vibe="pebble"] .swatch{ border-width:2px; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--blue); color:#fff; }

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3); font-weight:700;
}
.display{
  font-family:var(--font-display); font-weight:800; line-height:.96;
  letter-spacing:-.02em; margin:0;
}
h1.display{ font-size:clamp(44px,7vw,104px); }
h2.display{ font-size:clamp(32px,4.4vw,60px); }
.serifless{ font-variation-settings:"opsz" 60; }

/* ---------- boombox glyph motif ---------- */
.glyph{ display:inline-flex; gap:.42em; align-items:center; font-size:1em; line-height:1; }
.glyph i{ width:.62em; height:.62em; display:inline-block; background:currentColor; }
.glyph i.tri{ clip-path:polygon(50% 100%,0 0,100% 0); }      /* ▽ */
.glyph i.cir{ border-radius:50%; }                            /* ○ */
.glyph i.triu{ clip-path:polygon(50% 0,0 100%,100% 100%); }   /* △ */
.glyph i.sq{ border-radius:1px; }                             /* □ */

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ padding:84px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:38px; flex-wrap:wrap; }
.section-head .lead{ max-width:560px; }
.section-head p{ color:var(--ink-2); margin:.5em 0 0; font-size:16px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  font-weight:600; font-size:15px; padding:14px 26px; border-radius:999px;
  background:var(--ink); color:var(--bg); transition:.18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--accent{ background:var(--accent); color:var(--accent-ink); box-shadow:0 12px 30px -12px color-mix(in oklab, var(--accent), transparent 30%); }
.btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--block{ width:100%; }
.btn--lg{ padding:17px 32px; font-size:16px; }
.btn--sm{ padding:10px 18px; font-size:13px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

/* ---------- chips / badges ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.45em; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding:6px 11px; border-radius:999px; background:var(--bg-2); color:var(--ink-2);
}
.chip--blue{ background:var(--blue-soft); color:var(--blue); }
.chip--pink{ background:var(--pink-soft); color:#c9356f; }
.chip--new{ background:var(--ink); color:var(--bg); }

/* swatches */
.dot{ width:15px; height:15px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12); }

/* ============================================================
   HEADER
   ============================================================ */
.announce{
  background:var(--blue-deep); color:#eae6ff; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.04em;
}
.announce__row{ display:flex; align-items:center; justify-content:center; gap:34px; padding:9px 28px; }
.announce__i{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
@media (max-width:760px){ .announce__hide{ display:none; } }

.header{ position:sticky; top:0; z-index:60; background:color-mix(in oklab,var(--bg),transparent 8%); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.header__in{ height:var(--header-h); display:flex; align-items:center; gap:28px; }
.logo{ display:flex; align-items:center; }
.logo-lockup{ display:flex; align-items:center; gap:11px; }
.logo-mark{ display:block; flex:none; border-radius:10.5px; box-shadow:0 5px 14px -5px color-mix(in oklab, var(--accent), transparent 35%); }
.logo-word{ font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.03em; color:var(--ink); }
.footer .logo-word{ color:#fff; }
.nav{ display:flex; gap:26px; margin-left:8px; }
.nav a{ font-size:14.5px; font-weight:500; color:var(--ink-2); position:relative; padding:4px 0; }
.nav a:hover, .nav a.active{ color:var(--ink); }
.nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); border-radius:2px; }
.header__tools{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.iconbtn{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:var(--ink); position:relative; transition:.16s; }
.iconbtn:hover{ background:var(--bg-2); }
.iconbtn .count{ position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; font-family:var(--font-mono); }

/* language menu */
.lang{ position:relative; }
.lang__btn{ display:flex; align-items:center; gap:7px; padding:9px 12px; border-radius:999px; font-size:13px; font-weight:600; color:var(--ink); }
.lang__btn:hover{ background:var(--bg-2); }
.lang__menu{ position:absolute; right:0; top:calc(100% + 8px); width:210px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:7px; z-index:80; }
.lang__menu button{ display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border-radius:11px; font-size:14px; color:var(--ink); text-align:left; }
.lang__menu button:hover{ background:var(--bg-2); }
.lang__menu button .flag{ font-size:17px; }
.lang__menu button .sub{ color:var(--ink-3); font-size:12px; margin-left:auto; font-family:var(--font-mono); }
.lang__menu button.sel{ background:var(--bg-2); }

/* mobile nav toggle */
.burger{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; padding:46px 0 60px; }
.hero__copy h1{ margin:0 0 22px; }
.hero__copy .kick{ color:var(--accent); }
.hero__sub{ font-size:18px; color:var(--ink-2); max-width:440px; margin:0 0 30px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero__meta{ display:flex; gap:30px; margin-top:34px; }
.hero__meta div{ }
.hero__meta b{ font-family:var(--font-display); font-size:26px; font-weight:800; display:block; }
.hero__meta span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

.hero__stage{ position:relative; aspect-ratio:1/1.04; border-radius:var(--radius-lg); overflow:hidden;
  background:radial-gradient(120% 120% at 70% 10%, #3a5cff 0%, #2b1c66 55%, #150d36 100%); }
[data-vibe="premium"] .hero__stage{ background:radial-gradient(120% 120% at 70% 10%, #2a2640 0%, #17141f 70%); }
.hero__stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:bottom center; filter:drop-shadow(0 30px 50px rgba(0,0,0,.35)); }
.hero__stage .halo{ position:absolute; width:70%; aspect-ratio:1; border-radius:50%; left:15%; top:18%; background:radial-gradient(circle, rgba(255,255,255,.25), transparent 65%); }
.hero__tag{ position:absolute; left:20px; bottom:20px; background:rgba(0,0,0,.42); backdrop-filter:blur(8px); color:#fff; border-radius:14px; padding:11px 15px; display:flex; align-items:center; gap:11px; }
.hero__tag .glyph{ color:#7fa0ff; font-size:11px; }
.hero__tag b{ font-family:var(--font-display); font-size:15px; }
.hero__tag span{ font-family:var(--font-mono); font-size:11px; color:#cdd; display:block; }
.spin-badge{ position:absolute; right:18px; top:18px; width:96px; height:96px; animation:spin 14s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.spin-badge text{ font-family:var(--font-mono); font-size:9.2px; letter-spacing:.18em; fill:#fff; text-transform:uppercase; }

/* marquee band */
.band{ background:var(--ink); color:var(--bg); overflow:hidden; }
.band .track{ display:inline-flex; gap:46px; padding:18px 0; white-space:nowrap; animation:marq 30s linear infinite; font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.01em; }
.band .track .glyph{ color:var(--pink); font-size:13px; }

/* ============================================================
   COLLECTION / CHARACTER CARDS
   ============================================================ */
.coll-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.coll{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4.1; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; isolation:isolate; }
.coll img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:.6s ease; }
.coll:hover img{ transform:scale(1.06); }
.coll::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(10,8,25,.86) 0%, rgba(10,8,25,.15) 45%, transparent 70%); }
.coll__body{ padding:24px; }
.coll__body .eyebrow{ color:rgba(255,255,255,.7); }
.coll__body h3{ font-family:var(--font-display); font-weight:800; font-size:28px; margin:6px 0 6px; }
.coll__body p{ font-size:13.5px; color:rgba(255,255,255,.8); margin:0 0 14px; max-width:30ch; }
.coll__link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; }
.coll__link .arr{ transition:.2s; }
.coll:hover .coll__link .arr{ transform:translateX(5px); }

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.grid-products{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.grid-products.cols-3{ grid-template-columns:repeat(3,1fr); }
.card{ background:var(--surface); border-radius:var(--radius); border:1px solid var(--line); overflow:hidden; transition:.22s ease; display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); }
.card__media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg-2); cursor:pointer; }
.card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .5s ease, transform .6s ease; }
.card__media img.alt{ opacity:0; }
.card:hover .card__media img.main{ opacity:0; }
.card:hover .card__media img.alt{ opacity:1; transform:scale(1.04); }
.card__heart{ position:absolute; top:11px; right:11px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.86); backdrop-filter:blur(6px); display:grid; place-items:center; color:var(--ink); z-index:3; transition:.16s; }
.card__heart:hover{ transform:scale(1.1); }
.card__heart.on{ color:var(--pink); }
.card__flags{ position:absolute; top:11px; left:11px; display:flex; flex-direction:column; gap:6px; z-index:3; }
.card__quick{ position:absolute; left:11px; right:11px; bottom:11px; z-index:3; transform:translateY(12px); opacity:0; transition:.24s ease; }
.card:hover .card__quick{ transform:translateY(0); opacity:1; }
.card__body{ padding:15px 16px 18px; display:flex; flex-direction:column; gap:9px; flex:1; }
.card__series{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.card__title{ font-weight:600; font-size:15.5px; line-height:1.25; }
.card__row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.card__price{ font-family:var(--font-display); font-weight:700; font-size:18px; }
.card__price s{ color:var(--ink-3); font-weight:400; font-size:13px; margin-right:6px; font-family:var(--font-body); }
.card__dots{ display:flex; gap:5px; }

.stars{ display:inline-flex; gap:1px; color:#ffb020; }
.stars + .scount{ font-size:12px; color:var(--ink-3); margin-left:5px; }

/* ============================================================
   BLIND BOX TEASER
   ============================================================ */
.blind{ background:var(--blue-deep); color:#fff; border-radius:var(--radius-lg); overflow:hidden; position:relative; }
.blind__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:center; }
.blind__copy{ padding:60px; }
.blind__copy .eyebrow{ color:#9db0ff; }
.blind__copy h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.6vw,50px); margin:12px 0 16px; line-height:1; }
.blind__copy p{ color:#c8c4e6; max-width:42ch; margin:0 0 26px; }
.blind__stage{ position:relative; min-height:440px; display:grid; place-items:center; }
.box{ width:240px; height:240px; position:relative; perspective:900px; cursor:pointer; }
.box__inner{ position:relative; width:100%; height:100%; transition:transform .8s cubic-bezier(.6,.1,.2,1); transform-style:preserve-3d; }
.box.open .box__inner{ transform:translateY(-30px) rotateX(-12deg); }
.box__lid{ position:absolute; left:-6%; right:-6%; top:0; height:42%; border-radius:14px; background:linear-gradient(145deg,#3a5cff,#6a3cff); box-shadow:0 12px 30px rgba(0,0,0,.4); transition:transform .8s cubic-bezier(.6,.1,.2,1); z-index:4; display:grid; place-items:center; }
.box.open .box__lid{ transform:translateY(-130px) rotate(-14deg); }
.box__lid .glyph{ color:#fff; font-size:16px; }
.box__base{ position:absolute; inset:18% 0 0; border-radius:14px; background:linear-gradient(145deg,#241a52,#150d36); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); z-index:1; overflow:hidden; }
.box__reveal{ position:absolute; left:50%; bottom:8%; transform:translateX(-50%) translateY(40px); width:160px; opacity:0; transition:.7s .25s cubic-bezier(.3,1.4,.5,1); z-index:3; }
.box.open .box__reveal{ transform:translateX(-50%) translateY(0); opacity:1; }
.box__reveal img{ border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.5); }
.box__glow{ position:absolute; inset:0; background:radial-gradient(circle at 50% 60%, rgba(120,150,255,.5), transparent 60%); opacity:0; transition:.6s; }
.box.open .box__glow{ opacity:1; }
.spark{ position:absolute; width:8px; height:8px; background:#fff; border-radius:50%; opacity:0; }
.box.open .spark{ animation:spark .9s ease-out forwards; }
@keyframes spark{ 0%{opacity:1; transform:scale(0) translate(0,0);} 100%{opacity:0; transform:scale(1) translate(var(--dx),var(--dy));} }
.odds{ display:flex; gap:22px; margin-top:24px; flex-wrap:wrap; }
.odds div b{ font-family:var(--font-display); font-size:22px; display:block; }
.odds div span{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#9b95c4; }

/* ============================================================
   MERCH CATEGORY TILES
   ============================================================ */
.merch-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.merch{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; display:flex; flex-direction:column; gap:12px; transition:.2s; aspect-ratio:1/1.12; }
.merch:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.merch__ico{ width:46px; height:46px; border-radius:13px; background:var(--bg-2); display:grid; place-items:center; color:var(--accent); }
.merch h4{ margin:auto 0 0; font-size:15px; font-weight:600; }
.merch span{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.05em; }

/* ============================================================
   LOOKBOOK / WORLD STRIP
   ============================================================ */
.look{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:230px; gap:14px; }
.look figure{ margin:0; position:relative; border-radius:var(--radius-sm); overflow:hidden; }
.look figure img{ width:100%; height:100%; object-fit:cover; transition:.6s; }
.look figure:hover img{ transform:scale(1.07); }
.look figure figcaption{ position:absolute; left:14px; bottom:12px; color:#fff; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.6); z-index:2; }
.look figure::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.5), transparent 50%); }
.look .span2{ grid-column:span 2; }
.look .row2{ grid-row:span 2; }

/* ============================================================
   STORY
   ============================================================ */
.story{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.story__art{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.story__art img{ width:100%; height:100%; object-fit:cover; }
.story h2{ margin:0 0 18px; }
.story p{ color:var(--ink-2); font-size:16.5px; margin:0 0 16px; }
.story .glyph{ color:var(--accent); font-size:14px; margin-bottom:18px; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news{ background:linear-gradient(120deg,var(--blue) 0%, #6a3cff 100%); color:#fff; border-radius:var(--radius-lg); padding:60px; text-align:center; position:relative; overflow:hidden; }
[data-vibe="premium"] .news{ background:linear-gradient(120deg,#211d33,#3a3450); }
.news h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.5vw,46px); margin:0 0 12px; }
.news p{ color:rgba(255,255,255,.85); max-width:46ch; margin:0 auto 26px; }
.news__form{ display:flex; gap:10px; max-width:440px; margin:0 auto; }
.news__form input{ flex:1; padding:15px 18px; border-radius:999px; border:none; font-family:inherit; font-size:15px; }
.news__form input:focus{ outline:2px solid #fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:#cfcdd6; padding:64px 0 32px; }
[data-vibe="neon"] .footer{ background:#0a0717; }
.footer__top{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer__brand .logo{ color:#fff; }
.footer__brand .logo .glyph{ color:var(--pink); }
.footer__brand p{ color:#9c9aa6; font-size:14px; max-width:32ch; margin:16px 0 20px; }
.footer h5{ color:#fff; font-size:13px; font-family:var(--font-mono); letter-spacing:.12em; text-transform:uppercase; margin:0 0 16px; }
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.footer ul a{ color:#9c9aa6; font-size:14px; }
.footer ul a:hover{ color:#fff; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; gap:20px; flex-wrap:wrap; }
.footer__bottom span{ font-family:var(--font-mono); font-size:12px; color:#76747f; }
.social{ display:flex; gap:10px; }
.social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; color:#cfcdd6; }
.social a:hover{ background:#fff; color:var(--ink); }

/* ============================================================
   APP DOWNLOAD
   ============================================================ */
.appdl{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; background:var(--blue-deep); color:#fff; border-radius:var(--radius-lg); padding:60px; overflow:hidden; }
.appdl__copy h2{ color:#fff; margin:10px 0 16px; }
.appdl__copy p{ color:rgba(255,255,255,.82); max-width:42ch; margin:0 0 24px; font-size:16px; }
.appdl__feat{ list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:13px; }
.appdl__feat li{ display:flex; align-items:center; gap:13px; font-size:15px; color:#e9e6f5; }
.appdl__feat .tick{ width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; color:#fff; flex:none; }
.appdl__badges{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.store-badge{ display:flex; align-items:center; gap:11px; background:#fff; color:#111; border-radius:14px; padding:11px 20px; transition:.18s; }
.store-badge:hover{ transform:translateY(-2px); }
.store-badge__txt{ display:flex; flex-direction:column; line-height:1.12; }
.store-badge__txt small{ font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:#666; }
.store-badge__txt b{ font-size:17px; font-family:var(--font-display); font-weight:700; }
.appdl__rate{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.85); font-size:13px; font-family:var(--font-mono); }
.appdl__device{ display:grid; place-items:center; }
.phone{ width:266px; height:540px; background:#0c0a16; border-radius:42px; padding:11px; box-shadow:0 40px 80px -30px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.1); position:relative; }
.phone__notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:116px; height:24px; background:#0c0a16; border-radius:0 0 15px 15px; z-index:3; }
.phone__screen{ width:100%; height:100%; border-radius:32px; overflow:hidden; }
.appui{ height:100%; display:flex; flex-direction:column; background:linear-gradient(180deg,#fbf3e8,#fffaf2 42%); color:#211c2e; }
.appui__top{ display:flex; justify-content:space-between; align-items:center; padding:28px 20px 6px; font-family:var(--font-mono); font-size:12px; }
.appui__top .glyph{ color:var(--blue); }
.appui__hi{ padding:8px 20px 12px; font-size:13.5px; font-weight:600; line-height:1.32; }
.appui__art{ flex:1; margin:0 14px; border-radius:22px; overflow:hidden; background:radial-gradient(circle at 60% 25%,#3a5cff,#1b1247); }
.appui__art img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.appui__chips{ display:flex; gap:8px; padding:13px 14px 4px; }
.appui__chips span{ font-size:11.5px; font-weight:600; padding:8px 13px; border-radius:999px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.07); white-space:nowrap; }
.appui__chips span:first-child{ background:var(--blue); color:#fff; }
.appui__tabs{ display:flex; justify-content:space-around; padding:14px 0 22px; }
.appui__tabs i{ width:26px; height:6px; border-radius:3px; background:#ddd5e2; }
.appui__tabs i.on{ background:var(--blue); width:30px; }

.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step3{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.step3__n{ font-family:var(--font-display); font-weight:800; font-size:34px; color:var(--accent); margin-bottom:12px; }
.step3 h4{ margin:0 0 8px; font-size:19px; font-weight:700; }
.step3 p{ margin:0; color:var(--ink-2); font-size:15px; line-height:1.55; }
@media (max-width:900px){ .appdl{ grid-template-columns:1fr; padding:42px; gap:36px; } .steps3{ grid-template-columns:1fr; } }
@media (max-width:640px){ .appdl{ padding:30px 22px; } .phone{ width:240px; height:486px; } }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.pdp{ display:grid; grid-template-columns:1.05fr .95fr; gap:50px; padding-top:30px; }
.pdp__gallery{ position:sticky; top:88px; align-self:start; }
.pdp__main{ border-radius:var(--radius); overflow:hidden; background:var(--bg-2); aspect-ratio:1/1; position:relative; }
.pdp__main img{ width:100%; height:100%; object-fit:cover; }
.pdp__thumbs{ display:flex; gap:10px; margin-top:12px; }
.pdp__thumbs button{ width:78px; height:78px; border-radius:13px; overflow:hidden; border:2px solid transparent; background:var(--bg-2); }
.pdp__thumbs button.sel{ border-color:var(--accent); }
.pdp__thumbs img{ width:100%; height:100%; object-fit:cover; }
.pdp__info .crumb{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.pdp__info h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.6vw,46px); line-height:1; margin:0 0 14px; letter-spacing:-.02em; }
.pdp__rate{ display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.pdp__price{ font-family:var(--font-display); font-weight:700; font-size:30px; display:flex; align-items:baseline; gap:12px; margin-bottom:24px; }
.pdp__price s{ color:var(--ink-3); font-weight:400; font-size:19px; font-family:var(--font-body); }
.pdp__desc{ color:var(--ink-2); font-size:16px; margin-bottom:28px; line-height:1.6; }
.opt{ margin-bottom:24px; }
.opt__label{ display:flex; justify-content:space-between; font-size:13px; font-weight:600; margin-bottom:11px; }
.opt__label .val{ color:var(--ink-2); font-weight:500; }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ width:46px; height:46px; border-radius:13px; overflow:hidden; border:2px solid transparent; padding:0; position:relative; background:var(--bg-2); }
.swatch img{ width:100%; height:100%; object-fit:cover; }
.swatch.sel{ border-color:var(--ink); }
.swatch .tick{ position:absolute; inset:0; }
.typeopts{ display:flex; gap:10px; flex-wrap:wrap; }
.typeopt{ border:1.5px solid var(--line-2); border-radius:14px; padding:13px 16px; text-align:left; min-width:120px; transition:.16s; background:var(--surface); }
.typeopt.sel{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.typeopt b{ display:block; font-size:14px; }
.typeopt span{ font-size:12px; color:var(--ink-3); }
.qty{ display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:999px; overflow:hidden; }
.qty button{ width:42px; height:46px; font-size:18px; color:var(--ink); }
.qty button:hover{ background:var(--bg-2); }
.qty span{ width:40px; text-align:center; font-weight:600; }
.pdp__buy{ display:flex; gap:12px; margin:8px 0 26px; }
.pdp__buy .qty{ flex:none; }
.pdp__buy .btn{ flex:1; }
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__head{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:18px 2px; font-weight:600; font-size:15px; text-align:left; }
.acc__head .pm{ font-size:20px; color:var(--ink-3); transition:.2s; }
.acc__body{ padding:0 2px 20px; color:var(--ink-2); font-size:14.5px; line-height:1.6; max-width:52ch; }
.trust{ display:flex; gap:18px; margin:22px 0 4px; flex-wrap:wrap; }
.trust div{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-2); }
.trust div svg{ color:var(--accent); flex:none; }

/* ============================================================
   DRAWERS (cart / wishlist)
   ============================================================ */
.scrim{ position:fixed; inset:0; background:rgba(15,12,30,.45); backdrop-filter:blur(3px); z-index:90; opacity:0; pointer-events:none; transition:.28s; }
.scrim.show{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(440px,100vw); background:var(--bg); z-index:95; transform:translateX(100%); transition:transform .34s cubic-bezier(.5,.1,.2,1); display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.drawer.show{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.drawer__head h3{ font-family:var(--font-display); font-weight:800; font-size:20px; margin:0; display:flex; align-items:center; gap:10px; }
.drawer__body{ flex:1; overflow-y:auto; padding:8px 22px; }
.drawer__foot{ padding:20px 22px; border-top:1px solid var(--line); background:var(--surface); }
.line{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.line__img{ width:80px; height:80px; border-radius:13px; overflow:hidden; background:var(--bg-2); flex:none; }
.line__img img{ width:100%; height:100%; object-fit:cover; }
.line__main{ flex:1; min-width:0; }
.line__main h4{ margin:0 0 3px; font-size:14.5px; font-weight:600; }
.line__main .var{ font-size:12px; color:var(--ink-3); font-family:var(--font-mono); }
.line__main .qty{ margin-top:9px; transform:scale(.86); transform-origin:left; }
.line__right{ text-align:right; display:flex; flex-direction:column; justify-content:space-between; }
.line__right .price{ font-weight:700; font-family:var(--font-display); }
.line__right .rm{ font-size:12px; color:var(--ink-3); text-decoration:underline; }
.line__right .rm:hover{ color:var(--pink); }
.sumrow{ display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; color:var(--ink-2); }
.sumrow.total{ font-size:18px; font-weight:700; color:var(--ink); font-family:var(--font-display); padding-top:12px; border-top:1px solid var(--line); }
.empty{ text-align:center; padding:60px 20px; color:var(--ink-3); }
.empty .glyph{ font-size:22px; color:var(--line-2); justify-content:center; margin-bottom:16px; }
.freebar{ background:var(--bg-2); border-radius:12px; padding:11px 14px; margin-bottom:14px; font-size:12.5px; }
.freebar .track{ height:6px; background:var(--line); border-radius:3px; margin-top:8px; overflow:hidden; }
.freebar .fill{ height:100%; background:var(--accent); border-radius:3px; transition:width .4s; }

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout{ display:grid; grid-template-columns:1.2fr .8fr; gap:50px; padding-top:24px; align-items:start; }
.steps{ display:flex; gap:8px; margin-bottom:30px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.steps b{ color:var(--ink); }
.steps span{ color:var(--ink-3); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:7px; }
.field input, .field select{ width:100%; padding:13px 15px; border:1.5px solid var(--line-2); border-radius:12px; font-family:inherit; font-size:15px; background:var(--surface); color:var(--ink); }
.field input:focus, .field select:focus{ outline:none; border-color:var(--accent); }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.osummary{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; position:sticky; top:88px; }
.osummary h3{ font-family:var(--font-display); font-weight:800; margin:0 0 18px; }
.pay-card{ background:var(--bg-2); border-radius:14px; padding:16px; display:flex; align-items:center; gap:12px; margin-bottom:14px; border:1.5px solid transparent; }
.pay-card.sel{ border-color:var(--accent); background:var(--surface); }
.confirm{ text-align:center; padding:70px 20px; max-width:520px; margin:0 auto; }
.confirm .check{ width:84px; height:84px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; margin:0 auto 24px; }
.confirm h1{ font-family:var(--font-display); font-weight:800; font-size:40px; margin:0 0 12px; }
.confirm p{ color:var(--ink-2); margin:0 0 8px; }

/* ============================================================
   PAGE HERO (sub pages)
   ============================================================ */
.page-hero{ padding:30px 0 8px; }
.page-hero .crumb{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; display:flex; gap:8px; align-items:center; }
.page-hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(34px,5vw,64px); margin:0; letter-spacing:-.02em; }
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:26px 0 30px; }
.pill{ padding:9px 16px; border-radius:999px; border:1.5px solid var(--line-2); font-size:13px; font-weight:600; background:var(--surface); transition:.15s; }
.pill.sel{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.pill:hover{ border-color:var(--ink); }
.sortsel{ margin-left:auto; }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); padding:14px 22px; border-radius:999px; font-size:14px; font-weight:600; z-index:120; display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:.3s; box-shadow:var(--shadow-lg); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .glyph{ color:var(--pink); font-size:11px; }

/* reveal on scroll — opacity SNAPS (never transitions, so it can't freeze blank);
   only the transform slides. Worst case = content visible, just un-slid. */
.reveal{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: no-preference){
  .reveal:not(.in){ opacity:0; transform:translateY(22px); }
}
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .grid-products{ grid-template-columns:repeat(3,1fr); }
  .merch-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:grid; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__stage{ aspect-ratio:1/1; max-height:62vh; }
  .blind__grid, .story, .pdp, .checkout{ grid-template-columns:1fr; }
  .blind__copy{ padding:40px; }
  .coll-grid{ grid-template-columns:1fr; }
  .pdp__gallery, .osummary{ position:static; }
  .look{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .wrap{ padding:0 18px; }
  .section{ padding:56px 0; }
  .grid-products, .grid-products.cols-3{ grid-template-columns:repeat(2,1fr); }
  .merch-grid{ grid-template-columns:repeat(2,1fr); }
  .blind__copy{ padding:30px; }
  .news, .pdp__buy{ flex-wrap:wrap; }
  .news{ padding:38px 22px; }
  .hero__meta{ gap:20px; }
  .footer__top{ grid-template-columns:1fr; gap:28px; }
  .card__title{ font-size:14px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Jooya integration additions — 3D doll hero, account, auth, tweaks launcher.
   Appended to the La.Bea design system; uses its tokens (--accent, --ink, …).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Hero 3D doll (replaces the prototype's flat hero image) ───────────────── */
.hero__stage--doll{ display:block; }
.hero__doll{ position:absolute; inset:0; z-index:1; }
.hero__doll-mv{ width:100%; height:100%; background:transparent; --poster-color:transparent; }
.hero__doll-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  object-position:bottom center; filter:drop-shadow(0 30px 50px rgba(0,0,0,.35)); }
.hero__doll-loading{ position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
  display:flex; gap:10px; z-index:2; transition:opacity .4s; }
.hero__doll-loading.is-hidden{ opacity:0; pointer-events:none; }
.hero__doll-loading .dot{ width:11px; height:11px; border-radius:50%; animation:dollPulse 1.1s ease-in-out infinite; }
.hero__doll-loading .dot:nth-child(1){ background:#7fa0ff; }
.hero__doll-loading .dot:nth-child(2){ background:#ff7fc4; animation-delay:.55s; }
@keyframes dollPulse{ 0%,100%{ transform:scale(.6); opacity:.35; } 50%{ transform:scale(1); opacity:1; } }
.hero__live{ position:absolute; right:18px; bottom:20px; z-index:2; display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.9); color:#15141b; border-radius:999px; padding:7px 13px 7px 11px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; box-shadow:var(--shadow); }
.hero__live-dot{ width:8px; height:8px; border-radius:50%; background:#21c074; box-shadow:0 0 0 4px rgba(33,192,116,.18); }
.appdl__ver{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); align-self:center; margin-left:4px; }
.store-badge.is-disabled{ opacity:.55; }

/* ── Header account button ────────────────────────────────────────────────── */
.avatar-mini{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:800; font-size:13px; }

/* ── Tweaks launcher (standalone — no design-canvas host) ─────────────────── */
.tweaks-fab{ position:fixed; left:16px; bottom:16px; z-index:2147483645; display:flex; align-items:center; gap:8px;
  padding:9px 14px; border:none; border-radius:999px; cursor:pointer; background:var(--ink); color:var(--bg);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:var(--shadow-lg); opacity:.85; transition:opacity .2s, transform .2s; }
.tweaks-fab:hover{ opacity:1; transform:translateY(-1px); }
.tweaks-fab .glyph{ color:var(--pink); }

/* ── Auth modal ───────────────────────────────────────────────────────────── */
.auth-modal{ position:fixed; left:50%; top:50%; z-index:100; width:min(420px,calc(100vw - 32px));
  transform:translate(-50%,-46%); opacity:0; pointer-events:none; transition:opacity .26s, transform .26s;
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:30px 28px 26px; max-height:calc(100vh - 32px); overflow-y:auto; }
.auth-modal.show{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
.auth-modal__x{ position:absolute; right:14px; top:14px; }
.auth-modal__head{ text-align:center; margin-bottom:18px; }
.auth-modal__head .logo-lockup{ justify-content:center; margin-bottom:12px; }
.auth-modal__head h2{ font-family:var(--font-display); font-weight:800; font-size:24px; margin:0 0 6px; }
.auth-modal__head p{ color:var(--ink-2); font-size:14px; margin:0; }
.auth-tabs{ display:flex; gap:4px; background:var(--bg-2); padding:4px; border-radius:12px; margin-bottom:18px; }
.auth-tabs button{ flex:1; border:none; background:transparent; padding:9px; border-radius:9px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:14px; color:var(--ink-2); }
.auth-tabs button.sel{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
.auth-error{ display:flex; align-items:center; gap:8px; color:#c0392b; background:rgba(192,57,43,.08);
  border-radius:10px; padding:10px 12px; font-size:13.5px; margin-bottom:14px; }
.auth-foot{ text-align:center; margin:16px 0 0; font-size:13.5px; color:var(--ink-2); }
.auth-foot a{ color:var(--accent); font-weight:600; }

/* ── Checkout: sign-in nudge + demo note ──────────────────────────────────── */
.signin-nudge{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  background:var(--blue-soft); color:var(--blue-deep); border:none; border-radius:12px; padding:12px 14px;
  font-family:inherit; font-size:13.5px; font-weight:600; margin-bottom:14px; }
.co-demo-note{ font-size:12px; color:var(--ink-3); margin:10px 0 0; }

/* ── Account page ─────────────────────────────────────────────────────────── */
.acct-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:22px; margin-top:24px; align-items:start; }
.acct-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.acct-id{ display:flex; gap:16px; align-items:center; }
.avatar-lg{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:linear-gradient(140deg,var(--accent),var(--pink)); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:28px; }
.acct-id b{ font-family:var(--font-display); font-size:20px; display:block; }
.acct-id span{ display:block; color:var(--ink-2); font-size:14px; }
.acct-since{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin-top:4px; }
.acct-name-row{ display:flex; gap:10px; align-items:center; }
.acct-name-row input{ flex:1; padding:13px 15px; border:1.5px solid var(--line-2); border-radius:12px;
  font-family:inherit; font-size:15px; background:var(--surface); color:var(--ink); }
.acct-name-row .btn{ flex-shrink:0; }
.acct-actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.acct-danger{ background:transparent; color:#c0392b; border:1.5px solid rgba(192,57,43,.3); }
.acct-danger:hover{ background:rgba(192,57,43,.06); }
.acct-h{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;
  font-size:18px; margin:0 0 16px; }
.acct-empty{ text-align:center; color:var(--ink-3); padding:30px 10px; }
.acct-empty .glyph{ font-size:18px; margin-bottom:8px; display:inline-block; }
.acct-loading{ color:var(--ink-3); padding:20px 0; }
.acct-signin{ text-align:center; max-width:420px; margin:40px auto 80px; color:var(--ink-2); }
.acct-signin h2{ font-family:var(--font-display); font-weight:800; font-size:26px; margin:16px 0 8px; color:var(--ink); }
.orders{ display:flex; flex-direction:column; gap:12px; }
.order-row{ display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--line); border-radius:14px; }
.order-row__main{ display:flex; flex-direction:column; min-width:0; }
.order-row__main b{ font-family:var(--font-mono); font-size:13px; }
.order-row__main span{ font-size:12px; color:var(--ink-3); }
.order-row__thumbs{ display:flex; gap:4px; margin-left:auto; }
.order-row__thumbs img{ width:34px; height:34px; border-radius:8px; object-fit:cover; }
.order-row__right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.order-row__right b{ font-family:var(--font-display); }
.order-badge{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 7px; border-radius:6px; background:var(--bg-2); color:var(--ink-2); }
.order-badge--paid{ background:rgba(33,192,116,.15); color:#178a52; }

@media (max-width:820px){ .acct-grid{ grid-template-columns:1fr; } }