/* =========================================================
   PackForge Industries — Packaging & Material Handling Machines
   Home page. Layout follows the L&T-SuFin homepage.
   Vanilla HTML/CSS/JS. Only external request is Google Fonts.
   ========================================================= */

:root{
  --pri:#0B4DA2; --pri-d:#083A7B; --pri-soft:#EAF1FA;
  --acc:#F5A100; --acc-d:#DB8F00; --acc-soft:#FFF6E5;
  --dark:#141A22; --txt:#333B45; --mut:#6B7683;
  --line:#E5E9EE; --soft:#F5F8FB; --white:#fff; --ok:#1A9E6C;
  --maxw:1600px; --pad:26px;
  --sh:0 2px 10px rgba(20,35,60,.08);
  --sh-lg:0 10px 34px rgba(20,35,60,.16);
}
body[data-theme="teal"]{--pri:#00857C;--pri-d:#00655E;--pri-soft:#E3F4F2;--acc:#F5A623;--acc-d:#DB9214;--acc-soft:#FEF5E5}
body[data-theme="orange"]{--pri:#12283F;--pri-d:#0A1826;--pri-soft:#E9EEF3;--acc:#E56800;--acc-d:#C55A00;--acc-soft:#FFF1E3}
body[data-theme="red"]{--pri:#1B3A57;--pri-d:#10273C;--pri-soft:#EAEFF4;--acc:#D9232D;--acc-d:#B71C25;--acc-soft:#FDECED}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--txt);
  background:var(--white);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
ul{list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.full{width:100%;padding:0 var(--pad)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}

.sec{padding:54px 0}
.sec.alt{background:var(--soft)}
.s-head{text-align:center;margin-bottom:30px}
.s-head h1,.s-head h2{font-size:28px;font-weight:700;color:var(--dark);line-height:1.25}
.s-head h1 span,.s-head h2 span{color:var(--pri)}
.s-head p{font-size:13.5px;color:var(--mut);margin-top:7px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;
  border-radius:6px;font-weight:600;font-size:13.5px;transition:.2s;white-space:nowrap}
.btn-a{background:var(--acc);color:#1E1608}
.btn-a:hover{background:var(--acc-d)}
.btn-p{background:var(--pri);color:#fff}
.btn-p:hover{background:var(--pri-d)}
.btn-o{border:1.5px solid var(--pri);color:var(--pri);background:#fff}
.btn-o:hover{background:var(--pri-soft)}

/* =========================================================
   HEADER — full width, logo hard left, no search bar
   ========================================================= */
.hdr{background:#fff;position:sticky;top:0;z-index:200;box-shadow:0 1px 5px rgba(20,35,60,.1)}
.hdr-row{display:flex;align-items:center;gap:24px;height:72px}
.burger{display:none;flex-direction:column;gap:4px;padding:8px 2px}
.burger span{width:20px;height:2px;background:var(--dark);border-radius:2px}

.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo-mk{width:52px;height:52px;border-radius:11px;background:var(--pri);display:grid;place-items:center;color:#fff;flex:none}
.logo-mk svg{width:29px;height:29px}
.logo-tx b{display:block;font-size:30px;font-weight:700;color:var(--pri);letter-spacing:-.5px;line-height:1.05}
.logo-tx b i{font-style:normal;color:var(--acc)}
.logo-tx small{display:block;font-size:12px;color:var(--mut);margin-top:3px;letter-spacing:.1px}

.loc{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;flex:none;transition:.2s}
.loc:hover{background:var(--soft)}
.loc svg{width:20px;height:20px;color:var(--dark)}
.loc b{font-size:14px;font-weight:500;color:var(--dark)}
.car{width:8px;height:8px;border-right:1.8px solid var(--mut);border-bottom:1.8px solid var(--mut);
  transform:rotate(45deg) translateY(-2px);flex:none}
.hsp{flex:1}

.acts{display:flex;align-items:center;gap:6px;flex:none}
.act{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:6px;font-size:14px;
  font-weight:500;color:var(--dark);position:relative;transition:.2s}
.act:hover{background:var(--soft);color:var(--pri)}
.act svg{width:21px;height:21px}
.bdg{position:absolute;top:1px;left:26px;min-width:16px;height:16px;border-radius:9px;background:var(--acc);
  color:#1E1608;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}

.nav{border-top:1px solid var(--line);background:#fff}
.nav .full{display:flex;align-items:center;gap:4px;height:40px;overflow-x:auto;scrollbar-width:none}
.nav .full::-webkit-scrollbar{display:none}
.nl{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:5px;font-size:14px;
  font-weight:500;color:var(--dark);white-space:nowrap;transition:.2s}
.nl:hover{background:var(--pri-soft);color:var(--pri)}
.nl svg{width:16px;height:16px}
.nl.cat{font-weight:600}
.nl.aim{color:var(--pri)}
.nl.aim svg{color:var(--pri)}
.nsp{flex:1}

/* =========================================================
   HERO — light banner, search box inside the banner
   ========================================================= */
.hero-outer{padding:0;background:#fff}
.hero{position:relative;overflow:hidden;border-radius:0 0 26px 26px;width:100%;margin:0}
.hero-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
/* v73: hero trimmed 10% from the top - 660 -> 594px, with .hero-in's top padding cut
   by the same 10% so the content rises with the ceiling. Prop `top` values are
   percentages of the hero, so they follow automatically. */
.hslide{min-width:100%;height:594px;position:relative;overflow:hidden}
.bgi{position:absolute;inset:0}
.hb1{background:linear-gradient(158deg,#D6EAFC 0%,#A3CCF1 44%,#6BABE2 100%)}
.hb2{background:linear-gradient(158deg,#FCEBC8 0%,#F3CE87 44%,#E5AE45 100%)}
.hb3{background:linear-gradient(158deg,#D5ECE2 0%,#A6D3BF 44%,#6DB49A 100%)}
.bgi::after{content:"";position:absolute;inset:0;opacity:.7;
  background-image:linear-gradient(rgba(11,77,162,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(11,77,162,.055) 1px,transparent 1px);background-size:46px 46px}
/* soft light pool behind the headline so dark text stays crisp on the deeper ground */
.bgi::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(58% 46% at 50% 34%,rgba(255,255,255,.62),rgba(255,255,255,0) 72%)}
.blob{position:absolute;border-radius:50%;z-index:2}
.blob-a{left:-90px;top:-110px;width:460px;height:460px;background:radial-gradient(circle at 45% 45%,rgba(11,77,162,.32),transparent 68%)}
.blob-b{right:-110px;bottom:-150px;width:500px;height:500px;background:radial-gradient(circle at 45% 45%,rgba(245,161,0,.40),transparent 68%)}
/* tint the glows to each slide's own hue, so they don't grey out the warm and mint grounds */
.hb2 .blob-a{background:radial-gradient(circle at 45% 45%,rgba(206,132,12,.32),transparent 68%)}
.hb2 .blob-b{background:radial-gradient(circle at 45% 45%,rgba(224,120,20,.32),transparent 68%)}
.hb3 .blob-a{background:radial-gradient(circle at 45% 45%,rgba(16,116,92,.32),transparent 68%)}
.hb3 .blob-b{background:radial-gradient(circle at 45% 45%,rgba(228,150,10,.32),transparent 68%)}
.hero-in{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:117px var(--pad) 285px;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hero-eyb{display:inline-block;color:var(--pri);font-size:11.5px;font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;margin-bottom:14px}
.hero-in h1,.hero-in h2{color:var(--dark);font-size:clamp(25px,3vw,42px);font-weight:700;line-height:1.22;max-width:920px;margin:0 auto;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.hero-in h1 em{font-style:normal;color:var(--pri)}
.hero-in h1 u{text-decoration:none;color:var(--acc-d)}
.hero-in p{color:var(--txt);font-size:15px;max-width:700px;margin:14px auto 0}
.know{display:inline-flex;align-items:center;gap:11px;margin:0 auto 18px;color:var(--dark);
  font-size:17px;font-weight:600;width:max-content;transition:.2s}
.know:hover{color:var(--pri)}
.know .pl{width:26px;height:26px;border-radius:50%;background:var(--dark);display:grid;place-items:center;flex:none}
.know:hover .pl{background:var(--pri)}
.know .pl svg{width:12px;height:12px;color:#fff}

/* the arrows used to sit at the left/right edges, which put the left one on top of the
   stretch-film cut-out. They now flank the slide dots, where nothing else sits. */
.harw{position:absolute;bottom:160px;width:38px;height:38px;border-radius:50%;
  background:#fff;border:1px solid var(--line);display:grid;place-items:center;z-index:6;box-shadow:var(--sh)}
.harw:hover{border-color:var(--pri)}
.harw svg{width:16px;height:16px;color:var(--dark)}
.hal{right:calc(50% + 54px)}.har{left:calc(50% + 54px)}
.hdots{position:absolute;bottom:176px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:6}
.hdots button{width:8px;height:8px;border-radius:50%;background:rgba(20,26,34,.24);transition:.25s}
.hdots button.on{background:var(--pri);width:24px;border-radius:4px}

/* search box inside the banner */
.hsearch{position:absolute;left:50%;bottom:210px;transform:translateX(-50%);
  width:min(760px,calc(100% - 4*var(--pad)));z-index:8}
.sbox{display:flex;align-items:center;height:60px;background:#fff;border:1.5px solid var(--pri);
  border-radius:10px;box-shadow:0 6px 20px rgba(20,35,60,.10);position:relative;padding-right:8px}
.spre{font-size:15.5px;color:var(--dark);font-weight:500;margin-left:12px;flex:none}
.st{display:flex;align-items:center;gap:7px;padding:0 15px;height:100%;font-size:14px;font-weight:500;
  color:var(--dark);border-right:1px solid var(--line);white-space:nowrap;border-radius:8px 0 0 8px}
.st:hover{background:var(--soft)}
.st-menu{position:absolute;top:62px;left:0;background:#fff;border:1px solid var(--line);border-radius:6px;
  box-shadow:var(--sh-lg);padding:5px;min-width:150px;display:none;z-index:40}
.st-menu.on{display:block}
.st-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:4px;font-size:13.5px}
.st-menu button:hover{background:var(--pri-soft);color:var(--pri)}
.mag{width:17px;height:17px;color:var(--mut);margin-left:14px;flex:none}
.sbox input{flex:1;border:none;outline:none;padding:0 9px;font-size:15.5px;min-width:0;background:transparent}
.sbox input::placeholder{color:var(--mut);opacity:1}
.ai{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--pri);
  background:#fff;border:1.5px solid var(--pri);padding:9px 20px;border-radius:26px;white-space:nowrap;transition:.2s}
.ai:hover{background:var(--pri-soft)}
.ai svg{width:16px;height:16px}

/* =========================================================
   THREE CARDS
   ========================================================= */
/* white curved card that rises into the banner */
.overlap{position:relative;z-index:14;max-width:none;margin:-149px auto 0;padding:0 1.5%}
.overlap-in{background:#fff;border-radius:24px;padding:24px 28px 26px;box-shadow:0 -6px 34px rgba(20,35,60,.10)}
.overlap-in .s-head{margin-bottom:18px}
.overlap + .sec{padding-top:30px}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tc{border:none;border-radius:12px;padding:22px;transition:.22s;display:flex;gap:16px;align-items:flex-start;
  box-shadow:0 2px 10px rgba(20,35,60,.07)}
.tc:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.tc.c1{background:linear-gradient(150deg,#DCE2FB,#AFBCF0)}
.tc.c2{background:linear-gradient(150deg,#D6EADD,#A5CDB6)}
.tc.c3{background:linear-gradient(150deg,#FCEDD1,#F0D394)}
.tc .tcb{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}
.tc .tci{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:#fff;box-shadow:0 3px 10px rgba(20,35,60,.14)}
.tc .tci svg{width:31px;height:31px}
.tc.c1 .tci svg{color:#2A379A}
.tc.c2 .tci svg{color:#1D6440}
.tc.c3 .tci svg{color:#946008}
.tc h3{font-size:17.5px;font-weight:700;color:var(--dark);margin-bottom:9px}
.tc p{font-size:13.2px;color:#3D4753;flex:1;margin-bottom:16px;line-height:1.55}
.tc .cta{align-self:flex-start;background:#fff;color:var(--dark);font-size:13px;font-weight:600;
  padding:10px 18px;border-radius:7px;display:inline-flex;align-items:center;gap:7px;transition:.2s;
  box-shadow:0 2px 6px rgba(20,35,60,.10)}
.tc:hover .cta{background:var(--dark);color:#fff}
.tc .cta svg{width:13px;height:13px}

/* =========================================================
   CATEGORIES
   ========================================================= */
.cwrap{position:relative}
.cats{display:grid;grid-auto-flow:column;grid-auto-columns:152px;grid-template-rows:repeat(2,auto);
  gap:26px 20px;overflow-x:auto;scroll-behavior:smooth;padding:6px 2px 12px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cd{width:152px;text-align:center;display:block}
.cd .ct{width:148px;height:148px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;
  transition:.22s;box-shadow:0 0 0 4px #fff,0 4px 14px rgba(20,35,60,.13)}
.cd .ct svg{width:58px;height:58px;color:#fff;opacity:.96}
.cd:hover .ct{transform:translateY(-5px);box-shadow:0 0 0 4px #fff,0 12px 26px rgba(20,35,60,.24)}
.cd span{display:block;font-size:13px;font-weight:500;color:var(--txt);line-height:1.38;padding:0 2px}
.cd:hover span{color:var(--pri)}
.k1{background:linear-gradient(140deg,#C08A55,#7A5330)}
.k2{background:linear-gradient(140deg,#7C8791,#464F58)}
.k3{background:linear-gradient(140deg,#5B95E2,#2A5EA8)}
.k4{background:linear-gradient(140deg,#E5A62B,#A96F0C)}
.k5{background:linear-gradient(140deg,#57B698,#2C7460)}
.k6{background:linear-gradient(140deg,#9679CE,#5B4392)}
.k7{background:linear-gradient(140deg,#CF6A6A,#8E3A3A)}
.k8{background:linear-gradient(140deg,#48A8B6,#246E7A)}
.k9{background:linear-gradient(140deg,#9BB646,#5F7526)}
.k10{background:linear-gradient(140deg,#CB7AAB,#8A4370)}
.carw{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:60px;background:#fff;border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(20,35,60,.18);border-radius:6px;display:grid;place-items:center;z-index:6;transition:.2s}
.carw:hover{border-color:var(--pri)}
.carw svg{width:19px;height:19px;color:var(--dark)}
.carw.l{left:-10px}.carw.r{right:-10px}

/* ============ DEALS: three panels ============ */
.deal3{display:grid;grid-template-columns:1fr 1fr 1.02fr;gap:20px;align-items:stretch}
.dpanel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column}
.dpanel > h3{font-size:17px;font-weight:700;color:var(--dark);margin-bottom:14px}
.dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1}
.pcard{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;transition:.2s;display:flex;flex-direction:column}
.pcard:hover{box-shadow:var(--sh);transform:translateY(-2px);border-color:#CBD8E5}
.pcard .pi{flex:1;min-height:150px;display:grid;place-items:center;background:#fff}
.pcard .pi svg{width:66px;height:66px;color:var(--pri);opacity:.8}
.pcard .pb{padding:11px 9px 13px;text-align:center;border-top:1px solid #F1F3F6}
.pcard .pb b{display:block;font-size:13.5px;font-weight:500;color:var(--dark);margin-bottom:4px}
.pcard .pb span{font-size:12.5px;color:var(--mut)}
.pcard .pb .ask{display:inline-block;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--pri)}

.pdslider{position:relative;border-radius:10px;overflow:hidden;flex:1;min-height:430px}
.pdtrack{display:flex;height:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
/* v85: promo-banner card, after the reference KUMAR sent. The old slide was a flat colour
   panel with the photo floated at the top; this one is a dark stage with a sweeping arc, the
   machine large and overlapping it, the name set big at the bottom left, a white CTA and a
   medallion bottom right. */
.pdslide{min-width:100%;position:relative;padding:26px 28px 34px;display:flex;
  flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden}
/* the light bloom behind the machine, standing in for the reference's spark photography */
.pdslide::before{content:"";position:absolute;z-index:0;inset:0;
  background:radial-gradient(78% 62% at 68% 26%,rgba(255,255,255,.20),transparent 70%)}
/* The sweeping arc. It is the BOTTOM edge of a big ring whose centre sits above and left of
   the card, so only that curve crosses the panel - the same shape as the reference. */
.pdarc{position:absolute;z-index:1;left:-30%;top:-62%;width:160%;aspect-ratio:1;
  border-radius:50%;border:4px solid var(--acc);opacity:.9;pointer-events:none}
/* The photo fills the whole stage above the text block rather than sitting in a fixed
   224px slot - a fixed height left a dead band between the machine and the headline on a
   tall panel. `bottom` pins it to the text instead. */
.pdslide .pdimg{position:absolute;z-index:2;top:14px;bottom:206px;left:50%;
  transform:translateX(-50%);height:auto;width:auto;max-width:88%;max-height:none;
  object-fit:contain;filter:drop-shadow(0 18px 26px rgba(0,14,30,.46))}
.pdbody{position:relative;z-index:3;max-width:min(300px,64%)}
.pdslide .pdkick{font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  opacity:.82;margin-bottom:7px;display:block}
.pdslide h4{font-size:32px;font-weight:700;line-height:1.04;letter-spacing:.2px;
  text-transform:uppercase}
.pdslide .pdtxt{font-size:12.4px;line-height:1.5;opacity:.86;margin-top:9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pdslide .shop{display:inline-flex;align-items:center;gap:8px;margin-top:15px;background:#fff;
  color:var(--dark);font-size:14px;font-weight:700;padding:11px 24px;border-radius:4px;
  width:max-content}
.pdslide .shop svg{width:14px;height:14px}
.pdslide .shop:hover{background:var(--acc);color:#241A05}
/* Metallic medallion, like the reference's silver ring. It carries the badge the site already
   uses - NOT a discount: no offer has been given, and inventing "UPTO 10% OFF" would be
   promising a customer a price. */
.pdslide .off{position:absolute;right:24px;bottom:78px;z-index:3;width:102px;height:102px;
  border-radius:50%;display:grid;place-items:center;text-align:center;
  font-size:9.5px;font-weight:700;line-height:1.2;letter-spacing:.3px;color:#1B2733;
  background:radial-gradient(circle at 32% 26%,#FFF,#D7DCE2 52%,#9AA3AC);
  box-shadow:0 0 0 3px rgba(255,255,255,.34),0 10px 22px rgba(0,14,30,.4)}
.pdslide .off b{display:block;font-size:20px;font-weight:800;letter-spacing:-.4px;margin:1px 0}
.pdslide small{position:absolute;right:26px;bottom:20px;z-index:3;font-size:9.5px;opacity:.78}
.pddots{position:absolute;bottom:16px;left:28px;display:flex;gap:6px;z-index:4}
.pddots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}
.pddots button.on{background:#fff;width:22px;border-radius:4px}
/* Darker grounds than the old flat panels - the machine and the arc have to read against them. */
.pv1{background:linear-gradient(146deg,#5A4630 0%,#33261A 62%,#241A12 100%)}
.pv2{background:linear-gradient(146deg,#1E4677 0%,#123054 62%,#0B2038 100%)}
.pv3{background:linear-gradient(146deg,#1F5647 0%,#133A30 62%,#0C2721 100%)}
.pv4{background:linear-gradient(146deg,#7A5310 0%,#4E350A 62%,#332206 100%)}
.pv5{background:linear-gradient(146deg,#3E521F 0%,#293714 62%,#1B240D 100%)}

/* =========================================================
   DEALS
   ========================================================= */
.dtabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:22px;justify-content:center}
.dtab{padding:11px 2px;font-size:15px;font-weight:600;color:var(--mut);border-bottom:3px solid transparent;margin-bottom:-1px}
.dtab.on{color:var(--pri);border-bottom-color:var(--pri)}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dc{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;transition:.2s}
.dc:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.dc .di{height:178px;display:grid;place-items:center;background:var(--soft);border-bottom:1px solid var(--line)}
.dc .di svg{width:72px;height:72px;color:var(--pri);opacity:.85}
.dc:hover .di{background:var(--pri-soft)}
.dc .db{padding:16px 13px;text-align:center}
.dc .db b{display:block;font-size:13.5px;font-weight:600;color:var(--dark);margin-bottom:5px}
.dc .db span{font-size:12.5px;color:var(--mut)}
.dc .db span i{font-style:normal;font-weight:700;color:var(--dark);font-size:14.5px}

.pdeals{margin-top:36px}
.pdeals h3{font-size:19px;font-weight:700;color:var(--dark);margin-bottom:16px;text-align:center}
.pdg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pd{border-radius:10px;min-height:164px;padding:26px;color:#fff;display:flex;flex-direction:column;
  justify-content:center;position:relative;overflow:hidden;transition:.2s}
.pd:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.pd::after{content:"";position:absolute;right:-36px;bottom:-36px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.12)}
.pd small{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;opacity:.9;font-weight:600}
.pd b{font-size:22px;font-weight:700;margin:7px 0 10px;line-height:1.2}
.pd em{font-style:normal;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.pd em svg{width:13px;height:13px}
.pd.amber{color:#1E1608}
.pd.amber::after{background:rgba(255,255,255,.28)}

/* =========================================================
   BULK
   ========================================================= */
.bulk{display:grid;grid-template-columns:390px 1fr;gap:34px;align-items:center;border-radius:8px;
  padding:26px 26px 26px 34px;color:#fff;
  background:linear-gradient(100deg,#12769F 0%,#1A86B2 45%,#63B8D6 100%)}
.bulk h2{font-size:26px;font-weight:700;color:#fff;line-height:1.24;margin-bottom:22px}
.bulk h2 span{color:#fff}
.bsteps li{display:flex;gap:12px;align-items:center;font-size:14px;font-weight:600;color:#fff;margin-bottom:17px}
.bsteps li:last-child{margin-bottom:0}
.bn{width:20px;height:20px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.bn svg{width:12px;height:12px;color:#12769F}
.bulk .btn-a{margin-top:24px}
.brow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(176px,1fr);gap:16px;
  overflow-x:auto;scroll-behavior:smooth;padding:2px;scrollbar-width:none}
.brow::-webkit-scrollbar{display:none}
.bcard{border:none;border-radius:6px;padding:18px 12px 16px;text-align:center;background:#fff;transition:.2s}
.bcard:hover{box-shadow:0 8px 22px rgba(0,0,0,.20);transform:translateY(-3px)}
.bcard .bi{height:128px;display:grid;place-items:center;margin-bottom:12px}
.bcard .bi svg{width:68px;height:68px;color:#2C3A47;opacity:.85}
/* Photo face: the product only, no circle and no ring - these are background-removed
   cut-outs, so `contain` lets each machine keep its own shape on the white card. */
.bcard .bi.bi-img{padding:4px}
.bcard .bi img{max-width:100%;max-height:132px;width:auto;height:auto;object-fit:contain;display:block}
.bcard b{display:block;font-size:13.5px;font-weight:500;color:#2C3A47;line-height:1.3}

/* ---------- Why buy direct: capability cards ---------- */
.swrap{position:relative}
.srow{display:flex;gap:22px;overflow-x:auto;scroll-behavior:smooth;padding:4px 2px 12px;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.srow::-webkit-scrollbar{display:none}
.scard{flex:none;width:498px;max-width:88vw;scroll-snap-align:start;display:flex;flex-direction:column;transition:.2s}
.scard:hover{transform:translateY(-4px)}
.sc-top{height:330px;border-radius:10px;display:grid;place-items:center;position:relative;padding-bottom:80px}
.sc-top > svg{width:118px;height:118px;color:rgba(255,255,255,.92)}
.sc-logo{position:absolute;left:26px;right:26px;bottom:-44px;background:#fff;border-radius:10px;
  box-shadow:0 6px 20px rgba(20,35,60,.12);padding:20px 16px;text-align:center}
.sc-logo b{display:block;font-size:23px;font-weight:700;color:var(--pri);letter-spacing:-.3px}
.sc-logo b i{font-style:normal;color:var(--acc)}
.sc-logo small{display:block;font-size:11.5px;color:var(--mut);margin-top:4px;letter-spacing:.5px}
.scard p{margin-top:60px;font-size:14px;color:#333B45;line-height:1.65;text-align:center;padding:0 16px}
.sv1{background:linear-gradient(160deg,#A9EFD8,#79D9BC)}
.sv2{background:linear-gradient(160deg,#A9DAF6,#78BDEA)}
.sv3{background:linear-gradient(160deg,#FCD28D,#F4A83C)}
.sv4{background:linear-gradient(160deg,#D2D7DE,#ADB5C0)}
.sv5{background:linear-gradient(160deg,#E5C5EE,#C79ADB)}
.sarw{position:absolute;top:42%;transform:translateY(-50%);width:44px;height:62px;background:#fff;
  border:1px solid var(--line);box-shadow:0 4px 18px rgba(20,35,60,.18);border-radius:6px;
  display:grid;place-items:center;z-index:6;transition:.2s}
.sarw:hover{border-color:var(--pri)}
.sarw svg{width:19px;height:19px;color:var(--dark)}
.sarw.l{left:-10px}.sarw.r{right:-10px}

/* =========================================================
   DISCOVERY TO DELIVERY
   ========================================================= */
.strip{display:grid;grid-template-columns:repeat(6,1fr);border-radius:12px 12px 0 0;overflow:hidden;height:112px;
  background:linear-gradient(100deg,#0A2B54,var(--pri-d) 52%,var(--pri))}
.strip div{display:grid;place-items:center;gap:7px;position:relative}
.strip div+div::before{content:"";position:absolute;left:0;top:24%;height:52%;width:1px;background:rgba(255,255,255,.18)}
.strip div svg{width:30px;height:30px;color:#fff;opacity:.95}
.strip div span{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.75);font-weight:600}
.d2d{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-top:none;
  border-radius:0 0 12px 12px;overflow:hidden;background:#fff}
.d2di{padding:26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.d2di:nth-child(3n){border-right:none}
.d2di:nth-child(n+4){border-bottom:none}
.d2di .dic{width:44px;height:44px;border-radius:10px;background:var(--pri-soft);display:grid;place-items:center;margin-bottom:12px}
.d2di .dic svg{width:22px;height:22px;color:var(--pri)}
.d2di h4{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:5px}
.d2di p{font-size:12.7px;color:var(--mut)}

/* =========================================================
   STATS
   ========================================================= */
.stats{background:linear-gradient(105deg,var(--pri-d),var(--pri));border-radius:12px;padding:36px;
  text-align:center;color:#fff;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:38px 38px}
.stats-in{position:relative;z-index:2}
.stats h2{font-size:25px;font-weight:700;margin-bottom:28px}
.strow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:28px}
.stt b{display:block;font-size:38px;font-weight:700;line-height:1;color:#fff}
.stt span{font-size:12.5px;color:rgba(255,255,255,.8)}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.twrap{position:relative}
.trow{display:flex;align-items:stretch;gap:20px;overflow-x:auto;scroll-behavior:smooth;
  padding:4px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.trow::-webkit-scrollbar{display:none}
.tcard{flex:none;width:520px;max-width:88vw;border:none;border-radius:10px;padding:32px 34px 28px;
  background:#F4F4F4;scroll-snap-align:start;display:flex;flex-direction:column;text-align:center}
.tq{width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;margin:0 auto 22px;flex:none}
.tq svg{width:23px;height:23px;color:#2B2B2B}
.tcard p{font-size:14.3px;color:#333B45;line-height:1.72;margin-bottom:24px;flex:1}
.twho{display:block;padding-top:4px}
.twho b{display:block;font-size:15px;font-weight:700;color:var(--dark);margin-bottom:3px}
.twho small{font-size:13.5px;color:#4A5560}
.tarw{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:62px;background:#fff;
  border:1px solid var(--line);box-shadow:0 4px 18px rgba(20,35,60,.18);border-radius:6px;
  display:grid;place-items:center;z-index:6;transition:.2s}
.tarw:hover{border-color:var(--pri)}
.tarw svg{width:19px;height:19px;color:var(--dark)}
.tarw.l{left:-10px}.tarw.r{right:-10px}

/* =========================================================
   SEAL / APP / ASSIST
   ========================================================= */
/* orange full-bleed trust band */
.trustband{position:relative;overflow:hidden;text-align:center;color:#fff;
  padding:46px var(--pad) 54px;
  background:linear-gradient(100deg,#0B4DA2 0%,#1463C8 48%,#0B4DA2 100%)}
.tb-dots{position:absolute;left:0;top:0;bottom:0;width:170px;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.7px,transparent 1.8px);background-size:27px 27px}
.tb-r1{position:absolute;right:118px;top:52%;transform:translateY(-50%);width:196px;height:196px;
  border:2px solid rgba(255,255,255,.4);border-radius:50%}
.tb-r2{position:absolute;right:-90px;top:-70px;width:360px;height:360px;
  border:2px solid rgba(255,255,255,.2);border-radius:50%}
.tb-sw{position:absolute;left:-6%;top:-40%;width:70%;height:180%;transform:rotate(-14deg);
  background:rgba(255,255,255,.06);border-radius:0 50% 50% 0}
.tb-in{position:relative;z-index:3;max-width:940px;margin:0 auto}
.trustband h2{font-size:30px;font-weight:700;line-height:1.25;margin-bottom:15px}
.tb-sub{font-size:15px;font-weight:700;margin-bottom:24px}
.tseal{display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:32px;
  padding:8px 30px 8px 10px;box-shadow:0 8px 20px rgba(0,0,0,.16)}
.tseal svg{width:40px;height:40px;flex:none}
.tseal b{font-size:23px;font-weight:700;color:#111;letter-spacing:.2px}
.tb-txt{margin-top:28px;font-size:14.6px;line-height:1.8;color:rgba(255,255,255,.97)}
.tb-txt b{font-weight:700}

.app{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center;
  background:linear-gradient(105deg,#0E1A29,#1D3554);border-radius:12px;padding:36px;color:#fff}
.app h2{font-size:25px;font-weight:700;line-height:1.25}
.app h2 span{color:var(--acc)}
.afeats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.af .aic{width:40px;height:40px;border-radius:9px;background:rgba(255,255,255,.12);display:grid;place-items:center;margin-bottom:9px}
.af .aic svg{width:20px;height:20px;color:var(--acc)}
.af b{display:block;font-size:13.2px;margin-bottom:3px}
.af span{font-size:11.7px;color:rgba(255,255,255,.72)}
.app-r{text-align:center}
.qr{width:128px;height:128px;background:#fff;border-radius:10px;padding:9px;margin:0 auto 11px}
.stores{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.store{display:flex;align-items:center;gap:8px;background:#000;border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:8px 13px}
.store:hover{background:#191919}
.store svg{width:19px;height:19px;color:#fff}
.store .sl{text-align:left;line-height:1.15}
.store .sl small{display:block;font-size:9.4px;color:#B5B5B5}
.store .sl b{font-size:13.2px;color:#fff}

.assist-band{background:#F7F7F7;padding:34px 0 32px}
.assist{display:grid;grid-template-columns:minmax(560px,2fr) 1fr .95fr;gap:34px;align-items:center;
  background:#fff;border-radius:10px;padding:18px 26px}
.assist-l{display:flex;align-items:center;gap:22px}
.assist-ill{width:158px;height:94px;flex:none}
.assist h2{font-size:20.5px;font-weight:700;color:var(--dark);line-height:1.25;white-space:nowrap}
.assist p{font-size:15px;color:var(--txt);margin-top:5px}
.ac{display:flex;align-items:center;gap:15px;transition:.2s}
.ac .aci{flex:none;display:grid;place-items:center}
.ac .aci svg{width:27px;height:27px;color:var(--dark)}
.ac:hover .aci svg{color:var(--pri)}
.ac b{display:block;font-size:16.5px;font-weight:700;color:var(--dark);line-height:1.3}
.ac:hover b{color:var(--pri)}
.ac small{font-size:14px;color:var(--txt)}

/* =========================================================
   FOOTER
   ========================================================= */
.ftr{background:#EFEFEF;color:#3A3A3A;margin-top:0;font-size:14.3px}
.ftop{padding:42px var(--pad) 34px;display:grid;grid-template-columns:repeat(4,1fr) 240px;gap:30px}
.ftr h5{color:#111;font-size:16.5px;font-weight:700;margin-bottom:16px}
.ftr li{margin-bottom:11px}
.ftr li a{color:#3A3A3A}
.ftr a:hover{color:var(--pri)}
.fqr{width:104px;height:104px;background:#fff;border:1px solid #CFCFCF;border-radius:4px;padding:6px;flex:none}
.fqrwrap{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.fqrwrap small{font-size:10.5px;line-height:1.3;color:#5C6B7A;text-align:center;font-weight:600}
.fapp{display:flex;gap:12px;align-items:flex-start}
.fst{display:flex;flex-direction:column;gap:8px}
.socs{display:flex;gap:11px;margin-top:14px}
.socs a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;transition:.2s}
.socs a:hover{transform:translateY(-2px);filter:brightness(1.08)}
.socs a svg{width:17px;height:17px;color:#fff}
.socs .s-ig{background:radial-gradient(circle at 30% 107%,#FDCB52 5%,#F5761A 28%,#D62976 60%,#962FBF 85%,#4F5BD5 100%)}
.socs .s-li{background:#0A66C2}
.socs .s-yt{background:#FF0000}
.socs .s-fb{background:#3B5998}
.socs .s-x{background:#000}
.fmid{padding:26px var(--pad) 22px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:end}
.fmid b{color:#111;font-size:16.5px;font-weight:700;display:block;margin-bottom:8px}
.fmid .addr b{font-size:14.3px;margin-bottom:0;display:inline}
.isos{display:flex;gap:10px}
/* v84: was 66px / 10px / 5px padding, which left a 52px content box for text 60-61px wide -
   "9001:2015" and "Registered" were clipped by the circle. Measured, not guessed: 76px with
   9.5px type and 4px padding gives a 64px box against a 57px longest line. */
.isos div{width:76px;height:76px;border-radius:50%;border:2px solid #2B2B2B;display:grid;
  place-items:center;text-align:center;font-size:9.5px;color:#2B2B2B;line-height:1.2;
  font-weight:700;padding:4px;letter-spacing:-.1px}
.fbtm-band{background:#E6E6E6}
.fbtm{padding:15px var(--pad);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.8px;color:#2B2B2B}
.fbtm ul{display:flex;gap:0;flex-wrap:wrap}
.fbtm li{margin:0;padding:0 16px;border-left:1px solid #B9B9B9}
.fbtm li:first-child{border-left:none}

/* =========================================================
   MOBILE NAV / DRAWER / MODALS
   ========================================================= */
.mnav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);
  z-index:190;box-shadow:0 -2px 12px rgba(20,35,60,.1);padding-bottom:env(safe-area-inset-bottom)}
.mnav-in{display:grid;grid-template-columns:repeat(5,1fr)}
.mn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 3px;font-size:10px;color:var(--mut);position:relative}
.mn.on{color:var(--pri)}
.mn svg{width:20px;height:20px}
.mn .bdg{top:3px;left:calc(50% + 3px)}

.scrim{position:fixed;inset:0;background:rgba(12,22,36,.55);z-index:400;opacity:0;visibility:hidden;transition:.25s}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;bottom:0;width:296px;max-width:86vw;background:#fff;z-index:401;
  transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.drawer.on{transform:none}
.dh{background:var(--pri);color:#fff;padding:20px 18px}
.dh .btn{width:100%;margin-top:14px}
.dsec{padding:12px 0;border-bottom:1px solid var(--line)}
.dsec h6{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--mut);padding:0 18px 7px;font-weight:700}
.dsec a{display:flex;align-items:center;gap:12px;padding:11px 18px;font-size:13.5px;color:var(--txt)}
.dsec a:hover{background:var(--pri-soft);color:var(--pri)}
.dsec a svg{width:17px;height:17px;color:var(--mut)}

.modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(12,22,36,.6)}
.modal.on{display:flex}
.mbox{background:#fff;border-radius:12px;width:100%;max-width:410px;max-height:88vh;overflow-y:auto;box-shadow:var(--sh-lg);animation:pop .22s ease}
.mbox.wide{max-width:640px}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mh{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line)}
.mh h3{font-size:17px;font-weight:700;color:var(--dark)}
.mx{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--mut);line-height:1}
.mx:hover{background:var(--soft);color:var(--dark)}
.mb{padding:20px}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:12px;font-weight:600;color:var(--dark);margin-bottom:6px}
.fld label i{font-style:normal;color:#D02F2F}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:11px 12px;font-size:13.5px;outline:none;background:#fff}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
.hint{font-size:11.6px;color:var(--mut)}
.err{font-size:11.6px;color:#D02F2F;margin-top:5px;display:none}
.err.on{display:block}
.otp{display:flex;gap:8px;margin-bottom:13px}
.otp input{width:100%;text-align:center;font-size:18px;font-weight:600;padding:11px 0}
.mb .btn{width:100%}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px}
.city{border:1px solid var(--line);border-radius:6px;padding:10px 5px;font-size:11.8px;text-align:center}
.city:hover,.city.on{border-color:var(--pri);background:var(--pri-soft);color:var(--pri);font-weight:600}
.mlbl{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);font-weight:700;margin-top:16px}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:12.3px;color:var(--txt)}
.chk input{width:auto;margin-top:2px}

.mcards{display:grid;gap:11px}
.mc-row{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:9px;padding:13px;transition:.2s}
.mc-row:hover{border-color:var(--pri);background:var(--pri-soft)}
.mc-row .aci{width:40px;height:40px;border-radius:9px;background:var(--pri-soft);display:grid;place-items:center;flex:none}
.mc-row:hover .aci{background:#fff}
.mc-row .aci svg{width:19px;height:19px;color:var(--pri)}
.mc-row b{display:block;font-size:14px;color:var(--dark)}
.mc-row small{font-size:11.7px;color:var(--mut)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--dark);
  color:#fff;padding:12px 20px;border-radius:7px;font-size:13px;z-index:600;transition:.35s;box-shadow:var(--sh-lg);max-width:90vw;text-align:center}
.toast.on{transform:translateX(-50%)}

.rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .cats{grid-template-columns:repeat(4,1fr)}
  .three{grid-template-columns:1fr}
  .bulk{grid-template-columns:1fr;gap:26px}
  .scard{width:420px}
  .sc-top{height:280px}
  .app{grid-template-columns:1fr}
  .app-r{max-width:300px;margin:0 auto}
  .assist{grid-template-columns:1fr 1fr}
  .assist-l{grid-column:span 2}
  .ftop{grid-template-columns:repeat(2,1fr)}
  .deal3{grid-template-columns:1fr 1fr}
  .deal3 .dpanel:last-child{grid-column:span 2}
  .pdslider{min-height:410px}
  .pdslide h4{font-size:25px}
  .pdslide .pdtxt{font-size:12.4px}
  .pdslide .pdimg{height:calc(100% - 282px);max-height:178px;top:16px}
  .d2d{grid-template-columns:repeat(2,1fr)}
  .d2di:nth-child(3n){border-right:1px solid var(--line)}
  .d2di:nth-child(2n){border-right:none}
  .d2di:nth-child(n+4){border-bottom:1px solid var(--line)}
  .d2di:nth-child(n+5){border-bottom:none}
  .strow{grid-template-columns:repeat(3,1fr);gap:20px}
}
@media (max-width:900px){
  :root{--pad:16px}
  .hdr-row{height:58px;gap:12px}
  .burger{display:flex}
  .nav{display:none}
  .loc b,.act span{display:none}
  .logo-tx small{display:none}
  .logo-tx b{font-size:20px}
  .acts{margin-left:auto}
  .acts .act:last-child{display:none}
  .hero{border-radius:0 0 18px 18px}
  .hslide{height:560px}
  .hero-in{padding-bottom:246px;padding-top:10px}
  .hero-in h1,.hero-in h2{font-size:23px;line-height:1.26}
  .hero-in p{font-size:12.8px;margin-top:10px}
  .know{margin-bottom:14px;font-size:14px}
  .know .pl{width:23px;height:23px}
  .hsearch{bottom:196px;width:calc(100% - 2*var(--pad))}
  .hdots{bottom:168px}
  .sbox{height:52px;padding-right:6px}
  .spre{font-size:13.5px;margin-left:10px}
  .sbox input{font-size:13.5px;padding:0 6px}
  .ai{font-size:12.5px;padding:7px 12px}
  .mag{margin-left:11px;width:16px;height:16px}
  .overlap{margin-top:-140px;padding:0 2.5%}
  .overlap-in{padding:22px 16px 26px;border-radius:18px}
  .tc{flex-direction:column-reverse;align-items:flex-start;gap:14px;padding:22px}
  .tc .tci{width:52px;height:52px}
  .hdr-row{gap:8px;height:58px}
  .loc{padding:6px 5px}
  .act{padding:8px 7px}
  .acts .act:nth-child(3),.acts a[href="#"]:last-child{}
  /* On a 360px phone the header row was ~9px wider than the viewport, which gave the
     whole document a horizontal scrollbar. The logo mark and burger are fixed width,
     so the wordmark is what has to give; the cart badge also has to sit inside its
     own button instead of hanging off the right of it. */
  .logo{flex:0 1 auto;min-width:0}
  .logo-mk{width:38px;height:38px;border-radius:9px}
  .logo-mk svg{width:22px;height:22px}
  .logo-tx{min-width:0}
  .logo-tx b{font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .acts{min-width:0}
  .bdg{left:auto;right:-1px;top:0}
  .harw{display:none}
  .deal3{grid-template-columns:1fr}
  .deal3 .dpanel:last-child{grid-column:auto}
  .pdslider{min-height:420px}
  .pdslide .pdimg{height:calc(100% - 292px);max-height:156px;top:12px}
  .pdslide{padding:22px}
  .pdslide h4{font-size:23px}
  .pdslide .pdtxt{font-size:12px}
  .pdslide .pdkick{font-size:10px}
  .pdslide .off{width:92px;height:92px;right:20px;bottom:68px;font-size:11px}
  .pdslide .off b{font-size:21px}
  /* Phone panels are too narrow to keep a 92px circle badge pinned to the right AND
     a readable text column beside it - at 320px the detail line was squeezed to a
     150px column and ran to eight lines. So on a phone the layout goes linear:
     the badge becomes an inline chip above the headline (order:-1 lifts it over the
     kicker), the text takes the full width, and the Faridabad line follows the
     button in normal flow instead of sitting in the corner. */
  @media (max-width:470px){
    .pdslider{min-height:470px}
    .pdslide .pdkick,.pdslide h4,.pdslide .pdtxt{max-width:none}
    /* On a phone the medallion becomes an inline chip. It must drop the metallic gradient
       AND the dark ink that goes with it - dark grey text on a dark card is unreadable,
       which is exactly what shipped for a moment here. */
    .pdslide .off{position:static;order:-1;align-self:flex-start;width:auto;height:auto;
      border-radius:100px;padding:6px 13px;display:inline-flex;gap:5px;align-items:center;
      font-size:10px;letter-spacing:.7px;margin-bottom:11px;background:rgba(255,255,255,.16);
      color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
    .pdslide .off b{display:inline;font-size:10px;margin:0}
    .pdslide small{position:static;right:auto;bottom:auto;margin-top:11px;opacity:.7}
    /* the base rule pins the photo top-and-bottom; here it goes back to a fixed height, so
       the bottom pin has to be released or the two fight */
    .pdslide .pdimg{top:12px;bottom:auto;height:calc(100% - 348px);max-height:148px}
  }
/* 360px and below: the detail line runs to five wrapped lines in a 250px panel, which
   pushes the whole stack up into the photo. Type steps down once more and the photo
   gives up the difference. */
@media (max-width:365px){
  .pdslide h4{font-size:20px}
  .pdslide .pdtxt{font-size:11.5px}
  .pdslide .pdimg{height:calc(100% - 356px);max-height:140px}
}
  .cats{grid-auto-columns:124px;gap:20px 14px}
  .cd{width:124px}
  .cd .ct{width:120px;height:120px}
  .cd .ct svg{width:46px;height:46px}
  .cd span{font-size:11.6px}
  .carw{display:none!important}
  .brow{grid-auto-columns:minmax(150px,1fr);gap:12px}
  .bulk{padding:22px}
  .bulk h2{font-size:21px}
  .bcard .bi{height:104px}
  .bcard .bi svg{width:54px;height:54px}
  .sarw{display:none!important}
  .scard{width:320px}
  .sc-top{height:230px}
  .sc-top > svg{width:84px;height:84px}
  .sc-logo{padding:15px 12px;bottom:-38px}
  .sc-logo b{font-size:19px}
  .scard p{margin-top:52px;font-size:13.2px}
  .strip{grid-template-columns:repeat(3,1fr);height:96px}
  .strip div svg{width:26px;height:26px}
  .strip div span{display:none}
  .trustband{padding:34px var(--pad) 40px}
  .trustband h2{font-size:20px}
  .tb-sub{font-size:13.5px;margin-bottom:18px}
  .tb-txt{font-size:13px;margin-top:22px;line-height:1.7}
  .tb-txt br{display:none}
  .tseal b{font-size:19px}
  .tseal svg{width:34px;height:34px}
  .tb-r1,.tb-r2{display:none}
  .tb-dots{width:88px;opacity:.4}
  .tarw{display:none!important}
  .tcard{width:330px;padding:26px 22px 22px}
  .tcard p{font-size:13.4px;margin-bottom:20px}
  .afeats{grid-template-columns:1fr}
  .mnav{display:block}
  body{padding-bottom:60px}
  .fmid{grid-template-columns:1fr;text-align:center}
  .isos{justify-content:center}
  .fbtm{flex-direction:column;align-items:center;text-align:center}
  .sec{padding:32px 0}
  .s-head h1,.s-head h2,.bulk h2,.stats h2,.app h2{font-size:21px}
  .bulk,.stats,.app{padding:22px}
  .assist-band{padding:22px 0 20px}
  .assist{padding:20px;grid-template-columns:1fr;gap:18px}
  .assist > *{min-width:0}
  .assist h2{white-space:normal;font-size:17.5px}
  .assist-l{grid-column:auto;gap:16px}
  .assist-ill{width:112px;height:66px}
  .assist h2{font-size:18px}
  .assist p{font-size:13.5px}
  .ac b{font-size:15px}
  .ac small{font-size:13px}
  .stt b{font-size:29px}
}
@media (max-width:560px){
  .cats{grid-template-columns:repeat(3,1fr);gap:9px}
  .cd .ct{height:70px}
  .cd .ct svg{width:28px;height:28px}
  .cd span{font-size:10.6px;min-height:50px}
  .dp-grid{gap:10px}
  .pcard .pi{min-height:118px}
  .pcard .pi svg{width:54px;height:54px}
  .cats{grid-auto-columns:106px;gap:18px 12px}
  .cd{width:106px}
  .cd .ct{width:102px;height:102px}
  .cd .ct svg{width:40px;height:40px}
  .cd span{font-size:11px}
  .d2d{grid-template-columns:1fr}
  .d2di{border-right:none!important;border-bottom:1px solid var(--line)!important}
  .d2di:last-child{border-bottom:none!important}
  .ftop{grid-template-columns:1fr;gap:22px}
  .strow{grid-template-columns:repeat(2,1fr)}
  .strow .stt:last-child{grid-column:span 2}
  .cgrid{grid-template-columns:repeat(3,1fr)}
  .brow{grid-auto-columns:minmax(138px,1fr)}
  .tcard{width:284px;padding:22px 18px 20px}
  .tq{width:46px;height:46px;margin-bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   ABOUT US PAGE
   ========================================================= */
.ab-hero{background:linear-gradient(180deg,#FFFFFF 0%,#F3F8FD 100%);padding:56px 0 62px}
.ab-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:58px;align-items:center}
.ab-vis{position:relative;overflow:hidden}
.ab-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.ab-slide{min-width:100%}
.ab-slide svg{width:100%;height:auto;display:block}
.ab-dots{display:flex;gap:7px;justify-content:center;margin-top:20px}
.ab-dots button{width:8px;height:8px;border-radius:50%;background:#C3D2E0;transition:.25s}
.ab-dots button.on{background:var(--pri);width:24px;border-radius:4px}
.ab-txt h1{font-size:34px;font-weight:700;color:var(--dark);margin-bottom:22px;line-height:1.2}
.ab-txt p{font-size:15px;line-height:1.85;color:#3D4753;margin-bottom:20px}
.ab-cta{margin-top:6px}

.ab-stats{background:linear-gradient(180deg,#F3F8FD 0%,#E9F1FA 100%);padding:46px 0 56px}
.ab-srow{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
.ab-srow b{display:block;font-size:44px;font-weight:700;color:var(--dark);line-height:1}
.ab-srow span{display:block;font-size:17px;color:#333B45;margin-top:12px}

.ab-vm{background:#EDF4FB;padding:52px 0 30px}
.vm2{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:stretch}
.vmcard{background:#fff;border-radius:12px;padding:34px 32px 38px;text-align:center;
  box-shadow:0 2px 12px rgba(20,35,60,.06);display:flex;flex-direction:column}
.vmcard svg{width:170px;height:132px;margin:0 auto 16px;display:block}
.vmcard h3{font-size:24px;font-weight:600;color:var(--dark);margin-bottom:14px}
.vmcard p{font-size:14.5px;line-height:1.78;color:#3D4753}

.ab-own{background:#EDF4FB;padding:26px 0 60px}
.own2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.own2 p{font-size:14.6px;line-height:1.85;color:#3D4753;margin-bottom:20px}
.own2 p b{font-weight:700;color:var(--dark)}
.own-logo svg{width:100%;max-width:330px;height:auto;margin:0 auto;display:block}

.ab-drive{background:#F7F9FB;padding:54px 0 58px}
.dr3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:stretch}
.drcard{background:#fff;border-radius:12px;padding:30px 28px 34px;text-align:center;display:flex;flex-direction:column}
.drcard svg{width:200px;height:142px;margin:0 auto 12px;display:block}
.drcard h3{font-size:19px;font-weight:700;color:var(--dark);margin-bottom:12px}
.drcard p{font-size:14px;line-height:1.72;color:#3D4753}

@media (max-width:1180px){
  .ab-grid,.own2{grid-template-columns:1fr;gap:36px}
  .dr3{grid-template-columns:1fr}
  .ab-srow{grid-template-columns:repeat(3,1fr);gap:30px}
}
@media (max-width:900px){
  .vm2{grid-template-columns:1fr}
  .ab-hero{padding:32px 0 38px}
  .ab-txt h1{font-size:25px}
  .ab-txt p{font-size:14px;line-height:1.75}
  .ab-stats{padding:30px 0 34px}
  .ab-srow{grid-template-columns:repeat(2,1fr);gap:24px}
  .ab-srow b{font-size:32px}
  .ab-srow span{font-size:14px}
  .ab-srow div:last-child{grid-column:span 2}
  .ab-vm,.ab-own,.ab-drive{padding:30px 0}
  .vmcard,.drcard{padding:24px 20px 28px}
  .vmcard h3{font-size:20px}
}

/* =========================================================
   INNER-PAGE HEADER (About Us and other inner pages)
   Three rows: white utility bar, blue search bar, mega nav
   ========================================================= */
.pagehdr{display:none}
.pagehdr.on{display:block}

.hdr2{position:sticky;top:0;z-index:200;background:#fff;box-shadow:0 1px 6px rgba(20,35,60,.12)}
.h2-top{border-bottom:1px solid #EDF0F3}
.h2-top-in{display:flex;align-items:center;gap:16px;height:60px}
.logo2{flex:none}
.h2-tag{display:flex;align-items:baseline;gap:6px;padding-left:16px;margin-left:2px;
  border-left:1px solid #D8DEE5;color:var(--dark);flex:none}
.h2-tag b{font-size:20px;font-weight:700;letter-spacing:-.3px}
.h2-tag i{font-style:normal;font-size:13.5px;color:#5C6B7A}
.h2-links{display:flex;align-items:center;gap:26px;flex:none}
.h2-links a{font-size:14px;color:var(--dark);white-space:nowrap}
.h2-links a:hover{color:var(--pri)}
.lang{display:flex;align-items:center;gap:9px;border:1.5px solid var(--pri);color:var(--pri);
  border-radius:20px;padding:7px 18px;font-size:14px;font-weight:500;flex:none;transition:.2s}
.lang:hover{background:var(--pri-soft)}
.lang .car{border-color:var(--pri)}
.btn-sell2{display:inline-flex;align-items:center;background:#F5821F;color:#fff;font-size:14px;font-weight:600;padding:9px 20px;
  border-radius:6px;white-space:nowrap;flex:none;transition:.2s}
.btn-sell2:hover{background:#DC7113}
.btn-login2{background:#12283F;color:#fff;font-size:14px;font-weight:600;padding:9px 18px;
  border-radius:6px;display:flex;align-items:center;gap:9px;white-space:nowrap;flex:none;transition:.2s}
.btn-login2 svg{width:19px;height:19px}
.btn-login2:hover{background:#081726}

.h2-bar{background:#0F6BB5}
.h2-bar-in{display:flex;align-items:center;gap:22px;height:58px;position:relative}
.h2-loc{display:flex;align-items:center;gap:9px;color:#fff;font-size:15px;flex:none}
.h2-loc svg{width:19px;height:19px}
.h2-loc b{font-weight:500}
.h2-loc .car{border-color:#fff}
.h2-search{flex:1;max-width:990px;display:flex;align-items:center;height:42px;background:#fff;
  border-radius:22px;overflow:hidden}
@media (min-width:1081px){
  .h2-search{position:absolute;left:50%;transform:translateX(-50%);
    flex:none;width:min(950px,54%);max-width:none}
}
.h2-type{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 18px;height:100%;
  font-size:14.5px;color:var(--dark);border-right:1px solid #E1E6EB;min-width:132px;flex:none}
.h2-type:hover{background:#F5F8FB}
.h2-search input{flex:1;border:none;outline:none;padding:0 18px;font-size:14.5px;min-width:0;background:transparent}
.h2-go{width:56px;height:100%;display:grid;place-items:center;flex:none}
.h2-go:hover{background:#F5F8FB}
.h2-go svg{width:21px;height:21px;color:#4A5560}
.h2-cart{position:relative;color:#fff;display:grid;place-items:center;flex:none;padding:4px}
.h2-cart svg{width:27px;height:27px}
.h2-cart .bdg{top:-3px;left:17px}

.h2-mega{background:#fff;border-bottom:1px solid #E5E9EE}
.h2-mega-in{display:flex;align-items:center;height:48px;overflow-x:auto;scrollbar-width:none}
.h2-mega-in::-webkit-scrollbar{display:none}
.h2-mega a{flex:1 1 0;text-align:center;font-size:14.2px;font-weight:500;color:var(--dark);
  white-space:nowrap;padding:0 16px;transition:.2s}
.h2-mega a:hover{color:var(--pri)}
.h2-div{width:1px;height:24px;background:#DDE3E9;flex:none}

@media (max-width:1300px){
  .h2-links{gap:18px}
  .h2-links a{font-size:13.2px}
  .h2-tag{display:none}
  .h2-mega a{font-size:13px;padding:0 10px}
}
/* v82: the hdr2 top row is a flex line where EVERY child is `flex:none`, so nothing can
   shrink and the row's natural 1232px simply overflows. The existing ladder hides .h2-tag at
   1300 and .h2-links/.lang at 1080, which left the band 1081-1240 broken - a horizontal
   scrollbar on every page that uses this header. It predates the category pages (About and
   Agriculture had it too) but they took it from 2 pages to 22, so it is fixed here.
   Measured: dropping .lang alone still overflows at 1081 (1111px); .lang plus the tighter
   link gap and row gap fits at 1081, 1160 and 1240. */
@media (max-width:1240px){
  .lang{display:none}
  .h2-links{gap:10px}
  .h2-links a{font-size:12.6px}
  .h2-top-in{gap:11px}
}
@media (max-width:1080px){
  .h2-links,.lang{display:none}
  .h2-mega a{flex:none}
}
@media (max-width:900px){
  .h2-top-in{height:56px;gap:10px}
  .h2-bar-in .hsp{display:none}
  .hdr2 .burger{display:flex}
  .btn-sell2{display:none}
  .btn-login2{padding:8px 12px;font-size:13px}
  .logo2 .logo-tx small{display:none}
  .logo2 .logo-tx b{font-size:20px}
  .h2-bar-in{height:52px;gap:12px}
  .h2-loc b,.h2-loc .car{display:none}
  .h2-search{height:38px}
  .h2-type{min-width:96px;padding:0 12px;font-size:13px}
  .h2-search input{font-size:13.5px;padding:0 12px}
  .h2-go{width:46px}
  .h2-mega-in{height:44px}
  .h2-mega a{font-size:12.6px;padding:0 12px}
  .bsteps li{font-size:13px;font-weight:600;align-items:flex-start}
  .bsteps li .bn{margin-top:1px}
  .bulk .btn-a{margin-top:16px}
}
@media (max-width:560px){
  .ai{font-size:12px;padding:7px 10px;gap:5px}
  .ai svg{width:13px;height:13px}
  .spre{display:none}
  .btn-login2 span{display:none}
  .btn-login2{padding:9px 11px}
  .logo2 .logo-mk{width:44px;height:44px}
  .logo2 .logo-mk svg{width:25px;height:25px}
  .logo2 .logo-tx b{font-size:18px}
  .h2-type{min-width:80px;padding:0 10px;font-size:12.4px}
  .h2-go{width:40px}
}

/* =========================================================
   MACHINE SELECTOR
   ========================================================= */
.sel-prog{display:flex;gap:6px;margin-bottom:18px}
.sel-prog span{flex:1;height:4px;border-radius:2px;background:var(--line)}
.sel-prog span.on{background:var(--pri)}
.sel-q{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:4px}
.sel-hint{font-size:12.5px;color:var(--mut);margin-bottom:16px}
.sel-opts{display:grid;gap:10px}
.sel-opt{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:9px;
  padding:14px 15px;text-align:left;transition:.18s;width:100%;background:#fff}
.sel-opt:hover{border-color:var(--pri);background:var(--pri-soft)}
.sel-opt .si{width:42px;height:42px;border-radius:9px;background:var(--soft);display:grid;place-items:center;flex:none}
.sel-opt:hover .si{background:#fff}
.sel-opt .si svg{width:21px;height:21px;color:var(--pri)}
.sel-opt b{display:block;font-size:14px;color:var(--dark);font-weight:600}
.sel-opt small{display:block;font-size:12px;color:var(--mut);margin-top:2px;line-height:1.45}
.sel-back{margin-top:16px;font-size:13px;color:var(--pri);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.sel-back svg{width:13px;height:13px}

.sel-res{border:1.5px solid var(--pri);border-radius:10px;overflow:hidden}
.sel-res-top{background:var(--pri-soft);padding:18px 18px 16px;display:flex;gap:15px;align-items:flex-start}
.sel-res-top .si{width:52px;height:52px;border-radius:10px;background:#fff;display:grid;place-items:center;flex:none}
.sel-res-top .si svg{width:26px;height:26px;color:var(--pri)}
.sel-res-top small{display:block;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--pri);font-weight:700;margin-bottom:5px}
.sel-res-top b{display:block;font-size:16px;color:var(--dark);line-height:1.35}
.sel-res-body{padding:16px 18px 18px}
.sel-res-body p{font-size:13.4px;color:#3D4753;line-height:1.7;margin-bottom:14px}
.sel-specs{list-style:none;margin:0 0 14px;padding:0}
.sel-specs li{font-size:13px;color:#3D4753;padding:7px 0;border-bottom:1px dashed var(--line);
  display:flex;justify-content:space-between;gap:14px}
.sel-specs li:last-child{border-bottom:none}
.sel-specs li span{color:var(--mut)}
.sel-also{background:var(--soft);border-radius:8px;padding:12px 14px;font-size:12.8px;color:#3D4753;margin-bottom:16px}
.sel-also b{color:var(--dark)}
.sel-note{font-size:12px;color:var(--mut);margin-top:12px;line-height:1.6}
.sel-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sel-actions .btn{width:100%}
@media (max-width:560px){.sel-actions{grid-template-columns:1fr}}

/* ---------- banner product cut-outs ---------- */
.hero-props{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-props img{position:absolute;display:block;filter:drop-shadow(0 18px 26px rgba(20,40,70,.16))}
/* Three rows per side, explicit tops so the gaps are deterministic.
   Usable band is 0 -> 445px: the white .overlap card sits on the hero from 445 down
   (.overlap has margin-top:-149px against a 594px slide). Rows: 16 / 163 / 310,
   prop height 124 -> 23px gaps and 11px clearance above the card. */
.hero-props img{width:auto}
/* v73: every desktop height came down 10% with the hero (660 -> 594px). The `top` values
   are percentages so they scaled themselves, but the heights are px/vw - leaving them
   alone closed the gaps and put the top pair on the headline. When the hero height
   changes, the prop heights must change with it.
   scattered around the headline, L&T-SuFin style: bigger than a neat grid, varied
   heights, and the two outer ones bleed off the canvas edge. Sizes are a share of the
   hero height so they scale with it. */
.hero-props .hp-washer{left:20%;   top:0.50%;  height:min(132px,8.54vw)}
.hero-props .hp-compact {right:20%;  top:0.50%;  height:min(134px,9.10vw)}
/* v70: enlarged at KUMAR's request. 196/12.2vw is the ceiling here - at 12.8vw its
   bottom edge reaches .hp-chaff's top (58% of the hero) exactly. */
.hero-props .hp-chaffconv{left:calc(4% + 20px);   top:27.27%; height:min(120px,7.71vw)}
/* v63 moved this from 6% to 8% to mirror .hp-chaffconv (left:8%); v66 nudged it a further
   2% inboard at KUMAR's request, so the right-middle prop now sits slightly closer to
   the headline than its opposite number rather than exactly opposite it. Deliberate -
   do not "restore" the mirror. */
/* v71: stripping the canvas frame revealed this machine's true aspect - 1.20, not the
   0.92 the padded source reported - so at 191px it was 230px wide and ran into both
   .hp-compact and the headline. Height reduced to keep the WIDTH it used to have. */
/* v73: nudged right and down at KUMAR's request. */
.hero-props .hp-wrap    {right:calc(4% + 60px);   top:27.44%; height:min(146px,9.38vw)}
.hero-props .hp-chaff   {left:1%;    top:57.24%; height:min(135px,8.68vw)}
/* v69: the replacement roller sealer is aspect 0.92 where the vacuum sealer was 1.40,
   so at the same height it is 105px narrower - and the old -6% bleed, which used to
   hide 31% of a wide machine, was hiding HALF of this one. Bleed reduced to match the
   share that is visible, not the pixel offset. */
/* v70: fully on canvas - KUMAR could not see it. The bleed made sense for the wide
   vacuum sealer this slot used to hold; at aspect 0.92 it just hid the machine. */
.hero-props .hp-roller  {right:1%;   top:54.55%; height:min(152px,9.79vw)}
@media (max-width:1240px){
  /* Same scatter as the desktop, scaled down - not a row of thumbnails, and not hidden.
     The hero grows to 780px and the text block is pushed down, because on a phone the
     headline runs nearly edge to edge and without that headroom the cut-outs land on it.
     Heights are min(px,vw) so they shrink on a phone and stop growing on a large tablet.
     NOTE the selector list: `.hero-props .hp-*` is (0,2,0) and beats `.hero-props img`
     (0,1,1), so these have to be overridden by name, not by `img`. */
  .hslide{height:780px}
  .hero-in{padding:132px var(--pad) 300px}
  .hsearch{bottom:252px}
  .hdots{bottom:218px}
  .harw{bottom:202px}
  .hero-props{position:absolute;inset:0;height:auto;display:block;padding:0}
  .hero-props .hp-washer,.hero-props .hp-chaffconv,.hero-props .hp-chaff,
  .hero-props .hp-compact,.hero-props .hp-wrap,.hero-props .hp-roller{
    position:absolute;width:auto;flex:none}
  .hero-props .hp-washer{left:1%;    top:0.5%; height:min(150px,23vw)}
  .hero-props .hp-compact {right:1%;   top:0.5%; height:min(150px,23vw)}
  /* 21% of the 780px hero = 164px, which clears the top pair's worst case
     (top 4px + the 150px height cap = 154px). Anything less and the two
     left-hand props overlap on a wide tablet, where the heights are capped. */
  .hero-props .hp-chaffconv    {left:-7%;   top:21%;  height:min(88px,13.4vw)}
  /* v69: the shrink wrapper that took this slot is aspect 0.92 where the old box
     wrapper was 0.63, so at the same height it is 45px wider and reached into the
     headline at 681px. Capped to match .hp-chaffconv - the middle pair is now the same
     size on both sides, which also reads better. */
  .hero-props .hp-wrap    {right:-3%;  top:21%;  height:min(115px,17.6vw)}
  .hero-props .hp-chaff   {left:-10%;  top:71%;  height:min(165px,25vw)}
  .hero-props .hp-roller  {right:0%;   top:70%;  height:min(172px,26vw)}
}
@media (max-width:680px){
  /* Below ~680px the headline stops shrinking (it is capped at 438px wide and then
     just centres), so the middle pair starts landing on it. Two changes:
     the hero gets 100px more height so the text block sits lower, and the props
     are anchored in px instead of % - a % top scales with the taller hero and
     would put them straight back on the headline. */
  .hslide{height:880px}
  .hero-props .hp-washer{left:1%;    top:4px;   height:min(150px,23vw)}
  .hero-props .hp-compact {right:1%;   top:4px;   height:min(150px,23vw)}
  /* The middle pair sits BELOW the top pair here, not beside it, so it does not need
     to bleed off the canvas to stay clear of anything - it can sit fully on screen.
     (It bled off-canvas in the >680px range only because there it has to squeeze past
     the headline, which is not a constraint once it is above the headline.) */
  .hero-props .hp-chaffconv    {left:1%;    top:160px; height:min(95px,14.5vw)}
  .hero-props .hp-wrap    {right:1%;   top:160px; height:min(115px,17.6vw)}
  .hero-props .hp-chaff   {left:-10%;  top:654px; height:min(165px,25vw)}
  .hero-props .hp-roller  {right:0%;   top:646px; height:min(172px,26vw)}
}
@media (max-width:560px){
  /* Narrow enough that the middle pair no longer fits BESIDE the "Know more" pill, so
     it moves up into the gap between the top pair and that pill instead.
     The top pair is `top:4px; height:min(150px,23vw)` and 23vw < 150px everywhere in
     this range, so `23vw + 16px` is exactly "just below the top pair" at every width -
     a fixed px value would be too low at 560 or waste the gap at 320. */
  .hero-props .hp-chaffconv{top:calc(23vw + 16px)}
  .hero-props .hp-wrap{top:calc(23vw + 16px)}
}

/* grid blowout guards: children may shrink below content width */
.bulk > div{min-width:0}
.deal3 > *{min-width:0}
.pcard{min-width:0}
.pcard .pb b{overflow-wrap:break-word}

/* ============================================================
   RECENTLY LAUNCHED - AGRICULTURE & FARMING MACHINERY
   ============================================================ */
.agri-sec{padding:54px 0}
.agri-sec .s-head{margin-bottom:10px}
.agri-lede{max-width:820px;margin:0 auto 26px;text-align:center;font-size:13.8px;line-height:1.65;color:var(--mut)}
.agri-new{display:inline-flex;align-items:center;gap:7px;background:var(--acc-soft);color:#8A5A00;
  border:1px solid #F3D9A2;border-radius:100px;padding:5px 14px;font-size:11.5px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;margin-bottom:12px}
.agri-new i{width:7px;height:7px;border-radius:50%;background:var(--acc);font-style:normal;flex:none}

/* horizontal scroller on the home page */
.agri-wrap{position:relative}
.agri-row{display:grid;grid-auto-flow:column;grid-auto-columns:226px;gap:16px;
  overflow-x:auto;scroll-behavior:smooth;padding:6px 2px 14px;scrollbar-width:none}
.agri-row::-webkit-scrollbar{display:none}

/* full grid on the dedicated page */
.agri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* the card itself */
.agc{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:.2s;position:relative}
.agc:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:#CBD8E5}
.agc .agi{height:132px;display:grid;place-items:center;background:linear-gradient(160deg,#F5F8FB,#EAF1FA)}
.agc .agi svg{width:56px;height:56px;color:var(--pri);opacity:.85}

/* ===== v82 catalogue page - start ===== */
/* Category page (v82). Reuses .sec/.wrap/.s-head from the rest of the site, so a category
   page cannot drift away from the home page's rhythm; only what is new to this page is here. */
.cpcrumb{background:#fff;border-bottom:1px solid var(--line);font-size:12.5px}
.cpcrumb .wrap{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px}
.cpcrumb a{color:var(--pri);font-weight:600}
.cpcrumb a:hover{text-decoration:underline}
.cpcrumb i{color:var(--mut);font-style:normal}
.cpcrumb span{color:var(--mut)}
.cphero{background:linear-gradient(160deg,#F5F8FB,#EAF1FA);border-bottom:1px solid var(--line)}
.cphero-in{display:grid;grid-template-columns:1fr 290px;gap:34px;align-items:center;
  padding-top:34px;padding-bottom:34px}
.cpkick{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--pri);margin-bottom:9px}
.cphero h1{font-size:31px;line-height:1.2;font-weight:700;color:var(--dark);
  letter-spacing:-.5px;margin-bottom:11px}
.cphero p{font-size:14.5px;line-height:1.7;color:var(--mut);max-width:62ch}
.cpacts{display:flex;gap:11px;flex-wrap:wrap;margin-top:19px}
.btn-w{display:inline-flex;align-items:center;gap:7px;background:#25D366;color:#0B2E17;
  font-weight:700;font-size:13.5px;border-radius:8px;padding:11px 18px}
.btn-w:hover{background:#1FBA59}
.cpshot{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff;
  box-shadow:0 0 0 5px #fff,0 8px 22px rgba(20,35,60,.18)}
.cpshot img{width:100%;height:100%;object-fit:cover;display:block}
.cpgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cpcard{display:flex;gap:15px;border:1px solid var(--line);border-radius:11px;background:#fff;
  padding:16px;transition:box-shadow .18s,transform .18s}
.cpcard:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.cpi{flex:none;width:96px;height:96px;border-radius:9px;
  background:linear-gradient(160deg,#F5F8FB,#EAF1FA);display:grid;place-items:center;overflow:hidden}
.cpi img{width:100%;height:100%;object-fit:contain;padding:6px;display:block}
.cpi-n{font-size:22px;font-weight:700;color:var(--pri);opacity:.45}
.cpcard h3{font-size:15px;font-weight:700;color:var(--dark);line-height:1.35;margin-bottom:6px}
.cpcard p{font-size:13px;line-height:1.62;color:var(--mut);margin-bottom:10px}
.cplink{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  color:var(--pri);font-weight:700;font-size:12.5px;padding:0}
.cplink svg{width:13px;height:13px}
.cplink:hover{text-decoration:underline}
.cpchips{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.cpchip{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:10px;
  background:#fff;padding:10px 13px;transition:box-shadow .18s,transform .18s,border-color .18s}
.cpchip:hover{box-shadow:var(--sh);transform:translateY(-2px);border-color:#CBD8E5}
.cpchip img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px #fff,0 2px 7px rgba(20,35,60,.15)}
.cpchip span{font-size:13px;font-weight:600;color:var(--dark);line-height:1.35}
@media(max-width:1000px){.cpchips{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){
  .cphero-in{grid-template-columns:1fr;gap:22px}
  .cpshot{width:200px;justify-self:start}
  .cphero h1{font-size:25px}
  .cpgrid{grid-template-columns:1fr}
  .cpchips{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .cphero h1{font-size:21px}
  .cpcard{flex-direction:column}
  .cpi{width:100%;height:130px}
  .cpchips{grid-template-columns:1fr}
}
/* ===== v82 catalogue page - end ===== */

/* v76: a supplied product photo in place of the line icon. These are background-removed
   cut-outs, so `contain` lets each machine keep its own silhouette on the slot's gradient -
   no crop, no circle. Same pattern as .ct-img on the tiles and .bi-img on the bulk cards.
   The padding is what stops a wide machine (the conveyor chaff cutter, 1.80) from touching
   the card edges; `max-height:100%` measures the padded content box, so it needs no
   companion change when .agi shrinks to 112px below 900px. */
/* The photo slot is a FLEX box, not the grid the icon slot uses. In a grid whose single row
   track is auto-sized, the track grows to the image's 264px intrinsic height and any
   percentage on the item resolves against THAT - so both `max-height:100%` and `height:100%`
   let a 264px cut-out render at full size and burst a 132px slot. A flex item's percentage
   resolves against the container's content box, which is definite (132px less the padding),
   so the machine is letterboxed by `contain` at every breakpoint with no px anywhere. */
.agc .agi.agi-img{padding:8px;display:flex;align-items:center;justify-content:center}
/* v77: a photo shown AS SUPPLIED, background and all. It fills the slot edge to edge with
   `cover` and no padding, so the photo IS the slot and there is no rectangle to see - which
   is the whole point: a contained full-frame photo shows its own ground as a grey box against
   the slot's gradient. `cover` crops, so the file must carry enough of its own background
   sideways that the machine survives the widest slot; see the v77 note in the log. */
.agc .agi.agi-full{padding:0;display:flex}
.agc .agi.agi-full img{object-fit:cover}
.agc .agi img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;display:block}
.agc .agoff{position:absolute;top:10px;left:10px;background:var(--acc);color:#241A05;
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:.2px}
.agc .agb{padding:13px 13px 15px;display:flex;flex-direction:column;flex:1}
.agc .agcat{font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--pri);margin-bottom:5px}
.agc h4{font-size:13.5px;font-weight:600;color:var(--dark);line-height:1.38;margin-bottom:6px}
.agc .agspec{font-size:12px;color:var(--mut);line-height:1.5;margin-bottom:11px;flex:1}
.agc .agprice{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.agc .agprice b{font-size:17px;font-weight:700;color:var(--dark);letter-spacing:-.3px}
.agc .agprice s{font-size:12.5px;color:var(--mut);text-decoration:line-through}
.agc .agbtn{display:block;text-align:center;background:var(--pri);color:#fff;font-size:12.5px;
  font-weight:600;padding:9px 10px;border-radius:6px;transition:.18s;border:none;cursor:pointer;width:100%}
.agc .agbtn:hover{background:var(--pri-d)}

/* filter chips on the dedicated page */
.agri-filt{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:28px}
.agri-filt button{border:1px solid var(--line);background:#fff;color:var(--txt);font-size:12.5px;
  font-weight:500;padding:8px 16px;border-radius:100px;cursor:pointer;transition:.18s;font-family:inherit}
.agri-filt button:hover{border-color:var(--pri);color:var(--pri)}
.agri-filt button.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}

.agri-foot{text-align:center;margin-top:26px}
.agri-note{font-size:11.5px;color:var(--mut);text-align:center;margin-top:16px;line-height:1.6}

/* sourcing / import strip */
.srcband{background:var(--pri);color:#fff;padding:34px 0}
.srcband .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center}
.srcband h3{font-size:22px;font-weight:700;line-height:1.3;margin-bottom:9px}
.srcband p{font-size:13.5px;line-height:1.7;opacity:.9}
.src3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.srcbox{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);border-radius:9px;
  padding:15px 13px;text-align:center}
.srcbox b{display:block;font-size:15px;font-weight:700;margin-bottom:4px}
.srcbox span{font-size:11.5px;opacity:.85;line-height:1.45;display:block}

@media(max-width:1080px){
  .agri-grid{grid-template-columns:repeat(3,1fr)}
  .srcband .wrap{grid-template-columns:1fr;gap:22px}
}
@media(max-width:760px){
  .agri-grid{grid-template-columns:repeat(2,1fr);gap:13px}
  .agri-row{grid-auto-columns:172px}
  .agc .agi{height:112px}
  .agc .agi svg{width:44px;height:44px}
  .agc h4{font-size:12.5px}
  .agc .agprice b{font-size:15px}
  .srcband h3{font-size:18px}
}
@media(max-width:430px){
  .agri-grid{grid-template-columns:1fr 1fr}
  .src3{grid-template-columns:1fr}
}

/* active state for the Farm Machinery nav entries */
.h2-mega-in a.active{color:var(--acc);font-weight:700}
.nav .nl.active{color:var(--pri);background:var(--pri-soft)}
.mnav a.active{color:var(--pri)}

/* fix: hdr2 top bar overflowed between ~1300px and ~1620px (pre-existing) */
@media(min-width:1025px) and (max-width:1660px){
  .h2-tag{display:none}
  .h2-links{gap:14px}
}

/* ---- photo category tile (same circle as the icon tiles, real product photo inside) ---- */
/* White ring around every tile. It is drawn as a spread-only box-shadow rather than a
   real border so it sits OUTSIDE the circle without shrinking the photo, and it reads
   because the section behind it is var(--soft), not white. The drop shadow underneath
   is what separates the ring from the ground - without it a white ring on a near-white
   photo edge disappears. */
.cd .ct.ct-img{background:#fff;overflow:hidden;padding:0;position:relative;
  box-shadow:0 0 0 4px #fff,0 4px 14px rgba(20,35,60,.17)}
.ct-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.cd:hover .ct.ct-img{transform:translateY(-5px);
  box-shadow:0 0 0 4px #fff,0 12px 26px rgba(20,35,60,.26)}

/* product photo inside a deal card - contained, never cropped */
.pcard .pi.pi-img{padding:10px}
.pcard .pi img{max-width:100%;max-height:148px;width:auto;height:auto;object-fit:contain;display:block}
@media (max-width:560px){.pcard .pi img{max-height:112px}}


/* =========================================================
   CATEGORIES MENU IN THE NAV
   The trigger is icon-only and reveals its label on hover.
   The PANEL cannot live inside the nav row: both .nav .full and .h2-mega-in are
   overflow-x:auto scroll containers, which clip an absolutely positioned child.
   So it is a sibling of the row, positioned against .nav / .h2-mega instead.
   ========================================================= */
.nav,.h2-mega{position:relative}
.catmenu{display:flex;align-items:center;gap:0;padding:8px 12px;border-radius:5px;font-size:14px;
  font-weight:600;color:var(--dark);background:none;border:0;cursor:pointer;font-family:inherit;
  white-space:nowrap;transition:.2s;flex:none}
.catmenu svg{width:19px;height:19px;flex:none}
.catmenu:hover,.catmenu[aria-expanded="true"]{background:var(--pri-soft);color:var(--pri)}
.cm-lbl{max-width:0;opacity:0;overflow:hidden;
  transition:max-width .26s ease,opacity .2s ease,margin-left .26s ease}
.catmenu:hover .cm-lbl,.catmenu:focus-visible .cm-lbl,
.catmenu[aria-expanded="true"] .cm-lbl{max-width:130px;opacity:1;margin-left:8px}
.h2-mega .catmenu{height:100%;border-radius:0}

.cm-panel{position:absolute;left:0;right:0;top:100%;z-index:130;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 18px 34px rgba(20,35,60,.16);
  padding:20px var(--pad) 22px;display:none}
.cm-panel.on{display:block}
.cm-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:3px 22px}
.cm-a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:7px;font-size:13px;
  color:var(--txt);line-height:1.3;transition:.16s}
.cm-a:hover{background:var(--pri-soft);color:var(--pri)}
.cm-a .cmi{width:30px;height:30px;border-radius:50%;flex:none;overflow:hidden;background:#fff;
  display:grid;place-items:center;box-shadow:0 0 0 2px #fff,0 1px 5px rgba(20,35,60,.22)}
.cm-a .cmi img{width:100%;height:100%;object-fit:cover;display:block}
.cm-a .cmi svg{width:15px;height:15px;color:var(--pri)}
.cm-foot{max-width:var(--maxw);margin:15px auto 0;padding-top:13px;border-top:1px solid var(--line);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cm-foot .hint{margin:0}
@media (max-width:1080px){.cm-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.cm-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.cm-grid{grid-template-columns:1fr}.cm-panel{max-height:70vh;overflow-y:auto}}


/* =========================================================
   BUY ON CHAT  (top bar - replaces the old Become a Distributor slot)
   ========================================================= */
.act.act-wa{color:#1F8C3F;font-weight:600}
.act.act-wa:hover{background:#E7F6EC;color:#166E31}
.act.act-wa svg{color:#25A34A}
/* No `display` here. The base rule hides .btn-sell2 below 900px, and a two-class
   selector would out-specify that and force the button back onto a phone header that
   has no room for it - which is exactly what put a horizontal scrollbar on the two
   secondary pages at 390px. align-items/gap are inherited from the base's own layout. */
.btn-sell2.sell2-wa{align-items:center;gap:7px;background:#25A34A;border-color:#25A34A;color:#fff}
.btn-sell2.sell2-wa:hover{background:#1F8C3F;border-color:#1F8C3F;color:#fff}
.btn-sell2.sell2-wa svg{width:16px;height:16px}

/* ===== Phase 0 product page (v89) ===== */
.pdp{background:linear-gradient(160deg,#F5F8FB,#EAF1FA);border-bottom:1px solid var(--line)}
.pdp-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;
  padding-top:26px;padding-bottom:32px;align-items:start}
.pdp-main{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;
  display:grid;place-items:center;min-height:320px}
.pdp-main img{max-width:100%;max-height:300px;width:auto;object-fit:contain;display:block}
.pdp-thumbs{display:flex;align-items:center;gap:9px;margin-top:12px;flex-wrap:wrap}
.pdp-thumbs button{width:64px;height:64px;border:2px solid var(--line);border-radius:8px;
  background:#fff;padding:5px;display:grid;place-items:center}
.pdp-thumbs button.on{border-color:var(--pri)}
.pdp-thumbs img{max-width:100%;max-height:100%;object-fit:contain}
.pdp-more{font-size:11.5px;color:var(--mut)}
.pdp-buy h1{font-size:26px;line-height:1.24;font-weight:700;color:var(--dark);letter-spacing:-.3px}
.pdp-cat{font-size:12px;font-weight:600;color:var(--pri);margin-top:7px;text-transform:uppercase;letter-spacing:.6px}
.pdp-price{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-top:16px}
.pdp-price b{font-size:32px;font-weight:700;color:var(--dark);letter-spacing:-.8px}
.pdp-price s{font-size:15px;color:var(--mut)}
.pdp-off{background:#E6F4EA;color:#0F7A3D;font-size:13px;font-weight:700;border-radius:5px;padding:3px 9px}
.pdp-note{font-size:12px;line-height:1.6;color:var(--mut);margin-top:8px;max-width:56ch}
.pdp-acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px}
.pdp-qty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;
  border:1px solid var(--line);background:#fff;border-radius:9px;padding:11px 13px}
.pdp-qty label{font-size:12.5px;font-weight:600;color:var(--dark)}
.pdp-qty input{width:66px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:13px}
.pdp-qty span{font-size:11.5px;color:var(--mut)}
.pdp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:18px}
.pdp-trust li{list-style:none;background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 13px}
.pdp-trust b{display:block;font-size:13px;color:var(--dark);margin-bottom:3px}
.pdp-trust span{font-size:11.5px;line-height:1.5;color:var(--mut)}
.pdp-quick{background:#fff;border:1px solid var(--line);border-left:4px solid var(--acc);
  border-radius:10px;padding:20px 22px}
.pdp-quick h2{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:8px}
.pdp-quick p{font-size:14px;line-height:1.72;color:var(--mut);max-width:88ch}
.pdp-spec{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pdp-spec th,.pdp-spec td{text-align:left;font-size:13.2px;padding:11px 15px;border-bottom:1px solid var(--line)}
.pdp-spec th{width:34%;font-weight:600;color:var(--dark);background:#F7F9FC}
.pdp-spec td{color:var(--mut)}
.pdp-spec tr:last-child th,.pdp-spec tr:last-child td{border-bottom:0}
.pdp-spec td.ask{color:#9AA3AC;font-style:italic}
.pdp-rev-empty{display:flex;gap:18px;background:#fff;border:1px dashed #CBD8E5;border-radius:11px;padding:22px}
.pdp-rev-empty svg{width:34px;height:34px;flex:none;color:var(--pri);opacity:.5}
.pdp-rev-empty b{display:block;font-size:15px;color:var(--dark);margin-bottom:6px}
.pdp-rev-empty p{font-size:13.2px;line-height:1.7;color:var(--mut);max-width:76ch;margin-bottom:13px}
.pdp-faq{display:grid;gap:9px}
.pfq{background:#fff;border:1px solid var(--line);border-radius:9px;padding:13px 16px}
.pfq summary{font-size:14px;font-weight:600;color:var(--dark);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:center}
.pfq summary::-webkit-details-marker{display:none}
.pfq summary::after{content:"+";font-size:19px;font-weight:400;color:var(--pri);flex:none;line-height:1}
.pfq[open] summary::after{content:"\2212"}
.pfq p{font-size:13.2px;line-height:1.72;color:var(--mut);margin-top:10px;max-width:86ch}
.pdp-rel{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.prel{background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px;
  display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.prel:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.prel-i{height:118px;display:grid;place-items:center;background:linear-gradient(160deg,#F5F8FB,#EAF1FA);
  border-radius:8px;margin-bottom:11px;overflow:hidden}
.prel-i img{max-width:100%;max-height:106px;object-fit:contain;padding:5px}
.prel b{font-size:13.2px;line-height:1.4;color:var(--dark);font-weight:600;flex:1}
.prel-p{display:flex;align-items:baseline;gap:7px;margin-top:9px;font-size:15px;font-weight:700;color:var(--dark)}
.prel-p s{font-size:12px;font-weight:400;color:var(--mut)}
@media(max-width:980px){
  .pdp-in{grid-template-columns:1fr;gap:24px}
  .pdp-rel{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .pdp-buy h1{font-size:21px}
  .pdp-price b{font-size:26px}
  .pdp-trust{grid-template-columns:1fr}
  .pdp-rel{grid-template-columns:1fr}
  .pdp-rev-empty{flex-direction:column;gap:12px}
}

/* =========================================================
   v90 — three additions
   1. .acc      home-page expandable section, sits above the footer
   2. .psrch    "Popular searches" block, sits below the footer
   3. .pdrev    Ratings & Reviews on the product page
   ========================================================= */

/* ---------- 1. above-footer expandable ---------- */
.accwrap{background:var(--soft);border-top:1px solid var(--line);padding:26px 0 30px}
.acc{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.acc-item{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;
  margin-bottom:11px;box-shadow:var(--sh)}
.acc-item:last-child{margin-bottom:0}
.acc-h{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;cursor:pointer;
  transition:background .18s}
.acc-h:hover{background:var(--pri-soft)}
.acc-h h3{flex:1;min-width:0;font-size:14.5px;font-weight:700;color:var(--dark);line-height:1.5}
/* The +/- is drawn from two bars so it needs no icon in the sprite: the vertical one is
   rotated away when the item opens, which turns the plus into a minus. */
.acc-pm{flex:none;width:26px;height:26px;border-radius:6px;background:var(--pri-soft);
  position:relative;margin-top:1px;transition:background .18s}
.acc-pm::before,.acc-pm::after{content:"";position:absolute;left:50%;top:50%;background:var(--pri);
  border-radius:2px;transform:translate(-50%,-50%);transition:transform .22s}
.acc-pm::before{width:12px;height:2px}
.acc-pm::after{width:2px;height:12px}
.acc-item.on .acc-pm{background:var(--acc-soft)}
.acc-item.on .acc-pm::before{background:var(--acc-d)}
.acc-item.on .acc-pm::after{background:var(--acc-d);transform:translate(-50%,-50%) rotate(90deg)}
/* grid-template-rows 0fr -> 1fr animates a block of unknown height, which max-height cannot
   do without guessing a number that later content will exceed. */
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.acc-item.on .acc-b{grid-template-rows:1fr}
.acc-b>div{overflow:hidden}
.acc-b p{font-size:13.2px;line-height:1.78;color:var(--mut);padding:0 18px 16px;max-width:120ch}
.acc-b p+p{padding-top:12px}
.acc-b b{color:var(--txt)}
.acc-b .acc-links{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 18px}
.acc-b .acc-links a{font-size:12px;font-weight:600;color:var(--pri);background:var(--pri-soft);
  border-radius:999px;padding:6px 13px;transition:.16s}
.acc-b .acc-links a:hover{background:var(--pri);color:#fff}

/* ---------- 2. below-footer popular searches ---------- */
.psrch{background:#0C1520;color:#8D9AA8;padding:26px 0 34px;font-size:12.4px;line-height:2}
.psrch .full{max-width:var(--maxw);margin:0 auto}
.psrch h5{font-size:12.5px;font-weight:700;color:#E6EBF1;letter-spacing:.3px;margin:16px 0 6px}
.psrch h5:first-child{margin-top:0}
.psrch p{margin:0}
.psrch a{color:#8D9AA8;transition:color .15s}
.psrch a:hover{color:var(--acc);text-decoration:underline}
.psrch .sp{color:#39485A;padding:0 7px}
.psrch .psmore{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--acc);
  cursor:pointer;background:none;border:0}
.psrch .pshide{display:none}
.psrch.open .pshide{display:inline}

/* ---------- 3. Ratings & Reviews (product page) ---------- */
.pdrev-flag{display:flex;align-items:flex-start;gap:11px;background:#FFF6E5;border:1px solid #F0D08A;
  border-left:4px solid var(--acc);border-radius:9px;padding:12px 15px;margin-bottom:20px}
.pdrev-flag b{display:block;font-size:13px;color:#8A5B00;margin-bottom:2px}
.pdrev-flag span{font-size:12.2px;line-height:1.65;color:#8A5B00}
.pdrev-flag i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;
  font-style:normal;font-weight:800;font-size:13px;text-align:center;line-height:22px}

.pdrev{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start}
.pdrev-sum{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;
  box-shadow:var(--sh);position:relative;overflow:hidden}
.pdrev-score{font-size:44px;font-weight:800;color:var(--dark);letter-spacing:-1.5px;line-height:1}
.pdrev-score small{font-size:16px;font-weight:600;color:var(--mut);letter-spacing:0}
.pdrev-cnt{font-size:12.5px;color:var(--mut);margin-top:5px}
.stars{color:var(--acc);font-size:16px;letter-spacing:2px;margin-top:7px}
.stars i{font-style:normal;color:#D7DEE6}
.pdrev-bars{margin-top:15px;display:grid;gap:6px}
.pdrev-bar{display:grid;grid-template-columns:26px 1fr 26px;align-items:center;gap:8px;font-size:11.5px;color:var(--mut)}
.pdrev-bar span:last-child{text-align:right}
.pdrev-bar em{display:block;height:7px;border-radius:4px;background:#EDF1F6;overflow:hidden}
.pdrev-bar em i{display:block;height:100%;background:var(--acc);border-radius:4px}
.pdrev-sum .btn{width:100%;margin-top:16px}
.pdrev-pol{font-size:11.4px;line-height:1.6;color:var(--mut);margin-top:12px;
  border-top:1px dashed var(--line);padding-top:11px}
/* the sample-data ribbon, drawn across the summary card's corner */
.pdrev-sum.demo::after{content:"SAMPLE";position:absolute;top:22px;right:-46px;width:170px;
  background:var(--acc);color:#fff;font-size:10px;font-weight:800;letter-spacing:1.4px;
  text-align:center;padding:4px 0;transform:rotate(40deg);box-shadow:0 2px 6px rgba(0,0,0,.18)}

.pdrev-list{display:grid;gap:13px}
.pdrev-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:16px 18px;
  position:relative;transition:box-shadow .18s}
.pdrev-card:hover{box-shadow:var(--sh)}
.pdrev-top{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.pdrev-av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--pri);color:#fff;
  font-size:13px;font-weight:700;display:grid;place-items:center;letter-spacing:.4px}
.pdrev-who b{display:block;font-size:13.4px;color:var(--dark)}
.pdrev-who small{font-size:11.6px;color:var(--mut)}
.pdrev-ver{font-size:10.5px;font-weight:700;color:#0F7A3D;background:#E6F4EA;border-radius:999px;
  padding:3px 9px;letter-spacing:.2px}
.pdrev-card .stars{margin:11px 0 6px;font-size:13.5px}
.pdrev-card h4{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:5px}
.pdrev-card p{font-size:13.2px;line-height:1.72;color:var(--mut);max-width:88ch}
.pdrev-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:11px;
  border-top:1px solid var(--line);padding-top:10px;font-size:11.6px;color:var(--mut)}
.pdrev-meta button{font-size:11.6px;font-weight:600;color:var(--pri);display:inline-flex;align-items:center;gap:5px}
.pdrev-meta button:hover{text-decoration:underline}
.pdrev-tag{font-size:10.5px;font-weight:800;letter-spacing:.9px;color:#8A5B00;background:#FFF1D4;
  border:1px solid #F0D08A;border-radius:4px;padding:2px 7px}

/* the testimonial, given a different shape from the review cards so the two do not read alike */
.pdrev-quote{grid-column:1/-1;background:linear-gradient(150deg,var(--pri),var(--pri-d));color:#fff;
  border-radius:13px;padding:26px 30px;position:relative;overflow:hidden;margin-top:6px}
.pdrev-quote::before{content:"\201C";position:absolute;left:14px;top:-26px;font-size:120px;
  font-weight:800;color:rgba(255,255,255,.13);line-height:1}
.pdrev-quote p{position:relative;font-size:16px;line-height:1.7;font-weight:500;max-width:78ch}
.pdrev-qwho{display:flex;align-items:center;gap:11px;margin-top:16px;position:relative;flex-wrap:wrap}
.pdrev-qwho b{font-size:13.5px}
.pdrev-qwho small{font-size:11.8px;color:rgba(255,255,255,.72)}
.pdrev-quote .pdrev-tag{position:relative;display:inline-block;margin-bottom:13px;
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);color:#fff}

/* honest empty state, used whenever there is no real review for the model */
.pdrev-none{background:#fff;border:1px dashed #CBD8E5;border-radius:11px;padding:22px}
.pdrev-none b{display:block;font-size:15px;color:var(--dark);margin-bottom:6px}
.pdrev-none p{font-size:13.2px;line-height:1.7;color:var(--mut);max-width:78ch;margin-bottom:14px}

@media(max-width:900px){
  .pdrev{grid-template-columns:1fr}
  .pdrev-sum{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;align-items:center}
  .pdrev-bars,.pdrev-sum .btn,.pdrev-pol{grid-column:1/-1}
}
@media(max-width:600px){
  .acc-h h3{font-size:13.2px}
  .pdrev-quote{padding:22px 20px}
  .pdrev-quote p{font-size:14.5px}
  .psrch{font-size:12px}
}

/* product links added to existing cards */
.agc .agi.agi-go{cursor:pointer}
.agc h4 a{color:inherit}
.agc h4 a:hover{color:var(--pri);text-decoration:underline}
.cpview{margin-left:18px;color:var(--acc-d)}
.pdrev-flag code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
  background:rgba(0,0,0,.06);border-radius:3px;padding:1px 4px}
.prel-p .ask{font-size:12.5px;color:var(--mut);font-style:italic;font-weight:500}

/* ---------- Why Buy Direct: a picture per card (v91) ---------- */
/* .sc-top cannot clip, because .sc-logo deliberately hangs 44px below it, so the photo gets
   its own border-radius instead of an overflow:hidden on the parent. */
.sc-top.sc-img{padding-bottom:0}
.sc-top.sc-img .sc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:10px;display:block}
/* The 118px white icon was the whole picture before; now it is a corner badge. Two classes
   beat the single-class rule that sizes it, and this block sits after that rule in the file -
   both are needed, and forgetting the second is the specificity trap this project keeps
   hitting. */
.sc-top.sc-img > svg{position:absolute;left:16px;top:16px;width:40px;height:40px;padding:9px;
  background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.32);border-radius:10px;
  color:#fff;backdrop-filter:blur(3px)}
@media(max-width:900px){.sc-top.sc-img > svg{width:34px;height:34px;padding:8px;left:12px;top:12px}}

/* ---------- promo banner strip (v91) ----------
   Replaces the three packing-line cards. Layout follows the reference KUMAR sent: colour
   field and type on the left, product bleeding off the right, a solid CTA chip, and an
   optional corner badge. The white .overlap panel is kept, so the strip still tucks up under
   the hero the way the old block did. */
.promo-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pmc{position:relative;display:block;overflow:hidden;border-radius:11px;min-height:182px;
  border:1px solid rgba(20,35,60,.10);transition:transform .2s,box-shadow .2s}
.pmc:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.pmc-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat}
.pmc-in{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:19px 17px;max-width:58%}
.pmc-kick{font-size:10.5px;font-weight:800;letter-spacing:1.05px;text-transform:uppercase;
  line-height:1.3;margin-bottom:9px}
.pmc-h{font-size:19px;font-weight:800;line-height:1.16;letter-spacing:-.3px}
.pmc-h i{font-style:normal}
.pmc-sub{font-size:14.5px;font-weight:700;line-height:1.25;margin-top:3px}
.pmc-cta{margin-top:15px;display:inline-flex;align-items:center;gap:7px;background:#D62828;
  color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.85px;text-transform:uppercase;
  padding:8px 13px;border-radius:5px;transition:background .18s}
.pmc-cta svg{width:11px;height:11px}
.pmc:hover .pmc-cta{background:#AE1E1E}
.pmc-badge{position:absolute;top:0;right:0;background:#D62828;color:#fff;font-size:10px;
  font-weight:800;letter-spacing:.7px;padding:6px 11px;border-bottom-left-radius:9px}

/* Two ink schemes, because two of the four grounds are light. A ground and its ink travel
   together — setting only the background is what made the v85 medallion unreadable. */
.pmc-dark .pmc-kick{color:#93C4F2}
.pmc-dark .pmc-h,.pmc-dark .pmc-sub{color:#fff}
.pmc-dark .pmc-h i{color:var(--acc)}
.pmc-light .pmc-kick{color:#1D6440}
.pmc-light .pmc-h,.pmc-light .pmc-sub{color:#1B2430}
.pmc-light .pmc-h i{color:#B3450C}
.pmc-warm .pmc-kick{color:#8A5B12}
.pmc-warm .pmc-h,.pmc-warm .pmc-sub{color:#1B2430}
.pmc-warm .pmc-h i{color:#B3450C}

@media(max-width:1240px){.promo-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .pmc{min-height:168px}
  .pmc-h{font-size:17.5px}
  .pmc-in{max-width:62%;padding:16px 14px}
}
@media(max-width:560px){.promo-row{grid-template-columns:1fr}}

/* =========================================================
   v92 — accordion restyle, collapsible Popular searches, carousel dots,
         and the Browse by Range slide given room for its own text
   ========================================================= */

/* ---------- B. the expandable rows, per the reference KUMAR sent ----------
   A plain divided list, not a stack of cards: no panel, no shadow, no radius, and the
   heading at normal weight. These override the v90 block, which is earlier in the file. */
.accwrap{background:#fff;border-top:1px solid var(--line);padding:8px 0 10px}
.acc-item{background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;margin-bottom:0;box-shadow:none}
.acc-item:last-child{border-bottom:0}
.acc-h{align-items:center;gap:18px;padding:15px 4px}
.acc-h:hover{background:transparent}
.acc-h h3{font-size:13.2px;font-weight:400;color:#4A5560;line-height:1.55}
.acc-h:hover h3{color:var(--pri)}
.acc-item.on .acc-h h3{color:var(--dark)}
.acc-pm{width:20px;height:20px;background:transparent;margin-top:0}
.acc-item.on .acc-pm{background:transparent}
.acc-pm::before,.acc-pm::after{background:#98A2AC}
.acc-item.on .acc-pm::before,.acc-item.on .acc-pm::after{background:var(--pri)}
.acc-b p{padding:0 4px 15px;font-size:13px}
.acc-b b{font-weight:600}
.acc-b .acc-links{padding:0 4px 16px}

/* ---------- C. Popular searches: closed until asked for ---------- */
.pshead{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  text-align:left;background:none;border:0;cursor:pointer;padding:4px 0 2px;
  font-size:13px;font-weight:400;color:var(--acc);letter-spacing:.2px}
.pshead:hover{color:#FFC24D}
.pspm{flex:none;position:relative;width:18px;height:18px}
.pspm::before,.pspm::after{content:"";position:absolute;left:50%;top:50%;background:var(--acc);
  border-radius:2px;transform:translate(-50%,-50%);transition:transform .22s}
.pspm::before{width:12px;height:2px}
.pspm::after{width:2px;height:12px}
.psrch.on .pspm::after{transform:translate(-50%,-50%) rotate(90deg)}
.psbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.psrch.on .psbody{grid-template-rows:1fr}
.psbody>div{overflow:hidden}
.psrch{padding:18px 0 22px}
/* v97: the block starts at the page edge with a 10px margin, like the footer expandables */
.psrch .full{max-width:none;margin:0;padding:0 var(--pad) 0 10px}
.psrch h5:first-of-type{margin-top:14px}

/* ---------- D. Browse by Range ----------
   The sweeping arc came from the v85 reference. KUMAR does not want the yellow line, and
   without it the machine reads on the dark ground on its own. */
.pdarc{display:none}
/* The description was clamped to two lines and every one of the five slides was cut off
   mid-sentence, which reads as a fault rather than a summary. Three lines fits them all;
   the slide grows and the photo's bottom pin moves with it so nothing crowds the type. */
.pdslider{min-height:466px}
.pdslide .pdtxt{-webkit-line-clamp:3}
.pdslide .pdimg{bottom:242px}
@media(max-width:1240px){
  .pdslider{min-height:446px}
  .pdslide .pdimg{height:calc(100% - 318px);max-height:170px}
}
@media(max-width:980px){
  .pdslider{min-height:456px}
  .pdslide .pdimg{height:calc(100% - 328px);max-height:150px}
}

/* ---------- E. Why Buy Direct carousel ---------- */
.sdots{display:flex;justify-content:center;gap:7px;margin-top:24px}
.sdots button{width:8px;height:8px;border-radius:50%;background:#CBD5DF;
  transition:width .22s,background .22s}
.sdots button:hover{background:#9FB0C0}
.sdots button.on{background:var(--pri);width:22px;border-radius:4px}

/* ---------- v92b: Browse by Range photo becomes a flex item ---------- */
.pdslide{justify-content:flex-start;padding-top:20px}
.pdslide .pdimg,
.pdslide .pdimg{position:relative;top:auto;bottom:auto;left:auto;right:auto;transform:none;
  display:block;margin:0 auto;flex:1 1 auto;min-height:64px;width:auto;max-width:86%;
  height:auto;max-height:none;object-fit:contain;
  filter:drop-shadow(0 16px 24px rgba(0,14,30,.46))}
.pdbody{margin-top:16px;max-width:min(276px,60%)}
/* the description is no longer cut off - there is room for it now */
.pdslide .pdtxt{display:block;-webkit-line-clamp:none;overflow:visible}
.pdslider{min-height:472px}
@media(max-width:1240px){
  .pdslider{min-height:452px}
  .pdslide .pdimg{height:auto;max-height:none;min-height:52px}
}
@media(max-width:980px){
  .pdslider{min-height:462px}
  .pdslide .pdimg{height:auto;max-height:none;min-height:48px}
}
@media(max-width:470px){
  .pdslide .pdimg{flex:0 0 auto;min-height:0;max-height:190px}
}

/* ---------- v93: the two expandable rows now sit apart ---------- */
.accwrap-top{border-top:1px solid var(--line);border-bottom:0}
.accwrap-end{background:#fff;border-top:0;border-bottom:1px solid var(--line);padding:8px 0 14px}

/* ---------- v94: the expandable rows now live inside the footer ---------- */
.ftr .accwrap{background:transparent;padding:0;border:0}
.ftr .accwrap .acc{padding:0 var(--pad)}
.ftr .accwrap-top{border-bottom:1px solid #DFDFDF}
.ftr .accwrap-end{border-top:1px solid #DFDFDF}
.ftr .acc-item{border-bottom:1px solid #E4E4E4}
.ftr .acc-item:last-child{border-bottom:0}
.ftr .acc-h{padding:16px 0}
.ftr .acc-h h3{color:#3A3A3A;font-size:13.4px;font-weight:400;margin:0}
.ftr .acc-h:hover h3{color:var(--pri)}
.ftr .acc-item.on .acc-h h3{color:#111}
.ftr .acc-pm::before,.ftr .acc-pm::after{background:#7C868F}
.ftr .acc-b p{padding:0 0 15px;color:#4F565E}
.ftr .acc-b b{color:#2A2F35}
.ftr .acc-b .acc-links{padding:0 0 18px}
.ftr .acc-b .acc-links a{background:#E2E7EC;color:var(--pri)}
.ftr .acc-b .acc-links a:hover{background:var(--pri);color:#fff}

/* ---------- v94: Why Buy Direct runs on its own, no arrows ----------
   arrows() sets style.display on these on every scroll event, so an inline style is always
   present and only !important can win. */
.swrap .sarw{display:none!important}

/* ---------- v95: Why Buy Direct runs as a continuous marquee ----------
   The row stops being a scroll container. A track twice as wide as the card set slides by
   exactly half its width and then snaps back to 0, which lands on an identical copy - so the
   loop has no seam and needs no JavaScript per frame. */
.srow.marq{overflow:hidden;scroll-behavior:auto;display:block;padding:4px 0 12px}
.srow.marq .smarq{display:flex;gap:22px;width:max-content;
  animation-name:smarq;animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform}
@keyframes smarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* a row that keeps moving while somebody is reading a card is an annoyance */
.swrap:hover .srow.marq .smarq,
.swrap:focus-within .srow.marq .smarq{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .srow.marq{overflow-x:auto}
  .srow.marq .smarq{animation:none}
}
.sdots{display:none}

/* ---------- v108: the testimonials row runs as a marquee too, LEFT TO RIGHT ----------
   Same seamless trick as the sellers row, reversed. For rightward travel the track starts at
   -50% (showing the duplicate set) and animates to 0 (showing the original) - the two sets are
   identical, so the reset is invisible. Animating 0 -> +50% would work for one loop and then
   jump, because there is nothing rendered to the LEFT of the track's start.
   Slower than the sellers row on purpose: these cards carry a paragraph to read, not a label. */
.trow.marq{overflow:hidden;scroll-behavior:auto;display:block;padding:4px 0 12px}
.trow.marq .tmarq{display:flex;align-items:stretch;gap:20px;width:max-content;
  animation-name:tmarq;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes tmarq{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.twrap:hover .trow.marq .tmarq,
.twrap:focus-within .trow.marq .tmarq{animation-play-state:paused}
/* The row's own arrows() writes style.display on these on every scroll event, so an inline
   style is always present - only !important can hide them. The v94 lesson, again. */
.twrap .tarw{display:none!important}
@media(prefers-reduced-motion:reduce){
  .trow.marq{overflow-x:auto}
  .trow.marq .tmarq{animation:none}
}

/* ---------- v95: the footer expandables start at the page edge ---------- */
.ftr .accwrap .acc{max-width:none;margin:0;padding:0 0 0 10px}
.ftr .accwrap .acc-h{padding:16px var(--pad) 16px 0}
.ftr .accwrap .acc-b p,
.ftr .accwrap .acc-b .acc-links{padding-left:0;padding-right:var(--pad)}

/* =========================================================
   v98 — product page rebuilt on vedikainstruments.com's layout
   Three columns measured off their own build: 460 / 544 / 340, gap 26.
   The reviews block, the FAQ rows and the related cards reuse the classes
   that already exist (.pdrev*, .pfq, .prel) rather than a second copy.
   ========================================================= */
.crumbx{font-size:12px;color:var(--mut);padding:14px 0 4px}
.crumbx a:hover{color:var(--pri);text-decoration:underline}
.crumbx i{font-style:normal;padding:0 7px;color:#B6BFC8}

/* NOT `.pd` — style.css already uses that for a white flex panel and it would leak
   colour, padding and a min-height into this grid. */
.pdx{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr) 340px;gap:26px;
  padding:6px 0 34px;align-items:start}

/* the gallery sticks while the middle column scrolls, as /product-lsw does */
.pd-gal{position:sticky;top:16px;align-self:start}
.pd-main{border:1px solid var(--line);border-radius:12px;background:#fff;height:420px;
  display:flex;align-items:center;justify-content:center;padding:20px;position:relative;
  overflow:hidden;cursor:zoom-in}
.pd-main img{max-height:100%;width:auto;max-width:100%;object-fit:contain;
  transition:transform .18s ease;transform-origin:center center}
.pd-main.zoom img{transform:scale(2.1)}
.zoomhint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:11px;
  color:var(--mut);pointer-events:none}
.pd-main.zoom .zoomhint{opacity:0}
.pd-tools{position:absolute;right:12px;top:12px;display:grid;gap:8px}
.pd-tools button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  background:#fff;display:grid;place-items:center;font-size:14px;color:var(--mut)}
.pd-tools button:hover{border-color:var(--pri);color:var(--pri)}
.pd-thumbs{display:flex;gap:9px;margin-top:12px;align-items:center;flex-wrap:wrap}
.pd-thumbs button{width:64px;height:64px;border:2px solid var(--line);border-radius:8px;
  background:#fff;padding:4px;display:grid;place-items:center;flex:none}
.pd-thumbs button.on{border-color:#D62828}
.pd-thumbs button:hover{border-color:var(--pri)}
.pd-thumbs img{max-width:100%;max-height:100%;object-fit:contain}
.galnote{font-size:11px;color:var(--mut);line-height:1.5;margin-top:9px;max-width:44ch}

.pd-mid h1{font-size:20px;font-weight:700;color:var(--dark);line-height:1.32}
.pd-mid .pd-sub{font-size:13.4px;color:var(--mut);margin-top:6px}
.pd-price{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-top:14px}
.pd-price b{font-size:27px;font-weight:800;color:var(--dark);letter-spacing:-.7px}
.pd-price .gst{font-size:13px;color:var(--mut)}
.pd-price s{font-size:13.5px;color:var(--mut)}
.pd-price em{font-style:normal;font-size:13.5px;font-weight:700;color:#0F7A3D}
.pd-note{font-size:11.8px;color:var(--mut);margin-top:6px;line-height:1.6;max-width:62ch}

.bulkbox{display:flex;align-items:center;gap:12px;border:1px solid #CFE3D6;background:#F2FAF5;
  border-radius:9px;padding:11px 14px;margin-top:14px}
.bulkbox i{font-style:normal;width:26px;height:26px;border-radius:50%;background:#0F7A3D;
  color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.bulkbox b{display:block;font-size:13px;color:#0F5F31}
.bulkbox span{font-size:12px;color:#3E6B53}

/* The reference carries an average rating, an order count and a happy-customer percentage
   here. PackForge has earned none of those, so this panel carries facts instead. */
.trustp{border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-top:16px}
.trustp-t{background:linear-gradient(120deg,var(--pri),var(--pri-d));color:#fff;
  padding:13px 16px;font-size:13.6px;font-weight:700;display:flex;align-items:center;gap:9px}
.trustp-t span{width:22px;height:22px;border-radius:5px;background:var(--acc);color:#241A05;
  display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.trustp-g{display:grid;grid-template-columns:repeat(3,1fr);background:#fff}
.trustp-g div{padding:13px 14px;border-right:1px solid var(--line)}
.trustp-g div:last-child{border-right:0}
.trustp-g b{display:block;font-size:13px;color:var(--dark);margin-bottom:3px}
.trustp-g small{font-size:11.4px;color:var(--mut);line-height:1.5;display:block}
.trustp-b{display:grid;grid-template-columns:repeat(3,1fr);background:#3C2E6E;color:#fff}
.trustp-b span{padding:9px 10px;font-size:11.6px;font-weight:600;text-align:center;
  border-right:1px solid rgba(255,255,255,.16)}
.trustp-b span:last-child{border-right:0}

.aibox{background:#FBFCFD;border:1px solid var(--line);border-left:4px solid #D62828;
  border-radius:10px;padding:16px 18px;margin-top:18px}
.aibox h3{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:9px}
.aibox p{font-size:13.2px;line-height:1.72;color:var(--mut)}
.aitab{width:100%;border-collapse:collapse;margin-top:13px}
.aitab th,.aitab td{text-align:left;font-size:12.6px;padding:7px 0;vertical-align:top}
.aitab th{width:34%;font-weight:600;color:var(--mut)}
.aitab td{color:var(--txt)}
.aitab td.ask{color:#9AA3AC;font-style:italic}

.pdsec{margin-top:22px}
.pdsec > h3{font-size:15.5px;font-weight:700;color:var(--dark);margin-bottom:11px}
.spectab{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:10px;
  overflow:hidden}
.spectab th,.spectab td{text-align:left;font-size:13px;padding:10px 14px;
  border-bottom:1px solid var(--line)}
.spectab th{width:38%;font-weight:600;color:var(--dark);background:#F7F9FC}
.spectab td{color:var(--mut)}
.spectab tr:last-child th,.spectab tr:last-child td{border-bottom:0}
.spectab td.ask{color:#9AA3AC;font-style:italic}

.tick{border:1px solid var(--line);border-radius:10px;padding:15px 18px;background:#fff}
.tick li{display:flex;gap:10px;font-size:13.2px;line-height:1.6;color:var(--mut);
  padding:6px 0;list-style:none}
.tick li::before{content:"\2713";flex:none;width:19px;height:19px;border-radius:50%;
  background:#E6F4EA;color:#0F7A3D;font-size:11px;font-weight:800;display:grid;
  place-items:center;margin-top:1px}
.whybox{border:1px solid #F2CFD2;background:#FDF3F4;border-radius:10px;padding:15px 18px;
  font-size:13px;line-height:1.75;color:#5E3A3E}
.whybox b{color:#3E2326}

.pd-right{position:sticky;top:16px;display:grid;gap:14px}
.buybox{background:#F8F9FB;border:1px solid #E4E7EA;border-radius:12px;padding:16px}
.buybox .bb-p{font-size:24px;font-weight:800;color:var(--dark);letter-spacing:-.6px}
.buybox .bb-p small{font-size:12.5px;font-weight:500;color:var(--mut);letter-spacing:0}
.buybox .bb-m{font-size:12.5px;color:var(--mut);margin-top:3px}
.qtyrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:14px 0 12px;font-size:12.5px;font-weight:600;color:var(--dark)}
.qtyrow div{display:flex;align-items:center;gap:8px}
.qtyrow button{width:28px;height:28px;border:1px solid var(--line);border-radius:6px;
  background:#fff;font-size:15px;color:var(--pri);line-height:1}
.qtyrow input{width:52px;height:28px;border:1px solid var(--line);border-radius:6px;
  text-align:center;font-size:13px;background:#fff}
.bb-btn{display:block;width:100%;text-align:center;font-size:13.6px;font-weight:700;
  padding:12px 14px;border-radius:7px;margin-top:9px}
.bb-a{background:var(--pri);color:#fff}
.bb-a:hover{background:var(--pri-d)}
.bb-w{background:#D62828;color:#fff}
.bb-w:hover{background:#B01F1F}
.bb-o{background:#fff;border:1.5px solid var(--pri);color:var(--pri)}
.bb-o:hover{background:var(--pri-soft)}
.bb-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.bb-s{display:block;text-align:center;font-size:12.2px;font-weight:600;padding:9px 6px;
  border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--txt)}
.bb-s:hover{border-color:var(--pri);color:var(--pri)}
.bb-help{font-size:11.4px;color:var(--mut);text-align:center;margin-top:10px;line-height:1.55}
.bb-help a{color:var(--pri);font-weight:600}
.delivbox{background:var(--acc-soft);border:1px solid #F0D08A;border-radius:12px;padding:15px 16px}
.delivbox h4{font-size:13.4px;font-weight:700;color:#7A5100;margin-bottom:10px}
.pinrow{display:flex;gap:8px}
.pinrow input{flex:1;min-width:0;border:1px solid #E3C98F;border-radius:6px;padding:8px 10px;
  font-size:13px;background:#fff}
.pinrow button{background:#7A5100;color:#fff;font-size:12px;font-weight:700;padding:8px 14px;
  border-radius:6px}
.delivbox p{font-size:11.6px;color:#7A5100;line-height:1.6;margin-top:9px}

.guides{border:1px solid var(--line);border-left:4px solid #D62828;border-radius:10px;
  padding:15px 18px;margin:16px 0 6px;background:#fff}
.guides h4{font-size:14.5px;font-weight:700;color:var(--dark)}
.guides p{font-size:12.6px;color:var(--mut);margin:4px 0 11px}
.guides div{display:flex;gap:9px;flex-wrap:wrap}
.guides a{font-size:12.2px;font-weight:600;color:var(--pri);background:var(--pri-soft);
  border-radius:6px;padding:8px 13px}
.guides a:hover{background:var(--pri);color:#fff}

.seosec{border-top:1px solid var(--line);padding:16px 0 40px}
.seosec details{border:1px solid var(--line);border-radius:9px;background:#fff}
.seosec summary{list-style:none;cursor:pointer;padding:13px 16px;font-size:13px;color:var(--mut)}
.seosec summary::-webkit-details-marker{display:none}
.seosec summary b{color:var(--dark);font-weight:600}
.seosec .sb{padding:0 16px 16px;font-size:13px;line-height:1.75;color:var(--mut);max-width:110ch}
.seosec .sb p{margin-bottom:11px}

@media(max-width:1180px){
  .pdx{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
  .pd-right{grid-column:1/-1;position:static;grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .pdx{grid-template-columns:1fr}
  .pd-gal{position:static}
  .pd-right{grid-template-columns:1fr}
  .trustp-g,.trustp-b{grid-template-columns:1fr}
  .trustp-g div{border-right:0;border-bottom:1px solid var(--line)}
  .trustp-b span{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .pd-main{height:320px}
}

/* ---------- v100: range page opens on the machines, not the descriptions ---------- */
.cpprod{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:8px}
.cpprod .prel-i{height:132px}
.cpprod .prel-i img{max-height:120px}
.cprange-note{font-size:12.4px;color:var(--mut);margin:14px 0 0;line-height:1.6;max-width:88ch}
@media(max-width:1180px){.cpprod{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.cpprod{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cpprod{grid-template-columns:1fr}}

/* ---------- v114: product left rail, enquiry buttons, dark category banner ---------- */
.lrail{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.lrc{border:1px solid #E4E9EF;border-radius:12px;background:#fff;padding:16px}
.lrc h4{font-size:13.5px;font-weight:700;color:var(--dark);margin:0 0 10px}
.lrc .lrsub{font-size:12.6px;color:var(--mut);line-height:1.6;margin:0 0 12px}
.lrlist{list-style:none;margin:0;padding:0}
.lrlist li{border-top:1px solid #EDF1F5}
.lrlist li:first-child{border-top:0}
.lrlist a{display:block;padding:9px 0;font-size:12.9px;color:var(--txt);text-decoration:none;line-height:1.45}
.lrlist a:hover{color:var(--pri)}
.lrfact{display:flex;gap:9px;padding:8px 0;border-top:1px solid #EDF1F5;font-size:12.6px;color:var(--txt);line-height:1.5}
.lrfact:first-of-type{border-top:0}
.lrfact b{display:block;color:var(--dark);font-size:12.8px;margin-bottom:1px}
.lrdot{width:7px;height:7px;border-radius:50%;background:var(--pri);flex:none;margin-top:5px}

/* the enquiry buttons, after the reference KUMAR sent */
.btn-int,.btn-best,.btn-cb,.btn-latest,.btn-quotes{display:flex;align-items:center;
  justify-content:center;gap:8px;width:100%;box-sizing:border-box;border-radius:8px;
  font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit}
.btn-int{background:#F0A020;border:1px solid #F0A020;color:#1B1200;font-size:14px;padding:12px 14px}
.btn-int:hover{background:#E09214}
.btn-best{background:#F5B301;border:1px solid #F5B301;color:#201800;font-size:13.5px;padding:11px 14px}
.btn-best:hover{background:#E2A501}
.btn-cb{background:#fff;border:1.5px solid #D9232D;color:#D9232D;font-size:13.5px;padding:10px 14px}
.btn-cb:hover{background:#FDECED}
.btn-cb svg{width:15px;height:15px}
.askrow{display:flex;align-items:center;gap:12px;margin:2px 0 12px}
.askrow>span{font-size:13px;font-weight:700;color:var(--dark);flex:none}
.btn-latest{background:#EDF9F1;border:1.5px dashed #1FA855;color:#12874A;font-size:13.5px;padding:9px 14px}
.btn-latest:hover{background:#DFF3E7}
.specjump{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:#D9232D;text-decoration:none}
.specjump:hover{text-decoration:underline}
.imq{margin-top:14px;border:1px solid #E4E9EF;border-radius:12px;background:#F7F9FC;padding:15px}
.imq h4{font-size:13.5px;font-weight:700;color:var(--dark);margin:0 0 11px}
.imq-in{display:flex;margin-bottom:10px}
.imq-cc{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--dark);
  background:#EDF1F6;border:1px solid #D7DEE6;border-right:0;border-radius:8px 0 0 8px;padding:0 11px;flex:none}
.imq-cc i{font-style:normal;font-size:10px;font-weight:700;color:var(--mut);
  border:1px solid #C3CEDA;border-radius:3px;padding:1px 3px}
.imq-in input{flex:1;min-width:0;border:1px solid #D7DEE6;border-radius:0 8px 8px 0;
  padding:11px 12px;font-size:13.2px;font-family:inherit;color:var(--dark)}
.imq-in input:focus{outline:2px solid var(--pri);outline-offset:-1px}
.btn-quotes{background:#1FA855;border:1px solid #1FA855;color:#fff;font-size:14px;padding:11px 14px}
.btn-quotes:hover{background:#189347}
.imq-note{margin:9px 0 0;text-align:center;font-size:12px;color:var(--mut)}
.imq-err{margin:7px 0 0;font-size:12px;color:#D9232D;font-weight:600;display:none}
.imq.bad .imq-err{display:block}
.imq.bad .imq-in input{border-color:#D9232D}

/* dark category banner */
.cphero.cpdark{background:linear-gradient(180deg,#0E1B2C 0%,#16283F 100%);color:#fff}
.cphero.cpdark .cpkick{color:#F5A100}
.cphero.cpdark h1{color:#fff}
.cphero.cpdark>.cphero-in>div>p{color:rgba(255,255,255,.86)}
.cph-lead{margin:0 0 6px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.92)}
.cph-lead b{color:#fff;font-weight:700}
.cpcrumb.cpdark-crumb{background:#0B1624}
.cpcrumb.cpdark-crumb a,.cpcrumb.cpdark-crumb span{color:rgba(255,255,255,.8)}
.cpcrumb.cpdark-crumb a:hover{color:#fff}
.cpcrumb.cpdark-crumb i{color:rgba(255,255,255,.45)}
@media(max-width:760px){
  .lrail{margin-top:14px}
  .askrow{flex-wrap:wrap}
}

/* ---------- v117 demo: cart drawer + lead form ---------- */
.cbg{position:fixed;inset:0;background:rgba(8,14,22,.5);opacity:0;visibility:hidden;
  transition:opacity .22s;z-index:998}
.cbg.on{opacity:1;visibility:visible}
.cdr{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;
  z-index:999;transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-14px 0 40px rgba(8,14,22,.22)}
.cdr.on{transform:none}
.cdr-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid #E4E9EF}
.cdr-h b{font-size:15px;color:var(--dark)}
.cdr-h button{background:none;border:0;font-size:24px;line-height:1;color:var(--mut);
  cursor:pointer;padding:0 4px}
.cdr-b{flex:1;overflow-y:auto;padding:6px 18px 12px}
.cdr-f{border-top:1px solid #E4E9EF;padding:14px 18px;background:#F7F9FC}
.citem{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #EDF1F5}
.citem img{width:62px;height:62px;object-fit:contain;flex:none;border:1px solid #E9EEF4;
  border-radius:8px;background:#fff;padding:4px}
.citem .cn{flex:1;min-width:0}
.citem h5{margin:0 0 4px;font-size:12.9px;font-weight:700;color:var(--dark);line-height:1.4}
.citem .cp{font-size:12.8px;color:var(--txt);font-weight:700}
.citem .cp small{font-weight:400;color:var(--mut)}
.cstep{display:inline-flex;align-items:center;border:1px solid #D7DEE6;border-radius:7px;
  margin-top:7px;overflow:hidden}
.cstep button{width:26px;height:26px;border:0;background:#fff;cursor:pointer;font-size:14px;
  color:var(--dark);font-family:inherit}
.cstep span{min-width:28px;text-align:center;font-size:12.6px;font-weight:700;
  border-left:1px solid #D7DEE6;border-right:1px solid #D7DEE6;line-height:26px}
.crm{background:none;border:0;color:#D9232D;font-size:11.8px;font-weight:700;cursor:pointer;
  padding:6px 0 0;font-family:inherit}
.ctot{font-size:13px;color:var(--txt);display:flex;justify-content:space-between;padding:3px 0}
.ctot.big{font-size:15px;font-weight:800;color:var(--dark);border-top:1px solid #DCE3EB;
  margin-top:7px;padding-top:9px}
.cnote{margin:8px 0 0;font-size:11.8px;color:var(--mut);line-height:1.55}
.cempty{text-align:center;color:var(--mut);font-size:13px;padding:52px 10px}
.bb-btn.bb-cart{background:#1F6FD0;border:1px solid #1F6FD0;color:#fff}
.bb-btn.bb-buy{background:#D9232D;border:1px solid #D9232D;color:#fff}

.lead .mbox{max-width:420px}
.lead .lk{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:var(--pri);background:var(--pri-soft);border-radius:5px;
  padding:3px 8px;margin-bottom:9px}
.lead .lmodel{font-size:12.8px;color:var(--txt);line-height:1.55;margin:0 0 15px;
  background:#F7F9FC;border:1px solid #E9EEF4;border-radius:8px;padding:10px 12px}
.lead .lmodel b{color:var(--dark)}

/* ---------- v118 demo: two-panel lead modal ---------- */
.lead .mbox{max-width:760px;padding:0;overflow:hidden}
.lead .mh{display:none}
.lead2{display:grid;grid-template-columns:300px 1fr;min-height:330px}
.lead2 .l2l{background:#F7F9FC;border-right:1px solid #E9EEF4;padding:20px}
.lead2 .l2l .l2img{background:#fff;border:1px solid #E9EEF4;border-radius:10px;height:190px;
  display:flex;align-items:center;justify-content:center;padding:12px;margin-bottom:14px}
.lead2 .l2l .l2img img{max-width:100%;max-height:100%;object-fit:contain}
.lead2 .l2l h5{margin:0 0 7px;font-size:13.4px;font-weight:700;color:var(--dark);line-height:1.45}
.lead2 .l2l .l2p{margin:0 0 8px;font-size:13px;font-weight:700;color:#12874A}
.lead2 .l2l .l2co{margin:0;font-size:11.6px;color:var(--mut);line-height:1.5}
.lead2 .l2r{padding:22px 24px 24px;position:relative}
.lead2 .l2r h3{margin:0 0 6px;font-size:21px;font-weight:700;color:var(--dark)}
.lead2 .l2r .l2sub{margin:0 0 18px;font-size:13.2px;color:var(--mut);line-height:1.55}
.lead2 .l2x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:22px;
  line-height:1;color:var(--mut);cursor:pointer}
.lead2 label{display:block;font-size:12.4px;font-weight:700;color:var(--dark);margin:0 0 6px}
.lead2 .l2f{margin-bottom:14px}
.lead2 input,.lead2 textarea{width:100%;box-sizing:border-box;border:1px solid #D7DEE6;
  border-radius:8px;padding:11px 13px;font-size:13.4px;font-family:inherit;color:var(--dark)}
.lead2 textarea{min-height:86px;resize:vertical}
.lead2 input:focus,.lead2 textarea:focus{outline:2px solid var(--pri);outline-offset:-1px}
.lead2 .l2mob{display:flex}
.lead2 .l2mob span{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;
  color:var(--dark);background:#EDF1F6;border:1px solid #D7DEE6;border-right:0;
  border-radius:8px 0 0 8px;padding:0 12px;flex:none}
.lead2 .l2mob span i{font-style:normal;font-size:10px;color:var(--mut);border:1px solid #C3CEDA;
  border-radius:3px;padding:1px 3px}
.lead2 .l2mob input{border-radius:0 8px 8px 0}
.lead2 .l2go{width:100%;border:0;border-radius:8px;background:#EE6C1E;color:#fff;font-size:15px;
  font-weight:700;padding:13px;cursor:pointer;font-family:inherit}
.lead2 .l2go:hover{background:#D95F14}
.lead2 .l2err{display:none;margin:8px 0 0;font-size:12px;font-weight:600;color:#D9232D}
.lead2.bad .l2err{display:block}
.lead2.bad .l2mob input{border-color:#D9232D}
@media(max-width:700px){
  .lead2{grid-template-columns:1fr}
  .lead2 .l2l{border-right:0;border-bottom:1px solid #E9EEF4}
  .lead2 .l2l .l2img{height:150px}
}

/* ---------- v118 demo: OUR PRODUCT RANGE sidebar ---------- */
.pgwrap{display:grid;grid-template-columns:276px 1fr;gap:20px;align-items:start}
.prange{position:sticky;top:16px;border:1px solid #E4E9EF;border-radius:12px;overflow:hidden;
  background:#fff}
.prange-h{background:#12283F;color:#fff;padding:13px 16px;display:flex;align-items:center;
  justify-content:space-between}
.prange-h b{font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.prange-h em{font-style:normal;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.16);
  border-radius:11px;padding:2px 9px}
.prange-b{max-height:640px;overflow-y:auto}
.pfam{border-top:1px solid #EDF1F5}
.pfam:first-child{border-top:0}
.pfam>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#fff;border:0;padding:13px 16px;font-size:13.4px;font-weight:700;color:var(--dark);
  cursor:pointer;font-family:inherit;text-align:left}
.pfam>button:hover{background:#F7F9FC}
.pfam.on>button{background:#FDECED;color:#D9232D}
.pfam>button i{font-style:normal;font-size:11px;transition:transform .2s;flex:none}
.pfam.on>button i{transform:rotate(180deg)}
.pfam-b{display:none;padding:0 0 8px}
.pfam.on .pfam-b{display:block}
.pcatl{display:block;padding:7px 16px 7px 22px;font-size:12.4px;font-weight:700;
  color:var(--mut);text-transform:uppercase;letter-spacing:.3px}
.pprodl{display:block;padding:6px 16px 6px 30px;font-size:12.6px;color:var(--txt);
  text-decoration:none;line-height:1.45;position:relative}
.pprodl:before{content:"\2022";position:absolute;left:20px;color:#B7C2CE}
.pprodl:hover{color:var(--pri)}
.pprodl.cur{color:#D9232D;font-weight:700}
@media(max-width:700px){ .pgwrap{grid-template-columns:1fr} .prange{display:none} }
.pgwrap{min-width:0}
.pgwrap .pgmain{min-width:0}
/* Everything that RESHAPES the product grid for the sidebar lives inside this query. Written
   unscoped, `.pgwrap .pdx` is (0,2,0) and beats the site's own single-class `.pdx` rules
   inside their media queries at EVERY width - media queries carry no specificity - so a 390px
   phone was handed 340px + 300px of fixed columns. Above 1400 is the only width where the
   sidebar is shown, so it is the only width these rules may apply at. */
@media(min-width:1401px){
  .pgwrap .pdx{grid-template-columns:340px minmax(0,1fr) 300px;gap:20px}
  .pgwrap .pd-gal{width:340px}
  .pgwrap .pd-main{height:340px}
}
@media(max-width:1400px){
  .pgwrap{grid-template-columns:1fr}
  .pgwrap .prange{display:none}
}


/* ---------- v119 demo: buttons spread, after the reference block ---------- */
.pdhead{display:flex;align-items:center;justify-content:space-between;gap:18px;
  border:1px solid #E4E9EF;border-radius:12px;background:#fff;padding:13px 18px;margin-bottom:16px}
.pdhead h2{margin:0;font-size:17px;font-weight:700;color:var(--dark);line-height:1.35}
.pdhead .btn-cb{width:auto;flex:none;padding:9px 16px}
.sold{border:1px solid #E4E9EF;border-radius:10px;background:#F7F9FC;padding:12px 13px;
  margin-top:12px}
.sold p{margin:0 0 10px;font-size:12.5px;color:var(--txt);line-height:1.5}
.sold p b{color:var(--dark)}
.midcta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.midcta .btn-best{width:auto;flex:none;padding:11px 22px}
.midcta .specjump{margin-top:0}
@media(max-width:760px){ .pdhead{flex-direction:column;align-items:flex-start} }

/* ---------- v120 demo: collection page built from product blocks ---------- */
.clwrap{display:grid;grid-template-columns:276px minmax(0,1fr);gap:20px;align-items:start;
  padding:18px 0 6px}
.vblk{border:1px solid #E4E9EF;border-radius:12px;background:#fff;margin-bottom:18px;
  overflow:hidden}
.vblk-name{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 18px;border-bottom:1px solid #EDF1F5}
.vblk-name h3{margin:0;font-size:16px;font-weight:700;color:var(--dark);line-height:1.35}
.vblk-name .btn-cb{width:auto;flex:none;padding:8px 15px;font-size:12.8px}
.vblk-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;padding:18px}
.vleft .vshot{border:1px solid #E9EEF4;border-radius:10px;background:#fff;height:300px;
  display:flex;align-items:center;justify-content:center;padding:14px}
.vleft .vshot img{max-width:100%;max-height:100%;object-fit:contain}
.vleft h4{margin:16px 0 6px;font-size:13px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:var(--mut)}
.vleft p{margin:0;font-size:13.2px;line-height:1.7;color:var(--txt)}
.vright .vp{font-size:22px;font-weight:800;color:var(--dark);margin:0 0 2px}
.vright .vp small{font-size:12.5px;font-weight:400;color:var(--mut)}
.vright .vm{font-size:12.6px;color:var(--mut);margin:0 0 14px}
.vspec{width:100%;border-collapse:collapse;margin-top:14px}
.vspec th,.vspec td{border:1px solid #EDF1F5;padding:8px 11px;font-size:12.6px;text-align:left;
  vertical-align:top}
.vspec th{background:#F7F9FC;color:var(--mut);font-weight:700;width:38%}
.vspec td{color:var(--txt)}
.clrest{margin-top:6px}
@media(max-width:1080px){
  .clwrap{grid-template-columns:1fr}
  .clwrap .prange{display:none}
}
@media(max-width:760px){ .vblk-top{grid-template-columns:1fr} }

/* ---------- v123: back to top ---------- */
.totop{position:fixed;left:22px;bottom:26px;width:46px;height:46px;border-radius:50%;
  border:0;cursor:pointer;background:var(--dark);color:#fff;display:flex;align-items:center;
  justify-content:center;z-index:195;box-shadow:0 8px 22px rgba(8,14,22,.28);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s,transform .2s,visibility .2s,background .15s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--pri)}
.totop:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.totop svg{width:19px;height:19px;transform:rotate(-90deg)}
@media(max-width:900px){
  /* the mobile bottom nav owns the bottom edge below 900px - sit above it, not under it */
  .totop{left:14px;bottom:calc(62px + env(safe-area-inset-bottom));width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){ .totop{transition:none} }


/* ---------- v125 demo: gallery after the reference ---------- */
.pd-wrap{display:block}
.galcount{position:absolute;left:12px;bottom:12px;background:rgba(11,26,43,.82);color:#fff;
  font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:20px;letter-spacing:.2px;z-index:3}
.galcount b{font-weight:800}
.galnav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.94);color:var(--dark);font-size:21px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(8,14,22,.13);opacity:0;transition:opacity .15s;z-index:3;padding:0}
.pd-main:hover .galnav{opacity:1}
.galnav:hover{background:#fff;border-color:var(--pri);color:var(--pri)}
.galprev{left:9px}
.galnext{right:9px}
/* The reference puts "Click to zoom" inside the picture as a dark pill, not as a line of text
   under it. Matching that also keeps it consistent with the view counter opposite. */
.pd-main .zoomhint{position:absolute;right:12px;bottom:12px;left:auto;top:auto;z-index:3;
  background:rgba(11,26,43,.82);color:#fff;font-size:11.5px;font-weight:600;padding:4px 10px;
  border-radius:20px;opacity:1;width:auto;text-align:center;letter-spacing:.2px}

/* B - the vertical rail, at the reference's own numbers: 56px rail, 10px gap, 7px between
   thumbs, 56x56 cells with 2px padding and a 7px radius. */
.pd-gal.galv .pd-wrap{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:stretch}
.pd-gal.galv .pd-main{grid-column:2;grid-row:1}
/* The rail must END where the main image ends. A fixed max-height cannot do that: the main
   image is 420px tall on a bare product page and 340px once the OUR PRODUCT RANGE sidebar is
   in, and 7 thumbs need 434px either way - measured, the rail hung 80px below the picture and
   the last thumb was cut in half. height:0 + min-height:100% keeps the rail out of the row's
   height calculation, so the row is exactly as tall as the main image and the rail scrolls
   inside it at whichever height that turns out to be. */
.pd-gal.galv .pd-thumbs{grid-column:1;grid-row:1;flex-direction:column;flex-wrap:nowrap;
  width:56px;margin-top:0;gap:7px;height:0;min-height:100%;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:#C7CFD8 transparent}
.pd-gal.galv .pd-thumbs::-webkit-scrollbar{width:4px}
.pd-gal.galv .pd-thumbs::-webkit-scrollbar-thumb{background:#C7CFD8;border-radius:4px}
.pd-gal.galv .pd-thumbs button{width:56px;height:56px;flex:none;padding:2px;border-width:1px;border-radius:7px}
.pd-gal.galv .pd-thumbs button.on{border-width:2px}
/* With the OUR PRODUCT RANGE sidebar in place the gallery column is 340px, and 56 + 10 of
   rail would leave the main image 274px - measured, and too small to read a machine in. So
   layout B buys 80px back from the middle column, which has the most room to give. */
@media(min-width:1401px){
  .pgwrap .pdx:has(.pd-gal.galv){grid-template-columns:420px minmax(0,1fr) 300px}
  .pgwrap .pd-gal.galv{width:420px}
}

/* the lightbox, after #vclLb on the reference collection page */
.pdlb{position:fixed;inset:0;background:rgba(8,14,22,.88);z-index:9000;display:none;
  align-items:center;justify-content:center;padding:32px}
.pdlb.on{display:flex}
/* A minimum panel, because these views are 200-500px files and nothing is upscaled: without
   it the white card shrink-wraps a small render and the zoom looks like it failed to open. */
.pdlb-in{position:relative;background:#fff;border-radius:14px;padding:22px;max-width:min(88vw,860px);
  max-height:88vh;min-width:min(78vw,620px);min-height:min(62vh,470px);
  display:flex;align-items:center;justify-content:center}
.pdlb-in img{max-width:100%;max-height:calc(88vh - 90px);width:auto;height:auto;object-fit:contain;display:block}
.pdlb-x{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;border:0;
  background:#fff;color:var(--dark);font-size:19px;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.3)}
.pdlb-n{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  border:0;background:rgba(255,255,255,.92);color:var(--dark);font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);padding:0}
.pdlb-n:hover{background:#fff;color:var(--pri)}
.pdlb-p{left:-19px}
.pdlb-f{right:-19px}
.pdlb-c{position:absolute;left:0;right:0;bottom:-30px;text-align:center;color:#fff;font-size:12.5px;
  letter-spacing:.3px}
@media(max-width:900px){
  .pd-gal.galv .pd-wrap{display:block}
  .pd-gal.galv .pd-thumbs{flex-direction:row;flex-wrap:wrap;width:auto;margin-top:12px;max-height:none}
  .pdlb{padding:16px}
  .pdlb-in{padding:14px;max-width:94vw}
  .pdlb-p{left:4px}
  .pdlb-f{right:4px}
}

/* ---------- v126: product page after /product-lsw ---------- */

/* B is the approved layout, so it is no longer a variant that has to be switched on. The
   .galv rules stay where they are; this just makes every gallery carry the class. */
.hoverzoom{margin:9px 0 0;text-align:center;font-size:12px;color:var(--mut);letter-spacing:.2px}
.pd-gal.galv .hoverzoom{text-align:left;padding-left:66px}

/* the announcement strip, 36px like the reference */
.topstrip{background:#0B1A2B;color:#fff;font-size:12.2px;line-height:1.35}
.topstrip .tsin{max-width:1400px;margin:0 auto;padding:6px 20px;display:flex;align-items:center;
  gap:14px;min-height:24px}
.topstrip b{color:#F5A100;font-weight:800;letter-spacing:.2px;flex:none}
.topstrip span{color:rgba(255,255,255,.82);flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.topstrip button{flex:none;border:0;border-radius:4px;background:#D62828;color:#fff;
  font:inherit;font-size:11.8px;font-weight:700;padding:5px 13px;cursor:pointer;letter-spacing:.2px}
.topstrip button:hover{background:#B81F1F}
@media(max-width:760px){ .topstrip span{display:none} }

/* the icon category row */
.catrow{background:#fff;border-bottom:1px solid var(--line)}
.catrow-in{max-width:1400px;margin:0 auto;padding:10px 20px;display:flex;gap:6px;
  overflow-x:auto;scrollbar-width:none}
.catrow-in::-webkit-scrollbar{display:none}
.citem{flex:1 1 0;min-width:104px;display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:8px 6px 9px;border-radius:10px;text-decoration:none;color:var(--dark);
  position:relative;text-align:center;background:none;border:0;font:inherit;cursor:pointer}
.citem:hover{background:#F7F9FC}
.citem i{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:#EEF3F9;color:var(--pri)}
.citem i svg{width:21px;height:21px}
.citem b{font-size:11.6px;font-weight:600;line-height:1.28;letter-spacing:.1px}
.citem em{position:absolute;top:2px;right:8px;font-style:normal;font-size:8px;font-weight:800;
  letter-spacing:.4px;background:#F5A100;color:#241A05;border-radius:3px;padding:1px 4px}
@media(max-width:900px){ .catrow{display:none} }

/* back bar */
.backbar{background:#fff;border-bottom:1px solid var(--line)}
.backbar-in{max-width:1400px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;gap:14px}
.backbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:#fff;border-radius:7px;padding:6px 12px;font:inherit;font-size:12.4px;
  font-weight:600;color:var(--dark);text-decoration:none;cursor:pointer}
.backbtn:hover{border-color:var(--pri);color:var(--pri)}
.backtrail{font-size:12.2px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.backtrail b{color:var(--dark);font-weight:600}
.backhome{margin-left:auto;font-size:12.2px;color:var(--mut);text-decoration:none;flex:none}
.backhome:hover{color:var(--pri)}
@media(max-width:640px){ .backtrail{display:none} }

/* the magnifier is driven by hover now, so the pointer says so */
.pd-main{cursor:crosshair}
.pd-main.zoom{cursor:zoom-out}

/* ---------- v126: Quick Links menu (the v120 demo, now wanted) ---------- */
.qlwrap{position:relative}
.qlbtn{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:inherit;padding:6px 4px}
.qlbtn svg{width:17px;height:17px}
.qlbtn i{font-style:normal;font-size:9px;transition:transform .18s}
.qlwrap.on .qlbtn i{transform:rotate(180deg)}
.qlmenu{position:absolute;top:calc(100% + 10px);right:0;width:262px;background:#fff;
  border:1px solid #E4E9EF;border-radius:12px;box-shadow:0 18px 44px rgba(8,14,22,.16);
  padding:6px 0;z-index:60;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;text-align:left}
.qlwrap.on .qlmenu{opacity:1;visibility:visible;transform:none}
.qlmenu:before{content:"";position:absolute;top:-7px;right:22px;width:12px;height:12px;
  background:#fff;border-left:1px solid #E4E9EF;border-top:1px solid #E4E9EF;transform:rotate(45deg)}
.qlh{display:block;padding:11px 16px 6px;font-size:10.5px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--mut)}
.qli{display:flex;align-items:center;gap:11px;padding:10px 16px;font-size:13.2px;
  color:var(--txt);text-decoration:none;background:none;border:0;width:100%;box-sizing:border-box;
  text-align:left;font-family:inherit;cursor:pointer;border-top:1px solid #F1F4F8}
.qlh + .qli{border-top:0}
.qli:hover{background:#F7F9FC;color:var(--pri)}
.qli svg{width:17px;height:17px;flex:none;color:var(--pri)}
@media(max-width:900px){ .qlwrap{display:none} }

/* .h2-top-in is a flex row whose children are every one of them flex:none - nothing shrinks,
   so anything added to it has to earn a rung on the existing hide ladder (.h2-tag at 1300,
   .h2-links and .lang at 1240 and 1080, .btn-sell2 at 900). Measured: the 128px menu pushed
   .btn-login2 22px past the viewport at 1280. It gives up its place first, and the tag goes
   one step earlier while the menu is on screen. */
@media(max-width:1400px){ .hdr2 .h2-tag{display:none} }
@media(max-width:1330px){ .hdr2 .qlwrap{display:none} }

/* ---------- v127: the three new lines ---------- */
.nl3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nlc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px 22px;
  display:flex;flex-direction:column}
.nlic{width:52px;height:52px;border-radius:14px;background:#EEF3F9;color:var(--pri);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.nlic svg{width:26px;height:26px}
.nlc h3{font-size:19px;font-weight:800;color:var(--dark);margin:0 0 9px;letter-spacing:-.2px}
.nlc > p{font-size:13.4px;line-height:1.7;color:var(--mut);margin:0 0 15px}
.nltags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;padding:0}
.nltags li{font-size:12.2px;font-weight:600;color:#3E4E60;background:#F4F7FB;
  border:1px solid #E4EAF1;border-radius:16px;padding:5px 11px}
.nlnote{font-size:11.8px;line-height:1.6;color:#8A949C;margin:0 0 16px;font-style:italic}
.nlbtn{margin-top:auto;border:1px solid var(--pri);background:#fff;color:var(--pri);
  border-radius:9px;padding:11px 16px;font:inherit;font-size:13.4px;font-weight:700;cursor:pointer}
.nlbtn:hover{background:var(--pri);color:#fff}
.nlfoot{margin:22px 0 0;font-size:12.8px;line-height:1.75;color:var(--mut);
  border-left:3px solid var(--line);padding-left:14px}
.nlfoot b{color:var(--dark)}
@media(max-width:980px){ .nl3{grid-template-columns:1fr;gap:16px} }

/* ---------- v127: quick view, at the reference's measured numbers ---------- */
.vqv-ov{position:fixed;inset:0;background:rgba(8,17,27,.66);z-index:9400;display:none;
  align-items:center;justify-content:center;padding:20px}
.vqv-ov.on{display:flex}
.vqv{background:#fff;border-radius:16px;width:100%;max-width:940px;max-height:92vh;overflow:auto;
  display:grid;grid-template-columns:1.15fr 1fr;box-shadow:0 26px 70px rgba(0,0,0,.42)}
@media(max-width:820px){ .vqv{grid-template-columns:1fr;max-width:480px} }
.vqv-l{padding:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#f7f9fb}
.vqv-l .big{width:100%;max-width:380px;background:#fff;border-radius:12px;padding:12px;
  display:flex;align-items:center;justify-content:center;min-height:230px;box-sizing:border-box}
.vqv-l .big img{max-width:100%;max-height:300px;width:auto;height:auto;object-fit:contain;display:block}
.vqv-strip{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.vqv-strip button{width:52px;height:52px;border:1.6px solid var(--line);border-radius:8px;
  background:#fff;padding:2px;cursor:pointer;overflow:hidden;display:flex;align-items:center;
  justify-content:center}
.vqv-strip button.on{border-color:#D62828;box-shadow:0 0 0 2px #fdd}
.vqv-strip img{max-width:100%;max-height:100%;object-fit:contain}
.vqv-r{padding:26px;position:relative}
.vqv-close{position:absolute;top:16px;right:16px;background:#fff;border:1.5px solid var(--line);
  border-radius:8px;font-size:12.6px;font-weight:700;color:#41505f;padding:6px 12px;cursor:pointer;
  font-family:inherit}
.vqv-close:hover{border-color:#D62828;color:#D62828}
.vqv-r h3{font-size:21px;font-weight:800;color:#0b1a2b;margin:30px 0 14px;line-height:1.3}
.vqv-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.vqv-ask{font-size:24px;font-weight:800;color:#0b1a2b}
.vqv-glp{font-size:18.6px;font-weight:800;color:#0f9d58;background:#eefaf2;
  border:1.5px dashed #7fca9c;border-radius:8px;padding:5px 13px;display:inline-block;
  line-height:1.25;box-shadow:0 2px 8px rgba(15,157,88,.14);cursor:pointer;font-family:inherit}
.vqv-glp:hover{background:#0f9d58;color:#fff;border-color:#0f9d58}
.vqv-kv{font-size:13.4px;color:#41505f;margin-bottom:8px;line-height:1.55}
.vqv-kv b{color:#8a949c;font-weight:700;margin-right:6px}
.vqv-sold{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin:16px 0;
  background:#fbfcfd}
.vqv-sold .s1{display:block;font-size:13.4px;color:#41505f;margin-bottom:8px}
.vqv-sold .s1 b{color:#0b1a2b}
.vqv-chip{display:inline-block;font-size:11.6px;font-weight:700;color:#3E4E60;background:#F4F7FB;
  border:1px solid #E4EAF1;border-radius:14px;padding:4px 10px;margin-right:6px}
.vqv-qh{font-size:14.6px;font-weight:800;color:#0b1a2b;margin-bottom:10px}
.vqv-mob{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.vqv-mob span{display:flex;align-items:center;padding:0 11px;background:#F4F7FB;font-size:12.8px;
  font-weight:700;color:#41505f;border-right:1px solid var(--line)}
.vqv-mob input{flex:1;border:0;padding:11px 12px;font:inherit;font-size:13.4px;outline:none;min-width:0}
.vqv-ov.bad .vqv-mob{border-color:#D62828}
.vqv-go{width:100%;margin-top:10px;border:0;border-radius:9px;background:#0f9d58;color:#fff;
  padding:12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.vqv-go:hover{background:#0c8449}
.vqv-err{display:none;font-size:12px;color:#D62828;margin:7px 0 0}
.vqv-ov.bad .vqv-err{display:block}
.vqv-ok{display:none;font-size:13px;color:#0f9d58;font-weight:700;margin-top:10px}
.vqv-micro{font-size:11.6px;color:#8a949c;margin:8px 0 0;text-align:center}
.vshot img{cursor:zoom-in}


/* ---------- v130: the buy column, one notch down ----------
   Measured before / after. The reference's own buttons are 45-46px tall; ours were 42 and are
   now 38, because ours come nine to a column and its come two. */
.buybox .bb-btn{padding:10px 14px;font-size:12.8px;border-radius:7px}
.buybox .bb-btn.bb-w{padding:10px 14px}
.buybox .btn-int{padding:9px 14px;font-size:13px}
.buybox .btn-latest{padding:7px 13px;font-size:12.6px}
.buybox .bb-s{padding:7px 8px;font-size:11.6px}
.buybox .bb-help{font-size:11.4px;line-height:1.6}
.buybox .askrow{font-size:12.4px}
.buybox .sold p{font-size:12.4px;line-height:1.6}
.pdhead .btn-cb{padding:7px 14px;font-size:12.8px}
.midcta .btn-best{padding:9px 18px;font-size:12.8px}
.midcta .specjump{font-size:12.4px}
.delivbox h4{font-size:13.4px}
.delivbox p{font-size:11.8px;line-height:1.6}
.imq h4{font-size:13.4px}
.btn-quotes{padding:10px;font-size:13px}

/* ---------- v130: nothing clickable stays inert under the pointer ---------- */
.buybox .bb-btn,.buybox .btn-int,.buybox .btn-latest,.buybox .bb-s,
.pdhead .btn-cb,.midcta .btn-best,.btn-quotes,.qtyrow button,.specjump,.qlbtn{
  transition:background-color .16s,color .16s,border-color .16s,box-shadow .16s,transform .12s}
.buybox .bb-cart:hover{background:#0B4FA8;box-shadow:0 3px 10px rgba(11,79,168,.28)}
.buybox .bb-buy:hover{background:#B81F1F;box-shadow:0 3px 10px rgba(184,31,31,.26)}
.buybox .bb-btn:active,.buybox .btn-int:active,.pdhead .btn-cb:active,
.midcta .btn-best:active{transform:translateY(1px)}
.qtyrow button:hover{background:#F0F5FB;border-color:var(--pri);color:var(--pri)}
.specjump:hover{text-decoration:underline;color:#B81F1F}
.pd-thumbs button{transition:border-color .15s,box-shadow .15s}
.pd-thumbs button:hover{box-shadow:0 0 0 2px rgba(214,40,40,.16)}
/* clickable text everywhere else - the reference gives every link a hover response */
#prodPage nav a:hover,.backtrail a:hover,.cpcrumb a:hover{text-decoration:underline}
.vblk .specjump:hover{text-decoration:underline}
.lrc a:hover{text-decoration:underline}

/* ---------- v130: Quick Links opens on hover ---------- */
.qlbtn:hover{color:var(--pri)}
.qlwrap.on .qlbtn{color:var(--pri)}
/* the gap between the trigger and the panel is part of the menu, so the pointer can cross it */
.qlwrap:after{content:"";position:absolute;top:100%;right:0;width:264px;height:12px}

/* ---------- v131: another notch off the padding ---------- */
.buybox .bb-btn{padding:7px 12px}
.buybox .btn-int{padding:7px 12px}
.buybox .btn-latest{padding:6px 11px}   /* 5px put it at 27px; a tap target needs 28+ */
.buybox .bb-s{padding:5px 8px}
.pdhead .btn-cb{padding:6px 12px}       /* same - 27px was below the tappable floor */
.midcta .btn-best{padding:7px 16px}
.btn-quotes{padding:8px}
.buybox .sold{padding:10px 12px}
.buybox{padding:14px}
.qtyrow{margin:11px 0 10px}

/* ---------- v131: the price block, at product-lsw's measured numbers ---------- */
.pblock{margin:0 0 4px}
.pb-incl{font-size:13px;font-weight:400;color:#777;line-height:1.25}
.pb-main{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:2px 0}
.pb-now{font-size:30px;font-weight:900;color:#212121;letter-spacing:-.8px;line-height:1.1}
.pb-gst{font-size:14px;font-weight:700;color:#555}
.pb-mrp{font-size:13.5px;color:#555;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.pb-mrp s{color:#999}
.pb-off{color:#0F9D58;font-weight:700}
/* the placeholder marker. Amber, not grey: it has to be read, not skimmed past. */
.pb-flag{display:block;font-size:11.4px;line-height:1.55;color:#8A6100;background:#FFF8E6;
  border:1px solid #F2DFAE;border-radius:7px;padding:7px 10px;margin:0 0 12px}
.pb-flag b{color:#6B4B00}
.pd-mid .pblock .pb-now{font-size:34px}
.pd-mid .pb-flag{max-width:62ch}
.buybox .pb-flag .pb-long{display:none}   /* the long half only where the column is wide */
.buybox .pb-flag{padding:6px 9px;margin-bottom:10px}


/* ---------- v133: third padding cut. 28px is the floor - below it a finger misses. ---------- */
.buybox .bb-btn{padding:6px 11px}
.buybox .btn-int{padding:6px 11px}
.buybox .btn-latest{padding:6px 10px}   /* horizontal only - 5px vertical hits 27px */
.buybox .bb-s{padding:4px 8px}
.pdhead .btn-cb{padding:6px 11px}       /* same: these two are already on the floor */
.midcta .btn-best{padding:6px 14px}
.buybox{padding:13px}
.buybox .sold{padding:9px 11px}
.qtyrow{margin:10px 0 9px}

/* ---------- v133: the main image fills its box ----------
   The five replacements are landscape or portrait photographs rather than 320px squares, so
   the box gets to use its full width instead of centring a small circle in it. */
.pd-main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.vshot img{max-width:100%;max-height:100%;object-fit:contain}


/* ---------- v137: buttons the width of their own text ---------- */
.buybox .bb-btn,
.buybox .btn-int,
.buybox .btn-latest,
.pdhead .btn-cb,
.midcta .btn-best,
.btn-quotes{
  width:fit-content;
  max-width:100%;          /* a long label wraps inside the column, never past it */
  padding:7px 16px;
  font-size:12.4px;
  font-weight:700;
}
.buybox .bb-s{width:fit-content;max-width:100%;padding:5px 12px;font-size:11.4px}
/* the two-up row was a 50/50 grid; let each half take only what it needs */
.buybox .bb-row{display:flex;gap:8px;flex-wrap:wrap}
.buybox .askrow{gap:10px}

.buybox .bb-btn,.buybox .btn-int,.buybox .btn-latest,.buybox .bb-s{margin-right:auto}
.buybox .bb-row{justify-content:flex-start}


/* ---------- v139: range-page product blocks - buttons the width of their own text ---------- */
.vright .bb-btn,
.vright .btn-int,
.vright .btn-latest,
.vright .bb-s{
  width:fit-content;
  max-width:100%;          /* a long label wraps inside the block, never past it */
  margin-right:auto;       /* flush left, matching v138 on the product page */
}
.vright .askrow{gap:10px}
.vright .bb-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}

/* A: the range page keeps its own, larger scale - only the width changes. */


/* ---------- v140: category banner in the reference's compact style ---------- */

/* the crumb strip stops being its own strip and becomes the top of the band */
.cpcrumb.cpdark-crumb{background:#0E1B2C;border-bottom:0;font-size:12.4px}
.cpcrumb.cpdark-crumb .wrap{padding-top:15px;padding-bottom:0}

/* one column, no photo column, and the band's own padding takes over */
.cphero.cpdark{border-bottom:0}
.cphero .wrap.cphero-in{grid-template-columns:1fr;gap:0;padding-top:9px;padding-bottom:24px}

/* the three things the reference does not have */
.cphero .cpkick{display:none}
.cphero .cpacts{display:none}
.cphero .cpshot{display:none}

/* the reference's type */
.cphero.cpdark h1{font-size:27px;font-weight:800;line-height:1.2;margin-bottom:7px}
.cphero.cpdark .cph-lead{font-size:13.6px;line-height:1.55;margin:0}
@media(max-width:900px){
  .cphero.cpdark h1{font-size:21px}
  .cphero.cpdark .cph-lead{font-size:12.6px}
}

/* A: the category description goes too - the band holds crumb, heading and lead only. */
.cphero .wrap.cphero-in>div>p:not(.cph-lead){display:none}

/* ---------- v142: new lines, tiles, search ---------- */

/* --- the Three New Lines cards, rebuilt as category entries --- */
.nl3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.nlc2{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:box-shadow .18s,transform .18s;
  box-shadow:0 1px 2px rgba(20,35,60,.05)}
.nlc2:hover{box-shadow:0 10px 26px rgba(20,35,60,.13);transform:translateY(-2px)}
.nlc2-top{display:flex;align-items:center;gap:13px;padding:17px 18px 0}
.nlc2-ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:none}
.nlc2-ic svg{width:22px;height:22px}
.nlc2-top h3{font-size:17.5px;font-weight:800;color:var(--dark);margin:0;line-height:1.25}
.nlc2-n{font-size:11.6px;font-weight:700;color:var(--mut);margin-top:3px;letter-spacing:.2px}
.nlc2-b{padding:13px 18px 0;font-size:13.4px;line-height:1.65;color:var(--mut);flex:1}
.nlc2-subs{display:flex;flex-wrap:wrap;gap:6px;padding:13px 18px 0}
.nlc2-subs span{font-size:11.6px;font-weight:600;color:#44607F;background:#F1F5FA;
  border:1px solid #E2EAF3;border-radius:999px;padding:4px 10px}
.nlc2-note{margin:13px 18px 0;font-size:11.8px;line-height:1.55;color:#8A6100;
  background:#FFF8E6;border:1px solid #F2DFA8;border-radius:9px;padding:8px 10px}
.nlc2-act{display:flex;gap:9px;padding:15px 18px 18px;margin-top:auto}
.nlc2-open{width:fit-content;max-width:100%;padding:8px 15px;font-size:12.6px;font-weight:700;
  border-radius:9px;border:0;color:#fff;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px}
.nlc2-open svg{width:13px;height:13px}
.nlc2-ask{width:fit-content;max-width:100%;padding:8px 15px;font-size:12.6px;font-weight:700;
  border-radius:9px;background:#fff;border:1.5px solid var(--line);color:var(--dark);cursor:pointer}
.nlc2-ask:hover{border-color:var(--pri);color:var(--pri)}
@media(max-width:1000px){.nl3{grid-template-columns:1fr;gap:16px}}

/* --- the amber "indicative list" strip these pages carry --- */
.nlbar{background:#FFF8E6;border:1px solid #F2DFA8;border-radius:10px;padding:11px 14px;
  font-size:12.8px;line-height:1.6;color:#8A6100;margin:0 0 16px}
.nlbar b{color:#6B4B00}
#catPage .clmain>.nlbar{margin-top:2px}

/* --- the generated photo panel should sit like a photo, not be cropped like one --- */
.nlph img,img.nlph{object-fit:contain;background:#F4F6F9}

/* --- search --- */
.h2-search{position:relative}
.sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:120;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(20,35,60,.19);
  overflow:hidden;display:none}
.sugg.on{display:block}
.sugg-h{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--mut);padding:10px 14px 6px;background:#FAFCFE}
.sugg-i{display:flex;align-items:center;gap:11px;padding:9px 14px;cursor:pointer;
  border:0;background:none;width:100%;text-align:left;text-decoration:none}
.sugg-i:hover,.sugg-i.sel{background:#EEF4FB}
.sugg-i img{width:38px;height:38px;object-fit:contain;background:#F4F6F9;border-radius:7px;
  flex:none;border:1px solid var(--line)}
.sugg-i .sg-t{font-size:13px;font-weight:600;color:var(--dark);line-height:1.35}
.sugg-i .sg-c{font-size:11.4px;color:var(--mut);margin-top:2px}
.sugg-i mark{background:#FFF1C2;color:inherit;padding:0 1px;border-radius:2px}
.sugg-none{padding:16px 14px;font-size:13px;color:var(--mut)}
.sugg-foot{padding:9px 14px;font-size:11.8px;color:var(--mut);background:#FAFCFE;
  border-top:1px solid var(--line)}

/* ---------- v144: the dropdown escapes the hero; tile photos ---------- */

/* The panel now lives on <body> and is positioned in viewport coordinates, so it is no longer
   inside section.hero and cannot be clipped by its overflow:hidden. left/top/width are set
   from the input's rect in JS. */
.sugg{position:fixed;z-index:9999;overflow-y:auto;
  border:1px solid var(--line);border-radius:12px;background:#fff;
  box-shadow:0 18px 44px rgba(20,35,60,.22)}
.sugg-h{position:sticky;top:0}

/* the new tiles carry a photograph now, not an icon disc */
#catGrid .nl-ct{padding:0;overflow:hidden}
#catGrid .nl-ct img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

/* The row's two lines were both <span>, so they ran together as one string -
   "Semi Automatic Strapping MachinesCategory". They have to stack. */
.sugg-i>span{display:flex;flex-direction:column;min-width:0;gap:2px}
.sugg-i .sg-t,.sugg-i .sg-c{display:block}
.sugg-i .sg-t{line-height:1.35}

/* the photo warning on a product */
.phwarn{background:#FEF2F2;border:1px solid #FCA5A5;border-radius:10px;padding:11px 14px;
  font-size:12.8px;line-height:1.6;color:#9F1239;margin:0 0 14px}
.phwarn b{color:#7F1D1D}


/* ---------- v146: photographs on the new-line products ---------- */
/* These are cut-outs on transparency, and several are wide flat-lays. contain, not cover, so
   nothing is cropped off the edge of a group shot. */
#prodPage .pd-main img[data-nlph="1"],
.vblk .vshot img[data-nlph="1"]{object-fit:contain;background:transparent}


/* ---------- v148: chat with us ---------- */
.pfchat{position:fixed;right:20px;bottom:20px;z-index:8000;display:flex;align-items:center;
  gap:11px;background:#0E1B2C;color:#fff;border:none;border-radius:40px;
  padding:9px 18px 9px 9px;cursor:pointer;font-family:inherit;
  box-shadow:0 10px 28px rgba(14,27,44,.34)}
.pfchat:hover{background:#16283F}
.pfchat .cav{width:38px;height:38px;border-radius:50%;background:#F5A100;display:flex;
  align-items:center;justify-content:center;flex:0 0 auto}
.pfchat .cav svg{width:20px;height:20px;fill:#0E1B2C}
.pfchat .ctx{text-align:left;line-height:1.25}
.pfchat .ctx b{display:block;font-size:13.2px;font-weight:800}
.pfchat .ctx span{font-size:10.8px;color:#8FD7A8}
.pfchat .ctx span::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#3ADF7C;margin-right:5px;vertical-align:middle}
.pfchat.off .ctx span{color:#F1C9A0}
.pfchat.off .ctx span::before{background:#E9A23B}

.pfcb{position:fixed;right:20px;bottom:20px;width:392px;max-width:calc(100vw - 24px);
  background:#fff;border-radius:14px;overflow:hidden;z-index:8001;display:none;
  box-shadow:0 22px 60px rgba(14,27,44,.36)}
.pfcb.on{display:block}
.pfcb-h{background:#0E1B2C;color:#fff;padding:15px 16px;display:flex;align-items:flex-start;gap:12px}
.pfcb-h .cav{width:38px;height:38px;border-radius:10px;background:#F5A100;display:flex;
  align-items:center;justify-content:center;flex:0 0 auto}
.pfcb-h .cav svg{width:22px;height:22px;fill:#0E1B2C}
.pfcb-h b{font-size:14.6px;font-weight:800;line-height:1.25;display:block}
.pfcb-h small{font-size:11.6px;color:#9FB0C0;display:block;margin-top:2px}
.pfcb-x{margin-left:auto;background:none;border:none;color:#8FA0B0;font-size:20px;
  cursor:pointer;line-height:1;font-family:inherit}
.pfcb-body{background:#F6F8FA;padding:16px;min-height:250px;max-height:min(46vh,340px);overflow-y:auto}
.pfcb-msg{background:#fff;border:1px solid #E4E9EE;border-radius:12px;padding:11px 13px;
  font-size:13.2px;line-height:1.65;color:#33414F;margin-bottom:11px;max-width:92%;
  box-shadow:0 1px 3px rgba(0,0,0,.04)}
.pfcb-me{background:#0E1B2C;color:#fff;border:none;margin-left:auto;max-width:80%}
.pfcb-note{background:#FFF8E6;border-color:#F2DFA8;color:#8A6100;font-size:12.2px}
.pfcb-q{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.pfcb-q button{background:#fff;border:1px solid #DBE2E9;color:#33414F;font-size:12.2px;
  font-weight:600;padding:7px 12px;border-radius:22px;cursor:pointer;font-family:inherit;
  text-align:left}
.pfcb-q button:hover{border-color:#F5A100;color:#8A6100}
.pfcb-f{display:flex;padding:12px;gap:10px;align-items:center;background:#fff;
  border-top:1px solid #E7EBEF}
.pfcb-f input{flex:1;min-width:0;border:1.5px solid #DBE2E9;border-radius:26px;
  padding:11px 15px;font-size:13.2px;font-family:inherit;outline:none;background:#F9FAFB}
.pfcb-f input:focus{border-color:#F5A100;background:#fff}
.pfcb-f button{background:#F5A100;border:none;color:#0E1B2C;width:42px;height:42px;
  border-radius:50%;font-size:16px;cursor:pointer;flex:0 0 auto;padding:0;display:flex;
  align-items:center;justify-content:center;font-family:inherit;font-weight:800}
.pfcb-acts{display:flex;background:#fff;border-top:1px solid #E8ECF0}
.pfcb-acts a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 4px 11px;font-size:11.4px;font-weight:700;color:#5B6773;
  border-right:1px solid #EEF1F4;text-decoration:none;cursor:pointer}
.pfcb-acts a:last-child{border-right:none}
.pfcb-acts a svg{width:19px;height:19px}
.pfcb-acts a:hover{background:#FAFBFC;color:#0E1B2C}
@media(max-width:520px){
  .pfchat{right:12px;bottom:12px}
  .pfcb{right:10px;left:10px;bottom:12px;width:auto;max-width:none}
  .pfcb-body{min-height:200px}
}

/* the cup sealer's photograph and the page disagree until KUMAR says which is right */
.mfgwarn{background:#FFF8E6;border:1px solid #F2DFA8;border-radius:10px;padding:11px 14px;
  font-size:12.6px;line-height:1.6;color:#8A6100;margin:0 0 14px}
.mfgwarn b{color:#6B4B00}


/* ---------- v150: card design D (tile pair) ---------- */
.nl3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.nld{background:#fff;border:1px solid #E4E9EE;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(20,35,60,.05);
  transition:box-shadow .18s,transform .18s}
.nld:hover{box-shadow:0 12px 30px rgba(20,35,60,.14);transform:translateY(-2px)}
.nld-h{padding:15px 17px 0}
.nld-h h3{font-size:17px;font-weight:800;margin:0;color:var(--dark)}
.nld-g{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:13px 17px 0}
.nld-t{border:1px solid #EDF1F5;border-radius:11px;overflow:hidden;background:#F6F8FA;
  text-decoration:none;display:block}
.nld-t .ph{height:112px;display:flex;align-items:center;justify-content:center;padding:11px}
.nld-t .ph img{max-width:100%;max-height:100%;object-fit:contain}
.nld-t .cap{background:#fff;border-top:1px solid #EDF1F5;padding:8px 10px;min-height:44px;
  display:flex;align-items:center;font-size:12.9px;font-weight:600;color:#41505F;line-height:1.35}
.nld-t:hover .cap{color:var(--pri)}
.nld-f{padding:15px 17px 17px;margin-top:auto}
.nld-btn{width:fit-content;max-width:100%;padding:9px 17px;font-size:12.8px;font-weight:800;
  border-radius:9px;border:0;color:#fff;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px}
.nld-btn svg{width:13px;height:13px}
@media(max-width:1000px){.nl3{grid-template-columns:1fr;gap:16px}}

/* ---------- v154: smooth scrolling, smooth route changes, the reference's action row ------ */
html{scroll-behavior:smooth}

/* the router swaps .page.on; fade the incoming one in rather than snapping */
.page{animation:pfIn .22s ease-out}
@keyframes pfIn{from{opacity:.35}to{opacity:1}}

/* Contact / WhatsApp / Call, as the reference has them */
.pfcb-acts a{gap:5px;font-size:11.6px;font-weight:700;color:#5B6773}
.pfcb-acts a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pfcb-acts a.va-wa{color:#1FAE55}
.pfcb-acts a.va-contact:hover{color:#0E1B2C}
.pfcb-acts a.va-wa:hover{background:#F2FBF5}
.pfcb-acts a.va-call:hover{color:#0E1B2C}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .page{animation:none}
}

/* ---------- v156: the bulk strip scrolls ---------- */
.brow{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,
  transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%)}
.brow-track{display:flex;gap:14px;width:max-content;animation:bmarq 46s linear infinite}
.brow:hover .brow-track,
.brow:focus-within .brow-track{animation-play-state:paused}
@keyframes bmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brow .bcard{flex:0 0 auto}

/* a strip that keeps sliding while someone is reading it is a trap, not a flourish */
@media(prefers-reduced-motion:reduce){
  .brow-track{animation:none;flex-wrap:wrap;width:auto}
  .brow{-webkit-mask-image:none;mask-image:none}
}


/* ---------- v159: the bulk strip runs the other way ---------- */
/* The track is [list][copy]. Animating -50% -> 0 walks from the copy back onto the original,
   which moves the cards RIGHT and brings new ones in from the left, with no seam. */
@keyframes bmarq{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Every card is the same size. The strip used to hold eleven cards whose photographs happened
   to be squarish; with 28 the aspect ratios run from 316x136 to 900x395, and because .bcard is
   flex:0 0 auto the cards came out anywhere from 129px to 339px wide. Fix the box and let the
   picture fit inside it. */
.brow .bcard{width:186px;flex:0 0 186px}
.brow .bcard .bi{width:100%;height:124px;display:flex;align-items:center;justify-content:center}
.brow .bcard .bi img{width:100%;height:100%;object-fit:contain}
.brow .bcard b{display:block;line-height:1.3}

/* One card carries a photograph rather than a cut-out on white: it fills the face instead of
   being letterboxed inside it. */
.brow .bcard .bi img.bi-cover{object-fit:cover}

/* ---------- v159: back to top, frosted ---------- */
.totop{background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(11px) saturate(150%);backdrop-filter:blur(11px) saturate(150%);
  border:1px solid rgba(14,27,44,.20);color:var(--dark);
  box-shadow:0 6px 18px rgba(8,14,22,.16)}
.totop:hover{background:rgba(255,255,255,.72);border-color:rgba(14,27,44,.34)}
.totop svg{filter:drop-shadow(0 1px 1px rgba(255,255,255,.55))}
/* Safari under 15.4 and Firefox with backdrop-filter off get a plain translucent fill rather
   than a button nobody can see */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .totop{background:rgba(255,255,255,.88)}
}

/* ---------- v159: the deal card price line ---------- */
/* Two lines by design: the card is 150px wide and one line wrapped wherever it felt like,
   leaving the * stranded on a line of its own. */
.pfrom{display:block;margin-top:5px;font-size:11.4px;font-weight:600;color:var(--mut);
  letter-spacing:.3px;line-height:1.1;text-transform:uppercase}
.pfrom b{display:block;margin-top:2px;font-size:15.5px;font-weight:800;color:var(--dark);
  letter-spacing:0;text-transform:none;white-space:nowrap}
.pfrom i{font-style:normal;color:#9AA3AC;font-weight:700;font-size:12px;vertical-align:2px}
/* no box, no amber - one quiet line, because the figures above it are not quotations */
.pfnote{margin:9px 2px 0;padding:0;background:none;border:0;font-size:10.9px;line-height:1.5;
  color:#8A939D;font-weight:500}
.pfnote b{color:#79828C;font-weight:700}


/* ---------- v164: the seal turns, the thumb counter-poises ---------- */
/* fill-box is not optional: without it the origin is the SVG user-space (0,0) and the badge
   swings round the corner of the page instead of turning on the spot. */
.tseal .ros-ring,.tseal .ros-thumb{transform-box:fill-box;transform-origin:center}
.tseal .ros-ring{animation:pfRos 10s linear infinite}
/* the thumb tips the OTHER way as it rises, so it still reads upright while the ring moves */
.tseal .ros-thumb{animation:pfThumb 2.6s ease-in-out infinite}
@keyframes pfRos{to{transform:rotate(360deg)}}
@keyframes pfThumb{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -1.35px;rotate:-7deg}}

/* This sits in the middle of a band of body copy. Something that never stops moving there is a
   problem for some readers, not a flourish. */
@media(prefers-reduced-motion:reduce){
  .tseal .ros-ring,.tseal .ros-thumb{animation:none;translate:none;rotate:none}
}


/* ---------- v165: the expandable sections do not colour on hover ---------- */
/* Two rules did it, both declared late: `.acc-h:hover h3{color:var(--pri)}`. The pointer cursor
   and the +/- still say the row is clickable, so nothing is lost by taking the colour off. */
.acc-h:hover h3,.ftr .acc-h:hover h3{color:inherit}
.acc-h:hover,.ftr .acc-h:hover{background:transparent}
/* the open row still darkens - that is state, not hover, and it is worth keeping */
.acc-item.on .acc-h h3{color:#111}

/* the family entries added to the top bar sit exactly like the ones already there */
.h2-mega-in a.v165{white-space:nowrap}


/* ---------- v166: Help Centre ---------- */
.hlp-hero{background:var(--pri-soft);border-bottom:1px solid var(--line);padding:30px 0 34px}
.hlp-crumb{font-size:12.5px;color:var(--mut);display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.hlp-crumb a{color:var(--pri);font-weight:500}
.hlp-crumb a:hover{text-decoration:underline}
.hlp-crumb .hcs{color:#9AA6B2}
.hlp-kick{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:var(--pri);background:#fff;border:1px solid #CFDDEE;
  border-radius:20px;padding:4px 12px}
.hlp-hero h1{font-size:34px;line-height:1.18;font-weight:700;color:var(--dark);margin:11px 0 0;
  max-width:900px;letter-spacing:-.4px}
.hlp-lede{margin-top:12px;max-width:860px;font-size:15px;line-height:1.65;color:#3E4854}

.hlp-body{padding:34px 0 60px}
.hlp-grid{display:grid;grid-template-columns:262px minmax(0,1fr);gap:44px;align-items:start}
.hlp-side{position:sticky;top:96px}
.hlp-sidein{border:1px solid var(--line);border-radius:10px;background:#fff;padding:16px 14px}
.hlp-gl{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--mut);
  margin:14px 0 7px;padding:0 4px}
.hlp-sidein .hlp-gl:first-child{margin-top:0}
.hlp-sidein ul{display:flex;flex-direction:column;gap:1px}
.hlp-sidein a{display:block;padding:6px 9px;border-radius:6px;font-size:13.2px;color:var(--txt);line-height:1.4}
.hlp-sidein a:hover{background:var(--soft);color:var(--pri)}
.hlp-sidein a.on{background:var(--pri);color:#fff;font-weight:600}

.hlp-main{max-width:860px;font-size:14.4px;line-height:1.72}
.hlp-main>p{margin-bottom:14px;color:#3E4854}
.hlp-sec{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.hlp-main>.hlp-sec:first-child{margin-top:6px;padding-top:0;border-top:0}
.hlp-sec h2{font-size:20.5px;font-weight:700;color:var(--dark);line-height:1.3;margin-bottom:11px;
  letter-spacing:-.2px}
.hlp-sec p{margin-bottom:12px;color:#3E4854}
.hlp-sec p:last-child{margin-bottom:0}
.hlp-ul{margin:4px 0 14px;padding-left:2px;display:flex;flex-direction:column;gap:9px}
.hlp-ul li{position:relative;padding-left:19px;color:#3E4854}
.hlp-ul li:before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:2px;
  background:var(--acc)}
.hlp-ul li b,.hlp-main b{color:var(--dark);font-weight:650}

.hlp-qa{display:flex;flex-direction:column;gap:2px;margin:6px 0 4px}
.hlp-qi{padding:14px 0;border-top:1px dashed var(--line)}
.hlp-qi:first-child{border-top:0;padding-top:2px}
.hlp-qi h3{font-size:14.6px;font-weight:650;color:var(--dark);margin-bottom:5px;line-height:1.45}
.hlp-qi p{margin:0;color:#4A545F}
.hlp-faq .hlp-qi h3{color:var(--pri-d)}

.hlp-note{background:var(--acc-soft);border-left:3px solid var(--acc);border-radius:0 7px 7px 0;
  padding:11px 14px;font-size:13.4px;color:#5C4712;margin-top:14px}

.hlp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hlp-chips a{border:1px solid #CFDDEE;background:#fff;color:var(--pri);border-radius:20px;
  padding:6px 14px;font-size:12.8px;font-weight:550;line-height:1.4}
.hlp-chips a:hover{background:var(--pri);color:#fff;border-color:var(--pri)}

.hlp-cta{margin-top:34px;border:1px solid var(--line);background:var(--soft);border-radius:12px;
  padding:22px 24px}
.hlp-cta h2{font-size:18.5px;font-weight:700;color:var(--dark);margin-bottom:7px}
.hlp-cta p{color:#3E4854;margin-bottom:15px}
.hlp-cbtn{display:flex;flex-wrap:wrap;gap:10px}
.hlp-cbtn .btn{padding:10px 20px;font-size:13px}
.hlp-rel{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.hlp-rel .hlp-gl{margin:0}

@media(max-width:1000px){
  .hlp-grid{grid-template-columns:1fr;gap:26px}
  .hlp-side{position:static}
  .hlp-sidein{padding:14px 12px}
  .hlp-hero h1{font-size:27px}
}
@media(max-width:600px){
  .hlp-hero{padding:22px 0 26px}
  .hlp-hero h1{font-size:23px}
  .hlp-lede{font-size:14px}
  .hlp-main{font-size:14px}
  .hlp-sec h2{font-size:18px}
}


/* ---------- v167: the AI-search layer ---------- */
.aiq{background:linear-gradient(180deg,var(--pri-soft),#fff);border:1px solid #CFDDEE;
  border-radius:12px;padding:20px 22px;margin:26px 0 4px}
.aiq-k{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;color:var(--pri);background:#fff;
  border:1px solid #CFDDEE;border-radius:20px;padding:4px 12px;margin-bottom:11px}
.aiq-k svg{width:13px;height:13px}
.aiq p{font-size:14.6px;line-height:1.72;color:#2E3843;margin:0 0 9px;max-width:900px}
.aiq p:last-child{margin-bottom:0}
.aiq p b{color:var(--dark);font-weight:650}
.aiq-f{margin-top:13px;padding-top:12px;border-top:1px dashed #CFDDEE;display:flex;
  flex-wrap:wrap;gap:16px}
.aiq-f span{font-size:12.6px;color:var(--mut)}
.aiq-f span b{display:block;color:var(--dark);font-size:13.2px;font-weight:650;margin-top:1px}

.aifaq{padding:44px 0}
.aifaq .aif-h{font-size:23px;font-weight:700;color:var(--dark);margin-bottom:4px;letter-spacing:-.2px}
.aifaq .aif-s{font-size:13.4px;color:var(--mut);margin-bottom:20px}
.aif-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;max-width:1200px}
.aif-i{padding:15px 0;border-top:1px solid var(--line)}
.aif-i h3{font-size:14.8px;font-weight:650;color:var(--dark);margin-bottom:5px;line-height:1.45}
.aif-i p{font-size:14px;line-height:1.68;color:#4A545F;margin:0}
.aig{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.aig-l{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--mut);margin-bottom:10px}
.aig-c{display:flex;flex-wrap:wrap;gap:8px}
.aig-c a{border:1px solid #CFDDEE;background:#fff;color:var(--pri);border-radius:20px;
  padding:6px 14px;font-size:12.8px;font-weight:550;line-height:1.4}
.aig-c a:hover{background:var(--pri);color:#fff;border-color:var(--pri)}
@media(max-width:900px){
  .aif-list{grid-template-columns:1fr;gap:0}
  .aiq{padding:16px 17px;margin:20px 0 2px}
  .aiq p{font-size:14px}
  .aifaq{padding:32px 0}
  .aifaq .aif-h{font-size:20px}
}


/* ---------- v168: testimonials ---------- */
.tst-wrap{padding:26px 0 60px}
.tst-note{background:var(--acc-soft);border:1px solid #F0D9A8;border-left:3px solid var(--acc);
  border-radius:0 8px 8px 0;padding:13px 16px;margin-bottom:22px;font-size:13.4px;color:#5C4712;
  line-height:1.65;max-width:1000px}
.tst-note b{color:#3F3009}

.tst-sum{display:grid;grid-template-columns:auto minmax(220px,340px) minmax(0,1fr);gap:34px;
  align-items:center;border:1px solid var(--line);border-radius:12px;padding:20px 24px;
  background:var(--soft);margin-bottom:20px}
.tst-big{text-align:center;min-width:120px}
.tst-big b{display:block;font-size:44px;font-weight:700;color:var(--dark);line-height:1;
  letter-spacing:-1.5px}
.tst-big .tst-st{color:var(--acc);font-size:16px;letter-spacing:2px;margin-top:5px}
.tst-big small{display:block;font-size:12.4px;color:var(--mut);margin-top:5px}
.tst-dist{display:flex;flex-direction:column;gap:5px}
.tst-row{display:grid;grid-template-columns:34px 1fr 40px;gap:9px;align-items:center;font-size:12.4px;
  color:var(--mut)}
.tst-tr{height:7px;border-radius:4px;background:#E6EBF1;overflow:hidden}
.tst-tr i{display:block;height:100%;background:var(--acc);border-radius:4px}
.tst-facts{display:flex;flex-wrap:wrap;gap:22px}
.tst-facts span{font-size:12.6px;color:var(--mut)}
.tst-facts span b{display:block;color:var(--dark);font-size:14px;font-weight:650;margin-top:2px}

.tst-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.tst-tabs{display:flex;flex-wrap:wrap;gap:7px}
.tst-tabs button{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 15px;
  font-size:12.8px;font-weight:550;color:var(--txt);line-height:1.4}
.tst-tabs button:hover{border-color:var(--pri);color:var(--pri)}
.tst-tabs button[aria-pressed="true"]{background:var(--pri);border-color:var(--pri);color:#fff}
.tst-bar select,.tst-bar input{border:1px solid var(--line);border-radius:7px;padding:8px 11px;
  font-size:13px;background:#fff;min-width:170px}
.tst-bar input{min-width:220px}
.tst-bar .hsp{flex:1}
.tst-count{font-size:12.8px;color:var(--mut);white-space:nowrap}

.tst-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tst-c{border:1px solid var(--line);border-radius:11px;padding:17px 18px;background:#fff;
  display:flex;flex-direction:column;gap:9px}
.tst-c.is-sample{background:repeating-linear-gradient(135deg,#FCFCFD,#FCFCFD 9px,#F6F7F9 9px,#F6F7F9 18px);
  border-style:dashed}
.tst-h{display:flex;gap:11px;align-items:center}
.tst-av{width:38px;height:38px;border-radius:50%;background:var(--pri-soft);color:var(--pri);
  display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.tst-c.is-sample .tst-av{background:#EDEFF2;color:#9AA6B2}
.tst-n{min-width:0}
.tst-n b{display:block;font-size:13.8px;color:var(--dark);font-weight:650;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tst-n small{font-size:12px;color:var(--mut)}
.tst-st{color:var(--acc);letter-spacing:1.5px;font-size:13px}
.tst-st i{color:#D6DCE3;font-style:normal}
.tst-b{font-size:13.6px;line-height:1.65;color:#3E4854;margin:0;flex:1}
.tst-c.is-sample .tst-b{color:#8F99A4;font-style:italic}
.tst-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11.6px;color:var(--mut);
  border-top:1px dashed var(--line);padding-top:9px}
.tst-mc{background:var(--pri-soft);color:var(--pri-d);border-radius:5px;padding:2px 8px;
  font-weight:600;font-size:11.4px}
.tst-vf{color:var(--ok);font-weight:650}
.tst-sm{background:#EDEFF2;color:#6B7683;border-radius:5px;padding:2px 8px;font-weight:700;
  font-size:10.4px;letter-spacing:.6px}
.tst-empty{border:1px dashed var(--line);border-radius:11px;padding:34px 22px;text-align:center;
  color:var(--mut);font-size:13.6px}

.tst-pag{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:26px}
.tst-pag button{min-width:36px;height:36px;padding:0 10px;border:1px solid var(--line);
  background:#fff;border-radius:7px;font-size:13px;font-weight:600;color:var(--txt)}
.tst-pag button:hover:not(:disabled){border-color:var(--pri);color:var(--pri)}
.tst-pag button[aria-current="page"]{background:var(--pri);border-color:var(--pri);color:#fff}
.tst-pag button:disabled{opacity:.4;cursor:default}
.tst-pag .tst-gap{align-self:center;color:var(--mut);padding:0 3px}

.tst-ask{margin-top:34px;border:1px solid var(--line);background:var(--soft);border-radius:12px;
  padding:22px 24px;max-width:1000px}
.tst-ask h2{font-size:19px;font-weight:700;color:var(--dark);margin-bottom:6px}
.tst-ask p{font-size:13.8px;line-height:1.68;color:#3E4854;margin-bottom:15px}
.tst-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.tst-form label{font-size:12.2px;font-weight:600;color:var(--dark);display:block;margin-bottom:4px}
.tst-form input,.tst-form select,.tst-form textarea{width:100%;border:1px solid var(--line);
  border-radius:7px;padding:9px 11px;font-size:13.2px;background:#fff}
.tst-form textarea{min-height:92px;resize:vertical}
.tst-full{grid-column:1/-1}
.tst-send{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px}
.tst-send .btn{padding:10px 20px;font-size:13px}
.tst-hint{font-size:12.2px;color:var(--mut);margin-top:10px;line-height:1.6}

@media(max-width:1100px){ .tst-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:900px){
  .tst-sum{grid-template-columns:1fr;gap:18px}
  .tst-form{grid-template-columns:1fr}
}
@media(max-width:640px){
  .tst-list{grid-template-columns:1fr}
  .tst-bar input,.tst-bar select{min-width:0;width:100%}
}


/* ---------- v169: city pages ---------- */
.cty-hero{background:linear-gradient(180deg,var(--pri-soft),#F7FAFD)}
.cty-main{max-width:900px}
.cty-areas{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.cty-areas span{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 12px;
  font-size:12.8px;color:var(--txt)}
.cty-anote{font-size:13px;color:var(--mut)}

/* the city strip in the footer — crawlable links to every city page, on every page */
.cty-strip{border-top:1px solid rgba(255,255,255,.12);padding:20px 0 4px}
.cty-strip .cty-in{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.cty-strip b{font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  opacity:.75;margin-right:6px}
.cty-strip a{font-size:12.8px;opacity:.9;border:1px solid rgba(255,255,255,.18);border-radius:20px;
  padding:5px 13px;line-height:1.4}
.cty-strip a:hover{opacity:1;border-color:rgba(255,255,255,.45)}
@media(max-width:600px){ .cty-strip b{width:100%;margin-bottom:4px} }


/* ---------- v170: the trust band animates ---------- */

/* --- 1. the dot grid ---------------------------------------------------------------------
   The gradient stays as the resting state. The generated dots sit on top of it at the same
   27px pitch and pulse on a diagonal delay, so it reads as a wave crossing the block. */
.tb-dots i{position:absolute;width:3.6px;height:3.6px;border-radius:50%;background:#fff;
  opacity:.25;pointer-events:none}
.trustband.pf-anim .tb-dots i{animation:pfDotPulse 2.8s ease-in-out infinite}
@keyframes pfDotPulse{
  0%,100%{opacity:.20;transform:scale(.85)}
  50%    {opacity:.95;transform:scale(1.25)}
}

/* --- 2. the circles ----------------------------------------------------------------------
   A bright arc over each ring, rotating. The ring itself is left alone: .tb-r1 uses transform
   for its own centring, and rotating that element would move it off centre. */
.tb-arc{position:absolute;border:2px solid transparent;border-radius:50%;pointer-events:none;
  z-index:2;opacity:0;transition:opacity .6s ease .2s}
.trustband.pf-in .tb-arc{opacity:1}
.tb-arc-1{right:118px;top:52%;margin-top:-98px;width:196px;height:196px;
  border-top-color:rgba(255,255,255,.92)}
.tb-arc-2{right:-90px;top:-70px;width:360px;height:360px;
  border-right-color:rgba(255,255,255,.55)}
.trustband.pf-anim .tb-arc-1{animation:pfArc 14s linear infinite}
.trustband.pf-anim .tb-arc-2{animation:pfArc 26s linear infinite reverse}
@keyframes pfArc{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* the outer ring breathes; it carries no transform of its own, so this is safe */
.trustband.pf-anim .tb-r2{animation:pfRing 9s ease-in-out infinite}
@keyframes pfRing{
  0%,100%{transform:scale(1);opacity:1}
  50%    {transform:scale(1.045);opacity:.62}
}

/* the sweep behind the text drifts, very slowly. It already has rotate(-14deg), so the
   keyframe carries that rotation through rather than replacing it. */
.trustband.pf-anim .tb-sw{animation:pfSweep 16s ease-in-out infinite}
@keyframes pfSweep{
  0%,100%{transform:rotate(-14deg) translateX(0)}
  50%    {transform:rotate(-14deg) translateX(26px)}
}

/* --- 3. the fade-in ----------------------------------------------------------------------
   opacity:0 is scoped to .pf-anim, which the script adds. If the script never runs, the band
   renders exactly as it does today - readable, just not animated. */
.trustband.pf-anim .tb-in>h2,
.trustband.pf-anim .tb-in>.tb-sub,
.trustband.pf-anim .tb-in>.tseal,
.trustband.pf-anim .tb-in>.tb-txt{opacity:0}
.trustband.pf-in .tb-in>h2      {animation:pfUp .8s ease-out        forwards}
.trustband.pf-in .tb-in>.tb-sub {animation:pfUp .8s ease-out .15s   forwards}
.trustband.pf-in .tb-in>.tseal  {animation:pfUp .8s ease-out .30s   forwards}
.trustband.pf-in .tb-in>.tb-txt {animation:pfUp .8s ease-out .45s   forwards}
@keyframes pfUp{
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  .trustband.pf-anim .tb-dots i,
  .trustband.pf-anim .tb-arc,
  .trustband.pf-anim .tb-r2,
  .trustband.pf-anim .tb-sw{animation:none}
  .trustband.pf-anim .tb-in>h2,
  .trustband.pf-anim .tb-in>.tb-sub,
  .trustband.pf-anim .tb-in>.tseal,
  .trustband.pf-anim .tb-in>.tb-txt{opacity:1;animation:none;transform:none}
  .trustband .tb-arc{opacity:1}
}


/* ---------- v171: review cards, laid out the way KUMAR asked ---------- */
.tst-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tst-c{border:1px solid var(--line);border-radius:10px;padding:20px 22px;background:#fff;
  display:flex;flex-direction:column;gap:0}
.tst-c.is-sample{border-style:dashed}

.rv-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px}
.rv-score{flex:none;background:#0F9D58;color:#fff;border-radius:5px;padding:3px 9px;
  font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.2px;white-space:nowrap}
.rv-score i{font-style:normal;font-size:11px;margin-left:2px}
.rv-who{min-width:0;flex:1}
.rv-who b{display:block;font-size:14.2px;font-weight:700;color:var(--dark);line-height:1.35;
  letter-spacing:.2px}
.rv-who small{display:block;font-size:12.2px;color:var(--mut);margin-top:2px}
.rv-tag{flex:none;background:var(--pri-soft);color:var(--pri-d);border-radius:4px;
  padding:3px 9px;font-size:10.4px;font-weight:700;letter-spacing:.55px;text-transform:uppercase;
  line-height:1.5;max-width:190px;text-align:right}
.rv-tag.is-vf{background:#E7F5EC;color:#0B7A43}

.rv-body{font-size:13.7px;line-height:1.72;color:#3E4854;margin:0 0 14px;flex:1}
.rv-body b{color:var(--dark);font-weight:650}
.tst-c.is-sample .rv-body{color:#8F99A4;font-style:italic}

.rv-foot{font-size:12.3px;color:var(--mut);border-top:1px solid var(--line);padding-top:11px;
  display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.rv-foot .rv-vf{color:#0B7A43;font-weight:650}
.rv-foot .rv-sm{background:#EDEFF2;color:#6B7683;border-radius:4px;padding:2px 8px;
  font-weight:700;font-size:10.2px;letter-spacing:.6px}

/* the pager, Vedika's shape */
.tst-pag{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;
  margin-top:30px}
.tst-pag button{min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line);
  background:#fff;border-radius:7px;font-size:13.2px;font-weight:600;color:var(--txt)}
.tst-pag button:hover:not(:disabled){border-color:var(--pri);color:var(--pri)}
.tst-pag button[aria-current="page"]{background:var(--pri);border-color:var(--pri);color:#fff}
.tst-pag button:disabled{opacity:.4;cursor:default}
.tst-pag .tst-gap{align-self:center;color:var(--mut);padding:0 3px}
.tst-pag .pg-n{margin-left:14px;font-size:12.8px;color:var(--mut);white-space:nowrap}

@media(max-width:900px){ .tst-list{grid-template-columns:1fr} }
@media(max-width:560px){
  .rv-top{flex-wrap:wrap}
  .rv-tag{max-width:none;text-align:left;order:3;width:100%}
  .tst-pag .pg-n{width:100%;text-align:center;margin:8px 0 0}
}


/* ---------- v172: industrial-area pages ---------- */
.cty-loc{margin-top:10px;font-size:12.8px;font-weight:600;color:var(--pri-d);
  background:#fff;border:1px solid #CFDDEE;border-radius:20px;padding:5px 14px;display:inline-block}
.cty-strip .cty-in{gap:8px}


/* ---------- v173: the city and industrial-area strips, styled for a light footer ---------- */
.cty-strip{border-top:1px solid var(--line);padding:16px 0;background:transparent}
.cty-strip:first-of-type{padding-top:20px}
.cty-strip .cty-in{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cty-strip b{font-size:11px;font-weight:700;letter-spacing:.85px;text-transform:uppercase;
  color:var(--mut);margin-right:8px;opacity:1}
.cty-strip a{font-size:12.6px;color:var(--pri);background:#fff;border:1px solid #CFDDEE;
  border-radius:20px;padding:5px 13px;line-height:1.45;opacity:1;font-weight:500}
.cty-strip a:hover{background:var(--pri);border-color:var(--pri);color:#fff}
.cty-strip.is-area{border-top-style:dashed}

/* kept for a dark footer theme, should the palette ever change */
.ftr[data-dark] .cty-strip{border-top-color:rgba(255,255,255,.14)}
.ftr[data-dark] .cty-strip b{color:rgba(255,255,255,.72)}
.ftr[data-dark] .cty-strip a{background:transparent;border-color:rgba(255,255,255,.2);
  color:rgba(255,255,255,.92)}
.ftr[data-dark] .cty-strip a:hover{background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.45);color:#fff}

@media(max-width:700px){
  .cty-strip b{width:100%;margin:0 0 6px}
  .cty-strip a{font-size:12px;padding:4px 11px}
}

/* ===== v183 careers ===================================================================== */
.car-hero-btn{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 6px}
.car-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:6px 0 4px}
.car-card{border:1px solid var(--line);border-radius:12px;padding:16px 16px 14px;background:#fff}
.car-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.car-top h3{font-size:16px;font-weight:700;color:var(--dark);line-height:1.3;margin:0}
.car-fn{flex:none;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--pri);background:rgba(11,77,162,.08);border-radius:999px;padding:4px 9px}
.car-meta{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0 8px}
.car-meta span{font-size:12px;color:#5b6572;background:#f4f6f9;border-radius:6px;padding:3px 8px}
.car-card p{font-size:13.5px;line-height:1.62;color:#3d4753;margin:0 0 8px}
.car-sk{font-size:11px!important;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#77828f;margin:10px 0 5px!important}
.car-card ul{margin:0 0 12px;padding-left:17px}
.car-card li{font-size:13px;line-height:1.6;color:#3d4753;margin-bottom:3px}
.car-apply{display:inline-block;font-size:13px;font-weight:700;color:var(--pri);text-decoration:none}
.car-apply:hover{text-decoration:underline}
.car-form{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fbfcfe;margin:6px 0}
.car-fnote{font-size:13px;line-height:1.6;color:#5b6572;margin:0 0 14px}
.car-fs{margin-bottom:14px}
.car-fs>b{display:block;font-size:12px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--dark);margin-bottom:8px}
.car-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.car-form label{display:block;font-size:12.5px;font-weight:600;color:#3d4753}
.car-form label span{color:#c0392b;margin-left:2px}
.car-form input,.car-form select,.car-form textarea{display:block;width:100%;margin-top:5px;
  font:inherit;font-size:13.5px;font-weight:400;color:var(--dark);background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:9px 10px}
.car-form textarea{resize:vertical}
.car-full{display:block}
.car-fbtn{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.car-err{font-size:12.5px;color:#c0392b;font-weight:600}
.car-fee{font-size:12.5px;line-height:1.6;color:#5b6572;margin:14px 0 0}
@media(max-width:900px){
  .car-cards{grid-template-columns:1fr}
  .car-row{grid-template-columns:1fr}
}
/* ===== v183 careers - end =============================================================== */

/* ===== v184 product copy ================================================================= */
.pdcopy{max-width:860px}
.pdcopy p{font-size:14.5px;line-height:1.72;color:#3d4753;margin:0 0 12px}
.pdcopy h3{font-size:17px;font-weight:700;color:var(--dark);margin:22px 0 9px}
.pdcopy .s-head{margin-bottom:12px}
@media(max-width:700px){ .pdcopy p{font-size:14px;line-height:1.68} }
/* ===== v184 product copy - end =========================================================== */

/* ===== v187 = KUMAR's small fixes ========================================================
   The hero underline: h1 was already covered, h2 was not, and slide 2 is an h2.
   The quote card's picture: no white box, no border - the cut-out sits on the card. */
.hero-in h1 u,.hero-in h2 u{text-decoration:none;color:var(--acc-d)}
.hero-in h1 em,.hero-in h2 em{font-style:normal;color:var(--pri)}
.lead2 .l2l .l2img{background:transparent;border:0}
/* ===== v187 - end ======================================================================== */

/* ===== v187 = Quick Answer beside the questions =========================================
   Two columns on a desktop, stacked on a phone. The Quick Answer is sticky inside its column
   so it stays with the questions while a long FAQ is being read. */
.aiduo{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.aiduo > .aiduo-l{min-width:0}
.aiduo > .aiduo-r{min-width:0}
.aiduo .aiq{margin:0}
.aiduo .aif-h{margin-top:0}
@media(max-width:900px){ .aiduo{grid-template-columns:1fr;gap:20px} }

/* the questions themselves - closed until clicked */
.aif-i{border-bottom:1px solid var(--line);padding:0}
.aif-i > summary{list-style:none;cursor:pointer;padding:13px 30px 13px 0;position:relative;
  font-size:15px;font-weight:600;color:var(--dark);line-height:1.45}
.aif-i > summary::-webkit-details-marker{display:none}
.aif-i > summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--pri);border-bottom:2px solid var(--pri);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.aif-i[open] > summary::after{transform:translateY(-30%) rotate(225deg)}
.aif-i > summary:hover{color:var(--pri)}
.aif-i > p{margin:0 0 15px;font-size:14.3px;line-height:1.68;color:#3d4753;padding-right:20px}
.aif-list{display:block}

/* the product page's own FAQ, given the same two-column treatment */
.pdduo{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.pdduo .aiq{margin:0}
@media(max-width:900px){ .pdduo{grid-template-columns:1fr;gap:20px} }
/* ===== v187 - end ======================================================================== */

/* ===== v187 = the We Supply In page ======================================================
   The three chip walls under the footer are replaced by one line pointing here, and this is
   the page it points at. It reuses the Help Centre shell, so only the panels below are new. */
.sv-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sv-chips span{background:#fff;border:1px solid var(--line);border-radius:22px;padding:7px 15px;
  font-size:13px;color:var(--txt)}
.sv-chips b{color:var(--pri);font-weight:800;margin-right:6px}
.sv-cover{background:var(--dark);color:#fff;padding:13px 0;font-size:14px;text-align:center}
.sv-featured{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 30px}
.sv-feat{display:block;border-radius:14px;padding:22px;color:#fff;text-decoration:none}
.sv-feat .t{font-size:18px;font-weight:800;margin-bottom:8px}
.sv-feat p{font-size:13.6px;line-height:1.6;opacity:.94;margin:0 0 12px}
.sv-feat .m{font-size:12.6px;font-weight:700;letter-spacing:.4px;border-bottom:2px solid rgba(255,255,255,.6);padding-bottom:2px}
.sv-feat.india{background:linear-gradient(150deg,#0F5132,#157347)}
.sv-feat.exp{background:linear-gradient(150deg,#7A1220,#A81E32)}
.sv-group h2 small{font-weight:500;color:var(--muted);font-size:13px}
.sv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px;margin-top:12px}
.sv-card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.sv-crow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.sv-crow b{font-size:16px;color:var(--dark)}
.sv-badge{font-size:11px;background:var(--pri-soft);color:var(--pri);border-radius:20px;padding:3px 9px;white-space:nowrap}
.sv-card p{font-size:13.2px;line-height:1.6;color:var(--txt);margin:0 0 10px}
.sv-more{font-size:12.8px;font-weight:700;color:var(--pri);text-decoration:none}
.sv-more:hover{text-decoration:underline}
.sv-est{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line)}
.sv-est a{font-size:11.6px;color:var(--txt);border:1px solid var(--line);border-radius:14px;
  padding:3px 9px;text-decoration:none}
.sv-est a:hover{border-color:var(--pri);color:var(--pri)}
@media(max-width:760px){ .sv-featured{grid-template-columns:1fr} }

/* one line where three chip walls used to be */
.cty-strip.is-supply{border-top:1px solid rgba(255,255,255,.12);padding:16px 0}
.cty-strip.is-supply .cty-in{gap:12px}
.cty-strip.is-supply a{border:0;padding:0;font-size:13.5px;font-weight:700;opacity:1;
  text-decoration:underline;text-underline-offset:3px}
/* ===== v187 - end ======================================================================== */

/* ===== v187 = the on-page enquiry form ==================================================== */
.pfform{border:1px solid var(--line);border-radius:14px;background:#fff;padding:22px;margin:26px 0}
.pfform h3{font-size:19px;font-weight:800;color:var(--dark);margin:0 0 4px}
.pfform .pff-s{font-size:13.6px;color:var(--muted);margin:0 0 16px;line-height:1.6}
.pfform .pff-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pfform label{display:block;font-size:12.4px;font-weight:700;color:var(--dark);margin:0 0 5px}
.pfform input,.pfform textarea{width:100%;border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;font:inherit;font-size:14px;color:var(--dark);background:#fff}
.pfform textarea{min-height:92px;resize:vertical}
.pfform input:focus,.pfform textarea:focus{outline:none;border-color:var(--pri);
  box-shadow:0 0 0 3px var(--pri-soft)}
.pfform .pff-full{grid-column:1 / -1}
.pfform .pff-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}
.pfform .pff-note{font-size:12px;color:var(--muted);margin:12px 0 0;line-height:1.6}
.pfform .pff-err{font-size:12.5px;color:#B3261E;margin:10px 0 0;display:none}
.pfform.is-err .pff-err{display:block}
@media(max-width:700px){ .pfform .pff-g{grid-template-columns:1fr} .pfform{padding:18px} }
/* ===== v187 - end ======================================================================== */

/* ===== v187 = About Us photographs ======================================================= */
.abph-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.abph{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.abph img{width:100%;height:190px;object-fit:cover;display:block}
.abph figcaption{padding:15px 16px 17px;font-size:13.4px;line-height:1.62;color:var(--txt)}
.abph figcaption b{display:block;font-size:15px;color:var(--dark);margin-bottom:5px}
.abrg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.abrg{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:#fff;text-decoration:none;transition:border-color .16s,transform .16s}
.abrg:hover{border-color:var(--pri);transform:translateY(-2px)}
.abrg img{width:100%;height:132px;object-fit:cover;display:block}
.abrg span{display:block;padding:11px 13px;font-size:13.6px;font-weight:700;color:var(--dark)}
.abrg-note{margin:18px 0 0;font-size:12.8px;line-height:1.65;color:var(--muted)}
@media(max-width:600px){ .abph img{height:165px} .abrg img{height:118px} }
/* ===== v187 - end ======================================================================== */

/* ===== v188 assist band animation =========================================================
   A support desk that shows it is open: a ring pulsing out of the phone icon, a slow live dot,
   and cards that lift under the cursor. All of it is decoration on a band that is already
   fully drawn - nothing here hides content or waits for a scroll.
   ======================================================================================== */
.assist{position:relative;overflow:hidden}

/* the illustration breathes, very slightly */
.assist-ill{animation:pf-float 6s ease-in-out infinite;transform-origin:50% 60%}
@keyframes pf-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* "we are open" - a slow dot, no claim about how fast anyone answers */
.assist-l > div{position:relative}
.assist h2{position:relative;padding-left:17px}
.assist h2::before{
  content:'';position:absolute;left:0;top:.52em;width:8px;height:8px;border-radius:50%;
  background:#1F9D55;box-shadow:0 0 0 0 rgba(31,157,85,.55);
  animation:pf-live 2.6s ease-out infinite;
}
@keyframes pf-live{
  0%{box-shadow:0 0 0 0 rgba(31,157,85,.5)}
  70%{box-shadow:0 0 0 9px rgba(31,157,85,0)}
  100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}
}

/* the call signal - two rings out of the phone icon, offset so they read as one ring cycle */
.ac .aci{position:relative}
.ac:first-of-type .aci::before,
.ac:first-of-type .aci::after{
  content:'';position:absolute;left:50%;top:50%;width:27px;height:27px;margin:-13.5px 0 0 -13.5px;
  border-radius:50%;border:1.5px solid var(--pri);opacity:0;pointer-events:none;
  animation:pf-ring 4s cubic-bezier(.22,.61,.36,1) infinite;
}
.ac:first-of-type .aci::after{animation-delay:.55s}
@keyframes pf-ring{
  0%{transform:scale(.7);opacity:0}
  12%{opacity:.55}
  55%{transform:scale(2.15);opacity:0}
  100%{transform:scale(2.15);opacity:0}
}

/* the phone icon itself gives one small tilt at the top of each cycle */
.ac:first-of-type .aci svg{animation:pf-shake 4s ease-in-out infinite;transform-origin:50% 60%}
@keyframes pf-shake{
  0%,10%,100%{transform:rotate(0)}
  3%{transform:rotate(-11deg)}
  6%{transform:rotate(9deg)}
  8%{transform:rotate(-4deg)}
}

/* the contact cards read as clickable */
.ac{border-radius:8px;padding:8px 10px;margin:-8px -10px;
    transition:transform .22s ease, background-color .22s ease}
.ac:hover{transform:translateY(-2px);background:#F5F8FC}

@media(max-width:700px){
  .assist h2{padding-left:15px}
  .ac:first-of-type .aci::before,.ac:first-of-type .aci::after{display:none}
}

@media (prefers-reduced-motion: reduce){
  .assist-ill,.assist h2::before,.ac:first-of-type .aci::before,
  .ac:first-of-type .aci::after,.ac:first-of-type .aci svg{animation:none}
  .assist h2::before{box-shadow:none}
  .ac{transition:none}
  .ac:hover{transform:none}
}
/* ===== v188 assist band animation - end ================================================== */

/* ===== v188 assist band - the heading may wrap ============================================
   `.assist h2` was set to white-space:nowrap. Above ~1400px the track is wide enough and the
   line holds; below it the heading ran past its own column and sat on top of the phone icon in
   the next one. It now wraps instead, which is what the grid expects. The overflow:hidden that
   the animation block added is also removed - it hid the symptom by clipping the heading, and
   would have clipped the expanding call ring too.
   ======================================================================================== */
.assist{overflow:visible}
@media(max-width:1400px){
  .assist h2{white-space:normal}
}
/* ===== v188 assist band - the heading may wrap - end ===================================== */

/* ===== v192 PackForge rate list =========================================================== */
.pb-from{font-size:.55em;font-weight:600;color:var(--mut);vertical-align:middle;margin-right:2px}
/* ===== v192 PackForge rate list - end ===================================================== */

/* ===== v193 brand mark =====================================================================
   The header lockup now carries the real PackForge mark instead of a line icon on a blue square.
   The mark brings its own blue plate, so the plate that used to be drawn in CSS is removed and
   the artwork fills the box at every breakpoint - the two mobile rules that resize .logo-mk keep
   working untouched, because only the box is sized, never the drawing inside it.
   `.mk-rev` is the drawer: its bar is blue and so is the mark's plate, so the mark sits in a white
   keyline there, the way a logo does on any dark background. */
.logo-mk{background:none;padding:0;overflow:hidden}
.logo-mk svg{width:100%;height:100%;display:block}
.logo-mk.mk-rev{background:#fff;padding:4px;border-radius:11px}
/* ===== v193 brand mark - end ============================================================== */

/* ===== v194 contact spine ================================================================== */
.pf-telsep{color:var(--mut);padding:0 4px}
.pf-tel2{white-space:nowrap}
.pf-wa2{margin-left:6px}
/* ===== v194 contact spine - end ============================================================ */

/* ===== v194 chat forward =================================================================== */
.pfcb-fwd{display:block;font-size:12.5px;line-height:1.5}
.pfcb-fwd button{margin:7px 6px 0 0;padding:5px 12px;border:1px solid var(--pri);
  background:#fff;color:var(--pri);border-radius:14px;font-size:12px;font-weight:600;cursor:pointer}
.pfcb-fwd button:hover{background:var(--pri);color:#fff}
/* ===== v194 chat forward - end ============================================================= */

/* ===== v195 help grid =======================================================================
   The Help Centre opens with twelve doors instead of a paragraph. Full width, centred, and the
   card is one object: label, icon, title, line, action - same edges and the same baseline on
   every one, so the grid reads as a set rather than twelve boxes.
   ========================================================================================= */
.hgrid-w{background:#fff;padding:44px 0 8px}
.hgrid-h{text-align:center;max-width:760px;margin:0 auto 34px}
.hgrid-h h2{font-size:34px;font-weight:700;color:var(--dark);margin:0 0 12px;letter-spacing:-.4px}
.hgrid-h p{font-size:15.5px;color:var(--mut);margin:0;line-height:1.65}
.hgrid-h b{color:var(--dark)}
.hgrid-h a{color:var(--pri);font-weight:600;white-space:nowrap}
.hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hgc{display:flex;flex-direction:column;border:1px solid var(--line,#e3e8ef);border-radius:8px;
  padding:20px 20px 18px;background:#fff;text-decoration:none;transition:.18s;min-height:212px}
.hgc:hover{border-color:var(--pri);box-shadow:0 6px 22px -12px rgba(11,77,162,.42);
  transform:translateY(-2px)}
.hgc-k{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acc);margin-bottom:14px}
.hgc-i{width:42px;height:42px;border-radius:9px;background:var(--soft,#eef3fb);display:grid;
  place-items:center;margin-bottom:14px;flex:none}
.hgc-i svg{width:21px;height:21px;color:var(--pri)}
.hgc h3{font-size:17px;font-weight:700;color:var(--dark);margin:0 0 7px;line-height:1.25}
.hgc p{font-size:13.6px;color:var(--mut);margin:0 0 16px;line-height:1.55;flex:1}
.hgc-o{font-size:13px;font-weight:700;color:var(--pri)}
.hgc-o i{font-style:normal;margin-left:3px}
/* this page navigates by the grid, so the sidebar would be the same menu twice */
.hlp-body.hgrid-page .hlp-side{display:none}
.hlp-body.hgrid-page .hlp-main{grid-column:1 / -1;max-width:none}
.hlp-body.hgrid-page{display:block}
@media (max-width:1080px){ .hgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .hgrid{grid-template-columns:repeat(2,1fr)} .hgrid-h h2{font-size:27px} }
@media (max-width:520px){ .hgrid{grid-template-columns:1fr} .hgc{min-height:0} }
/* ===== v195 help grid - end ================================================================= */

/* ===== v195 company documents =============================================================== */
.dlco-w{background:#fff;padding:40px 0 6px}
.dlco-k{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acc);margin:0 0 8px}
.dlco-w h2{font-size:29px;font-weight:700;color:var(--dark);margin:0 0 10px;letter-spacing:-.3px}
.dlco-w > .wrap > p.dlco-l{font-size:15px;color:var(--mut);margin:0 0 24px;max-width:74ch;
  line-height:1.65}
.dlco{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dlcard{border:1px solid var(--line,#e3e8ef);border-radius:8px;padding:24px;background:#fff;
  display:flex;flex-direction:column}
.dlcard-i{width:46px;height:46px;border-radius:9px;background:var(--soft,#eef3fb);display:grid;
  place-items:center;margin-bottom:16px}
.dlcard-i svg{width:23px;height:23px;color:var(--pri)}
.dlcard h3{font-size:19px;font-weight:700;color:var(--dark);margin:0 0 8px}
.dlcard p{font-size:14px;color:var(--mut);margin:0 0 18px;line-height:1.6;flex:1}
.dlcard .btn{align-self:flex-start}
/* the download centre navigates by its own cards, so the help sidebar is the same menu twice */
.hlp-body.dl-page .hlp-side{display:none}
.hlp-body.dl-page .hlp-main{grid-column:1 / -1;max-width:none}
.hlp-body.dl-page{display:block}
@media (max-width:760px){ .dlco{grid-template-columns:1fr} .dlco-w h2{font-size:24px} }
/* ===== v195 company documents - end ========================================================= */

/* ===== v195 contact panel =================================================================== */
.cpx-w{background:#fff;padding:40px 0 10px}
.cpx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:34px;align-items:start}
.cpx-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line,#e3e8ef)}
.cpx-row:first-child{padding-top:0}
.cpx-i{width:42px;height:42px;border-radius:9px;background:var(--soft,#eef3fb);display:grid;
  place-items:center;flex:none}
.cpx-i svg{width:21px;height:21px;color:var(--pri)}
.cpx-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acc);margin-bottom:5px}
.cpx-row p{margin:0;font-size:14.6px;color:var(--dark);line-height:1.65}
.cpx-row p a{color:var(--pri);font-weight:600}
.cpx-row p small{color:var(--mut);font-weight:400;font-size:13px}
.cpx-map{margin-top:18px;border:1px solid var(--line,#e3e8ef);border-radius:8px;overflow:hidden}
.cpx-map iframe{display:block;width:100%;height:260px;border:0}
.cpx-mapl{display:block;padding:10px 14px;font-size:13px;font-weight:600;color:var(--pri);
  border-top:1px solid var(--line,#e3e8ef);background:var(--soft,#f6f8fc)}
.cpx-r{border:1px solid var(--line,#e3e8ef);border-radius:10px;padding:26px;
  box-shadow:0 8px 30px -22px rgba(20,35,60,.5)}
.cpx-r h2{font-size:25px;font-weight:700;color:var(--dark);margin:0 0 8px;letter-spacing:-.3px}
.cpx-sub{font-size:14px;color:var(--mut);margin:0 0 20px;line-height:1.6}
.cpxf label{display:block;font-size:12.5px;font-weight:600;color:var(--dark);margin-bottom:14px}
.cpxf label i{color:#c0392b;font-style:normal}
.cpxf-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cpxf-2 label{margin-bottom:14px}
.cpxf input,.cpxf select,.cpxf textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;
  border:1px solid var(--line,#dbe2ea);border-radius:6px;font:inherit;font-size:14px;
  font-weight:400;color:var(--dark);background:#fff}
.cpxf input:focus,.cpxf select:focus,.cpxf textarea:focus{outline:2px solid var(--pri);
  outline-offset:-1px;border-color:var(--pri)}
.cpxf textarea{resize:vertical}
.cpxf-err{display:none;margin:0 0 12px;font-size:13px;color:#c0392b;font-weight:600}
.cpxf-err.on{display:block}
.cpxf-go,.cpxf-wa{width:100%;justify-content:center;margin-bottom:10px}
.cpxf-note{margin:6px 0 0;font-size:12.4px;color:var(--mut);line-height:1.55}
.hlp-body.cpx-page .hlp-side{display:none}
.hlp-body.cpx-page .hlp-main{grid-column:1 / -1;max-width:none}
.hlp-body.cpx-page{display:block}
@media (max-width:900px){ .cpx{grid-template-columns:1fr;gap:26px} }
@media (max-width:560px){ .cpxf-2{grid-template-columns:1fr} }
/* ===== v195 contact panel - end ============================================================= */

/* ===== v196 copy beside the quick answer, FAQ in two columns ================================
   .pdcopy is capped at 860px so the machine's own writing stays readable; on a wide screen that
   left the right third empty. The Quick Answer fills it. The FAQ then has the full width, so it
   runs in two columns - laid out column-by-column, which keeps the reading order down the left
   the same as the order the questions were written in.
   ========================================================================================= */
.pdduo-copy{display:grid;grid-template-columns:minmax(0,860px) minmax(0,1fr);gap:36px;
  align-items:start}
.pdduo-copy .pdcopy{max-width:none}
.pdduo-copy > div:last-child{position:sticky;top:96px}
.pdduo-copy .aiq{margin-top:0}

/* the earlier rule sets display:grid, and a grid container ignores CSS columns - so this has to
   put it back to block or the two columns never appear. */
.pdp-faq{display:block;columns:2;column-gap:20px}
.pdp-faq > *{break-inside:avoid;margin-bottom:9px;display:block}
@media (max-width:1080px){
  .pdduo-copy{grid-template-columns:1fr;gap:22px}
  .pdduo-copy > div:last-child{position:static}
}
@media (max-width:820px){ .pdp-faq{columns:1} }
/* ===== v196 - end ========================================================================== */

/* ===== v196 ratings block =================================================================== */
.rvsec{background:#fff}
.rv-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.rv-head h2{font-size:26px;font-weight:700;color:var(--dark);margin:0;letter-spacing:-.3px}
.rv-head h2 span{color:var(--pri)}
.rv-all{font-size:13.5px;font-weight:600;color:var(--pri)}
.rv-scope{font-size:13.4px;color:var(--mut);margin:0 0 18px;max-width:80ch;line-height:1.6}
.rvsum{display:grid;grid-template-columns:auto minmax(220px,1fr) minmax(260px,1fr);gap:30px;
  align-items:center;border:1px solid var(--line,#e3e8ef);border-radius:10px;padding:22px 26px;
  margin-bottom:20px}
.rvbig{font-family:inherit;font-size:46px;font-weight:800;color:var(--dark);line-height:1}
.rvbig small{font-size:17px;font-weight:600;color:var(--mut);margin-left:4px}
.rvstars{color:#F5A100;letter-spacing:1px;font-style:normal;font-size:13px}
.rvstars i{font-style:normal}
.rvstars-lg{font-size:17px;display:block;margin:8px 0 4px}
.rvcount{font-size:13px;color:var(--mut);margin:0}
.rvbar{display:grid;grid-template-columns:52px 1fr 46px;align-items:center;gap:9px;
  font-size:12.4px;color:var(--mut);margin-bottom:6px}
.rvbar i{display:block;height:7px;border-radius:4px;background:var(--soft,#eef1f5);overflow:hidden}
.rvbar i b{display:block;height:100%;background:#F5A100}
.rvbar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.rvfacts-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.rvfacts-g{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.rvfact b{display:block;font-size:22px;font-weight:800;color:var(--pri);line-height:1.1;
  font-variant-numeric:tabular-nums}
.rvfact span{display:block;font-size:11.6px;color:var(--mut);line-height:1.35;margin-top:2px}
.rvfacts-n{font-size:11.6px;color:var(--mut);margin:12px 0 0;line-height:1.5}
.rvcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rvcard{border:1px solid var(--line,#e3e8ef);border-radius:9px;padding:18px}
.rvc-h{display:flex;gap:10px;align-items:center;margin-bottom:9px}
.rvc-av{width:34px;height:34px;border-radius:50%;background:var(--pri);color:#fff;display:grid;
  place-items:center;font-weight:700;font-size:14px;flex:none}
.rvc-h b{display:block;font-size:14px;color:var(--dark)}
.rvc-h small{display:block;font-size:12px;color:var(--mut)}
.rvc-s{display:flex;align-items:center;gap:6px;font-size:12.4px;color:var(--mut);margin-bottom:8px}
.rvc-m{font-size:12.4px;color:var(--mut);margin:0 0 8px}
.rvc-m b{color:var(--pri);font-weight:600}
.rvc-b{font-size:13.4px;color:#3d4753;line-height:1.62;margin:0}
@media (max-width:1080px){
  .rvsum{grid-template-columns:auto 1fr;gap:22px}
  .rvfacts{grid-column:1 / -1}
  .rvcards{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .rvsum{grid-template-columns:1fr;text-align:left}
  .rvcards{grid-template-columns:1fr}
}
/* ===== v196 ratings block - end ============================================================= */

/* ===== v196 language menu =================================================================== */
.langwrap{position:relative;display:inline-block}
.langmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:232px;background:#fff;
  border:1px solid var(--line,#e3e8ef);border-radius:9px;
  box-shadow:0 14px 40px -18px rgba(20,35,60,.5);padding:7px;z-index:400;display:none}
.langwrap.on .langmenu{display:block}
.langi{display:flex;align-items:baseline;gap:9px;padding:8px 10px;border-radius:6px;
  text-decoration:none;color:var(--dark);font-size:14px}
.langi b{font-weight:600;font-size:14.5px}
.langi span{font-size:11.8px;color:var(--mut)}
.langi:hover{background:var(--soft,#eef3fb)}
.langi.is-on{background:var(--soft,#eef3fb);font-weight:700}
.langi.is-off{opacity:.5;cursor:default}
.langnote{margin:6px 8px 4px;padding-top:8px;border-top:1px solid var(--line,#e3e8ef);
  font-size:11.4px;color:var(--mut);line-height:1.5}
/* ===== v196 language menu - end ============================================================= */