:root {
    --primary: #FEB7C1; /* Cherry Blossom - Maestro */
    --coral: #F08080; /* Light Coral */
    --secondary: #210619; /* Midnight Violet */
    --accent: #B01056; /* Cherry Rose */
    --bg-light: #FAF9F6; /* Alabaster / Off-white premium */
    --text-dark: #210619;
    --text-light: rgba(33, 6, 25, 0.7);
    --white: #ffffff;
    --glass: rgba(255, 255, 255, 0.9);
    --transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    --light-pink: #FED7D8; /* Cherry Blossom claro - secundario, medido del manual (reemplaza al azul #2F8790, que era un error del manual) */
    --midnight-violet: #210619;
    --cherry-rose: #B01056;
}

/* Algunos navegadores no aplican `display:none` al atributo `hidden` en
   elementos SVG (solo lo hacen para HTML), así que `view.js` no lograba
   ocultar el ícono inactivo de los botones de buscar/menú/acordeón. Esta
   regla lo fuerza explícitamente. */
svg[hidden] {
    display: none;
}

.pattern-bg {
    background-image: radial-gradient(var(--accent-2) 1px, transparent 1px), radial-gradient(var(--accent-2) 1px, var(--bg-light) 1px);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    opacity: 0.3;
}

/* Trama de fondo */
.floral-pattern {
    background-color: var(--accent);
    background-image: url('THEME_URI/assets/images/fondo.jpg');
    background-size: cover;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2 {
    font-family: 'Strong Regular', 'Strong', serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 2rem;
}

h3, .logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.2rem 0;
    background: var(--white);
    box-shadow: 0 2px 15px rgba(33, 6, 25, 0.05);
    transition: var(--transition);
}

.navbar.scrolled {
    padding: 1rem 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    transition: var(--transition);
}

.logo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--accent);
    transition: var(--transition);
}

.logo-img {
    height: 45px;
    width: auto;
    transition: var(--transition);
}

.navbar.scrolled .logo-img {
    height: 40px;
}

.navbar.scrolled .logo-text {
    color: var(--primary);
}

.navbar.scrolled .logo-icon {
    filter: none;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 3rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--coral);
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--secondary);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.cart-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    color: var(--primary);
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.menu-toggle-btn {
    display: none;
}

.cart-btn:hover {
    transform: scale(1.1);
}

.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--coral);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.search-btn:hover {
    transform: scale(1.1);
}

/* Search Bar */
.search-bar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--white);
    box-shadow: 0 10px 25px rgba(33, 6, 25, 0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.search-bar.open {
    max-height: 130px;
}

.search-bar.open.has-results {
    max-height: 560px;
}

.search-suggestions {
    list-style: none;
    margin: 0 auto;
    padding: 0 0 1rem;
    max-height: 420px;
    overflow-y: auto;
}

.search-suggestions li + li {
    border-top: 1px solid rgba(33, 6, 25, 0.06);
}

.search-suggestions a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.5rem;
    color: var(--secondary);
    text-decoration: none;
    border-radius: 10px;
}

.search-suggestions a:hover,
.search-suggestions a.is-active {
    background: var(--bg-light);
}

.search-suggestions img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--bg-light);
    flex-shrink: 0;
}

.search-suggestions-name {
    flex: 1;
    font-size: 0.95rem;
}

.search-suggestions-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}

.search-suggestions a.search-suggestions-all {
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
}

.search-suggestions-empty {
    padding: 1rem 0.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.search-bar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    color: var(--coral);
}

.search-bar-inner input {
    flex: 1;
    border: 2px solid rgba(33, 6, 25, 0.15);
    border-radius: 50px;
    background: var(--white);
    font-family: inherit;
    font-size: 1rem;
    color: var(--secondary);
    padding: 0.75rem 1.4rem;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.search-bar-inner input:focus,
.search-bar-inner input:focus-visible {
    outline: none !important;
    border-color: var(--coral);
    box-shadow: 0 0 0 4px rgba(240, 128, 128, 0.18);
}

.search-bar-submit {
    background: var(--secondary);
    color: var(--white);
    border: none;
    padding: 0.7rem 1.6rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.search-bar-submit:hover {
    background: var(--accent);
}

@media (max-width: 480px) {
    .search-bar-submit {
        padding: 0.7rem 1.1rem;
    }
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--secondary);
    color: var(--white);
    font-size: 0.6rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Marquee Ticker — Cintillo de Beneficios */
.marquee {
    background: var(--primary); /* --cherry-blossom #FEB7C1 */
    color: var(--midnight-violet);
    padding: 1.2rem 0;
    overflow: hidden;
    position: relative;
    z-index: 10;
    margin-top: 0;
    display: flex;
    white-space: nowrap;
}

.marquee-content {
    display: flex;
    animation: scroll 30s linear infinite;
    gap: 4rem;
    padding-right: 4rem;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--midnight-violet);
}

.marquee-item::after {
    content: '✦';
    color: var(--accent); /* Cherry Rose: antes era el azul */
    font-size: 0.7rem;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .marquee-item {
        font-size: 0.7rem;
        gap: 1rem;
    }
}

/* Categories */
.categories {
    padding: 0;
    /* El rosa va a todo el ancho de la pantalla (antes era un panel con
       esquinas dentro del contenedor); el contenido interno conserva el
       mismo margen del `.container`. */
    background: rgba(254, 183, 193, 0.15);
}

/* El grupo padre es de diseño "constrained" y centra a sus hijos con un
   ancho máximo (margen automático con !important): sin esto la franja rosa
   quedaba ~9px más angosta que la pantalla a cada lado. */
.is-layout-constrained > .categories,
.is-layout-constrained > .products,
.is-layout-constrained > .about-detailed {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Sin franjas crema entre secciones: el margen entre bloques que pone
       WordPress (24px) las separaba. Cada sección lleva su propio fondo
       (rosa, blanco) y se pegan una con otra. */
    margin-block-start: 0 !important;
}

.categories .section-panel-soft {
    background: transparent;
    border-radius: 0;
}

.category-grid {
    display: grid;
    /* auto-fit en vez de un número fijo de columnas: hoy son 4 categorías
       (D9, 100% dinámico), y si el cliente crea o borra una, la grilla se
       acomoda sola en vez de dejar un hueco o una fila coja. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.category-card-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1.1rem 1.1rem 1.8rem;
    border-radius: 28px;
    text-decoration: none;
    background-color: #FFFFFF; /* Crisp White Card */
    border: 1px solid transparent;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(33, 6, 25, 0.02);
}

.category-card-new:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(33, 6, 25, 0.06); /* 6% Midnight Violet shadow */
}

/* Category Specific Themes */
.cat-jabones {
    border-color: rgba(33, 6, 25, 0.20); /* --midnight-violet 20% */
}
.cat-jabones .category-title-new {
    color: var(--secondary);
}
.cat-jabones .category-btn-new {
    background-color: var(--secondary); /* Midnight Violet: identidad de Jabonería */
}

.cat-velas {
    border-color: rgba(240, 128, 128, 0.25); /* --coral 25% */
}
.cat-velas .category-title-new {
    color: var(--secondary);
}
.cat-velas .category-btn-new {
    background-color: var(--coral);
}

.cat-cosmetica {
    border-color: rgba(176, 16, 86, 0.15); /* --cherry-rose 15% */
}
.cat-cosmetica .category-title-new {
    color: var(--secondary);
}
.cat-cosmetica .category-btn-new {
    background-color: var(--accent); /* --cherry-rose */
}

.category-title-new {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    white-space: nowrap;
    font-weight: 600; /* SemiBold */
    margin: 0;
    text-align: center;
    letter-spacing: -0.01em;
    text-transform: none;
    padding: 0 0.5rem;
    margin-top: 1.4rem;
}

.category-desc {
    margin: 0.7rem 0 0;
    padding: 0 1rem;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--secondary);
    opacity: 0.85;
    flex: 1;
}

.category-circle-img {
    width: 100%;
    aspect-ratio: 8 / 7;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    background-color: var(--white);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-card-new:hover .category-circle-img {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.category-circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-card-new:hover .category-circle-img img {
    transform: scale(1.08);
}

.category-btn-new {
    display: inline-block;
    margin-top: 1.4rem;
    padding: 0.8rem 2.2rem;
    border-radius: 50px;
    /* Respaldo: las categorías con tema propio (jabones/velas/cosmetica)
       lo pisan abajo. Cualquier categoría nueva que el cliente cree (D9)
       cae aquí en vez de quedar con el botón blanco-sobre-blanco. */
    background-color: var(--secondary);
    color: var(--white);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-align: center;
}

.category-btn-new::after {
    content: '\203A';
    margin-left: 0.6em;
    font-size: 1.1em;
    line-height: 1;
}

.category-card-new:hover .category-btn-new {
    transform: scale(1.05);
    filter: brightness(0.95);
}

/* About Detailed */
.about-detailed {
    padding: 6rem 0;
    background: var(--white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.about-image img {
    width: 100%;
    border-radius: 0;
    box-shadow: 40px 40px 0 var(--accent);
}

.subtitle {
    display: block;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--secondary);
    letter-spacing: 3px;
    margin-bottom: 1rem;
    font-size: 0.75rem;
}

.about-text-content h2 {
    font-size: clamp(1.9rem, 6.5vw, 3.5rem);
    margin-bottom: 2rem;
    line-height: 1.1;
    text-transform: none;
}

.values-list {
    list-style: none;
    margin: 2.5rem 0;
}

.values-list li {
    margin-bottom: 1.5rem;
    padding-left: 30px;
    position: relative;
}

.values-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--secondary);
}

/* Testimonials */
.testimonials {
    padding: 8rem 0;
    background: var(--bg-light);
    text-align: center;
}

.testimonial-item p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    max-width: 800px;
    margin: 3rem auto 1.5rem;
    color: var(--primary);
}

.newsletter-form {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 2rem auto 0;
}

.newsletter-form input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.97);
    color: var(--secondary);
    font-family: inherit;
    font-weight: 400;
    font-size: 0.9rem;
    outline: none;
}

.newsletter-form input::placeholder {
    color: rgba(33, 6, 25, 0.45); /* --midnight-violet at 45% */
}

/* Hero */
.hero {
    min-height: 0; /* flex:1 controla el alto */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    color: var(--white);
}

/* Antes iba como estilo en línea directo en la plantilla (height:100vh,
   display:flex) — eso partía el <div> entre dos bloques `wp:html`
   distintos (uno abría la etiqueta, el bloque de imagen iba en medio,
   otro la cerraba), que es justo lo que ya había roto el editor de
   carrito/checkout. Ahora es una clase real y el bloque queda
   autocontenido (ver home.html, wp:group con className, sin estilo). */
