/* zohr-brand.css — identidade visual ZOHR (perfumaria de autor, ago/2026)
 * Carregado DEPOIS de style.css (tema ja recolorido) para sobrescrever.
 * Design system ZOHR:
 *   - Fonte unica: Montserrat, peso 400 dominante. Titulos em CAIXA ALTA com
 *     letter-spacing largo; base 15px / line-height 1.6 / letter-spacing .05em.
 *   - Paleta MONOCROMATICA de off-whites QUENTES: preto #0F0F0F, branco,
 *     borda #E8E8E1, fundo #F7F7F7 / #F2F2F2, cinza de apoio #999.
 *   - ACENTO champagne #B79A6B, usado com PARCIMONIA: filete, borda de item
 *     ativo, badge, hover e numero em destaque. NUNCA como fundo de area
 *     grande, nunca em texto corrido.
 *   - RAIO ZERO em tudo. Linhas de 1px. Sem gradiente decorativo, sem sombra
 *     pesada, sem cor saturada.
 *   - Controles: botao e campo com 45px de altura minima, borda 1px.
 * Os nomes de classe .pt-* foram MANTIDOS de proposito — sao o contrato com os
 * templates PHP da loja. O que mudou aqui e a paleta e o refino tipografico.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{
    /* ---- Paleta ZOHR (aprovada pelo cliente) ---- */
    --zh-preto:            #0F0F0F;  /* texto, CTAs, rodape, faixas invertidas */
    --zh-branco:           #FFFFFF;
    --zh-champagne:        #B79A6B;  /* ACENTO — filete, item ativo, badge, hover */
    --zh-champagne-claro:  #D9C6A5;  /* acento sobre fundo preto */
    --zh-champagne-escuro: #7A6440;  /* acento em TEXTO sobre fundo claro — escurecido para passar AA em 11px (era #8C7448 = 4.46:1) */
    --zh-borda:            #E8E8E1;  /* off-white quente — bordas em fundo claro */
    --zh-suave:            #F7F7F7;  /* fundo de bloco / caixa de imagem pequena */
    --zh-dim:              #F2F2F2;  /* separadores e fundos apagados */
    --zh-cinza:            #999999;  /* texto de apoio */
    --zh-grafite:          #1C1D1D;  /* preco e numeros */
    --zh-hover:            #2B2B2B;  /* hover do botao preto */
    --zh-ativo:            #040404;  /* :active do botao preto */

    /* ---- Papeis derivados (nao sao cores novas: sao usos dos tons acima) ---- */
    --zh-texto:            #3A3A3A;  /* corpo de texto longo em fundo claro */
    --zh-sobre-preto:      #D8D8D2;  /* texto secundario sobre preto (off-white quente) */
    --zh-linha-escura:     #303030;  /* bordas dentro de areas pretas */
    --zh-foco:             rgba(183, 154, 107, .45); /* halo de foco, champagne */

    /* ---- Metricas da marca ---- */
    --zh-raio:             0;        /* raio ZERO em tudo */
    --zh-controle:         45px;     /* altura minima de botao e campo */
    --zh-ls-base:          .05em;    /* letter-spacing do texto corrido */
    --zh-ls-titulo:        .05em;    /* titulos */
    --zh-ls-caixa-alta:    .18em;    /* botoes, eyebrows, rotulos */

    /* ---- Apelidos legados .pt-* ----------------------------------------
       Telas da loja ainda leem estes nomes em <style> inline (por exemplo
       loja/meus-dados/cadastro.php). Ficam como apelidos dos tokens ZOHR para
       aquelas telas nao perderem a cor. NAO use em codigo novo — use --zh-*.
       (--pt-delay nao entra aqui: quem define e o JS da home, em loja.php.) */
    --pt-preto:       var(--zh-preto);
    --pt-branco:      var(--zh-branco);
    --pt-cinza-claro: var(--zh-sobre-preto);
    --pt-cinza-medio: var(--zh-cinza);
    --pt-cinza-suave: var(--zh-dim);
    --pt-linha:       var(--zh-borda);
    --pt-fundo-suave: var(--zh-suave);
    --pt-hover:       var(--zh-hover);
    --pt-texto:       var(--zh-texto);
}

/* ============================================================
   TIPOGRAFIA — Montserrat em tudo (peso 400 dominante)
   ============================================================ */
