/**
 * WARNING: Do not change this file. Your changes will be lost.
 * 2026-08-12 17:48:45 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');body.boxed {
}
@media (min-width: 768px) {
    .page-layout-1column .product-info-main, .page-layout-2columns-left .product-info-main, .page-layout-2columns-right .product-info-main, .page-layout-3columns .product-info-main,.page-product-downloadable .product-options-bottom {
        width: 57.17%;
    }
    .page-layout-1column .product.media, .page-layout-2columns-left .product.media, .page-layout-2columns-right .product.media, .page-layout-3columns .product.media,.page-product-downloadable .product-options-wrapper {
        width: 40.83%;
    }

    .page-layout-1column .column.main > .custom-block ~ .product-info-main, .page-layout-2columns-left .column.main > .custom-block ~ .product-info-main, .page-layout-2columns-right .column.main > .custom-block ~ .product-info-main, .page-layout-3columns .column.main > .custom-block ~ .product-info-main {
        width: 42.8775%;
    }
    .page-layout-1column .column.main > .custom-block ~ .product.media, .page-layout-2columns-left .column.main > .custom-block ~ .product.media, .page-layout-2columns-right .column.main > .custom-block ~ .product.media, .page-layout-3columns .column.main > .custom-block ~ .product.media {
        width: 30.6225%;
    }
}

body {
    line-height: 25px;
    letter-spacing: 0;
}
p,li {
    letter-spacing: 0;
    line-height: 25px;
}
@media (min-width: 1440px) {
.layout-1220 .block.category.event, .layout-1220 .footer.content, .layout-1220 .header.content, .layout-1220 .navigation, .layout-1220 .page-main, .layout-1220 .page-wrapper>.breadcrumbs >ul, .layout-1220 .page-wrapper>.page-bottom, .layout-1220 .page-wrapper>.widget, .layout-1220 .top-container,.layout-1220 .container {
    max-width: 1236px;
}
}
@media (max-width: 575px){
body {
    font-size: 13px;
    line-height: 21px;
}
}
h1, h2, h3, h4, h5, h6 {
    font-family: Poppins,sans-serif;
    color: #222529;
    letter-spacing: normal;
}
h1 {
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    margin: 0 0 32px 0;
}
h2 {
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    margin: 0 0 32px 0;
}
h3 {
    font-weight: 700;
    font-size: 25px;
    line-height: 32px;
    margin: 0 0 20px 0;
}
h4 {
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    margin: 0 0 14px 0;
}
h5 {
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    margin: 0 0 14px 0;
}
h6 {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    margin: 0 0 14px 0;
}
html .heading-secondary, html .lnk-secondary, html .text-color-secondary {
    color: #ff7272;
}
html .btn-modern {
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}
html .action.primary, html .btn {
    padding: 0.533rem 0.933rem;
    font-size: 0.8rem;
    line-height: 1.42857;
    transition: color 0.15s,background-color 0.15s,border-color 0.15s,box-shadow 0.15s,transform 0.2s;
}
html .btn-modern {
    font-size: .8125rem;
    padding: 1em 2.8em;
}
.vc_btn3.vc_btn3-shape-rounded {
    border-radius: .5em;
}
html .action.primary,html .btn.btn-primary {
    color: var(--button-text-color);
    background-color: var(--button-bg-color);
    border-color: var(--button-border-color);
}
html .action.primary:hover,.btn-primary:hover {
    color: var(--button-text-hover-color);
    background-color: var(--button-bg-hover-color);
    border-color: var(--button-border-hover-color);
}
html .btn-xl {
    font-size: 1rem;
    padding: .8rem 2rem;
}
.btn-modern.btn-xl {
    font-size: 1rem;
    padding: 1.25em 3.125em;
}
.btn-flat {
    padding: 0!important;
    background: none!important;
    border: none!important;
    border-bottom: 1px solid transparent!important;
    box-shadow: none!important;
    text-transform: uppercase;
    font-size: .75rem;
}
html .btn-dark {
    color: #fff;
    background-color: #222529;
    border-color: #222529 #222529 #0b0c0e;
}
html .btn-light {
    color: #222529;
    background-color: #fff;
    border-color: #fff #fff #e6e6e6;
}
html .btn-quaternary {
    color: #fff;
    background-color: #000;
    border-color: #000 #000 #000;
}
html .btn-borders {
    border-width: 2px;
    background: transparent;
    padding: 0.483rem 1.0625rem;
}
.btn-borders.btn-light {
    border-color: #fff;
    color: #fff;
}
.btn-borders.btn-light:active, .btn-borders.btn-light:focus, .btn-borders.btn-light:hover {
    background-color: #fff;
    border-color: #fff;
    color: #212529;
}
html .background-color-secondary {
    background-color: #f4a085 !important;
}
@media (min-width: 1256px) {
.pe-xl-5 {
    padding-right: 3rem !important;
}
}
.m-r-xl {
    margin-right: 40px!important;
}
.p-t-sm {
    padding-top: 10px!important;
}
.p-t-xxl {
    padding-top: 60px!important;
}
.p-b-xxl {
    padding-bottom: 60px!important;
}
.top-icon .porto-sicon-header {
    margin-bottom: .75rem;
}
.wel-msg i {
    font-size: 23.68px;
    color: #4dae65;
}
.main-panel-top {
    border-bottom: 1px solid #e7e7e7;
}
.page-header.type22 {
    box-shadow: 0 2px 2px rgba(0, 0, 0, .06);
}
.page-header.type22 .panel.wrapper {
    min-height: 56px;
}
.page-header.type22 .header.panel > .header.links > li {
    padding: 0 .5rem !important;
}
.page-header.type22 .main-panel-top .separator {
    height: 1.75rem;
    border-left-color: #dadcdd;
}
.page-header.type22 .main-panel-top .share-links {
    margin-left: 0 !important;
}
.rtl .page-header.type22 .main-panel-top .share-links {
    margin-right: 0 !important;
}
.page-header.type22 .main-panel-top .share-links a {
    margin: 0px 15px 0px 15px;
    font-size: 1rem;
    width: 40px;
    height: 40px;
    box-shadow: none;
}
.page-header.type22 .main-panel-top .share-links a + a:after {
    content: '|';
    position: absolute;
    border-left: 1px solid #dadcdd;
    height: 1.75rem;
    top: 50%;
    left: -1rem;
    margin-left: -1px;
    margin-top: -.875rem;
}
.rtl .page-header.type22 .main-panel-top .share-links a + a:after {
    left: auto;
    right: -1rem;
    margin-left: 0;
    margin-right: -1px;
}
.page-header.type22 .minicart-wrapper .action-subtotal {
    display: none !important;
}
.page-header.type22 .header-contact .my-account i, .page-header.type22 .header-contact .wishlist i {
    font-size: 28px;
}
.page-header.type22 .minicart-wrapper .action.showcart .minicart-icon {
    font-size: 28px;
}
.main-toggle-menu {
    margin-right: 30px;
}
.rtl .main-toggle-menu {
    margin-right: 0;
    margin-left: 30px;
}
.main-toggle-menu:not(.closed):not(.show-hover):before {
    display: none;
}
.main-toggle-menu .menu-title {
    font-size: .875rem;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1.8;
    letter-spacing: -.025em;
    padding: 10px 15px;
    padding-left: 0;
    padding-right: 0;
    color: #222529 !important;
    border: none;
    background: #fff !important;
}
.main-toggle-menu .menu-title .toggle {
    margin: 8px 10px 8px 0;
}
.rtl .main-toggle-menu .menu-title .toggle {
    margin: 8px 0 8px 10px;
}
.main-toggle-menu .menu-title.closed:not(:hover) {
    color: #222529 !important;
}
.main-toggle-menu .menu-title:after {
    right: -16px;
    font-size: 13px;
}
.rtl .main-toggle-menu .menu-title:after {
    right: auto;
    left: -16px;
    font-size: 13px;
}
.main-toggle-menu .toggle-menu-wrap {
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    width: 250px;
}
.second-menu-block {
    margin-left: 0 !important;
}
@media (min-width: 992px) {
.text-lg-end {
    text-align: right !important;
}
.text-lg-start {
    text-align: left !important;
}
.page-header.type22 .header-main .header-left, .page-header.type22 .header-main .header-right, .page-header.type22 .header-main .header-center {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}
.page-header.type22:not(.sticky-header) .header-bottom {
    border-top: none;
    border-bottom: none;
}
.page-header.type22 .header-main .header-right > * {
    margin-top: 0;
}
.page-header.type22 .logo {
    margin-right: 3rem;
}
.rtl .page-header.type22 .logo {
    margin-right: 0;
    margin-left: 3rem;
}
.page-header.type22 .search-area .block.block-search {
    box-shadow: none;
}
.page-header.type22 .search-area .block.block-search {
    max-width: 490px;
    margin-top: 0;
}
.rtl .page-header.type22 .search-area .block.block-search {
    padding-left: 0 !important;
}
.page-header.type22 .block-search input {
    height: 42px;
    padding-right: 200px;
}
.rtl .page-header.type22 .block-search input {
    padding-left: 200px;
    padding-right: 20px;
}
.page-header.type22 .search-category {
    height: 42px;
    line-height: 42px;
    right: 52px !important;
}
.rtl .page-header.type22 .search-category {
    right: auto !important;
    left: 52px !important;
}
.page-header.type22 .search-area .minisearch .actions button {
    width: 52px;
    height: 42px;
    line-height: 42px;
    background-color: #fff;
    color: #333333;
    border-radius: 0 5px 5px 0;
}

.page-header.type22 .custom-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.page-header.type22 .minicart-wrapper {
    margin-left: 0 !important;
}
.page-header.type22 .navigation:not(.side-megamenu) .level0 .level-top {
    font-weight: 600;
    color: #222529;
    padding: 20px 30px 20px 30px;
}
.page-header.type22 .navigation.side-megamenu li.level0 > a {
    font-weight: 600;
}
.page-header.type22 .navigation.side-megamenu li.level0 > a i {
    font-size: 14px;
}
i.size-lg {
    font-size: 1.2em !important;
}
}
@media (max-width: 991px) {
.page-header.type22 .header-contact > *:not(:first-child) {
    margin-left: .375rem;
}
.page-header.type22 .search-area.show-icon-tablet a.search-toggle-icon {
    font-size: 23px;
}
}
.page-wrapper > .breadcrumbs .items {
    position: relative;
    margin-bottom: 47px;
    padding-bottom: 13px;
    padding-top: 24px;
}
.page-wrapper > .breadcrumbs .items:after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    border-bottom: 1px solid #e7e7e7;
}
html .background-color-secondary {
    background-color: #ff7272!important;
}
.footer, .footer p {
    letter-spacing: 0;
    font-size: 13px;
}
.footer .widgettitle, .footer .widget-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
    line-height: 1;
    letter-spacing: -.025em;
}
.footer-top .custom-block:before,.footer-top .custom-block:after {
    margin-bottom: 0;
    border: none;
    margin-top: 0;
}
.footer-middle > .container {
    padding-top: 65px;
    padding-bottom: 14px;
}
.footer-middle > .container::after {
     border-color:rgba(225,225,225,0.1);
     margin-top: .625rem;
     position: static;
}
.footer-middle > .container > .row {
    align-items: center;
}
.footer-middle > .container > .row > div:not(:first-child) {
    align-self: flex-start;
}
.footer .follow-us .share-links a:not(:hover) {
    background: #fff;
    color: #222529;
}
.footer .block.newsletter .form.subscribe {
    display: block;
}
.footer .block.newsletter .field {
    margin-bottom: 1rem;
}
.footer .newsletter input {
    height: 48.59px;
    border: none;
    border-radius: 0;
    background: #292c30;
    padding-left: 1.5rem;
    font-size: .8125rem;
    border-radius: 30px;
}
.footer .newsletter .action.subscribe {
    height: 48px;
    border-radius: 30px;
    padding: 1.25em 4.2em 1.25em 4.2em;
    font-size: .8125rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: -0.325px;
    margin-left: -1px;
    border: none;
}
.footer .widget>div>ul li {
    margin-bottom: 0;
    line-height: 24px;
}
.footer .contact-info .contact-details strong {
    font-weight: 600;
    color: #888888;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -.025em;
}
.footer .contact-info .contact-details span {
    padding-left: 0;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -.03em;
    color: #fff;
}
.footer .contact-info .contact-details span a {
    color: #fff;
}
.footer-bottom address {
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
}
.footer-bottom .widget.widget_custom_html {
    margin-bottom: 0;
}
.footer-bottom .custom-block.f-right, .footer-bottom address {
    padding-top: 0;
    padding-bottom: 0;
}
.footer-bottom {
    font-size: 1em;
    padding-bottom: 52px;
    padding-top: 0;
}

/* ================= POOD-MENU-M3 inicio ================= */
/* Gerado em 2026-08-11. Remover deste marcador ate o marcador de fim
   devolve o estado anterior. */

