/* FloresYa — Single Product Stitch Overrides (ITER 2)
 * Target: .single-product body class ONLY
 * Generated: 2026-04-24
 */

/* ============================================================
   -1. Breadcrumbs — OCULTOS (Alex pidió quitarlos)
   ============================================================ */
body.single-product .ct-breadcrumbs,
body.single-product nav.ct-breadcrumbs,
body.single-product .breadcrumb,
body.single-product .breadcrumbs,
body.single-product .yoast-breadcrumb,
body.single-product .woocommerce-breadcrumb {
    display: none !important;
}

/* ============================================================
   0. KILL the Blocksy hero-section blob en single product
   ============================================================ */
body.single-product .hero-section,
body.single-product .hero-section[data-type="type-1"] {
    background: transparent !important;
    background-image: none !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
body.single-product .hero-section::before,
body.single-product .hero-section::after {
    display: none !important;
    content: none !important;
}
/* Page title within hero section stays */
body.single-product .hero-section .page-title,
body.single-product .hero-section .entry-title {
    background: transparent !important;
}

/* ============================================================
   1. Título del producto — Plus Jakarta Sans grande
   ============================================================ */
body.single-product h1.entry-title,
body.single-product h1.product_title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(28px, 3.5vw, 42px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    color: var(--fy-on-surface, #1b1c1c) !important;
    margin: 0 0 16px !important;
}

/* ============================================================
   2. Precio — rose primary, grande
   ============================================================ */
body.single-product .entry-summary > p.price,
body.single-product .entry-summary .price {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(24px, 2.8vw, 32px) !important;
    font-weight: 800 !important;
    color: var(--fy-primary, #b70068) !important;
    margin: 0 0 20px !important;
    display: block;
}
body.single-product .entry-summary .price del {
    color: var(--fy-outline, #8d6f78) !important;
    opacity: 0.7;
    font-size: 0.7em;
    font-weight: 600;
    margin-right: 10px;
}
body.single-product .entry-summary .price ins {
    text-decoration: none;
}

/* ============================================================
   3. Add to cart button — rounded-lg rose (Stitch style)
   ============================================================ */
body.single-product button.single_add_to_cart_button,
body.single-product .single_add_to_cart_button {
    background: var(--fy-primary, #b70068) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px 32px !important;
    width: 100%;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(183, 0, 104, 0.2) !important;
    transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
body.single-product button.single_add_to_cart_button:hover,
body.single-product .single_add_to_cart_button:hover {
    background: var(--fy-secondary, #b21871) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(183, 0, 104, 0.3) !important;
}
body.single-product button.single_add_to_cart_button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   4. Badges — DOM nuevo injectado por PHP (no afecta WC)
   Se inserta ANTES del .summary, aparece flotante si podemos
   anclarlo; si no, sale al top del main. Kept simple.
   ============================================================ */
/* Anchor parent (article.product) para badges absolute */
body.single-product article.product,
body.single-product div.product {
    position: relative;
}
body.single-product .fy-product-badges {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 10;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none;
}
.fy-product-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    padding: 6px 12px !important;
    height: 28px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    box-shadow: 0 4px 12px rgba(27, 28, 28, 0.12) !important;
    width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    pointer-events: auto;
    white-space: nowrap !important;
}
.fy-product-badge .material-symbols-outlined {
    font-size: 14px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}
.fy-product-badge--delivery {
    background: #fff;
    color: var(--fy-primary, #b70068);
    border: 1px solid var(--fy-outline-variant, #e1bdc7);
}
/* Bestseller badge: VERDE (tertiary-fixed) como Stitch — diferenciar de delivery */
.fy-product-badge--bestseller {
    background: #79f9cd;
    color: #002117;
    border: 1px solid #5adcb2;
}

/* ============================================================
   5. Delivery hint card — inserted AFTER add-to-cart button
   ============================================================ */
body.single-product .fy-product-delivery-hint {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--fy-surface-container-low, #f6f3f2);
    border: 1px solid var(--fy-outline-variant, #e1bdc7);
    border-radius: 12px;
}
.fy-product-delivery-hint__line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: var(--fy-on-surface, #1b1c1c);
    margin: 0 0 8px;
}
.fy-product-delivery-hint__line:last-child {
    margin-bottom: 0;
}
.fy-product-delivery-hint__line .material-symbols-outlined {
    font-size: 18px;
    color: var(--fy-primary, #b70068);
    font-variation-settings: 'FILL' 1, 'wght' 500;
    flex-shrink: 0;
}
.fy-product-delivery-hint__line strong {
    font-weight: 700;
    color: var(--fy-primary, #b70068);
}
.fy-product-delivery-hint__line a {
    color: var(--fy-primary, #b70068);
    font-weight: 700;
    text-decoration: none;
}
.fy-product-delivery-hint__line a:hover {
    text-decoration: underline;
}

/* Countdown timer line — más prominente */
.fy-product-delivery-hint__timer strong {
    font-weight: 800 !important;
    color: var(--fy-primary, #b70068);
    background: rgba(183, 0, 104, 0.08);
    padding: 1px 6px;
    border-radius: 6px;
}

/* Size Guide link — top-right del label de variations */
body.single-product .fy-size-guide-link {
    margin: 0 0 -8px !important;
    padding: 0 !important;
    text-align: right;
    font-size: 12px;
}
body.single-product .fy-size-guide-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    color: var(--fy-on-surface-variant, #594043) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--fy-outline-variant, #e1bdc7) !important;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color 150ms ease;
}
body.single-product .fy-size-guide-trigger:hover {
    color: var(--fy-primary, #b70068) !important;
    text-decoration-color: var(--fy-primary, #b70068) !important;
}
body.single-product .fy-size-guide-trigger .material-symbols-outlined {
    font-size: 14px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

/* Description con border-bottom (como Stitch) */
body.single-product .woocommerce-product-details__short-description {
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--fy-outline-variant, #e1bdc7) !important;
    margin-bottom: 24px !important;
}

/* ============================================================
   6. Description con bottom border separator
   ============================================================ */
body.single-product .woocommerce-product-details__short-description,
body.single-product .entry-summary > p:not(.price):not(.fy-product-delivery-hint__line) {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--fy-on-surface-variant, #594043) !important;
    margin: 0 0 24px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid var(--fy-outline-variant, #e1bdc7) !important;
}

/* ============================================================
   7. Image gallery polish — rounded-xl + shadow (no bg blob)
   ============================================================ */
body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .flexy-view {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(27, 28, 28, 0.05);
}
body.single-product .woocommerce-product-gallery__wrapper img,
body.single-product .flexy-view img {
    border-radius: 12px;
}
/* Thumbnails — rounded-lg */
body.single-product .flexy-pills li,
body.single-product .flexy-pills [role="button"] {
    border-radius: 8px;
    overflow: hidden;
    transition: outline 150ms ease, transform 150ms ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
}
body.single-product .flexy-pills [role="button"][aria-selected="true"],
body.single-product .flexy-pills li.active [role="button"],
body.single-product .flexy-pills li.flexy-pill-active [role="button"] {
    outline-color: var(--fy-primary, #b70068);
}

/* ============================================================
   9. Variation cards (vanilla JS bridge al <select> nativo WC)
   ============================================================ */
body.single-product .fy-variation-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin: 8px 0 16px;
    width: 100%;
}
body.single-product .fy-variation-card {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background: var(--fy-surface, #fbf9f8);
    border: 1.5px solid var(--fy-outline-variant, #e1bdc7);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--fy-on-surface, #1b1c1c);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 72px;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
body.single-product .fy-variation-card:hover {
    background: var(--fy-surface-container-low, #f6f3f2);
    transform: translateY(-1px);
}
body.single-product .fy-variation-card:focus-visible {
    outline: 2px solid var(--fy-primary, #b70068);
    outline-offset: 2px;
}
body.single-product .fy-variation-card.is-selected {
    border-color: var(--fy-primary, #b70068);
    background: var(--fy-primary-container, #df1e82);
    color: #fff;
    box-shadow: 0 4px 16px rgba(183, 0, 104, 0.18);
}
body.single-product .fy-variation-card__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
body.single-product .fy-variation-card__sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
    line-height: 1.2;
}
body.single-product .fy-variation-card.is-selected .fy-variation-card__sub {
    opacity: 0.95;
}

/* Precio diferencial — solo muestra si hay variation con upgrade ("+$30") */
body.single-product .fy-variation-card__price {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
    color: var(--fy-primary, #b70068);
    line-height: 1.2;
}
body.single-product .fy-variation-card.is-selected .fy-variation-card__price {
    color: #fff;
    opacity: 0.95;
}

/* Compact mode (>6 opciones) — más cards por row */
body.single-product .fy-variation-cards--compact {
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
    gap: 8px;
}
body.single-product .fy-variation-cards--compact .fy-variation-card {
    padding: 10px 8px;
    min-height: 60px;
}
body.single-product .fy-variation-cards--compact .fy-variation-card__title {
    font-size: 13px;
}
body.single-product .fy-variation-cards--compact .fy-variation-card__price {
    font-size: 11px;
}

/* Hide the native <th> "Presentación" label cuando se inyectan los cards
   (porque queda redundante al lado) — opcional, si Alex lo quiere visible
   comentar este bloque */
body.single-product table.variations th.label {
    display: none;
}
body.single-product table.variations td.value {
    width: 100%;
    padding: 0;
}
body.single-product table.variations,
body.single-product table.variations tbody,
body.single-product table.variations tr {
    display: block;
    width: 100%;
}

/* Reset link "Limpiar" — más sutil */
body.single-product .reset_variations {
    display: inline-block;
    font-size: 12px;
    color: var(--fy-outline, #8d6f78);
    text-decoration: none;
    margin-top: 8px;
}
body.single-product .reset_variations:hover {
    color: var(--fy-primary, #b70068);
    text-decoration: underline;
}

/* ============================================================
   8. MOBILE
   ============================================================ */
/* ============================================================
   10. BENTO LAYOUT 7+5 cols (Stitch alignment)
   ============================================================ */
@media (min-width: 880px) {
    body.single-product div.product,
    body.single-product .product-entry-wrapper,
    body.single-product article.product .product-entry-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
        gap: 48px !important;
        max-width: 1280px !important;
        margin: 24px auto !important;
        padding: 0 24px !important;
        align-items: start !important;
    }
    body.single-product .woocommerce-product-gallery,
    body.single-product .ct-product-gallery-container {
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        grid-column: 1 !important;
    }
    body.single-product .summary,
    body.single-product .entry-summary {
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        grid-column: 2 !important;
    }
    /* Tabs (Descripción / Información adicional) → full-width abajo */
    body.single-product .woocommerce-tabs,
    body.single-product .ct-product-tabs,
    body.single-product .upsells.products,
    body.single-product .related.products {
        grid-column: 1 / -1 !important;
        margin-top: 48px !important;
    }
}

/* Variation cards 3-col cuando hay 3-4 opciones (Stitch default) */
body.single-product .fy-variation-cards:not(.fy-variation-cards--compact) {
    grid-template-columns: repeat(3, 1fr) !important;
}
body.single-product .fy-variation-cards:not(.fy-variation-cards--compact):has(> .fy-variation-card:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
}
body.single-product .fy-variation-cards:not(.fy-variation-cards--compact):has(> .fy-variation-card:only-child),
body.single-product .fy-variation-cards:not(.fy-variation-cards--compact):has(> .fy-variation-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

/* "Add a Little Extra" — upsells/related con look Stitch */
body.single-product .upsells.products,
body.single-product .related.products {
    max-width: 1280px !important;
    margin: 64px auto 0 !important;
    padding: 0 24px !important;
}
body.single-product .upsells.products > h2,
body.single-product .related.products > h2 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(20px, 2.2vw, 26px) !important;
    font-weight: 700 !important;
    color: var(--fy-on-surface, #1b1c1c) !important;
    text-align: left !important;
    margin: 0 0 20px !important;
}
body.single-product .upsells.products ul.products,
body.single-product .related.products ul.products {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
}
body.single-product .upsells.products .fy-card,
body.single-product .related.products .fy-card {
    border-radius: 14px !important;
    border: 1px solid var(--fy-outline-variant, #e1bdc7) !important;
}

/* ============================================================
   11. Sticky ATC bar mobile — apareció scroll al pasar el form
   ============================================================ */
@media (max-width: 768px) {
    body.single-product .ct-cart-actions,
    body.single-product .single_add_to_cart_button {
        /* No sticky aún: deja que la página fluya */
    }
    /* Si quieres sticky CTA agrega: position: sticky; bottom: 0 */
}

/* ============================================================
   8. MOBILE polish
   ============================================================ */
@media (max-width: 768px) {
    body.single-product h1.entry-title,
    body.single-product h1.product_title {
        font-size: clamp(24px, 7vw, 32px) !important;
    }
    body.single-product .entry-summary > p.price,
    body.single-product .entry-summary .price {
        font-size: clamp(22px, 6vw, 28px) !important;
    }
    body.single-product button.single_add_to_cart_button {
        padding: 14px 24px !important;
        font-size: 14px !important;
    }
    body.single-product .fy-product-badges {
        top: 8px !important;
        left: 8px !important;
    }
    .fy-product-badge {
        font-size: 10px !important;
        padding: 5px 10px !important;
        height: 24px !important;
    }
}