/* ============================================================
   Aurelia — a maison's boutique.

   Copycat page, on the same convention as purse.css: it has its OWN
   look and links the design system only for the shared back-to-home
   bar. The idiom being copied is high-jewellery retail, and it is
   almost entirely made of restraint —

     · white, and one warm off-white for anything that needs to sit back
     · a high-contrast serif for names and numbers, nothing else
     · everything else in a light grotesque, uppercase, tracked wide
     · hairlines instead of boxes; no radius, no shadow, no gradient
     · one gold, used on about four pixels
     · a black rectangle for the only button that commits to anything

   Three views share it: the grid you arrive on, one piece being
   configured, and the bag. The configurator's option rows are the
   page's own rows, ruled like every other row on it.
   ============================================================ */

:root {
  --ink:        #1d1d1b;
  --ink-soft:   #6a6862;
  --ink-faint:  #9a978f;
  --paper:      #ffffff;
  --paper-warm: #f6f3ee;
  --paper-sink: #efeae1;
  --line:       #e3ded5;
  --line-firm:  #cdc6b8;
  --gold:       #a2854f;
  --serif:      'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans:       'Inter', system-ui, -apple-system, sans-serif;

  /* One number for every uppercase micro-label on the page. */
  --track:      0.16em;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  opacity: 0;
  transition: opacity 0.4s ease;
  -webkit-font-smoothing: antialiased;
}

body[data-ready="true"] { opacity: 1; }

button, input { font: inherit; color: inherit; }

h1, h2, h3 { font-weight: 400; margin: 0; }

.eyebrow,
.filter,
.piece__category,
.piece__cta,
.row__label,
.viewpoint,
.cta,
.ghost,
.crumb,
.brand__nav a,
.brand__bag,
.bag-line__category,
.foot {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-size: 12.5px;
}

.linkish:hover { color: var(--ink); }

.linkish--block { display: block; margin-top: 14px; }

/* ── The maison's own header ──────────────────────────────── */

.brand {
  border-bottom: 1px solid var(--line);
  padding: 22px 32px 16px;
  background: var(--paper);
  position: sticky;
  top: var(--is-topbar-h);
  z-index: 40;
}

.brand__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.brand__mark {
  grid-column: 2;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.42em;
  /* The tracking pushes the word right; this pulls the block back on centre. */
  text-indent: 0.42em;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}

.brand__bag {
  grid-column: 3;
  justify-self: end;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand__bag:hover { color: var(--ink); }

.brand__count[hidden] { display: none; }

/* `display` beats the user agent's `[hidden] { display: none }` at equal
   specificity, so an empty bag showed a badge reading 0. The rule above is what
   puts `hidden` back in charge. */
.brand__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0;
}

.brand__rule {
  width: 34px;
  height: 1px;
  margin: 12px auto 14px;
  background: var(--gold);
  border: 0;
}

.brand__nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.brand__nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.brand__nav a:hover,
.brand__nav a[aria-current] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* ── Shared view furniture ────────────────────────────────── */

.collection__head {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 32px 28px;
  text-align: center;
}

.eyebrow { color: var(--gold); margin: 0 0 14px; }

.collection__head h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.04;
}

.collection__lede {
  margin: 18px auto 0;
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.62;
}

.foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 32px 40px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
}

#source[data-source="bundled"] { color: var(--gold); }

/* ── Brand: cycling phrases vs nav ────────────────────────── */

/* Phrases sit in the same slot as the nav; show one or the other. */

body[data-view="catalogo"]:not([data-scrolled]) .brand__nav { display: none; }

.brand__phrases {
  display: none;
  position: relative;
  height: 16px;   /* matches the visual footprint of the nav row */
}

body[data-view="catalogo"]:not([data-scrolled]) .brand__phrases { display: block; }

.brand__phrase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0;
  text-align: center;
  animation: phrase-fade 10s ease-in-out infinite;
  opacity: 0;
}

.brand__phrase--b {
  animation-delay: 5s;
  animation-fill-mode: backwards;
}

@keyframes phrase-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  40%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ── View: the grid ───────────────────────────────────────── */

.collection__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px 18px;
  border-bottom: 1px solid var(--line);
}

.filters { display: flex; gap: 26px; flex-wrap: wrap; }

.filter {
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--ink-faint);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.filter:hover { color: var(--ink); }

.filter.is-current { color: var(--ink); border-bottom-color: var(--gold); }

