/* ============================================================
   Poudrose — Components
   Composes tokens.css. No hard-coded colour, no off-scale space.

   The whole design rests on one decision: the interface is a wall
   of photographs with almost nothing drawn on top of it. Chrome
   that must exist is 11px, uppercase, tracked, and the colour of
   the ink. Anything that wants a box, a border or a shadow has to
   justify itself against that.
   ============================================================ */

/* ---- Primitives --------------------------------------------- */

.eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

.i { width: 20px; height: 20px; flex: none; fill: none }
.i--sm { width: 16px; height: 16px }
.i--lg { width: 24px; height: 24px }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 44px; padding-inline: var(--s-5);
  border-radius: var(--r-control);
  font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  background: var(--action); color: var(--action-ink);
  transition: background var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.btn:hover { background: var(--action-hover) }
.btn:active { transform: scale(.98) }

.btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink-3) }

.btn--block { width: 100% }
.btn[disabled] { background: var(--surface-3); color: var(--ink-3); cursor: not-allowed }
.btn[disabled]:hover { background: var(--surface-3) }

.rule { height: 1px; background: var(--line); border: 0; margin: 0 }

/* ---- Shell --------------------------------------------------- */

.shell { max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--gutter) }
.bleed { padding-inline: 0 }

.section { padding-block: var(--s-8) }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); padding-inline: var(--s-4);
  margin-bottom: var(--s-5);
}
.section__title { font: var(--t-display); letter-spacing: -.005em }
.section__more {
  font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.section__more:hover { color: var(--ink); border-bottom-color: var(--ink) }

/* ---- Header --------------------------------------------------
   Slim, translucent, and it never grows. The search field is the
   widest thing in it because searching is what people came to do. */

.top {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-4);
  padding-inline: var(--s-4);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: var(--s-2); flex: none }
.brand__mark { width: 22px; height: 22px; color: var(--action) }
.brand__word {
  font-family: var(--font-display); font-weight: 400;
  font-size: 21px; line-height: 1;
  letter-spacing: var(--track-wordmark);
  /* the tracking adds a phantom space after the last letter */
  margin-right: calc(var(--track-wordmark) * -1);
  color: var(--ink);
}
@media (max-width: 519px) { .brand__word { display: none } }

.top__search { flex: 1 1 auto; min-width: 0; max-width: 560px; margin-inline: auto }

.search {
  display: flex; align-items: center; gap: var(--s-2);
  height: 38px; padding-inline: var(--s-3);
  background: var(--surface-2);
  border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--d-1) var(--ease), background var(--d-1) var(--ease);
}
.search:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong) }
.search .i { color: var(--ink-3) }
.search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: var(--t-body); color: var(--ink);
}
.search input::placeholder { color: var(--ink-3) }
.search__clear { display: none; color: var(--ink-3); padding: var(--s-1) }
.search__clear:hover { color: var(--ink) }
.search.is-filled .search__clear { display: block }

.top__actions { display: flex; align-items: center; gap: var(--s-1); flex: none }

.iconbtn {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-control);
  color: var(--ink-2);
  transition: background var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.iconbtn:hover { background: var(--surface-2); color: var(--ink) }

.iconbtn__count {
  position: absolute; top: 2px; right: 1px;
  min-width: 17px; height: 17px; padding-inline: 4px;
  display: grid; place-items: center;
  border-radius: var(--r-control);
  background: var(--action); color: var(--action-ink);
  font: 600 10px/1 var(--font-ui); letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--paper);
}
.iconbtn__count:empty, .iconbtn__count[hidden] { display: none }

@media (max-width: 719px) { .top__actions .is-wide { display: none } }

/* ---- Category rail -------------------------------------------
   Scrolls horizontally on small screens without a scrollbar and
   without a "more" affordance — the row is cropped mid-item, which
   is the affordance. */

