/* ============================================
   AIRAVATA SWIMWEAR — MAIN CSS
   Version: 1.0.0
   ============================================
   Índice:
   1.  Variables (Design System)
   2.  Reset & Base
   3.  Typography
   4.  Layout & Container
   5.  Header
   6.  Mobile Menu
   7.  Footer
   8.  Buttons
   9.  Forms
   10. Cookie Banner
   11. WhatsApp Float
   12. WooCommerce Base
   13. Page Templates
   14. Front-page Sections (se añaden por sección)
   15. Utilities
   ============================================ */


/* ============================================
   1. VARIABLES — DESIGN SYSTEM
   ============================================ */

:root {
    /* --- Colores --- */
    --color-black:        #000000;
    --color-white:        #FFFFFF;
    --color-gray-100:     #F5F5F5;
    --color-gray-200:     #E8E8E8;
    --color-gray-300:     #D0D0D0;
    --color-gray-500:     #999999;
    --color-gray-700:     #555555;
    --color-gray-900:     #1A1A1A;

    /* --- Semánticos --- */
    --color-bg:           var(--color-white);
    --color-text:         var(--color-black);
    --color-text-muted:   var(--color-gray-700);
    --color-border:       var(--color-gray-200);

    /* --- Hover / Interacción --- */
    --color-btn-hover:        var(--color-gray-900);   /* Negro suavizado en hover */
    --color-outline-hover-bg: var(--color-black);      /* Outline → relleno negro */
    --color-link-hover:       var(--color-gray-700);   /* Links → gris oscuro */
    --color-nav-hover:        var(--color-gray-700);   /* Nav links */

    /* --- Tipografía --- */
    --font-heading:   'Open Sans', system-ui, sans-serif; /* Títulos h1–h6, nav, botones */
    --font-body:      'Open Sans', system-ui, sans-serif; /* Párrafos, subtítulos, UI */
    --font-primary:   'Open Sans', system-ui, sans-serif;
    --font-secondary: 'Open Sans', system-ui, sans-serif;

    --font-size-xs:   0.75rem;    /* 12px */
    --font-size-sm:   0.875rem;   /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg:   1.125rem;   /* 18px */
    --font-size-xl:   1.25rem;    /* 20px */
    --font-size-2xl:  1.5rem;     /* 24px */
    --font-size-3xl:  2rem;       /* 32px */
    --font-size-4xl:  2.5rem;     /* 40px */
    --font-size-5xl:  3.5rem;     /* 56px */

    /* --- Layout --- */
    --container-width:   1300px;
    --container-padding: 20px;
    --header-height:     80px;
    --header-height-mob: 60px;

    /* --- Spacing --- */
    --section-py:     80px;
    --section-py-mob: 50px;

    /* --- Transiciones --- */
    --transition-fast:   0.15s ease;
    --transition-base:   0.25s ease;
    --transition-slow:   0.4s ease;

    /* --- Bordes --- */
    --radius-sm:   2px;
    --radius-base: 4px;
    --radius-lg:   8px;
    --radius-full: 9999px;
}


/* ============================================
   2. RESET & BASE
   ============================================ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-link-hover);
}

ul,
ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}


/* ============================================
   3. TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-text);
}

p, li, span, label, input, textarea, select, button {
    font-family: var(--font-body);
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p {
    margin-bottom: 1rem;
}

p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }
}


/* ============================================
   4. LAYOUT & CONTAINER
   ============================================ */

.container {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;
}


/* ============================================
   5. HEADER
   ============================================ */

/* ── Top Bar ─────────────────────────────────────────────── */

.header-topbar {
    background-color: var(--color-black);
    height: 36px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

.header-topbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.header-topbar__text {
    text-align: center;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-topbar__right {
    display: flex;
    justify-content: flex-end;
}

/* Selector de región en top bar */
.topbar-region {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-region__btn {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    transition: color var(--transition-fast);
}

.topbar-region__btn:hover,
.topbar-region__btn.is-active {
    color: var(--color-white);
}

.topbar-region__sep {
    color: rgba(255, 255, 255, 0.25);
    font-size: 10px;
}

/* ── Main Header ──────────────────────────────────────────── */

.airavata-header {
    position: fixed;
    top: 36px; /* debajo del topbar */
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--transition-base);
}

.airavata-header.scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* Sin topbar: header sube al top */
body.no-topbar .airavata-header {
    top: 0;
}

/* Padding del body para compensar topbar + header */
body {
    padding-top: calc(36px + var(--header-height));
}

.header-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}

/* ── Logo ─────────────────────────────────────────────────── */

.header-logo {
    flex-shrink: 0;
}

.header-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header-logo .custom-logo {
    height: 48px;
    width: auto;
    display: block;
}

/* Fallback texto si no hay logo */
.header-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    color: var(--color-black);
}

.header-logo__text strong {
    font-family: var(--font-primary);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.header-logo__text span {
    font-family: var(--font-secondary);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: lowercase;
    color: var(--color-gray-700);
}

/* ── Navegación Desktop ───────────────────────────────────── */

.header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-menu {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-menu > li {
    position: relative;
}

.header-menu > li > a {
    display: block;
    padding: 8px 14px;
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-black);
    white-space: nowrap;
    position: relative;
    transition: color var(--transition-fast);
}

/* Línea animada debajo del link */
.header-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 14px;
    right: 14px;
    height: 1px;
    background-color: var(--color-black);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-base);
}

.header-menu > li > a:hover::after,
.header-menu > li.current-menu-item > a::after,
.header-menu > li.current_page_item > a::after,
.header-menu > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
}

/* Flecha dropdown */
.header-menu > li.menu-item-has-children > a::before {
    content: '▾';
    font-size: 9px;
    margin-left: 4px;
    display: inline-block;
    vertical-align: middle;
}

/* Submenú dropdown */
.header-menu .sub-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    list-style: none;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--transition-base),
                transform var(--transition-base),
                visibility var(--transition-base);
    z-index: 100;
}

.header-menu > li:hover > .sub-menu,
.header-menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-menu .sub-menu a {
    display: block;
    padding: 8px 16px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-black);
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
}

.header-menu .sub-menu a:hover {
    background-color: var(--color-gray-100);
}

/* ── Acciones Desktop ─────────────────────────────────────── */

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}

/* Login/Register */
.header-action--login {
    font-family: var(--font-secondary);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-black);
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.header-action--login:hover {
    color: var(--color-gray-700);
}

/* Separador visual */
.header-action__sep {
    width: 1px;
    height: 14px;
    background-color: var(--color-gray-300);
    flex-shrink: 0;
}

/* Iconos (búsqueda, wishlist, carrito) */
.header-action--icon {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-black);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.header-action--icon:hover {
    color: var(--color-gray-700);
}

/* Badge (contador) */
.action-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: 9px;
    font-weight: 700;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Carrito: icono + total */
.header-action--cart {
    gap: 8px;
}

.cart-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.cart-total {
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 400;
    color: var(--color-black);
}

/* Ocultar precio 0 si está vacío */
.cart-total:empty {
    display: none;
}

/* Botones mobile (carrito + hamburguesa) */
.header-mobile-actions {
    display: none;
    align-items: center;
    gap: 12px;
}

.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.menu-toggle:hover {
    color: var(--color-gray-700);
}

/* ── Responsive breakpoints ───────────────────────────────── */

@media (max-width: 1024px) {
    /* Ocultar nav y acciones desktop */
    .header-nav,
    .header-actions {
        display: none;
    }

    /* Mostrar botones móviles — forzar columna 3, fila 1 para alinear a la derecha */
    .header-mobile-actions {
        display: flex;
        grid-column: 3;
        grid-row: 1;
    }

    /* Grid: logo | espacio | hamburguesa */
    .header-container {
        grid-template-columns: auto 1fr auto;
    }

    .airavata-header {
        height: var(--header-height-mob);
    }

    body {
        padding-top: calc(36px + var(--header-height-mob));
    }

    .header-logo .custom-logo {
        height: 38px;
    }
}

@media (max-width: 600px) {
    .header-topbar__text {
        font-size: 9px;
        letter-spacing: 0.06em;
    }

    /* Ocultar texto topbar en móvil muy pequeño, solo mostrar CO|USA */
    .header-topbar__left {
        display: none;
    }

    .header-topbar__inner {
        grid-template-columns: 1fr auto;
    }

    .header-topbar__text {
        text-align: left;
        font-size: 9px;
    }
}

/* ── Search Overlay ───────────────────────────────────────── */

.search-overlay {
    position: fixed;
    top: calc(36px + var(--header-height));
    left: 0;
    right: 0;
    z-index: 999;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 20px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transition-base),
                transform var(--transition-base),
                visibility var(--transition-base);
}

.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-overlay__inner {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-overlay__form {
    flex: 1;
    display: flex;
    align-items: center;
    border-bottom: 1.5px solid var(--color-black);
    padding-bottom: 8px;
}

.search-overlay__input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-secondary);
    font-size: var(--font-size-lg);
    color: var(--color-black);
    background: transparent;
    letter-spacing: 0.04em;
}

.search-overlay__input::placeholder {
    color: var(--color-gray-500);
}

.search-overlay__submit {
    background: none;
    border: none;
    color: var(--color-black);
    cursor: pointer;
    padding: 4px;
    display: flex;
    transition: color var(--transition-fast);
}

.search-overlay__submit:hover {
    color: var(--color-gray-700);
}

.search-overlay__close {
    background: none;
    border: none;
    color: var(--color-gray-500);
    cursor: pointer;
    padding: 4px;
    display: flex;
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

.search-overlay__close:hover {
    color: var(--color-black);
}

@media (max-width: 1024px) {
    .search-overlay {
        top: calc(36px + var(--header-height-mob));
    }
}

/* ── Search Results Panel ─────────────────────────────────── */

.search-overlay__results {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: none;
    border-top: 1px solid #f0f0f0;
}

.search-overlay__results.is-visible {
    display: block;
}

/* Lista de resultados */
.sr-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.sr-item {
    border-bottom: 1px solid #f4f4f4;
}

.sr-item:last-child {
    border-bottom: none;
}

.sr-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, padding-left 0.15s;
    border-radius: 2px;
}

.sr-link:hover {
    background: #f9f9f9;
    padding-left: 8px;
    margin-left: -8px;
    padding-right: 8px;
}

/* Thumbnail */
.sr-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    background: #f9f9f9;
}

.sr-thumb--placeholder {
    background: #f0f0f0;
    display: block;
}

/* Info */
.sr-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sr-title {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: #000;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-price {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #777;
}

.sr-price .woocommerce-Price-amount {
    color: #555;
}

/* Arrow icon */
.sr-arrow {
    color: #ccc;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}

.sr-link:hover .sr-arrow {
    color: #000;
    transform: translateX(3px);
}

/* Footer "Ver todos" */
.sr-footer {
    display: block;
    text-align: center;
    padding: 12px 0 14px;
    border-top: 1px solid #f0f0f0;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}

.sr-footer:hover {
    color: #000;
}

/* Sin resultados */
.sr-empty {
    padding: 20px 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: #999;
    margin: 0;
}

.sr-empty strong {
    color: #555;
}

/* Loading dots */
.sr-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 22px 0;
}

.sr-loading span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #bbb;
    animation: sr-pulse 1.1s ease-in-out infinite;
}

.sr-loading span:nth-child(2) { animation-delay: 0.18s; }
.sr-loading span:nth-child(3) { animation-delay: 0.36s; }

@keyframes sr-pulse {
    0%, 80%, 100% { transform: scale(0.65); opacity: 0.4; }
    40%           { transform: scale(1);    opacity: 1;   }
}


/* ============================================
   6. MOBILE MENU
   ============================================ */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 92vw);
    background-color: var(--color-white);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

/* Header del menú móvil */
.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu__logo a {
    display: flex;
    align-items: center;
}

.mobile-menu__logo .custom-logo {
    height: 36px;
    width: auto;
}

.mobile-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.mobile-menu__close:hover {
    color: var(--color-gray-700);
}

/* Items del menú */
.mobile-menu__items {
    flex: 1;
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.mobile-menu__items li {
    list-style: none;
}

.mobile-menu__items > li > a {
    display: block;
    padding: 14px 24px;
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-black);
    border-bottom: 1px solid var(--color-gray-100);
    transition: color var(--transition-fast),
                background-color var(--transition-fast);
}

.mobile-menu__items > li > a:hover,
.mobile-menu__items > li.current-menu-item > a {
    color: var(--color-gray-700);
    background-color: var(--color-gray-100);
}

/* Submenú móvil */
.mobile-menu__items .sub-menu {
    list-style: none;
    padding: 0;
    background-color: var(--color-gray-100);
}

.mobile-menu__items .sub-menu a {
    display: block;
    padding: 10px 32px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-200);
    transition: color var(--transition-fast);
}

.mobile-menu__items .sub-menu a:hover {
    color: var(--color-black);
}

/* Footer del menú móvil */
.mobile-menu__footer {
    padding: 20px 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-menu__account {
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-black);
    transition: color var(--transition-fast);
}

