:root{
  /* ------------------------------------------------------------------
     GULF MEP — monochrome identity taken from the logo.
     BLACK + GREY + WHITE only.

     The site is DARK BY DEFAULT, matching the client's reference board:
     near-black surfaces, graphite panels, white product tiles. A light
     variant is kept behind .light for the theme toggle; every rule reads
     these variables, so neither mode needs its own stylesheet.
     ------------------------------------------------------------------ */
  --bg:10 10 11; --surface:20 20 22; --surface-2:28 29 32;
  --line:44 45 50; --fg:236 236 239; --muted:161 163 170; --faint:130 132 139;
  --primary:236 236 239; --primary-fg:17 17 18;
  --accent:255 255 255; --accent-fg:17 17 18;

  /* ink ramp — darkest to lightest */
  --navy-300:174 176 182; --navy-400:126 128 135; --navy-500:86 88 94;
  --navy-600:52 53 58; --navy-700:32 33 37; --navy-800:20 20 22; --navy-900:10 10 11;

  /* graphite ramp — used for kickers, meta and rules */
  --brand-400:146 148 155; --brand-500:174 176 182; --brand-600:206 208 213;

  /* metallic edge lifted from the logo's bevel */
  --steel:150 152 159;

  /* Product tiles stay light whatever the page does: MEP photography is shot
     on white, and a white tile on a black page is exactly the reference look. */
  --tile:255 255 255; --tile-fg:17 17 18; --tile-line:226 226 229; --tile-muted:92 94 99;

  --wa:236 236 239;   /* legacy token, kept for .btn-wa */
  --radius:.75rem; --radius-lg:1rem;
  --shadow-card:0 1px 2px rgb(0 0 0/.4), 0 6px 20px rgb(0 0 0/.35);
  --shadow-hover:0 6px 18px rgb(0 0 0/.45), 0 18px 44px rgb(0 0 0/.5);
  --container:1360px;
  --header-h:76px;
}
/* Light variant, opt-in through the header toggle. */
.light{
  --bg:250 250 250; --surface:255 255 255; --surface-2:243 243 244;
  --line:224 224 226; --fg:17 17 18; --muted:90 92 96; --faint:120 122 128;
  --primary:20 20 21; --primary-fg:255 255 255;
  --accent:17 17 18; --accent-fg:255 255 255;
  --navy-300:154 156 161; --navy-400:107 109 115; --navy-500:70 72 77;
  --navy-600:45 46 50; --navy-700:28 29 32; --navy-800:20 20 22; --navy-900:10 10 11;
  --brand-400:120 122 128; --brand-500:64 66 70; --brand-600:28 29 32;
  --steel:110 112 118;
  --tile:255 255 255; --tile-fg:17 17 18; --tile-line:226 226 229; --tile-muted:92 94 99;
  --wa:17 17 18;
  --shadow-card:0 1px 2px rgb(10 10 11/.05), 0 4px 16px rgb(10 10 11/.06);
  --shadow-hover:0 4px 12px rgb(10 10 11/.10), 0 14px 34px rgb(10 10 11/.14);
}

*,*::before,*::after{box-sizing:border-box;border-color:rgb(var(--line))}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0;background:rgb(var(--bg));color:rgb(var(--fg));
  font-family:var(--font-latin,'Inter'),var(--font-arabic,'Noto Kufi Arabic'),system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px;line-height:1.6;overflow-wrap:break-word;
  font-feature-settings:'kern','liga';text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
[dir=rtl] body{line-height:1.85}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:800;letter-spacing:-.01em}
p{margin:0 0 1rem}
ul,ol{margin:0;padding-inline-start:1.25rem}
::selection{background:rgb(var(--accent)/.18)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid rgb(var(--accent));outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgb(var(--line));border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgb(var(--faint))}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:rgb(var(--surface));padding:.75rem 1rem;border-radius:0 0 var(--radius) 0}
.skip:focus{inset-inline-start:0}

/* Layout ------------------------------------------------------------------ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1rem}
@media(min-width:1024px){.container{padding-inline:2rem}}
.section{padding-block:3.5rem}
@media(min-width:768px){.section{padding-block:5rem}}
.grid{display:grid;gap:1rem}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cols-4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cols-cat{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}
.wrap{flex-wrap:wrap}.grow{flex:1 1 auto}.col{flex-direction:column}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.text-sm{font-size:.875rem}.text-xs{font-size:.78rem}.text-lg{font-size:1.125rem}
.muted{color:rgb(var(--muted))}.faint{color:rgb(var(--faint))}
.bold{font-weight:700}.semibold{font-weight:600}
.center{text-align:center}
.hidden{display:none}
@media(max-width:767px){.md-only{display:none}}
@media(min-width:768px){.sm-only{display:none}}
/* The burger must be visible everywhere the desktop nav is NOT. The desktop nav
   starts at 1024px, so hiding the burger at 768px left tablets with no
   navigation at all — that was the "3 lines button not working" report. */
.nav-toggle{display:inline-flex}
@media(min-width:1024px){.nav-toggle{display:none}}

/* Type -------------------------------------------------------------------- */
.h-page{font-size:1.75rem}
.h-section{font-size:1.5rem}
@media(min-width:768px){.h-page{font-size:2.25rem}.h-section{font-size:1.875rem}}
.kicker{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgb(var(--brand-500))}
[dir=rtl] .kicker{letter-spacing:0}
.lead{font-size:1.05rem;color:rgb(var(--muted));max-width:62ch}