.rail {
  position: sticky; top: var(--header-h); z-index: 50;
  height: var(--rail-h);
  display: flex; align-items: center; gap: var(--s-5);
  padding-inline: var(--s-4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.rail::-webkit-scrollbar { display: none }

.rail__item {
  flex: none; white-space: nowrap;
  font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--ink-3);
  padding-block: var(--s-3) calc(var(--s-3) - 2px);
  border-bottom: 2px solid transparent;
  transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.rail__item:hover { color: var(--ink) }
.rail__item[aria-current="true"] { color: var(--ink); border-bottom-color: var(--action) }

/* ---- Hero -----------------------------------------------------
   One plate, full width, with type sitting on the quiet part of
   the image. It appears once, at the top of the home view, and
   never repeats — a shop has one window. */

.hero {
  position: relative;
  margin-bottom: var(--gutter);
  background: var(--surface-2);
  overflow: hidden;
}
.hero__plate { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover }
@media (min-width: 720px) { .hero__plate { aspect-ratio: 21 / 9 } }

.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--scrim) 0%, rgba(26,21,23,.18) 46%, transparent 78%);
}
.hero__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-5) var(--s-5) var(--s-6);
  color: #FFF;
  display: grid; gap: var(--s-3); justify-items: start;
}
@media (min-width: 720px) {
  .hero__body { padding: var(--s-7); max-width: 46rem }
}
.hero__eyebrow { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: rgba(255,255,255,.82) }
.hero__title { font: var(--t-hero); letter-spacing: .004em; text-wrap: balance }
.hero__blurb { font: var(--t-body); color: rgba(255,255,255,.88); max-width: 46ch }
.hero .btn { background: #FFF; color: var(--plaster-900) }
.hero .btn:hover { background: var(--plaster-100) }

/* ---- The wall ------------------------------------------------
   Masonry. `grid-auto-rows` is the row unit and JS writes the span
   from each plate's aspect ratio, which keeps DOM order — a
   column-flow masonry reads top-to-bottom per column and destroys
   the sequence a curator chose. */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  grid-auto-rows: var(--row);
  gap: var(--gutter);
  align-items: start;
}

.grid--roomy { --tile-min: 300px }
@media (max-width: 719px) { .grid--roomy { --tile-min: 158px } }

/* Before JS measures, tiles are uniform rather than collapsed —
   a wall of 4px slivers is a worse first paint than a plain grid. */
.grid:not(.is-measured) .tile { grid-row: span 56 }

.tile {
  position: relative;
  display: block;
  background: var(--surface-2);
  border-radius: var(--r-plate);
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px var(--plate-edge);
  cursor: pointer;
}

.tile__plate {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  background: var(--surface-2);
  transition: transform var(--d-3) var(--ease-out);
}
@media (hover: hover) { .tile:hover .tile__plate { transform: scale(1.045) } }

/* The whole plate is the link. It sits under the poudre button
   rather than wrapping it, because a button inside an anchor is
   invalid and every keyboard on earth disagrees about what it does. */
.tile__hit { position: absolute; inset: 0; z-index: 1 }

.tile__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--scrim) 0%, rgba(26,21,23,.06) 34%, transparent 54%);
  opacity: 0;
  transition: opacity var(--d-2) var(--ease);
}
@media (hover: hover) { .tile:hover .tile__veil, .tile:focus-within .tile__veil { opacity: 1 } }
@media (hover: none) { .tile__veil { opacity: 1 } }

.tile__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-3);
  display: grid; gap: 2px;
  color: #FFF;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease-out);
}
@media (hover: hover) { .tile:hover .tile__meta, .tile:focus-within .tile__meta { opacity: 1; transform: none } }
@media (hover: none) { .tile__meta { opacity: 1; transform: none } }

