/* ==========================================================================
   FG PRODUCT PAGE — Phase 1: Editorial Two-Panel Canvas
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE WRAPPER
   Clears the fixed header so content starts below it
   -------------------------------------------------------------------------- */
.fg-product-page {
    padding-top: var(--fg_header_height);
    background-color: var(--fg_canvas);
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   TWO-PANEL LAYOUT
   Left panel sticks; right panel scrolls
   -------------------------------------------------------------------------- */
.fg-product-layout {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

/* --------------------------------------------------------------------------
   LEFT PANEL — Sticky Gallery
   -------------------------------------------------------------------------- */
.fg-product-gallery {
    position: sticky;
    top: var(--fg_header_height);
    width: 50%;
    height: calc(100vh - var(--fg_header_height));
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    background-color: var(--fg_surface_soft);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   THUMBNAIL STRIP — Vertical, left edge of gallery panel
   -------------------------------------------------------------------------- */
.fg-gallery-thumb-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fg_space_2);
    width: 72px;
    flex-shrink: 0;
    padding: var(--fg_space_6) var(--fg_space_3);
    z-index: 2;
}

.fg-gallery-thumb {
    position: relative;
    width: 52px;
    height: 68px;
    border-radius: var(--fg_radius_sm);
    overflow: hidden;
    border: 2px solid transparent;
    background: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.5;
    flex-shrink: 0;
    transition:
        opacity var(--fg_duration_base) var(--fg_ease_emphasis),
        border-color var(--fg_duration_base) var(--fg_ease_emphasis);
}

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

.fg-gallery-thumb:hover {
    opacity: 0.8;
}

.fg-gallery-thumb.is-active {
    border-color: var(--fg_brand);
    opacity: 1;
}

.fg-gallery-thumb:focus-visible {
    outline: none;
    box-shadow: var(--fg_focus_outline);
}

/* --------------------------------------------------------------------------
   MAIN IMAGE AREA
   Images stack on top of each other; active one fades in
   -------------------------------------------------------------------------- */
.fg-gallery-main {
    position: relative;
    flex: 1;
    height: 100%;
    overflow: hidden;
    background-color: var(--fg_surface_soft);
}

.fg-gallery-main-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transition: opacity 0.45s var(--fg_ease_emphasis);
    will-change: opacity;
}

.fg-gallery-main-image.is-active {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   RIGHT PANEL — Scrolling Product Information
   Phase 2 fills this with real content
   -------------------------------------------------------------------------- */
.fg-product-info {
    flex: 1;
    min-height: calc(100vh - var(--fg_header_height));
    padding: var(--fg_space_16) var(--fg_space_12) var(--fg_space_24);
}

/* --------------------------------------------------------------------------
   PHASE 1 PLACEHOLDER
   Gives the right panel visible height so sticky behavior is testable.
   Removed entirely in Phase 2.
   -------------------------------------------------------------------------- */
.fg-product-info__placeholder {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fg_space_4);
    padding: var(--fg_space_8);
    border: 1px dashed var(--fg_border_default);
    border-radius: var(--fg_radius_md);
}

.fg-phase-badge {
    font-family: var(--fg_font_ui);
    font-size: var(--fg_text_xs);
    font-weight: var(--fg_weight_medium);
    letter-spacing: var(--fg_tracking_wider);
    text-transform: uppercase;
    color: var(--fg_text_on_brand);
    background-color: var(--fg_brand);
    padding: var(--fg_space_1) var(--fg_space_3);
    border-radius: var(--fg_radius_full);
}

.fg-product-info__placeholder p {
    font-family: var(--fg_font_body);
    font-size: var(--fg_text_sm);
    color: var(--fg_text_muted);
    line-height: var(--fg_leading_relaxed);
}

/* Scroll-test spacer — makes the right panel tall enough to demonstrate sticky */
.fg-phase-scroll-test {
    width: 100%;
    height: 200vh;
    background: linear-gradient(
        to bottom,
        var(--fg_surface_soft) 0%,
        var(--fg_surface_alt) 100%
    );
    border-radius: var(--fg_radius_md);
    margin-top: var(--fg_space_8);
    opacity: 0.4;
}

/* ==========================================================================
   RESPONSIVE — Mobile & Tablet
   ========================================================================== */

