@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Archivo:wght@500;600;700&family=Fraunces:ital,wght@1,400;1,500&family=Inter:wght@400;500&display=swap');

:root{
  --ink:        #0B0A08;
  --ink-soft:   #17140F;
  --paper:      #F2ECE1;
  --paper-dim:  #E7DECC;
  --caramel:    #B9793F;
  --khaki:      #8C8564;
  --spritz:     #FF6A32;
  --spritz-soft:#FFB37A;
  --ok:         #3E6B4A;
  --err:        #C1443A;
  --line-on-dark: rgba(242,236,225,0.14);
  --line-on-light: rgba(21,19,15,0.14);
  --display: 'Bebas Neue', Impact, sans-serif;
  --label:   'Archivo', sans-serif;
  --body:    'Inter', sans-serif;
  --serif:   'Fraunces', serif;
  --wrap: 1240px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--spritz); color:var(--ink); }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }
:focus-visible{ outline:2px solid var(--spritz); outline-offset:3px; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

.eyebrow{ font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--spritz-soft); display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--spritz); }
h1,h2,h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.01em; margin:0; line-height:.92; }
h1{ font-size:clamp(42px,8vw,96px); }
h2{ font-size:clamp(30px,5.2vw,54px); }
h3{ font-size:clamp(20px,3vw,26px); }
p{ margin:0; }
.lede{ font-family:var(--body); font-size:clamp(15.5px,1.8vw,18px); color:var(--paper-dim); max-width:42ch; }
.quote{ font-family:var(--serif); font-style:italic; font-weight:400; }

/* ---------------- Announcement bar ---------------- */
.announce{ position:sticky; top:0; z-index:101; background:var(--ink); border-bottom:1px solid var(--line-on-dark); text-align:center; padding:9px 16px; }
.announce a{ font-family:var(--label); font-weight:700; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-dim); }
.announce a span{ color:var(--spritz-soft); }

/* ---------------- Nav ---------------- */
.nav{ position:sticky; top:34px; left:0; right:0; z-index:100; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:16px; padding:16px 28px; backdrop-filter:blur(10px); background:rgba(21,19,15,.92); border-bottom:1px solid var(--line-on-dark); }
.nav-links-side{ display:flex; align-items:center; gap:26px; }
.nav-links-left{ justify-self:start; }
.nav-links-right{ justify-self:end; }
.nav-links-side a{ position:relative; font-family:var(--label); font-weight:600; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--paper-dim); padding-bottom:3px; transition:color .2s; }
.nav-links-side a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--spritz); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.nav-links-side a:hover{ color:var(--paper); }
.nav-links-side a:hover::after{ transform:scaleX(1); }
@media (max-width:900px){
  .nav{ grid-template-columns:auto 1fr auto; }
  .nav-links-side{ display:none; }
}
.nav-mark{ font-family:var(--display); font-size:23px; letter-spacing:.06em; display:flex; align-items:center; gap:8px; color:var(--paper); }
.nav-mark .dot{ width:7px; height:7px; border-radius:50%; background:var(--spritz); }
.nav-links{ display:flex; gap:28px; align-items:center; }
.nav-links a{ position:relative; font-family:var(--label); font-weight:600; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--paper-dim); padding-bottom:3px; transition:color .2s; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--spritz); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.nav-links a:hover{ color:var(--paper); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-icon{ position:relative; display:inline-flex; color:var(--paper-dim); transition:color .2s; }
.nav-icon:hover{ color:var(--paper); }
.nav-badge{ position:absolute; top:-8px; right:-10px; background:var(--spritz); color:var(--ink); font-family:var(--label); font-weight:700; font-size:10px; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-toggle{ display:none; }
.nav-links{ display:none; }
@media (max-width:900px){
  .nav-links{ display:flex; position:fixed; inset:0 0 0 auto; width:78%; max-width:320px; background:var(--ink-soft); flex-direction:column; align-items:flex-start; padding:100px 30px 30px; gap:22px; transform:translateX(100%); transition:transform .35s ease; border-left:1px solid var(--line-on-dark); z-index:105; }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index:110; }
  .nav-toggle span{ width:22px; height:2px; background:var(--paper); }
}

/* ---------------- Buttons ---------------- */
.btn{ font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.15em; text-transform:uppercase; padding:15px 28px; border-radius:2px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:transform .2s,background .2s,border-color .2s,color .2s; }
.btn-primary{ background:var(--paper); color:var(--ink); border:1px solid var(--paper); transition:background .3s, color .3s, border-color .3s; }
.btn-primary:hover{ background:transparent; color:var(--paper); border-color:var(--paper); }
.btn-ghost{ border-color:var(--line-on-dark); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--paper); transform:translateY(-2px); }
.btn-dark{ background:var(--ink); color:var(--paper); }
.btn-dark:hover{ background:var(--ink-soft); }
.btn-outline-light{ border-color:var(--line-on-light); color:var(--ink); }
.btn-outline-light:hover{ background:var(--ink); color:var(--paper); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:10.5px; }