.tile__name {
  font: var(--t-body); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile__line { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0 }
.tile__price { font: var(--t-price); color: #FFF; flex: none }
.tile__seller {
  font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: rgba(255,255,255,.72);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sold is stated in the corner and the plate desaturates. It is
   never hidden from the grid — a sold thing tells you the shop
   has taste and that this maker is worth following. */
.tile.is-sold .tile__plate { filter: saturate(.28) contrast(.94) }
.tile__flag {
  position: absolute; top: var(--s-3); left: var(--s-3);
  padding: 5px var(--s-2);
  background: rgba(255,255,255,.94); color: var(--plaster-900);
  font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  border-radius: var(--r-control);
}

/* ---- Poudre ---------------------------------------------------
   The one verb. On a pointer device it fades in with the veil; on
   touch it is always there, because there is no hover to discover
   it with. Poudré is the only place the rose appears in the grid. */

.poudre {
  position: absolute; top: var(--s-2); right: var(--s-2);
  z-index: 2;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-control);
  background: rgba(255,255,255,.92);
  color: var(--plaster-800);
  box-shadow: var(--shadow-pop);
  opacity: 0; transform: scale(.9);
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease-out),
              background var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
@media (hover: hover) { .tile:hover .poudre, .tile:focus-within .poudre { opacity: 1; transform: none } }
@media (hover: none) { .poudre { opacity: 1; transform: none } }
.poudre:hover { background: #FFF }
.poudre[aria-pressed="true"] { opacity: 1; transform: none; color: var(--rose-600) }
.poudre .i { width: 19px; height: 19px }

/* The mark blooms once when it is pressed. Once — a like that
   celebrates itself twice is begging. */
@keyframes bloom {
  0%   { transform: scale(1) }
  38%  { transform: scale(1.34) rotate(22deg) }
  100% { transform: scale(1) rotate(45deg) }
}
.poudre.is-blooming .i { animation: bloom 460ms var(--ease-out) }
.poudre[aria-pressed="true"] .i { transform: rotate(45deg) }

/* ---- Counter --------------------------------------------------
   Fancy put the fancy-count on every tile. It is honest social
   proof and it is also noise, so here it lives on the detail view
   and on the counter row, not on the wall. */
.count { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font: var(--t-caption) }
.count .i { width: 14px; height: 14px }

/* ---- Vitrine strip -------------------------------------------
   A curated collection as a horizontal band. Snap scrolling, with
   the last card deliberately cropped. */

.strip {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: var(--s-4);
}
.strip::-webkit-scrollbar { display: none }
.strip > * { scroll-snap-align: start }
@media (min-width: 560px) { .strip { grid-auto-columns: 42% } }
@media (min-width: 960px) { .strip { grid-auto-columns: 27% } }
@media (min-width: 1360px) { .strip { grid-auto-columns: 21% } }

.vcard { display: block; position: relative; background: var(--surface-2); overflow: hidden; isolation: isolate }
.vcard__mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 1 }
.vcard__mosaic img { width: 100%; height: 100%; object-fit: cover; background: var(--surface-3) }
.vcard__mosaic img:first-child { grid-row: span 2; aspect-ratio: 1 / 2 }
.vcard__veil { position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim-deep) 0%, rgba(26,21,23,.16) 52%, transparent 74%) }
.vcard__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-4); color: #FFF; display: grid; gap: var(--s-1) }
.vcard__title { font: var(--t-title); color: #FFF }
.vcard__by { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: rgba(255,255,255,.76) }
.vcard:hover .vcard__mosaic img { opacity: .88 }
.vcard__mosaic img { transition: opacity var(--d-2) var(--ease) }

/* ---- Sub-head (category / vitrine / results banner) ----------- */

.subhead { padding: var(--s-7) var(--s-4) var(--s-6); display: grid; gap: var(--s-3); max-width: 62rem }
.subhead__title { font: var(--t-display); letter-spacing: -.005em; text-wrap: balance }
.subhead__blurb { font: var(--t-body); color: var(--ink-2); max-width: 58ch }
.subhead__by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: 0 var(--s-4) var(--s-4);
}
.toolbar__count { font: var(--t-caption); color: var(--ink-3) }
.select {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 36px; padding-inline: var(--s-3);
  border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--ink-2);
}
.select:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3) }
.select select { appearance: none; background: none; border: 0; outline: none; cursor: pointer; padding-right: 2px }

/* ---- Empty --------------------------------------------------- */

.empty { padding: var(--s-9) var(--s-4); display: grid; gap: var(--s-3); justify-items: center; text-align: center }
.empty__mark { width: 34px; height: 34px; color: var(--line-strong) }
.empty__title { font: var(--t-title) }
.empty__body { font: var(--t-body); color: var(--ink-2); max-width: 44ch }

