/* ==========================================================================
   DISCIPLINE — /lookbook · Saison I, « Les Bâtisseurs »
   Styles propres à la page. Réutilise les classes de main.css.
   Pièces (IMPERIUM : le D, brodé sauf sur Victoria où il est imprimé ; AUREA : l'encre or ; LEGIO et FORUM) : photos Printful détourées (<img> dans .l-art : pièces de face ou de dos,
   vues portées .l-piece--worn) ; les décors d'architecture restent des illustrations SVG inline (data-svg). Dans les planches, les pièces AUREA,
   aux coloris profonds, se posent sur une scène claire (.l-stage--stone ou --light) : l'encre or y ressort mieux que sur le basalte.
   SOMMAIRE
    1. Hôtes SVG & utilitaires
    2. Héros
    4. Planches : scène, pièces, décors
    5. Cartels (légendes de musée)
    6. Mises en page des planches (large, côte à côte, arc, triptyque)
    7. Études (défilement horizontal)
    8. Épilogue
    9. Fenêtre « Composer cette allure »
   Mouvement : rideau (mask) → construction du décor (data-svg-draw) → pièces (data-reveal, dérive data-scroll) → cartel.
   Pas de parallaxe JS : la profondeur vient de data-scroll="drift" (CSS natif, sur le compositeur).
   ========================================================================== */

/* ---------- 1. HÔTES SVG ---------- */
[data-svg] > svg { display: block; width: 100%; height: 100%; }
.l-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--ink)); box-shadow: 0 0 0 1px var(--rule-strong); }