/* Tablet: narrow the info padding */
@media (max-width: 1200px) {
    .fg-product-info {
        padding: var(--fg_space_12) var(--fg_space_8) var(--fg_space_20);
    }
}

/* Mobile: stack gallery above info */
@media (max-width: 900px) {

    .fg-product-layout {
        flex-direction: column;
    }

    /* Gallery becomes full-width, portrait-height block */
    .fg-product-gallery {
        position: relative;
        top: 0;
        width: 100%;
        height: auto;
        flex-direction: column;
    }

    /* Main image — portrait ratio */
    .fg-gallery-main {
        width: 100%;
        height: 0;
        padding-bottom: 125%; /* 4:5 portrait ratio */
        flex: unset;
        order: 1;
    }

    /* Thumbnails move below the main image as a horizontal row */
    .fg-gallery-thumb-strip {
        order: 2;
        flex-direction: row;
        width: 100%;
        height: auto;
        justify-content: center;
        padding: var(--fg_space_3) var(--fg_container_padding_mobile);
        gap: var(--fg_space_2);
        background-color: var(--fg_surface_alt);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .fg-gallery-thumb-strip::-webkit-scrollbar {
        display: none;
    }

    .fg-gallery-thumb {
        width: 44px;
        height: 56px;
        flex-shrink: 0;
    }

    /* Info panel full-width below gallery */
    .fg-product-info {
        width: 100%;
        min-height: unset;
        padding: var(--fg_space_8) var(--fg_container_padding_mobile) var(--fg_space_16);
    }

    /* Tighten placeholder on mobile */
    .fg-phase-scroll-test {
        height: 80vh;
    }
}

/* ==========================================================================
   PHASE 2 + 3 — Product Info Right Panel & Gallery Badges
   ========================================================================== */

/* --------------------------------------------------------------------------
   INFO INNER — Constrains content width within the right panel
   -------------------------------------------------------------------------- */
.fg-product-info-inner {
    max-width: 500px;
}

/* --------------------------------------------------------------------------
   BREADCRUMB
   -------------------------------------------------------------------------- */
.fg-product-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fg_space_2);
    font-family: var(--fg_font_ui);
    font-size: var(--fg_text_xs);
    font-weight: var(--fg_weight_medium);
    text-transform: uppercase;
    letter-spacing: var(--fg_tracking_wider);
    color: var(--fg_text_muted);
    margin-bottom: var(--fg_space_6);
}

.fg-product-breadcrumb a {
    color: var(--fg_text_muted);
    text-decoration: none;
    transition: color var(--fg_duration_fast) var(--fg_ease_standard);
}

.fg-product-breadcrumb a:hover {
    color: var(--fg_brand);
}

.fg-bc-sep {
    color: var(--fg_border_strong);
    font-weight: var(--fg_weight_light);
}

/* --------------------------------------------------------------------------
   PRODUCT TITLE — Editorial, italic, light weight
   -------------------------------------------------------------------------- */
.fg-product-title {
    font-family: var(--fg_font_display);
    font-size: clamp(var(--fg_text_3xl), 3.2vw, var(--fg_text_4xl));
    font-weight: var(--fg_weight_light);
    font-style: italic;
    color: var(--fg_text_heading);
    line-height: var(--fg_leading_snug);
    margin-bottom: var(--fg_space_5);
}

/* --------------------------------------------------------------------------
   PRICE — WooCommerce price elements restyled
   -------------------------------------------------------------------------- */
.fg-product-price-wrap {
    margin-bottom: var(--fg_space_4);
}

.fg-product-price .woocommerce-Price-amount {
    font-family: var(--fg_font_body);
    font-size: var(--fg_text_xl);
    font-weight: var(--fg_weight_medium);
    color: var(--fg_text_heading);
}

/* Sale price — strikethrough original */
.fg-product-price del {
    opacity: 1;
}

.fg-product-price del .woocommerce-Price-amount {
    font-size: var(--fg_text_lg);
    font-weight: var(--fg_weight_regular);
    color: var(--fg_text_muted);
}

/* Sale price — active price in brand pink */
.fg-product-price ins {
    text-decoration: none;
}

.fg-product-price ins .woocommerce-Price-amount {
    color: var(--fg_brand);
}

