/* ============================================================
   MODELOS DO SITE (22/10/2026): a cesteira escolhe o visual no app.
   "Clássico" é o site de sempre (sem classe extra). Os outros dois mudam só
   a aparência por cima do mesmo HTML: letra, cantos, topo, banner, atalhos,
   cartões das cestas e rodapé. Carrinho, entrega e WhatsApp não mudam.
   A cor da marca dela continua vindo de --musgo (e --cb-rgb).
   ============================================================ */

/* =================== VITRINE: foto grande, cantos retos, a cesta é a estrela =================== */
body.modelo-vitrine{--fonte:'Nunito Sans','Helvetica Neue',Arial,sans-serif;--radius:0px;}
body.modelo-vitrine .btn,body.modelo-vitrine .cb-banner-bt{border-radius:0;text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:14px;}
/* faixa do topo no Vitrine: segue a cor da loja (antes era preta fixa e ignorava as cores dela) */
body.modelo-vitrine .cb-logo-texto{color:var(--musgo);font-weight:900;letter-spacing:.03em;}
body.modelo-vitrine .titulo-sec{text-align:left;text-transform:uppercase;font-weight:900;font-size:clamp(20px,2.6vw,26px);letter-spacing:.04em;}
body.modelo-vitrine .sec-cab .titulo-sec{margin-bottom:0;}
@media(min-width:860px){
  body.modelo-vitrine .header-inner{grid-template-columns:auto 1fr auto auto;grid-template-areas:"marca menu busca acoes";column-gap:28px;padding:14px 32px;}
  body.modelo-vitrine .nav-links{border-top:0;margin:0;padding:0;justify-content:flex-start;gap:26px;}
  body.modelo-vitrine .nav a{font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;}
  /* "Categorias" igual aos outros itens; a lista que abre fica em letra normal (01/11/2026) */
  body.modelo-vitrine .nav-dropdown summary{font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;}
  body.modelo-vitrine .nav-dropdown-menu a{font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;}
  body.modelo-vitrine .header-busca{width:240px;}
  body.modelo-vitrine .header-busca .busca{border-radius:0;}
}
/* banner no Vitrine: sem margem e sem cantos; o jeito "foto no fundo" fica no fim deste arquivo (vale nos 3 modelos) */
body.modelo-vitrine .banners{padding:0;max-width:none;}
body.modelo-vitrine .cb-banners .banners-trilho{border-radius:0;}
body.modelo-vitrine .cb-banner-txt h2{text-transform:uppercase;font-weight:900;letter-spacing:-.01em;}
body.modelo-vitrine .cb-banner--fundo .cb-banner-txt h2{font-size:clamp(30px,5vw,60px);}
/* bolinha ativa do banner: usa a regra base (cor da loja) */
/* atalhos: quadros grandes com foto e nome por cima */
body.modelo-vitrine .atalhos-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;overflow:visible;justify-content:stretch;}
@media(min-width:700px){body.modelo-vitrine .atalhos-lista{grid-template-columns:repeat(auto-fit,minmax(170px,280px));gap:14px;justify-content:start;}}
body.modelo-vitrine .atalho{position:relative;width:auto;gap:0;}
body.modelo-vitrine .atalho-anel{display:block;padding:0;border-radius:0;background:none;width:100%;position:relative;}
body.modelo-vitrine .atalho-anel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,0) 55%);pointer-events:none;}
body.modelo-vitrine .atalho-anel .atalho-foto,body.modelo-vitrine .atalho-foto{width:100%;height:auto;aspect-ratio:4/5;border-radius:0;border:0;}
body.modelo-vitrine .atalho>span:last-child{position:absolute;left:12px;right:12px;bottom:12px;text-align:left;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:14px;z-index:1;}
body.modelo-vitrine .cb-atalho-icone{background:var(--musgo);color:#fff;}
/* faixa de vantagens: branca com linhas */
body.modelo-vitrine .garantias{background:#fff;color:#232323;border-top:1px solid #E6E6E6;border-bottom:1px solid #E6E6E6;}
body.modelo-vitrine .garantia{color:#5A5A5A;}
body.modelo-vitrine .garantia strong{color:#161616;font-weight:800;}
body.modelo-vitrine .garantia svg{color:var(--musgo);}
@media(min-width:900px){body.modelo-vitrine .garantia+.garantia{border-left:1px solid #E6E6E6;padding-left:18px;}}
/* cartões das cestas */
body.modelo-vitrine .carrossel .cesta-foto,body.modelo-vitrine .cestas-lista .cesta-foto,body.modelo-vitrine .cesta-foto{border-radius:0;}
body.modelo-vitrine .cesta-nome{text-transform:uppercase;font-weight:800 !important;letter-spacing:.04em;font-size:14px !important;}
body.modelo-vitrine .cesta-preco{font-size:20px !important;font-weight:900;color:#161616;}
body.modelo-vitrine .cesta-sacola{border-radius:0 !important;text-transform:uppercase;letter-spacing:.08em;font-weight:800 !important;font-size:13px !important;}
body.modelo-vitrine .cesta-etiqueta{border-radius:0;}
body.modelo-vitrine:not(.com-cor2) .cesta-etiqueta{background:var(--musgo);color:#fff;}
body.modelo-vitrine .colecao{border:0;border-radius:0;}
body.modelo-vitrine .colecao img{aspect-ratio:4/3;}
body.modelo-vitrine .colecao-txt strong{text-transform:uppercase;font-weight:900;letter-spacing:.04em;}
body.modelo-vitrine .carrossel-progresso{border-radius:0;}
body.modelo-vitrine footer{background:var(--cb-rodape);}
body.modelo-vitrine footer .cb-logo-texto{color:#fff;}

/* =================== DELICADO: cantos redondos, tons suaves, mais afetivo =================== */
body.modelo-delicado{--radius:22px;--cb-fundo-banner:rgba(var(--cb-rgb),.09);background:#FFFCF7;}
body.modelo-delicado h1,body.modelo-delicado h2,body.modelo-delicado h3,body.modelo-delicado h4,
body.modelo-delicado .titulo-sec,body.modelo-delicado .cb-logo-texto,body.modelo-delicado .cesta-nome,body.modelo-delicado .colecao-txt strong{font-family:'Quicksand',var(--fonte);font-weight:700;}
body.modelo-delicado .cb-logo-texto{text-transform:none;letter-spacing:0;font-size:26px;}
body.modelo-delicado .btn,body.modelo-delicado .cb-banner-bt{border-radius:999px;}
body.modelo-delicado .faixa-topo{border-radius:0 0 18px 18px;}
body.modelo-delicado:not(.com-cor2) .faixa-topo{background:rgba(var(--cb-rgb),.14);color:var(--musgo);}
body.modelo-delicado .header{background:rgba(255,252,247,.94);border-bottom:0;}
@media(min-width:860px){
  body.modelo-delicado .nav-links{border-top:0;gap:10px;}
  body.modelo-delicado .nav a{background:#fff;border-radius:999px;padding:8px 18px;box-shadow:0 2px 10px rgba(0,0,0,.05);}
  /* "Categorias" vira pílula igual aos outros; os itens da lista que abre não (01/11/2026) */
  body.modelo-delicado .nav-dropdown summary{background:#fff;border-radius:999px;padding:8px 18px;box-shadow:0 2px 10px rgba(0,0,0,.05);}
  body.modelo-delicado .nav-dropdown-menu a{background:none;box-shadow:none;border-radius:8px;padding:9px 14px;}
  body.modelo-delicado .nav-dropdown-menu a:hover{background:var(--cream-soft);color:inherit;}
  body.modelo-delicado .nav a::after{display:none;}
  body.modelo-delicado .nav a.active,body.modelo-delicado .nav a:hover{background:var(--musgo);color:#fff;}
  body.modelo-delicado .header-busca .busca{border-radius:999px;background:#fff;}
  body.modelo-delicado .cb-logo-texto{font-size:32px;}
}
/* banner: fundo suave na cor dela e a foto em arco (só no estilo "foto de um lado") */
body.modelo-delicado .cb-banners .banners-trilho{border-radius:32px;}
body.modelo-delicado .banner.cb-banner{overflow:hidden;}
body.modelo-delicado .cb-banner--lado::before{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:rgba(var(--cb-rgb),.12);pointer-events:none;}
body.modelo-delicado .cb-banner--lado .cb-banner-foto{margin:22px 22px 0;border-radius:180px 180px 26px 26px;}
body.modelo-delicado .cb-banner--lado .cb-banner-foto::after{display:none;}
body.modelo-delicado .cb-banner--lado .cb-banner-txt{padding-top:18px;}
@media(min-width:768px){
  body.modelo-delicado .banner.cb-banner--lado{grid-template-columns:1fr 1fr;align-items:center;min-height:440px;}
  body.modelo-delicado .cb-banner--lado .cb-banner-foto{order:2;margin:30px 40px 30px 0;min-height:380px;border-radius:220px 220px 30px 30px;}
  body.modelo-delicado .cb-banner--lado .cb-banner-txt{padding:40px 30px 40px 56px;}
  body.modelo-delicado .cb-banner--lado::before{width:380px;height:380px;right:-110px;top:-140px;}
}
/* atalhos: pílulas com fotinho */
body.modelo-delicado .atalhos-lista{flex-wrap:wrap;justify-content:center;gap:10px;overflow:visible;}
body.modelo-delicado .atalho{flex-direction:row;width:auto;gap:10px;background:#fff;border-radius:999px;padding:6px 18px 6px 6px;box-shadow:0 3px 12px rgba(0,0,0,.06);font-weight:700;}
body.modelo-delicado .atalho-anel{padding:0;background:none;}
body.modelo-delicado .atalho-anel .atalho-foto,body.modelo-delicado .atalho-foto{width:46px;height:46px;border:0;}
@media(min-width:700px){body.modelo-delicado .atalho-anel .atalho-foto,body.modelo-delicado .atalho-foto{width:56px;height:56px;}body.modelo-delicado .atalho{font-size:16px;}}
/* vantagens: caixinhas brancas arredondadas */
body.modelo-delicado .garantias{background:none;color:var(--tinta);}
body.modelo-delicado .garantias-lista{gap:12px;}
body.modelo-delicado .garantia{flex-direction:column;align-items:center;text-align:center;background:#fff;border-radius:22px;padding:18px 12px;color:var(--tinta-2);box-shadow:0 4px 16px rgba(0,0,0,.05);}
body.modelo-delicado .garantia strong{color:var(--tinta);}
body.modelo-delicado .garantia svg{color:var(--musgo);}
/* cartões das cestas: brancos, com sombra leve e coração */
body.modelo-delicado .carrossel .cesta,body.modelo-delicado .cestas-lista .cesta{background:#fff;border-radius:24px;padding:8px;box-shadow:0 6px 20px rgba(0,0,0,.06);border:0;}
body.modelo-delicado .carrossel .cesta-foto,body.modelo-delicado .cestas-lista .cesta-foto,body.modelo-delicado .cesta-foto{border-radius:18px;}
/* coração do Delicado: bolinha branca (::after) + coração na cor da loja (::before com máscara). Antes era rosa fixo. */
body.modelo-delicado .cesta-foto::after{content:"";position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);}
body.modelo-delicado .cesta-foto::before{content:"";position:absolute;top:16px;right:16px;width:18px;height:18px;z-index:1;background:var(--musgo);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E") center/18px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E") center/18px no-repeat;}
body.modelo-delicado .cesta-info{padding-left:6px !important;padding-right:6px !important;}
body.modelo-delicado .cesta-preco{color:var(--musgo);}
body.modelo-delicado .cesta-sacola{border-radius:999px !important;background:rgba(var(--cb-rgb),.12) !important;color:var(--musgo) !important;box-shadow:none !important;}
body.modelo-delicado .cesta-sacola svg{color:var(--musgo);}
body.modelo-delicado .cesta-etiqueta{border-radius:999px;}
body.modelo-delicado:not(.com-cor2) .cesta-etiqueta{background:#fff;color:var(--musgo);}
body.modelo-delicado .colecao{border:0;border-radius:24px;box-shadow:0 6px 20px rgba(0,0,0,.06);}
body.modelo-delicado .monte-foto img,body.modelo-delicado .loja-foto-nova,body.modelo-delicado .cb-texto-foto img{border-radius:28px;}
body.modelo-delicado .carrossel-progresso,body.modelo-delicado .carrossel-barra{border-radius:999px;}
body.modelo-delicado footer{border-radius:32px 32px 0 0;background:var(--musgo);}
body.modelo-delicado .cat-chip,body.modelo-delicado .cat-ordenar select{border-radius:999px;}
body.modelo-vitrine .cat-chip,body.modelo-vitrine .cat-ordenar select{border-radius:0;text-transform:uppercase;letter-spacing:.05em;font-size:13px;}

/* =================== ESTILO DO BANNER "FOTO NO FUNDO INTEIRO, TEXTO POR CIMA" (01/11/2026) ===================
   Vale nos 3 modelos. A lojista escolhe em cada banner; sem escolha, só o Vitrine usa este.
   Camada escura em degradê (neutra) para o texto ler em qualquer foto; o botão continua na cor da loja. */
.banner.cb-banner.cb-banner--fundo{grid-template-columns:1fr;min-height:440px;align-items:end;overflow:hidden;}
.cb-banner--fundo .cb-banner-foto{position:absolute;inset:0;height:auto;min-height:0;margin:0;border-radius:0;order:0;}
.cb-banner--fundo .cb-banner-foto::after{display:block;background:linear-gradient(0deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.34) 50%,rgba(0,0,0,.06) 100%);}
.cb-banner--fundo .cb-banner-txt{z-index:2;padding:28px 22px;max-width:780px;}
.cb-banner--fundo .cb-banner-olho,.cb-banner--fundo .cb-banner-txt h2,body.com-cor2 .cb-banner--fundo .cb-banner-olho{color:#fff;}
.cb-banner--fundo .cb-banner-txt h2{text-shadow:0 2px 14px rgba(0,0,0,.35);}
.cb-banner--fundo .cb-banner-txt p{color:rgba(255,255,255,.92);}
@media(min-width:768px){
  .banner.cb-banner.cb-banner--fundo{min-height:540px;}
  .cb-banner--fundo .cb-banner-txt{padding:56px 60px;}
}

/* ---------- ALTURA FIXA DO BANNER (01/11/2026, pedido do Rafael) ----------
   Antes a altura vinha do texto: em tela mais estreita (notebook com zoom de 125%, prévia do editor)
   o título quebrava em mais linhas e o banner crescia. Agora a altura é a MESMA pra todo banner do site,
   nos 3 modelos e nos 2 estilos: 440px no computador, 400px no tablet e 520px no celular (foto 240 + texto 280).
   O texto se ajusta: o título acompanha a largura da PRÓPRIA caixa de texto (cqi, não a janela) e só
   no limite corta com reticências. O botão fica sempre à vista. */
:root{--cb-banner-alt:440px;--cb-banner-foto-cel:240px;}
@media(max-width:1023px){:root{--cb-banner-alt:400px;}}
@media(max-width:767px){:root{--cb-banner-alt:520px;}}
body .cb-banners .banner.cb-banner{height:var(--cb-banner-alt);min-height:0;max-height:var(--cb-banner-alt);overflow:hidden;}
body .cb-banners .banner.cb-banner .cb-banner-foto{min-height:0;}
body .cb-banners .banner.cb-banner .cb-banner-txt{container-type:inline-size;min-height:0;overflow:hidden;align-content:center;}
body .cb-banners .cb-banner .cb-banner-txt h2{font-size:clamp(22px,8cqi,42px);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
body.modelo-vitrine .cb-banners .cb-banner .cb-banner-txt h2{font-size:clamp(22px,6.6cqi,40px);}
body .cb-banners .cb-banner .cb-banner-txt p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
body .cb-banners .cb-banner .cb-banner-olho{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* foto no fundo: texto embaixo, título um pouco maior, mesma altura */
body .cb-banners .banner.cb-banner.cb-banner--fundo .cb-banner-txt{align-content:end;max-height:100%;padding:36px 48px;}
body .cb-banners .cb-banner--fundo .cb-banner-txt h2{font-size:clamp(22px,7cqi,52px);}
body.modelo-vitrine .cb-banners .cb-banner--fundo .cb-banner-txt h2{font-size:clamp(22px,6.2cqi,52px);}
/* Delicado, foto em arco: cabe na mesma altura */
body.modelo-delicado .cb-banners .cb-banner--lado .cb-banner-foto{min-height:0;align-self:stretch;}
@media(min-width:768px){
  body.modelo-delicado .cb-banners .cb-banner--lado .cb-banner-foto{margin:26px 36px 26px 0;}
}
@media(max-width:1023px) and (min-width:768px){
  body .cb-banners .cb-banner .cb-banner-txt p{-webkit-line-clamp:2;}
  body .cb-banners .banner.cb-banner.cb-banner--fundo .cb-banner-txt{padding:28px 32px;}
}
@media(max-width:767px){
  body .cb-banners .banner.cb-banner--lado{grid-template-rows:var(--cb-banner-foto-cel) minmax(0,1fr);grid-template-columns:1fr;}
  body .cb-banners .banner.cb-banner--lado .cb-banner-foto{height:auto;}
  body .cb-banners .banner.cb-banner--lado .cb-banner-txt{align-content:start;padding:6px 22px 22px;}
  body .cb-banners .cb-banner .cb-banner-txt h2{font-size:clamp(20px,7.6cqi,27px);}
  body.modelo-vitrine .cb-banners .cb-banner .cb-banner-txt h2{font-size:clamp(20px,6.8cqi,26px);}
  body .cb-banners .cb-banner--fundo .cb-banner-txt h2,body.modelo-vitrine .cb-banners .cb-banner--fundo .cb-banner-txt h2{font-size:clamp(20px,8.2cqi,32px);}
  body .cb-banners .banner.cb-banner.cb-banner--fundo .cb-banner-txt{padding:24px 22px;}
  body.modelo-delicado .cb-banners .cb-banner--lado .cb-banner-foto{margin:18px 18px 0;}
}