body,
input, textarea, select, button,
p, a, span, li, td, th, label, dd, dt, small, strong, em, blockquote,
.tt-base-text, .tt-price, .tt-product-single-info,
.tt-menu-list, .product-name{
    font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* Base da marca: 15px / 1.6 / .05em — texto arejado, nada apertado. */
body{
    font-weight:400;
    font-size:15px;
    line-height:1.6;
    letter-spacing:var(--zh-ls-base);
    color:var(--zh-preto);
}
/* Campos e tabelas voltam a um tracking discreto: .05em em dado digitado
   (CPF, CEP, valor) atrapalha a leitura. */
input, select, textarea, .form-control,
table, td, th{ letter-spacing:.01em; }

/* Titulos: Montserrat 400, CAIXA ALTA, letter-spacing largo, linha curta */
h1, h2, h3, h4, h5, h6,
.tt-title, .product-title, .tt-collapse-title,
.tt-desctop-parent-menu, .tt-megamenu-col-01,
.heading-title, .tt-title-sub, .title-with-button .title{
    font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:var(--zh-ls-titulo);
    line-height:1.15;
    color:var(--zh-preto);
}

/* Foco visivel: filete champagne em vez do halo azul do navegador. */
a:focus-visible,
button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, .pt-btn:focus-visible{
    outline:1px solid var(--zh-champagne);
    outline-offset:2px;
}

/* ============================================================
   CAMPOS — 45px de altura, borda 1px, raio zero
   ============================================================ */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
select, textarea, .form-control{
    box-sizing:border-box;
    min-height:var(--zh-controle);
    padding:11px 14px;
    border:1px solid var(--zh-borda);
    border-radius:var(--zh-raio);
    background:var(--zh-branco);
    color:var(--zh-preto);
    box-shadow:none;
}
textarea{ min-height:110px; }
/* Excecao: os contadores de quantidade tem geometria propria no tema (altura
   fixa e setinhas posicionadas por cima) — nao entram na caixa de 45px. */
.input-counter input,
input.input--ys,
.cart-qty-input{
    min-height:0;
    padding:6px 10px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="tel"]:focus, input[type="number"]:focus, input[type="search"]:focus,
select:focus, textarea:focus, .form-control:focus{
    border-color:var(--zh-preto);
    box-shadow:0 0 0 2px var(--zh-foco);
    outline:none;
}
::placeholder{ color:var(--zh-cinza); opacity:1; }

/* ============================================================
   CTAs — botoes pretos retangulares, texto branco caixa alta
   ============================================================ */
/* pele comum de todo botao: retangular + Montserrat */
.btn, .btn--ys, .link-button, .button--border-thick,
.btn-primary, .btn-AddCart, .btn-addtocart{
    border-radius:var(--zh-raio) !important;
    font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    text-transform:uppercase;
    letter-spacing:var(--zh-ls-caixa-alta);
    font-weight:500;
}
/* CTAs da marca: fundo preto, hover #2B2B2B, active #040404 (spec ZOHR) */
.btn--ys, .btn-primary, .btn-AddCart, .btn-addtocart,
.link-button, .button--border-thick{
    min-height:var(--zh-controle);
    padding:11px 20px;
    border-width:1px;
    border-style:solid;
    background-color:var(--zh-preto) !important;
    border-color:var(--zh-preto) !important;
    color:var(--zh-branco) !important;
    transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn--ys:hover, .btn--ys:focus,
.btn-primary:hover, .btn-primary:focus,
.btn-AddCart:hover, .btn-addtocart:hover,
.link-button:hover, .button--border-thick:hover{
    background-color:var(--zh-hover) !important;
    border-color:var(--zh-hover) !important;
    color:var(--zh-branco) !important;
}
.btn--ys:active, .btn-primary:active, .btn-AddCart:active,
.btn-addtocart:active, .link-button:active, .button--border-thick:active{
    background-color:var(--zh-ativo) !important;
    border-color:var(--zh-ativo) !important;
}
/* variante clara do tema sobre fundo escuro: branca vazada */
/* Variante "light" = OUTLINE PRETO: todos os usos reais (carrinho, sidebar de busca)
   sao sobre fundo claro — branco-vazado ficava invisivel. Em fundo escuro use .pt-btn--ghost. */
.btn--ys.btn--light{
    background:var(--zh-branco) !important;
    border:1px solid var(--zh-preto) !important;
    color:var(--zh-preto) !important;
}
.btn--ys.btn--light:hover{
    background:var(--zh-preto) !important;
    border-color:var(--zh-preto) !important;
    color:var(--zh-branco) !important;
}

/* ---- Links e preco ----
   Hover em champagne ESCURO: o #B79A6B puro nao tem contraste para texto sobre
   branco. Sobre preto quem entra e o champagne claro. */
a{ color:var(--zh-preto); transition:color .18s ease; }
a:hover, a:focus{ color:var(--zh-champagne-escuro); }
.tt-price .new-price, .new-price,
.product__inside__price, .price{
    color:var(--zh-grafite);
    font-weight:500;
    letter-spacing:.04em;
}
.tt-price-old, .price-old{ color:var(--zh-cinza); font-weight:400; }
.breadcrumb .active{ color:var(--zh-cinza); }

/* ---- Selos/badges ----
   Padrao preto; a etiqueta de oferta e o unico lugar do catalogo onde o
   champagne aparece como fundo — selo pequeno, uso pontual. */
.tt-label-new, .tt-label-sale,
.product-labels .new, .product-labels .sale,
.tt-promo-fixed, .tt-badge,
.product__inside__labels span{
    background-color:var(--zh-preto) !important;
    color:var(--zh-branco) !important;
    border-radius:var(--zh-raio) !important;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-weight:500;
}
.tt-label-sale, .product-labels .sale, .tt-promo-fixed{
    background-color:var(--zh-champagne) !important;
    color:var(--zh-preto) !important;
}

/* ============================================================
   MINI DESIGN-SYSTEM .pt- (usado pelas paginas institucionais)
   ============================================================ */
.pt-section{ padding:clamp(56px, 9vw, 110px) 0; }
.pt-section--dark{ background:var(--zh-preto); color:var(--zh-branco); }
.pt-section--dark h1, .pt-section--dark h2, .pt-section--dark h3,
.pt-section--dark h4, .pt-section--dark h5, .pt-section--dark h6,
.pt-section--dark a{ color:var(--zh-branco); }
.pt-section--dark a:hover{ color:var(--zh-sobre-preto); }

/* Eyebrow: rotulo miudo em caixa alta, precedido de um filete champagne.
   E o gesto de acento mais repetido do layout — por isso fica com 28px de
   linha, nao com fundo. */
.pt-eyebrow{
    display:inline-block;
    margin-bottom:14px;
    font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size:11px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.3em;
    color:var(--zh-champagne-escuro);
}
.pt-eyebrow:before{
    content:"";
    display:inline-block;
    width:28px;
    height:1px;
    margin-right:12px;
    vertical-align:middle;
    background:var(--zh-champagne);
}
.pt-section--dark .pt-eyebrow{ color:var(--zh-champagne-claro); }
.pt-section--dark .pt-eyebrow:before{ background:var(--zh-champagne-claro); }

.pt-title{
    margin:0 0 20px;
    font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(26px, 3.4vw, 46px);
    letter-spacing:.1em;
    line-height:1.12;
    color:var(--zh-preto);
}
.pt-section--dark .pt-title{ color:var(--zh-branco); }

.pt-lead{
    margin:0 0 18px;
    font-size:16px;
    line-height:1.75;
    font-weight:400;
    letter-spacing:.02em;
    color:var(--zh-texto);
}
.pt-section--dark .pt-lead{ color:var(--zh-sobre-preto); }

.pt-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:var(--zh-controle);
    padding:13px 30px;
    background:var(--zh-preto);
    border:1px solid var(--zh-preto);
    border-radius:var(--zh-raio);
    color:var(--zh-branco) !important;
    font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size:12px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:var(--zh-ls-caixa-alta);
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    transition:background .18s, border-color .18s, color .18s;
}
.pt-btn:hover, .pt-btn:focus{
    background:var(--zh-hover);
    border-color:var(--zh-hover);
    color:var(--zh-branco) !important;
    text-decoration:none;
}
.pt-btn:active{
    background:var(--zh-ativo);
    border-color:var(--zh-ativo);
}
.pt-btn--ghost{
    background:transparent;
    border:1px solid var(--zh-branco);
    color:var(--zh-branco) !important;
}
/* Sobre preto o hover do vazado acende em champagne antes de inverter. */
.pt-btn--ghost:hover, .pt-btn--ghost:focus{
    background:var(--zh-champagne);
    border-color:var(--zh-champagne);
    color:var(--zh-preto) !important;
}

/* Sinal grafico decorativo da marca (o caractere solto dos titulos).
   E um detalhe, entao vai em champagne. */
.pt-plus{
    display:inline-block;
    font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight:300;
    font-size:clamp(44px, 6vw, 104px);
    line-height:1;
    color:var(--zh-champagne);
}
.pt-section--dark .pt-plus{ color:var(--zh-champagne-claro); }

/* numero gigante das secoes de metrica — "destaque de dado" em champagne */
.pt-num{
    display:block;
    font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight:300;
    font-size:clamp(38px, 5.4vw, 72px);
    line-height:1.05;
    letter-spacing:.04em;
    color:var(--zh-champagne-escuro);
}
.pt-section--dark .pt-num{ color:var(--zh-champagne-claro); }

/* grids responsivos */
.pt-grid-2{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:32px;
}
.pt-grid-4{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:24px;
}
@media (max-width:991px){
    .pt-grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
    .pt-grid-2{ grid-template-columns:1fr; }
    .pt-grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
}

/* ============================================================
   Menu da loja (estrutura preservada do re-skin anterior)
   ============================================================ */
.mdp-shop-menu{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    width:100%;
}

.mdp-shop-menu > li{
    float:none !important;
    flex:0 0 auto;
}

/* Item do menu: a navegacao nao muda de cor no hover, so ganha um filete
   champagne. A borda transparente ja fica reservada para nao deslocar a linha. */
.mdp-shop-menu > li > a{
    white-space:nowrap;
    text-transform:uppercase;
    font-weight:400;
    letter-spacing:.12em;
    border-bottom:1px solid transparent;
    transition:border-color .18s ease;
}
.mdp-shop-menu > li > a:hover,
.mdp-shop-menu > li > a:focus{
    border-bottom-color:var(--zh-champagne);
}

.mdp-shop-menu .mdp-menu-categories{
    position:relative;
}

.mdp-shop-menu .mdp-category-dropdown{
    width:300px !important;
    min-width:300px;
    max-height:min(420px, 70vh);
    overflow-y:auto;
    overflow-x:hidden;
    padding:10px 0;
    text-align:left;
}

.mdp-shop-menu .mdp-category-dropdown > li > a{
    display:block;
    padding:10px 18px;
    white-space:normal;
    line-height:1.25;
}

.mdp-shop-menu .dl-back,
.mdp-shop-menu .dl-close{
    display:none;
}

/* ============================================================
   Rodape — cards de confianca (mono, borda de 1px, sem sombra)
   ============================================================ */
.mdp-footer-trust{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    align-items:stretch;
    gap:16px;
    margin-top:26px;
}

.mdp-footer-trust-card{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:20px;
    border:1px solid var(--zh-borda);
    border-radius:var(--zh-raio);
    background:var(--zh-branco);
    box-shadow:none;
}

.mdp-footer-trust-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--zh-raio);
    background:var(--zh-preto);
    color:var(--zh-branco);
    font-size:23px;
}

.mdp-footer-trust-content{
    min-width:0;
}

.mdp-footer-trust-label{
    display:block;
    margin-bottom:8px;
    color:var(--zh-preto);
    font-size:11px;
    line-height:1.2;
    font-weight:500;
    letter-spacing:.2em;
    text-transform:uppercase;
}

.mdp-footer-payment-logo{
    display:block;
    width:160px;
    max-width:100%;
    margin:0 0 10px;
    filter:grayscale(1);
}

.mdp-footer-security-logo{
    display:block;
    width:170px;
    max-width:100%;
    margin:0 0 10px;
    filter:grayscale(1);
}

.mdp-footer-trust-card p{
    margin:0 0 12px;
    color:var(--zh-texto);
    font-size:14px;
    line-height:1.45;
}

.mdp-payment-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.mdp-payment-tags span{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 10px;
    border-radius:var(--zh-raio);
    background:var(--zh-branco);
    border:1px solid var(--zh-borda);
    color:var(--zh-preto);
    font-size:11px;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    line-height:1.1;
}

/* ---- Card de contato ---- */
.mdp-contact-list{
    list-style:none;
    margin:0;
    padding:0;
}

.mdp-contact-list li{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
    color:var(--zh-texto);
    font-size:14px;
    line-height:1.35;
}

.mdp-contact-list li:last-child{
    margin-bottom:0;
}

.mdp-contact-list .icon{
    color:var(--zh-preto);
    font-size:16px;
}

.mdp-contact-list a{
    color:var(--zh-texto);
}

.mdp-contact-list a:hover{
    color:var(--zh-champagne-escuro);
}

/* ---- Selos sutis (Mercado Pago / Cloudflare) ---- */
.mdp-footer-trust-card--subtle{
    align-items:center;
    gap:0;
    padding:16px 18px;
    background:var(--zh-branco);
    box-shadow:none;
}

.mdp-footer-trust-card--subtle .mdp-footer-trust-label{
    margin-bottom:4px;
    font-size:11px;
    color:var(--zh-cinza);
}

.mdp-footer-trust-card--subtle p{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin:0;
    color:var(--zh-cinza);
    font-size:13px;
}

.mdp-footer-inline-logo{
    height:20px;
    width:auto;
    max-width:120px;
    opacity:.85;
    filter:grayscale(1);
}

/* ============================================================
   Faixa de beneficios + painel da marca (home)
   ============================================================ */
.mdp-experience{
    margin:40px 0 0;
    padding:0 0 34px;
}

.mdp-benefits{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    margin-bottom:18px;
}

.mdp-benefit{
    min-height:82px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:16px 18px;
    border:1px solid var(--zh-borda);
    border-radius:var(--zh-raio);
    background:var(--zh-branco);
    box-shadow:none;
}

.mdp-benefit .icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--zh-raio);
    background:var(--zh-suave);
    color:var(--zh-preto);
    font-size:22px;
}

.mdp-benefit strong{
    display:block;
    color:var(--zh-preto);
    font-size:14px;
    line-height:1.15;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.mdp-benefit small{
    display:block;
    margin-top:4px;
    color:var(--zh-cinza);
    font-size:13px;
    line-height:1.25;
}

.mdp-brand-panel{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0, .95fr) minmax(320px, 1.05fr);
    align-items:center;
    gap:26px;
    min-height:270px;
    padding:30px 34px;
    border-radius:var(--zh-raio);
    background:var(--zh-suave);
    border:1px solid var(--zh-borda);
}

.mdp-brand-copy{
    position:relative;
    z-index:1;
}

