/* Shop — "Atelier".

   The marketplace is 64,000 pieces of European designer overstock. A
   white canvas, and the merchandise displayed on warm bone vitrines.
   Two planes only — canvas (white) and bone (anything holding a garment
   or asking for attention). Antique gold is the only accent and keeps
   the house discipline: it means scarcity, selection, and focus.
   Nothing else competes for it.

   Type: Fraunces carries the display voice (titles, product names),
   Instrument Sans does the UI work, DM Mono prices and meta. All three
   load from the same Google Fonts link as the rest of the site.

   Token names kept from the first (dark) pass so every component rule
   below reads unchanged: "night" is the canvas, "ivory" is primary text
   — the values flipped, the roles did not. Scoped to
   body[data-page="shop"] so the injected global chrome is untouched. */

body[data-page="shop"] {
  --shop-night: #FFFFFF;      /* the canvas */
  --shop-night-2: #F8F5EF;    /* raised warm panel (summary, drawer, cards) */
  --shop-umber: #E4DDCF;      /* hairlines and quiet borders */
  --shop-bone: #FFFFFF;       /* the vitrine — anything holding a garment */
  --shop-bone-2: #F1EDE4;     /* vitrine hover / pressed */
  --shop-ivory: #1C1714;      /* primary text — warm espresso ink */
  --shop-taupe: #6F6455;      /* secondary text */
  --shop-gold: #9C7935;       /* scarcity, selection, focus — one accent,
                                 darkened to hold contrast on white */
  --shop-alert: #C24E28;      /* errors only */
  --shop-radius: 10px;
  --shop-shadow: 0 14px 40px rgba(28, 23, 20, 0.10);
  --font-fraunces: "Fraunces", "Instrument Serif", Georgia, serif;

  background: var(--shop-night);
  color: var(--shop-ivory);
}

/* ----------------------------------------------------------------
   Shop chrome: the wayfinding bar under the global topbar.
   Every shop page is one flight of stairs from every other.
   ---------------------------------------------------------------- */

.shop-chrome {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-5) 0;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.shop-chrome__nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.shop-chrome__nav::-webkit-scrollbar {
  display: none;
}

.shop-chrome__link {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--shop-taupe);
  text-decoration: none;
  padding: var(--s-2) 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 140ms ease, border-color 140ms ease;
}

.shop-chrome__link:hover {
  color: var(--shop-ivory);
}

.shop-chrome__link.is-active {
  color: var(--shop-gold);
  border-bottom-color: var(--shop-gold);
}

.shop-currency {
  display: inline-flex;
  gap: var(--s-1);
  flex-shrink: 0;
}

.shop-chrome__user {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--shop-taupe);
  white-space: nowrap;
}

.shop-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-9);
}

/* Browse runs the full viewport: on a wide screen the 1280 reading width
   is two columns of merchandise spent on empty margin. The bag, checkout
   and account layouts keep it — they are text, not a grid. */
body:has(.shop-browse) .shop-chrome,
body:has(.shop-browse) .shop-main {
  max-width: none;
}

/* Browse is a grid, so every band of chrome above it costs a row of
   merchandise. The masthead, departments and toolbar all run tight. */
body:has(.shop-browse) .shell {
  padding-top: 92px;
}

body:has(.shop-browse) .shop-main {
  padding-top: var(--s-4);
}

/* ----------------------------------------------------------------
   Masthead
   ---------------------------------------------------------------- */

.shop-masthead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: var(--s-7);
  padding-bottom: var(--s-3);
}

.shop-masthead__title,
.shop-browse__title {
  font-family: var(--font-fraunces);
  font-size: var(--fs-fluid-4xl);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--shop-ivory);
}

/* The chrome above already says SHOP — this is a label, not a hero. */
.shop-masthead__title {
  font-size: var(--fs-fluid-2xl);
}

.shop-browse__title {
  margin-bottom: var(--s-6);
}

/* Capped and pushed right: full-bleed, the search would otherwise run a
   whole screen wide with three words in it. */
