/*
 * Meridian — WooCommerce Base CSS
 *
 * The WooCommerce bundled stylesheet is completely removed via the
 * `woocommerce_enqueue_styles` filter in functions.php. This file
 * replaces it with only the structural/layout rules needed for
 * WooCommerce to function correctly. All decorative styling (colors,
 * typography, borders, shadows) is handled by theme.json tokens so
 * the Global Styles panel in the Site Editor works as expected.
 *
 * Block-specific layout CSS (product grid, cart/checkout two-column layout,
 * product card hover effects) lives in assets/css/blocks.css.
 */

/* -------------------------------------------------------------------------
 * Clearfix — WooCommerce relies on this for some layouts
 * ---------------------------------------------------------------------- */
.woocommerce::after,
.woocommerce-page::after {
        content: "";
        display: table;
        clear: both;
}

/* -------------------------------------------------------------------------
 * Screen-reader text
 * ---------------------------------------------------------------------- */
.woocommerce .screen-reader-text {
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        overflow: hidden;
        position: absolute;
        width: 1px;
        word-wrap: normal;
}

/* -------------------------------------------------------------------------
 * Notices — informational, error, success
 * ---------------------------------------------------------------------- */
.woocommerce-notices-wrapper {
        margin-block-end: var(--wp--preset--spacing--24);
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
        list-style: none;
        margin: 0 0 var(--wp--preset--spacing--24);
        padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
        border-left: 3px solid;
        font-size: var(--wp--preset--font-size--sm);
}

.woocommerce-message {
        border-color: var(--wp--preset--color--success);
        background-color: color-mix(in srgb, var(--wp--preset--color--success) 8%, var(--wp--preset--color--surface));
        color: var(--wp--preset--color--neutral-800);
}

.woocommerce-error {
        border-color: var(--wp--preset--color--error);
        background-color: color-mix(in srgb, var(--wp--preset--color--error) 8%, var(--wp--preset--color--surface));
        color: var(--wp--preset--color--neutral-800);
}

.woocommerce-info {
        border-color: var(--wp--preset--color--accent);
        background-color: color-mix(in srgb, var(--wp--preset--color--accent) 10%, var(--wp--preset--color--surface));
        color: var(--wp--preset--color--neutral-800);
}

/* -------------------------------------------------------------------------
 * Forms — shared input/select/textarea styles
 * WooCommerce renders forms in classic checkout; block checkout uses
 * theme.json tokens directly. Both are covered here.
 * ---------------------------------------------------------------------- */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce select,
.woocommerce textarea,
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea textarea {
        width: 100%;
        padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
        border: 1px solid var(--wp--preset--color--neutral-200);
        border-radius: 0;
        background-color: var(--wp--preset--color--surface);
        color: var(--wp--preset--color--ink);
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--sm);
        line-height: 1.5;
        transition: border-color var(--wp--custom--transition--base);
        -webkit-appearance: none;
        appearance: none;
}

.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-textarea textarea:focus {
        outline: none;
        border-color: var(--wp--preset--color--ink);
}

.woocommerce label,
.wc-block-components-form-token-field-label,
.wc-block-components-checkbox__label {
        display: block;
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--xs);
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--wp--preset--color--neutral-600);
        margin-block-end: var(--wp--preset--spacing--8);
}

/* -------------------------------------------------------------------------
 * Buttons — WooCommerce-specific button elements
 * Base button appearance comes from theme.json elements.button styles.
 * ---------------------------------------------------------------------- */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce input[type="submit"],
.wc-block-components-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--wp--preset--spacing--8);
        cursor: pointer;
        background-color: var(--wp--preset--color--ink);
        color: var(--wp--preset--color--parchment);
        border: 1px solid var(--wp--preset--color--ink);
        border-radius: 0;
        padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--32);
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--xs);
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
        line-height: 1;
        transition:
                background-color var(--wp--custom--transition--smooth),
                border-color var(--wp--custom--transition--smooth),
                color var(--wp--custom--transition--smooth);
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce input[type="submit"]:hover,
.wc-block-components-button:hover {
        background-color: var(--wp--preset--color--accent);
        border-color: var(--wp--preset--color--accent);
        color: var(--wp--preset--color--surface);
}