.mobile-menu__account:hover {
    color: var(--color-gray-700);
}

/* Selector región móvil */
.mobile-menu__region {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-menu__region-btn {
    font-size: 13px;
    color: var(--color-gray-700);
    transition: color var(--transition-fast);
    padding: 4px 0;
}

.mobile-menu__region-btn:hover,
.mobile-menu__region-btn.is-active {
    color: var(--color-black);
}


/* ============================================
   7. FOOTER
   ============================================ */

.site-footer {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 60px 0 0;
}

/* ── Grid principal ──────────────────────────────────────── */
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.4fr 1.2fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    align-items: start;
}

/* ── Columna 1: Marca ────────────────────────────────────── */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-brand__logo img,
.footer-brand__logo .custom-logo,
.footer-brand__logo .footer-logo-img {
    height: 52px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1); /* Logo negro → blanco sobre fondo negro */
}

.footer-brand__logo--text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    text-decoration: none;
}

.footer-brand__name {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
}

.footer-brand__sub {
    font-family: var(--font-secondary);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: var(--color-white);
}

.footer-brand__tagline {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    line-height: 1.6;
    margin: 0;
    max-width: 280px;
    text-align: center;
}

/* ── Títulos de columna ──────────────────────────────────── */
.footer-col__title {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-white);
    margin: 0 0 16px;
}

/* ── Columna 2: Nav ──────────────────────────────────────── */
.footer-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-nav__list li {
    list-style: none;
}

.footer-nav__list a {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    transition: color var(--transition-fast);
    letter-spacing: 0.03em;
}

.footer-nav__list a:hover,
.footer-nav__list .current-menu-item a {
    color: var(--color-white);
}

.footer-nav__list .current-menu-item a {
    font-weight: 600;
}

/* ── Columna 3: Contacto ─────────────────────────────────── */
.footer-contact__list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-contact__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--font-size-sm);
    color: var(--color-white);
    list-style: none;
}

.footer-contact__icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-white);
}

.footer-contact__item a {
    color: var(--color-white);
    transition: color var(--transition-fast);
}

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

/* Newsletter */
.footer-newsletter .footer-col__title {
    margin-top: 4px;
}

.footer-newsletter__form {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Campo nombre (fila completa) */
.footer-newsletter__field {
    border: 1px solid var(--color-white);
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

/* Fila email + botón */
.footer-newsletter__row {
    display: flex;
    border: 1px solid var(--color-white);
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.footer-newsletter__input {
    flex: 1;
    width: 100%;
    padding: 10px 14px;
    font-size: var(--font-size-sm);
    font-family: var(--font-secondary);
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-white);
    min-width: 0;
}

.footer-newsletter__input::placeholder {
    color: var(--color-gray-500);
}

.footer-newsletter__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background-color: var(--color-white);
    color: var(--color-black);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--transition-fast);
}

.footer-newsletter__btn:hover {
    background-color: var(--color-gray-300);
}

.footer-newsletter__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mensaje de éxito */
.footer-newsletter__success {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    padding: 10px 0;
    line-height: 1.5;
}

/* Mensaje de error */
.newsletter-error {
    font-size: var(--font-size-xs);
    color: #ff6b6b;
    margin: 0;
}

/* ── Columna 4: Social + Políticas + Pagos ───────────────── */
.footer-extra {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Social icons */
.footer-social__icons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-social__icon {
    color: var(--color-white);
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: flex;
}

.footer-social__icon:hover {
    color: var(--color-gray-500);
    transform: translateY(-2px);
}

/* Políticas */
.footer-policies__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-policies__list li {
    list-style: none;
}

.footer-policies__list a {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    transition: color var(--transition-fast);
}

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

/* Métodos de pago */
.footer-payments__icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.payment-icon {
    width: 48px;
    height: 30px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ── Footer Bottom ───────────────────────────────────────── */
.footer-bottom {
    background-color: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
}

.footer-bottom__copy {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .footer-brand__tagline {
        max-width: 100%;
        text-align: left;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom__inner {
        padding: 14px var(--container-padding);
        text-align: center;
    }
}


/* ============================================
   8. BUTTONS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease,
                transform 0.25s ease,
                box-shadow 0.25s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ── Negro (default para todos) ─── */
.btn-primary,
.btn-dark,
.btn-white,
.btn-outline-white {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.btn-primary:hover,
.btn-dark:hover,
.btn-white:hover,
.btn-outline-white:hover {
    background-color: #1f1f1f;
    border-color: #1f1f1f;
    color: var(--color-white);
}

/* ── Outline negro (opcional) ─── */
.btn-outline {
    background-color: transparent;
    color: var(--color-black);
    border-color: var(--color-black);
}

.btn-outline:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}


/* ============================================
   9. FORMS
   ============================================ */

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.form-field label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text);
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
    color: var(--color-text);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
    outline: none;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: var(--color-black);
}

.form-field textarea {
    resize: vertical;
    min-height: 120px;
}


/* ============================================
   10. COOKIE BANNER
   ============================================ */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 16px var(--container-padding);
    border-top: 1px solid rgba(255,255,255,0.1);
}

.cookie-banner__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-banner__text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-300);
    margin: 0;
}

.cookie-banner__link {
    color: var(--color-white);
    text-decoration: underline;
    margin-left: 6px;
}

.cookie-banner__btn {
    background-color: var(--color-white);
    color: var(--color-black);
    border: none;
    padding: 10px 24px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
}

.cookie-banner__btn:hover {
    background-color: var(--color-gray-200);
}


/* ============================================
   11. WHATSAPP FLOAT
   ============================================ */

.wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background-color: #25D366;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.wa-float:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.28);
    color: var(--color-white);
}

.wa-float__icon {
    width: 28px;
    height: 28px;
}

.wa-float--with-text {
    width: auto;
    padding: 0 20px;
    gap: 10px;
    border-radius: var(--radius-full);
}

.wa-float__text {
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
}


/* ============================================
   12. WOOCOMMERCE BASE
   ============================================ */

/* Reset WooCommerce defaults que interfieren con el diseño */
.woocommerce ul.products,
.woocommerce-page ul.products {
    margin: 0 !important;
    padding: 0 !important;
}

/* Evitar que WooCommerce añada fondos grises a los productos */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products article.product,
.woocommerce-page ul.products article.product {
    background: var(--color-white) !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}

/* Quitar el fondo gris del cuerpo en páginas de tienda */
.woo-shop-page {
    background: var(--color-white);
}


/* ============================================
   13. PAGE TEMPLATES
   ============================================ */

/* Page Simple (Políticas, Devoluciones, Privacidad) */
.page-simple {
    padding: var(--section-py) 0;
}

.page-simple .page-title {
    font-size: var(--font-size-3xl);
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.page-simple .page-content {
    max-width: 800px;
}

.page-simple .page-content h2,
.page-simple .page-content h3 {
    margin-top: 32px;
    margin-bottom: 12px;
}

.page-simple .page-content p,
.page-simple .page-content li {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.8;
}

.page-simple .page-content ul,
.page-simple .page-content ol {
    padding-left: 20px;
    margin-bottom: 16px;
    list-style: disc;
}

/* Page Contacto */
.page-contacto {
    padding: var(--section-py) 0;
}

/* Page Guia de Tallas */
.page-guia-tallas {
    padding: var(--section-py) 0;
}

/* Page Nosotros */
.page-nosotros {
    /* PENDIENTE: diseño */
}

/* Page Custom Made */
.page-custom-made {
    /* PENDIENTE: diseño */
}


/* ============================================
   14. FRONT-PAGE SECTIONS
   ============================================ */

/* ── Hero Slider ─────────────────────────────────────────── */

.hero-slider {
    position: relative;
    width: 100%;
    height: calc(100vh - 36px - var(--header-height));
    min-height: 560px;
    overflow: hidden;
    background-color: var(--color-black);
}

/* Slide */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
    pointer-events: none;
}

.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Imagen de fondo */
.hero-slide__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.03);
    transition: transform 6s ease-out;
}

.hero-slide.is-active .hero-slide__bg {
    transform: scale(1);
}

/* Overlay oscuro */
.hero-slide__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-black);
}

/* Contenido centrado */
.hero-slide__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 var(--container-padding);
    gap: 20px;
}

.hero-slide__title {
    font-family: var(--font-primary);
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
    margin: 0;
    max-width: 800px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.hero-slide__subtitle {
    font-family: var(--font-secondary);
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    font-weight: 400;
    color: var(--color-white);
    margin: 0;
    max-width: 620px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.05em;
    opacity: 0.95;
}

.hero-slide__btn {
    margin-top: 8px;
    min-width: 160px;
}

/* ── Flechas de navegación ───────────────────────────────── */
.hero-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    backdrop-filter: blur(4px);
}

.hero-slider__arrow:hover {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.7);
}

.hero-slider__arrow--prev { left: 20px; }
.hero-slider__arrow--next { right: 20px; }

/* ── Dots ────────────────────────────────────────────────── */
.hero-slider__dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
    align-items: center;
}

.hero-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.hero-slider__dot.is-active {
    background: var(--color-white);
    transform: scale(1.4);
}

.hero-slider__dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-slider {
        height: calc(100vh - 36px - var(--header-height-mob));
    }
}

@media (max-width: 600px) {
    .hero-slider {
        min-height: 480px;
    }

    .hero-slider__arrow {
        width: 38px;
        height: 38px;
    }

    .hero-slider__arrow--prev { left: 10px; }
    .hero-slider__arrow--next { right: 10px; }
}


/* ============================================
   15. FAVORITOS POR UNA RAZÓN
   ============================================ */

.favoritos-section {
    padding: 80px 0;
    background: var(--color-white);
}

.favoritos-section__title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 400;
    text-align: center;
    color: var(--color-dark);
    margin: 0 0 48px;
    letter-spacing: 0.01em;
}

.favoritos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.favoritos-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.favoritos-card__img-wrap {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-gray-100);
    margin-bottom: 14px;
}

.favoritos-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.favoritos-card__link:hover .favoritos-card__img {
    transform: scale(1.04);
}

.favoritos-card__info {
    text-align: center;
}

.favoritos-card__name {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 6px;
    letter-spacing: 0.02em;
}

.favoritos-card__price {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: 0;
}

.favoritos-card__price .woocommerce-Price-amount {
    color: var(--color-gray-600);
}

@media (max-width: 900px) {
    .favoritos-section {
        padding: 60px 0;
    }

    .favoritos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .favoritos-section__title {
        margin-bottom: 36px;
    }
}

@media (max-width: 480px) {
    .favoritos-section {
        padding: 48px 0;
    }

    .favoritos-grid {
        gap: 12px;
    }
}


/* ============================================
   16. CUSTOM MADE CTA
   ============================================ */

.cm-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 580px;
    max-width: var(--container-width);
    margin: var(--section-py) auto;
    padding: 0 var(--container-padding);
}

/* ── Columna imagen ─── */
.cm-section__image-col {
    overflow: hidden;
    background: var(--color-gray-100);
}

.cm-section__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.cm-section:hover .cm-section__img {
    transform: scale(1.03);
}

/* ── Columna contenido ─── */
.cm-section__content-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
    background: var(--color-white);
}

.cm-section__inner {
    max-width: 480px;
}

.cm-section__title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.8vw, 2.5rem);
    font-weight: 400;
    color: var(--color-dark);
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.cm-section__divider {
    width: 40px;
    height: 2px;
    background: var(--color-dark);
    border: none;
    margin: 0 0 14px;
}

.cm-section__text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-gray-600);
    line-height: 1.75;
    margin: 0 0 24px;
}

.cm-section__btn {
    display: inline-block;
}

/* ── Responsive ─── */
@media (max-width: 900px) {
    .cm-section {
        grid-template-columns: 1fr;
        min-height: auto;
        margin-top: var(--section-py-mob);
        margin-bottom: var(--section-py-mob);
    }

    .cm-section__image-col {
        min-height: 320px;
    }

    .cm-section__content-col {
        padding: 56px 32px;
        justify-content: flex-start;
    }

    .cm-section__inner {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .cm-section__content-col {
        padding: 40px 24px;
    }
}


/* ============================================
   17. INSTAGRAM FEED (manual)
   ============================================ */

.ig-section {
    padding: 80px 0;
    background: var(--color-white);
}

.ig-section__title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 400;
    text-align: center;
    color: var(--color-dark);
    margin: 0 0 40px;
    letter-spacing: 0.01em;
}

.ig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

/* ── Card ── */
.ig-card {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
}

.ig-card__img-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-gray-100);
}

.ig-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}

.ig-card:hover .ig-card__img {
    transform: scale(1.07);
}

/* ── Overlay en hover ── */
.ig-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.ig-card:hover .ig-card__overlay {
    opacity: 1;
}

/* ── Botón CTA ── */
.ig-section__footer {
    text-align: center;
    margin-top: 44px;
}

.ig-section__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .ig-section {
        padding: 60px 0;
    }

    .ig-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }
}