.mdp-eyebrow{
    display:inline-block;
    margin-bottom:10px;
    color:var(--zh-champagne-escuro);
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.3em;
    font-size:11px;
}
/* mesmo filete do .pt-eyebrow, para os dois rotulos falarem a mesma lingua */
.mdp-eyebrow:before{
    content:"";
    display:inline-block;
    width:28px;
    height:1px;
    margin-right:12px;
    vertical-align:middle;
    background:var(--zh-champagne);
}

.mdp-brand-copy h2{
    margin:0 0 12px;
    color:var(--zh-preto);
    font-size:26px;
    line-height:1.14;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:400;
}

.mdp-brand-copy p{
    max-width:520px;
    margin:0;
    color:var(--zh-texto);
    font-size:16px;
    line-height:1.55;
}

.mdp-brand-actions{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:22px;
    flex-wrap:wrap;
}

.mdp-text-link{
    color:var(--zh-preto);
    font-weight:500;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:5px;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:12px;
}
.mdp-text-link:hover{
    color:var(--zh-champagne-escuro);
    text-decoration-color:var(--zh-champagne);
}

.mdp-brand-images{
    position:relative;
    min-height:220px;
}

.mdp-product-img{
    position:absolute;
    right:110px;
    bottom:0;
    width:min(56%, 300px);
    max-height:250px;
    object-fit:contain;
    z-index:2;
}

/* Sem sombra pesada: a foto se apoia numa linha de 1px, como o resto. */
.mdp-consultor-img{
    position:absolute;
    right:0;
    bottom:-18px;
    width:min(46%, 240px);
    border-radius:var(--zh-raio);
    border:1px solid var(--zh-borda);
    box-shadow:none;
}

/* ============================================================
   Card "Por que ZOHR" — filete champagne no canto esquerdo
   ============================================================ */
.mdp-why-card{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1.1fr) minmax(220px, .65fr);
    grid-template-areas:
        "copy media"
        "points points";
    gap:28px 34px;
    overflow:hidden;
    padding:34px;
    border:1px solid var(--zh-borda);
    border-radius:var(--zh-raio);
    background:var(--zh-branco);
    box-shadow:none;
}

.mdp-why-card:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:2px;
    height:100%;
    background:var(--zh-champagne);
}

.mdp-why-copy{
    grid-area:copy;
    position:relative;
    z-index:1;
}

.mdp-why-copy h2{
    max-width:760px;
    margin:0 0 14px;
    color:var(--zh-preto);
    font-size:26px;
    line-height:1.14;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:400;
}

.mdp-why-copy p{
    max-width:760px;
    margin:0 0 22px;
    color:var(--zh-texto);
    font-size:16px;
    line-height:1.7;
}

.mdp-why-media{
    grid-area:media;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:210px;
}

.mdp-why-media:before{
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    border-radius:var(--zh-raio);
    background:var(--zh-suave);
}

/* O frasco flutua sobre o quadrado claro, sem sombra projetada. */
.mdp-why-media img{
    position:relative;
    z-index:1;
    width:min(100%, 260px);
    max-height:250px;
    object-fit:contain;
    filter:none;
}

.mdp-why-points{
    grid-area:points;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
    position:relative;
    z-index:1;
}

/* Cada ponto abre com um filete: cinza por padrao, champagne no hover. */
.mdp-why-point{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px 0 0;
    border-top:1px solid var(--zh-borda);
    transition:border-color .2s ease;
}
.mdp-why-point:hover{ border-top-color:var(--zh-champagne); }

.mdp-why-point .icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--zh-raio);
    background:var(--zh-suave);
    color:var(--zh-preto);
    box-shadow:none;
    font-size:21px;
}

