/* ============================================================================
   PK · REGLAS DE LA CASA — LEER ANTES DE TOCAR NADA
   Version completa: WPCode > snippet "PK · LÉEME · Reglas de la casa" (apagado, solo texto)
   ----------------------------------------------------------------------------
   · TODO el CSS de Pikotin vive en ESTE archivo. Nada en el Personalizador, nada en
     Woodmart > Ajustes del tema, nada dentro de un snippet. Esos sitios estan vacios
     a proposito.
   · El JS vive en pk.js  (y pk-checkout.js solo para el checkout).
     Esos dos NO se pueden guardar desde WordPress: Cloudflare da 403.
     Se editan desde el administrador de archivos de Rocket.net (Ver / Editar).
   · El PHP vive en snippets de WPCode llamados  PK · AREA · PHP.
   · El orden de los bloques de abajo es el orden de carga y esta verificado midiendo.
     NO los reordenes.
   · Agrega dentro del bloque del area que corresponda; no crees bloques nuevos si ya
     existe el area.
   · Cada cambio con comentario, fecha y por que. Los !important solo si se demuestra
     que hacen falta, diciendo contra que regla pelean.
   · Verifica midiendo antes y despues, en 1200 px y 390 px, SIN sesion iniciada.
   · Al terminar, purga la cache en el panel de Rocket (dura 30 dias).
   ============================================================================ */

/* ============================================================
   pk.css - Todo el CSS de Pikotin en un solo archivo (16 set 2026)
   Orden de bloques = el mismo orden en que cargaban los snippets de WPCode:
   CHECKOUT, GLOBAL, HEADER, CATALOGO, PRODUCTO, CARRITO.
   Se edita desde WordPress: Apariencia > Editor de archivos de temas > pk.css
   Los snippets CSS de WPCode quedan apagados como respaldo.
   ============================================================ */

/* ############################################################
   BLOQUE WOODMART-CUSTOM  (17 set 2026: migrado de Woodmart > Ajustes del tema > CSS personalizado)
   Woodmart lo imprimia en su <style> inline al final del <head>, antes de pk.css; por eso este
   bloque va PRIMERO en el archivo, para conservar el orden de cascada.
   Campos: Global, Escritorio (min 1025), Tablet (768-1024), Movil ancho (577-767), Movil (max 576).
   Se quitaron las reglas del boton WhatsApp de la ficha (a.whatmsgd), que ya no existe.
   Esos campos de Woodmart quedaron vacios: no volver a escribir CSS alli.
   ############################################################ */

/* --- Global --- */
#menu-main-menu-left .mprincipal a {
    color: #ffffff;
    font-size: 17px;
}

#menu-main-menu-left .mprincipal a:hover {
    color: #ffc80c;
}

#menu-main-menu-left .mprincipal .menu-item a:hover {
    color: #1c49c2;
}

#menu-main-menu-left .wd-sub-menu li a {
    color: #000000;
}

#menu-main-menu-right .msec a {
    color: #ffffff;
    font-size: 17px;
}

#menu-main-menu-right .msec a:hover {
    color: #ffc80c;
}

header .wd-tools-element .wd-tools-icon:before {
    font-size: 22px;
}

.wd-header-text.set-cont-mb-s.reset-last-child.topbard.wd-inline {
    font-size: 0.95em;
}

.wd-header-my-account .wd-tools-icon,.wd-header-cart .wd-tools-icon,.wd-header-search .wd-tools-icon, .wd-header-wishlist .wd-tools-icon {
    color: #ffffff;
}

.wd-dropdown-menu.wd-design-aside.wd-style-with-bg .wd-sub-menu-wrapp>.wd-sub-menu {
    background-color: #ececec !important;
}

.comprarporcat .wd-cat .wd-entities-title {
    background-color: #ffffff;
    padding: 2px 5px 2px 5px;
    border-radius: 25px;
}

#grid1d span.woocommerce-Price-amount.amount {
    color: #000000;
}

#serviciosde1 a.btn.btn-style-default.btn-style-rectangle.btn-size-default.btn-color-custom.btn-icon-pos-right {
    background-color: #ff6b35;
    color: #ffffff;
}

#serviciosde1 a.btn.btn-style-default.btn-style-rectangle.btn-size-default.btn-color-custom.btn-icon-pos-right:hover {
    background-color: #232121;
}

.brands-widget .brand-item img {
    max-height: unset !important;
}

.brands-widget .brand-item a {
    padding: 0px !important;
}

.mc4wp-form input[type="submit"]:hover {
    background-color: #ffc80c;
}

.mc4wp-form input[type="submit"] {
    background-color: #1c49c2;
}

.product-grid-item .star-rating {
    display: none;
}

.product-grid-item :is(.product-image-link,.hover-img) img {
    filter: brightness(0.98);
}

.footer-sidebar {
    padding-block: 0px !important;
}

.footer-column {
    margin-bottom: 0px !important;
}

footer .mega-menu-list a, footer .mega-menu-list a:hover {
    color: #ffffff;
}

.single_add_to_cart_button {
    border-radius: 8px;
    padding: 20px 50px 20px 50px;
}

.woocommerce-variation-add-to-cart {
    align-items: center;
}

.single-product .single_variation_wrap div.quantity input[type="button"], .single-product .single_variation_wrap div.quantity input[type="number"] {
    height: 55px;
    color: #000000;
    font-size: 22px;
}

.single-product .wd-after-add-to-cart, .single-product .wd-after-add-to-cart .elementor-element {
    margin-bottom: 3px;
}

#popupsingles a {
    border: none;
    text-transform: inherit;
    font-size: 16px;
}

#popupsingles .btn-icon-pos-left .wd-btn-icon {
    margin-right: 7px;
}

.whb-main-header .whb-flex-flex-middle .whb-col-center {
    flex: 0 1 0%;
}

.whb-main-header .whb-flex-flex-middle .whb-col-center .wd-search-form input {
    border-radius: 15px;
}

.wd-nav[class*="wd-style-"]>li:is(.wd-has-children,.menu-item-has-children)>a:after {
    color: #ffffff;
    margin-top: 5px;
}

.whb-main-header .whb-space-element {
    display: none;
}

.site-logo {
    padding-inline: 0px !important;
}

#banners1h .elementor-image-box-title:hover {
    text-decoration: underline;
}

.wd-nav-arrows[class*="wd-hover"].wd-pos-sep .wd-btn-arrow {
    opacity: 1 !important;
}

.wd-arrow-inner:after {
    font-size: 15px;
    color: #ffffff;
}

.wd-arrow-inner {
    width: 35px;
    height: 35px;
    /* (20 set 2026) Antes #1c49c2, un azul electrico que ya no se usa en la marca.
       Pasa al azul del encabezado (#111a51), el mismo del chip de peso seleccionado.
       Afecta a las flechas de todos los carruseles (relacionados, home, marcas). */
    background-color: #111a51 !important;
    border-radius: 50% !important;
}

span.onsale.product-label {
    padding: 8px 14px;
    font-size: 14px;
}

.single-product .woocommerce-product-gallery .wd-nav-arrows {
    display: none;
}

label[for="payment_method_cheque"]::after {
    content: "";
    display: inline-block;
    width: 60px;
    height: 32px;
    background-image: url("https://pikotin.pe/wp-content/uploads/2024/04/logo-yape-plin.png");
    background-size: cover;
    margin-left: 0px;
    top: 7px;
    position: relative;
}

label[for="payment_method_bacs"]::after {
    content: "";
    display: inline-block;
    width: 80px;
    height: 20px;
    background-image: url("https://pikotin.pe/wp-content/uploads/2024/04/descarga.png");
    background-size: cover;
    margin-left: 0px;
    top: 4px;
    position: relative;
}

footer .elementor-widget .elementor-icon-list-icon {
    display: inline-block;
}

#billing_country_field {
    display: none !important;
}

.woocommerce-cart .wc-proceed-to-checkout:after {
    content: "(*) El costo de envío será cotizado al ingresar la dirección de envío en la página de Finalizar Compra";
    font-size: 0.85em;
}

.woocommerce-cart .order-total th:after {
    content: "*";
    color: red;
}

[class*="wd-header-search-form"] {
    min-width: 450px;
    max-width: 450px;
}

.woocommerce-product-gallery .product-labels.labels-rectangular {
    left: 0% !important;
}

span.onsale.product-label {
    padding: 10px 16px;
    font-size: 16px;
}

/* (20 set 2026) Pestanas de la ficha de producto (DESCRIPCION / INFORMACION ADICIONAL).
   Estaban en amarillo: es el color de accion del boton "Agregar" y ademas sobre blanco se
   lee mal. Ahora van en el azul de la marca, y el amarillo queda para cuando el cliente
   pasa el mouse o toca. La pestana abierta tambien va en azul, porque ya se distingue por
   la linea que le pone el tema debajo.
   La regla anterior usaba un selector general (.wd-nav con estilo) que alcanzaba a otras
   navegaciones del sitio; aqui se acota a la ficha de producto. */
.single-product .wd-nav-tabs > li > a,
.single-product .wd-nav-tabs > li.active > a {
    color: #111a51;
}
.single-product .wd-nav-tabs > li > a:hover,
.single-product .wd-nav-tabs > li > a:focus,
.single-product .wd-nav-tabs > li.active > a:hover {
    color: #ffd63f;
}

/* Pikotin barra de progreso - ocultar checkout steps nativos */
body.woocommerce-cart ul.wd-checkout-steps, body.woocommerce-checkout ul.wd-checkout-steps, .wd-page-title ul.wd-checkout-steps {
    display: none !important;
}

/* mega menu pikotin custom - titulos de columna */
#menu-main-menu-left .menu-mega-dropdown .wd-sub-menu li.wd-col > a.woodmart-nav-link {
    font-family: "Readex Pro",Arial,sans-serif !important;
    font-weight: 600 !important;
    color: #111A51 !important;
}

/* mega menu pikotin custom - subcategorias */
#menu-main-menu-left .menu-mega-dropdown ul.sub-sub-menu > li > a.woodmart-nav-link {
    font-family: "Be Vietnam Pro",Arial,sans-serif !important;
    font-size: 14px !important;
}

/* mega menu pikotin custom - hover subcategorias */
#menu-main-menu-left .menu-mega-dropdown ul.sub-sub-menu > li > a.woodmart-nav-link:hover {
    color: #E0A800 !important;
}

#menu-main-menu-left .menu-mega-dropdown ul.wd-sub-menu {
    justify-content: flex-start !important;
    gap: 40px !important;
}

#menu-main-menu-left .menu-mega-dropdown ul.wd-sub-menu > li.wd-col {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* re-save 1780503835779 */
/* Pikotin - bajar columna derecha del producto */
.single-product .summary.entry-summary {
    padding-top: 40px;
}

/* Pikotin - ocultar flechas y cuadro de navegacion del producto */
.wd-products-nav {
    display: none !important;
}

/* Pikotin - banner video centrado y nitido (sin estirar) */
.whb-top-bar.whb-row > .container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.whb-top-bar .whb-top-bar-inner {
    max-width: 100% !important;
    width: 100% !important;
    justify-content: center !important;
}

.whb-top-bar .whb-column {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1690px !important;
    width: 100% !important;
    flex: 0 1 1690px !important;
}

.whb-top-bar .wd-header-html {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

.whb-top-bar .wd-header-html > .elementor {
    width: 100% !important;
    margin: 0 auto !important;
}

.whb-top-bar video {
    width: 100% !important;
    max-width: 1690px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Pikotin - mensaje envio gratis: azul navy y centrado */
.wd-free-progress-bar .progress-msg, .free-progress-bar .progress-msg {
    color: #111A51 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    font-weight: 600 !important;
}

/* Pikotin - barra envio gratis v4: barra azul cubre todo el riel gris, alineada */
.wd-free-progress-bar .progress-area, .free-progress-bar .progress-area {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 18px !important;
    background-color: #E3E8F0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.wd-free-progress-bar .progress-bar, .free-progress-bar .progress-bar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    height: 18px !important;
    max-height: 18px !important;
    min-height: 18px !important;
    min-width: 14px !important;
    float: none !important;
    background: #2E9BE6 !important;
    background-color: #2E9BE6 !important;
    background-image: none !important;
    border-radius: 12px !important;
    transform: none !important;
    transition: width .5s ease !important;
}

/* Pikotin v5 - camion + barra mas gruesa + textos confianza */
.wd-free-progress-bar .progress-msg::before, .free-progress-bar .progress-msg::before {
    content: '\1F69A';
    font-size: 20px;
    line-height: 1;
    flex: 0 0 auto;
}

.wd-free-progress-bar .progress-area, .free-progress-bar .progress-area {
    height: 22px !important;
    border-radius: 14px !important;
}

.wd-free-progress-bar .progress-bar, .free-progress-bar .progress-bar {
    height: 22px !important;
    max-height: 22px !important;
    min-height: 22px !important;
    border-radius: 14px !important;
}

/* textos de confianza abajo */
.pikotin-drawer-trust {
    text-align: center !important;
}

.pikotin-drawer-trust .pikotin-drawer-icons {
    font-weight: 700 !important;
    color: #111A51 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
}

.pikotin-drawer-trust .pikotin-drawer-icons + div {
    color: #9AA0AE !important;
    font-size: 11px !important;
    font-style: italic !important;
    margin-top: 2px !important;
}


/* --- css_desktop --- */
@media (min-width: 1025px) {
    .woodmart-woocommerce-layered-nav .wd-scroll-content {
        max-height: 500px!important;
    }
}

/* --- css_tablet --- */
@media (min-width: 768px) and (max-width: 1024px) {
    #marcasslider .wd-nav-arrows {
        display: none;
    }
}

/* --- css_wide_mobile --- */
@media (min-width: 577px) and (max-width: 767px) {
    header #topbariconos .elementor-icon-list-item.elementor-inline-item:after {
        display: none;
    }
    #marcasslider .wd-nav-arrows {
        display: none;
    }
    [class*="wd-header-search-form"] {
        min-width: unset !important;
    }
}

/* --- css_mobile --- */
@media (max-width: 576px) {
    header #topbariconos .elementor-icon-list-item.elementor-inline-item:after {
        display: none;
    }
    #marcasslider .wd-nav-arrows {
        display: none;
    }
    [class*="wd-header-search-form"] {
        min-width: unset !important;
    }
}


/* ############################################################
   BLOQUE GLOBAL  (antes snippet WPCode 26464)
   ############################################################ */

/* ===== PK · GLOBAL · CSS =====
   Creado el 15 set 2026 al migrar del Personalizador las 39 reglas que no pertenecen a un area:
   variables de color, overflow horizontal, boton flotante de WhatsApp, tipografia en celular,
   ajustes del home (slider, flechas, titulos de secciones), footer y blog.
   Mismo orden en que estaban; en un segundo paso se fusionan repetidas.
   Regla: lo que no sea de carrito, producto, catalogo, header o checkout va AQUI. ===== */

.wd-copyrights {
    padding: 6px;
}
.blog-design-masonry.has-post-thumbnail .wd-post-date {
    display: none;
}
.wa__btn_popup {
    z-index: 100;
}

