/*
 * Meridian — Conversion CSS
 *
 * Covers: attribute swatches, sale countdown timer, stock badges, breadcrumbs.
 * Enqueued on all WooCommerce pages (is_woocommerce, is_product, is_shop, etc.).
 *
 * All decorative values reference theme.json tokens — no hardcoded palette.
 */

/* =========================================================================
 * Attribute Swatches
 * ====================================================================== */

/* The native <select> is visually hidden but kept in the DOM for WC JS */
.meridian-swatch-select {
        position: absolute;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        width: 1px;
        height: 1px;
        overflow: hidden;
        white-space: nowrap;
}

.meridian-swatches {
        display: flex;
        flex-wrap: wrap;
        gap: var(--wp--preset--spacing--8);
        margin: var(--wp--preset--spacing--8) 0;
}

/* -------------------------------------------------------------------------
 * Color swatch
 * ---------------------------------------------------------------------- */

.meridian-swatch--color {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid transparent;
        outline: 2px solid transparent;
        outline-offset: 2px;
        cursor: pointer;
        padding: 0;
        position: relative;
        transition:
                outline-color var(--wp--custom--transition--base),
                transform var(--wp--custom--transition--base);
        background-clip: padding-box;
}

.meridian-swatch--color::after {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 50%;
        border: 1px solid rgba(15, 15, 15, 0.12);
        pointer-events: none;
}

.meridian-swatch--color:hover,
.meridian-swatch--color:focus-visible {
        transform: scale(1.12);
        outline-color: var(--wp--preset--color--ink);
}

.meridian-swatch--color.is-active {
        outline-color: var(--wp--preset--color--ink);
        transform: scale(1.08);
}

.meridian-swatch--color:focus-visible {
        outline-style: solid;
}

/* Fallback: when a color term has no swatch color meta set, the button
 * renders with no inline background-color style. Show a neutral chip so
 * it remains visible rather than invisible against a light background.   */
.meridian-swatch--color:not([style]) {
        background-color: var(--wp--preset--color--neutral-100);
        border-color: var(--wp--preset--color--neutral-300);
}

/* -------------------------------------------------------------------------
 * Image swatch
 * ---------------------------------------------------------------------- */

.meridian-swatch--image {
        width: 44px;
        height: 44px;
        border-radius: var(--wp--custom--radius--sm);
        border: 2px solid transparent;
        outline: 2px solid transparent;
        outline-offset: 2px;
        cursor: pointer;
        padding: 0;
        overflow: hidden;
        background: var(--wp--preset--color--neutral-100);
        transition:
                outline-color var(--wp--custom--transition--base),
                transform var(--wp--custom--transition--base);
}

.meridian-swatch--image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.meridian-swatch--image .meridian-swatch__label {
        font-size: var(--wp--preset--font-size--xs);
        color: var(--wp--preset--color--ink);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0 var(--wp--preset--spacing--4);
        text-align: center;
}

.meridian-swatch--image:hover,
.meridian-swatch--image:focus-visible {
        transform: scale(1.08);
        outline-color: var(--wp--preset--color--ink);
}

.meridian-swatch--image.is-active {
        outline-color: var(--wp--preset--color--ink);
}

/* =========================================================================
 * Sale Countdown Timer
 * ====================================================================== */

/* CSS @property — enables smooth integer transitions on digit changes */
@property --meridian-cd-h {
        syntax: '<integer>';
        inherits: false;
        initial-value: 0;
}
@property --meridian-cd-m {
        syntax: '<integer>';
        inherits: false;
        initial-value: 0;
}
@property --meridian-cd-s {
        syntax: '<integer>';
        inherits: false;
        initial-value: 0;
}

.meridian-countdown {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--wp--preset--spacing--12);
        font-family: var(--wp--preset--font-family--body);
}

.meridian-countdown__label {
        font-size: var(--wp--preset--font-size--xs);
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--wp--preset--color--neutral-600);
}

.meridian-countdown__display {
        display: flex;
        align-items: center;
        gap: var(--wp--preset--spacing--8);
}

