/* ============================================================================
   TOPSTORE.PE — HOJA DE ESTILOS PERSONALIZADA
   ----------------------------------------------------------------------------
   Este archivo sustituye por completo a "Apariencia → Personalizar → CSS
   adicional". Contiene, en este orden:

     1) Todo tu CSS anterior, tal cual estaba (líneas 2 a ~1300).
     2) La capa de corrección v7.

   POR QUÉ EN UN ARCHIVO Y NO EN EL PERSONALIZADOR
   El CSS del personalizador se incrusta dentro del HTML en cada carga: son
   65 KB que viajan en cada página y que el navegador aplica al instante,
   mientras las hojas de Blocksy todavía se están descargando. En esa ventana
   se ve la página con tu CSS pero sin el del tema: dos logos, el menú encima
   del logo, las tarjetas sin maquetar. Eso es el destello del F5.

   Como archivo enqueued DESPUÉS de Blocksy:
     · el navegador lo trata igual que las hojas del tema y las aplica todas
       en la misma pasada, así que el destello desaparece;
     · se cachea en el navegador en vez de reenviarse con cada página;
     · el HTML baja de 241 KB a unos 176 KB.

   DÓNDE VA ESTE ARCHIVO
     /public_html/wp-content/themes/blocksy-child/topstore.css

   Necesita además el fragmento de functions.php que te dejé aparte.
   ============================================================================ */

/* CONTENEDOR DE TÍTULO + VER MÁS */
.categoria-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0 20px 0;
    width: 100%;
}

/* ESTILO DE BOTONES (Título + Ver más) */
.categoria-titulo,
.categoria-vermas {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #ffa500;
    color: #ffffff;
    padding: 12px 35px;
    border-radius: 25px;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.5px;
    height: 50px;           /* MISMA ALTURA */
}

/* HOVER IGUAL PARA AMBOS */
.categoria-titulo:hover,
.categoria-vermas:hover {
    background-color: #e6e6e6;
    color: #7a003c;
}
/* ==========================================================
   TARJETA DE PRODUCTO — DISEÑO PROFESIONAL
   ========================================================== */

/* Contenedor de cada producto */
ul.products li.product {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 18px 22px;
    box-shadow: 0 0 0 rgba(255,140,0,0);   /* inicial sin sombra */
    transition: all 0.25s ease-in-out;
    overflow: hidden;
    border: 1px solid #f2f2f2;
}

/* HOVER: sombra naranja */
ul.products li.product:hover {
    box-shadow: 0 8px 22px rgba(255,140,0,0.45);
    transform: translateY(-4px);
}

/* ==========================================================
   IMÁGENES — AJUSTES PROFESIONALES
   ========================================================== */
ul.products li.product img {
    width: 100%;
    height: 220px;              /* Ajusta según tu gusto (200–260px recomendado) */
    object-fit: contain;        /* Mantiene proporciones reales del producto */
    margin-bottom: 15px;
    transition: transform 0.25s ease-in-out;
}

/* Pequeño zoom elegante al pasar el mouse */
ul.products li.product:hover img {
    transform: scale(1.04);
}

/* Quitar segunda imagen (si WooCommerce intenta mostrarla) */
ul.products li.product img:nth-child(2) {
    display: none !important;
}

/* ==========================================================
   TITULO DEL PRODUCTO
   ========================================================== */
ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    min-height: 50px;
    margin-bottom: 8px;
}

/* Precio */
ul.products li.product .price {
    font-size: 18px;
    font-weight: 700;
    color: #e60023;
    margin-bottom: 6px;
}

/* Precio tachado */
ul.products li.product .price del {
    color: #777;
    font-size: 14px;
}

/* ==========================================================
   BOTÓN AÑADIR AL CARRITO — ESTILO PROFESIONAL
   ========================================================== */
ul.products li.product .button {
    background: #ffa200 !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    font-weight: 700 !important;
    text-align: center;
    display: inline-block;
    margin-top: 8px !important;
    transition: all 0.25s ease-in-out;
}

/* Hover botón */
ul.products li.product .button:hover {
    background: #ffbd42 !important;
    color: #7d0000 !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {
    ul.products li.product img {
        height: 180px;
    }
}

@media (max-width: 480px) {
    ul.products li.product img {
        height: 150px;
    }
}
/* BOTÓN AÑADIR AL CARRITO — CENTRADO Y EN UNA SOLA LÍNEA */
ul.products li.product .button {
    display: inline-flex !important;         /* Mantiene el contenido en una línea */
    white-space: nowrap !important;          /* Evita que el texto se parta */
    justify-content: center !important;      
    align-items: center !important;

    padding: 10px 22px !important;           /* Ajuste de tamaño del botón */
    width: auto !important;                  /* Ancho automático para que no se corte */
    max-width: 90% !important;               /* Evita botones gigantes */

    margin-left: auto !important;            /* Centrado */
    margin-right: auto !important;
    margin-top: 8px !important;

    background: #ffa200 !important;          /* Naranja */
    border-radius: 25px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #fff !important;
}

/* HOVER */
ul.products li.product .button:hover {
    background: #ffbb33 !important;
    color: #7d0000 !important;
}
/* ============================
   BOTONES TRANSPARENTES NARANJA
   ============================ */

/* Estilo base (normal) */
.categoria-titulo,
.categoria-vermas {
    background: transparent !important;       /* Sin fondo */
    color: #ff9900 !important;                /* Texto naranja */
    border: 2px solid #ff9900 !important;     /* Borde naranja fino */
    padding: 10px 28px !important;
    border-radius: 30px !important;           /* Forma redondeada */
    font-weight: 700 !important;
    font-size: 20px !important;

    display: inline-block;
    transition: all 0.25s ease-in-out !important;
}

/* ============================
   HOVER: sombra naranja suave
   ============================ */
.categoria-titulo:hover,
.categoria-vermas:hover {
    background: rgba(255, 153, 0, 0.1) !important;   /* Fondo naranja muy suave */
    color: #ff9900 !important;

    box-shadow: 0 0 10px rgba(255, 153, 0, 0.6) !important;  
    transform: translateY(-2px) !important;
}
/* ===========================================
   BOTONES ESTILO PROFESIONAL (FONDO PLOMO)
   =========================================== */

.categoria-titulo,
.categoria-vermas {
    background: #f2f2f2 !important;           /* Fondo plomo claro */
    color: #ff9900 !important;                /* Texto naranja */
    border: 2px solid #ff9900 !important;     /* Borde fino naranja */
    
    padding: 10px 28px !important;
    border-radius: 30px !important;           /* Bordes redondeados */
    
    font-weight: 700 !important;
    font-size: 20px !important;
    
    display: flex !important;                 /* Para centrar texto */
    justify-content: center !important;       /* Horizontal */
    align-items: center !important;           /* Vertical */

    text-align: center !important;

    transition: all 0.25s ease-in-out !important;
}

/* ===========================================
   HOVER: SOMBRA NARANJA SUAVE
   =========================================== */
.categoria-titulo:hover,
.categoria-vermas:hover {
    background: #fff7e6 !important;           /* Fondo naranja ultra suave */
    box-shadow: 0 0 12px rgba(255, 153, 0, 0.5) !important;
    transform: translateY(-2px) !important;
}
/* ================================================
   ESTILO PROFESIONAL PARA TÍTULOS DE SECCIÓN
   Aplicable a: CATEGORÍAS, NUEVOS PRODUCTOS, etc.
   ================================================ */

.titulo-seccion {
    font-size: 50px;                   /* Tamaño grande */
    font-weight: 900;                  /* Muy negrita */
    color: #ffb300;                    /* Amarillo/Naranja */
    text-transform: uppercase;
    letter-spacing: 2px;

    /* Centrado absoluto */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    /* Sombra difusa tipo glow */
    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.25),
        0 4px 10px rgba(255, 165, 0, 0.5);

    margin: 40px 0 25px;
    transition: all 0.25s ease-in-out;
}

/* Hover suave */
.titulo-seccion:hover {
    color: #e69a00;  /* Un poco más oscuro */
    text-shadow:
        0 3px 5px rgba(0, 0, 0, 0.35),
        0 5px 15px rgba(255, 140, 0, 0.6);
    transform: scale(1.02);
}
/* Ocultar paginación SOLO en la página de inicio */
.home .woocommerce-pagination {
    display: none !important;
}
/* Fondo FULL ancho real (llena toda la pantalla) */
.stk-4d4ad87 {
    background-size: cover !important;   /* SE ESTIRA */
    background-position: center center !important;
    background-repeat: no-repeat !important;

    width: 100% !important;
    min-height: 600px !important; /* Ajusta si deseas más altura */
}

/* Versión para pantallas grandes */
@media screen and (min-width: 1024px) {
    .stk-4d4ad87 {
        min-height: 750px !important;
    }
}

/* Versión para móviles */
@media screen and (max-width: 768px) {
    .stk-4d4ad87 {
        min-height: 450px !important;
        background-size: cover !important;
    }
}
/* ========================================================= */
/* CONTENEDOR GENERAL – ocupa más espacio y centra contenido */
/* ========================================================= */
.contact-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 30px; /* más separación equilibrada */
    max-width: 1800px; /* más ancho total */
    margin: 0 auto;
    padding: 10px 0; /* más aire arriba/abajo */
}

/* ========================================================= */
/* IMAGEN MÁS GRANDE AÚN */
/* ========================================================= */
.contact-img img {
    width: 650px;       /* AGRANDADO */
    height: 900px;      /* AGRANDADO */
    object-fit: cover;
    border-radius: 45px;

    box-shadow: 0px 25px 55px rgba(255, 160, 60, 0.35);
}

/* ========================================================= */
/* FORMULARIO MÁS ANCHO Y MISMA ALTURA */
/* ========================================================= */
.contact-form {
    width: 750px;          /* +25% más ancho */
    min-height: 750px;     /* MISMA ALTURA QUE LA IMAGEN */
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    box-shadow: 0px 15px 400px rgba(0,0,0,0.30);
}

/* ========================================================= */
/* ETIQUETAS – alineadas a la izquierda */
/* ========================================================= */
.contact-form label {
    display: block;
    text-align: left!important;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 18px;
}

/* ========================================================= */
/* CAMPOS MÁS GRANDES Y CÓMODOS */
/* ========================================================= */
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100% !important;
    padding: 16px 18px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 28px;
    font-size: 17px;
}

.contact-form textarea {
    height: 220px !important;
}

/* ========================================================= */
/* BOTÓN */
/* ========================================================= */
.contact-form button,
.contact-form input[type="submit"] {
    width: 220px;
    padding: 16px;
    background-color: #ffaa22;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    align-self: center;
    transition: 0.25s ease;
}

.contact-form button:hover,
.contact-form input[type="submit"]:hover {
    background-color: #e0941a;
}
/* Estilo brillante tipo glow para el título */
.stk-e3c7835 .stk-block-heading__text {
    font-size: 70px !important;
    color: #FFAD0E !important;
    font-weight: 900;

    /* Sombra tipo glow naranja suave */
    text-shadow:
        0px 4px 8px rgba(255, 170, 40, 0.65),
        0px 0px 20px rgba(255, 170, 40, 0.45),
        0px 0px 35px rgba(255, 170, 40, 0.30);
}

/* Responsive */
@media screen and (max-width: 1023px) {
    .stk-e3c7835 .stk-block-heading__text {
        font-size: 40px !important;
        text-shadow:
            0px 3px 6px rgba(255, 170, 40, 0.55),
            0px 0px 18px rgba(255, 170, 40, 0.35);
    }
}
/* Color oscuro base */
.stk-028dbca .stk-block-heading__text {
    color: #111 !important;
    font-weight: 900;
    transition: all 0.3s ease-out;
}

/* Efecto gamer RGB al pasar el mouse (SIN sombra) */
.stk-028dbca .stk-block-heading__text:hover {
    background: linear-gradient(
        90deg,
        #ff0000,
        #ff7a00,
        #ffee00,
        #00ff37,
        #00c3ff,
        #2b00ff,
        #ff00c8,
        #ff0000
    );
    background-size: 500% 500%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: rgbFlow 3s linear infinite;
}

/* Animación RGB */
@keyframes rgbFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* ==== EFECTO D – CINEMÁTICO NARANJA + HALO ANIMADO + BORDE ANIMADO ==== */

/* Contenedor del slide */
.stk-block-carousel .wp-block-stackable-column {
    transition: transform .45s ease;
    transform-style: preserve-3d;
    position: relative;
    overflow: visible;
}

/* Movimiento cinemático */
.stk-block-carousel .wp-block-stackable-column:hover {
    transform: translateY(-12px) rotateX(4deg);
}

/* Imagen: zoom + más brillo */
.stk-block-carousel .stk-img-wrapper img {
    transition: transform .45s ease, filter .45s ease;
    border-radius: 14px;
}

.stk-block-carousel .wp-block-stackable-column:hover .stk-img-wrapper img {
    transform: scale(1.18);
    filter: brightness(1.18) contrast(1.22);
}

/* Glow interno */
.stk-block-carousel .stk-img-wrapper {
    position: relative;
    overflow: hidden;
}

.stk-block-carousel .stk-img-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(255, 165, 40, 0.55),
        rgba(0, 0, 0, 0) 65%
    );
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}

.stk-block-carousel .wp-block-stackable-column:hover .stk-img-wrapper::after {
    opacity: 1;
}

/* HALO externo animado */
.stk-block-carousel .wp-block-stackable-column::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 20px;

    background: radial-gradient(
        circle,
        rgba(255,165,40,0.7),
        rgba(255,190,30,0.5),
        rgba(0,0,0,0)
    );

    opacity: 0;
    filter: blur(14px);
    pointer-events: none;
    transition: opacity .45s ease;

    animation: haloPulse 2.5s ease-in-out infinite alternate;
}

.stk-block-carousel .wp-block-stackable-column:hover::after {
    opacity: 1;
}

/* BORDE ANIMADO */
.stk-block-carousel .wp-block-stackable-column::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 16px;

    background: linear-gradient(
        120deg,
        rgba(255,200,60,0.9),
        rgba(255,160,20,0.7),
        rgba(255,200,60,0.9)
    );
    background-size: 200% 200%;

    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;

    animation: borderGlow 2.2s linear infinite;
}

.stk-block-carousel .wp-block-stackable-column:hover::before {
    opacity: 1;
}

/* Animación halo naranja ↔ amarillo */
@keyframes haloPulse {
    0% {
        background: radial-gradient(
            circle,
            rgba(255,165,40,0.8),
            rgba(255,180,60,0.45),
            rgba(0,0,0,0)
        );
        filter: blur(12px);
    }
    100% {
        background: radial-gradient(
            circle,
            rgba(255,205,40,0.9),
            rgba(255,220,80,0.55),
            rgba(0,0,0,0)
        );
        filter: blur(15px);
    }
}

/* Animación del borde */
@keyframes borderGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* ================================
   SLIDER FULL WIDTH PROFESIONAL
   ================================ */

.full-slider-wrapper {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    overflow: hidden;
}

.full-slider {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
}

/* SLIDES COMO BACKGROUND */
.full-slider .slide {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center bottom; /* ⬅️ Mostrar desde abajo */
    background-repeat: no-repeat;

    opacity: 0;
    transition: opacity 1.6s ease-in-out;
}

/* SLIDE ACTIVO */
.full-slider .slide.active {
    opacity: 1;
}

/* 🔥 OVERLAY SUAVE (más contraste) */
.full-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 3;
    pointer-events: none;
}

/* Responsivo */
@media (max-width: 768px) {
    .full-slider {
        height: 380px;
    }

    .full-slider .slide {
        background-position: center bottom;
    }
}
/* ================================
   SLIDER FULL WIDTH – CSS ADICIONAL
   ================================ */

.full-slider-wrapper{
    position:relative;
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    overflow:hidden;
}

.full-slider{
    position:relative;
    width:100vw;
    height:800px;
    overflow:hidden;
}

.full-slider .slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background-size:cover!important;
    background-position:bottom center!important;
    background-repeat:no-repeat;
    opacity:0;
    transition:opacity 1.6s ease-in-out;
    filter:contrast(1.22) saturate(1.18) brightness(1.08);
}

.full-slider .slide.active{
    opacity:1;
}

.full-slider::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.20);
    pointer-events:none;
    opacity:0;
    transition:opacity 1.5s ease-in-out;
}

.full-slider.change-effect::after{
    opacity:1;
}

.full-slider-wrapper::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:150px;
    background:linear-gradient(to bottom,rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
    pointer-events:none;
    z-index:5;
}

.full-slider-wrapper::before{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#ff0080,#ff8c00,#ffe600,#00eaff,#7b2cff,#ff0080);
    background-size:600% 100%;
    animation:rgbline 9s linear infinite;
    z-index:10;
}

@keyframes rgbline{
    0%{background-position:0 0;}
    100%{background-position:600% 0;}
}

@media(max-width:768px){
    .full-slider{height:380px;}
    .full-slider .slide{background-position:center!important;}
    .full-slider-wrapper::after{height:90px;}
}
/* ================================
   SLIDER FULL WIDTH + OVERLAY
   ================================ */

.full-slider-wrapper {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    overflow: hidden;
}

.full-slider {
    position: relative;
    width: 100vw;
    height: 800px;
    overflow: hidden;
}

/* SLIDES */
.full-slider .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: bottom center !important;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    filter: contrast(1.20) saturate(1.15) brightness(1.07);
}

/* SLIDE ACTIVO */
.full-slider .slide.active {
    opacity: 1;
}

/* === TEXTO SOBRE LA IMAGEN — CENTRADO DENTRO DE LA CAJA === */
.slide-text {
    position: absolute;
    top: 14%;           
    right: 5%;          

    max-width: 320px;
    min-height: 60px;

    padding: 14px 20px;

    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
    border-radius: 12px;

    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;

    /* CENTRADO REAL */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    text-shadow: 0 3px 8px rgba(0,0,0,0.45);

    z-index: 9999;
    pointer-events: none;
}

/* Ocultar si no hay texto */
.slide-text:empty {
    display: none;
}

/* OVERLAY SUAVE */
.full-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.22);
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    pointer-events: none;
}

.full-slider.change-effect::after {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .full-slider { height: 380px; }
    .full-slider .slide { background-position: center !important; }
    .slide-text {
        top: 18%;
        right: 5%;
        font-size: 16px;
        max-width: 220px;
        min-height: 40px;
        padding: 10px 14px;
    }
}
/* =====================================================
   FORZAR FILA ÚNICA DE 7 COLUMNAS EN TODO WOOCOMMERCE
   ===================================================== */

.ts-filter-box {
    width: 100%;
}

.ts-filter-row {
    display: grid !important;
    grid-template-columns:
        90px    /* Label Marca */
        180px   /* Select Marca */
        120px   /* Label Min */
        120px   /* Input Min */
        120px   /* Label Max */
        120px   /* Input Max */
        150px;  /* Botón */
    gap: 14px !important;
    align-items: center;
    margin-bottom: 20px;
}

/* Botón */
.ts-filter-btn {
    padding: 10px 12px !important;
    background: #ff7c00 !important;
    color: #fff !important;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    white-space: nowrap !important;
}

/* Inputs y selects */
.ts-filter-row select,
.ts-filter-row input[type="number"] {
    width: 100% !important;
}

/* Etiquetas */
.ts-filter-row label {
    white-space: nowrap !important;
    font-weight: 600;
}

/* =====================================================
   RESPONSIVE PARA MÓVIL
   ===================================================== */

