/**
 * Tapiracuai Child Theme — SISTEMA DE DISEÑO PROPIO
 * Identidad: rojo corporativo (marca oficial)
 * + ámbar cálido para ofertas. Limpio, premium, con aire.
 *
 * Base estructural: port Woodmart (whb-*, wd-*) — pero la PALETA,
 * los componentes y el ritmo son propios de Tapiracuai.
 */

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&display=swap');

/* Fuente de íconos Woodmart (buscador, carrito, cuenta, hamburguesa, flechas) */
@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: "woodmart-font";
    src: url('../fonts/woodmart-font.woff2') format('woff2');
    font-display: block;
}

/* ============================================
   DESIGN TOKENS — identidad propia Tapiracuai
   ============================================ */
:root {
    /* Paleta de marca */
    --tl-naranja: #a20607;              /* ROJO CORPORATIVO — primario principal */
    --tl-naranja-hover: #7d0405;
    --tl-verde-claro: #FBE9E9;          /* fondo suave rojo para chips/cards */
    --tl-ambar: #F2A33C;                /* ámbar cálido — ofertas/destacados */
    --tl-ambar-hover: #E8932A;
    --tl-negro: #1A1414;                /* tinta profunda cálida (headings/footer) */
    --tl-gris-fondo: #F6F7F5;           /* fondo cálido neutro */
    --tl-gris-borde: #E8ECE8;           /* borde suave */
    --tl-blanco: #ffffff;
    --tl-texto: #5C665F;
    --tl-titulo: #201818;
    --tl-rojo-oferta: #D64545;

    /* Radii / medidas */
    --tl-radio: 20px;
    --tl-radio-form: 999px;
    --tl-input-h: 48px;

    /* Tipografía */
    --tl-font: "Albert Sans", Arial, Helvetica, sans-serif;

    /* Sombras suaves (premium, nada duro) */
    --tl-shadow-sm: 0 2px 12px rgba(22, 35, 31, 0.06);
    --tl-shadow-md: 0 10px 30px rgba(22, 35, 31, 0.10);
    --tl-shadow-lg: 0 24px 60px rgba(22, 35, 31, 0.14);

    /* Sobreescribir tokens Woodmart para que TODO herede la nueva identidad */
    --wd-primary-color: #a20607;
    --wd-link-color: #a20607;
    --wd-link-color-hover: #7d0405;
    --btn-accented-bgcolor: #a20607;
    --btn-accented-bgcolor-hover: #7d0405;
    --wd-text-color: #5C665F;
    --wd-title-color: #16231F;
    --wd-entities-title-color: #16231F;
    --wd-entities-title-color-hover: rgba(22, 35, 31, 0.7);
    --wd-widget-title-color: #16231F;
    --wd-widget-title-font-size: 15px;
    --wd-brd-radius: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
    font-family: var(--tl-font);
    color: var(--tl-texto);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background: var(--tl-gris-fondo);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tl-font);
    color: var(--tl-titulo);
    font-weight: 700;
}

a { color: var(--tl-titulo); transition: color .2s ease; }
a:hover { color: var(--tl-naranja); }

::selection { background: var(--tl-naranja); color: #fff; }

:focus-visible {
    outline: 2px solid var(--tl-naranja);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Separación visual real del header respecto al body */
.whb-header {
    box-shadow: 0 1px 12px rgba(20, 33, 29, 0.08);
    position: relative;
    z-index: 400;
}

/* Ocultar título "Inicio" redundante que Astra pone en la home */
.home .entry-header { display: none; }

/* ============================================
   HEADER — limpieza y marca propia
   ============================================ */
/* Barra superior: verde esmeralda sólido */
.whb-row.whb-top-bar {
    background: var(--tl-naranja) !important;
    border-bottom: none !important;
}
.whb-row.whb-top-bar .wd-header-text,
.whb-row.whb-top-bar .wd-header-nav a {
    color: rgba(255,255,255,0.92) !important;
}
.whb-row.whb-top-bar .wd-header-nav a:hover { color: #fff !important; }
.whb-row.whb-top-bar .menu-item { border-color: rgba(255,255,255,0.25) !important; }

/* Fila principal: blanca limpia */
.whb-row.whb-general-header,
.whb-row.whb-header-bottom {
    background: var(--tl-blanco) !important;
}

/* Botón "Categorías": píldora verde sólida con ícono */
.wd-nav-header > li.menu-mega-dropdown > a.woodmart-nav-link {
    background: var(--tl-naranja);
    color: #fff !important;
    padding: 0 22px !important;
    height: 44px;
    border-radius: var(--tl-radio-form);
    display: flex !important;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
    box-shadow: 0 6px 16px rgba(12, 107, 93, 0.28);
}
.wd-nav-header > li.menu-mega-dropdown > a.woodmart-nav-link:hover {
    background: var(--tl-naranja-hover);
    transform: translateY(-1px);
}
.wd-nav-header > li.menu-mega-dropdown > a.woodmart-nav-link::before {
    content: "\2630";
    font-size: 14px;
}

/* Búsqueda: input píldora con borde suave */
.wd-search-form .searchform input[type=text].s {
    border-radius: var(--tl-radio-form) !important;
    border: 1px solid var(--tl-gris-borde) !important;
    background: var(--tl-gris-fondo) !important;
    transition: border-color .2s, box-shadow .2s;
}
.wd-search-form .searchform input[type=text].s:focus {
    border-color: var(--tl-naranja) !important;
    box-shadow: 0 0 0 4px rgba(12, 107, 93, 0.10);
    background: #fff !important;
}
.wd-search-form .searchsubmit {
    background: var(--tl-naranja) !important;
    color: #fff !important;
    border-radius: 0 var(--tl-radio-form) var(--tl-radio-form) 0 !important;
    transition: background .2s;
}
.wd-search-form .searchsubmit:hover { background: var(--tl-naranja-hover) !important; }

/* Botón "Ofertas" del header: ghost verde */
.wd-header-nav .wd-button-wrapper a.btn,
.whb-column .wd-button-wrapper a.btn {
    border: 2px solid var(--tl-ambar) !important;
    color: var(--tl-ambar-hover) !important;
    background: transparent !important;
    border-radius: var(--tl-radio-form) !important;
    font-weight: 700;
    padding: 0 24px !important;
    height: 42px !important;
    line-height: 38px !important;
    transition: all .2s ease;
}
.wd-header-nav .wd-button-wrapper a.btn:hover,
.whb-column .wd-button-wrapper a.btn:hover {
    background: var(--tl-ambar) !important;
    color: #1a1a1a !important;
    border-color: var(--tl-ambar) !important;
}

/* Contador del carrito: punto ámbar */
.wd-header-cart .wd-cart-number {
    background: var(--tl-ambar) !important;
    color: #1a1a1a !important;
}

/* Ícono "Mis deseos" (YITH Wishlist) junto al carrito */
.wd-header-wishlist .wd-tools-icon {
    color: var(--tl-blanco);
}
.wd-header-wishlist .wd-wishlist-svg {
    width: 22px;
    height: 22px;
    display: block;
}
.wd-header-wishlist a:hover .wd-tools-icon {
    color: var(--tl-ambar);
}
.wd-header-wishlist .wd-wishlist-number {
    background: var(--tl-ambar) !important;
    color: #1a1a1a !important;
}
/* El badge solo muestra el número, sin la palabra "deseos" */
.wd-header-wishlist .wd-wishlist-number span {
    display: none !important;
}
/* Woodmart pinta un glifo extra en ::before (var --wd-tools-icon) que
   duplica el corazón SVG propio: lo anulamos SOLO en el header wishlist */
.wd-header-wishlist .wd-tools-icon::before {
    content: none !important;
}

/* Dropdown login */
.wd-dropdown-register {
    width: 340px;
    padding: 28px;
    background: var(--tl-blanco);
    border-radius: var(--tl-radio);
    box-shadow: var(--tl-shadow-lg);
    border: 1px solid var(--tl-gris-borde);
}
.wd-dropdown-register .wd-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tl-gris-borde);
}
.wd-dropdown-register .wd-heading .title {
    font-size: 18px;
    font-weight: 800;
    color: var(--tl-titulo);
}
.wd-dropdown-register .create-account-link {
    font-size: 13px;
    color: var(--tl-naranja);
    text-decoration: none;
    font-weight: 600;
}
.wd-dropdown-register form.woocommerce-form-login .form-row {
    width: 100% !important;
    float: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}
.wd-dropdown-register form.woocommerce-form-login label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--tl-titulo);
    margin-bottom: 6px;
    white-space: nowrap;
}
.wd-dropdown-register form.woocommerce-form-login .input-text {
    width: 100%;
    height: var(--tl-input-h);
    border: 1px solid var(--tl-gris-borde);
    border-radius: var(--tl-radio-form);
    padding: 0 18px;
    font-family: var(--tl-font);
    font-size: 14px;
    background: var(--tl-gris-fondo);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.wd-dropdown-register form.woocommerce-form-login .input-text:focus {
    border-color: var(--tl-naranja);
    box-shadow: 0 0 0 4px rgba(12, 107, 93, 0.10);
    background: #fff;
}
.wd-dropdown-register .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--tl-texto);
    margin-bottom: 16px;
}
.wd-dropdown-register .woocommerce-form-login__submit {
    width: 100%;
    height: 48px;
    background: var(--tl-naranja) !important;
    color: #fff !important;
    border-radius: var(--tl-radio-form) !important;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .2s;
}
.wd-dropdown-register .woocommerce-form-login__submit:hover { background: var(--tl-naranja-hover) !important; }
.wd-dropdown-register .lost_password {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    text-align: center;
}
.wd-dropdown-register .lost_password a { color: var(--tl-texto); }

