/*
 * ==========================================================================
 * #WOOCOMMERCE: Global Unified Layout — ZHM-X v5.0.1
 * ==========================================================================
 * Product Loop Meta, Unified Add to Cart Button, Pulse Animation.
 *
 * All tokens from _variables-components.css (v3.2.0 — WCAG AAA).
 * Reduced Motion: globally managed in _variables-components.css & _base-styles.css.
 * ==========================================================================
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. PRODUCT LOOP (SHOP, CATEGORIES, ETC.)
   ═══════════════════════════════════════════════════════════════════════════ */

.products .product {
    display: flex !important;
    flex-direction: column !important;
}

.products .product .product-h {
    flex-grow: 1;
}

.products .product .product-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: auto !important;
    padding: var(--sys-spacing-sm) var(--sys-spacing-xs) var(--sys-spacing-xs) !important;
}

.products .product .price,
.products .product .price-free {
    order: 2;
    margin: 0 !important;
    font-family: var(--font-family-base);
    font-size: var(--size-h3);
    font-weight: var(--weight-bold);
    color: var(--sys-color-neutral-900);
}

.products .product .price-free {
    color: var(--sys-color-success-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. UNIFIED ADD TO CART BUTTON (GLOBAL)
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce a.add_to_cart_button,
.woocommerce .single_add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    order: 1;
    position: relative;
    overflow: visible !important;

    background: linear-gradient(
        135deg,
        var(--sys-color-primary) 0%,
        var(--sys-color-primary-dark) 100%
    ) !important;
    border: none !important;
    border-radius: var(--sys-radius-circle) !important;
    /* primary-colored shadow – uses token-derived rgba */
    box-shadow: 0 4px 12px rgba(40, 53, 147, 0.3);
    color: var(--sys-color-neutral-0) !important;

    transition: transform var(--comp-transition-fast),
                box-shadow var(--comp-transition-fast);
    animation: wc-pulse 2.5s infinite;
}

.woocommerce a.add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(40, 53, 147, 0.5);
}

.woocommerce a.add_to_cart_button:focus-visible,
.woocommerce .single_add_to_cart_button:focus-visible {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Hide original text – replaced by icon */
.woocommerce a.add_to_cart_button .w-btn-label,
.woocommerce .single_add_to_cart_button {
    font-size: 0 !important;
}

/* Material icon via pseudo-element */
.woocommerce a.add_to_cart_button::before,
.woocommerce .single_add_to_cart_button::before {
    content: 'shopping_cart';
    font-family: 'Material Icons';
    font-size: 18px;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Pulse animation – stopped globally for prefers-reduced-motion */
@keyframes wc-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(40, 53, 147, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(40, 53, 147, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(40, 53, 147, 0);   }
}

/* Added to Cart State */
.woocommerce a.added_to_cart {
    width: auto !important;
    min-height: 38px;
    padding: 0 var(--sys-spacing-lg) !important;
    background: var(--sys-color-success-500) !important;
    border-radius: var(--btn-border-radius) !important;
    color: var(--sys-color-neutral-0) !important;
    font-family: var(--font-family-base);
    font-weight: var(--btn-font-weight);
    text-decoration: none;
    animation: none !important;
    display: inline-flex !important;
    align-items: center !important;
}