/* =====================================================================
   sf-catalog.css — product card variants, grid + carousel, toolbar, filters,
   load more, skeleton / empty / error (package C). Tokens: see storefront.css.
   Token-only, .sf-scope scoped, BEM, logical properties, RTL-safe.
   ===================================================================== */

/* ---------- 1. Grid (columns come from the block's --sf-cols-* vars) ---------- */
.sf-scope .sf-grid {
    display: grid;
    grid-template-columns: repeat(var(--sf-cols-m, 2), minmax(0, 1fr));
    gap: var(--space-5) var(--space-3);
    align-items: stretch;
}
.sf-scope .sf-grid > * { min-width: 0; }
@media (min-width: 720px) {
    .sf-scope .sf-grid {
        grid-template-columns: repeat(var(--sf-cols-t, 3), minmax(0, 1fr));
        gap: var(--space-6) var(--space-5);
    }
}
@media (min-width: 1024px) {
    .sf-scope .sf-grid { grid-template-columns: repeat(var(--sf-cols-d, 4), minmax(0, 1fr)); }
}
.sf-scope .sf-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

/* ---------- 2. Product card (shared) ---------- */
.sf-scope .sf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    color: var(--color-text);
}
.sf-scope .sf-card__media {
    position: relative;
    display: block;
    aspect-ratio: var(--img-ratio);
    border-radius: var(--media-radius);
    overflow: hidden;
    background: var(--surface-2);
}
.sf-scope .sf-card--contain .sf-card__media { background: var(--color-surface); }
.sf-scope .sf-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease), opacity var(--duration-slow) var(--ease);
}
.sf-scope .sf-card--contain .sf-card__img { object-fit: contain; }
.sf-scope .sf-card__img--hover { position: absolute; inset: 0; opacity: 0; }
.sf-scope .sf-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-muted); }
.sf-scope .sf-card--soldout .sf-card__img,
.sf-scope .sf-card--soldout .sf-card__ph { opacity: .55; }
.sf-scope .sf-card__badges {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}
.sf-scope .sf-card__body { display: flex; flex-direction: column; flex: 1; gap: 6px; min-width: 0; }
.sf-scope .sf-card__eyebrow { font-size: var(--font-size-xs); color: var(--color-muted); letter-spacing: var(--eyebrow-tracking); text-transform: var(--eyebrow-transform); }
.sf-scope .sf-card__title {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: var(--weight-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: pretty;
}
/* The name is the card's link; its ::after stretches over the whole card. */
.sf-scope .sf-card__link { color: inherit; }
.sf-scope .sf-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sf-scope .sf-card__link:focus-visible { outline: none; }
.sf-scope .sf-card__link:focus-visible::after { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--card-radius); }
.sf-scope .sf-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; }
.sf-scope .sf-card .sf-price { font-size: 15px; }
.sf-scope .sf-price__from { font-size: 13px; font-weight: 400; color: var(--color-muted); }
.sf-scope .sf-rating__count { color: var(--color-muted); }
.sf-scope .sf-card__swatches { display: flex; align-items: center; gap: 6px; }
.sf-scope .sf-card__swatch { background: var(--sf-sw, var(--surface-3)); }
.sf-scope .sf-card__swatch-more { font-size: var(--font-size-xs); color: var(--color-muted); }
.sf-scope .sf-card__desc {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--color-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (hover: hover) {
    .sf-scope .sf-card:hover .sf-card__img { transform: scale(1.04); }
    .sf-scope .sf-card:hover .sf-card__img--hover { opacity: 1; }
    .sf-scope .sf-card:hover .sf-card__link { color: var(--color-primary); }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
    .sf-scope .sf-card:hover .sf-card__img { transform: none; }
}
.sf-scope[data-ct="3"] .sf-card__media { border: var(--card-border); box-shadow: var(--shadow-1); transition: box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.sf-scope[data-ct="3"] .sf-card:hover .sf-card__media { box-shadow: var(--shadow-2); transform: translate(-2px, -2px); }
.sf-scope[data-ct="2"] .sf-card__title { font-family: var(--font-display); font-size: 17px; }

/* ---------- 3. Quick add button (idle / adding / added) ---------- */
.sf-scope .sf-qa {
    position: relative;
    z-index: 3;
    display: inline-grid;
    place-items: center;
    min-height: 44px;
    padding-inline: var(--space-4);
    border: var(--border-width) solid var(--color-primary);
    border-radius: var(--btn-radius);
    background: var(--color-primary);
    color: var(--on-primary);
    font-size: 14px;
    font-weight: var(--btn-weight);
    line-height: 1.2;
    text-transform: var(--btn-transform);
    letter-spacing: var(--btn-tracking);
    cursor: pointer;
    transition: background var(--duration-base) var(--ease), color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
.sf-scope .sf-qa > * { grid-area: 1 / 1; }
.sf-scope .sf-qa:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.sf-scope .sf-qa--block { display: grid; width: 100%; }
.sf-scope .sf-qa--sm { min-height: 40px; font-size: 13px; padding-inline: var(--space-3); }
.sf-scope .sf-qa--tinted { background: var(--primary-soft); border-color: transparent; color: var(--color-primary); }
.sf-scope .sf-qa--tinted:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--on-primary); }
.sf-scope .sf-qa--float { width: 100%; background: var(--color-surface); border-color: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-2); }
.sf-scope .sf-qa--float:hover { background: var(--color-surface); border-color: var(--color-text); }
.sf-scope .sf-qa__state { display: inline-flex; align-items: center; gap: 6px; visibility: hidden; }
.sf-scope .sf-qa.is-busy .sf-qa__label { visibility: hidden; }
.sf-scope .sf-qa.is-busy .sf-qa__state--busy { visibility: visible; }
.sf-scope .sf-qa.is-added { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.sf-scope .sf-qa.is-added .sf-qa__label,
.sf-scope .sf-qa.is-added .sf-qa__state--busy { visibility: hidden; }
.sf-scope .sf-qa.is-added .sf-qa__state--done { visibility: visible; }
.sf-scope .sf-qa[disabled] { background: var(--surface-2); border-color: var(--color-border); color: var(--color-muted); cursor: not-allowed; box-shadow: none; }
.sf-scope .sf-qa.is-busy { cursor: progress; }

/* ---------- 4. Variant: standard (quick add rises over the image) ---------- */
.sf-scope .sf-card__quick {
    position: absolute;
    inset-inline: var(--space-3);
    inset-block-end: var(--space-3);
    z-index: 3;
}
@media (hover: hover) {
    .sf-scope .sf-card__quick { opacity: 0; transform: translateY(8px); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); }
    .sf-scope .sf-card:hover .sf-card__quick,
    .sf-scope .sf-card:focus-within .sf-card__quick { opacity: 1; transform: none; }
}