/* ---------------- Hangtag card ---------------- */
.tag{ position:relative; background:var(--paper); color:var(--ink); border-radius:4px; padding:26px; box-shadow:0 18px 40px rgba(0,0,0,.35); }

/* ---------------- Layout helpers ---------------- */
section{ position:relative; }
.section-pad{ padding:88px 0; }
@media (max-width:720px){ .section-pad{ padding:60px 0; } }
.divider{ border:none; border-top:1px solid var(--line-on-dark); margin:0; width:100%; }
.center{ text-align:center; }
.stack{ display:flex; flex-direction:column; }
.g-2{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.g-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.g-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:860px){ .g-2{ grid-template-columns:1fr; gap:36px; } .g-3{ grid-template-columns:1fr; } .g-4{ grid-template-columns:repeat(2,1fr); } }

/* ---------------- Photo frames ---------------- */
.ph{ position:relative; overflow:hidden; border-radius:2px; background:linear-gradient(160deg,#26221B 0%,#1B1812 60%,#100E0B 100%); border:1px solid var(--line-on-dark); transition:box-shadow .3s ease, border-color .3s ease; }
.ph.zoom:hover, .color-card:hover{ border-color:var(--spritz); }
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.ph.zoom:hover img{ transform:scale(1.045); }
.color-card{ display:block; position:relative; }
.color-card .cap{ position:absolute; left:0; right:0; bottom:0; padding:34px 18px 16px; background:linear-gradient(to top, rgba(15,13,10,.85), transparent); }
.color-card .cap b{ display:block; font-family:var(--label); font-weight:700; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper); }
.color-card .cap span{ display:inline-flex; align-items:center; gap:6px; font-family:var(--label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim); margin-top:5px; opacity:0; transform:translateY(4px); transition:opacity .25s,transform .25s; }
.color-card:hover .cap span{ opacity:1; transform:none; }
.thumb{ cursor:pointer; opacity:.55; transition:opacity .2s,border-color .2s; border:1px solid var(--line-on-dark); }
.thumb:hover,.thumb.active{ opacity:1; border-color:var(--spritz); }

/* ---------------- Forms ---------------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--label); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--khaki); margin-bottom:8px; }
.field input,.field select,.field textarea{ width:100%; background:transparent; border:1px solid var(--line-on-light); color:var(--ink); font-family:var(--body); font-size:15px; padding:12px 14px; border-radius:2px; }
.field-dark input,.field-dark select{ color:var(--paper); border-color:var(--line-on-dark); background:rgba(255,255,255,.02); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--spritz); }
.field-error{ color:var(--err); font-family:var(--label); font-size:12px; margin-top:6px; }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ flex:1; min-width:74px; border:1px solid var(--line-on-light); border-radius:2px; padding:10px 8px; text-align:center; font-family:var(--label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; transition:border-color .2s; }
.swatch input{ accent-color:var(--spritz); }
.swatch .dot{ width:16px; height:16px; border-radius:50%; }
.swatch.out{ opacity:.35; cursor:not-allowed; }
.alert{ font-family:var(--label); font-size:13px; font-weight:600; padding:12px 16px; border-radius:2px; margin-bottom:18px; }
.alert-ok{ background:rgba(62,107,74,.15); color:#8fd6a3; border:1px solid rgba(62,107,74,.4); }
.alert-err{ background:rgba(193,68,58,.15); color:#f3a49d; border:1px solid rgba(193,68,58,.4); }

/* ---------------- Cart / account tables ---------------- */
.cart-row{ display:grid; grid-template-columns:88px 1fr auto; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line-on-dark); }
.cart-row img{ width:88px; height:110px; object-fit:cover; border-radius:2px; }
.qty-box{ display:inline-flex; align-items:center; border:1px solid var(--line-on-dark); border-radius:2px; }
.qty-box button{ background:none; border:none; color:var(--paper); width:32px; height:34px; font-size:16px; }
.qty-box input{ width:40px; text-align:center; background:none; border:none; color:var(--paper); font-family:var(--label); font-size:13px; }
table.orders{ width:100%; border-collapse:collapse; font-family:var(--label); font-size:13px; }
table.orders th{ text-align:left; padding:12px 10px; color:var(--khaki); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; border-bottom:1px solid var(--line-on-dark); }
table.orders td{ padding:14px 10px; border-bottom:1px solid var(--line-on-dark); color:var(--paper-dim); }
.status-pill{ display:inline-block; padding:4px 10px; border-radius:20px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.status-aguardando_pagamento{ background:rgba(255,106,50,.15); color:var(--spritz-soft); }
.status-pago,.status-em_separacao{ background:rgba(140,133,100,.2); color:var(--khaki); }
.status-enviado{ background:rgba(185,121,63,.2); color:var(--caramel); }
.status-entregue{ background:rgba(62,107,74,.2); color:#8fd6a3; }
.status-cancelado{ background:rgba(193,68,58,.15); color:#f3a49d; }

/* ---------------- Footer ---------------- */
footer{ padding:56px 0 26px; border-top:1px solid var(--line-on-dark); }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; margin-bottom:40px; }
.footer-links{ display:flex; gap:48px; flex-wrap:wrap; }
.footer-col h4{ font-family:var(--label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--khaki); margin:0 0 14px; font-weight:700; }
.footer-col a,.footer-col button{ display:block; font-family:var(--label); font-size:13px; font-weight:600; color:var(--paper-dim); margin-bottom:10px; transition:color .2s; background:none; border:none; padding:0; text-align:left; }
.footer-col a:hover,.footer-col button:hover{ color:var(--spritz-soft); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--label); font-size:10.5px; letter-spacing:.06em; color:var(--khaki); padding-top:22px; border-top:1px solid var(--line-on-dark); }

/* ---------------- Misc ---------------- */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:120; width:54px; height:54px; border-radius:50%; background:var(--spritz); color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(255,106,50,.35); transition:transform .2s; }
.wa-float:hover{ transform:scale(1.07); }
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .8s ease,transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------------- Quiet product card hover (minimalist) ---------------- */
.color-card{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
.color-card:hover{ transform:translateY(-4px); }

table.size-guide{ width:100%; border-collapse:collapse; font-family:var(--label); font-size:13px; }
table.size-guide th{ text-align:left; padding:10px 6px; border-bottom:1px solid var(--line-on-dark); color:var(--khaki); text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
table.size-guide td{ padding:10px 6px; border-bottom:1px solid var(--line-on-dark); color:var(--paper-dim); }
.empty-state{ text-align:center; padding:60px 20px; color:var(--khaki); font-family:var(--label); }

/* ---------------- Signup modal (mandatory popup) ---------------- */
.signup-modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.signup-modal.open{ display:flex; }
.signup-modal-backdrop{ position:absolute; inset:0; background:rgba(10,9,7,.86); backdrop-filter:blur(3px); }
.signup-modal-panel{ position:relative; width:100%; max-width:420px; max-height:92vh; overflow-y:auto; background:var(--paper); color:var(--ink); border-radius:6px; padding:34px 30px; box-shadow:0 30px 80px rgba(0,0,0,.5); animation:signupModalIn .35s ease; }
@keyframes signupModalIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.signup-modal-close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:26px; line-height:1; color:var(--ink); opacity:.5; cursor:pointer; padding:4px 8px; }
.signup-modal-close:hover{ opacity:1; }
.signup-modal-panel .field input{ border-color:var(--line-on-light); }
.signup-modal-panel .btn-outline-light{ border-color:var(--line-on-light); }
@media (max-width:480px){ .signup-modal-panel{ padding:28px 22px; } }

/* ---------------- Editorial / brand-culture content ---------------- */
.pull-quote{ font-family:var(--serif); font-style:italic; font-weight:400; line-height:1.3; }
.ritual-card{ padding-top:28px; border-top:1px solid var(--line-on-dark); }
.ritual-card .num{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.14em; color:var(--spritz-soft); }
.ritual-card h3{ margin-top:14px; }
.ritual-card p{ margin-top:12px; font-family:var(--body); font-size:15px; color:var(--paper-dim); line-height:1.65; }
.journal-card{ display:block; }
.journal-card .cap{ margin-top:16px; }
.journal-card .kicker{ font-family:var(--label); font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--khaki); }
.journal-card h3{ margin-top:8px; font-size:22px; }
.journal-card p{ margin-top:10px; font-family:var(--body); font-size:14px; color:var(--paper-dim); line-height:1.6; }
.journal-card .read{ display:inline-block; margin-top:12px; font-family:var(--label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--spritz-soft); border-bottom:1px solid transparent; transition:border-color .2s; }
.journal-card:hover .read{ border-color:var(--spritz-soft); }
.ig-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
@media (max-width:720px){ .ig-strip{ grid-template-columns:repeat(2,1fr); } }
.article-body{ font-family:var(--body); font-size:17px; color:var(--paper-dim); line-height:1.8; max-width:62ch; }
.article-body p{ margin-bottom:20px; }
.article-body p:first-of-type::first-letter{ font-family:var(--display); font-size:52px; float:left; line-height:.8; margin:6px 8px 0 0; color:var(--spritz); }

