/* ===========================================================================
   LA FICHE — the record that carries a piece from the rack to the courier.

   One object appears in four places and never changes its grammar:

     landing   a tag hanging off the product card  (.tag)
     product   the full record, live               (.fiche)
     cart      a stack of records on a slip        (.slip)
     checkout  the same slip, completed and stamped

   The grammar is: a hairline rule, a small uppercase key on the reading side,
   a tabular value on the far side. Nothing rounds. Nothing floats. A record
   card in a boutique in Alger is a rectangle of paper, so this is one too.

   Built on the Concept C tokens. It adds no colours and no fonts.
   =========================================================================== */

:root {
  --fi-rule:      rgba(17, 17, 17, 0.14);
  --fi-rule-firm: rgba(17, 17, 17, 0.30);
  --fi-key:       11px;
  --fi-track:     0.15em;
  --fi-row:       clamp(38px, 4.2vw, 44px);
}

/* Tabular figures everywhere a number can change under the reader. A price
   that jumps sideways when a size changes reads as a glitch, not an update. */
.fiche, .slip, .tag, .rec__price, .qty input {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   1. THE KEY / VALUE ROW — the atom
   ------------------------------------------------------------------------ */

.fi-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-4, 16px);
  min-height: var(--fi-row);
  padding-block: 10px;
  border-top: 1px solid var(--fi-rule);
}
.fi-row:first-child { border-top: 0; }

.fi-k {
  font-size: var(--fi-key);
  letter-spacing: var(--fi-track);
  text-transform: uppercase;
  color: var(--cc-muted);
  white-space: nowrap;
}
.fi-v {
  font-size: 14px;
  color: var(--cc-ink);
  text-align: end;
  overflow: hidden;           /* the roll runs inside this box */
}
.fi-v > span { display: block; }

/* The roll. A value that has just been rewritten arrives from below, once,
   over a single row height. It is the only motion the record makes, and it
   only ever fires because the reader changed something. */
@keyframes fi-roll {
  from { transform: translateY(90%); opacity: 0; }
  to   { transform: none;            opacity: 1; }
}
.fi-v[data-rolled="true"] > span {
  animation: fi-roll 280ms var(--cc-ease) both;
}

/* ---------------------------------------------------------------------------
   2. THE PRODUCT RECORD
   ------------------------------------------------------------------------ */

.fiche {
  border: 1px solid var(--fi-rule-firm);
  background: var(--cc-white);
  padding: 0 var(--sp-5, 20px);
}

.fiche__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3, 12px);
  min-height: 48px;
  padding-block: 14px;
  border-bottom: 1px solid var(--fi-rule-firm);
  cursor: pointer;
  list-style: none;
}
.fiche__head::-webkit-details-marker { display: none; }
.fiche__head b {
  font-size: var(--fi-key);
  letter-spacing: var(--fi-track);
  text-transform: uppercase;
  font-weight: 600;
}
.fiche__head svg {
  flex: none;
  transition: transform var(--cc-state) var(--cc-ease);
}
.fiche[open] > .fiche__head svg { transform: rotate(180deg); }
.fiche:not([open]) > .fiche__head { border-bottom-color: transparent; }
/* The punched hole of a hang tag, at 6px. It is the one ornament, it is
   drawn with a border rather than an image, and it says "this is a tag". */
.fiche__hole {
  width: 9px; height: 9px;
  border: 1px solid var(--fi-rule-firm);
  border-radius: 50%;
  flex: none;
}

.fiche__rows { padding-bottom: 4px; }

.fiche__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4, 16px);
  margin-inline: calc(var(--sp-5, 20px) * -1);
  padding: 14px var(--sp-5, 20px) 16px;
  border-top: 2px solid var(--cc-ink);
  background: var(--cc-paper);
}
.fiche__price .fi-k { color: var(--cc-ink); font-weight: 600; }
.fiche__price .fi-v {
  font-family: var(--cc-display);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
}
.fiche__was {
  display: block;
  font-family: var(--cc-ui);
  font-size: 12px;
  color: var(--cc-muted);
  text-decoration: line-through;
  margin-top: 4px;
}
.fiche__price[data-offer="true"] .fi-v > span:first-child { color: var(--cc-burgundy); }

/* Stock reads in words, never in a coloured bubble. */
.fi-v[data-low="true"]  { color: var(--cc-burgundy); }
.fi-v[data-out="true"]  { color: var(--cc-muted); }

/* ---------------------------------------------------------------------------
   3. THE PRODUCT PAGE — a scrolling passage against a standing record
   ------------------------------------------------------------------------ */

.rec {
  display: grid;
  gap: var(--sp-6, 24px);
  max-width: var(--cc-wide);
  margin-inline: auto;
  padding-inline: var(--cc-gutter);
  padding-bottom: clamp(40px, 6vw, 88px);
}

@media (min-width: 1000px) {
  .rec {
    grid-template-columns: minmax(0, 1.25fr) minmax(380px, 0.75fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
}

/* --- the passage: photographs stacked, read by scrolling --- */

.rec__passage { display: grid; gap: 6px; }

.rec__plate {
  position: relative;
  background: var(--cc-bone);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.rec__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--cc-reveal) var(--cc-ease);
}
/* The frame number, set into the plate rather than floated over it. */
.rec__plate > b {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 14px;
  font-size: var(--fi-key);
  letter-spacing: var(--fi-track);
  color: var(--cc-white);
  mix-blend-mode: difference;
  z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .rec__plate[data-zoom="true"]:hover img { transform: scale(1.06); }
}

.rec__nophoto {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--cc-bone);
  color: var(--cc-muted);
  font-size: var(--fi-key);
  letter-spacing: var(--fi-track);
  text-transform: uppercase;
}