@media (max-width: 600px) {
    .ig-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }
}


/* ============================================
   18. GOOGLE REVIEWS
   ============================================ */

.gr-section {
    padding: 80px 0;
    background: var(--color-white);
}

/* ── Header ── */
.gr-header {
    text-align: center;
    margin-bottom: 52px;
}

.gr-header__subtitle {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #888;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.gr-header__label {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--color-dark);
    letter-spacing: 0.04em;
    margin: 0 0 10px;
}

/* Stars (layered fill trick) */
.gr-stars {
    position: relative;
    display: inline-block;
    line-height: 1;
    margin-bottom: 6px;
}

.gr-stars__bg,
.gr-stars__fill {
    font-size: 2rem;
    letter-spacing: 2px;
    line-height: 1;
}

.gr-stars__bg {
    color: #e0e0e0;
}

.gr-stars__fill {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #f4b400;
}

.gr-header__stars {
    display: block;
    text-align: center;
}

.gr-header__count {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #666;
    margin: 4px 0 16px;
}

.gr-google-logo {
    display: inline-block;
    opacity: 0.85;
}

/* ── Carousel wrapper ── */
.gr-carousel {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gr-viewport {
    flex: 1;
    overflow: hidden;
}

.gr-track {
    display: flex;
    gap: 20px;
    transition: transform 0.45s ease;
    will-change: transform;
}

/* ── Nav buttons ── */
.gr-nav {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.gr-nav:hover:not(:disabled) {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: #fff;
}

.gr-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ── Card ── */
.gr-card {
    flex: 0 0 calc((100% - 40px) / 3);
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gr-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gr-card__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}

.gr-card__meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gr-card__name {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-card__date {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #999;
}

.gr-card__g-icon {
    flex-shrink: 0;
}

/* Stars row en card */
.gr-card__stars {
    display: flex;
    align-items: center;
    gap: 1px;
    font-size: 1rem;
    line-height: 1;
}

.gr-card__star--on  { color: #f4b400; }
.gr-card__star--off { color: #ddd; }

.gr-card__verified {
    margin-left: 4px;
}

/* Texto de la reseña */
.gr-card__text-wrap {
    flex: 1;
}

.gr-card__text {
    font-family: var(--font-body);
    font-size: 0.83rem;
    line-height: 1.65;
    color: #444;
    margin: 0;
}

.gr-card__read-more {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: #888;
    text-decoration: none;
    display: inline-block;
    margin-top: 4px;
}

.gr-card__read-more:hover {
    color: var(--color-dark);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .gr-card {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

@media (max-width: 640px) {
    .gr-section {
        padding: 60px 0;
    }

    .gr-card {
        flex: 0 0 100%;
    }

    .gr-nav {
        width: 36px;
        height: 36px;
    }
}

/* ============================================
   19. CUSTOM MADE PAGE
   ============================================ */

/* ── Hero ── */
.cm-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 450px;
}

.cm-hero__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.cm-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.cm-hero__slide--active {
    opacity: 1;
    pointer-events: auto;
}

.cm-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.cm-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
}

.cm-hero__title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 300;
    letter-spacing: 0.22em;
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 0 20px;
    text-transform: uppercase;
}

/* ── Dots ── */
.cm-hero__dots {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.cm-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.cm-hero__dot--active {
    background: #fff;
    transform: scale(1.25);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .cm-hero {
        height: 360px;
    }
}

@media (max-width: 768px) {
    .cm-hero {
        height: 260px;
    }

    .cm-hero__title {
        letter-spacing: 0.14em;
    }
}

@media (max-width: 480px) {
    .cm-hero {
        height: 200px;
    }
}

/* ── Intro ── */

.cm-intro {
    padding: 72px 0 60px;
}

.cm-intro__inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.cm-intro__title {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--color-dark);
    text-transform: uppercase;
    margin: 0 0 20px;
}

.cm-intro__content {
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.8;
    color: #555;
}

.cm-intro__content p {
    margin: 0 0 14px;
}

.cm-intro__content p:last-child {
    margin-bottom: 0;
}

/* ── Proceso (pasos) ── */

.cm-proceso {
    padding: 48px 0 72px;
    background: var(--color-white);
}

.cm-proceso__title {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--color-dark);
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 32px;
}

.cm-proceso__steps {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 960px;
    margin: 0 auto;
}

/* ── Paso con imagen ── */
.cm-proceso__step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

/* Imagen a la derecha */
.cm-proceso__step--img-right .cm-proceso__img-col {
    order: 2;
}

.cm-proceso__step--img-right .cm-proceso__text-col {
    order: 1;
}

/* Paso sin imagen — texto centrado */
.cm-proceso__step--center {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.cm-proceso__img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.cm-proceso__step-num {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #000;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.cm-proceso__step-title {
    font-family: var(--font-heading);
    font-size: clamp(0.95rem, 1.6vw, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-dark);
    text-transform: uppercase;
    margin: 0 0 14px;
}

.cm-proceso__step-desc {
    font-family: var(--font-body);
    font-size: 0.87rem;
    line-height: 1.75;
    color: #555;
    margin: 0 0 20px;
}

.cm-proceso__step-btn {
    display: inline-flex;
    align-items: center;
}

/* ── Formulario de solicitud ── */

.cm-formulario {
    padding: 80px 0;
    background: #f7f7f7;
}

.cm-formulario__inner {
    max-width: 640px;
    margin: 0 auto;
}

.cm-formulario__title {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-dark);
    text-align: center;
    margin: 0 0 10px;
}

.cm-formulario__subtitle {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: #888;
    text-align: center;
    margin: 0 0 20px;
}

.cm-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cm-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cm-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cm-form__label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #666;
}

.cm-form__optional {
    font-weight: 400;
    color: #aaa;
    text-transform: none;
    letter-spacing: 0;
}

.cm-form__input,
.cm-form__textarea {
    font-family: var(--font-body);
    font-size: 0.88rem;
    padding: 11px 14px;
    border: 1px solid #ddd;
    background: #fff;
    color: #000;
    border-radius: 0;
    width: 100%;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.cm-form__input:focus,
.cm-form__textarea:focus {
    outline: none;
    border-color: #000;
}

.cm-form__textarea {
    min-height: 130px;
    resize: vertical;
}

/* File input */
.cm-form__file-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cm-form__file-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid #ddd;
    background: #fff;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #333;
    cursor: pointer;
    transition: border-color 0.2s;
    white-space: nowrap;
}

.cm-form__file-btn:hover {
    border-color: #000;
}

.cm-form__file-name {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: #999;
}

.cm-form__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.cm-form__submit {
    width: 100%;
    padding: 15px;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
}

.cm-form__error {
    display: none;
    background: #fff5f5;
    border: 1px solid #f5c6c6;
    color: #c0392b;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    border-radius: 2px;
}

.cm-form__error.is-visible {
    display: block;
}

.cm-form__success {
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid #ddd;
}

.cm-form__success p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

/* ── Responsive Custom Made page ── */
@media (max-width: 768px) {
    .cm-proceso__step {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cm-proceso__step--img-right .cm-proceso__img-col {
        order: 1;
    }

    .cm-proceso__step--img-right .cm-proceso__text-col {
        order: 2;
    }

    .cm-proceso__img {
        height: 240px;
    }

    .cm-form__row {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   21. TESTIMONIOS — Custom Made
   ============================================ */

.cm-testimonios {
    padding: var(--section-py) 0;
    background: #f8f8f8;
}

/* ── Header ── */
.cm-testimonios__header {
    text-align: center;
    margin-bottom: 52px;
}

.cm-testimonios__title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    color: var(--color-black);
    letter-spacing: -0.01em;
    margin: 0;
}

/* ── Carousel layout: flechas a los lados ── */
.cm-testimonios__carousel {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cm-testimonios__overflow {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.cm-testimonios__track {
    display: flex;
    gap: 24px;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* ── Cards ── */
.cm-testimonios__card {
    flex: 0 0 calc((100% - 48px) / 3);
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 40px 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.25s, transform 0.25s;
}

.cm-testimonios__card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
    transform: translateY(-3px);
}

@media (max-width: 900px) {
    .cm-testimonios__card {
        flex: 0 0 calc((100% - 24px) / 2);
    }
}

@media (max-width: 580px) {
    .cm-testimonios__card {
        flex: 0 0 100%;
        padding: 32px 22px 26px;
    }
}

/* ── Avatar / Photo ── */
.cm-testimonios__avatar-wrap {
    margin-bottom: 18px;
}

.cm-testimonios__photo {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #000;
    display: block;
}

.cm-testimonios__avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.3rem;
    color: #fff;
    text-transform: uppercase;
}

/* ── Author info ── */
.cm-testimonios__author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
}

.cm-testimonios__name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: #000;
    letter-spacing: 0.01em;
}

.cm-testimonios__tag {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: #777;
    line-height: 1.4;
}

.cm-testimonios__pais {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #aaa;
    line-height: 1.4;
}

/* ── Text ── */
.cm-testimonios__text {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.8;
    color: #555;
    font-style: italic;
    margin: 0 0 20px;
    flex: 1;
}

/* ── Stars ── */
.cm-testimonios__stars {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.cm-testimonios__stars svg {
    width: 13px;
    height: 13px;
}

/* ── Nav arrows (sides) ── */
.cm-testimonios__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #fff;
    color: #000;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cm-testimonios__nav:hover:not(:disabled) {
    background: #000;
    color: #fff;
    border-color: #000;
}

.cm-testimonios__nav:disabled {
    opacity: 0.2;
    cursor: default;
}

/* ── Dots ── */
.cm-testimonios__dots-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.cm-testimonios__dots {
    display: flex;
    gap: 8px;
}

.cm-testimonios__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.cm-testimonios__dot.is-active {
    background: #000;
    transform: scale(1.4);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cm-testimonios {
        padding: var(--section-py-mob) 0;
    }

    .cm-testimonios__header {
        margin-bottom: 36px;
    }

    .cm-testimonios__nav {
        width: 36px;
        height: 36px;
    }

    .cm-testimonios__dots-wrap {
        margin-top: 24px;
    }
}

/* ============================================
   22. DEJAR TESTIMONIO — Formulario (Custom Made)
   ============================================ */

.cm-dejar-testimonio {
    padding: var(--section-py) 0;
    background: var(--color-gray-100);
}

.cm-dejar-testimonio__inner {
    max-width: 640px;
    margin: 0 auto;
}

.cm-dejar-testimonio__header {
    text-align: center;
    margin-bottom: 24px;
}

.cm-dejar-testimonio__title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 700;
    color: var(--color-black);
    margin: 0 0 20px;
}

.cm-dejar-testimonio__subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-gray-700);
    margin: 0;
    line-height: 1.6;
}

/* ── Form ── */
.cm-dt-form {
    background: #fff;
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cm-dt-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cm-dt-form__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cm-dt-form__label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-black);
    text-transform: uppercase;
}

.cm-dt-form__optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-gray-500);
}

.cm-dt-form__input,
.cm-dt-form__textarea {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-black);
    border: 1px solid var(--color-gray-200);
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    background: #fff;
}

.cm-dt-form__input:focus,
.cm-dt-form__textarea:focus {
    border-color: var(--color-black);
}

.cm-dt-form__textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.6;
}

/* ── Star Rating interactivo ── */
.cm-dt-stars {
    display: flex;
    gap: 6px;
}

.cm-dt-stars__star {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--color-gray-300);
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
}

.cm-dt-stars__star svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1;
    display: block;
}

.cm-dt-stars__star.is-filled {
    color: #000;
}

.cm-dt-stars__star:hover {
    transform: scale(1.15);
}

/* ── File upload ── */
.cm-dt-form__file-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cm-dt-form__file-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid #ddd;
    background: #fff;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #333;
    cursor: pointer;
    transition: border-color 0.2s;
    white-space: nowrap;
}

.cm-dt-form__file-btn:hover {
    border-color: #000;
}

.cm-dt-form__file-name {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: #999;
}

.cm-dt-form__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* ── Submit ── */
.cm-dt-form__submit {
    width: 100%;
    padding: 15px;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Error / Success ── */
.cm-dt-error {
    display: none;
    background: #fff5f5;
    border: 1px solid #f5c6c6;
    color: #c0392b;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 0.85rem;
}

.cm-dt-error.is-visible {
    display: block;
    margin-bottom: 8px;
}

.cm-dt-success {
    text-align: center;
    padding: 48px 24px;
    background: #fff;
}

.cm-dt-success p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cm-dejar-testimonio {
        padding: var(--section-py-mob) 0;
    }

    .cm-dt-form {
        padding: 28px 22px;
    }

    .cm-dt-form__row {
        grid-template-columns: 1fr;
    }

    .cm-dt-stars__star svg {
        width: 32px;
        height: 32px;
    }
}

/* ============================================
   23. TIENDA — Shop Archive (WooCommerce)
   ============================================ */