/* ---------- 5. Variant: overlay ---------- */
.sf-scope .sf-card--overlay .sf-card__media { aspect-ratio: 3 / 4; display: flex; align-items: flex-end; }
.sf-scope .sf-card--overlay .sf-card__img,
.sf-scope .sf-card--overlay .sf-card__ph { position: absolute; inset: 0; }
.sf-scope .sf-card__scrim {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: var(--space-4);
    background: linear-gradient(0deg, color-mix(in oklab, var(--color-text) 82%, transparent), transparent);
    color: var(--color-bg);
}
.sf-scope .sf-card--overlay .sf-card__title { font-weight: var(--weight-semibold); }
.sf-scope .sf-card--overlay .sf-card__link:hover { color: inherit; }
.sf-scope .sf-card--overlay .sf-price__now,
.sf-scope .sf-card--overlay .sf-price__cur,
.sf-scope .sf-card--overlay .sf-price__was { color: inherit; }
.sf-scope .sf-card--overlay .sf-price__was { opacity: .8; }

/* ---------- 6. Variant: detailed ---------- */
.sf-scope .sf-card--detailed .sf-card__body { gap: var(--space-2); }
.sf-scope .sf-card--detailed .sf-card__title { font-weight: var(--weight-semibold); }
.sf-scope .sf-card--detailed .sf-qa { margin-top: var(--space-2); }