/* --- the standing record --- */

.rec__side { display: grid; gap: var(--sp-5, 20px); }

@media (min-width: 1000px) {
  .rec__side {
    position: sticky;
    /* clears the header, which writes its own height to --header-h */
    top: calc(var(--header-h, 72px) + 20px);
    padding-bottom: 4px;
  }
}

.rec__eyebrow {
  font-size: var(--fi-key);
  letter-spacing: var(--fi-track);
  text-transform: uppercase;
  color: var(--cc-muted);
}
.rec__title {
  font-family: var(--cc-display);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-top: 6px;
  text-wrap: balance;
}
.rec__blurb {
  color: var(--cc-muted);
  font-size: 14px;
  line-height: 1.65;
  max-width: 46ch;
}

/* --- options --- */

.rec__purchase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4, 16px);
  padding-block: 14px;
  border-block: 1px solid var(--fi-rule);
}
.rec__purchase-price { display: grid; gap: 4px; }
.rec__purchase-price > span,
.rec__qty-field > label {
  font-size: var(--fi-key);
  font-weight: 600;
  letter-spacing: var(--fi-track);
  text-transform: uppercase;
  color: var(--cc-muted);
}
.rec__purchase-price p {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.rec__purchase-price strong {
  font-family: var(--cc-display);
  font-size: clamp(25px, 2.5vw, 32px);
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rec__purchase-price s { font-size: 12px; color: var(--cc-muted); }
.rec__purchase-price[data-offer="true"] strong { color: var(--cc-burgundy); }
.rec__availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--cc-muted);
  white-space: nowrap;
}
.rec__availability > span {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: currentColor;
}
.rec__availability > b { font-weight: 500; }
.rec__availability[data-low="true"] { color: var(--cc-burgundy); }
.rec__availability[data-out="true"] { color: var(--bad, #9b2c2c); }

.rec__options { display: grid; gap: var(--sp-5, 20px); }
.rec__option-help {
  margin-top: -4px;
  color: var(--cc-muted);
  font-size: 13px;
  line-height: 1.5;
}
.rec__form-error {
  margin: 0;
  padding: 11px 12px;
  border-inline-start: 2px solid var(--cc-burgundy);
  background: color-mix(in srgb, var(--cc-burgundy) 7%, transparent);
  color: var(--cc-burgundy);
  font-size: 13px;
  line-height: 1.45;
  scroll-margin-top: calc(var(--header-h, 72px) + 20px);
}
.rec__options[aria-invalid="true"] {
  padding: 12px;
  border: 1px solid var(--cc-burgundy);
}

.rec__opt { display: grid; gap: 10px; }
.rec__opt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3, 12px);
}
.rec__opt-head > span:first-child {
  font-size: var(--fi-key);
  letter-spacing: var(--fi-track);
  text-transform: uppercase;
  color: var(--cc-muted);
}
.rec__opt-value { font-size: 13px; color: var(--cc-ink); }

.rec__swatches, .rec__tiles { display: flex; flex-wrap: wrap; gap: 8px; }

.pdp__swatch {
  inline-size: 44px; block-size: 44px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.pdp__swatch::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--fi-rule-firm);
  border-radius: 50%;
  background: var(--swatch, var(--cc-bone));
  transition: box-shadow var(--cc-fast) var(--cc-ease);
}
.pdp__swatch[aria-checked="true"]::before {
  box-shadow: 0 0 0 1px var(--cc-paper), 0 0 0 2px var(--cc-ink);
}
.pdp__swatch[data-out="true"] { opacity: 0.35; cursor: not-allowed; }
.pdp__swatch[data-out="true"]::after {
  content: ""; position: absolute; inset: 50% 6px auto;
  border-top: 1px solid var(--cc-ink); transform: rotate(-45deg);
}

.pdp__tile {
  min-inline-size: 46px;
  min-block-size: 48px;
  padding-inline: 12px;
  border: 1px solid var(--fi-rule-firm);
  background: transparent;
  color: var(--cc-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--cc-fast) var(--cc-ease),
              color var(--cc-fast) var(--cc-ease),
              transform var(--cc-fast) var(--cc-ease);
}
.pdp__tile:hover { background: var(--cc-bone); }
.pdp__tile:active { transform: scale(0.97); }
.pdp__tile[aria-checked="true"] {
  background: var(--cc-ink);
  border-color: var(--cc-ink);
  color: var(--cc-paper);
}
.pdp__tile[data-out="true"] {
  color: var(--cc-faint);
  border-color: var(--fi-rule);
  cursor: not-allowed;
  text-decoration: line-through;
}
.pdp__guide {
  justify-self: start;
  min-block-size: 44px;
  background: none;
  border: 0;
  padding-inline: 4px;
  font: inherit;
  font-size: 12px;
  color: var(--cc-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pdp__guide:hover { color: var(--cc-ink); }

/* --- buy row --- */

.rec__buy { display: grid; gap: 14px; }
.rec__buy-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.rec__buy-row .m-btn { min-block-size: 52px; }
.rec__buy .m-btn { font-size: 12px; }
.rec__qty-field { display: grid; gap: 6px; }
.rec__qty-field .qty { min-block-size: 52px; }
.rec__qty-field .qty button { inline-size: 48px; }
.rec__qty-field .qty input { inline-size: 46px; }

.rec__save {
  inline-size: 52px;
  block-size: 52px;
  border: 1px solid var(--fi-rule-firm);
  background: transparent;
  color: var(--cc-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--cc-fast) var(--cc-ease);
}
.rec__save:hover { background: var(--cc-bone); }
.rec__save[aria-pressed="true"] { color: var(--cc-burgundy); }
.rec__save[aria-pressed="true"] svg { fill: currentColor; }

/* --- service facts, as three ruled lines rather than three icon cards --- */

.rec__service { border-top: 1px solid var(--fi-rule); }
.rec__service > div {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--sp-4, 16px);
  padding-block: 11px;
  border-bottom: 1px solid var(--fi-rule);
  font-size: 13px;
}
.rec__service b {
  font-size: var(--fi-key);
  letter-spacing: var(--fi-track);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cc-muted);
}
.rec__service span { text-align: end; color: var(--cc-ink); }

