/* newprofessional-brand.css — identidade visual da loja (guia de marca New Professional's)
 * Carregado DEPOIS de style.css (ja recolorido p/ o marrom escuro #382923).
 *
 * Paleta oficial:
 *   #E9E6E2  off-white / fundo suave da marca
 *   #BBA579  dourado suave (champagne) — bordas, detalhes, hover
 *   #4C4641  marrom acinzentado (texto secundario)
 *   #382923  marrom escuro — texto principal e fundos escuros
 *   #000000 / #FFFFFF
 * Dourado vivo do logo (gradientes/realces):
 *   #E4A824 (ouro escuro) -> #FCCC60 (ouro) -> #F6E58C (ouro claro)
 *
 * Tipografia: Poppins (substituto livre da "Biennale" do guia).
 * Contraste: texto sobre dourado = #382923; texto sobre marrom = #E9E6E2/#fff.
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
    /* --- familia oficial --- */
    --np-ouro-escuro:#E4A824;
    --np-ouro:#FCCC60;
    --np-ouro-claro:#F6E58C;
    --np-champagne:#BBA579;
    --np-marrom:#382923;
    --np-marrom-claro:#4C4641;
    --np-offwhite:#E9E6E2;
    --np-branco:#fff;

    /* --- derivados de uso --- */
    --np-grad-ouro:linear-gradient(135deg,#E4A824 0%,#FCCC60 52%,#F6E58C 100%);
    --np-grad-ouro-hover:linear-gradient(135deg,#B9821A 0%,#E4A824 52%,#FCCC60 100%);
    --np-marrom-escuro:#241812;   /* hover/realce mais escuro que o marrom */
    --np-linha:#DFD7C8;           /* divisorias/bordas claras */
    --np-texto-suave:#6B635B;     /* legendas, textos de apoio */

    /* --- aliases legados (mantidos p/ nao quebrar regras antigas) --- */
    --md-green-dark:  var(--np-marrom);
    --md-green:       var(--np-champagne);
    --md-green-darker:var(--np-marrom-escuro);
    --md-soft:        var(--np-offwhite);
    --md-line:        var(--np-linha);
    --md-ink:         var(--np-marrom);
}

/* ---- Tipografia: corpo em Poppins ---- */
body,
input, textarea, select, button,
p, a, span, li, td, th, label,
.tt-base-text, .tt-price, .tt-product-single-info,
.tt-menu-list, .product-name{
    font-family:'Poppins', sans-serif;
}

/* ---- Tipografia: titulos e menu em Poppins 600 ---- */
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-box h1, .title-box h2, .pt-title{
    font-family:'Poppins', sans-serif;
    font-weight:600;
    letter-spacing:.2px;
}

/* ---- Cor de texto base ---- */
body{ color:var(--np-marrom-claro); }
h1, h2, h3, h4, h5, h6{ color:var(--np-marrom); }

/* ---- CTAs: gradiente dourado, texto marrom escuro ---- */
.btn--ys, .btn-primary, .btn-AddCart, .btn-addtocart, .pt-btn,
button.btn--ys, a.btn--ys, input.btn--ys{
    background-color:var(--np-ouro) !important;
    background-image:var(--np-grad-ouro) !important;
    border-color:var(--np-ouro-escuro) !important;
    color:var(--np-marrom) !important;
    border-radius:9px !important;
    font-weight:600;
    text-shadow:none !important;
}
.btn--ys:hover, .btn-primary:hover, .btn-AddCart:hover, .btn-addtocart:hover, .pt-btn:hover,
.btn--ys:focus, .btn-primary:focus, .btn-AddCart:focus, .btn-addtocart:focus, .pt-btn:focus,
.btn--ys:active, .btn-primary:active, .btn-AddCart:active, .btn-addtocart:active{
    background-color:var(--np-ouro-escuro) !important;
    background-image:var(--np-grad-ouro-hover) !important;
    border-color:#B9821A !important;
    color:var(--np-marrom) !important;
}
/* icones dentro dos CTAs herdam o marrom (nao ficam brancos sobre dourado) */
.btn--ys .icon, .btn-primary .icon, .btn-AddCart .icon, .btn-addtocart .icon,
.btn--ys svg, .btn-primary svg{ color:var(--np-marrom) !important; fill:currentColor !important; }

/* ---- Links e preco ---- */
a{ color:var(--np-marrom); }
a:hover{ color:var(--np-ouro-escuro); }
.tt-price .new-price, .new-price{ color:var(--np-marrom); font-weight:600; }

/* ---- Acentos champagne: selos, barras, destaques ---- */
.tt-label-new, .tt-label-sale,
.product-labels .new, .product-labels .sale,
.tt-promo-fixed, .tt-badge{
    background-color:var(--np-champagne) !important;
    color:var(--np-marrom) !important;
}
/* divisorias/realces secundarios */
.tt-price-old, .breadcrumb .active{ color:var(--np-champagne); }

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

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

.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(--np-champagne);
    border-radius:8px;
    background:linear-gradient(135deg, #ffffff 0%, #E9E6E2 100%);
    box-shadow:0 12px 28px rgba(56, 41, 35, .18);
}

.mdp-footer-trust-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--np-marrom);
    color:var(--np-ouro);
    font-size:23px;
}

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

