/* ===========================================================
   MEGA CASE — Loja online (storefront)
   100% HTML + CSS · sem JavaScript · pronto para Hostinger
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root{
  --orange:#FF6501; --orange-press:#E55400; --orange-deep:#C24500;
  --orange-50:#FFF3EB; --orange-100:#FFE3D1; --orange-700:#C24500;
  --black:#000; --ink-950:#0A0A0A; --ink-900:#141414; --ink-800:#1E1E1E;
  --ink-600:#3F3F3F; --ink-500:#5C5C5C; --ink-400:#8A8A8A; --ink-200:#D9D9D9; --ink-150:#E6E6E4;
  --ink-100:#F0EFEC; --ink-50:#F8F7F4; --white:#fff;
  --whatsapp:#25D366;
  --font-d:'Montserrat',system-ui,sans-serif;
  --font-b:'DM Sans',system-ui,sans-serif;
  --maxw:1200px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh-sm:0 2px 8px rgba(10,10,10,.07);
  --sh-md:0 10px 28px rgba(10,10,10,.10);
  --sh-brand:0 12px 30px rgba(255,101,1,.34);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--ink-950);background:var(--ink-50);-webkit-font-smoothing:antialiased;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font:700 13px var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
h1,h2,h3,h4{font-family:var(--font-d);letter-spacing:-.02em;line-height:1.1;color:var(--ink-950)}
section{position:relative}

/* ---------- announcement bar ---------- */
.topbar{background:var(--ink-950);color:#fff;font:600 13px var(--font-b);text-align:center;padding:9px 16px}
.topbar b{color:var(--orange)}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--ink-150)}
.header .wrap{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{height:42px}
.nav{display:flex;gap:26px;margin-left:8px}
.nav a{font:600 15px var(--font-b);color:var(--ink-600);transition:color .15s}
.nav a:hover{color:var(--ink-950)}
.nav a.active{color:var(--ink-950);font-weight:700}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
/* search in header */
.header-search{display:flex;align-items:center;gap:8px;background:var(--ink-50);border:1.5px solid var(--ink-150);border-radius:var(--r-pill);padding:0 14px;height:42px;width:230px;color:var(--ink-400);transition:.15s}
.header-search:focus-within{border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px rgba(255,101,1,.14)}
.header-search svg{flex-shrink:0}
.header-search input{border:none;background:transparent;outline:none;font:500 14px var(--font-b);color:var(--ink-950);width:100%}
.mm-search{display:flex;align-items:center;gap:8px;margin:16px 24px 4px;background:var(--ink-50);border:1.5px solid var(--ink-150);border-radius:var(--r-pill);padding:0 14px;height:46px;color:var(--ink-400)}
.mm-search input{border:none;background:transparent;outline:none;font:500 15px var(--font-b);width:100%}
.icon-btn{width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--ink-950);border:1.5px solid var(--ink-150);background:#fff;transition:.15s}
.icon-btn:hover{border-color:var(--ink-950)}

/* ---------- buttons ---------- */
.btn{font:700 15px var(--font-d);border:none;border-radius:var(--r-md);padding:13px 22px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;letter-spacing:.01em;transition:transform .12s var(--ease),background .15s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--orange);color:#000}
.btn-primary:hover{background:var(--orange-press)}
.btn-primary.glow{box-shadow:var(--sh-brand)}
.btn-dark{background:var(--ink-950);color:#fff}
.btn-dark:hover{background:var(--ink-800)}
.btn-outline{background:transparent;color:var(--ink-950);border:2px solid var(--ink-950);padding:11px 20px}
.btn-outline:hover{background:var(--ink-950);color:#fff}
.btn-wa{background:var(--whatsapp);color:#063}
.btn-wa:hover{background:#1EBE5A}
.btn-lg{padding:16px 28px;font-size:16px}
.btn-block{width:100%;justify-content:center}

/* ---------- hero (banner com foto de fundo) ---------- */
.hero.hero-photo{position:relative;overflow:hidden;background:var(--ink-950);min-height:clamp(520px,72vh,720px);display:flex;align-items:center;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:var(--hero-pos,center center);background-repeat:no-repeat;transform-origin:center}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.22) 58%,rgba(0,0,0,0)),rgba(0,0,0,var(--hero-dark,.55))}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-copy{max-width:620px}
.hero-photo .eyebrow{color:#fff;opacity:.92}
.hero-photo h1{font-size:clamp(38px,5vw,62px);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.4)}
.hero-photo h1 .mark{color:var(--orange)}
.hero-photo p{font-size:clamp(16px,2vw,20px);color:rgba(255,255,255,.9);margin:20px 0 30px;max-width:520px;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:22px;margin-top:32px;flex-wrap:wrap}
.hero-trust div{display:flex;align-items:center;gap:8px;font:600 14px var(--font-b);color:rgba(255,255,255,.92)}
.hero-trust svg{color:var(--orange)}
.btn-ghost-light{background:rgba(255,255,255,.08);color:#fff;border:2px solid rgba(255,255,255,.72);padding:11px 20px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.btn-ghost-light:hover{background:#fff;color:var(--ink-950);border-color:#fff}

/* efeitos de entrada do hero (Painel → Aparência).
   Importante: o estado VISÍVEL é o padrão; a animação só dispara com a
   classe .is-in (adicionada via JS). Assim, sem JS / com "reduzir
   movimento" / na impressão, o banner aparece normal — nunca fica preto. */
@media (prefers-reduced-motion:no-preference){
  .hero-photo.is-in.fx-fade .hero-bg{animation:heroFade 1.3s ease-out both}
  .hero-photo.is-in.fx-fade .hero-copy{animation:heroRise .95s .15s ease-out both}
  .hero-photo.is-in.fx-zoom .hero-bg{animation:heroFade 1.3s ease-out both, heroZoom 13s .1s ease-out both}
  .hero-photo.is-in.fx-zoom .hero-copy{animation:heroRise .95s .15s ease-out both}
  .hero-photo.is-in.fx-subir .hero-bg{animation:heroFade 1.1s ease-out both}
  .hero-photo.is-in.fx-subir .hero-copy{animation:heroRiseBig 1s ease-out both}
}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
@keyframes heroZoom{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes heroRiseBig{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:none}}

/* ---------- section heading ---------- */
.sec{padding:64px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:20px;flex-wrap:wrap}
.sec-head h2{font-size:34px;font-weight:800;text-transform:uppercase}
.sec-head .link{font:700 14px var(--font-d);color:var(--orange);display:inline-flex;align-items:center;gap:6px}
.sec-head .link:hover{gap:10px;transition:gap .15s}

/* ---------- categories ---------- */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat{background:#fff;border:1px solid var(--ink-150);border-radius:var(--r-lg);padding:22px 14px;text-align:center;transition:.18s var(--ease)}
.cat:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:transparent}
.cat .ic{width:54px;height:54px;border-radius:var(--r-md);background:var(--orange-50);color:var(--orange-deep);display:grid;place-items:center;margin:0 auto 12px}
.cat:hover .ic{background:var(--orange);color:#000}
.cat span{font:700 14px var(--font-d);display:block}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pc{background:#fff;border:1px solid var(--ink-150);border-radius:var(--r-lg);overflow:hidden;transition:.18s var(--ease);display:flex;flex-direction:column}
.pc:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:transparent}
.pc .thumb{position:relative;aspect-ratio:1;background:var(--orange-50)}
.pc .thumb img{width:100%;height:100%;object-fit:cover}
.pc .tag{position:absolute;top:11px;left:11px;font:700 11px var(--font-b);background:var(--orange);color:#000;padding:4px 9px;border-radius:var(--r-pill)}
.pc .tag.dark{background:var(--ink-950);color:#fff}
.pc .fav{position:absolute;top:9px;right:9px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--ink-600)}
.pc .body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.pc .cat{font:700 10px var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.pc .name{font:700 16px var(--font-d);margin:5px 0 10px;line-height:1.22}
.pc .stars{color:var(--orange);font-size:13px;letter-spacing:1px;margin-bottom:8px}
.pc .stars span{color:var(--ink-400);font:500 12px var(--font-b);margin-left:5px;letter-spacing:0}
.pc .price{font:800 22px var(--font-d);letter-spacing:-.02em;margin-top:auto}
.pc .old{font:600 13px var(--font-b);color:var(--ink-400);text-decoration:line-through;margin-left:7px}
.pc .inst{font:500 12px var(--font-b);color:var(--ink-600);margin-top:2px}
.pc .buy{margin-top:13px;font:700 14px var(--font-d);background:var(--ink-950);color:#fff;border:none;border-radius:var(--r-md);padding:11px;cursor:pointer;text-align:center;transition:.15s;display:flex;align-items:center;justify-content:center;gap:7px}
.pc .buy:hover{background:var(--orange);color:#000}

/* ---------- promo banner (dark full-bleed) ---------- */
.promo{background:var(--ink-950);color:#fff;border-radius:24px;overflow:hidden;position:relative}
.promo .wrap2{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:48px 52px}
.promo .eyebrow{color:var(--orange)}
.promo h2{color:#fff;font-size:40px;font-weight:900;text-transform:uppercase;margin:14px 0 16px}
.promo h2 em{color:var(--orange);font-style:normal}
.promo p{color:var(--ink-200);font-size:16px;margin-bottom:24px;max-width:430px}
.promo .art{justify-self:end;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FF8534,#FF6501);display:grid;place-items:center}
.promo .art img{width:62%}
.promo .glow-ball{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,101,1,.35),transparent 70%);top:-160px;right:-80px;pointer-events:none}

/* ---------- trust / why us ---------- */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feat{text-align:left}
.feat .ic{width:52px;height:52px;border-radius:var(--r-md);background:var(--ink-950);color:var(--orange);display:grid;place-items:center;margin-bottom:14px}
.feat h4{font-size:18px;margin-bottom:6px}
.feat p{font:400 14px var(--font-b);color:var(--ink-600)}

/* ---------- CSS-only mobile menu ---------- */
.nav-toggle{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-md);border:1.5px solid var(--ink-150);background:#fff;cursor:pointer;align-items:center;justify-content:center;color:var(--ink-950)}
.burger .x{display:none}
.nav-toggle:checked ~ .wrap .burger .menu{display:none}
.nav-toggle:checked ~ .wrap .burger .x{display:block}
.mobile-menu{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--ink-150);box-shadow:var(--sh-md)}
.nav-toggle:checked ~ .mobile-menu{display:flex}
.mobile-menu a{padding:15px 24px;font:600 16px var(--font-d);color:var(--ink-950);border-bottom:1px solid var(--ink-100)}
.mobile-menu a:hover{background:var(--ink-50);color:var(--orange)}
.mobile-menu .mm-cta{margin:16px 24px;justify-content:center;border-bottom:none}

/* ---------- google map embed ---------- */
.store .map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.1) contrast(1.02)}

/* ---------- store / location ---------- */
.store{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border:1px solid var(--ink-150);border-radius:24px;overflow:hidden}
.store .info{padding:44px 46px}
.store .info h2{font-size:30px;font-weight:800;text-transform:uppercase;margin-bottom:8px}
.store .info p{color:var(--ink-600);margin-bottom:26px}
.store .rows{display:flex;flex-direction:column;gap:18px;margin-bottom:28px}
.store .row{display:flex;gap:14px;align-items:flex-start}
.store .row .ic{width:44px;height:44px;border-radius:var(--r-md);background:var(--orange-50);color:var(--orange-deep);display:grid;place-items:center;flex-shrink:0}
.store .row b{font:700 15px var(--font-d);display:block}
.store .row span{font:400 14px var(--font-b);color:var(--ink-600)}
.store .map{background:linear-gradient(135deg,#1E1E1E,#0A0A0A);position:relative;min-height:340px;display:grid;place-items:center;color:#fff;text-align:center;padding:30px}
.store .map .pin{width:64px;height:64px;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:#000;margin:0 auto 14px;box-shadow:var(--sh-brand)}
.store .map h4{color:#fff;font-size:20px;margin-bottom:4px}
.store .map small{color:var(--ink-200);font-family:var(--font-b)}
.store .map .grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px}

/* ---------- newsletter / instagram ---------- */
.insta{background:var(--orange);border-radius:24px;padding:46px 52px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.insta h2{font-size:32px;font-weight:900;text-transform:uppercase;color:#000}
.insta p{color:rgba(0,0,0,.7);font-weight:600;margin-top:6px}

/* ---------- footer ---------- */
.footer{background:var(--ink-950);color:#fff;padding:60px 0 28px}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer img.logo{height:44px;margin-bottom:16px}
.footer p{color:var(--ink-200);font-size:14px;max-width:280px}
.footer h5{font:800 13px var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer ul a{color:var(--ink-200);font-size:14px;transition:color .15s}
.footer ul a:hover{color:var(--orange)}
.footer .social{display:flex;gap:10px;margin-top:14px}
.footer .social a{width:40px;height:40px;border-radius:var(--r-md);background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:.15s}
.footer .social a:hover{background:var(--orange);color:#000}
.footer .bottom{padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--ink-400);font-size:13px}

/* ---------- floating whatsapp ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:60px;height:60px;border-radius:50%;background:var(--whatsapp);display:grid;place-items:center;color:#fff;box-shadow:0 10px 26px rgba(37,211,102,.45);transition:transform .15s var(--ease)}
.wa-float:hover{transform:scale(1.08)}

/* ---------- aviso de cookies / LGPD ---------- */
.lgpd{position:fixed;left:22px;bottom:22px;z-index:120;max-width:430px;background:var(--ink-950);color:#fff;border-radius:16px;padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.34);display:flex;gap:14px;align-items:center;font-family:var(--font-b);animation:lgpdUp .4s ease-out both}
.lgpd p{margin:0;font:500 13px/1.55 var(--font-b);color:rgba(255,255,255,.86)}
.lgpd p b{color:#fff}
.lgpd a{color:var(--orange);font-weight:700;white-space:nowrap}
.lgpd-ok{flex:none;background:var(--orange);color:#000;border:0;border-radius:10px;padding:11px 20px;font:800 13px var(--font-d);cursor:pointer;transition:background .15s,transform .05s}
.lgpd-ok:hover{background:#E55400}
.lgpd-ok:active{transform:translateY(1px)}
.lgpd[hidden]{display:none}
@keyframes lgpdUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:560px){
  .lgpd{left:12px;right:12px;bottom:12px;max-width:none;flex-direction:column;align-items:stretch;text-align:left;gap:12px}
  .lgpd-ok{width:100%}
  /* sobe os botões flutuantes pra não ficarem atrás do aviso */
  body.has-lgpd .wa-float{bottom:188px}
  body.has-lgpd .cart-float{bottom:256px}
}

/* ---------- catalog page ---------- */
.page-head{background:var(--ink-950);color:#fff;padding:46px 0}
.page-head h1{color:#fff;font-size:40px;font-weight:900;text-transform:uppercase}
.page-head .crumb{font:600 13px var(--font-b);color:var(--ink-400);margin-bottom:10px}
.page-head .crumb a:hover{color:var(--orange)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 32px}
.chip{font:700 14px var(--font-d);padding:9px 18px;border-radius:var(--r-pill);border:1.5px solid var(--ink-150);background:#fff;color:var(--ink-950);transition:.15s}
.chip:hover{border-color:var(--ink-950)}
.chip.on{background:var(--ink-950);color:#fff;border-color:var(--ink-950)}
.catalog-layout{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start}
.filters{background:#fff;border:1px solid var(--ink-150);border-radius:var(--r-lg);padding:22px;position:sticky;top:90px}
.filters h4{font-size:15px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.filters .fg{padding:16px 0;border-top:1px solid var(--ink-150)}
.filters label{display:flex;align-items:center;gap:10px;font:500 14px var(--font-b);color:var(--ink-600);padding:5px 0;cursor:pointer}
.filters input{accent-color:var(--orange);width:16px;height:16px}
.grid.cols3{grid-template-columns:repeat(3,1fr)}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:48px 0;align-items:start}
.gallery .main{aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--orange-50);border:1px solid var(--ink-150)}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.gallery .thumbs{display:flex;gap:12px;margin-top:14px}
.gallery .thumbs a{width:74px;height:74px;border-radius:var(--r-md);overflow:hidden;border:2px solid var(--ink-150);cursor:pointer}
.gallery .thumbs a.on{border-color:var(--orange)}
.gallery .thumbs img{width:100%;height:100%;object-fit:cover}
.pdp .info .cat{color:var(--orange)}
.pdp .info h1{font-size:36px;font-weight:800;margin:8px 0 10px;text-transform:none}
.pdp .rate{display:flex;align-items:center;gap:8px;color:var(--orange);font-size:15px;margin-bottom:20px}
.pdp .rate span{color:var(--ink-600);font:500 13px var(--font-b)}
.pdp .pricebox{background:#fff;border:1px solid var(--ink-150);border-radius:var(--r-lg);padding:22px;margin-bottom:22px}
.pdp .pricebox .now{font:900 38px var(--font-d);letter-spacing:-.02em}
.pdp .pricebox .was{font:600 16px var(--font-b);color:var(--ink-400);text-decoration:line-through;margin-left:10px}
.pdp .pricebox .off{font:700 12px var(--font-b);background:var(--orange);color:#000;padding:4px 9px;border-radius:var(--r-pill);margin-left:8px}
.pdp .pricebox .inst{font:500 15px var(--font-b);color:var(--ink-600);margin-top:6px}
.pdp .actions{display:flex;gap:12px;margin-top:18px}
.pdp .desc{font:400 16px var(--font-b);color:var(--ink-600);margin:22px 0}
.specs{width:100%;border-collapse:collapse;margin-top:8px}
.specs td{padding:11px 0;border-bottom:1px solid var(--ink-150);font-size:14px}
.specs td:first-child{color:var(--ink-400);font-weight:600;width:42%}
.specs td:last-child{font-family:var(--font-b);font-weight:500}
.ship{display:flex;gap:12px;align-items:center;background:var(--orange-50);border-radius:var(--r-md);padding:14px 16px;margin-top:18px}
.ship .ic{color:var(--orange-deep)}
.ship b{font:700 14px var(--font-d)}
.ship span{font:400 13px var(--font-b);color:var(--ink-600);display:block}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid.cols3{grid-template-columns:repeat(2,1fr)}
  .feats{grid-template-columns:repeat(2,1fr)}
  .promo .wrap2,.store,.pdp,.catalog-layout{grid-template-columns:1fr}
  .promo .art{display:none}
  .store .map{min-height:300px}
  .store .map iframe{min-height:300px}
  .footer .cols{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .burger{display:flex}
  .header-search{display:none}   /* a busca fica no menu sanduíche */
  .header .wrap{gap:10px}
  .header-actions{gap:9px}
  /* botão "Chamar no zap" compacto: só o ícone no celular */
  .header-actions .btn-primary{padding:11px 12px}
  .header-actions .btn-primary .wa-label{display:none}
}
@media(max-width:560px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr 1fr}
  /* em telas pequenas o WhatsApp já tem o botão flutuante: libera espaço
     na barra para o ícone de conta + carrinho ficarem confortáveis */
  .header-actions .btn-primary{display:none}
  .header-actions{gap:6px}
  .wrap{padding:0 16px}
  /* hero no celular: foto vertical fica linda; escurece mais embaixo p/ ler o texto */
  .hero.hero-photo{min-height:clamp(480px,82vh,680px);align-items:flex-end;padding-bottom:18px}
  .hero-scrim{background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.25) 52%,rgba(0,0,0,.05)),rgba(0,0,0,calc(var(--hero-dark,.55) * .7))}
  .hero-copy{max-width:100%}
  .hero-trust{gap:14px 18px;margin-top:24px}
}

/* ============ barra deslizante (marquee) ============ */
.topbar{overflow:hidden;padding:0}
.topbar-track{display:inline-flex;align-items:center;width:max-content;white-space:nowrap;animation:ta-scroll 30s linear infinite;will-change:transform}
.topbar:hover .topbar-track{animation-play-state:paused}
.ta-item{padding:9px 0;font:600 13px var(--font-b)}
.ta-dot{padding:0 24px;color:var(--orange);font-size:9px}
@keyframes ta-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.topbar-track{animation:none}}

/* ============ rail deslizante de categorias (catálogo) ============ */
.rail{position:relative;display:flex;align-items:center;gap:8px}
.rail-track{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;flex-wrap:nowrap;flex:1;padding:4px 2px;-ms-overflow-style:none;scrollbar-width:none}
.rail-track::-webkit-scrollbar{display:none}
.rail-track .chip{flex:0 0 auto}
.rail-nav{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink-150);background:#fff;color:var(--ink-950);display:grid;place-items:center;cursor:pointer;transition:.15s}
.rail-nav:hover{border-color:var(--ink-950)}
.rail-nav:disabled{opacity:.3;cursor:default;border-color:var(--ink-150)}
.rail.no-nav .rail-nav{display:none}
/* sub-rail (subcategorias) — visual mais leve que o principal */
.subrail .rail-track{padding-top:0}
.subrail .chip{font-size:13px;padding:7px 15px;border-style:dashed;color:var(--ink-600)}
.subrail .chip:hover{border-color:var(--orange);color:var(--orange)}
.subrail .chip.on{background:var(--orange);border-color:var(--orange);border-style:solid;color:#000}
.subrail .rail-nav{width:34px;height:34px}

/* ============ rail de categorias (home) ============ */
.cats-rail{position:relative;display:flex;align-items:center;gap:10px}
.cats-track{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;flex-wrap:nowrap;flex:1;padding:6px 4px;-ms-overflow-style:none;scrollbar-width:none}
.cats-track::-webkit-scrollbar{display:none}
.cats-track .cat{flex:0 0 168px}
.cats-rail.no-nav .rail-nav{display:none}
.cats-rail.expanded{display:block}
.cats-rail.expanded .rail-nav{display:none}
.cats-rail.expanded .cats-track{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;flex-wrap:wrap}
.cats-rail.expanded .cats-track .cat{flex:none}

/* ============ ver mais ============ */
.vermais-wrap{text-align:center;margin-top:34px}
.vermais-fim{font:600 14px var(--font-b);color:var(--ink-400)}

@media(max-width:980px){
  .cats-rail.expanded .cats-track{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:880px){
  .catalog-layout{grid-template-columns:1fr}
  .filters{position:static}
  .filters .fg{display:none}   /* no mobile as categorias ficam no rail de cima */
}
@media(max-width:560px){
  .cats-track .cat{flex:0 0 142px}
  .cats-rail.expanded .cats-track{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   VARIAÇÕES (cor) na página de produto · seleção
   ============================================================ */
.varbar{display:flex;flex-wrap:wrap;gap:9px}
.varchip{display:flex;align-items:center;gap:8px;font:600 13px var(--font-b);padding:8px 13px;border:1.5px solid var(--ink-200);border-radius:var(--r-pill);background:#fff;color:var(--ink-900);cursor:pointer;transition:.14s}
.varchip .dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.varchip.cor-opt:hover{border-color:var(--ink-950)}
.varchip.cor-opt.on{border-color:var(--orange);background:var(--orange-50);color:var(--orange-deep);box-shadow:0 0 0 3px rgba(255,101,1,.13)}

/* ---------- stepper (produto sem modelos) ---------- */
.qty-stepper{display:flex;align-items:center;gap:2px;border:1.5px solid var(--ink-200);border-radius:var(--r-md);height:52px;padding:0 4px;flex-shrink:0}
.qty-stepper button{width:42px;height:100%;border:none;background:none;font:700 22px var(--font-d);color:var(--ink-900);cursor:pointer;border-radius:8px;transition:.12s}
.qty-stepper button:hover{background:var(--ink-100);color:var(--orange-deep)}
.qty-stepper span{min-width:30px;text-align:center;font:800 17px var(--font-d)}
#btnAdd.ok{background:var(--whatsapp);color:#063}
.wa-secondary{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:600 13.5px var(--font-b);color:var(--ink-600)}
.wa-secondary:hover{color:var(--whatsapp)}
.wa-secondary svg{color:var(--whatsapp)}

/* ============================================================
   MODAL DE MODELOS (escolher quantidades)
   ============================================================ */
.mc-modal{position:fixed;inset:0;z-index:120;display:none}
.mc-modal.on{display:block}
.mc-overlay{position:absolute;inset:0;background:rgba(10,10,10,.55);backdrop-filter:blur(3px);animation:mcFade .2s ease}
.mc-sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);max-height:88vh;background:#fff;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:hidden;animation:mcPop .24s var(--ease)}
@keyframes mcFade{from{opacity:0}to{opacity:1}}
@keyframes mcPop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.mc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 22px 16px;border-bottom:1px solid var(--ink-150)}
.mc-eyebrow{font:700 11px var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:3px}
.mc-head b{font:800 19px var(--font-d);color:var(--ink-950);line-height:1.2;display:block}
.mc-x{width:38px;height:38px;border-radius:10px;border:none;background:var(--ink-50);color:var(--ink-600);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:.13s}
.mc-x:hover{background:var(--ink-100);color:var(--ink-950)}
.mc-colorline{align-items:center;gap:8px;padding:11px 22px;background:var(--orange-50);font:600 13px var(--font-b);color:var(--orange-deep);border-bottom:1px solid var(--orange-100)}
.mc-colorline b{font-weight:800}
.mc-color-hint{margin-left:auto;font:500 12px var(--font-b);color:var(--ink-500)}
.mc-list{overflow-y:auto;padding:8px 22px;flex:1}
.mc-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--ink-100)}
.mc-row:last-child{border-bottom:none}
.mc-name{flex:1;font:700 15px var(--font-d);color:var(--ink-900);text-transform:uppercase;letter-spacing:.01em}
.mc-row.has .mc-name{color:var(--orange-deep)}
.mc-ctrls{display:flex;align-items:center;gap:4px}
.mc-q{min-width:34px;text-align:center;font:800 17px var(--font-d);color:var(--ink-950);order:2}
.mc-step{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--ink-200);background:#fff;font:700 20px var(--font-d);color:var(--ink-900);cursor:pointer;display:grid;place-items:center;transition:.12s}
.mc-step:hover{border-color:var(--orange);color:var(--orange-deep);background:var(--orange-50)}
.mc-step.minus{order:1}
.mc-step.plus{order:3;background:var(--ink-950);color:#fff;border-color:var(--ink-950)}
.mc-step.plus:hover{background:var(--orange);color:#000;border-color:var(--orange)}
.mc-foot{display:flex;gap:11px;padding:16px 22px;border-top:1px solid var(--ink-150);background:var(--ink-50)}
.mc-foot-btn{flex:1;justify-content:center}
.mc-foot-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--ink-950);color:#fff;font:800 12px var(--font-d)}
.btn-primary .mc-foot-count{background:#000;color:var(--orange)}

/* ---------- toast ---------- */
.mc-toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:var(--ink-950);color:#fff;font:700 14px var(--font-d);padding:13px 22px;border-radius:var(--r-pill);box-shadow:0 12px 34px rgba(0,0,0,.3);z-index:130;opacity:0;pointer-events:none;transition:.26s var(--ease)}
.mc-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- carrinho flutuante ---------- */
.cart-float{position:fixed;right:22px;bottom:92px;z-index:60;width:56px;height:56px;border-radius:50%;background:var(--ink-950);color:#fff;display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.32);transition:.16s}
.cart-float:hover{background:var(--orange);color:#000;transform:scale(1.06)}
.cart-float-badge{position:absolute;top:-4px;right:-4px;min-width:23px;height:23px;padding:0 6px;border-radius:12px;background:var(--orange);color:#000;font:800 12px var(--font-d);display:grid;place-items:center;border:2.5px solid var(--ink-50)}

/* ============================================================
   PÁGINA DO CARRINHO
   ============================================================ */
.cart-grid{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start}
.cart-items{display:flex;flex-direction:column;gap:14px}
.cart-item{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--ink-150);border-radius:var(--r-lg);padding:14px}
.cart-item img{width:88px;height:88px;object-fit:cover;border-radius:var(--r-md);background:var(--orange-50)}
.ci-name{font:800 16px var(--font-d);color:var(--ink-950);line-height:1.25}
.ci-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.ci-meta span{font:600 12px var(--font-b);background:var(--ink-50);border:1px solid var(--ink-150);border-radius:var(--r-pill);padding:3px 10px;color:var(--ink-600)}
.ci-unit{font:500 13px var(--font-b);color:var(--ink-400);margin-top:7px}
.ci-right{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.ci-stepper{display:flex;align-items:center;gap:2px;border:1.5px solid var(--ink-200);border-radius:var(--r-md);padding:2px}
.ci-stepper button{width:34px;height:34px;border:none;background:none;font:700 19px var(--font-d);color:var(--ink-900);cursor:pointer;border-radius:7px;transition:.12s}
.ci-stepper button:hover{background:var(--ink-100);color:var(--orange-deep)}
.ci-qtd{min-width:28px;text-align:center;font:800 15px var(--font-d)}
.ci-sub{font:800 17px var(--font-d);color:var(--ink-950)}
.ci-del{border:none;background:none;color:var(--ink-400);cursor:pointer;padding:2px;transition:.12s}
.ci-del:hover{color:#D33}
.cart-summary{background:#fff;border:1px solid var(--ink-150);border-radius:var(--r-lg);padding:22px;position:sticky;top:92px}
.cart-summary h3{font:800 18px var(--font-d);text-transform:uppercase;margin-bottom:16px}
.cs-row{display:flex;justify-content:space-between;align-items:center;font:600 15px var(--font-b);color:var(--ink-600);padding:9px 0;border-bottom:1px solid var(--ink-100)}
.cs-row b{font:800 17px var(--font-d);color:var(--ink-950)}
.cs-note{font:500 12.5px var(--font-b);color:var(--ink-400);margin:14px 0 16px;line-height:1.5}
.cart-clear{width:100%;margin-top:11px;background:none;border:none;font:600 13px var(--font-b);color:var(--ink-400);cursor:pointer;padding:6px}
.cart-clear:hover{color:#D33;text-decoration:underline}
.cart-empty{text-align:center;padding:64px 24px;color:var(--ink-500)}
.cart-empty svg{color:var(--ink-200);margin-bottom:18px}
.cart-empty h2{font:800 24px var(--font-d);color:var(--ink-950);margin-bottom:8px}
.cart-empty p{margin-bottom:22px}

@media(max-width:760px){
  .cart-grid{grid-template-columns:1fr}
  .cart-summary{position:static}
}
@media(max-width:520px){
  .cart-item{grid-template-columns:68px 1fr;grid-template-areas:'img info' 'right right'}
  .cart-item img{width:68px;height:68px;grid-area:img}
  .cart-item .ci-info{grid-area:info}
  .cart-item .ci-right{grid-area:right;flex-direction:row;justify-content:space-between;align-items:center;width:100%;border-top:1px solid var(--ink-100);padding-top:11px;margin-top:3px}
  .mc-foot{flex-direction:column-reverse}
}

/* ============================================================
   CARD: link + rodapé com "Adicionar" / seletor de quantidade
   ============================================================ */
.pc-link{display:flex;flex-direction:column;flex:1;color:inherit}
.pc-foot{padding:0 16px 16px;margin-top:auto}
/* o card é flex-column; o link cresce e empurra o rodapé pra baixo */
.pc .body{padding-bottom:13px}
.pc-add{width:100%;font:700 14px var(--font-d);background:var(--ink-950);color:#fff;border:none;border-radius:var(--r-md);padding:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:.15s var(--ease)}
.pc-add:hover{background:var(--orange);color:#000}
.pc-add:active{transform:scale(.97)}
.pc-stepper{display:flex;align-items:center;height:46px;border:1.5px solid var(--orange);border-radius:var(--r-md);background:var(--orange-50);overflow:hidden;animation:pcPop .18s var(--ease)}
@keyframes pcPop{from{transform:scale(.94);opacity:.4}to{transform:scale(1);opacity:1}}
.pc-stepper button{width:46px;height:100%;border:none;background:none;font:700 22px var(--font-d);color:var(--orange-deep);cursor:pointer;flex-shrink:0;transition:.12s;line-height:1}
.pc-stepper button:hover{background:var(--orange);color:#000}
.pc-qty{flex:1;width:100%;min-width:0;border:none;background:transparent;text-align:center;font:800 17px var(--font-d);color:var(--ink-950);outline:none;-moz-appearance:textfield}
.pc-qty::-webkit-outer-spin-button,.pc-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- campo nome no resumo do carrinho ---------- */
.cs-name{display:block;font:700 12px var(--font-d);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-600);margin:16px 0 0}
.cs-name input{display:block;width:100%;margin-top:7px;padding:12px 14px;border:1.5px solid var(--ink-200);border-radius:var(--r-md);font:500 15px var(--font-b);color:var(--ink-950);outline:none;transition:.15s;background:#fff}
.cs-name input::placeholder{color:var(--ink-400);font-weight:400}
.cs-name input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,101,1,.14)}
.cs-name input.shake{border-color:#E5484D;animation:csShake .42s}
@keyframes csShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
#cartWa{margin-top:14px}
#cartWa:disabled{opacity:.7;cursor:wait}

/* ============================================================
   VARIAÇÃO POR TIPO (Feminino / Masculino / Sortida)
   ============================================================ */
.mc-row-tipo{flex-direction:column;align-items:stretch;gap:9px}
.mc-row-tipo .mc-name{margin-bottom:2px}
.mc-tipos{display:flex;flex-direction:column;gap:8px}
.tp-line{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1.5px solid var(--ink-150);border-radius:11px;background:var(--ink-50)}
.tp-line.has{border-color:var(--orange);background:var(--orange-50)}
.tp-lbl{flex:1;font:700 13px var(--font-d);color:var(--ink-800);text-transform:uppercase;letter-spacing:.02em}
.tp-line.has .tp-lbl{color:var(--orange-deep)}
.tp-line .mc-q{min-width:28px;font-size:15px}
.tp-line .mc-step{width:34px;height:34px;font-size:18px}

/* ============================================================
   INSERIR VARIAÇÃO — pontos de inserção (aparecem no hover)
   ============================================================ */
.vi-gap{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;cursor:pointer;padding:3px 0;height:16px;opacity:0;transition:opacity .14s}
.mc-list:hover .vi-gap{opacity:.32}
.vi-gap:hover{opacity:1 !important}
.vi-gap-line{flex:1;height:1.5px;background:var(--orange);border-radius:2px}
.vi-gap-txt{font:800 10.5px var(--font-b);text-transform:uppercase;letter-spacing:.08em;color:var(--orange-deep);white-space:nowrap}
.vi-gap-cor{width:26px;height:26px;border-radius:50%;border:1.5px dashed var(--ink-300);background:#fff;color:var(--ink-400);font:700 16px var(--font-d);line-height:1;cursor:pointer;display:grid;place-items:center;opacity:.4;transition:.14s;align-self:center;padding:0;flex-shrink:0}
.varbar:hover .vi-gap-cor{opacity:.65}
.vi-gap-cor:hover{opacity:1;border-color:var(--orange);color:var(--orange-deep);border-style:solid}

/* ============================================================
   MINI-MODAL: inserir variação (PIN + nome)
   ============================================================ */
.vi-modal{position:fixed;inset:0;z-index:140;display:none}
.vi-modal.on{display:block}
.vi-overlay{position:absolute;inset:0;background:rgba(10,10,10,.55);backdrop-filter:blur(3px);animation:mcFade .2s ease}
.vi-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(380px,92vw);background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.4);padding:26px 24px 24px;animation:mcPop .22s var(--ease)}
.vi-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:9px;border:none;background:var(--ink-50);color:var(--ink-600);display:grid;place-items:center;cursor:pointer;transition:.13s}
.vi-x:hover{background:var(--ink-100);color:var(--ink-950)}
.vi-lock{width:46px;height:46px;border-radius:13px;background:var(--orange-50);color:var(--orange-deep);display:grid;place-items:center;margin-bottom:12px}
.vi-step h3{font:800 19px var(--font-d);color:var(--ink-950);margin-bottom:5px}
.vi-step p{font:500 13.5px var(--font-b);color:var(--ink-600);margin-bottom:14px;line-height:1.45}
.vi-input{width:100%;padding:12px 14px;border:1.5px solid var(--ink-200);border-radius:11px;font:600 16px var(--font-b);color:var(--ink-950);outline:none;margin-bottom:6px;background:#fff}
.vi-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,101,1,.14)}
#viPin{letter-spacing:.3em;text-align:center}
.vi-colorwrap{display:none;align-items:center;gap:10px;margin:2px 0 8px}
.vi-colorwrap span{font:700 13px var(--font-b);color:var(--ink-700)}
.vi-colorwrap input[type=color]{width:52px;height:40px;border:1.5px solid var(--ink-200);border-radius:10px;padding:3px;cursor:pointer}
.vi-err{min-height:18px;font:600 12.5px var(--font-b);color:#c0341d;margin-bottom:8px}