/* Buttons ----------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.5rem;
  font-size:.875rem;font-weight:600;padding:.625rem 1rem;border:1px solid transparent;cursor:pointer;
  transition:all .15s ease;white-space:nowrap;user-select:none;font-family:inherit}
.btn:disabled{opacity:.5;pointer-events:none}
.btn-primary{background:rgb(var(--fg));color:rgb(var(--bg))}
.btn-primary:hover{background:#fff}
.light .btn-primary{background:rgb(var(--navy-700));color:#fff}
.light .btn-primary:hover{background:rgb(var(--navy-800))}
.light .btn-primary{background:rgb(var(--navy-700))}
.btn-accent{background:#fff;color:#111}
.btn-accent:hover{background:rgb(214 214 218)}
.light .btn-accent{background:rgb(17 17 18);color:#fff}
.light .btn-accent:hover{background:rgb(40 41 45)}
.btn-outline{border-color:rgb(var(--line));background:rgb(var(--surface));color:rgb(var(--fg))}
.btn-outline:hover{background:rgb(var(--surface-2))}
.btn-ghost{color:rgb(var(--fg));background:transparent}
.btn-ghost:hover{background:rgb(var(--surface-2))}
/* The theme and menu buttons in the header are icon-only. Without a frame they
   read as empty space against a busy header — the toggle was clickable but
   effectively invisible. Give them the same outline the language button has. */
.header .btn-ghost{border-color:rgb(var(--line));background:rgb(var(--surface-2))}
.header .btn-ghost:hover{background:rgb(var(--surface));border-color:rgb(var(--fg))}
/* The glyphs rendered as empty pills on some Android browsers. currentColor
   inheritance through a flex button is the weak link, so stroke is stated
   outright, and the SVG is given a size and a shrink guard of its own rather
   than depending on the button's box. */
.header .btn-ghost svg{display:block;width:20px;height:20px;flex:0 0 20px;
  stroke:rgb(var(--fg));fill:none;stroke-width:2;opacity:1;visibility:visible}