.mdp-footer-trust-label{
    display:block;
    margin-bottom:8px;
    color:var(--np-marrom);
    font-size:12px;
    line-height:1.2;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

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

.mdp-footer-spi-mark{
    display:flex;
    align-items:center;
    gap:8px;
    width:max-content;
    color:#1f4f7a;
}

.mdp-footer-spi-mark svg{
    width:48px;
    height:48px;
    flex:0 0 48px;
    fill:currentColor;
}

.mdp-footer-spi-mark > span{
    display:flex;
    flex-direction:column;
    color:#1f4f7a;
    font-size:14px;
    font-weight:700;
    letter-spacing:.03em;
    line-height:1.05;
    white-space:nowrap;
}

.mdp-footer-spi-mark small{
    margin-top:3px;
    font-size:9px;
    font-weight:700;
    letter-spacing:.13em;
}

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

.mdp-footer-trust-card p{
    margin:0 0 12px;
    color:var(--np-marrom-claro);
    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:999px;
    background:#fff;
    border:1px solid rgba(56, 41, 35, .16);
    color:var(--np-marrom);
    font-size:12px;
    font-weight:600;
    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(--np-marrom-claro);
    font-size:14px;
    line-height:1.35;
}

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

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

.mdp-contact-list a{
    color:var(--np-marrom-claro);
}

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

/* ---- 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(--np-texto-suave);
}

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

.mdp-footer-inline-logo{
    height:20px;
    width:auto;
    max-width:120px;
    opacity:.85;
}

.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(--np-linha);
    border-radius:8px;
    background:#fff;
    box-shadow:0 10px 22px rgba(56, 41, 35, .07);
}

.mdp-benefit .icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--np-offwhite);
    color:var(--np-marrom);
    font-size:22px;
}

.mdp-benefit strong{
    display:block;
    color:var(--np-marrom);
    font-size:16px;
    line-height:1.15;
    font-weight:700;
}

.mdp-benefit small{
    display:block;
    margin-top:4px;
    color:var(--np-texto-suave);
    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:8px;
    background:linear-gradient(135deg, #E9E6E2 0%, #ffffff 52%, #F3EFE8 100%);
    border:1px solid var(--np-linha);
}

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

.mdp-eyebrow{
    display:inline-block;
    margin-bottom:8px;
    color:var(--np-ouro-escuro);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:12px;
}

.mdp-brand-copy h2{
    margin:0 0 12px;
    color:var(--np-marrom);
    font-size:30px;
    line-height:1.15;
    text-transform:none;
}

.mdp-brand-copy p{
    max-width:520px;
    margin:0;
    color:var(--np-marrom-claro);
    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(--np-marrom);
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:4px;
    text-decoration-color:var(--np-champagne);
}
.mdp-text-link:hover{ color:var(--np-ouro-escuro); }

.mdp-brand-images{
    position:relative;
    display:grid;
    place-items:center;
    min-height:260px;
}

.mdp-featured-product{
    position:relative;
    display:grid;
    place-items:center;
    width:100%;
    min-height:260px;
    color:var(--np-marrom);
    text-decoration:none;
    isolation:isolate;
}

.mdp-featured-product::before{
    content:"";
    position:absolute;
    z-index:-2;
    width:min(38vw, 390px);
    aspect-ratio:1;
    border-radius:50%;
    background:
        radial-gradient(circle at 38% 32%, rgba(255,255,255,.92) 0 8%, transparent 31%),
        linear-gradient(135deg, rgba(246,229,140,.72), rgba(187,165,121,.30));
    box-shadow:inset 0 0 0 1px rgba(142,105,18,.18);
}

.mdp-featured-product::after{
    content:"";
    position:absolute;
    z-index:-1;
    width:min(29vw, 300px);
    aspect-ratio:1;
    border:1px solid rgba(142,105,18,.32);
    border-radius:50%;
    transform:translate(34px, -8px);
}

.mdp-product-halo{
    position:absolute;
    z-index:-1;
    width:min(20vw, 210px);
    height:60%;
    border-radius:50%;
    background:rgba(255,255,255,.66);
    filter:blur(24px);
}

.mdp-product-img{
    position:relative;
    display:block;
    width:min(43%, 300px);
    max-height:300px;
    object-fit:contain;
    z-index:2;
    filter:drop-shadow(0 22px 24px rgba(56,41,35,.24));
    transition:transform .4s cubic-bezier(.2,.75,.3,1), filter .4s ease;
}

.mdp-product-badge{
    position:absolute;
    right:12%;
    top:18%;
    z-index:3;
    display:flex;
    width:62px;
    height:62px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--np-marrom);
    color:#fff;
    box-shadow:0 12px 25px rgba(56,41,35,.22);
    line-height:1;
}

.mdp-product-badge strong{
    color:var(--np-ouro);
    font-size:23px;
    line-height:.9;
}

.mdp-product-badge small{
    margin-top:4px;
    color:#fff;
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
}

.mdp-featured-product:hover .mdp-product-img,
.mdp-featured-product:focus .mdp-product-img{
    transform:translateY(-8px) scale(1.035);
    filter:drop-shadow(0 30px 30px rgba(56,41,35,.30));
}

.mdp-featured-product:focus-visible{
    outline:3px solid var(--np-ouro);
    outline-offset:5px;
    border-radius:50%;
}

@media (prefers-reduced-motion:reduce){
    .mdp-product-img{ transition:none; }
}

.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(--np-linha);
    border-radius:8px;
    background:
        radial-gradient(circle at 88% 12%, rgba(228, 168, 36, .16), transparent 31%),
        linear-gradient(135deg, #ffffff 0%, #E9E6E2 100%);
    box-shadow:0 18px 42px rgba(56, 41, 35, .10);
}

.mdp-why-card:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:6px;
    height:100%;
    background:linear-gradient(180deg, var(--np-ouro-escuro), var(--np-ouro-claro));
}

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

.mdp-why-copy h2{
    max-width:760px;
    margin:0 0 14px;
    color:var(--np-marrom);
    font-size:32px;
    line-height:1.16;
    text-transform:none;
}

.mdp-why-copy p{
    max-width:760px;
    margin:0 0 22px;
    color:var(--np-marrom-claro);
    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:50%;
    background:var(--np-offwhite);
}

.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(56, 41, 35, .18));
}

.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 rgba(56, 41, 35, .14);
}

.mdp-why-point .icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    color:var(--np-ouro-escuro);
    box-shadow:0 8px 18px rgba(56, 41, 35, .10);
    font-size:21px;
}

.mdp-why-point strong{
    display:block;
    color:var(--np-marrom);
    font-size:16px;
    line-height:1.2;
}

.mdp-why-point small{
    display:block;
    margin-top:5px;
    color:var(--np-texto-suave);
    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:270px;
    }

    .mdp-featured-product{
        min-height:270px;
    }

    .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:24px;
    }

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

    .mdp-product-img{
        width:min(58%, 235px);
    }

    .mdp-featured-product{
        min-height:245px;
    }

    .mdp-featured-product::before{
        width:min(82vw, 310px);
    }

    .mdp-featured-product::after{
        width:min(64vw, 240px);
        transform:translate(26px, -5px);
    }

    .mdp-product-badge{
        right:8%;
        top:14%;
        width:54px;
        height:54px;
    }

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

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

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

/* ===== Topo: acesso rapido (Entrar + Escritorio Virtual) — visitante ===== */
.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(--np-offwhite); font-size:13px; font-weight:600; text-decoration:none; }
.mdp-top-entrar:hover{ color:var(--np-ouro); }
.mdp-top-entrar .icon{ font-size:14px; }
.mdp-top-escritorio{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; background-image:var(--np-grad-ouro); background-color:var(--np-ouro); color:var(--np-marrom) !important; font-size:12.5px; font-weight:700; text-decoration:none; border:1px solid var(--np-ouro-escuro); line-height:1; transition:background .15s,color .15s,border-color .15s; }
.mdp-top-escritorio:hover{ background-image:var(--np-grad-ouro-hover); background-color:var(--np-ouro-escuro); border-color:#B9821A; color:var(--np-marrom) !important; }
.mdp-top-escritorio .icon{ font-size:14px; }

/* desktop (>1024px): faixa marrom — "Entrar" off-white e "Escritorio" como pill
   dourada que destaca (igual ao mobile). 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(--np-offwhite); font-size:13px; }
    .mdp-top-entrar:hover{ color:var(--np-ouro); }
    .mdp-top-escritorio{
        padding:6px 16px; font-size:12.5px;
    }
}

/* Botao Escritorio na barra sticky (stuck-nav) */
.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-image:var(--np-grad-ouro); background-color:var(--np-ouro); color:var(--np-marrom) !important; padding:5px 12px; border-radius:18px; font-size:12px; font-weight:700; 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-image:var(--np-grad-ouro-hover); background-color:var(--np-ouro-escuro); color:var(--np-marrom) !important; }
.mdp-stick-escritorio .icon{ font-size:14px; }

/* mobile: barra marrom escura (#382923) — "Entrar" a esquerda, "Escritorio" no canto sup. direito;
   icone de usuario (account) escondido p/ visitante (substituido pelo botao) */
@media (max-width:1024px){
    /* barra 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(--np-offwhite); 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(--np-ouro); }
    .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 (pill translucido) */
    .mdp-top-entrar{ display:inline-flex; align-items:center; gap:5px; background:rgba(233,230,226,.14); border:1px solid rgba(233,230,226,.45); color:var(--np-offwhite) !important; padding:5px 11px; border-radius:16px; font-size:12px; font-weight:600; }
    .mdp-top-entrar:hover{ background:rgba(233,230,226,.28); color:#fff !important; }
    /* "Escritorio" inline (sem absoluto), pill dourada */
    .mdp-top-escritorio{ position:static; padding:5px 11px; font-size:12px; 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:11px; }
    .mdp-top-entrar .icon{ display:none; }
    .mdp-top-escritorio{ padding:4px 9px; font-size:11px; }
    .mdp-stick-escritorio{ right:50px; padding:4px 10px; font-size:11px; }
}

/* card "Por que newprofessional" 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(--np-texto-suave);
    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(--np-texto-suave);
}

/* =========================================================================
   CORRECOES ESTRUTURAIS DE LAYOUT DA LOJA
   Portadas do CSS de marca do fork irmao. So a parte de LAYOUT/BUG — a
   identidade (paleta, fontes, caixa-alta) continua sendo a deste projeto.
   Este arquivo carrega DEPOIS do style.css, entao vence por ordem/especificidade.
   ========================================================================= */

/* --- Trava de overflow horizontal ---------------------------------------
   As rows do bootstrap (margem negativa) somadas ao slider full-bleed
   estouravam a largura da viewport e criavam scroll lateral (pior no mobile,
   onde a pagina "balancava" de lado ao rolar). */
html, body{ overflow-x:hidden; }

/* --- Logo do header: SELO redondo ---------------------------------------
   style.css:8254 define #header img.logo{max-height:120px}. O logo New
   Professional's e um SELO (423x460, quase quadrado), nao um lockup
   horizontal — entao o cap de altura antigo (52px) o deixava minusculo.
   Selo maior + width:auto, com respiro extra na linha do logo. */
#header .logo,
#header img.logo{
    max-height:66px;
    /* !important porque o header_sem_menu.php traz width:200px inline — sem isto
       o selo (423x460) sairia esticado (200px de largura x 66px de altura). */
    width:auto !important;
    height:auto;
    display:inline-block;
}
#header .logo.img-responsive{ margin-top:8px; margin-bottom:8px; }
@media (max-width:768px){
    #header .logo,
    #header img.logo{ max-height:46px; }
    #header .logo.img-responsive{ margin-top:6px !important; margin-bottom:0 !important; }
}

/* --- Menu principal escopado ao .stuck-nav ------------------------------
   O menu (menu.php) e usado dentro da barra .stuck-nav. O escopo evita que
   as regras de flex vazem pra qualquer outra inclusao do mesmo <ul>
   (ex.: off-canvas mobile), onde virar flex jogaria o menu no fluxo da
   pagina como uma faixa solta. Base: wrap (nao estoura quando o catalogo
   crescer) + itens que nao quebram no meio do rotulo. */