/* ── Breadcrumb bar ─────────────────────────────────────────────────── */
.airavata-shop-breadcrumb {
    background: var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-200);
    padding: 10px 0;
}

.woo-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-gray-700);
    margin: 0;
    padding: 0;
    list-style: none;
}

.woo-breadcrumb a {
    color: var(--color-gray-700);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.woo-breadcrumb a:hover {
    color: var(--color-black);
}

.woo-breadcrumb .sep {
    color: var(--color-gray-300);
    font-size: 10px;
}

/* ── Layout: sidebar + content ─────────────────────────────────────── */
.airavata-shop {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 48px;
    align-items: start;
    padding: 40px 0 80px;
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.airavata-shop__sidebar {
    position: sticky;
    top: 100px;
}

.airavata-shop__sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.shop-widget {
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: 24px;
}

.shop-widget:last-child {
    border-bottom: none;
}

/* ── WooCommerce Product Filter Block — tipografía exacta ───────────────── */

/* "Filters" → h2 → BOLD */
.wc-block-product-filters h2.wp-block-heading {
    font-family: var(--font-body) !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #222222 !important;
    margin: 0 0 16px !important;
}

/* "Price", "Category", "Status" → h3 → REGULAR */
.wc-block-product-filters h3.wp-block-heading {
    font-family: var(--font-body) !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #222222 !important;
    margin: 0 0 14px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #eeeeee;
}

/* Items (Uncategorized, In stock) */
.wc-block-product-filter-checkbox-list__text,
.wc-block-product-filter-checkbox-list__label {
    font-family: var(--font-body) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #444444 !important;
}

/* Widget title clásico (fallback) */
.shop-widget__title {
    font-family: var(--font-body);
    font-size: 25px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #222222;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eeeeee;
}

/* WooCommerce price filter widget */
.shop-widget .price_slider_wrapper .ui-widget-header {
    background: var(--color-black);
}

.shop-widget .price_slider_wrapper .ui-slider-handle {
    background: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 50%;
    top: -5px;
    width: 14px;
    height: 14px;
    outline: none;
    cursor: pointer;
}

.shop-widget .price_slider_amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
}

.shop-widget .price_slider_amount .price_label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-700);
}

.shop-widget .price_slider_amount .button {
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    padding: 7px 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.shop-widget .price_slider_amount .button:hover {
    background: var(--color-gray-900);
}

/* ── Filter widget items (checkboxes, labels) ───────────────────────────── */
.shop-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-widget ul li,
.airavata-shop__sidebar ul li {
    padding: 6px 0;
    font-family: var(--font-body) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #444444 !important;
    line-height: 1.4;
}

.shop-widget ul li a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.shop-widget ul li a:hover {
    color: #000000;
}

/* Checkboxes custom style */
.shop-widget input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    background: #ffffff;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 8px;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s;
}

.shop-widget input[type="checkbox"]:checked {
    background: #000000;
    border-color: #000000;
}

.shop-widget input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: 1.5px solid #ffffff;
    border-top: none;
    border-left: none;
    transform: rotate(40deg);
}

.shop-widget label,
.airavata-shop__sidebar label {
    font-family: var(--font-body) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #444444 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0;
}

.shop-widget label:hover {
    color: #000000;
}

/* Price range inputs */
.shop-widget .price_slider_amount input[type="text"],
.shop-widget .price_slider_amount .min,
.shop-widget .price_slider_amount .max {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    border: 1px solid #dddddd;
    padding: 4px 8px;
    width: 70px;
    background: #ffffff;
    text-align: center;
}

/* Top Rated Products widget */
.shop-widget .product_list_widget {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-widget .product_list_widget li {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.shop-widget .product_list_widget li:last-child {
    border-bottom: none;
}

.shop-widget .product_list_widget img {
    width: 50px;
    height: 63px;
    object-fit: cover;
    flex-shrink: 0;
}

.shop-widget .product_list_widget .product-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-black);
    text-decoration: none;
    display: block;
    line-height: 1.3;
    transition: color var(--transition-fast);
}

.shop-widget .product_list_widget .product-title:hover {
    color: var(--color-gray-700);
}

.shop-widget .product_list_widget .woocommerce-Price-amount {
    font-size: var(--font-size-xs);
    color: var(--color-gray-700);
    margin-top: 4px;
    display: block;
}

/* ── Toolbar ────────────────────────────────────────────────────────── */
.airavata-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: 28px;
}

.airavata-toolbar__count {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    margin: 0;
}

.airavata-toolbar__right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.airavata-toolbar__perpage {
    display: flex;
    align-items: center;
    gap: 5px;
}

.airavata-toolbar__perpage-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
    white-space: nowrap;
}

.airavata-toolbar__perpage-btn {
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-gray-700);
    text-decoration: none;
    padding: 4px 9px;
    border: 1px solid var(--color-gray-200);
    line-height: 1.5;
    transition: all var(--transition-fast);
}

.airavata-toolbar__perpage-btn:hover {
    border-color: var(--color-black);
    color: var(--color-black);
}

.airavata-toolbar__perpage-btn.is-active {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

/* WooCommerce sort dropdown */
.woocommerce-ordering {
    margin: 0;
}

.woocommerce-ordering select {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-black);
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    padding: 6px 32px 6px 12px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.woocommerce-ordering select:focus {
    border-color: var(--color-black);
    outline: none;
}

/* ── Product Grid (div.airavata-products-grid, sin interferencia WooCommerce) */
.airavata-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 16px;
    transition: opacity 0.25s ease;
}

/* ── Product Card ────────────────────────────────────────────────────── */
.airavata-product-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-white);
    /* Reset por si WooCommerce CSS aplica algo al .product class */
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* Contenedor de imagen: padding-bottom trick (100% compatible) */
.airavata-product-card__img-wrap {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 133.33%; /* ratio 3:4 = (4/3)*100% */
    height: 0;
    overflow: hidden;
    background: var(--color-gray-100);
    text-decoration: none;
}

/* La imagen ocupa EXACTAMENTE el contenedor — sin margen, sin espacio */
.airavata-product-card__img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    transition: transform 0.55s ease;
}

.airavata-product-card__img-wrap:hover .airavata-product-card__img {
    transform: scale(1.04);
}

/* Overlay "Ver Producto" */
.airavata-product-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.26);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.airavata-product-card__img-wrap:hover .airavata-product-card__overlay {
    opacity: 1;
}

.airavata-product-card__overlay span {
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.75);
    padding: 10px 20px;
}

/* ── Badges ─────────────────────────────────────────────────────────── */
.airavata-product-card__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.badge {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    line-height: 1.5;
    display: inline-block;
}

.badge--new {
    background: var(--color-black);
    color: var(--color-white);
}

.badge--sale {
    background: #C0392B;
    color: var(--color-white);
}

.badge--soldout {
    background: var(--color-gray-500);
    color: var(--color-white);
}

/* ── Card body ──────────────────────────────────────────────────────── */
.airavata-product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 0 0;
    gap: 8px;
}

.airavata-product-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.3;
}

.airavata-product-card__title a {
    color: var(--color-black);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.airavata-product-card__title a:hover {
    color: var(--color-gray-700);
}

.airavata-product-card__price {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    margin: 0;
}

.airavata-product-card__price .woocommerce-Price-amount {
    color: var(--color-black);
    font-weight: 500;
}

.airavata-product-card__price del {
    color: var(--color-gray-500);
    font-size: var(--font-size-xs);
    margin-right: 4px;
}

.airavata-product-card__price ins {
    color: #C0392B;
    text-decoration: none;
}

/* ── Color swatches ─────────────────────────────────────────────────── */
.airavata-product-card__colors {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.airavata-product-card__swatch {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
    cursor: default;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.airavata-product-card__swatch:hover {
    transform: scale(1.2);
    border-color: var(--color-black);
}

.airavata-product-card__colors-more {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    line-height: 1;
}

/* ── CTA "Comprar" button ────────────────────────────────────────────── */
.airavata-product-card__cta {
    align-self: stretch;
    text-align: center;
    margin-top: auto;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
}

/* ── Pagination ─────────────────────────────────────────────────────── */
.airavata-shop__content .woocommerce-pagination {
    margin-top: 52px;
    display: flex;
    justify-content: center;
}

.airavata-shop__content .woocommerce-pagination ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.airavata-shop__content .woocommerce-pagination ul li a,
.airavata-shop__content .woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-black);
    border: 1px solid var(--color-gray-200);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.airavata-shop__content .woocommerce-pagination ul li a:hover {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.airavata-shop__content .woocommerce-pagination ul li span.current {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

/* ── No products found ───────────────────────────────────────────────── */
.airavata-shop__content .woocommerce-info {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    background: var(--color-gray-100);
    border: none;
    border-left: 4px solid var(--color-gray-300);
    padding: 20px 24px;
    margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .airavata-shop {
        grid-template-columns: 220px 1fr;
        gap: 32px;
    }

    .airavata-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .wc-block-product-filters h2.wp-block-heading,
    .wc-block-product-filters h3.wp-block-heading,
    .shop-widget__title                                  { font-size: 22px !important; }
    .wc-block-product-filter-checkbox-list__text,
    .wc-block-product-filter-checkbox-list__label        { font-size: 16px !important; }
}

@media (max-width: 900px) {
    .airavata-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .airavata-shop {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 24px;
    }

    .airavata-shop__sidebar {
        position: static;
        border-bottom: 1px solid var(--color-gray-200);
        padding-bottom: 24px;
        margin-bottom: 28px;
    }

    .wc-block-product-filters h2.wp-block-heading,
    .wc-block-product-filters h3.wp-block-heading,
    .shop-widget__title                                  { font-size: 20px !important; }
    .wc-block-product-filter-checkbox-list__text,
    .wc-block-product-filter-checkbox-list__label        { font-size: 15px !important; }

    .airavata-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .airavata-toolbar__right {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .airavata-products-grid {
        gap: 16px 8px;
    }

    .airavata-product-card__cta {
        font-size: 10px;
        padding-left: 8px;
        padding-right: 8px;
        letter-spacing: 0.06em;
    }

    .wc-block-product-filters h2.wp-block-heading,
    .wc-block-product-filters h3.wp-block-heading,
    .shop-widget__title                                  { font-size: 18px !important; }
    .wc-block-product-filter-checkbox-list__text,
    .wc-block-product-filter-checkbox-list__label        { font-size: 14px !important; }
}


/* ============================================
   24. SINGLE PRODUCT — Producto Individual
   Diseño de referencia: codes/product-detail.html
   ============================================ */

/* ── Layout 3 columnas ──────────────────────────────────────────────────── */
.airavata-product-detail .pd-layout {
    display: grid;
    grid-template-columns: 96px 1fr 520px;
    gap: 24px;
    align-items: start;
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 40px 100px;
}

/* ── Thumbnails (columna izquierda) ─────────────────────────────────────── */
.airavata-product-detail .pd-thumbs {
    display: grid;
    gap: 10px;
    position: sticky;
    top: 20px;
}

.airavata-product-detail .pd-thumb {
    appearance: none;
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-200);
    border-radius: 6px;
    padding: 3px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.airavata-product-detail .pd-thumb.active,
.airavata-product-detail .pd-thumb:hover {
    border-color: var(--color-black);
}

.airavata-product-detail .pd-thumb img {
    display: block;
    width: 100%;
    height: 96px;
    object-fit: cover;
    border-radius: 4px;
}

/* ── Main Image (columna central) ───────────────────────────────────────── */
.airavata-product-detail .pd-main-image {
    margin: 0;
    border: 1.5px solid var(--color-gray-200);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    min-height: 650px; /* mantiene altura cuando img está hidden para el video */
}

.airavata-product-detail .pd-main-image img {
    display: block;
    width: 100%;
    height: 650px;
    object-fit: cover;
    object-position: center top;
}

.airavata-product-detail .pd-sale-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
}

/* ── Info panel (columna derecha) ───────────────────────────────────────── */
.airavata-product-detail .pd-info {
    padding-left: 8px;
}

.airavata-product-detail .pd-brand {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--color-gray-500);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.airavata-product-detail .pd-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.15;
    color: var(--color-black);
}

/* Rating */
.airavata-product-detail .pd-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.airavata-product-detail .pd-rating .star-rating {
    color: #f7931a;
    font-size: 1em;
}

.airavata-product-detail .pd-review-count {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-gray-500);
    text-decoration: none;
}

.airavata-product-detail .pd-review-count:hover {
    text-decoration: underline;
}

/* Price */
.airavata-product-detail .pd-price {
    margin-bottom: 16px;
}

.airavata-product-detail .pd-price .price {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 1.8vw, 1.75rem);
    font-weight: 700;
    color: var(--color-black);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.airavata-product-detail .pd-price .price del {
    color: var(--color-gray-400);
    font-size: 1.1rem;
    font-weight: 400;
}

.airavata-product-detail .pd-price .price ins {
    text-decoration: none;
}

/* Short description */
.airavata-product-detail .pd-short-desc,
.airavata-product-detail .pd-short-desc p {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* ── Add-to-Cart area ───────────────────────────────────────────────────── */

/* Variations table */
.airavata-product-detail .pd-add-to-cart .variations {
    width: 100%;
    border: none;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.airavata-product-detail .pd-add-to-cart .variations tr {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.airavata-product-detail .pd-add-to-cart .variations td,
.airavata-product-detail .pd-add-to-cart .variations th {
    padding: 0;
    border: none;
    vertical-align: top;
}

.airavata-product-detail .pd-add-to-cart .variations label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
}

.airavata-product-detail .pd-add-to-cart .variations select {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-black);
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-300);
    border-radius: 6px;
    padding: 10px 36px 10px 12px;
    min-width: 200px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%230b0b0b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    transition: border-color 0.15s;
}

.airavata-product-detail .pd-add-to-cart .variations select:focus {
    border-color: var(--color-black);
    outline: none;
}

.airavata-product-detail .pd-add-to-cart .reset_variations {
    font-size: 12px;
    color: var(--color-gray-500);
    text-decoration: underline;
    cursor: pointer;
    display: inline-block;
    margin-top: 4px;
}

/* Variation price update */
.airavata-product-detail .pd-add-to-cart .woocommerce-variation-price .price {
    font-size: 1.4rem;
    font-weight: 700;
}

/* Cart form: qty + add to cart */
.airavata-product-detail .pd-add-to-cart form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* Quantity stepper: grid evita el problema de min-width del flex */
.airavata-product-detail .pd-add-to-cart .quantity {
    display: inline-grid !important;
    grid-template-columns: 36px 60px 36px !important;
    height: 48px !important;
    border: 1.5px solid var(--color-gray-300) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.airavata-product-detail .pd-add-to-cart .quantity .qty-minus,
.airavata-product-detail .pd-add-to-cart .quantity .qty-plus,
.airavata-product-detail .pd-add-to-cart .quantity .minus,
.airavata-product-detail .pd-add-to-cart .quantity .plus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--color-gray-100) !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: var(--color-black) !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transition: background 0.15s !important;
}

.airavata-product-detail .pd-add-to-cart .quantity .qty-minus:hover,
.airavata-product-detail .pd-add-to-cart .quantity .qty-plus:hover,
.airavata-product-detail .pd-add-to-cart .quantity .minus:hover,
.airavata-product-detail .pd-add-to-cart .quantity .plus:hover {
    background: var(--color-gray-200) !important;
}

.airavata-product-detail .pd-add-to-cart .quantity input.qty {
    width: 100% !important;
    text-align: center !important;
    border: none !important;
    border-left: 1.5px solid var(--color-gray-300) !important;
    border-right: 1.5px solid var(--color-gray-300) !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--color-black) !important;
    background: var(--color-white) !important;
    padding: 0 !important;
    height: 100% !important;
    -moz-appearance: textfield !important;
    outline: none !important;
    box-shadow: none !important;
}

