/* =====================================================
   POSEIDON — SINGLE PRODUCT
   single-product.css
   ===================================================== */

/* ── Variables locales ──────────────────────────────── */
:root {
    --psp-gap:       4px;       /* brecha entre imágenes de galería */
    --psp-info-top:  90px;      /* offset sticky (se sobreescribe por JS con altura real del header) */
    --psp-radius:    4px;
    --psp-font:      var(--poseidon-font, 'Inter', sans-serif);
}

/* ── Página wrapper ─────────────────────────────────── */
.psp-page {
    width: 100%;
    padding-top: 0;
}

/* ── Layout principal: galería | info ───────────────── */
.psp-container {
    display: grid;
    grid-template-columns: 58fr 42fr;
    gap: 0 48px;
    align-items: start;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* =====================================================
   GALERÍA 2×2
   ===================================================== */
.psp-gallery {
    /* Ocupa todo el alto de las imágenes para que el sticky funcione */
    width: 100%;
}

.psp-gallery__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--psp-gap);
}

.psp-gallery__item {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--poseidon-bg, #f9fafb);
}

.psp-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.psp-gallery__item:hover img {
    transform: scale(1.03);
}

.psp-gallery-moderno {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Miniaturas ─────────────────────────────────────────── */
.psp-gallery-moderno__thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 76px;
    flex-shrink: 0;
    max-height: 640px;
    overflow-y: auto;
    scrollbar-width: none;
}
.psp-gallery-moderno__thumbs::-webkit-scrollbar { display: none; }

