/* =============================================================
   FRØST · PÁGINA DE PRODUCTO
   Scoped a body.single-product · Hello Elementor child theme
   ============================================================= */

/* ---------- Tokens (heredados del brand book FRØST) ---------- */
body.single-product {
    --frost-navy-900: #0F2640;
    --frost-navy-700: #1B3A5C;
    --frost-ice-50:   #F4F7FA;
    --frost-ice-100:  #E5EBF0;
    --frost-ice-200:  #D5DEE7;
    --frost-slate-400:#8E97A4;
    --frost-slate-500:#6B7785;
    --frost-slate-700:#3D4854;
    --frost-bone:     #FAFAF7;
    --frost-accent:   #7FA3C4;
    --frost-success:  #4A8B6B;
    --frost-error:    #C44545;
    --frost-ease:     cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Romper max-width del padre Hello Elementor ---------- */
body.single-product .site-main,
body.single-product .page-content,
body.single-product main.site-main,
body.single-product .woocommerce,
body.single-product .woocommerce-notices-wrapper {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.single-product .site-main {
    background: var(--frost-bone) !important;
}

/* ---------- Reset de tipografía y elementos default WC que NO usamos ---------- */
body.single-product {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    color: var(--frost-navy-900) !important;
    background: var(--frost-bone) !important;
    -webkit-font-smoothing: antialiased;
}

body.single-product .product_title,
body.single-product .woocommerce-breadcrumb,
body.single-product .woocommerce-tabs,
body.single-product .woocommerce-product-rating,
body.single-product .price,
body.single-product .woocommerce-product-details__short-description {
    /* Estos los pintamos nosotros — ocultar los originales si quedan */
    display: none !important;
}

body.single-product div.product .woocommerce-product-gallery {
    /* Liberamos la galería del default WC */
    width: 100% !important;
    float: none !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
}

body.single-product div.product .woocommerce-product-gallery__image {
    width: 100% !important;
}

/* Flechas/dots de Flexslider por si quedaran restos */
body.single-product .flex-control-nav,
body.single-product .flex-direction-nav,
body.single-product .zoomImg {
    display: none !important;
}

/* ---------- Notices de WC (mensaje "se añadió al carrito") ---------- */
body.single-product .woocommerce-notices-wrapper {
    max-width: 1600px;
    margin: 0 auto !important;
    padding: 24px 56px 0 !important;
}

body.single-product .woocommerce-message,
body.single-product .woocommerce-info,
body.single-product .woocommerce-error {
    background: var(--frost-bone) !important;
    border: 1px solid var(--frost-ice-100) !important;
    border-left: 3px solid var(--frost-accent) !important;
    border-radius: 2px !important;
    padding: 18px 24px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--frost-navy-900) !important;
    box-shadow: none !important;
}

body.single-product .woocommerce-message::before,
body.single-product .woocommerce-info::before {
    color: var(--frost-accent) !important;
}

body.single-product .woocommerce-message a.button,
body.single-product .woocommerce-info a.button {
    background: transparent !important;
    color: var(--frost-navy-900) !important;
    border: 1px solid var(--frost-ice-200) !important;
    padding: 10px 20px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: all 0.3s var(--frost-ease) !important;
}

body.single-product .woocommerce-message a.button:hover {
    border-color: var(--frost-navy-700) !important;
    background: var(--frost-ice-50) !important;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
body.single-product .frost-breadcrumb {
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px 56px 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--frost-slate-500);
    display: flex;
    gap: 12px;
    align-items: center;
}

body.single-product .frost-breadcrumb a {
    color: var(--frost-slate-500);
    text-decoration: none;
    transition: color 0.2s;
}

body.single-product .frost-breadcrumb a:hover { color: var(--frost-navy-900); }
body.single-product .frost-breadcrumb .sep { color: var(--frost-ice-200); }
body.single-product .frost-breadcrumb .current { color: var(--frost-navy-900); }

/* ============================================================
   HERO · 2 COLUMNAS
   ============================================================ */
body.single-product .frost-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
    padding: 40px 56px 100px;
    align-items: start;
    max-width: 1600px;
    margin: 0 auto;
}

/* ---------- Galería ---------- */
body.single-product .frost-gallery {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 24px;
}

/* Modo galería con una sola imagen — la main toma todo el ancho */
body.single-product .frost-gallery--single {
    grid-template-columns: 1fr;
}

/* Limitar el ancho máximo de la imagen única para que no se vea desproporcionada */
body.single-product .frost-gallery--single .frost-main-image {
    max-width: 640px;
}

body.single-product .frost-thumbs {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.single-product .frost-thumb {
    width: 92px;
    height: 110px;
    background: linear-gradient(135deg, var(--frost-ice-100), var(--frost-ice-200));
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--frost-ease);
    border: 1px solid transparent;
    padding: 0;
}

