/* ==========================================================================
   Shop listing — header, sticky filter bar, grid, editorial cells, next link
   ========================================================================== */

/* ---------------------------------------------------------------- Header */
.shop-head { padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 96px)); padding-bottom: clamp(48px, 6vw, 96px); }
.shop-head__meta { display: flex; justify-content: space-between; gap: 16px; }
.shop-head__title { margin: clamp(12px, 2vw, 28px) 0 0; font-family: var(--serif); font-weight: 400; line-height: .82; letter-spacing: -.04em; display: flex; flex-wrap: wrap; align-items: baseline; }
.shop-head__title--big { font-size: clamp(88px, 19vw, 340px); }
.shop-head__title--long { font-size: clamp(72px, 13vw, 240px); }
.shop-head__title--new { font-size: clamp(72px, 14vw, 250px); }
.shop-head__title--all { font-size: clamp(72px, 15vw, 270px); }
.shop-head__title--search { font-size: clamp(56px, 9vw, 160px); }
.shop-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 32px clamp(32px, 5vw, 96px); margin-top: clamp(20px, 3vw, 40px); }
.shop-head__statement { flex: 1 1 260px; max-width: 380px; }
.shop-head__media { flex: 2 1 520px; max-width: 960px; position: relative; z-index: 2; margin-top: calc(-1 * clamp(0px, 6vw, 110px)); }
.shop-head__img { aspect-ratio: 16 / 9; }
.shop-head__img .media__inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- Sticky bar */
.shop-bar { position: sticky; top: var(--nav-h); z-index: 40; transition: top .6s var(--ease); }
.shop-bar.is-top { top: 0; }
.shop-bar__row { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; padding: 0 var(--gutter); background: var(--bg); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.shop-bar__tabs { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); overflow-x: auto; height: 52px; }
.shop-tab { flex: none; background: none; border: 0; padding: 6px 0; font-size: 13px; color: var(--muted); cursor: pointer; background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size .5s var(--ease), color .3s; }
.shop-tab:hover { color: var(--ink); }
.shop-tab.is-on { color: var(--ink); background-size: 100% 1px; }
.shop-bar__tools { flex: none; display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); height: 52px; }
.shop-bar__count { letter-spacing: .06em; }
.shop-bar__btn { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; }
.shop-bar__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; border: 1px solid var(--ink); font-size: 10px; font-variant-numeric: tabular-nums; }
.shop-bar__badge.is-on { background: var(--ink); color: var(--bg); }
.shop-bar__view { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.shop-bar__view button { padding: 8px 2px; font-size: 13px; color: var(--disabled); }
.shop-bar__view button.is-on { color: var(--ink); }

.shop-sort { position: relative; }
.shop-sort__menu { position: absolute; right: 0; top: calc(100% + 9px); width: 210px; background: var(--bg); border: 1px solid var(--line); clip-path: inset(0 0 100% 0); pointer-events: none; visibility: hidden; transition: clip-path .45s var(--ease-io), visibility 0s linear .45s; display: flex; flex-direction: column; padding: 8px 0; }
.shop-sort__menu.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; visibility: visible; transition: clip-path .45s var(--ease-io), visibility 0s; }
.shop-sort__menu button { display: flex; justify-content: space-between; background: none; border: 0; padding: 10px 16px; font-size: 13px; color: var(--ink); cursor: pointer; text-align: left; }
.shop-sort__menu button:hover { background: rgba(18, 19, 21, .05); }

.shop-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; background: var(--bg); border-bottom: 1px solid var(--line); clip-path: inset(0 0 100% 0); pointer-events: none; visibility: hidden; transition: clip-path .65s var(--ease-io), visibility 0s linear .65s; max-height: 70vh; overflow-y: auto; }
.shop-panel.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; visibility: visible; transition: clip-path .65s var(--ease-io), visibility 0s; }
.shop-panel__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px clamp(24px, 3vw, 48px); padding: 32px var(--gutter) 24px; }
.shop-group { display: flex; flex-direction: column; gap: 2px; }
.shop-group .eyebrow { margin-bottom: 10px; }
.shop-check { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 8px 0; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left; }
.shop-check.is-dim { color: var(--disabled); }
.shop-check__box { position: relative; flex: none; width: 13px; height: 13px; border: 1px solid var(--ink); }
.shop-check__box span { position: absolute; inset: 2px; background: var(--ink); transform: scale(0); transition: transform .3s var(--ease-spring); }
.shop-check[aria-checked="true"] .shop-check__box span { transform: scale(1); }
.shop-check__l { flex: 1; }
.shop-check__n { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.shop-panel__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px var(--gutter) 24px; font-size: 13px; }
.shop-panel__show { height: 48px; padding: 0 26px; font-size: 13px; }

