/* =========================================================================
   LISTAGEM (topo + grade + cards) — página de coleção
   Estrutura/proporções seguem a referência pedida pelo usuário; cores e
   fonte são as reais da Mega Escolha (extraídas do próprio theme.css:
   --primary_color azul, --secondary_color verde), nunca a paleta da
   referência. Sidebar/breadcrumb NÃO fazem parte deste bloco (outra
   tarefa, já estilizada — ver bloco "SIDEBAR DE FILTROS" abaixo no
   arquivo).
   ========================================================================= */
:root {
  --card-badge: var(--secondary_color, #40cd28);   /* verde real, já usado no discount-badge do produto */
  --card-pix: var(--secondary_color, #40cd28);
  --card-text: var(--text_color, #333);
  --card-muted: #767676;
  --card-btn-border: #222;
  --card-btn-soft: #f0f0f0;
  --card-gap: 20px;
}

/* --- Topo da listagem: título + contagem à esquerda, ordenação à direita */
.collection-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.collection-header__text { min-width: 0; }
/* Seletor por classe/tag, não por #id — assim /collections/ e /busca/
   compartilham a mesma regra em vez de duas cópias (título "Resultados
   para..." da busca usa a mesma marcação .collection-header). */
.collection-header__text h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 4px;
  text-transform: none; /* theme.css usa lowercase; título deve ler normal */
}
.collection-header__text p {
  color: var(--card-muted);
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}
@media (max-width: 480px) {
  .collection-header__text h1 { font-size: 22px; }
}
.collection-sort select {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--card-text);
  background: #fff;
  cursor: pointer;
}
.collection-sort select:focus-visible {
  outline: 2px solid var(--primary_color) !important;
  outline-offset: 2px;
}

/* --- Grade: usa o espaço todo ao lado da sidebar (era % + flex-wrap,
   sobrava vão à direita porque 240px de sidebar não divide certo em %) */
.collection-products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--card-gap) !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .collection-products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .collection-products { grid-template-columns: repeat(2, 1fr); gap: 12px !important; }
}

/* --- Card: fundo branco, sem sombra/borda/cantos arredondados, imagem
   ocupando a largura toda; conteúdo centralizado; altura igual entre
   cards com botões sempre colados no rodapé.
   IMPORTANTE: escopado sob ".collection-products" (#collection-grid,
   #busca-grid) OU ".recommendations" (carrossel "Você também pode
   gostar" da página de produto) — a home usa ".home-collection-products"
   com Slick.js, que calcula largura/posição
   de cada slide via JS e depende do width/margin ORIGINAIS do
   theme.css (".single-product{width:23.15%;margin:10px}"). Uma versão
   anterior dessas regras usava ".single-product" sem escopo, com
   "width/height/margin: ...!important" — isso vencia até o width inline
   que o Slick define por JS (!important em folha de estilo externa
   sobrepõe inline sem !important), zerando a largura de CADA slide da
   home: cards colados um no outro e o arrasto/drag do carrossel
   quebrado (bug real relatado pelo usuário, corrigido aqui). --------- */