.airavata-product-detail .pd-add-to-cart .quantity input.qty::-webkit-inner-spin-button,
.airavata-product-detail .pd-add-to-cart .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}

/* Add to cart button */
.airavata-product-detail .pd-add-to-cart .single_add_to_cart_button,
.airavata-product-detail .pd-add-to-cart .button.alt {
    flex: 1 !important;
    min-width: 180px !important;
    height: 48px !important;
    background: var(--color-black) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-black) !important;
    border-radius: 6px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s !important;
    padding: 0 24px !important;
}

.airavata-product-detail .pd-add-to-cart .single_add_to_cart_button:hover:not(:disabled),
.airavata-product-detail .pd-add-to-cart .button.alt:hover:not(:disabled) {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important;
}

.airavata-product-detail .pd-add-to-cart .single_add_to_cart_button:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* ── Product meta (SKU, categorías) ─────────────────────────────────────── */
.airavata-product-detail .pd-meta {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-gray-200);
}

.airavata-product-detail .pd-meta .product_meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-gray-500);
}

.airavata-product-detail .pd-meta .product_meta > span {
    display: block;
    margin-bottom: 4px;
}

.airavata-product-detail .pd-meta .product_meta a {
    color: var(--color-gray-700);
    text-decoration: none;
}

.airavata-product-detail .pd-meta .product_meta a:hover {
    color: var(--color-black);
    text-decoration: underline;
}

/* ── Características del producto (editor libre) ─────────────────────────── */
.airavata-product-detail .pd-characteristics {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-gray-200);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-gray-700);
}

.airavata-product-detail .pd-characteristics p {
    margin: 0 0 4px;
}

.airavata-product-detail .pd-characteristics p:last-child {
    margin-bottom: 0;
}

.airavata-product-detail .pd-characteristics strong {
    font-weight: 700;
    color: var(--color-gray-800);
}

.airavata-product-detail .pd-characteristics ul,
.airavata-product-detail .pd-characteristics ol {
    margin: 4px 0 4px 18px;
    padding: 0;
}

.airavata-product-detail .pd-characteristics li {
    margin-bottom: 2px;
}

/* ── After summary wrapper ──────────────────────────────────────────────── */
.airavata-product-detail .pd-after-summary {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px 80px;
    clear: both;
}

/* ── Descripción larga del producto ─────────────────────────────────────── */
.airavata-product-full-description {
    padding: 60px 0 48px;
    border-top: 1px solid var(--color-gray-200);
}

.airavata-product-full-description__title {
    font-family: var(--font-headings);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-black);
    margin: 0 0 24px;
}

.airavata-product-full-description p {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    line-height: 1.8;
    max-width: 800px;
    margin: 0 0 16px;
}

.airavata-product-full-description p:last-child {
    margin-bottom: 0;
}

/* ── Descripción corta (fix color azul heredado) ────────────────────────── */
.woocommerce-product-details__short-description {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
    line-height: 1.75;
    margin-bottom: 24px;
}

.woocommerce-product-details__short-description p,
.woocommerce-product-details__short-description li,
.woocommerce-product-details__short-description span {
    color: var(--color-gray-800) !important;
}

.woocommerce-product-details__short-description a {
    color: var(--color-gray-800);
    text-decoration: underline;
}

/* ── Tabs (Descripción / Valoraciones) ──────────────────────────────────── */
.woocommerce-tabs {
    margin-top: 64px;
    border-top: 1px solid var(--color-gray-200);
    clear: both;
}

.woocommerce-tabs .tabs {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.woocommerce-tabs .tabs li {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

.woocommerce-tabs .tabs li::before,
.woocommerce-tabs .tabs li::after {
    display: none;
}

.woocommerce-tabs .tabs li a {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    text-decoration: none;
    padding: 16px 28px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast);
}

.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs .tabs li a:hover {
    color: var(--color-black);
    border-bottom-color: var(--color-black);
    background: none;
}

.woocommerce-tabs .panel {
    padding: 36px 0;
}

/* Contenido descripción: fix color azul */
.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel--reviews {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--color-gray-800);
}

.woocommerce-Tabs-panel--description p,
.woocommerce-Tabs-panel--description li,
.woocommerce-Tabs-panel--description span {
    color: var(--color-gray-800) !important;
}

.woocommerce-Tabs-panel--description a {
    color: var(--color-gray-700);
    text-decoration: underline;
}

.woocommerce-Tabs-panel--description h2,
.woocommerce-Tabs-panel--description h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-black);
    margin: 0 0 16px;
}

/* ── Video: diapositiva en galería ───────────────────────────────────── */
.airavata-gallery-video .airavata-gallery-video__inner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-black);
    overflow: hidden;
}

.airavata-gallery-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.airavata-gallery-video__play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease;
}

.airavata-gallery-video__play-btn:hover {
    background: rgba(0, 0, 0, 0.45);
}

.airavata-gallery-video__play-btn svg {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

.airavata-gallery-video__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.airavata-gallery-video__frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Productos relacionados ──────────────────────────────────────────── */
.airavata-related-products {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid var(--color-gray-200);
    clear: both;
}

.airavata-related-products__title {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-black);
    margin: 0 0 40px;
}

/* ── Zoom on hover (solo en imágenes, no en video) ──────────────────────── */
.airavata-product-detail .pd-main-image img {
    transition: transform 0.5s ease;
}

.airavata-product-detail .pd-main-image:hover:not(.is-video) img {
    transform: scale(1.20);
}

/* ── Video frame: overlay sobre la imagen (z-index evita colapso de altura) */
.airavata-product-detail .pd-video-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #000;
}

.airavata-product-detail .pd-video-frame video,
.airavata-product-detail .pd-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Thumbnail de video en el strip ─────────────────────────────────────── */
.airavata-product-detail .pd-thumb--video {
    position: relative;
}

.airavata-product-detail .pd-thumb--video .pd-thumb-video-placeholder {
    display: block;
    width: 100%;
    height: 96px;
    background: #111;
    border-radius: 4px;
}

.airavata-product-detail .pd-thumb-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.airavata-product-detail .pd-thumb-play-icon svg {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

/* ── Variation Swatches ─────────────────────────────────────────────────── */
.airavata-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

/* Color swatches: círculos */
.airavata-swatch--color {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: box-shadow 0.15s, opacity 0.15s;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.airavata-swatch--color:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25),
                0 0 0 2px #fff,
                0 0 0 3.5px #000;
}

.airavata-swatch--color.airavata-swatch--active {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15),
                0 0 0 2px #fff,
                0 0 0 3.5px #000;
}

/* Button swatches: tallas */
.airavata-swatch--button {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1.5px solid var(--color-gray-300);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.airavata-swatch--button:hover {
    border-color: var(--color-black);
}

.airavata-swatch--button.airavata-swatch--active {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

/* Deshabilitado (variación agotada) */
.airavata-swatch.airavata-swatch--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.airavata-swatch--button.airavata-swatch--disabled {
    text-decoration: line-through;
}

/* ── Responsive single product ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .airavata-product-detail .pd-layout {
        grid-template-columns: 80px 1fr 400px;
        gap: 20px;
    }
}

@media (max-width: 860px) {
    .airavata-product-detail .pd-layout {
        grid-template-columns: 1fr;
        padding: 24px 20px 48px;
        gap: 16px;
    }

    .airavata-product-detail .pd-thumbs {
        order: 2;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 10px;
        padding-top: 8px;
    }

    .airavata-product-detail .pd-thumbs::-webkit-scrollbar { display: none; }

    .airavata-product-detail .pd-thumb { flex-shrink: 0; }

    .airavata-product-detail .pd-thumb img { width: 72px; height: 96px; }

    .airavata-product-detail .pd-main-image { order: 1; }

    .airavata-product-detail .pd-info {
        order: 3;
        padding-left: 0;
    }

    .airavata-product-detail .pd-main-image { min-height: 480px; }
    .airavata-product-detail .pd-main-image img { height: 480px; }

    .airavata-product-detail .pd-title { font-size: 1.8rem; }

    .airavata-product-detail .pd-after-summary { padding: 0 20px; }

    .airavata-related-products .airavata-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .airavata-related-products .airavata-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 8px;
    }

    .woocommerce-tabs .tabs li a {
        padding: 14px 16px;
        font-size: 10px;
    }
}


/* ============================================
   25. CART PAGE — page-template/page-cart.php
   Clases del diseño: .cart-page-wrapper, .cart-content,
   .cart-table-wrapper, .cart-summary  (igual que cart.html)
   ============================================ */

/* ── CART PAGE WRAPPER ───────────────────────────────────────────────── */
.cart-page-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 48px 40px 80px;
}

/* ── HEADER: título + breadcrumb ─────────────────────────────────────── */
.cart-header {
    text-align: center;
    margin-bottom: 52px;
}

.cart-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-black);
    margin: 0 0 12px;
}

.cart-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-gray-500);
}

.cart-breadcrumb .breadcrumb-link {
    color: var(--color-gray-500);
    text-decoration: none;
    transition: color 0.2s;
}
.cart-breadcrumb .breadcrumb-link:hover { color: var(--color-black); }
.cart-breadcrumb .breadcrumb-sep { color: var(--color-gray-300); font-size: 15px; }
.cart-breadcrumb .breadcrumb-current { color: var(--color-gray-500); }

/* ── LAYOUT PRINCIPAL: tabla (flex:1) + resumen (340px) ──────────────── */
.cart-content {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.cart-table-wrapper {
    flex: 1;
    min-width: 0;
}

/* ── TABLA DE PRODUCTOS ──────────────────────────────────────────────── */
.cart-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Cabecera */
.cart-table thead tr {
    border-bottom: 1.5px solid var(--color-gray-300);
}

.cart-table thead th {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0 18px;
    text-align: left;
    background: none;
}

.cart-table th.col-product  { width: 45%; }
.cart-table th.col-price    { width: 17%; }
.cart-table th.col-qty      { width: 22%; text-align: center; }
.cart-table th.col-total    { width: 16%; text-align: right; }

/* Filas de producto */
.cart-table tr.cart-item {
    border-bottom: 1.5px solid var(--color-gray-200);
}

.cart-table td {
    padding: 28px 0;
    vertical-align: middle;
    border: none;
    background: none;
}

/* ── CELDA PRODUCTO: imagen + detalles ───────────────────────────────── */
.product-cell {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.product-image {
    flex-shrink: 0;
    width: 180px;
    height: 200px;
    overflow: hidden;
    position: relative;
    background: var(--color-gray-100);
}

.product-image a {
    display: block;
    position: absolute;
    inset: 0;
}

.product-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
}

.product-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.product-details .product-name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-black);
    text-decoration: none;
    line-height: 1.35;
    display: block;
    max-width: 220px;
}