/* --------------------------------------------------------------------------
   FABRIC WHISPER — The editorial detail row
   -------------------------------------------------------------------------- */
.fg-product-whisper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fg_space_2);
    font-family: var(--fg_font_ui);
    font-size: var(--fg_text_xs);
    color: var(--fg_text_muted);
    letter-spacing: var(--fg_tracking_wide);
    margin-top: var(--fg_space_3);
}

.fg-whisper-dot {
    color: var(--fg_border_strong);
}

/* --------------------------------------------------------------------------
   SECTION DIVIDER
   -------------------------------------------------------------------------- */
.fg-product-divider {
    border: none;
    border-top: var(--fg_border_width_thin) solid var(--fg_border_soft);
    margin: var(--fg_space_6) 0;
}

/* --------------------------------------------------------------------------
   VARIATION GROUP — Wraps label + chips for one attribute
   -------------------------------------------------------------------------- */
.fg-variation-group {
    margin-bottom: var(--fg_space_8);
}

.fg-variation-label {
    display: flex;
    align-items: center;
    gap: var(--fg_space_2);
    font-family: var(--fg_font_ui);
    font-size: var(--fg_text_xs);
    font-weight: var(--fg_weight_medium);
    text-transform: uppercase;
    letter-spacing: var(--fg_tracking_wider);
    color: var(--fg_text_muted);
    margin-bottom: var(--fg_space_4);
}

.fg-var-attr-name {
    color: var(--fg_text_secondary);
}

.fg-selected-label {
    font-weight: var(--fg_weight_regular);
    text-transform: none;
    letter-spacing: var(--fg_tracking_normal);
    color: var(--fg_text_primary);
}

.fg-selected-label:not(:empty)::before {
    content: ': ';
    color: var(--fg_text_muted);
}

.fg-size-guide-link {
    margin-left: auto;
    font-size: var(--fg_text_xs);
    font-weight: var(--fg_weight_medium);
    text-transform: none;
    letter-spacing: 0;
    color: var(--fg_brand);
    text-decoration: none;
    transition: opacity var(--fg_duration_fast) var(--fg_ease_standard);
}

.fg-size-guide-link:hover {
    opacity: 0.75;
}

/* --------------------------------------------------------------------------
   SIZE CHIPS
   -------------------------------------------------------------------------- */
.fg-size-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fg_space_2);
}

.fg-size-chip {
    position: relative;
    min-width: 52px;
    height: 48px;
    padding: 0 var(--fg_space_4);
    border: var(--fg_border_width_thin) solid var(--fg_border_default);
    border-radius: var(--fg_radius_sm);
    background: none;
    font-family: var(--fg_font_ui);
    font-size: var(--fg_text_sm);
    font-weight: var(--fg_weight_medium);
    color: var(--fg_text_primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        border-color var(--fg_duration_base) var(--fg_ease_emphasis),
        color var(--fg_duration_base) var(--fg_ease_emphasis),
        background-color var(--fg_duration_base) var(--fg_ease_emphasis);
}

.fg-size-chip:hover:not(.fg-chip--unavailable):not([disabled]) {
    border-color: var(--fg_brand_soft);
    color: var(--fg_brand);
}

.fg-size-chip:focus-visible {
    outline: none;
    box-shadow: var(--fg_focus_outline);
}

.fg-size-chip.is-active {
    background-color: var(--fg_brand);
    border-color: var(--fg_brand);
    color: var(--fg_text_on_brand);
}

/* Out of stock size — faded diagonal line through chip */
.fg-size-chip.fg-chip--unavailable,
.fg-size-chip[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   COLOUR SWATCHES
   -------------------------------------------------------------------------- */
.fg-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fg_space_4);
}

.fg-color-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fg_space_1);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.fg-color-swatch:focus-visible {
    outline: none;
}

.fg-swatch-dot {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: var(--fg_radius_full);
    background-color: var(--fg_surface_soft);
    border: 2px solid var(--fg_border_soft);
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition:
        outline-color var(--fg_duration_base) var(--fg_ease_emphasis),
        border-color var(--fg_duration_base) var(--fg_ease_emphasis);
}