@media (max-width: 767px) {
    .wa__btn_popup_txt {
        display: none !important;
    }
    h1.elementor-heading-title {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }
    h2.elementor-heading-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }
    .woodmart-title-container.title {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }
    /* Barra promocional superior (marquee) - texto un poco mas chico para que se lea mejor */
    .wd-marquee .wd-marquee-item {

    }
    /* Banda Delivery Gratis - que escale al ancho del movil sin recortarse */
    .elementor-element-b1000ce img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    /* === Pagina de categoria/busqueda: aprovechar todo el ancho y centrar tarjetas === */
    .wd-content-layout.content-layout-wrapper {
        display: block !important;
    }
    .wd-content-layout .wd-content-area {
        width: 100% !important;
        max-width: 100% !important;
    }
    body {
        overflow-x: hidden;
    }
}
/* === Cambiar azul claro (#111A51) por azul principal de marca (#111A51) === */
:root {
    --wd-primary-color: #111A51;
}
/* PIKOTIN-CHECKOUT-ANCHO (fijar ancho del checkout en 1100px centrado, solo esta pagina) */
body.page-id-11 main.wd-content-layout.container {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 767px) {
    .elementor-element-fb33703 ss3-force-full-width, .elementor-element-fb33703 .n2-section-smartslider, .elementor-element-fb33703 [id^="n2-ss-"] {
        background-color: #16225c !important;
    }
    .elementor-element-fb33703 .n2-ss-align, .elementor-element-fb33703 #n2-ss-2-align, .n2-section-smartslider, .n2-padding {
        overflow: hidden !important;
        max-width: 100vw !important;
    }
    div#n2-ss-2 {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    div#n2-ss-2 .n2-ss-slider-wrapper-inside {
        overflow: hidden !important;
        max-width: 100% !important;
    }
}
/* === Fix: Eliminar espacio en blanco entre header y SmartSlider === */
:root {
    --wd-top-bar-h: 0px !important;
}
/* === Fix: Titulo MARCAS - alineacion izquierda y tamaño reducido === */
.elementor-element-d3236d8 .elementor-heading-title, .elementor-element-d3236d8 h2 {
    text-align: left !important;
    font-size: 22px !important;
}
/* === Fix: Flechas del carousel de marcas - tamaño reducido y color #111A51 === */
.elementor-element-afcac9d .wd-arrow-inner {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    background-color: #111A51 !important;
}
.elementor-element-afcac9d .wd-btn-arrow {
    width: 32px !important;
    height: 32px !important;
}
.elementor-element-afcac9d .wd-arrow-inner svg, .elementor-element-afcac9d .wd-arrow-inner i {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}
/* === FIX: Evitar deformación al hacer zoom out en el navegador === */
/* Causa raiz: las secciones de ancho completo del tema usan
   left: calc(50% - 50vw...) mezclando % (del padre) con vw (viewport),
   lo que se descalibra al cambiar el zoom. Lo reemplazamos por margin negativo estable. */
[class*="wd-section-stretch"] {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;
}
ss3-force-full-width, SS3-FORCE-FULL-WIDTH {
    max-width: 100vw !important;
    overflow: hidden !important;
}
.n2-section-smartslider, #n2-ss-2-align, .n2-padding {
    max-width: 100vw !important;
    overflow: hidden !important;
}
html, body {
    overflow-x: hidden !important;
}
.wd-page-wrapper {
    overflow-x: clip !important;
}
/* === FIN FIX ZOOM === */
/* === Ocultar textos de seccion Productos para mascotas === */
/* Oculta solo los textos, NO las imagenes de Mundo Cachorros/Gatitos/Senior */
/* Titulo: Productos para mascotas | Pikotin */
/* Subtitulo: Productos para cachorros */
/* Subtitulo: Productos para gatitos */
.elementor-element-13ec32d, .elementor-element-82a2006, .elementor-element-8f685a0, .elementor-element-3b510d1 {
    /* Subtitulo: Productos para senior */ display: none !important;
}

@media (max-width: 767px) {
    /* ---------------------------------------------------------
   * 3. SLIDER PRINCIPAL – Ancho completo (eliminar padding lateral)
   *    La sección 0792a10 no tiene wd-section-stretch, por lo que
   *    queda dentro del .container con padding 0 15px.
   *    Forzamos ancho completo y ocultamos overflow para el slide.
   * --------------------------------------------------------- */
    .elementor-element-0792a10 {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-1 * (100vw - 100%) / 2) !important;
        overflow: hidden !important;
    }
    /* ---------------------------------------------------------
   * 4. BOTÓN WHATSAPP – Tamaño y centrado corregido
   *    El plugin fija .wa__btn_popup_icon en 56x56px.
   *    Reducimos TANTO el contenedor (.wa__btn_popup)
   *    COMO el círculo verde (.wa__btn_popup_icon) a 46px,
   *    y ajustamos el background-size del logo (SVG teléfono).
   * --------------------------------------------------------- */
    /* Contenedor exterior */
    .wa__btn_popup {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        overflow: hidden !important;
        bottom: 20px !important;
        right: 16px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Círculo verde — igualar al contenedor */
    .wa__btn_popup .wa__btn_popup_icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }
    /* Ícono SVG del teléfono — centrado y tamaño proporcional */
    .wa__btn_popup .wa__btn_popup_icon::before {
        background-size: 26px !important;
        background-position: center center !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }
    /* Ícono X (cierre) — también centrado */
    .wa__btn_popup .wa__btn_popup_icon::after {
        background-size: 12px !important;
        background-position: center center !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }
    /* Chat box: evitar que tape el contenido con el scroll */
    .wa__popup_chat_box {
        bottom: 76px !important;
        right: 10px !important;
        max-width: calc(100vw - 32px) !important;
        width: 320px !important;
    }
    /* ---------------------------------------------------------
   * 5. TÍTULO "Las mejores marcas" – Reducir font-size
   *    22px + texto largo produce 3 líneas. Con 17px queda en 2.
   * --------------------------------------------------------- */
    .elementor-element-d3236d8 .elementor-heading-title {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }
    /* ---------------------------------------------------------
   * 9. SECCIÓN CATEGORÍAS (c6dae8a) – Gap entre imágenes
   *    Los 3 banners (Cachorros, Gatitos, Senior) tienen
   *    margen excesivo. Lo ajustamos a 6px entre ellos.
   * --------------------------------------------------------- */
    .elementor-element-c6dae8a .elementor-widget-image {
        margin-bottom: 6px !important;
    }
}
/* === /* === Blog posts vertical gap === */
.page-id-20816 .wd-posts.wd-masonry article.wd-post {
    margin-bottom: 20px !important;
}
.page-id-20816 .wd-posts.wd-masonry article.wd-post .article-inner {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

/* ############################################################
   BLOQUE HEADER  (antes snippet WPCode 26461)
   ############################################################ */

/* ===== PK · HEADER · CSS =====
   Creado el 15 set 2026 al migrar del Personalizador las 82 reglas de la cabecera (fusionadas a 80):
   barra superior con video, menu, buscador, logo, header en celular, menu lateral movil
   y la cabecera especial del checkout. Van en el mismo orden en que estaban y con sus
   !important; en un segundo paso se fusionan repetidas y se quitan los que sobren.
   Regla: todo CSS de la cabecera va AQUI, no en el Personalizador. ===== */
/* === Ocultar corazon de lista de deseos en el header === */
.wd-header-wishlist {
    display: none !important;
}

/* === Mega menú categorías - estilo Pikotin === */
/* Títulos de columna: Readex Pro, menos grueso, azul de marca */
#menu-main-menu-left .menu-mega-dropdown .wd-sub-menu li.wd-col > a.woodmart-nav-link {
    font-family: "Readex Pro", Arial, sans-serif !important;
    font-weight: 500 !important;
    color: #111A51 !important;
}

/* Subcategorías: Be Vietnam Pro, ligeramente más pequeñas */
#menu-main-menu-left .menu-mega-dropdown ul.sub-sub-menu > li > a.woodmart-nav-link {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
    font-size: 14px !important;
}

/* Hover de subcategorías: azul de marca */
#menu-main-menu-left .menu-mega-dropdown ul.sub-sub-menu > li > a.woodmart-nav-link:hover {
    color: #E0A800 !important;
}

/* ===== Pikotin - Boton lupa navy (busqueda header) ===== */
html body .searchsubmit, html body button.searchsubmit, html body .wd-search-button button, html body .wd-search-full button {
    background-color: #111A51 !important;
}

html body .searchsubmit:hover, html body button.searchsubmit:hover {
    background-color: #0c1340 !important;
}

/* === Franja superior con video banner (proporcion 2560x66) === */
:root, .whb-header {
    --wd-top-bar-h: calc(100vw * 66 / 2560);
    --wd-top-bar-sm-h: calc(100vw * 66 / 2560);
}

.whb-header .whb-top-bar.whb-row, .whb-header .whb-top-bar .whb-top-bar-inner, .whb-top-bar .container, .whb-top-bar .whb-col-left {
    height: calc(100vw * 66 / 2560) !important;
    max-height: none !important;
    min-height: 0 !important;
    align-items: stretch !important;
}