@media (max-width: 768px) {
    .ts-filter-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .ts-filter-btn {
        grid-column: span 2; /* Botón ocupa toda la fila */
    }
}
/* Reducir el padding vertical aplicado en las páginas de productos */
.ct-container[data-vertical-spacing] {
    --theme-content-vertical-spacing: 20px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* Opcional: Reducir aún más el espacio entre título y filtros */
.woocommerce-products-header {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
}
/* Espaciado VISUAL alrededor del filtro (similar al ejemplo de "Categorías") */
.ts-filter-wrapper {
    margin-top: 30px !important;    /* espacio arriba, visible */
    margin-bottom: 30px !important; /* espacio abajo, visible */
}

/* Ajuste adicional opcional por si Blocksy mete padding extra */
.woocommerce .woocommerce-products-header {
    margin-bottom: 20px !important;
}
/* === CARRUSEL FULL WIDTH (STACKABLE + BLOCKSY) === */

/* 1. Forzar que el carrusel salga del contenedor limitado de Blocksy */
.wp-block-stackable-carousel.alignwide {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. Asegurar que el contenido interno también ocupe todo el ancho */
.wp-block-stackable-carousel .stk-block-carousel__content-wrapper,
.wp-block-stackable-carousel .stk-row,
.wp-block-stackable-carousel .stk-block-carousel__slider-wrapper,
.wp-block-stackable-carousel .stk-block-carousel__slider {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Evitar que Stackable aplique contenedores internos que reducen el ancho */
.wp-block-stackable-carousel .stk-container,
.wp-block-stackable-carousel .stk-block {
    max-width: 100% !important;
    width: 100% !important;
}

/* 4. Opcional: mover flechas hacia el borde (se ve mejor al ser full width) */
.wp-block-stackable-carousel .stk-block-carousel__button {
    transform: translateX(0) !important;
}
/* === ESPACIADO ESTÉTICO A LOS COSTADOS DEL CARRUSEL === */

.wp-block-stackable-carousel.alignwide {
    padding-left: 40px !important;   /* ajustable */
    padding-right: 40px !important;  /* ajustable */
    box-sizing: border-box !important;
}

/* Asegurar que el contenido interno respete ese padding */
.wp-block-stackable-carousel .stk-block-carousel__content-wrapper,
.wp-block-stackable-carousel .stk-row,
.wp-block-stackable-carousel .stk-block-carousel__slider-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* === BLOQUES DE PRODUCTOS FULL WIDTH (para shortcodes WooCommerce) === */

/* 1. Forzar que todos los contenedores de productos sean full-width */
.wp-block-shortcode,
.wp-block-group .wp-block-shortcode,
div[class*="wp-block"] .products,
.products.columns-5 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 70px !important;   /* ESPACIO MÁS AMPLIO */
    padding-right: 70px !important;  /* ESPACIO MÁS AMPLIO */
    box-sizing: border-box !important;
}

/* 2. Asegurar que la grilla interna ocupe todo el ancho */
.products.columns-5 {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
}

/* 3. Evitar que Blocksy reduzca el ancho del bloque */
.wp-block-group.has-global-padding,
.wp-block-group.alignwide,
.wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 4. Ajustar los títulos de categoría (como en tu HTML) */
.categoria-header {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 70px !important;   /* ESPACIO MÁS AMPLIO */
    padding-right: 70px !important;
    box-sizing: border-box !important;
}
/* ======== CONTENEDOR GENERAL ======== */
.woocommerce-info,
.woocommerce .woocommerce-info {
    background: #fff8d9 !important;
    color: #444 !important;
    border: 2px solid #ffcc66 !important;
    padding: 25px 30px 28px 30px !important; /* menos padding inferior */
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 500 !important;

    max-width: 700px !important;
    margin: 40px auto !important;
    text-align: center !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important; /* distancia entre elementos */
}

/* ======== CARITA ENCIMA DEL TEXTO (NO SUPERPUESTA) ======== */
.woocommerce-info::before {
    content: "🥺" !important; /* carita llorosa más visible */
    font-size: 45px !important;
    display: block !important;
    margin: 0 auto 10px auto !important; /* espacio SOLO debajo */
    line-height: 1 !important;
    transform: translateY(0); /* asegura que no baje a la línea del texto */
}

/* ======== CENTRADO DEL TEXTO ======== */
.woocommerce-info p {
    margin: 0 auto !important;
    text-align: center !important;
    width: 100% !important;
}

/* ======== BOTÓN CENTRADO ======== */
.woocommerce-info .woo-back-btn {
    background: #ff7f00;
    color: #fff !important;
    padding: 10px 22px !important; /* menos alto para estética */
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px !important;
    text-decoration: none;
    cursor: pointer;

    margin: 4px auto 0 auto !important; /* MENOS ESPACIO INFERIOR */
    display: inline-block;
}

.woocommerce-info .woo-back-btn:hover {
    background: #e36f00;
}
/* === Expandir contenedor CONTACTA CON NOSOTROS un 35% hacia ambos lados === */

/* Contenedor principal */
.stk-31deafe {
    width: 135% !important;            /* Expande el ancho total */
    max-width: 135% !important;
    margin-left: -17.5% !important;    /* Centra el bloque después de expandir */
    margin-right: -17.5% !important;
    box-sizing: border-box !important;
}

/* Asegurar que el contenido interno se distribuya correctamente */
.stk-31deafe-column {
    width: 100% !important;
    max-width: 100% !important;
}
/* ===== Igualar la altura entre imagen y formulario (manteniendo tu diseño) ===== */

@media screen and (min-width: 1000px) {

    /* Contenedor horizontal de ambos elementos */
    .contact-wrapper {
        display: flex !important;
        align-items: stretch !important; /* <- MISMA ALTURA */
        gap: 40px !important;           /* separación estética */
    }

    /* Imagen */
    .contact-img {
        flex: 1 1 50% !important;       /* 50% del ancho visual */
    }

    .contact-img img {
        width: 100% !important;
        height: 100% !important;        /* ❤️ Coincide con la altura del formulario */
        object-fit: cover !important;
        border-radius: 15px !important;
    }

    /* Formulario */
    .contact-form {
        flex: 1 1 50% !important;       /* 50% del ancho visual */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-evenly !important;
        border-radius: 15px !important;
    }
}
/* Ajustar altura de la imagen del bloque de Contacto */
.contact-img img {
    max-height: 850px !important;   /* Reduce la altura total */
    width: auto !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 12px;            /* O quitarlo si no lo quieres */
}

/* Asegurar que el contenedor de la imagen no obligue a estirarla */
.contact-img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* === Bloque de texto de Contacto (sin fondo, elegante y más legible) === */

.contact-info-block {
    max-width: 900px;
    margin: 0 auto 40px auto;
    padding: 0;
    text-align: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Emoji */
.contact-info-block .contact-emoji {
    font-size: 48px;
    margin-bottom: 14px;
}

/* Título principal */
.contact-info-block h2 {
    margin: 0 0 14px 0;
    font-size: 36px;            /* Más grande */
    color: #000000;             /* Negro */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Texto descriptivo */
.contact-info-block p {
    color: #000000;             /* Negro */
    font-size: 18px;            /* Más grande */
    line-height: 1.7;
    margin: 0 auto 12px;
    max-width: 780px;
}

/* Subtexto de respuesta */
.contact-info-block .contact-subtext {
    font-weight: 700;
    color: #000000;             /* Negro fuerte */
    font-size: 18px;
}

/* Alineación visual con el formulario */
.contact-info-block {
    width: 100%;
}

.contact-wrapper {
    margin-top: 20px !important;
}
/* ============================
   TARJETAS – ESTILO BASE
============================ */
.contact-section-wrapper .wp-block-group {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 32px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.35s ease !important;
    position: relative !important;
    overflow: hidden; 
}

/* ============================
   HOVER EFECTO NARANJA SUAVE
============================ */
.contact-section-wrapper .wp-block-group:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(255, 165, 0, 0.45) !important;
    box-shadow:
        0 6px 24px rgba(255, 165, 0, 0.35),
        0 3px 10px rgba(255, 165, 0, 0.20) !important;
}

/* ============================
   BRILLO NARANJA RGB SUTIL
============================ */
.contact-section-wrapper .wp-block-group:hover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    box-shadow: 0 0 22px rgba(255, 165, 0, 0.45);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
.slider-img-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider-img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slider-img-container img.visible {
    opacity: 1;
    z-index: 2;
}
.contact-img {
    position: relative;
}
/* ============================================================
   DESKTOP: Full width (992px+)
   ============================================================ */
@media (min-width: 992px) {
    .woocommerce.columns-5,
    div[class*="wp-block"] .products {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 70px !important;
        padding-right: 70px !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   RESET TOTAL PARA MÓVIL Y TABLET
   ============================================================ */
@media (max-width: 991px) {
    /* Forzar ancho completo del contenedor */
    .woocommerce.columns-5,
    div.woocommerce.columns-5,
    ul.products.columns-5,
    body .woocommerce.columns-5 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Forzar cada producto a ancho completo */
    .woocommerce.columns-5 li.product,
    ul.products.columns-5 > li,
    body .woocommerce.columns-5 li.product {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
        flex-basis: 100% !important;
    }
}

/* ============================================================
   MÓVIL: 1 columna forzada
   ============================================================ */
@media (max-width: 576px) {
    .woocommerce.columns-5,
    div.woocommerce.columns-5,
    ul.products.columns-5,
    body .woocommerce.columns-5 {
        display: block !important;
        grid-template-columns: none !important;
        columns: 1 !important;
    }
    
    .woocommerce.columns-5 li.product,
    ul.products.columns-5 > li {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        float: none !important;
    }
}

/* ============================================================
   TABLET: 2 columnas
   ============================================================ */
@media (min-width: 577px) and (max-width: 991px) {
    .woocommerce.columns-5,
    div.woocommerce.columns-5,
    ul.products.columns-5 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}
@media (max-width: 576px) {
    .woocommerce.columns-5 {
        display: block !important;
    }
    .woocommerce.columns-5 li.product {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* ============================================================================
   TOPSTORE.PE · CAPA DE CORRECCIÓN v16
   ----------------------------------------------------------------------------
   ARREGLA DOS ERRORES QUE METÍ EN LA v9:
     · La columna de iconos pasó de 168px a 122px, y esos 46px liberados
       hicieron que el JavaScript de Blocksy metiera otro item en el menú:
       el logo se cortaba y los iconos se solapaban. Ahora los huecos son
       iguales PERO la columna mide los mismos 168px de siempre.
     · El fondo blanco del desplegable no se aplica en la página real, así
       que quedaba panel oscuro + texto oscuro = ilegible. Se deja el panel
       como lo trae Blocksy y solo se corrige la tipografía.

   CAMBIOS DE LA v9 (los que sí valían):
     · Los tres iconos de la derecha, a la misma distancia.
     · El desplegable de "MÁS" con la tipografía del menú: estaba a 12px en
       fuente del sistema y minúsculas, al lado de 16px en Plex Mono y
       mayúsculas.
     · La flecha del desplegable, de 8px a 11px.

   CAMBIOS DE LA v8 RESPECTO A LA v7:
     · El icono de "Acceder" salía a 40px al lado de un buscador y un carrito
       de 26. Igualados los tres.
     · Ocultas las etiquetas de texto "Acceder" y "Buscar", que repiten lo que
       dice el icono y le quitan ~105px al menú.

   CAMBIOS DE LA v7 RESPECTO A LA v6 (tras actualizar Blocksy a 2.1.55):
     · LOGO DUPLICADO, ARREGLADO. La 2.1.55 añadió el logo sticky y ahora
       renderiza dos <img> dentro del enlace del logo, escondiendo uno con
       display:none. Mi regla tenía display:block !important, que los
       desescondía a los dos. Quitado.
     · Nombres de producto sin subrayado (la 2.1.55 empezó a subrayar los
       enlaces del contenido). Se mantiene el subrayado al pasar el ratón.

   CAMBIOS DE LA v6 RESPECTO A LA v5:
     · Botón y enlace centrados en la tarjeta. En la v5 puse margin:0 al botón
       para quitarle el margen superior, y sin querer anulé los
       margin-left/right:auto de tu propia regla, que eran los que lo
       centraban (tu CSS le pone max-width:90%, así que el botón nunca llena
       la zona y necesita esos auto). Medido: centro del botón en 274 contra
       centro de la tarjeta en 284.

   CAMBIOS DE LA v5 RESPECTO A LA v4:
     · "Ver carrito" ya no descoloca la rejilla. Medido: la tarjeta son 234px
       y los dos botones suman 284px, así que nunca cupieron en una línea.
       En la rejilla deja de mostrarse (la cabecera ya confirma con el icono
       del carrito); fuera de ella conserva la píldora, ahora del mismo alto
       y radio exactos que el principal.
     · Los botones "Añadir al carrito" quedan anclados abajo, así que todos
       los de una fila se alinean aunque los títulos ocupen distinto número
       de líneas.

   CAMBIOS DE LA v4 RESPECTO A LA v3:
     · Paginación del catálogo: números agrupados y centrados, cada uno con
       44px de área táctil, "Siguiente" de vuelta junto al grupo en lugar de
       suelto en el extremo derecho, y la página actual en naranja de marca.

   CAMBIOS DE LA v3 RESPECTO A LA v2:
     · CORREGIDO UN ERROR MÍO: le puse el mismo padding a .site-branding y a
       .site-logo-container, que va dentro. Se sumaban y la cabecera crecía de
       101px a 149px, dejando el logo pequeño y perdido. Ahora el padding va
       en uno solo y el logo sube de 48px a 60px.
     · Cabecera y pie alineados con el contenido (1300px en vez de 1900px):
       el logo deja de irse al extremo de la pantalla.
     · Pie reordenado: quitado el texto justificado, columnas con anchos según
       su contenido, redes en columna y menos relleno vertical.
     · Menos separación entre una categoría y la siguiente en móvil
       (del botón al siguiente título: de 87px a ~55px).

   CAMBIOS DE LA v2 RESPECTO A LA v1:
     · Espaciado muy suelto bajo el banner y en "NUEVOS PRODUCTOS" → márgenes
       reducidos y anulado el margen superior del primer título, que se estaba
       sumando al del bloque contenedor.
     · El color de los títulos vuelve a tu #FFB300 con su glow. Solo cambia el
       tamaño en pantallas pequeñas.
     · Iconos de buscador y carrito igualados a 26px también en escritorio
       (estaban en 32 y 40).
     · Añadido el arreglo del espacio en blanco de las fichas de producto.

   CÓMO ACTUALIZAR:
     En CSS adicional, selecciona desde la línea que dice
     "TOPSTORE.PE · CAPA DE CORRECCIÓN v6" hasta el final del archivo,
     bórralo y pega esto en su lugar. Luego Publicar y vacía la caché.

   DÓNDE VA:  Apariencia → Personalizar → CSS adicional
              Pega TODO esto al FINAL, después de tu última línea.
              No borres nada de lo que ya tienes.

   POR QUÉ AL FINAL: tu CSS actual tiene 239 !important y varios selectores
   repetidos. En igualdad de especificidad gana el que va después, así que
   esta capa corrige sin que tengas que tocar las 1309 líneas anteriores.

   PARA REVERTIR: borra este bloque completo. Nada más se ve afectado.
   ============================================================================ */

:root{
  /* ---- Color ---------------------------------------------------------- */
  --ts-naranja:        #FFA200;  /* marca. SOLO para fondos y bordes gruesos */
  --ts-naranja-texto:  #A15600;  /* naranja legible como texto   4.88:1 ✓ AA  */
  --ts-naranja-titulo: #B36A00;  /* para títulos grandes         3.77:1 ✓ AA  */
  --ts-tinta:          #1A1A1A;  /* texto sobre naranja          8.64:1 ✓ AAA */
  --ts-gris:           #F2F2F2;
  --ts-linea:          #E4E4E4;

  /* ---- Layout --------------------------------------------------------- */
  --ts-ancho: 1300px;            /* UN solo contenedor para toda la portada  */
  --ts-lado:  24px;

  /* ---- Escala de espaciado (múltiplos de 8) --------------------------- */
  --ts-1:  8px;
  --ts-2: 16px;
  --ts-3: 24px;
  --ts-4: 40px;
  --ts-5: 64px;
  --ts-6: 96px;
}


/* ============================================================================
   1. CONTENEDOR ÚNICO
   Antes: los títulos vivían en 1000px centrados y las grillas en 100vw.
   El truco 100vw incluye la barra de scroll, por eso las filas de categoría
   se salían 7px de la pantalla. Esto alinea títulos, filas y grillas.
   ============================================================================ */

html body .categoria-header,
html body .woocommerce.columns-5,
html body div[class*="wp-block"] .products,
html body ul.products.columns-5{
  width: 100% !important;
  max-width: var(--ts-ancho) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--ts-lado) !important;
  padding-right: var(--ts-lado) !important;
  box-sizing: border-box !important;
}

/* la grilla interna ya no necesita su propio relleno */
html body .woocommerce.columns-5 ul.products.columns-5{
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}


/* ============================================================================
   2. RITMO VERTICAL
   Antes: 24 / 54.08 / 15 / 40 / 25 / 20 px sin relación entre sí.
   ============================================================================ */

html body .titulo-seccion{
  margin: var(--ts-4) auto var(--ts-3) !important;
  max-width: var(--ts-ancho) !important;
  padding-left: var(--ts-lado) !important;
  padding-right: var(--ts-lado) !important;
}

/* "CATEGORÍAS" es el primer elemento de su bloque, y ese bloque ya trae su
   propio margen superior. Sumarle otro dejaba un hueco enorme bajo el banner. */
html body .titulo-seccion:first-child{
  margin-top: 0 !important;
}

html body .categoria-header{
  margin-top: var(--ts-2) !important;
  margin-bottom: var(--ts-2) !important;
  gap: var(--ts-3) !important;
}

/* La separación entre una categoría y la siguiente sale de aquí, no de
   apilar márgenes en el título. Un solo sitio que ajustar. */
html body .woocommerce.columns-5{
  margin-bottom: var(--ts-4) !important;
}

/* el separador vacío de 15px que quedó suelto entre CATEGORÍAS y NUEVOS
   PRODUCTOS ya no hace falta */
html body .entry-content > .wp-block-spacer{
  height: 0 !important;
}


/* ============================================================================
   3. TÍTULOS DE SECCIÓN
   Antes: 50px fijos con interlineado de 75px (25px de aire regalado dentro
   de la caja) y contraste 1.60:1. En móvil ocupaba ~400px para dos palabras.
   ============================================================================ */

/* Tu naranja y tu glow se quedan como estaban. Solo cambia el tamaño en
   pantallas pequeñas y el interlineado.
   En escritorio el techo del clamp son los mismos 50px de siempre; en un
   celular de 375px baja a 30px, que es lo que evita que "NUEVOS PRODUCTOS"
   se parta en dos líneas y ocupe ~400px de pantalla. */
html body .titulo-seccion{
  font-size: clamp(30px, 6vw, 50px) !important;
  line-height: 1.06 !important;
  letter-spacing: 2px !important;
}
html body .titulo-seccion:hover{
  transform: none !important;                          /* el título no es un botón */
}

/* NOTA DE CONTRASTE, para que lo tengas presente y decidas tú:
   #FFB300 sobre el gris #F2F2F2 da 1.60:1. El mínimo WCAG para texto grande
   es 3:1. Con brillo bajo o con sol el título se pierde.
   Si en algún momento quieres arreglarlo sin renunciar al naranja brillante,
   descomenta el bloque 9 del final: pone el título sobre banda oscura, donde
   ese mismo #FFB300 da 10.4:1 y el glow se ve mejor todavía. */


/* ============================================================================
   4. FILA DE CATEGORÍA — jerarquía real
   Antes: dos píldoras naranjas idénticas separadas por ~1000px de vacío.
   Nada indicaba cuál era el título y cuál la acción.
   Ahora: el nombre es texto, "Ver más" es el único botón.
   ============================================================================ */

html body .categoria-titulo{
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--ts-tinta) !important;
  font-size: clamp(20px, 3.2vw, 26px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
}
html body .categoria-titulo:hover{
  background: none !important;
  color: var(--ts-tinta) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .categoria-vermas{
  /* EL BUG: altura fija de 50px + salto de línea permitido. En móvil el texto
     se partía en "Ver / más" (66px) y se salía de la píldora. */
  white-space: nowrap !important;
  height: auto !important;
  min-height: 44px !important;                 /* objetivo táctil */
  padding: 10px 22px !important;
  font-size: 16px !important;
  background: transparent !important;
  color: var(--ts-naranja-texto) !important;   /* 4.88:1 ✓ */
  border: 2px solid var(--ts-naranja-texto) !important;
  box-shadow: none !important;
  transform: none !important;
}
html body .categoria-vermas:hover{
  background: var(--ts-naranja-texto) !important;
  color: #FFFFFF !important;                   /* 5.46:1 ✓ */
  box-shadow: none !important;
  transform: none !important;
}


/* ============================================================================
   5. CONTRASTE — el arreglo más importante
   Blanco sobre #FFA200 daba 2.02:1. El mínimo WCAG AA es 4.5:1.
   Con sol o brillo bajo, el texto del botón que vende desaparecía.
   ============================================================================ */

html body ul.products li.product a.button,
html body ul.products li.product .add_to_cart_button,
html body .woocommerce a.button,
html body .woocommerce button.button{
  background-color: var(--ts-naranja) !important;
  color: var(--ts-tinta) !important;           /* 8.64:1 ✓ AAA */
  font-weight: 700 !important;
  min-height: 44px !important;
  border: 0 !important;
}
html body ul.products li.product a.button:hover,
html body ul.products li.product .add_to_cart_button:hover,
html body .woocommerce a.button:hover{
  background-color: #E68F00 !important;
  color: var(--ts-tinta) !important;
}

/* El botón de la FICHA de producto es otro elemento (un <button>, no un <a>)
   y se había quedado fuera. Blanco sobre #FFAD0E daba 1.87:1, todavía peor
   que el del listado. Esto cubre también el carrito y el checkout. */
html body .single_add_to_cart_button,
html body button.single_add_to_cart_button,
html body .woocommerce .button.alt,
html body .woocommerce button.button.alt,
html body .wc-block-components-button{
  background-color: var(--ts-naranja) !important;
  color: var(--ts-tinta) !important;
  font-weight: 700 !important;
  min-height: 44px !important;
}
html body .single_add_to_cart_button:hover,
html body .woocommerce .button.alt:hover{
  background-color: #E68F00 !important;
  color: var(--ts-tinta) !important;
}

/* la etiqueta OFERTA tenía el mismo problema */
html body .woocommerce span.onsale{
  background-color: var(--ts-naranja) !important;
  color: var(--ts-tinta) !important;
  font-weight: 700 !important;
}


/* ============================================================================
   6. TIPOGRAFÍA — IBM Plex Mono es una fuente de código
   Bien para títulos y menú (aporta el aire técnico que le va a la tienda).
   Mal para nombres de producto: ocupa ~15% más de ancho y se lee peor.
   Plex Sans es la hermana de la misma familia: la marca no cambia.
   ============================================================================ */

html body ul.products li.product .woocommerce-loop-product__title,
html body ul.products li.product .woocommerce-loop-product__title a,
html body ul.products li.product h2{
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: #222222 !important;
  /* Blocksy 2.1.55 empezó a subrayar los enlaces del contenido. Los nombres
     de producto SON enlaces, y con tres líneas subrayadas la tarjeta se
     vuelve un bloque rayado ilegible. */
  text-decoration: none !important;
}
html body ul.products li.product .woocommerce-loop-product__title a:hover{
  text-decoration: underline !important;   /* solo al pasar el ratón */
  text-underline-offset: 3px !important;
}

html body ul.products li.product .price{
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;   /* los soles se alinean */
}


/* ============================================================================
   7. CABECERA — el logo tocaba el borde arriba y abajo
   Ocupaba 101px de alto en una cabecera de 101px: cero aire.
   Y con 316px de ancho, en una laptop de 1366px el menú escondía 5 de 8
   categorías detrás de "MÁS" mientras sobraban ~280px a la derecha.
   ============================================================================ */

/* ERROR DE LA v2, CORREGIDO AQUÍ:
   .site-logo-container va DENTRO de .site-branding, y yo le puse 24px de
   padding a los dos. Se sumaban: 24+24 + logo + 24+24. La cabecera pasó de
   101px a 149px de alto y el logo de 48px quedó perdido en medio de tanto
   aire. Por eso se veía pequeño. El padding va en UNO solo. */
html body .site-branding{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body .site-logo-container{
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 60px de logo dentro de 100px de cabecera. El logo ocupa el 60% del alto,
   que es la proporción habitual. Antes ocupaba el 100% (tocaba los bordes)
   y con la v2 se quedó en el 32%. */
/* OJO con el `display`: Blocksy 2.1.55 metió el logo sticky y ahora renderiza
   DOS <img> dentro del enlace del logo, <img class="sticky-logo"> y
   <img class="default-logo">, escondiendo el primero con display:none.
   Si aquí se pone `display:block !important` se desesconden los dos y salen
   dos logos uno al lado del otro. No hace falta: el contenedor ya es
   inline-flex, que es lo que elimina el hueco de línea base. */
html body .site-branding img,
html body .site-logo-container img{
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
}

/* --- 7h. Separación entre los iconos de la derecha ---------------------
   Medido: el elemento de cuenta traía margin: 0 30px y los otros dos
   0 10px, así que los huecos salían de 40px y luego 20px. Vaciando los
   márgenes y poniendo el hueco en el contenedor, los tres quedan iguales.

   Los iconos NO son hijos directos de la columna: van dentro de un
   [data-items="primary"]. Por eso el hueco hay que ponerlo ahí.

   CUIDADO CON EL ANCHO — esto me lo cargué en la v9.
   Los márgenes originales sumaban 168px de columna:
       30 (izq. cuenta) + 26 + 30 + 26 + 10+10 + 26  = 168
   Al poner gap:22 y margin:0 la columna bajó a 122px. Esos 46px liberados
   hicieron que el JavaScript de Blocksy metiera OTRO item en el menú, y
   entonces ya no cabía nada: el logo se cortaba y los iconos se solapaban.

   Por eso aquí el hueco es de 30px y se conserva el margen izquierdo:
       30 + 26 + 30 + 26 + 30 + 26 = 168  ← exactamente el ancho de antes
   Huecos iguales, y el menú no cambia de tamaño. */
html body .ct-header [data-column="end"] [data-items]{
  display: flex !important;
  align-items: center !important;
  gap: 30px !important;
  padding-left: 30px !important;
}
html body .ct-header [data-column="end"] [data-items] > [data-id]{
  margin: 0 !important;
}

/* --- 7h-bis. LA CABECERA MÓVIL ------------------------------------------
   Blocksy pinta dos cabeceras, [data-device="desktop"] y ="mobile", y la
   regla de arriba se aplicaba a las dos.

   MEDIDO A 375px, y aqui esta el problema de verdad:
       contenedor .......... 323px
       columnas ............ 137 + 137, fijas al 50% cada una
       contenido de la de iconos: 44+44+44 de area tactil
                                  + 30+30 de hueco + 30 de relleno = 222px
   222px de contenido en una columna de 137 se desbordan 85px HACIA LA
   IZQUIERDA, encima del logo. Medido: el carrito arrancaba en x=133
   mientras el logo llegaba hasta x=238.

   Bajar el hueco no basta: tres areas tactiles de 44px ya son 132px y la
   columna solo tiene 137. La solucion es que las columnas dejen de estar
   fijas al 50% y midan lo que necesitan.

   Resultado medido: logo 125px (0..175), iconos 185..329, 10px de aire
   entre medias, y las areas tactiles siguen siendo de 44px. */
html body .ct-header [data-device="mobile"] [data-row] .ct-container{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
html body .ct-header [data-device="mobile"] [data-column]{
  width: auto !important;
  flex: 0 0 auto !important;
}
html body .ct-header [data-device="mobile"] [data-column="end"] [data-items]{
  gap: 10px !important;
  padding-left: 0 !important;
}

/* --- 7h-ter. Los tres iconos, iguales -----------------------------------
   Medido, y eran tres diferencias a la vez:
       carrito ..... 26x26   color #131117
       buscador .... 24x24   color #131117
       hamburguesa . 24x24   color rgba(19,17,23, 0.70)  <- al 70%
   Ese 70% viene de --theme-icon-color, un ajuste del personalizador, y es
   lo que hacia que la hamburguesa se viera mas clara que las otras dos.
   Tambien se puede cambiar en Personalizar - Cabecera - Boton de menu. */
html body .ct-header [data-device="mobile"] [data-column="end"] [data-id]{
  --theme-icon-color: #131117 !important;
}
html body .ct-header [data-device="mobile"] [data-column="end"] [data-id] svg{
  width: 24px !important;
  height: 24px !important;
}

/* el logo a 60px son ~188px de ancho: demasiado para 375px de pantalla */
html body .ct-header [data-device="mobile"] .site-logo-container img,
html body .ct-header [data-device="mobile"] .site-branding img{
  max-height: 40px !important;
}
html body .ct-header [data-device="mobile"] .site-logo-container{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}


/* --- 7i. El desplegable de "MÁS" ---------------------------------------
   Medido: panel de fondo #131117 (casi negro) con enlaces de 12px en fuente
   del sistema, en minúsculas y texto blanco. El menú de al lado es de 16px,
   IBM Plex Mono, mayúsculas y texto oscuro sobre blanco. Eran dos diseños
   distintos pegados, y por eso desentonaba.
   Blocksy lo estiliza con variables CSS, no con propiedades sueltas.

   EL FONDO SE QUEDA COMO LO TRAE BLOCKSY (oscuro). En la v9 intenté ponerlo
   blanco con --dropdown-background-color y en la pagina real esa variable no
   llega a aplicarse, asi que quedaba panel oscuro con texto oscuro y
   "CONTACTO" ilegible. Con el panel oscuro y el texto blanco se lee bien.
   Si algun dia lo quieres claro, el sitio correcto es
   Personalizar - Menu - Desplegable, no CSS.

   Lo que si se corrige es la tipografia, que era lo desproporcionado:
   12px en fuente del sistema y minusculas, al lado de un menu de 16px en
   IBM Plex Mono y mayusculas. */
html body .ct-header [data-id="menu"] .sub-menu{
  --dropdown-width: 200px;
  --dropdown-items-spacing: 12px;
}
html body .ct-header [data-id="menu"] .sub-menu .ct-menu-link{
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}

/* la flecha del desplegable medía 8px al lado de un texto de 16px */
html body .ct-header [data-device] .ct-menu-link svg{
  width: 11px !important;
  height: 11px !important;
}


/* --- 7d. Cabecera y pie alineados con el contenido ---------------------
   El contenedor de Blocksy está en 1900px, así que en un monitor ancho el
   logo se iba al extremo izquierdo y el carrito al derecho, con un vacío
   enorme en medio. Bajándolo a los mismos 1300px del contenido, el borde
   izquierdo del logo cae justo sobre el de la primera tarjeta de producto. */
html body .ct-header .ct-container,
html body .ct-footer .ct-container{
  max-width: var(--ts-ancho) !important;
  padding-left: var(--ts-lado) !important;
  padding-right: var(--ts-lado) !important;
}

/* --- 7b. Iconos de la cabecera al mismo tamaño -------------------------
   Medidos en escritorio: buscador 32×32 y carrito 40×40. Ocho píxeles de
   diferencia se notan cuando están uno al lado del otro.                 */
html body .ct-header-search svg,
html body .ct-cart-item svg,
html body .ct-header-trigger svg,
html body .ct-cart-item .ct-icon-container svg,
/* Blocksy 2.1.55 añadió el elemento de cuenta ("Acceder") y le puso el icono
   a 40px, al lado de un buscador y un carrito de 26. Esa diferencia es lo
   que descuadra visualmente todo el bloque de la derecha. */
html body .ct-header-account svg,
html body .ct-account-item svg,
html body .ct-header [data-id="account"] svg{
  width: 26px !important;
  height: 26px !important;
}

/* Las etiquetas "Acceder" y "Buscar" repiten lo que ya dice el icono y se
   comen unos 105px que le hacen falta al menú. Llevan aria-hidden="true",
   así que ocultarlas no le quita nada a un lector de pantalla: el enlace
   conserva su aria-label.
   Si las prefieres visibles, borra este bloque. */
html body .ct-header [data-id="account"] .ct-label,
html body .ct-header [data-id="search"] .ct-label{
  display: none !important;
}


/* ============================================================================
   7c. EL ESPACIO EN BLANCO DE LAS FICHAS DE PRODUCTO
   ----------------------------------------------------------------------------
   Esto NO venía de esta capa: el tema define
       :root { --theme-content-vertical-spacing: 213px }
   y Blocksy la aplica a todo lo que tenga [data-vertical-spacing*="top"].
   En una ficha de producto eso son 213px arriba Y 213px abajo.

   Tú ya lo habías detectado (línea ~876 de tu CSS adicional), pero el
   selector no llega: apuntaste a  .ct-container[data-vertical-spacing]
   y en las fichas el contenedor es  .ct-container-full.

   Esta regla ataca el atributo directamente, así que cubre los dos casos.
   La portada no se ve afectada: su .ct-container-full no lleva el atributo.

   ¿Quieres otro valor? Cambia solo este número.
   ============================================================================ */

html body [data-vertical-spacing]{
  --theme-content-vertical-spacing: 40px !important;
}


/* ============================================================================
   7e. EL PIE
   ----------------------------------------------------------------------------
   Medido: 5 columnas iguales de 246px, 89px de relleno arriba y abajo, y el
   párrafo de "Acerca de Nosotros" en text-align:justify. Justificar un texto
   largo en una columna de 246px abre ríos de espacio entre palabras: eso es
   lo que hace que se vea desordenado.
   Las columnas también se estiraban todas a la altura de la más alta, por eso
   quedaba ese vacío grande debajo de las cortas.
   ============================================================================ */

html body .ct-footer .ct-hidden-sm .ct-container{
  padding-top: 56px !important;
  padding-bottom: 48px !important;
  align-items: start !important;          /* que cada columna mida lo suyo */
  gap: 32px !important;
  /* anchos según el contenido real, no cinco columnas idénticas */
  grid-template-columns: 1.5fr 1fr 1.15fr 1.25fr 0.85fr !important;
}

html body .ct-footer p,
html body .ct-footer li,
html body .ct-footer .widget{
  text-align: left !important;            /* estaba justificado */
  hyphens: none !important;
}

/* Las cinco redes se apilaban 2 + 2 + 1. En columna quedan alineadas con el
   resto del pie y se leen de un vistazo. */
html body .ct-footer .ct-social-box{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

/* la línea de copyright no necesita 50px arriba y abajo */
html body .ct-footer > div:last-child .ct-container{
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

@media (max-width: 991px){
  html body .ct-footer .ct-hidden-sm .ct-container{
    grid-template-columns: 1fr 1fr !important;
    padding-top: 40px !important;
    padding-bottom: 32px !important;
  }
}
@media (max-width: 576px){
  html body .ct-footer .ct-hidden-sm .ct-container{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}


/* ============================================================================
   7f. PAGINACIÓN DEL CATÁLOGO
   ----------------------------------------------------------------------------
   El marcado no es el de WooCommerce sino el de Blocksy:
       <nav class="ct-pagination" data-pagination="simple">
         <div> <span class="page-numbers current">1</span> <a class="page-numbers">2</a> … </div>
         <a class="next page-numbers">Siguiente <svg></a>
       </nav>
   Los números van sueltos dentro de un div sin separación ni área táctil, y
   "Siguiente" queda empujado al extremo derecho, desconectado del grupo.
   Aquí se agrupa todo centrado y cada número pasa a ser un objetivo de 44px.
   ============================================================================ */

html body .ct-pagination{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--ts-1) !important;
  margin-top: var(--ts-4) !important;
  margin-bottom: var(--ts-2) !important;
}

html body .ct-pagination > div{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ts-1) !important;
}

html body .ct-pagination .page-numbers{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ts-linea) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--ts-tinta) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease !important;
}

html body .ct-pagination a.page-numbers:hover{
  background: #FFF6E6 !important;
  border-color: var(--ts-naranja) !important;
  color: var(--ts-tinta) !important;
}

/* la página actual, en naranja de marca con texto oscuro (8.64:1).
   Antes era un cuadrado gris que no decía nada de la marca. */
html body .ct-pagination .page-numbers.current{
  background: var(--ts-naranja) !important;
  border-color: var(--ts-naranja) !important;
  color: var(--ts-tinta) !important;
}

/* los puntos suspensivos no son un botón: sin caja */
html body .ct-pagination .page-numbers.dots{
  background: transparent !important;
  border-color: transparent !important;
  min-width: 28px !important;
  padding: 0 !important;
  color: #8A929A !important;
}

/* "Siguiente" / "Anterior" vuelven al grupo, con su flecha separada */
html body .ct-pagination .next,
html body .ct-pagination .prev{
  gap: var(--ts-1) !important;
  padding: 0 20px !important;
  font-weight: 700 !important;
}


/* ============================================================================
   7g. EL BOTÓN "VER CARRITO"
   ----------------------------------------------------------------------------
   WooCommerce lo inyecta por JS al añadir un producto: es un <a> con clase
   .added_to_cart, NO .button. Por eso todo el estilo de píldora que aplicaste
   a .button no le llegaba y salía cuadrado.
   Pero el problema de fondo no era la forma, era el espacio.

   MEDIDO EN LA REJILLA (5 columnas, 1600px de pantalla):
       tarjeta ................ 234px
       "Añadir al carrito" .... 158px
       "Ver carrito" .......... 118px
       hueco entre ambos ......   8px
       zona de botones ........ 196px  ← 158 + 8 + 118 = 284. NO CABEN.

   Por eso "Ver carrito" bajaba a una segunda línea, esa tarjeta crecía 53px,
   y como todas las tarjetas de una fila comparten altura, los botones del
   resto se iban hacia abajo. No era un problema de estilo sino de espacio.

   Ocultarlo no vale: el icono del carrito de la cabecera NO tiene contador
   (Blocksy trae el importe, pero con las clases ct-hidden-sm/md/lg, o sea
   escondido en todos los tamaños). Sin "Ver carrito" el cliente añadiría un
   producto y no vería ninguna confirmación.

   SOLUCIÓN: los dos elementos se apilan, el botón pasa a ancho completo y
   "Ver carrito" deja de ser un segundo botón para ser un enlace compacto de
   28px. Y se reserva su altura en TODAS las tarjetas, no solo en la que se
   pulsa, así que al añadir un producto no se mueve absolutamente nada.
   Coste: 34px de aire bajo cada botón. A cambio, cero saltos.
   ============================================================================ */

/* Zona de botones anclada al fondo de la tarjeta. Las tarjetas de una fila ya
   comparten altura, así que con esto todos los "Añadir al carrito" quedan
   alineados aunque unos títulos ocupen 2 líneas y otros 3. Antes cada botón
   caía donde terminaba su texto. */
html body ul.products li.product{
  display: flex !important;
  flex-direction: column !important;
}
html body ul.products li.product .ct-woo-card-actions{
  margin-top: auto !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 6px !important;
  /* 87px medidos con el enlace presente: botón 45 + hueco 6 + enlace 28,
     más el <span class="screen-reader-text"> que WooCommerce mete entre
     ambos y que consume un hueco más. Reservarlo en TODAS las tarjetas es
     lo que hace que al añadir un producto no se mueva nada de la fila. */
  min-height: 87px !important;
}

/* Centrado del botón principal.
   Tu CSS le pone max-width:90%, así que el botón nunca llena la zona: le
   sobran ~19px. Quien lo centraba eran los margin-left/right:auto de tu
   propia regla. Aquí solo hay que asegurarlos — NO poner margin:0, porque
   eso los anula y el botón se pega a la izquierda (medido: centro del botón
   en 274 contra centro de la tarjeta en 284).
   El margin-top:8px de tu regla se respeta: está contado en los 87px de
   altura reservada de arriba. */
html body ul.products li.product .ct-woo-card-actions > a.button,
html body ul.products li.product .ct-woo-card-actions > .button{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* "Ver carrito" como enlace, no como segundo botón: dos píldoras naranjas
   dentro de la misma tarjeta compiten entre sí y no caben (158 + 8 + 118). */
html body ul.products li.product a.added_to_cart{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Blocksy le pone min-height:44px a todo lo que trate como botón, y
     min-height gana siempre sobre height. Hay que anularlo explícitamente
     o el enlace sigue midiendo 44px y la reserva de arriba se queda corta. */
  min-height: 28px !important;
  max-height: 28px !important;
  height: 28px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ts-naranja-texto) !important;   /* 4.88:1 */
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
html body ul.products li.product a.added_to_cart:hover{
  color: var(--ts-tinta) !important;
}

/* Fuera de la rejilla sí hay sitio: ahí conserva la píldora, con el alto y
   el radio exactos del botón principal (45px / 25px, medidos). */
html body a.added_to_cart{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 45px !important;
  padding: 0 20px !important;
  border-radius: 25px !important;
  background: transparent !important;
  color: var(--ts-naranja-texto) !important;
  border: 2px solid var(--ts-naranja-texto) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}


/* ============================================================================
   7j. EL BANNER DE PORTADA
   ----------------------------------------------------------------------------
   Estilos del bloque nuevo (banner-bloque.html). Si todavia no has cambiado
   el bloque HTML de la portada, estas reglas no afectan a nada: ningun
   elemento las usa.
   ============================================================================ */

/* El banner tiene que ir a pantalla completa, como iba el antiguo.
   WordPress mete la portada en un contenedor "is-layout-constrained" que
   limita a 1000px todo lo que cuelga de el, y por eso el banner salia
   encajonado con margenes blancos a los lados. Esto lo saca de ese limite.
   Nota: NO uso el truco de 100vw porque 100vw incluye la barra de scroll y
   provoca el desbordamiento de 7px que ya arreglamos en las rejillas. */
html body .ts-hero{
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 40px !important;
}

/* El H1 existe para Google y para los lectores de pantalla, pero el titular
   ya esta dibujado dentro de la imagen, asi que no se muestra dos veces.
   Esto NO es display:none: asi si lo lee un lector de pantalla. */
.ts-hero__h1{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ts-hero__media{
  display: block;
  line-height: 0;
}
.ts-hero__media img{
  display: block;
  width: 100%;
  height: auto;
}

.ts-hero__acciones{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: var(--ts-ancho);
  margin: 24px auto 0;
  padding: 0 var(--ts-lado);
}

.ts-hero__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 32px;
  border-radius: 28px;
  background: var(--ts-naranja);
  color: var(--ts-tinta);          /* 8.64:1 */
  border: 2px solid var(--ts-naranja);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease;
}
.ts-hero__cta:hover{
  background: #E68F00;
  border-color: #E68F00;
  color: var(--ts-tinta);
}

.ts-hero__cta--sec{
  background: transparent;
  color: var(--ts-naranja-texto);   /* 4.88:1 */
  border-color: var(--ts-naranja-texto);
}
.ts-hero__cta--sec:hover{
  background: var(--ts-naranja-texto);
  border-color: var(--ts-naranja-texto);
  color: #FFFFFF;                   /* 5.46:1 */
}

@media (max-width: 576px){
  .ts-hero{ margin-bottom: 24px; }
  .ts-hero__acciones{ flex-direction: column; padding: 0 16px; }
  .ts-hero__cta{ width: 100%; }
}


/* ============================================================================
   7k. FRANJA DE CONFIANZA
   ----------------------------------------------------------------------------
   Estilos del bloque franja-bloque.html.
   IMPORTANTE: sin estas reglas los <svg> del bloque no tienen tamaño y el
   navegador les da el que trae por defecto (300x150), que es por lo que
   salia un icono gigante ocupando toda la pantalla.
   ============================================================================ */

.ts-confianza{
  max-width: var(--ts-ancho);
  margin: 0 auto 56px;
  padding: 0 var(--ts-lado);
}

.ts-confianza__lista{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--ts-linea);
  border: 1px solid var(--ts-linea);
  border-radius: 12px;
  overflow: hidden;
}

.ts-confianza__item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  margin: 0;
  background: #FFFFFF;
  list-style: none;
}

/* el tamaño del icono: esto es lo que faltaba */
.ts-confianza__item svg{
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--ts-naranja-texto);
  margin-bottom: 4px;
}

.ts-confianza__item b{
  font-size: 15px;
  font-weight: 700;
  color: var(--ts-tinta);
  line-height: 1.3;
}

.ts-confianza__item span{
  font-size: 13px;
  color: #55606B;
  line-height: 1.45;
}

@media (max-width: 991px){
  .ts-confianza__lista{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px){
  .ts-confianza{ padding: 0 16px; margin-bottom: 32px; }
  .ts-confianza__lista{ grid-template-columns: 1fr; }
  .ts-confianza__item{ padding: 16px 18px; }
}


/* ============================================================================
   8. MÓVIL
   ============================================================================ */

@media (max-width: 999px){

  /* --- 8a. Objetivos táctiles ------------------------------------------
     Antes: carrito 40px, buscador 32px, menú 16px. Tres tamaños distintos,
     y el acceso a todo el catálogo era el más pequeño de los tres.
     Mínimo recomendado: 44px (Apple) / 48px (Google).                     */
  html body .ct-header-trigger,
  html body .ct-header-search,
  html body .ct-cart-item{
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body .ct-header-trigger svg,
  html body .ct-header-search svg,
  html body .ct-cart-item svg{
    width: 24px !important;
    height: 24px !important;
  }
}

/* --- 8b. El pie completo estaba oculto en celular -----------------------
   Blocksy lo esconde con .ct-hidden-sm a partir de 689.98px. En 1366px el
   pie mide 742px con teléfono, dirección, horario y redes. En 375px quedaba
   en 89px de copyright y CERO enlaces, justo donde entra tu tráfico.
   El breakpoint tiene que coincidir exacto con el de Blocksy.            */
@media (max-width: 689.98px){
  html body footer.ct-footer .ct-hidden-sm{
    display: block !important;
  }
}

/* --- 8c. Dos productos por fila -----------------------------------------
   Antes: un producto por fila a ancho completo. La portada medía
   12 775px = ~16 pantallas de scroll. A dos columnas baja a la mitad.
   Tu regla actual (línea ~1262 del CSS adicional) fuerza en 576px:
     display:block !important; columns:1 !important; grid-template-columns:none
   Hay que anular las tres, no solo el display.                            */
@media (max-width: 576px){

  html body div.woocommerce.columns-5 ul.products.columns-5{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    columns: auto !important;          /* anula el columns:1 */
    column-count: auto !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body div.woocommerce.columns-5 ul.products.columns-5 > li.product{
    display: block !important;
    width: auto !important;            /* el ancho lo pone la celda */
    max-width: none !important;
    min-width: 0 !important;           /* tu regla pone min-width:100% */
    margin: 0 !important;
    float: none !important;
    flex: none !important;
  }
  html body div.woocommerce.columns-5{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 689.98px){

  /* nombres de producto más compactos en dos columnas */
  html body ul.products li.product .woocommerce-loop-product__title{
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }
  html body ul.products li.product .price{
    font-size: 17px !important;
  }

  /* --- 8d. Ritmo vertical más ajustado ---------------------------------
     Medido en la v2: del botón "Añadir al carrito" de la última tarjeta al
     título "Monitores" había 87px. La tarjeta ya aporta 23px de relleno
     interior, así que el margen de la fila sobraba casi entero.            */
  html body .titulo-seccion{
    margin-top: var(--ts-4) !important;
    margin-bottom: var(--ts-2) !important;
  }
  html body .categoria-header{
    margin-top: var(--ts-1) !important;    /* 8px: de 87px de hueco a ~55 */
    margin-bottom: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body .woocommerce.columns-5{
    margin-bottom: var(--ts-3) !important;
  }

  /* --- 8e. El botón de WhatsApp tapaba los títulos --------------------- */
  html body .ht-ctc.ht-ctc-chat{
    z-index: 99 !important;
  }

  /* --- 8f. Paginación en celular --------------------------------------
     Seis números más "Siguiente" no caben en 375px, así que se dejan
     envolver y se recorta un poco el tamaño sin bajar de 40px de altura. */
  html body .ct-pagination .page-numbers{
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
  }
  html body .ct-pagination .next,
  html body .ct-pagination .prev{
    padding: 0 16px !important;
  }

}


/* ============================================================================
   9. OPCIONAL — títulos de sección sobre banda oscura
   Descomenta este bloque si quieres recuperar el naranja brillante #FFB300.
   Sobre fondo oscuro da 10.4:1, así que puedes usar el glow original sin
   ningún problema de contraste, y de paso separa visualmente las secciones.
   ============================================================================ */
/*
html body .titulo-seccion{
  background: #131117 !important;
  color: #FFB300 !important;
  max-width: 100% !important;
  padding: var(--ts-4) var(--ts-lado) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.4), 0 4px 14px rgba(255,165,0,.45) !important;
}
*/

/* ============================================================================
   TOPSTORE.PE · BOTÓN "COMPRAR POR WHATSAPP"  ·  v2
   ----------------------------------------------------------------------------
   DÓNDE VA
     Al FINAL de blocksy-child/topstore.css.
     Si ya pegaste la v1, reemplaza aquel bloque por este.

   CAMBIO RESPECTO A LA v1
     El botón ya no lleva margen propio: ahora vive DENTRO de la fila de
     compra (.ct-cart-actions), que es un flex con gap:10px. Así el hueco lo
     pone el propio contenedor y coincide exactamente con el que separa la
     cantidad del botón naranja. Antes quedaban 35px porque el contenedor de
     Blocksy añadía 25px de margen inferior por su cuenta.

   MEDIDO SOBRE TU BOTÓN, para que sean gemelos:
       "Añadir al carrito" ... 44px de alto · esquinas rectas (radius 0)
                               15px / peso 700 · fondo #FFA200, texto #1A1A1A

   COLOR
     Verde de WhatsApp #25D366 con texto casi negro: 8.78:1, cumple AAA.
     Con texto blanco ese mismo verde daría 1.98:1 y no se leería al sol.
   ============================================================================ */

/* La fila de compra pasa a poder envolver, y el botón ocupa una línea entera.
   El hueco de 10px sale del gap que ya tiene .ct-cart-actions. */
.ct-cart-actions{
  flex-wrap: wrap;
}
.ct-cart-actions .ts-wa{
  flex: 1 0 100%;
  margin: 0;
}

/* En productos "Se puede reservar" y agotados no hay fila de compra, así que
   el botón va suelto y necesita su propio hueco. */
.ts-wa{
  margin-top: 10px;
}

/* El contenedor del formulario queda vacío en esos productos: que no deje
   un hueco fantasma. */
.ct-product-add-to-cart:empty{
  display: none;
}

.ts-wa{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  min-height: 44px;          /* mismo alto que "Añadir al carrito" */
  padding: 5px 20px;
  box-sizing: border-box;

  background: #25D366;
  color: #0F1B14;
  border: 0;
  border-radius: 0;          /* tu botón tiene esquinas rectas */

  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;

  transition: background .18s ease;
}

/* Solo para productos agotados, donde el botón queda fuera de la fila
   porque WooCommerce no dibuja el formulario de compra. */
.entry-summary > .ts-wa,
.ct-product-add-to-cart + .ts-wa{
  margin-top: 10px;
}

.ts-wa:hover,
.ts-wa:focus-visible{
  background: #1CB554;
  color: #0F1B14;
  text-decoration: none;
}

.ts-wa:focus-visible{
  outline: 2px solid #0F1B14;
  outline-offset: 2px;
}

.ts-wa__icono{
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

@media (max-width: 576px){
  .ts-wa{
    font-size: 14px;
    gap: 8px;
  }
}

/* ============================================================================
   TOPSTORE.PE · FILTROS DE CATÁLOGO
   ----------------------------------------------------------------------------
   DÓNDE VA
     Al FINAL de blocksy-child/topstore.css

     Si ya pegaste la versión anterior de este archivo, BÓRRALA. Aquella
     apuntaba a los widgets clásicos (woocommerce-widget-layered-nav) y tú
     acabaste usando el bloque nuevo "Filtros de productos", que genera otras
     clases. Aquella no te está haciendo nada.

   PROBADO sobre /laptops/ con el filtro de 16" aplicado, 11 resultados.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Encabezados
   ----------------------------------------------------------------------------
   Venían como títulos de página: "Filtros" a 35px y cada grupo a 30px. En una
   columna de 337px eso ocupa más que las propias opciones.
   --------------------------------------------------------------------------- */
.wc-block-product-filters h2.wp-block-heading{
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ts-naranja-texto, #A15600) !important;
  margin: 0 0 4px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--ts-tinta, #1A1A1A);
}

.wc-block-product-filters h3.wp-block-heading{
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ts-tinta, #1A1A1A) !important;
  line-height: 1.3 !important;
  margin: 0 0 12px !important;
}


/* ---------------------------------------------------------------------------
   2. Separación entre grupos, y la columna que acompaña al scroll
   --------------------------------------------------------------------------- */
.wc-block-product-filters{
  position: sticky;
  top: 24px;
}

.wc-block-product-filters .wp-block-woocommerce-product-filter{
  padding: 18px 0;
  border-bottom: 1px solid var(--ts-linea, #E4E4E4);
}
.wc-block-product-filters .wp-block-woocommerce-product-filter:last-child{
  border-bottom: 0;
}


/* ---------------------------------------------------------------------------
   3. Las opciones
   --------------------------------------------------------------------------- */
.wc-block-product-filter-checkbox-list__items{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wc-block-product-filter-checkbox-list__item{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 14.5px;
  line-height: 1.3;
  transition: background .15s ease;
}
.wc-block-product-filter-checkbox-list__item:hover{
  background: #FFF6E6;
}

/* accent-color pinta la casilla nativa sin tener que reinventarla:
   se mantiene el foco por teclado y el comportamiento del navegador. */
.wc-block-product-filter-checkbox-list__input{
  accent-color: var(--ts-naranja-texto, #A15600);
  width: 17px;
  height: 17px;
  flex: none;
  margin: 0;
}

.wc-block-product-filter-checkbox-list__label{
  color: var(--ts-tinta, #1A1A1A);
  cursor: pointer;
}

/* el contador, cuando lo actives en el bloque */
.wc-block-product-filter-checkbox-list__count{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #8A929A;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}


/* ---------------------------------------------------------------------------
   4. Precio
   ----------------------------------------------------------------------------
   Los dos recuadros venían con width Y max-width de 60px, así que "S/ 2,090"
   se cortaba en "S/ 2,09" y "S/ 12,361" en "S/ 12,3". Poner solo width no
   basta: hay que anular también el max-width o vuelve a recortarse.
   --------------------------------------------------------------------------- */
.wc-block-product-filter-price-slider__content{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.wc-block-product-filter-price-slider__left,
.wc-block-product-filter-price-slider__right{
  flex: 1 1 0;
  min-width: 0;
}

.wc-block-product-filter-price-slider__left input,
.wc-block-product-filter-price-slider__right input{
  width: 100% !important;
  max-width: none !important;   /* esto es lo que arregla el recorte */
  min-width: 0 !important;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid #D2DAE2;
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--ts-tinta, #1A1A1A);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}


/* ---------------------------------------------------------------------------
   5. Filtros activos, como etiquetas que se quitan
   --------------------------------------------------------------------------- */
.wc-block-product-filter-removable-chips__items{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc-block-product-filter-removable-chips__item{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  border-radius: 20px;
  background: #FFF1D9;
  border: 1px solid #F0C68A;
  color: #7A4300;
  font-size: 12.5px;
  font-weight: 600;
}
.wc-block-product-filter-removable-chips__item:hover{
  background: var(--ts-naranja-texto, #A15600);
  border-color: var(--ts-naranja-texto, #A15600);
  color: #FFFFFF;
}

.wc-block-product-filter-removable-chips__remove-icon{
  width: 15px;
  height: 15px;
  opacity: .7;
}


/* ---------------------------------------------------------------------------
   6. Móvil
   ----------------------------------------------------------------------------
   Blocksy manda la barra lateral debajo del contenido en móvil, o sea que el
   cliente vería los filtros DESPUÉS de los 64 productos. Con esto suben.
   --------------------------------------------------------------------------- */
@media (max-width: 999px){
  .ct-sidebar{
    order: -1;
    margin-bottom: 24px;
  }
  .wc-block-product-filters{
    position: static;
  }
}

/* ============================================================================
   TOPSTORE.PE · FICHA DE PRODUCTO · TARJETA DE ESPECIFICACIONES
   ----------------------------------------------------------------------------
   DÓNDE VA
     Al FINAL de blocksy-child/topstore.css.

   QUÉ ARREGLA
     La galería y el resumen del producto van dentro de .product-entry-wrapper,
     que Blocksy limita al ancho del contenedor. Las pestañas "Descripción /
     Información adicional" NO están dentro de ese envoltorio, así que salen
     de borde a borde: medido 1425px de ancho empezando en x=0, mientras la
     galería empieza en x=93. De ahí que el cuadro ocupe toda la pantalla.

     Las tablas vienen de Deltron con estilos EN LÍNEA:
       <td style="background:#ff9e00; color:#fff; padding:8px;">
     Un estilo en línea gana a cualquier hoja de estilos salvo con !important,
     por eso varias reglas de abajo lo llevan. No es capricho.

   RESULTADO
     Tarjeta blanca con borde suave, título "Características del producto",
     filas alternas grises, columna de etiqueta en versalitas, sin rejilla de
     bordes, y un botón "Ver todas las especificaciones" que la recorta a
     8 filas (ese botón lo pone ficha-especificaciones.php).
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Ancho: el mismo que la galería y el resumen
   ----------------------------------------------------------------------------
   Es exactamente la regla que Blocksy aplica a .is-width-constrained, que es
   la clase que lleva .product-entry-wrapper.
   --------------------------------------------------------------------------- */
.product > .woocommerce-tabs{
  width: var(--theme-container-width);
  max-width: var(--theme-block-max-width);
  margin-inline: auto;
  padding-top: 48px;
}


/* ---------------------------------------------------------------------------
   2. Las pestañas: botones tipo píldora, alineados a la izquierda
   --------------------------------------------------------------------------- */
.woocommerce div.product div.woocommerce-tabs ul.tabs,
.woocommerce-tabs[data-type*="type-1"] .tabs{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border-bottom: 0;
}

.woocommerce div.product div.woocommerce-tabs ul.tabs li{
  border: 0;
}

.woocommerce div.product div.woocommerce-tabs ul.tabs li a{
  width: auto;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--ts-linea, #E4E4E4);
  background: #FFFFFF !important;
  color: var(--ts-tinta, #1A1A1A) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.woocommerce div.product div.woocommerce-tabs ul.tabs li a:hover{
  border-color: var(--ts-tinta, #1A1A1A);
}

.woocommerce div.product div.woocommerce-tabs ul.tabs li.active a{
  background: var(--ts-tinta, #1A1A1A) !important;
  border-color: var(--ts-tinta, #1A1A1A);
  color: #FFFFFF !important;
}

/* La rayita naranja que Blocksy pone bajo la pestaña activa: ya no hace
   falta, la píldora oscura marca cuál está seleccionada. */
.woocommerce div.product div.woocommerce-tabs ul.tabs li.active::before{
  display: none;
}


/* ---------------------------------------------------------------------------
   3. La tarjeta
   ----------------------------------------------------------------------------
   Mismo selector que usa Blocksy para su padding-top:40px, así esta regla
   lo sustituye sin necesitar !important.
   --------------------------------------------------------------------------- */
.woocommerce div.product div.woocommerce-tabs div.woocommerce-Tabs-panel.panel{
  padding: 24px 24px 28px;
  background: #FFFFFF;
  border: 1px solid var(--ts-linea, #E4E4E4);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Título de la tarjeta. Blocksy no imprime el h2 "Descripción", así que lo
   pone el CSS: es decoración, no contenido que deba leer un buscador. */
.woocommerce-Tabs-panel--description::before{
  content: "Características del producto";
}
.woocommerce-Tabs-panel--additional_information::before{
  content: "Resumen técnico";
}
.woocommerce-Tabs-panel::before{
  display: block;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ts-linea, #E4E4E4);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ts-tinta, #1A1A1A);
}

/* Párrafos que algunas descripciones traen antes de la tabla. */
.woocommerce-Tabs-panel > p,
.woocommerce-Tabs-panel .ts-specs-cuerpo > p{
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #3A3F45;
}


/* ---------------------------------------------------------------------------
   4. La tabla
   ----------------------------------------------------------------------------
   Los !important son para ganar a los estilos en línea de Deltron (fondo
   naranja, texto blanco, padding 8px) y al borde de 1px que Blocksy pone
   en table/th/td.
   --------------------------------------------------------------------------- */
.woocommerce-Tabs-panel table{
  width: 100% !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 !important;
  font-size: 14px;
}

.woocommerce-Tabs-panel table th,
.woocommerce-Tabs-panel table td{
  border: 0 !important;
  padding: 13px 16px !important;
  background: transparent !important;
  color: var(--ts-tinta, #1A1A1A) !important;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}

/* Filas alternas. Especificidad (0,2,2) frente a (0,1,2) de la regla
   anterior, así que gana sin trucos. */
.woocommerce-Tabs-panel table tr:nth-child(odd) > *{
  background: #F5F5F7 !important;
}

/* Columna de la etiqueta. */
.woocommerce-Tabs-panel table tr > :first-child{
  width: 36%;
  font-weight: 700 !important;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* La pestaña "Información adicional" envuelve cada valor en un <p>. */
.woocommerce-product-attributes-item__value p{
  margin: 0;
}


/* ---------------------------------------------------------------------------
   5. Recorte a 8 filas y botón "Ver todas las especificaciones"
   ----------------------------------------------------------------------------
   Las clases ts-specs-* las añade el script de ficha-especificaciones.php.
   Sin ese script la tabla se ve completa: no se rompe nada.
   --------------------------------------------------------------------------- */
.ts-specs-cuerpo{
  position: relative;
}

.is-colapsado .ts-specs-cuerpo{
  max-height: 420px;
  overflow: hidden;
}

/* Degradado que insinúa que hay más abajo. */
.is-colapsado .ts-specs-cuerpo::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(rgba(255,255,255,0), #FFFFFF 85%);
  pointer-events: none;
}

.ts-specs-boton{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* Sin esto un flex se estira a los 1188px de la tarjeta: medido. */
  width: max-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 11px 24px;
  background: #FFFFFF;
  color: var(--ts-tinta, #1A1A1A);
  border: 1.5px solid var(--ts-tinta, #1A1A1A);
  border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ts-specs-boton:hover,
.ts-specs-boton:focus-visible{
  background: var(--ts-tinta, #1A1A1A);
  color: #FFFFFF;
}
.ts-specs-boton:focus-visible{
  outline: 2px solid var(--ts-naranja-texto, #A15600);
  outline-offset: 3px;
}

.ts-specs-boton svg{
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform .2s ease;
}
.ts-specs-boton[aria-expanded="true"] svg{
  transform: rotate(180deg);
}


/* ---------------------------------------------------------------------------
   6. Móvil
   --------------------------------------------------------------------------- */
@media (max-width: 689px){
  .product > .woocommerce-tabs{
    padding-top: 32px;
  }
  .woocommerce div.product div.woocommerce-tabs div.woocommerce-Tabs-panel.panel{
    padding: 16px 14px 20px;
    border-radius: 10px;
  }
  .woocommerce-Tabs-panel::before{
    font-size: 16px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }
  .woocommerce-Tabs-panel table{
    font-size: 13.5px;
  }
  .woocommerce-Tabs-panel table th,
  .woocommerce-Tabs-panel table td{
    padding: 10px 12px !important;
  }
  .woocommerce-Tabs-panel table tr > :first-child{
    width: 40%;
    font-size: 11.5px;
  }
  .ts-specs-boton{
    width: 100%;
  }
}

/* ============================================================================
   TOPSTORE.PE · FICHA DE PRODUCTO · DOS COLUMNAS + "TAMBIÉN TE PUEDE INTERESAR"
   ----------------------------------------------------------------------------
   DÓNDE VA
     Al FINAL de blocksy-child/topstore.css, DESPUÉS del bloque
     "TARJETA DE ESPECIFICACIONES" que ya pegaste. El orden importa: aquí se
     corrige una regla de aquel bloque.

   QUÉ HACE
     Parte la zona inferior de la ficha en dos: especificaciones a la
     izquierda, recomendaciones a la derecha.

   POR QUÉ CAMBIA UNA REGLA ANTERIOR
     En el bloque anterior el ancho del contenedor se lo puse a las pestañas
     (.woocommerce-tabs). Ahora ese ancho tiene que estar en el padre común
     de las dos columnas (.product), o la columna derecha se quedaría fuera.
     Las reglas de abajo son más específicas, así que ganan sin !important.

   LA COLUMNA DERECHA SOLO APARECE
     en fichas que llevan la clase ts-tiene-reco, que pone el PHP cuando de
     verdad hay productos que recomendar. Una ficha sin recomendaciones sigue
     a una sola columna, a ancho completo.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. El ancho pasa de las pestañas al contenedor del producto
   --------------------------------------------------------------------------- */
.single-product .product.type-product{
  width: var(--theme-container-width);
  max-width: var(--theme-block-max-width);
  margin-inline: auto;
}

/* Ya no se limitan solos: heredan el ancho del padre. */
.single-product .product.type-product > .product-entry-wrapper,
.single-product .product.type-product > .woocommerce-tabs{
  width: 100%;
  max-width: none;
  margin-inline: 0;
}


/* ---------------------------------------------------------------------------
   2. Las dos columnas
   ----------------------------------------------------------------------------
   El corte está en 1100px y no en los 1000px del tema: medido a 1010px, la
   columna de etiquetas de las especificaciones se queda en 229px y títulos
   como "CARACTERÍSTICAS ADICIONALES DE PANTALLA" parten en tres líneas.
   Por debajo, las recomendaciones van a lo ancho debajo de la tabla.

   minmax(0, 1fr) y no 1fr: sin el minmax, una tabla ancha empuja la columna
   y desborda la página. Es el fallo clásico de las rejillas con tablas.

   El clamp del lado derecho evita que en pantallas de 1100-1300px la columna
   fija de 330px se coma las especificaciones.
   --------------------------------------------------------------------------- */
@media (min-width: 1100px){

  .single-product .product.ts-tiene-reco{
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ts-reco-ancho, clamp(280px, 28%, 330px));
    column-gap: 30px;
    align-items: start;
  }

  .single-product .product.ts-tiene-reco > .product-entry-wrapper{
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Fila 2 explícita para las dos: si algún día el tema añade otra sección
     aquí dentro, no se cuela entre medias. */
  .single-product .product.ts-tiene-reco > .woocommerce-tabs{
    grid-column: 1;
    grid-row: 2;
  }

  .single-product .product.ts-tiene-reco > .ts-reco{
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;   /* hace falta para que el sticky de dentro tenga recorrido */
  }

  /* La columna acompaña al scroll mientras se leen las especificaciones. */
  .ts-reco__caja{
    position: sticky;
    top: 24px;
  }
}


/* ---------------------------------------------------------------------------
   3. La tarjeta de recomendaciones
   ----------------------------------------------------------------------------
   Mismo lenguaje visual que la tarjeta de especificaciones: fondo blanco,
   borde de 1px, esquinas de 12px.
   --------------------------------------------------------------------------- */
.ts-reco{
  padding-top: 48px;
}

.ts-reco__caja{
  background: #FFFFFF;
  border: 1px solid var(--ts-linea, #E4E4E4);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
}

.ts-reco__titulo{
  margin: 0;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--ts-linea, #E4E4E4);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ts-tinta, #1A1A1A);
}

.ts-reco__lista{
  list-style: none;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* ---------------------------------------------------------------------------
   4. Cada producto
   --------------------------------------------------------------------------- */
.ts-reco__enlace{
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  align-items: center;

  padding: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.ts-reco__enlace:hover,
.ts-reco__enlace:focus-visible{
  background: #FAFAFB;
  border-color: var(--ts-linea, #E4E4E4);
  text-decoration: none;
}
.ts-reco__enlace:focus-visible{
  outline: 2px solid var(--ts-naranja-texto, #A15600);
  outline-offset: 2px;
}

.ts-reco__foto{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  background: #F5F5F7;
  border-radius: 8px;
  overflow: hidden;
}
.ts-reco__foto img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;   /* las fotos de Deltron traen fondo blanco */
}

.ts-reco__datos{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ts-reco__marca{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A929A;
  line-height: 1.2;
}

/* Los títulos de Deltron son larguísimos: dos líneas y a otra cosa. */
.ts-reco__nombre{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ts-tinta, #1A1A1A);
}

.ts-reco__precio{
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ts-tinta, #1A1A1A);
  font-variant-numeric: tabular-nums;
}

/* WooCommerce mete el precio dentro de <span class="woocommerce-Price-amount">
   y, si hay oferta, un <del> con el precio anterior. */
.ts-reco__precio .woocommerce-Price-amount{
  color: inherit;
}
.ts-reco__precio del{
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #8A929A;
}
.ts-reco__precio ins{
  text-decoration: none;
}


/* ---------------------------------------------------------------------------
   5. "Ver más productos"
   --------------------------------------------------------------------------- */
.ts-reco__mas{
  display: block;
  padding: 14px 18px;
  border-top: 1px solid var(--ts-linea, #E4E4E4);
  text-align: center;
  text-decoration: none;

  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ts-naranja-texto, #A15600);
  transition: background .15s ease;
}
.ts-reco__mas:hover,
.ts-reco__mas:focus-visible{
  background: #FFF6E6;
  color: var(--ts-naranja-texto, #A15600);
  text-decoration: none;
}


/* ---------------------------------------------------------------------------
   6. Móvil y tablet
   ----------------------------------------------------------------------------
   Debajo de 1100px la columna pasa a ir después de las especificaciones, a
   todo lo ancho. Con sitio de sobra, dos productos por fila; en móvil, uno.
   --------------------------------------------------------------------------- */
@media (max-width: 1099px){
  .ts-reco{
    padding-top: 28px;
  }
}

@media (min-width: 690px) and (max-width: 1099px){
  .ts-reco__lista{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* ============================================================================
   TOPSTORE.PE · PROPORCIONES GENERALES DE LA PÁGINA
   ----------------------------------------------------------------------------
   DÓNDE VA
     Al FINAL de blocksy-child/topstore.css, DESPUÉS de los dos bloques
     anteriores (especificaciones y recomendaciones). El orden importa: aquí
     se ajustan un par de medidas de aquellos.

   EL PROBLEMA, MEDIDO A 1920px
     cabecera .............. 1300px  (empieza en x=303)
     banner de categoría ... 1651px  (empieza en x=127)
     contenido ............. 1651px  (empieza en x=127)
     pie ................... 1300px  (empieza en x=303)

     Tu propio CSS ya limitaba cabecera y pie a --ts-ancho, pero el contenido
     nunca entró en esa regla: se quedó en 86vw, que en una pantalla de 1920
     son 1651px. Por eso el contenido "se sale" 176px por cada lado respecto
     a la cabecera. Eso es lo que se ve desproporcionado.

   MEDIDAS TOMADAS DE impacto.com.pe (a 1920px)
     contenedor ............ 1440px, con 24px de relleno lateral
     contenido real ........ 1392px
     ficha: dos columnas ... 969px | 40px de hueco | 359px
     galería del producto .. 601px
     tarjetas .............. borde 1px, radio 12px

     Tú ya tenías --ts-lado: 24px, así que solo cambia el ancho.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Un solo ancho para toda la web
   ----------------------------------------------------------------------------
   Blocksy calcula el ancho de TODOS sus contenedores con la misma variable,
   --theme-container-width. En tu web valía 86vw, o sea que crecía con la
   pantalla sin tope: 1651px en un monitor de 1920. La cabecera y el pie no
   se veían afectados porque tu CSS ya les ponía un max-width propio.

   Cambiando la variable aquí, en :root, se arreglan los tres de golpe y
   quedan atados al mismo número: cabecera, contenido y pie.

   Tiene que ir en :root y no dentro de #main. Lo probé de las dos formas:
   con la regla limitada a #main, a 1280px la cabecera se quedaba en 86vw
   (1053px de contenido) y el contenido se iba a 1217px. Volvían a no
   coincidir. Desde :root, ambos usan la misma fórmula a cualquier ancho.

   .ct-container-full NO usa esa variable, así que el banner de categoría
   sigue ocupando la pantalla completa. Es lo que queremos.
   --------------------------------------------------------------------------- */
:root{
  --ts-ancho: 1440px;                                      /* antes 1300px */
  --theme-container-width: min(100%, var(--ts-ancho));     /* antes 86vw   */
  --theme-normal-container-max-width: var(--ts-ancho);     /* antes 1900px */
}


/* ---------------------------------------------------------------------------
   2. El mismo relleno lateral en el contenido
   ----------------------------------------------------------------------------
   La cabecera y el pie ya llevan --ts-lado. Esto se lo da también al
   contenido, para que todo empiece en la misma vertical que el logo.
   --------------------------------------------------------------------------- */
html body #main .ct-container,
html body #main .hero-section.is-width-constrained,
html body.single-product #main .product.type-product{
  padding-left: var(--ts-lado);
  padding-right: var(--ts-lado);
  box-sizing: border-box;
}


/* ---------------------------------------------------------------------------
   3. Ritmo vertical
   ----------------------------------------------------------------------------
   Con la escala que ya tienes definida arriba (--ts-1 a --ts-6). Antes el
   contenido arrancaba a 20px del banner y terminaba a 40px del pie: mucho
   aire a los lados y nada arriba y abajo.

   Los !important son obligatorios aquí. En la línea 903 de tu topstore.css
   hay esto:

       .ct-container[data-vertical-spacing]{
         padding-top: 20px !important;
         padding-bottom: 20px !important;
       }

   Una declaración !important gana a cualquier otra que no lo sea, por muy
   específica que sea. Sin esto, estas reglas no harían nada.
   --------------------------------------------------------------------------- */
html body #main > .ct-container,
html body #main > .ct-container-full{
  padding-top: var(--ts-4) !important;      /* 40px */
  padding-bottom: var(--ts-6) !important;   /* 96px, para que el pie no venga encima */
}

/* Categoría: separar la rejilla del banner. */
html body:not(.single-product) #main > .ct-container{
  padding-top: var(--ts-5) !important;      /* 64px */
}

/* Ficha: separar las migas del producto. En impacto.com.pe ese hueco es de
   80px; 64 es el escalón que ya tienes y da la misma sensación. */
html body.single-product #main .hero-section{
  margin-bottom: var(--ts-5);
}


/* ---------------------------------------------------------------------------
   4. La ficha de producto
   --------------------------------------------------------------------------- */

/* La galería ocupaba 806px: la foto pesaba más que el producto. Con 44% del
   contenedor quedan 595px, prácticamente los 601 de impacto.com.pe, y el
   resumen gana sitio para el título largo y el botón de WhatsApp. */
html body .product-entry-wrapper{
  --product-gallery-width: 44%;
}

/* Dos columnas de abajo. Sustituye a los valores del bloque anterior
   (330px de columna y 30px de hueco) por los de impacto.com.pe. */
@media (min-width: 1100px){
  html body.single-product #main .product.ts-tiene-reco{
    grid-template-columns: minmax(0, 1fr) clamp(300px, 27%, 365px);
    column-gap: var(--ts-4);
  }
}

/* Hueco entre la galería y la tarjeta de especificaciones: 24px, como en la
   referencia. Antes eran 48. */
html body.single-product #main .product > .woocommerce-tabs,
html body #main .ts-reco{
  padding-top: var(--ts-3);
}


/* ---------------------------------------------------------------------------
   5. La página de categoría
   ----------------------------------------------------------------------------
   La barra de filtros medía 460px frente a tarjetas de 244px. En la
   referencia la columna lateral son 359px. Con 26% quedan 362px y las
   tarjetas suben a 229px.
   --------------------------------------------------------------------------- */
html body #main [data-sidebar]{
  --sidebar-width: 26%;
  --sidebar-gap: 3%;
}

/* La rejilla tenía 52px entre filas y 21px entre columnas: las filas se veían
   sueltas y las columnas apretadas. Ahora es proporcionada. */
html body #main ul.products{
  gap: var(--ts-4) var(--ts-3) !important;
}


/* ---------------------------------------------------------------------------
   6. La portada
   ----------------------------------------------------------------------------
   El título "CATEGORÍAS" y su fila viven dentro de un bloque de Stackable que
   tiene su propio ancho de contenido: 1132px. Era el único bloque de la
   portada que no coincidía con los demás (medido: 1132 frente a 1392).

   Si prefieres que esa fila siga siendo más estrecha que el resto, borra
   estas cuatro líneas. Lo demás no depende de ellas.
   --------------------------------------------------------------------------- */
html body #main .wp-block-stackable-columns > .stk-row{
  max-width: var(--ts-ancho);
}


/* ---------------------------------------------------------------------------
   7. Pantallas intermedias y móvil
   ----------------------------------------------------------------------------
   Por debajo de 1440 el contenedor ya es fluido (min(100%, 1440px)), así que
   solo hay que recortar el aire vertical, que en móvil sobra.
   --------------------------------------------------------------------------- */
@media (max-width: 999px){
  html body #main > .ct-container,
  html body #main > .ct-container-full,
  html body:not(.single-product) #main > .ct-container{
    padding-top: var(--ts-3) !important;      /* 24px */
    padding-bottom: var(--ts-5) !important;   /* 64px */
  }
  html body.single-product #main .hero-section{
    margin-bottom: var(--ts-3);
  }
}

@media (max-width: 689px){
  html body #main > .ct-container,
  html body #main > .ct-container-full,
  html body:not(.single-product) #main > .ct-container{
    padding-top: var(--ts-2) !important;      /* 16px */
    padding-bottom: var(--ts-4) !important;   /* 40px */
  }
  html body #main ul.products{
    gap: var(--ts-3) var(--ts-2) !important;
  }
}

/* ============================================================================
   TOPSTORE.PE · FICHA DE PRODUCTO · CABECERA EN TRES COLUMNAS  ·  v2
   ----------------------------------------------------------------------------
   NOVEDAD DE LA v2
     Estilos para el precio de oferta: el precio de antes tachado, la etiqueta
     del porcentaje y la línea de ahorro. Van con la v2 de ficha-cabecera.php.

   CÓMO ACTUALIZAR
     En topstore.css, borra el bloque de la v1 entero —desde el comentario
     "TOPSTORE.PE · FICHA DE PRODUCTO · CABECERA EN TRES COLUMNAS" hasta el
     final del archivo— y pega este en su lugar.

   ----------------------------------------------------------------------------
   DÓNDE VA
     Al FINAL de blocksy-child/topstore.css, DESPUÉS de los tres bloques
     anteriores. El orden importa: aquí se corrigen medidas de aquellos.

     Orden completo, de arriba abajo:
       1. TARJETA DE ESPECIFICACIONES   (ficha-especificaciones.css)
       2. DOS COLUMNAS + RECOMENDADOS   (recomendados-estilos.css)
       3. PROPORCIONES GENERALES        (dimensiones-generales.css)
       4. este archivo

   VA JUNTO CON ficha-cabecera.php
     Sin el PHP no pasa nada: la ficha se queda exactamente como está ahora.
     Las reglas de aquí solo entran cuando el contenedor lleva la clase
     ts-tiene-lateral, que la pone el PHP.

   MEDIDAS, TOMADAS DE impacto.com.pe A 1920px
     rejilla ............... 73% | 40px | 27%   →  969 | 40 | 359
     dentro de la izquierda  62% galería | 38% información
     tarjetas .............. borde 1px, radio 12px, relleno 20px
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. La rejilla
   ----------------------------------------------------------------------------
   Sustituye a la rejilla del bloque 2, que solo partía en dos la mitad de
   abajo. Ahora la columna derecha arranca arriba del todo y llega hasta el
   final, en una sola pieza.

       columna 1        columna 2
       ┌──────────────┬───────────┐
   f1  │ galería+info │           │
       ├──────────────┤  lateral  │
   f2  │ especificac. │           │
       └──────────────┴───────────┘

   Las dos filas se declaran explícitas para que "grid-row: 1 / 3" tenga un
   final al que agarrarse. Con filas implícitas, un 3 que no existe empuja la
   columna a una fila nueva y se descuadra todo.

   El prefijo "html body" está para ganar por especificidad a las reglas del
   bloque 2, que colocaban .product-entry-wrapper a lo ancho de las dos
   columnas. Sin él quedarían empatadas y dependería del orden del archivo.
   --------------------------------------------------------------------------- */
@media (min-width: 1100px){

  html body.single-product #main .product.ts-tiene-lateral{
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 27%, 365px);
    grid-template-rows: auto auto;
    column-gap: var(--ts-4, 40px);
    align-items: start;
  }

  /* Por defecto todo a la izquierda: si el tema añadiera algún día otra
     sección aquí dentro, cae en su sitio y no se cuela en la columna. */
  html body.single-product #main .product.ts-tiene-lateral > *{
    grid-column: 1;
  }

  html body.single-product #main .product.ts-tiene-lateral > .product-entry-wrapper{
    grid-column: 1;
    grid-row: 1;
  }

  html body.single-product #main .product.ts-tiene-lateral > .woocommerce-tabs{
    grid-column: 1;
    grid-row: 2;
  }

  html body.single-product #main .product.ts-tiene-lateral > .ts-lateral{
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;   /* sin esto el sticky de dentro no tiene recorrido */
  }

  /* La columna acompaña al scroll mientras se leen las especificaciones. */
  .ts-lateral__pila{
    position: sticky;
    top: var(--ts-3, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--ts-3, 24px);
  }

  /* El bloque 2 dejaba la tarjeta de recomendados pegajosa por su cuenta.
     Ahora la pegajosa es la columna entera, así que esa se queda quieta. */
  .ts-lateral .ts-reco__caja{
    position: static;
  }
}


/* ---------------------------------------------------------------------------
   2. Reparto entre galería e información
   ----------------------------------------------------------------------------
   Blocksy reparte la fila de arriba con --product-gallery-width, descontando
   antes el hueco de 40px que separa las dos.

   En el bloque 3 esta variable quedó en 44%, calculada sobre los 1392px que
   entonces ocupaba la fila entera. Ahora la fila mide 987 porque cede 365 a
   la columna derecha, así que el porcentaje tiene que subir o la foto se
   queda diminuta.

     987 - 40 de hueco = 947 repartibles
     61% de 947 = 578 de galería · 369 de información

   impacto.com.pe usa 601 y 368. Prácticamente lo mismo.
   --------------------------------------------------------------------------- */
@media (min-width: 1100px){
  html body.single-product #main .product.ts-tiene-lateral .product-entry-wrapper{
    --product-gallery-width: 61%;
  }
}


/* ---------------------------------------------------------------------------
   3. Lo que sale de la columna del medio
   ----------------------------------------------------------------------------
   El precio se pinta ahora dentro de la tarjeta de la derecha, con las dos
   formas de pago. Dejarlo también aquí sería decir el mismo número dos veces
   con dos cifras distintas, que es peor que no decirlo.

   No se borra desde PHP porque lo imprime el constructor de fichas de
   Blocksy: tocarlo ahí significaría desmontar tu configuración. Ocultarlo
   solo cuando existe el reemplazo (clase ts-tiene-lateral) es reversible:
   quitas el PHP y el precio vuelve solo a su sitio.
   --------------------------------------------------------------------------- */
html body.single-product #main .product.ts-tiene-lateral .entry-summary > .price{
  display: none;
}

/* La marca, encima del título. */
.ts-marca{
  display: block;
  margin-bottom: 6px;

  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #6B7075;
}

/* El código de fabricante, debajo. */
.ts-codigo{
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #6B7075;
}
.ts-codigo__valor{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  color: var(--ts-tinta, #1A1A1A);
  user-select: all;          /* un clic lo selecciona entero para copiarlo */
}

html body.single-product #main .product.ts-tiene-lateral .entry-summary > .woocommerce-product-details__short-description{
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.6;
}

/* El título, a la medida de la columna nueva.
   ------------------------------------------------------------------------
   Tu h1 son 30px de IBM Plex Mono en negrita. Iba bien en los 757px que
   ocupaba antes: dos líneas. En 369px son cinco y 225px de alto, más que
   la tarjeta de precio entera.

   Con 23px baja a 124px y el título deja de tapar al producto. La fuente y
   el peso no se tocan: sigue siendo tu tipografía.

   Si lo prefieres grande, borra esta regla; lo demás no depende de ella. */
@media (min-width: 1100px){
  html body.single-product #main .product.ts-tiene-lateral .entry-summary > h1.product_title{
    font-size: 23px;
    line-height: 1.35;
  }
}


/* ---------------------------------------------------------------------------
   4. La tarjeta de compra
   --------------------------------------------------------------------------- */
.ts-compra{
  display: flex;
  flex-direction: column;
  gap: 14px;

  padding: 20px;
  background: #FFFFFF;
  border: 1px solid var(--ts-linea, #E4E4E4);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.ts-compra__precios{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ts-compra__linea{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.ts-compra__concepto{
  font-size: 12.5px;
  line-height: 1.3;
  color: #6B7075;
}

.ts-compra__cifra{
  font-variant-numeric: tabular-nums;
  color: var(--ts-tinta, #1A1A1A);
}

/* El precio de referencia: el que paga la mayoría. */
.ts-compra__linea--efectivo .ts-compra__cifra{
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* El de tarjeta, presente pero sin competir con el anterior. */
.ts-compra__linea--tarjeta .ts-compra__cifra{
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: #4A5157;
}

/* WooCommerce envuelve la cifra en spans propios: que hereden el tamaño. */
.ts-compra__cifra .woocommerce-Price-amount,
.ts-compra__cifra bdi{
  color: inherit;
  font: inherit;
}
.ts-compra__cifra .woocommerce-Price-currencySymbol{
  font-size: .68em;
  font-weight: 600;
  margin-right: .12em;
  vertical-align: .06em;
}

/* El precio de antes y cuánto se rebaja.
   ------------------------------------------------------------------------
   Solo salen cuando el producto está de oferta; el PHP no imprime nada en
   los demás. La cifra tachada va ENCIMA de la buena, no al lado: leído de
   arriba abajo cuenta la historia en el orden correcto —esto valía, esto
   vale ahora—.

   El gris es #6B7075 y no uno más claro a propósito: sobre blanco da 5.06:1
   y se lee. El #8A929A que usa el resto de letra pequeña se queda en 3.11:1,
   y este número es el que el cliente compara. */
.ts-compra__antes{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
}

.ts-compra__antes del{
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: #6B7075;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-variant-numeric: tabular-nums;
}
.ts-compra__antes del .woocommerce-Price-amount,
.ts-compra__antes del bdi{
  color: inherit;
  font: inherit;
}

/* Rojo #C1121F con texto blanco: 6.27:1, cumple AA de sobra. */
.ts-compra__dto{
  padding: 3px 8px;
  border-radius: 999px;
  background: #C1121F;
  color: #FFFFFF;

  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  white-space: nowrap;
}

.ts-compra__ahorro{
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #1B6B34;
}
.ts-compra__ahorro .woocommerce-Price-amount,
.ts-compra__ahorro bdi{
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.ts-compra__igv{
  margin: 0;
  font-size: 11.5px;
  line-height: 1.3;
  color: #8A929A;
}

/* Disponibilidad. En tu catálogo casi todo está "Disponible para reserva",
   así que esta línea es la que explica por qué se compra por WhatsApp. */
.ts-compra .stock{
  margin: 0;
  padding: 9px 12px;
  border-radius: 8px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.ts-compra .stock.available-on-backorder{
  background: #FFF6E6;
  color: var(--ts-naranja-texto, #A15600);
}
.ts-compra .stock.in-stock{
  background: #EAF7EE;
  color: #1B6B34;
}
.ts-compra .stock.out-of-stock{
  background: #F5F5F7;
  color: #6B7075;
}

/* El botón de WhatsApp ya viene con su alto y su color del bloque anterior.
   Aquí solo se le quita el margen suelto: el hueco lo pone el gap de la
   tarjeta y así queda igual de separado que todo lo demás. */
.ts-compra .ts-wa,
.ts-compra .ct-product-add-to-cart + .ts-wa{
  margin-top: 0;
}

/* Contenedores de relleno: cuando están vacíos no deben ocupar ni sumar gap. */
.ts-compra__cesta:empty,
.ts-compra__nota:empty{
  display: none;
}

.ts-compra__cesta > .ct-product-add-to-cart{
  margin: 0;
}

/* Tu aviso de "Atención de consultas al WhatsApp", traído desde la columna
   del medio. Sigue saliendo del personalizador de Blocksy: si cambias ahí el
   texto o el número, cambia aquí. */
.ts-compra__nota{
  padding-top: 12px;
  border-top: 1px solid var(--ts-linea, #E4E4E4);
}
.ts-compra__nota .ct-product-additional-info{
  margin: 0;
}
.ts-compra__nota .ct-module-title{
  font-size: 12.5px;
  line-height: 1.45;
  color: #6B7075;
}
.ts-compra__nota ul:empty{
  display: none;
}


/* ---------------------------------------------------------------------------
   5. Medios de pago
   ----------------------------------------------------------------------------
   Los iconos son los que ya tenías; solo cambian de sitio y se les pone
   cabecera, como en la referencia.
   --------------------------------------------------------------------------- */
.ts-pago[hidden]{
  display: none;
}

.ts-pago{
  background: #FFFFFF;
  border: 1px solid var(--ts-linea, #E4E4E4);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
}

.ts-pago__titulo{
  margin: 0;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--ts-linea, #E4E4E4);

  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ts-tinta, #1A1A1A);
}

.ts-pago__cuerpo{
  padding: 16px 18px 18px;
}

.ts-pago .ct-payment-methods{
  margin: 0;
  padding: 0;
  border: 0;
}

/* El aviso del recargo: era la leyenda del recuadro y ahora es texto normal. */
.ts-pago .ct-payment-methods legend{
  display: block;
  float: none;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;

  font-size: 12.5px;
  line-height: 1.45;
  color: #6B7075;
}

/* Blocksy centra la leyenda y los iconos porque en la columna del medio
   ocupaban 757px de ancho. Dentro de una tarjeta de 365 se leen mejor
   alineados a la izquierda, como el resto del contenido. */
.ts-pago .ct-payment-methods{
  justify-content: flex-start;
}
.ts-pago .ct-payment-methods legend{
  text-align: left;
}

.ts-pago .ct-icon-container{
  margin: 0;
}


/* ---------------------------------------------------------------------------
   6. Encajar las recomendaciones dentro de la columna
   ----------------------------------------------------------------------------
   En los bloques 2 y 3 la tarjeta de recomendados era hija directa de la
   ficha y llevaba su propio hueco superior. Ahora va dentro de la columna,
   donde el hueco lo pone el gap de la pila. Ese padding sobraría.
   --------------------------------------------------------------------------- */
html body #main .ts-lateral .ts-reco{
  padding-top: 0;
}

/* Si un producto recomendado está de oferta, WooCommerce ya manda el precio
   de antes dentro de un <del>. En el bloque 2 se pintaba en #8A929A, que
   sobre blanco da 3.11:1 y a 12px no se lee bien. Mismo gris que arriba. */
html body #main .ts-lateral .ts-reco__precio del{
  color: #6B7075;
}


/* ---------------------------------------------------------------------------
   7. Tablet y móvil
   ----------------------------------------------------------------------------
   Por debajo de 1100px no hay tres columnas: la ficha se apila en el orden
   del documento, que el PHP ya dejó bien puesto —producto, tarjeta de
   compra, medios de pago, recomendados, especificaciones—.

   La tarjeta de compra deja de ser tarjeta: a lo ancho de la pantalla, un
   recuadro con borde alrededor del precio no aporta nada y roba 40px.
   --------------------------------------------------------------------------- */
@media (max-width: 1099px){

  .ts-lateral__pila{
    display: flex;
    flex-direction: column;
    gap: var(--ts-3, 24px);
  }

  .ts-compra{
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Precio y botón, uno al lado del otro mientras haya sitio. */
  .ts-compra__precios{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 28px;
  }
  .ts-compra__igv{
    flex-basis: 100%;
  }

  /* Con oferta son tres cifras y la línea de ahorro. En fila se descolocan:
     medido a 375px, "Ahorras" acababa flotando al lado del precio grande y
     el de tarjeta caía a otro renglón. Apiladas se leen en orden. */
  .ts-compra--oferta .ts-compra__precios{
    flex-direction: column;
    align-items: stretch;   /* si no, el flex-end de arriba las alinea a la derecha */
    gap: 10px;
  }
}

@media (max-width: 689px){
  .ts-compra__linea--efectivo .ts-compra__cifra{
    font-size: 26px;
  }
  .ts-compra__linea--tarjeta .ts-compra__cifra{
    font-size: 17px;
  }
}

/* ============================================================================
   TOPSTORE.PE · CABECERA CENTRADA, BARRA NARANJA, BUSCADOR EN VIVO, CARRITO,
   PIE CLARO, OFERTAS, CARRUSELES Y LA FILA DEL CARRITO  ·  v4.1
   ----------------------------------------------------------------------------
   SUSTITUYE al bloque anterior de cabecera y pie (el último de topstore.css).
   Bórralo entero —desde su comentario hasta el final del archivo— y pega este.

   VA JUNTO CON cabecera-pie-v2.php (v3). Sin el PHP, las partes 1, 2, 5, 6 y
   7 funcionan igual; el buscador, los textos de cuenta/carrito y las columnas
   nuevas del pie los pone el PHP.

   COLORES
     Los de la marca: naranja #FF9E00 (botones, barra del menú, franja
     legal), negro #1A1A1A (texto, botón "Finalizar compra") y blanco. El
     naranja oscuro #A15600 es el mismo naranja para TEXTO sobre blanco: el
     claro no se lee (contraste 1.9:1); el oscuro sí (6.4:1).
   ============================================================================ */

:root{
  --ts-nav-alto: 46px;
  --ts-naranja: #FF9E00;
  --ts-naranja-hover: #E88E00;
  --ts-naranja-texto: #A15600;
  --ts-naranja-suave: #FFF6E6;
  --ts-tinta: #1A1A1A;
  --ts-gris: #6B7075;
  --ts-linea: #E4E4E4;
  --ts-pie-fondo: #F4F5F7;
}


/* ---------------------------------------------------------------------------
   1. La fila del carrito: cantidad y "Añadir al carrito" en la MISMA línea
   --------------------------------------------------------------------------- */
.ts-compra .ct-cart-actions{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
.ts-compra .quantity{
  flex: 0 0 100px;
  width: 100px;
  max-width: 100px;
  height: 46px;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}
.ts-compra .quantity input.qty{
  width: 100%;
  height: 46px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
}
.ts-compra .single_add_to_cart_button{
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}
.ts-compra .ct-cart-actions .ts-wa,
.ts-compra .ts-wa{
  flex: 1 0 100%;
  margin: 0;
  min-height: 46px;
  border-radius: 8px;
}
.ts-compra .added_to_cart{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 100%;
  min-height: 46px;
  padding: 5px 20px;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--ts-naranja);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  color: var(--ts-tinta);
  transition: background .15s ease;
}
.ts-compra .added_to_cart:hover,
.ts-compra .added_to_cart:focus-visible{
  background: var(--ts-naranja-suave);
  color: var(--ts-tinta);
  text-decoration: none;
}
@media (max-width: 1240px) and (min-width: 1100px){
  .ts-compra .single_add_to_cart_button{ font-size: 14px; padding: 0 10px; }
}


/* ---------------------------------------------------------------------------
   2. La cabecera de escritorio, centrada
   ----------------------------------------------------------------------------
   ┌──────────────────────────────────────────────────────────────┐
   │      logo    [ buscar productos, código, marcas… 🔍 ]  👤 🛒  │  fila 1
   ├──────────────────────────────────────────────────────────────┤
   │        INICIO · LAPTOPS · MONITORES · … · CONTACTO           │  fila 2
   └──────────────────────────────────────────────────────────────┘

   Rejilla de tres columnas centrada (justify-content: center): el grupo
   logo + buscador + iconos queda en el centro de la pantalla, y el buscador
   crece hasta 720px. Los hijos se nombran por su data-column, así que da
   igual si el guion llega a insertar el buscador o no.
   --------------------------------------------------------------------------- */
html body #header{
  position: relative;
  z-index: 100;        /* el buscador en vivo y el carrito, encima del contenido */
}
html body #header [data-row="top"]{
  position: relative;
}

/* La cabecera va fija (así la tienes configurada en Blocksy) y el tema reserva
   su sitio con un contenedor de 60px, el alto del personalizador. La nuestra
   mide 88 + 46 = 134px: sin esto, el banner quedaba tapado 74px. El guion
   del PHP la mide y la corrige; esta regla es la red de seguridad. */
html body #header [data-device="desktop"] .ct-sticky-container{
  min-height: calc(88px + var(--ts-nav-alto));
}

/* La barra del menú, a todo lo ancho, en el mismo tono claro que el pie. */
html body #header [data-row="top"]::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ts-nav-alto);
  background: var(--ts-pie-fondo);
  border-top: 1px solid var(--ts-linea);
  border-bottom: 1px solid var(--ts-linea);
  box-sizing: border-box;
  z-index: 0;
}

html body #header [data-row="top"] > .ct-container{
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: auto minmax(280px, 720px) auto;
  grid-template-rows: auto var(--ts-nav-alto);
  justify-content: center;
  align-items: center;
  column-gap: 44px;
  padding-bottom: 0;
}

html body #header [data-row="top"] > .ct-container > [data-column="start"]{
  grid-column: 1;
  grid-row: 1;
}
html body #header [data-row="top"] > .ct-container > .ts-buscar,
html body #header [data-row="top"] > .ct-container > [data-id="searchform"]{
  grid-column: 2;
  grid-row: 1;
  justify-self: stretch;
  width: 100%;
}
html body #header [data-row="top"] > .ct-container > [data-column="end"]{
  grid-column: 3;
  grid-row: 1;
}
html body #header [data-row="top"] > .ct-container > [data-column="middle"]{
  grid-column: 1 / -1;
  grid-row: 2;
  height: var(--ts-nav-alto);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Aire arriba y abajo de la fila blanca. */
html body #header [data-row="top"] > .ct-container > [data-column="start"],
html body #header [data-row="top"] > .ct-container > [data-column="end"]{
  padding-block: 14px;
}

/* El enlace del logo trae padding: 20px 0 (regla tuya con !important). Con
   el menú en otra fila esos 40px sobran. */
html body #header [data-row="top"] .site-logo-container{
  padding-block: 0 !important;
}
html body #header [data-row="top"] > .ct-container > [data-column="start"] > div,
html body #header [data-row="top"] > .ct-container > [data-column="start"] .site-branding,
html body #header [data-row="top"] > .ct-container > [data-column="start"] .site-logo-container{
  height: auto;
  min-height: 0;
  align-self: center;
}
html body #header .site-branding{
  flex: 0 0 auto;
  min-width: 0;
}
html body #header .site-logo-container img{
  width: auto;
  max-width: 200px;
  height: auto;
}


/* --- El menú, centrado sobre la barra naranja --- */
html body #header [data-row="top"] > .ct-container > [data-column="middle"] > div{
  justify-content: center;
  width: 100%;
}
html body #header [data-row="top"] .menu-container{
  margin-inline: 0;
}
html body #header [data-row="top"] .menu-container > ul{
  gap: 0;
  justify-content: center;
  flex-wrap: nowrap;          /* nunca a dos líneas: la barra mide 46px */
  width: max-content;
  max-width: none;
  margin-inline: auto;
}
html body #header [data-row="top"] .menu-container{
  overflow: visible;
}
html body #header [data-row="top"] > .ct-container > [data-column="middle"]{
  overflow: visible;
}
/* Tipografía del tema (la misma del resto de la web), mayúsculas suaves.
   La página activa lleva UNA sola línea naranja, a todo el ancho del texto. */
html body #header [data-row="top"] .menu-container .menu-item > a{
  position: relative;
  color: var(--ts-tinta);
  padding: 0 13px;
  height: var(--ts-nav-alto);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .12s ease;
}
/* Entre 1000 y 1180px (portátiles con escala 125%) se aprieta un poco más
   para que las ocho entradas y el botón sigan en una línea. */
@media (max-width: 1180px){
  html body #header [data-row="top"] .menu-container .menu-item > a{
    padding: 0 9px;
    font-size: 12px;
    letter-spacing: .02em;
  }
}
/* Blocksy ya dibuja un subrayado animado (menú "type-2") pero en gris
   oscuro, y encima iba mi línea naranja: dos rayas de dos colores. Se usa
   solo el de Blocksy, pintado de naranja, a 3px y pegado al borde inferior. */
html body #header [data-row="top"] .menu-container{
  --menu-indicator-color: var(--ts-naranja);
  --menu-indicator-active-color: var(--ts-naranja);
  --menu-indicator-hover-color: var(--ts-naranja);
}
html body #header [data-row="top"] .menu-container .menu-item > a::after{
  height: 3px !important;
  bottom: 0 !important;
  border-radius: 2px 2px 0 0;
  background: var(--ts-naranja) !important;
}
html body #header [data-row="top"] .menu-container .menu-item > a:hover,
html body #header [data-row="top"] .menu-container .menu-item > a:focus-visible,
html body #header [data-row="top"] .menu-container .current-menu-item > a,
html body #header [data-row="top"] .menu-container .current-product_cat-ancestor > a{
  color: var(--ts-naranja-texto);
  background: transparent;
  box-shadow: none;
}
html body #header [data-row="top"] .menu-container .menu-item-has-children > a svg{
  width: 11px !important;
  height: 11px !important;
  color: currentColor;
}


/* ---------------------------------------------------------------------------
   2b. El botón OFERTAS del menú (lo añade el PHP al final del menú)
   --------------------------------------------------------------------------- */
html body #header .menu-container .ts-menu-ofertas{
  display: flex;
  align-items: center;
}
html body #header .menu-container .ts-menu-ofertas > a{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: auto !important;
  min-height: 0 !important;
  margin-left: 4px;
  padding: 8px 14px !important;
  border-radius: 999px;
  background: var(--ts-naranja) !important;
  color: var(--ts-tinta) !important;
  font-weight: 800 !important;
  letter-spacing: .05em;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(255,158,0,.35);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
html body #header .menu-container .ts-menu-ofertas > a::after,
html body #header .menu-container .ts-menu-ofertas > a::before{ display: none !important; }
html body #header .menu-container .ts-menu-ofertas > a svg{
  width: 15px !important;
  height: 15px !important;
  flex: none;
  color: currentColor;
}
html body #header .menu-container .ts-menu-ofertas > a:hover,
html body #header .menu-container .ts-menu-ofertas > a:focus-visible,
html body #header .menu-container .ts-menu-ofertas.current-menu-item > a{
  background: var(--ts-naranja-fuerte, #FF7A1A) !important;
  color: var(--ts-tinta) !important;
  box-shadow: 0 4px 12px rgba(255,122,26,.35);
  transform: translateY(-1px);
}
/* En el menú móvil (panel lateral oscuro): pastilla igual, sin desbordar. */
html body #offcanvas .ts-menu-ofertas > a{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  margin-top: 8px;
  padding: 10px 18px !important;
  border-radius: 999px;
  background: var(--ts-naranja) !important;
  color: var(--ts-tinta) !important;
  font-weight: 800 !important;
  letter-spacing: .05em;
}
html body #offcanvas .ts-menu-ofertas > a svg{ width: 16px; height: 16px; flex: none; }

/* La página /ofertas/: la línea bajo el título y el aviso de "sin ofertas". */
html body.ts-ofertas .ts-ofertas__intro{
  margin: -6px 0 18px;
  color: var(--ts-gris-logo, #8A8A8A);
  font-size: 14px;
}
html body.ts-ofertas .ts-ofertas__vacio{
  padding: 40px 20px;
  border: 1px dashed var(--ts-linea);
  border-radius: 14px;
  text-align: center;
}
html body.ts-ofertas .ts-ofertas__vacio p{ margin: 0 0 14px; }


/* ---------------------------------------------------------------------------
   3. El buscador y sus resultados en vivo
   ----------------------------------------------------------------------------
   El formulario ya no lleva overflow:hidden (recortaría la lista de
   resultados): el redondeo va en cada extremo.
   --------------------------------------------------------------------------- */
.ts-buscar{
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 46px;
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #D5D9DE;
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ts-buscar:focus-within{
  border-color: var(--ts-naranja);
  box-shadow: 0 0 0 3px rgba(255,158,0,.18);
}
.ts-buscar__campo{
  flex: 1 1 auto;
  min-width: 0;
  height: 100% !important;
  padding: 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px 0 0 10px;
  box-shadow: none !important;
  outline: 0;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ts-tinta);
}
.ts-buscar__campo::placeholder{ color: #8A929A; }
.ts-buscar__campo::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; }
/* El botón de la lupa. Tu hoja tiene reglas generales para todos los botones
   (escala, brillo y sombra al pasar el ratón): aquí se anulan a propósito,
   porque dentro del campo desmontaban la barra. Va pegado al borde derecho
   con altura fija en vez de márgenes negativos: así no asoma ningún píxel. */
.ts-buscar__boton,
.ts-buscar__boton:hover,
.ts-buscar__boton:focus,
.ts-buscar__boton:active{
  position: absolute !important;
  top: -1px !important;
  right: -1px !important;
  bottom: -1px !important;
  width: 54px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  background: var(--ts-naranja) !important;
  color: var(--ts-tinta) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  cursor: pointer;
  transition: background .15s ease !important;
}
.ts-buscar__boton:hover,
.ts-buscar__boton:focus-visible{ background: var(--ts-naranja-hover) !important; }
.ts-buscar__campo{ padding-right: 66px !important; }
.ts-buscar__boton svg{ width: 20px; height: 20px; }

/* Mientras busca, la lupa late un poco. */
.ts-buscar.is-buscando .ts-buscar__boton svg{ animation: ts-late .8s ease-in-out infinite; }
@keyframes ts-late{ 50%{ transform: scale(.82); opacity: .6; } }

/* La lupa de Blocksy sobra cuando el campo está a la vista. */
html body #header [data-row] > .ct-container:has(> .ts-buscar) .ct-header-search{
  display: none !important;
}

/* La lista de resultados */
.ts-buscar__sug{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid var(--ts-linea);
  border-radius: 12px;
  box-shadow: 0 22px 50px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.06);
  text-align: left;
  animation: ts-mega-entra .14s ease-out;
}
.ts-buscar__sug[hidden]{ display: none !important; }
@keyframes ts-mega-entra{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }

.ts-sug__lista{
  list-style: none !important;
  margin: 0 !important;
  padding: 6px !important;
}
.ts-sug__lista li{ margin: 0 !important; padding: 0 !important; }
.ts-sug__item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--ts-tinta);
  text-decoration: none;
  transition: background .12s ease;
}
.ts-sug__item:hover,
.ts-sug__item.is-activo{
  background: var(--ts-naranja-suave);
  color: var(--ts-tinta);
  text-decoration: none;
}
.ts-sug__item img,
.ts-sug__sinfoto{
  flex: none;
  width: 52px;
  height: 52px;
  object-fit: contain;
  border: 1px solid var(--ts-linea);
  border-radius: 8px;
  background: #FFFFFF;
}
.ts-sug__datos{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ts-sug__nombre{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ts-sug__meta{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ts-gris);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-sug__precio{
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ts-sug__precio b{ font-size: 15px; font-weight: 700; color: var(--ts-tinta); }
.ts-sug__precio s{ font-size: 12px; color: var(--ts-gris); }

.ts-sug__todos{
  display: block;
  width: 100%;
  padding: 12px 16px !important;
  border: 0 !important;
  border-top: 1px solid var(--ts-linea) !important;
  border-radius: 0 0 12px 12px;
  background: #FAFAFB !important;
  color: var(--ts-naranja-texto) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  box-shadow: none !important;
}
.ts-sug__todos:hover{ background: var(--ts-naranja-suave) !important; }
.ts-sug__vacio{
  margin: 0 !important;
  padding: 18px 16px !important;
  font-size: 14px;
  color: var(--ts-gris);
}


/* --- Cuenta en dos líneas y carrito con nombre --- */
html body #header .ct-account-item,
html body #header .ct-cart-item{
  display: flex;
  align-items: center;
  gap: 10px;
}
.ts-cuenta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
  white-space: nowrap;
}
.ts-cuenta small{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ts-gris);
}
.ts-cuenta strong{
  font-size: 14px;
  font-weight: 700;
  color: var(--ts-tinta);
}
.ts-icono__texto{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ts-tinta);
}
html body #header [data-column="end"] [data-items]{
  gap: 24px !important;
  padding-left: 0 !important;
}
@media (max-width: 1199px){
  .ts-cuenta, .ts-icono__texto{ display: none; }
  html body #header [data-row="top"] > .ct-container{ column-gap: 22px; }
}


