/* ============ Products — Showcase ============ */

/* ============ Savings — animated preview ============ */
.savings-anim { display: flex; align-items: center; justify-content: center; }
.savings-anim-frame { position: relative; width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(18,39,50,0.28), 0 8px 24px -8px rgba(18,39,50,0.18); border: 1px solid var(--line); background: #122732; }
.savings-anim-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.savings-anim-frame img { display: block; width: 100%; height: auto; }
.savings-cta { margin-top: 32px; }
@media (max-width: 840px) {
  .savings-anim-frame { max-width: 100%; }
  .savings-cta { width: 100%; justify-content: center; }
}
.products-showcase { padding: 0; background: #122732; }
.products-header-empty { height: 0; }
.product-showcase { width: 100%; }
.ps-stage-wrap { position: relative; width: 100%; margin-bottom: 0; }
.ps-stage { position: relative; width: 100%; aspect-ratio: 2.54 / 1; overflow: hidden; background: #122732; }
.ps-track { display: flex; width: 200%; height: 100%; transition: transform 800ms cubic-bezier(.65,0,.25,1); will-change: transform; }
.ps-panel { position: relative; width: 50%; flex: 0 0 50%; height: 100%; overflow: hidden; }
.ps-panel-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #122732; }
.ps-panel-overlay { position: absolute; inset: 0; pointer-events: none; }
.ps-panel-right .ps-panel-overlay { background: linear-gradient(90deg, rgba(18,39,50,1) 0%, rgba(18,39,50,0.85) 4%, rgba(18,39,50,0.3) 12%, rgba(18,39,50,0) 22%, rgba(18,39,50,0) 78%, rgba(18,39,50,0.3) 88%, rgba(18,39,50,0.85) 96%, rgba(18,39,50,1) 100%); }
.ps-panel-left  .ps-panel-overlay { background: linear-gradient(90deg, rgba(18,39,50,1) 0%, rgba(18,39,50,0.85) 4%, rgba(18,39,50,0.3) 12%, rgba(18,39,50,0) 22%, rgba(18,39,50,0) 78%, rgba(18,39,50,0.3) 88%, rgba(18,39,50,0.85) 96%, rgba(18,39,50,1) 100%); }
.ps-panel-right .ps-panel-text-shade-right { background: linear-gradient(90deg, rgba(18,39,50,0) 35%, rgba(18,39,50,0.55) 80%, rgba(18,39,50,0.7) 100%); }
.ps-panel-left  .ps-panel-text-shade-left  { background: linear-gradient(270deg, rgba(18,39,50,0) 35%, rgba(18,39,50,0.55) 80%, rgba(18,39,50,0.7) 100%); }
.ps-panel-text-shade { position: absolute; inset: 0; pointer-events: none; }
.ps-panel-text { position: absolute; top: 50%; z-index: 2; max-width: 460px; padding: 32px; color: #fff; opacity: 0; transform: translateY(calc(-50% + 38px)); transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
.ps-panel-right .ps-panel-text { right: clamp(20px, 6vw, 80px); }
.ps-panel-left  .ps-panel-text { left:  clamp(20px, 6vw, 80px); }
.ps-panel.is-active .ps-panel-text { opacity: 1; transform: translateY(-50%); transition-delay: 350ms; }
.ps-eyebrow { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lemon); margin-bottom: 18px; }
.ps-eyebrow-badge { display: block; margin-bottom: 14px; line-height: 0; }
.ps-eyebrow-badge .ulcsa-badge { position: static; transform: none; box-shadow: none; padding: 0; background: transparent; border: 0; display: inline-flex; }
.ps-eyebrow-badge .ulcsa-badge svg { width: 56px; height: 56px; }
.ps-title { font-size: clamp(34px, 4.4vw, 60px); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; color: #fff; margin: 0 0 20px; }
.ps-title-nowrap { white-space: nowrap; }
.ps-title .ps-amp { font-weight: 200; opacity: 0.9; }
.ps-tagline { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.45; color: rgba(255,255,255,0.82); margin: 0 0 28px; max-width: 36ch; }
.ps-ctas { display: flex; flex-direction: column; gap: 10px; }
.ps-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; color: #fff; text-decoration: none; background: rgba(255,255,255,0.03); transition: border-color .25s, background .25s, transform .25s; }
.ps-cta:hover { border-color: var(--lemon); background: rgba(170,199,96,0.10); transform: translateX(2px); }
.ps-cta-name { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.ps-cta-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lemon); }
.ps-cta-meta svg { transition: transform .25s; }
.ps-cta:hover .ps-cta-meta svg { transform: translateX(3px); }
.ps-tabs { display: flex; gap: 8px; align-items: stretch; padding: 25px 0; }
.ps-tab { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 0 22px 14px; background: transparent; border: 0; color: rgba(255,255,255,0.55); cursor: pointer; font-family: inherit; text-align: left; transition: color .25s; }
.ps-tab:hover { color: rgba(255,255,255,0.85); }
.ps-tab.active { color: #fff; }
.ps-tab-num { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--lemon); font-variant-numeric: tabular-nums; }
.ps-tab-label { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.ps-tab-bar { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; background: rgba(255,255,255,0.12); }
.ps-tab.active .ps-tab-bar { background: var(--lemon); }

/* Hotspots & tooltips */
.ps-hotspots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ps-hotspot { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; outline: none; }
.ps-hotspot-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(170,199,96,0.18); border: 1px solid rgba(170,199,96,0.55); display: flex; align-items: center; justify-content: center; transition: opacity .25s, transform .25s; opacity: 0.85; }
.ps-hotspot-dot::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: rgba(170,199,96,0.18); animation: psPulse 2.4s ease-in-out infinite; }
.ps-hotspot-dot > span { width: 6px; height: 6px; border-radius: 50%; background: var(--lemon); }
.ps-hotspot:hover .ps-hotspot-dot, .ps-hotspot:focus-visible .ps-hotspot-dot { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
@keyframes psPulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.6); opacity: 0; } }