/* ---------- 2. HÉROS ---------- */
.l-hero {
  --hero-top: calc(var(--announce-h) + var(--header-h));
  position: relative; display: grid; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding-block: calc(var(--hero-top) + clamp(24px, 5vh, 64px)) clamp(48px, 8vh, 96px);
  background-color: var(--ink);
}
.l-hero__grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .l-hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); } }
.l-hero__text { position: relative; z-index: 2; display: grid; gap: clamp(16px, 2.2vw, 28px); justify-items: start; }
.l-hero__title { display: grid; gap: clamp(8px, 1.2vw, 16px); font-family: var(--font-sans); font-weight: 900; text-transform: uppercase; letter-spacing: var(--brut-track-xl); line-height: 0.96; }
.l-hero__main { font-size: clamp(2.5rem, 6.6vw, 7.125rem); }
.l-hero__main em { color: var(--gold-light); }
.l-hero__lead { max-width: 33rem; color: rgba(243, 239, 231, 0.88); }
.l-hero__cta { gap: 16px 32px; }
.l-hero__art { position: relative; z-index: 1; justify-self: center; width: min(100%, 520px); aspect-ratio: 3 / 4; }
@media (min-width: 900px) { .l-hero__art { width: auto; height: min(74vh, 760px); max-width: 100%; } }
.l-hero__arch { position: absolute; inset: 0; }
/* Stèle : un aplat de pierre en arc, derrière l'arc d'ivoire (remplace la lueur dorée) ; elle s'élève la première */
.l-hero__stele { position: absolute; z-index: 0; inset: 3% -4% -3%; border-radius: 999px 999px 0 0; background: var(--decor-soft); }
.l-hero__arch [data-svg] { width: 100%; height: 100%; }
.l-hero__piece { position: absolute; left: 12%; top: 22%; width: 76%; aspect-ratio: 4 / 5; }   /* sweat de dos (photo détourée 4:5) sous l'arc */
.l-hero__piece .l-art { filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.5)); }
/* Profondeur au défilement : stèle et arc reculent, la pièce avance (translate, CSS natif ; départ à 0 : aucun décalage au chargement) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes l-hero-back { to { translate: 0 34px; } }
    @keyframes l-hero-front { to { translate: 0 -28px; } }
    .l-hero__stele, .l-hero__arch { animation: l-hero-back linear both; animation-timeline: scroll(root block); animation-range: 0px 100vh; }
    .l-hero__piece { animation: l-hero-front linear both; animation-timeline: scroll(root block); animation-range: 0px 100vh; }
  }
}
@media (max-width: 899px) { .l-hero__main { font-size: clamp(2.5rem, 10.5vw, 4.3125rem); } .l-hero { align-items: start; } .l-hero__art { margin-top: 12px; margin-bottom: 28px; width: min(78%, 380px); } }

@media (max-width: 600px) { .l-hero { min-height: auto; padding-block: calc(var(--hero-top) + 1.5rem) 3rem; } }

/* ---------- 4. PLANCHES : SCÈNE, PIÈCES, DÉCORS ---------- */
.l-plate { padding-block: clamp(48px, 6vw, 96px); }
.l-stage {
  --ar: 2 / 1;
  position: relative; overflow: clip; isolation: isolate; aspect-ratio: var(--ar);
}
html.js .l-stage[data-reveal='mask'], html.js .l-niche[data-reveal='mask'] { overflow: clip; }
/* rideau un peu plus vif (950 ms) : le décor, posé juste derrière, se lit mieux */
html.js .l-stage[data-reveal='mask']::after, html.js .l-niche[data-reveal='mask']::after { transition-duration: 950ms; }
.l-stage--dark { --decor: #3B372F; background: var(--basalt) url(/assets/textures/marble-dark.webp) center / cover; }
.l-stage--light { --decor: var(--stone); background: var(--marble-2) url(/assets/textures/marble-light.webp) center / cover; }
.l-stage--stone { --decor: var(--marble); background: #D8CFBF url(/assets/textures/stone.webp) center / 420px repeat; }

.l-piece { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); aspect-ratio: 4 / 5; transform: translate(-50%, -50%); }
.l-piece__in { width: 100%; height: 100%; }
/* Vue portée (modèle coupé aux cuisses, photo détourée 4:5 calée en bas) : la boîte pose sur le bord inférieur du cadre, qui la rogne */
.l-piece--worn { top: auto; bottom: -1.5%; transform: translateX(-50%); }
.l-art { width: 100%; height: 100%; filter: drop-shadow(0 26px 26px rgba(15, 14, 12, 0.3)); }
.l-art > img { display: block; width: 100%; height: 100%; object-fit: contain; }   /* photo détourée d'une pièce (Printful) : même boîte 4:5 que l'illustration */
.l-stage--dark .l-art { filter: drop-shadow(0 28px 28px rgba(0, 0, 0, 0.5)); }

.l-decor { position: absolute; z-index: 1; pointer-events: none; }
.l-decor__in, .l-decor [data-svg] { width: 100%; height: 100%; }
.l-decor--temple { left: 50%; bottom: -1%; width: 92%; aspect-ratio: 1600 / 1183; transform: translateX(-50%); }
.l-decor--arch { left: 50%; bottom: 2%; width: 94%; aspect-ratio: 3 / 4; transform: translateX(-50%); }
.l-decor--col { top: 5%; height: 90%; width: auto; aspect-ratio: 195 / 982.7; }
.l-decor--col-l { left: 5%; }
.l-decor--col-r { right: 5%; }
.l-decor--step { left: 0; right: 0; bottom: 0; height: 15%; background: var(--decor); }
/* la marche glisse en place, le méandre se dévoile depuis le centre : déclenchés par le rideau de leur planche */
html.js:not(.no-reveal) .l-decor--step { transition: transform 1000ms var(--ease-out) 350ms; }
html.js:not(.no-reveal) .l-stage:not(.is-revealed) .l-decor--step { transform: translateY(100%); }
html.js:not(.no-reveal) .l-decor--meander { clip-path: inset(0); transition: clip-path 1400ms var(--ease-in-out) 450ms; }
html.js:not(.no-reveal) .l-stage:not(.is-revealed) .l-decor--meander { clip-path: inset(0 50% 0 50%); }
.l-decor--coin { left: 50%; top: 50%; width: 96%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.l-decor--wreath { left: 50%; top: 50%; height: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.l-decor--colonne { left: 50%; top: 14%; height: 72%; width: auto; aspect-ratio: 195 / 982.7; transform: translateX(-50%); }
.l-decor--meander { position: absolute; left: 6%; right: 6%; width: auto; }
.l-decor--meander-t { top: 6%; }
.l-decor--meander-b { bottom: 6%; }
.l-decor--aqueduc { left: 0; right: 0; bottom: 0; top: 8%; }
.l-decor--aqueduc .l-decor__in { display: flex; align-items: flex-end; height: 100%; }
.l-decor--aqueduc [data-svg] { flex: 0 0 27%; width: 27%; height: auto; aspect-ratio: 3 / 4; margin-left: -2.2%; }
.l-decor--aqueduc [data-svg]:first-child { margin-left: 3%; }

/* Arc & niches */
.l-stage--arch, .l-niche { border-radius: 999px 999px 0 0; }
.l-stage--arch::before, .l-niche::before { border-radius: 999px 999px 0 0; }
.l-stage--arch { --ar: 5 / 7; }
.l-stage--coin { --ar: 1 / 1; }
.l-stage--meander { --ar: 6 / 5; }

@media (min-width: 701px) and (max-width: 999px) { .l-plate--wide .l-stage { --ar: 3 / 2; } .l-plate--wide .l-stage--duo .l-piece { width: calc(var(--w) * 1.3%); } }
@media (max-width: 700px) {
  .l-stage { --ar: 4 / 5; }
  .l-stage--arch { --ar: 5 / 7; }
  .l-piece { left: calc(var(--mx, var(--x)) * 1%); top: calc(var(--my, var(--y)) * 1%); width: calc(var(--mw, var(--w)) * 1%); }
  .l-piece--worn { top: auto; }
  .l-stage--duo { --ar: 1 / 1; }
  .l-decor--temple { width: 210%; }
  .l-decor--col { top: 3%; height: 94%; }
  .l-decor--col-l { left: 1%; } .l-decor--col-r { right: 1%; }
  .l-decor--coin { width: 118%; }
  .l-decor--wreath { height: auto; width: 104%; }
  .l-decor--aqueduc [data-svg] { flex-basis: 58%; width: 58%; }
  .l-decor--meander { left: 5%; right: 5%; }
}

/* ---------- 5. CARTELS ---------- */
.l-plate { --l-line: color-mix(in srgb, var(--fg) 22%, var(--bg)); --l-stone: color-mix(in srgb, var(--fg) 13%, var(--bg)); }
.l-cartel { position: relative; display: grid; gap: clamp(20px, 3vw, 32px); margin-top: clamp(28px, 3.6vw, 52px); padding-top: clamp(22px, 2.6vw, 32px); align-content: start; }
/* Le filet du cartel (gris de pierre, plus d'or) : il se trace, puis les blocs en descendent */
.l-cartel__rule { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--l-line); }
html.js .l-cartel [data-reveal='drop']:not(.is-revealed) { transform: translateY(-16px); }
.l-cartel__label { display: grid; gap: 6px; align-content: start; }
.l-cartel__roman { font: 900 clamp(2.875rem, 1.5625rem + 3.9vw, 5.875rem)/0.8 var(--font-sans); letter-spacing: var(--brut-track-xl); color: var(--l-stone); }
.l-cartel__title { font: 900 clamp(1.4375rem, 0.88rem + 1.77vw, 2.4375rem)/1.04 var(--font-sans); letter-spacing: var(--brut-track-m); text-transform: uppercase; }
.l-cartel__body { display: grid; gap: 14px; align-content: start; }
.l-cartel__text { color: var(--fg-muted); max-width: 32rem; font-size: 1.05rem; }
.l-cartel__pieces { display: grid; gap: 20px; align-content: start; }
.l-cartel__list { list-style: none; padding: 0; border-top: 1px solid var(--l-line); }
.l-cartel__list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0; border-bottom: 1px solid var(--l-line); }
.l-cartel__list a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; min-width: 0; transition: color var(--dur-1); }
.l-cartel__list .l-dot { transform: translateY(0.05em); }
.l-cartel__list a:hover { color: var(--accent); }
.l-cartel__piece { font: 900 0.875rem/1.2 var(--font-sans); letter-spacing: var(--brut-track-s); text-transform: uppercase; text-wrap: balance; }
.l-cartel__color { color: var(--accent); }
.l-cartel__price { flex: none; font: 600 0.875rem/1 var(--font-sans); letter-spacing: 0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg-muted); }
.l-compose { color: var(--accent); justify-self: start; min-height: 44px; }
@media (min-width: 900px) {
  .l-plate--wide .l-cartel, .l-plate--tri .l-cartel { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4.4fr); gap: clamp(24px, 4vw, 72px); }
  .l-cartel--side { grid-template-columns: 1fr; padding: 0 0 0 clamp(20px, 2.4vw, 36px); margin-top: 0; }
  .l-cartel--side > .l-cartel__rule { right: auto; bottom: 0; width: 2px; height: auto; }
  html.js .l-cartel--side > .l-cartel__rule[data-reveal='line']:not(.is-revealed) { transform: scaleY(0); transform-origin: top; }
  html.js .l-cartel--side [data-reveal='drop']:not(.is-revealed) { transform: translateX(-18px); }
}

