/* ==========================================================================
   GLOW — Collection page
   Split banner · sub-collection rail · sticky toolbar · collapsible
   filter sidebar (drawer on mobile) · density-switchable grid
   ========================================================================== */

:root { --toolbar-h: 60px; --filters-w: 264px; }
.page-collection .header.is-scrolled { box-shadow: none; }

/* ---- Banner ------------------------------------------------------------- */
.c-hero { background: var(--c-bone); border-bottom: 1px solid var(--color-border); }
.c-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(28px, 3.6vw, 48px); }
.c-hero__title { font: 400 clamp(46px, 5.4vw, 80px)/.98 var(--font-display); letter-spacing: -.02em; color: var(--c-ink); }
.c-hero__title em { font-style: italic; }
.c-hero__desc { max-width: 480px; margin-top: var(--sp-4); font-size: 15.5px; }
.c-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: var(--sp-5); font-size: 13px; color: var(--c-ink); }
.c-hero__facts li { display: inline-flex; align-items: center; gap: 6px; }
.c-hero__facts li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--c-line-strong); margin-right: 14px; }
.c-hero__facts .ico { color: var(--c-amber); }
.c-hero__media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: var(--tint-sand); }
.c-hero__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.c-hero__media:hover img { transform: scale(1.03); }
.c-hero__tag {
  position: absolute; left: 14px; bottom: 14px; right: 14px; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-md); background: rgba(253, 251, 248, .92); backdrop-filter: blur(8px);
  font-size: 13.5px; font-weight: 500; color: var(--c-ink);
}
.c-hero__tag .eyebrow { margin: 0; color: var(--c-amber-deep); }
.c-hero__tag .ico { margin-left: auto; transition: transform var(--dur) var(--ease-out); }
.c-hero__media:hover .c-hero__tag .ico { transform: translateX(3px); }

/* ---- Sub-collection rail ----------------------------------------------- */
.c-subnav { padding-block: var(--sp-5) 0; }
.c-subnav__list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.sub {
  flex: none; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 6px;
  border-radius: var(--r-pill); border: 1px solid var(--color-border); background: var(--c-porcelain);
  font-size: 13.5px; color: var(--c-ink); white-space: nowrap; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.sub:hover { border-color: var(--c-line-strong); }
.sub.is-active { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.sub__thumb { width: 36px; height: 36px; border-radius: 50%; background: var(--tint); overflow: hidden; display: grid; place-items: center; }
.sub__thumb .pa { width: 130%; height: 130%; margin-top: 18%; }
.sub__n { font-size: 11.5px; color: var(--color-muted); }

/* ---- Toolbar ------------------------------------------------------------ */
.c-toolbar {
  position: sticky; top: var(--header-h); z-index: 30; margin-top: var(--sp-5);
  background: rgba(248, 245, 240, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--color-border); transition: box-shadow var(--dur);
}
.c-toolbar.is-stuck { box-shadow: 0 10px 24px -20px rgba(31, 27, 24, .55); }
.c-toolbar__inner { height: var(--toolbar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.c-toolbar__left, .c-toolbar__right { display: flex; align-items: center; gap: 10px; }
.tb-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1px solid var(--c-line-strong); background: var(--c-porcelain);
  font-size: 13px; font-weight: 500; color: var(--c-ink); white-space: nowrap; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.tb-btn:hover { border-color: var(--c-ink); }
.tb-filter[aria-expanded="true"] { background: var(--c-ink); color: var(--c-ivory); border-color: var(--c-ink); }
.tb-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--c-amber); color: #fff; font-size: 10.5px; font-weight: 600; }
.tb-count[hidden] { display: none; }
.tb-results { font-size: 13px; color: var(--color-muted); margin-left: 6px; }
.tb-results b { color: var(--c-ink); font-weight: 600; }

.sort { position: relative; }
.sort__label { color: var(--color-muted); font-weight: 400; }
.sort__btn .ico { transition: transform var(--dur); }
.sort.is-open .sort__btn .ico { transform: rotate(180deg); }
.sort__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 230px; padding: 6px;
  background: var(--c-porcelain); border: 1px solid var(--color-border); border-radius: var(--r-md); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all var(--dur) var(--ease-out);
}
.sort.is-open .sort__menu { opacity: 1; visibility: visible; transform: none; }
.sort__menu button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--c-ink-2); text-align: left; }
.sort__menu button:hover { background: var(--c-bone); color: var(--c-ink); }
.sort__menu button[aria-selected="true"] { color: var(--c-ink); font-weight: 500; }
.sort__menu button .ico { opacity: 0; }
.sort__menu button[aria-selected="true"] .ico { opacity: 1; }