.thiare-hero-wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('THEME_URI/assets/images/brand/hero-atelier-creacion.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    transform: scale(1.05);
    transition: transform 0.8s ease-out;
}

.hero-content.container {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    max-width: 1250px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.hero-content h1, .hero-content p, .hero-btns {
    max-width: 800px; /* Constrain text width for readability even in wide container */
}

.hero h1 {
    font-family: 'Strong Regular', 'Strong', serif;
    font-size: clamp(2.4rem, 8vw, 5.5rem);
    line-height: 1.05;
    margin-bottom: 1.5rem;
    font-weight: 400;
    color: var(--secondary);
    text-transform: none; /* Soften for hero */
    text-shadow: 0 2px 20px rgba(255, 255, 255, 0.5);
}

.hero h1 span {
    font-style: italic;
    color: var(--accent);
}

.hero p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 2.2vw, 1.2rem);
    margin-bottom: 0;
    color: var(--secondary);
    opacity: 0.85;
    max-width: 620px;
    line-height: 1.7;
    text-shadow: 0 2px 16px rgba(255, 255, 255, 0.4);
}

.hero .btn-outline {
    color: var(--secondary);
    border-color: rgba(33, 6, 25, 0.4);
}

.hero .btn-outline:hover {
    background: rgba(33, 6, 25, 0.08);
    border-color: var(--secondary);
    color: var(--secondary);
}

/* El botón real es el <a> (`.wp-block-button__link`), no el div `.btn-outline`
   — y su regla genérica más abajo lo pinta blanco sobre blanco (pensada para
   fondos oscuros como los CTA). En el hero, sobre foto clara, va oscuro:
   contorno y texto violeta, un velo blanco translúcido para leerse sobre la
   foto, y al pasar el mouse se llena de violeta (espejo del principal,
   que en hover también pasa a violeta). */
.hero .wp-block-button.btn-outline .wp-block-button__link {
    color: var(--secondary);
    background: rgba(255, 255, 255, 0.55);
    border: 2px solid var(--secondary);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hero .wp-block-button.btn-outline .wp-block-button__link:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

.hero .mouse {
    border-color: var(--secondary);
}

.hero .mouse::before {
    background: var(--secondary);
}

.hero-btns {
    display: flex;
    gap: 1.5rem;
    margin-top: 32px;
}

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: var(--transition);
    cursor: pointer;
}

.cat-tab {
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cat-tab.active {
    background: var(--accent); /* --cherry-rose #B01056 */
    color: var(--white);
    border: 1px solid var(--accent);
}

.cat-tab.inactive {
    background: transparent;
    color: var(--midnight-violet);
    border: 1px solid rgba(33, 6, 25, 0.1);
}

.cat-tab.inactive:hover {
    border-color: var(--hover-color, var(--accent));
}

/* Subcategorías: filtro secundario bajo las categorías. Píldoras más
   pequeñas y suaves, para que se lean como subordinadas y no compitan con
   las pestañas de categoría. El activo va en violeta y no en cherry-rose,
   que ya lo usa la categoría de arriba: así hay jerarquía de dos tonos en
   vez de dos píldoras del mismo color. */
.subcat-tab {
    padding: 0.45rem 1.1rem;
    border-radius: 50px;
    border: 1px solid rgba(33, 6, 25, 0.12);
    background: transparent;
    color: var(--text-light);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.subcat-tab:hover {
    border-color: var(--midnight-violet);
    color: var(--midnight-violet);
    background: rgba(33, 6, 25, 0.03);
}

.subcat-tab.active {
    background: var(--midnight-violet);
    border-color: var(--midnight-violet);
    color: var(--white);
}

.subcat-tab.active:hover {
    background: var(--midnight-violet);
    color: var(--white);
}

.btn-primary {
    background: var(--accent);
    color: var(--white);
    border: 2px solid var(--accent);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--midnight-violet);
    border-color: var(--midnight-violet);
    color: var(--white);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 1);
    color: var(--white);
}

/* Products */
.products {
    padding: 4rem 0;
    background: white;
}

/* Las tres "estaciones" (Cosmética, Velas, Jabonería) son categorías de la
   misma colección: van seguidas, con poco espacio entre ellas, en vez de
   cada una como una sección de alto completo. */
.products {
    padding: 0;
}

.products .section-panel {
    padding: 3.5rem 3rem 1rem;
}

.products:not(:has(+ .products)) .section-panel {
    padding-bottom: 3.5rem;
}

/* Panel interior de las secciones (categorías y productos del home).
   Antes iba como inline style, lo cual ganaba sobre los @media de mobile. */
.section-panel {
    background: var(--white);
    border-radius: 24px;
    padding: 4rem 3rem;
}

.section-panel-soft {
    background: rgba(254, 183, 193, 0.15);
}

.section-header {
    text-align: center;
    margin-bottom: 5rem;
}

.section-header h2 {
    font-size: clamp(1.9rem, 6.5vw, 3.5rem);
    color: var(--secondary);
    line-height: 1.1;
    margin-bottom: 2.5rem;
}

/* Heading utilities — replace large inline font-sizes so they scale on mobile */
.heading-xl {
    font-size: clamp(2.3rem, 9vw, 5rem);
}

.heading-lg {
    font-size: clamp(1.9rem, 6.5vw, 3.5rem);
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-row-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 2.5rem;
}

.product-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 10px 20px rgba(0,0,0,0.02);
    border: 1px solid var(--primary); /* Colored border as requested */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(176, 16, 86, 0.1); /* Cherry Rose shadow */
    border-color: var(--accent);
}

.product-card:hover .product-img img {
    transform: scale(1.08);
}

.product-img {
    height: 280px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--transition);
}

/* WooCommerce inyecta un link "Ver carrito" (clase `added_to_cart
   wc-forward`) justo después del botón cada vez que el AJAX de "Añadir
   al carrito" termina — es un mecanismo del propio core, aparte del
   aviso de `wc_add_to_cart_message_html` (ese ya se quita por PHP en
   productos.php). Acá siempre se abre el carrito lateral solo en el
   mismo evento, así que este link es puro texto redundante. */
.added_to_cart.wc-forward {
    display: none !important;
}

.add-to-cart-btn {
    width: 100%;
    margin-top: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    background: var(--coral);
    color: var(--white);
    border: 2px solid var(--coral);
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition);
}

.add-to-cart-btn:hover {
    background: var(--cherry-rose);
    border-color: var(--cherry-rose);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(176, 16, 86, 0.25);
}

.product-info {
    padding: 1.5rem;
    text-align: left;
    background: var(--white);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-info h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--secondary);
    font-family: 'Strong Regular', 'Strong', serif;
    font-weight: 400;
    text-transform: none;
}

.product-info p {
    color: var(--text-light);
    font-size: 0.75rem;
    margin-bottom: 1.2rem;
    font-weight: 500;
}

.price {
    font-weight: 600;
    color: var(--secondary);
    font-size: 1.3rem;
    display: block;
    margin-top: auto; /* Pushes price and button to bottom */
}

/* Values Section */
.values {
    padding: 10rem 0;
    background: var(--primary);
    color: var(--white);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 3rem;
    margin-top: 5rem;
}

