/* ==========================================================================
   ME Filter — design system
   Layout tokens mirror the Ignavo (KLBTheme) auto-parts theme, Home 2 layout.
   Type and colour are ME Filter's own brand.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Type — self-hosted, subset to the scripts the site actually prints.
   unicode-range keeps an Arabic page from downloading the Latin faces it
   never paints, and vice versa. Latin subsets include Latin Extended-A so
   Turkish (İ ı Ş ş Ğ ğ) renders from the brand face, not a fallback.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Barlow Condensed"; src:url("../fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+2013,U+2014,U+2018-201D,U+2022,U+2026,U+20AC,U+2190-2193}
@font-face{font-family:"Barlow Condensed"; src:url("../fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+2013,U+2014,U+2018-201D,U+2022,U+2026,U+20AC,U+2190-2193}

@font-face{font-family:"IBM Plex Sans"; src:url("../fonts/plex-sans-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+2013,U+2014,U+2018-201D,U+2022,U+2026,U+20AC,U+2190-2193}
@font-face{font-family:"IBM Plex Sans"; src:url("../fonts/plex-sans-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+2013,U+2014,U+2018-201D,U+2022,U+2026,U+20AC,U+2190-2193}
@font-face{font-family:"IBM Plex Sans"; src:url("../fonts/plex-sans-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+2013,U+2014,U+2018-201D,U+2022,U+2026,U+20AC,U+2190-2193}

@font-face{font-family:"Cairo"; src:url("../fonts/cairo-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Cairo"; src:url("../fonts/cairo-900.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

@font-face{font-family:"IBM Plex Sans Arabic"; src:url("../fonts/plex-arabic-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic"; src:url("../fonts/plex-arabic-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic"; src:url("../fonts/plex-arabic-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

:root{
  /* brand */
  --primary:#12294A;      --primary-600:#0D1F39;  --primary-700:#091629;
  --primary-050:#EEF1F6;  --primary-100:#D6DEEA;
  --secondary:#D42027;    --secondary-600:#B31A20;
  --on-primary:#fff;      --on-secondary:#fff;

  /* neutrals (slate) */
  --g50:#f8fafc;  --g100:#f1f5f9; --g200:#e2e8f0; --g300:#cbd5e1;
  --g400:#94a3b8; --g500:#64748b; --g600:#475569; --g700:#334155;
  --g800:#1e293b; --g900:#0f172a; --g950:#020617;

  /* semantic */
  --body-bg:#fff;  --surface:#fff;  --surface-2:var(--g50);
  --text:#0f172a;  --text-muted:var(--g500);  --border:var(--g200);

  /* type */
  --font:"IBM Plex Sans","IBM Plex Sans Arabic","Helvetica Neue",Arial,sans-serif;
  --font-head:"Barlow Condensed","Cairo","IBM Plex Sans Arabic",sans-serif;
  /* part numbers: same family as the body, but fixed-width digits so codes
     line up down a column and 0 never reads as O */
  --font-code:"IBM Plex Sans","IBM Plex Sans Arabic",sans-serif;
  --code-feat:"tnum" 1,"zero" 1;
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px; --fs-xl:20px;
  --fs-2xl:22px; --fs-3xl:24px; --fs-4xl:26px; --fs-6xl:30px; --fs-7xl:32px;
  --fs-8xl:36px; --fs-9xl:40px; --fs-10xl:42px; --fs-11xl:48px; --fs-12xl:56px;
  --lh-body:1.6; --lh-head:1.5;
  --ls-body:-0.025em; --ls-head:-0.02em;

  /* layout */
  --wrap:1360px; --pad:32px; --radius:8px;
  --radius-sm:6px; --radius-lg:12px; --radius-full:9999px;

  /* controls */
  --ctl-sm:34px; --ctl:42px; --ctl-lg:48px;

  /* elevation */
  --sh-xs:0 1px 2px 0 rgba(0,0,0,.05);
  --sh-sm:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
  --sh-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --sh-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --sh-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);

  /* motion */
  --ease:cubic-bezier(.7,0,.3,1); --ease-out:cubic-bezier(0,0,.2,1);
  --t-fast:.15s; --t:.3s; --t-slow:.5s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--body-bg); color:var(--text);
  font-family:var(--font); font-size:var(--fs-base); font-weight:400;
  line-height:var(--lh-body); letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{margin:0 0 .5em; font-family:var(--font-head); font-weight:700;
  line-height:var(--lh-head); letter-spacing:var(--ls-head); color:var(--g900)}
/* Barlow Condensed is narrow, so Latin headings can run a step larger and
   tighter than the old stack; Arabic falls through to Cairo, which is not
   condensed, so it gets its own tracking. */
:root:lang(en) h1,:root:lang(tr) h1{letter-spacing:-.03em}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5{letter-spacing:0}
h1{font-size:var(--fs-11xl)} h2{font-size:var(--fs-8xl)} h3{font-size:var(--fs-4xl)}
h4{font-size:var(--fs-xl)} p{margin:0 0 1em}
a{color:inherit; text-decoration:none; transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--primary)}
img{max-width:100%; height:auto; display:block}
ul,ol{margin:0 0 1em; padding-inline-start:1.25em}
hr{border:0; border-top:1px solid var(--border); margin:2rem 0}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px}

/* Arabic typography */
[dir="rtl"] body,[dir="rtl"]{--ls-body:0; --ls-head:0}
[dir="rtl"]{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif}

/* -------------------------------------------------------------- layout */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:72px}
.section--tight{padding-block:48px}
.section--flush{padding-block:0}
.grid{display:grid; gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
/* centres a ragged last row, which grid-template-columns cannot do */
.grid--center{display:flex; flex-wrap:wrap; justify-content:center}
.g-3.grid--center > *{flex:0 1 calc((100% - 48px) / 3)}
.g-4.grid--center > *{flex:0 1 calc((100% - 72px) / 4)}
.row{display:flex; gap:16px; align-items:center}
.row--between{justify-content:space-between}
.row--wrap{flex-wrap:wrap}
.spacer{flex:1}
.muted{color:var(--text-muted)}
.center{text-align:center}
.hide{display:none !important}

/* ------------------------------------------------------- section titles */
.sec-head{display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:14px; margin-bottom:28px}
.sec-head__text{max-width:640px; margin-inline:auto}
.sec-foot{display:flex; justify-content:center; margin-top:30px}
.sec-head h2{margin:0 0 6px; font-size:var(--fs-7xl)}
.sec-head p{margin:0; color:var(--text-muted); font-size:var(--fs-sm)}
.eyebrow{
  display:inline-block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--primary); margin-bottom:10px;
}

