/* ============================================================================
   Mindprint — the storefront layer.

   The two gallery screens ported from the design system
   (design-system/screens/pattern-gallery.html, garment-gallery.html): hero,
   chip row, the pattern wall, the garment shelves + pattern
   picker, and the prompt dock. (The wall's old row-expander dossier died with
   D83 — a tile now opens the details panel in pattern-browser.css.) Class names and rules are the screens',
   verbatim, so the renders stay the target; what changed is only what porting
   demands — tokens come from tokens.css (never redefined; the screens' local
   --mp-line-2 is the token --mp-line-soft, the mapping header-bar.css
   established), the header bar itself lives in header-bar.css, and loose
   generic names the screens leave at page scope are scoped under their
   components so this file can share a page with app.css.
   ========================================================================== */

/* ══ Shared scaffolding: wrap, hero, chip row ══ */

.wrap {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3.5vw, 52px);
}

.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: clamp(28px, 4.5vh, 52px) 0 8px;
}

.hero .eyebrow {
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  color: var(--mp-mute);
  margin-bottom: 12px;
}

.hero .eyebrow b { color: var(--mp-peach); font-weight: 400; }

.hero h1 {
  font-family: var(--mp-sans);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  font-size: clamp(34px, 4.4vw, 62px);
  margin: 0;
}

.hero .sub {
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  color: var(--mp-mute);
  line-height: 2;
  text-align: right;
  margin-left: auto;
  min-width: 0;
  flex: 0 1 auto;
}

.hero .sub b { color: var(--mp-dim); font-weight: 400; }

.hero .subline { display: block; }

/* The design hides the whole sub on a narrow screen, because both its lines were prose. One of
   them is not any more: it carries the gallery's picker (D69), and a phone that arrives from the
   fitting room already dressed — /patterns?garment=…, /products?pattern=… — would otherwise have
   no way to see what it is wearing, let alone change it. So the narrow layout drops the prose
   line and keeps the line the control lives on. */
@media (max-width: 720px) {
  .hero .subline.hint { display: none; }

  .hero .sub {
    text-align: left;
    margin-left: 0;
    line-height: 1.9;
    /* The menu's containing block, and wide enough to be one: the panel below spans the content
       column rather than whatever width this line's text happened to need. */
    position: relative;
    width: 100%;
  }

  /* The design hangs the menu from the button's right edge, which keeps it on screen only while
     the button is near the right of the line. On a phone it is not: this layout is left-aligned,
     so the button sits against the left margin and a 230px menu hanging leftwards off it runs
     straight off the screen — the first third of every garment's name with it.

     So on a phone the menu stops hanging from the button at all. `position: static` on the wrap
     hands it to the sub-line above, and it drops out of that as a panel across the content column:
     always on screen wherever the line happens to wrap, and easier to hit besides. */
  .hero .pat-wrap { position: static; }

  .hero .pat-menu {
    left: 0;
    right: 0;
    max-width: none;
  }

  /* A long garment title wraps inside the panel rather than widening it. */
  .hero .pat-opt { white-space: normal; text-align: left; }
}

/* Sticky filter/toolbar row under the bar. */
.filters,
.toolbar {
  position: sticky;
  top: var(--admin-bar-h, 66px);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0 14px;
  background: var(--mp-black);
}

.chiprow {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  min-width: 0;
  flex: 1;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
  margin: -2px;
}

