/* =============================================================
   Phare Labs — site stylesheet
   1. Tokens             — colours, type scale, spacing, radii
   2. Reset              — minimal normalize
   3. Base               — html, body, headings, links, media
   4. Layout primitives  — container, flex-row, flex-col, layout grid
   5. Forms              — inputs, textareas, form-wrap states
   6. Buttons            — .button, .button-highcontrast(-white), arrows
   7. Components         — navbar, footer, hero, popup, cart, cookie banner
   8. Utilities          — spacers, text/visibility helpers
   9. Responsive         — mobile/tablet overrides
   ============================================================= */


/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Brand palette */
  --deep-grey: #2b2b2b;
  --wall-white: #ffffff;
  --london-grey: #bbbbbb;
  --light-grey: #f1f1f1;
  --alpha: #fff0;
  --macaw-blue: #386bb1;
  --macaw-blue-10: #386bb11a;
  --light-blue: #a9bbd4;
  --alert-red: red;
  --alert-orange: #FF7A29;

  /* Extended greys — used in dark UI surfaces */
  --black-grey: #1a1a1a;     /* cart badge, cookie banner bg */
  --navbar-mobile-bg: #444444; /* mobile navbar drawer */

  /* Typography scale — fluid from 479px → 1440px viewport */
  --fs-body: 1rem;
  --fs-h1: 3rem;
  --fs-h2: 2rem;
  --fs-h3: clamp(1.2rem, 1.1rem + 0.3vw, 1.35rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.15vw, 1.1rem);
  --lh-body: 1.6;
  --lh-h1: 1.2;
  --lh-h2: 1.3;
  --lh-h3: 1.35;
  --lh-h4: 1.5;

  /* Letter-spacing — negative tracking tightens display type */
  --ls-h1: -0.03em;
  --ls-h2: -0.02em;
  --ls-h3: -0.015em;
  --ls-h4: -0.01em;

  /* Paragraph spacing — relative to font-size */
  --mb-p: 1em;

  /* Corner radii — sm for small components (badges, panels, image
     tiles), lg for bigger pill components (buttons, cards, hero). */
  --radius-sm: 8px;
  --radius-lg: 12px;
}


/* =============================================================
   2. Reset
   ============================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
}

article, aside, details, figcaption, figure, footer, header,
hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

a { background-color: transparent; }
a:active, a:hover { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
mark { background: #ff0; color: #000; }
small { font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

img { border: 0; }
svg:not(:root) { overflow: hidden; }

figure { margin: 0 0 10px; }

hr { box-sizing: content-box; height: 0; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button { overflow: visible; }
button, select { text-transform: none; }

button,
[type='button'],
[type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}

button[disabled],
html input[disabled] { cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button { height: auto; }

input[type='search'] { -webkit-appearance: none; }
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration { -webkit-appearance: none; }

fieldset { border: 0; margin: 0; padding: 0; }
legend { border: 0; padding: 0; }
textarea { overflow: auto; }
optgroup { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--macaw-blue);
  outline-offset: 2px;
}


/* =============================================================
   3. Base
   ============================================================= */
body {
  color: var(--deep-grey);
  text-align: left;
  min-height: calc(var(--vh, 1vh) * 100);
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  background: linear-gradient(180deg, var(--wall-white) 0%, #E5E5E5 100%);
  background-attachment: fixed;
}

/* Offset <main> so non-hero pages start below the fixed 64px navbar
   (.sec-navbar). Pages whose first content is a full-bleed .sec-hero
   opt out, so the hero still fills the viewport behind the navbar. */
main { padding-top: 64px; }
main:has(> .sec-hero:first-child) { padding-top: 0; }

h1, h2, h3, h4, h5, h6 {
  text-align: left;
  margin-top: 0;
  font-weight: 600;
}

h1 {
  margin-bottom: 16px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-wrap: balance;
}

h2 {
  margin-bottom: 16px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}

h3 {
  margin-bottom: 16px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-wrap: balance;
}

h4 {
  margin-bottom: 8px;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

h5 { margin-bottom: 8px; font-size: 0.875rem; line-height: 1.5; }
h6 { margin-bottom: 8px; font-size: 0.75rem;  line-height: 1.5; }

p {
  text-align: left;
  margin-top: 0;
  margin-bottom: var(--mb-p);
}

a {
  color: var(--deep-grey);
  text-decoration: none;
}
a:hover { opacity: 0.5; }

img {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  object-fit: cover;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

strong { font-weight: 600; }
em { font-style: italic; }

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 8px;
  padding: 8px 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
}

ul, ol { margin: 0 0 10px; padding-left: 40px; }


/* =============================================================
   4. Layout primitives
   ============================================================= */
.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}

.block-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.inline-block {
  display: inline-block;
  max-width: 100%;
}

.layout {
  display: grid;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-auto-columns: 1fr;
  justify-content: center;
  padding: 20px;
}

.layout-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}


/* =============================================================
   5. Forms
   ============================================================= */
.form-wrap { margin: 0 0 15px; }

.form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}

.form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}

.form-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: var(--deep-grey);
  vertical-align: middle;
  background-color: var(--wall-white);
  border: 1px solid #cccccc;
}