.mdp-why-point strong{
    display:block;
    color:var(--zh-preto);
    font-size:14px;
    line-height:1.2;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.mdp-why-point small{
    display:block;
    margin-top:5px;
    color:var(--zh-cinza);
    font-size:13px;
    line-height:1.35;
}

@media (max-width:991px){
    .mdp-benefits{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .mdp-brand-panel{
        grid-template-columns:1fr;
        padding:26px 24px 22px;
    }

    .mdp-brand-images{
        min-height:230px;
    }

    .mdp-why-card{
        grid-template-columns:1fr;
        grid-template-areas:
            "copy"
            "media"
            "points";
        padding:28px 24px;
    }

    .mdp-why-media{
        min-height:190px;
    }

    .mdp-why-points{
        grid-template-columns:1fr;
    }

    .mdp-footer-trust{
        grid-template-columns:1fr;
    }

    .mdp-footer-trust-card--subtle{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
    }
}

@media (max-width:600px){
    .mdp-experience{
        margin-top:28px;
        padding-bottom:24px;
    }

    .mdp-benefits{
        grid-template-columns:1fr;
    }

    .mdp-benefit{
        min-height:auto;
    }

    .mdp-brand-panel{
        padding:24px 18px 18px;
    }

    .mdp-brand-copy h2{
        font-size:22px;
    }

    .mdp-brand-images{
        min-height:190px;
    }

    .mdp-product-img{
        right:62px;
        width:62%;
    }

    .mdp-consultor-img{
        width:46%;
    }

    .mdp-why-card{
        padding:24px 18px;
    }

    .mdp-why-copy h2{
        font-size:22px;
    }

    .mdp-why-copy p{
        font-size:15px;
    }
}

/* ============================================================
   Topo: acesso rapido (Entrar + Escritorio Virtual) — visitante
   Barra do topo agora e PRETA (style.css recolorido).
   ============================================================ */
.mdp-top-access{ display:inline-flex; align-items:center; gap:10px; vertical-align:top; white-space:nowrap; }
.mdp-top-entrar{ display:inline-flex; align-items:center; gap:6px; color:var(--zh-preto); font-size:12px; font-weight:500; text-decoration:none; text-transform:uppercase; letter-spacing:.14em; }
.mdp-top-entrar:hover{ color:var(--zh-champagne-escuro); }
.mdp-top-entrar .icon{ font-size:14px; }
.mdp-top-escritorio{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--zh-raio); background:var(--zh-preto); color:var(--zh-branco) !important; font-size:11px; font-weight:500; text-decoration:none; border:1px solid var(--zh-preto); line-height:1; text-transform:uppercase; letter-spacing:.14em; transition:background .15s,color .15s,border-color .15s; }
.mdp-top-escritorio:hover{ background:var(--zh-hover); border-color:var(--zh-hover); color:var(--zh-branco) !important; }
.mdp-top-escritorio .icon{ font-size:14px; }

/* desktop (>1024px): faixa preta do topo — "Entrar" branco e "Escritorio"
   como botao branco invertido que destaca. NAO afeta o mobile (media query propria abaixo). */
@media (min-width:1025px){
    /* respiro entre o acesso (Entrar/Escritorio) e o menu (SOBRE NOS…), sem mexer no float */
    .mdp-top-access{ gap:18px; margin-right:30px; }
    .mdp-top-entrar{ color:var(--zh-branco); font-size:12px; }
    .mdp-top-entrar:hover{ color:var(--zh-champagne-claro); }
    .mdp-top-escritorio{
        background:var(--zh-branco); border-color:var(--zh-branco);
        color:var(--zh-preto) !important;
        padding:6px 16px; font-size:11px;
    }
    /* botao branco sobre a faixa preta: acende em champagne no hover */
    .mdp-top-escritorio:hover{ background:var(--zh-champagne-claro); border-color:var(--zh-champagne-claro); color:var(--zh-preto) !important; }
}

/* Botao Escritorio na barra sticky (stuck-nav preta) */
.stuck-nav{ position:relative; }
/* escondido por padrao; so aparece quando a barra fica fixa ao rolar (.fixedbar) */
.mdp-stick-escritorio{ display:none; align-items:center; gap:6px; position:absolute; top:50%; transform:translateY(-50%); right:58px; z-index:10050; background:var(--zh-branco); color:var(--zh-preto) !important; padding:5px 12px; border-radius:var(--zh-raio); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.14em; text-decoration:none; line-height:1; white-space:nowrap; box-shadow:none; }
.stuck-nav.fixedbar .mdp-stick-escritorio{ display:inline-flex; }
.mdp-stick-escritorio:hover{ background:var(--zh-champagne-claro); color:var(--zh-preto) !important; }
.mdp-stick-escritorio .icon{ font-size:14px; }

/* mobile: barra preta do topo — "Entrar" a esquerda, "Escritorio" no canto sup. direito;
   icone de usuario (account) escondido p/ visitante (substituido pelo botao) */
@media (max-width:1024px){
    /* barra preta do topo vira flex: "Loja: usuario" a esquerda, botoes (Entrar/Escritorio) a direita */
    #header .settings{ display:flex !important; align-items:center; justify-content:space-between; gap:8px; padding:0 12px !important; }
    #header .settings .account-row-list{ display:none !important; }
    .mdp-top-loja{ color:var(--zh-branco); font-size:12px; line-height:1.2; min-width:0; flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mdp-top-loja strong{ color:var(--zh-branco); }
    .mdp-top-access{ float:none !important; margin:0 0 0 auto; display:flex; align-items:center; gap:6px; flex:0 0 auto; }
    /* "Entrar" vira botao retangular vazado branco */
    .mdp-top-entrar{ display:inline-flex; align-items:center; gap:5px; background:transparent; border:1px solid rgba(255,255,255,.7); color:var(--zh-branco) !important; padding:5px 11px; border-radius:var(--zh-raio); font-size:11px; font-weight:500; }
    .mdp-top-entrar:hover{ background:rgba(255,255,255,.18); color:var(--zh-branco) !important; }
    /* "Escritorio" inline (sem absoluto), botao branco invertido */
    .mdp-top-escritorio{ position:static; background:var(--zh-branco); border-color:var(--zh-branco); color:var(--zh-preto) !important; padding:5px 11px; font-size:11px; white-space:nowrap; }
    .mdp-guest #header .account{ display:none !important; }
}
@media (max-width:480px){
    #header .settings{ gap:6px; padding:0 8px !important; }
    .mdp-top-loja{ font-size:11px; }
    .mdp-top-entrar{ padding:4px 9px; font-size:10px; }
    .mdp-top-entrar .icon{ display:none; }
    .mdp-top-escritorio{ padding:4px 9px; font-size:10px; }
    .mdp-stick-escritorio{ right:50px; padding:4px 10px; font-size:11px; }
}

/* card "Por que ZOHR" entre as secoes de produto */
.mdp-why-between{ padding:18px 0 6px; }

/* Rodape mobile: Atendimento ocupa a linha toda; Pagamento(ML) e Seguranca(Cloudflare) lado a lado */
@media (max-width:991px){
    .mdp-footer-trust{ grid-template-columns:1fr 1fr; }
    .mdp-footer-contact{ grid-column:1 / -1; }
    .mdp-footer-trust-card--subtle{ flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:16px; }
    .mdp-footer-trust-card--subtle .mdp-footer-payment-logo,
    .mdp-footer-trust-card--subtle .mdp-footer-security-logo{ width:auto; max-width:100%; height:auto; }
}

/* Descricao curta visivel nos cards de produto do slider (index/relacionados) */
.carousel-products .product__inside__description{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:6px 10px 10px;
    font-size:13px;
    line-height:1.4;
    color:var(--zh-cinza);
    min-height:36px;
}

/* Clicar na FOTO do produto abre o detalhe (home + categorias).
   Esconde os controles do mini-carrossel (1 img) e poe o link da imagem por cima. */
.product__inside__carousel .carousel-control{ display:none !important; }
.product__inside__image{ position:relative; }
.product__inside__image > a,
.product__inside__image .carousel-inner .item > a{ display:block; position:relative; z-index:3; }
.product .quick-view{ z-index:2; }

/* iOS: evita o auto-zoom ao focar campos no mobile (acontece quando font-size < 16px).
   Forca 16px em todos os inputs/selects/textareas em telas pequenas. */
@media (max-width:768px){
    input, select, textarea,
    .form-control, .input_cep, .mdp-search, .cart-qty-input{ font-size:16px !important; }
}

/* Lista de categoria/busca: mostra a descricao curta no card (estava escondida em grid) */
.product-listing .product__inside__description{
    display:-webkit-box !important;
    -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin:6px 0 8px; font-size:13px; line-height:1.4; color:var(--zh-cinza);
}

/* ===== Ajustes header (logo compacto + menu que cabe) ===== */
/* Logo do header: o arquivo novo tem 1531x326 — sem cap ele explode o layout.
   Seletor #header img.logo pra ganhar do style.css:8254 (#header img.logo{max-height:120px}). */
.pt-logo,
#header .logo,
#header img.logo{ max-height:76px; width:auto; display:inline-block; margin:20px auto 14px; }
/* Abaixo de 1024px o tema aplica `float:left` + `margin:33px 10px 0 10px` em
   `#header.header-layout-05 .logo` (style.css:9318). Esse seletor tem 1 id + 2 classes e VENCE o
   nosso (1 id + 1 classe + 1 elemento) mesmo carregando depois — por isso o logo ficava colado
   na borda esquerda. Só `float:none` não resolve: a margem também perde por especificidade. */
@media (max-width:1024px){
    .pt-logo,
    #header .logo,
    #header img.logo,
    #header.header-layout-05 .logo{ float:none !important; margin:10px auto 6px !important; }
}
/* Escalona junto com o desktop (76px): tablet 62px, celular 58px.
   No celular o header tem ~190px de altura; com o logo em 44px ele ficava
   perdido no meio da faixa branca. 58px equilibra sem empurrar o hero. */
@media (max-width:1024px){
    .pt-logo,
    #header .logo,
    #header img.logo{ max-height:62px; }
}
@media (max-width:768px){
    .pt-logo,
    #header .logo,
    #header img.logo{ max-height:58px; margin:12px auto 8px !important; }
}
#mdp-loader img{ width:150px; }

/* Menu principal: 13 itens (10 categorias) — compacto pra caber no desktop.
   Escopado ao .stuck-nav: o menu.php tambem e incluido no off-canvas mobile
   e la NAO pode virar flex (entraria no fluxo da pagina como faixa branca). */
.stuck-nav .pt-menu{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; float:none; }
.stuck-nav .pt-menu > li{ float:none; }
.stuck-nav .pt-menu > li > a{
    font-size:12px !important;
    letter-spacing:.06em !important;
    padding:14px 9px !important;
    white-space:nowrap;
}
@media (min-width:769px) and (max-width:1200px){
    .stuck-nav .pt-menu > li > a{ font-size:11px !important; padding:12px 6px !important; letter-spacing:.03em !important; }
}

/* Trava overflow horizontal (rows bootstrap com margem negativa + slider) */
html, body{ overflow-x:hidden; }
/* Links duplicados da barra do topo.
   A .stuck-nav é SEMPRE a barra horizontal — o menu mobile é outro partial (mobile_menu.php),
   que já lista PONTOS DE ENTREGA e CONTATO. Com a regra presa em min-width:769px, abaixo disso
   os dois links apareciam DUPLICADOS no fim da tira preta rolável. Vale em qualquer largura. */
.stuck-nav .pt-menu > li.pt-menu-extra{ display:none; }

/* Desktop: links institucionais (SOBRE NOS…) DENTRO da faixa preta, antes de Entrar/Escritorio */
@media (min-width:1025px){
    #header .settings{ display:flex; align-items:center; justify-content:flex-end; gap:10px; height:40px; }
    #header .settings .account-row-list{ float:none !important; position:static; margin:0; }
    #header .settings .account-row-list ul{ margin:0; padding:0; display:flex; align-items:center; }
    #header .settings .account-row-list li{ display:block; float:none; border:0; }
    #header .settings .account-row-list li a{
        display:block; color:var(--zh-sobre-preto); font-size:11px; letter-spacing:.08em;
        text-transform:uppercase; padding:0 10px; line-height:40px; background:transparent;
    }
    #header .settings .account-row-list li a:hover{ color:var(--zh-branco); }
    .mdp-top-access{ margin-right:0; }
}
@media (min-width:1025px){
    #header .settings .account-row-list{ order:-1; }
    #header .settings .account-row-list li a{ white-space:nowrap; }
    #header .settings{ flex-wrap:nowrap; }
}

/* ===== Hero slider: altura uniforme (imagens de proporcoes diferentes entortavam a home) ===== */
.slider .slide{ overflow:hidden; }
.slider .slide-img{
    display:block;
    width:100% !important;
    height:clamp(320px, 40vw, 580px) !important;
    object-fit:cover;
    object-position:center;
}
@media (max-width:768px){
    .slider .slide-img{ height:clamp(360px, 92vw, 640px) !important; }
}
/* placeholder (svg) mantem a mesma caixa */
.slider .slide-img[src$='.svg']{ object-fit:cover; background:var(--zh-dim); }

/* Fundo do header era um GIF VERDE do tema antigo (back-header.gif) — fora. */
#header, .header-layout-05, header.header-layout-05{
    background-image:none !important;
    background-color:var(--zh-branco);
}

/* Botao invertido (branco solido) para secoes escuras — usado no pt-experience */
.pt-btn--inverso{ background:var(--zh-branco); border-color:var(--zh-branco); color:var(--zh-preto) !important; }
.pt-btn--inverso:hover, .pt-btn--inverso:focus{ background:var(--zh-champagne-claro); border-color:var(--zh-champagne-claro); color:var(--zh-preto) !important; }

