/*
 * Product Archive Showcase Columns
 * Commerce-owned supplemental lists for non-Shop product archives.
 * Section and list cards are intentionally borderless/transparent at rest.
 */

.hdc-archive-showcase {
    clear: both;
    width: min(
        calc(100% - (var(--hdc-archive-page-gutter, 24px) * 2)),
        var(--hdc-archive-page-width, 1800px)
    );
    margin: 30px auto 20px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hdc-archive-showcase__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.hdc-archive-showcase__column {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hdc-archive-showcase__title {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    color: var(--hdc-text, #111827);
    font-family: var(--hdc-font-heading, inherit);
    font-size: clamp(16px, 1.15vw, 20px);
    font-weight: 700;
    line-height: 1.2;
}

.hdc-archive-showcase__products {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.hdc-archive-showcase__item {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Reuse the canonical list-card renderer, while removing normal-state frame
 * decoration exactly for the Showcase Columns consumer. Product Card hover
 * shadow/front-layer/action behavior remains owned by the global card CSS. */
.hdc-archive-showcase .hdc-product-card--list {
    min-height: 106px;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    --hdc-list-card-media-width: 82px;
    --hdc-list-card-padding: 12px;
    --hdc-list-card-gap: 12px;
    --hdc-card-rating-color: #FFB900;
    --hdc-card-rating-empty-color: #FFB900;
    --hdc-list-card-media-padding: 2px;
    --hdc-list-card-hover-action-size: 24px;
    --hdc-list-card-hover-action-icon-size: 12px;
    --hdc-list-card-quick-view-height: 24px;
}

.hdc-archive-showcase .hdc-product-card--list:hover,
.hdc-archive-showcase .hdc-product-card--list:has(:focus-visible) {
    border: 0;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-media.hdc-product-card__media {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__media-actions {
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: calc(100% - 8px);
    max-inline-size: calc(100% - 8px);
    justify-items: center;
    align-content: center;
    gap: 6px;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__quick-action,
.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__round-actions {
    width: 100%;
    justify-content: center;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__quick-action button.hdc-product-card__quick-view {
    width: var(--hdc-card-quick-view-height, 24px);
    min-width: var(--hdc-card-quick-view-height, 24px);
    padding: 0;
    border-radius: 50%;
    gap: 0;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__quick-action button.hdc-product-card__quick-view span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__quick-action button.hdc-product-card__quick-view .hdc-icon {
    width: 12px;
    height: 12px;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-content: center;
    align-self: center;
    column-gap: 12px;
    row-gap: 4px;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-category,
.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-title,
.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-actions {
    grid-column: 1 / -1;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-category {
    font-size: 9px;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-title {
    font-size: 12px;
    line-height: 1.22;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-price {
    min-width: 0;
    grid-column: 1;
    grid-row: auto;
    gap: 4px;
    font-size: 12px;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-rating {
    display: inline-flex;
    grid-column: 2;
    align-self: center;
    justify-self: end;
    margin: 0;
    color: var(--hdc-card-rating-color, #FFB900);
    line-height: 1;
    white-space: nowrap;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-rating .hdc-product-card__stars {
    color: var(--hdc-card-rating-color, #FFB900);
    font-size: 11px;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-rating .hdc-product-card__star {
    color: var(--hdc-card-rating-color, #FFB900);
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-price del {
    font-size: 9px;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-actions {
    min-height: 26px;
    gap: 6px;
    margin-top: 0;
    padding-inline: 0;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-wishlist .hdc-selection-button.hdc-product-card__wishlist {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
}

.hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-wishlist .hdc-product-card__wishlist .hdc-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
}

/* Preserve the data state of Wishlist/Collection/Compare, but once the pointer
 * and keyboard focus leave a Showcase card its controls visually return to the
 * canonical normal state. This prevents action/focus state from latching the
 * card presentation without undoing the customer's saved selection. */
.hdc-archive-showcase .hdc-product-card--list:not(:hover):not(:focus-within) .hdc-selection-button[aria-pressed="true"] {
    border-color: transparent;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.hdc-archive-showcase .hdc-product-card--list:not(.is-mobile-actions-open):not(:hover):not(:focus-within) .hdc-product-card__media-actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.hdc-archive-showcase__empty {
    margin: 0;
    padding: 8px 0;
    color: var(--hdc-muted-text, #6B7280);
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 1100px) {
    .hdc-archive-showcase__grid {
        gap: 16px;
    }

    .hdc-archive-showcase .hdc-product-card--list {
        min-height: 98px;
        grid-template-columns: 74px minmax(0, 1fr);
        --hdc-list-card-media-width: 74px;
    }

    .hdc-archive-showcase .hdc-product-card--list .hdc-product-card__list-title {
        font-size: 11px;
    }
}

@media (max-width: 760px) {
    .hdc-archive-showcase {
        margin-block-start: 24px;
    }

    .hdc-archive-showcase__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .hdc-archive-showcase__title {
        font-size: 17px;
    }

    .hdc-archive-showcase .hdc-product-card--list {
        min-height: 102px;
        grid-template-columns: 78px minmax(0, 1fr);
        --hdc-list-card-media-width: 78px;
    }
}