:root{
    --bg-primary:#0D0D0D; --bg-surface:#161616; --bg-surface-alt:#2A2A2A;
    --text-primary:#FFFFFF; --text-secondary:#A8A8A8; --text-muted:#7A7A7A; /* ajustado de #6E6E6E para atingir contraste AA (4.5:1) sobre --bg-primary */
    --accent:#B7FF00; --accent-pressed:#9FE000; --border:#2A2A2A;
    --error:#FF5C5C;
    --ease:cubic-bezier(0.22,1,0.36,1);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-primary); color:var(--text-primary);
    font-family:'Inter',system-ui,sans-serif; line-height:1.6; overflow-x:hidden;
  }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; }
  ::selection{ background:var(--accent); color:var(--bg-primary); }
  :focus-visible{ outline:1px solid var(--accent); outline-offset:2px; }

  .photo{ position:relative; overflow:hidden; background:#000; }
  .photo::before{
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10), transparent 45%),
      radial-gradient(circle at 75% 80%, rgba(183,255,0,var(--gtint,0.06)), transparent 50%),
      linear-gradient(160deg, #1c1c1c 0%, #060606 60%, #000 100%);
    transition:transform 1s var(--ease);
  }
  .photo:hover::before{ transform:scale(1.05); }

  /* Fotografia real do produto — quando presente, cobre o gradiente de fundo.
     z-index acima do ::before (gradiente) e abaixo do ::after (grão). */
  .photo img.real-photo{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
    transition:transform .8s var(--ease);
  }
  .photo:hover img.real-photo{ transform:scale(1.04); }

  /* Marca-d'água do logo oficial — usada em seções grandes (Hero, Lifestyle, Portal)
     enquanto a fotografia oficial da marca não está disponível. Elemento real
     (não pseudo-elemento) para controlar a opacidade de forma independente do
     gradiente de fundo. Nunca redesenha o logo — apenas exibe o arquivo original,
     centralizado e em baixa opacidade, como recurso editorial discreto. */
  .photo-mark{
    position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center;
    pointer-events:none;
  }
  .photo-mark img{ width:32%; max-width:220px; height:auto; opacity:.07; }
  /* Textura de grão sutil — dá acabamento "editorial/filme" aos placeholders,
     em vez de gradientes CSS lisos. Aplica-se a todo .photo do site. */
  .photo::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    opacity:.05; mix-blend-mode:overlay;
  }

  /* Camada escura para legibilidade do texto sobre fotografia real em seções
     full-bleed (Hero, Lifestyle) — elemento real, irmão do <img class="real-photo">
     dentro do .photo. */
  .photo-overlay{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(0deg, rgba(13,13,13,.85) 0%, rgba(13,13,13,.35) 45%, rgba(13,13,13,.05) 70%);
  }

  .view{ display:none; }
  .view.active{ display:block; }

  .section{ padding:140px 96px; }
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  .btn{ cursor:pointer; border-radius:2px; font-size:14px; transition:all .3s var(--ease); }
  .btn-primary{ background:var(--accent); color:var(--bg-primary); font-weight:500; padding:16px 32px; border:none; }
  .btn-primary:hover{ background:var(--accent-pressed); transform:translateY(-1px); }
  .btn-primary:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
  .btn-secondary{ background:transparent; color:var(--text-primary); border:1px solid var(--border); padding:16px 32px; }
  .btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }
  .btn-link{ background:none; border:none; color:var(--text-primary); padding:0; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:5px; font-size:13px; letter-spacing:.03em; text-transform:uppercase; cursor:pointer; }
  .btn-link:hover{ border-color:var(--accent); color:var(--accent); }

  label{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:10px; }
  input, select, textarea{
    width:100%; background:var(--bg-surface); border:1px solid var(--border); color:var(--text-primary);
    padding:15px 16px; font-size:14px; border-radius:2px; font-family:inherit; transition:border-color .25s var(--ease);
  }
  input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); }
  input::placeholder, textarea::placeholder{ color:var(--text-muted); }
  .field{ margin-bottom:24px; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .radio-card{
    display:flex; align-items:center; gap:14px; border:1px solid var(--border); border-radius:2px;
    padding:16px 18px; cursor:pointer; transition:border-color .25s var(--ease); margin-bottom:12px;
  }
  .radio-card:hover{ border-color:var(--text-secondary); }
  .radio-card.selected{ border-color:var(--accent); }
  .radio-card .dot{ width:16px; height:16px; border-radius:50%; border:1px solid var(--text-secondary); flex-shrink:0; position:relative; }
  .radio-card.selected .dot{ border-color:var(--accent); }
  .radio-card.selected .dot::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--accent); }
  .radio-card .rc-info{ flex:1; }
  .radio-card .rc-name{ font-size:14px; font-weight:500; }
  .radio-card .rc-sub{ font-size:12px; color:var(--text-secondary); }
  .radio-card .rc-price{ font-size:13px; color:var(--text-secondary); }

  /* ===== PORTAL ===== */
  #view-portal .portal-page{ height:100vh; display:flex; flex-direction:column; }
  .portal-header{ height:96px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); }
  /* .portal-header .logo (texto) removido — logotipo agora é imagem oficial (.brand-logo--portal) */
  .portal-body{ position:relative; flex:1; display:flex; }
  .portal-divider{ position:absolute; top:0; bottom:0; left:50%; width:1px; background:#3D3D3D; z-index:2; }
  .portal-half{ flex:1; position:relative; display:flex; align-items:flex-end; justify-content:center; padding-bottom:64px; overflow:hidden; cursor:pointer; transition:flex .5s var(--ease); }
  .portal-half:hover{ flex:1.15; }
  .portal-half .photo{ position:absolute; inset:0; }
  .portal-label{ position:relative; z-index:2; text-align:center; }
  .portal-label h2{ font-size:44px; font-weight:300; margin-bottom:16px; }
  .portal-label span{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
  .portal-caption{ height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-top:1px solid var(--border); }
  .portal-caption span{ font-size:11px; letter-spacing:.05em; color:var(--text-muted); }

  /* ===== HEADER (site) ===== */
  header.site{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; justify-content:space-between; align-items:center;
    padding:28px 96px; transition:background .4s var(--ease), padding .4s var(--ease);
  }
  header.site.scrolled{ background:rgba(13,13,13,.9); backdrop-filter:blur(12px); padding:18px 96px; border-bottom:1px solid var(--border); }
  .logo{ font-size:19px; font-weight:500; letter-spacing:.15em; cursor:pointer; display:flex; align-items:center; gap:10px; }
  .logo .universe{ color:var(--text-secondary); font-weight:400; letter-spacing:.05em; font-size:13px; }

  /* Logotipo oficial NÖVA — arquivo original, apenas dimensionado via CSS (sem recorte/distorção) */
  .brand-logo{ display:block; width:auto; object-fit:contain; }
  .brand-logo--portal{ height:26px; }
  .brand-logo--header{ height:22px; }
  .brand-logo--footer{ height:28px; margin-bottom:18px; }
  nav.main{ display:flex; gap:34px; }
  nav.main a{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); position:relative; padding-bottom:4px; cursor:pointer; transition:color .3s var(--ease); }
  nav.main a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent); transition:width .35s var(--ease); }
  nav.main a:hover{ color:var(--text-primary); } nav.main a:hover::after{ width:100%; }
  .nav-right{ display:flex; gap:24px; align-items:center; font-size:12px; letter-spacing:.08em; }
  .nr-item{ display:flex; align-items:center; gap:7px; }
  .nr-icon{ display:none; flex-shrink:0; }
  .nav-right span, .nav-right a{ cursor:pointer; color:var(--text-secondary); position:relative; }
  .nav-right a.switch{ color:var(--accent); }
  .icon-badge{ position:relative; }
  .icon-badge .count{ position:absolute; top:-10px; right:-14px; background:var(--accent); color:var(--bg-primary); font-size:10px; font-weight:600; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

  /* ===== BUSCA (overlay) ===== */
  .search-overlay{
    position:fixed; inset:0; z-index:80; background:rgba(13,13,13,.96); backdrop-filter:blur(8px);
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  }
  .search-overlay.open{ opacity:1; pointer-events:all; }
  .search-box{ max-width:720px; margin:0 auto; padding:120px 24px 0; }
  .search-input-row{ display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--border); padding-bottom:20px; color:var(--text-secondary); }
  .search-input-row input{
    flex:1; background:none; border:none; color:var(--text-primary); font-size:22px; font-weight:300;
    padding:0; font-family:inherit;
  }
  .search-input-row input:focus{ outline:none; }
  .search-input-row .cart-close{ font-size:26px; }
  .search-results{ padding:32px 0; display:flex; flex-direction:column; gap:4px; max-height:60vh; overflow-y:auto; }
  .search-result{ display:flex; gap:18px; padding:16px 8px; cursor:pointer; border-radius:2px; transition:background .2s var(--ease); align-items:center; }
  .search-result:hover{ background:var(--bg-surface); }
  .search-result .photo{ width:56px; height:72px; flex-shrink:0; }
  .search-result-info .prod-name{ margin-bottom:0; }

  /* ===== HOME ===== */
  #hero{ height:100vh; position:relative; display:flex; align-items:flex-end; }
  #hero .photo{ position:absolute; inset:0; }
  #hero .photo img.real-photo{ object-position:center 15%; }
  #hero.pos-woman .photo img.real-photo{ object-position:78% 15%; }
  #hero.pos-man .photo img.real-photo{ object-position:32% 15%; }
  /* Overlay escuro para legibilidade do texto sobre a fotografia real */
  #hero .photo-overlay{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(0deg, rgba(13,13,13,.95) 0%, rgba(13,13,13,.55) 42%, rgba(13,13,13,.15) 70%, rgba(13,13,13,.05) 100%);
  }
  #hero .hero-inner{ position:relative; z-index:2; padding:0 96px 100px; max-width:820px; }
  .eyebrow{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:28px; }
  #hero h1{ font-size:72px; font-weight:300; letter-spacing:-.02em; line-height:1.06; margin-bottom:44px; }
  .cta-row{ display:flex; gap:28px; align-items:center; }

  #sobre-home{ text-align:center; }
  #sobre-home .inner{ max-width:900px; margin:0 auto; }
  #sobre-home p.big{ font-size:36px; font-weight:300; line-height:1.45; }
  #sobre-home p.big .accent-word{ color:var(--accent); }
  #sobre-home p.support{ font-size:16px; color:var(--text-secondary); max-width:520px; margin:34px auto 0; }

  #categorias .head{ text-align:center; margin-bottom:56px; }
  #categorias h2{ font-size:42px; font-weight:300; margin-bottom:12px; }
  #categorias .sub{ font-size:14px; color:var(--text-secondary); }
  .cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--border); }
  .cat-card{ background:var(--bg-primary); position:relative; height:520px; cursor:pointer; overflow:hidden; }
  .cat-card .photo{ position:absolute; inset:0; }
  .cat-overlay{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:32px; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 55%); }
  .cat-name{ font-size:25px; font-weight:400; margin-bottom:8px; transition:transform .4s var(--ease); }
  .cat-cta{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); opacity:0; transform:translateY(8px); transition:all .4s var(--ease); }
  .cat-card:hover .cat-name{ transform:translateY(-4px); }
  .cat-card:hover .cat-cta{ opacity:1; transform:translateY(0); }

  #home-produtos .head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; }
  #home-produtos h2{ font-size:34px; font-weight:300; }

  #lifestyle{ padding:0; height:82vh; position:relative; display:flex; align-items:flex-end; }
  #lifestyle .photo{ position:absolute; inset:0; }
  #lifestyle .content{ position:relative; z-index:2; padding:0 96px 88px; max-width:540px; }
  #lifestyle h3{ font-size:36px; font-weight:300; margin-bottom:18px; }
  #lifestyle p{ color:var(--text-secondary); font-size:15px; }

  #newsletter{ text-align:center; background:var(--bg-surface); }
  #newsletter h2{ font-size:36px; font-weight:300; max-width:600px; margin:0 auto 16px; }
  #newsletter p{ color:var(--text-secondary); max-width:460px; margin:0 auto 40px; font-size:15px; }
  .form-row{ display:flex; gap:12px; max-width:440px; margin:0 auto; }
  .form-row input{ flex:1; }

  /* ===== GRID DE PRODUTOS ===== */
  .prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
  .prod-card{ cursor:pointer; position:relative; }
  .prod-card .photo{ aspect-ratio:3/4; margin-bottom:18px; }
  .prod-tag{ display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
  .prod-name{ font-size:14px; font-weight:500; margin-bottom:4px; }
  .prod-price{ font-size:13px; color:var(--text-secondary); }
  .fav-btn{
    position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; border-radius:50%;
    background:rgba(13,13,13,.55); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.15);
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .25s var(--ease);
  }
  .fav-btn:hover{ border-color:var(--accent); }
  .fav-btn svg{ width:16px; height:16px; stroke:var(--text-primary); fill:none; transition:all .2s var(--ease); }
  .fav-btn.active svg{ fill:var(--accent); stroke:var(--accent); }

  /* ===== COLEÇÃO (PLP) ===== */
  .colecao-head{ padding:160px 96px 0; }
  .colecao-head h1{ font-size:44px; font-weight:300; margin-bottom:12px; }
  .colecao-head p{ color:var(--text-secondary); font-size:14px; }
  .filter-bar{ display:flex; gap:12px; padding:40px 96px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
  .filter-pill{ padding:10px 20px; border:1px solid var(--border); border-radius:20px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; color:var(--text-secondary); transition:all .25s var(--ease); }
  .filter-pill:hover{ border-color:var(--text-secondary); color:var(--text-primary); }
  .filter-pill.active{ background:var(--accent); border-color:var(--accent); color:var(--bg-primary); font-weight:500; }
  #colecao-grid{ padding:56px 96px 140px; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
  .empty-state{ padding:80px 0; text-align:center; color:var(--text-muted); font-size:14px; grid-column:1/-1; }
  .empty-state .btn{ margin-top:20px; }

  /* ===== PDP (Produto) ===== */
  .pdp{ padding:24px 96px 56px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); gap:56px; align-items:start; max-width:1360px; margin:0 auto; }
  .pdp-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start; }
  .pdp-gallery .photo{ aspect-ratio:3/4; grid-column:span 2; }
  .pdp-gallery .photo:nth-child(2), .pdp-gallery .photo:nth-child(3){ grid-column:span 1; }
  .pdp-info-head{ display:flex; justify-content:space-between; align-items:flex-start; }
  .pdp-info .prod-tag{ margin-bottom:16px; }
  .pdp-info h1{ font-size:34px; font-weight:400; margin-bottom:14px; }
  .pdp-price{ font-size:20px; color:var(--text-secondary); margin-bottom:36px; }
  .pdp-block{ border-top:1px solid var(--border); padding:28px 0; }
  .pdp-block h4{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:16px; }
  .size-grid{ display:flex; gap:10px; flex-wrap:wrap; }
  .size-pill{ width:48px; height:48px; border:1px solid var(--border); border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; transition:all .25s var(--ease); }
  .size-pill:hover{ border-color:var(--text-secondary); }
  .size-pill.selected{ border-color:var(--accent); color:var(--accent); }

  .color-grid{ display:flex; gap:12px; flex-wrap:wrap; }
  .color-swatch{
    width:32px; height:32px; border-radius:50%; cursor:pointer; position:relative;
    border:2px solid transparent; transition:border-color .25s var(--ease);
  }
  .color-swatch::after{ content:''; position:absolute; inset:3px; border-radius:50%; border:1px solid rgba(255,255,255,.15); }
  .color-swatch.selected{ border-color:var(--accent); }

  .qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:2px; }
  .qty-stepper button{
    width:44px; height:44px; background:none; border:none; color:var(--text-primary); font-size:18px;
    cursor:pointer; transition:color .25s var(--ease);
  }
  .qty-stepper button:hover{ color:var(--accent); }
  .qty-stepper span{ width:40px; text-align:center; font-size:14px; }
  .qty-stepper--sm button{ width:28px; height:28px; font-size:14px; }
  .qty-stepper--sm span{ width:24px; font-size:12px; }
  .cart-qty-row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
  .pdp-desc{ font-size:14px; color:var(--text-secondary); line-height:1.8; }
  /* A descrição agora aceita formatação (BBCode convertido no servidor).
     Negrito precisa contrastar com o corpo, senão "Composição" some no meio
     do texto e a formatação não cumpre o que promete. */
  .pdp-desc strong{ color:var(--text-primary); font-weight:500; }
  .pdp-desc a{ color:var(--accent); }
  .pdp-desc .bb-lista{ margin:12px 0 12px 20px; }
  .pdp-desc .bb-lista li{ margin-bottom:6px; }
  .pdp-desc .bb-hr{ margin:18px 0; }
  .pdp-add{ margin-top:36px; width:100%; padding:18px; }
  .pdp-note{ font-size:12px; color:var(--text-muted); margin-top:16px; text-align:center; }
  /* Botão de favoritar. O contorno fino sumia no fundo escuro; agora tem
     fundo próprio e o coração fica cinza até ser marcado. */
  .pdp-fav{
    width:44px; height:44px; border-radius:50%; flex-shrink:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-surface); border:1px solid var(--border);
    transition:all .25s var(--ease);
  }
  .pdp-fav:hover{ border-color:var(--accent); background:var(--bg-surface-alt); }
  .pdp-fav svg{ width:19px; height:19px; stroke:var(--text-secondary); fill:none; transition:all .25s var(--ease); }
  .pdp-fav:hover svg{ stroke:var(--accent); }
  .pdp-fav.active{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
  .pdp-fav.active svg{ fill:var(--accent); stroke:var(--accent); }
  .breadcrumb{ padding:150px 96px 0; font-size:12px; color:var(--text-muted); letter-spacing:.04em; }
  .breadcrumb span{ cursor:pointer; } .breadcrumb span:hover{ color:var(--accent); }

  /* ===== FOOTER ===== */
  footer.site{ padding:96px; background:var(--bg-surface); border-top:1px solid var(--border); }
  .footer-top{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:32px; margin-bottom:80px; }
  .footer-col h4{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:22px; }
  .footer-col a{ display:block; font-size:14px; color:var(--text-secondary); margin-bottom:13px; width:fit-content; transition:color .25s var(--ease); cursor:pointer; }
  .footer-col a:hover{ color:var(--accent); }
  /* .footer-logo removido — logotipo agora é imagem oficial (.brand-logo--footer) */
  .footer-desc{ font-size:13px; color:var(--text-muted); max-width:260px; }
  .footer-bottom{ display:flex; justify-content:space-between; border-top:1px solid var(--border); padding-top:32px; font-size:12px; color:var(--text-muted); flex-wrap:wrap; gap:12px; }

  .footer-social{ display:flex; gap:14px; margin-top:22px; }
  .footer-social a{
    width:36px; height:36px; border:1px solid var(--border); border-radius:50%;
    display:flex; align-items:center; justify-content:center; transition:all .25s var(--ease);
    margin-bottom:0;
  }
  .footer-social a:hover{ border-color:var(--accent); color:var(--accent); }
  .footer-social svg{ width:16px; height:16px; fill:currentColor; }

  .whatsapp-float{
    position:fixed; bottom:28px; right:28px; z-index:60; width:56px; height:56px; border-radius:50%;
    background:#25D366; color:#0D0D0D; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,.4); transition:transform .3s var(--ease);
  }
  .whatsapp-float:hover{ transform:scale(1.08); }
  @media(max-width:960px){
    .whatsapp-float{ width:50px; height:50px; bottom:20px; right:20px; }
  }
  .footer-legal{ display:flex; gap:20px; flex-wrap:wrap; }
  .footer-legal a{ cursor:pointer; } .footer-legal a:hover{ color:var(--accent); }

  /* ===== CARRINHO (drawer) ===== */
  #cart-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:90; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
  #cart-overlay.open{ opacity:1; pointer-events:all; }
  #cart-drawer{
    position:fixed; top:0; right:0; bottom:0; width:440px; max-width:92vw; background:var(--bg-primary);
    border-left:1px solid var(--border); z-index:91; transform:translateX(100%); transition:transform .45s var(--ease);
    display:flex; flex-direction:column;
  }
  #cart-drawer.open{ transform:translateX(0); }
  .cart-head{ padding:32px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); }
  .cart-head h3{ font-size:16px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; }
  .cart-close{ cursor:pointer; font-size:22px; color:var(--text-secondary); background:none; border:none; line-height:1; }
  .cart-close:hover{ color:var(--accent); }
  .cart-items{ flex:1; overflow-y:auto; padding:24px 32px; }
  .cart-item{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--border); }
  .cart-item .photo{ width:72px; height:96px; flex-shrink:0; }
  .cart-item-info{ flex:1; }
  .cart-item-info .name{ font-size:14px; font-weight:500; margin-bottom:4px; }
  .cart-item-info .meta{ font-size:12px; color:var(--text-secondary); margin-bottom:8px; }
  .cart-item-info .price{ font-size:13px; color:var(--text-secondary); }
  .cart-remove{ background:none; border:none; color:var(--text-muted); font-size:11px; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; padding:0; }
  .cart-remove:hover{ color:var(--accent); }
  .cart-empty{ text-align:center; color:var(--text-muted); padding:80px 0; font-size:14px; }
  .cart-footer{ padding:28px 32px; border-top:1px solid var(--border); }
  .cart-total{ display:flex; justify-content:space-between; font-size:15px; margin-bottom:20px; }
  .cart-total strong{ font-weight:500; }
  .toast{
    position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px); z-index:99;
    background:var(--accent); color:var(--bg-primary); padding:14px 28px; border-radius:2px; font-size:13px; font-weight:500;
    opacity:0; transition:all .4s var(--ease); pointer-events:none;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ===== CHECKOUT ===== */
  .checkout-wrap{ padding:150px 96px 140px; display:grid; grid-template-columns:1.4fr 1fr; gap:80px; align-items:start; }
  .checkout-title{ font-size:32px; font-weight:300; margin-bottom:8px; }
  .checkout-steps{ font-size:12px; color:var(--text-secondary); margin-bottom:48px; letter-spacing:.04em; }
  .checkout-section{ margin-bottom:48px; }
  .checkout-section h3{ font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:24px; display:flex; align-items:center; gap:10px; }
  .checkout-section h3 .num{ width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--bg-primary); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; }
  .summary-card{ background:var(--bg-surface); border:1px solid var(--border); padding:32px; border-radius:2px; position:sticky; top:120px; }
  .summary-card h4{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:24px; }
  .summary-item{ display:flex; gap:14px; margin-bottom:18px; }
  .summary-item .photo{ width:56px; height:72px; flex-shrink:0; }
  .summary-item-info{ flex:1; font-size:13px; }
  .summary-item-info .n{ font-weight:500; margin-bottom:2px; }
  .summary-item-info .m{ color:var(--text-muted); font-size:12px; }
  .summary-line{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-secondary); padding:10px 0; border-top:1px solid var(--border); }
  .summary-line.total{ color:var(--text-primary); font-size:16px; font-weight:500; border-top:1px solid var(--border); padding-top:18px; margin-top:8px; }
  .coupon-row{ display:flex; gap:8px; margin:20px 0; }
  .coupon-feedback{ font-size:12px; margin:-12px 0 16px; min-height:16px; }
  .coupon-feedback.success{ color:var(--accent); }
  .coupon-feedback.error{ color:var(--error); }
  .coupon-row input{ flex:1; padding:12px 14px; font-size:13px; }
  .coupon-row button{ padding:12px 18px; font-size:12px; }

  /* ===== CONFIRMAÇÃO ===== */
  .confirm-wrap{ padding:220px 96px; text-align:center; max-width:600px; margin:0 auto; }
  .confirm-check{ width:64px; height:64px; border-radius:50%; border:1px solid var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 32px; }
  .confirm-wrap h1{ font-size:32px; font-weight:300; margin-bottom:16px; }
  .confirm-wrap p{ color:var(--text-secondary); font-size:15px; margin-bottom:8px; }
  .confirm-order{ font-size:13px; color:var(--text-muted); margin:24px 0 40px; letter-spacing:.05em; }
  .confirm-actions{ display:flex; gap:20px; justify-content:center; }

  /* ===== CONTA ===== */
  .auth-wrap{ padding:180px 96px; max-width:420px; margin:0 auto; text-align:center; }
  .auth-wrap h1{ font-size:30px; font-weight:300; margin-bottom:12px; }
  .auth-wrap > p{ color:var(--text-secondary); font-size:14px; margin-bottom:48px; }
  .auth-form{ text-align:left; }
  .auth-toggle{ margin-top:28px; font-size:13px; color:var(--text-secondary); }
  .auth-forgot{ text-align:right; font-size:12px; color:var(--text-secondary); cursor:pointer; margin:-12px 0 24px; transition:color .25s var(--ease); }
  .auth-forgot:hover{ color:var(--accent); }
  .auth-toggle span{ color:var(--accent); cursor:pointer; }

  .account-wrap{ padding:150px 96px 140px; display:grid; grid-template-columns:260px 1fr; gap:64px; }
  .account-side a{ display:block; font-size:14px; color:var(--text-secondary); padding:14px 0; border-bottom:1px solid var(--border); cursor:pointer; transition:color .25s var(--ease); }
  .account-side a:hover, .account-side a.active{ color:var(--accent); }
  .account-main h2{ font-size:26px; font-weight:300; margin-bottom:32px; }
  .order-row{ display:flex; justify-content:space-between; align-items:center; padding:24px 0; border-bottom:1px solid var(--border); font-size:14px; }
  .order-row .oid{ color:var(--text-secondary); font-size:12px; margin-top:4px; }
  .status-pill{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:6px 14px; border-radius:20px; border:1px solid var(--border); color:var(--text-secondary); }
  .status-pill.delivered{ border-color:var(--accent); color:var(--accent); }

  /* ===== INSTITUCIONAIS ===== */
  .inst-hero{ padding:180px 96px 80px; max-width:900px; }
  .inst-hero .eyebrow{ margin-bottom:20px; }
  .inst-hero h1{ font-size:48px; font-weight:300; line-height:1.15; }
  .inst-body{ padding:0 96px 140px; max-width:900px; }
  .inst-body p{ color:var(--text-secondary); font-size:16px; line-height:1.9; margin-bottom:24px; }
  .inst-body h3{ font-size:20px; font-weight:500; margin:44px 0 16px; }
  .quote-block{ font-size:26px; font-weight:300; line-height:1.5; color:var(--text-primary); padding:40px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:48px 0; }
  .pillars-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:56px; }
  .pillar{ border-top:1px solid var(--border); padding-top:20px; }
  .pillar .pnum{ font-size:12px; color:var(--accent); margin-bottom:14px; }
  .pillar h4{ font-size:16px; font-weight:500; margin-bottom:10px; }
  .pillar p{ font-size:13px; color:var(--text-secondary); margin:0; }

  .tech-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--border); margin-top:32px; }
  .tech-card{ background:var(--bg-primary); padding:44px; }
  .tech-card .ticon{ width:40px; height:40px; border:1px solid var(--border); border-radius:50%; margin-bottom:24px; }
  .tech-card h4{ font-size:18px; font-weight:500; margin-bottom:12px; }
  .tech-card p{ font-size:14px; color:var(--text-secondary); margin:0; }

  .faq-item{ border-bottom:1px solid var(--border); }
  .faq-q{ padding:26px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:16px; font-weight:400; }
  .faq-q .plus{ font-size:20px; color:var(--accent); transition:transform .3s var(--ease); }
  .faq-item.open .plus{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
  .faq-item.open .faq-a{ max-height:300px; }
  .faq-a p{ padding-bottom:26px; color:var(--text-secondary); font-size:14px; line-height:1.8; max-width:700px; }

  /* ===== CONTATO — redesenhado ===== */
  .contato-hero{ display:grid; grid-template-columns:1fr 1fr; min-height:64vh; }
  .contato-hero-media{ position:relative; overflow:hidden; background:#000; }
  .contato-hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
  .contato-hero-media::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent 60%, var(--bg-primary) 100%);
  }
  .contato-hero-text{ display:flex; flex-direction:column; justify-content:center; padding:0 80px; }
  .contato-hero-text h1{ font-size:46px; font-weight:300; margin:20px 0 20px; line-height:1.15; }
  .contato-hero-text p{ color:var(--text-secondary); font-size:15px; max-width:420px; line-height:1.8; }

  .contato-body{ padding-top:96px; }
  .contato-col-title{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:28px; font-weight:500; }
  .contact-grid-v2{ display:grid; grid-template-columns:1fr 1fr; gap:96px; margin-bottom:80px; }

  .people-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:40px; }
  .person-card{ background:var(--bg-surface); border:1px solid var(--border); border-radius:2px; padding:24px; transition:border-color .25s var(--ease); }
  .person-card:hover{ border-color:var(--accent); }
  .person-card .person-name{ font-size:16px; font-weight:500; margin-bottom:16px; }
  .person-row{ font-size:13px; color:var(--text-secondary); margin-bottom:10px; display:flex; flex-direction:column; gap:2px; }
  .person-row span.label{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
  .person-row a{ color:var(--text-primary); transition:color .25s var(--ease); }
  .person-row a:hover{ color:var(--accent); }

  .contact-meta{ display:grid; grid-template-columns:1fr 1fr; gap:8px 32px; margin-bottom:32px; }
  .contact-info-item{ margin-bottom:16px; }
  .contact-info-item h4{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
  .contact-info-item p{ font-size:14px; color:var(--text-primary); line-height:1.6; }

  .contact-whatsapp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; }

  .contact-map-block{ margin-top:16px; }
  .contact-map{ width:100%; height:360px; border:1px solid var(--border); border-radius:2px; overflow:hidden; filter:grayscale(.4) contrast(1.05); }
  .contact-map iframe{ width:100%; height:100%; border:0; }

  @media(max-width:960px){
    .contato-hero{ grid-template-columns:1fr; min-height:auto; }
    .contato-hero-media{ height:38vh; }
    .contato-hero-media::after{ background:linear-gradient(0deg, var(--bg-primary) 5%, transparent 45%); }
    .contato-hero-text{ padding:48px 24px; }
    .contato-hero-text h1{ font-size:32px; }
    .contact-grid-v2{ grid-template-columns:1fr; gap:48px; }
    .people-grid{ grid-template-columns:1fr; }
    .contact-meta{ grid-template-columns:1fr; }
  }

  .policy-section{ margin-bottom:36px; }
  .policy-section h3{ font-size:16px; font-weight:500; margin-bottom:12px; }
  .policy-section p{ font-size:14px; color:var(--text-secondary); line-height:1.85; margin-bottom:0; }
  .policy-updated{ font-size:12px; color:var(--text-muted); margin-bottom:48px; }

  /* Faixa intermediária: o menu principal ainda cabe, mas não com o respiro
     de 96px nem com os espaçamentos folgados — sem isto os blocos do header
     se sobrepõem (MANIFESTO encostando em Buscar, alternador quebrando em
     duas linhas) entre ~960px e ~1180px. */
  @media(max-width:1180px){
    header.site{ padding:24px 40px; gap:24px; }
    header.site.scrolled{ padding:16px 40px; }
    nav.main{ gap:22px; }
    .nav-right{ gap:16px; }
    .logo{ flex:none; }
    nav.main, .nav-right{ flex:0 1 auto; min-width:0; }
    nav.main a, .nav-right span, .nav-right a{ white-space:nowrap; }
  }

  @media(max-width:960px){
    .section{ padding:72px 24px; }
    header.site{ padding:20px 24px; } header.site.scrolled{ padding:14px 24px; }
    nav.main{ display:none; }
    #hero .hero-inner{ padding:0 24px 72px; } #hero h1{ font-size:36px; }
    #sobre-home p.big{ font-size:24px; }
    .cat-grid{ grid-template-columns:1fr; } .cat-card{ height:380px; }
    .prod-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
    #lifestyle .content{ padding:0 24px 60px; }
    .form-row{ flex-direction:column; }
    .footer-top{ grid-template-columns:1fr 1fr; gap:36px; }
    .footer-bottom{ flex-direction:column; gap:12px; align-items:flex-start; }
    .colecao-head{ padding:130px 24px 0; }
    .filter-bar{ padding:28px 24px; }
    #colecao-grid{ padding:40px 24px 100px; grid-template-columns:repeat(2,1fr); gap:18px; }
    .pdp{ padding:24px 24px 40px; gap:44px; }
    .breadcrumb{ padding:130px 24px 0; }
    #cart-drawer{ width:100vw; }
    .checkout-wrap{ padding:130px 24px 100px; grid-template-columns:1fr; gap:48px; }
    .field-row{ grid-template-columns:1fr; }
    .summary-card{ position:static; }
    .account-wrap{ padding:130px 24px 100px; grid-template-columns:1fr; gap:32px; }
    .inst-hero{ padding:130px 24px 60px; } .inst-hero h1{ font-size:32px; }
    .inst-body{ padding:0 24px 100px; }
    .pillars-grid{ grid-template-columns:1fr 1fr; gap:28px; }
    .tech-grid{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; gap:48px; }
    .confirm-wrap{ padding:160px 24px; }
    .confirm-actions{ flex-direction:column; }
  }

  /* Telas muito estreitas: header vira ícones (padrão Nike/Lululemon), texto some para não estourar */
  @media(max-width:600px){
    .nav-right{ gap:16px; }
    .nr-icon{ display:block; }
    .nr-label{ display:none; }
    .icon-badge .count{ top:-8px; right:-8px; }
    .logo .universe{ display:none; }
  }

  /* ===== ACESSIBILIDADE: prefers-reduced-motion =====
     Desativa globalmente animações/transições/scroll suave para quem ativou essa
     preferência no sistema operacional — inclui o scroll reveal, hovers com escala,
     e a transição de troca de view. Regra genérica: cobre automaticamente qualquer
     animação futura, sem precisar listar seletor por seletor. */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    html{ scroll-behavior: auto !important; }
    .reveal{ opacity: 1 !important; transform: none !important; }
  }

  /* ===== FAIXA DE ANÚNCIO (topo) ===== */
  /* Cores e conteúdo vêm do painel; aqui fica só a forma. */
  .faixa-anuncio{
    position:fixed; top:0; left:0; right:0; z-index:60;
    display:flex; align-items:center; justify-content:center; gap:10px;
    min-height:38px; padding:9px 20px;
    font-size:12.5px; letter-spacing:.03em; font-weight:500;
    text-align:center;
  }
  .faixa-conteudo{
    display:inline-flex; align-items:center; gap:9px;
    color:inherit; text-decoration:none;
  }
  .faixa-conteudo.clicavel{ cursor:pointer; }
  .faixa-conteudo.clicavel:hover{ text-decoration:underline; }
  .faixa-icone{ display:inline-flex; flex:none; }
  .faixa-icone svg{ display:block; }
  .faixa-fechar{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:0; color:inherit; opacity:.55;
    font-size:20px; line-height:1; cursor:pointer; padding:4px 8px;
    transition:opacity .2s var(--ease);
  }
  .faixa-fechar:hover{ opacity:1; }

  /* Empurra o cabeçalho e o portal para baixo quando a faixa está visível */
  body.com-faixa header.site{ top:38px; }
  body.com-faixa .portal-page{ padding-top:38px; }

  @media(max-width:600px){
    .faixa-anuncio{ font-size:11.5px; padding:8px 14px; }
  }

  /* ===== POPUP DE DESCONTO ===== */
  .popup-desconto{
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center; padding:20px;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    animation:popupFundo .3s var(--ease) both;
  }
  .popup-desconto[hidden]{ display:none; }
  @keyframes popupFundo{ from{opacity:0} to{opacity:1} }

  .popup-caixa{
    position:relative;
    display:grid; grid-template-columns:1fr 1fr;
    width:100%; max-width:760px; max-height:90vh; overflow:hidden;
    background:var(--bg-surface, #161616);
    border:1px solid var(--border);
    border-radius:6px;
    box-shadow:0 30px 90px rgba(0,0,0,.6);
    animation:popupEntra .42s var(--ease) both;
  }
  @keyframes popupEntra{
    from{ opacity:0; transform:translateY(18px) scale(.97); }
    to  { opacity:1; transform:none; }
  }
  /* Sem imagem, o conteúdo ocupa a caixa inteira */
  .popup-caixa:has(#popupMedia[hidden]){ grid-template-columns:1fr; max-width:460px; }

  .popup-media{ position:relative; background:#0f0f0f; }
  .popup-media img{ width:100%; height:100%; object-fit:cover; display:block; }

  .popup-corpo{ padding:44px 38px; display:flex; flex-direction:column; justify-content:center; }
  .popup-corpo h3{ font-size:25px; font-weight:300; line-height:1.25; margin-bottom:12px; }
  .popup-corpo p{ color:var(--text-secondary); font-size:14px; line-height:1.65; margin-bottom:22px; }

  .popup-cupom{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    border:1px dashed var(--accent); border-radius:4px;
    padding:13px 16px; margin-bottom:20px;
    font-size:17px; font-weight:600; letter-spacing:.12em; color:var(--accent);
  }
  .popup-cupom button{
    background:none; border:0; color:var(--text-secondary);
    font-family:inherit; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    cursor:pointer; padding:6px 8px; border-radius:3px;
  }
  .popup-cupom button:hover{ color:var(--accent); background:rgba(183,255,0,.1); }

  .popup-form{ display:flex; flex-direction:column; gap:10px; }
  .popup-form input{
    width:100%; background:var(--bg-primary); border:1px solid var(--border);
    color:var(--text-primary); padding:14px 15px; font-size:14px;
    font-family:inherit; border-radius:3px;
  }
  .popup-form input:focus{ outline:none; border-color:var(--accent); }
  .popup-form button{ width:100%; }
  .popup-feedback{ font-size:13px; color:var(--accent); min-height:18px; margin-top:10px; }

  .popup-recusar{
    margin-top:14px; background:none; border:0; color:var(--text-muted);
    font-family:inherit; font-size:12px; cursor:pointer; text-decoration:underline;
  }
  .popup-recusar:hover{ color:var(--text-secondary); }

  .popup-fechar{
    position:absolute; top:12px; right:14px; z-index:2;
    background:rgba(0,0,0,.45); border:0; color:#fff;
    width:30px; height:30px; border-radius:50%;
    font-size:20px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s var(--ease);
  }
  .popup-fechar:hover{ background:rgba(0,0,0,.75); }

  @media(max-width:700px){
    .popup-caixa{ grid-template-columns:1fr; max-width:420px; }
    .popup-media{ height:170px; }
    .popup-corpo{ padding:30px 24px; }
    .popup-corpo h3{ font-size:21px; }
  }

  /* Rodapé do portal — institucional, com links legais */
  .portal-caption{ gap:10px; flex-wrap:wrap; padding:0 20px; }
  .portal-caption span, .portal-caption a{
    font-size:11px; letter-spacing:.05em; color:var(--text-muted);
  }
  .portal-caption a{ cursor:pointer; transition:color .25s var(--ease); }
  .portal-caption a:hover{ color:var(--accent); }
  .portal-caption-sep{ opacity:.5; }

  /* ===== SINAIS DE CONFIANÇA NO CHECKOUT ===== */
  .checkout-confianca{
    margin-top:22px; padding-top:20px;
    border-top:1px solid var(--border);
    display:flex; flex-direction:column; gap:13px;
  }
  .checkout-confianca .cc-item{
    display:flex; align-items:flex-start; gap:11px;
    font-size:12.5px; line-height:1.55; color:var(--text-secondary);
  }
  .checkout-confianca .cc-item svg{
    flex:none; margin-top:2px; color:var(--accent);
  }
  .checkout-confianca strong{ color:var(--text-primary); font-weight:500; }

  /* ===== CONQUISTA DESBLOQUEADA ===== */
  /* Cartão que desliza pelo canto, no espírito de conquista de jogo, mas
     no vocabulário visual da marca. A cor vem do painel, por universo. */
  .conquista{
    position:fixed; right:24px; bottom:24px; z-index:300;
    display:flex; align-items:flex-start; gap:16px;
    width:min(390px, calc(100vw - 40px));
    padding:20px 22px;
    background:linear-gradient(145deg, #191919 0%, #0f0f0f 100%);
    border:1px solid var(--border);
    border-left:3px solid var(--conquista-cor, var(--accent));
    border-radius:6px;
    box-shadow:0 18px 50px rgba(0,0,0,.6);
    overflow:hidden;
  }
  .conquista[hidden]{ display:none; }

  /* Brilho que atravessa o cartão uma vez, no momento em que aparece */
  .conquista-brilho{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 35%,
                rgba(255,255,255,.10) 48%, transparent 62%);
    transform:translateX(-110%);
  }
  .conquista.entrando{ animation:conquistaEntra .55s var(--ease) both; }
  .conquista.entrando .conquista-brilho{ animation:conquistaBrilho 1.15s .35s var(--ease) both; }
  .conquista.saindo{ animation:conquistaSai .38s var(--ease) both; }

  @keyframes conquistaEntra{
    0%  { opacity:0; transform:translateX(30px) translateY(14px) scale(.96); }
    60% { transform:translateX(-4px) translateY(0) scale(1.01); }
    100%{ opacity:1; transform:none; }
  }
  @keyframes conquistaSai{
    from{ opacity:1; transform:none; }
    to  { opacity:0; transform:translateX(24px) scale(.97); }
  }
  @keyframes conquistaBrilho{
    from{ transform:translateX(-110%); }
    to  { transform:translateX(110%); }
  }

  .conquista-icone{
    flex:none; width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.04);
    border:1px solid var(--conquista-cor, var(--accent));
    color:var(--conquista-cor, var(--accent));
    overflow:hidden;
    animation:conquistaPulso 2.4s ease-in-out infinite;
  }
  .conquista-icone img{ width:100%; height:100%; object-fit:cover; }
  @keyframes conquistaPulso{
    0%,100%{ box-shadow:0 0 0 0 rgba(183,255,0,.28); }
    50%    { box-shadow:0 0 0 9px rgba(183,255,0,0); }
  }

  .conquista-texto{ flex:1; min-width:0; }
  .conquista-titulo{
    font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--conquista-cor, var(--accent)); margin-bottom:5px; font-weight:600;
  }
  .conquista-nome{ font-size:17px; font-weight:500; margin-bottom:5px; line-height:1.25; }
  .conquista-desc{ font-size:12.5px; color:var(--text-secondary); line-height:1.55; }

  .conquista-cupom{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:12px; padding:9px 12px;
    border:1px dashed var(--conquista-cor, var(--accent)); border-radius:4px;
    color:var(--conquista-cor, var(--accent));
    font-weight:600; letter-spacing:.12em; font-size:14px;
  }
  .conquista-cupom button{
    background:none; border:0; color:var(--text-secondary); cursor:pointer;
    font-family:inherit; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    padding:5px 7px; border-radius:3px;
  }
  .conquista-cupom button:hover{ color:var(--conquista-cor, var(--accent)); background:rgba(255,255,255,.06); }

  .conquista-fechar{
    position:absolute; top:8px; right:10px;
    background:none; border:0; color:var(--text-muted);
    font-size:19px; line-height:1; cursor:pointer; padding:4px 6px;
  }
  .conquista-fechar:hover{ color:var(--text-primary); }

  @media(max-width:520px){
    .conquista{ right:12px; left:12px; bottom:12px; width:auto; padding:16px; gap:13px; }
    .conquista-icone{ width:46px; height:46px; }
  }

  /* Quem prefere menos movimento vê o cartão, sem as animações */
  @media(prefers-reduced-motion:reduce){
    .conquista.entrando, .conquista.saindo,
    .conquista.entrando .conquista-brilho, .conquista-icone{ animation:none; }
  }

  /* =====================================================
     CABEÇALHO — menu à esquerda, marca ao centro, ações à direita
     Três colunas de mesma largura mantêm a logo opticamente
     centralizada mesmo quando os lados têm conteúdos diferentes.
     ===================================================== */
  header.site{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:16px;
    padding:20px 40px;
  }
  header.site.scrolled{ padding:14px 40px; }

  .hd-esq{ justify-self:start; }
  .hd-centro{ justify-self:center; }
  .hd-dir{ justify-self:end; display:flex; align-items:center; gap:4px; }

  /* ----- Botões do cabeçalho ----- */
  .hd-btn{
    background:none; border:0; color:var(--text-secondary);
    font-family:inherit; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:3px;
    transition:color .25s var(--ease), background .25s var(--ease);
  }
  .hd-btn:hover{ color:var(--text-primary); }

  .hd-icone{ position:relative; width:40px; height:40px; }
  .hd-icone:hover{ background:rgba(255,255,255,.06); }
  .hd-icone svg{ display:block; }

  .hd-count{
    position:absolute; top:5px; right:4px;
    background:var(--accent); color:var(--bg-primary);
    font-size:10px; font-weight:600;
    min-width:16px; height:16px; padding:0 4px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
  }

  /* ----- Botão de menu ----- */
  .hd-menu{ gap:11px; padding:9px 12px 9px 8px; }
  .hd-menu:hover{ background:rgba(255,255,255,.06); }
  .hd-menu-texto{
    font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  }
  .hamburguer{ display:flex; flex-direction:column; gap:4px; width:19px; }
  .hamburguer i{
    display:block; height:1.5px; width:100%;
    background:currentColor; border-radius:2px;
    transition:transform .3s var(--ease), width .3s var(--ease);
  }
  .hd-menu:hover .hamburguer i:nth-child(2){ width:65%; }

  /* ----- Marca ao centro ----- */
  .hd-centro{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    cursor:pointer; line-height:1;
  }
  .brand-logo--header{ height:30px; transition:height .35s var(--ease); }
  header.site.scrolled .brand-logo--header{ height:25px; }
  .hd-centro .universe{
    font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
    color:var(--text-muted); font-weight:400;
  }

  /* ----- Alternador de universo ----- */
  .hd-universo{
    padding:8px 15px; margin-right:6px;
    border:1px solid var(--border) !important;
    border-radius:20px;
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-secondary);
  }
  .hd-universo::after{ content:' ↔'; opacity:.6; }
  .hd-universo:hover{ border-color:var(--accent) !important; color:var(--accent); background:transparent; }

  /* =====================================================
     MENU LATERAL (gaveta à esquerda)
     ===================================================== */
  .menu-fundo{
    position:fixed; inset:0; z-index:98;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    opacity:0; transition:opacity .32s var(--ease);
  }
  .menu-fundo.aberto{ opacity:1; }
  .menu-fundo[hidden]{ display:none; }

  .menu-lateral{
    position:fixed; top:0; left:0; bottom:0; z-index:99;
    width:min(380px, 86vw);
    background:var(--bg-primary);
    border-right:1px solid var(--border);
    padding:26px 30px 34px;
    overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .34s var(--ease);
    display:flex; flex-direction:column;
  }
  .menu-lateral.aberto{ transform:none; }
  .menu-lateral[hidden]{ display:none; }

  .menu-topo{
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:24px; margin-bottom:24px;
    border-bottom:1px solid var(--border);
  }
  .menu-logo{ height:26px; width:auto; }
  .menu-fechar{
    background:none; border:0; color:var(--text-secondary);
    font-size:27px; line-height:1; cursor:pointer; padding:2px 6px;
  }
  .menu-fechar:hover{ color:var(--accent); }

  /* Alternador de universo dentro da gaveta */
  .menu-universo{
    display:grid; grid-template-columns:1fr 1fr; gap:6px;
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:4px; padding:4px; margin-bottom:30px;
  }
  .mu-opcao{
    background:none; border:0; color:var(--text-secondary);
    font-family:inherit; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    padding:11px 8px; border-radius:3px; cursor:pointer;
    transition:background .25s var(--ease), color .25s var(--ease);
  }
  .mu-opcao:hover{ color:var(--text-primary); }
  .mu-opcao.ativa{ background:var(--accent); color:var(--bg-primary); font-weight:600; }

  .menu-grupo{ margin-bottom:28px; }
  .menu-grupo-titulo{
    font-size:10px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--text-muted); margin-bottom:12px;
  }
  .menu-grupo a{
    display:block; padding:9px 0; cursor:pointer;
    font-size:16px; font-weight:300; color:var(--text-primary);
    transition:color .22s var(--ease), padding-left .22s var(--ease);
  }
  .menu-grupo a:hover{ color:var(--accent); padding-left:6px; }

  .menu-rodape{
    margin-top:auto; padding-top:24px; border-top:1px solid var(--border);
    display:flex; flex-direction:column; gap:12px;
  }
  .menu-rodape a{
    font-size:12px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--text-secondary); cursor:pointer;
  }
  .menu-rodape a:hover{ color:var(--accent); }
  .menu-whats::before{ content:'· '; opacity:.5; }

  /* =====================================================
     RESPONSIVO DO CABEÇALHO
     ===================================================== */
  @media(max-width:900px){
    header.site{ padding:16px 20px; gap:8px; }
    header.site.scrolled{ padding:12px 20px; }
    .hd-menu-texto{ display:none; }        /* só o ícone */
    .hd-menu{ padding:9px; }
    .hd-universo{ display:none; }          /* fica na gaveta */
    .hd-icone{ width:38px; height:38px; }
    .brand-logo--header{ height:26px; }
  }
  @media(max-width:420px){
    .hd-dir{ gap:0; }
    .hd-icone{ width:34px; height:34px; }
    /* Com 4 ícones à direita contra só o hambúrguer à esquerda, a logo sai do
       centro em telas estreitas. Favoritos sai daqui e fica no menu lateral. */
    .hd-dir .hd-icone:nth-child(3){ display:none; }
    .hd-icone svg{ width:17px; height:17px; }
    .brand-logo--header{ height:22px; }
    .hd-centro .universe{ font-size:8.5px; letter-spacing:.2em; }
  }

  /* Telas muito largas (TV, monitor ultrawide): respiro maior e teto de
     largura no conteúdo, para o texto não atravessar a tela inteira. */
  @media(min-width:1800px){
    header.site{ padding:26px 80px; }
    .section{ padding:160px 0; }
    .section > .inner, .section > .head, .prod-grid, .cat-grid{
      max-width:1600px; margin-left:auto; margin-right:auto;
    }
    #hero h1{ font-size:76px; }
  }

  /* =====================================================
     CONTA DO CLIENTE — cartão sobre cena texturizada.
     Mesma família visual do painel, mas mais leve: a loja é
     para o cliente, não para a operação.
     ===================================================== */
  .auth-cena{
    position:relative; overflow:hidden;
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding:130px 20px 80px;
    background:
      radial-gradient(ellipse 700px 460px at 15% 10%, rgba(183,255,0,.08), transparent 60%),
      radial-gradient(ellipse 560px 420px at 88% 92%, rgba(183,255,0,.05), transparent 58%),
      var(--bg-primary);
  }
  .auth-cena::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 100%);
  }
  .auth-cena::after{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:.26;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  }

  .auth-cartao{
    position:relative; z-index:1;
    width:100%; max-width:440px;
    padding:46px 42px 34px;
    background:rgba(19,19,19,.85);
    border:1px solid var(--border);
    border-radius:8px;
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 26px 74px rgba(0,0,0,.5);
    text-align:center;
    animation:authEntra .5s var(--ease) both;
  }
  @keyframes authEntra{
    from{ opacity:0; transform:translateY(16px); }
    to  { opacity:1; transform:none; }
  }

  .auth-logo{
    display:block; height:34px; width:auto; margin:0 auto 26px;
    filter:drop-shadow(0 0 22px rgba(183,255,0,.22));
  }
  .auth-cartao h1{ font-size:27px; font-weight:300; margin-bottom:8px; }
  .auth-cartao > p{ color:var(--text-secondary); font-size:13.5px; margin-bottom:32px; }

  .auth-form{ text-align:left; }
  .auth-form .field{ margin-bottom:18px; }
  .auth-form input{ padding:14px 15px; border-radius:4px; }
  .auth-form input:hover{ border-color:#3a3a3a; }
  .auth-form input:focus{ background:#101010; box-shadow:0 0 0 3px rgba(183,255,0,.13); }

  /* Campo de senha com botão de revelar */
  .auth-senha{ position:relative; }
  .auth-senha input{ padding-right:92px; }
  .auth-ver{
    position:absolute; right:7px; top:50%; transform:translateY(-50%);
    background:none; border:0; color:var(--text-muted); cursor:pointer;
    font-family:inherit; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
    padding:8px 10px; border-radius:3px;
    transition:color .2s var(--ease), background .2s var(--ease);
  }
  .auth-ver:hover{ color:var(--accent); background:rgba(183,255,0,.08); }

  .auth-forgot{
    text-align:right; font-size:12px; color:var(--text-muted);
    cursor:pointer; margin:-4px 0 20px;
  }
  .auth-forgot:hover{ color:var(--accent); }

  .auth-enviar{ width:100%; padding:16px; border-radius:4px; letter-spacing:.03em; }

  .auth-toggle{
    margin-top:24px; font-size:13px; color:var(--text-secondary); text-align:center;
  }
  .auth-toggle span{ color:var(--accent); cursor:pointer; }
  .auth-toggle span:hover{ text-decoration:underline; }

  /* Vantagens de criar conta */
  .auth-vantagens{
    margin-top:26px; padding-top:22px; border-top:1px solid var(--border);
    display:flex; flex-direction:column; gap:11px; text-align:left;
  }
  .auth-vantagens[hidden]{ display:none; }
  .auth-vantagens .av-item{
    display:flex; align-items:flex-start; gap:10px;
    font-size:12.5px; color:var(--text-secondary); line-height:1.5;
  }
  .auth-vantagens .av-item svg{ flex:none; margin-top:2px; color:var(--accent); }

  .auth-rodape{
    margin-top:26px; padding-top:20px; border-top:1px solid var(--border);
    font-size:11.5px; color:var(--text-muted); line-height:1.7;
  }
  .auth-rodape a{ color:var(--text-secondary); cursor:pointer; text-decoration:underline; }
  .auth-rodape a:hover{ color:var(--accent); }

  @media(max-width:520px){
    .auth-cena{ padding:110px 14px 60px; }
    .auth-cartao{ padding:34px 22px 26px; border-radius:6px; }
    .auth-logo{ height:28px; }
    .auth-cartao h1{ font-size:23px; }
  }

  /* ===== CAMPOS DO CHECKOUT ===== */
  .campo-erro{
    display:block; font-size:12px; color:var(--error);
    margin-top:6px; min-height:16px;
  }
  .campo-ajuda{
    display:block; font-size:12px; color:var(--text-muted); margin-top:6px;
  }
  .opcional{ color:var(--text-muted); text-transform:none; letter-spacing:0; font-size:11px; }

  input.invalido{ border-color:var(--error) !important; }
  input.invalido:focus{ box-shadow:0 0 0 3px rgba(255,92,92,.14); }

  .cep-linha{ display:flex; align-items:center; gap:14px; }
  .cep-linha input{ max-width:220px; }
  .cep-estado{ font-size:12px; color:var(--accent); }

  .salvar-endereco{ margin-top:8px; }
  .salvar-endereco[hidden]{ display:none; }
  .checkbox-linha{
    display:flex; align-items:center; gap:10px; cursor:pointer;
    font-size:13px; color:var(--text-secondary);
    text-transform:none; letter-spacing:0; margin:0;
  }
  .checkbox-linha input{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }

  /* Em telas estreitas os pares de campos empilham */
  @media(max-width:700px){
    .checkout-wrap .field-row{ grid-template-columns:1fr; }
    .cep-linha{ flex-direction:column; align-items:flex-start; gap:8px; }
    .cep-linha input{ max-width:100%; }
  }

  /* ===== BOTÃO FLUTUANTE DE WHATSAPP (configurável pelo painel) ===== */
  .whatsapp-float{
    --wa-tamanho:58px;
    --wa-cor:#25D366;
    position:fixed; right:26px; bottom:26px; z-index:70;
    display:flex; align-items:center; gap:10px;
    min-width:var(--wa-tamanho); height:var(--wa-tamanho);
    padding:0; border-radius:calc(var(--wa-tamanho) / 2);
    background:var(--wa-cor); color:#fff;
    box-shadow:0 8px 26px rgba(0,0,0,.38);
    justify-content:center;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  }
  .whatsapp-float[hidden]{ display:none; }
  .whatsapp-float:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 12px 32px rgba(0,0,0,.46); }
  .whatsapp-float svg{ width:calc(var(--wa-tamanho) * .48); height:calc(var(--wa-tamanho) * .48); flex:none; }

  .whatsapp-float.wa-esquerda{ right:auto; left:26px; }

  /* Com rótulo o botão vira pílula */
  .whatsapp-float.wa-com-rotulo{ padding:0 22px 0 18px; }
  .wa-rotulo{ font-size:14px; font-weight:500; white-space:nowrap; }
  .wa-rotulo[hidden]{ display:none; }

  /* Fora do horário: cor dessaturada e um aviso ao passar o mouse */
  .whatsapp-float.wa-offline{ filter:grayscale(.45); }
  .wa-aviso{
    position:absolute; bottom:calc(100% + 12px); right:0;
    width:250px; padding:12px 14px;
    background:var(--bg-surface); color:var(--text-secondary);
    border:1px solid var(--border); border-radius:6px;
    font-size:12px; line-height:1.5; text-align:left;
    opacity:0; pointer-events:none; transform:translateY(6px);
    transition:opacity .25s var(--ease), transform .25s var(--ease);
    box-shadow:0 12px 30px rgba(0,0,0,.45);
  }
  .wa-aviso[hidden]{ display:none; }
  .whatsapp-float:hover .wa-aviso{ opacity:1; transform:none; }
  .whatsapp-float.wa-esquerda .wa-aviso{ right:auto; left:0; }

  /* Visibilidade por dispositivo */
  @media(min-width:769px){
    .whatsapp-float.wa-sem-desktop{ display:none !important; }
  }
  @media(max-width:768px){
    .whatsapp-float.wa-sem-mobile{ display:none !important; }
    .whatsapp-float{ right:16px; bottom:16px; }
    .whatsapp-float.wa-esquerda{ left:16px; }
    .wa-aviso{ width:210px; }
  }

  /* ===== ETIQUETAS DE PRODUTO (oferta / esgotado) ===== */
  .selos{
    position:absolute; top:12px; left:12px; z-index:3;
    display:flex; flex-direction:column; gap:6px; align-items:flex-start;
    pointer-events:none;
  }
  .selo{
    padding:5px 10px; border-radius:3px;
    font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    line-height:1;
  }
  .selo-oferta{ background:var(--accent); color:var(--bg-primary); }
  .selo-esgotado{ background:rgba(13,13,13,.85); color:#fff; border:1px solid rgba(255,255,255,.28); }

  /* Preço promocional */
  .prod-price .preco-antigo{
    color:var(--text-muted); text-decoration:line-through;
    font-size:.85em; margin-right:8px; font-weight:400;
  }
  .prod-price .preco-oferta{ color:var(--accent); font-weight:600; }

  /* Foto real dentro da sacola e do resumo do checkout */
  .cart-item .photo img.real-photo,
  .summary-item .photo img.real-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  /* ===== DISPONIBILIDADE NA PÁGINA DO PRODUTO ===== */
  /* Tamanho esgotado continua visível, mas claramente indisponível — some com
     a opção esconderia a informação de que a peça existe naquele tamanho. */
  .size-pill.esgotado{
    opacity:.35; cursor:not-allowed; position:relative;
    border-color:var(--border) !important; color:var(--text-muted);
  }
  .size-pill.esgotado::after{
    content:''; position:absolute; left:14%; right:14%; top:50%;
    height:1px; background:var(--text-muted); transform:rotate(-14deg);
  }
  .size-pill.esgotado:hover{ border-color:var(--border) !important; color:var(--text-muted); }

  .size-pill.ultimas:not(.esgotado)::before{
    content:''; position:absolute; top:5px; right:5px;
    width:5px; height:5px; border-radius:50%; background:var(--accent);
  }
  .size-pill{ position:relative; }

  .color-swatch.indisponivel{
    opacity:.3; cursor:not-allowed; position:relative;
  }
  .color-swatch.indisponivel::after{
    content:''; position:absolute; inset:-2px;
    background:linear-gradient(to bottom right, transparent 45%, var(--text-muted) 47%, var(--text-muted) 53%, transparent 55%);
    border-radius:50%;
  }

  /* Destaque momentâneo quando a pessoa esquece de escolher o tamanho */
  @keyframes piscarGrade{
    0%,100%{ box-shadow:0 0 0 0 rgba(183,255,0,0); }
    50%    { box-shadow:0 0 0 3px rgba(183,255,0,.35); }
  }
  #pdpSizes.destacar{ animation:piscarGrade .6s ease-in-out 2; border-radius:4px; }

  .pdp-aviso-estoque{
    font-size:13px; color:var(--accent); margin-bottom:12px;
    display:flex; align-items:center; gap:7px;
  }
  .pdp-aviso-estoque[hidden]{ display:none; }
  .pdp-aviso-estoque::before{
    content:''; width:6px; height:6px; border-radius:50%;
    background:var(--accent); flex:none;
  }

  .pdp-add:disabled{
    background:var(--bg-surface-alt); color:var(--text-muted);
    cursor:not-allowed; transform:none;
  }
  .pdp-add:disabled:hover{ background:var(--bg-surface-alt); transform:none; }

  /* =====================================================
     SACOLA — refinamento visual
     ===================================================== */
  .cart-head h3{ display:flex; align-items:baseline; gap:10px; }
  .cart-contador{
    font-size:12px; font-weight:400; letter-spacing:.04em;
    color:var(--text-muted); text-transform:none;
  }
  .cart-contador[hidden]{ display:none; }

  /* Progresso do frete grátis */
  .cart-frete{ padding:16px 28px; border-bottom:1px solid var(--border); }
  .cart-frete[hidden]{ display:none; }
  .cf-texto{ font-size:12.5px; color:var(--text-secondary); margin-bottom:9px; }
  .cart-frete.completo .cf-texto{ color:var(--accent); font-weight:500; }
  .cf-barra{ height:3px; background:var(--bg-surface-alt); border-radius:2px; overflow:hidden; }
  .cf-preenchida{
    height:100%; width:0; background:var(--accent); border-radius:2px;
    transition:width .5s var(--ease);
  }

  /* Item da sacola */
  .cart-item .photo{
    position:relative; width:84px; height:104px; flex:none;
    border-radius:4px; overflow:hidden;
  }
  .cart-selo{
    position:absolute; top:5px; left:5px; z-index:3;
    background:var(--accent); color:var(--bg-primary);
    font-size:9.5px; font-weight:700; letter-spacing:.04em;
    padding:3px 6px; border-radius:2px; line-height:1;
  }
  .cart-item-topo{ display:flex; align-items:flex-start; gap:10px; }
  .cart-item-topo .name{ flex:1; font-size:14px; line-height:1.35; }
  .cart-remove-x{
    flex:none; background:none; border:0; color:var(--text-muted);
    font-size:19px; line-height:1; cursor:pointer; padding:0 2px;
    transition:color .2s var(--ease);
  }
  .cart-remove-x:hover{ color:var(--error); }
  .cart-item .meta{ font-size:12px; color:var(--text-muted); margin-top:4px; }
  .cart-alerta{
    display:inline-block; margin-top:7px; padding:3px 8px;
    background:rgba(183,255,0,.1); color:var(--accent);
    border-radius:3px; font-size:11px; font-weight:500;
  }
  .cart-qty-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-top:12px;
  }
  .cart-item-preco{ text-align:right; line-height:1.35; }
  .cart-unit{ display:block; font-size:11px; color:var(--text-muted); }
  .cart-item-preco strong{ font-size:14px; font-weight:500; }
  .qty-stepper--sm button:disabled{ opacity:.3; cursor:not-allowed; }

  /* Sacola vazia */
  .cart-empty{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; padding:64px 28px; text-align:center; color:var(--text-muted);
  }
  .cart-empty svg{ color:var(--border); margin-bottom:6px; }
  .cart-empty p{ color:var(--text-primary); font-size:15px; }
  .cart-empty span{ font-size:12.5px; line-height:1.6; max-width:230px; }
  .cart-empty .btn{ margin-top:14px; padding:12px 24px; font-size:13px; }

  /* Rodapé */
  .cart-footer[hidden]{ display:none; }
  .cart-linha{
    display:flex; justify-content:space-between; align-items:center;
    font-size:13px; color:var(--text-secondary); margin-bottom:9px;
  }
  .cart-linha strong{ color:var(--text-primary); font-weight:500; }
  .cart-linha-frete span:last-child{ font-size:12px; color:var(--text-muted); }
  .cart-total{ padding-top:12px; border-top:1px solid var(--border); margin-bottom:16px; }
  .cart-finalizar{ width:100%; padding:17px; }
  .cart-selos{
    display:flex; justify-content:center; gap:20px; margin-top:14px;
    font-size:11px; color:var(--text-muted); flex-wrap:wrap;
  }
  .cart-selos span{ display:inline-flex; align-items:center; gap:5px; }
  .cart-selos svg{ color:var(--accent); }

  /* =====================================================
     BUSCA — estado inicial, contagem e resultados
     ===================================================== */
  .busca-sugestoes{ padding:8px 0 4px; }
  .bs-titulo{
    font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--text-muted); margin-bottom:12px;
  }
  .bs-atalhos{ display:flex; gap:8px; flex-wrap:wrap; }
  .bs-atalhos button{
    background:var(--bg-surface); border:1px solid var(--border);
    color:var(--text-secondary); border-radius:20px;
    padding:9px 18px; font-size:13px; cursor:pointer;
    transition:all .2s var(--ease);
  }
  .bs-atalhos button:hover{ border-color:var(--accent); color:var(--accent); }

  .busca-contagem{
    font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-muted); padding:4px 0 14px;
    border-bottom:1px solid var(--border); margin-bottom:6px;
  }
  .busca-aviso{ padding:24px 0; color:var(--text-muted); font-size:13px; text-align:center; }

  .busca-vazio{
    padding:44px 0; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .busca-vazio p{ font-size:15px; }
  .busca-vazio span{ font-size:12.5px; color:var(--text-muted); }
  .busca-vazio .btn{ margin-top:12px; padding:12px 24px; font-size:13px; }

  .search-result{
    display:flex; align-items:center; gap:16px;
    padding:14px 4px; cursor:pointer;
    border-bottom:1px solid var(--border);
    transition:background .2s var(--ease), padding-left .2s var(--ease);
  }
  .search-result:hover{ background:rgba(255,255,255,.03); padding-left:10px; }
  .search-result .photo{
    width:60px; height:74px; flex:none; border-radius:4px; overflow:hidden;
  }
  .search-result-info{ flex:1; min-width:0; }
  .search-result .prod-name{ font-size:14px; margin-bottom:3px; }
  .search-result .prod-tag{ font-size:11px; color:var(--text-muted); margin:0 0 5px; }
  .search-result .prod-price{ font-size:13px; }
  .search-seta{ color:var(--text-muted); flex:none; }
  .search-result:hover .search-seta{ color:var(--accent); }

  @media(max-width:600px){
    .cart-frete{ padding:14px 20px; }
    .cart-item .photo{ width:70px; height:88px; }
    .cart-selos{ gap:14px; font-size:10.5px; }
  }

  /* =====================================================
     PAINEL DO CLIENTE
     Linguagem própria: cartões, respiro e poucos números
     grandes. Não é o painel administrativo — aqui é a
     relação da pessoa com a marca, não uma ferramenta.
     ===================================================== */
  .conta-topo{
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; flex-wrap:wrap;
    padding:150px 96px 0;
  }
  .conta-saudacao{ display:flex; align-items:center; gap:18px; }
  .conta-avatar{
    width:58px; height:58px; flex:none; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent); color:var(--bg-primary);
    font-size:19px; font-weight:600; letter-spacing:.04em;
  }
  .conta-topo h1{ font-size:30px; font-weight:300; line-height:1.2; }
  .conta-topo p{ color:var(--text-secondary); font-size:13.5px; margin-top:4px; }
  .conta-nivel{
    padding:7px 16px; border-radius:20px;
    border:1px solid var(--border); color:var(--text-secondary);
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  }
  .conta-nivel.influencer{
    border-color:var(--accent); color:var(--accent);
    background:rgba(183,255,0,.08); font-weight:600;
  }
  .conta-nivel[hidden]{ display:none; }

  .account-wrap{ padding:44px 96px 130px; display:grid; grid-template-columns:250px 1fr; gap:52px; }

  /* Menu lateral com ícones */
  .account-side{ display:flex; flex-direction:column; gap:2px; align-self:start; position:sticky; top:120px; }
  .account-side a{
    display:flex; align-items:center; gap:13px;
    padding:13px 15px; border-radius:5px; cursor:pointer;
    color:var(--text-secondary); font-size:14px;
    transition:background .2s var(--ease), color .2s var(--ease);
  }
  .account-side a svg{ width:18px; height:18px; flex:none; }
  .account-side a span:first-of-type{ flex:1; }
  .account-side a:hover{ background:rgba(255,255,255,.04); color:var(--text-primary); }
  .account-side a.active{ background:var(--bg-surface); color:var(--accent); }
  .account-side a.active svg{ color:var(--accent); }
  .account-side .conta-sair{ margin-top:14px; padding-top:19px; border-top:1px solid var(--border); border-radius:0; }
  .account-side .conta-sair:hover{ color:var(--error); background:transparent; }
  .conta-badge{
    background:var(--accent); color:var(--bg-primary);
    min-width:19px; height:19px; padding:0 6px; border-radius:10px;
    font-size:10.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
  .conta-badge[hidden]{ display:none; }

  .account-main h2{ font-size:19px; font-weight:400; margin-bottom:22px; }
  .conta-sub{ font-size:15px; font-weight:400; margin:34px 0 6px; }
  .conta-dica{ font-size:12.5px; color:var(--text-muted); margin-bottom:18px; }
  .conta-form{ max-width:440px; }
  .conta-carregando{ color:var(--text-muted); font-size:13px; padding:26px 0; }

  .conta-bloco{ margin-top:38px; }
  .conta-bloco-topo{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; margin-bottom:20px;
  }
  .conta-bloco-topo h2{ margin-bottom:0; }

  /* Cartões do resumo */
  .conta-cartoes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(148px,1fr)); gap:14px; }
  .conta-cartao{
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:6px; padding:22px 20px;
    transition:border-color .25s var(--ease), transform .25s var(--ease);
  }
  .conta-cartao:hover{ border-color:#3a3a3a; transform:translateY(-2px); }
  .conta-cartao svg{ width:19px; height:19px; color:var(--accent); margin-bottom:14px; }
  .cc-valor{ font-size:25px; font-weight:300; line-height:1.1; margin-bottom:5px; }
  .cc-rotulo{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }

  /* Cartão de pedido */
  .pedido-cartao{
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:6px; padding:22px 24px; margin-bottom:16px;
  }
  .pc-topo{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:14px; padding-bottom:16px; margin-bottom:16px;
    border-bottom:1px solid var(--border); flex-wrap:wrap;
  }
  .pc-numero{ font-size:14px; font-weight:500; letter-spacing:.04em; }
  .pc-data{ font-size:12px; color:var(--text-muted); margin-top:3px; }
  .pc-status{
    padding:6px 13px; border-radius:20px;
    font-size:11px; letter-spacing:.05em; white-space:nowrap;
    border:1px solid var(--border); color:var(--text-secondary);
  }
  .pc-status.pago{ border-color:var(--accent); color:var(--accent); background:rgba(183,255,0,.08); }
  .pc-status.enviado{ border-color:#5AA9FF; color:#5AA9FF; background:rgba(90,169,255,.08); }
  .pc-status.entregue{ border-color:var(--accent); color:var(--bg-primary); background:var(--accent); font-weight:600; }
  .pc-status.aguardando{ border-color:#E0A800; color:#E0A800; background:rgba(224,168,0,.08); }

  .pc-item{
    display:grid; grid-template-columns:1fr auto; gap:4px 16px;
    padding:9px 0; font-size:13.5px;
  }
  .pc-item-nome{ grid-column:1; }
  .pc-item-meta{ grid-column:1; font-size:12px; color:var(--text-muted); }
  .pc-item-valor{ grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--text-secondary); }

  .pc-total{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:14px; margin-top:10px; border-top:1px solid var(--border);
    font-size:14px;
  }
  .pc-total strong{ font-size:16px; font-weight:500; }

  /* Bloco de rastreio */
  .pc-rastreio{
    margin-top:20px; padding:18px;
    background:var(--bg-primary); border:1px solid var(--border); border-radius:5px;
  }
  .pc-rastreio-topo{
    display:flex; align-items:center; gap:8px; margin-bottom:12px;
    font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);
  }
  .pc-rastreio-topo svg{ color:var(--accent); }
  .pc-codigo{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--bg-surface); border:1px dashed var(--border);
    border-radius:4px; padding:12px 14px; margin-bottom:14px;
  }
  .pc-codigo code{
    font-family:'Courier New', monospace; font-size:15px;
    letter-spacing:.14em; color:var(--accent); font-weight:600;
  }
  .pc-codigo button{
    background:none; border:0; color:var(--text-secondary); cursor:pointer;
    font-family:inherit; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    padding:6px 9px; border-radius:3px; white-space:nowrap;
    transition:color .2s var(--ease), background .2s var(--ease);
  }
  .pc-codigo button:hover{ color:var(--accent); background:rgba(183,255,0,.1); }
  .pc-codigo button.copiado{ color:var(--accent); }
  .pc-rastrear{ width:100%; padding:13px; font-size:13px; text-align:center; display:block; }
  .pc-aviso{ font-size:11.5px; color:var(--text-muted); margin-top:11px; line-height:1.55; }

  /* Notificações */
  .notif-item{
    display:flex; gap:14px; padding:17px 18px; cursor:default;
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:5px; margin-bottom:10px;
    transition:border-color .2s var(--ease);
  }
  .notif-item.nova{ cursor:pointer; border-color:rgba(183,255,0,.3); background:rgba(183,255,0,.035); }
  .notif-item.nova:hover{ border-color:var(--accent); }
  .notif-ponto{ width:7px; height:7px; border-radius:50%; background:transparent; flex:none; margin-top:6px; }
  .notif-item.nova .notif-ponto{ background:var(--accent); }
  .notif-titulo{ font-size:14px; font-weight:500; margin-bottom:5px; }
  .notif-texto{ font-size:13px; color:var(--text-secondary); line-height:1.6; }
  .notif-data{ font-size:11px; color:var(--text-muted); margin-top:9px; }

  /* Estado vazio */
  .conta-vazio{
    display:flex; flex-direction:column; align-items:flex-start; gap:8px;
    padding:34px 0; color:var(--text-muted);
  }
  .conta-vazio p{ color:var(--text-primary); font-size:15px; }
  .conta-vazio span{ font-size:13px; }
  .conta-vazio .btn{ margin-top:12px; padding:12px 26px; font-size:13px; }

  @media(max-width:900px){
    .conta-topo{ padding:130px 24px 0; }
    .account-wrap{ padding:30px 24px 90px; grid-template-columns:1fr; gap:30px; }
    .account-side{
      position:static; flex-direction:row; overflow-x:auto; gap:6px;
      padding-bottom:8px; border-bottom:1px solid var(--border);
    }
    .account-side a{ white-space:nowrap; padding:11px 14px; }
    .account-side a span:first-of-type{ flex:none; }
    .account-side .conta-sair{ margin-top:0; padding-top:11px; border-top:0; }
  }
  @media(max-width:520px){
    .conta-avatar{ width:48px; height:48px; font-size:16px; }
    .conta-topo h1{ font-size:24px; }
    .account-side a svg{ display:none; }
    .pc-codigo{ flex-direction:column; align-items:stretch; gap:10px; text-align:center; }
  }

  /* ===== FOTO DE PERFIL DO CLIENTE ===== */
  .conta-avatar-area{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:none; }

  .conta-avatar{
    position:relative; width:74px; height:74px; padding:0;
    border-radius:50%; overflow:hidden; cursor:pointer;
    background:var(--bg-surface); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .25s var(--ease), transform .2s var(--ease);
  }
  .conta-avatar:hover{ border-color:var(--accent); transform:scale(1.03); }
  .conta-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* Sem foto: a logo aparece contida e discreta, não recortada */
  .conta-avatar img.avatar-padrao{
    width:62%; height:auto; object-fit:contain; opacity:.85;
  }

  /* Ícone de câmera que surge ao passar o mouse */
  .avatar-camera{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.62); color:#fff;
    opacity:0; transition:opacity .22s var(--ease);
  }
  .avatar-camera svg{ width:22px; height:22px; }
  .conta-avatar:hover .avatar-camera,
  .conta-avatar:focus-visible .avatar-camera{ opacity:1; }

  .avatar-remover{
    background:none; border:0; color:var(--text-muted); cursor:pointer;
    font-family:inherit; font-size:11px; letter-spacing:.03em;
    text-decoration:underline; padding:2px;
  }
  .avatar-remover:hover{ color:var(--error); }
  .avatar-remover[hidden]{ display:none; }

  .avatar-status{
    display:block; font-size:12px; color:var(--accent);
    margin-top:6px; min-height:16px;
  }

  @media(max-width:520px){
    .conta-avatar{ width:60px; height:60px; }
    .avatar-camera svg{ width:18px; height:18px; }
  }

  /* ===== SININHO NO CABEÇALHO ===== */
  .hd-sino-area{ position:relative; }
  .hd-sino-area[hidden]{ display:none; }

  .sino-painel{
    position:absolute; top:calc(100% + 10px); right:0; z-index:80;
    width:min(340px, calc(100vw - 32px));
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:6px; box-shadow:0 20px 50px rgba(0,0,0,.55);
    overflow:hidden;
    animation:sinoAbre .22s var(--ease) both;
  }
  .sino-painel[hidden]{ display:none; }
  @keyframes sinoAbre{
    from{ opacity:0; transform:translateY(-6px); }
    to  { opacity:1; transform:none; }
  }

  .sino-topo{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid var(--border);
    font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
  }
  .sino-topo button{
    background:none; border:0; color:var(--accent); cursor:pointer;
    font-family:inherit; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  }
  .sino-lista{ max-height:340px; overflow-y:auto; }

  .sino-item{
    padding:14px 16px; border-bottom:1px solid var(--border);
    cursor:default; transition:background .2s var(--ease);
  }
  .sino-item.nova{ cursor:pointer; background:rgba(183,255,0,.05); }
  .sino-item.nova:hover{ background:rgba(183,255,0,.09); }
  .sino-item.nova .si-titulo::before{
    content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--accent); margin-right:8px; vertical-align:middle;
  }
  .si-titulo{ font-size:13.5px; font-weight:500; margin-bottom:4px; }
  .si-texto{
    font-size:12.5px; color:var(--text-secondary); line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .si-data{ font-size:11px; color:var(--text-muted); margin-top:6px; }
  .sino-vazio{ padding:30px 16px; text-align:center; color:var(--text-muted); font-size:12.5px; }

  .sino-ver-tudo{
    width:100%; background:none; border:0; border-top:1px solid var(--border);
    color:var(--text-secondary); cursor:pointer; font-family:inherit;
    padding:14px; font-size:12px; letter-spacing:.05em;
    transition:color .2s var(--ease), background .2s var(--ease);
  }
  .sino-ver-tudo:hover{ color:var(--accent); background:rgba(255,255,255,.03); }

  @media(max-width:420px){
    .sino-painel{ right:-40px; }
  }

  /* =====================================================
     TEMA CLARO
     Paleta desenhada, não invertida. Três decisões:
     1) O fundo não é branco puro — #FAFAF8 tem um leve calor
        que reduz o cansaço em leitura longa.
     2) O verde-limão da marca não serve para TEXTO sobre
        fundo claro (contraste ~1.3:1, ilegível). Para texto
        e bordas usamos #4F6B00, o mesmo verde escurecido até
        passar no critério AA.
     3) O limão continua vivo onde é assinatura da marca:
        botões principais, com texto preto por cima.
     ===================================================== */
  :root[data-tema="claro"]{
    --bg-primary:#FAFAF8;
    --bg-surface:#FFFFFF;
    --bg-surface-alt:#EFEFEA;
    --text-primary:#0D0D0D;
    --text-secondary:#52524C;
    --text-muted:#76766F;
    --accent:#4F6B00;
    --accent-pressed:#3E5400;
    --border:#E3E3DC;
    --error:#C42F2F;
  }

  /* O limão da marca permanece nos botões principais. */
  :root[data-tema="claro"] .btn-primary{
    background:#B7FF00; color:#0D0D0D;
  }
  :root[data-tema="claro"] .btn-primary:hover{ background:#A8EC00; }

  /* Elementos que usam o accent como preenchimento precisam de
     texto escuro por cima quando o accent fica claro. */
  :root[data-tema="claro"] .hd-count,
  :root[data-tema="claro"] .conta-badge,
  :root[data-tema="claro"] .icon-badge .count,
  :root[data-tema="claro"] .selo-oferta,
  :root[data-tema="claro"] .cart-selo,
  :root[data-tema="claro"] .mu-opcao.ativa,
  :root[data-tema="claro"] .pc-status.entregue,
  :root[data-tema="claro"] .conta-avatar{
    background:var(--accent); color:#FFFFFF;
  }

  /* Sombras: no claro elas precisam existir para dar profundidade,
     já que não há contraste de luminosidade a favor. */
  :root[data-tema="claro"] .popup-caixa,
  :root[data-tema="claro"] .conquista,
  :root[data-tema="claro"] .sino-painel,
  :root[data-tema="claro"] .auth-cartao,
  :root[data-tema="claro"] #cart-drawer{
    box-shadow:0 12px 40px rgba(0,0,0,.13);
  }
  :root[data-tema="claro"] .conta-cartao,
  :root[data-tema="claro"] .pedido-cartao,
  :root[data-tema="claro"] .prod-card{
    box-shadow:0 1px 3px rgba(0,0,0,.05);
  }

  /* Fundos texturizados foram desenhados para o escuro. */
  :root[data-tema="claro"] .auth-cena{
    background:
      radial-gradient(ellipse 700px 460px at 15% 10%, rgba(79,107,0,.07), transparent 60%),
      radial-gradient(ellipse 560px 420px at 88% 92%, rgba(79,107,0,.05), transparent 58%),
      var(--bg-primary);
  }
  :root[data-tema="claro"] .auth-cena::after{ opacity:.06; }
  :root[data-tema="claro"] .auth-cartao{ background:rgba(255,255,255,.9); }

  /* O cabeçalho ao rolar acompanha o fundo do tema. */
  :root[data-tema="claro"] header.site.scrolled{
    background:rgba(250,250,248,.92);
    border-bottom-color:var(--border);
  }
  :root[data-tema="claro"] .menu-lateral{ background:var(--bg-primary); }
  :root[data-tema="claro"] .menu-fundo{ background:rgba(0,0,0,.35); }

  /* Fotografia continua escura por baixo do texto branco do hero —
     é foto, não interface, e o overlay garante a leitura. */

  /* Ícone do botão: lua no escuro, sol no claro.
     A especificidade precisa vencer .hd-icone svg{display:block}, senão os
     dois ícones aparecem lado a lado. */
  #btnTema .icone-sol{ display:none; }
  #btnTema .icone-lua{ display:block; }
  :root[data-tema="claro"] #btnTema .icone-lua{ display:none; }
  :root[data-tema="claro"] #btnTema .icone-sol{ display:block; }

  /* Transição suave ao trocar, sem animar tudo o tempo todo. */
  :root.trocando-tema,
  :root.trocando-tema *{
    transition:background-color .3s ease, color .3s ease, border-color .3s ease !important;
  }

  /* -----------------------------------------------------
     Texto sobre fotografia não segue o tema.
     O hero, o portal e a faixa lifestyle têm foto escura por
     baixo em qualquer tema — se o texto acompanhasse o tema
     claro, ficaria preto sobre foto preta. Aqui a cor é fixa.
     ----------------------------------------------------- */
  :root[data-tema="claro"] #hero .hero-inner h1,
  :root[data-tema="claro"] #hero .hero-inner .eyebrow,
  :root[data-tema="claro"] #lifestyle .content h3,
  :root[data-tema="claro"] #lifestyle .content p,
  :root[data-tema="claro"] .portal-label h2,
  :root[data-tema="claro"] .cat-overlay .cat-name,
  :root[data-tema="claro"] .contato-hero-text h1{
    color:#FFFFFF;
  }
  :root[data-tema="claro"] #hero .hero-inner .eyebrow,
  :root[data-tema="claro"] .portal-label span,
  :root[data-tema="claro"] .cat-overlay .cat-cta{
    color:#B7FF00;
  }
  :root[data-tema="claro"] #hero .btn-link,
  :root[data-tema="claro"] .contato-hero-text .eyebrow{
    color:#FFFFFF; border-color:rgba(255,255,255,.45);
  }
  :root[data-tema="claro"] #hero .btn-link:hover{ color:#B7FF00; border-color:#B7FF00; }

  /* Cabeçalho antes de rolar fica sobre a foto do hero: mantém contraste
     claro. Ao rolar ele ganha fundo do tema e volta às cores normais. */
  :root[data-tema="claro"] header.site:not(.scrolled) .hd-btn,
  :root[data-tema="claro"] header.site:not(.scrolled) .hd-centro .universe{
    color:rgba(255,255,255,.92);
  }
  :root[data-tema="claro"] header.site:not(.scrolled) .hd-btn:hover{ color:#FFFFFF; }
  :root[data-tema="claro"] header.site:not(.scrolled) .hd-universo{
    border-color:rgba(255,255,255,.4) !important; color:rgba(255,255,255,.92);
  }
  :root[data-tema="claro"] header.site:not(.scrolled) .hd-btn:hover{ background:rgba(255,255,255,.12); }
  /* A logo é branca; sobre fundo claro precisa inverter ao rolar. */
  :root[data-tema="claro"] header.site.scrolled .brand-logo--header,
  :root[data-tema="claro"] .menu-logo,
  :root[data-tema="claro"] .footer-col .brand-logo--footer,
  :root[data-tema="claro"] .auth-logo{
    filter:invert(1);
  }
  :root[data-tema="claro"] .auth-logo{ filter:invert(1) drop-shadow(0 0 18px rgba(79,107,0,.2)); }

  /* Rodapé e demais seções sem foto seguem o tema normalmente. */
  :root[data-tema="claro"] .photo-overlay{
    background:linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,.04) 70%);
  }

  /* =====================================================
     GALERIA DO PRODUTO
     ===================================================== */
  .pdp-galeria{ display:flex; flex-direction:column; gap:12px; align-content:start; }

  .galeria-principal{
    position:relative; border-radius:4px; overflow:hidden;
    background:#0a0a0a;
  }
  .galeria-palco{
    position:relative; aspect-ratio:3/4; overflow:hidden;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 45%),
      radial-gradient(circle at 75% 80%, rgba(183,255,0,var(--gtint,.06)), transparent 50%),
      linear-gradient(160deg, #1c1c1c 0%, #060606 60%, #000 100%);
    cursor:zoom-in;
  }
  .galeria-palco img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block;
    transition:opacity .25s var(--ease);
  }

  /* Lupa: a mesma foto ampliada, revelada sobre a original. */
  .galeria-lupa{
    position:absolute; inset:0;
    background-repeat:no-repeat;
    background-size:220%;
    opacity:0; pointer-events:none;
    transition:opacity .2s var(--ease);
  }
  .galeria-palco.ampliando .galeria-lupa{ opacity:1; }
  .galeria-palco.ampliando img{ opacity:0; }

  .galeria-dica{
    position:absolute; left:14px; bottom:14px; z-index:3;
    background:rgba(0,0,0,.6); color:rgba(255,255,255,.85);
    padding:6px 11px; border-radius:20px;
    font-size:11px; letter-spacing:.04em;
    opacity:0; transition:opacity .25s var(--ease);
    pointer-events:none;
  }
  .galeria-principal:hover .galeria-dica{ opacity:1; }
  .galeria-palco.ampliando ~ .galeria-dica,
  .galeria-principal.sem-foto .galeria-dica{ opacity:0 !important; }

  /* Setas do carrossel */
  .galeria-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:4;
    width:40px; height:40px; border-radius:50%;
    background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18);
    color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .25s var(--ease), background .2s var(--ease);
  }
  .galeria-nav svg{ width:20px; height:20px; }
  .galeria-nav.anterior{ left:12px; }
  .galeria-nav.proxima{ right:12px; }
  .galeria-principal:hover .galeria-nav{ opacity:1; }
  .galeria-nav:hover{ background:rgba(0,0,0,.8); }
  .galeria-principal.uma-foto .galeria-nav,
  .galeria-principal.sem-foto .galeria-nav{ display:none; }

  /* Pontos — celular */
  .galeria-pontos{
    position:absolute; left:0; right:0; bottom:14px; z-index:4;
    display:none; justify-content:center; gap:7px;
  }
  .galeria-pontos .ponto{
    width:7px; height:7px; border-radius:50%; padding:0;
    background:rgba(255,255,255,.4); border:0; cursor:pointer;
    transition:background .2s var(--ease), transform .2s var(--ease);
  }
  .galeria-pontos .ponto.ativo{ background:var(--accent); transform:scale(1.35); }

  /* Miniaturas */
  .galeria-miniaturas{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:10px;
  }
  .galeria-miniaturas:empty{ display:none; }
  .galeria-miniaturas .mini{
    padding:0; border:1px solid var(--border); border-radius:3px;
    background:#0a0a0a; cursor:pointer; overflow:hidden; aspect-ratio:3/4;
    transition:border-color .2s var(--ease), opacity .2s var(--ease);
    opacity:.65;
  }
  .galeria-miniaturas .mini img{ width:100%; height:100%; object-fit:cover; display:block; }
  .galeria-miniaturas .mini:hover{ opacity:1; }
  .galeria-miniaturas .mini.ativa{ border-color:var(--accent); opacity:1; }

  @media(max-width:900px){
    .galeria-palco{ cursor:default; }
    .galeria-nav{ opacity:1; width:36px; height:36px; }
    .galeria-pontos{ display:flex; }
    .galeria-miniaturas{ display:none; }
    .galeria-dica{ display:none; }
  }

  /* =====================================================
     GALERIA — disposição em coluna de miniaturas + palco,
     no padrão das grandes lojas. A imagem tem teto de altura
     para não ocupar a tela inteira e empurrar o preço e o
     botão de compra para fora do campo de visão.
     ===================================================== */
  .pdp-galeria{
    display:grid;
    grid-template-columns:72px 1fr;
    gap:14px;
    align-items:start;
  }

  /* Miniaturas empilhadas à esquerda.
     No HTML a imagem principal vem antes das miniaturas (ordem correta para
     leitores de tela e para o celular). Na grade, cada uma é colocada
     explicitamente na sua coluna — sem isso a principal cairia na coluna
     estreita das miniaturas. */
  .galeria-miniaturas{
    grid-column:1; grid-row:1;
    display:flex; flex-direction:column; gap:10px;
    max-height:560px; overflow-y:auto; padding-right:2px;
  }
  .galeria-principal{ grid-column:2; grid-row:1; }
  .galeria-miniaturas .mini{ width:72px; height:96px; flex:none; aspect-ratio:auto; }

  /* Palco com teto de altura */
  .galeria-principal{ width:100%; }
  .galeria-palco{
    aspect-ratio:auto;
    height:min(560px, 62vh);
  }
  .galeria-palco img{ object-fit:cover; }

  /* Sem miniaturas (produto com uma foto só), o palco ocupa tudo */
  .pdp-galeria:has(.galeria-miniaturas:empty){ grid-template-columns:1fr; }

  @media(max-width:900px){
    .pdp-galeria{ grid-template-columns:1fr; }
    .galeria-palco{ height:min(460px, 56vh); }
  }
  @media(max-width:520px){
    .galeria-palco{ height:min(380px, 52vh); }
  }

  /* Selo de confiança abaixo do botão de compra */
  .pdp-note{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:12.5px; color:var(--text-secondary);
    margin-top:14px; text-align:center; line-height:1.5;
  }
  .pdp-note svg{ color:var(--accent); flex:none; }

  @media(max-width:900px){
    .galeria-miniaturas, .galeria-principal{ grid-column:1; grid-row:auto; }
  }

  /* =====================================================
     PÁGINA DO PRODUTO — disposição das grandes lojas
     Galeria à esquerda com miniaturas embaixo, painel de
     informações à direita acompanhando a rolagem.
     ===================================================== */
  .pdp-galeria{
    grid-template-columns:1fr;   /* miniaturas embaixo, não ao lado */
    gap:12px;
    position:sticky; top:104px;
  }
  .galeria-miniaturas,
  .galeria-principal{ grid-column:1; grid-row:auto; }

  .galeria-palco{ height:auto; aspect-ratio:4/5; }

  /* Miniaturas em faixa horizontal sob a imagem */
  .galeria-miniaturas{
    display:flex; flex-direction:row; gap:9px;
    max-height:none; overflow-x:auto; overflow-y:hidden;
    padding-bottom:4px; scrollbar-width:thin;
  }
  .galeria-miniaturas .mini{ width:66px; height:84px; }

  /* Painel de informações acompanha a rolagem em telas altas */
  /* A coluna de informações rola junto com a página — sem barra interna e sem
     aparência de caixa. Quem fica parada é a galeria, como nas grandes lojas. */
  .pdp-info{ min-width:0; }

  /* Blocos do painel, separados como na referência */
  .pdp-bloco{
    border-top:1px solid var(--border);
    padding-top:22px; margin-top:22px;
  }

  @media(max-width:960px){
    .pdp{ grid-template-columns:1fr; }
    .pdp-galeria, .pdp-info{ position:static; max-height:none; overflow:visible; }
    .galeria-palco{ aspect-ratio:1/1; }
    .galeria-miniaturas{ display:flex; }
  }
  @media(max-width:520px){
    .galeria-miniaturas .mini{ width:56px; height:72px; }
  }

