/* ==================================================================
   WATTMARE PREMIUM FOUNDATION v1.2 — Apple-style animations
   Black + white + grey + Roboto only. No accent colors.
   Page-scoped via body.wm-premium-on
   ================================================================== */

:root {
  --wmp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wmp-ink:  #0a0a0a;
  --wmp-text: #111;
  --wmp-meta: #555;
  --wmp-muted: #888;
  --wmp-line: #ebebeb;
  --wmp-surface: #fafafa;
  --wmp-card: #f5f5f5;
  --wmp-wa: #25D366;
}

/* ==================================================================
   TYPOGRAPHY + LAYOUT HELPERS
   Roboto-based, black/white/grey — matches existing Wattmare site
   ================================================================== */
body.wm-premium-on .wmp-page,
body.wm-premium-on .wmp-page * {
  box-sizing: border-box;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.wm-premium-on .wmp-page {
  background: #fff;
  color: var(--wmp-text);
  margin: 0;
  padding: 0;
}

body.wm-premium-on .wmp-page a { color: inherit; text-decoration: none; }
body.wm-premium-on .wmp-page img { max-width: 100%; height: auto; display: block; }

/* Section + container */
body.wm-premium-on .wmp-sec {
  padding: 100px 5%;
  max-width: 1280px;
  margin: 0 auto;
}
body.wm-premium-on .wmp-sec--narrow {
  padding-top: 80px;
  padding-bottom: 80px;
}
body.wm-premium-on .wmp-sec--full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body.wm-premium-on .wmp-bg-light  { background: #fff; }
body.wm-premium-on .wmp-bg-fade   { background: var(--wmp-surface); }
body.wm-premium-on .wmp-bg-card   { background: var(--wmp-card); }
body.wm-premium-on .wmp-bg-dark   { background: var(--wmp-ink); color: #fff; }

@media (max-width: 768px) {
  body.wm-premium-on .wmp-sec { padding: 60px 5%; }
}

/* Typography */
body.wm-premium-on .wmp-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--wmp-muted);
  margin: 0 0 14px;
  font-family: 'Roboto', sans-serif;
}
body.wm-premium-on .wmp-bg-dark .wmp-eyebrow { color: rgba(255,255,255,.55); }

body.wm-premium-on .wmp-h1 {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--wmp-text);
  margin: 0 0 24px;
}
body.wm-premium-on .wmp-bg-dark .wmp-h1 { color: #fff; }

body.wm-premium-on .wmp-h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--wmp-text);
  margin: 0 0 18px;
}
body.wm-premium-on .wmp-bg-dark .wmp-h2 { color: #fff; }

body.wm-premium-on .wmp-h3 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--wmp-text);
  margin: 0 0 14px;
}
body.wm-premium-on .wmp-bg-dark .wmp-h3 { color: #fff; }

body.wm-premium-on .wmp-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--wmp-meta);
  max-width: 720px;
  margin: 0 0 36px;
  font-weight: 400;
}
body.wm-premium-on .wmp-bg-dark .wmp-lead { color: rgba(255,255,255,.7); }

body.wm-premium-on .wmp-body {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--wmp-meta);
  margin: 0 0 14px;
}
body.wm-premium-on .wmp-bg-dark .wmp-body { color: rgba(255,255,255,.7); }

body.wm-premium-on .wmp-mono {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wmp-muted);
}
body.wm-premium-on .wmp-bg-dark .wmp-mono { color: rgba(255,255,255,.55); }

body.wm-premium-on .wmp-spec {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wmp-muted);
  margin-bottom: 18px;
}
body.wm-premium-on .wmp-bg-dark .wmp-spec { color: rgba(255,255,255,.55); }