.stuck-nav .mdp-shop-menu,
.stuck-nav .pt-menu{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    float:none;
}

/* O tema declara `#header .navbar .navbar-nav{ overflow:auto }` (style.css:8362) — era para o menu
   rolar quando havia 31 categorias. Isso RECORTA o dropdown por familia, que e absoluto dentro do
   <ul>. Com 6 familias o menu nao estoura mais, entao visible e seguro.
   O seletor precisa do #header porque a regra do tema tem ID: sem isso perde por especificidade,
   nao por ordem de carregamento.

   SO NO DESKTOP, de proposito. No mobile o MESMO <ul> vira a gaveta off-canvas (position:fixed,
   left:-100%), e os <li> ficam numa linha unica mais larga que a gaveta. Com overflow visible eles
   escapam da gaveta e a ultima familia aparece flutuando ~54px dentro da tela. Ali o overflow do
   tema e justamente o que contem o vazamento — e o dropdown nem existe, porque abaixo de 1025px as
   linhas viram lista recuada no fluxo. */
@media (min-width:1025px){
    #header .navbar .pt-menu,
    #header .navbar .mdp-shop-menu{ overflow:visible; }
}
.stuck-nav .mdp-shop-menu > li,
.stuck-nav .pt-menu > li{ float:none; }
.stuck-nav .mdp-shop-menu > li > a,
.stuck-nav .pt-menu > li > a{ white-space:nowrap; }

/* Desktop estreito: os rotulos nao cabiam em uma linha e o menu quebrava
   em duas, empurrando o conteudo da home pra baixo. */
@media (min-width:769px) and (max-width:1200px){
    .stuck-nav .mdp-shop-menu > li > a,
    .stuck-nav .pt-menu > li > a{
        font-size:12px !important;
        padding-left:7px !important;
        padding-right:7px !important;
        letter-spacing:.02em !important;
    }
}

/* Itens duplicados: "Pontos de Entrega" e "Contato" ja aparecem na barra do
   topo (.account-row-list), entao no desktop saem do menu principal e ficam
   so no off-canvas mobile. O menu.php marca esses <li> com .pt-menu-extra
   (.pt- e prefixo tecnico do design system, nao a marca). */
/* Sem media query de proposito: .stuck-nav e SEMPRE a barra horizontal. O off-canvas mobile e
   outro partial (#off-canvas-menu, mobile_menu.php), que ja lista Entrega e Contato. Com a regra
   presa a min-width:769px, entre ~700 e 768px esses dois itens apareciam soltos sobre o conteudo. */
.stuck-nav .mdp-shop-menu > li.pt-menu-extra,
.stuck-nav .pt-menu > li.pt-menu-extra{ display:none; }

/* --- Sticky menu (.stuck-nav.fixedbar): uma linha so --------------------
   Quando a barra gruda no topo o botao "Escritorio" (.mdp-stick-escritorio)
   fica sobreposto a direita; sem o padding-right ele cobria os ultimos
   itens do menu. Itens compactos + rolagem horizontal escondida garantem
   uma unica linha em vez da barra dobrar de altura. */
.stuck-nav.fixedbar .col-stuck-menu{ padding-left:24px; padding-right:150px; }
.stuck-nav.fixedbar .mdp-shop-menu,
.stuck-nav.fixedbar .pt-menu{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.stuck-nav.fixedbar .mdp-shop-menu::-webkit-scrollbar,
.stuck-nav.fixedbar .pt-menu::-webkit-scrollbar{ display:none; }
.stuck-nav.fixedbar .mdp-shop-menu > li > a,
.stuck-nav.fixedbar .pt-menu > li > a{
    font-size:12px !important;
    padding-top:14px !important;
    padding-bottom:14px !important;
    padding-left:8px !important;
    padding-right:8px !important;
}
.stuck-nav.fixedbar{ min-height:0 !important; }

/* --- Menu principal: cor da marca --------------------------------------- */
.stuck-nav .mdp-shop-menu > li > a,
.stuck-nav .pt-menu > li > a{
    color:var(--np-marrom);
    font-weight:500;
}
.stuck-nav .mdp-shop-menu > li > a:hover,
.stuck-nav .pt-menu > li > a:hover,
.stuck-nav .mdp-shop-menu > li.active > a,
.stuck-nav .pt-menu > li.active > a{ color:var(--np-ouro-escuro); }

/* --- Hero slider full-bleed ---------------------------------------------
   O tema do bxSlider (CDN) aplica borda branca de 5px + sombra + margem
   inferior no .bx-wrapper e borda no .bx-viewport: o banner aparecia com
   moldura e faixas brancas nas laterais em vez de ocupar o bloco inteiro. */
.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; }

/* --- Hero slider: tres campanhas com produtos reais ---------------------
   Texto em HTML para continuar nitido/acessivel e imagens do proprio
   catalogo. A composicao muda de lateral (desktop) para vertical (mobile). */