/* ===== Sticky menu (fixedbar): uma linha, compacto, sem colidir com o botao ESCRITORIO ===== */
.stuck-nav.fixedbar .col-stuck-menu{ padding-left:24px; padding-right:150px; }
.stuck-nav.fixedbar .pt-menu{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.stuck-nav.fixedbar .pt-menu::-webkit-scrollbar{ display:none; }
.stuck-nav.fixedbar .pt-menu > li > a{ font-size:11px !important; padding:14px 7px !important; letter-spacing:.04em !important; }
.stuck-nav.fixedbar{ min-height:0 !important; }

/* ===== Hero slider full-bleed: tema do bxSlider (CDN) poe borda branca 5px + sombra + margem ===== */
.bx-wrapper{
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    margin:0 auto !important;
    max-width:100% !important;
    border-radius:var(--zh-raio) !important;
}
.bx-wrapper .bx-viewport{
    border:0 !important;
    box-shadow:none !important;
    border-radius:var(--zh-raio) !important;
    background:transparent !important;
    left:0 !important;
}
#slider .tp-banner-container, #slider .slider{ padding:0 !important; margin:0 !important; }
#slider.content{ padding:0 !important; }
.slider .slide, .slider .slide a, .slider .slide-img{ border-radius:var(--zh-raio) !important; }

/* ===== Rodape preto: o fallback inline do footer.php pinta a/p/li num cinza
   frio (#d4d4d4). Aqui o tom vira o off-white QUENTE da marca e o hover acende
   em champagne claro — o unico acento do rodape. ===== */
footer.pt-footer a{ color:var(--zh-sobre-preto); }
footer.pt-footer a:hover, footer.pt-footer a:focus{ color:var(--zh-champagne-claro); }
footer.pt-footer p, footer.pt-footer li{ color:var(--zh-sobre-preto); }
footer.pt-footer h4, footer.pt-footer .title-under{
    color:var(--zh-branco);
    font-weight:400;
    letter-spacing:.2em;
    text-transform:uppercase;
}
footer.pt-footer .footer-copyright,
footer.pt-footer .footer-copyright a{ color:var(--zh-cinza); }

/* Trust cards do rodape: fundo BRANCO -> texto escuro (senao herdam o claro
   do rodape e somem dentro do card). */
footer.pt-footer .mdp-footer-trust-card p,
footer.pt-footer .mdp-footer-trust-card li,
footer.pt-footer .mdp-footer-trust-card span,
footer.pt-footer .mdp-footer-trust-card a{ color:var(--zh-texto); }
footer.pt-footer .mdp-footer-trust-card a:hover{ color:var(--zh-champagne-escuro); }
footer.pt-footer .mdp-footer-trust-card .mdp-footer-trust-label{ color:var(--zh-preto); }
footer.pt-footer .mdp-footer-trust-card .mdp-contact-list .icon{ color:var(--zh-preto); }
footer.pt-footer .mdp-footer-trust-icon{
    background:transparent;
    border:1px solid var(--zh-borda);
}
footer.pt-footer .mdp-footer-trust-icon .icon{ color:var(--zh-preto); }

/* ===== pt-experience: painel preto -> eyebrow/titulo/copy claros (estavam pretos, invisiveis) ===== */
.pt-exp-panel{ color:var(--zh-branco); }
.pt-exp-panel .pt-title, .pt-exp-panel h2, .pt-exp-panel h3{ color:var(--zh-branco); }
.pt-exp-panel .pt-eyebrow{ color:var(--zh-champagne-claro); }
.pt-exp-panel .pt-eyebrow:before{ background:var(--zh-champagne-claro); }
.pt-exp-panel .pt-lead, .pt-exp-panel p, .pt-exp-panel li{ color:var(--zh-sobre-preto); }
.pt-exp-panel .pt-plus{ color:var(--zh-champagne-claro); }

/* ===== Mini-carrinho/conta do header: dropdown escuro -> textos claros ===== */
#header .cart .dropdown-menu h2, #header .cart .dropdown-menu strong,
#header .cart .dropdown-menu .cart__top, #header .cart .dropdown-menu .cart__total,
#header .cart .dropdown-menu .cart__total span,
#header .cart .dropdown-menu .info-label{ color:var(--zh-branco); }
#header .cart .dropdown-menu .cart__item__info__title a{ color:var(--zh-branco); }

/* ===== Faixa preta do topo: full-bleed explicito (em viewport largo o fundo
   ficava branco e o texto branco sumia) ===== */
#header .pt-topbar{ background:var(--zh-preto); width:100%; }
#header .pt-topbar .slogan{ color:var(--zh-branco); background:transparent; }
#header .pt-topbar .row{ display:flex; align-items:center; flex-wrap:nowrap; }
#header .pt-topbar .row:before, #header .pt-topbar .row:after{ display:none; }
#header .pt-topbar .col-sm-4{ flex:0 0 auto; }
#header .pt-topbar .col-sm-8{ flex:1 1 auto; max-width:none; float:none; }
@media (max-width:1024px){
    #header .pt-topbar .row{ flex-wrap:wrap; }
    #header .pt-topbar .col-sm-4{ display:none; } /* BEM-VINDO sai no mobile (ja tem mdp-top-loja) */
}

/* ===== Ritmo vertical mais compacto ("mais fit") ===== */
.pt-section{ padding:clamp(36px, 5vw, 68px) 0; }
.pt-home-head{ margin-bottom:22px; }
#pageContent .content{ padding-top:28px; padding-bottom:28px; }
.pt-home-valores{ margin-top:36px; }
/* cards de produto no carrossel: imagem contida, sem inflar a faixa em telas largas */
.carousel-products .product__inside__image img,
.carousel-products .product__inside__carousel img{
    max-height:400px; width:auto; max-width:100%; margin:0 auto; object-fit:contain;
}
.carousel-products .slick-slide{ height:auto; }
.carousel-products{ margin-bottom:0; }
/* espacamento entre grupos do MLM/como funciona */
.pt-home-mlm .pt-grid-4, .pt-home-mlm .pt-grid-2{ gap:20px; }

/* ===== Topbar: acabamento fino (fonte, separadores, alinhamento vertical) ===== */
#header .pt-topbar .slogan{
    font-family:'Montserrat', sans-serif !important;
    font-style:normal !important;
    font-size:11px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--zh-branco);
    padding:0;
    line-height:40px;
    white-space:nowrap;
}
#header .pt-topbar .settings{ padding:0 !important; }
#header .pt-topbar .account-row-list li,
#header .pt-topbar .account-row-list li a{
    border:0 !important;
    background:transparent !important;
}
#header .pt-topbar .account-row-list li a{
    line-height:40px;
    padding:0 12px;
    color:var(--zh-branco) !important;
}
#header .pt-topbar .account-row-list li a:hover,
#header .pt-topbar .account-row-list li a:focus{
    color:var(--zh-champagne-claro) !important;
}
#header .pt-topbar .account-row-list li a:focus-visible{
    outline:1px solid var(--zh-champagne);
    outline-offset:3px;
}
#header .pt-topbar .mdp-top-escritorio{ margin:0; }
#header .pt-topbar .mdp-top-access{ line-height:1; }

/* ===== Alertas flash (MSG) =====
   Ficam monocromaticos de proposito: sinal, nao marca. O filete lateral
   diferencia o erro sem introduzir cor saturada. */
.alerta{ background-color:var(--zh-preto) !important; color:var(--zh-branco); }
.alerta.alert-success{ background-color:var(--zh-preto) !important; }
.alerta.alert-error{ background-color:var(--zh-preto) !important; border-left:2px solid var(--zh-branco); }

/* Sinal grafico dentro de titulo acompanha o tamanho do texto
   (o grande e so decorativo, solto). */
h1 .pt-plus, h2 .pt-plus, h3 .pt-plus, h4 .pt-plus,
.pt-title .pt-plus{ font-size:1.05em !important; line-height:inherit; vertical-align:baseline; font-weight:400; }

/* Slick media a altura na inicializacao (antes do cap das imagens) e congela a
   .slick-list maior que os cards -> faixa branca fantasma. Altura sempre auto. */
.carousel-products .slick-list{ height:auto !important; }
.carousel-products .slick-track{ display:flex !important; align-items:stretch; }
.carousel-products .slick-slide{ height:auto !important; float:none; }
/* O tema reserva 200px para a sombra do hover antigo com padding e margem negativa.
   Os cards atuais ficam no fluxo normal, entao ambos precisam ser neutralizados. */
.carousel-products .slick-list{
    padding-bottom:0 !important;
    padding-top:0 !important;
    margin-bottom:0 !important;
}

/* Juncao MLM -> experience mais justa (o botao SEJA UM CONSULTOR ficava ilhado) */
.pt-home-mlm.pt-section{ padding-bottom:28px; }
/* pageContent tinha 75px de respiro no rodape (tema) — aperta pra 32px */
#pageContent{ padding-bottom:32px !important; }

/* Tarja do consultor vinculado — saiu da faixa preta (brigava com os links).
   O nome do consultor e um dado em destaque: vai em champagne escuro. */
.pt-loja-consultor{
    background:var(--zh-suave);
    border-bottom:1px solid var(--zh-borda);
    text-align:center;
    padding:7px 12px;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--zh-texto);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pt-loja-consultor strong{ color:var(--zh-champagne-escuro); font-weight:500; }

/* ============================================================
   Home editorial: hero, entradas e vitrine de produtos
   Inspirado no ritmo visual do institucional, sem depender do Wix.
   ============================================================ */
#slider .pt-hero-slide{
    position:relative;
    height:clamp(540px, calc(100vh - 160px), 720px);
    min-height:540px;
    overflow:hidden;
    isolation:isolate;
    background:var(--zh-preto);
}

#slider .pt-hero-media{
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
}

#slider .pt-hero-slide .slide-img{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:cover;
    object-position:center;
    transform:scale(1.045);
    transition:transform 8s cubic-bezier(.2,.65,.3,1);
    will-change:transform;
}

#slider .pt-hero-slide.pt-hero-active .slide-img{
    transform:scale(1);
}

/* O unico degrade do arquivo, e nao e decoracao: e o veu que garante leitura do
   texto sobre a foto. Preto ou branco puro, sem cor. */
#slider .pt-hero-shade{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}

#slider .pt-hero--escuro .pt-hero-shade{
    background:
        linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.57) 38%, rgba(0,0,0,.08) 72%),
        linear-gradient(0deg, rgba(0,0,0,.25), transparent 45%);
}

#slider .pt-hero--claro .pt-hero-shade{
    background:
        linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.76) 34%, rgba(255,255,255,.08) 66%),
        linear-gradient(0deg, rgba(255,255,255,.18), transparent 45%);
}

#slider .pt-hero-content{
    position:absolute;
    z-index:2;
    top:50%;
    left:max(7vw, calc((100vw - 1170px) / 2));
    width:min(520px, 45vw);
    transform:translateY(-50%);
    pointer-events:none;
}

#slider .pt-hero-content > *{
    opacity:0;
    transform:translate3d(0, 34px, 0);
    transition:
        opacity .7s cubic-bezier(.2,.65,.3,1),
        transform .85s cubic-bezier(.2,.65,.3,1);
}

#slider .pt-hero-active .pt-hero-content > *{
    opacity:1;
    transform:translate3d(0,0,0);
}

#slider .pt-hero-active .pt-hero-kicker{ transition-delay:.18s; }
#slider .pt-hero-active .pt-hero-title{ transition-delay:.3s; }
#slider .pt-hero-active .pt-hero-text{ transition-delay:.44s; }
#slider .pt-hero-active .pt-hero-cta{ transition-delay:.58s; }