/* --- accordions --- */

.rec__panels { border-top: 1px solid var(--fi-rule); }
.rec__acc { border-bottom: 1px solid var(--fi-rule); }
.rec__acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3, 12px);
  padding-block: 15px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fi-key);
  letter-spacing: var(--fi-track);
  text-transform: uppercase;
}
.rec__acc > summary::-webkit-details-marker { display: none; }
.rec__acc > summary svg { transition: transform var(--cc-state) var(--cc-ease); flex: none; }
.rec__acc[open] > summary svg { transform: rotate(180deg); }
.rec__acc-body { padding-bottom: 18px; font-size: 14px; line-height: 1.7; color: var(--cc-muted); }
.rec__acc-body p { max-width: 58ch; }

.rec__spec { margin-top: 14px; border-top: 1px solid var(--fi-rule); }
.rec__spec > div {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--sp-4, 16px);
  padding-block: 9px;
  border-bottom: 1px solid var(--fi-rule);
}
.rec__spec dt {
  font-size: var(--fi-key);
  letter-spacing: var(--fi-track);
  text-transform: uppercase;
}
.rec__spec dd { text-align: end; color: var(--cc-ink); }

/* --- phones: the passage becomes a filmstrip, the record a bottom sheet --- */

@media (max-width: 999px) {
  .rec__passage {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--cc-gutter) * -1);
    padding-inline: var(--cc-gutter);
  }
  .rec__passage::-webkit-scrollbar { display: none; }
  .rec__plate {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
  .rec__dots {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 2px;
  }
  .rec__dots button {
    position: relative;
    inline-size: 44px; block-size: 44px;
    border: 0; padding: 0;
    background: transparent;
    cursor: pointer;
  }
  .rec__dots button::after {
    content: "";
    position: absolute;
    inset-inline: 9px;
    top: 50%;
    height: 2px;
    background: var(--fi-rule-firm);
    transition: background var(--cc-fast) var(--cc-ease);
  }
  .rec__dots button[aria-current="true"]::after { background: var(--cc-ink); }
}
@media (min-width: 1000px) { .rec__dots { display: none; } }

/* ---------------------------------------------------------------------------
   4. THE FLIGHT — the record detaching into the bag
   ------------------------------------------------------------------------ */

.fi-flight {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  border: 1px solid var(--fi-rule-firm);
  background: var(--cc-white);
  box-shadow: 0 12px 34px -18px rgba(17, 17, 17, 0.5);
  will-change: transform, opacity;
}
.fi-flight img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------------------
   5. THE SLIP — cart and checkout share one document
   ------------------------------------------------------------------------ */

.slip {
  border-top: 2px solid var(--cc-ink);
}

.slip__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4, 16px);
  padding-block: 12px;
  border-bottom: 1px solid var(--fi-rule-firm);
  font-size: var(--fi-key);
  letter-spacing: var(--fi-track);
  text-transform: uppercase;
  color: var(--cc-muted);
}

.slip__line {
  display: grid;
  grid-template-columns: 18px clamp(104px, 9vw, 132px) minmax(0, 1fr) auto;
  gap: var(--sp-4, 16px);
  align-items: start;
  padding-block: var(--sp-5, 20px);
  border-bottom: 1px solid var(--fi-rule);
  transition: opacity var(--cc-state) var(--cc-ease);
}
.slip__line[data-going="true"] { opacity: 0.35; }

.slip__idx {
  font-size: var(--fi-key);
  letter-spacing: 0.06em;
  color: var(--cc-muted);
  padding-top: 3px;
}

.slip__thumb {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--cc-bone);
  overflow: hidden;
}
.slip__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slip__body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.slip__name {
  font-family: var(--cc-display);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.slip__name a { color: inherit; text-decoration: none; }
.slip__name a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The reference travels with the piece from the product page unchanged. */
.slip__ref {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--cc-muted);
}
.slip__ref b {
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--cc-ink);
}

.slip__side {
  display: grid;
  gap: 10px;
  justify-items: end;
  align-content: start;
}
.slip__total {
  font-size: 15px;
  font-weight: 600;
}
.slip__unit { font-size: 12px; color: var(--cc-muted); }

.slip__drop {
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 12px;
  color: var(--cc-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.slip__drop:hover { color: var(--cc-burgundy); }

/* --- the foot: subtotal, carriage, total, ruled like a real slip --- */

.slip__foot {
  display: grid;
  gap: var(--sp-6, 24px);
  padding-top: var(--sp-6, 24px);
}
@media (min-width: 900px) {
  .slip__foot {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 26rem);
    gap: clamp(32px, 5vw, 96px);
    align-items: start;
  }
  /* Totals on the trailing side, the way a slip is read. */
  .slip__foot-inner { grid-column: 2; }
  .slip__foot > .slip__terms { grid-column: 1; grid-row: 1; margin-top: 0; }
}
.slip__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5, 20px);
  padding-block: 9px;
  font-size: 14px;
}
.slip__sum > span:first-child { color: var(--cc-muted); }
.slip__sum--credit > strong { color: var(--cc-burgundy); }
.slip__grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5, 20px);
  margin-top: 8px;
  padding-top: 14px;
  border-top: 2px solid var(--cc-ink);
}
.slip__grand > span {
  font-size: var(--fi-key);
  letter-spacing: var(--fi-track);
  text-transform: uppercase;
}
.slip__grand > strong {
  font-family: var(--cc-display);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
}

