/* Runway shop: page CSS shared by every page of the site, on the system's tokens. Only the shop's own
   parts live here: the bag word in the bar, section heights on the inner pages, the composed hero
   picture, product cards, the collection bar, the product page, the designer index, the bag and the
   search box. Everything else is system.css. */

/* ---------------------------------------------------------------- the bar: the bag word stays on every width */
.nav__bag { gap: var(--s-2); }
.nav__bag [data-bag-count] { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--surface); font: 500 var(--t-label)/1 var(--font-text); font-variant-numeric: tabular-nums; }
.nav__bag.has-items [data-bag-count] { background: var(--accent); color: var(--accent-ink, #0a0a0a); }
@media (max-width: 1023px) {
  .nav:not(.is-open) .nav__actions > .nav__bag { display: inline-flex; }
  .nav:not(.is-open) .nav__actions { gap: var(--s-2); }
}
@media (max-width: 639px) { .nav:not(.is-open) .nav__actions > .btn--primary { display: none; } }

/* ---------------------------------------------------------------- inner pages: sections in whole screens
   build.py gives each section its screens on a desktop (--sd), a tablet (--st) and a phone (--sp); a
   section holds them and grows past them (more pieces shown, a long size guide) rather than overlap. */
main[data-flow] > .section { --h: var(--sd, 1); --hm: var(--sp, var(--sd, 1)); height: auto; min-height: calc(var(--h) * 100vh); min-height: calc(var(--h) * 100svh); }
main[data-flow] > .section > .wrap { height: auto; }
@media (min-width: 640px) and (max-width: 1279px) { main[data-flow] > .section { --h: var(--st, var(--sd, 1)); } }
@media (max-width: 639px) { main[data-flow] > .section { min-height: calc(var(--hm) * 100vh); min-height: calc(var(--hm) * 100lvh); } }

/* the close's button takes the page's one button size where the slab would read as a band */
@media (min-width: 640px) and (max-width: 1023px) {
  footer.closing .closing__cta.close--type > .btn--xl { align-self: flex-start; width: auto; height: var(--btn-h); font: 500 var(--t-body)/1 var(--font-text); letter-spacing: 0; }
}

/* ---------------------------------------------------------------- the hero's picture: three photographs composed
   into one (_build/lookbooks.py), on the .wrap's lines and ending 24px above the fold, as on the home page */
#hero .hero__stage:has(> picture) { margin-inline: 0; margin-bottom: calc(var(--s-5) - var(--hpadb, 64px)); border-radius: var(--r-lg); }
#hero .hero__stage > picture { position: absolute; inset: 0; }
#hero .hero__stage > picture > img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 640px) and (max-width: 1023px) { #hero .hero__stage:has(> picture) { margin-bottom: calc(90px - var(--hpadb, 64px)); } }
@media (max-width: 639px) { #hero .hero__stage:has(> picture) { aspect-ratio: 1 / 1; margin-bottom: 0; } }

/* ---------------------------------------------------------------- breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); color: var(--muted); font-size: var(--t-small); }
.crumbs a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs > li { display: flex; gap: var(--s-2); }
.crumbs > li + li::before { content: "/"; color: var(--line-strong); }

/* ---------------------------------------------------------------- product cards */
.tile--product { --tile-ratio: 2 / 3; gap: var(--s-3); }
.tile--product .tile__media > img { position: absolute; inset: 0; }
.tile__media > img.is-cutout { object-fit: contain; padding: 7% 9%; }
.tile--product .tile__media > img + img { opacity: 0; transition: opacity 320ms var(--ease), transform 600ms var(--ease); }
.tile--product:is(:hover, :focus-visible) .tile__media > img + img { opacity: 1; }
.tile--product .tile__facts { margin-top: 0; }
.tile--product .tile__head { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.tile--product .tile__head > h3 { font-size: var(--t-body); font-weight: 400; line-height: 1.4; }
.tile--product .tile__price { font-weight: 500; }
.tile--product .tile__price s { margin-left: var(--s-2); color: var(--muted); font-weight: 400; }
.tile__media > .badge { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 1; }
.tile__media > .badge--quiet { background: var(--bg); color: var(--ink); }

/* a product grid: four across on a desktop, three on a tablet, two on a phone; never one card across a row */
.grid.plp-grid { row-gap: var(--s-7); }
@media (min-width: 640px) and (max-width: 1023px) { .grid.plp-grid > .tile { grid-column: auto / span 4 !important; } }
@media (max-width: 639px) { .grid.plp-grid > .tile { grid-column: auto / span 6 !important; } .grid.plp-grid { row-gap: var(--s-6); } }
/* three of a kind (labels, more pieces): three across down to a tablet, the first two on a phone */
@media (min-width: 640px) and (max-width: 1023px) { .grid.three-up > .tile { grid-column: auto / span 4 !important; } }
@media (max-width: 639px) { .grid.three-up > .tile { grid-column: auto / span 6 !important; } .grid.three-up > .tile:nth-child(3) { display: none; } }
.rel-grid .tile--product { --tile-ratio: 4 / 5; }
/* a phone and a small desktop: three-of-a-kind cards taller, so the row fills its screen */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1279px) { .grid.three-up > .tile { --tile-ratio: 2 / 3; } }
/* a label with three pieces or fewer: wider cards, square, so the row holds one screen */
.plp-grid > .tile--product:is(.span-4, .span-6) { --tile-ratio: 1 / 1; }

/* ---------------------------------------------------------------- the collection bar: categories, filters, sort */
/* two rows on the content's left line: the categories, then the filters and the sort */
.plp-bar { display: grid; justify-items: start; gap: var(--s-4); margin-bottom: var(--s-6); }
.tab[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tab .muted { margin-left: var(--s-2); color: inherit; font-weight: 400; }
.plp-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.select { position: relative; display: inline-flex; }
.select select { appearance: none; height: var(--btn-h-sm); padding: 0 36px 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  background: var(--bg); color: var(--ink); font: 500 var(--t-small)/1 var(--font-text); cursor: pointer; max-width: 220px;
  transition: border-color var(--dur) var(--ease); }
.select select:hover { border-color: var(--ink); }
.select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.plp-cats-select { display: none; }
@media (max-width: 639px) {
  .plp-cats { display: none; }
  .plp-cats-select { display: inline-flex; }
  .plp-tools { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .plp-tools .select, .plp-tools select { width: 100%; max-width: none; font-size: var(--t-body); }
}
.plp-foot { display: grid; justify-items: center; gap: var(--s-4); margin-top: var(--s-7); }
.plp-empty { padding: var(--s-8) 0; }

/* ---------------------------------------------------------------- the product page: the buy box beside two photographs */
.hero__media.pdp-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); overflow: visible; background: none; border-radius: 0; }
.pdp-gallery > .frame { height: 100%; min-height: 0; background: var(--surface); border-radius: var(--r-lg); }
.pdp-gallery > .frame::before { content: none; }
.pdp-gallery > .frame:only-child { grid-column: 1 / -1; }
.pdp-gallery .frame__img.is-cutout { object-fit: contain; padding: 6% 8%; }
.pdp-info { display: grid; gap: var(--s-5); align-content: start; }
.pdp-info h1 { font-size: var(--t-h2); }
main[data-pdp] .section h2 { font-size: var(--t-h3); }
.pdp-brand { font-weight: 500; }
.pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); font-size: var(--t-lead); font-weight: 500; font-variant-numeric: tabular-nums; }
.pdp-price s { color: var(--muted); font-weight: 400; }
.pdp-colour { display: flex; align-items: center; gap: var(--s-2); }
.swatch { width: 16px; height: 16px; border-radius: 999px; background: var(--c, var(--surface)); box-shadow: inset 0 0 0 1px var(--line-strong); flex: none; }
.sizes { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.sizes legend { display: flex; justify-content: space-between; width: 100%; padding: 0; margin-bottom: var(--s-3); font-size: var(--t-small); font-weight: 500; }
.sizes__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.size { position: relative; }
.size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.size span { display: inline-grid; place-items: center; min-width: 52px; height: var(--btn-h); padding: 0 var(--s-4); border: 1px solid var(--line-strong);
  border-radius: var(--r-btn); font-weight: 500; font-variant-numeric: tabular-nums; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.size:hover span { border-color: var(--ink); }
.size input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.size input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.size input:disabled + span { color: var(--muted); text-decoration: line-through; border-style: dashed; cursor: not-allowed; }
.pdp-buy { display: grid; gap: var(--s-3); }
.pdp-buy .btn { width: 100%; }
.pdp-buy [data-buy-note] { min-height: 1.5em; font-size: var(--t-small); color: var(--ink); }
.pdp-buy [data-buy-note] a { font-weight: 500; }
.pdp-copy { display: grid; gap: var(--s-4); max-width: 62ch; }
.pdp-copy .t-lead { font-weight: 500; }
.size-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--t-body); }
.size-table th, .size-table td { text-align: left; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--line); }
.size-table thead th { font-size: var(--t-label); font-weight: 500; color: var(--muted); }
.size-table tbody th { font-weight: 500; }
@media (max-width: 639px) {
  .hero__media.pdp-gallery { grid-template-columns: 1fr; }
  .pdp-gallery > .frame:nth-child(2) { display: none; }
  .pdp-info { gap: var(--s-4); }
  .pdp-info .pdp-colour { display: none; }
}

