/** Shopify CDN: Minification failed

Line 607:0 Unexpected "}"

**/
/* ==========================================================================
   WYA — base.css
   Design tokens and components from design_handoff_wya_website.
   Direction 1b (Storefront) is the homepage; 1d is the mobile breakpoint.
   Brand rules: radius 0 everywhere, no shadows, sections divided by 1px
   borders rather than whitespace.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg: #101010;              /* 1b storefront page black */
  --bg-launch: #0a0a0a;       /* 1a blackout */
  --bg-editorial: #080808;    /* 1c editorial */
  --tile: #161616;
  --tile-hover: #1c1c1c;
  --studio: #e9e7e3;          /* product-shot studio bg, from the photos */

  /* Ink */
  --fg: #f2f2f0;
  --ink-inverse: #0a0a0a;     /* text on off-white surfaces */
  --t-70: rgba(255, 255, 255, .7);
  --t-60: rgba(255, 255, 255, .6);
  --t-55: rgba(255, 255, 255, .55);
  --t-50: rgba(255, 255, 255, .5);
  --t-45: rgba(255, 255, 255, .45);   /* 4.56:1 on page black — AA floor for text */
  /* 3.84:1 — below the AA text minimum. Non-text only: borders (3:1 suffices)
     and inactive controls, which WCAG exempts. Never use for readable copy. */
  --t-40: rgba(255, 255, 255, .4);

  /* Lines */
  --border: rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .14);   /* 1c uses the heavier value */
  --border-outline: rgba(255, 255, 255, .35);  /* outlined buttons */
  --hover-wash: rgba(255, 255, 255, .08);

  /* Type */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Grotesk', ui-monospace, Menlo, monospace;

  /* Metrics */
  --gutter: 40px;
  --gap: 2px;
  --hero-h: 520px;
}

@media (max-width: 760px) {
  :root {
    --gutter: 18px;
    --hero-h: 460px;
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Sharp corners are part of the brand — never soften these. */
* { border-radius: 0 !important; }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 0;
  z-index: 100;
  background: var(--fg);
  color: var(--ink-inverse);
  padding: 12px 20px;
  font: 700 13px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.skip-link:focus { top: 0; }

/* The client lockup is white-on-pure-black; screen blending drops the black. */
.lockup { mix-blend-mode: screen; }

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */
.eyebrow {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--t-55);
}

.meta {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-45);
}

.nav-link {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .15s ease;
}
.nav-link:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  font: 700 13px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 17px 34px;
  transition: opacity .15s ease, background-color .15s ease;
}

.btn--solid {
  background: var(--fg);
  color: var(--ink-inverse);
}
.btn--solid:hover { opacity: .85; }

.btn--outline {
  border: 1px solid var(--border-outline);
  color: var(--fg);
}
.btn--outline:hover { background: var(--hover-wash); }

/* Underlined text link — used for "Read the story", "View product" */
.btn--underline {
  display: inline-flex;
  width: max-content;
  border-bottom: 2px solid var(--fg);
  padding: 0 0 6px;
  font: 700 13px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.btn--block {
  width: 100%;
  height: 52px;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */
.announcement {
  background: var(--fg);
  color: var(--ink-inverse);
  text-align: center;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 9px 16px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.header__nav {
  display: flex;
  gap: 30px;
  flex: 1;
}
.header__nav--end { justify-content: flex-end; }

.header__logo img { width: 118px; height: auto; }

/* Mobile: hamburger / lockup / cart, all on 44px hit targets */
.header__burger,
.header__cart-mobile {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.header__burger { flex-direction: column; gap: 5px; }
.header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--fg);
}

.header__cart-mobile {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .08em;
}

@media (max-width: 760px) {
  .header { padding: 16px var(--gutter); }
  .header__nav { display: none; }
  .header__logo img { width: 94px; height: auto; }
  .header__burger,
  .header__cart-mobile { display: flex; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: var(--hero-h);
  background-color: var(--bg-launch);
  overflow: hidden;
}

/* The hero photo is a real <img> so the preload scanner can find it early.
   Framing that used to come from background-position now comes from
   object-position. */
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Desktop: left-to-right scrim so type sits on the dark side. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(5, 5, 5, .85) 0%,
    rgba(5, 5, 5, .35) 55%,
    rgba(5, 5, 5, 0) 100%);
}

.hero__content {
  position: absolute;
  left: 60px;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  max-width: 520px;
}

.hero__title {
  margin: 0;
  font: 800 58px/1 var(--font-display);
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.hero__sub {
  margin: 0;
  font: 400 15px/1.6 var(--font-display);
  color: var(--t-70);
}

/* Mobile: bottom-up scrim, type anchored to the bottom, full-width CTA. */
@media (max-width: 760px) {
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(5, 5, 5, 0) 35%,
      rgba(5, 5, 5, .92) 100%);
  }
  .hero__content {
    left: 20px;
    right: 20px;
    top: auto;
    bottom: 24px;
    justify-content: flex-end;
    gap: 14px;
    max-width: none;
  }
  .hero__title { font-size: 40px; }
  .hero__sub { display: none; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .22em; color: var(--t-60); }
}