.whb-top-bar .container, .whb-top-bar .whb-column, .whb-top-bar .whb-col-left, .whb-top-bar .wd-header-html, .whb-top-bar .elementor-20903, .whb-top-bar .elementor-element-50ac7e8 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.whb-top-bar .elementor-element-1d80add, .whb-top-bar .elementor-element-1d80add .elementor-widget-container {
    width: 100% !important;
    height: calc(100vw * 66 / 2560) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.whb-top-bar .e-hosted-video {
    aspect-ratio: 2560 / 66 !important;
    height: calc(100vw * 66 / 2560) !important;
    width: 100% !important;
    padding: 0 !important;
}

.whb-header .whb-top-bar .elementor-element-1d80add video, .whb-top-bar video {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

/* === Color item Ofertas (amarillo #F9BB28) === */
.whb-header li.menu-item-21181 > a, .whb-header li.menu-item-21181 > a span {
    color: #F9BB28 !important;
}

/* === Ajustes menu derecho (PikotinesFelices + items) === */
/* Ocultar texto #PikotinesFelices */
.whb-header-bottom .whb-col-right .wd-header-text {
    display: none !important;
}

/* Items nuevos (Farmacia, Antipulgas, Suplementos, Peluqueria): blanco normal, hover dorado como Perros/Gatos */
.whb-header li.menu-item-24593 > a, .whb-header li.menu-item-24593 > a span, .whb-header li.menu-item-24594 > a, .whb-header li.menu-item-24594 > a span, .whb-header li.menu-item-24595 > a, .whb-header li.menu-item-24595 > a span, .whb-header li.menu-item-24596 > a, .whb-header li.menu-item-24596 > a span {
    color: #ffffff !important;
}

.whb-header li.menu-item-24593:hover > a, .whb-header li.menu-item-24593:hover > a span, .whb-header li.menu-item-24594:hover > a, .whb-header li.menu-item-24594:hover > a span, .whb-header li.menu-item-24595:hover > a, .whb-header li.menu-item-24595:hover > a span, .whb-header li.menu-item-24596:hover > a, .whb-header li.menu-item-24596:hover > a span {
    color: #FFC80C !important;
}

/* === Tamano de fuente menu derecho igual al menu principal (17px) === */
.whb-header ul.wd-nav-secondary > li > a, .whb-header ul.wd-nav-secondary > li > a span {
    font-size: 17px !important;
    line-height: 20.4px !important;
    font-weight: 400 !important;
}

@media (max-width: 767px) {
    /* Ocultar franja amarilla superior */
    .whb-top-bar {
        display: none !important;
    }
    /* Logo centrado en el header móvil */
    .whb-general-header .container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .whb-main-header .whb-mobile-left {
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
    }
    .whb-main-header .whb-mobile-right {
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-end;
    }
    .whb-main-header .whb-mobile-center {
        flex: 0 0 auto;
        text-align: center;
    }
    .whb-main-header .whb-mobile-center .site-logo img {
        max-width: 150px !important;
        height: auto;
        width: auto;
    }
}

/* Ocultar barra superior (top bar) en todos los dispositivos - alta especificidad */
.whb-header .whb-row.whb-top-bar, body .whb-top-bar {
    display: none !important;
}

@media (max-width: 767px) {
    /* Contenedor al 80% centrado */
    body .whb-header-bottom .container, body .whb-row.whb-header-bottom > .container {
        max-width: 80% !important;
        width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body .whb-header-bottom-inner {
        background-color: #111a51 !important;
        padding: 6px 12px !important;
    }
    /* Sobreescribir variables con selector de mayor especificidad que el tema */
    body body .whb-j3z0gisw1vkpgjlodbdz .searchform.woodmart-ajax-search, body body .wd-header-search-form-mobile .searchform.woodmart-ajax-search {
        --wd-form-height: 36px;
        --wd-search-btn-w: 32px;
    }
    /* Estilos fisicos con !important - no dependen de variables */
    body .whb-j3z0gisw1vkpgjlodbdz .searchform.woodmart-ajax-search, body .wd-header-search-form-mobile .searchform.woodmart-ajax-search {
        background: #ffffff !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 36px !important;
        max-height: 36px !important;
        min-height: 36px !important;
        border: none !important;
        box-shadow: none !important;
        position: relative !important;
    }
    body .whb-j3z0gisw1vkpgjlodbdz .searchform.woodmart-ajax-search input.s, body .wd-header-search-form-mobile .searchform.woodmart-ajax-search input.s {
        background: transparent !important;
        border: none !important;
        padding: 0 40px 0 12px !important;
        margin: 0 !important;
        height: 36px !important;
        width: 100% !important;
        font-size: 14px !important;
        color: #333 !important;
        line-height: 36px !important;
        box-sizing: border-box !important;
    }
    /* Boton: position absolute desde el tema, solo controlamos tamaño e inset */
    body .whb-j3z0gisw1vkpgjlodbdz .searchform.woodmart-ajax-search button.searchsubmit, body .wd-header-search-form-mobile .searchform.woodmart-ajax-search button.searchsubmit {
        background-color: #111a51 !important;
        border-radius: 7px !important;
        width: 30px !important;
        min-width: 30px !important;
        /* (18 set 2026) La lupa salia mas arriba que la caja de busqueda: aqui se fijaba
           top y bottom, pero otra regla del propio pk.css la centra con
           transform: translateY(-50%). Las dos juntas la subian 12 px.
           Se deja solo el centrado, que es el que manda. */
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        right: 3px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }
    /* Icono lupa: 14px fijo con !important */
    body .whb-j3z0gisw1vkpgjlodbdz .searchform.woodmart-ajax-search button.searchsubmit::after, body .wd-header-search-form-mobile .searchform.woodmart-ajax-search button.searchsubmit::after {
        font-size: 14px !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
}

/* =====================================================
   CHECKOUT - Header limpio (estilo minimalista)
   ===================================================== */
/* 1. Ocultar menú de navegación */
.woocommerce-checkout .whb-header-bottom {
    display: none !important;
}

/* 2. Ocultar búsqueda y iconos derecha */
.woocommerce-checkout .whb-general-header .whb-col-center, .woocommerce-checkout .whb-general-header .whb-col-right, .woocommerce-checkout .whb-general-header .whb-space-element {
    display: none !important;
}

/* 3. Fondo azul y altura del header */
.woocommerce-checkout .whb-general-header {
    background-color: #111A51 !important;
    border-bottom: none !important;
}

/* 4. Layout de 3 columnas: izq | centro | der */
.woocommerce-checkout .whb-general-header .whb-general-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 65px !important;
}

.woocommerce-checkout .whb-general-header .whb-col-left .site-logo {
    display: none !important;
}

.woocommerce-checkout .whb-general-header .whb-col-left::after {
    content: "\2190 SEGUIR COMPRANDO" !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

/* 6. Logo centrado - usar ::before del inner para mostrar imagen */
.woocommerce-checkout .whb-general-header .whb-general-header-inner::before {
    content: "" !important;
    display: block !important;
    background-image: url('https://pikotin.pe/wp-content/uploads/2026/06/pikotin-logo-slogan.png') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    width: 140px !important;
    height: 75px !important;
    flex-shrink: 0 !important;
    order: 2 !important;
}

/* Ocultar los íconos reales de cuenta/carrito/wishlist */
.woocommerce-checkout .whb-general-header .whb-col-right > div {
    display: none !important;
}

/* "¿Te ayudamos?" label */
.woocommerce-checkout .whb-general-header .whb-col-right::before {
    content: "\00BFTe ayudamos?" !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    white-space: nowrap !important;
    display: block !important;
    text-align: right !important;
}

/* Número de WhatsApp con logo */
.woocommerce-checkout .whb-general-header .whb-col-right::after {
    display: none !important;
}

/* Quitar el ::after del inner que teniamos antes */
.woocommerce-checkout .whb-general-header .whb-general-header-inner::after {
    display: none !important;
    content: "" !important;
}

.woocommerce-checkout.admin-bar html, .admin-bar.woocommerce-checkout body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* === Alinear margenes del header checkout con el contenido === */
.woocommerce-checkout .whb-general-header .container {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

/* === Hover color en 'SEGUIR COMPRANDO' del checkout === */
.woocommerce-checkout .whb-general-header .whb-col-left {
    flex: 1 !important;
    justify-content: flex-start !important;
    order: 1 !important;
    cursor: pointer !important;
}

.woocommerce-checkout .whb-general-header .whb-col-left:hover::after {
    color: #D99A00 !important;
}

/* === Cursor pointer en 'Te Ayudamos' del checkout === */
.woocommerce-checkout .whb-general-header .whb-col-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    flex: 1 !important;
    order: 3 !important;
    gap: 2px !important;
    cursor: pointer !important;
}

@media (max-width: 767px) {
    /* ---------------------------------------------------------
   * 1. HEADER – Eliminar hueco vacío entre barra de búsqueda y slider
   *    El JS sticky del tema asigna padding-top = altura total del header (161px).
   *    El contenido real es 71px (logo row) + 50px (search row) = 121px.
   *    Corregimos el padding para eliminar los ~40px de espacio muerto.
   * --------------------------------------------------------- */
    .whb-header {
        padding-top: 121px !important;
    }
    /* ---------------------------------------------------------
   * 2. BARRA DE BÚSQUEDA – Ampliar de ~67% a ~95% del viewport
   *    El contenedor tenía max-width: 80% pero la cadena de
   *    wrappers lo reducía a ~261px (67%). Ahora usamos 95%.
   * --------------------------------------------------------- */
    body .whb-header-bottom .container, body .whb-row.whb-header-bottom > .container {
        max-width: 95% !important;
        width: 95% !important;
    }
    /* ---------------------------------------------------------
   * 10. SEARCH INNER – Padding vertical para mayor altura táctil
   * --------------------------------------------------------- */
    .whb-header-bottom-inner {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    /* Ocultar columnas mobile redundantes en checkout (el logo ya aparece centrado como elemento absoluto) */
    .woocommerce-checkout .whb-general-header .whb-mobile-center, .woocommerce-checkout .whb-general-header .whb-mobile-left, .woocommerce-checkout .whb-general-header .whb-mobile-right {
        display: none !important;
    }
    /* Asegurar que el inner tenga posicion relativa para el logo absoluto */
    .woocommerce-checkout .whb-general-header-inner {
        position: relative !important;
        min-height: 70px !important;
    }
    /* Hacer que el bloque Te ayudamos no crezca innecesariamente */
    .woocommerce-checkout .whb-general-header .whb-col-right {
        flex: 0 0 auto !important;
        max-width: 140px !important;
    }
    .woocommerce-checkout .whb-general-header #pk-ayuda-wa {
        gap: 2px !important;
    }
    /* Texto "Te ayudamos?" */
    .woocommerce-checkout .whb-general-header #pk-ayuda-wa > span:first-child {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
    /* Fila con icono WA + numero */
    .woocommerce-checkout .whb-general-header #pk-ayuda-wa > span:last-child {
        font-size: 13px !important;
        gap: 3px !important;
    }
    /* Icono de WhatsApp */
    .woocommerce-checkout .whb-general-header #pk-ayuda-wa > span:last-child > span:first-child {
        font-size: 13px !important;
        width: 15px !important;
        height: 15px !important;
    }
    /* Numero de telefono */
    .woocommerce-checkout .whb-general-header #pk-ayuda-wa > span:last-child > span:last-child {
        font-size: 13px !important;
    }
}

/* === Ocultar Lista de Deseos del menú lateral móvil === */
.mobile-nav .menu-item-wishlist {
    display: none !important;
}

/* === Menú lateral móvil: texto en negro === */
.mobile-nav.wd-side-hidden-nav .woodmart-nav-link, .mobile-nav.wd-side-hidden-nav .woodmart-nav-link span, .mobile-nav.wd-side-hidden-nav .wd-nav-mobile a, .mobile-nav.wd-side-hidden-nav .wd-nav-mobile .woodmart-nav-link {
    color: #000000 !important;
}

/* === Menú lateral móvil: ocultar "Mi cuenta" === */
.mobile-nav.wd-side-hidden-nav .menu-item-account {
    display: none !important;
}

/* === Menú lateral móvil: igualar tamaño de fuente de Ofertas === */
.mobile-nav.wd-side-hidden-nav .menu-item-24877 > a.woodmart-nav-link, .mobile-nav.wd-side-hidden-nav .menu-item-24877 > a.woodmart-nav-link span {
    font-size: 13px !important;
}

/* === Menú lateral móvil: fondo azul en categoría padre cuando está desplegada === */
.mobile-nav.wd-side-hidden-nav .item-level-0.opener-page > a.woodmart-nav-link, .mobile-nav.wd-side-hidden-nav .item-level-0:has(.wd-nav-opener.wd-active) > a.woodmart-nav-link {
    background-color: #111A51 !important;
    color: #ffffff !important;
}

.mobile-nav.wd-side-hidden-nav .item-level-0.opener-page > a.woodmart-nav-link span, .mobile-nav.wd-side-hidden-nav .item-level-0:has(.wd-nav-opener.wd-active) > a.woodmart-nav-link span, .mobile-nav.wd-side-hidden-nav .item-level-0.opener-page > a.woodmart-nav-link .nav-link-text, .mobile-nav.wd-side-hidden-nav .item-level-0:has(.wd-nav-opener.wd-active) > a.woodmart-nav-link .nav-link-text {
    color: #ffffff !important;
}

/* === Flechita del desplegable: mismo fondo que la categoría activa === */
.mobile-nav.wd-side-hidden-nav .item-level-0:has(.wd-nav-opener.wd-active) .wd-nav-opener.wd-active, .mobile-nav.wd-side-hidden-nav .item-level-0.opener-page .wd-nav-opener.wd-active {
    background-color: #111A51 !important;
}

/* === Subcategorías del menú móvil: sangría + fondo para distinguirlas === */
.mobile-nav.wd-side-hidden-nav .wd-sub-menu {
    background-color: #f7f7f7 !important;
}

.mobile-nav.wd-side-hidden-nav .wd-sub-menu > .menu-item > a.woodmart-nav-link {
    padding-left: 32px !important;
}

/* === Subcategorías nivel 1: sangría + fondo gris para distinguirlas === */
.mobile-nav.wd-side-hidden-nav .item-level-0 > .wd-sub-menu {
    background-color: #f7f7f7 !important;
}

.mobile-nav.wd-side-hidden-nav .item-level-0 > .wd-sub-menu > li > a.woodmart-nav-link {
    padding-left: 32px !important;
}

/* === Corrección desplegables de subcategorías (nivel 1 y 2) === */
/* Nivel 1 activo (ej: Alimentos expandido): fondo gris, texto negro, sin color primario */
.mobile-nav.wd-side-hidden-nav .item-level-1.opener-page > a.woodmart-nav-link, .mobile-nav.wd-side-hidden-nav .item-level-1:has(.wd-nav-opener.wd-active) > a.woodmart-nav-link {
    background-color: #ebebeb !important;
    color: #000000 !important;
}

.mobile-nav.wd-side-hidden-nav .item-level-1.opener-page > a.woodmart-nav-link .nav-link-text, .mobile-nav.wd-side-hidden-nav .item-level-1:has(.wd-nav-opener.wd-active) > a.woodmart-nav-link .nav-link-text {
    color: #000000 !important;
}

/* Flechita nivel 1 activa: mismo gris oscuro que fondo */
.mobile-nav.wd-side-hidden-nav .item-level-1:has(.wd-nav-opener.wd-active) .wd-nav-opener.wd-active, .mobile-nav.wd-side-hidden-nav .item-level-1.opener-page .wd-nav-opener.wd-active {
    background-color: #ebebeb !important;
    color: #000000 !important;
}

/* Sub-subcategorías (nivel 2): fondo más oscuro y sangría mayor */
.mobile-nav.wd-side-hidden-nav .item-level-1 > .wd-sub-menu {
    background-color: #e0e0e0 !important;
}

.mobile-nav.wd-side-hidden-nav .item-level-2 > a.woodmart-nav-link {
    padding-left: 44px !important;
    color: #000000 !important;
}

/* === Fondo sub-subcategorías (nivel 2) ul.sub-sub-menu === */
.mobile-nav.wd-side-hidden-nav .sub-sub-menu {
    background-color: #e0e0e0 !important;
}

/* Forzar color negro en todos los links de subcategorías de nivel 1 y 2 */
.mobile-nav.wd-side-hidden-nav .wd-sub-menu li a.woodmart-nav-link, .mobile-nav.wd-side-hidden-nav .sub-sub-menu li a.woodmart-nav-link, .mobile-nav.wd-side-hidden-nav .wd-sub-menu li a.woodmart-nav-link .nav-link-text, .mobile-nav.wd-side-hidden-nav .sub-sub-menu li a.woodmart-nav-link .nav-link-text {
    color: #000000 !important;
}

/* === Tamaño de texto subcategorías nivel 1 y 2 === */
.mobile-nav.wd-side-hidden-nav .item-level-1 > a.woodmart-nav-link, .mobile-nav.wd-side-hidden-nav .item-level-1 > a.woodmart-nav-link span {
    font-size: 13px !important;
}

.mobile-nav.wd-side-hidden-nav .item-level-2 > a.woodmart-nav-link, .mobile-nav.wd-side-hidden-nav .item-level-2 > a.woodmart-nav-link span {
    font-size: 13px !important;
}

/* === Ancho barra lateral móvil: 85% del ancho de pantalla === */
.mobile-nav.wd-side-hidden-nav {
    width: 85vw !important;
    max-width: 400px !important;
}

/* [15 set 2026] La cabecera y la barra de envio del drawer se movieron al snippet
   de WPCode "PK · CARRITO · CSS". No volver a escribirlos aqui. */
/* === Igualar tamaño fuente "Otras mascotas" en menú principal === */
#menu-item-25131 > a.woodmart-nav-link {
    font-size: 17px !important;
}

/* ############################################################
   BLOQUE CATÁLOGO  (antes snippet WPCode 26365)
   ############################################################ */

/* ==========================================================
   PK · CATALOGO · CSS
   Consolidado el 12 sep 2026. Reemplaza a los snippets: 24802, 24950, 26084, 26087
   Regla: todo el CSS de esta area va AQUI. No crear snippets sueltos.
   ========================================================== */

/* ---- #24802 · Fix - Eliminar hueco blanco superior header sticky ---- */
/* Header sticky Pikotin: header fijo al hacer scroll, sin hueco blanco superior. Restaura el comportamiento nativo de Woodmart anulando una regla del Personalizador que forzaba position:relative */
.whb-header.whb-sticky-prepared .whb-main-header { position: absolute !important; }
.whb-header.whb-sticked .whb-main-header { position: fixed !important; }
/* Checkout: el header no es sticky aqui, eliminar el padding superior que crea el hueco blanco */
.woocommerce-checkout .whb-header.whb-sticky-prepared { padding-top: 0 !important; }
.woocommerce-checkout .whb-header.whb-sticky-prepared .whb-main-header { position: relative !important; }
/* Home: eliminar la franja blanca de 40px entre el header y el primer banner */
.home .wd-content-layout.content-layout-wrapper { padding-top: 0 !important; }

/* ---- #24950 · Main Nav - White color + Hover Gold ---- */
/* Main nav items - white color, gold hover */
.item-level-0 > a.woodmart-nav-link,
.item-level-0 > a.woodmart-nav-link span {
    color: #ffffff !important;
}
.item-level-0 > a.woodmart-nav-link:hover,
.item-level-0:hover > a.woodmart-nav-link,
.item-level-0 > a.woodmart-nav-link:hover span,
.item-level-0:hover > a.woodmart-nav-link span {
    color: #F9BB28 !important;
}

/* Ofertas - bright yellow, same size */
.menu-item-24877 > a.woodmart-nav-link {
    font-size: 17px !important;
    color: #FFD700 !important;
}

/* Descuentazos y Liquidaciones - negro con hover dorado */
.menu-item-24590 > a,
.menu-item-24591 > a {
    color: #000000 !important;
}
.menu-item-24590:hover > a,
.menu-item-24591:hover > a {
    color: #F9BB28 !important;
}

/* ---- #26084 · Barra busqueda sticky en movil ---- */
@media (max-width: 767px){
  .whb-header.whb-sticked .whb-header-bottom.whb-not-sticky-row{
    display: flex !important;
  }
}