/* ---------------------------------------------------------------------------
   4. El desplegable del carrito, a juego con la página
   ----------------------------------------------------------------------------
   Venía con el fondo oscuro del desplegable del menú. Ahora: tarjeta blanca
   con borde y sombra, texto negro, "Ver carrito" naranja y "Finalizar
   compra" negro, igual que los botones de la ficha.
   --------------------------------------------------------------------------- */
/* Marcado real de Blocksy en cada línea del carrito:
     <li class="woocommerce-mini-cart-item">
       <a class="remove">🗑</a>
       <a class="ct-media-container"><img></a>
       <div class="product-data"><a class="product-title">…</a><span class="quantity">3 × S/ …</span></div>
     </li>
   Blocksy la pinta como rejilla de "20% 1fr", que a 310px deja el título en
   una columna de 50px partido letra a letra. Aquí: foto 64px | datos | quitar. */
html body #header .ct-cart-content{
  --mini-cart-background-color: #FFFFFF;
  --mini-cart-divider-color: var(--ts-linea);
  --mini-cart-items-spacing: 12px;
  --theme-text-color: var(--ts-tinta);
  --theme-link-initial-color: var(--ts-tinta);
  --theme-link-hover-color: var(--ts-naranja-texto);
  --theme-heading-color: var(--ts-tinta);

  width: 360px;
  padding: 18px 18px 16px;
  background: #FFFFFF !important;
  color: var(--ts-tinta) !important;
  border: 1px solid var(--ts-linea);
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.06);
}
html body .ct-cart-content .woocommerce-mini-cart{
  max-height: 46vh;
  margin: 0 -18px !important;
  padding: 0 18px !important;
  list-style: none !important;
}
html body .ct-cart-content .woocommerce-mini-cart-item{
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) 30px !important;
  grid-column-gap: 12px !important;
  align-items: center;
  margin: 0 !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--ts-linea) !important;
}
html body .ct-cart-content .woocommerce-mini-cart-item:first-child{ padding-top: 0 !important; }
html body .ct-cart-content .woocommerce-mini-cart-item:last-child{ border-bottom: 0 !important; }