.density { display: flex; gap: 2px; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--color-border); }
.density button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--c-line-strong); transition: color var(--dur-fast), background var(--dur-fast); }
.density button:hover { color: var(--c-ink-3); }
.density button.is-active { color: var(--c-ink); background: var(--c-bone); }
.density .ico { width: 18px; height: 18px; }
.m-only { display: none !important; }

/* ---- Layout + filter sidebar ------------------------------------------- */
.c-layout {
  display: grid; grid-template-columns: var(--filters-w) minmax(0, 1fr); column-gap: 44px;
  padding-top: var(--sp-6); padding-bottom: var(--section-y);
  transition: grid-template-columns var(--dur-slow) var(--ease-out), column-gap var(--dur-slow) var(--ease-out);
}
.c-layout:not(.is-filters-open) { grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }
.filters { min-width: 0; transition: opacity var(--dur) var(--ease-out), visibility 0s; }
.c-layout:not(.is-filters-open) .filters { opacity: 0; visibility: hidden; transition: opacity var(--dur-fast), visibility 0s linear var(--dur); }
.filters__inner {
  position: sticky; top: calc(var(--header-h) + var(--toolbar-h) + 20px); width: var(--filters-w);
  max-height: calc(100vh - var(--header-h) - var(--toolbar-h) - 40px); overflow-y: auto; overscroll-behavior: contain;
  padding-right: 10px; margin-right: -10px; scrollbar-width: thin; scrollbar-color: var(--c-line-strong) transparent;
  transition: transform var(--dur-slow) var(--ease-out);
}
.c-layout:not(.is-filters-open) .filters__inner { transform: translateX(-20px); }
.filters__head, .filters__foot { display: none; }

.fswitch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 16px; border-bottom: 1px solid var(--color-border); font-size: 14px; font-weight: 500; color: var(--c-ink); cursor: pointer; }
.fswitch input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 38px; height: 22px; flex: none; border-radius: var(--r-pill); background: var(--c-sand); transition: background var(--dur); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease-out); }
.fswitch input:checked + .switch { background: var(--c-ink); }
.fswitch input:checked + .switch::after { transform: translateX(16px); }
.fswitch input:focus-visible + .switch { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.fgroup { border-bottom: 1px solid var(--color-border); }
.fgroup summary {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 0; cursor: pointer; list-style: none;
  font: 600 var(--fs-xs)/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink);
}
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary .ico { transition: transform var(--dur) var(--ease-out); color: var(--c-ink-3); }
.fgroup[open] summary .ico { transform: rotate(180deg); }
.fgroup__n { font-style: normal; color: var(--c-amber); margin-left: 6px; }
.fgroup__body { display: grid; gap: 1px; padding-bottom: 18px; }

