:root{
    /* Identidade inspirada na referência VELORA: bordô profundo, quase-preto e creme.
       O dourado saiu: na VELORA ele é metal de capa, não cor de marca. */
    --color-primary:#610D1F;
    --color-primary-rgb:97,13,31;
    --color-primary-deep:#0A0608;
    --color-primary-light:#F6EEEF;
    --color-gold:#E7C9CF;          /* acento claro para uso sobre fundo escuro */
    --color-gold-rgb:231,201,207;
    --color-gold-deep:#C99AA5;
    --color-gold-soft:#F7EDEE;
    --color-bg:#FBFAF6;
    --color-bg-soft:#F2EDE4;
    --color-border:#DDD5C8;
    --color-border-soft:#EAE4D9;
    --color-text-primary:#14100F;
    --color-text-secondary:#5C554C;
    --color-text-muted:#8B8477;
    --color-whatsapp:#3fae59;
    --font-display:'Jost', -apple-system, sans-serif;
    --font-body:'Jost', -apple-system, sans-serif;
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
    --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
    /* Forma: cantos retos e bordas de 1px em vez de arredondado com sombra. */
    --radius-sm:0px; --radius-md:0px; --radius-lg:0px; --radius-pill:0px;
    --shadow-card:0 0 0 1px rgba(20,16,15,.14);
    --shadow-pop:0 28px 64px -28px rgba(10,6,8,.55);
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.55;}
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}
  ul{margin:0;padding:0;list-style:none;}
  h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:700;}
  .container{max-width:1200px;margin:0 auto;padding:0 var(--space-6);}
  @media (max-width:767.98px){ .container{padding:0 var(--space-4);} }

  /* ---------- Topbar ----------
     Breakpoints seguem a escala do Bootstrap 5 (sm 576 / md 768 / lg 992 / xl 1200),
     usando o padrão *.98 do próprio Bootstrap para os max-width. */
  .topbar{background:var(--color-primary-deep);color:#A9A29A;font-size:12.5px;}
  .topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:38px;padding-top:8px;padding-bottom:8px;gap:var(--space-4);}
  .topbar a{font-weight:700;color:var(--color-gold);}
  .topbar-social{display:flex;gap:10px;align-items:center;flex-shrink:0;}
  .topbar-social a{color:#A9A29A;opacity:.85;}
  .topbar-social a:hover{opacity:1;color:var(--color-gold);}
  .topbar-msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .topbar-msg .short{display:none;}
  @media (max-width:767.98px){ .topbar-right-social{display:none;} }
  @media (max-width:575.98px){ .topbar-msg .full{display:none;} .topbar-msg .short{display:inline;} }

  /* ---------- Header ---------- */
  header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border);}
  .header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);height:78px;}
  @media (max-width:575.98px){
    .header-row{height:64px;gap:var(--space-3);}
    .brand-mark{width:32px;height:32px;font-size:14px;}
    .brand-name{font-size:15.5px;}
    .brand-tag{display:none;}
  }
  .brand{display:flex;align-items:center;gap:10px;min-width:0;}
  .brand-mark{
    width:38px;height:38px;border-radius:50%;background:var(--color-primary);
    color:var(--color-gold);display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:700;font-size:17px;flex-shrink:0;
  }
  .brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0;}
  .brand-name{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--color-text-primary);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .brand-name em{font-style:normal;color:var(--color-primary);}
  .brand-tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);margin-top:2px;}

  nav.main-nav{display:flex;gap:var(--space-6);flex:1;}
  nav.main-nav a{font-size:14px;font-weight:700;color:var(--color-text-secondary);padding:8px 0;position:relative;white-space:nowrap;transition:color .18s var(--ease);}
  nav.main-nav a:hover{color:var(--color-primary);}
  nav.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color-gold);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);}
  nav.main-nav a:hover::after{transform:scaleX(1);}

  .header-actions{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0;}
  .icon-btn{width:40px;height:40px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;background:var(--color-bg-soft);border:1px solid var(--color-border);color:var(--color-text-secondary);transition:all .18s var(--ease);}
  .icon-btn:hover{border-color:var(--color-primary);color:var(--color-primary);}
  .list-btn{display:flex;align-items:center;gap:9px;background:var(--color-primary);border:1px solid var(--color-primary);padding:10px 16px 10px 14px;border-radius:var(--radius-pill);font-size:13.5px;font-weight:700;color:#fff;transition:all .18s var(--ease);flex-shrink:0;}
  .list-btn:hover{background:var(--color-primary-deep);}
  .list-count{min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-pill);background:var(--color-gold);color:#F7EFE8;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-primary);}
  .nav-toggle:hover{background:var(--color-bg-soft);}
  .nav-toggle .icon-close{display:none;}
  .nav-toggle.open .icon-menu{display:none;}
  .nav-toggle.open .icon-close{display:block;}
  .mobile-nav{display:none;flex-direction:column;max-height:0;overflow:hidden;background:#fff;transition:max-height .28s var(--ease);}
  .mobile-nav.open{max-height:280px;border-top:1px solid var(--color-border);}
  .mobile-nav a{padding:14px var(--space-6);font-size:15px;font-weight:700;color:var(--color-text-primary);border-bottom:1px solid var(--color-border-soft);}
  .mobile-nav a:active{background:var(--color-bg-soft);}
  @media (max-width:991.98px){ nav.main-nav{display:none;} .nav-toggle{display:flex;} .mobile-nav{display:flex;} }
  @media (max-width:575.98px){ .list-btn{padding:9px 12px;} .list-btn-label{display:none;} }

  /* ---------- Banner promocional (cadastrado no painel admin > Vitrine) ---------- */
  .promo-banner{background:var(--color-bg-soft);border-bottom:1px solid var(--color-border);border-top:1px solid var(--color-border);}
  .promo-banner .container{display:flex;align-items:center;justify-content:center;gap:var(--space-4);flex-wrap:wrap;padding-top:var(--space-3);padding-bottom:var(--space-3);text-align:center;}
  .promo-banner .pb-text b{font-size:14px;color:var(--color-text-primary);}
  .promo-banner .pb-text span{display:block;font-size:12.5px;color:var(--color-text-secondary);margin-top:1px;}
  .promo-banner .btn{flex-shrink:0;padding:8px 18px;font-size:13px;}
  @media (max-width:575.98px){ .promo-banner .container{flex-direction:column;gap:8px;padding-top:var(--space-3);padding-bottom:var(--space-3);} }

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:700;border:1px solid transparent;transition:all .18s var(--ease);}
  .btn-primary{background:var(--color-primary);color:#fff;}
  .btn-primary:hover{background:var(--color-primary-deep);}
  .btn-gold{background:var(--color-gold);color:#F7EFE8;}
  .btn-gold:hover{background:var(--color-gold-deep);}
  .btn-outline{border-color:var(--color-border);color:var(--color-text-primary);background:#fff;}
  .btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary);}
  .btn:active{transform:translateY(1px);}
  .btn-block{width:100%;}
  .btn-sm{padding:10px 18px;font-size:13px;}

  /* ---------- Hero (banner cheio, sem carrossel) ---------- */
  .hero{position:relative;overflow:hidden;background:linear-gradient(135deg, var(--color-primary-deep) 0%, var(--color-primary) 55%, #3E0714 100%);border-bottom:1px solid var(--color-border);}
  .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 800px 480px at 85% 0%, rgba(var(--color-gold-rgb),.22), transparent 60%);}
  .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 500px 380px at 8% 100%, rgba(var(--color-gold-rgb),.12), transparent 65%);}
  .hero-inner{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:440px;padding-top:var(--space-16);padding-bottom:var(--space-16);}
  .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-gold);font-weight:800;margin-bottom:var(--space-4);}
  .hero-eyebrow::before{content:"";width:22px;height:2px;background:var(--color-gold);}
  .hero h1{font-size:clamp(32px,4vw + 8px,56px);line-height:1.1;color:#fff;max-width:20ch;}
  .hero h1 .accent{color:var(--color-gold);}
  .hero p.lede{margin:var(--space-5) 0 0;max-width:52ch;font-size:16px;color:#B4ADA4;}
  .hero-cta-row{display:flex;gap:var(--space-4);margin-top:var(--space-8);flex-wrap:wrap;}
  .hero .btn-outline{border-color:rgba(255,255,255,.4);color:#fff;background:transparent;}
  .hero .btn-outline:hover{border-color:var(--color-gold);color:var(--color-gold);}
  .hero-stats{display:flex;gap:var(--space-8);margin-top:var(--space-10);flex-wrap:wrap;row-gap:var(--space-4);}
  @media (max-width:575.98px){ .hero-cta-row .btn{flex:1 1 100%;} .hero-stats{gap:var(--space-6);} }
  .hero-stat b{display:block;font-family:var(--font-display);font-size:23px;color:#fff;}
  .hero-stat span{font-size:12px;color:#8B8477;}
  @media (max-width:767.98px){ .hero-inner{min-height:0;padding-top:var(--space-12);padding-bottom:var(--space-12);} }
  @media (max-width:575.98px){ .hero-inner{padding-top:var(--space-10);padding-bottom:var(--space-10);} }

  /* ---------- Trust strip ---------- */
  .trust-strip{border-bottom:1px solid var(--color-border);}
  .trust-strip .container{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);padding:var(--space-8) var(--space-6);}
  .trust-item{display:flex;gap:14px;align-items:flex-start;}
  .trust-item .ic{width:44px;height:44px;border-radius:var(--radius-md);background:var(--color-primary-light);color:var(--color-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .trust-item b{display:block;font-size:14px;color:var(--color-text-primary);}
  .trust-item span{font-size:12.5px;color:var(--color-text-muted);}
  @media (max-width:767.98px){ .trust-strip .container{grid-template-columns:1fr;} }

  /* ---------- Como funciona ---------- */
  .how-it-works{padding:var(--space-16) 0;border-bottom:1px solid var(--color-border);}
  @media (max-width:991.98px){ .how-it-works{padding:var(--space-12) 0;} }
  @media (max-width:575.98px){ .how-it-works{padding:var(--space-10) 0;} }
  .section-head{text-align:center;max-width:560px;margin:0 auto var(--space-10);}
  .section-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);font-weight:800;margin-bottom:10px;}
  .section-head h2{font-size:clamp(22px,4vw + 6px,34px);}
  .section-head p{margin:10px 0 0;color:var(--color-text-secondary);font-size:15px;}
  .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
  .how-card{background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);position:relative;}
  .how-num{width:36px;height:36px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;margin-bottom:var(--space-4);}
  .how-card h3{font-size:17px;margin-bottom:6px;}
  .how-card p{margin:0;font-size:13.5px;color:var(--color-text-secondary);}
  @media (max-width:767.98px){ .how-grid{grid-template-columns:1fr;} }

  /* ---------- Category highlight cards ---------- */

  /* ---------- Catálogo ---------- */
  .catalog{padding:var(--space-16) 0;}
  @media (max-width:991.98px){ .catalog{padding:var(--space-12) 0;} }
  @media (max-width:575.98px){ .catalog{padding:var(--space-10) 0;} }
  .catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap;}
  .tab-row{display:flex;gap:8px;flex-wrap:wrap;}
  @media (max-width:767.98px){
    .tab-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--space-4));padding-left:var(--space-4);padding-right:var(--space-4);}
    .tab-row::-webkit-scrollbar{display:none;}
    .tab-chip{flex-shrink:0;white-space:nowrap;}
  }
  .tab-chip{padding:9px 16px;border-radius:var(--radius-pill);border:1px solid var(--color-border);font-size:13px;font-weight:700;color:var(--color-text-secondary);background:#fff;transition:all .18s var(--ease);}
  .tab-chip:hover{border-color:var(--color-primary);color:var(--color-primary);}
  .tab-chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
  .search-box{display:flex;align-items:center;gap:8px;background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:9px 16px;min-width:220px;}
  @media (max-width:575.98px){ .search-box{min-width:0;width:100%;} }
  .search-box svg{color:var(--color-text-muted);flex-shrink:0;}
  .search-box input{background:none;border:none;font-size:13.5px;width:100%;color:var(--color-text-primary);}
  .search-box input:focus{outline:none;}
  .result-count{font-size:13px;color:var(--color-text-muted);margin-bottom:var(--space-5);}

  .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--space-6);}
  .product-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);display:flex;flex-direction:column;transition:box-shadow .2s var(--ease), transform .2s var(--ease);position:relative;cursor:pointer;}
  .product-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px);}
  .product-media{aspect-ratio:1/1;border-radius:var(--radius-sm);margin-bottom:var(--space-4);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--color-bg-soft);}
  .product-media svg{width:54%;height:54%;}
  .product-media img{width:100%;height:100%;object-fit:cover;padding:0;}
  .badge-off{position:absolute;top:10px;left:10px;background:var(--color-primary);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:4px 9px;border-radius:var(--radius-pill);}
  .badge-new{position:absolute;top:10px;right:10px;background:var(--color-gold);color:#F7EFE8;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:var(--radius-pill);}
  .product-cat{font-size:11px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;}
  .product-name{font-weight:700;font-size:14.5px;margin-top:4px;color:var(--color-text-primary);}
  .product-rating{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:12px;color:var(--color-text-muted);}
  .product-rating .star{color:var(--color-gold);}
  .product-footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-4);}
  .product-price{display:flex;flex-direction:column;}
  .product-price b{font-family:var(--font-display);font-size:18px;color:var(--color-primary);}
  .product-price s{font-size:11.5px;color:var(--color-text-muted);font-weight:600;}
  .add-btn{width:38px;height:38px;border-radius:var(--radius-pill);border:1.5px solid var(--color-primary);background:#fff;color:var(--color-primary);display:flex;align-items:center;justify-content:center;transition:all .18s var(--ease);flex-shrink:0;}
  .add-btn:hover, .add-btn.in-cart{background:var(--color-primary);color:#fff;}
  .empty-result{grid-column:1/-1;text-align:center;padding:var(--space-16) 0;color:var(--color-text-muted);}

  /* ---------- Flash offer ---------- */

  /* ---------- Depoimentos ---------- */
  .testimonials{padding:var(--space-16) 0;}
  @media (max-width:991.98px){ .testimonials{padding:var(--space-12) 0;} }
  @media (max-width:575.98px){ .testimonials{padding:var(--space-10) 0;} }
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
  .testi-card{background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);}
  .testi-stars{color:var(--color-gold);font-size:13px;margin-bottom:var(--space-3);}
  .testi-card p{margin:0 0 var(--space-5);font-size:14px;color:var(--color-text-secondary);line-height:1.6;}
  .testi-person{display:flex;align-items:center;gap:12px;}
  .testi-avatar{width:38px;height:38px;border-radius:50%;background:var(--color-primary);color:var(--color-gold);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;}
  .testi-person b{display:block;font-size:13.5px;}
  .testi-person span{font-size:11.5px;color:var(--color-text-muted);}
  @media (max-width:767.98px){ .testi-grid{grid-template-columns:1fr;} }

  /* ---------- Instagram ---------- */

  /* ---------- FAQ ---------- */
  .faq{padding:var(--space-16) var(--space-6);max-width:760px;margin:0 auto;box-sizing:border-box;}
  @media (max-width:767.98px){ .faq{padding:var(--space-12) var(--space-4);} }
  @media (max-width:575.98px){ .faq{padding:var(--space-10) var(--space-4);} }
  .faq-item{border-bottom:1px solid var(--color-border);}
  .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--space-5) 0;background:none;border:none;text-align:left;font-size:15.5px;font-weight:700;color:var(--color-text-primary);}
  .faq-q svg{transition:transform .25s var(--ease);color:var(--color-primary);flex-shrink:0;}
  .faq-item.open .faq-q svg{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .28s var(--ease);}
  .faq-item.open .faq-a{max-height:200px;}
  .faq-a p{margin:0 0 var(--space-5);color:var(--color-text-secondary);font-size:14px;line-height:1.6;max-width:64ch;}

  /* ---------- WhatsApp VIP CTA ---------- */
  .vip-cta{padding:var(--space-16) 0;}
  @media (max-width:991.98px){ .vip-cta{padding:var(--space-12) 0;} }
  @media (max-width:575.98px){ .vip-cta{padding:var(--space-10) 0;} }
  .vip-box{background:var(--color-primary);border-radius:var(--radius-lg);padding:var(--space-10) var(--space-10);display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap;color:#fff;position:relative;overflow:hidden;}
  .vip-box::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 500px 300px at 100% 0%, rgba(var(--color-gold-rgb),.22), transparent 60%);}
  .vip-box h2{position:relative;font-size:clamp(19px,2.4vw + 8px,26px);color:#fff;max-width:22ch;}
  .vip-box p{position:relative;color:#B4ADA4;font-size:14px;margin-top:8px;max-width:44ch;}
  .vip-box .btn{position:relative;}
  @media (max-width:575.98px){ .vip-box{padding:var(--space-8) var(--space-6);} .vip-box .btn{width:100%;} }

  /* ---------- Footer ---------- */
  footer.site{background:var(--color-primary-deep);color:#B4ADA4;padding:var(--space-16) 0 var(--space-8);}
  @media (max-width:991.98px){ footer.site{padding:var(--space-12) 0 var(--space-6);} }
  @media (max-width:575.98px){ footer.site{padding:var(--space-10) 0 var(--space-6);} }
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-8);}
  .footer-grid h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-gold);margin:0 0 var(--space-4);}
  .footer-grid a{display:block;font-size:13.5px;color:#B4ADA4;margin-bottom:10px;}
  .footer-grid a:hover{color:var(--color-gold);}
  .footer-bottom{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#8B8477;flex-wrap:wrap;gap:8px;}
  .footer-bar{background:var(--color-gold);color:#F7EFE8;text-align:center;font-size:12px;font-weight:700;padding:10px 0;}
  @media (max-width:767.98px){ .footer-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:575.98px){ .footer-grid{grid-template-columns:1fr;} }

  /* ---------- Floating bar / drawer / toast (unchanged mechanics) ---------- */
  .floating-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--color-border);box-shadow:0 -8px 24px rgba(0,0,0,.06);padding:var(--space-3) var(--space-4);display:none;align-items:center;justify-content:space-between;gap:var(--space-3);transform:translateY(100%);transition:transform .3s var(--ease);}
  .floating-bar.visible{transform:translateY(0);}
  @media (max-width:991.98px){ .floating-bar{display:flex;} body{padding-bottom:72px;} }
  .floating-bar .info{font-size:13px;color:var(--color-text-secondary);}
  .floating-bar .info b{color:var(--color-primary);font-family:var(--font-display);font-size:16px;}

  .overlay{position:fixed;inset:0;background:rgba(15,20,17,.5);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);}
  .overlay.open{opacity:1;pointer-events:auto;}
  .drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;border-left:1px solid var(--color-border);z-index:61;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s var(--ease);}
  .drawer.open{transform:translateX(0);}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);}
  .drawer-head h3{font-size:19px;}
  .drawer-close{background:none;border:none;color:var(--color-text-secondary);padding:8px;margin:-8px;display:flex;}
  @media (pointer:coarse){ .drawer-close{padding:11px;margin:-11px;} }
  .drawer-close:hover{color:var(--color-primary);}
  .drawer-body{flex:1;overflow-y:auto;padding:var(--space-5) var(--space-6);}
  .drawer-empty{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--color-text-muted);padding:var(--space-16) 0;gap:var(--space-3);}
  .drawer-empty svg{color:var(--color-border);}
  .cart-line{display:flex;gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border-soft);}
  .cart-line-media{width:60px;height:60px;border-radius:var(--radius-sm);flex-shrink:0;background:var(--color-bg-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .cart-line-media svg{width:60%;height:60%;}
  .cart-line-media img{width:100%;height:100%;object-fit:cover;padding:0;}
  .cart-line-info{flex:1;min-width:0;}
  .cart-line-info .name{font-weight:700;font-size:13.5px;}
  .cart-line-info .cat{font-size:11px;color:var(--color-text-muted);}
  .cart-line-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
  .qty-stepper{display:flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-pill);}
  .qty-stepper button{width:26px;height:26px;background:none;border:none;color:var(--color-text-primary);font-size:15px;}
  /* Alvo de toque: detecta o dispositivo (dedo/touch), não a largura da tela.
     Um tablet ou notebook touchscreen também precisa de alvo de 44px, mesmo com
     janela larga — e não faz sentido crescer o botão só porque a janela do
     desktop está estreita. Ver design-system.html > Alvos de toque. */
  @media (pointer:coarse){
    .add-btn{width:44px;height:44px;}
    .qty-stepper button{width:44px;height:44px;font-size:18px;}
    .icon-btn{width:44px;height:44px;}
    .nav-toggle{width:44px;height:44px;}
  }
  .qty-stepper span{min-width:20px;text-align:center;font-size:13px;font-weight:700;}
  .cart-line-price{font-family:var(--font-display);font-size:14.5px;color:var(--color-primary);}
  .remove-line{background:none;border:none;color:var(--color-text-muted);font-size:11.5px;text-decoration:underline;padding:0;margin-top:6px;}
  .remove-line:hover{color:#b3463f;}
  .drawer-footer{padding:var(--space-5) var(--space-6);border-top:1px solid var(--color-border);}
  .drawer-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-4);}
  .drawer-total-row span{font-size:13px;color:var(--color-text-muted);}
  .drawer-total-row b{font-family:var(--font-display);font-size:24px;color:var(--color-text-primary);}
  .drawer-note{font-size:11.5px;color:var(--color-text-muted);margin-top:var(--space-3);line-height:1.5;}
  .btn-whatsapp{background:var(--color-whatsapp);color:#fff;}
  .btn-whatsapp:hover{background:#359a4c;}

  .toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--color-primary-deep);color:#fff;padding:12px 20px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;box-shadow:var(--shadow-pop);z-index:70;opacity:0;pointer-events:none;transition:all .28s var(--ease);}
  .toast.show{opacity:1;transform:translate(-50%,0);}

  /* ---------- Modal de detalhe do produto ---------- */
  .product-modal{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;padding:var(--space-8);opacity:0;pointer-events:none;transition:opacity .25s var(--ease);}
  .product-modal.open{opacity:1;pointer-events:auto;}
  .pm-card{background:#fff;border-radius:var(--radius-lg);max-width:920px;width:100%;max-height:88vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-pop);}
  @media (max-width:767.98px){
    .product-modal{padding:0;align-items:flex-end;}
    .pm-card{max-width:none;width:100%;max-height:100dvh;height:100dvh;border-radius:0;}
  }
  .pm-close-wrap{position:sticky;top:0;height:0;display:flex;justify-content:flex-end;pointer-events:none;z-index:3;}
  .pm-close{pointer-events:auto;margin:var(--space-4) var(--space-4) 0 0;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.92);box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;color:var(--color-text-primary);}
  @media (pointer:coarse){ .pm-close{width:44px;height:44px;} }
  .pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);padding:var(--space-8);}
  @media (max-width:767.98px){ .pm-grid{grid-template-columns:1fr;gap:var(--space-5);padding:var(--space-5);} }
  .pm-media{aspect-ratio:1/1;border-radius:var(--radius-md);background:var(--color-bg-soft);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
  .pm-media svg{width:44%;height:44%;}
  .pm-media img{width:100%;height:100%;object-fit:cover;padding:0;}
  .pm-media .badge-new{top:10px;left:10px;right:auto;} /* o canto direito é reservado pro botão de fechar */
  .pm-cat{font-size:11.5px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;}
  .pm-name{font-size:clamp(20px,3vw + 8px,28px);margin:6px 0 0;font-family:var(--font-display);font-weight:700;}
  .pm-rating{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:13.5px;color:var(--color-text-secondary);}
  .pm-rating .star{color:var(--color-gold);}
  .pm-price-row{display:flex;align-items:baseline;gap:10px;margin-top:var(--space-5);flex-wrap:wrap;}
  .pm-price-row b{font-family:var(--font-display);font-size:26px;color:var(--color-primary);}
  .pm-price-row s{font-size:14px;color:var(--color-text-muted);font-weight:600;}
  .pm-price-row .pm-off{font-size:11.5px;font-weight:800;color:#fff;background:var(--color-primary);padding:3px 9px;border-radius:var(--radius-pill);}
  .pm-desc{margin-top:var(--space-5);font-size:14.5px;color:var(--color-text-secondary);line-height:1.6;}
  .pm-actions{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-6);flex-wrap:wrap;}
  .pm-actions .qty-stepper button{width:36px;height:36px;}
  @media (pointer:coarse){ .pm-actions .qty-stepper button{width:44px;height:44px;} }
  .pm-actions .btn{flex:1 1 auto;}
  .pm-note{margin-top:var(--space-4);font-size:12px;color:var(--color-text-muted);}
  .pm-related{padding:0 var(--space-8) var(--space-8);}
  @media (max-width:767.98px){ .pm-related{padding:0 var(--space-5) var(--space-8);} }
  .pm-related h4{font-size:15px;margin-bottom:var(--space-4);}
  .pm-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-4);}

  /* ==========================================================================
     IDENTIDADE (direção VELORA: bordô, quase-preto e creme; Jost em família única)
     Bloco no fim do arquivo de propósito: sobrescreve as regras base acima.
     Só mexe em cor, forma, peso e espaçamento de letra. Não toca em padding
     nem em font-size, que são o que os @media deste arquivo controlam, pra não
     vencer as regras responsivas por ordem de código.
     ========================================================================== */

  /* Tipografia: Jost pede peso mais leve e mais respiro entre letras que a Poppins. */
  h1,h2,h3{font-weight:500;letter-spacing:.004em;}
  .hero h1{font-weight:500;letter-spacing:-.002em;}
  .hero-eyebrow,.section-eyebrow{font-weight:400;letter-spacing:.24em;}
  .hero-eyebrow::before{height:1px;width:26px;}
  .brand-name{font-weight:500;letter-spacing:.13em;text-transform:uppercase;}
  .brand-tag{letter-spacing:.24em;font-weight:300;}
  nav.main-nav a,.mobile-nav a{letter-spacing:.13em;text-transform:uppercase;font-weight:400;}
  .btn{font-weight:500;letter-spacing:.16em;text-transform:uppercase;}
  .tab-chip{letter-spacing:.1em;text-transform:uppercase;font-weight:400;}
  .hero-stat span,.trust-item span{letter-spacing:.16em;text-transform:uppercase;}
  .hero-stat b,.product-price b,.pm-price-row b,.cart-line-price{font-weight:500;letter-spacing:.01em;}
  .product-brand,.pm-cat{letter-spacing:.2em;text-transform:uppercase;}
  .footer-grid h4{letter-spacing:.2em;font-weight:400;}
  .badge-off,.badge-new,.list-count{font-weight:500;letter-spacing:.1em;}

  /* Hero: base quase-preta com brilhos bordô, em vez do degradê verde. */
  .hero{background:var(--color-primary-deep);border-bottom:none;}
  /* O brilho bordô saiu daqui e virou camada do .hero-scrim, sobre o vídeo. */
  .hero-inner{position:relative;z-index:1;}
  .hero .lede{color:#ABA298;}
  .hero-stats{border-top:1px solid rgba(247,243,236,.14);}
  .hero .btn-outline{border-color:rgba(247,243,236,.32);color:#F7F3EC;}

  /* O CTA principal era dourado. Agora é bordô sólido, que é a cor da marca. */
  .btn-gold{background:var(--color-primary);color:#F7EFE8;border:1px solid var(--color-primary);}
  .btn-gold:hover{background:var(--color-primary-deep);border-color:var(--color-primary-deep);}
  /* O contador fica DENTRO do botão bordô, então precisa inverter pra ter contraste. */
  .list-count{background:#F7EFE8;color:var(--color-primary);font-weight:500;}
  .footer-bar{background:var(--color-primary);color:#F7EFE8;font-weight:400;letter-spacing:.14em;text-transform:uppercase;}

  /* Forma: nada de círculo nem de sombra flutuante. Retângulo e traço de 1px. */
  .brand-mark,.how-num,.testi-avatar,.pm-close,.drawer-close,.icon-btn,.nav-toggle{border-radius:0;}
  .brand-mark{background:transparent;border:1px solid var(--color-primary);color:var(--color-primary);}
  .how-num{background:var(--color-primary);color:#F7EFE8;font-weight:500;}
  .testi-avatar{background:var(--color-primary-deep);color:var(--color-gold);font-weight:500;}
  .trust-item .ic{border-radius:0;border:1px solid var(--color-border);background:transparent;color:var(--color-primary);}

  /* Cartão de produto: fica no lugar, o que muda é o traço. Sem levitar. */
  .product-card{box-shadow:none;border:1px solid var(--color-border);}
  .product-card:hover{transform:none;box-shadow:none;border-color:var(--color-text-primary);}
  .product-media, .pm-media, .cart-line-media{background:var(--color-primary-deep);}
  .add-btn{border-width:1px;}

  /* Superfícies escuras herdaram texto esverdeado; agora é cinza quente. */
  .topbar{background:var(--color-primary-deep);}
  footer.site{background:var(--color-primary-deep);}
  .vip-box{background:var(--color-primary-deep);}

  /* ==========================================================================
     AJUSTES PEDIDOS EM 13/08/2026 (depois dos prints do Matheus)
     Este bloco fica DEPOIS do bloco IDENTIDADE de propósito: aqui há regras
     responsivas que precisam vencer as de identidade, e quem vem depois ganha.
     ========================================================================== */

  /* O número do "como funciona" ficava alto e à esquerda dentro do quadrado.
     Com o canto reto isso ficou evidente. `place-items` centraliza nos dois
     eixos, `line-height:1` tira a folga vertical da fonte e o letter-spacing
     zerado tira o espaço que sobra à direita de um caractere só. */
  .how-num{display:grid;place-items:center;line-height:1;letter-spacing:0;text-indent:0;}

  /* Os dois indicadores abaixo dos botões do hero empilhavam no celular.
     Agora dividem a linha, com tipo menor pra caber sem apertar. */
  @media (max-width:575.98px){
    .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:start;}
    .hero-stat b{font-size:20px;}
    .hero-stat span{font-size:9px;letter-spacing:.07em;line-height:1.35;white-space:nowrap;}
  }
  @media (max-width:359.98px){
    .hero-stat b{font-size:18px;}
    .hero-stat span{font-size:8.5px;letter-spacing:.06em;}
  }


  /* ==========================================================================
     VÍDEO DE FUNDO DO HERO (13/08/2026)
     Três camadas empilhadas: vídeo, véu de escurecimento, conteúdo.
     ========================================================================== */

  .hero-media{position:absolute;inset:0;overflow:hidden;z-index:0;
    background:var(--color-primary-deep) center center / cover no-repeat;
    background-image:url("assets/hero-poster.jpg");}
  /* O pôster é o primeiro quadro do próprio vídeo, então não há salto quando ele entra.
     Vem por CSS pra cada largura já pedir o arquivo certo, sem esperar o JS. */
  @media (max-width:767.98px){ .hero-media{background-image:url("assets/hero-poster-mobile.jpg");} }

  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

  /* O véu. No desktop escurece mais à esquerda, que é onde o texto vive, e libera
     a direita, onde os produtos aparecem. O bordô entra por cima pra não perder a marca. */
  .hero-scrim{position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(120% 85% at 6% 0%, rgba(97,13,31,.55), transparent 60%),
      radial-gradient(90% 70% at 100% 100%, rgba(97,13,31,.35), transparent 62%),
      linear-gradient(90deg, rgba(10,6,8,.94) 0%, rgba(10,6,8,.86) 32%, rgba(10,6,8,.55) 62%, rgba(10,6,8,.34) 100%),
      linear-gradient(180deg, rgba(10,6,8,.5) 0%, rgba(10,6,8,.12) 42%, rgba(10,6,8,.55) 100%);}

  /* No celular o texto cobre a largura toda, então o véu tem que ser parelho,
     e mais forte, porque a tela costuma ser vista no sol. */
  @media (max-width:767.98px){
    .hero-scrim{background:
      radial-gradient(120% 60% at 10% 0%, rgba(97,13,31,.5), transparent 62%),
      linear-gradient(180deg, rgba(10,6,8,.9) 0%, rgba(10,6,8,.78) 38%, rgba(10,6,8,.82) 72%, rgba(10,6,8,.92) 100%);}
  }

  /* Quem pede menos movimento no sistema não recebe vídeo: o JS nem define o src,
     e aqui a caixa some pra não sobrar um elemento vazio. */
  @media (prefers-reduced-motion: reduce){ .hero-video{display:none;} }

  /* ==========================================================================
     HERO MAIOR NO DESKTOP (13/08/2026)
     Pedido: dar destaque ao vídeo, que é a área mais nobre da página.
     Passa de 568px fixos para 78% da altura da janela, com piso de 600px e
     teto de 880px. O teto existe pra não virar um vazio em monitor muito alto,
     e os 78% deixam a faixa de confiança aparecendo por baixo, que é o que
     convida a rolar. Celular e tablet não mudam.
     ========================================================================== */
  @media (min-width:992px){
    .hero-inner{min-height:clamp(600px, 78vh, 880px);}
  }

  /* Medi o contraste do texto contra 11 quadros do loop, e não só contra o pôster.
     O rótulo dos indicadores reprovava no celular (3,88 contra os 4,5 exigidos pela
     WCAG AA) num quadro claro do respingo de água. Duas correções somadas: */
  .hero-stat span{color:#B3ADA4;}                    /* rótulo mais claro que o cinza padrão */
  @media (max-width:767.98px){
    .hero-scrim{background:
      radial-gradient(120% 60% at 10% 0%, rgba(97,13,31,.5), transparent 62%),
      linear-gradient(180deg, rgba(10,6,8,.9) 0%, rgba(10,6,8,.8) 38%, rgba(10,6,8,.88) 70%, rgba(10,6,8,.95) 100%);}
  }

  /* ==========================================================================
     GRID DE PRODUTOS NO CELULAR: DUAS COLUNAS (13/08/2026)
     O grid usava minmax(230px,1fr), e em 390px só cabia uma coluna, então cada
     card tomava a tela inteira e o cliente via um produto por rolagem. Duas
     colunas é o padrão do varejo brasileiro e mostra quatro produtos por tela.
     Bloco no fim do arquivo porque precisa vencer as regras base acima.
     ========================================================================== */
  @media (max-width:575.98px){
    .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}

    /* A foto encosta na borda do card, como nas varejistas. O texto ganha o
       respiro por dentro, elemento por elemento. */
    .product-card{padding:0 0 10px;}
    .product-media{margin-bottom:8px;border-radius:0;}
    .product-cat,.product-name,.product-rating,.product-footer{padding-left:10px;padding-right:10px;}

    .product-cat{font-size:9px;letter-spacing:.12em;}
    /* Três linhas no máximo, com reticências, e altura reservada mesmo quando o
       nome é curto: sem isso os dois cards da mesma fileira desalinham. */
    .product-name{font-size:12px;line-height:1.35;margin-top:2px;min-height:calc(12px * 1.35 * 3);
      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
    .product-rating{font-size:10px;margin-top:3px;}
    .product-price b{font-size:15px;}
    .product-price s{font-size:10.5px;}

    /* Preço e botão empilhados. Numa tela de 320px o card tem 139px, e preço
       mais botão de 44px na mesma linha não cabem sem estourar. Empilhar
       preserva o alvo de toque de 44px, que é o mínimo acessível. */
    .product-footer{flex-direction:column;align-items:stretch;gap:8px;margin-top:10px;}
    .add-btn{width:100%;}
    .add-btn::after{content:"Adicionar";font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-left:7px;}
  }