/* Six Winds UX layer — logo orange #F7A513, charcoal #373736 */
:root{--sw-o:#F7A513;--sw-c:#373736;--sw-ease:cubic-bezier(.2,.7,.2,1)}
html.sw-noscroll{overflow:hidden}

/* header: compact after scroll */
header{transition:box-shadow .25s,background .25s}
header .bar{transition:padding .25s var(--sw-ease)}
header .logo img{transition:height .25s var(--sw-ease),width .25s var(--sw-ease)}
header.sw-scrolled{box-shadow:0 10px 30px -22px rgba(0,0,0,.55)}
header.sw-scrolled .bar{padding-block:5px}
header.sw-scrolled .logo img{height:40px;width:auto}

/* header search trigger */
.sw-s-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 10px 0 12px;border:1.5px solid var(--line,#DCDCDC);border-radius:999px;background:var(--panel,#fff);color:inherit;font:inherit;font-size:14px;cursor:pointer;margin-inline-start:auto;transition:border-color .15s,box-shadow .15s}
.sw-s-btn:hover{border-color:var(--sw-o);box-shadow:0 0 0 4px color-mix(in srgb,var(--sw-o) 18%,transparent)}
.sw-s-btn svg,.sw-s-in svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;flex:none}
.sw-s-btn kbd{font:600 11px/1 ui-monospace,Menlo,monospace;border:1px solid var(--line,#DCDCDC);border-radius:4px;padding:3px 5px;color:var(--muted,#666)}
header .bar nav + .sw-s-btn{margin-inline-start:0}
@media (max-width:860px){.sw-s-btn span,.sw-s-btn kbd{display:none}.sw-s-btn{width:38px;justify-content:center;padding:0}}

/* hero search field (opens the search dialog) */
.sw-hero-search{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;margin:22px 0 4px;padding:15px 18px;border:2px solid var(--sw-c);border-radius:10px;background:#fff;color:#555;font:inherit;font-size:16px;text-align:start;cursor:text;box-shadow:0 14px 30px -22px rgba(0,0,0,.6);transition:transform .2s var(--sw-ease),box-shadow .2s}
.sw-hero-search:hover{transform:translateY(-2px);box-shadow:0 18px 34px -20px rgba(0,0,0,.55)}
.sw-hero-search svg{width:22px;height:22px;fill:none;stroke:var(--sw-c);stroke-width:2.4;stroke-linecap:round;flex:none}
.sw-hero-search span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-hero-search kbd{font:600 12px/1 ui-monospace,Menlo,monospace;background:var(--sw-o);color:#262626;border-radius:4px;padding:4px 7px}
@media (pointer:coarse){.sw-hero-search kbd{display:none}}

/* search dialog */
.sw-search{position:fixed;inset:0;z-index:80;background:rgba(30,30,30,.55);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:max(56px,8vh) 16px 16px;opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s}
.sw-search.on{opacity:1;visibility:visible;transition:opacity .18s}
.sw-s-box{width:min(720px,100%);max-height:min(78vh,720px);display:flex;flex-direction:column;background:#fff;color:#262626;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);transform:translateY(-10px) scale(.985);transition:transform .22s var(--sw-ease)}
.sw-search.on .sw-s-box{transform:none}
.sw-s-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:3px solid var(--sw-o)}
.sw-s-in svg{width:22px;height:22px}
.sw-s-in input{flex:1;min-width:0;border:0;outline:0;background:none;font:600 20px/1.3 "IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;color:#262626;padding:4px 0}
.sw-s-in input::-webkit-search-cancel-button{display:none}
.sw-s-x{border:1px solid #ddd;background:#f6f6f6;border-radius:5px;font:600 12px/1 ui-monospace,Menlo,monospace;padding:6px 8px;cursor:pointer;color:#555;flex:none}
.sw-s-x .t{display:none;font:600 14px/1 "IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif}
@media (pointer:coarse){.sw-s-x{min-height:44px;padding:0 14px}.sw-s-x .k{display:none}.sw-s-x .t{display:inline}}
.sw-s-res{overflow:auto;padding:6px 8px 12px;overscroll-behavior:contain}
.sw-s-res ul{list-style:none;margin:0;padding:0}
.sw-s-g{margin:12px 10px 4px;font-size:12px;font-weight:700;color:#8a6400}
.sw-s-res a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;text-decoration:none;color:inherit}
.sw-s-res a:hover,.sw-s-res a.sel{background:#FFF3DC}
.sw-s-res a.sel{box-shadow:inset 3px 0 0 var(--sw-o)}
[dir=rtl] .sw-s-res a.sel{box-shadow:inset -3px 0 0 var(--sw-o)}
.sw-s-res img,.sw-s-ic{width:44px;height:44px;border-radius:8px;object-fit:contain;background:#f4f4f4;flex:none}
.sw-s-ic{background:radial-gradient(circle at 50% 50%,var(--sw-o) 0 5px,#f1f1f1 6px)}
.sw-s-res b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.sw-s-res small{display:block;color:#777;font-size:12.5px;line-height:1.3;margin-top:2px}
.sw-s-hint{padding:18px 12px;color:#777;margin:0}
.sw-s-none{padding:22px 14px;display:grid;gap:14px;justify-items:start}
.sw-s-none p{margin:0;color:#444}
.sw-s-wa{background:#138540;color:#fff!important;font-weight:700;padding:10px 16px!important;border-radius:6px}
@media (max-width:560px){.sw-search{padding:0}.sw-s-box{max-height:100vh;height:100%;border-radius:0}}

/* wind rose: six winds, drawn once on load, leans toward the pointer */
.sw-rose{position:absolute;z-index:0;pointer-events:none;width:min(640px,62vw);aspect-ratio:1;inset-inline-end:-6%;top:50%;
  transform:translate(var(--px,0),calc(-50% + var(--py,0px))) rotate(var(--rx,0deg));transition:transform .6s var(--sw-ease)}
[dir=rtl] .sw-rose{transform:translate(calc(var(--px,0px) * -1),calc(-50% + var(--py,0px))) rotate(calc(var(--rx,0deg) * -1))}
.sw-rose path,.sw-rose circle{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sw-rose .r-ring{stroke:color-mix(in srgb,var(--sw-c) 14%,transparent);stroke-width:1;stroke-dasharray:2 7}
.sw-rose .r-arm{stroke:color-mix(in srgb,var(--sw-c) 26%,transparent);stroke-width:1.4;stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.sw-rose .r-arm.o{stroke:var(--sw-o);stroke-width:2.4}
.sw-rose .r-fill{fill:color-mix(in srgb,var(--sw-o) 10%,transparent);opacity:0;transition:opacity 1s .9s}
.sw-rose.drawn .r-arm{transition:stroke-dashoffset 1.4s var(--sw-ease);stroke-dashoffset:0}
.sw-rose.drawn .r-arm:nth-of-type(2){transition-delay:.08s}.sw-rose.drawn .r-arm:nth-of-type(3){transition-delay:.16s}
.sw-rose.drawn .r-arm:nth-of-type(4){transition-delay:.24s}.sw-rose.drawn .r-arm:nth-of-type(5){transition-delay:.32s}
.sw-rose.drawn .r-arm:nth-of-type(6){transition-delay:.40s}.sw-rose.drawn .r-arm:nth-of-type(7){transition-delay:.48s}
.sw-rose.drawn .r-fill{opacity:1}
@media (max-width:900px){.sw-rose{width:120vw;inset-inline-end:-40%;top:72%;opacity:.7}}

/* homepage hero copy: a single entrance with the rose */
@media (prefers-reduced-motion:no-preference){
  .sw-enter h1,.sw-enter .lead,.sw-enter .sw-hero-search,.sw-enter .ctas{animation:swUp .7s var(--sw-ease) both}
  .sw-enter .lead{animation-delay:.08s}.sw-enter .sw-hero-search{animation-delay:.16s}.sw-enter .ctas{animation-delay:.24s}
  .sw-enter .panel{animation:swIn .9s .2s var(--sw-ease) both}
}
@keyframes swUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes swIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

/* category icon tiles respond to the pointer */
.istrip a{transition:border-color .15s,transform .2s var(--sw-ease),box-shadow .2s}
.istrip a:hover{transform:translateY(-3px);box-shadow:0 14px 24px -18px rgba(0,0,0,.5)}
.istrip img{transition:transform .3s var(--sw-ease)}
.istrip a:hover img{transform:rotate(-8deg) scale(1.06)}
.ccard{transition:border-color .15s,transform .2s var(--sw-ease),box-shadow .2s}
.ccard:hover{transform:translateY(-2px);box-shadow:0 16px 28px -22px rgba(0,0,0,.55)}
.ccard .ph img{transition:transform .35s var(--sw-ease)}
.ccard:hover .ph img{transform:scale(1.24)}
.ccard:hover .ph.fit img{transform:scale(1.08)}

/* category page: sticky product-group bar */
.sw-subnav{position:sticky;top:var(--sw-hdr,58px);z-index:15;background:color-mix(in srgb,var(--panel,#fff) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line,#DCDCDC)}
.sw-subnav ul{list-style:none;margin:0;padding:10px 0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.sw-subnav ul::-webkit-scrollbar{display:none}
.sw-subnav a{display:block;white-space:nowrap;padding:7px 13px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;border:1.5px solid transparent;color:inherit;transition:background .15s,border-color .15s}
.sw-subnav a:hover{border-color:var(--line,#DCDCDC)}
.sw-subnav a.on{background:var(--sw-c);color:#fff}
.sub{scroll-margin-top:calc(var(--sw-hdr,58px) + 72px)}
.sub.sw-flash{animation:swFlash 1.2s var(--sw-ease)}
@keyframes swFlash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sw-o) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}

/* product page: smooth swap, active thumb, hover zoom */
#pmain{transition:opacity .14s,transform .25s var(--sw-ease)}
#pmain.swap{opacity:0;transform:scale(.97)}
.zoomable{cursor:zoom-in;overflow:hidden}
.zoomable:hover #pmain{transform:scale(1.9)}
.pthumb{transition:border-color .15s,transform .15s}
.pthumb:hover{transform:translateY(-2px)}
.pthumb.on{border-color:var(--sw-o);box-shadow:0 0 0 2px var(--sw-o)}
.vt tbody tr{transition:background .15s}
.vt tbody tr:hover{background:color-mix(in srgb,var(--sw-o) 9%,transparent)}

/* quote list feedback */
.swq-btn.bump{animation:swBump .45s var(--sw-ease)}
@keyframes swBump{40%{transform:scale(1.14)}}
.sw-fly{position:fixed;z-index:90;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--sw-o);box-shadow:0 0 0 4px rgba(247,165,19,.3);pointer-events:none;transition:transform .6s cubic-bezier(.5,-.2,.6,1),opacity .6s}
.add-q{transition:background .15s,color .15s,transform .1s}
.add-q:active{transform:scale(.96)}

/* buttons: tactile press */
.btn{transition:filter .15s,transform .12s,box-shadow .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary:hover{box-shadow:0 12px 24px -14px rgba(168,107,0,.9)}

/* back to top */
.sw-top{position:fixed;z-index:24;inset-inline-end:max(18px,calc(env(safe-area-inset-right,0px) + 12px));bottom:92px;width:44px;height:44px;border-radius:50%;border:0;background:var(--sw-c);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s var(--sw-ease);box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}
.sw-top.on{opacity:1;transform:none;pointer-events:auto}
.sw-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .sw-rose .r-arm{stroke-dashoffset:0}.sw-rose .r-fill{opacity:1}
}
.hero{position:relative;overflow:hidden}
.hero > .wrap{position:relative;z-index:1}

/* homepage: the rose radiates from behind the product panel */
.sw-rose-host{position:relative}
.sw-rose-host > .sw-rose{z-index:-1;width:185%;inset-inline-end:auto;left:50%;top:50%;opacity:1;
  transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px))) rotate(var(--rx,0deg))}
[dir=rtl] .sw-rose-host > .sw-rose{transform:translate(calc(-50% - var(--px,0px)),calc(-50% + var(--py,0px))) rotate(calc(var(--rx,0deg) * -1))}
@media (max-width:900px){.sw-rose-host > .sw-rose{width:150%;top:50%}}
@media (max-width:860px){header .bar .sw-s-btn{margin-inline-start:auto}}

/* ===================== v5: contrast, touch targets, rails, lightbox, gallery ===================== */
/* AA contrast: white text on WhatsApp green (4.7:1); orange text tone on grey/white (4.8:1). Logo orange itself is unchanged. */
:root{--wa:#138540}
@media (prefers-color-scheme:light){:root{--orange-ink:#946000}}
@media (prefers-color-scheme:no-preference){:root{--orange-ink:#946000}}

/* header: real height drives sticky offsets (set by ux.js) */
@media (max-width:900px),(pointer:coarse){
  .menu-btn{width:44px;height:44px}
  header .lang{min-height:44px;display:inline-flex;align-items:center}
  header .sw-s-btn{height:44px}
}
@media (max-width:860px){header .sw-s-btn{width:44px}}
.menu-btn .mb-l{transition:transform .25s var(--sw-ease),opacity .15s;transform-box:fill-box;transform-origin:center}
.menu-btn[aria-expanded=true] .mb-1{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] .mb-2{opacity:0}
.menu-btn[aria-expanded=true] .mb-3{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:900px){
  header #nav.open{animation:swDrop .24s var(--sw-ease) both}
  header #nav.open a{animation:swUp .3s var(--sw-ease) both}
  header #nav.open a:nth-child(2){animation-delay:.03s}header #nav.open a:nth-child(3){animation-delay:.06s}
  header #nav.open a:nth-child(4){animation-delay:.09s}header #nav.open a:nth-child(5){animation-delay:.12s}
  header #nav.open a:nth-child(6){animation-delay:.15s}header #nav.open a:nth-child(7){animation-delay:.18s}
}
@keyframes swDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* small action buttons reach 44px */
.add-q{min-height:44px;padding:0 14px!important}
.ctas .add-q{min-height:50px}

/* category icon strip: even grid on desktop, two-row swipe rail on phones */
@media (min-width:761px){.home-strip .istrip{grid-template-columns:repeat(7,1fr)}}
@media (max-width:760px){
  .home-strip .istrip,.qj .istrip{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:100px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none;
    margin-inline:-16px;padding:4px 16px 12px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent)}
  .home-strip .istrip::-webkit-scrollbar,.qj .istrip::-webkit-scrollbar{display:none}
  .home-strip .istrip li,.qj .istrip li{scroll-snap-align:start}
  .home-strip .istrip a,.qj .istrip a{padding:10px 6px}
  .home-strip .istrip a:hover,.qj .istrip a:hover{transform:none}
}
.strip-all a,.sw-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-decoration:underline;text-decoration-color:var(--sw-o);text-decoration-thickness:2px;text-underline-offset:6px}
.strip-all a:hover{color:var(--orange-ink,#946000)}
.qj{padding-top:28px}
.strip-all{margin-bottom:14px}
.pgal .hero-ph:focus-visible{outline:3px solid var(--sw-o);outline-offset:3px}

/* catalogue hero: group chips sit on solid ground above the rose */
.gjump a{background:var(--panel,#fff);min-height:40px;display:inline-flex;align-items:center}
.hero > .sw-rose{inset-inline-end:-12%;opacity:.8}
.hero > .sw-rose .r-fill{fill:color-mix(in srgb,var(--sw-o) 7%,transparent)}

/* homepage industries: two columns on phones */
@media (max-width:440px){.ind{grid-template-columns:1fr 1fr}.ind div{padding:18px 14px;min-height:0}.ind b{font-size:17px}.ind small{font-size:13px}}

/* category page: group bar shows where it continues */
.sw-subnav .wrap{position:relative}
.sw-subnav ul{--fs:0px;--fe:0px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fs),#000 calc(100% - var(--fe)),transparent);mask-image:linear-gradient(to right,transparent 0,#000 var(--fs),#000 calc(100% - var(--fe)),transparent)}
[dir=rtl] .sw-subnav ul{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 var(--fs),#000 calc(100% - var(--fe)),transparent);mask-image:linear-gradient(to left,transparent 0,#000 var(--fs),#000 calc(100% - var(--fe)),transparent)}
.sw-subnav.fs ul{--fs:48px}.sw-subnav.fe ul{--fe:48px}
.sw-subnav a{min-height:40px;display:flex;align-items:center}
.sn-b{position:absolute;top:50%;z-index:2;width:36px;height:36px;margin-top:-18px;border-radius:50%;border:1.5px solid var(--line,#DCDCDC);background:var(--panel,#fff);color:inherit;display:none;place-items:center;cursor:pointer;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
.sn-b:hover{border-color:var(--sw-o)}
.sn-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .sn-b svg{transform:scaleX(-1)}
.sn-prev{inset-inline-start:max(4px,env(safe-area-inset-left,0px))}.sn-next{inset-inline-end:max(4px,env(safe-area-inset-right,0px))}
.sw-subnav.fs .sn-prev,.sw-subnav.fe .sn-next{display:grid}
@media (pointer:coarse){.sw-subnav .sn-b{display:none!important}}

/* key facts: compact on phones */
@media (max-width:600px){
  .facts-dl{grid-template-columns:1fr 1fr;gap:8px}
  .facts-dl div{padding:10px 12px}
  .facts-dl div:nth-child(1),.facts-dl div:nth-child(3),.facts-dl div:nth-child(5){grid-column:1/-1}
  .facts-dl div:nth-child(3){order:4}.facts-dl div:nth-child(4){order:3}.facts-dl div:nth-child(5){order:5}
  .facts-dl dd{font-size:15px}
}

/* product page gallery: one swipe row under the photo, caption names the model */
.pgal{--pw:340px}
.pthumbs{width:var(--pw);max-width:100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding:5px 4px 8px;overscroll-behavior-x:contain}
.pthumbs.few{justify-content:center}
.pthumbs:not(.few){--fs:0px;--fe:0px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fs),#000 calc(100% - var(--fe)),transparent);mask-image:linear-gradient(to right,transparent 0,#000 var(--fs),#000 calc(100% - var(--fe)),transparent)}
[dir=rtl] .pthumbs:not(.few){-webkit-mask-image:linear-gradient(to left,transparent 0,#000 var(--fs),#000 calc(100% - var(--fe)),transparent);mask-image:linear-gradient(to left,transparent 0,#000 var(--fs),#000 calc(100% - var(--fe)),transparent)}
.pthumbs.fs{--fs:36px}.pthumbs.fe{--fe:36px}
.pthumb{flex:none;scroll-snap-align:start;min-width:56px}
.pthumb:focus-visible{outline-offset:1px}
@media (max-width:760px){.pgal{--pw:min(300px,82vw)}}
.sw-pcap{width:var(--pw);max-width:100%;display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin:2px 0 0;font-size:14px;color:var(--muted,#666);min-height:1.6em}
.sw-pcap b{font-weight:600;color:var(--ink,#262626);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sw-pcap span{flex:none;font:500 12px/1 var(--mono,ui-monospace,monospace);direction:ltr}
.zoomable{position:relative}
.sw-zoom-hint{position:absolute;inset-block-end:10px;inset-inline-end:10px;width:36px;height:36px;border-radius:50%;background:rgba(55,55,54,.82);color:#fff;display:grid;place-items:center;pointer-events:none;opacity:.85;transition:opacity .2s}
.sw-zoom-hint svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.zoomable:hover .sw-zoom-hint{opacity:0}
.pgal .hero-ph{position:relative;cursor:zoom-in}

/* gallery photos on category pages open in the lightbox */
.sw-lbable{cursor:zoom-in;transition:border-color .15s,transform .2s var(--sw-ease)}
.sw-lbable:hover{transform:translateY(-2px);border-color:var(--sw-o)!important}
.sw-lbable:focus-visible{outline:3px solid var(--sw-o);outline-offset:2px}

/* lightbox */
.sw-lb{position:fixed;inset:0;z-index:85;background:rgba(24,24,23,.9);display:grid;grid-template-rows:auto minmax(0,1fr) auto;opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s;color:#fff}
.sw-lb.on{opacity:1;visibility:visible;transition:opacity .2s}
.sw-lb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:max(10px,env(safe-area-inset-top,0px)) 16px 6px}
.sw-lb-n{font:500 13px/1 ui-monospace,Menlo,monospace;color:rgba(255,255,255,.75);direction:ltr}
.sw-lb-fig{margin:0;display:grid;place-items:center;min-height:0;padding:8px 72px;position:relative}
.sw-lb-img{display:block;width:min(560px,100%);max-height:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:14px;padding:4%;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);touch-action:pan-y}
.sw-lb-cap{display:grid;gap:8px;justify-items:center;text-align:center;padding:12px 16px max(20px,env(safe-area-inset-bottom,0px));font-weight:600;font-size:16px}
.sw-lb-cap a{color:var(--sw-o);font-weight:700;display:inline-flex;align-items:center;min-height:44px;text-underline-offset:5px}
.sw-lb-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:rgba(55,55,54,.7);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s}
.sw-lb-btn:hover{background:var(--sw-o);border-color:var(--sw-o);color:#262626}
.sw-lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sw-lb-prev,.sw-lb-next{position:absolute;top:50%;margin-top:-24px}
.sw-lb-prev{inset-inline-start:14px}.sw-lb-next{inset-inline-end:14px}
[dir=rtl] .sw-lb-prev svg,[dir=rtl] .sw-lb-next svg{transform:scaleX(-1)}
.sw-lb.single .sw-lb-prev,.sw-lb.single .sw-lb-next,.sw-lb.single .sw-lb-n{visibility:hidden}
@media (max-width:640px){.sw-lb-fig{padding:8px 12px}.sw-lb-prev,.sw-lb-next{top:auto;bottom:-56px;margin:0}.sw-lb-prev{inset-inline-start:16px}.sw-lb-next{inset-inline-end:16px}.sw-lb-cap{padding-inline:76px}}

/* quote form: items arrive from the quote list */
.sw-filled{animation:swFill 1.4s var(--sw-ease)}
@keyframes swFill{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sw-o) 80%,transparent);background:#FFF3DC}100%{box-shadow:0 0 0 12px transparent}}

/* search extras */
.sw-s-pop{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px 14px}
.sw-s-pop button{border:1.5px solid #ddd;background:#fff;border-radius:999px;min-height:40px;padding:0 14px;font:600 14px/1 "IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;color:#262626;cursor:pointer;transition:border-color .15s,background .15s}
.sw-s-pop button:hover,.sw-s-pop button:focus-visible{border-color:var(--sw-o);background:#FFF3DC}
.sw-s-res mark{background:none;color:inherit;box-shadow:inset 0 -.42em 0 color-mix(in srgb,var(--sw-o) 45%,transparent)}
.sw-s-hint{padding-bottom:10px}
@media (prefers-reduced-motion:reduce){.menu-btn .mb-l{transition:none}}

/* homepage hero: animate the panel's contents, not the panel, so the panel never forms a stacking context
   and the rose (z-index:-1) stays behind it and behind the buttons at every width */
@media (prefers-reduced-motion:no-preference){
  .sw-enter .panel{animation:none}
  .sw-enter .panel > figure,.sw-enter .panel > .name{animation:swIn .9s .2s var(--sw-ease) both}
  .sw-enter .panel > figure:nth-of-type(2){animation-delay:.26s}.sw-enter .panel > figure:nth-of-type(3){animation-delay:.32s}
  .sw-enter .panel > figure:nth-of-type(4){animation-delay:.38s}.sw-enter .panel > .name{animation-delay:.44s}
}

/* v6 audit fixes: comfortable touch targets on touch screens (ui-ux-pro-max: 44px) */
@media (pointer:coarse){
  .crumbs{gap:2px 6px}
  .crumbs a{display:inline-flex;align-items:center;min-height:36px;padding-inline:2px}
  a.ds{min-height:44px;padding-inline:14px}
  summary{padding-block:10px;min-height:44px}
  .sw-subnav a{min-height:44px}
  .rel a{min-height:44px;display:inline-flex;align-items:center}
}
.sw-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* parts results in the search dialog */
.sw-s-all{display:block!important;margin:6px 10px 2px;padding:10px 12px!important;border-radius:8px;background:#FFF3DC;font-weight:600;color:#262626!important;text-align:center}
.sw-s-all:hover{filter:brightness(.97)}
.sw-s-pp small{font-weight:400;color:#777;margin-inline-start:4px}
.sw-s-g small{display:inline!important}

.rep-note{margin:8px 0 0;font-size:12.5px;color:#6b6b6b;text-align:center;line-height:1.4}

/* homepage: product ranges marquee */
.home-ranges{max-width:1160px;margin:26px auto 0;padding:0 16px}
.hr-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.hr-head h2{margin:0;font-size:26px}
.hr-head a{font-weight:600;color:inherit}
.hr-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.hr-track{display:flex;gap:14px;width:max-content;animation:hrScroll 60s linear infinite}
.hr-marquee:hover .hr-track,.hr-marquee:focus-within .hr-track{animation-play-state:paused}
@keyframes hrScroll{to{transform:translateX(-50%)}}
[dir=rtl] .hr-track{animation-name:hrScrollR}
@keyframes hrScrollR{to{transform:translateX(50%)}}
.hr-card{flex:none;width:230px;display:flex;flex-direction:column;border:1px solid var(--line,#ddd);border-radius:12px;background:#fff;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s,border-color .25s}
.hr-card:hover{transform:translateY(-3px);border-color:#F7A513}
.hr-card img{width:230px;height:115px;object-fit:contain;background:#fff}
.hr-card span{padding:10px 12px;border-top:3px solid #F7A513;font-weight:600;font-size:14px;line-height:1.3}
@media (prefers-reduced-motion:reduce){.hr-track{animation:none;width:auto;overflow-x:auto}.hr-marquee{mask-image:none;overflow-x:auto}}
/* search-first hero */
.sw-find{display:flex;align-items:center;gap:10px;width:100%;max-width:620px;margin:22px 0 10px;padding:6px 6px 6px 16px;border:2px solid var(--ink,#262626);border-radius:10px;background:var(--panel,#fff);box-shadow:0 14px 30px -22px rgba(0,0,0,.6)}
[dir=rtl] .sw-find{padding:6px 16px 6px 6px}
.sw-find svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;flex:none;opacity:.7}
.sw-find input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:16px;padding:10px 0}
.sw-find button{flex:none;border:0;border-radius:7px;background:var(--orange,#F7A513);color:#1b1b1b;font:700 15px/1 var(--display,inherit);letter-spacing:.05em;text-transform:uppercase;padding:13px 20px;cursor:pointer}
.sw-find button:hover{filter:brightness(1.06)}.sw-find:focus-within{box-shadow:0 0 0 4px rgba(247,165,19,.35)}
.sw-find-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 10px;padding:0}
.sw-find-chips a{display:inline-block;padding:7px 12px;border:1px solid var(--line,#dcdcdc);border-radius:999px;background:var(--panel,#fff);color:inherit;text-decoration:none;font-size:14px;font-weight:600}
.sw-find-chips a:hover{border-color:var(--orange,#F7A513)}
.sw-find-stats{margin:0 0 4px;font-size:14px;color:var(--muted,#666)}.sw-find-stats b{color:var(--ink,#262626)}
.sw-find-help{margin:0 0 18px;font-size:14px}.sw-find-help a{color:var(--orange-ink,#A86B00);font-weight:600}
/* need help finding a part */
.help-band{padding:clamp(36px,5vw,64px) 0;background:var(--ink,#262626);color:var(--paper,#F2F2F2)}
.help-band .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center;max-width:1160px;margin:0 auto;padding:0 16px}
.help-band h2{margin:0 0 10px;font:700 clamp(28px,3.6vw,42px)/1.08 var(--display,inherit);text-transform:none}
.help-band p{margin:0 0 18px;opacity:.85;line-height:1.55}
.hb-btns{display:flex;flex-wrap:wrap;gap:10px}.help-band .btn.ghost{border-color:currentColor;color:inherit}
.hb-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hb-steps li{display:grid;grid-template-columns:44px 1fr;gap:2px 14px;padding:14px 16px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.04)}
.hb-steps b{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--orange,#F7A513);color:#1b1b1b;font:800 20px/1 var(--display,inherit)}
.hb-steps strong{font-size:16px}.hb-steps span{font-size:14px;opacity:.8;line-height:1.45}
/* popular brands */
.brands-band{padding:clamp(32px,4vw,56px) 0}.brands-band .wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.bb-grid{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.bb-grid a{display:flex;flex-direction:column;gap:4px;height:100%;padding:16px;border:1px solid var(--line,#dcdcdc);border-radius:10px;background:var(--panel,#fff);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.bb-grid a:hover{border-color:var(--orange,#F7A513);transform:translateY(-2px)}
.bb-grid strong{font:700 19px/1.15 var(--display,inherit);letter-spacing:.02em}.bb-grid span{font-size:13px;color:var(--muted,#666)}
@media (max-width:820px){.help-band .wrap{grid-template-columns:1fr}.sw-find button{padding:12px 14px}}
@media (prefers-reduced-motion:reduce){.bb-grid a{transition:none}.bb-grid a:hover{transform:none}}
/* touch screens: every link and button at least ~44 px tall (trust/UX audit) */
@media (pointer:coarse){
  .gjump a,.rg-link,.hr-head a,#contact a[href^="tel:"],#contact a[href^="mailto:"],.foot a[href^="tel:"],.brands .logos a,.sw-find-chips a,.gchips a,.pf-pages a,.crumbs a,.sw-s-x{min-height:44px;display:inline-flex;align-items:center}
  .sw-s-x{min-width:44px;justify-content:center}
}

/* engineering assistant card (search dialog + part finder) */
.swi{display:flex;align-items:center;gap:12px;margin:8px;padding:10px 14px 10px 10px;border:1.5px solid #F7A513;border-radius:12px;background:#FFF8EA;color:#262626;text-decoration:none}
[dir=rtl] .swi{padding:10px 10px 10px 14px}
.swi img{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:8px;flex:none}
.swi span{display:grid;gap:1px;flex:1;min-width:0}
.swi small{font:600 11px/1.2 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#8a6400}
[dir=rtl] .swi small{font-family:"IBM Plex Sans Arabic",sans-serif;letter-spacing:0;text-transform:none;font-size:12px}
.swi b{font-size:16px;line-height:1.25}
.swi em{font-style:normal;font-size:13px;color:#555}
.swi i{font-style:normal;font-size:20px;color:#A86B00}
.swi:hover,.swi:focus-visible{background:#FFF1D3}
#pfI .swi{margin:0 0 14px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .swi{background:#2b2416;color:#EDEDED}:root:not([data-theme=light]) .swi em{color:#bbb}}

/* homepage: engineer's toolbox */
.home-tools{background:#F2F2F2;padding:56px 20px}
.ht-in{max-width:1180px;margin:0 auto}
.ht-top{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:end;margin-bottom:24px}
.ht-eye{margin:0 0 8px;font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#8a6400}
[dir=rtl] .ht-eye{font-family:"IBM Plex Sans Arabic",sans-serif;letter-spacing:0;font-size:14px}
.ht-head h2{margin:0;font:700 clamp(28px,3.4vw,40px)/1.08 "Barlow Condensed","IBM Plex Sans Arabic",sans-serif;color:#262626;text-wrap:balance}
[dir=rtl] .ht-head h2{font-family:"IBM Plex Sans Arabic",sans-serif;line-height:1.3}
.ht-head p:last-child{margin:10px 0 0;color:#555;font-size:16px;line-height:1.6;max-width:60ch}
.ht-x{background:#fff;border:1px solid #DCDCDC;border-inline-start:4px solid #F7A513;border-radius:12px;padding:16px}
.ht-x label{display:block;font-weight:700;font-size:16px;margin-bottom:8px;color:#262626}
.ht-x div{display:flex;gap:8px;flex-wrap:wrap}
.ht-x input{flex:1 1 220px;min-height:48px;padding:10px 14px;border:1.5px solid #DCDCDC;border-radius:8px;font:500 16px/1.2 "IBM Plex Mono",monospace;color:#262626;background:#fff}
.ht-x input:focus{border-color:#F7A513;outline:none;box-shadow:0 0 0 3px rgba(247,165,19,.3)}
.ht-x button{min-height:48px;padding:0 18px;border:0;border-radius:8px;background:#F7A513;color:#262626;font:700 16px/1 "Barlow Condensed","IBM Plex Sans Arabic",sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
[dir=rtl] .ht-x button{text-transform:none;letter-spacing:0;font-family:"IBM Plex Sans Arabic",sans-serif}
.ht-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ht-card{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #DCDCDC;border-radius:12px;background:#fff;text-decoration:none;color:#262626;min-height:76px;transition:border-color .15s,transform .15s,box-shadow .15s}
.ht-card:hover,.ht-card:focus-visible{border-color:#F7A513;transform:translateY(-2px);box-shadow:0 10px 22px -18px rgba(0,0,0,.55)}
.ht-ph{width:64px;height:64px;flex:none;border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden}
.ht-ph img{width:100%;height:100%;object-fit:contain}
.ht-card b{font-size:15px;line-height:1.3;font-weight:600}
.ht-all{display:inline-block;margin-top:16px;font-weight:700;color:#A86B00;text-decoration:none;min-height:44px;line-height:44px}
@media (max-width:980px){.ht-top{grid-template-columns:1fr}.ht-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.home-tools{padding:40px 16px}.ht-grid{grid-template-columns:1fr}}

/* recently viewed (part finder + part pages): cards with photo (or product icon), name and one detail line;
   arrows and edge shading show there is more to the side; no bare scrollbar */
.sw-recent{margin-top:22px;position:relative}
.sw-rc-h{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.sw-rc-h b{font-weight:700;font-size:16px}
.sw-rc-nav{display:none;gap:6px;margin-inline-start:auto}
.sw-recent.sw-rc-more .sw-rc-nav{display:inline-flex}
.sw-rc-b{width:40px;height:40px;border:1px solid #DCDCDC;border-radius:50%;background:#fff;color:#262626;font:600 22px/1 inherit;cursor:pointer;display:grid;place-items:center}
.sw-rc-b:hover{border-color:#F7A513}
[dir=rtl] .sw-rc-b{transform:scaleX(-1)}
.sw-rc-x{min-height:36px;padding:4px 12px;border:1px solid #DCDCDC;border-radius:999px;background:transparent;color:#555;font:600 13px/1 inherit;cursor:pointer}
.sw-recent:not(.sw-rc-more) .sw-rc-x{margin-inline-start:auto}
.sw-recent ul{list-style:none;margin:0;padding:2px 2px 6px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sw-recent ul::-webkit-scrollbar{display:none}
.sw-recent li{flex:0 0 260px;scroll-snap-align:start}
.sw-recent li a{display:flex;align-items:center;gap:12px;height:100%;min-height:76px;padding:10px;border:1px solid #DCDCDC;border-radius:12px;background:#fff;color:#262626;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.sw-recent li a:hover{border-color:#F7A513;box-shadow:0 8px 20px -14px rgba(0,0,0,.45);transform:translateY(-1px)}
.sw-rc-ph{flex:none;width:56px;height:56px;border-radius:8px;background:#F6F6F4;display:grid;place-items:center;overflow:hidden;color:#9A9A95}
.sw-rc-ph img{width:100%;height:100%;object-fit:contain;background:#fff}
.sw-rc-ph svg{width:28px;height:28px}
.sw-rc-t{min-width:0;display:grid;gap:3px}
.sw-rc-t b{font:600 14px/1.3 inherit;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.sw-rc-t small{font-size:12.5px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-recent.sw-rc-more::after{content:"";position:absolute;inset-inline-end:0;bottom:6px;height:80px;width:40px;pointer-events:none;background:linear-gradient(to left,#F2F2F2,transparent);opacity:1;transition:opacity .2s}
[dir=rtl] .sw-recent.sw-rc-more::after{background:linear-gradient(to right,#F2F2F2,transparent)}
.sw-recent:not(.sw-rc-e)::after{opacity:0}
@media (max-width:560px){.sw-recent li{flex-basis:78%}.sw-rc-nav{display:none!important}.sw-recent:not(.sw-rc-more) .sw-rc-x,.sw-rc-x{margin-inline-start:auto}}

/* touch targets ≥ 44 px on narrow screens too (not only coarse pointers) */
@media (max-width:760px){
  .gjump a,.rg-link,.hr-head a,#contact a[href^="tel:"],#contact a[href^="mailto:"],a.ltr[href^="tel:"],a.ltr[href^="mailto:"],a.map,.foot a[href^="tel:"],.brands .logos a,.sw-find-chips a,.gchips a,.pf-pages a,.crumbs a,.sw-s-x,.ht-all,.tlinks a,.tl-chips a,.xex a{min-height:44px;display:inline-flex;align-items:center}
  .sw-s-x{min-width:44px;justify-content:center}
}

/* floating actions, every page: one small stack in the corner on desktop (WhatsApp as a round icon, so it never sits on
   top of table buttons), one action dock along the bottom on phones (Call · WhatsApp · Quote list · Get quote) */
.sw-quick{position:fixed;z-index:25;inset-inline-end:max(18px,calc(env(safe-area-inset-right,0px) + 12px));bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 12px));display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.sw-quick>*{pointer-events:auto}
.sw-quick .wa-float,.sw-quick .swq-btn,.sw-quick .sw-top{position:static!important;inset:auto!important;margin:0}
.sw-quick .sw-top{order:1;width:44px;height:44px}
.sw-quick .sw-top:not(.on){visibility:hidden}
.sw-quick .swq-btn{order:2}
.sw-quick .wa-float{order:3;width:54px;height:54px;padding:0!important;justify-content:center;border-radius:50%}
.sw-quick .wa-float .lbl,.sw-quick .wa-float .lbl-s{display:none!important}
.dock-call,.dock-quote{display:none!important}
@media (max-width:760px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .sw-quick{inset:auto 0 0 0;flex-direction:row;align-items:stretch;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--panel,#fff) 96%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line,#dcdcdc);box-shadow:0 -12px 24px -18px rgba(0,0,0,.4);pointer-events:auto}
  .sw-quick .sw-top{display:none!important}
  .sw-quick>a,.sw-quick>button{flex:1 1 0;min-width:0;width:auto;height:auto;min-height:50px;display:flex;align-items:center;justify-content:center;border-radius:10px!important;padding:0 8px!important;box-shadow:none;font:600 14px/1 inherit;gap:7px;text-decoration:none}
  .sw-quick svg{width:20px;height:20px}
  .sw-quick .wa-float{order:2}
  .sw-quick .wa-float .lbl-s{display:inline!important}
  .sw-quick .swq-btn{order:3;flex:0 0 auto;padding:0 12px!important}
  .sw-quick .swq-btn:not(.on){display:none}
  .dock-call{order:1;display:flex!important;color:var(--ink,#262626);background:var(--paper,#fff);border:1.5px solid var(--line,#dcdcdc)}
  .dock-quote{order:4;display:flex!important;background:var(--orange,#F7A513);color:#262626!important;font-weight:700!important}
  .swq-t{bottom:84px!important}
}

/* home: recent supply work (shown only when real entries exist in catalogue/trust/projects.json) */
.projects{padding-block:72px}
.projects h2{margin:0 0 24px}
.pj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.pj{background:var(--panel,#fff);border:1px solid var(--line,#dcdcdc);border-radius:12px;overflow:hidden;display:grid;align-content:start;gap:8px;padding-bottom:16px}
.pj img{width:100%;height:auto;aspect-ratio:400/260;object-fit:cover}
.pj>:not(img){margin-inline:16px}
.pj-s{margin-top:14px;font:600 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;color:#8a6400}
.pj h3{margin-block:2px 0;font-size:19px}
.pj p{margin:0;color:var(--muted,#666);font-size:15px;line-height:1.5}
.pj small{color:var(--muted,#666);font-size:13px}

/* homepage: core ranges (lighting featured, then six photo cards) */
.core{background:var(--paper,#F4F4F3)}
.cr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cr-card{display:flex;flex-direction:column;min-width:0;background:var(--panel,#fff);border:1px solid var(--line,#E0E0DE);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.cr-card:hover{border-color:#F7A513;box-shadow:0 18px 34px -26px rgba(0,0,0,.55);transform:translateY(-2px)}
.cr-ph{display:block;aspect-ratio:16/10;background:#fff;border-bottom:1px solid var(--line,#E0E0DE);overflow:hidden}
.cr-ph img{width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box;transition:transform .35s}
.cr-card:hover .cr-ph img{transform:scale(1.04)}
.cr-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.cr-body h3{margin:0;font:700 24px/1.1 var(--display,"Barlow Condensed",sans-serif)}
.cr-body h3 a{color:inherit;text-decoration:none}
.cr-body h3 a:hover{color:var(--orange-ink,#946000)}
.cr-n{margin:0;font-size:13.5px;color:var(--muted,#5F5F5F)}
.cr-n b{color:var(--ink,#262626);font-weight:700;font-variant-numeric:tabular-nums}
.cr-d{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted,#5F5F5F)}
.cr-chips{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cr-chips a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line,#E0E0DE);border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink,#262626);text-decoration:none;background:var(--panel,#fff)}
@media (hover:hover){.cr-chips a:hover{border-color:#F7A513;background:#FFF3DC;color:#262626}}
.cr-chips a:focus-visible{border-color:#F7A513;background:#FFF3DC;color:#262626}
.cr-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.cr-go{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:var(--ink,#262626);text-decoration:none}
.cr-go:hover{color:var(--orange-ink,#946000)}
.cr-wa{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;border:1.5px solid var(--wa,#138540);color:var(--wa,#138540);font-weight:700;font-size:14.5px;text-decoration:none}
.cr-wa:hover{background:var(--wa,#138540);color:#fff}
/* featured: lighting, wide and dark */
.cr-feat{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch;background:var(--char,#373736);border-color:var(--char,#373736);color:#fff}
.cr-feat .cr-ph{aspect-ratio:auto;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:10px;padding:14px;background:var(--char-2,#2E2E2D);border:0;min-height:340px}
.cr-feat .cr-ph img{background:#fff;border-radius:10px;padding:16px}
.cr-feat .cr-ph img:first-child{grid-row:1/3}
.cr-feat .cr-body{padding:26px 28px;gap:10px;justify-content:center}
.cr-feat h3{font-size:clamp(28px,3vw,36px)}
.cr-feat h3 a:hover{color:#F7A513}
.cr-feat .cr-n,.cr-feat .cr-d{color:#D6D6D4}.cr-feat .cr-n b{color:#fff}
.cr-feat .cr-d{font-size:15.5px;max-width:58ch}
.cr-tag{align-self:flex-start;padding:5px 10px;border-radius:999px;background:#F7A513;color:#262626;font:700 12px/1 var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase}
[dir=rtl] .cr-tag{font-family:"IBM Plex Sans Arabic",sans-serif;letter-spacing:0;font-size:13px}
.cr-feat .cr-chips a{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.cr-feat .cr-chips a:hover,.cr-feat .cr-chips a:focus-visible{background:#F7A513;border-color:#F7A513;color:#262626}
.cr-tools{display:flex;flex-wrap:wrap;gap:6px 18px}
.cr-tool{display:inline-flex;align-items:center;min-height:40px;color:#F7A513;font-weight:600;font-size:14.5px;text-decoration:underline;text-underline-offset:3px}
.cr-feat .cr-go{color:#fff}.cr-feat .cr-go:hover{color:#F7A513}
.cr-feat .cr-wa{background:var(--wa,#138540);color:#fff;border-color:var(--wa,#138540)}
.cr-feat .cr-wa:hover{filter:brightness(1.1)}
.cr-feat:hover{border-color:#F7A513}
@media (max-width:980px){.cr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cr-feat{grid-template-columns:1fr}.cr-feat .cr-ph{min-height:0;aspect-ratio:16/9}}
/* phones: compact cards (small photo beside the name, one swipeable row of types, actions underneath) */
@media (max-width:620px){
  .cr-grid{grid-template-columns:1fr;gap:12px}
  .cr-card:not(.cr-feat){display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:12px;row-gap:4px;padding:12px;align-items:center}
  .cr-card:not(.cr-feat) .cr-ph{grid-row:1/3;width:76px;height:76px;aspect-ratio:auto;border:1px solid var(--line,#E0E0DE);border-radius:10px}
  .cr-card:not(.cr-feat) .cr-ph img{padding:6px}
  .cr-card:not(.cr-feat) .cr-body{display:contents}
  .cr-card:not(.cr-feat) h3{grid-column:2;align-self:end}
  .cr-card:not(.cr-feat) .cr-n{grid-column:2;align-self:start}
  .cr-card:not(.cr-feat) .cr-d{display:none}
  .cr-card:not(.cr-feat) .cr-chips{grid-column:1/-1;flex-wrap:wrap;margin:8px 0 0}   /* every type visible: the chips wrap (3-5 short labels), nothing hidden off the edge */
  .cr-card:not(.cr-feat) .cr-act{grid-column:1/-1;padding-top:4px;flex-wrap:nowrap}
  .cr-body h3{font-size:21px}
  .cr-chips a{min-height:40px}
  .cr-feat .cr-ph{aspect-ratio:4/3;padding:10px;gap:8px}
  .cr-feat .cr-body{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){.cr-card,.cr-ph img{transition:none}.cr-card:hover{transform:none}.cr-card:hover .cr-ph img{transform:none}}
/* lighting type tiles (photo + name) under the featured card */
.cr-tiles{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;padding:0 14px 14px}
.cr-tile{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:#fff;color:#262626;text-decoration:none;border:2px solid transparent;transition:border-color .2s,transform .2s}
.cr-tile img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;padding:10px;box-sizing:border-box;background:#fff}
.cr-tile span{padding:8px 8px 10px;font-weight:700;font-size:13.5px;line-height:1.25;text-align:center;border-top:3px solid #F7A513;min-height:2.5em;display:flex;align-items:center;justify-content:center}
.cr-tile:hover,.cr-tile:focus-visible{border-color:#F7A513;transform:translateY(-2px)}
@media (max-width:980px){.cr-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:620px){.cr-tiles{gap:8px;padding:0 10px 10px}.cr-tile img{padding:6px}.cr-tile span{font-size:12.5px;padding:6px 4px 8px}}
/* popular part numbers: one shelf per range, chosen with tabs; the visitor scrolls, nothing moves on its own */
.pp-wrap{margin-top:40px;background:var(--panel,#fff);border:1px solid var(--line,#E0E0DE);border-radius:14px;padding:20px 20px 16px}
.pp-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px;margin-bottom:14px}
.pp-title{margin:0;font:700 26px/1.1 var(--display,"Barlow Condensed",sans-serif)}
.pp-top p{margin:4px 0 0;color:var(--muted,#5F5F5F);font-size:14.5px}
.pp-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.pp-tabs::-webkit-scrollbar{display:none}
.pp-tabs button{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line,#E0E0DE);background:var(--panel,#fff);color:var(--ink,#262626);font:600 14.5px/1 var(--body,inherit);cursor:pointer}
.pp-tabs button[aria-selected=true]{background:var(--ink,#262626);border-color:var(--ink,#262626);color:var(--panel,#fff)}
.pp-tabs button:focus-visible{outline:3px solid #F7A513;outline-offset:2px}
.js-tabs .pp-panel[hidden]{display:none}
.pp-h{margin:18px 0 10px;font:700 18px/1.2 var(--display,inherit)}
.js-tabs .pp-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pp-shelf{position:relative}
.pp-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(196px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px 2px 12px;scrollbar-width:thin}
@media (min-width:1100px){.pp-row{grid-auto-columns:calc((100% - 48px)/5)}}
.pp{scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px;border:1px solid var(--line,#E0E0DE);border-radius:12px;background:var(--panel,#fff)}
.pp-ph{display:block;aspect-ratio:1;border-radius:8px;background:#fff;overflow:hidden;margin-bottom:6px}
.pp-ph img{width:100%;height:100%;object-fit:contain;padding:8px;box-sizing:border-box;transition:transform .3s}
.pp:hover .pp-ph img{transform:scale(1.05)}
.pp-b{font:600 11.5px/1.2 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink,#946000)}
.pp-pn{font:700 16px/1.25 var(--mono,monospace);color:var(--ink,#262626);text-decoration:none;overflow-wrap:anywhere}
.pp-pn:hover{color:var(--orange-ink,#946000);text-decoration:underline}
.pp-n{margin:0 0 6px;font-size:13.5px;line-height:1.4;color:var(--muted,#5F5F5F);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.pp .add-q{margin-top:auto;width:100%;border-radius:8px;border:1.5px solid #F7A513;background:#FFF3DC;color:#262626;font-weight:700;font-size:14px;cursor:pointer}
.pp .add-q:hover{background:#F7A513}
.pp-nav{position:absolute;top:38%;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line,#E0E0DE);background:var(--panel,#fff);color:var(--ink,#262626);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.pp-nav.prev{inset-inline-start:-14px}.pp-nav.next{inset-inline-end:-14px}
.pp-nav:hover{border-color:#F7A513}
.pp-nav[disabled]{opacity:0;pointer-events:none}
.pp-all{display:inline-block;line-height:44px;min-height:44px;font-weight:700;color:var(--orange-ink,#946000);text-decoration:none}
@media (max-width:620px){.pp-wrap{padding:16px 12px 10px;margin-top:28px}.pp-row{grid-auto-columns:46%}.pp-nav{display:none}.pp-pn{font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.pp-row{scroll-behavior:auto}.pp-ph img,.cr-tile{transition:none}}
.cr-allcat{display:inline-block;margin-top:16px;min-height:44px;line-height:44px;padding:0 20px;border-radius:8px;background:var(--ink,#262626);color:var(--panel,#fff);font-weight:700;text-decoration:none}
.cr-allcat:hover{background:#F7A513;color:#262626}
.pp-nm{font:700 15px/1.3 var(--body,inherit);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ind-more{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:22px}
.ind-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--orange-ink,#946000);text-decoration:none}
.ind-more a:hover{text-decoration:underline}
/* most requested shelf: shop-style cards (photo, product name, part number, add button) */
.pp-nm{min-height:2.6em}
.pp-code{font:500 12.5px/1.3 var(--mono,monospace);color:var(--muted,#5F5F5F);overflow-wrap:anywhere;margin-bottom:6px}
[dir=rtl] .pp-code{text-align:right}
.pp .add-q{min-height:40px}
.pp{transition:border-color .15s,box-shadow .15s}
.pp:hover{border-color:#F7A513;box-shadow:0 10px 22px -16px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){.pp{transition:none}}
/* phones: one quote button in the dock. Empty list: "Get a quote" (the form); items in the list: the list button takes its
   place, labelled, in the same colour (the icon-only list button beside a second quote button confused visitors) */
@media (max-width:760px){
  .swq-has .dock-quote{display:none!important}
  .sw-quick .swq-btn.on{flex:1.3 1 0!important;padding:0 10px!important;background:var(--orange,#F7A513)!important;color:#262626!important;font-weight:700}
  .sw-quick .swq-btn.on span{display:inline!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sw-quick .swq-btn.on span{display:none!important}
  .sw-quick .swq-btn.on .swq-s{display:inline!important;white-space:nowrap}
  .sw-quick .swq-btn.on b{background:#262626;color:#fff}
  .sw-quick>a,.sw-quick>button{font-size:14px}
  .sw-quick .wa-float .lbl-s{white-space:nowrap}
}
@media (max-width:370px){.sw-quick>a,.sw-quick>button{font-size:13px;gap:5px}.sw-quick svg{width:18px;height:18px}}
#rfq,#contact{scroll-margin-top:calc(var(--sw-hdr,58px) + 16px)}
#rfq [aria-invalid=true]{border-color:#B3261E!important;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
.cr-wa{display:inline-flex;align-items:center;gap:6px}
/* header on mid-width screens (961–1280 px): seven menu items, search, language and the quote button fit on one line */
@media (min-width:961px) and (max-width:1280px){
  header .bar nav,header #nav{gap:14px!important;font-size:14px!important}
  header .sw-s-btn kbd,header .sw-s-btn span{display:none}
  header .sw-s-btn{padding:0 10px}
}
@media (min-width:961px) and (max-width:1120px){header .bar nav,header #nav{gap:10px!important;font-size:13.5px!important}header .lang{padding-inline:10px}}
/* product photos: no long-press image menu on phones, no dragging, no selection highlight */
img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none}

/* products menu (desktop): three columns under the header — divisions | categories | product groups with photos */
.mm{position:absolute;inset-inline:0;top:100%;z-index:40;background:var(--panel,#fff);border-top:1px solid var(--line,#E2E2E2);border-bottom:1px solid var(--line,#E2E2E2);
  box-shadow:0 24px 40px -24px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.mm.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.mm-in{display:grid;grid-template-columns:270px 270px 1fr;height:min(70vh,560px);overflow:hidden;padding:0!important}
.mm-in>*{min-height:0;max-height:100%}
.mm-c1,.mm-c2{list-style:none;margin:0;padding:10px 0;overflow-y:auto;border-inline-end:1px solid var(--line,#E2E2E2)}
.mm-c1{background:#FAFAF8}
.mm-c1 a,.mm-c2 a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px;color:var(--ink,#262626);text-decoration:none;font-size:15px;font-weight:500;line-height:1.3}
.mm-c1 a i,.mm-c2 a i{margin-inline-start:auto;font-style:normal;color:#9A9A95;font-size:18px}
.mm-c1 a.on,.mm-c2 a.on{background:#FFF1D6;color:#262626;font-weight:700}
.mm-c1 a.on{box-shadow:inset 3px 0 0 var(--orange,#F7A513)}[dir=rtl] .mm-c1 a.on{box-shadow:inset -3px 0 0 var(--orange,#F7A513)}
.mm-c1 a:hover,.mm-c2 a:hover{background:#FFF8EA}
.mm-di{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#FFF1D6;color:#8A5300;flex:none}
.mm-di svg{width:18px;height:18px}
.mm-c3{padding:16px 20px;overflow-y:auto}
.mm-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.mm-h b{font-size:18px}.mm-h a{margin-inline-start:auto;font-weight:700;color:var(--orange-ink,#9A5F00);text-decoration:none;white-space:nowrap}
.mm-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.mm-g a{display:grid;gap:8px;justify-items:center;text-align:center;color:var(--ink,#262626);text-decoration:none;font-size:13.5px;font-weight:600;line-height:1.3}
.mm-ph{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:12px;background:#fff;border:1px solid var(--line,#E2E2E2);overflow:hidden;color:#9A9A95;transition:border-color .15s,box-shadow .15s}
.mm-ph img{width:86%;height:86%;object-fit:contain}.mm-ph svg{width:40%;height:40%}
.mm-g a:hover .mm-ph{border-color:var(--orange,#F7A513);box-shadow:0 8px 20px -14px rgba(0,0,0,.45)}
.mm-gn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mm-foot{display:flex;justify-content:flex-end;padding-block:8px!important;border-top:1px solid var(--line,#E2E2E2)}
.mm-foot a{font-weight:700;color:var(--orange-ink,#9A5F00);text-decoration:none}
header nav a.mm-link[aria-expanded=true]{color:var(--orange-ink,#9A5F00)}
@media (prefers-reduced-motion:reduce){.mm,.mm.open{transition:none;transform:none}}
@media (max-width:960px),(hover:none){.mm{display:none!important}}
/* phones: Products opens full-screen pages that slide in, one level at a time (divisions -> categories with photos) */
.mm-dr{display:none}
@media (max-width:960px){
  header #nav a[data-mm-drill]{display:flex;align-items:center;justify-content:space-between}
  header #nav a[data-mm-drill]::after{content:"›";font-size:22px;color:#9A9A95;margin-inline-start:12px}
  [dir=rtl] header #nav a[data-mm-drill]::after{content:"‹"}
  .mm-dr{display:block;position:fixed;inset:0;z-index:60;background:var(--panel,#fff);overflow-y:auto;overscroll-behavior:contain;
    padding:0 0 calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(100%);visibility:hidden;transition:transform .26s cubic-bezier(.2,.7,.2,1),visibility 0s linear .26s}
  [dir=rtl] .mm-dr{transform:translateX(-100%)}
  .mm-dr.open{transform:none;visibility:visible;transition:transform .26s cubic-bezier(.2,.7,.2,1)}
  .mm-dh{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 16px;background:var(--panel,#fff);border-bottom:1px solid var(--line,#E2E2E2)}
  .mm-dh button{min-height:44px;padding:0 14px;border:1px solid var(--line,#DCDCDC);border-radius:999px;background:#fff;color:#262626;font:600 15px/1 inherit;cursor:pointer;white-space:nowrap}
  .mm-dh b{font-size:18px;line-height:1.25}
  .mm-dl{list-style:none;margin:0;padding:8px 16px;display:grid;gap:8px}
  .mm-dl a,.mm-dl button{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:8px 14px;border:1px solid var(--line,#E2E2E2);border-radius:12px;background:#fff;color:#262626;font:600 16px/1.3 inherit;text-align:start;text-decoration:none;cursor:pointer}
  .mm-dl i{margin-inline-start:auto;font-style:normal;font-size:22px;color:#9A9A95}
  .mm-dl .mm-di{width:40px;height:40px;border-radius:11px}.mm-dl .mm-di svg{width:22px;height:22px}
  .mm-dall{background:#FFF8EA!important;border-color:#F7D79A!important}
  .mm-dc{list-style:none;margin:0;padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .mm-dc a{display:grid;gap:8px;color:#262626;text-decoration:none;font:600 14px/1.3 inherit;text-align:center}
  .mm-dall2{display:flex;justify-content:center;align-items:center;min-height:52px;margin:4px 16px 0;border-radius:12px;background:#FFF1D6;color:#262626;font-weight:700;text-decoration:none}
}
@media (max-width:960px) and (prefers-reduced-motion:reduce){.mm-dr,.mm-dr.open{transition:none}}
/* photo viewer, product cards and menus: no text selection, so a long-press does not open the phone's
   "Copy / Web search" bar or Google's tap-to-search; part numbers stay copyable in the specification table */
.sw-lb,.sw-lb *,.sc-card,.gp-card,.ci-card,.tl-card,.mm,.mm-dr,.sw-recent,.ht-card,.dz{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* text on the public site is not selectable (a long-press does not open the phone's copy / web-search bar);
   form fields stay editable; the internal Sales Desk keeps normal selection; part numbers have a copy button */
body:not(.sqpage){-webkit-user-select:none;user-select:none}
body:not(.sqpage) :is(input,textarea,select,[contenteditable]){-webkit-user-select:text;user-select:text}
.pn-copy{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:6px 0 2px;padding:0 12px;border:1px solid var(--line,#DCDCDC);border-radius:999px;background:var(--panel,#fff);color:var(--ink,#262626);font:600 13.5px/1 inherit;cursor:pointer}
.pn-copy svg{width:16px;height:16px}
.pn-copy:hover{border-color:#F7A513}
.pn-copy.ok{border-color:#1D6B36;color:#1D6B36;background:#E3F4E8}

/* public pages: no long-press callout on links or images (iPhone link/image preview menus) */
body:not(.sqpage) :is(a,img){-webkit-touch-callout:none}

/* search by photo: camera button inside search boxes; the "read from the picture" card on the part finder */
.sw-s-cam{margin-inline-end:6px}
@keyframes swPulse{0%,100%{box-shadow:0 0 0 0 rgba(247,165,19,.6)}50%{box-shadow:0 0 0 10px rgba(247,165,19,0)}}