/* ============================================================
   WAVE 2 — Bespoke scope-overview utilities
   ============================================================ */

/* Material strip variant (bespoke veneer species swatches, 7 columns)
   The base .material-strip already exists with 5 cols; override widths in-page. */
.material-strip-7 {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2.5mm; margin: 4mm 0;
}
.material-strip-7 .material-swatch {
  height: 28mm; border-radius: 0; border: 0.5pt solid var(--hairline);
  box-shadow: none;
}
.material-strip-7 .material-swatch .label,
.material-strip .material-swatch.lbl-eyebrow .label {
  background: transparent; color: var(--navy);
  position: static; padding: 2mm 0 0 0;
  font-family: 'Inter', sans-serif; font-size: 7.5pt;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-align: center; font-weight: 600;
}
.material-strip-7 .material-swatch .label-wrap {
  position: absolute; left: 0; right: 0; bottom: -7mm;
  text-align: center; font-family:'Inter',sans-serif;
  font-size: 7.5pt; letter-spacing:0.18em; text-transform:uppercase;
  color: var(--navy); font-weight:600;
}
.mat-walnut-w  { background: linear-gradient(135deg, #4A2E1F, #6B4128, #4A2E1F); }
.mat-oak-w     { background: linear-gradient(135deg, #B89968, #C9AC7F, #B89968); }
.mat-teak-w    { background: linear-gradient(135deg, #9C6B3F, #B27E4F, #9C6B3F); }
.mat-mahog-w   { background: linear-gradient(135deg, #6B2D1F, #843827, #6B2D1F); }
.mat-beech-w   { background: linear-gradient(135deg, #D4A574, #E0B689, #D4A574); }

/* Sectional SVG drawing wrapper */
.section-detail-svg {
  border-top: 0.5pt solid var(--hairline);
  border-bottom: 0.5pt solid var(--hairline);
  padding: 5mm 0; margin: 4mm 0;
}
.section-detail-svg svg { display: block; width: 100%; height: auto; }

/* Spec table — minimalist editorial */
.spec-table {
  width: 100%; border-collapse: collapse;
  border-top: 0.75pt solid var(--navy);
  border-bottom: 0.75pt solid var(--navy);
  font-family: 'Inter', sans-serif; font-size: 9pt;
  color: var(--navy); margin: 3mm 0;
}
.spec-table thead th {
  border-bottom: 0.5pt solid var(--hairline);
  text-align: start; padding: 2mm 1mm;
  font-size: 7.5pt; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--navy);
}
.spec-table tbody td {
  padding: 2mm 1mm; border: 0;
  font-size: 9pt; line-height: 1.5;
}
.spec-table tbody tr + tr td { border-top: 0.25pt dotted var(--hairline); }

/* Process arc — small 4-step horizontal sub-process */
.process-arc {
  display: grid; grid-template-columns: repeat(7, auto);
  align-items: center; justify-content: start;
  margin: 4mm 0; gap: 0;
}
.process-arc .pa-node {
  width: 12mm; height: 12mm; border-radius: 50%;
  border: 1pt solid var(--gold); background: var(--navy);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12pt; font-weight: 500;
}
.process-arc .pa-line {
  width: 14mm; height: 0.5pt; background: var(--hairline);
}
.process-arc .pa-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 1.5mm;
}
.process-arc .pa-label {
  font-family: 'Inter', sans-serif; font-size: 7.5pt;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); font-weight: 700; white-space: nowrap;
}
.process-arc .pa-ar {
  font-family: 'Tajawal', sans-serif; font-size: 8pt; color: var(--ink-soft);
}

/* Swatch grid — color/finish 4xN */
.swatch-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 3mm; margin: 4mm 0;
}
.swatch-grid .sw-tile {
  display: flex; flex-direction: column; gap: 1.5mm;
}
.swatch-grid .sw-fill {
  height: 18mm; border: 0.5pt solid var(--hairline);
}
.swatch-grid .sw-cap {
  font-family: 'Inter', sans-serif; font-size: 7.5pt;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy); font-weight: 600;
}
.swatch-grid .sw-hex {
  font-family: 'Inter', sans-serif; font-size: 7pt;
  color: var(--ink-soft); letter-spacing: 0.06em;
}

/* Scope hero split (60/40 or 70/30) primitive */
.scope-hero-split {
  display: grid; gap: 6mm;
}
.scope-hero-split.s-60-40 { grid-template-columns: 60fr 40fr; }
.scope-hero-split.s-70-30 { grid-template-columns: 70fr 30fr; }
.scope-hero-split.s-50-50 { grid-template-columns: 1fr 1fr; }
.scope-hero-split .sh-photo {
  background-size: cover; background-position: center;
  position: relative; min-height: 90mm;
}

/* Numeral display medium (between sm 96 and 200) */
.numeral-display-md {
  font-family: var(--font-display);
  font-size: 140pt; line-height: 1;
  color: var(--gold); font-weight: 400; letter-spacing: -0.02em;
}

/* Mini icon container 14mm */
.icon-mini {
  height: 14mm; width: 14mm;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-mini svg {
  width: 100%; height: 100%;
  stroke: var(--navy); stroke-width: 1.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Bespoke per-scope scaffolds */

/* FF&E: 3 stacked axes block */
.axis-block { display: flex; flex-direction: column; gap: 5mm; margin-top: 5mm; }
.axis-row { display: grid; grid-template-columns: 14mm 1fr; gap: 4mm; align-items: start; }
.axis-row .ax-body h5 {
  font-family: 'Tajawal', sans-serif; font-size: 12pt;
  font-weight: 700; color: var(--navy); margin-bottom: 1.5mm;
}
.axis-row .ax-body ul { list-style: none; padding: 0; margin: 0; }
.axis-row .ax-body ul li {
  font-family: 'Inter', sans-serif; font-size: 9pt;
  color: var(--ink-soft); padding-inline-start: 5mm; position: relative;
  line-height: 1.5; margin-bottom: 1mm;
}
.axis-row .ax-body ul li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; top: 4.5pt;
  width: 4px; height: 4px; background: var(--gold); border-radius: 50%;
}

/* Doors: badge stack */
.badge-stack { display: flex; flex-direction: column; gap: 3mm; }
.badge-stack .badge-pill {
  justify-content: flex-start; padding: 2.5mm 5mm;
  font-size: 9.5pt;
}

/* Doors: hardware strip */
.hardware-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4mm; margin-top: 4mm;
}
.hardware-strip .hw-tile { display: flex; flex-direction: column; gap: 1.5mm; }
.hardware-strip .hw-tile .imgph { height: 26mm; background-size: cover; background-position: center; }

/* Curtains: 3-col scope columns */
.scope-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm; margin-top: 5mm; }
.scope-3col .col h5 {
  font-family: 'Tajawal', sans-serif; font-size: 12pt;
  font-weight: 700; color: var(--navy); margin: 2mm 0 1.5mm;
}
.scope-3col .col ul { list-style: none; padding: 0; margin: 0; }
.scope-3col .col ul li {
  font-family: 'Inter', sans-serif; font-size: 9pt;
  color: var(--ink-soft); line-height: 1.5;
  padding-inline-start: 5mm; position: relative; margin-bottom: 1mm;
}
.scope-3col .col ul li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; top: 4.5pt;
  width: 4px; height: 4px; background: var(--gold); border-radius: 50%;
}

/* Vitrines: full bleed hero with overlay */
.vit-hero {
  position: relative; height: 60%; min-height: 130mm;
  background-size: cover; background-position: center;
  margin: -12mm -12mm 0 -12mm;
  width: calc(100% + 24mm);
}
.vit-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,24,51,0) 50%, rgba(6,24,51,0.78) 100%);
}
.vit-hero .vit-hero-text {
  position: absolute; bottom: 8mm; inset-inline-start: 12mm;
  inset-inline-end: 12mm; color: #fff; z-index: 2;
}
.vit-hero .vit-hero-text .eyebrow { color: var(--gold-light); }
.vit-hero .vit-hero-text h2 {
  font-family: var(--font-display); font-size: 48pt;
  color: #fff; font-weight: 400; line-height: 1.05; margin-top: 3mm;
}