.fopt { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 6px 0; font-size: 14px; cursor: pointer; transition: opacity var(--dur-fast); }
.fopt input { position: absolute; opacity: 0; pointer-events: none; }
.fopt__label { transition: color var(--dur-fast); }
.fopt:hover .fopt__label { color: var(--c-ink); }
.fopt__count { font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.fopt.is-disabled { opacity: .38; pointer-events: none; }
.fopt.is-extra { display: none; }
.fgroup.is-expanded .fopt.is-extra { display: grid; }
.fbox { width: 18px; height: 18px; border-radius: 3px; border: 1px solid var(--c-line-strong); background: #fff; display: grid; place-items: center; color: transparent; transition: all var(--dur-fast); }
.fbox .ico { width: 12px; height: 12px; stroke-width: 2.2; }
.fbox--radio { border-radius: 50%; }
.fopt input:checked ~ .fbox { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.fopt input:checked ~ .fbox--radio { background: #fff; box-shadow: inset 0 0 0 4px var(--c-ink); }
.fopt input:checked ~ .fopt__label { color: var(--c-ink); font-weight: 500; }
.fopt input:focus-visible ~ .fbox { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fopt .stars { margin-right: 6px; }
.fmore { justify-self: start; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

.fswatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fswatch { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: var(--r-md); border: 1px solid transparent; font-size: 12.5px; color: var(--c-ink); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
@media (hover: hover) { .fswatch:hover { background: var(--c-bone); } }
.fswatch input { position: absolute; opacity: 0; pointer-events: none; }
.fswatch__dot { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0, color-mix(in srgb, var(--c) 55%, #fff) 22%, var(--c) 62%, color-mix(in srgb, var(--c) 82%, #000) 100%); box-shadow: 0 4px 10px -4px rgba(31, 27, 24, .35), inset 0 0 0 1px rgba(31, 27, 24, .06); transition: transform var(--dur) var(--ease-out); }
.fswatch:hover .fswatch__dot { transform: scale(1.06); }
.fswatch em { font-style: normal; font-size: 11px; color: var(--color-muted); margin-top: -4px; }
.fswatch input:checked ~ .fswatch__dot { box-shadow: 0 0 0 2px var(--c-ivory), 0 0 0 3px var(--c-ink); }
.fswatch:has(input:checked) { background: var(--c-bone); }
.fswatch input:focus-visible ~ .fswatch__dot { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.fswatch.is-disabled { opacity: .35; pointer-events: none; }

.fpills { display: flex; flex-wrap: wrap; gap: 6px; }
.fpill { position: relative; cursor: pointer; }
.fpill input { position: absolute; opacity: 0; pointer-events: none; }
.fpill span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--c-line-strong); font-size: 13px; color: var(--c-ink); transition: all var(--dur-fast); }
.fpill:hover span { border-color: var(--c-ink); }
.fpill input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-ivory); }
.fpill input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fpill.is-disabled { opacity: .38; pointer-events: none; }

.fprice { padding: 4px 2px 0; }
.fprice__track { position: relative; height: 2px; margin: 12px 9px 22px; background: var(--c-line-strong); border-radius: 2px; }
.fprice__fill { position: absolute; top: 0; bottom: 0; background: var(--c-ink); border-radius: 2px; }
.fprice__track input { position: absolute; left: -9px; right: -9px; top: -9px; width: calc(100% + 18px); height: 20px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.fprice__track input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid var(--c-ink); box-shadow: var(--shadow-xs); cursor: grab; pointer-events: auto; }
.fprice__track input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1.5px solid var(--c-ink); cursor: grab; pointer-events: auto; }
.fprice__track input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fprice__inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font-size: 12.5px; color: var(--color-muted); }
.fprice__inputs label { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--c-line-strong); background: #fff; color: var(--c-ink-3); }
.fprice__inputs label:focus-within { border-color: var(--c-ink); }
.fprice__inputs input { width: 100%; border: 0; background: none; font-size: 14px; color: var(--c-ink); -moz-appearance: textfield; }
.fprice__inputs input:focus { outline: none; }
.fprice__inputs input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ---- Active chips ------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--sp-5); }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 14px; border-radius: var(--r-pill); background: var(--c-bone); border: 1px solid var(--color-border); font-size: 13px; color: var(--c-ink); transition: background var(--dur-fast), border-color var(--dur-fast); animation: rise .3s var(--ease-out); }
.chip:hover { background: var(--c-sand); }
.chip .ico { width: 14px; height: 14px; color: var(--c-ink-3); }
.chip--clear { background: none; border: 0; padding: 0 6px; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.chip--clear:hover { background: none; color: var(--c-amber); }

/* ---- Grid --------------------------------------------------------------- */
.c-grid {
  --cols: 3;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-flow: row dense;
  gap: clamp(28px, 3vw, 44px) var(--grid-gap);
  transition: opacity var(--dur) var(--ease-out);
}
.c-grid.is-loading { opacity: .3; pointer-events: none; }
.c-grid > * { animation: rise .55s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 12) * 35ms); }
.c-grid[data-cols="4"] .card__title { font-size: 14px; }
.c-grid[data-cols="4"] .card__quick { font-size: 10.5px; letter-spacing: .08em; }
.c-grid[data-cols="4"] .card__quick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-grid[data-cols="2"] .card__title { font-size: 16.5px; }
.c-grid[data-cols="2"] .card__v .pa { width: 74%; height: 80%; }