/* ---------------------------------------------------------------- Grid */
.shop-grid-wrap { padding-top: 24px; padding-bottom: clamp(80px, 10vw, 160px); min-height: 60vh; }
.shop-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
.shop-chip { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; font-size: 12px; color: var(--ink); cursor: pointer; transition: border-color .3s; }
.shop-chip:hover { border-color: var(--ink); }
.shop-chip span { color: var(--muted); }
.shop-chips__clear { padding: 8px; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.shop-empty { padding: clamp(48px, 8vw, 120px) 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.shop-empty[hidden], .shop-chips[hidden], .shop-more[hidden] { display: none; }
.shop-empty .serif { font-size: clamp(40px, 5vw, 80px); line-height: 1; }
.shop-empty .btn-pill { height: 48px; padding: 0 26px; font-size: 13px; }

.shop-grid { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-flow: dense; column-gap: clamp(12px, 1.6vw, 24px); row-gap: clamp(32px, 3.4vw, 52px); transition: opacity .3s, transform .5s var(--ease); }
.shop-grid.is-swapping { opacity: 0; transform: translateY(10px); }
@media (max-width: 759px) { .shop-grid { --cols: 2 !important; } }
.shop-cell { min-width: 0; }
.shop-cell[hidden] { display: none !important; }
.shop-cell--wide { grid-column: span 2; }

/* Editorial cells */
.shop-ed-img { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.shop-ed-img .media { flex: 1; min-height: 280px; background: var(--hatch-m); }
.shop-ed-quote { height: 100%; min-height: 320px; background: var(--dark); color: var(--on-dark); padding: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.shop-ed-quote .eyebrow { color: var(--on-dark-muted); }
.shop-ed-quote .serif { font-size: clamp(34px, 3.6vw, 64px); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.shop-ed-quote__by { font-size: 13px; color: var(--on-dark-body); }
.shop-ed-feature { display: flex; flex-direction: column; gap: 14px; height: 100%; color: var(--ink); }
.shop-ed-feature .media { flex: 1; min-height: 300px; }
.shop-ed-feature .media img { transition: transform 1.4s var(--ease); }
.shop-ed-feature:hover .media img { transform: scale(1.03); }
.shop-ed-feature__tag { position: absolute; left: 14px; top: 14px; z-index: 1; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-body); }
.shop-ed-feature__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
.shop-ed-feature__meta .serif { font-size: clamp(28px, 2.6vw, 40px); line-height: 1; }

/* Load more */
.shop-more { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: clamp(56px, 6vw, 96px); }
.shop-more .eyebrow { letter-spacing: .06em; }
.shop-more__bar { width: 200px; height: 1px; background: var(--line); }
.shop-more__bar span { display: block; height: 1px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s; }
.shop-more .btn-pill { margin-top: 8px; font-size: 13px; padding: 0 30px; }

/* ---------------------------------------------------------------- Next collection */
.shop-next { padding-bottom: clamp(80px, 10vw, 140px); }
.shop-next__link { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-top: 20px; color: var(--ink); }
.shop-next__text { display: flex; flex-direction: column; gap: clamp(12px, 2vw, 24px); }
.shop-next__title { display: flex; align-items: baseline; font-family: var(--serif); font-size: clamp(64px, 11vw, 190px); line-height: .85; letter-spacing: -.035em; transition: transform .8s var(--ease); }
.shop-next__arrow { font-size: .45em; margin-left: .2em; opacity: .25; transition: opacity .5s; }
.shop-next__img { width: clamp(160px, 22vw, 340px); aspect-ratio: 4 / 5; clip-path: inset(12% 12% 12% 12%); transition: clip-path .9s var(--ease-io); }
.shop-next__link:hover .shop-next__title, .shop-next__link:focus-visible .shop-next__title { transform: translateX(16px); }
.shop-next__link:hover .shop-next__arrow, .shop-next__link:focus-visible .shop-next__arrow { opacity: 1; }
.shop-next__link:hover .shop-next__img, .shop-next__link:focus-visible .shop-next__img { clip-path: inset(0 0 0 0); }

@media (max-width: 759px) {
  .shop-bar__tools { width: 100%; justify-content: space-between; border-top: 1px solid var(--line-soft); }
  .shop-head__media { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-grid, .shop-next__title, .shop-next__img, .shop-panel, .shop-sort__menu { transition: none; }
}