.value-item h3 {
    color: var(--accent);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.value-item p {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Hero Isotipo */
.hero-isotipo {
    position: absolute;
    width: 600px;
    height: auto;
    opacity: 0.15; /* Semitransparent */
    z-index: 0; /* Behind the text */
    right: 5%;
    top: 15%;
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes float {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    33% { transform: translate(-30px, -40px) rotate(10deg); }
    66% { transform: translate(20px, 20px) rotate(-5deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.mouse {
    width: 25px;
    height: 40px;
    border: 2px solid var(--white);
    border-radius: 20px;
    position: relative;
}

.mouse::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--white);
    border-radius: 2px;
    animation: scrollMouse 2s infinite;
}

@keyframes scrollMouse {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(15px); }
}

/* CTA Banner */
.cta-banner {
    padding: 12rem 0;
    background-color: var(--primary);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent;
}

.cta-content {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 4rem 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: clamp(1.9rem, 6.5vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 2.5rem;
    color: var(--secondary);
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.6);
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
    color: var(--secondary);
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.4);
}

/* Footer */
.footer {
    padding: 8rem 0 2rem;
    background-color: var(--secondary); /* Midnight Violet */
    color: var(--white);
}

.footer p, .footer a, .footer li, .footer span {
    color: var(--white);
    text-decoration: none;
}

.footer h4 {
    color: var(--primary); /* Cherry Blossom for titles */
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.social-icons a {
    color: var(--primary);
}

.footer a:hover {
    color: var(--primary);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
    align-items: start;
}

.footer-brand h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.footer-links h4, .footer-social h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    color: var(--primary);
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.8rem;
}

.footer-links a {
    text-decoration: none;
    color: var(--white);
    transition: var(--transition);
    font-size: 0.85rem;
}

.footer-links a:hover {
    color: var(--primary);
    padding-left: 5px;
}

.social-icons {
    display: flex;
    gap: 1.5rem;
}

.social-icons a {
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    font-size: 0.8rem;
}

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    .about-image img {
        box-shadow: 20px 20px 0 var(--accent);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 0.75rem;
    }
    .section-panel {
        padding: 2rem 1rem;
        border-radius: 16px;
    }
    .products .section-panel {
        padding: 2rem 1rem 0.5rem;
    }
    .products:not(:has(+ .products)) .section-panel {
        padding-bottom: 2rem;
    }
    .cta-content {
        padding: 1.5rem 1rem;
    }
    .hero-bg {
        background-position: 82% center !important; /* Shifting to make the girl's face visible */
    }
    .hero-content.container {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        padding: 2rem 1.5rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    .nav-links {
        display: none;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .category-grid {
        grid-template-columns: 1fr 1fr;
    }
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Item 2: category cards — drop the fixed height/circle size */
    .categories {
        padding: 0;
    }
    .category-card-new {
        padding: 0.9rem 0.9rem 1.5rem;
    }
    .category-title-new {
        font-size: 1.4rem;
    }

    /* Item 3: product cards — shorter image, tighter info padding */
    .products {
        padding: 0;
    }
    .section-header {
        margin-bottom: 3rem;
    }
    .product-grid {
        gap: 0.8rem 0.6rem;
    }
    .product-img {
        height: 200px;
        padding: 0.5rem;
    }
    .product-info {
        padding: 0.75rem;
    }
    .product-info h3 {
        font-size: 0.95rem;
    }
    .price {
        font-size: 1rem;
    }
    /* El label cabe en una sola línea en la columna angosta de mobile.
       El tamaño escala con el viewport para que también entre a 320px. */
    .add-to-cart-btn {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: clamp(0.56rem, 2.75vw, 0.72rem);
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    /* Item 4: section vertical padding */
    .about-detailed {
        padding: 5rem 0;
    }
    .cta-banner {
        padding: 6rem 0;
    }
    .footer {
        padding: 4rem 0 2rem;
    }
    .section-pilares,
    .vision,
    .process {
        padding: 5rem 0 !important;
    }

    /* Item 5: newsletter form stacks on narrow screens */
    .newsletter-form {
        flex-direction: column;
    }

    /* Item 6: hero CTAs stack on narrow screens */
    .hero-btns {
        flex-direction: column;
    }
    .hero-btns .btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
    .product-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Item 7: checkout/contacto 2-col rows collapse to 1 column */
    .form-row-2,
    .form-row-1-2 {
        grid-template-columns: 1fr;
    }
}
/* Store and Checkout */
.filters .btn {
    transition: all 0.25s ease;
    border-radius: 50px;
    font-size: 0.72rem;
    letter-spacing: 2px;
    font-weight: 400;
    padding: 0.65rem 1.6rem;
    border: 1.5px solid transparent;
}

/* Active pill */
.filters .btn.btn-primary {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

/* Inactive pill */
.filters .btn.btn-outline {
    background: #fff !important;
    color: var(--secondary) !important;
    border-color: rgba(33, 6, 25, 0.12) !important;
}

.filters .btn.btn-outline:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: #fff !important;
}

.cart-items > div:last-child {
    border-bottom: none !important;
}

input:focus {
    outline: none;
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 2px var(--accent);
}

.cart-summary {
    border-top: 4px solid var(--secondary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Cart Drawer */
.cart-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(33, 6, 25, 0.4);
    backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.cart-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: -450px;
    width: 100%;
    max-width: 450px;
    height: 100%;
    background: var(--white);
    z-index: 2001;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}

.cart-drawer.open {
    right: 0;
}

.cart-drawer-header {
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.cart-drawer-header h2 {
    font-size: 1.2rem;
    margin: 0;
}

.close-drawer {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
}

.cart-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

.cart-item-mini {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
}

.cart-item-mini img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.cart-item-info h4 {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
    text-transform: none;
    letter-spacing: 0;
}

/* Control de cantidad. Antes solo se podía eliminar la línea entera. */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.5rem;
    border: 1px solid rgba(33, 6, 25, 0.15);
    border-radius: 50px;
    padding: 0.15rem;
}

.qty-stepper button {
    /* 28px de área táctil: por debajo cuesta acertar en el móvil */
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--secondary);
    transition: background 0.2s ease;
}

.qty-stepper button:hover {
    background: var(--primary);
}

.qty-stepper span {
    min-width: 22px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary);
    font-variant-numeric: tabular-nums;
}

/* Opciones de envío del checkout. Las tarifas las calcula WooCommerce
   con sus reglas reales, en vez de las constantes que había en el código. */
.shipping-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1.5px solid rgba(33, 6, 25, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    font-size: 0.9rem;
}

.shipping-option:hover {
    border-color: var(--primary);
}

.shipping-option.selected {
    border-color: var(--accent);
    background: rgba(254, 183, 193, 0.12);
}

.shipping-option input[type='radio'] {
    accent-color: var(--accent);
    cursor: pointer;
}

/* Panel de la ficha de producto. Antes iba como inline style, que ganaba
   sobre las media queries y dejaba 48px de padding también en móvil. */
.product-detail-panel {
    background-color: #FFFFFF;
    border-radius: 24px;
    padding: 48px;
    border: 1px solid rgba(33, 6, 25, 0.08);
    margin-bottom: 64px;
}

@media (max-width: 768px) {
    .product-detail-panel {
        padding: 1.5rem;
        border-radius: 16px;
        margin-bottom: 2.5rem;
    }
}

/* Fila de /carrito. En mobile la imagen se reduce y el precio pasa
   debajo, para que el stepper y el botón de borrar no se aprieten. */
.cart-row {
    display: flex;
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #eee;
    align-items: center;
}

@media (max-width: 600px) {
    .cart-row {
        gap: 1rem;
        flex-wrap: wrap;
    }
    .cart-row img {
        width: 72px !important;
        height: 72px !important;
    }
}

.cart-error {
    color: var(--accent);
    font-size: 0.8rem;
    text-align: center;
    margin-top: 1rem;
}

.cart-shipping-note {
    font-size: 0.72rem;
    color: var(--text-light);
    text-align: right;
    margin: -0.5rem 0 1rem;
}

.cart-drawer-footer {
    padding: 2rem;
    border-top: 1px solid #eee;
    background: var(--bg-light);
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    font-weight: 400;
    font-size: 1.2rem;
}

/* Animations update */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.product-detail-buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 2;
    padding: 1.4rem 2.5rem;
    border-radius: 50px;
    background: var(--accent); /* --cherry-rose */
    color: var(--white);
    border: 1px solid var(--accent);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-detail-buy-btn:hover {
    background: var(--secondary); /* --midnight-violet */
    border-color: var(--secondary);
    color: var(--white);
}

.section-pilares {
    background-color: rgba(254, 183, 193, 0.15);
}

/* Megamenu */
.nav-item-tienda {
    position: static; /* Expand megamenu to 100% of navbar width */
}

.megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--white);
    box-shadow: 0 20px 40px rgba(33, 6, 25, 0.08);
    border-bottom: 1px solid rgba(33, 6, 25, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 999;
    padding: 3rem 0;
}

.megamenu::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 40px; /* Bridge gap between navbar links and megamenu */
    background: transparent;
}

.nav-item-tienda:hover .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* `.container.megamenu-grid`, no solo `.megamenu-grid`: el div real trae
   las dos clases (`class="container megamenu-grid"`, ya venía así del
   Next.js), y `.navbar .container` (2 clases → misma especificidad) le
   ganaba a un `.megamenu-grid` de una sola clase y forzaba
   `align-items:center`, descuadrando las columnas verticalmente. */
.container.megamenu-grid {
    /* Antes era CSS Grid con `repeat(auto-fit, minmax(...))`: en la
       práctica, con contenido de ancho variable dentro de cada columna
       (títulos de una o dos líneas), `auto-fit` mandaba alguna columna a
       una fila aparte en vez de mantenerlas todas alineadas arriba en
       una sola fila. Flexbox con `flex:1` es más predecible para este
       caso y sigue acomodando cualquier número de categorías (D9). */
    display: flex;
    align-items: flex-start;
    gap: 3rem;
    /* Con muchas categorías o una pantalla baja el megamenú se salía por
       abajo y se cortaba. El scroll va en este contenedor interno y no en
       `.megamenu`: ahí `overflow` recortaría el `::before` que hace de
       puente para el hover. Alto disponible = pantalla − barra (~100px) −
       el padding vertical del megamenú (2 × 3rem). */
    max-height: calc(100vh - 100px - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(33, 6, 25, 0.25) transparent;
}

.megamenu-column {
    display: flex;
    flex: 1 1 0;
    min-width: 180px;
    flex-direction: column;
    align-items: flex-start;
}

.megamenu-category-title {
    font-family: 'Strong Regular', 'Strong', serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--secondary) !important;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    text-decoration: none;
    transition: var(--transition);
    letter-spacing: 1.5px;
}

.megamenu-category-title:hover {
    color: var(--accent) !important;
}

.megamenu-img-wrapper {
    width: 100%;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.megamenu-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.megamenu-column:hover .megamenu-img {
    transform: scale(1.06);
}

.megamenu-subcategories {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.megamenu-subcategories li {
    margin-bottom: 0.8rem;
    border-bottom: 1px solid rgba(33, 6, 25, 0.03);
    padding-bottom: 0.5rem;
}

.megamenu-subcategories a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-decoration: none;
    transition: var(--transition);
    color: var(--secondary) !important;
}

.megamenu-subcategories .sub-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: capitalize;
    color: var(--secondary) !important;
    transition: var(--transition);
}

.megamenu-subcategories .sub-count {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-light) !important;
}

.megamenu-subcategories a:hover .sub-name {
    color: var(--accent) !important;
    padding-left: 4px;
}

/* ==========================================================================
   MOBILE MENU DRAWER & RESPONSIVE CONTROLS
   ========================================================================== */

/* Base Styles (Defined globally, hidden on desktop via min-width) */
.menu-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
    transition: var(--transition);
    padding: 5px;
    margin-left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar.scrolled .menu-toggle-btn,
.navbar.mobile-open .menu-toggle-btn {
    color: var(--primary) !important;
}

.navbar.mobile-open {
    background: var(--white) !important;
    box-shadow: none !important;
}

.navbar.mobile-open .logo-img {
    filter: none !important;
}

.navbar.mobile-open .cart-btn {
    color: var(--primary) !important;
}

.mobile-menu-drawer {
    position: fixed;
    top: 75px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 75px);
    background: var(--white);
    z-index: 998;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow-y: auto;
    padding: 2.5rem 2rem;
    border-top: 1px solid rgba(33, 6, 25, 0.05);
}

.mobile-menu-drawer.open {
    left: 0;
}

.mobile-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.mobile-nav-item > a,
.mobile-menu-accordion-header {
    font-family: 'Strong Regular', 'Strong', serif;
    font-size: 1.8rem;
    color: var(--secondary) !important;
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.mobile-menu-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.mobile-menu-accordion-body.open {
    max-height: 1200px;
    transition: max-height 0.5s ease-in;
}

.mobile-menu-subcategories-list {
    list-style: none;
    padding: 1rem 0;
}

.mobile-link-all {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--accent) !important;
    text-decoration: none;
    display: inline-block;
}

.mobile-category-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary);
    display: block;
    margin-top: 0.5rem;
}

.mobile-subcat-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--secondary) !important;
    text-decoration: none;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(33, 6, 25, 0.03);
}

/* Desktop override: Hide Mobile navigation elements */
@media (min-width: 769px) {
    .menu-toggle-btn {
        display: none !important;
    }
    .mobile-menu-drawer {
        display: none !important;
    }
}