/* ---- Detail panel ---------------------------------------------
   An overlay rather than a page, because the wall behind it is the
   context — closing should put you back exactly where you were,
   at the same scroll position, mid-browse. */

.panel-root {
  position: fixed; inset: 0; z-index: 100;
  /* Flex with `margin: auto` on the child, not `place-items: center`.
     A centred grid item that outgrows the viewport gets its top
     clipped and unreachable — on a phone that means the close
     button is simply gone. Auto margins collapse instead. */
  display: flex;
  padding: var(--s-4);
  background: var(--scrim-deep);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fade var(--d-2) var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } }

.panel {
  position: relative;
  margin: auto;
  width: 100%; max-width: 1180px;
  background: var(--surface);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  animation: rise var(--d-3) var(--ease-out);
  display: grid;
}
@media (min-width: 900px) { .panel { grid-template-columns: 1.12fr 1fr } }

.panel__figure { position: relative; background: var(--surface-2); min-width: 0 }
.panel__figure img { width: 100%; height: 100%; object-fit: cover; max-height: 78svh }
.panel__flag { position: absolute; top: var(--s-4); left: var(--s-4) }

.panel__body {
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: grid; gap: var(--s-4); align-content: start;
  min-width: 0;
}
@media (min-width: 900px) { .panel__body { padding: var(--s-7) var(--s-6) var(--s-6) } }

.panel__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) }
.panel__eyebrow a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.dot { color: var(--line-strong) }

.panel__title { font: var(--t-display); letter-spacing: -.005em; text-wrap: balance }
.panel__price { font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1 }
.panel__note { font: var(--t-body); color: var(--ink-2); max-width: 46ch }

.spec { display: grid; gap: 0; border-top: 1px solid var(--line) }
.spec div { display: flex; gap: var(--s-4); justify-content: space-between; padding-block: var(--s-3); border-bottom: 1px solid var(--line) }
.spec dt { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-3); flex: none }
.spec dd { margin: 0; font: var(--t-caption); color: var(--ink); text-align: right }

.panel__actions { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); align-items: center }

.poudre-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding-inline: var(--s-4);
  border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--ink);
  transition: box-shadow var(--d-1) var(--ease), color var(--d-1) var(--ease), background var(--d-1) var(--ease);
}
.poudre-btn:hover { box-shadow: inset 0 0 0 1px var(--ink-3) }
.poudre-btn[aria-pressed="true"] { color: var(--action); box-shadow: inset 0 0 0 1px var(--action); background: var(--action-soft) }
.poudre-btn[aria-pressed="true"] .i { transform: rotate(45deg) }
.poudre-btn .i { transition: transform var(--d-2) var(--ease-out) }
.poudre-btn.is-blooming .i { animation: bloom 460ms var(--ease-out) }

.panel__close {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 3;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-control);
  background: rgba(255,255,255,.92); color: var(--plaster-900);
  box-shadow: var(--shadow-pop);
}
.panel__close:hover { background: #FFF }

.panel__step {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 101;
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-control);
  background: rgba(255,255,255,.14); color: #FFF;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--d-1) var(--ease);
}
.panel__step:hover { background: rgba(255,255,255,.28) }
.panel__step--prev { left: var(--s-3) }
.panel__step--next { right: var(--s-3) }
@media (max-width: 899px) { .panel__step { display: none } }

.panel__also {
  display: grid; gap: var(--s-3);
  margin-top: var(--s-3); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
/* Deliberately not a second masonry: a ragged little wall inside the
   panel argues with the real one behind it. Uniform squares read as
   a footnote, which is what this is. */
.also { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--s-1) }
.also__item { display: block; background: var(--surface-2); overflow: hidden }
.also__item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform var(--d-2) var(--ease-out) }
.also__item:hover img { transform: scale(1.06) }

/* ---- Footer ---------------------------------------------------- */