/* ---- 1. Regras portadas do header type22 para o type2 ----
   O header trocou de tipo; estas regras existiam presas a .page-header.type22
   e ficariam inertes. Sao as mesmas declaracoes, so o escopo mudou. ---- */
@media (max-width: 991px) {
.page-header.type2 .header-contact > *:not(:first-child) {
    margin-left: .375rem;
}
.page-header.type2 .search-area.show-icon-tablet a.search-toggle-icon {
    font-size: 23px;
}
}
.page-header.type2 {
    box-shadow: 0 2px 2px rgba(0, 0, 0, .06);
}
.page-header.type2 .panel.wrapper {
    min-height: 56px;
}
.page-header.type2 .header.panel > .header.links > li {
    padding: 0 .5rem !important;
}
.page-header.type2 .main-panel-top .separator {
    height: 1.75rem;
    border-left-color: #dadcdd;
}
.page-header.type2 .main-panel-top .share-links {
    margin-left: 0 !important;
}
.rtl .page-header.type2 .main-panel-top .share-links {
    margin-right: 0 !important;
}
.page-header.type2 .main-panel-top .share-links a {
    margin: 0px 15px 0px 15px;
    font-size: 1rem;
    width: 40px;
    height: 40px;
    box-shadow: none;
}
.page-header.type2 .main-panel-top .share-links a + a:after {
    content: '
}
.rtl .page-header.type2 .main-panel-top .share-links a + a:after {
    left: auto;
    right: -1rem;
    margin-left: 0;
    margin-right: -1px;
}
.page-header.type2 .minicart-wrapper .action-subtotal {
    display: none !important;
}
.page-header.type2 .header-contact .my-account i, .page-header.type2 .header-contact .wishlist i {
    font-size: 28px;
}
.page-header.type2 .minicart-wrapper .action.showcart .minicart-icon {
    font-size: 28px;
}
@media (min-width: 992px) {
.page-header.type2 .header-main .header-left, .page-header.type2 .header-main .header-right, .page-header.type2 .header-main .header-center {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}
.page-header.type2 .header-main .header-right > * {
    margin-top: 0;
}
.page-header.type2 .logo {
    margin-right: 3rem;
}
.rtl .page-header.type2 .logo {
    margin-right: 0;
    margin-left: 3rem;
}
.page-header.type2 .search-area .block.block-search {
    box-shadow: none;
}
.page-header.type2 .search-area .block.block-search {
    max-width: 490px;
    margin-top: 0;
}
.rtl .page-header.type2 .search-area .block.block-search {
    padding-left: 0 !important;
}
.page-header.type2 .block-search input {
    height: 42px;
    padding-right: 200px;
}
.rtl .page-header.type2 .block-search input {
    padding-left: 200px;
    padding-right: 20px;
}
.page-header.type2 .search-category {
    height: 42px;
    line-height: 42px;
    right: 52px !important;
}
.rtl .page-header.type2 .search-category {
    right: auto !important;
    left: 52px !important;
}
.page-header.type2 .search-area .minisearch .actions button {
    width: 52px;
    height: 42px;
    line-height: 42px;
    background-color: #fff;
    color: #333333;
    border-radius: 0 5px 5px 0;
}
.page-header.type2 .custom-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.page-header.type2 .minicart-wrapper {
    margin-left: 0 !important;
}
}