/* The concierge's recommendation, and the way out of it. Gold rather than a
   fifth category chip, because it is not a category — it is two pieces somebody
   picked for you, and it disappears the moment you widen the grid again. */
.filter--selection {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.filter--selection:hover { color: var(--ink); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1px;
  max-width: 1240px;
  margin: 0 auto 60px;
  padding: 0 32px;
  /* Hairlines between cards rather than around them: the grid reads as one
     sheet ruled into cells, which is how a catalogue page is set. */
  background: transparent;
}

.piece {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* The sweep each piece turns against. The live render lands on top of this,
   transparent everywhere the piece isn't, so the gradient *is* the backdrop —
   there is nothing inside this element to draw over it. */
.piece__shot {
  border: 0;
  padding: 0;
  background: radial-gradient(120% 90% at 50% 34%, #ffffff 0%, #f8f6f2 46%, var(--paper-sink) 100%);
  cursor: pointer;
  aspect-ratio: 1;
  display: block;
  width: 100%;
}

/* Until the renderer has reached this card. A slow shimmer rather than a
   spinner — a spinner in a jewellery grid reads as an error. */
.piece__shot:not([data-live]) { animation: piece-wait 1.6s ease-in-out infinite; }

@keyframes piece-wait { 0%, 100% { opacity: 1 } 50% { opacity: 0.6 } }

/* Above the cards so it is not hidden by their backgrounds, below the sticky
   header so a card scrolling away is covered rather than drawn over it, and
   pointer-transparent so the shot area underneath still takes the click. */
#grid-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

#grid-stage[hidden] { display: none; }

.piece__body { flex: 1; padding-top: 18px; }

.piece__category { margin: 0 0 8px; color: var(--gold); }

.piece__name {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.1;
  margin: 0 0 8px;
}

.piece__summary {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.piece__price { margin: 0; font-family: var(--serif); font-size: 17px; }

.piece__cta {
  margin-top: 16px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--line-firm);
  color: var(--ink-soft);
  padding: 9px 16px;
  cursor: pointer;
}

.piece__cta:hover { border-color: var(--ink); color: var(--ink); }

/* ── View: one piece ──────────────────────────────────────── */

/* Same reason as .brand__count[hidden]: display: grid beats the UA's
   [hidden] { display: none } at equal specificity. */
.view--prodotto[hidden] { display: none; }

.view--prodotto {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
}

.gallery {
  /* Under the studio bar and the maison's own, both of which are sticky. */
  position: sticky;
  top: calc(var(--is-topbar-h) + 118px);
  height: calc(100vh - var(--is-topbar-h) - 118px);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  /* The sweep a jeweller photographs on: light at the top, settling at the
     bottom so the piece has something to sit against. The canvas is
     transparent over it. */
  background:
    radial-gradient(120% 78% at 50% 26%, #ffffff 0%, #f8f6f2 44%, var(--paper-sink) 100%);
  border-right: 1px solid var(--line);
}

#stage {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: block;
  touch-action: none;
  cursor: grab;
}

#stage:active { cursor: grabbing; }

.gallery__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 26px 22px;
}

.viewpoints { display: flex; gap: 22px; flex-wrap: wrap; }

.viewpoint {
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--ink-faint);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.viewpoint:hover { color: var(--ink); }

.viewpoint.is-current { color: var(--ink); border-bottom-color: var(--gold); }

.ghost {
  background: none;
  border: 1px solid var(--line-firm);
  color: var(--ink-soft);
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.ghost:hover { border-color: var(--ink); color: var(--ink); }

.crumb {
  background: none;
  border: 0;
  padding: 0 0 22px;
  color: var(--ink-faint);
  cursor: pointer;
}

.crumb:hover { color: var(--ink); }

.detail { padding: 44px 56px 80px; max-width: 640px; }

.detail__name {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.06;
  margin: 0 0 14px;
}

.detail__summary {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.62;
  margin: 0 0 32px;
  max-width: 46ch;
}

/* ── An option row ────────────────────────────────────────── */

.row { border-top: 1px solid var(--line); padding: 22px 0 24px; }

.row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.row__label { margin: 0; color: var(--ink); }

.row__chosen { margin: 0; font-family: var(--serif); font-size: 17px; color: var(--ink); }

.row__summary {
  margin: 7px 0 0;
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 48ch;
}

.row__notice:empty { display: none; }

.row__notice {
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── Choices ──────────────────────────────────────────────── */

.choices { display: flex; flex-wrap: wrap; margin-top: 16px; }

.choices--swatch { gap: 16px; align-items: flex-start; }

.choices--pill { gap: 8px; }

.choice {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink-soft);
  transition: color 0.18s ease;
}

.choice:hover { color: var(--ink); }

/* A finish is a thing you recognise: the swatch is the button, the name is
   underneath it, and the selected one is the only one with a ring round it. */
.choices--swatch .choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 74px;
  text-align: center;
}

.choice__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 0 1px transparent, inset 0 -6px 12px rgba(0, 0, 0, 0.14);
  transition: box-shadow 0.18s ease;
}

.choices--swatch .choice.is-selected .choice__dot {
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--ink), inset 0 -6px 12px rgba(0, 0, 0, 0.14);
}