.psp-gallery-moderno__thumb {
    padding: 0;
    border: 1.5px solid transparent;
    background: var(--poseidon-bg, #f9fafb);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s ease, opacity .15s ease;
    opacity: .65;
}

.psp-gallery-moderno__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.psp-gallery-moderno__thumb:hover {
    opacity: 1;
}

.psp-gallery-moderno__thumb.is-active {
    border-color: var(--poseidon-nav-color, #1a1a1a);
    opacity: 1;
}

/* Imagen principal + zoom ────────────────────────────── */
.psp-gallery-moderno__stage {
    position: relative;
    flex: 1;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--poseidon-bg, #f9fafb);
    cursor: zoom-in;
}

.psp-gallery-moderno__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: 50% 50%;
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}

/* Transición slide al cambiar de miniatura */
.psp-gallery-moderno__image.is-out {
    opacity: 0;
    transform: translateX(-26px) scale(1);
    transition: transform .22s ease, opacity .22s ease;
}
.psp-gallery-moderno__image.is-in {
    opacity: 0;
    transform: translateX(26px) scale(1);
    transition: none;
}

/* Zoom que sigue el cursor (desactivado mientras hay slide en curso) */
.psp-gallery-moderno__stage.is-zoomed:not(.is-sliding) .psp-gallery-moderno__image {
    transform: scale(2.2);
    transition: transform .12s ease-out;
    cursor: zoom-out;
}

@media (max-width: 768px) {
    .psp-gallery-moderno {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .psp-gallery-moderno__thumbs {
        flex-direction: row;
        width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: visible;
    }
    .psp-gallery-moderno__thumb {
        width: 60px;
        aspect-ratio: 3 / 4;
    }
    /* En móvil desactivamos el zoom por cursor: no hay hover real */
    .psp-gallery-moderno__stage {
        cursor: default;
    }
    .psp-gallery-moderno__stage.is-zoomed .psp-gallery-moderno__image {
        transform: none;
    }
}

/* =====================================================
   PANEL DE INFORMACIÓN (sticky)
   ===================================================== */
.psp-info {
    position: sticky;
    top: var(--psp-info-top);
    align-self: start;
    padding: 24px 0 40px;
}

/* ── Breadcrumb ──────────────────────────────────────── */
.psp-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px; margin-bottom: 12px;
    font-size: 12px; color: var(--poseidon-muted, #6b7280);
}
.psp-breadcrumb__link {
    color: inherit; text-decoration: none;
    transition: color var(--poseidon-speed, .25s);
}
.psp-breadcrumb__link:hover { color: var(--poseidon-nav-color, #1a1a1a); }
.psp-breadcrumb__sep { opacity: .5; }

/* ── Título ───────────────────────────────────────────── */
.psp-title {
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--poseidon-nav-color, #1a1a1a);
    margin: 0 0 10px;
}

/* ── Rating ───────────────────────────────────────────── */
.psp-rating {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
}
.psp-rating__stars {
    display: flex; gap: 2px; color: var(--poseidon-star, #f5a623);
}
.psp-rating__star { display: flex; align-items: center; }
.psp-rating__star.is-filled  { color: var(--poseidon-star, #f5a623); }
.psp-rating__star.is-half    { color: var(--poseidon-star, #f5a623); }
.psp-rating__star:not(.is-filled):not(.is-half) { color: var(--poseidon-text-meta, #9ca3af); }
.psp-rating__count { font-size: 12px; color: var(--poseidon-muted, #6b7280); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ── Precio ───────────────────────────────────────────── */
.psp-price {
    margin-bottom: 20px;
}
.psp-price .price {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.psp-price .price del,
.psp-price del .amount {
    font-size: 15px;
    color: var(--poseidon-muted, #6b7280);
    font-weight: 400;
    text-decoration: line-through;
}
.psp-price .price ins,
.psp-price ins .amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--poseidon-accent, #c00000);
    text-decoration: none;
}
.psp-price .price .woocommerce-Price-amount:not(ins .woocommerce-Price-amount):not(del .woocommerce-Price-amount) {
    font-size: 22px;
    font-weight: 700;
    color: var(--poseidon-nav-color, #1a1a1a);
}

/* ── Formulario WooCommerce ──────────────────────────── */
.psp-form-wrap {
    margin-bottom: 24px;
}

/* Descripción corta */
.psp-short-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--poseidon-muted, #6b7280);
    margin-bottom: 20px;
}
.psp-short-desc p { margin: 0 0 8px; }

/* =====================================================
   SWATCHES DE VARIACIÓN (generados por JS)
   Reemplaza los <select> nativos de WooCommerce
   ===================================================== */

/* Wrapper de cada atributo */

.variations th.label {
    display: none !important;
}

.psp-swatch-group {
    margin-bottom: 20px;
}
.psp-swatch-label {
    font-size: 13px; font-weight: 600;
    color: var(--poseidon-nav-color, #1a1a1a);
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.psp-swatch-label__selected {
    font-weight: 400; color: var(--poseidon-muted, #6b7280);
}

/* Lista de chips */
.psp-swatch-list {
    display: flex; flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 0; padding: 0;
}

/* Chip de talla / texto */
.psp-swatch-chip {
    min-width: 44px; height: 44px;
    padding: 0 12px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--poseidon-border-strong, rgba(0,0,0,.14));
    border-radius: var(--psp-radius);
    font-size: 13px; font-weight: 500;
    color: var(--poseidon-nav-color, #1a1a1a);
    cursor: pointer;
    transition: border-color var(--poseidon-speed, .25s), background var(--poseidon-speed, .25s);
    user-select: none;
    background: transparent;
    letter-spacing: .01em;
}
.psp-swatch-chip:hover:not(.is-disabled) { border-color: var(--poseidon-nav-color, #1a1a1a); }
.psp-swatch-chip.is-selected {
    border-color: var(--poseidon-nav-color, #1a1a1a);
    border-width: 2px;
    background: transparent;
}
.psp-swatch-chip.is-disabled {
    opacity: .35; cursor: not-allowed;
    text-decoration: line-through;
}

/* Chip de color (círculo con imagen/color) */
.psp-swatch-color {
    width: 30px; height: 30px; min-width: 30px; padding: 0;
    border-radius: 4px;
    margin-left: 5px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    border: 1px solid var(--poseidon-border-strong, #d9dbe0);
    background: transparent;
    transition: border-color var(--poseidon-speed, .25s);
    cursor: pointer;
}
.psp-swatch-color .psp-swatch-color__dot {
    width: 100%; height: 100%; border-radius: 3px;
    display: block;
    box-shadow: inset 0 0 0 0 transparent;
    transition: box-shadow var(--poseidon-speed, .25s);
}
.psp-swatch-color:hover { border-color: #6b7280; }
.psp-swatch-color.is-selected {
    border-color: #6b7280;
}
.psp-swatch-color.is-selected .psp-swatch-color__dot {
    box-shadow: inset 0 0 0 3px var(--poseidon-surface, #fff);
}
/* Los círculos de color no tienen texto que tachar: dibujamos la línea diagonal */
.psp-swatch-color.is-disabled { text-decoration: none; }
.psp-swatch-color.is-disabled::after {
    content: '';
    position: absolute;
    top: 50%; left: -8%;
    width: 116%; height: 1.5px;
    background: var(--poseidon-nav-color, #1a1a1a);
    transform: translateY(-50%) rotate(-45deg);
    pointer-events: none;
}
/* Selector de cantidad nativo de WooCommerce */
.psp-form-wrap .quantity {
    display: flex; align-items: center; gap: 0;
    border: 1.5px solid var(--poseidon-border-strong, rgba(0,0,0,.14));
    border-radius: var(--psp-radius);
    overflow: hidden;
    width: fit-content;
    margin-bottom: 14px;
}
.psp-form-wrap .quantity .qty {
    width: 52px; text-align: center;
    border: none; background: transparent;
    font-size: 14px; font-weight: 600;
    color: var(--poseidon-nav-color, #1a1a1a);
    padding: 10px 0;
    -moz-appearance: textfield;
}
.psp-form-wrap .quantity .qty::-webkit-outer-spin-button,
.psp-form-wrap .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Botón agregar al carrito */
.psp-form-wrap .single_add_to_cart_button,
.psp-form-wrap .button {
    display: flex !important; align-items: center; justify-content: center;
    width: 100%; padding: 15px 24px;
    background: var(--poseidon-nav-color, #1a1a1a) !important;
    color: #fff !important;
    font-size: 14px; font-weight: 700; letter-spacing: .06em;
    font-family: var(--psp-font);
    border: none; border-radius: var(--psp-radius);
    cursor: pointer; text-decoration: none;
    transition: background var(--poseidon-speed, .25s), opacity var(--poseidon-speed, .25s);
    margin-top: 4px;
}
.psp-form-wrap .single_add_to_cart_button:hover,
.psp-form-wrap .button:hover { background: var(--poseidon-accent-hover, #333) !important; }
.psp-form-wrap .single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; }
.psp-form-wrap .single_add_to_cart_button.loading { opacity: 1; cursor: wait; }
.psp-form-wrap .single_add_to_cart_button.psp-added { background: var(--poseidon-accent-hover, #2f7d4f) !important; }
/* WooCommerce agrega un check (✓) vía CSS a cualquier botón con las clases
   .button.added juntas (.woocommerce button.button.added::after). Como nuestro
   botón siempre trae la clase "button" de WooCommerce, si alguna vez vuelve a
   coincidir con la clase "added" ese check aparecería solo, sin que lo pida
   nuestro JS. Lo anulamos explícitamente para blindarnos de esa colisión. */
.psp-form-wrap .single_add_to_cart_button.added::after { content: none !important; }
/* WooCommerce pinta su propio engranaje girando vía `::after` en cualquier
   botón `button.loading` (rule .woocommerce button.button.loading::after).
   Nuestro JS usa la clase `loading` y además muestra nuestro `.psp-atc-spinner`;
   sin esto quedarían DOS iconos animados a la vez. Ocultamos el de WooCommerce. */
.psp-form-wrap .single_add_to_cart_button.loading::after { content: none !important; }

/* Spinner animado (reemplaza el texto mientras se agrega al carrito) */
.psp-atc-spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: psp-atc-spin .6s linear infinite;
}
@keyframes psp-atc-spin {
    to { transform: rotate(360deg); }
}

/* Ícono de check al confirmar que se agregó */
.psp-atc-check {
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: 6px;
    animation: psp-atc-pop .25s ease;
}
@keyframes psp-atc-pop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.psp-atc-error {
    margin: 8px 0 0; padding: 10px 12px;
    background: #fdecea; color: #b3261e;
    font-size: 13px; line-height: 1.4;
    border-radius: var(--psp-radius);
}

/* Ocultar selects originales de WooCommerce (los reemplazamos con swatches) */
.psp-form-wrap .variations td.value select,
.psp-form-wrap .variations select { display: none !important; }
.psp-form-wrap .variations         { border: none !important; width: 100%; border-collapse: unset !important; }
.psp-form-wrap .variations tr      { display: block; margin-bottom: 0; }
.psp-form-wrap .variations td,
.psp-form-wrap .variations th      { padding: 0 !important; display: block; border: none !important; }
.psp-form-wrap .variations td.label { display: none !important; } /* el label lo ponemos en psp-swatch-label */
.psp-form-wrap .reset_variations   { display: none !important; }
.psp-form-wrap .woocommerce-variation-description { font-size: 13px; color: var(--poseidon-muted, #6b7280); margin: 4px 0 12px; }
.psp-form-wrap .woocommerce-variation-price       { display: none !important; } /* el precio ya lo mostramos arriba */

/* Mensaje de éxito / error de WC */
.psp-form-wrap .woocommerce-error,
.psp-form-wrap .woocommerce-message {
    font-size: 13px; padding: 10px 14px; border-radius: var(--psp-radius);
    margin-bottom: 12px; list-style: none;
}
.psp-form-wrap .woocommerce-error   { background: var(--poseidon-error-bg, #fff0f0); color: var(--poseidon-error-text, #c00); border-left: 3px solid var(--poseidon-error-text, #c00); }
.psp-form-wrap .woocommerce-message { background: var(--poseidon-success-bg, #f0fdf4); color: var(--poseidon-success-text, #166534); border-left: 3px solid var(--poseidon-success-border, #22c55e); }

/* =====================================================
   TABS DE DETALLE (debajo de las fotos: descripción,
   materiales de fabricación, cuidados de la ropa)
   ===================================================== */
.psp-detail-tabs {
    margin-top: 28px;
}

.psp-detail-tabs__nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    margin-bottom: 20px;
}

.psp-detail-tabs__tab {
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--psp-font);
    letter-spacing: .01em;
    color: var(--poseidon-muted, #6b7280);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
    margin-bottom: -1px;
    white-space: nowrap;
}

.psp-detail-tabs__tab:hover {
    color: var(--poseidon-nav-color, #1a1a1a);
}

.psp-detail-tabs__tab.is-active {
    color: var(--poseidon-nav-color, #1a1a1a);
    font-weight: 600;
    border-bottom-color: var(--poseidon-nav-color, #1a1a1a);
}

.psp-detail-tabs__panel {
    display: none;
}

.psp-detail-tabs__panel.is-active {
    display: block;
}

.psp-detail-tabs__solo-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--poseidon-nav-color, #1a1a1a);
    margin: 0 0 12px;
}

.psp-detail-tabs__content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--poseidon-muted, #6b7280);
    max-width: 640px;
}

.psp-detail-tabs__content p { margin: 0 0 12px; }
.psp-detail-tabs__content p:last-child { margin-bottom: 0; }
.psp-detail-tabs__content ul,
.psp-detail-tabs__content ol { margin: 0 0 12px 18px; padding: 0; }

@media (max-width: 768px) {
    .psp-detail-tabs { margin-top: 20px; }
    .psp-detail-tabs__nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .psp-detail-tabs__nav::-webkit-scrollbar { display: none; }
    .psp-detail-tabs__tab { padding: 10px 14px; }
}

/* ── Acordeón (descripción / specs) ─────────────────── */
.psp-accordion {
    border-top: 1px solid rgba(0,0,0,.08);
    padding: 0;
    margin-top: 0;
}
.psp-accordion + .psp-accordion { border-top: none; }
.psp-accordion:last-child       { border-bottom: 1px solid rgba(0,0,0,.08); }

.psp-accordion__label {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 4px;
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
    color: var(--poseidon-nav-color, #1a1a1a);
    cursor: pointer; list-style: none; user-select: none;
}
.psp-accordion__label::-webkit-details-marker { display: none; }
.psp-accordion__label::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
    transition: transform .22s ease;
    flex-shrink: 0;
}
.psp-accordion[open] .psp-accordion__label::after {
    transform: rotate(-135deg) translateY(-3px);
}

.psp-accordion__body {
    padding: 0 4px 16px;
    font-size: 13px; line-height: 1.7;
    color: var(--poseidon-muted, #6b7280);
}
.psp-accordion__body p { margin: 0 0 8px; }

/* Tabla de especificaciones */
.psp-spec-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px;
}
.psp-spec-table tr { border-bottom: 1px solid rgba(0,0,0,.05); }
.psp-spec-table th,
.psp-spec-table td { padding: 8px 6px; text-align: left; vertical-align: top; }
.psp-spec-table th { font-weight: 600; color: var(--poseidon-nav-color, #1a1a1a); width: 40%; }
.psp-spec-table td { color: var(--poseidon-muted, #6b7280); }

/* ── Descripción general ──────────────────────────────── */
.psp-description h2 { font-size: 15px; margin-bottom: 8px; }
.psp-description ul { padding-left: 18px; }
.psp-description li { margin-bottom: 4px; }

/* =====================================================
   RESPONSIVO
   ===================================================== */
@media (max-width: 1024px) {
    .psp-container {
        grid-template-columns: 55fr 45fr;
        gap: 0 32px;
    }
}

@media (max-width: 768px) {
    .psp-container {
        grid-template-columns: 1fr;
        padding: 0 16px 60px;
        gap: 0;
    }

    /* En móvil: 2 imágenes lado a lado, las otras 2 debajo */
    .psp-gallery__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* El panel de info deja de ser sticky en móvil */
    .psp-info {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 24px 0 0;
    }

    .psp-title { font-size: 20px; }
}

@media (max-width: 480px) {
    .psp-gallery__grid {
        /* En pantallas muy pequeñas: 1 columna con imágenes grandes */
        grid-template-columns: 1fr;
    }
    .psp-gallery__item { aspect-ratio: 4/5; }
}

/* ── Swatches de solo lectura (productos simples) ──
   Misma apariencia visual, sin cursor de selección   */
.psp-swatch-group--display .psp-swatch-chip {
    cursor: default;
}
.psp-swatch-group--display .psp-swatch-chip:hover {
    border-color: var(--poseidon-border-strong, rgba(0,0,0,.14));
    background: transparent;
}

/* =====================================================
   BOTÓN GUÍA DE TALLAS
   ===================================================== */
.psp-size-guide-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--psp-font);
    color: var(--poseidon-muted, #6b7280);
    background: transparent;
    border: none;
    border-bottom: 1px dotted currentColor;
    cursor: pointer;
    transition: color var(--poseidon-speed, .25s);
    margin-bottom: 20px;
}
.psp-size-guide-btn:hover {
    color: var(--poseidon-nav-color, #1a1a1a);
}

/* =====================================================
   MODAL
   ===================================================== */
.psp-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
}

.psp-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.psp-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.psp-modal__content {
    display: flex;
    flex-direction: column;
    background: var(--poseidon-surface, #fff);
    border-radius: 4px;
    width: calc(100% - 32px);
    max-width: 600px;
    max-height: min(85vh, 680px);
    overflow: hidden;
    padding: 20px 0 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: translateY(10px);
    transition: transform .2s ease;
    margin: 16px;
}
.psp-modal__scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 0 28px 28px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.12) transparent;
}
.psp-modal__scroll::-webkit-scrollbar { width: 5px; }
.psp-modal__scroll::-webkit-scrollbar-track { background: transparent; }
.psp-modal__scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 3px; }
.psp-modal__scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.2); }

.psp-modal__close {
    align-self: flex-end;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--poseidon-surface-hover, #f3f4f6);
    border: none;
    border-radius: 50%;
    color: var(--poseidon-text-muted, #6b7280);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    z-index: 1;
    margin-bottom: 12px;
    margin-right: 12px;
}

.psp-modal__close:hover {
    background: var(--poseidon-surface-hover, #f3f4f6);
    color: var(--poseidon-text-body, #1a1a1a);
}

.psp-modal__body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--poseidon-text, #111);
}

.psp-modal__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
}

.psp-modal__body th,
.psp-modal__body td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--poseidon-surface-hover, #f3f4f6);
}

.psp-modal__body th {
    font-weight: 600;
    color: var(--poseidon-nav-color, #1a1a1a);
    background: var(--poseidon-bg, #f9fafb);
}

.psp-modal__body td {
    color: var(--poseidon-text, #111);
}

.psp-modal__body p {
    margin: 0 0 12px;
}

.psp-modal__body ul {
    padding-left: 20px;
    margin: 0 0 12px;
}

.psp-modal__body li {
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .psp-modal__content {
        width: calc(100% - 16px);
        max-width: 100%;
        max-height: 90vh;
        border-radius: 12px;
        padding: 16px 0 0;
        margin: 8px;
    }

    .psp-modal__scroll {
        padding: 0 20px 24px;
    }

    .psp-modal__close {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 420px) {
    .psp-modal__content {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
        min-height: 100dvh;
        padding: 12px 0 0;
    }

    .psp-modal__scroll {
        padding: 0 16px 24px;
    }
}

.tabla-tallas{
  max-width: 900px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
  color: var(--poseidon-text-body, #1a1a1a);
}

.tabla-tallas h2{
  text-align: center;
  margin-bottom: 20px;
  font-size: 32px;
}

.tabla-tallas table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.tabla-tallas thead{
  background: var(--poseidon-accent-hover, #333);
  color: #fff;
}

.tabla-tallas th,
.tabla-tallas td{
  padding: 16px 14px;
  text-align: center;
  border-bottom: 1px solid var(--poseidon-border, rgba(0,0,0,.1));
}

.tabla-tallas tbody tr:nth-child(even){
  background: var(--poseidon-bg, #f9fafb);
}

.tabla-tallas tbody tr:hover{
  background: var(--poseidon-surface-hover, #f3f4f6);
}

.nota{
  margin-top: 22px;
  padding: 18px;
  background: var(--poseidon-surface-hover, #f3f4f6);
  border-radius: var(--poseidon-card-radius);
}

.nota h3{
  margin-top: 0;
}

.nota ul{
  margin: 10px 0 0 18px;
}

/* =====================================================
   TABS DEL MODAL
   ===================================================== */
.psp-modal__tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.psp-modal__tab {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--psp-font);
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
}

.psp-modal__tab:hover {
    color: #374151;
}

.psp-modal__tab.is-active {
    color: var(--poseidon-nav-color, #1a1a1a);
    font-weight: 600;
    border-bottom-color: var(--poseidon-nav-color, #1a1a1a);
}

.psp-modal__tab-content {
    display: none;
}

.psp-modal__tab-content.is-active {
    display: block;
}

/* =====================================================
   CALCULADORA DE TALLAS
   ===================================================== */

.psp-calc-gender {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.psp-calc-gender__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--psp-font);
    color: #6b7280;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all .15s;
}

.psp-calc-gender__btn:hover {
    border-color: #d1d5db;
    color: #374151;
}

.psp-calc-gender__btn.is-active {
    color: var(--poseidon-nav-color, #1a1a1a);
    background: #fff;
    border-color: var(--poseidon-nav-color, #1a1a1a);
    font-weight: 600;
}

.psp-calc-select {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    font-family: var(--psp-font);
    color: #374151;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    margin-bottom: 20px;
    transition: border-color .15s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}

.psp-calc-select:focus {
    border-color: var(--poseidon-nav-color, #1a1a1a);
}

.psp-calc-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.psp-calc-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 16px 4px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    transition: border-color .15s;
}

.psp-calc-field:focus-within {
    border-color: var(--poseidon-nav-color, #1a1a1a);
}

.psp-calc-field__icon {
    display: flex;
    align-items: center;
    color: #9ca3af;
    flex-shrink: 0;
}

.psp-calc-field__input {
    flex: 1;
    padding: 12px 0;
    font-size: 14px;
    font-family: var(--psp-font);
    color: #374151;
    background: transparent;
    border: none;
    outline: none;
    min-width: 0;
}

.psp-calc-field__input::placeholder {
    color: #9ca3af;
}

.psp-calc-field__unit {
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
}

.psp-calc-result {
    position: relative;
    text-align: center;
    padding: 22px 20px;
    margin-top: 4px;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,247,240,.78));
    border: 1px solid rgba(255,255,255,.7);
    box-shadow:
        0 10px 30px rgba(20,16,8,.06),
        inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    transition: box-shadow .2s ease;
}

.psp-calc-result::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(220px 140px at 15% 0%, color-mix(in srgb, var(--poseidon-accent, #67bf99) 16%, transparent), transparent 70%);
}

.psp-calc-result__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.psp-calc-result__label {
    font-size: 13px;
    color: #8a8378;
    font-weight: 500;
}

.psp-calc-result__value {
    font-size: 36px;
    font-weight: 800;
    color: var(--poseidon-nav-color, #1a1a1a);
    letter-spacing: -.03em;
    line-height: 1.1;
}

/* ---------- Estado vacío / sin coincidencia ---------- */
.psp-calc-result--empty {
    padding: 28px 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(250,246,237,.85));
}

.psp-calc-result--empty::before {
    background: radial-gradient(240px 160px at 85% 0%, color-mix(in srgb, var(--poseidon-accent, #67bf99) 14%, transparent), transparent 70%);
}

.psp-calc-result__icon {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 6px 16px rgba(20,16,8,.08), inset 0 1px 0 rgba(255,255,255,.9);
    color: #b0a99c;
}

.psp-calc-result__icon svg {
    width: 22px;
    height: 22px;
}

.psp-calc-result__title {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--poseidon-nav-color, #1a1a1a);
    letter-spacing: -.01em;
    margin-bottom: 6px;
}

.psp-calc-result__text {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 13.5px;
    line-height: 1.6;
    color: #7a7469;
    max-width: 320px;
    margin: 0 auto;
}

.psp-calc-result__cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 11px 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2fd66b, #25c15c);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(37,193,92,.28), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .15s ease, box-shadow .15s ease;
}

.psp-calc-result__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(37,193,92,.34), inset 0 1px 0 rgba(255,255,255,.25);
    color: #fff;
}

.psp-calc-result__cta svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* =====================================================
   RESEÑAS (dentro del acordeón, template nativo de WC)
   ===================================================== */
.psp-reviews #reviews { margin: 0; }
.psp-reviews .woocommerce-Reviews-title {
    font-size: 13px; font-weight: 700;
    color: var(--poseidon-nav-color, #1a1a1a);
    margin: 0 0 14px;
}
.psp-reviews .commentlist {
    list-style: none; margin: 0 0 20px; padding: 0;
    display: flex; flex-direction: column; gap: 18px;
}
.psp-reviews .comment { display: flex; gap: 12px; }
.psp-reviews .woocommerce-review__author-avatar { flex-shrink: 0; }
.psp-reviews .woocommerce-review__author-avatar img { width: 36px; height: 36px; border-radius: 50%; display: block; }
.psp-reviews .comment-text { flex: 1; min-width: 0; }

.psp-reviews .star-rating {
    color: var(--poseidon-star, #f5a623);
    font-size: 12px; overflow: hidden; position: relative;
    height: 1.2em; line-height: 1.2; width: 5.4em;
    font-family: star; display: inline-block; margin-bottom: 4px;
}
.psp-reviews .star-rating::before {
    content: "\73\73\73\73\73";
    color: var(--poseidon-text-meta, #9ca3af);
    float: left; top: 0; left: 0; position: absolute;
}
.psp-reviews .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.psp-reviews .star-rating span::before { content: "\53\53\53\53\53"; color: var(--poseidon-star, #f5a623); top: 0; position: absolute; left: 0; }

.psp-reviews p.meta { font-size: 12px; color: var(--poseidon-muted, #6b7280); margin: 0 0 6px; }
.psp-reviews .woocommerce-review__author { color: var(--poseidon-nav-color, #1a1a1a); font-weight: 600; font-style: normal; }
.psp-reviews .woocommerce-review__dash { color: var(--poseidon-text-meta, #9ca3af); }
.psp-reviews .description p { font-size: 13px; line-height: 1.6; color: var(--poseidon-muted, #6b7280); margin: 0; }
.psp-reviews .woocommerce-noreviews { font-size: 13px; color: var(--poseidon-muted, #6b7280); margin: 0 0 16px; }

.psp-reviews #review_form_wrapper { border-top: 1px solid rgba(0,0,0,.08); padding-top: 16px; }
.psp-reviews #reply-title { font-size: 13px; font-weight: 700; color: var(--poseidon-nav-color, #1a1a1a); margin: 0 0 12px; }
.psp-reviews #reply-title small a { font-weight: 400; font-size: 12px; color: var(--poseidon-muted, #6b7280); margin-left: 6px; }

.psp-reviews .comment-form-rating { margin-bottom: 12px; }
.psp-reviews .comment-form-rating label,
.psp-reviews .comment-form-comment label { display: block; font-size: 12px; font-weight: 600; color: var(--poseidon-nav-color, #1a1a1a); margin-bottom: 6px; }
.psp-reviews .comment-form-rating select { display: none; }
.psp-reviews p.stars a { color: var(--poseidon-text-meta, #9ca3af); text-decoration: none; font-size: 16px; }
.psp-reviews p.stars.selected a.active,
.psp-reviews p.stars a:hover,
.psp-reviews p.stars a:hover ~ a { color: var(--poseidon-star, #f5a623); }

.psp-reviews textarea,
.psp-reviews input[type="text"],
.psp-reviews input[type="email"] {
    width: 100%; padding: 10px 12px; font-size: 13px; font-family: var(--psp-font);
    border: 1px solid rgba(0,0,0,.12); border-radius: var(--psp-radius);
    background: #fff; color: var(--poseidon-nav-color, #1a1a1a);
    margin-bottom: 12px; box-sizing: border-box;
}
.psp-reviews textarea { min-height: 90px; resize: vertical; }

.psp-reviews .form-submit input[type="submit"] {
    padding: 12px 22px; background: var(--poseidon-nav-color, #1a1a1a); color: #fff !important;
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    border: none; border-radius: var(--psp-radius);
    cursor: pointer; transition: background var(--poseidon-speed, .25s);
}
.psp-reviews .form-submit input[type="submit"]:hover { background: var(--poseidon-accent-hover, #333); }

.psp-reviews .comment-notes,
.psp-reviews .comment-form-cookies-consent { font-size: 12px; color: var(--poseidon-muted, #6b7280); margin-bottom: 12px; }
.psp-reviews .comment-form-cookies-consent { display: flex; align-items: center; gap: 6px; }

/* =====================================================
   PRODUCTOS RELACIONADOS
   ===================================================== */
.psp-related {
    border-top: 1px solid rgba(0,0,0,.08);
    margin-top: 48px;
    padding: 0 clamp(20px, 4vw, 48px);
}
.psp-related__inner { max-width: 1440px; margin: 0 auto; }
.psp-related__title {
    font-size: 18px; font-weight: 700; letter-spacing: -.01em;
    color: var(--poseidon-nav-color, #1a1a1a);
    font-family: var(--psp-font);
    margin: 40px 0 0;
}