.foot { margin-top: var(--s-9); border-top: 1px solid var(--line); background: var(--surface-2) }
.foot__cols {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: var(--s-8) var(--s-4) var(--s-7);
  max-width: var(--shell-max); margin-inline: auto;
}
.foot__col { display: grid; gap: var(--s-3); align-content: start }
.foot__col h3 { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-3) }
.foot__col a { font: var(--t-caption); color: var(--ink-2); width: fit-content }
.foot__col a:hover { color: var(--ink) }
.foot__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  padding: var(--s-4); border-top: 1px solid var(--line);
  max-width: var(--shell-max); margin-inline: auto;
}
.foot__brand { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-3) }
.foot__brand .brand__mark { width: 16px; height: 16px; color: var(--ink-3) }
.foot__legal { font: var(--t-caption); color: var(--ink-3) }

/* ---- Toast ------------------------------------------------------ */

.toast {
  position: fixed; left: 50%; bottom: var(--s-5); z-index: 200;
  transform: translate(-50%, 12px);
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--plaster-900); color: var(--plaster-50);
  border-radius: var(--r-control);
  font: var(--t-caption);
  box-shadow: var(--shadow-panel);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0) }
.toast .i { width: 15px; height: 15px; color: var(--rose-400) }

/* ---- Scroll sentinel ---------------------------------------------- */
.sentinel { height: 1px }
.more { display: grid; place-items: center; padding: var(--s-7) }


/* ============================================================
   Selling, and the 18+ gate.
   Everything below is chrome, so it obeys the same rule as the
   rest of the chrome: monochrome, hairline, and the rose only
   where something is the primary action.
   ============================================================ */

/* ---- Flags ---------------------------------------------------- */

.tile__flag--mine { background: var(--action); color: var(--action-ink) }

.flag-18 {
  padding: 2px 6px; border-radius: var(--r-control);
  background: var(--surface-3); color: var(--ink-2);
  font: var(--t-eyebrow); letter-spacing: .1em;
}

.rail__item--intime { display: inline-flex; align-items: center; gap: var(--s-2) }
.rail__18 {
  padding: 2px 5px; border-radius: var(--r-control);
  background: var(--surface-3); color: var(--ink-3);
  font: 600 9px/1 var(--font-ui); letter-spacing: .08em;
}

/* A sub-rail sits inside a view rather than under the header, so it
   scrolls away with the section it belongs to — which is the point:
   it says you are in a different room, not a different filter. */
.rail--sub {
  position: static;
  height: auto; padding-block: var(--s-2) 0;
  margin-bottom: var(--s-4);
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-block: 1px solid var(--line);
}

.subhead--intime .subhead__title::after {
  content: "18+";
  margin-left: var(--s-3);
  vertical-align: middle;
  padding: 3px 7px; border-radius: var(--r-control);
  background: var(--surface-3); color: var(--ink-2);
  font: var(--t-eyebrow); letter-spacing: .1em;
}

.lock-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px; padding-inline: var(--s-3);
  border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--ink-2);
}
.lock-btn:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3) }

/* ---- The gate --------------------------------------------------- */

.gate {
  max-width: 46rem;
  padding: var(--s-8) var(--s-4) var(--s-9);
  display: grid; gap: var(--s-4); justify-items: start;
}
.gate__mark { width: 30px; height: 30px; color: var(--ink-3) }
.gate__title { font: var(--t-display); letter-spacing: -.005em; text-wrap: balance }
.gate__body { font: var(--t-body); color: var(--ink-2); max-width: 56ch }
.gate__body--fine { font: var(--t-caption); color: var(--ink-3) }
.gate__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2) }

/* ---- Forms -------------------------------------------------------
   Labels above fields, hints above the control they explain rather
   than below it, and 16px inputs so Safari does not zoom the page
   the moment somebody taps a price. */

.form {
  max-width: 46rem;
  padding: 0 var(--s-4) var(--s-8);
  display: grid; gap: var(--s-6);
}

.field { display: grid; gap: var(--s-2); min-width: 0 }
.field__label { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-2) }
.field__opt { color: var(--ink-3); text-transform: none; letter-spacing: 0; font-weight: 400 }
.field__hint { font: var(--t-caption); color: var(--ink-3); max-width: 60ch; margin: 0 }