.choices--swatch .choice__name { font-size: 11px; line-height: 1.35; }

.choices--swatch .choice.is-selected .choice__name { color: var(--ink); }

.choices--swatch .choice__price { font-size: 10px; color: var(--ink-faint); }

/* No colour to show, so the words are the button. */
.choices--pill .choice {
  border: 1px solid var(--line);
  padding: 9px 15px;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-size: 12.5px;
}

.choices--pill .choice:hover { border-color: var(--line-firm); }

.choices--pill .choice.is-selected { border-color: var(--ink); color: var(--ink); }

.choices--pill .choice__price { font-size: 11px; color: var(--ink-faint); }

/* Forbidden by a rule, and still clickable — clicking is how you read why. */
.choice.is-blocked { opacity: 0.34; }

.choice.is-blocked .choice__dot { filter: grayscale(1); }

/* ── Toggle ───────────────────────────────────────────────── */

.toggle { display: flex; align-items: center; gap: 14px; margin-top: 16px; }

.toggle__switch {
  width: 46px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--line-firm);
  background: var(--paper);
  cursor: pointer;
  display: flex;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.toggle__knob {
  width: 18px;
  height: 18px;
  background: var(--line-firm);
  transition: transform 0.2s ease, background 0.2s ease;
}

.toggle__switch.is-on { border-color: var(--ink); background: var(--ink); }

.toggle__switch.is-on .toggle__knob { transform: translateX(22px); background: var(--paper); }

.toggle__label { color: var(--ink-faint); font-size: 12px; }

/* ── Slider ───────────────────────────────────────────────── */

.slider { margin-top: 20px; }

.slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1px;
  background: var(--line-firm);
  outline: none;
}

.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
}

.slider__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
}

.slider__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: var(--ink-faint);
  font-size: 11px;
}

/* ── Price and commitment ─────────────────────────────────── */

.quote { border-top: 1px solid var(--line); padding: 24px 0 6px; }

.quote__total { margin: 0; font-family: var(--serif); font-size: 30px; }

.quote__lines { margin-top: 12px; }

.quote__lines summary {
  cursor: pointer;
  color: var(--ink-faint);
  font-size: 12px;
  list-style: none;
}

.quote__lines summary::-webkit-details-marker { display: none; }

.quote__lines summary::before { content: '+ '; }

.quote__lines[open] summary::before { content: '– '; }

.quote__line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-soft);
}

.commit { display: flex; gap: 10px; margin: 26px 0 0; }

.cta {
  flex: 1;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  padding: 17px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.cta:hover { background: #000; }

.cta--full { width: 100%; justify-content: center; }

.cta__price { letter-spacing: 0.06em; }

.cta-note { margin: 0 0 10px; color: var(--gold); font-size: 12px; }

/* ── Specification ────────────────────────────────────────── */

.spec { margin: 34px 0 0; border-top: 1px solid var(--line); }

.spec__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.spec__row dt { color: var(--ink-faint); margin: 0; }

.spec__row dd { margin: 0; text-align: right; }

.spec__row[data-kind="metadata"] dd { color: var(--ink-soft); }

/* ── View: the bag ────────────────────────────────────────── */

.bag {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 48px;
  max-width: 1240px;
  margin: 0 auto 70px;
  padding: 0 32px;
  align-items: start;
}

.bag-empty {
  max-width: 1240px;
  margin: 0 auto 80px;
  padding: 0 32px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
}

.bag-line {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}

.bag-line:last-child { border-bottom: 1px solid var(--line); }

.bag-line__shot {
  aspect-ratio: 1;
  background: var(--paper-warm);
  overflow: hidden;
}

.bag-line__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bag-line__category { color: var(--gold); margin: 0 0 6px; }

.bag-line__name { font-family: var(--serif); font-size: 22px; margin: 0 0 10px; }

.bag-line__spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  margin: 0 0 12px;
  font-size: 12.5px;
}

.bag-line__spec dt { color: var(--ink-faint); }

.bag-line__spec dd { margin: 0; }

.bag-line__actions { display: flex; gap: 18px; }

.bag-line__side { text-align: right; }

.bag-line__price { font-family: var(--serif); font-size: 19px; margin: 0 0 12px; }

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
}

