/*!
 * Solaire PDP Editorial — product description design system
 * Mirrors the wave-comfort-showcase landing page inside a WooCommerce
 * description tab. Every rule is namespaced under .solaire-pdp, so a product
 * whose description does not carry that wrapper class is untouched.
 *
 * Deployed by the solaire-pdp-editorial mu-plugin. Do not edit on the server;
 * edit assets/solaire-pdp-editorial/ in the agent workspace and redeploy.
 */

/* ---------------------------------------------------------------- tokens */
.solaire-pdp {
  --spdp-navy: #00205B;
  --spdp-navy-deep: #001540;
  --spdp-sand: #F0EDE4;
  --spdp-sand-deep: #E5E1D4;
  --spdp-line: #D9D4C3;
  --spdp-paper: #FAF8F2;
  --spdp-ink: #14182B;
  --spdp-ink-soft: #4A4F63;
  --spdp-glow: #F0D9A8;
  --spdp-on-navy: #D5DCEA;
  --spdp-cta: #00205B;
  --spdp-max: 1240px;
  --spdp-gutter: clamp(20px, 4vw, 56px);
  --spdp-pad: clamp(56px, 8vh, 104px);

  font-family: 'Mulish', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  color: var(--spdp-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------- Sol*Aire house palette */
/* The base tokens above are ADAX: Norwegian navy and sand. Sol*Aire branded
   products carry .solaire-pdp--solaire as well, which swaps in the charcoal
   and orange used by the video and page templates. Only tokens change, so
   every band, card, table and rule below inherits the new palette. The two
   navy tinted shadows are the only colours that were never tokenised, so they
   are restated here. */
.solaire-pdp--solaire {
  --spdp-navy: #1E2533;
  --spdp-navy-deep: #161C27;
  --spdp-sand: #F1F0ED;
  --spdp-sand-deep: #E4E3DF;
  --spdp-line: #D6D5D0;
  --spdp-paper: #FAFAF8;
  --spdp-ink: #1E2533;
  --spdp-ink-soft: #555C68;
  --spdp-glow: #FC6503;
  --spdp-on-navy: #C7CCD6;
  --spdp-cta: #FC6503;
}
/* On light bands the eyebrow becomes the accent, matching the orange chip in
   the video template, rather than dimmed ink. */
.solaire-pdp--solaire .solaire-pdp__eyebrow { color: #FC6503; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .solaire-pdp--solaire .solaire-pdp__card:hover {
    box-shadow: 0 12px 32px rgba(30, 37, 51, 0.12);
  }
}
.solaire-pdp--solaire .solaire-pdp__stage::before {
  background: radial-gradient(ellipse at center, rgba(30, 37, 51, 0.18), transparent 65%);
}

.solaire-pdp *,
.solaire-pdp *::before,
.solaire-pdp *::after { box-sizing: border-box; }

/* The theme's tab panel adds typography we do not want inside the wrapper. */
.solaire-pdp p,
.solaire-pdp h2,
.solaire-pdp h3,
.solaire-pdp ul,
.solaire-pdp li { margin: 0; }
.solaire-pdp img { max-width: 100%; height: auto; display: block; }

/* Links inherit the band's text colour so they stay legible on navy, charcoal
   and sand alike; only the underline carries the accent. */
.solaire-pdp a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.solaire-pdp--solaire a { text-decoration-color: #FC6503; }
.solaire-pdp--solaire a:hover { color: #FC6503; }

/* ---------------------------------------------------------------- layout */
/* Full-bleed bands. A 100vw band overhangs its ancestors, so something has to
   absorb the overhang or the page gains a horizontal scrollbar. The clip must
   sit on an ancestor that is already exactly viewport-wide: clipping any
   narrower one (the tab panel, the tabs wrapper) would cut the bands back to
   the content column and undo the bleed entirely. :has() keeps it scoped to
   pages that actually carry an editorial description.
   overflow-x: clip is deliberate: unlike hidden it creates no scroll
   container, so sticky and fixed descendants keep working. */
.elementor-location-single:has(.solaire-pdp),
.site-main:has(.solaire-pdp) { overflow-x: clip; }

.solaire-pdp__band {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--spdp-pad) var(--spdp-gutter);
}
.solaire-pdp__inner {
  max-width: var(--spdp-max);
  margin: 0 auto;
}

.solaire-pdp__band--sand { background: var(--spdp-sand); }
.solaire-pdp__band--sand-deep { background: var(--spdp-sand-deep); }
.solaire-pdp__band--paper { background: var(--spdp-paper); }
.solaire-pdp__band--navy { background: var(--spdp-navy); color: #fff; }

/* ------------------------------------------------------------ typography */
.solaire-pdp__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.7;
}
.solaire-pdp__band--navy .solaire-pdp__eyebrow { color: var(--spdp-glow); opacity: 1; }

.solaire-pdp__display {
  margin: 22px 0 0;
  font-weight: 200;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--spdp-navy);
  text-wrap: balance;
}
.solaire-pdp__tagline {
  margin-top: 16px;
  font-weight: 300;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.3;
  color: var(--spdp-navy);
  max-width: 34ch;
}
.solaire-pdp__h {
  margin: 0 0 clamp(28px, 4vh, 44px);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--spdp-navy);
  text-wrap: balance;
}
.solaire-pdp__band--navy .solaire-pdp__h { color: #fff; }
.solaire-pdp__eyebrow + .solaire-pdp__h { margin-top: 18px; }

/* The Product Data Tabs widget generates its own typography rule for the tab
   headings, and it lands on every h2/h3 in the panel:
     .woocommerce .elementor-53272 .elementor-element.elementor-element-fa446a2
       .woocommerce-tabs .woocommerce-Tabs-panel h2 { font-size: 14px }
   Five classes plus a tag, in a file Elementor rewrites on every save, so it
   cannot be out-specified from here or safely edited. !important is the correct
   tool for exactly this: a generated selector we do not own. Scoped to the two
   heading classes so nothing else in the panel is affected. */
.solaire-pdp h2.solaire-pdp__display { font-size: clamp(40px, 6vw, 84px) !important; }
.solaire-pdp h3.solaire-pdp__h { font-size: clamp(28px, 3.4vw, 46px) !important; }

.solaire-pdp__lead {
  margin-top: 24px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--spdp-ink-soft);
  max-width: 58ch;
}
.solaire-pdp__band--navy .solaire-pdp__lead { color: var(--spdp-on-navy); }