/* --------------------------------------------------------------------------
   Section header
   -------------------------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 36px var(--gutter) 20px;
}

/* The first section on the page sits lower, under the hero. */
.section-header--lead { padding-top: 56px; }

.section-header--divided { border-top: 1px solid var(--border); }

.section-header__title {
  margin: 0;
  font: 800 24px/1 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.section-header__link {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-55);
  transition: color .15s ease;
}
.section-header__link:hover { color: var(--fg); }

@media (max-width: 760px) {
  .section-header,
  .section-header--lead { padding: 28px var(--gutter) 14px; }
  .section-header__title { font-size: 18px; }
  .section-header__link { font-size: 11px; letter-spacing: .16em; }
}

/* --------------------------------------------------------------------------
   Product grid + tile
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: 20px var(--gutter) 60px;
  list-style: none;
  margin: 0;
}

@media (max-width: 760px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 var(--gutter) 28px;
  }
}

.product-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tile);
  transition: background-color .15s ease;
}
.product-tile:hover { background: var(--tile-hover); }

/* Stretched overlay link — keeps the whole tile clickable while allowing
   quick-add controls to sit above it. */
.product-tile__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-tile__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--studio);
  overflow: hidden;
  /* Flex items get min-height:auto, which lets tall content (notably Shopify's
     placeholder SVG) override aspect-ratio and stretch the box. */
  min-height: 0;
}

/* Pinned rather than flowed, so nothing the media contains can dictate the
   height of the square. */
.product-tile__media > img,
.product-tile__media > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-tile__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--fg);
  color: var(--ink-inverse);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 9px;
}

.product-tile__info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 20px;
}

.product-tile__text {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.product-tile__name {
  font: 600 13px/1.2 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.product-tile__sub {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--t-45);
}

.product-tile__price {
  font: 500 13px/1 var(--font-mono);
  white-space: nowrap;
}

/* The design canvas is 1280px. On wider monitors the tiles grow but the type
   doesn't, which reads as cramped — nudge it up so the ratio holds. */
@media (min-width: 1500px) {
  .product-tile__name { font-size: 15px; }
  .product-tile__sub { font-size: 12px; }
  .product-tile__price { font-size: 15px; }
  .product-tile__info { padding: 20px 18px 22px; }
}

/* Mobile stacks name over price and drops the colorway. */
@media (max-width: 760px) {
  .product-tile__info {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 10px 10px 12px;
  }
  .product-tile__name { font-size: 11px; }
  .product-tile__sub { display: none; }
  .product-tile__price {
    font-weight: 400;
    font-size: 11px;
    color: var(--t-50);
  }
}

/* --------------------------------------------------------------------------
   Story split
   -------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}

.story__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 70px 60px;
}

/* height:auto is load-bearing on every one of these. image_tag emits width AND
   height attributes; overriding only width in CSS leaves the height attribute
   applying, which distorts the image. */
.story__lockup {
  width: 177px;
  height: auto;
  opacity: .4;
}

.story__title {
  margin: 0;
  font: 800 32px/1.15 var(--font-display);
  text-transform: uppercase;
}

.story__text {
  margin: 0;
  font: 400 15px/1.7 var(--font-display);
  color: var(--t-60);
  max-width: 46ch;
}

.story__media {
  position: relative;
  min-height: 420px;
  background-color: var(--bg-launch);
  overflow: hidden;
}

.story__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* Mobile collapses to a centered block; the photo is dropped, per 1d. */
@media (max-width: 760px) {
  .story { grid-template-columns: 1fr; }
  .story__body {
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 34px 20px 38px;
  }
  .story__lockup { width: 130px; height: auto; }
  .story__title { font-size: 22px; line-height: 1.2; }
  .story__text { display: none; }
  .story__media { display: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px var(--gutter);
  border-top: 1px solid var(--border);
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-45);
}

.site-footer a:hover { color: var(--fg); }

@media (max-width: 760px) {
  .site-footer {
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding: 20px var(--gutter);
    font-size: 10px;
  }
}


}