.np-hero-slider,
.np-hero-slider .slide,
.np-hero-slider .np-hero-card{
    width:100%;
}
#slider{ --np-hero-altura:clamp(430px, 38vw, 560px); }
#slider .bx-viewport{ height:var(--np-hero-altura) !important; }
.np-hero-slider .slide{ overflow:hidden; }
.np-hero-card{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(360px, .82fr);
    align-items:center;
    box-sizing:border-box;
    height:var(--np-hero-altura);
    min-height:var(--np-hero-altura);
    max-height:var(--np-hero-altura);
    padding:clamp(44px, 6vw, 92px) max(7vw, 48px);
    color:var(--np-marrom);
    isolation:isolate;
    overflow:hidden;
}
.np-hero-card,
.np-hero-card:hover,
.np-hero-card:focus,
.np-hero-card:active,
.np-hero-card:visited,
.np-hero-card *{
    text-decoration:none !important;
}
.np-hero-card:hover,
.np-hero-card:focus{ color:var(--np-marrom); }
.np-hero-card:focus-visible{
    outline:3px solid var(--np-ouro);
    outline-offset:-6px;
}
.np-hero-card::before,
.np-hero-card::after{
    content:"";
    position:absolute;
    z-index:-1;
    border-radius:50%;
    pointer-events:none;
}
.np-hero-card::before{
    width:42vw;
    height:42vw;
    right:-9vw;
    top:-25vw;
    border:1px solid rgba(56,41,35,.13);
}
.np-hero-card::after{
    width:26vw;
    height:26vw;
    left:38%;
    bottom:-22vw;
    background:rgba(255,255,255,.2);
}
.np-hero-slide--nutri .np-hero-card{
    background:
        radial-gradient(circle at 72% 52%, rgba(255,255,255,.88) 0 18%, transparent 49%),
        linear-gradient(112deg, #eef5ed 0%, #dcebdd 48%, #b7d1bf 100%);
}
.np-hero-slide--nano .np-hero-card{
    color:#fff;
    background:
        radial-gradient(circle at 74% 48%, rgba(105,111,181,.42) 0 8%, transparent 38%),
        linear-gradient(112deg, #12132d 0%, #202756 52%, #6570a8 100%);
}
.np-hero-slide--nano .np-hero-card:hover,
.np-hero-slide--nano .np-hero-card:focus{ color:#fff; }
.np-hero-slide--nano .np-hero-card::before{ border-color:rgba(255,255,255,.2); }
.np-hero-slide--nano .np-hero-card::after{ background:rgba(255,255,255,.06); }
.np-hero-slide--liso .np-hero-card{
    background:
        radial-gradient(circle at 76% 50%, rgba(255,255,255,.95) 0 18%, transparent 47%),
        linear-gradient(112deg, #f3e9f5 0%, #e0cfeb 50%, #b9acd2 100%);
}
.np-hero-copy{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    max-width:650px;
}
.np-hero-eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    margin-bottom:18px;
    padding:6px 12px;
    border:1px solid currentColor;
    border-radius:2px;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.8px;
    line-height:1.3;
}
.np-hero-title{
    display:block;
    max-width:620px;
    font-size:clamp(38px, 4.4vw, 68px);
    font-weight:400;
    letter-spacing:-2.2px;
    line-height:1.02;
}
.np-hero-title strong{
    color:var(--np-ouro-escuro);
    font-weight:700;
}
.np-hero-slide--nano .np-hero-title strong{ color:var(--np-ouro); }
.np-hero-description{
    display:block;
    max-width:570px;
    margin-top:22px;
    font-size:clamp(15px, 1.3vw, 18px);
    line-height:1.65;
}
.np-hero-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:48px;
    margin-top:28px;
    padding:12px 20px;
    border-radius:3px;
    background:var(--np-marrom);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.8px;
    transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.np-hero-slide--nano .np-hero-cta{
    background:var(--np-grad-ouro);
    color:var(--np-marrom);
}
.np-hero-cta svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:1.8;
}
.np-hero-card:hover .np-hero-cta,
.np-hero-card:focus .np-hero-cta{
    transform:translateX(4px);
    background:var(--np-marrom-escuro);
    box-shadow:0 10px 26px rgba(36,24,18,.2);
}
.np-hero-slide--nano .np-hero-card:hover .np-hero-cta,
.np-hero-slide--nano .np-hero-card:focus .np-hero-cta{
    background:var(--np-grad-ouro-hover);
}
.np-hero-visual{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:stretch;
    min-width:0;
}
.np-hero-halo{
    position:absolute;
    width:min(32vw, 470px);
    aspect-ratio:1;
    border:1px solid rgba(56,41,35,.2);
    border-radius:50%;
    box-shadow:inset 0 0 0 22px rgba(255,255,255,.14);
}
.np-hero-slide--nano .np-hero-halo{ border-color:rgba(255,255,255,.26); }
.np-hero-product{
    position:relative;
    display:block;
    width:min(34vw, 500px);
    height:min(34vw, 500px);
    object-fit:contain;
    filter:drop-shadow(0 24px 28px rgba(36,24,18,.22));
    transition:transform .45s cubic-bezier(.2,.75,.3,1);
}
.np-hero-slide--liso .np-hero-product{
    width:min(30vw, 430px);
    height:min(30vw, 430px);
}
.np-hero-card:hover .np-hero-product{ transform:translateY(-8px) scale(1.025); }
.np-hero-line-name{
    position:absolute;
    right:-18px;
    bottom:8%;
    color:currentColor;
    font-size:10px;
    font-weight:600;
    letter-spacing:2.4px;
    opacity:.68;
    text-transform:uppercase;
    transform:rotate(-90deg);
    transform-origin:right bottom;
}
@media (prefers-reduced-motion:reduce){
    .np-hero-cta,
    .np-hero-product{ transition:none; }
}

/* --- Carrossel de produtos: caixa de imagem uniforme --------------------
   style.css:10535 so define width:100% na imagem, entao a altura seguia a
   proporcao do arquivo: cards de alturas diferentes na mesma linha e o
   slick calculando alturas erradas. Caixa com proporcao fixa +
   object-fit:contain deixa todos iguais sem cortar o produto. */
.carousel-products .product__inside__image{
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1 / 1.03;
    overflow:hidden;
}
.carousel-products .product__inside__carousel,
.carousel-products .product__inside__carousel .carousel-inner,
.carousel-products .product__inside__carousel .item,
.carousel-products .product__inside__carousel .item > a{
    width:100%;
    height:100%;
}
.carousel-products .product__inside__image img,
.carousel-products .product__inside__carousel img{
    width:100% !important;
    height:100% !important;
    max-height:400px;
    max-width:100%;
    margin:0 auto;
    object-fit:contain;
}
.carousel-products .slick-slide{ height:auto; }
.carousel-products{ margin-bottom:0; }

/* =========================================================================
   RODAPE: faixa marrom escura da marca
   ========================================================================= */
footer.pt-footer{
    background:var(--np-marrom);
    color:var(--np-offwhite);
    padding-top:34px;
}
footer.pt-footer h4,
footer.pt-footer .mobile-collapse__title{ color:var(--np-offwhite); }
footer.pt-footer p,
footer.pt-footer li,
footer.pt-footer address,
footer.pt-footer .footer-copyright{ color:var(--np-offwhite); }
footer.pt-footer .v-links-list a,
footer.pt-footer .footer-copyright a,
footer.pt-footer address a{ color:var(--np-offwhite); }
footer.pt-footer .v-links-list a:hover,
footer.pt-footer .footer-copyright a:hover,
footer.pt-footer address a:hover{ color:var(--np-ouro); }
/* a linha do titulo do rodape (o .divider e so um espacador de 30px — nao pintar) */
footer.pt-footer .title-under:after{ border-color:var(--np-champagne); background-color:var(--np-champagne); }
footer.pt-footer .footer-copyright{ border-top:1px solid rgba(187,165,121,.28); padding-top:18px; }
/* selo redondo no rodape: chip off-white pra nao sumir sobre o marrom */
footer.pt-footer .pt-footer-logo{
    background:var(--np-offwhite);
    border:1px solid var(--np-champagne);
    border-radius:10px;
    padding:10px 14px;
    box-sizing:border-box;
    height:auto;
}

/* --- Rodape: contraste dentro dos cards de confianca --------------------
   Os cards tem fundo claro proprio; sem esta regra o texto herda a cor
   generica do rodape e some. Escopado em .mdp-footer-trust-content pra NAO
   repintar o icone dourado dentro do circulo marrom (.mdp-footer-trust-icon). */
.mdp-footer-trust-card .mdp-footer-trust-content p,
.mdp-footer-trust-card .mdp-footer-trust-content li,
.mdp-footer-trust-card .mdp-footer-trust-content a{ color:var(--np-marrom-claro); }
.mdp-footer-trust-card .mdp-footer-trust-content a:hover,
.mdp-footer-trust-card .mdp-footer-trust-content a:focus{ color:var(--np-ouro-escuro); }
.mdp-footer-trust-card .mdp-footer-trust-content .mdp-footer-trust-label{ color:var(--np-marrom); }
.mdp-footer-trust-card .mdp-contact-list .icon{ color:var(--np-marrom); }

/* =========================== MOBILE (<=768px) =========================== */
@media (max-width:768px){
    /* Header: botoes de acesso com a mesma altura visual do seletor de idioma. */
    #header .mdp-top-access{
        height:36px;
        align-items:center;
        gap:4px;
    }
    #header .mdp-top-entrar,
    #header .mdp-top-escritorio{
        height:36px;
        min-height:36px;
        padding-top:0;
        padding-bottom:0;
        align-items:center;
        justify-content:center;
        box-sizing:border-box;
    }

    /* O padding-right de 150px do sticky desktop encolhia o navbar (ficava
       com ~240px no iPhone XR). No mobile a barra volta a largura inteira e
       o atalho "Escritorio" flutua por cima. O style.css zera o fundo do
       .stuck-nav no mobile (background:none !important), entao a barra fixa
       ficava transparente sobre o conteudo — devolvemos o branco. */
    #header .stuck-nav.fixedbar{
        height:50px;
        background:#fff !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;
    }
    .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 media 196,8px dentro de cards de
       177px — o botao COMPRAR vazava do card. */
    #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;
        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;
    }

    /* Rodape mobile: os tres cards em coluna unica e mais compactos (a
       quebra em 2 colunas de <=991px deixava os selos espremidos). */
    .mdp-footer-trust{
        grid-template-columns:1fr;
        gap:10px;
        margin-top:24px;
    }
    .mdp-footer-contact{ grid-column:auto; }
    .mdp-footer-trust-card{
        align-items:flex-start;
        gap:14px;
        padding:18px;
    }
    .mdp-footer-trust-icon{
        width:44px;
        height:44px;
        flex-basis:44px;
    }
    /* e-mail longo estourava a largura do card (scroll lateral no rodape) */
    .mdp-contact-list a{ overflow-wrap:anywhere; }

    /* Selos (Mercado Pago / Cloudflare): rotulo+texto a esquerda, logo a
       direita, em vez de tres linhas empilhadas ocupando meia tela. */
    .mdp-footer-trust-card--subtle{
        flex-direction:row;
        align-items:center;
        justify-content:stretch;
        padding:17px 18px;
    }
    .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;
    }
    .mdp-footer-trust-card--subtle .mdp-footer-trust-label{
        grid-area:label;
        margin-bottom:3px;
    }
    .mdp-footer-trust-card--subtle p:first-of-type{
        grid-area:copy;
        margin:0;
    }
    .mdp-footer-security .mdp-footer-trust-content p:last-child{
        grid-area:logo;
        justify-content:flex-end;
        margin:0;
    }
    .mdp-footer-payment .mdp-footer-payment-logo{
        grid-area:logo;
        justify-content:flex-end;
        margin:0;
    }
    .mdp-footer-payment .mdp-footer-trust-content p{
        display:block;
        line-height:1.45;
    }
    .mdp-footer-payment-logo,
    .mdp-footer-security-logo{
        max-height:44px;
        margin:0;
    }
    .mdp-footer-payment-logo{
        width:128px;
        max-width:128px;
    }
    .mdp-footer-security-logo{
        width:138px;
        max-width:138px;
    }
}

/* ===== Tarja do consultor vinculado (emitida pelo header.php) =====
   Saiu de dentro da faixa do topo (brigava com os links). Cores da marca. */
.pt-loja-consultor{
    background:var(--np-offwhite);
    border-bottom:1px solid var(--np-champagne);
    text-align:center;
    padding:7px 12px;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--np-marrom-claro);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pt-loja-consultor strong{ color:var(--np-marrom); font-weight:600; }

