/**
 * BalticCommerce — Product Cards Component Styles
 * Sync cu product-card.tsx din noudesign
 *
 * @package bc-theme
 */

@layer components {
/* ─── Woocommerce product loop wrapper ─── */
.woocommerce ul.products,
.products.columns-2,
.products.columns-3,
.products.columns-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem; /* 10px gap on mobile for density */
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 640px) {
    .woocommerce ul.products,
    .products.columns-2,
    .products.columns-3,
    .products.columns-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .woocommerce ul.products,
    .products.columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .products.columns-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Standard breakpoint: desktop-lg (1280px) defined in variables.css */
@media (min-width: 1280px) {
    .products.columns-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ─── Price HTML from WooCommerce ─── */
.woocommerce .price del {
    font-size:0.75rem;
    font-weight:500;
    color:var(--muted-foreground);
    text-decoration:line-through;
    display:block;
}

.woocommerce .price ins {
    text-decoration:none;
    font-size:0.9375rem;
    font-weight:700;
    color:var(--foreground);
}

/* Single big price (not on sale) */
.woocommerce .price > .amount {
    font-size:0.9375rem;
    font-weight:700;
    color:var(--foreground);
}

/* ─── Wishlist button active state ─── */
.bc-wishlist-btn--active svg {
    fill:currentColor;
    color:var(--accent);
}

/* ─── Add-to-cart success flash ─── */
.bc-btn--success {
    background:var(--success) !important;
    color:var(--success-foreground) !important;
}

/* ─── Single product add-to-cart area ─── */
.woocommerce div.product form.cart {
    display:flex;
    align-items:center;
    gap:0.75rem;
    flex-wrap:wrap;
}

.woocommerce div.product form.cart .qty {
    height:3rem;
    width:4rem;
    text-align:center;
    border:1px solid var(--border);
    border-radius:624.9375rem;
    background:var(--card);
    font-size:0.875rem;
    font-weight:600;
    color:var(--foreground);
    outline:none;
}

.woocommerce div.product form.cart .qty:focus {
    border-color:var(--primary);
    box-shadow:0 0 0 2px oklch(from var(--primary) l c h / 0.2);
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    flex:1;
    min-height:3rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    border-radius:624.9375rem;
    background:var(--primary);
    color:var(--primary-foreground);
    font-size:0.875rem;
    font-weight:600;
    border:none;
    cursor:pointer;
    transition:opacity 150ms;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    opacity:0.9;
}

/* ─── WooCommerce notices ─── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    border-radius:var(--radius-lg);
    padding:0.875rem 1rem;
    font-size:0.875rem;
    margin-bottom:1rem;
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.woocommerce-message {
    background:var(--success-muted);
    color:var(--success-foreground);
    border-left:0.25rem solid var(--success);
}

.woocommerce-error {
    background:var(--destructive-muted);
    color:var(--destructive);
    border-left:0.25rem solid var(--destructive);
}

.woocommerce-info {
    background:var(--info-muted);
    color:var(--info-foreground);
    border-left:0.25rem solid var(--info);
}
}