:root {
  --airwell-blue: #0a5aa8;
  --airwell-blue-dark: #06407a;
  --airwell-blue-pale: #eaf2fb;
  --text: #1a1f26;
  --text-muted: #5a6473;
  --border: #cfd8e3;
  --white: #ffffff;
  --error: #c0392b;

  /* Site-chrome design system (screen only — the label/sheet documents
     keep their own regulated styling and are unaffected by these). */
  --page-bg: #f6f9fc;
  --card-radius: 14px;
  --control-radius: 8px;
  --shadow-sm: 0 1px 3px rgba(10, 42, 76, 0.08), 0 1px 2px rgba(10, 42, 76, 0.06);
  --shadow-md: 0 8px 28px rgba(10, 42, 76, 0.12), 0 2px 8px rgba(10, 42, 76, 0.06);
  --focus-ring: 0 0 0 3px rgba(10, 90, 168, 0.18);
  /* Regulation 626/2011 Annex III 1.5: all label borders are "cyan 100%"
     (process cyan, #009fe3 in RGB) — this replaced an earlier #5b9bd5 when
     the label was aligned to the regulation text itself. */
  --label-border: #009fe3;

  /* EU energy-class scale colors, sampled from the workbook's own label asset */
  --class-a3: #2fa84f;
  --class-a2: #4cb648;
  --class-a1: #9bc93e;
  --class-a: #eee325;
  --class-b: #f5a623;
  --class-c: #ea6b23;
  --class-d: #e2231a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--page-bg);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------- Site chrome ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 2rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.site-logo { height: 30px; width: auto; }
.header-title { font-weight: 600; font-size: 0.95rem; color: var(--airwell-blue-dark); }

.lang-picker { position: relative; margin-left: auto; }
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--airwell-blue);
  background: var(--white);
  color: var(--airwell-blue);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-weight: 600;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-toggle:hover { background: var(--airwell-blue); color: var(--white); }
.lang-icon { width: 16px; height: 16px; flex: 0 0 auto; }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  min-width: 160px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.lang-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
}
.lang-menu button:hover { background: var(--airwell-blue-pale); }
.lang-menu button[aria-current="true"] { color: var(--airwell-blue); font-weight: 700; }

/* Hero: the Harmonia lifestyle photo (soft blue wall + wall unit) with a
   left-to-right white gradient so the title sits on the image's calm,
   bright window side while the AC unit stays visible on the right. Extra
   bottom padding leaves room for the wizard card to overlap (negative
   margin below) without covering the hero text. */
.hero {
  position: relative;
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.82) 30%,
      rgba(255, 255, 255, 0.35) 60%,
      rgba(255, 255, 255, 0.05) 100%),
    url("../assets/images/17692_Montage_Image_Harmonia_v2_Blanc.jpg");
  background-size: cover;
  background-position: center 30%;
  padding: 4.5rem 2rem 7.5rem;
}
.hero-inner { max-width: 1200px; margin: 0 auto; }
.hero-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--airwell-blue);
}
.hero h1 {
  margin: 0;
  font-size: 2.3rem;
  line-height: 1.15;
  color: var(--airwell-blue-dark);
  max-width: 560px;
}
.hero-subtitle {
  margin: 1rem 0 0;
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 480px;
  line-height: 1.5;
}

main { max-width: 1200px; margin: 0 auto; padding: 0 2rem 3.5rem; }

/* ---------------- Wizard card ---------------- */
/* Floats up over the hero's bottom edge. */
.wizard {
  position: relative;
  z-index: 2;
  margin-top: -4.5rem;
  background: var(--white);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-md);
  padding: 2rem 2.25rem 1.75rem;
}

.step-title { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1rem; }
.step-title + .field-row { margin-top: 0.25rem; }
.wizard .step-title:not(:first-child) { margin-top: 1.75rem; }
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--airwell-blue);
  color: var(--white);
  font-weight: 700;
  font-size: 0.9rem;
  flex: 0 0 auto;
}
.step-title h2 { margin: 0; font-size: 1.05rem; color: var(--airwell-blue-dark); }