#slider .pt-hero-kicker{
    display:block;
    margin:0 0 18px;
    font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size:11px;
    font-weight:500;
    line-height:1.2;
    letter-spacing:.34em;
    text-transform:uppercase;
}

#slider .pt-hero-title{
    margin:0;
    font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size:clamp(40px, 4.6vw, 68px);
    font-weight:400;
    line-height:1.06;
    letter-spacing:.05em;
    text-transform:uppercase;
}

#slider .pt-hero-plus{
    display:inline-block;
    font-size:1.12em;
    font-weight:300;
    line-height:.8;
    color:var(--zh-champagne-claro);
}
#slider .pt-hero--claro .pt-hero-plus{ color:var(--zh-champagne-escuro); }

#slider .pt-hero-text{
    max-width:470px;
    margin:24px 0 28px;
    font-size:16px;
    line-height:1.65;
    letter-spacing:.02em;
}

#slider .pt-hero-cta{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:34px;
    min-width:220px;
    min-height:var(--zh-controle);
    padding:15px 18px 15px 22px;
    border:1px solid currentColor;
    border-radius:var(--zh-raio);
    color:inherit;
    font-size:11px;
    font-weight:500;
    letter-spacing:var(--zh-ls-caixa-alta);
    text-transform:uppercase;
    line-height:1;
    text-decoration:none;
    transition:
        opacity .7s cubic-bezier(.2,.65,.3,1) .58s,
        transform .85s cubic-bezier(.2,.65,.3,1) .58s,
        color .25s ease,
        background-color .25s ease;
}

#slider .pt-hero-cta span{
    font-size:20px;
    font-weight:300;
    line-height:1;
    transition:transform .25s ease;
}

#slider .pt-hero-cta:hover,
#slider .pt-hero-cta:focus{
    text-decoration:none;
}

#slider .pt-hero-cta:hover span,
#slider .pt-hero-cta:focus span{
    transform:translateX(5px);
}

/* O kicker do hero e um dos poucos champagnes da home — o resto fica mono. */
#slider .pt-hero--escuro .pt-hero-content{ color:var(--zh-branco); }
#slider .pt-hero--escuro .pt-hero-title{ color:var(--zh-branco); }
#slider .pt-hero--escuro .pt-hero-kicker{ color:var(--zh-champagne-claro); }
#slider .pt-hero--claro .pt-hero-kicker{ color:var(--zh-champagne-escuro); }
#slider .pt-hero--escuro .pt-hero-text{ color:rgba(255,255,255,.8); }
#slider .pt-hero--escuro .pt-hero-cta:hover,
#slider .pt-hero--escuro .pt-hero-cta:focus{ background:var(--zh-branco); color:var(--zh-preto); }

#slider .pt-hero--claro .pt-hero-content{ color:var(--zh-preto); }
#slider .pt-hero--claro .pt-hero-text{ color:var(--zh-texto); }
#slider .pt-hero--claro .pt-hero-cta:hover,
#slider .pt-hero--claro .pt-hero-cta:focus{ background:var(--zh-preto); color:var(--zh-branco); }

#slider .pt-hero-index{
    position:absolute;
    z-index:2;
    right:34px;
    bottom:28px;
    color:rgba(255,255,255,.78);
    font-size:11px;
    font-weight:500;
    letter-spacing:.28em;
}

#slider .pt-hero--claro .pt-hero-index{ color:rgba(0,0,0,.54); }

/* Navegacao fina, no mesmo espirito das setas abertas do institucional. */
#slider .bx-wrapper .bx-controls-direction a{
    z-index:20;
    top:50%;
    width:48px;
    height:72px;
    margin-top:-36px;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(0,0,0,.16) !important;
    text-indent:-9999px;
    transition:background-color .2s ease, border-color .2s ease;
}

#slider .bx-wrapper .bx-controls-direction a:hover,
#slider .bx-wrapper .bx-controls-direction a:focus{
    border-color:rgba(255,255,255,.78);
    background:rgba(0,0,0,.38) !important;
}

#slider .bx-wrapper .bx-prev{ left:24px; }
#slider .bx-wrapper .bx-next{ right:24px; }

#slider .bx-wrapper .bx-controls-direction a:after{
    content:"";
    position:absolute;
    top:50%;
    width:18px;
    height:18px;
    margin-top:-9px;
    border-top:2px solid var(--zh-branco);
    border-right:2px solid var(--zh-branco);
}

#slider .bx-wrapper .bx-prev:after{
    left:17px;
    transform:rotate(-135deg);
}

#slider .bx-wrapper .bx-next:after{
    right:17px;
    transform:rotate(45deg);
}

#slider .bx-wrapper .bx-pager{
    z-index:21;
    bottom:22px;
    padding:0;
    line-height:0;
}

#slider .bx-wrapper .bx-pager.bx-default-pager a{
    width:34px;
    height:2px;
    margin:0 5px;
    border-radius:var(--zh-raio);
    background:rgba(255,255,255,.38);
}

#slider .bx-wrapper .bx-pager.bx-default-pager a:hover,
#slider .bx-wrapper .bx-pager.bx-default-pager a:focus{
    background:var(--zh-branco);
}
/* Item ATIVO do pager: filete champagne — o marcador de "voce esta aqui". */
#slider .bx-wrapper .bx-pager.bx-default-pager a.active{
    background:var(--zh-champagne);
}

/* Composicao da home: os dois frascos entram em sequencia. */
.pt-home-inovacao{
    overflow:hidden;
}

.pt-home-inovacao-grid{
    min-height:680px;
}

.pt-home-inovacao-media{
    position:relative;
    align-self:stretch;
    min-height:680px;
    isolation:isolate;
}

.pt-home-inovacao-media .pt-product-roll,
.pt-home-inovacao-media .pt-product-stand{
    position:absolute;
    display:block;
    height:auto;
    max-width:none;
    margin:0;
    will-change:transform, opacity;
}

.pt-home-inovacao-media .pt-product-roll{
    z-index:1;
    top:17%;
    left:-30%;
    width:145%;
}

.pt-home-inovacao-media .pt-product-stand{
    z-index:2;
    top:-7%;
    right:-13%;
    width:69%;
}

.pt-motion-ready .pt-home-inovacao-media.pt-reveal{
    opacity:1;
    transform:none;
    transition:none;
}

.pt-motion-ready .pt-home-inovacao-media .pt-product-roll{
    opacity:0;
    transform:translate3d(-150px,0,0) rotate(-14deg);
    transition:
        opacity .18s linear,
        transform 1.2s cubic-bezier(.645,.045,.355,1);
}

.pt-motion-ready .pt-home-inovacao-media .pt-product-stand{
    opacity:0;
    transform:translate3d(-165px,0,0);
    transition:
        opacity .18s linear 1.05s,
        transform 1.2s cubic-bezier(.645,.045,.355,1) 1.05s;
}

.pt-motion-ready .pt-home-inovacao-media.pt-reveal-visible .pt-product-roll,
.pt-motion-ready .pt-home-inovacao-media.pt-reveal-visible .pt-product-stand{
    opacity:1;
    transform:translate3d(0,0,0) rotate(0);
}

/* A chamada + Desenvolvimento repete a entrada do pote ao chegar no rodape. */
.pt-exp-panel{
    overflow:hidden;
}

.pt-exp-media{
    position:relative;
    min-height:430px;
    isolation:isolate;
}

.pt-exp-media .pt-product-roll-repeat,
.pt-exp-media .pt-product-stand-repeat{
    position:absolute;
    display:block;
    height:auto;
    max-width:none;
    margin:0;
    will-change:transform, opacity;
}

.pt-exp-media .pt-product-roll-repeat{
    z-index:1;
    top:19%;
    left:-27%;
    width:132%;
}

.pt-exp-media .pt-product-stand-repeat{
    z-index:2;
    top:-13%;
    right:-13%;
    width:70%;
}

.pt-motion-ready .pt-exp-media.pt-reveal{
    opacity:1;
    transform:none;
    transition:none;
}

.pt-motion-ready .pt-exp-media .pt-product-roll-repeat{
    opacity:0;
    transform:translate3d(-150px,0,0) rotate(-14deg);
    transition:
        opacity .18s linear,
        transform 1.2s cubic-bezier(.645,.045,.355,1);
}

.pt-motion-ready .pt-exp-media .pt-product-stand-repeat{
    opacity:0;
    transform:translate3d(-165px,0,0);
    transition:
        opacity .18s linear 1.05s,
        transform 1.2s cubic-bezier(.645,.045,.355,1) 1.05s;
}

.pt-motion-ready .pt-exp-media.pt-reveal-visible .pt-product-roll-repeat,
.pt-motion-ready .pt-exp-media.pt-reveal-visible .pt-product-stand-repeat{
    opacity:1;
    transform:translate3d(0,0,0) rotate(0);
}

/* Cards da vitrine: altura estavel, CTA sempre acessivel e movimento contido. */
#carouselDestaque .slick-slide,
#carouselOfertas .slick-slide{
    display:flex;
    padding:0 10px 18px;
}

#carouselDestaque .product,
#carouselOfertas .product{
    width:100%;
    height:100%;
    padding:0 !important;
    overflow:visible;
}

#carouselDestaque .product__inside,
#carouselOfertas .product__inside{
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
    border:1px solid var(--zh-borda);
    background:var(--zh-branco);
    transition:transform .35s cubic-bezier(.2,.65,.3,1), box-shadow .35s ease, border-color .35s ease;
}

/* Hover do card: a borda acende em champagne e o card sobe de leve.
   Sem sombra — a marca se apoia em linha, nao em profundidade. */