/* Enlaces de cuenta logueada (fondo del dropdown es blanco → texto oscuro) */
.tp-account-links {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
.tp-account-links li {
    margin: 0;
    border-bottom: 1px solid rgba(22, 35, 31, 0.08);
}
.tp-account-links li:last-child { border-bottom: none; }
.tp-account-links a {
    display: block;
    padding: 10px 0;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.2s, color .2s;
}
.tp-account-links a:hover { color: var(--tl-naranja); opacity: 1; }
.wd-dropdown-register .wd-heading .title { color: #1a1a1a; }
.tp-wholesale-badge span {
    display: inline-block;
    background: var(--tl-ambar);
    color: #1a1a1a;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin: 8px 0;
}

/* Mega menú: dropdown limpio con sombra */
.wd-dropdown-menu.wd-design-default {
    border-radius: var(--tl-radio);
    box-shadow: var(--tl-shadow-lg);
    border: 1px solid var(--tl-gris-borde);
    background: #fff;
    padding: 12px;
}

/* ============================================
   CARRUSEL HERO — limpio y premium
   ============================================ */
.tapiracuai-hero-carousel {
    position: relative;
    max-width: 1280px;
    margin: 28px auto 0;
    background: linear-gradient(120deg, #EAF3F0 0%, #F3F7F1 55%, #FBF3E4 100%);
    overflow: hidden;
    border-radius: 28px;
    box-shadow: var(--tl-shadow-md);
    border: 1px solid rgba(12, 107, 93, 0.08);
}
.carousel-slides { position: relative; height: 430px; }
.carousel-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 54px 72px;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.carousel-slide.active { opacity: 1; pointer-events: auto; }
.slide-content { flex: 1; max-width: 52%; }
.slide-cat {
    display: inline-block;
    background: rgba(12, 107, 93, 0.10);
    color: var(--tl-naranja);
    padding: 7px 18px;
    border-radius: var(--tl-radio-form);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}
.slide-content h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--tl-titulo);
    margin: 0 0 24px;
    line-height: 1.1;
    letter-spacing: -0.8px;
}
.slide-cta {
    display: inline-block;
    background: var(--tl-naranja);
    color: var(--tl-blanco) !important;
    padding: 0 34px;
    height: 50px;
    line-height: 50px;
    border-radius: var(--tl-radio-form);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s, transform .2s, box-shadow .2s;
    box-shadow: 0 8px 20px rgba(12, 107, 93, 0.28);
}
.slide-cta:hover {
    background: var(--tl-naranja-hover);
    color: var(--tl-blanco) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(12, 107, 93, 0.34);
}
.slide-img { flex: 1; text-align: center; }
.slide-img img {
    max-height: 340px;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 34px rgba(20, 33, 29, 0.20));
    transition: transform .5s ease;
}
.carousel-slide.active .slide-img img { transform: scale(1.02); }