.slip__go { margin-top: var(--sp-5, 20px); }

/* The four promises, as a ruled block rather than four icon chips. */
.slip__terms {
  margin-top: var(--sp-5, 20px);
  border-top: 1px solid var(--fi-rule);
  list-style: none;
  padding: 0;
}
.slip__terms li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-block: 10px;
  border-bottom: 1px solid var(--fi-rule);
  font-size: 13px;
  color: var(--cc-muted);
}
.slip__terms svg { margin-top: 2px; color: var(--cc-faint); }

@media (max-width: 719px) {
  .slip__line {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: var(--sp-4, 16px);
    row-gap: 12px;
  }
  .slip__idx { display: none; }
  .slip__side {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    justify-items: stretch;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .slip__side .slip__total { justify-self: end; }
  .slip__foot { justify-content: stretch; }
}

/* ---------------------------------------------------------------------------
   6. CHECKOUT — the slip completes itself, one act at a time
   ------------------------------------------------------------------------ */

.acts { display: grid; }

.act {
  border-top: 1px solid var(--fi-rule-firm);
}
.act:last-of-type { border-bottom: 1px solid var(--fi-rule-firm); }

.act__bar {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: var(--sp-4, 16px);
  align-items: center;
  width: 100%;
  padding-block: 18px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: default;
}
.act[data-state="done"] .act__bar { cursor: pointer; }

.act__n {
  font-size: var(--fi-key);
  letter-spacing: 0.06em;
  color: var(--cc-faint);
}
.act[data-state="open"] .act__n { color: var(--cc-ink); }

.act__label {
  font-size: var(--fi-key);
  letter-spacing: var(--fi-track);
  text-transform: uppercase;
  color: var(--cc-muted);
}
.act[data-state="open"] .act__label { color: var(--cc-ink); font-weight: 600; }

/* What the act recorded, shown once it closes. */
.act__stamp {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--cc-ink);
  overflow-wrap: anywhere;
}
.act[data-state="open"] .act__stamp { display: none; }
.act__stamp:empty { display: none; }

.act__edit {
  font-size: 12px;
  color: var(--cc-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.act[data-state="open"] .act__edit,
.act[data-state="todo"] .act__edit { visibility: hidden; }

.act__body { padding-bottom: var(--sp-6, 24px); }
.act[data-state="done"] .act__body,
.act[data-state="todo"] .act__body { display: none; }

@keyframes fi-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.act[data-state="open"] .act__body { animation: fi-open 320ms var(--cc-ease) both; }

/* A tick drawn on completion, not a green pill. */
.act__tick {
  inline-size: 14px; block-size: 14px;
  display: none;
  color: var(--cc-success);
}
.act[data-state="done"] .act__tick { display: block; }
.act[data-state="done"] .act__n { display: none; }

.act__next { margin-top: var(--sp-5, 20px); }

/* --- delivery mode: two ruled choices, not two cards --- */

.mode-row {
  display: grid;
  gap: 0;
  border: 1px solid var(--fi-rule-firm);
  margin-bottom: var(--sp-5, 20px);
}
@media (min-width: 620px) { .mode-row { grid-template-columns: 1fr 1fr; } }

.mode {
  display: grid;
  gap: 3px;
  padding: 15px 16px;
  cursor: pointer;
  transition: background var(--cc-fast) var(--cc-ease);
  border-block-end: 1px solid var(--fi-rule-firm);
}
.mode:last-child { border-block-end: 0; }
@media (min-width: 620px) {
  .mode { border-block-end: 0; border-inline-end: 1px solid var(--fi-rule-firm); }
  .mode:last-child { border-inline-end: 0; }
}
.mode:hover { background: var(--cc-bone); }
.mode strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.mode span { font-size: 12px; color: var(--cc-muted); }
.mode:has(input:checked) { background: var(--cc-ink); color: var(--cc-paper); }
.mode:has(input:checked) span { color: rgba(247, 245, 239, 0.72); }
.mode:has(input:focus-visible) { outline: 2px solid var(--cc-ink); outline-offset: -2px; }

/* --- the confirm act: the slip gets signed --- */

.sign {
  border: 1px solid var(--fi-rule-firm);
  background: var(--cc-white);
  padding: var(--sp-5, 20px);
  display: grid;
  gap: 14px;
}
.sign__rows { display: grid; }
.sign__note { font-size: 12px; color: var(--cc-muted); }

/* ---------------------------------------------------------------------------
   7. THE TAG — the landing-page atom that starts the whole thing
   ------------------------------------------------------------------------ */

.rack {
  max-width: var(--cc-wide);
  margin-inline: auto;
  padding-inline: var(--cc-gutter);
  padding-block: var(--cc-section);
}
.rack__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4, 16px);
  padding-bottom: 18px;
  border-bottom: 2px solid var(--cc-ink);
}
.rack__head h2 {
  font-family: var(--cc-display);
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.rack__head p {
  font-size: 13px;
  color: var(--cc-muted);
  max-width: 34ch;
}

.rack__list { display: grid; }

/* One piece per row. The rail is the rule above it; the tag is the record.
   This is the fourth product listing on the page, so it deliberately does not
   look like the three grids above it. */
.rack__piece {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--sp-4, 16px);
  align-items: center;
  padding-block: 14px;
  border-bottom: 1px solid var(--fi-rule);
  position: relative;
  color: inherit;
  text-decoration: none;
}
@media (min-width: 720px) {
  .rack__piece {
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 22ch) 12ch;
    gap: var(--sp-6, 24px);
  }
}

