/* ============================================================
   EFFICIENT — DESIGN TOKENS
   Conceito: "built different" — streetwear premium noturno.
   Preto profundo, dourado forjado (do logótipo do dragão) e um
   ember vermelho-alaranjado (o olho do dragão) reservado para
   saldo/urgência. Sketches de linha em tom claro sobre painéis
   de carvão, numeração tipo tech-pack/drop limitado.
   ============================================================ */
:root{
  color-scheme: dark;
  /* neutrals — dark (default) */
  --bg:#0A0908;
  --ink:#F1E9D8;
  --ink-70:rgba(241,233,216,.72);
  --ink-50:rgba(241,233,216,.52);
  --ink-30:rgba(241,233,216,.3);
  --paper:#0A0908;
  --canvas:#17130E;
  --canvas-2:#211B12;
  --line:rgba(241,233,216,.12);
  --line-strong:rgba(241,233,216,.24);
  --surface:#15110C;

  /* brand accent — forged gold, from the dragon logo */
  --accent:#C9A227;
  --accent-bright:#EFCB63;
  --accent-deep:#8A6A1D;
  --accent-tint:rgba(201,162,39,.14);
  --on-accent:#0A0908;
  --gold:var(--accent);

  /* ember — the dragon's eye; sale/urgency only */
  --rust:#D64B1F;
  --rust-tint:rgba(214,75,31,.16);

  /* semantic — kept distinct from the brand accent on purpose */
  --ok:#4CAF7D;
  --ok-tint:rgba(76,175,125,.14);
  --info:#5B9BD5;
  --info-tint:rgba(91,155,213,.14);
  --warn:#B98A3E;
  --warn-tint:rgba(185,138,62,.16);
  --err:#E5484D;
  --err-tint:rgba(229,72,77,.14);
  --focus:#5FB0FF;

  /* product-tile tints — flip with the theme via indirection (--tint:var(--t1) etc) */
  --t1:#1B1712; --t2:#171A17; --t3:#1D1712; --t4:#14171A; --t5:#1A1613;
  --t6:#171512; --t7:#1B1815; --t8:#191C19; --t9:#1D1815; --t10:#161513;

  /* accent art panels — hero garment art + editorial spreads */
  --panel-1a:#241C10; --panel-1b:#100D08; --panel-2:#1D1712; --panel-3:#171A17;
  --wish-bg:rgba(10,9,8,.78);

  /* type */
  --font-display:"Helvetica Neue",Arial,"Segoe UI",sans-serif;
  --font-body:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"SFMono-Regular","Cascadia Code","Consolas","Liberation Mono",monospace;

  /* spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --r-sm:3px; --r-md:6px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 18px 44px rgba(0,0,0,.6);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* Efficient ships two worlds, not a light page with a dark corner: a night
   storefront (default) and a paper-white one, both carrying the same
   forged-gold accent from the logo. The toggle lives in the header and
   the choice is remembered in localStorage. */
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#FFFFFF;
  --paper:#FFFFFF;
  --ink:#14120D;
  --ink-70:rgba(20,18,13,.72);
  --ink-50:rgba(20,18,13,.52);
  --ink-30:rgba(20,18,13,.3);
  --canvas:#F4F0E6;
  --canvas-2:#ECE4D0;
  --line:rgba(20,18,13,.1);
  --line-strong:rgba(20,18,13,.22);
  --surface:#FFFFFF;

  --accent:#8A6A1D;
  --accent-bright:#C9A227;
  --accent-deep:#6E5410;
  --accent-tint:rgba(138,106,29,.12);
  --on-accent:#14120D;

  --rust:#B5401A;
  --rust-tint:rgba(181,64,26,.1);

  --ok:#2E8B57;
  --ok-tint:rgba(46,139,87,.1);
  --info:#2C6CA8;
  --info-tint:rgba(44,108,168,.1);
  --warn:#8A5A1F;
  --warn-tint:rgba(138,90,31,.12);
  --err:#C4232B;
  --err-tint:rgba(196,35,43,.1);
  --focus:#1E63C9;

  --t1:#F3ECDD; --t2:#EDEAE1; --t3:#F1E4D3; --t4:#E7E9E3; --t5:#F5EAD9;
  --t6:#EFE9DC; --t7:#EAE7DE; --t8:#F0E6D6; --t9:#EDE8DD; --t10:#E6E9E4;

  --panel-1a:#F1E4C9; --panel-1b:#FBF8F0; --panel-2:#F1E4D3; --panel-3:#E7EAE3;
  --wish-bg:rgba(255,255,255,.85);

  --shadow-1:0 1px 2px rgba(20,18,13,.08);
  --shadow-2:0 18px 44px rgba(20,18,13,.16);
}
/* Dark é sempre o tema por defeito para quem visita pela primeira vez —
   deixámos de seguir a preferência de sistema (prefers-color-scheme), só o
   próprio interruptor no cabeçalho (:root[data-theme="light"] acima) muda
   para claro, e essa escolha fica guardada. */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul{list-style:none;margin:0;padding:0}