.carousel-prev, .carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(22, 35, 31, 0.08);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    color: var(--tl-titulo);
    box-shadow: var(--tl-shadow-sm);
    transition: background 0.2s, color .2s, transform .2s;
    z-index: 10;
}
.carousel-prev:hover, .carousel-next:hover {
    background: var(--tl-naranja);
    color: var(--tl-blanco);
    transform: translateY(-50%) scale(1.06);
}
.carousel-prev { left: 24px; }
.carousel-next { right: 24px; }
.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.carousel-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(22, 35, 31, 0.18);
    cursor: pointer;
    transition: all 0.3s ease;
}
.carousel-dots .dot.active {
    background: var(--tl-naranja);
    width: 26px;
}

/* ============================================
   SECCIONES HOME — ritmo y encabezados
   ============================================ */
.woocommerce .ast-container, .tp-home-sections { max-width: 1280px; }

/* Encabezado de sección: eyebrow + título + subtítulo */
.tp-section-head {
    max-width: 1280px;
    margin: 56px auto 0;
    padding: 0 20px;
    text-align: center;
}
/* (espaciado despues del slider se maneja mas abajo en la regla
   #metaslider-id-318 con margin-bottom explicito) */
.tp-section-head .tp-eyebrow {
    display: inline-block;
    background: var(--tl-verde-claro);
    color: var(--tl-naranja);
    padding: 6px 18px;
    border-radius: var(--tl-radio-form);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
}
.tp-section-head h2 {
    font-size: 34px;
    font-weight: 800;
    color: var(--tl-titulo);
    letter-spacing: -0.6px;
    margin: 0 0 10px;
}
.tp-section-head p {
    margin: 0;
    color: var(--tl-texto);
    font-size: 15px;
}
@media (max-width: 768px) {
    .tp-section-head h2 { font-size: 26px; }
    .tp-section-head { margin-top: 44px; }
}

/* Títulos de sección (cubren los h2 inline de la home) */
.home .entry-content > h2 {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--tl-titulo) !important;
    letter-spacing: -0.5px;
    margin: 56px 0 8px !important;
}
.home .entry-content > p {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    color: var(--tl-texto) !important;
}

/* ============================================
   GRID CATEGORÍAS (home) — cards con chip de imagen
   ============================================ */
.tapiracuai-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin: 34px auto;
    max-width: 1280px;
    padding: 0 20px;
}
.tapiracuai-cat-card {
    background: var(--tl-blanco);
    border: 1px solid var(--tl-gris-borde);
    border-radius: var(--tl-radio);
    padding: 22px 14px 20px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color .25s ease;
    display: block;
}
.tapiracuai-cat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--tl-shadow-md);
    border-color: transparent;
}
.tapiracuai-cat-card .cat-card-img {
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: var(--tl-verde-claro);
    border-radius: 16px;
    padding: 14px;
    transition: background .25s ease;
}
.tapiracuai-cat-card:hover .cat-card-img { background: #DCEBE6; }
.tapiracuai-cat-card .cat-card-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.tapiracuai-cat-card .cat-card-img svg {
    width: 46px;
    height: 46px;
    color: var(--tl-naranja);
    transition: color .25s ease, transform .25s ease;
}
.tapiracuai-cat-card:hover .cat-card-img svg {
    color: var(--tl-ambar);
    transform: scale(1.08);
}
.tapiracuai-cat-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 5px;
    color: var(--tl-titulo);
}
.tapiracuai-cat-card .cat-card-count {
    font-size: 13px;
    color: var(--tl-naranja);
    font-weight: 700;
}

/* ============================================
   OFERTAS — banner ámbar suave (no naranja duro)
   ============================================ */
.tapiracuai-ofertas-banner {
    position: relative;
    max-width: 1280px;
    margin: 44px auto 0;
    padding: 0 20px;
    background: linear-gradient(120deg, #F6B862 0%, #F2A33C 60%, #E8932A 100%);
    border-radius: 28px;
    box-shadow: 0 18px 44px rgba(242, 163, 60, 0.30);
    overflow: hidden;
}
.ofertas-banner-bg {
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 100px;
    background: transparent;
    color: rgba(255,255,255,0.22);
    font-size: 46px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 30px;
    letter-spacing: 2px;
    z-index: 0;
    pointer-events: none;
    animation: tapiracuai-bg-scroll 40s linear infinite;
}
@keyframes tapiracuai-bg-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ofertas-banner-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 34px 34px 22px;
}
.ofertas-banner-header h2 {
    color: #241403;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 4px;
}
.ofertas-banner-header p {
    color: rgba(36, 20, 3, 0.75);
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}
.ofertas-banner-link {
    background: #fff;
    color: #B36E18 !important;
    padding: 12px 26px;
    border-radius: var(--tl-radio-form);
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    transition: transform .2s;
}
.ofertas-banner-link:hover { transform: translateY(-2px); color: #8F5813 !important; }
.ofertas-banner-products {
    position: relative;
    z-index: 1;
    margin-top: -20px;
    padding-bottom: 34px;
}
.ofertas-banner-products ul.products { max-width: none; padding: 0; }
.ofertas-banner-products ul.products li.product {
    background: #fff;
    box-shadow: 0 12px 30px rgba(120, 70, 10, 0.16);
    border-radius: var(--tl-radio);
    border: none;
}

/* ============================================
   WOOCOMMERCE: productos — TARJETAS PREMIUM
   (adiós al grid plano con bordes: ahora cards limpias con aire)
   ============================================ */
.woocommerce ul.products {
    max-width: 1280px;
    margin: 24px auto;
    padding: 0 20px;
    gap: 20px;
    display: grid !important;
}
.woocommerce ul.products.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.woocommerce ul.products.columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Grid módulo moderno (reemplaza floats legado) */
.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    border: 1px solid rgba(22, 35, 31, 0.07);
    border-radius: var(--tl-radio);
    padding: 18px 16px 22px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color .25s ease;
    text-align: center;
    background: var(--tl-blanco);
    position: relative;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-6px);
    box-shadow: var(--tl-shadow-md);
    border-color: transparent;
}
.woocommerce ul.products li.product img {
    margin-bottom: 16px;
    border-radius: 16px;
    transition: transform .3s ease;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.03); }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-family: var(--tl-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--tl-titulo);
    line-height: 1.4;
    padding: 0 4px;
}
/* Badge oferta: píldora ámbar */
.woocommerce span.onsale {
    background: var(--tl-ambar);
    color: #241403;
    border-radius: 999px;
    padding: 5px 14px;
    font-weight: 800;
    font-size: 12px;
    min-height: 0;
    line-height: 1.4;
    top: 12px !important;
    left: 12px !important;
    text-transform: none;
    box-shadow: 0 4px 12px rgba(242, 163, 60, 0.35);
}
.woocommerce ul.products li.product .price {
    color: var(--tl-naranja);
    font-weight: 800;
    font-size: 17px;
    margin-top: 8px;
    display: block;
}
.woocommerce ul.products li.product .price del {
    color: #9AA39B;
    font-size: 0.8em;
    font-weight: 500;
    margin-right: 6px;
}
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    color: var(--tl-naranja);
}