/* --------------------------------------------------------------------------
   Mobile nav — <details> based, works without JavaScript
   -------------------------------------------------------------------------- */
.mobile-nav { display: none; position: relative; }

.mobile-nav > summary {
  list-style: none;
  cursor: pointer;
}
.mobile-nav > summary::-webkit-details-marker { display: none; }

.mobile-nav__panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.mobile-nav__link {
  padding: 16px 20px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.mobile-nav__link:last-child { border-bottom: 0; }

@media (max-width: 760px) {
  .mobile-nav { display: block; }
}

/* Placeholder SVGs stand in for product shots before photography lands.
   Contained rather than covered so the shape stays recognisable. */
.product-tile__placeholder {
  object-fit: contain !important;
  padding: 18%;
  background: var(--studio);
  fill: rgba(10, 10, 10, .16);
}

.header__logo-fallback {
  font: 800 20px/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-footer__social a { text-decoration: none; }

/* --------------------------------------------------------------------------
   Product tile — hover reveal, swatches, quick add
   -------------------------------------------------------------------------- */

/* Second product shot, cross-faded on hover. */
.product-tile__alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}
.product-tile:hover .product-tile__alt { opacity: 1; }

/* Colorway swatches replace the text label when a product has more than one. */
.product-tile__swatches {
  display: flex;
  gap: 5px;
}

.product-tile__swatch {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, .25);
}

/* Quick add — slides up over the foot of the image on hover. */
.product-tile__quick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0), rgba(5, 5, 5, .6));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

/* focus-within keeps quick add usable for keyboard users, who never hover. */
.product-tile:hover .product-tile__quick,
.product-tile:focus-within .product-tile__quick {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.product-tile__quick-form { display: flex; }
.product-tile__quick-form--wide { flex: 1; }

.product-tile__size {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 34px;
  height: 30px;
  padding: 0 9px;
  background: var(--fg);
  color: var(--ink-inverse);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .15s ease;
}
.product-tile__size:hover { opacity: .85; }

.product-tile__size--wide { flex: 1; }

.product-tile__size--disabled {
  background: rgba(255, 255, 255, .18);
  color: var(--t-70);
  cursor: default;
}

/* Touch devices never hover, so quick add would be unreachable — send those
   shoppers to the product page instead. */
@media (max-width: 760px), (hover: none) {
  .product-tile__quick { display: none; }
}

/* --------------------------------------------------------------------------
   Footer — expanded
   -------------------------------------------------------------------------- */
.site-footer {
  display: block;
  padding: 0;
  border-top: 1px solid var(--border);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 48px var(--gutter);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer__heading {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg);
}

.site-footer__col a {
  font: 400 12px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-55);
  transition: color .15s ease;
}
.site-footer__col a:hover { color: var(--fg); }

.site-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--gutter);
  border-top: 1px solid var(--border);
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-45);
}

