/* ==========================================================================
   Fluent Cart — single product page, Astra Pro dark mode
   Plugin: Fluent Cart Account Portal by ICT Shift (v1.3.1)

   The Fluent Cart single product view ships with hard-coded light-mode
   colors (title/price #2f3448, white buttons), which are near-invisible
   or glaring on the site's dark palette. This stylesheet maps the product
   UI onto the Astra global palette variables. Layout/shared rules live in
   product-page.css (loaded before this file). Every rule here is scoped to the
   dark color scheme AND the product page, so light mode stays untouched.
   No hard-coded colors.
   ========================================================================== */

/* --- Product title & prices -------------------------------------------- */
html.astra-color-scheme-dark body.single-fluent-products .fct-product-title,
html.astra-color-scheme-dark body.single-fluent-products .fct-product-title h1 {
    color: var(--ast-global-color-2);
}

/* The price range stays secondary in dark mode; the selected (single) price
   keeps the dominant value. Size/weight come from product-page.css. */
html.astra-color-scheme-dark body.single-fluent-products .fct-product-prices,
html.astra-color-scheme-dark body.single-fluent-products .fct-min-price,
html.astra-color-scheme-dark body.single-fluent-products .fct-max-price,
html.astra-color-scheme-dark body.single-fluent-products .fct-price-separator {
    color: var(--ast-global-color-3);
}

html.astra-color-scheme-dark body.single-fluent-products .fct-product-item-price,
html.astra-color-scheme-dark body.single-fluent-products .fct-item-price {
    color: var(--ast-global-color-2);
}

/* --- Variation group label (e.g. "Package") ------------------------------ */
html.astra-color-scheme-dark body.single-fluent-products .fct-attribute-label {
    color: var(--ast-global-color-3);
}

/* --- Variation swatch buttons -------------------------------------------- */
html.astra-color-scheme-dark body.single-fluent-products .fct-swatch-item {
    background-color: var(--ast-global-color-5);
    border-color: var(--ast-global-color-6);
    color: var(--ast-global-color-2);
}

html.astra-color-scheme-dark body.single-fluent-products .fct-swatch-item:hover,
html.astra-color-scheme-dark body.single-fluent-products .fct-swatch-item:focus-visible {
    border-color: var(--ast-global-color-7);
}

html.astra-color-scheme-dark body.single-fluent-products .fct-swatch-item.selected {
    background-color: var(--ast-global-color-7);
    border-color: var(--ast-global-color-7);
    color: var(--ast-global-color-8);
}

/* --- Quantity controls ------------------------------------------------------
   The stepper itself is handled by product-page.css (unified bordered control)
   in both schemes. */

/* --- Quantity label & related products heading -----------------------------
   Fluent Cart ships these two with a hard-coded light-mode text colour
   (#2f3448) that is near-invisible on the dark palette. */
html.astra-color-scheme-dark body.single-fluent-products .fct-product-quantity-container label.quantity-title,
html.astra-color-scheme-dark body.single-fluent-products .fct-product-list-heading {
    color: var(--ast-global-color-2);
}

/* --- Product buttons: Add to cart (primary), Buy now (secondary) ---------
   The Add to cart background (palette blue, both schemes) and the hover
   state live in product-page.css; this file only sets the button text,
   using dark ink on the brighter dark-scheme blue. */
html.astra-color-scheme-dark body.single-fluent-products .fct-product-buttons-wrap .fluent-cart-add-to-cart-button {
    color: var(--ast-global-color-8);
}

/* The palette's brighter CTA blue needs dark ink for adequate contrast. */
html.astra-color-scheme-dark body.single-fluent-products .fct-product-reviews-section {
    --fct-review-chip-active-text: var(--ast-global-color-8);
    --fct-review-btn-text: var(--ast-global-color-8);
    --fct-review-btn-hover-text: var(--ast-global-color-8);
}

html.astra-color-scheme-dark body.single-fluent-products .fct-product-buttons-wrap .fluent-cart-direct-checkout-button {
    background-color: var(--ast-global-color-5);
    border-color: var(--ast-global-color-6);
    color: var(--ast-global-color-2);
}

html.astra-color-scheme-dark body.single-fluent-products .fct-product-buttons-wrap .fluent-cart-direct-checkout-button:hover {
    border-color: var(--ast-global-color-7);
}

/* --- Cross-sell / related product cards ----------------------------------- */
html.astra-color-scheme-dark body.single-fluent-products .fct-product-card {
    background-color: var(--ast-global-color-5);
    border-color: var(--ast-global-color-6);
    color: var(--ast-global-color-2);
}

html.astra-color-scheme-dark body.single-fluent-products .fct-product-card-title,
html.astra-color-scheme-dark body.single-fluent-products .fct-product-card-title a {
    color: var(--ast-global-color-2);
}

html.astra-color-scheme-dark body.single-fluent-products .fct-product-card-excerpt {
    color: var(--ast-global-color-3);
}

html.astra-color-scheme-dark body.single-fluent-products .fct-product-card-prices {
    color: var(--ast-global-color-2);
}

html.astra-color-scheme-dark body.single-fluent-products .fct-product-card .fluent-cart-add-to-cart-button {
    background-color: var(--ast-global-color-5);
    border-color: var(--ast-global-color-6);
    color: var(--ast-global-color-2);
}

html.astra-color-scheme-dark body.single-fluent-products .fct-product-card .fluent-cart-add-to-cart-button:hover {
    background-color: var(--ast-global-color-7);
    border-color: var(--ast-global-color-7);
    color: var(--ast-global-color-8);
}

html.astra-color-scheme-dark body.single-fluent-products .fct-product-card .fluent-cart-add-to-cart-button:focus-visible {
    background-color: var(--ast-global-color-7);
    border-color: var(--ast-global-color-7);
    color: var(--ast-global-color-8);
}