.shop-search {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  width: 100%;
  max-width: 520px;
  justify-self: end;
  border: 0;
  border-bottom: 1px solid var(--shop-umber);
  background: transparent;
  color: var(--shop-ivory);
  padding: var(--s-3) 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 140ms ease;
}

.shop-search::placeholder {
  color: var(--shop-taupe);
}

.shop-search:focus {
  outline: none;
  border-bottom-color: var(--shop-gold);
}

/* ----------------------------------------------------------------
   Departments — the taxonomy rail, straight from the API
   ---------------------------------------------------------------- */

.shop-departments {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  padding: var(--s-2) 0 var(--s-3);
  border-bottom: 1px solid var(--shop-umber);
  scrollbar-width: none;
}

.shop-departments::-webkit-scrollbar {
  display: none;
}

.dept {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0 0 var(--s-1);
  cursor: pointer;
  color: var(--shop-taupe);
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}

.dept__label {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: 500;
  white-space: nowrap;
}

.dept__count {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.04em;
}

.dept:hover {
  color: var(--shop-ivory);
}

.dept.is-active {
  color: var(--shop-gold);
  border-bottom-color: var(--shop-gold);
}

.shop-refine {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-4) 0 0;
}

.refine {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--shop-umber);
  background: transparent;
  color: var(--shop-taupe);
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.refine__count {
  font-size: var(--fs-10);
  opacity: 0.65;
}

.refine:hover {
  color: var(--shop-ivory);
  border-color: var(--shop-taupe);
}

.refine.is-active {
  background: var(--shop-gold);
  border-color: var(--shop-gold);
  color: var(--shop-night);
}

/* ----------------------------------------------------------------
   Browse body: filter rail + toolbar + vitrine grid
   ---------------------------------------------------------------- */

.shop-browse {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  padding-top: var(--s-4);
}

.shop-filters {
  position: sticky;
  top: 100px;
  display: grid;
  gap: var(--s-5);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: var(--s-2);
  scrollbar-width: thin;
}

.shop-filters__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.shop-filters__title {
  font-family: var(--font-fraunces);
  font-style: italic;
  font-size: var(--fs-19);
  font-weight: 400;
  color: var(--shop-ivory);
  margin: 0;
}

.filter-clear {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 0;
  background: none;
  color: var(--shop-taupe);
  cursor: pointer;
  padding: 0;
  border-bottom: 1px solid var(--shop-umber);
}

.filter-clear:hover {
  color: var(--shop-gold);
  border-bottom-color: var(--shop-gold);
}

.filter-group {
  border: 0;
  border-top: 1px solid var(--shop-umber);
  padding: var(--s-4) 0 0;
  margin: 0;
}

.filter-group__legend {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--shop-taupe);
  padding-bottom: var(--s-3);
}

/* No inner scroll: the rail is the single scroll region, so the wheel
   never gets trapped in a nested list. Long facets stay short via the
   top-N cap + "Show all". */
.filter-group__list {
  display: grid;
  gap: var(--s-2);
}

.filter-option {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--shop-ivory);
  cursor: pointer;
}

.filter-option input[type="checkbox"] {
  accent-color: var(--shop-gold);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.filter-option__count {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--shop-taupe);
  margin-left: auto;
}

.filter-more {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 0;
  background: none;
  color: var(--shop-taupe);
  cursor: pointer;
  padding: var(--s-2) 0 0;
  text-align: left;
}

.filter-more:hover {
  color: var(--shop-gold);
}

.filter-price {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.filter-price input {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  width: 100%;
  min-width: 0;
  border: 1px solid var(--shop-umber);
  border-radius: 6px;
  background: transparent;
  color: var(--shop-ivory);
  padding: var(--s-2) var(--s-3);
  -moz-appearance: textfield;
  appearance: textfield;
}

.filter-price input::-webkit-outer-spin-button,
.filter-price input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.filter-price input:focus {
  outline: none;
  border-color: var(--shop-gold);
}

.filter-price__dash {
  color: var(--shop-taupe);
}

/* Mobile: the rail folds into a drawer behind one button. */
.filter-toggle {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--shop-umber);
  border-radius: 999px;
  background: transparent;
  color: var(--shop-ivory);
  padding: var(--s-2) var(--s-4);
  cursor: pointer;
}

