/*
 * Cook and Live Shop
 * WooCommerce CSS foundation
 */

/* --------------------------------------------------------------
   Design variables
-------------------------------------------------------------- */

:root {
    --cl-shop-text: #111111;
    --cl-shop-muted: #666666;
    --cl-shop-border: #dedede;
    --cl-shop-surface: #f5f7f6;
    --cl-shop-background: #ffffff;
    --cl-shop-button: #f0f0f0;
    --cl-shop-button-border: #949494;
    --cl-shop-button-text: #111111;
    --cl-shop-button-hover: #e2e2e2;
    --cl-shop-radius: 4px;
    --cl-shop-transition: 0.2s ease;
}

/* --------------------------------------------------------------
   Base WooCommerce controls
-------------------------------------------------------------- */

.woocommerce input,
.woocommerce select,
.woocommerce textarea,
.woocommerce button {
    font: inherit;
}

/* --------------------------------------------------------------
   Buttons
-------------------------------------------------------------- */

/*
 * Supports both classic WooCommerce buttons and newer
 * WooCommerce block-based buttons.
 */
body.woocommerce-page .button,
body.woocommerce-page .wp-element-button,
body.woocommerce-page .wp-block-button__link,
body.woocommerce-page .wc-block-components-button,
body.woocommerce-page
    .wc-block-components-product-button__button {
    border: 1px solid var(--cl-shop-button-border);
    border-radius: var(--cl-shop-radius) !important;
    background: var(--cl-shop-button);
    color: var(--cl-shop-button-text);
    line-height: 1.2;
    text-decoration: none;
    transition:
        background-color var(--cl-shop-transition),
        color var(--cl-shop-transition),
        border-color var(--cl-shop-transition);
}

/*
 * Button hover and keyboard-focus states.
 */
body.woocommerce-page .button:hover,
body.woocommerce-page .button:focus-visible,
body.woocommerce-page .wp-element-button:hover,
body.woocommerce-page .wp-element-button:focus-visible,
body.woocommerce-page .wp-block-button__link:hover,
body.woocommerce-page .wp-block-button__link:focus-visible,
body.woocommerce-page .wc-block-components-button:hover,
body.woocommerce-page .wc-block-components-button:focus-visible,
body.woocommerce-page
    .wc-block-components-product-button__button:hover,
body.woocommerce-page
    .wc-block-components-product-button__button:focus-visible {
    border-color: var(--cl-shop-button-border);
    background: var(--cl-shop-button-hover);
    color: var(--cl-shop-button-text);
}

/* --------------------------------------------------------------
   Form controls
-------------------------------------------------------------- */

.woocommerce input.input-text,
.woocommerce input[type="email"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce input[type="tel"],
.woocommerce input[type="text"],
.woocommerce input[type="url"],
.woocommerce select,
.woocommerce textarea {
    box-sizing: border-box;
    max-width: 100%;
    border: 1px solid var(--cl-shop-border);
    border-radius: var(--cl-shop-radius);
    background: var(--cl-shop-background);
    color: var(--cl-shop-text);
}

/*
 * Clear keyboard focus for form controls.
 */
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible {
    outline: 2px solid var(--cl-shop-text);
    outline-offset: 2px;
}

/* --------------------------------------------------------------
   Breadcrumbs and secondary information
-------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count,
.woocommerce .product_meta {
    color: var(--cl-shop-muted);
}

/*
 * Preserve readable links inside secondary information.
 */
.woocommerce .woocommerce-breadcrumb a,
.woocommerce .product_meta a {
    color: inherit;
    text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------
   Product images
-------------------------------------------------------------- */

.woocommerce ul.products li.product img,
.woocommerce div.product div.images img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------
   WooCommerce notices
-------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    box-sizing: border-box;
    border-radius: var(--cl-shop-radius);
}

/* --------------------------------------------------------------
   Small-screen foundation
-------------------------------------------------------------- */

@media (max-width: 600px) {
    /*
     * Classic and block-based result count.
     */
    body.woocommerce-page
        .woocommerce-result-count,
    body.woocommerce-page
        .wp-block-woocommerce-product-results-count {
        float: none !important;
        display: block !important;
        flex-basis: 100% !important;
        width: 100% !important;
        margin: 0 0 0.75rem !important;
    }

    /*
     * Classic and block-based catalog sorting.
     */
    body.woocommerce-page
        .woocommerce-ordering,
    body.woocommerce-page
        .wp-block-woocommerce-catalog-sorting {
        float: none !important;
        display: block !important;
        flex-basis: 100% !important;
        width: 100% !important;
        margin: 0 0 1rem !important;
    }

    body.woocommerce-page
        .woocommerce-ordering select,
    body.woocommerce-page
        .wp-block-woocommerce-catalog-sorting select {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
    }

/*
 * Allow the result-count and sorting parent
 * group to form two separate rows.
 */
body.woocommerce-shop
    .wp-block-group:has(
        .woocommerce-result-count
    ):has(
        .woocommerce-ordering
    ),
body.woocommerce-shop
    .wp-block-group:has(
        .wp-block-woocommerce-product-results-count
    ):has(
        .wp-block-woocommerce-catalog-sorting
    ) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    width: 100% !important;
}

    /*
     * Permit the parent layout containing the result
     * count and sorting control to wrap.
     */
    body.woocommerce-page
        .wp-block-woocommerce-product-results-count,
    body.woocommerce-page
        .wp-block-woocommerce-catalog-sorting {
        flex-grow: 1;
    }

    /*
     * Quantity and Add to cart controls.
     */
    body.single-product
        div.product
        form.cart {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: stretch;
    }

    body.single-product
        div.product
        form.cart
        .quantity {
        margin: 0;
    }

    /*
     * Classic product metadata.
     */
    body.single-product
        div.product
        .product_meta
        > span {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.4rem;
    }

    /*
     * Block-based product metadata.
     */
    body.single-product
        .wp-block-woocommerce-product-meta
        .wp-block-group {
        display: block !important;
    }

    body.single-product
        .wp-block-woocommerce-product-sku,
    body.single-product
        .wp-block-woocommerce-product-category {
        display: block !important;
        width: 100% !important;
        margin: 0 0 0.4rem !important;
    }
}