/* =============================================================
   SEGWAY STORE — clone estrutural
   assets/css/styles.css
   ============================================================= */

/* ---------- TOKENS ---------- */
:root{
  --red:        #e02718;
  --red-dark:   #c41f12;
  --sale:       #e4002b;
  --verificado: #1d9bf0;   /* azul do selo de verificacao */
  --black:      #000000;
  --ink:        #1a1a1a;
  --ink-2:      #4a4a4a;
  --muted:      #767676;
  --line:       #e5e5e5;
  --card-bg:    #f4f4f4;
  --white:      #ffffff;

  --container:  1160px;
  --gutter:     20px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --topbar-h: 34px;
  --header-h: 64px;

  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--white); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input{ font:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* =============================================================
   1. TOPBAR PRETA
   ============================================================= */
.topbar{
  background:var(--black); color:var(--white);
  height:var(--topbar-h); font-size:13px;
}
.topbar__inner{
  max-width:1460px; margin-inline:auto; padding-inline:24px;
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar__left{ display:flex; align-items:center; gap:6px; }
.topbar__left a{ color:var(--red); font-weight:500; }
.topbar__left a:hover{ text-decoration:underline; }
.topbar__right{ display:flex; align-items:center; gap:0; }
.topbar__right a{ padding:0 12px; opacity:.9; white-space:nowrap; }
.topbar__right a:hover{ opacity:1; text-decoration:underline; }
.topbar__right li + li{ border-left:1px solid rgba(255,255,255,.35); }
.topbar__right ul{ display:flex; align-items:center; }

/* =============================================================
   2. HEADER
   ============================================================= */
.header{
  position:sticky; top:0; z-index:200;
  background:var(--white); height:var(--header-h);
  transition:box-shadow .25s var(--ease);
}
.header--stuck{ box-shadow:0 1px 0 rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.05); }
.header__inner{
  max-width:1460px; margin-inline:auto; padding-inline:24px;
  height:100%; display:flex; align-items:center; gap:18px;
}

/* logo */
.logo{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.logo__mark{ width:44px; height:26px; }
.logo__word{ height:15px; }
.logo__store{ font-size:15px; font-weight:600; letter-spacing:.02em; margin-left:2px; }

/* nav */
.nav{ flex:1 1 auto; min-width:0; }
.nav__list{ display:flex; align-items:center; gap:0; overflow:hidden; }
.nav__list > li > a{
  display:block; padding:0 15px; line-height:var(--header-h);
  font-size:15px; font-weight:500; white-space:nowrap;
  position:relative;
}
.nav__list > li > a::after{
  content:''; position:absolute; left:15px; right:15px; bottom:14px; height:2px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav__list > li > a:hover::after{ transform:scaleX(1); }
.nav__more{
  flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; transition:background .2s var(--ease);
}
.nav__more:hover{ background:#f0f0f0; }

/* acoes */
.header__actions{ flex:0 0 auto; display:flex; align-items:center; gap:4px; }
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; position:relative; transition:background .2s var(--ease);
}
.icon-btn:hover{ background:#f0f0f0; }
.icon-btn__badge{
  position:absolute; top:3px; right:2px; min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--r-pill); background:var(--red); color:#fff;
  font-size:10px; font-weight:600; display:grid; place-items:center;
}
.icon-btn__badge[hidden]{ display:none; }
.burger{ display:none; }

/* =============================================================
   3. HERO / SLIDER
   ============================================================= */
.hero{ position:relative; background:#0b0b0b; overflow:hidden; }
.hero__track{ position:relative; height:clamp(430px, 52vw, 660px); }
.hero__slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.hero__slide.is-active{ opacity:1; visibility:visible; }
.hero__media{ position:absolute; inset:0; }
.hero__media img,.hero__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.35) 100%);
}
.hero__content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; color:#fff; padding:clamp(40px,7vw,72px) 20px 0;
}
.hero__eyebrow{ font-size:clamp(15px,1.4vw,19px); font-weight:400; margin-bottom:8px; text-shadow:0 1px 12px rgba(0,0,0,.4); }
.hero__title{
  font-size:clamp(38px,5.2vw,72px); font-weight:800; line-height:1.02;
  letter-spacing:.02em; text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero__subtitle{ font-size:clamp(17px,1.8vw,26px); font-weight:400; margin-top:10px; text-shadow:0 1px 14px rgba(0,0,0,.35); }

/* countdown */
.countdown{ display:flex; align-items:center; gap:clamp(6px,1vw,12px); margin-top:clamp(18px,2.4vw,30px); }
.countdown__sep{ font-size:22px; font-weight:600; opacity:.9; }
.countdown__cell{
  background:rgba(255,255,255,.94); color:var(--ink);
  min-width:clamp(52px,5vw,68px); padding:6px 8px 5px;
  border-radius:var(--r-md); text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.countdown__num{ font-size:clamp(20px,2.2vw,28px); font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.countdown__label{ font-size:9px; font-weight:500; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }

/* cta */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-pill); font-weight:600; white-space:nowrap;
  transition:transform .18s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active{ transform:scale(.97); }
.btn--red{ background:var(--red); color:#fff; padding:13px 28px; font-size:16px; }
.btn--red:hover{ background:var(--red-dark); box-shadow:0 8px 22px rgba(224,39,24,.32); }
.btn--sm{ padding:10px 22px; font-size:14px; }
.hero__cta{ margin-top:clamp(18px,2.4vw,28px); }

/* setas */
.hero__arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:5;
  width:46px; height:46px; display:grid; place-items:center;
  color:#fff; opacity:.75; transition:opacity .2s var(--ease);
}
.hero__arrow:hover{ opacity:1; }
.hero__arrow--prev{ left:10px; }
.hero__arrow--next{ right:10px; }

/* abas inferiores */
.hero__tabs{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; justify-content:center; gap:0;
  overflow-x:auto; scrollbar-width:none;
}
.hero__tabs::-webkit-scrollbar{ display:none; }
.hero__tab{
  position:relative; padding:16px clamp(12px,2vw,26px) 22px;
  color:rgba(255,255,255,.72); font-size:15px; font-weight:500; white-space:nowrap;
  transition:color .2s var(--ease);
}
.hero__tab:hover{ color:#fff; }
.hero__tab.is-active{ color:#fff; font-weight:600; }
.hero__tab::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(255,255,255,.3);
}
.hero__tab::after{
  content:''; position:absolute; left:0; top:0; height:2px; width:0; background:#fff;
}
.hero__tab.is-active::after{ width:100%; animation:tabProgress var(--slide-duration,7s) linear forwards; }
@keyframes tabProgress{ from{ width:0 } to{ width:100% } }

/* =============================================================
   4. ICONES DE CATEGORIA
   ============================================================= */
.cat-icons{ padding:clamp(28px,4vw,46px) 0 clamp(20px,3vw,34px); }
.cat-icons__list{
  display:flex; justify-content:center; gap:clamp(14px,3.4vw,54px);
  overflow-x:auto; scrollbar-width:none; padding-inline:4px;
}
.cat-icons__list::-webkit-scrollbar{ display:none; }
.cat-icon{ flex:0 0 auto; text-align:center; }
.cat-icon img{
  width:auto; height:74px; object-fit:contain; margin-inline:auto;
  transition:transform .3s var(--ease);
}
.cat-icon:hover img{ transform:translateY(-4px); }
.cat-icon span{ display:block; margin-top:8px; font-size:14px; font-weight:500; white-space:nowrap; }

/* =============================================================
   5. TITULOS DE SECAO
   ============================================================= */
.section{ padding-block:clamp(26px,4vw,44px); }
.section__head{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-bottom:clamp(16px,2.2vw,26px);
}
.section__title{ font-size:clamp(26px,3.2vw,38px); font-weight:700; letter-spacing:-.01em; }
.section__link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--red); font-size:15px; font-weight:600; white-space:nowrap;
}
.section__link svg{ transition:transform .2s var(--ease); }
.section__link:hover svg{ transform:translateX(3px); }

/* =============================================================
   6. CARROSSEL HORIZONTAL (top picks / acessorios / more)
   ============================================================= */
.rail{ position:relative; }
.rail__track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:4px;
  /* sangra ate a borda da viewport, igual ao site original */
  margin-right:calc(50% - 50vw); padding-right:var(--gutter);
}
.rail__track::-webkit-scrollbar{ display:none; }
.rail__track > *{ scroll-snap-align:start; flex:0 0 auto; }
.rail__nav{
  position:absolute; top:50%; translate:0 -50%; z-index:4;
  width:40px; height:40px; border-radius:50%; background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.16); display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease);
}
.rail:hover .rail__nav{ opacity:1; pointer-events:auto; }
.rail__nav[disabled]{ opacity:0 !important; pointer-events:none; }
.rail__nav--prev{ left:-16px; }
.rail__nav--next{ right:-16px; }