/* Mobile responsive override for Swipeable Pills & Hero positioning */
@media (max-width: 768px) {
    .hero-bg {
        background-position: 82% center !important; /* Center on girl's face on mobile */
    }
    
    .filters {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
        scrollbar-width: none; /* Hide scrollbar Firefox */
        width: 100%;
    }
    
    .filters::-webkit-scrollbar {
        display: none; /* Hide scrollbar Chrome/Safari */
    }
    
    .filters .cat-tab {
        padding: 0.6rem 1.4rem !important;
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
}



/* ─────────────────────────────────────────────────────────────
   Mini Cart de WooCommerce ("Tu Taller") — F2.4
   El carrito lateral usa el bloque real de WooCommerce (AJAX, sin
   recargar), y aquí se le pone la cara del diseño de Thiare encima de
   sus propias clases, en vez de reconstruirlo desde cero. El texto
   "Tu carrito" -> "Tu Taller" se cambia por PHP (ver thiare-tienda.php).
   ───────────────────────────────────────────────────────────── */
.thiare-cart-btn .wc-block-mini-cart__button {
    background: none;
    border: none;
    padding: 0;
    color: var(--secondary);
    cursor: pointer;
}

.wc-block-components-drawer__screen-overlay {
    background: rgba(33, 6, 25, 0.5) !important;
    backdrop-filter: blur(2px);
}

/* El cajón de WooCommerce mide 480px; si solo se limita el contenido
   queda una franja vacía a la derecha. Se limita el cajón completo. */
.wc-block-mini-cart__drawer.wc-block-components-drawer {
    width: 420px;
    max-width: 100%;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__content {
    background: var(--white);
    max-width: none;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
    top: 12px;
    right: 12px;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    color: var(--secondary);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover {
    background: var(--light-pink);
}

.wc-block-mini-cart__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Strong Regular', 'Strong', serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.6rem;
    color: var(--secondary);
    /* WooCommerce deja 16px arriba del título y centra la X a 24px del
       borde: se sube el título para que quede a la misma altura. */
    padding: 7px 4.5rem 1rem 2rem !important;
    line-height: 1.1;
    margin: -16px 0 0 !important;
    border-bottom: 1px solid rgba(33, 6, 25, 0.08);
}

.wc-block-mini-cart__title > * {
    line-height: 1.1;
    margin: 0;
}

.wp-block-woocommerce-mini-cart-title-items-counter-block {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    color: var(--text-light);
}

.wc-block-mini-cart__items {
    padding: 0 2rem;
}

.wc-block-mini-cart-items.wc-block-cart-items {
    width: 100%;
    border-collapse: collapse;
}

.wc-block-cart-items__header {
    display: none; /* encabezado de tabla: redundante junto a las tarjetas */
}

.wc-block-mini-cart-items .wc-block-cart-items__row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(33, 6, 25, 0.06);
}

.wc-block-mini-cart-items .wc-block-cart-item__image img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 12px;
}

.wc-block-mini-cart-items .wc-block-components-product-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--secondary);
    text-decoration: none;
}

.wc-block-mini-cart-items .wc-block-components-product-price,
.wc-block-mini-cart-items .wc-block-components-formatted-money-amount {
    color: var(--secondary);
    font-weight: 400;
}

.wc-block-mini-cart-items .wc-block-components-quantity-selector {
    border-radius: 50px;
    border-color: rgba(33, 6, 25, 0.15);
}

.wc-block-mini-cart-items .wc-block-cart-item__remove-link {
    color: var(--text-light);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    text-decoration: none;
}

.wc-block-mini-cart-items .wc-block-cart-item__remove-link:hover {
    color: var(--accent);
}

.wc-block-mini-cart__footer {
    padding: 1.5rem 2rem 2rem;
    border-top: 1px solid rgba(33, 6, 25, 0.08);
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__label,
.wc-block-mini-cart__footer .wc-block-components-totals-item__value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: var(--secondary);
    font-size: 1rem;
}

.wc-block-mini-cart__footer-actions {
    flex-direction: column;
    gap: 0.8rem;
}

.wc-block-mini-cart__footer-actions .wc-block-components-button {
    width: 100%;
    margin: 0;
    justify-content: center;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: var(--transition);
}

/* "Ver mi carrito": outline oscuro (equivalente a btn-outline sobre fondo claro) */
.wc-block-mini-cart__footer-cart {
    background: transparent !important;
    color: var(--secondary) !important;
    border: 1.5px solid rgba(33, 6, 25, 0.3) !important;
    box-shadow: none !important;
}

/* "Ir a finalizar compra": btn-primary */
.wc-block-mini-cart__footer-checkout {
    background: var(--accent) !important;
    border: 2px solid var(--accent) !important;
    color: var(--white) !important;
    box-shadow: none !important;
}

.wc-block-mini-cart__footer-checkout:hover {
    background: var(--midnight-violet) !important;
    border-color: var(--midnight-violet) !important;
}

.wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__empty-cart-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: var(--secondary);
}

.wc-block-mini-cart__empty-cart-wrapper .wc-block-components-button {
    border-radius: 50px;
    background: var(--midnight-violet) !important;
    border-color: var(--midnight-violet) !important;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Ícono junto al título "Tu Taller" (bolsa), igual que el ShoppingBag
   que Next ponía al lado del <h2> en CartDrawer.tsx. */
.wc-block-mini-cart__title::after {
    content: '';
    width: 18px;
    height: 18px;
    background-color: var(--secondary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Estado vacío: ícono grande, texto suave y un enlace de solo texto en
   vez de un botón relleno (igual que CartDrawer.tsx). */
.wc-block-mini-cart__empty-cart-wrapper {
    text-align: center;
    margin-top: 4rem;
    opacity: 0.7;
}

.wc-block-mini-cart__empty-cart-wrapper::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    background-color: var(--secondary);
    opacity: 0.5;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wc-block-mini-cart__empty-cart-wrapper p {
    font-family: 'Montserrat', sans-serif;
    color: var(--secondary);
}

.wc-block-mini-cart__empty-cart-wrapper .wc-block-components-button {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--secondary) !important;
    text-transform: none !important;
    font-weight: 700 !important;
    text-decoration: underline;
    padding: 0 !important;
    min-height: 0 !important;
}

/* Paginación de la tienda (F4.1): mismas píldoras que .cat-tab, en vez
   del estilo por defecto de paginate_links(). */
.thiare-shop-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 0.8rem;
    border-radius: 50px;
    border: 1px solid rgba(33, 6, 25, 0.1);
    color: var(--midnight-violet);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: var(--transition);
}

.thiare-shop-pagination .page-numbers:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.thiare-shop-pagination .page-numbers.current {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.thiare-shop-pagination .page-numbers.dots {
    border: none;
}

/* WooCommerce muestra el precio unitario bajo el nombre Y otra vez como
   "Total" de la línea (misma cifra con 1 unidad) — Next.js solo mostraba
   el precio unitario ("$X c/u"). Se oculta la columna Total para no
   repetir el número dos veces. */
.wc-block-mini-cart-items .wc-block-cart-item__total {
    display: none;
}

/* El botón de cerrar no tenía foco propio y usaba el anillo azul por
   defecto del navegador. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus-visible {
    outline: none;
    background: var(--light-pink);
    box-shadow: 0 0 0 2px var(--accent);
}

/* ─────────────────────────────────────────────────────────────
   Ficha de producto (F4.4). El selector de variación y el campo de
   cantidad son los de WooCommerce (su JS depende de ellos); encima van
   las pills de presentación y los botones − / + (ficha-producto.php).
   ───────────────────────────────────────────────────────────── */
.thiare-product-titulo {
    font-family: 'Strong Regular', 'Strong', serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    line-height: 1.15;
    margin-bottom: 1rem;
    text-transform: none;
    color: var(--midnight-violet);
}

.thiare-product-main {
    padding-top: 80px;
}

.thiare-product-seccion {
    padding: 2rem 2rem 4rem;
}

.thiare-product-precio {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--secondary);
    font-weight: 600;
}

@media (max-width: 768px) {
    .thiare-product-seccion {
        padding: 1.5rem 1rem 2rem;
    }

    .thiare-product-precio {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    .thiare-product-cta table.variations th.label {
        text-align: center;
    }

    .thiare-pills,
    .thiare-product-cta form.cart,
    .thiare-product-cta .woocommerce-variation-add-to-cart {
        justify-content: center;
    }
}

.thiare-product-resumen {
    margin-bottom: 2rem;
    font-size: 1rem;
    color: var(--secondary);
    opacity: 0.85;
    line-height: 1.8;
    font-weight: 300;
}

.thiare-product-resumen p {
    margin-bottom: 0.8rem;
}

.thiare-product-resumen strong {
    font-weight: 600;
}

.thiare-product-cta form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
}

.thiare-product-cta form.variations_form {
    display: block;
}

.thiare-product-cta table.variations,
.thiare-product-cta table.variations tbody,
.thiare-product-cta table.variations tr,
.thiare-product-cta table.variations th,
.thiare-product-cta table.variations td {
    display: block;
    width: 100%;
    border: 0;
}

.thiare-product-cta table.variations {
    margin-bottom: 1.5rem;
}

.thiare-product-cta table.variations tr + tr {
    margin-top: 1.25rem;
}

.thiare-product-cta table.variations th.label {
    text-align: left;
    padding: 0 0 0.75rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
}

.thiare-product-cta table.variations td.value {
    padding: 0;
}

.thiare-variacion {
    position: relative;
}

.thiare-variacion select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.thiare-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.thiare-pill {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.65rem 1.3rem;
    border-radius: 50px;
    border: 1.5px solid rgba(33, 6, 25, 0.15);
    background: #fff;
    color: var(--midnight-violet);
    cursor: pointer;
    transition: var(--transition);
}

.thiare-pill:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.thiare-pill.is-activa,
.thiare-pill.is-activa:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.thiare-pill:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.thiare-pill:focus-visible,
.thiare-qty-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.thiare-product-cta .reset_variations {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-light);
    text-decoration: underline;
}

.thiare-product-cta .woocommerce-variation {
    margin-bottom: 1rem;
}

.thiare-product-cta .woocommerce-variation-price {
    width: 100%;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--secondary);
}

.thiare-product-cta .woocommerce-variation-availability {
    width: 100%;
    font-size: 0.85rem;
    color: var(--text-light);
}

/* SKU de la variación elegida: WooCommerce ya lo rellena solo por JS
   (`add-to-cart-variation.js`) al escoger una Presentación — no hacía
   falta código propio, solo el estilo (por defecto salía sin ningún
   formato, pegado al resto del texto). */
.thiare-product-cta .woocommerce-variation-sku {
    width: 100%;
    font-size: 0.8rem;
    color: var(--text-light);
}

.thiare-product-cta .woocommerce-variation-add-to-cart {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.thiare-product-cta .quantity {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 0.35rem;
    border: 1.5px solid rgba(33, 6, 25, 0.15);
    border-radius: 50px;
    background: #fff;
}

.thiare-product-cta .quantity .qty {
    width: 2.8rem;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--midnight-violet);
    -moz-appearance: textfield;
    appearance: textfield;
}

.thiare-product-cta .quantity .qty::-webkit-outer-spin-button,
.thiare-product-cta .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.thiare-qty-btn {
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--midnight-violet);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

.thiare-qty-btn:hover {
    background: var(--light-pink);
    color: var(--accent);
}

.thiare-product-cta .single_add_to_cart_button,
.thiare-product-cta button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 1.2rem 2rem;
    border-radius: 50px;
    background: var(--accent);
    color: var(--white);
    border: 1px solid var(--accent);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
}