.rack__n {
  font-size: var(--fi-key);
  letter-spacing: 0.06em;
  color: var(--cc-muted);
  transition: color var(--cc-fast) var(--cc-ease);
}
.rack__name {
  font-family: var(--cc-display);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: transform var(--cc-state) var(--cc-ease);
}
.rack__meta { font-size: 12px; color: var(--cc-muted); }
.rack__price { font-size: 14px; text-align: end; }

@media (max-width: 719px) {
  .rack__meta { display: none; }
  .rack__price { grid-column: 2; text-align: start; font-size: 13px; }
}

/* The garment itself appears only on approach, pinned to the pointer's side
   of the row. On touch it never appears, which is why the row still carries
   the name, the reference and the price on its own. */
.rack__swatch {
  position: absolute;
  /* Parked in the empty tail of the name column, clear of the reference and
     the price. Below 1100px that room does not exist, so it does not appear
     and the row carries the name, the reference and the price on its own. */
  display: none;
  inset-inline-end: 27%;
  inset-block-start: 50%;
  inline-size: clamp(120px, 11vw, 156px);
  aspect-ratio: 4 / 5;
  translate: 0 -50%;
  opacity: 0;
  scale: 0.94;
  pointer-events: none;
  overflow: hidden;
  background: var(--cc-bone);
  z-index: 2;
  transition: opacity var(--cc-state) var(--cc-ease),
              scale var(--cc-state) var(--cc-ease);
}
.rack__swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .rack__swatch { display: block; }
  .rack__piece:hover .rack__swatch,
  .rack__piece:focus-visible .rack__swatch { opacity: 1; scale: 1; }
  .rack__piece:hover .rack__name,
  .rack__piece:focus-visible .rack__name { transform: translateX(10px); }
  html[dir="rtl"] .rack__piece:hover .rack__name,
  html[dir="rtl"] .rack__piece:focus-visible .rack__name { transform: translateX(-10px); }
  .rack__piece:hover .rack__n,
  .rack__piece:focus-visible .rack__n { color: var(--cc-burgundy); }
}

/* ---------------------------------------------------------------------------
   8. RTL — the record is a document, so it mirrors as a document
   ------------------------------------------------------------------------ */

html[dir="rtl"] .fi-v,
html[dir="rtl"] .rec__service span,
html[dir="rtl"] .rec__spec dd { text-align: start; }