/* --- cards do top picks --- */
.pick{
  position:relative; width:284px; height:350px; border-radius:var(--r-md);
  overflow:hidden; background:var(--card-bg);
}
.pick--wide{ width:584px; }
.pick img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.pick::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
}
.pick--quiz::after{ background:linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.6) 100%); }
.pick:hover img{ transform:scale(1.04); }
.pick__body{
  position:absolute; left:22px; right:22px; bottom:20px; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.pick__name{ font-size:20px; font-weight:700; }
.pick__cat{ font-size:14px; opacity:.85; margin-top:1px; }
.pick__price{ font-size:16px; font-weight:600; margin-top:6px; }
.pick--quiz .pick__body{ bottom:24px; }
.pick--quiz .pick__name{ font-size:24px; }
.pick--quiz .pick__text{ font-size:14px; line-height:1.4; margin-top:6px; max-width:320px; opacity:.95; }
.pick--quiz .btn{ margin-top:14px; }

/* =============================================================
   7. SELO No.1
   ============================================================= */
.brandbar{ padding-block:clamp(10px,1.6vw,18px); }
.brandbar__inner{
  display:flex; align-items:center; gap:clamp(20px,5vw,80px); flex-wrap:wrap;
}
.brandbar__claim{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.brandbar__no1{ font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1; }
.brandbar__no1 sup{ font-size:.5em; }
.brandbar__divider{ width:1px; align-self:stretch; background:var(--ink); opacity:.75; }
.brandbar__claim-text{ font-size:15px; font-weight:700; line-height:1.25; letter-spacing:-.01em; }
.brandbar__claim-text small{ display:block; font-size:13px; font-weight:600; letter-spacing:.01em; }
.brandbar__stats{ display:flex; gap:clamp(24px,6vw,90px); margin-left:auto; flex-wrap:wrap; }
.brandbar__stat b{ display:block; font-size:clamp(20px,2.2vw,26px); font-weight:700; line-height:1.15; }
.brandbar__stat span{ font-size:13px; color:var(--ink-2); }
.brandbar__rule{
  height:3px; margin-top:16px; border-radius:2px;
  background:linear-gradient(90deg,#1b3fae 0%,#2f6bd8 35%,#7fa9ee 70%,#dfe8fb 100%);
}

/* =============================================================
   8. BANNER DE CATEGORIA
   ============================================================= */
.banner{
  position:relative; width:100%; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:1140/430; min-height:300px; background:#111;
}
.banner__media{ position:absolute; inset:0; }
.banner__media img,.banner__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 100%);
}
.banner--light .banner__media::after{
  background:linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.05) 50%, rgba(0,0,0,0) 100%);
}
.banner__content{
  position:relative; z-index:2; height:100%; padding:clamp(28px,4vw,50px);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  color:#fff;
}
.banner__eyebrow{ font-size:clamp(14px,1.4vw,18px); font-weight:400; opacity:.95; }
.banner__title{ font-size:clamp(34px,4.6vw,60px); font-weight:700; line-height:1.05; margin-top:2px; }
.banner__subtitle{ font-size:clamp(16px,1.7vw,22px); font-weight:400; margin-top:6px; }
.banner__specs{
  display:grid; grid-template-columns:repeat(2,auto); gap:6px 26px;
  background:rgba(20,20,20,.42); backdrop-filter:blur(6px);
  border-radius:var(--r-md); padding:14px 18px; margin-top:clamp(14px,2vw,22px);
}
.banner__spec{ display:flex; align-items:center; gap:8px; font-size:clamp(12px,1.15vw,15px); }
.banner__spec svg{ flex:0 0 auto; opacity:.9; }
.banner__cta{ margin-top:clamp(14px,2vw,22px); }
.banner__badge{
  position:absolute; top:14px; left:14px; z-index:3;
  background:rgba(0,0,0,.4); color:#fff; font-size:12px; font-weight:500;
  padding:2px 8px; border-radius:var(--r-sm);
}
.banner__replay{
  position:absolute; right:18px; bottom:18px; z-index:3;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.85); display:grid; place-items:center; color:var(--ink);
  transition:background .2s var(--ease);
}
.banner__replay:hover{ background:#fff; }

/* =============================================================
   9. GRADE DE PRODUTOS
   ============================================================= */
.grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(20px,2.6vw,30px);
}
.grid--2{ grid-template-columns:repeat(2,1fr); }