/* ---------- 7. Variant: horizontal ---------- */
.sf-scope .sf-card--horizontal {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    padding-block-end: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
}
.sf-scope .sf-card--horizontal .sf-card__media { aspect-ratio: 1 / 1; border-radius: var(--r-sm); }
.sf-scope .sf-card--horizontal .sf-card__title { font-size: 14px; font-weight: var(--weight-medium); }
.sf-scope .sf-card--horizontal .sf-card__meta { margin-top: 0; }
.sf-scope .sf-card--horizontal .sf-qa { align-self: flex-start; margin-top: var(--space-1); }
.sf-scope[data-ct="3"] .sf-card--horizontal .sf-card__media { box-shadow: none; }

/* ---------- 8. List view (grid / list toggle) ---------- */
.sf-scope .sf-grid.is-list .sf-card:not(.sf-card--overlay):not(.sf-card--horizontal) {
    display: grid;
    grid-template-columns: minmax(110px, 200px) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}
.sf-scope .sf-grid.is-list .sf-card--overlay .sf-card__media { aspect-ratio: 16 / 9; }

/* ---------- 9. Section heading link, panel, sub-pager ---------- */
.sf-scope .sf-heading__text { min-width: 0; }
.sf-scope .sf-heading__link:hover { color: var(--color-primary); }
.sf-scope .sf-panel--roomy { padding: var(--space-6); }
.sf-scope .sf-panel__title { margin-bottom: var(--space-2); }
.sf-scope .sf-panel__sub { margin: 0 0 var(--space-5); }
.sf-scope .sf-subpager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-5); font-size: var(--font-size-sm); color: var(--color-muted); }
.sf-scope .sf-subpager__link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--btn-radius); color: var(--color-text); }
.sf-scope .sf-subpager__link:hover { border-color: var(--color-text); color: var(--color-text); }