.filter-toggle.has-active {
  border-color: var(--shop-gold);
  color: var(--shop-gold);
}

.shop-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
}

.shop-result-count {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shop-taupe);
  min-height: 1.4em;
  margin: 0;
}

.shop-sort {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shop-taupe);
  flex-shrink: 0;
}

.shop-sort select {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 0;
  border-bottom: 1px solid var(--shop-umber);
  background: transparent;
  color: var(--shop-ivory);
  padding: var(--s-1) var(--s-1) var(--s-1) 0;
  border-radius: 0;
  cursor: pointer;
}

.shop-sort select:focus {
  outline: none;
  border-bottom-color: var(--shop-gold);
}

.shop-sort option {
  background: var(--shop-night-2);
  color: var(--shop-ivory);
}

/* ----------------------------------------------------------------
   The vitrines. Bone plates glowing on the night canvas — the one
   place the page spends real contrast, because the merchandise is
   the content.
   ---------------------------------------------------------------- */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-5) var(--s-4);
}

.plate {
  display: block;
  color: inherit;
  text-decoration: none;
}

.plate__field {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--shop-bone);
  border-radius: var(--shop-radius);
  overflow: hidden;
}

/* `contain`, not `cover`: the catalog is packshot cut-outs, and cropping
   one decapitates the garment. multiply lets the cut-out sit on the bone
   as if laid there. */
.plate__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--s-4);
  display: block;
  mix-blend-mode: multiply;
  transition: transform 400ms cubic-bezier(0.2, 0, 0.1, 1);
}

.plate:hover .plate__image {
  transform: scale(1.03);
}

/* The signature carried over from the old shop, re-dressed: the size
   run stays hidden until the vitrine is engaged. These are real stock
   rows — a shopper normally learns their size is gone only after
   opening the product. */
.plate__run {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--shop-night);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.04em;
  color: var(--shop-ivory);
  transform: translateY(101%);
  transition: transform 220ms cubic-bezier(0.2, 0, 0.1, 1);
}

.plate:hover .plate__run,
.plate:focus-visible .plate__run {
  transform: translateY(0);
}

.run__label {
  text-transform: uppercase;
  color: var(--shop-taupe);
  margin-right: var(--s-1);
}

.run__size.is-last {
  color: var(--shop-gold);
}

.run__more {
  color: var(--shop-taupe);
}

/* One unit left in the whole listing — gold, the only meaning gold has
   on a vitrine. */
.plate__flag {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shop-night);
  background: var(--shop-gold);
  padding: var(--s-1) var(--s-2);
  border-radius: 4px;
}

.plate__caption {
  display: grid;
  gap: 2px;
  padding-top: var(--s-3);
}

.plate__brand {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shop-taupe);
}

/* Two lines reserved whether the name needs them or not, so prices sit
   on one baseline across the row. */
.plate__name {
  font-family: var(--font-fraunces);
  font-size: var(--fs-16);
  line-height: 1.3;
  min-height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--shop-ivory);
}

.plate:hover .plate__name {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--shop-gold);
}

.plate__price {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--shop-taupe);
}

.plate--loading .plate__field {
  background: var(--shop-night-2);
  animation: plate-fade 1.1s ease-in-out infinite alternate;
}

@keyframes plate-fade {
  from { opacity: 1; }
  to { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .plate__image,
  .plate__run {
    transition: none;
  }
  .plate--loading .plate__field {
    animation: none;
  }
}

/* Load more — the honest pagination for a client-sorted pool. */
.shop-more {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  margin-top: var(--s-8);
}

.shop-more__note {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shop-taupe);
}

/* ----------------------------------------------------------------
   Buttons — one primary (gold on night), one quiet chip
   ---------------------------------------------------------------- */