.chiprow.fade-r { mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.chiprow.fade-l { mask-image: linear-gradient(90deg, transparent, #000 36px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); }
.chiprow.fade-l.fade-r { mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.chiprow::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--mp-r-pill);
  background: var(--mp-raise);
  border: 1px solid var(--mp-line-soft);
  color: var(--mp-dim);
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.chip:hover { color: var(--mp-ink); border-color: rgba(255, 255, 255, .30); }

.chip.on {
  background: var(--mp-pink);
  border-color: transparent;
  color: var(--mp-ink-on-pink);
  font-weight: 700;
}

.chip i { font-style: normal; opacity: .6; margin-left: 6px; }

.count {
  margin-left: auto;
  flex: none;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
  color: var(--mp-mute);
}

@media (max-width: 560px) { .count { display: none; } }

/* ══ Pattern wall ══ */

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding-bottom: 26px;
}

@media (max-width: 560px) { .wall { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* The mixed-query sections (D85): a mono eyebrow naming what the wall below it holds. Only
   rendered when a query matched both a garment and patterns — a single-intent search stays one
   unlabelled list. */
.shead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--mp-line);
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10.5px;
  color: var(--mp-mute);
}

.shead b { color: var(--mp-peach); font-weight: 400; }

.tile {
  position: relative;
  grid-column: span 1;
  aspect-ratio: 1;
  border-radius: var(--mp-r-card);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--mp-line);
  background: var(--mp-surface);
  padding: 0;
  text-align: left;
  color: var(--mp-ink);
  display: block;
  width: 100%;
  transition: transform .35s cubic-bezier(.22, .9, .26, 1), box-shadow .35s, border-color .2s, opacity .3s;
}

.tile.hide { display: none; }

/* ── The wall dressed in a garment (D69) ────────────────────────────────────────────────────
   The tile stops being a square of artwork and becomes the same portrait matted pane the
   Shop-by-Garment cards wear, so a garment reads as a garment rather than as a crop of one. Only
   the geometry and the image element change: the glow, the hover lift, the meta overlay, the
   ordinal badge and the rating thumbs are the wall's, in both modes.

   The pane itself — mat, tint, lit lip, and the D59 plate-over-pattern treatment — is the shared
   rule further down, which `.tile .well` joins rather than restates.

   The grid is deliberately untouched: same columns, same widths, so a tile that changes clothes
   also stays in its column. The wall growing taller is the mode announcing itself; the wall
   re-flowing sideways would read as the visitor losing their place. */

.tile.on-garment { aspect-ratio: 4 / 4.6; }

.tile .well {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.tile .well img {
  position: absolute;
  object-fit: cover;
  object-position: 50% 12%;
  transition: transform .5s cubic-bezier(.22, .9, .26, 1);
}

.tile:hover .well img,
.tile.open .well img { transform: scale(1.05); }

/* The "photo pending" caption centres in the pane; its fill comes from the shared rule. */
.tile .well.ph {
  display: grid;
  place-items: center;
}

.tile .well.ph span {
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  color: var(--mp-mute);
  background: rgba(0, 0, 0, .5);
  padding: 6px 12px;
  border-radius: 8px;
  text-align: center;
  line-height: 1.8;
}

/* The scrim behind the meta overlay is tuned for artwork that runs to the tile's edge. Over a
   matted pane it would darken the mat too, so it starts lower and lands softer. */
.tile.on-garment::after {
  background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .78));
}

.tile .art {
  position: absolute;
  inset: 0;
  background-size: 135%;
  background-position: 50% 50%;
  transition: background-size 6s cubic-bezier(.16, .7, .3, 1), background-position 6s cubic-bezier(.16, .7, .3, 1);
}

.tile:hover .art,
.tile.open .art { background-size: 175%; background-position: 60% 38%; }

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, .82));
  opacity: 0;
  transition: opacity .25s;
}

.tile:hover::after,
.tile.open::after,
.tile:focus-visible::after { opacity: 1; }

.tile:hover,
.tile.open {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 24px 60px -18px var(--glow, rgba(251, 94, 190, .45));
}

.tile:focus-visible { outline: 2px solid var(--mp-pink); outline-offset: 3px; }

.tile .meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform: translateY(10px);
  opacity: 0;
  transition: transform .3s cubic-bezier(.22, .9, .26, 1), opacity .25s;
}

.tile:hover .meta,
.tile.open .meta,
.tile:focus-visible .meta { transform: none; opacity: 1; }