/* -------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--ctl); padding-inline:20px; border:1px solid transparent;
  border-radius:var(--radius); background:var(--g200); color:var(--g800);
  font:600 var(--fs-sm)/1 var(--font); letter-spacing:-.02em;
  cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.btn:hover{background:var(--g300); color:var(--g900)}
.btn--primary{background:var(--primary); color:var(--on-primary)}
.btn--primary:hover{background:var(--primary-600); color:#fff}
.btn--secondary{background:var(--secondary); color:var(--on-secondary)}
.btn--secondary:hover{background:var(--secondary-600); color:#fff}
.btn--ghost{background:transparent; border-color:var(--border); color:var(--g700)}
.btn--ghost:hover{background:var(--g100); border-color:var(--g300)}
.btn--light{background:#fff; color:var(--g900)}
.btn--light:hover{background:var(--g100)}
.btn--lg{height:var(--ctl-lg); padding-inline:26px; font-size:var(--fs-sm)}
.btn--sm{height:var(--ctl-sm); padding-inline:14px; font-size:var(--fs-xs)}
.btn--block{width:100%}
.btn--icon{padding-inline:0; width:var(--ctl); flex:0 0 auto}

/* --------------------------------------------------------------- forms */
.field{display:block; margin-bottom:16px}
.field > label{display:block; font-size:13px; font-weight:500; color:var(--g700); margin-bottom:6px}
.input,.select,.textarea{
  width:100%; height:var(--ctl); padding-inline:14px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:#fff; color:var(--text);
  font:500 var(--fs-sm)/1 var(--font); letter-spacing:-.02em;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.textarea{height:auto; min-height:120px; padding-block:12px; line-height:1.6; resize:vertical}
.select{
  appearance:none; padding-inline-end:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:14px;
}
[dir="rtl"] .select{background-position:left 14px center}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-050)}
.input::placeholder,.textarea::placeholder{color:var(--g400)}