html body .ct-cart-content .woocommerce-mini-cart-item .ct-media-container{
  grid-column: 1;
  grid-row: 1;
  width: 64px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ts-linea);
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
}
html body .ct-cart-content .woocommerce-mini-cart-item .ct-media-container img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
html body .ct-cart-content .woocommerce-mini-cart-item .product-data{
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
}
html body .ct-cart-content .woocommerce-mini-cart-item .product-title{
  color: var(--ts-tinta) !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
html body .ct-cart-content .woocommerce-mini-cart-item .product-title:hover{ color: var(--ts-naranja-texto) !important; }
html body .ct-cart-content .woocommerce-mini-cart-item .quantity{
  font-size: 13px;
  color: var(--ts-gris);
  font-variant-numeric: tabular-nums;
}
html body .ct-cart-content .woocommerce-mini-cart-item .remove{
  grid-column: 3;
  grid-row: 1;
  position: static !important;
  width: 30px;
  height: 30px;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ts-gris) !important;
  background: #F3F4F6 !important;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
html body .ct-cart-content .woocommerce-mini-cart-item .remove svg{ width: 12px; height: 12px; fill: currentColor; }
html body .ct-cart-content .woocommerce-mini-cart-item .remove:hover{ background: #FDE8E8 !important; color: #B42318 !important; }

html body .ct-cart-content .woocommerce-mini-cart__total{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--ts-tinta) !important;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html body .ct-cart-content .woocommerce-mini-cart__total strong{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ts-gris);
}
html body .ct-cart-content .woocommerce-mini-cart__buttons{
  display: flex;
  gap: 10px;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}
html body .ct-cart-content .woocommerce-mini-cart__buttons .button{
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 8px;
  background: var(--ts-naranja) !important;
  color: var(--ts-tinta) !important;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background .15s ease;
}
html body .ct-cart-content .woocommerce-mini-cart__buttons .button:hover{ background: var(--ts-naranja-hover) !important; }
html body .ct-cart-content .woocommerce-mini-cart__buttons .button.checkout{
  background: var(--ts-tinta) !important;
  color: #FFFFFF !important;
}
html body .ct-cart-content .woocommerce-mini-cart__buttons .button.checkout:hover{ background: #000000 !important; }
html body .ct-cart-content .woocommerce-mini-cart__empty-message{
  margin: 0 !important;
  padding: 6px 0;
  color: var(--ts-gris);
  font-size: 14px;
}


/* --- La cabecera del móvil (Blocksy usa otra fila por debajo de 1000px) --- */
html body #header [data-row="middle"] > .ct-container{
  flex-wrap: wrap;
  align-items: center;
  row-gap: 10px;
  padding-bottom: 12px;
}
html body #header [data-row="middle"] > .ct-container > .ts-buscar{
  order: 99;
  flex: 1 0 100%;
  max-width: none;
  height: 42px;
}
@media (max-width: 999px){
  html body #header [data-row="top"] > .ct-container{
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: space-between;
    column-gap: 16px;
    row-gap: 10px;
  }
  html body #header [data-row="top"] > .ct-container > [data-column="start"]{ grid-column: 1; grid-row: 1; }
  html body #header [data-row="top"] > .ct-container > [data-column="end"]{ grid-column: 2; grid-row: 1; justify-content: flex-end; }
  html body #header [data-row="top"] > .ct-container > .ts-buscar{ grid-column: 1 / -1; grid-row: 2; max-width: none; }
  html body #header [data-row="top"]::after{ display: none; }
  html body #header [data-row="top"] > .ct-container > [data-column="middle"]{ height: auto; }
  .ts-buscar__sug{ max-height: min(60vh, 480px); }
}