/* ---------------------------------------------------------------- photographs in frames */
.photo-sq { --ratio: 80%; }
.photo-tall { --ratio: 125%; }
.photo-wall { --ratio: 133%; }
.photo-side { --ratio: 90%; }
#conditions .tile--portrait { --tile-ratio: 1 / 1; }
:is(.photo-sq, .photo-tall, .photo-wall, .photo-side) { background: var(--surface); }
:is(.photo-sq, .photo-tall, .photo-wall, .photo-side) > img.is-cutout { object-fit: contain; padding: 6% 8%; }
@media (min-width: 1024px) and (max-width: 1279px) { .photo-sq { --ratio: 100%; } }
@media (min-width: 640px) and (max-width: 1023px) {
  :is(.photo-sq, .photo-tall, .photo-side) { --ratio: 75%; }
  .photo-grid > .frame { grid-column: auto / span 4 !important; }
}
@media (max-width: 639px) {
  .photo-grid > .frame:first-child { grid-column: 1 / -1 !important; }
  .photo-grid > .frame:nth-child(n + 2) { display: none; }
  #refund-questions .photo-sq { --ratio: 60%; }
}

/* the arrow look's text-link secondary: its words start on the column line; a heading row's link on a phone
   takes its own line under the heading, on the content's left line */