img,svg{display:block;max-width:100%}
svg{width:16px;height:16px;flex:none} /* baseline icon size — components override with a more specific selector */
.mono{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-50);
}

/* ============================================================
   PRIMITIVES — buttons, fields, badges, cards
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;
  letter-spacing:.01em;white-space:nowrap;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease);
  border:1px solid transparent;
}
.btn:active{transform:scale(.96)}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-bright);box-shadow:0 8px 22px rgba(201,162,39,.35);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);padding-left:4px;padding-right:4px;position:relative}
.btn-ghost::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .25s var(--ease)}
.btn-ghost:hover::after{transform:scaleX(1);transform-origin:left}
.btn-ghost:hover{color:var(--accent)}
.btn-danger{background:transparent;color:var(--err);border-color:var(--err-tint)}
.btn-danger:hover{background:var(--err-tint)}
.btn-block{width:100%}
.btn-sm{padding:8px 14px;font-size:12.5px}
.btn-icon{padding:9px;border-radius:var(--r-pill);border:1px solid var(--line)}
.btn-icon:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{background:var(--ink);color:var(--paper)}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-70)}
.field .req{color:var(--rust)}
.field .help{font-size:11.5px;color:var(--ink-50)}
.field .err-msg{font-size:11.5px;color:var(--err);display:flex;align-items:center;gap:5px}
.field .err-msg svg{width:13px;height:13px;flex:none}
.input,select.input,textarea.input{
  width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);font-size:14px;color:var(--ink);
}
.input::placeholder{color:var(--ink-30)}
.input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(201,162,39,.22)}
.field.is-error .input{border-color:var(--err);background:var(--err-tint)}
textarea.input{resize:vertical;min-height:90px}
.input-icon{position:relative}
.input-icon svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-50)}
.input-icon .input{padding-left:38px}
.input-icon .input-suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11.5px;font-weight:600;color:var(--ink-50)}

.check-row{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-70)}
.check-row input{margin-top:3px;width:16px;height:16px;accent-color:var(--ink);flex:none}

.badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
}
.badge-new{background:var(--accent-tint);color:var(--accent)}
.badge-sale{background:var(--rust-tint);color:var(--rust)}
.badge-best{background:var(--canvas-2);color:var(--ink-70)}
.badge-low{background:var(--warn-tint);color:var(--warn)}
.badge-out{background:var(--canvas-2);color:var(--ink-50)}
.badge-ok{background:var(--ok-tint);color:var(--ok)}
.badge-info{background:var(--info-tint);color:var(--info)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.pad-5{padding:var(--sp-5)}
.pad-4{padding:var(--sp-4)}

.rating{display:inline-flex;align-items:center;gap:4px;color:var(--gold)}
.rating svg{width:13px;height:13px}
.rating .count{font-size:11.5px;color:var(--ink-50);margin-left:2px}

.price-row{display:flex;align-items:baseline;gap:8px}
.price{font-family:var(--font-mono);font-weight:600;font-size:15px}
.price-old{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-30);text-decoration:line-through}
.price-sale{color:var(--rust)}

/* product photo placeholder — tech-pack sketch on flat canvas */
.photo{
  position:relative;aspect-ratio:3/4;background:var(--tint,var(--canvas));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
svg.sketch{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.photo svg.sketch{width:46%;height:46%;color:var(--ink);opacity:.82;transition:transform .5s var(--ease)}
.photo::before{
  content:"";position:absolute;inset:10px;border:1px solid var(--ink-30);pointer-events:none;
}
.photo::after{
  content:"";position:absolute;top:10px;left:10px;width:7px;height:7px;
  border-left:1px solid var(--ink-50);border-top:1px solid var(--ink-50);
}
.photo.square{aspect-ratio:1/1}
.product-hero-grid{max-width:1080px;margin:0 auto}

.wish-btn{
  position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:var(--r-pill);
  background:var(--wish-bg);display:flex;align-items:center;justify-content:center;
  color:var(--ink);border:1px solid var(--line);z-index:2;
  transition:transform .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.wish-btn:hover{transform:scale(1.1);border-color:var(--ink)}
.wish-btn svg{width:16px;height:16px}
.wish-btn.is-active{color:var(--rust)}
.wish-btn.is-bumping{animation:wish-pop .4s var(--ease)}
@keyframes wish-pop{0%{transform:scale(1)}35%{transform:scale(1.45)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.photo-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:2}

.product-card{display:flex;flex-direction:column}
.product-card .photo{cursor:pointer;transition:box-shadow .35s var(--ease)}
.product-card:hover .photo{box-shadow:0 18px 38px -16px rgba(0,0,0,.75),0 0 0 1px rgba(201,162,39,.18)}
.product-card:hover .photo svg.sketch{transform:scale(1.08) rotate(-2deg)}
.product-card .info{padding-top:11px;display:flex;flex-direction:column;gap:4px}
.product-card .cat{font-size:11px;color:var(--ink-50);text-transform:uppercase;letter-spacing:.04em}
.product-card .name{font-size:13.5px;font-weight:600;transition:color .2s var(--ease)}
.product-card:hover .name{color:var(--accent)}
.product-card .stock-note{font-size:11px;color:var(--gold)}

.swatch-color{width:22px;height:22px;border-radius:var(--r-pill);border:1px solid var(--line-strong);position:relative;flex:none}
.swatch-color.is-selected::after{content:"";position:absolute;inset:-4px;border:1.5px solid var(--ink);border-radius:var(--r-pill)}
.swatch-size{
  min-width:44px;height:44px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  background:var(--surface);
}
.swatch-size.is-selected{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.swatch-size.is-disabled{color:var(--ink-30);border-color:var(--line);position:relative;background:repeating-linear-gradient(-45deg,var(--surface),var(--surface) 4px,var(--canvas) 4px,var(--canvas) 5px)}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.qty button{width:36px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--ink-70)}
.qty button:hover{color:var(--ink);background:var(--canvas)}
.qty button svg{width:13px;height:13px}
.qty .val{width:34px;text-align:center;font-family:var(--font-mono);font-weight:600;font-size:13.5px}

.tabs{display:flex;gap:var(--sp-6);border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:12px 2px;font-size:13px;font-weight:600;color:var(--ink-50);border-bottom:2px solid transparent;margin-bottom:-1px;flex:none;white-space:nowrap}
.tab.is-active{color:var(--ink);border-color:var(--ink)}
.tab:hover{color:var(--ink)}

.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-50);flex-wrap:wrap}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb svg{width:12px;height:12px}
.breadcrumb .curr{color:var(--ink);font-weight:600}

.pagination{display:flex;align-items:center;justify-content:center;gap:6px}
.pagination button{
  width:34px;height:34px;border-radius:var(--r-sm);font-family:var(--font-mono);font-size:12.5px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-70);
}
.pagination button.is-active{background:var(--accent);color:var(--on-accent)}
.pagination button:hover:not(.is-active){background:var(--canvas)}

.skel{background:linear-gradient(90deg,var(--canvas) 25%,var(--canvas-2) 37%,var(--canvas) 63%);background-size:400% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.skel-block{border-radius:var(--r-sm)}

.toast-stack{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:80;max-width:min(340px, calc(100% - 48px))}
.toast{
  display:flex;align-items:flex-start;gap:10px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);
  padding:13px 15px;border-radius:var(--r-md);box-shadow:var(--shadow-2);font-size:13px;
}
.toast svg{width:17px;height:17px;flex:none;margin-top:1px}
.toast.ok svg{color:var(--ok)}
.toast.err svg{color:var(--err)}
.toast .x{margin-left:auto;color:var(--ink-50)}

.alert{display:flex;gap:10px;padding:13px 15px;border-radius:var(--r-sm);font-size:13px;align-items:flex-start;border:1px solid transparent}
.alert svg{width:17px;height:17px;flex:none;margin-top:1px}
.alert-ok{background:var(--ok-tint);color:var(--ok);border-color:rgba(76,175,125,.22)}
.alert-err{background:var(--err-tint);color:var(--err);border-color:rgba(229,72,77,.22)}
.alert-info{background:var(--info-tint);color:var(--info)}
.alert-warn{background:var(--warn-tint);color:var(--warn)}

details.accordion{border-bottom:1px solid var(--line)}
details.accordion summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;
  padding:16px 2px;font-weight:600;font-size:13.5px;cursor:pointer;
}
details.accordion summary::-webkit-details-marker{display:none}
details.accordion summary svg{width:16px;height:16px;transition:transform .18s var(--ease);flex:none;color:var(--ink-50)}
details.accordion[open] summary svg{transform:rotate(180deg)}
details.accordion .accordion-body{padding:0 2px 16px;font-size:13.5px;color:var(--ink-70);line-height:1.65}