/* =====================================================
   AVALIAÇÕES
   ===================================================== */
.estrelas{ display:inline-flex; align-items:center; gap:2px; color:var(--accent); line-height:0; }
.estrelas svg.vazia{ color:var(--border); }

.aval-carregando{ color:var(--text-muted); font-size:13px; padding:8px 0; }
.aval-vazio{ color:var(--text-muted); font-size:14px; margin:10px 0 0; }

.aval-cabecalho{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.aval-cabecalho h3{ font-size:17px; letter-spacing:.02em; margin:0; }

.aval-resumo{
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center;
  margin:18px 0 6px; padding:16px 18px;
  border:1px solid var(--border); border-radius:12px; background:var(--bg-surface);
}
.ar-nota{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:104px; }
.ar-nota strong{ font-size:34px; line-height:1; letter-spacing:-.02em; }
.ar-nota span{ font-size:12px; color:var(--text-muted); }

.ar-barras{ display:flex; flex-direction:column; gap:5px; }
.ar-linha{ display:grid; grid-template-columns:26px 1fr 26px; align-items:center; gap:9px;
  font-size:12px; color:var(--text-muted); }
.ar-barra{ height:6px; border-radius:3px; background:var(--border); overflow:hidden; }
.ar-barra > div{ height:100%; background:var(--accent); border-radius:3px; transition:width .4s ease; }
.ar-qtd{ text-align:right; }

.aval-lista{ display:flex; flex-direction:column; gap:2px; margin-top:14px; }
.aval-item{ padding:15px 0; border-bottom:1px solid var(--border); }
.aval-item:last-child{ border-bottom:0; }
.ai-topo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ai-autor{ font-size:13px; font-weight:600; }
.ai-verificada{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:2px 8px;
}
.ai-titulo{ font-size:14px; font-weight:600; margin-top:7px; }
.ai-texto{ font-size:14px; color:var(--text-primary); opacity:.85; margin:6px 0 0; line-height:1.55; }
.ai-data{ font-size:11.5px; color:var(--text-muted); margin-top:7px; }

/* Formulário */
.aval-form{
  margin-top:18px; padding:18px; border:1px solid var(--border);
  border-radius:12px; background:var(--bg-surface);
}
.aval-form h4{ margin:0 0 12px; font-size:14px; letter-spacing:.03em; text-transform:uppercase; }
.aval-estrelas-escolha{ display:flex; align-items:center; gap:4px; margin-bottom:14px; }
.aval-estrelas-escolha button{
  background:none; border:0; padding:2px; cursor:pointer; color:var(--border);
  line-height:0; transition:color .15s ease, transform .15s ease;
}
.aval-estrelas-escolha button:hover{ transform:scale(1.12); color:var(--accent); }
.aval-estrelas-escolha button.ativa{ color:var(--accent); }
.aval-estrelas-escolha button.ativa svg path{ fill:currentColor; }
#notaEscolhida{ margin-left:10px; font-size:12.5px; color:var(--text-muted); }
.aval-feedback{ font-size:12.5px; color:var(--text-muted); margin-top:9px; min-height:16px; }
.aval-ok{
  padding:16px 18px; border:1px solid var(--accent); border-radius:12px;
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  font-size:14px; margin-top:18px;
}

/* Depoimentos da home */
.depo-media{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted); }
.depo-media strong{ color:var(--text-primary); font-size:15px; }
.depo-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px; margin-top:26px;
}
.depo-card{
  border:1px solid var(--border); border-radius:14px; padding:20px;
  background:var(--bg-surface); display:flex; flex-direction:column; gap:9px;
}
.dc-titulo{ font-size:14.5px; font-weight:600; }
.dc-texto{ font-size:13.5px; line-height:1.6; opacity:.85; margin:0; flex:1; }
.dc-autor{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12.5px; color:var(--text-muted); margin-top:2px; }