/* --------------------------------------------------------------- header */
.topbar{background:var(--g900); color:var(--g300); font-size:var(--fs-xs)}
.topbar a{color:var(--g300)} .topbar a:hover{color:#fff}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:16px; height:38px}
.topbar__links{display:flex; gap:18px; align-items:center}

.header{background:var(--primary); color:#fff; position:relative; z-index:60}
.header__main{display:flex; align-items:center; gap:28px; height:84px}
.brand{display:flex; align-items:center; gap:10px; font:700 var(--fs-7xl)/1 var(--font); letter-spacing:-.02em; color:#fff}
.brand:hover{color:#fff}
.brand img{height:48px; width:auto}
.brand__mark{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:var(--radius); background:#fff; color:var(--primary); font-size:20px; font-weight:800}
.brand__name{font-family:var(--font-head); font-size:29px; font-weight:700; letter-spacing:.01em}
.brand__name span{color:var(--secondary)}

.searchbar{flex:1; max-width:640px; position:relative; display:flex}
.searchbar .input{height:var(--ctl-lg); border-radius:var(--radius); border-color:transparent; padding-inline-end:52px}
.searchbar button{
  position:absolute; inset-inline-end:5px; top:5px; width:38px; height:38px;
  border:0; border-radius:var(--radius-sm); background:var(--secondary); color:#fff; cursor:pointer;
  display:grid; place-items:center; transition:background var(--t-fast) var(--ease);
}
.searchbar button:hover{background:var(--secondary-600)}
.hact.hact--search{display:none; border:0; background:none; padding:0; cursor:pointer}

.header__actions{display:flex; align-items:center; gap:20px; margin-inline-start:auto}
.hact{display:flex; align-items:center; gap:9px; color:#fff; font-size:var(--fs-xs); line-height:1.25}
.hact:hover{color:#cfe3f2}
.hact__ico{display:grid; place-items:center; width:40px; height:40px; border-radius:var(--radius-full); background:rgba(255,255,255,.14)}
.hact__label{display:block; opacity:.75; font-size:11px}
.hact__value{display:block; font-weight:600; font-size:13px}

/* --------------------------------------------------------------- navbar */
.nav{background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50}
.nav__in{display:flex; align-items:center; gap:28px; height:56px; justify-content:center}
.nav__menu{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0}
.nav__menu > li > a{
  display:flex; align-items:center; gap:8px; height:56px;
  font:600 15px/1 var(--font); letter-spacing:-.025em; color:var(--g800);
  border-bottom:2px solid transparent;
}
.nav__menu > li > a:hover,.nav__menu > li.is-active > a{color:var(--primary); border-bottom-color:var(--primary)}

.catbtn{
  display:flex; align-items:center; gap:10px; height:40px; padding-inline:16px;
  border-radius:var(--radius); background:var(--g100); color:var(--g800);
  font:600 14px/1 var(--font); cursor:pointer; border:0;
}
.catbtn:hover{background:var(--g200)}

.dropdown{position:relative}
.dropdown__panel{
  position:absolute; inset-inline-start:0; top:100%; min-width:260px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--sh-lg); padding:8px; list-style:none; margin:0;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),visibility var(--t-fast);
  z-index:70;
}
.dropdown:hover .dropdown__panel,.dropdown:focus-within .dropdown__panel{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown__panel a{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; color:var(--g700)}
.dropdown__panel a:hover{background:var(--g100); color:var(--primary)}
.dropdown__panel .count{font-size:12px; color:var(--g400)}

/* country flags in the language switcher */
.flag{flex:0 0 auto; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(15,23,42,.14)}
.hact__ico.hact__ico--flag{width:auto; height:auto; background:none; border-radius:0}
.hact__ico.hact__ico--flag .flag{width:26px; height:19px; border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.dropdown__panel--lang{min-width:170px}
.dropdown__panel--lang a{justify-content:flex-start; gap:10px}

.burger{display:none; width:40px; height:40px; border:0; background:transparent; cursor:pointer; color:#fff}

/* ------------------------------------------------------------------ hero */
.hero{position:relative; background:var(--g900); color:#fff; overflow:hidden}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(100deg,rgba(6,13,24,.50) 0%,rgba(6,13,24,.24) 45%,rgba(6,13,24,.05) 100%)}
[dir="rtl"] .hero::after{background:linear-gradient(260deg,rgba(6,13,24,.50) 0%,rgba(6,13,24,.24) 45%,rgba(6,13,24,.05) 100%)}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0;
  background:
    radial-gradient(90% 70% at 78% 22%, #3E86D6 0%, transparent 55%),
    radial-gradient(85% 75% at 22% 78%, #E03A41 0%, transparent 50%),
    radial-gradient(120% 100% at 50% 50%, #1B4A8C 0%, #08111F 72%)}
.hero__canvas.is-live{background:none}
.hero__in{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding-block:88px}
.hero h1{color:#fff; font-size:var(--fs-12xl); margin-bottom:18px; max-width:16ch}
.hero p{color:#cbd5e1; font-size:var(--fs-lg); max-width:52ch; margin-bottom:28px}
.hero .eyebrow{color:#7dd3fc}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}

/* photo hero: the picture replaces the painted gradient, so the scrim has to
   do the work the flat background used to do — a dark pool under the copy and
   a lift off the bottom, plus a shadow on the type itself, because the product
   row in the picture is bright exactly where the paragraph sits. */
.hero__cover{position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center bottom; pointer-events:none;
  -webkit-user-select:none; user-select:none; filter:brightness(.78) saturate(.95)}
.hero--photo .hero__canvas{display:none}
.hero--photo::after{background:
  radial-gradient(120% 90% at 100% 60%, rgba(6,13,24,.90) 0%, rgba(6,13,24,.68) 40%, rgba(6,13,24,.30) 75%),
  linear-gradient(to top, rgba(6,13,24,.70), rgba(6,13,24,.15) 55%),
  rgba(6,13,24,.34)}
[dir="ltr"] .hero--photo::after{background:
  radial-gradient(120% 90% at 0% 60%, rgba(6,13,24,.90) 0%, rgba(6,13,24,.68) 40%, rgba(6,13,24,.30) 75%),
  linear-gradient(to top, rgba(6,13,24,.70), rgba(6,13,24,.15) 55%),
  rgba(6,13,24,.34)}
/* over a photo the headline carries the hero on its own, so it wants to be
   two tight lines rather than a three-line stack fighting the picture */
.hero--photo h1{font-size:clamp(30px, 3.4vw, 50px); max-width:22ch; margin-bottom:26px;
  text-shadow:0 2px 18px rgba(6,13,24,.60)}
.hero--photo p{color:#e8edf5; text-shadow:0 1px 12px rgba(6,13,24,.80)}
.hero--photo .hero__in{padding-block:70px}

/* finder card */
.finder{background:#fff; color:var(--text); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--sh-xl)}
.finder h3{font-size:var(--fs-2xl); margin-bottom:6px}
.finder > p{font-size:13px; color:var(--text-muted); margin-bottom:18px}
.finder__step{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.finder__num{flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:var(--radius-full); background:var(--primary-050); color:var(--primary); font:700 12px/1 var(--font-code); font-variant-numeric:tabular-nums; font-feature-settings:var(--code-feat)}

/* --------------------------------------------------------- feature strip */
.feature-strip{margin-top:-34px; position:relative; z-index:5}
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:#fff}
.feature{display:flex; gap:14px; padding:24px; border-inline-end:1px solid var(--border)}
.feature:last-child{border-inline-end:0}
.feature__ico{flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius); background:var(--primary-050); color:var(--primary)}
.feature h4{font-size:15px; margin:0 0 4px}
.feature p{font-size:13px; color:var(--text-muted); margin:0; line-height:1.55}

/* ---------------------------------------------------------- product card */
.pcard{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.pcard:hover{box-shadow:var(--sh-lg); border-color:var(--g300); transform:translateY(-2px)}
/* the thumb has to stay square whatever shape gets uploaded: `min-height:0`
   stops a tall picture from pushing the grid item past its aspect-ratio, and
   capping both axes keeps a wide one inside instead of clipped. */
.pcard__thumb{position:relative; aspect-ratio:1/1; min-height:0; overflow:hidden;
  background:var(--g50); display:grid; place-items:center; padding:18px}
.pcard__thumb img{max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; mix-blend-mode:multiply; transition:transform var(--t-slow) var(--ease)}
.pcard:hover .pcard__thumb img{transform:scale(1.06)}
.pcard__badge{position:absolute; inset-block-start:10px; inset-inline-start:10px; padding:4px 9px; border-radius:var(--radius-sm); background:var(--secondary); color:#fff; font:700 10px/1.4 var(--font); letter-spacing:.04em; text-transform:uppercase}
.pcard__body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.pcard__cat{font-size:11px; font-weight:600; color:var(--primary); text-transform:uppercase; letter-spacing:.05em}
.pcard__code{font:700 var(--fs-lg)/1.2 var(--font-code); letter-spacing:.02em; color:var(--g900); font-variant-numeric:tabular-nums; font-feature-settings:var(--code-feat)}
.pcard__name{font-size:13px; color:var(--text-muted); line-height:1.5; margin:0}
.pcard__foot{margin-top:auto; padding-top:12px; display:flex; align-items:center; gap:8px}
.pcard__brands{display:flex; gap:5px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; padding:3px 8px; border-radius:var(--radius-full); background:var(--g100); color:var(--g600); font-size:11px; font-weight:600}

/* --------------------------------------------------------- category card */
.ccard{display:flex; align-items:center; gap:14px; padding:18px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.ccard:hover{border-color:var(--primary); box-shadow:var(--sh-md); color:inherit}
.ccard__ico{flex:0 0 auto; display:grid; place-items:center; width:52px; height:52px; border-radius:var(--radius); background:var(--primary-050); color:var(--primary)}
.ccard h4{margin:0 0 2px; font-size:15px}
.ccard span{font-size:12px; color:var(--text-muted)}

/* ------------------------------------------------------------ brand card */
.bcard{display:block; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.bcard:hover{box-shadow:var(--sh-lg); border-color:var(--g300)}
.bcard__logo{display:grid; place-items:center; height:150px; padding:28px; background:var(--g50); border-bottom:1px solid var(--border)}
.bcard__logo img{max-height:78px; max-width:100%; width:auto; object-fit:contain}
/* Fallback when a brand has no mark: the name set in type. Long names like
   Mercedes-Benz overflowed the card and were clipped, so let it scale. */
.bcard__word{font:700 clamp(17px, 3.4vw, 30px)/1.2 var(--font-head); color:var(--g400);
  text-align:center; max-width:100%; overflow-wrap:anywhere; letter-spacing:.01em}
.bcard__body{padding:18px 20px 22px}
.bcard__body h3{font-size:var(--fs-xl); margin:0 0 6px}
.bcard__body p{font-size:13px; color:var(--text-muted); line-height:1.6; margin:0 0 14px}
.bcard__meta{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--primary); font-weight:600}

/* ------------------------------------------------------------- page head */
.phead{background:var(--g50); border-bottom:1px solid var(--border); padding-block:36px}
.phead h1{font-size:var(--fs-9xl); margin:0 0 8px}
.phead p{margin:0; color:var(--text-muted); max-width:70ch}
.crumbs{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--text-muted); margin-bottom:10px}
.crumbs a:hover{color:var(--primary)}
.crumbs .sep{opacity:.5}

/* the About page runs the hero's gradient behind its header band */
.phead--live{position:relative; overflow:hidden; border-bottom:0; text-align:center;
  background:var(--g900); color:#fff; padding-block:72px}
.phead--live > .wrap{position:relative; z-index:2}
.phead--live::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,rgba(6,13,24,.58) 0%,rgba(6,13,24,.24) 45%,rgba(6,13,24,.74) 100%)}
.phead--live h1{color:#fff}
.phead--live p{color:#cbd5e1; max-width:60ch; margin-inline:auto}
.phead--live .crumbs{justify-content:center; color:rgba(255,255,255,.6)}
.phead--live .crumbs a{color:rgba(255,255,255,.6)}
.phead--live .crumbs a:hover{color:#fff}

.wrap--center{text-align:center}
.wrap--center .prose{margin-inline:auto}
.wrap--center .prose ul,.wrap--center .prose ol{list-style-position:inside; padding-inline-start:0}

/* --------------------------------------------------------------- toolbar */
.toolbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-block:20px; border-bottom:1px solid var(--border); margin-bottom:28px}
.toolbar .select{width:auto; min-width:180px}

/* --------------------------------------------------------------- sidebar */
.layout{display:grid; grid-template-columns:280px 1fr; gap:36px; align-items:start}
.side{position:sticky; top:76px; display:flex; flex-direction:column; gap:22px}
.side__box{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.side__box h4{font-size:14px; margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--border)}
.side__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.side__list a{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; color:var(--g700)}
.side__list a:hover{background:var(--g100); color:var(--primary)}
.side__list a.is-active{background:var(--primary-050); color:var(--primary); font-weight:600}
.side__list .count{font-size:11px; color:var(--g400); font-family:var(--font-code); font-variant-numeric:tabular-nums; font-feature-settings:var(--code-feat)}

/* --------------------------------------------------------- product detail */
.pdetail{display:grid; grid-template-columns:minmax(0,480px) 1fr; gap:48px; align-items:start}
/* same rule as the card thumb: the frame stays square and the photo is resized
   to fit inside it — never cropped, never allowed to stretch the frame. */
.pgallery{border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--g50);
  padding:32px; display:grid; place-items:center; aspect-ratio:1/1; min-height:0; overflow:hidden}
.pgallery img{max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; mix-blend-mode:multiply}
.pinfo h1{font-size:var(--fs-9xl); margin:0 0 6px}
.pinfo__code{font:700 var(--fs-6xl)/1.1 var(--font-code); letter-spacing:.02em; color:var(--primary); margin-bottom:10px; font-variant-numeric:tabular-nums; font-feature-settings:var(--code-feat)}
.pinfo__lead{color:var(--text-muted); margin-bottom:22px; font-size:15px}
.pmeta{display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:24px}
.pmeta__row{display:grid; grid-template-columns:180px 1fr; gap:16px; padding:12px 16px; font-size:14px; border-bottom:1px solid var(--border)}
.pmeta__row:last-child{border-bottom:0}
.pmeta__row:nth-child(odd){background:var(--g50)}
.pmeta__k{font-weight:600; color:var(--g700)}
.pmeta__v{color:var(--g600)}
.codelist{display:flex; flex-wrap:wrap; gap:6px}
.codelist span{display:inline-block; padding:4px 10px; border-radius:var(--radius-sm); background:var(--g100); color:var(--g700); font:600 12px/1.4 var(--font-code); letter-spacing:.03em; font-variant-numeric:tabular-nums; font-feature-settings:var(--code-feat)}
.pactions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.note{display:flex; gap:10px; padding:12px 14px; border-radius:var(--radius); background:var(--primary-050); color:var(--primary-600); font-size:13px; line-height:1.55}

/* tabs */
.tabs{border-bottom:1px solid var(--border); display:flex; gap:28px; margin-bottom:24px}
.tabs button{background:0; border:0; padding:14px 0; font:600 15px/1 var(--font); color:var(--g500); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs button.is-active{color:var(--primary); border-bottom-color:var(--primary)}
.tabpane{display:none} .tabpane.is-active{display:block}

/* table */
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th,.table td{padding:11px 14px; text-align:start; border-bottom:1px solid var(--border)}
.table th{background:var(--g50); font-weight:600; color:var(--g700); font-size:13px}
.table tbody tr:hover{background:var(--g50)}
/* cross-reference table: maker name in the first column, its codes beside it */
.table--xref th[scope=row]{width:180px; white-space:nowrap; vertical-align:middle; background:var(--g50); font-weight:700; color:var(--g800)}
.table--xref td{vertical-align:middle}
.table--xref tbody tr:hover{background:transparent}
.table--dims{width:auto; min-width:260px; text-align:center; direction:ltr}
.table--dims th,.table--dims td{text-align:center; min-width:64px}
.table--dims th small{font-weight:500; font-size:10px; color:var(--g500); margin-inline-start:2px}
.table--dims td{font:600 15px/1.4 var(--font-code); font-variant-numeric:tabular-nums}
.table--veh td:first-child{font-weight:600; color:var(--g800)}
@media (max-width:560px){
  .table--xref th[scope=row],.table--xref td{display:block; width:auto; border-bottom:0; padding:10px 12px}
  .table--xref th[scope=row]{padding-bottom:4px; background:transparent; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--g500)}
  .table--xref tr{display:block; border-bottom:1px solid var(--border)}
  /* a long compatibility list has to fit the screen, not scroll sideways */
  .table--veh{font-size:13px; table-layout:fixed; width:100%}
  .table--veh th,.table--veh td{padding:9px 10px; overflow-wrap:anywhere}
  .table--veh th:first-child,.table--veh td:first-child{width:38%}
}

/* ------------------------------------------------------------------ prose */
.prose{max-width:78ch; font-size:16px; line-height:1.75; color:var(--g700)}
.prose h2,.prose h3,.prose h4{color:var(--g900); margin-top:1.8em}
.prose h3{font-size:var(--fs-3xl)}
.prose p{margin:0 0 1.1em}
.prose strong{color:var(--g900)}
.prose ul,.prose ol{margin:0 0 1.2em; padding-inline-start:1.4em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--primary); text-decoration:underline; text-underline-offset:3px}

/* ------------------------------------------------------------------ stats */
.stats{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.stat{flex:0 0 180px; text-align:center; padding:13px 10px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg)}
.stat__v{font:700 var(--fs-7xl)/1 var(--font-code); color:var(--primary); display:block; margin-bottom:3px; font-variant-numeric:tabular-nums; font-feature-settings:var(--code-feat)}
.stat__l{font-size:12px; color:var(--text-muted); line-height:1.35}

/* ------------------------------------------------------------- cta banner */
.cta{background:var(--primary); color:#fff; border-radius:var(--radius-lg); padding:44px 48px; display:flex; align-items:center; gap:32px; flex-wrap:wrap}
.cta h2{color:#fff; margin:0 0 6px; font-size:var(--fs-7xl)}
.cta p{margin:0; color:#cfe3f2; max-width:56ch}
.cta__actions{margin-inline-start:auto; display:flex; gap:12px; flex-wrap:wrap}

/* ----------------------------------------------------------------- alert */
.alert{padding:14px 18px; border-radius:var(--radius); font-size:14px; margin-bottom:22px; border:1px solid}
.alert--ok{background:#ecfdf5; border-color:#a7f3d0; color:#065f46}
.alert--err{background:#fff1f2; border-color:#fecdd3; color:#9f1239}

/* ------------------------------------------------------------ pagination */
.pager{display:flex; gap:6px; align-items:center; justify-content:center; margin-top:36px; flex-wrap:wrap}
.pager a,.pager span{
  display:grid; place-items:center; min-width:38px; height:38px; padding-inline:12px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font:600 13px/1 var(--font); color:var(--g700); background:#fff;
}
.pager a:hover{border-color:var(--primary); color:var(--primary)}
.pager .is-current{background:var(--primary); border-color:var(--primary); color:#fff}
.pager .is-disabled{opacity:.45; pointer-events:none}

/* ---------------------------------------------------------------- footer */
.footer{background:var(--g900); color:var(--g400); margin-top:80px}
.footer a{color:var(--g400)} .footer a:hover{color:#fff}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-block:56px}
.footer h4{color:#fff; font-size:14px; margin:0 0 16px; letter-spacing:.02em}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:13px}
.footer__about p{font-size:13px; line-height:1.7; margin:14px 0 18px; max-width:40ch}
.footer__contact li{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.6}
.footer__contact strong{display:block; color:#fff; font-weight:600; font-size:13px}
.socials{display:flex; gap:8px}
.socials a{display:grid; place-items:center; width:36px; height:36px; border-radius:var(--radius-full); background:rgba(255,255,255,.08); color:#fff}
.socials a:hover{background:var(--primary)}
.footer__bar{border-top:1px solid rgba(255,255,255,.09); padding-block:18px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:12.5px}
.footer__bar nav{display:flex; gap:18px}

/* ----------------------------------------------------------- contact page
   The form and the details card. This used to be an inline grid-template on
   the element, which no media query can override — so the two columns stayed
   side by side on a phone and squeezed every field down to 110px. */
.contact-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:start}
@media (max-width:860px){
  .contact-grid{grid-template-columns:minmax(0,1fr); gap:26px}
  .contact-grid .g-2{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------------------ whatsapp fab */
.fab{position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:80; display:grid; place-items:center; width:54px; height:54px; border-radius:var(--radius-full); background:#25D366; color:#fff; box-shadow:var(--sh-lg); transition:transform var(--t) var(--ease)}
.fab:hover{transform:scale(1.07); color:#fff}

/* ------------------------------------------------------------- responsive */
@media (max-width:1200px){
  .hero__in{grid-template-columns:1fr; gap:36px; padding-block:64px}
  .features{grid-template-columns:repeat(2,1fr)}
  .feature:nth-child(2){border-inline-end:0}
  .feature:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .g-5{grid-template-columns:repeat(3,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:992px){
  :root{--pad:20px}
  .g-3,.g-4,.g-5{grid-template-columns:repeat(2,1fr)}
  .g-3.grid--center > *,.g-4.grid--center > *{flex:0 1 calc((100% - 24px) / 2)}
  .layout{grid-template-columns:1fr}
  .side{position:static}
  .pdetail{grid-template-columns:1fr; gap:32px}
  .stats{gap:8px} .stat{flex:0 0 calc(50% - 4px)}
  .header__main{height:72px; gap:16px}
  .searchbar{order:3; flex-basis:100%; max-width:none; margin-bottom:14px}
  .header__main{flex-wrap:wrap; height:auto; padding-block:14px}
  .nav__menu{overflow-x:auto; scrollbar-width:none}
  .nav__menu::-webkit-scrollbar{display:none}
  h1{font-size:var(--fs-9xl)} h2{font-size:var(--fs-7xl)}
  .hero h1{font-size:var(--fs-10xl)}
  .cta{padding:32px}
  .cta__actions{margin-inline-start:0}
}
@media (max-width:720px){
  .g-2,.g-3,.g-4,.g-5{grid-template-columns:repeat(2,1fr)}
  /* 4 — the logo owns the top row, centred; everything else sits under it */
  .header__main{flex-wrap:wrap; justify-content:center; gap:10px; padding-block:10px}
  .brand{flex:0 0 100%; display:flex; justify-content:center}
  .brand img{height:42px}
  .header__actions{margin-inline-start:0; flex:0 0 100%; justify-content:center; gap:16px}
  .hact__ico{width:34px; height:34px}
  .hact__label,.hact__value{font-size:11px}

  /* 2 — the search is an icon, and opens as a sheet under the header */
  .hact.hact--search{display:inline-flex}
  .searchbar{position:absolute; inset-inline:var(--pad); top:calc(100% + 6px);
    z-index:5; max-width:none; border-radius:var(--radius);
    box-shadow:0 14px 30px rgba(6,13,24,.30);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
               visibility var(--t-fast)}
  .header.is-searching .searchbar{opacity:1; visibility:visible; transform:translateY(0)}
  .searchbar .input{height:46px; padding-inline-end:48px}
  .searchbar button{top:5px; inset-inline-end:5px; width:36px; height:36px}
  .searchbar button svg{width:17px; height:17px}

  /* 1 — the burger rides the sticky bar, at the end of the links */
  .nav__in{flex-wrap:nowrap; align-items:flex-start; justify-content:space-between;
    gap:10px; height:auto; padding-block:6px}
  .nav__menu{flex:1 1 auto; width:auto; flex-wrap:wrap; align-items:flex-start}
  .nav .burger{display:grid; place-items:center; flex:0 0 auto; color:var(--primary); margin-top:3px}

  /* the language menu: compact, centred, and frosted like the bar under it */
  .dropdown__panel--lang{min-width:0; width:max-content; padding:5px;
    background:rgba(255,255,255,.60); border-color:rgba(15,23,42,.10);
    -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6)}
  .dropdown__panel--lang a{justify-content:center; gap:7px; padding:7px 12px; font-size:12.5px}
  .dropdown__panel--lang a:hover{background:rgba(15,23,42,.06)}
  .dropdown__panel--lang .flag{width:17px; height:12px}

  /* 5 — the sticky bar reads as frosted glass over whatever scrolls under it */
  .nav{background:rgba(255,255,255,.62); border-bottom-color:rgba(15,23,42,.10);
    -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6)}
  .hero__in{padding-block:44px; gap:28px}
  .hero p{margin-bottom:22px}
  .features{grid-template-columns:1fr}
  .feature{border-inline-end:0; border-bottom:1px solid var(--border)}
  .feature:last-child{border-bottom:0}
  .footer__top{grid-template-columns:1fr; gap:32px; padding-block:40px}
  .section{padding-block:48px}
  .pmeta__row{grid-template-columns:1fr; gap:4px}
  .burger{display:grid; place-items:center}
  .topbar__links .t-hide{display:none}
  .sec-head{gap:12px}
}
@media (max-width:480px){
  .g-2,.g-3{grid-template-columns:1fr}
  .g-3.grid--center > *,.g-4.grid--center > *{flex:1 1 100%}
  .phead--live{padding-block:48px}
  .hero h1{font-size:var(--fs-8xl)}
  .pcard__thumb{padding:12px}
  .pcard__body{padding:12px}
  .pcard__code{font-size:var(--fs-base)}
}

/* mobile nav open state */
@media (max-width:720px){
  .nav__in{flex-wrap:wrap; height:auto; padding-block:8px; gap:12px}
  .nav .dropdown,.nav .btn--secondary{display:none}
  .nav__menu{gap:18px}
  .nav__menu > li > a{height:44px; font-size:14px}
  .nav.is-open .dropdown,.nav.is-open .btn--secondary{display:flex}
  .nav.is-open .dropdown{width:100%}
  .nav.is-open .dropdown__panel{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0}
}

/* --------------------------------------------------------------------------
   OEM marquee — a narrow centred window rather than a full-bleed band.
   mask-image does the fading, so items dissolve into the background instead of
   being clipped; it works over any backdrop, unlike overlaid gradients.
   The track holds two identical rows and slides left by exactly half its own
   width, so the second row arrives where the first started and there is no seam.
   -------------------------------------------------------------------------- */
.marquee{background:var(--primary); padding:20px 0}
.marquee__title{margin:0 0 20px; text-align:center; font:600 12px/1 var(--font);
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.42)}

.marquee__viewport{
  /* The track is far wider than this window. Inside an RTL page a max-content
     block is anchored to the right edge, throwing the whole track off-screen to
     the left, so pin the window itself to LTR and let it overflow rightwards. */
  direction:ltr;
  max-width:860px; margin:0 auto; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%);
}

.marquee__track{display:flex; width:max-content; direction:ltr;
  animation:marquee var(--marquee-speed,36s) linear infinite}
.marquee__viewport:hover .marquee__track,.marquee__track:focus-within{animation-play-state:paused}

.marquee__row{display:flex; align-items:center; gap:58px; margin:0; padding:0 29px; list-style:none}
.marquee__item{flex:0 0 auto; display:grid; place-items:center; height:30px; opacity:.7;
  transition:opacity .2s ease}
.marquee__item:hover{opacity:1}
.marquee__item img{height:30px; width:auto; max-width:135px; object-fit:contain;
  filter:brightness(0) invert(1)}
.marquee__word{font:700 19px/1 var(--font-head); letter-spacing:.02em; color:#fff; white-space:nowrap}

.marquee__note{margin:24px auto 0; max-width:70ch; text-align:center;
  font-size:11.5px; line-height:1.6; color:rgba(255,255,255,.45)}

@keyframes marquee{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}

/* Honour the OS setting: hold the strip still and let it scroll by hand. */
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .marquee__viewport{overflow-x:auto; scrollbar-width:none}
  .marquee__viewport::-webkit-scrollbar{display:none}
  .marquee__row:nth-child(2){display:none}
}
@media (max-width:900px){
  .marquee__viewport{max-width:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%)}
}
@media (max-width:768px){
  .marquee{padding:15px 0}
  .marquee__row{gap:40px}
  .marquee__item{height:24px}
  .marquee__item img{height:24px; max-width:100px}
  .marquee__word{font-size:16px}
}

/* The language switcher now sits in the header actions, so that tile needs to
   host a dropdown panel and look identical to the e-mail tile beside it. */
.hact--lang{position:relative; cursor:pointer}
.hact--lang > a{display:flex; align-items:center; gap:11px; color:inherit}
.hact--lang .dropdown__panel{inset-inline-start:auto; inset-inline-end:0}

/* --------------------------------------------------------------------------
   Brands showcase — a square video frame beside a one-at-a-time brand carousel.
   -------------------------------------------------------------------------- */
.showcase{display:grid; grid-template-columns:minmax(0,375px) minmax(0,500px);
  gap:24px; justify-content:center; align-items:start}

/* ── the clip ── the source is 9:16, so a blurred copy of the same video fills
   the pillars; a translucent wash over it reads as frosted glass on the
   brand gradient underneath. */
.showcase__video{position:relative; aspect-ratio:4/3; border-radius:var(--radius-lg);
  overflow:hidden; background:linear-gradient(150deg,var(--primary),var(--primary-700) 55%,var(--secondary))}
.showcase__blur{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(26px) saturate(1.25) brightness(.75); transform:scale(1.25); opacity:.85}
.showcase__video::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(150deg,rgba(18,41,74,.42),rgba(212,32,39,.18));
  backdrop-filter:saturate(1.1)}
.showcase__clip{position:relative; z-index:2; display:block; width:100%; height:100%;
  object-fit:contain}

/* ── the carousel ── one slide per view, snapped */
.showcase__stage{position:relative; aspect-ratio:1}
.bslides{display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; border-radius:var(--radius-lg)}
.bslides::-webkit-scrollbar{display:none}
.bslide{flex:0 0 100%; scroll-snap-align:center; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden}

.bslide__mark{flex:0 0 44%; display:grid; place-items:center; gap:8px; padding:18px;
  background:var(--g50); border-bottom:1px solid var(--border)}
.bslide__mark img{max-height:72px; max-width:78%; width:auto; object-fit:contain}
.bslide__word{font:700 clamp(17px,3vw,26px)/1.2 var(--font-head); color:var(--g400);
  text-align:center; overflow-wrap:anywhere}
.bslide__mark h3{margin:0; font-size:var(--fs-lg)}

.bslide__body{flex:1; display:flex; flex-direction:column; gap:12px; padding:16px 18px 18px}
.bslide__intro{margin:0; font-size:13px; line-height:1.65; color:var(--text-muted)}
.bslide__thumbs{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; flex:1; min-height:0}
.bslide__thumbs > .bthumb:nth-child(n+3){display:none}
.bthumb{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:8px 6px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--g50); min-height:0; transition:border-color var(--t) var(--ease)}
.bthumb:hover{border-color:var(--primary)}
.bthumb img{max-height:56px; width:auto; object-fit:contain; mix-blend-mode:multiply}
.bthumb span{font:600 10.5px/1 var(--font-code); color:var(--g600);
  font-variant-numeric:tabular-nums; font-feature-settings:var(--code-feat)}

.bslide__cta{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:12px; border-top:1px solid var(--border)}
.bslide__cta strong{font-size:13px; color:var(--g900)}
.bslide__cta span{display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
  font-weight:600; color:var(--primary)}

.bnav{position:absolute; inset-block-start:19%; z-index:3; display:grid; place-items:center;
  width:34px; height:34px; border-radius:var(--radius-full); border:1px solid var(--border);
  background:#fff; color:var(--g700); cursor:pointer; box-shadow:var(--sh-sm)}
.bnav:hover{background:var(--primary); border-color:var(--primary); color:#fff}
.bnav:disabled{opacity:.32; cursor:default; box-shadow:none}
.bnav:disabled:hover{background:#fff; border-color:var(--border); color:var(--g700)}
.bnav--prev{inset-inline-start:-14px; transform:rotate(180deg)}
.bnav--next{inset-inline-end:-14px}
[dir="rtl"] .bnav--prev{transform:none}
[dir="rtl"] .bnav--next{transform:rotate(180deg)}

.bdots{position:absolute; inset-block-end:-24px; inset-inline:0; display:flex; gap:6px;
  justify-content:center}
.bdots button{width:7px; height:7px; padding:0; border:0; border-radius:var(--radius-full);
  background:var(--g300); cursor:pointer; transition:width var(--t) var(--ease),background var(--t) var(--ease)}
.bdots button[aria-selected="true"]{width:20px; background:var(--primary)}

@media (max-width:900px){
  .showcase{grid-template-columns:minmax(0,420px); gap:34px}
  /* one video stream is enough on a phone; the gradient behind still reads as glass */
  .showcase__blur{display:none}
  .showcase__video{order:2}
  .bnav--prev{inset-inline-start:6px}
  .bnav--next{inset-inline-end:6px}
}
@media (prefers-reduced-motion:reduce){
  .bslides{scroll-behavior:auto}
  .showcase__blur{display:none}
}


/* --------------------------------------------------------------------------
   Filter explainer — one photo at a time beside what that part actually does.
   Every slide sits in the same grid cell, so the box is as tall as the longest
   one and nothing jumps when it turns over.

   The fill bar is the autoplay clock, not decoration: the script advances on
   its animationend, so pausing the animation — hover, focus, off-screen,
   reduced motion — pauses the slider itself. One timer instead of two that
   drift apart.
   -------------------------------------------------------------------------- */
.fshow{max-width:1120px; margin-inline:auto}
.fslides{display:grid}
.fslide{grid-area:1/1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px; align-items:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out),
             visibility 0s linear var(--t-slow)}
.fslide.is-on{opacity:1; visibility:visible; transform:none; transition-delay:0s}

.fslide__shot{border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; background:#fff; box-shadow:var(--sh-sm)}
.fslide__shot img{width:100%; height:auto}

/* digits keep their own direction so "01 / 06" does not come out reversed */
.fslide__num{display:inline-block; direction:ltr; unicode-bidi:isolate; margin-bottom:12px;
  font:700 var(--fs-sm)/1 var(--font-code); color:var(--primary);
  font-variant-numeric:tabular-nums; font-feature-settings:var(--code-feat)}
.fslide__num i{font-style:normal; color:var(--g400)}
.fslide__num i::before{content:" / "}
.fslide__body h3{margin:0 0 18px; font-size:var(--fs-8xl)}

.fpoints{margin:0; padding:0; list-style:none; display:grid; gap:16px}
.fpoints li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:13px; align-items:start;
  font-size:var(--fs-base); line-height:1.75; color:var(--g700)}
.fpoints__ico{display:grid; place-items:center; width:24px; height:24px; margin-top:3px;
  border-radius:var(--radius-full); background:var(--primary-050); color:var(--primary)}

.fctrl{display:flex; align-items:center; gap:10px; margin-top:34px}
.fshow .bnav{position:static}
.fshow .bdots{position:static; justify-content:flex-start; margin-inline-start:6px}
.fbar{flex:0 1 180px; height:2px; border-radius:var(--radius-full); background:var(--g200); overflow:hidden}
.fbar__fill{display:block; width:0; height:100%; background:var(--primary);
  animation:fbar var(--slide-dur,6000ms) linear forwards}
.fshow:hover .fbar__fill,
.fshow:focus-within .fbar__fill,
.fshow.is-off .fbar__fill{animation-play-state:paused}
@keyframes fbar{from{width:0} to{width:100%}}

@media (max-width:900px){
  .fslide{grid-template-columns:minmax(0,1fr); gap:24px}
  .fslide__body h3{font-size:var(--fs-6xl)}
  .fpoints li{font-size:var(--fs-sm)}
  .fctrl{margin-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .fslide{transition:none}
  .fbar__fill{animation:none}     /* no clock, so no autoplay — arrows still work */
}


/* ── phone-only tuning ──────────────────────────────────────────────────────
   Everything below applies to handsets only; the desktop layout is untouched. */
@media (max-width:720px){
  /* 1 — the glow sits far back and drifts with the scroll instead of shouting */
  .hero__canvas{opacity:.5}
  .hero::after{background:linear-gradient(180deg,rgba(6,13,24,.62) 0%,rgba(6,13,24,.30) 45%,rgba(6,13,24,.74) 100%)}
  [dir="rtl"] .hero::after{background:linear-gradient(180deg,rgba(6,13,24,.62) 0%,rgba(6,13,24,.30) 45%,rgba(6,13,24,.74) 100%)}

  /* 2 + 3 — a tighter finder, and the hero ends behind it instead of under it */
  .hero__in{padding-block:34px 0; gap:22px}
  .hero h1{font-size:var(--fs-9xl)}
  .hero p{font-size:var(--fs-base); margin-bottom:18px}
  /* the hero clips its own overflow (it used to hold a cover image); with the
     card hanging past the section's edge that clipping cut the card in half.
     The canvas is inset:0 so it never spills — nothing here needs clipping. */
  .hero{overflow:visible}

  /* half of the card sits on white, so it needs an edge of its own or the
     bottom simply disappears into the section below */
  .finder{padding:18px; margin-bottom:-167px; position:relative; z-index:3;
    border:1px solid rgba(15,23,42,.14);
    box-shadow:0 12px 28px rgba(15,23,42,.13), 0 2px 6px rgba(15,23,42,.07)}
  .finder h3{font-size:var(--fs-xl); margin-bottom:4px}
  .finder p{font-size:12.5px; margin-bottom:14px}
  .finder__step{margin-bottom:10px}
  .finder .select{height:44px}
  .feature-strip{margin-top:187px}

  /* 5 — four short cards, two across */
  .features{grid-template-columns:repeat(2,1fr)}
  .feature{flex-direction:column; gap:7px; padding:11px 9px;
    border-inline-end:1px solid var(--border); border-bottom:1px solid var(--border)}
  .feature:nth-child(2n){border-inline-end:0}
  .feature:nth-child(n+3){border-bottom:0}
  .feature__ico{width:28px; height:28px}
  .feature h4{font-size:11.5px; margin:0 0 2px}
  .feature p{font-size:10px; line-height:1.4}

  /* 6 — the makes strip takes its time */
  .marquee__track{animation-duration:64s}

  /* 7 — three categories to a row, stacked inside */
  .grid{gap:10px}
  .g-3.grid--center > *{flex:0 1 calc((100% - 20px) / 3)}
  .ccard{flex-direction:column; align-items:center; text-align:center; gap:8px; padding:12px 7px}
  .ccard__ico{width:34px; height:34px}
  .ccard h4{font-size:11.5px; line-height:1.3; margin:0 0 3px}
  .ccard span{font-size:10px}

  /* 8 + 9 — the clip stands beside the brand card, and the picks swipe */
  .showcase{grid-template-columns:38% minmax(0,1fr); gap:12px; align-items:stretch}
  [dir="rtl"] .showcase{grid-template-columns:minmax(0,1fr) 38%}
  /* the clip keeps the left of the screen in both directions, and takes its
     height from the card beside it rather than from its own ratio */
  .showcase__video{grid-column:1; grid-row:1; aspect-ratio:auto; align-self:stretch}
  .showcase__stage{grid-column:2; grid-row:1; aspect-ratio:auto}
  [dir="rtl"] .showcase__video{grid-column:2}
  [dir="rtl"] .showcase__stage{grid-column:1}
  .showcase__blur{display:none}
  .bslide__mark{flex:0 0 auto; padding:12px 10px 10px; gap:5px}
  .bslide__mark img{max-height:40px}
  .bslide__mark h3{font-size:13px}
  .bslide__body{padding:10px 10px 12px; gap:8px}
  .bslide__thumbs{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth; scrollbar-width:none; gap:8px}
  .bslide__thumbs::-webkit-scrollbar{display:none}
  .bslide__thumbs > .bthumb:nth-child(n+3){display:flex}
  .bthumb{flex:0 0 100%; scroll-snap-align:center; padding:6px}
  .bthumb img{max-height:52px}
  .bslide__cta{padding-top:8px; font-size:12px}
  .bslide__cta strong{font-size:12px}
  .bnav{width:26px; height:26px}
  .bnav svg{width:14px; height:14px}
  .bnav--prev{inset-inline-start:-6px}
  .bnav--next{inset-inline-end:-6px}

  /* 10 — featured products become one swipeable row, two in view */
  .grid--rail{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth; scrollbar-width:none; gap:10px; padding-bottom:4px}
  .grid--rail::-webkit-scrollbar{display:none}
  .grid--rail > *{flex:0 0 calc(50% - 5px); scroll-snap-align:start}
  .grid--rail .pcard__thumb{padding:10px}
  .grid--rail .pcard__body{padding:10px}
  .grid--rail .pcard__code{font-size:var(--fs-sm)}

  /* 4 — a smaller "featured" flag */
  .pcard__badge{inset-block-start:7px; inset-inline-start:7px; padding:3px 6px; font-size:8.5px}

  /* 5 — a shorter banner with its two buttons side by side */
  .cta{padding:22px 18px; gap:14px}
  .cta h2{font-size:var(--fs-4xl)}
  .cta p{font-size:12.5px; line-height:1.55}
  .cta__actions{margin-inline-start:0; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .cta__actions .btn{width:100%; justify-content:center; gap:6px; padding-inline:8px; font-size:12.5px}
  .cta__actions .btn svg{width:15px; height:15px; flex:0 0 auto}

  /* 6 — the filter panels fold away; main.js wires the headings up on phones */
  .side__box[data-collapsible]{padding:14px 16px}
  .side__box[data-collapsible] > h4{cursor:pointer; margin:0; padding:0; border-bottom:0;
    display:flex; align-items:center; justify-content:space-between; gap:10px}
  .side__box[data-collapsible] > h4::after{content:""; flex:0 0 auto; width:8px; height:8px;
    border-inline-end:2px solid var(--g400); border-bottom:2px solid var(--g400);
    transform:rotate(45deg) translateY(-2px); transition:transform var(--t) var(--ease)}
  .side__box[data-collapsible].is-open > h4{margin-bottom:12px; padding-bottom:10px;
    border-bottom:1px solid var(--border)}
  .side__box[data-collapsible].is-open > h4::after{transform:rotate(-135deg) translateY(1px)}
  .side__box[data-collapsible] > :not(h4){display:none}
  .side__box[data-collapsible].is-open > .side__list{display:flex}
  .side__box[data-collapsible].is-open > form{display:block}
}


/* ── mobile polish ──────────────────────────────────────────────────────────
   A second pass over the phone layout. Three things had drifted: the photo
   hero landed after the block above was written and quietly overrode its
   spacing, several controls were too small to hit with a thumb, and the
   decorative clip was spending 2.2 MB of someone's mobile data to play at
   127px wide.
   -------------------------------------------------------------------------- */
@media (max-width:720px){

  /* 1 — the photo hero has to keep the phone's spacing. .hero--photo .hero__in
     is one class more specific than the .hero__in rule above, so it was still
     applying the desktop 70px and leaving a dead band above the feature strip;
     the finder card's negative margin is measured against this. */
  .hero--photo .hero__in{padding-block:34px 0}

  /* 2 — the brand clip goes. At 127px wide it read as a coloured block rather
     than a video, and it cost more to download than every image on the page
     put together. The card it stood beside now has the row to itself. */
  .showcase{grid-template-columns:minmax(0,1fr)}
  [dir="rtl"] .showcase{grid-template-columns:minmax(0,1fr)}
  .showcase__video{display:none}
  .showcase__stage,[dir="rtl"] .showcase__stage{grid-column:1; grid-row:1}
  .bslide__mark img{max-height:52px}
  .bslide__mark h3{font-size:15px}
  .bthumb{flex:0 0 calc(50% - 4px)}          /* two picks in view, not one */
  .bthumb img{max-height:64px}

  /* 3 — nothing tappable under 40px.
     The header row, the pager and the footer lists were all built at desktop
     density; the marks stay the same size, the reachable area grows. */
  .header__actions .hact,.hact--lang > a{min-height:44px}
  .dropdown__panel--lang a{min-height:44px}
  .hact.hact--search{width:44px; height:44px; justify-content:center}
  .crumbs a{display:inline-block; padding-block:10px}
  .pager a,.pager span{min-width:44px; height:44px}
  .footer ul a,.footer__bar nav a,.footer__contact a{display:inline-block; padding-block:10px}
  .socials a{width:44px; height:44px}
  .searchbar button{width:40px; height:40px}

  /* 4 — carousel controls. The arrows grow; the dots keep their size but get
     an invisible pad around them, sized so neighbours meet without overlapping
     (dot 10 + gap 14 = 24, which is exactly the hit width). */
  .bnav{width:40px; height:40px}
  .bnav svg{width:17px; height:17px}
  .bthumb{min-height:76px}
  .bslide__cta{padding-block:11px 4px}
  .pmeta__v a{display:inline-block; padding-block:10px}
  .bdots{gap:14px}
  .bdots button{position:relative; width:10px; height:10px}
  .bdots button[aria-selected="true"]{width:24px}
  .bdots button::after{content:""; position:absolute; inset:-14px -7px}

  /* the slider's fill bar is its clock — it must keep running, so it drops to
     its own line rather than being squeezed to nothing by the dots */
  .fshow .fctrl{flex-wrap:wrap; gap:12px}
  .fshow .fbar{flex:1 0 100%; margin-top:2px}

  /* 5 — type that had shrunk past reading size on a handset */
  .pcard__badge{font-size:10px; padding:3px 7px}
  .feature h4{font-size:12.5px}
  .feature p{font-size:11.5px; line-height:1.5}
  .ccard h4{font-size:12.5px}
  .ccard span{font-size:11px}

  /* رقم الهاتف والبريد في كارت التواصل هما أهم زرارين في الصفحة */
  .contact-grid .row a{display:inline-block; padding-block:10px}
  .toolbar .btn--sm{height:40px}

  /* 6 — the filter accordion's arrow. border-inline-end flips with the text
     direction, so in Arabic the chevron pointed sideways like a back button
     instead of down like a disclosure. Pin it to the physical right edge. */
  .side__box[data-collapsible] > h4::after{border-inline-end:0; border-right:2px solid var(--g400)}
}