/* TAGG — overrides WooCommerce para replicar Magento */

/* -------------------------------------------------------
   Layout produto individual: info-main (direita) + media (esquerda)
   Replica o float layout do Magento styles-l.css
------------------------------------------------------- */
.single-product .column.main::after {
    content: '';
    display: table;
    clear: both;
}
/* page-layout-1column: info 40%, media 57% (igual Magento styles-l.css) */
.single-product .product-info-main {
    float: right;
    width: 40%;
}
.single-product .product.media {
    float: left;
    width: 57%;
    margin-bottom: 25px;
}
.single-product .product.info.detailed {
    clear: both;
    width: 100%;
}
@media (max-width: 768px) {
    .single-product .product-info-main,
    .single-product .product.media {
        float: none;
        width: 100%;
    }
}

/* -------------------------------------------------------
   Breadcrumb Magento style
------------------------------------------------------- */
.woocommerce-breadcrumb {
    font-size: 1.2rem;
    color: #757575;
    margin-bottom: 15px;
}
.woocommerce-breadcrumb a { color: #757575; text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: #c30d23; }

/* Remover elementos padrão WooCommerce que não existem no Magento */
.woocommerce-notices-wrapper,
.woocommerce-breadcrumb + .woocommerce-result-count,
.added_to_cart,
.cart-contents,
.woocommerce-cart-form,
.wc-proceed-to-checkout,
.woocommerce-account-fields,
.woocommerce-order,
.woocommerce-MyAccount-navigation,
.woocommerce-form-login,
.woocommerce-form-register,
button.single_add_to_cart_button,
.product_meta .sku_wrapper { display: none !important; }

/* Forçar largura 240px no container de imagem do produto */
.product-image-container { display: inline-block; }
.product-image-wrapper { display: block; position: relative; }
.product-image-wrapper img.product-image-photo {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}

/* Grid de produtos — deixar o CSS do Magento (inline-block + font-size:0 + calc) controlar */
ol.product-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Grade de produtos — flexbox 4 colunas, sem conflito nth-child */
ol.products-grid.product-items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5% !important;
    font-size: 0;
    letter-spacing: 0;
}
ol.products-grid.product-items li.product-item {
    display: block !important;
    width: calc((100% - 4.5%) / 4) !important;
    margin: 0 !important;
    font-size: 1.4rem;
    letter-spacing: normal;
    vertical-align: top;
}
@media (max-width: 768px) {
    ol.products-grid.product-items li.product-item {
        width: calc((100% - 1.5%) / 2) !important;
    }
}

/* Card produto */
li.item.product.product-item { position: relative; }
.product-item-info,
.page-products .product-item-info { width: 100% !important; }

