/* ==========================================================================
   Enlighten Pro · Marketing v3 — Apple grammar
   --------------------------------------------------------------------------
   Apple's chassis: photography-first, UI recedes, edge-to-edge alternating
   tiles, single accent for "click me", one product-shadow, pill CTAs.
   Brand keepers: the LUMEN Spectrum (warm-white → cool-white → blue) is our
   signature ribbon under the hero. Action color is LUMEN amber (our "light
   on"), not Apple blue. SIGNAL blue stays reserved for inline data links.
   ========================================================================== */

/* ==========================================================================
   FONTS — self-hosted under unique family names ('EP Montserrat', 'EP JBM')
   so we bypass any corrupted system-installed Montserrat.
   The user's Mac has /Users/mustafasafri/Library/Fonts/Montserrat-Medium.ttf
   which renders capital E as an open-epsilon "Ɛ". By giving our self-hosted
   Google-Fonts WOFF2 a unique family name, the broken local font cannot win.
   No `local()` source is used — purely the bundled WOFF2 files.
   ========================================================================== */

@font-face {
  font-family: 'EP Montserrat';
  src: url('fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EP Montserrat';
  src: url('fonts/montserrat-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EP Montserrat';
  src: url('fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EP Montserrat';
  src: url('fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'EP JBM';
  src: url('fonts/jetbrainsmono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EP JBM';
  src: url('fonts/jetbrainsmono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EP JBM';
  src: url('fonts/jetbrainsmono-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* mono ramp */
  --ep-black:    #0A0B0D;
  --ep-ink:      #1D1D1F;          /* Apple near-black, not pure */
  --ep-graphite: #2A2D33;
  --ep-tile-1:   #1D1D1F;          /* primary dark tile */
  --ep-tile-2:   #2A2A2C;          /* lighter dark sibling */
  --ep-steel:    #4A4F57;
  --ep-slate:    #6B7079;
  --ep-mist:     #A3A8B0;
  --ep-fog:      #D4D7DC;
  --ep-haze:     #E8EAED;
  --ep-paper:    #F5F5F7;          /* Apple parchment */
  --ep-white:    #FFFFFF;

  /* lumen (action) */
  --ep-lumen-100:  #FFEBB8;
  --ep-lumen-300:  #FFD166;
  --ep-lumen-500:  #F5A524;
  --ep-lumen-600:  #D98A0B;
  --ep-lumen-700:  #A66807;

  /* signal (data) */
  --ep-signal-50:  #E6F0FA;
  --ep-signal-300: #6FA8DC;
  --ep-signal-500: #1E6FBA;
  --ep-signal-700: #0F4272;
  --ep-signal-link-dark: #2997FF;  /* sky link blue, on dark surfaces */

  /* spectrum — warm white → cool white → blue (the brand's lumen range) */
  --ep-cct-2200: #FFB76B;
  --ep-cct-2700: #FFCB8E;
  --ep-cct-3000: #FFD9A8;
  --ep-cct-4000: #F4F0E0;
  --ep-cct-5000: #E8EEF5;
  --ep-cct-6500: #DCE6F2;

  /* aliases */
  --ep-fg-1: var(--ep-ink);
  --ep-fg-2: rgba(0,0,0,.62);
  --ep-fg-3: rgba(0,0,0,.48);
  --ep-fg-4: rgba(0,0,0,.32);
  --ep-fg-inverse: var(--ep-white);
  --ep-bg-1: var(--ep-white);
  --ep-bg-2: var(--ep-paper);
  --ep-border-hair: rgba(0,0,0,.10);
  --ep-border-hair-2: rgba(0,0,0,.06);

  /* type */
  --ep-font-sf:      -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ep-font-display: 'EP Montserrat', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ep-font-mono:    'EP JBM', 'SF Mono', Menlo, monospace;

  /* the one shadow — for product renders only */
  --ep-product-shadow: 0 3px 5px rgba(0,0,0,.04), 0 5px 30px rgba(0,0,0,.22);

  /* glows on the action moment */
  --ep-glow-lumen: 0 0 24px rgba(245,165,36,.45), 0 0 48px rgba(245,165,36,.18);

  --ep-ease: cubic-bezier(.2,.7,.2,1);
}

/* ----------------------------- base ----------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Global horizontal-overflow safety net. `overflow-x: clip` (not hidden) keeps
   sticky positioning on .nav-utility-bar / .nav-global / .nav-sub working —
   `hidden` would create a new scrolling context and break sticky. */
html { overflow-x: clip; }
body { overflow-x: clip; }
/* Drawer-open state on mobile — prevent body scroll while menu is open. */
html.nav-locked, html.nav-locked body { overflow: hidden; }
body {
  font-family: var(--ep-font-sf);
  font-size: 17px; line-height: 1.47;
  letter-spacing: -0.022em;
  color: var(--ep-fg-1);
  background: var(--ep-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "kern";
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ----------------------------- nav ----------------------------- */

/* Top utility bar — thin, ~36px, holds Customer portal / Channel partner / Contact */
.nav-utility-bar {
  position: sticky; top: 0; z-index: 101;
  background: rgba(0,0,0,.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-utility-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; justify-content: flex-end; align-items: center; gap: 24px;
  height: 36px; padding: 0 28px;
  font-size: 12px; letter-spacing: -0.01em;
}
.nav-utility-inner a {
  color: rgba(255,255,255,.6);
  transition: color 200ms var(--ep-ease);
  white-space: nowrap;
}
.nav-utility-inner a:hover { color: rgba(255,255,255,.95); }

/* Primary nav — sits below the utility bar */
.nav-global {
  position: sticky; top: 36px; z-index: 100;
  background: rgba(0,0,0,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-global-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 28px;
  font-size: 13px; letter-spacing: -0.01em;
}
.nav-mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 13px;
  /* Real wordmark replaces the text + dot lockup. The PNG carries ~30% vertical
     transparent padding, so margin: -10px 0 absorbs it back into the 44px bar. */
}
.nav-mark img {
  display: block; height: 170px; width: auto; margin: -75px 0;
  /* The wordmark PNG is ~12% of its natural height — rest is transparent
     vertical padding (~44% top + 44% bottom). At height:170px the wordmark
     renders ~20px tall × ~267px wide (~22% of the 1180px bar) — refined,
     premium presence without overwhelming the rest of the nav. */
  /* Source PNG is solid black on transparent — forcing brightness(0) first
     guarantees pure black, then invert flips to pure white with crisp AA. */
  filter: brightness(0) invert(1);
}
.nav-links { display: flex; gap: 24px; }
.nav-links a { opacity: .82; font-weight: 400; }
.nav-links a:hover { opacity: 1; }
.nav-utility { display: flex; gap: 16px; align-items: center; opacity: .82; }
.nav-utility svg { width: 16px; height: 16px; }

/* sub-nav, frosted parchment — sticks under utility (36px) + primary (64px) = 100px */
.nav-sub {
  position: sticky; top: 100px; z-index: 99;
  /* 96% opaque (was 72% — content bled through it during scroll). Backdrop
     blur stays for the slight depth cue on browsers that support it. */
  background: rgba(245,245,247,.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ep-border-hair);
}
.nav-sub-inner {
  max-width: 1180px; margin: 0 auto;
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  font-size: 12px; letter-spacing: -0.01em;
}
.nav-sub-title {
  font-family: var(--ep-font-display);
  font-size: 21px; font-weight: 500;
  letter-spacing: -0.022em;
}
.nav-sub-mid { display: flex; gap: 22px; color: var(--ep-fg-2); }
.nav-sub-mid a:hover { color: var(--ep-fg-1); }

/* ----------------------------- tile ----------------------------- */
.tile {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 80px 22px 0;          /* product render tucks in below */
  overflow: hidden;
}
@media (max-width: 640px) {
  .tile { padding: 56px 18px 0; }
  .nav-sub-title { font-size: 17px; }
}
.tile.dark { background: var(--ep-tile-1); color: var(--ep-white); }
.tile.tile-2 { background: var(--ep-tile-2); }
.tile.parchment { background: var(--ep-paper); }
.tile.white { background: var(--ep-white); }

.tile-eyebrow {
  font-size: 14px; font-weight: 500; letter-spacing: -0.016em;
  color: var(--ep-lumen-500); margin: 0 0 6px;
}
.tile.dark .tile-eyebrow,
.tile.tile-2 .tile-eyebrow { color: var(--ep-lumen-300); }

.tile-h {
  font-family: var(--ep-font-display);
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 500;             /* Montserrat ships only Medium */
  line-height: 1.05;
  letter-spacing: -0.025em;     /* Montserrat tracks slightly wider than SF — pull in */
  margin: 0 0 8px;
  max-width: 22ch;
  /* Tonal-shift hierarchy: base copy reads in graphite, the emphasis word
     snaps to true ink. One weight, one face — emphasis from contrast, not
     from a glyph swap. The previous weight bump felt gimmicky; this is the
     classier move and matches how luxury editorial uses tone. */
  color: var(--ep-graphite);
}
.tile.dark .tile-h,
.tile.tile-2 .tile-h { color: rgba(255,255,255,.72); }

.tile-h em {
  font-style: normal;
  font-weight: 500;
  color: var(--ep-ink);
}
.tile.dark .tile-h em,
.tile.tile-2 .tile-h em { color: #FFFFFF; }

.tile-sub {
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 400;
  line-height: 1.21;
  letter-spacing: 0.004em;
  color: var(--ep-fg-2);
  max-width: 30ch;
  margin: 0 0 22px;
}
.tile.dark .tile-sub { color: rgba(255,255,255,.78); }

.tile-ctas { display: inline-flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }

/* product render zone (placeholder) */
.tile-render {
  margin-top: 0;
  width: 100%; max-width: 980px;
  height: clamp(280px, 38vw, 420px);
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
/* When a real product photo is dropped in, frame it as a "floating product card"
   so it never dominates the tile (especially ugly on dark tiles, where the
   image's own white background would create a giant white block).
   Fixed square-ish dimensions guarantee the frame never overflows the tile,
   and object-fit:contain letterboxes the portrait product photo inside. */
.tile-render > img, .tile-render > [data-ep-img] {
  display: block;
  width:  clamp(240px, 30vw, 400px);
  height: clamp(240px, 30vw, 400px);
  object-fit: contain;
  /* The frame — soft paper bg + hairline keeps the card visible
     on white tiles (BUIO) AND looks crisp on dark tiles (ANDA).
     IMPORTANT: use the `background-color` longhand (NOT the `background:`
     shorthand). Shorthand resets background-image / size / position / repeat,
     which were correctly set by the `.ep-protected-img` class — and were
     showing only the top-left corner of every product photo as a result. */
  background-color: var(--ep-paper, #F4F5F7);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 18px;
  padding: 22px;
  box-sizing: border-box;
  box-shadow: 0 28px 64px -18px rgba(0,0,0,.28);
  border: 1px solid rgba(0,0,0,.08);
}
/* On white-bg tiles, give a touch more shadow contrast so the card pops. */
.tile.white .tile-render > img,
.tile.parchment .tile-render > img,
.tile.white .tile-render > [data-ep-img],
.tile.parchment .tile-render > [data-ep-img] {
  box-shadow: 0 18px 48px -12px rgba(0,0,0,.18);
}

/* ----------------------------------------------------------------------
   KEN BURNS — slow zoom on hero product photos.
   ~6% scale over 40s, eased in/out, alternating direction so it never
   ratchets. Subtle enough to not read as "motion" — just keeps the page
   feeling alive. Only on .tile-render product images, NOT on cards or PDP.
   Honors prefers-reduced-motion. */
@keyframes ep-ken-burns {
  0%   { transform: scale(1.000); }
  50%  { transform: scale(1.060); }
  100% { transform: scale(1.000); }
}
.tile-render > [data-ep-img] {
  animation: ep-ken-burns 40s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
/* Stagger the start across tiles so they don't pulse in lockstep. */
.tile:nth-of-type(2n) .tile-render > [data-ep-img] { animation-delay: -13s; }
.tile:nth-of-type(3n) .tile-render > [data-ep-img] { animation-delay: -27s; }
@media (prefers-reduced-motion: reduce) {
  .tile-render > [data-ep-img] { animation: none; }
}
.beam {
  width: 60%; aspect-ratio: 1; border-radius: 999px;
  background: radial-gradient(circle at 50% 55%,
    rgba(255,228,170,.95) 0%,
    rgba(255,209,102,.7) 14%,
    rgba(245,165,36,.42) 30%,
    rgba(245,165,36,.12) 50%,
    transparent 68%);
  filter: blur(2px);
}
.tile.parchment .beam, .tile.white .beam {
  background: radial-gradient(circle at 50% 55%,
    rgba(245,165,36,.7) 0%,
    rgba(245,165,36,.35) 22%,
    rgba(245,165,36,.10) 45%,
    transparent 65%);
  filter: blur(1.5px);
}
/* product silhouette: a simple architectural fixture body */
.fixture {
  position: absolute; inset: auto 0 14% 0; margin: 0 auto;
  width: 64px; height: 100px;
  border-radius: 6px 6px 12px 12px;
  background: linear-gradient(180deg, #2a2a2c 0%, #131315 100%);
  box-shadow: var(--ep-product-shadow);
}
.tile.parchment .fixture, .tile.white .fixture {
  background: linear-gradient(180deg, #1d1d1f 0%, #0a0b0d 100%);
}

/* ----------------------------- pill CTA ----------------------------- */
.pill-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px;
  padding: 0 22px;
  border-radius: 980px;
  font-size: 17px; font-weight: 400; letter-spacing: -0.022em;
  border: 1px solid transparent;
  transition: transform 120ms var(--ep-ease), background 200ms var(--ep-ease), color 200ms var(--ep-ease), box-shadow 200ms var(--ep-ease);
  text-decoration: none;
}
.pill-cta:active { transform: scale(0.96); }
.pill-cta:focus-visible { outline: 2px solid var(--ep-signal-500); outline-offset: 2px; }

/* primary — lumen action */
.pill-primary { background: var(--ep-lumen-500); color: var(--ep-ink); }
.pill-primary:hover { background: var(--ep-lumen-600); box-shadow: var(--ep-glow-lumen); color: var(--ep-ink); }

/* secondary — ghost outlined in lumen */
.pill-secondary { background: transparent; color: var(--ep-lumen-700); border-color: var(--ep-lumen-600); }
.pill-secondary:hover { background: rgba(245,165,36,.08); }

/* on dark — sky variants */
.tile.dark .pill-secondary,
.tile.tile-2 .pill-secondary {
  color: var(--ep-lumen-300); border-color: var(--ep-lumen-300);
}
.tile.dark .pill-secondary:hover,
.tile.tile-2 .pill-secondary:hover {
  background: rgba(255,209,102,.12);
}

/* tertiary inline link */
.link-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 17px; font-weight: 400; letter-spacing: -0.022em;
  color: var(--ep-signal-500);
}
.link-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.tile.dark .link-cta, .tile.tile-2 .link-cta { color: var(--ep-signal-link-dark); }
.link-cta svg { width: 12px; height: 12px; transition: transform 200ms var(--ep-ease); }
.link-cta:hover svg { transform: translateX(2px); }

/* ----------------------------- spectrum ribbon ----------------------------- */
.spectrum-ribbon {
  background: var(--ep-paper);
  padding: 56px 22px;
}
.spectrum-inner {
  max-width: 980px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.spectrum-eyebrow {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ep-fg-3);
}
.spectrum-h {
  font-family: var(--ep-font-display);
  font-size: 32px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.16;
  text-align: center; margin: 0; max-width: 24ch;
}
.spectrum-h em { color: var(--ep-lumen-600); font-style: normal; }
.spectrum-bar {
  width: 100%; max-width: 720px; height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--ep-cct-2200) 0%,
    var(--ep-cct-2700) 18%,
    var(--ep-cct-3000) 32%,
    var(--ep-cct-4000) 52%,
    var(--ep-cct-5000) 70%,
    var(--ep-cct-6500) 84%,
    #B7CEE9 100%);
  border: 1px solid var(--ep-border-hair-2);
}
.spectrum-ticks {
  width: 100%; max-width: 720px;
  display: flex; justify-content: space-between;
  font-family: var(--ep-font-mono); font-size: 11px; color: var(--ep-fg-3);
  font-variant-numeric: tabular-nums;
}
.spectrum-tick { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.spectrum-tick b { color: var(--ep-fg-1); font-weight: 600; }
.spectrum-tick span { font-family: var(--ep-font-sf); font-size: 11px; letter-spacing: -0.01em; }

/* ----------------------------- utility grid ----------------------------- */
.section { padding: 80px 22px; }
.section.parchment { background: var(--ep-paper); }
.section-inner { max-width: 1024px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ep-fg-3); margin: 0 0 8px; }
.section-h {
  font-family: var(--ep-font-display);
  font-size: 44px; font-weight: 500;
  line-height: 1.08; letter-spacing: -0.025em;
  margin: 0 0 10px;
}
.section-sub { font-size: 21px; color: var(--ep-fg-2); margin: 0 auto; max-width: 36ch; line-height: 1.33; letter-spacing: 0.011em; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 833px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* utility card */
.card {
  background: var(--ep-white);
  border: 1px solid var(--ep-border-hair);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 200ms var(--ep-ease), box-shadow 200ms var(--ep-ease);
}
.card:hover { transform: translateY(-2px); }
.card-media {
  aspect-ratio: 1; position: relative;
  background: linear-gradient(180deg, #1d1d1f 0%, #0a0b0d 100%);
  display: grid; place-items: center; overflow: hidden;
}
.card-media .beam { width: 70%; }
.card-media .fixture { width: 48px; height: 76px; bottom: 18%; }
/* Real product photos inside card-media — fit the square, padded for breathing room. */
.card-media > a > img,
.card-media > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 14px;
  box-sizing: border-box;
}
.card-body { padding: 22px 22px 24px; }
.card-name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 4px;
}
.card-name b { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; }
.card-sku { font-family: var(--ep-font-mono); font-size: 11px; color: var(--ep-fg-3); letter-spacing: 0.04em; }
.card-tag { font-size: 14px; color: var(--ep-fg-2); margin: 0 0 14px; line-height: 1.43; letter-spacing: -0.016em; }
.card-cct {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--ep-border-hair);
  font-family: var(--ep-font-mono); font-size: 11px; color: var(--ep-fg-2);
  font-variant-numeric: tabular-nums;
}
.card-cct .dots { display: inline-flex; gap: 2px; }
.card-cct .dot { width: 8px; height: 8px; border-radius: 999px; }
.card-link { margin-top: 14px; display: block; font-size: 14px; color: var(--ep-signal-500); }
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.card-specs {
  display: flex; gap: 0;
  padding-top: 14px; margin-top: 14px;
  border-top: 1px solid var(--ep-border-hair-2);
}
.card-spec { flex: 1; }
.card-spec-v { font-family: var(--ep-font-mono); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: var(--ep-fg-1); font-variant-numeric: tabular-nums; }
.card-spec-k { font-size: 11px; color: var(--ep-fg-3); margin-top: 4px; letter-spacing: -0.01em; }

/* family tile (small) */
.family {
  background: var(--ep-white);
  border: 1px solid var(--ep-border-hair);
  border-radius: 18px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform 200ms var(--ep-ease);
}
.family:hover { transform: translateY(-2px); }
.family-name { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; }
.family-kind { font-size: 14px; color: var(--ep-fg-2); letter-spacing: -0.016em; }
.family-foot { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
.family-count { font-family: var(--ep-font-mono); font-size: 24px; font-weight: 600; line-height: 1; color: var(--ep-fg-1); }
.family-count-k { font-size: 12px; color: var(--ep-fg-3); letter-spacing: -0.01em; }

/* Umbrella family tile — visually marked as a hub (clicking shows sub-cat tiles, not products).
   Subtle lumen-tinted left border so it reads as "category of categories" without being loud. */
.family.is-umbrella {
  border-color: rgba(245, 165, 36, 0.45);
  background: linear-gradient(180deg, #FFFEFA 0%, #FFFFFF 100%);
}
.family.is-umbrella .family-name::after {
  content: " ›";
  color: var(--ep-lumen-600);
  font-weight: 700;
}
.family.is-umbrella .family-kind { color: var(--ep-lumen-700); font-weight: 500; }

/* stat */
.stat {
  text-align: center; padding: 24px 12px;
  border-right: 1px solid var(--ep-border-hair-2);
}
.stat:last-child { border-right: 0; }
.stat-v {
  font-family: var(--ep-font-display);
  font-size: clamp(40px, 4.6vw, 56px); font-weight: 500;
  line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-v sub { font-size: 18px; font-weight: 400; color: var(--ep-fg-3); letter-spacing: -0.01em; vertical-align: baseline; margin-left: 4px; bottom: 0; }
.stat-k { font-size: 14px; color: var(--ep-fg-3); margin-top: 6px; letter-spacing: -0.016em; }
@media (max-width: 833px) {
  .stat { border-right: 0; border-bottom: 1px solid var(--ep-border-hair-2); }
  .stat:last-child { border-bottom: 0; }
}

/* quote */
.quote {
  max-width: 820px; margin: 0 auto;
  text-align: center;
}
.quote p {
  font-family: var(--ep-font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500; line-height: 1.18; letter-spacing: -0.025em;
  margin: 0 0 28px;
}
.quote-by { display: inline-flex; align-items: center; gap: 12px; }
.quote-by .quote-avatar {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--ep-ink); color: var(--ep-white);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.quote-by b { font-size: 14px; font-weight: 600; letter-spacing: -0.016em; display: block; }
.quote-by > span:not(.quote-avatar) { font-size: 13px; color: var(--ep-fg-3); letter-spacing: -0.01em; }

/* footer */
.footer {
  background: var(--ep-paper);
  padding: 48px 22px 28px;
  font-size: 12px; color: var(--ep-fg-3);
  letter-spacing: -0.012em;
}
.footer-inner { max-width: 1024px; margin: 0 auto; }
.footer-cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  padding-bottom: 28px; border-bottom: 1px solid var(--ep-border-hair-2);
}
.footer-col h4 { font-size: 12px; font-weight: 600; color: var(--ep-fg-1); margin: 0 0 12px; letter-spacing: -0.012em; }
.footer-col a { display: block; line-height: 2.2; color: var(--ep-fg-2); }
.footer-col a:hover { color: var(--ep-fg-1); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; flex-wrap: wrap; gap: 12px; }
@media (max-width: 833px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   MOBILE NAV — hamburger button + slide-in drawer (≤833px)
   The desktop nav-links + inline search disappear; the burger reveals a
   full-height drawer containing the same links + (reparented) search input.
   ========================================================================== */

/* Hamburger button — 3 stacked bars, hidden on desktop */
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  background: transparent; border: 0; padding: 0;
  flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
  border-radius: 999px;
  transition: background 200ms var(--ep-ease);
}
.nav-burger:hover { background: rgba(255,255,255,.08); }
.nav-burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: rgba(255,255,255,.92);
  border-radius: 1px;
  transition: transform 200ms var(--ep-ease), opacity 200ms var(--ep-ease);
}
.nav-burger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.active span:nth-child(2) { opacity: 0; }
.nav-burger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Drawer + scrim — hidden by default; shown by JS on burger tap */
.nav-drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity 200ms var(--ep-ease);
  z-index: 199;
}
.nav-drawer-scrim.show { opacity: 1; }

.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: rgba(20,20,22,.98);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  color: rgba(255,255,255,.92);
  z-index: 200;
  display: flex; flex-direction: column;
  padding: 22px;
  transform: translateX(100%);
  transition: transform 280ms var(--ep-ease);
  border-left: 1px solid rgba(255,255,255,.06);
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 18px;
}
.nav-drawer-title {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.nav-drawer-close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: rgba(255,255,255,.85);
}
.nav-drawer-close svg { width: 14px; height: 14px; }

.nav-drawer-search { margin-bottom: 18px; }
.nav-drawer-search .ep-search-field { width: 100%; }
.nav-drawer-search .ep-search-panel { width: 100%; right: 0; }

.nav-drawer-links { display: flex; flex-direction: column; }
.nav-drawer-links a {
  font-family: var(--ep-font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.022em;
  padding: 14px 0;
  color: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-drawer-links a:hover { color: var(--ep-lumen-500); }

.nav-drawer-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 10px;
}
.nav-drawer-foot a {
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.nav-drawer-foot a:hover { color: rgba(255,255,255,.95); }

@media (max-width: 833px) {
  /* hide desktop nav row contents; show hamburger */
  .nav-links,
  .nav-utility { display: none !important; }
  .nav-burger { display: inline-flex !important; }

  /* tighten the bars on mobile */
  .nav-utility-bar { display: none; }   /* utility links live in drawer foot */
  .nav-global { top: 0; }
  .nav-global-inner {
    height: 56px;
    padding: 0 16px;
  }
  /* shrink the wordmark — at 56px bar, 110px tall PNG with -45px margins
     yields ~13px visual which is the right scale for a mobile chrome */
  .nav-mark img { height: 110px; margin: -45px 0; }
  /* sub-nav tucked directly under primary (no utility bar above) */
  .nav-sub { top: 56px; }
  .nav-sub-inner { height: 48px; padding: 0 16px; }
  .nav-sub-mid { display: none; }       /* the in-page section links */
}


/* ==========================================================================
   SEARCH (in global nav)
   ========================================================================== */

.ep-search { position: relative; }

/* Always-visible pill input, sits inline in the dark nav */
.ep-search-field {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  transition: background 200ms var(--ep-ease), border-color 200ms var(--ep-ease);
  min-width: 240px;
}
.ep-search-field:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
.ep-search-field:focus-within { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.ep-search-icon { width: 14px; height: 14px; color: rgba(255,255,255,.65); flex-shrink: 0; }

.ep-search-field input[type="search"] {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: #fff;
  font-family: var(--ep-font-sf);
  font-size: 13px; letter-spacing: -0.01em;
  padding: 0;
}
.ep-search-field input[type="search"]::placeholder { color: rgba(255,255,255,.5); }
.ep-search-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Results panel — only visible while typing, anchored under the input */
.ep-search-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 420px;
  background: rgba(20,20,22,.96);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ep-ease), transform 180ms var(--ep-ease), visibility 180ms;
  z-index: 1000;
  box-shadow: 0 12px 48px rgba(0,0,0,.4);
}
.ep-search-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 833px) {
  .ep-search-field { min-width: 0; width: 100%; }
  .ep-search-panel { width: calc(100vw - 44px); right: -8px; }
}

.ep-search-results {
  max-height: 480px; overflow-y: auto;
}

.ep-search-result {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  text-decoration: none;
  color: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background 120ms var(--ep-ease);
}
.ep-search-result:hover { background: rgba(255,255,255,.06); }
.ep-search-thumb {
  width: 44px; height: 44px;
  background: #fff; border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0; overflow: hidden;
}
.ep-search-thumb img,
.ep-search-thumb [data-ep-img] { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.ep-search-meta { min-width: 0; flex: 1; }
.ep-search-name {
  font-size: 14px; font-weight: 600; letter-spacing: -0.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-search-sub {
  font-family: var(--ep-font-mono); font-size: 11px;
  color: rgba(255,255,255,.5);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-search-empty {
  padding: 18px 20px;
  font-size: 13px; color: rgba(255,255,255,.5);
}
.ep-search-allresults {
  display: block; padding: 12px 20px;
  font-size: 12px; color: var(--ep-lumen-300);
  text-decoration: none;
  letter-spacing: -0.012em;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.ep-search-allresults:hover { color: var(--ep-lumen-100); background: rgba(255,255,255,.06); }

/* Section labels split categories from products in the dropdown. */
.ep-search-section-label {
  padding: 10px 20px 6px;
  font-family: var(--ep-font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  border-top: 1px solid rgba(255,255,255,.04);
}
.ep-search-results .ep-search-section-label:first-child { border-top: 0; }
/* Folder-icon thumb for category rows — distinct from product thumb (white). */
.ep-search-thumb-cat {
  background: rgba(245,165,36,.10);
  color: var(--ep-lumen-300);
  border: 1px solid rgba(245,165,36,.22);
}
.ep-search-thumb-cat svg { width: 20px; height: 20px; }

/* ==========================================================================
   PRODUCT DESCRIPTION — re-style any tables that come from the WC description
   so they match the EP spec table grammar (ink header, hairline rows, tabular
   numerals, wide enough columns to NOT wrap LED/Driver paragraphs).
   ========================================================================== */

.desc-body table {
  width: 100% !important;
  border-collapse: collapse;
  margin: 0 0 28px;
  background: var(--ep-white);
  border: 1px solid var(--ep-border-hair);
  border-radius: 14px;
  overflow: hidden;
  table-layout: auto;
}
.desc-body table th {
  background: var(--ep-ink); color: var(--ep-white);
  text-align: left;
  padding: 14px 18px;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-bottom: 1px solid var(--ep-graphite);
  white-space: nowrap;
}
.desc-body table th strong { font-weight: 600; }
.desc-body table td {
  padding: 14px 18px;
  font-size: 14px; line-height: 1.55;
  border-bottom: 1px solid var(--ep-border-hair-2);
  color: var(--ep-fg-1);
  vertical-align: top;
}
.desc-body table tr:last-child td { border-bottom: none; }
.desc-body table tr:nth-child(even) td { background: var(--ep-paper); }
/* Numeric / size cells render in mono with tabular nums */
.desc-body table tbody tr td:not(:first-child) {
  font-family: var(--ep-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ep-fg-1);
}
/* Tables WITHOUT a thead (the LED/Driver/Optional… style) — first column is the LABEL */
.desc-body table:not(:has(thead)) td:first-child {
  font-family: var(--ep-font-sf);
  font-weight: 600;
  color: var(--ep-fg-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  width: 30%;
  white-space: nowrap;
}
.desc-body table:not(:has(thead)) td:not(:first-child) {
  font-family: var(--ep-font-sf);
  font-size: 14px;
  font-weight: 400;
  color: var(--ep-fg-1);
  letter-spacing: -0.012em;
}
/* Override the scoped width/height attributes inline on the WC tables */
.desc-body table[width],
.desc-body table[style*="height"],
.desc-body table[style*="width"] {
  width: 100% !important; height: auto !important;
}
.desc-body img {
  max-width: 100%; height: auto; border-radius: 10px;
  margin: 8px 0;
}

/* Strip empty paragraphs that WC peppers between blocks */
.desc-body p:empty { display: none; }


/* ==========================================================================
   IMAGE PROTECTION
   Renders product photos via background-image so "Save image as…" doesn't
   appear in the right-click menu. The studio's watermark is the real
   protection; this is friction for casual users.
   ========================================================================== */

.ep-protected-img {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.ep-img-toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translate(-50%, 12px);
  padding: 9px 16px;
  background: var(--ep-ink);
  color: var(--ep-white);
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid rgba(0,0,0,.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 9999;
}
.ep-img-toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ==========================================================================
   CERTIFICATIONS STRIP (per EP brand-certifications.html reference)
   ========================================================================== */

.ep-cert-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 12px;
  row-gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--ep-border-hair);
  border-radius: 14px;
  background: var(--ep-paper);
  flex-wrap: wrap;
  max-width: 1024px;
  margin: 0 auto;
}
/* When cells wrap, the per-row dividers don't make visual sense — soften them */
.ep-cert-strip .ep-cert { border-right-color: rgba(0,0,0,.08); }
.ep-cert {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0 22px;
  height: 56px;
  border-right: 1px solid var(--ep-border-hair-2);
}
.ep-cert:first-child { padding-left: 4px; }
.ep-cert:last-child  { padding-right: 4px; border-right: none; }
.ep-cert-mark {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ep-white);
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  color: var(--ep-ink);
  flex-shrink: 0;
}
.ep-cert-mark--rect { border-radius: 8px; }
.ep-cert-mark--filled { background: var(--ep-ink); color: var(--ep-white); border-color: transparent; }
.ep-cert-mark--green { background: #1F8A4C; color: var(--ep-white); border-color: transparent; }
.ep-cert-mark svg { display: block; width: 100%; height: 100%; }
.ep-cert-label { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.ep-cert-label .k { font-weight: 600; font-size: 13px; color: var(--ep-fg-1); letter-spacing: -0.012em; }
.ep-cert-label .v { font-weight: 400; font-size: 11px; color: var(--ep-fg-3); letter-spacing: -0.008em; }


/* ==========================================================================
   ICON-BASED PRODUCT CARD SPEC STRIP (for catalogue cards)
   Per EP component-product-card.html reference — 5 equal cells with icons.
   ========================================================================== */

.card-icon-specs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--ep-border-hair);
  border-radius: 4px;
  margin-top: 12px;
}
.card-icon-spec {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 4px;
  gap: 5px;
  border-right: 1px solid var(--ep-border-hair);
  height: 56px; box-sizing: border-box;
}
.card-icon-spec:last-child { border-right: none; }
.card-icon-spec svg { color: var(--ep-fg-2); display: block; width: 16px; height: 16px; }
.card-icon-spec-v {
  font-family: var(--ep-font-mono);
  font-weight: 600; font-size: 11px;
  color: var(--ep-fg-1);
  font-feature-settings: "tnum" 1;
  line-height: 1; letter-spacing: 0;
}

/* Cert chips (small, bottom of cards) */
.card-cert-chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--ep-border-hair);
  background: var(--ep-white);
  font-size: 10px; font-weight: 600; color: var(--ep-fg-2);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ==========================================================================
   BRAND TICKER (the "Trusted by leading brands" marquee)
   ========================================================================== */

.brand-ticker {
  background: var(--ep-white);
  padding: 80px 0 88px;
  border-top: 1px solid var(--ep-border-hair-2);
  border-bottom: 1px solid var(--ep-border-hair-2);
  overflow: hidden;
}
.brand-ticker-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 0 22px;
}
.brand-ticker-h {
  font-family: var(--ep-font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 8px 0 0;
}

.brand-marquee {
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* Each row is its own overflow-clipped lane so the 3 tracks scroll independently. */
.brand-marquee-row {
  display: block;
  width: 100%;
  overflow: hidden;
}
.brand-marquee-row + .brand-marquee-row { margin-top: 32px; }

.brand-marquee-track {
  display: inline-flex;
  gap: 72px;
  align-items: center;
  white-space: nowrap;
  animation: marquee 55s linear infinite;
  padding-right: 56px;
  will-change: transform;
}
/* Reverse direction for the middle row — premium ticker pattern. */
.brand-marquee-track--rev { animation: marqueeRev 65s linear infinite; }
/* Animation stays paused until JS marks the track ready (i.e. after the
   row content has been fetched, populated, and padded so the loop is seamless).
   Without this, the animation kicks off against an empty track at page-load,
   then "looks static" once content lands mid-cycle. */
.brand-marquee-track { animation-play-state: paused; }
.brand-marquee-track.is-ready { animation-play-state: running; }
/* Slight per-row speed variation breaks the robotic-grid feel. */
.brand-marquee-row:nth-child(1) .brand-marquee-track { animation-duration: 58s; }
.brand-marquee-row:nth-child(3) .brand-marquee-track { animation-duration: 50s; }

.brand-marquee-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 6px;
}
/* Uniform-height sizing — every logo renders at the same vertical height
   regardless of original aspect ratio. Width is uncapped so wide wordmarks
   keep their proportion. Without this, max-height=40 + max-width=150 makes
   tall narrow logos render half the visual size of wide flat ones. */
.brand-marquee-item img {
  display: block;
  height: 32px;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1) opacity(.55);
  transition: filter 220ms var(--ep-ease);
}
.brand-marquee-item:hover img { filter: grayscale(0) opacity(1); }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marqueeRev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* On dark surfaces — invert + raise opacity so logos read on black */
.tile.dark .brand-marquee-item img,
.brand-ticker.dark .brand-marquee-item img {
  filter: grayscale(1) brightness(8) opacity(.55);
}
.tile.dark .brand-marquee-item:hover img,
.brand-ticker.dark .brand-marquee-item:hover img {
  filter: grayscale(1) brightness(8) opacity(1);
}

/* Stat token (used on About page) */
.stat-v sub { font-size: 18px; font-weight: 400; color: var(--ep-fg-3); letter-spacing: -0.01em; vertical-align: baseline; margin-left: 4px; bottom: 0; }

/* ==========================================================================
   PRINT STYLESHEET — used by the "Download datasheet" button on product pages.
   window.print() opens the browser's print dialog where users save as PDF.
   We hide everything that's marketing chrome and keep just the product specs.
   ========================================================================== */
@media print {
  @page { size: A4; margin: 18mm 16mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-family: var(--ep-font-sf), Helvetica, sans-serif;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
  }

  /* Strip site chrome — nav, footer, CTAs, marketing sections */
  .nav-utility-bar,
  .nav-global,
  .nav-sub,
  .footer,
  .pdp-ctas,
  .related-section,
  .ep-cert-strip,           /* certifications strip is rendered separately on print */
  .opt-group,
  #relatedGrid,
  [class*="brand-ticker"],
  [class*="brand-marquee"] { display: none !important; }

  /* Datasheet header — printed at the top of every page */
  body::before {
    content: "ENLIGHTEN PRO  ·  Architectural LED  ·  www.enlighten.biz";
    display: block;
    font-family: var(--ep-font-display);
    font-size: 10pt; font-weight: 600;
    letter-spacing: 0.18em;
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 6mm; margin-bottom: 8mm;
  }

  /* Tighten the product overview block for print */
  .pdp {
    display: grid !important;
    grid-template-columns: 38% 1fr !important;
    gap: 12mm !important;
    padding: 0 !important;
    page-break-inside: avoid;
  }
  .pdp-media {
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4mm !important;
    aspect-ratio: 1 !important;
  }
  .pdp-media img.main { padding: 6mm !important; }
  .pdp-thumbs { display: none !important; }
  .pdp-name {
    font-size: 22pt !important;
    color: #000 !important;
    margin-bottom: 2mm !important;
  }
  .pdp-eyebrow { font-size: 9pt !important; color: #555 !important; }
  .pdp-sku { font-size: 9pt !important; }
  .pdp-tag { font-size: 11pt !important; color: #333 !important; }
  .pdp-cats { display: none !important; }
  .pdp-meta { font-size: 9pt !important; color: #555 !important; }
  .pdp-meta-item b { color: #000 !important; }

  /* Description block */
  .desc-section {
    background: #fff !important;
    padding: 8mm 0 !important;
    page-break-before: auto;
    page-break-inside: avoid;
  }
  .desc-inner h2 {
    font-size: 14pt !important;
    margin-bottom: 4mm !important;
  }
  .desc-body { font-size: 10pt !important; color: #333 !important; }

  /* Spec table — the meat of the datasheet */
  .spec-section {
    background: #fff !important;
    padding: 4mm 0 !important;
    page-break-inside: auto;
  }
  .spec {
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    page-break-inside: auto;
  }
  .spec-row-head {
    background: #000 !important;
    color: #fff !important;
    padding: 3mm 6mm !important;
    font-size: 9pt !important;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
  }
  .spec table { font-size: 10pt !important; }
  .spec td { padding: 2.5mm 6mm !important; }
  .spec tr:nth-child(even) { background: #f7f7f7 !important; }

  /* Page break footer — printed only on the last page */
  body::after {
    content: "Specifications subject to change · Contact +91 93723 99052 · sales@enlighten.biz";
    display: block;
    font-size: 8pt; color: #666;
    border-top: 1px solid #ccc;
    margin-top: 8mm; padding-top: 4mm;
  }

  /* Avoid orphan section headers */
  h1, h2, h3 { page-break-after: avoid; }
  .desc-section, .spec-section { page-break-inside: avoid; }
}