/* =============================================
   WooCommerce Custom Overrides
   ============================================= */

/* Forms */
.woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce form .form-row label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: 6px; color: var(--color-dark); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    outline: none;
    transition: var(--transition);
    background: var(--color-surface);
    font-family: var(--font-primary);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--color-danger); }

/* WC buttons */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-3) var(--space-6);
    cursor: pointer;
    transition: var(--transition);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-primary);
    line-height: 1.4;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}
.woocommerce .button.alt { background: var(--color-contrast); border-color: var(--color-contrast); }
.woocommerce .button.alt:hover { background: var(--neutral-800); border-color: var(--neutral-800); }

/* WC breadcrumb */
.woocommerce .woocommerce-breadcrumb {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: transparent;
    padding: 0;
    margin: 0;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--color-text-light); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--color-accent); }

/* Product price */
.woocommerce .price { color: var(--color-accent); font-weight: 700; }
.woocommerce del .amount { color: var(--color-text-muted); font-size: 0.9em; }
.woocommerce ins .amount { color: var(--color-accent); }

/* Sale badge */
.woocommerce span.onsale {
    background: var(--color-danger);
    border-radius: var(--radius-sm);
    min-height: 0;
    min-width: 0;
    padding: 3px 8px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    top: 10px;
    left: 10px;
    line-height: 1.4;
}

/* WC notices ---------------------------------------------------------
   WooCommerce draws a glyph from its own icon webfont in an absolutely
   positioned ::before at left:1.5em, and relies on a wide left padding to
   clear it. Overriding the padding without removing the glyph made the
   icon sit on top of the first letter ("Have a coupon" rendered as a box
   plus "ave a coupon"). Drop the glyph and style the notices as the theme's
   own alert cards instead.
   -------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5) !important;
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border-strong);
    border-radius: var(--radius);
    list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    content: none !important;
}
.woocommerce-message {
    background: var(--color-primary-050);
    border-color: var(--color-primary-200);
    border-left-color: var(--color-success);
}
.woocommerce-info {
    background: var(--color-bg-light);
    border-left-color: var(--color-info);
}
.woocommerce-error {
    background: var(--color-danger-050);
    border-left-color: var(--color-danger);
    padding-left: var(--space-5) !important;
}
.woocommerce-error li { margin: 0; padding: 0; border: 0; background: none; }
/* Push the notice's inline action button to the right. */
.woocommerce-message .button,
.woocommerce-info .button {
    margin-left: auto;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    /* Notices colour their links with the accent green; without an explicit
       colour the button inherits it and lands green-on-green. */
    color: var(--color-white);
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
    color: var(--color-white);
}

/* Two-up fields (billing first/last name, etc.).
   Replaces the old float pair, which needed clearfixing and collapsed the
   parent. Flex on the row wrapper keeps the two columns aligned and stacks
   cleanly at narrow widths. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - var(--space-2));
    float: none;
    margin: 0 0 var(--space-4);
}
.woocommerce form .form-row-first { margin-right: var(--space-3); }
.woocommerce form .form-row.form-row-wide { clear: both; width: 100%; }

/* Password field: keep the reveal toggle inside the input box. */
.woocommerce form .woocommerce-password-input { position: relative; display: block; }
.woocommerce form .woocommerce-password-input .show-password-input {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* =============================================
   CLASSIC CHECKOUT  ([woocommerce_checkout])

   WooCommerce's own layout stylesheet floats #customer_details into two
   47% columns and stacks the order review beneath at full width, which
   reads as one long ribbon on a wide screen. Lay it out as form-left /
   order-summary-right instead, matching the rest of the theme.
   ============================================= */
.woocommerce-checkout .woocommerce { max-width: none; }

.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
        "details summary-title"
        "details summary";
    /* Row 1 hugs the heading so the summary card sits directly beneath it;
       row 2 absorbs the height of the much taller form column. */
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: var(--space-9);
    row-gap: var(--space-4);
    margin-top: var(--space-7);
}
.woocommerce-checkout form.checkout #customer_details { grid-area: details; }
.woocommerce-checkout form.checkout #order_review_heading { grid-area: summary-title; margin: 0; }
.woocommerce-checkout form.checkout #order_review { grid-area: summary; }