.tile .nm {
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: 19px;
  line-height: 1.1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

.tile .tg {
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 9px;
  color: var(--mp-peach);
}

.tile .idx {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  font-family: var(--mp-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--mp-ink);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
  opacity: 0;
  transition: opacity .25s;
}

.tile:hover .idx,
.tile.open .idx { opacity: .85; }

/* The dock's prompt label — it used to share this rule with the dossier expander's
   "✦ Prompt" slot; the expander died with D83 and the dock keeps the treatment. */
.dock .plbl {
  color: var(--mp-peach);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  flex: none;
  font-family: var(--mp-mono);
}

/* The design system's primary pill moved to header-bar.css with the rest of the .hbtn system when
   the mini-cart needed it: the popover is on every page, and half of them do not load this sheet. */

/* ══ Footer hint ══ */

.hintbar {
  padding: 10px 0 28px;
  text-align: center;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
  color: #55555B;
}

/* ══ Prompt dock (components/prompt-bar.html) ══ */

.dock {
  position: sticky;
  bottom: 0;
  z-index: 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0 20px;
  background: linear-gradient(transparent, var(--mp-black) 40%);
}

.pbar {
  width: 100%;
  max-width: 1000px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line-soft);
  border-radius: 14px;
  padding: 10px 10px 10px 18px;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .5);
}

.pbar .plbl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.pbar .field {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--mp-ink);
  font-family: var(--mp-sans);
  font-size: 14px;
  padding: 6px 4px;
  min-width: 0;
}

.pbar .field::placeholder { color: var(--mp-mute); }

.genb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 20px;
  white-space: nowrap;
  cursor: pointer;
  flex: none;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 700;
  color: var(--mp-ink-on-pink);
  background: var(--mp-pink);
  border: 1px solid transparent;
  border-radius: var(--mp-r-pill);
  transition: background .15s;
}

.genb:hover { background: var(--mp-pink-soft); }

.genb svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ══ The gallery hero's picker ══
   One component, both galleries, the class names the design gave it: /products picks the pattern
   its shelves wear, /patterns picks the garment its tiles wear (D69). js/picker.js is the shared
   behaviour. */

.pat-wrap { position: relative; display: inline-block; }

.pat-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  color: var(--mp-peach);
}

.pat-btn:hover { color: var(--mp-pink-soft); }

.pat-btn .sw,
.shown .sw {
  width: 14px;
  height: 14px;
  border-radius: var(--mp-r-pill);
  background-size: cover;
  background-position: center;
  flex: none;
}

.pat-btn .sw { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }

.pat-btn svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s;
}

.pat-wrap.open .pat-btn svg { transform: rotate(180deg); }

.pat-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  min-width: 230px;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: #141418;
  border: 1px solid var(--mp-line-soft);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  text-align: left;
}

.pat-wrap.open .pat-menu { display: flex; }

.pat-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10.5px;
  color: var(--mp-dim);
  white-space: nowrap;
}

.pat-opt:hover { color: var(--mp-ink); background: var(--mp-raise); }

.pat-opt .sw {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background-size: cover;
  background-position: center;
  flex: none;
}

.pat-opt.on { color: var(--mp-ink); }
.pat-opt .tick { margin-left: auto; color: var(--mp-pink); opacity: 0; }
.pat-opt.on .tick { opacity: 1; }

/* A swatch with nothing to show: the wall's flat-artwork option, and any garment whose blank
   plate has not been captured yet. The diagonal is what "nothing here yet" means everywhere
   else on the storefront, so it means it here too rather than leaving a hole in the row. */
