/* TheSweeper — PUDU robotics single-product redesign (2026-06-22 client direction).
   Brand tokens: primary #1BA5DD, ink #002636, deep navy panels (NOT black). */
.pp{
  --pp-blue:#1BA5DD; --pp-blue-d:#0e7fb0; --pp-ink:#002636; --pp-navy:#0a2230; --pp-navy2:#123a52;
  --pp-accent:#f5a623; --pp-accent-soft:rgba(245,166,35,.32); /* selection / focus highlight — robotics amber (matches landing) */
  --pp-line:#e4eaf0; --pp-bg:#f4f7fa; --pp-text:#1d2733; --pp-muted:#5b6b7a;
  --pp-grad:linear-gradient(90deg,#1BA5DD 0%,#002636 100%);
  font-family:inherit; color:var(--pp-text); line-height:1.55;
}
.pp *,.pp *::before,.pp *::after{ box-sizing:border-box; }
.pp h1,.pp h2,.pp h3,.pp h4{ margin:0; line-height:1.15; color:var(--pp-ink); font-weight:700; }
.pp .pp-kicker{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pp-blue); }
.pp .pp-kicker-light{ color:#9fd4f2; }

/* buttons */
.pp .pp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4em; font-size:15px; font-weight:600;
  padding:13px 30px; border-radius:50px; border:2px solid transparent; background-clip:padding-box; cursor:pointer; text-decoration:none; transition:.18s; }