.site-footer__payments {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-footer__payments svg {
  width: 34px;
  height: 22px;
  opacity: .55;
}

@media (max-width: 760px) {
  .site-footer__cols {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px var(--gutter);
  }
  .site-footer__bar {
    flex-direction: column;
    gap: 14px;
    text-align: center;
    font-size: 10px;
  }
}

/* Announcement messages rotate via the hidden attribute; this guards against a
   later display rule overriding it. */
.announcement__item { display: inline; }
.announcement__item[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Page head — collection, search, page, list-collections
   -------------------------------------------------------------------------- */
.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 56px var(--gutter) 24px;
}

.page-head__title {
  margin: 0;
  font: 800 32px/1 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.page-head__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-45);
}

.page-head__desc {
  padding: 0 var(--gutter) 8px;
  font: 400 15px/1.7 var(--font-display);
  color: var(--t-60);
  max-width: 60ch;
}

@media (max-width: 760px) {
  .page-head { padding: 28px var(--gutter) 16px; }
  .page-head__title { font-size: 22px; }
}

/* Sort control — a native select, restyled to the brand. */
.sort {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sort::after {
  content: '';
  position: absolute;
  right: 12px;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--t-55);
  border-bottom: 1px solid var(--t-55);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.sort select {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 11px 34px 11px 13px;
  cursor: pointer;
}
.sort select option { background: var(--bg); color: var(--fg); }

/* --------------------------------------------------------------------------
   Rich text — policy pages, story copy
   -------------------------------------------------------------------------- */
.rte {
  padding: 0 var(--gutter) 72px;
  font: 400 15px/1.75 var(--font-display);
  color: var(--t-70);
  max-width: 72ch;
}

.rte h2,
.rte h3 {
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 36px 0 12px;
}
.rte h2 { font: 800 22px/1.2 var(--font-display); }
.rte h3 { font: 700 16px/1.2 var(--font-display); }

.rte p { margin: 0 0 16px; }
.rte ul, .rte ol { margin: 0 0 16px; padding-left: 20px; }
.rte li { margin-bottom: 8px; }
.rte a { border-bottom: 1px solid var(--t-55); }
.rte a:hover { border-bottom-color: var(--fg); }
.rte img { margin: 24px 0; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--gap);
  padding: 8px var(--gutter) 72px;
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  background: var(--tile);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .08em;
  transition: background-color .15s ease;
}
.pagination a:hover { background: var(--tile-hover); }
.pagination .is-current { background: var(--fg); color: var(--ink-inverse); }

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */
.search-form {
  display: flex;
  gap: var(--gap);
  padding: 0 var(--gutter) 28px;
}

.search-form__input {
  flex: 1;
  min-width: 0;
  background: var(--tile);
  border: 1px solid var(--border);
  color: var(--fg);
  font: 400 14px/1 var(--font-display);
  padding: 0 16px;
  height: 52px;
}
.search-form__input::placeholder { color: var(--t-45); }

.search-form__submit {
  height: 52px;
  padding: 0 28px;
  background: var(--fg);
  color: var(--ink-inverse);
  font: 700 12px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.search-form__submit:hover { opacity: .85; }

/* --------------------------------------------------------------------------
   Collection cards (list-collections)
   -------------------------------------------------------------------------- */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding: 8px var(--gutter) 72px;
  list-style: none;
  margin: 0;
}

.collection-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--tile);
  overflow: hidden;
}

.collection-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .7;
  transition: opacity .25s ease, transform .35s ease;
}
.collection-card:hover img { opacity: .9; transform: scale(1.03); }

.collection-card__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0), rgba(5, 5, 5, .8));
  font: 800 20px/1 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .collection-card__label { font-size: 14px; padding: 14px; }
}

/* --------------------------------------------------------------------------
   Empty states / 404
   -------------------------------------------------------------------------- */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 46vh;
  padding: 100px var(--gutter);
  text-align: center;
}