body.single-product .frost-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.single-product .frost-thumb.active {
    border-color: var(--frost-navy-900);
}

body.single-product .frost-thumb:not(.active):hover {
    transform: translateY(-2px);
}

/* ---------- Imagen principal ---------- */
body.single-product .frost-main-image {
    position: relative;
    aspect-ratio: 4/5;
    background: linear-gradient(160deg, #DCE4EB 0%, #B9C7D5 50%, #8FA3B8 100%);
    border-radius: 4px;
    overflow: hidden;
    cursor: zoom-in;
}

/* Capa de "hielos" decorativos */
body.single-product .frost-ice-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

body.single-product .frost-ice-shard {
    position: absolute;
    background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
    border: 1px solid rgba(255,255,255,0.3);
}

body.single-product .frost-shard-1 {
    width: 180px; height: 120px;
    bottom: 18%; left: -30px;
    transform: rotate(15deg) skew(-15deg);
    clip-path: polygon(0 100%, 30% 0, 100% 40%, 80% 100%);
    opacity: 0.7;
}

body.single-product .frost-shard-2 {
    width: 160px; height: 140px;
    bottom: 12%; right: -20px;
    transform: rotate(-10deg);
    clip-path: polygon(20% 100%, 0 30%, 60% 0, 100% 60%, 80% 100%);
    opacity: 0.55;
}

body.single-product .frost-shard-3 {
    width: 90px; height: 70px;
    bottom: 25%; left: 38%;
    transform: rotate(25deg);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    opacity: 0.5;
}

body.single-product .frost-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    width: 70%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 65%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

body.single-product .frost-bottle-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8%;
}

body.single-product .frost-bottle-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 40px rgba(15, 38, 64, 0.25));
    transition: opacity 0.4s var(--frost-ease);
}

body.single-product .frost-product-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--frost-bone);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--frost-navy-900);
    z-index: 3;
}

body.single-product .frost-zoom-hint {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(15, 38, 64, 0.85);
    color: var(--frost-bone);
    padding: 10px 14px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s var(--frost-ease);
    pointer-events: none;
}

body.single-product .frost-main-image:hover .frost-zoom-hint { opacity: 1; }

/* ============================================================
   COLUMNA DE INFO
   ============================================================ */
body.single-product .frost-info {
    padding: 20px 0 0 80px;
    position: sticky;
    top: 110px;
}

body.single-product .frost-info-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--frost-slate-500);
    margin-bottom: 18px;
}

body.single-product .frost-info-eyebrow .dot {
    color: var(--frost-ice-200);
    margin: 0 10px;
}

body.single-product .frost-info-title {
    font-size: clamp(36px, 4.5vw, 56px) !important;
    font-weight: 200 !important;
    color: var(--frost-navy-900) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
}

body.single-product .frost-info-price {
    font-size: 32px;
    font-weight: 300;
    color: var(--frost-navy-900);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    line-height: 1.2;
}

body.single-product .frost-info-price .currency {
    font-size: 14px;
    color: var(--frost-slate-500);
    font-weight: 400;
    margin-left: 4px;
}

body.single-product .frost-info-price-tax {
    font-size: 11px;
    font-weight: 400;
    color: var(--frost-slate-500);
    letter-spacing: 0.06em;
    margin-bottom: 36px;
}

body.single-product .frost-info-divider {
    height: 1px;
    background: var(--frost-ice-100);
    margin: 0 0 36px;
}

body.single-product .frost-info-desc {
    font-size: 15px;
    line-height: 1.75;
    color: var(--frost-slate-700);
    font-weight: 300;
    margin-bottom: 40px;
    max-width: 460px;
}

body.single-product .frost-info-desc p { margin: 0 0 12px; }
body.single-product .frost-info-desc p:last-child { margin-bottom: 0; }

/* ---------- Form de añadir al carrito ---------- */
body.single-product form.cart {
    margin: 0 0 28px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

body.single-product .frost-purchase-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 14px;
    margin-bottom: 0;
}

body.single-product .frost-quantity {
    display: grid !important;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    border: 1px solid var(--frost-ice-200);
    border-radius: 2px;
    height: 56px;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
}

body.single-product .frost-quantity button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--frost-navy-900);
    height: 100%;
    transition: background 0.2s;
    font-family: inherit;
    padding: 0;
}

body.single-product .frost-quantity button:hover { background: var(--frost-ice-50); }

body.single-product .frost-quantity input.qty,
body.single-product .frost-quantity input[type="number"] {
    border: none !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--frost-navy-900) !important;
    background: transparent !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
    font-family: inherit !important;
}

body.single-product .frost-quantity input::-webkit-outer-spin-button,
body.single-product .frost-quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.single-product .frost-quantity input:focus { outline: none !important; }