/* ---------------- Admin panel ---------------- */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{ width:230px; flex-shrink:0; background:var(--ink-soft); border-right:1px solid var(--line-on-dark); padding:26px 20px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.admin-sidebar .nav-mark{ margin-bottom:34px; }
.admin-sidebar nav a{ display:flex; align-items:center; gap:10px; font-family:var(--label); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim); padding:11px 12px; border-radius:2px; margin-bottom:4px; transition:background .2s,color .2s; }
.admin-sidebar nav a:hover{ background:rgba(255,255,255,.04); color:var(--paper); }
.admin-sidebar nav a.active{ background:var(--spritz); color:var(--ink); }
.admin-main{ flex:1; padding:40px 44px; max-width:1200px; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; flex-wrap:wrap; gap:14px; }
.stat-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:40px; }
@media (max-width:900px){ .stat-cards{ grid-template-columns:repeat(2,1fr); } .admin-main{ padding:26px 20px; } }

/* --------- ADMIN NO CELULAR ---------
   O menu lateral ficava display:none e o admin virava uma prisão: dava pra ver
   só a tela atual, sem nenhuma forma de navegar.
   Agora os links viram "chips" que quebram em linhas — todos visíveis de uma
   vez, sem precisar arrastar pro lado (arrastar ninguém descobre sozinho). */
