/*
 * WooCommerce Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Targets WooCommerce's own class structure.
 * No !important. Specificity is matched or slightly raised where WC
 * generates inline styles or high-specificity selectors.
 *
 * Loaded only on WooCommerce pages (is_woocommerce, is_cart, is_checkout,
 * is_account_page) via the enqueue.php conditional.
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ── Product Cards (global — every WooCommerce product list) ────────────────────
 * One consistent card across the shop archive, related products, the cart
 * recommendation, and every WooCommerce products block (Product Collection, All
 * Products, Hand-picked, On Sale, New, Top Rated, By Category, …). Cream surface +
 * border + radius from the MSK palette, a soft dark shadow, equal-height cards (flex
 * column; the title reserves two lines so prices + buttons line up), bigger/bolder
 * titles + accent prices, and the bold add-to-cart pinned to the bottom. The three
 * markups: classic `ul.products li.product`, legacy grid `.wc-block-grid__product`,
 * and modern Product Collection `li.wc-block-product`.
 */
ul.products li.product,
.wc-block-grid__product,
li.wc-block-product {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0; /* let the image bleed; inner text rows carry their own inset */
    background: var(--msk-woo-card-surface, var(--msk-color-surface));
    border: 1px solid var(--msk-woo-card-border, var(--msk-color-border));
    border-radius: var(--msk-woo-card-radius, var(--msk-radius-lg));
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(34, 34, 34, 0.16);
    transition:
        box-shadow var(--msk-duration-normal) var(--msk-ease-out),
        transform var(--msk-duration-normal) var(--msk-ease-out);
}

ul.products li.product:hover,
.wc-block-grid__product:hover,
li.wc-block-product:hover {
    box-shadow: var(--msk-woo-card-hover-shadow, 0 12px 28px rgba(34, 34, 34, 0.24));
    transform: var(--msk-woo-card-hover-transform, translateY(-4px));
    border-color: transparent;
}

/* Match the Product Collection's card gap on the legacy "products" grids (handpicked,
 * on-sale, new, top-rated, best-sellers, by-category) — their cards are otherwise
 * flush against each other. The flex-basis shrinks per the block's column count so the
 * gap doesn't force wrapping. */
.wc-block-grid__products {
    gap: 1.75rem;
}
.wc-block-grid.has-1-columns .wc-block-grid__products .wc-block-grid__product {
    flex: 0 0 100%;
    max-width: 100%;
}
.wc-block-grid.has-2-columns .wc-block-grid__products .wc-block-grid__product {
    flex: 0 0 calc((100% - 1.75rem) / 2);
    max-width: calc((100% - 1.75rem) / 2);
}
.wc-block-grid.has-3-columns .wc-block-grid__products .wc-block-grid__product {
    flex: 0 0 calc((100% - 3.5rem) / 3);
    max-width: calc((100% - 3.5rem) / 3);
}
.wc-block-grid.has-4-columns .wc-block-grid__products .wc-block-grid__product {
    flex: 0 0 calc((100% - 5.25rem) / 4);
    max-width: calc((100% - 5.25rem) / 4);
}
.wc-block-grid.has-5-columns .wc-block-grid__products .wc-block-grid__product {
    flex: 0 0 calc((100% - 7rem) / 5);
    max-width: calc((100% - 7rem) / 5);
}
.wc-block-grid.has-6-columns .wc-block-grid__products .wc-block-grid__product {
    flex: 0 0 calc((100% - 8.75rem) / 6);
    max-width: calc((100% - 8.75rem) / 6);
}

/* Image bleeds to the card edges; capped to a uniform square (matching the shop's
 * woocommerce_thumbnail crop) so cards are the same height regardless of the source
 * image's aspect ratio. Subtle zoom on hover. */
ul.products li.product a img,
.wc-block-grid__product-image img,
li.wc-block-product .wc-block-components-product-image img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform var(--msk-duration-slow) var(--msk-ease-smooth);
}
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-image,
li.wc-block-product .wc-block-components-product-image {
    margin: 0;
}
ul.products li.product:hover a img,
.wc-block-grid__product:hover .wc-block-grid__product-image img,
li.wc-block-product:hover .wc-block-components-product-image img {
    transform: scale(1.04);
}

/* Titles — bigger, bold; reserve two lines so prices + buttons align across cards. */
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product .wc-block-grid__product-title,
li.wc-block-product .wp-block-post-title {
    font-size: var(--msk-font-size-md);
    font-weight: 700;
    line-height: var(--msk-leading-tight, 1.25);
    min-block-size: 2.5em;
    padding-inline: var(--msk-space-3, 0.75rem);
    margin-block: var(--msk-space-3, 0.75rem) 0; /* space above the title (8px → 12px, +50%) */
}