.stepper button {
  background: none;
  border: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--ink-soft);
}

.stepper button:hover { color: var(--ink); }

.stepper span { min-width: 24px; text-align: center; font-size: 13px; }

.bag__side { position: sticky; top: calc(var(--is-topbar-h) + 130px); }

.bag-summary, .bag-checkout, .order { border-top: 1px solid var(--line); padding: 22px 0 26px; }

.bag-summary h2, .bag-checkout h2, .order h2 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 16px;
}

.bag-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.bag-summary__row--total {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
}

.choice-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}

.choice-row input { margin-top: 2px; accent-color: var(--ink); }

.field { display: block; margin: 16px 0 22px; }

.field span {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line-firm);
  background: var(--paper);
}

.field input:focus { outline: none; border-color: var(--ink); }

.bag-checkout__note {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-faint);
}

.order__line { margin: 5px 0; font-size: 13.5px; color: var(--ink-soft); }

.order__note {
  margin: 18px 0;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ── No catalog at all ────────────────────────────────────── */

.failure { padding: 90px 40px; text-align: center; font-size: 15px; color: var(--ink-soft); }

.failure h2 { font-family: var(--serif); font-size: 28px; color: var(--ink); }

/* ── The concierge, in the maison's clothes ───────────────── */

/* Written out in full rather than as overrides. `common/js/configurator/ai.js`
   injects a stylesheet with these class names at run time, and it lands after
   this file — so `body` in front of each selector is what takes them back. The
   studio's idiom there is a dark glass pill with a 24px radius, and this page
   has no radius anywhere. */
body .convai-mic {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  backdrop-filter: none;
  box-shadow: none;
  padding: 16px 22px;
  color: #fff;
  font: 400 11px/1 var(--sans);
  letter-spacing: var(--track);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease;
}

body .convai-mic:hover { transform: none; background: #000; }

body .convai-mic__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

body .convai-mic[data-state="connecting"] { background: #55524b; }

body .convai-mic[data-state="listening"],
body .convai-mic[data-state="connected"] { background: var(--gold); }

body .convai-mic[data-state="speaking"] { background: #6d5a33; }

body .convai-mic[data-state="listening"] .convai-mic__dot,
body .convai-mic[data-state="speaking"] .convai-mic__dot { opacity: 1; }

body .convai-log {
  border-radius: 0;
  background: rgba(29, 29, 27, 0.94);
  backdrop-filter: none;
  box-shadow: none;
  right: 0;
  left: auto;
  bottom: 49px;
}

@media (min-width: 900px) {
  body .convai-log { left: auto; right: 0; bottom: 49px; }
}

/* ── Narrow ───────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .view--prodotto { grid-template-columns: 1fr; }

  .gallery {
    position: static;
    height: 60vh;
    min-height: 400px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .detail { padding: 36px 26px 80px; max-width: none; }

  .bag { grid-template-columns: 1fr; gap: 28px; }

  .bag__side { position: static; }
}

@media (max-width: 620px) {
  .brand { padding: 16px 18px 12px; }
  .brand__mark { font-size: 20px; }
  .brand__nav { gap: 16px; }
  .collection__head { padding: 36px 18px 22px; }
  .collection__bar, .grid, .bag, .bag-empty, .foot { padding-left: 18px; padding-right: 18px; }
  .grid { grid-template-columns: 1fr; }
  .piece { border-right: 0; }
  .detail__name { font-size: 34px; }
  .gallery__foot { padding: 0 18px 18px; flex-direction: column; align-items: flex-start; }
  .detail { padding: 30px 18px 96px; }
  .bag-line { grid-template-columns: 78px minmax(0, 1fr); }
  .bag-line__side { grid-column: 2; text-align: left; display: flex; align-items: center; gap: 16px; }
  .bag-line__price { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .piece__shot:not([data-live]) { animation: none; }
}