/* Category tile (subcategories on a category page) */
.sf-scope .sf-catcard { display: block; overflow: hidden; background: var(--color-surface); border: var(--card-border); border-radius: var(--card-radius); transition: box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.sf-scope .sf-catcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.sf-scope .sf-catcard__media { display: block; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.sf-scope .sf-catcard__media img { width: 100%; height: 100%; object-fit: cover; }
.sf-scope .sf-catcard__media svg { width: 100%; height: 100%; padding: 26%; color: var(--color-muted); }
.sf-scope .sf-catcard__name { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-weight: var(--weight-semibold); font-size: var(--font-size-sm); }
.sf-scope .sf-catcard__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-scope .sf-catcard__name svg { flex: none; color: var(--color-muted); transform: scaleX(var(--flip)); }

/* ---------- 10. Carousel ---------- */
.sf-scope .sf-carousel__nav { display: flex; align-items: center; gap: var(--space-2); }
.sf-scope .sf-carousel__nav .sf-heading__link { margin-inline-end: var(--space-3); }
.sf-scope .sf-carousel__btn[disabled] { opacity: .35; cursor: default; }
.sf-scope .sf-carousel[data-fit] .sf-carousel__btn { visibility: hidden; }
.sf-scope .sf-carousel__track {
    --sf-gap: var(--space-3);
    --sf-c: var(--sf-cols-m, 2);
    display: flex;
    gap: var(--sf-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding-block-end: var(--space-1);
}
.sf-scope .sf-carousel__track::-webkit-scrollbar { display: none; }
.sf-scope .sf-carousel__track > * {
    flex: 0 0 calc((100% - var(--sf-gap) * var(--sf-c)) / (var(--sf-c) + .3));
    scroll-snap-align: start;
    min-width: 0;
}
@media (min-width: 720px) {
    .sf-scope .sf-carousel__track { --sf-gap: var(--space-5); --sf-c: var(--sf-cols-t, 3); }
    .sf-scope .sf-carousel__track > * { flex-basis: calc((100% - var(--sf-gap) * (var(--sf-c) - 1)) / var(--sf-c)); }
}
@media (min-width: 1024px) {
    .sf-scope .sf-carousel__track { --sf-c: var(--sf-cols-d, 4); }
}

/* ---------- 11. Empty / error / skeleton ---------- */
.sf-scope .sf-listing__state { border: var(--card-border); border-radius: var(--card-radius); background: var(--color-surface); }
.sf-scope .sf-empty .sf-btn { margin-top: var(--space-2); }
.sf-scope .sf-grid--skeleton .sf-card__media { background: var(--surface-2); }
.sf-scope .sf-skel { display: flex; flex-direction: column; gap: var(--space-2); }
.sf-scope .sf-skel__media { aspect-ratio: var(--img-ratio); border-radius: var(--media-radius); }
.sf-scope .sf-skel__line { height: 12px; width: 80%; }
.sf-scope .sf-skel__line--short { width: 45%; }

/* ---------- 12. Listing layout: sidebar + results ---------- */
.sf-scope .sf-listing { padding-block: var(--space-6); }
.sf-scope .sf-listing__crumbs { margin-block-end: var(--space-4); }
.sf-scope .sf-listing__layout { display: block; }
.sf-scope .sf-listing__main { min-width: 0; }
@media (min-width: 1024px) {
    .sf-scope .sf-listing__layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
    .sf-scope .sf-filters { position: sticky; inset-block-start: var(--space-5); }
    .sf-scope .sf-filters__head { display: none; }
    .sf-scope .sf-toolbar__filters { display: none; }
}

/* ---------- 13. Toolbar ---------- */
.sf-scope .sf-toolbar { display: flex; flex-direction: column; gap: var(--space-3); margin-block-end: var(--space-5); }
.sf-scope .sf-toolbar__search {
    display: flex; align-items: center; gap: var(--space-2);
    min-height: var(--input-h); padding-inline: var(--space-4);
    border: var(--border-width) solid var(--color-border); border-radius: var(--input-radius);
    background: var(--color-surface); color: var(--color-muted);
}
.sf-scope .sf-toolbar__search:focus-within { border-color: var(--color-text); }
.sf-scope .sf-toolbar__search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--color-text); font-size: 15px; outline: none; }
.sf-scope .sf-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.sf-scope .sf-toolbar__count { margin: 0; margin-inline-end: auto; font-size: var(--font-size-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.sf-scope .sf-toolbar__tools { display: flex; align-items: center; gap: var(--space-3); }
.sf-scope .sf-toolbar__sort .sf-select { min-height: 44px; width: auto; padding-inline: var(--space-3); font-size: var(--font-size-sm); }
.sf-scope .sf-toolbar__filters { position: relative; }
.sf-scope .sf-toolbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-sale); }
.sf-scope .sf-toolbar__chips { align-items: center; }
.sf-scope .sf-toolbar__chips .sf-chip { text-decoration: none; }
.sf-scope .sf-toolbar__clear { min-height: 36px; font-size: var(--font-size-sm); color: var(--color-muted); }
.sf-scope .sf-viewtoggle { display: inline-flex; border: var(--border-width) solid var(--color-border); border-radius: var(--btn-radius); overflow: hidden; background: var(--color-surface); }
.sf-scope .sf-viewtoggle[hidden] { display: none; }
.sf-scope .sf-viewtoggle__btn { display: grid; place-items: center; width: 44px; height: 42px; border: 0; background: transparent; color: var(--color-muted); }
.sf-scope .sf-viewtoggle__btn.is-on { background: var(--color-text); color: var(--color-bg); }
@media (max-width: 480px) { .sf-scope .sf-toolbar__count { flex-basis: 100%; order: 3; } }

/* ---------- 14. Filters: sidebar (desktop) / bottom sheet (phone) ---------- */
.sf-scope .sf-filters__form { display: flex; flex-direction: column; gap: var(--space-5); }
.sf-scope .sf-filters__body { display: flex; flex-direction: column; gap: var(--space-5); }
.sf-scope .sf-filters__group { display: flex; flex-direction: column; gap: var(--space-2); }
.sf-scope .sf-filters__label { font-size: var(--font-size-sm); font-weight: var(--weight-semibold); }
.sf-scope .sf-filters__range { display: flex; align-items: center; gap: var(--space-2); }
.sf-scope .sf-filters__range .sf-input { min-width: 0; padding-inline: var(--space-3); }
.sf-scope .sf-filters__dash { color: var(--color-muted); }
.sf-scope .sf-filters__foot { display: flex; flex-direction: column; gap: var(--space-2); }
.sf-scope .sf-filters__group.is-invalid .sf-input { border-color: var(--color-danger); }
.sf-scope .sf-picker__results { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.sf-scope .sf-picker__option:hover,
.sf-scope .sf-picker__option.is-active { background: var(--surface-2); }
.sf-scope .sf-picker__clear:hover { background: var(--surface-2); }
@media (max-width: 1023px) {
    .sf-scope .sf-filters[data-ready] {
        position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 85;
        display: flex; flex-direction: column; max-height: 86vh;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        background: var(--color-bg); box-shadow: var(--shadow-3);
        transform: translateY(105%); visibility: hidden;
        transition: transform var(--duration-slow) var(--ease), visibility 0s linear var(--duration-slow);
    }
    .sf-scope .sf-filters[data-ready].is-open { transform: none; visibility: visible; transition-delay: 0s; }
    .sf-scope .sf-filters[data-ready] .sf-filters__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-block-end: var(--border-width) solid var(--color-border); }
    .sf-scope .sf-filters[data-ready] .sf-filters__title { margin: 0; font-family: var(--font-display); font-size: var(--font-size-xl); }
    .sf-scope .sf-filters[data-ready] .sf-filters__form { flex: 1; min-height: 0; gap: 0; }
    .sf-scope .sf-filters[data-ready] .sf-filters__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); }
    .sf-scope .sf-filters[data-ready] .sf-filters__foot { flex-direction: row; padding: var(--space-3) var(--space-4); border-block-start: var(--border-width) solid var(--color-border); background: var(--color-surface); }
    .sf-scope .sf-filters[data-ready] .sf-filters__foot .sf-btn { flex: 1; }
    .sf-scope .sf-filters__scrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); }
    .sf-scope .sf-filters__scrim[hidden] { display: none; }
    .sf-scope .sf-filters:not([data-ready]) { margin-block-end: var(--space-5); padding: var(--space-4); border: var(--card-border); border-radius: var(--card-radius); background: var(--color-surface); }
}
@media (min-width: 1024px) { .sf-scope .sf-filters__scrim { display: none; } }

