/* vs-theme.css — compiled by scripts/build_theme.py. Edit the sources, not this file. */

/* ===== vs-global ===== */
:root{--vs-teal:#004F59;--vs-teal-dk:#003d46;--vs-teal-lt:#006875;--vs-green:#aab75b;--vs-green-dk:#7a8d3a;--vs-dark:#1a2e31;--vs-grey:#545456;--vs-cream:#f8f6f3;--vs-soft:#e6efef;--vs-yellow:#f5c400;--vs-radius:10px;}

.elementor-widget-html{width:100%!important;}

.elementor-widget-wrap{width:100%!important;}

/* contain the hero's absolute gradient overlays so they can't bleed into the
   sections below (e.g. go-cashless, where no per-page .vs-hero base set this) */
.vs-hero{position:relative;overflow:hidden;}
.vs-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,79,89,0.9) 25%,rgba(0,79,89,0) 75%);pointer-events:none;z-index:0;}

.vs-hero::after{content:'';position:absolute;top:0;left:0;right:0;height:350px;background:linear-gradient(180deg,rgba(0,79,89,0.92) 0%,rgba(0,79,89,0) 100%);pointer-events:none;z-index:0;}

.vs-hero-content{flex:1;max-width:560px;position:relative;z-index:1;}

.vs-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(170,183,91,0.15);border:1px solid rgba(170,183,91,0.35);border-radius:20px;padding:6px 14px;font-size:12px;font-weight:600;color:#c8d68a;letter-spacing:0.3px;margin-bottom:20px;font-family:'Inter',sans-serif;}

.vs-hero h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:900;color:#fff;letter-spacing:-1.5px;line-height:1.06;margin-bottom:22px;}

.vs-hero h1 em{color:var(--vs-green);font-style:normal;}

.vs-hero-sub{font-size:1.05rem;color:rgba(255,255,255,0.72);line-height:1.75;max-width:500px;margin-bottom:36px;}

.vs-hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;}

.vs-btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.35);padding:14px 28px;font-size:14px;}

.vs-btn-ghost:hover{border-color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.07);}

.vs-hero-trust{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:12px;color:rgba(255,255,255,0.7);font-family:'Inter',sans-serif;font-weight:600;}

.vs-hero-trust span{display:flex;align-items:center;gap:6px;}

.vs-hero-trust i{color:var(--vs-green);font-size:11px;}

.vs-trust-strip{background:var(--vs-dark);border-bottom:1px solid rgba(255,255,255,0.07);padding:0;width:100%;box-sizing:border-box;}

.vs-trust-inner{display:flex;flex-wrap:wrap;justify-content:center;}

.vs-trust-item{display:flex;align-items:center;gap:10px;padding:14px 22px;border-right:1px solid rgba(255,255,255,0.07);border-bottom:1px solid rgba(255,255,255,0.05);white-space:nowrap;flex:1 1 auto;min-width:180px;max-width:260px;justify-content:center;}

.vs-trust-item i{color:var(--vs-green);font-size:14px;flex-shrink:0;}

.vs-trust-item span{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:rgba(255,255,255,0.72);}

.vs-iso-strip{background:var(--vs-dark);padding:40px 48px;display:flex;align-items:center;width:100%;box-sizing:border-box;}

.vs-iso-inner{display:flex;align-items:center;gap:48px;width:100%;max-width:1100px;margin:0 auto;}

.vs-iso-text{flex:2;}

.vs-iso-text .vs-eyebrow{color:rgba(255,255,255,0.45);margin-bottom:8px;}

.vs-iso-text h2{color:#fff;font-size:clamp(1.3rem,2.2vw,1.75rem);margin-bottom:8px;font-family:'Inter',sans-serif;font-weight:800;}

.vs-iso-text p{color:rgba(255,255,255,0.55);font-size:0.92rem;max-width:480px;line-height:1.7;}

.vs-iso-logos{flex:1;display:flex;align-items:center;justify-content:center;gap:24px;}

.vs-iso-logos img{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 3px 10px rgba(0,0,0,0.4));}

.vs-iso-divider{width:1px;height:70px;background:rgba(255,255,255,0.15);}

.vs-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;display:block;margin-bottom:10px;font-family:'Inter',sans-serif;}

.vs-eyebrow-teal{color:var(--vs-teal);}

.vs-eyebrow-green{color:var(--vs-green-dk);}

.vs-eyebrow-white{color:rgba(255,255,255,0.45);}

.vs-section-heading{font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:800;letter-spacing:-0.8px;line-height:1.1;margin-bottom:16px;font-family:'Inter',sans-serif;}

.vs-section-sub{font-size:1rem;line-height:1.7;color:var(--vs-grey);max-width:600px;}

.vs-centered{text-align:center;}

.vs-centered .vs-section-sub{margin:0 auto;}