/* portadas: 28   ignoradas (side-megamenu/header-bottom): 4 */

/* ---- 2. Menu principal, linguagem Material 3 ---- */
/* Tokens. Acento vem de porto_design/colors/button_bg_color, para o menu nao
   inventar uma paleta propria e destoar do botao de compra. */
:root {
    --pood-primary: #db6060;
    --pood-on-surface: #222529;
    --pood-on-surface-var: #5b5f66;
    --pood-outline-var: #e4e5e8;
    --pood-surface: #ffffff;
    --pood-state-hover: rgba(219, 96, 96, .08);
    --pood-space-100: 8px;
    --pood-space-200: 16px;
    --pood-radius-md: 12px;
    --pood-radius-sm: 8px;
    --pood-elev-2: 0 1px 2px rgba(0, 0, 0, .10), 0 2px 6px 2px rgba(0, 0, 0, .07);
    --pood-easing: cubic-bezier(.2, 0, 0, 1);
}

@media (min-width: 992px) {

/* --- a barra --- */
.page-header.type2 .nav-sections {
    background: var(--pood-surface);
    border-top: 1px solid var(--pood-outline-var);
    border-bottom: 1px solid var(--pood-outline-var);
    box-shadow: none;
}
.page-header.type2 .navigation > ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 2px;
    padding: 0;
}
.page-header.type2 .navigation li.level0 {
    display: flex;
    align-items: stretch;
    border: 0;
}

/* --- item de topo --- */
/* padding menor que o do Porto (era 20px 30px): 7 rotulos precisam caber em
   uma linha dentro do container de 1220px. */
.page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px var(--pood-space-200);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.35;
    color: var(--pood-on-surface);
    white-space: nowrap;
    text-transform: none;
    background: transparent;
    transition: color 150ms var(--pood-easing);
}

/* Indicador M3: barra que cresce por transform, nunca por width - width forca
   reflow e derruba o INP (regra do projeto M3, secao 6.6.5). */
.page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top::after {
    content: "";
    position: absolute;
    left: var(--pood-space-100);
    right: var(--pood-space-100);
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--pood-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 200ms var(--pood-easing);
}
.page-header.type2 .navigation li.level0:hover > .level-top::after,
.page-header.type2 .navigation li.level0 > .level-top.ui-state-active::after,
.page-header.type2 .navigation li.level0.active > .level-top::after {
    transform: scaleX(1);
}

/* Estas duas precisam de !important: styles-m.css tem
   `.navigation a:hover{color:#222529!important}` e custom.css tem
   `li.level0>a.ui-state-active{color:#333!important}`. */
.page-header.type2 .navigation li.level0:hover > .level-top,
.page-header.type2 .navigation li.level0 > .level-top:hover,
.page-header.type2 .navigation li.level0 > .level-top.ui-state-active {
    color: var(--pood-primary) !important;
    background: transparent !important;
}

/* --- dropdown --- */
.page-header.type2 .sw-megamenu.navigation li.level0.classic > .submenu {
    min-width: 248px;
    padding: var(--pood-space-100);
    border: 0;
    border-radius: 0 0 var(--pood-radius-md) var(--pood-radius-md);
    background: var(--pood-surface);
    box-shadow: var(--pood-elev-2);
}
/* .row do Bootstrap vem com margem negativa de 15px e empurra a lista para fora
   da caixa. Dentro do dropdown ele nao tem funcao de grade. */
.page-header.type2 .sw-megamenu.navigation li.level0.classic > .submenu > .row {
    display: block;
    margin: 0;
}
.page-header.type2 .sw-megamenu.navigation li.level0.classic > .submenu ul.subchildmenu {
    padding: 0;
    margin: 0;
    list-style: none;
}
.page-header.type2 .sw-megamenu.navigation li.level0.classic > .submenu li.level1 {
    display: block;
    padding: 0;
    border: 0;
}
.page-header.type2 .sw-megamenu.navigation li.level0.classic > .submenu li.level1 > a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--pood-radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--pood-on-surface-var);
    text-transform: none;
    transition: background-color 150ms var(--pood-easing), color 150ms var(--pood-easing);
}
.page-header.type2 .sw-megamenu.navigation li.level0.classic > .submenu li.level1 > a:hover {
    background: var(--pood-state-hover);
    color: var(--pood-primary) !important;
}