/* Botones: píldora verde consistente */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.wp-block-button__link,
.woocommerce a.add_to_cart_button {
    background: var(--tl-naranja) !important;
    color: var(--tl-blanco) !important;
    border-radius: var(--tl-radio-form) !important;
    font-weight: 600;
    font-family: var(--tl-font);
    font-size: 14px;
    height: 48px;
    line-height: 46px;
    padding: 0 28px !important;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform .2s ease, box-shadow .2s;
    text-transform: none;
    box-shadow: 0 6px 16px rgba(12, 107, 93, 0.22);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.add_to_cart_button:hover {
    background: var(--tl-naranja-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(12, 107, 93, 0.28);
}
/* Botón add-to-cart en loop: aparece sutil */
.woocommerce ul.products li.product .add_to_cart_button,
.related.products .add_to_cart_button,
ul.products.columns-4 li.product .add_to_cart_button,
.astra-shop-summary-wrap .add_to_cart_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 40px;
    line-height: 1.3 !important;
    padding: 10px 14px !important;
    font-size: 12px;
    margin-top: 8px;
    box-shadow: none;
    width: 100% !important;
    max-width: 100%;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    text-indent: 0 !important;
    text-align: center;
    box-sizing: border-box !important;
}
/* Failsafe con la cadena de clases EXACTA del HTML real: ocupa el 100%
   de su propia columna (nunca un ancho fijo que desborde la tarjeta). */
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-indent: 0 !important;
    text-overflow: unset !important;
    font-size: 12px !important;
    text-align: center;
    box-sizing: border-box !important;
}
.astra-shop-summary-wrap {
    overflow: visible !important;
}
.astra-shop-thumbnail-wrap,
li.product {
    overflow: visible !important;
}

/* Woodmart-port: el botón "Añadir al carrito" del loop usa su propio
   sistema (.wd-add-btn / .wd-loop-prod-btn) que en modo ícono puede
   colapsar el texto a solo un fragmento. Forzamos texto completo visible. */
.wd-loop-prod-btn.wd-add-btn-replace > a,
.wd-loop-prod-btn.wd-add-btn > a {
    width: auto !important;
    min-width: 100%;
    white-space: nowrap;
    overflow: visible !important;
    text-overflow: unset !important;
}
.wd-loop-prod-btn.wd-add-btn-replace > a > span,
.wd-add-btn .button > span {
    width: auto !important;
    overflow: visible !important;
    white-space: nowrap;
    text-overflow: unset !important;
    padding: 5px 14px !important;
}
.wd-add-btn.wd-style-icon > a,
.wd-loop-prod-btn.wd-style-icon > a {
    width: auto !important;
    height: auto !important;
}

/* Inputs WooCommerce / forms píldora suave */
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea {
    border-radius: var(--tl-radio-form);
    border: 1px solid var(--tl-gris-borde);
    height: var(--tl-input-h);
    padding: 0 20px;
    font-family: var(--tl-font);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.woocommerce input.input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
    border-color: var(--tl-naranja);
    box-shadow: 0 0 0 4px rgba(12, 107, 93, 0.10);
    outline: none;
}
.woocommerce textarea { height: auto; border-radius: var(--tl-radio); }

/* ============================================
   FOOTER — tinta profunda, tipografía cuidada
   ============================================ */
.tp-footer {
    background: var(--tl-negro);
    color: #B9C4BC;
    margin-top: 60px;
}
.tp-footer-main { padding: 60px 0 36px; }
.tp-footer-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
}
.tp-footer-col h4 {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 0 0 18px;
    font-weight: 800;
}
.tp-footer-col ul { list-style: none; margin: 0; padding: 0; }
.tp-footer-col li { margin-bottom: 11px; }
.tp-footer-col a { color: #B9C4BC; font-size: 14px; transition: color .2s; }
.tp-footer-col a:hover { color: var(--tl-ambar); }
.tp-footer-logo { max-width: 170px; height: auto; margin-bottom: 16px; }
.tp-footer-about p {
    font-size: 13px;
    line-height: 1.8;
    color: #93A39A;
    margin: 0 0 20px;
}
.tp-footer-social { display: flex; gap: 10px; }
.tp-footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D7E2DB;
    transition: all .2s ease;
}
.tp-social-icon { display: block; }
.tp-footer-social a:hover {
    border-color: var(--tl-ambar);
    background: var(--tl-ambar);
    color: #1a1a1a;
}
.tp-footer-contact li { font-size: 13px; color: #93A39A; }
.tp-footer-contact a { color: #93A39A; }
.tp-footer-contact a:hover { color: var(--tl-ambar); }

.tp-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 0;
}
.tp-footer-bottom .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}
.tp-footer-bottom p {
    margin: 0;
    font-size: 12px;
    color: #7C8C82;
    text-align: center;
    letter-spacing: 0.02em;
}

/* ============================================
   CONFIANZA — chips con ícono en círculo verde
   ============================================ */
.tp-trust-grid {
    max-width: 1280px;
    margin: 56px auto 20px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.tp-trust-item {
    text-align: center;
    background: var(--tl-blanco);
    border: 1px solid var(--tl-gris-borde);
    border-radius: var(--tl-radio);
    padding: 30px 20px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.tp-trust-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--tl-shadow-sm);
}
.tp-trust-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tl-verde-claro);
    color: var(--tl-naranja);
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 14px;
}
.tp-trust-item h4 {
    font-size: 15px;
    margin: 0 0 8px;
    color: var(--tl-titulo);
}
.tp-trust-item p {
    font-size: 13px;
    color: var(--tl-texto);
    margin: 0;
    line-height: 1.6;
}

/* ============================================
   TIENDA / CATEGORÍAS — breadcrumb + sidebar pulidos
   ============================================ */
.woocommerce-breadcrumb {
    display: block;
    max-width: 1280px;
    margin: 20px auto 0;
    padding: 0 20px;
    font-size: 13px;
    color: var(--tl-texto);
}
.woocommerce-breadcrumb a { color: var(--tl-texto); }
.woocommerce-breadcrumb a:hover { color: var(--tl-naranja); }