.product-details .product-name:hover { text-decoration: underline; }

.product-details .product-variant {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-gray-500);
    font-weight: 400;
}

.product-details .remove-link {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-gray-500);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s;
    display: inline-block;
    margin-top: 4px;
}

.product-details .remove-link:hover { color: var(--color-black); }

/* ── CELDA PRECIO ────────────────────────────────────────────────────── */
.cart-table td.col-price {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-black);
}

/* ── CELDA CANTIDAD: stepper ─────────────────────────────────────────── */
.cart-table td.col-qty {
    text-align: center;
}

/* Label screen-reader dentro del .quantity — no debe ocupar espacio en flex */
.cart-table td.col-qty .quantity .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
}

/* El .quantity wrapper que genera WooCommerce */
.cart-table td.col-qty .quantity {
    display: inline-flex !important;
    align-items: stretch !important;
    height: 46px !important;
    width: 120px !important;   /* ancho fijo como en el diseño de referencia */
    border: 1.5px solid var(--color-gray-300) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* Botones − y + (clases de nuestro quantity-input.php override) */
.cart-table td.col-qty .quantity .qty-minus,
.cart-table td.col-qty .quantity .qty-plus,
.cart-table td.col-qty .quantity .minus,
.cart-table td.col-qty .quantity .plus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 100% !important;
    background: var(--color-white) !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    color: var(--color-black) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: background 0.15s !important;
    line-height: 1 !important;
}

.cart-table td.col-qty .quantity .qty-minus:hover,
.cart-table td.col-qty .quantity .qty-plus:hover,
.cart-table td.col-qty .quantity .minus:hover,
.cart-table td.col-qty .quantity .plus:hover {
    background: var(--color-gray-100) !important;
}

/* Input numérico — ocupa el espacio central restante */
.cart-table td.col-qty .quantity input.qty,
.cart-table td.col-qty .quantity input[type="number"] {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 0 !important;
    height: 100% !important;
    text-align: center !important;
    border: none !important;
    border-left: 1.5px solid var(--color-gray-300) !important;
    border-right: 1.5px solid var(--color-gray-300) !important;
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    color: var(--color-black) !important;
    background: var(--color-white) !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
    user-select: none !important;
}

.cart-table td.col-qty .quantity input[type="number"]::-webkit-outer-spin-button,
.cart-table td.col-qty .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ── CELDA TOTAL ─────────────────────────────────────────────────────── */
.cart-table td.col-total {
    text-align: right;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-black);
}

/* ── FILA DE ACCIONES (cupón + actualizar) ───────────────────────────── */
.cart-actions-row td {
    padding: 20px 0;
    border: none;
    background: none;
}

.cart-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.coupon-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.coupon-input {
    height: 42px;
    padding: 0 14px;
    border: 1.5px solid var(--color-gray-300);
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-black);
    background: var(--color-white);
    outline: none;
    width: 180px;
    transition: border-color 0.2s;
}

.coupon-input:focus { border-color: var(--color-black); }

.coupon-btn,
.update-cart-btn {
    height: 42px;
    padding: 0 20px;
    background: transparent;
    color: var(--color-black);
    border: 1.5px solid var(--color-black);
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.coupon-btn:hover,
.update-cart-btn:hover:not(:disabled) {
    background: var(--color-black);
    color: var(--color-white);
}

.update-cart-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ── PANEL DE RESUMEN ────────────────────────────────────────────────── */
.cart-summary {
    flex: 0 0 320px;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 56px; /* alinea con primera fila de producto */
}

.summary-totals {
    display: flex;
    flex-direction: column;
}

.subtotal-row,
.discount-row,
.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.total-row {
    border-bottom: none;
    padding-bottom: 0;
}

.subtotal-label,
.discount-label {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-black);
}

.subtotal-value,
.discount-value {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-black);
}

.total-label {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.total-value {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-black);
}

.summary-divider {
    width: 100%;
    height: 1px;
    background: var(--color-gray-200);
    margin: 8px 0;
}

.coupon-code-applied {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* ── BOTÓN CHECKOUT ──────────────────────────────────────────────────── */
.checkout-btn {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 18px 24px;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.checkout-btn:hover {
    background: #333;
    color: var(--color-white);
    transform: translateY(-2px);
}

/* ── CARRITO VACÍO ───────────────────────────────────────────────────── */
.cart-empty-state {
    text-align: center;
    padding: 80px 0;
}

.cart-empty-msg {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-gray-500);
    margin-bottom: 28px;
}

.cart-empty-btn {
    display: inline-block;
    background: var(--color-black);
    color: var(--color-white);
    padding: 15px 40px;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.cart-empty-btn:hover {
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
}

/* ── RESPONSIVE — Tablet ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cart-page-wrapper { padding: 36px 24px 60px; }

    .cart-content {
        flex-direction: column;
        gap: 40px;
    }

    .cart-summary {
        flex: none;
        width: 100%;
        padding-top: 0;
    }

    .cart-table th.col-product { width: 50%; }
    .cart-table th.col-price   { width: 15%; }
    .cart-table th.col-qty     { width: 20%; }
    .cart-table th.col-total   { width: 15%; }

    .product-image { width: 130px; height: 150px; }
}

/* ── RESPONSIVE — Mobile ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cart-page-wrapper { padding: 28px 16px 60px; }

    .cart-title { font-size: 1.6rem; }

    .cart-table,
    .cart-table thead,
    .cart-table tbody,
    .cart-table th,
    .cart-table td,
    .cart-table tr { display: block; width: 100% !important; }

    .cart-table thead { display: none; }

    .cart-table tr.cart-item {
        padding: 20px 0;
        border-bottom: 1.5px solid var(--color-gray-200);
    }

    .cart-table td { padding: 8px 0; border: none; }

    .cart-table td.col-price::before  { content: attr(data-label) ': '; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; display: block; margin-bottom: 2px; }
    .cart-table td.col-qty::before    { content: attr(data-label) ': '; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; display: block; margin-bottom: 2px; }
    .cart-table td.col-total::before  { content: attr(data-label) ': '; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; display: block; margin-bottom: 2px; }

    .cart-table td.col-qty  { text-align: left; }
    .cart-table td.col-total { text-align: left; }

    .product-image { width: 100px; height: 125px; }

    .cart-actions { flex-direction: column; align-items: flex-start; }
    .coupon-row { flex-wrap: wrap; }
    .coupon-input { width: 100%; }

    .cart-summary { width: 100%; padding-top: 0; }
}



/* ============================================
   20. UTILITIES
   ============================================ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.uppercase { text-transform: uppercase; }

.w-full  { width: 100%; }
.h-full  { height: 100%; }

.flex      { display: flex; }
.flex-col  { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 16px; }
.gap-8 { gap: 32px; }

.mt-auto { margin-top: auto; }
.mb-0    { margin-bottom: 0; }

/* Section padding */
.section {
    padding: var(--section-py) 0;
}

@media (max-width: 768px) {
    .section {
        padding: var(--section-py-mob) 0;
    }
}

/* ============================================
   26. GUÍA DE TALLAS — Size Guide
   Template: page-templates/page-guia-tallas.php
   CPT: sg_prenda | Tax: sg_categoria
   Referencia: codes/guia-de-talles.css
   ============================================ */

.sg-section {
    padding: 40px 0;
    background-color: #ffffff;
    color: #0b0b0b;
}

.sg-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ── Intro ──────────────────────────────────────────────────────────────── */
.sg-intro {
    text-align: center;
    margin-bottom: 40px;
    font-family: var(--font-body);
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}

.sg-intro a {
    color: #f7931a;
    text-decoration: none;
}

.sg-intro a:hover {
    text-decoration: underline;
}

/* ── Tabla de tallas ────────────────────────────────────────────────────── */
.sg-size-table {
    margin-bottom: 40px;
}

.sg-table-title {
    background: #0b0b0b;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    padding: 10px 16px;
    margin: 0 0 10px;
    text-transform: uppercase;
    border-radius: 4px 4px 0 0;
}

.sg-table-grid {
    display: grid;
    grid-template-columns: 130px 120px repeat(4, 1fr);
    border: 1px solid #eee;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
}

/* ── Celdas base ────────────────────────────────────────────────────────── */
.sg-cell {
    padding: 12px;
    border-bottom: 1px solid #eee;
    font-family: var(--font-body);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Imagen de prenda */
.sg-cell-img {
    align-items: center;
}

.sg-cell-img img {
    max-width: 100px;
    height: auto;
    display: block;
}

/* Columna de etiquetas de medida */
.sg-cell-measure {
    gap: 0;
}

.sg-measure-label {
    font-family: var(--font-body);
    font-size: 14px;
    color: #0b0b0b;
    padding: 2px 0;
    line-height: 1.5;
}

/* Encabezados de talla (S, M, L, XL) */
.sg-cell-size-header {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    background: #f9f9f9;
    align-items: center;
}

/* Celdas de valores por talla */
.sg-cell-values {
    gap: 0;
    padding: 0;
}

.sg-unit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 12px;
    font-size: 14px;
}

.sg-unit-row--alt {
    background: #fdecd8;
}

.sg-unit {
    color: #888;
    font-size: 14px;
}

.sg-value {
    font-size: 14px;
    color: #0b0b0b;
}

/* ── Sección: Cómo medir ────────────────────────────────────────────────── */
.sg-measure-guide {
    background: #ffffff;
    color: #000000;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    margin-top: 50px;
}

.sg-measure-title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 30px;
    color: #000000;
}

.sg-measure-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.sg-measure-text {
    font-family: var(--font-body);
    font-weight: 400;
}

.sg-measure-text p {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    line-height: 1.6;
}

.sg-measure-text strong,
.sg-measure-text b {
    font-weight: 700;
    color: #000000;
}

.sg-measure-text a {
    color: #000000;
    text-decoration: underline;
}

.sg-measure-text a:hover {
    color: #555555;
}

.sg-measure-text ol,
.sg-measure-text ul {
    padding-left: 22px;
    margin: 0 0 16px;
}

.sg-measure-text li {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    line-height: 1.6;
}

.sg-measure-text li strong {
    font-weight: 700;
    color: #000000;
}

.sg-measure-img img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sg-table-grid {
        grid-template-columns: 80px 100px repeat(4, 1fr);
    }

    .sg-measure-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .sg-table-grid {
        display: block;
        overflow-x: auto;
    }
}

/* ============================================
   27. CONTACTO
   Template: page-templates/page-contacto.php
   CPT: form_contact
   ============================================ */

.ct-section {
    padding: 80px 0;
    background: var(--color-white);
}

/* ── Wrapper 2 columnas ─────────────────────────────────────────────────── */
.ct-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ── LEFT: Formulario ───────────────────────────────────────────────────── */
/* (ct-form-section ya tiene flex:1 — se ajusta abajo) */

/* ── RIGHT: Columna card + imagen ───────────────────────────────────────── */
.ct-col-right {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 340px;
    flex-shrink: 0;
}

/* ── Tarjeta negra ──────────────────────────────────────────────────────── */
.ct-card {
    background: var(--color-black);
    color: var(--color-white);
    padding: 40px 36px 44px;
    width: 100%;
    border-radius: 0;
}

/* ── Imagen debajo de la tarjeta ────────────────────────────────────────── */
.ct-contact-img {
    width: 100%;
    overflow: hidden;
}

.ct-contact-img img {
    display: block;
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center top;
}

.ct-card-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 22px;
}

/* Lista de info de contacto */
.ct-info-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ct-info-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-white);
    line-height: 1.4;
}

.ct-info-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-white);
    text-decoration: none;
    transition: opacity 0.2s;
}

.ct-info-link:hover {
    opacity: 0.8;
}

/* Caja de icono */
.ct-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    flex-shrink: 0;
    color: var(--color-white);
}

.ct-icon-box svg {
    width: 15px;
    height: 15px;
}

/* WhatsApp: fondo verde */
.ct-icon-box--wa {
    background: #25d366;
    border-color: #25d366;
}

.ct-icon-box--wa svg {
    width: 17px;
    height: 17px;
}

/* Subtítulo "SÍGUENOS" */
.ct-card-subtitle {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 16px;
}

/* Iconos de redes sociales */
.ct-social-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ct-social-icons a {
    color: var(--color-white);
    text-decoration: none;
    transition: opacity 0.2s;
    display: flex;
}

.ct-social-icons a:hover {
    opacity: 0.7;
}

.ct-social-icons svg {
    width: 24px;
    height: 24px;
}

