/* ==========================================================================
   Fluent Cart — single product page, shared (light + dark)
   Plugin: Fluent Cart Account Portal by ICT Shift (v1.2.1)

   Product-page refinements that apply in BOTH color schemes. Every color is
   an Astra global palette variable, so values follow the active scheme
   automatically. Dark-mode-specific overrides (hard-coded Fluent Cart
   colors) live in product-dark-mode.css, which loads after this file.
   ========================================================================== */

/* --- Page header ---------------------------------------------------------
   Astra's single template prints an empty <h1> plus a "By <author> / <date>"
   byline (post meta) for product CPT posts. Neither belongs on a product
   page, so the whole block is hidden. */
body.single-fluent-products .entry-header {
    display: none;
}

/* --- Footer social icons --------------------------------------------------
   Hidden on product pages only; the footer keeps them everywhere else. */
body.single-fluent-products [data-section="section-fb-social-icons-1"] {
    display: none;
}

/* --- Post share icons -----------------------------------------------------
   Astra prints FB / X / LinkedIn "share this post" icons after the content
   of every singular. Products are not meant to be socially shared. */
body.single-fluent-products .ast-post-social-sharing {
    display: none;
}

/* --- Product description --------------------------------------------------
   Keep the customer-facing description at normal body-text contrast; Fluent
   Cart's muted excerpt colour is intended for metadata such as the SKU. */
body.single-fluent-products .fct-product-excerpt > p {
    color: var(--ast-global-color-2);
}

/* --- Product reviews ------------------------------------------------------
   FluentCart's review variables default to fixed light-scheme colours. Map
   them to Astra roles so the summary, filters, cards and review form follow
   the active site palette. */