.card{ position:relative; display:flex; flex-direction:column; }
.card__media{
  position:relative; background:var(--card-bg); border-radius:var(--r-md);
  aspect-ratio:1/.86; overflow:hidden; display:grid; place-items:center;
}
.grid--2 .card__media{ aspect-ratio:1/.62; }
.card__media img,.card__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8%;
  transition:transform .45s var(--ease);
}
.card:hover .card__media img{ transform:scale(1.05); }
.card__save{
  position:absolute; top:10px; left:10px; z-index:2;
  background:var(--red); color:#fff; border-radius:var(--r-sm);
  padding:5px 9px; font-size:13px; font-weight:700; line-height:1.15; text-align:center;
  box-shadow:0 2px 8px rgba(224,39,24,.3);
}
.card__save b{ display:block; font-size:11px; font-weight:700; letter-spacing:.04em; }
.card__tagline{ font-size:13px; color:var(--muted); margin-top:14px; }
.card__sku{ font-size:12px; color:var(--muted); margin-top:14px; }
.card__name{
  font-size:clamp(15px,1.4vw,18px); font-weight:600; margin-top:3px; line-height:1.3;
  min-height:2.6em;                       /* 2 linhas: mantem os precos alinhados */
}
.card__name:hover{ color:var(--red); }
.card__prices{ display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.card__price{ font-size:16px; font-weight:600; }
.card__price--sale{ color:var(--sale); }
.card__compare{ font-size:14px; color:var(--muted); text-decoration:line-through; }
.card__add{
  margin-top:10px; align-self:flex-start;
  border:1px solid var(--ink); border-radius:var(--r-pill);
  padding:8px 18px; font-size:14px; font-weight:600;
  opacity:0; translate:0 6px;
  transition:opacity .22s var(--ease), translate .22s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.card:hover .card__add,.card:focus-within .card__add{ opacity:1; translate:0 0; }
.card__add:hover{ background:var(--ink); color:#fff; }

/* =============================================================
   10. ACESSORIOS
   ============================================================= */
.acc{ width:242px; }
.acc .card__media{ aspect-ratio:1/.85; }

/* =============================================================
   11. WHY CHOOSE US
   ============================================================= */
.why__track{
  display:flex; gap:16px; overflow-x:auto; scrollbar-width:none;
  margin-right:calc(50% - 50vw); padding-right:var(--gutter);
}
.why__track::-webkit-scrollbar{ display:none; }
.why-card{
  flex:0 0 auto; position:relative; background:var(--card-bg);
  border-radius:var(--r-lg); padding:26px 28px; overflow:hidden;
  width:282px; min-height:236px;
}
.why-card--wide{ width:566px; }
.why-card--wide .why-card__title,
.why-card--wide .why-card__text{ max-width:44%; }
.why-card--wide .why-card__img{ width:56%; right:-2%; }
.why-card--tall{ width:282px; }
.why-card__eyebrow{ font-size:13px; font-weight:600; color:var(--red); position:relative; z-index:2; }
.why-card__title{ font-size:clamp(17px,1.7vw,22px); font-weight:700; margin-top:6px; line-height:1.25; max-width:22ch; position:relative; z-index:2; }
.why-card__text{ font-size:14px; color:var(--ink-2); margin-top:8px; max-width:30ch; position:relative; z-index:2; }
.why-card__img{
  position:absolute; right:0; bottom:0; width:64%; height:auto; object-fit:contain; pointer-events:none;
}
.why-card--media .why-card__img{ width:58%; }
.why-card--tall .why-card__img{ width:70%; }
.why-card--logo{ min-height:110px; display:flex; flex-direction:column; justify-content:center; }
.why-card--logo .why-card__logo{ height:34px; width:auto; margin-bottom:12px; }
.why-card--logo .why-card__eyebrow{ order:2; margin-top:0; }
.why-card--logo .why-card__title{ order:3; font-size:17px; margin-top:2px; }
.why__stack{ display:flex; flex-direction:column; gap:16px; flex:0 0 auto; }

/* =============================================================
   12. NEWSLETTER
   ============================================================= */
.news{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:#b9d4e8; min-height:300px; display:flex; align-items:center;
  margin-block:clamp(30px,5vw,60px);
}
.news__img{ position:absolute; right:0; top:0; height:100%; width:58%; object-fit:cover; object-position:center; }
.news__img::after{ content:''; }
.news__content{ position:relative; z-index:2; padding:clamp(28px,4vw,48px); max-width:640px; }
.news__title{ font-size:clamp(24px,3vw,34px); font-weight:700; line-height:1.2; }
.news__fine{ font-size:12px; color:var(--ink-2); margin-top:12px; max-width:52ch; line-height:1.45; }
.news__form{ display:flex; margin-top:22px; max-width:400px; }
.news__form input{
  flex:1 1 auto; min-width:0; border:0; background:#fff;
  padding:14px 16px; font-size:15px; border-radius:0;
}
.news__form button{
  flex:0 0 auto; width:52px; background:var(--ink); color:#fff;
  display:grid; place-items:center; transition:background .2s var(--ease);
}
.news__form button:hover{ background:#000; }

/* =============================================================
   13. RODAPE
   ============================================================= */
.footer{ background:#f5f5f5; padding-top:clamp(34px,4vw,52px); }
.footer__logo{ width:26px; margin-bottom:26px; }
.footer__cols{
  display:grid; grid-template-columns:1.1fr 1.5fr 1fr 1.2fr 1.5fr; gap:clamp(20px,3vw,40px);
}
.footer__col h4{ font-size:15px; font-weight:700; margin-bottom:14px; }
.footer__col li + li{ margin-top:9px; }
.footer__col a{ font-size:13.5px; color:var(--ink-2); line-height:1.35; display:inline-block; }
.footer__col a:hover{ color:var(--ink); text-decoration:underline; }
.footer__sub p{ font-size:13px; color:var(--ink-2); margin-bottom:14px; line-height:1.4; }
.footer__form{ display:flex; max-width:280px; }
.footer__form input{ flex:1 1 auto; min-width:0; border:1px solid var(--line); border-right:0; background:#fff; padding:12px 14px; font-size:14px; }
.footer__form button{ flex:0 0 auto; width:44px; background:var(--ink); color:#fff; display:grid; place-items:center; }
.footer__care{ margin-top:26px; }
.footer__care h4{ font-size:15px; font-weight:700; margin-bottom:10px; }
.footer__care p{ font-size:13px; color:var(--ink-2); margin-bottom:8px; }
.footer__care a{ font-size:13px; color:var(--ink-2); text-decoration:underline; }

.footer__bottom{ margin-top:clamp(28px,4vw,44px); padding-bottom:34px; }
.footer__pay{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.footer__pay img{ height:22px; width:auto; }
.footer__legal{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-bottom:16px;
}
.footer__legal-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer__legal-links a{ font-size:13px; color:var(--ink-2); }
.footer__legal-links a:hover{ text-decoration:underline; }
.footer__social{ display:flex; gap:16px; align-items:center; }
.footer__social a{ color:var(--ink-2); transition:color .2s var(--ease); }
.footer__social a:hover{ color:var(--ink); }
.footer__copy{ font-size:12.5px; color:var(--ink-2); line-height:1.6; }
.footer__copy u{ text-decoration:underline; }
.footer__region{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); }

/* =============================================================
   14. CARRINHO (drawer)
   ============================================================= */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:300;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.overlay.is-open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); z-index:310;
  background:#fff; display:flex; flex-direction:column;
  translate:100% 0; transition:translate .35s var(--ease);
}
.drawer.is-open{ translate:0 0; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.drawer__head h3{ font-size:18px; font-weight:700; }
.drawer__body{ flex:1 1 auto; overflow-y:auto; padding:18px 22px; }
.drawer__empty{ text-align:center; color:var(--muted); padding-top:60px; font-size:15px; }
.drawer__foot{ padding:18px 22px 24px; border-top:1px solid var(--line); }
.drawer__total{ display:flex; justify-content:space-between; font-size:17px; font-weight:700; margin-bottom:14px; }
.drawer__foot .btn{ width:100%; }
.citem{ display:flex; gap:14px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.citem__img{ width:78px; height:78px; border-radius:var(--r-sm); background:var(--card-bg); object-fit:contain; padding:6px; flex:0 0 auto; }
.citem__name{ font-size:14px; font-weight:600; line-height:1.3; }
.citem__price{ font-size:14px; font-weight:600; margin-top:4px; }
.citem__qty{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.citem__qty button{ width:26px; height:26px; border:1px solid var(--line); border-radius:var(--r-sm); display:grid; place-items:center; font-size:15px; }
.citem__remove{ font-size:12px; color:var(--muted); text-decoration:underline; margin-top:6px; }

/* =============================================================
   15. BOTAO ACESSIBILIDADE
   ============================================================= */
.a11y-fab{
  position:fixed; right:20px; bottom:20px; z-index:150;
  width:44px; height:44px; border-radius:50%;
  background:#1a73e8; color:#fff; display:grid; place-items:center;
  box-shadow:0 3px 14px rgba(0,0,0,.28);
}

/* =============================================================
   16. RESPONSIVO
   ============================================================= */
@media (max-width:1180px){
  .nav__list > li > a{ padding:0 11px; font-size:14px; }
}
@media (max-width:1024px){
  .topbar__left{ display:none; }
  .topbar__inner{ justify-content:center; }
  .burger{ display:grid; }
  .nav{ display:none; }
  .nav.is-open{
    display:block; position:fixed; inset:calc(var(--header-h) + var(--topbar-h)) 0 0 0;
    background:#fff; z-index:190; overflow-y:auto; padding:8px 0 40px;
  }
  .nav.is-open .nav__list{ flex-direction:column; align-items:stretch; overflow:visible; }
  .nav.is-open .nav__list > li{ border-bottom:1px solid var(--line); }
  .nav.is-open .nav__list > li > a{ line-height:1; padding:18px 24px; font-size:16px; }
  .nav__more{ display:none; }
  .header__inner{ padding-inline:16px; gap:8px; }
  .logo{ margin-right:auto; }

  .footer__cols{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .pick--wide{ width:420px; }
  .banner__specs{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  :root{ --gutter:16px; }
  .hero__track{ height:clamp(460px,105vw,600px); }
  .hero__content{ padding-top:44px; }
  .hero__tabs{ justify-content:flex-start; }
  .hero__arrow{ display:none; }
  .cat-icon img{ height:56px; }
  .cat-icon span{ font-size:12.5px; }
  .cat-icons__list{ justify-content:flex-start; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .grid--2{ grid-template-columns:1fr; }
  .grid--2 .card__media{ aspect-ratio:1/.7; }
  .banner{ aspect-ratio:auto; min-height:0; }
  .banner__content{ min-height:420px; justify-content:flex-start; padding-top:36px; }
  .banner__specs{ background:rgba(20,20,20,.5); }
  .pick{ width:250px; height:310px; }
  .pick--wide{ width:300px; }
  .why-card,.why-card--wide,.why-card--tall{ width:264px; }
  .news__img{ width:100%; opacity:.35; }
  .news__content{ max-width:none; }
  .footer__cols{ grid-template-columns:1fr; }
  .footer__legal{ flex-direction:column; align-items:flex-start; }
  .rail__nav{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* =============================================================
   17. MEGA-MENU
   ============================================================= */
.nav__list > li > a.is-open{ color:var(--red); }
.nav__list > li > a.is-open::after{ display:none; }

.mega{
  position:absolute; top:100%; left:0; right:0; z-index:190;
  background:#fff; border-top:1px solid var(--line);
  box-shadow:0 14px 28px rgba(0,0,0,.09);
  opacity:0; visibility:hidden; translate:0 -6px;
  transition:opacity .2s var(--ease), visibility .2s var(--ease), translate .2s var(--ease);
}
.mega.is-open{ opacity:1; visibility:visible; translate:0 0; }

.mega__panel{ display:none; }
.mega__panel.is-open{ display:block; }

.mega__inner{
  display:grid; grid-template-columns:270px minmax(0,1fr) 270px;
  gap:clamp(20px,3vw,44px); align-items:start;
  padding-block:clamp(26px,3vw,40px);
}

/* coluna 1 — subcategorias */
.mega__groups li + li{ margin-top:14px; }
.mega__group{
  text-align:left; font-size:16px; font-weight:600; line-height:1.3;
  color:var(--muted); transition:color .18s var(--ease);
}
.mega__group:hover{ color:var(--ink-2); }
.mega__group.is-active{ color:var(--ink); }

/* coluna 2 — produtos da subcategoria ativa */
.mega__set{ display:none; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px; }
.mega__set.is-active{ display:grid; }

.mega-card{ display:block; text-align:center; padding:6px; border-radius:var(--r-md); }
.mega-card:hover{ background:#fafafa; }
.mega-card__img{ display:block; aspect-ratio:1/.92; }
.mega-card__img img{ width:100%; height:100%; object-fit:contain; }
.mega-card__name{ display:block; font-size:14px; font-weight:500; line-height:1.35; margin-top:6px; }
.mega-card__price{ display:block; font-size:17px; font-weight:700; margin-top:4px; }
.mega-card__price .cents{ font-size:.72em; font-weight:700; }

/* coluna 3 — links */
.mega__links{ border-left:1px solid var(--line); padding-left:clamp(18px,2.4vw,34px); }
.mega__links a{
  display:block; font-size:16px; font-weight:600; line-height:1.35;
  max-width:24ch;
}
.mega__links a + a{ margin-top:18px; }
.mega__links a:hover{ color:var(--red); }

@media (max-width:1024px){
  .mega{ display:none; }        /* no mobile o menu vira gaveta */
}

/* =============================================================
   18. SELO DE NOTA (compacto, com fonte declarada)
   ============================================================= */
.selonota{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border:1px solid var(--line); border-radius:var(--r-md);
  background:#fff; color:inherit;
}
a.selonota:hover{ border-color:var(--ink-2); }

.selonota__estrelas{ display:inline-flex; gap:3px; flex:0 0 auto; }
.selonota__caixa{
  width:22px; height:22px; display:grid; place-items:center;
  border-radius:4px; font-style:normal; font-size:13px; line-height:1;
  background:#e6e6e6; color:#fff;
}
.selonota__caixa--cheia{ background:#f5a623; }
.selonota__caixa--meia{
  background:linear-gradient(90deg,#f5a623 50%,#e6e6e6 50%);
}

.selonota__txt{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; font-size:14px; }
.selonota__txt b{ font-size:15px; font-weight:700; }
.selonota__qtd{ color:var(--ink-2); }
.selonota__fonte{ font-size:12px; color:var(--muted); }

@media (max-width:520px){
  .selonota{ padding:7px 11px; gap:8px; }
  .selonota__caixa{ width:19px; height:19px; font-size:11px; }
  .selonota__fonte{ width:100%; }
}

/* selo compacto dentro do card de produto */
.selonota--compacto{
  padding:0; border:0; background:transparent; gap:7px; margin-top:6px;
}
.selonota--compacto .selonota__caixa{ width:15px; height:15px; font-size:9px; border-radius:3px; }
.selonota--compacto .selonota__txt{ font-size:12.5px; gap:5px; }
.selonota--compacto .selonota__txt b{ font-size:13px; }
.selonota--compacto .selonota__qtd{ font-size:12px; }
.selonota--compacto .selonota__fonte{ font-size:11px; }

/* =============================================================
   TELAS ESTREITAS (iPhone SE e similares, 320-400px)
   -------------------------------------------------------------
   Nesta faixa a barra preta do topo e as acoes do cabecalho nao
   cabem inteiras. Em vez de encolher a fonte ate ficar ilegivel,
   a barra rola na horizontal dentro dela mesma e o cabecalho
   compacta os espacamentos.
   ============================================================= */
@media (max-width:640px){
  /* a barra do topo rola sozinha, sem arrastar a pagina junto */
  .topbar__inner{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .topbar__inner::-webkit-scrollbar{ display:none; }
  .topbar__right{ flex:0 0 auto; }
  .topbar__right a{ padding:0 10px; }
}

@media (max-width:400px){
  :root{ --gutter:14px; }

  .topbar{ font-size:11.5px; }
  .topbar__right a{ padding:0 8px; }

  .header__inner{ padding-inline:12px; gap:4px; }
  .header__actions{ gap:0; }
  .header__actions .icon-btn{ width:34px; height:34px; }
  .logo span{ font-size:15px; }
  .logo__mark{ transform:scale(.88); transform-origin:left center; }

  /* duas colunas ficam apertadas demais para ler preco e nome */
  .grid{ grid-template-columns:1fr; gap:14px; }
  .grid--2 .card__media{ aspect-ratio:1/.72; }

  .section__title{ font-size:22px; }
  .cat-icon img{ height:48px; }
  .cat-icon span{ font-size:11.5px; }
}

@media (max-width:400px){
  /* titulo e link "ver todos" nao cabem lado a lado nesta largura */
  .section__head{ flex-wrap:wrap; row-gap:8px; }
  .section__link{ font-size:14px; }
}