/* ---------- 6. MISES EN PAGE ---------- */
.l-plate__grid { display: grid; gap: 0; }
@media (min-width: 900px) {
  .l-plate__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: end; }
  .l-plate--split .l-stage { grid-column: 1 / span 7; grid-row: 1; }
  .l-plate--split .l-cartel { grid-column: 9 / -1; grid-row: 1; }
  .l-plate--rev .l-stage { grid-column: 6 / -1; }
  .l-plate--rev .l-cartel { grid-column: 1 / span 4; }
  .l-plate--arch .l-stage { grid-column: 2 / span 5; grid-row: 1; }
  .l-plate--arch .l-cartel { grid-column: 8 / span 5; grid-row: 1; align-self: center; }
}

/* Triptyque : trois niches entre des colonnes */
.l-tri { display: grid; grid-template-columns: 0.2977fr 1fr 0.2977fr 1fr 0.2977fr 1fr 0.2977fr;   /* piste des colonnes = largeur du SVG à la hauteur d’une niche (1,5 × 195 / 982,7) : aucune ne déborde du cadre */ align-items: stretch; }
.l-tri__col { display: grid; justify-items: center; align-items: end; min-width: 0; height: 100%; }
.l-tri__col > [data-svg] { height: 100%; aspect-ratio: 195 / 982.7; max-width: 100%; --decor: var(--stone); }
.l-niche { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 4.5; }
.l-niche--dark { background: var(--basalt) url(/assets/textures/marble-dark.webp) center / cover; }
.l-niche--light { background: var(--marble-2) url(/assets/textures/marble-light.webp) center / cover; }
.l-niche--stone { background: #D8CFBF url(/assets/textures/stone.webp) center / 420px repeat; }
.l-niche__in { position: absolute; z-index: 2; inset: 20% 3% 2%; }
.l-niche--dark .l-art { filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.5)); }
.l-tri__hint { margin-top: 12px; text-align: center; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); }
@media (max-width: 899px) {
  .l-tri { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 6px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; }
  .l-tri::-webkit-scrollbar { display: none; }
  .l-tri__col { display: none; }
  .l-niche { flex: 0 0 74%; max-width: 360px; scroll-snap-align: center; }
}