@media (max-width:900px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{
    display:block; width:100%; flex-shrink:0;
    border-right:none; border-bottom:1px solid var(--line-on-dark);
    padding:14px 14px 12px;
    /* a regra base usa position:sticky + height:100vh (certo na barra lateral
       do PC, mas no celular tomaria a tela inteira) */
    position:static; height:auto; overflow-y:visible;
  }
  .admin-sidebar .nav-mark{ margin-bottom:12px; }
  .admin-sidebar nav{
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .admin-sidebar nav a{
    white-space:nowrap; padding:10px 12px; border-radius:6px;
    background:rgba(242,236,225,.05); margin:0 !important;
    font-size:11px; letter-spacing:.05em; min-height:40px;
  }
}
.stat-card{ background:var(--ink-soft); border:1px solid var(--line-on-dark); border-radius:4px; padding:20px; }
.stat-card .num{ font-family:var(--display); font-size:32px; color:var(--spritz-soft); }
.stat-card .lbl{ font-family:var(--label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--khaki); margin-top:4px; }
.admin-table-wrap{ overflow-x:auto; }
table.admin{ width:100%; border-collapse:collapse; font-family:var(--label); font-size:13px; }
table.admin th{ text-align:left; padding:10px 12px; color:var(--khaki); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; border-bottom:1px solid var(--line-on-dark); white-space:nowrap; }
table.admin td{ padding:10px 12px; border-bottom:1px solid var(--line-on-dark); color:var(--paper-dim); vertical-align:middle; }
table.admin input[type="number"], table.admin input[type="text"], table.admin select{ background:transparent; border:1px solid var(--line-on-dark); color:var(--paper); padding:6px 8px; border-radius:2px; font-family:var(--label); font-size:12.5px; width:80px; }
table.admin select{ width:auto; }
.low-stock{ color:var(--spritz-soft); font-weight:700; }
.badge-inline{ font-family:var(--label); font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; background:rgba(255,106,50,.15); color:var(--spritz-soft); }

/* ---------------- Banner de cookies (LGPD) — discreto e minimalista ---------------- */
.cookie-banner[hidden]{ display:none !important; }
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:180; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; padding:16px 24px; background:rgba(11,10,8,.96); backdrop-filter:blur(8px); border-top:1px solid var(--line-on-dark); }
.cookie-banner p{ margin:0; font-family:var(--body); font-size:13px; color:var(--paper-dim); max-width:640px; }
.cookie-banner a{ color:var(--paper); text-decoration:underline; }
.cookie-banner .btn{ padding:10px 20px; font-size:11px; }
@media (max-width:560px){ .cookie-banner{ flex-direction:column; gap:12px; text-align:center; } }

/* ---------------- Página da História (manifesto) ---------------- */
.historia-corpo{ text-align:center; }
.historia-corpo p{ font-family:var(--body); font-size:clamp(17px,2.4vw,21px); line-height:1.7; color:var(--paper-dim); margin:0 0 34px; }
.historia-corpo p.destaque{ font-family:var(--display); font-size:clamp(26px,4.6vw,44px); line-height:1.06; color:var(--paper); text-transform:uppercase; letter-spacing:.01em; margin:8px 0 40px; }
.historia-corpo p.assinatura{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,3.4vw,30px); color:var(--spritz-soft); margin-top:8px; }

/* ---------------- Área do cliente (abas) ---------------- */
.conta-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-top:32px; border-bottom:1px solid var(--line-on-dark); }
.conta-tabs a{ font-family:var(--label); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim); padding:12px 18px; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s, border-color .2s; }
.conta-tabs a:hover{ color:var(--paper); }
.conta-tabs a.conta-tab-ativa{ color:var(--paper); border-bottom-color:var(--spritz); }
.conta-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
.conta-card{ text-align:center; }
.conta-card-num{ font-family:var(--display); font-size:clamp(28px,5vw,42px); color:var(--ink); line-height:1; }
.conta-card-lbl{ font-family:var(--label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--khaki); margin-top:8px; }
@media (max-width:640px){ .conta-tabs{ gap:0; } .conta-tabs a{ padding:10px 12px; font-size:11px; } }