/* Prices — bold, accent; struck original lighter on sale. */
ul.products li.product .price,
.wc-block-grid__product-price,
li.wc-block-product .wc-block-components-product-price {
    font-size: var(--msk-font-size-base);
    font-weight: 800;
    color: var(--msk-woo-price, var(--msk-color-accent));
    padding-inline: var(--msk-space-3, 0.75rem);
    margin-block: var(--msk-space-1, 0.25rem);
}
ul.products li.product .price del,
.wc-block-grid__product-price del,
li.wc-block-product .wc-block-components-product-price del {
    font-weight: 400;
}

/* Add-to-cart pinned to the bottom so buttons line up on equal-height cards. */
ul.products li.product .add_to_cart_button,
.wc-block-grid__product .wc-block-grid__product-add-to-cart,
li.wc-block-product .wp-block-button.wc-block-components-product-button {
    margin-block: auto var(--msk-space-3, 0.75rem);
    margin-inline: var(--msk-space-3, 0.75rem);
}

/* Sale badge pinned to the top-right corner, in the MSK sale palette (sale_bg /
 * sale_text settings) and bold — applied to the block-card badge classes too, which
 * the classic `.woocommerce span.onsale` rule doesn't reach. */
ul.products li.product .onsale,
.wc-block-grid__product .wc-block-grid__product-onsale,
.wc-block-grid__product .onsale,
li.wc-block-product .wc-block-components-product-sale-badge,
li.wc-block-product .onsale {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    margin: 0;
    z-index: 1;
    background: var(--msk-woo-sale-bg, var(--msk-gradient-accent));
    color: var(--msk-woo-sale-text, #ffffff);
    border-radius: var(--msk-woo-sale-radius, var(--msk-radius-full));
    padding: 0.25rem 0.6rem;
    font-size: var(--msk-font-size-xs, 0.75rem);
    font-weight: 700;
}

/* ── Product Page (Single) ─────────────────────────────────────────────── */

/* Summary area refinements */
.woocommerce div.product .product_title {
    letter-spacing: var(--msk-tracking-tight);
    line-height: var(--msk-leading-tight);
    margin-block-end: var(--msk-space-4);
}

/* Price: make it a focal point */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: var(--msk-font-size-lg);
    font-weight: 700;
    color: var(--msk-woo-price, var(--msk-color-accent));
}

/* Single product page (block-theme template) — larger, bolder price. The classic
 * rule above doesn't reach the woocommerce/product-price block; body.single-product
 * raises specificity over the theme's font-size preset without !important. */
body.single-product .wp-block-woocommerce-product-price,
body.single-product .wp-block-woocommerce-product-price .woocommerce-Price-amount {
    font-size: 2rem; /* fixed 32px — even, non-fluid */
    font-weight: 800;
}

/* On sale: keep the struck original lighter, like the cart cards. */
body.single-product .wp-block-woocommerce-product-price del,
body.single-product .wp-block-woocommerce-product-price del .woocommerce-Price-amount {
    font-weight: 400;
}

/* ── Shop archive (product catalogue) — bigger, bolder, prettier ────────────────
 * Scoped to body.post-type-archive-product. Bigger/bolder product titles + prices
 * and a bold Add-to-Cart label (the button COLOURS/RADIUS are configurable in the
 * Shop settings and emitted inline by build_shop_overrides()). The sorting dropdown
 * is restyled below. body-class scope keeps all of this off other WooCommerce pages.
 */
body.post-type-archive-product li.product .wp-block-post-title,
body.post-type-archive-product li.product .woocommerce-loop-product__title,
body.post-type-archive-product li.product .wc-block-grid__product-title,
body.post-type-archive-product li.product .wc-block-components-product-title {
    font-size: var(--msk-font-size-md);
    font-weight: 700;
    line-height: var(--msk-leading-tight, 1.25);
}

body.post-type-archive-product li.product .price,
body.post-type-archive-product li.product .wc-block-components-product-price,
body.post-type-archive-product li.product .wc-block-grid__product-price {
    font-size: var(--msk-font-size-base);
    font-weight: 800;
    color: var(--msk-woo-price, var(--msk-color-accent));
}

/* On sale: keep the struck original lighter. */
body.post-type-archive-product li.product del,
body.post-type-archive-product li.product del .woocommerce-Price-amount {
    font-weight: 400;
}

