/* =========================================================
   Adaptador CarPlay — página de venta (cópia estática)
   Tema: light | primary #000 | secondary #10b981 | Inter
   ========================================================= */

:root{
  --primary:#000000;
  --secondary:#10b981;
  --price:#000000;
  --header-bg:#ffffff;
  --header-text:#111827;
  --footer-bg:#111827;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#ffffff;
  --soft:#f9fafb;
  --radius:12px;
  --wrap:1180px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
/* nada pode empurrar a página para os lados no celular */
html,body{overflow-x:hidden;max-width:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  padding-bottom:84px; /* espaço para o botão flutuante */
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:inherit;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;}

/* ---------------- Header ---------------- */
.site-header{
  background:var(--header-bg);
  color:var(--header-text);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.site-header .wrap{
  display:flex;align-items:center;gap:36px;
  min-height:84px;padding-top:8px;padding-bottom:8px;
}

/* Logo à esquerda (arquivo recortado, proporção ~6:1) */
.brand{flex:none;display:flex;align-items:center;}
.brand img{height:30px;width:auto;}

/* Menu */
.main-nav{display:flex;align-items:center;gap:30px;flex:1;}
.main-nav a{
  position:relative;text-decoration:none;color:var(--header-text);
  font-size:15px;font-weight:500;padding:8px 0;white-space:nowrap;
}
.main-nav a:hover{opacity:.65;}
.main-nav a.is-active{font-weight:600;}
.main-nav a.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--header-text);border-radius:2px;
}

/* Ícones à direita */
.header-actions{display:flex;align-items:center;gap:6px;flex:none;}
.header-actions button{
  position:relative;border:0;background:none;cursor:pointer;
  color:var(--header-text);padding:8px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.header-actions button:hover{background:var(--soft);}
.header-actions svg{width:23px;height:23px;display:block;}

.cart-count{
  position:absolute;top:1px;right:1px;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--primary);color:#fff;
  border-radius:999px;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}

/* Botão do menu — só aparece no celular */
.nav-toggle{
  display:none;flex:none;
  width:40px;height:40px;padding:0;border:0;cursor:pointer;
  background:none;color:var(--header-text);
  align-items:center;justify-content:center;border-radius:8px;
}
.nav-toggle:hover{background:var(--soft);}
.nav-toggle svg{width:24px;height:24px;}
.nav-toggle .ico-close{display:none;}
.nav-toggle[aria-expanded="true"] .ico-menu{display:none;}
.nav-toggle[aria-expanded="true"] .ico-close{display:block;}

/* Painel do menu e fundo escurecido */
.mobile-nav{display:none;}
.nav-backdrop{display:none;}

/* ---------------- Layout produto ---------------- */
.product{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:48px;
  padding:36px 0 8px;
  align-items:start;
}

/* Galeria */
.gallery-main{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--soft);
  aspect-ratio:1/1;
}