/* Latin references and DZD amounts stay left-to-right inside Arabic rows. */
html[dir="rtl"] .slip__ref b,
html[dir="rtl"] .fiche__price .fi-v,
html[dir="rtl"] .rack__price,
html[dir="rtl"] .slip__total,
html[dir="rtl"] .slip__grand > strong {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .fiche__price .fi-v,
html[dir="rtl"] .slip__total,
html[dir="rtl"] .slip__grand > strong { text-align: start; }

html[dir="rtl"] .rec__plate > b { direction: ltr; }

/* ---------------------------------------------------------------------------
   9. REDUCED MOTION
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .fi-v[data-rolled="true"] > span,
  .act[data-state="open"] .act__body { animation: none; }
  .rec__plate img,
  .rack__name,
  .rack__swatch { transition: none; }
  .fi-flight { display: none !important; }
}

/* ---------------------------------------------------------------------------
   10. THE CONTACT FLOAT STEPS ASIDE

   From the width where the layout gives the trailing column to the record, the
   slip and the order summary, the WhatsApp float would land on top of the
   confirm button on three of the four pages. It is a support affordance, so it
   moves to the other side rather than the primary action moving for it.
   ------------------------------------------------------------------------ */

@media (min-width: 1000px) {
  /* Only the product page hands its whole trailing column to a control the
     visitor is reaching for. Everywhere else the float keeps its usual corner,
     where nothing lives. */
  body:has(.rec) .at-wa {
    inset-inline-end: auto;
    inset-inline-start: var(--cc-gutter);
  }
}

/* Checkout is the one page where nothing floats over the form. The confirm
   act already carries the WhatsApp number in the flow of the page. */
body:has(#checkout-form) .at-wa { display: none; }
body:has(#checkout-form) .at-tabbar { display: none; }
body:has(.done-page) .at-wa { display: none; }
body:has(.done-page) .at-tabbar { display: none; }

/* ---------------------------------------------------------------------------
   11. NO REFLOW WHILE SOMEONE IS AIMING AT A BUTTON

   Error messages appear on blur, and blur happens on the mousedown of the very
   button the visitor is pressing. If the message changes the height of the
   field, the button moves between mousedown and mouseup and the press lands on
   nothing. Each field in an act therefore reserves the line its message will
   occupy, so showing and clearing a message never reflows the act.
   ------------------------------------------------------------------------ */

.act .m-field { position: relative; padding-bottom: 20px; }
.act .m-error {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  margin: 0;
  max-width: 100%;
}

/* An act, a field or a slip line that scrolls itself into view must clear the
   header that is stuck to the top of the window, or it arrives underneath it
   and cannot be clicked. The header writes its own height to --header-h. */
.act,
.act .m-field,
.act .m-input,
.act .m-select,
.act .m-textarea,
.slip__line {
  scroll-margin-top: calc(var(--header-h, 72px) + 20px);
}

/* The order summary stands beside the acts rather than scrolling away from
   them, so the figures stay legible while the form is being filled. */
@media (min-width: 1000px) {
  .order-layout > .slip {
    position: sticky;
    top: calc(var(--header-h, 72px) + 20px);
    max-height: calc(100svh - var(--header-h, 72px) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* ---------------------------------------------------------------------------
   12. PHONES

   Three collisions that only exist on a small screen, fixed where they happen
   rather than by shrinking everything.
   ------------------------------------------------------------------------ */

/* The primary action gets a full row of its own, so "Ajouter au panier" never
   wraps inside its own button. Quantity and wishlist share the row above it. */
@media (max-width: 519px) {
  .rec__buy-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "qty  save"
      "add  add";
    gap: 10px;
  }
  .rec__buy-row .rec__qty-field { grid-area: qty; }
  .rec__buy-row .rec__save { grid-area: save; }
  .rec__buy-row .m-btn { grid-area: add; }
  .rec__qty-field .qty { width: 100%; }
  .rec__qty-field .qty button,
  .rec__qty-field .qty input { flex: 1 1 0; }
}

@media (max-width: 999px) {
  .fiche { margin-top: 2px; }
  .at-buybar {
    min-height: 68px;
    gap: 12px;
    padding-block: 8px;
    visibility: hidden;
    pointer-events: none;
  }
  .at-buybar[data-show="true"] { visibility: visible; pointer-events: auto; }
  .at-buybar__price { min-width: 0; flex: 0 1 auto; }
  .at-buybar__price span,
  .at-buybar__price b {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .at-buybar .m-btn { min-height: 52px; font-size: 12px; }
}

/* The three steps do not fit across a 320px screen. They scroll rather than
   losing the third one off the edge. */
.steps {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.steps::-webkit-scrollbar { display: none; }
@media (max-width: 719px) {
  .steps > li { flex: none; white-space: nowrap; }
  .steps > li.sep { min-inline-size: 24px; flex: 1 1 auto; }
}
/* Below 480px the three names do not fit and the last one gets cut, which
   reads as a bug. Only the step being worked on keeps its name; the other two
   are numbered circles, which is enough to say where you are in three. */
@media (max-width: 479px) {
  .steps > li:not([aria-current]) > span { display: none; }
  .steps > li.sep { min-inline-size: 16px; }
}

/* On a phone the bottom edge already belongs to the tab bar and, once the
   visitor scrolls, to the buy bar. A third floating button on top of the
   secondary action is one too many; the size guide still offers WhatsApp and
   the footer still carries the number. */
@media (max-width: 999px) {
  body:has(.at-buybar) .at-wa { display: none; }
}

/* Every chip on a slip line is its own bidi run. Otherwise an Arabic word, a
   slash and a Latin amount in one paragraph reorder into "DZD 4 500". */
.slip__ref > span,
.slip__ref > b,
.rec__opt-value,
.act__stamp { unicode-bidi: isolate; }

/* ---------------------------------------------------------------------------
   13. THE HERO'S TOP EDGE

   The header starts transparent and inverted over the campaign photographs.
   Those photographs are shot in a bright boutique, so white 10px labels landed
   on pale walls at roughly 1:1 contrast. A short scrim across the top of the
   hero gives every label something to sit on; it reads as the top of the
   photograph rather than as a bar, and it leaves the picture itself alone.
   ------------------------------------------------------------------------ */

.cc-hero::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: clamp(140px, 20vh, 220px);
  background: linear-gradient(to bottom,
              rgba(8, 8, 8, 0.62) 0%,
              rgba(8, 8, 8, 0.34) 42%,
              rgba(8, 8, 8, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Both bottom corners of the hero already carry a department label and its
   link, so the contact float waits until the visitor has left the hero. The
   header flags that moment for us: it writes data-stuck once the page has
   scrolled past it. */
body:has(.cc-hero) .at-wa {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cc-state) var(--cc-ease);
}
html[data-scrolled="true"] body:has(.cc-hero) .at-wa { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------------------
   14. CHECKOUT — one calm page: a card to fill in, a card to check

   No steps to click through and no accordion to open. The details card and
   the order card sit side by side and both stay fully visible, so everything
   that decides whether to press the button is already on screen.
   ------------------------------------------------------------------------ */

.checkout-page .page-head {
  padding-block: var(--sp-6) var(--sp-5);
}

.checkout-empty {
  margin-block: var(--sp-9);
}

.checkout-form-note {
  margin-bottom: var(--sp-4);
  font-size: var(--t-13);
  color: var(--ink-600);
}

.checkout-page #form-messages {
  margin-bottom: var(--sp-4);
}

.co-layout { padding-bottom: var(--sp-11); }

.co-card,
.co-summary {
  padding: var(--sp-7);
  background: var(--surface);
  border: 1px solid var(--cc-line, var(--line));
  border-radius: var(--cc-r-3, 16px);
}

.co-block + .co-div,
.co-div {
  margin: var(--sp-7) 0;
  border: 0;
  border-top: 1px solid var(--cc-line, var(--line));
}

.co-block__title {
  margin: 0 0 var(--sp-5);
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-900);
}

html[dir="rtl"] .co-block__title { text-transform: none; letter-spacing: 0; }

.co-block .form-grid { gap: var(--sp-5) var(--sp-4); }

.m-optional {
  margin-inline-start: var(--sp-1);
  font-size: var(--t-11);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-500);
}

.checkout-mode {
  min-width: 0;
  margin: 0 0 var(--sp-5);
  padding: 0;
  border: 0;
}

.checkout-mode__legend {
  margin-bottom: var(--sp-2);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-600);
}

html[dir="rtl"] .checkout-mode__legend {
  text-transform: none;
  letter-spacing: 0;
}

.checkout-page .mode {
  min-height: var(--sp-10);
  justify-content: center;
  padding: var(--sp-4);
  border-radius: var(--cc-r-1, 4px);
}

.checkout-page .mode strong {
  font-size: var(--t-15);
}

.checkout-page .mode > span {
  font-size: var(--t-13);
}

.checkout-page .form-grid.is-mode-active {
  animation: checkout-mode-in var(--t-state) var(--ease) both;
}

@keyframes checkout-mode-in {
  from { opacity: 0; transform: translateY(var(--sp-1)); }
  to { opacity: 1; transform: none; }
}

.checkout-notes { margin-top: var(--sp-5); }

.co-recap {
  margin: 0 0 var(--sp-5);
  max-width: 62ch;
  color: var(--cc-muted, var(--ink-600));
  font-size: var(--t-13);
  line-height: 1.6;
}

.co-recap strong { color: var(--ink-900); font-weight: 600; }

.checkout-commit {
  display: grid;
  gap: var(--sp-3);
}

.checkout-commit__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--cc-line, var(--line));
}

.checkout-commit__total > span {
  font-size: var(--t-11);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--cc-muted, var(--ink-600));
}

.checkout-commit__total strong {
  font-family: var(--cc-display, inherit);
  font-size: var(--d-4);
  line-height: 1;
}

.checkout-submit {
  position: relative;
  min-height: var(--sp-10);
  border-radius: var(--cc-r-1, 4px);
}

.checkout-submit[data-busy="true"] {
  cursor: wait;
}

.checkout-submit[data-busy="true"]::after {
  content: "";
  width: var(--sp-4);
  height: var(--sp-4);
  border: 1px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--r-full);
  animation: checkout-spin var(--t-state) linear infinite;
}

@keyframes checkout-spin { to { transform: rotate(1turn); } }

.checkout-submit__help {
  text-align: center;
}

/* --------------------------------------------------------- order summary */

.co-summary { align-self: start; display: flex; flex-direction: column; gap: var(--sp-5); }

.co-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.co-summary__head h2 { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--t-13); font-weight: 600; }
.co-summary__head small { font-size: var(--t-11); font-weight: 400; color: var(--cc-muted, var(--ink-600)); }