.detail__add,
.shop-detail__add,
.shop-more__btn {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 0;
  border-radius: 999px;
  background: var(--shop-gold);
  color: var(--shop-night);
  padding: var(--s-4) var(--s-6);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.detail__add {
  width: 100%;
  margin-top: var(--s-6);
}

.detail__add:hover:not(:disabled),
.shop-detail__add:hover,
.shop-more__btn:hover:not(:disabled) {
  background: var(--shop-ivory);
  color: var(--shop-night);
}

.detail__add:disabled,
.shop-more__btn:disabled {
  background: var(--shop-night-2);
  color: var(--shop-taupe);
  cursor: default;
}

.detail__add.is-added {
  background: var(--shop-ivory);
}

.shop-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--shop-umber);
  background: transparent;
  color: var(--shop-ivory);
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.shop-chip:hover {
  border-color: var(--shop-gold);
  color: var(--shop-gold);
}

.shop-chip.is-active {
  background: var(--shop-gold);
  border-color: var(--shop-gold);
  color: var(--shop-night);
}

/* ----------------------------------------------------------------
   Journey steps — Bag → Checkout → Confirmed
   ---------------------------------------------------------------- */

.steps {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--shop-taupe);
  padding-bottom: var(--s-5);
}

.steps__item.is-current {
  color: var(--shop-gold);
}

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

a.steps__item:hover {
  color: var(--shop-gold);
}

.steps__item.is-done {
  color: var(--shop-ivory);
}

.steps__sep {
  color: var(--shop-umber);
}

/* ----------------------------------------------------------------
   Product detail — the vitrine, opened
   ---------------------------------------------------------------- */

.detail__crumbs {
  display: flex;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shop-taupe);
  padding-bottom: var(--s-5);
}

.detail__crumbs a {
  color: var(--shop-taupe);
  text-decoration: none;
}

.detail__crumbs a:hover {
  color: var(--shop-gold);
}

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

.detail__field {
  aspect-ratio: 3 / 4;
  max-height: 70vh;
  background: var(--shop-bone);
  border-radius: var(--shop-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}

.detail__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

.detail__rail {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
}

.detail__rail::-webkit-scrollbar {
  display: none;
}

.detail__thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--shop-bone);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 140ms ease;
}

.detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

.detail__thumb:hover,
.detail__thumb.is-active {
  opacity: 1;
}

.detail__origin {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shop-taupe);
  margin: 0;
}

.detail__brand {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--shop-gold);
  margin: var(--s-3) 0 0;
}

.detail__name {
  font-family: var(--font-fraunces);
  font-size: var(--fs-fluid-3xl);
  font-weight: 400;
  line-height: 1.05;
  margin: var(--s-2) 0 var(--s-3);
  color: var(--shop-ivory);
}

.detail__price {
  font-family: var(--font-mono);
  font-size: var(--fs-19);
  color: var(--shop-ivory);
}

.detail__block {
  margin-top: var(--s-6);
}

.detail__legend {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shop-taupe);
  padding-bottom: var(--s-3);
}

.detail__legend-note {
  opacity: 0.75;
}

.detail__colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* The size grid repeats the vitrine's promise: units on hand per size,
   and a single unit is gold. */
.detail__sizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: var(--s-2);
}

.size {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--shop-umber);
  border-radius: 8px;
  background: transparent;
  color: var(--shop-ivory);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.size__label {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 500;
}

.size__stock {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--shop-taupe);
}

.size:hover:not(:disabled) {
  border-color: var(--shop-taupe);
}

.size.is-last .size__stock {
  color: var(--shop-gold);
}

.size.is-active {
  background: var(--shop-gold);
  border-color: var(--shop-gold);
  color: var(--shop-night);
}

.size.is-active .size__stock {
  color: var(--shop-night);
  opacity: 0.7;
}

.size.is-out {
  opacity: 0.35;
  cursor: default;
}

.detail__description {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--shop-taupe);
  line-height: 1.6;
  white-space: pre-line;
}

/* Related pieces — a quiet strip below the vitrine. */
.related {
  margin-top: var(--s-9);
}

.related[hidden] {
  display: none;
}

.related__title {
  font-family: var(--font-fraunces);
  font-style: italic;
  font-size: var(--fs-fluid-xl);
  font-weight: 400;
  margin: 0 0 var(--s-5);
  color: var(--shop-ivory);
}

.related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-4);
}

/* ----------------------------------------------------------------
   Shared states
   ---------------------------------------------------------------- */