/* ---- #26087 · Diseno barra busqueda movil (pildora + lupa circular) ---- */
@media (max-width: 767px){
  .wd-header-search-form-mobile .searchform{ position:relative; }
  .wd-header-search-form-mobile .searchform input.s{
    background:#fff !important;
    color:#333 !important;
    border:none !important;
    border-radius:10px !important;
    height:40px !important;
    padding:0 52px 0 16px !important;
    box-shadow:none !important;
  }
  .wd-header-search-form-mobile .searchform input.s::placeholder{ color:#8a8a8a !important; }
  .wd-header-search-form-mobile .searchform .wd-clear-search{ display:none !important; }
  .wd-header-search-form-mobile .searchform .searchsubmit{
    position:absolute !important;
    right:5px !important; top:50% !important;
    transform:translateY(-50%) !important;
    width:32px !important; height:32px !important; min-width:32px !important;
    border-radius:8px !important;
    background:#111a51 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    padding:0 !important;
  }
  .wd-header-search-form-mobile .searchform .searchsubmit svg,
  .wd-header-search-form-mobile .searchform .searchsubmit path{
    stroke:#fff !important; fill:#fff !important; color:#fff !important;
  }
}

/* ===== FLECHAS DE CARRUSEL — 14 set 2026 =====
   Tras Woodmart 8.5.7 las flechas quedaron encima de la primera y la ultima tarjeta,
   tapando el nombre del producto. Se sacan fuera del carrusel.
   El max() las deja a 50px afuera cuando hay margen y, cuando no lo hay, las pega al
   borde de la ventana sin provocar barra horizontal.
   OJO: hay que repetir el selector con :hover y :focus. El tema tiene una regla propia
   para el estado hover que devuelve la flecha a right:0; sin el :hover aqui, la flecha
   salta 50px al pasar el mouse, se sale de debajo del cursor, vuelve, y parpadea sin parar.
   Tampoco tocar top ni transform: el tema los recalcula en cada slide. */
body .wd-products-element .wd-carousel-inner .wd-nav-arrows.wd-pos-sep .wd-btn-arrow.wd-prev,
body .wd-products-element .wd-carousel-inner .wd-nav-arrows.wd-pos-sep .wd-btn-arrow.wd-prev:hover,
body .wd-products-element .wd-carousel-inner .wd-nav-arrows.wd-pos-sep .wd-btn-arrow.wd-prev:focus{
  inset-inline-start: max(-50px, calc(50% - 50vw + 10px)) !important;
  left: max(-50px, calc(50% - 50vw + 10px)) !important;
  right: auto !important;
}
body .wd-products-element .wd-carousel-inner .wd-nav-arrows.wd-pos-sep .wd-btn-arrow.wd-next,
body .wd-products-element .wd-carousel-inner .wd-nav-arrows.wd-pos-sep .wd-btn-arrow.wd-next:hover,
body .wd-products-element .wd-carousel-inner .wd-nav-arrows.wd-pos-sep .wd-btn-arrow.wd-next:focus{
  inset-inline-end: max(-50px, calc(50% - 50vw + 10px)) !important;
  right: max(-50px, calc(50% - 50vw + 10px)) !important;
  left: auto !important;
}

/* ===== BOTON AGREGAR AL CARRITO: que no se corte el texto — 14 set 2026 =====
   La etiqueta visible no es el texto del enlace (que dice "Anadir al carrito"): el span
   .wd-action-text va con font-size:0 y la palabra sale de un ::after con content,
   definido en el CSS del Personalizador. Ese span trae white-space:nowrap y
   overflow:hidden, asi que en tarjetas angostas el texto se recortaba sin puntos
   suspensivos y quedaba "AGREGAR AL CAR". Se deja que baje de linea, con interlineado
   ajustado para que el boton no crezca de mas, y se afina el padding lateral. */
.wd-product .wd-action-text{
  white-space: normal !important;
  overflow: visible !important;
  /* OJO: el line-height va en px, no sin unidad. Este span tiene font-size:0
     (el texto visible sale del ::after), asi que un 1.25 se multiplica por 0 y
     queda en 0. Con line-height 0 las dos lineas se apilan hacia abajo desde un
     punto sin altura y el texto se ve pegado arriba dentro del boton. */
  /* 17px no es un numero al azar: el boton tiene 42px de alto minimo y 8px de
     relleno vertical, o sea 34px utiles. Dos lineas de 17px suman exactamente 34
     y el texto queda centrado. Con menos, sobra hueco abajo y el texto se ve
     pegado arriba; con mas, el boton crece. */
  line-height: 17px !important;
}
.wd-product .wd-add-btn a,
.wd-product .add-to-cart-loop{
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* 15 set 2026 Boton AGREGAR: el texto lo pone PK CATALOGO PHP; aqui se anula el pseudo del Personalizador para que no salga duplicado */
html body .wd-product .add_to_cart_button span::after,
html body .product-grid-item .add_to_cart_button span::after {
  content: none !important;
}

/* ----- TEXTO DEL BOTON DE LAS TARJETAS (15 set 2026) -----
   Texto real = "Agregar" (lo pone PK · CATALOGO · PHP).
   Escritorio: se le anade " al carrito" con un ::after. Celular: solo "Agregar".
   Hay DOS reglas ajenas que ponen font-size:0 a los span del boton:
     1) el CSS del Personalizador  ->  .wd-product .add_to_cart_button span
     2) Elementor, plantilla del catalogo (post-6592.css, elemento fe1ef9b)
   La de Elementor tiene 4 clases, por eso aqui la clase del boton va repetida:
   es la unica forma de ganarle sin tocar Elementor. Al limpiar el Personalizador
   y la plantilla, este bloque se puede simplificar.
   Para volver a mayusculas: quitar el text-transform:none. */
html body .wd-product .add_to_cart_button.add_to_cart_button.add_to_cart_button,
html body .wd-product .add-to-cart-loop.add-to-cart-loop.add-to-cart-loop {
    text-transform: none !important;
}
html body .wd-product .add_to_cart_button.add_to_cart_button.add_to_cart_button span.wd-action-text,
html body .wd-product .add-to-cart-loop.add-to-cart-loop.add-to-cart-loop span.wd-action-text {
    /* (19 set 2026) Letra mas pesada: el boton se veia plano, mas como etiqueta que como
       algo pulsable. El peso 700 le da presencia sin cambiar tamano ni color. */
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    /* (18 set 2026) El texto quedaba pegado arriba: el span se estiraba a todo el alto del
       boton y la linea de texto se apoyaba en el borde superior. Con flex queda centrado
       en los dos ejes, sin depender del alto del boton. */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    text-align: center !important;
}
html body .wd-product .add_to_cart_button.add_to_cart_button.add_to_cart_button span.wd-action-text::after,
html body .wd-product .add-to-cart-loop.add-to-cart-loop.add-to-cart-loop span.wd-action-text::after {
    content: none !important;
}
@media (min-width: 769px) {
    html body .wd-product .add_to_cart_button.add_to_cart_button.add_to_cart_button span.wd-action-text::after,
    html body .wd-product .add-to-cart-loop.add-to-cart-loop.add-to-cart-loop span.wd-action-text::after {
        content: " al carrito" !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        position: static !important;
        width: auto !important;
        display: inline !important;
        color: inherit !important;
    }
    html body .wd-product .add_to_cart_button.add_to_cart_button.add_to_cart_button,
    html body .wd-product .add-to-cart-loop.add-to-cart-loop.add-to-cart-loop {
        width: auto !important;
        min-width: 150px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ===== BOTON DE LAS TARJETAS DE PRODUCTO (migrado del Personalizador, 15 set 2026) =====
   Venian 22 reglas repartidas por todo el Personalizador. Aqui quedan 13.
   Se borraron 9 que ya no pintaban nada:
     - font-size:0 al span y los tres ::after que escribian "Agregar al carrito" / "Agregar"
       (el boton ya lleva texto real; ver bloque "TEXTO DEL BOTON" mas arriba),
     - el fondo azul #111A51 y su hover (los pisaban el gris y luego el amarillo),
     - el gris #6b7280, fusionado con el amarillo que es el que gana.
   Los !important se conservan: la plantilla de Elementor del catalogo (post-6592) pelea por
   estos mismos elementos y hoy no se puede prescindir de ellos. ===== */

/* Contenedor del boton pegado abajo de la tarjeta */
.product-grid-item .product-element-bottom .wd-add-btn,
.wd-product .product-element-bottom .wd-add-btn {
    margin-top: auto !important;
}

/* Forma del boton */
.wd-product .wd-buttons .add_to_cart_button,
.wd-product .product-element-bottom .add_to_cart_button,
.wd-product a.add_to_cart_button {
    font-size: 14px !important;
    border-radius: 50px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Sin el icono/animacion de Woodmart al pasar el mouse */
.wd-product .add-to-cart-loop::before,
.wd-product .add-to-cart-loop:hover::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    transform: translateY(100%) !important;
}
.wd-product .add-to-cart-loop:hover span,
.wd-product .add_to_cart_button:hover span {
    transform: none !important;
    opacity: 1 !important;
    translate: none !important;
}

/* Colores: amarillo de marca, texto oscuro, hover mostaza (una sola vez) */
body .products .product .button.add_to_cart_button:not(.wd-pikotin-agotado),
body .products .product .button.product_type_variable:not(.wd-pikotin-agotado),
body .products .product .wd-add-btn > a:not(.wd-pikotin-agotado) {
    background-color: #F9BB28 !important;
    background: #F9BB28 !important;
    border-color: #F9BB28 !important;
    color: #111111 !important;
}
body .products .product .button.add_to_cart_button:not(.wd-pikotin-agotado):hover,
body .products .product .button.product_type_variable:not(.wd-pikotin-agotado):hover,
body .products .product .wd-add-btn > a:not(.wd-pikotin-agotado):hover {
    background-color: #D99A00 !important;
    background: #D99A00 !important;
    border-color: #D99A00 !important;
    color: #111111 !important;
}
body .products .product .button.add_to_cart_button:not(.wd-pikotin-agotado) span,
body .products .product .button.product_type_variable:not(.wd-pikotin-agotado) span,
body .products .product .wd-add-btn > a:not(.wd-pikotin-agotado) span,
body .products .product .button.add_to_cart_button:not(.wd-pikotin-agotado):hover span,
body .products .product .button.product_type_variable:not(.wd-pikotin-agotado):hover span,
body .products .product .wd-add-btn > a:not(.wd-pikotin-agotado):hover span {
    color: #111111 !important;
}

/* Boton de producto agotado (gris, sin accion) */
body .wd-product .button.wd-pikotin-agotado,
body .product-grid-item .button.wd-pikotin-agotado {
    background-color: #e6e6e6 !important;
    color: #000000 !important;
    border: 0 !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
body .wd-product .button.wd-pikotin-agotado:hover,
body .product-grid-item .button.wd-pikotin-agotado:hover {
    background-color: #e6e6e6 !important;
    color: #000000 !important;
}

/* Celular */
@media (max-width: 767px) {
    .product-grid-item a.add_to_cart_button {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .products .product-grid-item .wd-add-btn {
        margin-top: auto !important;
        padding-top: 8px !important;
    }
    .wd-carousel-item .add_to_cart_button,
    .wd-carousel-item .wd-add-btn a.button {
        font-size: 13px !important;
        letter-spacing: 0.3px !important;
    }
    .elementor-element-98c223e .wd-add-btn,
    .elementor-element-98c223e .wd-add-btn a.button {
        height: 42px !important;
        min-height: 42px !important;
    }
}

/* ===== RESTO DEL CATALOGO (migrado del Personalizador, 15 set 2026) =====
   Venian 81 reglas; quedan 75 tras fusionar las que repetian selector (6 casos)
   y quitar un selector duplicado dentro de una lista. Se conservan los !important:
   la plantilla de Elementor del catalogo (post-6592) pelea por estos elementos. ===== */

/* ===== BOTON "VER MAS PRODUCTOS" (18 set 2026) =====
   Boton del final de las categorias y del buscador (clase wd-products-load-more).
   Reemplaza a las dos reglas que venian del Personalizador ("Cargar mas": borde negro y
   radio 8px), unificadas aqui.
   Diseno pedido por Andre: centrado, bien separado de las tarjetas, fondo blanco, borde,
   esquinas redondeadas y letra negra.
   El texto lo cambia PK · CATALOGO · PHP; en el buscador lo imprime PK · BUSCADOR · PHP.
   Los !important son necesarios: Woodmart inyecta mod-load-more-button.css dentro del BODY,
   despues de pk.css, y sin ellos gana su estilo.
   ===== */
/* (21 set 2026) El "display: block" va SOLO al boton. Antes iba tambien a
   .wd-load-more-loader, que es el aviso "Cargando..." que Woodmart tiene escondido y
   solo muestra mientras trae productos. Al forzarlo visible, en las categorias salia
   un segundo boton fijo con "Cargando..." debajo de "Ver mas productos". El loader
   conserva el resto del estilo de abajo, para que cuando aparezca se vea igual. */
a.wd-products-load-more,
a.wd-load-more.wd-products-load-more {
    display: block !important;
}

/* (21 set 2026) Mientras trae productos, Woodmart le pone la clase "loading" al boton
   para esconderlo y mostrar en su lugar el aviso "Cargando...". El display:block de
   arriba lo mantenia visible y salian los dos a la vez. Aqui se respeta ese estado:
   durante la carga se ve solo el aviso, y al terminar vuelve el boton. */
a.wd-products-load-more.loading,
a.wd-load-more.wd-products-load-more.loading {
    display: none !important;
}

a.wd-products-load-more,
a.wd-load-more.wd-products-load-more,
.wd-load-more-loader {
    width: auto !important;
    max-width: 320px !important;
    margin: 50px auto 25px !important;
    padding: 16px 40px !important;
    background-color: #fff !important;
    border: 2px solid #111a51 !important;
    --btn-brd-color: #111a51 !important;
    --btn-brd-width: 2px !important;
    --btn-brd-radius: 50px !important;
    border-radius: 50px !important;
    color: #111 !important;
    --btn-color: #111 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-align: center !important;
    box-shadow: none !important;
}
a.wd-products-load-more .load-more-label {
    color: inherit !important;
}
a.wd-products-load-more:hover {
    background-color: #111a51 !important;
    color: #fff !important;
    --btn-color: #fff !important;
}

/* === Formato global de tarjetas de producto (igual a Productos mas vendidos) === */
.wd-product, .product-grid-item {
    --wd-brd-radius: 12px;
}

.product-grid-item .product-element-bottom, .wd-product .product-element-bottom {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    text-align: center;
}

.wd-product .wd-entities-title, .product-grid-item .wd-entities-title {
    text-align: center;
}

.wd-product .price, .product-grid-item .price {
    text-align: center;
    display: block;
    width: 100%;
}

.wd-product .wd-product-cats, .product-grid-item .wd-product-cats {
    text-align: center;
    width: 100%;
}

.wd-product .wd-buttons, .product-grid-item .wd-buttons {
    text-align: center;
    justify-content: center;
}

.product-grid-item .product-image-link img, .wd-product img {
    border-radius: 8px;
}

.wd-product .product-element-top, .wd-product .product-image-link, .wd-product .product-wrapper {
    background: #fff !important;
}

.wd-product .product-image-link img {
    background: #fff !important;
}

.product-grid-item, .wd-product {
    border: 1px solid rgba(0,0,0,0.25);
    border-radius: 12px;
    overflow: hidden;
    padding: 10px 10px 16px;
    background: #fff !important;
    transition: transform .25s, box-shadow .25s;
    box-shadow: rgba(0,0,0,0.06) 0px 3px 8px, rgba(0,0,0,0.04) 0px 1px 2px !important;
}

.product-grid-item:hover, .wd-product:hover {
    transform: translateY(-3px);
    box-shadow: rgba(0,0,0,0.1) 0px 6px 14px, rgba(0,0,0,0.06) 0px 2px 4px !important;
}

.wd-product .price, .wd-product .price ins, .wd-product .price .woocommerce-Price-amount, .wd-product .price bdi {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
}

/* (19 set 2026) El precio tachado se veia IGUAL que el final: mismo tamano, mismo peso y
   mismo color. La regla de abajo ya lo pedia mas chico y gris, pero no llegaba a aplicarse:
   WooCommerce envuelve la cifra en una etiqueta <bdi> y la regla de arriba (que incluye
   ".price bdi") la volvia a poner en 19px, peso 700 y casi negro.
   Se agrega el bdi de dentro del <del> para que gane el gris pequeno.
   Por que importa: el cliente debe distinguir de un vistazo cual es el precio que paga.
   Con los dos iguales, la oferta no se lee. */
/* (19 set 2026) El precio tachado se veia IGUAL que el final: mismo tamano, peso y color.
   La regla original ya lo pedia gris y pequeno, pero WooCommerce envuelve la cifra en un
   <bdi> y otra regla de este archivo (".price bdi") lo devolvia a 19px y casi negro.

   Ademas la linea del tachado se veia doble/gruesa, sobre todo en el home: al pedir
   line-through en el <del> Y en los elementos de dentro, el navegador dibujaba DOS lineas
   superpuestas a distinta altura. Por eso ahora la linea se pide en UN solo sitio (el
   contenedor del importe) y se apaga expresamente en los de dentro.

   El tamano y el color si se aplican a todos, porque eso no se duplica.
   Por que importa: el cliente debe ver de un vistazo cual es el precio que paga. */
.wd-product.wd-product.wd-product .price.price del,
.wd-product.wd-product.wd-product .price.price del .woocommerce-Price-amount,
.wd-product.wd-product.wd-product .price.price del bdi,
.wd-product.wd-product.wd-product .price.price del .woocommerce-Price-amount bdi {
    /* Las clases van repetidas a proposito: la plantilla de Elementor del home
       (post-6592.css) fija 19px !important a los precios de sus widgets con mas fuerza que
       un selector normal. Repetir la clase sube el peso de esta regla sin usar trucos
       raros. Sin esto, en el home el tachado volvia a verse igual de grande que el final. */
    opacity: 1;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #999999 !important;
}

/* Tachado del precio anterior  (19 set 2026)
   Se usa el tachado normal del navegador, que es lo que hacen casi todas las tiendas.
   Historial, para no repetirlo: se probo dibujar la linea nosotros (un ::after de alto
   fijo) y afinarla al inverso de la densidad de pantalla, buscando que saliera identica en
   todas las tarjetas. No funciona: en pantallas de alta densidad el grosor depende de en
   que punto fisico cae el precio, y eso cambia entre una tarjeta y otra segun el largo del
   nombre del producto. Cuanto mas fina y clara es la linea, mas se nota esa diferencia.
   El tachado del navegador tambien varia, pero al ir pegado a la cifra se lee como parte
   del numero y no como una rayita suelta.
   Lo que SI se conserva de aquella tanda: el tachado va mas chico (16px) y gris frente a
   los 19px en negrita del precio final, y la linea se pide UNA sola vez (antes se dibujaba
   en el <del> y en sus capas de dentro, y salian dos superpuestas). */
.wd-product .price del .woocommerce-Price-amount {
    text-decoration: line-through !important;
    /* (19 set 2026) Gris claro para la linea: el grosor exacto lo decide el navegador y en
       celular varia un poco entre tarjetas (limite de las pantallas de alta densidad, ya
       probado sin exito con grosor fijo, linea propia, ajuste por densidad y otra
       tipografia). Con la linea mas clara que el propio numero, esa diferencia deja de
       llamar la atencion. */
    text-decoration-color: #dcdcdc !important;
}

/* Nada de lineas en las capas de dentro ni en el <del>, o se dibujan superpuestas */
.wd-product .price del,
.wd-product .price del bdi,
.wd-product .price del .woocommerce-Price-amount bdi,
.wd-product .price del .woocommerce-Price-currencySymbol {
    text-decoration: none !important;
}

.wd-product .wd-product-cats, .wd-product .wd-product-cats a {
    letter-spacing: 0.2px;
    font-weight: 400 !important;
    color: #888888 !important;
}

.wd-product .wd-product-cats a:hover {
    color: #555555 !important;
}

/* PIKOTIN-GAP: mas separacion entre productos del catalogo (no home) */
body.woocommerce-page:not(.home) .wd-content-area .products.wd-products, body.archive.woocommerce:not(.home) .wd-content-area .products.wd-products, body.post-type-archive-product:not(.home) .wd-content-area .products.wd-products, body.tax-product_cat:not(.home) .wd-content-area .products.wd-products {
    column-gap: 24px !important;
    row-gap: 30px !important;
}

/* PIKOTIN-PRICE-SLIDER: barra de rango de precio estilo Pikotin (no home) */
body:not(.home) .widget_price_filter .price_slider {
    height: 3px !important;
    background: #d8d8d8 !important;
    border-radius: 3px !important;
    border: 0 !important;
    margin-bottom: 1.1em !important;
}

body:not(.home) .widget_price_filter .price_slider .ui-slider-range {
    background: #6b7280 !important;
    height: 3px !important;
    border-radius: 3px !important;
    border: 0 !important;
}

body:not(.home) .widget_price_filter .price_slider .ui-slider-handle {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #6b7280 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 3px rgba(0,0,0,0.30) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 0 0 -6px !important;
    cursor: pointer !important;
}

body:not(.home) .widget_price_filter .price_slider .ui-slider-handle:before, body:not(.home) .widget_price_filter .price_slider .ui-slider-handle:after {
    display: none !important;
}

/* texto dinamico del precio mas pequeno */
body:not(.home) .widget_price_filter .price_slider_amount .price_label {
    font-size: 13px !important;
}

/* PIKOTIN-FILTER-BTN: boton Filtrar cilindrico, centrado, azul oscuro -> amarillo hover */
body:not(.home) .widget_price_filter .price_slider_amount {
    font-size: 13px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

body:not(.home) .widget_price_filter .price_slider_amount .button {
    background-color: #111A51 !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 9px 28px !important;
    border: 0 !important;
    display: inline-block !important;
    margin: 0 auto !important;
    float: none !important;
    text-align: center !important;
    transition: background-color .2s ease, color .2s ease !important;
}

body:not(.home) .widget_price_filter .price_slider_amount .button:hover {
    background-color: #6b7280 !important;
    color: #111A51 !important;
}

/* PIKOTIN-PRICE-ALWAYS: el filtro de rango de precio siempre visible (nunca colapsado) */
body:not(.home) .wd-sidebar .wd-widget.widget_price_filter.wd-pk-collapsed > *, body:not(.home) .wd-sidebar .widget_price_filter.wd-pk-collapsed > * {
    display: block !important;
}

/* ocultar la flechita del acordeon en el filtro de precio (siempre abierto) */
body:not(.home) .wd-sidebar .widget_price_filter > .widget-title:after {
    display: none !important;
}

body:not(.home) .wd-sidebar .widget_price_filter > .widget-title {
    cursor: default !important;
}

/* PIKOTIN-PESO-CHIPS: chips de pesos disponibles en tarjetas de productos variables (catalogo, no home) */
body .pk-peso-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin: 6px 0 2px;
}

body .pk-peso-chips .pk-chip {
    display: inline-block;
    /* (19 set 2026) De 11px a 13px: en celular se leian muy chicos y ademas son un area
       que se toca, asi que conviene que tengan cuerpo. El relleno lateral baja de 9 a 8 px
       para compensar: medido en celular a 390 px, con 13px y 8px de lado los tres chips
       (3Kg 7Kg 15Kg) siguen entrando en UNA sola linea. Si se sube mas la letra o el
       relleno, saltan a dos lineas y desalinean la tarjeta. */
    font-size: 13px;
    /* (19 set 2026) De peso 600 a 500: en 13px el 600 se veia apretado dentro de la
       pastilla. El 500 se lee mas limpio sin perder presencia. La tipografia se queda en
       Be Vietnam Pro (la misma del boton) a proposito: los chips son algo que se TOCA,
       como el boton; el nombre y el precio usan Readex Pro, que es para leer. */
    font-weight: 500;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 50px;
    background-color: #f0f0f0;
    color: #555555;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    user-select: none;
}

body .pk-peso-chips .pk-chip:hover {
    background-color: #e8eaf3;
    color: #111A51;
    border-color: #111A51;
}

/* (19 set 2026) El chip seleccionado era amarillo, el mismo color del boton "Agregar".
   Dos elementos del mismo color de accion en la misma tarjeta compiten: el ojo no sabe
   cual es el paso siguiente. El amarillo queda SOLO para el boton (accion) y el chip
   seleccionado pasa al azul de la marca (seleccion). Los no seleccionados siguen grises. */
body .pk-peso-chips .pk-chip-active, body .pk-peso-chips .pk-chip-active:hover {
    background-color: #111A51;
    color: #ffffff;
    border-color: #111A51;
}

body .pk-peso-chips .pk-chip-disabled, body .pk-peso-chips .pk-chip-disabled:hover {
    background-color: #eeeeee;
    color: #bbbbbb;
    border-color: #e6e6e6;
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: .8;
}

/* PIKOTIN-HIDE-CATS: ocultar la categoria debajo del nombre en las tarjetas de producto (catalogo, no home) */
body .products .product .wd-product-cats {
    display: none !important;
}

/* PIKOTIN-PRICE-ALIGN: tarjeta compacta, precios alineados, nombre mas pequeno (catalogo, no home) */
body .products .product .wd-entities-title, body .products .product .wd-entities-title a {
    font-size: 15px !important;
    line-height: 20px !important;
}

body .products .product .price {
    font-weight: 600 !important;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
    min-height: auto !important;
}

body .products .product .pk-peso-chips {
    min-height: 22px !important;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
}

/* reservar el mismo espacio del area de chips en tarjetas SIN chips para alinear el boton */
body .products .product .product-element-bottom .price:not(:has(~ .pk-peso-chips)) {
    margin-bottom: 22px !important;
}

/* PIKOTIN-TITLE-LEFT: nombre del producto centrado (todas las lineas) (catalogo + home) */
body .products .product .wd-entities-title {
    margin-bottom: 2px !important;
    min-height: 36px !important;
    text-align: center !important;
}

body .products .product .wd-entities-title a {
    display: inline !important;
    text-align: center !important;
}

@media (max-width: 767px) {
    /* (19 set 2026) Aqui se forzaba 1 producto por vista en TODOS los carruseles de producto
       en celular. Eso dejaba "Productos relacionados" de la ficha con un solo producto
       ocupando la pantalla entera. Se quita: cada carrusel usa lo suyo (relacionados 2,
       Descuentazos y Mas vendidos 2). */
    /* Carrusel productos mobile: flechas sobre las tarjetas, sin margen lateral */
    .wd-products.wd-carousel-container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .wd-products.wd-carousel-container .wd-carousel.wd-grid {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .wd-products.wd-carousel-container .wd-carousel-item {
        width: 100% !important;
    }
    .wd-products.wd-carousel-container .wd-btn-arrow.wd-prev {
        left: 0 !important;
        right: auto !important;
    }
    .wd-products.wd-carousel-container .wd-btn-arrow.wd-next {
        right: 0 !important;
        left: auto !important;
    }
    /* (19 set 2026) Antes aqui se FORZABAN las flechas visibles encima de las tarjetas en
       celular; en la ficha de producto tapaban el nombre del producto. En pantalla tactil
       el cliente desliza y ademas el carrusel avanza solo (pk.js), asi que se ocultan.
       En computadora siguen saliendo. */
    .wd-products.wd-carousel-container .wd-nav-arrows,
    .wd-products.wd-carousel-container .wd-btn-arrow {
        display: none !important;
    }
    .wd-products.wd-carousel-container .wd-entities-title, .products .wd-entities-title {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .products.wd-products.wd-grid-g {
        gap: 16px 12px !important;
        align-items: stretch !important;
    }
    .products .product-grid-item {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    /* === Estilo tipo Superpet: alturas fijas para que precio y boton AGREGAR queden perfectamente alineados === */
    .products .product-grid-item .product-wrapper {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    /* Imagen: altura fija, imagen completa centrada (la holgura se absorbe aqui, no como hueco antes del boton) */
    .products .product-grid-item .product-element-top {
        height: 150px !important;
        flex: 0 0 auto !important;
    }
    .products .product-grid-item .product-element-top .product-image-link, .products .product-grid-item .product-element-top img {
        height: 150px !important;
        width: 100% !important;
        object-fit: contain !important;
    }
    /* Bloque inferior crece para empujar el boton al fondo */
    .products .product-grid-item .product-element-bottom {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
    }
    /* Titulo: reserva fija de 2 lineas (igual en todas las tarjetas) */
    .wd-content-area .products .wd-entities-title {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        height: 2.7em !important;
        min-height: 2.7em !important;
        line-height: 1.35 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    /* Precio (incluye rango de dos precios) centrado */
    .products .wd-product .price {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }
    /* Chips de peso: alto reservado para que las tarjetas sin chips alineen igual */
    .products .pk-peso-chips {
        justify-content: center !important;
        min-height: 28px !important;
        margin-top: 6px !important;
    }
    .products .pk-chip {
        transition: background-color .15s ease, color .15s ease;
    }
    /* (19 set 2026) Esta regla ponia AMARILLO el chip al pasar el dedo o el mouse, y en
       celular el navegador deja ese estado "pegado" despues de tocar: por eso el chip
       recien seleccionado se veia amarillo en vez de azul.
       El amarillo es solo del boton "Agregar". Aqui el hover usa el azul suave, igual que
       la regla de hover de mas arriba, y el seleccionado manda sobre el hover. */
    .products .pk-chip:hover {
        background-color: #e8eaf3 !important;
        color: #111a51 !important;
        border-color: #111a51 !important;
    }
    .products .pk-chip.pk-chip-active:hover {
        background-color: #111a51 !important;
        color: #ffffff !important;
        border-color: #111a51 !important;
    }
}

/* === Ocultar vista rapida y lista de deseos en tarjetas de producto === */
.wd-product .wd-quick-view-icon, .wd-product .quick-view, .wd-product .wd-wishlist-btn, .wd-product .wd-wishlist-icon, .product-grid-item .wd-quick-view-icon, .product-grid-item .wd-wishlist-btn {
    display: none !important;
}

.woocommerce-breadcrumb a, .wd-breadcrumbs a, nav.breadcrumbs a, .load-more-label, .wd-load-more-btn, .cart-item-link, .woocommerce-mini-cart .woocommerce-Price-amount, .widget_shopping_cart .woocommerce-Price-amount {
    color: #111A51 !important;
}


/* Refuerzo: variables del boton 'Cargar mas' para borde redondeado y negro */
.wd-products-load-more.btn, .wd-products-load-more.wd-load-more, a.wd-load-more.btn {
    --btn-brd-color: #000000;
    --btn-brd-width: 2px;
    border: 2px solid #000000 !important;
}

/* === Fix definitivo boton 'Cargar mas': mayor especificidad que el theme === */
.products-footer a.wd-load-more, .wd-loop-footer a.wd-load-more, .products-footer .wd-products-load-more.wd-load-more.btn, body .wd-products-load-more.btn.wd-load-more {
    --btn-brd-color: #000000 !important;
    --btn-brd-width: 2px !important;
    border: 2px solid #000000 !important;
}

@media (max-width: 767px) {
    /* Carrusel: flechas sobre la imagen, no el título */
    .wd-products-element .wd-nav-arrows .wd-btn-arrow {
        top: 75px;
    }
    /* ---------------------------------------------------------
   * 7. PRECIO en tarjetas de producto – Ajustar tamaño
   *    19px es un poco grande para cards en carrusel de 1 item.
   *    17px mantiene legibilidad con mejor balance visual.
   * --------------------------------------------------------- */
    .wd-carousel-item .wrap-price .price, .wd-carousel-item .price {
        font-size: 17px !important;
    }
}

/* Pikotin - Ocultar breadcrumb en tienda, categorias y busqueda */
body.woocommerce .wd-breadcrumbs, body.post-type-archive-product .wd-breadcrumbs, body.tax-product_cat .wd-breadcrumbs, body.search .wd-breadcrumbs, body.search-results .wd-breadcrumbs, body.woocommerce nav.woocommerce-breadcrumb, body.post-type-archive-product nav.woocommerce-breadcrumb, body.tax-product_cat nav.woocommerce-breadcrumb, body.search nav.woocommerce-breadcrumb, body.search-results nav.woocommerce-breadcrumb {
    display: none !important;
}

/* Pikotin - Ocultar chips de filtros activos en resultados de busqueda */
.wd-active-filters, .widget_layered_nav_filters {
    display: none !important;
}

/* Pikotin - Tamano del texto de resultados de busqueda */
.woocommerce-result-count, .woocommerce-result-count strong {
    font-size: 12px !important;
}

/* Pikotin - Quitar negrita del selector de ordenamiento en busqueda */
.woocommerce-ordering, .woocommerce-ordering select.orderby, .wd-dropdown-results {
    font-weight: 400 !important;
}

/* Pikotin - Tamano del selector de ordenamiento en busqueda */
.woocommerce-ordering select.orderby, .wd-dropdown-results {
    font-size: 14px !important;
}

/* Pikotin - Flecha del desplegable de ordenamiento en busqueda */
.woocommerce-ordering select.orderby {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 22px !important;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E') !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: auto 18px !important;
}

@media (hover: hover) and (pointer: fine) {
    .wd-product.product-grid-item {
        transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
    }
    .wd-product.product-grid-item:hover {
        border-color: #111A51 !important;
        background-color: rgba(17,26,81,0.03) !important;
        box-shadow: 0 0 0 1px rgba(17,26,81,0.35) !important;
        transform: translateY(-1px) !important;
        cursor: pointer;
    }
}

/* ===== LAYOUT DE CATALOGO, SIDEBAR DE FILTROS, TITULO DE PAGINA Y ETIQUETAS (migrado del Personalizador, 15 set 2026) =====
   16 reglas sueltas que estaban fuera de su area. Mismo orden, sin cambios. ===== */
/* === Ancho ampliado catalogo (tienda/categorias, NO home) === */
body.woocommerce-page:not(.home) .wd-content-layout, body.archive.woocommerce:not(.home) .wd-content-layout, body.post-type-archive-product:not(.home) .wd-content-layout, body.tax-product_cat:not(.home) .wd-content-layout {
    max-width: 1400px !important;
}
/* PIKOTIN-SIDEBAR: ancho fijo filtros ~250px (no home) */
body.woocommerce-page:not(.home) .wd-content-layout, body.archive.woocommerce:not(.home) .wd-content-layout, body.post-type-archive-product:not(.home) .wd-content-layout, body.tax-product_cat:not(.home) .wd-content-layout {
    grid-template-columns: 250px 1fr !important;
}
body.woocommerce-page:not(.home) .wd-content-layout .wd-sidebar.wd-grid-col, body.archive.woocommerce:not(.home) .wd-content-layout .wd-sidebar.wd-grid-col, body.post-type-archive-product:not(.home) .wd-content-layout .wd-sidebar.wd-grid-col, body.tax-product_cat:not(.home) .wd-content-layout .wd-sidebar.wd-grid-col {
    grid-column: auto / span 1 !important;
    width: 250px !important;
    max-width: 250px !important;
}
body.woocommerce-page:not(.home) .wd-content-layout .wd-content-area.wd-grid-col, body.archive.woocommerce:not(.home) .wd-content-layout .wd-content-area.wd-grid-col, body.post-type-archive-product:not(.home) .wd-content-layout .wd-content-area.wd-grid-col, body.tax-product_cat:not(.home) .wd-content-layout .wd-content-area.wd-grid-col {
    grid-column: auto / span 1 !important;
}
/* PIKOTIN-FILTER-STYLE: formato filtros estilo Gopet (no home) */
body.woocommerce-page:not(.home) .wd-sidebar .wd-widget, body.archive.woocommerce:not(.home) .wd-sidebar .wd-widget, body.post-type-archive-product:not(.home) .wd-sidebar .wd-widget, body.tax-product_cat:not(.home) .wd-sidebar .wd-widget {
    border-bottom: 1px solid #e6e6e6 !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.woocommerce-page:not(.home) .wd-sidebar .wd-widget > .widget-title, body.archive.woocommerce:not(.home) .wd-sidebar .wd-widget > .widget-title, body.post-type-archive-product:not(.home) .wd-sidebar .wd-widget > .widget-title, body.tax-product_cat:not(.home) .wd-sidebar .wd-widget > .widget-title {
    color: #000000 !important;
    font-weight: 600 !important;
    text-transform: none !important;
    font-size: 16px !important;
    margin: 0 !important;
    padding: 16px 0 !important;
    cursor: pointer !important;
    position: relative !important;
    display: block !important;
}
/* flecha chevron a la derecha */
body.woocommerce-page:not(.home) .wd-sidebar .wd-widget > .widget-title, body.archive.woocommerce:not(.home) .wd-sidebar .wd-widget > .widget-title, body.post-type-archive-product:not(.home) .wd-sidebar .wd-widget > .widget-title, body.tax-product_cat:not(.home) .wd-sidebar .wd-widget > .widget-title {
    padding-right: 24px !important;
}
body.woocommerce-page:not(.home) .wd-sidebar .wd-widget > .widget-title::after, body.archive.woocommerce:not(.home) .wd-sidebar .wd-widget > .widget-title::after, body.post-type-archive-product:not(.home) .wd-sidebar .wd-widget > .widget-title::after, body.tax-product_cat:not(.home) .wd-sidebar .wd-widget > .widget-title::after {
    content: '' !important;
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid #000 !important;
    border-bottom: 2px solid #000 !important;
    transform: translateY(-70%) rotate(45deg) !important;
    transition: transform .2s ease !important;
}
/* estado colapsado: oculta el cuerpo del widget */
body.woocommerce-page:not(.home) .wd-sidebar .wd-widget.wd-pk-collapsed > *:not(.widget-title), body.archive.woocommerce:not(.home) .wd-sidebar .wd-widget.wd-pk-collapsed > *:not(.widget-title), body.post-type-archive-product:not(.home) .wd-sidebar .wd-widget.wd-pk-collapsed > *:not(.widget-title), body.tax-product_cat:not(.home) .wd-sidebar .wd-widget.wd-pk-collapsed > *:not(.widget-title) {
    display: none !important;
}
/* flecha apuntando arriba cuando esta abierto */
body.woocommerce-page:not(.home) .wd-sidebar .wd-widget:not(.wd-pk-collapsed) > .widget-title::after, body.archive.woocommerce:not(.home) .wd-sidebar .wd-widget:not(.wd-pk-collapsed) > .widget-title::after, body.post-type-archive-product:not(.home) .wd-sidebar .wd-widget:not(.wd-pk-collapsed) > .widget-title::after, body.tax-product_cat:not(.home) .wd-sidebar .wd-widget:not(.wd-pk-collapsed) > .widget-title::after {
    transform: translateY(-30%) rotate(225deg) !important;
}
/* espacio inferior del cuerpo del widget */
body.woocommerce-page:not(.home) .wd-sidebar .wd-widget > *:not(.widget-title), body.archive.woocommerce:not(.home) .wd-sidebar .wd-widget > *:not(.widget-title), body.post-type-archive-product:not(.home) .wd-sidebar .wd-widget > *:not(.widget-title), body.tax-product_cat:not(.home) .wd-sidebar .wd-widget > *:not(.widget-title) {
    margin-bottom: 14px !important;
}
/* PIKOTIN-FILTER-ALIGN: letra mas grande titulos (no home) */
body.woocommerce-page:not(.home) .wd-sidebar .wd-widget > .widget-title, body.archive.woocommerce:not(.home) .wd-sidebar .wd-widget > .widget-title, body.post-type-archive-product:not(.home) .wd-sidebar .wd-widget > .widget-title, body.tax-product_cat:not(.home) .wd-sidebar .wd-widget > .widget-title {
    font-size: 18px !important;
}

@media (max-width: 768px) {
    .product-labels {
        max-width: 70% !important;
    }
    .product-label {
        white-space: nowrap !important;
        word-break: normal !important;
        font-size: 13px !important;
        padding: 5px 10px !important;
        min-width: auto !important;
        line-height: 1.2 !important;
    }
}
/* === Badge de descuento: color rojo para mayor impacto y urgencia === */
.product-label.onsale {
    background-color: #E63946 !important;
    border-radius: 6px !important;
}
/* Pikotin - Ocultar titulo en tienda, categorias y busqueda */
body.woocommerce .wd-page-title, body.post-type-archive-product .wd-page-title, body.tax-product_cat .wd-page-title, body.search .wd-page-title, body.search-results .wd-page-title {
    display: none !important;
}

/* ############################################################
   BLOQUE PRODUCTO  (antes snippet WPCode 26364)
   (17 set 2026) Se quitaron 4 reglas del boton WhatsApp de la ficha (a.whatmsgd):
   el boton ya no se genera (se elimino de functions.php), asi que no hay nada que ocultar.
   ############################################################ */

/* ==========================================================
   PK · PRODUCTO · CSS
   Consolidado el 12 sep 2026. Reemplaza a los snippets: 24318, 24369, 24933, 25220, 26358, 26359, 26362
   Regla: todo el CSS de esta area va AQUI. No crear snippets sueltos.
   ========================================================== */

/* ---- #24318 · Pikotin - Ficha producto (sin Plin + WhatsApp secundario + Yape texto) ---- */
/* Tarea 4D: ocultar el icono de Plin (ultimo) de la imagen combinada de medios de pago */
img.wp-image-16102 {
    clip-path: inset(0 17.1% 0 0);
    width: 158px !important;
    max-width: none !important;
}

/* Tarea 6: boton WhatsApp como secundario (transparente, borde verde) debajo de Anadir al carrito */

/* Tarea 4E (ficha): texto 'Yape al instante' bajo los iconos de pago */
.pikotin-yape-line {
    text-align: center;
    color: #1E8E4E;
    font-size: 13px;
    font-weight: 700;
    margin-top: 8px;
}

/* Tarea 7: reemplazar texto del carrito bajo FINALIZAR COMPRA */
.wc-proceed-to-checkout::after {
    content: "Elige Delivery o Recojo en tienda en el siguiente paso. El delivery se calcula seg\00fan tu distrito (gratis desde S/90)." !important;
}

/* ===== Tarea 5: Drawer / mini-carrito lateral ===== */
/* 5B: jerarquia de botones - Finalizar arriba (primario azul), Ver carrito abajo (secundario) */
.cart-widget-side .woocommerce-mini-cart__buttons.buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cart-widget-side .woocommerce-mini-cart__buttons a.button.checkout {
    order: 1;
    background: #1C49C2 !important;
    background-color: #1C49C2 !important;
    color: #fff !important;
    width: 100%;
    border: none !important;
    font-weight: 700;
}
.cart-widget-side .woocommerce-mini-cart__buttons a.button.btn-cart {
    order: 2;
    background: transparent !important;
    background-color: transparent !important;
    color: #1C49C2 !important;
    border: 1px solid #1C49C2 !important;
    width: 100%;
    font-weight: 600;
}
/* 5D: subtotal navy negrita */
.cart-widget-side .woocommerce-mini-cart__total,
.cart-widget-side .woocommerce-mini-cart__total .amount {
    color: #111A51 !important;
    font-weight: 800 !important;
}
/* 5C: fila de confianza bajo los botones */
.pikotin-drawer-trust {
    text-align: center;
    margin-top: 10px;
    color: #5A5A5A;
    font-size: 12px;
    line-height: 1.5;
}
.pikotin-drawer-trust .pikotin-drawer-icons {
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 4px;
    color: #111A51;
}
/* 5E: link seguir comprando */
.pikotin-seguir {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: #5A5A5A;
    font-size: 13px;
    text-decoration: none;
}

/* ---- #24369 · Pikotin - Rec 5 CSS bloque "Te puede interesar" ---- */
/* Pikotin - Rec 5: estilo del bloque "Te puede interesar" en el carrito */
.pikotin-cross-sells {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid #e6e6e6;
    clear: both;
}
.pikotin-cross-sells .pikotin-cross-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a2151;
    margin: 0 0 20px;
    text-align: left;
}
.pikotin-cross-sells .wd-products-element,
.pikotin-cross-sells ul.products {
    margin-bottom: 0;
}
.pikotin-cross-sells .button.add_to_cart_button {
	    white-space: nowrap;
	    padding-left: 10px;
	    padding-right: 10px;
	
}

/* ---- #24933 · Pikotin - Precio tachado centrado y más grueso ---- */
/* Pikotin - Precio tachado: centrado y mas grueso */

/* Quitar tachado nativo del DEL */
.price del,
.product-element-bottom .price del,
.summary .price del,
.woocommerce-variation-price del {
    text-decoration: none !important;
    position: relative;
    display: inline-block;
}

/* Raya centrada con top calculado */
.price del::after,
.product-element-bottom .price del::after,
.summary .price del::after,
.woocommerce-variation-price del::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    transform: translateY(-50%);
    height: 2px;
    background-color: currentColor;
}
/* Pikotin - Badge de descuento
   (20 set 2026) De 13px a 15px, con algo mas de relleno. Es lo primero que ve el cliente
   al entrar en la tarjeta (esquina superior izquierda, donde arranca la lectura) y a 13px
   quedaba chico en celular.
   Medido a 390px: pasa de 54x27 a 63x32, o sea 39% del ancho de la tarjeta. Con 16px
   llegaba al 42% y empezaba a comerse la foto del producto, por eso se queda en 15. */
span.onsale.product-label,
.product-labels .onsale {
    font-size: 15px !important;
    padding: 6px 12px !important;
    line-height: 1.3 !important;
}

/* Pikotin - Quantity + precio en carrito lateral: misma linea, tamanio reducido */

/* Cart-info: flex row para poner quantity y precio en la misma linea */
.woocommerce-mini-cart-item .cart-info,
.mini_cart_item .cart-info {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 10px !important;
}

/* Titulo del producto: ocupa toda la linea */
.woocommerce-mini-cart-item .cart-info .wd-entities-title,
.mini_cart_item .cart-info .wd-entities-title {
    width: 100% !important;
    flex: 0 0 100% !important;
}

/* Quantity selector: bloque pegado mas pequeno */
.woocommerce-mini-cart-item .quantity,
.mini_cart_item .quantity {
    border: 1.5px solid rgba(0,0,0,0.18) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    gap: 0 !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0;
}

/* Boton menos (-) */
.woocommerce-mini-cart-item .quantity input.minus,
.mini_cart_item .quantity input.minus {
    border: none !important;
    border-right: 1.5px solid rgba(0,0,0,0.18) !important;
    border-radius: 0 !important;
    background: #f2f2f2 !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    font-size: 13px !important;
    cursor: pointer;
}

/* Input numero central */
.woocommerce-mini-cart-item .quantity input.qty,
.mini_cart_item .quantity input.qty {
    border: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    width: 30px !important;
    height: 24px !important;
    text-align: center !important;
    font-size: 12px !important;
    padding: 0 !important;
}

/* Boton mas (+) */
.woocommerce-mini-cart-item .quantity input.plus,
.mini_cart_item .quantity input.plus {
    border: none !important;
    border-left: 1.5px solid rgba(0,0,0,0.18) !important;
    border-radius: 0 !important;
    background: #f2f2f2 !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    font-size: 13px !important;
    cursor: pointer;
}

/* Precio al costado: misma altura que el quantity */
.woocommerce-mini-cart-item .cart-info > span.quantity,
.mini_cart_item .cart-info > span.quantity {
    font-size: 13px !important;
    line-height: 24px !important;
    margin: 0 !important;
}

/* ---- #25220 · Pikotin - Chips de peso centrados en tarjetas ---- */
/* Centrar chips de peso en tarjetas de producto */
body .wrap-price .pk-peso-chips {
  width: 100% !important;
  justify-content: center !important;
}

/* ---- #26358 · Pikotin - Carruseles de productos: tarjetas de igual altura ---- */
/* Empareja la altura de las tarjetas en los carruseles de productos.
   Aplica en celular Y en escritorio (14 set 2026, a pedido de Andre; antes
   estaba encerrado en @media max-width 768px y por eso en escritorio no valia).
   Sin esto, los productos con presentaciones (3Kg / 15Kg) quedan 49 px mas altos
   que los simples, porque llevan la fila de chips, y los botones AGREGAR no coinciden. */
.wd-carousel { align-items: stretch !important; }

.wd-carousel-item {
  display: flex !important;
  height: auto !important;
}

.wd-carousel-item > .wd-product {
  display: flex !important;
  flex-direction: column;
  width: 100%;
}

.wd-product > .wd-product-wrapper {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}

.wd-product .product-element-bottom {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
}

.wd-product .product-element-bottom .wd-add-btn,
.wd-product .product-element-bottom > form,
.wd-product .product-element-bottom .wd-bottom-actions {
  margin-top: auto !important;
}

/* ---- #26359 · Pikotin - Celular: nombre de producto 14px y 3 lineas ---- */
/* Solo en celular: el nombre del producto baja a 14 px y puede ocupar
   3 lineas en vez de 2, para que no se corte el peso ni la presentacion.
   El selector va con .wd-products .wd-product h3 porque hay otra regla
   del sitio que fija 15 px con !important. */
@media (max-width: 768px) {
  body .wd-products .wd-product h3.wd-entities-title,
  body .wd-products .wd-product h3.wd-entities-title a {
    font-size: 14px !important;
    line-height: 19px !important;
  }

  body .wd-products .wd-product h3.wd-entities-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 57px !important;
    overflow: hidden !important;
  }
}

/* ---- #26362 · Pikotin - Ficha de producto: mostrar ruta (breadcrumb) corta ---- */
/* Pikotin - Ficha de producto: mostrar la ruta (breadcrumb)
   Personalizar > CSS adicional oculta el breadcrumb con body.woocommerce,
   clase que tambien lleva la ficha de producto. Aqui se vuelve a mostrar
   SOLO en la ficha de producto, en version corta:
   Inicio / Categoria madre / Categoria final  (sin el nombre del producto) */

html body.single-product .wd-breadcrumbs,
html body.single-product nav.woocommerce-breadcrumb {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  line-height: 1.4;
  padding: 6px 0 2px;
}

/* deja solo los 3 primeros niveles visibles */
html body.single-product .wd-breadcrumbs > *:nth-child(n+5) { display: none !important; }

/* vuelve a mostrar la categoria final (la de mas abajo) */
html body.single-product .wd-breadcrumbs > *:nth-last-child(3) { display: inline-block !important; }

/* quita el separador que queda suelto antes del nombre del producto */
html body.single-product .wd-breadcrumbs > *:nth-last-child(2) { display: none !important; }

/* oculta el nombre del producto (ya esta como titulo abajo) */
html body.single-product .wd-breadcrumbs > .wd-last { display: none !important; }

/* ---- 12 sep 2026 · Ficha: quitar el badge de descuento sobre la foto ----
   El porcentaje y el ahorro ahora van junto al precio (ver "PK · PRODUCTO · PHP").
   El badge se mantiene en listados y carruseles, que es donde sirve. */
html body.single-product .product-image-summary .product-labels,
html body.single-product .woocommerce-product-gallery .product-labels { display: none !important; }

/* ---- 12 sep 2026 · Ficha: bloque de ahorro junto al precio ---- */
.pk-ahorro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 14px; line-height: 1.2; }
.pk-ahorro:empty { display: none; }
.pk-ahorro .pk-ahorro-pct { background: #e02b2b; color: #fff; font-weight: 700; font-size: 13px; padding: 3px 8px; border-radius: 4px; }
.pk-ahorro .pk-ahorro-txt { color: #1b6b45; font-weight: 600; font-size: 14px; }
.pk-ahorro .pk-ahorro-txt .woocommerce-Price-amount { color: inherit; font-weight: 700; }

/* ===== FICHA DE PRODUCTO (migrado del Personalizador, 15 set 2026) =====
   50 reglas que vivian en el Personalizador. Se quitaron los !important:
   al cargar desde aqui ya van despues del tema. Si alguna se pierde,
   se le devuelve el !important SOLO a esa linea y se anota por que.
   Se fusionaron las dos reglas repetidas de .wd-after-add-to-cart.
   DEUDA: el stock "Disponible/Agotado" se pinta con CSS (font-size:0 + ::after).
   Deberia ser texto real desde PHP; queda anotado para cuando toquemos PRODUCTO · PHP. ===== */

/* === Ocultar logo de marca en fichas de producto === */
.single-product .wd-product-brands { display: none !important; }

/* === Ancho de fichas de producto a 1400px (como SuperPet) === */
.single-product .container { max-width: 1400px; }

/* === Breadcrumb arriba, ancho completo, izquierda y letra pequena === */
.single-product .product-image-summary-inner { position: relative; padding-top: 40px; }
.single-product .summary .single-breadcrumbs-wrapper { position: absolute; top: 0; left: 0; right: 0; width: 100%; margin: 0; }
.single-product .wd-breadcrumbs.woocommerce-breadcrumb {  justify-content: flex-start; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === Reducir tamano del titulo del producto === */
.single-product .product_title { font-size: 24px; line-height: 1.3; }

/* === Descripcion corta: tamano, interlineado y reparto de lineas === */
.single-product .woocommerce-product-details__short-description, .single-product .woocommerce-product-details__short-description li, .single-product .woocommerce-product-details__short-description p { font-size: 14px; line-height: 1.6; text-align: left; text-wrap: pretty; overflow-wrap: break-word; word-break: normal; }
.single-product .woocommerce-product-details__short-description li { margin-bottom: 8px; }

/* === Precio en azul navy de la marca === */
.single-product .summary .price, .single-product .summary .price ins, .single-product .summary .price .woocommerce-Price-amount { color: #111A51; }

/* === Boton anadir al carrito: navy con hover mostaza === */
.single-product .single_add_to_cart_button.button { background-color: #111A51; border-color: #111A51; color: #fff; transition: background-color .2s ease, color .2s ease; }
.single-product .single_add_to_cart_button.button:hover, .single-product .single_add_to_cart_button.button:focus { background-color: #F9BB28; border-color: #F9BB28; color: #111A51; }

/* === Ocultar boton de WhatsApp en ficha de producto === */

/* === Ocultar WhatsApp (mayor especificidad) === */

/* ===== PIKOTIN PRODUCT TWEAKS - Claude ===== */
/* Selector de cantidad mas grande y estetico */
.single-product div.product form.cart {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.product .quantity,
.single-product div.product form.cart .quantity {
  width: 130px;
  height: 38px;
  flex: 0 0 130px;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  overflow: hidden;
}
.product .quantity .minus,
.product .quantity .plus {
  width: 38px;
  height: 100%;
  font-size: 18px;
  line-height: 1;
  border: none;
  background: #f5f5f5;
  color: #111a51;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product .quantity .minus:hover,
.product .quantity .plus:hover {
  background: #ececec;
}
.product .quantity input.qty {
  width: 54px !important;
  height: 100% !important;
  font-size: 16px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid rgba(0,0,0,0.12) !important;
  border-right: 1px solid rgba(0,0,0,0.12) !important;
  background: #fff !important;
  -moz-appearance: textfield !important;
}
.product .quantity input.qty::-webkit-outer-spin-button,
.product .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
/* Boton anadir al carrito ocupa el ancho restante */
.single-product div.product form.cart .single_add_to_cart_button {
  flex: 1 1 auto !important;
  height: 45px !important;
  padding: 0 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ocultar Anadir a la lista de deseos y Condiciones de envio */
.summary .wd-wishlist-btn { display: none !important; }
.wd-button-wrapper a.wd-open-popup { display: none !important; }

/* Reordenar columna del resumen: boton -> linea -> pago -> SKU */
.summary-inner.wd-set-mb {
  display: flex;
  flex-direction: column;
}
.summary-inner.wd-set-mb > * { order: 0; }
.summary-inner.wd-set-mb > form.cart { order: 1; }
.summary-inner.wd-set-mb > .wd-after-add-to-cart {
    order: 2;
    border-top: 0.8px solid rgba(0,0,0,0.12);
    padding-top: 18px;
    margin-top: 18px;
}
.summary-inner.wd-set-mb > .product_meta { order: 3; border-top: none; padding-top: 0; margin-top: 0; }

/* Recuadro de medios de pago: gris, 500px, centrado, achicado */
.elementor-element-ab86a3c {
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  background: #ececec;
  padding: 8px 16px;
  border-radius: 8px;
  margin-top: 0;
  position: relative;
}
/* Linea separadora a TODO el ancho de la columna (en el contenedor) */
.elementor-element-ab86a3c::before { display: none !important; content: none; }
/* (regla duplicada del mismo selector, fusionada arriba) */
/* Ocultar el titulo grande del recuadro */
.elementor-element-ab86a3c .elementor-element-7cd9919 { display: none !important; }
/* Logos + texto Yape en una sola fila centrada */
.elementor-element-ab86a3c .elementor-element-7125649 .elementor-widget-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
}
.elementor-element-ab86a3c .elementor-element-7125649 img {
  width: 130px;
  height: auto;
  margin: 0;
  flex: 0 0 auto;
}
.elementor-element-ab86a3c .pikotin-yape-line {
  font-size: 13px;
  margin: 0;
  white-space: nowrap;
}

/* Ocultar categoria y SKU discreto */
.product_meta .posted_in { display: none !important; }
.product_meta .sku_wrapper {  color: #888; }
.product_meta .sku_wrapper .sku { color: #888; }
/* ===== FIN PIKOTIN PRODUCT TWEAKS ===== */

/* ===== PIKOTIN VARIABLE & STOCK - Claude ===== */
/* Stock: mostrar solo Disponible / Agotado (sin numero) */
.single-product .product .stock { font-size: 0; }
.single-product .product .stock::before { font-size: 16px; }
.single-product .product .stock::after { font-size: 16px; font-weight: 600; }
.single-product .product .stock.in-stock::after { content: "Disponible"; }
.single-product .product .stock.out-of-stock::after { content: "Agotado"; }

/* Productos variables: ordenar layout (selector de peso arriba, boton ancho) */
.single-product div.product form.variations_form.cart { display: block; }
.single-product div.product form.variations_form.cart .variations {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}
.single-product div.product form.variations_form.cart .single_variation_wrap {
  display: block;
  width: 100%;
}
.single-product div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
}
.single-product div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 1 auto !important;
  height: 45px !important;
  padding: 0 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.single-product div.product form.cart .single_variation { margin-bottom: 8px; }

/* Contador oculto (stock = 1): no mostrar caja vacia */
.single-product div.product form.cart .quantity.hidden { display: none !important; }

/* Ocultar etiqueta del producto (igual que la categoria) */
.product_meta .tagged_as { display: none !important; }

/* Nota 15 set 2026: estas tres reglas necesitaron conservar el !important —
   sin el, Woodmart recupera la altura del campo de cantidad y el ancho del boton.
   Las demas 47 reglas de la ficha funcionan sin el. */

/* Nota 15 set 2026: las reglas que OCULTAN elementos de la ficha (WhatsApp, lista de deseos,
   marca, categoria, etiqueta) tambien necesitan !important: sin el, Woodmart los vuelve a mostrar
   y el boton de comprar pierde su ancho. */

/* ===== LAYOUT DE FICHA Y SWATCHES (migrado del Personalizador, 15 set 2026) =====
   3 reglas sueltas que estaban fuera de su area. Mismo orden, sin cambios. ===== */
/* PIKOTIN-PRODUCT-CENTER: centrar el contenido en paginas de producto individual (no home) */
body.single-product .wd-content-layout.content-layout-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* === Botones de peso (swatches) redondeados === */
.wd-swatch.wd-text {
    border-radius: 8px !important;
    border: 1.3px solid rgba(0, 0, 0, 0.35) !important;
    padding: 2px 4px !important;
}
.wd-swatch.wd-text.wd-active {
    border-radius: 8px !important;
    border: 1.3px solid rgb(36, 36, 36) !important;
}

/* ############################################################
   BLOQUE CARRITO  (antes snippet WPCode 24323)
   ############################################################ */

/* ===== PK · CARRITO · CSS ===== 
   Fusion 15 set 2026: une los antiguos 24323 (botones y resumen del drawer)
   y 24325 (override amarillo del boton FINALIZAR).
   Los dos quedan apagados, no borrados. Respaldo: wpcode-respaldo-98-snippets-2026-09-15.json
   Regla: todo CSS del carrito/drawer va AQUI, no en el Personalizador. ===== */

/* Pikotin - Drawer: botones redondeados + FINALIZAR COMPRA amarillo + descuento */
.cart-widget-side .woocommerce-mini-cart__buttons a.button,
.cart-widget-side .woocommerce-mini-cart__buttons a.checkout,
.cart-widget-side .woocommerce-mini-cart__buttons a.btn-cart {
    border-radius: 10px !important;
}
.cart-widget-side .woocommerce-mini-cart__buttons a.checkout {
    background-color: #F9BB28 !important;
    background-image: none !important;
    border: 1px solid #F9BB28 !important;
    color: #111111 !important;
    transition: background-color .2s ease, border-color .2s ease;
}
.cart-widget-side .woocommerce-mini-cart__buttons a.checkout:hover,
.cart-widget-side .woocommerce-mini-cart__buttons a.checkout:focus {
    background-color: #E0A91E !important;
    border-color: #E0A91E !important;
    color: #111111 !important;
}
.cart-widget-side .pk-drawer-was {
    display: block; font-size: 12px; color: #5A5A5A; margin: 2px 0 1px; line-height: 1.3;
}
.cart-widget-side .pk-drawer-was del { color: #9A9A9A; text-decoration: line-through; margin-right: 4px; }
.cart-widget-side .pk-drawer-was del .amount { color: #9A9A9A; }
.cart-widget-side .pk-drawer-discount-badge {
    display: inline-block; background: #E53935; color: #fff; font-size: 9px; font-weight: 700;
    line-height: 1; padding: 1px 4px; border-radius: 6px; vertical-align: middle;
}
/* Ahorro total en el drawer */
.cart-widget-side .pk-drawer-total-saving {
    margin: 6px 0 4px;
    font-size: 12px;
    color: #2e7d32;
    text-align: center;
    background: #f1faf3;
    border-radius: 6px;
    padding: 5px 8px;
}
.cart-widget-side .pk-drawer-total-saving strong {
    color: #1b5e20;
}

/* === Layout carrito: precio + tachado en misma fila, contador debajo === */

/* cart-info: flex ROW - alta especificidad con html body */
html body .cart-widget-side .woocommerce-mini-cart-item .cart-info,
html body .cart-widget-side .mini_cart_item .cart-info {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    column-gap: 5px !important;
    row-gap: 3px !important;
}

/* Titulo: fila completa */
html body .cart-widget-side .woocommerce-mini-cart-item .cart-info .wd-entities-title,
html body .cart-widget-side .mini_cart_item .cart-info .wd-entities-title {
    width: 100% !important;
    order: 1 !important;
    margin-bottom: 1px !important;
}

/* Precio actual: order 2 */
html body .cart-widget-side .woocommerce-mini-cart-item .cart-info > span.quantity,
html body .cart-widget-side .mini_cart_item .cart-info > span.quantity {
    order: 2 !important;
    flex: 0 0 auto !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #999999 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Monto del precio */
html body .cart-widget-side .woocommerce-mini-cart-item .cart-info > span.quantity .woocommerce-Price-amount,
html body .cart-widget-side .mini_cart_item .cart-info > span.quantity .woocommerce-Price-amount {
    color: #111a51 !important;
    font-weight: 700 !important;
}

/* pk-drawer-was: al costado del precio (order 3) */
html body .cart-widget-side .pk-drawer-was {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

/* Precio tachado */
html body .cart-widget-side .pk-drawer-was del {
    font-size: 11px !important;
    color: #9A9A9A !important;
    text-decoration: line-through !important;
}
html body .cart-widget-side .pk-drawer-was del .amount {
    font-size: 11px !important;
    color: #9A9A9A !important;
}

/* Badge */
html body .cart-widget-side .pk-drawer-discount-badge {
    font-size: 9px !important;
    display: inline-block !important;
    background: #E53935 !important;
    color: #fff !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 2px 4px !important;
    border-radius: 6px !important;
}

/* Salto de linea antes del contador usando ::after */
html body .cart-widget-side .woocommerce-mini-cart-item .cart-info::after,
html body .cart-widget-side .mini_cart_item .cart-info::after {
    content: "" !important;
    display: block !important;
    flex-basis: 100% !important;
    height: 0 !important;
    order: 4 !important;
}

/* Contador: ancho natural, debajo de la fila de precios */
html body .cart-widget-side .woocommerce-mini-cart-item .cart-info div.quantity,
html body .cart-widget-side .mini_cart_item .cart-info div.quantity {
    order: 5 !important;
    flex: 0 0 auto !important;
    margin-top: 2px !important;
}

/* Botón eliminar: ícono de tachito en lugar de X */
html body .cart-widget-side .woocommerce-mini-cart-item a.remove_from_cart_button::after,
html body .cart-widget-side .mini_cart_item a.remove_from_cart_button::after {
    content: "\f182" !important;
    font-family: dashicons !important;
    font-size: 14px !important;
    color: #111111 !important;
    display: inline-block !important;
}

html body .cart-widget-side .woocommerce-mini-cart-item a.remove_from_cart_button:hover::after,
html body .cart-widget-side .mini_cart_item a.remove_from_cart_button:hover::after {
    color: #E53935 !important;
}

/* Remover el ::before que agregamos antes */
html body .cart-widget-side .woocommerce-mini-cart-item a.remove_from_cart_button::before,
html body .cart-widget-side .mini_cart_item a.remove_from_cart_button::before {
    content: none !important;
    display: none !important;
}

/* Restaurar posicionamiento absoluto de Woodmart */
html body .cart-widget-side .woocommerce-mini-cart-item a.remove_from_cart_button,
html body .cart-widget-side .mini_cart_item a.remove_from_cart_button {
    position: absolute !important;
    display: block !important;
    font-size: 0 !important;
    color: transparent !important;
    width: 20px !important;
    height: 20px !important;
}

/* ===== DRAWER: Bloque Subtotal / Descuentos / Total ===== */
.cart-widget-side .pk-drawer-summary-block {
    margin: 8px 15px 10px 15px;
    padding: 0;
}

.cart-widget-side .pk-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 14px;
    color: #333;
}

.cart-widget-side .pk-summary-label {
    font-weight: 400;
}

.cart-widget-side .pk-summary-value {
    font-weight: 600;
}

/* Descuentos: valor en rojo */
.cart-widget-side .pk-desc-value {
    color: #E53935 !important;
}

/* TOTAL: caja verde */
.cart-widget-side .pk-summary-total.pk-has-discount {
    background: none;
    border: none;
    border-radius: 0;
    padding: 5px 0;
    margin-top: 0;
    font-size: 15px;
}

.cart-widget-side .pk-summary-total.pk-has-discount .pk-summary-label {
    font-weight: 700;
    color: #111111;
}

.cart-widget-side .pk-summary-total.pk-has-discount .pk-summary-value {
    font-weight: 700;
    color: #111111;
    font-size: 16px;
}

/* TOTAL sin descuento: estilo normal tipo subtotal */
.cart-widget-side .pk-summary-total:not(.pk-has-discount) .pk-summary-label {
    font-weight: 700;
}

.cart-widget-side .pk-summary-total:not(.pk-has-discount) .pk-summary-value {
    font-weight: 700;
}

/* Ocultar elementos originales reemplazados por pk-drawer-summary-block */
.cart-widget-side .pk-drawer-total-saving,
.cart-widget-side .shopping-cart-widget-footer > strong,
.cart-widget-side .shopping-cart-widget-footer > span.woocommerce-Price-amount {
    display: none !important;
}

/* ===== DRAWER: Ocultar elementos debajo de FINALIZAR COMPRA ===== */
/* Ocultar VER CARRITO */
.cart-widget-side .woocommerce-mini-cart__buttons a.btn-cart {
    display: none !important;
}

/* Ocultar barra de progreso de envío gratis */
.cart-widget-side .wd-progress-bar {
    display: none !important;
}

/* Ocultar bloque de confianza (envío gratis desde S/90) */
.cart-widget-side .pikotin-drawer-trust {
    display: none !important;
}

/* Ocultar link Seguir comprando */
.cart-widget-side .pikotin-seguir {
    display: none !important;
}

/* Texto de envío debajo de FINALIZAR COMPRA */
.cart-widget-side .pk-shipping-note {
    display: block;
    text-align: center;
    font-size: 11px;
    color: #999;
    margin-top: 6px;
    margin-bottom: 4px;
}
/* Ancho del drawer: 440px */
.cart-widget-side {
    width: 440px !important;
}

/* Ocultar texto "Cerrar" del drawer — solo la X */
.cart-widget-side .close-side-widget a,
.wd-side-hidden .close-side-widget a {
    font-size: 0 !important;
    color: transparent !important;
}
.cart-widget-side .close-side-widget a::before,
.wd-side-hidden .close-side-widget a::before {
    font-size: 16px !important;
    color: #333 !important;
}

/* ===== Pikotin - Barra de envío gratis ===== */
.pk-free-shipping-bar {
  padding: 10px 15px 8px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.pk-free-shipping-bar .pk-fsb-message {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #333;
  margin-bottom: 7px;
  font-weight: 500;
}
.pk-free-shipping-bar .pk-fsb-icon {
  font-size: 17px;
  flex-shrink: 0;
}
.pk-free-shipping-bar .pk-fsb-amount {
  color: #111A51;
  font-weight: 700;
  font-size: 15px;
}
.pk-free-shipping-bar .pk-fsb-track {
  height: 11px;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}
.pk-free-shipping-bar .pk-fsb-fill {
  height: 100%;
  background: #F9BB28;
  border-radius: 10px;
  transition: width 0.5s ease;
  min-width: 3px;
}
.pk-free-shipping-bar.pk-fsb-complete .pk-fsb-message {
  color: #1a7c3e;
  font-weight: 600;
}

/* ----- Bloque 2: override de especificidad que venia del snippet 24325 (15 set 2026) ----- */
/* Pikotin - Override: boton FINALIZAR COMPRA del drawer en amarillo */
html body .cart-widget-side .woocommerce-mini-cart__buttons a.button.checkout {
    background-color: #F9BB28 !important;
    background-image: none !important;
    border: 1px solid #F9BB28 !important;
    color: #111111 !important;
    border-radius: 10px !important;
    transition: background-color .2s ease, border-color .2s ease;
}
html body .cart-widget-side .woocommerce-mini-cart__buttons a.button.checkout:hover,
html body .cart-widget-side .woocommerce-mini-cart__buttons a.button.checkout:focus {
    background-color: #E0A91E !important;
    border-color: #E0A91E !important;
    color: #111111 !important;
}
html body .cart-widget-side .woocommerce-mini-cart__buttons a.button.btn-cart {
    border-radius: 10px !important;
}

/* ===== CABECERA Y BARRA DE ENVIO DEL DRAWER (migrado del Personalizador, 15 set 2026) =====
   Venia de 12 bloques del Personalizador, de los cuales la cabecera estaba escrita
   DOS veces (una version quedaba muerta salvo por justify-content). Aqui va una sola vez,
   con los valores que de verdad se aplicaban, y sin !important: al vivir en este snippet
   ya carga despues del tema y no los necesita.
   Si algo vuelve al estilo de Woodmart, el !important se agrega solo a esa linea. ===== */
.cart-widget-side.wd-side-hidden {
    width: min(85vw, 440px);
}
.cart-widget-side .wd-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 6px 0 6px 12px;
    min-height: unset;
}
.cart-widget-side .wd-heading .title {
    font-size: 13px;
    font-weight: 600;
}
.cart-widget-side .wd-heading .close-side-widget {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 13px;
}
.cart-widget-side .wd-heading .close-side-widget a,
.cart-widget-side .wd-heading .close-side-widget a::before {
    /* el !important si hace falta: otra regla del Personalizador pone 0 y esconde la palabra "Cerrar" */
    font-size: 13px !important;
}
.cart-widget-side .wd-heading .wd-cross-icon::before,
.cart-widget-side .wd-heading .wd-cross-icon::after {
    width: 13px;
    height: 1.5px;
}
.cart-widget-side .pk-fsb-message {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    font-size: 15px;
}
.cart-widget-side .pk-fsb-message span,
.cart-widget-side .pk-fsb-message strong {
    font-size: 15px;
}

/* ===== PAGINA DEL CARRITO: ANCHO DEL FORMULARIO Y DEL RESUMEN (migrado del Personalizador, 15 set 2026) =====
   2 reglas sueltas que estaban fuera de su area. Mismo orden, sin cambios. ===== */
.cart-content-wrapper > .woocommerce-cart-form {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.cart-content-wrapper > .cart_totals {
    flex: 0 0 360px !important;
    max-width: 360px !important;
}

/* ############################################################
   TIPOGRAFIA DE ELEMENTOR (17 set 2026)
   El kit global de Elementor (post 7) traia Roboto y Roboto Slab, que eran las unicas
   fuentes ademas de las de la marca. Roboto solo se veia en los titulares H1/H2 hechos
   con Elementor; Roboto Slab no se usaba en ninguna pagina.
   Andre decidio unificar todo en Be Vietnam Pro, la fuente de la marca: la web queda
   coherente y se dejan de descargar ~42 KB de Roboto.
   Aqui se pisan las variables del kit; en el kit de Elementor siguen figurando como Roboto,
   asi que si algun dia se quiere volver atras basta con borrar este bloque.
   ############################################################ */

.elementor-kit-7,
.elementor-kit-7 h1,
.elementor-kit-7 h2,
.elementor-kit-7 h3,
.elementor-kit-7 h4,
.elementor-kit-7 h5,
.elementor-kit-7 h6,
.elementor-widget-heading .elementor-heading-title {
    --e-global-typography-primary-font-family: "Be Vietnam Pro";
    --e-global-typography-secondary-font-family: "Be Vietnam Pro";
    --e-global-typography-text-font-family: "Be Vietnam Pro";
    --e-global-typography-accent-font-family: "Be Vietnam Pro";
    font-family: "Be Vietnam Pro", Arial, Helvetica, sans-serif;
}
/* Algunos titulares tienen la fuente fijada en el CSS de su propia pagina de Elementor
   (por ejemplo post-6592.css, la plantilla del home), que carga despues del kit.
   Esta regla cubre esos casos sin tener que editar cada widget a mano. */
[class*="elementor-"] .elementor-heading-title,
[class*="elementor-"] .elementor-widget-heading .elementor-heading-title,
[class*="elementor-"] .elementor-widget-container > .elementor-heading-title {
    font-family: "Be Vietnam Pro", Arial, Helvetica, sans-serif !important;
}

/* ############################################################
   BANNER SUPERIOR DE VIDEO  (migrado del snippet 25200, 18 set 2026)
   El snippet "Banner Superior Pikotin (Top Bar Video)" mezclaba estilo, HTML y dos videos.
   Ahora el snippet solo tiene el HTML; el estilo esta aqui y la eleccion del archivo
   segun el dispositivo esta en pk.js (bloque GLOBAL).
   Antes habia DOS etiquetas de video (una por dispositivo) y el navegador descargaba las
   dos, 265 KB, para esconder una con CSS. Ahora hay una sola y el JS le pone el archivo
   que corresponde.
   El aspect-ratio reserva el alto antes de que cargue el video, para que el contenido
   no salte: escritorio 1600x42, celular 900x126 (medido de los propios MP4).
   ############################################################ */

#pikotin-topbar {
    width: 100%;
    background: #000;
    line-height: 0;
    text-align: center;
    position: relative;
    z-index: 1;
}
#pikotin-topbar video {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    pointer-events: none;
    aspect-ratio: 1600 / 42;
}
@media (max-width: 768px) {
    #pikotin-topbar video {
        aspect-ratio: 900 / 126;
    }
}
body.woocommerce-checkout #pikotin-topbar {
    display: none !important;
}

/* ############################################################
   CARRUSEL DE MARCAS DEL HOME  (18 set 2026)
   "Las mejores marcas en nuestra tienda online para mascotas" (widget afcac9d).

   Problema 1 (resuelto): las tarjetas salian de distinto ancho porque el tamano lo definia
   el archivo del logo. 22 marcas estan en 200x200 px, pero tres se subieron con otra
   proporcion y estiraban su tarjeta:
     Biomont 698x279 · Atrevia 700x524 · Canbo 1024x1007

   Problema 2 (resuelto): la tarjeta era un cuadrado chico centrado dentro de una franja
   mucho mas ancha, asi que se veia pequena y con mucho aire entre una y otra.

   Solucion: la tarjeta ocupa todo el ancho de su franja y queda rectangular (mas ancha que
   alta), que es la forma natural de un logo. La separacion la da el espacio del carrusel
   (ajuste "Espaciado" del widget), no el aire sobrante.
   El logo se acomoda dentro sin deformarse ni recortarse (object-fit: contain).

   El !important del alto de la imagen pelea contra la plantilla de Elementor del home
   (post-6592.css), que fija height:90px al img con mas especificidad; sin el, la imagen
   se sale del cuadro.

   Pendiente de diseno: reexportar Biomont, Atrevia y Canbo a 200x200 WebP, centrados y con
   aire, para que se vean del mismo tamano optico que los demas.
   ############################################################ */

.elementor-element-afcac9d .promo-banner-wrapper .promo-banner {
    width: 100% !important;   /* ocupa toda su franja: se acaba el aire entre tarjetas */
    height: 110px !important; /* mas alta que antes (eran 90) y mas ancha que alta */
    margin-left: 0;
    margin-right: 0;
}
.elementor-element-afcac9d .promo-banner .main-wrapp-img,
.elementor-element-afcac9d .promo-banner .banner-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.elementor-element-afcac9d .promo-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;      /* el logo entra completo, sin recortes ni deformacion */
    object-position: center;
    padding: 14px 18px;       /* aire interno para que el logo no toque los bordes */
    box-sizing: border-box;
}

/* ############################################################
   PAGINACION DE LA BUSQUEDA  (18 set 2026)
   En los resultados de busqueda se muestra el boton "Cargar mas productos" en lugar de la
   numeracion de paginas, igual que en las categorias (ver snippet PK · BUSCADOR · PHP).
   La numeracion sigue en el HTML, solo se oculta a la vista: asi Google puede seguir
   rastreando las paginas siguientes y no se pierde indexacion.
   ############################################################ */

.pk-paginacion-oculta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ############################################################
   BOTON "AGREGAR AL CARRITO": SIN CAMBIO A ICONO AL PASAR EL MOUSE  (18 set 2026)
   Woodmart, con el estilo "wd-add-btn-replace", esconde el texto al pasar el mouse y en su
   lugar sube un carrito dentro de la pastilla. Andre no lo quiere: el texto se queda.
   Esta regla existia antes dentro del CSS de los widgets del home; al sacar de ahi el CSS
   del boton (18 set 2026) se perdio, y el icono volvio a salir en toda la tienda.
   Ahora vive aqui, que es su sitio, y vale para el home, el catalogo y el buscador.
   ############################################################ */

.wd-add-btn-replace .wd-action-icon,
.wd-product .add_to_cart_button .wd-action-icon,
.wd-product .add-to-cart-loop .wd-action-icon {
    display: none !important;
}
.wd-add-btn-replace:hover .wd-action-text,
.wd-product .add_to_cart_button:hover .wd-action-text,
.wd-product .add-to-cart-loop:hover .wd-action-text {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* ############################################################
   FLECHAS DEL SLIDER DEL HOME EN CELULAR  (18 set 2026)
   En el celular las flechas se montaban encima del banner y tapaban parte de la imagen.
   En pantallas tactiles no hacen falta: el cliente pasa los banners deslizando, y ademas
   estan los puntitos de abajo para saber en cual va.
   Solo se ocultan en el slider de banners; los carruseles de producto conservan las suyas.
   ############################################################ */

@media (max-width: 767px) {
    .wd-slider .wd-nav-arrows,
    .wd-slider .wd-btn-arrow {
        display: none !important;
    }
}

/* ############################################################
   HOME · CARRUSELES DE PRODUCTO EN CELULAR  (19 set 2026)
   Migrado del snippet WPCode 25202 "Carrusel movil 2 columnas - Descuentazos", que seguia
   encendido y se escapo de la limpieza del 15-18 set. Aplica a Descuentazos y Mas vendidos
   en pantallas de hasta 575 px: sin flechas, 10 px de aire a los lados y 2 columnas.
   Se dejaron FUERA sus tres reglas que forzaban los puntitos de paginacion en celular:
   Woodmart los oculta de fabrica en pantallas chicas y ademas pintaba uno por producto
   (10 puntos para 5 pasos). En celular el cliente desliza y el carrusel avanza solo (pk.js).
   ############################################################ */

@media (max-width: 575px) {
    /* Quitar flechas */
      .home .wd-products-element .wd-btn-arrow,
      .home .wd-products-element .wd-nav-arrows {
        display: none !important;
      }
    /* Aplicar 10px de padding en el inner
          (container ya tiene 5px + card tiene 5px offset = 20px total al borde) */
      body.home .elementor-6592 .elementor-element-fe1ef9b .wd-carousel-inner,
      body.home .elementor-6592 .elementor-element-98c223e .wd-carousel-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
      }
    /* Anular el margin 40px que genera Elementor */
      body.home .elementor-6592 .elementor-element-fe1ef9b .wd-carousel-inner > .wd-carousel,
      body.home .elementor-6592 .elementor-element-98c223e .wd-carousel-inner > .wd-carousel {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        --wd-col: 2 !important;
        --wd-gap: 10px !important;
      }
}

/* ############################################################
   PUNTOS DEL CARRUSEL EN CELULAR  (19 set 2026)
   Woodmart oculta los puntos en pantallas chicas y, cuando se muestran, pinta uno por
   PRODUCTO (10) aunque el carrusel solo tenga 5 posiciones reales: en celular se ven dos
   productos por vista, asi que la fila se agota en el 5o paso. El punto activo si avanza
   de uno en uno (0,1,2,3,4), o sea que los cinco ultimos nunca se usan.
   Aqui se vuelven a mostrar y se dejan solo los cinco primeros.
   OJO: si cambia la cantidad de productos del widget (hoy 10) o los que se ven por vista
   en celular (hoy 2), este numero deja de cuadrar y hay que revisarlo.
   ############################################################ */

@media (max-width: 575px) {

    .home .wd-products-element .wd-nav-pagin-wrap {
        display: block !important;
        visibility: visible !important;
        margin-top: 10px !important;
    }

    /* Del 6o en adelante nunca se activan: sobran. */
    .home .wd-products-element ul.wd-nav-pagin > li:nth-child(n+6) {
        display: none !important;
    }

    .home .wd-products-element ul.wd-nav-pagin > li span {
        background-color: #d9d9d9 !important;
    }

    .home .wd-products-element ul.wd-nav-pagin > li.wd-active span {
        background-color: #f9bb28 !important;
    }
}

/* ############################################################
   SALTO BLANCO DEBAJO DE LA BARRA SUPERIOR  (19 set 2026)
   Al abrir cualquier pagina aparecia una franja blanca de 121 px entre la barra de video y
   la cabecera, que desaparecia sola al segundo. Daba sensacion de lentitud.

   Causa: Woodmart deja la cabecera interna (.whb-main-header) en flujo normal y solo la
   saca de flujo cuando su JS agrega la clase "whb-sticky-prepared". Hasta ese momento la
   cabecera ocupa su alto DOS veces: el que ya reserva el contenedor (121 px) mas el suyo.
   Ese doble es la franja blanca.

   Aqui se adelanta el estado final: la cabecera interna va posicionada desde el primer
   pintado, igual que la deja el tema despues. Medido: el contenedor pasa de 242 a 121 px
   desde el primer instante, sin salto.

   Ademas de verse mejor, esto ayuda a la nota de Google: los saltos de diseno son una de
   las tres metricas que mide.
   ############################################################ */

.whb-header .whb-main-header {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
}

/* ############################################################
   PANEL DE FILTROS EN CELULAR  (19 set 2026)
   El panel que se abre con "Filtrar" salia de 250 px y con los titulos pegados a los dos
   bordes, sin nada de aire.

   Dos causas, las dos nuestras:
   1) Mas arriba en este archivo hay una regla que fija la barra lateral del catalogo en
      250 px (width y max-width con !important). Esa medida es la correcta para la columna
      de ESCRITORIO, pero en celular la misma barra se convierte en el panel deslizante y
      se quedaba igual de angosta. Aqui se le devuelve el ancho del tema para ese caso.
   2) La zona de widgets del panel trae "padding: 30px 0", o sea aire arriba y abajo pero
      CERO a los lados, y por eso "Marca", "Peso" y los controles tocaban el borde.

   Medido a 390 px de pantalla: el panel pasa de 250 a 320 px (82% del ancho) y los titulos
   quedan con 16 px de aire a cada lado.
   ############################################################ */

@media (max-width: 768.98px) {

    body.woocommerce-page:not(.home) .wd-content-layout .wd-sidebar.wd-grid-col.wd-side-hidden,
    body.archive.woocommerce:not(.home) .wd-content-layout .wd-sidebar.wd-grid-col.wd-side-hidden,
    body.post-type-archive-product:not(.home) .wd-content-layout .wd-sidebar.wd-grid-col.wd-side-hidden,
    body.tax-product_cat:not(.home) .wd-content-layout .wd-sidebar.wd-grid-col.wd-side-hidden {
        width: min(320px, 88vw) !important;
        max-width: 88vw !important;
    }

    body .wd-sidebar.wd-side-hidden .widget-area {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Archivo generado solo desde pk.css (sin el bloque del checkout). No editar. */