.form-input::placeholder { color: #999; }
.form-input:focus { border-color: var(--macaw-blue); }
.form-input:focus-visible {
  outline: 2px solid var(--macaw-blue);
  outline-offset: 2px;
}
.form-input[disabled],
.form-input[readonly],
fieldset[disabled] .form-input { cursor: not-allowed; background-color: #eeeeee; }
textarea.form-input { height: auto; }

.form-input-field-t0,
.form-input-field-t1 {
  border-style: none none solid;
  border-width: 1px;
  border-color: black black var(--london-grey);
  background-color: transparent;
  padding: 18px 0 5px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
}

.form-input-field-t0 {
  font-size: 0.8rem;
  line-height: 1.4rem;
}

.form-input-field-t0:hover,
.form-input-field-t1:hover { color: var(--london-grey); }

.form-input-field-t0:focus,
.form-input-field-t1:focus { border-bottom-color: var(--london-grey); }

.form-input-field-t1:focus { color: #000; }

.form-input-field-t0::placeholder,
.form-input-field-t1::placeholder { color: var(--london-grey); }

.form-textarea {
  background-color: var(--wall-white);
  color: var(--deep-grey);
  border: 1px #000;
  min-height: 100px;
}
.form-textarea::placeholder { color: var(--london-grey); }

.form-textfield {
  background-color: var(--wall-white);
  color: var(--deep-grey);
  border: 1px #000;
}
.form-textfield::placeholder { color: var(--london-grey); }

.form { display: block; }


/* =============================================================
   6. Buttons
   ============================================================= */
.button {
  color: var(--deep-grey);
  text-align: center;
  cursor: pointer;
  background-color: var(--alpha);
  border: 1.5px solid #000;
  border-radius: var(--radius-lg);
  min-width: 100px;
  padding: 4px 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.button:hover {
  background-color: var(--alert-orange);
  color: var(--wall-white);
  border-color: var(--alert-orange);
  opacity: 1;
}

.button-highcontrast {
  background-color: var(--deep-grey);
  color: var(--wall-white);
  text-align: center;
  cursor: pointer;
  border: 1.5px solid var(--deep-grey);
  border-radius: var(--radius-lg);
  min-width: 100px;
  padding: 4px 12px;
  font-size: 0.9rem;
  line-height: 1.4rem;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.button-highcontrast:hover {
  background-color: var(--alert-orange);
  color: var(--wall-white);
  border-color: var(--alert-orange);
  opacity: 1;
}

.button-highcontrast-white {
  background-color: var(--wall-white);
  color: var(--deep-grey);
  text-align: center;
  cursor: pointer;
  border: 1.5px solid var(--alpha);
  border-radius: var(--radius-lg);
  min-width: 100px;
  padding: 4px 12px;
  font-size: 0.9rem;
  line-height: 1.4rem;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.button-highcontrast-white:hover {
  background-color: var(--alert-orange);
  color: var(--wall-white);
  border-color: var(--alert-orange);
  opacity: 1;
}

.button-arrow {
  filter: invert(65%);
  cursor: pointer;
  background-color: transparent;
  background-image: url('../images/icon-arrow.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  width: 35px;
  height: 15px;
  margin-left: 8px;
  padding: 4px 0;
  border: 0;
}
.button-arrow:hover { filter: invert(0%); }
.button-arrow:disabled {
  cursor: wait;
  background-image: none;
  border: 2px solid #999;
  border-top-color: var(--deep-grey);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: popup-spin 0.6s linear infinite;
  filter: none;
}

@keyframes popup-spin { to { transform: rotate(360deg); } }

/* =============================================================
   7. Components
   ============================================================= */

/* ── Navbar ───────────────────────────────────────────────── */
.sec-navbar {
  z-index: 50;
  background-color: rgba(43, 43, 43, var(--nav-bg-opacity, 1));
  color: var(--wall-white);
  width: 100vw;
  height: 64px;
  position: fixed;
  inset: 0 0% auto;
  display: flex;
  align-items: center;
}

/* When the mobile menu is open, force the navbar fully opaque so the
   slide-down panel doesn't bleed through the hero behind it. */
.sec-navbar.nav-open { --nav-bg-opacity: 1; }

/* Keep the navbar row (logo, cart, burger) above the full-screen overlay so
   the user can still see the brand and tap the close button while open. */
.sec-navbar > .con-1280px { position: relative; z-index: 100; }

.sec-navbar .nav-brand {
  position: relative;
  text-decoration: none;
  color: var(--wall-white);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.nav-menu {
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.sec-navbar .nav-menu .link-navbar a,
.sec-navbar .nav-menu .link-navbar a div,
.sec-navbar .link-margins,
.sec-navbar .link-margins div { color: var(--wall-white); }

.sec-navbar .nav-menu .link-navbar a,
.sec-navbar .nav-menu .link-navbar a div { font-size: 1rem; }

.sec-navbar .link-navbar a.nav-link--active div { font-weight: bold; }
.sec-navbar .link-navbar a.nav-link--active { opacity: 1; }

.sec-navbar .button-highcontrast {
  background-color: transparent;
  color: var(--wall-white);
  border: 1.5px solid var(--wall-white);
}
.sec-navbar .button-highcontrast:hover {
  background-color: var(--alert-orange);
  color: var(--wall-white);
  border-color: var(--alert-orange);
  opacity: 1;
}

.navbar-burger {
  position: relative;
  padding: 18px;
  font-size: 24px;
  display: none;
  cursor: pointer;
  color: var(--wall-white);
  background: transparent;
  border: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.navbar-burger:focus-visible {
  outline: 2px solid var(--wall-white);
  outline-offset: 2px;
}
.navbar-burger-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}
.navbar-burger-bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: top 0.25s ease, bottom 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}
.navbar-burger-bars span:nth-child(1) { top: 0; }
.navbar-burger-bars span:nth-child(2) { top: 50%; margin-top: -1px; }
.navbar-burger-bars span:nth-child(3) { bottom: 0; }
.navbar-burger.is-open .navbar-burger-bars span:nth-child(1) { top: 50%; margin-top: -1px; transform: rotate(45deg); }
.navbar-burger.is-open .navbar-burger-bars span:nth-child(2) { opacity: 0; }
.navbar-burger.is-open .navbar-burger-bars span:nth-child(3) { bottom: 50%; margin-bottom: -1px; transform: rotate(-45deg); }

/* Full-screen mobile menu overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--black-grey);
  color: var(--wall-white);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.nav-open .nav-overlay {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}
.nav-overlay-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 88px 40px 48px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  gap: 32px;
}
.nav-overlay-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}
.nav-overlay-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.nav-overlay-links li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.nav-open .nav-overlay-links li {
  opacity: 1;
  transform: translateY(0);
}
.nav-open .nav-overlay-links li:nth-child(1) { transition-delay: 0.05s; }
.nav-open .nav-overlay-links li:nth-child(2) { transition-delay: 0.1s; }
.nav-open .nav-overlay-links li:nth-child(3) { transition-delay: 0.15s; }
.nav-open .nav-overlay-links li:nth-child(4) { transition-delay: 0.2s; }
.nav-overlay-links a {
  display: inline-block;
  color: var(--wall-white);
  text-decoration: none;
  font-size: clamp(2rem, 8vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.nav-overlay-links a:hover { opacity: 1; color: var(--alert-orange); }
.nav-overlay-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 32px;
  flex-wrap: wrap;
}
.nav-overlay-actions a { color: var(--wall-white); text-decoration: none; }
.nav-overlay-actions .nav-overlay-shop {
  background: var(--wall-white);
  color: var(--deep-grey);
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-overlay-actions .nav-overlay-shop:hover { background: var(--alert-orange); color: var(--wall-white); opacity: 1; }
.nav-overlay-actions .nav-overlay-login { font-weight: 500; opacity: 0.75; transition: opacity 0.2s ease; }
.nav-overlay-actions .nav-overlay-login:hover { opacity: 1; }

.nav-overlay-extras {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: rgba(255, 255, 255, 0.85);
}
.nav-overlay-extras-heading {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wall-white);
}
.nav-overlay-newsletter .form-input {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--wall-white);
}
.nav-overlay-newsletter .form-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.nav-overlay-newsletter .button-arrow { filter: invert(1); }
.nav-overlay-social { display: flex; align-items: center; gap: 12px; }
.nav-overlay-social .icon-24px { filter: invert(1); opacity: 0.85; transition: opacity 0.2s ease; }
.nav-overlay-social a:hover .icon-24px { opacity: 1; }
.nav-overlay-locale { color: var(--wall-white); }
.nav-overlay-locale .footer-locale-trigger { color: var(--wall-white); }
.nav-overlay-locale .footer-locale-menu {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  z-index: 200;
}
.nav-overlay-locale .footer-locale-option { color: var(--wall-white); }
.nav-overlay-locale .footer-locale-option:hover,
.nav-overlay-locale .footer-locale-option--selected { background: rgba(255, 255, 255, 0.1); }

body.nav-overlay-locked { overflow: hidden; }
/* Hide other fixed UI (floating shop CTA, configurator floating cart bar) so
   they don't poke through the full-screen menu. */
body.nav-overlay-locked .floating-shop-button,
body.nav-overlay-locked .configurator-floating-cart-bar { opacity: 0; pointer-events: none; }

.link-navbar {
  margin-top: 0;
  padding: 20px 24px;
}

.link-margins {
  margin-top: 0;
  padding: 10px;
}
.link-margins.mobile-hidden:hover { opacity: 0.5; }

.link-underline {
  cursor: pointer;
  text-decoration: underline;
}
.link-underline:hover { opacity: 0.5; }
.link-underline.is-current {
  justify-content: flex-start;
  align-items: center;
  display: inline;
}

.navbar-link { padding: 14px 24px; }

.navbar-dropdown { background-color: var(--wall-white); }
.navbar-dropdown.is-current {
  color: var(--london-grey);
  justify-content: flex-start;
  align-items: center;
}

.phare-navbar-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  color: var(--wall-white);
  vertical-align: middle;
}
.phare-navbar-cart-btn:hover { opacity: 0.75; }
.phare-navbar-cart-btn:focus-visible {
  outline: 2px solid var(--wall-white);
  outline-offset: 2px;
  border-radius: 4px;
}

.phare-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: var(--alert-orange);
  color: var(--wall-white);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 5px;
  vertical-align: middle;
  margin-left: 2px;
}


/* ── Footer ───────────────────────────────────────────────── */
.sec-footer {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: var(--deep-grey);
  color: var(--wall-white);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 64px 0 32px;
  display: flex;
}

.sec-footer .t0,
.sec-footer .t0 strong,
.sec-footer .link-underline,
.sec-footer .link-underline a { color: var(--wall-white); }

.sec-footer .footer-social p,
.sec-footer .footer-newsletter > p { margin: 0; padding-bottom: 4px; }
.sec-footer .logo-20px { width: 100%; max-width: 400px; height: auto; }
.sec-footer .logo-mark.logo-20px { width: 100%; max-width: 400px; height: auto; aspect-ratio: 1000 / 202; }
.sec-footer .icon-24px { filter: brightness(0) invert(1); }
.sec-footer .form-input-field-t0 {
  color: var(--wall-white);
  border-bottom-color: var(--wall-white);
}
.sec-footer .form-input-field-t0::placeholder { color: rgba(255, 255, 255, 0.6); }
.sec-footer .form-input-field-t0:focus { border-bottom-color: var(--wall-white); }
.sec-footer .button-arrow {
  filter: brightness(0) invert(1);
  width: 50px;
  height: 22px;
  background-size: contain;
  border: 0;
  padding: 0;
}

[data-footer] { background-color: var(--deep-grey); }

.footer-bottom { width: 100%; }

.footer-locale-switcher {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.footer-locale-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-lg);
  padding: 8px 16px;
  color: var(--wall-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.footer-locale-trigger:hover,
.footer-locale-switcher--open .footer-locale-trigger {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
}
.footer-locale-icon { flex-shrink: 0; opacity: 0.85; }
.footer-locale-label { letter-spacing: 0.02em; }
.footer-locale-divider { opacity: 0.5; }
.footer-locale-current { font-weight: 600; }

.footer-locale-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 100%;
  background: #1F1F1F;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  z-index: 10;
}
.footer-locale-menu[hidden] { display: none; }

.footer-locale-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--wall-white);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.footer-locale-option:hover { background: rgba(255, 255, 255, 0.08); }
.footer-locale-option--selected { background: rgba(255, 255, 255, 0.12); }
.footer-locale-option-symbol {
  display: inline-flex;
  justify-content: center;
  width: 14px;
  font-weight: 600;
  opacity: 0.8;
}

.div-footer { justify-content: space-between; }

.cta-footer { width: 450px; }


/* ── Hero ─────────────────────────────────────────────────── */
.sec-hero {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  overflow: hidden;
}

/* Shared hero stack — eyebrow / headline / subline / CTA, left-aligned over
   the full-bleed hero image. Used by index, whyphare, howitworks, etc. Page-
   specific tweaks (CTA buttons, mobile breaks) live in their own files. */
.sec-hero .div-h-centred { justify-content: flex-start; }
.sec-hero .div-hero {
  text-align: left;
  padding-left: 192px;
  padding-right: 192px;
  transform: translateY(-50px);
  min-width: 0;
}
.sec-hero h1 { color: var(--wall-white); margin: 0; text-align: left; overflow-wrap: anywhere; }
.sec-hero h3 { margin: 16px 0 12px; text-align: left; max-width: 600px; color: var(--wall-white); }
.sec-hero p { margin: 16px 0 0; text-align: left; }
@media (max-width: 991px) {
  .sec-hero .div-hero { padding-left: 64px; padding-right: 64px; }
}
@media (max-width: 767px) {
  .sec-hero .div-hero { padding-left: 24px; padding-right: 24px; }
}

.hero-badge {
  position: absolute;
  bottom: 64px;
  left: 64px;
  height: 168px;
  width: auto;
  z-index: 2;
  pointer-events: none;
}

.div-hero-mouse-scroll {
  height: 300px;
  position: absolute;
  inset: auto 0% -75px;
}


.sec-margins-centred { padding: 72px 0 124px; }
.sec-120px-padding { padding-top: 120px; padding-bottom: 120px; }


/* ── Logos / icons ────────────────────────────────────────── */
.logo-20px {
  width: auto;
  height: 20px;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

/* CSS-mask logo mark: lets a single black-filled SVG render in any
   color via background-color, without editing the SVG. */
.logo-mark {
  display: inline-block;
  vertical-align: middle;
  background-color: var(--wall-white);
  -webkit-mask: url('../images/logo-pharelabs.svg') no-repeat center / contain;
          mask: url('../images/logo-pharelabs.svg') no-repeat center / contain;
}
.logo-mark.logo-20px {
  width: 99px;
  height: 20px;
  flex-shrink: 0;
}
.logo-24px {
  width: auto;
  height: 24px;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}
.logo-mark.logo-24px {
  width: 119px;
  height: 24px;
  flex-shrink: 0;
}

.logo-40px {
  opacity: 0.3;
  object-fit: contain;
  width: 220px;
  height: 40px;
  padding: 0 42px;
}

.icon-16px {
  object-fit: contain;
  align-items: center;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  display: flex;
}

.icon-20px {
  object-fit: contain;
  align-items: center;
  width: 20px;
  height: 24px;
  display: flex;
}
.icon-20px.white { color: var(--wall-white); }

.icon-24px { opacity: 0.1; width: 24px; }
.icon-24px:hover { opacity: 1; }


/* ── Email popup ──────────────────────────────────────────── */
.popup-fullscreen {
  z-index: 100;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.33);
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  display: none;
  position: fixed;
  inset: 0%;
}
.popup-fullscreen.is-visible {
  display: flex;
  animation: popupFadeIn 0.3s ease-out;
}

@keyframes popupFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.popup-bg {
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.33);
  position: fixed;
  inset: 0%;
}

.popup-con-text {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: stretch;
  padding: 96px 32px;
  display: flex;
  position: relative;
}

.popup-cross {
  cursor: pointer;
  width: 80px;
  height: 80px;
  padding: 30px;
  position: absolute;
  inset: 0% 0 0% auto;
}
.popup-cross:hover { filter: invert(70%); }

.popup-name-row {
  display: flex;
  gap: 16px;
}

.popup-discount-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.popup-discount-code {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 20px;
  background: #f5f5f5;
  border: 2px dashed var(--deep-grey);
  border-radius: 6px;
  user-select: all;
}

.popup-copy-btn {
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--deep-grey);
  color: var(--wall-white);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}
.popup-copy-btn:hover { background: #555; }

.popup-div-desktop {
  background-color: var(--wall-white);
  border-radius: 12px;
  width: 90vw;
  max-width: 900px;
  min-height: 500px;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.popup-fullscreen .layout-cell {
  flex: 1 1 50%;
  min-width: 0;
  align-items: stretch;
}
.popup-fullscreen .layout-cell:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── Cart drawer ──────────────────────────────────────────── */
.phare-cart-panel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.phare-cart-panel--open { pointer-events: auto; }

.phare-cart-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
.phare-cart-panel--open .phare-cart-overlay { opacity: 1; }

.phare-cart-drawer {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: var(--wall-white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow: hidden;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}
.phare-cart-panel--open .phare-cart-drawer { transform: translateX(0); }

.phare-cart-body-lock { overflow: hidden; }

.phare-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.phare-cart-title { margin: 0; font-size: 18px; font-weight: 600; }
.phare-cart-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  color: var(--deep-grey);
  border-radius: 4px;
}
.phare-cart-close:hover { background: #f5f5f5; }

.phare-cart-body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.phare-cart-empty-msg {
  color: #888;
  text-align: center;
  margin: 40px 0;
  font-size: 15px;
}
.phare-cart-items { list-style: none; margin: 0; padding: 0; }

.phare-cart-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: opacity 0.15s;
}
.phare-cart-item:last-child { border-bottom: none; }
.phare-cart-item-info { flex: 1; min-width: 0; }
.phare-cart-item-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.phare-cart-item-meta { font-size: 12px; color: var(--london-grey); margin-bottom: 4px; }
.phare-cart-item-plan-badge {
  display: inline-block;
  font-size: 11px;
  background: #FFF1E6;
  color: var(--alert-orange);
  border-radius: 4px;
  padding: 2px 7px;
  margin-top: 2px;
  font-weight: 500;
}
.phare-cart-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.phare-cart-item-price { font-weight: 600; font-size: 15px; white-space: nowrap; }
.phare-cart-item-price-original {
  text-decoration: line-through;
  opacity: 0.5;
  font-weight: 400;
  margin-right: 4px;
}
.phare-cart-item-price-discounted { color: inherit; }
.phare-cart-item-price-free,
.phare-cart-item-price--free { color: var(--alert-orange); font-weight: 700; }
.phare-cart-item-savings { color: var(--alert-orange); font-size: 13px; font-weight: 600; }
.phare-cart-item-controls { display: flex; align-items: center; gap: 6px; }

.phare-cart-qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #ddd;
  background: var(--wall-white);
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.phare-cart-qty-btn:hover:not(:disabled) { background: #f5f5f5; }
.phare-cart-qty-btn:disabled { opacity: 0.35; cursor: default; }

.phare-cart-qty {
  min-width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

.phare-cart-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: #999;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.phare-cart-remove-btn:hover { color: var(--deep-grey); }

.phare-cart-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}
.phare-cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 16px;
}
.phare-cart-subtotal-value { font-weight: 600; }
.phare-cart-savings-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -8px;
  margin-bottom: 14px;
  color: var(--alert-orange);
  font-weight: 600;
  font-size: 14px;
}

button.phare-cart-checkout-btn {
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
}

.phare-cart-error-msg {
  color: #c00;
  font-size: 13px;
  margin: 0;
  text-align: center;
}


/* ── Cookie consent ───────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--black-grey);
  color: var(--wall-white);
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  animation: cookieSlideUp 0.35s ease-out;
}

@keyframes cookieSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.cookie-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.cookie-banner-text { margin: 0; flex: 1; font-size: 0.85rem; }
.cookie-banner-actions { display: flex; gap: 0.625rem; flex-shrink: 0; }

.cookie-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.cookie-btn:hover { opacity: 0.85; }

.cookie-btn-accept,
.cookie-btn-save {
  background: var(--macaw-blue);
  color: var(--wall-white);
}
.cookie-btn-reject,
.cookie-btn-manage {
  background: transparent;
  color: var(--wall-white);
  border: 1px solid #666;
}

.cookie-prefs-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  animation: cookieFadeIn 0.2s ease-out;
}

@keyframes cookieFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cookie-prefs-modal {
  background: var(--wall-white);
  border-radius: 12px;
  width: 92%;
  max-width: 520px;
  max-height: calc(var(--vh, 1vh) * 85);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: cookieScaleIn 0.25s ease-out;
}

@keyframes cookieScaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.cookie-prefs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--light-grey);
}

.cookie-prefs-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--deep-grey);
}

.cookie-prefs-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--deep-grey);
  padding: 0.25rem;
  line-height: 1;
}
.cookie-prefs-close:hover { opacity: 0.7; }

.cookie-prefs-body { padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1; }
.cookie-prefs-intro {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.6;
}

.cookie-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--light-grey);
}
.cookie-category:last-child { border-bottom: none; }
.cookie-category-info { flex: 1; }
.cookie-category-name {
  display: block;
  font-size: 0.9rem;
  color: var(--deep-grey);
}
.cookie-category-desc {
  display: block;
  font-size: 0.78rem;
  color: #777;
  margin-top: 0.2rem;
  line-height: 1.5;
}

.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cookie-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  transition: background 0.2s;
}
.cookie-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--wall-white);
  border-radius: 50%;
  transition: transform 0.2s;
}
.cookie-toggle input:checked + .cookie-toggle-slider { background: var(--macaw-blue); }
.cookie-toggle input:checked + .cookie-toggle-slider::before {
  transform: translateX(20px);
}
.cookie-toggle input:focus-visible + .cookie-toggle-slider {
  outline: 2px solid var(--macaw-blue);
  outline-offset: 2px;
}
.cookie-toggle--disabled { cursor: default; opacity: 0.6; }

.cookie-prefs-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--light-grey);
}


/* ── Product / dropdown helpers ───────────────────────────── */
.div-product-dropdowns {
  grid-column-gap: 7px;
  grid-row-gap: 7px;
  border-style: solid solid none;
  border-width: 1px 0 0;
  border-color: var(--london-grey) #99999980;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 20px 0;
  display: flex;
}

.dropdown-titles {
  cursor: pointer;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 10px 0;
  display: flex;
}

.dropdown-open,
.dropdown-closed { margin-bottom: 32px; }

/* -------------------------------------------------------------
   Product configurator (shop/c1.html)
   Scoped under .product-configurator-section / .cmp- / .tech-specs-
   class prefixes so these rules don't leak into other pages.
   ------------------------------------------------------------- */

/* Product Configurator Section */
.product-configurator-section { padding: 76px 0; scroll-margin-top: 64px; }
.product-configurator-section .con-1280px { max-width: 1980px; }
.product-configurator-layout { display: flex; gap: 32px; align-items: flex-start; }
.product-configurator-image-column { flex: 1 1 0; min-width: 0; }
.product-configurator-text-column { flex: 1 1 0; min-width: 0; }
@media (min-width: 992px) {
  .product-configurator-text-column {
    height: calc(var(--vh, 1vh) * 100 - 180px);
    position: sticky;
    top: 20px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
  }
  /* Inner scroll area: takes the remaining height above the sticky bar
     and scrolls on its own, so the bar below it stays glued to the
     bottom of the column (which mirrors the image carousel height). */
  .product-configurator-text-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Bottom padding ≥ the mask fade height so the gradient always
       feathers empty space rather than dimming real content at the
       end of the scroll. */
    padding-bottom: 48px;
    /* Fade the scroll wrapper's bottom edge so the content itself
       (not a coloured overlay) becomes transparent — lets the body's
       grey gradient show through cleanly above the dark sticky bar. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
  }
  .product-configurator-text-scroll::-webkit-scrollbar { display: none; }
  .product-configurator-sticky-bar { flex: 0 0 auto; margin-top: 0; }
  .product-configurator-image-column {
    height: calc(var(--vh, 1vh) * 100 - 180px);
  }
  .product-configurator-image {
    height: calc(var(--vh, 1vh) * 100 - 180px);
    object-fit: cover;
  }
  .product-configurator-carousel-slide .product-configurator-image {
    height: calc(var(--vh, 1vh) * 100 - 180px);
    object-fit: cover;
  }
}
.product-configurator-image { width: 100%; height: 817px; object-fit: cover; border-radius: var(--radius-sm);}
.product-configurator-body { color: var(--deep-grey); font-size: 16px; line-height: 1.6; margin-top: 12px; margin-bottom: 8px; }
.product-configurator-text-column h1 { color: var(--deep-grey); margin-bottom: 16px; }
.product-configurator-color-heading { color: var(--deep-grey); text-align: left; margin-bottom: 16px; margin-top: 40px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.savings-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  margin-left: 12px;
  padding: 0 6px;
  border: 2px solid var(--deep-grey);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--deep-grey);
}
.savings-badge.savings-badge--muted {
  border-color: var(--alert-orange);
  color: var(--alert-orange);
}
.product-configurator-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 0; }
.product-configurator-button {
  border-radius: var(--radius-sm);
  background-color: transparent;
  border: 2px solid var(--light-grey);
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  transition: border-color 0.3s ease;
  font-family: inherit;
}
.product-configurator-button-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-configurator-button:hover {
  border-color: var(--alert-orange);
}
.product-configurator-button-selected {
  border-color: var(--deep-grey);
  border-width: 2px;
}
.product-configurator-button-selected:hover {
  border-color: var(--alert-orange);
}
.product-configurator-button-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 2px;
}
.product-configurator-button-text {
  color: var(--deep-grey);
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}
.product-configurator-strike-price {
  text-decoration: line-through;
}
/* Push the monthly-price block to the right edge of the plan title row, and
   hide it entirely until JS populates the original monthly slot so the button
   label reads "Protect Starter" / "Protect Pro" cleanly during load. */
.product-configurator-plan-price-wrap {
  margin-left: auto;
}
.product-configurator-plan-price-wrap:has(.product-configurator-plan-original-monthly:empty) {
  display: none;
}
.product-configurator-plan-original-monthly.is-strike {
  text-decoration: line-through;
  color: var(--london-grey);
}
.product-configurator-plan-final-monthly {
  margin-left: 6px;
  font-weight: 600;
}
.product-configurator-plan-final-monthly:empty {
  display: none;
}
.product-configurator-plan-final-monthly.is-free {
  color: var(--alert-orange);
}
.product-configurator-button-body {
  margin-top: 12px;
  width: 100%;
  display: none;
}
.product-configurator-button-selected .product-configurator-button-body {
  display: block;
}
[data-phare-plan-selector] .product-configurator-button-body {
  display: block;
  padding-left: 26px;
}
.product-configurator-plan-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-configurator-plan-eyebrow.eyebrow {
  margin-top: 6px;
  padding-left: 26px;
}
.product-configurator-plan-radio {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--deep-grey);
  background: #FFFFFF;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease;
}
[data-phare-plan-selector] .product-configurator-button-selected .product-configurator-plan-radio {
  background: var(--alert-orange);
  border-color: var(--alert-orange);
}
[data-phare-plan-selector] .product-configurator-button-selected .product-configurator-plan-radio::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.product-configurator-quantity-selector + .product-configurator-color-heading {
  margin-top: 40px;
}
[data-phare-plan-selector] .product-configurator-button-text {
  font-weight: 600;
}
[data-phare-plan-selector] .product-configurator-button:not(.product-configurator-button-selected) {
  opacity: 0.7;
  border-color: #D0D0D0;
}
[data-phare-plan-selector] .product-configurator-button.product-configurator-button-selected {
  opacity: 1;
}
[data-phare-plan-selector] .product-configurator-button:not(.product-configurator-button-selected):hover,
[data-phare-model-selector] .product-configurator-button:not(.product-configurator-button-selected):hover {
  border-color: var(--alert-orange);
}
.product-configurator-button-body-line {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--deep-grey);
}
.product-configurator-button-body-line:last-child {
  margin-bottom: 0;
}
.product-configurator-button-bullet-icon {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  flex-shrink: 0;
  margin-top: 4px;
  object-fit: contain;
}
/* Number of Devices Button Set */
.product-configurator-buttons-devices {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0;
}
.product-configurator-buttons-devices .product-configurator-button {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.product-configurator-buttons-devices .product-configurator-button-icon {
  display: none;
}
.product-configurator-buttons-devices .product-configurator-button-text {
  text-align: center;
  font-size: 18px;
  line-height: 1;
  margin: 0;
}
.product-configurator-buttons-devices .product-configurator-button-selected {
  background-color: var(--deep-grey);
  border-color: var(--deep-grey);
}
.product-configurator-buttons-devices .product-configurator-button-selected .product-configurator-button-text {
  color: #FFFFFF;
}
.product-configurator-sticky-bar {
  width: 100%;
  background-color: var(--deep-grey);
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-top: 24px;
  border-radius: var(--radius-sm);
}
.product-configurator-sticky-bar-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.product-configurator-sticky-bar-price-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.product-configurator-sticky-bar-price-discounted {
  margin: 0;
  color: #FFFFFF;
  font-size: 16px;
}
.product-configurator-sticky-bar-price-original {
  text-decoration: line-through;
  color: var(--london-grey);
  font-size: 14px;
  font-weight: 400;
}
.product-configurator-sticky-bar-small {
  font-size: 14px;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0;
}
.product-configurator-sticky-bar-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.product-configurator-sticky-bar-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background-color: #FFFFFF;
  color: var(--deep-grey);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.product-configurator-sticky-bar-checkout:hover {
  background-color: var(--alert-orange);
  color: var(--wall-white);
}
.product-configurator-sticky-bar-checkout:hover .product-configurator-checkout-label { color: var(--wall-white); }
.product-configurator-sticky-bar-checkout:disabled,
.product-configurator-mobile-checkout:disabled {
  opacity: 0.15;
  cursor: not-allowed;
  pointer-events: none;
}
.product-configurator-sticky-bar-checkout .product-configurator-checkout-label {
  margin: 0;
  color: var(--deep-grey);
  font-size: 16px;
  font-weight: 600;
}
.product-configurator-mobile-checkout-wrap {
  display: none;
}
.product-configurator-mobile-checkout {
  box-sizing: border-box;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background-color: var(--deep-grey);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.3s ease;
}
.product-configurator-mobile-checkout:hover {
  background-color: var(--alert-orange);
}
.product-configurator-mobile-checkout .product-configurator-checkout-label {
  margin: 0;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
}
@media (max-width: 767px) {
  .product-configurator-mobile-checkout-wrap {
    display: block;
    width: 100%;
    margin-top: 14px;
  }
}
.product-configurator-quantity-selector {
  display: none;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  justify-content: center;
}
.product-configurator-quantity-selector.show,
.product-configurator-quantity-selector--always {
  display: flex;
}
/* Quantity stepper lives inside each model pill, but only renders on the
   selected one — keeps the inactive pills compact. */
[data-phare-model-selector] .product-configurator-button:not(.product-configurator-button-selected) .product-configurator-quantity-selector {
  display: none;
}
.product-configurator-device-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Default (inactive) state — used by cross-sell pills until qty > 0. */
  border: 1px solid #D0D0D0;
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color 0.2s ease;
}
.product-configurator-device-pill:hover {
  border-color: var(--alert-orange);
}
.product-configurator-device-pill-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.product-configurator-device-pill-title {
  color: #999;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.product-configurator-device-pill-subtitle {
  color: #B0B0B0;
  font-size: 12px;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.product-configurator-device-pill .product-configurator-quantity-selector {
  margin-top: 0;
  gap: 8px;
  flex-shrink: 0;
}
.product-configurator-device-pill .product-configurator-quantity-minus,
.product-configurator-device-pill .product-configurator-quantity-plus {
  width: 32px;
  height: 32px;
  font-size: 18px;
  color: #999;
  border-color: #D0D0D0;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.product-configurator-device-pill .product-configurator-quantity-value {
  color: #999;
  transition: color 0.2s ease;
}
/* Locked state — applied to the device-selection block until the user
   picks a Phare Protect plan. Children are visually faded and unclickable. */
.product-configurator-device-section--locked {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.2);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.product-configurator-device-section {
  transition: opacity 0.2s ease, filter 0.2s ease;
}
/* Active state — applied to Phare C1 always, and to a cross-sell pill when its qty > 0. */
.product-configurator-device-pill--active {
  border-color: var(--deep-grey);
  border-width: 2px;
  /* Compensate the +1px border so total box height stays consistent across states. */
  padding: 15px;
}
.product-configurator-device-pill--active .product-configurator-device-pill-title {
  color: var(--deep-grey);
}
.product-configurator-device-pill--active .product-configurator-device-pill-subtitle {
  color: #666;
}
.product-configurator-device-pill--active .product-configurator-quantity-minus,
.product-configurator-device-pill--active .product-configurator-quantity-plus {
  color: var(--deep-grey);
  border-color: var(--light-grey);
}
.product-configurator-device-pill--active .product-configurator-quantity-value {
  color: var(--deep-grey);
}
.product-configurator-reassurance {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.product-configurator-reassurance-list {
  list-style: none;
  margin: 0;
  padding: 10px 18px;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 20px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  pointer-events: auto;
}
.product-configurator-reassurance-list::-webkit-scrollbar {
  display: none;
}
.product-configurator-reassurance-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--deep-grey);
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}
.product-configurator-reassurance-item sup {
  line-height: 1;
  margin-left: 1px;
  color: #666;
  font-size: 10px;
}
.product-configurator-reassurance-footnote {
  color: inherit;
  text-decoration: none;
}
.product-configurator-reassurance-footnote:hover sup {
  text-decoration: underline;
}
.product-configurator-reassurance-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}
.product-configurator-award-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 180px;
  height: auto;
  z-index: 5;
  pointer-events: none;
}
@media (min-width: 992px) {
  .product-configurator-award-badge {
    bottom: 20px;
    left: 20px;
    width: 220px;
  }
}
@media (max-width: 767px) {
  .product-configurator-award-badge { width: 135px; }
}
.product-configurator-quantity-minus,
.product-configurator-quantity-plus {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--light-grey);
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--deep-grey);
  transition: border-color 0.3s ease;
  font-family: inherit;
  padding: 0;
}
.product-configurator-quantity-minus:hover:not(:disabled),
.product-configurator-quantity-plus:hover:not(:disabled) {
  border-color: var(--alert-orange);
}
.product-configurator-quantity-minus:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--light-grey);
}
.product-configurator-quantity-value {
  min-width: 40px;
  text-align: center;
  font-size: 16px;
  color: var(--deep-grey);
  font-weight: 500;
}
.product-configurator-quantity-plus:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--light-grey);
}
@media (max-width: 991px) {
  .product-configurator-layout { flex-direction: column; }
  .product-configurator-image-column {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .product-configurator-text-column { width: 100%; }
  .product-configurator-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    border-radius: 0;
    z-index: 100;
  }
}
@media (max-width: 991px) and (min-width: 480px) {
  .product-configurator-image-column .product-configurator-image {
    width: 729px;
    height: 410px;
    object-fit: cover;
  }
}
@media (max-width: 767px) {
  /* Full-bleed carousel: extend horizontally past .con-1280px's 24px
     gutters. (Carousel slide squared-top-corners override is placed
     below its base rule to win the cascade.) */
  .product-configurator-section { padding-top: 0; }
  .product-configurator-image-column {
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
  }
}
@media (max-width: 479px) {
  .product-configurator-image-column .product-configurator-image {
    width: 400px;
    height: 400px;
    object-fit: cover;
  }
}
/* Product Configurator Carousel */
.product-configurator-carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
@media (min-width: 992px) {
  .product-configurator-carousel-wrapper {
    height: 100%;
  }
}
.product-configurator-carousel-container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
  height: 100%;
}
.product-configurator-carousel-container::-webkit-scrollbar {
  display: none;
}
.product-configurator-carousel-slide {
  box-sizing: border-box;
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  background-color: #f5f5f5;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 767px) {
  /* Squared top corners on mobile so the full-bleed carousel reads as
     a true edge-to-edge image. Taller-than-wide aspect (1:1.5) for a
     hero-like mobile crop. Placed after the base rule so it wins. */
  .product-configurator-carousel-slide {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    aspect-ratio: 1 / 1.35;
  }
}
.product-configurator-carousel-slide picture {
  width: 100%;
  height: 100%;
  display: block;
}
.product-configurator-carousel-slide .product-configurator-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
@media (min-width: 992px) {
  .product-configurator-carousel-slide {
    aspect-ratio: auto;
    height: calc(var(--vh, 1vh) * 100 - 180px);
  }
  .product-configurator-carousel-slide .product-configurator-image {
    height: 100%;
    object-fit: cover;
  }
}
.product-configurator-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
.product-configurator-carousel-nav:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.product-configurator-carousel-nav:active {
  transform: translateY(-50%) scale(0.95);
}
.product-configurator-carousel-nav svg {
  width: 24px;
  height: 24px;
  color: #333;
}
.product-configurator-carousel-nav-left {
  left: 20px;
}
.product-configurator-carousel-nav-right {
  right: 20px;
}
.product-configurator-carousel-nav.hidden {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 991px) {
  .product-configurator-carousel-nav {
    width: 40px;
    height: 40px;
  }
  .product-configurator-carousel-nav svg {
    width: 20px;
    height: 20px;
  }
  .product-configurator-carousel-nav-left {
    left: 10px;
  }
  .product-configurator-carousel-nav-right {
    right: 10px;
  }
}
/* Disclaimers Section */
.disclaimers-section { padding: 20px 0; }
.disclaimers-list {
  list-style: none;
  counter-reset: disclaimer;
  margin: 0;
  padding: 0;
  color: #666;
  font-size: 10px;
  line-height: 1.6;
}
.disclaimers-list li {
  counter-increment: disclaimer;
  scroll-margin-top: 80px;
}
.disclaimers-list li::before {
  content: counter(disclaimer);
  font-size: 0.8em;
  vertical-align: super;
  line-height: 1;
  margin-right: 4px;
  color: var(--deep-grey);
  font-weight: 600;
}
.disclaimers-list li:last-child { margin-bottom: 0; }
.disclaimers-list strong { color: var(--deep-grey); font-weight: 600; }
.disclaimers-note {
  margin: 0;
  color: #666;
  font-size: 10px;
  line-height: 1.6;
}
.disclaimers-note strong { color: var(--deep-grey); font-weight: 600; }