.field-row { display: flex; flex-direction: column; gap: 0.3rem; max-width: 420px; margin-bottom: 1rem; }
.field-row label { font-weight: 600; font-size: 0.9rem; }

select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.55rem 2.2rem 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a5aa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select:hover:not(:disabled) { border-color: var(--airwell-blue); }
select:focus { outline: none; border-color: var(--airwell-blue); box-shadow: var(--focus-ring); }
select:disabled {
  background-color: #f0f3f7;
  color: var(--text-muted);
  cursor: not-allowed;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9b4c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.idu-grid { display: grid; gap: 0.65rem; }
.idu-row {
  display: grid;
  grid-template-columns: 150px 1fr 200px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--page-bg);
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.idu-row:hover { border-color: var(--border); background: var(--white); }
/* Slots beyond the selected ODU's port count (see app.js onOduChange) —
   explicit rule needed because .idu-row's own display:grid would otherwise
   beat the UA stylesheet's [hidden] { display:none }. */
.idu-row[hidden] { display: none; }
.idu-row .idu-row-label { font-weight: 600; font-size: 0.9rem; color: var(--airwell-blue-dark); }

.wizard-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.btn {
  border: none;
  border-radius: var(--control-radius);
  padding: 0.65rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--airwell-blue); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--airwell-blue-dark); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; color: var(--airwell-blue); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--airwell-blue); background: var(--airwell-blue-pale); }
.btn-outline { background: var(--white); color: var(--airwell-blue-dark); border: 1px solid var(--airwell-blue); }
.btn-outline:hover { background: var(--airwell-blue-pale); }

.wizard-message { margin: 1rem 0 0; font-weight: 600; }
.wizard-message.error { color: var(--error); white-space: pre-line; }
.wizard-message.info { white-space: pre-line; }
.wizard-message.info { color: var(--airwell-blue-dark); }

/* ---------------- Results ---------------- */
.results { margin-top: 3rem; }
.results:not([hidden]) { animation: fade-up 0.4s ease both; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.results-step { margin-bottom: 1.25rem; }

.summary-strip { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; }
.summary-chip {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 0.75rem 1.1rem;
}
.summary-chip .chip-text { display: flex; flex-direction: column; gap: 0.1rem; }
.summary-chip .chip-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.summary-chip .chip-value { font-size: 1.15rem; font-weight: 700; color: var(--airwell-blue-dark); }
.class-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
}
.class-badge.a3 { background: var(--class-a3); }
.class-badge.a2 { background: var(--class-a2); }
.class-badge.a1 { background: var(--class-a1); }
.class-badge.a  { background: var(--class-a); }
.class-badge.b  { background: var(--class-b); }
.class-badge.c  { background: var(--class-c); }
.class-badge.d  { background: var(--class-d); }