.fg-color-swatch:hover .fg-swatch-dot,
.fg-color-swatch:focus-visible .fg-swatch-dot {
    outline-color: var(--fg_brand_soft);
}

.fg-color-swatch.is-active .fg-swatch-dot {
    outline-color: var(--fg_brand);
    border-color: transparent;
}

.fg-swatch-label {
    font-family: var(--fg_font_ui);
    font-size: var(--fg_text_2xs);
    color: var(--fg_text_muted);
    text-align: center;
    line-height: 1.2;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fg-color-swatch.is-active .fg-swatch-label {
    color: var(--fg_brand);
    font-weight: var(--fg_weight_medium);
}

/* --------------------------------------------------------------------------
   WC NATIVE SELECTS — Hidden, kept for WC variation JS compatibility
   -------------------------------------------------------------------------- */
.fg-wc-selects {
    display: none !important;
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   WC VARIATION ADD-TO-CART WRAPPER
   WC's jQuery show()/hide() can override CSS display — JS overrides it back.
   -------------------------------------------------------------------------- */
.woocommerce-variation-add-to-cart {
    margin-top: var(--fg_space_2);
}

/* --------------------------------------------------------------------------
   PRODUCT ACTIONS — Qty stepper + ATC + Wishlist
   -------------------------------------------------------------------------- */
.fg-product-actions {
    display: flex;
    flex-direction: column;
    gap: var(--fg_space_4);
}

/* Quantity Stepper */
.fg-qty-stepper {
    display: flex;
    align-items: center;
    width: fit-content;
    height: var(--fg_button_height_md);
    border: var(--fg_border_width_thin) solid var(--fg_border_default);
    border-radius: var(--fg_radius_full);
    overflow: hidden;
    background-color: var(--fg_surface);
}

.fg-qty-btn {
    width: 44px;
    height: 100%;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--fg_text_secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--fg_duration_fast) var(--fg_ease_standard),
                color var(--fg_duration_fast) var(--fg_ease_standard);
}

.fg-qty-btn:hover {
    color: var(--fg_brand);
    background-color: var(--fg_brand_tint);
}

.fg-qty-input {
    width: 48px;
    height: 100%;
    border: none;
    border-left: var(--fg_border_width_thin) solid var(--fg_border_soft);
    border-right: var(--fg_border_width_thin) solid var(--fg_border_soft);
    text-align: center;
    font-family: var(--fg_font_body);
    font-size: var(--fg_text_sm);
    font-weight: var(--fg_weight_medium);
    color: var(--fg_text_primary);
    background: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.fg-qty-input::-webkit-outer-spin-button,
.fg-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fg-qty-input:focus {
    outline: none;
}

/* ATC + Wishlist row */
.fg-atc-wishlist {
    display: flex;
    align-items: center;
    gap: var(--fg_space_3);
}

/* Add to Bag Button */
.fg-btn--atc {
    position: relative;
    flex: 1;
    height: var(--fg_button_height_lg);
    border: none;
    border-radius: var(--fg_button_radius);
    background-color: var(--fg_button_primary_bg);
    color: var(--fg_button_primary_text);
    font-family: var(--fg_font_ui);
    font-size: var(--fg_button_font_size);
    font-weight: var(--fg_button_font_weight);
    letter-spacing: var(--fg_button_letter_spacing);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fg_button_gap);
    transition: background-color var(--fg_duration_base) var(--fg_ease_emphasis);
}

.fg-btn--atc:hover {
    background-color: var(--fg_button_primary_hover_bg);
}

.fg-btn--atc:focus-visible {
    outline: none;
    box-shadow: var(--fg_focus_outline);
}

.fg-btn--atc[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Shimmer sweep — CSS-only, plays on hover */
.fg-btn-shimmer {
    position: absolute;
    inset: 0;
    left: -100%;
    width: 55%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%
    );
    pointer-events: none;
    transition: left 0.55s var(--fg_ease_emphasis);
}

.fg-btn--atc:hover .fg-btn-shimmer {
    left: 160%;
}

/* Wishlist Button */
.fg-btn--wishlist {
    width: var(--fg_button_height_lg);
    height: var(--fg_button_height_lg);
    flex-shrink: 0;
    border: var(--fg_border_width_thin) solid var(--fg_border_default);
    border-radius: var(--fg_radius_full);
    background: none;
    cursor: pointer;
    color: var(--fg_text_muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        border-color var(--fg_duration_base) var(--fg_ease_emphasis),
        color var(--fg_duration_base) var(--fg_ease_emphasis),
        background-color var(--fg_duration_base) var(--fg_ease_emphasis);
}

.fg-btn--wishlist:hover {
    border-color: var(--fg_brand_soft);
    color: var(--fg_brand);
}

.fg-btn--wishlist:focus-visible {
    outline: none;
    box-shadow: var(--fg_focus_outline);
}

.fg-btn--wishlist.is-active {
    color: var(--fg_brand);
    border-color: var(--fg_brand_soft);
    background-color: var(--fg_brand_tint);
}

.fg-btn--wishlist.is-active .fg-wishlist-icon {
    fill: var(--fg_brand);
    stroke: var(--fg_brand);
}

/* --------------------------------------------------------------------------
   TRUST BADGES
   -------------------------------------------------------------------------- */
.fg-trust-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fg_space_3);
    margin-top: var(--fg_space_8);
    padding-top: var(--fg_space_6);
    border-top: var(--fg_border_width_thin) solid var(--fg_border_soft);
}