.solaire-pdp__note {
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--spdp-ink-soft);
}
.solaire-pdp__band--navy .solaire-pdp__note { color: var(--spdp-on-navy); opacity: 0.8; }

/* ------------------------------------------------------------------ grid */
.solaire-pdp__grid {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.solaire-pdp__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.solaire-pdp__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Numbered steps, no card chrome. */
.solaire-pdp__step-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--spdp-glow);
}
.solaire-pdp__step-title {
  margin-top: 12px;
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  color: #fff;
}
.solaire-pdp__step-body {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--spdp-on-navy);
}

/* Size cards. */
.solaire-pdp__card {
  background: var(--spdp-paper);
  border: 1px solid var(--spdp-line);
  padding: clamp(22px, 2.4vw, 32px);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.solaire-pdp__card-name {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--spdp-navy);
}
.solaire-pdp__card-watt {
  margin-top: 8px;
  font-weight: 200;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--spdp-navy);
}
.solaire-pdp__card-meta {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--spdp-line);
  font-size: 14px;
  line-height: 1.9;
  color: var(--spdp-ink-soft);
}

/* Musa Eco modes. */
.solaire-pdp__mode-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--spdp-glow);
}
.solaire-pdp__mode-title {
  margin-top: 10px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: #fff;
}
.solaire-pdp__mode-body {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--spdp-on-navy);
}
.solaire-pdp__modes {
  display: grid;
  gap: clamp(20px, 2.6vw, 36px) clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* ---------------------------------------------------------------- tables */
.solaire-pdp__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: transparent;
}
/* The theme skins every table cell with a grey hairline grid and a grey zebra
   tint, both at a specificity that beats a single class. Clear them here, then
   draw only the horizontal rules and the sand zebra we actually want. */
