/* ============================================================
   HAIL HOUSE — Global Stylesheet
   Design: 1512px canvas, DINPro typography, #151515 / white
   ============================================================ */

/* ── Fonts ── */
/* Add DINPro .woff2/.woff files to assets/fonts/ to activate */
@font-face { font-family:'DINPro'; src:url('../fonts/DINPro-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'DINPro'; src:url('../fonts/DINPro-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'DINPro'; src:url('../fonts/DINPro-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'DINPro'; src:url('../fonts/DINPro-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ── Variables ── */
:root {
  --c-black:   #151515;
  --c-white:   #ffffff;
  --c-gray-lg: #e9e9e9;
  --c-gray-md: #d9d9d9;
  --c-gray-ow: #fcfcf8;
  --c-gray-tx: #5e5d5d;
  --c-gray-lt: #d1d1d1;
  --c-gray-dk: #555555;
  --c-glass:   rgba(158,123,91,0.16);
  --c-glass-b: rgba(255,255,255,0.43);

  --font:      'DINPro','Helvetica Neue',Helvetica,Arial,sans-serif;

  --nav-h:     55px;
  --nav-top:   25px;
  --r-nav:     53.5px;
  --r-card:    20px;
  --r-card-lg: 31px;
  --r-btn:     70px;

  --pad-x: clamp(24px, 5vw, 74px);
  --max-w: 1429px;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font); color:var(--c-black); background:var(--c-white); overflow-x:hidden; }
img  { display:block; max-width:100%; }
a    { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:var(--font); }
ul,ol { list-style:none; }

/* ── Utility ── */
.container {
  width:100%;
  max-width:calc(var(--max-w) + var(--pad-x)*2);
  margin:0 auto;
  padding:0 var(--pad-x);
}
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ================================================================
   NAVIGATION
   ================================================================ */
.navbar {
  position:fixed;
  top:var(--nav-top);
  left:0; right:0;
  z-index:1000;
  display:flex;
  justify-content:center;
  pointer-events:none;
  padding:0 var(--pad-x);
}
.navbar__inner {
  pointer-events:all;
  background:#fff;
  border-radius:var(--r-nav);
  height:var(--nav-h);
  width:100%;
  max-width:var(--max-w);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px 0 24px;
  box-shadow:0 4px 24px rgba(0,0,0,0.08);
}
.navbar__logo { height:30px; width:auto; object-fit:contain; }
.navbar__links {
  display:flex;
  align-items:center;
  gap:20px;
}
.navbar__link {
  font-size:14px;
  font-weight:700;
  color:#000;
  white-space:nowrap;
  transition:opacity 0.2s;
}
.navbar__link:hover { opacity:0.6; }
.navbar__link.active { border-bottom:2px solid #000; padding-bottom:1px; }
.navbar__icon-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  padding:2px;
  cursor:pointer;
}
.navbar__icon { width:24px; height:auto; object-fit:contain; }

/* Hamburger */
.navbar__hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:4px;
}
.navbar__hamburger span {
  display:block;
  width:22px;
  height:2px;
  background:#000;
  transition:transform 0.3s, opacity 0.3s;
  border-radius:2px;
}
.navbar__hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.navbar__hamburger.open span:nth-child(2) { opacity:0; }
.navbar__hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.navbar__mobile-menu {
  display:none;
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:#fff;
  z-index:999;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
}
.navbar__mobile-menu.open { display:flex; }
.navbar__mobile-menu .navbar__link { font-size:22px; }
.navbar__mobile-lang {
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:20px;
  letter-spacing:1px;
  color:#000;
  padding:6px 14px;
  white-space:nowrap;
}

/* ================================================================
   ARROW / ICON UTILITIES  (replaces broken Figma PNG arrows)
   ================================================================ */

/* Generic inline SVG arrow wrapper */
.ic-arrow {
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  pointer-events:none;
}

/* Circular slider navigation button (prev / next) */
.slider-circle-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:74px;
  height:74px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.45);
  background:rgba(0,0,0,0.12);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  flex-shrink:0;
  transition:background 0.25s, border-color 0.25s;
}
.gallery-slider__btn:hover .slider-circle-btn {
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.7);
}

/* Dark circle slider button (for white bg sections) */
.slider-circle-btn--dark {
  border-color:rgba(0,0,0,0.25);
  background:rgba(0,0,0,0.06);
}
.gallery-slider__btn:hover .slider-circle-btn--dark {
  background:rgba(0,0,0,0.14);
  border-color:rgba(0,0,0,0.5);
}

/* Product detail slider next-arrow */
.product-detail__slider-next {
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.5);
  background:rgba(0,0,0,0.12);
  transition:background 0.2s;
  z-index:2;
}
.product-detail__slider-next:hover { background:rgba(0,0,0,0.25); }

/* Chevron used in filter items and dropdowns */
.ic-chevron {
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  pointer-events:none;
  transition:transform 0.2s;
}
.filter-item.open .ic-chevron { transform:rotate(180deg); }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  background:#000;
  color:#fff;
  padding:0;
  position:relative;
}
.footer__inner {
  max-width:1512px;
  margin:0 auto;
  padding:40px 98px 0;
  position:relative;
}
.footer__top {
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  column-gap:clamp(40px,6vw,120px);
  row-gap:18px;
  padding-bottom:30px;
  align-items:start;
}
.footer__brand { grid-column:1; grid-row:1 / span 2; align-self:start; }
.footer__est {
  font-size:13px;
  font-weight:700;
  letter-spacing:1.04px;
  margin-bottom:12px;
}
.footer__logo { height:39px; width:auto; margin-bottom:12px; filter:invert(1) brightness(2); }
.footer__tagline { font-size:12px; letter-spacing:0.36px; line-height:1.5; color:#ccc; }
.footer__nav {
  grid-column:2;
  grid-row:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  gap:6px;
}
.footer__info { grid-column:2; grid-row:2; display:flex; flex-direction:column; gap:6px; }
.footer__nav-link {
  font-size:14px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#fff;
  transition:opacity 0.2s;
}
.footer__nav-link:hover { opacity:0.7; }
.footer__info-head { font-size:14px; font-weight:700; }
.footer__info-sub { font-size:13px; color:#ccc; line-height:1.5; }
.footer__divider {
  border:none;
  border-top:1px solid rgba(255,255,255,0.25);
  margin:0 0 20px;
}
.footer__bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding-bottom:22px;
}
.footer__copyright { font-size:15px; font-weight:700; }
.footer__legal { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.footer__legal-link { font-size:15px; font-weight:700; transition:opacity 0.2s; }
.footer__legal-link:hover { opacity:0.7; }
.footer__legal-dot {
  width:7px; height:7px;
  background:#fff;
  border-radius:50%;
  flex-shrink:0;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--c-black);
  color:#fff;
  border-radius:var(--r-btn);
  height:40px;
  padding:0 28px;
  font-size:16px;
  font-weight:400;
  letter-spacing:0.5px;
  transition:opacity 0.2s;
  cursor:pointer;
  border:none;
  font-family:var(--font);
}
.btn-pill:hover { opacity:0.85; }
.btn-pill--sm {
  height:31px;
  padding:0 18px;
  font-size:10px;
  border-radius:3px;
}
.btn-outline-white {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0.6px solid #fff;
  border-radius:5px;
  color:#fff;
  font-size:13px;
  padding:3px 8px;
  height:21px;
  letter-spacing:0.3px;
  transition:background 0.2s;
  cursor:pointer;
  background:transparent;
  font-family:var(--font);
}
.btn-outline-white:hover { background:rgba(255,255,255,0.1); }
.btn-tag {
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid currentColor;
  border-radius:32.5px;
  padding:7px 20px;
  font-size:11px;
  letter-spacing:1.1px;
  height:30px;
  cursor:pointer;
  font-family:var(--font);
  font-weight:400;
  background:transparent;
  transition:opacity 0.2s;
}
.btn-tag:hover { opacity:0.7; }
.btn-tag__dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.btn-go-back {
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  font-size:16px;
  letter-spacing:1.12px;
  color:#000;
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--font);
  transition:opacity 0.2s;
}
.btn-go-back:hover { opacity:0.6; }
.btn-go-back::after {
  content:'';
  display:block;
  height:1px;
  background:#000;
  width:100%;
}