.shop-state {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  color: var(--shop-taupe);
  text-align: center;
  padding: var(--s-8) 0;
}

.shop-state--error {
  color: var(--shop-alert);
}

.shop-state a {
  color: var(--shop-ivory);
}

/* Captions reused by the bag, checkout, and orders rows. */
.shop-card__source {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shop-taupe);
}

.shop-card__brand {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--shop-taupe);
  margin-top: var(--s-1);
}

.shop-card__name {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: 500;
  margin: var(--s-1) 0;
  color: var(--shop-ivory);
}

.shop-card__price {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--shop-ivory);
}

/* ----------------------------------------------------------------
   Bag
   ---------------------------------------------------------------- */

.bag-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s-8);
  align-items: start;
}

.bag-line {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--shop-umber);
}

.bag-line__image {
  width: 110px;
  height: 146px;
  object-fit: contain;
  background: var(--shop-bone);
  border-radius: 8px;
  flex-shrink: 0;
  mix-blend-mode: normal;
}

.bag-line__body {
  flex: 1;
  min-width: 0;
}

.bag-line__total {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--shop-ivory);
  margin-left: auto;
  flex-shrink: 0;
}

.bag-line__qty {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.bag-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--shop-umber);
  border-radius: 999px;
}

.bag-qty button {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  border: 0;
  background: none;
  color: var(--shop-ivory);
  padding: var(--s-1) var(--s-3);
  cursor: pointer;
}

.bag-qty button:hover {
  color: var(--shop-gold);
}

.bag-line__qty-value {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  min-width: 1.5em;
  text-align: center;
  color: var(--shop-ivory);
}

.bag-remove {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 0;
  background: none;
  color: var(--shop-taupe);
  cursor: pointer;
  padding: 0;
}

.bag-remove:hover {
  color: var(--shop-alert);
}

/* The summary is the one raised panel on the page. */
.bag-summary {
  position: sticky;
  top: 124px;
  background: var(--shop-night-2);
  border: 1px solid var(--shop-umber);
  border-radius: var(--shop-radius);
  padding: var(--s-5);
  box-shadow: var(--shop-shadow);
}

.bag-summary__row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-15);
  color: var(--shop-ivory);
  margin-bottom: var(--s-4);
}

.bag-summary .shop-detail__add {
  display: block;
  text-align: center;
  text-decoration: none;
}

.bag-summary__continue {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shop-taupe);
  text-decoration: none;
  margin-top: var(--s-4);
}

.bag-summary__continue:hover {
  color: var(--shop-gold);
}

.shop-detail__description {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--shop-taupe);
  line-height: 1.5;
  margin-bottom: var(--s-4);
}

/* ----------------------------------------------------------------
   Checkout — review, address, payment
   ---------------------------------------------------------------- */

.review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s-8);
  align-items: start;
}

.review__title,
.shop-detail__name {
  font-family: var(--font-fraunces);
  font-size: var(--fs-fluid-2xl);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 var(--s-5);
  color: var(--shop-ivory);
}

.review-line {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--shop-umber);
}

.review-line__image {
  width: 64px;
  height: 84px;
  object-fit: contain;
  background: var(--shop-bone);
  border-radius: 6px;
  flex-shrink: 0;
}

.review-line__body {
  flex: 1;
  min-width: 0;
}

.review-line__total {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--shop-ivory);
  flex-shrink: 0;
}

.review__aside {
  display: grid;
  gap: var(--s-4);
  background: var(--shop-night-2);
  border: 1px solid var(--shop-umber);
  border-radius: var(--shop-radius);
  padding: var(--s-5);
  box-shadow: var(--shop-shadow);
}

.review__address {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--shop-taupe);
  line-height: 1.5;
}

.review__address strong {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shop-ivory);
  font-weight: 500;
  margin-bottom: var(--s-1);
}

.review__edit {
  justify-self: start;
}

.review__note {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--shop-taupe);
  line-height: 1.5;
  margin: 0;
}

/* Stripe's Payment Element brings its own light theme; frame it rather
   than tint it. */