/* ---------------------------------------------------------------------------
   5. El pie: franja de confianza + cuatro columnas, en claro
   ----------------------------------------------------------------------------
       ┌──────────────┬────────────┬────────────┬──────────────┐
       │ Nosotros     │ Categorías │ Ayuda      │ Contáctanos  │
       │ redes        │            │            │ Servicio     │
       └──────────────┴────────────┴────────────┴──────────────┘
   --------------------------------------------------------------------------- */
html body #footer{
  background: var(--ts-pie-fondo);
  color: #3A4148;
}

/* Blocksy escondía TODA la fila de columnas en el móvil (ct-hidden-sm). */
html body #footer [data-row="top"].ct-hidden-sm{ display: block !important; }
html body #footer [data-row="top"]{ background: transparent; padding: 0; }

/* --- La franja de confianza --- */
/* Blocksy convierte en rejilla de 5 columnas a TODOS los hijos directos de
   la fila del pie; esta franja tiene que ser un bloque normal. */
html body #footer [data-row="top"] > .ts-confianza-pie{
  display: block !important;
  grid-template-columns: none !important;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  background: #FFFFFF;
  border-top: 1px solid var(--ts-linea);
  border-bottom: 1px solid var(--ts-linea);
  color: var(--ts-tinta);
}
.ts-confianza-pie__int{
  width: 100%;
  max-width: var(--ts-ancho, 1300px);
  margin: 0 auto;
  padding: 0 var(--ts-lado, 24px);
  box-sizing: border-box;
}
.ts-confianza-pie__lista{
  list-style: none !important;
  margin: 0 !important;
  padding: 22px 0 !important;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 28px;
}
.ts-confianza-pie__lista li{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
}
.ts-confianza-pie__icono{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--ts-naranja);
  color: var(--ts-tinta);
}
.ts-confianza-pie__icono svg{ width: 24px; height: 24px; }
.ts-confianza-pie__texto{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-confianza-pie__texto strong{ font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--ts-tinta); }
.ts-confianza-pie__texto small{ font-size: 12.5px; line-height: 1.35; color: var(--ts-gris); }