body.single-product .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button {
    background: var(--frost-navy-700) !important;
    color: var(--frost-bone) !important;
    border: none !important;
    height: 56px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    border-radius: 2px !important;
    transition: all 0.3s var(--frost-ease) !important;
    font-family: 'Montserrat', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px;
    width: 100% !important;
    padding: 0 24px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: 1 !important;
}

body.single-product .single_add_to_cart_button:hover {
    background: var(--frost-navy-900) !important;
    transform: translateY(-1px);
}

body.single-product .single_add_to_cart_button svg {
    transition: transform 0.3s var(--frost-ease);
    flex-shrink: 0;
}

body.single-product .single_add_to_cart_button:hover svg {
    transform: translateX(4px);
}

/* Estados disabled / loading */
body.single-product .single_add_to_cart_button.disabled,
body.single-product .single_add_to_cart_button:disabled {
    background: var(--frost-slate-400) !important;
    cursor: not-allowed;
    transform: none !important;
}

body.single-product .single_add_to_cart_button.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ---------- Trust signals ---------- */
body.single-product .frost-trust {
    border-top: 1px solid var(--frost-ice-100);
    padding-top: 28px;
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

body.single-product .frost-trust-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.single-product .frost-trust-item svg {
    width: 18px;
    height: 18px;
    color: var(--frost-navy-900);
    margin-bottom: 4px;
}

body.single-product .frost-trust-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--frost-navy-900);
}

body.single-product .frost-trust-text {
    font-size: 12px;
    font-weight: 300;
    color: var(--frost-slate-500);
    line-height: 1.5;
}

/* ============================================================
   ANATOMÍA · SPECS
   ============================================================ */
body.single-product .frost-anatomy {
    background: var(--frost-bone);
    border-top: 1px solid var(--frost-ice-100);
    border-bottom: 1px solid var(--frost-ice-100);
    padding: 100px 56px;
}

body.single-product .frost-anatomy-inner {
    max-width: 1600px;
    margin: 0 auto;
}

body.single-product .frost-section-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--frost-slate-500);
    margin-bottom: 24px;
}

body.single-product .frost-section-title {
    font-size: clamp(32px, 3.5vw, 44px);
    font-weight: 200;
    color: var(--frost-navy-900);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 70px;
    max-width: 600px;
    font-family: 'Montserrat', sans-serif;
}

body.single-product .frost-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--frost-ice-100);
    border-left: 1px solid var(--frost-ice-100);
}

body.single-product .frost-spec {
    padding: 36px 32px;
    border-right: 1px solid var(--frost-ice-100);
    border-bottom: 1px solid var(--frost-ice-100);
    transition: background 0.3s var(--frost-ease);
}

body.single-product .frost-spec:hover {
    background: var(--frost-ice-50);
}

body.single-product .frost-spec-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--frost-slate-500);
    margin-bottom: 16px;
}

body.single-product .frost-spec-value {
    font-size: 28px;
    font-weight: 200;
    color: var(--frost-navy-900);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 8px;
}

body.single-product .frost-spec-unit {
    font-size: 13px;
    font-weight: 400;
    color: var(--frost-slate-500);
}

body.single-product .frost-spec-detail {
    font-size: 12px;
    font-weight: 300;
    color: var(--frost-slate-700);
    line-height: 1.55;
    margin-top: 10px;
}

/* ============================================================
   STORY BLOCK · DARK
   ============================================================ */
body.single-product .frost-story {
    background: var(--frost-navy-900);
    color: var(--frost-bone);
    padding: 120px 56px;
    position: relative;
    overflow: hidden;
}

body.single-product .frost-story::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 70%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(127, 163, 196, 0.18), transparent 60%);
    pointer-events: none;
}

body.single-product .frost-story-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 100px;
    align-items: center;
    position: relative;
    z-index: 1;
}

body.single-product .frost-story-text .frost-section-eyebrow {
    color: var(--frost-accent);
}

body.single-product .frost-story-title {
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 200;
    color: var(--frost-bone);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 32px;
    font-family: 'Montserrat', sans-serif;
}

body.single-product .frost-story-title em {
    font-style: italic;
    font-weight: 300;
    color: var(--frost-accent);
}

body.single-product .frost-story-body {
    font-size: 15px;
    line-height: 1.8;
    color: var(--frost-ice-200);
    font-weight: 300;
    margin-bottom: 16px;
}

body.single-product .frost-story-image {
    aspect-ratio: 4/5;
    background: linear-gradient(160deg, #1B3A5C 0%, #0F2640 100%);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

body.single-product .frost-story-image .frost-halo {
    background: radial-gradient(circle, rgba(127, 163, 196, 0.35) 0%, transparent 65%);
}

body.single-product .frost-story-image img {
    max-width: 70%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.4));
}