/* ================================================================
   NAV SPACING (page content starts below fixed nav)
   ================================================================ */
.page-offset { padding-top:calc(var(--nav-h) + var(--nav-top) + 10px); }


/* ================================================================
   GALLERY / HOME PAGE
   ================================================================ */

/* Hero */
.hero {
  position:relative;
  height:100vh;
  min-height:600px;
  overflow:hidden;
}
.hero__bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.hero__overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 100%);
}
.hero__card {
  position:absolute;
  left:clamp(20px, 3vw, 41px);
  bottom:clamp(80px, 12vh, 140px);
  width:clamp(280px, 30vw, 412px);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:var(--c-glass);
  border:1px solid var(--c-glass-b);
  border-radius:27px;
  padding:22px 22px 18px;
}
.hero__card-text {
  font-size:clamp(13px, 1.1vw, 17px);
  font-weight:400;
  color:#fff;
  line-height:1.5;
  text-align:justify;
  margin-bottom:16px;
}
.hero__card-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--c-black);
  color:#fff;
  border-radius:3px;
  height:31px;
  padding:0 14px;
  font-size:10px;
  cursor:pointer;
}
.hero__card-btn-arrow { height:8px; width:auto; }

.hero__locations-tag {
  position:absolute;
  right:clamp(20px, 3vw, 50px);
  bottom:clamp(70px, 10vh, 120px);
}
.hero__locations-tag .btn-outline-white { font-size:13px; letter-spacing:0.3px; }