.state__title {
  margin: 0;
  font: 800 40px/1 var(--font-display);
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.state__text {
  margin: 0;
  font: 400 15px/1.7 var(--font-display);
  color: var(--t-60);
  max-width: 46ch;
}

@media (max-width: 760px) {
  .state { padding: 64px var(--gutter); min-height: 40vh; }
  .state__title { font-size: 28px; }
}

/* --------------------------------------------------------------------------
   Forms — account, login, register, addresses
   -------------------------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 440px;
  padding: 0 var(--gutter) 72px;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form__label {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-55);
}

.form__input {
  height: 52px;
  background: var(--tile);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0 14px;
  font: 400 14px/1 var(--font-display);
  width: 100%;
}
.form__input:focus { border-color: var(--t-55); outline: none; }
.form__input::placeholder { color: var(--t-45); }

.form__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.form__link {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-55);
}
.form__link:hover { color: var(--fg); }

.form__errors {
  padding: 14px 16px;
  border: 1px solid rgba(255, 90, 90, .5);
  color: #ff8b8b;
  font: 400 13px/1.5 var(--font-display);
}
.form__errors ul { margin: 0; padding-left: 18px; }

/* --------------------------------------------------------------------------
   Tables — order history
   -------------------------------------------------------------------------- */
.table-wrap {
  padding: 0 var(--gutter) 72px;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font: 400 13px/1.4 var(--font-mono);
}

.table th {
  text-align: left;
  padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--border);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-45);
  white-space: nowrap;
}

.table td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--border);
  color: var(--t-70);
}

.table a { border-bottom: 1px solid var(--t-55); color: var(--fg); }

/* Account sub-nav */
.account-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 var(--gutter) 32px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-55);
}
.account-bar a:hover { color: var(--fg); }

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */
.product {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--gap);
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.product__gallery {
  display: grid;
  gap: var(--gap);
  background: var(--border);
}

.product__media {
  position: relative;
  background: var(--studio);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  min-height: 0;
}
.product__media > img,
.product__media > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product__info {
  position: sticky;
  top: 84px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 56px 48px;
  background: var(--bg);
}

.product__title {
  margin: 0;
  font: 800 34px/1.05 var(--font-display);
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.product__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font: 500 18px/1 var(--font-mono);
}

.product__price del {
  color: var(--t-45);
  font-size: 14px;
}

.product__colorway {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-55);
}

/* The product form is a single flex child of .product__info, so that container's
   gap applies around the form, not between the groups inside it. Without this the
   swatches of one group sit flush against the next group's label. */
.product__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Variant pickers — buttons, not dropdowns. One click instead of two. */
.variant-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.variant-group__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-55);
}

.variant-group__value { color: var(--fg); }

.variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.variant-options input { position: absolute; opacity: 0; pointer-events: none; }

.variant-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  color: var(--t-70);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.variant-option:hover { border-color: var(--t-55); color: var(--fg); }

input:checked + .variant-option {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--ink-inverse);
}

input:focus-visible + .variant-option {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* Unavailable combinations stay visible but struck through — shoppers need to
   see that a size exists before learning it's out of stock. */
.variant-option--unavailable {
  color: var(--t-40);
  text-decoration: line-through;
  border-style: dashed;
}

/* Colour swatches in the picker */
.variant-option--swatch {
  min-width: 0;
  width: 44px;
  padding: 0;
  position: relative;
}
.variant-option--swatch span {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, .3);
}
input:checked + .variant-option--swatch {
  background: transparent;
  border-color: var(--fg);
}

.product__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product__submit {
  width: 100%;
  height: 56px;
  background: var(--fg);
  color: var(--ink-inverse);
  font: 700 13px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: opacity .15s ease;
}
.product__submit:hover:not(:disabled) { opacity: .85; }
.product__submit:disabled {
  background: rgba(255, 255, 255, .18);
  color: var(--t-55);
  cursor: not-allowed;
}

.product__desc {
  padding: 0;
  font: 400 14px/1.75 var(--font-display);
  color: var(--t-60);
  border-top: 1px solid var(--border);
  padding-top: 22px;
  max-width: none;
}
.product__desc p { margin: 0 0 12px; }

.size-guide-open {
  align-self: flex-start;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-55);
  border-bottom: 1px solid var(--t-40);
  padding-bottom: 4px;
  cursor: pointer;
}
.size-guide-open:hover { color: var(--fg); border-bottom-color: var(--fg); }