.fg-trust-badge {
    display: flex;
    align-items: center;
    gap: var(--fg_space_2);
    font-family: var(--fg_font_ui);
    font-size: var(--fg_text_xs);
    color: var(--fg_text_muted);
}

.fg-trust-badge svg {
    color: var(--fg_brand_soft);
    flex-shrink: 0;
}

.fg-trust-sep {
    color: var(--fg_border_strong);
}

/* --------------------------------------------------------------------------
   PHASE 3 — GALLERY BADGES
   -------------------------------------------------------------------------- */
.fg-gallery-badges {
    position: absolute;
    top: var(--fg_space_5);
    left: var(--fg_space_5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fg_space_2);
    z-index: 3;
    pointer-events: none;
}

.fg-product-badge {
    display: inline-block;
    padding: var(--fg_space_1) var(--fg_space_4);
    border-radius: var(--fg_radius_full);
    font-family: var(--fg_font_ui);
    font-size: var(--fg_text_2xs);
    font-weight: var(--fg_weight_semibold);
    letter-spacing: var(--fg_tracking_wider);
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.fg-badge--new {
    background-color: var(--fg_brand_tint);
    color: var(--fg_brand_active);
}

.fg-badge--bestseller {
    background-color: var(--fg_surface_inverse);
    color: var(--fg_text_inverse);
}

.fg-badge--stock {
    background-color: var(--fg_warning_soft);
    color: var(--fg_warning);
}

/* ==========================================================================
   RESPONSIVE — Phase 2 overrides for mobile
   ========================================================================== */
@media (max-width: 900px) {

    .fg-product-info-inner {
        max-width: 100%;
    }

    .fg-product-title {
        font-size: clamp(var(--fg_text_2xl), 7vw, var(--fg_text_3xl));
    }

    .fg-atc-wishlist {
        flex-wrap: nowrap;
    }

    .fg-trust-badges {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .fg-size-chip {
        min-width: 44px;
        height: 44px;
    }

    .fg-trust-sep {
        display: none;
    }

    .fg-trust-badges {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--fg_space_3);
    }
}

/* ==========================================================================
   WC OVERRIDE — Force theme styles to win over woocommerce.css
   WC scopes to .woocommerce (body class) with 2-class specificity.
   #fg-product-page prefix = 1 ID + 1 class = always wins.
   ========================================================================== */

/* Reset WC's generic button styles inside the product page */
#fg-product-page .button,
#fg-product-page .button.alt,
#fg-product-page button.button,
#fg-product-page .single_add_to_cart_button {
    padding: 0;
    border: none;
    border-radius: var(--fg_button_radius);
    font-family: var(--fg_font_ui);
    font-size: var(--fg_button_font_size);
    font-weight: var(--fg_button_font_weight);
    letter-spacing: var(--fg_button_letter_spacing);
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    text-transform: none;
}

/* ATC button — full override of WC colours and shape */
#fg-product-page .fg-btn--atc,
#fg-product-page .single_add_to_cart_button.button {
    position: relative;
    flex: 1;
    height: var(--fg_button_height_lg);
    background-color: var(--fg_button_primary_bg);
    color: var(--fg_button_primary_text);
    border-radius: var(--fg_button_radius);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--fg_duration_base) var(--fg_ease_emphasis);
}

#fg-product-page .fg-btn--atc:hover,
#fg-product-page .single_add_to_cart_button.button:hover {
    background-color: var(--fg_button_primary_hover_bg);
    color: var(--fg_button_primary_text);
}

#fg-product-page .fg-btn--atc[disabled],
#fg-product-page .single_add_to_cart_button.button.disabled,
#fg-product-page .single_add_to_cart_button.button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--fg_button_primary_bg);
    color: var(--fg_button_primary_text);
}

/* Qty stepper — reset WC's input[type=number] overrides */
#fg-product-page .fg-qty-stepper,
#fg-product-page .quantity {
    border: var(--fg_border_width_thin) solid var(--fg_border_default);
    border-radius: var(--fg_radius_full);
    display: inline-flex;
    align-items: center;
    height: var(--fg_button_height_md);
    overflow: hidden;
    background: var(--fg_surface);
    margin: 0;
}

#fg-product-page .fg-qty-input,
#fg-product-page input.qty {
    border: none;
    border-left: var(--fg_border_width_thin) solid var(--fg_border_soft);
    border-right: var(--fg_border_width_thin) solid var(--fg_border_soft);
    border-radius: 0;
    width: 48px;
    height: 100%;
    text-align: center;
    background: none;
    font-family: var(--fg_font_body);
    font-size: var(--fg_text_sm);
    font-weight: var(--fg_weight_medium);
    color: var(--fg_text_primary);
    box-shadow: none;
    padding: 0;
}

/* Color swatch dot — visible neutral when no hex is set in admin */
.fg-swatch-dot {
    background-color: var(--fg_border_default);
}

/* ==========================================================================
   PHASE 4 — Sticky Add to Bag Bar
   ========================================================================== */

.fg-sticky-atc {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--fg_z_sticky);
    background-color: var(--fg_surface);
    border-top: var(--fg_border_width_thin) solid var(--fg_border_soft);
    box-shadow: 0 -8px 32px rgba(32, 23, 28, 0.08);
    transform: translateY(100%);
    transition: transform 0.4s var(--fg_ease_emphasis);
    will-change: transform;
}

.fg-sticky-atc.is-visible {
    transform: translateY(0);
}

.fg-sticky-atc__inner {
    max-width: var(--fg_container_default);
    margin: 0 auto;
    padding: var(--fg_space_3) var(--fg_space_8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fg_space_6);
}

.fg-sticky-atc__product {
    display: flex;
    align-items: center;
    gap: var(--fg_space_4);
    flex: 1;
    min-width: 0;
}

.fg-sticky-atc__img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--fg_radius_sm);
    flex-shrink: 0;
}

.fg-sticky-atc__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fg_space_1);
}

