/* Boi_Theme product card — Apple editorial restyle
 * ==================================================
 * Le regole base vivono in `boi/default/css/styles.css` (monolite
 * del tema). Qui aggiungo solo le finezze iOS-like: easing spring,
 * hairline border, image zoom on hover, typography SF-style, CTA
 * sentence-case con tighter letter-spacing, focus rings keyboard.
 *
 * Load via catalog_category_default / _layered / catalogsearch_result_index
 * → boi_configurableswatches.xml handle.
 */

/* Shadow tokens locali (non sono in tokens.css perché specifici al card).
   I tokens generali (--sys-ease, --sys-hairline) vengono da tokens.css. */
:root {
    --boi-card-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 2px 6px rgba(0, 0, 0, 0.04);
    --boi-card-shadow-hover:
        0 0 0 0.5px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 10px 28px rgba(0, 0, 0, 0.08);
}

/* Card: hairline border + layered shadow + spring easing.
   Override di styles.css .products-grid .item / .products-list .item */
.products-grid .item,
.products-list .item {
    border: 0.5px solid var(--sys-hairline);
    border-radius: 14px;                    /* iOS card generoso */
    box-shadow: var(--boi-card-shadow);
    transition:
        box-shadow 0.32s var(--sys-ease),
        transform 0.32s var(--sys-ease),
        border-color 0.32s var(--sys-ease);
}
.products-grid .item:hover,
.products-list .item:hover {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: var(--boi-card-shadow-hover);
    transform: translateY(-4px);
}

/* Image zoom subtle su hover: wrapper clippa via overflow:hidden
   ereditato da styles.css, immagine scale leggermente. */
.products-grid .item .product-image img {
    transition: transform 0.6s var(--sys-ease);
    will-change: transform;
}
.products-grid .item:hover .product-image img {
    transform: scale(1.04);
}

/* Alt-img fade — easing coordinato */
.products-grid .product-image .alt-img,
.products-list .product-image .alt-img {
    transition: opacity 0.32s var(--sys-ease);
}

/* Typography SF Pro-style: nome con optical kerning tight */
.products-grid .product-name a,
.products-list .product-name a {
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* Price: numerics leggermente più compatti — i prezzi in evidenza
   si leggono meglio con kerning tight */
.products-grid .price-box .price,
.products-list .price-box .price {
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;       /* allineamento numerico */
    font-feature-settings: "tnum";
}

/* CTA iOS: sentence-case invece di UPPERCASE, tighter letter-spacing,
   radius 10px iOS-style, active tap feedback */
.products-grid .actions .button,
.products-list .actions .button {
    text-transform: none;
    letter-spacing: -0.005em;
    border-radius: 10px;
    transition:
        background 0.2s var(--sys-ease),
        color 0.2s var(--sys-ease),
        transform 0.1s var(--sys-ease);
}
.products-grid .actions .button:active,
.products-list .actions .button:active {
    transform: scale(0.98);
}

/* Focus states per keyboard nav — iOS-style soft ring */
.products-grid .item .product-image:focus-visible,
.products-list .item .product-image:focus-visible,
.products-grid .product-name a:focus-visible,
.products-list .product-name a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--sys-blue-soft);
    border-radius: 6px;
}

/* Out-of-stock label: styling più sobrio (era bold plain) */
.products-grid .actions .availability.out-of-stock,
.products-list .actions .availability.out-of-stock {
    color: var(--sys-ink-soft);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-align: center;
    padding: 10px 0;
}
.products-grid .actions .availability.out-of-stock span::before {
    content: '●';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    color: var(--sys-red);                            /* iOS system red */
    vertical-align: 1px;
    font-size: 10px;
}

/* Reduced motion: disabilita scale/zoom per utenti con `prefers-reduced-motion` */
@media (prefers-reduced-motion: reduce) {
    .products-grid .item,
    .products-list .item,
    .products-grid .item .product-image img,
    .products-grid .actions .button {
        transition: none !important;
        transform: none !important;
    }
}