.sw.none {
  background-image: repeating-linear-gradient(45deg, #1E1E22 0 5px, #26262C 5px 10px);
  box-shadow: inset 0 0 0 1px var(--mp-line-soft);
}

.pat-all {
  margin-top: 4px;
  padding: 9px 10px;
  border-top: 1px solid var(--mp-line);
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
}

/* ══ Garment gallery: toolbar extras ══ */

/* The toolbar's controls are links (each one is an address the server can serve on its own), so
   they carry the box model a button gave them for free. */
.sort {
  flex: none;
  display: inline-flex;
  align-items: center;
  /* The label and its value are separate flex items now, so the space between the words in the
     markup no longer renders — a flex container drops it. */
  gap: 4px;
  text-decoration: none;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--mp-r-pill);
  background: none;
  border: 1px solid var(--mp-line-soft);
  color: var(--mp-mute);
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}

.sort:hover { color: var(--mp-ink); border-color: rgba(255, 255, 255, .30); }
.sort b { color: var(--mp-peach); font-weight: 400; }

.seg {
  flex: none;
  display: flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--mp-line-soft);
  border-radius: var(--mp-r-pill);
  padding: 3px;
  gap: 2px;
}

.segb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  height: 28px;
  padding: 0 13px;
  border-radius: var(--mp-r-pill);
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mp-mute);
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
  transition: color .15s, background .15s;
}

.segb:hover { color: var(--mp-ink); }
.segb.on { background: var(--mp-raise); color: var(--mp-ink); }
.segb svg { display: none; width: 16px; height: 16px; fill: currentColor; }
.seg.icons .segb .t { display: none; }
.seg.icons .segb { padding: 0 9px; }
.seg.icons .segb svg { display: block; }

@media (max-width: 1200px) {
  .toolbar { flex-wrap: wrap; row-gap: 8px; }
  .toolbar .chiprow { flex-basis: 100%; order: 1; }
  .toolbar .seg { order: 2; margin-right: auto; }
  .toolbar .sort { order: 3; }
}

@media (max-width: 640px) {
  .seg { height: 32px; }
  .segb { height: 26px; padding: 0 9px; font-size: 9.5px; }
  .sort { height: 32px; padding: 0 12px; font-size: 10px; }
  /* The garment toolbar compacts its chips; the pattern gallery's stay full size. */
  .toolbar .chip { height: 32px; padding: 0 14px; font-size: 10px; }
}

/* ══ Garment gallery: shelves ══ */

.shelf { padding: 10px 0 4px; }

.shelf-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--mp-line);
}

.shelf-head h2 { font-weight: 700; letter-spacing: -.01em; font-size: 22px; margin: 0; }

/* A shelf heading is its category's chip in prose — same destination, same narrowing. */
.shelf-head h2 a { color: inherit; text-decoration: none; }
.shelf-head h2 a:hover { color: var(--mp-pink); }

.shelves-none {
  padding: 28px 0 8px;
  border-top: 1px solid var(--mp-line);
  color: var(--mp-mute);
  font-size: 14px;
}

.shelves-none a { color: var(--mp-peach); text-decoration: none; }
.shelves-none a:hover { text-decoration: underline; }

.shelf-head .n {
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
  color: var(--mp-mute);
}

.shelf .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 16px;
  padding-bottom: 22px;
}

@media (max-width: 560px) { .shelf .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-card);
  overflow: hidden;
  background: var(--mp-surface);
  cursor: pointer;
  padding: 0;
  text-align: left;
  color: var(--mp-ink);
  width: 100%;
  /* The card is an anchor target (/products#g-{key}, from /search's garment strip). Both the bar
     and the toolbar are sticky, so an un-margined jump parks the card underneath them. */
  scroll-margin-top: 140px;
  transition: transform .3s cubic-bezier(.22, .9, .26, 1), border-color .2s, box-shadow .3s;
}

.gcard:hover {
  /* The card is an anchor here; keep app.css's a:hover pink off the card text —
     the design's hover changes border/shadow/transform only. */
  color: var(--mp-ink);
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 22px 50px -20px rgba(251, 94, 190, .35);
}

.gcard:focus-visible { outline: 2px solid var(--mp-pink); outline-offset: 3px; }