/* --- Las columnas --- */
html body #footer [data-row="top"] > .ct-container{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr 1.35fr !important;
  grid-template-areas:
    "nosotros categorias ayuda contacto"
    "redes    categorias ayuda servicio";
  gap: 22px 44px !important;
  align-items: start;
  padding-top: 48px !important;
  padding-bottom: 44px !important;
}
html body #footer [data-column="widget-area-1"]{ grid-area: nosotros; }
html body #footer [data-column="socials"]{       grid-area: redes; align-self: start; }
html body #footer [data-column="ts-categorias"]{ grid-area: categorias; }
html body #footer [data-column="ts-ayuda"]{      grid-area: ayuda; }
html body #footer [data-column="widget-area-4"]{ grid-area: contacto; }
html body #footer [data-column="widget-area-2"]{ grid-area: servicio; }

/* "Nuestros Pilares", fuera. Borra esta regla si la quieres de vuelta. */
html body #footer [data-column="widget-area-3"]{ display: none; }

html body #footer [data-row="top"] > .ct-container > div,
html body #footer [data-row="top"] > .ct-container > div > .ct-widget{
  width: auto;
  max-width: none;
  margin: 0;
}

/* Titulares: uno solo para todas las columnas, como los del filtro. */
html body #footer [data-row="top"] h2,
html body #footer [data-row="top"] h3,
html body #footer [data-row="top"] h4,
html body #footer [data-row="top"] h5,
html body #footer [data-row="top"] h6,
html body #footer .stk-block-heading__text,
.ts-pie__titulo{
  margin: 0 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--ts-naranja);
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  text-align: left !important;
  color: var(--ts-naranja-texto) !important;
}
html body #footer .stk-block-heading{ margin-bottom: 0 !important; }

