/* IXXO Cart 8 storefront: the listing pages (category, search, brands, brand, collection), Phase 10a Task 10.
   The Ampere Category board: a filter sidebar beside the results on a wide screen, a drawer
   (<dialog>) behind a "Filters" button on a phone; the toolbar with the count, chips, sort and
   grid or list view. Colours are tokens only; sides are logical (right to left works as is). */

.sf-listing-page{ padding-block-end: 64px; }

/* Header: name, description, child categories */
.sf-listing-head{ margin-block-start: 14px; }
.sf-listing-title{ font-size: clamp(32px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.035em; margin: 0; }
.sf-listing-text{ margin-block-start: 10px; color: var(--ink-2); max-inline-size: 60ch; }
.sf-listing-seller{ margin-block-start: 8px; color: var(--muted); font-size: 14.5px; }
.sf-listing-seller a{ color: var(--ink); font-weight: 600; }
.sf-listing-bottom{ margin-block-start: 56px; padding-block-start: 24px; border-block-start: 1px solid var(--line); color: var(--ink-2); max-inline-size: 75ch; }
.sf-rich p + p{ margin-block-start: 0.8em; }
.sf-rich a{ color: var(--ink); }

.sf-subcats{ display: flex; gap: 8px; overflow-x: auto; margin-block-start: 22px; padding-block-end: 4px; scrollbar-width: none; list-style: none; }
.sf-subcat{ display: inline-flex; gap: 10px; align-items: center; white-space: nowrap; min-block-size: 44px; padding-inline: 16px; border-radius: 999px; background: var(--tile); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; transition: background-color 0.2s; }
.sf-subcat:hover{ background: var(--line); }
.sf-subcat-count{ color: var(--muted); font-size: 13px; }

/* Two columns: the panel and the results */
.sf-listing{ display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 40px; margin-block-start: 28px; align-items: start; }
/* No panel to show (an empty listing): the results take the whole width. */
.sf-listing.is-bare{ grid-template-columns: minmax(0, 1fr); }

/* The panel: on a wide screen the dialog is simply part of the page */
.sf-filters-dialog{ display: block; position: static; inline-size: auto; block-size: auto; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; }
.sf-filters{ display: flex; flex-direction: column; }
.sf-filters-head{ display: flex; align-items: center; gap: 12px; padding-block-end: 12px; border-block-end: 1.5px solid var(--ink); }
.sf-filters-title{ font-size: 17px; margin: 0; flex: 1; }
.sf-filters-clear{ font-size: 14px; color: var(--ink); text-underline-offset: 2px; }
.sf-filters-close{ display: none; }
.sf-fg{ border: 0; border-block-end: 1px solid var(--line); margin: 0; padding: 14px 0 16px; min-inline-size: 0; }
.sf-fg-title{ padding: 0; font-size: 15px; font-weight: 650; color: var(--ink); }
.sf-opts{ display: flex; flex-direction: column; gap: 0; margin-block-start: 6px; list-style: none; }
.sf-opt{ display: flex; align-items: center; gap: 10px; min-block-size: 44px; font-size: 14.5px; cursor: pointer; }
.sf-opt input{ inline-size: 18px; block-size: 18px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.sf-opt-label{ flex: 1; }
.sf-opt-count{ color: var(--muted); font-size: 13px; }
.sf-range{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-block-start: 10px; }
.sf-range-field{ display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); }
.sf-range-field input{ block-size: 44px; inline-size: 100%; padding-inline: 12px; border: 1px solid var(--muted); border-radius: var(--r); background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
.sf-range-field input::placeholder{ color: var(--placeholder); }
.sf-filters-apply{ margin-block-start: 16px; }

/* Toolbar: count, chips, sort, view */
.sf-toolbar{ display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block-end: 16px; border-block-end: 1px solid var(--line); }
.sf-toolbar-start{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sf-result-count{ font-weight: 650; font-size: 15px; }
.sf-filters-open{ display: none; }
.sf-toolbar-tools{ display: flex; align-items: center; gap: 10px; }
.sf-sort{ display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.sf-sort-select{ block-size: 44px; padding-inline: 12px; border: 1px solid var(--muted); border-radius: var(--r); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.sf-view{ display: flex; border: 1px solid var(--muted); border-radius: var(--r); overflow: hidden; }
.sf-view-btn{ display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; }
.sf-view-btn[aria-pressed="true"]{ background: var(--ink); color: var(--on-ink); }
.sf-view:not(:has(.sf-view-btn:not([hidden]))){ display: none; }

.sf-chips{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; list-style: none; margin-block-start: 16px; }
.sf-chip{ display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding-inline: 12px 8px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.sf-chip:active{ transform: scale(0.96); }
.sf-chip .sf-ico{ inline-size: 16px; block-size: 16px; }
.sf-chips-clear{ font-size: 14px; color: var(--ink); text-underline-offset: 2px; padding-inline: 4px; }

/* Results: four across beside the panel, or one per row in the list view */
.sf-results .sf-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: 24px; }
.sf-results.is-list .sf-grid{ grid-template-columns: 1fr; gap: 0; }
.sf-results.is-list .sf-card{ display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding-block: 20px; border-block-end: 1px solid var(--line); }
.sf-results.is-list .sf-card-link{ min-block-size: 0; font-size: 16.5px; }
.sf-results.is-list .sf-card-add{ inline-size: auto; align-self: flex-start; padding-inline: 28px; }

/* No results */
.sf-noresults{ display: flex; flex-direction: column; gap: 32px; margin-block-start: 14px; }
.sf-noresults-heading{ font-size: 19px; margin-block-end: 12px; }
.sf-noresults-list{ padding-inline-start: 20px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.sf-noresults-cats .sf-subcats{ margin-block-start: 0; flex-wrap: wrap; }

/* Brands A to Z */
.sf-jump{ position: sticky; inset-block-start: 0; z-index: 3; background: var(--paper); margin-block-start: 20px; padding-block: 10px; border-block-end: 1px solid var(--line); }
.sf-jump-list{ display: flex; flex-wrap: wrap; gap: 4px; list-style: none; }
.sf-jump-link{ display: inline-grid; place-items: center; min-inline-size: 44px; block-size: 44px; border-radius: var(--r); color: var(--ink); font-family: var(--font-mono); font-weight: 600; text-decoration: none; }
.sf-jump-link:hover{ background: var(--tile); }
.sf-brand-group{ margin-block-start: 32px; scroll-margin-block-start: 80px; }
.sf-brand-letter{ font-size: 28px; padding-block-end: 8px; border-block-end: 1.5px solid var(--ink); }
.sf-brand-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; list-style: none; margin-block-start: 16px; }
.sf-brand-tile{ display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border-radius: calc(var(--r) * 1.5); background: var(--tile); color: var(--ink); text-decoration: none; font-weight: 600; text-align: center; transition: background-color 0.2s; }
.sf-brand-tile:hover{ background: var(--line); }
.sf-brand-logo{ display: grid; place-items: center; inline-size: 100%; block-size: 64px; }
.sf-brand-logo img{ max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }

/* Brand page and collection picture */
.sf-brand-banner{ margin-block-start: 14px; border-radius: calc(var(--r) * 1.5); overflow: hidden; background: var(--tile); }
.sf-brand-banner img{ display: block; inline-size: 100%; block-size: auto; max-block-size: 320px; object-fit: cover; }
.sf-brand-head{ display: flex; gap: 24px; align-items: flex-start; }
.sf-brand-logo-big{ inline-size: 160px; block-size: 80px; flex: none; border-radius: var(--r); background: var(--tile); padding: 8px; }
.sf-brand-site{ margin-block-start: 10px; font-size: 14.5px; }
.sf-brand-site a{ color: var(--ink); font-weight: 600; text-underline-offset: 2px; }

@media (max-width: 1200px){
	.sf-results .sf-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A phone: the panel becomes a drawer opened by the "Filters" button (storefront.js). Without
   JavaScript that button stays hidden, so the panel stays in the page above the results. */
@media (max-width: 900px){
	.sf-listing{ grid-template-columns: 1fr; gap: 24px; }
	.sf-filters-open:not([hidden]){ display: inline-flex; }
	.sf-listing:has(.sf-filters-open:not([hidden])) .sf-filters-dialog:not([open]){ display: none; }
	.sf-filters-dialog[open]{ position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(360px, 90vw); block-size: 100%; max-block-size: none; overflow-y: auto; padding: 20px; background: var(--paper); box-shadow: 0 8px 32px var(--shadow-lift); }
	.sf-filters-dialog[open]::backdrop{ background: var(--backdrop); }
	.sf-filters-dialog[open] .sf-filters-close{ display: inline-grid; }
}

@media (max-width: 720px){
	.sf-results .sf-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sf-results.is-list .sf-card{ grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
	.sf-sort-label{ position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.sf-brand-head{ flex-direction: column; }
}