body.single-fluent-products .fct-product-reviews-section {
    --fct-review-text-color: var(--ast-global-color-2);
    --fct-review-strong-text-color: var(--ast-global-color-2);
    --fct-review-heading-color: var(--ast-global-color-2);
    --fct-review-body-text-color: var(--ast-global-color-2);
    --fct-review-label-color: var(--ast-global-color-2);
    --fct-review-accent-color: var(--ast-global-color-7);
    --fct-review-secondary-text-color: var(--ast-global-color-3);
    --fct-review-muted-text-color: var(--ast-global-color-3);
    --fct-review-subtle-text-color: var(--ast-global-color-3);
    --fct-review-caption-color: var(--ast-global-color-3);
    --fct-review-faint-text-color: var(--ast-global-color-3);
    --fct-review-meta-text-color: var(--ast-global-color-3);
    --fct-review-note-text-color: var(--ast-global-color-3);

    --fct-review-card-bg: var(--ast-global-color-5);
    --fct-review-card-border-color: var(--ast-global-color-6);
    --fct-review-panel-border-color: var(--ast-global-color-6);
    --fct-review-divider-color: var(--ast-global-color-6);
    --fct-review-soft-divider-color: var(--ast-global-color-6);
    --fct-review-separator-color: var(--ast-global-color-6);
    --fct-review-surface-alt: var(--ast-global-color-4);
    --fct-review-cta-bar-bg: var(--ast-global-color-4);
    --fct-review-tile-bg: var(--ast-global-color-5);
    --fct-review-tile-hover-bg: var(--ast-global-color-4);
    --fct-review-pill-bg: var(--ast-global-color-4);
    --fct-review-pill-border-color: var(--ast-global-color-6);

    --fct-review-control-bg: var(--ast-global-color-5);
    --fct-review-control-border-color: var(--ast-global-color-6);
    --fct-review-control-hover-bg: var(--ast-global-color-4);
    --fct-review-input-bg: var(--ast-global-color-5);
    --fct-review-input-border: var(--ast-global-color-6);
    --fct-review-input-focus-border: var(--ast-global-color-0);
    --fct-review-input-text: var(--ast-global-color-2);
    --fct-review-input-placeholder: var(--ast-global-color-3);
    --fct-review-select-text: var(--ast-global-color-2);
    --fct-review-select-focus-border: var(--ast-global-color-0);

    --fct-review-chip-bg: var(--ast-global-color-5);
    --fct-review-chip-border: var(--ast-global-color-6);
    --fct-review-chip-text: var(--ast-global-color-3);
    --fct-review-chip-hover-bg: var(--ast-global-color-4);
    --fct-review-chip-active-bg: var(--ast-global-color-7);
    --fct-review-chip-active-border: var(--ast-global-color-7);
    --fct-review-chip-active-text: var(--ast-global-color-5);

    --fct-review-cta-bg: var(--ast-global-color-5);
    --fct-review-cta-border: var(--ast-global-color-6);
    --fct-review-cta-text: var(--ast-global-color-2);
    --fct-review-cta-hover-bg: var(--ast-global-color-4);
    --fct-review-cta-hover-text: var(--ast-global-color-2);
    --fct-review-secondary-btn-bg: var(--ast-global-color-5);
    --fct-review-secondary-btn-border: var(--ast-global-color-6);
    --fct-review-secondary-btn-text: var(--ast-global-color-2);
    --fct-review-secondary-btn-hover-bg: var(--ast-global-color-4);
    --fct-review-secondary-btn-hover-border: var(--ast-global-color-7);

    --fct-review-btn-bg: var(--ast-global-color-7);
    --fct-review-btn-text: var(--ast-global-color-5);
    --fct-review-btn-hover-bg: var(--ast-global-color-0);
    --fct-review-btn-hover-text: var(--ast-global-color-5);
    --fct-review-focus-ring: var(--ast-global-color-0);
    --fct-review-bar-track: var(--ast-global-color-6);
    --fct-review-indicator-color: var(--ast-global-color-7);
    --fct-review-indicator-mid-color: var(--ast-global-color-1);
    --fct-review-star-empty-color: var(--ast-global-color-6);
    --fct-review-avatar-bg: var(--ast-global-color-4);
    --fct-review-avatar-icon: var(--ast-global-color-3);
    --fct-review-badge-bg: var(--ast-global-color-4);
    --fct-review-badge-text: var(--ast-global-color-2);
    --fct-review-vote-text: var(--ast-global-color-3);
    --fct-review-vote-hover-bg: var(--ast-global-color-4);
    --fct-review-vote-hover-border: var(--ast-global-color-7);
    --fct-review-dot-color: var(--ast-global-color-3);
    --fct-review-dot-hover-color: var(--ast-global-color-7);
}

body.single-fluent-products .fct-review-cta-btn:hover,
body.single-fluent-products .fct-review-cta-btn:focus-visible {
    border-color: var(--ast-global-color-0);
}

body.single-fluent-products :is(
    .fct-swatch-item,
    .fct-filter-chip,
    .fct-review-drawer-close,
    .fluent-cart-add-to-cart-button,
    .fluent-cart-direct-checkout-button
):focus-visible {
    outline: 2px solid var(--ast-global-color-2);
    outline-offset: 2px;
}

/* The stepper clips overflow, so its focus ring must stay inside the control. */
body.single-fluent-products .fct-product-quantity :is(button, input):focus-visible {
    outline: 2px solid var(--ast-global-color-2);
    outline-offset: -3px;
}

body.single-fluent-products .fct-attribute-selector .fct-swatch-item {
    background-color: var(--ast-global-color-5);
    border-color: var(--ast-global-color-6);
    color: var(--ast-global-color-2);
}

body.single-fluent-products .fct-attribute-selector .fct-swatch-item.selected {
    background-color: var(--ast-global-color-7);
    border-color: var(--ast-global-color-7);
    color: var(--ast-global-color-5);
}

/* Keep hover/focus swatches readable; FluentCart's stock hover background
   is too light for the dark-scheme text colour. */
body.single-fluent-products .fct-attribute-selector .fct-swatch-item:hover:not(.disabled):not(.selected),
body.single-fluent-products .fct-attribute-selector .fct-swatch-item:focus-visible:not(.disabled):not(.selected) {
    background-color: var(--ast-global-color-4);
    border-color: var(--ast-global-color-0);
    color: var(--ast-global-color-2);
}

