/* The shop.
 *
 * Product photos come from Printful, one per colourway, at whatever size they
 * render them. Every image box therefore fixes its own aspect ratio and lets the
 * picture cover it, because the alternative is a grid where each card is a
 * different height depending on what the printer happened to return. */

.st-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── The line above the grid ──────────────────────────────────────────────── */
/* Sits above the collections rail on /store, so it is the first thing read
 * after the hero and before anything priced. Measured rather than full width:
 * two sentences set across 1180px read as a banner nobody finishes. */
.st-cta {
  max-width: 680px; margin: 0 0 34px;
  font-size: 1rem; line-height: 1.7; color: var(--text-2, #3a3a48);
}

/* ── Collections rail ─────────────────────────────────────────────────────── */
.st-rooms { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.st-room {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 15px; border-radius: 8px;
  border: 1px solid rgba(20, 20, 32, .12); background: var(--card, #fff);
  font-size: .86rem; font-weight: 600; color: var(--text, #141420);
  transition: border-color .18s, box-shadow .18s;
}
.st-room:hover { border-color: var(--teal, #14C7B0); }
.st-room.on { background: var(--text, #141420); color: #fff; border-color: var(--text, #141420); }
.st-room-n { font-size: .72rem; font-weight: 500; opacity: .55; }

/* ── The way back ─────────────────────────────────────────────────────────── */
/* A real target rather than a faint link. This used to be a grey line of text
 * in the product page's right hand column, above the title and under the photo
 * once that column stacks, which is where nobody looks for the way out. */
.st-crumbs {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.st-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px; border-radius: 8px;
  border: 1px solid rgba(20, 20, 32, .14); background: var(--card, #fff);
  font-size: .84rem; font-weight: 600; color: var(--text, #141420);
  transition: border-color .18s, background .18s, transform .18s;
}
.st-back:hover { border-color: var(--teal, #14C7B0); transform: translateX(-2px); }
.st-back-arrow { font-size: 1rem; line-height: 1; opacity: .55; }
/* On the collection hero, which is the dark band. */
.st-back--dark {
  margin-bottom: 22px;
  border-color: rgba(255, 255, 255, .22); background: transparent; color: #fff;
}
.st-back--dark:hover { border-color: var(--teal, #14C7B0); background: rgba(255, 255, 255, .06); }

.st-crumb-list { display: flex; align-items: center; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; }
.st-crumb { display: inline-flex; align-items: center; font-size: .78rem; color: var(--text-3, #8A8BA0); }
.st-crumb a { color: var(--text-3, #8A8BA0); transition: color .18s; }
.st-crumb a:hover { color: var(--text, #141420); }
.st-crumb-sep { margin: 0 8px; opacity: .45; }
/* The trail is orientation, not the control. Below the first breakpoint the
 * back button is the whole job and the trail is noise on a 390px screen. */
@media (max-width: 620px) { .st-crumb-list { display: none; } }

/* ── Section headings ─────────────────────────────────────────────────────── */
.st-sec-head { margin: 8px 0 20px; }
.st-sec-h {
  font-family: var(--fh, inherit); font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800; letter-spacing: -.02em; color: var(--text, #141420); margin: 0;
}
.st-sec-p { margin: 6px 0 0; font-size: .92rem; color: var(--text-3, #6b6b7b); }

/* ── The collections, as a way in ─────────────────────────────────────────── */
/* Bigger than a product card on purpose. These are the eight decisions worth
 * making on this page; the thirty-seven products below are what you get after
 * you have made one. */
/* Two across on a phone, so eight rooms is four rows rather than eight full
 * screens before anybody reaches a product. */
.st-tiles {
  display: grid; gap: 14px; margin-bottom: 48px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 240 rather than 280 so the four rooms sit in one row of four at desktop
 * width instead of three and an orphan. It still wraps sensibly if a fifth
 * room is ever added. */
@media (min-width: 720px) {
  .st-tiles { gap: 22px; margin-bottom: 60px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
.st-tile {
  display: block; color: inherit; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(20, 20, 32, .10); background: var(--card, #fff);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.st-tile:hover {
  border-color: var(--teal, #14C7B0); transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(20, 20, 32, .08);
}
.st-tile-img { aspect-ratio: 4 / 3; background: var(--offwhite, #F9F9FB); overflow: hidden; }
.st-tile-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Four pieces from the room, hairline-separated so it reads as four things
 * rather than one wide photograph. */
/* minmax(0, 1fr) rather than 1fr on both axes. An img has an intrinsic height,
 * so a plain 1fr row takes its min-content size from the picture and the grid
 * grows past the box it is meant to fill: the bottom row was being clipped by
 * the container it overflowed. */
.st-tile-mosaic {
  display: grid; width: 100%; height: 100%; gap: 1px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  background: rgba(20, 20, 32, .07);
}
/* contain, not cover. A mockup is a garment centred on a white field, and a
 * mosaic cell is wider than it is tall, so cover crops the shoulders and hem
 * off and leaves a band of torso. Contained, the whole piece shows and the
 * letterboxing is the same white the mockup already has. */
.st-tile-mosaic img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: var(--offwhite, #F9F9FB);
}
.st-tile-body { padding: 13px 14px 16px; }
@media (min-width: 720px) { .st-tile-body { padding: 16px 18px 20px; } }
.st-tile-name { font-family: var(--fh, inherit); font-weight: 800; font-size: .95rem; letter-spacing: -.01em; line-height: 1.25; }
@media (min-width: 720px) { .st-tile-name { font-size: 1.05rem; } }
.st-tile-n {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal, #14C7B0); margin-top: 3px;
}
/* Three lines, then it stops. The intros run to four sentences and a tile that
 * reflows to nine lines destroys the grid it sits in. */
.st-tile-intro {
  margin: 8px 0 0; font-size: .8rem; line-height: 1.55; color: var(--text-2, #3a3a48);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 720px) {
  .st-tile-intro { margin-top: 9px; font-size: .86rem; line-height: 1.6; -webkit-line-clamp: 3; }
}

/* ── The grid ─────────────────────────────────────────────────────────────── */
/* Two across on a phone rather than one.
 *
 * minmax(230px, 1fr) plus the wrap's 24px of side padding means a 400px phone
 * gets a single column, so thirty-seven products is thirty-seven screens of
 * scrolling. Two columns halves that, and the mockups are square, which is the
 * case where a two-column mobile grid tests better than one. The floor rises to
 * 230px from the first breakpoint up, so nothing changes on a laptop. */
.st-grid {
  display: grid; gap: 18px 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px) {
  .st-grid { gap: 26px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
.st-card { display: block; color: inherit; }
.st-card-img {
  aspect-ratio: 1 / 1; width: 100%; border-radius: 14px; overflow: hidden;
  background: var(--offwhite, #F9F9FB); margin-bottom: 12px;
}
.st-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.st-card:hover .st-card-img img { transform: scale(1.03); }
.st-card-name { font-weight: 700; font-size: .95rem; line-height: 1.35; margin-bottom: 3px; }
.st-card-blurb { font-size: .82rem; color: var(--text-3, #6b6b7b); line-height: 1.5; margin-bottom: 6px; }
.st-card-price { font-size: .88rem; font-weight: 600; }
.st-sold { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #991b1b; }

.st-empty { padding: 60px 0; text-align: center; color: var(--text-3, #6b6b7b); }

/* ── One product ──────────────────────────────────────────────────────────── */
.st-product { display: grid; gap: 44px; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; }
@media (max-width: 860px) { .st-product { grid-template-columns: 1fr; gap: 28px; } }

.st-hero { aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: var(--offwhite, #F9F9FB); }
.st-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── The other views of the same colourway ────────────────────────────────── */
/* A strip rather than a second column: on a phone the hero already owns the
 * width, and a grid of thumbnails beside it would shrink the one picture
 * somebody actually came to look at. */
.st-shots { display: flex; flex-direction: column; gap: 12px; }
.st-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.st-shot {
  width: 72px; height: 72px; padding: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(20, 20, 32, .12); background: var(--offwhite, #F9F9FB);
  cursor: pointer; transition: border-color .18s, opacity .18s; opacity: .72;
}
.st-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-shot:hover { opacity: 1; border-color: rgba(20, 20, 32, .28); }
.st-shot.on { opacity: 1; border-color: var(--teal, #14C7B0); border-width: 2px; }

/* The colour's hex, beside its name and never instead of it. */
.st-dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 100px;
  margin-right: 7px; vertical-align: baseline;
  border: 1px solid rgba(20, 20, 32, .22);
}

/* ── What the printer says the garment is ─────────────────────────────────── */
/* <details> so the page leads with the club's own words. Somebody who wants
 * the fabric goes looking for it; somebody who does not is not made to scroll
 * past a specification sheet to reach the size picker. */
.st-spec { margin-top: 22px; border-top: 1px solid rgba(20, 20, 32, .09); padding-top: 16px; }
.st-spec-h {
  cursor: pointer; font-weight: 700; font-size: .9rem; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text, #141420);
}
.st-spec-h::-webkit-details-marker { display: none; }
.st-spec-h::after { content: '+'; font-weight: 500; opacity: .5; font-size: 1.1rem; }
.st-spec[open] > .st-spec-h::after { content: '\2212'; }
.st-spec-dl {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px;
  margin: 14px 0 0; font-size: .88rem;
}
.st-spec-dt { color: var(--text-3, #6b6b7b); }
.st-spec-dd { margin: 0; color: var(--text-2, #3a3a48); }
.st-spec-body { margin-top: 14px; }
.st-spec-p { font-size: .88rem; line-height: 1.65; color: var(--text-2, #3a3a48); margin: 0 0 8px; }

/* ── Measurements ─────────────────────────────────────────────────────────── */
/* Its own scroller: a chest, waist, length and sleeve table is wider than a
 * phone, and the alternative to scrolling this box is the page scrolling. */
.st-size-scroll { overflow-x: auto; margin-top: 14px; }
.st-size { border-collapse: collapse; font-size: .84rem; min-width: 100%; }
.st-size-th, .st-size-rh, .st-size-td {
  padding: 7px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid rgba(20, 20, 32, .08);
}
.st-size-th { font-weight: 700; color: var(--text, #141420); }
.st-size-rh { font-weight: 600; color: var(--text, #141420); }
.st-size-td { color: var(--text-2, #3a3a48); }

.st-h1 { font-family: var(--fh, inherit); font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 8px; }
.st-lede { font-size: 1rem; color: var(--text-2, #3a3a48); line-height: 1.6; margin-bottom: 16px; }
.st-price { font-size: 1.25rem; font-weight: 700; margin-bottom: 24px; }

.st-pick-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3, #6b6b7b); margin-bottom: 9px; }
.st-picks { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }

/* A colour is a word, not a swatch. Printful names them ("Heather Forest",
 * "Athletic Heather") and there is no hex to draw, so inventing a square of
 * approximate colour would be a confident lie about what arrives. */
.st-pick {
  padding: 8px 14px; border-radius: 9px; font: inherit; font-size: .84rem; font-weight: 600;
  border: 1.5px solid rgba(20, 20, 32, .14); background: transparent; color: var(--text, #141420);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.st-pick:hover:not(:disabled) { border-color: var(--teal, #14C7B0); }
.st-pick.on { background: var(--text, #141420); color: #fff; border-color: var(--text, #141420); }
.st-pick:disabled { opacity: .34; cursor: not-allowed; text-decoration: line-through; }

.st-body { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(20, 20, 32, .09);
  font-size: .95rem; line-height: 1.75; color: var(--text-2, #3a3a48); white-space: pre-wrap; }

.st-note { margin-top: 22px; font-size: .82rem; color: var(--text-3, #6b6b7b); line-height: 1.6; }

/* The old .st-back lived here, styling the grey text link that sat in the
   product page's right hand column. It was left behind when that became the
   breadcrumb pill near the top of this file, and being later in the cascade it
   was quietly winning on colour, gap, font-size and margin: the new control
   was rendering with the old link's grey. Removed rather than merged, because
   two rules for one class is how this happened. */

/* ── The practical notice ─────────────────────────────────────────────────── */
/* Lives with the products rather than in the hero. It is about the act of
 * buying, so it belongs where somebody is about to try, and in the hero it was
 * a block of small print sitting between the headline and the first thing
 * worth looking at. */
.st-notice {
  max-width: 680px; margin: 0 0 18px; padding: 12px 16px;
  border-radius: 12px; border: 1px solid rgba(20, 199, 176, .28);
  background: var(--teal-light, #E6FAF7);
  font-size: .86rem; line-height: 1.6; color: var(--text-2, #3a3a48);
}
.st-notice strong { color: var(--text, #141420); font-weight: 700; }
.st-notice a { color: var(--teal-dark, #0EAA97); font-weight: 600; }
.st-notice a:hover { text-decoration: underline; }

/* ── The shop's controls ──────────────────────────────────────────────────── */
/*
 * One row, and a drawer behind it.
 *
 * This was three stacked groups of labelled chips with every option showing at
 * once. It was 277 pixels on a laptop and 469 on a phone, spent before a single
 * product, on a page that had already spent a hero getting somebody here. The
 * row below is the shape every shop uses for the same reason.
 */
#st-shopsec { scroll-margin-top: 88px; }

.st-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  margin-bottom: 16px;
}
/* Measured rather than greedy. Search is one way in among several here, and a
 * box stretched across the page implies it is the main one. */
.st-search { flex: 0 0 240px; min-width: 0; }
.st-q {
  width: 100%; padding: 9px 13px; border-radius: 8px;
  border: 1px solid rgba(20, 20, 32, .14); background: var(--card, #fff);
  font: inherit; font-size: .9rem; color: var(--text, #141420);
}
.st-q:focus { outline: none; border-color: var(--teal, #14C7B0); box-shadow: 0 0 0 3px var(--teal-glow, rgba(20,199,176,.22)); }

/* Visually hidden, still read aloud. A search box with no label is one of the
 * most common things a screen reader cannot name. */
.st-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The row itself. One row wherever there is width for one, and on a narrow
 * screen the controls that do not fit drop to the next line rather than
 * scrolling out of sight. A control you have to discover by pushing the row
 * sideways is a control most people never find: Size, Color and Price were all
 * off the right edge of a phone. */
.st-bar {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0; flex-wrap: wrap;
}

/* Rounded rectangles, not pills. A row of lozenges reads as decoration; a
 * rectangle reads as a control, and these are controls. */
.st-bar-b {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 9px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(20, 20, 32, .14); background: var(--card, #fff);
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--text, #141420);
  transition: border-color .18s, background .18s, color .18s;
}
.st-bar-b:hover { border-color: var(--teal, #14C7B0); }
/* A filter that is doing something says so on its own button, so somebody can
 * tell at a glance why the grid is short without opening anything. */
.st-bar-b.has, .st-bar-b.open { border-color: var(--text, #141420); }
.st-bar-b--lead {
  background: var(--text, #141420); color: #fff; border-color: var(--text, #141420);
}
.st-bar-b--lead:hover { border-color: var(--teal, #14C7B0); }
.st-bar-caret {
  width: 0; height: 0; opacity: .55;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .18s;
}
.st-bar-b.open .st-bar-caret { transform: rotate(180deg); }
.st-bar-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px;
  background: var(--teal, #14C7B0); color: #08211d; font-size: .7rem; font-weight: 700;
}

/* ── The drawer ───────────────────────────────────────────────────────────── */
/* #st-filters is only the mount point now; the scrim and the panel inside it
 * are fixed to the viewport. Nothing above it in the tree carries a transform,
 * which would otherwise make "fixed" mean "fixed to that ancestor".
 *
 * Above the nav, which is 1000 and 1100 in main.css. A modal panel underneath
 * the site header loses its own title bar and close button to it, and the
 * scrim stops at the header, so the page looks half dimmed and the way out of
 * the panel is the one thing you cannot see. */
.st-filters { position: relative; z-index: 1200; }
.st-scrim { position: fixed; inset: 0; z-index: 1200; background: rgba(12, 12, 20, .45); }
.st-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1201;
  width: min(420px, 92vw); display: flex; flex-direction: column;
  background: var(--card, #fff); box-shadow: -18px 0 46px rgba(0, 0, 0, .18);
}
.st-dr-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid rgba(20, 20, 32, .10);
}
.st-dr-h { font-family: var(--fh); font-size: 1.05rem; font-weight: 700; margin: 0; }
.st-dr-x {
  border: 0; background: none; cursor: pointer; padding: 0 4px;
  font-size: 1.6rem; line-height: 1; color: var(--text-3, #8A8BA0);
}
.st-dr-x:hover { color: var(--text, #141420); }
.st-dr-body { flex: 1 1 auto; overflow-y: auto; padding: 2px 20px 14px; }
.st-dr-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-top: 1px solid rgba(20, 20, 32, .10);
  background: var(--offwhite, #F9F9FB);
}
.st-dr-done {
  flex: 0 1 auto; padding: 11px 20px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--text, #141420); color: #fff;
  font: inherit; font-size: .86rem; font-weight: 700;
}
.st-dr-done:hover { background: var(--teal-dark, #0EAA97); }

/* One section open at a time. Seven lists showing at once is the wall of chips
 * this drawer exists to put away. */
.st-acc { border-bottom: 1px solid rgba(20, 20, 32, .08); }
.st-acc-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 15px 0; border: 0; background: none; cursor: pointer;
  text-align: left; font: inherit; font-size: .88rem; font-weight: 700;
  color: var(--text, #141420);
}
.st-acc-h .st-bar-n { margin-left: 8px; }
.st-acc-i { position: relative; width: 11px; height: 11px; flex: 0 0 auto; }
.st-acc-i::before, .st-acc-i::after { content: ''; position: absolute; background: var(--text-3, #8A8BA0); }
.st-acc-i::before { left: 0; right: 0; top: 5px; height: 1.5px; }
.st-acc-i::after { top: 0; bottom: 0; left: 5px; width: 1.5px; transition: opacity .18s; }
.st-acc.open .st-acc-i::after { opacity: 0; }
.st-acc-b { padding-bottom: 16px; }

.st-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(20, 20, 32, .14); background: var(--card, #fff);
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--text, #141420);
  transition: border-color .18s, background .18s, color .18s;
}
.st-chip:hover { border-color: var(--teal, #14C7B0); }
.st-chip.on { background: var(--text, #141420); color: #fff; border-color: var(--text, #141420); }
.st-chip.on .st-dot { border-color: rgba(255, 255, 255, .5); }
.st-fchips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Sort takes exactly one answer, so it is radios. A row of chips where only
 * one may be on is a control that looks like it takes several. */
.st-opts { display: flex; flex-direction: column; }
.st-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: .86rem; color: var(--text-2, #3a3a48);
}
.st-opt.on { color: var(--text, #141420); font-weight: 600; }
.st-opt-r {
  width: 15px; height: 15px; flex: 0 0 auto; border-radius: 100px;
  border: 1.5px solid rgba(20, 20, 32, .28); transition: border-color .18s;
}
.st-opt.on .st-opt-r { border-color: var(--text, #141420); border-width: 4.5px; }

.st-clear {
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--teal-dark, #0EAA97);
}
.st-clear:hover { text-decoration: underline; }

/* The page behind a modal panel should not scroll with it. */
body.st-locked { overflow: hidden; }

/* On a phone the search takes its own line and the controls fill the width
 * under it, wrapping onto as many lines as they need. */
@media (max-width: 720px) {
  .st-toolbar { flex-wrap: wrap; gap: 10px; }
  .st-search { flex: 1 1 100%; }
  .st-bar { flex: 1 1 100%; }
}

/* #st-grid is a grid, so a loading mark dropped into it becomes one product-sized
   cell in the first column rather than the thing the grid is waiting on. */
.st-grid .dfw-load--inline { grid-column: 1 / -1; }

.st-count {
  font-size: .82rem; font-weight: 600; color: var(--text-3, #8A8BA0);
  margin-bottom: 18px;
}

/* A room tile is a control now, not a link. */
.st-tile { width: 100%; text-align: left; cursor: pointer; font: inherit; padding: 0; }
.st-tile.on { border-color: var(--text, #141420); box-shadow: 0 0 0 1px var(--text, #141420); }


/* ── The shop's own title, centred ────────────────────────────────────────── */
.st-sec-head--mid { text-align: center; margin: 34px 0 22px; }

/* ── The collections, in the hero ─────────────────────────────────────────── */
/* A showcase, not navigation: the Collection chips in the filter bar are that.
 * Sized to sit beside the hero text rather than stretch the band, because the
 * whole point of moving it here was to stop the shop starting a screen down. */
.sh-show {
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
  background: rgba(255, 255, 255, .04); padding: 14px;
}
.sh-show-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sh-show-eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--golddim, #0EAA97);
}
.sh-show-nav { display: flex; gap: 6px; }
.sh-show-arrow {
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff;
  font: inherit; font-size: .85rem; line-height: 1;
  transition: border-color .18s, background .18s;
}
.sh-show-arrow:hover { border-color: var(--gold, #14C7B0); background: rgba(255, 255, 255, .08); }

/* Every slide is here at once and the track scrolls between them, so a thumb
 * can move it and the arrows are one way in rather than the only one. Snapping
 * means a half-finished swipe still lands on a slide. */
.sh-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.sh-track::-webkit-scrollbar { display: none; }
.sh-track:focus-visible { outline: 2px solid var(--gold, #14C7B0); outline-offset: 4px; border-radius: 12px; }

/* A column, pinned to the top, because a <button> centres its own contents and
 * every slide is stretched to the height of the tallest one. The collection with
 * the shortest intro had its image sitting 22px lower than the collection with
 * the longest, so flicking through them made the whole panel bob. Nothing about
 * that is visible on one slide, which is how it shipped. */
.sh-slide {
  flex: 0 0 100%; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  width: 100%; padding: 0; text-align: left; cursor: pointer;
  background: none; border: 0; color: inherit; font: inherit;
}
/* Shorter on a phone, where this stacks under the hero text instead of sitting
 * beside it and every pixel is one the shop starts further down. */
.sh-slide-img {
  aspect-ratio: 2 / 1; border-radius: 11px; overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
@media (min-width: 960px) { .sh-slide-img { aspect-ratio: 16 / 10; } }
.sh-slide-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-slide-body { padding: 12px 2px 0; }
.sh-slide-name {
  font-family: var(--fh, inherit); font-weight: 800; font-size: 1.1rem;
  letter-spacing: -.01em; color: #fff;
}
.sh-slide-n {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--golddim, #0EAA97); margin-top: 3px;
}
/* In full. It was clamped to two lines with a reserved height, because with one
 * slide in the page at a time a longer intro changed the height of the hero
 * every few seconds as they rotated. Every slide is in the track now, so the
 * track is already as tall as the longest of them and nothing moves. The clamp
 * was only ever buying that, and it cost the end of every intro and put the
 * ellipsis somewhere different on every screen width. */
.sh-slide-intro {
  margin: 8px 0 0; font-size: .84rem; line-height: 1.6; color: rgba(255, 255, 255, .72);
}
.sh-slide:hover .sh-slide-name { color: var(--gold, #14C7B0); }

.sh-dots { display: flex; gap: 7px; margin-top: 14px; }
.sh-dot {
  width: 22px; height: 4px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  background: rgba(255, 255, 255, .22); transition: background .2s;
}
.sh-dot:hover { background: rgba(255, 255, 255, .4); }
.sh-dot.on { background: var(--gold, #14C7B0); }

/* The selected collection, shown on the slide as well as on its chip. */
.sh-slide.on .sh-slide-name { color: var(--gold, #14C7B0); }
.sh-slide.on .sh-slide-img { outline: 2px solid var(--gold, #14C7B0); outline-offset: 2px; }

/* ── Putting something in a cart ──────────────────────────────────────────── */
/*
 * The grid is where most of this gets shopped, so it is where you can buy from.
 * A card carries an Add that opens a small sheet with that product's colours and
 * sizes; the cart itself is a button that floats bottom-right and a drawer
 * behind it, so neither costs the page any height.
 */
/* A column, with the price and Add as its last row.
 *
 * Add used to be pinned to the bottom-right corner, over whatever the card
 * happened to end with. On a phone the cards are narrow, names wrap to two
 * lines and blurbs to two more, and the button landed on the words. In the flow
 * it is spaced by the layout instead of by a guess at how long the copy is.
 *
 * The link grows to fill the row's tallest card, so the price and the button
 * line up across all of them instead of stepping up and down the row. */
.st-card-wrap { display: flex; flex-direction: column; height: 100%; }
.st-card { flex: 1 1 auto; }
.st-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px;
}
.st-card-add {
  flex: 0 0 auto;
  padding: 8px 15px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(20, 20, 32, .16); background: var(--card, #fff);
  font: inherit; font-size: .8rem; font-weight: 700; color: var(--text, #141420);
  transition: background .18s, color .18s, border-color .18s;
}
.st-card-add:hover { background: var(--text, #141420); color: #fff; border-color: var(--text, #141420); }

/* The cart, floating. Bottom-right, out of the way of the nav and of the
 * controls, and on every page of the shop rather than only the grid. */
.st-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 15px; border-radius: 100px; cursor: pointer; border: 0;
  background: var(--text, #141420); color: #fff; font: inherit; font-weight: 700;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .24);
  transition: transform .18s, background .18s, opacity .18s, visibility .18s;
}
.st-fab:hover { transform: translateY(-2px); background: var(--teal-dark, #0EAA97); }
.st-fab-i { display: inline-flex; }
.st-fab-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px;
  background: var(--teal, #14C7B0); color: #08211d; font-size: .74rem; font-weight: 800;
}
@media (max-width: 720px) { .st-fab { right: 14px; bottom: 14px; } }

/* Out of the way while anything is open over the page.
 *
 * It sat on top of the filter drawer's own "Show 37 items" button, in the one
 * corner a thumb goes for, so the last thing between somebody and their
 * filtered shop was a cart button they did not mean to press. Its z-index of
 * 900 never had a chance: #st-cart below is a stacking context at 1200 and the
 * button lives inside it, so 900 only ever ordered it against its siblings.
 *
 * Keyed off the lock rather than off each panel, because every overlay in this
 * file already goes through lockPage: the filters, the cart, the size picker
 * and the payment sheet. A panel added later gets this for free, and one that
 * forgets would be leaving the page scrollable underneath itself anyway.
 *
 * Hidden rather than removed so it fades back when the panel closes, and so
 * nothing reflows: it is fixed, and visibility:hidden takes it out of the tab
 * order and stops it taking clicks. */
body.st-locked .st-fab {
  opacity: 0; visibility: hidden; transform: translateY(6px);
}

/* Same drawer as the filters, so the shop has one panel and not two designs of
 * one. Its own root, because a cart that lived inside #st-filters would be
 * rewritten every time somebody touched a filter. */
#st-cart, #st-pick { position: relative; z-index: 1200; }
.st-drawer--cart .st-dr-body { padding: 8px 20px 16px; }

.st-line { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0;
  border-bottom: 1px solid rgba(20, 20, 32, .08); }
.st-line-img {
  flex: 0 0 72px; width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  background: var(--offwhite, #F9F9FB);
}
.st-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-line-body { flex: 1 1 auto; min-width: 0; }
.st-line-name { display: block; font-weight: 700; font-size: .9rem; line-height: 1.35; color: inherit; }
.st-line-name:hover { color: var(--teal-dark, #0EAA97); }
.st-line-meta { font-size: .8rem; color: var(--text-3, #8A8BA0); margin-top: 2px; }
/* Changing your mind about a size is a different decision from not wanting the
 * thing, so it is a different control. Quiet, because it is the second thing
 * somebody wants from a line and the stepper is the first. */
.st-line-edit {
  margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--teal-dark, #0EAA97);
}
.st-line-edit:hover { text-decoration: underline; }
.st-line-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.st-line-price { font-size: .88rem; font-weight: 700; }
.st-line-x {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: 0 2px;
  font-size: 1.2rem; line-height: 1; color: var(--text-3, #8A8BA0);
}
.st-line-x:hover { color: var(--text, #141420); }

/* One control for the whole decision: the minus at one removes the line, rather
 * than stopping there and needing a second button to mean the same thing. */
.st-step { display: inline-flex; align-items: center; border: 1px solid rgba(20, 20, 32, .14); border-radius: 8px; }
.st-step-b {
  width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .95rem; color: var(--text, #141420);
}
.st-step-b:hover:not(:disabled) { color: var(--teal-dark, #0EAA97); }
.st-step-b:disabled { opacity: .3; cursor: default; }
.st-step-n { min-width: 22px; text-align: center; font-size: .85rem; font-weight: 700; }

.st-cart-empty { padding: 44px 4px; text-align: center; color: var(--text-2, #3a3a48); }
.st-cart-empty p { margin: 0; font-size: .95rem; font-weight: 600; }
.st-cart-empty-sub { margin-top: 8px !important; font-size: .84rem !important; font-weight: 400 !important;
  color: var(--text-3, #8A8BA0); line-height: 1.6; }
.st-cart-note {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
  background: var(--teal-light, #E6FAF7); font-size: .82rem; line-height: 1.6;
  color: var(--text-2, #3a3a48);
}
.st-cart-foot {
  padding: 16px 20px; border-top: 1px solid rgba(20, 20, 32, .10);
  background: var(--offwhite, #F9F9FB);
}
.st-cart-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: .86rem; color: var(--text-2, #3a3a48); padding: 3px 0;
}
/* The one row in the column that is good news, so it is allowed to look like
 * it. Not a banner and not a colour anywhere else in this panel uses. */
.st-cart-free { color: var(--teal-dark, #0EAA97); font-weight: 700; }
.st-cart-row--total {
  margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(20, 20, 32, .12);
  font-size: .95rem; color: var(--text, #141420); font-weight: 600;
}
.st-cart-row--total strong { font-size: 1.2rem; }
.st-cart-foot .st-dr-done { width: 100%; margin: 12px 0 0; }
.st-cart-foot .st-dr-done:disabled { background: rgba(20, 20, 32, .28); cursor: default; }
.st-cart-small { margin: 8px 0 0; font-size: .76rem; line-height: 1.55; color: var(--text-3, #8A8BA0); }
.st-cart-small a { color: var(--teal-dark, #0EAA97); font-weight: 600; }
.st-cart-small a:hover { text-decoration: underline; }

/* Stripe's own checkout, over the page. Taller and wider than the picker
 * because it is a card form and an address form, and it scrolls inside itself
 * rather than growing the page behind it. */
#st-pay-root { position: relative; z-index: 1200; }
.st-pay {
  position: fixed; z-index: 1201; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 24px)); max-height: min(92vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card, #fff); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.st-pay-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 16px; }
@media (max-width: 560px) {
  .st-pay {
    left: 0; right: 0; top: 0; bottom: 0; transform: none;
    width: 100%; max-height: 100%; border-radius: 0;
  }
}

/* The picker. Centred rather than a side drawer: it is one short decision about
 * one product, and a panel the height of the screen for two rows of chips
 * implies there is more of it below the fold. */
.st-sheet {
  position: fixed; z-index: 1201; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px)); max-height: min(86vh, 720px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card, #fff); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.st-sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 4px; }
.st-sheet-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-top: 1px solid rgba(20, 20, 32, .10);
  background: var(--offwhite, #F9F9FB);
}
.st-sheet-more { font-size: .82rem; font-weight: 600; color: var(--teal-dark, #0EAA97); }
.st-sheet-more:hover { text-decoration: underline; }
/* The colourway being chosen.
 *
 * Fixed height with contain rather than cover, for two reasons. The height is
 * reserved so the chips below do not jump down when a photo arrives, and
 * contain never crops: the whole point of these mockups is the placement of the
 * print, and a cover crop of a chest logo is a picture of a plain shirt.
 *
 * The panel behind it is why an image that has not loaded yet reads as loading
 * rather than as missing. */
.st-pick-shot {
  display: flex; align-items: center; justify-content: center;
  height: 210px; margin-bottom: 18px;
  border-radius: 12px; overflow: hidden;
  background: var(--offwhite, #F9F9FB);
}
.st-pick-shot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-pick-group + .st-pick-group { margin-top: 18px; }
.st-pick-price { margin-top: 18px; font-size: 1.1rem; font-weight: 700; }
/* Shown and disabled rather than removed: a size row that changes length as you
 * try colours makes somebody check whether they imagined it. */
.st-sheet .st-chip:disabled {
  opacity: .34; cursor: default; text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.st-sheet .st-chip:disabled:hover { border-color: rgba(20, 20, 32, .14); }

/* On a phone it comes up from the bottom, where a thumb is. */
@media (max-width: 560px) {
  .st-sheet {
    left: 0; right: 0; top: auto; bottom: 0; transform: none;
    width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0;
  }
  /* Shorter here. The sheet comes up from the bottom and the colour chips, the
     sizes and the price all have to stay above the fold with it. */
  .st-pick-shot { height: 160px; margin-bottom: 14px; }
}

/* The product page's own way in, under its pickers. */
.st-buy {
  display: block; width: 100%; margin: 22px 0 0; padding: 14px 20px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--text, #141420); color: #fff;
  font: inherit; font-size: .92rem; font-weight: 700;
  transition: background .18s;
}
.st-buy:hover:not(:disabled) { background: var(--teal-dark, #0EAA97); }
.st-buy:disabled { background: rgba(20, 20, 32, .28); cursor: default; }