/* ===== Faixa do topo (.pt-topbar): marrom escuro da marca =====
   Full-bleed: o wrapper nao pode depender da largura do .container */
#header .pt-topbar{ width:100%; background:var(--np-marrom); }
#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-8{ flex:1 1 auto; max-width:none; float:none; }
@media (max-width:1024px){
    #header .pt-topbar .row{ flex-wrap:wrap; }
}
/* alinhamento vertical do "Bem vindo!" com os links da faixa (o flex do wrapper
   expunha o padding-top de 16px que o tema aplica no .slogan e no .settings) */
#header .pt-topbar .col-sm-4{ flex:0 0 auto; }
#header .pt-topbar .slogan{ padding-top:0 !important; line-height:1.2; }
#header .pt-topbar .settings{ padding-top:0 !important; }
#header .pt-topbar .row{ min-height:56px; }

/* texto/links da faixa do topo em off-white, hover dourado */
#header .pt-topbar .slogan,
#header .pt-topbar .settings{ color:var(--np-offwhite); }
#header.header-layout-05 .pt-topbar .account-row-list ul li a{
    color:var(--np-offwhite);
    border-right-color:rgba(187,165,121,.45);
}
#header.header-layout-05 .pt-topbar .account-row-list ul li a:hover{ color:var(--np-ouro); }
#header .pt-topbar .account-row-list ul li:last-child a{ border-right:0; padding-right:0; }

/* ===== Correcoes de contraste pos-QA do rebrand ===== */
/* (bloco removido: o card TEM fundo gradiente claro — ver correcao abaixo) */

/* Mini-carrinho do header: dropdown escuro do tema -> conteudo claro */
#header .cart .dropdown-menu{ background:#382923 !important; }
#header .cart .dropdown-menu,
#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,
#header .cart .dropdown-menu .cart__item__info__title a{ color:#E9E6E2 !important; }
#header .cart .dropdown-menu .cart__item{ border-color:rgba(233,230,226,.14) !important; }