/* Billing and "additional information" stack within the narrower column. */
.woocommerce-checkout #customer_details .col2-set,
.woocommerce-checkout #customer_details {
    display: block;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    width: 100%;
    float: none;
    margin: 0 0 var(--space-7);
}
.woocommerce-checkout #customer_details h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

/* Two-up name fields inside the form column. */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { width: calc(50% - var(--space-2)); }

/* --- Order summary card --- */
.woocommerce-checkout #order_review_heading {
    font-size: var(--text-xl);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.woocommerce-checkout #order_review {
    position: sticky;
    top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.woocommerce-checkout table.shop_table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: transparent;
    border-radius: 0;
    font-size: var(--text-sm);
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
    padding: var(--space-3) 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}
.woocommerce-checkout table.shop_table thead th {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: none;
    letter-spacing: 0;
}
.woocommerce-checkout table.shop_table td:last-child,
.woocommerce-checkout table.shop_table th:last-child { text-align: right; }
.woocommerce-checkout table.shop_table .product-name { color: var(--color-text); padding-right: var(--space-3); }
.woocommerce-checkout table.shop_table .product-quantity { color: var(--color-text-muted); font-weight: 600; }
.woocommerce-checkout table.shop_table tfoot th { font-weight: 600; color: var(--color-text-light); }
.woocommerce-checkout table.shop_table tfoot .order-total th,
.woocommerce-checkout table.shop_table tfoot .order-total td {
    padding-top: var(--space-4);
    border-bottom: 0;
    font-size: var(--text-lg);
    color: var(--color-dark);
}
.woocommerce-checkout table.shop_table tfoot .order-total .amount { color: var(--color-accent); }

/* --- Payment box --- */
.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
    margin-top: var(--space-5);
}
.woocommerce-checkout #payment ul.payment_methods {
    padding: 0;
    margin: 0 0 var(--space-4);
    border: 0;
    list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; }
.woocommerce-checkout #payment ul.payment_methods label { font-weight: 600; cursor: pointer; }
.woocommerce-checkout #payment div.payment_box {
    margin: var(--space-3) 0 0;
    padding: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-light);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.woocommerce-checkout #payment div.payment_box::before { content: none; }
.woocommerce-checkout #payment .place-order { padding: 0; margin: var(--space-5) 0 0; }
/* WooCommerce styles #place_order with an ID selector in its own purple, which
   outranks the theme's .button rules. Match that specificity to keep the
   primary CTA on brand. */
.woocommerce-checkout #payment #place_order,
.woocommerce #payment #place_order {
    display: block !important;
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.woocommerce-checkout #payment #place_order:hover,
.woocommerce #payment #place_order:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-4);
}

/* --- Coupon toggle --- */
.woocommerce-checkout .checkout_coupon {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin: 0 0 var(--space-5);
    padding: var(--space-5);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.woocommerce-checkout .checkout_coupon .form-row { margin: 0; width: auto; }
.woocommerce-checkout .checkout_coupon #coupon_code { min-width: 220px; }

@media (max-width: 1024px) {
    .woocommerce-checkout form.checkout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "details" "summary-title" "summary";
        column-gap: 0;
    }
    .woocommerce-checkout #order_review { position: static; }
}
@media (max-width: 768px) {
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last { width: 100%; margin-right: 0; }
}

/* =============================================
   WOOCOMMERCE BLOCKS — Cart

   The Cart and Checkout pages use the Cart/Checkout *blocks*, not the
   classic shortcodes, so the theme's old cart.php / form-checkout.php
   templates never ran and these pages rendered with no theme styling at
   all. These rules put the blocks on the theme's design tokens.
   ============================================= */