.pay-panel {
  max-width: 520px;
  margin: 0 auto;
}

.pay-panel__element {
  background: #FFFFFF;
  border: 1px solid var(--shop-umber);
  border-radius: var(--shop-radius);
  padding: var(--s-4);
  margin: var(--s-4) 0;
}

/* ----------------------------------------------------------------
   Account + address forms
   ---------------------------------------------------------------- */

.account-form {
  display: grid;
  gap: var(--s-4);
  max-width: 520px;
}

.account-fieldset {
  border: 1px solid var(--shop-umber);
  border-radius: var(--shop-radius);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
  margin: 0;
}

.account-fieldset legend {
  font-family: var(--font-fraunces);
  font-style: italic;
  font-size: var(--fs-17);
  color: var(--shop-ivory);
  padding: 0 var(--s-2);
}

.account-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shop-taupe);
}

.account-field input {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  text-transform: none;
  letter-spacing: 0;
  color: var(--shop-ivory);
  border: 0;
  border-bottom: 1px solid var(--shop-umber);
  background: transparent;
  padding: var(--s-2) 0;
  border-radius: 0;
}

.account-field input:focus {
  outline: none;
  border-bottom-color: var(--shop-gold);
}

/* ----------------------------------------------------------------
   Orders
   ---------------------------------------------------------------- */

.confirm-panel {
  background: var(--shop-night-2);
  border: 1px solid var(--shop-gold);
  border-radius: var(--shop-radius);
  padding: var(--s-6);
  margin-bottom: var(--s-7);
  text-align: center;
}

.confirm-panel__title {
  font-family: var(--font-fraunces);
  font-size: var(--fs-fluid-2xl);
  font-weight: 400;
  margin: 0 0 var(--s-2);
  color: var(--shop-ivory);
}

.confirm-panel__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shop-taupe);
  margin: 0 0 var(--s-4);
}

.order-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  background: var(--shop-night-2);
  border: 1px solid var(--shop-umber);
  border-radius: var(--shop-radius);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-3);
}

.order-card__body {
  flex: 1;
  min-width: 200px;
}

.order-card__amount {
  font-family: var(--font-mono);
  font-size: var(--fs-15);
  color: var(--shop-ivory);
}

.pill {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--shop-umber);
  border-radius: 999px;
  color: var(--shop-taupe);
  padding: 2px var(--s-3);
  display: inline-block;
  margin-top: var(--s-2);
}

.pill--good {
  border-color: var(--shop-gold);
  color: var(--shop-gold);
}

.pill--bad {
  border-color: var(--shop-alert);
  color: var(--shop-alert);
}

/* ----------------------------------------------------------------
   Keyboard focus — one visible treatment for everything interactive
   ---------------------------------------------------------------- */

.shop-main a:focus-visible,
.shop-main button:focus-visible,
.shop-main select:focus-visible,
.shop-main input:focus-visible,
.shop-chrome a:focus-visible,
.shop-chrome button:focus-visible {
  outline: 2px solid var(--shop-gold);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------
   Narrow screens
   ---------------------------------------------------------------- */

@media (max-width: 980px) {
  .shop-browse {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .filter-toggle {
    display: inline-block;
    justify-self: start;
  }

  /* The rail becomes a drawer: hidden until the toggle opens it. */
  .shop-filters {
    display: none;
    position: static;
    max-height: none;
    overflow: visible;
    background: var(--shop-night-2);
    border: 1px solid var(--shop-umber);
    border-radius: var(--shop-radius);
    padding: var(--s-5);
  }

  .shop-filters.is-open {
    display: grid;
  }

  .detail {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .review {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .shop-masthead {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--s-4);
  }

  .shop-toolbar {
    flex-wrap: wrap;
  }

  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--s-3) var(--s-3);
  }

  .bag-layout {
    grid-template-columns: 1fr;
  }

  .bag-summary {
    position: static;
  }

  .account-row {
    grid-template-columns: 1fr;
  }

  /* Touch has no hover, so the size run stays open on small screens. */
  .plate__run {
    transform: translateY(0);
    padding: var(--s-2);
    gap: var(--s-1) var(--s-2);
  }
}