@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; }
  .product__info {
    position: static;
    padding: 32px var(--gutter) 44px;
    gap: 18px;
  }
  .product__title { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   Size guide dialog
   -------------------------------------------------------------------------- */
.size-guide {
  width: min(680px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
}
.size-guide::backdrop { background: rgba(5, 5, 5, .8); }

.size-guide__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  font: 800 16px/1 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.size-guide__close {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-55);
}
.size-guide__close:hover { color: var(--fg); }

.size-guide__body {
  padding: 24px;
  overflow-x: auto;
  max-height: 70vh;
}

.size-guide__body table {
  width: 100%;
  border-collapse: collapse;
  font: 400 13px/1.4 var(--font-mono);
  color: var(--t-70);
}
.size-guide__body th,
.size-guide__body td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.size-guide__body th {
  color: var(--fg);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Cart drawer
   -------------------------------------------------------------------------- */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
}
.cart-drawer[open],
.cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, .7);
  opacity: 0;
  transition: opacity .25s ease;
}
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }

.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform .28s ease;
}
.cart-drawer.is-open .cart-drawer__panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cart-drawer__panel,
  .cart-drawer__backdrop { transition: none; }
}

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  font: 800 16px/1 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cart-drawer__close {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-55);
}
.cart-drawer__close:hover { color: var(--fg); }

.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}

.cart-line__media {
  width: 80px;
  aspect-ratio: 1 / 1;
  background: var(--studio);
  overflow: hidden;
}
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }

.cart-line__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cart-line__name {
  font: 600 12px/1.3 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cart-line__variant {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--t-45);
}

.cart-line__remove {
  font: 400 10px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-45);
  border-bottom: 1px solid var(--t-40);
  padding-bottom: 2px;
  align-self: flex-start;
}
.cart-line__remove:hover { color: var(--fg); }

.cart-line__price {
  font: 500 12px/1 var(--font-mono);
  white-space: nowrap;
}

.cart-drawer__foot {
  border-top: 1px solid var(--border);
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 500 13px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cart-drawer__note {
  font: 400 10px/1.5 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-45);
}

.cart-drawer__checkout {
  width: 100%;
  height: 56px;
  background: var(--fg);
  color: var(--ink-inverse);
  font: 700 13px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-drawer__checkout:hover { opacity: .85; }

.cart-drawer__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 24px;
  text-align: center;
}

/* App blocks (reviews, upsells, size charts) inject their own markup — give
   them separation without assuming anything about their internals. */
.product__app-block:not(:empty) {
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

/* Shopify's accelerated checkout container. It ships its own styles; we only
   control spacing and kill the rounded corners its buttons default to. */
.shopify-payment-button { margin-top: 2px; }
.shopify-payment-button__button { min-height: 56px; }

/* --------------------------------------------------------------------------
   Password page — store locked, no nav
   -------------------------------------------------------------------------- */
body.template-password { background: var(--bg-launch); }

.password {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 100vh;
  padding: 60px var(--gutter);
  text-align: center;
}

.password__lockup {
  width: min(520px, 80vw);
  height: auto;
}

.password__message {
  padding: 0;
  max-width: 48ch;
  font: 400 15px/1.7 var(--font-display);
  color: var(--t-60);
}

.password__form {
  display: flex;
  gap: var(--gap);
  width: min(420px, 100%);
}
.password__form .form__input { flex: 1; min-width: 0; }
.password__form .btn { padding: 0 26px; height: 52px; }
.password__form .form__errors { flex: 1; }

@media (max-width: 480px) {
  .password__form { flex-direction: column; }
  .password__form .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Gift card — served from checkout.shopify.com, no theme chrome
   -------------------------------------------------------------------------- */
body.template-gift-card { background: var(--bg-launch); }

.gift-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 440px;
  margin: 0 auto;
  padding: 64px 24px;
  text-align: center;
}

.gift-card__value {
  margin: 0;
  font: 800 48px/1 var(--font-display);
  letter-spacing: -.01em;
}

.gift-card__code {
  margin: 0;
  padding: 16px 22px;
  border: 1px dashed var(--border-outline);
  font: 500 20px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */
.article__media {
  margin: 0 0 32px;
  background: var(--tile);
}
.article__media img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: cover;
}

/* Quantity stepper in the cart drawer */
.qty {
  display: inline-flex;
  align-items: stretch;
  align-self: flex-start;
  border: 1px solid var(--border);
}

.qty__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  color: var(--fg);
  font: 500 14px/1 var(--font-mono);
  transition: background-color .15s ease, color .15s ease;
}
.qty__btn:hover:not(:disabled) { background: var(--hover-wash); }
.qty__btn:disabled { color: var(--t-40); cursor: not-allowed; }