.solaire-pdp .solaire-pdp__table thead,
.solaire-pdp .solaire-pdp__table tbody,
.solaire-pdp .solaire-pdp__table tr,
.solaire-pdp .solaire-pdp__table tbody tr th,
.solaire-pdp .solaire-pdp__table tbody tr td,
.solaire-pdp .solaire-pdp__table thead tr th,
.solaire-pdp .solaire-pdp__table thead tr td {
  border: 0;
  background: transparent;
}
/* Same specificity as the reset above, so these survive it. */
.solaire-pdp .solaire-pdp__table tbody tr:nth-child(odd) td {
  background: var(--spdp-paper);
}
.solaire-pdp .solaire-pdp__table thead tr th,
.solaire-pdp .solaire-pdp__table tbody tr td {
  border-bottom: 1px solid var(--spdp-line);
}
.solaire-pdp .solaire-pdp__table tbody tr:last-child td {
  border-bottom: 0;
}
.solaire-pdp__table th {
  padding: 14px 12px 14px 0;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spdp-navy);
  border-bottom: 1px solid var(--spdp-line);
  white-space: nowrap;
}
.solaire-pdp__table td {
  padding: 14px 12px 14px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--spdp-ink-soft);
  border-bottom: 1px solid var(--spdp-line);
  vertical-align: top;
}
.solaire-pdp__table td:first-child {
  color: var(--spdp-navy);
  font-weight: 600;
  white-space: nowrap;
}
.solaire-pdp__table tr:last-child td { border-bottom: none; }

/* Spec sheet: two column definition list. */
.solaire-pdp__spec {
  display: grid;
  grid-template-columns: minmax(160px, 30%) 1fr;
  gap: 0 clamp(20px, 3vw, 48px);
}
.solaire-pdp__spec dt {
  padding: 14px 0;
  border-top: 1px solid var(--spdp-line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--spdp-navy);
}
.solaire-pdp__spec dd {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--spdp-line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--spdp-ink-soft);
}

/* Horizontal scroll only for the wide reference table on small screens. */
.solaire-pdp__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  .solaire-pdp__grid,
  .solaire-pdp__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .solaire-pdp__grid,
  .solaire-pdp__grid--2,
  .solaire-pdp__modes { grid-template-columns: minmax(0, 1fr); }
  .solaire-pdp__spec { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .solaire-pdp__spec dt { padding-bottom: 0; border-top: 1px solid var(--spdp-line); }
  .solaire-pdp__spec dd { padding-top: 6px; border-top: none; }
  .solaire-pdp__table th,
  .solaire-pdp__table td { font-size: 13px; padding-right: 16px; }
}

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  .solaire-pdp__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 32, 91, 0.10);
  }
}

/* --------------------------------- product size cards with rail imagery */
/* Mirrors the card treatment on the wave-comfort-showcase page. */
.solaire-pdp__card--product {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.solaire-pdp__stage {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.solaire-pdp__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 70%;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(0, 32, 91, 0.18), transparent 65%);
  transform: translateX(-50%);
  z-index: 1;
}
.solaire-pdp__stage img {
  position: relative;
  z-index: 2;
  height: 92%;
  width: auto;
  object-fit: contain;
}
.solaire-pdp__card--product .solaire-pdp__card-name {
  margin-top: 18px;
  letter-spacing: 0.04em;
}
.solaire-pdp__card-dims {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--spdp-ink-soft);
}
.solaire-pdp__card--product .solaire-pdp__card-watt {
  margin-top: 4px;
  font-size: clamp(28px, 3vw, 40px);
}
.solaire-pdp__card-watt small {
  margin-left: 2px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--spdp-ink-soft);
}
.solaire-pdp__card-code {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--spdp-ink-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .solaire-pdp__card--product:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ------------------------------------------- copy alongside imagery split */
.solaire-pdp__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.solaire-pdp__split--wide {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.solaire-pdp__figure {
  margin: 0;
}
.solaire-pdp__figure img {
  display: block;
  width: 100%;
  height: auto;
}
.solaire-pdp__split .solaire-pdp__lead {
  max-width: none;
}

/* Product size cards sitting on a navy band (white finishes need the
   contrast, exactly as the showcase page does). */
.solaire-pdp__band--navy .solaire-pdp__card-name,
.solaire-pdp__band--navy .solaire-pdp__card-watt {
  color: #fff;
}
.solaire-pdp__band--navy .solaire-pdp__card-dims,
.solaire-pdp__band--navy .solaire-pdp__card-code,
.solaire-pdp__band--navy .solaire-pdp__card-watt small {
  color: var(--spdp-on-navy);
}
.solaire-pdp__band--navy .solaire-pdp__stage::before {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), transparent 65%);
}

