/* ux-chrome: the /en/ header + footer on catalogue pages, scoped so catalogue.css / pdp.css / shop.css keep working. */
@font-face{font-family:Unbounded;font-style:normal;font-weight:600 700;font-display:optional;src:url(/static/fonts/unb-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Unbounded;font-style:normal;font-weight:600 700;font-display:optional;src:url(/static/fonts/unb-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:optional;src:url(/static/fonts/ipm-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.ux-chrome,.ux-foot,.ux-wa-float{--ux-ink:#211A2E;--ux-faint:#6A617D;--ux-acc:#3742E8;--ux-orange:#FF7A3D;--ux-yellow:#F6DE6A;--ux-disp:"Unbounded",system-ui,sans-serif;--ux-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;--ux-sh:3px 3px 0 #211A2E;--ux-sh-sm:2px 2px 0 #211A2E;--ux-r:9px}
/* header (not sticky here: the catalogue has its own sticky filters, gallery and PDP bar) */
header.site.ux-chrome{display:block;position:relative;z-index:20;margin:0;padding:0;background:#fff;border-bottom:2px solid var(--ux-ink);color:#4A4260;font:16px/1.65 Sora,system-ui,-apple-system,"Segoe UI",sans-serif;gap:0}
.ux-chrome .hwrap{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:11px 20px;flex-wrap:wrap}
.ux-chrome .logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;min-height:44px;color:var(--ux-ink)}
.ux-chrome .logo .mark{width:34px;height:34px;border-radius:var(--ux-r);background:var(--ux-orange);border:2px solid var(--ux-ink);box-shadow:var(--ux-sh-sm);display:inline-flex;align-items:center;justify-content:center;font:700 11px var(--ux-disp);color:var(--ux-ink);flex:none}
.ux-chrome .logo .wm{display:flex;flex-direction:column;line-height:1}
.ux-chrome .logo .wm b{font:700 15px var(--ux-disp);color:var(--ux-ink);letter-spacing:-.01em}
.ux-chrome .logo .wm span{font:500 9px var(--ux-mono);color:var(--ux-faint);letter-spacing:.14em;margin-top:4px}
.ux-chrome .hsearch{flex:1;min-width:150px;max-width:340px;position:relative}
.ux-chrome .hsearch input{display:block;width:100%;margin:0;background:#fff;border:2px solid var(--ux-ink);border-radius:var(--ux-r);padding:10px 13px;color:var(--ux-ink);font:14px/1.2 Sora,system-ui,sans-serif;min-height:44px;box-shadow:none}
.ux-chrome .hsearch input::placeholder{color:var(--ux-faint)}
.ux-chrome .spacer{flex:1}
.ux-chrome select.langsel{display:inline-block;width:auto;margin:0;background:#fff;color:var(--ux-ink);border:2px solid var(--ux-ink);border-radius:var(--ux-r);box-shadow:var(--ux-sh-sm);padding:9px 11px;font:700 13px Sora,sans-serif;cursor:pointer;min-height:44px}
.ux-chrome select.langsel:hover{background:var(--ux-yellow)}
.ux-chrome .enq-hdr{background:var(--ux-acc);color:#fff;border:2px solid var(--ux-ink);box-shadow:var(--ux-sh-sm);font:700 13px Sora,sans-serif;padding:10px 16px;border-radius:var(--ux-r);text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;margin:0}
.ux-chrome .enq-hdr:hover{background:var(--ux-orange);color:var(--ux-ink)}
.ux-chrome nav.main{display:flex;gap:5px;flex-basis:100%;flex-wrap:wrap;padding:0 0 2px;margin:0;font-size:13px}
.ux-chrome nav.main a{color:var(--ux-ink);text-decoration:none;font:600 13px Sora,sans-serif;padding:10px 14px;border-radius:var(--ux-r);min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.ux-chrome nav.main a:hover{background:var(--ux-yellow);color:var(--ux-ink)}
.ux-chrome nav.main a[aria-current]{background:var(--ux-ink);color:#fff}
@media(max-width:920px){
 .ux-chrome .hwrap{gap:8px 10px;padding:10px 14px}
 .ux-chrome .hsearch{order:5;flex-basis:100%;max-width:none}
 .ux-chrome .hsearch input{font-size:16px}
 .ux-chrome .logo .wm span{display:none}
 .ux-chrome nav.main{order:6;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .ux-chrome nav.main::-webkit-scrollbar{display:none}
 .ux-chrome nav.main a{padding:10px 12px;flex:none}
 /* the scrolling nav clips anything drawn outside a link, so the keyboard focus ring goes inside it */
 .ux-chrome nav.main a:focus-visible{outline-offset:-3px}
}
/* narrow phones: the language menu does not fit next to 'Enquire'; the footer lists the language pages */
@media(max-width:480px){.ux-chrome select.langsel{display:none}}
@media(max-width:340px){.ux-chrome .logo .wm b{font-size:13px}.ux-chrome .enq-hdr{padding:10px 11px}}
/* the compact phone header of part 58 (data/fold.css) gave the old .qbtn 40 px; same for the Enquire link */
@media(max-width:720px){header.site.ux-chrome .enq-hdr{min-height:40px}}
/* footer */
footer.ux-foot{display:block;background:var(--ux-ink);color:#a79ec2;margin:56px 0 0;padding:0;font:12.5px/1.65 Sora,system-ui,-apple-system,"Segoe UI",sans-serif}
footer.ux-foot a{color:#fff;text-decoration:none}
footer.ux-foot a:hover{color:var(--ux-yellow)}
.ux-foot .ux-fwrap{max-width:1400px;margin:0 auto;padding:24px 20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px}
.ux-foot .ux-fwrap>div{min-width:0;max-width:100%;overflow-wrap:anywhere}
.ux-foot .ux-fwrap b{color:#fff;font:700 13px var(--ux-disp);letter-spacing:-.01em}
.ux-foot .ux-reg{color:#a79ec2;font-size:.95em;margin-right:.6rem}
.ux-foot .ux-flangs{border-top:1px solid rgba(255,255,255,.15);margin-top:0;font-size:12px}
.ux-foot .ux-flangs b{display:block;margin-bottom:6px;color:#fff;font:600 10px var(--ux-mono);letter-spacing:.1em;text-transform:uppercase}
.ux-foot .ux-flangs a,.ux-foot .ux-fnote a{color:#d9d3ec}
.ux-foot .ux-fnote{border-top:1px solid rgba(255,255,255,.15);font-size:12px}
footer.ux-foot.ux-pad{padding-bottom:84px}
@media(max-width:920px){.ux-foot .ux-fwrap{padding:20px 16px;gap:10px}.ux-foot a{display:inline-block;padding:11px 0;line-height:22px}}
@media print{header.site.ux-chrome .hsearch,header.site.ux-chrome .langsel,header.site.ux-chrome .enq-hdr,.ux-wa-float{display:none}}
/* WhatsApp float on catalogue listings (same look as /en/). Later parts can lift it above a bottom bar with --ux-float-bottom. */
.ux-wa-float{position:fixed;right:22px;bottom:calc(var(--ux-float-bottom,22px) + env(safe-area-inset-bottom,0px));z-index:25;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid var(--ux-ink);box-shadow:var(--ux-sh);text-decoration:none;margin:0;padding:0}
.ux-wa-float svg{width:30px;height:30px;fill:currentColor}
.ux-wa-float:hover,.ux-wa-float:focus-visible{background:#1da851}
@media(max-width:920px){.ux-wa-float{right:14px;bottom:calc(var(--ux-float-bottom,14px) + env(safe-area-inset-bottom,0px));width:52px;height:52px}.ux-wa-float svg{width:28px;height:28px}}
/* item pages: the one-column phone grid was as wide as the thumbnail strip (518 px page on a 375 px phone) */
.pdp .detail>*{min-width:0}
/* trust line under the item buy box */
.ux-trust{margin:-6px 0 18px;font-size:13px;line-height:1.7;color:#34443a;max-width:640px}
.ux-trust a{color:#2f4933;font-weight:600;text-underline-offset:3px}
@media(max-width:920px){.ux-trust a,.ux-guide-hint a{display:inline-block;padding:11px 0;line-height:22px}}
/* guide link shown on a catalogue search (?q=) that names a guide topic */
.ux-guide-hint{margin:0 0 12px;font-size:15px;font-weight:600}
.ux-guide-hint a{color:#2f4933}