/* ── LEFT: Formulario ───────────────────────────────────────────────────── */
.ct-form-section {
    flex: 1;
    min-width: 0;
}

.ct-form-title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 700;
    color: var(--color-black);
    margin: 0 0 28px;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

/* Formulario */
.ct-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ct-form input:not([type="checkbox"]),
.ct-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-gray-300);
    border-radius: 0;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--color-black);
    background: var(--color-white);
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.ct-form input:not([type="checkbox"])::placeholder,
.ct-form textarea::placeholder {
    color: var(--color-gray-400);
    font-size: 14px;
}

.ct-form input:not([type="checkbox"]):focus,
.ct-form textarea:focus {
    border-color: var(--color-gray-600, #555);
}

.ct-form textarea {
    min-height: 160px;
    resize: vertical;
}

/* Botón enviar */
.ct-submit-btn {
    width: 100%;
    padding: 16px;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ct-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.ct-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ct-btn-spin svg {
    animation: ct-spin 0.8s linear infinite;
}

@keyframes ct-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Mensaje de respuesta del formulario */
.ct-form-msg {
    padding: 12px 16px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
}

.ct-form-msg--ok {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.ct-form-msg--err {
    background: #fce4ec;
    color: #b71c1c;
    border: 1px solid #ef9a9a;
}

/* ── Privacy policy checkbox (all forms) ────────────────────────────────── */
.form-privacy-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-gray-500);
    line-height: 1.5;
    cursor: pointer;
}

.form-privacy-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--color-black);
    cursor: pointer;
}

.form-privacy-label a {
    color: var(--color-gray-700);
    text-decoration: underline;
}

.form-privacy-label a:hover {
    color: var(--color-black);
}

/* Footer variant — sobre fondo negro */
.form-privacy-label--footer {
    color: rgba(255, 255, 255, 0.6);
    margin-top: 10px;
}

.form-privacy-label--footer a {
    color: rgba(255, 255, 255, 0.85);
}

.form-privacy-label--footer a:hover {
    color: #fff;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .ct-wrapper {
        flex-direction: column;
        gap: 40px;
        padding: 0 24px;
    }

    .ct-col-right {
        width: 100%;
    }

    .ct-contact-img img {
        height: 260px;
    }
}

@media (max-width: 480px) {
    .ct-section {
        padding: 48px 0;
    }

    .ct-wrapper {
        padding: 0 16px;
    }

    .ct-contact-img img {
        height: 220px;
    }
}

/* ============================================
   28. NOSOTROS
   Template: page-templates/page-nosotros.php
   ============================================ */

/* ── S1: Intro — Texto + Imagen ─────────────────────────────────────────── */
.nb-intro-section {
    padding: 80px 0;
    background: #ffffff;
}

.nb-intro-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.nb-intro-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000000;
    margin: 0 0 20px;
}

.nb-intro-body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.75;
    color: #333333;
}

.nb-intro-body p {
    margin: 0 0 16px;
}

.nb-intro-body p:last-child {
    margin-bottom: 0;
}

.nb-intro-label {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000000;
    margin: 28px 0 0;
}

.nb-intro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 520px;
}

/* ── S2: Imagen full-width ──────────────────────────────────────────────── */
.nb-fullwidth-section {
    width: 100%;
    line-height: 0;
}

.nb-fullwidth-section img {
    width: 100%;
    height: auto;
    max-height: 700px;
    object-fit: cover;
    display: block;
}

/* ── S3: Párrafo centrado ───────────────────────────────────────────────── */
.nb-quote-section {
    padding: 60px 40px;
    background: #ffffff;
}

.nb-quote-container {
    max-width: 860px;
    margin: 0 auto;
}

.nb-quote-text {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.75;
    color: #333333;
    text-align: center;
    margin: 0;
}

/* ── S4: Imagen izquierda + Cita derecha ────────────────────────────────── */
.nb-spirit-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #ffffff;
    min-height: 480px;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--container-padding);
}

.nb-spirit-img {
    overflow: hidden;
}

.nb-spirit-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nb-spirit-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 60px;
    background: #ffffff;
}

.nb-spirit-quote {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    color: #c07a5f;
    text-align: center;
    margin: 0;
    border: none;
    padding: 0;
}

/* ── S5: Hashtag cierre ─────────────────────────────────────────────────── */
.nb-hashtag-section {
    padding: 80px 40px;
    background: #ffffff;
    text-align: center;
}

.nb-hashtag-intro {
    font-family: var(--font-body);
    font-size: 14px;
    color: #888888;
    margin: 0 0 8px;
}

.nb-hashtag-tag {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 700;
    font-style: italic;
    color: #000000;
    margin: 0;
    line-height: 1.1;
}

/* ── Responsive 1024px ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .nb-spirit-quote {
        font-size: 24px;
    }

    .nb-hashtag-tag {
        font-size: 42px;
    }
}

/* ── Responsive 768px ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nb-intro-section {
        padding: 60px 0;
    }

    .nb-intro-container {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 0 24px;
    }

    .nb-intro-img img {
        max-height: 380px;
    }

    .nb-spirit-section {
        grid-template-columns: 1fr;
    }

    .nb-spirit-img img {
        max-height: 360px;
    }

    .nb-spirit-text {
        padding: 48px 32px;
    }

    .nb-spirit-quote {
        font-size: 22px;
    }

    .nb-hashtag-section {
        padding: 60px 24px;
    }

    .nb-hashtag-tag {
        font-size: 36px;
    }
}

/* ── Responsive 480px ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .nb-intro-container {
        padding: 0 16px;
    }

    .nb-intro-title {
        font-size: 17px;
    }

    .nb-quote-section {
        padding: 48px 16px;
    }

    .nb-spirit-text {
        padding: 40px 20px;
    }

    .nb-spirit-quote {
        font-size: 20px;
    }

    .nb-hashtag-tag {
        font-size: 30px;
    }
}

/* ============================================
   29. CHECKOUT
   Template: page-templates/page-checkout.php
   Form:     woocommerce/checkout/form-checkout.php
   ============================================ */

/* ── Página wrapper ─────────────────────────────────────────────────────── */
.woo-checkout-page {
    background: #ffffff;
}

.ck-page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 80px;
}

/* ── Header: breadcrumb + título ────────────────────────────────────────── */
.ck-header {
    padding: 40px 0 36px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 48px;
}

.ck-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

.ck-breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}

.ck-breadcrumb-link:hover {
    color: #000;
}

.ck-breadcrumb-sep {
    color: #ccc;
}

.ck-breadcrumb-current {
    color: #000;
    font-weight: 600;
}

.ck-page-title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000;
    margin: 0;
}

/* ── Layout 2 columnas ──────────────────────────────────────────────────── */
.ck-columns {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 60px;
    align-items: flex-start;
}

/* ── Columna izquierda ──────────────────────────────────────────────────── */
.ck-col-left {
    min-width: 0;
}

.ck-section {
    margin-bottom: 32px;
}

/* ── Cupón ──────────────────────────────────────────────────────────────── */
.ck-coupon-wrap {
    margin-bottom: 36px;
}

/* WooCommerce inyecta .woocommerce-form-coupon-toggle + #coupon_form */
.woocommerce-form-coupon-toggle {
    font-family: var(--font-body);
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
}

.woocommerce-form-coupon-toggle .showcoupon {
    color: #000;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.woocommerce-form-coupon {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.woocommerce-form-coupon .form-row {
    margin: 0;
    flex: 1;
}

.woocommerce-form-coupon .input-text {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    font-family: var(--font-body);
    font-size: 14px;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.woocommerce-form-coupon .input-text:focus {
    border-color: #555;
}

.woocommerce-form-coupon .button {
    padding: 12px 24px;
    background: #000;
    color: #fff;
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s;
}

.woocommerce-form-coupon .button:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* ── Títulos de secciones WooCommerce (billing / shipping) ──────────────── */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e8e8;
}

/* ── Campos del formulario WooCommerce ──────────────────────────────────── */
.woocommerce-checkout .form-row {
    margin-bottom: 16px;
}

.woocommerce-checkout .form-row label {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 6px;
}

.woocommerce-checkout .form-row .required {
    color: #c0392b;
    font-weight: 400;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    background: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    color: #000;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: #555;
}

.woocommerce-checkout .form-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%23555' d='M6 7L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.woocommerce-checkout .form-row textarea {
    resize: vertical;
    min-height: 100px;
}

/* Media inline (2 campos en fila) */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: calc(50% - 8px);
    display: inline-block;
    vertical-align: top;
}

.woocommerce-checkout .form-row-first {
    margin-right: 16px;
}

/* Checkbox crear cuenta */
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

/* Checkbox envío diferente */
.woocommerce-checkout #ship-to-different-address label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

/* ── Columna derecha: resumen ────────────────────────────────────────────── */
.ck-col-right {
    position: sticky;
    top: 100px;
}

.ck-summary-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e8e8;
}

/* ── Tabla de revisión del pedido ────────────────────────────────────────── */
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.woocommerce-checkout-review-order-table thead {
    border-bottom: 1px solid #e8e8e8;
}

.woocommerce-checkout-review-order-table thead th {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    padding: 0 0 10px;
    text-align: left;
}

.woocommerce-checkout-review-order-table thead th.product-total {
    text-align: right;
}

/* Filas de productos */
.woocommerce-checkout-review-order-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}

.woocommerce-checkout-review-order-table tbody td {
    font-family: var(--font-body);
    font-size: 14px;
    color: #333;
    padding: 12px 0;
    vertical-align: middle;
}

.woocommerce-checkout-review-order-table .product-name {
    padding-right: 12px;
    line-height: 1.4;
}

.woocommerce-checkout-review-order-table .product-quantity {
    font-weight: 700;
    color: #000;
}

.woocommerce-checkout-review-order-table .product-total {
    text-align: right;
    font-weight: 600;
    color: #000;
    white-space: nowrap;
}

/* Tfoot: totales */
.woocommerce-checkout-review-order-table tfoot tr {
    border-bottom: 1px solid #f0f0f0;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
    font-family: var(--font-body);
    font-size: 13px;
    color: #555;
    padding: 10px 0;
    vertical-align: middle;
}

.woocommerce-checkout-review-order-table tfoot td {
    text-align: right;
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    border-top: 2px solid #000;
    padding-top: 14px;
}

/* ── Métodos de pago ─────────────────────────────────────────────────────── */
#payment {
    margin-top: 24px;
}

#payment .wc_payment_methods {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border: 1px solid #e8e8e8;
}

#payment .wc_payment_methods li {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-family: var(--font-body);
    font-size: 14px;
    color: #333;
}

#payment .wc_payment_methods li:last-child {
    border-bottom: none;
}

#payment .wc_payment_methods label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
}

#payment .payment_box {
    padding: 12px 16px;
    background: #f9f9f9;
    font-family: var(--font-body);
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    border-top: 1px solid #eee;
}

/* ── Botón de pedido ─────────────────────────────────────────────────────── */
#place_order {
    display: block;
    width: 100%;
    padding: 18px 24px;
    background: #000;
    color: #fff;
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

#place_order:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Términos y condiciones */
.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 16px;
    font-family: var(--font-body);
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

.woocommerce-terms-and-conditions-wrapper a {
    color: #000;
    text-decoration: underline;
}

/* Aviso de login */
.woocommerce-info {
    padding: 14px 16px;
    background: #f9f9f9;
    border-left: 3px solid #000;
    font-family: var(--font-body);
    font-size: 14px;
    color: #555;
    margin-bottom: 24px;
}

/* Mensajes de error WooCommerce en checkout */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-notice {
    margin-bottom: 20px;
}

/* ── Responsive 1024px ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ck-columns {
        grid-template-columns: 1fr 360px;
        gap: 40px;
    }
}

/* ── Responsive 860px ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .ck-page-wrapper {
        padding: 0 24px 60px;
    }

    .ck-columns {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ck-col-right {
        position: static;
        order: -1;
    }
}

/* ── Responsive 480px ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ck-page-wrapper {
        padding: 0 16px 48px;
    }

    .ck-header {
        padding: 28px 0 24px;
        margin-bottom: 32px;
    }

    .ck-page-title {
        font-size: 20px;
    }

    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100%;
        display: block;
        margin-right: 0;
    }

    #place_order {
        padding: 16px 20px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   30. THANK YOU PAGE  (woocommerce/checkout/thankyou.php)
   ═══════════════════════════════════════════════════════════════════════════ */

.aira-ty {
    font-family: var(--font-body);
    max-width: 860px;
    margin: 60px auto 80px;
    padding: 0 var(--container-padding);
}

/* ── Hero ── */
.aira-ty__hero {
    text-align: center;
    margin-bottom: 48px;
}

.aira-ty__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: #fff;
}

.aira-ty__icon svg {
    width: 32px;
    height: 32px;
}

.aira-ty__icon--error {
    background: #c0392b;
}

.aira-ty__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #000;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

.aira-ty__sub {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
    margin: 0;
    max-width: 480px;
    margin-inline: auto;
}

