/*
 * Dynamo Base WooCommerce Stylesheet
 *
 * Structural and layout styles only — not token-driven.
 * Token-driven WooCommerce overrides are generated by Dynamo_CSS_Generator.
 *
 * Sections complete: shop grid (#5), header cart (#6), quantity buttons (#8),
 * cart & checkout (#9).
 */

/* ---------- Cart & Checkout (issue #9) ---------- */

.woocommerce-cart .cart-collaterals,
.woocommerce-checkout form.checkout {
    color: var(--dynamo-colors-text);
}

.woocommerce-cart table.cart,
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--dynamo-colors-background);
    border: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
    border-radius: var(--dynamo-borders-radius);
    overflow: hidden;
}

.woocommerce-cart table.cart th,
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background-color: var(--dynamo-colors-section-alt);
    border-bottom: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
}

.woocommerce-cart table.cart td,
.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table td {
    padding: 0.75rem 1rem;
    border-bottom: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
}

.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
    padding: 1.25rem;
    background-color: var(--dynamo-colors-section-alt);
    border-radius: var(--dynamo-borders-radius);
    border: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
}

/* Primary checkout-flow CTAs: Cart "Proceed to checkout" + Checkout
   "Place order". Use the accent palette so they stand out against the
   dark page background and match the active-chip treatment. Text uses
   --dynamo-colors-background so it contrasts with the accent fill
   regardless of the site palette (dark text on light accent on a dark
   site, light text on dark accent on a light site). */
/* !important on bg + color is required because WooCommerce core's own
   stylesheet loads AFTER theme woocommerce.css and would otherwise paint
   these buttons in WC's signature purple (#7F54B3). The rest of the
   declarations can ride on normal specificity. */
.woocommerce-cart a.checkout-button,
.woocommerce-checkout #place_order {
    background-color: var(--dynamo-colors-accent) !important;
    color: var(--dynamo-colors-background) !important;
    border: 2px solid var(--dynamo-colors-accent);
    padding: 0.75rem 1.25rem;
    border-radius: var(--dynamo-borders-radius);
    cursor: pointer;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Hover + focus: darken the fill, swap the border to the page background
   colour, and add a 2px halo + 2px accent ring on focus-visible so
   keyboard users get an unmistakable focus signal. */
.woocommerce-cart a.checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-cart a.checkout-button:focus-visible,
.woocommerce-checkout #place_order:focus-visible {
    background-color: color-mix(in srgb, var(--dynamo-colors-accent) 82%, black) !important;
    border-color: var(--dynamo-colors-background);
    outline: none;
}

.woocommerce-cart a.checkout-button:focus-visible,
.woocommerce-checkout #place_order:focus-visible {
    box-shadow: 0 0 0 2px var(--dynamo-colors-background),
                0 0 0 4px var(--dynamo-colors-accent);
}

.woocommerce-checkout form .form-row input,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
    border-radius: var(--dynamo-borders-radius);
    background-color: var(--dynamo-colors-background);
    color: var(--dynamo-colors-text);
}

/* ---------- WooCommerce Blocks Cart + Checkout compatibility ----------
   On prod the Cart and Checkout pages are saved as block content rather
   than the classic [woocommerce_cart] / [woocommerce_checkout]
   shortcodes, so the buttons render via wc-block-components-* classes
   instead of the classic .checkout-button / #place_order elements. The
   rules below mirror the classic treatment so the user-visible result is
   identical regardless of which storage shape the pages use. */

.wp-block-woocommerce-checkout,
.wc-block-checkout,
.wp-block-woocommerce-cart,
.wc-block-cart {
    color: var(--dynamo-colors-text);
}

/* Primary CTAs in block-mode: cart "Proceed to Checkout" + checkout
   "Place Order". Both use the same accent treatment. */