@media(max-width:560px){
  .aval-resumo{ grid-template-columns:1fr; gap:16px; }
  .ar-nota{ flex-direction:row; gap:10px; }
  .ar-nota strong{ font-size:26px; }
}

/* =====================================================
   SOBRE  (substitui o antigo Manifesto)
   ===================================================== */
.inst-body--centro{ text-align:center; max-width:720px; margin:0 auto; }
.sobre-destaque{
  font-size:28px; font-weight:300; line-height:1.45;
  margin-bottom:26px; letter-spacing:-.01em;
}
.inst-body--centro p{ margin-bottom:18px; color:var(--text-secondary); }
.inst-body--centro .sobre-destaque{ color:var(--text-primary); }
.sobre-acoes{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px;
}
@media(max-width:560px){
  .sobre-destaque{ font-size:22px; }
  .sobre-acoes .btn{ width:100%; }
}

/* =====================================================
   CONTATO — página centrada
   ===================================================== */
.contato-sobre{
  margin-top:16px; font-size:14px; line-height:1.65;
  color:var(--text-secondary); max-width:520px;
}
.contato-sobre a{ color:var(--accent); cursor:pointer; white-space:nowrap; }
.contato-sobre a:hover{ text-decoration:underline; }

.contato-body{ max-width:1080px; margin:0 auto; }
.contato-body .contact-info-col{ text-align:center; }
.contato-body .contact-info-col .people-grid{ justify-content:center; }
.contato-body .contact-meta{ display:grid; gap:18px; justify-items:center; }
.contato-body .contact-meta p{ margin:0 auto; }
.contato-body .contact-whatsapp-btn{ margin-left:auto; margin-right:auto; }
.contato-body .contact-map-block{ text-align:center; }
.contato-body .contact-map{ max-width:900px; margin:0 auto; }