/* Acessibilidade: o Porto zera o outline. Sem foco visivel, quem navega por
   teclado nao sabe onde esta. */
.page-header.type2 .navigation a:focus-visible {
    outline: 2px solid var(--pood-primary);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Telas menores ainda no desktop: aperta o padding antes de deixar quebrar. */
@media (max-width: 1279px) {
.page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top {
    padding: 15px 11px;
    font-size: 13px;
}
}

}

/* --- mobile: o Porto usa acordeao; aqui so tipografia e respiro --- */
@media (max-width: 991px) {
.page-header.type2 .navigation li.level0 > .level-top {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    padding: 14px var(--pood-space-200);
}
.page-header.type2 .navigation li.level1 > a {
    font-size: 14px;
    padding: 12px var(--pood-space-200);
}
}

/* ================= POOD-MENU-M3 fim ================= */

/* ===== POOD-MENU inicio ===== */
/* Mega menu fullwidth: trilho vertical + imagem revelada por hover/foco + bloco
   de promocao a direita. Escopo: desktop >=992px. Abaixo disso vale a gaveta do
   Porto, que ja esconde .menu-thumb-img sozinho.
   Depende de sw_menu_type=fullwidth e sw_menu_cat_columns=1 nas 7 categorias de
   topo. Enquanto estiverem em classic, este bloco e inerte.
   Sem !important: o sw_megamenu.js nao escreve style inline em fullwidth. */