.pp .pp-btn-primary{ background:var(--pp-grad); color:#fff; border:0; padding:15px 32px; box-shadow:0 10px 14px -10px rgba(0,38,54,.42); }
.pp .pp-btn-primary:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.pp .pp-btn-ghost{ background:#fff; color:var(--pp-ink); border-color:var(--pp-ink); }
.pp .pp-btn-ghost:hover{ background:var(--pp-ink); color:#fff; }
.pp .pp-btn-lease{ background:#7ba300; color:#fff; border-color:transparent; }
.pp .pp-btn-lease:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* ============ 1. PRODUCT INFO ============ */
/* Areas so the title can sit ABOVE the image on mobile while desktop keeps it top-left. */
/* gallery column widened (.95/1.05 -> .86/1.14) so the 3:2 viewer stage renders taller — the
   machine gets more room and the "Drag to spin" chip clears it (client, Brandon 2026-07-20).
   Aspect-ratio and image padding are unchanged, so hotspot alignment scales uniformly. */
/* grid-template-rows matters: the gallery spans both rows, so when it is TALLER than head+buy the
   free space is shared out between the two implicit rows and opens a gap under the title. That bites
   any model with no rental/price block to bulk out the left column — measured 173px of dead space on
   the Big Ox Ai-32. Pinning row 1 to min-content and letting row 2 absorb the slack keeps the copy
   tight under the heading; CC1 Pro (whose left column is the taller side) is unaffected. */
.pp-info{ display:grid; grid-template-columns:.86fr 1.14fr; grid-template-areas:"head gallery" "buy gallery";
  grid-template-rows:min-content 1fr;
  gap:0 48px; align-items:start; max-width:1180px; margin:0 auto; padding:44px 20px 56px; }
.pp-head{ grid-area:head; }
.pp-buy{ grid-area:buy; }
.pp-gallery{ grid-area:gallery; position:sticky; top:96px; }
.pp-stage{ position:relative; background:var(--pp-bg); border:1px solid var(--pp-line); border-radius:18px; aspect-ratio:6/5; overflow:hidden; }
.pp-frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:26px; opacity:0; transition:opacity .35s ease; }
/* Elementor ships `.elementor img{height:auto}` (specificity 0,1,1), which outranks `.pp-frame`
   (0,1,0) and collapses every frame to its own intrinsic height — the stage stopped being a fixed
   6:5 box and jumped height on every thumbnail click (measured 263px to 1222px across one gallery).
   Three classes wins it back without !important. This only shows on the plain-gallery path (models
   with no 360 viewer), which is why it went unnoticed until the Big Ox Ai-32 first used it. */
.pp .pp-stage .pp-frame{ height:100%; }
.pp-frame.is-active{ opacity:1; }

/* Dark-art models: brochure renders composited on solid black. A light stage frames them as black
   rectangles, so the stage and thumbs go black and the artwork blends edge to edge. */
.pp-dark .pp-stage{ background:#000; border-color:#1b2a33; }
.pp-dark .pp-thumb{ background:#000; border-color:#1b2a33; }
.pp-dark .pp-thumb.is-active{ border-color:var(--pp-accent); background:rgba(245,166,35,.16); }
/* larger thumbnails, matching the demo (16:10, four across, wrapping) — client feedback 2026-07-17 */
/* minmax(0,1fr), not 1fr: plain `1fr` is minmax(auto,1fr), so a track can never shrink below its
   content's min-content size. That blew the thumb grid 9px past the viewport on phones (measured
   tracks of 118.25px inside a 350px grid) and clipped the right-hand column. Pre-existing on the
   PUDU pages too — the Big Ox page just made it visible. */
.pp-thumbs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; }
.pp-thumb{ background:var(--pp-bg); border:1px solid var(--pp-line); border-radius:12px; padding:8px; cursor:pointer; aspect-ratio:16/10; transition:.15s; }
.pp-thumb img{ width:100%; height:100%; object-fit:contain; }
.pp-thumb.is-active{ border-color:var(--pp-accent); background:rgba(245,166,35,.10); box-shadow:0 0 0 2px var(--pp-accent-soft); }
.pp-thumb:hover{ border-color:var(--pp-accent); }

/* Selection / focus highlight — force the brand accent and neutralize any theme/plugin focus color
   (a global button:focus elsewhere on the site renders magenta). Scoped to this component only. */
.pp a:focus, .pp a:focus-visible, .pp button:focus, .pp button:focus-visible, .pp button:active,
.pp input:focus, .pp select:focus, .pp textarea:focus, .pp [tabindex]:focus{ outline:none !important; }
.pp .pp-thumb:focus, .pp .pp-thumb:focus-visible, .pp .pp-thumb:active{
  background:var(--pp-bg) !important; border-color:var(--pp-accent) !important;
  box-shadow:0 0 0 3px var(--pp-accent-soft) !important; }
.pp .pp-thumb.is-active:focus{ background:rgba(245,166,35,.10) !important; }
.pp .pp-f input:focus, .pp .pp-f select:focus, .pp .pp-f textarea:focus{
  border-color:var(--pp-accent) !important; box-shadow:0 0 0 3px var(--pp-accent-soft) !important; }
.pp .pp-btn:focus, .pp .pp-btn:focus-visible, .pp .pp-btn:active{
  box-shadow:0 0 0 3px var(--pp-accent-soft) !important; }
/* Accordion / Q&A headers: subtle blue-grey on every interactive state, and FORCE dark text
   (the site's global button hover/focus rule sets bg magenta AND text white — both must be undone,
   incl. :focus/:active, or an opened header shows white-on-light or a clicked one flashes pink). */
.pp .pp-acc-head:hover, .pp .pp-acc-head:focus, .pp .pp-acc-head:focus-visible, .pp .pp-acc-head:active,
.pp .pp-qa-q:hover, .pp .pp-qa-q:focus, .pp .pp-qa-q:focus-visible, .pp .pp-qa-q:active{
  background:#eef3f8 !important; color:var(--pp-ink) !important; }
.pp .pp-acc-head:focus-visible, .pp .pp-qa-q:focus-visible{
  box-shadow:inset 0 0 0 2px var(--pp-accent-soft) !important; border-radius:8px; }
.pp .pp-thumb:hover{ background:var(--pp-bg) !important; }

.pp-buy{ order:1; padding-top:6px; }
.pp-brand{ display:block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pp-blue); margin-bottom:8px; }
.pp-title{ font-size:38px; letter-spacing:-.5px; margin-bottom:18px; }
.pp-desc{ background:var(--pp-bg); border:1px solid var(--pp-line); border-radius:14px; padding:18px 20px; }
.pp-desc p{ margin:0; font-size:15.5px; color:#3a4654; }
/* all three CTAs on ONE line (client 2026-07-20): tighter padding/size, no wrap */
.pp-ctas{ display:flex; gap:10px; flex-wrap:nowrap; margin:22px 0 20px; }
.pp-ctas .pp-btn{ padding:12px 18px; font-size:14px; white-space:nowrap; flex:0 1 auto; }
.pp-price{ border-top:1px solid var(--pp-line); padding-top:18px; }
.pp-price-row{ display:flex; align-items:baseline; gap:10px; }
.pp-price-label{ font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--pp-muted); }
.pp-price-val{ font-size:26px; font-weight:800; color:var(--pp-ink); }
.pp-price-note{ font-size:13px; color:var(--pp-muted); }
.pp-price-raas{ margin-top:6px; font-size:14.5px; color:#3a4654; }
.pp-price-raas strong{ color:var(--pp-blue-d); }
.pp-rental{ margin-top:18px; border:1px solid var(--pp-line); border-radius:14px; padding:18px 22px; background:#fff; }
.pp-rental-head{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--pp-ink); margin-bottom:6px; }
.pp-rental-head span{ font-weight:600; text-transform:none; letter-spacing:0; color:var(--pp-muted); }
.pp-rental-rows{ margin-top:2px; }
.pp-rental-row{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0; border-top:1px solid var(--pp-line); font-size:15px; color:#3a4654; }
.pp-rental-row:first-child{ border-top:0; }
.pp-rental-row b{ font-weight:700; font-size:16px; color:var(--pp-ink); white-space:nowrap; }
.pp-rental-row em{ display:inline-block; font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--pp-blue-d); background:rgba(27,165,221,.12); border-radius:20px; padding:2px 9px; margin-left:8px; vertical-align:middle; }
.pp-rental-note{ margin:14px 0 0; padding-top:12px; border-top:1px solid var(--pp-line); font-size:12.5px; line-height:1.55; color:var(--pp-muted); }

/* ============ 2. HIGHLIGHT PANELS ============ */
/* Full-screen panels. Default = stacked blocks (no-JS / mobile / reduced-motion fallback). */
.pp-panels{ background:#0a2230; padding:0; }
.pp-panel{ max-width:none; margin:0; border-radius:0; overflow:hidden; position:relative; min-height:100vh; background-color:#0c2233; }
.pp-panel-bg{ position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; background-repeat:no-repeat; transform-origin:center; }
.pp-panel::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,#0a1c2b 0%,rgba(10,28,43,.92) 30%,rgba(10,28,43,.55) 52%,rgba(10,28,43,.05) 80%); }
.pp-panel-inner{ position:relative; z-index:2; display:flex; align-items:center; min-height:100vh;
  max-width:1180px; margin:0 auto; padding:64px 40px; }

/* Pinned CROSSFADE mode (JS adds .pp-cross-on on desktop): the stage pins to the viewport and the
   panels dissolve through each other as you scroll, instead of scrolling past one another. */
.pp-panels.pp-cross-on{ height:calc(var(--pp-n,3) * 100vh); }
.pp-cross-on .pp-panels-stage{ position:sticky; top:0; height:100vh; overflow:hidden; }
.pp-cross-on .pp-panel{ position:absolute; inset:0; min-height:0; height:100vh; opacity:0; will-change:opacity, transform; }
.pp-cross-on .pp-panel[data-pp-first]{ opacity:1; }
.pp-cross-on .pp-panel-inner{ min-height:0; height:100vh; }
.pp-cross-on .pp-panel-bg{ will-change:transform; }
.pp-panel-copy{ max-width:760px; color:#eaf4fb; }
.pp-panel-kicker{ display:inline-block; font-size:13px; font-weight:800; letter-spacing:.14em; color:var(--pp-blue); border:1px solid rgba(27,165,221,.5); border-radius:30px; padding:4px 12px; margin-bottom:20px; }
.pp .pp-panel-title{ color:#fff; font-size:clamp(38px,5vw,74px); line-height:1.05; letter-spacing:-.5px; margin-bottom:20px; text-shadow:0 2px 14px rgba(0,8,14,.6); }
.pp-panel-body{ font-size:18px; max-width:440px; color:#cfe2ee; margin:0; text-shadow:0 1px 6px rgba(0,8,14,.6); }

/* Full-width product video band (autoplay-muted loop, Apple-style). */
.pp-video{ position:relative; width:100%; background:#06121b; overflow:hidden; line-height:0; }
.pp-video-el{ display:block; width:100%; height:auto; background:#06121b; }
.pp-video-cap{ position:absolute; left:0; right:0; top:40px; text-align:center; z-index:2; pointer-events:none; line-height:1.3; }
.pp-video-cap h2{ color:#fff; font-size:32px; letter-spacing:-.3px; margin:8px 0 0; text-shadow:0 2px 16px rgba(0,0,0,.55); }
@media (max-width:680px){ .pp-video-cap h2{ font-size:22px; } .pp-video-cap{ top:22px; } }

/* per-section reveal: kicker -> title -> body stagger in as each panel scrolls into view.
   Hidden state is gated behind .pp-anim (added by JS) so no-JS visitors still see the text. */
.pp-anim .pp-reveal .pp-panel-kicker, .pp-anim .pp-reveal .pp-panel-title, .pp-anim .pp-reveal .pp-panel-body{
  opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.pp-reveal.is-in .pp-panel-kicker{ opacity:1; transform:none; transition-delay:.05s; }
.pp-reveal.is-in .pp-panel-title{ opacity:1; transform:none; transition-delay:.14s; }
.pp-reveal.is-in .pp-panel-body{ opacity:1; transform:none; transition-delay:.23s; }
@media (prefers-reduced-motion:reduce){
  .pp-reveal .pp-panel-kicker, .pp-reveal .pp-panel-title, .pp-reveal .pp-panel-body{ opacity:1; transform:none; transition:none; } }

/* ============ 3. ACCORDIONS ============ */
/* Accordions — larger, more presence to balance the full-screen sections above/below. */
.pp-acc-wrap{ max-width:1140px; margin:0 auto; padding:84px 24px; }
.pp-acc{ border:1px solid var(--pp-line); border-radius:16px; margin-bottom:18px; overflow:hidden; background:#fff; }
/* Section headings are real <h2> for SEO (client/Results Repeat 2026-08-12); the <h2> only wraps the
   toggle button, so neutralize its default margins/sizing and let the button keep its own styling. */
.pp-acc-h{ margin:0; padding:0; font:inherit; }
.pp-acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; background:#fff; border:0; cursor:pointer;
  padding:28px 32px; font-size:23px; font-weight:700; color:var(--pp-ink); text-align:left; }
.pp-acc-kicker{ position:relative; padding-left:20px; }
.pp-acc-kicker::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:7px; height:24px; border-radius:4px; background:var(--pp-grad); }
.pp-acc-icon{ position:relative; width:20px; height:20px; flex:0 0 20px; }
.pp-acc-icon::before,.pp-acc-icon::after{ content:""; position:absolute; background:var(--pp-blue); border-radius:2px; transition:.2s; }
.pp-acc-icon::before{ left:0; top:9px; width:20px; height:2px; }
.pp-acc-icon::after{ left:9px; top:0; width:2px; height:20px; }
.pp-acc.is-open .pp-acc-icon::after{ transform:scaleY(0); }
.pp-acc-body{ display:none; padding:4px 32px 32px; }
.pp-acc.is-open .pp-acc-body{ display:block; }

/* Specs — clean card grid (replaces the striped table). */
.pp-specs{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 16px; }
.pp-spec{ display:flex; flex-direction:column; gap:3px; padding:15px 18px; border:1px solid var(--pp-line); border-radius:12px; background:var(--pp-bg); }
.pp-spec-k{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--pp-muted); }
.pp-spec-v{ font-size:16px; font-weight:600; color:var(--pp-ink); }

/* Q&A — categorized, bulleted, expandable, with optional product links. */
.pp-qa-cat{ font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--pp-blue-d); margin:26px 0 4px; }
.pp-qa-cat:first-child{ margin-top:2px; }
.pp-qa-list{ list-style:none; margin:0; padding:0; }
.pp-qa-item{ border-bottom:1px solid var(--pp-line); }
.pp-qa-item:last-child{ border-bottom:0; }
.pp-qa-q{ width:100%; position:relative; display:block; background:none; border:0; cursor:pointer; text-align:left;
  padding:17px 34px 17px 24px; font-size:17px; font-weight:600; color:var(--pp-ink);
  white-space:normal; overflow-wrap:break-word; }   /* buttons don't wrap by default -> text ran off / under the +/- icon on mobile (client 2026-07-17) */
.pp-qa-q::before{ content:""; position:absolute; left:3px; top:26px; width:7px; height:7px; border-radius:50%; background:var(--pp-blue); }
.pp-qa-q::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:400; color:var(--pp-blue); }
.pp-qa-item.is-open .pp-qa-q::after{ content:"\2013"; }
.pp-qa-a{ display:none; padding:0 30px 20px 24px; }
.pp-qa-item.is-open .pp-qa-a{ display:block; }
.pp-qa-a p{ margin:0; font-size:15.5px; line-height:1.6; color:#3a4654; }
.pp-qa-link{ display:inline-block; margin-top:10px; font-size:14px; font-weight:700; color:var(--pp-blue-d); text-decoration:none; }
.pp-qa-link:hover{ text-decoration:underline; }

.pp-manuals{ list-style:none; margin:0; padding:6px 0 0; }
.pp-manuals li{ padding:14px 0; border-bottom:1px solid var(--pp-line); font-size:16px; }
.pp-manuals li:last-child{ border-bottom:0; }
.pp-dl{ color:var(--pp-blue-d); font-weight:600; text-decoration:none; }
.pp-dl::before{ content:"\2B07 "; }
.pp-manuals em{ color:var(--pp-muted); font-size:13px; font-style:italic; margin-left:6px; }

/* ============ 4. SOCIAL FEED — full-width, larger cards, social-platform feel ============ */
.pp-social{ max-width:none; margin:0; padding:8px clamp(20px,3.5vw,60px) 88px; text-align:center; }
.pp-social-head{ max-width:760px; margin:0 auto; }
.pp-social-head h2{ font-size:32px; margin:8px 0 6px; }
.pp-social-head p{ color:var(--pp-muted); margin:0 0 36px; font-size:16px; }
/* horizontal carousel: scroll-snap track + left/right arrows */
.pp-social-carousel{ position:relative; }
.pp-social-row{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pp-social-row::-webkit-scrollbar{ display:none; }
.pp-social-card{ flex:0 0 clamp(260px,27vw,330px); scroll-snap-align:start; border:1px solid var(--pp-line); border-radius:16px; overflow:hidden; background:#fff; text-align:left; box-shadow:0 8px 24px -14px rgba(0,38,54,.3); }
.pp-social-nav{ position:absolute; top:38%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:50%; border:1px solid var(--pp-line); background:#fff; color:var(--pp-ink); font-size:26px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 20px -8px rgba(0,38,54,.45); transition:background .15s, opacity .15s, box-shadow .15s; }
.pp-social-nav:hover{ background:#eef3f8; }
.pp-social-prev{ left:-6px; }
.pp-social-next{ right:-6px; }
.pp-social-nav[disabled]{ opacity:0; pointer-events:none; }
@media (max-width:680px){ .pp-social-card{ flex-basis:78vw; } .pp-social-prev{ left:2px; } .pp-social-next{ right:2px; } }
.pp-social-img{ display:block; position:relative; aspect-ratio:1/1; background-size:cover; background-position:center; }
.pp-social-img .pp-social-ico{ position:absolute; top:12px; left:12px; width:30px; height:30px; border-radius:8px; background:rgba(0,0,0,.42); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.pp-social-body{ padding:16px 18px 18px; }
.pp-social-handle{ display:inline-block; font-size:13px; font-weight:700; color:var(--pp-ink); text-decoration:none; }
.pp-social-handle:hover{ color:var(--pp-blue-d); text-decoration:underline; }
.pp-social-cap{ margin:6px 0 12px; font-size:14.5px; line-height:1.5; color:#3a4654; }
.pp-social-link{ font-size:14px; font-weight:700; color:var(--pp-blue-d); text-decoration:none; }
.pp-social-link:hover{ text-decoration:underline; }
.pp-social-note{ margin-top:24px; font-size:13px; color:var(--pp-muted); font-style:italic; }

/* ============ 5. DEMO MODAL ============ */
.pp-demo[hidden]{ display:none; }
.pp-demo{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:24px; }
.pp-demo-overlay{ position:absolute; inset:0; background:rgba(2,14,22,.62); backdrop-filter:blur(3px); }
.pp-demo-card{ position:relative; width:min(940px,100%); max-height:92vh; overflow:auto; background:#fff; border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.5); animation:ppPop .26s ease; }
@keyframes ppPop{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.pp-demo-x{ position:absolute; right:14px; top:12px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; background:rgba(255,255,255,.85); font-size:24px; line-height:1; color:var(--pp-ink); cursor:pointer; }
.pp-demo-x:hover{ background:#eef3f7; }
.pp-demo-grid{ display:grid; grid-template-columns:.82fr 1.18fr; }
.pp-demo-aside{ background:linear-gradient(160deg,var(--pp-navy) 0%, var(--pp-navy2) 100%); color:#eaf4fb; padding:34px 30px; border-radius:20px 0 0 20px; }
.pp-demo-aside h3{ color:#fff; font-size:23px; margin:12px 0 18px; }
.pp-demo-points{ list-style:none; margin:0 0 22px; padding:0; }
.pp-demo-points li{ position:relative; padding:8px 0 8px 26px; font-size:15px; color:#cfe2ee; border-bottom:1px solid rgba(255,255,255,.08); }
.pp-demo-points li::before{ content:"✓"; position:absolute; left:0; top:8px; color:var(--pp-blue); font-weight:700; }
.pp-demo-trust{ font-size:13.5px; color:#9fd4f2; }
.pp-demo-trust strong{ font-size:20px; color:#fff; }

.pp-demo-form{ padding:30px 32px 26px; }
.pp-demo-form h4{ font-size:22px; margin-bottom:18px; }
.pp-demo-formwrap{ padding:30px 32px 30px; min-width:0; }
.pp-demo-formwrap .pp-demo-h{ font-size:22px; margin:0 0 4px; color:var(--pp-ink,#221E1F); }
.pp-demo-formwrap .pp-demo-sub{ font-size:13.5px; color:#5a6b78; margin:0 0 16px; }
#pp-hs-target{ min-height:120px; }
.pp-demo-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.pp-f{ display:flex; flex-direction:column; gap:5px; }
.pp-f-wide{ grid-column:1 / -1; }
.pp-f span{ font-size:13px; font-weight:600; color:var(--pp-ink); }
.pp-f span em{ color:#e0563f; font-style:normal; }
.pp-f input,.pp-f select,.pp-f textarea{ font:inherit; font-size:14.5px; padding:11px 13px; border:1px solid #cfd9e2; border-radius:10px; background:#fff; color:var(--pp-text); transition:.15s; }
.pp-f input:focus,.pp-f select:focus,.pp-f textarea:focus{ outline:0; border-color:var(--pp-blue); box-shadow:0 0 0 3px rgba(27,165,221,.18); }
.pp-f input.pp-err,.pp-f select.pp-err{ border-color:#e0563f; box-shadow:0 0 0 3px rgba(224,86,63,.16); }
.pp-consent{ display:flex; align-items:flex-start; gap:9px; margin:16px 0 14px; font-size:13.5px; color:#3a4654; }
.pp-demo-submit{ width:100%; }
.pp-demo-fine{ margin:12px 0 0; font-size:12px; color:var(--pp-muted); font-style:italic; text-align:center; }
.pp-demo-done{ grid-column:1 / -1; text-align:center; padding:54px 30px; }
.pp-demo-check{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--pp-grad); color:#fff; font-size:32px; display:flex; align-items:center; justify-content:center; }
.pp-demo-done h4{ font-size:22px; margin-bottom:10px; }
.pp-demo-done p{ color:var(--pp-muted); max-width:420px; margin:0 auto 22px; }

/* The scrubber "clean sweep" robot animation across the sticky nav was removed per client
   feedback (Brandon, 2026-07-15: distracting). Its CSS/JS is gone; the sticky nav remains. */

/* ============ INTERACTIVE VIEWER: 360 spin + key-feature hotspots (flagship models) ============
   ⚠ GEOMETRY IS LOAD-BEARING. The hotspot x/y percentages in class-robotics-product.php::viewer()
   were tuned against the demo viewer's canvas: aspect-ratio 3/2 with the image at
   object-fit:contain; padding:5% 7% 8%. Change the aspect or padding and every dot drifts. */
.pp-vstage{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:3/2;
  background:radial-gradient(120% 100% at 50% 16%, #f4f6f8 0%, #d9dee3 100%);
  box-shadow:0 1px 2px rgba(20,26,32,.06),0 12px 34px -12px rgba(20,26,32,.22);
  touch-action:pan-y; user-select:none; cursor:grab; }
.pp-vstage.is-grabbing{ cursor:grabbing; }
.pp-vstage.is-gallery{ cursor:default; }
/* The theme/Elementor ship a global `img{max-width:100%;height:auto}` that out-specifies a single
   class and collapses height:100% -> auto, which makes the frame overflow the 3:2 stage and throws
   every hotspot off the machine. Force the box explicitly. Verified via getBoundingClientRect. */
.pp .pp-vstage .pp-vimg{ width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; }
.pp-vimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:5% 7% 8%;
  filter:drop-shadow(0 24px 26px rgba(23,26,30,.20)); pointer-events:none; -webkit-user-drag:none; user-select:none; }
.pp-vhide{ display:none !important; }

/* hotspots */
.pp-vhs{ position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:0;
  padding:0; cursor:pointer; z-index:5; background:rgba(255,255,255,.92); box-shadow:0 2px 8px rgba(20,26,32,.28);
  display:grid; place-items:center; transition:transform .15s ease; }
.pp-vhs::before{ content:""; position:absolute; inset:0; border-radius:50%; animation:ppPulse 2.4s infinite; }
.pp-vhs i{ width:11px; height:11px; border-radius:50%; background:#1BA5DD; display:block; }
.pp-vhs:hover, .pp-vhs:focus-visible{ transform:scale(1.16); outline:none; }
.pp-vhs.is-on i{ background:#7ba300; }
.pp .pp-vhs:hover, .pp .pp-vhs:focus, .pp .pp-vhs:active{ background:rgba(255,255,255,.92) !important; }
@keyframes ppPulse{ 0%{ box-shadow:0 0 0 0 rgba(164,214,0,.5); } 70%{ box-shadow:0 0 0 13px rgba(164,214,0,0); } 100%{ box-shadow:0 0 0 0 rgba(164,214,0,0); } }
@media (prefers-reduced-motion:reduce){ .pp-vhs::before{ animation:none; } }

/* feature popover, anchored beside the clicked dot */
.pp-vpop{ position:absolute; z-index:9; width:250px; max-width:74%; background:#fff; border:1px solid #e5e9ec;
  border-radius:14px; box-shadow:0 6px 30px -6px rgba(20,26,32,.38); padding:15px 16px 14px; animation:ppPopIn .16s ease; }
@keyframes ppPopIn{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .pp-vpop{ animation:none; } }
.pp-vpop-cat{ font-size:10.5px; font-weight:700; letter-spacing:.06em; color:#8a929b; text-transform:uppercase; margin:0 22px 0 0; }
.pp-vpop-title{ font-size:15.5px; font-weight:700; line-height:1.2; margin:3px 0 0; color:#171a1e; }
.pp-vpop-copy{ font-size:12.75px; line-height:1.45; color:#5c646d; margin:7px 0 0; }
.pp-vpop-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:11px; }
.pp-vpop-count{ font-size:11.5px; color:#8a929b; font-variant-numeric:tabular-nums; }
.pp-vpop-arrows{ display:flex; gap:6px; }
.pp-vpop-arrows button{ width:28px; height:28px; border-radius:50%; border:1.5px solid #e5e9ec; background:#fff;
  cursor:pointer; display:grid; place-items:center; color:#171a1e; }
/* The theme's global `button{padding:8px 16px}` stretched these into ovals (client 2026-07-21).
   Force the circular box and kill the inherited padding (scoped + !important to win specificity). */
.pp .pp-vpop-arrows button{ width:28px !important; height:28px !important; min-width:0 !important;
  padding:0 !important; box-sizing:border-box !important; border-radius:50% !important; flex:0 0 auto; }
.pp .pp-vpop-arrows button:hover, .pp .pp-vpop-arrows button:focus{ border-color:#171a1e; background:#fff !important; color:#171a1e !important; }
.pp-vpop-x{ position:absolute; top:9px; right:9px; width:22px; height:22px; border:0; background:transparent;
  cursor:pointer; color:#8a929b; font-size:17px; line-height:1; border-radius:50%; }
.pp .pp-vpop-x:hover, .pp .pp-vpop-x:focus{ background:#f2f4f6 !important; color:#171a1e !important; }

/* spin affordances */
/* "Drag to spin" chip sits in the TOP-LEFT corner (over the empty side margin) so it never
   overlays the centered machine — spin-mode-only UI, so this does not touch hotspot geometry.
   The old centered caption ("Full studio turntable…") was removed per client (Brandon 2026-07-20). */
.pp-vbadge{ position:absolute; left:16px; top:16px; display:flex; align-items:center; gap:8px;
  z-index:6; background:rgba(23,26,30,.82); color:#fff; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; }
.pp-vticks{ position:absolute; left:50%; bottom:82px; transform:translateX(-50%); display:flex; gap:5px; z-index:6; }
.pp-vticks b{ width:16px; height:3px; border-radius:2px; background:rgba(23,26,30,.16); }
.pp-vticks b.on{ background:#7ba300; }
.pp-vlabel{ position:absolute; left:16px; top:16px; z-index:6; background:rgba(23,26,30,.82); color:#fff;
  font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; }
.pp-vbadge, .pp-vticks, .pp-vlabel{ pointer-events:none; }

/* mode pills */
.pp-vpills{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:6; display:flex; gap:8px;
  background:rgba(255,255,255,.7); backdrop-filter:blur(6px); padding:5px; border-radius:999px; box-shadow:0 2px 10px rgba(20,26,32,.16); }
.pp-vpills button{ border:0; background:transparent; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600;
  color:#5c646d; padding:8px 16px; border-radius:999px; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.pp .pp-vpills button.is-on{ background:#171a1e !important; color:#fff !important; }
.pp .pp-vpills button:hover:not(.is-on){ background:transparent !important; color:#171a1e !important; }
.pp-vhint{ font-size:12.5px; color:#8a929b; margin:10px 2px 0; }

/* thumbnail captions (viewer gallery) */
.pp-thumb{ position:relative; }
.pp-thumb-cap{ position:absolute; left:0; right:0; bottom:0; padding:5px 7px; font-size:10.5px; font-weight:600;
  color:#fff; text-align:left; background:linear-gradient(transparent, rgba(0,0,0,.55)); border-radius:0 0 10px 10px; }
.pp-thumb-scene img{ object-fit:cover !important; padding:0 !important; }

@media (max-width:760px){ .pp-vpills button{ padding:8px 11px; font-size:12px; } }

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  /* stacked order: title -> image -> everything else (client 2026-07-17 / 2026-07-20) */
  .pp-info{ grid-template-columns:1fr; grid-template-areas:"head" "gallery" "buy"; gap:0; }
  .pp-head{ margin-bottom:14px; }
  .pp-gallery{ position:static; margin-bottom:24px; }
  .pp-demo-grid{ grid-template-columns:1fr; }
  .pp-demo-aside{ border-radius:20px 20px 0 0; }
  .pp-social-row{ grid-template-columns:repeat(2,1fr); }
  .pp-acc-head{ font-size:20px; padding:24px 24px; }
  .pp-acc-body{ padding:4px 24px 26px; }
}
@media (max-width:680px){
  .pp-title{ font-size:30px; }
  .pp-panel-inner{ padding:34px 24px; min-height:100svh; align-items:flex-end; }
  .pp-panel,.pp-panel-inner{ min-height:100svh; }
  .pp-panel::before{ background:linear-gradient(180deg,rgba(12,34,51,.15) 0%,rgba(12,34,51,.55) 42%,#0a1c2b 92%); }
  .pp-video-el{ min-height:240px; }
  .pp-demo-fields{ grid-template-columns:1fr; }
  .pp-specs{ grid-template-columns:1fr; }
  .pp-social-row{ grid-template-columns:1fr; }
  .pp-ctas{ flex-direction:column; }         /* 3 CTAs stack full-width instead of overflowing (client 2026-07-17) */
  .pp-ctas .pp-btn{ width:100%; }
  .pp-thumbs{ grid-template-columns:repeat(3,minmax(0,1fr)); }   /* 3-up on phones so they don't run off the edge */
}