.thiare-product-cta .single_add_to_cart_button:hover,
.thiare-product-cta button[type="submit"]:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

.thiare-product-cta .single_add_to_cart_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.thiare-product-cta p.stock.out-of-stock {
    width: 100%;
    color: var(--accent);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.85rem;
}

@media (max-width: 480px) {
    .thiare-product-cta .woocommerce-variation-add-to-cart,
    .thiare-product-cta form.cart {
        gap: 0.6rem;
    }

    .thiare-qty-btn {
        width: 2.2rem;
        height: 2.2rem;
    }

    .thiare-product-cta .quantity .qty {
        width: 2.2rem;
    }

    .thiare-product-cta .single_add_to_cart_button,
    .thiare-product-cta button[type="submit"] {
        padding: 1rem 0.75rem;
        font-size: 0.72rem;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }
}

.thiare-product-tabs {
    margin-top: 5rem;
}

.thiare-product-tabs ul.tabs {
    list-style: none;
    display: flex;
    gap: 2rem;
    padding: 0;
    margin: 0 0 2rem;
    border-bottom: 1px solid rgba(33, 6, 25, 0.1);
    overflow-x: auto;
}

.thiare-product-tabs ul.tabs li {
    margin: 0;
}

.thiare-product-tabs ul.tabs li a {
    display: block;
    padding: 0 0 1rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-light);
    text-decoration: none;
    white-space: nowrap;
}

.thiare-product-tabs ul.tabs li.active a,
.thiare-product-tabs ul.tabs li a:hover {
    color: var(--secondary);
    border-bottom-color: var(--accent);
}

.thiare-product-tabs .woocommerce-Tabs-panel {
    max-width: 850px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--secondary);
}

.thiare-product-tabs .woocommerce-Tabs-panel[hidden] {
    display: none;
}

.thiare-product-tabs .woocommerce-Tabs-panel p,
.thiare-product-tabs .woocommerce-Tabs-panel ul,
.thiare-product-tabs .woocommerce-Tabs-panel ol {
    margin-bottom: 1rem;
}

.thiare-product-tabs .woocommerce-Tabs-panel ul,
.thiare-product-tabs .woocommerce-Tabs-panel ol {
    padding-left: 1.5rem;
}

.thiare-product-tabs .woocommerce-Tabs-panel strong {
    font-weight: 600;
}

.thiare-product-tabs .woocommerce-Tabs-panel h2,
.thiare-product-tabs .woocommerce-Tabs-panel h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: none;
    margin: 2rem 0 1rem;
    color: var(--secondary);
}

/* ─────────────────────────────────────────────────────────────
   Carrito y Checkout — páginas completas de WooCommerce (F5.1/F5.2)
   Misma estrategia que el Mini Cart: son los bloques reales de
   WooCommerce (funcionan de verdad), vestidos con la marca. Los campos
   propios del checkout de Thiare (documento, teléfono con indicativo,
   ciudad con buscador) quedan para una siguiente pasada — ver plan F5.2.
   ───────────────────────────────────────────────────────────── */
.thiare-cart-page,
.thiare-checkout-page {
    max-width: 1250px;
}

.thiare-cart-page h1,
.thiare-checkout-page h1 {
    font-family: 'Strong Regular', 'Strong', serif;
}

.thiare-cart-page h1 span,
.thiare-checkout-page h1 span {
    color: var(--accent);
}

/* Encabezados de cada tramo del checkout ("Información de contacto",
   "Dirección de envío"...) y del panel de totales del carrito. */
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wc-block-cart__empty-cart__title {
    font-family: 'Strong Regular', 'Strong', serif;
    font-weight: 400;
    color: var(--midnight-violet);
    text-transform: none;
}

/* Fila de producto (carrito completo): mismas reglas que el Mini Cart,
   sin la columna de precio total repetida. */
.wc-block-cart-items__header {
    display: none;
}

.wc-block-cart-items .wc-block-cart-items__row {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(33, 6, 25, 0.06);
}

.wc-block-cart-items .wc-block-cart-item__image img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
}

.wc-block-cart-items .wc-block-components-product-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: var(--secondary);
}

.wc-block-cart-items .wc-block-cart-item__total {
    display: none;
}

.wc-block-cart-items .wc-block-components-quantity-selector {
    border-radius: 50px;
    border-color: rgba(33, 6, 25, 0.15);
}

.wc-block-cart-items .wc-block-cart-item__remove-link {
    color: var(--text-light);
}

.wc-block-cart-items .wc-block-cart-item__remove-link:hover {
    color: var(--accent);
}

/* Estado vacío: mismo ícono de bolsa que el Mini Cart, en vez de la
   carita triste que trae WooCommerce por defecto. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background-color: var(--secondary);
    opacity: 0.2;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon::after {
    display: none; /* apaga el emoji de carita triste */
}

/* Botones: mismo btn-primary de toda la marca, mismo tamaño que los del
   Mini Cart (antes le faltaba el padding y quedaba más chico que el
   resto — el alto no calzaba con "Ver mi carrito"/"Ir a finalizar
   compra" del carrito lateral). */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background: var(--accent) !important;
    border: 2px solid var(--accent) !important;
    color: var(--white) !important;
    border-radius: 50px !important;
    padding: 1rem 2.5rem !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: none !important;
    height: auto !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: var(--midnight-violet) !important;
    border-color: var(--midnight-violet) !important;
}

/* Campos de texto del checkout: mismo look que el resto del sitio
   (bordes suaves, sin el estilo "Material" con línea inferior). */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-address-form select,
.wc-block-components-combobox-control input {
    border-radius: 8px !important;
    border: 1px solid rgba(33, 6, 25, 0.15) !important;
    font-family: 'Montserrat', sans-serif !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-address-form select:focus {
    border-color: var(--accent) !important;
    box-shadow: none !important;
}

.wc-block-components-radio-control__option-checked {
    border-color: var(--accent) !important;
}

.wc-block-components-radio-control__input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* El bloque de Carrito/Checkout de WooCommerce trae la clase "alignwide"
   de WordPress, que lo hace romper el ancho del contenedor que lo
   envuelve (`.thiare-cart-page`/`.thiare-checkout-page`, ya limitado a
   1250px). Se neutraliza para que se quede dentro, en vez de desbordar
   la página. */
.thiare-cart-page .alignwide,
.thiare-checkout-page .alignwide {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Checkout: solo vendemos en Colombia (un único país posible, sobra el
   selector) y no se usa código postal para el envío por ciudad. */
.wc-block-components-address-form__country,
.wc-block-components-address-form__postcode {
    display: none;
}

/* ─────────────────────────────────────────────────────────────
   Contenido editable con bloques nativos. Hero, Club y CTA de Nosotros
   son bloques Portada (core/cover): la imagen de fondo vive en la
   Biblioteca de medios y se reemplaza desde el editor. Las imágenes
   sueltas son bloques Imagen; sus sombras y formas van por clase (el
   editor invalida cualquier estilo en línea que el bloque no genere).
   ───────────────────────────────────────────────────────────── */
.wp-block-cover.hero {
    min-height: 0;
    padding: 0;
}

.wp-block-cover.hero > .wp-block-cover__inner-container {
    position: static;
    width: 100%;
}

.wp-block-cover.hero .hero-content,
.wp-block-cover.hero .scroll-indicator {
    z-index: 2;
}

.wp-block-cover.cta-banner {
    min-height: 0;
    padding: 12rem 0;
}

.wp-block-cover.cta-banner > .wp-block-cover__inner-container {
    width: 100%;
}

@media (max-width: 768px) {
    .wp-block-cover.cta-banner {
        padding: 6rem 0;
    }
}

.wp-block-image.about-image {
    margin: 0;
}

.wp-block-image.about-image img {
    width: 100%;
    display: block;
}

.wp-block-image.sombra-cereza img {
    box-shadow: 40px 40px 0 var(--cherry-rose);
}

.wp-block-image.sombra-violeta img {
    box-shadow: -40px 40px 0 var(--midnight-violet);
    position: relative;
    z-index: 1;
}

.wp-block-image.imagen-arco img {
    border-radius: 150px 150px 0 0;
    box-shadow: none;
}

.wp-block-image.imagen-contacto {
    margin: 0 0 3rem;
}

.wp-block-image.imagen-contacto img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    box-shadow: -20px 20px 0 var(--secondary);
}

/* Cintillo: un párrafo por beneficio (editable). view.js los duplica en
   el sitio para que la animación sea continua. */
.marquee-content > .marquee-item {
    margin: 0;
    white-space: nowrap;
}

/* Encabezados de sección de la Home */
.section-header.section-header-izq {
    text-align: left;
}

.section-header.section-header-estacion {
    margin-bottom: 3rem;
}

.subtitle.subtitle-explora {
    letter-spacing: 5px;
}

.heading-junto {
    margin-top: 0.5rem;
}

.subtitle.subtitle-estacion {
    color: var(--secondary);
    letter-spacing: 2px;
    font-size: 0.8rem;
    font-weight: 600;
}

.section-header h2.heading-estacion {
    font-family: 'Montserrat', sans-serif; /* la de los nombres de categoría */
    text-transform: uppercase;
    font-weight: 600;
    color: var(--secondary);
    margin-top: 0.5rem;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
}

.subtitle.subtitle-acento {
    color: var(--accent);
}

.wp-block-buttons.botones-centro {
    justify-content: center;
    margin-top: 3.5rem;
}

.wp-block-buttons.botones-separados {
    margin-top: 32px;
}

.wp-block-buttons .wp-block-button.btn-catalogo .wp-block-button__link {
    padding: 1.2rem 4rem;
}

/* Nosotros y Contacto */
.seccion-intro {
    padding-top: 6rem;
    padding-bottom: 6rem;
    text-align: center;
}

.seccion-intro h1 {
    margin-bottom: 2rem;
}

.seccion-intro .intro-texto {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2rem;
}

.seccion-intro.seccion-intro-contacto {
    padding: 6rem 2rem;
}

.seccion-intro-contacto h1 {
    font-family: 'Prata', serif;
    margin-bottom: 1.5rem;
}

.seccion-intro-contacto .intro-texto {
    max-width: 700px;
    color: var(--text-light);
}

.about-detailed.fondo-claro {
    background: var(--bg-light);
}

.section-pilares {
    padding: 10rem 0;
    color: var(--midnight-violet);
}

.pilares-panel {
    background-color: var(--bg-light);
    padding: 5rem 4rem;
    border-radius: 32px;
    box-shadow: 0 20px 40px rgba(33, 6, 25, 0.05);
}

.section-pilares h2,
.thiare-pilar-item h3 {
    color: var(--midnight-violet);
}

.vision {
    padding: 10rem 0;
    background: var(--white);
}

.vision .about-grid {
    grid-template-columns: 1.2fr 0.8fr;
}

.vision .about-text-content h2 {
    margin-bottom: 1.5rem;
}

.vision .about-text-content p:not(.subtitle) {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    color: var(--midnight-violet);
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.process {
    padding: 10rem 0;
    background: var(--bg-light);
}

.process .section-header {
    text-align: center;
}

.process .section-header .subtitle {
    display: block;
}

.thiare-proceso-item h3 {
    color: var(--midnight-violet);
    font-size: 1.8rem;
}

.thiare-proceso-item p:not(.thiare-proceso-badge) {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.contacto-detalle.about-detailed {
    padding: 6rem 0;
}

.contacto-grid.about-grid {
    align-items: start;
    gap: 4rem;
}

.contacto-titulo {
    font-family: 'Prata', serif;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
}

.contacto-dato {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.contacto-dato svg {
    stroke: var(--primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.contacto-dato p {
    margin: 0;
    color: var(--text-dark);
    font-weight: 500;
}

.contacto-dato strong {
    color: var(--primary);
}

.contacto-formulario {
    background: var(--white);
    padding: 4rem 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.contacto-form-titulo {
    font-family: 'Prata', serif;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.contacto-form {
    display: grid;
    gap: 1.5rem;
}

.contacto-form .form-row-2 {
    gap: 1.5rem;
}

.contacto-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--primary);
}

.contacto-form input,
.contacto-form select,
.contacto-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ddd;
    background: var(--bg-light);
    color: var(--text-dark);
    font-family: inherit;
}

.contacto-form textarea {
    resize: vertical;
}

.contacto-form button {
    margin-top: 1rem;
    width: 100%;
}

.thiare-contact-gracias {
    padding: 1rem;
    background: var(--bg-light);
    color: var(--midnight-violet);
}

.thiare-newsletter-gracias {
    margin-top: 1rem;
    font-weight: 600;
}

.wp-block-buttons .wp-block-button.btn-flecha .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wp-block-button.btn-flecha .flecha {
    transition: transform 0.25s ease;
}

.wp-block-button.btn-flecha .wp-block-button__link:hover .flecha {
    transform: translateX(4px);
}

/* Botones dentro de contenido editable (F3.6): el bloque core/button de
   WordPress pone nuestras clases (btn, btn-primary, btn-outline) en el
   <div> contenedor, pero el <a> real adentro sigue con el estilo propio
   de WordPress (píldora oscura por defecto) — se veían dos píldoras
   encimadas. Se anula el contenedor y se repite el estilo real en el
   enlace, que es el que el visitante ve y pulsa. */
.wp-block-button.btn,
.wp-block-button.btn-primary,
.wp-block-button.btn-outline {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-outline .wp-block-button__link {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: var(--transition);
}

.wp-block-button.btn-primary .wp-block-button__link {
    background: var(--accent);
    color: var(--white);
    border: 2px solid var(--accent);
}

.wp-block-button.btn-primary .wp-block-button__link:hover {
    background: var(--midnight-violet);
    border-color: var(--midnight-violet);
    color: var(--white);
}

.wp-block-button.btn-outline .wp-block-button__link {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
}

.wp-block-button.btn-outline .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 1);
    color: var(--white);
}

/* ─────────────────────────────────────────────────────────────
   Nosotros — Pilares y Proceso con insignias circulares (polish del
   sistema de diseño: mismos colores de marca, tarjetas con ícono en
   vez de solo texto).
   ───────────────────────────────────────────────────────────── */
.thiare-pilares-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 3rem;
}

.thiare-pilar-item {
    flex: 1 1 200px;
    max-width: 240px;
    text-align: center;
}

.thiare-icon-badge {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--light-pink);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.3rem;
}

.thiare-proceso-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    margin-top: 4rem;
}

.thiare-proceso-item {
    flex: 1 1 220px;
    max-width: 280px;
    text-align: center;
    position: relative;
}

.thiare-proceso-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    margin: 0 auto 1.3rem;
    position: relative;
    z-index: 1;
}