/* Buttons */
body.wm-premium-on .wmp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.94rem;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 240ms var(--wmp-ease), background 240ms var(--wmp-ease);
  cursor: pointer;
  border: 0;
  line-height: 1;
  font-family: 'Roboto', sans-serif;
}
body.wm-premium-on .wmp-btn--wa {
  background: var(--wmp-wa);
  color: #fff;
}
body.wm-premium-on .wmp-btn--wa:hover { background: #1ebe5d; transform: translateY(-2px); }

body.wm-premium-on .wmp-btn--dark {
  background: var(--wmp-text);
  color: #fff;
}
body.wm-premium-on .wmp-btn--dark:hover { background: #333; transform: translateY(-2px); }

body.wm-premium-on .wmp-btn--ghost {
  background: transparent;
  color: var(--wmp-text);
  border: 1px solid var(--wmp-text);
}
body.wm-premium-on .wmp-bg-dark .wmp-btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }

body.wm-premium-on .wmp-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Lenis smooth scroll setup ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html.lenis { scroll-behavior: auto !important; }
}

/* ==================================================================
   ANIMATION #1 — SCROLL-DRIVEN SCALE (existing)
   ================================================================== */
body.wm-premium-on .wm-anim-scale       { transform: scale(0.88); transform-origin: center; will-change: transform; display: block; }
body.wm-premium-on .wm-anim-scale-grow  { transform: scale(0.6);  transform-origin: center; will-change: transform; display: block; }
body.wm-premium-on .wm-anim-scale img,
body.wm-premium-on .wm-anim-scale-grow img { width: 100%; height: auto; display: block; }

/* ==================================================================
   ANIMATION #2 — HORIZONTAL PIN (existing)
   ================================================================== */
body.wm-premium-on .wm-anim-pin-h {
  position: relative; overflow: hidden;
  height: 100vh; min-height: 540px; width: 100%;
}
body.wm-premium-on .wm-anim-pin-h__track {
  display: flex; flex-wrap: nowrap; height: 100%;
  will-change: transform; align-items: stretch;
}
body.wm-premium-on .wm-anim-pin-h__panel {
  flex: 0 0 auto; height: 100%; width: clamp(320px, 70vw, 800px);
  display: flex; align-items: center; justify-content: center;
  padding: 60px 40px;
}
@media (max-width: 900px) {
  body.wm-premium-on .wm-anim-pin-h { height: auto; min-height: 0; }
  body.wm-premium-on .wm-anim-pin-h__track { flex-direction: column; transform: none !important; height: auto; }
  body.wm-premium-on .wm-anim-pin-h__panel { width: 100%; height: auto; padding: 40px 20px; }
}

/* ==================================================================
   ANIMATION #3 — FADE-UP (one-shot on entry)
   ================================================================== */
body.wm-premium-on .wm-anim-fade-up { opacity: 0; transform: translateY(30px); }

/* ==================================================================
   ANIMATION #4 — STAT COUNTER (count up from 0)
   ================================================================== */
body.wm-premium-on .wm-anim-count {
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   ANIMATION #5 — STICKY SHOWCASE (left media pinned + right scrolls)
   Markup:
     <section class="wm-anim-showcase">
       <div class="wm-anim-showcase__grid">
         <div class="wm-anim-showcase__media">
           <img src="..." />          <!-- swaps as each article scrolls into view -->
         </div>
         <div class="wm-anim-showcase__content">
           <article data-image="..."> ... </article>
           <article data-image="..."> ... </article>
         </div>
       </div>
     </section>
   ================================================================== */
body.wm-premium-on .wm-anim-showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
}
body.wm-premium-on .wm-anim-showcase__media {
  position: sticky;
  top: 96px;
  aspect-ratio: 1 / 1;
  background: var(--wmp-card);
  border-radius: 20px;
  overflow: hidden;
}
body.wm-premium-on .wm-anim-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 400ms var(--wmp-ease);
  display: block;
}
body.wm-premium-on .wm-anim-showcase__content > article {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0;
  opacity: 0.3;
  transition: opacity 500ms var(--wmp-ease);
}
body.wm-premium-on .wm-anim-showcase__content > article.is-active { opacity: 1; }

@media (max-width: 900px) {
  body.wm-premium-on .wm-anim-showcase__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 20px;
  }
  body.wm-premium-on .wm-anim-showcase__media {
    position: relative;
    top: 0;
    aspect-ratio: 4/3;
  }
  body.wm-premium-on .wm-anim-showcase__content > article {
    min-height: auto;
    padding: 24px 0;
    opacity: 1;
  }
}

/* ==================================================================
   ANIMATION #6 — SECTION STACKING (sticky cards stack on each other)
   Markup:
     <div class="wm-anim-stack">
       <div class="wm-anim-stack__card">...</div>
       <div class="wm-anim-stack__card">...</div>
       <div class="wm-anim-stack__card">...</div>
     </div>
   Each card sticks at progressively lower top offsets so they pile up.
   ================================================================== */
body.wm-premium-on .wm-anim-stack {
  display: flex;
  flex-direction: column;
}
body.wm-premium-on .wm-anim-stack__card {
  position: sticky;
  background: var(--wmp-card);
  border-radius: 20px;
  padding: 56px 64px;
  margin-bottom: 16px;
  min-height: 360px;
  transition: box-shadow 0.3s var(--wmp-ease);
}
body.wm-premium-on .wm-anim-stack__card:nth-child(1)  { top: 88px;  z-index: 1; }
body.wm-premium-on .wm-anim-stack__card:nth-child(2)  { top: 96px;  z-index: 2; }
body.wm-premium-on .wm-anim-stack__card:nth-child(3)  { top: 104px; z-index: 3; }
body.wm-premium-on .wm-anim-stack__card:nth-child(4)  { top: 112px; z-index: 4; }
body.wm-premium-on .wm-anim-stack__card:nth-child(5)  { top: 120px; z-index: 5; }
body.wm-premium-on .wm-anim-stack__card:nth-child(6)  { top: 128px; z-index: 6; }
body.wm-premium-on .wm-anim-stack__card:nth-child(7)  { top: 136px; z-index: 7; }
body.wm-premium-on .wm-anim-stack__card:nth-child(8)  { top: 144px; z-index: 8; }
body.wm-premium-on .wm-anim-stack__card:nth-child(9)  { top: 152px; z-index: 9; }
body.wm-premium-on .wm-anim-stack__card:nth-child(10) { top: 160px; z-index: 10; }

@media (max-width: 768px) {
  body.wm-premium-on .wm-anim-stack__card {
    position: relative;
    top: 0 !important;
    padding: 32px 24px;
    min-height: 0;
  }
}

/* ==================================================================
   REDUCED MOTION
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.wm-premium-on .wm-anim-scale,
  body.wm-premium-on .wm-anim-scale-grow,
  body.wm-premium-on .wm-anim-fade-up {
    transform: none !important;
    opacity: 1 !important;
  }
  body.wm-premium-on .wm-anim-pin-h__track { transform: none !important; }
  body.wm-premium-on .wm-anim-showcase__content > article { opacity: 1 !important; }
}

/* ============================================================
   2026-06-07 — MOBILE HORIZONTAL-OVERFLOW FIX
   Brand-showcase grid items default to min-width:auto, so a wide
   source photo's intrinsic width forces the 1fr track (and the
   whole page) wider than the phone screen. min-width:0 lets the
   track shrink; the img (width:100%) then scales to fit.
   Hit on fwg(Aqua-Chem)/aircomp(Bauer)/refrig(Dorin) — wide photos.
   ============================================================ */
body.wm-premium-on .wm-bz-media,
body.wm-premium-on .wm-bz-text { min-width: 0; }
body.wm-premium-on .wm-bz-media img { max-width: 100%; }

/* 2026-06-07 mobile fix #2: brand spec tables must not exceed the screen.
   A table's intrinsic min-width = sum of column min-content, which ignores
   width:100%. table-layout:fixed pins it to 100% and wraps cell text instead.
   Hit on fwg/aircomp/refrig (longer Type/Duty descriptions). */
@media (max-width:600px){
  body.wm-premium-on .wm-bz-spec{table-layout:fixed;width:100%}
  body.wm-premium-on .wm-bz-spec th,
  body.wm-premium-on .wm-bz-spec td{overflow-wrap:anywhere;word-break:break-word}
}

/* 2026-06-08 — Salim: full-colour photos everywhere, NO grayscale */
body.wm-premium-on .wm-bz-media img,
body.wm-premium-on .wm-gal-grid img,
body.wm-premium-on .wm-gal img,
body.wm-premium-on .wm-ap-show img,
body.wm-premium-on figure img{filter:none !important}