/* ==========================================================================
product.css — legacy product grid + legacy .product-card UI
IMPORTANT:
- New premium cards use .pc (in product-card.css).
- This file should NOT override .pc buttons or layout.
========================================================================== */

/* Shared product grid (used by list + elsewhere) */
.product-grid{
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display:grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48rem){
    .product-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 64rem){
    .product-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* -------------------------
    Legacy card (.product-card)
   ------------------------- */

.product-card{
    position: relative;
    border: 1px solid var(--ink-12);
    border-radius: var(--r-2);
    background: var(--bg);
    overflow: hidden;
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.product-card:hover{
    transform: translateY(-1px);
    box-shadow: var(--sh-2);
    border-color: var(--ink-18);
}

.product-card-image{
    display:block;
    background: rgba(0,0,0,0.02);
    aspect-ratio: 4 / 3;
    overflow:hidden;
}
.product-card-image img{
    width:100%;
    height:100%;
    object-fit: contain;
    padding: var(--sp-2);
    transition: transform var(--dur-2) var(--ease);
}
.product-card:hover .product-card-image img{ transform: scale(1.01); }

.product-card-body{
    padding: var(--sp-3);
    display:grid;
    gap: 0.55rem;
}

.product-card-title{
    margin: 0;
    font-size: var(--fs-2);
    line-height: 1.25;
    font-weight: 680;
}
.product-card-title a:hover{ text-decoration: underline; }

.product-card-price{
    display:flex;
    align-items:baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.currency-icon{
    font-weight: 760;
    color: var(--ink-72);
    font-size: var(--fs-0);
}

.price-original{
    color: var(--ink-60);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.price-sale{ font-weight: 760; }
.price-normal{ font-weight: 760; }

/* Legacy Add to cart button (ONLY inside legacy .product-card) */
.product-card .grid-add-cart-form{ margin-top: var(--sp-1); }

.product-card .btn-add-cart-small{
    width: 100%;
    background: var(--primary);
    color: var(--text);
    border-radius: var(--r-pill);
    padding: 0.8rem 1rem;
    font-weight: 760;
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 24px var(--ink-06);
    transition: filter var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.product-card .btn-add-cart-small:hover{
    filter: brightness(0.98);
    box-shadow: 0 14px 30px var(--ink-08);
}
.product-card .btn-add-cart-small:active{ transform: translateY(1px); }
.product-card .btn-add-cart-small:disabled{
    opacity: 0.6;
    box-shadow:none;
    cursor: not-allowed;
}

/* Empty state */
.product-grid + p,
.product-grid p{
    max-width: var(--container);
    margin: var(--sp-4) auto 0 auto;
    padding: 0 var(--gutter);
    color: var(--ink-72);
}