.thiare-proceso-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    left: calc(50% + 40px);
    width: calc(100% - 20px);
    border-top: 2px dashed var(--light-pink);
    z-index: 0;
}

@media (max-width: 768px) {
    .thiare-proceso-item:not(:last-child)::after {
        display: none;
    }
}

/* Hero, cintillo y banner del Club deben ser de pantalla completa (su
   fondo, no el texto), pero quedaron envueltos en un `wp:group` con
   layout "constrained" (para bloquear la estructura del contenido
   editable — F3.6) que WordPress le pone un ancho máximo a todo hijo
   directo. Se les fuerza a salirse de ese límite con el truco estándar
   de "full-bleed": 100% del viewport, centrado con margen negativo. */
.hero,
.marquee,
.cta-banner {
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* Contenedores de plantillas: antes eran estilos en línea en el grupo
   <main>, que el Editor del sitio marcaba como bloque no válido. */
.tienda-page {
    padding-top: 80px;
    min-height: 80vh;
    padding-bottom: 60px;
    background-color: var(--white);
}

.pagina-woo {
    padding-top: 100px;
    padding-bottom: 6rem;
}

.pagina-contenido {
    padding-top: 100px;
}

.pagina-legal {
    padding-top: 120px;
    padding-bottom: 8rem;
    background-color: var(--wp--preset--color--bg-light);
}

.pagina-legal-caja {
    background-color: var(--wp--preset--color--white);
    border-radius: 24px;
    padding: 4rem 3rem;
    box-shadow: 0 10px 30px rgba(33, 6, 25, 0.03);
}

/* Páginas legales: el texto vive en el contenido de la página (bloques
   Título, Párrafo y Lista), no en la plantilla, para que sea editable. */
.pagina-legal-caja.container {
    max-width: 850px;
}

.legal-contenido {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    color: var(--midnight-violet);
    line-height: 1.8;
}

.legal-contenido > :not(.legal-eyebrow):not(.legal-titulo) {
    opacity: 0.9;
}

.legal-contenido .subtitle.legal-eyebrow {
    letter-spacing: 3px;
    display: block;
    margin-bottom: 1rem;
}

.legal-contenido h1.legal-titulo {
    font-size: 3rem;
    color: var(--midnight-violet);
    margin-bottom: 2rem;
    font-family: 'Strong Regular', 'Strong', serif;
}

.legal-contenido p {
    margin-bottom: 1.5rem;
}

.legal-contenido p.legal-intro {
    font-size: 1.1rem;
}

.legal-contenido h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    text-transform: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.legal-contenido ul {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.legal-contenido p.legal-fecha {
    margin-top: 3rem;
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0.72; /* 0.8 propio × 0.9 del cuerpo, como en el original */
}

.legal-contenido a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
}

/* Pestaña Valoraciones. Las estrellas son caracteres, no la fuente
   "star" de WooCommerce (su hoja clásica no carga en temas de bloques). */
.star-rating {
    position: relative;
    display: inline-block;
    width: 5.6em;
    height: 1.1em;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.1;
    color: transparent;
    vertical-align: middle;
}

.star-rating::before,
.star-rating span::before {
    content: '★★★★★';
    position: absolute;
    top: 0;
    left: 0;
    letter-spacing: 0.12em;
}

.star-rating::before {
    color: rgba(33, 6, 25, 0.15);
}

.star-rating span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    color: transparent;
}

.star-rating span::before {
    color: var(--accent);
}

.thiare-product-tabs #reviews .woocommerce-Reviews-title,
.thiare-product-tabs #reply-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    text-transform: none;
    color: var(--secondary);
    margin: 0 0 1.5rem;
}

.thiare-product-tabs .commentlist {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
}

.thiare-product-tabs .commentlist li.review {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(33, 6, 25, 0.08);
}

.thiare-product-tabs .commentlist .avatar {
    display: none;
}

.thiare-product-tabs .commentlist .meta {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0.4rem 0;
}

.thiare-product-tabs .commentlist .woocommerce-review__author {
    font-weight: 400;
    color: var(--secondary);
}

.thiare-product-tabs .woocommerce-noreviews,
.thiare-product-tabs .woocommerce-verification-required {
    color: var(--text-light);
}

.thiare-product-tabs #review_form_wrapper {
    background: var(--bg-light);
    border-radius: 24px;
    padding: 2rem;
    margin-top: 2rem;
}

.thiare-product-tabs .comment-form p {
    margin-bottom: 1rem;
}

.thiare-product-tabs .comment-form label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
}

.thiare-product-tabs .comment-form input[type="text"],
.thiare-product-tabs .comment-form input[type="email"],
.thiare-product-tabs .comment-form textarea {
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: 1px solid rgba(33, 6, 25, 0.15);
    border-radius: 12px;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--midnight-violet);
}

.thiare-product-tabs .comment-form .comment-form-cookies-consent label {
    display: inline;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.thiare-product-tabs .comment-form .form-submit input[type="submit"] {
    padding: 1rem 2.5rem;
    border: 0;
    border-radius: 50px;
    background: var(--accent);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
}

.thiare-product-tabs .comment-form .form-submit input[type="submit"]:hover {
    background: var(--secondary);
}

.thiare-estrellas-elegir {
    display: flex;
    gap: 0.2rem;
}

.thiare-estrellas-elegir button {
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.8rem;
    line-height: 1;
    color: rgba(33, 6, 25, 0.15);
    cursor: pointer;
    transition: color 0.15s ease;
}

.thiare-estrellas-elegir button.is-activa {
    color: var(--accent);
}

/* ¡Pedido Recibido! — encabezado igual al Next.js y, debajo, el detalle
   que pintan los bloques de confirmación de WooCommerce. */
.pagina-confirmacion {
    padding-top: 100px;
    padding-bottom: 6rem;
}

.confirmacion-hero {
    padding: 6rem 2rem 3rem;
    text-align: center;
}

.confirmacion-icono {
    display: block;
    margin-bottom: 2rem;
}

.confirmacion-titulo {
    margin-bottom: 1.5rem;
}

.confirmacion-texto {
    font-size: 1.2rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.confirmacion-resumen {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    background: var(--bg-light);
    padding: 1.5rem 3rem;
    margin-bottom: 3rem;
    border-radius: 16px;
}

.confirmacion-resumen > div > span {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
}

.confirmacion-resumen strong {
    font-size: 1.1rem;
    color: var(--secondary);
}

.confirmacion-nota {
    color: var(--text-light);
    margin-bottom: 3rem;
}

.confirmacion-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.btn.confirmacion-btn-inicio {
    color: var(--primary);
    border-color: var(--primary);
}

.confirmacion-detalle {
    max-width: 900px;
    background: #fff;
    border: 1px solid rgba(33, 6, 25, 0.08);
    border-radius: 24px;
    padding: 3rem;
}

.confirmacion-detalle:empty {
    display: none;
}

.confirmacion-detalle h3.confirmacion-subtitulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-light);
    margin: 0 0 1rem;
}