:is(.collection-products, .recommendations) .single-product {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: #fff;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Imagem + troca pro 2º foto no hover: comportamento do PRÓPRIO componente
   compartilhado (product-card.js — "compartilhado entre a página de
   coleção e os carrosséis da home", ver cabeçalho do arquivo), não uma
   view collection-only. Por isso fica SEM escopo aqui — precisa continuar
   valendo nos carrosséis da home também. Uma rodada anterior colocou isso
   dentro de ".collection-products", e o resultado foi a 2ª foto (que devia
   ficar escondida por opacity:0 até o hover) aparecer sempre visível,
   empurrando o resto do card pra baixo, na home (bug real relatado pelo
   usuário, corrigido aqui). */
.single-product .image { position: relative; overflow: hidden; }
.single-product .image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.single-product .image.has-hover-image .image-hover {
  position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease;
}
.single-product:hover .image.has-hover-image .image-hover { opacity: 1; }
/* Zoom sutil só na imagem no hover — sem sombra, pedido explícito.
   Funciona junto com a troca de imagem (crossfade), não substitui ela. */
.single-product:hover .image img { transform: scale(1.04); }

/* Selo de desconto: topo-esquerda, retângulo reto, sempre percentual
   (cálculo em product-card.js) — mantém o verde real da marca. Escopado
   pelo mesmo motivo acima (a home tem seu próprio badge, sem mexer). */
:is(.collection-products, .recommendations) .discount-label {
  left: 10px !important;
  right: auto !important;
  top: 10px !important;
  border-radius: 2px !important;
  background: var(--card-badge) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 7px !important;
}

:is(.collection-products, .recommendations) .single-product .description {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 12px;
}
:is(.collection-products, .recommendations) .single-product .description .rating,
:is(.collection-products, .recommendations) .single-product .rating { justify-content: center; }
:is(.collection-products, .recommendations) .single-product .rating__stars { color: #fcd000; letter-spacing: 1px; font-size: 11px; }
:is(.collection-products, .recommendations) .single-product .rating__stars .is-empty { color: #ddd; }
:is(.collection-products, .recommendations) .single-product .rating__count { color: var(--card-muted); font-size: 12px; }

:is(.collection-products, .recommendations) .single-product .title { width: 100%; }
:is(.collection-products, .recommendations) .single-product .title h3 {
  color: var(--card-text);
  font-size: 14px;
  font-weight: 500;
  min-height: 38px; /* 2 linhas — preço alinha mesmo com título de 1 linha */
  max-height: 38px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

:is(.collection-products, .recommendations) .single-product .price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}
:is(.collection-products, .recommendations) .single-product .price .compare-price {
  font-size: 12px;
  color: var(--card-muted);
  text-decoration: line-through;
  font-weight: 400;
}
:is(.collection-products, .recommendations) .single-product .price .current-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--card-text);
}
:is(.collection-products, .recommendations) .single-product .pix-price {
  color: var(--card-pix);
  font-size: 13px;
  font-weight: 400;
}
:is(.collection-products, .recommendations) .single-product .pix-price b { font-weight: 700; }
:is(.collection-products, .recommendations) .single-product .installment-price {
  color: var(--card-muted);
  font-size: 12px;
}
:is(.collection-products, .recommendations) .single-product .installment-price b { font-weight: 600; color: var(--card-text); }

/* Botões: mesma largura, formato pílula, colados no rodapé do card. */
:is(.collection-products, .recommendations) .single-product .actions--dual {
  display: flex;
  box-sizing: border-box; /* sem isso, o stretch do flex-column pai ignora o
    padding e o item cresce 24px além da borda do card (bug confirmado) */
  width: 100%;
  gap: 8px;
  padding: 0 12px 14px;
  margin-top: auto;
}
:is(.collection-products, .recommendations) .single-product .actions--dual .button-cart,
:is(.collection-products, .recommendations) .single-product .actions--dual .button-see-more {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  height: 38px;
  padding: 0; /* .button-cart herda padding:.5em do tema — zerado aqui pra
    "Adicionar" e "Ver Mais" crescerem exatamente iguais no flex */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(.collection-products, .recommendations) .single-product .actions--dual .button-cart {
  width: auto !important;
  margin: 0 !important;
  border: 1px solid var(--card-btn-border) !important; /* tema base tem
    border-color:var(--secondary_color)!important (verde) — sem !important
    aqui a borda saía verde em vez de cinza-escuro pedido */
  background: transparent !important;
  color: var(--card-btn-border) !important; /* idem: tema base tem
    color:#fff!important, deixando o texto invisível no fundo transparente */
}
:is(.collection-products, .recommendations) .single-product .actions--dual .button-cart:hover:not(:disabled) {
  background: var(--card-btn-border) !important;
  color: #fff !important;
}
:is(.collection-products, .recommendations) .single-product .actions--dual .button-see-more {
  border: none;
  background: var(--card-btn-soft);
  color: var(--card-text);
  text-decoration: none;
}
:is(.collection-products, .recommendations) .single-product .actions--dual .button-see-more:hover {
  background: #dedede;
}
@media (max-width: 400px) {
  :is(.collection-products, .recommendations) .single-product .actions--dual { flex-direction: column; }
}

/* --- Rodapé com a mesma identidade visual do header/menu ---------------
   Variáveis no topo pra trocar só os HEX aqui — o resto do arquivo lê
   delas. Valores atuais = as mesmas cores reais já usadas no header
   (theme.css: --background_header, --text_color_header, --primary_color,
   --secondary_color). */
:root {
  --cor-fundo-header: #0086ff;      /* mesma cor de fundo do header/menu */
  --cor-fundo-header-escuro: #0216b5; /* tom mais escuro, usado na faixa de topo */
  --cor-texto-header: #ffffff;      /* cor do texto/ícones sobre o fundo do header */
  --cor-texto-header-suave: #cfe4ff; /* texto secundário, menos contraste */
  --cor-destaque: #40cd28;          /* verde de destaque (selo, hover de ícone) */
  --cor-borda-header: rgba(255, 255, 255, 0.18); /* linhas divisórias sutis */
}

footer { background: var(--cor-fundo-header); color: var(--cor-texto-header); }
footer .footer-top,
footer .footer-middle,
footer .footer-bottom { background: transparent; }
footer .footer-top { border-bottom: 1px solid var(--cor-borda-header); }
footer .footer-middle { border-bottom: 1px solid var(--cor-borda-header); }

footer .footer-middle h2 { color: var(--cor-texto-header); }
footer .footer-middle p,
footer .contact-holder,
footer .store-info-holder { color: var(--cor-texto-header-suave); }

footer a.footer__link-item,
footer a.link { color: var(--cor-texto-header-suave); text-decoration: none; transition: color .15s; }
footer a.footer__link-item:hover,
footer a.link:hover { color: var(--cor-texto-header); text-decoration: underline; }

/* Tagline "Loja online desde 2019..." — a regra real do tema
   (".footer-top .column .logo p{color:var(--title_color)}", cinza escuro
   #666) tem mais especificidade que uma regra genérica minha, por isso
   precisa do mesmo nível de seletor pra vencer. */
footer .footer-top .column .logo p { color: var(--cor-texto-header); }

/* Ícones sociais: mesmo problema de especificidade
   (".social li a{color:var(--title_color)}" = cinza #666, por isso
   pareciam apagados) — removido o círculo de fundo, ícone maior e branco
   de verdade. */
footer ul.social li a {
  color: var(--cor-texto-header) !important;
  background: none;
  font-size: 20px;
  width: auto; height: auto;
  display: inline-flex;
  transition: color .15s, transform .15s;
}
footer ul.social li a:hover { color: var(--cor-destaque) !important; transform: translateY(-2px); filter: none; }

/* Selo "Site Seguro": desenhado pro fundo branco original (ícone/texto
   verde #51a343, domínio cinza minúsculo com line-height:6px, apertado
   demais) — no nosso fundo azul ficava desencontrado e parecia
   sobrepondo. Reconstruído pro contexto azul: ícone menor, texto branco,
   domínio menor mas legível, com respiro entre as duas linhas. */
footer .security-seal { color: var(--cor-texto-header); align-items: center; }
footer .security-seal i {
  color: var(--cor-destaque) !important;
  font-size: 18px !important;
  margin-right: 8px !important;
}
footer .security-seal p {
  color: var(--cor-texto-header) !important;
  font-size: 13px !important;
  text-align: left !important;
  line-height: 1.3 !important;
}
footer .security-seal p span {
  color: var(--cor-texto-header-suave) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}
footer .expand-footer {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--cor-texto-header) !important;
  border: none;
}
footer .expand-footer:hover { background: rgba(255, 255, 255, 0.2) !important; }

/* Botão de WhatsApp em destaque na coluna Atendimento — reaproveita a
   classe real .button-whatsapp (já usada no menu mobile), só ajusta
   largura/margem pra caber bem dentro da coluna estreita do rodapé. */
footer .footer-whatsapp-btn { width: fit-content; margin-top: 10px; padding: 10px 18px; border-radius: 6px; }

/* Contraste mínimo AA + foco visível pro teclado. O theme.css real tem
   um reset global "*{outline:none!important}" que apaga foco em TODO o
   site (não só no rodapé) — sem !important aqui essa regra não vence. */
footer a:focus-visible,
footer button:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

footer .copyright p { color: var(--cor-texto-header-suave); }

/* Ajustes/adições próprias por cima de theme.css e collection.css (CSS real
   extraído da loja Shopify original, tema Ella 2.0). Hero, topbar e
   carrosséis de produto/categoria da home agora rodam no Slick de verdade
   (assets/js/site-carousels.js, assets/js/home-carousels.js, assets/js/
   home.js) com as configs reais extraídas de Referencias/Home page.html —
   por isso quase nada precisa de CSS próprio aqui além do que já vem em
   theme.css + slick.css. */

/* --- Banner "Leve Mais Pague Menos" (imagem própria, proporção larga)
   — o tema real força .banners .extended img{height:150px;object-fit:cover},
   que cortava o texto "pague menos." embaixo. Aqui a arte já vem pronta,
   sem crop. */
.banner-full img { height: auto !important; object-fit: contain !important; border-radius: 8px; }

/* --- Bug real: .search-results{display:none} no theme.css é incondicional
   — o tema original mostra o dropdown via JS deles setando display:block
   direto no elemento (inline style), mecanismo que a gente não usa (nosso
   search.js só alterna o atributo "hidden"). Sem isso, os resultados da
   busca nunca aparecem mesmo com produtos reais carregados. */
.search-results:not([hidden]) { display: block !important; }
/* Nossa estrutura interna (.search-result) é mais simples que a do tema
   real (que tem .results/.search-links/etc.) — o tema não estiliza a
   nossa, então cada link ficava solto e fluindo como texto puro. */
.search-results { max-height: 420px; overflow-y: auto; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.search-result {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 6px;
  text-decoration: none; color: #1a1a1a;
}
.search-result:hover { background: #f5f7fa; }
.search-result img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: #f1f1f1; }
.search-result__title { flex: 1; font-size: 14px; line-height: 1.3; }
.search-result__price { font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--primary_color, #0086ff); }
.search-empty { padding: 16px; color: #666; font-size: 14px; text-align: center; }

/* --- Hero da home: composição única (ver nota em index.html sobre a
   remoção do carrossel de 4 banners). Sem gradiente decorativo; fundo
   branco sólido se destacando do cinza claro da página. -------------- */
.hero { background: #fff; border-radius: 12px; margin: 20px auto 0; max-width: 1280px; overflow: hidden; }
.hero__inner {
  display: flex; align-items: center; gap: 48px;
  padding: 48px 40px; max-width: 1280px;
}
.hero__copy { flex: 1 1 420px; min-width: 280px; }
.hero__eyebrow { color: var(--primary_color, #0086ff); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.hero__title { font-size: 34px; line-height: 1.25; font-weight: 700; color: #1a1a1a; margin: 0 0 16px; max-width: 20ch; }
.hero__subtitle { font-size: 16px; line-height: 1.5; color: #555; margin: 0 0 28px; max-width: 44ch; }
.hero__cta {
  display: inline-block; background: var(--primary_color, #0086ff); color: #fff;
  font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 8px;
  text-decoration: none; transition: filter .15s;
}
.hero__cta:hover { filter: brightness(1.08); }
.hero__media { flex: 1 1 360px; display: flex; justify-content: center; min-width: 220px; }
.hero__media img { width: 100%; max-width: 380px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }

@media (max-width: 900px) {
  .hero { margin-top: 0; border-radius: 0; }
  .hero__inner { flex-direction: column-reverse; padding: 24px 20px 32px; gap: 20px; text-align: center; }
  /* .hero__copy/.hero__media têm flex-basis pensado pra largura em row
     (desktop) — em column (mobile) o mesmo flex-basis vira altura mínima e
     junto com flex-grow:1 esticava o texto, deixando ~160px de espaço
     vazio abaixo do botão. Zera o grow/basis pra cada bloco medir só o
     próprio conteúdo. */
  .hero__copy, .hero__media { flex: none; width: 100%; }
  .hero__title { font-size: 24px; max-width: none; }
  .hero__subtitle { max-width: none; }
  .hero__media img { max-width: 220px; }
  .hero__copy { display: flex; flex-direction: column; align-items: center; }
}

/* --- Banner de boas-vindas/cupom: imagem própria, sem cortar em 150px
   como os banners antigos do tema (".banners .extended img{height:150px}")
   — aqui o texto/CTA fazem parte da própria arte, então precisa mostrar a
   composição inteira. */
.promo-banner { max-width: 1280px; margin: 32px auto 0; padding: 0 20px; }
.promo-banner__link { display: block; border-radius: 12px; overflow: hidden; }
.promo-banner__link img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  /* Só um pouco maior no mobile: menos respiro lateral (8px em vez de
     20px), sem cortar a imagem e sem mexer no espaçamento com o header. */
  .promo-banner { padding: 0 3px; }
}

/* --- Carrossel do banner do topo (2 slides, proporções diferentes) ---
   Slick (fade) precisa de uma altura fixa no container pra não pular
   durante a transição — as duas artes cabem inteiras dentro dela via
   object-fit:contain, sem cortar texto de nenhuma das duas. */
.promo-banner-slider { position: relative; border-radius: 12px; overflow: hidden; }
.promo-banner-slider .promo-banner__link { border-radius: 0; height: 420px; }
.promo-banner-slider .promo-banner__link img { width: 100%; height: 100%; object-fit: contain; }
.promo-banner-slider .slick-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex !important; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.promo-banner-slider .slick-dots li { width: 8px; height: 8px; }
.promo-banner-slider .slick-dots li button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.5); font-size: 0; cursor: pointer; }
.promo-banner-slider .slick-dots li.slick-active button { background: #fff; }
@media (max-width: 640px) {
  .promo-banner-slider .promo-banner__link { height: 190px; }
}

/* --- Barra de benefícios (discreta, entre hero e vitrines) ------------ */
.benefits-bar { background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-top: 24px; }
.benefits-bar__inner {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 40px; padding: 16px 20px;
}
.benefits-bar__item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #444; white-space: nowrap; }
.benefits-bar__item i { color: var(--primary_color, #0086ff); font-size: 15px; }
@media (max-width: 640px) {
  .benefits-bar__inner { gap: 10px 24px; padding: 14px 16px; }
  .benefits-bar__item { font-size: 12.5px; }
}

/* --- Carrossel do gallery da página de produto (não usa Slick — ver
   assets/js/carousel.js, escopo separado desta etapa) ------------------ */
[data-carousel] { position: relative; }
[data-carousel-track] {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximate;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
[data-carousel-track]::-webkit-scrollbar { height: 6px; }
/* (Setas antigas da miniatura, ".slick-arrow" 22px/transparente, removidas
   daqui — a miniatura agora usa o mesmo botão circular reaproveitado do
   carrossel de relacionados, ".carousel-prev"/".carousel-next", definido
   mais abaixo junto com o resto do estilo da galeria.) */

/* Não precisa mais de override de altura aqui: os cards da home são
   ".single-product.no-actions" de verdade agora (sem botão, clique-through
   — ver assets/js/home.js), e o tema já tem
   ".single-product.no-actions{height:430px!important}" pronto. */

/* --- Dropdown "Departamentos" (classe "show" real, controlada por clique
   via nav.js — o tema já deixa .departament-list com visibility:hidden;
   opacity:0 por padrão; só faltava a contrapartida .show, que não veio no
   CSS extraído estaticamente — confirmado empiricamente contra o site ao
   vivo: clique real resulta em display:block;visibility:visible;opacity:1). */
.departament-list.show { display: block !important; visibility: visible !important; opacity: 1 !important; }
.menu-child-mobile { max-height: 0; overflow: hidden; }
.menu-child-mobile.show { max-height: none; }

/* --- Estado "categoria não encontrada" -------------------------------- */
.collection-unavailable {
  max-width: 640px; margin: 60px auto; text-align: center; padding: 0 20px;
}
.collection-unavailable h1 { font-size: 22px; margin-bottom: 12px; }
.collection-unavailable p { color: #666; margin-bottom: 20px; }
.collection-unavailable a.button {
  display: inline-block; background: var(--primary_color, #0086ff); color: #fff;
  padding: 12px 24px; border-radius: 4px; text-decoration: none;
}

/* --- Carrinho (página cheia /cart/) — visual próprio, sem referência
   salva de layout original: cards com sombra/borda, resumo destacado e
   selos de confiança, seguindo a mesma paleta azul/verde do resto do
   site. Markup e classes preservados (cart-page.js depende deles). ---- */
.cart-page { max-width: 1120px; margin: 0 auto; padding: 40px 20px 96px; }
.cart-page h1 { font-size: 26px; font-weight: 700; margin-bottom: 28px; color: #1a1a1a; }
.cart-layout { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.cart-list {
  flex: 2 1 520px; list-style: none; margin: 0; padding: 8px 24px;
  background: #fff; border: 1px solid #eee; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.cart-item {
  display: grid; grid-template-columns: 84px 1fr auto auto; gap: 18px;
  align-items: center; padding: 20px 0; border-bottom: 1px solid #f0f0f0;
}
.cart-item:last-child { border-bottom: none; }
.cart-item__image { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; background: #f5f5f5; border: 1px solid #eee; }
.cart-item__title { font-weight: 600; margin: 0 0 4px; color: #1a1a1a; font-size: 15px; }
.cart-item__variant { color: #767676; font-size: 13px; margin: 0 0 8px; }
.cart-item__qty { display: flex; align-items: center; gap: 0; width: fit-content; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; }
.cart-item__qty button { width: 30px; height: 30px; border: none; background: #f7f7f7; cursor: pointer; font-size: 15px; }
.cart-item__qty button:hover { background: #eee; }
.cart-item__qty input { width: 40px; text-align: center; border: none; border-left: 1px solid #ddd; border-right: 1px solid #ddd; height: 30px; font-weight: 600; }
.cart-item__price { font-weight: 700; color: #1a1a1a; font-size: 15px; white-space: nowrap; }
.cart-item__remove {
  border: none; background: none; font-size: 18px; color: #b0b0b0; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; transition: background .15s, color .15s;
}
.cart-item__remove:hover { background: #fdecea; color: #d64545; }

.cart-summary {
  flex: 1 1 320px; background: #fff; border: 1px solid #eee; border-radius: 10px;
  padding: 24px; align-self: flex-start; box-shadow: 0 1px 3px rgba(0,0,0,.04);
  position: sticky; top: 24px;
}
.cart-summary::before { content: "Resumo do pedido"; display: block; font-weight: 700; font-size: 16px; margin-bottom: 16px; color: #1a1a1a; }
.cart-summary__row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; color: #444; }
.cart-summary__row.total { font-weight: 700; font-size: 19px; color: #1a1a1a; border-top: 1px solid #eee; padding-top: 14px; margin-top: 4px; }
#cart-discount-row { color: #1a9c4a; }
.cart-empty { text-align: center; padding: 96px 20px; color: #666; }
.cart-empty p { font-size: 17px; margin-bottom: 20px; }
.checkout-button {
  display: block; width: 100%; text-align: center; background: var(--primary_color, #0086ff);
  color: #fff; padding: 15px; border-radius: 8px; text-decoration: none; font-weight: 700;
  font-size: 15px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,134,255,.28);
  transition: filter .15s;
}
.checkout-button:hover { filter: brightness(1.08); }
.cart-trust { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #f0f0f0; }
.cart-trust span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #666; }
.cart-trust i { color: var(--primary_color, #0086ff); width: 14px; text-align: center; }

@media (max-width: 640px) {
  .cart-item { grid-template-columns: 64px 1fr; grid-template-areas: "img title" "img qty" "img price"; row-gap: 8px; }
  .cart-item__image { grid-area: img; width: 64px; height: 64px; }
  .cart-item__title { grid-area: title; }
  .cart-item__qty { grid-area: qty; }
  .cart-item__price { grid-area: price; }
  .cart-item__remove { position: absolute; margin-left: 8px; }
  .cart-item { position: relative; padding-right: 28px; }
  .cart-summary { position: static; }
}

/* --- Produto: reproduz a estrutura real de Referencias/Produto.html
   (product-info/column/variants/product-action já vêm estilados pelo
   theme.css real — aqui só o que a troca do Slick por scroll nativo e os
   dados dinâmicos precisam de novo).
   (Bloco antigo de ".product-slider-image img.slide"/".product-slider-
   thumbnail img.slide" removido daqui — era de antes da miniatura virar
   <button class="thumb-btn"><img></button>, não batia mais com o markup
   atual, e tinha um "max-width:500px" na imagem principal, um limite
   artificial que capava a foto bem abaixo da largura real do container
   (até 600px no desktop) sem nenhum motivo. O estilo atual da galeria
   fica mais abaixo, junto de ".carousel"/".product-slider-image".) ---- */
/* .offer-badge fica display:none sempre nesta página, na referência real
   (confirmado ao vivo, elemento existe com texto "60% OFF" mas nunca fica
   visível) — removida a sobrescrita que eu tinha adicionado por suposição
   errada numa rodada anterior; o tema real (theme.css) já cobre isso. */
#product-add-feedback { color: var(--secondary_color, #40cd28); font-weight: 600; margin-top: 10px; }
/* --- Avaliações: réplica da estrutura real do widget (Ali Reviews) ---
   painel branco, coluna esquerda com nota grande, coluna direita com
   galeria de fotos + lista de cards com borda. Cores medidas ao vivo:
   estrela preenchida #fcd000, borda do card #e4e4eb, link/botão #0086ff,
   selo verificado #068850. ------------------------------------------- */
.review-box {
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.review-box__left {
  flex: 0 0 220px;
  text-align: center;
  padding-right: 24px;
  border-right: 1px solid #eee;
}
.review-box__average { font-size: 48px; font-weight: 700; color: #1f1f1f; line-height: 1; }
.review-box__stars { color: #fcd000; font-size: 20px; letter-spacing: 2px; margin: 8px 0 4px; }
.review-box__stars span { color: #1f1f1f; font-size: 13px; display: block; letter-spacing: normal; margin-top: 4px; }
.review-box__count { font-size: 15px; color: #1f1f1f; font-weight: 500; }
.review-box__aggregate-note { font-size: 12px; color: #999; margin-top: 10px; line-height: 1.4; }
.review-box__right { flex: 1 1 420px; min-width: 0; }
.review-box__gallery h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.review-box__gallery-grid { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 20px; }
.review-box__gallery-grid img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; flex-shrink: 0; cursor: pointer; }
.review-box__filter { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.alr-btn {
  background: #fff; color: #0086ff; border: 1px solid #0086ff; border-radius: 4px;
  padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.alr-btn:hover { background: #0086ff; color: #fff; }
.alr-btn--outline { display: block; margin: 20px auto 0; }
#reviews .review-card { border: 1px solid #e4e4eb; border-radius: 6px; padding: 16px; margin-bottom: 12px; }
.review-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.review-card__name { font-weight: 600; }
.review-card__rating { color: #fcd000; margin: 4px 0; letter-spacing: 1px; }
.review-card__text { color: #333; line-height: 1.5; margin: 6px 0; }
.review-card__photos { display: flex; gap: 8px; margin-top: 8px; }
.review-card__photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; cursor: pointer; }
.review-card__helpful { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #7b7b7b; }
.review-card__helpful button { border: none; background: #f5f5f5; border-radius: 4px; padding: 4px 8px; cursor: pointer; display: flex; align-items: center; gap: 4px; color: #333; }
.review-empty { color: #666; }
.review-form { max-width: 420px; margin-top: 32px; border-top: 1px solid #eee; padding-top: 24px; }
.review-form h3 { font-size: 16px; margin-bottom: 12px; }
.review-form textarea { width: 100%; font-family: inherit; }
#review-form-feedback { margin-top: 10px; color: var(--secondary_color, #40cd28); font-size: 13px; }
#review-form-feedback.is-error { color: #a02622; }
@media (max-width: 768px) {
  /* "flex-wrap:wrap" (correto no desktop, onde os itens ficam lado a
     lado) combinado com "flex-direction:column" cria um bug real: quando
     o conteúdo é mais alto que o espaço disponível, o flexbox abre uma
     SEGUNDA "coluna" horizontal em vez de simplesmente empilhar — cada
     filho vira uma faixa estreita de conteúdo (confirmado ao vivo: os
     dois filhos mediam 640px de largura dentro de um espaço de 310px,
     cortando o texto "A loja mostra X avaliações..." e distorcendo a
     largura das fotos). Empilhamento mobile precisa de nowrap. */
  .review-box { flex-direction: column; flex-wrap: nowrap; gap: 16px; }
  .review-box__left {
    border-right: none; border-bottom: 1px solid #eee; padding: 0 0 16px;
    flex: 0 0 auto; width: 100%; min-width: 0;
  }
  .review-box__right { width: 100%; }
}

/* =========================================================================
   PÁGINA DE PRODUTO — refatoração completa
   Estrutura real do tema (theme.css, extraída ao vivo) já é de 3 colunas —
   galeria | título+avaliação+variantes | painel de compra — o mesmo
   padrão usado por grandes marketplaces (ex.: Mercado Livre). Não é uma
   estrutura ruim que precisa virar 2 colunas; precisava só de proporção,
   espaçamento e tipografia profissionais. Cores: azul (--primary_color) e
   verde (--secondary_color) reais da Mega Escolha, nada da paleta de
   nenhuma referência externa.
   ========================================================================= */
:root {
  --pdp-text: #333333;
  --pdp-title: #2b2b2b;
  --pdp-muted: #767676;
  --pdp-border: #e8e8e8;
}

.breadcrumbs { text-transform: none; color: var(--pdp-muted); }
.breadcrumbs li a { text-transform: none; }
.breadcrumbs li:last-child a { color: var(--pdp-text); font-weight: 500; cursor: default; pointer-events: none; }

/* --- Composição principal: galeria + título + painel de compra -------- */
.product-info-container { gap: 32px; align-items: flex-start; min-width: 0; }
.product-info { gap: 32px; min-width: 0; }
/* Galeria ganhou mais largura depois que a miniatura vertical saiu da
   lateral (antes 46%/520px — sobrava coluna vazia sem motivo).
   flex-shrink:0 (padrão do "flex:0 0 56%") foi trocado por 1: sem isso a
   galeria se recusava a encolher entre ~900-1180px, ficava presa em até
   600px e sobrava pouco espaço real pro título/preço, que estourava pra
   fora do container (bug real, confirmado ao vivo — overflow de página
   em 1024px). min-width:0 nos 3 blocos da composição evita o mesmo tipo
   de estouro por conteúdo (texto/preço) que não conseguia encolher. */
.product-info > .column:first-child { flex: 1 1 56%; max-width: 600px; min-width: 0; }
.product-info > .column.mobile-title-variants { flex: 1 1 240px; min-width: 0; }
.product-action {
  width: 360px;
  min-width: 0;
  position: sticky;
  top: 20px;
  box-shadow: none;
  border: 1px solid var(--pdp-border);
  padding: 28px; /* tema base só tinha padding:0 30px (sem respiro vertical) */
  overflow: hidden; /* a faixa de economia usa margin negativa pra colar
    nas bordas do card — sem isso ela vazava por cima do border-radius */
}

/* --- Galeria: imagem principal grande em cima, miniaturas horizontais
   embaixo — MESMA estrutura em qualquer largura (nada de coluna lateral
   nem regras desktop/mobile separadas, só o TAMANHO muda por breakpoint
   lá embaixo). Layout antigo removido: era ".carousel{flex-direction:
   row-reverse}" (miniatura vertical à esquerda) com um bloco inteiro
   duplicado só pra desfazer isso no mobile — trocado por uma única
   definição em coluna, que já funciona nas duas larguras. -------------- */
/* Precisa ser ".product-info .carousel" (2 classes), não só ".carousel"
   (1 classe) — theme.css tem ".product-info .carousel{width:400px;
   max-height:500px}" com essa mesma especificidade maior, que vencia a
   minha regra de 1 classe independente da ordem no arquivo (o max-height
   de 500px, em especial, estava espremendo TODOS os filhos do carousel —
   imagem principal, pontinhos e miniatura — pra caberem em 500px de
   altura total, por isso a imagem nunca chegava nem perto dos 580px
   configurados). */
.product-info .carousel { width: 100%; max-height: none; display: flex; flex-direction: column; gap: 14px; }

/* Área principal: altura fixa (não aspect-ratio) pra manter o tamanho
   visual constante não importa se a foto de origem é quadrada, vertical
   ou horizontal — object-fit:contain nunca deforma nem corta, só encolhe
   a imagem inteira dentro da caixa (mesmo padrão sugerido: width:100%/
   height fixo/flex center). Valor por breakpoint definido depois de medir
   a largura real da coluna da galeria (~600px no desktop). */
.product-slider-image {
  width: 100%; height: 580px;
  display: flex; align-items: center; justify-content: center;
  background: #fafafa; border-radius: 6px; overflow: hidden;
}
.product-slider-image [data-carousel-track] {
  width: 100%; height: 100%;
  scroll-snap-type: x mandatory; gap: 0;
}
.product-slider-image img.slide {
  width: 100%; height: 100%; flex: 0 0 100%;
  object-fit: contain; scroll-snap-align: start; background: #fafafa;
}

/* Miniaturas: uma única fileira horizontal, nunca quebra linha (scroll
   interno em vez disso). Setas reaproveitam o MESMO componente/visual do
   carrossel "Você também pode gostar" (.carousel-prev/.carousel-next, já
   definidos mais abaixo) — só aparecem quando há mais miniaturas do que
   cabem (carousel.js esconde sozinho nas pontas). */
.product-gallery__thumbs { display: flex; align-items: center; gap: 8px; }
/* !important necessário: theme.css tem
   "@media(max-width:992px){.product-slider-thumbnail{display:none!important}}"
   — regra real de quando a miniatura era substituída por pontinhos no
   mobile/tablet. Agora o pedido é o oposto (miniatura horizontal visível
   em qualquer largura), então precisa vencer esse !important também
   abaixo de 992px, não só no desktop. */
.product-slider-thumbnail {
  display: flex !important; flex: 1; min-width: 0; gap: 10px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximate;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.product-slider-thumbnail::-webkit-scrollbar { display: none; }
.thumb-btn {
  display: block; width: 78px; height: 78px; padding: 0; flex-shrink: 0;
  border: 1px solid #e5e5e5; border-radius: 6px; overflow: hidden; cursor: pointer;
  background: #fff; scroll-snap-align: start;
  transition: border-color .15s;
}
.thumb-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb-btn:hover { border-color: #ccc; }
.thumb-btn.is-active { border: 2px solid var(--primary_color, #0086ff); }
.thumb-btn:focus-visible { outline: 2px solid var(--primary_color, #0086ff) !important; outline-offset: 2px; }

/* Pontinhos: reserva pra telas muito estreitas, quando nem miniatura
   pequena cabe confortavelmente ao toque (ver media query ≤360px). Nas
   larguras normais as próprias miniaturas já indicam a posição. */
.gallery-dots { display: none; }
.gallery-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
  background: #d5d5d5; cursor: pointer;
}
.gallery-dot.is-active { background: var(--primary_color, #0086ff); }

/* --- Nota agregada perto do título (só com avaliação real) ------------- */
.rate-top { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; margin-top: 4px; }
.rate-top__stars { color: #fcd000; font-size: 14px; letter-spacing: 1px; }
.rate-top__value { font-weight: 700; color: var(--pdp-title); font-size: 14px; }
.rate-top__count { color: var(--pdp-muted); font-size: 13px; text-decoration: underline; }
.rate-top:hover .rate-top__count { color: var(--primary_color, #0086ff); }

.title h1 { font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--pdp-title); }
.product-sku { color: var(--pdp-muted); font-size: 13px; margin: 0 0 8px; }

/* --- Faixa de economia: topo do card, preta, colada nas bordas -------- */
.save-banner {
  background: #000; color: #fff; text-align: center; text-transform: uppercase;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  margin: -28px -28px 20px; padding: 10px 16px; border-radius: 5px 5px 0 0;
}
.save-banner b { color: #ffda00; font-weight: 700; }

/* --- Preço: hierarquia forte, uma comunicação promocional (a faixa
   preta acima já cobre a urgência — aqui só preço/desconto/parcela). --- */
.product-action .price { padding: 0 0 16px; }
.product-action .promotion { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.product-action .compare-price { font-size: 14px; color: #767676; text-decoration: line-through; font-weight: 400; }
.product-action .discount-badge {
  display: inline-flex; align-items: center; gap: 4px; background: var(--secondary_color, #40cd28);
  color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 3px;
}
.product-action .discount-badge i { font-size: 10px; }
.product-action .current-price { font-size: 36px; font-weight: 800; color: #111; line-height: 1.15; }

.installment-box {
  display: flex; align-items: center; gap: 8px;
  background: #f7f7f7; border: 1px solid #e8e8e8; border-radius: 4px;
  padding: 9px 12px; margin-top: 12px; width: 100%; box-sizing: border-box;
  font-size: 13.5px; color: var(--pdp-text, #333);
}
.installment-box i { color: var(--pdp-muted); }
.installment-box b { font-weight: 700; color: inherit; }
.installment-box__value { color: var(--secondary_color, #1a9c4a); }
.installment-box__interest-free { color: var(--secondary_color, #1a9c4a); font-weight: 400; }

/* --- Contador de promoção: só existe visualmente quando um prazo real
   é configurado (ver startCountdown em product.js) — hoje fica sempre
   oculto, pronto pra quando existir essa fonte de dado. */
.promo-countdown {
  position: relative; margin: 20px 0 4px; padding: 18px 12px 14px;
  border: 3px solid #ff5b5b; border-radius: 8px; text-align: center;
}
.promo-countdown__title {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: #fff; padding: 0 10px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; color: #ff5b5b; white-space: nowrap;
}
.promo-countdown__digits { display: flex; align-items: center; justify-content: center; gap: 10px; }
.promo-countdown__unit { display: flex; flex-direction: column; align-items: center; }
.promo-countdown__unit span { font-size: 44px; font-weight: 700; color: #ff5b5b; line-height: 1; }
.promo-countdown__unit small { font-size: 11px; color: var(--pdp-muted); text-transform: uppercase; margin-top: 2px; }
.promo-countdown__sep { font-size: 32px; font-weight: 700; color: #ff5b5b; }

/* --- Frete: divisores sutis, "Frete Grátis" em azul, resto neutro ------ */
.item:has(.product-shipping) {
  border-top: 1px solid #ececec; padding: 18px 0;
}
.item:has(#stock-urgency, #stock-ok) {
  border-top: 1px solid #ececec; padding-top: 18px; margin-top: -4px;
}
.item:has(#stock-urgency, #stock-ok) .stock,
.item:has(#stock-urgency, #stock-ok) .stock-ok { margin-bottom: 16px; }
.product-action .product-shipping svg { width: 34px; height: 34px; flex-shrink: 0; }
.product-action .shipping-text h2 { font-size: 15px; font-weight: 600; color: var(--pdp-text); margin: 0 0 2px; }
.product-action .shipping-text h2 b { color: var(--primary_color, #0086ff); }
.product-action .shipping-text p { font-size: 13px; color: var(--pdp-muted); margin: 0; }

/* --- Estoque: urgência real (abaixo do limiar) ou "Em estoque" simples,
   nunca as duas juntas nem uma frase com variável vazia. --------------- */
.stock p { font-size: 13.5px; color: var(--pdp-text); margin: 0 0 8px; }
.stock p b { color: #e6392e; font-weight: 700; }
.stock-progress .progress { position: relative; height: 11px; background: #eee; border-radius: 999px; overflow: visible; }
.stock-progress .progress-bar { position: relative; height: 100%; background: linear-gradient(90deg, #ff9a3c, #e6392e); border-radius: 999px; }
.stock-progress__fire { position: absolute; right: -8px; top: 50%; transform: translate(50%, -50%); font-size: 14px; }
.stock-ok { display: flex; align-items: center; gap: 6px; color: var(--secondary_color, #1a9c4a); font-size: 13px; font-weight: 500; margin: 0; }
/* Mesmo bug de especificidade do "[hidden]" já visto nas setas do
   carrossel: sem isso, ".stock-ok{display:flex}" continuava mostrando o
   "Em estoque" mesmo escondido via JS, junto com a barra de urgência. */
.stock-ok[hidden] { display: none; }

/* --- Quantidade + CTA na mesma linha: seletor com largura fixa, botão
   ocupando o resto (grid em vez de flex — mais previsível nesse caso). - */
/* Precisa casar a especificidade de ".product-action .action-buttons" do
   theme.css (2 classes), que define display:flex — minha regra de 1
   classe perdia pra ela independente da ordem no arquivo, então o grid
   nunca era aplicado de verdade (o botão "Comprar Agora" ficava com
   metade da largura, cortando o texto). */
.product-action .action-buttons { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: stretch; width: 100%; }
.quantity {
  height: 52px; margin: 0; border-radius: 5px; border: 1px solid #e5e5e5; background: #fff;
  max-width: none; width: 100%; float: none; display: flex; align-items: center; justify-content: space-between;
}
.quantity .minus, .quantity .plus { padding: 0 12px; height: 100%; font-size: 13px; flex-shrink: 0; }
.quantity .minus:disabled, .quantity .plus:disabled { color: #ccc !important; cursor: not-allowed; }
/* Precisa casar a especificidade de ".product-action .quantity span.qty-
   mask" do theme.css (3 níveis) — a regra original usa position:absolute
   com top/left fixos (pensados pra caixa antiga, mais estreita), tirando
   o número do fluxo flex e escondendo-o quase todo fora da view. */
.product-action .quantity span.qty-mask {
  position: static; visibility: visible; width: auto; flex: 1;
  font-size: 15px; font-weight: 600; text-align: center; top: auto; left: auto;
}
.quantity input[type="text"] { display: none; }

/* --- CTA: verde da identidade Mega Escolha, sem glow/pulsação/gradiente */
.product-action .button-cart {
  height: 52px; border-radius: 5px; font-size: 18px !important; font-weight: 700 !important;
  width: 100%; min-width: 0; margin: 0 !important; padding: 0 6px !important; text-transform: none; box-shadow: none;
  background: #2fb01f !important; border-color: #2fb01f !important;
}
.product-action .button-cart .btn-state {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; overflow: hidden;
}
.product-action .button-cart:hover:not(:disabled) { background: #279c1a !important; border-color: #279c1a !important; }
.product-action .button-cart:active:not(:disabled) { filter: brightness(0.94); }
.product-action .button-cart:disabled { background: #ccc !important; border-color: #ccc !important; cursor: not-allowed; }
.product-action .button-cart:focus-visible { outline: 2px solid #145c0c !important; outline-offset: 2px; }
#product-add-feedback { font-size: 13px; margin-top: 8px; }

/* --- Pagamento: primeiro (prioridade visual logo após o CTA) ----------- */
.secure-payment { padding-top: 16px; margin-top: 16px; border-top: 1px solid #ececec; text-align: center; }
.secure-payment p { font-size: 13px; font-weight: 600; color: var(--pdp-text); margin-bottom: 10px; }
.secure-payment .payment-icons { justify-content: center; gap: 8px; }

/* --- Selos de confiança: compactos, numa linha só, sem competir com o
   CTA nem com o pagamento. ---------------------------------------------- */
.trust-bullets--compact {
  list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid #ececec;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
}
.trust-bullets--compact li { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--pdp-muted); }
.trust-bullets--compact i { color: var(--secondary_color, #1a9c4a); font-size: 11px; }

/* --- Abas: Descrição / Especificações / Envio e Garantia --------------- */
.product-tabs__nav { display: flex; gap: 4px; border-bottom: 1px solid var(--pdp-border); margin-bottom: 24px; }
.product-tabs__tab {
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 12px 18px; font-size: 15px; font-weight: 600; color: var(--pdp-muted);
  margin-bottom: -1px;
}
.product-tabs__tab.is-active { color: var(--primary_color, #0086ff); border-bottom-color: var(--primary_color, #0086ff); }
.product-tabs__tab:focus-visible { outline: 2px solid var(--primary_color, #0086ff) !important; outline-offset: -2px; }
.product-description-container h2, #description > .container > h2 { font-size: 20px; margin-bottom: 16px; }
/* A descrição vem como HTML bruto do catálogo (rich text com <img> sem
   atributo width/height e sem style de responsividade) — as imagens
   renderizavam na largura intrínseca real do arquivo (800px, 480px...),
   estourando a largura do container em qualquer tela menor que isso.
   Confirmado ao vivo: #product-description tinha scrollWidth:800 dentro
   de um container de 358px no mobile, cortando a imagem visualmente. */
#product-description img { max-width: 100%; height: auto; }
.info-table { display: flex; flex-direction: column; gap: 14px; }
.info-row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; font-size: 14px; }
.info-label { font-weight: 600; color: var(--pdp-text); }
.info-content { color: var(--pdp-muted); }
#accordion-info .accordion { border-radius: 0; border-bottom: 1px solid var(--pdp-border); padding-left: 0; padding-right: 2em; font-size: 15px; }
#accordion-info .accordion:after {
  content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px;
  position: absolute; right: 4px; transition: transform .2s;
}
#accordion-info .accordion.active:after { transform: rotate(180deg); }

/* --- Avaliações: estado vazio elegante + barras de distribuição real --- */
.review-empty-state { max-width: 420px; margin: 24px auto; padding: 32px 20px; text-align: center; }
.review-empty-state i { font-size: 32px; color: #ddd; display: block; margin-bottom: 14px; }
.review-empty-state p { color: var(--pdp-muted); margin: 0 0 16px; }
.review-box__bars { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.rating-bar { display: grid; grid-template-columns: 28px 1fr 34px; align-items: center; gap: 8px; font-size: 12px; color: var(--pdp-muted); }
.rating-bar__track { height: 6px; background: #eee; border-radius: 999px; overflow: hidden; }
.rating-bar__fill { display: block; height: 100%; background: #fcd000; border-radius: 999px; }

/* --- Leve Mais Pague Menos: integrado à identidade da loja, sem cara de
   landing page colada abaixo (lógica/valores 100% preservados). --------- */
#bundle-offer .container { background: #fff; border: 1px solid var(--pdp-border); border-radius: 8px; padding: 28px; }
#bundle-offer h2 { font-size: 20px !important; margin-bottom: 20px; }
#bundle-offer .promotion-banner { background: var(--primary_color, #0086ff); border-radius: 4px; display: inline-block; padding: 4px 12px; margin-bottom: 12px; }
#bundle-offer .promotion-banner p { color: #fff; font-size: 13px; margin: 0; }
#bundle-offer .discount-badge { background: var(--secondary_color, #40cd28); }
#bundle-offer .button-recompense-system-confetti { background: var(--primary_color, #0086ff); border-radius: 6px; box-shadow: none; }

/* --- Relacionados: mesmo ProductCard/grid da home/coleção/busca -------- */
#related-products h2 { font-size: 22px; font-weight: 700; margin-bottom: 20px; color: var(--pdp-title); }

/* --- Carrossel "Você também pode gostar" -------------------------------
   Reaproveita o mesmo componente nativo de scroll do resto do site
   (assets/js/carousel.js) — sem lib nova, sem duplicar lógica. O viewport
   é quem rola (overflow-x:auto) e fica preso ao container do site; nada
   aqui cria overflow no body/html.
   Causa real do bug anterior (grade larga/scrollbar): o card era um item
   de grid/flex sem "min-width:0" — por padrão um item flex/grid tem
   min-width:auto, que equivale ao tamanho mínimo do PRÓPRIO CONTEÚDO
   (texto do botão "Ver Mais"/"Adicionar" com white-space:nowrap). Se esse
   mínimo passa do espaço disponível, o item se recusa a encolher e o
   trilho/grade fica mais largo que o container. "min-width:0" no card
   resolve na raiz (o texto do botão passa a poder cortar com ellipsis,
   já configurado, em vez de forçar largura extra). ---------------------- */
.carousel-wrapper { position: relative; display: flex; align-items: center; gap: 8px; }
.carousel-viewport {
  flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximate; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-track {
  display: flex; flex-wrap: nowrap; gap: 20px;
  cursor: grab; touch-action: pan-x pan-y;
  /* O arraste customizado em carousel.js só escuta ponteiros tipo "mouse"
     (comentário original supunha que o scroll nativo cobriria touch
     sozinho) — mas "touch-action:pan-y" bloqueia justamente o gesto
     horizontal por toque, travando o carrossel inteiro no celular (bug
     real reportado: "carrossel não funciona no mobile"). Precisa liberar
     pan-x também para o navegador rolar horizontalmente por toque. */
}
.carousel-track.is-dragging { cursor: grabbing; }
.carousel-track.is-dragging .single-product a { pointer-events: none; }

.carousel-track > .single-product {
  flex: 0 0 calc((100% - 4 * 20px) / 5); /* desktop grande: ~5 visíveis */
  min-width: 0;
  scroll-snap-align: start;
}
@media (max-width: 1300px) {
  .carousel-track > .single-product { flex-basis: calc((100% - 3 * 20px) / 4); } /* desktop comum: ~4 */
}
@media (max-width: 900px) {
  .carousel-track { gap: 16px; }
  .carousel-track > .single-product { flex-basis: calc((100% - 2 * 16px) / 3); } /* tablet: ~3 */
}
@media (max-width: 700px) {
  .carousel-track > .single-product { flex-basis: calc((100% - 16px) / 2); } /* tablet estreito: ~2 */
}
@media (max-width: 480px) {
  .carousel-track { gap: 12px; }
  .carousel-track > .single-product { flex-basis: 68%; } /* mobile: ~1,5, com "espiada" do próximo */
}

/* Setas: botão circular branco discreto, centralizado verticalmente com
   os cards (align-items:center no wrapper já cuida disso). Escondida
   (via [hidden], alternado em carousel.js) quando não há mais conteúdo
   naquela direção. */
.carousel-prev, .carousel-next {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid #e5e5e5; box-shadow: 0 2px 6px rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--pdp-text, #333); font-size: 14px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
/* [hidden] e ".carousel-prev" têm a mesma especificidade (0,1,0) — sem
   isso, "display:flex" acima (que vem depois no arquivo) vencia o
   "display:none" padrão do navegador pro atributo hidden, e a seta
   continuava visível mesmo com carousel.js marcando hidden=true no
   início/fim do trilho (bug real, confirmado ao vivo). */
.carousel-prev[hidden], .carousel-next[hidden] { display: none; }
.carousel-prev:hover, .carousel-next:hover { background: #f5f5f5; border-color: #ddd; }
.carousel-prev:focus-visible, .carousel-next:focus-visible {
  outline: 2px solid var(--primary_color, #0086ff) !important; outline-offset: 2px;
}
@media (max-width: 700px) {
  .carousel-prev, .carousel-next { display: none; } /* mobile: só swipe, sem seta ocupando espaço */
  .carousel-wrapper { gap: 0; }
}

/* --- Barra fixa de compra no mobile ------------------------------------ */
.mobile-buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border-top: 1px solid var(--pdp-border);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
.mobile-buy-bar__price { font-size: 18px; font-weight: 700; color: var(--pdp-title); }
.mobile-buy-bar .button-cart { width: auto; height: 42px; padding: 0 24px; margin: 0 !important; border-radius: 6px; }
@media (min-width: 1181px) { .mobile-buy-bar { display: none !important; } }

/* --- Responsivo: tablet/mobile -----------------------------------------
   A estrutura da galeria (imagem em cima, miniatura horizontal embaixo)
   é a MESMA em qualquer largura — só o tamanho da área principal e das
   miniaturas diminui proporcionalmente, sem duplicar layout.
   Breakpoint de empilhar subiu de 900px pra 1180px: entre 900-1180px (ex.
   iPad em modo paisagem, 1024px) as 3 colunas lado a lado (galeria+
   título+painel de compra) não cabem de forma decente — o painel de
   compra sozinho já passa de 380px de verdade (padding+borda reais do
   tema) e as badges "LOJA BRASILEIRA"/"ENVIO DE SÃO PAULO" do título não
   encolhem à vontade, sobrando pouco mais de 270px pra galeria (bug real,
   confirmado ao vivo num produto com variação — a "solução" de só reduzir
   larguras/alturas nesse meio-termo não resolvia a causa, só adiava).
   Empilhar mais cedo evita esse aperto de vez, sem inventar mais um nível
   de ajuste fino. ------------------------------------------------------ */
@media (max-width: 1180px) {
  /* "align-items:flex-start" no desktop existe pra alinhar as colunas
     pelo topo (eixo cruzado = vertical, com flex-direction:row). Ao virar
     coluna aqui, o eixo cruzado passa a ser HORIZONTAL — sem essa troca
     pra "stretch", os filhos paravam de esticar até a largura do
     container e cresciam pelo próprio conteúdo (badges/miniaturas sem
     quebra de linha), até 760px numa tela de 390px, cortados
     silenciosamente pelo overflow-x:hidden do body (bug real: a galeria
     aparecia "pela metade" no celular). */
  .product-info-container { flex-direction: column; align-items: stretch; }
  /* Mesmo problema do ".product-action" logo abaixo: "#product-info" é o
     card branco que no desktop embrulha as 2 colunas lado a lado (tema
     original: padding:30px 15px + margin-right:10px, content-box). Com
     width:100% isso ainda somava padding+margin por cima da largura do
     container e estourava a página (~15px de verdade, confirmado ao
     vivo em 1024-1180px). */
  .product-info { flex-direction: column; align-items: stretch; width: 100%; box-sizing: border-box; margin: 0; }
  .product-info > .column:first-child, .product-info > .column.mobile-title-variants { flex: none; max-width: none; width: 100%; }
  /* box-sizing:border-box só aqui: o tema usa content-box por padrão, e
     ".product-action" tem padding:0 30px + borda 1px — com width:100% e
     content-box isso vira 100% DA LARGURA DO PAI + 62px, estourando a
     página de verdade (bug real, confirmado em ~1024-1180px). No
     desktop a largura é um valor fixo em px (360px), então o mesmo
     content-box ali só decide quanto o miolo mede, sem crescer além do
     container — não precisa mexer nesse caso. */
  .product-action { position: static; width: 100%; box-sizing: border-box; margin-top: 20px; }

  /* Tablet: mesma estrutura, altura da imagem reduzida proporcionalmente
     (a coluna já ocupa 100% do container aqui, bem mais larga que os
     600px do desktop — por isso o valor cai, não porque a imagem "coube
     menos", e sim pra manter uma proporção equilibrada). */
  .product-slider-image { height: 460px; }
  .thumb-btn { width: 68px; height: 68px; }

  .title h1 { font-size: 20px; }
  .product-action .current-price { font-size: 26px; }

  /* Abas viram accordion simples no mobile: todo painel some, só o ativo
     aparece (mesma marcação/JS — wireProductTabs continua igual). */
  .product-tabs__nav { flex-direction: column; gap: 0; border-bottom: none; }
  .product-tabs__tab { border: 1px solid var(--pdp-border); border-radius: 6px; margin-bottom: 8px; text-align: left; }
  .product-tabs__tab.is-active { background: #f5f9ff; }
  .info-row { grid-template-columns: 1fr; gap: 2px; }

  /* Espaço extra embaixo pra barra fixa de compra não cobrir conteúdo. */
  #description { padding-bottom: 70px; }
}
@media (max-width: 480px) {
  /* Celular: a coluna da galeria já é ~100% da tela aqui — altura menor
     evita uma caixa quadrada gigante ocupando a primeira dobra inteira. */
  .product-slider-image { height: 380px; }
  .thumb-btn { width: 60px; height: 60px; }
  .product-gallery__thumbs { gap: 4px; }
}

/* Auditoria mobile: em telas bem estreitas (confirmado em 320px, medindo
   scrollWidth do botão) "Comprar Agora" + ícone não cabem nos ~134px que
   sobram ao lado do seletor de 100px — o texto cortava
   ("Comprar Agor..."). Só nessa faixa a quantidade sobe pra cima do CTA
   (cada um 100% da largura) em vez de dividir a mesma linha. */
@media (max-width: 340px) {
  .product-action .action-buttons { grid-template-columns: 1fr; }
  .product-action .quantity { width: 100%; }
}

/* =========================================================================
   AUDITORIA MOBILE — página de produto (bugs reais confirmados medindo o
   DOM ao vivo em várias larguras, não só visual). ---------------------- */

/* Topbar (ticker "Frete Grátis hoje"/"Há 7 anos"/...): a regra real do
   tema (".top-header-slider{padding:.5em 0}" + "ul.slider-top-header
   {height:25px}") soma 25px + 16px de padding = 41px medidos ao vivo —
   acima dos ~28-32px pedidos. Reduz só o padding, mantendo a altura
   interna do slider (25px) intacta pra não cortar o texto/ícone. */
@media (max-width: 767px) {
  .top-header-slider { padding: 4px 0; }
}

/* "Leve Mais Pague Menos" empilhado: o tema tem
   ".product-fbt .calc:last-child:before{transform:rotate(90deg)}" — gira
   o "=" (2 traços horizontais) 90°, virando "‖" (2 traços verticais),
   ilegível como "igual" no empilhamento vertical mobile. O "+" não sofre
   o mesmo problema por ser simétrico em qualquer rotação. Mesma faixa de
   largura em que o tema já empilha os cards (992px). */
@media (max-width: 992px) {
  .product-fbt .calc:last-child:before { transform: none; }
}
.collection-page { max-width: 1280px; margin: 0 auto; padding: 0 20px 80px; }
.collection-loading, .collection-empty { text-align: center; padding: 60px 20px; color: #666; }

/* --- Busca: estado "digite algo" / "nenhum resultado" — mesmo container
   da listagem normal, só um bloco central com ícone discreto + texto +
   ação, sem inventar nenhum dado de produto. */
.search-empty-state {
  max-width: 420px;
  margin: 48px auto;
  padding: 40px 24px;
  text-align: center;
}
.search-empty-state i {
  font-size: 40px;
  color: #ccc;
  margin-bottom: 18px;
  display: block;
}
.search-empty-state h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--card-text, #333);
  margin: 0 0 8px;
}
.search-empty-state p {
  font-size: 14px;
  color: var(--card-muted, #767676);
  margin: 0 0 20px;
}
.search-empty-state .button { display: inline-block; }

/* ======================================================================
   SIDEBAR DE FILTROS + BREADCRUMB — refeito do zero (não é mais overrides
   em cima do componente antigo). O container agora se chama
   ".collection-sidebar" e não ".collection-filters": esse era exatamente
   o bug do "bloco cinza atrás" — .collection-filters já existia no
   theme.css como a barra HORIZONTAL de tags removíveis da página de
   coleção antiga (background:#e5e5e5;padding:5px 5px 0;margin-bottom:35px;
   display:flex;flex-wrap:wrap), e nosso <aside> reaproveitava o mesmo
   nome de classe. Renomear elimina a colisão na raiz, em vez de empilhar
   mais !important por cima. Nenhum id usado pelo JS (collection.js)
   mudou — só a classe do <aside> e do botão/backdrop novos do mobile.
   ====================================================================== */
.collection-sidebar,
.collection-breadcrumb {
  --sidebar-accent: var(--primary_color, #0086ff);
  --sidebar-border: #ededed;
  --sidebar-text: #303030;
  --sidebar-muted: #767676;
  --sidebar-radius: 4px;
}

.collection-breadcrumb { padding: 20px 0 16px; font-size: 15px; }
.collection-breadcrumb a { color: var(--sidebar-muted); text-decoration: none; }
.collection-breadcrumb a:hover { color: var(--sidebar-text); text-decoration: underline; }
.collection-breadcrumb span[aria-hidden] { margin: 0 10px; color: var(--sidebar-muted); }
.collection-breadcrumb #breadcrumb-current { color: var(--sidebar-text); font-weight: 400; }

/* Layout principal: grid explícito de 2 colunas (sidebar fixa + conteúdo
   flexível), sem margins negativas nem position pra "empurrar" nada. */
.collection-body {
  display: grid;
  grid-template-columns: 292px 1fr;
  align-items: start;
  gap: 32px;
}
.collection-main { min-width: 0; }

.collection-sidebar {
  position: sticky;
  top: 16px;
  background: none; /* explícito: sem bloco cinza atrás do card */
  padding: 0;
  margin: 0;
  display: block;
}

/* Card único, branco, acabamento discreto — sem sombra pesada, sem
   cantos exagerados, padding interno generoso. */
.filter-panel {
  position: relative;
  background: #fff;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--sidebar-radius);
  box-shadow: none;
}
.filter-section { padding: 24px; }
.filter-section + .filter-section { border-top: 1px solid var(--sidebar-border); }
.filter-section h2 {
  font-size: 20px; font-weight: 700; line-height: 1.2;
  margin: 0 0 18px; color: var(--sidebar-text);
}

/* Lista de categorias: texto simples, sem pílula/fundo — só cor muda no
   ativo/hover, com a identidade azul da Mega Escolha (não o dourado da
   referência). Rolagem interna com barra fina depois da altura máxima. */
.filter-categories {
  list-style: none; margin: 0; padding: 0 6px 0 0;
  max-height: 264px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #bbb transparent;
}
.filter-categories::-webkit-scrollbar { width: 6px; }
.filter-categories::-webkit-scrollbar-track { background: transparent; }
.filter-categories::-webkit-scrollbar-thumb { background: #bbb; border-radius: 999px; }
.filter-categories::-webkit-scrollbar-thumb:hover { background: #999; }
.filter-categories li { margin: 0; }
.filter-categories li + li { margin-top: 2px; }
.filter-categories a {
  display: block; padding: 7px 4px; font-size: 15px; font-weight: 400;
  line-height: 1.5; color: var(--sidebar-text); text-decoration: none;
  background: none; border-radius: 4px; cursor: pointer;
  transition: color .15s ease;
}
.filter-categories a:hover { color: var(--sidebar-accent); background: none; }
.filter-categories a.is-active { color: var(--sidebar-accent); font-weight: 600; background: none; }

/* Slider de preço: dois <input type="range"> sobrepostos na mesma trilha
   (sem biblioteca) — cada input some o próprio pointer-events, só a
   alça fica clicável (::-webkit-slider-thumb / ::-moz-range-thumb com
   pointer-events:all), e o preenchimento entre as duas é uma div
   posicionada por JS (wirePriceFilter em collection.js — lógica
   inalterada nesta rodada, só o acabamento visual). */
.price-range {
  position: relative; /* âncora dos <input> absolutos — eles são irmãos
    de .price-range__track, não filhos dele, então sem isso escapam pro
    ancestral posicionado mais próximo (.filter-panel, position:relative
    por causa do botão de fechar do mobile) e saltam pro topo do card. */
  padding: 10px 2px 2px;
}
.price-range__track {
  position: relative; height: 4px; border-radius: 999px;
  background: var(--sidebar-border); margin: 14px 9px 0;
}
.price-range__fill { position: absolute; top: 0; bottom: 0; background: var(--sidebar-accent); border-radius: 999px; }

/* O <input> é irmão de .price-range__track, então pra alinhar de verdade
   ele precisa ocupar EXATAMENTE a mesma caixa da track (mesmo top/altura
   de 4px, mesmas margens laterais de 9px) — antes era um "top:-6px" e
   "height:18px" no chute, sem relação com a caixa real da track, por
   isso a bolinha flutuava acima da linha. */
.price-range__input {
  /* top/left/right precisam somar o padding do .price-range (10px/2px) com
     a margin da track (14px/9px) — offset absoluto conta a partir da borda
     do container, não do início do padding, então "top:14px" sozinho
     ficava 10px acima da track de verdade (bug relatado). */
  position: absolute; top: 24px; left: 11px; right: 11px; width: auto; height: 4px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.price-range__input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 4px;
  background: transparent;
}
.price-range__input::-moz-range-track {
  height: 4px;
  background: transparent;
  border: none;
}
.price-range__input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: all;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--sidebar-accent); box-shadow: 0 1px 3px rgba(0,0,0,.2);
  cursor: pointer;
  /* WebKit não centraliza o thumb na track sozinho — ele alinha pelo topo.
     margin-top = (altura da track − altura do thumb) / 2 = (4px − 18px) / 2 = -7px. */
  margin-top: calc((4px - 18px) / 2);
}
.price-range__input::-moz-range-thumb {
  /* Firefox já centraliza o -moz-range-thumb na altura da track sozinho —
     não usar margin-top aqui, senão descentraliza de novo. */
  pointer-events: all; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--sidebar-accent); box-shadow: 0 1px 3px rgba(0,0,0,.2);
  cursor: pointer;
}
.price-range__labels {
  display: flex; justify-content: space-between;
  margin-top: 18px; font-size: 14px; color: var(--sidebar-text); font-weight: 500;
}

/* Foco visível (teclado) — o reset global "*{outline:none!important}" do
   theme.css exige !important aqui também, mesmo padrão já usado no
   rodapé. */
.filter-categories a:focus-visible,
.collection-breadcrumb a:focus-visible {
  outline: 2px solid var(--sidebar-accent) !important;
  outline-offset: 2px !important;
}
.price-range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--sidebar-text); outline-offset: 2px; }
.price-range__input:focus-visible::-moz-range-thumb { outline: 2px solid var(--sidebar-text); outline-offset: 2px; }

/* Botão/backdrop do drawer mobile: escondidos no desktop, o JS
   (wireMobileFilterDrawer em collection.js) só alterna classes — mesmo
   DOM/lógica de filtro, sem duplicar nada para telas pequenas. */
.mobile-filter-toggle { display: none; }
.sidebar-backdrop { display: none; }
.filter-panel__close { display: none; }

@media (max-width: 1180px) {
  .collection-body { grid-template-columns: 240px 1fr; gap: 24px; }
}

@media (max-width: 900px) {
  .collection-body { display: block; }

  .mobile-filter-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-bottom: 16px; padding: 13px;
    background: #fff; border: 1px solid var(--sidebar-border, #ededed);
    border-radius: 4px; font-size: 15px; font-weight: 600;
    color: var(--sidebar-text, #303030); cursor: pointer;
  }

  .collection-sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 210;
    width: min(86vw, 340px);
    transform: translateX(100%);
    transition: transform .25s ease-out;
    background: #fff;
    padding: 0;
  }
  .collection-sidebar.is-open { transform: translateX(0); }
  .collection-sidebar .filter-panel {
    height: 100%; border: none; border-radius: 0; overflow-y: auto;
  }
  .filter-panel__close {
    display: flex; align-items: center; justify-content: center;
    position: sticky; top: 0; margin-left: auto;
    width: 40px; height: 40px; background: #fff; border: none;
    font-size: 18px; color: var(--sidebar-text, #303030); cursor: pointer;
  }

  .sidebar-backdrop.is-open {
    display: block; position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,.4);
  }

  /* Toque de pelo menos 44px por item de categoria no drawer mobile. */
  .filter-categories { max-height: none; }
  .filter-categories a { padding: 12px 4px; min-height: 44px; display: flex; align-items: center; }
}

/* --- Checkout: passos 2 e 3 (sem markup real salvo; reaproveita as
   classes reais do checkout Yampi extraídas em checkout-inline.css:
   .box-checkout, .box-title, .form-group, .holder-input) ------------- */
.checkout-page { max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px; display: flex; gap: 40px; flex-wrap: wrap; }
.checkout-steps { flex: 2 1 480px; }
.checkout-side { flex: 1 1 320px; }
.checkout-error { background: #fdecea; color: #a02622; border: 1px solid #f5c6cb; border-radius: 4px; padding: 12px 14px; margin-bottom: 16px; }
.payment-methods { display: flex; gap: 10px; margin: 16px 0; }
.payment-methods label {
  flex: 1; border: 1px solid #ddd; border-radius: 4px; padding: 12px; text-align: center; cursor: pointer; font-size: 13px;
}
.payment-methods input { display: block; margin: 0 auto 6px; }
.payment-methods img { height: 20px; margin-bottom: 6px; }
.payment-pending-note { background: #fff8e1; border: 1px solid #ffe082; border-radius: 4px; padding: 12px 14px; font-size: 13px; color: #6d5300; margin: 16px 0; }

.pix-payment-panel {
  max-width: 380px; margin: 20px auto; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;
  text-align: center; background: #fafafa;
}
.pix-payment-panel__status { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.pix-payment-panel__qr { width: 220px; height: 220px; margin: 0 auto 16px; display: block; }
.pix-payment-panel__copy { display: flex; gap: 8px; }
.pix-payment-panel__copy input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; color: #555;
}
.pix-payment-panel__copy .button { flex: 0 0 auto; padding: 10px 16px; font-size: 13px; white-space: nowrap; }
.pix-payment-panel__expires { font-size: 12px; color: #888; margin-top: 12px; }
.checkout-items { list-style: none; margin: 0 0 16px; padding: 0; }
.checkout-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 13px; }
.checkout-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }
.checkout-item__variant, .checkout-item__qty { color: #777; }
.checkout-totals-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.checkout-totals-row.total { font-weight: 700; font-size: 17px; border-top: 1px solid #ddd; padding-top: 10px; margin-top: 6px; }

@media (max-width: 768px) {
  .product-layout, .checkout-page, .cart-layout { flex-direction: column; gap: 24px; }
}

/* --- Mini-cart (carrinho lateral): regras extraídas do tema real
   (Referencias/Home page.html, bloco "MINI-CART BASE") ---------------- */
body.block-overflow { overflow: hidden; }

.mini-cart {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}
.mini-cart__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity .3s ease;
}
.mini-cart__panel {
  position: absolute;
  top: 0;
  right: -480px;
  width: 450px;
  max-width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 10px rgba(0,0,0,0.1);
  transition: right .4s ease;
}
.mini-cart.active { pointer-events: all; }
.mini-cart.active .mini-cart__overlay { opacity: 1; }
.mini-cart.active .mini-cart__panel { right: 0; }

.mini-cart__header {
  padding: 1.2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}
.mini-cart__header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.mini-cart__header h3 i { position: relative; top: -2px; }
.mini-cart__close {
  color: var(--title_color);
  background: none;
  border: none;
  font-size: 21px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.mini-cart__close:hover { transform: rotate(180deg); }

.mini-cart__content { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.mini-cart__items { padding: 0; margin: 0; list-style: none; }
.mini-cart__item {
  display: flex;
  gap: 12px;
  padding: 0 0 18px;
  border-bottom: 1px solid #f2f2f2;
  position: relative;
}
.mini-cart__item:last-child { border: none; }
.mini-cart__image-wrapper { position: relative; flex-shrink: 0; width: 75px; height: 75px; }
.mini-cart__image { width: 75px; height: 75px; object-fit: cover; border-radius: 6px; }
.mini-cart__empty { color: var(--title_color); font-size: 18px; font-weight: 600; }

.mini-cart__details { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.mini-cart__info { display: flex; justify-content: space-between; align-items: flex-start; }
.mini-cart__name { max-width: 65%; }
.mini-cart__title { font-size: 15px; font-weight: 500; color: #222; margin: 0; }
.mini-cart__variant { font-size: 13px; color: #777; margin-top: 3px; }
.mini-cart__pricebox { text-align: right; }
.mini-cart__pricebox s { font-size: 13px; color: #999; display: block; }
.mini-cart__price { font-weight: 600; color: #000; font-size: 16px; }

.mini-cart__controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mini-cart__quantity {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}
.mini-cart__quantity button { width: 28px; height: 28px; background: #f5f5f5; border: none; font-size: 16px; cursor: pointer; }
.mini-cart__quantity button:disabled { opacity: 0.4; cursor: default; }
.mini-cart__quantity .qty { width: 28px; text-align: center; font-weight: 500; font-size: 14px; color: #000; cursor: default; user-select: none; }
.mini-cart__remove { background: none; border: none; color: #7b7b7b; font-size: 13px; cursor: pointer; }
.mini-cart__remove:hover { text-decoration: underline; }

.mini-cart__footer { border-top: 1px solid #eee; padding: 1rem 1.5rem; }
.mini-cart__summary { font-size: 16px; margin: 0.5em 0 1.5em; }
.mini-cart__summary div { display: flex; justify-content: space-between; margin-bottom: 6px; }
.mini-cart__summary strong { font-weight: 600; }
.mini-cart__summary s { color: #777; font-weight: 400; }
.mini-cart__summary .green { color: #00c853; }
.mini-cart__summary .line { border-bottom: 1px solid #ddd; margin: 10px 0; }
.mini-cart__summary .total { font-size: 18px; font-weight: 900; }

.mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; }
.mini-cart__checkout {
  width: 100%;
  padding: 15px 0;
  min-height: 34px;
}
.mini-cart__checkout .btn-state:before {
  content: "\f023";
  color: #fff;
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  margin-right: 6px;
}
.mini-cart__continue { width: 100%; }

.mini-cart__loader { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.6); border-radius: 6px; }
.mini-cart__loader.active { display: flex; }
.mini-cart__loader .spinner { width: 24px; height: 24px; animation: mini-cart-spin 0.8s linear infinite; }
.mini-cart__loader .spinner circle { fill: none; stroke: #999; stroke-width: 8; stroke-dasharray: 90 60; }
@keyframes mini-cart-spin { to { transform: rotate(360deg); } }