/* ==========================================================================
   Peixoto Mais — identidade visual
   Laranja #FF5D00 (primária) · Verde #B0D235 (apoio)
   Header/Footer: fundo BRANCO com fonte escura (substitui o azul do demo)
   ========================================================================== */

/* ---------- TOP BAR: laranja (igual ao site atual) ---------- */
.page-header { background: #f2f2f2 !important; color: #282828 !important; }
.panel.wrapper,
.header.panel,
.cdz-header-top,
.header-top-container,
.hd-top,
.header-top,
.header-account-panel {
    background-color: #FF5D00 !important;
}
.panel.wrapper, .panel.wrapper a, .panel.wrapper .i-text, .panel.wrapper .greet,
.header.panel, .header.panel a, .header.panel .i-text,
.cdz-header-top, .cdz-header-top a,
.header-top-container, .header-top-container a,
.hd-top, .hd-top a, .header-top, .header-top a {
    color: #ffffff !important;
}
.panel.wrapper a:hover, .header.panel a:hover,
.cdz-header-top a:hover, .header-top-container a:hover, .hd-top a:hover { color: #ffe4d3 !important; }

/* ---------- MIOLO (logo + busca): claro, texto escuro (era azul #526AFF do demo) ---------- */
.header.content,
.header-main {
    background: #f2f2f2 !important;
    color: #333333 !important;
}
/* miolo tem .panel.wrapper como ancestral (barra laranja) -> prefixo p/ vencer .panel.wrapper a */
.panel.wrapper .header-main a,
.panel.wrapper .header-main .i-text,
.panel.wrapper .header-main .cdz-top-link,
.panel.wrapper .header-main .cdz-top-link .label,
.panel.wrapper .header-main .account-trigger,
.panel.wrapper .header-main .nav-toggle,
.panel.wrapper .header-main .search-toggle,
.panel.wrapper .header-main .action.advanced,
.panel.wrapper .header-main .see-all,
.panel.wrapper .header-main .price,
.panel.wrapper .header-main .current-cat,
.panel.wrapper .header-main .all-cat,
.header.content a, .header.content .i-text, .header.content .hd-icon-links a {
    color: #454545 !important;
}
.panel.wrapper .header-main .i-ic,
.panel.wrapper .header-main .cdz-top-link i,
.panel.wrapper .header-main [class^="cdz-icon"],
.panel.wrapper .header-main [class*=" cdz-icon"] { color: #454545 !important; }
.panel.wrapper .header-main a:hover,
.panel.wrapper .header-main .cdz-top-link:hover,
.panel.wrapper .header-main .current-cat:hover,
.panel.wrapper .header-main .account-trigger:hover,
.header.content a:hover, .header.content .hd-icon-links a:hover { color: #FF5D00 !important; }

/* Dropdown de categoria da busca: texto escuro + fundo branco (corrige o contraste "clarinho") */
.panel.wrapper .cdz-cat-search .current-cat,
.panel.wrapper .cdz-cat-search .current-cat span { color: #454545 !important; }
.cdz-cat-search .category-chooser.dropdown,
.cdz-cat-search .dropdown-inner { background: #ffffff !important; }
.panel.wrapper .cdz-cat-search .category-list a { color: #333333 !important; }
.panel.wrapper .cdz-cat-search .category-list a:hover { color: #FF5D00 !important; background: #fff7f2 !important; }
.cdz-cat-search .category-list .parent > a { font-weight: 600; }

/* ---------- BARRA DO MENU: PRETA, texto/ícones brancos, hover laranja ---------- */
.header-bottom,
.cdz-navigation,
.cdz-horizontal-menu,
.cdz-horizontal-menu .groupmenu,
.page-header .sticky-menu.active {
    background-color: #000000 !important;
    border-color: #1c1c1c !important;
    box-shadow: none;
}
.cdz-horizontal-menu > .groupmenu > li.groupmenu-item > a,
.cdz-horizontal-menu > .groupmenu > li.level0 > a.menu-link,
.cdz-horizontal-menu > .groupmenu > li.level0 > a,
.cdz-horizontal-menu > .groupmenu > li > a,
.cdz-horizontal-menu > .groupmenu > li > a .cdz-nav-title,
.cdz-horizontal-menu > .groupmenu > li > a span,
.cdz-horizontal-menu > .groupmenu > li > a i {
    color: #ffffff !important;
    background: transparent !important;
    border-color: #1c1c1c !important;
}
.cdz-horizontal-menu > .groupmenu > li.groupmenu-item:hover > a,
.cdz-horizontal-menu > .groupmenu > li.level0:hover > a.menu-link,
.cdz-horizontal-menu > .groupmenu > li.level0:hover > a,
.cdz-horizontal-menu > .groupmenu > li > a:hover {
    background-color: #FF5D00 !important;
    color: #ffffff !important;
}
.cdz-horizontal-menu > .groupmenu > li.groupmenu-item:hover > a span,
.cdz-horizontal-menu > .groupmenu > li > a:hover span,
.cdz-horizontal-menu > .groupmenu > li > a:hover i { color: #ffffff !important; }

/* Dropdowns permanecem claros */
.groupmenu-drop { background-color: #ffffff !important; }
.groupmenu-drop a { color: #282828 !important; }
.cdz-menu:not(.cdz-toggle-menu) .groupmenu-drop a:hover,
.cdz-menu.cdz-toggle-menu .item.level-top > .menu-link:hover,
.cdz-menu.cdz-toggle-menu .groupmenu-drop li.item a:hover { color: #FF5D00 !important; }
.dropdown-menustyle02 .groupdrop-link li a:hover:before { background-color: #FF5D00 !important; }
.dmlb, .dmlb-new { color: #FF5D00 !important; }

/* Botão de busca: laranja */
.header-search .actions .search[class] { background: #FF5D00 !important; }

/* ---------- FOOTER: azul -> branco ---------- */
.page-footer { background: #ffffff !important; }
.page-footer .footer-bottom {
    background-color: #ffffff !important;
    color: #777777 !important;
    border-top: 1px solid #e6e6e6;
}
.page-footer .footer-bottom a { color: #555555 !important; }
.page-footer .footer-bottom a:hover { color: #FF5D00 !important; }
.page-footer .footer-middle { color: #555555; }
.page-footer .footer-middle a { color: #555555 !important; }
.page-footer .footer-middle .h5 { color: #FF5D00 !important; }
.page-footer .footer-middle a:hover,
.page-footer .footer-middle a:focus,
.page-footer .hover-link01 a:hover { color: #FF5D00 !important; }
.page-footer .hover-link01 a:after { background-color: #FF5D00 !important; }
.page-footer .ft-ic-list .i-ic { border-color: #FF5D00 !important; color: #FF5D00 !important; }
.page-footer .footer-social .i-link { color: #FF5D00 !important; }
.page-footer .footer-social .i-link:hover {
    background-color: #FF5D00 !important;
    color: #ffffff !important;
    border-color: #FF5D00 !important;
}

/* ---------- CTAs / preços / selos (marca) ---------- */
.action.primary,
button.action.primary,
.action.tocart,
.actions-toolbar .action.primary,
.block-minicart .actions .action.primary,
.checkout-methods-items .action.primary,
.cdz-btn-primary,
.btn-primary {
    background-color: #FF5D00 !important;
    border-color: #FF5D00 !important;
    color: #fff !important;
}
.action.primary:hover,
.action.tocart:hover,
button.action.primary:hover,
.cdz-btn-primary:hover,
.btn-primary:hover {
    background-color: #e65400 !important;
    border-color: #e65400 !important;
    color: #fff !important;
}
.product-item .price-box .price,
.product-info-price .price-wrapper .price,
.price-box .price { color: #FF5D00 !important; }
.old-price .price { color: #9b9b9b !important; }
.product-label span,
.cdz-product-label,
.cdz-label span,
.onsale,
.label.sale,
.sale-label { background-color: #FF5D00 !important; color: #fff !important; }

/* ==========================================================================
   HOME — seções
   ========================================================================== */
.px-section-title { text-align:center; margin:0 0 6px; color:#282828; font-size:26px; font-weight:700; }
.px-section-sub { text-align:center; color:#777; margin:0 0 22px; }
.px-btn { display:inline-block; background:#FF5D00; color:#fff !important; font-weight:700; padding:11px 26px; border-radius:24px; text-decoration:none !important; margin:0 4px; }
.px-btn:hover { background:#e65400; }
.px-btn-ghost { background:#fff; color:#FF5D00 !important; border:2px solid #FF5D00; padding:9px 24px; }
.px-btn-ghost:hover { background:#fff7f2; }

/* 1. Slideshow */
.px-slideshow { position:relative; overflow:hidden; border-radius:10px; margin:0 0 22px; background:#fafafa; }
.px-slides { display:flex; transition:transform .6s ease; }
.px-slide { min-width:100%; display:block; }
.px-slide img { width:100%; height:auto; display:block; }
.px-slideshow .px-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.9); border:0; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:22px; line-height:1; color:#282828; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.px-slideshow .px-prev { left:12px; } .px-slideshow .px-next { right:12px; }
.px-slideshow .px-nav:hover { background:#FF5D00; color:#fff; }
.px-dots { position:absolute; bottom:12px; left:0; right:0; text-align:center; }
.px-dots button { width:10px; height:10px; border-radius:50%; border:0; margin:0 4px; padding:0; cursor:pointer; background:rgba(255,255,255,.7); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.px-dots button.is-active { background:#FF5D00; width:24px; border-radius:5px; }

/* 2. USPs */
.px-usps { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 34px; }
.px-usp { flex:1 1 220px; display:flex; align-items:center; gap:12px; border:1px solid #eee; border-radius:10px; padding:14px 16px; background:#fff; }
.px-usp-i { font-size:26px; line-height:1; }
.px-usp strong { display:block; color:#282828; font-size:15px; }
.px-usp small { color:#777; font-size:12px; }

/* 3. Como funciona */
.px-how { background:#fff7f2; border:1px solid #ffe2d1; border-radius:12px; padding:28px 20px; margin:0 0 38px; }
.px-steps { display:flex; flex-wrap:wrap; gap:16px; }
.px-step { flex:1 1 240px; background:#fff; border:1px solid #ffe2d1; border-radius:10px; padding:20px; text-align:center; }
.px-step-n { width:40px; height:40px; border-radius:50%; background:#FF5D00; color:#fff; font-weight:700; font-size:18px; line-height:40px; margin:0 auto 10px; }
.px-step strong { display:block; color:#282828; margin-bottom:6px; }
.px-step p { color:#777; font-size:13px; margin:0; }

/* 4. Categorias */
.px-cats { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0 0 40px; }
.px-cats a { flex:0 1 150px; text-align:center; text-decoration:none !important; color:#282828 !important; border:1px solid #eee; border-radius:10px; padding:16px 8px; background:#fff; transition:.2s; }
.px-cats a:hover { border-color:#FF5D00; box-shadow:0 4px 12px rgba(255,93,0,.15); transform:translateY(-2px); }
.px-cats img { height:56px; width:auto; margin-bottom:8px; }
.px-cats span { display:block; font-size:13px; font-weight:600; }

/* 5/7. Faixa de seção + vitrine */
.px-band { display:flex; align-items:center; gap:14px; border-bottom:2px solid #FF5D00; padding:0 0 10px; margin:34px 0 18px; }
.px-band-ic { height:38px; width:auto; flex-shrink:0; }
.px-band h2 { margin:0; font-size:21px; color:#282828; font-weight:700; }
.px-band p { margin:0; color:#888; font-size:13px; }
.px-band-link { margin-left:auto; color:#FF5D00 !important; font-weight:700; text-decoration:none !important; white-space:nowrap; }
.px-showcase { margin:0 0 12px; }
.px-showcase .product-item { border:1px solid #f0f0f0; border-radius:8px; padding:10px; transition:.2s; }
.px-showcase .product-item:hover { border-color:#FF5D00; box-shadow:0 4px 14px rgba(0,0,0,.08); }

/* 6. Círculos */
.px-circles { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0 0 40px; }
.px-circles a { flex:0 1 160px; }
.px-circles img { width:100%; height:auto; border-radius:50%; transition:.25s; }
.px-circles a:hover img { transform:scale(1.05); box-shadow:0 6px 18px rgba(0,0,0,.15); }

/* 8. Sobre */
.px-about { background:#f7f7f7; border-radius:12px; padding:30px 24px; text-align:center; margin:36px 0 22px; }
.px-about h3 { margin:0 0 10px; color:#282828; }
.px-about p { color:#666; max-width:780px; margin:0 auto 16px; }

/* 9. Confiança */
.px-trust { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 10px; }
.px-trust div { flex:1 1 200px; text-align:center; border:1px solid #eee; border-radius:10px; padding:14px; }
.px-trust strong { display:block; color:#FF5D00; font-size:14px; }
.px-trust small { color:#888; font-size:12px; }

@media (max-width:767px) {
    .px-section-title { font-size:21px; }
    .px-band h2 { font-size:17px; }
    .px-cats a { flex:0 1 calc(50% - 6px); }
    .px-circles a { flex:0 1 calc(33% - 8px); }
}

/* ==========================================================================
   Banners da home — camada de contraste atrás do texto
   As artes B2C têm fundos claros (ex.: caminhão em laranja), e o texto do
   tema é branco. O véu abaixo garante leitura sem escurecer a arte toda.
   ========================================================================== */
.banner-style44 .i-text,
.banner-style43 .i-text { position: relative; }

.banner-style44 .i-text > *,
.banner-style43 .i-text > * { position: relative; z-index: 1; }

.banner-style44 .i-text::before,
.banner-style43 .i-text::before {
    content: "";
    position: absolute;
    inset: -18px -22px -18px -24px;
    background: linear-gradient(100deg,
                rgba(0,0,0,.62) 0%,
                rgba(0,0,0,.46) 45%,
                rgba(0,0,0,.14) 78%,
                rgba(0,0,0,0)   100%);
    border-radius: 10px;
    z-index: 0;
    pointer-events: none;
}

/* reforço de legibilidade nos textos claros sobre foto */
.banner-style44 .i-title,
.banner-style44 .i-subtitle,
.banner-style43 .i-title,
.banner-style43 .i-subtitle { text-shadow: 0 1px 3px rgba(0,0,0,.45); }

/* o botão fica acima do véu */
.banner-style44 .i-action,
.banner-style43 .i-action { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Banner grande do topo (Beleza & Saúde) — sem corte lateral
   A caixa é esticada p/ 520px (alinhar ao slideshow), mas a arte é 700x940.
   Com "cover" perdia ~11% da largura. Exibe a arte inteira e preenche a
   sobra com degradê igual às bordas da própria arte (#170b05 -> #3c1b07).
   -------------------------------------------------------------------------- */
.top-vermenu-01 .banner-style43 .i-img.img-cover {
    background: linear-gradient(180deg, #170b05 0%, #2a1306 52%, #3c1b07 100%);
    border-radius: inherit;
}
.top-vermenu-01 .banner-style43 .i-img.img-cover img {
    object-fit: contain !important;
    object-position: center center !important;
}

/* ==========================================================================
   Nossos diferenciais (cards .banner-style46) — cores da identidade PXT
   Os cards vinham com cores do demo (azul/verde/rosa/lilás) em variáveis
   inline (--i-bkg / --i-title). !important no stylesheet vence o inline.
   Laranja #FF5D00 + texto preto (contraste ~7:1; branco daria só ~3:1).
   ========================================================================== */
.banner-style46 {
    --i-bkg: #FF5D00 !important;
    --i-title: #000000 !important;
    background-color: #FF5D00 !important;
}
.banner-style46 .i-title { color: #000000 !important; font-weight: 800; }
.banner-style46 .i-subtitle,
.banner-style46 .i-desc { color: #1a1a1a !important; }