.steps{display:flex;align-items:center;gap:0}
.step{display:flex;align-items:center;gap:8px;flex:1}
.step .dot{
  width:26px;height:26px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--ink-50);flex:none;background:var(--surface);
}
.step .lbl{font-size:12px;font-weight:600;color:var(--ink-50);white-space:nowrap}
.step .bar{height:1.5px;background:var(--line-strong);flex:1;margin:0 8px}
.step.is-done .dot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.step.is-done .bar{background:var(--accent)}
.step.is-done .lbl{color:var(--ink)}
.step.is-current .dot{border-color:var(--ink);color:var(--ink)}
.step.is-current .lbl{color:var(--ink)}

.track{display:flex;flex-direction:column}
.track-item{display:flex;gap:14px;position:relative}
.track-item .stem{display:flex;flex-direction:column;align-items:center;width:20px;flex:none}
.track-item .stem .pt{width:11px;height:11px;border-radius:var(--r-pill);background:var(--line-strong);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line-strong)}
.track-item .stem .ln{width:1.5px;flex:1;background:var(--line);margin-top:2px}
.track-item.is-done .stem .pt{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.track-item.is-done .stem .ln{background:var(--accent)}
.track-item .body{padding-bottom:22px}
.track-item .t{font-weight:600;font-size:13.5px}
.track-item .d{font-size:12px;color:var(--ink-50);margin-top:2px}

table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50);padding:0 12px 10px;font-weight:600}
table.tbl td{padding:14px 12px;border-top:1px solid var(--line)}
table.tbl tr:hover td{background:var(--canvas)}

