/**
 * Veyra WooCommerce Integration.
 * Supports WooCommerce blocks and remaining classic account/product surfaces.
 */

:root {
    --veyra-commerce-control-height: 2.875rem;
}

.veyra-has-woocommerce :where(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .wc-block-components-notice-banner
) {
    padding: 1rem 1.15rem;
    border: 1px solid var(--wp--preset--color--border);
    border-left: 4px solid var(--wp--preset--color--primary);
    border-radius: var(--wp--custom--radius--medium);
    color: var(--wp--preset--color--contrast);
    background: var(--wp--preset--color--surface);
    box-shadow: none;
}

.veyra-has-woocommerce .woocommerce-error,
.veyra-has-woocommerce .wc-block-components-notice-banner.is-error {
    border-left-color: #c53030;
}

.veyra-has-woocommerce :where(
    button,
    .button,
    .woocommerce-button,
    .wc-block-components-button
) {
    min-height: var(--veyra-commerce-control-height);
    border-radius: 999px;
    font-weight: 700;
}

.veyra-has-woocommerce :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .select2-selection
) {
    min-height: var(--veyra-commerce-control-height);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--custom--radius--small);
    color: var(--wp--preset--color--contrast);
    background: var(--wp--preset--color--base);
    box-shadow: none;
}

.veyra-has-woocommerce :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .select2-selection
):focus {
    border-color: var(--wp--preset--color--primary);
    outline: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 24%, transparent);
    outline-offset: 1px;
}

.veyra-has-woocommerce :where(
    .wc-block-grid__product-image,
    .wc-block-components-product-image,
    .wc-block-product-template img,
    li.product img,
    .woocommerce-product-gallery img
) {
    overflow: hidden;
    border-radius: var(--wp--custom--radius--large);
    background: var(--wp--preset--color--surface);
}

.veyra-has-woocommerce :where(
    .wc-block-grid__product-title,
    .wc-block-components-product-name,
    .wc-block-product-title,
    .woocommerce-loop-product__title
) {
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--md);
    font-weight: 700;
    line-height: 1.3;
}

.veyra-has-woocommerce :where(
    .wc-block-grid__product-price,
    .wc-block-components-product-price,
    .wc-block-product-price,
    .price
) {
    color: var(--wp--preset--color--contrast);
    font-weight: 700;
}

.veyra-has-woocommerce :where(
    .wc-block-grid__product-onsale,
    .wc-block-components-product-sale-badge,
    .onsale
) {
    min-width: auto;
    min-height: auto;
    padding: 0.45rem 0.7rem;
    border: 0;
    border-radius: 999px;
    color: var(--wp--preset--color--base);
    background: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.veyra-has-woocommerce :where(
    .wc-block-components-product-rating,
    .star-rating
) {
    color: #a16207;
}

.veyra-has-woocommerce div.product {
    display: grid;
    gap: clamp(2rem, 6vw, 5rem);
}

.veyra-has-woocommerce :where(
    .summary,
    .wp-block-woocommerce-product-summary
) {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.veyra-has-woocommerce :where(
    .woocommerce-product-details__short-description,
    .wp-block-woocommerce-product-description
) {
    color: var(--wp--preset--color--muted);
    font-size: var(--wp--preset--font-size--md);
}

.veyra-has-woocommerce :where(
    .variations,
    .woocommerce-product-attributes,
    table.shop_table
) {
    width: 100%;
    border-color: var(--wp--preset--color--border);
}

.veyra-has-woocommerce :where(
    .variations th,
    .variations td,
    .woocommerce-product-attributes th,
    .woocommerce-product-attributes td,
    table.shop_table th,
    table.shop_table td
) {
    padding: 0.85rem 1rem;
    border-color: var(--wp--preset--color--border);
}

.veyra-has-woocommerce :where(
    .cart_totals,
    .woocommerce-checkout-review-order,
    .wc-block-cart__sidebar,
    .wc-block-checkout__sidebar,
    .woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-content,
    .woocommerce-form
) {
    padding: clamp(1rem, 3vw, 1.75rem);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--custom--radius--large);
    background: var(--wp--preset--color--base);
    box-shadow: var(--wp--preset--shadow--soft);
}

.veyra-has-woocommerce :where(
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    #place_order
) {
    width: 100%;
}

.veyra-commerce-cart .wp-site-blocks,
.veyra-commerce-checkout .wp-site-blocks {
    background: var(--wp--preset--color--surface);
}

.veyra-has-woocommerce .woocommerce-MyAccount-navigation ul {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.veyra-has-woocommerce .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 0.7rem 0.85rem;
    border-radius: var(--wp--custom--radius--small);
    color: var(--wp--preset--color--muted);
    text-decoration: none;
}

.veyra-has-woocommerce .woocommerce-MyAccount-navigation .is-active a,
.veyra-has-woocommerce .woocommerce-MyAccount-navigation a:hover {
    color: var(--wp--preset--color--contrast);
    background: var(--wp--preset--color--surface);
}

@media (min-width: 900px) {
    .veyra-has-woocommerce div.product {
        grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.75fr);
    }

    .veyra-has-woocommerce .woocommerce-account .woocommerce {
        display: grid;
        grid-template-columns: minmax(13rem, 0.28fr) minmax(0, 1fr);
        gap: clamp(1.5rem, 4vw, 3.5rem);
    }
}