/* protech-brand.css — identidade visual PROTECH NUTRITIONAL (rebrand jul/2026)
 * Carregado DEPOIS de style.css (ja recolorido: verdes -> preto/cinza).
 * Design system (doc 15-rebrand-protech-nutritional.md):
 *   - Fonte unica: Montserrat (400 dominante), titulos CAIXA ALTA com letter-spacing largo
 *   - Paleta MONOCROMATICA: preto #000 / branco #fff / cinzas #d4d4d4 #8f8f8f #e2e2e2
 *   - SEM cor de acento; botoes retangulares pretos; secoes invertidas fundo preto
 *   - Motivo grafico: o "+" da marca
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root{
    --pt-preto:        #000000;
    --pt-branco:       #ffffff;
    --pt-cinza-claro:  #d4d4d4;  /* bordas/texto secundario sobre preto */
    --pt-cinza-medio:  #8f8f8f;  /* texto secundario / hover de link */
    --pt-cinza-suave:  #e2e2e2;
    --pt-linha:        #dbdbdb;  /* bordas em fundo claro */
    --pt-fundo-suave:  #f5f5f5;
    --pt-hover:        #333333;  /* hover dos botoes pretos */
    --pt-texto:        #444444;  /* corpo de texto em fundo claro */
}

/* ============================================================
   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', 'Ubuntu', sans-serif;
}

body{ font-weight:400; color:#000; }

/* Titulos: Montserrat 400, CAIXA ALTA, letter-spacing largo */
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', 'Ubuntu', sans-serif;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#000;
}

/* ============================================================
   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:0 !important;
    font-family:'Montserrat', sans-serif;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:500;
}
/* CTAs da marca: fundo preto, hover cinza-escuro */
.btn--ys, .btn-primary, .btn-AddCart, .btn-addtocart,
.link-button, .button--border-thick{
    background-color:var(--pt-preto) !important;
    border-color:var(--pt-preto) !important;
    color:#fff !important;
}
.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(--pt-hover) !important;
    border-color:var(--pt-hover) !important;
    color:#fff !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:#fff !important;
    border:1px solid #000 !important;
    color:#000 !important;
}
.btn--ys.btn--light:hover{
    background:#000 !important;
    border-color:#000 !important;
    color:#fff !important;
}