.ic{display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill);flex:none}
.ic svg{width:28px;height:28px}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:var(--sp-8) var(--sp-5)}
.empty-state .ic{width:56px;height:56px;background:var(--canvas);color:var(--ink-50)}
.empty-state .ic svg{width:26px;height:26px}
.empty-state h3{font-size:18px}
.empty-state p{color:var(--ink-50);font-size:13.5px;max-width:340px}

/* ============================================================
   CHROME — header, footer, account layout, tab bar
   ============================================================ */
.site-header{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:10}
.header-top{display:flex;align-items:center;gap:var(--sp-6);padding:16px var(--sp-6)}
.brandmark{
  font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.01em;flex:none;
  display:inline-flex;align-items:center;
}
.brandmark-img{height:24px;width:auto;display:block}
.brandmark-img.lg{height:32px}
.nav-desktop{display:flex;gap:var(--sp-5);flex:1}
.nav-desktop a{font-size:13px;font-weight:600;color:var(--ink-70);padding:6px 0;position:relative;transition:color .2s var(--ease)}
.nav-desktop a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-desktop a:hover,.nav-desktop a.is-current{color:var(--ink)}
.nav-desktop a:hover::after,.nav-desktop a.is-current::after{transform:scaleX(1)}
.nav-desktop a.sale{color:var(--rust)}
.nav-desktop a.sale::after{background:var(--rust)}
.header-search{flex:1;max-width:360px;text-align:left}
.header-search .input{padding-top:9px;padding-bottom:9px}