/* Eyebrow: ouro puro sobre branco reprova AA -> ouro escurecido para texto */
.mdp-eyebrow, .pt-eyebrow{ color:#8E6912 !important; }
.pt-section--dark .pt-eyebrow, footer.pt-footer .mdp-eyebrow{ color:#BBA579 !important; }
/* selo redondo pede mais presenca que o antigo logo horizontal */
.pt-logo, #header .logo, #header img.logo{ max-height:84px !important; }
@media (max-width:768px){ .pt-logo, #header .logo, #header img.logo{ max-height:58px !important; } }
/* logo horizontal (ratio ~3.7:1) pede altura menor que o selo */
.pt-logo, #header .logo, #header img.logo{ max-height:56px !important; }
@media (max-width:768px){ .pt-logo, #header .logo, #header img.logo{ max-height:54px !important; } }
footer.pt-footer .pt-footer-logo-link{
    display:inline-block;
    max-width:100%;
}
footer.pt-footer .pt-footer-logo{
    width:220px !important;
    max-width:100%;
    max-height:none;
    margin-bottom:20px;
}
@media (max-width:991px){
    footer.pt-footer .pt-footer-logo{ width:200px !important; margin-bottom:16px; }
}
@media (max-width:480px){
    footer.pt-footer .pt-footer-logo{
        width:180px !important;
        padding:8px 12px;
    }
}

/* CORRECAO: o card de contato do rodape tem fundo GRADIENTE claro (background-image,
   por isso backgroundColor computa transparente e a regra anterior o tratou como escuro).
   Sobre fundo claro o texto tem de ser marrom. */
footer.pt-footer .mdp-footer-trust-card .mdp-footer-trust-label{ color:#382923 !important; }
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:#4C4641 !important; }
footer.pt-footer .mdp-footer-trust-card a:hover{ color:#8E6912 !important; }
footer.pt-footer .mdp-footer-trust-card .icon{ color:#8E6912 !important; }
footer.pt-footer .mdp-footer-spi-mark,
footer.pt-footer .mdp-footer-spi-mark > span{ color:#1f4f7a !important; }

/* slider de faixa de preco (noUiSlider) — verde-agua do tema -> dourado da marca */
.noUi-origin.noUi-connect{ background:linear-gradient(90deg,#E4A824,#FCCC60) !important; }
.noUi-handle{ border-color:#BBA579 !important; }
.noUi-background{ background:#E4DED6 !important; }

/* ===== Respiro do header: logo estava com apenas 8px acima/abaixo ===== */
#header .logo, #header img.logo, .pt-logo{ margin:26px auto 20px !important; }
@media (max-width:768px){
    #header > .container > .row.text-center > a[href="/loja"]{
        display:flex;
        align-items:center;
        justify-content:center;
        width:calc(100% - 100px);
        min-height:92px;
    }
    #header .logo,
    #header img.logo,
    .pt-logo{
        max-width:100% !important;
        margin:14px auto 12px !important;
    }
}
/* barra do menu com um pouco mais de ar (sem virar bloco alto demais) */
.stuck-nav .pt-menu > li > a{ padding-top:15px !important; padding-bottom:15px !important; }
/* o tema aplica float:left no .logo -> no mobile ele escapava do link e colava na borda */
#header .logo, #header img.logo, .pt-logo{ float:none !important; }

/* Desktop: o lockup horizontal precisa de mais presenca no cabecalho.
   A margem menor compensa o ganho de 20px e evita inflar a faixa branca. */
@media (min-width:1025px){
    #header .logo,
    #header img.logo{
        max-height:76px !important;
        margin:18px auto 14px !important;
    }
}

@media (max-width:768px){
    #slider{ --np-hero-altura:570px; }
    .np-hero-card{
        grid-template-columns:1fr;
        grid-template-rows:auto minmax(205px, 1fr);
        padding:30px 26px 24px;
        text-align:center;
    }
    .np-hero-card::before{
        width:112vw;
        height:112vw;
        right:-50vw;
        top:42%;
    }
    .np-hero-card::after{
        width:80vw;
        height:80vw;
        left:-45vw;
        bottom:-52vw;
    }
    .np-hero-copy{
        align-items:center;
        max-width:100%;
    }
    .np-hero-eyebrow{
        min-height:26px;
        margin-bottom:12px;
        padding:5px 10px;
        font-size:9px;
        letter-spacing:1.45px;
    }
    .np-hero-title{
        max-width:330px;
        font-size:clamp(32px, 10.2vw, 43px);
        letter-spacing:-1.45px;
        line-height:1.02;
    }
    .np-hero-description{
        max-width:340px;
        margin-top:13px;
        font-size:13px;
        line-height:1.5;
    }
    .np-hero-cta{
        min-height:44px;
        margin-top:17px;
        padding:10px 17px;
        font-size:10px;
    }
    .np-hero-visual{
        align-self:end;
        min-height:215px;
        margin-top:8px;
    }
    .np-hero-halo{
        width:min(72vw, 300px);
        box-shadow:inset 0 0 0 15px rgba(255,255,255,.14);
    }
    .np-hero-product,
    .np-hero-slide--liso .np-hero-product{
        width:min(74vw, 305px);
        height:min(74vw, 305px);
    }
    .np-hero-slide--liso .np-hero-product{
        width:min(65vw, 270px);
        height:min(65vw, 270px);
    }
    .np-hero-line-name{ display:none; }
    #slider .bx-wrapper .bx-controls-direction a{
        width:44px;
        height:44px;
    }
}
@media (max-width:390px){
    .np-hero-card{
        padding:26px 20px 20px;
    }
    .np-hero-title{ font-size:35px; }
    .np-hero-description{ font-size:12px; }
    .np-hero-visual{ min-height:200px; }
}

/* ===== Faixa do topo: centralizacao vertical — SO DESKTOP =====
   (no mobile o tema usa outro arranjo: flex com space-between; aplicar
   height:100% ali empilhava logo/Entrar/Escritorio/carrinho) */
@media (min-width:1025px){
    /* ===== Faixa do topo: tudo centralizado verticalmente =====
       .settings era inline-block, entao os links (Entrar/Escritorio/SOBRE NOS...)
       ficavam grudados no topo da barra, com ~26px de vazio embaixo. */
    #header .pt-topbar .settings{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end;
        gap:10px;
        height:100%;
        padding:0 !important;
        float:none !important;
    }
    #header .pt-topbar .account-row-list{
        float:none !important; display:flex; align-items:center; margin:0;
    }
    #header .pt-topbar .account-row-list ul{ display:flex; align-items:center; margin:0; padding:0; }
    #header .pt-topbar .account-row-list li{ display:flex; align-items:center; float:none; }
    #header .pt-topbar .account-row-list li a{ line-height:1.2 !important; padding:0 12px; }
    #header .pt-topbar .mdp-top-access{ display:flex; align-items:center; }
    #header .pt-topbar .slogan{ line-height:1.2; display:flex; align-items:center; height:100%; }
    /* links da faixa nao podem quebrar em duas linhas */
    #header .pt-topbar .account-row-list li a,
    #header .pt-topbar .mdp-top-entrar,
    #header .pt-topbar .mdp-top-escritorio,
    #header .pt-topbar .slogan{ white-space:nowrap; }
    #header .pt-topbar .account-row-list ul{ flex-wrap:nowrap; }
    #header .pt-topbar .settings{ flex-wrap:nowrap; }
}

/* =====================================================================
   SELETOR DE IDIOMA (i18n) — _partials/seletor_idioma.php
   Rota: /loja/idioma/{pt|es|en}. Ver 16-i18n.md.
   Discreto: fica na faixa do topo (fundo marrom) e tambem funciona sobre
   fundo claro (sticky nav / rodape) via .np-idioma--claro.
   ===================================================================== */
.np-idioma{
    display:inline-flex;
    align-items:center;
    gap:2px;
    vertical-align:middle;
    padding:2px;
    border:1px solid rgba(187,165,121,.45);   /* champagne translucido */
    border-radius:999px;
    background:rgba(0,0,0,.12);
    line-height:1;
    white-space:nowrap;
}
/* globinho discreto antes das siglas (CSS puro, sem depender de icon font) */
.np-idioma-ico{
    width:13px; height:13px;
    margin:0 3px 0 6px;
    border-radius:50%;
    border:1.2px solid var(--np-champagne);
    position:relative;
    flex:0 0 auto;
    opacity:.85;
}
.np-idioma-ico::before,
.np-idioma-ico::after{
    content:"";
    position:absolute;
    border:1.2px solid var(--np-champagne);
}
.np-idioma-ico::before{ /* meridiano */
    inset:-1.2px 25%;
    border-radius:50%;
    border-top:0; border-bottom:0;
}
.np-idioma-ico::after{  /* equador */
    left:-1.2px; right:-1.2px; top:50%;
    margin-top:-.6px;
    border-width:0 0 1.2px 0;
}
.np-idioma-op{
    display:inline-block;
    padding:4px 9px;
    border-radius:999px;
    font-family:'Poppins', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--np-offwhite);
    text-decoration:none !important;
    transition:background-color .18s ease, color .18s ease;
}
.np-idioma-op:hover,
.np-idioma-op:focus{
    color:var(--np-ouro) !important;
    background:rgba(228,168,36,.14);
    text-decoration:none !important;
}
.np-idioma-op.is-ativo{
    background-image:var(--np-grad-ouro);
    color:var(--np-marrom) !important;
    box-shadow:0 1px 2px rgba(0,0,0,.18);
    cursor:default;
}
.np-idioma-op.is-ativo:hover{
    background-image:var(--np-grad-ouro);
    color:var(--np-marrom) !important;
}
.np-idioma-op:focus-visible{
    outline:2px solid var(--np-ouro);
    outline-offset:2px;
}

/* --- variante sobre fundo CLARO (sticky nav branca, rodape claro) --- */
.np-idioma--claro{
    background:rgba(56,41,35,.04);
    border-color:var(--np-linha);
}
.np-idioma--claro .np-idioma-op{ color:var(--np-marrom-claro); }
.np-idioma--claro .np-idioma-op:hover,
.np-idioma--claro .np-idioma-op:focus{ color:var(--np-marrom) !important; }
.np-idioma--claro .np-idioma-op.is-ativo{ color:var(--np-marrom) !important; }

/* --- variante compacta (mobile / sticky) --- */
.np-idioma--compacto .np-idioma-ico{ display:none; }
.np-idioma--compacto .np-idioma-op{ padding:3px 7px; font-size:10px; }

/* na faixa do topo: alinha com os demais links da .settings */
#header .pt-topbar .np-idioma{ margin-left:10px; }
@media (max-width:1024px){
    #header .pt-topbar .np-idioma{ margin:6px 0 0; }
}
@media (max-width:480px){
    .np-idioma .np-idioma-ico{ display:none; }
    .np-idioma .np-idioma-op{ padding:0 5px; font-size:10px; }
}

/* Seletor de idioma: bandeiras (o componente passou a emitir <img>+<span>).
   Com bandeira, o globinho vira redundante -> escondido. */
.np-idioma-flag{
    display:block; width:20px; height:14px;
    border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.18);
    flex:0 0 auto;
}
.np-idioma-sigla{ line-height:1; }
.np-idioma-op{ display:inline-flex; align-items:center; gap:6px; }
.np-idioma:has(.np-idioma-flag) .np-idioma-ico{ display:none; }
/* fallback p/ navegadores sem :has() — o globo fica menor e discreto */
.np-idioma-ico{ opacity:.65; }

@media (max-width:768px){
    #header .pt-topbar .settings{ gap:4px; }
    #header .pt-topbar .np-idioma{
        height:36px;
        margin:0 !important;
        padding:3px;
        box-sizing:border-box;
    }
    #header .pt-topbar .np-idioma-op{
        height:28px;
        box-sizing:border-box;
        justify-content:center;
    }
}

/* ============================================================
   MENU POR FAMILIA (6 no topo, linhas em dropdown)
   Antes eram 31 categorias planas ocupando 5 linhas de menu.
   Dropdown proprio em vez do megamenu do tema: a estrutura do
   megamenu depende de markup que este menu nao tem.
   ============================================================ */
.pt-menu .pt-fam { position: relative; }

/* seta so quando a familia tem linhas */
.pt-menu .pt-fam--tem-linhas > a .act-underline::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: .65;
}

.pt-menu .pt-fam-linhas {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

@media (min-width: 1025px) {
    .pt-menu .pt-fam-linhas {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
        min-width: 232px;
        background: #fff;
        border: 1px solid rgba(56, 41, 35, .10);
        border-radius: 10px;
        box-shadow: 0 12px 30px rgba(40, 28, 22, .16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
    }
    /* :focus-within mantem aberto para navegacao por teclado */
    .pt-menu .pt-fam:hover > .pt-fam-linhas,
    .pt-menu .pt-fam:focus-within > .pt-fam-linhas {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    /* familia perto da borda direita abre para dentro */
    .pt-menu .pt-fam:nth-last-child(-n+3) .pt-fam-linhas { left: auto; right: 0; }

    .pt-menu .pt-fam-linhas > li > a {
        display: block;
        padding: 9px 16px;
        font-size: 13px;
        line-height: 1.35;
        /* o menu do tema centraliza e clareia o link; dentro do dropdown isso vira lista ilegivel */
        text-align: left;
        color: #3A2C25;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
    }
    .pt-menu .pt-fam-linhas > li > a:hover {
        background: rgba(228, 168, 36, .12);
        color: #382923;
    }
}

/* no off-canvas mobile o dropdown nao flutua: fica recuado abaixo da familia */
@media (max-width: 1024px) {
    .pt-menu .pt-fam-linhas > li > a {
        display: block;
        padding: 7px 0 7px 18px;
        font-size: 13px;
        opacity: .82;
        text-transform: none;
    }
}

/* ============================================================
   RODAPE MOBILE: divisorias discretas
   O tema usa .mobile-collapse (acordeao do rodape) com borda
   #e5e5e5 — cinza quase branco, pensado para rodape claro. Sobre
   o marrom da marca vira um risco luminoso atravessando a tela.
   Duas correcoes:
     1. o bloco da marca (.pt-footer-brand) NAO e menu sanfonado —
        e logo + texto de missao. Nao deve ter borda nenhuma, e era
        ela que aparecia como "linha branca em cima do logo".
     2. as divisorias que sobram viram champanhe translucido.
   ============================================================ */
@media (max-width: 991px) {
    footer.pt-footer .mobile-collapse,
    footer.pt-footer .mobile-collapse--last {
        border-top-color: rgba(187, 165, 121, .16);
        border-bottom-color: rgba(187, 165, 121, .16);
    }
    /* bloco da marca: sem divisoria */
    footer.pt-footer .pt-footer-brand,
    footer.pt-footer .mobile-collapse.pt-footer-brand {
        border-top: 0;
        border-bottom: 0;
    }
}

/* O selo do rodape ganhava borda champanhe por ser chip claro sobre marrom. Com o fundo
   off-white ele ja se destaca sozinho; a borda so somava mais um risco na regiao. */
footer.pt-footer .pt-footer-logo{ border-color:transparent; }

/* ============================================================
   PAGAMENTO POR ALIAS + COMPROVANTE (loja/pedido/detalhe)
   Substitui o botao do Mercado Pago, que nao opera no Paraguai.
   ============================================================ */
.pt-pagamento-alias{ text-align:left; }
.pt-pagamento-titulo{ margin:0 0 12px; font-weight:700; letter-spacing:.02em; }
.pt-pagamento-passos{ margin:0 0 18px; padding-left:20px; line-height:1.7; }
.pt-pagamento-passos li{ margin-bottom:2px; }

.pt-alias-box{
    display:flex; flex-direction:column; gap:4px;
    background:rgba(228,168,36,.10);
    border:1px solid rgba(187,165,121,.42);
    border-radius:12px; padding:16px 18px; margin-bottom:18px;
}
.pt-alias-rotulo{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.pt-alias-valor{ font-size:22px; line-height:1.2; word-break:break-all; }
.pt-alias-titular{ font-size:13px; opacity:.85; }
.pt-alias-total{ margin-top:6px; font-size:14px; }

.pt-comprovante-ok{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    background:rgba(40,140,80,.10); border:1px solid rgba(40,140,80,.32);
    border-radius:10px; padding:12px 14px; margin-bottom:10px; font-size:14px;
}
.pt-comprovante-ok .fa{ color:#2e8b57; }
.pt-comprovante-troca{ font-size:13px; opacity:.75; margin-bottom:10px; }

.pt-comprovante-form{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.pt-comprovante-label{ display:flex; flex-direction:column; font-weight:600; margin:0; }
.pt-comprovante-label small{ font-weight:400; opacity:.7; }
.pt-comprovante-form input[type="file"]{ max-width:100%; }

@media (max-width:600px){
    .pt-comprovante-form{ flex-direction:column; align-items:stretch; }
    .pt-comprovante-enviar{ width:100%; }
    .pt-alias-valor{ font-size:19px; }
}

/* Aviso de envio no carrinho quando a operacao nao calcula frete (CALCULA_FRETE=false) */
.pt-envio-aviso{
    display:grid !important;
    grid-template-columns:48px minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    width:100%;
    padding:16px 18px !important;
    background:linear-gradient(135deg,#FBF8F2 0%,#F4ECDE 100%);
    border:1px solid rgba(187,165,121,.48);
    border-left:4px solid var(--np-ouro);
    border-radius:12px;
    box-shadow:0 8px 22px rgba(56,41,35,.07);
    color:var(--np-marrom);
    text-align:left !important;
    text-transform:none !important;
    box-sizing:border-box;
}
.pt-envio-aviso__icone{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--np-marrom);
    color:var(--np-ouro);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.pt-envio-aviso__icone svg{ width:24px; height:24px; fill:currentColor; }
.pt-envio-aviso__conteudo{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:3px;
    line-height:1.35;
}
.pt-envio-aviso__conteudo strong{
    color:var(--np-marrom);
    font-size:14px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.pt-envio-aviso__conteudo > span{
    color:var(--np-marrom-claro);
    font-size:13px;
    font-weight:400;
}
.pt-envio-aviso__selo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:6px 10px;
    border:1px solid rgba(142,105,18,.32);
    border-radius:999px;
    background:rgba(228,168,36,.14);
    color:#72530C;
    font-size:10px;
    font-weight:700;
    letter-spacing:.045em;
    line-height:1.2;
    text-align:center;
    text-transform:uppercase;
    white-space:nowrap;
}
@media (max-width:680px){
    .pt-envio-aviso{
        grid-template-columns:42px minmax(0,1fr);
        gap:12px;
        padding:14px !important;
    }
    .pt-envio-aviso__icone{ width:42px; height:42px; }
    .pt-envio-aviso__icone svg{ width:21px; height:21px; }
    .pt-envio-aviso__selo{
        grid-column:2;
        justify-self:start;
        white-space:normal;
    }
}

/* Alias ainda nao informado: o bloco vira canal de atendimento em vez de campo vazio */
.pt-alias-box--contato{ background:rgba(187,165,121,.10); }
.pt-alias-canais{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.pt-alias-canais .btn{ display:inline-flex; align-items:center; gap:8px; }
@media (max-width:600px){
    .pt-alias-canais{ flex-direction:column; }
    .pt-alias-canais .btn{ width:100%; justify-content:center; }
}

/* ================================================= fundos fantasma ===== */
/* O style.css do tema aponta 4 imagens de fundo que NUNCA existiram no repo
   (back-breadcrumbs.png, content-bg-1.jpg, parallax-img-01.jpg,
   slider-fluid-bg1.jpg). Em produção o nginx redireciona imagem 404 para o
   placeholder cinza (placehold.co) e o fundo vira um QUADRADO CINZA — era a
   "faixa" atrás dos breadcrumbs na página de produto. Mata os 4 de uma vez. */
.breadcrumbs{ background-image:none !important; }
.content-bg-1{ background-image:none !important; }
.content--parallax{ background-image:none !important; }
.slider-fluid-bg1{ background-image:none !important; }

/* ============================================= alias: botao copiar ===== */
.pt-alias-copy{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pt-alias-copy--total{ margin-top:6px; }
.pt-alias-copiar{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--np-grad-ouro); color:var(--np-marrom) !important;
    border:0; border-radius:9px; padding:9px 18px; font-weight:700; font-size:13px;
    cursor:pointer; transition:opacity .15s;
}
.pt-alias-copiar:hover{ opacity:.88; }
.pt-alias-copiar--mini{ padding:5px 12px; font-size:12px; }
.pt-alias-pendente{ font-size:14px; opacity:.85; }
@media (max-width:600px){
    .pt-alias-copy{ flex-direction:column; align-items:stretch; text-align:center; }
    .pt-alias-copiar{ justify-content:center; width:100%; }
    .pt-alias-copy--total{ flex-direction:row; align-items:center; justify-content:space-between; text-align:left; }
    .pt-alias-copiar--mini{ width:auto; }
}

/* comprovante: respiro entre o formulario e a tabela de itens (desktop
   ficava com o botao "Enviar comprovante" grudado na tabela) */
.pt-comprovante-form{ margin:10px 0 28px; }
.pt-pagamento-alias{ padding-bottom:10px; }

/* ================================== comprovante: card de destaque ===== */
.pt-comprovante-card{
    display:flex; flex-direction:column; gap:8px;
    border:2px dashed var(--np-ouro-escuro,#E4A824);
    background:rgba(228,168,36,.07);
    border-radius:14px; padding:20px 22px; margin:14px 0 26px;
}
.pt-comprovante-titulo{ font-weight:700; font-size:16px; color:var(--np-marrom,#382923); }
.pt-comprovante-titulo .fa{ color:var(--np-ouro-escuro,#E4A824); margin-right:4px; }
.pt-comprovante-sub{ font-size:12.5px; color:var(--np-texto-suave,#6B635B); }
.pt-comprovante-linha{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px; }
.pt-comprovante-linha input[type="file"]{ flex:1 1 240px; min-width:0; }
.pt-comprovante-enviar{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--np-grad-ouro); color:var(--np-marrom) !important;
    border:0; border-radius:9px; padding:12px 26px; font-weight:700; font-size:14px;
    cursor:pointer; transition:opacity .15s; white-space:nowrap;
}
.pt-comprovante-enviar:hover{ opacity:.88; }
@media (max-width:600px){
    .pt-comprovante-card{ padding:16px 14px; }
    .pt-comprovante-linha{ flex-direction:column; align-items:stretch; }
    .pt-comprovante-enviar{ justify-content:center; width:100%; }
}

/* ======================================= menu do usuário (topo loja) ===== */
/* O dropdown de conta do tema vinha esmaecido (texto herdando cor do topo
   escuro), full-width no desktop e com o item "Close" fantasma. Vira um card
   branco compacto alinhado à direita; no mobile continua painel cheio. */
.account .dropdown-menu{
    background:var(--np-branco,#fff) !important;
    border:1px solid var(--np-linha,#DFD7C8);
    border-radius:12px;
    box-shadow:0 14px 34px rgba(56,41,35,.16);
    padding:8px 0;
    min-width:250px;
}
.account .dropdown-menu li a{
    display:flex; align-items:center; gap:12px;
    padding:11px 18px;
    color:var(--np-marrom,#382923) !important;
    font-weight:600; font-size:14px; letter-spacing:0;
    opacity:1 !important; text-transform:none;
}
.account .dropdown-menu li a .icon{
    color:var(--np-ouro-escuro,#E4A824) !important;
    font-size:17px; width:20px; text-align:center;
    opacity:1 !important;
}
.account .dropdown-menu li a:hover{
    background:var(--np-offwhite,#E9E6E2);
    color:var(--np-marrom-escuro,#241812) !important;
}
.account .dropdown-menu li + li{ border-top:1px solid rgba(223,215,200,.5); }
/* o "Close" do tema é controle do painel mobile — some no desktop */
@media (min-width:768px){
    .account .dropdown-menu{ left:auto; right:0; width:280px !important; min-width:280px; }
    .account .dropdown-menu .dropdown-menu__close{ display:none; }
}
@media (max-width:767px){
    .account .dropdown-menu{ border-radius:0 0 12px 12px; }
    .account .dropdown-menu .dropdown-menu__close a{ justify-content:center; color:var(--np-texto-suave,#6B635B) !important; }
}

/* ==================================== painéis x_panel viram cards NP ===== */
/* As telas de pedido (detalhe, listagem) usavam .x_panel cru do template:
   tabelas quadradas com cabeçalho cinza e texto navy. Agora seguem o padrão
   dos cards da marca (mesma linguagem do card do alias/comprovante). */
#pageContent .x_panel{
    background:var(--np-branco,#fff);
    border:1px solid var(--np-linha,#DFD7C8);
    border-radius:14px;
    padding:10px 14px;
    margin-bottom:18px;
    overflow:hidden;
}
#pageContent .x_panel .table{ margin-bottom:6px; }
#pageContent .x_panel .table th{
    background:var(--np-offwhite,#E9E6E2);
    color:var(--np-marrom,#382923);
    border:0; border-radius:8px;
    font-weight:700; letter-spacing:.02em;
    padding:12px 14px;
}
#pageContent .x_panel .table td{
    border-color:rgba(223,215,200,.55);
    color:var(--np-marrom,#382923);
    padding:12px 14px; vertical-align:middle;
}
#pageContent .x_panel .table tr:first-child td{ border-top:0; }
.pt-entrega-destaque{ color:var(--np-ouro-escuro,#B9821A) !important; font-weight:600; }
@media (max-width:600px){
    #pageContent .x_panel{ padding:8px 8px; }
    #pageContent .x_panel .table th, #pageContent .x_panel .table td{ padding:10px 8px; }
}

/* ================== auditoria 29/jul: alinhamento geral ao padrao NP ===== */
/* Carrinho: tabela, botao remover, card de totais e input de cupom */
/* header da tabela: UMA barra contínua — radius só nos cantos externos
   (radius por célula + border-spacing padrão virava "chips" soltos) */
.shopping-cart-table{ border-collapse:separate; border-spacing:0; }
.shopping-cart-table th{ background:var(--np-offwhite,#E9E6E2); color:var(--np-marrom,#382923); font-weight:700; border:0; border-radius:0; padding:12px 10px; }
.shopping-cart-table th:first-child{ border-radius:10px 0 0 10px; }
.shopping-cart-table th:last-child{ border-radius:0 10px 10px 0; }
.shopping-cart-table tr, .shopping-cart-table td{ border-color:var(--np-linha,#DFD7C8); }
.btn-remover-item{ background:var(--np-marrom,#382923) !important; color:#fff !important; border-radius:8px; }
.btn-remover-item:hover{ background:var(--np-marrom-escuro,#241812) !important; }
#pageContent .card--padding{ background:#fff; border:1px solid var(--np-linha,#DFD7C8); border-radius:14px; }
.table-total th{ color:var(--np-marrom,#382923); }
.input_cep{ font-family:'Poppins',sans-serif; color:var(--np-marrom,#382923); border:1px solid var(--np-linha,#DFD7C8); border-radius:9px; height:44px; padding:0 12px; }
.input_cep:focus{ outline:0; border-color:var(--np-champagne,#BBA579); box-shadow:0 0 0 3px rgba(228,168,36,.28); }
.cart-row-product{ border-bottom-color:var(--np-linha,#DFD7C8) !important; }

/* Cards de produto: selos e precos na paleta */
.product__label--new, .product__label--sale{ background-color:var(--np-champagne,#BBA579) !important; color:var(--np-marrom,#382923) !important; }
.price-box{ color:var(--np-marrom,#382923); }
.price-box__old{ color:var(--np-champagne,#BBA579); }
.price-box__new{ color:var(--np-marrom,#382923); font-weight:600; }

/* Abas do produto e input de quantidade */
.nav-tabs{ border-bottom-color:var(--np-linha,#DFD7C8); }
.nav-tabs--ys > li.active > a{ color:var(--np-marrom,#382923); }
.nav-tabs--ys > li.active > a:before{ background-color:var(--np-ouro-escuro,#E4A824); }
.product-info .input-counter input{ border:1px solid var(--np-linha,#DFD7C8); border-radius:9px; color:var(--np-marrom,#382923); }
.product-info .input-counter input:focus{ outline:0; border-color:var(--np-champagne,#BBA579); box-shadow:0 0 0 3px rgba(228,168,36,.28); }

/* Busca/categorias: paginacao, filtros e campos */
.pagination > li > a, .pagination > li > span{ background:#fff; border:1px solid var(--np-linha,#DFD7C8); color:var(--np-marrom,#382923); border-radius:9px; margin:0 3px; }
.pagination > li > a:hover{ border-color:var(--np-champagne,#BBA579); color:var(--np-marrom,#382923); }
.pagination > .active > a, .pagination > .active > span{ background:var(--np-grad-ouro); border-color:var(--np-ouro-escuro,#E4A824); color:var(--np-marrom,#382923); }
.select--ys, .input--ys, .price-input input[type=text]{ border:1px solid var(--np-linha,#DFD7C8); border-radius:9px; color:var(--np-marrom,#382923); }
.select--ys:focus, .input--ys:focus, .price-input input[type=text]:focus{ outline:0; border-color:var(--np-champagne,#BBA579); box-shadow:0 0 0 3px rgba(228,168,36,.28); }
.filters-row{ border-top-color:var(--np-linha,#DFD7C8); }
.filters-row__view{ color:var(--np-texto-suave,#6B635B); }
.filters-row__view.active{ color:var(--np-ouro-escuro,#E4A824); }

/* Conta: card de login, inputs globais e avisos */
.login-form-box{ background:var(--np-branco,#fff); border:1px solid var(--np-linha,#DFD7C8); border-radius:14px; padding:28px 32px; min-height:0; }
.login-form-box .note{ color:var(--np-texto-suave,#6B635B); }
#pageContent .form-control{ border:1px solid var(--np-linha,#DFD7C8); border-radius:9px; box-shadow:none; }
#pageContent .form-control:focus{ border-color:var(--np-champagne,#BBA579); box-shadow:0 0 0 3px rgba(228,168,36,.28); outline:0; }
.np-help{ color:var(--np-texto-suave,#6B635B); font-size:13px; }
.alert-danger{ background:#fdecea !important; border:1px solid #f5c6cb !important; color:#a94442 !important; border-radius:10px; }
.alert-success{ background:#e8f5ec !important; border:1px solid #bfe3cb !important; color:#2e7d4f !important; border-radius:10px; }

/* Avisos de status do pedido (substituem .alerta-pedido do tema) */
.pt-aviso-pedido{ border:1px solid var(--np-linha,#DFD7C8); border-radius:12px; padding:16px 18px; margin-bottom:18px; color:var(--np-marrom,#382923); background:var(--np-branco,#fff); }
.pt-aviso-pedido--ok{ background:#e8f5ec; border-color:#bfe3cb; }
.pt-aviso-pedido--info{ background:rgba(228,168,36,.08); border-color:var(--np-ouro-escuro,#E4A824); }
/* o .closebtn do tema é branco (era visível no fundo azul antigo) — nos avisos claros precisa ser escuro */
.pt-aviso-pedido .closebtn{ color:var(--np-marrom,#382923); }

/* Pontos de entrega */
.pdd-item{ border:1px solid var(--np-linha,#DFD7C8); border-radius:12px; padding:16px 18px; margin-bottom:12px; background:var(--np-branco,#fff); }

/* Compartilhamento (.mdp-share) — nasceu inline no produto.php; movido para cá
   porque o modal quick-view usa o mesmo bloco em telas que não carregam aquele
   <style> (home, categoria, busca). */
.mdp-share{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 20px; }
.mdp-share-btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:8px;
    color:#fff !important; font-size:13px; font-weight:600; text-decoration:none; line-height:1; transition:opacity .12s; }
.mdp-share-btn:hover{ opacity:.88; color:#fff !important; }
.mdp-share-btn.wpp{ background:#25d366; }
.mdp-share-btn.fb { background:#1877f2; }
.mdp-share-btn.tg { background:#0088cc; }
.mdp-share-btn.x  { background:#111; }
.mdp-share-btn.em { background:#4C4641; }

/* Dados de recebimento (banco/conta/titular/documento) — uma linha por dado,
   rótulo pequeno em cima e valor destacado embaixo. */
.pt-dado{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.pt-dado:last-of-type{ margin-bottom:4px; }
.pt-dado-valor{ font-size:15px; line-height:1.3; word-break:break-word; }