.woocommerce button.button.alt,
.woocommerce a.button.alt {
        background-color: var(--wp--preset--color--accent);
        border-color: var(--wp--preset--color--accent);
        color: var(--wp--preset--color--surface);
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
        background-color: var(--wp--preset--color--accent-deep);
        border-color: var(--wp--preset--color--accent-deep);
}

/* -------------------------------------------------------------------------
 * Price display
 * ---------------------------------------------------------------------- */
.woocommerce-Price-amount,
.wc-block-components-product-price__value {
        font-family: var(--wp--preset--font-family--body);
        font-weight: 500;
}

del .woocommerce-Price-amount,
.wc-block-components-product-price__regular {
        color: var(--wp--preset--color--neutral-400);
        font-weight: 400;
        text-decoration: line-through;
}

ins .woocommerce-Price-amount,
.wc-block-components-product-price__sale {
        color: var(--wp--preset--color--sale);
        text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Star ratings
 * ---------------------------------------------------------------------- */
.star-rating {
        overflow: hidden;
        position: relative;
        height: 1em;
        line-height: 1;
        font-size: var(--wp--preset--font-size--sm);
        width: 5.4em;
        font-family: "star";
        font-weight: 400;
}

.star-rating::before {
        content: "\73\73\73\73\73";
        color: var(--wp--preset--color--neutral-200);
        float: left;
        top: 0;
        left: 0;
        position: absolute;
        letter-spacing: 0.1em;
}

.star-rating span {
        overflow: hidden;
        float: left;
        top: 0;
        left: 0;
        position: absolute;
        padding-top: 1.5em;
}

.star-rating span::before {
        content: "\73\73\73\73\73";
        top: 0;
        position: absolute;
        left: 0;
        color: var(--wp--preset--color--accent);
        letter-spacing: 0.1em;
}

/* -------------------------------------------------------------------------
 * Review form — interactive star rating (p.stars)
 * WooCommerce renders p.stars for the rating input in the review form.
 * The theme removes WC bundled CSS entirely, so we replicate p.stars here.
 * ---------------------------------------------------------------------- */
p.stars {
        display: inline-block;
        margin: 0 0 1em;
        line-height: 1;
}

p.stars span {
        display: inline-block;
        line-height: 1;
}

p.stars a {
        display: inline-block;
        position: relative;
        width: 1em;
        text-indent: -999em;
        overflow: hidden;
        background: transparent;
        font-family: "star";
        font-size: 1.5em;
        line-height: 1;
        vertical-align: bottom;
        text-decoration: none;
        color: transparent;
}

p.stars a::before {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 1em;
        height: 1em;
        line-height: 1;
        font-family: "star";
        content: "\73";
        color: var(--wp--preset--color--neutral-300);
        text-indent: 0;
}

/* On hover: fill all stars up to and including the hovered one */
p.stars:hover a::before,
p.stars a.active::before {
        color: var(--wp--preset--color--accent);
}

/* Stars after the hovered one revert to empty */
p.stars a:hover ~ a::before {
        color: var(--wp--preset--color--neutral-300);
}

/* -------------------------------------------------------------------------
 * Mini-cart drawer — mobile positioning
 *
 * WooCommerce Blocks renders the mini-cart drawer with position:fixed.
 * On iOS Safari, overflow-x:clip on the <html> element breaks that by
 * changing the fixed containing block — we removed it from <html> (see
 * global.css) but also enforce correct sizing here as a safety net.
 * ---------------------------------------------------------------------- */

/* On mobile the drawer should fill the full screen width */
@media (max-width: 480px) {
        .wc-block-mini-cart__drawer {
                width: 100% !important;
                max-width: 100% !important;
                left: 0 !important;
                right: 0 !important;
                border-radius: 0 !important;
        }
}

/* Constrain content inside the drawer so it doesn't overflow on small screens */
@media (max-width: 480px) {
        .wc-block-mini-cart__container {
                padding: var(--wp--preset--spacing--16) !important;
        }

        .wc-block-mini-cart__footer {
                padding: var(--wp--preset--spacing--16) !important;
        }
}

/* -------------------------------------------------------------------------
 * Block checkout — WooCommerce block component base styles
 * Decorative tokens (color, typography) come from theme.json.
 * These rules handle layout and structural concerns only.
 * ---------------------------------------------------------------------- */
.wc-block-checkout__main,
.wc-block-cart__main {
        display: grid;
        gap: var(--wp--preset--spacing--32);
}

.wc-block-components-form .wc-block-components-form-step {
        margin-block-end: var(--wp--preset--spacing--32);
}

.wc-block-components-checkout-step__title {
        font-family: var(--wp--preset--font-family--heading);
        font-size: var(--wp--preset--font-size--lg);
        font-weight: 400;
        letter-spacing: -0.01em;
}

.wc-block-components-order-summary {
        border: 1px solid var(--wp--preset--color--neutral-200);
        padding: var(--wp--preset--spacing--32);
}

.wc-block-components-totals-wrapper {
        border-top: 1px solid var(--wp--preset--color--neutral-200);
        padding-top: var(--wp--preset--spacing--24);
}

/* =========================================================================
 * Grouped product table
 * ====================================================================== */

/* Grouped product — WooCommerce 10.x table-based layout */
.meridian-grouped-form {
        display: flex;
        flex-direction: column;
        gap: var(--wp--preset--spacing--24);
}

.meridian-grouped-form .woocommerce-grouped-product-list {
        width: 100%;
        border-collapse: collapse;
        border-top: 1px solid var(--wp--preset--color--neutral-100);
}

.meridian-grouped-form .woocommerce-grouped-product-list-item {
        border-bottom: 1px solid var(--wp--preset--color--neutral-100);
}

.meridian-grouped-form .woocommerce-grouped-product-list-item td {
        padding: var(--wp--preset--spacing--16) 0;
        vertical-align: middle;
}

/* Quantity column */
.meridian-grouped-form .woocommerce-grouped-product-list-item__quantity {
        width: 5rem;
        padding-right: var(--wp--preset--spacing--16);
}

.meridian-grouped-form .woocommerce-grouped-product-list-item__quantity .quantity input {
        width: 4rem;
        text-align: center;
}

/* Label column */
.meridian-grouped-form .woocommerce-grouped-product-list-item__label {
        flex: 1 1 auto;
}

.meridian-grouped-form .woocommerce-grouped-product-list-item__label label,
.meridian-grouped-form .woocommerce-grouped-product-list-item__label a {
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--md);
        color: var(--wp--preset--color--neutral-900);
        text-decoration: none;
}

.meridian-grouped-form .woocommerce-grouped-product-list-item__label a:hover {
        text-decoration: underline;
}

/* Price column */
.meridian-grouped-form .woocommerce-grouped-product-list-item__price {
        text-align: right;
        font-size: var(--wp--preset--font-size--sm);
        color: var(--wp--preset--color--neutral-600);
        white-space: nowrap;
}

.meridian-grouped-form .woocommerce-grouped-product-list-item__price ins {
        text-decoration: none;
}

/* Out-of-stock / unavailable quantity cell */
.meridian-grouped-form .woocommerce-grouped-product-list-item__quantity .stock.out-of-stock,
.meridian-grouped-form .woocommerce-grouped-product-list-item__quantity .button {
        font-size: var(--wp--preset--font-size--sm);
        color: var(--wp--preset--color--neutral-400);
}