/* Bold Add-to-Cart label. */
body.post-type-archive-product li.product .add_to_cart_button,
body.post-type-archive-product li.product .wp-block-button__link.add_to_cart_button {
    font-weight: 700;
}

/* "Default sorting" dropdown — larger, rounded, padded, with a custom chevron. */
body.post-type-archive-product .woocommerce-ordering select.orderby,
body.post-type-archive-product .woocommerce-ordering select[name="orderby"] {
    font-size: var(--msk-font-size-base);
    font-weight: 600;
    line-height: 1.2;
    padding: 0.6rem 2.75rem 0.6rem 1.1rem;
    border: 1px solid var(--msk-woo-card-border, var(--msk-color-border));
    border-radius: var(--msk-radius-md);
    background-color: var(--msk-woo-card-surface, var(--msk-color-surface));
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.95rem;
    cursor: pointer;
    transition:
        border-color var(--msk-duration-normal) var(--msk-ease-out),
        box-shadow var(--msk-duration-normal) var(--msk-ease-out);
}

body.post-type-archive-product .woocommerce-ordering select.orderby:hover {
    border-color: var(--msk-woo-accent, var(--msk-color-accent));
}

body.post-type-archive-product .woocommerce-ordering select.orderby:focus {
    border-color: var(--msk-woo-accent, var(--msk-color-accent));
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--msk-woo-accent, var(--msk-color-accent)) 20%, transparent);
    outline: none;
}

/* Sale badge */
.woocommerce span.onsale {
    background: var(--msk-woo-sale-bg, var(--msk-gradient-accent));
    color: var(--msk-woo-sale-text, #ffffff);
    border-radius: var(--msk-woo-sale-radius, var(--msk-radius-full));
    font-size: var(--msk-font-size-xs);
    font-weight: 700;
    letter-spacing: var(--msk-tracking-wide);
    text-transform: uppercase;
    padding: var(--msk-space-1) var(--msk-space-3);
    min-width: unset;
    min-height: unset;
    line-height: 1.4;
    top: var(--msk-space-3);
    left: var(--msk-space-3);
}

/* Add to Cart button */
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt {
    font-weight: 700;
    letter-spacing: var(--msk-tracking-wide);
    padding-inline: var(--msk-space-8);
    transition:
        background-color var(--msk-duration-fast) var(--msk-ease-out),
        box-shadow       var(--msk-duration-fast) var(--msk-ease-out),
        transform        var(--msk-duration-fast) var(--msk-ease-out);
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover {
    transform: translateY(-1px);
    box-shadow: var(--msk-shadow-accent);
}

/* ── Global action-button shape ─────────────────────────────────────────────────
 * One consistent look for every Add-to-Cart, "Proceed to Checkout", and "Place
 * order" button across the shop, product, cart, and checkout: slightly-rounded
 * corners (configurable via the Button corners setting — the default is now a soft
 * 8px radius rather than a full pill) and a bold label.
 */
.woocommerce .single_add_to_cart_button,
.woocommerce a.add_to_cart_button,
.woocommerce button.add_to_cart_button,
.woocommerce .button.alt,
.wp-block-button__link.add_to_cart_button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    border-radius: var(--msk-woo-button-radius, var(--msk-radius-md));
    font-weight: 700;
}

/* ── Cart & Checkout ───────────────────────────────────────────────────── */

/* Block-based cart/checkout table */
.wc-block-cart-items,
.wc-block-components-order-summary {
    border-radius: var(--msk-radius-lg);
    overflow: hidden;
    border: 1px solid var(--msk-color-border);
}

/* Form fields */
.wc-block-components-text-input input,
.wc-block-components-select select,
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select {
    border-radius: var(--msk-radius-md);
    border-color: var(--msk-color-border);
    transition: border-color var(--msk-duration-fast) var(--msk-ease-out),
                box-shadow   var(--msk-duration-fast) var(--msk-ease-out);
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: var(--msk-woo-accent, var(--msk-color-accent));
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--msk-woo-accent, var(--msk-color-accent)) 20%, transparent);
    outline: none;
}

/* ── Notices ───────────────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--msk-radius-md);
    border-inline-start-width: 4px;
}

/* ── prefers-reduced-motion ─────────────────────────────────────────────
 * WCAG 2.3.3 — honour users' OS-level motion preference. The 0.01ms
 * duration cancels visible motion while still firing transitionend /
 * animationend events that JS handlers may listen for.
 */