.tp-shop-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    max-width: 1280px;
    margin: 24px auto 60px;
    padding: 0 20px;
}
.tp-shop-sidebar { flex: 0 0 264px; width: 264px; }
.tp-sidebar-widget {
    background: var(--tl-blanco);
    border: 1px solid var(--tl-gris-borde);
    border-radius: var(--tl-radio);
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: var(--tl-shadow-sm);
}
.tp-sidebar-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--tl-naranja);
    color: var(--tl-titulo);
}
.tp-cat-tree, .tp-cat-tree ul { list-style: none; margin: 0; padding: 0; }
.tp-cat-tree ul { padding-left: 16px; margin-top: 6px; }
.tp-cat-tree li { margin-bottom: 7px; }
.tp-cat-tree a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--tl-texto);
    padding: 4px 0;
    border-radius: 8px;
    transition: color .2s, background .2s;
}
.tp-cat-tree a:hover { color: var(--tl-naranja); background: var(--tl-gris-fondo); padding-left: 8px; }
.tp-cat-tree .children a { font-size: 13px; }

.tp-shop-main { flex: 1 1 auto; min-width: 0; }

/* Header de resultados: contador + select de orden en UNA fila limpia
   (sin los floats que hacían que el select "se pierda") */
.tp-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 4px 0 22px;
    padding: 14px 18px;
    background: var(--tl-blanco);
    border: 1px solid var(--tl-gris-borde);
    border-radius: var(--tl-radio);
    box-shadow: var(--tl-shadow-sm);
}
.tp-results-header p.woocommerce-result-count {
    float: none !important;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--tl-texto);
}
.tp-results-header form.woocommerce-ordering {
    float: none !important;
    margin: 0;
}
.tp-results-header select.orderby {
    width: auto;
    min-width: 220px;
    height: 40px;
    padding: 0 38px 0 16px;
    border: 1px solid var(--tl-gris-borde);
    border-radius: var(--tl-radio-form);
    background: var(--tl-gris-fondo) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%235C665F" stroke-width="1.6" stroke-linecap="round"/></svg>') no-repeat right 16px center;
    font-family: var(--tl-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--tl-titulo);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color .2s, box-shadow .2s;
}
.tp-results-header select.orderby:focus {
    outline: none;
    border-color: var(--tl-naranja);
    box-shadow: 0 0 0 4px rgba(12, 107, 93, 0.10);
}

/* Ocultar header nativo duplicado (el h1/chuips de WooCommerce/Filter Everything
   ya están cubiertos por el tp-shop-banner) */
.tp-shop-main .woocommerce-products-header { display: none; }

/* Árbol de categorías: subcategorías colapsadas salvo la rama activa */
.tp-cat-tree ul.children { display: none; }
.tp-cat-tree li.open > ul.children,
.tp-cat-tree li.current-cat > ul.children,
.tp-cat-tree li.current-cat-parent > ul.children { display: block; }

/* Acordeón de categorías: cada padre con su botón chevron */
.tp-cat-tree li.has-children {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tp-cat-tree li.has-children > ul.children { flex: 1 0 100%; }
.tp-cat-toggle {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: var(--tl-naranja);
    border-radius: 8px;
    transition: background .2s, color .2s;
}
.tp-cat-toggle:hover { background: var(--tl-verde-claro); }
.tp-cat-toggle svg {
    width: 11px;
    height: 11px;
    flex: none;
    transition: transform .2s;
}
.tp-cat-tree li.open > .tp-cat-toggle svg { transform: rotate(90deg); }
.tp-cat-tree li.current-cat > a,
.tp-cat-tree li.current-cat-parent > a {
    color: var(--tl-naranja);
    font-weight: 700;
}

/* Filtro de precio (Gs) */
.tp-price-form { display: flex; flex-direction: column; gap: 14px; }
.tp-price-fields {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.tp-price-field { flex: 1 1 0; min-width: 0; }
.tp-price-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--tl-texto);
    margin-bottom: 6px;
}
.tp-price-field input[type="number"] {
    width: 100%;
    height: 42px;
    border: 1px solid var(--tl-gris-borde);
    border-radius: var(--tl-radio-form);
    padding: 0 14px;
    font-family: var(--tl-font);
    font-size: 13px;
    color: var(--tl-titulo);
    background: var(--tl-gris-fondo);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.tp-price-field input[type="number"]:focus {
    outline: none;
    border-color: var(--tl-naranja);
    box-shadow: 0 0 0 4px rgba(12, 107, 93, 0.10);
    background: #fff;
}
.tp-price-sep {
    color: var(--tl-texto);
    font-weight: 600;
    padding-bottom: 11px;
    line-height: 1;
}
.tp-price-submit {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: var(--tl-radio-form);
    background: var(--tl-naranja);
    color: var(--tl-blanco);
    font-family: var(--tl-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 6px 16px rgba(12, 107, 93, 0.22);
}
.tp-price-submit:hover {
    background: var(--tl-naranja-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(12, 107, 93, 0.28);
}
.tp-shop-banner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: linear-gradient(120deg, #EAF3F0, #F6F7F5);
    border: 1px solid rgba(12, 107, 93, 0.08);
    border-radius: var(--tl-radio);
    padding: 24px 28px;
    margin-bottom: 26px;
}
.tp-shop-banner h1 { font-size: 26px; margin: 0; color: var(--tl-titulo); }
.tp-shop-count { font-size: 14px; font-weight: 700; color: var(--tl-naranja); }

/* ============================================
   PÁGINA DE PRODUCTO
   ============================================ */
/* Galería acotada: la imagen ya no domina la página; queda a la izquierda
   con ancho máximo de 420px y el resumen toma el resto de la fila. */
.ast-woocommerce-container div.product {
    display: grid;
    grid-template-columns: minmax(0, 420px) 1fr;
    gap: 40px;
    align-items: start;
}
.ast-woocommerce-container div.product div.images,
.ast-woocommerce-container div.product div.summary {
    width: auto !important;
    float: none !important;
    margin: 0;
}
.woocommerce div.product div.images { max-width: 100%; }
/* Imagen nunca se estira: fotos verticales (534x800) quedan contenidas
   y centradas en una altura máxima cómoda. */
.ast-woocommerce-container div.product div.images .woocommerce-product-gallery__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.woocommerce div.product div.images img {
    border-radius: var(--tl-radio);
    max-width: 100%;
    max-height: 600px;
    height: auto;
    width: auto;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--tl-gris-borde);
}
/* La lupa (emoji) que Woodmart port deja sobre la imagen */
.woocommerce div.product .woocommerce-product-gallery__trigger { display: none !important; }
@media (max-width: 921px) {
    .ast-woocommerce-container div.product {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
/* Botón "Añadir a la lista de deseos" del detalle: pill naranja sólido,
   ancho completo de la columna, contenido centrado (corazón + texto). */
.yith-add-to-wishlist-button-block--single {
    position: static !important;
    margin-top: 20px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}
.yith-add-to-wishlist-button-block--single .yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--single.yith-wcwl-add-to-wishlist-button--anchor {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--tl-naranja);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s, transform .2s, box-shadow .2s;
}
.yith-add-to-wishlist-button-block--single .yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--single.yith-wcwl-add-to-wishlist-button--anchor:hover {
    background: var(--tl-naranja-hover);
    box-shadow: 0 8px 18px rgba(12, 107, 93, 0.22);
    transform: translateY(-1px);
}
.yith-add-to-wishlist-button-block--single .yith-wcwl-add-to-wishlist-button .yith-wcwl-icon.yith-wcwl-icon-svg {
    width: 20px;
    height: 20px;
    display: block;
    background: transparent;
}
.yith-add-to-wishlist-button-block--single .yith-wcwl-add-to-wishlist-button .yith-wcwl-icon.yith-wcwl-icon-svg path,
.yith-add-to-wishlist-button-block--single .yith-wcwl-add-to-wishlist-button .yith-wcwl-icon.yith-wcwl-icon-svg svg {
    stroke: currentColor;
    fill: none;
}
/* En el detalle de producto el botón es el único corazón de la página:
   ocultamos el del header ahí para no mostrar dos corazones.
   En el resto del sitio el corazón del header queda visible como acceso
   a "Mi Lista de Deseos". */
.single-product .wd-header-wishlist {
    display: none !important;
}
/* Miniatura en la tabla "Mi Lista de Deseos": nunca gigante */
.wishlist_table td.product-thumbnail img,
.wishlist_table .product-thumbnail img {
    max-width: 90px;
    max-height: 90px;
    height: auto !important;
    width: auto;
    border-radius: 12px;
    border: 1px solid var(--tl-gris-borde);
}
.woocommerce div.product div.summary .product_title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.4px;
}
.woocommerce div.product p.price {
    color: var(--tl-naranja);
    font-size: 26px;
    font-weight: 800;
}
.woocommerce div.product p.price del { color: #9AA39B; font-weight: 500; font-size: 0.75em; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-tabs {
    margin-top: 44px;
    border-top: 1px solid var(--tl-gris-borde);
    padding-top: 22px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--tl-titulo);
    font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--tl-naranja); }