/* Avaliações ocupam a largura toda, abaixo do produto — sem coluna com
   rolagem própria, a página inteira rola de uma vez só. */
.pdp-avaliacoes-secao{
  max-width:1360px; margin:0 auto; padding:0 96px 140px;
}
.pdp-avaliacoes-secao:empty{ padding-bottom:60px; }
.pdp-avaliacoes-secao .aval-cabecalho{
  border-top:1px solid var(--border); padding-top:34px; margin-bottom:6px;
}
.pdp-avaliacoes-secao .aval-cabecalho h3{ font-size:22px; font-weight:400; }
.pdp-avaliacoes-secao .aval-resumo{ max-width:640px; }
.pdp-avaliacoes-secao .aval-lista{ max-width:820px; }
.pdp-avaliacoes-secao .aval-form{ max-width:640px; }
@media(max-width:960px){
  .pdp-avaliacoes-secao{ padding:0 24px 100px; }
}

/* Cabeçalho do Sobre acompanha o alinhamento central do texto */
#view-sobre .inst-hero{ text-align:center; }
#view-sobre .inst-hero{ margin:0 auto; }

/* =====================================================
   CONTATO — hero centrado, em vez do split
   A foto vira uma faixa larga e o texto fica centralizado
   abaixo dela, alinhado com o resto da página.
   ===================================================== */