.gcard .well {
  position: relative;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
}

/* Size and inset come from the pane rule further down, which holds the garment off the mat. */
.gcard .well img {
  position: absolute;
  object-fit: cover;
  object-position: 50% 12%;
  transition: transform .5s cubic-bezier(.22, .9, .26, 1);
}

.gcard:hover .well img { transform: scale(1.05); }

/* Fill comes from the pane rule below; this is only the centring of the "photo pending" caption. */
.gcard .well.ph {
  display: grid;
  place-items: center;
}

.gcard .well.ph span {
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  color: var(--mp-mute);
  background: rgba(0, 0, 0, .5);
  padding: 6px 12px;
  border-radius: 8px;
  text-align: center;
  line-height: 1.8;
}

.gcard .info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 15px;
}

.gcard .gnm { font-weight: 700; font-size: 16.5px; letter-spacing: -.01em; line-height: 1.15; }

.gcard .gmeta {
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 9.5px;
  color: var(--mp-mute);
}

.gcard .grow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.gcard .gprice { font-family: var(--mp-mono); font-weight: 700; font-size: 14px; color: var(--mp-pink); }

.gcard .gcta {
  margin-left: auto;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 9.5px;
  color: var(--mp-dim);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s, transform .25s;
}

.gcard:hover .gcta,
.gcard:focus-visible .gcta { opacity: 1; transform: none; }

.shown {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--mp-r-pill);
  background: rgba(10, 10, 15, .72);
  backdrop-filter: blur(4px);
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px;
  color: var(--mp-dim);
  opacity: 0;
  transition: opacity .2s;
}

.gcard:hover .shown { opacity: 1; }

.shown .sw { width: 12px; height: 12px; }

.shelves-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 0 40px;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  color: var(--mp-mute);
}

@media (prefers-reduced-motion: reduce) {
  .tile,
  .tile .art,
  .gcard,
  .gcard .well img { transition: none; animation: none; }
}

/* ── The card pane ──────────────────────────────────────────────────────────────────────────
   Provider mockups are transparent cut-outs (D9/chunk 25), so the flat #F4F2EE these wells used
   to carry was our own light box, not the photograph's — six of them in a grid read as glare on
   the black canvas. The garment now sits on an inset pane with a lit top edge, tinted by the
   pattern's own colour (D30's bloom, spent here) and floated off the card surface: gallery
   matting rather than a lightbox. Hover brightens the pane and takes the accent into its edge.

   Shared by the New & Featured grid (.pcard), the Shop-by-Garment shelves (.gcard), the pattern
   wall's on-garment tiles and the cart's line thumbnails (.cline), which is why it lives in the
   storefront sheet all of those pages load. The cart tightens the mat in cart.css — 9px of it over
   a 96px thumb leaves a 78px garment — and changes nothing else about the pane.

   Geometry: the well keeps square corners so its mat fills the card's rounded corners exactly and
   the card's own overflow does the clipping — rounding the well instead leaves a lit crescent of
   card surface in each top corner, where the well's larger radius pulls inside the card's. The
   pane and the garment are then both held off every edge by `--mp-pane-mat`. That inset has to be
   stated on each of them: an absolutely-positioned child's containing block is the padding box,
   so `inset: 0` sits flush with the *outside* of the padding and padding alone insets nothing.

   Gradients do not transition, so the tint and the lip are numbers registered with @property in
   tokens.css, which do. Where @property is unsupported the hover snaps instead of easing, which is
   a fine floor. */