/* Promo tiles inside grid */
.c-promo { position: relative; grid-column: span 2; display: flex; align-items: flex-end; min-height: 100%; border-radius: var(--r-md); overflow: hidden; color: #fff; isolation: isolate; }
.c-promo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.c-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(20deg, rgba(25, 18, 12, .72) 0%, rgba(25, 18, 12, .2) 50%, rgba(25, 18, 12, 0) 75%); }
.c-promo:hover img { transform: scale(1.04); }
.c-promo__body { padding: clamp(20px, 2.6vw, 36px); display: grid; gap: 10px; justify-items: start; max-width: 440px; }
.c-promo__body .eyebrow { margin: 0; }
.c-promo__title { font: 400 clamp(28px, 2.8vw, 40px)/1.02 var(--font-display); }
.c-promo__title em { font-style: italic; }
.c-promo .btn { margin-top: 6px; }

.c-quiz { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 26px); border-radius: var(--r-md); background: var(--c-sage-soft); color: var(--c-ink); overflow: hidden; }
.c-quiz .eyebrow { margin: 0; color: var(--c-ink-2); }
.c-quiz .eyebrow .ico { color: var(--c-sage); }
.c-quiz__title { font: 400 clamp(24px, 2.2vw, 30px)/1.05 var(--font-display); }
.c-quiz p { font-size: 13.5px; color: var(--c-ink-2); }
.c-quiz__art { flex: 1; min-height: 120px; display: grid; place-items: end center; margin-inline: -10px; }
.c-quiz__art .pa { width: 100%; max-height: 190px; }
.c-quiz .btn { align-self: stretch; }

/* ---- Load more / empty -------------------------------------------------- */
.c-more { display: grid; justify-items: center; gap: 12px; margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.c-more[hidden] { display: none; }
.c-more p { font-size: 13px; color: var(--color-muted); }
.c-more p b { color: var(--c-ink); font-weight: 600; }
.c-more__bar { width: 220px; height: 2px; border-radius: 2px; background: var(--c-line); overflow: hidden; }
.c-more__bar span { display: block; height: 100%; background: var(--c-ink); transition: width var(--dur-slow) var(--ease-out); }
.c-more .btn { margin-top: 6px; min-width: 220px; }

.c-empty { display: grid; justify-items: center; gap: 10px; padding: var(--sp-10) var(--sp-4); text-align: center; border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg); }
.c-empty[hidden] { display: none; }
.c-empty__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c-bone); color: var(--c-ink-3); }
.c-empty__title { font: 400 30px/1.1 var(--font-display); color: var(--c-ink); }
.c-empty p { font-size: 14px; max-width: 360px; }
.c-empty .btn { margin-top: 8px; }

/* ---- Collection info / FAQ --------------------------------------------- */
.c-info { border-top: 1px solid var(--color-border); }
.c-info__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.c-info__copy .section-title { margin-bottom: var(--sp-5); }
.c-info__copy p { font-size: 15px; margin-bottom: var(--sp-4); max-width: 520px; }
.c-info__copy .link-arrow { margin-top: var(--sp-2); }
.c-info .usp { border-top: 1px solid var(--color-border); }