@media (max-width: 820px) {
  .solaire-pdp__split,
  .solaire-pdp__split--wide { grid-template-columns: minmax(0, 1fr); }
}

/* Studio shots come on a flat #FAFBF6 sweep, which reads as a pasted
   rectangle against a colour band. Sitting them on a panel of exactly that
   colour dissolves the edge and gives the subject room to breathe. */
.solaire-pdp__figure--panel {
  background: #FAFBF6;
  padding: clamp(26px, 3.4vw, 54px);
}
/* No blend mode here on purpose: the panel colour is sampled from the image
   sweep itself, so the edge already disappears. multiply would darken the
   image area and put the rectangle straight back. */
/* Photography keeps its own edge, but gains a hairline so it sits against
   the band rather than floating on it. */
.solaire-pdp__figure--photo img {
  border: 1px solid var(--spdp-line);
}
.solaire-pdp__band--navy .solaire-pdp__figure--photo img {
  border-color: rgba(255, 255, 255, 0.14);
}

/* ------------------------------------------------------------ enquiry form */
/* WPForms Lite markup, restyled to the design system. Scoped to the wrapper
   so the same form on other pages keeps the theme's own styling. */
.solaire-pdp__form { margin-top: clamp(28px, 4vh, 44px); max-width: 620px; }
.solaire-pdp__form .wpforms-container,
.solaire-pdp__form .wpforms-container-full { margin: 0; padding: 0; }
/* WPForms' modern renderer drives its own look from custom properties, and its
   stylesheet loads after this one. Overriding the properties is the supported
   route and avoids a specificity fight with the plugin. */
.solaire-pdp__form .wpforms-container {
  --wpforms-field-border-color: var(--spdp-line);
  --wpforms-field-border-color-spare: var(--spdp-line);
  --wpforms-field-border-radius: 0px;
  --wpforms-field-text-color: var(--spdp-ink);
  --wpforms-field-size-input-height: 48px;
  --wpforms-label-color: var(--spdp-ink-soft);
  --wpforms-label-sublabel-color: var(--spdp-ink-soft);
  --wpforms-button-background-color: var(--spdp-cta);
  --wpforms-button-border-color: var(--spdp-cta);
  --wpforms-button-text-color: #ffffff;
  --wpforms-button-border-radius: 0px;
  --wpforms-button-size-height: 50px;
  --wpforms-button-size-padding-h: 34px;
  --wpforms-button-size-font-size: 13px;
  --wpforms-page-break-color: var(--spdp-cta);
  --wpforms-container-border-radius: 0px;
}
.solaire-pdp__form .wpforms-field { padding: 0 0 20px; }
.solaire-pdp__form .wpforms-field-label,
.solaire-pdp__form legend {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--spdp-ink-soft);
}
.solaire-pdp__form .wpforms-field-sublabel {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--spdp-ink-soft);
  text-transform: none;
}
.solaire-pdp__form input[type="text"],
.solaire-pdp__form input[type="email"],
.solaire-pdp__form textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--spdp-line);
  border-radius: 0;
  background: #fff;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--spdp-ink);
  box-shadow: none;
}
.solaire-pdp__form textarea { min-height: 130px; }
.solaire-pdp__form input[type="text"]:focus,
.solaire-pdp__form input[type="email"]:focus,
.solaire-pdp__form textarea:focus {
  border-color: var(--spdp-cta);
  outline: 1px solid var(--spdp-cta);
  outline-offset: 0;
}
.solaire-pdp .solaire-pdp__form button[type="submit"] {
  margin-top: 4px;
  border: 0;
  border-radius: 0;
  background: var(--spdp-cta);
  color: #fff;
  padding: 15px 36px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease-out;
}
.solaire-pdp .solaire-pdp__form button[type="submit"]:hover { background: var(--spdp-ink); }
.solaire-pdp__form .wpforms-confirmation-container-full {
  border: 1px solid var(--spdp-line);
  background: #fff;
  padding: 20px 22px;
  color: var(--spdp-ink);
}
@media (max-width: 700px) {
  .solaire-pdp__form { max-width: 100%; }
}