html body #footer [data-row="top"] p{
  margin: 0 0 8px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  text-align: left !important;
  color: #3A4148 !important;
}
html body #footer [data-row="top"] p:last-child{ margin-bottom: 0 !important; }
html body #footer [data-row="top"] p:empty,
html body #footer [data-row="top"] p:has(> br:only-child),
html body #footer [data-row="top"] p:has(> br:first-child + br:last-child){ display: none; }

html body #footer [data-row="top"] a{
  color: var(--ts-tinta);
  text-decoration: none;
  transition: color .12s ease;
}
html body #footer [data-row="top"] a:hover,
html body #footer [data-row="top"] a:focus-visible{
  color: var(--ts-naranja-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ts-pie__lista{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ts-pie__lista li{ margin: 0 !important; padding: 0 !important; font-size: 14px; line-height: 1.4; }
.ts-pie__wa{ display: inline-flex; align-items: center; gap: 8px; }
.ts-pie__wa::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .25);
}
.ts-pie__libro{ font-weight: 600; }

html body #footer [data-row="top"] .wp-block-group.is-vertical{ gap: 6px !important; }

/* --- Redes, en fila, bajo "Acerca de nosotros" --- */
html body #footer .ct-social-box{
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
html body #footer .ct-social-box > a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--ts-linea);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--ts-tinta);
  --official-color: var(--ts-tinta) !important;
  --theme-icon-color: var(--ts-tinta) !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