/* ---------------- Botão de favorito ---------------- */
.fav-btn{ flex-shrink:0; width:46px; height:46px; border:1px solid var(--line-on-dark); border-radius:50%; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .2s, background .2s; }
.fav-btn svg{ fill:none; stroke:var(--paper-dim); stroke-width:1.6; transition:fill .2s, stroke .2s; }
.fav-btn:hover{ border-color:var(--spritz); }
.fav-btn:hover svg{ stroke:var(--spritz); }
.fav-btn.is-fav svg{ fill:var(--spritz); stroke:var(--spritz); }
.fav-btn.is-fav{ border-color:var(--spritz); }

/* ---------------- Input de estrelas (avaliação) ---------------- */
.star-input{ display:inline-flex; flex-direction:row-reverse; gap:4px; }
.star-input input{ display:none; }
.star-input label{ font-size:26px; color:var(--line-on-dark); cursor:pointer; transition:color .15s; }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label{ color:var(--spritz); }

/* ---------------- Vídeo giratório na página do produto ---------------- */
.pmedia #pMainImg,
.pmedia #pMainVideo { transition: opacity .35s ease; }
.pmedia { cursor: pointer; }

/* ---------------- Ursinho passeando pela página ---------------- */

/* ==========================================================================
   REFINAMENTO MOBILE
   Corrige estouro horizontal, alvos de toque e leitura em telas pequenas.
   ========================================================================== */

/* trava estouro horizontal sem quebrar o menu fixo (clip não cria rolagem) */
html, body{ max-width:100%; }
@supports (overflow-x: clip){
  html, body{ overflow-x: clip; }
}

/* o banner de cookies estourava: o texto tinha largura fixa de 640px */
.cookie-banner p{ max-width:100%; min-width:0; }

@media (max-width:900px){
  /* botão do menu: alvo de toque confortável (44x44) e sem esticar */
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; min-width:44px; padding:0;
    justify-self:end; margin-left:auto;
  }
  .nav-toggle span{ display:block; }
  /* links do menu lateral com área de toque maior */
  .nav-links a{ padding:12px 0; font-size:13px; }
}

@media (max-width:720px){
  .nav{ padding:12px 16px; column-gap:10px; }
  .nav-mark{ font-size:20px; }
  .nav-right{ gap:14px; }
  .announce{ font-size:10.5px; padding:8px 12px; }
  .wrap{ padding-left:18px; padding-right:18px; }
  .section-pad{ padding-top:48px; padding-bottom:48px; }

  /* botões: altura mínima de toque */
  .btn{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; }
  .btn-sm{ min-height:40px; }

  /* evita o zoom automático do iOS ao focar um campo (precisa >=16px) */
  .field input, .field select, .field textarea,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], textarea, select{ font-size:16px; }

  /* tabelas de pedidos: rolagem lateral em vez de estourar a tela */
  .orders{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .orders th, .orders td{ white-space:nowrap; padding:10px 12px; font-size:13px; }

  /* abas da conta: rolam de lado, sem quebrar */
  .conta-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .conta-tabs::-webkit-scrollbar{ display:none; }
  .conta-tabs a{ white-space:nowrap; flex:0 0 auto; }

  /* rodapé empilhado e respirando */
  .footer-links{ gap:28px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }

  /* WhatsApp menor e fora do caminho do banner de cookies */
  .wa-float{ width:48px; height:48px; right:16px; bottom:16px; }

  /* galeria do produto: miniaturas maiores e fáceis de tocar */
  #pThumbs{ gap:8px; }

  /* pagamento: código PIX legível e botão inteiro */
  #pixCode{ font-size:12px; }
  #pixArea .btn{ width:100%; }
}

@media (max-width:560px){
  /* banner de cookies empilhado ocupa a largura toda */
  .cookie-banner{ padding:14px 16px; }
  .cookie-banner .btn{ width:100%; }
  /* resumo/checkout: colunas viram uma só com espaçamento menor */
  .g-2{ gap:28px; }
}

/* respeita a barra do navegador no celular (evita corte do hero) */
@supports (height: 100svh){
  .hero{ min-height:100svh; }
}

/* gaveta do menu: some de verdade quando fechada */
@media (max-width:900px){
  .nav-links{ visibility:hidden; pointer-events:none; transition:transform .35s ease, visibility .35s; }
  .nav-links.open{ visibility:visible; pointer-events:auto; }
}

/* ---- Menu fixo: o <header> é quem gruda (o .nav sozinho não grudava) ---- */
/* z-index acima da gaveta (105) para o botão de fechar continuar clicável */
header{ position:sticky; top:34px; z-index:130; }
.nav{ position:relative; top:auto; }
@media (max-width:720px){
  header{ top:31px; }
}

/* ==========================================================================
   PRÓXIMO DROP — teaser/spoiler (não clicável)
   ========================================================================== */