.fg-sticky-atc__name {
    font-family: var(--fg_font_body);
    font-size: var(--fg_text_sm);
    font-weight: var(--fg_weight_medium);
    color: var(--fg_text_heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.fg-sticky-atc__price {
    margin: 0;
    font-family: var(--fg_font_body);
    font-size: var(--fg_text_xs);
    color: var(--fg_text_muted);
}

.fg-sticky-atc__price .woocommerce-Price-amount {
    font-size: var(--fg_text_xs);
    color: var(--fg_text_secondary);
}

.fg-sticky-atc__price ins {
    text-decoration: none;
}

.fg-sticky-atc__price ins .woocommerce-Price-amount {
    color: var(--fg_brand);
}

/* The compact sticky CTA button */
.fg-sticky-atc__btn {
    flex-shrink: 0;
    height: var(--fg_button_height_md);
    padding: 0 var(--fg_button_padding_x_lg);
    background-color: var(--fg_button_primary_bg);
    color: var(--fg_button_primary_text);
    border: none;
    border-radius: var(--fg_button_radius);
    font-family: var(--fg_font_ui);
    font-size: var(--fg_button_font_size);
    font-weight: var(--fg_button_font_weight);
    letter-spacing: var(--fg_button_letter_spacing);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--fg_duration_base) var(--fg_ease_emphasis);
}

.fg-sticky-atc__btn:hover {
    background-color: var(--fg_button_primary_hover_bg);
}

.fg-sticky-atc__btn:focus-visible {
    outline: none;
    box-shadow: var(--fg_focus_outline);
}

/* ATC pulse — fires when sticky bar button is clicked */
@keyframes fg-atc-pulse {
    0%   { box-shadow: 0 0 0 0 var(--fg_brand_ring); }
    60%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.fg-btn--atc.fg-pulse {
    animation: fg-atc-pulse 0.55s ease-out forwards;
}

/* Sticky bar responsive */
@media (max-width: 900px) {
    .fg-sticky-atc__inner {
        padding: var(--fg_space_3) var(--fg_container_padding_mobile);
        gap: var(--fg_space_3);
    }
}

@media (max-width: 480px) {
    .fg-sticky-atc__img {
        display: none;
    }

    .fg-sticky-atc__btn {
        padding: 0 var(--fg_button_padding_x_md);
    }
}

/* ==========================================================================
   PHASE 5 — Story Zone & Details Accordion
   ========================================================================== */

.fg-product-story-zone {
    padding-top: var(--fg_space_20);
    padding-bottom: var(--fg_space_24);
    background-color: var(--fg_surface);
    border-top: 1px solid var(--fg_border_soft);
}

.fg-container--narrow {
    max-width: 800px;
    margin: 0 auto;
}

/* Pull Quote */
.fg-product-pullquote {
    padding: var(--fg_space_12) 0;
    margin-bottom: var(--fg_space_12);
    text-align: center;
}

.fg-product-pullquote blockquote {
    font-family: var(--fg_font_display);
    font-size: clamp(var(--fg_text_2xl), 4vw, var(--fg_text_4xl));
    font-weight: var(--fg_weight_light);
    font-style: italic;
    color: var(--fg_text_heading);
    line-height: var(--fg_leading_snug);
    margin: 0;
    padding: 0;
    border: none;
    max-width: 900px;
    margin-inline: auto;
}

.fg-product-pullquote blockquote p {
    margin: 0;
}

/* Accordions */
.fg-product-accordions {
    margin-top: var(--fg_space_12);
}

.fg-accordion {
    border-bottom: 1px solid var(--fg_border_soft);
}

.fg-accordion:first-child {
    border-top: 1px solid var(--fg_border_soft);
}

.fg-accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--fg_space_6) 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--fg_font_ui);
    color: var(--fg_text_primary);
    transition: color var(--fg_duration_fast) var(--fg_ease_standard);
}

.fg-accordion__trigger:hover {
    color: var(--fg_brand);
}

.fg-accordion__title {
    font-size: var(--fg_text_lg);
    font-weight: var(--fg_weight_medium);
}

.fg-accordion__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg_text_muted);
    transition: transform var(--fg_duration_base) var(--fg_ease_emphasis);
}

.fg-accordion.is-open .fg-accordion__icon {
    transform: rotate(45deg);
    color: var(--fg_brand);
}

.fg-accordion__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--fg_duration_base) var(--fg_ease_emphasis);
}

.fg-accordion.is-open .fg-accordion__content {
    grid-template-rows: 1fr;
}

.fg-accordion__content-inner {
    overflow: hidden;
    padding-bottom: 0;
    opacity: 0;
    transition: opacity var(--fg_duration_base) var(--fg_ease_emphasis), padding-bottom var(--fg_duration_base) var(--fg_ease_emphasis);
}

.fg-accordion.is-open .fg-accordion__content-inner {
    opacity: 1;
    padding-bottom: var(--fg_space_8);
}

/* Content styling inside accordion */
.fg-accordion__content-inner p {
    font-family: var(--fg_font_body);
    font-size: var(--fg_text_base);
    color: var(--fg_text_secondary);
    line-height: var(--fg_leading_relaxed);
    margin-bottom: var(--fg_space_4);
}

.fg-accordion__content-inner p:last-child {
    margin-bottom: 0;
}

.fg-accordion__content-inner ul,
.fg-accordion__content-inner ol {
    margin-left: var(--fg_space_5);
    margin-bottom: var(--fg_space_4);
    color: var(--fg_text_secondary);
    font-family: var(--fg_font_body);
    line-height: var(--fg_leading_relaxed);
}