.meridian-countdown__unit {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 44px;
}

.meridian-countdown__digit {
        display: block;
        font-family: var(--wp--preset--font-family--heading);
        font-size: var(--wp--preset--font-size--2xl);
        font-weight: 400;
        line-height: 1;
        color: var(--wp--preset--color--ink);
        min-width: 2ch;
        text-align: center;
        /* Digit-flip animation on change */
        transition: opacity 0.15s ease, transform 0.15s ease;
}

.meridian-countdown__digit.is-ticking {
        animation: cdFlip 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cdFlip {
        0%   { opacity: 0.3; transform: translateY(-6px) scaleY(0.8); }
        60%  { opacity: 1;   transform: translateY(2px)  scaleY(1.05); }
        100% { opacity: 1;   transform: translateY(0)    scaleY(1); }
}

.meridian-countdown__unit-label {
        font-size: var(--wp--preset--font-size--xs);
        color: var(--wp--preset--color--neutral-600);
        letter-spacing: 0.04em;
        margin-top: var(--wp--preset--spacing--4);
}

.meridian-countdown__colon {
        font-family: var(--wp--preset--font-family--heading);
        font-size: var(--wp--preset--font-size--2xl);
        color: var(--wp--preset--color--neutral-400);
        line-height: 1;
        align-self: flex-start;
        margin-top: -2px;
}

/* Compact variant inside a product card or single product page */
.meridian-countdown--compact .meridian-countdown__digit {
        font-size: var(--wp--preset--font-size--lg);
}

.meridian-countdown--compact .meridian-countdown__colon {
        font-size: var(--wp--preset--font-size--lg);
}

/* Hide countdown entirely (JS removes from DOM on expire — this is a safety net) */
.meridian-countdown[data-expired] {
        display: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
        .meridian-countdown__digit {
                transition: none;
        }
        .meridian-countdown__digit.is-ticking {
                animation: none;
        }
}

/* =========================================================================
 * Stock Badges
 * ====================================================================== */

.meridian-stock-badge {
        display: inline-block;
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--xs);
        font-weight: 500;
        letter-spacing: 0.04em;
        padding: 3px var(--wp--preset--spacing--8);
        border-radius: var(--wp--custom--radius--pill);
        line-height: 1.4;
        white-space: nowrap;
}

/* Low stock */
.meridian-stock-badge--low {
        background-color: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--surface));
        color: color-mix(in srgb, var(--wp--preset--color--accent) 80%, #000);
        border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
}

/* Out of stock */
.meridian-stock-badge--oos {
        background-color: color-mix(in srgb, var(--wp--preset--color--neutral-600) 10%, var(--wp--preset--color--surface));
        color: var(--wp--preset--color--neutral-600);
        border: 1px solid var(--wp--preset--color--neutral-200);
}

/* Backorder */
.meridian-stock-badge--backorder {
        background-color: color-mix(in srgb, var(--wp--preset--color--success) 10%, var(--wp--preset--color--surface));
        color: color-mix(in srgb, var(--wp--preset--color--success) 70%, #000);
        border: 1px solid color-mix(in srgb, var(--wp--preset--color--success) 20%, transparent);
}

/* Badge placement on product cards — absolute overlay top-left */
.meridian-product-image-wrap .meridian-stock-badge {
        position: absolute;
        top: var(--wp--preset--spacing--12);
        left: var(--wp--preset--spacing--12);
        z-index: 3;
}

/* On single product pages — inline under price */
.summary .meridian-stock-badge,
.product-summary .meridian-stock-badge {
        display: inline-flex;
        margin-top: var(--wp--preset--spacing--8);
}

/* =========================================================================
 * Sale Percentage Badge
 * ====================================================================== */

.meridian-sale-badge {
        display: inline-block;
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--xs);
        font-weight: 600;
        letter-spacing: 0.02em;
        padding: 3px var(--wp--preset--spacing--8);
        border-radius: var(--wp--custom--radius--pill);
        line-height: 1.4;
        white-space: nowrap;
        background-color: var(--wp--preset--color--accent);
        color: var(--wp--preset--color--surface);
}