/* Cart and Checkout are ordinary pages, so page.php wraps them in the
   narrow reading measure meant for About/FAQ copy. Release them: these
   blocks need the full container to lay out their two-column view. */
.woocommerce-cart .page-article,
.woocommerce-checkout .page-article,
.woocommerce-cart .page-content-section,
.woocommerce-checkout .page-content-section {
    max-width: none;
    padding: 0;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-9) var(--container-padding) var(--space-11);
    font-family: var(--font-primary);
    color: var(--color-text);
}

/* Headings inside the blocks follow the theme's serif display face. */
.wc-block-components-title,
.wc-block-cart__empty-cart__title,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary .wc-block-components-panel__button {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--color-dark);
}

/* --- Line items --- */
.wc-block-cart-items__header {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-light);
    border-bottom: 1px solid var(--color-border);
}
.wc-block-cart-item__wrap,
.wc-block-cart-items .wc-block-cart-items__row {
    border-bottom: 1px solid var(--color-border);
}
.wc-block-components-product-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
}
.wc-block-components-product-name:hover { color: var(--color-accent); }
.wc-block-components-product-metadata { font-size: var(--text-sm); color: var(--color-text-light); }
.wc-block-components-product-price__value,
.wc-block-components-formatted-money-amount { color: var(--color-dark); font-weight: 600; }
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

/* --- Quantity stepper --- */
.wc-block-components-quantity-selector {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.wc-block-components-quantity-selector__button {
    color: var(--color-text);
    background: var(--color-bg-light);
    transition: var(--transition);
}
.wc-block-components-quantity-selector__button:hover {
    color: var(--color-white);
    background: var(--color-primary);
}
.wc-block-components-quantity-selector__input {
    color: var(--color-dark);
    font-weight: 600;
}

/* --- Sidebar / totals --- */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.wc-block-components-totals-item { font-size: var(--text-sm); }
.wc-block-components-totals-item__label { color: var(--color-text-light); }
.wc-block-components-totals-item__value { color: var(--color-dark); font-weight: 600; }
.wc-block-components-totals-wrapper { border-top-color: var(--color-border); }
.wc-block-components-totals-footer-item {
    font-size: var(--text-lg);
    color: var(--color-dark);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--color-accent);
}

/* --- Buttons --- */
.wc-block-components-button:not(.is-link) {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}
.wc-block-components-button:not(.is-link):hover {
    color: var(--color-white);
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
}
/* The label lives in a child div; WordPress's global button styles colour it
   independently, so set it explicitly or the button reads as a blank bar. */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text,
.wc-block-components-button.wp-element-button:not(.is-link) {
    color: var(--color-white);
}
.wc-block-components-button.is-link { color: var(--color-accent); }
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button { width: 100%; }

/* --- Form fields --- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-block-components-select__container select {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox-control input:focus,
.wc-block-components-select__container select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
    outline: none;
}
.wc-block-components-text-input label,
.wc-block-components-checkout-step__description,
.wc-block-components-address-form label {
    color: var(--color-text-light);
    font-size: var(--text-sm);
}

/* --- Checkout steps --- */
.wc-block-components-checkout-step {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
}
.wc-block-components-checkout-step:last-child { border-bottom: 0; }

/* --- Notices --- */
.wc-block-components-notice-banner {
    border-radius: var(--radius);
    font-size: var(--text-sm);
}
.wc-block-components-notice-banner.is-success { border-color: var(--color-success); }
.wc-block-components-notice-banner.is-error { border-color: var(--color-danger); }

/* --- Empty cart --- */
.wc-block-cart__empty-cart__title { font-size: var(--text-2xl); }

/* The theme's glyph-based stars share the .star-rating class with
   WooCommerce's webfont stars, whose ::before content was painting over
   them. Neutralise the plugin's treatment for the theme's markup only —
   WooCommerce's own review stars keep working. */