.qty__value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 0 2px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font: 500 12px/1 var(--font-mono);
}

/* While a change is in flight the whole stepper is inert, so rapid clicks
   cannot queue overlapping requests that land out of order. */
.qty[aria-busy='true'] { opacity: .5; pointer-events: none; }

/* Large quantity stepper — product page */
.qty--lg .qty__btn { width: 44px; height: 44px; font-size: 16px; }

.qty__input {
  width: 56px;
  height: 44px;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font: 500 13px/1 var(--font-mono);
  text-align: center;
  -moz-appearance: textfield;
}
/* Hide the native spinner where our buttons replace it. Without JS the buttons
   are inert, so the spinner is restored in that case below. */
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.form__input--area {
  height: auto;
  padding: 14px;
  line-height: 1.6;
  resize: vertical;
  font-family: var(--font-display);
}

.form__optional {
  color: var(--t-45);
  letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   Editorial hero (1c) — story page
   -------------------------------------------------------------------------- */
.editorial {
  position: relative;
  height: var(--editorial-h, 720px);
  background: var(--bg-editorial);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.editorial__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

/* Scrims both ends: the top one keeps the overlaid nav legible, the bottom one
   grounds the wordmark. */
.editorial__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5, 5, 5, .55) 0%,
    rgba(5, 5, 5, 0) 30%,
    rgba(5, 5, 5, 0) 55%,
    rgba(5, 5, 5, .9) 100%);
}

/* The mark is wider than its container and pulled past both edges, so it is
   cropped by the viewport. That crop is the design, not an accident. */
.editorial__lockup {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.editorial__lockup img {
  display: block;
  width: var(--lockup-scale, 110%);
  height: auto;
  margin: 0 calc((100% - var(--lockup-scale, 110%)) / 2) -2%;
  /* Nudged with transform rather than margin so the crop geometry stays intact --
     changing the margin would also change how much is cut off each side. */
  transform: translateX(var(--lockup-shift, 0%));
}

@media (max-width: 760px) {
  .editorial { height: min(var(--editorial-h, 720px), 60vh); }
  /* 110% barely reads as a crop at 390px, so push it further. */
  .editorial__lockup img { width: 145%; height: auto; margin: 0 -22.5% -2%; }
}

/* --------------------------------------------------------------------------
   Transparent header over the editorial hero
   --------------------------------------------------------------------------
   The header stays position:sticky exactly as elsewhere. Here it simply loses
   its background and border, and the hero is pulled up behind it by the
   measured header offset. No position switching, so no layout shift.
   -------------------------------------------------------------------------- */
.template-suffix-story .header {
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color .25s ease, border-color .25s ease;
}

.template-suffix-story .header.is-solid {
  background: var(--bg);
  border-bottom-color: var(--border);
}

.template-suffix-story .editorial {
  margin-top: calc(-1 * var(--header-offset, 0px));
}

/* Push hero content clear of the overlaid nav. */
.template-suffix-story .editorial__lockup {
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Statement split (1c) — 60/40
   -------------------------------------------------------------------------- */
.statement {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--gap);
  background: var(--border-strong);
  border-top: 1px solid var(--border-strong);
}

.statement__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 80px 60px;
  background: var(--bg-editorial);
}