html body #footer .ct-social-box > a:hover,
html body #footer .ct-social-box > a:focus-visible{
  background: var(--ts-naranja);
  border-color: var(--ts-naranja);
  transform: translateY(-2px);
}
html body #footer .ct-social-box > a svg{ width: 20px; height: 20px; }
html body #footer .ct-social-box > a .ct-label{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- La franja legal, naranja --- */
html body #footer [data-row="bottom"]{ background: var(--ts-naranja); }
html body #footer [data-row="bottom"] > .ct-container{
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  border-top: 0;
}
html body #footer [data-column="copyright"]{ width: 100%; max-width: none; }
.ts-legal{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
}
.ts-legal__firma{
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.5;
  color: var(--ts-tinta) !important;
}
.ts-legal__enlaces{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.ts-legal__enlaces a{
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ts-tinta);
  text-decoration: none;
}
.ts-legal__enlaces a:hover,
.ts-legal__enlaces a:focus-visible{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ts-legal__libro{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1.5px solid var(--ts-tinta);
  border-radius: 8px;
}
.ts-legal__libro svg{ width: 16px; height: 16px; flex: none; }
.ts-legal__libro:hover,
.ts-legal__libro:focus-visible{ background: rgba(255,255,255,.35); text-decoration: none; }

/* --- Pie en tablet y móvil --- */
@media (max-width: 999px){
  .ts-confianza-pie__lista{ grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 0 !important; }
  html body #footer [data-row="top"] > .ct-container{
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "nosotros nosotros"
      "redes    redes"
      "categorias ayuda"
      "contacto servicio";
    gap: 30px 28px !important;
    padding-top: 40px !important;
    padding-bottom: 36px !important;
  }
}
@media (max-width: 689px){
  .ts-confianza-pie__lista{ grid-template-columns: 1fr; gap: 14px; }
  html body #footer [data-row="top"] > .ct-container{
    grid-template-columns: 1fr !important;
    grid-template-areas: "nosotros" "redes" "categorias" "ayuda" "contacto" "servicio";
    gap: 26px !important;
  }
  html body #footer [data-row="top"] p{ font-size: 13.5px !important; }
  .ts-legal{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .ts-legal__enlaces{ gap: 8px 16px; }
}


/* ---------------------------------------------------------------------------
   5b. Portada: sin hueco entre la barra del menú y el banner
   ----------------------------------------------------------------------------
   Blocksy da 40px de relleno superior al contenedor de la portada. Con el
   banner a todo lo ancho justo debajo de la barra, ese relleno era una franja
   blanca. Solo en la portada y solo para el primer contenedor.
   --------------------------------------------------------------------------- */
html body.home #main > .ct-container-full:first-child,
html body.home #main > .ct-container:first-child{
  padding-top: 0 !important;
}


/* ---------------------------------------------------------------------------
   5c. El modal de acceso (Iniciar sesión / Registrarse)
   ----------------------------------------------------------------------------
   Tarjeta blanca con el logo y un saludo, pestañas como selector, campos
   altos con foco naranja, la pregunta antihumanos (Jetpack) dentro de una
   caja limpia, y el botón naranja de la marca.
   --------------------------------------------------------------------------- */
html body #account-modal .ct-account-modal{
  width: min(460px, 94vw);
  padding: 30px 34px 26px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  color: var(--ts-tinta);
}
html body #account-modal .ct-panel-actions .ct-toggle-close{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--ts-tinta);
}

.ts-acceso{ text-align: center; margin: 0 0 20px; }
.ts-acceso__logo{
  display: block;
  width: auto;
  height: 46px;
  margin: 0 auto 14px;
}
/* Un formulario a la vez (la hoja del modal de Blocksy llega tarde, por AJAX). */
html body #account-modal .ct-account-forms > div:not(.active){ display: none; }

.ts-acceso__titulo{
  margin: 0 0 4px !important;
  font-family: inherit !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--ts-tinta) !important;
}
.ts-acceso__texto{
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.5;
  color: var(--ts-gris) !important;
}

/* Pestañas Acceder / Registrarse */
html body #account-modal .ct-account-modal > ul{
  display: flex;
  gap: 4px;
  margin: 0 0 20px !important;
  padding: 4px !important;
  list-style: none !important;
  background: #F3F4F6;
  border-radius: 10px;
  border: 0;
}
html body #account-modal .ct-account-modal > ul > li{
  flex: 1 1 0;
  margin: 0 !important;
  padding: 10px 8px !important;
  border: 0 !important;
  border-radius: 8px;
  text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ts-gris);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
html body #account-modal .ct-account-modal > ul > li:hover{ color: var(--ts-tinta); }
html body #account-modal .ct-account-modal > ul > li.active{
  background: #FFFFFF;
  color: var(--ts-tinta);
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}

/* Campos */
html body #account-modal .ct-account-forms p{ margin: 0 0 14px !important; }
html body #account-modal .ct-account-forms label{
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ts-tinta);
}
html body #account-modal .ct-account-forms input.input,
html body #account-modal .ct-account-forms input[type="text"],
html body #account-modal .ct-account-forms input[type="email"],
html body #account-modal .ct-account-forms input[type="password"]{
  width: 100%;
  height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid #D5D9DE !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: var(--ts-tinta) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html body #account-modal .ct-account-forms input:focus{
  border-color: var(--ts-naranja) !important;
  box-shadow: 0 0 0 3px rgba(255,158,0,.2) !important;
  outline: 0;
}
html body #account-modal .account-password-input{ display: block; position: relative; }
html body #account-modal .account-password-input .show-password-input{ top: 50%; transform: translateY(-50%); right: 12px; }

/* La pregunta antihumanos de Jetpack venía con estilos sueltos en línea. */
html body #account-modal #loginform > div[style]{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 16px !important;
  padding: 12px 14px;
  background: #FAFAFB;
  border: 1px solid var(--ts-linea);
  border-radius: 8px;
}
html body #account-modal #loginform > div[style] > p{
  flex: 1 0 100%;
  margin: 0 !important;
  font-size: 12.5px !important;
  color: var(--ts-gris);
}
html body #account-modal #loginform > div[style] > br{ display: none; }
html body #account-modal label[for="jetpack_protect_answer"]{
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  vertical-align: middle !important;
}
html body #account-modal #jetpack_protect_answer{
  width: 70px !important;
  height: 40px !important;
  padding: 0 8px !important;
  font-size: 15px !important;
  text-align: center;
}

/* Recordarme / olvidé la contraseña */
html body #account-modal .login-remember{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
html body #account-modal .login-remember span{ display: inline-flex; align-items: center; gap: 8px; }
html body #account-modal .login-remember label{ margin: 0; font-weight: 500; }
html body #account-modal .ct-forgot-password{
  color: var(--ts-naranja-texto);
  font-weight: 600;
  text-decoration: none;
}
html body #account-modal .ct-forgot-password:hover{ text-decoration: underline; }

/* Botones */
html body #account-modal .ct-account-modal .ct-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin: 4px 0 0;
  border: 0 !important;
  border-radius: 8px;
  background: var(--ts-naranja) !important;
  color: var(--ts-tinta) !important;
  font-size: 14.5px;
  font-weight: 700;
  transition: background .15s ease;
}
html body #account-modal .ct-account-modal .ct-button:hover{ background: var(--ts-naranja-hover) !important; }
html body #account-modal .ct-account-modal .ct-button svg{ width: 14px; height: 14px; fill: currentColor; }

html body #account-modal .woocommerce-privacy-policy-text p,
html body #account-modal .ct-register-form > form > p:not(:has(input)):not(:has(button)){
  font-size: 12.5px !important;
  line-height: 1.5;
  color: var(--ts-gris);
}
html body #account-modal .woocommerce-privacy-policy-text a{ color: var(--ts-naranja-texto); }

.ts-acceso__nota{
  margin: 18px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--ts-linea);
  text-align: center;
  font-size: 13px !important;
  color: var(--ts-gris) !important;
}
.ts-acceso__nota a{ color: var(--ts-naranja-texto); font-weight: 600; text-decoration: none; }
.ts-acceso__nota a:hover{ text-decoration: underline; }

@media (max-width: 480px){
  html body #account-modal .ct-account-modal{ padding: 24px 20px 20px; }
}


/* ---------------------------------------------------------------------------
   6. (Retirada) El carrusel de categorías de la portada ya no se muestra:
      lo quita el bloque PHP (topstore_quitar_carrusel_categorias).
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   7. La paleta del logo, en toda la página
   ----------------------------------------------------------------------------
   Del logo salen cinco colores y solo esos se usan:
     naranja        #FF9E00  botones, subrayados, acentos
     naranja fuerte #FF7A1A  el mismo botón al pasar el ratón (es el tono del
                             carrito del logo)
     rojo           #EF4A3C  las letras "TS": ofertas y precio rebajado
     gris           #8A8A8A  el ".pe": textos secundarios
     negro          #1A1A1A  texto y precio
   Se retiran de la web los colores que no venían del logo: el guinda
   (#7a003c) de los hover, el amarillo con brillo de los títulos, el rojo
   sangre (#e60023) del precio y el marrón del botón "Ver más".
   --------------------------------------------------------------------------- */
:root{
  --ts-naranja-fuerte: #FF7A1A;
  --ts-rojo: #EF4A3C;
  --ts-gris-logo: #8A8A8A;
}

/* Títulos de sección ("CATEGORÍAS", "NUEVOS PRODUCTOS"): negro, con una
   rayita naranja debajo en vez del resplandor. */
html body .titulo-seccion{
  position: relative;
  color: var(--ts-tinta) !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-shadow: none !important;
  transform: none !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* margin auto: en pantallas más anchas que el contenido (≈1330 px) el
     título es una caja de ancho fijo; con 0 se pegaba a la izquierda. */
  margin: 44px auto 26px !important;
}
html body .titulo-seccion::after{
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ts-naranja), var(--ts-naranja-fuerte));
}
html body .titulo-seccion:hover{
  color: var(--ts-tinta) !important;
  text-shadow: none !important;
  transform: none !important;
}

/* Tarjetas de producto: se levantan 2px, sombra gris suave, sin brillo. */
html body ul.products li.product{
  border: 1px solid var(--ts-linea) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
html body ul.products li.product:hover{
  transform: translateY(-2px) !important;
  border-color: #D5D9DE !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
}
html body ul.products li.product .price{
  color: var(--ts-tinta) !important;
}
html body ul.products li.product .price ins{
  color: var(--ts-rojo) !important;
  text-decoration: none !important;
}
html body ul.products li.product .price del{
  color: var(--ts-gris-logo) !important;
}
/* Nombre y precio centrados en la tarjeta, como el botón. */
html body ul.products li.product{
  --text-horizontal-alignment: center;
  --horizontal-alignment: center;
  text-align: center !important;
}
html body ul.products li.product .woocommerce-loop-product__title,
html body ul.products li.product h2,
html body ul.products li.product .price{
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
html body ul.products li.product .price{
  display: block !important;
}

/* Botones naranja con texto negro; al pasar el ratón, el naranja fuerte del
   carrito. Sin escala, sin brillo, sin sombra. */
html body ul.products li.product .button:not(.checkout),
html body ul.products li.product a.button,
html body .woocommerce a.button:not(.checkout):not(.ts-wa),
html body .single_add_to_cart_button,
html body .categoria-vermas,
html body .ct-cookies-accept-button,
html body .woocommerce-mini-cart__buttons .button:not(.checkout){
  background: var(--ts-naranja) !important;
  color: var(--ts-tinta) !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  font-weight: 700 !important;
  transition: background .15s ease !important;
}
html body ul.products li.product .button:not(.checkout):hover,
html body ul.products li.product a.button:hover,
html body .woocommerce a.button:not(.checkout):not(.ts-wa):hover,
html body .single_add_to_cart_button:hover,
html body .categoria-vermas:hover,
html body .ct-cookies-accept-button:hover,
html body .woocommerce-mini-cart__buttons .button:not(.checkout):hover{
  background: var(--ts-naranja-fuerte) !important;
  color: var(--ts-tinta) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
html body .categoria-vermas{
  min-height: 44px !important;
  padding: 10px 24px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
}

/* Etiquetas de oferta con el rojo del logo. */
html body .onsale,
html body [class*="ct-woo-badge-"]{
  background: var(--ts-rojo) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* Enlaces del contenido: negro, y al pasar el ratón naranja oscuro. */
html body .entry-content a:not(.button):not(.ct-button):not(.ts-wa):hover,
html body ul.products li.product .woocommerce-loop-product__title a:hover{
  color: var(--ts-naranja-texto) !important;
}

/* El icono del carrito y su globo con el número: Blocksy los pinta con el
   color 1 de su paleta (rojo en el personalizador). Icono negro, naranja al
   pasar el ratón, globo naranja con número negro. */
html body #header .ct-cart-item,
html body #header [data-id="cart"] .ct-cart-item{
  --theme-icon-color: var(--ts-tinta) !important;
  --theme-icon-hover-color: var(--ts-naranja-fuerte) !important;
  --theme-cart-badge-background: var(--ts-naranja) !important;
  --theme-cart-badge-text-color: var(--ts-tinta) !important;
  --theme-cart-badge-color: var(--ts-tinta) !important;
  color: var(--ts-tinta);
}
html body #header .ct-cart-item svg,
html body #header .ct-cart-item .ct-icon{
  color: var(--ts-tinta) !important;
  fill: currentColor !important;
}
html body #header .ct-cart-item:hover svg,
html body #header .ct-cart-item:hover .ct-icon{ color: var(--ts-naranja-fuerte) !important; }
html body #header .ct-cart-item .ct-dynamic-count-cart,
html body #header .ct-cart-item [class*="ct-dynamic-count"]{
  background: var(--ts-naranja) !important;
  color: var(--ts-tinta) !important;
  border-color: #FFFFFF !important;
  font-weight: 700;
}
html body #header .ct-cart-item .ct-dynamic-count-cart::before,
html body #header .ct-cart-item .ct-dynamic-count-cart::after{ background: var(--ts-naranja) !important; }

/* Selección de texto en toda la web: naranja claro con texto negro. */
::selection{ background: #FFE1B3; color: var(--ts-tinta); }



/* ---------------------------------------------------------------------------
   8. Portada: la banda OFERTAS y los carruseles de productos
   ----------------------------------------------------------------------------
   Nada cambia de sitio: el envoltorio de cada fila (.woocommerce.columns-5)
   conserva su ancho (max 1300px centrado, 24px de aire) y sus márgenes. Solo
   la lista (ul.products.ts-fila) deja de ser rejilla de 5 y pasa a ser un
   carril: una fila desplazable, con imán en cada tarjeta, la misma anchura
   de tarjeta que tenía la rejilla y sin barra de desplazamiento visible.
   El guion envuelve la lista en .ts-carrusel solo para colgar las flechas.
   --------------------------------------------------------------------------- */
:root{
  --ts-carrusel-hueco: 20px;      /* el mismo hueco que tenía la rejilla */
  --ts-por-vista: 5;
}
@media (max-width: 1199px){ :root{ --ts-por-vista: 4; } }
@media (max-width: 991px){  :root{ --ts-por-vista: 2; } }
@media (max-width: 576px){  :root{ --ts-por-vista: 1.15; --ts-carrusel-hueco: 16px; } }

html body .ts-carrusel{
  position: relative;
  width: 100%;
  min-width: 0;
}
/* Si el guion antiguo convierte el envoltorio en rejilla de 2 (tablet), el
   carrusel ocupa las dos columnas. */
html body .woocommerce.columns-5 > .ts-carrusel{
  grid-column: 1 / -1;
}
/* La lista: una fila desplazable dentro del mismo cajón de siempre. */
html body ul.products.ts-fila{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--ts-carrusel-hueco) !important;
  grid-template-columns: none !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px 0 14px !important;   /* sitio para la sombra de la tarjeta */
  box-sizing: border-box;
}
html body ul.products.ts-fila::-webkit-scrollbar{ display: none; }
/* Cada tarjeta: el mismo ancho que tenía en la rejilla de 5 (o de 4, 2, 1). */
html body ul.products.ts-fila > li.product{
  flex: 0 0 calc((100% - (var(--ts-por-vista) - 1) * var(--ts-carrusel-hueco)) / var(--ts-por-vista)) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  scroll-snap-align: start;
}
/* Las flechas: redondas, blancas, centradas en el borde de la fila. Solo si
   hay más de una pantalla de productos; en tablet y móvil se arrastra. */
html body .ts-carrusel__flecha{
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ts-linea);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--ts-tinta);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  cursor: pointer;
  z-index: 2;
  transform: translateY(-60%);
  transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
html body .ts-carrusel.is-desplazable .ts-carrusel__flecha{ display: flex; }
html body .ts-carrusel__flecha--prev{ left: -21px; }
html body .ts-carrusel__flecha--next{ right: -21px; }
html body .ts-carrusel__flecha svg{ width: 18px; height: 18px; }
html body .ts-carrusel__flecha:hover,
html body .ts-carrusel__flecha:focus-visible{
  border-color: var(--ts-naranja);
  color: var(--ts-naranja-texto);
  background: #FFFFFF;
  transform: translateY(-60%) !important;   /* anula los efectos globales de los botones */
  filter: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
html body .ts-carrusel__flecha:disabled{
  opacity: .3;
  cursor: default;
  box-shadow: none;
}
@media (max-width: 991px){
  html body .ts-carrusel__flecha{ display: none !important; }
}

/* La banda OFERTAS. Su cabecera lleva las mismas clases que "Laptop / Ver
   más" (mismo cajón, mismos márgenes); lo único que la destaca es el icono
   y un fondo naranja muy claro que va por detrás, a todo lo ancho, sin
   mover nada. */
html body .ts-ofertas-portada{
  position: relative;
  padding: 18px 0 2px;
  margin: 10px 0 6px;
  /* El editor de bloques limita cada hijo del contenido a su "ancho de
     contenido"; sin esto la banda salía más estrecha que las filas. Sin
     límite, su cabecera y su fila se centran solas con el mismo cajón. */
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body .ts-ofertas-portada::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #FFF6E3;
  border-top: 1px solid #FFE1B3;
  border-bottom: 1px solid #FFE1B3;
  z-index: -1;
  pointer-events: none;
}
html body .ts-ofertas-portada__titulo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
html body .ts-ofertas-portada__titulo svg{
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--ts-naranja-fuerte, #FF7A1A);
}

@media (prefers-reduced-motion: reduce){
  .ts-buscar__sug{ animation: none; }
  .ts-buscar.is-buscando .ts-buscar__boton svg{ animation: none; }
  html body #footer .ct-social-box > a{ transition: none; }
  html body ul.products li.product{ transition: none !important; }
}