.search-dropdown{
  position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--paper);
  border:1px solid var(--line-strong);border-radius:var(--r-md);box-shadow:var(--shadow-2);
  max-height:70vh;overflow-y:auto;display:none;z-index:40;padding:6px;
}
.search-dropdown.is-open{display:block}
.search-dropdown:empty{display:none}

.search-flyout{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:75;display:none}
.search-flyout.is-open{display:block}
.search-flyout-panel{position:absolute;left:0;right:0;top:0;background:var(--paper);padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line);max-height:82vh;overflow-y:auto}
.search-flyout-panel .input-icon .input{padding-right:40px}
.search-flyout-results{max-width:640px;margin:18px auto 0;display:flex;flex-direction:column;gap:2px}
.search-result-row{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:var(--r-sm)}
.search-result-row:hover{background:var(--canvas)}
.search-result-row .photo{border-radius:var(--r-sm)}
.search-flyout-see-all{display:block;text-align:center;padding:12px 6px;font-size:13px;font-weight:600;color:var(--accent)}
@media (max-width:600px){ .search-flyout-panel{padding:var(--sp-4)} }
.header-actions{display:flex;align-items:center;gap:var(--sp-2);flex:none}
.hdr-btn{position:relative;width:38px;height:38px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.hdr-btn:hover{background:var(--canvas)}
.hdr-btn svg{width:19px;height:19px}
.hdr-count{position:absolute;top:-1px;right:-1px;background:var(--accent);color:var(--on-accent);font-family:var(--font-mono);font-size:9.5px;font-weight:700;width:15px;height:15px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center}
.header-meta{background:var(--bg);color:var(--ink-70);font-size:11.5px;font-family:var(--font-mono);overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line)}
.marquee-track{display:inline-flex;align-items:center;gap:32px;padding:7px 16px;width:max-content;animation:marquee 24s linear infinite}
.marquee-track span{display:inline-flex;align-items:center;gap:8px}
.marquee-track svg{width:13px;height:13px;flex:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-16.6667%)}}
.nav-mobile-trigger{display:none;width:38px;height:38px;align-items:center;justify-content:center}
.search-mobile-btn{display:none}
@media (max-width:900px){ .search-mobile-btn{display:flex} }
.tab-bar{display:none;position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line);z-index:15}
.tab-bar-inner{display:flex}
.tab-bar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 11px;font-size:10px;color:var(--ink-50);font-weight:600}
.tab-bar a svg{width:19px;height:19px}
.tab-bar a.is-current{color:var(--ink)}

.header-minimal{border-bottom:1px solid var(--line);padding:16px var(--sp-6);display:flex;align-items:center;justify-content:space-between}
.header-minimal .trust{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-50)}
.header-minimal .trust svg{width:14px;height:14px}

.site-footer{background:var(--bg);color:var(--ink-70);margin-top:var(--sp-9);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--sp-6);padding:var(--sp-8) var(--sp-6) var(--sp-6)}
.footer-grid h4{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50);margin-bottom:var(--sp-3);font-weight:600}
.footer-grid ul{display:flex;flex-direction:column;gap:9px}
.footer-grid a{font-size:13px}
.footer-grid a:hover{color:var(--accent)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-50);gap:var(--sp-4);flex-wrap:wrap}
.pay-icons{display:flex;gap:8px}
.pay-icons span{font-family:var(--font-mono);font-size:9.5px;border:1px solid var(--line-strong);border-radius:4px;padding:4px 7px;letter-spacing:.03em}
.footer-minimal{padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:22px;color:var(--ink-50);font-size:11.5px}
.footer-minimal svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}

.section{padding:var(--sp-8) var(--sp-6)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:var(--sp-5);gap:var(--sp-4)}
.section-head h2{font-size:26px}
.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}

.account-layout{display:grid;grid-template-columns:230px 1fr;gap:var(--sp-6);padding:var(--sp-6)}
.account-layout > *{min-width:0}
.account-nav{display:flex;flex-direction:column;gap:2px;align-self:start;position:sticky;top:calc(var(--sp-6) + 1px)}
.account-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--ink-70)}
.account-nav a svg{width:16px;height:16px}
.account-nav a:hover{background:var(--canvas)}
.account-nav a.is-current{background:var(--accent);color:var(--on-accent)}
.account-nav .div{height:1px;background:var(--line);margin:8px 4px}