/* Slider: arrasta o dedo para trocar de foto */
.slides{
  display:flex;height:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.slides::-webkit-scrollbar{display:none;}
.slide{
  flex:0 0 100%;height:100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}
.slide img{
  width:100%;height:100%;object-fit:cover;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}

/* Setas sobre a foto (desktop) */
.slide-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:40px;height:40px;padding:0;border:0;
  background:rgba(255,255,255,.92);color:var(--text);
  border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  opacity:0;transition:opacity .18s ease,background .15s ease;
}
.gallery-main:hover .slide-nav{opacity:1;}
.slide-nav:hover{background:#fff;}
.slide-nav svg{width:19px;height:19px;}
.slide-nav.prev{left:12px;}
.slide-nav.next{right:12px;}
.slide-nav[disabled]{opacity:0!important;pointer-events:none;}

/* Bolinhas indicadoras */
.dots{
  position:absolute;left:0;right:0;bottom:12px;z-index:6;
  display:flex;justify-content:center;gap:6px;pointer-events:none;
}
.dots i{
  width:6px;height:6px;border-radius:50%;
  background:rgba(17,24,39,.28);transition:all .2s ease;
}
.dots i.is-active{background:var(--primary);width:18px;border-radius:999px;}
/* Faixa de miniaturas com setas */
.thumbs-wrap{position:relative;margin-top:12px;}
.thumbs{
  display:flex;gap:10px;
  overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:2px;
}
.thumbs::-webkit-scrollbar{display:none;}
.thumbs button{
  flex:0 0 calc((100% - 40px) / 5);  /* 5 visíveis por vez */
  scroll-snap-align:start;
  padding:0;border:2px solid var(--line);background:none;
  border-radius:8px;overflow:hidden;cursor:pointer;aspect-ratio:1/1;
  transition:border-color .15s ease;
}

/* Setas */
.thumb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:34px;height:34px;padding:0;border:1px solid var(--line);
  background:rgba(255,255,255,.96);color:var(--text);
  border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:opacity .15s ease,background .15s ease;
}
.thumb-nav:hover{background:#fff;}
.thumb-nav svg{width:17px;height:17px;}
.thumb-nav.prev{left:-8px;}
.thumb-nav.next{right:-8px;}
.thumb-nav[disabled]{opacity:0;pointer-events:none;}
.thumbs button.is-active{border-color:var(--primary);}
.thumbs img{width:100%;height:100%;object-fit:cover;}

/* Caixa de compra */
.buybox h1{
  font-size:28px;line-height:1.25;font-weight:700;
  margin:0 0 12px;letter-spacing:-.02em;
}
.rating-line{
  display:flex;align-items:center;gap:11px;
  font-size:14px;color:var(--muted);margin-bottom:18px;
}
.rating-text{font-size:14.5px;color:#6b7280;}
.rating-text b{color:var(--text);font-weight:700;}

/* Estrelas em caixas (estilo Trustpilot) */
.stars-box{position:relative;flex:none;line-height:0;}
.sb-row{display:flex;gap:3px;}
.sb-row i{
  width:23px;height:23px;flex:none;
  background:#dcdce6;                     /* caixa vazia */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 3.5l2.6 5.6 6 .7-4.4 4.1 1.2 6-5.4-3-5.4 3 1.2-6L3.4 9.8l6-.7z'/%3E%3C/svg%3E");
  background-size:88%;
  background-position:center;
  background-repeat:no-repeat;
}
.sb-fg{
  position:absolute;top:0;left:0;
  overflow:hidden;                        /* recorta a última caixa na fração */
}
.sb-fg i{background-color:#48b585;}       /* caixa preenchida */

/* Variante menor, usada dentro dos comentários */
.stars-box.sm{display:inline-block;vertical-align:middle;}
.stars-box.sm .sb-row{gap:2px;}
.stars-box.sm .sb-row i{width:15px;height:15px;}

/* Pontos-chave abaixo do nome do produto */
.key-points{
  list-style:none;margin:0 0 16px;padding:0;
  display:grid;gap:9px;
}
.key-points li{
  display:flex;align-items:center;gap:10px;
  font-size:13.5px;color:var(--muted);line-height:1.4;
  white-space:nowrap;              /* mantém cada ponto em uma única linha */
}
.key-points li span{
  overflow:hidden;text-overflow:ellipsis;
}
.key-points b{color:var(--text);font-weight:600;}
.key-points svg{
  width:18px;height:18px;flex:none;color:var(--secondary);
  stroke-width:1.6;
}

/* Etiqueta de oferta */
.offer-pill{
  display:inline-block;margin-bottom:14px;
  background:rgba(16,185,129,.10);color:#0b8f68;
  font-size:14.5px;font-weight:700;
  padding:9px 16px;border-radius:10px;
}

.price-block{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.price-old{color:var(--muted);text-decoration:line-through;font-size:17px;}
.price-now{color:var(--price);font-size:38px;font-weight:800;letter-spacing:-.03em;}
.badge-save{
  background:var(--secondary);color:#fff;font-size:13px;font-weight:700;
  padding:4px 10px;border-radius:999px;
}
.installments{color:var(--muted);font-size:14px;margin-top:6px;}

.qty-row{display:flex;align-items:center;gap:14px;margin:22px 0 14px;}
.qty{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.qty button{
  width:42px;height:46px;border:0;background:#fff;font-size:19px;
  cursor:pointer;color:var(--text);
}
.qty button:hover{background:var(--soft);}
.qty span{width:46px;text-align:center;font-weight:600;}

/* Aviso de estoque com bolinha pulsando */
.stock-line{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--secondary);font-weight:600;font-size:14px;
}
.stock-dot{
  position:relative;flex:none;
  width:9px;height:9px;border-radius:50%;
  background:#ef4444;
  animation:stock-blink 1.4s ease-in-out infinite;
}
/* halo que se expande e some */
.stock-dot::after{
  content:"";position:absolute;inset:0;
  border-radius:50%;background:#ef4444;
  animation:stock-pulse 1.4s ease-out infinite;
}
@keyframes stock-blink{
  0%,100%{opacity:1;}
  50%{opacity:.35;}
}
@keyframes stock-pulse{
  0%{transform:scale(1);opacity:.55;}
  70%{transform:scale(2.6);opacity:0;}
  100%{transform:scale(2.6);opacity:0;}
}
/* Com "Reduzir Movimento" ligado, mantém o piscar (só opacidade, não é
   movimento) e corta apenas o halo que se expande. */
@media (prefers-reduced-motion:reduce){
  .stock-dot::after{display:none;}
  .stock-dot{animation:stock-blink 1.8s ease-in-out infinite;}
}

.btn-buy{
  display:block;width:100%;border:0;cursor:pointer;
  background:var(--primary);color:#fff;
  font-size:17px;font-weight:700;letter-spacing:.2px;
  padding:17px 20px;border-radius:var(--radius);
  transition:opacity .15s ease,transform .1s ease;
}
.btn-buy:hover{opacity:.88;}
.btn-buy:active{transform:scale(.99);}

.pay-row{
  display:flex;flex-wrap:nowrap;gap:7px;align-items:center;
  justify-content:center;margin-top:14px;
}
.pay-label{
  font-size:12.5px;font-weight:700;color:var(--text);
  margin-right:2px;white-space:nowrap;
}
/* logos soltos, sem caixa nem borda */
.pay{
  height:21px;
  display:inline-flex;align-items:center;justify-content:center;
}
.pay img{
  height:100%;width:auto;object-fit:contain;display:block;
}
/* Apple Pay e Google Pay são wordmarks: um pouco menores para
   equilibrar com o formato de cartão dos outros */
.pay.mono{height:15px;}
/* Bizum é um ícone vertical (0,76:1): na mesma altura dos cartões
   ficaria estreito demais, então ganha um pouco mais */
.pay.tall{height:23px;}
.secure-note{
  text-align:center;font-size:13px;color:var(--muted);margin-top:10px;
}

/* Selos de confiança */
.trust{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 30px;
  margin:20px 0 0;padding:16px 18px;
  background:#f6f6f4;border-radius:var(--radius);
}
.trust span{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:600;color:var(--text);
}
.trust svg{
  width:24px;height:24px;flex:none;color:var(--secondary);
}

/* ---------------- Seções ---------------- */
.section{padding:48px 0;border-top:1px solid var(--line);margin-top:40px;}
.section-title{
  font-size:24px;font-weight:700;letter-spacing:-.02em;
  margin:0 0 24px;text-align:center;
}

/* Vídeos */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.video-card{
  position:relative;border-radius:var(--radius);
  overflow:hidden;background:#000;
}
.video-card video{
  width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
}

/* Botão de som sobre o vídeo */
.sound-btn{
  position:absolute;right:10px;bottom:10px;z-index:3;
  width:38px;height:38px;padding:0;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;
  backdrop-filter:blur(4px);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,transform .1s ease;
}
.sound-btn:hover{background:rgba(0,0,0,.75);}
.sound-btn:active{transform:scale(.93);}
.sound-btn svg{width:20px;height:20px;}
/* alterna entre o ícone mudo e o com som */
.sound-btn .ico-on{display:none;}
.sound-btn[aria-pressed="true"] .ico-off{display:none;}
.sound-btn[aria-pressed="true"] .ico-on{display:block;}

/* Descrição rica (usa description.css, já com escopo .cpx-desc) */
.description-wrap{background:#08080b;}

/* ---------------- Avaliações ---------------- */
.reviews-section{background:#f7f7f5;border-top:0;}
.eyebrow{
  text-align:center;margin:0 0 10px;
  color:#c2410c;font-size:12.5px;font-weight:800;
  letter-spacing:2.2px;text-transform:uppercase;
}
.reviews-section .section-title{font-size:34px;margin-bottom:40px;}

.reviews-summary{
  display:flex;align-items:center;gap:60px;flex-wrap:wrap;
  justify-content:center;margin-bottom:44px;
}
.score-side{text-align:center;flex:none;}
.score{font-size:64px;font-weight:800;line-height:1;letter-spacing:-.04em;}
.score-side .stars-box{margin:14px auto 0;width:max-content;}
.score-side small{display:block;color:var(--muted);font-size:14px;margin-top:12px;}

.bars{flex:1;min-width:280px;max-width:660px;display:grid;gap:10px;}
.bar-row{
  display:flex;align-items:center;gap:16px;
  font-size:14px;color:var(--text);
}
.bar-row > span:first-child{flex:none;width:34px;color:#374151;}
.bar-row b{flex:none;width:44px;text-align:right;font-weight:700;font-size:14px;}
.bar{
  flex:1;height:11px;background:#e9e9e6;
  border-radius:999px;overflow:hidden;
}
.bar i{display:block;height:100%;background:#4db383;border-radius:999px;}

.review-list{display:grid;gap:18px;max-width:820px;margin:0 auto;}
.review{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;background:#fff;
}
.review-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.avatar{
  width:42px;height:42px;border-radius:50%;background:var(--soft);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--muted);flex:none;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;}
.review-head b{display:block;font-size:14.5px;}
.review-meta{font-size:12.5px;color:var(--muted);}
.verified{color:var(--secondary);font-weight:600;}
.review p{margin:0;font-size:14.5px;}
/* Miniatura quadrada: as fotos são verticais e esticavam o comentário */
.review-photo{
  margin-top:12px;
  width:96px;height:96px;
  border-radius:8px;overflow:hidden;
  border:1px solid var(--line);
}
.review-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ---------------- FAQ ---------------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:10px;}
.faq details{
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;padding:0;
}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 18px;
  font-weight:600;font-size:15.5px;display:flex;
  justify-content:space-between;align-items:center;gap:12px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:20px;color:var(--muted);font-weight:400;}
.faq details[open] summary::after{content:"−";}
.faq p{margin:0;padding:0 18px 16px;color:var(--muted);font-size:14.5px;}

/* Políticas */
.policies{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;max-width:980px;margin:0 auto;
}
.policy{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;text-align:center;background:var(--soft);
}
.policy b{display:block;margin-bottom:6px;font-size:15px;}
.policy span{color:var(--muted);font-size:14px;}

/* ---------------- Footer ---------------- */
.site-footer{
  background:var(--footer-bg);color:#d1d5db;margin-top:56px;
  padding:44px 0 28px;font-size:14px;
}
/* Logo centralizada no topo do rodapé */
.footer-brand{
  text-align:center;
  padding-bottom:32px;
  margin-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand img{
  height:34px;width:auto;max-width:100%;margin:0 auto;display:block;
}

.footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:32px;
}
.site-footer h4{
  color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:1.2px;
  margin:0 0 14px;
}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.site-footer a{text-decoration:none;color:#d1d5db;}
.site-footer a:hover{color:#fff;text-decoration:underline;}
.footer-badges{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  padding:26px 0;margin-top:30px;border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;color:#9ca3af;
}
.copyright{text-align:center;color:#9ca3af;font-size:13px;}

/* ---------------- Botão flutuante ---------------- */
.floating{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  padding:11px 16px;
  display:flex;align-items:center;gap:14px;
  max-width:var(--wrap);margin:0 auto;
}
.floating .fprice{flex:none;line-height:1.15;}
.floating .fprice b{display:block;font-size:19px;font-weight:800;}
.floating .fprice s{color:var(--muted);font-size:12.5px;}
.floating .btn-buy{width:auto;flex:1;padding:14px 20px;font-size:16px;}

/* ---------------- Responsivo ---------------- */
@media (max-width:900px){
  .product{grid-template-columns:1fr;gap:26px;padding-top:22px;}
  .buybox h1{font-size:22px;}
  .price-now{font-size:32px;}
  /* no celular deixa quebrar, senão o texto seria cortado */
  .key-points li{font-size:13px;gap:9px;white-space:normal;align-items:flex-start;}
  .key-points svg{width:17px;height:17px;margin-top:2px;}
  .offer-pill{font-size:13px;padding:8px 14px;}
  .section{padding:36px 0;margin-top:26px;}
  .section-title{font-size:20px;}
  /* os dois selos ficam sempre lado a lado, nunca empilhados */
  .trust{flex-wrap:nowrap;gap:16px;padding:14px 10px;}
  .trust span{font-size:13px;gap:7px;white-space:nowrap;}
  .trust svg{width:20px;height:20px;}
  /* Header: logo + ícones na linha de cima, menu rolável embaixo */
  .site-header .wrap{min-height:60px;gap:8px;justify-content:space-between;}
  /* limita pela largura: entre o botão e os ícones sobra pouco espaço */
  .brand img{height:26px;max-width:180px;object-fit:contain;}
  .main-nav{display:none;}
  .header-actions{gap:2px;}
  .header-actions button{padding:7px;}
  .header-actions svg{width:21px;height:21px;}

  /* Botão à esquerda, logo no centro, ícones à direita */
  .nav-toggle{display:inline-flex;}
  .brand{flex:1;justify-content:center;}

  /* Painel que desce do cabeçalho */
  .mobile-nav{
    display:block;
    position:absolute;top:100%;left:0;right:0;z-index:45;
    background:var(--header-bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(0,0,0,.10);
    padding:6px 0;
    /* fechado: recolhido e invisível ao toque */
    max-height:0;overflow:hidden;
    opacity:0;visibility:hidden;
    transition:max-height .28s ease,opacity .2s ease,visibility .28s;
  }
  .mobile-nav.is-open{
    max-height:320px;opacity:1;visibility:visible;
  }
  .mobile-nav a{
    display:block;text-decoration:none;color:var(--header-text);
    font-size:15px;font-weight:500;
    padding:14px 20px;
    border-bottom:1px solid var(--line);
  }
  .mobile-nav a:last-child{border-bottom:0;}
  .mobile-nav a.is-active{font-weight:700;}
  .mobile-nav a:active{background:var(--soft);}

  /* Fundo escurecido enquanto o menu está aberto */
  .nav-backdrop{
    display:block;position:fixed;inset:0;z-index:38;
    background:rgba(0,0,0,.35);
    opacity:0;visibility:hidden;
    transition:opacity .2s ease,visibility .2s;
  }
  .nav-backdrop.is-open{opacity:1;visibility:visible;}
  .thumbs{gap:8px;}
  .thumbs button{flex:0 0 calc((100% - 24px) / 4);}  /* 4 visíveis no celular */
  .thumb-nav{width:30px;height:30px;}
  .thumb-nav.prev{left:-4px;}
  .thumb-nav.next{right:-4px;}
  .reviews-section .section-title{font-size:24px;margin-bottom:28px;}
  /* nota em cima, gráfico embaixo ocupando a largura toda */
  .reviews-summary{
    flex-direction:column;align-items:center;
    gap:24px;margin-bottom:32px;
  }
  .score{font-size:38px;}
  .score-side .stars-box{margin-top:10px;}
  .score-side .sb-row i{width:19px;height:19px;}
  .score-side small{font-size:13px;margin-top:9px;}
  /* flex:1 zera a base e faz a barra dividir a linha: precisa ser flex:none */
  .bars{flex:none;width:100%;max-width:none;min-width:0;}
  .bars{gap:8px;}
  .bar-row{gap:10px;font-size:13px;}
  .bar-row > span:first-child{width:28px;}
  .bar-row b{width:36px;font-size:13px;}
  .bar{height:9px;}

  /* Vídeos lado a lado numa faixa que desliza com o dedo */
  .videos{
    display:flex;gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .videos::-webkit-scrollbar{display:none;}
  .video-card{
    flex:0 0 58%;          /* o próximo aparece pela metade, sinalizando que desliza */
    scroll-snap-align:start;
  }
  .sound-btn{width:34px;height:34px;right:8px;bottom:8px;}
  .sound-btn svg{width:18px;height:18px;}

  /* Quantidade e aviso de estoque podem não caber lado a lado */
  .qty-row{flex-wrap:wrap;gap:12px;margin:18px 0 14px;}
  .qty button{width:40px;height:44px;}

  .price-old{font-size:16px;}
  .installments{font-size:13px;}
  .pay-row{gap:6px;margin-top:13px;}
  .pay-label{font-size:11.5px;}
  .pay{height:19px;}
  .pay.mono{height:14px;}
  .review{padding:15px;}
  .review p{font-size:14px;}
  .policies{gap:12px;}
  .policy{padding:16px;}
  .faq summary{font-size:14.5px;padding:14px 15px;}
  .faq p{font-size:14px;padding:0 15px 14px;}
  .site-footer{padding:36px 0 24px;}
  .footer-brand{padding-bottom:24px;margin-bottom:28px;}
  .footer-brand img{height:28px;}
  .footer-grid{gap:26px;}
  .footer-badges{gap:12px;padding:20px 0;margin-top:24px;font-size:12.5px;}
}

/* ---- Telas estreitas ---- */
@media (max-width:560px){
  .wrap{padding:0 16px;}
  .buybox h1{font-size:20px;line-height:1.3;}
  .price-now{font-size:29px;}
  .badge-save{font-size:12px;padding:3px 9px;}

  .reviews-summary{gap:18px;}
  .score{font-size:34px;}
  .score-side .sb-row i{width:17px;height:17px;}
  .score-side small{font-size:12.5px;}

  /* Estrelas menores para caberem com a data na mesma linha */
  .stars-box.sm .sb-row i{width:13px;height:13px;}
  .rating-line{gap:8px;}
  /* padrão das estrelas abaixo do título do produto */
  .rating-line .sb-row i{width:20px;height:20px;}

  .thumbs button{flex:0 0 calc((100% - 18px) / 3);}  /* 3 miniaturas por vez */
  .review-photo{width:80px;height:80px;margin-top:10px;}
  /* abaixo disso "gratuitas" não cabe: some para os dois continuarem na mesma linha */
  .hide-xs{display:none;}
  .trust{gap:12px;padding:13px 8px;}
  .trust span{font-size:12.5px;gap:6px;}
  .trust svg{width:18px;height:18px;}

  /* Barra fixa de compra mais compacta */
  .floating{padding:9px 12px;gap:10px;}
  .floating .fprice s{display:none;}
  .floating .fprice b{font-size:17px;}
  .floating .btn-buy{padding:13px 16px;font-size:15px;}
  body{padding-bottom:74px;}
}

/* ---- Telas muito estreitas (iPhone SE e similares) ---- */
@media (max-width:380px){
  .video-card{flex:0 0 66%;}
  /* rótulo em linha própria: com ele ao lado, os 6 logos não caberiam */
  .pay-row{flex-wrap:wrap;}
  .pay-label{font-size:11.5px;width:100%;text-align:center;margin:0 0 4px;}
  .pay{height:18px;}
  .pay.mono{height:13px;}
  .trust{gap:9px;padding:12px 6px;}
  .trust span{font-size:11.5px;gap:5px;}
  .trust svg{width:17px;height:17px;}
  .buybox h1{font-size:18.5px;}
  .price-now{font-size:26px;}
  .brand img{height:23px;max-width:145px;}
  .nav-toggle{width:36px;height:36px;}
  .mobile-nav a{font-size:14px;padding:13px 16px;}
}

/* ================= Carrinho lateral ================= */
.cart-backdrop{
  position:fixed;inset:0;z-index:60;
  background:rgba(0,0,0,.45);
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s;
}
.cart-backdrop.is-open{opacity:1;visibility:visible;}

.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;
  width:min(430px,100%);
  background:#fff;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 32px rgba(0,0,0,.16);
}
.cart-drawer.is-open{transform:translateX(0);}

/* Cabeçalho */
.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid var(--line);flex:none;
}
.cart-title{
  display:inline-flex;align-items:center;gap:12px;
  font-size:20px;font-weight:700;letter-spacing:-.02em;
}
.cart-title svg{width:24px;height:24px;}
.cart-close{
  width:38px;height:38px;padding:0;border:0;cursor:pointer;
  background:var(--soft);color:var(--text);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.cart-close:hover{background:var(--line);}
.cart-close svg{width:18px;height:18px;}

/* Faixa de envio */
.cart-ship{
  display:flex;align-items:center;gap:11px;flex:none;
  padding:14px 22px;
  background:#effaf4;color:#0b8f68;
  font-size:14.5px;font-weight:700;
}
.cart-ship svg{width:22px;height:22px;flex:none;}
.cart-ship.is-locked{background:var(--soft);color:var(--muted);}

/* Lista */
.cart-body{flex:1;overflow-y:auto;padding:8px 22px;}

.cart-item{
  display:grid;
  grid-template-columns:76px 1fr auto;
  gap:14px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.cart-item:last-child{border-bottom:0;}
.cart-thumb{
  width:76px;height:76px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--soft);
}
.cart-thumb img{width:100%;height:100%;object-fit:cover;}
.cart-brand{
  font-size:11.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px;
}
.cart-name{font-size:15px;font-weight:700;line-height:1.3;margin-bottom:8px;}
.cart-price{font-size:16px;font-weight:800;white-space:nowrap;}

/* Quantidade dentro do item */
.cart-qty{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.cart-qty button{
  width:30px;height:30px;border:0;background:#fff;cursor:pointer;
  font-size:16px;color:var(--text);line-height:1;
}
.cart-qty button:hover{background:var(--soft);}
.cart-qty span{width:32px;text-align:center;font-size:14px;font-weight:600;}
.cart-remove{
  border:0;background:none;cursor:pointer;padding:0;margin-top:9px;
  font-size:13px;color:var(--muted);text-decoration:underline;
}
.cart-remove:hover{color:#ef4444;}

/* Carrinho vazio */
.cart-empty{
  text-align:center;color:var(--muted);
  padding:60px 20px;font-size:15px;
}
.cart-empty svg{width:46px;height:46px;margin:0 auto 14px;opacity:.35;}

/* Rodapé */
.cart-foot{
  flex:none;padding:18px 22px 22px;
  border-top:1px solid var(--line);background:#fff;
}
.cart-line{
  display:flex;justify-content:space-between;align-items:center;
  font-size:15px;margin-bottom:9px;
}
.cart-free{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--secondary);font-weight:700;
}
.cart-free svg{width:19px;height:19px;}
.cart-total{
  font-size:19px;font-weight:800;
  border-top:2px solid var(--text);
  padding-top:13px;margin:13px 0 16px;
}
.cart-checkout{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;border:0;cursor:pointer;
  background:var(--footer-bg);color:#fff;
  font-size:16.5px;font-weight:700;
  padding:17px 20px;border-radius:var(--radius);
  transition:opacity .15s ease,transform .1s ease;
}
.cart-checkout:hover{opacity:.9;}
.cart-checkout:active{transform:scale(.99);}
.cart-checkout:disabled{opacity:.4;cursor:not-allowed;}
.cart-checkout svg{width:18px;height:18px;}
.cart-secure{
  text-align:center;font-size:13px;color:var(--muted);margin:12px 0 10px;
}
.cart-pay{margin-top:0;}

@media (max-width:560px){
  .cart-head{padding:16px 18px;}
  .cart-title{font-size:18px;}
  .cart-ship{padding:12px 18px;font-size:13.5px;}
  .cart-body{padding:4px 18px;}
  .cart-foot{padding:16px 18px 18px;}
  .cart-item{grid-template-columns:64px 1fr auto;gap:12px;padding:15px 0;}
  .cart-thumb{width:64px;height:64px;}
  .cart-name{font-size:14px;}
  .cart-checkout{font-size:15.5px;padding:15px 18px;}
}