.woocommerce .star-rating.teashop-stars,
.star-rating.teashop-stars {
    font-family: var(--font-primary);
    font-size: inherit;
    width: auto;
    height: auto;
    line-height: 1;
    overflow: visible;
    letter-spacing: 1px;
}
.woocommerce .star-rating.teashop-stars::before,
.woocommerce .star-rating.teashop-stars span::before {
    content: none;
}
.woocommerce .star-rating.teashop-stars span {
    position: static;
    float: none;
    padding: 0;
    overflow: visible;
    width: auto;
}

/* Review form stars */
.woocommerce #reviews #respond .stars a {
    color: var(--color-secondary);
    font-size: 1.2rem;
}
.woocommerce #reviews #respond .stars a:hover { color: var(--color-secondary); }

/* Account navigation */
.woocommerce-MyAccount-navigation { display: none; } /* We use our custom nav */
.woocommerce-MyAccount-content { width: 100%; float: none; }
.woocommerce-account .woocommerce { display: block; }

/* Order table */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
}
.woocommerce-orders-table th {
    background: var(--color-bg-light);
    padding: 10px 14px;
    font-size: var(--text-xs);
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.woocommerce-orders-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

/* Sorting / result count */
.woocommerce-result-count {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0;
    float: none;
    display: inline;
}
.woocommerce-ordering {
    float: none;
    margin: 0;
}
.woocommerce-ordering select {
    padding: 7px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    outline: none;
    font-family: var(--font-primary);
}

/* Additional info table */
.woocommerce table.shop_attributes th {
    background: var(--color-bg-light);
    font-weight: 600;
    width: 140px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
}
.woocommerce table.shop_attributes td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
}

/* Payment methods page */
.woocommerce-MyAccount-paymentMethods table th {
    background: var(--color-bg-light);
    padding: 10px 14px;
    font-size: var(--text-xs);
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
}
.woocommerce-MyAccount-paymentMethods table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    vertical-align: middle;
}

/* Coupon messages */
.woocommerce-remove-coupon {
    color: var(--color-accent) !important;
    margin-left: 8px;
    font-size: var(--text-xs);
}

/* Stock status */
.woocommerce .stock { font-size: var(--text-sm); font-weight: 600; }
.woocommerce .in-stock { color: var(--color-success); }
.woocommerce .out-of-stock { color: var(--color-danger); }

/* Variable product table */
.woocommerce .variations td,
.woocommerce .variations th {
    padding: 8px 0;
    vertical-align: middle;
}
.woocommerce .variations select { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-primary); }
.woocommerce .reset_variations { margin-top: 6px; font-size: var(--text-xs); color: var(--color-accent); }

/* Grouped products */
.woocommerce .group_table td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); }

/* My Account Dashboard */
.woocommerce-MyAccount-content .woocommerce-info { font-size: var(--text-sm); }
.woocommerce address { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-light); }

/* Responsive WC */
@media (max-width: 768px) {
    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last {
        width: 100%;
        float: none;
        margin: 0;
    }
}

/* ==========================================================================
   Variable products — variation selector on the single product page
   --------------------------------------------------------------------------
   The PDP renders its own add-to-cart markup for simple products, but hands
   variable products to woocommerce_template_single_add_to_cart(). That prints
   WooCommerce's own table/quantity/button markup, which arrives unstyled and
   in WooCommerce's purple. These rules give it the same form controls the
   simple-product branch uses.
   ========================================================================== */

.variations_form { margin-bottom: 16px; }

.variations_form table.variations {
    width: 100%;
    margin: 0 0 18px;
    border: none;
    border-collapse: collapse;
}
.variations_form table.variations th,
.variations_form table.variations td {
    border: none;
    padding: 0 0 12px;
    vertical-align: middle;
    background: none;
}
.variations_form table.variations th.label {
    width: 1%;
    white-space: nowrap;
    padding-right: 14px;
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9rem;
    text-align: left;
}

.variations_form select {
    width: 100%;
    min-height: 46px;
    padding: 0 38px 0 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    /* chevron, inlined so the CSP-free theme needs no extra asset request */
    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='%236b7280' 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 14px center;
    transition: var(--transition);
}
.variations_form select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.variations_form .reset_variations {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--color-text-light);
    text-decoration: underline;
}
.variations_form .reset_variations:hover { color: var(--color-accent); }