/* ---------- 7. ÉTUDES ---------- */
.l-studies { overflow: clip; padding-block: clamp(56px, 7vw, 112px); }
.l-studies__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.l-studies__side { display: grid; }
.l-studies__ctrl { display: flex; gap: 12px; }
.l-studies__btn { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--rule-strong); border-radius: 50%; color: var(--fg); transition: background var(--dur-2) var(--ease), color var(--dur-2), border-color var(--dur-2), opacity var(--dur-2); }
.l-studies__btn:hover:not(:disabled) { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.l-studies__btn:disabled { opacity: 0.3; cursor: default; }
.l-studies__btn .icon { width: 20px; height: 20px; }
.l-studies__scroller { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; cursor: grab; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.l-studies__scroller::-webkit-scrollbar { display: none; }
.l-studies__scroller:focus-visible { outline-offset: -4px; }
.l-studies__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.l-studies .l-studies__track { display: flex; gap: clamp(16px, 2vw, 32px); list-style: none; width: max-content; padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.l-study { flex: 0 0 clamp(268px, 31vw, 470px); scroll-snap-align: start; scroll-margin-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.l-study__fig { margin: 0; display: grid; gap: 18px; }
.l-study__art { position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-2); }
.l-study__art--dark { background: var(--basalt-2) url(/assets/textures/marble-dark.webp) center / cover; }
.l-study__art--light { background: var(--marble-2) url(/assets/textures/marble-light.webp) center / cover; }
.l-study__art--stone { background: #D8CFBF url(/assets/textures/stone.webp) center / 420px repeat; }
.l-study__crop { position: absolute; z-index: 2; inset: 0; filter: drop-shadow(0 18px 18px rgba(15, 14, 12, 0.3)); transition: transform 1.2s var(--ease); }
.l-study:hover .l-study__crop { transform: scale(1.04); }
/* Photo (maquette Printful 4:5) : plein cadre ; --zoom / --ox / --oy recadrent sur un détail (le nom sur la manche, l'emblème dans le dos) sans toucher au conteneur animé */
.l-study__crop--photo { filter: none; overflow: hidden; }
.l-study__crop--photo > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transform-origin: var(--ox, 50%) var(--oy, 50%); }
.l-study__crop--photo > img:not([data-fallback]) { transform: none; object-fit: contain; }   /* photo absente : l'illustration de repli reste entière */
/* Études : les rideaux se lèvent en cascade quand le rail entre à l'écran (le rail est le déclencheur : les études hors champ ne restent jamais voilées) */
html.js:not(.no-reveal) .l-study__art::after { content: ''; position: absolute; inset: -1px; z-index: 3; pointer-events: none; background: var(--bg); transform-origin: top; transition: transform 950ms var(--ease-in-out) calc(var(--si, 0) * 90ms); }
html.js:not(.no-reveal) .l-studies__scroller.is-revealed .l-study__art::after { transform: scaleY(0); }
html.js:not(.no-reveal) .l-study__crop { transition: transform 1200ms var(--ease) calc(var(--si, 0) * 90ms); }
html.js:not(.no-reveal) .l-studies__scroller:not(.is-revealed) .l-study__crop { transform: scale(1.07); }
.l-study:hover .l-study__crop { transform: scale(1.04); }
html.js .l-study:hover .l-study__crop { transition-delay: 0ms; }
html.js:not(.no-reveal) .l-study figcaption { transition: opacity 800ms var(--ease-out) calc(var(--si, 0) * 90ms + 450ms); }
html.js:not(.no-reveal) .l-studies__scroller:not(.is-revealed) .l-study figcaption { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .l-study__art::after { display: none !important; } }
.l-study figcaption { display: grid; gap: 6px; justify-items: start; }
.l-study__title { position: relative; display: inline-flex; align-items: center; min-height: 44px; font: 900 clamp(1rem, 0.88rem + 0.48vw, 1.3125rem)/1.1 var(--font-sans); letter-spacing: var(--brut-track-m); text-transform: uppercase; }
.l-study__title::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--accent-line, var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease); }
.l-study__title:hover::after, .l-study__title:focus-visible::after { transform: scaleX(1); }
.l-studies__foot { display: flex; align-items: center; gap: 24px; margin-top: clamp(28px, 4vw, 48px); }
.l-studies__progress { flex: 1; height: 2px; background: color-mix(in srgb, var(--fg) 18%, var(--bg)); position: relative; }
.l-studies__progress span { position: absolute; left: 0; top: -1px; height: 4px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0.08); transition: transform var(--dur-1) linear; }
.l-studies__hint { flex: none; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); }

