/**
 * GEC Frontend Framework
 * WooCommerce Single Product Compatibility
 *
 * @package GEC_Academy_Child
 * @since   5.3.0
 * @status  Production
 */

/* Map WooCommerce's public custom properties to the GEC design system. The
 * mapping remains inside the single-product runtime and leaves plugin layout,
 * gallery state and variation visibility under WooCommerce ownership. */
:where(body.single-product.woocommerce, body.single-product .woocommerce) {
    --wc-primary: var(--color-primary-600);
    --wc-primary-text: var(--color-text-inverse);
    --wc-secondary: var(--color-surface-secondary);
    --wc-secondary-text: var(--color-text-primary);
    --wc-green: var(--color-success-600);
    --wc-red: var(--color-danger-600);
    --wc-orange: var(--color-warning-500);
    --wc-blue: var(--color-info-600);
    --wc-content-bg: var(--color-surface);
    --wc-subtext: var(--color-text-secondary);
    --wc-form-color-background: var(--form-background);
    --wc-form-color-text: var(--form-text-color);
    --wc-form-border-color: var(--form-border-color);
    --wc-form-border-radius: var(--form-radius);
    --wc-form-border-width: var(--form-border-width);
    --wc-destructive: var(--color-danger-600);
    --wc-card-border-radius: var(--radius-card);
}

/* WooCommerce uses floated desktop columns and nested flex controls. These
 * boundaries may shrink, but their width and positioning remain plugin-owned. */
:where(body.single-product.woocommerce, body.single-product .woocommerce) :where(
    div.product,
    div.product div.images,
    div.product div.summary,
    div.product form.cart,
    div.product form.variations_form,
    div.product .woocommerce-variation,
    div.product .woocommerce-tabs,
    div.product .related,
    div.product .upsells
) {
    min-inline-size: 0;
}

/* Preserve intrinsic media ratio and prevent gallery assets from escaping the
 * WooCommerce gallery boundary. */
:where(body.single-product.woocommerce, body.single-product .woocommerce)
    div.product div.images :where(img, video) {
    block-size: auto;
    max-inline-size: 100%;
}

:where(body.single-product.woocommerce, body.single-product .woocommerce)
    div.product form.cart :where(select, input, textarea) {
    max-inline-size: 100%;
}

/* WooCommerce and Hello Elementor both alter control focus presentation. Use
 * the shared keyboard-only focus contract without changing mouse interaction. */
:where(body.single-product.woocommerce, body.single-product .woocommerce)
    div.product :where(a, button, input, select, textarea):focus-visible {
    outline: var(--border-width) var(--border-style) var(--form-focus-border);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--form-focus-shadow);
}