.mobile-bar{display:none;position:sticky;bottom:0;z-index:12;background:var(--paper);border-top:1px solid var(--line);padding:10px var(--sp-4);gap:10px}
.mobile-bar button{flex:1}

.filters-drawer{
  position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:60;display:none;
}
.filters-drawer.is-open{display:block}
.filters-drawer .sheet{
  position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-radius:16px 16px 0 0;
  max-height:82%;overflow-y:auto;padding:var(--sp-5);
}
.filters-drawer .sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}

.category-layout{display:grid;grid-template-columns:230px 1fr;gap:var(--sp-6);padding:var(--sp-6)}
.category-layout > *{min-width:0}
.filter-block{padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.filter-block h4{font-size:12.5px;margin-bottom:12px}
.filter-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:6px 0;color:var(--ink-70)}
.swatch-wrap{display:flex;flex-wrap:wrap;gap:8px}

.checkout-layout{display:grid;grid-template-columns:1fr 380px;gap:var(--sp-6);padding:var(--sp-6);align-items:start}
/* Grid items default to min-width:auto, so a long unbroken row (tabs,
   trust-badge icons, etc.) inside either column can silently force the
   whole grid wider than its container instead of wrapping/scrolling in
   place. min-width:0 lets the column shrink to the track size and pushes
   overflow handling back down to the descendant that actually needs it. */
.checkout-layout > *{min-width:0}
.order-summary-aside{position:sticky;top:var(--sp-4)}

.pw-rule{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-50);transition:color .15s var(--ease)}
.pw-rule svg{width:14px;height:14px;flex:none}
.pw-rule.ok{color:var(--accent)}

.modal-demo{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:50}
.modal-demo.is-open{display:flex}
.modal-demo .box{background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-2);max-width:380px;width:88%;padding:var(--sp-5)}

.split-editorial{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}
.split-editorial .copy{padding:var(--sp-8);display:flex;flex-direction:column;justify-content:center;gap:var(--sp-4);background:var(--canvas)}
@media (max-width:900px){ .split-editorial{grid-template-columns:1fr} .split-editorial .copy{padding:var(--sp-6) var(--sp-4)} }

.hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;min-height:520px;background:var(--bg);color:var(--ink);overflow:hidden;border-bottom:1px solid var(--line)}
.hero .copy{padding:var(--sp-8);display:flex;flex-direction:column;justify-content:center;gap:var(--sp-4);position:relative;z-index:2}
.hero .copy>*{animation:fade-up .7s var(--ease) both}
.hero .copy>*:nth-child(1){animation-delay:.05s}
.hero .copy>*:nth-child(2){animation-delay:.16s}
.hero .copy>*:nth-child(3){animation-delay:.3s}
.hero .copy>*:nth-child(4){animation-delay:.42s}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero .art{position:relative;background:radial-gradient(circle at 50% 42%,var(--panel-1a) 0%,var(--panel-1b) 72%);display:flex;align-items:center;justify-content:center}
.hero .art>svg{width:38%;height:38%;color:var(--ink);opacity:.88;animation:hero-float 6s ease-in-out infinite}
@keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* Sombra a fundir a imagem no painel de texto, em vez da costura reta que
   havia antes (border-left) entre as duas metades. */
.hero .art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 16%)}
.hero-photo{width:100%;height:100%;object-fit:cover;animation:hero-zoom 16s ease-in-out infinite alternate}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.045)}}
.hero .ticks{position:absolute;inset:0;pointer-events:none;z-index:3}
.hero .ticks span{position:absolute;font-family:var(--font-mono);font-size:10px;color:var(--ink-30);letter-spacing:.08em}
.seal-wrap{position:absolute;bottom:22px;left:22px;z-index:2;color:var(--ink-50)}
.seal{animation:spin-slow 20s linear infinite}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@media (max-width:900px){ .hero{grid-template-columns:1fr;min-height:auto} .hero .art{aspect-ratio:4/3} .hero .copy{padding:var(--sp-6) var(--sp-4)} .seal-wrap{bottom:14px;left:14px;transform:scale(.8);transform-origin:bottom left} }