.checkout-summary__edit {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-13);
  color: var(--cc-muted, var(--ink-600));
  text-decoration: underline;
  text-underline-offset: var(--sp-1);
  white-space: nowrap;
}

.co-summary__lines { display: grid; gap: var(--sp-4); }

.co-line {
  display: grid;
  grid-template-columns: var(--sp-10) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--cc-line, var(--line));
}

.co-summary__lines .co-line:last-child { border-bottom: 0; padding-bottom: 0; }

.co-line__thumb {
  display: block;
  width: var(--sp-10);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--cc-r-1, 4px);
  background: var(--cc-bone, var(--surface-2));
}

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

.co-line__body h3 { margin: 0; font-size: var(--t-13); font-weight: 500; line-height: 1.35; }
.co-line__body p { margin: var(--sp-1) 0 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); font-size: var(--t-11); color: var(--cc-muted, var(--ink-600)); }

.co-line__price { font-size: var(--t-13); font-variant-numeric: tabular-nums; white-space: nowrap; }

.co-summary__totals { display: grid; gap: var(--sp-2); padding-top: var(--sp-5); border-top: 1px solid var(--cc-line, var(--line)); }

.co-sum { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); font-size: var(--t-13); }
.co-sum span { color: var(--cc-muted, var(--ink-600)); }
.co-sum strong { font-variant-numeric: tabular-nums; }
.co-sum--credit strong { color: var(--ok, #2a7d4f); }

.co-sum--grand {
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--cc-line, var(--line));
  font-size: var(--t-15);
}
.co-sum--grand span { color: var(--ink-900); font-weight: 500; }
.co-sum--grand strong { font-family: var(--cc-display, inherit); font-size: var(--d-4); }

.co-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
  margin: 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--cc-line, var(--line));
  list-style: none;
}

.co-trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-11);
  line-height: 1.35;
  color: var(--cc-muted, var(--ink-600));
}

.co-trust .m-i { flex: none; width: 15px; height: 15px; color: var(--ink-500); }

@media (min-width: 1000px) {
  .order-layout > .co-summary {
    position: sticky;
    top: calc(var(--header-h, 72px) + var(--sp-5));
  }
}

@media (max-width: 999px) {
  .checkout-page .order-layout { gap: var(--sp-6); }
  .co-summary { order: -1; }
}