#view-contato .contato-hero{
  grid-template-columns:1fr; min-height:auto;
  padding-top:132px;                 /* espaço do cabeçalho fixo */
}
#view-contato .contato-hero-media{
  height:34vh; min-height:240px; max-height:400px;
  max-width:1240px; width:100%; margin:0 auto;
  border-radius:16px;
}
#view-contato .contato-hero-media::after{
  background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, transparent 55%);
}
#view-contato .contato-hero-text{
  align-items:center; text-align:center;
  padding:38px 24px 0; max-width:640px; margin:0 auto;
}
#view-contato .contato-hero-text p{ max-width:100%; }
#view-contato .contato-sobre{ margin-left:auto; margin-right:auto; }
#view-contato .contato-body{ padding-top:64px; }

@media(max-width:960px){
  #view-contato .contato-hero{ padding-top:108px; }
  #view-contato .contato-hero-media{ height:26vh; min-height:180px; border-radius:12px; }
  #view-contato .contato-hero-text{ padding:28px 24px 0; }
}
#view-contato .contato-col-title{ text-align:center; }
#view-contato .contact-form-col{ max-width:560px; margin:0 auto; width:100%; }

/* =====================================================
   TEMA CLARO — cabeçalho legível fora do hero
   As regras acima deixam o cabeçalho branco antes de rolar porque, na home
   e no portal, ele fica por cima de uma foto escura. Nas demais telas o fundo
   é claro e o texto branco simplesmente sumia até a pessoa rolar a página.
   Aqui o cabeçalho volta às cores do tema sempre que NÃO houver foto atrás.
   ===================================================== */