@media (min-width: 992px) {

  /* CORRECAO DE DEFEITO PRE-EXISTENTE — nada a ver com o mega menu novo.
     O bloco POOD-MENU-M3 acima tenta deixar a barra horizontal com
       .page-header.type2 .navigation > ul            -> (0,3,1)
     mas o Porto (type2.css) tem
       .page-header.type2 .navigation:not(.side-megamenu) > ul {display:block}
     que vale (0,4,1), porque :not() soma a especificidade do argumento.
     O Porto vencia: o <ul> ficava block e os <li>, que o M3 poe em
     display:flex, viravam blocos de largura total e EMPILHAVAM NA VERTICAL.
     Medido em 12/08/2026: 7 itens de 1181px, um por linha.
     Aqui a regra e reescrita com a mesma especificidade do Porto. */
  .page-header.type2 .navigation:not(.side-megamenu) > ul {
    display: flex; flex-wrap: nowrap; justify-content: center;
    align-items: stretch; gap: 2px; padding: 0;
  }

  /* referencia de posicionamento da imagem revelada.
     min-height porque a altura natural vem do trilho (44px x n de itens) e
     "Parede e Teto" tem so 2 subcategorias: sem isto o painel abriria com
     88px de altura e a imagem de 260px vazaria para fora. */
  .page-header.type2 .level0.fullwidth > .submenu .row {
    position: relative; min-height: 300px;
  }
  /* o <ul> do Porto e position:relative (styles-m.css: ".navigation ul").
     Enquanto for, ele — e nao a .row — e o bloco contentor da miniatura, e
     "left:280px + right:326px" dentro de uma caixa de 280px colapsa a
     largura para ZERO. Medido: miniatura 0x240, imagem 0px. */
  .page-header.type2 .level0.fullwidth > .submenu ul.subchildmenu { position: static; }

  /* Em fullwidth o Porto poe position:static no <li>, entao o bloco contentor
     do painel passa a ser o <ul> da BARRA (que e position:relative). Com o
     top:0 herdado, o painel abria em cima da propria barra e a escondia.
     top:100% = imediatamente abaixo da barra. Medido: barra 218..267,
     painel passa de 218..538 para 267..587, folga de 0px. */
  .page-header.type2 .level0.fullwidth > .submenu { margin-top: 0; top: 100%; }
  .page-header.type2 .level0.fullwidth > .submenu::before {
    content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
  }

  /* ---- A) trilho: coluna de 280px, sobrepondo o col-md-8 do Bootstrap ---- */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.mega-columns.columns1 {
    box-sizing: border-box; flex: 0 0 280px; max-width: 280px; width: 280px;
    margin: 0; padding: 10px 0; list-style: none;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 {
    box-sizing: border-box; display: block; position: static; padding: 0;
    border-left: 2px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:hover,
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:focus-within {
    background-color: #F2F2F4; border-left-color: #F65F44;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > a {
    box-sizing: border-box; display: flex; align-items: center; height: 44px;
    padding: 0 16px; font-size: 13px; font-weight: 400; line-height: normal;
    text-transform: none; text-decoration: none; color: #17171A;
  }

  /* ---- B) imagem revelada: entre o trilho e a promocao ---- */
  /* largura da promocao fixada em 326px (ver item C) para que este 'right'
     nao dependa da fracao col-md-N gravada no admin */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > .menu-thumb-img {
    box-sizing: border-box; position: absolute; top: 0; bottom: 0;
    left: 280px; right: 326px; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 9px;
    opacity: 0; z-index: 1; pointer-events: none; transition: opacity .18s ease;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:first-child > .menu-thumb-img {
    opacity: 1; pointer-events: auto;
  }
  /* ...e some assim que o mouse entra em QUALQUER item do trilho. Sem isto a
     primeira fica visivel por baixo, e como titulo e chamada tem fundo
     transparente os dois textos se sobrepoem na tela. O hover no <ul> vale
     tambem quando o cursor esta sobre a imagem: ela e descendente do <li>. */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1:hover > li.level1:first-child > .menu-thumb-img {
    opacity: 0; pointer-events: none;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:hover > .menu-thumb-img,
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:focus-within > .menu-thumb-img {
    opacity: 1; z-index: 2; pointer-events: auto;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > .menu-thumb-img .menu-thumb-link {
    display: block; line-height: 0;
  }
  /* a imagem ja vem 400x400 sobre #DCDCDE: o bloco cinza e ela, nao a zona */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > .menu-thumb-img img {
    display: block; width: 210px; height: 210px; max-width: 100%; object-fit: contain;
  }
  /* titulo e chamada, injetados por PoodModulos_Menu/js/menu-titulo a partir do
     alt da imagem — o Porto nao emite texto por subcategoria */
  .page-header.type2 .level0.fullwidth .submenu .menu-thumb-img .pood-thumb-nome {
    font-size: 15px; font-weight: 600; color: #17171A; text-align: center;
    line-height: 1.3; max-width: 300px;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-thumb-img .pood-thumb-cta {
    font-size: 12px; font-weight: 400; color: #6E6E76; text-decoration: none;
    text-transform: none; padding: 0;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-thumb-img .pood-thumb-cta:hover {
    color: #17171A; text-decoration: underline;
  }

  /* ---- C) promocao: bloco CMS por categoria de topo ---- */
  /* margin-left:auto e obrigatorio: como item flex, o bloco encostaria no
     trilho e ficaria EMBAIXO da miniatura, que e absoluta de left:280px a
     right:326px. Medido em 12/08/2026: banner e miniatura sobrepostos. */
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block {
    box-sizing: border-box; flex: 0 0 326px; max-width: 326px; margin-left: auto;
    border-left: 1px solid #D8D8DC; padding: 22px 24px;
    color: #17171A; font-size: 14px;
  }
  /* desfaz o '.submenu a' generico do Porto, que sairia 12px maiusculo cinza */
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block a {
    font-size: inherit; font-weight: inherit; text-transform: none;
    padding: 0; color: inherit;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block img {
    display: block; max-width: 100%; height: auto;
  }

  /* ---- C2) o banner de destaque, montado pelo bloco CMS ---- */
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 7px; text-decoration: none;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo__tag {
    background: #F65F44; color: #17171A; font-size: 9.5px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo__img {
    width: 100%; max-width: 210px; margin: 2px 0 4px;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo__nome {
    font-size: 13px; font-weight: 600; line-height: 1.35; color: #17171A;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo__de {
    font-size: 11.5px; color: #6E6E76; text-decoration: line-through;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo__por {
    font-size: 18px; font-weight: 700; color: #17171A; line-height: 1.1;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo__cta {
    margin-top: 5px; height: 32px; padding: 0 18px; border: 1px solid #D8D8DC;
    border-radius: 999px; font-size: 11.5px; font-weight: 500; color: #17171A;
    display: inline-flex; align-items: center;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo:hover .pood-promo__cta {
    background: #17171A; border-color: #17171A; color: #FFFFFF;
  }

  /* ---- D) defesa: no dia em que existir 3o nivel, ele abriria sobre o trilho ---- */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > .subchildmenu {
    display: none;
  }

  /* "Ver tudo em X" ao fim do trilho, injetado pelo JS. Existe porque 64 dos
     280 produtos visiveis nao estao em nenhuma subcategoria. */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1.pood-vertudo {
    margin-top: 8px; padding-top: 10px; border-top: 1px solid #D8D8DC;
    border-left-color: transparent;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1.pood-vertudo:hover {
    background: transparent; border-left-color: transparent;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1.pood-vertudo > a {
    height: 34px; font-size: 12px; color: #6E6E76;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1.pood-vertudo > a:hover {
    color: #F65F44;
  }

}
/* ===== POOD-MENU fim ===== */
/* ===== POOD-CABECALHO inicio ===== */
/* Cabecalho na Direcao A: utilitaria apagada, faixa principal ESCURA com a
   busca como maior elemento, faixa de menu logo abaixo.
   Tokens: #F2F2F4 fundo · #DCDCDE bloco · #FFFFFF superficie · #17171A tinta ·
   #6E6E76 tinta-2 · #D8D8DC linha · #F65F44 acento (pontuacao).
   #26262B e derivado: duas faixas escuras empilhadas precisam de dois degraus.
   Sem sombra em nada. Controles em pilula (raio 999); o resto raio 0. */

/* ---------------- DESKTOP ---------------- */
@media (min-width: 992px) {

  /* --- A) faixa utilitaria --- */
  .page-header.type2 .main-panel-top {
    background: #F2F2F4; border-bottom: 1px solid #D8D8DC; box-shadow: none;
  }
  .page-header.type2 .main-panel-top .panel.wrapper {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 34px; padding: 0;
  }
  .page-header.type2 .main-panel-top .header-left {
    display: flex; align-items: center; font-size: 11px; color: #17171A;
  }
  .page-header.type2 .main-panel-top .header-right {
    display: flex; align-items: center; gap: 14px;
  }
  .page-header.type2 .main-panel-top,
  .page-header.type2 .main-panel-top a,
  .page-header.type2 .main-panel-top .header.links > li {
    font-size: 11px; color: #6E6E76;
  }
  .page-header.type2 .main-panel-top .header.links {
    display: flex; align-items: center; gap: 14px; margin: 0; padding: 0;
  }
  .page-header.type2 .main-panel-top .header.links > li { margin: 0; padding: 0; }
  .page-header.type2 .main-panel-top .header.links > li.greet.welcome {
    color: #17171A; font-weight: 600;
  }
  .page-header.type2 .main-panel-top a:hover { color: #17171A; text-decoration: none; }
  /* o separador vertical do Porto some: o respiro ja separa */
  .page-header.type2 .main-panel-top .separator,
  .page-header.type2 .main-panel-top .gap { display: none; }
  .page-header.type2 .main-panel-top .share-links { display: flex; gap: 10px; }
  .page-header.type2 .main-panel-top .share-links a {
    width: 20px; height: 20px; display: grid; place-items: center;
    color: #6E6E76; background: none; border: 0; font-size: 13px;
  }
  .page-header.type2 .main-panel-top .share-links a:hover { color: #17171A; }

  /* --- B) faixa principal, escura --- */
  .page-header.type2 .header-main {
    background: #17171A; border: 0; box-shadow: none;
  }
  .page-header.type2 .header-main .header-row {
    display: flex; align-items: center; min-height: 100px; gap: 24px;
  }
  /* a coluna da logo usava 195px para um wordmark de 86px: 109px que a busca
     nao tinha. A busca so cresce se as duas colunas laterais encolherem — ela
     ja absorve 100% da folga que sobra. */
  .page-header.type2 .header-main .header-left {
    flex: 0 0 auto; padding: 0; margin: 0; min-width: 0;
  }
  .page-header.type2 .header-main .header-left .logo { margin: 0; padding: 0; }
  /* base 0%: com flex-basis auto a coluna cresce a partir do conteudo e para
     onde ele acaba; com 0% ela absorve toda a folga da faixa */
  .page-header.type2 .header-main .header-center {
    flex: 1 1 0%; min-width: 0; display: flex; align-items: center; max-width: none; width: auto;
  }
  .page-header.type2 .header-main .header-center .search-area {
    flex: 1 1 auto; width: 100%; min-width: 0;
  }
  .page-header.type2 .header-main .header-right {
    flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  }
  /* a logo agora e um PNG branco de verdade (pood branco.png, recortado):
     nao precisa mais do filter de inversao */
  .page-header.type2 .header-main .logo img {
    height: 34px; width: auto; max-height: 34px;
  }
  /* tudo que e texto ou icone na faixa escura vira claro */
  .page-header.type2 .header-main,
  .page-header.type2 .header-main a,
  .page-header.type2 .header-main .header-contact,
  .page-header.type2 .header-main .header-contact a { color: #FFFFFF; }

  /* --- B1) busca em pilula --- */
  /* o Porto limita a busca a 490px; solto para ela tomar a folga da faixa e
     virar o maior elemento, como na referencia */
  .page-header.type2 .search-area { padding-left: 0; max-width: none; width: 100%; }
  .page-header.type2 .search-area .block.block-search {
    /* NADA de overflow:hidden aqui: o painel do autocomplete vive dentro deste
       elemento e seria RECORTADO — o DOM o reporta visivel e a tela nao mostra.
       O arredondamento vem do radius nos filhos das pontas. */
    background: #FFFFFF; border: 0; border-radius: 999px;
    max-width: none; width: 100%; float: none;
  }
  .page-header.type2 .search-area .block-search .block-content { margin: 0; }
  .page-header.type2 .search-area .minisearch { display: flex; align-items: center; }
  .page-header.type2 .search-area .field.search { flex: 1 1 auto; min-width: 0; margin: 0; }
  /* o .control nasce display:block: sem isto o seletor de categoria empilha
     ABAIXO do campo e a pilula vira um blocao de 92px de altura */
  .page-header.type2 .search-area .field.search .control {
    display: flex; align-items: center; border: 0; margin: 0; padding: 0;
    position: relative;
  }
  .page-header.type2 .search-area .block-search input {
    height: 46px; border: 0; background: transparent; padding: 0 16px 0 24px;
    font-size: 13.5px; color: #17171A; box-shadow: none;
    flex: 1 1 auto; width: auto; min-width: 0; margin: 0; position: relative;
  }
  .page-header.type2 .search-area .block-search input::placeholder { color: #6E6E76; opacity: 1; }
  /* O seletor "Todas as Categorias" do Mageplaza sai da barra: com o
     autocomplete mostrando produto, foto e preco enquanto se digita, filtrar
     por categoria antes de buscar deixou de fazer sentido. A busca continua
     sendo a do modulo do Porto — so o seletor some da tela. */
  .page-header.type2 .search-area .search-category { display: none !important; }
  .page-header.type2 .search-area .minisearch .actions { flex: 0 0 auto; position: static; }
  /* o botao nasce position:absolute; static devolve ele ao fluxo do flex e a
     pilula se fecha sem depender de numeros magicos de "right" */
  .page-header.type2 .search-area .minisearch .actions button {
    position: static; width: 52px; height: 46px; background: transparent;
    color: #17171A; border: 0; opacity: 1; margin: 0; padding: 0;
  }
  .page-header.type2 .search-area .minisearch .actions button:hover { background: #F2F2F4; }
  .page-header.type2 .search-area .nested { display: none; }

  /* --- B2) bloco da direita: WhatsApp, conta, carrinho --- */
  .page-header.type2 .header-main .header-contact {
    display: flex; align-items: center; gap: 14px;
  }
  /* o icone de conta duplica o "Entrar / Registrar" do bloco ao lado, mesmo destino */
  .page-header.type2 .header-main .header-contact a.my-account { display: none; }
  /* O bloco CMS do WhatsApp/conta traz <style> proprio com #f26100 e #128c3e —
     a divida de laranja do §10.4 do CLAUDE.md. Sobre a faixa escura o texto
     saia #222529, ilegivel. Aqui ele e vestido na Direcao A sem editar o bloco,
     que continua livre para voce mexer no admin. */
  .page-header.type2 .header-main .pood-hdr__val,
  .page-header.type2 .header-main .pood-hdr__item:hover .pood-hdr__val { color: #FFFFFF; }
  .page-header.type2 .header-main .pood-hdr__rot { color: rgba(255,255,255,.6); }
  .page-header.type2 .header-main .pood-hdr__ico--zap,
  .page-header.type2 .header-main .pood-hdr__ico--conta {
    background: rgba(255,255,255,.12); color: #FFFFFF;
  }
  .page-header.type2 .header-main .pood-hdr__inicial { color: #FFFFFF; }
  /* compactacao: cada item vinha em DUAS linhas (rotulo pequeno + valor), o que
     custava 184px no WhatsApp e 192px na conta. Uma linha so devolve ~150px a
     busca, que e o maior elemento da faixa na Direcao A. */
  .page-header.type2 .header-main .pood-hdr { gap: 2px; }
  .page-header.type2 .header-main .pood-hdr__rot { display: none; }
  .page-header.type2 .header-main .pood-hdr__val { font-size: 12.5px; font-weight: 600; }
  .page-header.type2 .header-main .pood-hdr__item {
    gap: 8px; padding: 5px 10px 5px 5px;
  }
  .page-header.type2 .header-main .pood-hdr__ico { width: 30px; height: 30px; }
  .page-header.type2 .header-main .pood-hdr__ico svg { width: 16px; height: 16px; }
  .page-header.type2 .header-main .pood-hdr__item::before { background: #FFFFFF; }
  .page-header.type2 .header-main .pood-hdr__item:focus-visible { outline-color: #F65F44; }
  .page-header.type2 .header-main .header-contact a.wishlist {
    width: 34px; height: 34px; display: grid; place-items: center;
    color: #FFFFFF; font-size: 19px; margin: 0;
  }
  .page-header.type2 .header-main .minicart-wrapper { margin: 0; }
  .page-header.type2 .header-main .minicart-wrapper .action.showcart,
  .page-header.type2 .header-main .minicart-wrapper .action.showcart:before,
  .page-header.type2 .header-main .minicart-wrapper .action.showcart .counter-number { color: #FFFFFF; }
  .page-header.type2 .header-main .minicart-wrapper .counter.qty {
    background: #F65F44; color: #17171A; font-weight: 700;
  }

  /* --- C) faixa de menu --- */
  .page-header.type2 .nav-sections {
    background: #26262B; border-top: 0; border-bottom: 0; box-shadow: none;
  }
  .page-header.type2 .navigation:not(.side-megamenu) > ul { gap: 0; }
  .page-header.type2 .navigation li.level0 > .level-top {
    height: 48px; padding: 0 16px; font-size: 13px; font-weight: 500;
    letter-spacing: .005em; text-transform: none; color: rgba(255,255,255,.86);
    border-bottom: 1px solid transparent;
  }
  .page-header.type2 .navigation li.level0:hover > .level-top,
  .page-header.type2 .navigation li.level0 > .level-top:hover,
  .page-header.type2 .navigation li.level0 > .level-top.ui-state-active {
    color: #FFFFFF; background: transparent; border-bottom-color: #F65F44;
  }
  /* o M3 desenha um filete animado com ::after; a borda acima ja cumpre isso */
  .page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top::after { display: none; }
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 991px) {

  .page-header.type2 .main-panel-top {
    background: #F2F2F4; border-bottom: 1px solid #D8D8DC;
  }
  .page-header.type2 .header-main { background: #17171A; }
  .page-header.type2 .header-main .logo img { height: 26px; width: auto; }
  .page-header.type2 .header-main,
  .page-header.type2 .header-main a,
  .page-header.type2 .header-main .action.nav-toggle,
  .page-header.type2 .header-main .action.nav-toggle:before { color: #FFFFFF; }
  .page-header.type2 .header-main .search-toggle-icon,
  .page-header.type2 .header-main .search-toggle-icon i { color: #FFFFFF; }
  .page-header.type2 .header-main .minicart-wrapper .action.showcart,
  .page-header.type2 .header-main .minicart-wrapper .action.showcart:before { color: #FFFFFF; }
  .page-header.type2 .header-main .minicart-wrapper .counter.qty {
    background: #F65F44; color: #17171A; font-weight: 700;
  }

  /* a gaveta */
  .nav-open .nav-sections { background: #17171A; box-shadow: none; }
  .nav-sections .section-item-title { background: #26262B; border: 0; }
  .nav-sections .section-item-title > a { color: rgba(255,255,255,.86); }
  .nav-sections .section-item-title.active > a { color: #FFFFFF; }
  .nav-sections-item-content { background: #17171A; }

  .page-header.type2 .navigation li.level0 > .level-top {
    height: 50px; display: flex; align-items: center;
    padding: 0 18px; font-size: 13px; font-weight: 500; text-transform: none;
    letter-spacing: .01em; color: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(255,255,255,.08); background: transparent;
  }
  .page-header.type2 .navigation li.level1 > a {
    min-height: 44px; display: flex; align-items: center;
    padding: 0 18px 0 32px; font-size: 12px; font-weight: 400;
    text-transform: none; color: rgba(255,255,255,.66);
    background: rgba(0,0,0,.28); border: 0;
  }
  /* o botao de abrir subnivel e um div VAZIO: todo o desenho e por pseudo */
  .page-header.type2 .navigation .open-children-toggle {
    width: 50px; height: 50px; color: rgba(255,255,255,.45);
  }

  /* a miniatura de 400px nao cabe numa gaveta de 380px; o Porto ja a esconde
     em <=991px. Aqui ela volta, pequena, como identificacao da linha. */
  .page-header.type2 .navigation li.level0 .menu-thumb-img {
    display: block; position: absolute; left: 18px; top: 50%;
    transform: translateY(-50%); width: 36px; height: 36px; margin: 0;
    opacity: 1; pointer-events: none; z-index: 1;
  }
  .page-header.type2 .navigation li.level0 .menu-thumb-img img {
    width: 36px; height: 36px; object-fit: contain; display: block;
  }
  .page-header.type2 .navigation li.level0 .menu-thumb-img .pood-thumb-nome,
  .page-header.type2 .navigation li.level0 .menu-thumb-img .pood-thumb-cta { display: none; }
  .page-header.type2 .navigation li.level1 { position: relative; }
  .page-header.type2 .navigation li.level1 > a { padding-left: 66px; }
}

/* ---------------- AUTOCOMPLETE DO MAGEPLAZA (modulo do Porto) ----------------
   Fora de media query: vale nos dois breakpoints.
   A biblioteca (devbridge) mede a altura do painel e o vira PARA CIMA quando
   ele nao cabe abaixo do campo. Com 9 produtos, imagem e preco, ele passa de
   1.300px e abre em y NEGATIVO — fora da tela. Limitar a altura devolve o
   painel para baixo do campo. Isto e estilo: a busca continua sendo a do
   modulo, com produto, foto e preco. */
.autocomplete-suggestions {
  /* !important porque a biblioteca escreve a altura como atributo style */
  max-height: 62vh !important; overflow-y: auto !important; overflow-x: hidden;
  background: #FFFFFF; border: 1px solid #D8D8DC; border-radius: 4px;
  box-shadow: none;
}
.autocomplete-suggestions .autocomplete-suggestion { border-bottom: 1px solid #F2F2F4; }
.autocomplete-suggestions .autocomplete-suggestion:last-child { border-bottom: 0; }

/* O painel do Mageplaza nao recebe "top" inline — ele so ganha position,
   max-height, z-index e width. A posicao vertical vinha do posicionamento
   ESTATICO dentro do .control. Ao transformar o .control em flex com
   align-items:center, o painel absoluto passou a ser centralizado e, com
   565px de altura num controle de 46px, abria em y NEGATIVO.
   Ancorar explicitamente resolve — e a biblioteca segue com orientation:bottom. */
.page-header.type2 .search-area .field.search .control > .autocomplete-suggestions {
  top: calc(100% + 8px); left: 0; right: auto; bottom: auto;
  width: 100% !important;
}

/* arredondamento das pontas sem recortar o painel do autocomplete */
@media (min-width: 992px) {
  .page-header.type2 .search-area .minisearch .actions button {
    border-top-right-radius: 999px; border-bottom-right-radius: 999px;
  }
}

/* ============ ESTRUTURA DO BLOCO CMS DO CABECALHO ============
   O bloco porto_custom_block_for_header_18 perdeu o <style> proprio (tinha
   #f26100 e #128c3e). Todo o desenho dele vive aqui agora. */
.page-header.type2 .header-main .pood-hdr {
  display: flex; align-items: center; gap: 4px;
}
.page-header.type2 .header-main .pood-hdr__item {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  text-decoration: none !important; color: inherit !important;
  position: relative; transition: background-color .18s ease;
}
.page-header.type2 .header-main a.pood-hdr__item:hover { background: rgba(255,255,255,.08); }
.page-header.type2 .header-main .pood-hdr__ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #FFFFFF;
}
.page-header.type2 .header-main .pood-hdr__ico svg { display: block; }
.page-header.type2 .header-main .pood-hdr__txt {
  display: flex; flex-direction: column; line-height: 1.2;
}
.page-header.type2 .header-main .pood-hdr__val {
  font-size: 12.5px; font-weight: 600; color: #FFFFFF; white-space: nowrap;
}
.page-header.type2 .header-main .pood-hdr__sub {
  font-size: 10.5px; font-weight: 400; color: rgba(255,255,255,.6); white-space: nowrap;
}
.page-header.type2 .header-main .pood-hdr__retirada .pood-hdr__ico { background: transparent; color: #F65F44; }
.page-header.type2 .header-main .pood-hdr__inicial {
  font-size: 14px; font-weight: 700; line-height: 1; text-transform: uppercase; color: #FFFFFF;
}
@media (prefers-reduced-motion: reduce) {
  .page-header.type2 .header-main .pood-hdr__item { transition: none; }
}

/* ============ MENU: COR E TIPOGRAFIA ============
   O bloco POOD-MENU-M3 usa ".navigation:not(.side-megamenu) .level0 .level-top",
   que vale (0,6,0) — mais que a minha regra anterior, (0,4,1). Ele vencia, e por
   isso a fonte e a cor do menu continuavam as dele. Aqui a especificidade e
   igualada com a mesma forma de seletor. */
@media (min-width: 992px) {
  .page-header.type2 .nav-sections,
  .page-header.type2 .sections.nav-sections {
    background: #26262B; border-top: 0; border-bottom: 0; box-shadow: none;
  }
  .page-header.type2 .navigation:not(.side-megamenu) li.level0 > .level-top,
  .page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top {
    height: 48px; padding: 0 16px;
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 13px; font-weight: 500; letter-spacing: .005em;
    text-transform: none; color: rgba(255,255,255,.86);
    background: transparent; border-bottom: 1px solid transparent;
  }
  .page-header.type2 .navigation:not(.side-megamenu) li.level0:hover > .level-top,
  .page-header.type2 .navigation:not(.side-megamenu) li.level0 > .level-top:hover,
  .page-header.type2 .navigation:not(.side-megamenu) li.level0 > .level-top.ui-state-active,
  .page-header.type2 .navigation:not(.side-megamenu) li.level0.active > .level-top {
    color: #FFFFFF; background: transparent; border-bottom-color: #F65F44;
  }
  .page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top::after,
  .page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top::before { display: none; }
}

/* O <ul> do menu recebe fundo BRANCO de porto_design/header/header_menu_bgcolor,
   emitido em design_default.css. Ele pintava por cima do #26262B do .nav-sections
   e o texto branco sumia. Medido em 12/08/2026: ul bg=rgb(255,255,255).
   Aqui o <ul> fica transparente e quem pinta e a faixa. */
@media (min-width: 992px) {
  .page-header.type2 .navigation:not(.side-megamenu) > ul,
  .page-header.type2 .navigation:not(.side-megamenu) > ul > li.level0 {
    background: transparent;
  }
}
@media (max-width: 991px) {
  .page-header.type2 .navigation > ul,
  .page-header.type2 .navigation ul.ui-menu { background: transparent; }
}

/* ============ MOBILE: COR DO TEXTO DA GAVETA ============
   Mesma armadilha do desktop. O texto saia rgb(51,51,51) sobre o fundo
   #17171A — cinza escuro sobre escuro. As regras que venciam vinham do
   design_default.css (header_menu_color) e do bloco M3, ambas com
   ".navigation:not(.side-megamenu)". Aqui a forma do seletor e igualada. */
@media (max-width: 991px) {
  .page-header.type2 .navigation:not(.side-megamenu) li.level0 > .level-top,
  .page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top {
    color: rgba(255,255,255,.9) !important; background: transparent !important;
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: .01em;
  }
  .page-header.type2 .navigation:not(.side-megamenu) li.level0:hover > .level-top,
  .page-header.type2 .navigation:not(.side-megamenu) li.level0 > .level-top.ui-state-active {
    color: #FFFFFF !important; background: rgba(255,255,255,.06) !important;
  }
  .page-header.type2 .navigation:not(.side-megamenu) li.level1 > a,
  .page-header.type2 .navigation:not(.side-megamenu) .level1 > a {
    color: rgba(255,255,255,.7) !important; background: rgba(0,0,0,.28) !important;
    font-size: 12px; font-weight: 400; text-transform: none;
  }
  .page-header.type2 .navigation:not(.side-megamenu) li.level1 > a:hover { color: #FFFFFF !important; }
  .page-header.type2 .navigation:not(.side-megamenu) .submenu,
  .page-header.type2 .navigation:not(.side-megamenu) .subchildmenu { background: transparent; }

  /* a faixa utilitaria quebrava em duas linhas no celular: o texto numa e os
     icones sociais noutra. Uma linha so, com os sociais ao lado. */
  .page-header.type2 .main-panel-top .panel.wrapper {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: nowrap; gap: 8px; min-height: 32px;
  }
  .page-header.type2 .main-panel-top .header-left {
    flex: 1 1 auto; min-width: 0; font-size: 10.5px; color: #17171A;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .page-header.type2 .main-panel-top .header-right { flex: 0 0 auto; gap: 10px; }
  .page-header.type2 .main-panel-top .panel.header,
  .page-header.type2 .main-panel-top .top-links-icon,
  .page-header.type2 .main-panel-top .header.links { display: none; }
  .page-header.type2 .main-panel-top .share-links { display: flex; gap: 12px; }

  /* faixa principal mais baixa, como no card */
  .page-header.type2 .header-main .header-row { min-height: 56px; }
/* as abas "Menu" e "Conta" da gaveta: a ativa vinha com o vermelho do tema.
     !important pelo mesmo motivo das cores do menu — o M3 usa !important aqui. */
  .nav-sections .section-item-title,
  .nav-sections .nav-sections-item-title {
    background: #26262B !important; border: 0 !important; box-shadow: none !important;
  }
  .nav-sections .section-item-title.active,
  .nav-sections .nav-sections-item-title.active {
    background: #17171A !important;
  }
  .nav-sections .section-item-title > a,
  .nav-sections .nav-sections-item-title > a,
  .nav-sections .nav-sections-item-title strong {
    color: rgba(255,255,255,.68) !important; font-size: 12.5px; font-weight: 600;
    text-transform: none; letter-spacing: .02em;
  }
  .nav-sections .section-item-title.active > a,
  .nav-sections .nav-sections-item-title.active > a,
  .nav-sections .nav-sections-item-title.active strong {
    color: #FFFFFF !important;
  }
}
/* ============ CABECALHO FIXO AO ROLAR ============
   O Porto, no sticky >=992px, faz duas mutacoes no DOM (lidas no head.phtml):
     1. detach() do .minicart-wrapper de .header-main e append() dentro da
        .page-header .navigation;
     2. prepend de uma .sticky-logo na .navigation.
   Como a .navigation nao e flex e o <ul> ocupa a largura toda, o carrinho
   caia POR CIMA dos itens do menu, e a sticky-logo entrava com a arte
   original, escura, sobre a barra escura.
   Aqui a .navigation vira uma linha flex: logo, menu e carrinho lado a lado. */
 (min-width: 992px) {
  .page-header.type2 .navigation:not(.side-megamenu) {
    display: flex; align-items: center;
  }
  .page-header.type2 .navigation:not(.side-megamenu) > ul {
    flex: 1 1 auto; min-width: 0;
  }
  .page-header.type2 .navigation .sticky-logo {
    order: -1; flex: 0 0 auto; display: flex; align-items: center;
    padding-right: 22px; margin: 0;
  }
  .page-header.type2 .navigation .sticky-logo img {
    filter: brightness(0) invert(1); height: 24px; width: auto; display: block;
  }
  .page-header.type2 .navigation > .minicart-wrapper {
    flex: 0 0 auto; margin: 0 0 0 18px; position: static;
  }
  .page-header.type2 .navigation > .minicart-wrapper .action.showcart,
  .page-header.type2 .navigation > .minicart-wrapper .action.showcart:before { color: #FFFFFF; }
  .page-header.type2 .navigation > .minicart-wrapper .counter.qty {
    background: #F65F44; color: #17171A; font-weight: 700;
  }
  /* o marcador que o Porto deixa no lugar de origem nao pode ocupar espaco */
  .page-header.type2 .header-main .minicart-place { display: none; }
}
/* ===== POOD-CABECALHO fim ===== */