.fg-accordion__content-inner li {
    margin-bottom: var(--fg_space_2);
}

/* ==========================================================================
   PHASE 6 — Extras (Reviews, Cross-Sells, Related)
   ========================================================================== */

/* --- REVIEWS --- */
.fg-reviews-section {
    padding-block: var(--fg_space_16) var(--fg_space_20);
    border-top: 1px solid var(--fg_border_soft);
    background-color: var(--fg_surface_alt);
}

.fg-reviews-header {
    text-align: center;
    margin-bottom: var(--fg_space_12);
}

.fg-reviews-heading {
    font-family: var(--fg_font_display);
    font-size: var(--fg_text_3xl);
    font-weight: var(--fg_weight_light);
    color: var(--fg_text_heading);
    margin-bottom: var(--fg_space_4);
}

.fg-reviews-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fg_space_2);
}

.fg-reviews-average {
    font-family: var(--fg_font_display);
    font-size: var(--fg_text_5xl);
    font-weight: var(--fg_weight_light);
    color: var(--fg_text_primary);
    line-height: 1;
}

.fg-reviews-stars .star-rating {
    margin: 0 auto;
    font-size: var(--fg_text_base);
    color: var(--fg_brand);
}

.fg-reviews-count {
    font-family: var(--fg_font_body);
    font-size: var(--fg_text_sm);
    color: var(--fg_text_muted);
}

.fg-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--fg_space_6);
    margin-bottom: var(--fg_space_8);
}

.fg-review-card {
    background-color: var(--fg_surface);
    padding: var(--fg_space_6);
    border-radius: var(--fg_radius_md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: var(--fg_space_3);
}

.fg-review-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--fg_font_ui);
}

.fg-review-card__name {
    font-size: var(--fg_text_sm);
    font-weight: var(--fg_weight_medium);
    color: var(--fg_text_primary);
}

.fg-review-card__date {
    font-size: var(--fg_text_xs);
    color: var(--fg_text_muted);
}

.fg-review-card__stars .star-rating {
    font-size: var(--fg_text_sm);
    color: var(--fg_brand);
}

.fg-review-card__text {
    font-family: var(--fg_font_body);
    font-size: var(--fg_text_sm);
    color: var(--fg_text_secondary);
    line-height: var(--fg_leading_relaxed);
}

.fg-review-card__text p {
    margin: 0;
}

.fg-reviews-empty {
    text-align: center;
    color: var(--fg_text_muted);
    font-family: var(--fg_font_body);
    font-style: italic;
    margin-bottom: var(--fg_space_8);
}

.fg-reviews-actions {
    text-align: center;
}

.fg-hidden-reviews-form {
    display: none;
    margin-top: var(--fg_space_8);
    background: var(--fg_surface);
    padding: var(--fg_space_8);
    border-radius: var(--fg_radius_md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

/* --- PRODUCT RAIL (Cross Sells & Related) --- */
.fg-product-rail-section {
    padding-block: var(--fg_space_16);
    border-top: 1px solid var(--fg_border_soft);
}

.fg-rail-heading {
    font-family: var(--fg_font_display);
    font-size: var(--fg_text_3xl);
    font-weight: var(--fg_weight_light);
    color: var(--fg_text_heading);
    margin-bottom: var(--fg_space_8);
    text-align: center;
}

.fg-rail-track {
    display: flex;
    gap: var(--fg_space_6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-bottom: var(--fg_space_4);
}

.fg-rail-track::-webkit-scrollbar {
    display: none;
}

.fg-rail-track > * {
    flex: 0 0 calc(25% - (var(--fg_space_6) * 3 / 4));
    scroll-snap-align: start;
    min-width: 260px;
}

@media (max-width: 1024px) {
    .fg-rail-track > * {
        flex: 0 0 calc(33.333% - (var(--fg_space_6) * 2 / 3));
    }
}

@media (max-width: 768px) {
    .fg-rail-track > * {
        flex: 0 0 calc(50% - (var(--fg_space_6) / 2));
    }
}

@media (max-width: 480px) {
    .fg-rail-track > * {
        flex: 0 0 85%;
    }
}