/* ==========================================================================
   PUBLICITY PATAGONIA - DISEÑO UNIFICADO (2026-10-16)
   Correcciones y unificación de estilos. Se carga DESPUÉS del "CSS adicional"
   del Personalizador y del CSS de Flatsome, sin modificarlos.
   Registro completo y cómo revertir: backups-diseno\CAMBIOS.md
   Revertir rápido: en functions.php poner PP_DISENO_UNIFICADO en false
   (o borrar este archivo).
   ========================================================================== */

:root {
    --pp-verde: #004C1F;
    --pp-naranja: #FE4110;            /* color de ACCIÓN (botones, CTA) */
    --pp-naranja-acento: #F68E35;     /* acento (badges, botón BIC) */
    --pp-naranja-acento-hover: #DC7A20;
}

/* --------------------------------------------------------------------------
   1. TIPOGRAFÍA: Oswald con pesos reales (antes solo 400/500 -> negritas falsas)
   Los archivos locales de Oswald son fuente variable (200-700).
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap;
    src: url('../../fonts/oswald/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap;
    src: url('../../fonts/oswald/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap;
    src: url('../../fonts/oswald/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap;
    src: url('../../fonts/oswald/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap;
    src: url('../../fonts/oswald/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Oswald llega hasta 700: los 800 que pide el CSS se ven como 700 reales */

/* --------------------------------------------------------------------------
   2. SCROLL HORIZONTAL: "clip" en vez de "hidden"
   "hidden" en html y body a la vez crea un contenedor de scroll y rompe
   position: sticky. "clip" oculta el desborde sin ese efecto.
   -------------------------------------------------------------------------- */
html:root,
html:root body {
    overflow-x: hidden !important;   /* respaldo para navegadores sin "clip" */
    overflow-x: clip !important;
}

/* --------------------------------------------------------------------------
   3. HEADER: márgenes laterales responsive
   Antes: 100px fijos en todos los tamaños (incluso tablet).
   -------------------------------------------------------------------------- */
@media (min-width: 850px) and (max-width: 1199px) {
    .header .flex-row { padding-left: 30px !important; padding-right: 30px !important; }
}
@media (min-width: 550px) and (max-width: 849px) {
    .header .flex-row { padding-left: 15px !important; padding-right: 15px !important; }
}

/* --------------------------------------------------------------------------
   4. COLORES: un solo naranja de acción (#FE4110) y un acento (#F68E35)
   -------------------------------------------------------------------------- */
/* Botón "Solicitar cotización" (YITH) y envío del formulario de contacto */
a.add-request-quote-button.button,
.yith-ywraq-add-button a.button,
input.wpcf7-submit,
.wpcf7-submit,
.single_add_to_cart_button {
    background-color: var(--pp-naranja) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 15px !important;
    box-shadow: 0 3px 8px rgba(254, 65, 16, 0.25) !important;
}
a.add-request-quote-button.button:hover,
.yith-ywraq-add-button a.button:hover,
input.wpcf7-submit:hover,
.wpcf7-submit:hover,
.single_add_to_cart_button:hover {
    background-color: var(--pp-verde) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(0, 76, 31, 0.3) !important;
}

/* Botón "Distribuidor oficial de BIC": antes #EF8D25 (tercer naranja) */
#mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-6614 > a.mega-menu-link {
    background: var(--pp-naranja-acento) !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-6614 > a.mega-menu-link:hover {
    background: var(--pp-naranja-acento-hover) !important;
}

/* --------------------------------------------------------------------------
   5. SIDEBAR DE TIENDA
   Bug: la clase .shop-sidebar está en el <span> del título del widget, no en
   el contenedor. Resultado: el título salía como una cajita con borde y las
   demás reglas del sidebar nunca se aplicaban. El contenedor real es
   .sidebar-inner.
   -------------------------------------------------------------------------- */
span.widget-title.shop-sidebar {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

:is(.sidebar-inner, ul.sidebar-wrapper) .widget-title {
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--pp-verde) !important;
    margin-bottom: 14px !important;
}
:is(.sidebar-inner, ul.sidebar-wrapper) .widget-title::after {
    content: "";
    flex-grow: 1;
    height: 2px;
    background: #f0f2f4;
    margin-left: 10px;
}
:is(.sidebar-inner, ul.sidebar-wrapper) .widget > .is-divider { display: none !important; }