/* FAQ Section */
.faq-section { padding: 72px 0; scroll-margin-top: 40px; }
.faq-accordion-item { border-bottom: 1px solid #E1E1E1; }
.faq-accordion-item:last-child { border-bottom: none; }
.faq-question { margin: 0; padding: 12px 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: var(--deep-grey); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.faq-question:hover { color: #1a1a1a; }
.faq-question::after { content: '+'; font-size: 32px; font-weight: 300; }
.faq-accordion-item.faq-open .faq-question::after { content: '−'; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer-inner { padding: 0 0 40px 0; color: var(--deep-grey); line-height: 1.6; }

/* Model selector — give each model card visible body text so users see all
   three taglines at once (rather than hiding inactive bodies as the plan
   selector does). */
[data-phare-model-selector] { flex-direction: row; align-items: stretch; }
[data-phare-model-selector] .product-configurator-button { flex: 1 1 0; min-width: 0; }
[data-phare-model-selector] .product-configurator-button-body { display: block; }
[data-phare-model-selector] .product-configurator-button-text { font-weight: 600; }
[data-phare-model-selector] .product-configurator-button-body-line {
  font-size: 13px; color: #666; line-height: 1.45; margin-top: 4px; margin-bottom: 0;
}
[data-phare-model-selector] .product-configurator-button:not(.product-configurator-button-selected) {
  opacity: 0.7;
  border-color: #D0D0D0;
}
[data-phare-model-selector] .product-configurator-button.product-configurator-button-selected {
  opacity: 1;
}
[data-phare-model-selector] .product-configurator-button.product-configurator-button-selected .product-configurator-button-body-line {
  color: var(--deep-grey);
}
[data-phare-plan-selector] { flex-direction: row; align-items: stretch; }
[data-phare-plan-selector] .product-configurator-button { flex: 1 1 0; min-width: 0; }
@media (max-width: 599px) {
  [data-phare-model-selector],
  [data-phare-plan-selector] { flex-direction: column; }
}

/* ========================================================
   Compare Phare — v2 spec table
   Self-contained styles; uses .cmp- prefix to avoid collisions
   ======================================================== */
.cmp-section { padding: 80px 0; scroll-margin-top: 80px; font-family: 'Space Grotesk', sans-serif; color: var(--deep-grey); }
.cmp-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 20px; text-align: left; }
.cmp-intro h2 { margin-bottom: 8px; }
.cmp-title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0; }

.cmp-card { position: relative; isolation: isolate; background: #fff; border: 1px solid rgba(43, 43, 43, 0.08); border-radius: var(--radius-sm); box-shadow: 0 6px 30px rgba(43, 43, 43, 0.04); overflow: visible; }
.cmp-scroll { overflow: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
@media (max-width: 991px) {
  /* overflow-y: clip prevents the browser from promoting overflow-y to
     auto (which would add a vertical scrollbar / unwanted overflow on
     the section). The pill is hidden on tablet/mobile so we don't need
     to keep room for it above the table. */
  .cmp-scroll { overflow-x: auto; overflow-y: clip; }
  /* Move the C1 column highlight inside the scroll content so it tracks
     the column rigidly when the user scrolls horizontally. The desktop
     .cmp-card::before stays put when the table scrolls inside .cmp-scroll
     so we hide it here. The .cmp-table::before is positioned in table
     percentages → matches the actual C1 column width and position. */
  .cmp-card::before { display: none; }
  .cmp-table { position: relative; }
  .cmp-table::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(32% + (68% / 3));
    width: calc(68% / 3);
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 28px rgba(43, 43, 43, 0.12);
    z-index: 3;
    pointer-events: none;
  }
  .cmp-table { min-width: 960px; }
  /* Freeze the feature-label column while the three model columns scroll
     horizontally on tablet/mobile. z-index is bumped above the featured
     C1 column (which sits at z-4 to clear the desktop overlay) so the
     scrolled cells slide cleanly UNDER the white feature column. The
     1px box-shadow on the right edge draws a thin separator visible
     when content scrolls underneath. */
  .cmp-table thead th:first-child,
  .cmp-table .cmp-feature {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #fff;
    box-shadow: 1px 0 0 rgba(43, 43, 43, 0.12);
  }
  /* Section row bg override moved below the base rule (file order
     matters — same-specificity rules in cascade) so it wins on tablet
     and mobile. */
}
.cmp-scroll::-webkit-scrollbar { display: none; }

.cmp-table { width: 100%; min-width: 1080px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.cmp-table colgroup .cmp-col-feature { width: 32%; }
.cmp-table colgroup .cmp-col-model { width: auto; }
@media (max-width: 767px) {
  /* Cap the sticky feature column at half the viewport so the model
     columns aren't crowded out behind the frozen left column. */
  .cmp-table colgroup .cmp-col-feature { width: 50vw; }
}

/* Header row (model cards) */
.cmp-table thead th { padding: 32px 24px 28px; vertical-align: top; text-align: center; background: #fff; border-bottom: 1px solid rgba(43, 43, 43, 0.08); position: relative; }
.cmp-table thead th:first-child { border-bottom: 1px solid rgba(43, 43, 43, 0.08); border-top-left-radius: var(--radius-sm); }
.cmp-table thead th:last-child { border-top-right-radius: var(--radius-sm); }

.cmp-modelhead-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 100%; }

/* All cells render above the .cmp-card::before overlay so their icons
   and text are visible. Cell backgrounds stay transparent (except the
   thead row, see below), so the overlay's drop shadow can show through
   wherever it bleeds into adjacent columns. */
.cmp-table thead th,
.cmp-table tbody th,
.cmp-table tbody td { position: relative; z-index: 2; }
/* Drop the explicit white background on header cells so the overlap
   between the featured pill and the adjacent C1 Core / C1 Pro headers
   is visible (the .cmp-card itself is already white). */
.cmp-table thead th { background: transparent; }
/* Lift the C1 (featured) column above the pill overlay so its text
   and icons stay visible. The overlay covers adjacent cells (z:2);
   C1 column cells sit above the overlay (z:4). */
.cmp-table thead th:nth-child(3),
.cmp-table tbody td:nth-child(3),
.cmp-table tbody th:nth-child(3) { z-index: 4; border-bottom-color: transparent; }
.cmp-table thead th.cmp-modelhead--featured { z-index: 5; overflow: visible; }
.cmp-modelhead--featured .cmp-pill--accent { z-index: 6; }

/* Featured-column pill: a white overlay anchored to the C1 column,
   spanning the full height of the table card and slightly wider than
   the column itself so it visibly overlaps the adjacent columns.
   Computed from the table's fixed column widths (32% feature + three
   equal model columns). */
.cmp-card::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: calc(32% + (68% / 3) - 14px);
  width: calc(68% / 3 + 28px);
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(43, 43, 43, 0.12);
  /* Above adjacent cells (z:2) so it covers their borders / section-row
     bands that bleed into the overhang. C1 column cells are bumped to
     z:4 below so their content stays visible above the pill. */
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 991px) {
  /* Solid grey for the section row so feature rows underneath can't
     bleed through during horizontal scroll. The .cmp-table::before
     overlay (z-3) sits above this td (z-2) and paints the white C1
     column on top. */
  .cmp-section-row td { background: #f7f7f7; }
}
.cmp-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.cmp-pill--ghost { background: rgba(43, 43, 43, 0.06); color: rgba(43, 43, 43, 0.55); }
.cmp-pill--accent { background: var(--alert-orange); color: #fff; box-shadow: 0 4px 12px rgba(255, 122, 41, 0.25); }
.cmp-pill--bare { background: transparent; color: rgba(43, 43, 43, 0.55); padding: 0; margin-top: -10px; }
.cmp-table thead th.cmp-modelhead--featured { overflow: visible; }
.cmp-modelhead--featured .cmp-pill--accent {
  position: absolute;
  /* Match the overlay's top extension so the pill sits on the overlay's top edge. */
  top: -12px;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
@media (max-width: 991px) {
  .cmp-modelhead--featured .cmp-pill--accent { display: none; }
}
.cmp-modelhead-inner h3 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }

.cmp-price { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; }
.cmp-price-label { font-size: 10px; }
.cmp-price-value { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.cmp-price-strike { display: block; font-size: 12px; color: rgba(43, 43, 43, 0.45); text-decoration: line-through; margin-top: 2px; }

.cmp-cta { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; min-width: 150px; text-decoration: none; }

/* Section divider rows (DETECTION & SAFETY, etc.) — both halves of the
   row (sticky <th class="cmp-section-feature"> + scrolling
   <td class="cmp-section-cell">) share a soft grey band. The desktop
   .cmp-card::before / tablet .cmp-table::before overlay paints the white
   C1 column highlight on top in either context. */
.cmp-section-row .cmp-section-feature,
.cmp-section-row .cmp-section-cell {
  padding: 12px 24px 12px;
  background: rgba(43, 43, 43, 0.02);
  border-top: 1px solid rgba(43, 43, 43, 0.06);
  border-bottom: 1px solid rgba(43, 43, 43, 0.06);
}
.cmp-section-row:first-of-type .cmp-section-feature,
.cmp-section-row:first-of-type .cmp-section-cell { border-top: none; }
@media (max-width: 991px) {
  /* Solid grey on tablet/mobile so feature rows underneath can't bleed
     through during horizontal scroll. Placed AFTER the base rule so its
     same-specificity declaration wins in the cascade. */
  .cmp-section-row .cmp-section-feature,
  .cmp-section-row .cmp-section-cell { background: #f7f7f7; }
}
.cmp-section-row .cmp-section-label { display: inline-flex; align-items: center; gap: 10px; color: var(--alert-orange); }
.cmp-section-row .cmp-section-label::before { content: ""; width: 18px; height: 1px; background: var(--alert-orange); display: inline-block; }

/* Feature rows */
.cmp-feature-row { transition: background-color 0.15s ease; }
.cmp-feature-row:hover { background: rgba(43, 43, 43, 0.018); }
.cmp-feature-row > th, .cmp-feature-row > td { padding: 12px 24px; border-bottom: 1px solid rgba(43, 43, 43, 0.05); vertical-align: middle; }
.cmp-feature-row:last-child > th, .cmp-feature-row:last-child > td { border-bottom: none; }
.cmp-feature-row .cmp-feature { text-align: left; font-size: 15px; font-weight: 400; color: var(--deep-grey); line-height: 1.4; }
.cmp-feature-row .cmp-cell { text-align: center; }

/* Yes / No indicators */
.cmp-yes { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; transition: transform 0.15s ease; }
.cmp-feature-row:hover .cmp-yes { transform: scale(1.04); }
.cmp-yes img { width: 20px; height: 20px; display: block; }
.cmp-no { display: inline-block; width: 14px; height: 1px; background: rgba(43, 43, 43, 0.22); }

/* Footnote */
.cmp-footnote { margin-top: 16px; font-size: 12px; color: rgba(43, 43, 43, 0.5); text-align: left; }

/* Mobile — sticky feature column, scroll inside the card */
@media (max-width: 767px) {
  .cmp-section { padding: 56px 0; }
  .cmp-card { border-radius: var(--radius-sm); }
  .cmp-table { min-width: 640px; }
  .cmp-table thead th { padding: 24px 16px 22px; }
  .cmp-modelhead-inner h3 { font-size: 1.05rem; }
  .cmp-price-value { font-size: 13px; }
  .cmp-cta { padding: 8px 14px; min-width: 0; width: 100%; }
  .cmp-section-row .cmp-section-feature,
  .cmp-section-row .cmp-section-cell { padding: 22px 16px 8px; }
  .cmp-feature-row > th, .cmp-feature-row > td { padding: 14px 12px; }
  .cmp-feature-row .cmp-feature { font-size: 14px; }
  .cmp-feature-row:hover .cmp-feature { background: rgba(43, 43, 43, 0.018); }
}

/* ========================================================
   Technical Specifications — full-bleed dark section
   ======================================================== */
.tech-specs-section { background: var(--deep-grey); color: var(--wall-white); padding: 96px 0; font-family: 'Space Grotesk', sans-serif; position: relative; overflow: hidden; scroll-margin-top: 80px; }
.tech-specs-container { max-width: 1280px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.tech-specs-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--alert-orange); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 16px; }
.tech-specs-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--alert-orange); display: inline-block; }
.tech-specs-title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 20px; color: var(--wall-white); }
.tech-specs-intro { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); margin: 0 0 36px; max-width: 480px; }
.tech-specs-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.tech-specs-row { display: grid; grid-template-columns: minmax(140px, 0.85fr) 1.15fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); align-items: baseline; }
.tech-specs-key { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.tech-specs-value { font-size: 15px; line-height: 1.5; color: var(--wall-white); }
.tech-specs-value a { color: var(--wall-white); text-decoration: underline; text-underline-offset: 3px; }
.tech-specs-value a:hover { opacity: 0.75; }
.tech-specs-drawing {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 96px;
  color: var(--wall-white);
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.tech-specs-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: 0.3;
  border: 0 solid currentColor;
  border-width: 0;
  transform: rotate(180deg);
}
.tech-specs-corner--tl { top: 24px; left: 24px; border-top-width: 1.25px; border-left-width: 1.25px; border-top-style: solid; border-left-style: solid; }
.tech-specs-corner--tr { top: 24px; right: 24px; border-top-width: 1.25px; border-right-width: 1.25px; border-top-style: solid; border-right-style: solid; }
.tech-specs-corner--bl { bottom: 24px; left: 24px; border-bottom-width: 1.25px; border-left-width: 1.25px; border-bottom-style: solid; border-left-style: solid; }
.tech-specs-corner--br { bottom: 24px; right: 24px; border-bottom-width: 1.25px; border-right-width: 1.25px; border-bottom-style: solid; border-right-style: solid; }
.tech-specs-figure { margin: 0; display: flex; flex-direction: column; gap: 40px; }
.tech-specs-figure-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.55;
  margin: 0;
}
.tech-specs-figure-image { width: 100%; height: auto; display: block; }
.tech-specs-footnote { margin: 24px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); }
.tech-specs-footnote a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tech-specs-footnote a:hover { opacity: 0.8; }