@media (max-width: 619px) {
  .checkout-page .page-head h1 { font-size: var(--d-4); }
  .checkout-page .page-head-inner { margin-top: var(--sp-3); }

  .co-card,
  .co-summary { padding: var(--sp-5); border-radius: var(--cc-r-2, 8px); }
  .co-block + .co-div,
  .co-div { margin: var(--sp-5) 0; }

  .checkout-page .mode { min-height: var(--sp-9); }

  .checkout-commit__total strong { font-size: var(--t-20); }
  .co-sum--grand strong { font-size: var(--t-20); }

  .co-trust { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-page .form-grid.is-mode-active,
  .checkout-submit[data-busy="true"]::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   15. ORDER COMPLETE — one ceremonial mark, then practical next steps
   ------------------------------------------------------------------------ */

.done-page .done {
  display: grid;
  gap: 0;
  padding-block: 0 var(--sp-11);
}

.done-page .steps {
  padding-block: var(--sp-6);
}

.done-hero {
  display: grid;
  grid-template-columns: var(--sp-11) minmax(0, 1fr);
  gap: var(--sp-7) var(--sp-8);
  align-items: start;
  padding-block: var(--sp-9);
  border-block: 2px solid var(--cc-ink);
}

.done-seal {
  position: relative;
  width: var(--sp-11);
  height: var(--sp-11);
  color: var(--cc-ink);
}

.done-seal__svg,
.done-seal__halo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.done-seal__svg {
  overflow: visible;
}

.done-seal__ring,
.done-seal__check {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.done-seal__ring {
  stroke-width: 1;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  animation: done-ring var(--t-reveal) var(--ease) forwards;
}

.done-seal__check {
  stroke-width: 3;
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
  animation: done-check var(--t-reveal) var(--ease) 320ms forwards;
}

.done-seal__halo {
  border: 1px solid currentColor;
  border-radius: var(--r-full);
  opacity: 0;
  animation: done-halo 900ms var(--ease) 460ms both;
}

@keyframes done-ring { to { stroke-dashoffset: 0; } }
@keyframes done-check { to { stroke-dashoffset: 0; } }
@keyframes done-halo {
  0% { opacity: 0.2; transform: scale(0.84); }
  100% { opacity: 0; transform: scale(1.32); }
}

.done-hero__copy {
  display: grid;
  justify-items: start;
  gap: var(--sp-4);
  max-width: var(--measure);
}

.done-kicker {
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-600);
}

html[dir="rtl"] .done-kicker {
  letter-spacing: 0;
  text-transform: none;
}

.done-page .done-ref {
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--fi-rule-firm);
}

.done-page .done-facts {
  grid-column: 2;
  gap: var(--sp-6);
  padding-block: var(--sp-7) 0;
  border-block: 0;
  border-block-start: 1px solid var(--fi-rule);
  border-radius: 0;
}

.done-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(var(--sp-13), 0.55fr);
  border-bottom: 2px solid var(--cc-ink);
}

.done-layout:not(:has(.done-receipt)) {
  grid-template-columns: minmax(0, 1fr);
}

.done-receipt {
  min-width: 0;
  padding-block: var(--sp-9);
  padding-inline-end: var(--sp-9);
}

.done-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--fi-rule-firm);
}

.done-section-head > div {
  display: grid;
  gap: var(--sp-2);
}

.done-section-head__ref {
  color: var(--ink-600);
  font-size: var(--t-13);
}

.done-lines .line:last-child {
  border-bottom-color: var(--fi-rule-firm);
}

.done-totals {
  display: grid;
  gap: var(--sp-3);
  width: min(100%, 26rem);
  margin-top: var(--sp-6);
  margin-inline-start: auto;
}

.done-next {
  padding-block: var(--sp-9);
  padding-inline-start: var(--sp-8);
  border-inline-start: 1px solid var(--fi-rule-firm);
}

.done-next > h2 {
  margin-top: var(--sp-2);
}

.done-journey {
  display: grid;
  margin-top: var(--sp-7);
}

.done-journey > li {
  display: grid;
  grid-template-columns: var(--sp-7) minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--fi-rule);
}

.done-journey > li:last-child {
  border-bottom: 1px solid var(--fi-rule);
}

.done-journey__number {
  padding-top: var(--sp-1);
  font-size: var(--t-11);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.done-journey li > span:last-child {
  display: grid;
  gap: var(--sp-2);
}

.done-journey strong {
  font-size: var(--t-15);
  font-weight: 600;
}

.done-journey strong + span {
  font-size: var(--t-13);
  line-height: 1.6;
  color: var(--ink-600);
}

.done-support {
  display: grid;
  grid-template-columns: var(--sp-5) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  margin-top: var(--sp-6);
  color: var(--ink-600);
}

.done-support > span {
  display: grid;
  gap: var(--sp-1);
}

.done-support b {
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--ink-800);
}

.done-support a {
  min-height: var(--sp-7);
  text-decoration: underline;
  text-underline-offset: var(--sp-1);
}

.done-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-7);
}

.done-actions .m-link {
  margin-inline-start: auto;
}

@media (max-width: 899px) {
  .done-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .done-receipt {
    padding-block: var(--sp-8);
    padding-inline-end: 0;
  }

  .done-next {
    padding-block: var(--sp-8);
    padding-inline-start: 0;
    border-top: 1px solid var(--fi-rule-firm);
    border-inline-start: 0;
  }
}

@media (max-width: 619px) {
  .done-page .steps {
    padding-block: var(--sp-5);
  }

  .done-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    padding-block: var(--sp-7);
  }

  .done-seal {
    width: var(--sp-10);
    height: var(--sp-10);
  }

  .done-page .done-facts {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    padding-top: var(--sp-6);
  }

  .done-section-head {
    align-items: start;
  }

  .done-section-head__ref {
    padding-top: var(--sp-2);
  }

  .done-actions {
    align-items: stretch;
  }

  .done-actions .m-btn {
    width: 100%;
  }

  .done-actions .m-link {
    justify-content: center;
    margin-inline-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .done-seal__ring,
  .done-seal__check {
    stroke-dashoffset: 0;
    animation: none;
  }
  .done-seal__halo { display: none; }
}