.pcard .ph,
.gcard .well,
.tile .well,
.cline .well {
  --mp-pane-mat: 9px;
  --mp-pane-r: 10px;
  --mp-pane-tint: .3;
  --mp-pane-lip: .16;
  padding: var(--mp-pane-mat);
  background: linear-gradient(180deg, #0C0C10, #08080A);
  transition: --mp-pane-tint .42s ease, --mp-pane-lip .42s ease;
}

.pcard .ph::before,
.gcard .well::before,
.tile .well::before,
.cline .well::before {
  content: "";
  position: absolute;
  inset: var(--mp-pane-mat);
  z-index: 0;
  border-radius: var(--mp-pane-r);
  background-color: #0A0A0D;
  background-image: linear-gradient(158deg,
    rgb(var(--accent-rgb, 251 94 190) / var(--mp-pane-tint)) 0%,
    rgba(23, 23, 29, .94) 54%,
    rgba(9, 9, 13, .98) 100%);
  /* Paints over the pane's background but under the cut-out: the lip is the pane's own edge, not
     a frame drawn around the garment. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / var(--mp-pane-lip)),
    inset 0 0 0 1px rgb(var(--accent-rgb, 251 94 190) / calc(var(--mp-pane-lip) * .5));
}

.pcard .ph img,
.gcard .well img,
.tile .well img,
.cline .well img {
  inset: var(--mp-pane-mat);
  width: calc(100% - var(--mp-pane-mat) * 2);
  height: calc(100% - var(--mp-pane-mat) * 2);
  z-index: 1;
  border-radius: var(--mp-pane-r);
}

.pcard .ph .flag,
.gcard .well > span,
.tile .well > span,
.cline .well > span { z-index: 2; }

.pcard:hover .ph,
.gcard:hover .well,
.tile:hover .well,
.tile.open .well {
  --mp-pane-tint: .6;
  --mp-pane-lip: .3;
}

/* The "photo pending" tile keeps the mat and the pane, and changes only the fill — to the diagonal
   that has always meant "nothing here yet". */
.gcard .well.ph::before,
.tile .well.ph::before,
.cline .well.ph::before {
  background-color: #1B1B1F;
  background-image: repeating-linear-gradient(45deg, #1B1B1F 0 10px, #212127 10px 20px);
}

@media (prefers-reduced-motion: reduce) {
  .pcard .ph,
  .gcard .well,
  .tile .well,
  .cline .well { transition: none; }
}

/* ── The unrendered cell, in its matted form ────────────────────────────────────────────────
   A garment we have not yet rendered this pattern on shows the blank plate — a transparent
   provider cut-out since D59 — over the pattern itself, so the card reads as "this product, this
   print, not photographed together yet" rather than as a picture of a different product. The
   fitting room has its own, larger version of this (fitting-room.css); the rule is shared in
   spirit, not in code, because that stage is a viewport and these are thumbnails.

   `.is-unrendered` goes on the image well; the pattern arrives as --mp-behind on the same element.

   **The base rule is not here.** `.is-unrendered`, its ::before and the z-index that lifts the
   plate above it live in header-bar.css, for the same reason `.hbtn.primary` moved there: the
   header's mini-cart marks up unrendered pairs too and it renders on every page of the site,
   half of which never load this sheet. What stays here is what only this sheet's components have
   — the pane, the mat and the badge they hang. Splitting the treatment across two files that some
   pages loaded and others did not is what made the same cart line read differently depending on
   which page the popover was opened from. */

/* On a garment card that pseudo-element is already the pane, so the two rules become one: the tile
   rides on top of the pane's tint, dimmed by a scrim rather than by `opacity` — which would take
   the pane down with it. Everywhere else (the featured hero, the details panel's garment strip, the mini-cart's
   thumb) the plain base rule applies unchanged, because only these cards carry the mat. */
.gcard .well.is-unrendered::before,
.tile .well.is-unrendered::before,
.cline .well.is-unrendered::before {
  background-image:
    linear-gradient(rgba(10, 10, 13, .68), rgba(10, 10, 13, .68)),
    var(--mp-behind, none),
    linear-gradient(158deg,
      rgb(var(--accent-rgb, 251 94 190) / var(--mp-pane-tint)) 0%,
      rgba(23, 23, 29, .94) 54%,
      rgba(9, 9, 13, .98) 100%);
  background-size: auto, 38% auto, auto;
  background-repeat: no-repeat, repeat, no-repeat;
  opacity: 1;
}

/* …and the badge belongs inside the pane rather than out on the mat. */
.gcard .well.is-unrendered::after,
.tile .well.is-unrendered::after,
.cline .well.is-unrendered::after { bottom: calc(6px + var(--mp-pane-mat)); }

/* The honest half. Small enough for a card corner, and it says the same thing the fitting room's
   full sentence does — the render has not happened, the product is real. The badge stays in this
   sheet rather than moving with the base rule: the one surface outside it that carries
   `.is-unrendered` is the 40px mini-cart thumb, which is too small for eight pixels of monospace
   and suppresses the badge anyway (header-bar.css) in favour of a tooltip. */
.is-unrendered::after {
  content: "NOT YET RENDERED";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--mp-mono);
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--mp-mute);
  background: rgba(8, 8, 10, .78);
  border: 1px solid var(--mp-line-soft);
  border-radius: var(--mp-r-pill);
  padding: 3px 8px;
  white-space: nowrap;
  pointer-events: none;
}

/* ══ Search ══════════════════════════════════════════════════════════════════════════════════
   The query box, the garment strip and the "close in feel" rail. No new component language:
   the box is the prompt bar's geometry in the chrome's own colours rather than the pink that
   means "spend a generation", the garment chips are the filter chip wearing a plate swatch, and
   the neighbour rail is the wall itself under a heading that says it did not match. */

/* Every other hero headline on the site is server copy; this one is whatever the visitor typed,
   and one unbroken token — a pasted URL, a mashed key — is a single unbreakable word. Left at the
   inherited `overflow-wrap: normal` it sets the h1's min-content width to the whole token, the
   flex item refuses to shrink below it, and the *document* gets wider than the viewport: a phone
   scrolls sideways into a region the sticky header (viewport-wide) does not cover.

   `anywhere` rather than `break-word` on purpose — only `anywhere` shrinks min-content, which is
   the measurement the flex layout is actually reading. */
.hero.q h1 { overflow-wrap: anywhere; }

.sbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  padding: 10px 10px 10px 18px;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line-soft);
  border-radius: 14px;
}