.header .btn-ghost{color:rgb(var(--fg))}
.btn-wa{background:rgb(var(--wa));color:rgb(var(--bg))}
.light .btn-wa{color:#fff}
.btn-wa:hover{filter:brightness(.95)}
.btn-sm{padding:.375rem .75rem;font-size:.78rem}
/* Inside dark sections the accent button inverts to white-on-black. */
.hero .btn-outline,.gcc .btn-outline,.on-dark .btn-outline{background:transparent;color:#fff;border-color:rgb(255 255 255/.30)}
.hero .btn-outline:hover,.gcc .btn-outline:hover,.on-dark .btn-outline:hover{background:rgb(255 255 255/.10);border-color:#fff}
.btn-lg{padding:.75rem 1.5rem;font-size:1rem}
.btn-block{width:100%}

/* Surfaces ---------------------------------------------------------------- */
.card{border-radius:var(--radius);border:1px solid rgb(var(--line));background:rgb(var(--surface));box-shadow:var(--shadow-card)}
.chip{display:inline-flex;align-items:center;gap:.375rem;border-radius:999px;border:1px solid rgb(var(--line));
  background:rgb(var(--surface-2));padding:.25rem .75rem;font-size:.78rem;font-weight:500;color:rgb(var(--muted))}
.chip-active{background:rgb(var(--navy-700));color:#fff;border-color:transparent}
.badge{display:inline-flex;align-items:center;gap:.375rem;border-radius:999px;padding:.25rem .625rem;font-size:.72rem;font-weight:700}
.badge-ok{background:rgb(17 17 18);color:#fff}
.badge-warn{background:rgb(var(--surface-2));color:rgb(var(--muted));border:1px solid rgb(var(--line))}
.badge-off{background:rgb(var(--surface-2));color:rgb(var(--faint));border:1px solid rgb(var(--line))}
.light .badge-ok{background:rgb(17 17 18);color:#fff}
.light .badge-warn,.light .badge-off{background:rgb(var(--surface-2));color:rgb(var(--muted))}
.link{color:rgb(var(--navy-600));text-underline-offset:2px}
.link:hover{color:rgb(var(--brand-500));text-decoration:underline}
.light .link{color:rgb(var(--navy-600))}

/* Forms ------------------------------------------------------------------- */
.label{display:block;margin-bottom:.375rem;font-size:.875rem;font-weight:500}
.input,select.input,textarea.input{width:100%;border-radius:.5rem;border:1px solid rgb(var(--line));
  background:rgb(var(--surface));padding:.625rem .875rem;font-size:.9rem;color:rgb(var(--fg));
  font-family:inherit;transition:border-color .15s}
.input:focus{border-color:rgb(var(--fg));outline:none;box-shadow:0 0 0 3px rgb(255 255 255/.12)}
.light .input:focus{border-color:rgb(var(--navy-700));box-shadow:0 0 0 3px rgb(17 17 18/.10)}
textarea.input{resize:vertical;min-height:7rem}
.field{margin-bottom:1rem}
.error{color:rgb(var(--brand-600));font-size:.8rem;margin-top:.25rem}
.alert{border-radius:var(--radius);padding:.875rem 1rem;font-size:.9rem;margin-bottom:1rem}
.alert-ok{background:rgb(var(--surface-2));color:rgb(var(--fg));border:1px solid rgb(17 17 18)}
.alert-err{background:rgb(var(--surface-2));color:rgb(var(--fg));border:1px solid rgb(var(--fg));border-inline-start-width:4px}
/* Honeypot.
   Must be invisible to people, present in the DOM for bots, and — critically —
   must not extend the page.

   The previous rule used left:-9999px. In LTR that is harmless, because the
   scroll origin is the left edge and browsers do not make overflow before the
   origin scrollable. In RTL the origin flips to the right edge and that same
   box lands INSIDE the scrollable direction, so the document became roughly
   10,000px wide and Arabic pages could be scrolled left into empty space.
   The honeypot sits in the footer newsletter form, so this affected every page.

   The clip pattern below occupies a 1px box at its natural position and is
   clipped away, so there is no offset to overflow in either direction. */
.hp{position:absolute!important;width:1px;height:1px;margin:0;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  opacity:0;pointer-events:none}

/* Header ------------------------------------------------------------------ */
.header{position:sticky;top:0;z-index:50;background:rgb(var(--bg)/.90);backdrop-filter:blur(12px);
  border-bottom:1px solid rgb(var(--line))}
.header-top{display:flex;align-items:center;gap:1rem;padding-block:.85rem;min-height:var(--header-h)}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.05rem;flex:0 0 auto}
/* The logo is the identity — it stays large at every width and never shrinks
   below a legible size. Height is clamped rather than fixed so it scales with
   the viewport instead of stepping at breakpoints. */
.logo img{height:clamp(46px,5vw,64px);width:auto;max-width:none;display:block}
.footer .logo img{height:clamp(48px,5.4vw,70px)}
@media(max-width:480px){.logo img{height:42px}}
/* Exactly one mark is visible at a time.
   These must out-rank `.logo img` above, which also sets display:block —
   at 0,1,0 they lost to its 0,1,1 and both logos rendered side by side. */
.logo img.logo-mark-dark{display:none}
.light .logo img.logo-mark-light{display:none}
.light .logo img.logo-mark-dark{display:block}
.nav{display:none;gap:.25rem;align-items:center}
@media(min-width:1024px){.nav{display:flex}}
.nav a{padding:.5rem .75rem;border-radius:.5rem;font-size:.9rem;font-weight:600;color:rgb(var(--muted))}
.nav a:hover,.nav a[aria-current=page]{background:rgb(var(--surface-2));color:rgb(var(--fg))}
.searchbox{position:relative;flex:1 1 auto;max-width:420px}
.searchbox input{padding-inline-end:2.5rem}
/* Scoped to the header. The hero search reuses .searchbox for its dropdown
   positioning, and an absolutely-positioned submit there covered the input. */
.header .searchbox button{position:absolute;inset-inline-end:.25rem;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:.5rem;cursor:pointer;color:rgb(var(--muted))}
.header-actions{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}
.suggest{position:absolute;top:calc(100% + .375rem);inset-inline:0;z-index:60;
  background:rgb(var(--surface));border:1px solid rgb(var(--line));border-radius:var(--radius);
  box-shadow:var(--shadow-hover);overflow:hidden;max-height:22rem;overflow-y:auto}
.suggest[hidden]{display:none}
.suggest-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.625rem .875rem;font-size:.85rem;border-bottom:1px solid rgb(var(--line))}
.suggest-item:last-child{border-bottom:0}
.suggest-item:hover,.suggest-item:focus{background:rgb(var(--surface-2));outline:none}
.suggest-sku{font-size:.72rem;color:rgb(var(--faint));white-space:nowrap;font-variant-numeric:tabular-nums}
.suggest-main{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.suggest-main strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest-context{font-size:.7rem;color:rgb(var(--faint));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.catbar{border-top:1px solid rgb(var(--line));overflow-x:auto;scrollbar-width:none}
.catbar::-webkit-scrollbar{display:none}
.catbar ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:.5rem 0}
.catbar a{white-space:nowrap;padding:.375rem .75rem;border-radius:.5rem;font-size:.82rem;font-weight:600;color:rgb(var(--muted))}
.catbar a:hover{background:rgb(var(--surface-2));color:rgb(var(--fg))}
.mobile-nav{display:none;border-top:1px solid rgb(var(--line));padding:.75rem 0;
  max-height:calc(100vh - var(--header-h));overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-nav.open{display:block}
@media(min-width:1024px){.mobile-nav,.mobile-nav.open{display:none}}
.nav-toggle[aria-expanded=true]{background:rgb(var(--surface-2))}
.mobile-nav a{display:block;padding:.625rem .5rem;border-radius:.5rem;font-weight:600}
.mobile-nav a:hover{background:rgb(var(--surface-2))}

/* Hero -------------------------------------------------------------------- */
.hero{position:relative;background:rgb(var(--navy-900));color:#fff;overflow:hidden}
.hero .kicker{color:rgb(var(--steel))}
.hero::after{content:'';position:absolute;inset:0;background:
  linear-gradient(100deg,rgb(10 10 11/.95) 0%,rgb(10 10 11/.82) 52%,rgb(10 10 11/.62) 100%)}
.hero img.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero .container{position:relative;z-index:2;padding-block:4rem}
@media(min-width:768px){.hero .container{padding-block:6rem}}
.hero h1{font-size:2rem;max-width:22ch}
@media(min-width:768px){.hero h1{font-size:3rem}}
.hero p{color:rgb(198 200 206);max-width:56ch;margin-top:1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.hero-inner{position:relative;z-index:2}
.hero-copy{max-width:44rem}
/* Capability marks, deliberately not a counts line. */
.hero-marks{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin:2.25rem 0 0;padding:0;
  border-top:1px solid rgb(255 255 255/.16);padding-top:1.5rem}
.hero-marks li{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:rgb(214 216 221)}
.hero-marks .ui-icon{color:rgb(var(--steel))}
@media(max-width:600px){.hero-marks{gap:.625rem 1rem}.hero-marks li{font-size:.76rem}}

/* Product media — never crop, never stretch ------------------------------- */
.pmedia{position:relative;display:block;width:100%;aspect-ratio:4/3;background:rgb(var(--tile));
  overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
.pmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:.75rem;
  transition:transform .3s ease}
.pcard:hover .pmedia img{transform:scale(1.04)}
.pmedia .badge{position:absolute;top:.625rem;inset-inline-start:.625rem;z-index:2}

.pcard{display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s,transform .2s;
  background:rgb(var(--tile));color:rgb(var(--tile-fg));border-color:rgb(var(--tile-line))}
.pcard .pcard-meta,.pcard .pcard-sku{color:rgb(var(--tile-muted))}
.pcard .pmedia{background:rgb(246 246 247)}
.pcard h3 a{color:rgb(var(--tile-fg))}
.pcard:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.pcard-body{display:flex;flex-direction:column;flex:1;padding:1rem}
.pcard-brand{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgb(var(--brand-500));margin-bottom:.25rem}
[dir=rtl] .pcard-brand{letter-spacing:0}
.pcard h3{font-size:.9rem;font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard h3 a:hover{color:rgb(var(--brand-500))}
.pcard-meta{font-size:.75rem;color:rgb(var(--faint));margin-top:.25rem}
.pcard-specs{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.15rem}
.pcard-specs li{display:flex;justify-content:space-between;gap:.5rem;font-size:.7rem;
  color:rgb(var(--tile-muted));border-top:1px dotted rgb(var(--tile-line));padding-top:.2rem}
.pcard-specs li span{color:rgb(var(--tile-muted));opacity:.75;flex:0 0 auto}
.pcard-cta{margin-top:auto;padding-top:.75rem}

/* Product detail ---------------------------------------------------------- */
.pdetail{display:grid;gap:2rem}
@media(min-width:900px){.pdetail{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.gallery-main{position:relative;aspect-ratio:1/1;background:rgb(var(--tile));border-radius:var(--radius);
  border:1px solid rgb(var(--tile-line));overflow:hidden}
.gallery-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:1.5rem}
.thumbs{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}
.thumb{width:64px;height:64px;border-radius:.5rem;border:2px solid rgb(var(--line));overflow:hidden;
  background:rgb(var(--tile));cursor:pointer;padding:0}
.thumb[aria-selected=true]{border-color:rgb(var(--accent))}
.thumb img{width:100%;height:100%;object-fit:contain;padding:.25rem}

.spec-table{width:100%;border-collapse:collapse;font-size:.875rem}
.spec-table th,.spec-table td{padding:.625rem .875rem;text-align:start;border-bottom:1px solid rgb(var(--line));vertical-align:top}
.spec-table th{width:40%;font-weight:600;color:rgb(var(--fg));background:rgb(var(--surface-2))}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table td.spec-na{color:rgb(var(--faint));font-variant-numeric:tabular-nums;font-style:italic}
.spec-rfq-note{font-size:.85rem;color:rgb(var(--muted));line-height:1.6;margin:0}

.applications{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.applications li{position:relative;padding-inline-start:1.5rem;font-size:.9rem;color:rgb(var(--muted))}
.applications li::before{content:'';position:absolute;inset-inline-start:.25rem;top:.55em;width:.4rem;height:.4rem;
  border-radius:999px;background:rgb(var(--accent))}

.city-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}

/* Filters / listing ------------------------------------------------------- */
.listing{display:grid;gap:1.5rem}
@media(min-width:1024px){.listing{grid-template-columns:260px minmax(0,1fr)}}
/* Sticky ONLY where there is a sidebar to stick in. Below 1024px the filter
   panel is a normal block in a single-column grid; leaving it sticky pinned it
   to the viewport and the product grid scrolled straight through it. */
.filters{align-self:start}
@media(min-width:1024px){.filters{position:sticky;top:5.5rem}}
.filter-group{padding:1rem;border-bottom:1px solid rgb(var(--line))}
.filter-group:last-child{border-bottom:0}
.filter-group h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:rgb(var(--faint));margin-bottom:.625rem}
[dir=rtl] .filter-group h4{letter-spacing:0}
.filter-group label{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem 0;cursor:pointer}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.25rem}

.pagination{display:flex;flex-wrap:wrap;gap:.375rem;justify-content:center;margin-top:2.5rem;list-style:none;padding:0}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;
  height:2.25rem;padding:0 .625rem;border-radius:.5rem;border:1px solid rgb(var(--line));
  background:rgb(var(--surface));font-size:.85rem;font-weight:600}
.pagination .active span{background:rgb(var(--navy-700));color:#fff;border-color:transparent}
.pagination .disabled span{opacity:.45}

/* Breadcrumbs ------------------------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;font-size:.8rem;color:rgb(var(--faint));
  padding-block:1rem;list-style:none;margin:0}
.crumbs li:not(:last-child)::after{content:'/';margin-inline-start:.375rem;opacity:.5}
[dir=rtl] .crumbs li:not(:last-child)::after{content:'\\'}
.crumbs a:hover{color:rgb(var(--fg))}

/* Category / brand tiles -------------------------------------------------- */
.tile{display:flex;flex-direction:column;gap:.375rem;padding:1.25rem;border-radius:var(--radius);
  border:1px solid rgb(var(--line));background:rgb(var(--surface));transition:all .18s}
.tile:hover{border-color:rgb(var(--navy-400));box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.tile b{font-size:.95rem}
.tile span{font-size:.78rem;color:rgb(var(--faint))}

/* GCC section ------------------------------------------------------------- */
.gcc{background:rgb(var(--navy-800));color:#fff}
.gcc .kicker{color:rgb(var(--brand-400))}
.gcc h2{font-size:1.75rem;max-width:24ch}
@media(min-width:768px){.gcc h2{font-size:2.125rem}}
.gcc p{color:rgb(198 200 206);max-width:60ch}
.gcc-grid{display:grid;gap:.875rem;margin-top:2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.gcc-city{border:1px solid rgb(255 255 255/.16);border-radius:var(--radius);padding:1rem 1.125rem;
  background:rgb(255 255 255/.05);transition:background .18s}
.gcc-city:hover{background:rgb(255 255 255/.1)}
.gcc-city b{display:block;font-size:1.05rem}
.gcc-city span{font-size:.8rem;color:rgb(var(--steel))}
.gcc-city em{display:block;font-style:normal;font-size:.7rem;color:rgb(var(--brand-400));font-weight:700;margin-bottom:.375rem}

/* Blog -------------------------------------------------------------------- */
.post-card{display:flex;flex-direction:column;overflow:hidden}
.post-media{aspect-ratio:16/9;background:rgb(var(--surface-2));position:relative;overflow:hidden;
  border-bottom:1px solid rgb(var(--line))}
.post-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-body{padding:1.125rem;display:flex;flex-direction:column;flex:1}
.post-body h3{font-size:1rem;line-height:1.4}
.prose{max-width:72ch;font-size:1.02rem;line-height:1.8;color:rgb(var(--fg))}
.prose h2{font-size:1.4rem;margin:2rem 0 .75rem}
.prose h3{font-size:1.15rem;margin:1.5rem 0 .5rem}
.prose p{margin:0 0 1.1rem;color:rgb(var(--muted))}
.prose ul,.prose ol{margin:0 0 1.1rem;color:rgb(var(--muted))}
.prose li{margin-bottom:.375rem}
.prose blockquote{margin:1.5rem 0;padding-inline-start:1rem;border-inline-start:3px solid rgb(var(--accent));color:rgb(var(--muted));font-style:italic}
.prose a{color:rgb(var(--navy-600));text-decoration:underline;text-underline-offset:2px}
.light .prose a{color:rgb(var(--navy-600))}
.prose img{border-radius:var(--radius);margin:1.5rem 0}

/* Footer ------------------------------------------------------------------ */
.footer{background:rgb(6 6 7);color:rgb(180 182 188);margin-top:0;border-top:1px solid rgb(var(--line))}
.footer a{color:rgb(180 182 188)}
.footer a:hover{color:#fff}
.footer-grid{display:grid;gap:2rem;padding-block:3rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.footer h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.875rem}
[dir=rtl] .footer h4{letter-spacing:0}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;font-size:.875rem}
.footer-bottom{border-top:1px solid rgb(255 255 255/.1);padding-block:1.25rem;font-size:.8rem;
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between}

/* Floating contact -------------------------------------------------------- */
.floating{position:fixed;bottom:1.25rem;inset-inline-end:1.25rem;z-index:40;display:flex;flex-direction:column;gap:.625rem}
/* Solid, high-contrast, and inverted per theme so both buttons are legible on
   whichever background is behind them. The ring keeps them separated from
   photography when they overlap a hero image. */
.fab{width:3.25rem;height:3.25rem;border-radius:999px;display:flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;transition:transform .15s, box-shadow .15s;
  background:rgb(17 17 18);color:#fff;
  box-shadow:0 6px 20px rgb(0 0 0/.35), 0 0 0 1px rgb(255 255 255/.14)}
.fab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgb(0 0 0/.45), 0 0 0 1px rgb(255 255 255/.24)}
.fab svg{width:22px;height:22px;display:block}

/* Dark page: invert to a light button so it does not disappear into the page. */
.fab{background:#fff;color:#111;box-shadow:0 6px 20px rgb(0 0 0/.5), 0 0 0 1px rgb(255 255 255/.18)}
.fab:hover{background:rgb(226 226 228)}

/* Light page: the client asked for a dark button. */
.light .fab{background:rgb(17 17 18);color:#fff;
  box-shadow:0 6px 18px rgb(10 10 11/.22), 0 0 0 1px rgb(10 10 11/.10)}
.light .fab:hover{background:rgb(45 46 50)}

/* Both buttons share the treatment; the classes remain for targeting. */
.fab-wa,.fab-call{background:inherit}

/* Empty state ------------------------------------------------------------- */
.empty{text-align:center;padding:4rem 1rem;color:rgb(var(--muted))}
.empty h3{font-size:1.15rem;margin-bottom:.5rem;color:rgb(var(--fg))}

/* RTL flips --------------------------------------------------------------- */
[dir=rtl] .icon-flip{transform:scaleX(-1)}

@media print{.header,.footer,.floating,.filters{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ==========================================================================
   Homepage — catalogue showcases, industries, GCC, procurement process
   ========================================================================== */

/* Homepage search ---------------------------------------------------------- */
.homesearch-box{position:relative;display:flex;align-items:center;gap:.5rem;max-width:920px;margin:2.25rem 0 0}
.hero .homesearch-box .input{background:rgb(255 255 255/.96);border-color:transparent;color:#111}
.hero .homesearch-box .input::placeholder{color:rgb(110 112 118)}
.homesearch-box .input{padding-inline-start:2.75rem;height:3.25rem;font-size:1rem}
/* Pinned to the first row, not vertically centred in the flex container.
   With no `top` the icon fell back to its static position, which in a wrapped
   flex row is the centre of the whole box — it appeared floating between the
   input and the Search button. Anchoring to the input's own height keeps it
   inside the field whether the form is on one row or two. */
.homesearch-icon{position:absolute;inset-inline-start:.95rem;top:0;height:3.25rem;
  display:flex;align-items:center;color:rgb(var(--faint));pointer-events:none;z-index:2}
.homesearch-box .btn{height:3.25rem;padding-inline:1.5rem;flex:0 0 auto}
.quickfind{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;max-width:920px;margin:1rem 0 0;
  font-size:.78rem;color:rgb(var(--faint))}
.hero .quickfind{color:rgb(var(--steel))}
.hero .quickfind .chip{background:rgb(255 255 255/.08);border-color:rgb(255 255 255/.2);color:rgb(226 226 228)}
.hero .quickfind .chip:hover{background:rgb(255 255 255/.16)}
.quickfind span{text-transform:uppercase;letter-spacing:.08em;font-weight:700}
[dir=rtl] .quickfind span{letter-spacing:0}
@media(max-width:600px){
  .homesearch-box{flex-wrap:wrap}
  .homesearch-box .input{width:100%}
  .homesearch-box .btn{width:100%}
}

/* Catalogue showcase ------------------------------------------------------- */
.catalog{padding-block:2.25rem}
.catalog + .catalog{border-top:1px solid rgb(var(--line));margin-top:.5rem}

.catalog-top{display:grid;gap:1.75rem;align-items:center}
@media(min-width:900px){
  .catalog-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem}
  .catalog-flip .catalog-intro{order:2}
  .catalog-flip .catalog-visual{order:1}
}
.catalog-title{font-size:1.6rem;line-height:1.12;letter-spacing:-.02em;text-transform:uppercase}
@media(min-width:768px){.catalog-title{font-size:2rem}}
[dir=rtl] .catalog-title{letter-spacing:0;text-transform:none}
.catalog-desc{margin:.875rem 0 0;color:rgb(var(--muted));font-size:.92rem;line-height:1.65;max-width:44ch}
.catalog-cta{margin-top:1.5rem;letter-spacing:.07em;font-size:.72rem;font-weight:800}
[dir=rtl] .catalog-cta{letter-spacing:0;font-size:.85rem}

.catalog-visual{border-radius:var(--radius);overflow:hidden;border:1px solid rgb(var(--line));
  background:rgb(var(--surface-2));aspect-ratio:16/10}
/* contain, never cover: these banners are 4-product montages and cover was
   slicing the top and bottom rows off on narrow screens. */
.catalog-visual img{width:100%;height:100%;object-fit:contain;background:#fff}
.catalog-visual:empty{display:none}
@media(max-width:899px){.catalog-visual{aspect-ratio:16/10}}

.catalog-previews{display:grid;gap:.875rem;margin-top:1.75rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:560px){.catalog-previews{grid-template-columns:repeat(2,minmax(0,1fr))}}
.catalog-image{display:none}

/* Compact tile used inside the showcases. */
.pcard-compact .pcard-body{padding:.75rem}
.pcard-compact h3{font-size:.82rem;-webkit-line-clamp:2}
.pcard-compact .pcard-meta{font-size:.68rem}
.pcard-compact .pcard-cta{padding-top:.5rem}
.pcard-compact .btn{font-size:.7rem;padding:.3rem .5rem}

/* Why leading GCC contractors choose us ------------------------------------ */
.why{background:rgb(16 16 18);color:#fff;border-top:1px solid rgb(255 255 255/.08);
  border-bottom:1px solid rgb(255 255 255/.08)}
.why .lead{color:rgb(198 200 206);max-width:62ch}
/* Eight value propositions in a 4x2. auto-fit previously produced a 4+2 split
   with two empty cells on a wide screen. */
.why-grid{display:grid;gap:1px;background:rgb(255 255 255/.12);border:1px solid rgb(255 255 255/.12);
  border-radius:var(--radius);overflow:hidden;grid-template-columns:1fr}
@media(min-width:620px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.why-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.why-card{background:rgb(16 16 18);padding:1.75rem 1.5rem}
.light .why{background:rgb(20 20 22)}
.light .why-card{background:rgb(20 20 22)}
.why-card .ui-icon{color:rgb(var(--steel));margin-bottom:.875rem}
.why-card b{display:block;font-size:1.05rem;margin-bottom:.5rem}
.why-card p{font-size:.85rem;color:rgb(163 165 171);margin:0;line-height:1.65}

/* Industries --------------------------------------------------------------- */
/* Eight industries in a deliberate 4x2 — auto-fill left a ragged final row. */
.industry-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:620px){.industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.industry-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.industry-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid rgb(var(--line));
  background:rgb(var(--surface-2));min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .2s,box-shadow .2s}
.industry-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.light .industry-card{border-color:rgb(var(--line))}
/* Artwork stays in its original colour at the client's request. The gradient
   below still carries the text, so no desaturation is needed for legibility. */
.industry-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.industry-card::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgb(10 10 11/.92) 0%,rgb(10 10 11/.55) 45%,rgb(10 10 11/.18) 100%)}
.industry-body{position:relative;z-index:2;padding:1.25rem;color:#fff}
.industry-body b{display:flex;align-items:center;gap:.5rem;font-size:1.05rem}
.industry-body p{margin:.375rem 0 0;font-size:.82rem;color:rgb(198 200 206);line-height:1.6}

/* GCC band ----------------------------------------------------------------- */
.gcc-head{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-end}
.gcc-city .ui-icon{color:rgb(var(--steel));margin-bottom:.5rem}
.gcc-city em{display:block;font-style:normal;font-size:.75rem;color:rgb(var(--steel));margin-top:.375rem}

/* Procurement process ------------------------------------------------------ */
.process-grid{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem;counter-reset:step;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));position:relative}
.process-step{position:relative;padding-top:.5rem}
.process-num{display:block;font-size:.75rem;font-weight:800;letter-spacing:.14em;color:rgb(var(--steel));margin-bottom:.75rem}
[dir=rtl] .process-num{letter-spacing:0}
.process-step .ui-icon{color:rgb(var(--fg));background:rgb(var(--surface-2));border:1px solid rgb(var(--line));
  border-radius:.75rem;padding:.75rem;box-sizing:content-box;margin-bottom:.875rem}
.process-step b{display:block;font-size:1rem;margin-bottom:.375rem}
.process-step p{font-size:.85rem;color:rgb(var(--muted));margin:0;line-height:1.65}
@media(min-width:900px){
  .process-step::before{content:'';position:absolute;top:3.35rem;inset-inline-start:3.9rem;width:calc(100% - 3.9rem);
    height:1px;background:rgb(var(--line))}
  .process-step:last-child::before{display:none}
}

/* Brand / catalogue cards -------------------------------------------------- */
.brand-card{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem;border-radius:var(--radius);
  border:1px solid rgb(var(--line));background:rgb(var(--surface));transition:all .18s}
.brand-card:hover{border-color:rgb(var(--navy-400));box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.brand-logo{height:72px;display:flex;align-items:center;justify-content:center;background:rgb(var(--tile));
  border:1px solid rgb(var(--tile-line));border-radius:.5rem;padding:.625rem}
.brand-logo img{max-height:52px;width:auto;object-fit:contain;filter:grayscale(1)}
.brand-logo b{color:rgb(var(--tile-fg));font-size:1.05rem}
.brand-card:hover .brand-logo img{filter:grayscale(0)}
.brand-card p{font-size:.85rem;color:rgb(var(--muted));margin:0;line-height:1.6}
.pdf-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;
  border:1px solid rgb(var(--line));border-radius:999px;padding:.25rem .7rem;color:rgb(var(--muted))}


/* ==========================================================================
   Slide scaffolding, catalog index, GCC coverage, search empty state
   ========================================================================== */
.slide{position:relative}
.tone-alt{background:rgb(15 15 17)}
.light .tone-alt{background:rgb(var(--surface-2))}
.slide-head{margin-bottom:2.5rem;max-width:52rem}
.slide-final .why{margin-top:3rem}

/* Suggestions ------------------------------------------------------------- */
.suggest-empty{padding:1rem .875rem;font-size:.85rem;color:rgb(var(--faint));text-align:center}

/* Product card meta ------------------------------------------------------- */
.pcard-sep{margin-inline:.3rem;color:rgb(var(--steel))}
.pcard-sku{font-size:.7rem;color:rgb(var(--faint));margin:.15rem 0 0;font-variant-numeric:tabular-nums;
  letter-spacing:.03em}
[dir=rtl] .pcard-sku{letter-spacing:0}

/* Catalog index / subcategory lists --------------------------------------- */
.catalog-index{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.catalog-index-card{display:flex;flex-direction:column;padding:1.25rem;border-radius:var(--radius);
  border:1px solid rgb(var(--line));background:rgb(var(--surface));transition:all .18s}
.catalog-index-card:hover{border-color:rgb(var(--navy-400));box-shadow:var(--shadow-hover)}
.catalog-index-head{display:flex;gap:.875rem;align-items:flex-start}
.catalog-index-head img{width:72px;height:56px;object-fit:contain;background:#fff;border-radius:.5rem;flex:0 0 auto;
  filter:grayscale(1);border:1px solid rgb(var(--line));background:rgb(var(--surface-2))}
.catalog-index-head b{display:block;font-size:1rem}
.catalog-index-head em{display:block;font-style:normal;font-size:.78rem;color:rgb(var(--muted));margin-top:.25rem;line-height:1.5}
.subcat-list{list-style:none;margin:.875rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.375rem}
.subcat-list a{display:inline-block;font-size:.75rem;padding:.2rem .55rem;border-radius:999px;
  border:1px solid rgb(var(--line));color:rgb(var(--muted));background:rgb(var(--surface-2))}
.subcat-list a:hover{background:rgb(var(--fg));color:rgb(var(--surface));border-color:transparent}
.subcat-strip{display:flex;flex-wrap:wrap;gap:.5rem;padding-bottom:.25rem}

/* GCC coverage ------------------------------------------------------------ */
.gcc-grid{display:grid;gap:1rem;margin-top:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gcc-country{border:1px solid rgb(255 255 255/.16);border-radius:var(--radius);padding:1.125rem 1.25rem;
  background:rgb(255 255 255/.05);transition:background .18s}
.gcc-country:hover{background:rgb(255 255 255/.1)}
.gcc-country-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.gcc-country-head b{font-size:1rem}
.gcc-flag{font-size:1.35rem;line-height:1}
.gcc-country-head .ui-icon{color:rgb(var(--steel))}
.gcc-cities{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.gcc-cities li{font-size:.82rem;color:rgb(var(--steel));padding-inline-start:.75rem;position:relative}
.gcc-cities li::before{content:'';position:absolute;inset-inline-start:0;top:.6em;width:3px;height:3px;
  border-radius:999px;background:rgb(var(--steel))}
.gcc-country em{display:block;font-style:normal;font-size:.75rem;color:rgb(var(--steel));margin-top:.625rem}

/* PDF pill states --------------------------------------------------------- */
.pdf-pill-muted{color:rgb(var(--faint));border-style:dashed;background:rgb(var(--surface-2))}


/* ==========================================================================
   MOBILE — touch targets, header, search, filters, grid
   Everything here is inside a max-width query, so desktop is untouched.
   ========================================================================== */
@media(max-width:1023px){

  /* Header ---------------------------------------------------------------- */
  /* The bar carried a 132px logo plus four controls at 28px tall. Every
     control is now at least 44px, which is the minimum comfortable touch
     target, and the logo gives back the space to pay for it. */
  .header-top{gap:.5rem;padding-block:.6rem;min-height:auto}
  .logo img{height:44px}
  .header-actions{gap:.375rem;flex:0 0 auto}

  .header-actions .btn{min-height:44px;min-width:44px;padding-inline:.75rem;font-size:.8rem}
  /* Icon-only controls stay square; the label buttons keep their text. */
  .header-actions .btn-ghost{padding:0;width:44px}
  .header-actions .btn-ghost svg{width:20px;height:20px}

  /* Request Quote is the primary action, so it keeps its label and may
     shrink its text before anything else wraps. */
  .header-actions .btn-accent{padding-inline:.875rem;white-space:nowrap}

  /* Category strip: give it real touch height and let it scroll. */
  .catbar ul{padding:.375rem 0;gap:.125rem}
  .catbar a{padding:.625rem .75rem;font-size:.85rem}
}

/* Homepage search ---------------------------------------------------------- */
@media(max-width:640px){
  /* Input first, full width, obviously typeable; the action sits under it
     rather than on top of it. */
  .homesearch-box{flex-wrap:wrap;gap:.625rem;margin-top:1.75rem}
  .homesearch-box .input{width:100%;flex:1 1 100%;height:3.25rem;font-size:16px}
  .homesearch-box .btn{position:static;width:100%;height:3rem}
  .quickfind{gap:.4rem}
  .quickfind .chip{min-height:36px;display:inline-flex;align-items:center}
}

/* Browse-by-category tree --------------------------------------------------
   On a phone this grid is taller than the screen and pushes the product list
   far below the fold; the client asked for a single way in instead. It becomes
   a disclosure, closed by default, with a plain "view all products" button
   beside it. Subcategory links inside still go to their own page, which is
   what they already did. */
@media(max-width:1023px){
  .browse-heading{display:none}          /* the summary already carries the label */
  .browse-tree .catalog-index{margin-top:1rem}
  .browse-actions{display:flex;gap:.5rem;margin-top:.75rem}
  .browse-actions .btn{flex:1 1 auto;min-height:46px}
}
@media(min-width:1024px){
  /* Desktop is unchanged: the summary and the shortcut button disappear and the
     grid is always open, whatever state the disclosure was left in on a phone. */
  .browse-toggle{display:none}
  .browse-actions{display:none}
  .browse-details:not([open]) .catalog-index{display:grid}
}

/* Filters ------------------------------------------------------------------ */
@media(max-width:1023px){
  /* A plain <details> disclosure: normal document flow, no drawer, no
     z-index, no body-scroll locking to get wrong. Products always start
     after it because it occupies real space. */
  .filters{position:static;margin-bottom:1rem}
  .browse-toggle,
  .filters-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
    min-height:48px;padding:.75rem 1rem;font-weight:700;font-size:.9rem;cursor:pointer;
    border:1px solid rgb(var(--line));border-radius:var(--radius);background:rgb(var(--surface));
    color:rgb(var(--fg));list-style:none}
  .browse-toggle::-webkit-details-marker,
  .filters-toggle::-webkit-details-marker{display:none}
  .browse-toggle::after,
  .filters-toggle::after{content:'+';font-size:1.25rem;line-height:1;font-weight:400}
  details[open] > .filters-toggle::after{content:'−'}
  details[open] > .filters-toggle{border-bottom-left-radius:0;border-bottom-right-radius:0}
  .filters-body{border:1px solid rgb(var(--line));border-top:0;
    border-radius:0 0 var(--radius) var(--radius);max-height:60vh;overflow-y:auto}
  .filter-group label{min-height:40px;display:flex;align-items:center;gap:.5rem}
}
@media(min-width:1024px){
  /* The disclosure is a mobile affordance only: hide the summary and force the
     panel open so a closed <details> on a phone cannot follow the user to
     desktop. */
  .filters-toggle{display:none}
  .filters-body{border:0;max-height:none;overflow:visible;display:block !important}
  .filters-details:not([open]) .filters-body{display:block !important}
}

/* Product grid ------------------------------------------------------------- */
@media(max-width:1023px){
  /* The photograph is the point of the card on a small screen. A square well
     with almost no inset gives roughly 60% more visible image than the 4:3 box
     with 12px padding did, and object-fit stays `contain` so nothing crops. */
  .pmedia{aspect-ratio:1/1}
  .pmedia img{padding:.375rem}
}
@media(max-width:640px){
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .pcard h3{font-size:.85rem;overflow-wrap:anywhere}
  .pcard-body{padding:.75rem}
  .pcard .btn{min-height:40px;font-size:.75rem}
  .pmedia img{padding:.25rem}
}
@media(max-width:360px){
  /* Two columns stop being readable below ~360px. */
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
}

/* Floating buttons --------------------------------------------------------- */
@media(max-width:640px){
  /* They were sitting over product cards and the Get Quote button. Smaller,
     tucked into the corner, and clear of the iOS browser chrome. */
  .floating{gap:.5rem;inset-inline-end:.625rem;bottom:calc(.75rem + env(safe-area-inset-bottom))}
  .fab{width:2.75rem;height:2.75rem}
  .fab svg{width:19px;height:19px}
}

/* Language switch ----------------------------------------------------------
   The word wherever it fits; a globe glyph once the row is tight. Both forms
   are a full 44px target. */
.lang-switch-icon{display:none}
@media(max-width:719px){
  .lang-switch{padding:0;width:44px;justify-content:center}
  .lang-switch-text{display:none}
  .lang-switch-icon{display:block}
}

/* Header CTA ---------------------------------------------------------------
   Desktop and tablet: inline at the end of the bar, unchanged.

   Below 520px it takes its own full-width row. Measured at 320px, keeping it
   inline needed 352px of a 288px row, and the only way to make that fit was to
   shrink the logo to 34px — at which point the wordmark's tagline is
   unreadable. Giving the CTA its own row lets the logo stay at 42-44px, every
   control stay at 44px, and the CTA end up more prominent than it was. */
.header-cta{flex:0 0 auto}
@media(max-width:519px){
  .header-top{flex-wrap:wrap;row-gap:.5rem}
  .logo{flex:0 1 auto;min-width:0}
  .logo img{height:42px}
  .header-actions{margin-inline-start:auto}
  .header-cta{order:9;flex:1 0 100%;width:100%}
  .header-cta .btn{width:100%;min-height:46px;font-size:.9rem}
}