/* Per-variation price/availability panel WooCommerce injects on selection. */
.variations_form .woocommerce-variation { margin-bottom: 14px; }
.variations_form .woocommerce-variation-price { display: none; }
.variations_form .woocommerce-variation-price .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
}
.variations_form .woocommerce-variation-price del .amount {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-light);
}
.variations_form .woocommerce-variation-availability { font-size: 0.85rem; }

/* Mirrors .product-qty-row / .qty-control from the simple-product branch. */
.variations_form .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.variations_form .woocommerce-variation-add-to-cart .quantity {
    display: flex;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0;
    float: none;
}
.variations_form .woocommerce-variation-add-to-cart .quantity .qty {
    width: 76px;
    height: 46px;
    border: none;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    outline: none;
    background: var(--color-surface);
}

.woocommerce .variations_form button.single_add_to_cart_button.button {
    flex: 1;
    min-width: 160px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-6);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-white);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: var(--transition);
}
.woocommerce .variations_form button.single_add_to_cart_button.button:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}
/* WooCommerce leaves the button visible but inert until an option is picked. */
.woocommerce .variations_form button.single_add_to_cart_button.button.disabled,
.woocommerce .variations_form button.single_add_to_cart_button.button:disabled {
    background: var(--color-bg-light);
    border-color: var(--color-border);
    color: var(--color-text-light);
    cursor: not-allowed;
}
.woocommerce .variations_form button.single_add_to_cart_button.button.disabled:hover {
    background: var(--color-bg-light);
    border-color: var(--color-border);
    color: var(--color-text-light);
}

@media (max-width: 600px) {
    .variations_form table.variations,
    .variations_form table.variations tbody,
    .variations_form table.variations tr,
    .variations_form table.variations th,
    .variations_form table.variations td { display: block; width: auto; }
    .variations_form table.variations th.label { padding: 0 0 6px; }
    .woocommerce .variations_form button.single_add_to_cart_button.button { width: 100%; flex-basis: 100%; }
}

/* =============================================================
   V2 — dark-theme gaps in WooCommerce's own block output
   ============================================================= */

/* The empty-cart glyph is a WooCommerce ::before that ships as a light
   shape meant for a white page. At full strength it is the brightest
   thing on the screen; toned down it reads as an illustration again. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    opacity: 0.28;
    filter: grayscale(1);
}

/* Product grids inside cart/checkout blocks render their button as
   .wp-block-button__link, which the theme never styled — it fell through
   to WordPress's global button colours and read as a blank dark pill. */
.wc-block-grid__product-add-to-cart a.wp-block-button__link,
a.wp-block-button__link.add_to_cart_button {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    transition: var(--transition);
}

.wc-block-grid__product-add-to-cart a.wp-block-button__link:hover,
a.wp-block-button__link.add_to_cart_button:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

/* Grid product titles and prices sit on the page ground, not a card. */
.wc-block-grid__product-title { color: var(--color-dark); }
.wc-block-grid__product-price { color: var(--color-dark); }
.wc-block-grid__product-price del { color: var(--color-text-muted); }

/* --- select2 -------------------------------------------------
   WooCommerce swaps the country and state selects for select2,
   which ships its own white skin and is never touched by the
   theme's `select` rules because the real <select> is hidden. */
.select2-container--default .select2-selection--single {
    height: auto;
    padding: 4px 2px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text);
    line-height: 1.6;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-text-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--color-text-light);
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: var(--color-text-light);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-primary);
}

/* The dropdown panel is portalled to the end of <body>, outside any
   .woocommerce wrapper, so it needs its own unscoped rules. */
.select2-dropdown {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.select2-container--default .select2-results__option {
    background-color: transparent;
    color: var(--color-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background-color: var(--color-surface-2);
    color: var(--color-dark);
}