@media ( prefers-reduced-motion: reduce ) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Enhanced Empty Cart ────────────────────────────────────────────────────────
 * Opt-in via Settings → Maple Site Kit → WooCommerce → Empty Cart. Markup is
 * rendered by inc/woocommerce.php (render_empty_cart). Cards inherit the MSK
 * WooCommerce palette (surface/border/radius/price); the pill colours come from the
 * Empty Cart settings (emitted inline on the element). Scoped to .msk-empty-cart so
 * nothing leaks to the filled cart, and kept free of !important.
 */
.msk-empty-cart {
    text-align: center;
    max-width: 100%;
    margin-inline: auto;
    padding-block: var(--msk-space-12, 2.75rem) var(--msk-space-4, 1rem);
}

.msk-empty-cart__message {
    font-size: clamp(1.16rem, 2.08vw, 1.64rem);
    line-height: var(--msk-leading-snug, 1.3);
    font-weight: 700;
    margin: 0 auto 0.5rem;
}

.msk-empty-cart__pill {
    display: inline-block;
    font-weight: 700;
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    letter-spacing: var(--msk-tracking-wide, 0.05em);
    text-transform: uppercase;
    padding: 0.55rem 1.5rem;
    border-radius: var(--msk-radius-full, 999px);
    margin: 1.5rem auto;
}

.msk-empty-cart__products {
    list-style: none;
    margin: 0.5rem auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.25rem;
    max-width: 1040px;
}

.msk-empty-cart__product {
    flex: 1 1 240px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: var(--msk-woo-card-surface, var(--msk-color-surface));
    border: 1px solid var(--msk-woo-card-border, var(--msk-color-border));
    border-radius: var(--msk-woo-card-radius, var(--msk-radius-lg));
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(34, 34, 34, 0.16);
    transition: box-shadow var(--msk-duration-normal) var(--msk-ease-out);
}

.msk-empty-cart__product:hover {
    box-shadow: 0 12px 28px rgba(34, 34, 34, 0.24);
}

.msk-empty-cart__product-link {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
}

.msk-empty-cart__product-link img {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

/* Bigger title; reserve two lines so prices + buttons align across cards. */
.msk-empty-cart__product-title {
    display: block;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: var(--msk-leading-tight, 1.25);
    min-block-size: 2.5em;
    padding: 0.85rem 0.75rem 0;
}

.msk-empty-cart__product-price {
    font-weight: 700;
    padding: 0.35rem 0.75rem 0.85rem;
    color: var(--msk-woo-price, var(--msk-color-accent));
}

/* On sale: keep the struck original light, bold the final price. */
.msk-empty-cart__product-price del,
.msk-empty-cart__product-price del .amount {
    font-weight: 400;
}

/* Add-to-cart: bold, slightly rounded, pinned to the bottom so buttons align. */
.msk-empty-cart__product .button {
    margin: auto 0.75rem 1rem;
    font-weight: 700;
    border-radius: 8px;
}

/* Sale flash on the cover (uses the MSK sale-badge palette). */
.msk-empty-cart__product .onsale {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    margin: 0;
    background: var(--msk-woo-sale-bg, var(--msk-gradient-accent));
    color: var(--msk-woo-sale-text, #ffffff);
    border-radius: var(--msk-woo-sale-radius, var(--msk-radius-full));
    padding: 0.25rem 0.6rem;
    font-size: var(--msk-font-size-xs, 0.75rem);
    font-weight: 700;
}

@media (max-width: 768px) {
    .msk-empty-cart__products {
        grid-template-columns: 1fr;
        max-width: 22rem;
    }
}

/* ── Filled-cart recommendation ("We also recommend:") ──────────────────────────
 * Reuses the .msk-empty-cart promo styling above; this adds the wide width and a
 * separating rule above it. Appended after the cart block (a sibling of the React
 * cart wrapper), so it is a top-level child of the constrained layout — widen it to
 * the theme's wide size (the constraint rule is :where() = 0 specificity).
 */
.msk-cart-recommend {
    max-width: var(--wp--style--global--wide-size, 1340px);
    margin-inline: auto;
    margin-block-start: var(--msk-space-10, 2.5rem);
    padding-block-start: var(--msk-space-8, 2rem);
    border-block-start: 1px solid var(--msk-woo-card-border, var(--msk-color-border));
}

/* ── Cart polish (always on whenever the cart renders) ──────────────────────────
 * Bold the Proceed-to-Checkout label and the estimated-total row (label + amount).
 * Cart-wrapper-prefixed for specificity over WooCommerce's own block styles.
 */
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
    font-weight: 700;
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-weight: 700;
}