/* Intro bar */
.intro-bar {
  background:var(--c-black);
  padding:20px var(--pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.intro-bar__text {
  font-size:clamp(14px, 1.6vw, 24px);
  font-weight:400;
  color:#fff;
  flex:1;
}

/* Gallery slider */
.gallery-slider { background:#fff; padding:clamp(30px, 4vw, 60px) 0; position:relative; overflow:hidden; }
.gallery-slider__track {
  display:flex;
  gap:16px;
  padding:0 var(--pad-x);
  transition:transform 0.4s ease;
}
.gallery-slider__item {
  flex-shrink:0;
  width:clamp(220px, 28vw, 420px);
  height:clamp(280px, 38vw, 578px);
  border-radius:var(--r-card);
  overflow:hidden;
  cursor:pointer;
}
.gallery-slider__item img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.5s ease;
}
.gallery-slider__item:hover img { transform:scale(1.03); }
.gallery-slider__btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.gallery-slider__btn--prev { left:clamp(4px, 1vw, 16px); }
.gallery-slider__btn--next { right:clamp(4px, 1vw, 16px); }
.gallery-slider__btn img { width:74px; height:74px; }

/* Space of Perfection */
.space-section {
  background:#fff;
  padding:clamp(40px, 5vw, 80px) var(--pad-x);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px, 4vw, 60px);
  align-items:center;
}
.space-section__tag {
  font-size:16px;
  font-weight:500;
  letter-spacing:0.5px;
  margin-bottom:10px;
  color:var(--c-black);
}
.space-section__heading {
  font-size:clamp(22px, 2.5vw, 32px);
  font-weight:700;
  color:var(--c-black);
  margin-bottom:18px;
}
.space-section__text {
  font-size:clamp(15px, 1.5vw, 22px);
  font-weight:400;
  color:var(--c-black);
  text-align:justify;
  line-height:1.5;
  margin-bottom:28px;
}
.space-section__img {
  border-radius:21px;
  overflow:hidden;
  height:clamp(280px, 26vw, 402px);
}
.space-section__img img { width:100%; height:100%; object-fit:cover; }

/* Versatility Section */
.versatility { background:var(--c-black); padding:clamp(40px, 5vw, 80px) var(--pad-x); }
.versatility__header { display:flex; flex-direction:column; gap:14px; max-width:520px; margin-bottom:clamp(30px, 4vw, 60px); }
.versatility__eyebrow { font-size:16px; font-weight:700; color:#fff; }
.versatility__heading { font-size:clamp(22px, 2.5vw, 36px); font-weight:700; color:#fff; }
.versatility__desc { font-size:clamp(14px, 1.4vw, 20px); color:#fff; text-align:justify; line-height:1.5; }
.versatility__scroll-wrap {
  position:relative;
}
.versatility__btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.versatility__btn--prev { left:clamp(4px, 1vw, 14px); }
.versatility__btn--next { right:clamp(4px, 1vw, 14px); }
.versatility__btn:hover .slider-circle-btn {
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.7);
}
.versatility__grid {
  display:flex;
  flex-direction:row;
  gap:clamp(10px, 1.5vw, 22px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:4px;
}
.versatility__grid::-webkit-scrollbar { display:none; }
.mat-card {
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  flex-shrink:0;
  width:clamp(220px, 26vw, 340px);
  height:clamp(260px, 30vw, 431px);
  scroll-snap-align:start;
  cursor:pointer;
}
.mat-card img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.mat-card:hover img { transform:scale(1.04); }
.mat-card__info {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:0 16px 22px;
  background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}
.mat-card__name { font-size:clamp(16px, 1.6vw, 24px); font-weight:500; color:#fff; margin-bottom:10px; }
.mat-card__link {
  display:inline-block;
  font-size:12px;
  font-weight:500;
  color:#fff;
  letter-spacing:1.4px;
  text-transform:uppercase;
  border-bottom:1px solid #fff;
  padding-bottom:2px;
}

/* Full-width image grid */
.img-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  height:clamp(300px, 40vw, 773px);
}
.img-grid__item { overflow:hidden; }
.img-grid__item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.img-grid__item:hover img { transform:scale(1.03); }

/* H&B Section */
.hb-section {
  background:#fff;
  padding:clamp(40px, 5vw, 80px) var(--pad-x);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px, 4vw, 60px);
  align-items:center;
}
.hb-section__card {
  background:var(--c-black);
  border-radius:21px;
  overflow:hidden;
  height:clamp(260px, 24vw, 325px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.hb-section__card img { height:100%; width:100%; object-fit:cover; display:block; }
.hb-section__content { display:flex; flex-direction:column; gap:18px; }
.hb-section__heading { font-size:clamp(20px, 2.5vw, 32px); font-weight:700; }
.hb-section__text { font-size:clamp(14px, 1.5vw, 23px); text-align:justify; line-height:1.5; }

/* ================================================================
   ABOUT PAGE
   ================================================================ */

/* Dark hero — Figma: text/image row + stats row inside hero */
.about-hero {
  background:var(--c-black);
  padding:clamp(100px,10vw,180px) var(--pad-x) clamp(40px,5vw,75px);
  display:grid;
  grid-template-columns:minmax(0,469fr) minmax(0,582fr);
  grid-template-rows:auto auto;
  column-gap:clamp(30px,4vw,60px);
  row-gap:clamp(30px,4vw,57px);
  align-items:flex-start;
}
.about-hero__left { display:flex; flex-direction:column; gap:20px; padding-top:20px; grid-column:1; grid-row:1; }
.about-hero__tag { border:1px solid rgba(255,255,255,0.6); border-radius:32.5px; display:inline-flex; align-items:center; gap:5px; padding:7px 20px; font-size:11px; color:#fff; letter-spacing:1.1px; width:fit-content; }
.about-hero__tag-dot { width:5px; height:5px; background:#fff; border-radius:50%; }
.about-hero__heading { font-size:clamp(20px,2.5vw,32px); font-weight:500; color:#fff; letter-spacing:3.2px; }
.about-hero__text { font-size:clamp(14px,1.4vw,20px); color:var(--c-gray-lt); text-align:justify; line-height:1.6; }
.about-hero__img { border-radius:0; overflow:hidden; height:clamp(280px,30vw,469px); grid-column:2; grid-row:1; }
.about-hero__img img { width:100%; height:100%; object-fit:cover; }

/* Stats bar — sits inside dark hero (Figma: y=498 within 750-tall hero) */
.stats-bar {
  background:var(--c-black);
  display:flex;
  align-items:center;
  gap:clamp(20px,1.6vw,23px);
  flex-wrap:wrap;
}
.about-hero__stats {
  grid-column:1 / -1;
  grid-row:2;
  max-width:none;
  padding:0;
  flex-wrap:nowrap;
  gap:clamp(16px,2.2vw,32px);
}
.about-hero__stats .stat__label { white-space:nowrap; }
.stat { display:flex; flex-direction:column; gap:8px; }
.stat__number { font-size:clamp(28px,3vw,40px); font-weight:500; color:#fff; }
.stat__label { font-size:clamp(14px,1.4vw,20px); font-weight:400; color:#fff; }
.stat-divider { width:1px; height:clamp(50px,5vw,80px); background:rgba(255,255,255,0.4); flex-shrink:0; }

/* Partner logos */
.partners {
  background:#fff;
  padding:clamp(20px,2.4vw,40px) 0;
  border-bottom:1px solid #eee;
  display:flex;
  flex-direction:column;
  gap:clamp(14px,1.6vw,28px);
  overflow:hidden;
}
.partners-marquee {
  width:100%;
  overflow:hidden;
  position:relative;
  /* soft edge fade */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.partners-marquee__track {
  display:flex;
  align-items:center;
  gap:clamp(36px,5vw,72px);
  width:max-content;
  animation:partners-scroll 35s linear infinite;
  will-change:transform;
}
.partners-marquee__track--slow {
  animation-duration:48s;
}
@keyframes partners-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-marquee__track { animation:none; }
}
.partners__logo {
  height:clamp(32px,3.8vw,56px);
  width:auto;
  object-fit:contain;
  flex-shrink:0;
  filter:grayscale(100%);
  opacity:0.75;
  transition:opacity 0.2s, filter 0.2s;
}
.partners__logo:hover { opacity:1; filter:none; }

/* Foundation section — Figma: heading on left, 2-col capabilities on right */
.foundation {
  background:var(--c-black);
  padding:clamp(40px,5vw,80px) var(--pad-x);
  display:grid;
  grid-template-columns:minmax(0,469fr) minmax(0,646fr);
  column-gap:clamp(30px,4vw,68px);
  align-items:flex-start;
}
.foundation__head { display:flex; flex-direction:column; }
.foundation__tag { display:inline-flex; align-items:center; gap:5px; border:1px solid rgba(255,255,255,0.6); border-radius:32.5px; padding:7px 20px; font-size:11px; color:#fff; letter-spacing:1.1px; margin-bottom:20px; width:fit-content; }
.foundation__tag-dot { width:5px; height:5px; background:#fff; border-radius:50%; }
.foundation__heading { font-size:clamp(18px,2vw,32px); font-weight:400; color:#fff; letter-spacing:-0.64px; }
.capabilities {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,51px);
}
.capabilities__col { display:flex; flex-direction:column; gap:clamp(18px,2vw,27px); }
.cap-item { display:flex; flex-direction:column; gap:12px; }
.cap-item__label { font-size:clamp(14px,1.4vw,20px); font-weight:300; color:#fff; letter-spacing:-0.4px; padding-left:8px; }
.cap-item__bar {
  position:relative;
  height:2px;
  background:rgba(255,255,255,0.18);
  border-radius:2px;
  width:100%;
  overflow:hidden;
}
.cap-item__bar::after {
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cap-item.is-visible .cap-item__bar::after { transform:scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .cap-item__bar::after { transition:none; }
  .cap-item.is-visible .cap-item__bar::after { transform:scaleX(1); }
}

/* Proven execution */
.proven {
  background:#fff;
  padding:clamp(40px,5vw,80px) var(--pad-x);
}
.proven__header { margin-bottom:clamp(24px,3vw,48px); max-width:789px; }
.proven__tag { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--c-black); border-radius:32.5px; padding:7px 20px; font-size:11px; letter-spacing:1.1px; margin-bottom:16px; }
.proven__tag-dot { width:5px; height:5px; background:var(--c-black); border-radius:50%; }
.proven__heading { font-size:clamp(28px,3.5vw,50px); font-weight:500; letter-spacing:-1px; line-height:1; margin-bottom:14px; }
.proven__desc { font-size:clamp(13px,1.2vw,19px); color:var(--c-gray-dk); letter-spacing:-0.38px; }
.proven__gallery {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px,1.5vw,24px);
}
.proven__gallery--4 { grid-template-columns:repeat(4, 1fr); }

/* Horizontal-scroll variant (Versatility-style arrows) */
.proven__scroll-wrap { position:relative; }
.proven__btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.proven__btn--prev { left:clamp(4px, 1vw, 14px); }
.proven__btn--next { right:clamp(4px, 1vw, 14px); }
.proven__btn:hover .slider-circle-btn { background:rgba(0,0,0,0.14); border-color:rgba(0,0,0,0.5); }
.proven__gallery--scroll {
  display:flex;
  flex-direction:row;
  gap:clamp(12px, 1.5vw, 24px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  grid-template-columns:none;
  padding-bottom:4px;
}
.proven__gallery--scroll::-webkit-scrollbar { display:none; }
.proven__gallery--scroll .proven__img-wrap {
  flex-shrink:0;
  width:clamp(240px, 24vw, 380px);
  height:clamp(340px, 32vw, 520px);
  scroll-snap-align:start;
}

.proven__img-wrap { position:relative; display:block; border-radius:var(--r-card-lg); overflow:hidden; height:clamp(380px,45vw,720px); text-decoration:none; }
.proven__img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.proven__img-wrap:hover img { transform:scale(1.03); }
.proven__img-wrap::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:55%;
  background:linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0) 100%);
  opacity:0; transition:opacity 0.35s ease; pointer-events:none;
}
.proven__img-wrap:hover::after { opacity:1; }
.proven__label {
  position:absolute; left:20px; right:20px; bottom:20px;
  color:#fff; font-family:var(--font); font-size:clamp(13px,1vw,15px);
  font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  transform:translateY(8px); opacity:0; transition:transform 0.35s ease, opacity 0.35s ease;
  pointer-events:none; z-index:1;
}
.proven__img-wrap:hover .proven__label { transform:translateY(0); opacity:1; }

/* Our Presence */
.presence {
  background:var(--c-black);
  padding:clamp(40px,5vw,80px) var(--pad-x);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,100px);
  align-items:flex-start;
}
.presence__left { }
.presence__tag { display:inline-flex; align-items:center; gap:5px; border:1px solid rgba(255,255,255,0.6); border-radius:32.5px; padding:7px 20px; font-size:11px; color:#fff; letter-spacing:1.1px; margin-bottom:20px; }
.presence__tag-dot { width:5px; height:5px; background:#fff; border-radius:50%; }
.presence__heading { font-size:clamp(28px,3vw,50px); font-weight:500; color:#fff; letter-spacing:-1px; margin-bottom:20px; }
.presence__text { font-size:clamp(13px,1.2vw,16px); color:var(--c-gray-lt); text-align:justify; line-height:1.6; letter-spacing:-0.32px; }
.presence__locations { display:flex; flex-direction:column; justify-content:flex-end; }
.location-item {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-bottom:clamp(16px,2.5vw,49px);
}
.location-item__name { font-size:clamp(16px,1.8vw,24px); color:#fff; font-weight:400; letter-spacing:-0.48px; }
.location-item__divider { height:1px; background:rgba(255,255,255,0.3); width:100%; }
.location-item__hint {
  position:absolute; top:0; right:0;
  font-size:10px; letter-spacing:0.6px;
  color:rgba(255,255,255,0.45);
  opacity:0; transform:translateY(-2px);
  transition:opacity 0.25s ease, transform 0.25s ease;
  pointer-events:none;
}
.location-item:hover .location-item__hint,
.location-item:focus-visible .location-item__hint { opacity:1; transform:translateY(0); }
[dir="rtl"] .location-item__hint { right:auto; left:0; }
@media (max-width:768px) {
  .location-item__hint {
    position:static; opacity:1; transform:none;
    display:block; font-size:10px;
    margin-bottom:6px; color:rgba(255,255,255,0.45);
  }
}

/* ================================================================
   COLLECTIONS PAGE
   ================================================================ */
.collections-hero {
  height:clamp(240px,26vw,373px);
  overflow:hidden;
  position:relative;
}
.collections-hero img { width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.collections-hero__overlay { position:absolute; inset:0; background:rgba(0,0,0,0.3); }

.collections-main {
  background:#f4f0eb;
  min-height:60vh;
  display:grid;
  grid-template-columns:260px 1fr;
}

/* Filter sidebar */
.filter-sidebar {
  background:#151515;
  padding:clamp(16px,2vw,24px) clamp(14px,2vw,24px);
  min-height:100%;
}
.filter-sidebar__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.filter-sidebar__title { font-size:14px; font-weight:700; color:rgba(255,255,255,0.4); margin:0; }
.filter-sidebar__close {
  display:none;                       /* hidden on desktop — drawer mode only */
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:none;
  padding:0;
  transition:background 0.18s;
}
.filter-sidebar__close:hover { background:rgba(255,255,255,0.16); }
.filter-sidebar__divider { height:1px; background:rgba(255,255,255,0.1); margin-bottom:14px; }
.filter-sidebar .ic-chevron path { stroke:rgba(255,255,255,0.45); }
.filter-group {
  margin:0;
  padding:6px 0 14px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.filter-group:last-of-type { border-bottom:none; }
.filter-group--bordered {
  border-left:1.5px dashed rgba(120,70,210,0.55);
  border-right:1.5px dashed rgba(120,70,210,0.55);
}
.filter-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 14px;
  cursor:pointer;
  border-bottom:none;
}
.filter-item__label { font-size:13px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:0.3px; }
.filter-item__arrow { width:10px; height:auto; object-fit:contain; }

/* Top filter bar — Figma: dropdowns right-aligned (COLOR / SIZE) */
.filter-topbar {
  background:#f4f0eb;
  padding:14px clamp(20px,2vw,32px);
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.filter-topbar > .filter-toggle-btn { order:1; }
.filter-topbar > #filter-search       { order:2; }
.filter-topbar > .color-dropdown-wrap { order:3; margin-left:0; }
.filter-topbar > #size-picker-btn     { order:4; }
.filter-topbar > #products-count      { order:5; margin-left:auto; }
.filter-topbar__dropdown {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--c-gray-lg);
  border-radius:9px;
  height:38px;
  padding:0 14px;
  min-width:220px;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  color:var(--c-black);
  letter-spacing:0.52px;
}
.filter-topbar__dropdown img { width:10px; height:auto; }

/* Product grid */
.products-area { padding:clamp(16px,2vw,30px) clamp(16px,2vw,28px); }
.products-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(10px,1.5vw,20px);
}
.product-card {
  position:relative;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:359/450;
  background:var(--c-gray-md);
}
.product-card img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.product-card:hover img { transform:scale(1.04); }

/* "+N colors" badge for grouped colour-variant cards (Accessories / Sanitary).
   Anchored top-left so it doesn't collide with the favourite heart at top-right. */
.product-card__variants {
  position:absolute;
  top:10px;
  left:10px;
  z-index:3;
  background:rgba(255,255,255,0.92);
  color:#151515;
  font-family:var(--font);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.4px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:20px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  pointer-events:none;
}
[dir="rtl"] .product-card__variants { left:auto; right:10px; }
[dir="rtl"] .pcard-save { right:auto; left:10px; }

/* Wood look + Sanitary Ware / Adhesive & Grout / Accessories: show the full product
   with whitespace around it (object-fit:contain on a clean background) so finely-
   detailed shots don't get cropped or appear pixelated when zoomed.
   Note: data-size carries the "system" string for non-tile products. */
.product-card[data-look*="Wood"]               img,
.product-card[data-look*="Special Finishes"]   img,
.product-card[data-size*="Sanitary"]           img,
.product-card[data-size*="Adhesive"]           img,
.product-card[data-size*="Accessories"]        img {
  object-fit:contain;
  background:#fff;
  padding:8%;
}
.product-card[data-look*="Wood"]:hover           img,
.product-card[data-look*="Special Finishes"]:hover img,
.product-card[data-size*="Sanitary"]:hover       img,
.product-card[data-size*="Adhesive"]:hover       img,
.product-card[data-size*="Accessories"]:hover    img {
  transform:scale(1.02);
}
.product-card__label {
  position:absolute;
  bottom:clamp(6px,1vw,16px);
  left:clamp(6px,1vw,16px);
  right:clamp(6px,1vw,16px);
  background:var(--c-gray-ow);
  border-radius:10px;
  padding:8px 14px;
  font-size:12px;
  font-weight:700;
  color:#000;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Pagination — Figma: single rounded pill bar (492×76) with vertical dividers */
.pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  margin:clamp(24px,3vw,48px) 0;
  padding:0 20px;
}
.pagination__inner {
  display:inline-flex;
  align-items:stretch;
  gap:0;
  background:#fff;
  border:1px solid #d8d3ce;
  border-radius:26px;
  overflow:hidden;
  height:48px;
  padding:0;
}
.pagination__btn {
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:100%;
  padding:0 16px;
  border:none;
  border-radius:0;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.3px;
  color:#333;
  background:transparent;
  font-family:var(--font);
  cursor:pointer;
  transition:background 0.18s;
  white-space:nowrap;
}
.pagination__btn:hover { background:#f0ece7; }
.pagination__btn[disabled] { opacity:0.35; cursor:default; pointer-events:none; }
.pagination__divider {
  display:block;
  width:1px;
  background:#d8d3ce;
  align-self:stretch;
  flex-shrink:0;
}
.pagination__page {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:100%;
  border-radius:0;
  font-size:13px;
  font-weight:500;
  color:#666;
  cursor:pointer;
  transition:background 0.18s,color 0.18s;
  font-family:var(--font);
}
.pagination__page:hover { background:rgba(0,0,0,0.05); color:#222; }
.pagination__page.active {
  background:#151515;
  color:#fff;
  font-weight:700;
  cursor:default;
}

/* ================================================================
   PRODUCT DETAIL PAGE
   ================================================================ */
.product-detail {
  padding:clamp(100px,10vw,160px) var(--pad-x) clamp(40px,5vw,80px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,4vw,80px);
  align-items:flex-start;
  min-height:70vh;
}
.product-detail__slider {
  position:relative;
  border-radius:0;
  overflow:hidden;
  height:clamp(300px,35vw,510px);
  background:var(--c-gray-md);
}
.product-detail__slider img { width:100%; height:100%; object-fit:cover; }
.product-detail__dots {
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}
.product-detail__dot {
  height:3px;
  border-radius:2px;
  background:#fff;
  cursor:pointer;
  transition:width 0.3s;
}
.product-detail__dot.active { width:38px; opacity:1; }
.product-detail__dot:not(.active) { width:38px; opacity:0.4; }
.product-detail__info { display:flex; flex-direction:column; gap:0; padding-top:clamp(30px,4vw,60px); }
.product-detail__title { font-size:clamp(18px,2vw,32px); font-weight:500; letter-spacing:2.24px; margin-bottom:6px; }
.product-detail__location { font-size:clamp(14px,1.5vw,23px); font-weight:500; color:#bebebe; letter-spacing:1.38px; margin-bottom:20px; }
.product-detail__divider { height:1px; background:rgba(0,0,0,0.15); margin-bottom:20px; }
.product-detail__desc { font-size:clamp(12px,1vw,15px); font-weight:500; text-align:justify; line-height:1.6; margin-bottom:30px; }
.product-detail__meta { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.product-detail__meta-head { font-size:15px; font-weight:700; }
.product-detail__meta-val { font-size:15px; font-weight:500; }
.product-detail__back { margin-top:30px; }

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-page {
  min-height:calc(100vh - var(--nav-h) - var(--nav-top));
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
}
.contact-page__img {
  position:relative;
  overflow:hidden;
  min-height:500px;
}
.contact-page__img img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.contact-page__form-col {
  background:#151515;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(60px,7vw,100px) clamp(40px,6vw,80px);
  padding-top:calc(var(--nav-h) + var(--nav-top) + clamp(40px,4vw,60px));
}
.contact-page__heading {
  font-size:clamp(28px,4vw,52px);
  font-weight:700;
  color:#fff;
  letter-spacing:1px;
  line-height:1;
  margin-bottom:16px;
  text-transform:uppercase;
}
.contact-page__subtext {
  font-size:clamp(13px,1.1vw,15px);
  color:rgba(255,255,255,0.5);
  line-height:1.7;
  margin-bottom:34px;
  max-width:360px;
}
/* Contact form */
.contact-form { display:flex; flex-direction:column; gap:12px; }
.contact-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-input,
.form-textarea {
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:3px;
  color:#fff;
  font-family:var(--font);
  font-size:14px;
  padding:13px 16px;
  outline:none;
  transition:border-color 0.2s;
  width:100%;
}
.form-input:focus,
.form-textarea:focus { border-color:rgba(255,255,255,0.45); }
.form-input::placeholder,
.form-textarea::placeholder { color:rgba(255,255,255,0.35); }
.form-textarea { resize:vertical; min-height:130px; }
.form-submit {
  align-self:flex-start;
  background:rgba(255,255,255,0.1);
  color:#fff;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:3px;
  height:38px;
  padding:0 22px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.8px;
  cursor:pointer;
  font-family:var(--font);
  transition:background 0.2s,border-color 0.2s;
  margin-top:6px;
}
.form-submit:hover { background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.35); }

/* ================================================================
   SKELETON LOADING PLACEHOLDERS
   ================================================================ */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.product-card--skeleton {
  pointer-events:none;
  cursor:default;
}
.skeleton-img {
  width:100%;
  aspect-ratio:359/450;
  border-radius:8px;
  background:linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 50%, #e8e8e8 75%);
  background-size:600px 100%;
  animation:shimmer 1.4s infinite linear;
}
.skeleton-label {
  height:14px;
  width:70%;
  margin:12px 10px;
  border-radius:4px;
  background:linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 50%, #e8e8e8 75%);
  background-size:600px 100%;
  animation:shimmer 1.4s infinite linear;
}

/* ================================================================
   FILTER SIDEBAR — ACTIVE STATES & ACCORDION
   ================================================================ */
.filter-sidebar {
  transition:width 0.3s;
}
.filter-item {
  cursor:pointer;
  transition:background 0.15s;
  border-radius:0;
  padding:13px 14px;
}
.filter-item:hover { background:rgba(255,255,255,0.04); }
.filter-item.active-filter { background:rgba(255,255,255,0.07); }
.filter-accordion {
  overflow:hidden;
  max-height:0;
  transition:max-height 0.3s ease;
}
.filter-accordion.open { max-height:700px; }
.filter-accordion > div { padding:0 14px 10px; }
.filter-option {
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 0;
  font-size:13px;
  font-weight:400;
  color:rgba(255,255,255,0.4);
  cursor:pointer;
  border-radius:0;
  transition:color 0.15s;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.filter-option:hover { color:rgba(255,255,255,0.75); background:none; }
.filter-option.selected { background:none; font-weight:700; color:#fff; }
.filter-option input[type=checkbox] {
  accent-color:#fff;
  cursor:pointer;
  flex-shrink:0;
  width:15px;
  height:15px;
}
/* Custom color dropdown (top bar) */
.color-dropdown-wrap { position:relative; display:inline-block; }
.color-dropdown-btn {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--c-gray-lg);
  border:1px solid rgba(0,0,0,0.12);
  border-radius:9px;
  height:38px;
  padding:0 14px;
  min-width:220px;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  color:var(--c-black);
  letter-spacing:0.52px;
  font-family:var(--font);
  outline:none;
  white-space:nowrap;
  transition:background 0.2s, border-color 0.2s;
}
.color-dropdown-btn:hover { background:rgba(0,0,0,0.1); }
.color-dropdown-btn.is-active { background:#151515; color:#fff; border-color:#151515; }
.color-dropdown-caret { font-size:10px; opacity:0.6; flex-shrink:0; }
.color-dropdown-panel {
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:240px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
  z-index:500;
  overflow:hidden;
  max-height:460px;
  overflow-y:auto;
}
.color-dropdown-panel.open { display:block; }
.color-parent {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 16px;
  font-size:13px;
  font-weight:600;
  color:#1a1a1a;
  cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,0.07);
  transition:background 0.12s;
  user-select:none;
}
.color-parent:hover { background:rgba(0,0,0,0.03); }
.color-parent.active-parent { color:#7846d2; }
.color-parent-arrow { font-size:11px; color:#bbb; transition:transform 0.2s; }
.color-parent.expanded .color-parent-arrow { transform:rotate(90deg); color:#7846d2; }
.color-children {
  display:none;
  background:#fafafa;
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.color-children.open { display:block; }
.color-child {
  display:block;
  padding:7px 16px 7px 30px;
  font-size:12px;
  color:#888;
  cursor:pointer;
  transition:background 0.1s, color 0.1s;
}
.color-child:hover { background:rgba(0,0,0,0.04); color:#333; }
.color-child.active-child { color:#151515; font-weight:700; background:rgba(120,70,210,0.07); }

.filter-clear {
  font-size:11px;
  color:rgba(255,255,255,0.35);
  text-decoration:underline;
  cursor:pointer;
  margin:6px 0 4px 6px;
  display:inline-block;
}
.filter-clear:hover { color:rgba(255,255,255,0.65); }

/* Active filter chip */
.active-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 24px;
  background:transparent;
}
.active-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(0,0,0,0.07);
  border:1px solid rgba(0,0,0,0.15);
  border-radius:20px;
  padding:4px 12px;
  font-size:12px;
  color:#151515;
  cursor:pointer;
}
.active-chip:hover { background:rgba(0,0,0,0.12); }
.active-chip__x { font-size:14px; line-height:1; opacity:0.5; }

/* Filter select style enhancement */
.filter-topbar__dropdown option { background:#e9e9e9; color:#151515; }

/* ================================================================
   SIZE PICKER — top bar button
   ================================================================ */
.size-picker-btn {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--c-gray-lg);
  border:1px solid rgba(0,0,0,0.12);
  border-radius:9px;
  height:38px;
  padding:0 14px;
  min-width:160px;
  cursor:pointer;
  font-family:var(--font);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.52px;
  color:#151515;
  text-transform:uppercase;
  transition:background 0.2s, border-color 0.2s;
}
.size-picker-btn:hover { background:rgba(0,0,0,0.1); }
.size-picker-btn.is-active { background:#151515; color:#fff; border-color:#151515; }
.size-picker-caret { font-size:12px; opacity:0.7; }

/* ================================================================
   SIZE PICKER — iOS-style wheel modal
   ================================================================ */
.size-modal {
  position:fixed;
  inset:0;
  z-index:3000;
  background:rgba(20,20,20,0.55);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:0;
  transition:opacity 0.25s ease;
}
.size-modal.is-open { opacity:1; }
.size-modal[hidden] { display:none; }

.size-modal__sheet {
  width:min(420px, calc(100% - 24px));
  background:#1c1c1e;
  color:#fff;
  border-radius:18px 18px 0 0;
  overflow:hidden;
  transform:translateY(20px);
  transition:transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  box-shadow:0 -10px 40px rgba(0,0,0,0.4);
  margin-bottom:max(env(safe-area-inset-bottom), 12px);
}
.size-modal.is-open .size-modal__sheet { transform:translateY(0); }
@media (min-width:720px) {
  .size-modal { align-items:center; }
  .size-modal__sheet { border-radius:18px; margin-bottom:0; }
}

.size-modal__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.size-modal__title {
  margin:0;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.4px;
  color:#fff;
}
.size-modal__cancel,
.size-modal__confirm {
  background:none;
  border:none;
  color:#0a84ff;
  font-family:inherit;
  font-size:15px;
  cursor:pointer;
  padding:4px 6px;
}
.size-modal__cancel { color:rgba(255,255,255,0.65); }
.size-modal__confirm { font-weight:600; }

/* Two-wheel row layout — number × number */
.size-wheel-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
}
.size-wheel-row .size-wheel { flex:1 1 0; min-width:0; }
.size-wheel__sep {
  font-size:26px;
  font-weight:500;
  color:rgba(255,255,255,0.55);
  user-select:none;
}

/* The wheel area */
.size-wheel {
  position:relative;
  height:220px;          /* 5 visible rows × 44px = 220 */
  overflow:hidden;
}
.size-wheel__highlight {
  position:absolute;
  left:0; right:0;
  top:50%;
  height:44px;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.06);
  border-top:1px solid rgba(255,255,255,0.18);
  border-bottom:1px solid rgba(255,255,255,0.18);
  pointer-events:none;
  z-index:1;
}
.size-wheel__list {
  list-style:none;
  margin:0;
  padding:88px 0;        /* (220 - 44) / 2 = 88 — centers first & last items at highlight */
  height:100%;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  outline:none;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
}
.size-wheel__list::-webkit-scrollbar { display:none; }
.size-wheel__item {
  height:44px;
  line-height:44px;
  text-align:center;
  font-family:inherit;
  font-size:20px;
  font-weight:500;
  letter-spacing:0.4px;
  color:#fff;
  scroll-snap-align:center;
  transition:opacity 0.18s ease, transform 0.18s ease;
  user-select:none;
  cursor:pointer;
  opacity:0.4;
}
.size-wheel__item.is-selected { font-weight:600; color:#fff; opacity:1; }

@media (prefers-reduced-motion: reduce) {
  .size-modal,
  .size-modal__sheet,
  .size-wheel__item { transition:none; }
}

/* ================================================================
   SEARCH OVERLAY
   ================================================================ */
.search-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  z-index:2000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding-top:120px;
}
.search-overlay.open { display:flex; }
.search-overlay__box {
  width:min(680px,90vw);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.search-overlay__input {
  background:transparent;
  border:none;
  border-bottom:2px solid rgba(255,255,255,0.5);
  color:#fff;
  font-family:var(--font);
  font-size:clamp(22px,3vw,38px);
  font-weight:300;
  letter-spacing:-0.5px;
  padding:12px 0;
  outline:none;
  width:100%;
}
.search-overlay__input::placeholder { color:rgba(255,255,255,0.3); }
.search-overlay__hint { font-size:13px; color:rgba(255,255,255,0.4); }
.search-overlay__close {
  position:absolute;
  top:30px;
  right:30px;
  color:#fff;
  font-size:28px;
  cursor:pointer;
  background:none;
  border:none;
  line-height:1;
  opacity:0.7;
}
.search-overlay__close:hover { opacity:1; }

/* ================================================================
   WHATSAPP FLOATING BUTTON
   ================================================================ */
.wa-float {
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:990;
  width:58px;
  height:58px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,0.45);
  text-decoration:none;
  transition:transform 0.2s, box-shadow 0.2s;
  animation:wa-pulse 2.8s ease-in-out infinite;
}
.wa-float:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,0.65); animation:none; }
.wa-float__tooltip {
  position:absolute;
  right:68px;
  background:#fff;
  color:#151515;
  font-size:13px;
  font-weight:600;
  padding:6px 14px;
  border-radius:20px;
  white-space:nowrap;
  box-shadow:0 2px 12px rgba(0,0,0,0.12);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s;
  font-family:var(--font);
}
.wa-float:hover .wa-float__tooltip { opacity:1; }
@keyframes wa-pulse {
  0%,100% { box-shadow:0 4px 20px rgba(37,211,102,0.45); }
  50% { box-shadow:0 4px 28px rgba(37,211,102,0.7),0 0 0 10px rgba(37,211,102,0.08); }
}

/* ================================================================
   WISHLIST SAVE BUTTON ON PRODUCT CARDS
   ================================================================ */
.pcard-save {
  position:absolute;
  top:10px;
  right:10px;
  z-index:4;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,0.88);
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s, transform 0.15s;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.pcard-save:hover { background:#fff; transform:scale(1.12); }
.pcard-save .heart-p { transition:fill 0.2s; }
.pcard-save.saved .heart-p { fill:#e53935; stroke:#e53935; }

/* ================================================================
   RECENTLY VIEWED SIDEBAR SECTION
   ================================================================ */
#recently-viewed {
  display:none;
  padding:18px 14px;
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:12px;
}
.rv-title {
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,0.35);
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:12px;
}
.rv-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.rv-item { display:flex; flex-direction:column; gap:4px; text-decoration:none; }
.rv-thumb {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:6px;
  transition:opacity 0.2s;
}
.rv-thumb:hover { opacity:0.8; }
.rv-name { font-size:10px; color:rgba(255,255,255,0.45); line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* ================================================================
   SEARCH AUTOCOMPLETE DROPDOWN
   ================================================================ */
.search-sugg-box {
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  margin-top:10px;
  box-shadow:0 8px 32px rgba(0,0,0,0.22);
  max-height:360px;
  overflow-y:auto;
  scrollbar-width:thin;
}
.sugg-item {
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 18px;
  cursor:pointer;
  transition:background 0.15s;
  text-decoration:none;
  color:#151515;
  border-bottom:1px solid #f0f0f0;
}
.sugg-item:hover { background:#f8f8f8; }
.sugg-item:last-child { border-bottom:none; }
.sugg-thumb { width:44px; height:44px; object-fit:cover; border-radius:6px; flex-shrink:0; background:#eee; }
.sugg-name { font-size:14px; font-weight:600; line-height:1.3; }
.sugg-col { font-size:12px; color:#aaa; margin-top:2px; }

/* ================================================================
   TOAST NOTIFICATION
   ================================================================ */
.hh-toast {
  position:fixed;
  bottom:100px;
  right:28px;
  z-index:5000;
  background:#151515;
  color:#fff;
  font-family:var(--font);
  font-size:14px;
  font-weight:500;
  padding:12px 20px;
  border-radius:24px;
  box-shadow:0 4px 20px rgba(0,0,0,0.25);
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.3s, transform 0.3s;
  pointer-events:none;
  white-space:nowrap;
}
.hh-toast.show { opacity:1; transform:translateY(0); }
.hh-toast--success { background:#25D366; color:#fff; }

/* ================================================================
   SPEC SHEET DOWNLOAD BUTTON
   ================================================================ */
.pd-btn-spec {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  color:#555;
  border:1px solid #ddd;
  border-radius:50px;
  height:42px;
  font-family:var(--font);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color 0.2s, color 0.2s;
}
.pd-btn-spec:hover { border-color:#151515; color:#151515; }

/* ================================================================
   LANGUAGE TOGGLE BUTTON
   ================================================================ */
.lang-toggle-btn {
  display:inline-flex !important;
  align-items:center;
  gap:3px;
  background:rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.12);
  border-radius:20px;
  padding:4px 10px !important;
  height:28px !important;
  cursor:pointer;
  font-size:11px;
  letter-spacing:0.3px;
  white-space:nowrap;
  transition:background 0.15s;
}
.lang-toggle-btn:hover { background:rgba(0,0,0,0.1); }
.lang-toggle-btn strong { font-weight:700; }

/* ================================================================
   ARABIC RTL SUPPORT
   ================================================================ */
[dir="rtl"] body { text-align:right; }
[dir="rtl"] .navbar__inner { flex-direction:row-reverse; }
[dir="rtl"] .navbar__links { flex-direction:row-reverse; }
[dir="rtl"] .hero__card { left:auto; right:clamp(20px,3vw,41px); text-align:right; }
[dir="rtl"] .space-section { direction:rtl; }
[dir="rtl"] .versatility__header { text-align:right; }
[dir="rtl"] .mat-card__info { text-align:right; }
[dir="rtl"] .footer__bottom { flex-direction:row-reverse; flex-wrap:wrap; }
[dir="rtl"] .footer__top { direction:rtl; }
[dir="rtl"] .footer__tagline { text-align:right; }
[dir="rtl"] .stats-bar { flex-direction:row-reverse; }
[dir="rtl"] .about-hero { direction:rtl; }
[dir="rtl"] .about-hero__left { text-align:right; }
[dir="rtl"] .filter-item { flex-direction:row-reverse; }
[dir="rtl"] .filter-sidebar { direction:rtl; }
[dir="rtl"] .filter-topbar { flex-direction:row-reverse; }
[dir="rtl"] .pd-spec { flex-direction:row-reverse; }
[dir="rtl"] .pd-breadcrumb { flex-direction:row-reverse; }
[dir="rtl"] .pd-info { direction:rtl; text-align:right; }
[dir="rtl"] .pd-ctas { align-items:flex-start; direction:rtl; }
[dir="rtl"] .pd-related { direction:rtl; }
[dir="rtl"] .contact-page { direction:rtl; }
[dir="rtl"] .contact-page__form-col { text-align:right; direction:rtl; }
[dir="rtl"] .contact-page__subtext { margin-right:0; max-width:none; }
[dir="rtl"] .contact-form { direction:rtl; }
[dir="rtl"] .form-submit { align-self:flex-end; }
[dir="rtl"] .presence { direction:rtl; }
[dir="rtl"] .presence__locations { direction:rtl; }
[dir="rtl"] .proven { direction:rtl; }
[dir="rtl"] .foundation { direction:rtl; text-align:right; }
[dir="rtl"] .wa-float { right:auto; left:28px; }
[dir="rtl"] .wa-float__tooltip { right:auto; left:68px; }
[dir="rtl"] .hh-toast { right:auto; left:28px; }
[dir="rtl"] .pd-btn-primary, [dir="rtl"] .pd-btn-secondary, [dir="rtl"] .pd-btn-spec { direction:rtl; }
[dir="rtl"] .intro-bar { flex-direction:row-reverse; }
[dir="rtl"] .gallery-slider__track { direction:rtl; }
[dir="rtl"] .pagination__inner { flex-direction:row-reverse; }
[dir="rtl"] .active-chips { flex-direction:row-reverse; }
[dir="rtl"] .filter-accordion { direction:rtl; }
[dir="rtl"] .filter-option { flex-direction:row-reverse; text-align:right; }
[dir="rtl"] .navbar__inner { flex-direction:row-reverse; }
[dir="rtl"] .navbar__links { flex-direction:row-reverse; }
[dir="rtl"] .hero__card { left:auto; right:clamp(20px,3vw,41px); text-align:right; }
[dir="rtl"] .stats-bar { flex-direction:row-reverse; }
[dir="rtl"] .footer__bottom { flex-direction:row-reverse; }
[dir="rtl"] .filter-item { flex-direction:row-reverse; }
[dir="rtl"] .pd-spec { flex-direction:row-reverse; }
[dir="rtl"] .pd-breadcrumb { flex-direction:row-reverse; }
[dir="rtl"] .pd-ctas { align-items:flex-end; }
[dir="rtl"] .filter-topbar { flex-direction:row-reverse; }
[dir="rtl"] .wa-float { right:auto; left:28px; }
[dir="rtl"] .wa-float__tooltip { right:auto; left:68px; }
[dir="rtl"] .hh-toast { right:auto; left:28px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1024px) {
  .img-grid { grid-template-columns:repeat(2, 1fr); height:auto; }
  .img-grid__item { height:clamp(200px,25vw,380px); }
  .hb-section { grid-template-columns:1fr; }
  .about-hero { grid-template-columns:1fr; min-height:auto; }
  .about-hero__left { grid-column:1; grid-row:2; }
  .about-hero__img { grid-column:1; grid-row:1; height:clamp(200px,40vw,350px); }
  .about-hero__stats { grid-column:1; grid-row:3; max-width:none; }
  .foundation { grid-template-columns:1fr; row-gap:clamp(20px,3vw,40px); }
  .proven__gallery { grid-template-columns:repeat(2, 1fr); }
  .proven__img-wrap { height:clamp(320px,48vw,560px); }
  .presence { grid-template-columns:1fr; }
  .collections-main { grid-template-columns:1fr; }
  .filter-sidebar { display:none; }
  .filter-sidebar.open {
    display:block;
    position:fixed;
    top:0; left:0; bottom:0;
    width:240px;
    max-width:75vw;
    z-index:1200;
    overflow-y:auto;
    box-shadow:8px 0 28px rgba(0,0,0,0.32);
    padding:24px 18px 28px;
  }
  .filter-sidebar.open .filter-sidebar__close { display:inline-flex; }
  /* Backdrop dimmer when the drawer is open */
  body.filter-sidebar-locked { overflow:hidden; }
  body.filter-sidebar-locked::after {
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:1100;
    pointer-events:none;        /* clicks pass through to the document so the
                                   document-level click handler can close */
  }
  .products-grid { grid-template-columns:repeat(2, 1fr); }
  .product-detail { grid-template-columns:1fr; }
  .space-section { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  :root { --pad-x: 20px; }
  .navbar__links { display:none; }
  .navbar__hamburger { display:flex; }
  .mat-card { width:clamp(200px, 60vw, 280px); }
  .img-grid { grid-template-columns:repeat(2, 1fr); }

  .img-grid__item { height:180px; }
  .stats-bar { gap:20px; }
  .stat-divider { display:none; }
  .capabilities { grid-template-columns:1fr; }
  .pagination__inner { height:42px; border-radius:22px; }
  .pagination__btn { padding:0 12px; font-size:11px; }
  .pagination__page { width:34px; font-size:12px; }
  .footer__top { grid-template-columns:1fr; gap:28px; }
  .footer__inner { padding:30px 24px 0; }
  .footer__bottom { flex-direction:column; align-items:flex-start; gap:12px; }
  .proven__gallery { grid-template-columns:1fr; }
  .products-grid { grid-template-columns:repeat(2, 1fr); }
  .gallery-slider__btn img { width:44px; height:44px; }
}
@media (max-width:480px) {
  .mat-card { width:75vw; }
  .img-grid { grid-template-columns:1fr 1fr; }
  .products-grid { grid-template-columns:1fr; }
  .partners-marquee__track { gap:32px; animation-duration:28s; }
  .partners-marquee__track--slow { animation-duration:38s; }
  .partners__logo { height:30px; }
  .hero__card { width:calc(100% - 40px); }
}

/* ================================================================
   MOSAIC SERIES PICKER (Collections — two-level filter step)
   Light theme, 2-up grid (becomes 1-up on small phones).
   Cards keep the full-bleed image + gradient-overlay label style
   from the Versatility of Form section, just on a clean white panel.
   ================================================================ */
.mosaic-picker {
  grid-column:1/-1;
  background:transparent;
  padding:clamp(20px, 3vw, 40px) clamp(4px, 1vw, 20px);
}
.mosaic-picker__head {
  text-align:center;
  max-width:720px;
  margin:0 auto clamp(22px, 3vw, 40px);
}
.mosaic-picker__eyebrow {
  display:inline-block;
  font-size:11px;
  font-weight:700;
  color:rgba(0,0,0,0.55);
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin-bottom:14px;
}
.mosaic-picker__heading {
  font-family:var(--font);
  font-size:clamp(24px, 2.6vw, 36px);
  font-weight:500;
  letter-spacing:-0.6px;
  line-height:1.1;
  color:#151515;
  margin:0 0 12px;
}
.mosaic-picker__sub {
  font-size:clamp(13px, 1.1vw, 15px);
  color:#666;
  line-height:1.55;
  margin:0;
}
.mosaic-picker__grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(14px, 2vw, 24px);
  max-width:900px;
  margin:0 auto;
}
/* The mosaic card reuses .mat-card visuals for full-bleed image +
   gradient overlay + white label, but here the layout is a static
   grid, not a horizontal scroll, so we reset .mat-card's fixed
   width / height and let the grid drive the box size. */
.mosaic-series-card.mat-card {
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  flex-shrink:1;
  scroll-snap-align:unset;
  background:#1a1a1a;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  border-radius:var(--r-card);
  transition:transform 0.24s ease, box-shadow 0.24s ease;
}
.mosaic-series-card.mat-card:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(0,0,0,0.14);
}
.mosaic-series-card__sub {
  font-size:11px;
  font-weight:500;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.78);
  margin:0 0 10px;
}
@media (max-width:480px) {
  .mosaic-picker__grid { grid-template-columns:1fr; }
  .mosaic-series-card.mat-card { aspect-ratio:5/4; }
}

/* ================================================================
   MOBILE RESPONSIVE PASS  (≤640px)
   Defensive overrides: stop any fixed widths / min-widths / wide
   tables / oversize padding from pushing layouts past the viewport.
   ================================================================ */
html { overflow-x:hidden; }
body { width:100%; max-width:100%; }
img, video, svg { max-width:100%; height:auto; }

@media (max-width:640px) {
  :root {
    --pad-x: 16px;
    --nav-top: 12px;
  }

  /* Global text safety — long product names, addresses, breadcrumbs */
  body, p, h1, h2, h3, h4, span, a, li, td, th, label {
    overflow-wrap:anywhere;
    word-wrap:break-word;
  }

  /* Allow flex / grid children to shrink below their min-content */
  .filter-topbar > *,
  .navbar__inner > *,
  .footer__inner > *,
  .footer__top > * { min-width:0; }

  /* ── Navbar ── */
  .navbar { padding:0 12px; }
  .navbar__inner { padding:0 16px; height:50px; }
  .navbar__logo { height:24px; }

  /* ── Hero ── */
  .hero__card { width:calc(100% - 24px); left:12px; right:12px; padding:18px; }
  .hero__card-text { font-size:13px; line-height:1.5; }
  .hero__locations-tag { right:12px; bottom:12px; }
  .intro-bar { flex-direction:column; align-items:flex-start; gap:14px; padding:20px 16px; }

  /* ── Gallery slider ── */
  .gallery-slider__btn { width:36px; height:36px; }
  .gallery-slider__btn img { width:36px; height:36px; }

  /* ── Versatility ── */
  .versatility { padding:40px 16px; }
  .versatility__btn { display:none; }    /* arrows clutter at small sizes; swipe instead */
  .mat-card { width:78vw; min-width:0; }

  /* ── Image grid (project gallery) ── */
  .img-grid { grid-template-columns:1fr 1fr !important; gap:6px; padding:0 12px; }
  .img-grid__item { height:42vw !important; }

  /* ── HnB section ── */
  .hb-section { padding:40px 16px; gap:24px; }
  .hb-section__heading { font-size:22px; }
  .hb-section__text { font-size:13px; }

  /* ── About hero / stats ── */
  .about-hero { padding:24px 16px; }
  .about-hero__heading { font-size:22px; letter-spacing:1.5px; }
  .about-hero__stats { flex-wrap:wrap; gap:18px 20px; padding:20px; }
  .stat { min-width:42%; }
  .stat__number { font-size:24px; }
  .stat__label { font-size:11px; white-space:normal; }

  /* ── Foundation / capabilities ── */
  .foundation { padding:40px 16px; }

  /* ── Proven execution ── */
  .proven { padding:40px 16px; }
  .proven__gallery--scroll { grid-auto-columns:80% !important; }
  .proven__btn { display:none; }

  /* ── Presence (locations) ── */
  .presence { padding:40px 16px; gap:24px; }

  /* ── Collections page ── */
  .collections-hero { height:200px; }
  .collections-main { padding:0 12px 24px; }
  .filter-topbar {
    padding:12px;
    gap:8px;
    flex-direction:column;
    align-items:stretch;
  }
  .filter-topbar > * { width:100% !important; }
  .filter-topbar > #products-count { margin:0; text-align:left; font-size:11px; }
  .color-dropdown-btn,
  .size-picker-btn,
  .filter-topbar__dropdown { min-width:0 !important; width:100% !important; }
  .color-dropdown-panel { min-width:0; width:100%; left:0; right:0; }
  .products-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:10px; }
  .product-card__label { font-size:11px; padding:6px 8px; }

  /* ── Product detail ── */
  .pd-wrap {
    grid-template-columns:1fr !important;
    padding:calc(var(--nav-h) + var(--nav-top) + 16px) 16px 40px !important;
    gap:20px !important;
  }
  .pd-name { font-size:22px !important; letter-spacing:-0.3px; }
  .pd-breadcrumb { font-size:11px; gap:4px; margin-bottom:12px; }
  .pd-breadcrumb a, .pd-breadcrumb span { display:inline; }
  .pd-spec { flex-direction:column; align-items:flex-start; gap:4px; }
  .pd-spec__label { width:auto; padding-top:0; font-size:10px; }
  .pd-spec__val { font-size:14px; }
  .pd-ctas { gap:10px; }
  .pd-btn-primary, .pd-btn-spec { height:46px; font-size:12px; letter-spacing:0.5px; padding:0 16px; }
  .pd-variants__swatches { gap:8px; }
  .pd-variant { width:54px; }
  .pd-variant__dot { width:32px; height:32px; }
  .pd-variant__name { font-size:9px; max-width:54px; }

  /* Compact gallery (Accessories etc.) fills width on mobile */
  .pd-gallery.pd-gallery--compact { max-width:100%; }

  /* ── Related products ── */
  .pd-related { padding:32px 16px; }
  .pd-related__grid { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:10px; }
  .pd-related__heading { font-size:18px; }
  .pd-related__sub { font-size:12px; }

  /* ── Footer ── */
  .footer__inner { padding:30px 16px 0 !important; }
  .footer__top { grid-template-columns:1fr !important; gap:24px; }
  .footer__brand, .footer__nav, .footer__info { text-align:left; }
  .footer__tagline { font-size:13px; }
  .footer__info-sub { font-size:12px; line-height:1.55; }
  .footer__bottom { flex-direction:column; align-items:flex-start; gap:12px; padding:18px 0 24px; }
  .footer__copyright { font-size:12px; }
  .footer__legal { flex-wrap:wrap; gap:8px; }
  .footer__legal-link { font-size:12px; }

  /* ── Contact page ── */
  .contact-wrapper { padding:calc(var(--nav-h) + var(--nav-top) + 30px) 16px 40px !important; }
  .contact-page { grid-template-columns:1fr !important; grid-auto-rows:auto !important; }
  .contact-page__img { height:50vw; min-height:0; }
  .contact-page__img img { position:static !important; }
  .contact-page__form-col { padding:30px 20px !important; }
  .contact-row { grid-template-columns:1fr !important; }

  /* ── HNB collection grid ── */
  .hnb-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:10px; }
  .hnb-card { padding:14px 8px 16px; }
  .hnb-card__name { font-size:12px; }

  /* ── Project detail page ── */
  .pj-wrap { padding:calc(var(--nav-h) + var(--nav-top) + 16px) 16px 40px !important; grid-template-columns:1fr !important; }
  .pj-title { font-size:24px; }
  .pj-desc { font-size:13px; }

  /* ── Sidebar / filter toggle ── */
  .filter-sidebar.open { width:240px !important; max-width:72vw; }

  /* ── Lightbox ── */
  .lightbox img { max-width:96vw; }
}

/* Extra-small phones (≤380px) — squeeze further so iPhone SE / Galaxy A series
   doesn't break. */
@media (max-width:380px) {
  :root { --pad-x: 12px; }
  .pd-name { font-size:20px !important; }
  .pd-btn-primary, .pd-btn-spec { font-size:11px; letter-spacing:0.3px; }
  .products-grid { grid-template-columns:1fr !important; }
  .pd-related__grid { grid-template-columns:1fr !important; }
  .img-grid { grid-template-columns:1fr !important; }
  .pd-variant { width:48px; }
  .pd-variant__dot { width:28px; height:28px; }
}