/* Vektor Vision: shared presentation for the comparator and aluminium windows.
   Product data, comparison states, native illustrations and interactions are separate. */
.wpc {
  --wpc-gold: var(--gold2, #e5c982);
  --wpc-line: #c9a35a38;
  --wpc-surface: #0d1011;
  max-width: 1240px;
  margin: auto;
  padding: 56px 40px 88px;
  color: #eee;
  line-height: 1.7;
  text-align: left;
  overflow-wrap: anywhere;
}
.wpc, .wpc * { box-sizing: border-box; }
.page.wpc-page {
  padding-top: 88px;
  background: radial-gradient(ellipse at 88% 0, #c9a35a16, transparent 34%), #030405;
}
.wpc h1, .wpc h2, .wpc h3 { text-transform: none; }
.wpc h1 {
  max-width: 950px;
  margin: 18px 0 24px;
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.wpc h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; margin: 16px 0 22px; }
.wpc h3 { font-size: 19px; line-height: 1.35; margin: 24px 0 12px; }
.wpc h4 { font-size: 15px; font-weight: 600; margin: 24px 0 10px; color: var(--wpc-gold); }
.wpc p { max-width: none; font-size: 16px; }
.wpc a { display: inline-block; min-height: 44px; padding-block: 8px; color: var(--wpc-gold); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #e5c98277; }
.wpc a:hover { color: #f0dfb4; text-decoration-color: currentColor; }
.wpc :is(a, button, select, input, summary, [tabindex]):focus-visible { outline: 3px solid #ffdb8d; outline-offset: 4px; }
.wpc :is(input, select, button, summary, [tabindex]) { scroll-margin-top: 112px; scroll-margin-bottom: 24px; }
.wpc-crumbs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; font-weight: 500; color: #c8c8c8; margin-bottom: 30px; }
.wpc-crumbs a { text-decoration: none; }
.wpc-eyebrow { display: flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .18em; font-size: 11px !important; font-weight: 700; color: var(--wpc-gold); }
.wpc-eyebrow::before { content: ''; flex: 0 0 28px; height: 1px; background: currentColor; }
.wpc-lead { max-width: 790px !important; color: #d3d3d3; font-size: 19px !important; line-height: 1.7; margin-bottom: 36px; }
.wpc-fine { font-size: 13px !important; color: #c9c9c9; line-height: 1.7; }
.wpc-note { background: #111414; border: 1px solid var(--wpc-line); border-left: 2px solid var(--wpc-gold); padding: 22px 28px; border-radius: 0 14px 14px 0; margin: 32px 0; }
.wpc-note > :first-child { margin-top: 0; }
.wpc-note > :last-child { margin-bottom: 0; }
.wpc-note > strong { color: #f0dfb4; }
.wpc-note p { font-size: 14px; color: #d0d0d0; }
.wpc-controls { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 24px; align-items: end; margin: 40px 0 16px; padding: 26px; border: 1px solid var(--wpc-line); border-radius: 18px; background: linear-gradient(135deg, #141616, #090c0d); }
.wpc label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: #e8dfca; }
.wpc select, .wpc input { display: block; width: 100%; max-width: 100%; margin-top: 10px; padding: 14px 12px; min-height: 50px; border: 1px solid #78766d; border-radius: 8px; background: #0a0d0e; color: #fff; font: inherit; }
.wpc select:hover, .wpc input:hover { border-color: var(--wpc-gold); }
.wpc input::placeholder { color: #b1b1b1; }
.wpc button { min-height: 50px; min-width: 48px; border: 1px solid #9d8459; border-radius: 8px; background: #28241e; color: #f0dfb4; padding: 12px 20px; font: inherit; font-weight: 600; cursor: pointer; }
.wpc button:hover { border-color: var(--wpc-gold); background: #332d21; }
.wpc button:disabled { cursor: default; opacity: .7; }
.wpc-panels, .wpc-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.wpc-panel, .wpc-card { min-width: 0; padding: 28px; border: 1px solid var(--wpc-line); border-radius: 18px; background: linear-gradient(155deg, #151718, #090c0d); box-shadow: 0 20px 50px #0003; }
.wpc-panel { border-top: 2px solid #c9a35a88; }
.wpc-panel h2 { font-size: clamp(20px,2.2vw,28px); margin: 12px 0 20px; }
.wpc-panel p { font-size: 14px; }
.wpc-panel img { display: block; object-fit: scale-down; width: 100%; height: 280px; background: #fff; border-radius: 10px; }
.wpc-placeholder { display: grid; place-items: center; min-height: 280px; padding: 24px; border: 1px dashed #777; border-radius: 10px; color: #ccc; text-align: center; background: #15191b; }
.wpc-grid > .wpc-card { display: flex; flex-direction: column; }
.wpc-grid > .wpc-card h2 { color: var(--wpc-gold); }
.wpc-grid > .wpc-card p { font-size: 14px; }
.wpc-grid > .wpc-card p:last-of-type { flex: 1; }
.wpc .wpc-card a { align-self: flex-start; padding: 10px 0; margin-right: 18px; min-height: 44px; font-weight: 600; font-size: 14px; }
.wpc-grid > figure { margin: 0; padding: 32px; border-radius: 18px; background: #fff; border: 1px solid #d7d7d7; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wpc-grid > figure img { display: block; width: auto; max-height: 320px; object-fit: scale-down; }
.wpc-grid > figure figcaption { margin: 24px 0 0; font-size: 12px; color: #454545; text-align: center; line-height: 1.6; }
.wpc ul { padding-left: 20px; }
.wpc li { margin: 12px 0; color: #d8d8d8; }
.wpc li::marker { color: var(--wpc-gold); }
.wpc [data-profile-comparison] > h2, .wpc > section > h2:first-child { margin-top: 56px; }
.wpc-table { overflow-x: auto; max-width: 100%; border: 1px solid #555; border-radius: 14px; margin: 20px 0 48px; }
.wpc table { width: 100%; min-width: 650px; table-layout: fixed; border-collapse: collapse; text-align: left; }
.wpc caption { text-align: left; color: #cfcfcf; padding: 20px 24px; background: #111516; font-size: 13px; }
.wpc th, .wpc td { vertical-align: top; padding: 22px 20px; border: 1px solid #45494b; }
.wpc th { font-size: 14px; background: #121719; color: #f0dfb4; font-weight: 600; }
.wpc th:first-child { width: 24%; }
.wpc th small { display: block; color: #c8c8c8; font-weight: 400; margin-top: 6px; }
.wpc td strong { font-size: 20px; font-weight: 600; display: block; letter-spacing: -.02em; }
.wpc-status { display: block; margin: 10px 0; font-size: 13px; line-height: 1.6; }
/* Semantic colours retain the published meaning and accessible text. */
.wpc-same, .wpc-better { background: #102f23; color: #c6f6d7; }
.wpc-worse { background: #3b1d21; color: #ffd5d5; }
.wpc-neutral { background: #20252a; color: #e3e6e8; }
.wpc-source summary { font-size: 13px; cursor: pointer; padding: 8px 0; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.wpc-source p { font-size: 13px; line-height: 1.6; }
.wpc-legend { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; margin: 22px 0; }
.wpc-legend span { padding: 7px 12px; border-radius: 6px; border: 1px solid #6a6a6a; }
.wpc-cta { padding: 38px 40px; margin-top: 56px; background: radial-gradient(ellipse at 100% 0, #c9a35a20, transparent 70%), #12120f; border: 1px solid #8f7955; border-radius: 18px; }
.wpc-cta h2 { color: #f0dfb4; margin: 0 0 18px; max-width: 650px; }
.wpc-cta p { max-width: 780px; font-size: 15px; }
.wpc-cta a { display: inline-block; padding: 12px 0; min-height: 48px; font-weight: 600; }
.wpc-cta a:first-of-type { color: #111; background: linear-gradient(135deg, #c9a35a, #e5c982); border-radius: 8px; padding: 13px 18px; margin: 14px 10px 0 0; text-decoration: none; }
.wpc-catalogue { margin: 40px 0; padding: 4px 24px; border: 1px solid var(--wpc-line); border-radius: 12px; background: #0c1011; }
.wpc-catalogue > summary { padding: 18px 0; min-height: 48px; cursor: pointer; font-size: 14px; color: var(--wpc-gold); }
.wpc-catalogue article { border-top: 1px solid #555; padding: 24px 0; }
.wpc-catalogue dl { display: grid; grid-template-columns: 1fr 2fr; gap: 8px 18px; font-size: 14px; }
.wpc-catalogue dd { margin: 0; }
.wpc-color-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 32px 0 24px; }
.wpc-color-layout { display: grid; grid-template-columns: 310px minmax(0,1fr); align-items: start; gap: 28px; margin-top: 30px; }
.wpc-color-preview { position: sticky; top: 100px; border: 1px solid #9d8459; border-radius: 16px; padding: 22px; background: #101516; min-width: 0; box-shadow: 0 18px 45px #0004; }
.wpc-color-preview h2 { font-size: 20px; margin: 0 0 20px; }
.wpc-color-preview [data-aluprof-preview-photo] { display: block; max-width: 100%; height: auto; max-height: 310px; object-fit: scale-down; margin: 0 auto; background: #fff; }
.wpc-color-preview p { font-size: 13px; line-height: 1.6; }
.wpc-color-preview [data-aluprof-large-swatch] { display: block; max-width: 100%; height: auto; max-height: 55px; margin: 16px auto; }
.wpc-color-preview button { width: 100%; font-size: 13px; }
.wpc-status-box { min-height: 70px; }
.wpc-color-palette { min-width: 0; }
.wpc-colors { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.wpc-color-palette .wpc-colors { grid-template-columns: repeat(2,minmax(0,1fr)); }
.wpc-colors button { text-align: left; color: #eee; background: #121718; border: 1px solid #69675f; border-radius: 12px; padding: 18px; min-height: 120px; font-weight: 400; }
.wpc-colors button:hover { background: #191e1e; border-color: var(--wpc-gold); }
.wpc-colors button strong, .wpc-colors button small { display: block; }
.wpc-colors button strong { color: #f0dfb4; font-size: 14px; margin-bottom: 4px; }
.wpc-colors button small { color: #cacaca; margin-top: 10px; font-size: 11px; line-height: 1.6; }
.wpc-colors button[aria-pressed=true] { outline: 3px solid var(--wpc-gold); outline-offset: 1px; border-style: solid; background: #24251e; }
.wpc-colors button img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 4px; margin-bottom: 16px; }
.wpc-color-preview .wpc-placeholder { min-height: 160px; }
.wpc-aluprof-wordmark { font-size: 24px; letter-spacing: .06em; font-weight: 700; color: #eee; }
.wpc [hidden] { display: none !important; }
.wpc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 1000px) { .wpc-grid:has(> .wpc-card) { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 900px) {
  .wpc { padding: 40px 28px 64px; }
  .wpc-controls { padding: 20px; gap: 16px; }
  .wpc-controls button { padding-inline: 12px; font-size: 13px; }
  .wpc-panel, .wpc-card { padding: 22px; }
  .wpc-color-layout { grid-template-columns: 260px minmax(0,1fr); gap: 20px; }
  .wpc-color-palette .wpc-colors { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .page.wpc-page { padding-top: 72px; }
  .wpc { padding: 28px 16px 52px; }
  .wpc h1 { font-size: clamp(34px,8.5vw,48px); }
  .wpc-crumbs { margin-bottom: 24px; font-size: 11px; gap: 8px; }
  .wpc-lead { font-size: 16px !important; margin-bottom: 28px; }
  .wpc-note { padding: 20px; margin: 28px 0; }
  .wpc-note p { font-size: 13px; }
  .wpc-controls { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: 18px 14px; gap: 16px 12px; margin-top: 30px; }
  .wpc-controls button { grid-row: 2; grid-column: 1/-1; justify-self: center; }
  .wpc-controls label:last-child { grid-row: 1; grid-column: 2; }
  .wpc select { padding-inline: 8px; }
  .wpc-panels { gap: 12px; }
  .wpc-panel { padding: 12px; border-radius: 12px; }
  .wpc-panel h2 { font-size: 18px; line-height: 1.4; }
  .wpc-panel img, .wpc-placeholder { height: 180px; min-height: 180px; }
  .wpc-panel p, .wpc-panel li { font-size: 13px; }
  .wpc-grid { grid-template-columns: 1fr; gap: 18px; }
  .wpc-card { padding: 22px; }
  .wpc-grid > figure { padding: 24px; }
  .wpc th, .wpc td { padding: 16px 14px; }
  .wpc td strong { font-size: 18px; }
  .wpc-legend { font-size: 11px; }
  .wpc-cta { padding: 26px 22px; margin-top: 40px; }
  .wpc-cta a:first-of-type { margin-right: 0; }
  .wpc-catalogue { padding-inline: 18px; }
  .wpc-catalogue dl { display: block; }
  .wpc-catalogue dt { margin-top: 16px; font-weight: 600; }
  .wpc-color-controls { grid-template-columns: 1fr; gap: 20px; }
  .wpc-colors { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wpc-color-layout { display: block; }
  .wpc-color-preview { top: 80px; z-index: 2; display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 8px 14px; margin-bottom: 24px; padding: 14px; border-radius: 12px; }
  .wpc-color-preview h2 { grid-column: 1/-1; font-size: 17px; margin-bottom: 0; }
  .wpc-color-preview [data-aluprof-preview-photo] { grid-column: 1; grid-row: 2/5; max-height: 160px; max-width: 100px; align-self: center; }
  .wpc-color-preview p, .wpc-color-preview button, .wpc-color-preview [data-aluprof-large-swatch] { grid-column: 2; margin: 0; font-size: 12px; }
  .wpc-color-preview .wpc-status-box { min-height: 0; }
  .wpc-color-preview [data-aluprof-preview-caption] { font-size: 11px; }
  .wpc-color-preview [data-aluprof-large-swatch] { max-height: 25px; }
  .wpc-color-preview button { padding: 8px; }
  .wpc-color-preview .wpc-placeholder { grid-column: 1; grid-row: 2/5; min-height: 100px; font-size: 12px; padding: 6px; }
  .wpc-color-palette .wpc-colors { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .wpc-colors button { padding: 12px; }
}