#carouselDestaque .product:hover .product__inside,
#carouselDestaque .product:focus-within .product__inside,
#carouselOfertas .product:hover .product__inside,
#carouselOfertas .product:focus-within .product__inside{
    transform:translateY(-4px);
    border-color:var(--zh-champagne);
    box-shadow:none;
}

#carouselDestaque .product__inside__image,
#carouselOfertas .product__inside__image{
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1 / 1.03;
    overflow:hidden;
    background:var(--zh-suave);
}

#carouselDestaque .product__inside__carousel,
#carouselDestaque .product__inside__carousel .carousel-inner,
#carouselDestaque .product__inside__carousel .item,
#carouselDestaque .product__inside__carousel .item > a,
#carouselOfertas .product__inside__carousel,
#carouselOfertas .product__inside__carousel .carousel-inner,
#carouselOfertas .product__inside__carousel .item,
#carouselOfertas .product__inside__carousel .item > a{
    width:100%;
    height:100%;
}

#carouselDestaque .product__inside__image img,
#carouselOfertas .product__inside__image img{
    width:100% !important;
    height:100% !important;
    max-height:none;
    object-fit:contain;
    transform:scale(.96);
    transition:transform .55s cubic-bezier(.2,.65,.3,1);
}

#carouselDestaque .product:hover .product__inside__image img,
#carouselDestaque .product:focus-within .product__inside__image img,
#carouselOfertas .product:hover .product__inside__image img,
#carouselOfertas .product:focus-within .product__inside__image img{
    transform:scale(1.035);
}

#carouselDestaque .product__inside__name h2,
#carouselOfertas .product__inside__name h2{
    margin:20px 0 7px;
    font-size:13px;
    font-weight:400;
    line-height:1.5;
    letter-spacing:.14em;
}

#carouselDestaque .product__inside__description,
#carouselOfertas .product__inside__description{
    margin:0 10px 12px;
}

#carouselDestaque .product__inside__price,
#carouselOfertas .product__inside__price{
    margin:auto 10px 16px;
    font-size:16px;
    letter-spacing:.04em;
    color:var(--zh-grafite);
}

#carouselDestaque .product__inside__hover,
#carouselOfertas .product__inside__hover{
    position:static !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:var(--zh-branco);
}

#carouselDestaque .product__inside__info,
#carouselOfertas .product__inside__info{
    height:auto !important;
    opacity:1 !important;
    overflow:visible !important;
}

#carouselDestaque .product__inside__info__btns,
#carouselOfertas .product__inside__info__btns{
    padding:0 10px 10px;
}

#carouselDestaque .product__inside__info__btns .btn,
#carouselOfertas .product__inside__info__btns .btn{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:var(--zh-controle);
    margin:0;
    border:1px solid var(--zh-preto);
    border-radius:var(--zh-raio);
    background:var(--zh-preto);
    color:var(--zh-branco);
    font-size:11px;
    font-weight:500;
    letter-spacing:var(--zh-ls-caixa-alta);
    transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}

#carouselDestaque .product__inside__info__btns .btn:hover,
#carouselDestaque .product__inside__info__btns .btn:focus,
#carouselOfertas .product__inside__info__btns .btn:hover,
#carouselOfertas .product__inside__info__btns .btn:focus{
    background:var(--zh-branco);
    color:var(--zh-preto);
}

#carouselDestaque .product__label,
#carouselOfertas .product__label{
    z-index:5;
    margin-left:0 !important;
    margin-right:0 !important;
    transition:transform .25s ease;
}

/* Entrada suave ao rolar; a classe raiz so existe quando o JS e o recurso estao ativos. */
.pt-motion-ready .pt-reveal{
    opacity:0;
    transform:translate3d(0, 34px, 0);
    transition:
        opacity .7s cubic-bezier(.2,.65,.3,1) var(--pt-delay, 0ms),
        transform .8s cubic-bezier(.2,.65,.3,1) var(--pt-delay, 0ms);
}

.pt-motion-ready .pt-reveal.pt-reveal-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}

@media (min-width:1299px){
    #carouselDestaque .product.product--zoom:hover .product__inside,
    #carouselDestaque .product.product--zoom.hovered .product__inside,
    #carouselOfertas .product.product--zoom:hover .product__inside,
    #carouselOfertas .product.product--zoom.hovered .product__inside{
        width:100% !important;
        margin:0 !important;
    }
}

@media (max-width:768px){
    #slider .pt-hero-slide{
        height:clamp(470px, 118vw, 610px);
        min-height:470px;
    }

    #slider .pt-hero-slide .slide-img{
        object-position:center;
    }

    #slider .pt-hero--escuro .pt-hero-shade{
        background:linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.48) 68%, rgba(0,0,0,.12) 100%);
    }

    #slider .pt-hero--claro .pt-hero-shade{
        background:linear-gradient(0deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.7) 58%, rgba(255,255,255,.08) 100%);
    }

    #slider .pt-hero-content{
        top:auto;
        right:24px;
        bottom:58px;
        left:24px;
        width:auto;
        transform:none;
    }

    #slider .pt-hero-kicker{
        margin-bottom:12px;
        font-size:10px;
        letter-spacing:.28em;
    }

    #slider .pt-hero-title{
        font-size:clamp(34px, 11vw, 52px);
        line-height:1.04;
    }

    #slider .pt-hero-text{
        max-width:420px;
        margin:16px 0 20px;
        font-size:14px;
        line-height:1.5;
    }

    #slider .pt-hero-cta{
        min-width:190px;
        padding:13px 15px 13px 18px;
        font-size:10px;
    }

    #slider .pt-hero-index{ display:none; }

    #slider .bx-wrapper .bx-controls-direction a{
        top:28%;
        width:42px;
        height:54px;
        margin-top:-27px;
    }

    #slider .bx-wrapper .bx-prev{ left:10px; }
    #slider .bx-wrapper .bx-next{ right:10px; }
    #slider .bx-wrapper .bx-prev:after{ left:15px; }
    #slider .bx-wrapper .bx-next:after{ right:15px; }

    .pt-home-inovacao-grid{
        min-height:0;
    }

    .pt-home-inovacao-media{
        min-height:500px;
        overflow:visible;
    }

    .pt-home-inovacao-media .pt-product-roll{
        top:18%;
        left:-23%;
        width:127%;
    }

    .pt-home-inovacao-media .pt-product-stand{
        top:-2%;
        right:-7%;
        width:61%;
    }

    .pt-exp-media{
        min-height:410px;
    }

    .pt-exp-media .pt-product-roll-repeat{
        top:20%;
        left:-21%;
        width:126%;
    }

    .pt-exp-media .pt-product-stand-repeat{
        top:-1%;
        right:-7%;
        width:62%;
    }

    #carouselDestaque .slick-slide,
    #carouselOfertas .slick-slide{
        padding:0 6px 14px;
    }

    /* Header mobile: alvos de toque confortaveis sem aumentar a faixa de 50px. */
    #header .mdp-top-access{
        height:44px;
        align-items:center;
    }

    #header .mdp-top-entrar,
    #header .mdp-top-escritorio{
        min-height:44px;
        padding-top:0;
        padding-bottom:0;
        align-items:center;
        justify-content:center;
        box-sizing:border-box;
    }

    /* O padding de 150px do sticky desktop encolhia o navbar para 240px no XR.
       No mobile a barra volta a ocupar a largura inteira; o atalho fica sobre ela. */
    #header .stuck-nav.fixedbar{
        height:50px;
        background:var(--zh-preto) !important;
    }

    .stuck-nav.fixedbar > .container{
        width:100%;
        padding-right:0 !important;
        padding-left:0 !important;
    }

    .stuck-nav.fixedbar .col-stuck-menu{
        float:none;
        width:100% !important;
        padding-right:0;
        padding-left:0;
    }

    .stuck-nav.fixedbar .col-stuck-menu > .row{
        margin-right:0;
        margin-left:0;
    }

    .stuck-nav.fixedbar .navbar{
        width:100%;
        min-height:50px;
        background:var(--zh-preto);
    }

    .stuck-nav .visible-mobile-menu-on{
        width:140px !important;
        height:50px !important;
        padding-right:0 !important;
        padding-left:0 !important;
    }

    .stuck-nav .off-canvas-menu-toggle{
        display:block;
        width:140px;
        height:50px;
    }

    .stuck-nav .navbar-toggle{
        min-height:44px;
        margin-top:3px !important;
        margin-bottom:3px !important;
        padding-top:14px;
        padding-bottom:14px;
    }

    .stuck-nav .navbar-toggle .menu-text{
        top:10px;
    }

    .stuck-nav.fixedbar .mdp-stick-escritorio{
        right:12px;
        min-height:44px;
        padding-top:0;
        padding-bottom:0;
        align-items:center;
    }

    /* Grid de busca/categoria: o btn--xl tinha 196,8px dentro de cards de 177px. */
    #centerColumn .product-listing:not(.row-view) .product__inside__hover > .btn--xl{
        display:flex !important;
        width:100%;
        max-width:100%;
        min-height:52px;
        box-sizing:border-box;
        align-items:center;
        justify-content:center;
        overflow:hidden;
        padding:12px 5px !important;
        font-size:13px !important;
        letter-spacing:.1em;
        white-space:nowrap;
    }

    #centerColumn .product-listing:not(.row-view) .product__inside__hover > .btn--xl .icon{
        flex:0 0 auto;
        padding-right:4px;
        font-size:18px;
    }

    footer.pt-footer .pt-footer-brand{
        border-top:0;
    }

    /* Rodape mobile: cards claros soltos viram uma familia escura e compacta. */
    footer.pt-footer .mdp-footer-trust{
        grid-template-columns:1fr;
        gap:10px;
        margin-top:24px;
    }

    footer.pt-footer .mdp-footer-contact{
        grid-column:auto;
    }

    footer.pt-footer .mdp-footer-trust-card{
        align-items:flex-start;
        gap:14px;
        padding:18px;
        border-color:var(--zh-linha-escura);
        background:var(--zh-preto);
    }

    footer.pt-footer .mdp-footer-trust-icon{
        width:44px;
        height:44px;
        flex-basis:44px;
        border-color:var(--zh-cinza);
        background:transparent;
    }

    footer.pt-footer .mdp-footer-trust-icon .icon,
    footer.pt-footer .mdp-footer-trust-card .mdp-contact-list .icon{
        color:var(--zh-branco);
    }

    footer.pt-footer .mdp-footer-trust-card .mdp-footer-trust-label{
        color:var(--zh-branco);
    }

    footer.pt-footer .mdp-footer-trust-card p,
    footer.pt-footer .mdp-footer-trust-card li,
    footer.pt-footer .mdp-footer-trust-card span,
    footer.pt-footer .mdp-footer-trust-card a{
        color:var(--zh-sobre-preto);
    }

    footer.pt-footer .mdp-footer-trust-card a:hover,
    footer.pt-footer .mdp-footer-trust-card a:focus{
        color:var(--zh-champagne-claro);
    }

    footer.pt-footer .mdp-contact-list a{
        overflow-wrap:anywhere;
    }

    footer.pt-footer .mdp-footer-trust-card--subtle{
        flex-direction:row;
        align-items:center;
        justify-content:stretch;
        padding:17px 18px;
    }

    footer.pt-footer .mdp-footer-trust-card--subtle .mdp-footer-trust-content{
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        grid-template-areas:
            "label logo"
            "copy logo";
        align-items:center;
        width:100%;
        column-gap:16px;
    }

    footer.pt-footer .mdp-footer-trust-card--subtle .mdp-footer-trust-label{
        grid-area:label;
        margin-bottom:3px;
    }

    footer.pt-footer .mdp-footer-trust-card--subtle p:first-of-type{
        grid-area:copy;
        margin:0;
    }

    footer.pt-footer .mdp-footer-trust-card--subtle p:last-child{
        grid-area:logo;
        justify-content:flex-end;
        margin:0;
    }

    footer.pt-footer .mdp-footer-payment-logo,
    footer.pt-footer .mdp-footer-security-logo{
        max-height:44px;
        margin:0;
        opacity:.85;
        filter:grayscale(1) invert(1);
    }

    footer.pt-footer .mdp-footer-payment-logo{
        width:128px;
        max-width:128px;
    }

    footer.pt-footer .mdp-footer-security-logo{
        width:138px;
        max-width:138px;
    }
}