/* Botão "Preço Sob Consulta" — outline, estilo produção */
button.action.consult,
a.action.consult {
    display: inline-block;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 10px 20px;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    border-radius: 2px;
}
button.action.consult:hover,
a.action.consult:hover { border-color: #999; background: #f5f5f5; }
.notify-link { margin-top: 8px; font-size: 1.2rem; }
.notify-link a { color: #1979c3; text-decoration: none; }
.notify-link a:hover { text-decoration: underline; }

/* Navegação mobile */
@media (max-width: 768px) {
    .nav-sections {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 80%; height: 100%;
        background: #fff;
        z-index: 9999;
        overflow-y: auto;
    }
    .nav-open .nav-sections { display: block; }
    .action.nav-toggle {
        display: block !important;
        cursor: pointer;
    }
}
@media (min-width: 769px) {
    .action.nav-toggle { display: none !important; }
}

/* Breadcrumb WooCommerce → estilo Magento */
.woocommerce-breadcrumb {
    font-size: 12px;
    color: #757575;
    margin-bottom: 15px;
}
.woocommerce-breadcrumb a { color: #757575; }
.woocommerce-breadcrumb a:hover { color: #c30d23; }

/* Página de produto — imagem principal */
.gallery-placeholder { margin-bottom: 20px; }
.gallery-placeholder__image { max-width: 100%; height: auto; }

/* -------------------------------------------------------
   Tabs da página de produto
------------------------------------------------------- */
.product-tabs-box {
    margin-top: 30px;
    width: 100%;
    box-sizing: border-box;
    clear: both;
}
.tabs-nav {
    display: flex;
    align-items: flex-end;
    background: transparent;
    margin: 0;
    padding: 0;
    width: fit-content;
}
.tabs-nav .tab-btn {
    display: flex;
    align-items: center;
    padding: 10px 22px;
    font-size: 1.4rem;
    color: #666;
    background: #f0f0f0;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: none;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    line-height: 1.2;
}
.tabs-nav .tab-btn:first-child {
    border-left: 1px solid #ccc;
}
/* Aba ativa: sem borda inferior para fundir com o conteúdo */
.tabs-nav .tab-btn.active {
    background: #fff;
    color: #333;
    font-weight: 600;
    border-bottom: none;
    margin-bottom: -1px;
    padding-bottom: 11px;
    position: relative;
    z-index: 1;
}
.tabs-nav .tab-btn:not(.active):hover {
    background: #fafafa;
    color: #333;
}
/* Filler ocupa o espaço restante — só fundo, sem borda própria */
.tabs-nav-filler {
    flex: 1 1 auto;
    background: #f0f0f0;
}
/* Painéis de conteúdo — borda completa; aba ativa "quebra" a borda de topo com branco */
.tabs-content {
    padding: 20px;
    background: #fff;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Tabela de especificações */
table.additional-attributes { width: 100%; border-collapse: collapse; font-size: 13px; }
table.additional-attributes th,
table.additional-attributes td { padding: 8px 12px; border-bottom: 1px solid #eee; text-align: left; }
table.additional-attributes th { width: 200px; color: #757575; font-weight: normal; }

/* Breadcrumb categoria — separador já vem do magento-m.css via luma-icons ::after */
.breadcrumbs .items { list-style: none; padding: 0; margin: 0 0 15px; font-size: 1.2rem; color: #757575; }
.breadcrumbs .items li { display: inline; }
.breadcrumbs .items a { color: #1979c3; text-decoration: none; }
.breadcrumbs .items a:hover { text-decoration: underline; }

/* Título da categoria */
.category-title-wrapper { margin-bottom: 20px; }
.category-title-wrapper .page-title { font-size: 4rem; font-weight: 300; line-height: 1.1; color: #333; text-transform: uppercase; }

/* Toolbar de catálogo */
.toolbar-products { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; margin-bottom: 20px !important; font-size: 1.2rem !important; position: static !important; width: 100% !important; box-sizing: border-box !important; }
.toolbar-left-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.toolbar-sorter.sorter,
.page-products .toolbar-sorter.sorter { position: static !important; display: flex !important; align-items: center !important; gap: 5px !important; width: auto !important; float: none !important; z-index: auto !important; top: auto !important; right: auto !important; margin-left: auto !important; flex-shrink: 0; }
.sorter-label { font-size: 1.2rem; color: #707070; white-space: nowrap; margin: 0; }
.modes-label { font-size: 1.2rem; color: #707070; margin: 0 5px 0 0; font-weight: normal; }
.sorter-action { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; }
.sorter-action::before { content: '↑'; font-size: 1.4rem; color: #7d7d7d; }
.sorter-action.sort-desc::before { content: '↓'; }
.filter-subtitle { font-size: 1.3rem; color: #757575; margin: 0 0 10px; padding: 0; display: block; }

/* Ícones grid/lista — ficam no toolbar (ao lado do sorter), à direita */
.modes { display: flex; gap: 4px; margin-left: 8px; }
.modes a { display: inline-block; width: 20px; height: 20px; border: 1px solid #ccc; text-indent: -9999px; overflow: hidden; position: relative; flex-shrink: 0; }
.modes a::before { content: ''; display: block; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; }
.modes .mode-grid::before { background: linear-gradient(to right, #999 40%, transparent 40%) 0 0/50% 40% no-repeat, linear-gradient(to right, #999 40%, transparent 40%) 50% 0/50% 40% no-repeat, linear-gradient(to right, #999 40%, transparent 40%) 0 55%/50% 40% no-repeat, linear-gradient(to right, #999 40%, transparent 40%) 50% 55%/50% 40% no-repeat; }
.modes .mode-list::before { background: repeating-linear-gradient(to bottom, #999 0, #999 3px, transparent 3px, transparent 6px); }
.modes a.active, .modes a:hover { border-color: #333; }
.modes a.active::before { filter: brightness(0.3); }

/* Sidebar de filtros — override magento-m.css que coloca .filter-title strong com border/position:absolute */
.filter-title {
    border-bottom: 1px solid #c1c1c1;
    margin-bottom: 10px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: static !important;
}
.filter-title strong {
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: static !important;
    padding: 0 !important;
    background: transparent !important;
    line-height: inherit !important;
}
.filter-options-item { border-bottom: 1px solid #e8e8e8; margin-bottom: 0; }
/* filter-options-title: override magento-m.css (padding/display/z-index) */
.filter-options-title {
    padding: 10px 30px 10px 0 !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    display: block !important;
    position: relative !important;
}
.filter-options-content { padding: 0 0 10px !important; }
.filter-options-content .items { list-style: none; padding: 0; margin: 0; }
.filter-options-content .items li { padding: 3px 0; font-size: 1.3rem; }
.filter-options-content .items a { color: #333; font-weight: 500; text-decoration: none; display: flex; align-items: baseline; gap: 4px; }
.filter-options-content .items a:hover { color: #006bb4; }
.filter-options-content .count { color: #555; font-size: 1.2rem; font-weight: 400; }

/* Modo lista de produtos */
.products-list.product-items { display: block !important; }
.products-list .product-item { display: flex !important; width: 100% !important; border-bottom: 1px solid #eee; padding: 15px 0; align-items: center; gap: 20px; }
.products-list .product-item .product-item-photo { flex: 0 0 120px; }
.products-list .product-item .product-item-details { flex: 1; }

/* Paginação WooCommerce */
.woocommerce-pagination { margin-top: 30px; text-align: center; }
.woocommerce-pagination ul { list-style: none; display: inline-flex; gap: 5px; padding: 0; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: block;
    padding: 6px 12px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    font-size: 13px;
}
.woocommerce-pagination ul li .current,
.woocommerce-pagination ul li a:hover { background: #152e46; color: #fff; border-color: #152e46; }

/* Layout colunas — replica Magento (display:block + float, NÃO flexbox) */
.columns { display: block; }
.columns::after { content: ''; display: table; clear: both; }
.page-layout-1column .column.main { width: 100%; float: none; }
.page-layout-2columns-left .column.main { width: 79.16666667%; float: right; }
.page-layout-2columns-left .sidebar-main { width: 20.83333333%; float: left; padding-right: 2%; box-sizing: border-box; }
@media (max-width: 768px) {
    .page-layout-2columns-left .column.main,
    .page-layout-2columns-left .sidebar-main { float: none; width: 100%; padding-right: 0; }
}

/* -------------------------------------------------------
   Dropdown menu hover — replica Magento styles-l.css
   Walker gera: li.level0.parent > a.level-top + ul.submenu
------------------------------------------------------- */
@media (min-width: 769px) {
    .navigation .level0 .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 9999;
        background: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 5px 5px rgba(0,0,0,.19);
        min-width: 230px;
        padding: 15px 0;
        margin: 0 !important;
    }
    .navigation .level0.parent:hover > .submenu {
        display: block !important;
        overflow: visible !important;
    }
    .navigation .level0.parent { position: relative; }
    .navigation .level0 .submenu li { margin: 0; }
    .navigation .level0 .submenu a {
        display: block;
        padding: 8px 20px;
        color: #575757;
        text-decoration: none;
    }
    .navigation .level0 .submenu a:hover {
        background: #e8e8e8;
        color: #333;
    }
    .navigation .level0 .submenu::before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 4px;
        left: 0;
        top: -4px;
    }
}

/* product-item-inner: oculto por padrão em todos os tamanhos */
.product-item-inner { display: none; }

/* -------------------------------------------------------
   Hover dos cards de produto — replica Magento styles-m.css linhas 14834-14886
   .product-item-inner aparece no hover no desktop
------------------------------------------------------- */
@media (min-width: 769px) {
    /* Ocultar o inner quando NÃO há hover (visually hidden) */
    .products-grid .product-item-info:not(:hover):not(.active) .product-item-inner {
        border: 0;
        clip: rect(0,0,0,0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    /* No hover: expandir o card com shadow */
    .products-grid .product-item-info:hover,
    .products-grid .product-item-info.active {
        background: #fff;
        box-shadow: 3px 4px 4px 0 rgba(0,0,0,.3);
        border: 1px solid #bbb;
        margin: -10px;
        padding: 9px;
        position: relative;
        z-index: 2;
    }
    /* Mostrar o inner no hover */
    .products-grid .product-item-info:hover .product-item-inner,
    .products-grid .product-item-info.active .product-item-inner {
        display: block;
    }
    /* Inner: aba flutuante abaixo do card */
    .products-grid .product-item-inner {
        background: #fff;
        box-shadow: 3px 4px 4px 0 rgba(0,0,0,.3);
        border: 1px solid #bbb;
        border-top: none;
        left: 0;
        margin: 10px 0 0 -1px;
        padding: 0 9px 9px;
        position: absolute;
        right: -1px;
        z-index: 2;
    }
    /* Linha branca que "conecta" o card com o inner (esconde a borda top do inner) */
    .page-products .products-grid .product-item-inner:before {
        background: #fff;
        content: '';
        height: 3px;
        left: 0;
        position: absolute;
        top: -2px;
        width: 100%;
        z-index: 1;
    }
    .product-item-actions { display: block; }
    .products-grid .product-item-actions { margin: -10px 0 10px; }
    .page-products .product-item-actions { position: relative; z-index: 1; }
}

/* -------------------------------------------------------
   Header: campo de busca e layout desktop
   O Magento tem block-search float:right dentro do header content
------------------------------------------------------- */
@media (min-width: 769px) {
    .header.content {
        display: flex;
        align-items: center;
        min-height: 80px;
        margin-bottom: 20px;
    }
    .header.content .logo {
        flex: 1;
        margin: 0 20px 0 0;
    }
    .header.content .block-search {
        flex: 0 0 360px;
        padding-left: 0;
        margin-left: auto;
    }
}
.block-search .form.minisearch { display: flex; position: relative; }
.block-search .field.search { flex: 1; }
.block-search .control { position: relative; }
.block-search input.input-text {
    width: 100%;
    padding: 8px 40px 8px 12px;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-size: 14px;
    height: 40px;
    box-sizing: border-box;
}
.block-search .actions { position: absolute; right: 0; top: 0; }
.block-search button.action.search {
    background: none;
    border: none;
    cursor: pointer;
    height: 40px;
    width: 40px;
    padding: 0;
    color: #757575;
    font-size: 16px;
}
.block-search button.action.search span {
    border: 0; clip: rect(0,0,0,0); height: 1px;
    margin: -1px; overflow: hidden; padding: 0;
    position: absolute; width: 1px;
}
.block-search button.action.search::before {
    content: '\e615';
    font-family: 'luma-icons';
    font-size: 22px;
    line-height: 40px;
    display: block;
}
/* No mobile esconder busca */
@media (max-width: 768px) {
    .block-search { display: none; }
}

/* Toolbar mobile */
@media (max-width: 768px) {
    .toolbar-products {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .toolbar-left-group {
        flex: 1 1 100%;
        justify-content: space-between;
    }
    .toolbar-sorter.sorter,
    .page-products .toolbar-sorter.sorter {
        flex: 1 1 100%;
        margin-left: 0 !important;
        justify-content: flex-end;
    }
}

/* -------------------------------------------------------
   Copyright Magento: faixa preta na base
------------------------------------------------------- */
small.copyright {
    background-color: #000;
    color: #fff;
    box-sizing: border-box;
    display: block;
    padding: 10px;
    text-align: center;
    font-size: 1.2rem;
    width: 100%;
}

/* -------------------------------------------------------
   Footer: remover classe legada que o agente anterior adicionou
------------------------------------------------------- */
.footer-copyright { display: none; }

/* Banner hero fullwidth */
#mestremage-bannerslider-block-before-content-1 { width: 100%; margin-bottom: 20px; }
#banner-slider-carousel { position: relative; }

/* =================================================================
   CORREÇÕES TIPOGRAFIA, BOTÕES, BREADCRUMB, TOOLBAR
   Baseado na análise do styles-m.css e styles-l.css do Magento
================================================================= */

/* --- Garantir base rem = 10px (62.5% de 16px) ---
   O magento-m.css já define isso, mas reforçamos com !important
   para evitar sobrescrita por qualquer CSS inline do WordPress  */
html { font-size: 62.5% !important; }
body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 1.4rem !important;
    color: #333333 !important;
    font-weight: 400 !important;
    line-height: 1.42857143 !important;
}

/* --- Headings --- */
h1 { font-size: 2.6rem; font-weight: 300; line-height: 1.1; margin-top: 0; margin-bottom: 2rem; }
h2 { font-size: 2.6rem; font-weight: 300; line-height: 1.1; margin-top: 0; margin-bottom: 2rem; }
h3 { font-size: 1.8rem; font-weight: 300; line-height: 1.1; }

/* --- Page title --- */
h1.page-title { font-size: 2.6rem; font-weight: 300; margin: 0 0 20px; }
.page-title-wrapper { margin-bottom: 20px; }

/* --- Links --- */
a { color: #1979c3; text-decoration: none; }
a:hover { color: #006bb4; text-decoration: underline; }
a:visited { color: #1979c3; }

/* --- Breadcrumb: WooCommerce gera nav.woocommerce-breadcrumb, Magento usa div.breadcrumbs > ul.items
   Replicamos o estilo do Magento no seletor do WooCommerce                                        --- */
.woocommerce-breadcrumb {
    font-size: 1.2rem !important;
    color: #707070 !important;
    margin: 0 0 15px !important;
    padding: 0;
    display: block;
}
.woocommerce-breadcrumb a {
    color: #006bb4 !important;
    text-decoration: none !important;
}
.woocommerce-breadcrumb a:hover { text-decoration: underline !important; }
/* O WooCommerce usa " / " como separador — já correto por padrão */

/* --- Botão primário — cor correta do Magento (#1979c3), não #152e46 --- */
.action.primary,
button.action.primary,
a.action.primary {
    background: #1979c3 !important;
    border: 1px solid #1979c3 !important;
    color: #fff !important;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.4rem !important;
    padding: 7px 15px !important;
    cursor: pointer !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    border-radius: 0 !important;
}
.action.primary:hover,
button.action.primary:hover,
a.action.primary:hover {
    background: #006bb4 !important;
    border-color: #006bb4 !important;
}

/* Botão "Visualizar" (consult) — mesmo estilo do primário */
button.action.consult.primary,
a.action.consult.primary {
    background: #1979c3 !important;
    border: 1px solid #1979c3 !important;
    color: #fff !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    padding: 7px 15px !important;
    border-radius: 0 !important;
}
button.action.consult.primary:hover,
a.action.consult.primary:hover {
    background: #006bb4 !important;
    border-color: #006bb4 !important;
}

/* Toolbar amount */
.toolbar-products .toolbar-amount {
    display: block !important;
    position: static !important;
    color: #707070 !important;
    font-size: 1.2rem !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Segunda toolbar (bottom) — mostra paginação, esconde amount e sorter */
.toolbar-products.toolbar-bottom .toolbar-left-group,
.toolbar-products.toolbar-bottom .toolbar-sorter { display: none !important; }
.toolbar-products.toolbar-bottom .woocommerce-pagination { display: block !important; }
/* Paginação inline na toolbar superior: compacta, sem ul list-style */
.toolbar-left-group .woocommerce-pagination { display: inline-flex; align-items: center; margin: 0; }
.toolbar-left-group .woocommerce-pagination ul.page-numbers { display: inline-flex !important; gap: 1px; }
.toolbar-left-group .woocommerce-pagination ul.page-numbers > li > a,
.toolbar-left-group .woocommerce-pagination ul.page-numbers > li > span { min-width: 22px; height: 22px; font-size: 1.1rem; padding: 0 3px; }

/* --- Select de ordenação --- */
.sorter-options,
select.orderby {
    background-color: #fff;
    box-shadow: inset 0 1px 0 0 #fff, inset 0 -1px 0 0 rgba(204,204,204,.3);
    border-radius: 3px;
    border: 1px solid #ccc;
    padding: 2px 6px;
    font-size: 1.2rem;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    height: 28px;
    cursor: pointer;
    max-width: 160px;
}
.woocommerce-ordering { display: inline-flex !important; align-items: center !important; }
.woocommerce-ordering select { margin: 0 !important; }
.woocommerce-ordering label,
.sorter label {
    font-size: 1.2rem;
    color: #707070;
}

/* --- WooCommerce result count --- */
.woocommerce-result-count {
    font-size: 1.2rem !important;
    color: #707070 !important;
    margin: 0 !important;
    padding: 7px 0 !important;
}

/* --- Paginação: estilo Magento --- */
.woocommerce-pagination {
    margin-top: 25px;
    font-size: 1.2rem;
    text-align: center;
}
.woocommerce-pagination ul.page-numbers {
    list-style: none !important;
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-pagination ul.page-numbers > li {
    display: inline-flex !important;
}
.woocommerce-pagination ul.page-numbers > li > a,
.woocommerce-pagination ul.page-numbers > li > span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    min-width: 28px;
    height: 28px;
    border: 1px solid #d1d1d1;
    color: #1979c3;
    text-decoration: none;
}
.woocommerce-pagination ul.page-numbers > li > span.current,
.woocommerce-pagination ul.page-numbers > li > a:hover {
    background: #1979c3;
    border-color: #1979c3;
    color: #fff;
}

/* --- Garantir que .columns não usa flexbox (Magento usa block+float) --- */
.columns { display: block !important; }

/* --- page-main max-width e padding correto --- */
.page-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px 30px;
    box-sizing: border-box;
}

/* --- Remover duplo #primary wrapper gerado pelo WP/WooCommerce --- */
#primary, #main { display: contents; }

/* -------------------------------------------------------
   Produto individual — correções adicionais
------------------------------------------------------- */

/* Galeria principal: imagem ocupa toda a área do .product.media */
.single-product .product.media .gallery-placeholder { width: 100%; }
.single-product .product.media .gallery-placeholder__image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* Título do produto */
.product-info-main .page-title { font-size: 4.2rem; font-weight: 300; line-height: 1.1; margin-bottom: 15px; }

/* SKU */
.product-info-main .product.attribute.sku { margin-bottom: 10px; font-size: 1.4rem; color: #575757; }
.product-info-main .product.attribute.sku .type { font-weight: normal; margin-right: 5px; }
.product-info-main .product.attribute.sku .type::after { content: '#:'; }

/* Botão Preço Sob Consulta — outline, estilo produção */
.prd-button {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-size: 1.4rem;
    font-weight: normal;
    margin-top: 20px;
    padding: 10px 20px;
    text-transform: none;
}
.prd-button:hover { border-color: #999; background: #f5f5f5; }

/* Thumbnails acima da imagem principal */
.product-image-thumbs-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
/* Setas sobre a imagem principal */
.gallery-with-arrows {
    position: relative;
}
.gallery-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255,0.7);
    color: #888;
    border: none;
    cursor: pointer;
    font-size: 4rem;
    line-height: 1;
    width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s, background 0.15s, color 0.15s;
}
.gallery-with-arrows:hover .gallery-arrow { opacity: 1; }
.gallery-arrow:hover {
    background: rgba(255,255,255,0.95);
    color: #444;
}
.gallery-arrow-prev {
    left: 0;
    transform: scaleX(-1);
}
.gallery-arrow-next {
    right: 0;
}
.product-image-thumbs {
    display: flex;
    gap: 6px;
    overflow: hidden;
    flex: 1;
}
.product-image-thumbs .item.thumb {
    width: 60px;
    height: 60px;
    border: 2px solid #ddd;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}
.product-image-thumbs .item.thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-image-thumbs .item.thumb.active,
.product-image-thumbs .item.thumb:hover {
    border-color: #e07b00;
}

/* Breadcrumb simples na página de produto — estilo Magento */
.single-product .breadcrumbs .items {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    font-size: 1.2rem;
    color: #757575;
}
.single-product .breadcrumbs .items li { display: inline; }
.single-product .breadcrumbs .items li + li::before { content: ' > '; color: #757575; }
.single-product .breadcrumbs .items a { color: #1979c3; text-decoration: none; }
.single-product .breadcrumbs .items a:hover { text-decoration: underline; }

/* Product add form */
.product-add-form { clear: both; padding-top: 15px; }

/* Overview/short description */
.product-info-main .product.attribute.overview { margin: 20px 0; font-size: 1.4rem; }

/* Info price: borda inferior */
.product-info-main .product-info-price {
    border-bottom: 1px solid #c1c1c1;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

/* Breadcrumb na página de produto */
.single-product .woocommerce-breadcrumb { margin-bottom: 20px; clear: both; display: block; }

/* -------------------------------------------------------
   Homepage: banner estático Ferragens
------------------------------------------------------- */
/* -------------------------------------------------------
   Banner Ferragens: painel preto (esq) + imagem (dir)
------------------------------------------------------- */
.tagg-banner-ferragens {
    margin: 10px 0 20px;
    display: block;
}
.tagg-banner-ferragens a {
    display: flex;
    align-items: stretch;
    text-decoration: none;
    background: #000;
    min-height: 220px;
}
.tagg-banner-left {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 35px;
    background: #000;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
}
.tagg-banner-title {
    font-size: 3.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: 2px;
}
.tagg-banner-subtitle {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6;
    color: #ccc;
    margin: 0 0 22px;
    text-transform: uppercase;
}
.tagg-banner-btn {
    display: inline-block;
    background: #00a4a6;
    color: #fff;
    padding: 12px 35px;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 25px;
    transition: background 0.2s;
}
.tagg-banner-ferragens a:hover .tagg-banner-btn {
    background: #007f80;
}
.tagg-banner-right {
    flex: 1;
    overflow: hidden;
}
.tagg-banner-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* -------------------------------------------------------
   Homepage: seções de produtos por categoria (widget-product-grid)
------------------------------------------------------- */
.block.widget.block-products-list {
    margin: 20px 0 30px;
    clear: both;
}
.block.widget.block-products-list .block-title {
    border-bottom: 1px solid #c1c1c1;
    margin-bottom: 15px;
    padding-bottom: 8px;
}
.block.widget.block-products-list .block-title strong {
    font-size: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
}
.block.widget.block-products-list .block-title a {
    color: #333;
    text-decoration: none;
}
.block.widget.block-products-list .block-title a:hover { color: #c30d23; }
.block-actions { margin-top: 10px; text-align: right; }
.block-actions a { color: #1979c3; font-size: 1.3rem; }

/* -------------------------------------------------------
   TOP BAR — layout, altura e alinhamento
------------------------------------------------------- */
.panel.wrapper {
    text-align: left !important;
}
/* Altura fina */
.panel.header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    line-height: 0.15 !important;
    font-size: 1.4rem !important;
    /* Limpar floats do magento-m.css e usar flex */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    /* Impede que pseudo-elements do clearfix quebrem o flex */
    overflow: visible !important;
}
.panel.header::before,
.panel.header::after {
    display: none !important;
}
/* SAC — esquerda */
.panel.header .widget { flex: 0 0 auto !important; float: none !important; }
.panel.header .widget.block-cms-link-inline,
.panel.header .widget.block-cms-link-inline a,
.panel.header .widget.block-cms-link-inline span {
    white-space: nowrap;
    color: #fff;
    font-size: 1.4rem;
    text-decoration: none;
}
/* "Entrar ou Criar conta" — direita */
.panel.header .header.links {
    float: none !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    font-size: 0; /* reset do font-size do magento-m */
}
.panel.header .header.links li {
    list-style: none;
    display: inline-block;
    font-size: 1.2rem;
    margin: 0;
}
.panel.header .header.links a { color: #fff; font-size: 1.4rem; text-decoration: none; }
.panel.header .header.links a:hover { text-decoration: underline; }

/* -------------------------------------------------------
   Hero Slider — somente o necessário para funcionar
   NÃO tocar em width/transform do owl-item (o JS do carousel controla isso)
------------------------------------------------------- */
#banner-slider-carousel .item-image {
    position: relative;
    line-height: 0;
}
#banner-slider-carousel .item-image a {
    display: block;
}
/* Fix: magento-m.css define max-height:100% em img que colapsa imagens no carousel */
#banner-slider-carousel img {
    display: block;
    width: 100%;
    max-height: none !important;
    height: auto;
}
/* Nav e dots sempre visíveis */
#banner-slider-carousel .owl-nav,
#banner-slider-carousel .owl-dots {
    opacity: 1 !important;
}

/* Carrinho: garantir escondido caso algum plugin o injete */
.minicart-wrapper { display: none !important; }

/* Banner hero estático (substitui o slider) */
.tagg-hero-banner { width: 100%; margin-bottom: 20px; display: block; }
.tagg-hero-banner a { display: block; }
.tagg-hero-banner img { width: 100%; height: auto; display: block; max-height: none !important; }

/* Espaçamento entre a top bar preta e o header branco */
.page-header .header.content {
    padding-top: 20px;
}

/* -------------------------------------------------------
   Página SAC — card, grid 2 colunas, botão
------------------------------------------------------- */
.sac-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    padding: 30px 35px 25px;
    max-width: 720px;
    margin: 20px 0 30px;
}
.sac-card-title {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 25px;
    color: #333;
}
.sac-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
    margin-bottom: 18px;
}
.sac-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    letter-spacing: .03em;
}
.sac-full { display: flex; flex-direction: column; gap: 5px; font-size: 1.2rem; font-weight: 700; color: #333; letter-spacing: .03em; margin-bottom: 18px; }
.sac-label input,
.sac-label select,
.sac-full textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 1.3rem;
    font-family: 'Open Sans', sans-serif;
    color: #333;
    box-sizing: border-box;
    margin-top: 2px;
}
.sac-full textarea { min-height: 120px; resize: vertical; }
.sac-label input:focus,
.sac-label select:focus,
.sac-full textarea:focus { border-color: #333; outline: none; }
.sac-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}
.sac-required { font-size: 1.1rem; color: #757575; }
.wpcf7-submit,
.sac-card input[type="submit"] {
    background: #1a1a1a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 10px 28px !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    letter-spacing: .04em !important;
}
.wpcf7-submit:hover,
.sac-card input[type="submit"]:hover { background: #333 !important; }
@media (max-width: 600px) {
    .sac-form-grid { grid-template-columns: 1fr; }
    .sac-card { padding: 20px 18px; }
}