.output-panels { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.panel {
  background: var(--white);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem 1.5rem;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-head h2 { margin: 0; font-size: 1rem; color: var(--airwell-blue-dark); }
.panel-head .btn { padding: 0.45rem 1rem; font-size: 0.85rem; white-space: nowrap; }

/* ---------------- Responsive ---------------- */
@media (max-width: 720px) {
  .site-header { padding: 0.7rem 1rem; }
  .header-title { display: none; }
  .hero { padding: 2.5rem 1.25rem 6rem; }
  .hero h1 { font-size: 1.6rem; }
  .hero-subtitle { font-size: 0.95rem; }
  main { padding: 0 1rem 2.5rem; }
  .wizard { margin-top: -4rem; padding: 1.4rem 1.2rem 1.2rem; }
  .idu-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .panel-head { flex-direction: column; align-items: flex-start; }
}

/* ---------------- Energy label ----------------
   Built as 6 independent modules (per spec worked out with the user):
   1) header, 2) SEER, 3) SCOP, 4) interior sound, 5) exterior sound,
   6) footer. Modules 2-5 each carry their own rounded border; 1 and 6
   don't. Outer label border and all module borders use --label-border.

   Sizing follows Regulation 626/2011 Annex III 1.5 where it doesn't
   conflict with the user's module wireframe: the label is 120 x >= 210 mm
   (mm/pt units are exact at CSS 96dpi both on screen and in print, so the
   same rules serve both), border weights 5pt outer / 2pt modules / 1pt
   divider, corners 3.5mm, bars 7mm with 1mm gaps, Calibri. Absolute pt
   font sizes from the regulation assume full-width scale bars; the user's
   half-/third-width bars can't hold 16pt letters, so in-bar/marker text is
   scaled down proportionally instead (the regular-label vs bold-value
   hierarchy is kept). */
.energy-label {
  width: 120mm;
  min-height: 210mm;
  display: flex;
  flex-direction: column;
  border: 5pt solid var(--label-border);
  border-radius: 3.5mm;
  padding: 12px;
  font-size: 12px;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  background: var(--white);
}
/* The columns block absorbs any height left under 210mm (its sound boxes
   and SCOP map-anchoring stretch internally), keeping the footer at the
   label's bottom edge. */
.energy-label > .label-columns { flex: 1 0 auto; }

/* --- Module 1: header ---
   Annex III 1.5's 102mm-of-120mm (85%) banner width assumes the
   regulation's own zero-padding label frame; this label has internal
   padding already providing that clearance from the border, so the banner
   fills 100% of the padded content area instead of shrinking further. */
.label-module-1 .banner-img { width: 100%; display: block; margin-bottom: 8px; }

/* Brand logo (left) / model references (right, right-aligned text): IDU
   refs first (muted), bold ODU ref last — order and styling per the user's
   own wireframe. The logo only needs its own width (flex:0 0 auto), so the
   model block gets everything else — previously both shared a 50/50 split,
   which left grouped 2-model lines ("X, Y") too narrow and wrapping onto a
   2nd visual line, blowing the header past its intended 4-row budget. Only
   the *column's* width changed to fix that — the text itself stays
   right-aligned within that now-wider column (a brief right→left→right
   round trip: widening the column got misread as wanting left-aligned
   text too, which wasn't the ask). */
.brand-model-row { display: flex; gap: 12px; align-items: flex-start; }
.brand-model-row .brand-block { flex: 0 0 auto; }
.brand-model-row .model-block { flex: 1; min-width: 0; }
.brand-model-row .brand-logo { height: 24px; width: auto; }
.brand-model-row .model-block { text-align: right; font-size: 11px; }
.brand-model-row .model-lines { color: var(--text-muted); white-space: nowrap; }
.brand-model-row .odu-ref { font-weight: 700; margin-top: 2px; }

/* "Sub-logos border" (Annex III 1.5): same reasoning as the banner above —
   103.6mm-of-120mm (86%) assumes zero label padding; with this label's own
   padding already providing border clearance, the divider fills 100% of
   the content width. */
.label-header-divider { border-top: 1pt solid var(--label-border); width: 100%; margin: 10px 0; }

/* --- Modules 2-5 layout: two columns. Left (narrower — SEER, sound x2)
   vs right (wider — SCOP) per the user's explicit width instructions.
   align-items:stretch (not flex-start) so both columns share the taller
   column's height (SCOP's, since it includes the map) — the two sound
   boxes then flex-grow to fill whatever's left after SEER's own height,
   so the left column's bottom edge lines up with SCOP's. */
.label-columns { display: flex; gap: 10px; align-items: stretch; }
.label-columns-left { flex: 0.85; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.label-columns-right { flex: 1.15; min-width: 0; }
.label-columns-left > .seer-module { flex: 0 0 auto; }
.label-columns-left > .sound-box { flex: 1 1 0; }

.label-module {
  border: 2pt solid var(--label-border);
  border-radius: 3.5mm;
  padding: 8px;
}

/* Annex III 1.5: "SEER"/"SCOP" indication text is Calibri REGULAR 10pt
   capitals (an earlier pass had it bold, which the regulation doesn't).
   Markup order is text-then-icon (see js/label-template.js) per direction. */
.scale-heading { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 10pt; margin-bottom: 6px; }
.scale-heading img { height: 20px; width: auto; }
/* icon-seer.png's fan glyph sits in a taller/narrower canvas than
   icon-scop.png's (123x61 vs 124x54) — at the same rendered height the
   SEER fan itself reads visually smaller, so it gets a bit more height to
   match SCOP's apparent icon size. */
.seer-module .scale-heading img { height: 23px; }

.scale-wrap { position: relative; }
/* Bars 7mm tall with 1mm gaps (Annex III 1.5) — keep in sync with
   ROW_HEIGHT (26) / ROW_GAP (4) in js/label-template.js (26px ≈ 7mm,
   4px ≈ 1mm at 96dpi). Arrow tips are a fixed 9px deep so every bar's
   chevron head has the same shape regardless of the bar's width (a
   %-based tip made short bars' heads shallower than long bars'). */
.scale-bars { display: flex; flex-direction: column; gap: 1mm; }
.scale-bar {
  box-sizing: border-box;
  height: 7mm;
  line-height: 7mm;
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  padding: 0 5px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
  white-space: nowrap;
  overflow: hidden;
}
.scale-bar.a3 { background: var(--class-a3); }
.scale-bar.a2 { background: var(--class-a2); }
.scale-bar.a1 { background: var(--class-a1); }
.scale-bar.a  { background: var(--class-a); }
.scale-bar.b  { background: var(--class-b); }
.scale-bar.c  { background: var(--class-c); }
.scale-bar.d  { background: var(--class-d); }

/* Markers are positioned against .scale-wrap / .scop-scale-figures (never
   inside a clipped .scale-bar) so their own clip-path chevron isn't cut
   off by the bar's clip-path. */
/* Energy-efficiency-class arrow (Annex III 1.5): 11 x 10 mm nominal, 100%
   black, class text in bold white, taller than the 7mm scale bars — the
   min-width lets it grow for "A+++". The regulation's 18pt text assumes
   the full-size official layout; scaled down here to fit the 11mm arrow
   (see the .energy-label comment). */
.scale-marker {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  height: 10mm;
  min-width: 11mm;
  padding: 0 7px 0 16px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  transform: translateY(-50%);
}
/* Module 2 (SEER): marker fixed to the module's right edge, independent of
   which row/class it's marking. */
.scale-marker-right { right: 0; }

/* Module 3 (SCOP): each marker's LEFT edge (its pointed tip) sits exactly
   on its column's left boundary, body extending rightward through that
   column — set via inline `left` in JS (colStarts), not CSS, since the
   three column widths are computed together (scale zone + 3 equal value
   columns) rather than fixed fractions. */

/* Figures (Annex III 1.5): labels ("kW"/"SEER"/"kWh/annum") Calibri
   regular 10pt 100% black (not muted grey), values bold 11pt black. */
.scale-figures { margin-top: 8px; font-size: 10pt; }
.scale-figures .figure-row { display: flex; justify-content: space-between; gap: 6px; padding: 1px 0; }
.scale-figures .figure-row span:last-child { font-weight: 700; font-size: 11pt; }

/* --- Modules 4 & 5: interior / exterior sound ---
   Annex III 1.5 noise emissions: value bold 15pt, unit text regular 12pt. */
.sound-box { display: flex; align-items: center; gap: 10px; }
.sound-box img { height: 12mm; width: auto; }
.sound-box .db-value { font-weight: 700; font-size: 15pt; }
.sound-box .db-unit { font-weight: 400; font-size: 12pt; margin-left: 2px; }

/* --- Module 3: SCOP's 3-column (Warmer / Average / Colder) area, scale
   through legend, with thin divider lines spanning the whole thing.
   4 grid tracks: [scale/label zone, 1/3 wide] [Warmer] [Average] [Colder]
   (the last 3 equally split the remaining 2/3) — matches colStarts in JS. */
.scop-scale-figures { position: relative; margin-top: 0; }
.scop-col-divider { position: absolute; z-index: 1; top: 0; bottom: 0; width: 1px; background: var(--label-border); }

/* Same regular-10pt-label / bold-11pt-value hierarchy as .scale-figures. */
.scop-figures-grid { margin-top: 8px; font-size: 10pt; }
.scop-figure-row { display: grid; grid-template-columns: 33.33% 22.22% 22.22% 22.22%; padding: 1px 0; align-items: baseline; }
.scop-fig-cell { display: flex; }
.scop-fig-cell.col-label { justify-content: flex-start; }
.scop-fig-cell.col-warmer,
.scop-fig-cell.col-average,
.scop-fig-cell.col-colder { justify-content: center; }
.scop-fig-cell .fig-value { font-weight: 700; font-size: 11pt; }

/* Colour squares matched to the climate-map asset's own zone colours (the
   official EU map graphic) — the regulation gives them only as CMYK
   (orange 00-46-46-00, green 59-00-47-00, blue 54-08-00-00), and the map
   asset is the authoritative RGB rendering of exactly those inks. */
.scop-legend-grid { display: grid; grid-template-columns: 33.33% 22.22% 22.22% 22.22%; margin-top: 4px; }
.legend-cell { display: flex; justify-content: center; }
.legend-swatch { width: 4mm; height: 4mm; border-radius: 2px; }
.legend-swatch.warmer { background: #e8897a; }
.legend-swatch.average { background: #4fae8c; }
.legend-swatch.colder { background: #5b9fd6; }
.map-img { width: 100%; display: block; margin-top: auto; padding-top: 4px; border-radius: 4px; overflow: hidden; }

/* SCOP module stretches to the columns' full height, with the map anchored
   to its bottom (margin-top:auto on .map-img) so the module fills the
   210mm label without stretching the scale/figures block itself. */
.scop-module { display: flex; flex-direction: column; height: 100%; }
.label-columns-right { display: flex; flex-direction: column; }

/* --- Module 6: footer ---
   Multilingual "Energy" translations left, "626/2011" reference period
   right (Annex III 1.5: Calibri bold 10pt) — same line, per the official
   figure. Rendered as real text (see FOOTER_WORDS in js/label-template.js)
   instead of the original raster asset, which was low-resolution and blurred
   when the label was scaled up. */
.label-module-6 { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.label-footer-text { flex: 1; min-width: 0; font-size: 8pt; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-ref-period { font-weight: 700; font-size: 10pt; white-space: nowrap; }

/* ---------------- Product sheet ---------------- */
.product-sheet {
  width: 480px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px 20px;
  font-size: 12.5px;
  background: var(--white);
}
.product-sheet .sheet-lang-block + .sheet-lang-block { margin-top: 22px; border-top: 2px solid var(--airwell-blue-pale); padding-top: 16px; }
.product-sheet h3 { color: var(--airwell-blue-dark); font-size: 1.05rem; margin: 0 0 10px; }
.product-sheet h4 { color: var(--airwell-blue-dark); font-size: 0.92rem; margin: 14px 0 6px; }
.sheet-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.sheet-row .label { color: var(--text-muted); }
.sheet-row .value { font-weight: 600; text-align: right; }
.sheet-note { font-size: 10.5px; color: var(--text-muted); margin-top: 10px; line-height: 1.4; }

/* ---------------- Print ---------------- */
@media print {
  /* Chrome (and other browsers) drop background colors/images by default
     when printing, to save ink — which silently ate every scale-bar color,
     marker background, and legend swatch on export. This forces them to
     print regardless of the browser's own "background graphics" checkbox. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }

  .no-print, .site-header, .site-footer, .hero, .wizard { display: none !important; }
  body.printing-label .product-sheet, body.printing-label .sheet-panel { display: none !important; }
  body.printing-sheet .energy-label, body.printing-sheet .label-panel { display: none !important; }
  body { background: var(--white); }
  .results { margin-top: 0; animation: none; }
  .output-panels { display: block; }
  .panel { box-shadow: none; background: transparent; padding: 0; border-radius: 0; }
  .product-sheet { width: auto; max-width: 400px; margin: 0 auto; }
  /* The label prints at its regulated size — 120mm wide, min 210mm high
     (Annex III 1.5(i)) — which fits A4 minus 10mm margins with room to
     spare, so no shrink overrides: screen and print render identically
     (the label is specced in mm/pt units that mean the same in both). */
  .energy-label { margin: 0 auto; }
  @page { size: A4 portrait; margin: 10mm; }
}

.site-footer {
  background: var(--airwell-blue-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: 1.4rem 2rem;
  text-align: center;
  font-size: 0.85rem;
}
.site-footer p { margin: 0; }
.site-footer .disclaimer {
  margin: 0.6rem auto 0;
  max-width: 720px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}