:root[data-tema="claro"] body:not(:has(#view-home.active)):not(:has(#view-portal.active)) header.site:not(.scrolled){
  background:rgba(250,250,248,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
:root[data-tema="claro"] body:not(:has(#view-home.active)):not(:has(#view-portal.active)) header.site:not(.scrolled) .hd-btn,
:root[data-tema="claro"] body:not(:has(#view-home.active)):not(:has(#view-portal.active)) header.site:not(.scrolled) .hd-centro .universe{
  color:var(--text-primary);
}
:root[data-tema="claro"] body:not(:has(#view-home.active)):not(:has(#view-portal.active)) header.site:not(.scrolled) .hd-btn:hover{
  color:var(--accent); background:rgba(0,0,0,.05);
}
:root[data-tema="claro"] body:not(:has(#view-home.active)):not(:has(#view-portal.active)) header.site:not(.scrolled) .hd-universo{
  border-color:var(--border) !important; color:var(--text-primary);
}
:root[data-tema="claro"] body:not(:has(#view-home.active)):not(:has(#view-portal.active)) header.site:not(.scrolled) .brand-logo--header{
  filter:invert(1);
}

/* =====================================================
   PAINEL DO CLIENTE — modal, endereços, avaliações, atendimento
   ===================================================== */

/* Nível ADM ao lado de Membro / Influencer */
#contaNivel.adm{
  border-color:#FF5C5C; color:#FF5C5C;
  background:rgba(255,92,92,.1);
}

.btn-compacto{ padding:11px 18px; font-size:13px; }

.btn-perigo{
  background:transparent; color:#FF5C5C; border:1px solid #FF5C5C;
  padding:14px 26px;
}
.btn-perigo:hover{ background:#FF5C5C; color:#fff; }

.conta-vazio{
  text-align:center; padding:48px 24px;
  border:1px dashed var(--border); border-radius:14px;
}
.conta-vazio p{ color:var(--text-secondary); margin-bottom:8px; }
.conta-vazio p.suave{ font-size:13.5px; max-width:440px; margin:0 auto 22px; }
.conta-vazio .btn{ margin-top:14px; }

/* ---------- Modal ---------- */
.conta-modal-fundo{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.62); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  animation:contaModalEntra .18s ease;
}
@keyframes contaModalEntra{ from{ opacity:0; } to{ opacity:1; } }
.conta-modal{
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:16px; width:100%; max-width:520px;
  max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:contaModalSobe .22s var(--ease);
}
@keyframes contaModalSobe{ from{ transform:translateY(16px); } to{ transform:none; } }
.conta-modal-topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--border);
}
.conta-modal-topo h3{ font-size:17px; font-weight:500; margin:0; }
.conta-modal-fechar{
  background:none; border:0; color:var(--text-muted);
  font-size:26px; line-height:1; cursor:pointer; padding:0 4px;
}
.conta-modal-fechar:hover{ color:var(--text-primary); }
.conta-modal-corpo{ padding:24px; overflow-y:auto; }
.conta-modal-texto{ font-size:14px; line-height:1.65; color:var(--text-secondary); margin-bottom:12px; }
.conta-modal-texto strong{ color:var(--text-primary); }
.conta-modal-texto.suave{ font-size:13px; }
.conta-modal-erro{ color:#FF5C5C; font-size:13px; min-height:18px; margin-top:10px; }
.conta-modal-acoes{
  display:flex; gap:10px; justify-content:flex-end; margin-top:22px; flex-wrap:wrap;
}
.conta-modal-acoes .btn{ padding:13px 22px; font-size:13.5px; }

.conta-form-modal .field{ margin-bottom:16px; }
.form-duplo{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.opcional{ color:var(--text-muted); font-weight:400; text-transform:none; letter-spacing:0; }
.conta-check{
  display:flex; align-items:center; gap:9px; font-size:13.5px;
  color:var(--text-secondary); cursor:pointer; margin-top:4px;
}
.conta-check input{ width:auto; margin:0; }

/* CEP com retorno da busca */
.campo-cep{ position:relative; }
.cep-status{ display:block; font-size:12px; margin-top:6px; min-height:16px; color:var(--text-muted); }
.cep-status.ok{ color:var(--accent); }
.cep-status.erro{ color:#FF5C5C; }

/* ---------- Endereços ---------- */
.endereco-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px;
}
.endereco-cartao{
  position:relative; border:1px solid var(--border); border-radius:14px;
  padding:20px; background:var(--bg-surface);
  transition:border-color .2s ease;
}
.endereco-cartao:hover{ border-color:var(--text-muted); }
.endereco-cartao.padrao{ border-color:var(--accent); }
.endereco-selo{
  position:absolute; top:14px; right:14px;
  font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent);
  border-radius:999px; padding:2px 9px;
}
.endereco-rotulo{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:10px;
}
.endereco-linha{ font-size:14px; line-height:1.6; }
.endereco-linha.suave{ color:var(--text-secondary); font-size:13px; }
.endereco-acoes{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
}
.endereco-resumo{
  border:1px solid var(--border); border-radius:10px; padding:14px;
  font-size:13.5px; line-height:1.6; margin:14px 0;
  background:var(--bg-surface-alt);
}

.btn-acao{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--text-secondary); font:inherit; font-size:12.5px;
  padding:7px 12px; cursor:pointer;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.btn-acao:hover{ border-color:var(--accent); color:var(--accent); }
.btn-acao.perigo:hover{ border-color:#FF5C5C; color:#FF5C5C; background:rgba(255,92,92,.07); }

/* ---------- Zona de perigo ---------- */
.zona-perigo{
  margin-top:48px; padding:24px;
  border:1px solid rgba(255,92,92,.35); border-radius:14px;
  background:rgba(255,92,92,.04);
}
.zona-perigo h3{ font-size:15px; font-weight:500; color:#FF5C5C; margin-bottom:10px; }
.zona-perigo p{ font-size:13.5px; line-height:1.65; color:var(--text-secondary); margin-bottom:18px; max-width:560px; }

/* ---------- Minhas avaliações ---------- */
.minhas-aval-lista{ display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.minha-aval{
  border:1px solid var(--border); border-radius:14px; padding:20px;
  background:var(--bg-surface);
}
.ma-topo{ display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.ma-produto{ font-size:14.5px; font-weight:500; }
.ma-meta{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.ma-data{ font-size:12px; color:var(--text-muted); }
.ma-situacao{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--border); color:var(--text-muted);
}
.ma-situacao.publicada{ color:var(--accent); border-color:var(--accent); }
.ma-titulo{ font-size:14px; font-weight:500; margin-top:12px; }
.ma-texto{ font-size:13.5px; line-height:1.6; color:var(--text-secondary); margin:6px 0 0; }
.ma-acoes{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

/* ---------- Atendimento ---------- */
.tickets-topo{ margin-bottom:22px; }
.ticket-lista{ display:flex; flex-direction:column; gap:10px; }
.ticket-item{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:12px; padding:16px 18px;
  background:var(--bg-surface); color:inherit; font:inherit;
  transition:border-color .18s ease, transform .18s ease;
}
.ticket-item:hover{ border-color:var(--accent); transform:translateX(2px); }
.ticket-item.com-novidade{ border-left:3px solid var(--accent); }
.ti-assunto{ font-size:14.5px; font-weight:500; display:flex; align-items:center; gap:8px; }
.ti-ponto{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.ti-meta{ font-size:12px; color:var(--text-muted); margin-top:5px; }
.ti-dir{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.ti-data{ font-size:11.5px; color:var(--text-muted); }

.ticket-situacao{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--border); color:var(--text-muted);
}
.ticket-situacao.aberto{ color:#FFB020; border-color:#FFB020; }
.ticket-situacao.respondido{ color:var(--accent); border-color:var(--accent); }
.ticket-situacao.aguardando{ color:#FFB020; border-color:#FFB020; }
.ticket-situacao.resolvido{ color:var(--text-muted); }

.ticket-cabecalho{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--border);
}
.tc-meta{ display:block; font-size:12px; color:var(--text-muted); margin-top:8px; }


@media(max-width:700px){
  .form-duplo{ grid-template-columns:1fr; }
  .endereco-grid{ grid-template-columns:1fr; }

  .ticket-item{ flex-direction:column; align-items:flex-start; }
  .ti-dir{ flex-direction:row; align-items:center; gap:10px; }
  .conta-modal-acoes .btn{ flex:1; }
}

/* =====================================================
   CASHBACK
   ===================================================== */
.cb-painel{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  flex-wrap:wrap; padding:28px;
  border:1px solid var(--border); border-radius:16px;
  background:var(--bg-surface); margin-bottom:26px;
}
.cb-painel.com-saldo{
  border-color:var(--accent);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 9%, var(--bg-surface)) 0%,
    var(--bg-surface) 62%);
}
.cb-saldo{ display:flex; flex-direction:column; gap:5px; }
.cb-rotulo{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted);
}
.cb-valor{ font-size:38px; font-weight:300; line-height:1.05; letter-spacing:-.02em; }
.cb-painel.com-saldo .cb-valor{ color:var(--accent); }
.cb-prazo{
  font-size:12.5px; color:var(--text-secondary); margin-top:4px;
}
.cb-prazo.urgente{ color:#FFB020; font-weight:500; }

.cb-regras{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:14px; margin-bottom:34px;
}
.cb-regra{
  border:1px solid var(--border); border-radius:12px; padding:18px;
  background:var(--bg-surface);
}
.cb-num{
  display:block; font-size:22px; font-weight:400;
  color:var(--accent); margin-bottom:7px; letter-spacing:-.01em;
}
.cb-regra p{ font-size:12.5px; line-height:1.55; color:var(--text-secondary); margin:0; }

.cb-extrato{ display:flex; flex-direction:column; }
.cb-linha{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--border);
}
.cb-linha:last-child{ border-bottom:0; }
.cb-linha-titulo{ font-size:14px; }
.cb-linha-meta{ font-size:12px; color:var(--text-muted); margin-top:4px; }
.cb-linha-valor{ font-size:15px; font-weight:500; white-space:nowrap; }
.cb-linha-valor.ganho{ color:var(--accent); }
.cb-linha-valor.uso{ color:var(--text-secondary); }
.cb-linha-valor.expirado{ color:#FF5C5C; }

/* ---------- Cashback na sacola ---------- */
.cb-carrinho{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:13px 14px; margin:12px 0;
  border:1px solid var(--border); border-radius:11px;
  background:var(--bg-surface-alt);
  transition:border-color .18s ease, background .18s ease;
}
.cb-carrinho:hover{ border-color:var(--accent); }
.cb-carrinho.ativo{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}
.cb-carrinho input{ width:auto; margin:0; flex-shrink:0; accent-color:var(--accent); }
.cbc-texto{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.cbc-texto strong{ font-size:13px; font-weight:500; }
.cbc-texto em{ font-style:normal; font-size:11.5px; color:var(--text-muted); line-height:1.45; }
.cbc-valor{ font-size:14px; font-weight:500; color:var(--accent); white-space:nowrap; }

.cart-linha-desconto{ color:var(--accent); }
.cart-linha-desconto strong{ color:var(--accent); }

@media(max-width:560px){
  .cb-painel{ flex-direction:column; align-items:stretch; padding:22px; }
  .cb-painel .btn{ width:100%; }
  .cb-valor{ font-size:32px; }
}

/* O display:flex acima vence o atributo hidden (que é só display:none da
   folha do navegador). Sem isto o modal nasce aberto e não fecha. */
.conta-modal-fundo[hidden]{ display:none !important; }

/* Etiqueta de cashback na página do produto */
.pdp-cashback{
  display:inline-flex; align-items:center; gap:8px;
  margin:-6px 0 18px; padding:8px 14px;
  border:1px solid var(--accent); border-radius:999px;
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  color:var(--accent); font-size:13px; line-height:1.3;
}
.pdp-cashback strong{ font-weight:600; }
.pdp-cashback svg{ flex-shrink:0; }

/* Saldo existe, mas o carrinho ainda não comporta o abatimento */
.cb-carrinho.indisponivel{
  cursor:default; border-style:dashed;
  background:var(--bg-surface-alt);
}
.cb-carrinho.indisponivel:hover{ border-color:var(--border); }
.cb-carrinho.indisponivel .cbc-texto strong{ color:var(--text-secondary); }

/* =====================================================
   REGRA GERAL: hidden sempre esconde
   Qualquer elemento com display declarado (flex, grid, inline-flex…) ignora
   o atributo hidden, porque a regra do autor vence o display:none da folha
   do navegador. Isso já causou o contador do sininho virar bolinha vazia e
   o modal da conta nascer aberto. Uma regra só resolve a classe inteira.
   ===================================================== */
[hidden]{ display:none !important; }

/* =====================================================
   SALDO DE CASHBACK NO CABEÇALHO
   ===================================================== */
.hd-cashback{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--accent); background:transparent;
  color:var(--accent); font:inherit; font-size:12.5px; font-weight:500;
  white-space:nowrap;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.hd-cashback:hover{ background:var(--accent); color:var(--bg-primary); }
.hd-cashback svg{ flex-shrink:0; }

.hd-cashback-prazo{
  font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px;
  background:color-mix(in srgb, currentColor 16%, transparent);
}

/* Perto de vencer: muda para âmbar e pulsa uma vez, para a pessoa reparar
   sem que vire pisca-pisca. */
.hd-cashback.urgente{
  border-color:#FFB020; color:#FFB020;
  animation:cbPulso 1.6s ease 2;
}
.hd-cashback.urgente:hover{ background:#FFB020; color:#0D0D0D; }
@keyframes cbPulso{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,176,32,0); }
  50%    { box-shadow:0 0 0 5px rgba(255,176,32,.18); }
}

/* Em telas estreitas o cabeçalho já está cheio: some o valor e fica só o
   ícone com o ponto de alerta, para não empurrar os outros botões. */
@media(max-width:900px){
  .hd-cashback{ padding:7px 9px; gap:0; }
  .hd-cashback #hdCashbackValor{ display:none; }
  .hd-cashback-prazo{ display:none; }
  .hd-cashback.urgente{ position:relative; }
  .hd-cashback.urgente::after{
    content:''; position:absolute; top:3px; right:3px;
    width:6px; height:6px; border-radius:50%; background:#FFB020;
  }
}

/* =====================================================
   ANEXOS (prints de atendimento e fotos de avaliação)
   ===================================================== */
.anexos-area{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; margin-top:4px;
}
.anexos-grade{ display:contents; }

.anexo-item{
  position:relative; width:88px; height:88px; border-radius:10px;
  overflow:hidden; border:1px solid var(--border); background:var(--bg-surface-alt);
}
.anexo-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.anexo-item.enviando img{ opacity:.35; }

.anexo-carregando{
  position:absolute; inset:0; margin:auto; width:20px; height:20px;
  border:2px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:anexoGira .7s linear infinite;
}
@keyframes anexoGira{ to{ transform:rotate(360deg); } }

.anexo-remover{
  position:absolute; top:4px; right:4px;
  width:22px; height:22px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.68); color:#fff; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.anexo-remover:hover{ background:#FF5C5C; }

.anexo-botao{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:88px; height:88px; border-radius:10px; cursor:pointer;
  border:1px dashed var(--border); color:var(--text-muted);
  font-size:11px; text-align:center; transition:border-color .18s ease, color .18s ease;
}
.anexo-botao:hover{ border-color:var(--accent); color:var(--accent); }

.campo-dica{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:8px; }
.campo-contador{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:6px; text-align:right; }

/* Fotos dentro da conversa e das avaliações */
.tk-fotos, .ai-fotos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.tk-fotos img, .ai-fotos img{
  width:92px; height:92px; object-fit:cover; border-radius:9px;
  border:1px solid var(--border); display:block;
  transition:transform .18s ease, border-color .18s ease;
}
.tk-fotos a:hover img, .ai-fotos a:hover img{ transform:scale(1.04); border-color:var(--accent); }

.aval-dica-foto{ font-size:12.5px; color:var(--text-muted); margin:4px 0 16px; }
.aval-dica-foto a{ color:var(--accent); cursor:pointer; text-decoration:underline; }

/* =====================================================
   ATENDIMENTO — formulário em página, não popup
   ===================================================== */
.ticket-form{ max-width:680px; }
.tf-intro{
  font-size:13.5px; line-height:1.7; color:var(--text-secondary);
  padding:16px 18px; border-radius:11px; margin-bottom:26px;
  background:var(--bg-surface); border:1px solid var(--border);
}
.tf-linha{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ticket-form .field{ margin-bottom:20px; }
.tf-acoes{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
.tk-corpo{ font-size:14px; line-height:1.68; }

.ticket-encerrado{
  padding:20px; border-radius:12px; font-size:13.5px; line-height:1.7;
  color:var(--text-secondary); background:var(--bg-surface-alt);
  border:1px solid var(--border); margin-top:22px;
}
.ticket-encerrado strong{ display:block; color:var(--text-primary); margin-bottom:6px; }
.ticket-encerrado .btn{ margin-top:16px; }

.ticket-responder{ border-top:1px solid var(--border); padding-top:24px; margin-top:22px; }
.ticket-responder label{
  display:block; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-secondary); margin-bottom:10px;
}
.ticket-responder textarea{ width:100%; resize:vertical; }

/* =====================================================
   BBCODE renderizado
   ===================================================== */
.bb-quote{
  border-left:3px solid var(--border); padding:8px 0 8px 14px;
  margin:10px 0; color:var(--text-secondary); font-style:italic;
}
.bb-lista{ margin:10px 0 10px 20px; }
.bb-lista li{ margin-bottom:5px; }
.bb-hr{ border:0; border-top:1px solid var(--border); margin:14px 0; }
.bb-code{
  display:inline-block; padding:2px 7px; border-radius:5px;
  background:var(--bg-surface-alt); border:1px solid var(--border);
  font-family:ui-monospace, monospace; font-size:12.5px;
}

@media(max-width:700px){
  .tf-linha{ grid-template-columns:1fr; }
  .tf-acoes .btn{ flex:1; }
  .anexo-item, .anexo-botao{ width:74px; height:74px; }
}

/* =====================================================
   TICKET — leitura em quadro, no espírito dos fóruns clássicos
   Cada mensagem é um registro com uma coluna de identificação à esquerda
   e o conteúdo à direita. É mais fácil de varrer com o olho do que balões
   alternados, e deixa claro quem falou sem depender do alinhamento.
   ===================================================== */
.ticket-conversa{
  display:flex; flex-direction:column; gap:14px; padding:22px 0;
}

.tk-msg{
  display:grid; grid-template-columns:132px minmax(0,1fr);
  border:1px solid var(--border); border-radius:10px;
  background:var(--bg-surface); overflow:hidden;
}
.tk-msg.equipe{ border-color:color-mix(in srgb, var(--accent) 38%, var(--border)); }

/* Coluna de identificação */
.tk-quem{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:20px 12px; text-align:center;
  background:var(--bg-surface-alt); border-right:1px solid var(--border);
}
.tk-msg.equipe .tk-quem{
  background:color-mix(in srgb, var(--accent) 7%, var(--bg-surface-alt));
  border-right-color:color-mix(in srgb, var(--accent) 30%, var(--border));
}
.tk-avatar{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--bg-primary);
  color:var(--text-muted);
}
.tk-msg.equipe .tk-avatar{ border-color:var(--accent); color:var(--accent); }
.tk-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.tk-nome{ font-size:12.5px; font-weight:600; line-height:1.3; word-break:break-word; }
.tk-papel{
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; border:1px solid currentColor;
  color:var(--text-muted);
}
.tk-msg.equipe .tk-papel{ color:var(--accent); }

/* Coluna de conteúdo */
.tk-conteudo{ display:flex; flex-direction:column; min-width:0; }
.tk-msg-topo{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:10px 18px; border-bottom:1px solid var(--border);
  font-size:11.5px; color:var(--text-muted);
}
.tk-numero{ font-weight:600; }
.tk-corpo{ padding:18px; font-size:14px; line-height:1.72; flex:1; }
.tk-fotos{ padding:0 18px 18px; }

@media(max-width:640px){
  .tk-msg{ grid-template-columns:1fr; }
  .tk-quem{
    flex-direction:row; justify-content:flex-start; gap:11px;
    padding:12px 16px; text-align:left;
    border-right:0; border-bottom:1px solid var(--border);
  }
  .tk-msg.equipe .tk-quem{ border-bottom-color:color-mix(in srgb, var(--accent) 30%, var(--border)); }
  .tk-avatar{ width:34px; height:34px; }
  .tk-msg-topo{ padding:9px 16px; }
  .tk-corpo{ padding:16px; }
}

/* =====================================================
   SUGESTÕES DE COMPRA
   ===================================================== */
.upsell-secao{
  max-width:1360px; margin:0 auto; padding:0 96px 20px;
}
.upsell-topo{
  border-top:1px solid var(--border); padding-top:34px; margin-bottom:24px;
}
.upsell-topo h3{ font-size:22px; font-weight:400; margin:0; }

.upsell-grade{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:22px;
}
.upsell-card{ cursor:pointer; }
.uc-foto{
  position:relative; aspect-ratio:3/4; border-radius:10px;
  overflow:hidden; margin-bottom:12px; background:#0a0a0a;
}
.upsell-card:hover .uc-foto img{ transform:scale(1.04); }
.uc-foto img{ transition:transform .45s var(--ease); }
.uc-selo{
  position:absolute; top:10px; left:10px; z-index:2;
  background:var(--accent); color:var(--bg-primary);
  font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:4px;
}
.uc-nome{ font-size:13.5px; line-height:1.45; margin-bottom:6px; }
.uc-preco{ display:flex; align-items:baseline; gap:8px; font-size:14px; }
.uc-preco s{ font-size:12px; color:var(--text-muted); }
.uc-preco strong{ font-weight:500; }

/* ---------- Na sacola ---------- */
.cart-upsell{
  border-top:1px solid var(--border); padding-top:16px; margin-bottom:14px;
}
.cu-titulo{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:12px;
}
.cu-item{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.cu-foto{
  width:52px; height:66px; border-radius:7px; overflow:hidden;
  flex-shrink:0; background:#0a0a0a; position:relative;
}
.cu-info{ flex:1; min-width:0; }
.cu-nome{
  font-size:12.5px; line-height:1.4; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.cu-nome:hover{ color:var(--accent); }
.cu-preco{ font-size:13px; font-weight:500; margin-top:3px; }
.cu-add{
  flex-shrink:0; padding:7px 14px; border-radius:6px; cursor:pointer;
  border:1px solid var(--border); background:none;
  color:var(--text-secondary); font:inherit; font-size:12px;
  transition:border-color .16s ease, color .16s ease;
}
.cu-add:hover{ border-color:var(--accent); color:var(--accent); }

/* Etiqueta de cashback: convite para quem não tem conta.
   Um link discreto dentro da mesma pílula, separado por uma barra fina —
   nada de botão dentro de botão, que foi o que deixou a etiqueta pesada e
   apertada. */
.pdp-cashback.convite a{
  color:inherit; text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; font-weight:500; white-space:nowrap;
  padding-left:10px; margin-left:2px;
  border-left:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.pdp-cashback.convite a:hover{ text-decoration-thickness:2px; }

@media(max-width:960px){
  .upsell-secao{ padding:0 24px 20px; }
  .upsell-grade{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; }
}

/* Erro do checkout — precisa ser impossível de confundir com sucesso */
.checkout-erro{
  display:flex; align-items:flex-start; gap:12px;
  margin:14px 0; padding:16px 18px; border-radius:10px;
  background:rgba(255,92,92,.08); border:1px solid #FF5C5C;
  color:#FF5C5C; font-size:13.5px; line-height:1.6;
}
.checkout-erro svg{ flex-shrink:0; margin-top:1px; }
.checkout-erro strong{ display:block; font-weight:600; }
.checkout-erro ul{ margin:8px 0 0 18px; }
.checkout-erro em{
  display:block; margin-top:8px; font-style:normal;
  color:var(--text-secondary); font-size:12.5px;
}

/* Formas de pagamento — informativo, já que quem cobra é a Stripe */
.pg-explica{
  font-size:13px; line-height:1.65; color:var(--text-secondary);
  padding:14px 16px; border-radius:9px; margin-bottom:16px;
  background:var(--bg-surface); border:1px solid var(--border);
}
.pg-formas{ display:flex; flex-direction:column; gap:10px; }
.pg-forma{
  display:flex; align-items:center; gap:13px;
  padding:14px 16px; border-radius:9px;
  border:1px solid var(--border); background:var(--bg-surface);
}
.pg-forma svg{ flex-shrink:0; color:var(--accent); }
.pg-forma strong{ display:block; font-size:13.5px; font-weight:500; }
.pg-forma em{ font-style:normal; font-size:12px; color:var(--text-muted); }
.pg-forma em b{ color:var(--text-secondary); font-weight:600; }

/* O cartão de frete virou label com radio real */
.radio-card input[type=radio]{ position:absolute; opacity:0; pointer-events:none; }

/* FAQ e políticas centralizadas, como o Sobre e o Contato */
#view-faq .inst-hero, #view-policy .inst-hero{ text-align:center; margin:0 auto; }
#view-faq .inst-body, #view-policy .inst-body{ max-width:820px; margin:0 auto; }
#view-policy .policy-updated{ text-align:center; }

/* Convite para avaliar, nos pedidos já entregues */
.pc-avaliar{
  margin-top:16px; padding:16px 18px; border-radius:11px;
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.pc-avaliar-texto strong{ display:block; font-size:14px; margin-bottom:4px; }
.pc-avaliar-texto span{ font-size:12.5px; color:var(--text-secondary); line-height:1.55; }
.pc-avaliar-pecas{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.pc-avaliar-pecas .btn{ padding:9px 16px; font-size:12.5px; }

/* Destaque discreto para "Encontre para Mim" no menu — é uma porta de
   captação de demanda, não mais um link de navegação. */
.menu-lateral a.menu-encontre{ color:var(--accent); }
.menu-lateral a.menu-encontre::after{
  content:"↗"; margin-left:6px; font-size:.85em; opacity:.7;
}

/* ---------- Retomar pagamento abandonado ----------
   Aparece no cartão do pedido quando ele ficou "aguardando pagamento".
   Amarelo, não vermelho: não é erro, é uma tarefa pendente — e o texto
   deixa claro que nada foi cobrado, que é o medo real de quem voltou. */
.pc-pagar{
  margin-top:14px; padding:15px; border-radius:8px;
  background:rgba(255,176,32,.07); border:1px solid rgba(255,176,32,.3);
}
.pc-pagar-texto strong{
  display:block; font-size:13.5px; font-weight:500; color:#FFB020; margin-bottom:5px;
}
.pc-pagar-texto span{
  display:block; font-size:12.5px; color:var(--text-secondary); line-height:1.6;
}
.pc-pagar-btn{ width:100%; margin-top:13px; }
.pc-pagar-erro{
  margin-top:10px; font-size:12.5px; color:var(--error); line-height:1.55;
}
.pc-pagar-erro:empty{ display:none; }

/* ---------- Convite para o canal do WhatsApp ----------
   Centralizado na tela, com o fundo escurecido: é um convite que merece
   atenção, não um aviso de canto. Só aparece uma vez por pessoa e só depois
   que ela escolheu um universo, então não atrapalha quem está navegando. */
.canal-wa{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.68);
  /* Desfoca a loja atrás: o convite fica sozinho no foco em vez de competir
     com as fotos das peças. O prefixo -webkit- é para o Safari do iPhone,
     que ainda precisa dele. */
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.canal-wa.aberto{ opacity:1; pointer-events:auto; }

.canal-wa-caixa{
  position:relative; width:100%; max-width:390px;
  padding:34px 28px 26px; text-align:center;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  /* Entra crescendo do centro, em vez de subir de baixo. */
  transform:scale(.94);
  transition:transform .35s var(--ease);
}
.canal-wa.aberto .canal-wa-caixa{ transform:scale(1); }

.canal-wa-fechar{
  position:absolute; top:10px; right:12px;
  width:30px; height:30px; border:none; border-radius:50%;
  background:none; color:var(--text-muted); font-size:22px; line-height:1; cursor:pointer;
}
.canal-wa-fechar:hover{ background:var(--bg-surface-alt); color:var(--text-primary); }

.canal-wa-icone{
  width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366;
}
.canal-wa-icone svg{ width:30px; height:30px; color:#fff; }

.canal-wa-caixa h3{
  font-size:19px; font-weight:500; margin-bottom:10px; letter-spacing:-.01em;
  color:var(--text-primary);
}
.canal-wa-caixa p{
  font-size:13.5px; line-height:1.65; color:var(--text-secondary); margin-bottom:22px;
}

.canal-wa-btn{
  display:block; padding:14px; border-radius:8px; text-decoration:none;
  background:#25D366; color:#fff; font-size:14.5px; font-weight:600;
  transition:background .2s var(--ease);
}
.canal-wa-btn:hover{ background:#1FB855; }

.canal-wa-depois{
  display:block; width:100%; margin-top:10px; padding:10px;
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:12.5px; color:var(--text-muted);
}
.canal-wa-depois:hover{ color:var(--text-secondary); }

@media(prefers-reduced-motion:reduce){
  .canal-wa, .canal-wa-caixa{ transition:none; }
}

/* =====================================================
   VISUALIZADOR DE FOTO EM TELA CHEIA

   No computador a lupa segue o mouse. No celular não existe "passar o
   mouse" — sem esta tela, quem quisesse ver o tecido de perto não tinha
   como, e comprar roupa sem ver o tecido é o que faz desistir ou devolver.
   ===================================================== */
.foto-cheia{
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center;
  background:#000;
  opacity:0; transition:opacity .25s var(--ease);
}
.foto-cheia.aberto{ opacity:1; }

.fc-palco{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  /* Desliga os gestos do navegador: a pinça e o arrasto são tratados no
     JS. Sem isto o navegador daria zoom na PÁGINA inteira, levando junto
     o cabeçalho e o botão de comprar. */
  touch-action:none;
  cursor:zoom-in;
  user-select:none; -webkit-user-select:none;
}

.fc-palco img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  transform-origin:center center;
  -webkit-user-drag:none; user-drag:none; pointer-events:none;
}
.fc-palco img.ampliada{ cursor:grab; }

.fc-fechar{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; z-index:2;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.12); border:none; color:#fff;
  font-size:26px; line-height:1; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.fc-fechar:hover{ background:rgba(255,255,255,.22); }

.fc-contador{
  position:absolute; top:calc(22px + env(safe-area-inset-top)); left:0; right:0; z-index:2;
  text-align:center; font-size:13px; color:rgba(255,255,255,.75);
  pointer-events:none;
}

.fc-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.12); border:none; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.fc-nav:hover{ background:rgba(255,255,255,.22); }
.fc-nav svg{ width:22px; height:22px; }
.fc-nav.anterior{ left:14px; }
.fc-nav.proxima{ right:14px; }

.fc-dica{
  position:absolute; bottom:calc(28px + env(safe-area-inset-bottom)); left:50%;
  transform:translateX(-50%); z-index:2;
  padding:9px 16px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.12); color:#fff; font-size:12.5px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:opacity .4s ease;
}
/* Ensina uma vez e sai da frente. */
.fc-dica.sumiu{ opacity:0; }

/* No computador as setas laterais bastam; a dica de pinça não se aplica. */
@media(hover: hover) and (pointer: fine){
  .fc-dica{ display:none; }
  .fc-palco{ cursor:zoom-in; }
}

/* No celular as setas ocupam espaço sobre a foto — o arrasto já troca de
   imagem, e o contador diz onde a pessoa está. */
@media(max-width:700px){
  .fc-nav{ display:none; }
}

/* Dica de toque na galeria da página, só onde não há mouse. */
.galeria-dica-toque{ display:none; }
@media(hover: none), (pointer: coarse){
  .galeria-dica{ display:none !important; }
  .galeria-dica-toque{
    display:block;
    position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
    padding:6px 13px; border-radius:999px; white-space:nowrap;
    background:rgba(0,0,0,.55); color:#fff; font-size:11.5px;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    pointer-events:none;
  }
  .galeria-principal.sem-foto .galeria-dica-toque{ display:none; }
}

@media(prefers-reduced-motion:reduce){
  .foto-cheia, .fc-dica, .fc-palco img{ transition:none !important; }
}

/* =====================================================
   PREENCHIMENTO AUTOMÁTICO DO NAVEGADOR

   Quando o Chrome preenche um campo sozinho (e-mail, nome, CPF salvos), ele
   pinta o fundo com uma cor PRÓPRIA — um azul claro — e ignora o
   background-color do site. O texto continua vindo da nossa variável de
   tema. No tema escuro isso dá texto branco sobre fundo azul claro: a
   pessoa digita e não enxerga o que escreveu.

   Pior no checkout, que é onde o navegador mais preenche sozinho e onde
   errar um dígito do CPF ou do CEP custa a venda.

   A correção usa duas propriedades que o Chrome respeita mesmo no estado
   de autofill:
     box-shadow inset — pinta o fundo por cima do dele
     -webkit-text-fill-color — manda na cor do texto

   Como as duas leem as variáveis do tema, o campo preenchido acompanha a
   troca de tema como qualquer outro.

   A transição gigante é o truque conhecido para o Chrome não reaplicar a
   cor dele durante a animação de preenchimento.
   ===================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--bg-surface) inset !important;
          box-shadow:0 0 0 1000px var(--bg-surface) inset !important;
  -webkit-text-fill-color:var(--text-primary) !important;
  caret-color:var(--text-primary);
  transition:background-color 600000s 0s, color 600000s 0s;
}

/* Firefox usa outro seletor e respeita background normalmente, mas a cor do
   texto precisa ser dita da mesma forma. */
input:autofill,
textarea:autofill,
select:autofill{
  background-color:var(--bg-surface) !important;
  color:var(--text-primary) !important;
}