/* 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;}

/* Site-wide anchor offset: the sticky nav is ~84px, so any in-page anchor (#calculator, #apply, hub targets) lands under it unless offset. Added 2026-09-16. Per-anchor scroll-margin-top rules on pages remain valid and take precedence. */
html{scroll-padding-top:96px;}

.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:100%;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;}
/* Comms-hub wizard Continue/Submit on BizOpp pages (Graeme 29 Jul, fixed 27 Aug).
   .vhw-btn.next sets color:#16302c against var(--vs-green). On the olive that is
   6.45:1 and correct, but --vs-green is remapped to red here, dropping it to 2.41:1.
   White on the BizOpp red measures 5.84:1, so the label goes white on THESE pages only. */
body.biz .vhw-btn.next,body:has(.biz) .vhw-btn.next{color:#fff;}
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;}
  .vs-form-panel{display:flex!important;left:0;right:0;width:auto;height:100dvh;max-height:100dvh;border-radius:0;z-index:10001;}
  .vs-form-panel .vs-form-close{display:block!important;width:36px;height:36px;font-size:18px;top:12px;right:14px;}
}
/* ===== 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:1/1;--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;}
body .vsu-wwbut{--wwb-ratio:1/1;}
body .vsu-wwbut.strip .wwb{aspect-ratio:1/1;width:clamp(190px,20vw,250px);}
.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(190px,20vw,250px);height:auto;aspect-ratio:1/1;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. */
/* invest-in-vending hero, reworked 2026-08-22: brighter photo (dedicated -bright asset), lighter
   legibility tint, and the grid + glow moved to a ::before overlay MASKED to the text side so the
   hero subjects (people + machine, baked into the photo) never sit behind the grid lines. */
.biz-hero{
  background:
    linear-gradient(100deg,rgba(20,6,11,.84) 0%,rgba(40,9,18,.60) 38%,rgba(60,13,25,.24) 66%,rgba(78,17,32,.04) 88%),
    url('/wp-content/uploads/2026/08/hero-bg-bizopp-bright.webp') center/cover !important;}
/* mobile-only: the desktop angled left-to-right fade leaves the subtitle sitting on raw
   photo once the hero grows taller than the fade zone (measured 2.74:1, fails 4.5:1). A
   PAGE-content inline <style> block also defines .biz-hero (no !important, weaker fade)
   and loads after this stylesheet, so this override needs !important to win on mobile
   without touching page content. Flat, near-opaque tint darkens the whole box uniformly. */
@media(max-width:760px){
  .biz-hero{
    background:
      linear-gradient(rgba(9,3,6,.90),rgba(9,3,6,.90)),
      url('/wp-content/uploads/2026/08/hero-bg-bizopp-bright.webp') center/cover !important;
  }
}
.biz-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  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,.22) 0%,transparent 60%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 36%,transparent 66%);
  mask-image:linear-gradient(90deg,#000 0%,#000 36%,transparent 66%);}
.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;}
/* icon wrappers that are unsized BLOCK divs (.service-card-icon, .step-icon) must become
   compact chips under the glass wash, or the .16 white paints a strip across the card
   (workplace-vending, caught 12 Aug). Body prefix beats the page-inline block rules. */
body .vs-life-soft :is(.service-card-icon,.step-icon){
  display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:12px;}

/* 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;}

/* ===== X1 fix: a.vs-plink loses contrast on dark bands the override list missed =====
   a.vs-plink's base colour (line 464) is var(--vs-teal), the light-context colour.
   The existing dark-hero override (lines 467-468) whitens it only inside .h-hero,
   .vsu-hero, .biz-hero and .on-dark. It was never extended to the older .vs-hero /
   .vs-hero-sub pattern used by the sector and product landing pages, or to
   .vs-benefits, a separate dark band on the same pages. Result: dark teal link
   text sits on a dark teal or dark navy panel and disappears mid-sentence:
   Waterlogic WL7, Spaza Fresh Touch, Spaza Touch, Smart Fridges. .biz-band (dark
   maroon, brand wine #8f1c2d) is included defensively for the same failure mode,
   though no live plink was found inside it. Full white plus an underline keeps
   the link legible and still marked as a link, not just coloured differently.
   The body prefix plus !important match this file's existing kill-rule pattern
   (see the .vs-machine-grid-4 fix above) so this wins over the identical
   a.vs-plink rule already baked into every already-pushed page's inline copy of
   this file. ===== */
body .vs-hero a.vs-plink,body .vs-hero-sub a.vs-plink,body .vs-benefits a.vs-plink,body .biz-band a.vs-plink{color:#fff!important;text-decoration-color:rgba(255,255,255,.55)!important;}
body .vs-hero a.vs-plink:hover,body .vs-hero-sub a.vs-plink:hover,body .vs-benefits a.vs-plink:hover,body .biz-band a.vs-plink:hover{color:#fff!important;text-decoration-color:#fff!important;}

/* ===== X2 fix: face-safe crop bias on person-photo cover crops (reviewer, 5 Aug 2026) =====
   Every card, carousel and avatar component that crops a person photo uses
   object-fit:cover (or background-size:cover on a background-image div) and never
   sets object-position or background-position. Both default to 50% 50%, so a centre
   crop takes equal slices off the top and bottom and cuts the subject at the
   forehead, hairline or eyes. Reported six times by the reviewer.
   The team already solved this once: .hh-door::before uses background-position
   center 18% and center 32% (home.delta.css:51-52), and .hh-rot uses
   object-position:center top (home.delta.css:180). Nothing downstream inherited it.
   center 20% sits inside that proven range rather than a hard top, so it does not
   overcorrect the milder 4:5 and 4:3 crops.
   body-prefixed plus !important so it outranks the plain same-specificity rules
   already baked into each pushed page's inline copy of this file (scripts/push.py
   inlines vs-global.css only, so a fix living in vs-ui.css alone would not reach it).
   KNOWN LIMIT: .fridge-card-img renders about 540x160, roughly 3.4:1. At that ratio
   the visible window is under half the frame whatever the position value, so it needs
   a taller box, not a crop nudge. Flagged for the eyeball pass, not solved here. ===== */
body :is(.wwb,.vsu-member-ph,.fridge-card-img,.vsu-split-media) img{object-position:center 20%!important;}
body :is(.h-xcard-img,.md-ph){background-position:center 20%!important;}

/* ===== About Us 30-year badge, size cap (Graeme, 29 Jul 11:48) =====
   "Now it's got this enormous logo there", "it's like in your face."
   Measured live 6 Aug: img.vs-30badge rendered 880x330 inside a 976px viewport,
   about 90 percent of the screen width, sitting at the very top of the page.
   Cause: .vs-30badge had NO CSS rule anywhere in the repo, so the 1819x683 source
   simply filled its container. Capping it keeps the anniversary mark prominent
   without it dominating the page. Ratio is 2.66:1, so 340px wide lands near 128px tall.
   body-prefixed to match this file's kill-rule pattern and beat any stale inline copy. ===== */
body img.vs-30badge{width:100%;max-width:clamp(200px,32vw,340px);height:auto;display:block;}

/* ===== My Account renders under the fixed nav (Lisa, 5 Aug) =====
   Her note: "Login page comes out behind the banner." The Register column heading
   rendered on top of the Machines nav item.
   Verified live 6 Aug: .vsn is position:fixed, --vs-nav-h is 64px, and .entry-content
   on this page has padding-top:0, so the WooCommerce account form starts at y=0 with
   no clearance. Both the Login and Register h2 measured top:19.
   NOTE ON THE SELECTOR: the account markup is WooCommerce's own (.u-columns.col2-set
   inside .woocommerce), NOT the .ac-auth class in css/template-account.delta.css.
   That delta class does not appear on the live page at all, and delta CSS ships inside
   pushed page content which does not reach this template anyway, so the fix has to live
   in the theme stylesheet. Uses the same --vs-nav-h token and clamp value every other
   page-opening block in this codebase uses. Applies to the logged-in dashboard too,
   which needs the same clearance. ===== */
body.woocommerce-account .entry-content > .woocommerce{padding-top:calc(var(--vs-nav-h,84px) + clamp(16px,2.4vw,28px));}

/* ===== Green-frame kill (Graeme 6 Aug: "the green block is sneaking in almost
   everywhere"). Per-page styles wrap a WooCommerce product card (article.pc) in the
   .vs-machine-featured green-bordered card, producing a box-in-a-box. Those styles are
   ALSO baked inline into pushed page content, so this must out-rank them from the theme
   sheet. Scoped with :has(.pc) so classic featured cards (plain image + text body, no
   product card inside) keep their frame. ===== */
body .vs-machine-featured:has(.pc){border:none!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;}
body .vs-machine-featured:has(.pc) .vs-machine-featured-img{background:transparent!important;border-bottom:none!important;padding:0!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);}
  & 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 — EVEN ROWS ONLY, never an orphan card (Laurence, 17 Jul 2026).
   Row count keys off the CONTAINER, not the viewport: on lead pages the locked-open enquiry
   form reserves 368px, so a @media width lies about the space the cards actually get.
   Card count is read with :has(), so no page markup or per-page override is needed.
   2-up needs 260px (phones keep the dense 2-up look vs-responsive was built for), 3-up 704px,
   4-up 940px. 3-card sets go 3-up or 1-up, never 2+1. Unenumerated counts keep the old auto-fit. */
.vsu-sec:has(> .vsu-cards){container-type:inline-size;}
.vsu-cards{display:grid;gap:22px;
  grid-template-columns:var(--vsu-cols,repeat(auto-fit,minmax(250px,1fr)));}
.vsu-cards:has(> :nth-child(2):last-child),
.vsu-cards:has(> :nth-child(3):last-child),
.vsu-cards:has(> :nth-child(4):last-child),
.vsu-cards:has(> :nth-child(6):last-child){--vsu-cols:1fr;}
@container (min-width:260px){
  .vsu-cards:has(> :nth-child(2):last-child),
  .vsu-cards:has(> :nth-child(4):last-child),
  .vsu-cards:has(> :nth-child(6):last-child){--vsu-cols:repeat(2,minmax(0,1fr));}
}
@container (min-width:704px){
  .vsu-cards:has(> :nth-child(3):last-child),
  .vsu-cards:has(> :nth-child(6):last-child){--vsu-cols:repeat(3,minmax(0,1fr));}
}
@container (min-width:940px){
  .vsu-cards:has(> :nth-child(4):last-child){--vsu-cols:repeat(4,minmax(0,1fr));}
}
.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;
  &:is(a):hover{transform:translateY(-4px);box-shadow:0 16px 36px -14px rgba(0,79,89,.22);border-color:rgba(0,79,89,.2);}} /* 28 Sep 2026: lift only on link cards */