.sbar:focus-within { border-color: rgba(255, 255, 255, .30); }

.sbar .sic { display: flex; align-items: center; flex: none; color: var(--mp-mute); }

.sbar .sic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.sbar .field {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  padding: 6px 4px;
  color: var(--mp-ink);
  font-family: var(--mp-sans);
  font-size: 15px;
}

.sbar .field::placeholder { color: var(--mp-mute); }

/* The design's own control for "clear this field" is the browser's, so it is left alone rather
   than restyled into something that looks like ours and behaves like neither. */
.sbar .field::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }

.sgo {
  height: 40px;
  padding: 0 20px;
  flex: none;
  cursor: pointer;
  white-space: nowrap;
  background: var(--mp-raise);
  border: 1px solid var(--mp-line-soft);
  border-radius: var(--mp-r-pill);
  color: var(--mp-dim);
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  transition: border-color .15s, color .15s, background .15s;
}

.sgo:hover { color: var(--mp-ink); border-color: rgba(255, 255, 255, .30); background: #26262C; }

/* ── The garment strip ───────────────────────────────────────────────────────────────────── */

.gstrip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

.gstrip .glabel {
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
  color: var(--mp-mute);
}

.gchip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 15px 0 8px;
  background: var(--mp-raise);
  border: 1px solid var(--mp-line-soft);
  border-radius: var(--mp-r-pill);
  color: var(--mp-dim);
  font-size: 13px;
  transition: border-color .15s, color .15s;
}

.gchip:hover { color: var(--mp-ink); border-color: var(--mp-pink); }

.gchip .sw {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--mp-r-pill);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}