/* ============================================================
   COLECCIÓN AL FINAL · usa el partial collection-grid.php
   El partial pinta .fs-outro / .fs-grid / .fs-card con
   variables CSS --card-color y --card-color-dark inyectadas
   inline desde PHP por cada termo.
   ============================================================ */
body.single-product .fs-outro {
    position: relative;
    z-index: 2;
    padding: 100px 56px;
    background: var(--frost-bone);
}

body.single-product .fs-outro-inner {
    max-width: 1600px;
    margin: 0 auto;
}

body.single-product .fs-outro-divider {
    height: 1px;
    background: var(--frost-ice-100);
    margin-bottom: 64px;
    transform-origin: left center;
}

body.single-product .fs-outro-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 60px;
}

body.single-product .fs-outro-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 200;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--frost-navy-900);
    font-family: 'Montserrat', sans-serif;
}

body.single-product .fs-outro-meta {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--frost-slate-500);
}

body.single-product .fs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 0;
}

/* ---------- Cards con sistema --card-color ---------- */
body.single-product .fs-card {
    --card-color: #FAFAF7;
    --card-color-dark: #B9C7D5;

    border-radius: 6px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 0.78;
    cursor: pointer;
    transition: transform 0.5s var(--frost-ease);
    display: block;
    text-decoration: none;
    color: inherit;
}

body.single-product .fs-card:hover {
    transform: translateY(-6px);
}

/* Variante "Próximamente" — sin link real */
body.single-product .fs-card--soon {
    cursor: default;
}

body.single-product .fs-card--soon:hover {
    transform: translateY(-3px);
}

body.single-product .fs-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--card-color) 0%, var(--card-color-dark) 100%);
}

body.single-product .fs-card-bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    width: 75%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 60%);
    border-radius: 50%;
}

/* Velo navy adicional sobre cards "soon" */
body.single-product .fs-card--soon .fs-card-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 38, 64, 0.18);
}

body.single-product .fs-card-product {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    width: 72%;
    max-width: 340px;
    height: auto;
    z-index: 2;
    object-fit: contain;
    filter: drop-shadow(0 30px 40px rgba(15, 38, 64, 0.4));
}

body.single-product .fs-card-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    background: rgba(250, 250, 247, 0.95);
    padding: 7px 14px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--frost-navy-900);
    z-index: 3;
}

body.single-product .fs-card-badge--soon {
    background: rgba(15, 38, 64, 0.85);
    color: var(--frost-bone);
}

body.single-product .fs-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 22px 22px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    color: var(--frost-bone);
    z-index: 3;
}

body.single-product .fs-card-name {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

body.single-product .fs-card-cap {
    font-size: 11px;
    font-weight: 300;
    color: rgba(250, 250, 247, 0.7);
    margin-bottom: 4px;
}

body.single-product .fs-card-price {
    font-size: 13px;
    font-weight: 400;
}

body.single-product .fs-card-plus {
    position: absolute;
    bottom: 22px;
    right: 22px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(250, 250, 247, 0.5);
    border-radius: 50%;
    background: transparent;
    color: var(--frost-bone);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: all 0.3s var(--frost-ease);
}

body.single-product .fs-card-plus svg {
    transition: transform 0.3s var(--frost-ease);
}

body.single-product .fs-card:hover .fs-card-plus {
    background: var(--frost-bone);
    color: var(--frost-navy-900);
    border-color: var(--frost-bone);
}

body.single-product .fs-card:hover .fs-card-plus svg {
    transform: rotate(90deg);
}

/* ============================================================
   STICKY MOBILE BAR
   ============================================================ */
body.single-product .frost-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--frost-bone);
    border-top: 1px solid var(--frost-ice-100);
    padding: 14px 20px;
    display: none;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    z-index: 50;
    box-shadow: 0 -4px 20px rgba(15, 38, 64, 0.06);
    transform: translateY(100%);
    transition: transform 0.4s var(--frost-ease);
}

body.single-product .frost-sticky-bar.visible {
    transform: translateY(0);
}

body.single-product .frost-sticky-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.single-product .frost-sticky-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--frost-navy-900);
}

body.single-product .frost-sticky-price {
    font-size: 12px;
    font-weight: 300;
    color: var(--frost-slate-500);
}

body.single-product .frost-sticky-cta {
    background: var(--frost-navy-700);
    color: var(--frost-bone);
    border: none;
    padding: 14px 22px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
}

body.single-product .frost-sticky-cta:hover {
    background: var(--frost-navy-900);
}

/* ============================================================
   ANIMACIONES DE ENTRADA
   ============================================================ */
@keyframes frostFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