.confirmacion-detalle .wc-block-order-confirmation-totals-wrapper,
.confirmacion-detalle .wc-block-order-confirmation-additional-information,
.confirmacion-detalle .confirmacion-direcciones,
.confirmacion-detalle .wc-block-order-confirmation-additional-fields-wrapper {
    margin: 0 0 2.5rem;
}

.confirmacion-detalle > :last-child {
    margin-bottom: 0;
}

.confirmacion-detalle table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--secondary);
}

.confirmacion-detalle table th,
.confirmacion-detalle table td {
    padding: 0.9rem 0;
    border: 0;
    border-bottom: 1px solid rgba(33, 6, 25, 0.08);
    text-align: left;
    background: none;
}

.confirmacion-detalle table td:last-child,
.confirmacion-detalle table th:last-child {
    text-align: right;
}

.confirmacion-detalle table tfoot tr:last-child th,
.confirmacion-detalle table tfoot tr:last-child td {
    font-weight: 400;
    font-size: 1.1rem;
    border-bottom: 0;
}

.confirmacion-detalle .wc-block-components-additional-fields-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: var(--secondary);
}

.confirmacion-detalle .wc-block-components-additional-fields-list dt {
    font-weight: 400;
}

.confirmacion-detalle .wc-block-components-additional-fields-list dd {
    margin: 0;
}

.confirmacion-detalle .woocommerce-customer-details--phone {
    margin: 0.25rem 0 0;
    color: var(--secondary);
}

.confirmacion-detalle address {
    font-style: normal;
    line-height: 1.7;
    color: var(--secondary);
    border: 0;
    padding: 0;
}

.confirmacion-detalle .wc-block-order-confirmation-additional-information h2,
.confirmacion-detalle .wc-bacs-bank-details-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    text-transform: none;
    color: var(--secondary);
    margin: 0 0 1rem;
}

.confirmacion-detalle ul.wc-bacs-bank-details {
    list-style: none;
    padding: 1.25rem 1.5rem;
    margin: 0;
    background: var(--bg-light);
    border-radius: 16px;
}

@media (max-width: 768px) {
    .confirmacion-hero {
        padding: 3rem 1rem 2rem;
    }

    .confirmacion-resumen {
        padding: 1.25rem 1.5rem;
        gap: 1.5rem;
    }

    .confirmacion-detalle {
        padding: 1.5rem;
        margin: 0 1rem;
    }
}

/* Avisos de WooCommerce (agotado, faltan opciones, producto agregado…). */
.thiare-avisos:empty {
    display: none;
}

.thiare-avisos .woocommerce-error,
.thiare-avisos .woocommerce-message,
.thiare-avisos .woocommerce-info {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 1rem 1.5rem;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: var(--secondary);
    background: var(--bg-light);
    border: 1px solid rgba(33, 6, 25, 0.1);
}

.thiare-avisos .woocommerce-error {
    background: #FDEFF3;
    border-color: rgba(176, 16, 86, 0.3);
}

.thiare-avisos .woocommerce-error li {
    margin: 0;
}

.thiare-avisos a {
    color: var(--accent);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   Checkout: Departamento y Ciudad como buscadores (checkout-ciudades.js
   los envuelve; el <select>/input real de WooCommerce queda oculto pero
   sigue siendo el que se valida y se guarda).
   ───────────────────────────────────────────────────────────── */
.thiare-campo-oculto {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

.thiare-buscador {
    position: relative;
    /* Departamento/Ciudad: la etiqueta de WooCommerce ("Departamento",
       "Ciudad") queda flotando arriba del contenedor original; sin este
       espacio, el buscador nacía debajo de la etiqueta y el texto se le
       montaba encima.
       PADDING y no margin: el `<select>` original está oculto con
       `position:absolute` (queda fuera del flujo), así que el buscador
       es el único hijo en flujo normal de `.wc-blocks-components-select__container`
       — un margin-top ahí colapsa con el margin del contenedor padre (no
       hay borde/padding entre los dos que lo evite) y termina empujando
       TODO el campo hacia abajo por igual, label incluida, en vez de
       abrir espacio entre la label y el buscador. padding-top no
       colapsa nunca, así que sí separa a los dos de verdad.

       42px y no 26px: Departamento/Ciudad están en la misma fila flex
       y esa fila alinea a los dos campos por su borde INFERIOR (no por
       el superior). El campo de Departamento
       (`.wc-blocks-components-select__container`, componente Select de
       Woo) reserva espacio invisible DESPUÉS de la caja visible, por si
       hay que mostrar un error — espacio que Ciudad (input de texto
       simple) no reserva. Con los mismos 26px de padding arriba, las
       dos cajas visibles no arrancaban a la misma altura: la de
       Departamento quedaba más arriba que la de Ciudad, aunque las dos
       filas terminaran parejas abajo (se notaba como un escalón).
       Subir el padding de Departamento a 42px — el mismo valor que ya
       usa Ciudad más abajo — compensa ese espacio reservado y las dos
       cajas visibles arrancan en el mismo punto. Verificado con
       getBoundingClientRect(). */
    padding-top: 42px;
}

/* WooCommerce le pone fondo blanco a TODO `.wc-blocks-components-select__container`
   (label + campo, una sola caja) porque en su diseño original el campo
   ocupa toda esa caja. Ahora que el padding-top de arriba le abre aire
   encima al campo real para que quepa la label, esa franja se queda sin
   el borde del campo (el borde lo pinta `.thiare-buscador__input`, más
   abajo) pero SÍ con el fondo blanco de este contenedor — se ve como un
   rectángulo blanco flotando detrás de "Departamento", sin caja
   alrededor. Quitándole el fondo a esta franja se ve la label directo
   sobre el fondo de la página, como Ciudad. */
.wc-blocks-components-select__container {
    background: transparent !important;
}

/* Departamento (componente Select de WooCommerce) y Ciudad (input de
   texto normal) traen cada uno la tipografía y posición de su propia
   label por defecto de Woo — no coinciden entre sí (Ciudad la trae más
   grande y más arriba), así que aunque ya empiezan en el mismo punto se
   veían distintas. Se iguala la de Ciudad a los valores exactos que ya
   trae la de Departamento (13px, la misma posición), para que las dos
   filas se vean con la misma tipografía de verdad, no solo alineadas. */
.wc-block-components-address-form__city > label {
    font-size: 13px !important;
    line-height: 18.2px !important;
    top: 6px !important;
    transform: none !important;
}

.thiare-buscador__input {
    width: 100%;
    padding: 0.9rem 2.5rem 0.9rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(33, 6, 25, 0.15);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--midnight-violet);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23210619' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 16px;
}

.thiare-buscador__input:focus {
    outline: none;
    border-color: var(--accent);
}

.thiare-buscador__input::placeholder {
    color: rgba(33, 6, 25, 0.45);
}

.thiare-buscador.is-deshabilitado .thiare-buscador__input {
    background-color: var(--bg-light);
    cursor: not-allowed;
}

.thiare-buscador__lista {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(33, 6, 25, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(33, 6, 25, 0.12);
}

.thiare-buscador__lista li {
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--midnight-violet);
    cursor: pointer;
}

.thiare-buscador__lista li + li {
    margin-top: 2px;
}

.thiare-buscador__lista li:hover,
.thiare-buscador__lista li.is-resaltada {
    background: var(--light-pink);
}

.thiare-buscador__lista li[aria-selected="true"] {
    font-weight: 400;
    color: var(--accent);
}

.thiare-buscador__lista:empty::after {
    content: 'Sin resultados';
    display: block;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Checkout: resumen del pedido — antes el precio unitario y el subtotal
   salían igual de grandes y en negro, sin jerarquía (no se distinguía
   cuál de los dos números era el total). */
.wc-block-components-order-summary-item {
    align-items: flex-start !important;
    padding: 1.1rem 0 !important;
    border-bottom: 1px solid rgba(33, 6, 25, 0.08);
}

.wc-block-components-order-summary-item__image {
    position: relative;
}

.wc-block-components-order-summary-item__image img {
    border-radius: 12px !important;
}

.wc-block-components-order-summary-item__quantity {
    background-color: var(--secondary) !important;
    color: var(--white) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: var(--midnight-violet) !important;
    text-decoration: none !important;
    text-transform: none !important;
}

.wc-block-components-order-summary-item__individual-prices {
    display: inline-flex !important;
}

.wc-block-components-order-summary-item__individual-prices .wc-block-components-product-price__value {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: var(--text-light) !important;
}

.wc-block-components-order-summary-item__individual-prices::after {
    content: 'c/u';
    margin-left: 0.3em;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-light);
}

.wc-block-components-product-metadata__description p {
    font-size: 0.78rem !important;
    color: var(--text-light) !important;
    margin: 2px 0 0 !important;
}

.wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    color: var(--secondary) !important;
}

/* Checkout: pie del resumen (Subtotal / Envío / Total) — se quedaba con
   el look por defecto de WooCommerce (Roboto del navegador, sin
   jerarquía) mientras que las líneas de producto arriba ya llevaban la
   tipografía de la marca. */
.wc-block-components-totals-item {
    padding: 0.6rem 0 !important;
    font-family: 'Montserrat', sans-serif;
}

.wc-block-components-totals-item__label {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-light);
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-item__value .wc-block-formatted-money-amount {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--midnight-violet);
}

.wc-block-components-shipping-placeholder__value {
    font-weight: 400 !important;
    color: var(--text-light) !important;
}

.wc-block-components-totals-footer-item {
    margin-top: 0.4rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(33, 6, 25, 0.12);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 1rem;
    font-weight: 400;
    color: var(--midnight-violet);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value .wc-block-formatted-money-amount {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--secondary);
}

/* Checkout: Teléfono a ancho completo. WooCommerce lo trae pensado para
   compartir fila con Código postal (ambos a 50%), pero para Colombia el
   código postal no es obligatorio y WooCommerce lo oculta — Teléfono se
   quedaba solo, a medio ancho, con un hueco al lado libre. Ese hueco es
   justo del tamaño de Tipo de documento, así que el flex-wrap los
   emparejaba a ELLOS DOS en la fila de Teléfono, dejando a Número de
   documento solo, abajo (el bug de "no quedan en la misma fila"). */
.wc-block-components-address-form__phone {
    flex-basis: 100% !important;
}

/* Checkout: Tipo y Número de documento en la misma fila (pedido del
   usuario) — la API de campos adicionales de WooCommerce no trae una
   opción para ponerlos lado a lado, así que se hace por CSS. */