.related.products {
    max-width: 1280px;
    margin: 60px auto 0;
    padding: 34px 20px 0;
    border-top: 1px solid var(--tl-gris-borde);
    box-sizing: border-box;
}
.related.products > h2 { font-size: 24px; font-weight: 800; margin-bottom: 22px; }
.related.products ul.products {
    max-width: 100%;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap: 24px;
}
.related.products ul.products li.product img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
@media (max-width: 768px) {
    .related.products ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================
   CHECKOUT / CARRITO — pulido
   ============================================ */
.woocommerce form.checkout .form-row label,
.woocommerce .cart_totals h2 {
    font-weight: 700;
    color: var(--tl-titulo);
}
.woocommerce #payment {
    background: #fff;
    border: 1px solid var(--tl-gris-borde);
    border-radius: var(--tl-radio);
}
.woocommerce #payment div.payment_box {
    background: var(--tl-gris-fondo);
    border-radius: 12px;
}

/* ============================================
   BOTÓN FLOTANTE WHATSAPP / TEL — pulido
   ============================================ */
.tp-floating-cta .tp-cta-whatsapp {
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.40);
    transition: transform .2s;
}
.tp-floating-cta .tp-cta-whatsapp:hover { transform: scale(1.08); }
.tp-floating-cta .tp-cta-phone {
    background: var(--tl-naranja);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 10px 26px rgba(12, 107, 93, 0.40);
    transition: transform .2s;
}
.tp-floating-cta .tp-cta-phone:hover { transform: scale(1.08); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .woocommerce ul.products.columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .woocommerce ul.products.columns-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tp-shop-layout { flex-direction: column; }
    .tp-shop-sidebar { width: 100%; flex-basis: auto; }
    .tp-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 768px) {
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carousel-slides { height: 300px; }
    .carousel-slide { padding: 24px; flex-direction: column; text-align: center; justify-content: center; }
    .slide-content { max-width: 100%; order: 2; }
    .slide-content h2 { font-size: 23px; margin-bottom: 14px; }
    .slide-img { order: 1; margin-bottom: 12px; }
    .slide-img img { max-height: 130px; }
    .carousel-prev, .carousel-next { width: 40px; height: 40px; font-size: 15px; }
}