.teaser-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* impede qualquer interação/seleção */
  pointer-events: none;
  user-select: none;
}
.teaser-card{
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: #17140F;
}
.teaser-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* escurece e borra pra virar "spoiler" */
  filter: blur(9px) brightness(.42) grayscale(.15);
  transform: scale(1.06);          /* evita bordas transparentes do blur */
  opacity: .9;
}
.teaser-card::after{                /* véu escuro por cima */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(11,10,8,.35) 0%, rgba(11,10,8,.72) 100%);
}
.teaser-tag{
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--label);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  background: rgba(11,10,8,.55);
  border: 1px solid rgba(242,236,225,.16);
  padding: 6px 12px;
  border-radius: 100px;
  backdrop-filter: blur(2px);
}
/* selo central por cima das 3 peças */
.teaser-lock{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.teaser-lock-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  text-align: center;
  padding: 22px 30px;
  background: rgba(11,10,8,.45);
  border: 1px solid rgba(242,236,225,.18);
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.teaser-lock-inner span{
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
}
.teaser-lock-inner svg{ color: var(--spritz); opacity: .95; }

@media (max-width: 720px){
  .teaser-grid{ grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .teaser-card img{ filter: blur(6px) brightness(.42) grayscale(.15); }
  .teaser-tag{ display: none; }        /* muito pequeno no mobile; fica só o selo central */
  .teaser-lock-inner{ padding: 16px 20px; }
  .teaser-lock-inner span{ font-size: 10.5px; }
}

/* ==========================================================================
   MINHA CONTA — versão rica
   ========================================================================== */
/* cabeçalho com avatar */
.conta-hero{
  display:flex; align-items:center; gap:20px; margin-top:14px; flex-wrap:wrap;
}
.conta-avatar{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--caramel), var(--spritz));
  color:var(--ink); font-family:var(--display); font-size:26px; letter-spacing:.02em;
}
.conta-hero-info{ flex:1; min-width:0; }
.conta-hero-info h1{ font-size:clamp(28px,5vw,46px); margin:0; line-height:1; }
.conta-hero-meta{ display:flex; align-items:center; gap:14px; margin-top:10px; flex-wrap:wrap; }
.conta-hero-meta span{ font-family:var(--label); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--khaki); }
.conta-nivel{
  color:var(--ink) !important; background:var(--nivel, var(--caramel));
  padding:3px 10px; border-radius:100px; font-weight:700;
}
.conta-sair{ margin-left:auto; }

/* cards de estatística com ícone */
.conta-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.conta-card{
  background:var(--ink-soft); border:1px solid var(--line-on-dark);
  border-radius:4px; padding:22px 20px; text-align:left;
}
.conta-card-ic{ width:26px; height:26px; color:var(--spritz-soft); margin-bottom:14px; }
.conta-card-ic svg{ width:100%; height:100%; }
.conta-card-num{ font-family:var(--display); font-size:34px; line-height:1; color:var(--paper); }
.conta-card-lbl{ font-family:var(--label); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--khaki); margin-top:8px; }

/* bloco genérico */
.conta-bloco{ margin-top:40px; }
.conta-bloco-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.conta-bloco-head h3{ margin:0; }
.conta-link{ font-family:var(--label); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--spritz-soft); }

/* cartão de pedido */
.conta-pedidos-lista{ display:flex; flex-direction:column; gap:16px; }
.conta-pedido-card{
  background:var(--ink-soft); border:1px solid var(--line-on-dark);
  border-radius:6px; padding:22px;
}
.conta-pedido-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }
.conta-pedido-num{ font-family:var(--label); font-weight:700; font-size:14px; color:var(--paper); }
.conta-pedido-data{ font-family:var(--label); font-size:12px; color:var(--khaki); margin-top:4px; }

/* itens do pedido com miniatura */
.conta-itens{ display:flex; flex-direction:column; gap:12px; padding:16px 0; border-top:1px solid var(--line-on-dark); }
.conta-item{ display:flex; align-items:center; gap:14px; }
.conta-item-img{
  width:52px; height:64px; flex-shrink:0; border-radius:3px;
  background:#000 center/cover no-repeat; border:1px solid var(--line-on-dark);
}
.conta-item-nome{ font-family:var(--label); font-weight:600; font-size:13.5px; color:var(--paper); }
.conta-item-meta{ font-family:var(--label); font-size:12px; color:var(--khaki); margin-top:3px; }

/* mini linha do tempo do status */
.conta-timeline{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line-on-dark); }
.ct-track{ display:flex; justify-content:space-between; position:relative; }
.ct-track::before{
  content:""; position:absolute; top:5px; left:5%; right:5%; height:2px;
  background:var(--line-on-dark);
}
.ct-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; }
.ct-dot{ width:12px; height:12px; border-radius:50%; background:var(--ink); border:2px solid var(--khaki); }
.ct-step.feito .ct-dot{ background:var(--spritz-soft); border-color:var(--spritz-soft); }
.ct-step.atual .ct-dot{ background:var(--spritz); border-color:var(--spritz); box-shadow:0 0 0 4px rgba(255,106,50,.2); }
.ct-lbl{ font-family:var(--label); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--khaki); }
.ct-step.feito .ct-lbl, .ct-step.atual .ct-lbl{ color:var(--paper); }
.conta-timeline.cancelado span, .conta-timeline.aguardando span{
  font-family:var(--label); font-size:12px; letter-spacing:.04em;
}
.conta-timeline.cancelado span{ color:var(--err); }
.conta-timeline.aguardando span{ color:var(--spritz-soft); }