/* Overlay top-right on product cards so it never collides with the
   top-left stock badge on products that are both on sale and low stock. */
.meridian-product-image-wrap .meridian-sale-badge {
        position: absolute;
        top: var(--wp--preset--spacing--12);
        right: var(--wp--preset--spacing--12);
        z-index: 3;
}

/* On single product pages — inline near the gallery */
.woocommerce-product-gallery .meridian-sale-badge {
        position: absolute;
        top: var(--wp--preset--spacing--12);
        right: var(--wp--preset--spacing--12);
        z-index: 3;
}

/* Hide WooCommerce's own generic "Sale!" badge wherever our percentage
   badge is present, so shoppers see one clear, specific discount label. */
.meridian-product-image-wrap:has(.meridian-sale-badge) .wc-block-components-product-badge,
.woocommerce-product-gallery:has(.meridian-sale-badge) .wc-block-components-product-badge,
.meridian-product-image-wrap:has(.meridian-sale-badge) span.onsale,
.woocommerce-product-gallery:has(.meridian-sale-badge) span.onsale {
        display: none;
}

/* =========================================================================
 * Breadcrumbs
 * ====================================================================== */

.meridian-breadcrumb {
        padding: var(--wp--preset--spacing--16) 0;
        margin-bottom: var(--wp--preset--spacing--24);
}

.meridian-breadcrumb__list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--wp--preset--spacing--8);
        list-style: none;
        margin: 0;
        padding: 0;
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--xs);
        color: var(--wp--preset--color--neutral-600);
}

.meridian-breadcrumb__item {
        display: flex;
        align-items: center;
        gap: var(--wp--preset--spacing--8);
}

.meridian-breadcrumb__item a {
        color: var(--wp--preset--color--neutral-600);
        text-decoration: none;
        transition: color var(--wp--custom--transition--base);
}

.meridian-breadcrumb__item a:hover {
        color: var(--wp--preset--color--ink);
}

/* Current page — no link, slightly darker */
.meridian-breadcrumb__item:last-child,
.meridian-breadcrumb__item:last-child a {
        color: var(--wp--preset--color--ink);
        font-weight: 500;
}

.meridian-breadcrumb__sep {
        color: var(--wp--preset--color--neutral-400);
        font-size: var(--wp--preset--font-size--xs);
        user-select: none;
}

/* WooCommerce outputs a plain <a> in its breadcrumb function —
   target both our custom structure and WC's default output */
.woocommerce-breadcrumb {
        font-size: var(--wp--preset--font-size--xs);
        color: var(--wp--preset--color--neutral-600);
        margin-bottom: var(--wp--preset--spacing--24);
}

.woocommerce-breadcrumb a {
        color: var(--wp--preset--color--neutral-600);
        text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
        color: var(--wp--preset--color--ink);
}

/* =========================================================================
 * AJAX Add-to-Cart loop feedback
 *
 * WooCommerce's built-in wc-add-to-cart.js adds .added to the button
 * and inserts a ".added_to_cart" link after it. Style both here.
 * ====================================================================== */

.wc-block-product-template .add_to_cart_button.loading,
.products .add_to_cart_button.loading {
        opacity: 0.6;
        pointer-events: none;
        position: relative;
}

.wc-block-product-template .add_to_cart_button.added,
.products .add_to_cart_button.added {
        background-color: var(--wp--preset--color--success);
        border-color: var(--wp--preset--color--success);
        color: var(--wp--preset--color--surface);
}

.added_to_cart {
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--xs);
        color: var(--wp--preset--color--neutral-600);
        text-decoration: underline;
        text-underline-offset: 2px;
        display: block;
        margin-top: var(--wp--preset--spacing--8);
        transition: color var(--wp--custom--transition--base);
}

.added_to_cart:hover {
        color: var(--wp--preset--color--ink);
}