/* ============================================
   META SLIDER HERO — Hero principal de la home
   Integra el slider MetaSlider con el diseño propio de Tapiracuai.
   El shortcode [metaslider id="301"] renderiza un container con
   id="metaslider-id-301" y clase "metaslider-301".

/*======== Slider MetaHero integration ========
   Integra el slider MetaSlider con el diseño TodoLuz.
   Las clases .ms-slide, .ms-slide-caption, .ms-slide-title, .ms-slide-cta,
   .ms-nav-prev, .ms-nav-next son inyectadas por el plugin.
==========================================*/
.metaslider .ms-slide {
    border-radius: 28px !important;
    overflow: hidden;
}
.metaslider .ms-slide-caption {
    background: rgba(12, 107, 93, 0.12);
    color: var(--tl-naranja);
    padding: 7px 14px;
    border-radius: var(--tl-radio-form);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    display: inline-block;
}
.metaslider .ms-slide-title {
    color: var(--tl-titulo);
    font-size: 42px;
    font-weight: 800;
    margin: 0 0 20px;
    line-height: 1.1;
    letter-spacing: -0.8px;
}
.metaslider .ms-slide-cta {
    display: inline-block;
    background: var(--tl-naranja);
    color: var(--tl-blanco) !important;
    padding: 0 32px;
    height: 48px;
    line-height: 48px;
    border-radius: var(--tl-radio-form);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
    transition: background 0.2s, transform .2s, box-shadow .2s;
}
.metaslider .ms-slide-cta:hover {
    background: var(--tl-naranja-hover);
    color: var(--tl-blanco) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(12, 107, 93, 0.28);
}
.metaslider .ms-nav-prev,
.metaslider .ms-nav-next {
    color: var(--tl-naranja) !important;
    border-color: var(--tl-naranja) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
.metaslider .ms-nav-prev:hover,
.metaslider .ms-nav-next:hover {
    background: var(--tl-naranja) !important;
    color: var(--tl-blanco) !important;
}

/*======== Slider MetaHero custom - estructura real ========
   Estructura real: .ms-image slides, sin .ms-slide-caption/.ms-slide-title por defecto
==========================================*/
.metaslider-318 .ms-slide,
.metaslider-318 .metaslider__stage > .ms-slide {
    border-radius: 28px !important;
    overflow: hidden;
    max-width: 1280px;
    margin: 28px auto 0;
}
.metaslider-318 .ms-image {
    border-radius: 28px !important;
    overflow: hidden;
}
.metaslider-318 .ms-image img {
    width: 100%;
    height: 430px !important;
    object-fit: cover;
    display: block;
}
.metaslider-318 .ms-nav-prev,
.metaslider-318 .ms-nav-next {
    color: var(--tl-naranja) !important;
    border-color: var(--tl-naranja) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
.metaslider-318 .ms-nav-prev:hover,
.metaslider-318 .ms-nav-next:hover {
    background: var(--tl-naranja) !important;
    color: var(--tl-blanco) !important;
}
/* Flechas reales que genera FlexSlider (no .ms-nav-prev/.ms-nav-next):
   .flex-direction-nav > li > a.flex-prev / a.flex-next.
   Por defecto vienen con opacity:0 y solo se ven en :hover del slider;
   las forzamos siempre visibles con el estilo TodoLuz. */
.metaslider-318 .flex-direction-nav a {
    opacity: 1 !important;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: var(--tl-shadow-sm);
    text-shadow: none;
    position: absolute;
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
}
/* Flecha dibujada 100% con CSS (borde en V), sin depender de la fuente
   web "flexslider-icon" que puede fallar en cargar en algunos entornos.
   Anulamos el content/font original del plugin y ponemos un chevron. */
.metaslider-318 .flex-direction-nav a:before {
    display: none !important;
}
.metaslider-318 .flex-direction-nav a {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    text-indent: -9999px;
}
.metaslider-318 .flex-direction-nav a.flex-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a20607' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.metaslider-318 .flex-direction-nav a.flex-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a20607' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.metaslider-318 .flex-direction-nav a:hover {
    background-image: none !important;
}
.metaslider-318 .flex-direction-nav a:hover.flex-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.metaslider-318 .flex-direction-nav a:hover.flex-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.metaslider-318 .flex-direction-nav a.flex-prev { left: 24px !important; }
.metaslider-318 .flex-direction-nav a.flex-next { right: 24px !important; }
.metaslider-318 .flex-direction-nav a:hover,
.metaslider-318 .flex-direction-nav a:focus,
.metaslider-318 .flex-direction-nav a:active {
    background-color: var(--tl-naranja) !important;
    outline: none !important;
    box-shadow: var(--tl-shadow-sm) !important;
}
/* Red de seguridad: el plugin agrega .flex-disabled con opacity:0!important
   cuando infiniteLoop=false y el slide es el primero/ultimo. Ya arreglamos
   el setting en la BD, pero forzamos esto tambien por especificidad. */
.metaslider-318 .flex-direction-nav a.flex-disabled {
    opacity: 1 !important;
    cursor: pointer !important;
    z-index: 10 !important;
}
.metaslider-318 .flex-control-nav {
    display: block !important;
    bottom: 16px !important;
}
.metaslider-318 .flex-control-paging li a {
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: none !important;
}
.metaslider-318 .flex-control-paging li a.flex-active {
    background: var(--tl-naranja) !important;
}
/* El usuario no quiere el texto "Slide 1" / "Slide 2" que muestra
   el caption-wrap por defecto del plugin cuando el slide no tiene
   un caption real configurado. Lo ocultamos por completo. */
.metaslider-318 .caption-wrap {
    display: none !important;
}
.metaslider-318 .ms-flex-caption {
    background: rgba(12, 107, 93, 0.12);
    color: var(--tl-naranja);
    padding: 7px 14px;
    border-radius: var(--tl-radio-form);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

/*======== Slider MetaHero estructura real ========
   Estructura real: .ms-image slides (sin .ms-slide-caption/.ms-slide-title por defecto)
   Usa object-fit: cover para llenar el frame 1280x430
==========================================*/
.metaslider-318 .ms-slide,
.metaslider-318 .metaslider__stage > .ms-slide {
    border-radius: 28px !important;
    overflow: hidden;
    max-width: 1280px;
    margin: 28px auto 0;
}
.metaslider-318 .ms-image {
    border-radius: 28px !important;
    overflow: hidden;
}
.metaslider-318 .ms-image img {
    width: 100%;
    height: 430px !important;
    object-fit: cover;
    display: block;
}
.metaslider-318 .ms-nav-prev,
.metaslider-318 .ms-nav-next {
    color: var(--tl-naranja) !important;
    border-color: var(--tl-naranja) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
.metaslider-318 .ms-nav-prev:hover,
.metaslider-318 .ms-nav-next:hover {
    background: var(--tl-naranja) !important;
    color: var(--tl-blanco) !important;
}
/*======== Slider MetaHero dimensions & style ========
   Slider 318: 1280x430 con object-fit: cover
==========================================*/
#metaslider-id-318 {
    position: relative;
    max-width: 1280px;
    margin: 28px auto 40px;
    background: linear-gradient(120deg, #EAF3F0 0%, #F3F7F1 55%, #FBF3E4 100%);
    border-radius: 28px;
    box-shadow: var(--tl-shadow-md);
    border: 1px solid rgba(12, 107, 93, 0.08);
    overflow: hidden;
}
#metaslider-id-318 .flexslider {
    border: none;
    margin: 0;
    background: transparent;
}
#metaslider-id-318 .flexslider .slides > li {
    display: block;
    position: relative;
    visibility: visible;
    opacity: 1;
}
#metaslider-id-318 .flexslider .container {
    position: relative;
    width: 100%;
    padding: 0;
}
#metaslider-id-318 .flexslider .slides > li img {
    display: block;
    height: 430px !important;
    width: 100%;
    object-fit: cover;
    margin: 0;
    max-width: 1280px;
}
#metaslider-id-318 .ms-slide,
#metaslider-id-318 .ms-slide > img {
    border-radius: 28px !important;
    overflow: hidden;
}
#metaslider-id-318 .ms-nav-prev,
#metaslider-id-318 .ms-nav-next {
    color: var(--tl-naranja) !important;
    border-color: var(--tl-naranja) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