/* estado vazio */
.conta-vazio{
  text-align:center; padding:56px 24px; background:var(--ink-soft);
  border:1px solid var(--line-on-dark); border-radius:6px;
}
.conta-vazio svg{ width:44px; height:44px; color:var(--khaki); margin-bottom:18px; }
.conta-vazio-titulo{ font-family:var(--display); font-size:26px; color:var(--paper); margin-bottom:8px; }
.conta-vazio p{ font-family:var(--body); font-size:14.5px; color:var(--khaki); max-width:38ch; margin:0 auto 24px; }

/* atalhos rápidos */
.conta-atalhos{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:36px; }
.conta-atalho{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 14px; background:var(--ink-soft); border:1px solid var(--line-on-dark);
  border-radius:4px; text-align:center; transition:border-color .2s, transform .2s;
}
.conta-atalho:hover{ border-color:var(--spritz-soft); transform:translateY(-2px); }
.conta-atalho svg{ width:24px; height:24px; color:var(--spritz-soft); }
.conta-atalho span{ font-family:var(--label); font-size:12px; letter-spacing:.04em; color:var(--paper); }

@media (max-width:720px){
  .conta-cards{ grid-template-columns:repeat(2,1fr); }
  .conta-atalhos{ grid-template-columns:repeat(2,1fr); }
  .conta-avatar{ width:54px; height:54px; font-size:22px; }
  .conta-sair{ margin-left:0; }
  .ct-lbl{ font-size:9px; }
}

/* ---------------- Kit (moletom + mochila) na página de produto ---------------- */
.kit-box{
  margin-top: 22px;
  border: 1px solid var(--line-on-dark);
  border-radius: 8px;
  padding: 16px;
  background: var(--ink-soft);
}
.kit-head{ display: flex; align-items: center; gap: 14px; }
.kit-head img{
  width: 56px; height: 70px; object-fit: cover; border-radius: 4px;
  flex-shrink: 0; border: 1px solid var(--line-on-dark);
}
.kit-info{ flex: 1; min-width: 0; }
.kit-eyebrow{
  font-family: var(--label); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--spritz);
}
.kit-nome{ font-family: var(--label); font-weight: 700; font-size: 13.5px; color: var(--paper); margin-top: 3px; }
.kit-preco{ font-family: var(--label); font-size: 12px; color: var(--khaki); margin-top: 2px; }
.kit-check-wrap{ display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.kit-check-wrap input{ width: 18px; height: 18px; accent-color: var(--spritz); cursor: pointer; }
.kit-cores{ display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.kit-cores-lbl{ font-family: var(--label); font-size: 11px; color: var(--khaki); text-transform: uppercase; letter-spacing: .08em; }
.kit-cor{
  font-family: var(--label); font-size: 12px; padding: 5px 12px; border-radius: 100px;
  border: 1px solid var(--line-on-dark); background: transparent; color: var(--paper); cursor: pointer;
  transition: border-color .2s;
}
.kit-cor.ativo{ border-color: var(--spritz); }

/* ============================================================
   ACESSÓRIOS — vitrine estilo prateleira (tema claro, contraste)
   ============================================================ */
.acc-section{
  background: var(--paper);
  color: var(--ink);
  padding: clamp(56px, 8vw, 96px) 0;
}
.acc-head{
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px; margin-bottom: 40px;
  border-bottom: 1px solid rgba(11,10,8,.12); padding-bottom: 24px;
}
.acc-title{
  font-family: var(--display); font-size: clamp(30px, 5vw, 52px);
  color: var(--ink); line-height: .95; margin-top: 8px;
}
.acc-sub{
  font-family: var(--body); font-size: 15px; color: rgba(11,10,8,.6);
  max-width: 34ch; text-align: right;
}
.acc-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.acc-card{
  display: flex; flex-direction: column;
  background: #fff; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(11,10,8,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.acc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(11,10,8,.14);
}
.acc-img{
  aspect-ratio: 1; overflow: hidden; background: #f4f0e8;
  display: flex; align-items: center; justify-content: center;
}
.acc-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.acc-card:hover .acc-img img{ transform: scale(1.05); }
.acc-body{ padding: 20px; display: flex; flex-direction: column; gap: 5px; }
.acc-tag{
  font-family: var(--label); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--caramel);
}
.acc-name{
  font-family: var(--label); font-weight: 700; font-size: 16px; color: var(--ink);
}
.acc-price{
  font-family: var(--display); font-size: 24px; color: var(--ink); margin-top: 2px;
}
.acc-cta{
  font-family: var(--label); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--caramel); margin-top: 8px;
  transition: gap .2s;
}
.acc-card:hover .acc-cta{ color: var(--spritz); }