@media (max-width: 991px) {
  .tech-specs-section { padding: 64px 0; }
  .tech-specs-container { grid-template-columns: 1fr; gap: 48px; padding: 0 32px; }
  .tech-specs-drawing { display: none; }
  .tech-specs-drawing { order: -1; max-width: 420px; }
  .tech-specs-intro { max-width: none; }
}
@media (max-width: 767px) {
  .tech-specs-value { margin-left: 0; }
}
@media (max-width: 479px) {
  .tech-specs-section { padding: 56px 0; }
  .tech-specs-container { padding: 0 24px; gap: 36px; }
  .tech-specs-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .tech-specs-key { font-size: 10px; }
  .tech-specs-value { font-size: 14px; }
}

/* =============================================================
   8. Utilities
   ============================================================= */

/* Eyebrow — small, uppercase, letter-spaced label used above titles,
   inside cards, and for small categorical tags. Pair with a parent
   element to add structural styling (icons, dashes, padding). */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(43, 43, 43, 0.55);
  line-height: 1;
  margin: 0;
}

.con-1280px {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 90vw;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.div-100 {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.div-h-100 {
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.div-v-centred {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.div-h-centred {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.div-h-rightjust {
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.div-expanded-centred {
  flex: 1;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  display: flex;
}

.div-hero { padding: 64px; }

.div-relative { width: 100%; height: 100%; position: relative; }

.div-alpha { background-color: var(--alpha); }

.div-8px-gap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-direction: column;
  display: flex;
}

.div-32px-gap {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  display: flex;
}

.grid-3col {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.pill { border-radius: var(--radius-sm); overflow: hidden; }

.img-absolute {
  z-index: -1;
  object-fit: cover;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}
picture.img-absolute > img { object-fit: cover; width: 100%; height: 100%; }

.img-200px {
  object-fit: cover;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.spacer-8px  { min-width: 8px;  min-height: 8px;  }
.spacer-16px { min-width: 16px; min-height: 16px; }
.spacer-20px { min-width: 20px; min-height: 20px; }
.spacer-32px { min-width: 32px; min-height: 32px; }
.spacer-48px { width: 48px; height: 48px; }
.spacer-20vh { height: calc(var(--vh, 1vh) * 20); }

.text-semibold { font-weight: 600; }
.text-white { color: var(--wall-white); }
.text-red { color: var(--alert-red); }

.t0  { margin-bottom: 0; font-size: 0.75rem; font-weight: 300; line-height: 1rem; }
.t00 { font-size: 0.6rem;  font-weight: 300; line-height: 0.8rem; }

.centred { text-align: center; }
.fade { opacity: 0.35; }
.mobile-only { display: none; }
.min-100vh { min-height: calc(var(--vh, 1vh) * 100); }
.z-10 { z-index: 10; position: relative; }

.link-hover-fade:hover { opacity: 0.5; }


/* =============================================================
   9. Responsive overrides
   ============================================================= */

@media screen and (min-width: 1920px) {
  .popup-cross { cursor: pointer; }
  .t0, .t00 { font-weight: 300; }
}

@media screen and (max-width: 991px) {
  .block-container { max-width: 728px; }

  .div-hero { padding: 32px; }
  .div-h-rightjust { width: auto; }

  .hero-badge { height: 110px; bottom: 40px; left: 40px; }

  .sec-margins-centred { padding: 40px 40px 64px; }

  .logo-40px { height: 30px; padding-left: 24px; padding-right: 24px; }

  /* Hide the main navbar links on tablet/mobile (the burger handles them).
     Scoped to .sec-navbar so secondary in-page nav menus (e.g. the
     .why-sections-navbar on whyphare) keep showing their own .nav-menu. */
  .sec-navbar .nav-menu { display: none; }
  .navbar-burger { display: block; }
  .mobile-hidden { display: none; }

  /* Tablet baseline gutters; mobile overrides to 24px below in the 767 block. */
  .con-1280px { width: 100%; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
  /* Footer keeps its two-column layout on tablet (the 767 block flattens it on
     mobile); add a gap so the columns don't sit flush against each other. */
  .div-footer { gap: 48px; }
  /* Drop the 450px max so the newsletter input fills the available column,
     but keep a 240px floor so the form/socials/currency stay readable. */
  .cta-footer { width: auto; flex: 1; min-width: 240px; }

  .product-configurator-section { padding-top: 32px; padding-bottom: 32px; }
}

@media screen and (max-width: 767px) {
  :root { --fs-h1: 2.25rem; --fs-h2: 1.5rem; }
  /* Override the ≤991 rule above (32px) — padding-top dropped on mobile
     so the carousel sits flush against the navbar. */
  .product-configurator-section { padding-top: 0; }
  .con-1280px { padding-left: 24px; padding-right: 24px; }
  h1 { margin-top: 0; --lh-h1: 1; line-height: 1; }
  h2 { --lh-h2: 1.15; line-height: 1.15; }
  h3 { margin-bottom: 8px; }
  p { text-align: left; }

  .block-container { max-width: none; }

  .button { font-size: 0.8rem; line-height: 1.2rem; }
  .button-highcontrast,
  .button-highcontrast-white { font-size: 0.8rem; line-height: 1.2rem; }

  .form-input-field-t0,
  .form-input-field-t1 { width: 100%; }
  .form-textarea { min-height: 150px; }

  .div-hero-mouse-scroll { display: none; }
  .hero-badge { height: 72px; bottom: 20px; left: 20px; }

  .popup-con-text {
    min-height: calc(var(--vh, 1vh) * 30);
    padding: 36px 30px 12px;
  }
  .popup-name-row { flex-direction: column; gap: 0; }
  .popup-fullscreen .layout-cell:first-child { display: none; }
  .popup-fullscreen .popup-div-desktop { grid-template-columns: 1fr; }

  .sec-footer { padding-top: 32px; padding-bottom: 16px; }
  /* Flatten the two footer columns so we can interleave items: logo →
     newsletter → socials → links → privacy → locale → address → copyright. */
  .div-footer { flex-direction: column; gap: 24px; }
  .div-footer > .flex-col { display: contents; }
  .cta-footer { padding-top: 0; }
  .footer-spacer { display: none; }
  .footer-logo { order: 1; }
  .footer-newsletter { order: 2; }
  .footer-social { order: 3; }
  .footer-links-main { order: 4; }
  .footer-links-privacy { order: 5; }
  .sec-footer .footer-locale-switcher { order: 6; }
  .footer-address { order: 7; }
  .footer-copyright { order: 8; }

  .t0 { font-size: 0.75rem; }
  .t00 { font-size: 0.75rem; }

  .div-100 { overflow: hidden; }
  .div-h-100 { flex-direction: row; }
  .div-h-rightjust { flex-direction: row; }
  .mobile-h { flex-direction: row; }
  .mobile-v { flex-flow: column; }
  .mobile-only { display: flex; }

  .grid-3col { grid-template-columns: 1fr; }

  .sec-margins-centred { padding: 24px; overflow: hidden; }
  .sec-120px-padding { padding-top: 80px; padding-bottom: 80px; }

  .logo-40px {
    width: 100px;
    height: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .cookie-banner-inner {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }
  .cookie-banner-actions { width: 100%; flex-direction: column; gap: 0.5rem; }
  .cookie-btn { width: 100%; text-align: center; }
  .cookie-prefs-modal {
    width: 96%;
    max-height: calc(var(--vh, 1vh) * 90);
  }
  .cookie-prefs-footer { flex-direction: column; }
  .cookie-prefs-footer .cookie-btn { width: 100%; text-align: center; }
}

@media screen and (max-width: 479px) {
  .form-input-field-t0,
  .form-input-field-t1 { padding-left: 0; padding-right: 0; }

  .link-margins.mobile-hidden { display: none; }
  .link-navbar { display: flex; }

  .phare-cart-drawer { max-width: 100%; }
}