@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800;900&display=swap');
@font-face{font-family:"KO Sans";font-weight:100;font-style:normal;font-display:swap;src:url("fonts/ko-sans-thin.otf") format("opentype");}
@font-face{font-family:"KO Sans";font-weight:200;font-style:normal;font-display:swap;src:url("fonts/ko-sans-extralight.otf") format("opentype");}
@font-face{font-family:"KO Sans";font-weight:300;font-style:normal;font-display:swap;src:url("fonts/ko-sans-light.otf") format("opentype");}
@font-face{font-family:"KO Sans";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/ko-sans-regular.otf") format("opentype");}
@font-face{font-family:"KO Sans";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/ko-sans-medium.otf") format("opentype");}
@font-face{font-family:"KO Sans";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/ko-sans-semibold.otf") format("opentype");}
@font-face{font-family:"KO Sans";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/ko-sans-bold.otf") format("opentype");}


:root {
  --lx-bg:         #fafafa;
  --lx-muted:      #fafafa;
  --lx-surface:    #ffffff;
  --lx-ink:        #1a1c1c;
  --lx-ink-soft:   #45483e;
  --lx-text:       #1a1c1c;
  --lx-text-muted: #5f5e5e;
  --lx-olive:      #708255;
  --lx-olive-dark: #516238;
  --lx-olive-mid:  #697b4e;
  --lx-olive-deep: #434e2f;
  --lx-olive-pale: #bace9a;
  --lx-line:       #e2e2e2;
  --lx-line-2:     #e5e7eb;
  --lx-footer-bg:  #1a1c1c;
  --lx-footer-fg:  rgba(255,255,255,.68);

  --lx-radius:    14px;
  --lx-radius-sm: 8px;
  --lx-radius-lg: 22px;
  --lx-container: 1440px;
  --lx-gutter: 24px;
  --lx-shadow:    0 1px 2px rgba(20,22,15,.04), 0 10px 30px rgba(20,22,15,.07);
  --lx-shadow-lg: 0 18px 50px rgba(20,22,15,.16);

  --lx-font:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lx-display: "Manrope", var(--lx-font);

  --lx-ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--lx-font);
  color: var(--lx-text);
  background: var(--lx-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--lx-display); color: var(--lx-ink); line-height: 1.12; margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.lx-container { width: min(88%, var(--lx-container)); margin-inline: auto; }
.lx-section { padding-block: clamp(52px, 7vw, 92px); }
.lx-section--muted { background: var(--lx-muted); }
.lx-section--surface { background: var(--lx-surface); }
/* Match Figma: tighter onboarding->contact spacing + white contact background */
.lx-section:has(.lx-steps) { padding-block: clamp(44px, 5vw, 64px); }
.lx-section:has(.lx-contact2) { padding-top: clamp(44px, 5vw, 64px); background: #fff; }

.lx-eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lx-olive-deep);
  background: transparent; padding: 0; border-radius: 0;
}
.lx-section__head { max-width: 640px; margin-bottom: 2.4rem; }
.lx-section__head--center { margin-inline: auto; text-align: center; }
.lx-lead { color: var(--lx-text-muted); font-size: 1.05rem; }

.lx-btn {
  --_y: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: "Manrope", sans-serif; font-weight: 600; font-size: .95rem;
  padding: .74em 1.5em; border-radius: var(--lx-radius-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transform: translateY(var(--_y));
  transition: background .18s var(--lx-ease), transform .18s var(--lx-ease), box-shadow .18s var(--lx-ease), border-color .18s var(--lx-ease);
}
.lx-btn:hover { --_y: -2px; box-shadow: 0 8px 20px rgba(81,98,56,.22); }
.lx-btn:active { --_y: 0; }
.lx-btn--primary { background: var(--lx-olive); color: #fff; }
.lx-btn--primary:hover { background: var(--lx-olive-dark); }
.lx-btn--dark { background: var(--lx-ink); color: #fff; }
.lx-btn--dark:hover { background: #000; box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.lx-btn--ghost { background: transparent; color: var(--lx-ink); border-color: var(--lx-line); }
.lx-btn--ghost:hover { border-color: var(--lx-ink); box-shadow: none; }
.lx-btn--light { background: #fff; color: var(--lx-ink); }
.lx-btn--light:hover { background: #f0f0ea; }
.lx-btn--sm { padding: .55em 1.05em; font-size: .85rem; }
.lx-btn--block { width: 100%; }

.lx-header { position: sticky; top: 0; z-index: 40; background: rgba(249,249,249,.85); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.lx-header.scrolled { border-bottom-color: var(--lx-line); box-shadow: 0 4px 20px rgba(20,22,15,.05); }
.lx-header__inner { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.lx-logo { font-family: var(--lx-display); font-weight: 800; font-size: 1.4rem; letter-spacing: .14em; color: var(--lx-ink); }
.lx-nav { display: flex; gap: 1.7rem; margin-inline: auto; }
.lx-nav a { font-weight: 500; color: var(--lx-ink-soft); font-size: .95rem; padding: .3rem 0; position: relative; }
.lx-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--lx-olive); transition: width .25s var(--lx-ease); }
.lx-nav a:hover, .lx-nav a.active { color: var(--lx-olive-dark); }
.lx-nav a:hover::after, .lx-nav a.active::after { width: 100%; }
.lx-header__actions { display: flex; align-items: center; gap: .75rem; }
.lx-lang { display: inline-flex; border: 1px solid var(--lx-line); border-radius: var(--lx-radius-sm); overflow: hidden; }
.lx-lang a { padding: .3em .7em; font-size: .8rem; font-weight: 600; color: var(--lx-text-muted); transition: background .18s ease, color .18s ease; }
.lx-lang a.active { background: var(--lx-olive); color: #fff; }
.lx-burger { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.lx-burger span { display: block; width: 22px; height: 2px; background: var(--lx-ink); margin: 4px 0; transition: transform .25s ease, opacity .2s ease; }

.lx-hero { position: relative; overflow: hidden; background: var(--lx-bg); }
.lx-hero::before, .lx-hero::after { display: none; }
.lx-hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; padding-block: clamp(44px, 6vw, 84px); }
.lx-hero__title { margin-bottom: 1rem; }
.lx-hero__text { color: var(--lx-text-muted); font-size: 1.1rem; max-width: 44ch; margin-bottom: 1.6rem; }
.lx-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.lx-hero__media { position: relative; border-radius: var(--lx-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #10130f, #2a2f22); box-shadow: var(--lx-shadow-lg); animation: lx-float 6s ease-in-out infinite; }
.lx-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.lx-trust { border-block: 1px solid var(--lx-line); background: var(--lx-surface); }
.lx-trust__row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding-block: 1.15rem; }
.lx-trust__item { display: flex; align-items: center; gap: .55rem; color: var(--lx-text-muted); font-size: .9rem; font-weight: 500; }
.lx-trust__item svg { color: var(--lx-olive); flex: none; }

.lx-grid { display: grid; gap: var(--lx-gutter); }
.lx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lx-grid--4 { grid-template-columns: repeat(4, 1fr); }

.lx-cat { position: relative; border-radius: var(--lx-radius); overflow: hidden; min-height: 230px; display: flex; align-items: flex-end; background: #14170f; color: #fff; transform: translateY(0); transition: transform .28s var(--lx-ease), box-shadow .28s var(--lx-ease); }
.lx-cat:hover { transform: translateY(-4px); box-shadow: var(--lx-shadow-lg); }
.lx-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: transform .5s var(--lx-ease); }
.lx-cat:hover img { transform: scale(1.06); }
.lx-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.05) 65%); }
.lx-cat__body { position: relative; z-index: 1; padding: 1.5rem; }
.lx-cat__body h3 { color: #fff; margin-bottom: .2rem; }
.lx-cat__body span { color: rgba(255,255,255,.82); font-size: .88rem; }

.lx-adv { background: var(--lx-surface); border: 1px solid rgba(20,22,15,.06); border-radius: 20px; padding: 1.7rem; transition: transform .24s var(--lx-ease), box-shadow .24s var(--lx-ease), border-color .24s ease; }
.lx-adv:hover { transform: translateY(-4px); box-shadow: var(--lx-shadow); border-color: transparent; }
.lx-adv__icon { width: 32px; height: 32px; background: none; color: var(--lx-olive-dark); display: grid; place-items: start; margin-bottom: 1.1rem; transition: transform .24s var(--lx-ease); }
.lx-adv__icon svg { width: 30px; height: 30px; }
.lx-adv:hover .lx-adv__icon { transform: scale(1.08) rotate(-4deg); }
/* Value-prop icon badge — matched to Figma (56x56 rounded background, ~24px icon) */
.lx-adv .lx-adv__icon { width: 56px; height: 56px; background: #EEEEEE; border-radius: 16px; place-items: center; }
.lx-adv .lx-adv__icon img { width: 24px; height: 24px; }
/* Design glyphs carry their own width/height (22.54-27.51px) — don't force them square. */
.lx-adv .lx-adv__icon svg { width: auto; height: auto; }
.lx-adv h3 { font-size: 1.02rem; }
.lx-adv p { color: var(--lx-text-muted); font-size: .9rem; margin: 0; }
/* Contact info cards: icon to the LEFT of the text */
.lx-adv--row { display: flex; align-items: center; gap: 1rem; }
.lx-adv--row .lx-adv__icon { margin-bottom: 0; flex: none; }
.lx-adv--row .lx-adv__txt { min-width: 0; }

.lx-product { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s var(--lx-ease), transform .2s var(--lx-ease), border-color .2s ease; }
.lx-product:hover { box-shadow: var(--lx-shadow-lg); transform: translateY(-5px); border-color: transparent; }
.lx-product__media { aspect-ratio: 1/1; background: var(--lx-muted); overflow: hidden; }
.lx-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--lx-ease); }
.lx-product:hover .lx-product__media img { transform: scale(1.05); }
.lx-product__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.lx-product__model { font-size: .72rem; letter-spacing: .06em; color: var(--lx-text-muted); text-transform: uppercase; }
.lx-product__name { font-family: var(--lx-display); font-weight: 700; color: var(--lx-ink); margin: .15rem 0 .5rem; }
.lx-product__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.lx-tag { font-size: .72rem; color: var(--lx-olive-dark); background: var(--lx-olive-pale); padding: .2em .6em; border-radius: 999px; }
.lx-product__actions { display: flex; gap: .5rem; margin-top: auto; }

.lx-banner { background: var(--lx-olive); color: #fff; border-radius: var(--lx-radius-lg); overflow: hidden; }
.lx-banner__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; padding: clamp(28px, 4vw, 58px); }
.lx-banner h2 { color: #fff; }
.lx-banner__list { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .6rem; }
.lx-banner__list li { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.92); }
.lx-banner__media { border-radius: var(--lx-radius); overflow: hidden; aspect-ratio: 4/3; background: #10130f; }
.lx-banner__media img { width: 100%; height: 100%; object-fit: cover; }

.lx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lx-gutter); text-align: center; position: relative; }
.lx-steps::before { content: ""; position: absolute; top: 24px; left: 16.67%; right: 16.67%; height: 1px; background: var(--lx-line); z-index: 0; }
.lx-step { position: relative; z-index: 1; }
.lx-step__icon { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #e4e6de; background: #eef0ea; color: var(--lx-olive-dark); font-weight: 700; display: grid; place-items: center; margin: 0 auto 1rem; transition: transform .24s var(--lx-ease), background .24s ease, color .24s ease; }
.lx-step:hover .lx-step__icon { transform: translateY(-4px); background: var(--lx-olive); color: #fff; }
.lx-step h3 { font-size: 1rem; }
.lx-step p { color: var(--lx-text-muted); font-size: .9rem; }

.lx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
/* Comp measures this heading at ~43px on a 1280 frame (both lines of the Arabic
   "مصمم للمتانة / والسلامة" scale to 43.1 and 43.6 from our own metrics), where the
   base h2 caps at 36px. At 36px the Arabic fits on one line and the copy below
   re-wraps, so the lines no longer carry the same words as the comp. */
.lx-split h2 { font-size: clamp(1.8rem, 3.375vw, 43px); }
/* Comp body copy in this block measures ~18px on a 29px leading, against 16.8/26
   from the base .lx-lead - which is what moved the words between lines. */
.lx-split .lx-lead { font-size: 18px; line-height: 1.61; }
/* The Arabic heading fits on one line at 43px, but the comp breaks it after
   "مصمم للمتانة". English wraps there on its own, so cap the width in RTL only.
   Line 1 measures 273px and the whole string 465px, so anything in between
   produces the comp's break; 24rem sits in the middle of that range. */
[dir="rtl"] .lx-split h2 { max-width: 24rem; }
.lx-split__media { border-radius: var(--lx-radius); overflow: hidden; aspect-ratio: 4/3; background: transparent; }
.lx-split__media img { width: 100%; height: 100%; object-fit: contain; }
.lx-badges { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.4rem; }
.lx-badge { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; color: var(--lx-ink-soft); }
.lx-badge svg { color: var(--lx-olive); }

.lx-finalcta { text-align: center; }
.lx-finalcta p { max-width: 52ch; margin-inline: auto; color: var(--lx-text-muted); }

.lx-footer { background: var(--lx-footer-bg); color: var(--lx-footer-fg); padding-block: 3rem 1.5rem; }
.lx-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 2rem; }
.lx-footer h4 { color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: 0; text-transform: none; margin-bottom: 1.4rem; }
.lx-footer a { color: rgba(255,255,255,.82); font-size: .98rem; display: block; padding: .42rem 0; transition: color .18s ease, padding-inline-start .18s ease; }
.lx-footer a:hover { color: #fff; padding-inline-start: 4px; }
.lx-footer__brand .lx-logo { color: #fff; }
.lx-footer__brand p { color: rgba(255,255,255,.78); font-size: .95rem; line-height: 1.65; max-width: 32ch; margin-top: 1.1rem; }
.lx-footer__social { display: flex; gap: 1.1rem; margin-top: 1.8rem; }
.lx-footer__social a { color: #fff; padding: 0; display: inline-flex; }
.lx-footer__social a:hover { padding-inline-start: 0; opacity: .8; }
.lx-footer__contact { display: inline-flex; align-items: center; gap: .6rem; padding: .42rem 0; line-height: 1; }
.lx-footer__mail { display: inline-flex; align-items: center; color: #fff; flex: none; }
.lx-footer__mail svg { display: block; }
.lx-footer__contact .lx-footer__mail { transform: translateY(.3em); }
.lx-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.2rem; padding-top: 1.2rem; font-size: .82rem; color: rgba(255,255,255,.5); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.lx-wa { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .18s var(--lx-ease); animation: lx-pop .4s var(--lx-ease) both; }
.lx-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: lx-ring 2.4s ease-out infinite; }
.lx-wa:hover { transform: scale(1.08); }
.lx-wa svg { width: 30px; height: 30px; position: relative; }

.lx-pager { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.lx-pager a, .lx-pager span { min-width: 38px; height: 38px; padding: 0 .6rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--lx-line); border-radius: var(--lx-radius-sm); background: var(--lx-surface); font-size: .9rem; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.lx-pager a:hover { border-color: var(--lx-olive); color: var(--lx-olive-dark); }
.lx-pager .current { background: var(--lx-olive); color: #fff; border-color: var(--lx-olive); }
.lx-pager .disabled { opacity: .45; pointer-events: none; }
.lx-pagesize, .lx-field { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--lx-text-muted); }
.lx-field { flex-direction: column; align-items: flex-start; gap: .3rem; }
.lx-pagesize select, .lx-field select, .lx-field input { font: inherit; padding: .45rem .6rem; border: 1px solid var(--lx-line); border-radius: var(--lx-radius-sm); background: #fff; transition: border-color .16s ease; }
.lx-field select:focus, .lx-field input:focus { outline: none; border-color: var(--lx-olive); }
.lx-toolbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1.5rem; }

.lx-stack > * + * { margin-top: 1rem; }
.text-muted { color: var(--lx-text-muted); }
.lx-link-arrow { color: var(--lx-olive); font-family: "Inter", sans-serif; font-weight: 700; font-size: 14px; transition: gap .18s ease; }
.lx-catalog-link { color: var(--lx-text-muted); font-weight: 500; font-size: .92rem; }
.lx-catalog-link:hover { color: var(--lx-ink); }
.lx-link-arrow:hover { text-decoration: underline; }

@keyframes lx-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lx-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes lx-ring { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@keyframes lx-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes hx-rise { from { transform: translateY(14px); } to { transform: none; } }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--lx-ease), transform .7s var(--lx-ease); will-change: opacity, transform; }
.reveal--left  { transform: translateX(-36px); }
.reveal--right { transform: translateX(36px); }
.reveal--scale { transform: scale(.94); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

[dir="rtl"] .lx-nav a::after { left: auto; right: 0; }
[dir="rtl"] .reveal--left  { transform: translateX(36px); }
[dir="rtl"] .reveal--right { transform: translateX(-36px); }
[dir="rtl"] .reveal.is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 960px) {
  .lx-hero__grid, .lx-banner__grid, .lx-split { grid-template-columns: 1fr; }
  .lx-hero__media, .lx-banner__media { order: -1; }
  .lx-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .lx-nav, .lx-header .lx-lang { display: none; }
  .lx-burger { display: block; }
  .lx-nav.open { display: flex; position: absolute; top: 72px; inset-inline: 0; flex-direction: column; background: var(--lx-bg); padding: 1rem var(--lx-gutter); border-bottom: 1px solid var(--lx-line); margin: 0; animation: lx-fade-up .25s var(--lx-ease) both; }
}
@media (max-width: 620px) {
  .lx-grid--2, .lx-grid--3, .lx-grid--4, .lx-steps { grid-template-columns: 1fr; }
  .lx-footer__grid { grid-template-columns: 1fr 1fr; }
}

.lx-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.lx-gallery__main { border: 1px solid var(--lx-line); border-radius: var(--lx-radius); overflow: hidden; aspect-ratio: 1/1; background: var(--lx-muted); }
.lx-gallery__main img { width: 100%; height: 100%; object-fit: cover; animation: lx-fade-up .4s var(--lx-ease) both; }
.lx-gallery__thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.lx-thumb { width: 74px; height: 74px; border: 1px solid var(--lx-line); border-radius: 10px; overflow: hidden; background: var(--lx-muted); cursor: pointer; padding: 0; transition: border-color .18s ease, transform .18s ease; }
.lx-thumb:hover { transform: translateY(-2px); }
.lx-thumb.active { border-color: var(--lx-olive); box-shadow: 0 0 0 2px rgba(81,98,56,.25); }
.lx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lx-detail__info h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.lx-spec { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.lx-keyfeatures { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.2rem; }
.lx-keyfeature { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.lx-keyfeature svg { color: var(--lx-olive); flex: none; }
@media (max-width: 860px) { .lx-detail { grid-template-columns: 1fr; gap: 2rem; } .lx-keyfeatures { grid-template-columns: 1fr; } }

.lx-admin-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.lx-admin-nav { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.lx-admin-nav a { padding: .5rem .9rem; border-radius: var(--lx-radius-sm); font-size: .9rem; font-weight: 600; color: var(--lx-text-muted); border: 1px solid var(--lx-line); background: #fff; }
.lx-admin-nav a.active, .lx-admin-nav a:hover { background: var(--lx-olive); color: #fff; border-color: var(--lx-olive); }
.lx-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-radius); overflow: hidden; }
.lx-table th, .lx-table td { text-align: start; padding: .8rem 1rem; border-bottom: 1px solid var(--lx-line); font-size: .9rem; vertical-align: middle; }
.lx-table th { background: var(--lx-muted); font-family: var(--lx-display); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lx-text-muted); }
.lx-table tr:last-child td { border-bottom: 0; }
.lx-table tbody tr { transition: background .15s ease; }
.lx-table tbody tr:hover { background: var(--lx-muted); }
.lx-badge-status { font-size: .74rem; font-weight: 600; padding: .2em .6em; border-radius: 999px; }
.lx-badge-on { background: var(--lx-olive-pale); color: var(--lx-olive-dark); }
.lx-badge-off { background: #f0d9d6; color: #b3261e; }
.lx-form { display: grid; gap: 1.1rem; max-width: 820px; }
.lx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.lx-form label { display: block; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; font-weight: 600; color: var(--lx-text-muted); margin-bottom: .45rem; }
.lx-input, .lx-form input, .lx-form select, .lx-form textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--lx-line); border-radius: var(--lx-radius-sm); font: inherit; background: #fff; }
.lx-input:focus, .lx-form input:focus, .lx-form select:focus, .lx-form textarea:focus { outline: none; border-color: var(--lx-olive); }
.lx-form textarea { min-height: 90px; resize: vertical; }
.lx-repeat-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.lx-fieldset { border: 1px solid var(--lx-line); border-radius: var(--lx-radius); padding: 1.1rem; }
.lx-fieldset > legend { font-family: var(--lx-display); font-weight: 700; font-size: .95rem; padding: 0 .4rem; }
.lx-icon-btn { background: none; border: 1px solid var(--lx-line); border-radius: var(--lx-radius-sm); padding: .4rem .6rem; cursor: pointer; font-size: .82rem; transition: all .15s ease; }
.lx-icon-btn:hover { border-color: var(--lx-ink); }
.lx-icon-btn--danger:hover { border-color: #b3261e; color: #b3261e; }
@media (max-width: 720px) { .lx-form-grid { grid-template-columns: 1fr; } }

[dir="rtl"] body { font-family: "Cairo", "KO Sans", "Inter", system-ui, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .lx-logo, [dir="rtl"] .lx-product__name { font-family: "Cairo", "KO Sans", "Manrope", sans-serif; }
/* Arabic: force the Figma Arabic typeface (KO Sans) everywhere, overriding the
   hardcoded Manrope/Inter families that have no Arabic glyphs. */
[dir="rtl"] *:not(i):not(svg):not(path) { font-family: "Cairo", "KO Sans", "Inter", "Segoe UI", system-ui, sans-serif !important; }
[dir="rtl"] .lx-hero__text, [dir="rtl"] .lx-lead { margin-inline: 0; }
[dir="rtl"] .lx-link-arrow, [dir="rtl"] .lx-cat__body span { direction: rtl; }

[tabindex="-1"]:focus,
h1:focus,
h2:focus { outline: none; }
:focus:not(:focus-visible) { outline: none; }

.hx { position: relative; overflow: hidden; min-height: max(520px, 56.25vw); display: flex; align-items: stretch;
  background: linear-gradient(120deg, #1c2114 0%, #3a4327 45%, #708255 100%); color: #fff; }
.hx__streaks { position: absolute; inset: 0; background:
  repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px); pointer-events: none; opacity:.7; }
.hx__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: center; width: 100%; }
.hx__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #434e2f; background: rgba(255,255,255,.1); border: 1px solid #adadad; padding: 10px 16px; border-radius: 400px; margin-bottom: 40px; }
.hx h1 { color: #fff; font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(2.4rem, 4.6vw, 56px); line-height: 1.1; letter-spacing: -0.064em; margin: 0 0 20px; }
.hx h1 .accent { color: #bace9a; }
.hx__text { color: rgba(255,255,255,.85); font-family: "Inter", sans-serif; font-weight: 300; font-size: 16px; line-height: 24px; max-width: 424px; margin: 0 0 24px; }
.hx__cta { display: flex; gap: 26px; flex-wrap: wrap; }
.hx__media { position: relative; }
.hx__media img { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); animation: lx-float 6s ease-in-out infinite; }
.hx__slide { animation: hx-rise .5s var(--lx-ease) both; display: flex; flex-direction: column; align-items: flex-start; }
.hx__dots { display: flex; gap: .5rem; margin-top: 2rem; }
.hx__dots button { width: 10px; height: 10px; border-radius: 999px; border: 0; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; transition: all .2s ease; }
.hx__dots button.active { background: var(--lx-olive); width: 12px; height: 12px; }
.hx__pills { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 2.5rem; }
.hx__pill { display: flex; align-items: center; gap: .75rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); border-radius: 16px; padding: 16px; min-height: 74px; font-family: "Manrope", sans-serif; font-size: 1rem; font-weight: 600; color: #fff; }
.hx__pill svg { color: #bace9a; flex: none; }

.lx-cat5 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--lx-gutter); }
.lx-cat5 > *:nth-child(1), .lx-cat5 > *:nth-child(2) { grid-column: span 3; }
.lx-cat5 > *:nth-child(3), .lx-cat5 > *:nth-child(4), .lx-cat5 > *:nth-child(5) { grid-column: span 2; }
.lx-ccard { position: relative; background: var(--lx-surface); border: 1px solid rgba(20,22,15,.05); border-radius: 24px; padding: 32px; display: flex; align-items: flex-start; gap: 1rem; min-height: 200px; overflow: hidden; transition: transform .24s var(--lx-ease), box-shadow .24s var(--lx-ease); box-shadow: 0 1px 2px rgba(20,22,15,.04), 0 14px 34px rgba(20,22,15,.06); }
.lx-ccard:hover { transform: translateY(-4px); box-shadow: var(--lx-shadow-lg); }
.lx-ccard__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: 56%; }
.lx-ccard__body h3 { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: var(--lx-ink); margin: 0 0 10px; }
.lx-ccard__body p { color: var(--lx-text-muted); font-size: 15px; line-height: 1.5; margin: 0; max-width: 24ch; }
.lx-ccard__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--lx-line); display: grid; place-items: center; color: var(--lx-ink); flex: none; margin-top: 18px; transition: all .2s ease; }
.lx-ccard:hover .lx-ccard__arrow { background: var(--lx-olive); color: #fff; border-color: var(--lx-olive); }
.lx-ccard__img { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: auto; height: auto; max-width: 46%; max-height: 74%; object-fit: contain; object-position: right center; opacity: 1; pointer-events: none; }

.lx-bcard { position: relative; background: var(--lx-surface); border: none; border-radius: 28px; padding: 13px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform .2s var(--lx-ease), box-shadow .2s var(--lx-ease); }
.lx-bcard .lx-link-arrow::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lx-bcard .lx-chips, .lx-bcard .lx-bcard__cat { position: relative; z-index: 2; }
.lx-bcard:hover { transform: translateY(-5px); box-shadow: var(--lx-shadow-lg); border-color: transparent; }
/* Every product shot is 1.1275:1, so the media box uses that ratio: the photo then fills
   it edge to edge with nothing cropped and no letterbox gap against the card. */
.lx-bcard__media { position: relative; aspect-ratio: 1127 / 1000; background: #F9F9F9; border-radius: 16px; overflow: hidden; margin-bottom: 4px; }
.lx-bcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--lx-ease); }
.lx-bcard:hover .lx-bcard__media img { transform: scale(1.05); }
.lx-bcard__cat { display: inline-block; align-self: flex-start; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: var(--lx-olive); padding: 4px 12px; border-radius: 9999px; margin-bottom: .7rem; }
.lx-bcard__body { padding: .8rem 0 0; display: flex; flex-direction: column; flex: 1; }
.lx-bcard__name { font-family: var(--lx-display); font-weight: 700; font-size: 18px; line-height: 28px; color: var(--lx-ink); margin-bottom: .35rem; min-height: 56px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lx-bcard__desc { font-family: "Inter", sans-serif; color: #45483e; font-size: 14px; line-height: 20px; margin-bottom: 1rem; min-height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lx-bcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

.lx-collection-quote { text-align: center; font-style: italic; color: var(--lx-text-muted); margin: 1.6rem 0 0; }
.lx-collection-quote::before { content: "\201C"; }
.lx-collection-quote::after { content: "\201D"; }
.lx-btn--ghost-light { background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff; }
.lx-btn--ghost-light:hover { background: rgba(255,255,255,.12); }
.lx-explore-cta .lx-btn--ghost { background: transparent; border: 1px solid var(--lx-olive); color: var(--lx-olive); }
.lx-explore-cta .lx-btn--ghost:hover { background: rgba(112,130,85,.08); }
.lx-tabs { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; }
.lx-tab { padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--lx-line); background: #fff; font-size: .9rem; font-weight: 600; color: var(--lx-text-muted); cursor: pointer; transition: all .18s ease; }
.lx-tab:hover { border-color: var(--lx-olive); color: var(--lx-olive-dark); }
.lx-tab.active { background: var(--lx-olive); color: #fff; border-color: var(--lx-olive); }

.lx-why { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(to left, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 50%),
              linear-gradient(136.5deg, #434E2F 0%, #5A6A42 100%); }
.lx-why__wm { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-family: var(--lx-display); font-weight: 800; font-size: clamp(3rem, 13vw, 12rem); line-height: .9; color: rgba(255,255,255,.05); white-space: normal; text-align: center; pointer-events: none; }
.lx-why__inner { position: relative; z-index: 2; }
.lx-why h2 { color: #fff; }
.lx-why .lx-eyebrow { background: transparent !important; border-color: transparent; padding-inline: 0; }
.lx-why__lead { color: rgba(255,255,255,.8); max-width: 60ch; margin-inline: auto; }
.lx-why__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 2.5rem; }
.lx-wcard { flex: 0 0 calc((100% - 48px) / 3); box-sizing: border-box; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 32px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .24s var(--lx-ease), background .24s ease; }
.lx-wcard:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); }
.lx-wcard__icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.10); display: grid; place-items: center; color: #fff; margin-bottom: 1.1rem; }
.lx-wcard h3 { color: #fff; font-size: 1.05rem; }
.lx-wcard p { color: rgba(255,255,255,.75); font-size: .88rem; margin: 0; }
.lx-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 96px; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.14); text-align: center; }
.lx-stats > div { border-inline-end: 1px solid rgba(255,255,255,.14); }
.lx-stats > div:last-child { border-inline-end: 0; }
.lx-stat__n { font-family: var(--lx-display); font-weight: 800; font-size: 1.6rem; color: #fff; }
.lx-stat__l { font-family: "Inter", sans-serif; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #bace9a; margin-top: .35rem; }
.lx-why__cta { display: flex; gap: .8rem; justify-content: center; margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.14); }

.lx-contact2 { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: start; }
.lx-contact2__card { background: #fff; border: 1px solid #ececec; border-radius: 24px; box-shadow: 0 2px 4px rgba(20,22,15,.03), 0 14px 40px rgba(20,22,15,.07); padding: 2rem; }
.lx-check { list-style: none; padding: 1.4rem 0 0; margin: 1.4rem 0 0; border-top: 1px solid var(--lx-line); display: grid; gap: .75rem; }
.lx-check li { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.lx-check svg { color: var(--lx-olive); flex: none; }
@media (max-width: 960px) { .lx-contact2 { grid-template-columns: 1fr; } .lx-cat5 { grid-template-columns: repeat(2,1fr); } .lx-cat5 > * { grid-column: span 1 !important; } .lx-wcard { flex: 0 0 calc((100% - 24px) / 2); } .hx__pills { grid-template-columns: 1fr 1fr; } .hx__grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .lx-cat5, .lx-stats, .hx__pills { grid-template-columns: 1fr; } .lx-wcard { flex: 0 0 100%; } }

.lx-footer { background: linear-gradient(150deg, #697b4e 0%, #516238 80%); color: rgba(255,255,255,.82); }
.lx-footer__news { display: flex; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; overflow: hidden; max-width: 260px; }
.lx-footer__news input { flex: 1; background: transparent; border: 0; padding: .6rem .7rem; color: #fff; font: inherit; outline: none; }
.lx-footer__news input::placeholder { color: rgba(255,255,255,.6); }
.lx-footer__news button { background: transparent; border: 0; color: #fff; padding: 0 .8rem; cursor: pointer; }
.lx-footer__bottom { border-top-color: rgba(255,255,255,.16); }

.lx-btn--lg { padding: 16px 24px; font-size: 18px; border-radius: 16px; }

.hx { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 88px); }
.hx__bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; opacity: 1; }
/* Isolated product layer sits over the full-bleed background, scaled ~10% smaller than the reference.
   object-fit:contain guarantees the whole product always shows (never cropped) at any window width. */
.hx__product { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; z-index: 2; pointer-events: none; transform: scale(0.9); transform-origin: center; }
.hx__pic { display: contents; }
.hx__mobimg { display: none; }
.hx__grid, .hx__pills, .hx__streaks { position: relative; z-index: 2; }
.hx__media { display: flex; justify-content: center; }
.hx__media img { max-width: 100%; max-height: 460px; width: auto; height: auto; object-fit: contain; }
.hx__pills { margin-top: clamp(2rem, 4vw, 3.5rem); }

.hx__pill { background: rgba(255,255,255,.6); border: 1px solid rgba(197,200,187,.2); color: var(--lx-ink); box-shadow: none; }
.hx__pill svg { color: #516238; }
.hx__pill .hx__pill-ic { width: 44px; height: 44px; border-radius: 50%; background: rgba(81,98,56,.10); display: grid; place-items: center; flex: none; }
.hx__pill .hx__pill-ic svg { width: 100%; height: 100%; }

@media (max-width: 1024px) {
  .hx__media img { max-height: 300px; }
  .hx { min-height: auto; }
}
@media (max-width: 620px) {
  .hx__media img { max-height: 220px; }
}

.lxnav { position: sticky; top: 0; z-index: 50; padding: 20px 0 0; }
.lxnav__bar { width: min(88%, var(--lx-container)); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem;
  background: rgba(255,255,255,.80); backdrop-filter: blur(12px);
  border: 1px solid rgba(197,200,187,.35); border-radius: 16px;
  padding: 16px 40px; box-shadow: 0 8px 30px rgba(20,22,15,.08); }
.lxnav .lx-logo { font-family: var(--lx-display); font-weight: 800; font-size: 1.4rem; letter-spacing: .04em; color: var(--lx-ink); }
.lxnav__links { display: flex; gap: 2rem; margin-inline: auto; }
.lxnav__links a { font-family: var(--lx-display); font-weight: 500; font-size: .95rem; color: #57534e; padding: .3rem 0; position: relative; }
.lxnav__links a:hover { color: var(--lx-ink); }
.lxnav__links a.active { color: var(--lx-ink); font-weight: 700; }
.lxnav__links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--lx-olive); border-radius: 2px; }
.lxnav__actions { display: flex; align-items: center; gap: .7rem; }
.lxnav__actions > .lx-btn--primary { margin-inline-start: .5rem; }
.lxnav .lx-lang { display: inline-flex; border: 1px solid var(--lx-line); border-radius: var(--lx-radius-sm); overflow: hidden; }
.lxnav .lx-lang a { padding: .25em .6em; font-size: .78rem; font-weight: 600; color: var(--lx-text-muted); }
.lxnav .lx-lang a.active { background: var(--lx-olive); color: #fff; }
.lxnav__signin { font-size: .85rem; font-weight: 600; color: var(--lx-ink-soft); }
.lxnav__signin:hover { color: var(--lx-olive-dark); }
.lxnav__burger { display: none; background: none; border: 0; cursor: pointer; padding: .3rem; }
.lxnav__burger span { display: block; width: 22px; height: 2px; background: var(--lx-ink); margin: 4px 0; }
@media (max-width: 900px) {
  .lxnav__links { display: none; }
  .lxnav__links.open { display: flex; position: absolute; top: 68px; left: var(--lx-gutter); right: var(--lx-gutter); flex-direction: column; gap: .8rem; background: #fff; border: 1px solid var(--lx-line); border-radius: 14px; padding: 1rem 1.2rem; margin: 0; box-shadow: var(--lx-shadow); }
  .lxnav .lx-lang { display: none; }
  .lxnav__burger { display: block; }
}

.lxnav { padding-top: 12px; }

.hx { margin-top: -84px; padding-top: calc(84px + clamp(28px, 4vw, 52px)); }
@media (max-width: 900px) {
  .hx { margin-top: -76px; padding-top: calc(76px + 28px); }
}

.hx { background: #eceee4; color: var(--lx-text); }
.hx__bgimg { object-position: center; opacity: 1; z-index: 0; }
.hx::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(236,238,228,.92) 0%, rgba(236,238,228,.55) 34%, rgba(236,238,228,0) 58%); }
.hx__body { position: relative; z-index: 2; min-height: 560px; display: flex; flex-direction: column; justify-content: space-between; padding-block: clamp(20px, 3.5vw, 52px); gap: 1.5rem; }
.hx__slide { max-width: 560px; }
.hx h1 { color: var(--lx-ink); }
.hx h1 .accent { color: var(--lx-olive-deep); }
.hx__text { color: #212121; }
.hx__eyebrow { background: rgba(255,255,255,.1); border-color: #adadad; color: #434e2f; }
.hx__cta .lx-btn { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 18px; border-radius: 16px; padding: 16px 24px; }
.hx__cta .lx-btn--primary { background: #708255; color: #fff; border-color: #708255; }
.hx__cta .lx-btn--primary:hover { background: var(--lx-olive-dark); }
.hx__cta .lx-btn--light { background: #dfdfdf; color: #708255; border: 1px solid #e2e8f0; }
.hx__cta .lx-btn--light:hover { background: #d2d2d2; }
.hx__dots button { background: rgba(26,28,27,.22); }
.hx__dots button.active { background: var(--lx-olive); }
@media (max-width: 900px) {
  .hx::after { background: linear-gradient(180deg, rgba(236,238,228,.92) 0%, rgba(236,238,228,.4) 60%, rgba(236,238,228,.7) 100%); }
  .hx__body { min-height: 480px; }
}

.hx__bgimg { object-fit: contain; object-position: right center; }
@media (max-width: 900px) {
  .hx__bgimg { object-fit: contain; object-position: center bottom; opacity: .85; }
}

.hx__bgimg { object-fit: cover; object-position: right center; }
@media (max-width: 900px) { .hx__bgimg { object-fit: cover; object-position: right center; } }

/* ===== Mobile Home hero: image banner on top, content stacked below ===== */
@media (max-width: 720px) {
  .hx { display: flex; flex-direction: column; min-height: auto; overflow: visible; margin-top: -76px; padding-top: calc(76px + 14px); }
  .hx::after { display: none !important; }
  .hx__pic { display: block; order: -1; position: relative; width: calc(100% - 32px); margin: 0 auto 22px; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; box-shadow: 0 10px 30px rgba(20,22,15,.10); }
  .hx__bgimg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; }
  .hx__product { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: scale(0.9); transform-origin: center; z-index: 2; }
  .hx__mobimg { display: none !important; }
  .hx__body { position: static; display: block; min-height: 0; z-index: 2; padding: 0 var(--lx-gutter) 10px; }
  .hx__wm { display: none; }
  .hx__slide { max-width: none; animation: none; }
  .hx__eyebrow { align-self: flex-start; }
  .hx h1 { font-size: clamp(2rem, 8vw, 2.7rem); }
  .hx__cta { flex-direction: column; align-items: stretch; }
  .hx__cta .lx-btn { width: 100%; justify-content: center; }
  .hx__pills { grid-template-columns: 1fr; gap: 10px; margin-top: 1.6rem; }
}


/* ===== Tablet Home hero: image banner on top, content below (avoids over-zoomed cover) ===== */
@media (min-width: 721px) and (max-width: 1439px) {
  .hx { display: flex; flex-direction: column; min-height: auto; overflow: visible; }
  .hx::after { display: none !important; }
  .hx__pic { display: block; order: -1; position: relative; width: 88%; margin: 0 auto 28px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; box-shadow: 0 10px 30px rgba(20,22,15,.10); }
  .hx__bgimg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; }
  .hx__mobimg { display: none !important; }
  .hx__body { position: static; display: block; min-height: 0; z-index: 2; }
  .hx__wm { display: none; }
  .hx__slide { max-width: none; animation: none; }
}

.lx-bcard__media { background: #F9F9F9; border-radius: 16px; }
.lx-bcard__media img { object-fit: cover; padding: 0; }
.lx-product__media { background: #f4f5f0; }
.lx-product__media img { object-fit: contain; padding: 0; }

.lx-ccard__img { width: auto; height: auto; max-width: 46%; max-height: 74%; object-fit: contain; object-position: right center; top: 50%; right: 16px; bottom: auto; transform: translateY(-50%); opacity: 1; }

/* ===== Home category cards: per-product bleed (matches English design) — targeted by src so no rebuild needed ===== */
@media (min-width: 961px) {
  .lx-ccard__img[src*="cat-chargers-"]    { max-width: 34%; max-height: none; right: 26px;  top: 50%;  bottom: auto; transform: translateY(-50%); height: 66%; width: auto; }
  .lx-ccard__img[src*="cat-cables-"]      { max-width: none; max-height: none; right: -55px; top: 50%;  bottom: auto; transform: translateY(-50%); height: 106%; width: auto; }
  .lx-ccard__img[src*="cat-power-banks-"] { max-width: 34%; max-height: none; right: 8px;   top: -10px; bottom: auto; transform: none;            height: 96%; width: auto; }
  .lx-ccard__img[src*="cat-earphones-"]   { max-width: 34%; max-height: none; right: 22px;  top: auto; bottom: -8px; transform: none;            height: 86%; width: auto; }
  .lx-ccard__img[src*="cat-car-charges-"] { max-width: 34%; max-height: none; right: 24px;  top: 50%;  bottom: auto; transform: translateY(-50%); height: 66%; width: auto; }
}

/* 621-960px: category cards go 2-up, so the bleed sizing above must not apply -
   keep the art inside its own column so it can never run under the copy. */
@media (max-width: 960px) {
  .lx-ccard__img[src*="cat-"] { max-width: 34%; max-height: 72%; width: auto; height: auto;
    right: 14px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .lx-ccard__body { max-width: 56%; }
  .lx-ccard__body p { max-width: 100%; }
}

.lx-footer__news { max-width: 290px; }
.lx-footer__news input { min-width: 0; }
.lx-footer__news button { flex: none; min-width: 46px; padding: 0 .9rem; font-size: 1.15rem; line-height: 1; display: grid; place-items: center; }

.lx-wcard__icon { color: #fff; }
.lx-wcard__icon img { display: block; }

.lx-abouthero { text-align: center; padding-block: clamp(48px, 7vw, 90px) clamp(24px,3vw,40px); }
.lx-abouthero h1 { max-width: none; margin-inline: auto; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.08; letter-spacing: -0.025em; }
.lx-abouthero h1 .accent { color: var(--lx-olive); }

.lx-heritage { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.lx-heritage p { color: var(--lx-text-muted); }
.lx-heritage .lx-hl { color: var(--lx-olive); }
.lx-heritage strong.lx-hl { font-weight: 700; }

.lx-mv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lx-gutter); }
.lx-mv-card { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-radius-lg); padding: 2.2rem; transition: transform .24s var(--lx-ease), box-shadow .24s ease; }
.lx-mv-card:hover { transform: translateY(-4px); box-shadow: var(--lx-shadow); }
.lx-mv-card--dark { background: linear-gradient(150deg, #516238, #434e2f); color: #fff; border-color: transparent; }
.lx-mv-card--dark h3, .lx-mv-card--dark p { color: #fff; }
.lx-mv-card--dark p { color: #d6eab5; }
.lx-mv-card__icon { color: var(--lx-olive-dark); margin-bottom: 1.2rem; line-height: 0; }
.lx-mv-card__icon svg { width: 30px; height: 30px; }
.lx-mv-card--dark .lx-mv-card__icon { color: var(--lx-olive-pale); }
.lx-mv-card h3 { font-size: 1.4rem; }
.lx-mv-card p { margin: 0; }

.lx-standard-head { display: grid; grid-template-columns: 1fr min(384px, 45%); gap: 2rem; align-items: start; margin-bottom: 2.5rem; }
/* Figma anchors the sub-copy to the container's right edge in a 384px column (block ink
   848.77 -> 1201.1 inside a 48-1232 container), which is what breaks it after "with". */
.lx-standard-head p { color: var(--lx-text-muted); margin: 0; text-align: start; align-self: start; }
.lx-pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.lx-pillar { padding: 1.7rem 1.4rem; border: 1px solid var(--lx-line); border-radius: 16px; background: var(--lx-surface); transition: transform .28s var(--lx-ease), box-shadow .28s var(--lx-ease); }
.lx-pillar:hover { transform: translateY(-4px); box-shadow: var(--lx-shadow-lg); }
.lx-pillar__icon { color: var(--lx-olive-dark); margin-bottom: 1rem; line-height: 0; }
.lx-pillar__icon svg { width: 30px; height: 30px; }
.lx-pillar h3 { font-size: 1.05rem; }
.lx-pillar p { color: var(--lx-text-muted); font-size: .88rem; margin: 0; }

.lx-infra { background: linear-gradient(150deg, #434e2f 0%, #516238 60%, #3a4426 100%); color: #fff; }
.lx-infra .lx-section__head--center { max-width: 720px; }
.lx-infra h2 { color: #fff; font-size: clamp(2rem, 3.75vw, 48px); letter-spacing: -0.01em; }
.lx-infra__lead { color: rgba(255,255,255,.8); font-size: 18px; max-width: 675px; margin-inline: auto; }
.lx-infra__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lx-gutter); margin-top: 2.5rem; }
.lx-infra-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--lx-radius); padding: 1.8rem; }
.lx-infra-card__icon { color: #bace9a; margin-bottom: 1rem; line-height: 0; }
.lx-infra-card__icon svg { width: 30px; height: 30px; }
.lx-infra-card h3 { color: #fff; }
.lx-infra-card p { color: rgba(255,255,255,.78); margin: 0; }

.lx-quote-section { position: relative; overflow: hidden; }
.lx-quote-deco { position: absolute; z-index: 0; width: 132px; opacity: .10; pointer-events: none; line-height: 0; }
.lx-quote-deco svg { width: 100%; height: auto; display: block; }
.lx-quote-deco--tr { top: 44px; inset-inline-end: 6%; }
.lx-quote-deco--bl { bottom: 44px; inset-inline-start: 6%; }
.lx-quote { position: relative; z-index: 1; text-align: center; max-width: 1160px; margin-inline: auto; padding-inline: 40px; }
/* Comp: Manrope 400 36/45, hand-broken into four lines centred on the page. */
.lx-quote blockquote { font-family: var(--lx-display); font-weight: 400; font-size: 36px; line-height: 45px;
  color: var(--lx-ink); margin: 0 auto 1.6rem; max-width: 820px; }
.lx-br-d { display: inline; }
/* The comp breaks the quote by hand (line 3 ends at "trust" even though "that" would fit),
   so About.razor carries explicit <br class="lx-qbr">; drop them on narrow screens. */
.lx-quote__attr { display: inline-flex; align-items: center; gap: .8rem; }
.lx-quote__line { display: none; }
.lx-quote__who { text-align: start; }
.lx-quote__who strong { display: block; font-size: 20px; letter-spacing: .04em; color: var(--lx-olive-dark); }
.lx-quote__who span { font-size: 14px; color: var(--lx-text-muted); }

.lx-bizsec { background: #eeeeee; }
.lx-bizcase { display: grid; gap: 1rem; }
.lx-biz-row { display: flex; align-items: center; gap: 1.2rem; background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-radius); padding: 1.2rem 1.5rem; transition: transform .2s var(--lx-ease), box-shadow .2s ease; }
.lx-biz-row:hover { transform: translateX(4px); box-shadow: var(--lx-shadow); }
.lx-biz-row__icon { width: 42px; height: 42px; border-radius: 50%; background: #edefeb; color: var(--lx-olive-dark); display: grid; place-items: center; flex: none; }
.lx-biz-row__body { flex: 1; }
.lx-biz-row__body h3 { font-size: 1.02rem; margin-bottom: .15rem; }
.lx-biz-row__body p { color: var(--lx-text-muted); font-size: .88rem; margin: 0; }
.lx-biz-row__tag { color: var(--lx-olive-dark); font-weight: 700; font-size: .85rem; white-space: nowrap; }

@media (max-width: 900px) {
  .lx-heritage, .lx-mv, .lx-standard-head, .lx-infra__grid { grid-template-columns: 1fr; }
  .lx-pillars { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .lx-pillar { padding: 1.4rem 1.3rem; }
}
@media (max-width: 560px) {
  .lx-pillars { grid-template-columns: 1fr; }
  .lx-biz-row { flex-wrap: wrap; }
}

.lx-quote blockquote { margin-inline: auto; }
@media (max-width: 900px) {
  .lx-quote-deco { width: 84px; }
  .lx-quote-deco--tr { top: 24px; inset-inline-end: 5%; }
  .lx-quote-deco--bl { bottom: 24px; inset-inline-start: 5%; }
}

.lx-logo--img { display: inline-flex; align-items: center; }
.lx-logo--img img { height: 30px; width: auto; display: block; }
.lx-footer .lx-logo--white img { height: 34px; filter: brightness(0) invert(1); }

.lxnav .lx-lang a, .lx-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; line-height: 1; padding: .55em .8em; font-size: .85rem; }

.lx-footer .lx-logo--white img { filter: none; height: 34px; }

.lx-lang a.lx-ar { transform: none; }

.lx-qhero { position: relative; overflow: hidden; text-align: center; padding-block: clamp(40px, 5vw, 76px); background: var(--lx-bg); }
.lx-qhero__inner { position: relative; z-index: 2; max-width: 820px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: 26px; }
.lx-eyebrow--pale { background: #cfe3a3; color: #121f01; letter-spacing: .12em; font-size: .8rem; padding: 9px 20px; border-radius: 999px; }
.lx-qhero h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -0.025em;
  line-height: 1.06; margin: 0; }
.lx-qhero__sub { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--lx-ink-soft);
  max-width: 820px; margin: 0; line-height: 1.5; }
.lx-qhero__wm { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; width: min(42vw, 320px); aspect-ratio: 351 / 411; background: url("/images/design/quality-x.png") center / contain no-repeat; opacity: .85; }

.lx-qhead { text-align: center; max-width: 720px; margin: 0 auto clamp(38px, 5vw, 60px); }
.lx-qhead h2 { margin: 0 0 .5rem; }
.lx-qhead p { color: var(--lx-ink-soft); margin: 0; font-size: 1.05rem; }
.lx-qhead--left { text-align: start; max-width: none; margin-left: 0; margin-right: 0; }
.lx-qhead--left .lx-underline { margin-top: 14px; }

.lx-qgrid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lx-qcard { background: var(--lx-surface); border: 1px solid var(--lx-line);
  border-radius: 12px; padding: 30px 26px; box-shadow: var(--lx-shadow);
  transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease); }
.lx-qcard:hover { transform: translateY(-6px); box-shadow: var(--lx-shadow-lg); }
.lx-qcard__icon { margin-bottom: 20px; line-height: 0; color: var(--lx-olive-dark); }
.lx-qcard__icon svg { width: 34px; height: 34px; }
.lx-qcard h3 { margin: 0 0 .55rem; font-size: 1.15rem; color: var(--lx-ink); }
.lx-qcard p { margin: 0; color: var(--lx-ink-soft); font-size: .95rem; line-height: 1.55; }
.lx-qcard--hl { background: var(--lx-olive); border-color: transparent;
  box-shadow: 0 18px 42px rgba(81,98,56,.32); }
.lx-qcard--hl .lx-qcard__icon { color: #fff; }
.lx-qcard--hl h3 { color: #fff; }
.lx-qcard--hl p { color: #d6eab5; }

.lx-qtest { background: #eff5e5; }
.lx-qtest .lx-qgrid4 { gap: 24px; }
.lx-qenv { background: var(--lx-surface); border: 1px solid var(--lx-line);
  border-radius: 12px; padding: 28px 24px; text-align: center;
  transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease); }
.lx-qenv:hover { transform: translateY(-6px); box-shadow: var(--lx-shadow-lg); }
.lx-qenv__icon { width: 52px; height: 52px; border-radius: 50%; background: #edefeb;
  color: var(--lx-olive-dark); display: grid; place-items: center; margin: 0 auto 18px; }
.lx-qenv__icon svg { width: 26px; height: 26px; }
.lx-qenv h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.lx-qenv p { margin: 0; color: var(--lx-ink-soft); font-size: .95rem; }

.lx-qsafety { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(139deg, #697b4e 0%, #516238 100%); }
.lx-qsafety .lx-qhead h2 { color: #fff; }
.lx-qsafety .lx-qhead p { color: #c6d5a9; font-size: 18px; max-width: 560px; }
.lx-qsafety__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.lx-prot { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 26px 20px; backdrop-filter: blur(2px);
  transition: transform .35s var(--lx-ease), background .35s var(--lx-ease); }
.lx-prot:hover { transform: translateY(-6px); background: rgba(255,255,255,.12); }
.lx-prot__tag { font-size: .66rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #d6eab5; margin-bottom: 16px; }
.lx-prot__icon { width: 44px; height: 44px; color: #fff; margin-bottom: 16px; }
.lx-prot__icon svg { width: 100%; height: 100%; }
.lx-prot h3 { color: #fff; margin: 0 0 .5rem; font-size: 1.05rem; }
.lx-prot p { margin: 0; color: rgba(255,255,255,.8); font-size: .88rem; line-height: 1.5; }

.lx-qgrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lx-qtechcard { background: var(--lx-surface); border: 1px solid var(--lx-line);
  border-radius: 12px; padding: 30px 28px; display: flex; gap: 18px; align-items: flex-start;
  transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease); }
.lx-qtechcard:hover { transform: translateY(-5px); box-shadow: var(--lx-shadow-lg); }
.lx-qtechcard__icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; background: var(--lx-olive-pale); color: var(--lx-olive-deep); }
.lx-qtechcard h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.lx-qtechcard p { margin: 0; color: var(--lx-ink-soft); font-size: .92rem; line-height: 1.5; }

.lx-qcatrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.lx-qcatitem { text-align: center; padding: 28px 16px; border-radius: 14px;
  background: var(--lx-surface); border: 1px solid var(--lx-line);
  transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease); }
.lx-qcatitem:hover { transform: translateY(-6px); box-shadow: var(--lx-shadow-lg); }
.lx-qcatitem__icon { margin: 0 auto 16px; line-height: 0; color: var(--lx-olive-dark); }
.lx-qcatitem__icon svg { width: 40px; height: 40px; }
.lx-qcatitem span { font-weight: 700; color: var(--lx-ink); font-size: .98rem; }

.lx-qpillars { position: relative; overflow: hidden; color: #fff; text-align: center;
  background: linear-gradient(150deg, #434e2f 0%, #516238 60%, #3a4426 100%); }
.lx-qpillars__wm { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; z-index: 1; pointer-events: none; text-align: center;
  font-family: var(--lx-display); font-weight: 800; font-size: clamp(2.4rem, 8.5vw, 7rem);
  letter-spacing: -0.03em; line-height: 0.98;
  color: rgba(250,255,233,.05); }
.lx-qpillars__inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lx-qpillars h2 { color: #fff; margin: 0; font-size: clamp(1.9rem, 3.2vw, 41px);
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.086; }
.lx-qpillars p { color: #a9ba8e; margin: 0 auto; font-size: 16px; line-height: 1.6; max-width: 572px; }

.lx-qcta { text-align: center; background: var(--lx-muted); }
.lx-qcta__inner { max-width: 860px; margin-inline: auto; display: flex;
  flex-direction: column; align-items: center; gap: 20px; }
.lx-qcta h2 { margin: 0; font-size: clamp(2rem, 3.75vw, 48px); letter-spacing: normal; line-height: 1; }
.lx-qcta p { margin: 0 auto; color: var(--lx-ink-soft); font-size: 18px; max-width: 620px; }

@media (max-width: 1000px) {
  .lx-qgrid4, .lx-qsafety__grid, .lx-qcatrow { grid-template-columns: repeat(2, 1fr); }
  .lx-qgrid3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lx-qgrid4, .lx-qsafety__grid, .lx-qcatrow, .lx-qgrid3 { grid-template-columns: 1fr; }
  .lx-qtechcard { flex-direction: row; }
}

.lx-pthero { position: relative; overflow: hidden; text-align: center;
  padding-block: clamp(76px, 11vw, 150px); background: var(--lx-bg); }
/* Comp: the X sits high in the hero — its centre is 36.4% down the section, so the
   buttons clear its bottom edge instead of overlapping it. */
.lx-pthero__wm { position: absolute; top: 36.4%; left: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; width: min(42vw, 349px); aspect-ratio: 349 / 408; background: url("/images/design/quality-x.png") center / contain no-repeat; opacity: .85; }
.lx-pthero__inner { position: relative; z-index: 2; max-width: 900px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: 30px; }
.lx-pthero h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -0.025em; line-height: 1.02; margin: 0; }
.lx-pthero h1 .accent { color: var(--lx-olive-dark); }
.lx-pthero__sub { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--lx-text-muted);
  max-width: 520px; margin: 0 auto; line-height: 1.6; }
.lx-pthero__btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
/* Partner hero: desktop shows both buttons; mobile comp shows only the ghost one, labelled "Submit Request". */
.lx-donly { display: inline; }
.lx-monly { display: none; }
.lx-ic-d { display: inline-flex; }
.lx-ic-m { display: none; }

.lx-btn--ghost { background: #e8e8e8; color: var(--lx-olive-dark); }
.lx-btn--ghost:hover { background: #dcdcdc; }

.lx-pthead h2 { margin: 0 0 14px; }
.lx-underline { width: 64px; height: 4px; border-radius: 999px; background: var(--lx-olive-dark); }
.lx-pthead--center { text-align: center; }
.lx-pthead--center .lx-underline { margin-inline: auto; }
.lx-pthead__sub { color: var(--lx-text-muted); margin: 12px 0 0; font-size: 1.05rem; }

.lx-ptwho { background: #f3f3f3; }
.lx-whogrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.lx-whocard { background: var(--lx-surface); border-radius: 28px; padding: 40px;
  transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease); }
.lx-whocard:hover { transform: translateY(-6px); box-shadow: var(--lx-shadow-lg); }
.lx-whocard__icon { width: 44px; height: 44px; color: var(--lx-olive-dark); margin-bottom: 14px; }
.lx-whocard__icon svg { width: 100%; height: 100%; }
.lx-whocard h3 { font-size: 1.4rem; margin: 0 0 10px; }
.lx-whocard p { margin: 0; color: var(--lx-text-muted); font-size: .98rem; line-height: 1.6; }

.lx-ptwhy .lx-container { display: grid; grid-template-columns: 2fr 3fr; gap: 32px; align-items: start; }
.lx-ptwhy__head h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin: 0 0 20px; }
.lx-ptwhy__head h2 .accent { color: var(--lx-olive); }
.lx-ptwhy__head p { color: var(--lx-text-muted); font-size: 1.2rem; line-height: 1.6; margin: 0; }
.lx-whygrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.lx-whycard { background: #eee; border-radius: 28px; padding: 32px; display: flex;
  flex-direction: column; gap: 16px; transition: transform .35s var(--lx-ease), background .35s var(--lx-ease); }
.lx-whycard:hover { transform: translateY(-5px); background: #e6e6e6; }
.lx-whycard--wide { grid-column: 1 / span 2; }
.lx-whycard__icon { width: 30px; height: 30px; color: var(--lx-olive-dark); }
.lx-whycard__icon svg { width: 100%; height: 100%; }
.lx-whycard h4 { font-family: var(--lx-font); font-weight: 700; font-size: 1.1rem; margin: 0; color: var(--lx-ink); }

.lx-ptrange__head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.lx-ptlink { display: inline-flex; align-items: center; gap: 8px; color: var(--lx-olive-dark);
  font-weight: 700; }
.lx-ptlink svg { width: 18px; height: 18px; transition: transform .3s var(--lx-ease); }
.lx-ptlink:hover svg { transform: translateX(4px); }
.lx-ptcatgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.lx-ptcat { background: var(--lx-bg); border: 1px solid transparent; border-radius: 28px;
  padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease), border-color .35s; }
.lx-ptcat:hover { transform: translateY(-6px); box-shadow: var(--lx-shadow-lg); border-color: var(--lx-olive-pale); }
.lx-ptcat__icon { width: 40px; height: 40px; color: var(--lx-olive-dark); }
.lx-ptcat__icon svg { width: 100%; height: 100%; }
.lx-ptcat span { font-weight: 700; color: var(--lx-ink); }

.lx-ptbenefits { position: relative; overflow: hidden; background: #e8e8e8; }
.lx-ptbenefits__x { position: absolute; top: -181px; left: -181px; width: 256px; height: 256px;
  transform: rotate(45deg); border: 32px solid rgba(255,255,255,.5); pointer-events: none; }
.lx-ptbenefits .lx-container { position: relative; z-index: 2; }
.lx-ptbenefits__head { text-align: center; margin-bottom: 64px; }
.lx-ptbenefits__head h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin: 0 0 18px; }
.lx-ptbenefits__head p { color: var(--lx-text-muted); font-size: 20px; line-height: 1.4; margin: 0 auto; max-width: 530px; }
.lx-benerow1 { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-bottom: 16px; }
.lx-benerow2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lx-benecard { background: var(--lx-surface); border-radius: 28px; padding: 48px;
  transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease); }
.lx-benecard:hover { transform: translateY(-5px); box-shadow: var(--lx-shadow-lg); }
.lx-benecard h3 { font-family: var(--lx-font); font-weight: 700; font-size: 1.85rem; margin: 0 0 16px; color: var(--lx-ink); }
.lx-benecard--lg h3 { font-size: 1.85rem; }
.lx-benecard p { margin: 0; color: var(--lx-text-muted); font-size: 1.05rem; line-height: 1.6; }
.lx-benecard--olive { background: linear-gradient(134deg, #516238 0%, #697b4e 100%); }
.lx-benecard--olive h3 { color: #fff; }
.lx-benecard--olive p { color: rgba(250,255,233,.85); }
.lx-benecard--sm h3 { font-size: 1.4rem; }
.lx-benecard--sm p { font-size: .98rem; }

.lx-ptsteps__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.lx-ptsteps__grid .lx-step { position: relative; z-index: 1; background: #f9f9f8; border: 1px solid var(--lx-line); border-radius: 20px;
  padding: 40px 24px 34px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform .28s var(--lx-ease), box-shadow .28s var(--lx-ease); }
.lx-ptsteps__grid .lx-step:hover { transform: translateY(-4px); box-shadow: var(--lx-shadow-lg); }
.lx-ptsteps__grid .lx-step:not(:last-child)::after { content: ""; position: absolute; top: 118px; inset-inline-end: -28px; width: 28px; height: 2px;
  background: #e2e2e2; z-index: 0; }
.lx-step__num { width: 48px; height: 48px; border-radius: 50%; background: var(--lx-olive-dark);
  color: #fff; font-weight: 700; display: grid; place-items: center; margin-bottom: 12px; }
.lx-ptsteps__grid .lx-step h4 { font-family: var(--lx-font); font-weight: 700; font-size: 1.1rem; margin: 6px 0 0; color: var(--lx-ink); }
.lx-ptsteps__grid .lx-step p { margin: 0; color: var(--lx-text-muted); font-size: .9rem; line-height: 1.5; }

.lx-ptform { background: var(--lx-muted); }
.lx-ptform__card { background: var(--lx-surface); border-radius: 32px; max-width: 896px;
  margin-inline: auto; padding: clamp(32px, 5vw, 64px); box-shadow: 0 25px 50px -12px rgba(81,98,56,.12); }
.lx-ptform__head { text-align: center; margin-bottom: 48px; }
.lx-ptform__head h2 { font-size: 2.25rem; margin: 0 0 10px; }
.lx-ptform__head p { color: var(--lx-text-muted); margin: 0; }
.lx-ptform__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.lx-field { display: flex; flex-direction: column; gap: 8px; }
.lx-field--full { grid-column: 1 / span 2; }
.lx-field label { font-size: .875rem; font-weight: 700; color: var(--lx-text-muted); }
.lx-field input, .lx-field select, .lx-field textarea { font-family: var(--lx-font); font-size: 1rem;
  color: var(--lx-ink); background: transparent; border: none; border-bottom: 2px solid #c5c8bb; width: 100%;
  padding: 12px 4px; outline: none; transition: border-color .25s var(--lx-ease); }
.lx-field input::placeholder, .lx-field textarea::placeholder { color: #9a9a94; }
.lx-field input:focus, .lx-field select:focus, .lx-field textarea:focus { border-color: var(--lx-olive); }
.lx-field textarea { resize: vertical; min-height: 96px; }
.lx-ptform__submit { grid-column: 1 / span 2; }
.lx-ptform__submit .lx-btn { width: 100%; justify-content: center; padding: 20px;
  font-size: 1.1rem; border-radius: 24px;
  background: linear-gradient(135deg, #516238 0%, #697b4e 100%);
  box-shadow: 0 20px 25px -5px rgba(81,98,56,.2); }

@media (max-width: 1000px) {
  .lx-whogrid, .lx-ptcatgrid { grid-template-columns: repeat(2, 1fr); }
  .lx-ptwhy .lx-container { grid-template-columns: 1fr; }
  .lx-benerow1, .lx-benerow2 { grid-template-columns: 1fr; }
  .lx-ptsteps__grid { grid-template-columns: repeat(2, 1fr); }
  .lx-ptsteps__grid::before { display: none; }
}
@media (max-width: 640px) {
  .lx-whogrid, .lx-ptcatgrid, .lx-whygrid, .lx-ptsteps__grid { grid-template-columns: 1fr; }
  .lx-whycard--wide { grid-column: auto; }
  .lx-ptform__grid { grid-template-columns: 1fr; }
  .lx-field--full, .lx-ptform__submit, .lx-prefill { grid-column: auto; }
}

.lx-pxhero { position: relative; overflow: hidden; text-align: center; margin-top: -84px; padding: calc(84px + clamp(36px, 5vw, 64px)) 0 clamp(36px, 5vw, 64px);
  background: #eef0e6;
  aspect-ratio: 16 / 9; min-height: 500px; display: flex; align-items: center; }
.lx-pxhero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.lx-pxhero__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; pointer-events: none; }

.lx-pxhero__pic { display: contents; }
.lx-pxhero__pictitle { display: none; }
.lx-pxhero__inner { position: relative; z-index: 2; max-width: 700px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.lx-pxhero h1 { font-size: clamp(1.9rem, 4.22vw, 54px); letter-spacing: -0.04em; margin: 0; line-height: 1.12; max-width: 100%; overflow-wrap: break-word; }
.lx-pxhero h1 .accent { color: var(--lx-olive); }
.lx-pxhero__sub { color: var(--lx-text-muted); font-size: 17.6px; max-width: 508px; margin: 0; line-height: 1.48; }
.lx-pxhero__btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.lx-pxhero__btns .lx-btn { border-radius: 12px; padding: 16px 24px; font-size: 16px; }
.lx-pxhero__btns .lx-btn--ghost { background: transparent; border: 1px solid #C5C8BB; color: var(--lx-ink); }
.lx-pxhero__btns .lx-btn--ghost:hover { background: rgba(255,255,255,.5); border-color: #b3b7a8; }
.lx-pxhero__pills { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.lx-pxpill { display: inline-flex; align-items: center; gap: 8px; color: var(--lx-ink-soft); font-weight: 600; font-size: .95rem; }
.lx-pxpill svg { width: 18px; height: 18px; color: var(--lx-olive); }

.lx-pxlayout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
.lx-filters { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; background: var(--lx-surface); border: 1px solid var(--lx-line);
  border-radius: 20px; padding: 26px; box-shadow: var(--lx-shadow); }
.lx-fgroup { border-bottom: 1px solid var(--lx-line); }
.lx-fgroup:last-of-type { border-bottom: none; }
.lx-fgroup__sum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 18px 0; font-family: var(--lx-display); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lx-ink); }
.lx-fgroup:first-child .lx-fgroup__sum { padding-top: 0; }
.lx-fgroup__sum::-webkit-details-marker { display: none; }
.lx-fchev { color: var(--lx-text-muted); transition: transform .25s var(--lx-ease); flex: none; }
.lx-fgroup[open] > .lx-fgroup__sum .lx-fchev { transform: rotate(180deg); }
.lx-fgroup__body { padding-bottom: 18px; }
.lx-fsearch { width: 100%; border: 1px solid var(--lx-line); border-radius: 10px; padding: 10px 12px;
  font-family: var(--lx-font); font-size: .92rem; outline: none; transition: border-color .25s; background: var(--lx-bg); }
.lx-fsearch:focus { border-color: var(--lx-olive); }
.lx-fcatlist { display: flex; flex-direction: column; gap: 4px; }
.lx-fcat { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: none; border: none; text-align: start; cursor: pointer; padding: 8px 10px; border-radius: 8px;
  font-family: var(--lx-font); font-size: .92rem; color: var(--lx-ink-soft); transition: background .2s, color .2s; }
.lx-fcat:hover { background: var(--lx-muted); }
.lx-fcat.active { background: var(--lx-olive-pale); color: var(--lx-olive-deep); font-weight: 700; }
.lx-fcat span.count { color: var(--lx-text-muted); font-size: .82rem; }
.lx-fcat.active span.count { color: var(--lx-olive-deep); }
.lx-wgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lx-wchip { border: 1px solid var(--lx-line); background: var(--lx-surface); border-radius: 999px; padding: 7px 6px;
  font-size: .8rem; font-weight: 600; color: var(--lx-ink-soft); cursor: pointer; font-family: var(--lx-font); text-align: center;
  transition: all .2s var(--lx-ease); }
.lx-wchip:hover { border-color: var(--lx-olive); color: var(--lx-olive-dark); }
.lx-wchip.active { background: #eef1e6; border-color: var(--lx-olive); color: var(--lx-olive-dark); font-weight: 700; }
.lx-fopts { display: flex; flex-direction: column; gap: 10px; }
.lx-fopt { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--lx-ink-soft); cursor: pointer; }
.lx-fopt input { accent-color: var(--lx-olive); width: 16px; height: 16px; }
.lx-filters__actions { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; }
.lx-filters__actions .lx-btn { width: 100%; justify-content: center; }

.lx-presults__head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 24px; }
.lx-presults__head .count { color: var(--lx-ink); font-weight: 700; }
.lx-presults__head .count small { color: var(--lx-text-muted); font-weight: 400; }
.lx-presults__sort { display: inline-flex; align-items: center; gap: 8px; color: var(--lx-text-muted); font-size: .9rem; }
.lx-presults__sort select { border: 1px solid var(--lx-line); border-radius: 8px; padding: 7px 10px;
  font-family: var(--lx-font); font-size: .9rem; color: var(--lx-ink); background: var(--lx-surface); outline: none; }
.lx-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lx-pcard { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease); }
.lx-pcard:hover { transform: translateY(-6px); box-shadow: var(--lx-shadow-lg); }
.lx-pcard__media { display: block; aspect-ratio: 4/3; background: var(--lx-bg); padding: 24px; }
.lx-pcard__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--lx-ease); }
.lx-pcard:hover .lx-pcard__media img { transform: scale(1.05); }
.lx-pcard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lx-pcard__cat { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--lx-olive-dark); padding: 5px 11px; border-radius: 7px; align-self: flex-start; }
.lx-pcard__name { font-family: var(--lx-display); font-weight: 700; font-size: 1.02rem; color: var(--lx-ink);
  line-height: 1.3; }
.lx-pcard__desc { color: var(--lx-text-muted); font-size: .86rem; line-height: 1.5; margin: 0; }
.lx-pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.lx-ptag { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600;
  color: var(--lx-ink-soft); background: var(--lx-muted); border-radius: 999px; padding: 5px 11px; }
.lx-ptag svg { flex: none; color: var(--lx-olive-dark); }
.lx-pcard__more { display: inline-flex; align-items: center; gap: 6px; color: var(--lx-olive-dark);
  font-weight: 700; font-size: .9rem; margin-top: 4px; }
.lx-pcard__more svg { width: 15px; height: 15px; transition: transform .3s var(--lx-ease); }
.lx-pcard:hover .lx-pcard__more svg { transform: translateX(4px); }

.lx-ppager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.lx-ppager a, .lx-ppager span.num { min-width: 40px; height: 40px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 12px; border-radius: 10px; border: 1px solid var(--lx-line);
  color: var(--lx-ink-soft); font-weight: 600; font-size: .9rem; background: var(--lx-surface); transition: all .2s; }
.lx-ppager a:hover { border-color: var(--lx-olive); color: var(--lx-olive-dark); }
.lx-ppager a.current { background: var(--lx-olive); border-color: var(--lx-olive); color: #fff; }
.lx-ppager a.disabled { opacity: .4; pointer-events: none; }
.lx-ppager .pageinfo { color: var(--lx-text-muted); font-size: .85rem; width: 100%; text-align: center; margin-bottom: 6px; }

.lx-perf { background: var(--lx-surface); }
.lx-perfgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.lx-perfitem { text-align: start; }
.lx-perfitem__icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: #d6eab5; color: var(--lx-olive-deep); margin-bottom: 16px; }
.lx-perfitem h3 { font-size: 1.1rem; margin: 0 0 8px; }
.lx-perfitem p { margin: 0; color: var(--lx-text-muted); font-size: .92rem; line-height: 1.55; }

/* ===== Stock CTA + Contact: matched to Products.svg (1280 canvas) =====
   Stock CTA: comp h2 ink 487.96 x 120.06 over two lines -> Manrope 800 62px / lh 1.19; its own
   560px measure keeps "LIXIL" off line 1 (which 680px would not). Sub is 19.6px (line-1 ink
   664.2 = 33.9097 x 19.59) in #D6EAB5, and the button is 234.64 x 60 fully rounded. */
.lx-stockcta { position: relative; overflow: hidden; text-align: center; color: #fff;
  background: linear-gradient(136.6deg, #516238 0%, #697B4E 100%); }
.lx-stockcta__inner { position: relative; z-index: 2; max-width: 680px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: 20px; }
.lx-stockcta h2 { color: #fff; margin: 0; font-size: clamp(1.9rem, 4.84vw, 62px); line-height: 1.19;
  max-width: 560px; margin-inline: auto; }
.lx-stockcta p { color: #D6EAB5; margin: 0; font-size: 19.6px; line-height: 1.45; }
.lx-stockcta .lx-btn { background: #fff; color: var(--lx-olive-dark);
  padding: 14px 40px; border-radius: 30px; font-size: 18.5px; }
.lx-stockcta .lx-btn:hover { background: #f0f0e8; }
/* Comp leaves ~46px between the copy and the button, not the 20px stack gap. */
.lx-stockcta__inner > .lx-btn { margin-top: 26px; }

/* Contact: comp columns are 453.33 (intro, x48-501.33) and 634.67 (card, x597.328-1232) with a
   96px gutter. The intro measure is what gives the comp's rows - h2 on two lines, body on four,
   lead on two - so it is pinned in px rather than fr. */
.lx-contact { background: var(--lx-bg); }
.lx-contact .lx-container { display: grid; grid-template-columns: minmax(0, 453px) minmax(0, 635px);
  gap: 96px; align-items: start; justify-content: center; }
.lx-contact__intro .lx-eyebrow { font-size: 14px; }
.lx-contact__intro h2 { font-size: clamp(2rem, 3.75vw, 48px); line-height: 1.21; margin: 12px 0 20px; }
.lx-contact__intro p { color: var(--lx-text-muted); font-size: 18px; line-height: 1.63; }
.lx-contact__intro .lead { color: var(--lx-olive-dark); font-weight: 600; font-size: 19.5px; line-height: 1.46; }
/* Comp rules a hairline above the checklist (mask box x48-501.33, y4420.25) and fills the
   check discs solid olive with a white tick; the site had them as outlines. */
.lx-checklist { list-style: none; padding: 20px 0 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 20px;
  border-top: 1px solid rgba(20,22,15,.10); }
.lx-checklist li { display: flex; align-items: center; gap: 13px; color: var(--lx-ink); font-weight: 500; }
.lx-checklist li svg { width: 20px; height: 20px; color: var(--lx-olive-dark); flex: 0 0 auto; }
.lx-checklist li svg circle { fill: currentColor; stroke: none; }
.lx-checklist li svg path { stroke: #fff; stroke-width: 2.6; }
.lx-contact__card { background: rgba(255,255,255,.95); border-radius: 36px; padding: clamp(28px,3.9vw,49.5px);
  border: 1px solid rgba(197,200,187,.15); box-shadow: var(--lx-shadow-lg); }
.lx-contact__card h3 { font-size: 24px; margin: 0 0 24px; }
.lx-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 33px; }
.lx-contact__grid .lx-field { gap: 6px; }
.lx-contact__grid .lx-field label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.lx-contact__grid .lx-field label .lx-field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: #75786D; }
.lx-contact__grid .lx-field input { height: 38px; padding: 8px 12px; border: 1px solid #EAEAEA; border-radius: 7.5px; }
.lx-contact__grid .lx-field--full { grid-column: 1 / span 2; }
.lx-contact__grid .lx-btn { grid-column: 1 / span 2; width: 100%; justify-content: center;
  height: 68px; border-radius: 34px; font-size: 17px; background: linear-gradient(90deg, #516238 0%, #697B4E 100%); border-color: transparent; }
.lx-contact__note { grid-column: 1 / span 2; color: var(--lx-text-muted); font-size: 14px; line-height: 1.43; text-align: center; margin: 0; }

.lx-pd { padding-top: clamp(28px, 4vw, 44px); }
.lx-breadcrumb { color: var(--lx-text-muted); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 28px; }
.lx-breadcrumb a { color: inherit; }
.lx-breadcrumb a:hover { color: var(--lx-olive-dark); }
.lx-breadcrumb__sep { color: var(--lx-text-muted); margin: 0 6px; }
.lx-pdtop { display: grid; grid-template-columns: minmax(0, 584px) minmax(0, 588px); gap: 44px;
  align-items: start; justify-content: center; }
/* The comp's gallery photo panel is 576x654 (portrait). The column used to carry a fixed
   584/643 aspect, which squeezed the panel to 1.128 - landscape - and squashed the shot.
   The panel now owns its aspect and the column grows to fit it plus any thumbnails. */
.lx-pdgallery { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px;
  background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: 2px;
  padding: 0 0 22px; }
.lx-pdgallery__main { background: #fff; border: 0; aspect-ratio: 576 / 654; flex: 0 0 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center; padding: 0;
  overflow: hidden; border-radius: 2px 2px 0 0; }
/* Detail comp: the gallery panel is a 576x654 white rect, square corners, with the photo
   drawn over it. Ours was landscape (1.128) against the comp's portrait 0.881. */
.lx-pdgallery__main picture { display: block; width: 100%; height: 100%; }
.lx-pdgallery__main img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lx-pdthumbs { display: flex; gap: clamp(6px, 2.45%, 12px); flex-wrap: nowrap;
  padding-inline: clamp(10px, 8.05%, 47px); min-width: 0; }
.lx-pdthumb { width: 87px; height: auto; aspect-ratio: 1; flex: 0 1 87px; min-width: 0;
  border-radius: 8px; border: 3px solid transparent;
  background: #F3F4F6; padding: 8px; cursor: pointer; transition: border-color .25s, transform .25s; }
.lx-pdthumb img { width: 100%; height: 100%; object-fit: contain; }
.lx-pdthumb:hover { transform: translateY(-2px); border-color: var(--lx-olive-pale); }
.lx-pdthumb.active { border-color: var(--lx-olive-dark); }
.lx-pdinfo__eyebrow { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #5f5e5e; background: #e8e8e8; border-radius: 999px; padding: 6px 14px; }
.lx-pdinfo h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.12; margin: 16px 0 16px; }
.lx-pdinfo__desc { color: var(--lx-ink-soft); font-size: 1.05rem; line-height: 1.65; margin: 0 0 24px; }
.lx-pdchips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.lx-pdchip { font-size: .82rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #5f5e5e; background: #F3F4F6;
  border-radius: 11.5px; min-height: 23px; display: inline-flex; align-items: center; padding: 4px 16px; }
.lx-pdstats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; padding: 24px 0; border-top: 1px solid var(--lx-line); margin: 24px 0 26px; }
.lx-pdstat__label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lx-text-muted); margin-bottom: 6px; }
.lx-pdstat__value { font-weight: 700; font-size: 1.25rem; color: var(--lx-ink); }
/* Detail page loads its content after "Loading", so scroll-reveal can't catch it — keep it visible. */
.lx-pd .reveal, .lx-pdfeatures .reveal, .lx-pdspecs .reveal, .lx-pdinquiry .reveal, .lx-pdcompat .reveal, .lx-pdcontrol .reveal { opacity: 1 !important; transform: none !important; }
.lx-pdbtns { display: flex; gap: 16px; flex-wrap: wrap; }
.lx-pdbtns .lx-btn { border-radius: 12px; height: 56px; padding: 0 24px; font-size: 16px; }
.lx-pdbtns .lx-btn--primary { background: #516238; border-color: #516238; }
.lx-pdbtns .lx-btn--ghost { background: #E8E8E8; border-color: #E8E8E8; color: var(--lx-ink); }
.lx-pdbtns .lx-btn--ghost:hover { background: #dedede; border-color: #dedede; }

.lx-pdfeatures { background: #f3f3f3; }
.lx-pdfeatures .lx-qhead { text-align: start; max-width: none; margin-left: 0; margin-right: 0; }
.lx-pdfeatures .lx-qhead .lx-eyebrow { margin-inline-start: 0; }
.lx-pdfeatgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lx-pdfeat { background: #fff; border: none; border-radius: 16px; padding: 32px 30px;
  box-shadow: 0 2px 8px rgba(20,20,20,.05);
  transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease); }
.lx-pdfeat:hover { transform: translateY(-5px); box-shadow: var(--lx-shadow-lg); }
.lx-pdfeatures .lx-eyebrow { background: #4D5E3F; color: #fff; border-radius: 11px;
  height: 22px; display: inline-flex; align-items: center; padding: 0 12px;
  font-size: 10px; letter-spacing: .1em; line-height: 1; }
.lx-pdfeat__icon { width: 30px; height: 30px; color: var(--lx-olive); margin-bottom: 20px; }
/* Comp key-feature glyphs measure 20.7-27.1px inside their 30px slot, not the full 30.
   Ours were tracing out to 22.5-32.5, so every one read a size too large. */
.lx-pdfeat__icon svg { width: 86%; height: 86%; display: block; }
.lx-pdfeat h3 { font-size: 1.1rem; margin: 0 0 10px; }
.lx-pdfeat p { margin: 0; color: var(--lx-text-muted); font-size: .92rem; line-height: 1.55; }

.lx-spectable { border: none; border-radius: 0; overflow: visible; max-width: 940px; margin-inline: auto; }
.lx-specrow { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.lx-specrow:nth-child(odd) { background: transparent; }
.lx-spectable { max-width: 896px; margin-inline: auto; }
.lx-pdspecs { padding-block: 64px 65px; }
.lx-pdspecs .lx-pthead { margin-bottom: 49px !important; }
.lx-speccell { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin: 0; padding: 22px 0;
  border-bottom: 1px solid var(--lx-line); align-items: start; }
.lx-specrow { column-gap: 24px; }
.lx-specrow > .lx-speccell:only-child { grid-column: 1 / -1; }
.lx-speccell + .lx-speccell { border-left: none; }
.lx-speccell dt { color: var(--lx-text-muted); font-weight: 500; font-size: 16px; margin: 0; }
.lx-speccell dd { color: var(--lx-ink); font-weight: 700; font-size: 16px; margin: 0; text-align: right; }

.lx-pdcompat { background: #ededeb; text-align: center; }
.lx-pdcompat__eyebrow { font-size: .95rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
  color: #5f6357; margin-bottom: 40px; }
.lx-pdcompat__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 72px; }
.lx-pdcompat__item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #7c8074; }
.lx-pdcompat__item svg { width: 34px; height: 34px; color: #8b8f82; stroke-width: 1.5; }
.lx-pdcompat__item span { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b6f64; }

.lx-pdcontrol { color: #fff; background: linear-gradient(140.16deg, #516238 0%, #697B4E 100%);
  padding-block: 63.5px 64px; }
.lx-pdcontrol__head { margin-bottom: 0; }
.lx-pdcontrol__head h2 { color: #fff; margin: 0 0 16px; }
.lx-pdcontrol__head p { color: rgba(255,255,255,.88); margin: 0; max-width: none;
  font-size: 16px; line-height: 1.4; }
.lx-pdcontrol__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 64.6px; }
.lx-pdctrlcard { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px; padding: 32px; min-height: 170px; }
.lx-pdctrlcard__icon { width: 18px; height: 18px; color: #516238; margin-bottom: 0; }
.lx-pdctrlcard__icon svg { width: 18px; height: 18px; stroke-width: 2; }
.lx-pdctrlcard h3 { color: #fff; font-size: 16px; font-weight: 800; line-height: 1.25;
  letter-spacing: 0; margin: 26.8px 0 10.4px; }
.lx-pdctrlcard p { color: rgba(255,255,255,.85); font-size: 12px; line-height: 1.32; margin: 0; }
.lx-pdctrlcard h3, .lx-pdctrlcard p { max-width: 222px; }

/* Recommended Solutions — 4-across bestseller cards */
.lx-relgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1100px) { .lx-relgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .lx-relgrid { grid-template-columns: 1fr; } }

/* Detail-page heading scale — matched to design measurements */
.lx-pdfeatures .lx-qhead h2,
.lx-pdspecs .lx-pthead h2,
.lx-pdrelated .lx-pthead h2 { font-size: 30px; font-weight: 800; letter-spacing: 0; line-height: 1.15; }
.lx-pdcontrol__head h2 { font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: 0; }
.lx-pdfeat h3 { font-size: 20px; font-weight: 700; letter-spacing: 0; }
.lx-pdctrlcard h3 { font-size: 16px; }

.lx-pdinquiry { background: var(--lx-bg); }
.lx-pdinquiry__card { position: relative; overflow: hidden; background: var(--lx-surface); border-radius: 28px; max-width: 900px;
  margin-inline: auto; padding: clamp(30px, 4vw, 56px); box-shadow: var(--lx-shadow-lg); }
.lx-pdinquiry__q { position: absolute; top: 28px; inset-inline-end: 28px; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--lx-line); display: grid; place-items: center; color: var(--lx-text-muted); }
.lx-pdinquiry__head { text-align: center; margin-bottom: 40px; }
.lx-pdinquiry__head h2 { font-size: 2rem; margin: 0 0 10px; }
.lx-pdinquiry__head p { color: var(--lx-text-muted); margin: 0; }
.lx-prefill { grid-column: 1 / span 2; }
.lx-prefill input { background: var(--lx-muted); border: 1px solid var(--lx-line); border-radius: 10px; }

/* Product-detail B2B inquiry — boxed form matching the design */
.lx-pdinquiry__card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px; background: linear-gradient(135deg, #516238 0%, #8a9a5b 100%); }
.lx-pdinquiry__q { display: none; }
.lx-pdinquiry .lx-field label { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; color: var(--lx-text-muted); }
.lx-pdinquiry .lx-field input,
.lx-pdinquiry .lx-field textarea { background: #fff; border: 1px solid var(--lx-line); border-radius: 10px; padding: 13px 15px; }
.lx-pdinquiry .lx-field input:focus,
.lx-pdinquiry .lx-field textarea:focus { border-color: var(--lx-olive); box-shadow: 0 0 0 3px rgba(123,138,63,.12); }
.lx-pdinquiry .lx-prefill input { background: var(--lx-muted); font-weight: 700; color: var(--lx-ink); }
.lx-pdinquiry .lx-ptform__submit .lx-btn { border-radius: 14px; }

@media (max-width: 1000px) {
  .lx-pxlayout { grid-template-columns: 1fr; }
  .lx-filters { position: static; }
  .lx-pgrid { grid-template-columns: repeat(2, 1fr); }
  .lx-perfgrid { grid-template-columns: repeat(2, 1fr); }
  .lx-pdtop { grid-template-columns: 1fr; gap: 32px; }
  .lx-pdgallery { position: static; max-width: 440px; margin-inline: auto; width: 100%; }
  .lx-pdfeatgrid { grid-template-columns: repeat(2, 1fr); }
  .lx-pdcontrol__grid { grid-template-columns: repeat(2, 1fr); }
  .lx-contact .lx-container { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .lx-pgrid, .lx-perfgrid, .lx-pdfeatgrid, .lx-pdcontrol__grid { grid-template-columns: 1fr; }
  .lx-specrow { grid-template-columns: 1fr; }
  .lx-speccell + .lx-speccell { border-left: none; border-top: 1px solid var(--lx-line); }
  .lx-contact__grid { grid-template-columns: 1fr; }
  .lx-contact__grid .lx-field--full, .lx-contact__grid .lx-btn, .lx-contact__note { grid-column: auto; }
}

.lx-ptsteps { background: var(--lx-surface); }

.lx-ptrange { background: var(--lx-surface); }
.lx-ptcat { background: var(--lx-muted); }

.lx-btn { border-radius: 16px; }
.lx-ptag { background: rgba(112,130,85,.12); color: var(--lx-olive-deep); }
.lx-pcard__more { color: var(--lx-olive); }

.lx-pxhero__prod { position: absolute; z-index: 1; height: auto; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 16px 26px rgba(20,22,15,.16)); }
.lx-pxhero__prod--charger { left: 11%; top: 32%; width: min(19%, 240px); }
.lx-pxhero__prod--earphones { left: 13%; top: 76%; width: min(26%, 300px); }
.lx-pxhero__prod--car { left: 87%; top: 33%; width: min(13%, 185px); }
.lx-pxhero__prod--power { left: 78%; top: 76%; width: min(22%, 275px); }
@media (max-width: 900px) { .lx-pxhero__prod { display: none; } }

.lx-pdspecs, .lx-pdinquiry { scroll-margin-top: 100px; }

.lx-pxhero__pills { gap: 12px; }
.lx-pxpill { padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,.9); border: 1px solid rgba(20,22,15,.06); box-shadow: 0 2px 10px rgba(20,22,15,.07); color: var(--lx-ink); font-size: .92rem; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lx-pxpill svg { width: 16px; height: 16px; }
.lx-pxpill svg.lx-ic-diamond { width: 13.33px; height: 12px; }
.lx-pxhero__btns .lx-btn svg.lx-ic-arrow { width: 9.33px; height: 9.33px; margin-inline-start: 4px; }

html, body { overflow-x: clip; max-width: 100%; }
.lxnav__menuacts { display: none; }
.lxnav__burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lxnav__burger.open span:nth-child(2) { opacity: 0; }
.lxnav__burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) {
  .lxnav__actions > .lx-lang,
  .lxnav__actions > .lxnav__signin,
  .lxnav__actions > .lx-btn--primary { display: none; }
  .lxnav__actions { margin-inline-start: auto; gap: .4rem; }
  .lxnav__menuacts { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
    border-top: 1px solid var(--lx-line); margin-top: .4rem; padding-top: .9rem; }
  .lxnav__menuacts .lx-lang { display: inline-flex; }
  .lxnav__menuacts .lx-btn { width: 100%; justify-content: center; }
  .lxnav__links.open { gap: 1rem; }
}

@media (max-width: 620px) {
  .lx-footer__grid { grid-template-columns: 1fr; }
  .lx-footer__news { max-width: 100%; }
}
@media (max-width: 760px) {
  .lx-ptform__grid { grid-template-columns: 1fr; }
  .lx-ptform__grid > .lx-field--full, .lx-ptform__submit, .lx-prefill { grid-column: auto; }
}
@media (max-width: 560px) {
  .lx-ptform__card { padding: 28px 20px; border-radius: 24px; }
}
@media (max-width: 640px) {
  .lx-pxhero { aspect-ratio: auto; min-height: 360px; padding-top: calc(80px + 22px); }
  .lx-presults__head { gap: 12px; }
  .lx-presults__sort { flex-wrap: wrap; }
}

.lx-filters-toggle { display: none; }
@media (max-width: 1000px) {
  .lx-filters-toggle { display: inline-flex; width: 100%; justify-content: center; margin-bottom: 18px; }
  .lx-filters { display: none; }
  .lx-filters.open { display: block; margin-bottom: 8px; }
}

.lx-pxhero__prods { display: contents; }
.lx-mobfilter { display: none; }
.lx-catchips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.lx-catchips::-webkit-scrollbar { display: none; }
.lx-catchip { flex: 0 0 auto; border: 1px solid var(--lx-line); background: var(--lx-surface); border-radius: 999px; padding: 8px 16px; font-size: .88rem; font-weight: 600; color: var(--lx-ink-soft); white-space: nowrap; cursor: pointer; font-family: var(--lx-font); transition: all .2s var(--lx-ease); }
.lx-catchip.active { background: var(--lx-olive); border-color: var(--lx-olive); color: #fff; }
.lx-mobsearch { position: relative; margin-bottom: 14px; }
.lx-mobsearch svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--lx-text-muted); pointer-events: none; }
.lx-mobsearch input { width: 100%; border: 1px solid var(--lx-line); border-radius: 12px; padding: 12px 14px 12px 42px; font: inherit; background: #fff; }
.lx-mobsearch input:focus { border-color: var(--lx-olive); outline: none; }
[dir="rtl"] .lx-mobsearch svg { left: auto; right: 14px; }
[dir="rtl"] .lx-mobsearch input { padding: 12px 42px 12px 14px; }
@media (max-width: 1000px) {
  .lx-mobfilter { display: block; margin-bottom: 22px; }
  .lx-mobfilter h3 { font-size: 22px; margin: 0 0 6px; }
  .lx-mobfilter__sub { font-size: 13px; color: var(--lx-text-muted); margin: 0 0 14px; }
  /* Comp orders this block sort-control first, then the result count. */
  .lx-presults__head { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .lx-presults__head .count { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; }
}
@media (max-width: 900px) {
  .lx-pxhero { aspect-ratio: auto; flex-direction: column; min-height: 0; padding-top: calc(80px + 16px); padding-bottom: 26px; }
  .lx-pxhero__pic { display: block; position: relative; order: -1; width: calc(100% - 48px); margin: 0 auto 20px; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(20,22,15,.10); }
  .lx-pxhero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; box-shadow: none; }
  .lx-pxhero__prod { display: block; }
  .lx-pxhero__prod--charger { left: 15%; top: 33%; width: 22%; }
  .lx-pxhero__prod--earphones { left: 17%; top: 74%; width: 30%; }
  .lx-pxhero__prod--car { left: 85%; top: 33%; width: 16%; }
  .lx-pxhero__prod--power { left: 80%; top: 71%; width: 28%; }
  .lx-pxhero__pictitle { display: block; position: absolute; z-index: 3; top: 31.3%; left: 50%; transform: translate(-50%, -50%); width: min(60%, 240px); text-align: center; font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(20px, 7.18vw, 30px); line-height: 1.05; letter-spacing: -0.04em; color: var(--lx-ink); }
  .lx-pxhero__pictitle .accent { color: var(--lx-olive); }
  .lx-pxhero { text-align: start; }
  .lx-pxhero__inner { order: 0; align-items: stretch; max-width: none; }
  .lx-pxhero h1 { font-size: clamp(28px, 8.21vw, 44px); text-align: start; }
  .lx-pxhero__sub { font-size: clamp(14px, 3.59vw, 17.6px); max-width: none; text-align: start; }
  .lx-pxhero__pills { order: 3; flex-wrap: nowrap; gap: 8px; justify-content: flex-start; }
  .lx-pxhero__pills .lx-pxpill { padding: 4px 18px; font-size: 13px; gap: 8px; white-space: nowrap; }
  .lx-pxhero__pills .lx-pxpill svg { width: 10px; height: 10px; }
  .lx-pxhero__pills .lx-pxpill svg.lx-ic-diamond { width: 11.1px; height: 10px; }
  .lx-pxhero__btns { order: 4; flex-direction: column; width: 100%; }
  .lx-pxhero__btns .lx-btn { padding: 11px 24px; }
  .lx-pxhero__btns .lx-btn svg.lx-ic-arrow { display: none; }
  .lx-pxhero__btns .lx-btn { width: 100%; }
}

@media (max-width: 620px) {
  .hx__cta { flex-direction: column; align-items: stretch; gap: .7rem; }
  .hx__cta .lx-btn { width: 100%; }
  .hx__pills { gap: .45rem; margin-top: 1.6rem; }
  .hx__pill { background: transparent; border: 0; box-shadow: none; padding: .3rem 0; font-size: .95rem; backdrop-filter: none; }
  .hx__pill .hx__pill-ic { width: 28px; height: 28px; }
  .lx-ccard { min-height: 150px; padding: 20px; align-items: flex-start; }
  .lx-ccard__body { max-width: 58%; }
  .lx-ccard__body h3 { font-size: 18px; }
  .lx-ccard__body p { font-size: 13.5px; max-width: 100%; }
  .lx-ccard__arrow { width: 38px; height: 38px; margin-top: 16px; }
  .lx-ccard__img { max-width: 42%; max-height: 72%; right: 12px; top: 50%; transform: translateY(-50%); }
}

@media (max-width: 620px) {
  .lx-explore-cta { flex-direction: column; }
  .lx-explore-cta .lx-btn { width: 100%; }
}

/* Honeypot. It used to be parked at left:-9999px, which is harmless in LTR because
   browsers do not make leftward overflow scrollable - but in RTL that direction IS
   the scrollable one, so every page with a form grew 9999px of empty scroll and the
   Arabic mobile home opened miles away from the content. Clipped in place instead:
   no offset, so no overflow in either direction. */
.lx-hp { position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; opacity: 0; pointer-events: none; }

.lx-lang, .lxnav .lx-lang { align-items: stretch; }
.lx-lang a, .lxnav .lx-lang a { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
/* Cairo puts 'ع' ink 8.19 above / 5.28 below the baseline at 16.32px, so its ink centre
   lands 4.55px BELOW the pill centre once flexbox has centred the line box - the glyph
   reads as dropped next to EN (whose ink centre is within 0.4px of centre). Measured
   nudge: 4.55/16.32 = 0.279em. */
.lx-lang a.lx-ar { transform: none; font-size: 1.02rem;
  /* Nudge the glyph, NOT the box - translating the <a> took its olive fill with it and
     left a gap at the bottom of the pill. Asymmetric padding moves the centred content
     up by 0.279em while the padding sum (1.1em) keeps the box exactly the same height. */
  padding-top: .271em; padding-bottom: .829em; }

/* RTL home hero: the AR comp keeps the banner unmirrored (mirroring reverses the
   lettering on the product) and instead moves the copy block to the left half of
   the hero, still right-aligned, so it never sits over the product. */
[dir="rtl"] .hx__slide { align-self: flex-end; }
[dir="rtl"] .lx-ccard__img { right: auto; left: 20px; }
[dir="rtl"] .lx-ccard__body p { max-width: 26ch; }
[dir="rtl"] .lx-ccard__arrow svg,
[dir="rtl"] .lx-pcard__more svg,
[dir="rtl"] .lx-ptlink svg,
[dir="rtl"] .lx-pxpill svg { transform: scaleX(-1); }

/* In Arabic every arrow points to the END of its button/link, i.e. leftwards - so both
   the text arrows (wrapped in .lx-arw) and the inline arrow SVGs get mirrored in RTL. */
[dir="rtl"] .lx-arw { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .lx-pxhero__btns .lx-btn > svg,
[dir="rtl"] .lx-pthero__btns .lx-btn > svg,
[dir="rtl"] .lx-pdbtns .lx-btn > svg,
[dir="rtl"] .lx-explore-cta .lx-btn > svg,
[dir="rtl"] .lx-why__cta .lx-btn > svg,
[dir="rtl"] .hx__cta .lx-btn > svg,
[dir="rtl"] .lx-link-arrow > svg { display: inline-block; transform: scaleX(-1); }

/* The hero scrim fades from the left, which is where the AR copy block sits too, so it
   must NOT be mirrored — flipping it washed the product out on the right. */
[dir="rtl"] .hx::after { transform: none; }
/* The AR comps keep the hero button pairs in their LTR visual order: primary on the
   left, secondary to its right. Flex in RTL reverses that, so put it back. */
[dir="rtl"] .hx__cta,
[dir="rtl"] .lx-why__cta,
[dir="rtl"] .lx-pxhero__btns,
[dir="rtl"] .lx-pthero__btns,
[dir="rtl"] .lx-pdbtns,
[dir="rtl"] .lx-pdchips { flex-direction: row-reverse; }
/* the collection CTA and the products-hero pills ARE mirrored in the AR comps, so they
   keep the default RTL order */
/* The AR product-detail comp keeps the gallery on the left and the info column on the
   right, exactly as the EN one does, so the two columns are not mirrored here. */
[dir="rtl"] .lx-pdtop { direction: ltr; }
[dir="rtl"] .lx-pdtop > * { direction: rtl; }
/* same for the two spec columns under the chips */
[dir="rtl"] .lx-pdstats { direction: ltr; }
[dir="rtl"] .lx-pdstats > * { direction: rtl; }

@media (max-width: 640px) {
  .lx-pcard__media { aspect-ratio: auto; height: 240px; padding: 18px; }
  .lx-pcard__media img { height: 100%; object-fit: contain; }
}

.lx-pxlayout, .lx-presults, .lx-pgrid, .lx-pcard { min-width: 0; }
.lx-pgrid > .lx-pcard { min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
  .lx-presults__head { flex-wrap: wrap; }
  .lx-presults__sort { flex-wrap: wrap; min-width: 0; }
  .lx-presults__sort select { flex: 1 1 auto; min-width: 0; }
  .lx-pcard__desc { overflow-wrap: anywhere; }
}

.lx-pdtop, .lx-pdgallery, .lx-pdinfo { min-width: 0; }
.lx-pdinfo h1, .lx-pdinfo__desc, .lx-speccell dd { overflow-wrap: anywhere; }
.lx-pdthumbs { max-width: 100%; }

.lx-textarea { min-height: 96px; resize: vertical; font-family: inherit; }

/* ---- legal pages (privacy / terms): comp lays each clause out as its own card ---- */
.lx-legal.lx-section { background: var(--lx-bg); }
.lx-legal__inner { max-width: 993px; margin-inline: auto; }
.lx-legal__eyebrow { display: block; font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .08em; line-height: 1; text-transform: uppercase;
  color: var(--lx-olive-dark); }
.lx-legal h1 { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 65px;
  letter-spacing: -.045em; line-height: 1.05; color: var(--lx-ink); margin: 22px 0 0; }
.lx-legal__sub { font-family: "Inter", sans-serif; font-size: 19.6px; line-height: 1.5;
  color: var(--lx-text-muted); margin: 14px 0 0 !important; }
.lx-legal__rule { height: 1px; background: #DCDED6; margin: 23px 0 0; }
.lx-legal__lead { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 22px;
  line-height: 1.2; color: var(--lx-ink); margin: 62px 0 0; }
.lx-legal__intro { font-family: "Inter", sans-serif; font-size: 17px; line-height: 1.62;
  color: var(--lx-text-muted); margin: 18px 0 0 !important; }
.lx-legal__card { background: #fff; border: 1px solid #EFF0EC; border-radius: 16px;
  padding: 32px; margin-top: 38px; }
.lx-legal__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.lx-legal__num { flex: none; width: 32px; height: 32px; border-radius: 8px; background: #EFF1EC;
  color: var(--lx-olive-dark); font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: 15px; display: grid; place-items: center; }
.lx-legal__card h3 { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 22px;
  line-height: 1.2; color: var(--lx-ink); margin: 0; }
.lx-legal__card p { font-family: "Inter", sans-serif; font-size: 17px; line-height: 1.62;
  color: var(--lx-text-muted); margin: 0 0 18px; }
.lx-legal__card p:last-child { margin-bottom: 0; }
.lx-legal__li { position: relative; padding-inline-start: 18px; }
.lx-legal__li::before { content: "\2022"; position: absolute; inset-inline-start: 0; }
[dir="rtl"] .lx-legal { text-align: right; }

@media (max-width: 720px) {
  .lx-legal__inner { max-width: none; }
  .lx-legal__eyebrow { font-size: 13px; letter-spacing: .09em; }
  .lx-legal h1 { font-size: 33px; letter-spacing: -.03em; margin: 14px 0 0; }
  .lx-legal__sub { font-size: 15px; line-height: 1.5; margin: 10px 0 0 !important; }
  .lx-legal__rule { margin: 18px 0 0; }
  .lx-legal__lead { font-size: 20px; margin: 40px 0 0; }
  .lx-legal__intro { font-size: 15px; line-height: 1.62; margin: 14px 0 0 !important; }
  .lx-legal__card { padding: 24px 20px; margin-top: 24px; border-radius: 16px; }
  .lx-legal__head { gap: 14px; margin-bottom: 14px; }
  .lx-legal__num { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
  .lx-legal__card h3 { font-size: 18px; }
  .lx-legal__card p { font-size: 15px; line-height: 1.62; margin: 0 0 16px; }
}

.lx-cat-section { background: linear-gradient(180deg, #E2E1DC 0%, #FAFAFA 62%); }


/* ===== Bestseller spec chips (Figma-exact) ===== */
/* Comp wraps the chips inside the card. A repeat(2, max-content) grid sizes its
   columns to the widest chip and overflows a narrow card, clipping the second
   column - flex-wrap gives the same 2+1 rows without ever spilling. */
.lx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; min-width: 0; }
.lx-chips > * { min-width: 0; max-width: 100%; }
.lx-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding-block: 5px; padding-inline: 5px 14px; border-radius: 9999px; background: #e6eadd; font-family: "Inter", sans-serif; font-weight: 600; font-size: 11px; line-height: 1.45; color: var(--lx-olive-dark); white-space: nowrap; max-width: 100%; }
.lx-chip__ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #f0f2ee; box-shadow: 0 1px 2px rgba(0,0,0,.05); display: inline-flex; align-items: center; justify-content: center; color: var(--lx-olive); }
.lx-chip__ic svg { width: 16px; height: 16px; display: block; }
.lx-chip__tx { overflow: visible; line-height: 1.6; }
[dir="rtl"] .lx-chip { direction: rtl; }

/* "Explore the Full Collection" — Figma sets this heading much larger than the base h2.
   Design ink box is 728.1 x 58.5px at the 1280 comp width; Manrope's ascender-to-descender
   ink is 0.90em, so 58.5 / 0.90 = 65px. Targeted via :has(.lx-tabs) so no new class (and
   therefore no rebuild) is needed to reach this one section head. */
.lx-section:has(.lx-tabs) .lx-section__head--center { max-width: 752px; }
.lx-section:has(.lx-tabs) .lx-section__head--center h2 {
  font-size: clamp(2rem, 4.6875vw, 60px); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em;
}
/* Lead is 20.5px in the comp (Inter 300 ink for line 1 measures 744.94px), which is what makes
   it break after "solutions to" into two near-equal lines under the heading. */
.lx-section:has(.lx-tabs) .lx-section__head--center .lx-lead { font-size: 20px; }

.lx-vp-title, .lx-section--muted .lx-section__head--center h2 { white-space: nowrap; }
@media (max-width: 820px) { .lx-vp-title, .lx-section--muted .lx-section__head--center h2 { white-space: normal; } }

/* =====================================================================
   MOBILE — matched to "Mobile Responsive – Home" (393px artboard)
   Values are the comp's own measurements; appended last so they win.
   ===================================================================== */
@media (max-width: 720px) {
  /* hero banner: full-bleed, flush under the header, 393x280 */
  .hx { padding-top: 76px; padding-bottom: 32px; }
  .hx__pic { width: 100%; margin: 0 0 30px; aspect-ratio: 393 / 280;
    border-radius: 0; box-shadow: none; }
  /* The banners are 16:9 with the product sitting on their right-hand side; a centre
     crop into this 393x280 window cuts the product off, so anchor the crop right. */
  .hx__pic .hx__bgimg { object-position: 100% 50%; }
  .hx__product { transform: none; }
  .hx__body { padding-inline: 0; }

  .hx__eyebrow { font-size: 11px; letter-spacing: .99px; line-height: 1; height: 26px;
    padding: 0 12px; border-radius: 13px; margin-bottom: 7.2px; }
  .hx h1 { font-size: 32px; line-height: 37.5px; letter-spacing: -0.03em; margin: 0 0 9.5px; }
  .hx__body p, .hx__lead { font-family: "Inter", sans-serif; font-size: 15px; line-height: 22px; letter-spacing: -0.005em; margin: 0; }

  .hx__cta { flex-direction: column; align-items: stretch; align-self: stretch; width: 100%;
    gap: 12px; margin: 23px 0 0; }
  .hx__cta .lx-btn { width: 100%; justify-content: center; height: 56px; padding: 0 24px;
    font-size: 18px; border-radius: 16px; }

  /* feature rows: 345x56 cards, 32px icon disc, 13.2px label */
  .hx__pills { grid-template-columns: 1fr; gap: 12px; margin: 20px 0 0; }
  .hx__slide { margin-bottom: 0; min-height: 0 !important; height: auto; display: block !important; }
  .hx__dots { display: none; }   /* comp has no carousel dots on mobile */
  .hx__body { padding-bottom: 0; }
  .hx__pill { background: #fff; border: 1px solid rgba(20,22,15,.07); box-shadow: none;
    backdrop-filter: none; min-height: 56px; padding: 0 12px; gap: 8px;
    border-radius: 12px; font-size: 13.2px; font-weight: 600; color: var(--lx-ink); }
  .hx__pill .hx__pill-ic { width: 32px; height: 32px; }
}

/* --- Mobile Home: category cards (comp: 345x180 r24, art bleeds past the card) --- */
@media (max-width: 720px) {
  .lx-cat5 { grid-template-columns: 1fr; gap: 16px; }
  .lx-cat5 > * { grid-column: span 1 !important; }
  /* the comp clips the category art at the card edge - the cable, power bank and
     earphone shots run off the side/bottom and are cut by the card's rounded box */
  .lx-ccard { display: block; position: relative; height: 180px; min-height: 180px;
    padding: 0; border: 0; border-radius: 24px; box-shadow: none; overflow: hidden; }
  .lx-ccard__body { max-width: none; position: static; display: block; padding: 24px 0 0 20px; }
  .lx-ccard__body h3 { font-size: 18px; font-weight: 700; line-height: 1.1; margin: 0 0 11px; }
  .lx-ccard__body p { font-size: 13px; line-height: 1.31; margin: 0; max-width: 190px; }
  .lx-ccard__arrow { position: absolute; left: 20px; bottom: 20px; width: 35px; height: 35px;
    margin: 0; border-color: #75786D; }
  /* Comp: the glyph inside the 36px ring reads 14px across; the icon's own ink is half
     its box, so the box has to be 28px. */
  .lx-ccard__arrow svg { width: 28px; height: 28px; stroke-width: 1.7; }

  .lx-ccard__img[src*="cat-"] { position: absolute; left: auto; max-width: none; max-height: none;
    object-fit: contain; transform-origin: center; }
  /* Our category shots are tight crops with no transparent padding, so each box is sized
     to the comp's product ink, keeping the art clear of the body copy on its left. */
  .lx-ccard__img[src*="cat-chargers-"]    { right: 29px;   top: 68px;   width: 110.5px; height: 74px;   transform: none; }
  /* These two are replayed straight out of the mobile comp - the cable is rotated
     and the power bank sits at 28.8deg there, both bleeding off the card edge, so
     the crop and the rotation are baked into -m.png rather than approximated with
     a transform. Geometry below is the comp's own ink box. */
  .lx-ccard__img[src*="cat-cables-"]      { content: url("/images/design/cat-cables-m.png");
    right: 16.2px; top: 50px;  width: 117.8px; height: 128px;   transform: none; }
  .lx-ccard__img[src*="cat-power-banks-"] { content: url("/images/design/cat-power-banks-m.png");
    right: 33.8px; top: 20px;  width: 104.2px; height: 152.2px; transform: none; }
  .lx-ccard__img[src*="cat-earphones-"]   { right: 31.5px; top: 65.5px; width: 81.5px;  height: 109.5px; transform: none; }
  .lx-ccard__img[src*="cat-car-charges-"] { content: url("/images/design/cat-car-charges-m.png");
    right: 35.5px; top: 37px;  width: 77.3px;  height: 102.8px; transform: none; }
}

/* --- Mobile Home: "Built for Performance" advantage cards (comp 345x184 r16) --- */
@media (max-width: 720px) {
  .lx-section--muted .lx-section__head--center h2 { font-size: 26px; font-weight: 800;
    line-height: 1.31; letter-spacing: 0; }
  .lx-grid--4 { grid-template-columns: 1fr; gap: 16px; }
  .lx-adv { background: #fff; border: 1px solid rgba(20,22,15,.06); border-radius: 16px;
    padding: 24px; min-height: 184px; }
  .lx-adv .lx-adv__icon { width: 40px; height: 40px; border-radius: 50%;
    background: #708255; color: #fff; display: grid; place-items: center; margin-bottom: 22px; }
  .lx-adv .lx-adv__icon svg { width: 18px; height: 18px; color: #fff; }
  .lx-adv h3 { font-size: 18px; font-weight: 700; line-height: 1.15; margin: 0 0 12px; }
  .lx-adv p { font-size: 13.4px; line-height: 1.45; margin: 0; }
}

/* --- Mobile Home: bestsellers, why-cards, collection tabs, contact fields --- */
@media (max-width: 720px) {
  /* bestseller cards: comp 345 card r16, 20px pad, 305 media r12 */
  .lx-bcard { border-radius: 16px; padding: 20px; }
  .lx-bcard__media { border-radius: 12px; aspect-ratio: 1; }

  /* Why LIXIL cards: comp 345 wide, r12, white */
  .lx-why__grid { display: flex; flex-direction: column; gap: 24px; }
  .lx-wcard { flex: 0 0 auto; width: 100%; border-radius: 12px; padding: 20px; }

  /* collection tab pills: comp 31px tall, r15.5, scrolls horizontally */
  .lx-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lx-tabs::-webkit-scrollbar { display: none; }
  .lx-tab { flex: 0 0 auto; height: 31px; padding: 0 16px; border-radius: 15.5px;
    display: inline-flex; align-items: center; font-size: 13px; }

  /* contact fields: comp 341x42, r7.5 */
  .lx-field input, .lx-field select, .lx-contact__grid input {
    height: 42px; border-radius: 7.5px; }
}

/* ============================================================
   MOBILE — PRODUCTS  (comp: "Mobile Responsive – Products", 390 artboard)
   All values measured from the Figma outlines: font sizes solved from
   ink height + advance width, gaps from ink-to-ink distances.
   ============================================================ */
@media (max-width: 720px) {
  /* The Products mobile comp sets its body copy in Manrope (the Home/About/Quality/
     Partner mobile comps, and every desktop comp, use Inter) - so this is scoped to
     the Products page only. */
  .lx-pxpill, .lx-mobsearch input, .lx-catchip, .lx-presults__sort,
  .lx-pgrid .lx-bcard__cat, .lx-pgrid .lx-bcard__desc, .lx-pgrid .lx-chip,
  .lx-pgrid .lx-link-arrow, .lx-ppager, .lx-perfitem p,
  .lx-contact__grid .lx-field input { font-family: "Manrope", sans-serif; }

  header.lxnav { height: 72px; min-height: 72px; padding: 0; }
  /* Comp: a flat, full-bleed white bar 72px tall — no card, no gutter, and the hero
     image starts immediately underneath it. */
  .lxnav__bar { width: 100%; max-width: none; margin: 0; height: 72px; padding: 0 24px;
    background: #fff; backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; gap: 0; }
  .lxnav__bar .lx-logo--img img { width: 56.5px; height: auto; }
  .lxnav__actions { margin-inline-start: auto; }
  .lxnav__burger { padding: 0; margin-inline-end: 11px; }
  .lxnav__burger span { width: 17.5px; height: 2px; margin: 4.75px 0; border-radius: 1px; }
  .lxnav__links.open { top: 72px; }
  /* every mobile comp uses a flat 24px gutter rather than a percentage */
  .lx-container { width: calc(100% - 48px); }

  /* ---- hero ---- */
  .lx-pxhero { background: #FAFAFA; border-bottom: 1px solid #EAEAEA; text-align: start;
    margin-top: -72px; padding: 95px 0 31.7px; min-height: 0; aspect-ratio: auto; }
  .lx-pxhero__pic { display: block; position: relative; order: -1; width: calc(100% - 48px);
    margin: 0 auto; height: auto; aspect-ratio: 342 / 256.5; border-radius: 16px;
    overflow: hidden; box-shadow: none; }
  .lx-pxhero__bg, .lx-pxhero__layer { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; margin: 0; border-radius: 0; box-shadow: none; }
  /* the two product layers are full-canvas overlays: contain keeps both products
     wholly inside the 4:3 mobile card instead of cropping them at the sides */
  .lx-pxhero__layer { object-fit: contain; }
  .lx-pxhero__prod { display: none; }
  .lx-pxhero__pictitle { display: block; position: absolute; z-index: 3; left: 50%; top: 19.68%;
    transform: translateX(-50%); width: min(74%, 252px); text-align: center;
    font-family: "Manrope", sans-serif; font-weight: 800; font-size: 28px; line-height: 1.037;
    letter-spacing: -0.0357em; color: var(--lx-ink); }
  .lx-pxhero__inner { order: 0; align-items: stretch; max-width: none; gap: 0; }
  .lx-pxhero h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.0335em;
    text-align: start; margin: 26px 0 0; }
  .lx-pxhero__sub { font-family: "Manrope", sans-serif; font-size: 15px; line-height: 22px;
    letter-spacing: -0.0093em; max-width: none; text-align: start; margin: 18.7px 0 0; }
  .lx-pxhero__pills { order: 3; flex-wrap: nowrap; gap: 8px; justify-content: flex-start; margin: 23.5px 0 0; }
  .lx-pxhero__pills .lx-pxpill { height: 30px; padding: 0 15px; gap: 8px; font-size: 13px;
    font-weight: 600; line-height: 1; border-radius: 15px; background: #fff; border: 1px solid #C5C8BB;
    white-space: nowrap; color: var(--lx-ink); }
  .lx-pxhero__pills .lx-pxpill svg,
  .lx-pxhero__pills .lx-pxpill svg.lx-ic-diamond { width: 12px; height: 12px; }
  .lx-pxhero__btns { order: 4; flex-direction: column; width: 100%; gap: 12.3px; margin: 24px 0 0; }
  .lx-pxhero__btns .lx-btn { width: 100%; height: 48px; padding: 0 24px; border-radius: 12px;
    font-size: 16px; font-weight: 700; justify-content: center; }
  .lx-pxhero__btns .lx-btn--primary { background: linear-gradient(90deg, #516238 0%, #697B4E 100%); }
  .lx-pxhero__btns .lx-btn svg.lx-ic-arrow { display: none; }

  /* ---- catalogue: white band (filter head) then #FAFAFA list ---- */
  #catalogue.lx-section { background: #FAFAFA; padding: 25.66px 0 0; }
  #catalogue .lx-pxlayout { display: block; }
  .lx-filters-toggle, #catalogue .lx-filters { display: none !important; }
  .lx-presults { position: relative; }
  .lx-mobfilter, .lx-presults__head { position: relative; z-index: 0; }
  .lx-mobfilter::before, .lx-presults__head::before { content: ""; position: absolute; z-index: -1;
    left: calc(50% - 50vw); width: 100vw; top: 0; bottom: 0; background: #fff; }
  .lx-mobfilter::before { top: -25.66px; }

  .lx-mobfilter { display: block; margin: 0; padding-bottom: 20px; }
  .lx-mobfilter h3 { font-family: "Manrope", sans-serif; font-size: 22px; font-weight: 800;
    line-height: 1.12; letter-spacing: 0; margin: 0 0 5.7px; }
  .lx-mobfilter__sub { font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 400;
    line-height: 20px; letter-spacing: 0; color: var(--lx-text-muted); margin: 0 0 18.75px; }
  .lx-mobsearch { margin: 0 0 20px; }
  .lx-mobsearch svg { left: 16px; width: 16px; height: 16px; }
  .lx-mobsearch input { height: 42px; padding: 0 14px 0 42.4px; border-radius: 8px;
    border: 1px solid #C5C8BB; font-size: 13px; }
  .lx-mobsearch input::placeholder { color: #75786D; }
  .lx-catchips { gap: 8px; padding-bottom: 0; }
  .lx-catchip { height: 30px; padding: 0 12px; border-radius: 8px; border: 0;
    background: rgba(112,130,85,.063); color: var(--lx-olive); font-size: 13px; font-weight: 600; }
  .lx-catchip.active { background: #708255; color: #fff; font-weight: 700; }

  .lx-presults__head { flex-direction: column-reverse; align-items: stretch; gap: 21.8px;
    margin: 0; padding-bottom: 22.4px; border-bottom: 1px solid #EAEAEA; }
  .lx-presults__sort { display: flex; align-items: center; gap: 4px; width: 100%; height: 42px;
    padding: 0 16px; border: 1px solid #C5C8BB; border-radius: 8px; background: #fff;
    font-size: 13px; color: var(--lx-ink); }
  .lx-presults__sort > span::after { content: ":"; }
  .lx-presults__sort select { border: 0; background: transparent; padding: 0; font-size: 13px;
    font-weight: 700; color: var(--lx-ink); flex: 1; }
  .lx-presults__sort select:nth-of-type(2) { display: none; }
  .lx-presults__head .count { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13px;
    line-height: 1.15; color: var(--lx-ink); }
  .lx-presults__head .count small { font-size: 13px; font-weight: 700; color: var(--lx-ink); }

  /* ---- product cards ---- */
  .lx-pgrid { grid-template-columns: 1fr; gap: 24px; margin-top: 27px; }
  .lx-bcard { background: #fff; border: 1px solid #EFF0EC; border-radius: 16px; padding: 20px; }
  .lx-bcard:hover { transform: none; box-shadow: none; }
  /* Per-product vertical crop, taken from the mobile comp's pattern offsets. Each photo is
     drawn at 1.0 x the tile width, so the y translate is a pure vertical crop:
       object-position Y = -(f * 226.5) / (302*ih/iw - 226.5).
     LX-C03 solves to 50.0%, LX-C07 to 49.9% - i.e. the default - so only these two differ. */
  .lx-bcard__media img[src*="lx10-100w-tc-tc-cable"] { object-position: 50% 100%; }  /* f -0.3330 */
  .lx-bcard__media img[src*="lx11-braided-cable"]    { object-position: 50% 85%; }   /* f -0.2828 */
  /* The two mobile comps differ on card chips: the Home bestseller card draws them WITH
     icons and no rule above View Details, while the Products grid and the detail page's
     related strip draw plain text pills WITH a rule. Home already matches; these two do not. */
  .lx-presults .lx-chip svg,
  .lx-presults .lx-chip__ic,
  .lx-relgrid .lx-chip svg,
  .lx-relgrid .lx-chip__ic { display: none; }
  .lx-presults .lx-bcard__foot,
  .lx-relgrid .lx-bcard__foot { border-top: 1px solid #EFF0EC; }
  /* mobile comp tile: 302x226.5 = 4:3, inset 20px from the card edge */
  .lx-bcard__media { aspect-ratio: 4 / 3; border-radius: 8px; background: #F9F9F9; margin: 0; }
  .lx-bcard__media img { object-fit: cover; }
  .lx-bcard__body { padding: 0; }
  .lx-bcard__cat { height: 22px; display: inline-flex; align-items: center; padding: 0 10.3px;
    border-radius: 11px; background: #708255; color: #fff; font-size: 10px; font-weight: 700;
    letter-spacing: 0; margin: 16px 0 0; }
  .lx-bcard__name { font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: 0;
    min-height: 0; margin: 5.5px 0 0; -webkit-line-clamp: 3; }
  .lx-bcard__desc { font-size: 13px; font-weight: 400; line-height: 18px; color: var(--lx-text-muted);
    min-height: 0; margin: 9.2px 0 0; -webkit-line-clamp: 3; }
  .lx-bcard .lx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12.2px 0 0; }
  .lx-bcard .lx-chip { min-height: 22px; height: 22px; padding: 0 11px; border-radius: 11px;
    background: rgba(112,130,85,.071); color: var(--lx-olive); font-size: 10px; font-weight: 600;
    line-height: 1; gap: 0; }
  .lx-bcard .lx-chip__ic { display: none; }
  .lx-bcard .lx-chip__tx { line-height: 1; }
  .lx-bcard__foot { margin: 9px 0 0; padding-top: 19.2px; border-top: 1px solid #EAEAEA; }
  .lx-bcard .lx-link-arrow { font-size: 14px; font-weight: 700; }

  /* ---- pager ---- */
  .lx-ppager { gap: 8px; margin-top: 40px; }
  .lx-ppager a { min-width: 36px; height: 38px; padding: 0 13px; border-radius: 19px;
    border: 1px solid #C5C8BB; background: #fff; font-size: 13px; font-weight: 600; color: var(--lx-ink); }
  .lx-ppager a.current { background: #516238; border-color: #516238; color: #fff; }
  .lx-ppager .pageinfo { order: 9; width: 100%; margin: 16.4px 0 0; font-size: 13px;
    font-weight: 400; color: var(--lx-text-muted); }
  #catalogue .lx-container { padding-bottom: 32.7px; }

  /* ---- engineered for performance ---- */
  .lx-perf.lx-section { background: #fff; padding: 47.98px 0 48px; }
  .lx-perf .lx-pthead { margin-bottom: 0 !important; }
  .lx-perf .lx-pthead h2 { font-size: 26px; font-weight: 800; line-height: 36px; letter-spacing: 0;
    margin: 0 0 12px !important; }
  .lx-perf .lx-underline { width: 80px; height: 4px; border-radius: 0; background: #516238; }
  .lx-perfgrid { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .lx-perfitem { display: block; }
  .lx-perfitem + .lx-perfitem { margin-top: 24px; }
  .lx-perfitem__icon { width: 36px; height: 36px; background: #D6EAB5; margin: 0 0 0 0;
    float: inline-start; }
  .lx-perfitem__icon svg { width: 18px; height: 18px; }
  .lx-perfitem h3 { font-size: 16px; font-weight: 700; line-height: 36px; letter-spacing: 0;
    margin: 0 0 0 49px; }
  .lx-perfitem p { clear: both; font-size: 13px; font-weight: 400; line-height: 20px;
    letter-spacing: 0; margin: 12px 0 0; }

  /* ---- stock CTA ---- */
  .lx-stockcta.lx-section { text-align: start; padding: 48.02px 0 47.7px;
    background: linear-gradient(120.7deg, #697B4E 0%, #516238 100%); }
  .lx-stockcta__inner { max-width: none; align-items: stretch; text-align: start; gap: 0; }
  .lx-stockcta h2 { font-size: 28px; font-weight: 800; line-height: 34px; letter-spacing: 0;
    text-align: start; margin: 0; }
  .lx-stockcta p { font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 400;
    line-height: 22px; letter-spacing: -0.0093em; text-align: start; margin: 24.47px 0 0; }
  .lx-stockcta .lx-btn { width: 100%; height: 50px; margin: 23.81px 0 0; padding: 0 24px;
    border-radius: 25px; background: transparent; border: 1px solid #fff; color: #fff;
    font-size: 16px; font-weight: 700; justify-content: center; }
  .lx-stockcta .lx-btn:hover { background: rgba(255,255,255,.12); }

  /* ---- contact ---- */
  .lx-contact.lx-section { background: #FAFAFA; padding: 49.45px 0 48.3px; }
  .lx-contact .lx-container { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .lx-contact__intro, .lx-contact__card, .lx-contact__grid { display: contents; }
  .lx-contact__card h3, .lx-contact__intro .lead { display: none; }
  .lx-contact__intro .lx-eyebrow { background: none; border: 0; padding: 0; border-radius: 0;
    font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; line-height: 1.15;
    letter-spacing: 1.33px; text-transform: uppercase; color: var(--lx-olive); margin: 0; }
  .lx-contact__intro h2 { font-size: 28px; font-weight: 800; line-height: 33.6px; letter-spacing: 0;
    margin: 14.08px 0 0; }
  .lx-contact__intro p { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 400;
    line-height: 20px; letter-spacing: 0; margin: 11.68px 0 0; }
  .lx-contact__grid .lx-field { order: 1; gap: 0; margin-top: 18.19px; }
  .lx-contact__grid .lx-field:first-of-type { margin-top: 33.68px; }
  .lx-contact__grid .lx-field label { font-family: "Manrope", sans-serif; font-size: 11px;
    font-weight: 600; line-height: 1.15; letter-spacing: 0; text-transform: uppercase;
    color: var(--lx-ink); margin: 0 0 5.21px; }
  .lx-contact__grid .lx-field input { height: 42px; padding: 0 12px; border: 1px solid #EAEAEA;
    border-radius: 8px; background: #fff; font-size: 14px; }
  .lx-checklist { order: 2; padding: 0; margin: 25px 0 0; gap: 13px; border: 0; }
  .lx-checklist li { gap: 9px; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 400; line-height: 18px; }
  /* comp draws the tick as a white check in an 18px rounded-square olive chip */
  .lx-checklist li svg { display: none; }
  .lx-checklist li::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px;
    border-radius: 4px; background: #708255 center / 11px 11px no-repeat;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E"); }
  .lx-contact__grid .lx-btn { order: 3; width: 100%; height: 52px; margin: 32.5px 0 0;
    border-radius: 26px; background: linear-gradient(90deg, #516238 0%, #697B4E 100%);
    color: #fff; font-size: 16px; font-weight: 700; justify-content: center; }
  .lx-contact__grid .lx-btn svg { display: none; }
  .lx-contact__note { order: 4; font-family: "Manrope", sans-serif; font-size: 12px;
    line-height: 16px; text-align: center; margin: 11.68px 0 0; }
}

/* ============================================================
   MOBILE — ABOUT  (comp: "Mobile Responsive – About", 393 artboard)
   Body copy on this comp is Inter (the Products comp is the odd one out).
   ============================================================ */
@media (max-width: 720px) {
  .lx-abouthero { text-align: start; padding-block: 48px 67px; }
  .lx-abouthero h1 { font-size: 32px; font-weight: 800; line-height: 42px;
    letter-spacing: -0.03125em; margin: 0; }
  /* the comp runs the headline as one flowing paragraph, so the authored
     line break is dropped and replaced by a space */
  .lx-abouthero h1 br { display: none; }
  .lx-abouthero h1 .accent::before { content: " "; }

  /* ---- our heritage ---- */
  .lx-heritage { display: block; }
  .lx-abouthero + .lx-section { padding-bottom: 0; }
  .lx-heritage .lx-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.0917em;
    line-height: 1.15; color: var(--lx-olive); }
  .lx-heritage h2 { font-size: 24px; font-weight: 800; line-height: 32px;
    letter-spacing: -0.0287em; margin: 3.7px 0 0 !important; }
  .lx-heritage > div + div { margin-top: 24.3px; }
  .lx-heritage p { font-family: "Inter", sans-serif; font-size: 15px; line-height: 24px;
    letter-spacing: -0.008em; margin: 0; }
  .lx-heritage p + p { margin-top: 16px; }

  /* ---- mission / vision ---- */
  .lx-mv { display: block; margin-top: 64.5px; }
  .lx-section:has(.lx-mv) { padding-bottom: 48px; }
  .lx-mv-card { border-radius: 24px; padding: 32px; border: 0; background: #F3F3F3; }
  .lx-mv-card:hover { transform: none; box-shadow: none; }
  .lx-mv-card--dark { background: #516238; }
  .lx-mv-card + .lx-mv-card { margin-top: 20px; }
  .lx-mv-card__icon { margin-bottom: 25.07px; }
  .lx-mv-card__icon svg { width: 26px; height: 26px; }
  .lx-mv-card h3 { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: 0; margin: 0 0 18.6px; }
  .lx-mv-card p { font-family: "Inter", sans-serif; font-size: 15px; line-height: 22px; letter-spacing: -0.005em; }

  /* ---- the LIXIL standard ---- */
  .lx-abouthero ~ .lx-section--muted { background: #fff; padding-block: 49.75px 48.5px; }
  .lx-standard-head { display: block; margin-bottom: 33px; }
  .lx-standard-head h2 { font-size: 24px; font-weight: 800; line-height: 1.15;
    letter-spacing: -0.0123em; margin: 0 0 10.2px !important; }
  .lx-standard-head p { font-family: "Inter", sans-serif; font-size: 15px; line-height: 22px;
    letter-spacing: 0; margin: 0; }
  .lx-pillars { grid-template-columns: 1fr; gap: 17px; }
  .lx-pillar { padding: 22.5px 24px; border: 1px solid #C5C8BB; border-radius: 16px;
    background: #fff; min-height: 160px; }
  .lx-pillar:hover { transform: none; box-shadow: none; }
  .lx-pillar__icon { margin-bottom: 14.6px; }
  .lx-pillar__icon svg { width: 24px; height: 24px; }
  .lx-pillar h3 { font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -0.011em; margin: 0 0 13.65px; }
  .lx-pillar p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 21px; letter-spacing: 0; }

  /* ---- omnipresent infrastructure ---- */
  .lx-infra.lx-section { padding-block: 56px 56px; }
  .lx-infra .lx-section__head--center { max-width: none; margin-inline: 0; text-align: start; margin-bottom: 0; }
  .lx-infra h2 { font-size: 28px; font-weight: 800; line-height: 36px; letter-spacing: 0;
    text-align: start; margin: 0 0 11.5px; }
  .lx-infra__lead { font-family: "Inter", sans-serif; font-size: 15px; line-height: 24px;
    letter-spacing: -0.005em; max-width: none; margin: 0; text-align: start; color: rgba(255,255,255,.8); }
  .lx-infra__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 32.5px; }
  .lx-infra-card { border-radius: 24px; padding: 24px; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.35); }
  .lx-infra-card__icon { margin-bottom: 17px; }
  .lx-infra-card__icon svg { width: 24px; height: 24px; }
  .lx-infra-card h3 { font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: 0; margin: 0 0 13.7px; }
  .lx-infra-card p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 0; }

  /* ---- pull quote ---- */
  .lx-quote-section.lx-section { background: #fff; padding-block: 53px 56.4px; }
  .lx-quote { padding-inline: 0; }
  .lx-quote-deco--bl { display: none; }
  .lx-quote-deco--tr { top: 53px; inset-inline-end: 50%; transform: translateX(50%); width: 84px; opacity: .10; }
  .lx-br-d { display: none; }
  .lx-quote blockquote { font-family: "Manrope", sans-serif; font-weight: 400; font-size: 22px;
    line-height: 32px; letter-spacing: -0.0125em; margin: 67px 0 0; }
  .lx-quote__attr { margin-top: 33.4px; gap: 16.7px; }
  .lx-quote__line { display: block; width: 32px; height: 1px; background: #516238; flex: 0 0 32px; }
  .lx-quote__who strong { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700;
    letter-spacing: 0.068em; line-height: 1.15; }
  .lx-quote__who span { font-family: "Manrope", sans-serif; font-size: 12px; line-height: 1.15; }

  /* ---- the business case ---- */
  .lx-bizsec.lx-section { background: #EEEEEE; padding-block: 58.7px 56px; }
  .lx-bizsec .lx-section__head--center { margin-bottom: 30.7px; }
  .lx-bizsec h2 { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -0.0073em; margin: 0; }
  .lx-bizcase { gap: 12px; }
  .lx-biz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0;
    border: 0; border-radius: 16px; background: #fff; padding: 24px; }
  .lx-biz-row:hover { transform: none; box-shadow: none; }
  .lx-biz-row__body { display: contents; }
  .lx-biz-row__icon { width: 32px; height: 32px; border-radius: 16px;
    background: rgba(81,98,56,.102); margin-inline-end: 12.5px; }
  .lx-biz-row__icon svg { width: 16px; height: 16px; }
  .lx-biz-row__body h3 { font-size: 16px; font-weight: 700; line-height: 1.15; letter-spacing: 0; margin: 0; }
  .lx-biz-row__body p { flex: 0 0 100%; font-family: "Inter", sans-serif; font-size: 13px;
    line-height: 18px; letter-spacing: 0; margin: 12.1px 0 0; }
  .lx-biz-row__tag { flex: 0 0 100%; font-size: 13px; font-weight: 700; margin-top: 9.9px; white-space: normal; }
}

/* ============================================================
   MOBILE — QUALITY  (comp: "Mobile Responsive – Quality", 393 artboard)
   ============================================================ */
@media (max-width: 720px) {
  .lx-qhero { padding-block: 56px 59px; }
  .lx-qhero__inner { max-width: none; gap: 0; }
  .lx-qhero__wm { width: 220px; top: 46%; }
  .lx-qhero .lx-eyebrow--pale { height: 28px; display: inline-flex; align-items: center;
    padding: 0 17px; border-radius: 14px; background: #D6EAB5; color: #121f01;
    font-size: 12px; font-weight: 700; letter-spacing: 1.13px; line-height: 1; }
  .lx-qhero h1 { font-size: 32px; font-weight: 800; line-height: 40px;
    letter-spacing: -0.0248em; margin: 24px 0 0; }
  .lx-qhero__sub { font-family: "Inter", sans-serif; font-size: 15px; line-height: 24px;
    letter-spacing: -0.005em; max-width: none; margin: 13px 0 0; }

  /* ---- shared section head ---- */
  .lx-qhead { max-width: none; margin: 0 0 32px; }
  .lx-qhead h2 { font-size: 26px; font-weight: 800; line-height: 32px;
    letter-spacing: -0.011em; margin: 0 0 11.5px; }
  .lx-qhead p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 22px;
    letter-spacing: 0; margin: 0; }
  .lx-qhead--left .lx-underline { margin-top: 11.8px; width: 64px; height: 4px; }

  /* ---- our quality promise ---- */
  .lx-qhero + .lx-section { padding-block: 48px 48px; }
  .lx-qgrid4 { grid-template-columns: 1fr; gap: 16px; }
  .lx-qcard { border-radius: 12px; border: 1px solid #C5C8BB; background: #fff; padding: 24px; }
  .lx-qcard:hover { transform: none; box-shadow: none; }
  .lx-qcard__icon { margin-bottom: 12.7px; }
  .lx-qcard__icon svg { width: 24px; height: 24px; }
  .lx-qcard h3 { font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: 0; margin: 0 0 14.5px; }
  .lx-qcard p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 22px; letter-spacing: 0; }
  .lx-qcard--hl { background: #708255; border-color: transparent; }

  /* ---- tested for everyday use ---- */
  .lx-qtest.lx-section { background: rgba(214,234,181,.251); padding-block: 48px 48px; }
  .lx-qtest .lx-qhead { margin-bottom: 32.6px; }
  .lx-qtest .lx-qgrid4 { gap: 16px; }
  .lx-qenv { border-radius: 12px; border: 0; background: #fff; padding: 24px; text-align: center; }
  .lx-qenv:hover { transform: none; box-shadow: none; }
  .lx-qenv__icon { width: 44px; height: 44px; border-radius: 22px; background: rgba(81,98,56,.102);
    margin: 0 auto 5.6px; }
  .lx-qenv__icon svg { width: 22px; height: 22px; }
  .lx-qenv h3 { font-size: 18px; font-weight: 700; line-height: 1.15; margin: 0 0 10px; }
  .lx-qenv p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 22px; }

  /* ---- charging safety standards ---- */
  .lx-qsafety.lx-section { padding-block: 48px 48px; }
  .lx-qsafety .lx-qhead h2 { font-size: 28px; line-height: 34px; letter-spacing: -0.0286em; margin: 0 0 15.9px; }
  .lx-qsafety .lx-qhead p { font-family: "Inter", sans-serif; font-size: 15px; line-height: 24px;
    max-width: none; margin: 0; }
  .lx-qsafety .lx-qhead { margin-bottom: 35.8px; }
  .lx-qsafety__grid { grid-template-columns: 1fr; gap: 12px; }
  .lx-prot { border-radius: 12px; padding: 17.8px 20px 20px; background: rgba(255,255,255,.0706);
    border: 1px solid rgba(255,255,255,.24); }
  .lx-prot:hover { transform: none; background: rgba(255,255,255,.0706); }
  .lx-prot__icon { display: none; }
  .lx-prot__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    color: rgba(255,255,255,.62); margin: 0 0 7.1px; }
  .lx-prot h3 { font-size: 18px; font-weight: 700; line-height: 1.15; margin: 0 0 9.9px; }
  .lx-prot p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 22px; }

  /* ---- technology behind the quality ---- */
  .lx-qsafety + .lx-section { background: #F3F3F3; padding-block: 48px 48px; }
  .lx-qsafety + .lx-section .lx-qhead h2 { margin-bottom: 15px; }
  .lx-qsafety + .lx-section .lx-qhead { text-align: start; margin: 0 0 32.5px; }
  .lx-qgrid3 { grid-template-columns: 1fr; gap: 12px; }
  .lx-qtechcard { display: block; border-radius: 12px; border: 1px solid #C5C8BB;
    background: #fff; padding: 24px; }
  .lx-qtechcard:hover { transform: none; box-shadow: none; }
  .lx-qtechcard__icon { display: none; }
  .lx-qtechcard h3 { font-size: 18px; font-weight: 700; line-height: 1.15; margin: 0 0 9.9px; }
  .lx-qtechcard p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 22px; }

  /* ---- quality standards by category ---- */
  .lx-qcatrow { grid-template-columns: 1fr; gap: 12px; }
  .lx-qcatitem { display: flex; align-items: center; gap: 18px; text-align: start;
    padding: 20px; border-radius: 12px; background: #FCFDFC; border: 0; min-height: 68px; }
  .lx-qcatitem:hover { transform: none; box-shadow: none; }
  .lx-qcatitem__icon { margin: 0; flex: 0 0 auto; }
  .lx-qcatitem__icon svg { width: 28px; height: 28px; }
  .lx-qcatitem span { font-size: 18px; font-weight: 700; }

  /* ---- three pillars band ---- */
  .lx-qpillars.lx-section { padding-block: 70px 77.8px; }
  .lx-qpillars__inner { max-width: none; gap: 0; }
  .lx-qpillars__wm { font-size: 46px; line-height: 1.0; }
  .lx-qpillars h2 { font-size: 22px; font-weight: 700; line-height: 32px; letter-spacing: -0.01em; }
  .lx-qpillars p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 22px;
    max-width: none; margin: 31.5px 0 0; }

  /* ---- closing CTA ---- */
  .lx-qcta.lx-section { background: #fff; padding-block: 55px 56px; }
  .lx-qcta__inner { max-width: none; gap: 0; }
  .lx-qcta h2 { font-size: 28px; font-weight: 800; line-height: 34px; letter-spacing: -0.01em; }
  .lx-qcta p { font-family: "Inter", sans-serif; font-size: 15px; line-height: 24px;
    max-width: none; margin: 29.6px 0 0; }
  .lx-qcta .lx-btn { width: 100%; height: 52px; margin-top: 27.9px; border-radius: 26px;
    background: linear-gradient(90deg, #516238 0%, #697B4E 100%); color: #fff;
    font-size: 16px; font-weight: 700; justify-content: center; }
  .lx-qcta .lx-btn svg { display: none; }
}

/* ============================================================
   MOBILE — PARTNER  (comp: "Mobile Responsive – Partner", 393 artboard)
   Body copy on this comp is Manrope (as on the Products comp).
   ============================================================ */
@media (max-width: 720px) {
  .lx-pthero { padding-block: 48px 48px; background: #FAFAFA; }
  .lx-pthero__inner { max-width: none; gap: 0; }
  .lx-pthero__wm { width: 220px; }
  .lx-pthero h1 { font-size: 32px; font-weight: 800; line-height: 40px;
    letter-spacing: -0.03125em; margin: 0; }
  .lx-pthero__sub { font-family: "Manrope", sans-serif; font-size: 15px; line-height: 24px;
    letter-spacing: 0; max-width: none; margin: 17px 0 0; }
  .lx-ic-d { display: none; }
  .lx-ic-m { display: inline-flex; }
  .lx-pthero__bulk { display: none; }
  .lx-donly { display: none; }
  .lx-monly { display: inline; }
  .lx-pthero__btns { width: 100%; margin-top: 31px; }
  .lx-pthero__btns .lx-btn { width: 100%; height: 54px; padding: 0 24px; border-radius: 16px;
    background: #EAEAEA; color: var(--lx-olive-dark); border: 0;
    font-size: 16px; font-weight: 700; justify-content: center; }
  .lx-pthero__btns .lx-btn:hover { background: #e0e0e0; }
  .lx-pthero__btns .lx-btn svg { display: none; }

  /* ---- who this page is for ---- */
  .lx-ptwho.lx-section { background: #F3F3F3; padding-block: 49.4px 48px; }
  .lx-pthead { margin: 0; }
  .lx-pthead h2 { font-size: 26px; font-weight: 800; line-height: 1.15;
    letter-spacing: 0; margin: 0 0 12.7px; }
  .lx-ptwho .lx-underline { width: 48px; height: 4px; border-radius: 2px; }
  .lx-whogrid { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .lx-whocard { border-radius: 20px; padding: 24px; background: #fff; min-height: 175px; }
  .lx-whocard:hover { transform: none; box-shadow: none; }
  .lx-whocard__icon { width: 32px; height: 32px; margin-bottom: 14px; }
  .lx-whocard h3 { font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: 0; margin: 0 0 13.5px; }
  .lx-whocard p { font-family: "Manrope", sans-serif; font-size: 14px; line-height: 22px; letter-spacing: 0; }

  /* ---- why partner with LIXIL ---- */
  .lx-ptwhy.lx-section { background: #FAFAFA; padding-block: 56.4px 56px; }
  .lx-ptwhy .lx-container { display: block; }
  .lx-ptwhy__head h2 { font-size: 28px; font-weight: 800; line-height: 36px;
    letter-spacing: -0.01em; margin: 0 0 12.1px; }
  .lx-ptwhy__head p { font-family: "Manrope", sans-serif; font-size: 15px; line-height: 24px;
    letter-spacing: 0; margin: 0; }
  .lx-whygrid { grid-template-columns: 1fr; gap: 12px; margin-top: 31.5px; }
  .lx-whycard { flex-direction: row; align-items: center; gap: 17px; min-height: 64px;
    padding: 0 20px; border-radius: 16px; background: #F9F9F9; }
  .lx-whycard:hover { transform: none; background: #F9F9F9; }
  .lx-whycard--wide { grid-column: auto; }
  .lx-whycard__icon { width: 24px; height: 24px; flex: 0 0 auto; }
  .lx-whycard h4 { font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.15; }

  /* ---- product range for partners ---- */
  .lx-ptrange.lx-section { background: #fff; padding-block: 48px 46px; }
  .lx-ptrange .lx-container { display: flex; flex-direction: column; }
  .lx-ptrange__head { display: contents; }
  .lx-ptcatgrid { order: 1; margin-bottom: 0; }
  .lx-ptlink { order: 2; }
  .lx-ptrange__head h2 { font-size: 26px; font-weight: 800; line-height: 36px;
    letter-spacing: -0.01em; margin: 0 0 7px !important; max-width: 300px; }
  .lx-ptrange__head p, .lx-ptrange__head .lx-pthead__sub {
    font-family: "Manrope", sans-serif; font-size: 15px; line-height: 22px; margin: 0 !important; }
  .lx-ptrange__head > div { margin-bottom: 29px; }
  .lx-ptcatgrid { grid-template-columns: 1fr; gap: 12px; }
  .lx-ptcat { flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px;
    min-height: 68px; padding: 0 20px; border-radius: 16px; background: #F9F9F9; text-align: start; }
  .lx-ptcat:hover { transform: none; box-shadow: none; border-color: transparent; }
  .lx-ptcat__icon { width: 28px; height: 28px; flex: 0 0 auto; }
  .lx-ptcat span { font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; }
  .lx-ptlink { display: flex; justify-content: center; margin-top: 37.2px;
    font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; }

  /* ---- partnership benefits ---- */
  .lx-ptbenefits.lx-section { background: #EAEAEA; padding-block: 58.9px 56px; }
  .lx-ptbenefits__head { margin-bottom: 31.5px; }
  .lx-ptbenefits__head h2 { font-size: 28px; font-weight: 800; line-height: 1.15;
    letter-spacing: -0.01em; margin: 0 0 15.4px; }
  .lx-ptbenefits__head p { font-family: "Manrope", sans-serif; font-size: 15px; line-height: 22px;
    max-width: none; margin: 0; }
  .lx-benerow1 { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
  .lx-benerow2 { display: flex; flex-direction: column; gap: 16px; }
  .lx-benecard--olive { order: -1; }
  .lx-benecard { border-radius: 20px; padding: 26px 24px 24px; }
  .lx-benecard:hover { transform: none; box-shadow: none; }
  .lx-benecard h3 { font-family: "Manrope", sans-serif; font-size: 18px; font-weight: 700;
    line-height: 1.15; letter-spacing: 0; margin: 0 0 12px; }
  .lx-benecard--olive h3 { font-size: 20px; }
  .lx-benecard--sm h3 { font-size: 18px; }
  .lx-benecard p, .lx-benecard--sm p { font-family: "Manrope", sans-serif; font-size: 14px;
    line-height: 22px; letter-spacing: 0; }

  /* ---- how it works ---- */
  .lx-ptsteps.lx-section { background: #fff; padding-block: 59px 56px; }
  .lx-ptsteps .lx-pthead, .lx-ptsteps .lx-section__head { text-align: center; margin-bottom: 10.6px; }
  .lx-ptsteps__grid { grid-template-columns: 1fr; gap: 16px; }
  .lx-ptsteps__grid .lx-step { border: 0; border-radius: 20px; background: #F9F9F9;
    padding: 24px; gap: 0; min-height: 173px; }
  .lx-ptsteps__grid .lx-step:hover { transform: none; box-shadow: none; }
  .lx-ptsteps__grid .lx-step:not(:last-child)::after { display: none; }
  .lx-step__num { width: 36px; height: 36px; margin-bottom: 14px;
    font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; }
  .lx-ptsteps__grid .lx-step h4 { font-family: "Manrope", sans-serif; font-size: 18px;
    font-weight: 700; line-height: 1.15; margin: 0 0 12px; }
  .lx-ptsteps__grid .lx-step p { font-family: "Manrope", sans-serif; font-size: 14px; line-height: 22px; }

  /* ---- partner request form ---- */
  .lx-ptform.lx-section { background: #F3F3F3; padding-block: 51px 48px; }
  .lx-ptform__card { background: none; border-radius: 0; padding: 0; box-shadow: none; max-width: none; }
  .lx-ptform__head { margin-bottom: 22.6px; }
  .lx-ptform__head h2 { font-size: 26px; font-weight: 800; line-height: 1.15;
    letter-spacing: -0.01em; margin: 0 0 9.5px; }
  .lx-ptform__head p { font-family: "Manrope", sans-serif; font-size: 14px; line-height: 22px; margin: 0; }
  .lx-ptform__grid { grid-template-columns: 1fr; gap: 18.7px; }
  .lx-ptform__grid .lx-field { gap: 0; }
  .lx-ptform__grid .lx-field label { font-family: "Manrope", sans-serif; font-size: 12px;
    font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; line-height: 1.15;
    color: var(--lx-text-muted); margin: 0 0 9.5px; }
  .lx-ptform__grid .lx-field input, .lx-ptform__grid .lx-field select {
    height: 42px; padding: 0 16px; border: 1px solid #C5C8BB; border-radius: 8px;
    background: #fff; font-size: 15px; }
  .lx-ptform__grid .lx-field textarea { min-height: 78px; padding: 12px 16px;
    border: 1px solid #C5C8BB; border-radius: 8px; background: #fff; font-size: 15px; }
  .lx-ptform__submit .lx-btn { height: 54px; padding: 0 24px; border-radius: 24px;
    background: linear-gradient(90deg, #516238 0%, #697B4E 100%); color: #fff;
    font-size: 16px; font-weight: 700; }
  .lx-ptform__submit .lx-btn svg { display: none; }
}

/* ============================================================
   MOBILE — PRODUCT DETAIL
   (comp: "Mobile Responsive – Lixil – LX-C03 …", 393 artboard)
   ============================================================ */
@media (max-width: 720px) {
  .lx-pd.lx-section { padding-block: 20px 40px; background: #fff; }
  .lx-breadcrumb { font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 18.4px; }
  .lx-pdtop { display: block; }

  /* gallery: single square frame with dot pagination, no thumb strip */
  .lx-pdgallery { position: relative; top: auto; display: block; aspect-ratio: auto; border: 0;
    background: transparent; padding: 0; max-width: none; margin: 0; gap: 0; }
  .lx-pdgallery__main { aspect-ratio: 1; flex: none; border-radius: 12px; background: #F3F4F6;
    overflow: hidden; margin: 0; display: block; }
  .lx-pdgallery__main picture { display: block; width: 100%; height: 100%; }
  .lx-pdgallery__main img { width: 100%; height: 100%; object-fit: cover; }
  .lx-pdthumbs { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 3;
    display: flex; justify-content: center; gap: 8px; padding: 0; }
  .lx-pdthumb { width: 8px; height: 8px; min-width: 0; flex: 0 0 8px; aspect-ratio: 1;
    padding: 0; border: 0; border-radius: 50%; background: #D9D9D9; overflow: hidden; }
  .lx-pdthumb img { display: none; }
  .lx-pdthumb.active { background: #708255; border: 0; }

  /* product info */
  .lx-pdinfo { margin-top: 19.5px; }
  .lx-pdinfo__eyebrow { display: inline-flex; align-items: center; height: 20px;
    padding: 0 12.5px; border-radius: 10px; background: #E8E8E8; color: var(--lx-ink);
    font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 1.5px; line-height: 1; text-transform: uppercase; }
  .lx-pdinfo h1 { font-size: 28px; font-weight: 800; line-height: 34px;
    letter-spacing: -0.01em; margin: 23.5px 0 0; }
  .lx-pdinfo__desc { font-family: "Inter", sans-serif; font-size: 15px; line-height: 24px;
    letter-spacing: -0.005em; max-width: none; margin: 11.7px 0 0; }
  .lx-pdchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 27.9px 0 0; }
  .lx-pdchip { height: 19px; box-sizing: border-box; border: 0; display: inline-flex; align-items: center; padding: 0 10px;
    border-radius: 9.5px; background: #F3F4F6; color: var(--lx-ink-soft);
    font-family: "Manrope", sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; }
  .lx-pdstats { margin: 23px 0 0; padding: 19.9px 0 18.9px; border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5; display: block; }
  .lx-pdstat { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .lx-pdstat + .lx-pdstat { margin-top: 17.7px; }
  .lx-pdstat__label { font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 400;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--lx-text-muted); }
  .lx-pdstat__value { font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700;
    color: var(--lx-ink); text-align: end; }
  .lx-pdbtns { display: flex; flex-direction: column; gap: 12px; margin: 23px 0 0; }
  .lx-pdbtns .lx-btn { width: 100%; height: 46px; padding: 0 24px; border-radius: 8px;
    font-size: 15px; font-weight: 700; justify-content: center; }
  .lx-pdbtns .lx-btn--primary { background: #516238; }
  .lx-pdbtns .lx-btn--ghost { background: #fff; border: 1px solid #C5C8BB; color: var(--lx-ink); }

  /* ---- key features ---- */
  .lx-pdfeatures.lx-section { background: #F3F3F3; padding-block: 18.5px 24.5px; }
  .lx-pdfeatures .lx-qhead { text-align: start; max-width: none; margin: 0 0 34.6px; }
  .lx-pdfeatures .lx-qhead .lx-eyebrow { display: inline-flex; align-items: center; height: 19px;
    padding: 0 12.5px; border-radius: 9.5px; background: #4D5E3F; color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: 1.37px; line-height: 1; }
  .lx-pdfeatures .lx-qhead h2 { font-size: 24px; font-weight: 800; line-height: 30px;
    letter-spacing: 0; margin: 7.6px 0 0; }
  .lx-pdfeatures .lx-qhead p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 20px;
    letter-spacing: 0; margin: 11.7px 0 0; }
  .lx-pdfeatgrid { display: grid; grid-template-columns: 1fr; gap: 17px; }
  .lx-pdfeat { background: #fff; border: 1px solid #F3F4F6; border-radius: 8px;
    padding: 24px; min-height: 171px; }
  .lx-pdfeat:hover { transform: none; box-shadow: none; }
  .lx-pdfeat__icon { width: 24px; height: 24px; margin-bottom: 11.2px; }
  .lx-pdfeat__icon svg { width: 24px; height: 24px; }
  .lx-pdfeat h3 { font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: 0; margin: 0 0 13px; }
  .lx-pdfeat p { font-family: "Inter", sans-serif; font-size: 13px; line-height: 18px; letter-spacing: 0; }

  /* ---- technical specifications ---- */
  .lx-pdspecs.lx-section { background: #fff; padding-block: 26.7px 24px; }
  .lx-pdspecs .lx-pthead { margin-bottom: 25.2px !important; }
  .lx-pdspecs .lx-pthead h2 { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: 0; }
  .lx-spectable { max-width: none; }
  .lx-specrow { display: block; }
  .lx-speccell { padding: 16px 0; grid-template-columns: auto minmax(0,1fr); column-gap: 16px;
    border-top: 1px solid #E9E9E9; border-bottom: 0; align-items: baseline; }
  .lx-specrow:last-child .lx-speccell:last-child { border-bottom: 1px solid #E9E9E9; }
  .lx-speccell dt { font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 400;
    line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; color: var(--lx-text-muted); }
  .lx-speccell dd { font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; line-height: 1.15; }

  /* ---- device compatibility ---- */
  .lx-pdcompat.lx-section { background: #EEEEEE; padding-block: 25.7px 24px; }
  .lx-pdcompat__eyebrow { text-align: center; font-family: "Manrope", sans-serif; font-size: 18px;
    font-weight: 700; letter-spacing: 3px; text-transform: uppercase; line-height: 1.15;
    color: var(--lx-text-muted); margin: 0 0 29.7px; }
  .lx-pdcompat__row { display: grid; grid-template-columns: repeat(2, 160px); gap: 12px;
    justify-content: center; }
  .lx-pdcompat__item { flex-direction: column; justify-content: center; gap: 8px;
    width: 160px; height: 69px; padding: 0; border-radius: 8px; background: #fff; border: 0; }
  .lx-pdcompat__item svg { width: 20px; height: 20px; }
  .lx-pdcompat__item span { font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; }

  /* ---- performance band ---- */
  .lx-pdcontrol.lx-section { padding-block: 26.7px 24px; background: #516238; }
  .lx-pdcontrol__head h2 { font-size: 24px; font-weight: 800; line-height: 1.15;
    letter-spacing: 0; margin: 0 0 14.2px; }
  .lx-pdcontrol__head p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 20px;
    letter-spacing: 0; margin: 0; }
  .lx-pdcontrol__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
  .lx-pdctrlcard { border-radius: 8px; padding: 24px; min-height: 144px;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.35); }
  .lx-pdctrlcard__icon, .lx-pdctrlcard__icon svg { width: 18px; height: 18px; }
  .lx-pdctrlcard__icon { color: #fff; margin-bottom: 13.5px; }
  .lx-pdctrlcard h3 { font-size: 13px; font-weight: 700; line-height: 1.15;
    letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 15.4px; }
  .lx-pdctrlcard p { font-family: "Inter", sans-serif; font-size: 12px; line-height: 18px;
    letter-spacing: 0; max-width: none; }
  .lx-pdctrlcard h3 { max-width: none; }

  /* ---- recommended solutions (horizontal carousel) ---- */
  .lx-pdrelated.lx-section { background: #F9F9F9; padding-block: 26.4px 2px; }
  .lx-pdrelated .lx-pthead { margin-bottom: 30.7px !important; }
  .lx-pdrelated .lx-pthead h2 { font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: 0; }
  .lx-pdrelated .lx-underline { display: none; }
  .lx-relgrid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; padding-bottom: 2px; }
  .lx-relgrid::-webkit-scrollbar { display: none; }
  .lx-relgrid > .lx-bcard { flex: 0 0 320px; width: 320px; scroll-snap-align: start;
    background: #fff; border: 1px solid #EFF0EC; border-radius: 16px; padding: 20px; }
  .lx-relgrid .lx-bcard__media { aspect-ratio: 4 / 3; border-radius: 8px; background: #F9F9F9; margin: 0; }
  .lx-relgrid .lx-bcard__body { padding: 0; }
  .lx-relgrid .lx-bcard__cat { height: 22px; display: inline-flex; align-items: center;
    padding: 0 10.3px; border-radius: 11px; background: #708255; color: #fff;
    font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0; margin: 16px 0 0; }
  .lx-relgrid .lx-bcard__name { font-size: 18px; font-weight: 700; line-height: 24px;
    min-height: 0; margin: 5.5px 0 0; -webkit-line-clamp: 3; }
  .lx-relgrid .lx-bcard__desc { font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 400;
    line-height: 18px; min-height: 0; margin: 9.2px 0 0; -webkit-line-clamp: 3; }
  .lx-relgrid .lx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12.2px 0 0; }
  .lx-relgrid .lx-chip { min-height: 22px; height: 22px; padding: 0 11px; border-radius: 11px;
    background: rgba(112,130,85,.071); color: var(--lx-olive);
    font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 600; line-height: 1; gap: 0; }
  .lx-relgrid .lx-chip__ic { display: none; }
  .lx-relgrid .lx-bcard__foot { margin: 9px 0 0; padding-top: 19.2px; border-top: 1px solid #EAEAEA; }
  .lx-relgrid .lx-link-arrow { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; }

  /* ---- B2B bulk inquiry ---- */
  .lx-pdinquiry.lx-section { background: #F3F3F3; padding-block: 24px; }
  .lx-pdinquiry__card { border-radius: 16px; padding: 24px; background: #fff;
    border-top: 4px solid #516238; box-shadow: none; }
  .lx-pdinquiry__q { display: none; }
  .lx-pdinquiry__head { text-align: center; margin-bottom: 27.9px; }
  .lx-pdinquiry__head h2 { font-size: 24px; font-weight: 800; line-height: 1.15;
    letter-spacing: 0; margin: 0 0 8.7px; }
  .lx-pdinquiry__head p { font-family: "Inter", sans-serif; font-size: 13px; line-height: 18px;
    letter-spacing: 0; margin: 0; }
  .lx-pdinquiry .lx-ptform__grid { grid-template-columns: 1fr; gap: 15px; }
  .lx-pdinquiry .lx-field { gap: 0; }
  .lx-pdinquiry .lx-field label { font-family: "Manrope", sans-serif; font-size: 10px;
    font-weight: 700; letter-spacing: 1.37px; text-transform: uppercase; line-height: 1.15;
    color: var(--lx-text-muted); margin: 0 0 8.5px; }
  .lx-pdinquiry .lx-field input, .lx-pdinquiry .lx-field textarea {
    padding: 0 12.7px; border: 1px solid #C5C8BB; border-radius: 8px; background: #fff;
    font-family: "Inter", sans-serif; font-size: 14px; }
  .lx-pdinquiry .lx-field input { height: 40px; }
  .lx-pdinquiry .lx-field textarea { min-height: 99px; padding: 12px 12.7px; }
  .lx-pdinquiry .lx-prefill input { background: #EEEEEE; border-color: #EEEEEE; font-weight: 700; }
  .lx-pdinquiry .lx-ptform__submit { margin-top: 9.5px; }
  .lx-pdinquiry .lx-ptform__submit .lx-btn { width: 100%; height: 51px; border-radius: 8px;
    background: linear-gradient(90deg, #516238 0%, #697B4E 100%); color: #fff;
    font-size: 16px; font-weight: 700; justify-content: center; padding: 0 24px; }
}

/* ============================================================
   MOBILE — HOME: sections/controls the mobile comp does not show
   ============================================================ */
@media (max-width: 720px) {
  /* the comp goes Why Choose LIXIL -> Explore the Full Collection with no
     "Engineered for Durability and Safety" split section in between */
  .lx-section:has(.lx-split) { display: none; }
  /* the comp's Why band ends on the stats row - no CTA pair */
  .lx-why__cta { display: none; }
}

/* ============================================================
   MOBILE — HOME (comp: "Mobile Responsive – Home", 393 artboard)
   Section-by-section against the comp: advantages, bestsellers,
   why band, full collection, onboarding, contact.
   ============================================================ */
@media (max-width: 720px) {
  /* ---- built for performance (value props) ---- */
  .lx-cat-section + .lx-section--muted { background: #fff; padding-block: 47.5px 48px; }
  .lx-cat-section + .lx-section--muted .lx-section__head--center { margin-bottom: 32px; max-width: none; }
  .lx-cat-section + .lx-section--muted .lx-section__head--center h2 {
    font-size: 26px; font-weight: 800; line-height: 34px; letter-spacing: 0; margin: 0; }
  .lx-cat-section + .lx-section--muted .lx-section__head--center > div {
    width: 60px !important; height: 4px !important; margin: 12.5px auto 0 !important; }
  .lx-grid--4 { grid-template-columns: 1fr; gap: 16px; }
  .lx-adv { background: #fff; border: 1px solid rgba(20,22,15,.06); border-radius: 16px;
    padding: 24px 24px 20px; min-height: 184px; }
  .lx-adv .lx-adv__icon { width: 40px; height: 40px; border-radius: 20px;
    background: rgba(112,130,85,.102); color: var(--lx-olive-dark);
    display: grid; place-items: center; margin-bottom: 17.7px; }
  .lx-adv .lx-adv__icon svg { width: 18px; height: 18px; color: var(--lx-olive-dark); }
  .lx-adv h3 { font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: 0; margin: 0 0 21.8px; }
  .lx-adv p { font-family: "Inter", sans-serif; font-size: 13px; line-height: 20px; letter-spacing: 0; margin: 0; }

  /* ---- retail bestsellers ---- */
  .lx-section:has(.lx-toolbar) { background: #fff; padding-block: 42px 40px; }
  .lx-toolbar { display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 24.5px; }
  .lx-toolbar h2 { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: 0; }
  .lx-catalog-link { font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700;
    white-space: nowrap; }
  .lx-grid--4 > .lx-bcard, .lx-relgrid > .lx-bcard { min-width: 0; }
  .lx-grid--4 .lx-bcard { background: #fff; border: 1px solid #EFF0EC; border-radius: 16px; padding: 20px; }
  .lx-grid--4 .lx-bcard:hover { transform: none; box-shadow: none; }
  .lx-grid--4 .lx-bcard__media { aspect-ratio: 4 / 3; border-radius: 12px; background: #F9F9F9; margin: 0; }
  .lx-grid--4 .lx-bcard__body { padding: 0; }
  .lx-grid--4 .lx-bcard__cat { height: 18px; display: inline-flex; align-items: center;
    padding: 0 8.5px; border-radius: 9px; background: #708255; color: #fff;
    font-family: "Manrope", sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: .06em; line-height: 1; margin: 16px 0 0; }
  .lx-grid--4 .lx-bcard__name { font-size: 18px; font-weight: 700; line-height: 24px;
    min-height: 0; margin: 13.7px 0 0; -webkit-line-clamp: 3; }
  .lx-grid--4 .lx-bcard__desc { font-family: "Inter", sans-serif; font-size: 13px; line-height: 18px;
    min-height: 0; margin: 16.9px 0 0; -webkit-line-clamp: 3; }
  .lx-grid--4 .lx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 9.1px 0 0; }
  .lx-grid--4 .lx-chip { min-height: 20px; height: 20px; padding: 0 10px; border-radius: 10px;
    background: rgba(112,130,85,.102); color: var(--lx-olive-dark);
    font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 600; line-height: 1; gap: 6px; }
  .lx-grid--4 .lx-chip__ic { display: inline-flex; width: 10px; height: 10px;
    background: none; box-shadow: none; border-radius: 0; }
  .lx-grid--4 .lx-chip__ic svg { width: 10px; height: 10px; }
  /* the Home bestseller cards have no rule above "View Details" in the comp */
  .lx-grid--4 .lx-bcard__foot { margin: 19.2px 0 0; padding-top: 0; border-top: 0; }
  .lx-grid--4 .lx-link-arrow { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; }

  /* ---- why choose LIXIL ---- */
  .lx-why.lx-section { padding-block: 51px 54px; }
  .lx-why__inner { max-width: none; }
  .lx-why .lx-section__head--center { text-align: start; max-width: none; margin: 0 0 42.9px; }
  .lx-why .lx-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; line-height: 1.15; }
  .lx-why h2 { font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em;
    text-align: start; margin: 14.5px 0 0 !important; }
  .lx-why__lead { font-family: "Inter", sans-serif; font-size: 15px; line-height: 22px;
    letter-spacing: -0.005em; max-width: none; text-align: start; margin: 10px 0 0; }
  .lx-why__grid { display: flex; flex-direction: column; gap: 24px; }
  .lx-wcard { flex: 0 0 auto; width: 100%; border-radius: 12px; padding: 20px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.3); }
  .lx-wcard__icon { display: none; }
  .lx-wcard h3 { font-size: 20px; font-weight: 700; line-height: 1.15; margin: 0 0 12px; }
  .lx-wcard p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 22px; margin: 0; }
  /* the comp's Why band shows three cards and three stats */
  .lx-why__grid .lx-wcard:nth-child(n+4) { display: none; }
  .lx-stats > div:nth-child(n+4) { display: none; }
  .lx-stats { display: block; text-align: center; margin-top: 40px; padding: 34px 0 26px;
    border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
  .lx-stats > div + div { margin-top: 21px; }
  .lx-stat__n { font-size: 22px; font-weight: 800; line-height: 1.15; }
  .lx-stat__l { font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 400;
    letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }

  /* ---- explore the full collection ---- */
  .lx-section:has(.lx-tabs) { background: #fff; padding-block: 42px 48.5px; }
  .lx-section:has(.lx-tabs) .lx-section__head--center { text-align: start; max-width: none; margin: 0 0 23.8px; }
  .lx-section:has(.lx-tabs) .lx-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; }
  .lx-section:has(.lx-tabs) .lx-section__head--center h2 { font-size: 26px; font-weight: 800;
    line-height: 1.15; letter-spacing: 0; text-align: start; margin: 12.5px 0 0 !important;
    white-space: nowrap; }
  .lx-section:has(.lx-tabs) .lx-lead { display: none; }
  /* centring a horizontally-scrolling flex row pushes its first item out of reach */
  .lx-tabs { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 9px;
    margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lx-tabs::-webkit-scrollbar { display: none; }
  .lx-tab { flex: 0 0 auto; height: 31px; padding: 0 16px; border-radius: 15.5px;
    display: inline-flex; align-items: center; font-family: "Manrope", sans-serif;
    font-size: 15px; font-weight: 700; background: #fff; border: 1px solid #C5C8BB; color: var(--lx-ink); }
  .lx-tab.active { background: #516238; border-color: #516238; color: #fff; }
  .lx-section:has(.lx-tabs) .lx-grid--4 { display: flex; gap: 24px; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 24px -24px 0; padding-inline: 24px; scroll-padding-inline: 24px; }
  .lx-section:has(.lx-tabs) .lx-grid--4::-webkit-scrollbar { display: none; }
  .lx-section:has(.lx-tabs) .lx-grid--4 > .lx-bcard { flex: 0 0 320px; width: 320px; scroll-snap-align: start; }
  .lx-collection-quote { font-family: "Inter", sans-serif; font-style: italic; font-size: 14px;
    line-height: 22px; text-align: center; margin: 24px 0 0; color: var(--lx-text-muted); }
  .lx-explore-cta { flex-direction: column; align-items: center; gap: 12px !important; margin-top: 24px !important; }
  .lx-explore-cta .lx-btn { width: auto; min-width: 239px; height: 57px; padding: 0 24px;
    border-radius: 16px; font-size: 18px; font-weight: 700; justify-content: center; }
  .lx-explore-cta .lx-btn--ghost { min-width: 223px; height: 56px; border-radius: 15.5px;
    background: #fff; border: 1px solid #E2E8F0; color: var(--lx-olive-dark); }

  /* ---- onboarding process ---- */
  .lx-section:has(.lx-steps) { background: #fff; padding-block: 48.5px 48px; }
  .lx-section:has(.lx-steps) .lx-section__head--center { margin-bottom: 35.4px; }
  .lx-section:has(.lx-steps) .lx-section__head--center h2 { font-size: 26px; font-weight: 800;
    line-height: 1.15; letter-spacing: 0; margin: 0; }
  .lx-steps { display: flex; flex-direction: column; gap: 0; }
  .lx-steps::before, .lx-steps::after { display: none; }
  .lx-step { text-align: center; display: flex; flex-direction: column; align-items: center;
    background: none; border: 0; padding: 0; }
  .lx-step + .lx-step { margin-top: 18px; }
  .lx-step__icon { width: 44px; height: 44px; border-radius: 22px; background: #EEEEEE;
    display: grid; place-items: center; margin: 0 0 18px; }
  .lx-step__icon strong { font-family: "Manrope", sans-serif; font-size: 18px; font-weight: 700;
    color: var(--lx-olive-dark); }
  .lx-step h3 { font-size: 18px; font-weight: 700; line-height: 1.15; margin: 0 0 12px; }
  .lx-step p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 22px; margin: 0; }

  /* ---- contact (home) ---- */
  .lx-section:has(.lx-contact2) { background: #FAFAFA; padding-block: 49.5px 48px; }
  .lx-contact2 { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .lx-contact2 > div, .lx-contact2__card, .lx-form, .lx-form-grid { display: contents; }
  .lx-contact2__card > h3, .lx-contact2 > div > p[style] { display: none; }
  .lx-contact2 .lx-eyebrow { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700;
    letter-spacing: 1.33px; text-transform: uppercase; color: var(--lx-olive); }
  .lx-contact2 h2 { font-size: 28px; font-weight: 800; line-height: 33.6px; letter-spacing: 0;
    margin: 14.1px 0 0 !important; }
  .lx-contact2 .lx-lead { font-family: "Inter", sans-serif; font-size: 14px; line-height: 20px;
    letter-spacing: 0; margin: 11.7px 0 0; }
  .lx-form-grid > div { order: 1; margin-top: 18.2px; display: flex; flex-direction: column; }
  .lx-form-grid > div:first-of-type { }
  .lx-contact2 label { font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 600;
    line-height: 1.15; letter-spacing: 0; text-transform: uppercase; color: var(--lx-ink); margin: 0 0 5.2px; }
  .lx-contact2 .lx-input { height: 42px; padding: 0 12px; border: 1px solid #EAEAEA;
    border-radius: 8px; background: #fff; font-family: "Inter", sans-serif; font-size: 14px; }
  /* the comp has no rule above the tick list */
  .lx-check { order: 2; list-style: none; padding: 0; margin: 25px 0 0; border-top: 0;
    display: flex; flex-direction: column; gap: 13px; }
  .lx-check li { display: flex; align-items: center; gap: 9px; line-height: 18px;
    font-family: "Inter", sans-serif; font-size: 14px; }
  .lx-check li svg { display: none; }
  .lx-check li::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px;
    border-radius: 4px; background: #708255 center / 11px 11px no-repeat;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E"); }
  .lx-form .lx-btn--block { order: 3; width: 100%; height: 52px; margin-top: 32.5px;
    border-radius: 26px; background: linear-gradient(90deg, #516238 0%, #697B4E 100%);
    color: #fff; font-size: 16px; font-weight: 700; justify-content: center; }
  .lx-form > p.text-muted { order: 4; font-family: "Inter", sans-serif; font-size: 12px !important;
    line-height: 16px; text-align: center; margin: 11.7px 0 0 !important; }
}

/* ---------------------------------------------------------------------------
   Desktop product cards: the comp puts the photo full-bleed on a plain white
   card - no tinted tile, no inset. Our #F9F9F9 panel with a 13px inset read as
   a box floating inside the card, and shrank the product by ~9%. The mobile
   comp DOES use an inset tile, so this is scoped to the desktop breakpoint.
   --------------------------------------------------------------------------- */
@media (min-width: 721px) {
  /* Read straight out of Products.svg: the card photo is a 254x254 SQUARE tile at
     x=384/694/1004, y=991/1590/2189, inside a card that spans 367.9-653.6 x 975-1399.
     That is a square inset 16px from the card's left, right and top - not full-bleed -
     and the pattern matrix (scale 0.000488281 on a 2048px image = 1.0000) shows the
     photo drawn at exactly 1:1 inside it, whole and uncropped. Badge sits 289.3 from
     the card top, so the tile needs 19.3 below it and the body already adds .8rem. */
  .lx-bcard { padding: 16px; }
  .lx-bcard__media {
    background: transparent;
    border-radius: 0;
    aspect-ratio: 1;
    margin: 0 0 6px;
  }
  .lx-bcard__media img { object-fit: contain; }
}

/* ============================================================================
   RTL — card order.

   Read off the Arabic comps (AR — Home / Products / Quality / About / Partner /
   Product Details, all Desktop) compared strip-for-strip against their English
   originals: the designer mirrored the page CHROME — nav, footer columns,
   breadcrumb, filter sidebar, hero text/image splits, section toolbars, the
   category tab strip, the explore CTA pair, label/value pairs — but left every
   CONTENT ROW in its English left-to-right order. Row 1 of the Home category
   grid reads "الشواحن الذكية" on the left and "الكابلات المميزة" on its right in
   the comp, exactly as "Smart Chargers / Premium Cables" do in English; the same
   holds for the 5 About pillars, the 5 Quality protections, the Partner benefit
   rows, the product grids and every related strip.

   A plain dir="rtl" grid does the opposite: it puts child 1 on the right. So
   these containers are flipped back to LTR flow, with each child restored to RTL
   so its own text still reads and aligns right.
   Containers deliberately NOT listed here are the mirrored ones above.
   ============================================================================ */
[dir="rtl"] .hx__pills,
[dir="rtl"] .hx__dots,
[dir="rtl"] .lx-cat5,
[dir="rtl"] .lx-grid--4,
[dir="rtl"] .lx-why__grid,
[dir="rtl"] .lx-steps,
[dir="rtl"] .lx-contact2,
[dir="rtl"] .lx-form-grid,
[dir="rtl"] .lx-pxhero__pills,
[dir="rtl"] .lx-pgrid,
[dir="rtl"] .lx-wgrid,
[dir="rtl"] .lx-perfgrid,
[dir="rtl"] .lx-contact__grid,
[dir="rtl"] .lx-pdthumbs,
[dir="rtl"] .lx-pdfeatgrid,
[dir="rtl"] .lx-specrow,
[dir="rtl"] .lx-pdcompat__row,
[dir="rtl"] .lx-pdcontrol__grid,
[dir="rtl"] .lx-relgrid,
[dir="rtl"] .lx-mv,
[dir="rtl"] .lx-pillars,
[dir="rtl"] .lx-infra__grid,
[dir="rtl"] .lx-qgrid4,
[dir="rtl"] .lx-qgrid3,
[dir="rtl"] .lx-qsafety__grid,
[dir="rtl"] .lx-qcatrow,
[dir="rtl"] .lx-whogrid,
[dir="rtl"] .lx-whygrid,
[dir="rtl"] .lx-ptcatgrid,
[dir="rtl"] .lx-benerow1,
[dir="rtl"] .lx-benerow2,
[dir="rtl"] .lx-ptsteps__grid,
[dir="rtl"] .lx-ptform__grid,
[dir="rtl"] .lx-footer__social { direction: ltr; }

[dir="rtl"] .hx__pills > *,
[dir="rtl"] .hx__dots > *,
[dir="rtl"] .lx-cat5 > *,
[dir="rtl"] .lx-grid--4 > *,
[dir="rtl"] .lx-why__grid > *,
[dir="rtl"] .lx-steps > *,
[dir="rtl"] .lx-contact2 > *,
[dir="rtl"] .lx-form-grid > *,
[dir="rtl"] .lx-pxhero__pills > *,
[dir="rtl"] .lx-pgrid > *,
[dir="rtl"] .lx-wgrid > *,
[dir="rtl"] .lx-perfgrid > *,
[dir="rtl"] .lx-contact__grid > *,
[dir="rtl"] .lx-pdthumbs > *,
[dir="rtl"] .lx-pdfeatgrid > *,
[dir="rtl"] .lx-specrow > *,
[dir="rtl"] .lx-pdcompat__row > *,
[dir="rtl"] .lx-pdcontrol__grid > *,
[dir="rtl"] .lx-relgrid > *,
[dir="rtl"] .lx-mv > *,
[dir="rtl"] .lx-pillars > *,
[dir="rtl"] .lx-infra__grid > *,
[dir="rtl"] .lx-qgrid4 > *,
[dir="rtl"] .lx-qgrid3 > *,
[dir="rtl"] .lx-qsafety__grid > *,
[dir="rtl"] .lx-qcatrow > *,
[dir="rtl"] .lx-whogrid > *,
[dir="rtl"] .lx-whygrid > *,
[dir="rtl"] .lx-ptcatgrid > *,
[dir="rtl"] .lx-benerow1 > *,
[dir="rtl"] .lx-benerow2 > *,
[dir="rtl"] .lx-ptsteps__grid > *,
[dir="rtl"] .lx-ptform__grid > *,
[dir="rtl"] .lx-footer__social > * { direction: rtl; }

/* ============================================================================
   RTL fixes from the Arabic desktop review — each value measured off the AR comp
   at 1280 and checked against the rendered page.
   ============================================================================ */

/* About hero: the English comp puts "Everyday Technology." in olive, the Arabic
   comp keeps the whole heading black. */
[dir="rtl"] .lx-abouthero h1 .accent { color: var(--lx-ink); }

/* Quote marks. They are placed with inset-inline-*, so RTL swapped them; the comp
   keeps 99 top-right and 66 bottom-left in both languages. Desktop only - the
   mobile comp drops the 66 and centres the 99, which the block below already does
   and which this must not override. */
@media (min-width: 721px) {
  [dir="rtl"] .lx-quote-deco--tr { inset-inline-end: auto; right: 6%; }
  [dir="rtl"] .lx-quote-deco--bl { inset-inline-start: auto; left: 6%; }
}

/* Partner steps: the connector belongs on the physical right of each card, i.e.
   between 1-2, 2-3 and 3-4. inset-inline-end put it on the left, which left a
   stub hanging off step 1 and no line between 3 and 4. */
[dir="rtl"] .lx-ptsteps__grid .lx-step:not(:last-child)::after { inset-inline-end: auto; right: -28px; }

/* Footer brand column: the comp puts the social icons under the copy on the right. */
[dir="rtl"] .lx-footer__social { justify-content: flex-end; }

/* --- line breaks -----------------------------------------------------------
   Arabic is more compact than English, so several blocks that wrap in the comp
   fit on one line here. Each cap below is the comp's own measured line width
   plus headroom, so the words fall on the same rows as the design. */

/* "اختبر جودة LIXIL عبر / المجموعة الكاملة" — comp breaks after عبر (line 1 = 415px) */
[dir="rtl"] .lx-qcta h2 { max-width: 480px; margin-left: auto; margin-right: auto; }

/* Quality "Tested for Everyday Use" lead — comp is 2 lines, line 1 = 468px */
[dir="rtl"] .lx-qtest .lx-qhead p { max-width: 520px; margin-left: auto; margin-right: auto; }

/* Olive pillars band — comp heading breaks after لتجربة (line 1 = 333px) */
[dir="rtl"] .lx-qpillars h2 { max-width: 380px; margin-left: auto; margin-right: auto; }

/* Partner hero lead — comp is 3 lines inside the X watermark, lines = 329/329/167 */
[dir="rtl"] .lx-pthero__sub { max-width: 340px; margin-left: auto; margin-right: auto; }

/* Partner "Why partner" lead — comp is 3 lines, line 1 = 298px */
[dir="rtl"] .lx-ptwhy__head p { max-width: 305px; }

/* Products stock CTA lead — comp is 2 lines, line 1 = 402px */
[dir="rtl"] .lx-stockcta__inner p { max-width: 420px; margin-left: auto; margin-right: auto; }

/* Olive pillars band: the comp gives it 481px of height in English and 477 in
   Arabic - roughly 150px of air above and below the text. Ours was 89.6. */
.lx-qpillars { padding-block: clamp(56px, 11.7vw, 150px); }

/* Device-compatibility heading on the product detail page. The comp sets it at
   ~25px in both languages (EN cap height 18px, and the Arabic ink is taller only
   because Figma's Latin tracking broke the Arabic joins - we keep them joined).
   The base rule had it at .95rem. */
.lx-pdcompat__eyebrow { font-size: 25px; }

/* "مختبر للاستخدام اليومي" sits right on top of its lead: the ي descender and the
   alef that opens the next line leave only 1px of ink between them, where the
   other three Quality heads get 12-13px and the comp gives this one 19px. The
   8px margin is fine everywhere else, so only this block is opened up. */
[dir="rtl"] .lx-qtest .lx-qhead h2 { margin-bottom: 26px; }

/* --- Mobile Home category cards in Arabic ------------------------------------
   The mobile card is hand-placed for LTR: copy on the left, product art pinned
   with a physical `right`, arrow bottom-left. In Arabic the copy right-aligns and
   lands straight on top of the art. There is no Arabic mobile comp, so this is
   the English layout mirrored: art left, copy right, arrow bottom-right. The art
   itself is only repositioned, never flipped. */
@media (max-width: 720px) {
  [dir="rtl"] .lx-ccard__body { padding: 24px 20px 0 0; }
  [dir="rtl"] .lx-ccard__body p { max-width: 190px; }
  [dir="rtl"] .lx-ccard__arrow { left: auto; right: 20px; }
  /* Mirrored as well as moved: each shot is composed leaning towards the copy, so
     on the left-hand side it reached back across the card. Flipping turns the
     plug, the braid and the power bank's lead away from the text. The rotated
     two keep their tilt, mirrored with them. */
  [dir="rtl"] .lx-ccard__img[src*="cat-"] { right: auto; }
  [dir="rtl"] .lx-ccard__img[src*="cat-chargers-"]    { left: 29px;    transform: scaleX(-1); }
  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"]      { left: 16.2px;  transform: scaleX(-1); }
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"] { left: 33.8px;  transform: scaleX(-1); }
  [dir="rtl"] .lx-ccard__img[src*="cat-earphones-"]   { left: 31.5px;  transform: scaleX(-1); }
  [dir="rtl"] .lx-ccard__img[src*="cat-car-charges-"] { left: 35.5px;  transform: scaleX(-1); }
}

/* The stats stack into a single column below 720px, so the inline-end rule that
   separates the four columns on desktop is left hanging beside each row - on the
   left in Arabic, on the right in English. The mobile comp has no such rule,
   only the band's own top and bottom lines. */
@media (max-width: 720px) {
  .lx-stats > div { border-inline-end: 0; }
}

/* "استكشف المجموعة الكاملة" is the one mobile heading Arabic makes too long: at
   26px it fills 98% of the container and reads as though it is touching the edge,
   where the others sit at 57-94%. English keeps 26px - its own line is what the
   mobile comp draws. Targeted through the tab strip, which only this section has. */
@media (max-width: 720px) {
  [dir="rtl"] .lx-section:has(.lx-tabs) .lx-section__head--center h2 { font-size: 24px; }
}

/* --- Mobile pull quote -------------------------------------------------------
   The mobile comp centres a single 99 and drops the 66 and keeps the little rule
   beside the attribution. You asked for the desktop arrangement instead: 99 in the
   top-right corner, 66 bottom-left under the attribution, and no rule. Physical
   left/right so both languages place them the same way. */
@media (max-width: 720px) {
  .lx-quote__line { display: none; }
  .lx-quote-deco--tr { display: block; top: 24px; inset-inline-end: auto; right: 5%;
    transform: none; width: 84px; }
  .lx-quote-deco--bl { display: block; bottom: 24px; inset-inline-start: auto; left: 5%;
    top: auto; transform: none; width: 84px; }
}

/* ============================================================================
   Testing round — September
   ============================================================================ */

/* --- In-page CTAs scroll rather than jump, and clear the sticky navbar. ----- */
#home-form, #products-form, #partner-form, #catalogue { scroll-margin-top: 96px; }
@media (max-width: 900px) { #home-form, #products-form, #partner-form, #catalogue { scroll-margin-top: 86px; } }

/* --- About: the attribution reads centred under the quote, like the quote. --- */
.lx-quote__who { text-align: center; }
@media (max-width: 720px) { .lx-quote__who { text-align: start; } }

/* --- Home hero (wide desktop only) ------------------------------------------
   The flat banner drew the product across the whole hero, so it ran behind the
   navbar and past the tag pills. Above 1440px the banner is swapped for its
   background-only plate and the product is drawn as its own layer, positioned
   against .hx so it can be anchored to the band between the bottom of the navbar
   and the top of the pills.

     band top    = 84px            (navbar height)
     band bottom = 88 + 51.4 + 78  (.hx padding-bottom + .hx__body padding-bottom
                                    + pill height), so band = 100% - 302px.

   Per slide the frame is scaled and offset so the product's OWN ink - not the
   1920x1080 frame it sits in - lands where you asked. The alpha bounding boxes
   are 1: y 327..964, 2: y 72..1075, 3: y 0..985, 4: y 225..1080.

     height = band * (1080 / inkHeight) * (share of the band the ink should fill)
     top    = 84px + band * (where the ink starts - inkTop/1080 * that height)   */
/* Off everywhere else: mobile and tablet keep the flat composite banner. */
.hx__product { display: none; }

@media (min-width: 1440px) {
  .hx__bgimg[src*="home-banner-1"] { content: url("/images/design/hero/home-bg-1.png"); }
  .hx__bgimg[src*="home-banner-2"] { content: url("/images/design/hero/home-bg-2.png"); }
  .hx__bgimg[src*="home-banner-3"] { content: url("/images/design/hero/home-bg-3.png"); }
  .hx__bgimg[src*="home-banner-4"] { content: url("/images/design/hero/home-bg-4.png"); }

  /* Offsets are measured in from the right of the viewport, which is also what
     the background plate is anchored to (cover / right centre) - so the product
     keeps its place against the plate as the window widens. */
  .hx__product { display: block; position: absolute; inset: auto 0 auto auto;
    width: auto; height: auto; max-width: none;
    object-fit: contain; object-position: right center; transform: none;
    z-index: 1; pointer-events: none; }

  /* Charger, cable and earphones are each 20% smaller than the sizes we settled
     on, and moved 150px (about 3cm on a laptop) further left. Scaling is about
     each product's own centre, so the charger stays over the vortex, the cable
     still starts on the navbar and the earphones still finish on the tags. */

  /* 1 - charger: back on the right, body centre on the point the flat banner
     drew it (right 146px puts it there at the smaller size). */
  .hx__product[src*="home-prod-1"] {
    height: calc((100% - 302px) * 1.0715);
    top: calc(84px + (100% - 302px) * 0.0669);
    inset-inline-end: auto; right: 146px; }

  /* 2 - power bank: 15% bigger, grown about its own body centre so it keeps the
     place in the band it already had, still centred between navbar and tags. */
  .hx__product[src*="home-prod-2"] {
    height: calc((100% - 302px) * 0.9760);
    top: calc(84px - (100% - 302px) * 0.0540);
    inset-inline-end: auto; right: 0px; }

  /* 3 - cable: as the source banner frames it - braid running off the right edge,
     both connectors in shot - but scaled so its ink exactly fills the band, top on
     the navbar and tail finishing on the tags. Ink is y 0..983 of 1080, hence
     1080/984 would fill the band exactly; 0.9878 is that less 10%. right:0 puts
     the ink's right edge on the viewport edge, which is where the banner cuts it
     (over-bleeding past that clipped the top connector). Both anchors survive the
     resize: the ink starts at the frame's top edge and ends at its right edge. */
  .hx__product[src*="home-prod-3"] {
    height: calc((100% - 302px) * 0.9878);
    top: 84px;
    inset-inline-end: auto; right: 0px; }

  /* 4 - earphones: bottom still finishing on the tags. */
  .hx__product[src*="home-prod-4"] {
    height: calc((100% - 302px) * 1.0106);
    top: calc(84px - (100% - 302px) * 0.0096);
    inset-inline-end: auto; right: 149px; }
}

/* --- Arabic desktop: the category tiles mirror with the page. ----------------
   Physical offsets so the art lands the same distance from the (now left) edge
   that the English keeps from the right. */
@media (min-width: 961px) {
  [dir="rtl"] .lx-ccard__img[src*="cat-chargers-"]    { right: auto; left: 26px;  transform: translateY(-50%) scaleX(-1); }
  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"]      { right: auto; left: -55px; transform: translateY(-50%) scaleX(-1); }
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"] { right: auto; left: 8px;   transform: scaleX(-1); }
  [dir="rtl"] .lx-ccard__img[src*="cat-earphones-"]   { right: auto; left: 22px;  transform: scaleX(-1); }
  [dir="rtl"] .lx-ccard__img[src*="cat-car-charges-"] { right: auto; left: 24px;  transform: translateY(-50%) scaleX(-1); }
}
@media (min-width: 721px) and (max-width: 960px) {
  [dir="rtl"] .lx-ccard__img[src*="cat-"] { right: auto; left: 14px; transform: translateY(-50%) scaleX(-1); }
}

/* --- Mobile Premium Cables tile: desktop artwork and orientation. ------------
   The mobile comp draws the cable stood on end; you asked for the desktop
   horizontal render instead, so the -m replacement is dropped and the tile
   uses cat-cables-v3.png at its own 251:223 ratio. */
@media (max-width: 720px) {
  /* Same size, dropped into the empty bottom of the tile and slid left so only 10px
     is cropped - 93% of the cable shows, against 86% before. It can sit that far
     left because the artwork is diagonal: its top-left corner is empty (no ink above
     source y 54 left of x 171), so the box overlaps the copy column without the
     cable ever touching the text. Fixed px, not percentages: the copy is capped at
     190px so its right edge is at 210px on every phone, and at 390 the cable's ink
     still starts at 306px. The cut-out art, not the comp's opaque plate - that one
     would white out the text it overhangs. */
  .lx-ccard__img[src*="cat-cables-"] { content: normal;
    right: -10px; top: 40px; width: 140px; height: 124px; transform: none; }
  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"] { right: auto; left: -10px; transform: scaleX(-1); }

  /* Copy column, same fix as the desktop tiles. A flat 190px was fine at 500px but
     left only 18px beside the earbud at 390 and overlapped it below ~370, because
     the art is pinned to the right edge while the text width was not: the gap is
     card - 323, so it shrinks as the phone does. Now the narrower of 190px and 48%
     of the column, so wide phones keep two lines and narrow ones take a third
     rather than running into the artwork. */
  .lx-ccard__body p,
  [dir="rtl"] .lx-ccard__body p { max-width: min(190px, 48%); }
}

/* --- Navigation progress bar (replaces the blank pause between pages). ------- */
#lx-progress { position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, #516238 0%, #8ea36a 100%);
  transform: scaleX(0); transform-origin: left center; opacity: 0;
  transition: transform .25s linear, opacity .2s ease; pointer-events: none; }
#lx-progress.on  { opacity: 1; transform: scaleX(.75); transition: transform 6s cubic-bezier(.05,.7,.2,1), opacity .1s ease; }
#lx-progress.off { opacity: 0; transform: scaleX(1); transition: transform .18s ease, opacity .35s ease .12s; }
[dir="rtl"] #lx-progress { transform-origin: right center; }

/* --- Reveal fade -------------------------------------------------------------
   .lx-bcard redefines `transition` (transform + box-shadow for the hover lift),
   which wipes out the opacity transition .reveal relies on - so product cards
   were snapping in rather than fading, most visibly when the collection tab
   changes and the whole grid is rebuilt. An animation cannot be clobbered by a
   transition shorthand, and it leaves the 0.2s hover lift alone. */
.reveal.is-visible { animation: lx-reveal-in .55s var(--lx-ease) both; }
@keyframes lx-reveal-in { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================================
   Home category tiles — rebuilt from Home.svg rather than eyeballed.
   ----------------------------------------------------------------------------
   The comp lays this band out as: content 1184 wide, top row 665 + 487 with a
   32px gutter (a 58/42 split, not 50/50), bottom row three at 373.333, every
   card 289–290 tall and a 24px row gap. Ours was 50/50 and only 208/230 tall,
   which is why no image placement could reproduce the design.

   The five images are replays of what the comp actually draws inside each card:
   the pattern image put through its <use> matrix, clipped to its art rect, the
   rect's own transform applied (the cables rect is mirrored, the car charger
   rotated 26.6°), then clipped to the card and cropped to the ink. Percentages
   below are that ink's box as a fraction of the comp card, so with the cards
   now at the comp's proportions they land exactly where the design puts them.
   Cables bleed off the right edge and power banks off the top because that is
   where the comp clips them.
   ============================================================================ */
@media (min-width: 961px) {
  .lx-cat5 { display: flex; flex-wrap: wrap; align-items: flex-start;
    column-gap: 2.703%; row-gap: 26px; }
  .lx-cat5 > * { grid-column: auto !important; }
  .lx-cat5 > *:nth-child(1)   { flex: 0 0 56.166%; aspect-ratio: 665 / 289; }
  .lx-cat5 > *:nth-child(2)   { flex: 0 0 41.132%; aspect-ratio: 487 / 290; }
  .lx-cat5 > *:nth-child(n+3) { flex: 0 0 31.532%; aspect-ratio: 373.333 / 289; }

  .lx-ccard__img[src*="cat-"] {
    position: absolute; top: auto; bottom: auto; left: auto;
    width: auto; height: auto; max-width: none; max-height: none;
    object-fit: contain; object-position: right top; transform: none; }

  .lx-ccard__img[src*="cat-chargers-"]    { content: url("/images/design/cat-chargers-d.png");
    right: 4.211%;  top: 21.799%; height: 67.128%; }
  /* The comp's cables plate is opaque on white; the card is #fff and clips to its
     own radius, so it drops in exactly as drawn - no cut-out, no keying halo. */
  .lx-ccard__img[src*="cat-cables-"]      { content: url("/images/design/cat-cables-d.png");
    right: 0;       top:  2.069%; height: 95.517%; }
  .lx-ccard__img[src*="cat-power-banks-"] { content: url("/images/design/cat-power-banks-d.png");
    right: 1.428%;  top:  0;      height: 94.464%; }
  .lx-ccard__img[src*="cat-earphones-"]   { content: url("/images/design/cat-earphones-d.png");
    right: 6.250%;  top: 23.875%; height: 76.125%; }
  .lx-ccard__img[src*="cat-car-charges-"] { content: url("/images/design/cat-car-charges-d.png");
    right: 4.911%;  top: 17.993%; height: 69.204%; }

  /* Copy column widths, also taken from the comp: the design gives each card a
     narrower text block than we did, which is why "accessories" was running into
     the earbud. Percentages are the comp's paragraph width over the card's content
     box (card - 64px padding), which is what max-width on a flex item resolves
     against. Three lines is what the design does on four of the five. */
  .lx-cat5 > *:nth-child(1) .lx-ccard__body { max-width: 40.8%; }
  .lx-cat5 > *:nth-child(2) .lx-ccard__body { max-width: 49.6%; }
  .lx-cat5 > *:nth-child(3) .lx-ccard__body { max-width: 49.5%; }
  .lx-cat5 > *:nth-child(4) .lx-ccard__body { max-width: 36.2%; }
  .lx-cat5 > *:nth-child(5) .lx-ccard__body { max-width: 49.1%; }
  .lx-ccard__body p { max-width: 100%; }

  /* Arabic mirrors the band, so the same distances are measured from the left. */
  [dir="rtl"] .lx-ccard__img[src*="cat-"] { right: auto; transform: scaleX(-1); }
  [dir="rtl"] .lx-ccard__img[src*="cat-chargers-"]    { left: 4.211%; }
  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"]      { left: 0; }
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"] { left: 1.428%; }
  [dir="rtl"] .lx-ccard__img[src*="cat-earphones-"]   { left: 6.250%; }
  [dir="rtl"] .lx-ccard__img[src*="cat-car-charges-"] { left: 4.911%; }
}

/* --- Mobile home hero: product centred in the banner card --------------------
   The flat banner frames each product to the right (that is where the desktop
   hero needs it), so in the mobile 16:9 card it sat off to one side. Same split
   as the desktop hero: the card shows the background-only plate and the product
   is drawn as its own layer over it, shifted so its ink centre lands on the card
   centre. Offsets are (960,540) minus each PNG's own alpha-bbox centre, as a
   fraction of the 1920x1080 frame - and since the layer covers the card exactly,
   a translate in % of the element is the same distance in frame pixels.
     1: 965..1819 / 328..933    2: 1074..1711 / 175..1051
     3: 1056..1919 / 0..983     4: 1110..1572 / 226..1079                      */
@media (max-width: 720px) {
  .hx__bgimg[src*="home-banner-1"] { content: url("/images/design/hero/home-bg-1.png"); }
  .hx__bgimg[src*="home-banner-2"] { content: url("/images/design/hero/home-bg-2.png"); }
  .hx__bgimg[src*="home-banner-3"] { content: url("/images/design/hero/home-bg-3.png"); }
  .hx__bgimg[src*="home-banner-4"] { content: url("/images/design/hero/home-bg-4.png"); }

  .hx__product { display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: contain; object-position: center; z-index: 2; pointer-events: none; }
  .hx__product[src*="home-prod-1"] { transform: translate(-22.50%,  -8.38%); }
  .hx__product[src*="home-prod-2"] { transform: translate(-22.53%,  -6.76%); }
  .hx__product[src*="home-prod-3"] { transform: translate(-27.47%,   4.49%); }
  .hx__product[src*="home-prod-4"] { transform: translate(-19.84%, -10.42%); }
}

/* --- Mobile Retail Bestsellers / collection tiles ----------------------------
   The mobile Home comp draws these photo tiles as 305x305 SQUARES (x=44 in a 393
   page, i.e. inset 20px in a 345 card), with the photo laid in at 1:1 across the
   tile's width. The product itself only fills 48-78% of that - the white margin
   is part of the shot. Ours was a 4:3 tile with object-fit:cover, which cropped
   those margins away and blew the product up to fill the frame. Square tile, and
   anchored to the top so the one portrait source (896x1200, drawn 305x408) crops
   at the bottom the way the comp crops it.                                     */
@media (max-width: 720px) {
  .lx-grid--4 .lx-bcard__media { aspect-ratio: 1; }
  .lx-grid--4 .lx-bcard__media img { object-fit: cover; object-position: center top; }
}

/* --- About pull quote: equal gap above the 99 and below the 66 ---------------
   Desktop and tablet were already symmetric - the section's padding is equal top
   and bottom, so the text sits on the centre line and marks placed the same
   distance from each edge give the same gap (measured: 0.0px difference at both
   1470 and 900).

   Mobile was not. The section pads 53/56.4 but the blockquote also carries a 67px
   top margin, so the text had 120px above it and 56.4 below - pushing it 31.8px
   below centre and making the gaps differ by 63.6px. The margin is folded into
   the padding here: same total space (176.4px), same section height, text now
   centred, so the 24px marks land 6.6px clear at both ends.                    */
@media (max-width: 720px) {
  .lx-quote-section.lx-section { padding-block: 88.2px; }
  .lx-quote blockquote { margin-top: 0; }
}

/* --- Mobile category tiles: power bank off the top corner, earphones off the
   bottom. Both PNGs' ink fills their bounds edge to edge (checked: zero
   transparent margin), so the box offsets below are the bleed you actually see.
   Arabic takes the same distances from the left, mirrored.                     */
@media (max-width: 720px) {
  /* Power bank: dropped from -24 to -8 so the top is only just kissed rather than
     chopped, still 18px off the side corner. */
  /* This plate is edge-to-edge product: the power bank and its cable touch all
     four sides of the crop (checked at every threshold), so these offsets move the
     product itself, not a margin. right:4px clears the side entirely - nothing
     chopped - while top:0 puts the cable exactly on the card's top edge, reaching
     it without cutting it. */
  .lx-ccard__img[src*="cat-power-banks-"] { right: 4px; top: 0; }
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"] { right: auto; left: 4px; }

  /* Earphones: taller again (109.5 -> 125 -> 138, width follows the 0.744 ratio)
     with the top moved up to match, so the 14px bottom bleed never changes. */
  .lx-ccard__img[src*="cat-earphones-"] { top: 56px; width: 103px; height: 138px; }
}

/* --- Mobile home hero: the two supplied assets, and the earphones on the floor
   home-prod-3-v2.png is a cut-out (91% transparent) whose ink runs to the frame's
   top edge (y 0) and right edge (x 1919), so with the layer covering the card and
   no translate it reaches the card's top and right by construction - the centring
   translate is dropped for that slide only.
   home-bg-1-v2.jpg is 2384x1080, wider than the 16:9 card, so it is covered and
   centred: the vortex keeps its place and the crop comes off the sides.
   The earphones keep their horizontal centring but lose the vertical one - their
   ink ends at y 1079 of 1080, so a zero Y translate puts it on the card floor.  */
@media (max-width: 720px) {
  .hx__bgimg[src*="home-banner-1"] { content: url("/images/design/hero/home-bg-1-v2.jpg");
    object-fit: cover; object-position: center; }
  .hx__product[src*="home-prod-3"] { content: url("/images/design/hero/home-prod-3-v2.png");
    transform: none; }
  .hx__product[src*="home-prod-4"] { transform: translate(-19.84%, 0); }
}

/* --- Mobile home hero, corrected -------------------------------------------
   The card is aspect-ratio 393/280 (1.404), not 16:9 - so a 1920x1080 layer set
   to inset:0 + object-fit:contain was being LETTERBOXED: painted 500x281 inside
   a 356-tall box, with 37px dead bars top and bottom. That is why the earphones
   could not reach the floor and the cable could not reach the ceiling, however
   the offsets were set: the painted image simply stopped short of the box.

   No object-fit gymnastics here. The layer is given the image's own aspect
   (width in % of the card, height auto), so the element IS the painted image,
   and then it is positioned by its ink:
     1: x 965..1819 y 328..933    2: x 1074..1711 y 175..1051
     3: x 897..1919 y 0..983      4: x 1110..1572 y 226..1079   (of 1920x1080)
   1 and 2 stay centred; 3 puts ink on the top and right edges; 4 is scaled to
   128.4% so it is bigger again and its ink lands on the card floor.          */
@media (max-width: 720px) {
  .hx__product { display: block; position: absolute; inset: auto; top: 0; left: 0;
    width: 100%; height: auto; max-width: none;
    object-fit: contain; transform: none; z-index: 2; pointer-events: none; }

  /* transform:none has to be repeated per slide - the earlier centring rules are
     class+attribute, so they outrank a bare .hx__product reset and their translate
     would otherwise be added on top of these offsets. */
  /* -22.50% centred the alpha bbox, but that box includes the charger's soft
     shadow, which runs 167px further right than the body (ink 965..1819, solid
     966..1652). Centring the SOLID body instead - what the eye reads as the
     product - moves it 4.32% of the card to the right. */
  .hx__product[src*="home-prod-1"] { left: -18.18%; top:  3.88%; transform: none; }
  .hx__product[src*="home-prod-2"] { left: -22.52%; top:  5.17%; transform: none; }
  .hx__product[src*="home-prod-3"] { content: url("/images/design/hero/home-prod-3-v2.png");
    left: 0; top: 0; transform: none; }
  .hx__product[src*="home-prod-4"] { width: 128.4%; left: -39.68%; top: -1.35%; transform: none; }
}

/* --- Products hero: the supplied flat banner on mobile and tablet ------------
   Both assets are 1920x1080 with the headline already set into the artwork, so
   the composed hero (background plate + two product layers + the overlaid
   pictitle) is replaced by the single image and those parts are switched off.
   The mobile card was aspect-ratio 342/256.5 (4:3); a 16:9 image covered into
   that would lose a quarter of its width and clip the headline, so the card
   takes the artwork's own 16:9. Applied up to 900px, which is where the hero
   stops being a stacked card and becomes the full-bleed desktop composition. */
@media (max-width: 900px) {
  .lx-pxhero__pic { aspect-ratio: 16 / 9; }
  .lx-pxhero__bg { content: url("/images/design/hero/px-hero-m-en.jpg");
    object-fit: cover; object-position: center; }
  [dir="rtl"] .lx-pxhero__bg { content: url("/images/design/hero/px-hero-m-ar.jpg"); }
  .lx-pxhero__layer, .lx-pxhero__pictitle { display: none !important; }
}

/* =====================================================================
   Mobile feedback round - Sept
   ===================================================================== */

/* --- 8. Drop the three background words (Home "Why Choose LIXIL?" and
       the Quality page pillars) in every language and at every width. --- */
.lx-why__wm,
.lx-qpillars__wm { display: none !important; }

/* --- 1 + 2. Product photography was painted with object-fit:cover, which
       crops a portrait shot to the box and scales what is left up. Show the
       whole product instead, at a size that leaves the card room to breathe. --- */
@media (max-width: 720px) {
  .lx-pgrid .lx-bcard__media img,
  .lx-grid--4 .lx-bcard__media img,
  .lx-relgrid .lx-bcard__media img {
    object-fit: contain;
    object-position: center center;
    padding: 10px;
  }
  .lx-pdgallery__main img {
    object-fit: contain;
    object-position: center center;
    padding: 16px;
  }
}

/* --- 5. Product detail spec rows: full width, centred, label above value,
       with a clear gap between each set. --- */
@media (max-width: 720px) {
  .lx-pdstats { display: block; width: 100%; text-align: center; }
  .lx-pdstats > * {
    display: block; width: 100%;
    text-align: center;
    padding-block: 2px;
  }
  .lx-pdstats > * + * { margin-top: 16px; }
  .lx-pdstat__label,
  [dir="rtl"] .lx-pdstat__label { text-align: center; display: block; width: 100%; }
  .lx-pdstat__value,
  [dir="rtl"] .lx-pdstat__value { text-align: center; display: block; width: 100%; margin-top: 3px; }
}

/* --- 6. Home hero: charger and cable a little larger. Each grows about its
       own visual centre, so the charger stays centred and the cable keeps
       bleeding off the top and right edges. --- */
@media (max-width: 720px) {
  .hx__product[src*="home-prod-1"] { transform: scale(1.10); transform-origin: 68.18% 48.52%; }
  .hx__product[src*="home-prod-3"] { transform: scale(1.10); transform-origin: 100% 0%; }
}

/* Contained photos sit on their own white ground, so the card well is white
   too - otherwise the image paints a visible rectangle inside a grey box. */
@media (max-width: 720px) {
  .lx-pgrid .lx-bcard__media,
  .lx-grid--4 .lx-bcard__media,
  .lx-relgrid .lx-bcard__media,
  .lx-pdgallery__main { background: #fff; }
}

/* --- 7. Small phones (<= 374px): the category tiles keep fixed 180px height
       while the copy column is a percentage, so below ~370px the paragraph
       slid under the product cut-out. Shrink the art about its own right edge
       (which preserves each tile's bleed) and give the copy a hard cap
       measured from that footprint, so text and image can never meet. --- */
@media (max-width: 374px) {
  .lx-ccard__img[src*="cat-"] { transform: scale(.78); transform-origin: 100% 50%; }
  .lx-ccard__img[src*="cat-power-banks-"] { transform-origin: 100% 0%; }
  .lx-ccard__img[src*="cat-earphones-"]   { transform-origin: 100% 100%; }
  [dir="rtl"] .lx-ccard__img[src*="cat-"] { transform: scaleX(-1) scale(.78); transform-origin: 0% 50%; }
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"] { transform-origin: 0% 0%; }
  [dir="rtl"] .lx-ccard__img[src*="cat-earphones-"]   { transform-origin: 0% 100%; }

  .lx-ccard__body { padding: 20px 0 0 18px; }
  [dir="rtl"] .lx-ccard__body { padding: 20px 18px 0 0; }
  .lx-ccard__body h3 { font-size: 16px; margin-bottom: 8px; }
  .lx-ccard__body h3,
  .lx-ccard__body p,
  [dir="rtl"] .lx-ccard__body h3,
  [dir="rtl"] .lx-ccard__body p { max-width: calc(100% - 145px); }
  .lx-ccard__body p { font-size: 12px; line-height: 1.3; }
}

/* Let the tile grow on small phones so the wrapped copy never runs into the
   arrow, and keep room reserved for that arrow at the bottom. */
@media (max-width: 374px) {
  .lx-ccard { height: auto; min-height: 180px; padding-bottom: 64px; }
}

/* --- 7. Products grid: the filter rail appears above 1000px at the same
       moment the grid goes from two columns to three, so cards collapsed
       from 421px wide at 1000px to 173px at 1024px and the product names
       were clamped mid-word. Let the column count follow the space that is
       actually available instead of a fixed count. --- */
@media (min-width: 1001px) {
  .lx-pgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
/* Above the desktop breakpoint the comp is a three-up grid - hold it there
   rather than letting auto-fill find a fourth column. */
@media (min-width: 1440px) {
  .lx-pgrid { grid-template-columns: repeat(3, 1fr); }
}

/* --- 7. Tablet band (961-1199px). The five-tile category layout uses the
       proportions measured off the 1440 comp - fixed flex widths and fixed
       aspect ratios. At tablet width those tiles become short and their copy
       columns narrow, so the paragraphs wrapped into the artwork and the
       Power Banks tile clipped its last line. Below 1200px fall back to the
       simple two-up layout that already works under 960px. --- */
@media (min-width: 961px) and (max-width: 1199px) {
  .lx-cat5 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; column-gap: 24px; row-gap: 24px; }
  .lx-cat5 > * { flex: none !important; grid-column: auto !important; aspect-ratio: auto !important; }
  .lx-cat5 > *:nth-child(5) { grid-column: span 2 !important; }

  .lx-ccard { min-height: 210px; height: auto; }
  .lx-cat5 > *:nth-child(1) .lx-ccard__body,
  .lx-cat5 > *:nth-child(2) .lx-ccard__body,
  .lx-cat5 > *:nth-child(3) .lx-ccard__body,
  .lx-cat5 > *:nth-child(4) .lx-ccard__body,
  .lx-cat5 > *:nth-child(5) .lx-ccard__body { max-width: 54%; }
  .lx-ccard__body p { max-width: 100%; }

  .lx-ccard__img[src*="cat-"] {
    position: absolute; right: 18px; left: auto; top: 50%; bottom: auto;
    width: auto; height: auto; max-width: 38%; max-height: 80%;
    object-fit: contain; object-position: right center;
    transform: translateY(-50%);
  }
  [dir="rtl"] .lx-ccard__img[src*="cat-"] {
    right: auto; left: 18px; transform: translateY(-50%) scaleX(-1);
  }
}

/* Desktop: the Premium Cables tile is the one card whose copy column reaches
   into the artwork (the cable plate is wide and bleeds to the right edge).
   Pull that one column in so the paragraph always clears the cable tip. */
@media (min-width: 1200px) {
  .lx-cat5 > *:nth-child(2) .lx-ccard__body { max-width: 33%; }
  .lx-cat5 > *:nth-child(3) .lx-ccard__body { max-width: 42%; }
}

/* --- 4. Wordmark as vector. The header and footer marks were 72x47px PNGs
       drawn at 46x30, so a 3x phone was asking for roughly twice the pixels
       the file had - hence the pixelation on zoom. These SVGs are the same
       shapes the design file draws (traced from the comp: the bars, the two
       upper wings, and the two lower wings with their dark-to-olive
       gradient), so the mark is now resolution independent. Swapped through
       content: url() so no markup change is needed. --- */
img[src*="lixil-logo.png"]       { content: url("/images/lixil-logo.svg"); }
img[src*="lixil-logo-white.png"] { content: url("/images/lixil-logo-white.svg"); }
/* The footer mark carries the class on the <img> itself, so the existing
   ".lx-footer .lx-logo--white img" descendant rule never matched it and the
   size came from the PNG's own pixel dimensions. Size it explicitly, at the
   46px the comp draws it. */
img.lx-logo--white { height: 46px; width: auto; display: block; filter: none; }

/* --- Mobile Premium Cables tile: pull the cable into the top-right corner and
       run it larger. It was sitting at top:40px in a 180px tile with 16px below,
       so the corner above it read as dead space. Now anchored at the top edge
       and scaled from 140x124 to 162x144 (the art's own 251:223 ratio), still
       hanging 14px past the right edge so the braid bleeds off the card.
       The box reaches left of the copy column, but the artwork is diagonal -
       its top-left is empty, ink starts at 61% of the width across the top
       three tenths - so the cable itself never meets the text. --- */
@media (max-width: 720px) {
  .lx-ccard__img[src*="cat-cables-"] {
    right: -14px; top: 0; width: 162px; height: 144px; transform: none;
  }
  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"] {
    right: auto; left: -14px; transform: scaleX(-1);
  }
}
/* Small phones keep the 0.78 shrink, but anchored to the top-right corner
   rather than the right edge midpoint, so the cable stays in the corner. */
/* Small phones shrink the cable too, but by setting the box directly rather
   than with a scale transform: in RTL the tile also carries scaleX(-1), and
   composing a mirror and a scale around one origin drags the art off the card.
   Sizing the box keeps the 14px bleed exact in both directions. */
@media (max-width: 374px) {
  .lx-ccard__img[src*="cat-cables-"] {
    width: 126px; height: 112px; transform: none; transform-origin: 50% 50%;
  }
  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"] {
    width: 126px; height: 112px; transform: scaleX(-1); transform-origin: 50% 50%;
  }
}

/* --- Premium Cables tile, wider framing. The tile art (cat-cables-v3.png) is
       a tight crop: the braid is cut off barely past the connectors, so the
       tile read as two plugs rather than a cable. cat-cables-m2.png is the
       same shot keyed out of the 2048px photo embedded in the comp, keeping
       the photo's own framing - a long diagonal braid run with the plugs
       small - and mirrored to the tile's direction. Its ink is flush to the
       right edge (99.9%) with an empty 11% band on the left, so the cable
       still bleeds off the card while the copy column stays clear. --- */
@media (max-width: 720px) {
  .lx-ccard__img[src*="cat-cables-"] {
    content: url("/images/design/cat-cables-m2.png");
    right: -4px; top: 4px; width: 168px; height: 132px; transform: none;
  }
  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"] {
    right: auto; left: -4px; transform: scaleX(-1);
  }
}
@media (max-width: 374px) {
  .lx-ccard__img[src*="cat-cables-"] { width: 146px; height: 115px; transform: none; transform-origin: 50% 50%; }
  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"] { width: 146px; height: 115px; transform: scaleX(-1); transform-origin: 50% 50%; }
}

/* --- Category tiles, mobile: the other four products were drawn at the sizes
       taken from the comp while the cable tile has since grown, so they read
       small against their cards. Scaled up to sit in proportion, each keeping
       its own anchor - the power bank still meets the top edge, the earphones
       still run off the bottom - and each held clear of the copy column, which
       ends at 177px on a 327px card. --- */
@media (max-width: 720px) {
  .lx-ccard__img[src*="cat-chargers-"]    { right: 10px; top: 52px;  width: 131px; height: 88px;  transform: none; }
  .lx-ccard__img[src*="cat-power-banks-"] { right: 2px;  top: 0;     width: 114px; height: 166px; transform: none; }
  .lx-ccard__img[src*="cat-earphones-"]   { right: 16px; top: 40px;  width: 124px; height: 165px; transform: none; }
  .lx-ccard__img[src*="cat-car-charges-"] { right: 18px; top: 20px;  width: 105px; height: 140px; transform: none; }

  [dir="rtl"] .lx-ccard__img[src*="cat-chargers-"]    { right: auto; left: 10px; transform: scaleX(-1); }
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"] { right: auto; left: 2px;  transform: scaleX(-1); }
  [dir="rtl"] .lx-ccard__img[src*="cat-earphones-"]   { right: auto; left: 16px; transform: scaleX(-1); }
  [dir="rtl"] .lx-ccard__img[src*="cat-car-charges-"] { right: auto; left: 18px; transform: scaleX(-1); }
}
/* Small phones: same proportions, 20% down, set as explicit boxes rather than
   a scale transform so the RTL mirror stays a plain scaleX(-1) and the right
   (or left) offsets hold exactly. */
@media (max-width: 374px) {
  .lx-ccard__img[src*="cat-chargers-"]    { width: 105px; height: 70px;  top: 56px; transform: none; transform-origin: 50% 50%; }
  .lx-ccard__img[src*="cat-power-banks-"] { width: 91px;  height: 133px; top: 0;    transform: none; transform-origin: 50% 50%; }
  .lx-ccard__img[src*="cat-earphones-"]   { width: 99px;  height: 132px; top: 56px; transform: none; transform-origin: 50% 50%; }
  .lx-ccard__img[src*="cat-car-charges-"] { width: 84px;  height: 112px; top: 30px; transform: none; transform-origin: 50% 50%; }

  [dir="rtl"] .lx-ccard__img[src*="cat-chargers-"]    { width: 105px; height: 70px;  transform: scaleX(-1); transform-origin: 50% 50%; }
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"] { width: 91px;  height: 133px; transform: scaleX(-1); transform-origin: 50% 50%; }
  [dir="rtl"] .lx-ccard__img[src*="cat-earphones-"]   { width: 99px;  height: 132px; transform: scaleX(-1); transform-origin: 50% 50%; }
  [dir="rtl"] .lx-ccard__img[src*="cat-car-charges-"] { width: 84px;  height: 112px; transform: scaleX(-1); transform-origin: 50% 50%; }
}
/* Tablet portrait (721-960px) sizes the tile art by intrinsic pixels capped at
   34%/72%, which leaves the flatter products - the charger especially - small
   against a 277px-tall card. Raise the caps; the copy column is 56%, so there
   is room. */
@media (min-width: 721px) and (max-width: 960px) {
  .lx-ccard__img[src*="cat-"] { max-width: 40%; max-height: 86%; }
}
/* The narrow end of that band has the least room, so ease the caps back there. */
@media (min-width: 721px) and (max-width: 815px) {
  .lx-ccard__img[src*="cat-"] { max-width: 36%; max-height: 80%; }
}

/* =====================================================================
   Arabic tiles: mirror the layout, not the product.
   The AR desktop comp settles this. In Home.svg the cables tile is drawn
   with transform="matrix(-1 0 0 1 1232 909)" - a horizontal flip - while
   AR - Home - Desktop.svg draws the same pattern at x="745" with no
   transform at all. Every other tile matches: same artwork, moved to the
   other side, never flipped. So the product photography keeps its own
   orientation in Arabic and only its position mirrors, which also stops
   the lixil branding and the printed wattages reading backwards.

   The cable is the one that needs a second file rather than just dropping
   the flip: cat-cables-m2.png was keyed with the flip baked in so its ink
   sits flush right (for the LTR bleed). The -rtl file is the same key
   without the flip, ink flush left, so the Arabic tile still bleeds off
   its own edge.
   ===================================================================== */

/* Phones */
@media (max-width: 720px) {
  [dir="rtl"] .lx-ccard__img[src*="cat-chargers-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-earphones-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-car-charges-"] { transform: none; }

  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"] {
    content: url("/images/design/cat-cables-m2-rtl.png");
    transform: none;
  }
}
@media (max-width: 374px) {
  [dir="rtl"] .lx-ccard__img[src*="cat-chargers-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-earphones-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-car-charges-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"] { transform: none; }
}

/* Tablet portrait - these keep the vertical centring, only the flip goes */
@media (min-width: 721px) and (max-width: 960px) {
  [dir="rtl"] .lx-ccard__img[src*="cat-"] { transform: translateY(-50%); }
  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"] { content: url("/images/design/cat-cables-d-rtl.png"); }
}

/* Tablet landscape band */
@media (min-width: 961px) and (max-width: 1199px) {
  [dir="rtl"] .lx-ccard__img[src*="cat-"] { transform: translateY(-50%); }
  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"] { content: url("/images/design/cat-cables-d-rtl.png"); }
}

/* Desktop */
@media (min-width: 1200px) {
  [dir="rtl"] .lx-ccard__img[src*="cat-"] { transform: none; }
  [dir="rtl"] .lx-ccard__img[src*="cat-cables-"] { content: url("/images/design/cat-cables-d-rtl.png"); }
}

/* --- Arabic: mirror the charger, power bank and car charger after all. -------
   The AR comp draws these unflipped, and unflipped is what keeps their printed
   branding readable - but in the mirrored tile the products then face away from
   the copy, so you asked for them flipped. That is what these rules do. The
   cable and the earphones are left alone: the cable already reads mirrored in
   Arabic because it uses the opposite-handed key (cat-cables-m2-rtl.png), and
   the earphones carry no printed text. The flip is composed with whatever
   vertical transform that breakpoint already relies on. --- */
@media (max-width: 720px) {
  [dir="rtl"] .lx-ccard__img[src*="cat-chargers-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-car-charges-"] { transform: scaleX(-1); transform-origin: 50% 50%; }
}
@media (max-width: 374px) {
  [dir="rtl"] .lx-ccard__img[src*="cat-chargers-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-car-charges-"] { transform: scaleX(-1); transform-origin: 50% 50%; }
}
@media (min-width: 721px) and (max-width: 960px) {
  [dir="rtl"] .lx-ccard__img[src*="cat-chargers-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-car-charges-"] { transform: translateY(-50%) scaleX(-1); }
}
@media (min-width: 961px) and (max-width: 1199px) {
  [dir="rtl"] .lx-ccard__img[src*="cat-chargers-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-car-charges-"] { transform: translateY(-50%) scaleX(-1); }
}
@media (min-width: 1200px) {
  [dir="rtl"] .lx-ccard__img[src*="cat-chargers-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-power-banks-"],
  [dir="rtl"] .lx-ccard__img[src*="cat-car-charges-"] { transform: scaleX(-1); transform-origin: 50% 50%; }
}

/* --- Product cards on mobile: kill the dead side bands. The home grids are
       already square wells (.lx-grid--4 is aspect-ratio 1), which is why they
       look right; the products page and the related-products strip were left
       at 4/3. Our product shots are square (1016x1016) or portrait
       (1152x1308), so a landscape well letterboxed them - at 390px the image
       painted 194px wide inside a 285px well, leaving 91px of empty margin.
       Square wells bring that down to about 20px without cropping anything. */
@media (max-width: 720px) {
  .lx-pgrid .lx-bcard__media,
  .lx-relgrid .lx-bcard__media { aspect-ratio: 1; }
  .lx-pgrid .lx-bcard__media img,
  .lx-relgrid .lx-bcard__media img { padding: 6px; }
}

/* --- "Explore the Full Collection" overflows on mobile: the centred section
       headings carry white-space: nowrap, so at 26px this one painted 336px
       inside a 327px column and ran past the card edge. Let these headings
       wrap, and take this one down to 24px so it still holds one line on a
       390px phone. --- */
@media (max-width: 720px) {
  .lx-section__head--center h2 { white-space: normal; overflow-wrap: break-word; }
  .lx-section:has(.lx-tabs) .lx-section__head--center h2 { font-size: 24px; white-space: normal; }
}

/* --- Stroke-drawn icons were being shaved. SVG defaults to overflow:hidden,
       so anything painted outside the viewBox is clipped - and these icons are
       drawn on a 24x24 grid with stroke-width 2 and geometry that reaches the
       edge, which puts half the stroke (1 unit) outside the box on every side.
       At an 18px render that flattens 0.75px off each edge, and up to 2px on
       one of the control-card icons, which reads as a border cutting across
       the glyph. Only the stroke-drawn set is opened up: the icons carry
       stroke="currentColor", while the comp-extracted ones are fill-only with
       deliberately tight viewBoxes that must keep clipping. --- */
svg[stroke]:not([stroke="none"]) { overflow: visible; }

/* --- 1. Partnership Benefits: drop the rotated corner stripe. It is in the
       comp (a 256px square rotated 45deg with a 32px white border, tucked off
       the top-left) but the client no longer wants it. --- */
.lx-ptbenefits__x { display: none !important; }

/* --- 2. The WhatsApp button is position:fixed, but it was scrolling with the
       page because it sits inside .lx-contact2__card.reveal, and .reveal
       carries "will-change: opacity, transform". will-change on transform
       creates a containing block for fixed descendants exactly as a real
       transform does, so "fixed" was resolving against the card instead of
       the viewport. Neutralise that on the button's ancestors only. --- */
*:has(.lx-wa) {
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
  perspective: none !important;
}

/* --- Products page, "Engineered for Performance" on mobile: the icon floats to
       the inline start (left in English, right in Arabic) but the heading was
       cleared with a physical "margin: 0 0 0 49px". In Arabic that puts the
       49px on the left, away from the icon, so the text ran straight into it.
       Use the logical property so the offset follows the float. --- */
@media (max-width: 720px) {
  .lx-perfitem h3 { margin: 0; margin-inline-start: 49px; }
}