/* ---------- 15. Load more with progress, pagination ---------- */
.sf-scope .sf-loadmore { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-block-start: var(--space-7); }
.sf-scope .sf-loadmore__count { margin: 0; font-size: var(--font-size-sm); color: var(--color-muted); }
.sf-scope .sf-loadmore__bar {
    appearance: none; -webkit-appearance: none;
    width: min(240px, 100%); height: 4px; border: 0; border-radius: var(--radius-pill);
    background: var(--surface-3); color: var(--color-text); overflow: hidden;
}
.sf-scope .sf-loadmore__bar::-webkit-progress-bar { background: var(--surface-3); }
.sf-scope .sf-loadmore__bar::-webkit-progress-value { background: var(--color-text); transition: width var(--duration-slow) var(--ease); }
.sf-scope .sf-loadmore__bar::-moz-progress-bar { background: var(--color-text); }
.sf-scope .sf-loadmore__btn { min-width: 200px; }
.sf-scope .sf-loadmore__error { margin: 0; font-size: var(--font-size-sm); color: var(--color-danger); }
.sf-scope .sf-listing__pager { margin-top: var(--space-4); }
.sf-scope .sf-pagination__link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--btn-radius); background: var(--color-surface); font-size: var(--font-size-sm); }
.sf-scope .sf-pagination__link:hover { border-color: var(--color-text); color: var(--color-text); }
.sf-scope .sf-pagination .sf-pagination__info { border-color: transparent; background: transparent; color: var(--color-muted); }