body.single-product .frost-info-eyebrow { animation: frostFadeUp 0.6s var(--frost-ease) 0.1s both; }
body.single-product .frost-info-title { animation: frostFadeUp 0.7s var(--frost-ease) 0.2s both; }
body.single-product .frost-info-price,
body.single-product .frost-info-price-tax { animation: frostFadeUp 0.7s var(--frost-ease) 0.3s both; }
body.single-product .frost-info-desc { animation: frostFadeUp 0.7s var(--frost-ease) 0.4s both; }
body.single-product form.cart { animation: frostFadeUp 0.7s var(--frost-ease) 0.5s both; }
body.single-product .frost-trust { animation: frostFadeUp 0.7s var(--frost-ease) 0.6s both; }
body.single-product .frost-gallery { animation: frostFadeUp 0.8s var(--frost-ease) both; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    body.single-product .frost-hero {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 30px 32px 80px;
    }
    body.single-product .frost-info {
        padding: 0;
        position: static;
    }
    body.single-product .fs-grid { grid-template-columns: repeat(2, 1fr); }
    body.single-product .frost-specs-grid { grid-template-columns: repeat(2, 1fr); }
    body.single-product .frost-story-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    body.single-product .frost-anatomy,
    body.single-product .frost-story,
    body.single-product .fs-outro {
        padding-left: 32px;
        padding-right: 32px;
    }
    body.single-product .woocommerce-notices-wrapper {
        padding: 24px 32px 0 !important;
    }
    /* Centrar la galería cuando hero pasa a 1 columna */
    body.single-product .frost-gallery {
        max-width: 640px;
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    body.single-product .fs-outro {
        padding: 80px 32px;
    }
    body.single-product .fs-outro-divider {
        margin-bottom: 40px;
    }
    body.single-product .fs-outro-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 40px;
    }
}