/* --- Pricing hierarchy -----------------------------------------------------
   The price range is de-emphasized; the selected (single) price is the
   dominant figure on the page. */
body.single-fluent-products .fct-product-prices {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ast-global-color-3);
    margin-bottom: 8px;
}

body.single-fluent-products .fct-product-prices .fct-min-price,
body.single-fluent-products .fct-product-prices .fct-max-price,
body.single-fluent-products .fct-product-prices .fct-price-separator {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

body.single-fluent-products .fct-product-item-price,
body.single-fluent-products .fct-product-prices > .fct-item-price {
    margin-top: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ast-global-color-2);
}

/* --- Quantity stepper -----------------------------------------------------
   Fluent Cart's default renders the three controls on a light-grey rounded
   pill with mismatched corner radii. This makes the stepper one unified,
   bordered control with hairline dividers. */
body.single-fluent-products .fct-product-quantity {
    display: inline-flex;
    align-items: stretch;
    width: auto;
    height: 40px;
    background-color: var(--ast-global-color-5);
    border: 1px solid var(--ast-global-color-6);
    border-radius: 8px;
    overflow: hidden;
}

body.single-fluent-products .fct-product-quantity .fct-quantity-decrease-button,
body.single-fluent-products .fct-product-quantity .fct-quantity-increase-button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: var(--ast-global-color-2);
    cursor: pointer;
}

body.single-fluent-products .fct-product-quantity .fct-quantity-decrease-button {
    border-right: 1px solid var(--ast-global-color-6);
}

body.single-fluent-products .fct-product-quantity .fct-quantity-increase-button {
    border-left: 1px solid var(--ast-global-color-6);
}

body.single-fluent-products .fct-product-quantity .fct-quantity-input {
    width: 44px;
    min-width: 44px;
    height: 100%;
    text-align: center;
    font-weight: 600;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: var(--ast-global-color-2);
    -moz-appearance: textfield;
    appearance: textfield;
}

body.single-fluent-products .fct-product-quantity .fct-quantity-decrease-button:hover,
body.single-fluent-products .fct-product-quantity .fct-quantity-increase-button:hover,
body.single-fluent-products .fct-product-quantity .fct-quantity-decrease-button:focus-visible,
body.single-fluent-products .fct-product-quantity .fct-quantity-increase-button:focus-visible {
    background-color: var(--ast-global-color-4);
}

/* Hide native number spinners (the +- buttons replace them). */
body.single-fluent-products .fct-product-quantity .fct-quantity-input::-webkit-outer-spin-button,
body.single-fluent-products .fct-product-quantity .fct-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Purchase buttons -----------------------------------------------------
   Fluent Cart ships the primary "Add to cart" button as a flat white
   button in light mode that does not match the site's CTA look. It gets
   the palette blue here (the same hue in both schemes: #007aca light /
   #1194ec dark, the same blue as the site's "Get Started" CTA). The
   button text is white in light mode and dark ink on the brighter dark-mode
   blue for contrast. The dark-scheme text lives in product-dark-mode.css. */
body.single-fluent-products .fct-product-buttons-wrap .fluent-cart-add-to-cart-button {
    background-color: var(--ast-global-color-7);
    border-color: var(--ast-global-color-7);
}

body.single-fluent-products .fct-product-buttons-wrap .fluent-cart-add-to-cart-button:hover,
body.single-fluent-products .fct-product-buttons-wrap .fluent-cart-add-to-cart-button:focus,
body.single-fluent-products .fct-product-buttons-wrap .fluent-cart-add-to-cart-button:focus-visible {
    background-color: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
}

html:not(.astra-color-scheme-dark) body.single-fluent-products .fct-product-buttons-wrap .fluent-cart-add-to-cart-button {
    color: var(--ast-global-color-5); /* #ffffff in the light scheme */
}