.aira-ty__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

/* ── Order strip ── */
.aira-ty__strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 48px;
    overflow: hidden;
}

.aira-ty__strip-item {
    padding: 20px 22px;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aira-ty__strip-item:last-child {
    border-right: none;
}

.aira-ty__strip-label {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #999;
}

.aira-ty__strip-value {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
}

/* ── WooCommerce order details section ── */
.aira-ty .woocommerce-order-details {
    margin-bottom: 40px;
}

.aira-ty .woocommerce-order-details__title,
.aira-ty .woocommerce-column__title {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #000;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #000;
}

.aira-ty .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.88rem;
}

.aira-ty .woocommerce-table--order-details thead th {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    padding: 10px 0;
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
}

.aira-ty .woocommerce-table--order-details thead th:last-child {
    text-align: right;
}

.aira-ty .woocommerce-table--order-details tbody td {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    vertical-align: middle;
}

.aira-ty .woocommerce-table--order-details .product-total {
    text-align: right;
    font-weight: 600;
    color: #000;
}

.aira-ty .woocommerce-table--order-details tfoot th,
.aira-ty .woocommerce-table--order-details tfoot td {
    padding: 10px 0;
    font-size: 0.87rem;
    color: #444;
    border-bottom: 1px solid #f0f0f0;
}

.aira-ty .woocommerce-table--order-details tfoot tr:last-child th,
.aira-ty .woocommerce-table--order-details tfoot tr:last-child td {
    font-weight: 700;
    font-size: 0.95rem;
    color: #000;
    border-bottom: none;
    padding-top: 14px;
}

.aira-ty .woocommerce-table--order-details tfoot td {
    text-align: right;
}

/* Product link */
.aira-ty .woocommerce-table--order-details a {
    color: #000;
    text-decoration: none;
    font-weight: 600;
}

.aira-ty .woocommerce-table--order-details a:hover {
    text-decoration: underline;
}

/* ── Customer details (billing/shipping) ── */
.aira-ty .woocommerce-customer-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 8px;
}

.aira-ty .woocommerce-column {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 24px 22px;
}

.aira-ty .woocommerce-customer-details address {
    font-family: var(--font-body);
    font-size: 0.87rem;
    line-height: 1.8;
    color: #555;
    font-style: normal;
}

.aira-ty .woocommerce-customer-details .woocommerce-customer-details--phone,
.aira-ty .woocommerce-customer-details .woocommerce-customer-details--email {
    display: block;
    font-size: 0.85rem;
    color: #555;
    margin-top: 8px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .aira-ty {
        margin: 36px auto 56px;
    }

    .aira-ty__strip {
        grid-template-columns: 1fr 1fr;
    }

    .aira-ty__strip-item {
        border-bottom: 1px solid #e0e0e0;
    }

    .aira-ty .woocommerce-customer-details {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   31. 404 PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.page-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: var(--section-py) var(--container-padding);
}

.e404 {
    text-align: center;
    max-width: 520px;
}

.e404__code {
    font-family: var(--font-heading);
    font-size: clamp(7rem, 20vw, 12rem);
    font-weight: 900;
    line-height: 1;
    color: #000;
    letter-spacing: -0.04em;
    margin: 0 0 8px;
}

.e404__title {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    color: #000;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}

.e404__text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.75;
    color: #777;
    margin: 0 0 36px;
}

.e404__btn {
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   32. MY ACCOUNT — Login / Register
   ═══════════════════════════════════════════════════════════════════════════ */

.aira-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 960px;
    margin: 64px auto 80px;
    padding: 0 var(--container-padding);
    font-family: var(--font-body);
}

/* ── Panel ── */
.aira-auth__panel {
    padding: 48px 44px;
    border: 1px solid #e8e8e8;
}

.aira-auth__panel--register {
    border-left: none;
    background: #f9f9f9;
}

/* ── Header del panel ── */
.aira-auth__title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.aira-auth__sub {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #888;
    margin: 0 0 28px;
    line-height: 1.5;
}

/* ── Campos ── */
.aira-auth__field {
    margin-bottom: 18px;
}

.aira-auth__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #333;
    margin-bottom: 7px;
}

.aira-auth__label span {
    color: #000;
    margin-left: 2px;
}

.aira-auth__input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 11px 14px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: #000;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.aira-auth__input:focus {
    border-color: #000;
}

/* ── Fila remember + lost password ── */
.aira-auth__row-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 12px;
}

.aira-auth__remember {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.83rem;
    color: #555;
    cursor: pointer;
}

.aira-auth__remember input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #000;
    cursor: pointer;
    flex-shrink: 0;
}

.aira-auth__lost {
    font-size: 0.8rem;
    color: #888;
    text-decoration: none;
    white-space: nowrap;
}

.aira-auth__lost:hover {
    color: #000;
    text-decoration: underline;
}

/* ── Botón ── */
.aira-auth__btn {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

/* ── WooCommerce error/notice overrides dentro de auth ── */
.aira-auth .woocommerce-error,
.aira-auth .woocommerce-message,
.aira-auth .woocommerce-info {
    font-family: var(--font-body);
    font-size: 0.87rem;
    margin-bottom: 20px;
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .aira-auth {
        grid-template-columns: 1fr;
        margin: 40px auto 60px;
    }

    .aira-auth__panel--register {
        border-left: 1px solid #e8e8e8;
        border-top: none;
    }

    .aira-auth__panel {
        padding: 32px 24px;
    }
}

/* ============================================================
   33. WISHLIST
   ============================================================ */

/* ── Heart button on product card ── */
.wl-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #000;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
    line-height: 1;
}

.wl-btn:hover {
    background: #fff;
    transform: scale(1.1);
}

.wl-btn svg {
    width: 18px;
    height: 18px;
    stroke: #000;
    stroke-width: 1.8;
    transition: fill 0.2s;
}

.wl-btn.is-active {
    background: #000;
    color: #fff;
}

.wl-btn.is-active svg {
    stroke: #fff;
    fill: currentColor;
}

.wl-btn.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Pop animation on toggle */
@keyframes wl-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    70%  { transform: scale(0.88); }
    100% { transform: scale(1); }
}

.wl-btn.wl-pop {
    animation: wl-pop 0.38s ease;
}

/* ── My Wishlist page ── */
.wl-page {
    padding: 40px 0 80px;
}

.wl-page__title {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 32px;
    color: #000;
}

/* Product grid — 3 cols desktop */
.wl-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Neutralizar el clearfix de WooCommerce (::before/::after se convierten en grid items) */
.wl-grid::before,
.wl-grid::after {
    display: none !important;
    content: none !important;
}

@media (max-width: 1100px) {
    .wl-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .wl-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* Empty state */
.wl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    text-align: center;
}

.wl-empty svg {
    width: 56px;
    height: 56px;
    stroke: #ccc;
    stroke-width: 1.4;
    fill: none;
}

.wl-empty__title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    margin: 0;
}

.wl-empty__text {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    color: #666;
    margin: 0 0 8px;
    max-width: 320px;
}

/* ── Responsive ── */
@media (max-width: 600px) {

    .wl-btn {
        width: 32px;
        height: 32px;
    }

    .wl-btn svg {
        width: 15px;
        height: 15px;
    }
}

/* ============================================================
   34. MY ACCOUNT — Layout, Navigation, Dashboard
   ============================================================ */

/* ── Page wrapper ── */
.aira-account {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    max-width: 1300px;
    margin: 60px auto 100px;
    padding: 0 20px;
    align-items: start;
}

/* ── Sidebar sticky ── */
.aira-account__sidebar {
    position: sticky;
    top: 100px;
}

/* ── Content area ── */
.aira-account__content {
    min-width: 0;
}

/* ── Navigation ── */
.aira-nav {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
}

/* User badge at top */
.aira-nav__user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #e8e8e8;
    background: #000;
    color: #fff;
}

.aira-nav__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1rem;
}

.aira-nav__user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.aira-nav__user-name {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aira-nav__user-email {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav list */
.aira-nav__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.aira-nav__item {
    margin: 0;
}

.aira-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    text-decoration: none;
    color: #444;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
    transition: background 0.15s, color 0.15s;
    border-radius: 0;
}

.aira-nav__link:hover {
    background: #f5f5f5;
    color: #000;
}

.aira-nav__item.is-active .aira-nav__link,
.aira-nav__item.woocommerce-MyAccount-navigation-link--is-active .aira-nav__link {
    background: #000;
    color: #fff;
    font-weight: 600;
}

.aira-nav__icon {
    display: flex;
    flex-shrink: 0;
}

.aira-nav__icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.aira-nav__label {
    flex: 1;
}

/* Logout item — separator + red tint */
.aira-nav__item--logout {
    margin-top: 4px;
    border-top: 1px solid #e8e8e8;
    padding-top: 4px;
}

.aira-nav__item--logout .aira-nav__link {
    color: #888;
}

.aira-nav__item--logout .aira-nav__link:hover {
    background: #fff5f5;
    color: #c00;
}

/* ── Dashboard ── */
.aira-dashboard__welcome {
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e8e8e8;
}

.aira-dashboard__title {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #000;
    margin: 0 0 8px;
}

.aira-dashboard__sub {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.aira-dashboard__logout {
    font-size: 0.8rem;
    color: #999;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
}

.aira-dashboard__logout:hover {
    color: #c00;
}

/* Quick action cards */
.aira-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.aira-dash-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 20px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    text-decoration: none;
    color: #000;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.aira-dash-card:hover {
    border-color: #000;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    color: #000;
}

.aira-dash-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.aira-dash-card:hover .aira-dash-card__icon {
    background: #000;
    color: #fff;
}

.aira-dash-card__icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

.aira-dash-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aira-dash-card__count {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
}

.aira-dash-card__label {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.aira-dash-card__arrow {
    flex-shrink: 0;
    color: #ccc;
    transition: color 0.2s;
}

.aira-dash-card:hover .aira-dash-card__arrow {
    color: #000;
}

.aira-dash-card__arrow svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* ── WooCommerce float reset — prevent WC default layout from conflicting ── */
.aira-account .woocommerce-MyAccount-navigation,
.aira-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Products inside wishlist grid — reset WC li.product floats/widths */
.wl-grid li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}

/* WooCommerce overrides inside account content */
.aira-account__content .woocommerce-MyAccount-content h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #000;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .aira-account {
        grid-template-columns: 1fr;
        gap: 32px;
        margin: 40px auto 60px;
    }

    .aira-account__sidebar {
        position: static;
    }

    .aira-nav__list {
        display: flex;
        flex-wrap: wrap;
        padding: 8px;
        gap: 4px;
    }

    .aira-nav__item {
        flex: 1 1 calc(50% - 4px);
    }

    .aira-nav__link {
        padding: 10px 14px;
        font-size: 0.8rem;
        border-radius: 4px;
    }

    .aira-nav__item--logout {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }
}

@media (max-width: 600px) {
    .aira-dashboard__grid {
        grid-template-columns: 1fr;
    }

    .aira-nav__item {
        flex: 1 1 100%;
    }
}

/* ============================================================
   35. WOOCOMMERCE NOTICES — Added to cart / errors / info
   ============================================================ */

.woocommerce-notices-wrapper {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: min(560px, calc(100vw - 32px));
    pointer-events: none;
}

/* Base notice */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    margin: 0 0 12px;
    border-radius: 6px;
    border: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
    pointer-events: all;
    list-style: none;

    /* Animation */
    animation: notice-in 0.3s ease forwards;
}

@keyframes notice-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Success (added to cart) */
.woocommerce-notices-wrapper .woocommerce-message {
    background: #fff;
    color: #000;
    border-left: 4px solid #000;
}

/* Error */
.woocommerce-notices-wrapper .woocommerce-error {
    background: #fff;
    color: #000;
    border-left: 4px solid #c00;
    list-style: none;
    padding-left: 20px;
}

/* Info */
.woocommerce-notices-wrapper .woocommerce-info {
    background: #fff;
    color: #000;
    border-left: 4px solid #555;
}

/* Icon check (::before) */
.woocommerce-notices-wrapper .woocommerce-message::before {
    content: '';
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Text span (middle) */
.woocommerce-notices-wrapper .woocommerce-message a:not(.button),
.woocommerce-notices-wrapper .woocommerce-info a:not(.button) {
    color: #000;
    font-weight: 600;
    text-decoration: none;
}

/* Push "View cart" button to the right */
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-info .button {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: #000;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    white-space: nowrap;
}

.woocommerce-notices-wrapper .woocommerce-message .button:hover,
.woocommerce-notices-wrapper .woocommerce-info .button:hover {
    background: #222;
    transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 480px) {
    .woocommerce-notices-wrapper {
        bottom: 16px;
    }

    .woocommerce-notices-wrapper .woocommerce-message,
    .woocommerce-notices-wrapper .woocommerce-error,
    .woocommerce-notices-wrapper .woocommerce-info {
        flex-wrap: wrap;
        font-size: 0.85rem;
    }
}