/* ---- Quick view --------------------------------------------------------- */
.qv { grid-template-columns: minmax(0, 1fr); width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.qv__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.qv__media { position: relative; min-height: 460px; background: var(--tint); }
.qv__slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.qv__slide.is-active { opacity: 1; }
.qv__slide .pa { width: 76%; height: 84%; }
.qv__dots { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: flex; gap: 6px; }
.qv__dots button { width: 22px; height: 3px; border-radius: 3px; background: rgba(31, 27, 24, .2); transition: background var(--dur); }
.qv__dots button.is-active { background: var(--c-ink); }
.qv__info { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 3.4vw, 40px); }
.qv__title { font: 400 clamp(30px, 3vw, 40px)/1.02 var(--font-display); color: var(--c-ink); }
.qv__price { font-size: 18px; font-weight: 600; color: var(--c-ink); }
.qv__price s { font-size: 14px; font-weight: 400; color: var(--color-muted); margin-left: 6px; }
.qv__desc { font-size: 14.5px; }
.qv__meta, .qv__ship { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-muted); }
.qv__meta .ico, .qv__ship .ico { color: var(--c-amber); }
.qv .link-arrow { justify-self: start; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  :root { --filters-w: 240px; }
  .c-layout { column-gap: 32px; }
}

@media (max-width: 1023px) {
  .c-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .c-hero__media { aspect-ratio: 21 / 9; }
  .c-layout, .c-layout:not(.is-filters-open) { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .tb-filter[aria-expanded="true"] { background: var(--c-porcelain); color: var(--c-ink); border-color: var(--c-line-strong); }

  /* Filters become an off-canvas drawer */
  .filters, .c-layout:not(.is-filters-open) .filters {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-drawer); width: min(400px, 90vw);
    display: flex; flex-direction: column; background: var(--c-porcelain); opacity: 1;
    transform: translateX(-100%); visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }
  .filters.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .filters__inner, .c-layout:not(.is-filters-open) .filters__inner { position: static; width: auto; max-height: none; flex: 1; margin: 0; padding: 8px 20px 20px; transform: none; }
  .filters__head { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--color-border); flex: none; }
  .filters__head p { font: 400 24px/1 var(--font-display); color: var(--c-ink); }
  .filters__foot .btn { min-width: 0; padding: 0 14px; }
  .filters__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; padding: 14px 20px 20px; border-top: 1px solid var(--color-border); flex: none; }

  .c-grid { --cols: 2; }
  .c-promo { grid-column: span 2; aspect-ratio: 16 / 9; min-height: 0; }
  .qv__body { grid-template-columns: minmax(0, 1fr); }
  .qv__media { min-height: 340px; }
}

@media (max-width: 767px) {
  :root { --toolbar-h: 56px; }
  .c-hero__inner { padding-block: 24px; gap: 20px; }
  .c-hero__media { display: none; }
  .crumbs { margin-bottom: var(--sp-3); }
  .c-hero__desc { font-size: 14.5px; }
  .c-subnav { padding-top: var(--sp-4); }
  .c-subnav .container { padding-right: 0; }
  .c-subnav__list { padding-right: var(--gutter); }
  .c-toolbar { margin-top: var(--sp-4); }
  .tb-results, .sort__label, .d-only { display: none !important; }
  .m-only { display: grid !important; }
  .tb-btn { padding: 0 14px; }
  .density { padding-left: 6px; }
  .c-toolbar__right { gap: 6px; }
  .sort__menu { right: -46px; }
  .c-grid { row-gap: 28px; column-gap: 10px; }
  .c-grid[data-cols="2"] .card__title { font-size: 14px; }
  .c-grid[data-cols="2"] .card__meta { display: none; }
  .c-grid[data-cols="2"] .card__sizes { display: none; }
  .c-grid[data-cols="1"] .c-promo, .c-grid[data-cols="1"] .c-quiz { grid-column: span 1; }
  .c-grid[data-cols="1"] .c-promo { aspect-ratio: 4 / 5; }
  .c-promo { aspect-ratio: 4 / 3; }
  .c-info__grid { grid-template-columns: minmax(0, 1fr); }
  .qv__media { min-height: 280px; }
}