.row { display: grid; gap: var(--s-5) }
@media (min-width: 620px) { .row { grid-template-columns: 1fr 1fr } }

.input {
  width: 100%; min-height: 46px;
  padding: var(--s-3);
  background: var(--surface);
  border: 0; border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: var(--t-body); font-size: 16px; color: var(--ink);
  outline: none;
  transition: box-shadow var(--d-1) var(--ease);
}
.input:focus { box-shadow: inset 0 0 0 2px var(--focus) }
.input::placeholder { color: var(--ink-3) }
textarea.input { resize: vertical; min-height: 108px; line-height: 1.5 }
select.input { appearance: none; cursor: pointer }

.input--joined { display: flex; align-items: stretch; padding: 0; overflow: hidden }
.input--joined:focus-within { box-shadow: inset 0 0 0 2px var(--focus) }
.input--joined input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: var(--s-3); font: var(--t-body); font-size: 16px;
}
.input--joined select {
  border: 0; background: var(--surface-2); outline: none; cursor: pointer;
  padding-inline: var(--s-3);
  border-left: 1px solid var(--line);
  font-size: 16px;
}

.form__actions { display: flex; flex-wrap: wrap; gap: var(--s-2) }
.form__actions .btn { flex: 1 1 12rem }

.form__danger { padding-top: var(--s-4); border-top: 1px solid var(--line) }
.danger-btn {
  font: var(--t-caption); color: var(--danger);
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.danger-btn:hover { border-bottom-color: var(--danger) }

.gaps[hidden] { display: none }
.gaps {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-panel);
  background: var(--action-soft);
  color: var(--action-hover);
  font: var(--t-caption);
}
.gaps .i { flex: none }

/* ---- Photographs -------------------------------------------------- */

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2) }
.shots:empty { display: none }

.shot { position: relative; background: var(--surface-2); overflow: hidden; border-radius: var(--r-panel) }
.shot img { width: 100%; aspect-ratio: 1; object-fit: cover }
.shot.is-cover { box-shadow: inset 0 0 0 2px var(--action) }
.shot__flag {
  position: absolute; left: 4px; bottom: 4px;
  padding: 3px 6px; border-radius: var(--r-control);
  background: var(--action); color: var(--action-ink);
  font: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase;
}
.shot__drop {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: var(--r-control);
  background: rgba(255,255,255,.92); color: var(--plaster-900);
  box-shadow: var(--shadow-pop);
}
.shot__drop:hover { background: #FFF }

.drop {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 96px; padding: var(--s-4);
  border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink-2); cursor: pointer;
  font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  transition: box-shadow var(--d-1) var(--ease), color var(--d-1) var(--ease), background var(--d-1) var(--ease);
}
.drop:hover { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink-3) }
.drop:focus-within { box-shadow: inset 0 0 0 2px var(--focus) }

/* ---- Your listings ------------------------------------------------- */

.rows { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line) }
.row-item { background: var(--paper) }
.row-item__link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  transition: background var(--d-1) var(--ease);
}
.row-item__link:hover { background: var(--surface-2) }
.row-item__shot {
  flex: none; width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-3);
  border-radius: var(--r-panel); overflow: hidden;
}
.row-item__shot img { width: 100%; height: 100%; object-fit: cover }
.row-item__body { display: grid; gap: 3px; min-width: 0 }
.row-item__name {
  font: var(--t-body); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-item__go { margin-left: auto; color: var(--ink-3); flex: none }

/* ---- Panel photograph switcher --------------------------------------- */

.panel__shots {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: var(--s-1);
  padding: var(--s-2);
  overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(to top, var(--scrim) 0%, transparent 100%);
}
.panel__shots::-webkit-scrollbar { display: none }
.panel__shot {
  flex: none; width: 52px; height: 52px;
  border-radius: var(--r-panel); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35);
  opacity: .7;
  transition: opacity var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
}
.panel__shot img { width: 100%; height: 100%; object-fit: cover }
.panel__shot:hover { opacity: 1 }
.panel__shot.is-on { opacity: 1; box-shadow: 0 0 0 2px #FFF }