/* ==========================================================================
   05-product-card.css  --  the product card, and the grid it lives in.
   One card definition serves grids, carousels, related products and upsells.
   ========================================================================== */

.scs-grid {
    display: grid;
    grid-template-columns: repeat(var(--scs-grid-cols), minmax(0, 1fr));
    gap: var(--scs-gutter);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* WooCommerce's own list markup mapped onto the same grid. */
ul.products {
    --scs-product-column-gap: var(--scs-gutter);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    column-gap: var(--scs-product-column-gap);
    row-gap: var(--scs-gutter);
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.products::before, ul.products::after { content: none; }
ul.products li.product {
    width: auto !important;
    flex: 0 0 calc((100% - 3 * var(--scs-product-column-gap)) / 4);
    margin: 0 !important;
    float: none !important;
}
@media (max-width: 1199px) {
    ul.products li.product { flex-basis: calc((100% - 2 * var(--scs-product-column-gap)) / 3); }
}
@media (max-width: 899px) {
    ul.products li.product { flex-basis: calc((100% - var(--scs-product-column-gap)) / 2); }
}
@media (max-width: 359px) {
    ul.products li.product { flex-basis: 100%; }
}

/* ---- card --------------------------------------------------------------- */
.scs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--scs-surface);
    border: 1px solid var(--scs-line);
    border-radius: var(--scs-radius);
    overflow: hidden;
    transition: border-color var(--scs-t), box-shadow var(--scs-t), transform var(--scs-t-fast);
}
.scs-card:hover {
    border-color: var(--scs-line-strong);
    box-shadow: var(--scs-shadow);
    transform: translateY(-2px);
}

.scs-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--scs-surface-3);
    overflow: hidden;
}
.scs-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity var(--scs-t), transform 400ms ease;
}
/* Second image revealed on hover -- standard retail card behaviour. */
.scs-card__img--alt { position: absolute; inset: 0; opacity: 0; }
.scs-card:hover .scs-card__img--alt { opacity: 1; }
.scs-card:hover .scs-card__img--main { opacity: 0; }

.scs-card__badges {
    position: absolute;
    top: var(--scs-2); left: var(--scs-2);
    display: flex; flex-direction: column; gap: var(--scs-1);
    z-index: 2;
}

/* Quick-add bar slides up over the image on hover (pointer devices only). */
.scs-card__quick {
    position: absolute;
    left: var(--scs-2); right: var(--scs-2); bottom: var(--scs-2);
    z-index: 2;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--scs-t), transform var(--scs-t);
}
@media (hover: hover) and (min-width: 900px) {
    .scs-card:hover .scs-card__quick { opacity: 1; transform: translateY(0); }
}
@media (hover: none), (max-width: 899px) {
    /* Touch: no hover to reveal, so the action is always present. */
    .scs-card__quick { position: static; opacity: 1; transform: none; padding: 0 var(--scs-3) var(--scs-3); }
}

.scs-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--scs-1);
    padding: var(--scs-3);
    flex: 1 1 auto;
}
.scs-card__brand {
    font-size: var(--scs-fs-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--scs-ink-3);
}
.scs-card__title {
    font-size: var(--scs-fs-sm);
    font-weight: var(--scs-fw-medium);
    line-height: 1.4;
    margin: 0;
    /* Two-line clamp keeps every card in a row the same height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.scs-card__rating { display: flex; align-items: center; gap: var(--scs-1); font-size: var(--scs-fs-xs); color: var(--scs-ink-3); }
.scs-card__price { margin-top: auto; padding-top: var(--scs-2); }

/* --------------------------------------------------------------------------
   WooCommerce emits a bare <li class="product"> with the title, price and
   button as DIRECT children -- there is no inner card wrapper to hook. So the
   loop item itself becomes the card. This is what keeps every card in a row the
   same height with its button on a common baseline.
   -------------------------------------------------------------------------- */
li.product {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--scs-surface);
    border: 1px solid var(--scs-line);
    border-radius: var(--scs-radius);
    overflow: hidden;
    text-align: left;
    transition: border-color var(--scs-t), box-shadow var(--scs-t), transform var(--scs-t-fast);
}
li.product:hover {
    border-color: var(--scs-line-strong);
    box-shadow: var(--scs-shadow);
    transform: translateY(-2px);
}

/* The media span comes from scs_loop_thumbnail(). */
li.product .scs-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--scs-surface-3);
    overflow: hidden;
    flex: 0 0 auto;
}
li.product .scs-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Pad only the text content, not the image. */
li.product > .scs-card__brand,
li.product > .woocommerce-loop-product__title,
li.product > .scs-card__rating,
li.product > .price,
li.product > .button,
li.product > a.added_to_cart {
    margin-inline: var(--scs-3);
}
/* Always occupies a line, even when the brand is unknown, so cards in a row
   keep identical internal spacing. */
li.product > .scs-card__brand { margin-top: var(--scs-3); display: block; min-height: 1.4em; }
li.product > .button { margin-bottom: var(--scs-3); }

li.product .woocommerce-loop-product__title {
    font-size: var(--scs-fs-sm) !important;
    font-weight: var(--scs-fw-medium);
    line-height: 1.4;
    padding: 0 !important;
    margin-top: var(--scs-1);
    margin-bottom: var(--scs-1);
    /* Two-line clamp: uneven title lengths otherwise stagger every price row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.4 * var(--scs-fs-sm));
}

/* Push price + button to the bottom so they align across the row. */
li.product .price { margin-top: auto !important; padding-top: var(--scs-2); font-size: var(--scs-fs-base); margin-bottom: var(--scs-2) !important; }
li.product .scs-card__rating { min-height: 1.2em; }

.scs-card .price { font-size: var(--scs-fs-base); margin: 0; }

/* Sale flash from Woo -- restyled to the card badge. */
.woocommerce span.onsale,
li.product .onsale {
    position: absolute; top: var(--scs-2); left: var(--scs-2);
    min-height: 0; min-width: 0;
    padding: 3px var(--scs-2);
    border-radius: var(--scs-radius-sm);
    background: var(--scs-sale-soft);
    color: var(--scs-sale);
    font-size: var(--scs-fs-xs);
    font-weight: var(--scs-fw-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
    margin: 0;
}

/* Add-to-cart button inside a card. */
li.product .button, .scs-card .button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%;
    min-height: var(--scs-control-h-sm);
    padding: 0 var(--scs-3);
    border-radius: var(--scs-radius);
    background: var(--scs-accent);
    color: var(--scs-accent-contrast);
    font-size: var(--scs-fs-sm);
    font-weight: var(--scs-fw-bold);
    border: 0;
}
li.product .button:hover, .scs-card .button:hover { background: var(--scs-accent-hover); color: #fff; }
li.product .added_to_cart { display: none; }