:is(.sidebar-inner, ul.sidebar-wrapper) .widget {
    margin-bottom: 22px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid #f0f2f4 !important;
}
:is(.sidebar-inner, ul.sidebar-wrapper) .widget:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

:is(.sidebar-inner, ul.sidebar-wrapper) ul.product-categories,
:is(.sidebar-inner, ul.sidebar-wrapper) .woocommerce-widget-layered-nav-list {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    margin: 0;
    list-style: none;
}
:is(.sidebar-inner, ul.sidebar-wrapper) ul::-webkit-scrollbar { width: 4px; }
:is(.sidebar-inner, ul.sidebar-wrapper) ul::-webkit-scrollbar-track { background: #f7f7f7; border-radius: 4px; }
:is(.sidebar-inner, ul.sidebar-wrapper) ul::-webkit-scrollbar-thumb { background: #c2c7cc; border-radius: 4px; }
:is(.sidebar-inner, ul.sidebar-wrapper) ul::-webkit-scrollbar-thumb:hover { background: var(--pp-verde); }

:is(.sidebar-inner, ul.sidebar-wrapper) li { padding: 5px 0; font-size: 13px; line-height: 1.4; }
:is(.sidebar-inner, ul.sidebar-wrapper) li a {
    color: #444444 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    transition: color 0.15s ease;
}
:is(.sidebar-inner, ul.sidebar-wrapper) li a:hover { color: var(--pp-naranja) !important; }
:is(.sidebar-inner, ul.sidebar-wrapper) .current-cat > a,
:is(.sidebar-inner, ul.sidebar-wrapper) .cat-item.active > a,
:is(.sidebar-inner, ul.sidebar-wrapper) .chosen > a {
    color: var(--pp-verde) !important;
    font-weight: 700 !important;
}


/* ==========================================================================
   FASE 2 (2026-10-16): ESCALA DE BORDES, CORRECCIONES Y MEGAMENÚ
   Escala: 6px controles | 10px contenedores | círculo colores/badges
   Revertir solo la fase 2: restaurar este archivo desde
   backups-diseno\2026-10-16_fase2_pre-radios-menu\tema-hijo\pp-diseno-unificado.css
   ========================================================================== */
:root {
    --pp-r-control: 6px;
    --pp-r-card: 10px;
}

/* --------------------------------------------------------------------------
   6. BORDES: controles a 6px (antes 0px en varios)
   -------------------------------------------------------------------------- */
/* Buscador completo: input + lupa con las mismas esquinas */
.header-search-form input[type="search"],
.searchform input[type="search"],
.search-field {
    border-radius: var(--pp-r-control) 0 0 var(--pp-r-control) !important;
}

/* Pestañas de la ficha de producto */
.woocommerce-tabs .tabs > li > a,
.tabbed-content .nav > li > a {
    border-radius: var(--pp-r-control) var(--pp-r-control) 0 0 !important;
}
.tabbed-content .tab-panels,
.woocommerce-tabs .tab-panels {
    border-radius: 0 var(--pp-r-card) var(--pp-r-card) var(--pp-r-card) !important;
}

/* Título de sección en caja ("Productos relacionados", etc.) */
.section-title-bold .section-title-main,
.section-title-container .section-title-main {
    border-radius: var(--pp-r-card) !important;
}

/* --------------------------------------------------------------------------
   7. COLORES DEL SIDEBAR: círculos como en la ficha de producto
   -------------------------------------------------------------------------- */
.ux-swatch-widget-layered-nav-list__graphic,
.ux-swatch-widget-layered-nav-list__graphic .ux-swatch__color,
.ux-swatch-widget-layered-nav-list .ux-swatch__color {
    border-radius: 50% !important;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. CAJAS DE BENEFICIOS: un solo marco
   Antes: borde en la columna exterior (.benefit-box) y tarjeta con sombra
   adentro (.col-inner) = doble marco. Ahora el marco es la tarjeta.
   -------------------------------------------------------------------------- */
.benefit-box,
.benefit-box:hover {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}
.benefit-box > .col-inner {
    border: 1px solid #e8eaec !important;
    border-radius: var(--pp-r-card) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.benefit-box:hover > .col-inner {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 76, 31, 0.08) !important;
    border-color: var(--pp-verde) !important;
}

/* --------------------------------------------------------------------------
   9. TARJETAS DE PRODUCTO: botón siempre abajo y alineado en la fila
   El botón tenía margin-top:auto pero .product-small.box no era flex,
   así que quedaba pegado al título (más arriba si el título tenía 1 línea).
   -------------------------------------------------------------------------- */
.product-small.box {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
.product-small.box > .box-text {
    flex: 1 1 auto !important;
}

/* Fix proporción compacta de tarjetas en catálogo BIC y tiendas */
.product-small .box-image {
    aspect-ratio: 1 / 1 !important;
    max-height: 220px !important;
    overflow: hidden !important;
    position: relative !important;
}
.product-small .box-image .image-zoom,
.product-small .box-image .image-zoom a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.product-small .box-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 10px !important;
}
.product-small .box-text.box-text-products {
    min-height: 0 !important;
    padding: 12px 10px 14px !important;
}

/* --------------------------------------------------------------------------
   10. FICHA: título duplicado y botón deshabilitado
   -------------------------------------------------------------------------- */
/* WooCommerce repite "Productos relacionados" debajo del título del bloque */
.related-products-wrapper > h3.product-section-title-related {
    display: none !important;
}
.related-products-wrapper {
    border-top: 0 !important;
}

/* Botón deshabilitado (hasta elegir una variante): gris, no "naranja claro" */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button.wc-variation-selection-needed {
    background-color: #c4c9ce !important;
    color: #ffffff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}
.woocommerce-variation-add-to-cart-disabled {
    flex-wrap: wrap;
}
.woocommerce-variation-add-to-cart-disabled::after {
    content: "Seleccioná una opción para continuar";
    flex: 0 0 100%;
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
}

/* --------------------------------------------------------------------------
   11. LISTA DE CATEGORÍAS DE LA PÁGINA BIC = mismo estilo que el sidebar
   (esa lista es un bloque de UX Builder: ul.sidebar-wrapper, no .sidebar-inner)
   -------------------------------------------------------------------------- */
.col-inner:has(> ul.sidebar-wrapper) {
    background: #ffffff;
    padding: 18px;
    border: 1px solid #e8eaec;
    border-radius: var(--pp-r-card);
}

/* --------------------------------------------------------------------------
   12. MEGAMENÚ: barra con ítems tipo botón y panel moderno
   -------------------------------------------------------------------------- */
/* Ítems del primer nivel: botones de 38px con radio, sin pegarse entre sí */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 16px !important;
    margin: 6px 6px 6px 0 !important;
    border-radius: var(--pp-r-control) !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    background: var(--pp-verde) !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-6614 > a.mega-menu-link {
    margin-right: 20px !important;   /* separa los botones de los enlaces de texto */
}

/* Panel del catálogo (mega panel) */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
    background: #ffffff !important;
    border: 1px solid #e8eaec !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--pp-r-card) var(--pp-r-card) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18) !important;
    padding: 22px 24px 18px !important;
}
/* Nombre de la categoría = encabezado de columna */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    color: var(--pp-verde) !important;
    background: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
    padding: 0 0 8px !important;
    margin: 0 0 8px !important;
    border-bottom: 2px solid #f0f2f4 !important;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
    color: var(--pp-naranja) !important;
}
/* Subcategorías */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
    color: #444444 !important;
    background: none !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    line-height: 28px !important;
    padding: 0 !important;
    transition: color 0.15s ease !important;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link:hover {
    color: var(--pp-naranja) !important;
    background: none !important;
}
/* Sin flechitas en las categorías dentro del panel */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::after {
    display: none !important;
}


/* El panel se ancla al header (no a los botones) y mide lo mismo que el contenedor del sitio */
#mega-menu-wrap-primary,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu {
    position: static !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
    left: 0 !important;
    right: 0 !important;
    width: 1240px !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto !important;
}

/* Categorías en columnas continuas (sin filas estiradas): panel de ~400px en vez de ~750px.
   Solo con el panel abierto (.mega-toggle-on) para no romper el cierre del plugin. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu.mega-toggle-on > ul.mega-sub-menu {
    display: block !important;
    column-count: 5;
    column-gap: 28px;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item {
    display: block !important;
    float: none !important;
    clear: none !important;
    width: 100% !important;
    break-inside: avoid;
    padding: 0 0 20px !important;
    margin: 0 !important;
}
@media (max-width: 1199px) {
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu.mega-toggle-on > ul.mega-sub-menu {
        column-count: 4;
    }
}