/**
 * Gapli Starter — WooCommerce Overrides
 * Custom styling for WooCommerce blocks to match theme design system
 * Uses theme.json custom properties — no hardcoded values
 */

/* ============================================================
   PRODUCT CARDS
   ============================================================ */

/* Product image — rounded, hover zoom */
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-image img {
    border-radius: var(--wp--custom--border-radius--lg);
    transition: transform var(--wp--custom--transition--slow);
    object-fit: cover;
}

.wc-block-grid__product-image:hover img,
.wp-block-woocommerce-product-image:hover img {
    transform: scale(1.03);
}

/* Product title */
.wc-block-grid__product-title,
.wp-block-post-title a {
    text-decoration: none;
    transition: color var(--wp--custom--transition--fast);
}

/* Sale badge */
.wc-block-grid__product .wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-image .wc-block-components-product-sale-badge {
    background: var(--wp--preset--color--danger);
    color: var(--wp--preset--color--text-inverse);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--xs);
    padding: 0.25rem 0.625rem;
    border-radius: var(--wp--custom--border-radius--full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Price — sale styling */
.wc-block-components-product-price del {
    opacity: 0.5;
    font-size: 0.85em;
}

.wc-block-components-product-price ins {
    text-decoration: none;
    font-weight: 700;
    color: var(--wp--preset--color--danger);
}

/* Add to cart button in grid */
.wc-block-grid__product .wp-block-button__link,
.wp-block-woocommerce-product-button .wp-block-button__link {
    width: 100%;
    text-align: center;
    transition: background-color var(--wp--custom--transition--fast),
                transform var(--wp--custom--transition--fast);
}

.wc-block-grid__product .wp-block-button__link:hover,
.wp-block-woocommerce-product-button .wp-block-button__link:hover {
    transform: translateY(-1px);
}

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */

/* Product gallery */
.wc-block-product-image-gallery {
    border-radius: var(--wp--custom--border-radius--xl);
    overflow: hidden;
}

/* Add to cart form */
.wp-block-woocommerce-add-to-cart-form .wc-block-components-product-add-to-cart {
    margin-top: var(--wp--preset--spacing--40);
}

.wp-block-woocommerce-add-to-cart-form .wc-block-components-quantity-selector {
    border-radius: var(--wp--custom--border-radius--md);
    border: 1px solid var(--wp--preset--color--border);
}

.wp-block-woocommerce-add-to-cart-form .wc-block-components-product-add-to-cart-button {
    font-weight: 700;
    font-size: var(--wp--preset--font-size--large);
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
    border-radius: var(--wp--custom--border-radius--md);
}

/* Product tabs */
.gapli-product-tabs .wc-block-components-tab-panel__tab-content {
    padding: var(--wp--preset--spacing--50) 0;
    line-height: var(--wp--custom--line-height--relaxed);
}

/* Product meta (SKU, categories, tags) */
.wp-block-woocommerce-product-meta {
    margin-top: var(--wp--preset--spacing--50);
    padding-top: var(--wp--preset--spacing--40);
    border-top: 1px solid var(--wp--preset--color--border);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--text-secondary);
}

/* ============================================================
   CART & CHECKOUT
   ============================================================ */

/* Cart block */
.wp-block-woocommerce-cart .wc-block-cart__main {
    border-radius: var(--wp--custom--border-radius--lg);
}

.wp-block-woocommerce-cart .wc-block-cart__sidebar {
    border-radius: var(--wp--custom--border-radius--lg);
}

/* Checkout block */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
    border-bottom: 1px solid var(--wp--preset--color--border);
    padding-bottom: var(--wp--preset--spacing--50);
    margin-bottom: var(--wp--preset--spacing--50);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input textarea {
    border-radius: var(--wp--custom--border-radius--md);
    border: 1px solid var(--wp--preset--color--border);
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
    transition: border-color var(--wp--custom--transition--fast);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input textarea:focus {
    border-color: var(--wp--preset--color--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* Order summary in checkout */
.wp-block-woocommerce-checkout .wc-block-components-order-summary {
    border-radius: var(--wp--custom--border-radius--lg);
    background: var(--wp--preset--color--surface);
    padding: var(--wp--preset--spacing--50);
}

/* ============================================================
   MINI CART
   ============================================================ */

.wc-block-mini-cart__button {
    position: relative;
}

.wc-block-mini-cart__badge {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--text-inverse);
    border-radius: var(--wp--custom--border-radius--full);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 700;
    min-width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--text-secondary);
    margin-bottom: var(--wp--preset--spacing--40);
}

.woocommerce-breadcrumb a,
.wp-block-woocommerce-breadcrumbs a {
    color: var(--wp--preset--color--text-secondary);
    text-decoration: none;
    transition: color var(--wp--custom--transition--fast);
}

.woocommerce-breadcrumb a:hover,
.wp-block-woocommerce-breadcrumbs a:hover {
    color: var(--wp--preset--color--primary);
}

/* ============================================================
   STAR RATING
   ============================================================ */

.wc-block-components-product-rating .wc-block-components-product-rating__stars {
    color: var(--wp--preset--color--warning);
}