/* FRAMESHIFT — collection, search, collection list */
.icon--flip { transform: scaleX(-1); }
[dir='rtl'] .icon--dir.icon--flip { transform: none; }

/* Hero */
.collection-hero { position: relative; overflow: hidden; display: grid; align-items: end; border-block-end: 1px solid var(--c-border); background: var(--c-surface); }
.collection-hero:not(.has-media) { background: radial-gradient(120% 140% at 85% 0%, rgb(var(--c-accent-rgb) / 0.12), transparent 55%), var(--c-surface); }
.collection-hero--small { min-block-size: 220px; }
.collection-hero--medium { min-block-size: clamp(280px, 38vw, 420px); }
.collection-hero--large { min-block-size: min(62vh, 560px); }
.collection-hero__media { position: absolute; inset: 0; }
.collection-hero__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.collection-hero.has-media .collection-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--c-bg-rgb) / 0.35), rgb(var(--c-bg-rgb) / 0.92) 92%), linear-gradient(90deg, rgb(var(--c-bg-rgb) / 0.6), transparent 70%); }
[dir='rtl'] .collection-hero.has-media .collection-hero__media::after { background: linear-gradient(180deg, rgb(var(--c-bg-rgb) / 0.35), rgb(var(--c-bg-rgb) / 0.92) 92%), linear-gradient(270deg, rgb(var(--c-bg-rgb) / 0.6), transparent 70%); }
html[data-fx='full'][data-parallax] .scene--live .collection-hero__img { transform: translate3d(0, calc(var(--p, 0) * 18%), 0) scale(1.08); }
.collection-hero__content { position: relative; z-index: 1; display: grid; gap: 0.9rem; padding-block: clamp(2rem, 5vw, 4rem); }
.collection-hero__title { max-inline-size: 18ch; }
.collection-hero__text { max-inline-size: 60ch; color: var(--c-text); opacity: 0.8; }
.collection-hero__count { color: var(--c-accent); }
.collection-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin-block-start: 0.5rem; }
.collection-chips .chip { background: rgb(var(--c-bg-rgb) / 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.collection-chips .chip[aria-current='page'] { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
@media (max-width: 749px) {
  .collection-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .collection-chips::-webkit-scrollbar { display: none; }
  .collection-chips .chip { flex: none; }
}

/* Toolbar (sticks below the header on phones so filter/sort is always one tap away) */
.collection-toolbar { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; margin-block-end: 1.5rem; }
.collection-toolbar__count { margin-inline-end: auto; }
.collection-toolbar__sort { display: flex; align-items: center; gap: 0.75rem; }
.collection-toolbar__sort .select { inline-size: auto; min-block-size: 44px; padding-block: 0.4em; }
.no-js .collection-toolbar__sort { display: none !important; }
.no-js .facets__sort-mobile { display: grid !important; }
@media (min-width: 990px) { .collection-toolbar__filter { display: none; } }
@media (max-width: 989px) {
  .collection-toolbar {
    position: sticky; inset-block-start: var(--header-offset, 0px); z-index: 60; flex-wrap: nowrap;
    margin-inline: calc(var(--gutter) * -1); padding: 0.6rem var(--gutter); background: rgb(var(--c-bg-rgb) / 0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block-end: 1px solid var(--c-border);
    transition: inset-block-start var(--dur-3) var(--ease-out);
  }
  .collection-toolbar__filter { flex: none; min-block-size: 44px; }
  .collection-toolbar__count { font-size: 0.68rem; white-space: nowrap; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
  .collection-toolbar__sort { min-inline-size: 0; flex: 0 1 auto; }
  .collection-toolbar__sort .select { min-inline-size: 0; max-inline-size: 100%; text-overflow: ellipsis; }
  .collection-toolbar .density { flex: none; }
}
/* Grid density toggle */
.density { display: inline-flex; gap: 2px; }
.density__set { display: inline-flex; gap: 2px; }
.density__set--mobile { display: none; }
@media (max-width: 749px) { .density__set--desktop { display: none; } .density__set--mobile { display: inline-flex; } }
.density__btn { display: grid; place-items: center; inline-size: 44px; block-size: 44px; color: var(--c-muted); border: 1px solid transparent; transition: color var(--dur-1), border-color var(--dur-1); }
.density__btn:hover { color: var(--c-text); }
.density__btn[aria-pressed='true'] { color: var(--c-accent); border-color: var(--c-border); }
.density__icon { display: inline-flex; gap: 2px; block-size: 16px; }
.density__icon i { display: block; inline-size: 5px; background: currentColor; }
.density__icon--1 i { inline-size: 14px; }
.density__icon--2 i { inline-size: 8px; }
.density__icon--3 i { inline-size: 5px; }
.density__icon--4 i { inline-size: 3px; }
.no-js .density { display: none; }

/* Layout */
.collection-layout { display: grid; gap: 2.5rem; }
@media (min-width: 990px) { .collection-layout.has-facets { grid-template-columns: 270px minmax(0, 1fr); align-items: start; } }
.collection-layout__main { min-inline-size: 0; }

/* Facets: drawer on mobile, inline sidebar on desktop (the closed <dialog> is shown in-flow) */
@media (min-width: 990px) {
  .facets { position: sticky; inset-block-start: calc(var(--header-h) + 24px); max-block-size: calc(100vh - var(--header-h) - 48px); overflow: auto; scrollbar-width: thin; padding-inline-end: 6px; }
  .facets__dialog, .facets__dialog:not([open]) {
    display: block; position: static; transform: none; inline-size: auto; block-size: auto;
    border: 0; background: transparent; max-block-size: none; opacity: 1;
  }
  .facets__dialog .dialog__head { padding-inline: 0; padding-block-start: 0; }
  .facets__dialog .dialog__body { padding: 0; overflow: visible; }
  .facets__dialog .dialog__foot { padding-inline: 0; border: 0; display: flex; gap: 0.5rem; }
  .js .facets__foot .button--primary { display: none; }
}
.facets__dialog .dialog__inner, .facets__form { display: flex; flex-direction: column; block-size: 100%; }
.facets__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.facets__group > summary { min-block-size: 52px; }
.facets__active-count { color: var(--c-accent); }
.facets__list { list-style: none; padding: 0; display: grid; gap: 0.15rem; max-block-size: 360px; overflow: auto; scrollbar-width: thin; }
.facets__option { inline-size: 100%; min-block-size: 40px; color: var(--c-text); font-size: var(--small); padding-inline: 2px; }
.facets__option:hover { color: var(--c-accent); }
.facets__option.is-disabled { opacity: 0.4; cursor: not-allowed; }
.facets__count { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--tiny); color: var(--c-muted); }
.facets__swatch { inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--swatch-img, var(--swatch)); background-size: cover; box-shadow: 0 0 0 1px var(--c-border); }
.facets__price { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.facets__hint { font-size: var(--tiny); margin-block-start: 0.5rem; }
.facets__sort-mobile { margin-block-end: 1rem; }

/* Active filters */
.active-facets__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; padding: 0; margin-block-end: 1.5rem; }

/* Grid — density is driven by custom properties; visitors can override via the density toggle */
.product-grid { list-style: none; padding: 0; row-gap: clamp(1.75rem, 3.2vw, 3rem); grid-auto-flow: row dense;
  --cols: var(--user-cols, var(--cols-d, 4));
  --cols-tablet: var(--user-cols-t, var(--cols-t, 3));
  --cols-mobile: var(--user-cols-m, var(--cols-m, 2));
}
@media (max-width: 749px) { .product-grid { column-gap: 12px; } }
.product-grid__item { min-inline-size: 0; }
.product-grid__promo { grid-column: span 2; grid-row: span 1; min-block-size: 320px; display: grid; align-items: end; }
.product-grid__promo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgb(var(--c-bg-rgb) / 0.9)); z-index: 1; }
.product-grid__promo-body { position: relative; z-index: 2; padding: clamp(1rem, 3vw, 1.75rem); display: grid; gap: 1rem; justify-items: start; }
@media (max-width: 749px) { .product-grid__promo { grid-column: 1 / -1; min-block-size: 220px; } }
.load-more { display: flex; justify-content: center; margin-block-start: 3rem; }
.js .pagination-wrap--js-hidden { display: none; }

/* Loading skeleton while filters re-render */
[data-results].is-loading-area > * { opacity: 1; }
[data-results].is-loading-area .product-grid { opacity: 0.55; }
[data-results].is-loading-area .card__media { position: relative; }
[data-results].is-loading-area .card__media::after {
  opacity: 1; background: linear-gradient(100deg, transparent 20%, rgb(var(--c-text-rgb) / 0.08) 50%, transparent 80%); background-size: 200% 100%;
  animation: shimmer 1.1s linear infinite;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* Collection list */
.collections-grid { list-style: none; padding: 0; }
.collection-tile--portrait { aspect-ratio: 4 / 5; }
.collection-tile--square { aspect-ratio: 1; }
.collection-tile--landscape { aspect-ratio: 4 / 3; }
.collection-tile { position: relative; display: grid; align-content: end; min-block-size: 240px; text-decoration: none; color: var(--c-text); }
.collection-tile::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 35%, rgb(var(--c-bg-rgb) / 0.88)); }
.collection-tile img { transition: transform var(--dur-4) var(--ease-out); }
.collection-tile:hover img { transform: scale(1.05); }
.collection-tile__body { position: relative; z-index: 2; padding: 1.4rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.collection-tile__count { color: var(--c-accent); }
.collection-tile .icon { transition: transform var(--dur-2) var(--ease-out); }
.collection-tile:hover .icon { transform: translate(3px, -3px); }

/* Search */
.search-page__form { display: flex; gap: 0.5rem; max-inline-size: 720px; margin-block: 1.5rem 2rem; }
.search-page__form .input { min-block-size: 56px; font-size: 1.1rem; }
.search-results-other { list-style: none; padding: 0; display: grid; gap: 0.5rem; margin-block-start: 2rem; }
.search-results-other a { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; background: var(--c-surface); text-decoration: none; }
.search-results-other a:hover { color: var(--c-accent); }

.search-suggest { display: grid; gap: 0.75rem; margin-block-end: 2.5rem; }
.related-grid { list-style: none; padding: 0; row-gap: 2rem; }