@media (prefers-reduced-motion:reduce){
    #slider .pt-hero-slide .slide-img,
    #slider .pt-hero-content > *,
    #slider .pt-hero-cta,
    #carouselDestaque .product__inside,
    #carouselDestaque .product__inside__image img,
    #carouselOfertas .product__inside,
    #carouselOfertas .product__inside__image img,
    .pt-home-inovacao-media .pt-product-roll,
    .pt-home-inovacao-media .pt-product-stand,
    .pt-exp-media .pt-product-roll-repeat,
    .pt-exp-media .pt-product-stand-repeat,
    .pt-reveal{
        transition:none !important;
        animation:none !important;
        transform:none !important;
    }

    #slider .pt-hero-content > *,
    .pt-home-inovacao-media .pt-product-roll,
    .pt-home-inovacao-media .pt-product-stand,
    .pt-exp-media .pt-product-roll-repeat,
    .pt-exp-media .pt-product-stand-repeat,
    .pt-reveal{
        opacity:1 !important;
    }
}

/* ==========================================================================
   Fundos fantasma do tema — o bloco cinza "Sem Imagem" no meio da página
   --------------------------------------------------------------------------
   O style.css do tema pede 4 imagens que NUNCA existiram neste repo:
     back-breadcrumbs.png (:19033 e :19038), content-bg-1.jpg (:12758),
     slider-fluid-bg1.jpg (:12767) e parallax-img-01.jpg (:7624).
   O vhost tem `try_files $uri @placeholder` devolvendo 302 para
   placehold.co/600x600?text=Sem+Imagem — ou seja, imagem faltante não vira 404,
   vira um QUADRADO CINZA renderizado como background. Era isso que aparecia
   atrás do breadcrumb em ~20 telas da loja.
   ========================================================================== */
.breadcrumbs,
.content--parallax,
.content-bg-1,
.slider-fluid-bg1{
    background-image:none !important;
}

/* ---- Produto esgotado -----------------------------------------------------
   Substitui o bloco de QTDE + COMPRAR quando o saldo e zero. Antes disso o
   botao continuava la e o carrinho recusava em silencio (Carrinho.php zerava a
   quantidade), entao o cliente clicava e nao acontecia nada.                */
.pt-esgotado{
    border:1px solid var(--zh-borda);
    background:var(--zh-suave);
    border-radius:var(--zh-raio);
    padding:18px 20px;
    margin:6px 0 4px;
}
.pt-esgotado__selo{
    display:inline-block;
    background:var(--zh-preto);
    color:var(--zh-branco);
    font-weight:500;
    letter-spacing:var(--zh-ls-caixa-alta);
    text-transform:uppercase;
    font-size:11px;
    padding:8px 16px;
    border-radius:var(--zh-raio);
}
.pt-esgotado__texto{
    margin:12px 0 0;
    color:var(--zh-texto);
    font-size:14px;
    line-height:1.55;
}

/* Card da vitrine: produto sem saldo continua visivel, mas nao finge que da
   para comprar. */
.pt-card-esgotado .product-preview__img,
.pt-card-esgotado .product-preview__figure img{ opacity:.45; }
.pt-card-esgotado .pt-card-esgotado__selo{
    position:absolute; top:10px; left:10px; z-index:3;
    background:var(--zh-preto); color:var(--zh-branco);
    font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
    padding:6px 10px; border-radius:var(--zh-raio);
}

/* ============================================================
   noUiSlider (filtro de preco da listagem)
   A lib vem com um teal proprio (#3FB8AF em
   public/loja/external/nouislider/nouislider.css) que era a unica
   cor fora da paleta na loja inteira. Sobrescrito aqui, e nao no
   arquivo da lib, para o vendor seguir atualizavel.
   ============================================================ */
.noUi-connect,
.noUi-origin.noUi-connect{ background: var(--zh-champagne) !important; }
.noUi-target{ background: var(--zh-borda); border-radius: 0; box-shadow: none; border: 0; }
.noUi-handle{
    border-radius: 0;
    border: 1px solid var(--zh-preto);
    background: var(--zh-branco);
    box-shadow: none;
}
.noUi-handle:before, .noUi-handle:after{ background: var(--zh-preto); }

/* Contador do carrinho: o tema trazia #777 sobre #e8e8e8 (3.65:1, reprova AA).
   Escurecido para o grafite da marca. */
.badge--cart, span.badge.badge--cart{ color: var(--zh-grafite) !important; }

/* ============================================================
   OFERTAS — selo de desconto e preco "de"
   O tema usa um coral (#fa6b6b) como cor de promocao, unica cor
   fora da paleta na secao. Selo passa a champagne com texto quase
   preto (7.1:1) e o preco antigo vira cinza de apoio (5.1:1).
   ============================================================ */
.product__label,
.product__label--left,
.product__label--right{
    background: var(--zh-champagne) !important;
    color: var(--zh-preto) !important;
    border-radius: 0 !important;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: .10em;
    text-transform: uppercase;
}
.price-box__old,
.price-box__old *{
    color: #6E6E6E !important;
    border-top-color: #6E6E6E !important;
    text-decoration-color: #6E6E6E;
}

/* ============================================================
   ESCALADA ZOHR — cards de nivel na institucional (/loja/cadastre-se)
   Numeros vem do banco (escalada_nivel); aqui e so a pele.
   ============================================================ */
.zh-escalada{ margin-top:28px; }
.zh-esc-card{
    border:1px solid var(--zh-borda);
    padding:32px 28px 24px;
    height:100%;
    background:var(--zh-branco);
}
.zh-esc-eyebrow{
    display:block; font-size:11px; letter-spacing:.35em; text-transform:uppercase;
    color:var(--zh-champagne-escuro); margin-bottom:10px;
}
.zh-esc-max{
    font-size:46px; font-weight:400; letter-spacing:.04em; line-height:1;
    color:var(--zh-preto); margin:0 0 22px;
}
.zh-esc-max small{
    display:block; font-size:12px; letter-spacing:.28em; text-transform:uppercase;
    color:#6E6E6E; margin-top:8px;
}
.zh-esc-tabela{ margin-bottom:14px; }
.zh-esc-tabela thead th{
    border-bottom:1px solid var(--zh-preto); border-top:0;
    font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    font-weight:400; color:var(--zh-preto); padding:8px 6px;
}
.zh-esc-tabela tbody td{
    border-top:1px solid var(--zh-borda); padding:11px 6px;
    font-size:14px; color:var(--zh-preto); vertical-align:middle;
}
/* o degrau conquistado e o dado que importa: champagne so aqui */
.zh-esc-tabela tbody td:last-child strong{ color:var(--zh-champagne-escuro); }
.zh-esc-inicio{
    font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6E6E6E;
}
.zh-esc-nota{ font-size:12.5px; line-height:1.5; color:#6E6E6E; margin:0; }

@media (max-width:767px){
    .zh-esc-card{ margin-bottom:20px; padding:26px 20px 20px; }
    .zh-esc-max{ font-size:38px; }
}