.wc-block-components-select-input-thiare-tipo_documento,
.wc-block-components-address-form__thiare-numero_documento {
    /* El contenedor (.wc-block-components-address-form) ya es flex-wrap;
       "inline-block" no sirve aquí porque un hijo flex siempre computa a
       "block" (blockification, ver spec de CSS Display) — lo que hace
       falta es fijarle su propio ancho/flex-basis, no el "display". */
    flex: 0 1 calc(50% - 12px) !important;
    box-sizing: border-box;
    /* Sin margin-right: el contenedor ya trae `column-gap: 12px` (el
       mismo que usa Nombre/Apellidos, Departamento/Ciudad). Un
       margin-right aparte SUMABA al gap y hacía overflow: 350.6px +
       12px de gap + 16px de margin + 350.6px de nuevo superaba el
       ancho del contenedor por ~12px, así que el segundo campo
       terminaba envuelto en una fila aparte (el bug reportado). */
}


/* Botón flotante de WhatsApp (includes/whatsapp.php). Mismo coral de los
   botones principales y magenta al pasar el mouse. z-index 900: por debajo
   del cajón del carrito lateral (WooCommerce lo pone en 9999+) y del
   header (1000), así que al abrir "Tu Taller" el botón queda atrás. */
.thiare-whatsapp {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--coral);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(33, 6, 25, 0.25);
    z-index: 900;
    transition: background 0.3s ease, transform 0.3s ease;
}

.thiare-whatsapp:hover {
    background: var(--cherry-rose);
    transform: translateY(-3px);
}

.thiare-whatsapp__icono {
    width: 30px;
    height: 30px;
    background-color: var(--white);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (max-width: 480px) {
    .thiare-whatsapp {
        right: 1rem;
        bottom: 1rem;
        width: 52px;
        height: 52px;
    }
}

/* Banner del Club: pegado a la sección de arriba, sin la franja crema que
   dejaba el margen de 24px entre bloques que pone WordPress. */
.wp-block-cover.cta-banner {
    margin-block-start: 0 !important;
}


/* Carrusel de productos del Home (bloque thiare/product-grid) */
.thiare-carrusel {
    position: relative;
}

.thiare-carrusel__pista {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Aire arriba/abajo para que la sombra y el hover (translateY) de las
       tarjetas no se recorten con el overflow. */
    padding: 1rem 0.25rem 1.5rem;
    margin: -1rem -0.25rem -1.5rem;
    outline: none;
}

.thiare-carrusel__pista::-webkit-scrollbar {
    display: none;
}

.thiare-carrusel__pista > .product-card {
    flex: 0 0 calc((100% - 6rem) / 4);
    scroll-snap-align: start;
    /* `.product-card` trae `height:100%`, que dentro de un flex de alto
       automático impide que la tarjeta se estire al alto de la más alta
       (cada una quedaba con el alto de su propio contenido). Con `auto`
       el flex las iguala y los botones quedan alineados abajo. */
    height: auto;
}

.thiare-carrusel__flecha {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--white);
    color: var(--secondary);
    font-size: 1.8rem;
    line-height: 1;
    padding-bottom: 4px;
    box-shadow: 0 6px 18px rgba(33, 6, 25, 0.18);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.thiare-carrusel__flecha:hover {
    background: var(--coral);
    color: var(--white);
}

.thiare-carrusel__flecha--prev { left: -1.4rem; }
.thiare-carrusel__flecha--next { right: -1.4rem; }

.thiare-carrusel__flecha[disabled] {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .thiare-carrusel__pista > .product-card {
        flex-basis: calc((100% - 4rem) / 3);
    }
}

@media (max-width: 768px) {
    .thiare-carrusel__pista {
        gap: 1rem;
    }
    .thiare-carrusel__pista > .product-card {
        flex-basis: calc((100% - 1rem) / 2);
    }
    .thiare-carrusel__flecha--prev { left: -0.4rem; }
    .thiare-carrusel__flecha--next { right: -0.4rem; }
}

@media (max-width: 480px) {
    .thiare-carrusel__pista > .product-card {
        flex-basis: 78%;
    }
}

/* Encabezado de estación: título a la izquierda y "Ver toda la categoría"
   al lado, a la derecha, alineado con la base del título. */
.section-header.section-header-estacion {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 2rem;
}

.section-header-estacion > * {
    grid-column: 1;
}

.section-header-estacion > .ver-categoria {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0 0 0.6rem;
}

.ver-categoria a {
    color: var(--accent);
    font-weight: 400;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: border-color 0.25s ease;
}

.ver-categoria a:hover {
    border-bottom-color: var(--accent);
}

@media (max-width: 600px) {
    .section-header.section-header-estacion {
        grid-template-columns: 1fr;
    }
    .section-header-estacion > .ver-categoria {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0.75rem;
    }
}


/* Última tarjeta del carrusel: "Ver todos" */
.product-card.product-card--ver-todos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    text-decoration: none;
    color: var(--secondary);
    background: rgba(254, 183, 193, 0.22);
    border: 1px dashed rgba(176, 16, 86, 0.35);
    transition: background 0.3s ease, transform 0.3s ease;
}

.product-card.product-card--ver-todos:hover {
    background: rgba(254, 183, 193, 0.4);
    transform: translateY(-4px);
}

.ver-todos__icono {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--coral);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: background 0.3s ease;
}

.product-card--ver-todos:hover .ver-todos__icono {
    background: var(--accent);
}

.ver-todos__texto {
    font-size: 1.3rem;
    font-weight: 400;
}

.ver-todos__sub {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Táctil: arrastre horizontal con el dedo sin bloquear el scroll vertical. */
.thiare-carrusel__pista {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
}

/* ─────────────────────────────────────────────────────────────
   Checkout: más contraste (se veía todo plano, cream sobre cream).
   Cada paso pasa a ser una tarjeta blanca con sombra suave; el resumen
   lleva una cabecera rosa; la opción de envío elegida se tiñe de rosa.
   ───────────────────────────────────────────────────────────── */
.thiare-checkout-page .wc-block-components-checkout-step {
    background: var(--white);
    border-radius: 20px;
    padding: 1.5rem 1.75rem 1.75rem;
    margin: 0 0 1.25rem;
    box-shadow: 0 6px 24px rgba(33, 6, 25, 0.06);
    border-left: 4px solid var(--coral);
}

.thiare-checkout-page .wc-block-components-checkout-step__title,
.thiare-checkout-page .wc-block-components-checkout-step__heading {
    color: var(--accent);
}

/* La tarjeta va en el bloque del resumen, no en `.wc-block-components-sidebar`:
   WooCommerce le pone a ese sidebar un padding-left (~27px) como
   separación de la columna del formulario, y con la tarjeta puesta ahí
   esa separación se veía como una franja blanca a la izquierda. */
.thiare-checkout-page .wp-block-woocommerce-checkout-order-summary-block {
    border: none;
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 6px 24px rgba(33, 6, 25, 0.08);
    overflow: hidden;
    padding-bottom: 0.5rem;
}

.thiare-checkout-page .wc-block-components-checkout-order-summary__title {
    background: rgba(254, 183, 193, 0.35);
    margin: 0;
    padding: 1rem 1.25rem;
}

.thiare-checkout-page .wc-block-components-radio-control__option-checked {
    background: rgba(254, 183, 193, 0.22);
}

.thiare-checkout-page .wc-block-components-totals-footer-item {
    background: rgba(254, 183, 193, 0.22);
    border-radius: 12px;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (max-width: 600px) {
    .thiare-checkout-page .wc-block-components-checkout-step {
        padding: 1.1rem 1rem 1.25rem;
    }
}

/* Resumen del pedido: todos los bloques (productos, cupón, subtotal, envío,
   total) llevan el mismo margen lateral que la cabecera (20px). Antes solo
   la cabecera lo tenía y el resto quedaba pegado al borde de la tarjeta. */
.thiare-checkout-page .wc-block-components-sidebar .wc-block-components-totals-wrapper {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.thiare-checkout-page .wc-block-components-sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
    padding-top: 0.75rem;
    padding-bottom: 1rem;
    border-top: none;
}

.thiare-checkout-page .wc-block-components-sidebar .wc-block-components-order-summary {
    padding: 0.25rem 0;
}

.thiare-checkout-page .wc-block-components-sidebar .wc-block-components-totals-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.thiare-checkout-page .wc-block-components-sidebar .wc-block-components-totals-footer-item {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.thiare-checkout-page .wc-block-components-sidebar .wc-block-components-totals-coupon .wc-block-components-panel__button {
    padding-left: 0;
    padding-right: 0;
}

.thiare-checkout-page .wc-block-components-checkout-order-summary__title {
    padding: 1rem 1.25rem !important;
}

.thiare-checkout-page .wc-block-components-checkout-order-summary__title-text {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* ==========================================================================
   Página de "Pedido Recibido" (Detalles nativos de WooCommerce)
   ========================================================================== */

.woocommerce-order-details__title,
.woocommerce-customer-details h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--primary) !important;
    margin-top: 3.5rem !important;
    margin-bottom: 1.5rem !important;
}

.woocommerce-table--order-details {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--bg-light) !important;
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    padding: 1.25rem 1.5rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(33, 6, 25, 0.05) !important;
    text-align: left !important;
    color: var(--text) !important;
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    background: transparent !important;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none !important;
    font-size: 1.2rem !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
}

.woocommerce-customer-details address {
    font-style: normal !important;
    line-height: 2 !important;
    background: var(--bg-light) !important;
    padding: 2rem !important;
    border: none !important;
    border-radius: 16px !important;
    color: var(--text) !important;
    margin-top: 1rem !important;
}

/* Evitar que el tipo/documento se peguen */
.woocommerce-customer-details address p {
    margin-bottom: 0.5rem !important;
}

/* Aumentar separación en las celdas de tabla */
.woocommerce-table--order-details td.product-name {
    font-weight: 600 !important;
}

.categories .heading-lg {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--secondary);
}

@media (max-width: 768px) {
    .seccion-intro.seccion-intro-contacto {
        padding: 3rem 1.5rem 2rem;
    }
    .contacto-detalle.about-detailed {
        padding: 2rem 0 3rem;
    }
}

.product-img {
    padding: 2.5rem !important; /* Force much more padding so image is smaller */
}

@media (max-width: 768px) {
    .product-img {
        padding: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .contacto-grid.about-grid, 
    .contacto-grid.about-grid .wp-block-group {
        text-align: left !important;
    }
    .contacto-dato p {
        text-align: left !important;
    }
}

html, body {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .contacto-formulario {
        padding: 2.5rem 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .vision .about-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .vision, .section-pilares {
        padding: 4rem 0 !important;
    }
    .about-grid {
        display: flex !important;
        flex-direction: column;
    }
    .about-grid > .about-image {
        order: -1;
        margin-bottom: 2rem;
    }
}