/* a toalha é larga — ocupa a linha inteira com imagem panorâmica */
/* A toalha ocupa 2 colunas (não a linha inteira). Assim a grade fecha certinho:
   - Computador (3 col): meia | caneca | passaporte  /  mala | toalha(2)
   - Celular   (2 col): meia | caneca  /  passaporte | mala  /  toalha(2 = cheia) */
.acc-card.acc-wide{ grid-column: span 2; flex-direction: row; }
.acc-card.acc-wide .acc-img{ aspect-ratio: auto; width: 60%; }
.acc-card.acc-wide .acc-body{ justify-content: center; flex: 1; }

@media (max-width: 760px){
  .acc-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .acc-sub{ text-align: left; }
  .acc-head{ flex-direction: column; align-items: flex-start; }
  .acc-card.acc-wide{ flex-direction: column; }
  .acc-card.acc-wide .acc-img{ width: 100%; aspect-ratio: 12/5; }
}

/* ---------------- Mini-carrinho lateral ---------------- */
.minicart-overlay{ position:fixed; inset:0; background:rgba(11,10,8,.6); backdrop-filter:blur(2px); z-index:300; }
.minicart{ position:fixed; top:0; right:0; height:100%; width:380px; max-width:90vw; background:var(--ink-soft); border-left:1px solid var(--line-on-dark); z-index:310; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; }
.minicart.open{ transform:translateX(0); }
.minicart-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line-on-dark); }
.minicart-title{ font-family:var(--label); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper); }
.minicart-close{ background:none; border:none; color:var(--paper); font-size:26px; line-height:1; cursor:pointer; padding:0; }
.minicart-body{ flex:1; overflow-y:auto; padding:14px 22px; }
.minicart-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-on-dark); }
.minicart-item img{ width:56px; height:70px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.minicart-item-info{ flex:1; min-width:0; }
.minicart-item-nome{ font-family:var(--label); font-weight:700; font-size:13px; color:var(--paper); }
.minicart-item-var{ font-family:var(--label); font-size:11px; color:var(--khaki); margin-top:3px; }
.minicart-item-sub{ font-family:var(--label); font-size:13px; color:var(--spritz-soft); margin-top:5px; }
.minicart-foot{ padding:18px 22px; border-top:1px solid var(--line-on-dark); }
.minicart-subtotal{ display:flex; justify-content:space-between; font-family:var(--label); font-weight:700; font-size:15px; color:var(--paper); margin-bottom:14px; }
.minicart-continue{ width:100%; background:none; border:none; color:var(--khaki); font-family:var(--label); font-size:12px; text-decoration:underline; cursor:pointer; margin-top:10px; padding:4px; }
@media (max-width:460px){ .minicart{ width:100%; max-width:100%; } }

/* ================= AJUSTES DE CELULAR (proporção e respiro) ================= */
@media (max-width:860px){
  /* fotos de produto lado a lado — nunca uma foto gigante por linha */
  .fotos-grid{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
}
@media (max-width:560px){
  /* margem lateral um pouco maior: o conteúdo respira */
  .wrap{ padding-left:22px; padding-right:22px; }
  /* respiro entre seções (evita tudo grudado) */
  .section-pad{ padding-top:56px; padding-bottom:56px; }
  /* títulos proporcionais à tela do celular */
  h2{ font-size:clamp(24px,7.2vw,30px); line-height:1.05; }
  h3{ font-size:17px; }
  .lede{ font-size:15px; line-height:1.6; }
  /* botões: alvo de toque confortável e largura cheia quando fizer sentido */
  .btn{ min-height:46px; }
  /* cartões e caixas com um respiro interno melhor */
  .tag{ padding:18px; }
}

/* --------- Celular: alvos de toque confortáveis (dedo, não mouse) --------- */
@media (max-width:860px){
  /* menu: links com área de toque de verdade */
  .nav-links a{ padding:12px 0; font-size:13px; }
  /* botões de quantidade no carrinho: 44x44 (padrão de acessibilidade) */
  .qty-box button{ min-width:44px; min-height:44px; font-size:18px; }
  .qty-box input{ min-height:44px; width:46px; text-align:center; }
  /* "Remover" com área de toque maior */
  .cart-row form button[name="remover_item"]{ padding:10px 4px !important; font-size:12px !important; }
  /* mini-carrinho: deixa uma borda visível pra parecer painel */
  .minicart{ box-shadow:-12px 0 40px rgba(0,0,0,.5); }
}

/* --------- Mini-carrinho: painel é escuro, então os botões precisam de texto claro --------- */
.minicart .btn-outline-light{ color:var(--paper); border-color:var(--line-on-dark); }
.minicart .btn-outline-light:hover{ background:rgba(242,236,225,.08); }