main[data-flow] .btn-row > .btn--secondary { padding-inline: 0; }
@media (max-width: 639px) { main[data-flow] .section-head--row > .link { flex-basis: 100%; } }

/* ---------------------------------------------------------------- spec rows on the inner pages: names in ink, long values wrap */
main[data-flow] .rows--spec .rows__name { color: var(--ink); }
main[data-flow] .rows__value { white-space: normal; text-align: right; }
@media (max-width: 639px) {
  main[data-flow] .rows > li { grid-template-columns: minmax(0, 1fr); }
  main[data-flow] .rows__value { grid-column: 1; grid-row: auto; text-align: left; }
}

/* ---------------------------------------------------------------- designers: the A to Z with counts */
.search-field { position: relative; display: block; max-width: 480px; }
.search-field input { width: 100%; height: 48px; padding: 0 var(--s-4) 0 44px; border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1 var(--font-text); transition: border-color var(--dur) var(--ease); }
.search-field input:hover, .search-field input:focus { border-color: var(--ink); outline: none; }
.search-field svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.az { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
.az li { border-bottom: 1px solid var(--line); }
.az a { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; font-weight: 500; text-decoration: none; color: var(--ink);
  transition: color var(--dur) var(--ease); }
.az a:hover { color: var(--action); }
.az a span:last-child { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the bag */
.bag-lines { display: grid; }
.bag-line { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); align-items: start; }
.bag-line:first-child { padding-top: 0; }
.bag-line__img { display: block; aspect-ratio: 2 / 3; border-radius: var(--r-md); overflow: clip; background: var(--surface); }
.bag-line__img img { width: 100%; height: 100%; object-fit: cover; }
.bag-line__img img.is-cutout { object-fit: contain; padding: 6%; }
.bag-line__main { display: grid; gap: var(--s-1); }
.bag-line__main a { font-weight: 500; text-decoration: none; color: var(--ink); }
.bag-line__ctl { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-btn); height: var(--btn-h-sm); }
.qty button { width: 36px; height: 100%; border: 0; background: none; color: var(--ink); font: 500 18px/1 var(--font-text); cursor: pointer; }
.qty button:disabled { color: var(--muted); cursor: not-allowed; }
.qty output { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.text-btn { border: 0; background: none; padding: 0; color: var(--ink); font: 500 var(--t-small)/1.4 var(--font-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bag-line__price { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.bag-sum { display: grid; gap: var(--s-5); }
.bag-sum .btn { width: 100%; }
.form-note { font-size: var(--t-small); }
.form-note[data-state="error"] { color: #b42318; }
@media (max-width: 639px) { .bag-line { grid-template-columns: 80px 1fr; } .bag-line__price { grid-column: 2; text-align: left; } }

/* ---------------------------------------------------------------- help pages: numbered steps */
.steps { display: grid; counter-reset: step; }
.steps > li { display: grid; gap: var(--s-3); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.steps > li:first-child { padding-top: 0; }
.steps > li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink, #0a0a0a); font-weight: 500; font-variant-numeric: tabular-nums; }
.steps h3 { font: 500 var(--t-lead)/1.35 var(--font-text); margin-bottom: var(--s-2); }
.form .field select { appearance: auto; }

/* ---------------------------------------------------------------- before and without the script */
[hidden] { display: none !important; }
@media (scripting: enabled) {
  html:not(.js-shop) [data-plp] .plp-grid > .tile:nth-child(n + 9) { display: none; }
  html:not(.js-shop) [data-plp-empty] { display: none; }
}
@media (scripting: enabled) and (min-width: 640px) and (max-width: 1023px) { html:not(.js-shop) [data-plp] .plp-grid > .tile:nth-child(9) { display: grid; } }
@media (scripting: enabled) and (max-width: 639px) { html:not(.js-shop) [data-plp] .plp-grid > .tile:nth-child(n + 7) { display: none; } }
@media (scripting: none) { .plp-foot, .plp-tools, .plp-cats { display: none; } }

/* a button that cannot act yet (an empty bag, a piece sold out) reads as resting, not as the next step */
.btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }