/* ============================================================
   Elvaro Hero Banners — shared styles
   Source: design-source/Elvaro _ Hero Banners/banner.css
   + vip-card.css (scoped under .elvaro-banner to avoid
   conflicting with the homepage VIP block card).

   Images at: assets/img/hero/ (relative to this file: ../img/hero/)
   Fonts: Manrope + Inter already loaded by elvaro-fonts.
   ============================================================ */

.elvaro-banner,
.elvaro-banner *,
.elvaro-banner *::before,
.elvaro-banner *::after { box-sizing: border-box; }

.elvaro-banner {
  --b-bg:          var(--bg);
  --b-yellow:      #F7B703;
  --b-yellow-h:    #FFC313;
  --b-yellow-soft: rgba(247,183,3,0.12);
  --b-yellow-ring: rgba(247,183,3,0.4);
  --b-fg-1:        #FAFAFA;
  --b-fg-2:        rgba(var(--fg-rgb), 0.75);
  --b-fg-3:        rgba(var(--fg-rgb), 0.55);
  --b-on-yellow:   #0A0E11;

  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 540;
  min-height: 360px;
  background: var(--b-bg);
  color: var(--b-fg-1);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow: hidden;
  border-radius: 14px;
}

/* ---------- Photo layer ---------- */
.elvaro-banner .b-photo {
  position: absolute;
  inset: 0 0 0 30%;
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}
.elvaro-banner .b-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--b-bg) 0%,
    rgba(var(--bg-rgb), 0.92) 18%,
    rgba(var(--bg-rgb), 0.5) 38%,
    rgba(var(--bg-rgb), 0) 60%);
  pointer-events: none;
}

/* ---------- Content layer ---------- */
.elvaro-banner .b-content {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4.5% 6%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 20px);
}
.elvaro-banner .b-content > * { max-width: 560px; }

/* ---------- Headline ---------- */
.elvaro-banner h1.b-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--b-fg-1);
  margin: 0;
}
.elvaro-banner h1.b-title .b-accent { color: var(--b-yellow); display: block; }

/* ---------- Subtext ---------- */
.elvaro-banner .b-subtext {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: var(--b-fg-2);
  margin: 0;
  max-width: 460px;
}

/* ---------- Tag pill ---------- */
.elvaro-banner .b-tagpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--b-yellow-soft);
  border: 1px solid var(--b-yellow-ring);
  color: var(--b-yellow);
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
}
.elvaro-banner .b-tagpill svg { flex: 0 0 auto; }

/* ---------- CTA buttons ---------- */
.elvaro-banner .b-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.elvaro-banner .b-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 10px;
  border: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: all 180ms cubic-bezier(0.2,0,0,1);
  white-space: nowrap;
}
.elvaro-banner .b-cta--primary {
  background: var(--b-yellow);
  color: var(--b-on-yellow);
  box-shadow: 0 1px 0 0 rgba(var(--fg-rgb), 0.18) inset, 0 6px 14px -8px rgba(0,0,0,0.6);
}
.elvaro-banner .b-cta--primary:hover { background: var(--b-yellow-h); transform: translateY(-1px); }
.elvaro-banner .b-cta--outline {
  background: transparent;
  color: var(--b-fg-1);
  border: 1px solid rgba(var(--fg-rgb), 0.28);
}
.elvaro-banner .b-cta--outline:hover { border-color: rgba(var(--fg-rgb), 0.5); background: rgba(var(--fg-rgb), 0.04); }
.elvaro-banner .b-cta svg { flex: 0 0 auto; }

/* ---------- Trust row (banner 1) ---------- */
.elvaro-banner .b-trust {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  flex-wrap: wrap;
  margin-top: 6px;
}
.elvaro-banner .b-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--b-fg-2);
  white-space: pre-line;
}
.elvaro-banner .b-trust-item svg { color: var(--b-yellow); flex: 0 0 auto; }

/* ---------- Bullets list (banner 3) ---------- */
.elvaro-banner .b-bullets {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vw, 14px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.elvaro-banner .b-bullet {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(13px, 1vw, 14.5px);
  font-weight: 500;
  color: rgba(var(--fg-rgb), 0.88);
  line-height: 1.35;
  transition: transform 180ms cubic-bezier(0.2,0,0,1),
              color 180ms cubic-bezier(0.2,0,0,1);
}
.elvaro-banner .b-bullet:hover {
  transform: translateX(4px);
  color: rgba(var(--fg-rgb), 1);
}
.elvaro-banner .b-bullet-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--b-yellow-soft);
  border: 1px solid rgba(247,183,3,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms cubic-bezier(0.2,0,0,1),
              border-color 180ms cubic-bezier(0.2,0,0,1);
}
.elvaro-banner .b-bullet:hover .b-bullet-icon {
  background: rgba(247,183,3,0.18);
  border-color: rgba(247,183,3,0.55);
}
.elvaro-banner .b-bullet-icon svg { color: var(--b-yellow); }

/* ---------- VIP price card (banner 3) ---------- */
.elvaro-banner .b-pricecard {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: var(--surface-2);
  border: 1px solid rgba(247,183,3,0.4);
  border-radius: 12px;
  padding: 22px 26px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 0 0 rgba(var(--fg-rgb), 0.04) inset, 0 16px 32px -16px rgba(0,0,0,0.7);
}
.elvaro-banner .b-pricecard-eyebrow {
  font-size: 13px; font-weight: 500; color: var(--b-fg-2);
}
.elvaro-banner .b-pricecard-price {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: var(--b-yellow);
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.elvaro-banner .b-pricecard-price .unit {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500; color: var(--b-fg-3);
  margin-left: 6px;
}
.elvaro-banner .b-pricecard .b-cta { width: 100%; justify-content: space-between; margin-top: 8px; }

/* ============================================================
   Banner-specific backgrounds
   ============================================================ */
.elvaro-banner.b-tools     .b-photo { background-image: url('../img/hero/b1-tools.png'); }
.elvaro-banner.b-batteries .b-photo { background-image: url('../img/hero/b2-batteries-v2.jpg'); }

.elvaro-banner.b-vip {
  background:
    radial-gradient(60% 110% at 50% 80%, rgba(232,184,95,0.32) 0%, rgba(232,184,95,0.08) 35%, transparent 65%),
    radial-gradient(40% 90% at 50% 20%,  rgba(232,184,95,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #0A0805 0%, var(--surface-1) 50%, #14100A 100%);
}
.elvaro-banner.b-vip .b-vip-stage {
  position: absolute;
  left: 35%; right: 32%; top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.elvaro-banner.b-vip .b-vip-stage .elvaro-vip-card {
  width: 100%;
  max-width: 360px;
  transition: transform 280ms cubic-bezier(0.2,0,0,1),
              box-shadow 280ms cubic-bezier(0.2,0,0,1);
}
.elvaro-banner.b-vip .b-vip-stage:hover .elvaro-vip-card {
  transform: rotate(-4deg) translateY(-8px) scale(1.02);
  box-shadow:
    0 1px 0 0 rgba(var(--fg-rgb), 0.06) inset,
    0 0 0 1px rgba(232,184,95,0.18) inset,
    0 48px 72px -12px rgba(0,0,0,0.95),
    0 16px 32px -8px rgba(0,0,0,0.8),
    0 0 60px -10px rgba(232,184,95,0.18);
}
.elvaro-banner.b-vip .b-vip-stage::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: -22%;
  height: 30%;
  background: radial-gradient(50% 100% at 50% 0%, rgba(232,184,95,0.35) 0%, transparent 70%);
  filter: blur(12px);
  z-index: -1;
}

.elvaro-banner.b-batteries { aspect-ratio: 1920 / 460; }
.elvaro-banner.b-vip       { aspect-ratio: 1920 / 460; }
.elvaro-banner.b-vip .b-content { padding-right: 320px; }

/* ============================================================
   VIP card component — scoped under .elvaro-banner to avoid
   conflicting with the homepage VIP block card (.elvaro-vip-card__*)
   Source: design-source/Elvaro _ Hero Banners/vip-card.css
   ============================================================ */

.elvaro-banner .elvaro-vip-card {
  --vc-bg-1:    #0A0805;
  --vc-bg-2:    #14100A;
  --vc-bg-3:    #1A140C;
  --vc-gold:    #E8B85F;
  --vc-gold-hi: #F5D283;
  --vc-gold-lo: #8C6A2A;
  --vc-edge:    rgba(232,184,95,0.55);
  --vc-radius:  16px;

  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  aspect-ratio: 1.6 / 1;
  padding: 8% 10%;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(232,184,95,0.18) 0%, transparent 55%),
    radial-gradient(80% 70% at 20% 100%, rgba(232,184,95,0.10) 0%, transparent 60%),
    linear-gradient(135deg, var(--vc-bg-1) 0%, var(--vc-bg-2) 55%, var(--vc-bg-3) 100%);
  border: 1px solid var(--vc-edge);
  border-radius: var(--vc-radius);
  overflow: hidden;
  box-shadow:
    0 1px 0 0 rgba(var(--fg-rgb), 0.06) inset,
    0 0 0 1px rgba(232,184,95,0.12) inset,
    0 24px 48px -12px rgba(0,0,0,0.85),
    0 6px 14px -8px rgba(0,0,0,0.6);
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  text-align: center;
  isolation: isolate;
  /* Reset the fixed-width + rotation from theme's base rule */
  transform: none;
}

.elvaro-banner .elvaro-vip-card::before,
.elvaro-banner .elvaro-vip-card::after {
  content: "";
  position: absolute;
  width: 38%;
  height: 60%;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(135deg,
      transparent 0,
      transparent 18%,
      var(--vc-gold-lo) 18%,
      var(--vc-gold) 20%,
      var(--vc-gold-hi) 21%,
      var(--vc-gold) 22%,
      var(--vc-gold-lo) 24%,
      transparent 24%,
      transparent 100%);
  filter: drop-shadow(0 0 6px rgba(232,184,95,0.3));
}
.elvaro-banner .elvaro-vip-card::before { top: 0;    left: 0; }
.elvaro-banner .elvaro-vip-card::after  { bottom: 0; right: 0; transform: rotate(180deg); }

.elvaro-banner .elvaro-vip-card .vc-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(var(--fg-rgb), 0.05) 0%, rgba(var(--fg-rgb), 0) 30%, rgba(var(--fg-rgb), 0) 70%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
  z-index: 2;
}

.elvaro-banner .elvaro-vip-card > *:not(.vc-sheen) { position: relative; z-index: 3; }

.elvaro-banner .elvaro-vip-card .vc-crown {
  width: clamp(26px, 11%, 44px);
  height: auto;
  color: var(--vc-gold);
  filter: drop-shadow(0 2px 6px rgba(232,184,95,0.45));
}

.elvaro-banner .elvaro-vip-card .vc-wordmark {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 13%, 56px);
  letter-spacing: 0.06em;
  line-height: 1;
  background: linear-gradient(180deg, var(--vc-gold-hi) 0%, var(--vc-gold) 50%, var(--vc-gold-lo) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.elvaro-banner .elvaro-vip-card .vc-tagline {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: clamp(10px, 4.2%, 16px);
  letter-spacing: 0.32em;
  color: var(--vc-gold);
  margin: 0;
  opacity: 0.95;
}

.elvaro-banner .elvaro-vip-card.vc-sm  { max-width: 220px; --vc-radius: 12px; }
.elvaro-banner .elvaro-vip-card.vc-md  { max-width: 360px; }
.elvaro-banner .elvaro-vip-card.vc-lg  { max-width: 480px; }
.elvaro-banner .elvaro-vip-card.vc-tilt-l { transform: rotate(-6deg); }
.elvaro-banner .elvaro-vip-card.vc-tilt-r { transform: rotate(6deg); }

/* ============================================================
   Hero + social proof overlay
   ============================================================ */

/* Wrapper that allows absolute positioning of the social proof over the slide */
.elvaro-hero-with-social {
  position: relative;
}

/* Social proof bar overlaid at the bottom-left of the RevSlider hero.
   Mirror .b-content's box (max-width 1400 + margin auto + padding-left 6%) so the
   bar lines up with the slide's buttons at EVERY width — without the max-width it
   stayed at viewport-6% while the centered slide content drifted right past ~1400px,
   leaving the bar far to the left on the largest screens. */
.elvaro-hero-social-overlay {
  position: absolute;
  bottom: clamp(20px, 4%, 40px);
  left: 0;
  right: 0;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  z-index: 20;
  padding-left: 6%;
  pointer-events: none;
}
.elvaro-hero-social-overlay .elvaro-reviews {
  pointer-events: auto;
}

/* Compact viewports: social proof drops below the slider in normal flow instead
   of floating as an overlay (prevents collision with banner content at those heights).
   At ≥900px it stays as the absolute bottom-left overlay. */
@media (max-width: 899px) {
  .elvaro-hero-with-social {
    display: flex;
    flex-direction: column;
  }
  .elvaro-hero-social-overlay {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    pointer-events: auto;
    padding: 10px 22px 14px;
    background: var(--bg);
    border-top: 1px solid rgba(var(--fg-rgb), 0.07);
    margin-top: 0;
  }
}

/* ============================================================
   Slider Revolution overrides — keep SR from breaking layout
   ============================================================ */
.rev_slider_wrapper {
  margin: 0 !important;
}

/* SR hero sits directly under the header — no extra padding */
.tp-banner-container,
.rev_slider_wrapper + * { margin-top: 0; }

/* SR z-index must not override sticky header */
.rev_slider { z-index: 1; }

/* Arrows disabled globally — pager only */
SR7-ARROW { display: none !important; }

/* Pager: float to the bottom-right corner at desktop, top-right at mobile
   (bottom-right would overlap content pinned to the bottom at ≤720px) */
SR7-BULLETS {
  top: auto !important;
  left: auto !important;
  bottom: 16px !important;
  right: clamp(16px, 3%, 32px) !important;
  transform: none !important;
}
@media (max-width: 720px) {
  SR7-BULLETS {
    top: 16px !important;
    bottom: auto !important;
  }
}

/* Inside SR7 text layers: always fill the assigned slide height */
SR7-TXT .elvaro-banner {
  height: 100%;
  aspect-ratio: auto;
  min-height: 0;
  border-radius: 0;
}

/* ================================================================
   SR7 MOBILE — best-practice responsive hero layout
   Best practice: viewport-proportional height, photo slides use
   full-bleed overlay (content pinned to bottom), VIP stays stacked.
   ================================================================ */

/* Viewport-proportional height overrides SR7's JS-computed fixed px.
   clamp: floor at 500px for small phones, cap at 700px for large phones,
   scale at 78vh for everything in between. */
@media (max-width: 720px) {
  SR7-MODULE { height: clamp(500px, 78vh, 700px) !important; }
  /* Force every inner SR7 layer to fill the CSS-overridden module height.
     SR7-CONTENT / SLIDE / TXT are position:absolute — their 100% height resolves
     against SR7-MODULE (position:relative). SR7-ADJUSTER is the flow spacer. */
  SR7-ADJUSTER, SR7-CONTENT, SR7-SLIDE, SR7-TXT { height: 100% !important; }
}

/* --- Tools & Batteries: full-bleed photo, content pinned to bottom ---
   Photo becomes a full-height background; content sits at the bottom
   overlaid on a darkening gradient — eliminates the empty dead zone
   that appeared with the stacked layout. */
@media (max-width: 720px) {
  SR7-TXT .elvaro-banner.b-tools,
  SR7-TXT .elvaro-banner.b-batteries {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  /* Override the standalone stacked photo — keep it absolute full-cover */
  SR7-TXT .elvaro-banner.b-tools .b-photo,
  SR7-TXT .elvaro-banner.b-batteries .b-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-position: center top;
  }
  /* Gradient: transparent at top → fully dark at ~88% height for legible text */
  SR7-TXT .elvaro-banner.b-tools .b-photo::after,
  SR7-TXT .elvaro-banner.b-batteries .b-photo::after {
    background: linear-gradient(180deg,
      rgba(var(--bg-rgb), 0)    0%,
      rgba(var(--bg-rgb), 0.45) 40%,
      rgba(var(--bg-rgb), 0.88) 68%,
      var(--b-bg)         88%) !important;
  }
  /* Content: in-flow at the bottom, natural height, percent-based padding */
  SR7-TXT .elvaro-banner.b-tools .b-content,
  SR7-TXT .elvaro-banner.b-batteries .b-content {
    position: relative;
    z-index: 1;
    flex: none;
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    padding: 5% 6% 7%;
    gap: clamp(10px, 2.5vw, 16px);
  }
}

/* --- VIP: stacked column (stage → bullets → pricecard) ---
   VIP has no photo so the full-bleed approach doesn't apply;
   stage + bullets + pricecard stack top-to-bottom in the slide height. */
@media (max-width: 720px) {
  /* VIP: the three zones (card → bullets → price box) are spaced EVENLY top-to-bottom,
     so the rhythm is identical at every phone width — no clustered bullets with a dead
     gap before the price box. space-evenly gives equal top/inter/bottom spacing. */
  SR7-TXT .elvaro-banner.b-vip {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: stretch;
  }
  SR7-TXT .elvaro-banner.b-vip .b-vip-stage,
  SR7-TXT .elvaro-banner.b-vip .b-content,
  SR7-TXT .elvaro-banner.b-vip .b-pricecard { flex: 0 0 auto; }
  SR7-TXT .elvaro-banner.b-vip .b-content {
    height: auto;
    min-height: 0;
    justify-content: center;
    padding: 0 6%;
    gap: clamp(10px, 2.6vw, 16px);
  }
  /* drop the standalone 7% bottom margin so space-evenly owns the bottom gap too */
  SR7-TXT .elvaro-banner.b-vip .b-pricecard { margin-block: 0; }
}

/* ============================================================
   MOBILE — stacked layout, photo moves on top
   ============================================================ */
@media (max-width: 720px) {
  .elvaro-banner,
  .elvaro-banner.b-batteries,
  .elvaro-banner.b-vip {
    aspect-ratio: auto;
    min-height: 0;
    border-radius: 12px;
  }
  .elvaro-banner .b-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: 190px;
    background-position: center;
  }
  .elvaro-banner .b-photo::after {
    background: linear-gradient(180deg,
      rgba(var(--bg-rgb), 0) 0%,
      rgba(var(--bg-rgb), 0.4) 70%,
      var(--b-bg) 100%);
  }
  .elvaro-banner .b-content {
    padding: 16px 22px;
    gap: 10px;
  }
  .elvaro-banner.b-vip .b-content { padding-right: 22px; }
  .elvaro-banner h1.b-title { font-size: 30px; }
  .elvaro-banner .b-subtext { font-size: 14px; }
  .elvaro-banner .b-trust { gap: 14px; }
  .elvaro-banner .b-trust-item { font-size: 12px; }
  .elvaro-banner .b-cta { padding: 13px 18px; font-size: 12.5px; flex: 1 1 auto; justify-content: center; }
  .elvaro-banner .b-pricecard {
    position: relative;
    right: auto; top: auto; transform: none;
    margin: 0 6% 7%;
    width: auto;
    min-width: 0;
    padding: 14px 18px;
  }
  .elvaro-banner.b-vip .b-vip-stage {
    position: relative;
    left: auto; right: auto; top: auto;
    transform: none;
    width: 100%;
    height: auto;                          /* size to the card so spacing stays even */
    padding: clamp(8px, 3vw, 18px) 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .elvaro-banner.b-vip .b-vip-stage .elvaro-vip-card {
    max-width: clamp(200px, 60vw, 300px);  /* card scales fluidly with viewport width */
    transform: rotate(-4deg);
  }
  .elvaro-banner.b-vip .b-bullets { margin-bottom: 4px; }
}

/* Tablet bridge — 721–1099px
   SR7 natural heights here are 262–399px (width × 450/1240), too short
   for the content. Override to a comfortable range and propagate 100%
   through the element chain (same technique as the ≤720px fix).
   Extended to 1099px because at ~980–1050px the natural height (355px)
   is still tight for the trust row + CTAs + title stack. */
/* Tablet band (721–1099): the desktop side-by-side crowds here — the battery photo
   overlapped the CTAs and the VIP card collided with the price box. Use the same
   full-bleed (photo slides) / stacked (VIP) treatment as mobile, with a tablet-height
   module, so the visual reads clearly and nothing overlaps. */
@media (min-width: 721px) and (max-width: 1099px) {
  SR7-MODULE { height: clamp(520px, 56vw, 600px) !important; }
  SR7-ADJUSTER, SR7-CONTENT, SR7-SLIDE, SR7-TXT { height: 100% !important; }
  .elvaro-banner h1.b-title { font-size: clamp(34px, 4.6vw, 48px); }

  /* tools & batteries — full-bleed photo, content pinned to the bottom-left */
  SR7-TXT .elvaro-banner.b-tools,
  SR7-TXT .elvaro-banner.b-batteries { display: flex; flex-direction: column; justify-content: flex-end; }
  SR7-TXT .elvaro-banner.b-tools .b-photo,
  SR7-TXT .elvaro-banner.b-batteries .b-photo {
    position: absolute !important; inset: 0 !important; right: 0 !important;
    width: 100% !important; height: 100% !important; background-position: center;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  SR7-TXT .elvaro-banner.b-tools .b-photo::after,
  SR7-TXT .elvaro-banner.b-batteries .b-photo::after {
    background: linear-gradient(180deg,
      rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), 0.35) 40%,
      rgba(var(--bg-rgb), 0.82) 68%, var(--b-bg) 90%) !important;
  }
  SR7-TXT .elvaro-banner.b-tools .b-content,
  SR7-TXT .elvaro-banner.b-batteries .b-content {
    position: relative; z-index: 1; flex: none; height: auto; min-height: 0;
    justify-content: flex-end; max-width: 1280px; padding: 4% 6% 6%;
  }
  .elvaro-banner.b-tools .b-content > *,
  .elvaro-banner.b-batteries .b-content > * { max-width: 620px; }

  /* VIP — a real 2-column layout for this width (a vertical stack wasted the width and
     overflowed): the card (visual) sits on the LEFT spanning both rows, the benefits list
     and the price box stack in the RIGHT column. Card is the anchor; benefits → CTA read
     top-to-bottom beside it. */
  SR7-TXT .elvaro-banner.b-vip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "card bullets" "card price";
    align-items: center;
    align-content: center;
    justify-items: center;
    row-gap: clamp(14px, 2.2vw, 22px);
    column-gap: clamp(24px, 4vw, 52px);
    padding-inline: clamp(28px, 5vw, 60px);
  }
  SR7-TXT .elvaro-banner.b-vip .b-vip-stage {
    grid-area: card;
    position: relative; left: auto; right: auto; top: auto; transform: none;
    width: 100%; height: auto; padding: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .elvaro-banner.b-vip .b-vip-stage .elvaro-vip-card { max-width: clamp(260px, 38vw, 400px); transform: rotate(-4deg); }
  SR7-TXT .elvaro-banner.b-vip .b-content {
    grid-area: bullets; align-self: end;
    height: auto; min-height: 0; width: 100%; max-width: 360px;
    justify-content: flex-end; align-items: stretch;
    padding: 0; gap: clamp(10px, 1.4vw, 14px);
  }
  .elvaro-banner.b-vip .b-bullets { max-width: none; }
  SR7-TXT .elvaro-banner.b-vip .b-pricecard {
    grid-area: price; align-self: start;
    position: relative; right: auto !important; top: auto; transform: none;
    margin: 0; width: 100%; max-width: 360px; min-width: 0;
  }
}

/* Large screens — cap the slide height. The slide content is vertically centred
   while the social-proof bar is pinned to the bottom, so as the slide grows taller
   (≈431px@1440 → 480px@1920) the gap between the CTAs and that bar widens
   (≈22px → 39px). Hold the comfortable ~1440px height so the spacing stays tight
   at 1920px+. Same height-propagation technique as the tablet bridge above. */
@media (min-width: 1440px) {
  SR7-MODULE { height: 432px !important; }
  SR7-ADJUSTER, SR7-CONTENT, SR7-SLIDE, SR7-TXT { height: 100% !important; }

  /* Hold the hero to the page's centred 1280 column at ultra-wide so it doesn't drift
     right: the content + social bar match the site container, and the photo / VIP price
     card stop at the column's right edge instead of bleeding to the screen edge (which
     left the slide looking right-heavy with empty space on the left). */
  .elvaro-banner .b-content,
  .elvaro-hero-social-overlay { max-width: 1280px; }
  .elvaro-banner.b-tools .b-photo,
  .elvaro-banner.b-batteries .b-photo {
    right: calc((100% - 1280px) / 2);
    /* dissolve the photo's right edge into the dark banner bg over a generous span so the
       capped edge is seamless even on the lit tools photo (a narrow fade left a visible
       'border'); the left is already covered by the text gradient. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 64%, transparent 99%);
            mask-image: linear-gradient(90deg, #000 0, #000 64%, transparent 99%);
  }
  .elvaro-banner.b-vip .b-pricecard { right: calc((100% - 1280px) / 2); }
  /* keep the slide pager inside the centred column too (was pinned 32px off the screen edge) */
  SR7-BULLETS { right: calc((100% - 1280px) / 2 + 32px) !important; }
}

/* ============================================================
   Slide 1 (tools) — hide the trust row entirely. It duplicates the
   .elvaro-trust-strip card directly below the hero, and (sitting bottom-left of
   the slide) it collided with the social-proof overlay on desktop — both want the
   same corner, so they stacked tight at 1920px and overlapped on narrower large
   screens. Dropping it leaves the slide as title + subtext + CTAs + the overlay.
   ============================================================ */
.elvaro-banner.b-tools .b-trust { display: none; }

/* Very narrow phones (≤400px) — nudge the card a touch smaller so the card, all four
   bullets and the price box still clear each other with the even spacing. */
@media (max-width: 400px) {
  .elvaro-banner.b-vip .b-vip-stage .elvaro-vip-card,
  SR7-TXT .elvaro-banner.b-vip .b-vip-stage .elvaro-vip-card { max-width: clamp(176px, 56vw, 236px); }
  SR7-TXT .elvaro-banner.b-vip .b-content { padding: 0 5%; }
}

/* Hero fallback (when SR plugin is not active) */
.elvaro-hero-fallback {
  background: var(--bg, var(--bg));
  color: var(--fg-1, #FAFAFA);
  padding-block: var(--sp-20, 80px);
  text-align: center;
}