/* ===== Shared two-per-row mobile product-card grid convention, used by both
   shop.php (.sp-card-*) and index.php's Deals/Bouquets sections (.ld-card-*).
   One source of truth so the two card systems can't quietly drift apart —
   see shop.php's own audit-driven grid work for the original rules this was
   extracted from. Every colour is a var() from navigation.php's :root. ===== */

/* ----- Circular overlay "Add to cart" icon button (base styles) -----
   Sits on .sp-card-image / .ld-card-image, hidden by default, shown only
   below 480px where the full-width text button doesn't fit two-across. */
.sp-card-add-icon,
.ld-card-add-icon {
    display: none;
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--jv-line);
    background: var(--jv-paper);
    color: var(--jv-gold-dark);
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(14, 42, 34, 0.14);
}

.sp-card-add-icon svg,
.ld-card-add-icon svg {
    width: 18px;
    height: 18px;
}

/* ----- 480–767px: guaranteed 2 columns, matching shop.php's range exactly.
   (.ld-grid's own base rule is auto-fit, which would otherwise leave a gap
   around 480–552px showing only 1 column — this closes that gap.) ----- */
@media (max-width: 767px) {
    .sp-grid,
    .ld-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----- Below 480px: tight 2-column cards ----- */
@media (max-width: 479px) {
    .sp-grid,
    .ld-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 14px;
    }

    .sp-card-body,
    .ld-card-body {
        padding: 12px 14px 14px;
        gap: 4px;
    }

    .sp-card-name,
    .ld-card-title {
        font-size: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .sp-card-price,
    .ld-price-now {
        font-size: 14px;
    }

    .sp-card-old-price,
    .ld-price-was {
        font-size: 12px;
    }

    /* Full-width text buttons stay in the DOM (unchanged markup/behaviour)
       but are replaced visually by the circular icon button overlaid on the
       image at this width — a full "ADD TO CART" pill doesn't fit two-across. */
    .sp-card-cta,
    .ld-card-body .ld-btn-outline {
        display: none;
    }

    .sp-card-add-icon,
    .ld-card-add-icon {
        display: flex;
    }
}