/**
 * WooCommerce Custom Styles
 * Customizable via WordPress Customizer
 */

/**
 * WooCommerce Wrapper
 * Replaces Tailwind .container to avoid 1024px max-width at lg breakpoint.
 * Uses the theme's --container-width variable (controlled via Customizer).
 */
.woocommerce-wrapper {
    width: 100%;
    max-width: var(--container-width, var(--wp--style--global--content-size, 1280px));
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .woocommerce-wrapper { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .woocommerce-wrapper { padding-left: 2rem; padding-right: 2rem; }
}

/* Product Grid Layout */
.woocommerce ul.products {
    display: grid;
    gap: var(--wc-card-spacing, 20px);
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce ul.products li.product {
    position: relative;
    border-radius: var(--wc-card-radius, 8px);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(calc(var(--mtheme-wc-hover-lift, 4px) * -1));
}

/* Product Images */
.woocommerce ul.products li.product img {
    width: 100%;
    height: var(--wc-product-image-height, 400px);
    object-fit: cover;
    display: block;
}

.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
    width: 100%;
    height: var(--wc-product-image-height, 400px);
    object-fit: cover;
}

/* Single Product Image */
.woocommerce div.product .woocommerce-product-gallery__image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--wc-card-radius, 8px);
}

.woocommerce div.product .woocommerce-product-gallery {
    margin-bottom: 2rem;
}

/* Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--wc-product-title-size, 18px);
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    line-height: 1.4;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
    color: var(--primary-color, #3b82f6);
}

/* Product Price */
.woocommerce ul.products li.product .price {
    font-size: var(--wc-product-price-size, 20px);
    color: var(--wc-product-price-color, #3b82f6);
    font-weight: 600;
    margin: 0.5rem 0;
}

.woocommerce ul.products li.product .price del {
    color: var(--wc-del-price-color, #6b7280);
    font-size: 0.9em;
    margin-right: var(--mtheme-wc-spacing-sm, 8px);
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
}

/* Product Rating */
.woocommerce ul.products li.product .star-rating {
    margin: var(--mtheme-wc-spacing-sm, 8px) 0;
    font-size: var(--mtheme-wc-small-text, 14px);
}

/* Sale Badge */
.woocommerce span.onsale {
    position: absolute;
    background: var(--wp--preset--color--error, #ef4444);
    color: white;
    padding: var(--mtheme-wc-spacing-sm, 8px) var(--mtheme-wc-spacing-lg, 16px);
    border-radius: var(--mtheme-wc-badge-radius, 4px);
    font-size: var(--mtheme-wc-small-text, 14px);
    font-weight: 600;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Product Card Layouts */
.woocommerce ul.products li.product.product-card-bordered {
    border: 1px solid var(--wp--preset--color--border, #e5e7eb);
    padding: 1rem;
}

.woocommerce ul.products li.product.product-card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, var(--mtheme-wc-shadow-opacity, 0.1));
}

.woocommerce ul.products li.product.product-card-shadow:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, var(--mtheme-wc-shadow-opacity, 0.1));
}

.woocommerce ul.products li.product.product-card-overlay .product-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    padding: 1.5rem 1rem 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.woocommerce ul.products li.product.product-card-overlay:hover .product-info {
    transform: translateY(0);
}

/* Add to Cart Button */
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button {
    background-color: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    padding: var(--mtheme-wc-btn-padding-y, 12px) var(--mtheme-wc-btn-padding-x, 24px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce div.product form.cart .button:hover {
    background-color: var(--secondary-color, #8b5cf6);
    transform: translateY(calc(var(--mtheme-wc-btn-hover-lift, 2px) * -1));
    box-shadow: 0 4px 6px rgba(0, 0, 0, var(--mtheme-wc-shadow-opacity, 0.1));
}

/* Button Styles */
.woocommerce .button.button-rounded {
    border-radius: 8px;
}

.woocommerce .button.button-pill {
    border-radius: 9999px;
}

.woocommerce .button.button-outline {
    background: transparent;
    border: 2px solid var(--primary-color, #3b82f6);
    color: var(--primary-color, #3b82f6);
}

.woocommerce .button.button-outline:hover {
    background: var(--primary-color, #3b82f6);
    color: white;
}

/* Cart Page */
.woocommerce-cart table.cart {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

/* Cart collaterals wrapper – clear floats, right-align totals */
.woocommerce-cart .cart-collaterals {
    width: 100%;
    overflow: hidden; /* clearfix */
}

.woocommerce-cart .cart-collaterals .cart_totals {
    float: right;
    width: 48%;
}

.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td {
    padding: 1rem;
    border-bottom: 1px solid var(--wp--preset--color--border, #e5e7eb);
    text-align: left;
}

.woocommerce-cart table.cart .product-thumbnail img {
    width: var(--mtheme-wc-thumbnail-size, 80px);
    height: var(--mtheme-wc-thumbnail-size, 80px);
    object-fit: cover;
    border-radius: var(--mtheme-wc-badge-radius, 4px);
}

.woocommerce-cart .cart_totals {
    background: var(--mtheme-wc-card-bg, #f9fafb);
    border: 1px solid var(--mtheme-wc-input-border, #e5e7eb);
    padding: 2rem;
    border-radius: var(--mtheme-wc-card-radius, 8px);
    box-sizing: border-box;
    overflow: hidden; /* prevent children from bleeding out */
}

/* Proceed to Checkout button – fills cart totals box, never overflows */
.woocommerce-cart .cart_totals .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    width: 100%;
    max-width: 100%;
    padding: var(--mtheme-wc-btn-padding-y, 12px) var(--mtheme-wc-btn-padding-x, 24px);
    background: var(--mtheme-wc-btn-bg, var(--primary-color, #3b82f6));
    color: var(--mtheme-wc-btn-color, #ffffff);
    border: none;
    border-radius: var(--mtheme-wc-input-radius, 6px);
    font-size: var(--mtheme-wc-btn-font-size, 1.0625rem);
    font-weight: 700;
    display: block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.woocommerce-cart .cart_totals .checkout-button:hover {
    background: color-mix(in srgb, var(--mtheme-wc-btn-bg, var(--primary-color, #3b82f6)) 85%, #000);
}

/* ============================================================
   CHECKOUT PAGE – Comprehensive styling
   Uses --mtheme-wc-* variables (set by Customizer or fallback)
   ============================================================ */

/* --- Checkout layout: CSS Grid – coupon full-width, billing left, order right --- */

/*
 * WooCommerce places <h3 id="order_review_heading"> OUTSIDE <div id="order_review">
 * as a direct child of <form class="woocommerce-checkout">.
 * A JS fix in inc/woocommerce.php moves it inside #order_review at runtime.
 * The CSS grid below is the layout backbone; the JS is the content fix.
 */

.woocommerce-checkout form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(var(--mtheme-wc-checkout-min, 260px), 1fr);
    column-gap: var(--mtheme-wc-card-gap, 2rem);
    row-gap: var(--mtheme-wc-spacing-xl, 24px);
    align-items: start;
}

/* Full-width: coupon bar, coupon form, notices – always span both columns */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout form.woocommerce-checkout > .woocommerce-info,
.woocommerce-checkout form.woocommerce-checkout > .woocommerce-message,
.woocommerce-checkout form.woocommerce-checkout > .woocommerce-error {
    grid-column: 1 / -1;
}

/* Left column: billing + shipping */
.woocommerce-checkout .col2-set {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Each column inside col2-set is a card */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    background: var(--mtheme-wc-card-bg, #ffffff);
    border: 1px solid var(--mtheme-wc-input-border, #e5e7eb);
    border-radius: var(--mtheme-wc-card-radius, 8px);
    padding: var(--mtheme-wc-card-padding, 1.75rem);
    box-sizing: border-box;
}

/* Right column: order review panel
   After JS fix, #order_review_heading is the first child of #order_review */
.woocommerce-checkout #order_review {
    grid-column: 2;
    background: var(--mtheme-wc-card-bg, #f9fafb);
    border: 1px solid var(--mtheme-wc-input-border, #e5e7eb);
    border-radius: var(--mtheme-wc-card-radius, 8px);
    padding: var(--mtheme-wc-card-padding, 1.75rem);
    position: sticky;
    top: 2rem;
    box-sizing: border-box;
}

/* Fallback: before JS loads, h3 is still a grid item – push it to column 2 */
.woocommerce-checkout form.woocommerce-checkout > h3#order_review_heading {
    grid-column: 2;
}

/* Order review heading – styled once it's inside #order_review (after JS) */
.woocommerce-checkout #order_review h3#order_review_heading,
.woocommerce-checkout form.woocommerce-checkout > h3#order_review_heading {
    font-size: var(--mtheme-wc-heading-size, 1.125rem);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary-color, #3b82f6);
}

/* Section headings inside checkout cards */
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3 {
    font-size: var(--mtheme-wc-heading-size, 1.125rem);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary-color, #3b82f6);
}

/* Also responsive: stack #order_review in right column even without JS */
.woocommerce-checkout form.woocommerce-checkout > h3#order_review_heading {
    align-self: start;
}

/* --- Form row layout: half-width pairs --- */
.woocommerce-checkout .form-row {
    margin-bottom: 1rem;
}

/* Half-width fields sit side by side */
.woocommerce-billing-fields .form-row-first,
.woocommerce-billing-fields .form-row-last,
.woocommerce-shipping-fields .form-row-first,
.woocommerce-shipping-fields .form-row-last,
.woocommerce-additional-fields .form-row-first,
.woocommerce-additional-fields .form-row-last {
    display: inline-block;
    width: calc(50% - 0.5rem);
}

.woocommerce-billing-fields .form-row-first,
.woocommerce-shipping-fields .form-row-first,
.woocommerce-additional-fields .form-row-first {
    margin-right: 1rem;
}

/* Full-width fields */
.woocommerce-billing-fields .form-row-wide,
.woocommerce-shipping-fields .form-row-wide,
.woocommerce-additional-fields .form-row-wide {
    display: block;
    width: 100%;
    clear: both;
}

/* Labels */
.woocommerce-checkout .form-row label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--text-color, #1f2937);
}

.woocommerce-checkout .form-row label .required {
    color: var(--wp--preset--color--error, #ef4444);
    margin-left: 2px;
}

/* --- Inputs, textareas, selects --- */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    width: 100%;
    padding: var(--mtheme-wc-input-padding-y, 0.625rem) var(--mtheme-wc-input-padding-x, 0.875rem);
    border: 1px solid var(--mtheme-wc-input-border, #d1d5db);
    border-radius: var(--mtheme-wc-input-radius, 6px);
    font-size: var(--mtheme-wc-input-font-size, 0.9375rem);
    font-family: var(--mtheme-wc-font-family, inherit);
    color: var(--text-color, #1f2937);
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    outline: none;
    border-color: var(--mtheme-wc-input-focus, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mtheme-wc-input-focus, #3b82f6) 15%, transparent);
}

/* Select2 custom dropdown – mirrors native select */
.woocommerce-checkout .select2-container .select2-selection--single {
    height: auto;
    padding: var(--mtheme-wc-input-padding-y, 0.625rem) var(--mtheme-wc-input-padding-x, 0.875rem);
    border: 1px solid var(--mtheme-wc-input-border, #d1d5db);
    border-radius: var(--mtheme-wc-input-radius, 6px);
    font-size: var(--mtheme-wc-input-font-size, 0.9375rem);
    font-family: var(--mtheme-wc-font-family, inherit);
    background: #ffffff;
    line-height: 1.5;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: inherit;
    color: var(--text-color, #1f2937);
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
    right: 0.75rem;
}

.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--mtheme-wc-input-focus, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mtheme-wc-input-focus, #3b82f6) 15%, transparent);
    outline: none;
}

/* Validation messages */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection--single {
    border-color: var(--wp--preset--color--error, #ef4444);
}

.woocommerce-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout .form-row.woocommerce-validated .select2-selection--single {
    border-color: var(--mtheme-wc-success-bg, #10b981);
}

/* --- Order review table --- */
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--mtheme-wc-input-border, #e5e7eb);
    text-align: left;
}

.woocommerce-checkout-review-order-table tfoot tr:last-child td,
.woocommerce-checkout-review-order-table tfoot tr:last-child th {
    font-weight: 700;
    font-size: 1.0625rem;
    border-bottom: none;
    padding-top: 0.875rem;
}

/* --- Payment section --- */
#payment {
    background: var(--mtheme-wc-card-bg, #f9fafb);
    border: 1px solid var(--mtheme-wc-input-border, #e5e7eb);
    border-radius: var(--mtheme-wc-card-radius, 8px);
    padding: 1.5rem;
    margin-top: 1.5rem;
}

#payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

#payment ul.payment_methods li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--mtheme-wc-input-border, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
}

#payment ul.payment_methods li:last-child {
    border-bottom: none;
}

#payment ul.payment_methods li label {
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}

#payment ul.payment_methods li img {
    height: 24px;
    width: auto;
    vertical-align: middle;
}

#payment div.payment_box {
    background: #ffffff;
    border: 1px solid var(--mtheme-wc-input-border, #e5e7eb);
    border-radius: var(--mtheme-wc-input-radius, 6px);
    padding: 1rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

/* --- Place order button --- */
#payment #place_order,
.woocommerce-checkout #place_order {
    width: 100%;
    padding: var(--mtheme-wc-btn-padding-y, 0.875rem) 1.5rem;
    background: var(--mtheme-wc-btn-bg, var(--primary-color, #3b82f6));
    color: var(--mtheme-wc-btn-color, #ffffff);
    border: none;
    border-radius: var(--mtheme-wc-input-radius, 6px);
    font-size: var(--mtheme-wc-btn-font-size, 1.0625rem);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    display: block;
    text-align: center;
}

#payment #place_order:hover,
.woocommerce-checkout #place_order:hover {
    background: color-mix(in srgb, var(--mtheme-wc-btn-bg, var(--primary-color, #3b82f6)) 85%, #000);
    transform: translateY(-1px);
}

/* Checkout notices */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error {
    margin-bottom: 1.5rem;
    border-radius: var(--mtheme-wc-input-radius, 6px);
}

/* Checkout column stacking, form-row stacking, and cart totals responsive behaviour
   are all fully managed via dynamic PHP in inc/customizer-woocommerce.php.
   Breakpoints are configured via Customizer → WooCommerce Stijl → Checkout layout &
   Customizer → WooCommerce Stijl → Weergave (product grid). */

/* My Account Page
 * Layout: override WooCommerce blocktheme.css which applies max-width:1000px via
 * .woocommerce-account main .woocommerce (specificity 0,2,1 beats our 0,2,0).
 * We use the same selector so our theme's width controls take precedence.
 * Dynamic grid, nav/content areas, and all visual vars are in customizer-woocommerce.php.
 */
.woocommerce-account main .woocommerce {
    max-width: none;
    width: 100%;
}

/* Checkout Page
 * Layout: override WooCommerce blocktheme.css which applies max-width:1000px via
 * .woocommerce-checkout main .woocommerce (specificity 0,2,1 beats our 0,2,0).
 */
.woocommerce-checkout main .woocommerce {
    max-width: none;
    width: 100%;
}

/* Product Categories */
.woocommerce .product-categories {
    margin-bottom: 1rem;
}

.woocommerce .product-categories a {
    color: var(--wp--preset--color--text-muted, #6b7280);
    text-decoration: none;
    font-size: 0.875rem;
}

.woocommerce .product-categories a:hover {
    color: var(--primary-color, #3b82f6);
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
    margin-bottom: 2rem;
    font-size: 0.875rem;
    color: var(--wp--preset--color--text-muted, #6b7280);
}

.woocommerce-breadcrumb a {
    color: var(--wp--preset--color--text-muted, #6b7280);
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    color: var(--primary-color, #3b82f6);
}

/* Product grid responsive stacking is managed via dynamic PHP in inc/customizer-woocommerce.php.
   Configure breakpoints via Customizer → WooCommerce Stijl → Weergave opties. */

/* Product Gallery */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.woocommerce div.product .woocommerce-product-gallery__image {
    border-radius: var(--wc-card-radius, 8px);
    overflow: hidden;
}

/* Quantity Input */
.woocommerce .quantity input.qty {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid var(--wp--preset--color--border, #e5e7eb);
    border-radius: 4px;
    text-align: center;
}

/* Form Fields – generic (non-checkout pages: login, register, etc.) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--mtheme-wc-input-border, #d1d5db);
    border-radius: var(--mtheme-wc-input-radius, 6px);
    font-size: 0.9375rem;
    box-sizing: border-box;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--mtheme-wc-input-focus, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mtheme-wc-input-focus, #3b82f6) 15%, transparent);
}

/* Header: WooCommerce My Account (customer-account) icon
 * The mini-cart block renders a <button> so it inherits the global
 * `button { background-color: var(--button-bg-color) }` rule from customizer.php.
 * The customer-account block renders an <a>, so we mirror the same variables here
 * to keep both icons visually consistent when primary/button colors are changed.
 */
.wc-block-customer-account__account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--button-bg-color, var(--primary-color, #3b82f6));
    color: var(--button-text-color, #ffffff);
    border-radius: var(--button-border-radius, 6px);
    padding: 8px;
    text-decoration: none;
    line-height: 1;
    vertical-align: middle;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.wc-block-customer-account__account-link:hover {
    background-color: var(--button-hover-bg-color, var(--primary-color, #2563eb));
    color: var(--button-hover-text-color, #ffffff);
    transform: translateY(-1px);
    text-decoration: none;
}

.wc-block-customer-account__account-link svg {
    fill: currentColor;
    display: block;
}

/* Constrain WooCommerce block content to theme contentSize unless explicitly wide */
.wp-block-woocommerce-product-collection,
.wp-block-woocommerce-product-template,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-my-account,
.wp-block-woocommerce-customer-account,
.wp-block-woocommerce-order-confirmation,
.wp-block-woocommerce-product-search {
    max-width: var(--wp--style--layout--content-size, 1280px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* My Account table styles managed via --mtheme-wc-account-table-* variables (customizer-woocommerce.php) */