/* Replicas: editorial mosaic */
.rep-mosaic-edit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2mm;
  height: 100%;
}
.rep-mosaic-edit .rm-a { grid-row: 1 / 3; }
.rep-mosaic-edit .rm-b { grid-row: 1; }
.rep-mosaic-edit .rm-c { grid-row: 2; }
.rep-mosaic-edit .rm-d { grid-row: 3; }
.rep-mosaic-edit .rm-e { grid-row: 3; }
.rep-mosaic-edit .imgph {
  background-size: cover; background-position: center;
  border-bottom: 1pt solid var(--gold);
}

/* Print: CMYK calibration strip */
.cmyk-strip { display: flex; flex-direction: column; gap: 1.5mm; margin: 4mm 0 3mm; }
.cmyk-strip .cmyk-row { display: grid; grid-template-columns: 12mm 1fr; align-items: center; gap: 3mm; }
.cmyk-strip .cmyk-bar { height: 6mm; }
.cmyk-strip .cmyk-c { background: #00AEEF; }
.cmyk-strip .cmyk-m { background: #EC008C; }
.cmyk-strip .cmyk-y { background: #FFF200; }
.cmyk-strip .cmyk-k { background: #1A1A1A; }
.cmyk-strip .cmyk-lbl {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--navy); font-weight: 700;
}

/* Image + editorial caption helper */
.fig-cap-wrap { display: flex; flex-direction: column; gap: 1.5mm; }
.fig-cap-wrap .imgph {
  background-size: cover; background-position: center;
}

/* ============================================================
   WAVE 3 · Bespoke Catalog Variants
   ============================================================ */

/* Editorial product card (FF&E variant) */
.cat-grid-editorial {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 5mm; margin-top: 4mm;
}
.product-card-editorial {
  display: flex; flex-direction: column;
  background: #fff;
  border: 0.4pt solid var(--hairline);
  break-inside: avoid;
}
.product-card-editorial .pce-photo {
  height: 48mm;
  background-size: cover; background-position: center;
  border-bottom: 0.4pt solid var(--hairline);
}
.product-card-editorial .pce-body {
  padding: 3mm 3.5mm 3.5mm;
  display: flex; flex-direction: column; gap: 1.5mm;
}
.product-card-editorial .pce-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 9pt;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.product-card-editorial .pce-name-ar {
  font-family: 'Tajawal', sans-serif; font-size: 13pt;
  font-weight: 700; color: var(--navy); line-height: 1.2;
}
.product-card-editorial .pce-name-en {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 10pt;
  color: var(--ink-soft); margin-top: -1mm;
}
.spec-mini {
  width: 100%; border-collapse: collapse; margin-top: 2mm;
}
.spec-mini tr td {
  font-family: 'Inter', sans-serif; font-size: 8.5pt;
  padding: 1mm 0; border-bottom: 0.25pt dotted var(--hairline);
  color: var(--ink-soft);
}
.spec-mini tr:last-child td { border-bottom: none; }
.spec-mini tr td:first-child {
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy); font-weight: 600; width: 30%;
}
.spec-mini tr td:last-child { text-align: left; direction: ltr; }

/* Book-matched veneer pair (Veneer variant) */
.veneer-bookmatch-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 5mm; margin-top: 4mm;
}
.bookmatch-tile { display: flex; flex-direction: column; gap: 2mm; break-inside: avoid; }
.bookmatch-pair {
  display: flex; height: 50mm;
  border: 0.4pt solid var(--hairline);
  background: #fff;
}
.bookmatch-pair .bm-half {
  flex: 1; background-size: cover; background-position: center;
}
.bookmatch-mirror { transform: scaleX(-1); }
.bookmatch-pair .bm-divider {
  width: 0.4pt; background: var(--hairline);
}
.bookmatch-tile .bm-name {
  font-family: 'Tajawal', sans-serif; font-size: 12pt;
  font-weight: 700; color: var(--navy);
}
.bookmatch-tile .bm-grade {
  font-family: 'Inter', sans-serif; font-size: 9pt;
  letter-spacing: 0.1em; color: var(--ink-soft);
}

/* Tall portrait door tile (Doors variant) */
.door-grid-portrait {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 5mm; margin-top: 4mm;
}
.door-tile-portrait {
  display: flex; flex-direction: column; gap: 2mm;
  break-inside: avoid;
}
.door-tile-portrait .dt-img {
  height: 75mm; width: 100%;
  background-size: cover; background-position: center;
  border: 0.4pt solid var(--hairline);
}
.door-tile-portrait .dt-name {
  font-family: 'Tajawal', sans-serif; font-size: 12pt;
  font-weight: 700; color: var(--navy); margin-top: 1mm;
}
.door-tile-portrait .dt-code {
  font-family: 'Inter', sans-serif; font-size: 9pt;
  letter-spacing: 0.18em; color: var(--gold);
  text-transform: uppercase; font-weight: 600;
}
.door-tile-portrait .dt-badges {
  display: flex; gap: 1.5mm; margin-top: 1.5mm; flex-wrap: wrap;
}
.badge-pill-mini {
  display: inline-flex; align-items: center;
  background: #fff; border: 0.6pt solid var(--gold);
  border-radius: 50px; padding: 0.6mm 2.6mm;
  font-family: 'Inter', sans-serif; font-size: 7.5pt;
  font-weight: 600; color: var(--navy); letter-spacing: 0.08em;
}

/* Layered curtain system (Curtains variant) */
.curtain-grid-layered {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 5mm; margin-top: 4mm;
}
.curtain-tile-layered {
  display: flex; flex-direction: column;
  background: #fff;
  border: 0.4pt solid var(--hairline);
  break-inside: avoid;
}
.curtain-tile-layered .ct-img {
  height: 42mm;
  background-size: cover; background-position: center;
  border-bottom: 0.4pt solid var(--hairline);
}
.curtain-tile-layered .ct-body {
  padding: 2.5mm 3mm 3mm;
  display: flex; flex-direction: column; gap: 1.5mm;
}
.curtain-tile-layered .ct-system {
  font-family: 'Tajawal', sans-serif; font-size: 12pt;
  font-weight: 700; color: var(--navy);
}
.curtain-tile-layered .ct-spec {
  font-family: 'Inter', sans-serif; font-size: 9pt;
  color: var(--ink-soft); letter-spacing: 0.04em;
}
.layer-bars {
  display: flex; gap: 1.5mm; height: 8mm; margin-top: 1mm;
  align-items: stretch;
}
.layer-bars .lb-bar {
  flex: 1; display: flex; align-items: flex-end; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 6.5pt;
  letter-spacing: 0.1em; color: #fff; font-weight: 600;
  padding-bottom: 0.5mm; text-transform: uppercase;
}
.layer-bars .lb-sheer    { background: #C9B79A; }
.layer-bars .lb-blackout { background: #1A1F2C; }
.layer-bars .lb-track    { background: #6B4128; }
.layer-bars .lb-acoustic { background: #4A5060; }
.layer-bars .lb-velvet   { background: #59203A; }
.layer-bars .lb-motor    { background: #B89968; color: var(--navy); }

/* Vitrine tiles + spec table (Vitrines variant) */
.vit-cat-types {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 4mm; margin-top: 3mm;
}
.vit-cat-tile {
  display: flex; gap: 3mm; align-items: stretch;
  border: 0.4pt solid var(--hairline); background: #fff;
  break-inside: avoid;
}
.vit-cat-tile .vct-img {
  width: 38mm; min-height: 30mm;
  background-size: cover; background-position: center;
  border-left: 0.4pt solid var(--hairline);
  border-right: 0.4pt solid var(--hairline);
}
.vit-cat-tile .vct-body {
  flex: 1; padding: 2.5mm 3mm;
  display: flex; flex-direction: column; gap: 1mm;
}
.vit-cat-tile .vct-name {
  font-family: 'Tajawal', sans-serif; font-size: 12pt;
  font-weight: 700; color: var(--navy);
}
.vit-cat-tile .vct-name .en {
  display: block;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 9.5pt; color: var(--ink-soft); margin-top: 0;
}
.vit-cat-tile .vct-use {
  font-family: 'Inter', sans-serif; font-size: 9pt;
  color: var(--ink-soft); line-height: 1.4;
}

/* Scale comparator (Replicas variant) */
.scale-comparator {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 3mm; margin-top: 3mm; margin-bottom: 5mm;
}
.scale-comparator .sc-cell {
  display: flex; flex-direction: column; align-items: center; gap: 1mm;
}
.scale-comparator .sc-img {
  width: 100%; height: 22mm;
  background-size: cover; background-position: center;
  border: 0.4pt solid var(--hairline);
}
.scale-comparator .sc-rule {
  width: 100%; height: 1.2pt; background: var(--gold);
  margin-top: 0.5mm;
}
.scale-comparator .sc-scale {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 11pt; color: var(--navy); font-weight: 600;
}
.scale-comparator .sc-name {
  font-family: 'Inter', sans-serif; font-size: 7.5pt;
  letter-spacing: 0.12em; color: var(--ink-soft);
  text-transform: uppercase; text-align: center;
}
.replica-cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 5mm; margin-top: 3mm;
}
.replica-cat-card {
  display: flex; flex-direction: column; gap: 1.5mm;
  break-inside: avoid;
}
.replica-cat-card .rcc-img {
  height: 36mm; background-size: cover; background-position: center;
  border: 0.4pt solid var(--hairline);
}
.replica-cat-card .rcc-name {
  font-family: 'Tajawal', sans-serif; font-size: 12pt;
  font-weight: 700; color: var(--navy); margin-top: 1mm;
}
.replica-cat-card .rcc-method {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 10pt; color: var(--ink-soft);
}

/* Print substrate matrix (Print variant) */
.matrix-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4mm; margin-top: 3mm;
}
.matrix-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 0.4pt solid var(--hairline);
  break-inside: avoid;
}
.matrix-card .mc-img {
  height: 30mm;
  background-size: cover; background-position: center;
  border-bottom: 0.4pt solid var(--hairline);
}
.matrix-card .mc-body {
  padding: 2mm 3mm 2.5mm;
  display: flex; flex-direction: column; gap: 0.8mm;
}
.matrix-card .mc-name {
  font-family: 'Tajawal', sans-serif; font-size: 11pt;
  font-weight: 700; color: var(--navy); line-height: 1.2;
}
.matrix-card .mc-name .en {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 9pt; color: var(--ink-soft);
}
.matrix-card .mc-spec {
  font-family: 'Inter', sans-serif; font-size: 8.5pt;
  color: var(--ink-soft); letter-spacing: 0.04em;
  margin-top: 0.5mm;
}