.ps-tooltip { position: absolute; left: 50%; bottom: calc(50% + 24px); transform: translate(-50%, 8px); width: 340px; padding: 18px 18px 16px; background: rgba(11,22,30,0.94); border: 1px solid rgba(170,199,96,0.35); border-radius: 12px; color: #fff; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 4; }
.ps-hotspot:hover .ps-tooltip, .ps-hotspot:focus-visible .ps-tooltip { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ps-tooltip-name { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: #fff; margin-bottom: 4px; padding-right: 60px; }
.ps-tooltip-note { font-size: 12px; color: rgba(255,255,255,0.72); line-height: 1.45; margin-bottom: 14px; padding-right: 60px; }
.ps-tooltip-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 12px; }
.ps-tooltip-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
.ps-tooltip-value { display: block; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.ps-tooltip-cta { display: inline-flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lemon); text-decoration: none; }
.ps-tooltip-cta:hover svg { transform: translateX(3px); }
.ps-tooltip-cta svg { transition: transform .2s; }
.ps-tooltip-badge { position: absolute; top: 12px; right: 12px; display: inline-flex; }
.ps-tooltip-badge .ulcsa-badge { position: static; transform: none; box-shadow: none; padding: 0; background: transparent; border: 0; }
.ps-tooltip-badge .ulcsa-badge svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.ps-tooltip-badge .ulcsa-badge svg circle:first-of-type { fill: #fff; }
.ps-tooltip-arrow { position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: rgba(11,22,30,0.94); border-right: 1px solid rgba(170,199,96,0.35); border-bottom: 1px solid rgba(170,199,96,0.35); }

/* Edge-aware tooltip — flip below if hotspot near top */
.ps-hotspot[data-pos="below"] .ps-tooltip { bottom: auto; top: calc(50% + 24px); transform: translate(-50%, -8px); }
.ps-hotspot[data-pos="below"]:hover .ps-tooltip { transform: translate(-50%, 0); }
.ps-hotspot[data-pos="below"] .ps-tooltip-arrow { bottom: auto; top: -7px; border: 0; border-top: 1px solid rgba(170,199,96,0.35); border-left: 1px solid rgba(170,199,96,0.35); }

@media (max-width: 840px) {
  .ps-hotspot-dot { width: 12px; height: 12px; }
  .ps-tooltip { width: 260px; padding: 14px; }
  .ps-tooltip-specs { grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 10px 0; }
}
@media (max-width: 840px) {
  .products-showcase { padding: 0 0 60px; }
  .ps-stage { aspect-ratio: 4 / 5; }
  .ps-panel-text { max-width: none; padding: 22px; }
  /* (mobile text overlay rules moved to the stacked-layout block below) */
  .ps-panel-right .ps-panel-overlay, .ps-panel-left .ps-panel-overlay { background: none; }
  .ps-title { font-size: clamp(28px, 8vw, 38px); }
  .ps-tabs { padding: 0 16px; }
  .ps-tab { padding: 14px 12px 16px; gap: 10px; }
  .ps-tab-bar { left: 12px; right: 12px; }
}

/* ============================================================
   Products showcase — MOBILE (<=840px): stacked image + "Details" accordion
   Desktop is unchanged. Dots/tooltips hidden on mobile; specs move into
   tap-to-open accordion rows below the photo. Slider height follows the
   active panel via products.js (panels flow with content here).
   ============================================================ */

/* Accordion is desktop-hidden by default (desktop keeps .ps-ctas spec links) */
.ps-accordion { display: none; }
/* Media wrapper is a no-op on desktop (image/text position against .ps-panel as before) */
.ps-panel-media { display: contents; }

/* Accordion visuals (styled globally, only shown on mobile) */
.ps-acc-item { border-top: 1px solid rgba(255,255,255,0.14); }
.ps-acc-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.ps-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 16px 2px; background: transparent; border: 0; cursor: pointer;
  color: #fff; font-family: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
.ps-acc-name { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.ps-acc-toggle { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lemon); }
.ps-acc-chev { transition: transform .25s ease; }
.ps-acc-item.open .ps-acc-chev { transform: rotate(180deg); }
.ps-acc-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.ps-acc-item.open .ps-acc-body { max-height: 460px; }
.ps-acc-inner { padding: 2px 2px 18px; }
.ps-acc-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 12px; }
.ps-acc-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
.ps-acc-value { display: block; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.ps-acc-note { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.45; margin: 0 0 12px; }
.ps-acc-spec { display: inline-flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lemon); text-decoration: none; }
.ps-acc-spec svg { transition: transform .2s; }
.ps-acc-spec:active svg, .ps-acc-spec:hover svg { transform: translateX(3px); }

@media (max-width: 840px) {
  /* Slider grows with content instead of a fixed 4:5 crop (JS sets stage height) */
  .ps-stage { aspect-ratio: auto; height: auto; }
  .ps-track { align-items: flex-start; height: auto; }
  .ps-panel { height: auto; }

  /* Fixed-height panel — SAME height for MAX/PRO/Hybrid (set by MAX: its image + 180px).
     The wide photo fills the width; where it doesn't reach top/bottom the panel's dark bg
     shows (invisible, it matches). Title + accordion are ONE bottom-pinned overlay that
     grows UPWARD over the photo when a row expands, so section height never changes. */
  .ps-panel-media { display: block; position: relative; width: 100%; height: calc(86vw + 180px); min-height: 520px; overflow: hidden; background: #122732; }

  .ps-panel-img { position: absolute; inset: 0; z-index: 0; background-repeat: no-repeat;
    background-size: 200% auto; background-position: center 16px; }
  .ps-panel-overlay, .ps-panel-text-shade { display: none; }

  /* Per-product framing.  Horizontal nudge: +px = right, -px = left.
     Vertical px = space above the unit; smaller/negative = unit higher in the frame. */
  .ps-panel[data-idx="0"] .ps-panel-img { background-size: 250% auto; background-position: calc(29% + 35px) -50px; }  /* MAX  (unit up 50px) */
  .ps-panel[data-idx="1"] .ps-panel-img { background-size: 185% auto; background-position: calc(66% - 75px) top; } /* PRO Range  (top-anchored: kills top bar) */
  .ps-panel[data-idx="2"] .ps-panel-img { background-size: 285% auto; background-position: calc(25% + 40px) -155px; }/* Hybrid  (unit nudged up 115px / left 30px) */

  /* Title + accordion overlay: pinned to the bottom, grows upward when expanded.
     Gradient is px-based (consistent regardless of overlay height): transparent over the
     photo at the top, solid behind the title/accordion below. */
  .ps-panel-text { position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 2;
    margin-top: 0; max-width: none; opacity: 1; transform: none;
    background: linear-gradient(180deg, rgba(18,39,50,0) 0px, rgba(18,39,50,0.85) 64px, #122732 132px);
    padding: 74px 22px 16px; }
  .ps-panel-right .ps-panel-text, .ps-panel-left .ps-panel-text { left: 0; right: 0; }
  .ps-panel.is-active .ps-panel-text { transform: none; }
  /* MAX has a badge + eyebrow + 2-line title, so its see-through zone runs deeper
     (down to the bottom of the word "MAX") before going solid. */
  .ps-panel[data-idx="0"] .ps-panel-text { background: linear-gradient(180deg, rgba(18,39,50,0) 0px, rgba(18,39,50,0.85) 150px, #122732 300px); }

  .ps-hotspots { display: none; }   /* no dots on mobile */
  .ps-ctas { display: none; }       /* desktop spec links hidden on mobile */
  .ps-accordion { display: block; background: transparent; }
}

/* Desktop-only: reframe the Hybrid panel so the single trailer fills the frame
   (zoom + left anchor; text stays on the right). Min-width so it never touches mobile. */
@media (min-width: 841px) {
  .ps-panel[data-idx="2"] .ps-panel-img { background-size: 135%; background-position: 16% calc(84% - 50px); }
}