.wp-block-woocommerce-checkout .wc-block-components-button,
.wc-block-checkout .wc-block-components-button,
.wc-block-checkout .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-components-button,
.wc-block-cart .wc-block-components-button,
.wc-block-cart .wc-block-cart__submit-button {
    background-color: var(--dynamo-colors-accent) !important;
    color: var(--dynamo-colors-background) !important;
    border-radius: var(--dynamo-borders-radius);
    border: 2px solid var(--dynamo-colors-accent);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.wp-block-woocommerce-checkout .wc-block-components-button:hover,
.wc-block-checkout .wc-block-components-button:hover,
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-button:focus-visible,
.wc-block-checkout .wc-block-components-button:focus-visible,
.wc-block-checkout .wc-block-components-checkout-place-order-button:focus-visible,
.wp-block-woocommerce-cart .wc-block-components-button:hover,
.wc-block-cart .wc-block-components-button:hover,
.wc-block-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-components-button:focus-visible,
.wc-block-cart .wc-block-components-button:focus-visible,
.wc-block-cart .wc-block-cart__submit-button:focus-visible {
    background-color: color-mix(in srgb, var(--dynamo-colors-accent) 82%, black) !important;
    border-color: var(--dynamo-colors-background);
    outline: none;
}

.wp-block-woocommerce-checkout .wc-block-components-button:focus-visible,
.wc-block-checkout .wc-block-components-button:focus-visible,
.wc-block-checkout .wc-block-components-checkout-place-order-button:focus-visible,
.wp-block-woocommerce-cart .wc-block-components-button:focus-visible,
.wc-block-cart .wc-block-components-button:focus-visible,
.wc-block-cart .wc-block-cart__submit-button:focus-visible {
    box-shadow: 0 0 0 2px var(--dynamo-colors-background),
                0 0 0 4px var(--dynamo-colors-accent);
}

/* Block-checkout "Return to Cart" link. Lives in
   .wc-block-checkout__actions_row next to Place Order. Default is a
   bare anchor with no visible affordance on hover/focus, which is a
   bad UX (especially for keyboard users tabbing between checkout and
   cart). Treatment: looks like a quiet text link at rest (underline +
   body text colour), but on hover/focus it gets the accent text +
   accent border outline so users see exactly where the cursor/focus
   has landed. Focus-visible adds the same halo + ring used by the
   primary CTAs for consistency. */
.wc-block-components-checkout-return-to-cart-button {
    color: var(--dynamo-colors-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0.5rem 0.75rem;
    border: 2px solid transparent;
    border-radius: var(--dynamo-borders-radius);
    transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.wc-block-components-checkout-return-to-cart-button:hover,
.wc-block-components-checkout-return-to-cart-button:focus-visible {
    color: var(--dynamo-colors-accent);
    border-color: var(--dynamo-colors-accent);
    text-decoration: none;
    outline: none;
}

.wc-block-components-checkout-return-to-cart-button:focus-visible {
    box-shadow: 0 0 0 2px var(--dynamo-colors-background),
                0 0 0 4px var(--dynamo-colors-accent);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-textarea textarea,
.wp-block-woocommerce-checkout select,
.wc-block-checkout input,
.wc-block-checkout select,
.wc-block-checkout textarea {
    border: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
    border-radius: var(--dynamo-borders-radius);
    background-color: var(--dynamo-colors-background);
    color: var(--dynamo-colors-text);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper,
.wc-block-checkout .wc-block-components-totals-wrapper {
    background-color: var(--dynamo-colors-section-alt);
    border-radius: var(--dynamo-borders-radius);
    padding: 1rem;
}

@media (max-width: 768px) {
    .woocommerce-cart table.cart,
    .woocommerce-cart table.shop_table {
        display: block;
        overflow-x: auto;
    }

    .woocommerce-checkout form.checkout {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .wp-block-woocommerce-checkout,
    .wc-block-checkout {
        flex-direction: column;
    }
}

/* ---------- Quantity Buttons (issue #8) ---------- */

.woocommerce .quantity,
.woocommerce-page .quantity {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
    border-radius: var(--dynamo-borders-radius);
    overflow: hidden;
    background-color: var(--dynamo-colors-background);
}

.woocommerce .quantity input.qty,
.woocommerce-page .quantity input.qty {
    width: 3rem;
    border: 0;
    background: transparent;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
    padding: 0.4rem;
}

.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dynamo-quantity-minus,
.dynamo-quantity-plus {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0 0.75rem;
    cursor: pointer;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
}

.dynamo-quantity-minus:hover,
.dynamo-quantity-plus:hover {
    background-color: var(--dynamo-colors-section-alt);
}

@media (max-width: 480px) {
    .dynamo-quantity-minus,
    .dynamo-quantity-plus {
        padding: 0 1rem;
        min-height: 44px;
    }
}

/* ---------- Header Cart Icon (issue #6) ---------- */

.dynamo-header-cart {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}

.dynamo-header-cart__icon {
    display: block;
    width: 24px;
    height: 24px;
}

.dynamo-header-cart__count {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: var(--dynamo-colors-primary);
    color: var(--dynamo-colors-background);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ---------- Shop Grid (issue #5) ---------- */

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid;
    /* minmax(0, 1fr) instead of plain 1fr: 1fr resolves to minmax(auto, 1fr),
       which lets a column grow past its equal share when an item's min-content
       is wider than the share. The plain form looks fine when every column
       has many items (their min-content widths average out), but goes uneven
       the moment a few cards are visible — exposed by the live category
       filter (wc-live-category-filter plugin) hiding cards via [hidden]. */
    grid-template-columns: repeat(var(--dynamo-woocommerce-shop-columns, 3), minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    padding-block: 1rem;
}

.woocommerce .related ul.products,
.woocommerce-page .related ul.products {
    grid-template-columns: repeat(var(--dynamo-woocommerce-single-related-columns, 4), minmax(0, 1fr));
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    content: none;
}

/* The :is() block ties WooCommerce's (0,3,2) specificity for `.columns-N` width
   rules in woocommerce-layout.css so our grid layout wins regardless of the
   columns class WC stamps on ul.products. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
:is(.woocommerce, .woocommerce-page) ul.products[class*="columns-"] li.product,
:is(.woocommerce, .woocommerce-page)[class*="columns-"] ul.products li.product {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 1rem;
    float: none;
    clear: none;
    /* Flex column lets us pin the add-to-cart button to the bottom of the
       card regardless of how many lines the title wraps. Without this, a
       single-line title leaves the button floating higher than on a card
       with a two-line title. */
    display: flex;
    flex-direction: column;
}

/* Push the add-to-cart button to the bottom of its card. The button is
   always the last flex-significant child (the trailing .screen-reader-text
   is clipped to 1×1 and doesn't take vertical space). */
.woocommerce ul.products li.product > .button,
.woocommerce-page ul.products li.product > .button {
    margin-top: auto;
}

/* Re-assert the [hidden] UA rule for product cards. The display:flex above
   wins over the UA's `[hidden] { display: none }` on specificity grounds, so
   the WCLCF JS layer's `hidden` attribute would leave cards visually rendered
   even when filtered out. This rule restores the expected hide behaviour
   without giving up the flex layout for visible cards. */
.woocommerce ul.products li.product[hidden],
.woocommerce-page ul.products li.product[hidden] {
    display: none !important;
}

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

@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(min(2, var(--dynamo-woocommerce-shop-columns, 3)), minmax(0, 1fr));
        gap: 1rem;
    }

    .woocommerce .related ul.products,
    .woocommerce-page .related ul.products {
        grid-template-columns: repeat(min(2, var(--dynamo-woocommerce-single-related-columns, 4)), minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce .related ul.products,
    .woocommerce-page .related ul.products {
        grid-template-columns: 1fr;
    }
}