.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;}}

/* PDP Overview gallery strip — the product's own 2nd+ gallery shots inside the
   Overview tab (rail is narrow; specs live in the Specifications tab only). */
.pv-ov-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 18px;}
.pv-ov-shots img{width:100%;height:auto;border-radius:12px;border:1px solid rgba(0,79,89,.08);background:#fff;display:block;}

/* ── Comms-hub enquiry wizard (vhw-*) — glass skin on the dark teal hub panel.
   Markup: vs-theme/assets/js/vs-hub-wizard.js. This SOURCE block is canonical —
   never hot-patch compiled vs-theme.css (S19: a rebuild wiped the old hot-patched
   skin and shipped the wizard naked). */
#vs-hubw{display:block;color:#fff;font-family:'Roboto',sans-serif;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));}
.vhw-testbanner{display:flex;gap:8px;align-items:center;background:rgba(245,196,0,.14);border:1px solid rgba(245,196,0,.4);color:#f5c400;border-radius:8px;padding:7px 10px;font-size:11.5px;line-height:1.4;margin-bottom:10px;}
.vhw-head b{display:block;font:800 1.02rem 'Inter',sans-serif;color:#fff;letter-spacing:-.2px;margin-bottom:2px;}
.vhw-head span{display:block;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.5;}
.vhw-dots{display:flex;gap:5px;margin:10px 0 12px;}
.vhw-dots i{height:3px;flex:1;border-radius:2px;background:rgba(255,255,255,.18);}
.vhw-dots i.done{background:var(--vs-green);}
.vhw-body{display:flex;flex-direction:column;gap:12px;}
.vhw-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.vhw-cards-1{grid-template-columns:1fr;}
.vhw-card{display:flex;align-items:center;gap:10px;text-align:left;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:10px 12px;color:#fff;cursor:pointer;transition:background .15s,border-color .15s;}
.vhw-card i{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--vs-green);}
.vhw-card span{display:flex;flex-direction:column;gap:1px;min-width:0;}
.vhw-card b{font:700 13.5px 'Inter',sans-serif;color:#fff;}
.vhw-card small{font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.35;}
.vhw-card:hover{background:rgba(255,255,255,.14);}
.vhw-card.on{background:rgba(0,104,117,.9);border-color:var(--vs-green);box-shadow:0 0 0 1px var(--vs-green);}
.vhw-card.sm{flex-direction:column;gap:6px;text-align:center;padding:12px 6px;}
.vhw-card.sm i{width:34px;height:34px;}
.vhw-card.sm b{font-size:12px;}
.vhw-chips{display:flex;flex-wrap:wrap;gap:6px;}
.vhw-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 11px;font:600 12px 'Roboto',sans-serif;color:rgba(255,255,255,.85);cursor:pointer;transition:background .15s;}
.vhw-chip:hover{background:rgba(255,255,255,.15);}
.vhw-chip.on{background:var(--vs-green);border-color:var(--vs-green);color:#16302c;font-weight:700;}
.vhw-q label,.vhw-cond label{display:block;font:600 10.5px 'Inter',sans-serif;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 6px;}
.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{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:9px 11px;color:#fff;font:400 13px 'Roboto',sans-serif;outline:none;}
#vs-hubw input::placeholder{color:rgba(255,255,255,.55);}
#vs-hubw input:focus,#vs-hubw select:focus{border-color:var(--vs-green);}
#vs-hubw select option{color:#1a2e31;}
.vhw-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
.vhw-consent{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:rgba(255,255,255,.7);line-height:1.45;cursor:pointer;}
.vhw-consent input{margin-top:2px;accent-color:var(--vs-green);}
.vhw-err{background:rgba(193,39,45,.22);border:1px solid rgba(193,39,45,.55);color:#ffb9bc;border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.45;}
.vhw-note-inline{background:rgba(245,196,0,.12);border:1px solid rgba(245,196,0,.3);border-radius:8px;padding:8px 10px;font-size:12px;color:rgba(255,255,255,.85);line-height:1.5;margin:0;}
.vhw-cond{display:none;}
.vhw-cond.show{display:block;}
.vhw-nav{display:flex;gap:8px;margin-top:14px;}
.vhw-btn{border:0;border-radius:8px;padding:11px 16px;font:700 13px 'Inter',sans-serif;cursor:pointer;transition:filter .15s;}
.vhw-btn:hover{filter:brightness(1.08);}
.vhw-btn.back{background:transparent;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.8);}
.vhw-btn.next{background:var(--vs-green);color:#16302c;flex:1;}
.vhw-done{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;padding:18px 6px;}
.vhw-done i{font-size:2rem;color:var(--vs-green);}
.vhw-done b{font:800 1.05rem 'Inter',sans-serif;color:#fff;}
.vhw-done p{font-size:12.5px;color:rgba(255,255,255,.7);line-height:1.5;margin:0;}
.vhw-done-test{color:#f5c400!important;}

/* ── Wizard on light backgrounds (inline page embeds, e.g. Contact Us card) — glass
   skin above assumes the dark teal hub panel; this variant flips text/surfaces dark-on-light. */
.vs-hubw--light .vhw-head b{color:#14333a;}
.vs-hubw--light .vhw-head span{color:#51707a;}
.vs-hubw--light .vhw-dots i{background:#d9e4de;}
.vs-hubw--light .vhw-dots i.done{background:var(--vs-green);}
.vs-hubw--light .vhw-card{background:#f3f7f5;border-color:#d9e4de;color:#14333a;}
.vs-hubw--light .vhw-card i{background:rgba(0,79,89,.08);}
.vs-hubw--light .vhw-card b{color:#14333a;}
.vs-hubw--light .vhw-card small{color:#51707a;}
.vs-hubw--light .vhw-card:hover{background:#e9f1ec;}
.vs-hubw--light .vhw-card.on{background:rgba(0,104,117,.12);border-color:var(--vs-teal);box-shadow:0 0 0 1px var(--vs-teal);}
.vs-hubw--light .vhw-card.on b,.vs-hubw--light .vhw-card.on small{color:#14333a;}
.vs-hubw--light .vhw-chip{background:#f3f7f5;border-color:#d9e4de;color:#3d5a63;}
.vs-hubw--light .vhw-chip:hover{background:#e9f1ec;}
.vs-hubw--light .vhw-q label,.vs-hubw--light .vhw-cond label{color:#6a838b;}
#vs-hubw.vs-hubw--light input[type=text],#vs-hubw.vs-hubw--light input[type=email],#vs-hubw.vs-hubw--light input[type=tel],#vs-hubw.vs-hubw--light select,#vs-hubw.vs-hubw--light textarea{background:#fff;border:1px solid #cfdcd6;color:#14333a;}
#vs-hubw.vs-hubw--light input::placeholder{color:#8aa0a7;}
#vs-hubw.vs-hubw--light input:focus,#vs-hubw.vs-hubw--light select:focus{border-color:var(--vs-teal);}
.vs-hubw--light .vhw-consent{color:#51707a;}
.vs-hubw--light .vhw-err{background:rgba(193,39,45,.08);border-color:rgba(193,39,45,.4);color:#a02a2f;}

/* ============================================================
   FIX 1 of 2, root cause X4: archive Refine facets, sort control
   and category pill row on WooCommerce category and shop pages
   (vs_archive_facets and vs_vending_cat_pills in vs-theme/functions.php,
   hooked to woocommerce_before_shop_loop). These classes ship with
   ZERO CSS anywhere in the theme today, confirmed by grep across every
   stylesheet including the compiled vs-theme.css. functions.php prints
   the af-lbl "Refine" span and the first af-group span back to back
   with no whitespace between them in the PHP string concatenation, so
   "RefineCondition" is a markup level run on, not a wrapping problem,
   it reproduces at any viewport width, not only on mobile. Selectors
   below are prefixed with body per the repo's own cascade gotcha,
   pages carry an inline copy of vs-global.css printed after the
   compiled stylesheet, and same specificity theme rules lose to it.
   ============================================================ */

/* facet bar shell: was raw unstyled spans and buttons sitting loose
   in the page flow, now reads as one filter panel */
body .vs-afacets{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  background:#fff;border:1px solid rgba(0,79,89,.1);border-radius:14px;
  padding:14px 18px;margin:0 var(--pad,32px) 22px;box-sizing:border-box;}

/* "Refine" label, this is the priority fix. The parent's flex gap
   already separates it from the first af-group, the margin here is a
   second independent guarantee that still holds even if the container
   above is ever changed back to block display by mistake. */
body .af-lbl{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  font:700 12px/1 'Inter',sans-serif;letter-spacing:.3px;color:var(--vs-teal);
  margin-right:14px;white-space:nowrap;
  & i{color:var(--vs-green-dk);font-size:12px;}}

/* one facet group, "Condition", "Drink system" and so on: give the
   bold heading its own air from the chip row that follows it */
body .af-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;
  & b{font:700 11px/1 'Inter',sans-serif;letter-spacing:.4px;text-transform:uppercase;
    color:var(--vs-grey);margin-right:2px;}}

/* facet chip buttons: real button elements with no reset applied yet,
   so today they render as bare OS chrome. Match the vsu-pill language
   already used for the category pills that sit above this bar. */
body .afct{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,79,89,.2);
  border-radius:999px;background:#fff;color:var(--vs-teal);font:600 12.5px/1 'Inter',sans-serif;
  padding:8px 13px;cursor:pointer;transition:background .16s,color .16s,border-color .16s;
  & i{font-style:normal;opacity:.6;}
  &:hover{border-color:var(--vs-teal);}
  &.on{background:var(--vs-teal);color:#fff;border-color:var(--vs-teal);& i{opacity:.85;}}}

body .af-reset{margin-left:auto;border:1px solid rgba(0,79,89,.2);background:#fff;color:var(--vs-grey);
  font:600 12px 'Inter',sans-serif;border-radius:999px;padding:8px 13px;cursor:pointer;
  &:hover{border-color:var(--vs-teal);color:var(--vs-teal);}
  &[hidden]{display:none;}}

body .af-count{font:600 12px 'Inter',sans-serif;color:var(--vs-grey);white-space:nowrap;}

/* Default sorting select: was bare native chrome with no identity of
   its own, which is the real reason it read as competing with the
   filter chips, nothing nearby was differentiated. A quiet neutral
   box instead of the teal pill language above keeps it reading as a
   secondary control, not another filter. */
body select.orderby,body select#orderby{border:1px solid rgba(0,0,0,.16);border-radius:8px;
  background:#fff;color:var(--vs-dark);font:600 12.5px 'Inter',sans-serif;padding:9px 13px;cursor:pointer;}

/* category pill row: build_theme.py already bakes a nowrap plus
   overflow-x:auto rule for this element at max-width 640px, but that
   block compiles in after this file and its main.vsu selector beats
   body on specificity, so it can still win a fight this copy is meant
   to settle. Important guarantees the row scrolls inside its own box
   instead of clipping at the screen edge, regardless of source order. */
body .cat-nav,body .wc-catnav{max-width:100%!important;box-sizing:border-box!important;}
@media(max-width:640px){
  body .cat-nav,body .wc-catnav{flex-wrap:nowrap!important;overflow-x:auto!important;
    overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:6px;}
  body .cat-nav .vsu-pill,body .wc-catnav .vsu-pill{flex:0 0 auto;}
}

/* ============================================================
   FIX 2 of 2: article archive (vsart-* classes, the [vs_articles]
   shortcode in vs-theme/functions.php, confirmed live on the
   /media/articles/ page). Markup only, zero CSS existed anywhere in
   the theme, so the topic chips rendered as one run on string and the
   thumbnails never showed since nothing gave the element carrying the
   background image any size. Styled to match the nw-* reference
   pattern already established in css/template-news.delta.css so this
   grid reads as the same design system rather than a new look.
   ============================================================ */

/* the block theme page template gives post content zero padding by
   default, so this shortcode needs to carry its own side gutter */
body .vsart{padding-inline:var(--pad,32px);box-sizing:border-box;}

/* chip row, priority fix. Flex plus gap stops "AllNewsInfo Guides
   Events..." running together and lets the row wrap instead of
   overflowing at narrow widths. */
body .vsart-chips{display:flex;flex-wrap:wrap;gap:10px;padding-block:20px 6px;}
body .vsart-chip{padding:7px 15px;border:1px solid rgba(0,79,89,.2);border-radius:999px;
  font:600 13px 'Inter',sans-serif;color:var(--vs-teal);text-decoration:none;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s;
  &.on,&:hover{background:var(--vs-teal);color:#fff;border-color:var(--vs-teal);}}

/* card grid: min() keeps the column floor from ever forcing a
   horizontal scrollbar on narrow phones, a plain minmax(300px,..)
   like the reference pattern uses would overflow under roughly 340px. */
body .vsart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:26px;padding-block:20px 48px;}

body .vsart-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--vs-radius,10px);
  overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none;
  transition:transform .18s,box-shadow .18s;
  &:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,79,89,.1);}}

/* thumbnail: was invisible, a background-image on a box with no size
   renders at zero height. Aspect ratio plus cover gives it a size,
   top biased position keeps faces in shot per the site's known
   top-crop problem instead of centring the crop. */
body .vsart-ph{aspect-ratio:16/9;background-color:#eef3f2;background-size:cover;
  background-position:center top;}
body .vsart-ph--none{background:linear-gradient(135deg,#eef3f2,#dfe9e7);
  display:flex;align-items:center;justify-content:center;color:var(--vs-teal);font-size:2.4rem;}

/* Scoped to .vsart-card on purpose: the single-article template (templates/single.html)
   also uses a .vsart-body wrapper, and an unscoped rule turned article body copy into a
   padded flex column. Keep this selector card-only. */
body .vsart-card .vsart-body{padding:20px;display:flex;flex-direction:column;flex:1;
  & h3{font:700 1.1rem/1.3 'Inter',sans-serif;margin:10px 0 8px;color:var(--vs-dark);}
  & time{margin-top:auto;font-size:12px;color:var(--vs-grey);}}

body .vsart-cat{display:inline-block;background:rgba(0,79,89,.08);color:var(--vs-teal);
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:5px 12px;border-radius:6px;}

body .vsart-pager{display:flex;justify-content:center;align-items:center;gap:14px;padding-block:12px 48px;
  & span{font-size:13px;color:var(--vs-grey);}}
body .vsart-pg{padding:9px 16px;border:1px solid rgba(0,0,0,.12);border-radius:8px;
  text-decoration:none;color:var(--vs-dark);font:600 13px 'Inter',sans-serif;
  transition:background .16s,color .16s,border-color .16s;
  &:hover{background:var(--vs-teal);color:#fff;border-color:var(--vs-teal);}}

@media(max-width:480px){body .vsart-grid{grid-template-columns:1fr;}}

/* ============================================================
   Best Buy badge (Graeme, 15 Jul, repeated 29 Jul): "the 24/7 and the
   Petite is Best Buy." Rendered in vs-theme/woocommerce/content-product.php
   as an extra chip, class "chip pc-best", first in the .pc-chips row, only
   when data/machine-cards.json has "best": true (set in scripts/build_theme.py,
   BEST_BUY_IDS). It is a variant of .chip, not a new component: same box
   model, solid wine fill instead of the neutral tint, so it draws the eye
   without breaking the row's alignment. Do not restyle .chip or .pc-cond
   here, this block only adds the new modifier.
   VS brand red is #8f1c2d, wine. Do not use #C8202F, that is a different,
   unrelated red used elsewhere on the site (see home.delta.css .hh-advert).
   ============================================================ */
.chip.pc-best{background:#8f1c2d;border-color:#8f1c2d;color:#fff;font-weight:800;letter-spacing:.2px;box-shadow:0 3px 10px -3px rgba(143,28,45,.6);}
.chip.pc-best i{opacity:1;}

/* ============================================================
   SINGLE ARTICLE TEMPLATE (vs-theme/templates/single.html).
   The template itself was fine and already registered. It simply had NO CSS:
   .vsart-single, .vsart-head, .vsart-head-cat, .vsart-head-date, .vsart-featimg
   and .vsart-back all had zero rules, which is why the article view read as broken
   while the listing looked fine. Same failure mode as the .vsart-* listing module
   and the .vs-afacets refine block: markup shipped, stylesheet never written.

   Hero deliberately mirrors the Workplace Vending hero (css/workplace-vending.delta.css
   lines 24 to 30): teal scrim, green pill badge, 900 weight headline at -1.5px tracking.
   Category, headline and date all share one 760px axis with the body and the featured
   image, so the left edge runs straight down the page.
   The featured image is pulled up to overlap the hero, so the hero carries extra bottom
   padding to leave room for it.
   Nav clearance uses the --vs-nav-h token, matching .vsu-pagehead and .sr-head.
   ============================================================ */
body .vsart-single{background:#fff;--vsart-axis:760px;}

body .vsart-head{
  position:relative;overflow:hidden;color:#fff;
  display:grid;grid-template-columns:minmax(0,var(--vsart-axis));justify-content:center;
  background:
    radial-gradient(70% 130% at 6% 120%,color-mix(in srgb,var(--vs-green) 34%,transparent) 0%,transparent 60%),
    linear-gradient(150deg,var(--vs-teal-lt) 0%,var(--vs-teal) 44%,var(--vs-teal-dk) 100%);
  padding:calc(var(--vs-nav-h,84px) + clamp(28px,4.4vw,52px)) var(--pad,32px) clamp(84px,10vw,124px);
  box-sizing:border-box;
}
/* soft-light grain, same finish as .vsu-hero and .vsu-pagehead */
body .vsart-head::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;}
body .vsart-head > *{position:relative;z-index:1;min-width:0;}
/* Pill and date must hug their content AND sit on the left axis.
   WordPress block layout emits `margin-left:auto!important;margin-right:auto!important`
   on every child of a constrained group (.wp-container-core-group-is-layout-*), and in a
   grid, auto margins beat justify-self, so a fit-content element gets centred. Killing the
   left auto margin is what actually pins these to the headline's left edge. */
body .vsart-head-cat,body .vsart-head-date{
  width:fit-content;justify-self:start;
  margin-left:0!important;margin-right:auto!important;}

/* category as the Workplace Vending pill badge */
body .vsart-head-cat{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(170,183,91,.15);border:1px solid rgba(170,183,91,.35);border-radius:20px;
  padding:6px 14px;margin:0 0 20px;
  font:600 12px 'Inter',sans-serif;letter-spacing:.3px;color:#c8d68a;
  & a{color:inherit;text-decoration:none;}
}
body .vsart-head h1{
  font:900 clamp(2.2rem,5vw,3.5rem)/1.14 'Inter',sans-serif;letter-spacing:-1.5px;
  color:#fff;margin:0 0 18px;
}
body .vsart-head-date{
  margin:0;font:600 12.5px 'Inter',sans-serif;letter-spacing:.3px;
  color:rgba(255,255,255,.62);
}

/* featured image overlaps up into the hero */
body .vsart-featimg{
  position:relative;z-index:2;
  max-width:var(--vsart-axis);margin-inline:auto;
  margin-top:clamp(-72px,-6.5vw,-44px)!important;
  margin-bottom:clamp(26px,4vw,42px);
  border-radius:var(--vs-radius,10px);overflow:hidden;
  box-shadow:0 12px 22px -14px rgba(0,79,89,.34);
  & img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;object-position:center 20%;}
}

/* Article body typography. Scoped so it cannot reach the card grid. */
/* Editorial reading treatment: larger, lighter, more air. Weight stays 400 because the
   body face resolves to Roboto with no Light weight loaded, so 300 would be synthesised
   or silently snap back. The "lighter" read comes from colour and leading instead:
   #41585b against the old #1a2e31, generous 1.85 leading, and headings dropped a weight. */
body .vsart-single .vsart-body{
  padding:0 var(--pad,32px) clamp(48px,7vw,84px);
  font-size:clamp(1.09rem,1.15vw,1.18rem);
  line-height:1.85;
  color:#41585b;
  font-weight:400;
  letter-spacing:.002em;
  & > *{max-width:var(--vsart-axis);margin-inline:auto;}
  & p{margin:0 0 1.35em;}
  /* lead paragraph, sets the tone before the body settles down */
  & > .entry-content > p:first-of-type,& > p:first-of-type{
    font-size:1.16em;line-height:1.7;color:#354d50;margin-bottom:1.5em;}
  & h2{font:600 clamp(1.4rem,2.7vw,1.85rem)/1.3 'Inter',sans-serif;color:var(--vs-teal);
       letter-spacing:-.5px;margin:2.4em auto .7em;}
  & h3{font:600 1.2rem/1.4 'Inter',sans-serif;color:var(--vs-dark);letter-spacing:-.2px;
       margin:2em auto .55em;}
  & strong,& b{font-weight:600;color:#2b4144;}
  & ul,& ol{margin:0 auto 1.35em;padding-left:1.3em;box-sizing:border-box;}
  & li{margin:0 0 .6em;padding-left:.2em;}
  & li::marker{color:var(--vs-green);}
  & a{color:var(--vs-teal);text-decoration:underline;text-decoration-thickness:1px;
      text-underline-offset:3px;text-decoration-color:rgba(0,79,89,.35);
      &:hover{text-decoration-color:currentColor;}}
  & img{max-width:100%;height:auto;border-radius:var(--vs-radius,10px);}
  & blockquote{margin:2em auto;padding:4px 0 4px 24px;border-left:2px solid var(--vs-green);
       color:#4d6467;font-style:normal;font-size:1.1em;line-height:1.7;}
  & hr{border:0;border-top:1px solid rgba(0,79,89,.12);margin:2.6em auto;}
}
/* the featured image is a direct child of .vsart-body, keep it full-axis, no double margin */
body .vsart-single .vsart-body > .vsart-featimg{margin-inline:auto;}

/* VERTICAL RHYTHM INSIDE THE ARTICLE BODY.
   The project carries a global kill-rule, `main.vsu > *, .wp-block-post-content > *
   {margin-block:0!important}`, which strips WordPress's default 24px spacing so page
   layouts sit flush. Articles are the one place that genuinely needs rhythm, and because
   that rule is !important, ordinary margins on p/h2/h3 silently lose. Re-assert spacing
   here, scoped to the article body only, so page layouts are untouched.
   ============================================================ */
body .vsart-single .entry-content > *{margin-block:0 1.4em!important;}
body .vsart-single .entry-content > h2{margin-block:2.3em .55em!important;}
body .vsart-single .entry-content > h3{margin-block:1.9em .45em!important;}
body .vsart-single .entry-content > ul,
body .vsart-single .entry-content > ol{margin-block:0 1.4em!important;}
body .vsart-single .entry-content > blockquote{margin-block:2em!important;}
body .vsart-single .entry-content > figure,
body .vsart-single .entry-content > img{margin-block:1.9em!important;}
body .vsart-single .entry-content > :first-child{margin-block-start:0!important;}
body .vsart-single .entry-content > :last-child{margin-block-end:0!important;}
/* a heading immediately after a heading should not carry the full gap */
body .vsart-single .entry-content > h2 + h3{margin-block-start:.7em!important;}

body .vsart-back{max-width:var(--vsart-axis);margin:clamp(28px,4vw,44px) auto 0;
  padding-top:22px;border-top:1px solid rgba(0,79,89,.12);
  & a{color:var(--vs-teal);font:600 14px 'Inter',sans-serif;text-decoration:none;
      &:hover{text-decoration:underline;}}}

@media(max-width:640px){
  body .vsart-head h1{letter-spacing:-.8px;}
  body .vsart-featimg{margin-top:-56px!important;}
}

/* ============================================================
   MACHINE BRANDING hero, full-bleed cover treatment (Laurence, 6 Aug 2026).
   The Inventi bite banner was composed as a wide 16:9 with the machine in the
   right third and deliberate empty space on the left for the headline, so it
   belongs as the section background rather than inside the old right-hand
   .mbh-media panel, which cropped away the composition. That panel is now
   removed from the page content.
   Scoped to .mbh-hero on purpose: .vsu-hero is the shared sitewide hero and
   must not be restyled globally.
   The scrim mirrors the Workplace Vending hero pattern so the copy stays
   legible over the artwork at any width.
   ============================================================ */
body .vsu-hero.mbh-hero{
  background:
    /* top fade under the fixed nav, mirrors .vsn::before which washes out over a photo hero */
    linear-gradient(180deg,rgba(0,61,70,.72) 0%,rgba(0,61,70,.28) 90px,rgba(0,61,70,0) 170px),
    linear-gradient(90deg,rgba(0,79,89,.94) 0%,rgba(0,79,89,.86) 34%,rgba(0,79,89,.35) 62%,rgba(0,79,89,.10) 100%),
    url('/wp-content/uploads/2026/08/mb-hero-inventibite-v2.webp') center right / cover no-repeat,
    linear-gradient(150deg,var(--vs-teal-lt) 0%,var(--vs-teal) 46%,var(--vs-teal-dk) 100%);
  min-height:clamp(440px,58vh,660px);
  align-content:center;
}
/* the copy column keeps to the left half so it never collides with the machine */
body .vsu-hero.mbh-hero .mbh-copy{max-width:600px;position:relative;z-index:1;}

@media(max-width:900px){
  /* narrow screens: drop the scrim to a top-down wash so the machine still reads */
  body .vsu-hero.mbh-hero{
    background:
      linear-gradient(180deg,rgba(0,61,70,.72) 0%,rgba(0,61,70,0) 150px),
      linear-gradient(180deg,rgba(0,79,89,.92) 0%,rgba(0,79,89,.72) 46%,rgba(0,79,89,.30) 100%),
      url('/wp-content/uploads/2026/08/mb-hero-inventibite-v2.webp') center right / cover no-repeat,
      linear-gradient(150deg,var(--vs-teal-lt) 0%,var(--vs-teal) 46%,var(--vs-teal-dk) 100%);
    min-height:clamp(380px,52vh,520px);
  }
}

/* ============================================================
   NUMBERED STEP BLOCKS, width fix (Graeme, 6 Aug: "it looks like a postage stamp").
   .vs-steps is hard-capped at max-width:860px in SEVENTEEN duplicated per-page
   stylesheets (call-centres.css, coffee-machines-2.css, fresh-food-vending.css and
   the rest, same rules copy-pasted in each). Its parent .vs-how additionally takes
   padding-right:380px above 900px to clear the floating comms hub. Combined, the three
   cards end up small and stranded left inside a full-width band on desktop.
   Overriding once here reaches every page, rather than editing 17 files that will
   drift apart again. Cap raised, not removed, so it cannot sprawl on ultra-wide.
   NOTE: Graeme also called the layout itself "not great" and it came from an earlier
   template, so this is a width correction, not the redesign. Redesign still open.
   ============================================================ */
body .vs-steps{max-width:min(1100px,100%)!important;gap:18px!important;}
body .vs-step{min-width:min(260px,100%);}

@media(max-width:700px){
  body .vs-steps{gap:14px!important;}
  body .vs-step{min-width:100%;}
}

/* ============================================================
   QUOTE CONFIRMATION TOAST (Graeme and Lawrence, 6 Aug 2026).
   Behaviour lives in vs-theme/assets/js/vs-interactions.js. Appears bottom
   centre on add, offers the two choices Graeme asked for ("ready to submit
   for a quote, or do you want to continue shopping"), then shrinks toward
   the header basket icon so the user learns where their item went.
   Sits below the floating comms hub in z-order so the two never fight.
   ============================================================ */
body .vsq-toast{
  position:fixed;left:50%;bottom:26px;z-index:900;
  transform:translate(-50%,18px);opacity:0;pointer-events:none;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .32s ease;
  max-width:min(520px,calc(100vw - 32px));
}
body .vsq-toast.on{transform:translate(-50%,0);opacity:1;pointer-events:auto;}
body .vsq-toast-in{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid rgba(0,79,89,.14);border-radius:14px;
  padding:14px 18px;box-shadow:0 18px 44px -14px rgba(0,79,89,.42);
  & > i{color:var(--vs-green);font-size:1.35rem;flex:0 0 auto;}
}
body .vsq-toast-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0;
  & b{font:700 14px 'Inter',sans-serif;color:var(--vs-dark);}
  & span{font-size:12.5px;color:var(--vs-grey);margin-top:2px;}}
body .vsq-toast-act{display:flex;gap:8px;margin-left:auto;flex:0 0 auto;
  & .btn{padding:9px 14px;font-size:12.5px;white-space:nowrap;}}

/* the basket icon acknowledges the arrival */
body .vsn-util.quote.vsq-pop{animation:vsqPop .62s cubic-bezier(.2,.8,.2,1);}
@keyframes vsqPop{
  0%{transform:scale(1);}
  38%{transform:scale(1.32);}
  62%{transform:scale(.94);}
  100%{transform:scale(1);}
}

@media(max-width:620px){
  body .vsq-toast{left:12px;right:12px;bottom:80px;transform:translateY(18px);max-width:none;}
  body .vsq-toast.on{transform:translateY(0);}
  body .vsq-toast-in{flex-wrap:wrap;}
  body .vsq-toast-act{margin-left:0;width:100%;
    & .btn{flex:1;justify-content:center;}}
}

/* Morph-to-ball on dismiss (Graeme and Lawrence, 6 Aug: the popup "morphs into a
   little ball as it flies into the basket icon"). The toast collapses its content
   and rounds down, then a separate .vsq-ball is released from its position and
   travels to the header basket. Separate element on purpose: the toast is centred
   with its own translate(-50%) and animating over that fights the centring. */
/* Squeeze-to-ball (Laurence 12 Aug): the bar first compresses its width down to
   ball size while tinting ball-green, reading as the toast rolling itself up;
   only then is the real ball released from the collapsed spot. JS pins an explicit
   start width first, because width:auto does not transition. */
body .vsq-toast.morph{transition:opacity .14s ease .3s;opacity:0;}
body .vsq-toast.morph .vsq-toast-in{
  transition:width .28s cubic-bezier(.65,0,.35,1),height .28s cubic-bezier(.65,0,.35,1),
    border-radius .22s ease,padding .28s ease,background .24s ease .06s,box-shadow .24s ease;
  width:34px;height:34px;min-height:0;padding:0;border-radius:999px;overflow:hidden;margin:0 auto;
  background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--vs-green) 82%,#fff),var(--vs-green-dk));
  box-shadow:0 6px 18px -4px rgba(0,79,89,.5);}
body .vsq-toast.morph .vsq-toast-in > *{opacity:0;transition:opacity .12s ease;}
body .vsq-ball{
  position:fixed;z-index:901;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--vs-green) 82%,#fff),var(--vs-green-dk));
  box-shadow:0 6px 18px -4px rgba(0,79,89,.5);
  opacity:1;transform:translate(0,0) scale(1);
}
body .vsq-ball.go{
  /* ease-in on purpose (Laurence, 6 Aug): drifts out of the toast, then accelerates
     into the basket, which reads as being pulled in rather than thrown. */
  transition:transform .92s cubic-bezier(.55,.06,.68,.19),opacity .92s cubic-bezier(.7,0,.9,.2);
}
@media(prefers-reduced-motion:reduce){
  body .vsq-ball{display:none;}
  body .vsq-toast,body .vsq-toast.morph .vsq-toast-in{transition:opacity .2s ease;}
}

/* ============================================================
   REQUEST A QUOTE, minimum height on the empty basket (Laurence, 6 Aug 2026).
   With nothing in the basket the page renders about 482px tall in a 940px
   viewport, so the footer rides up and the page reads as collapsed or broken.
   A min-height only bites when the content is short, which is precisely the
   empty state, so no separate empty-state class is needed: once machines are
   in the basket the content already exceeds this and the rule stops mattering.
   Scoped to the Request a Quote page (id 48644) so no other page is affected.
   ============================================================ */
/* The height sits on .vsq-empty, not .vsq-basket, so it exists ONLY in the empty
   state. .vsq-empty is the sole visible child when the basket is empty (.vsq-items
   and .vsq-form are display:none), so centring inside it centres the message in the
   box without needing a separate empty-state class on the wrapper. */
/* ⛔ The comment above is WRONG about one thing, and it caused a live bug (found 27 Aug).
   .vsq-empty is NOT only present in the empty state: this build always keeps a hidden
   "basket is empty" template in the markup and toggles the `hidden` attribute. A bare
   display:flex beats the UA's low-specificity [hidden]{display:none}, so with machines
   in the basket the page showed "Your quote basket is empty" directly above the very
   machines it listed, and .vsq-empty's grid-column:1/-1 pushed .vsq-form into the 340px
   column, leaving the whole right column blank. Guard the hidden state explicitly. */
body.page-id-48644 .vsq-empty[hidden]{display:none;}
body.page-id-48644 .vsq-empty{
  min-height:500px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  font-size:clamp(1.08rem,1.7vw,1.28rem);
  line-height:1.7;
  color:#4d6467;
  max-width:46ch;
  margin-inline:auto;
  & a{color:var(--vs-teal);text-decoration:underline;text-underline-offset:3px;
      text-decoration-color:rgba(0,79,89,.35);
      &:hover{text-decoration-color:currentColor;}}
}

/* Custom comparison icon (Laurence 12 Aug 2026, icon-comparison.svg): replaces the FA scales glyph
   on every product-card compare toggle via an alpha mask, so baked catalogue cards (fa-plus),
   server cards (fa-scale-balanced) and any future FA class all render the same icon without
   content patches. Checked state falls back to the FA checkmark (rule above). */
.pc-cmp span i.fa{display:inline-block;width:17px;height:17px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4gPGcgb3BhY2l0eT0iLjUiPiA8cGF0aCBkPSJNMjAuNjU1LDQ1OS40NDdjMCwxNy42MTcsMTQuMjgxLDMxLjg5OCwzMS44OTgsMzEuODk4aDE4OC4ydi02Mi44NzFIMjAuNjU1djMwLjk3M1pNMjAuNjU1LDMyNS4zODJoMjIwLjA5N3YtNjUuODc0SDIwLjY1NXY2NS44NzRaTTI3MS4yNDgsNDA1LjY2NGgyMjAuMDk3di01Ny40NzFoLTIyMC4wOTd2NTcuNDcxWk0yNzEuMjQ4LDI1OS41MDl2NjUuODc0aDIyMC4wOTd2LTY1Ljg3NGgtMjIwLjA5N1pNMjcxLjI0OCw0OTEuMzQ1aDE4OC4yYzE3LjYxNywwLDMxLjg5OC0xNC4yODEsMzEuODk4LTMxLjg5OHYtMzAuOTczaC0yMjAuMDk3djYyLjg3MVpNMjAuNjU1LDQwNS42NjRoMjIwLjA5N3YtNTcuNDcxSDIwLjY1NXY1Ny40NzFaIi8+IDwvZz4gPHBhdGggZD0iTTEzMy45NzcsMTE3LjQwMWwtMy43OC0xNi43MzloLS4xOGwtMy45NTksMTYuNzM5LTYuNjYsMjcuMTc5aDIwLjg3OWwtNi4zLTI3LjE3OVpNMzg1Ljg5NywxMzYuNjYxaC0xNy4xdjMzLjQ3OWgyMC44NzljMy42LDAsNi42Ni0zLjA2LDYuNjYtNi44NHYtMTUuNjU5YzAtNi42Ni00LjE0LTEwLjk3OS0xMC40MzktMTAuOTc5Wk0zODkuNjc3LDgzLjkyM2gtMjAuODc5djMxLjMxOWgxNy4xYzYuMywwLDEwLjQzOS00LjMyLDEwLjQzOS0xMC45Nzl2LTEzLjVjMC0zLjc4LTMuMDYxLTYuODQtNi42Ni02Ljg0Wk0yMC42NTUsNTIuNTUzdjE4NC4xNDVoMjIwLjA5N1YyMC42NTVINTIuNTUzYy0xNy42MTcsMC0zMS44OTgsMTQuMjgxLTMxLjg5OCwzMS44OThaTTg1LjE5OSwxODYuODc4bDMyLjc1OS0xMTkuNjk1YzEuMDgtMy42LDIuMTYtNC41LDUuOTM5LTQuNWgxMy41YzMuNzgsMCw0Ljg2LjksNS45NCw0LjVsMzMuMjk4LDExOS42OTVjLjksMy40Mi4xOCw0LjUtMy40Miw0LjVoLTE2LjczOWMtMy43OCwwLTQuODU5LS45LTUuNzYtNC41bC01LjIyLTIxLjA1OWgtMzEuNDk5bC01LjIyLDIxLjA1OWMtLjksMy42LTEuOTgsNC41LTUuNzYsNC41aC0xNC4zOTljLTMuNiwwLTQuMzItMS4wOC0zLjQyLTQuNVpNNDU5LjQ0NywyMC42NTVoLTE4OC4ydjIxNi4wNDNoMjIwLjA5N1Y1Mi41NTNjMC0xNy42MTctMTQuMjgxLTMxLjg5OC0zMS44OTgtMzEuODk4Wk00MjEuODk2LDE2OC4zMzljMCwxMi43NzktNS45MzksMjMuMDM5LTIzLjc1OSwyMy4wMzloLTQ5LjQ5OGMtMy42LDAtNC42OC0xLjA4LTQuNjgtNC42OHYtMTE5LjMzNWMwLTMuNiwxLjA4LTQuNjgsNC42OC00LjY4aDQ4LjU5OGMxNy44MTksMCwyMy43NiwxMC4yNiwyMy43NiwyMy4wMzl2MTguMzU5YzAsNy45MTktNC4xNDEsMTkuMjU5LTE1LjY2LDIxLjU5OXYuMzZjMTEuNTIsMi4zNCwxNi41NiwxMC45NzksMTYuNTYsMTkuNzk5djIyLjQ5OVoiLz4gPC9zdmc+") center/contain no-repeat;
  mask:url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4gPGcgb3BhY2l0eT0iLjUiPiA8cGF0aCBkPSJNMjAuNjU1LDQ1OS40NDdjMCwxNy42MTcsMTQuMjgxLDMxLjg5OCwzMS44OTgsMzEuODk4aDE4OC4ydi02Mi44NzFIMjAuNjU1djMwLjk3M1pNMjAuNjU1LDMyNS4zODJoMjIwLjA5N3YtNjUuODc0SDIwLjY1NXY2NS44NzRaTTI3MS4yNDgsNDA1LjY2NGgyMjAuMDk3di01Ny40NzFoLTIyMC4wOTd2NTcuNDcxWk0yNzEuMjQ4LDI1OS41MDl2NjUuODc0aDIyMC4wOTd2LTY1Ljg3NGgtMjIwLjA5N1pNMjcxLjI0OCw0OTEuMzQ1aDE4OC4yYzE3LjYxNywwLDMxLjg5OC0xNC4yODEsMzEuODk4LTMxLjg5OHYtMzAuOTczaC0yMjAuMDk3djYyLjg3MVpNMjAuNjU1LDQwNS42NjRoMjIwLjA5N3YtNTcuNDcxSDIwLjY1NXY1Ny40NzFaIi8+IDwvZz4gPHBhdGggZD0iTTEzMy45NzcsMTE3LjQwMWwtMy43OC0xNi43MzloLS4xOGwtMy45NTksMTYuNzM5LTYuNjYsMjcuMTc5aDIwLjg3OWwtNi4zLTI3LjE3OVpNMzg1Ljg5NywxMzYuNjYxaC0xNy4xdjMzLjQ3OWgyMC44NzljMy42LDAsNi42Ni0zLjA2LDYuNjYtNi44NHYtMTUuNjU5YzAtNi42Ni00LjE0LTEwLjk3OS0xMC40MzktMTAuOTc5Wk0zODkuNjc3LDgzLjkyM2gtMjAuODc5djMxLjMxOWgxNy4xYzYuMywwLDEwLjQzOS00LjMyLDEwLjQzOS0xMC45Nzl2LTEzLjVjMC0zLjc4LTMuMDYxLTYuODQtNi42Ni02Ljg0Wk0yMC42NTUsNTIuNTUzdjE4NC4xNDVoMjIwLjA5N1YyMC42NTVINTIuNTUzYy0xNy42MTcsMC0zMS44OTgsMTQuMjgxLTMxLjg5OCwzMS44OThaTTg1LjE5OSwxODYuODc4bDMyLjc1OS0xMTkuNjk1YzEuMDgtMy42LDIuMTYtNC41LDUuOTM5LTQuNWgxMy41YzMuNzgsMCw0Ljg2LjksNS45NCw0LjVsMzMuMjk4LDExOS42OTVjLjksMy40Mi4xOCw0LjUtMy40Miw0LjVoLTE2LjczOWMtMy43OCwwLTQuODU5LS45LTUuNzYtNC41bC01LjIyLTIxLjA1OWgtMzEuNDk5bC01LjIyLDIxLjA1OWMtLjksMy42LTEuOTgsNC41LTUuNzYsNC41aC0xNC4zOTljLTMuNiwwLTQuMzItMS4wOC0zLjQyLTQuNVpNNDU5LjQ0NywyMC42NTVoLTE4OC4ydjIxNi4wNDNoMjIwLjA5N1Y1Mi41NTNjMC0xNy42MTctMTQuMjgxLTMxLjg5OC0zMS44OTgtMzEuODk4Wk00MjEuODk2LDE2OC4zMzljMCwxMi43NzktNS45MzksMjMuMDM5LTIzLjc1OSwyMy4wMzloLTQ5LjQ5OGMtMy42LDAtNC42OC0xLjA4LTQuNjgtNC42OHYtMTE5LjMzNWMwLTMuNiwxLjA4LTQuNjgsNC42OC00LjY4aDQ4LjU5OGMxNy44MTksMCwyMy43NiwxMC4yNiwyMy43NiwyMy4wMzl2MTguMzU5YzAsNy45MTktNC4xNDEsMTkuMjU5LTE1LjY2LDIxLjU5OXYuMzZjMTEuNTIsMi4zNCwxNi41NiwxMC45NzksMTYuNTYsMTkuNzk5djIyLjQ5OVoiLz4gPC9zdmc+") center/contain no-repeat;}
.pc-cmp span i.fa::before{content:none;}
body .pc-cmp input:checked + span{transform:none;}
.pc-cmp input:checked + span i.fa{-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNNDM4LjYgMTA1LjRjMTIuNSAxMi41IDEyLjUgMzIuOCAwIDQ1LjNsLTI1NiAyNTZjLTEyLjUgMTIuNS0zMi44IDEyLjUtNDUuMyAwbC0xMjgtMTI4Yy0xMi41LTEyLjUtMTIuNS0zMi44IDAtNDUuM3MzMi44LTEyLjUgNDUuMyAwTDE2MCAzMzguNyAzOTMuNCAxMDUuNGMxMi41LTEyLjUgMzIuOC0xMi41IDQ1LjMgMHoiLz48L3N2Zz4=") center/contain no-repeat;mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNNDM4LjYgMTA1LjRjMTIuNSAxMi41IDEyLjUgMzIuOCAwIDQ1LjNsLTI1NiAyNTZjLTEyLjUgMTIuNS0zMi44IDEyLjUtNDUuMyAwbC0xMjgtMTI4Yy0xMi41LTEyLjUtMTIuNS0zMi44IDAtNDUuM3MzMi44LTEyLjUgNDUuMyAwTDE2MCAzMzguNyAzOTMuNCAxMDUuNGMxMi41LTEyLjUgMzIuOC0xMi41IDQ1LjMgMHoiLz48L3N2Zz4=") center/contain no-repeat;width:17px;height:17px;}

/* ---- testimonial rotator (27 Aug 2026) -----------------------------------
   Drop <div class="vs-tst" data-vs-tst="workplace|bizopp|mixed"></div> on any
   page; vs-interactions.js fetches data/testimonials.json and renders cards
   using the existing .vsu-quote card look. 3 up on desktop, 1 on mobile. */
.vs-tst{width:100%;max-width:1100px;margin:36px auto 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);}
.vs-tst-track{display:flex;width:max-content;align-items:stretch;
  animation:vs-tst-scroll 120s linear infinite;will-change:transform;}
.vs-tst:hover .vs-tst-track,.vs-tst:focus-within .vs-tst-track{animation-play-state:paused;}
.vs-tst .vsu-quote{flex:0 0 auto;width:352px;margin:0 22px 0 0;display:flex;flex-direction:column;}
.vs-tst .vsu-quote p{flex:1 1 auto;}
@keyframes vs-tst-scroll{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@media(max-width:900px){.vs-tst .vsu-quote{width:min(335px,82vw);}}
@media(prefers-reduced-motion:reduce){
  .vs-tst{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
  .vs-tst-track{animation:none;}
}


/* ===== 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;}
/* logo oversized relative to its layout slot (negative margin-block) so the bar height is
   untouched — it visually dominates without changing nav proportions */
.vsn-logo{display:flex;align-items:center;height:58px;margin-block:-8px;flex:0 0 auto;transition:height .3s,margin .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:50px;margin-block:-6px;}
.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.) */
/* ALL megas left-align to their item (Laurence 12 Aug) — matches the old Machines special case.
   Square TOP-LEFT corner only; the other three stay rounded. */
/* Entrance = CASCADE (Laurence pick, 12 Aug, from nav-animation-samples): the panel rises
   quickly, then the menu entries fade-slide in with a small stagger. Closing is a soft fade,
   with the item delays zeroed so everything leaves together. */
.vsn-mega{position:absolute;top:calc(100% + 12px);left:0;transform:translateY(10px);
  background:#fff;border-radius:0 18px 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:opacity .24s ease-in,transform .24s ease-in,visibility 0s linear .24s;z-index:50;}
.vsn-item:hover .vsn-mega{opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .34s cubic-bezier(.16,1,.3,1),visibility 0s;}
/* beats a.mi's own transition shorthand (same-tie loses on order), and carries the
   hover background timing along so row hover stays snappy */
.vsn-menu .vsn-item .vsn-mega-grid > *{opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease,background .14s ease;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *{opacity:1;transform:none;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(1){transition-delay:30ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(2){transition-delay:46ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(3){transition-delay:62ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(4){transition-delay:78ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(5){transition-delay:94ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(6){transition-delay:110ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(7){transition-delay:126ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(8){transition-delay:142ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(9){transition-delay:158ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(10){transition-delay:174ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(11){transition-delay:190ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(12){transition-delay:206ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(13){transition-delay:222ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(14){transition-delay:238ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(15){transition-delay:254ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(16){transition-delay:270ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(17){transition-delay:286ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(18){transition-delay:302ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(19){transition-delay:318ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(20){transition-delay:334ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(21){transition-delay:350ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(22){transition-delay:366ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(23){transition-delay:382ms;}
.vsn-menu .vsn-item:hover .vsn-mega-grid > *:nth-child(24){transition-delay:398ms;}
.vsn-in{position:relative;}
.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:800px;grid-template-columns:1fr 1fr 1fr;}
.vsn-w1{width:320px;grid-template-columns: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;}
/* Sectors: green vertical dividers between the three labelled columns (Laurence 12 Aug).
   Only grids that carry column headers get them (:has), so Machines/Solutions stay clean. */
.vsn-mega-grid:has(> .vsn-col-h){position:relative;column-gap:18px;}
.vsn-mega-grid:has(> .vsn-col-h)::before,.vsn-mega-grid:has(> .vsn-col-h)::after{content:"";position:absolute;top:10px;bottom:10px;width:1px;
  background:color-mix(in srgb,var(--vs-green) 45%,#fff);pointer-events:none;}
.vsn-mega-grid:has(> .vsn-col-h)::before{left:calc(33.333% - 3px);}
.vsn-mega-grid:has(> .vsn-col-h)::after{left:calc(66.666% + 3px);}
.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);}

/* 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);}
/* the bottom app-bar is retired — mobile uses the top icon dashboard + the page Enquire tab */
.vsn-appbar{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:44px;margin-block:-4px;} }

/* ===== 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)); } }
/* wider breathing room between content and the locked-open hub (user 19 Jul: 28px read
   as "touching"). body-scoped so it also beats the stale :root copies baked into
   previously-pushed pages (body.class > :root specificity). */
@media(min-width:900px){ body.vs-form-open.vs-hub-lead-page{ --vs-form-gap:48px; } }

/* 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;}
  /* footer: the locked-open hub is fixed bottom-right, so on lead pages the footer
     link columns sat under it (S19 audit) — clear it like any other full-bleed band */
  body.vs-form-open.vs-hub-lead-page .vsx-footer{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.
     .vsu-cards is NOT in this list: its column count is owned by the :has()/container-query
     rule in vs-ui.css (even rows only). Forcing 2-up here would reintroduce the 2+1 orphan. */
  body .vsu-cards{gap:12px!important;}
  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;}
}

/* ============================================================
   MOBILE CARD TEXT CLIPPING FIX (<=600px).
   Root cause: the icon+text cards below are flex rows (.vs-pain-card,
   .vs-objection-item, .vs-benefit-card-header), and their text child
   (.vs-pain-text, .vs-objection-text, .vs-benefit-card-title) carries
   no min-width. A flex child's automatic min-width is its content's
   min-content size (its longest unbroken word) unless min-width:0 is
   set, so once the MOBILE APP FEEL block above squeezes these grids
   to 2 columns, the text refuses to shrink to fit and overflows the
   row. .vs-benefit-card also sets overflow:hidden (needed for its
   accordion), so that overflow gets hard-clipped, eg "Cashless and
   contactless payments" loses its final "s". .vs-pain-card and
   .vs-objection-item carry no overflow:hidden of their own, so their
   overflow sits under the next card in the row instead, reading the
   same way in a screenshot.
   The sector photo-header cards (.vs-industry-card, eg "Manufacturing
   & Production") clip for a related reason: .vs-industries has no
   mobile padding rule at all, unlike its sibling sections above, and
   .vs-industry-body's own 22px padding is never reduced either, since
   the padding rule above targets the outer .vs-industry-card, not the
   child that actually carries the padding. Almost no width is left
   for the heading, and .vs-industry-card's own overflow:hidden clips
   it mid word.
   Fix: stack all three patterns to one column on mobile and move the
   icon above the text, centred, as the reviewer asked. Selectors on
   purpose repeat ones used above; being later in this same file, and
   body-prefixed plus !important like the rest of it, they win over
   both the 2-up rule above and the stale inline vs-global.css copy
   that already-pushed pages carry. Everything here sits inside
   max-width:600px, so desktop and tablet layouts are unchanged.
   ============================================================ */
@media(max-width:600px){
  /* One column instead of two for the three affected grids. */
  body .vs-pain-grid,body .vs-objections-grid,body .vs-industries-grid{
    grid-template-columns:1fr!important;gap:14px!important;}
  body .vs-benefit-grid{display:flex!important;flex-direction:column!important;gap:14px!important;}
  body .vs-benefit-col{display:contents!important;}

  /* Pain cards and quoted-objection cards: icon on top, text centred
     under it. Same markup shape on every sector page. */
  body .vs-pain-card,body .vs-objection-item{
    flex-direction:column!important;align-items:center!important;text-align:center!important;}
  body .vs-pain-text,body .vs-objection-text{width:100%!important;min-width:0!important;}

  /* Benefit accordion header (stopwatch, leaf, card, droplet icons):
     icon on top too. The toggle chevron just moves under the title;
     the accordion body and its open/close script are untouched. */
  body .vs-benefit-card-header{
    flex-direction:column!important;align-items:center!important;text-align:center!important;}
  body .vs-benefit-card-title{width:100%!important;min-width:0!important;}

  /* Belt and braces: even at full card width, one very long unbroken
     word must wrap rather than push the box wide and get clipped. */
  body .vs-pain-text h3,body .vs-pain-text p,
  body .vs-objection-text h3,body .vs-objection-text p,
  body .vs-objection-card strong,body .vs-objection-card p,
  body .vs-benefit-card-title,
  body .vs-industry-body h3,body .vs-industry-body p{
    overflow-wrap:anywhere!important;word-break:break-word!important;}

  /* Sector photo-header cards: give the section and the card body the
     mobile padding they were missing, so the heading has room. */
  body .vs-industries{padding-left:var(--vs-edge)!important;padding-right:var(--vs-edge)!important;padding-block:32px!important;}
  body .vs-industry-body{padding:16px!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:14px;margin:4px 0 18px;}
.pv-feat{display:flex;gap:13px;align-items:flex-start;}
.pv-feat-ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:rgba(0,79,89,.08);color:var(--vs-teal);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;}


/* ===== Mobile fix (2026-09-21): connector-spine text clearance on the five ==-phase
   "how it works" components (workplace-vending .wv-phase, snack-drink-vending .sd-phase,
   fresh-food-vending .ff-phase, water-coolers .wc-phase, location-analysis .vla2-phase).
   Each component's ::after spine and its own mobile breakpoint live in that PAGE's own
   content <style> block (not this theme), so they cannot be edited directly; this override
   only adds padding-left to the heading/paragraph text so it clears the spine into its own
   rail, matching the width of the 44px phase-mark circle the spine runs under. VARIANT A
   (keep spine, pad text) ships; VARIANT B (hide spine) was compared via a client-side-only
   screenshot swap and was never deployed. No !important needed: the page style never sets
   padding-left on these elements, so there's nothing to out-cascade. */
@media(max-width:760px){
  .wv-phase b,.wv-phase p,
  .sd-phase b,.sd-phase p,
  .ff-phase b,.ff-phase p,
  .wc-phase b,.wc-phase p{padding-left:44px;}
}
/* .vla2-phase's own spine goes vertical at max-width:1320px (not 760px like the other four
   — confirmed by inspecting the live page CSS), so its text-clearance override is gated at
   the same breakpoint or it would sit un-padded (overlapping the spine) from 761-1320px. */
@media(max-width:1320px){
  .vla2-phase b,.vla2-phase p{padding-left:44px;}
}
/* Stuck-hover fix: .vla2-assess .vla-card:before is a 3px accent bar meant only for real
   :hover. On touch, a tap can fire :hover with no matching un-hover, leaving the bar lit
   after the finger lifts. The page's own hover rule (.vla2-assess .vla-card:hover:before
   {opacity:1}) has identical specificity to this override and loads after this stylesheet,
   so on touch devices (hover:none) it needs !important to force the bar back off; real
   hover-capable devices (hover:hover) are untouched, so nothing here is a page-content edit,
   only a targeted counter-rule for the touch case. */
@media(hover:none){
  .vla2-assess .vla-card:hover:before{opacity:0!important;}
}


/* ===== Mobile fix (2026-09-21): coffee-machine PDP forces the mobile layout viewport wide.
   Root cause: at max-width:860px the buy-box grid collapses to a bare 1fr track (min-content
   sizing, not viewport-constrained), and .vsu-pdp-tabs .vsu-tab has flex:1 + white-space:nowrap
   with no min-width:0, so ~406px of un-wrapping tab labels can't shrink below 375px and push
   the grid track — and the whole page — wide. Later in file order than the base rules above,
   so these win on equal specificity without !important. */
@media(max-width:860px){
  .single-product main.vsu div.product{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:600px){
  .vsu-pdp-tabs .vsu-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .vsu-pdp-tabs .vsu-tab{flex:0 0 auto;}
}
/* SECOND overflow source found on verification, not in the original diagnosis: the gallery
   thumbnail strip (.vsu-gallery-thumbs) is an unwrapped flex row of fixed 72px buttons with
   no overflow handling. On any product with 6+ images (vitro-x5 has 7: 7*72 + 6*10 gap =
   564px against a ~335px mobile column) it alone pushes the page wide even after the grid
   and tabs fixes above land — this is why the grid/tabs fix did not move scrollWidth on its
   own; confirmed by walking the DOM for the widest non-fixed-position element post-fix. */
@media(max-width:860px){
  .vsu-gallery-thumbs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* ---- Launch fixes 28 Sep 2026 (jobs 8, 10, 11). Body-prefixed so the inline
   per-page copies of vs-global/delta CSS lose. Desktop untouched except job 10. */
@media (max-width:767.98px){
  /* 8. Hero copy readable on phone. The per-page .vs-hero::before scrim fades
     left-to-right for desktop's left column; on phone the copy spans the full
     width, so it sat over the faded side (sub copy measured 2.65 to 3.44:1). */
  body .vs-hero::before{background:linear-gradient(180deg,rgba(0,79,89,.9) 0%,rgba(0,79,89,.84) 100%)!important;}
  body .vs-hero-sub{color:rgba(255,255,255,.94)!important;}
  body .mbh-hero::before{content:"";position:absolute;inset:0;background:rgba(0,79,89,.5);pointer-events:none;z-index:0;}
  body .mbh-hero .mbh-copy{position:relative;z-index:1;}
  body .mbh-copy p{color:rgba(255,255,255,.96)!important;}
  /* 11. Testimonial belt on touch: native horizontal scroll instead of the
     animated belt (a tap left it paused on sticky :hover). The duplicate copy
     only exists for the seamless loop, so hide it here. */
  body .vs-tst{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;}
  body .vs-tst::-webkit-scrollbar{display:none;}
  body .vs-tst .vs-tst-track{animation:none!important;transform:none!important;}
  body .vs-tst .vsu-quote[aria-hidden="true"]{display:none;}
  body .vs-tst{container-type:inline-size;}
  body .vs-tst .vsu-quote{scroll-snap-align:start;width:calc(100cqw - 40px)!important;margin-right:12px!important;}
}
/* 10. Non-link feature cards: no hover lift (they are not clickable). Link cards
   (a.vsu-card) keep theirs via the .vsu-card rule above. */
body .vs-features-highlight .vs-feature-item:not(a):hover{transform:none!important;}
body .wv-feat .vs-feature-item:not(a):hover,body .ff-feat .vs-feature-item:not(a):hover{box-shadow:0 6px 22px rgba(0,79,89,.08)!important;border-color:rgba(0,79,89,.13)!important;}
/* Pages that carry an inline copy of vs-ui (machine-branding) still have the old unscoped .vsu-card lift. */
body .vsu-card:not(a):hover{transform:none!important;box-shadow:none!important;}
/* ===== 28 Sep 2026 fix2 =====
   1. /workplace-vending/ Smart Fridges cards on phone: the page's inline .smart-fridges
      padding (88px 48px) left the cards 48px off each edge with 22px inside. Match the
      20px gutter of neighbouring sections and give the card body 16px.
   2. Phone footer (<768px): hide the link columns that duplicate the header menu
      (.vsx-foot-dup), the blurb and ISO emblems; show contact, social, one short
      footer-only list (.vsx-foot-quick, desktop hidden), then legal, then copyright.
      Desktop footer unchanged. */
.vsx-foot-quick{display:none;}
@media(max-width:767px){
  body .smart-fridges{padding-left:20px!important;padding-right:20px!important;}
  body .smart-fridges .fridge-card-body{padding:18px 16px!important;}

  body .vsx-foot-grid{display:flex!important;flex-direction:column;gap:0!important;padding:40px 20px 28px!important;}
  body .vsx-footer .vsx-foot-dup,body .vsx-footer .vsx-foot-blurb,body .vsx-footer .vsx-foot-iso{display:none!important;}
  body .vsx-foot-logo img{height:40px;margin-bottom:18px;}
  body .vsx-footer .vsx-foot-contact li{margin:0 0 4px;font-size:14.5px;}
  body .vsx-foot-social{margin-top:18px;}
  body .vsx-footer .vsx-foot-quick{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);}
  body .vsx-footer .vsx-foot-quick li{margin:0;line-height:1.35;}
  body .vsx-foot-bottom div{flex-direction:column;justify-content:flex-start;gap:12px;padding:18px 20px 24px;}
  body .vsx-foot-bottom .vsx-legal{order:-1;font-size:12px;line-height:1.9;}
}
/* 2026-09-29 phone fixes */
/* (a) Long unbroken URLs in legal pages ran off the right edge (cookie policy 439px at 390): let them wrap. */
@media(max-width:767px){
  body .lg-prose,body .lg-prose a,body .lg-prose li,body .lg-prose p{overflow-wrap:anywhere;min-width:0;}
}
/* (b) The fixed GET IN TOUCH tab (up to 899px) covered the last footer lines: clear it. */
@media(max-width:899px){
  body .vsx-footer{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px));}
  /* (c) Compare bar sat behind that tab: lift it clear and keep it inside the screen. */
  body .vsu-cmpbar{bottom:calc(66px + env(safe-area-inset-bottom,0px));width:calc(100vw - 24px);max-width:calc(100vw - 24px);gap:10px;padding:10px 12px;box-sizing:border-box;}
  body .vsu-cmpbar-lbl{font-size:13px;}
  body .vsu-cmpbar .btn-cmp{padding:10px 14px;}
}
/* (d) Compare toggle on product cards: say what it does, in words, on phones. */
@media(max-width:767px){
  body .pc-cmp span{width:auto;min-width:34px;padding:0 11px 0 9px;gap:6px;}
  body .pc-cmp span::after{content:"Compare";font:700 12px/1 'Inter',sans-serif;letter-spacing:.2px;}
}
/* (e) Legacy article videos (fixed 560x315 embeds) overflowed phones: fluid 16:9 box. */
body .entry-content iframe,body .wp-block-post-content iframe,body .entry-content video,body .wp-block-post-content video{max-width:100%;}
body .entry-content iframe[src*="youtube"],body .entry-content iframe[src*="youtu.be"],body .entry-content iframe[src*="vimeo"],
body .wp-block-post-content iframe[src*="youtube"],body .wp-block-post-content iframe[src*="youtu.be"],body .wp-block-post-content iframe[src*="vimeo"],
body .entry-content video,body .wp-block-post-content video{width:100%;height:auto;aspect-ratio:16/9;display:block;}
/* 2026-09-29 CLS: the consumables grid is filled by vs-consumables.js after first paint. While it is empty, hold
   one viewport of height so the footer starts below the fold and its later move is not a layout shift. */
#csGrid:empty{min-height:100vh;}

/* ===== 30 Sep 2026, launch ruling 8: accessories are not clickable =====
   content-product.php renders the 12 Vending Accessories cards as .pc.pc--static with no
   anchors. Kill everything that implies a link: pointer cursor, hover/focus lift, shadow
   and border change, image zoom. Body-prefixed + !important so the per-page inline copies
   of the card CSS lose. Name, image and price text keep their look. */
body .pc.pc--static,body .pc.pc--static:hover,body .pc.pc--static:focus-within{cursor:default;transform:none!important;box-shadow:none!important;border-color:rgba(0,79,89,.09)!important;}
body .pc.pc--static:hover .pc-img img,body .pc.pc--static .pc-img img{transform:none!important;}
body .pc.pc--static h3{color:var(--vs-dark);}
body .pc.pc--static .pc-price{margin-bottom:0;}
/* Site-search hit for an accessory: plain title (functions.php render_block_core/post-title), same teal as a linked title. */
body .sr-results .wp-block-post-title.vs-static-title{color:var(--vs-teal);}