/* ---------- 8. ÉPILOGUE ---------- */
.l-end { padding-block: clamp(64px, 8vw, 128px); }
.l-end__head { display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 28px); max-width: 52rem; margin: 0 auto; }
.l-end__cta { margin-top: 10px; }
/* Fronton plein au-dessus du titre : il se pose avant que les mots ne montent */
.l-end__ped { width: min(360px, 62%); aspect-ratio: 1480 / 334.3; margin-bottom: clamp(4px, 1vw, 12px); }

/* ---------- 9. FENÊTRE « COMPOSER CETTE ALLURE » ---------- */
.l-compose-modal { width: min(720px, calc(100% - 24px)); }
.l-compose-modal__title { margin: 8px 0 12px; font: 900 clamp(1.3125rem, 0.95rem + 1.22vw, 1.8125rem)/1.08 var(--font-sans); letter-spacing: var(--brut-track-m); text-transform: uppercase; }
.l-compose-modal__list { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--rule); }
.l-cmp { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.l-cmp__thumb { width: 64px; aspect-ratio: 4 / 5; background: var(--marble-2) url(/assets/textures/marble-light.webp) center / cover; }
.l-cmp__thumb .l-art { filter: none; }
.l-cmp__thumb > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.l-cmp__info { display: grid; gap: 2px; min-width: 0; }
.l-cmp__name { font: 900 0.875rem/1.2 var(--font-sans); letter-spacing: var(--brut-track-s); text-transform: uppercase; }
.l-cmp__name:hover { color: var(--accent); }
.l-cmp__color { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--fg-muted); }
.l-cmp__size .select { min-height: 44px; padding: 8px 40px 8px 14px; width: 92px; }
.l-cmp__unique { font-size: 0.8rem; color: var(--fg-muted); white-space: nowrap; }
.l-cmp__price { font: 600 0.875rem/1 var(--font-sans); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: right; }
@media (max-width: 560px) {
  .l-cmp { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .l-cmp__thumb { width: 56px; grid-row: 1 / span 2; }
  .l-cmp__size, .l-cmp__unique { grid-column: 2; grid-row: 2; justify-self: start; }
  .l-cmp__price { grid-column: 3; grid-row: 1 / span 2; }
}
.l-compose-modal__total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 0 6px; font: 600 0.72rem/1.3 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; }
.l-compose-modal__total strong { font: 700 1.5rem/1 var(--font-sans); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.l-compose-modal__actions { margin-top: 24px; }
@media (max-width: 560px) { .l-compose-modal__actions .btn { width: 100%; } }