/* medplant-brand.css — identidade visual da loja (paleta do LOGO MdPlant)
 * Carregado DEPOIS de style.css (já recolorido p/ o verde-escuro #03421f).
 * Paleta extraída do próprio logo:
 *   - "Plant" + folha  -> verde-escuro #03421f  (primária: CTAs, títulos, preço)
 *   - "Md"             -> verde-claro  #9cc33b  (secundária: acentos, hover, selos)
 */
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;600;700&display=swap');

:root{
    --md-green-dark:  #03421f;  /* primária */
    --md-green:       #9cc33b;  /* secundária / acento */
    --md-green-darker:#003611;  /* hover/realce escuro */
    --md-soft:         #f4f8ef;
    --md-line:         #e2ead8;
    --md-ink:          #1f2f27;
}

/* ---- Tipografia: corpo em Hind ---- */
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:'Hind', 'Ubuntu', sans-serif;
}

/* ---- Tipografia: títulos e menu em Oswald ---- */
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{
    font-family:'Oswald', 'Ubuntu', sans-serif;
    letter-spacing:.3px;
}

/* ---- CTAs: fundo verde-escuro, hover vira verde-claro do logo ---- */
.btn--ys, .btn-primary, .btn-AddCart, .btn-addtocart{
    background-color:var(--md-green-dark) !important;
    border-color:var(--md-green-dark) !important;
    color:#fff !important;
}
.btn--ys:hover, .btn-primary:hover, .btn-AddCart:hover, .btn-addtocart:hover{
    background-color:var(--md-green) !important;
    border-color:var(--md-green) !important;
    color:var(--md-green-dark) !important;
}

/* ---- Links e preço ---- */
a:hover{ color:var(--md-green-dark); }
.tt-price .new-price, .new-price{ color:var(--md-green-dark); font-weight:600; }

/* ---- Acentos em verde-claro (logo "Md"): selos, barras, destaques ---- */
.tt-label-new, .tt-label-sale,
.product-labels .new, .product-labels .sale,
.tt-promo-fixed, .tt-badge{
    background-color:var(--md-green) !important;
    color:var(--md-green-dark) !important;
}
/* divisórias/realces secundários */
.tt-price-old, .breadcrumb .active{ color:var(--md-green); }

.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(--md-line);
    border-radius:8px;
    background:linear-gradient(135deg, #ffffff 0%, #f6faef 100%);
    box-shadow:0 12px 28px rgba(3, 66, 31, .07);
}

.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(--md-green-dark);
    color:#fff;
    font-size:23px;
}

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

.mdp-footer-trust-label{
    display:block;
    margin-bottom:8px;
    color:var(--md-green-dark);
    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-security-logo{
    display:block;
    width:170px;
    max-width:100%;
    margin:0 0 10px;
}

.mdp-footer-trust-card p{
    margin:0 0 12px;
    color:#526058;
    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(3, 66, 31, .12);
    color:var(--md-ink);
    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:#526058;
    font-size:14px;
    line-height:1.35;
}

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

.mdp-contact-list .icon{
    color:var(--md-green-dark);
    font-size:16px;
}

.mdp-contact-list a{
    color:#526058;
}

.mdp-contact-list a:hover{
    color:var(--md-green-dark);
}

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

.mdp-footer-trust-card--subtle p{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin:0;
    color:#6d766f;
    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(--md-line);
    border-radius:8px;
    background:#fff;
    box-shadow:0 10px 22px rgba(3, 66, 31, .06);
}

.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(--md-soft);
    color:var(--md-green-dark);
    font-size:22px;
}

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

.mdp-benefit small{
    display:block;
    margin-top:4px;
    color:#6d766f;
    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, #f7fbf1 0%, #ffffff 52%, #eef6e5 100%);
    border:1px solid var(--md-line);
}

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

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

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

.mdp-brand-copy p{
    max-width:520px;
    margin:0;
    color:#4d5b52;
    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(--md-green-dark);
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:4px;
}

.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:8px;
    box-shadow:0 18px 38px rgba(3, 66, 31, .16);
}

.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(--md-line);
    border-radius:8px;
    background:
        radial-gradient(circle at 88% 12%, rgba(156, 195, 59, .18), transparent 31%),
        linear-gradient(135deg, #ffffff 0%, #f7fbf1 100%);
    box-shadow:0 18px 42px rgba(3, 66, 31, .08);
}

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

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

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

.mdp-why-copy p{
    max-width:760px;
    margin:0 0 22px;
    color:#4d5b52;
    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:#edf5e4;
}

.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(3, 66, 31, .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 rgba(3, 66, 31, .12);
}

.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(--md-green-dark);
    box-shadow:0 8px 18px rgba(3, 66, 31, .08);
    font-size:21px;
}

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

.mdp-why-point small{
    display:block;
    margin-top:5px;
    color:#667269;
    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:24px;
    }

    .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: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(--md-green-dark); font-size:13px; font-weight:600; text-decoration:none; }
.mdp-top-entrar:hover{ color:var(--md-green); }
.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:var(--md-green-dark); color:#fff !important; font-size:12.5px; font-weight:700; text-decoration:none; border:1px solid var(--md-green-dark); line-height:1; transition:background .15s,color .15s,border-color .15s; }
.mdp-top-escritorio:hover{ background:var(--md-green); border-color:var(--md-green); color:var(--md-green-dark) !important; }
.mdp-top-escritorio .icon{ font-size:14px; }

/* desktop (>1024px): faixa verde-escura — "Entrar" branco e "Escritório" como pill
   verde-claro que destaca (igual ao mobile). NÃO afeta o mobile (media query própria abaixo). */
@media (min-width:1025px){
    /* respiro entre o acesso (Entrar/Escritório) e o menu (SOBRE NÓS…), 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(--md-green); }
    .mdp-top-escritorio{
        background:var(--md-green); border-color:var(--md-green);
        color:var(--md-green-dark) !important;
        padding:6px 16px; font-size:12.5px;
    }
    .mdp-top-escritorio:hover{ background:#fff; border-color:#fff; color:var(--md-green-dark) !important; }
}

/* Botao Escritorio na barra sticky (stuck-nav verde) */
.stuck-nav{ position:relative; }
/* escondido por padrao; so aparece quando a barra fica fixa ao rolar (.fixedbar) */
.mdp-stick-escritorio{ display:none; align-items:center; gap:6px; position:absolute; top:50%; transform:translateY(-50%); right:58px; z-index:10050; background:var(--md-green); color:var(--md-green-dark) !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:#fff; color:var(--md-green-dark) !important; }
.mdp-stick-escritorio .icon{ font-size:14px; }

/* mobile: barra verde-escura (#03421f) — "Entrar" a esquerda, "Escritorio" no canto sup. direito;
   icone de usuario (account) escondido p/ visitante (substituido pelo botao) */
@media (max-width:1024px){
    /* barra verde 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 (pill translucido) */
    .mdp-top-entrar{ display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.55); color:#fff !important; padding:5px 11px; border-radius:16px; font-size:12px; font-weight:600; }
    .mdp-top-entrar:hover{ background:rgba(255,255,255,.30); color:#fff !important; }
    /* "Escritorio" inline (sem absoluto), pill verde-claro */
    .mdp-top-escritorio{ position:static; background:var(--md-green); border-color:var(--md-green); color:var(--md-green-dark) !important; 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 MedPlant" 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:#5a6b5a;
    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:#6a766f;
}