.cat-card{position:relative;aspect-ratio:3/4;background:var(--canvas);display:flex;align-items:flex-end;overflow:hidden}
.cat-card svg.sketch{position:absolute;width:70%;height:70%;left:15%;top:6%;color:var(--ink);opacity:.08}
.cat-card .lbl{position:relative;z-index:2;padding:var(--sp-4);font-family:var(--font-display);font-weight:700;font-size:20px}
.cat-card .lbl small{display:block;font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.05em;color:var(--ink-50);text-transform:uppercase;margin-top:2px}

.benefit{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.benefit .ic{width:40px;height:40px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center}
.benefit .ic svg{width:19px;height:19px}
.benefit h4{font-size:14px}
.benefit p{font-size:12.5px;color:var(--ink-50)}
.grid-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
@media (max-width:900px){ .grid-benefits{grid-template-columns:repeat(2,1fr)} }

.color-swatch-doc{width:100%;aspect-ratio:2/1;border-radius:var(--r-md);border:1px solid var(--line)}
.spec-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.spec-row .k{width:150px;color:var(--ink-50);font-family:var(--font-mono);font-size:11.5px}

.reviewbar{display:flex;align-items:center;gap:10px;font-size:12px}
.reviewbar .track{flex:1;height:6px;background:var(--canvas);border-radius:99px;overflow:hidden}
.reviewbar .fill{height:100%;background:var(--gold)}

.state-card{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.state-card h5{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-50)}
.spinner{width:28px;height:28px;border-radius:99px;border:2.5px solid var(--line);border-top-color:var(--ink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.grid-states{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media (max-width:900px){ .grid-states{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .grid-states{grid-template-columns:1fr} }

/* ============================================================
   CONTAINER QUERIES — the .frame is the "device". Toggling
   Desktop/Tablet/Mobile above changes its width, and every
   component below reflows against that width, not the browser
   viewport. This is what makes the responsive behaviour real.
   Deliberately placed at the END of the stylesheet: several of the
   rules overridden here (.category-layout, .checkout-layout,
   .order-summary-aside) have their base, unconditional definition
   further down in the file than they used to be — since a later
   same-specificity rule always wins regardless of being inside a
   media query, these overrides must come after every base rule they
   touch, or the mobile collapse silently never applies.
   ============================================================ */
@media (max-width:900px){
  .nav-desktop,.header-search,.header-meta{display:none}
  .nav-mobile-trigger{display:flex}
  /* País/idioma (não faz nada ainda) e Conta (já está na tab bar e no menu
     hamburger) são os dois ícones menos essenciais desta fila — escondidos
     em mobile para caber sem cortar Wishlist/Carrinho, que ficam sempre
     visíveis por serem as ações mais usadas. */
  .hdr-btn-tabbar-dupe{display:none}
  .header-top{padding:14px var(--sp-4);gap:10px}
  .header-actions{margin-left:auto}
  .tab-bar{display:block}
  .section{padding:var(--sp-6) var(--sp-4)}
  .grid-products,.grid-4{grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .account-layout{grid-template-columns:1fr;padding:var(--sp-4)}
  .account-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
  .account-nav a{padding:8px 10px;font-size:12.5px}
  .category-layout{grid-template-columns:1fr}
  .filters-panel{display:none}
  .mobile-bar{display:flex !important}
  .checkout-layout{grid-template-columns:1fr}
  .order-summary-aside{position:static}
  .product-hero-grid{grid-template-columns:1fr !important}
  .pdp-main-photo{order:1}
  .pdp-thumbs{order:2;flex-direction:row !important;overflow-x:auto}
  .pdp-thumbs .photo.square{width:64px;height:64px;flex:none}
  .pdp-info{order:3}
}
@media (max-width:600px){
  .grid-products,.grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr);padding:var(--sp-6) var(--sp-4)}
  .footer-grid .col-brand{grid-column:1/-1}
  .section-head{flex-direction:column;align-items:flex-start;gap:8px}
  .steps .lbl{display:none}
  .steps{gap:0}
}