/* ---- Links e preco ---- */
a{ color:#000; }
a:hover{ color:var(--pt-cinza-medio); }
.tt-price .new-price, .new-price,
.product__inside__price, .price{ color:#000; font-weight:600; }
.tt-price-old, .price-old{ color:var(--pt-cinza-medio); }
.breadcrumb .active{ color:var(--pt-cinza-medio); }

/* ---- Selos/badges monocromaticos ---- */
.tt-label-new, .tt-label-sale,
.product-labels .new, .product-labels .sale,
.tt-promo-fixed, .tt-badge,
.product__inside__labels span{
    background-color:var(--pt-preto) !important;
    color:#fff !important;
    border-radius:0 !important;
    text-transform:uppercase;
    letter-spacing:.08em;
}

/* ============================================================
   MINI DESIGN-SYSTEM .pt- (usado pelas paginas institucionais)
   ============================================================ */
.pt-section{ padding:clamp(56px, 9vw, 110px) 0; }
.pt-section--dark{ background:#000; color:#fff; }
.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:#fff; }
.pt-section--dark a:hover{ color:var(--pt-cinza-claro); }

.pt-eyebrow{
    display:inline-block;
    margin-bottom:14px;
    font-family:'Montserrat', sans-serif;
    font-size:12px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.3em;
    color:#000;
}
.pt-section--dark .pt-eyebrow{ color:var(--pt-cinza-claro); }

.pt-title{
    margin:0 0 20px;
    font-family:'Montserrat', sans-serif;
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(28px, 4vw, 52px);
    letter-spacing:.12em;
    line-height:1.22;
    color:#000;
}
.pt-section--dark .pt-title{ color:#fff; }

.pt-lead{
    margin:0 0 18px;
    font-size:17px;
    line-height:1.7;
    font-weight:400;
    color:var(--pt-texto);
}
.pt-section--dark .pt-lead{ color:var(--pt-cinza-claro); }

.pt-btn{
    display:inline-block;
    padding:14px 36px;
    background:var(--pt-preto);
    border:1px solid var(--pt-preto);
    border-radius:0;
    color:#fff !important;
    font-family:'Montserrat', sans-serif;
    font-size:13px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.2em;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    transition:background .18s, border-color .18s, color .18s;
}
.pt-btn:hover, .pt-btn:focus{
    background:var(--pt-hover);
    border-color:var(--pt-hover);
    color:#fff !important;
    text-decoration:none;
}
.pt-btn--ghost{
    background:transparent;
    border:1px solid #fff;
    color:#fff !important;
}
.pt-btn--ghost:hover, .pt-btn--ghost:focus{
    background:#fff;
    border-color:#fff;
    color:#000 !important;
}

/* o "+" grande decorativo da marca */
.pt-plus{
    display:inline-block;
    font-family:'Montserrat', sans-serif;
    font-weight:400;
    font-size:clamp(48px, 7vw, 120px);
    line-height:1;
    color:#000;
}
.pt-section--dark .pt-plus{ color:#fff; }

/* numero gigante (secao de metricas "A Protech em + numeros") */
.pt-num{
    display:block;
    font-family:'Montserrat', sans-serif;
    font-weight:400;
    font-size:clamp(40px, 6vw, 80px);
    line-height:1.05;
    letter-spacing:.04em;
    color:#000;
}
.pt-section--dark .pt-num{ color:#fff; }

/* 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;
}

.mdp-shop-menu > li > a{
    white-space:nowrap;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.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 (monocromatico)
   ============================================================ */
.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(--pt-linha);
    border-radius:0;
    background:#fff;
    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:0;
    background:var(--pt-preto);
    color:#fff;
    font-size:23px;
}

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

.mdp-footer-trust-label{
    display:block;
    margin-bottom:8px;
    color:#000;
    font-size:12px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:.14em;
    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(--pt-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:0;
    background:#fff;
    border:1px solid var(--pt-cinza-claro);
    color:#000;
    font-size:12px;
    font-weight:500;
    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(--pt-texto);
    font-size:14px;
    line-height:1.35;
}

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

.mdp-contact-list .icon{
    color:#000;
    font-size:16px;
}

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

.mdp-contact-list a:hover{
    color:var(--pt-cinza-medio);
}

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

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

.mdp-footer-trust-card--subtle p{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin:0;
    color:var(--pt-cinza-medio);
    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(--pt-linha);
    border-radius:0;
    background:#fff;
    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:0;
    background:var(--pt-fundo-suave);
    color:#000;
    font-size:22px;
}

.mdp-benefit strong{
    display:block;
    color:#000;
    font-size:15px;
    line-height:1.15;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.mdp-benefit small{
    display:block;
    margin-top:4px;
    color:var(--pt-cinza-medio);
    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:0;
    background:var(--pt-fundo-suave);
    border:1px solid var(--pt-linha);
}

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

.mdp-eyebrow{
    display:inline-block;
    margin-bottom:8px;
    color:#000;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.3em;
    font-size:12px;
}

.mdp-brand-copy h2{
    margin:0 0 12px;
    color:#000;
    font-size:30px;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:400;
}

.mdp-brand-copy p{
    max-width:520px;
    margin:0;
    color:var(--pt-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:#000;
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:4px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:13px;
}
.mdp-text-link:hover{ color:var(--pt-cinza-medio); }

.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;
}

.mdp-consultor-img{
    position:absolute;
    right:0;
    bottom:-18px;
    width:min(46%, 240px);
    border-radius:0;
    box-shadow:0 18px 38px rgba(0, 0, 0, .16);
}

/* ============================================================
   Card "Por que Protech" (monocromatico)
   ============================================================ */
.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(--pt-linha);
    border-radius:0;
    background:#fff;
    box-shadow:none;
}

.mdp-why-card:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:6px;
    height:100%;
    background:#000;
}

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

.mdp-why-copy h2{
    max-width:760px;
    margin:0 0 14px;
    color:#000;
    font-size:30px;
    line-height:1.22;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:400;
}

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

.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:0;
    background:var(--pt-fundo-suave);
}

.mdp-why-media img{
    position:relative;
    z-index:1;
    width:min(100%, 260px);
    max-height:250px;
    object-fit:contain;
    filter:drop-shadow(0 18px 24px rgba(0, 0, 0, .14));
}

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

.mdp-why-point{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px 0 0;
    border-top:1px solid var(--pt-linha);
}

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

.mdp-why-point strong{
    display:block;
    color:#000;
    font-size:15px;
    line-height:1.2;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.mdp-why-point small{
    display:block;
    margin-top:5px;
    color:var(--pt-cinza-medio);
    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:#000; font-size:13px; font-weight:500; text-decoration:none; text-transform:uppercase; letter-spacing:.06em; }
.mdp-top-entrar:hover{ color:var(--pt-cinza-medio); }
.mdp-top-entrar .icon{ font-size:14px; }
.mdp-top-escritorio{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:0; background:#000; color:#fff !important; font-size:12px; font-weight:600; text-decoration:none; border:1px solid #000; line-height:1; text-transform:uppercase; letter-spacing:.08em; transition:background .15s,color .15s,border-color .15s; }
.mdp-top-escritorio:hover{ background:var(--pt-hover); border-color:var(--pt-hover); color:#fff !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:#fff; font-size:13px; }
    .mdp-top-entrar:hover{ color:var(--pt-cinza-claro); }
    .mdp-top-escritorio{
        background:#fff; border-color:#fff;
        color:#000 !important;
        padding:6px 16px; font-size:12px;
    }
    .mdp-top-escritorio:hover{ background:var(--pt-cinza-claro); border-color:var(--pt-cinza-claro); color:#000 !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:#fff; color:#000 !important; padding:5px 12px; border-radius:0; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; text-decoration:none; line-height:1; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.stuck-nav.fixedbar .mdp-stick-escritorio{ display:inline-flex; }
.mdp-stick-escritorio:hover{ background:var(--pt-cinza-claro); color:#000 !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:#fff; 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:#fff; }
    .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:#fff !important; padding:5px 11px; border-radius:0; font-size:11px; font-weight:500; }
    .mdp-top-entrar:hover{ background:rgba(255,255,255,.18); color:#fff !important; }
    /* "Escritorio" inline (sem absoluto), botao branco invertido */
    .mdp-top-escritorio{ position:static; background:#fff; border-color:#fff; color:#000 !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 Protech" 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(--pt-cinza-medio);
    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(--pt-cinza-medio);
}

/* ===== 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:52px; width:auto; display:inline-block; margin:16px auto 12px; }
@media (max-width:768px){
    .pt-logo,
    #header .logo,
    #header img.logo{ max-height:38px; margin:10px auto 6px; }
}
#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: so no off-canvas mobile */
@media (min-width:769px){ .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:#c9c9c9; 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:#fff; }
    .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:#e9e9e9; }

/* 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:#fff;
}

/* Botao invertido (branco solido) para secoes escuras — usado no pt-experience */
.pt-btn--inverso{ background:#fff; border-color:#fff; color:#000 !important; }
.pt-btn--inverso:hover, .pt-btn--inverso:focus{ background:var(--pt-cinza-claro); border-color:var(--pt-cinza-claro); color:#000 !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:0 !important;
}
.bx-wrapper .bx-viewport{
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !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:0 !important; }

/* ===== Trust cards do rodape: fundo BRANCO -> texto escuro (o fallback inline
   do footer pinta a/p/li de #d4d4d4, ilegivel dentro dos cards claros) ===== */
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:#333; }
footer.pt-footer .mdp-footer-trust-card a:hover{ color:#000; }
footer.pt-footer .mdp-footer-trust-card .mdp-footer-trust-label{ color:#000; }
footer.pt-footer .mdp-footer-trust-card .mdp-contact-list .icon{ color:#000; }
footer.pt-footer .mdp-footer-trust-icon{
    background:transparent;
    border:1px solid var(--pt-cinza-claro);
}
footer.pt-footer .mdp-footer-trust-icon .icon{ color:#000; }

/* ===== pt-experience: painel preto -> eyebrow/titulo/copy brancos (estavam pretos, invisiveis) ===== */
.pt-exp-panel{ color:#fff; }
.pt-exp-panel .pt-eyebrow, .pt-exp-panel .pt-title, .pt-exp-panel h2, .pt-exp-panel h3{ color:#fff; }
.pt-exp-panel .pt-lead, .pt-exp-panel p, .pt-exp-panel li{ color:#d4d4d4; }
.pt-exp-panel .pt-plus{ color:#fff; }

/* ===== 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:#fff; }
#header .cart .dropdown-menu .cart__item__info__title a{ color:#fff; }

/* ===== Faixa preta do topo: full-bleed explicito (em viewport largo o fundo
   ficava branco e o texto branco sumia) ===== */
#header .pt-topbar{ background:#000; width:100%; }
#header .pt-topbar .slogan{ color:#fff; 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:#fff;
    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:#fff !important;
}
#header .pt-topbar .account-row-list li a:hover,
#header .pt-topbar .account-row-list li a:focus{
    color:var(--pt-cinza-claro) !important;
}
#header .pt-topbar .account-row-list li a:focus-visible{
    outline:1px solid #fff;
    outline-offset:3px;
}
#header .pt-topbar .mdp-top-escritorio{ margin:0; }
#header .pt-topbar .mdp-top-access{ line-height:1; }

/* ===== Alertas flash (MSG): monocromatico ===== */
.alerta{ background-color:#000 !important; color:#fff; }
.alerta.alert-success{ background-color:#000 !important; }
.alerta.alert-error{ background-color:#000 !important; border-left:4px solid #fff; }

/* "+" dentro de titulo acompanha o tamanho do texto (o gigante e so decorativo standalone) */
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:600; }

/* 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) */
.pt-loja-consultor{
    background:#f5f5f5;
    border-bottom:1px solid #e2e2e2;
    text-align:center;
    padding:7px 12px;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#555;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pt-loja-consultor strong{ color:#000; font-weight:600; }

/* ============================================================
   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:#111;
}

#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);
}

#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', Arial, sans-serif;
    font-size:12px;
    font-weight:500;
    line-height:1.2;
    letter-spacing:.34em;
    text-transform:uppercase;
}

#slider .pt-hero-title{
    margin:0;
    font-family:'Montserrat', Arial, sans-serif;
    font-size:clamp(42px, 5vw, 76px);
    font-weight:400;
    line-height:1.02;
    letter-spacing:.055em;
    text-transform:uppercase;
}

#slider .pt-hero-plus{
    display:inline-block;
    font-size:1.12em;
    font-weight:300;
    line-height:.8;
}

#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;
    padding:15px 18px 15px 22px;
    border:1px solid currentColor;
    color:inherit;
    font-size:12px;
    font-weight:600;
    letter-spacing:.2em;
    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);
}

#slider .pt-hero--escuro .pt-hero-content{ color:#fff; }
#slider .pt-hero--escuro .pt-hero-title,
#slider .pt-hero--escuro .pt-hero-kicker{ color:#fff; }
#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:#fff; color:#000; }

#slider .pt-hero--claro .pt-hero-content{ color:#111; }
#slider .pt-hero--claro .pt-hero-text{ color:#444; }
#slider .pt-hero--claro .pt-hero-cta:hover,
#slider .pt-hero--claro .pt-hero-cta:focus{ background:#000; color:#fff; }

#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 #fff;
    border-right:2px solid #fff;
}

#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:0;
    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.active,
#slider .bx-wrapper .bx-pager.bx-default-pager a:focus{
    background:#fff;
}

/* Composicao Createch: dois potes entram em sequencia, como no institucional. */
.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 #e5e5e5;
    background:#fff;
    transition:transform .35s cubic-bezier(.2,.65,.3,1), box-shadow .35s ease, border-color .35s ease;
}

#carouselDestaque .product:hover .product__inside,
#carouselDestaque .product:focus-within .product__inside,
#carouselOfertas .product:hover .product__inside,
#carouselOfertas .product:focus-within .product__inside{
    transform:translateY(-7px);
    border-color:#bcbcbc;
    box-shadow:0 18px 40px rgba(0,0,0,.1);
}

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

#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:14px;
    line-height:1.45;
    letter-spacing:.11em;
}

#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:18px;
    letter-spacing:.04em;
}

#carouselDestaque .product__inside__hover,
#carouselOfertas .product__inside__hover{
    position:static !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff;
}

#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:46px;
    margin:0;
    border:1px solid #000;
    border-radius:0;
    background:#000;
    color:#fff;
    font-size:12px;
    letter-spacing:.18em;
    transition:background-color .25s ease, 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:#fff;
    color:#000;
}

#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:#000 !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:#000;
    }

    .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:#303030;
        background:#0b0b0b;
    }

    footer.pt-footer .mdp-footer-trust-icon{
        width:44px;
        height:44px;
        flex-basis:44px;
        border-color:#555;
        background:transparent;
    }

    footer.pt-footer .mdp-footer-trust-icon .icon,
    footer.pt-footer .mdp-footer-trust-card .mdp-contact-list .icon{
        color:#fff;
    }

    footer.pt-footer .mdp-footer-trust-card .mdp-footer-trust-label{
        color:#fff;
    }

    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(--pt-cinza-claro);
    }

    footer.pt-footer .mdp-footer-trust-card a:hover,
    footer.pt-footer .mdp-footer-trust-card a:focus{
        color:#fff;
    }

    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;
    }
}