@media (max-width: 700px) {
    body.single-product .frost-breadcrumb { padding: 20px 20px 0; }
    body.single-product .frost-hero { padding: 24px 20px 60px; }
    body.single-product .frost-gallery {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    body.single-product .frost-thumbs {
        flex-direction: row;
        order: 2;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    body.single-product .frost-thumb {
        flex-shrink: 0;
        width: 78px;
        height: 92px;
    }
    body.single-product .frost-main-image { order: 1; }
    body.single-product .frost-info-title { font-size: 32px !important; }
    body.single-product .frost-specs-grid { grid-template-columns: 1fr; }
    body.single-product .fs-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    body.single-product .frost-anatomy,
    body.single-product .frost-story { padding: 70px 20px; }
    body.single-product .fs-outro { padding: 60px 20px 80px; }
    body.single-product .frost-purchase-row { grid-template-columns: 110px 1fr; }
    body.single-product .frost-trust { grid-template-columns: 1fr; gap: 16px; }
    body.single-product .frost-sticky-bar { display: grid; }
    body.single-product .frost-info { padding-bottom: 80px; }
    body.single-product .woocommerce-notices-wrapper {
        padding: 20px !important;
    }
}

@media (max-width: 420px) {
    body.single-product .frost-info-title { font-size: 28px !important; }
    body.single-product .frost-info-price { font-size: 26px; }
    body.single-product .frost-section-title { font-size: 26px; }
    body.single-product .fs-outro-title { font-size: 28px; }
    body.single-product .frost-spec { padding: 28px 22px; }
    body.single-product .frost-spec-value { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    body.single-product .fs-card,
    body.single-product .fs-card-plus,
    body.single-product .fs-card-plus svg {
        transition-duration: 0.2s !important;
    }
}

/* ============================================================
   AJUSTES MÓVIL · refinements
   - Galería más rápida al cambiar foto
   - Padding lateral más amplio
   - Espacio header → breadcrumb reducido
   - Trust signals centrados
   ============================================================ */

/* Hacer la transición de la imagen principal más rápida (de 400ms a 180ms) */
body.single-product .frost-bottle-wrap img {
    transition: opacity 0.18s var(--frost-ease) !important;
}

/* === MÓVIL ≤700px === */
@media (max-width: 700px) {

    /* 1. Reducir espacio entre header y breadcrumb */
    body.single-product .frost-breadcrumb {
        padding: 12px 20px 0 !important;
    }

    /* 2. Más respiro lateral en hero · de 20px → 24px */
    body.single-product .frost-hero {
        padding: 16px 24px 60px !important;
    }

    /* 3. Más respiro lateral en anatomía y story */
    body.single-product .frost-anatomy,
    body.single-product .frost-story {
        padding: 70px 24px !important;
    }

    /* 4. Más respiro lateral en outro de colección */
    body.single-product .fs-outro {
        padding: 60px 24px 80px !important;
    }

    /* 5. Más respiro en notices de WC */
    body.single-product .woocommerce-notices-wrapper {
        padding: 16px 24px 0 !important;
    }

    /* 6. Trust signals · alinear al centro en móvil */
    body.single-product .frost-trust {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        text-align: center !important;
    }

    body.single-product .frost-trust-item {
        align-items: center !important;
    }

    body.single-product .frost-trust-item svg {
        margin: 0 auto 4px !important;
    }
}

/* === MÓVIL CHICO ≤420px === */
@media (max-width: 420px) {

    /* Mantener el padding lateral generoso */
    body.single-product .frost-breadcrumb {
        padding: 12px 24px 0 !important;
    }

    body.single-product .frost-hero {
        padding: 14px 24px 60px !important;
    }
}
/* ============================================================
   FIX MÓVIL · Galería e info no deben desbordarse
   ============================================================ */
@media (max-width: 700px) {

    /* La galería NO debe expandirse más allá del padre */
    body.single-product .frost-gallery {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    /* Los thumbs (que están en row con scroll) tampoco deben empujar al padre */
    body.single-product .frost-thumbs {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* La columna info y todo lo que contiene */
    body.single-product .frost-info {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    /* El form de añadir al carrito */
    body.single-product form.cart {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* La fila de purchase (cantidad + botón) */
    body.single-product .frost-purchase-row {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Botón añadir al carrito · que respete el ancho disponible */
    body.single-product .single_add_to_cart_button,
    body.single-product button.single_add_to_cart_button {
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: 10px !important;
        letter-spacing: 0.18em !important;
        padding: 0 16px !important;
    }

    /* Hero garantizar que NO permite overflow horizontal a sus hijos */
    body.single-product .frost-hero {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    /* Body sin scroll horizontal */
    body.single-product {
        overflow-x: hidden !important;
    }
}
/* ============================================================
   SWATCHES DE COLOR EN CARDS · grid de colección en producto
   ============================================================ */
body.single-product .fs-card-swatches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
    max-width: calc(100% - 52px);
}
body.single-product .fs-card-swatch {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    display: inline-block;
}
body.single-product .fs-card-swatch-count {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.7);
    margin-left: 3px;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   FRØST · SINGLE PRODUCT REBRAND (Dare to Differ · oscuro)
   Override aditivo al final del archivo.
   Scoped 100% a body.single-product · no afecta otras páginas.
   Mantiene galería, layout y termo intactos · solo cambia el
   lenguaje cromático para alinearse con Home + Nosotros.
   ════════════════════════════════════════════════════════════ */

/* Variables override solo para single-product */
body.single-product {
    background: #08090B !important;
    color: #FAFAF7 !important;
}

body.single-product .site-main,
body.single-product main.site-main,
body.single-product .page-content,
body.single-product .frost-product {
    background: #08090B !important;
}

/* Header transparente sobre el fondo oscuro */
body.single-product .frost-header:not(.scrolled) {
    background: transparent;
}
body.single-product .frost-header:not(.scrolled) .frost-header-logo,
body.single-product .frost-header:not(.scrolled) .frost-header-nav a,
body.single-product .frost-header:not(.scrolled) .frost-header-icon {
    color: #FAFAF7;
}
body.single-product .frost-header:not(.scrolled) .frost-header-hamburger span {
    background: #FAFAF7;
}

/* ═════ BREADCRUMB ═════ */
body.single-product .frost-breadcrumb {
    color: #8E97A4 !important;
}
body.single-product .frost-breadcrumb a {
    color: #8E97A4 !important;
}
body.single-product .frost-breadcrumb a:hover {
    color: #FAFAF7 !important;
}
body.single-product .frost-breadcrumb .sep {
    color: rgba(127, 163, 196, 0.3) !important;
}
body.single-product .frost-breadcrumb .current {
    color: #FAFAF7 !important;
}

/* ═════ NOTICES de WC ═════ */
body.single-product .woocommerce-message,
body.single-product .woocommerce-info,
body.single-product .woocommerce-error {
    background: #0B1B2E !important;
    border: 1px solid rgba(127, 163, 196, 0.15) !important;
    border-left: 3px solid #7FA3C4 !important;
    color: #FAFAF7 !important;
}
body.single-product .woocommerce-message::before,
body.single-product .woocommerce-info::before {
    color: #7FA3C4 !important;
}
body.single-product .woocommerce-message a.button,
body.single-product .woocommerce-info a.button {
    color: #FAFAF7 !important;
    border-color: rgba(127, 163, 196, 0.35) !important;
}
body.single-product .woocommerce-message a.button:hover {
    border-color: #7FA3C4 !important;
    background: rgba(127, 163, 196, 0.08) !important;
}

/* ═════ HERO · GALERÍA (mantener thumbs visibles, ajustar bordes) ═════ */
body.single-product .frost-thumb {
    background: linear-gradient(135deg, #0B1B2E, #0F2640) !important;
    border-color: rgba(127, 163, 196, 0.15) !important;
}
body.single-product .frost-thumb.active {
    border-color: #7FA3C4 !important;
}

/* La imagen principal mantiene su gradiente actual (queda bien sobre negro) */

/* ═════ HERO · INFO COLUMN ═════ */
body.single-product .frost-info-eyebrow {
    color: #7FA3C4 !important;
    letter-spacing: 0.28em !important;
}
body.single-product .frost-info-eyebrow .dot {
    color: rgba(127, 163, 196, 0.3) !important;
}
body.single-product .frost-info-title {
    color: #FAFAF7 !important;
}
body.single-product .frost-info-price {
    color: #FAFAF7 !important;
}
body.single-product .frost-info-price .currency {
    color: #8E97A4 !important;
}
body.single-product .frost-info-price-tax {
    color: #8E97A4 !important;
}
body.single-product .frost-info-divider {
    background: rgba(127, 163, 196, 0.18) !important;
}
body.single-product .frost-info-desc {
    color: #C7CDD4 !important;
}

/* ═════ FORM · QUANTITY + ADD TO CART ═════ */
body.single-product .frost-quantity {
    border-color: rgba(127, 163, 196, 0.25) !important;
}
body.single-product .frost-quantity button {
    color: #FAFAF7 !important;
}
body.single-product .frost-quantity button:hover {
    background: rgba(127, 163, 196, 0.08) !important;
}
body.single-product .frost-quantity input.qty,
body.single-product .frost-quantity input[type="number"] {
    color: #FAFAF7 !important;
}

/* Botón "Añadir al carrito" · blanco statement como en Home */
body.single-product .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button {
    background: #FAFAF7 !important;
    color: #08090B !important;
    border: 1px solid #FAFAF7 !important;
}
body.single-product .single_add_to_cart_button:hover {
    background: transparent !important;
    color: #FAFAF7 !important;
    transform: translateY(-1px);
}
body.single-product .single_add_to_cart_button.disabled,
body.single-product .single_add_to_cart_button:disabled {
    background: rgba(127, 163, 196, 0.2) !important;
    color: #5A6470 !important;
    border-color: transparent !important;
}

/* ═════ TRUST SIGNALS ═════ */
body.single-product .frost-trust {
    border-top-color: rgba(127, 163, 196, 0.15) !important;
}
body.single-product .frost-trust-item svg {
    color: #7FA3C4 !important;
}
body.single-product .frost-trust-label {
    color: #FAFAF7 !important;
}
body.single-product .frost-trust-text {
    color: #8E97A4 !important;
}

/* ═════ ANATOMÍA · SPECS ═════ */
body.single-product .frost-anatomy {
    background: #08090B !important;
    border-top-color: rgba(127, 163, 196, 0.08) !important;
    border-bottom-color: rgba(127, 163, 196, 0.08) !important;
}
body.single-product .frost-anatomy .frost-section-eyebrow {
    color: #7FA3C4 !important;
    letter-spacing: 0.34em !important;
}
body.single-product .frost-anatomy .frost-section-title {
    color: #FAFAF7 !important;
}
body.single-product .frost-anatomy .frost-section-title em {
    color: #7FA3C4 !important;
    font-style: italic !important;
    font-weight: 300 !important;
}
body.single-product .frost-specs-grid {
    border-top-color: rgba(127, 163, 196, 0.15) !important;
    border-left-color: rgba(127, 163, 196, 0.15) !important;
}
body.single-product .frost-spec {
    border-right-color: rgba(127, 163, 196, 0.15) !important;
    border-bottom-color: rgba(127, 163, 196, 0.15) !important;
}
body.single-product .frost-spec:hover {
    background: rgba(127, 163, 196, 0.04) !important;
}
body.single-product .frost-spec-label {
    color: #7FA3C4 !important;
    letter-spacing: 0.28em !important;
}
body.single-product .frost-spec-value {
    color: #FAFAF7 !important;
}
body.single-product .frost-spec-unit {
    color: #8E97A4 !important;
}
body.single-product .frost-spec-detail {
    color: #C7CDD4 !important;
}

/* ═════ STORY BLOCK · ya es dark, solo afinar ═════ */
body.single-product .frost-story {
    background: #0B1B2E !important;
}
body.single-product .frost-story .frost-section-eyebrow {
    color: #7FA3C4 !important;
    letter-spacing: 0.34em !important;
}
body.single-product .frost-story-title {
    color: #FAFAF7 !important;
}
body.single-product .frost-story-title em {
    color: #7FA3C4 !important;
    font-style: italic !important;
    font-weight: 300 !important;
}
body.single-product .frost-story-body {
    color: #C7CDD4 !important;
}

/* ═════ OUTRO · GRID DE COLECCIÓN AL FINAL ═════
   (Ya estilizado en frost-product.css base. Aquí solo el wrapper) */
body.single-product .fs-outro {
    background: #08090B !important;
    border-top: 1px solid rgba(127, 163, 196, 0.08);
}
body.single-product .fs-outro-divider {
    background: rgba(127, 163, 196, 0.15) !important;
}
body.single-product .fs-outro-title {
    color: #FAFAF7 !important;
}
body.single-product .fs-outro-meta {
    color: #7FA3C4 !important;
    letter-spacing: 0.34em !important;
}

/* ═════ STICKY MOBILE BAR ═════ */
body.single-product .frost-sticky-bar {
    background: #0B1B2E !important;
    border-top-color: rgba(127, 163, 196, 0.15) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
}
body.single-product .frost-sticky-name {
    color: #FAFAF7 !important;
}
body.single-product .frost-sticky-price {
    color: #8E97A4 !important;
}
body.single-product .frost-sticky-cta {
    background: #FAFAF7 !important;
    color: #08090B !important;
}
body.single-product .frost-sticky-cta:hover {
    background: #7FA3C4 !important;
    color: #08090B !important;
}


/* ════════════════════════════════════════════════════════════
   FRØST · SINGLE PRODUCT · SWATCHES DE COLOR (variaciones WC)
   Círculos de color que reemplazan visualmente al <select>
   nativo de WooCommerce. El select queda oculto pero presente
   para que el JS de WC siga manejando precio/stock/imagen.
   ════════════════════════════════════════════════════════════ */

body.single-product .frost-variations {
    margin: 24px 0 28px;
    padding: 24px 0;
    border-top: 1px solid rgba(127, 163, 196, 0.15);
    border-bottom: 1px solid rgba(127, 163, 196, 0.15);
}

body.single-product .frost-attr {
    margin-bottom: 20px;
}
body.single-product .frost-attr:last-child {
    margin-bottom: 0;
}

body.single-product .frost-attr-label {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
body.single-product .frost-attr-label-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #7FA3C4;
}
body.single-product .frost-attr-selected {
    color: #FAFAF7;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
body.single-product .frost-attr-selected:empty::before {
    content: attr(data-default);
    color: #5A6470;
}

/* ───── Swatches (atributos de color) ───── */
body.single-product .frost-swatches {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}
body.single-product .frost-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--swatch-color, #888);
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    outline: 1px solid rgba(127, 163, 196, 0.25);
    outline-offset: 3px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.single-product .frost-swatch:hover {
    outline-color: rgba(127, 163, 196, 0.55);
    transform: scale(1.08);
}
body.single-product .frost-swatch.is-active {
    outline: 2px solid #7FA3C4;
    outline-offset: 4px;
}
body.single-product .frost-swatch[disabled],
body.single-product .frost-swatch.frost-unavailable {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
}
body.single-product .frost-swatch[disabled]:hover,
body.single-product .frost-swatch.frost-unavailable:hover {
    outline-color: rgba(127, 163, 196, 0.25);
}

/* ───── Options (atributos no-color: talla, capacidad, etc) ───── */
body.single-product .frost-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
body.single-product .frost-option {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(127, 163, 196, 0.3);
    color: #FAFAF7;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.single-product .frost-option:hover {
    border-color: #7FA3C4;
}
body.single-product .frost-option.is-active {
    background: #7FA3C4;
    color: #08090B;
    border-color: #7FA3C4;
}
body.single-product .frost-option[disabled],
body.single-product .frost-option.frost-unavailable {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Ocultar selects (los manejamos con swatches) */
body.single-product .frost-attr-select {
    display: none !important;
}

/* WC variation availability / errors */
body.single-product .woocommerce-variation-availability {
    margin-top: 12px;
    color: #C7CDD4;
    font-size: 13px;
}
body.single-product .woocommerce-variation-availability .stock {
    color: #7FA3C4;
    font-weight: 500;
}
body.single-product .woocommerce-variation-availability .out-of-stock {
    color: #C44545;
}

/* Botón disabled cuando no hay selección válida */
body.single-product .single_add_to_cart_button.disabled,
body.single-product .single_add_to_cart_button.wc-variation-selection-needed {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Mobile */
@media (max-width: 760px) {
    body.single-product .frost-swatches {
        gap: 14px;
    }
    body.single-product .frost-swatch {
        width: 32px;
        height: 32px;
    }
    body.single-product .frost-attr-label {
        flex-direction: column;
        gap: 6px;
    }
}

/* ═════ JS de swatches (inline) ═════
   El JS se inyecta desde el template PHP para que solo cargue
   en páginas variables. Aquí solo CSS. */