.statement__title {
  margin: 0;
  font: 800 52px/1.05 var(--font-display);
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.statement__text {
  margin: 0;
  font: 400 16px/1.75 var(--font-display);
  color: var(--t-60);
  max-width: 52ch;
}

.statement__media {
  position: relative;
  min-height: 420px;
  background: var(--bg-launch);
  overflow: hidden;
}

.statement__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

@media (max-width: 900px) {
  .statement { grid-template-columns: 1fr; }
  .statement__body { padding: 40px var(--gutter) 44px; gap: 18px; }
  .statement__title { font-size: 30px; }
  .statement__media { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   Rich text — reusable long-form copy
   -------------------------------------------------------------------------- */
.rich-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 72px var(--gutter);
  border-top: 1px solid var(--border);
}

.rich-text--narrow { max-width: 68ch; }
.rich-text--wide { max-width: 100ch; }

.rich-text__title {
  margin: 0;
  font: 800 32px/1.15 var(--font-display);
  text-transform: uppercase;
}

/* The shared .rte block already carries gutters; inside this section the
   section supplies them instead. */
.rich-text .rte {
  padding: 0;
  max-width: none;
}

@media (max-width: 760px) {
  .rich-text { padding: 40px var(--gutter) 48px; }
  .rich-text__title { font-size: 22px; }
}

/* 404 recovery: search box and category links */
.state__search {
  width: min(440px, 100%);
  padding: 0;
}

.state__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 22px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.state__links a {
  color: var(--t-55);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color .15s ease, border-color .15s ease;
}
.state__links a:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

/* --------------------------------------------------------------------------
   Predictive search
   -------------------------------------------------------------------------- */
.psearch {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.psearch[hidden] { display: none; }

.psearch__form {
  display: flex;
  gap: var(--gap);
  padding: 16px var(--gutter);
}

.psearch__input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  background: var(--tile);
  border: 1px solid var(--border);
  color: var(--fg);
  font: 400 15px/1 var(--font-display);
}
.psearch__input::placeholder { color: var(--t-45); }
.psearch__input:focus { border-color: var(--t-55); outline: none; }

.psearch__submit,
.psearch__close {
  height: 52px;
  padding: 0 22px;
  font: 700 12px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.psearch__submit { background: var(--fg); color: var(--ink-inverse); }
.psearch__submit:hover { opacity: .85; }

.psearch__close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--t-55);
}
.psearch__close:hover { color: var(--fg); background: var(--hover-wash); }

.psearch__results:empty { display: none; }

.psearch__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

.psearch__item {
  border-bottom: 1px solid var(--border);
}

/* aria-selected is set by the script as the user arrows through. Styling the
   attribute rather than a class keeps the visual and the accessible state in
   lockstep — they cannot drift apart. */
.psearch__item[aria-selected='true'] { background: var(--tile-hover); }

.psearch__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px var(--gutter);
}
.psearch__link:hover { background: var(--tile); }

.psearch__media {
  flex: none;
  width: 52px;
  aspect-ratio: 1 / 1;
  background: var(--studio);
  overflow: hidden;
}
.psearch__media img { width: 100%; height: 100%; object-fit: cover; }

.psearch__link--page { padding-left: var(--gutter); }

.psearch__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.psearch__name {
  font: 600 13px/1.2 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.psearch__meta {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--t-45);
}

.psearch__all,
.psearch__empty {
  display: block;
  padding: 16px var(--gutter) 20px;
  border-top: 1px solid var(--border);
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-55);
}
.psearch__all:hover { color: var(--fg); }

/* On the /search page the panel is part of the flow, not an overlay. */
.psearch__results--inline { padding: 0 0 28px; }
[data-psearch-inline] { position: relative; }
[data-psearch-inline] .psearch__list { border: 1px solid var(--border); }

@media (max-width: 760px) {
  .psearch__form { flex-wrap: wrap; }
  .psearch__input { flex: 1 1 100%; }
  .psearch__submit, .psearch__close { flex: 1; }
  .psearch__list { max-height: 50vh; }
}

/* Image swatches, when Shopify supplies one instead of a flat colour. */
.product-tile__swatch--image,
.variant-option__swatch-image {
  background-size: cover;
  background-position: center;
}
.variant-option__swatch-image {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, .3);
}