.vs-step-num{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:1.3rem;font-weight:900;color:#fff;margin:0 auto 20px;}

.vs-step-num.accent{background:var(--vs-green);}

.vs-step-icon{font-size:2rem;margin-bottom:16px;display:block;}

.vs-faq-list{width:100%;max-width:740px;display:flex;flex-direction:column;gap:0;margin-top:40px;}

.vs-faq-item{border-bottom:1px solid rgba(0,79,89,0.12);overflow:hidden;}

.vs-faq-item:first-child{border-top:1px solid rgba(0,79,89,0.12);}

.vs-faq-q{width:100%;background:transparent!important;border:none;cursor:pointer;padding:20px 0;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;color:var(--vs-teal)!important;transition:color 0.15s;user-select:none;}

.vs-faq-q:hover{color:var(--vs-teal-lt)!important;}

.vs-faq-q.open{color:var(--vs-teal)!important;}

.vs-faq-a{max-height:0;overflow:hidden;transition:max-height 0.38s cubic-bezier(0.4,0,0.2,1),opacity 0.28s ease;opacity:0;}

.vs-faq-item.open .vs-faq-a{opacity:1;}

.vs-cta-close{background:var(--vs-dark);padding:88px 48px;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;box-sizing:border-box;}

.vs-cta-close h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:900;color:#fff;letter-spacing:-1px;line-height:1.1;margin-bottom:16px;font-family:'Inter',sans-serif;}

.vs-cta-close p{font-size:1rem;color:rgba(255,255,255,0.60);line-height:1.75;margin-bottom:36px;max-width:540px;}

/* ===== Floating enquiry form — single shared component (markup in footer chrome).
   Desktop: 300px panel bottom-right + persistent tab. Mobile: full-width square
   action bar + FULL-SCREEN slide-up sheet (app-like). ===== */
.vs-form-panel{position:fixed;right:20px;bottom:0;width:300px;max-height:calc(100vh - 130px);background:var(--vs-teal);border-radius:10px 10px 0 0;box-shadow:0 0 19px rgba(0,0,0,0.22);display:flex;flex-direction:column;z-index:800;transform:translateY(110vh);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease;opacity:0;pointer-events:none;}
.vs-form-panel.fp-visible{transform:translateY(0);opacity:1;pointer-events:auto;}
.vs-form-panel::before{content:'';display:block;width:36px;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;margin:12px auto 0;flex-shrink:0;}
.vs-form-panel-inner{overflow-y:auto;overflow-x:hidden;padding:12px 24px 0;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.2) transparent;}
.vs-form-label{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.55);text-align:center;display:block;margin-bottom:6px;}
.vs-form-panel h3{font-family:'Inter',sans-serif;font-size:1rem;font-weight:800;color:#fff;text-align:center;margin-bottom:16px;}
/* (removed: legacy enquiry-panel WhatsApp mini-bot CSS — superseded by .vs-hub comms hub) */
/* BizOpp pages: WhatsApp buttons go darker red instead of teal. The floating panel sits OUTSIDE the
   .biz wrapper, so match on the page (body.biz or any .biz descendant) with literal hex (the --red
   vars live on .biz, which the panel can't see). Green WhatsApp logo stays. */
.biz .wa-btn,.biz .wa-btn.on-dark{background:#8f1c2d;border-color:rgba(255,255,255,.25);}
.biz .wa-btn:hover,.biz .wa-btn.on-dark:hover{background:#a81f33;border-color:rgba(255,255,255,.4);}
/* === BizOpp pages = RED / WHITE / BLACK only (no teal) === remap the teal accent vars to red and
   neutralise the dark tint, so every var(--vs-teal*) usage (nav accents, links, toggle, badges…)
   turns red across the page. WhatsApp brand-green logos (#3ad175) are literal and stay. */
body.biz,body:has(.biz){--vs-teal:#b3202c;--vs-teal-lt:#e8616a;--vs-teal-dk:#7c1622;--vs-dark:#201d1e;--vs-green:#c1272d;--vs-green-dk:#8f1c2d;}
/* the olive --vs-green is now red on biz; keep ONLY the WhatsApp brand-green icons green */
body.biz .vsn-util.wa,body:has(.biz) .vsn-util.wa,body.biz .vsn.solid .vsn-util.wa,body:has(.biz) .vsn.solid .vsn-util.wa{color:#25a35a!important;}
/* enquiry panel: charcoal (black), not the remapped red; submit + focus go red (were green) */
body.biz #vs-form-panel,body:has(.biz) #vs-form-panel{background:#1b1a1c;}
body.biz .vs-form-panel-inner .ff_submit_btn_wrapper,body:has(.biz) .vs-form-panel-inner .ff_submit_btn_wrapper{background:#1b1a1c;}
body.biz .vs-form-panel-inner .ff-btn,body.biz .vs-form-panel-inner .ff_submit_btn_wrapper button,
body:has(.biz) .vs-form-panel-inner .ff-btn,body:has(.biz) .vs-form-panel-inner .ff_submit_btn_wrapper button{background:#c1272d!important;}
body.biz .vs-form-panel-inner .ff-el-form-control:focus,body:has(.biz) .vs-form-panel-inner .ff-el-form-control:focus{border-color:#c1272d!important;}
/* specials condition badges → red/black (were green/teal/amber) */
.biz .sp-cond.new{background:#c1272d;}.biz .sp-cond.refurb{background:#201d1e;}.biz .sp-cond.demo{background:#7c1622;}
.vs-form-panel-inner .ff-el-form-control{width:100%!important;background:rgba(255,255,255,0.10)!important;border:1px solid rgba(255,255,255,0.20)!important;border-radius:5px!important;padding:9px 11px!important;color:#fff!important;}
/* ===== Comms hub: 3-tab header (Enquiry / WhatsApp / Social) on the shared panel ===== */
.vs-hub-tablbl{text-align:center;padding:15px 0 10px;}
.vs-hub-tabs{display:flex;background:rgba(0,0,0,.14);margin:0 0 12px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.10);}
.vs-hub-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 2px 10px;color:rgba(255,255,255,.6);font:600 11px 'Inter',sans-serif;cursor:pointer;transition:color .15s;}
.vs-hub-tab i{font-size:15px;}
.vs-hub-tab .fa-whatsapp{color:#3ad175;}
.vs-hub-tab:hover{color:#fff;}
.vs-hub-tab.on{color:#fff;border-bottom-color:var(--vs-green);}
.vs-hub-view[hidden]{display:none;}
.vs-hub-wa-sub{color:rgba(255,255,255,.7);font:500 12px 'Inter',sans-serif;line-height:1.5;margin:0 0 10px;}
.vs-hub-opts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px;}
.vs-hub-opt{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:7px;padding:9px 8px;color:#fff;font:600 12px 'Inter',sans-serif;cursor:pointer;text-align:center;transition:.15s;}
.vs-hub-opt:hover{background:rgba(255,255,255,.18);}
.vs-hub-opt.on{background:rgba(170,183,91,.24);border-color:var(--vs-green);}
.vs-hub-wa-name,.vs-hub-wa-msg{width:100%;box-sizing:border-box;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:7px;padding:9px 11px;color:#fff;font:500 13px 'Inter',sans-serif;margin-bottom:8px;}
.vs-hub-wa-name::placeholder,.vs-hub-wa-msg::placeholder{color:rgba(255,255,255,.6);}
.vs-hub-wa-name:focus,.vs-hub-wa-msg:focus{outline:0;border-color:var(--vs-green);}
.vs-hub-wa-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;background:var(--vs-green);color:#16302c;border:0;border-radius:9px;padding:12px;font:700 14px 'Inter',sans-serif;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.28);transition:background .15s,transform .15s;margin-bottom:14px;}
.vs-hub-wa-go:hover{background:var(--vs-green-dk);transform:translateY(-1px);}
.vs-hub-wa-go i{color:#fff;font-size:1.15em;}
.vs-hub-view[data-view="social"]{padding-bottom:14px;}
.vs-hub-soc{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.10);text-decoration:none;}
.vs-hub-soc:last-child{border-bottom:0;}
.vs-hub-soc i{font-size:18px;width:24px;text-align:center;color:var(--vs-green);}
.vs-hub-soc b{display:block;color:#fff;font:600 13px 'Inter',sans-serif;}
.vs-hub-soc em{color:rgba(255,255,255,.55);font:400 11px 'Inter',sans-serif;font-style:normal;}
.vs-hub-soc-contact i{color:rgba(255,255,255,.7);}
textarea.vs-hub-wa-msg{resize:none;line-height:1.4;height:auto;font-family:'Inter',sans-serif;}
/* split FluentForm radio / checkbox option groups into 2 columns inside the hub */
.vs-form-panel-inner .ff-el-input--content:has(.ff-el-form-check-radio),
.vs-form-panel-inner .ff-el-input--content:has(.ff-el-form-check-checkbox),
.vs-form-panel-inner .ff-el-input--content:has(input[type="radio"]),
.vs-form-panel-inner .ff-el-input--content:has(input[type="checkbox"]){display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;}
/* X close: hide when the panel is locked open (lead pages past the hero — can't close) */
.vs-form-panel.fp-locked .vs-form-close{display:none;}
.vs-form-panel-inner label{font-size:11px!important;font-weight:600!important;color:rgba(255,255,255,0.6)!important;font-family:'Roboto',sans-serif!important;}
.vs-form-panel-inner .ff-btn,.vs-form-panel-inner .ff_submit_btn_wrapper button{width:100%!important;background:var(--vs-green)!important;color:#16302c!important;padding:12px!important;font:700 14px 'Inter',sans-serif!important;border:none!important;border-radius:9px!important;box-shadow:0 5px 16px rgba(0,0,0,0.28)!important;}
/* BizOpp: red action buttons need white text (dark text only reads on the olive green) */
body.biz .vs-hub-wa-go,body:has(.biz) .vs-hub-wa-go,body.biz .vs-form-panel-inner .ff-btn,body:has(.biz) .vs-form-panel-inner .ff-btn{color:#fff!important;}
body .vs-form-panel-inner .ff_submit_btn_wrapper{position:sticky;bottom:0;background:var(--vs-teal);width:calc(100% + 48px)!important;box-sizing:border-box!important;margin:0 -24px 0;padding:12px 24px 18px;box-shadow:0 -8px 16px rgba(0,0,0,0.25);}
.vs-form-close{position:absolute;top:8px;right:10px;z-index:2;background:transparent;border:none;color:rgba(255,255,255,0.55);font-size:14px;cursor:pointer;padding:6px;line-height:1;}
.vs-form-close:hover{color:#fff;}
.vs-form-panel.fp-locked .vs-form-close{display:none;}
.vs-form-panel.fp-pulse{animation:vsFormPulse 0.7s ease 2;}
@keyframes vsFormPulse{0%,100%{box-shadow:0 0 19px rgba(0,0,0,0.22);}50%{box-shadow:0 0 0 5px rgba(170,183,91,0.95),0 0 34px rgba(170,183,91,0.5);}}
/* ---- COMPACT enquiry form: in-field labels + tighter rows (one field per row) ---- */
.vs-form-panel-inner .ff-el-group{margin-bottom:9px!important;}
/* in-field labels: hide the stacked label for text/email/tel (placeholder carries it; vs-app.js fills any
   missing); selects/radio/checkbox keep their labels (no placeholder to carry them) */
.vs-form-panel-inner .ff-el-group:has(input[type="text"],input[type="email"],input[type="tel"]) .ff-el-input--label{display:none!important;}
.vs-form-panel-inner .ff-el-form-control{padding:8px 11px!important;}
/* in-field labels are placeholders now — keep them legible (semi-transparent white, not faint grey) */
.vs-form-panel-inner .ff-el-form-control::placeholder{color:rgba(255,255,255,.7)!important;opacity:1!important;}
.vs-form-panel-inner .ff-el-input--label{margin-bottom:3px!important;}

/* desktop tab (persistent, bottom-right) */
#vs-tab-desktop{display:none;position:fixed;bottom:0;right:20px;z-index:801;background:var(--vs-green);color:#fff;padding:11px 22px;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border-radius:8px 8px 0 0;box-shadow:0 -3px 14px rgba(0,0,0,0.15);align-items:center;gap:8px;transition:background 0.2s,opacity 0.25s ease;white-space:nowrap;width:300px;justify-content:center;}
#vs-tab-desktop:hover{background:var(--vs-green-dk);}
@media(min-width:900px){#vs-tab-desktop{display:flex;}}
body.vs-form-open #vs-tab-desktop{opacity:0;pointer-events:none;}

/* mobile = full-width SQUARE action bar + FULL-SCREEN sheet (app-like) */
#vs-tab-mobile{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--vs-green);color:#16302c;padding:11px 24px;font-family:'Inter',sans-serif;font-size:18px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;align-items:center;justify-content:center;gap:10px;box-shadow:0 -4px 20px rgba(122,141,58,0.45);border-radius:0;}
@media(max-width:899px){
  #vs-tab-mobile{display:flex;}
  body.vs-form-open #vs-tab-mobile{display:none;}
  /* Bottom sheet: partial height, rounded top, drag handle; page dimmed behind (2026-07-03) */
  .vs-form-panel{display:flex!important;left:0;right:0;width:auto;height:auto;min-height:55dvh;max-height:88dvh;border-radius:18px 18px 0 0;z-index:10001;padding-bottom:env(safe-area-inset-bottom,0);}
  .vs-form-panel::before{width:44px;height:5px;background:rgba(255,255,255,.32);margin:10px auto 2px;}
  .vs-form-panel .vs-form-close{display:block!important;width:36px;height:36px;font-size:18px;top:10px;right:12px;}
  body.vs-form-open::after{content:'';position:fixed;inset:0;background:rgba(8,24,27,.5);z-index:10000;}
}
/* ===== WWBUT — "What We've Been Up To" authenticity gallery (universal) =====
   Real, unposed on-the-job photos from the team. A unified treatment masks the
   mixed amateur quality so the wall reads as one intentional set:
     - one fixed crop ratio (kills random framing)
     - one warm colour grade (kills exposure / white-balance mismatch)
     - film grain overlay (hides compression noise, binds the set)
     - dark caption scrim (calms busy backgrounds, carries the real place name)
   Lives in vs-global so it renders on BOTH legacy .vs-* pages and new .vsu-* pages.
   Tunable via --wwb-* custom props on .vsu-wwbut. Self-pads to the shell so it does
   not depend on the .vsu --pad token. */
.vsu-wwbut{--wwb-grade:saturate(.92) contrast(1.05) brightness(1.03) sepia(.07);--wwb-grain:.06;--wwb-ratio:4/5;--wwb-accent:var(--vs-green);
  padding-inline:max(var(--vs-gut,32px),calc((100% - var(--vs-shell,1400px)) / 2));
  padding-block:clamp(48px,7vw,96px);background:var(--vs-cream);box-sizing:border-box;width:100%;}
.vsu-wwbut .wwb-head{max-width:760px;margin:0 auto;text-align:center;}
.vsu-wwbut .wwb-head .eyebrow{font:700 11px/1 'Inter',sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--wwb-accent);display:block;margin-bottom:12px;}
.vsu-wwbut .wwb-head h2{font:800 clamp(1.8rem,3.5vw,2.5rem) 'Inter',sans-serif;letter-spacing:-.8px;line-height:1.1;margin:0 0 16px;color:var(--vs-dark);}
.vsu-wwbut .wwb-head p{font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.7;color:var(--vs-grey);max-width:62ch;margin:0 auto;}
.wwb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px;}
.wwb-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.wwb-grid,.wwb-grid.cols-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.wwb-grid,.wwb-grid.cols-3{grid-template-columns:1fr;}}
.wwb{position:relative;aspect-ratio:var(--wwb-ratio);border-radius:14px;overflow:hidden;background:var(--vs-dark);margin:0;
  box-shadow:0 2px 9px rgba(0,0,0,.08);transition:box-shadow .3s ease;}
/* Hover = shadow-lift + colour pop only. No transform anywhere near the rounded
   overflow box (neither parent translate nor img scale), which is what was making
   the corners flicker square mid-animation. */
.wwb:hover{box-shadow:0 9px 20px rgba(0,0,0,.15);}
.wwb img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--wwb-grade);transition:filter .5s;}
.wwb:hover img{filter:saturate(1) contrast(1) brightness(1) sepia(0);}
.wwb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,13,.04) 0%,transparent 30%,transparent 46%,rgba(8,12,13,.82) 100%);}
.wwb::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--wwb-grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.wwb-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 15px 14px;color:#fff;}
.wwb-cap b{display:block;font:700 13px/1.3 'Inter',sans-serif;}
.wwb-cap span{display:flex;align-items:center;gap:5px;font:600 11px 'Inter',sans-serif;color:rgba(255,255,255,.82);margin-top:4px;}
.wwb-cap i{color:var(--wwb-accent);font-size:10px;}
.wwb-tag{position:absolute;top:11px;left:11px;z-index:3;font:700 9.5px 'Inter',sans-serif;letter-spacing:1px;text-transform:uppercase;
  background:color-mix(in srgb,var(--vs-teal) 92%,transparent);color:#fff;padding:4px 9px;border-radius:5px;backdrop-filter:blur(2px);}
.wwb-grid .wwb.lead{grid-column:span 2;grid-row:span 2;}
@media(max-width:520px){.wwb-grid .wwb.lead{grid-column:span 1;grid-row:span 1;}}
@media(prefers-reduced-motion:reduce){.wwb,.wwb img{transition:none;}.wwb:hover{transform:none;}.wwb:hover img{transform:none;}}

/* WWBUT slim variant — a horizontal proof-strip for top-of-page (under the trust
   strip). Left-aligned heading + single scrollable filmstrip row at a short 3/2
   crop, so it reads as a quick "here's us, this week" ribbon rather than a full
   mosaic block. Mobile snaps one-and-a-bit tiles into view. */
.vsu-wwbut.strip{padding-block:clamp(30px,4vw,52px);}
.vsu-wwbut.strip .wwb-head{text-align:left;margin:0;max-width:none;}
.vsu-wwbut.strip .wwb-head h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:8px;}
.vsu-wwbut.strip .wwb-head p{margin:0;max-width:70ch;}
/* wrapper carries the page-fold shadows at each edge; the grid scrolls inside it */
.vsu-wwbut.strip .wwb-strip{position:relative;margin-top:22px;}
.vsu-wwbut.strip .wwb-strip::before,.vsu-wwbut.strip .wwb-strip::after{content:"";position:absolute;
  top:0;bottom:14px;width:46px;z-index:5;pointer-events:none;}
.vsu-wwbut.strip .wwb-strip::before{left:0;background:linear-gradient(90deg,
  rgba(8,12,13,.30) 0%,rgba(8,12,13,.12) 45%,transparent 100%);}
.vsu-wwbut.strip .wwb-strip::after{right:0;background:linear-gradient(270deg,
  rgba(8,12,13,.30) 0%,rgba(8,12,13,.12) 45%,transparent 100%);}
.vsu-wwbut.strip .wwb-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding:18px 0 24px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--vs-teal) 40%,transparent) transparent;}
.vsu-wwbut.strip .wwb-grid::-webkit-scrollbar{height:7px;}
.vsu-wwbut.strip .wwb-grid::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--vs-teal) 35%,transparent);border-radius:99px;}
.vsu-wwbut.strip .wwb{flex:0 0 auto;width:clamp(205px,23vw,288px);height:auto;aspect-ratio:3/2;scroll-snap-align:start;border-radius:12px;}
.vsu-wwbut.strip .wwb.lead{grid-column:auto;grid-row:auto;}
.vsu-wwbut.strip .wwb-cap{padding:13px 13px 12px;}
.vsu-wwbut.strip .wwb-cap b{font-size:12px;}
@media(max-width:520px){.vsu-wwbut.strip .wwb{width:80%;}}
/* mouse-friendly strip arrows (above the z-index:5 edge fades). Hidden at the ends + on touch. */
.vsu-wwbut.strip .wwb-strip .wwb-nav{position:absolute;top:42%;transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:#fff;color:var(--vs-dark);
  box-shadow:0 5px 18px rgba(0,0,0,.18);cursor:pointer;font:400 24px/1 system-ui,sans-serif;
  display:flex;align-items:center;justify-content:center;transition:opacity .2s,background .2s,color .2s;}
.vsu-wwbut.strip .wwb-strip .wwb-nav:hover{background:var(--wwb-accent);color:#fff;border-color:transparent;}
.vsu-wwbut.strip .wwb-prev{left:10px;}
.vsu-wwbut.strip .wwb-next{right:10px;}
.vsu-wwbut.strip .wwb-nav[disabled]{opacity:0;pointer-events:none;}
@media(max-width:700px){.vsu-wwbut.strip .wwb-nav{display:none;}}

/* WWBUT lightbox — click a tile to view the full, uncropped photo with prev/next.
   Markup + JS are injected once per page by build.py (after the strip). */
.wwb{cursor:pointer;}
.wwb-lb{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;
  background:rgba(8,10,11,.93);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:24px;}
.wwb-lb.open{display:flex;}
.wwb-lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;max-width:min(1100px,92vw);}
.wwb-lb-img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px;background:#000;
  box-shadow:0 24px 70px rgba(0,0,0,.55);}
.wwb-lb-cap{color:#fff;text-align:center;padding:15px 8px 0;}
.wwb-lb-cap b{display:block;font:700 15px 'Inter',sans-serif;}
.wwb-lb-cap span{display:inline-flex;align-items:center;gap:6px;font:600 12px 'Inter',sans-serif;color:rgba(255,255,255,.72);margin-top:5px;min-height:14px;}
.wwb-lb-cap i{color:var(--vs-green);}
.wwb-lb-count{color:rgba(255,255,255,.5);font:600 11px 'Inter',sans-serif;letter-spacing:1.5px;margin-top:9px;}
.wwb-lb-btn,.wwb-lb-close{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;border-radius:50%;}
.wwb-lb-btn:hover,.wwb-lb-close:hover{background:rgba(255,255,255,.24);}
.wwb-lb-btn{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:24px;line-height:1;}
.wwb-lb-prev{left:20px;}.wwb-lb-next{right:20px;}
.wwb-lb-close{top:20px;right:20px;width:46px;height:46px;font-size:20px;line-height:1;}
@media(max-width:600px){.wwb-lb{padding:12px;}.wwb-lb-btn{width:42px;height:42px;font-size:20px;}.wwb-lb-prev{left:6px;}.wwb-lb-next{right:6px;}.wwb-lb-img{max-height:74vh;}}
@media(prefers-reduced-motion:reduce){.wwb-lb-btn,.wwb-lb-close{transition:none;}}

/* ===== BizOpp skin (shared) — red + Barlow Condensed identity, scoped to .biz.
   Add class="vsu biz" on a page's <main> to opt in. Page-specific BizOpp pieces
   (biz-hero/biz-band/biz-cta etc.) still live in their own page <style>. ===== */
.biz{--red:#c1272d;--red-dk:#8f1c2d;--red-lt:#e8616a;
  --biz-grad:radial-gradient(125% 130% at 32% 15%,#0a0b0c 0%,#1c1e20 48%,#3a3e41 100%);}
/* BizOpp hero/head background (2026-06-26): VS-red glow — big bottom-left + small top-right —
   over a deep crimson base + a fine line grid. Red/White/Black/Grey palette, kept off brown.
   Direct value + !important so it overrides each page's baked-inline hero bg (photo/maroon/grey). */
.biz .biz-grad,.biz .vsu-pagehead,.biz .vsu-hero,.biz .calc-hero{
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0 / 40px 40px,
    radial-gradient(74% 122% at 0% 126%,rgba(255,94,104,.42) 0%,rgba(200,32,47,.18) 40%,transparent 66%),
    radial-gradient(46% 80% at 104% -12%,rgba(255,94,104,.28) 0%,transparent 60%),
    radial-gradient(125% 130% at 30% 12%,#1c060b 0%,#340b15 52%,#4e1120 100%) !important;}
/* invest-in-vending hero KEEPS its photo — same red glow + grid, with a crimson left-to-right
   legibility tint over the image (left readable, photo shows right). No opaque base = photo visible. */
.biz-hero{
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0 / 40px 40px,
    radial-gradient(74% 122% at 0% 126%,rgba(255,94,104,.40) 0%,rgba(200,32,47,.16) 40%,transparent 66%),
    radial-gradient(46% 80% at 104% -12%,rgba(255,94,104,.26) 0%,transparent 60%),
    linear-gradient(100deg,rgba(20,6,11,.93) 0%,rgba(40,9,18,.78) 38%,rgba(60,13,25,.42) 66%,rgba(78,17,32,.12) 88%),
    url('https://dev2.vendingsolutions.co.za/wp-content/uploads/2026/05/hero-bg-bizopp.webp') center/cover !important;}
.biz h1,.biz .vsu-h2,.biz .biz-h{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:-.5px;}
.biz .vsu-eyebrow{color:#c0414a;}
.biz .vsu-eyebrow.on-dark{color:#ff9ea4;}
.biz .btn-g{background:var(--red);}.biz .btn-g:hover{background:var(--red-dk);}
.biz .btn-g,.biz .btn-ghost{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:1px;font-weight:700;}
.biz .vsu-card .ic{background:color-mix(in srgb,var(--red) 9%,#fff);color:var(--red);}
.biz .vsu-check li::before{color:var(--red);}
.biz .vsu-wwbut .wwb-tag{background:color-mix(in srgb,var(--red) 92%,transparent);}
/* kill stray greens on BizOpp pages → red (emphasis) */
.biz .vsu-hero h1 em,.biz .vsu-pagehead h1 em,.biz .vsu-h2 em{color:var(--red-lt);font-style:normal;}
.biz .vsu-quote .qi{color:var(--red);}
.biz .vsu-quote cite{color:var(--red-dk);}
.biz .vsu-card.g .ic{background:color-mix(in srgb,var(--red) 9%,#fff);color:var(--red);}
.biz .vsu-info h3 i{color:var(--red);}

/* Converted emoji → FontAwesome in legacy icon spots (.vfa marker).
   Teal on light sections; inherit on dark hero badges / buttons so they stay legible. */
.vfa{color:var(--vs-teal);}
.vs-hero-badge .vfa,.stat-label .vfa,.vs-btn .vfa,.vs-btn-ghost .vfa,a[class*="btn"] .vfa,[class*="btn"] .vfa{color:inherit;}

/* Related machines block (universal) — injected on landing pages via manifest relm:true.
   Self-contained so it works on both legacy .vs-* and new .vsu-* pages. */
.relm{padding:clamp(48px,7vw,90px) max(var(--vs-gut,32px),calc((100% - var(--vs-shell,1400px))/2));background:var(--vs-soft);text-align:center;box-sizing:border-box;width:100%;}
/* legacy sector machine sections use cream — flip to the global soft-teal (they never carry
   a photo bg: vs-machine is in _LIFE_NOBG, so overriding background is safe) */
.vs-machine{background:var(--vs-soft)!important;}
.relm-head{max-width:680px;margin:0 auto 6px;}
.relm-eyebrow{font:700 11px/1 'Inter',sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--vs-green-dk);display:block;margin-bottom:12px;}
.relm h2{font:800 clamp(1.6rem,3vw,2.3rem) 'Inter',sans-serif;color:var(--vs-dark);margin:0 0 12px;letter-spacing:-.5px;}
.relm p{color:var(--vs-grey);line-height:1.6;margin:0 auto;max-width:60ch;}
.relm-all{display:inline-block;margin-top:26px;border:2px solid var(--vs-teal);color:var(--vs-teal);font:700 14px 'Inter',sans-serif;text-decoration:none;padding:12px 26px;border-radius:10px;transition:background .2s,color .2s;}
.relm-all:hover{background:var(--vs-teal);color:#fff;}
.biz .relm{background:#fff;}
.biz .relm-eyebrow{color:#c0414a;}
.biz .relm-all{border-color:var(--red);color:var(--red);}
.biz .relm-all:hover{background:var(--red);}

/* Client logo carousel (universal) — injected between trust strip and WWBUT on
   landing pages. Narrow, continuous loop, bigger logos, faster scroll. */
.lcar{background:#fff;text-align:center;box-sizing:border-box;width:100%;
  padding:clamp(26px,3.4vw,42px) max(var(--vs-gut,32px),calc((100% - var(--vs-shell,1400px)) / 2));}
.lcar-h{font:700 11px/1 'Inter',sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:var(--vs-grey);margin:0;}
.lcar-marquee{position:relative;overflow:hidden;margin-top:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
/* seamless marquee: each img carries its own trailing margin (NOT flex `gap`) so the two
   identical halves tile pixel-perfectly — translateX(-50%) then loops with no break. */
.lcar-track{display:flex;align-items:center;width:max-content;animation:lcar-scroll 32s linear infinite;}
.lcar-marquee:hover .lcar-track,.lcar-marquee:focus-within .lcar-track{animation-play-state:paused;}
.lcar-track img{height:clamp(56px,6vw,84px);width:auto;margin-right:clamp(48px,6vw,88px);object-fit:contain;filter:grayscale(1) opacity(.55);transition:filter .3s,opacity .3s;}
.lcar-track img:hover,.lcar-marquee:hover .lcar-track img{filter:grayscale(0) opacity(1);}
@keyframes lcar-scroll{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.lcar-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}.lcar-track .dup{display:none;}}

/* ---- shared machine-showcase cards (so the RELM "Our Machines" section on vsu landing
   pages renders the SAME 4-product cards as the legacy sector vs-machine sections) ---- */
.vs-machine-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;width:100%;max-width:1100px;margin-top:8px;}
@media(max-width:1100px){.vs-machine-grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.vs-machine-grid-4{grid-template-columns:1fr;}}
.vs-machine-card{background:#fff;border:1px solid rgba(0,0,0,0.09);border-radius:var(--vs-radius);overflow:visible;box-shadow:0 4px 24px rgba(0,0,0,0.07);display:flex;flex-direction:column;}
.vs-machine-card .woocommerce{padding:18px 14px 6px;}
.vs-machine-card ul.products{margin:0!important;padding:0!important;display:block!important;width:100%!important;}
.vs-machine-card li.product{width:100%!important;margin:0!important;float:none!important;text-align:center;overflow:visible!important;position:relative;}
.vs-machine-card li.product img{max-height:190px;width:auto!important;margin:0 auto 10px;object-fit:contain;}
.vs-machine-card li.product .woocommerce-loop-product__title{font-size:0.9rem!important;font-weight:700!important;color:var(--vs-dark)!important;}
.vs-machine-card li.product .button{background:var(--vs-green)!important;color:#fff!important;border:none!important;border-radius:5px!important;font-weight:700!important;}
.vs-machine-card-body{padding:14px 18px 20px;border-top:1px solid rgba(0,0,0,0.06);margin-top:auto;}
.vs-machine-card-body h3{font-size:0.92rem;font-weight:800;color:var(--vs-dark);margin-bottom:4px;font-family:'Inter',sans-serif;}
.vs-machine-card-body p{font-size:0.8rem;color:var(--vs-grey);line-height:1.55;}

/* ---- lifestyle image band (full-bleed context shot + caption; injected per manifest "lifeband") ---- */
.vs-lifeband{position:relative;width:100%;min-height:clamp(260px,34vw,440px);background-size:cover;
  background-position:center;display:flex;align-items:flex-end;box-sizing:border-box;padding:clamp(28px,5vw,56px);overflow:hidden;}
.vs-lifeband::before{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,79,89,.85) 0%,rgba(0,79,89,.30) 46%,transparent 82%);}
.vs-lifeband-cap{position:relative;color:#fff;font:800 clamp(1.35rem,2.6vw,2.1rem) 'Inter',sans-serif;
  letter-spacing:-.5px;max-width:20ch;line-height:1.14;text-shadow:0 2px 18px rgba(0,0,0,.35);}
@media(min-width:900px){body.vs-form-open .vs-lifeband{padding-right:calc(clamp(28px,5vw,56px) + var(--vs-form-clear));transition:padding .35s;}}

/* ---- render_products() preview cards: tidy layout (list bullet off, stacked, real button) ---- */
.vs-machine-card ul.products{list-style:none!important;}
.vs-machine-card li.product{display:flex!important;flex-direction:column;align-items:center;gap:12px;padding:18px 14px 18px!important;}
.vs-machine-card li.product > a:first-child{display:block;width:100%;}
.vs-machine-card li.product img{max-height:175px;width:auto!important;margin:0 auto!important;object-fit:contain;}
.vs-machine-card li.product .button{display:inline-block!important;background:var(--vs-green)!important;color:#fff!important;
  padding:9px 18px!important;border-radius:6px!important;font:700 12.5px 'Inter',sans-serif!important;
  text-decoration:none!important;white-space:nowrap;letter-spacing:.2px;transition:background .16s;}
.vs-machine-card li.product .button:hover{background:var(--vs-green-dk)!important;}

/* ===== catalogue-style product cards (.pc) — shared so sector/relm related-machines
   sections match the 'Our Vending Machines' page. Buttons namespaced .pc-btn to avoid
   collision with legacy/biz .btn. ===== */
.pc{position:relative;background:#fff;border:1px solid rgba(0,79,89,.09);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;
  &:hover,&:focus-within{transform:translateY(-5px);box-shadow:0 18px 40px -12px rgba(0,79,89,.28);border-color:rgba(0,79,89,.22);}}
.pc-img{display:block;aspect-ratio:4/3;background:linear-gradient(135deg,#f1f5f4,#e2ecea);position:relative;overflow:hidden;
  & img{width:100%;height:100%;object-fit:contain;padding:14px;mix-blend-mode:multiply;}}
.pc-badges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.nb{font:700 10.5px/1 'Inter',sans-serif;letter-spacing:.4px;padding:5px 9px;border-radius:6px;color:#fff;
  display:inline-flex;align-items:center;gap:5px;box-shadow:0 2px 6px rgba(0,0,0,.12);}
.nb-top{background:var(--vs-green);}.nb-new{background:var(--vs-teal);}.nb-ref{background:#c98a2b;}.nb-demo{background:var(--vs-grey);}
.pc-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;}
.pc-brand{font:700 11px/1 'Inter',sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--vs-green-dk);margin-bottom:7px;}
.pc h3{font-family:'Inter',sans-serif;font-size:1.04rem;font-weight:700;line-height:1.28;margin:0 0 12px;
  & a{color:var(--vs-dark);text-decoration:none;} & a:hover{color:var(--vs-teal);}}
.pc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.chip{display:inline-flex;align-items:center;gap:5px;font:600 11px 'Inter',sans-serif;color:var(--vs-teal-lt);
  background:color-mix(in srgb,var(--vs-teal) 8%,#fff);border:1px solid color-mix(in srgb,var(--vs-teal) 16%,#fff);
  padding:4px 9px;border-radius:7px;& i{font-size:10px;opacity:.8;}}
.pc-foot{margin-top:auto;}
.pc-price{display:flex;flex-direction:column;font:800 .98rem 'Inter',sans-serif;color:var(--vs-teal);margin-bottom:12px;
  & small{font-weight:500;font-size:.7rem;color:var(--vs-grey);margin-top:3px;letter-spacing:.2px;}}
.pc-act{display:flex;gap:8px;}
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:9px;
  font:600 13px 'Inter',sans-serif;text-decoration:none;padding:10px 12px;cursor:pointer;transition:.16s;border:0;}
.pc-btn-p{flex:1;background:var(--vs-teal);color:#fff;&:hover{background:var(--vs-teal-dk);}}
.pc-btn-o{flex:1;background:#fff;border:1px solid rgba(0,79,89,.25);color:var(--vs-teal);&:hover{background:color-mix(in srgb,var(--vs-teal) 7%,#fff);}}
.pc.hide{display:none;}

/* ===== lifestyle photo integrated as a section background (overlay keeps text legible) ===== */
.vs-life-bg{position:relative!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;isolation:isolate;overflow:hidden;}
.vs-life-bg::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,36,38,.88) 0%,rgba(0,61,70,.84) 100%);}
/* card-grid sections over a photo: darken less, flip the section's OWN heading text white
   (cards keep their own opaque background + dark text) */
.vs-life-bg.vs-life-soft::before{background:linear-gradient(180deg,rgba(20,36,38,.80) 0%,rgba(0,79,89,.74) 100%);}
.vs-life-bg.vs-life-soft > .vs-eyebrow,.vs-life-bg.vs-life-soft > .vs-section-heading,
.vs-life-bg.vs-life-soft > .vs-section-sub,.vs-life-bg.vs-life-soft > .vsu-center > *{color:#fff!important;}

/* ---- inline product cross-links in prose (FAQ answers, body copy) ---- */
a.vs-plink{color:var(--vs-teal);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--vs-teal) 35%,transparent);text-underline-offset:2px;transition:color .15s;}
a.vs-plink:hover{color:var(--vs-green-dk);text-decoration-color:currentColor;}
/* On dark hero panels the teal prose-link is invisible (teal on teal) — flip to white + a clear underline. */
.h-hero a.vs-plink,.vsu-hero a.vs-plink,.biz-hero a.vs-plink,.on-dark a.vs-plink{color:#fff;text-decoration-color:rgba(255,255,255,.55);}
.h-hero a.vs-plink:hover,.vsu-hero a.vs-plink:hover,.biz-hero a.vs-plink:hover,.on-dark a.vs-plink:hover{color:#fff;text-decoration-color:#fff;}

/* photo-bg card sections (.vs-life-soft): cards become OUTLINED / glass with LIGHT text
   (instead of opaque white cards) so the lifestyle photo reads through. Product .pc cards
   never get a photo background, so they are unaffected. */
.vs-life-soft :is(.vs-pain-card,.vs-benefit-card,.vs-step,.vs-objection-item,.vsu-card){
  background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:none!important;backdrop-filter:blur(3px) saturate(1.05);-webkit-backdrop-filter:blur(3px) saturate(1.05);}
.vs-life-soft :is(.vs-pain-card,.vs-benefit-card,.vs-step,.vs-objection-item,.vsu-card):hover{
  background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.55)!important;}
.vs-life-soft :is(.vs-pain-card,.vs-benefit-card,.vs-step,.vs-objection-item,.vsu-card) :is(h2,h3,h4,span,b,strong,li,a){color:#fff!important;}
.vs-life-soft :is(.vs-pain-card,.vs-benefit-card,.vs-step,.vs-objection-item,.vsu-card) p{color:rgba(255,255,255,.86)!important;}
.vs-life-soft :is(.vs-pain-card,.vs-benefit-card,.vs-step,.vs-objection-item,.vsu-card) i{color:#fff!important;}
/* icon chips inside the cards -> translucent light */
.vs-life-soft :is(.vs-pain-card,.vs-benefit-card,.vs-step,.vs-objection-item,.vsu-card) :is(.ic,.vs-benefit-card-icon,.vs-objection-icon,.vs-step-num,[class*="-icon"]){
  background:rgba(255,255,255,.16)!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important;}

/* extend the .vs-life-soft photo-section treatment to the workplace (.section X) + vsu/bizopp
   content systems (heading flips white; their cards become outlined/glass with light text) */
.vs-life-soft > :is(.section-eyebrow,.section-heading,.section-sub),
.vs-life-soft .vsu-center > :is(.vsu-eyebrow,.vsu-h2,.vsu-sub,h2,p),
.vs-life-soft > :is(.vsu-eyebrow,.vsu-h2,.vsu-sub){color:#fff!important;}
/* split-media sections on a photo bg: flip text reverse (eyebrow green, heading/sub white) */
.vs-life-soft .vsu-split .vsu-h2{color:#fff!important;}
.vs-life-soft .vsu-split .vsu-sub{color:rgba(255,255,255,.86)!important;}
.vs-life-soft .vsu-split .vsu-eyebrow{color:var(--vs-green)!important;}
.vs-life-soft .vsu-split .vsu-sub a{color:#cfe08a!important;}
.vs-life-soft :is(.pain-card,.cashless-card,.fridge-card,.handle-card,.service-card,.step,.testimonial-card){
  background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.34)!important;box-shadow:none!important;
  backdrop-filter:blur(3px) saturate(1.05);-webkit-backdrop-filter:blur(3px) saturate(1.05);}
.vs-life-soft :is(.pain-card,.cashless-card,.fridge-card,.handle-card,.service-card,.step,.testimonial-card):hover{
  background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.55)!important;}
.vs-life-soft :is(.pain-card,.cashless-card,.fridge-card,.handle-card,.service-card,.step,.testimonial-card) :is(h2,h3,h4,span,b,strong,li,a){color:#fff!important;}
.vs-life-soft :is(.pain-card,.cashless-card,.fridge-card,.handle-card,.service-card,.step,.testimonial-card) p{color:rgba(255,255,255,.86)!important;}
.vs-life-soft :is(.pain-card,.cashless-card,.fridge-card,.handle-card,.service-card,.step,.testimonial-card) :is(.pain-icon,[class*="-icon"]){background:rgba(255,255,255,.16)!important;color:#fff!important;}
.vs-life-soft :is(.pain-card,.cashless-card,.fridge-card,.handle-card,.service-card,.step,.testimonial-card) i{color:#fff!important;}
/* testimonial .vsu-quote cards on a photo section → glass + light text (matches other sections) */
.vs-life-soft .vsu-quote{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.34)!important;box-shadow:none!important;
  backdrop-filter:blur(11px) saturate(1.05);-webkit-backdrop-filter:blur(11px) saturate(1.05);}
.vs-life-soft .vsu-quote p{color:rgba(255,255,255,.90)!important;}
.vs-life-soft .vsu-quote cite{color:#fff!important;}
.vs-life-soft .vsu-quote small{color:rgba(255,255,255,.70)!important;}
.vs-life-soft .vsu-quote .qi,.vs-life-soft .vsu-quote .qi i{color:var(--vs-green)!important;}

/* workplace smart-fridge cards: lifestyle image fills the card-img band (replacing the icon) */
.fridge-card-img{position:relative;}
.fridge-card-img img{width:100%;height:100%;object-fit:cover;display:block;}

/* red-tint the catalogue .pc cards on BizOpp (.biz) pages so they match the red theme */
.biz .pc-brand{color:var(--red,#b02035)!important;}
.biz .pc .chip{color:var(--red,#b02035)!important;background:color-mix(in srgb,var(--red,#b02035) 8%,#fff)!important;border-color:color-mix(in srgb,var(--red,#b02035) 20%,#fff)!important;}
.biz .pc .chip i{color:var(--red,#b02035)!important;}
.biz .pc-price{color:var(--red,#b02035)!important;}
.biz .pc-btn-p{background:var(--red,#b02035)!important;}
.biz .pc-btn-p:hover{background:var(--red-dk,#6b1522)!important;}
.biz .pc-btn-o{color:var(--red,#b02035)!important;border-color:color-mix(in srgb,var(--red,#b02035) 32%,#fff)!important;}
.biz .pc h3 a:hover{color:var(--red,#b02035)!important;}
.biz .pc .nb-top{background:var(--red,#b02035)!important;}

/* ===== unified WhatsApp button (controls ALL WhatsApp buttons site-wide) ===== */
.wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:700 15px 'Inter',sans-serif;
  text-decoration:none;border-radius:9px;padding:15px 28px;cursor:pointer;transition:background .16s,border-color .16s,color .16s;
  background:var(--vs-teal-dk);color:#fff;border:1.5px solid rgba(255,255,255,.22);white-space:nowrap;}
.wa-btn i{color:#3ad175;font-size:1.2em;}
.wa-btn:hover{background:var(--vs-teal-lt);border-color:rgba(255,255,255,.4);}
.wa-btn.on-dark{background:var(--vs-teal-dk);color:#fff;border-color:rgba(255,255,255,.28);}
.wa-btn.on-dark i{color:#3ad175;}
.wa-btn.on-dark:hover{background:var(--vs-teal-lt);border-color:rgba(255,255,255,.55);}

/* numbered-step sections: drop the decorative icon (keep the number) on all pages */
.step-icon,.vs-step-icon,.vsu-step-icon{display:none!important;}

/* VS green used sparingly as the icon accent on dark photo sections (was white) */
.vs-life-soft :is(.vs-pain-card,.vs-benefit-card,.vs-step,.vs-objection-item,.vsu-card,.pain-card,.cashless-card,.fridge-card,.handle-card,.service-card,.testimonial-card) i{color:var(--vs-green)!important;}

/* vs-faq section base — so the accordion is fully styled on pages without per-page FAQ CSS
   (per-page .vs-faq rules still override on the legacy sectors). */
section.vs-faq{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(56px,8vw,88px) clamp(20px,5vw,48px);background:var(--vs-cream);width:100%;box-sizing:border-box;}
.vs-faq .vs-faq-list{text-align:left;}
.vs-faq-q i{transition:transform .25s;font-size:13px;color:var(--vs-teal);}
.vs-faq-item.open .vs-faq-q i,.vs-faq-q.open i{transform:rotate(180deg);}
.vs-faq-a p{padding:0;margin:0 0 18px;color:var(--vs-grey);line-height:1.7;}

/* vsu-quote testimonial cards available globally (legacy pages don't load vs-ui) */
.vsu-quotes{columns:3 280px;column-gap:22px;}
@media(max-width:880px){.vsu-quotes{columns:2 260px;}}
@media(max-width:560px){.vsu-quotes{columns:1;}}
.vsu-quote{break-inside:avoid;margin:0 0 22px;background:#fff;border:1px solid rgba(0,79,89,.09);border-radius:16px;padding:26px;box-shadow:0 2px 16px rgba(0,0,0,.04);}
.vsu-quote .qi{color:var(--vs-green);font-size:1.4rem;margin-bottom:10px;}
.vsu-quote p{color:#2a3b3e;line-height:1.7;font-size:14.5px;margin:0 0 16px;}
.vsu-quote cite{display:block;font:700 14px 'Inter',sans-serif;color:var(--vs-teal);font-style:normal;}
.vsu-quote small{color:var(--vs-grey);font-size:12px;}

/* ===== BizOpp (.biz) lifestyle-bg overrides — dark/black overlay (NOT teal), white
   reverse text, glass cards, sparse lighter-red accents. Scoped to .biz so teal pages
   keep their teal treatment. ===== */
/* Neutral "sunglasses" darken — even black tint, image shows through, NO red fade.
   Slightly deeper at top/bottom for heading + lower-card legibility. Tweakable. */
.biz .vs-life-bg::before{background:linear-gradient(180deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.58) 50%,rgba(0,0,0,.64) 100%)!important;}
.biz .vs-life-bg.vs-life-soft::before{background:linear-gradient(180deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.60) 45%,rgba(0,0,0,.68) 100%)!important;}
/* match the sub→cards gap to other sections (vsu-center is inline margin-bottom:8px here) */
.biz .vs-life-soft .vsu-center{margin-bottom:36px!important;}
/* stronger glass blur so card content reads cleanly over the photo */
.biz .vs-life-soft :is(.vsu-card,.biz-step){backdrop-filter:blur(11px) saturate(1.05)!important;-webkit-backdrop-filter:blur(11px) saturate(1.05)!important;}
/* section headings white regardless of wrapper depth (PAIN heading sits in a plain div);
   text-shadow keeps them legible through the lighter sunglasses overlay */
.biz .vs-life-soft .vsu-eyebrow{color:#ff9ea4!important;text-shadow:0 2px 14px rgba(0,0,0,.6);}
.biz .vs-life-soft .vsu-h2{color:#fff!important;text-shadow:0 2px 16px rgba(0,0,0,.55);}
.biz .vs-life-soft .vsu-sub{color:rgba(255,255,255,.88)!important;text-shadow:0 1px 12px rgba(0,0,0,.5);}
.biz .vs-life-soft .vsu-sub a{color:#ffc9cd!important;}
/* card icons: red accent, not the teal-page green */
.biz .vs-life-soft :is(.vsu-card,.biz-step) i{color:var(--red-lt)!important;}
.biz .vs-life-soft .vsu-card .ic{background:rgba(255,255,255,.14)!important;color:#ff9ea4!important;}
/* .biz-step (How It Works) → glass cards on photo bg */
.biz .vs-life-soft .biz-step{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.34)!important;box-shadow:none!important;backdrop-filter:blur(2px);}
.biz .vs-life-soft .biz-step h3{color:#fff!important;}
.biz .vs-life-soft .biz-step p{color:rgba(255,255,255,.86)!important;}
.biz .vs-life-soft .biz-step .n.off{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.40)!important;color:#fff!important;}
.biz .vs-life-soft .biz-step .n.on{background:var(--red)!important;color:#fff!important;}
/* product-card image panels: soft-red behind the products (section bg stays cream).
   Independent of the section background — set here, not inherited. */
.biz .pc-img{background:linear-gradient(135deg,color-mix(in srgb,var(--red) 5%,#fff),color-mix(in srgb,var(--red) 12%,#fff))!important;}
/* numbered-step cards: drop the fa icon, keep the 01/02/03 number badge */
.biz-step > i{display:none!important;}

/* ===== Consumables Shop cross-link promo (injected on sector + solution pages by push_theme) ===== */
.cons-promo{background:#fff;}
.cons-promo-in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;max-width:1180px;margin:0 auto;}
.cons-promo-media{border-radius:18px;overflow:hidden;box-shadow:0 18px 50px rgba(0,79,89,.16);aspect-ratio:4/3;background:var(--vs-cream);}
.cons-promo-media img{width:100%;height:100%;object-fit:cover;display:block;}
.cons-promo .vsu-h2{margin:0 0 12px;}
.cons-promo p{color:var(--vs-grey);line-height:1.65;margin:0;max-width:48ch;}
.cons-promo-tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 24px;}
.cons-promo-tags span{font:700 12px 'Inter',sans-serif;color:var(--vs-teal);background:color-mix(in srgb,var(--vs-teal) 8%,#fff);border:1px solid color-mix(in srgb,var(--vs-teal) 18%,#fff);padding:6px 13px;border-radius:999px;}
@media(max-width:760px){.cons-promo-in{grid-template-columns:1fr;}.cons-promo-media{aspect-ratio:16/10;order:-1;}}
/* on the red BizOpp skin the promo isn't injected, but guard the teal tags just in case */
.biz .cons-promo-tags span{color:var(--red,#b3202c);background:color-mix(in srgb,var(--red,#b3202c) 7%,#fff);border-color:color-mix(in srgb,var(--red,#b3202c) 16%,#fff);}

/* ===== P1 product-card fix (card-in-card) =====
   [products columns=1] wrapped in a de-decorated .vs-machine-card/.vs-coffee-card shell
   content-sized the chain, so the real .pc sat narrow in a wider cell and the Quote button
   clipped. Flatten the (already invisible) wrapper shells with display:contents → the .pc
   becomes the direct grid item and fills its cell. P2 (.woocommerce direct in the grid,
   no card) is untouched. */
body .vs-machine-grid-4 .vs-machine-card,
body .vs-machine-grid-3 .vs-machine-card,
body .vs-machine-grid .vs-machine-card,
body .vs-coffee-grid-4 .vs-coffee-card,
body .vs-coffee-grid-4 .vs-machine-card,
body .vs-machine-grid-4 .vs-machine-card > .woocommerce,
body .vs-machine-grid-3 .vs-machine-card > .woocommerce,
body .vs-machine-grid .vs-machine-card > .woocommerce,
body .vs-coffee-grid-4 .vs-coffee-card > .woocommerce,
body .vs-coffee-grid-4 .vs-machine-card > .woocommerce,
body .vs-machine-grid-4 .vs-machine-card ul.products,
body .vs-machine-grid-3 .vs-machine-card ul.products,
body .vs-machine-grid .vs-machine-card ul.products,
body .vs-coffee-grid-4 .vs-coffee-card ul.products,
body .vs-coffee-grid-4 .vs-machine-card ul.products{display:contents!important;}

/* .biz skin colours headings/body white (for its dark red sections); the cons-promo keeps a
   white card on BizOpp pages, so force its heading + paragraph dark or they vanish. */
.biz .cons-promo .vsu-h2{color:var(--vs-dark)!important;}
.biz .cons-promo p{color:var(--vs-grey)!important;}


/* ===== vs-ui ===== */
/* ============================================================
   vs-ui.css — Vending Solutions shared design system
   Modern CSS (nesting, :has, color-mix, container queries,
   view-transitions, scroll-driven). Assumes vs-global tokens
   (--vs-teal/green/dark/grey/cream/radius) loaded first.
   Single source of truth for the post-Elementor block theme.
   ============================================================ */

html{background:var(--vs-soft);}
body{background:var(--vs-soft);}

/* ---- layout shell ---- */
.vsu{--pad:max(var(--vs-gut,32px),calc((100% - var(--vs-shell,1400px)) / 2));background:var(--vs-soft);}
.vsu-sec{padding-inline:var(--pad);}
.vsu-sec--pad{padding-block:clamp(48px,7vw,96px);}
.vsu-narrow{max-width:760px;margin-inline:auto;}

/* ---- type ---- */
.vsu-eyebrow{font:700 11px/1 'Inter',sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--vs-green-dk);display:block;margin-bottom:12px;}
.vsu-eyebrow.on-dark{color:var(--vs-green);}
.vsu-h2{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.8px;line-height:1.1;font-size:clamp(1.8rem,3.5vw,2.5rem);margin:0 0 16px;color:var(--vs-dark);}
.vsu-sub{font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.7;color:var(--vs-grey);max-width:62ch;margin:0;}
.vsu-center{text-align:center;& .vsu-sub{margin-inline:auto;}}

/* ---- hero (grain gradient) — sits flush under the fixed pill nav, top pad clears it ---- */
.vsu-hero{position:relative;overflow:hidden;color:#fff;
  padding:calc(var(--vs-nav-h,84px) + clamp(20px,3vw,40px)) var(--pad) clamp(40px,5vw,72px);
  background:radial-gradient(120% 140% at 85% 0%,var(--vs-teal-lt) 0%,var(--vs-teal) 42%,var(--vs-teal-dk) 100%);}
.vsu-hero::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:soft-light;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px);background-size:4px 4px;}
.vsu-hero > *{position:relative;z-index:1;}

/* ---- page header (teal band flush to top for pages w/o a full hero: product/cart/checkout/article) ---- */
.vsu-pagehead{position:relative;overflow:hidden;color:#fff;
  padding:calc(var(--vs-nav-h,84px) + clamp(16px,2.4vw,28px)) var(--pad) clamp(24px,3.2vw,40px);
  background:
    radial-gradient(70% 130% at 8% 118%,color-mix(in srgb,var(--vs-green) 42%,transparent) 0%,transparent 62%),
    radial-gradient(120% 160% at 88% 0%,var(--vs-teal-lt) 0%,var(--vs-teal) 46%,var(--vs-teal-dk) 100%);}
.vsu-pagehead h1::after{content:"";display:block;width:52px;height:4px;border-radius:3px;
  background:var(--vs-green);margin-top:16px;}
.vsu-pagehead::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:soft-light;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px);background-size:4px 4px;}
.vsu-pagehead > *{position:relative;z-index:1;}
.vsu-pagehead h1{font:800 clamp(1.7rem,3.6vw,2.6rem) 'Inter',sans-serif;letter-spacing:-1px;line-height:1.08;margin:2px 0 0;color:#fff;
  & em{font-style:normal;color:var(--vs-green);}}
.vsu-pagehead .vsu-sub{color:rgba(255,255,255,.8);margin-top:10px;}
.vsu-hero h1{font-family:'Inter',sans-serif;font-weight:900;letter-spacing:-1.5px;line-height:1.04;
  font-size:clamp(2.2rem,5vw,3.6rem);margin:0 0 16px;max-width:20ch;& em{font-style:normal;color:var(--vs-green);}}
.vsu-hero p{color:rgba(255,255,255,.8);max-width:60ch;line-height:1.65;font-size:clamp(1rem,1.4vw,1.12rem);margin:0;}
.vsu-crumb{font-size:13px;color:rgba(255,255,255,.65);margin-bottom:16px;
  & a{color:inherit;text-decoration:none;} & a:hover{color:#fff;}}
.vsu-stats{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px);margin-top:32px;
  & div{display:flex;flex-direction:column;}
  & b{font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);color:#fff;line-height:1;}
  & span{font-size:12.5px;letter-spacing:.4px;color:rgba(255,255,255,.7);margin-top:6px;}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;
  font:600 13px 'Inter',sans-serif;text-decoration:none;padding:11px 16px;cursor:pointer;transition:.16s;border:0;white-space:nowrap;}
.btn-lg{padding:15px 26px;font-size:15px;border-radius:11px;}
.btn-block{width:100%;}
.btn-p{background:var(--vs-teal);color:#fff;&:hover{background:var(--vs-teal-dk);}}
.btn-o{background:#fff;border:1px solid rgba(0,79,89,.25);color:var(--vs-teal);&:hover{background:color-mix(in srgb,var(--vs-teal) 7%,#fff);}}
.btn-g{background:var(--vs-green);color:#fff;&:hover{background:var(--vs-green-dk);}}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff;&:hover{border-color:#fff;background:rgba(255,255,255,.08);}}

/* ---- filter pills ---- */
.vsu-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid rgba(0,79,89,.2);
  border-radius:999px;font:600 13px/1 'Inter',sans-serif;color:var(--vs-teal);background:#fff;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s,transform .16s;
  & i{font-size:12px;opacity:.8;} & span{opacity:.55;font-weight:700;}
  &:hover{border-color:var(--vs-teal);transform:translateY(-1px);}
  &.on{background:var(--vs-teal);color:#fff;border-color:var(--vs-teal);& span{opacity:.8;}}}

/* ---- chips / badges ---- */
.chip{display:inline-flex;align-items:center;gap:5px;font:600 11px 'Inter',sans-serif;color:var(--vs-teal-lt);
  background:color-mix(in srgb,var(--vs-teal) 8%,#fff);border:1px solid color-mix(in srgb,var(--vs-teal) 16%,#fff);
  padding:4px 9px;border-radius:7px;& i{font-size:10px;opacity:.8;}}
.nb{font:700 10.5px/1 'Inter',sans-serif;letter-spacing:.4px;padding:5px 9px;border-radius:6px;color:#fff;
  display:inline-flex;align-items:center;gap:5px;box-shadow:0 2px 6px rgba(0,0,0,.12);}
.nb-top{background:var(--vs-green);}.nb-new{background:var(--vs-teal);}.nb-ref{background:#c98a2b;}.nb-demo{background:var(--vs-grey);}

/* ---- product card ---- */
.vsu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:24px;}
.pc{position:relative;background:#fff;border:1px solid rgba(0,79,89,.09);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;
  &:hover,&:focus-within{transform:translateY(-5px);box-shadow:0 18px 40px -12px rgba(0,79,89,.28);border-color:rgba(0,79,89,.22);}}
@supports (animation-timeline:view()){
  .reveal{animation:pc-in linear both;animation-timeline:view();animation-range:entry 0% entry 22%;}
  @keyframes pc-in{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}}
.pc-img{display:block;aspect-ratio:4/3;background:linear-gradient(135deg,#f1f5f4,#e2ecea);position:relative;overflow:hidden;
  & img{width:100%;height:100%;object-fit:contain;padding:14px;mix-blend-mode:multiply;}}
.pc-badges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.pc-cmp{position:absolute;top:12px;right:12px;z-index:3;cursor:pointer;
  & input{position:absolute;opacity:0;width:0;height:0;}
  & span{display:flex;width:34px;height:34px;border-radius:9px;align-items:center;justify-content:center;
    background:color-mix(in srgb,#fff 80%,transparent);backdrop-filter:blur(6px);border:1px solid rgba(0,79,89,.18);
    color:var(--vs-teal);font-size:13px;transition:.16s;}
  &:hover span{background:#fff;}
  & input:checked + span{background:var(--vs-teal);color:#fff;border-color:var(--vs-teal);transform:scale(1.05);}
  & input:checked + span i::before{content:"\f00c";}}
.pc-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;}
.pc-brand{font:700 11px/1 'Inter',sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--vs-green-dk);margin-bottom:7px;}
.pc h3{font-family:'Inter',sans-serif;font-size:1.04rem;font-weight:700;line-height:1.28;margin:0 0 12px;
  & a{color:var(--vs-dark);text-decoration:none;} & a:hover{color:var(--vs-teal);}}
.pc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.pc-foot{margin-top:auto;}
.pc-price{display:flex;flex-direction:column;font:800 .98rem 'Inter',sans-serif;color:var(--vs-teal);margin-bottom:12px;
  & small{font-weight:500;font-size:.7rem;color:var(--vs-grey);margin-top:3px;letter-spacing:.2px;}}
.pc-act{display:flex;gap:8px;}
.pc.hide{display:none;}

/* ---- sticky toolbar ---- */
.vsu-bar{position:sticky;top:calc(var(--vs-nav-h,84px) + 8px);z-index:30;background:color-mix(in srgb,var(--vs-cream) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(0,79,89,.1);padding:14px var(--pad);}
.vsu-bar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.vsu-tools{margin-left:auto;display:flex;align-items:center;gap:10px;}
.vsu-search{position:relative;display:flex;align-items:center;
  & i{position:absolute;left:13px;color:var(--vs-grey);font-size:13px;pointer-events:none;}
  & input{border:1px solid rgba(0,79,89,.2);border-radius:999px;padding:9px 14px 9px 34px;font-size:13px;width:180px;
    background:#fff;color:var(--vs-dark);transition:width .2s,border-color .2s;outline:none;}
  & input:focus{width:230px;border-color:var(--vs-teal);}}
.vsu-select{border:1px solid rgba(0,79,89,.2);border-radius:999px;padding:9px 14px;font:600 13px 'Inter',sans-serif;
  color:var(--vs-teal);background:#fff;cursor:pointer;}

/* ---- expanding search (site-wide pattern: icon -> full-row field, blanks pills) ---- */
.vsu-srch-btn{margin-left:auto;width:40px;height:40px;border-radius:999px;border:1px solid rgba(0,79,89,.2);
  background:#fff;color:var(--vs-teal);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:.16s;flex:0 0 auto;&:hover{background:var(--vs-teal);color:#fff;border-color:var(--vs-teal);}}
.vsu-srch-field[hidden]{display:none;}
.vsu-srch-field{display:flex;align-items:center;gap:10px;width:100%;animation:srch-in .22s cubic-bezier(.2,.8,.2,1);
  background:#fff;border:1px solid var(--vs-teal);border-radius:999px;padding:8px 10px 8px 18px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--vs-teal) 12%,transparent);
  & > i{color:var(--vs-teal);font-size:15px;}
  & input{flex:1;border:0;outline:0;font:500 15px 'Inter',sans-serif;color:var(--vs-dark);background:none;}
  & input::-webkit-search-cancel-button{display:none;}}
.vsu-srch-close{width:32px;height:32px;border-radius:50%;border:0;background:var(--vs-cream);color:var(--vs-grey);
  cursor:pointer;font-size:14px;flex:0 0 auto;&:hover{background:#e9e6e1;color:var(--vs-dark);}}
@keyframes srch-in{from{opacity:0;transform:scaleX(.96);}to{opacity:1;transform:none;}}

/* ---- compare bar + modal (shared) ---- */
.vsu-cmpbar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,160%);z-index:60;
  display:flex;align-items:center;gap:16px;max-width:min(92vw,860px);
  background:var(--vs-dark);color:#fff;border-radius:16px;padding:12px 16px;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.5);transition:transform .35s cubic-bezier(.2,.8,.2,1);}
body:has(.cmp:checked) .vsu-cmpbar{transform:translate(-50%,0);}
.vsu-cmpbar-lbl{font:700 13px 'Inter',sans-serif;white-space:nowrap;& span{color:var(--vs-green);}}
.vsu-cmpbar-thumbs{display:flex;gap:8px;flex:1;overflow:hidden;}
.cmp-th{position:relative;width:48px;height:48px;border-radius:9px;background:#fff;flex:0 0 auto;overflow:hidden;
  & img{width:100%;height:100%;object-fit:contain;padding:4px;}
  & b{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;background:var(--vs-green);
    color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid var(--vs-dark);}}
.vsu-cmpbar .btn-cmp{background:var(--vs-green);color:#fff;white-space:nowrap;padding:11px 18px;border-radius:10px;
  font:700 13px 'Inter',sans-serif;cursor:pointer;border:0;&:disabled{opacity:.4;cursor:not-allowed;}}
.vsu-cmpbar .lnk{color:rgba(255,255,255,.6);font-size:12px;cursor:pointer;text-decoration:underline;white-space:nowrap;}

.vsu-modal{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;padding:calc(var(--vs-nav-h,84px) + 20px) 20px 20px;}
.vsu-modal.open{display:flex;}
.vsu-modal-bd{position:absolute;inset:0;background:rgba(10,24,26,.6);backdrop-filter:blur(4px);}
.vsu-modal-box{position:relative;background:#fff;border-radius:18px;max-width:min(96vw,1000px);width:100%;
  max-height:90vh;overflow:auto;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);}
.vsu-modal-hd{position:sticky;top:0;background:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid rgba(0,79,89,.1);z-index:2;& h2{font:800 1.3rem 'Inter',sans-serif;color:var(--vs-teal);margin:0;}}
.vsu-modal-x{width:36px;height:36px;border-radius:9px;border:1px solid rgba(0,79,89,.18);background:#fff;
  color:var(--vs-dark);font-size:15px;cursor:pointer;&:hover{background:var(--vs-cream);}}
.cmp-table{width:100%;border-collapse:collapse;font-family:'Inter',sans-serif;
  & th,& td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(0,79,89,.08);vertical-align:top;font-size:14px;}
  & thead th{position:sticky;top:69px;background:var(--vs-cream);z-index:1;}
  & .rowlbl{font-weight:700;color:var(--vs-grey);width:150px;background:color-mix(in srgb,var(--vs-cream) 60%,#fff);}
  & td.diff{background:color-mix(in srgb,var(--vs-green) 10%,#fff);font-weight:600;color:var(--vs-teal-dk);}
  & tfoot td{text-align:center;}}
.cmp-table th.cmp-prod{text-align:center;}
.cmp-prod{& img{width:100%;max-width:130px;aspect-ratio:4/3;object-fit:contain;margin:0 auto 8px;display:block;}
  & .nm{font-weight:700;color:var(--vs-dark);font-size:13.5px;line-height:1.3;text-align:center;}}

/* ---- compare: incompatible-type confirm dialog (Cancel / Start new comparison) ---- */
.vsu-confirm{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:20px;}
.vsu-confirm.open{display:flex;}
.vsu-confirm-bd{position:absolute;inset:0;background:rgba(10,24,26,.6);backdrop-filter:blur(4px);}
.vsu-confirm-box{position:relative;background:#fff;border-radius:16px;max-width:min(94vw,440px);width:100%;
  padding:26px 26px 22px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);text-align:center;
  & h3{font:800 1.15rem 'Inter',sans-serif;color:var(--vs-teal);margin:0 0 8px;}
  & p{font:400 14px 'Inter',sans-serif;color:var(--vs-dark);line-height:1.5;margin:0 0 20px;}}
.vsu-confirm-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;& .btn{flex:1;min-width:140px;justify-content:center;}}

/* ---- spec table (single product) ---- */
.vsu-spec{width:100%;border-collapse:collapse;font-family:'Inter',sans-serif;
  & tr{border-bottom:1px solid rgba(0,79,89,.1);}
  & th{text-align:left;font-weight:700;color:var(--vs-grey);width:42%;padding:13px 16px 13px 0;font-size:14px;}
  & td{padding:13px 0;color:var(--vs-dark);font-size:14px;font-weight:600;}}

/* ---- gallery (single product) ---- */
.vsu-gallery{display:flex;flex-direction:column;gap:12px;}
.vsu-gallery-main{aspect-ratio:1/1;background:linear-gradient(135deg,#f1f5f4,#e2ecea);border-radius:16px;
  border:1px solid rgba(0,79,89,.09);display:flex;align-items:center;justify-content:center;overflow:hidden;
  & img{width:100%;height:100%;object-fit:contain;padding:28px;mix-blend-mode:multiply;}}
.vsu-gallery-thumbs{display:flex;gap:10px;}
.vsu-gallery-thumbs button{flex:0 0 72px;height:72px;border-radius:11px;background:#fff;border:1px solid rgba(0,79,89,.14);
  cursor:pointer;overflow:hidden;padding:6px;transition:.16s;&:hover,&.on{border-color:var(--vs-teal);}
  & img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}}

/* ---- quantity + tabs ---- */
.vsu-qty{display:inline-flex;align-items:center;border:1px solid rgba(0,79,89,.2);border-radius:9px;overflow:hidden;
  & button{width:42px;height:44px;background:#fff;border:0;cursor:pointer;color:var(--vs-teal);font-size:16px;&:hover{background:var(--vs-cream);}}
  & input{width:48px;height:44px;border:0;text-align:center;font:700 15px 'Inter',sans-serif;color:var(--vs-dark);}}
.vsu-tabs{display:flex;gap:4px;border-bottom:1px solid rgba(0,79,89,.12);margin-bottom:24px;flex-wrap:wrap;}
.vsu-tab{padding:13px 18px;font:600 14px 'Inter',sans-serif;color:var(--vs-grey);background:none;border:0;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;&:hover{color:var(--vs-teal);}&.on{color:var(--vs-teal);border-bottom-color:var(--vs-teal);}}
.vsu-tabpane{display:none;&.on{display:block;}}

/* ---- prose (article body) ---- */
.vsu-prose{font-family:'Roboto',sans-serif;color:#2a3b3e;font-size:1.05rem;line-height:1.8;max-width:68ch;
  & h2{font-family:'Inter',sans-serif;font-weight:800;color:var(--vs-dark);font-size:1.6rem;margin:2em 0 .6em;letter-spacing:-.4px;}
  & h3{font-family:'Inter',sans-serif;font-weight:700;color:var(--vs-dark);font-size:1.25rem;margin:1.6em 0 .5em;}
  & p{margin:0 0 1.2em;} & a{color:var(--vs-teal);font-weight:600;}
  & ul,& ol{margin:0 0 1.2em;padding-left:1.3em;& li{margin-bottom:.5em;}}
  & blockquote{border-left:4px solid var(--vs-green);background:#fff;margin:1.6em 0;padding:18px 24px;border-radius:0 10px 10px 0;
    font-style:italic;color:var(--vs-teal-dk);font-size:1.15rem;}
  & img{max-width:100%;border-radius:12px;margin:1.4em 0;}}

/* ---- forms ---- */
.vsu-field{margin-bottom:16px;& label{display:block;font:600 13px 'Inter',sans-serif;color:var(--vs-dark);margin-bottom:6px;}}
.vsu-input{width:100%;border:1px solid rgba(0,79,89,.2);border-radius:9px;padding:12px 14px;font-size:14px;
  font-family:'Roboto',sans-serif;color:var(--vs-dark);background:#fff;outline:none;transition:border-color .16s;
  &:focus{border-color:var(--vs-teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--vs-teal) 14%,transparent);}}

/* ---- panel / summary ---- */
.vsu-panel{background:#fff;border:1px solid rgba(0,79,89,.1);border-radius:16px;padding:24px;}
.vsu-panel-sticky{position:sticky;top:90px;}

/* ---- steps (checkout) ---- */
.vsu-steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;}
.vsu-step{display:flex;align-items:center;gap:10px;font:600 13px 'Inter',sans-serif;color:var(--vs-grey);
  & b{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid rgba(0,79,89,.2);
    display:flex;align-items:center;justify-content:center;font-size:12px;}
  &.on{color:var(--vs-teal);& b{background:var(--vs-teal);color:#fff;border-color:var(--vs-teal);}}
  &.done b{background:var(--vs-green);color:#fff;border-color:var(--vs-green);}}

/* ---- closing CTA band ---- */
.vsu-cta{background:var(--vs-dark);color:#fff;text-align:center;padding:clamp(56px,8vw,96px) var(--pad);
  & h2{font:900 clamp(1.8rem,4vw,2.8rem) 'Inter',sans-serif;letter-spacing:-1px;margin:0 0 16px;color:#fff;}
  & p{color:rgba(255,255,255,.62);max-width:540px;margin:0 auto 32px;line-height:1.7;}}

/* ---- content-page components (about / solutions / company / trust) ---- */
/* feature / benefit card grid */
.vsu-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;}
.vsu-card{background:#fff;border:1px solid rgba(0,79,89,.09);border-radius:16px;padding:28px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  &:hover{transform:translateY(-4px);box-shadow:0 16px 36px -14px rgba(0,79,89,.22);border-color:rgba(0,79,89,.2);}}
.vsu-card .ic{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;margin-bottom:16px;background:color-mix(in srgb,var(--vs-teal) 8%,#fff);color:var(--vs-teal);}
.vsu-card.g .ic{background:color-mix(in srgb,var(--vs-green) 16%,#fff);color:var(--vs-green-dk);}
.vsu-card h3{font:700 1.1rem 'Inter',sans-serif;color:var(--vs-dark);margin:0 0 9px;}
.vsu-card p{color:var(--vs-grey);line-height:1.65;margin:0;font-size:14.5px;}

/* alternating text + media split row */
.vsu-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;}
.vsu-split.flip > :first-child{order:2;}
.vsu-split-media{aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,var(--vs-teal),var(--vs-teal-dk));
  position:relative;display:flex;align-items:center;justify-content:center;
  & img{width:100%;height:100%;object-fit:cover;} & i{font-size:3.4rem;color:rgba(255,255,255,.5);}}
@media(max-width:820px){.vsu-split{grid-template-columns:1fr;}.vsu-split.flip > :first-child{order:0;}}

/* team grid */
.vsu-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px;}
.vsu-member{background:#fff;border:1px solid rgba(0,79,89,.09);border-radius:16px;overflow:hidden;text-align:center;padding-bottom:18px;
  transition:transform .2s,box-shadow .2s;&:hover{transform:translateY(-4px);box-shadow:0 16px 36px -14px rgba(0,79,89,.22);}}
.vsu-member-ph{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font:800 1.8rem 'Inter',sans-serif;
  color:#fff;background:linear-gradient(135deg,var(--vs-teal-lt),var(--vs-teal-dk));& img{width:100%;height:100%;object-fit:cover;}}
.vsu-member h3{font:700 1rem 'Inter',sans-serif;color:var(--vs-dark);margin:16px 12px 4px;}
.vsu-member span{display:block;font-size:12.5px;color:var(--vs-green-dk);font-weight:600;padding:0 10px;}

/* testimonial / quote card */
.vsu-quotes{columns:3 280px;column-gap:22px;}
.vsu-quote{break-inside:avoid;margin:0 0 22px;background:#fff;border:1px solid rgba(0,79,89,.09);border-radius:16px;padding:26px;}
.vsu-quote .qi{color:var(--vs-green);font-size:1.4rem;margin-bottom:10px;}
.vsu-quote p{color:#2a3b3e;line-height:1.7;font-size:14.5px;margin:0 0 16px;}
.vsu-quote cite{display:block;font:700 14px 'Inter',sans-serif;color:var(--vs-teal);font-style:normal;}
.vsu-quote small{color:var(--vs-grey);font-size:12px;}

/* info / contact tile + key-value list */
.vsu-info{background:#fff;border:1px solid rgba(0,79,89,.09);border-radius:16px;padding:26px;}
.vsu-info h3{font:700 1.05rem 'Inter',sans-serif;color:var(--vs-teal);margin:0 0 14px;display:flex;align-items:center;gap:9px;& i{color:var(--vs-green-dk);}}
.vsu-info p,.vsu-info li{color:var(--vs-grey);line-height:1.65;font-size:14.5px;margin:0 0 6px;}
.vsu-info a{color:var(--vs-teal);font-weight:600;text-decoration:none;&:hover{text-decoration:underline;}}
.vsu-kv{list-style:none;margin:0;padding:0;& li{display:flex;gap:8px;align-items:baseline;}
  & li b{color:var(--vs-dark);font-weight:600;min-width:96px;}}

/* checklist */
.vsu-check{list-style:none;margin:0;padding:0;
  & li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--vs-grey);line-height:1.6;font-size:15px;}
  & li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:2px;color:var(--vs-green);font-size:13px;}
  & li b{color:var(--vs-dark);font-weight:700;}}

/* note / callout */
.vsu-note{background:color-mix(in srgb,var(--vs-yellow) 12%,#fff);border:1px solid color-mix(in srgb,var(--vs-yellow) 45%,#fff);
  border-radius:12px;padding:18px 22px;font-size:14px;color:#7a5e00;line-height:1.6;& b{color:#5e4900;}}

/* faq accordion (shared content-page) */
.vsu-faq{max-width:760px;}
.vsu-faq-item{border-bottom:1px solid rgba(0,79,89,.12);&:first-child{border-top:1px solid rgba(0,79,89,.12);}}
.vsu-faq-q{width:100%;background:none;border:0;cursor:pointer;padding:20px 0;text-align:left;display:flex;
  justify-content:space-between;align-items:center;gap:16px;font:700 1rem 'Inter',sans-serif;color:var(--vs-teal);
  & i{transition:transform .25s;font-size:13px;}}
.vsu-faq-item.open .vsu-faq-q i{transform:rotate(180deg);}
.vsu-faq-a{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1);
  & p{padding:0 0 20px;margin:0;color:var(--vs-grey);line-height:1.7;font-size:.95rem;}}

@media(max-width:640px){.vsu-tools{width:100%;}.vsu-search input{width:100%;}.vsu-quotes{columns:1;}}


/* ===== search-results ===== */
/* externalized from inline <style> */
/* search results — on-brand, vs-ui tokens. Standalone preview is a styled
   template; on WordPress this maps to search.php / the query loop. */
.sr-head{padding:calc(var(--vs-nav-h,84px) + clamp(16px,2.4vw,28px)) var(--pad) clamp(26px,3.4vw,42px);}
.sr-form{display:flex;gap:0;width:min(560px,100%);margin:18px 0 0;
  box-shadow:0 6px 22px -10px rgba(0,0,0,.4);border-radius:11px;overflow:hidden;}
.sr-form input{flex:1;border:0;border-radius:11px 0 0 11px;padding:15px 18px;
  font:400 16px 'Inter',sans-serif;color:var(--vs-dark);outline:none;}
.sr-form button{border:0;background:var(--vs-green);color:#fff;padding:0 24px;
  border-radius:0 11px 11px 0;cursor:pointer;font-size:17px;}
.sr-form button:hover{background:var(--vs-green-dk);}
.sr-meta{font:600 14px 'Inter',sans-serif;color:var(--vs-grey);margin:0 0 22px;}
.sr-meta b{color:var(--vs-teal);}
.sr-empty{text-align:center;padding:38px 24px;}
.sr-empty i{font-size:2.2rem;color:var(--vs-green);margin-bottom:12px;}
.sr-empty h3{font:800 1.3rem 'Inter',sans-serif;color:var(--vs-dark);margin:0 0 8px;}
.sr-empty p{color:var(--vs-grey);max-width:46ch;margin:0 auto;line-height:1.6;}
.sr-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:30px;}
/* live query-loop results (templates/search.html) */
.sr-results{margin:0 0 10px;}
.sr-results .wp-block-post-template{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.sr-results li.wp-block-post{background:#fff;border:1px solid rgba(0,79,89,.12);border-radius:12px;padding:15px 18px;}
.sr-results .wp-block-post-title{margin:0;font:800 1.12rem 'Inter',sans-serif;line-height:1.25;}
.sr-results .wp-block-post-title a{color:var(--vs-teal);text-decoration:none;}
.sr-results .wp-block-post-title a:hover{text-decoration:underline;}
.sr-results .wp-block-post-excerpt{margin:7px 0 0;color:var(--vs-grey);font:400 14px/1.55 'Inter',sans-serif;}
.sr-results .wp-block-post-excerpt__more-text{display:none;}
.sr-results .wp-block-query-pagination{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.sr-results .wp-block-query-pagination a,.sr-results .wp-block-query-pagination .current{color:var(--vs-teal);font-weight:700;text-decoration:none;padding:4px 9px;border-radius:7px;}
.sr-results .wp-block-query-pagination .current{background:var(--vs-teal);color:#fff;}


/* ===== vs-chrome ===== */
:root{
  --vs-teal:#004F59;--vs-teal-dk:#003d46;--vs-teal-lt:#006875;
  --vs-green:#aab75b;--vs-lime:#B9C954;--vs-green-dk:#7a8d3a;--vs-dark:#1a2e31;
  --vs-grey:#545456;--vs-cream:#f8f6f3;--vs-yellow:#f5c400;--vs-radius:10px;
  --vs-nav-h:84px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:Roboto,sans-serif;color:var(--vs-dark);}
a{color:inherit;}

/* ============================================================
   FLOATING-PILL NAV  (vsn-*)  — transparent over a dark hero,
   detaches into a frosted floating capsule on scroll.
   ============================================================ */
.vsn{position:fixed;top:0;left:0;right:0;z-index:1000;padding-inline:clamp(10px,2.2vw,22px);transition:all .3s cubic-bezier(.2,.8,.2,1);}
/* teal fade behind the nav at the top so it never clashes with a hero; gone once detached */
.vsn::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(0,61,70,.55) 0%,rgba(0,61,70,0) 100%);transition:opacity .3s;}
.vsn.solid::before{opacity:0;}
/* BizOpp pages get a red top fade behind the nav instead of teal (covers content-.biz pages AND
   body.biz pages like profit-calculator which have no main.biz) */
body:has(.biz) .vsn::before,body.biz .vsn::before{background:linear-gradient(180deg,rgba(143,28,45,.55) 0%,rgba(143,28,45,0) 100%);}
.vsn-in{max-width:var(--vs-shell,1340px);margin:0 auto;display:flex;align-items:center;gap:20px;
  padding:16px clamp(8px,1vw,14px);transition:all .3s;position:relative;}
.vsn-logo{display:flex;align-items:center;height:42px;flex:0 0 auto;transition:height .3s;text-decoration:none;}
.vsn-logo img{height:100%;width:auto;display:block;}
.vsn-logo .dark{display:none;}
.vsn-menu{display:flex;gap:clamp(1px,0.4vw,6px);}
.vsn-item{position:relative;}
/* font + padding shrink with viewport so the 6 items stay on ONE line from the hamburger
   breakpoint (981px) up to the shell width, then lock at 14px. nowrap prevents 2-line items. */
.vsn-item > a{display:flex;align-items:center;gap:6px;white-space:nowrap;padding:9px clamp(8px,0.85vw,14px);border-radius:9px;color:rgba(255,255,255,.92);
  text-decoration:none;font:600 clamp(11px,1.04vw,14px) 'Inter',sans-serif;transition:.18s;cursor:pointer;}
/* dropdown cue: a tiny dot at rest that morphs into a subtle down-chevron on hover / while open
   (replaces the caret). Only dropdown items have the <i>, so the cue meaningfully marks "section
   with more" (plain links like Consumables Shop have none). Both states kept very subtle. */
.vsn-item > a i{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:10px;height:10px;font-size:9px;line-height:0;}
/* chevron = the Font Awesome glyph (its own ::before content) — hidden at rest, eases in on hover */
.vsn-item > a i::before{opacity:0;transform:translateY(-1px) scale(.55);transition:opacity .24s ease,transform .24s ease;}
/* dot = ::after, centred over the glyph — shown at rest, fades out as the chevron appears */
.vsn-item > a i::after{content:"";position:absolute;left:50%;top:50%;width:3.5px;height:3.5px;
  margin:-1.75px 0 0 -1.75px;border-radius:50%;background:currentColor;opacity:.5;
  transition:opacity .24s ease,transform .24s ease;}
.vsn-item:hover > a{background:rgba(255,255,255,.12);color:#fff;}
.vsn-item:hover > a i::before{opacity:.7;transform:translateY(0) scale(1);}
.vsn-item:hover > a i::after{opacity:0;transform:scale(.3);}
.vsn-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.vsn-util{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;
  background:none;border:0;cursor:pointer;font-size:15px;transition:.18s;position:relative;text-decoration:none;}
.vsn-util:hover{background:rgba(255,255,255,.12);}
.vsn-util.wa{color:var(--vs-green);font-size:18px;}
.vsn.solid .vsn-util.wa{color:var(--vs-green-dk);}
.vsn-util .count{position:absolute;top:3px;right:2px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;
  background:var(--vs-green);color:#fff;font:700 9px 'Inter',sans-serif;display:flex;align-items:center;justify-content:center;}
.vsn-cta{margin-left:6px;background:var(--vs-green);color:#fff;border-radius:10px;padding:10px 18px;
  font:700 13.5px 'Inter',sans-serif;text-decoration:none;white-space:nowrap;transition:.16s;}
.vsn-cta:hover{background:var(--vs-green-dk);}
.vsn-burger{display:none;width:42px;height:42px;border-radius:11px;align-items:center;justify-content:center;
  color:#fff;background:none;border:0;font-size:20px;cursor:pointer;}

/* SOLID: detach into floating frosted pill */
.vsn.solid{top:12px;}
.vsn.solid .vsn-in{background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.6);border-radius:18px;box-shadow:0 18px 44px -18px rgba(0,79,89,.5);padding-top:12px;padding-bottom:12px;}
.vsn.solid .vsn-logo{height:38px;}
.vsn.solid .vsn-logo .light{display:none;}
.vsn.solid .vsn-logo .dark{display:block;}
.vsn.solid .vsn-item > a{color:var(--vs-dark);}
.vsn.solid .vsn-item:hover > a{background:color-mix(in srgb,var(--vs-teal) 8%,#fff);color:var(--vs-teal);}
.vsn.solid .vsn-util{color:var(--vs-teal);}
.vsn.solid .vsn-util:hover{background:color-mix(in srgb,var(--vs-teal) 10%,#fff);}
.vsn.solid .vsn-burger{color:var(--vs-teal);}

/* MEGA DROPDOWN */
/* dropdown drops cleanly BELOW the nav bar with a small gap — no intersection with the bar.
   (A true "emerge from behind the bar" needs the bar to be opaque + the mega outside the bar's
   stacking context; the bar is transparent over heroes, so a clean gap is the right call.) */
.vsn-mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border-radius:0 0 18px 18px;box-shadow:0 30px 70px -24px rgba(0,79,89,.45);border:1px solid rgba(0,79,89,.08);
  padding:22px;opacity:0;visibility:hidden;transition:.22s cubic-bezier(.2,.8,.2,1);z-index:50;}
.vsn-item:hover .vsn-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
/* first dropdown (Machines) is wide + leftmost, so centring runs it off the page — left-align its
   mega to the nav-bar's left edge instead (position it against .vsn-in, the centred nav shell). */
.vsn-in{position:relative;}
/* first item (Machines) stays position:relative like the rest so its mega's top:100%
   resolves against the item (tucks under the bar, no gap); left:0 keeps the wide mega
   left-aligned to the item instead of centred (which would overflow the viewport edge). */
.vsn-menu .vsn-item:first-child .vsn-mega{left:0;transform:translateY(8px);}
.vsn-menu .vsn-item:first-child:hover .vsn-mega{transform:translateY(0);}
.vsn-mega::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px;}
.vsn-mega-grid{display:grid;gap:6px;}
.vsn-w2{width:520px;grid-template-columns:1fr 1fr;}
.vsn-w3{width:720px;grid-template-columns:1fr 1fr 1fr;}
.vsn-col-h{font:700 11px 'Inter',sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--vs-green-dk);padding:8px 12px 4px;}
.vsn-w2 .vsn-col-h,.vsn-w3 .vsn-col-h{grid-column:auto;}
.vsn-mega a.mi{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;text-decoration:none;transition:.14s;}
.vsn-mega a.mi:hover{background:var(--vs-cream);}
.vsn-mega a.mi i{width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--vs-teal) 8%,#fff);color:var(--vs-teal);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto;}
.vsn-mega a.mi b{display:block;font:700 14px 'Inter',sans-serif;color:var(--vs-dark);}
.vsn-mega a.mi span{font-size:12px;color:var(--vs-grey);}
.vsn-foot{grid-column:1/-1;margin-top:8px;border-top:1px solid rgba(0,79,89,.08);padding-top:12px;display:flex;justify-content:space-between;align-items:center;}
.vsn-foot a{font:700 13px 'Inter',sans-serif;color:var(--vs-teal);text-decoration:none;}

/* SEARCH OVERLAY (covers the bar). TOP = reversed white over hero; SOLID = frosted white. */
.vsn-search{position:absolute;inset:0;z-index:60;display:flex;align-items:center;gap:14px;
  padding:0 clamp(6px,1.2vw,14px);background:transparent;border-radius:inherit;
  opacity:0;visibility:hidden;transition:opacity .18s;}
.vsn.searching .vsn-search{opacity:1;visibility:visible;}
.vsn.searching .vsn-in{border-radius:18px;}
/* hide the rest of the bar so only the search field shows */
.vsn.searching .vsn-logo,.vsn.searching .vsn-menu,.vsn.searching .vsn-right{opacity:0;visibility:hidden;}
.vsn-search i.mag{color:#fff;font-size:20px;flex:0 0 auto;}
.vsn-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  font:400 22px Roboto,sans-serif;color:#fff;caret-color:#fff;}
.vsn-search input::placeholder{color:rgba(255,255,255,.6);}
.vsn-search .x{background:none;border:0;font-size:28px;line-height:1;color:#fff;cursor:pointer;padding:4px 6px;}
.vsn-search .x:hover{color:var(--vs-green);}
/* SOLID (detached pill) = frosted white search with teal marks */
.vsn.solid .vsn-search{background:rgba(255,255,255,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.vsn.solid .vsn-search i.mag,.vsn.solid .vsn-search .x{color:var(--vs-teal);}
.vsn.solid .vsn-search input{color:var(--vs-dark);caret-color:var(--vs-teal);}
.vsn.solid .vsn-search input::placeholder{color:var(--vs-grey);}

/* MOBILE slide-in menu + bottom app bar */
.vsn-mobile{display:none;}
.vsn-mmenu{position:fixed;inset:0;z-index:1300;background:var(--vs-teal);color:#fff;transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;}
.vsn-mmenu.open{transform:none;}
.vsn-mtop{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.12);}
.vsn-mtop img{height:36px;}
.vsn-mx{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.1);border:0;color:#fff;font-size:18px;cursor:pointer;}
.vsn-msearch{margin:18px 20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border-radius:12px;padding:13px 16px;}
.vsn-msearch input{flex:1;background:none;border:0;outline:0;color:#fff;font:500 15px 'Inter',sans-serif;}
.vsn-msearch input::placeholder{color:rgba(255,255,255,.5);}
.vsn-macc{flex:1;overflow-y:auto;padding:0 12px 20px;}
.vsn-msec{border-bottom:1px solid rgba(255,255,255,.1);}
.vsn-msec > button{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;color:#fff;
  font:700 17px 'Inter',sans-serif;padding:18px 8px;cursor:pointer;}
.vsn-msec > button i{transition:transform .25s;color:var(--vs-green);}
.vsn-msec.open > button i{transform:rotate(180deg);}
.vsn-msub{max-height:0;overflow:hidden;transition:max-height .3s;display:grid;grid-template-columns:1fr 1fr;column-gap:8px;}
.vsn-msub a{display:block;color:rgba(255,255,255,.8);text-decoration:none;font:500 14px 'Inter',sans-serif;padding:10px 8px 10px 16px;}
.vsn-mcta{margin:16px 20px 22px;display:flex;gap:10px;}
.vsn-mcta a{flex:1;text-align:center;border-radius:12px;padding:15px;font:700 15px 'Inter',sans-serif;text-decoration:none;}
.vsn-appbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:1200;background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);border-top:1px solid rgba(0,79,89,.1);box-shadow:0 -8px 24px -14px rgba(0,79,89,.35);
  justify-content:space-around;padding:8px 4px;}
.vsn-appbar a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--vs-dark);text-decoration:none;
  font:600 10px 'Inter',sans-serif;padding:6px;flex:1;}
.vsn-appbar a i{font-size:18px;}
.vsn-appbar a.q i{background:var(--vs-green);color:#fff;width:46px;height:46px;border-radius:15px;display:flex;align-items:center;
  justify-content:center;margin-top:-24px;box-shadow:0 8px 18px -4px rgba(170,183,91,.65);font-size:20px;}

/* distinct quote basket: teal tint so it reads apart from the green consumables cart */
.vsn-util.quote .count{background:var(--vs-teal-lt);}
.vsn.solid .vsn-util.quote{color:var(--vs-green-dk);}
/* Bottom app-bar REVIVED 2026-07-03 (user wants app-like mobile): Home/Machines/Quote/Shop/Enquire.
   Enquire opens the hub bottom-sheet (js-open-form); replaces the full-width GET IN TOUCH bar.
   Hidden on machine PDPs — the sticky quote CTA owns the bottom edge there. */
@media(max-width:899px){
  .vsn-appbar{display:flex!important;padding-bottom:calc(8px + env(safe-area-inset-bottom,0));}
  body{padding-bottom:74px!important;}
  #vs-tab-mobile{display:none!important;}
  body.single-product .vsn-appbar{display:none!important;}
  body.single-product .pv-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:flex;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0));background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);border-top:1px solid rgba(0,79,89,.12);box-shadow:0 -8px 24px -14px rgba(0,79,89,.35);}
  body.single-product .pv-sticky-cta .btn{flex:1;justify-content:center;}
}
@media(min-width:900px){.vsn-appbar,.pv-sticky-cta{display:none!important;}}

/* Collapse the text menu to the burger at <=1120px: the 7 top-level items + the
   right icon cluster need ~1050px to fit, and below that the right icons used to
   overflow off the bar. Above 1120 the full menu fits with margin to spare. */
@media(max-width:1120px){
  :root{--vs-nav-h:64px;}
  .vsn-menu{display:none;}                 /* text menu moves into the slide-in */
  .vsn-right .vsn-util{display:flex;}      /* keep the icon dashboard next to the logo */
  .vsn-burger{display:flex;}
  .vsn-mobile{display:block;} body{padding-bottom:0;}
  .vsn-right{gap:2px;} .vsn-util{width:36px;height:36px;font-size:15px;}
  .vsn-in{gap:10px;}
}
@media(max-width:460px){ .vsn-sm-hide{display:none!important;} .vsn-in{gap:6px;} .vsn-logo{height:36px;} }

/* ===== FOOTER (teal, lime top border) ===== */
.vsx-footer{background:var(--vs-teal);border-top:3px solid var(--vs-lime);color:rgba(255,255,255,.8);font-size:14px;}
.vsx-foot-grid{max-width:var(--vs-shell,1280px);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr 1.2fr;gap:32px;padding:56px 24px 40px;}
.vsx-footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.09em;margin:0 0 16px;}
.vsx-footer a{color:rgba(255,255,255,.8);text-decoration:none;}
.vsx-footer a:hover{color:var(--vs-lime);}
.vsx-footer ul{list-style:none;margin:0;padding:0;}
.vsx-footer li{margin:0 0 9px;font-size:13.5px;}
.vsx-foot-logo img{height:46px;margin-bottom:16px;filter:brightness(0) invert(1);}
.vsx-foot-blurb{line-height:1.7;max-width:300px;margin:0 0 16px;}
.vsx-foot-contact{line-height:2;}
.vsx-foot-contact i{color:var(--vs-lime);width:18px;margin-right:6px;}
.vsx-foot-social{display:flex;gap:10px;margin-top:16px;}
.vsx-foot-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff;}
.vsx-foot-social a:hover{background:var(--vs-lime);border-color:var(--vs-lime);color:var(--vs-teal);}
.vsx-foot-iso{display:flex;gap:14px;margin-top:20px;}
.vsx-foot-iso img{height:72px;width:auto;filter:brightness(0) invert(1);opacity:.9;}
.vsx-foot-btn{display:inline-block;margin-top:10px;padding:9px 16px;border:1px solid var(--vs-lime);border-radius:6px;color:#fff;text-transform:uppercase;font-size:12px;letter-spacing:.05em;font-weight:600;}
.vsx-foot-btn:hover{background:var(--vs-lime);color:var(--vs-teal)!important;}
.vsx-foot-bottom{border-top:1px solid rgba(255,255,255,.12);}
.vsx-foot-bottom div{max-width:var(--vs-shell,1280px);margin:0 auto;padding:18px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,.5);}
.vsx-foot-bottom a{color:rgba(255,255,255,.5);}
@media(max-width:980px){.vsx-foot-grid{grid-template-columns:1fr 1fr 1fr;}}
@media(max-width:620px){.vsx-foot-grid{grid-template-columns:1fr 1fr;gap:24px;}}
/* keep the footer at 2 columns on mobile (was collapsing to 1) */
@media(max-width:420px){.vsx-foot-grid{grid-template-columns:1fr 1fr;gap:20px;}}


/* ===== vs-responsive ===== */
/* ============================================================
   Responsive container system  (hand-authored — NOT regenerated
   by dedupe_css.py; loaded after vs-global.css + delta)

   ONE shared container (--vs-shell), centred on screen. Inside it:
   content fills the left, the persistent enquiry form occupies the
   right column (anchored to the shell's right edge, not the viewport
   edge). Header, footer, content and form all align to --vs-shell,
   so the layout reads as one cohesive block and never glues to the
   screen edge on high-res displays. Full-bleed backgrounds still
   stretch edge to edge.
   ============================================================ */
:root{
  --vs-shell:1400px;                     /* unified container width */
  --vs-gut:clamp(20px,5vw,48px);         /* outer gutter, fluid */
  --vs-pad-y:clamp(56px,8vw,104px);      /* section vertical rhythm */
  --vs-form-w:340px;                     /* form panel width (slightly wider) */
  --vs-form-gap:28px;                    /* gap between content and form */
  --vs-form-clear:0px;                   /* right reserve = form column when open */
  --vs-edge:max(var(--vs-gut),calc((100% - var(--vs-shell)) / 2)); /* shell outer gutter */
}
/* reserve the form column only while it is open (desktop) */
@media(min-width:900px){ body.vs-form-open.vs-hub-lead-page{ --vs-form-clear:calc(var(--vs-form-w) + var(--vs-form-gap)); } }
@media(min-width:900px){ body.vs-form-open:not(.vs-hub-lead-page){ --vs-form-clear:0px!important; } }
/* non-lead pages: open hub OVERLAYS content — no clearance reflow (user 2026-07-02) */

/* Cap + centre content in the shell; reserve the form column on the right. */
.vs-pain,.vs-benefit-cards,.vs-benefits,.vs-how,.vs-faq,.vs-machine,
.vs-features-highlight,.vs-objections,.vs-stocks,.vs-cta-close,
.vs-trust-strip,.vs-iso-strip{
  padding-left:var(--vs-edge)!important;
  padding-right:calc(var(--vs-form-clear) + var(--vs-edge))!important;
  transition:padding .35s cubic-bezier(.4,0,.2,1);
}
/* Tall content sections also get fluid vertical rhythm. */
.vs-pain,.vs-benefit-cards,.vs-benefits,.vs-how,.vs-faq,.vs-machine,
.vs-features-highlight,.vs-objections,.vs-stocks,.vs-cta-close{
  padding-block:var(--vs-pad-y)!important;
}

/* Inner blocks fill the (shell − form) content box. */
.vs-pain-grid,.vs-benefit-grid,.vs-benefits-grid,.vs-features-grid,
.vs-machine-grid-4,.vs-machine-grid-3,.vs-trust-inner,.vs-iso-inner{
  max-width:none!important;width:100%;
}
.vs-iso-inner{margin-inline:0!important;}

/* Prose at a readable measure. */
.vs-section-sub,.vs-cta-close p{max-width:68ch;}

/* Hero: align to the shell, no form reserve (form is only a tab here). */
.vs-hero{padding-left:var(--vs-edge)!important;padding-right:var(--vs-edge)!important;}

/* Form panel: anchor to the shell's right edge + widen it. */
@media(min-width:900px){
  .vs-form-panel{
    right:var(--vs-edge)!important;
    width:var(--vs-form-w)!important;
  }
  /* Enquire tab must share the panel's right edge + width so it lines up
     with the panel it expands into (was stuck at right:20px/width:300px). */
  #vs-tab-desktop{
    right:var(--vs-edge)!important;
    width:var(--vs-form-w)!important;
  }
}

/* New vs-ui / biz landing pages: reserve the same form column when the form is open
   (mirrors the .vs-* clearance above; uses --pad from the .vsu shell). Heroes are
   left full-width on purpose — the form is only a tab over the hero. */
.vsu-sec,.vsu-cta,.biz-cta,.biz-band,.vsu-wwbut,.relm,
.vs-pain,.vs-benefit-cards,.vs-benefits,.vs-how,.vs-machine,.vs-faq,.vs-cta-close,.vs-objections,.vs-trust-strip,.vs-iso-strip,.lcar{transition:padding .35s cubic-bezier(.4,0,.2,1);}
@media(min-width:900px){
  body.vs-form-open .vsu-sec,
  body.vs-form-open .vsu-cta,
  body.vs-form-open .biz-cta,
  body.vs-form-open .biz-band{padding-right:calc(var(--pad) + var(--vs-form-clear))!important;}
  /* legacy sector sections (full-bleed, no --pad) — clear the locked-open form too */
  body.vs-form-open .vs-pain,
  body.vs-form-open .vs-benefit-cards,
  body.vs-form-open .vs-benefits,
  body.vs-form-open .vs-how,
  body.vs-form-open .vs-machine,
  body.vs-form-open .vs-faq,
  body.vs-form-open .vs-cta-close,
  body.vs-form-open .vs-objections,
  body.vs-form-open .vs-industries,
  body.vs-form-open .vs-features-highlight,
  body.vs-form-open .vs-specs,
  body.vs-form-open .vs-trust-strip,
  body.vs-form-open .sf-lifestyle,
  body.vs-form-open .sf-band,
  body.vs-form-open .vs-iso-strip{padding-right:calc(var(--vs-edge) + var(--vs-form-clear))!important;}
  /* workplace-vending ported template (.section X full-bleed sections) — clear the form too */
  body.vs-form-open .pain-section,
  body.vs-form-open .full-service,
  body.vs-form-open .handle-section,
  body.vs-form-open .cashless-section,
  body.vs-form-open .smart-fridges,
  body.vs-form-open .testimonials,
  body.vs-form-open .how-it-works,
  body.vs-form-open .branding-section,
  body.vs-form-open .objections,
  body.vs-form-open .cta-close,
  body.vs-form-open .stats-bar,
  body.vs-form-open .trust-strip,
  body.vs-form-open .hero{padding-right:calc(48px + var(--vs-form-clear))!important;transition:padding .35s;}
  /* WWBUT strip + logo carousel self-pad to the shell; add the form column on top so
     their scroll rows clear the sticky enquiry panel. */
  body.vs-form-open .vsu-wwbut,
  body.vs-form-open .relm,
  body.vs-form-open .lcar{padding-right:calc(max(var(--vs-gut,32px),calc((100% - var(--vs-shell,1400px)) / 2)) + var(--vs-form-clear))!important;}
}

/* Overflow + mobile safety. */
img,video{max-width:100%;height:auto;}
@media(max-width:560px){ .vs-hero{padding-top:140px!important;} }

/* ============================================================
   MOBILE APP FEEL (<=600px) — denser, more 2-column, fewer
   single-column rows. body-prefixed so these win over the
   per-page delta @media rules that collapse grids to 1 column.
   (Image+text splits, the explore image-cards, testimonials and
   the product cards stay single-column on purpose.)
   ============================================================ */
@media(max-width:600px){
  /* Trust strip: ~7 stacked rows -> compact 2-column chip grid */
  body .vs-trust-inner{display:grid!important;grid-template-columns:1fr 1fr!important;}
  body .vs-trust-item{min-width:0!important;max-width:none!important;flex:none!important;
    justify-content:flex-start!important;padding:11px 12px!important;
    border-right:1px solid rgba(255,255,255,.07)!important;}
  body .vs-trust-item span{font-size:11.5px!important;white-space:normal!important;line-height:1.18!important;}
  body .vs-trust-item i{font-size:13px!important;}

  /* Card / feature / stat grids -> 2 columns */
  body .vsu-cards,
  body .vs-pain-grid,body .vs-benefit-grid,body .vs-benefits-grid,
  body .vs-objections-grid,body .vs-features-grid,body .vs-industries-grid,
  body .h-stats .row,body .vs-stats,body .vsu-team{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}

  /* compact the cards so two fit comfortably side-by-side */
  body .vs-pain-card,body .vs-benefit-col,body .vs-objection-card,body .vsu-card,
  body .vs-benefit-card,body .vs-feature-card,body .vs-industry-card,
  body .vs-benefits-grid > *,body .vs-objections-grid > *{padding:15px 13px!important;}
  body .vs-pain-card h3,body .vs-benefit-col h3,body .vsu-card h3,
  body .vs-objection-card h3,body .vs-benefits-grid h3,body .vs-objections-grid h3{
    font-size:.96rem!important;line-height:1.2!important;}
  body .vs-pain-card p,body .vs-benefit-col p,body .vsu-card p,
  body .vs-objection-card p,body .vs-benefits-grid p,body .vs-objections-grid p{
    font-size:.8rem!important;line-height:1.45!important;}

  /* tighter vertical rhythm = app density */
  body .vsu-sec.vsu-sec--pad{padding-block:clamp(32px,7vw,52px)!important;}
}

/* When the persistent enquiry form is open it narrows the content zone; keep the consumables
   promo 2-column (text beside image) but shrink the image a touch so it fits the narrower zone. */
@media(min-width:900px){
  body.vs-form-open .cons-promo-in{grid-template-columns:0.85fr 1fr!important;gap:clamp(24px,2.5vw,40px)!important;}
  body.vs-form-open .cons-promo-media{max-width:420px;}
}

/* Sticky filter/category bar (Our Vending Machines etc.) — compact on mobile so it
   doesn't eat vertical rows, and it already sticks below the nav (see .vsu-bar top). */
@media(max-width:600px){
  body .vsu-bar{padding:7px var(--pad)!important;}
  body .vsu-bar-row{gap:6px!important;row-gap:6px!important;}
  body .vsu-select,body .vsu-search input{padding:6px 11px!important;font-size:12px!important;}
  body .vsu-search input{width:120px!important;padding-left:30px!important;}
  body .vsu-pill,body .cv-pill,body .cat-nav .vsu-pill,body .wc-catnav .vsu-pill{padding:6px 11px!important;font-size:12px!important;}
}


/* ===== block-theme full-bleed reset ===== */
/* The redesign owns its own full-width sections; kill WP's root padding + the
   constrained/flow layout padding/margins/max-width so heroes go edge-to-edge and
   sit flush under the fixed nav (no top/side gaps, no inter-section block margins). */
:root,body{--wp--style--root--padding-top:0px;--wp--style--root--padding-right:0px;--wp--style--root--padding-bottom:0px;--wp--style--root--padding-left:0px;}
html,body{margin:0;padding:0;}
main.vsu,main.vsu > .wp-block-post-content,.wp-block-post-content,.entry-content{margin:0!important;padding:0!important;max-width:none!important;width:auto!important;}
main.vsu > *,.wp-block-post-content > *{margin-block-start:0!important;margin-block-end:0!important;}
/* root-level flow gap between header/main/footer template parts (gap above footer) */
.wp-site-blocks > *{margin-block-start:0!important;margin-block-end:0!important;}
footer.wp-block-template-part,.vsx-footer{margin-top:0!important;margin-block-start:0!important;}


/* ===== nav clearance (one-off heroes) ===== */
.bk-head,.co-head,.ac-head,.nw-head,.ar-hero,.cat-head,.cc-hero{padding-top:calc(var(--vs-nav-h,84px) + clamp(22px,3vw,38px))!important;}
.h-hero .lead{padding-top:calc(var(--vs-nav-h,84px) + 14px)!important;}
.cl-hero{padding-top:calc(var(--vs-nav-h,84px) + clamp(30px,4vw,52px))!important;padding-bottom:clamp(40px,6vw,72px)!important;}
body:has(.vsn-mmenu.open) #vs-tab-mobile{opacity:0;pointer-events:none;}
/* compact sector heroes (.vs-hero) — hug content, comfortable-but-tight spacing; element SIZES
   unchanged, only spacing. Overrides the per-page delta (padding:200px..;min-height:560px) via !important. */
.vs-hero{padding-top:calc(var(--vs-nav-h,84px) + clamp(14px,2vw,22px))!important;padding-bottom:clamp(28px,3.4vw,42px)!important;min-height:0!important;}
.vs-hero-badge{margin-bottom:18px!important;}
.vs-hero h1{margin-top:0!important;margin-bottom:14px!important;}
.vs-hero-sub{margin-bottom:22px!important;}
.vs-hero-btns{margin-bottom:0!important;}


/* ===== WooCommerce: render product loops ([products]/shop/category) as .pc-card grids ===== */
.woocommerce ul.products,ul.products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(16px,2vw,26px);margin:0!important;padding:clamp(22px,3vw,34px) var(--pad)!important;list-style:none!important;}
.woocommerce ul.products li.product,ul.products li.product{width:auto!important;margin:0!important;padding:0!important;float:none!important;}
/* result-count + ordering bar: align to the pagehead's --pad gutter (was flush to the edge) */
main.vsu .woocommerce-notices-wrapper,main.vsu .woocommerce-result-count,main.vsu .woocommerce-ordering,main.vsu nav.woocommerce-pagination{padding-inline:var(--pad);box-sizing:border-box;}
main.vsu .woocommerce-result-count{margin:22px 0 0;}main.vsu .woocommerce-ordering{margin-top:14px;}
/* cross-category pill nav above the loop (vs_vending_cat_pills) — same --pad gutter as the count */
main.vsu .wc-catnav{padding-inline:var(--pad);box-sizing:border-box;margin:30px 0 22px!important;display:flex;flex-wrap:wrap;gap:8px;}
main.vsu .wc-catnav .vsu-pill{flex:0 0 auto;text-decoration:none;}
@media(max-width:640px){main.vsu .wc-catnav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}}
ul.products li.product::before{display:none!important;content:none!important;}
/* WC/theme clearfix ::before/::after on ul.products become GRID ITEMS and steal the first/last
   cell, shoving every card one column right — kill them so cards fill from column 1. */
.woocommerce ul.products::before,.woocommerce ul.products::after,ul.products::before,ul.products::after{content:none!important;display:none!important;}
ul.products li.product .pc{margin:0;height:100%;}
.woocommerce ul.products li.product a img{margin:0;}
/* Card actions: Details (.btn-o) + Quote (.btn .btn-p .vsq-add) split the card width
   equally. The quote button is our own <button data-vsq-add>; .btn/.btn-p (vs-ui) size it. */
.pc-act{display:flex;gap:9px;align-items:stretch;}
.pc-act > *{flex:1 1 0;min-width:0;}
.pc-act .btn,.pc-act .button{flex:1 1 0;justify-content:center;}
.pc-act .vsq-add{width:100%;}
/* our quote button is a <button> (data-vsq-add) — strip native chrome so .btn/.btn-p own it */
button.btn{border:0;cursor:pointer;-webkit-appearance:none;appearance:none;font-family:'Inter',sans-serif;}
/* Consumables fall back to WC add-to-cart — match the same teal .btn pill. */
.pc-act .button,.pc-act a.button,.pc-act .add_to_cart_button,.pc-act .ajax_add_to_cart{display:inline-flex!important;align-items:center;justify-content:center;gap:7px;background:var(--vs-teal)!important;color:#fff!important;font:600 13px 'Inter',sans-serif!important;border-radius:9px!important;padding:11px 16px!important;line-height:1!important;height:auto!important;min-height:0!important;text-decoration:none;border:0!important;cursor:pointer;transition:.16s;margin:0!important;white-space:nowrap;box-sizing:border-box;text-transform:none!important;flex:1 1 0;}
.pc-act .button:hover,.pc-act a.button:hover{background:var(--vs-teal-dk)!important;color:#fff!important;}
.pc-act .added_to_cart{display:none;}
.pc-price ins{text-decoration:none;}.pc-price del{opacity:.5;font-size:.85em;font-weight:400;}
.woocommerce-result-count,.woocommerce-ordering{font-family:'Inter',sans-serif;}


/* ===== product cards: break in pairs (4 → 2 → 1) + card-width type scaling ===== */
/* The sector/RELM sets break 4→2→1 (never 3). cols set on the grid (P1) + its inner ul (P2). */
.vs-machine-grid-4,.vs-coffee-grid-4,.vs-machine-grid,.vs-machine-grid-3,
.vs-machine-grid-4 > .woocommerce > ul.products,.vs-coffee-grid-4 > .woocommerce > ul.products,
.vs-machine-grid > .woocommerce > ul.products,.vs-machine-grid-3 > .woocommerce > ul.products{grid-template-columns:repeat(4,1fr)!important;}
@media(max-width:1100px){.vs-machine-grid-4,.vs-coffee-grid-4,.vs-machine-grid,.vs-machine-grid-3,
  .vs-machine-grid-4 > .woocommerce > ul.products,.vs-coffee-grid-4 > .woocommerce > ul.products,
  .vs-machine-grid > .woocommerce > ul.products,.vs-machine-grid-3 > .woocommerce > ul.products{grid-template-columns:repeat(2,1fr)!important;}}
@media(max-width:600px){.vs-machine-grid-4,.vs-coffee-grid-4,.vs-machine-grid,.vs-machine-grid-3,
  .vs-machine-grid-4 > .woocommerce > ul.products,.vs-coffee-grid-4 > .woocommerce > ul.products,
  .vs-machine-grid > .woocommerce > ul.products,.vs-machine-grid-3 > .woocommerce > ul.products{grid-template-columns:1fr!important;}}
/* card text scales with the CARD width (container query) so wider 2-up cards fill more nicely */
.pc{container-type:inline-size;}
@container (min-width:300px){
  .pc h3{font-size:1.1rem;}
  .pc .chip{font-size:11.5px;}
}
@container (min-width:380px){
  .pc h3{font-size:1.22rem;line-height:1.25;}
  .pc-brand{font-size:11.5px;letter-spacing:1.6px;}
  .pc .chip{font-size:12.5px;padding:6px 11px;}
  .pc-price{font-size:1.12rem;}
  .pc-act .btn,.pc-act .button{font-size:14px;padding-top:13px;padding-bottom:13px;}
}


/* ===== landing-page product grids: collapse legacy per-card shells ===== */
/* Many landing pages (sectors / use-cases) wrap each [products] in a decorative
   .vs-machine-card / .vs-coffee-card shell with a duplicate title+description body.
   content-product.php now renders the real .pc card (name + chips + Quote + compare),
   so the shell is redundant card-in-card. The shells' decorative CSS is NOT !important,
   so these collapse them: the .pc card sits directly in the grid, matching the catalogue. */
.vs-machine-card,.vs-coffee-card{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important;display:flex!important;flex-direction:column;}
.vs-machine-card-body,.vs-coffee-body{display:none!important;}
.vs-machine-card-img{background:none!important;border:0!important;padding:0!important;min-height:0!important;}
.vs-machine-card .woocommerce,.vs-coffee-card .woocommerce{padding:0!important;}
/* Equal-height cards: the grid stretches the card / li.product to the row height, but the .pc's
   height:100% can't resolve through the auto-height [products] nesting (.woocommerce > ul > li).
   Flex the chain to a column so the .pc fills the stretched cell → consistent heights per row +
   bottom-aligned Quote buttons. */
/* `body ` prefix raises specificity above the sector pages' inline delta CSS, which forces
   `.vs-machine-card ul.products{display:block!important}` (loads after the theme bundle). */
body .vs-machine-card .woocommerce,body .vs-coffee-card .woocommerce,
body .vs-machine-card ul.products,body .vs-coffee-card ul.products{flex:1 1 auto!important;min-height:0;display:flex!important;flex-direction:column!important;}
body .vs-machine-card ul.products > li.product,body .vs-coffee-card ul.products > li.product{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
ul.products > li.product{display:flex;flex-direction:column;}
body .vs-machine-card .pc,body .vs-coffee-card .pc,ul.products > li.product > .pc{flex:1 1 auto;margin:0;}
/* a [products columns=N] placed DIRECTLY in a grid wrapper renders div.woocommerce>ul.products;
   the wrapper's own 4-col grid crushes that single .woocommerce child into one cell (cards stack).
   When the wrapper holds the shortcode directly, drop its grid and let ul.products (its own
   responsive grid) own the columns. P1 (cards in .vs-machine-card shells) is unaffected — its
   direct children are the shells, not .woocommerce. */
.vs-machine-grid-4:has(> .woocommerce),.vs-coffee-grid-4:has(> .woocommerce),.vs-machine-grid:has(> .woocommerce),.vs-machine-grid-3:has(> .woocommerce){display:block!important;}
.vs-machine-grid-4 ul.products,.vs-coffee-grid-4 ul.products,.vs-machine-grid ul.products,.vs-machine-grid-3 ul.products{margin:0!important;}
/* Floating enquiry-form clearance is applied in JS (vs-app.js applyClearance) — it reads live
   geometry and caps each grid's width so cards never sit under the fixed form, then resets on
   close. (A class-conditional CSS max-width with min(100vw…) didn't re-apply reliably on toggle
   for some centered grids, so JS owns this now.) A smooth transition for the JS cap: */
.vs-machine-grid-4,.vs-coffee-grid-4,.vs-machine-grid,.vs-machine-grid-3,
.vs-machine-grid-4 > .woocommerce > ul.products,.vs-coffee-grid-4 > .woocommerce > ul.products{transition:max-width .3s ease;}


/* ===== WooCommerce single product (PDP) — redesigned product-v2 layout ===== */
/* pagehead full-bleed (function injects .vsu-pagehead.wc-single-head before .product) */
/* two-column hero: WC gallery (left) + our buy-box summary (right) */
.single-product main.vsu div.product{display:grid!important;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start;padding:clamp(28px,4vw,46px) var(--pad) 0!important;max-width:none!important;margin:0!important;}
@media(max-width:860px){.single-product main.vsu div.product{grid-template-columns:1fr;}}
/* tabs + related/upsells fire inside .product (after_single_product_summary) — span both
   columns as full-width rows below the gallery|buy-box hero, not as grid cells beside it. */
.single-product main.vsu div.product>.vsu-pdp-tabs,.single-product main.vsu div.product>.related,.single-product main.vsu div.product>.up-sells,.single-product main.vsu div.product>.woocommerce-tabs{grid-column:1 / -1;}
.single-product div.product .woocommerce-product-gallery{width:100%!important;margin:0!important;float:none!important;background:#fff;border:1px solid rgba(0,79,89,.1);border-radius:18px;padding:clamp(16px,2vw,26px);box-sizing:border-box;}
.single-product div.product .woocommerce-product-gallery__wrapper,.single-product div.product .woocommerce-product-gallery__image{width:100%!important;max-width:none!important;margin:0!important;}
.single-product div.product .woocommerce-product-gallery figure,.single-product div.product .woocommerce-product-gallery img{margin:0!important;border-radius:10px;width:100%!important;height:auto!important;display:block;}
.single-product div.product .woocommerce-product-gallery__trigger{display:none;}
/* Hide any stray direct-child anchors in the single-product summary (leftover plugin
   links); OUR canonical quote button lives deep inside .pv-buy, so it's untouched. */
.single-product .summary > a{display:none!important;}
.single-product div.product .summary.entry-summary{margin:0!important;float:none!important;width:auto!important;}
/* buy box */
.pv-buy h1{display:none;}
.pv-buy .pc-chips{margin-bottom:18px;}
.pv-price{background:#fff;border:1px solid rgba(0,79,89,.1);border-radius:14px;padding:18px 20px;margin:0 0 18px;}
.pv-price .big{font:800 1.5rem 'Inter',sans-serif;color:var(--vs-teal);display:flex;align-items:baseline;gap:8px;}
.pv-price .big small{font-size:.8rem;font-weight:600;color:var(--vs-grey);}
.pv-price p{margin:6px 0 0;font-size:13px;color:var(--vs-grey);line-height:1.5;}
.pv-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin:0 0 12px;}
.pv-cta .vsq-add{flex:1;min-width:220px;}
.pv-cta .btn-p{flex:1;width:100%;}
.pv-wa{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--vs-green);color:#fff;border-radius:11px;padding:0 20px;min-height:50px;text-decoration:none;font:700 15px 'Inter',sans-serif;transition:.16s;}
.pv-wa i{font-size:26px;line-height:1;}.pv-wa:hover{background:var(--vs-green-dk);color:#fff;}
.pv-trust{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(0,79,89,.1);}
.pv-trust span{display:flex;align-items:center;gap:7px;font:600 12.5px 'Inter',sans-serif;color:var(--vs-grey);}
.pv-trust span i{color:var(--vs-green-dk);}
/* tabs + spec tiles (containers vsu-tabs/tabpane/prose/spec come from vs-ui) */
.vsu-pdp-tabs{padding:clamp(40px,6vw,72px) var(--pad);}
.pv-specgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:32px;}
.pv-stile{background:#fff;border:1px solid rgba(0,79,89,.1);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:4px;transition:.16s;}
.pv-stile:hover{border-color:rgba(0,79,89,.25);box-shadow:0 10px 24px -14px rgba(0,79,89,.3);}
.pv-stile i{color:var(--vs-teal);font-size:1.15rem;margin-bottom:6px;}
.pv-stile b{font:800 1.05rem 'Inter',sans-serif;color:var(--vs-dark);line-height:1.25;}
.pv-stile span{font:600 11px 'Inter',sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--vs-grey);}
.vsu-spec{max-width:640px;width:100%;border-collapse:collapse;}
.vsu-spec th,.vsu-spec td{text-align:left;padding:11px 14px;font-size:14px;border-bottom:1px solid rgba(0,79,89,.08);}
.vsu-spec th{color:var(--vs-grey);font-weight:600;width:42%;}.vsu-spec td{color:var(--vs-dark);}
.vsu-spec tr:nth-child(even){background:color-mix(in srgb,var(--vs-cream) 60%,#fff);}
/* related (WC outputs .related.products with our .pc cards) */
.single-product .related.products,.single-product .up-sells{padding:clamp(34px,5vw,64px) var(--pad);border-top:1px solid rgba(0,79,89,.08);}
.single-product .related.products>h2,.single-product .up-sells>h2{font:800 1.55rem 'Inter',sans-serif;color:var(--vs-dark);margin:0 0 24px;letter-spacing:-.4px;}
.single-product .related.products ul.products,.single-product .up-sells ul.products{padding-inline:0!important;}
/* ===== PDP redesign: right-column tabs + brochure + features + service hub ===== */
.pv-cta-row{display:flex;gap:10px;width:100%;margin-top:10px;}
.pv-broch{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1.5px solid var(--vs-teal);color:var(--vs-teal);border-radius:11px;min-height:46px;padding:0 14px;text-decoration:none;font:700 13.5px 'Inter',sans-serif;transition:.16s;}
.pv-broch:hover{background:var(--vs-teal);color:#fff;}
.pv-cta-row .pv-wa{flex:1;min-height:46px;padding:0 14px;font-size:13.5px;}
.pv-cta-row .pv-wa i{font-size:20px;}
.pv-broch-note{margin:8px 0 0;font-size:11px;color:var(--vs-grey);text-align:center;}
.single-product .summary .vsu-pdp-tabs{padding:22px 0 0!important;}
.single-product .summary .pv-specgrid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.single-product .summary .pv-stile{padding:14px;}
.single-product .summary .pv-stile b{font-size:.95rem;}
.pv-glance{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.pv-gl{background:color-mix(in srgb,var(--vs-cream) 70%,#fff);border-radius:10px;padding:11px 13px;display:flex;flex-direction:column;gap:2px;}
.pv-gl i{color:var(--vs-teal);font-size:1rem;margin-bottom:3px;}
.pv-gl b{font:800 .98rem 'Inter',sans-serif;color:var(--vs-dark);line-height:1.2;}
.pv-gl span{font:600 10.5px 'Inter',sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--vs-grey);}
.pv-feats{display:flex;flex-direction:column;gap:10px;margin:4px 0 18px;}
.pv-feat{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid rgba(0,79,89,.1);border-radius:14px;padding:12px 14px;box-shadow:0 3px 12px rgba(0,79,89,.05);transition:border-color .2s,box-shadow .2s;}
.pv-feat:hover{border-color:rgba(170,183,91,.6);box-shadow:0 6px 18px rgba(0,79,89,.1);}
.pv-feat-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--vs-green) 16%,#fff);color:var(--vs-green-dk,#8a9647);display:flex;align-items:center;justify-content:center;font-size:1.05rem;}
.pv-feat-img{flex:0 0 auto;width:84px;height:62px;border-radius:10px;overflow:hidden;background:var(--vs-cream);}
.pv-feat-img img{width:100%;height:100%;object-fit:cover;display:block;}
.pv-feat-tx b{font:800 .98rem 'Inter',sans-serif;color:var(--vs-dark);display:block;margin-bottom:2px;}
.pv-feat-tx p{margin:0;font-size:13px;color:var(--vs-grey);line-height:1.5;}
.pv-svc-hub{margin-top:6px;}
.pv-svc-wa{margin-top:14px;width:100%;min-height:48px;}
/* gallery sticks within its grid row (related/up-sells now render outside .product, so the
   grid = gallery+summary only → sticky bounds to the row, releases at its bottom, no overlap) */
@media(min-width:861px){.single-product main.vsu div.product>.vsu-gallery{position:sticky;top:calc(var(--vs-nav-h,84px) + 16px);align-self:start;}}
/* Specs tab: Capacity + Configuration as icon lists (split from the old dense capacity string) */
.pv-capcfg{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px;}
.pv-iconlist{background:#fff;border:1px solid rgba(0,79,89,.1);border-radius:14px;padding:16px 18px;}
.pv-iconlist-h{font:700 11px 'Inter',sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--vs-teal);margin-bottom:13px;}
.pv-il-row{display:flex;align-items:center;gap:11px;margin-bottom:11px;}
.pv-il-row:last-child{margin-bottom:0;}
.pv-il-ic{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:rgba(0,79,89,.08);color:var(--vs-teal);display:flex;align-items:center;justify-content:center;font-size:15px;}
.pv-il-v{font:800 14.5px 'Inter',sans-serif;color:var(--vs-dark);line-height:1.1;}
.pv-il-l{font-size:12.5px;color:var(--vs-grey);}
@media(max-width:560px){.pv-capcfg{grid-template-columns:1fr;}}
/* PDP tabs as a segmented pill control (scoped to PDP; other .vsu-tabs untouched) */
.vsu-pdp-tabs .vsu-tabs{display:flex;gap:4px;background:rgba(0,79,89,.06);border:1px solid rgba(0,79,89,.1);border-radius:12px;padding:4px;margin-bottom:22px;border-bottom:0;}
.vsu-pdp-tabs .vsu-tab{flex:1;text-align:center;padding:10px 8px;font:700 12.5px 'Inter',sans-serif;color:var(--vs-grey);border:0;border-radius:9px;background:none;cursor:pointer;transition:background .16s,color .16s,box-shadow .16s;white-space:nowrap;margin:0;}
.vsu-pdp-tabs .vsu-tab:hover{color:var(--vs-teal);}
.vsu-pdp-tabs .vsu-tab.on{background:rgba(0,79,89,.14);color:var(--vs-teal);border-bottom:0;box-shadow:none;}
/* placeholder notice (e.g. Service tab — content to be filled later) */
.pv-placeholder{border:1.5px dashed rgba(0,79,89,.25);border-radius:14px;padding:34px 24px;text-align:center;color:var(--vs-grey);}
.pv-placeholder i{font-size:24px;color:var(--vs-teal);opacity:.55;display:block;margin-bottom:10px;}
.pv-placeholder b{display:block;font:800 1.05rem 'Inter',sans-serif;color:var(--vs-dark);margin-bottom:6px;}
.pv-placeholder p{margin:0;font-size:13.5px;}


/* ===== Staff digital business card (Concept A — branded header + monogram) ===== */
.vsbc-main{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--vs-soft,#eef2f1);padding:32px 18px;box-sizing:border-box;}
.vsbc{width:100%;}
.vsbc-card{width:min(84vw,440px);margin:0 auto;background:#fff;border:1px solid rgba(0,79,89,.1);border-radius:24px;overflow:hidden;box-shadow:0 26px 64px -30px rgba(0,79,89,.5);}
.vsbc-band{background:var(--vs-teal);padding:32px 0;display:flex;align-items:center;justify-content:center;}
.vsbc-logo{width:50%;height:auto;display:block;}
.vsbc-body{padding:0 26px 30px;margin-top:-14px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.vsbc-mono,.vsbc-photo{width:104px;height:104px;border-radius:50%;border:4px solid #fff;flex:0 0 auto;box-shadow:0 8px 22px -10px rgba(0,79,89,.5);}
.vsbc-mono{background:var(--vs-teal-dk,#00343a);color:#fff;font:700 37px 'Inter',sans-serif;display:flex;align-items:center;justify-content:center;}
.vsbc-photo{object-fit:cover;}
.vsbc-name{font:800 clamp(1.6rem,5vw,1.9rem) 'Inter',sans-serif;color:var(--vs-dark,#10242a);margin:16px 0 0;letter-spacing:-.6px;line-height:1.12;}
.vsbc-title{font:500 clamp(1rem,3.4vw,1.12rem) 'Inter',sans-serif;color:var(--vs-grey,#6b7b7d);margin:4px 0 0;}
.vsbc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 14px 'Inter',sans-serif;padding:14px 18px;border-radius:13px;text-decoration:none;transition:.16s;box-sizing:border-box;width:100%;}
.vsbc-btn i{font-size:1.02em;}
.vsbc-btn-p{background:var(--vs-teal);color:#fff;margin-top:22px;box-shadow:0 12px 26px -14px rgba(0,79,89,.6);}
.vsbc-btn-p:hover{background:var(--vs-teal-dk);color:#fff;}
.vsbc-btn-o{background:#fff;border:1px solid rgba(0,79,89,.22);color:var(--vs-teal);}
.vsbc-btn-o:hover{background:color-mix(in srgb,var(--vs-teal) 7%,#fff);}
.vsbc-row{display:flex;gap:10px;width:100%;margin-top:10px;}
.vsbc-row .vsbc-btn{margin-top:0;}
/* QR — desktop only (scan with a phone to open the card + save the contact) */
.vsbc-qr{display:none;}
@media(min-width:768px){.vsbc-qr{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;margin-top:22px;padding-top:22px;border-top:1px solid rgba(0,79,89,.1);}}
.vsbc-qr-box{width:150px;height:150px;}
.vsbc-qr-box img,.vsbc-qr-box canvas{display:block;border-radius:8px;}
.vsbc-qr-cap{font:500 12px 'Inter',sans-serif;color:var(--vs-grey,#6b7b7d);letter-spacing:.2px;}


/* ===== Floating enquiry form: force FluentForm to its single-column (mobile) layout ===== */
/* The panel is narrow, so the form's 2-column container should stack — 1 field per line. */
.vs-form-panel .ff-t-container,.vs-form-panel .ff_columns{display:block!important;}
.vs-form-panel .ff-t-container .ff-t-cell,.vs-form-panel .ff_columns .ff_column_container{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding-left:0!important;padding-right:0!important;}
.vs-form-panel .ff-el-group,.vs-form-panel .ff-el-group.ff-el-form-half,.vs-form-panel .ff-el-group.ff-el-form-left,.vs-form-panel .ff-el-group.ff-el-form-right{width:100%!important;float:none!important;}
.vs-form-panel .ff-el-input--content{width:100%!important;}

/* ===== Comms-hub enquiry WIZARD (vs-hub-wizard.js; replaces the Fluent form in the
   Enquiry tab). Compact skin for the ~340px panel; VS palette; conditional blocks
   slide in; amber demo banner while the quote engine's vsq_hub_test_mode is on. ===== */
.vs-hubw{font-family:'Inter',sans-serif;color:#fff;padding-bottom:16px;}
.vhw-testbanner{background:#fff8e1;border:1px solid #f0dfa0;border-radius:9px;padding:8px 11px;font-size:11px;color:#7a5e00;line-height:1.45;margin-bottom:10px;}
.vhw-testbanner i{margin-right:5px;}
.vhw-head b{font:800 15.5px/1.25 'Inter',sans-serif;display:block;color:#fff;}
.vhw-head span{font-size:11.5px;color:rgba(255,255,255,.75);line-height:1.45;display:block;margin-top:3px;}
.vhw-dots{display:flex;gap:5px;margin:10px 0 14px;}
.vhw-dots i{height:4px;flex:1;border-radius:4px;background:rgba(255,255,255,.22);}
.vhw-dots i.done{background:var(--vs-green,#aab75b);}
.vhw-q{margin-bottom:14px;}
.vhw-q>label,.vhw-cond>label{display:block;font:700 12.5px 'Inter',sans-serif;margin-bottom:7px;color:#fff;}
.vhw-chips{display:flex;flex-wrap:wrap;gap:7px;}
.vhw-chip{border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);border-radius:22px;padding:7px 12px;font:600 12px 'Inter',sans-serif;color:#fff;cursor:pointer;transition:.13s;}
.vhw-chip:hover{border-color:var(--vs-green,#aab75b);}
.vhw-chip.on{background:var(--vs-teal,#004F59);border-color:var(--vs-green,#aab75b);color:#fff;box-shadow:0 0 0 1px var(--vs-green,#aab75b) inset;}
.vhw-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px;}
.vhw-cards-1{grid-template-columns:1fr;}
.vhw-card{border:1.5px solid rgba(255,255,255,.24);border-radius:12px;background:rgba(255,255,255,.09);padding:11px 12px;cursor:pointer;transition:.13s;display:flex;gap:11px;align-items:center;text-align:left;font-family:'Inter',sans-serif;}
.vhw-card.sm{flex-direction:column;gap:5px;text-align:center;padding:10px 6px 9px;}
.vhw-card i{font-size:16px;color:var(--vs-green,#aab75b);flex:0 0 auto;}
.vhw-card b{font:700 12px/1.25 'Inter',sans-serif;display:block;color:#fff;}
.vhw-card small{font-size:10px;color:rgba(255,255,255,.65);line-height:1.3;display:block;margin-top:2px;}
.vhw-card:hover{border-color:var(--vs-green,#aab75b);transform:translateY(-1px);}
.vhw-card.on{border-color:var(--vs-green,#aab75b);border-width:2px;background:var(--vs-teal,#004F59);box-shadow:0 5px 16px rgba(0,0,0,.3);}
.vhw-cond{display:none;border-left:3px solid var(--vs-green,#aab75b);background:rgba(255,255,255,.08);border-radius:0 10px 10px 0;padding:10px 12px;margin:10px 0 4px;}
.vhw-cond.show{display:block;animation:vhwdrop .22s ease;}
@keyframes vhwdrop{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}
.vhw-note-inline{margin:0;font-size:12px;color:rgba(255,255,255,.78);line-height:1.5;}
.vhw-note-inline b{color:#fff;}
.vhw-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.vs-hubw input[type=text],.vs-hubw input[type=email],.vs-hubw input[type=tel],.vs-hubw select,.vs-hubw textarea{
  width:100%;border:1.5px solid rgba(255,255,255,.26);border-radius:9px;padding:10px 12px;margin:0 0 9px;
  font:400 13px 'Inter',sans-serif;color:#fff;background:rgba(255,255,255,.1);outline:none;transition:border-color .13s;box-sizing:border-box;}
.vs-hubw ::placeholder{color:rgba(255,255,255,.55);}
.vs-hubw select{color:#fff;}
.vs-hubw select option{color:#10242a;background:#fff;}
.vs-hubw input:focus,.vs-hubw select:focus,.vs-hubw textarea:focus{border-color:var(--vs-green,#aab75b);background:rgba(255,255,255,.16);}
.vhw-hp{position:absolute!important;left:-9999px!important;height:1px;width:1px;opacity:0;}
.vhw-consent{display:flex;gap:8px;align-items:flex-start;font-size:11px;color:rgba(255,255,255,.75);line-height:1.45;margin:2px 0 6px;cursor:pointer;}
.vhw-consent input{margin-top:2px;accent-color:var(--vs-green,#aab75b);flex:0 0 auto;width:14px;height:14px;}
.vhw-err{background:#fdecea;border:1px solid #f5c6c0;border-radius:9px;padding:9px 12px;font-size:12px;color:#8f1c2d;margin-top:6px;}
.vhw-nav{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);}
.vhw-btn{border:0;border-radius:10px;padding:11px 18px;font:800 12.5px 'Inter',sans-serif;letter-spacing:.3px;cursor:pointer;transition:.15s;}
.vhw-btn.back{background:transparent;color:rgba(255,255,255,.75);border:1.5px solid rgba(255,255,255,.3);}
.vhw-btn.next{background:var(--vs-green,#aab75b);color:#fff;}
.vhw-btn.next:hover{background:var(--vs-green-dk,#8a9647);}
.vhw-btn:disabled{opacity:.45;cursor:default;}
.vhw-done{text-align:center;padding:34px 8px;}
.vhw-done i{font-size:36px;color:var(--vs-green,#aab75b);display:block;margin-bottom:12px;}
.vhw-done b{font:800 17px 'Inter',sans-serif;display:block;margin-bottom:6px;color:#fff;}
.vhw-done p{font-size:13px;color:rgba(255,255,255,.75);line-height:1.55;margin:0;}
.vhw-done-test{margin-top:10px!important;font-size:11.5px!important;color:#f0dfa0!important;}

/* ===== Archive facet pills (vs_archive_facets + vs-interactions.js module).
   Auto-gated Refine row on machine category archives. ===== */
.vs-afacets{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  width:min(var(--vs-shell,1340px),100%);margin:2px auto 22px;padding:12px 16px;
  background:#fff;border:1px solid rgba(0,79,89,.1);border-radius:14px;box-shadow:0 3px 12px rgba(0,79,89,.05);}
.vs-afacets .af-lbl{font:800 11px 'Inter',sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--vs-teal,#004F59);display:inline-flex;align-items:center;gap:7px;}
.af-group{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
.af-group>b{font:700 12px 'Inter',sans-serif;color:var(--vs-grey,#545456);margin-right:2px;}
.afct{border:1.5px solid rgba(0,79,89,.16);background:#fff;border-radius:20px;padding:6px 12px;
  font:600 12px 'Inter',sans-serif;color:var(--vs-dark,#10242a);cursor:pointer;transition:.13s;display:inline-flex;align-items:center;gap:6px;}
.afct i{font-style:normal;font-size:10.5px;color:var(--vs-grey,#545456);background:rgba(0,79,89,.07);border-radius:9px;padding:1px 6px;}
.afct:hover{border-color:var(--vs-green,#aab75b);}
.afct.on{background:var(--vs-teal,#004F59);border-color:var(--vs-green,#aab75b);color:#fff;}
.afct.on i{background:rgba(255,255,255,.18);color:#fff;}
.af-reset{border:0;background:transparent;font:700 12px 'Inter',sans-serif;color:var(--vs-red,#8f1c2d);cursor:pointer;text-decoration:underline;}
.af-count{font:600 12px 'Inter',sans-serif;color:var(--vs-grey,#545456);margin-left:auto;}
@media(max-width:640px){.vs-afacets{padding:10px 12px;}.af-count{display:none;}}

/* injected catalogue facet chips (catalogue-facets.json extension) carry a count badge */
.fct i{font-style:normal;font-size:10.5px;color:var(--vs-grey,#545456);background:rgba(0,79,89,.08);border-radius:9px;padding:1px 6px;}
.fct.on i{background:rgba(255,255,255,.2);color:#fff;}

/* quote-basket Q icon (inline SVG, Illustrator-refined variant D) */
.vsn-qi{display:block;fill:currentColor;}


/* ===== 2026-07-02 tweaks ===== */
/* Teal 'Get in touch' tab (front page + workplace-vending; body class from functions.php) */
/* Get-in-touch tab: white on green, enlarged (user 2026-07-02) */
body #vs-tab-desktop{font-size:15px;padding:13px 24px;width:320px;}
body #vs-tab-desktop i,body #vs-tab-mobile i{font-size:18px;}

/* Category pill nav + Refine row: single line at all widths; font tracks viewport, scrolls if it must */
main.vsu .wc-catnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
main.vsu .wc-catnav .vsu-pill{white-space:nowrap;font-size:clamp(10.5px,0.9vw,12.5px);}
.vs-afacets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
.vs-afacets .af-group{flex-wrap:nowrap;}
.vs-afacets .afct,.vs-afacets .af-group>b{white-space:nowrap;}
.vs-afacets .afct{font-size:clamp(10.5px,0.85vw,12px);}
body .cv-bar-row{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
body .cv-bar-row .cat-pill{white-space:nowrap;font-size:clamp(10.5px,0.9vw,13px);flex:0 0 auto;}
body .cv-facets{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:thin;}
body .cv-facets .fct{white-space:nowrap;flex:0 0 auto;}

/* 3-product [products] grids (e.g. Invest in Vending): 3-up full width, single column on mobile */
body .vs-machine-grid-4 ul.products.columns-3,body .vs-machine-grid ul.products.columns-3{display:grid;grid-template-columns:repeat(3,1fr)!important;gap:22px;width:100%;}
@media(max-width:700px){body .vs-machine-grid-4 ul.products.columns-3,body .vs-machine-grid ul.products.columns-3{grid-template-columns:1fr!important;}}


/* Pill rows: compact progressively so one line actually fits (counts go first, then icons) */
main.vsu .wc-catnav{gap:6px;}
@media(max-width:1250px){
  main.vsu .wc-catnav .vsu-pill span,body .cv-bar-row .cat-pill span{display:none;}
}
@media(max-width:1050px){
  main.vsu .wc-catnav .vsu-pill i,body .cv-bar-row .cat-pill i{display:none;}
  main.vsu .wc-catnav .vsu-pill,body .cv-bar-row .cat-pill{padding:6px 10px;}
}

/* Category-archive hero: keep the name BIG, shrink everything else (user 2026-07-02) */
.tax-product_cat .vsu-pagehead{padding:calc(var(--vs-nav-h,84px) + 10px) var(--pad) 18px;}
.tax-product_cat .vsu-pagehead h1::after{margin-top:8px;}
.tax-product_cat .vsu-pagehead .vsu-sub{font-size:13px;line-height:1.55;max-width:78ch;opacity:.85;}


/* Pill rows: tighter vertical rhythm + banded nav (user 2026-07-02) */
main.vsu .wc-catnav{margin:0!important;padding-block:12px;background:rgba(0,79,89,.06);border-bottom:1px solid rgba(0,79,89,.08);}
main.vsu .wc-catnav .vsu-pill{padding-top:5px!important;padding-bottom:5px!important;}
main.vsu .wc-catnav .vsu-pill:hover{transform:none;} /* lift clipped by the scroll container — border highlight only */
body .cv-bar-row .cat-pill{padding-top:6px;padding-bottom:6px;}
.vs-afacets{width:100%;max-width:none;border-radius:0;border-inline:0;box-shadow:none;
  padding:8px var(--pad);margin:0 0 18px;border-top:0;border-bottom:1px solid rgba(0,79,89,.1);}
body .cv-facets{padding-top:2px;padding-bottom:2px;}

/* Invest-in-vending: red machine band, price chips, operator pull-quote (2026-07-02) */
.biz-machines .vsu-h2{color:#fff;}
.biz-machines .vsu-sub{color:rgba(255,255,255,.85);}
.biz-machines .vsu-sub a.vs-plink{color:#fff;text-decoration:underline;}
.biz-price-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 2px;}
.biz-price{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:7px 16px;font:600 13px/1.4 'Inter',sans-serif;display:inline-flex;gap:8px;align-items:center;}
.biz-price b{font-weight:800;}
.biz-price i{opacity:.7;font-size:11px;}
.biz-quote{max-width:820px;margin:0 auto;text-align:center;padding:0 var(--pad);}
.biz-quote>i{font-size:34px;color:var(--red,#8f1c2d);opacity:.25;display:block;margin-bottom:14px;}
.biz-quote blockquote{margin:0;font:600 clamp(20px,2.4vw,27px)/1.45 'Inter',sans-serif;color:var(--vs-dark,#1a2e31);}
.biz-quote figcaption{margin-top:16px;font:600 14px 'Inter',sans-serif;color:var(--vs-grey,#545456);}
.biz-quote figcaption b{color:var(--red,#8f1c2d);}
.biz-quote .vs-plink{display:inline-block;margin-top:14px;font:700 13px 'Inter',sans-serif;}


/* Footer contact block (brand column) */
.vsx-foot-contact{list-style:none;margin:0 0 16px;padding:0;}
.vsx-foot-contact li{margin:0 0 8px;font-size:13.5px;}
.vsx-foot-contact i{width:18px;text-align:center;margin-right:6px;color:var(--vs-lime,#aab75b);}

/* Mobile pill nav: app-like chips — bigger touch targets, snap scrolling, no counts */
@media(max-width:700px){
  main.vsu .wc-catnav{scroll-snap-type:x proximity;gap:8px;padding-block:10px;}
  main.vsu .wc-catnav .vsu-pill{scroll-snap-align:center;padding:9px 14px!important;font-size:13px;}
  main.vsu .wc-catnav .vsu-pill span{display:none;}
  .vs-afacets{scroll-snap-type:x proximity;}
  .vs-afacets .afct{scroll-snap-align:center;padding:8px 13px;font-size:12.5px;}
  body .cv-bar-row{scroll-snap-type:x proximity;}
  body .cv-bar-row .cat-pill{scroll-snap-align:center;padding:9px 14px;}
}


/* Low-key trust strip variant — credentials moment near the foot of info pages */
body .vs-trust-strip--low{background:transparent;border-block:1px solid rgba(0,79,89,.1);}
body .vs-trust-strip--low .vs-trust-inner{padding:10px var(--pad);}
body .vs-trust-strip--low .vs-trust-item{font-size:12px;color:var(--vs-grey,#545456);border-color:rgba(0,79,89,.07);padding:10px 18px;}
body .vs-trust-strip--low .vs-trust-item span{color:var(--vs-grey,#545456);}
body .vs-trust-strip--low .vs-trust-item i{font-size:12px;color:var(--vs-green,#aab75b);}

/* Scroll reveal — very subtle fade/rise; .rv applied by JS only to below-fold sections */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}}

/* Mobile: dramatically shorter heroes (user 2026-07-02) */
@media(max-width:700px){
  body .vs-hero,body .vsu-hero,body .biz-hero{min-height:0!important;height:auto!important;
    padding-top:calc(var(--vs-nav-h,64px) + 16px)!important;padding-bottom:24px!important;}
  body .vs-hero h1,body .vsu-hero h1,body .biz-hero h1{font-size:clamp(26px,8vw,34px)!important;}
  body .h-hero{min-height:0!important;height:auto!important;
    padding:calc(var(--vs-nav-h,64px) + 14px) var(--pad) 20px!important;}
  body .h-hero .hh-lineup{max-height:30vh;width:auto;margin-inline:auto;}
  body .vsu-pagehead{padding-top:calc(var(--vs-nav-h,64px) + 8px)!important;padding-bottom:12px!important;}
}


/* Hero intro — gentle staggered fade-up on load (all hero flavours) */
@keyframes vsIntro{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.vs-hero .vs-hero-content>*,.vsu-hero>*,.biz-hero>*,.vsu-pagehead>*,.h-hero .hh-copy>*{animation:vsIntro .55s ease both;}
.vs-hero .vs-hero-content>*:nth-child(2),.vsu-hero>:nth-child(2),.biz-hero>:nth-child(2),.vsu-pagehead>:nth-child(2),.h-hero .hh-copy>:nth-child(2){animation-delay:.09s;}
.vs-hero .vs-hero-content>*:nth-child(3),.vsu-hero>:nth-child(3),.biz-hero>:nth-child(3),.vsu-pagehead>:nth-child(3),.h-hero .hh-copy>:nth-child(3){animation-delay:.18s;}
.vs-hero .vs-hero-content>*:nth-child(n+4),.vsu-hero>:nth-child(n+4),.biz-hero>:nth-child(n+4),.vsu-pagehead>:nth-child(n+4),.h-hero .hh-copy>:nth-child(n+4){animation-delay:.27s;}
@media(prefers-reduced-motion:reduce){.vs-hero .vs-hero-content>*,.vsu-hero>*,.biz-hero>*,.vsu-pagehead>*,.h-hero .hh-copy>*{animation:none;}}

/* Mobile: compact ALL template sections — big desktop paddings halved (user 2026-07-03) */
@media(max-width:700px){
  body .vsu-sec--pad{padding-top:34px!important;padding-bottom:34px!important;}
  body .vsu-cta{padding-top:38px!important;padding-bottom:38px!important;}
  body .vs-pain,body .vs-how,body .vs-benefits,body .vs-machine,body .vs-faq,body .vs-cta-close,
  body .vs-objections,body .vs-features-highlight,body .vs-specs,body .vs-benefit-cards{padding-top:32px!important;padding-bottom:32px!important;}
  body .biz-stat{padding:16px 10px;}
  body .biz-band .biz-stats{padding-block:6px;}
  body .vsu-h2{margin-bottom:12px;}
  body .vs-trust-strip .vs-trust-item{padding:8px 12px;}
}


/* 2026-07-03 round: ghost outline, mobile hero overlay, footer ISO stack, sector-section mobile fixes */
body .vs-btn-ghost{border:1.5px solid rgba(255,255,255,.65)!important;}
@media(max-width:700px){
  /* hero photo heroes: full-width scrim so right-side text stays legible */
  body .vs-hero::before{background:linear-gradient(90deg,rgba(0,79,89,.93) 0%,rgba(0,79,89,.62) 100%)!important;}
  /* footer ISO emblems: stack + bigger */
  .vsx-foot-iso{flex-direction:column;align-items:flex-start;gap:12px;}
  .vsx-foot-iso img{height:88px;}
  /* sector template sections built desktop-first (88px/48px pads, fixed 2-col grids) */
  body .vs-pain,body .vs-benefit-cards{padding:32px 18px!important;}
  body .vs-pain-grid{grid-template-columns:1fr!important;gap:16px;}
  body .vs-benefit-cards>*{width:100%!important;max-width:none!important;}
  body .vs-section-heading{font-size:clamp(22px,6.4vw,28px)!important;}
  body .vs-section-sub{font-size:14px!important;}
}

/* Mobile audit 2026-07-03: home hero — machine cluster was 575px wide (width:auto + max-height) = overflowed the viewport invisibly */
@media(max-width:700px){
  body .h-hero .hh-lineup{max-width:100%!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain;}
  body .h-hero{row-gap:14px!important;}
  body .hh-doors{margin-top:16px!important;gap:12px!important;}
  body .hh-doors .hh-door{height:auto!important;min-height:0!important;padding-top:100px!important;}
}
@media(max-width:700px){
  body .vs-benefit-grid{grid-template-columns:1fr!important;gap:14px;}
}

/* ===== /articles/ magazine archive ([vs_articles]) ===== */
.vsart{max-width:var(--vs-shell,1280px);margin:0 auto;padding:26px var(--pad) 56px;}
.vsart-chips{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;margin-bottom:24px;}
.vsart-chip{flex:0 0 auto;padding:7px 16px;border:1.5px solid rgba(0,79,89,.18);border-radius:999px;background:#fff;color:var(--vs-teal);font:600 13px 'Inter',sans-serif;text-decoration:none;}
.vsart-chip.on{background:var(--vs-teal);color:#fff;border-color:var(--vs-green);}
.vsart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:980px){.vsart-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.vsart-grid{grid-template-columns:1fr;}}
.vsart-card{display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;border:1px solid rgba(0,79,89,.08);box-shadow:0 3px 14px rgba(0,79,89,.06);text-decoration:none;transition:transform .18s,box-shadow .18s;}
.vsart-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,79,89,.13);}
.vsart-ph{aspect-ratio:16/10;background-size:cover;background-position:center;}
.vsart-ph--none{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--vs-teal),var(--vs-teal-dk,#003d46));color:rgba(255,255,255,.45);font-size:34px;}
.vsart-body{padding:16px 18px 18px;}
.vsart-cat{font:700 10.5px 'Inter',sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--vs-green-dk,#7a8d3a);}
.vsart-body h3{margin:7px 0 8px;font:700 17px/1.35 'Inter',sans-serif;color:var(--vs-dark);}
.vsart-body time{font:500 12.5px 'Inter',sans-serif;color:var(--vs-grey);}
.vsart-pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px;font:600 13px 'Inter',sans-serif;color:var(--vs-grey);}
.vsart-pg{color:var(--vs-teal);text-decoration:none;font-weight:700;}


/* App-bar icons match the top nav: cart, Q-quote SVG, custom vending-machine glyph */
.vsn-appbar a svg.vsn-vmi{width:17px;height:19px;display:block;}
.vsn-appbar a.q i{padding:0;}
.vsn-appbar a.q svg.vsn-qi{width:20px;height:20px;display:block;}

/* Mobile top nav: full-width flush bar, not a floating pill (user 2026-07-03) */
@media(max-width:899px){
  body .vsn{padding-inline:0;}
  body .vsn.solid{top:0;}
  body .vsn.solid .vsn-in{border-radius:0;border-left:0;border-right:0;border-top:0;
    box-shadow:0 10px 30px -18px rgba(0,79,89,.45);}
}

/* 2026-07-03 pre-meeting tweaks */
/* PDP mobile: in-page quote button hidden — the sticky bottom CTA owns it (still click-proxied) */
@media(max-width:899px){
  body.single-product .pv-cta .vsq-add{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
}
/* Catalogue bar: tighter pills + refine row, both breakpoints */
body .cv-bar-row .cat-pill{padding:7px 13px;}
body .cv-facets{margin-top:7px!important;padding-top:7px!important;}
@media(max-width:700px){
  body .cv-bar{padding:6px var(--pad) 4px!important;}
  body .cv-bar-row{gap:6px;}
  body .cv-bar-row .cat-pill{padding:5px 11px!important;font-size:12px!important;}
  body .cv-facets{margin-top:5px!important;padding-top:5px!important;gap:6px;}
  body .cv-facets .fct{padding:4px 10px;font-size:11.5px;}
  body .cv-facets .cv-facets-lbl{font-size:9.5px;letter-spacing:1.2px;}
  main.vsu .wc-catnav{padding-block:8px;gap:5px;}
  main.vsu .wc-catnav .vsu-pill{padding:4px 10px!important;font-size:11.5px;}
  .vs-afacets{padding-block:6px;}
}


/* PDP: Book a Service Call link (interim until per-machine manuals) */
.pv-svc{display:inline-flex;align-items:center;gap:7px;font:600 13px 'Inter',sans-serif;color:var(--vs-teal);text-decoration:none;}
.pv-svc:hover{text-decoration:underline;}

/* Home hero: 30-year emblem, big, hero-right (Graham: "like a gold medal") */
/* 30-year emblem, About Us hero-right (Graham: "gold medal", 2026-07-03) */
.vsu-hero{position:relative;}
.vs-30badge{position:absolute;right:var(--pad,32px);top:50%;transform:translateY(-46%);width:clamp(250px,26vw,430px);z-index:1;filter:drop-shadow(0 12px 28px rgba(0,0,0,.4));pointer-events:none;}
@media(max-width:900px){.vs-30badge{position:static;transform:none;display:block;width:min(58vw,300px);margin:8px auto 0;}}

/* Invest: single hero price pill */
.biz-price--xl{font-size:17px;padding:13px 30px;border-width:2px;}
.biz-price--xl b{font-size:19px;}

/* PDP Service & Support tab */
.pv-service{max-width:720px;}
.pv-service h3{font:800 1.35rem 'Inter',sans-serif;color:var(--vs-teal);margin:8px 0 12px;}
.pv-service p{color:var(--vs-grey);line-height:1.7;margin:0 0 16px;}
.pv-service-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;}
.btn-ghost-t{background:#fff;border:1.5px solid var(--vs-teal);color:var(--vs-teal);}

/* ===== Single article template (templates/single.html) ===== */
.vsart-head{background:radial-gradient(70% 130% at 8% 118%,color-mix(in srgb,var(--vs-green) 42%,transparent) 0%,transparent 62%),linear-gradient(160deg,var(--vs-teal) 0%,var(--vs-teal-dk,#003d46) 100%);
  color:#fff;padding:calc(var(--vs-nav-h,84px) + 34px) var(--pad,24px) 34px;}
.vsart-head .wp-block-post-title{color:#fff;font:800 clamp(1.7rem,3.4vw,2.6rem)/1.15 'Inter',sans-serif;letter-spacing:-.8px;margin:10px 0 12px;}
.vsart-head-cat,.vsart-head-cat a{font:700 11px 'Inter',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--vs-green,#aab75b)!important;text-decoration:none;}
.vsart-head-date{font:500 13px 'Inter',sans-serif;color:rgba(255,255,255,.65);}
.vsart-body{padding:40px var(--pad,24px) 60px;}
.vsart-featimg img{border-radius:12px;margin-bottom:8px;}
.vsart-body .wp-block-post-content p{font-size:16.5px;line-height:1.8;color:var(--vs-dark,#1a2e31);margin:0 0 18px;}
.vsart-body .wp-block-post-content h2,.vsart-body .wp-block-post-content h3{font-family:'Inter',sans-serif;color:var(--vs-teal);letter-spacing:-.4px;margin:30px 0 12px;}
.vsart-body .wp-block-post-content img{border-radius:10px;max-width:100%;height:auto;}
.vsart-body .wp-block-post-content a{color:var(--vs-teal);}
.vsart-back{margin-top:34px;padding-top:18px;border-top:1px solid rgba(0,79,89,.12);}
.vsart-back a{font:700 13.5px 'Inter',sans-serif;color:var(--vs-teal);text-decoration:none;}
.vsart-back a:hover{text-decoration:underline;}
@media(max-width:700px){.vsart-head{padding-top:calc(var(--vs-nav-h,64px) + 18px);padding-bottom:22px;}.vsart-body{padding-block:26px 44px;}}