#metaslider-id-318 .ms-nav-prev:hover,
#metaslider-id-318 .ms-nav-next:hover {
    background: var(--tl-naranja) !important;
    color: var(--tl-blanco) !important;
}
#metaslider-id-318 .flex-control-nav {
    display: none;
}

/* ============================================
   PAGINADOR — identidad Tapiracuai (pills rojas)
   Cubre catálogo, categorías y shop
   ============================================ */
.woocommerce nav.woocommerce-pagination {
    margin-top: 40px;
    padding-top: 24px;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.woocommerce nav.woocommerce-pagination ul {
    padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
    margin-right: 0;
    padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    margin: 0;
    border: 1px solid var(--tl-gris-borde);
    border-radius: 999px;
    background: var(--tl-blanco);
    color: var(--tl-titulo);
    font-family: var(--tl-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: all .2s ease;
}
/* Hover: borde rojo + fondo suave rosa */
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus {
    border-color: var(--tl-naranja);
    background: var(--tl-verde-claro);
    color: var(--tl-naranja);
    box-shadow: var(--tl-shadow-sm);
}
/* Página actual: pill roja sólida */
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--tl-naranja) !important;
    border-color: var(--tl-naranja) !important;
    color: var(--tl-blanco) !important;
    box-shadow: var(--tl-shadow-sm);
}
/* Flechas prev/next: círculo con borde rojo, flecha en rojo */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
    padding: 0;
    font-size: 18px;
    color: var(--tl-naranja);
    border-color: rgba(162, 6, 7, 0.35);
    background: var(--tl-blanco);
}
.woocommerce nav.woocommerce-pagination ul li a.prev:hover,
.woocommerce nav.woocommerce-pagination ul li a.next:hover {
    background: var(--tl-naranja) !important;
    border-color: var(--tl-naranja) !important;
    color: var(--tl-blanco) !important;
}
/* Puntos suspensivos: solo texto, sin pill */
.woocommerce nav.woocommerce-pagination ul li span.dots {
    border: none;
    background: transparent;
    color: var(--tl-texto);
    min-width: auto;
    padding: 0 4px;
}
/* Responsive: no romper en mobile */
@media (max-width: 768px) {
    .woocommerce nav.woocommerce-pagination ul {
        gap: 6px;
    }
    .woocommerce nav.woocommerce-pagination ul li .page-numbers,
    .woocommerce nav.woocommerce-pagination ul li a.page-numbers {
        min-width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* ============================================
   MEGA MENÚ DESKTOP — separación visual de niveles
   ============================================ */

/* Nivel 1: categorías principales dentro del mega menú */
.wd-sub-menu > li > a.woodmart-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: var(--tl-negro);
    padding: 8px 14px;
    border-radius: 10px;
    transition: background .2s, color .2s;
}
.wd-sub-menu > li > a.woodmart-nav-link:hover {
    background: var(--tl-verde-claro);
    color: var(--tl-naranja);
}
/* Chevron para categorías con hijos */
.wd-sub-menu > li.menu-item-has-children > a.woodmart-nav-link::after {
    content: "\203A";
    font-size: 18px;
    font-weight: 400;
    color: var(--tl-texto);
}

/* Nivel 2: lista de subcategorías */
.wd-list {
    padding-inline-start: 20px;
    border-left: 1px solid var(--tl-gris-borde);
    margin-top: 4px;
}
.wd-list-content a {
    color: var(--tl-texto);
    transition: color .2s;
}
.wd-list-content a:hover {
    color: var(--tl-naranja);
}
/* Dot bullet en íconos de nivel 2 */
.wd-list .wd-icon::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--tl-naranja);
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
}

/* ============================================
   FALLBACK: .wd-menu-open (click en desktop)
   ============================================ */
.wd-nav .menu-item.wd-menu-open > .wd-dropdown-menu,
.wd-nav-header .menu-item.wd-menu-open > .wd-dropdown-menu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* ============================================
   DRAWER MÓVIL
   ============================================ */
body.tp-nav-open {
    overflow: hidden;
}

/* Drawer abierto (port define .wd-side-hidden.wd-opened{transform:none};
   esta regla es fallback explícito para navegadores sin :has()) */
.wd-side-hidden.wd-left.wd-opened {
    transform: translate3d(0, 0, 0);
}

/* Heading del drawer */
.mobile-nav .wd-heading {
    padding: 20px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--brdcolor-gray-300);
}
.mobile-nav .wd-heading .title {
    font-weight: 700;
    font-size: 18px;
    color: var(--tl-negro);
    margin: 0;
}
.mobile-nav .wd-heading .close-side-widget a,
.mobile-nav .wd-heading .tp-mobile-nav-close {
    color: var(--tl-naranja);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: color .2s;
}
.mobile-nav .wd-heading .close-side-widget a:hover,
.mobile-nav .wd-heading .tp-mobile-nav-close:hover {
    color: var(--tl-naranja-hover);
}

/* El port oculta .wd-nav-mobile por defecto (solo .wd-active lo muestra).
   Nuestro drawer usa la lista sin esa clase: forzarla visible dentro del drawer. */
.mobile-nav .wd-nav-mobile,
.wd-side-hidden .wd-nav-mobile {
    display: block;
}

/* Links del nav mobile */
.wd-nav-mobile > li > a {
    color: var(--tl-negro) !important;
    font-weight: 500;
    min-height: 50px;
}
.wd-nav-mobile > li > a:hover {
    color: var(--tl-naranja) !important;
    background: var(--tl-verde-claro);
}

/* Nav-opener (chevron) */
.wd-nav-opener {
    color: var(--tl-negro);
}
.wd-nav-opener:hover {
    color: var(--tl-naranja);
}
.mobile-nav .wd-nav-opener.wd-active {
    background: var(--tl-naranja);
    color: #fff;
}

/* Submenú abierto */
.wd-nav-mobile > li.wd-opened > .wd-sub-menu {
    display: block;
}
.wd-nav-mobile > li > .wd-sub-menu {
    padding-inline-start: 20px;
    background: #FBF6F6;
}
.wd-nav-mobile > li > .wd-sub-menu li > a {
    font-size: 14px;
}

/* Overlay */
.tp-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 20, 20, .45);
    z-index: 490;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.tp-nav-overlay.tp-active {
    opacity: 1;
    visibility: visible;
}