/* =====================================================
   DHARANI AUTO STORES — PRODUCTS PAGE CSS
   Matches home.css: pill nav | white bg | navy #0a213d | gold #ffcd34
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --navy        : #0a213d;
  --navy-mid    : #0d2a4f;
  --navy-soft   : #0f2d52;
  --gold        : #ffcd34;
  --gold-dk     : #e6b800;
  --gold-glow   : rgba(255,205,52,0.15);
  --gold-border : rgba(255,205,52,0.38);
  --bg          : #ffffff;
  --bg-soft     : #f4f6fb;
  --bg-card     : #ffffff;
  --text-head   : #0a213d;
  --text-body   : #374151;
  --text-muted  : #64748b;
  --border      : #e2e8f0;
  --sh-sm       : 0 2px  8px  rgba(10,33,61,0.07);
  --sh-md       : 0 8px  24px rgba(10,33,61,0.10);
  --sh-lg       : 0 20px 48px rgba(10,33,61,0.13);
  --sh-xl       : 0 32px 72px rgba(10,33,61,0.16);
  --font-d      : 'Barlow Condensed', sans-serif;
  --font-b      : 'DM Sans', sans-serif;
  --ease        : cubic-bezier(0.22, 1, 0.36, 1);
  --spring      : cubic-bezier(0.34, 1.56, 0.64, 1);
  --r           : 16px;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-b); color: var(--text-body); overflow-x: hidden; background: var(--bg); min-height: 100vh; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }


/* ─── HEADER — matching home page ─── */
.header {
  position: fixed;
  top: 22px;
  left: 6%;
  right: 6%;
  z-index: 9999;
  width: auto;
  isolation: isolate;
  /* No transform — breaks Chrome position:fixed */
}
.nav-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 8px 26px;
  gap: 26px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 999px;
  border: 1.5px solid rgba(255,205,52,0.55);
  box-shadow: 0 10px 35px rgba(10,33,61,0.12), inset 0 0 0 1px rgba(255,255,255,0.2);
}
.nav-left { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.logo-wrap { display: flex; align-items: center; padding: 0; }
.brand-logo-wrap { padding: 0; }
.logo-wrap img { height: 34px; width: auto; display: block; transition: transform 0.3s ease, filter 0.3s ease; }
.brand-logo-wrap img { height: 34px; }
.logo-wrap img:hover { transform: scale(1.05); filter: drop-shadow(0 4px 14px rgba(255,205,52,0.6)); }
.nav-divider { width: 1px; height: 28px; background: rgba(10,33,61,0.18); margin: 0 16px; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.nav-links a {
  font-family: var(--font-b); font-size: 15px; font-weight: 600;
  text-decoration: none; color: var(--navy);
  padding: 8px 20px; border-radius: 999px; transition: all 0.25s ease;
}
.nav-links a.active { background: var(--gold); color: var(--navy); box-shadow: 0 5px 16px rgba(255,205,52,0.4); }
.nav-links a:not(.active):hover { color: var(--gold-dk); }

/* ─── BUTTONS ─── */
.btn-grad {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 28px; border-radius: 11px; cursor: pointer;
  text-decoration: none; font-family: var(--font-b); font-size: 14px;
  font-weight: 700; letter-spacing: 0.02em; background: var(--navy); color: #fff;
  border: 2px solid transparent; box-shadow: 0 4px 14px rgba(10,33,61,0.22);
  transition: transform 0.25s var(--spring), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn-grad:hover { background: var(--navy-soft); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(10,33,61,0.32); border-color: var(--gold); }
.btn-grad.large { padding: 14px 36px; font-size: 15px; }

/* ─── SECTION HEADER ─── */
.section-header { text-align: center; margin-bottom: 54px; }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-family: var(--font-b); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dk);
  background: var(--gold-glow); border: 1px solid var(--gold-border);
  padding: 6px 16px 6px 12px; border-radius: 999px;
}
.ey-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold-dk);
  flex-shrink: 0; animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(230,184,0,0.70); }
  50%     { box-shadow: 0 0 0 8px rgba(230,184,0,0);    }
}
.section-title { font-family: var(--font-d); font-size: 42px; font-weight: 700; color: var(--text-head); letter-spacing: 0.01em; margin-bottom: 10px; }
.section-subtitle { font-size: 15px; color: var(--text-muted); }

/* ─── PRODUCT RANGE ─── */
.product-range {
  padding: 110px 24px 100px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}

.range-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(6,1fr); gap: 18px;
}

.range-card {
  position: relative; aspect-ratio: 1;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  text-align: center; cursor: default; box-shadow: var(--sh-sm);
  transition: transform 0.35s var(--spring), box-shadow 0.35s ease, border-color 0.35s ease;
}
.range-card:hover { transform: translateY(-8px) scale(1.03); box-shadow: var(--sh-lg); border-color: var(--gold-border); }
.range-icon { font-size: 34px; transition: transform 0.35s var(--spring); }
.range-card:hover .range-icon { transform: scale(1.15) rotate(-5deg); }
.range-card h3 {
  font-family: var(--font-b); font-size: 12px; font-weight: 700;
  color: var(--text-head); letter-spacing: 0.05em; text-transform: uppercase;
}

.range-hover {
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px); width: 200px;
  padding: 12px 14px; background: var(--navy); color: #ffffff;
  border-radius: 12px; box-shadow: var(--sh-xl);
  font-family: var(--font-b); font-size: 13px; line-height: 1.6;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
  z-index: 10; border-top: 2px solid var(--gold);
}
.range-hover::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); border: 7px solid transparent;
  border-top-color: var(--navy);
}
.range-card:hover .range-hover { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── BRAND CAROUSEL ─── */
.dharani-deals {
  padding: 88px 0; overflow: hidden;
  background: var(--bg); border-top: 1px solid var(--border);
}
.dharani-deals .section-header { padding: 0 24px; }
.logo-carousel { width: 100vw; overflow: hidden; }
.logo-track {
  display: flex; align-items: center; width: max-content;
  animation: scrollLogos 32s linear infinite;
}
.logo-track:hover { animation-play-state: paused; }
.logo-item {
  min-width: 160px; height: 80px; margin-right: 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-sm);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--spring);
}
.logo-item:hover { border-color: var(--gold-border); box-shadow: var(--sh-md); transform: translateY(-4px); }
.logo-item img { max-width: 122px; max-height: 54px; object-fit: contain; display: block; }
@keyframes scrollLogos { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ─── FEATURED PRODUCTS ─── */
.featured-products {
  padding: 100px 24px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* ── vars ── */
:root {
  --pp-cut : 72px;
  --pp-r   : 24px;
}

/* 3 × 3 square grid */
.fp-grid {
  max-width : 1080px;
  margin    : 0 auto;
  display   : grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap       : 14px;
}

/* Each slot is a square via aspect-ratio */
.fp-slot {
  position    : relative;
  aspect-ratio: 1 / 1;           /* ← makes it square */
}

/* Card fills the slot, diagonal bottom-right clip */
.fp-card {
  position      : absolute;
  inset         : 0;
  border-radius : 20px;
  overflow      : hidden;
  display       : block;
  cursor        : pointer;
  box-shadow    : 0 4px 20px rgba(10,33,61,0.13);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--pp-cut)),
    calc(100% - var(--pp-cut)) 100%,
    0 100%
  );
  transition: transform .38s cubic-bezier(.22,1,.36,1),
              box-shadow .38s ease;
}
.fp-slot:hover .fp-card {
  transform : translateY(-5px) scale(1.008);
  box-shadow: 0 16px 44px rgba(10,33,61,0.22);
}

.fp-img {
  position  : absolute;
  inset     : 0;
  width     : 100%; height: 100%;
  object-fit: cover;
  display   : block;
  transition: transform .52s cubic-bezier(.22,1,.36,1);
}
.fp-slot:hover .fp-img { transform: scale(1.08); }

.fp-overlay {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(158deg, rgba(5,14,28,.06) 0%, rgba(5,14,28,.80) 100%);
  transition: background .36s ease;
}
.fp-slot:hover .fp-overlay {
  background: linear-gradient(158deg, rgba(5,14,28,.18) 0%, rgba(5,14,28,.94) 100%);
}

/* Tag + name + extras — inside clipped card */
.fp-content {
  position: absolute;
  bottom  : 18px;
  left    : 18px;
  right   : calc(var(--pp-cut) + 8px);
  z-index : 2;
}
.fp-tag {
  display       : inline-block;
  font-family   : var(--font-b);
  font-size     : 10px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color         : #fff;
  background    : rgba(10,33,61,0.55);
  border        : 1.5px solid rgba(255,255,255,.55);
  /* backdrop-filter removed — breaks stacking in Chrome */
  padding       : 3px 11px; border-radius: 999px;
  margin-bottom : 7px;
}
.fp-tag.automotive { background: rgba(255,205,52,.22); border-color: rgba(255,205,52,.75); }
.fp-tag.industrial  { background: rgba(139,92,246,.22); border-color: rgba(139,92,246,.65); }

.fp-name {
  font-family : var(--font-d);
  font-size   : clamp(16px, 1.7vw, 22px);
  font-weight : 700;
  color       : #fff;
  line-height : 1.2;
  text-shadow : 0 2px 12px rgba(0,0,0,.35);
  margin      : 0;
}

/* Desc + feature pills slide up on hover */
.fp-extra {
  max-height: 0; overflow: hidden;
  opacity   : 0; transform: translateY(6px);
  transition: max-height .40s cubic-bezier(.22,1,.36,1),
              opacity .34s ease, transform .34s cubic-bezier(.22,1,.36,1);
}
.fp-slot:hover .fp-extra { max-height: 110px; opacity: 1; transform: translateY(0); }

.fp-desc {
  font-family: var(--font-b);
  font-size  : 12px; line-height: 1.6;
  color      : rgba(255,255,255,.84);
  margin-top : 7px;
}
.fp-feats {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px;
}
.fp-feats span {
  font-family: var(--font-b);
  font-size  : 10px; font-weight: 600;
  padding    : 3px 9px; border-radius: 999px;
  background : rgba(255,255,255,.14);
  border     : 1px solid rgba(255,255,255,.30);
  color      : rgba(255,255,255,.92);
}

/* ── Circle button — OUTSIDE fp-card, never clipped ── */
.fp-circle {
  position     : absolute;
  bottom       : calc(var(--pp-cut)/2 - var(--pp-r));
  right        : calc(var(--pp-cut)/2 - var(--pp-r));
  z-index      : 20;
  width        : calc(var(--pp-r) * 2);
  height       : calc(var(--pp-r) * 2);
  border-radius: 50%;
  background   : #ffffff;
  border       : none;
  cursor       : pointer;
  box-shadow   : 0 2px 14px rgba(0,0,0,.26), 0 0 0 1.5px rgba(10,33,61,.12);
  display      : flex; align-items: center; justify-content: center;
  transition   : background .28s ease, box-shadow .28s ease,
                 transform .28s cubic-bezier(.22,1,.36,1);
}
.fp-slot:hover .fp-circle {
  background: var(--gold);
  box-shadow: 0 4px 18px rgba(255,205,52,.50), 0 0 0 1.5px var(--gold-dk);
  transform : scale(1.12);
}

/* Arrow — rotates -45°(↗) → 0°(→) exactly like home page */
.fp-arrow {
  color     : var(--navy);
  font-size : 14px;
  display   : block;
  transform : rotate(-45deg);
  transition: transform .34s cubic-bezier(.22,1,.36,1);
}
.fp-slot:hover .fp-arrow { transform: rotate(0deg); }

/* "Enquire" tooltip above circle */
.fp-circle::before {
  content   : 'Enquire';
  position  : absolute;
  bottom    : calc(100% + 8px); left: 50%;
  transform : translateX(-50%) translateY(4px);
  background: var(--navy); color: #fff;
  font-family: var(--font-b); font-size: 11px; font-weight: 700;
  padding   : 5px 10px; border-radius: 8px;
  white-space: nowrap; pointer-events: none;
  opacity   : 0; border-top: 2px solid var(--gold);
  transition: opacity .2s ease, transform .2s ease;
}
.fp-circle::after {
  content  : '';
  position : absolute;
  bottom   : calc(100% + 1px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  border   : 5px solid transparent;
  border-top-color: var(--navy);
  pointer-events: none; opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.fp-circle:hover::before,
.fp-circle:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.products-cta { text-align: center; margin-top: 60px; }


/* ═══════════════════════════════════════════════
   ENQUIRY MODAL — proper popup window
═══════════════════════════════════════════════ */
.enquiry-modal {
  position  : fixed;
  inset     : 0;
  background: rgba(10,33,61,0.78);
  /* backdrop-filter removed — Chrome fix: use opacity instead */
  display   : none;
  align-items    : center;
  justify-content: center;
  z-index   : 99999;
  padding   : 20px;
  animation : modalBgIn .25s ease;
}
@keyframes modalBgIn { from{opacity:0;} to{opacity:1;} }

.enquiry-box {
  background   : #ffffff;
  border-radius: 22px;
  width        : 540px;
  max-width    : 100%;
  max-height   : 90vh;
  overflow-y   : auto;
  position     : relative;
  box-shadow   : 0 32px 80px rgba(10,33,61,0.28), 0 0 0 1px rgba(255,205,52,0.25);
  border-top   : 4px solid var(--gold);
  animation    : modalBoxIn .32s cubic-bezier(.22,1,.36,1);
  scrollbar-width: thin;
}
@keyframes modalBoxIn {
  from { opacity:0; transform: translateY(28px) scale(0.96); }
  to   { opacity:1; transform: translateY(0)    scale(1);    }
}

/* ── Modal header bar ── */
.enquiry-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 26px 28px 0;
  margin-bottom  : 4px;
}
.enquiry-header-left { display: flex; flex-direction: column; gap: 3px; }
.enquiry-eyebrow {
  font-family   : var(--font-b);
  font-size     : 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color         : var(--gold-dk);
  background    : var(--gold-glow);
  border        : 1px solid var(--gold-border);
  padding       : 4px 12px; border-radius: 999px;
  display       : inline-block; width: fit-content;
}
.enquiry-header h3 {
  font-family   : var(--font-d);
  font-size     : 28px; font-weight: 800;
  color         : var(--text-head);
  letter-spacing: 0.01em; margin: 0; line-height: 1.1;
}
.enquiry-product-name {
  font-family: var(--font-b);
  font-size  : 13px; color: var(--text-muted);
  margin-top : 2px;
}

/* Close button */
.close-btn {
  position    : relative; top: auto; right: auto;
  width       : 36px; height: 36px;
  border-radius: 10px;
  background  : var(--bg-soft);
  border      : 1px solid var(--border);
  cursor      : pointer;
  display     : flex; align-items: center; justify-content: center;
  font-size   : 18px; color: var(--text-muted);
  transition  : background .2s ease, color .2s ease, border-color .2s ease;
  flex-shrink : 0;
}
.close-btn:hover { background: #fee2e2; color: #ef4444; border-color: #fecaca; }

/* Divider */
.enquiry-divider {
  height    : 1px;
  background: var(--border);
  margin    : 18px 28px 0;
}

/* ── Form body ── */
.enquiry-body {
  padding: 20px 28px 28px;
  display: flex; flex-direction: column; gap: 0;
}

/* 2-col grid for Brand + Grade */
.enquiry-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

.enquiry-box label {
  display       : block;
  font-family   : var(--font-b);
  font-size     : 11px; font-weight: 700;
  color         : var(--text-muted);
  margin-bottom : 6px;
  letter-spacing: 0.07em; text-transform: uppercase;
}

.enquiry-field { margin-bottom: 16px; }
.enquiry-field:last-child { margin-bottom: 0; }

.enquiry-box input,
.enquiry-box select {
  width       : 100%; height: 44px;
  padding     : 0 14px;
  font-family : var(--font-b); font-size: 14px;
  color       : var(--text-head);
  border      : 1.5px solid var(--border);
  border-radius: 10px;
  background  : var(--bg-soft);
  outline     : none;
  transition  : border-color .25s ease, box-shadow .25s ease, background .2s ease;
}
.enquiry-box input:focus,
.enquiry-box select:focus {
  border-color: var(--gold);
  box-shadow  : 0 0 0 3px var(--gold-glow);
  background  : #ffffff;
}
.enquiry-box input[readonly] {
  background: #f0f2f7; color: var(--text-muted); cursor: default;
}
.enquiry-box select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.293l3.71-4.06a.75.75 0 111.08 1.04l-4.24 4.64a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  background-size: 16px; cursor: pointer;
}

/* Submit button */
.submit-btn {
  width        : 100%;
  margin-top   : 6px;
  padding      : 14px;
  font-size    : 15px;
  border-radius: 12px;
  letter-spacing: 0.02em;
}

/* Required note */
.enquiry-note {
  font-family: var(--font-b);
  font-size  : 12px; color: var(--text-muted);
  margin-top : 12px; text-align: center;
}
.enquiry-note span { color: #ef4444; }

/* ─── fp-grid responsive ─── */
@media (max-width: 900px) {
  .fp-grid { grid-template-columns: repeat(2, 1fr); }
  .enquiry-row { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .header { top: 12px; left: 3%; right: 3%; }
  .nav-pill { padding: 7px 8px 7px 14px; gap: 16px; }
  .logo-wrap img { height: 30px; }
  .brand-logo-wrap img { height: 26px; }
  .nav-links a { font-size: 13px; padding: 8px 14px; }
}
@media (max-width: 540px) {
  .nav-divider { display: none !important; }
  /* fp-grid: keep 2-col even at 540px — see touched block */
  .enquiry-box { border-radius: 16px; }
  .enquiry-header, .enquiry-body { padding-left: 18px; padding-right: 18px; }
  .enquiry-divider { margin-left: 18px; margin-right: 18px; }
}

/* ─── FOOTER ─── */
.site-footer {
  padding    : 28px 0;
  text-align : center;
  font-family: var(--font-b);
  font-size  : 13px;
  background : #ffffff;
  color      : rgba(10,33,61,0.52);
  border-top : 2px solid var(--gold);
}
/* ================================================================
   MOBILE-FIRST IMPROVEMENTS
   ================================================================ */

/* ── HAMBURGER ── */

.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 768px) {
  .header { top: 12px; left: 3%; right: 3%; }
  .nav-pill { padding: 7px 10px 7px 16px; gap: 12px; }
  .logo-wrap img { height: 28px; }
  .nav-divider { margin: 0 10px; ; display: none !important; }
  .brand-logo-wrap img { height: 22px; }

  .nav-links,
  .nav-links a {
    display: none !important;
  }
  .nav-links.open { opacity: 1; pointer-events: all; }
  .nav-links a {
    font-size: 24px; font-weight: 700;
    padding: 14px 36px; color: rgba(255,255,255,0.85);
    border-radius: 14px; min-height: 56px;
    display: flex; align-items: center;
    width: 220px; justify-content: center;
  }
  .nav-links a.active { background: var(--gold); color: var(--navy); box-shadow: 0 6px 24px rgba(255,205,52,0.45); }
  .nav-links a:not(.active) { color: rgba(255,255,255,0.80); }

  /* Product range — compact 2-column on mobile */
  .product-range { padding: 80px 16px 52px; }
  .range-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 100%;
  }
  .range-card {
    aspect-ratio: 1;
    border-radius: 14px;
    gap: 6px;
    padding: 8px 4px;
  }
  .range-icon { font-size: 22px; line-height: 1; }
  .range-card h3 { font-size: 9px; letter-spacing: 0.04em; }
  /* Disable tooltip on mobile — not hoverable */
  .range-hover { display: none; }

  /* Brand carousel */
  .dharani-deals { padding: 56px 0; }
  .logo-item { min-width: 120px; height: 64px; margin-right: 12px; }
  .logo-item img { max-width: 90px; max-height: 40px; }

  /* Featured products — see TOGGLE touch block below */
  /* (grid/slot/sizing rules moved to touched block) */

  /* Section headers */
  .section-title { font-size: clamp(26px, 7vw, 42px); }
  .section-subtitle { font-size: 14px; }
  .section-header { margin-bottom: 36px; }

  /* CTA button */
  .products-cta { margin-top: 40px; }
  .btn-grad { min-height: 48px; }
  .btn-grad.large { padding: 14px 28px; font-size: 14px; }

  /* Enquiry modal */
  .enquiry-box { border-radius: 18px; }
  .enquiry-header { padding: 20px 20px 0; }
  .enquiry-body { padding: 16px 20px 24px; }
  .enquiry-divider { margin: 14px 20px 0; }
  .enquiry-row { grid-template-columns: 1fr; gap: 0; }
  .enquiry-header h3 { font-size: 24px; }

  /* Footer */
  .site-footer { font-size: 12px; padding: 22px 16px; }
}

@media (max-width: 480px) {
  .range-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .range-icon { font-size: 20px; }
  .range-card h3 { font-size: 9px; }
  /* --pp-cut/--pp-r set in touched block below */
}


/* ══════════════════════════════════════════
   MOBILE NAV OVERLAY — clean implementation
   Always hidden; only .open makes it visible
   Works on ALL screen sizes correctly
   ══════════════════════════════════════════ */

/* iOS Safari fix */
.nav-pill.nav-open {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,0.95);
}

/* ── Mobile nav: compact glassmorphism dropdown ── */
.mobile-nav-overlay {
  display: none !important;
  position: fixed;
  top: 78px;
  left: 16px;
  right: 16px;
  width: auto;
  max-width: 340px;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: rgba(8, 28, 54, 0.97);
  border-radius: 20px;
  border: 1px solid rgba(255, 205, 52, 0.25);
  box-shadow:
    0 8px 32px rgba(10, 33, 61, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 99999;
}

.mobile-nav-overlay.open {
  display: flex !important;
  animation: navDropIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-6px) scaleY(0.92); }
  to   { opacity: 1; transform: translateY(0)    scaleY(1); }
}

.mobile-nav-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,205,52,0.5), transparent);
}

.mobile-nav-overlay a {
  font-family: var(--font-b, 'DM Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 20px;
  color: rgba(255, 255, 255, 0.80);
  border-radius: 12px;
  min-height: 48px;
  display: flex;
  align-items: center;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.18s ease, color 0.18s ease;
  position: relative;
}
.mobile-nav-overlay a::before {
  content: '';
  position: absolute;
  left: 12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,205,52,0.4);
  transition: background 0.18s ease;
}
.mobile-nav-overlay a.active {
  background: rgba(255, 205, 52, 0.18);
  color: #ffcd34;
  font-weight: 700;
}
.mobile-nav-overlay a.active::before {
  background: #ffcd34;
}
.mobile-nav-overlay a:not(.active):hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* No separate close button — tapping hamburger again closes it */
.mobile-nav-close { display: none; }


/* ── Mobile breakpoint ── */

/* ══════════════════════════════════════════════════
   MOBILE TWO-PILL HEADER
   Desktop: hide mob-header-bar, show nav-pill
   Mobile:  hide nav-pill, show mob-header-bar
══════════════════════════════════════════════════ */

/* Always hidden on desktop */
.mob-header-bar {
  display: none;
}

@media (max-width: 768px) {

  /* Hide desktop nav-pill */
  .nav-pill { display: none !important; }

  /* Show mobile two-pill bar */
  .mob-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }

  /* ── Left pill: logos ── */
  .mob-logo-pill {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid rgba(255, 205, 52, 0.65);
    box-shadow: 0 4px 20px rgba(10, 33, 61, 0.13);
    min-height: 50px;
  }
  .mob-logo-main {
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0;
  }
  .mob-logo-div {
    display: block;
    width: 1.5px;
    height: 24px;
    background: rgba(10, 33, 61, 0.20);
    margin: 0 12px;
    flex-shrink: 0;
    border-radius: 2px;
  }
  .mob-logo-brand {
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0;
  }

  /* ── Right pill: hamburger ── */
  .mob-burger-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 54px;
    height: 50px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid rgba(255, 205, 52, 0.65);
    box-shadow: 0 4px 20px rgba(10, 33, 61, 0.13);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .mob-burger-pill:hover {
    background: rgba(255, 205, 52, 0.18);
    border-color: rgba(255, 205, 52, 0.75);
  }
  .mob-burger-pill span {
    display: block;
    width: 20px;
    height: 2px;
    background: #0a213d;
    border-radius: 2px;
    transition: transform 0.32s ease, opacity 0.22s ease, width 0.22s ease;
    pointer-events: none;
  }
  /* Animate to X when open */
  .mob-burger-pill.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mob-burger-pill.open span:nth-child(2) { opacity: 0; width: 0; }
  .mob-burger-pill.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mob-burger-pill.open {
    background: rgba(10, 33, 61, 0.85);
    border-color: rgba(255, 205, 52, 0.60);
  }
  .mob-burger-pill.open span { background: #ffffff; }

  /* Header position on mobile */
  .header {
    top: 14px;
    left: 4%;
    right: 4%;
  }
}
/* ══════════════════════════════════════════════════
   FEATURED PRODUCTS — MOBILE
   • Single column, landscape cards (one per row)
   • Tap = info opens & stays; tap again = closes
   • Arrow button expands to show "Enquire" label
══════════════════════════════════════════════════ */


/* ─── MOBILE BASE ─── */
@media (max-width: 768px) {
  .featured-products { padding: 56px 16px 64px; }

  /* Single column — cards stacked one by one */
  .fp-grid {
    grid-template-columns: 1fr;
    gap : 14px;
    max-width: 100%;
  }

  /* Wide landscape card — comfortable height */
  .fp-slot {
    aspect-ratio: 16 / 9;
    position    : relative;
  }

  :root { --pp-cut: 52px; --pp-r: 20px; }

  .fp-name    { font-size: 17px; }
  .fp-tag     { font-size: 10px; padding: 3px 10px; margin-bottom: 6px; }
  .fp-content { bottom: 14px; left: 14px; right: calc(var(--pp-cut) + 8px); }
  .fp-extra   { display: none; }

  /* ── Arrow button: show "Enquire" label beside arrow ── */
  .fp-circle {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: center;
    gap            : 5px;
    width          : auto !important;
    height         : 36px !important;
    min-width      : 36px;
    padding        : 0 12px 0 10px;
    border-radius  : 999px !important;
    /* Override --pp-r based bottom/right positioning for landscape card */
    bottom: 12px;
    right : 12px;
    transition: background .28s ease, box-shadow .28s ease,
                transform .28s cubic-bezier(.22,1,.36,1),
                padding .28s ease, width .28s ease;
  }

  /* Arrow starts ↗ (-45°), rotates → (0°) on touch */
  .fp-arrow {
    transform : rotate(-45deg);
    font-size : 13px;
    transition: transform .34s cubic-bezier(.22,1,.36,1);
  }

  /* ── OPENED card (.touched) ── */
  .fp-slot.touched .fp-card {
    transform : translateY(-3px) scale(1.006);
    box-shadow: 0 16px 44px rgba(10,33,61,0.24);
  }
  .fp-slot.touched .fp-img     { transform: scale(1.07); }
  .fp-slot.touched .fp-overlay {
    background: linear-gradient(
      158deg,
      rgba(5,14,28,.15) 0%,
      rgba(5,14,28,.93) 100%
    );
  }
  .fp-slot.touched .fp-extra {
    display   : block !important;
    max-height: 140px !important;
    opacity   : 1 !important;
    transform : translateY(0) !important;
    transition: max-height .35s cubic-bezier(.22,1,.36,1),
                opacity .28s ease,
                transform .28s cubic-bezier(.22,1,.36,1) !important;
  }
  .fp-slot.touched .fp-desc  { font-size: 12px; line-height: 1.6; }
  .fp-slot.touched .fp-feats { margin-top: 6px; }
  .fp-slot.touched .fp-feats span { font-size: 10px; padding: 3px 9px; }
  .fp-slot.touched .fp-name  { font-size: 17px; }

  /* Circle turns gold */
  .fp-slot.touched .fp-circle {
    background: var(--gold) !important;
    box-shadow: 0 4px 18px rgba(255,205,52,.50), 0 0 0 1.5px var(--gold-dk) !important;
    transform : scale(1.06) !important;
  }
  .fp-slot.touched
  .fp-slot.touched .fp-arrow { transform: rotate(0deg) !important; color: var(--navy); }

  /* Hint: when card NOT touched, pulse the circle softly to draw attention */
  .fp-slot:not(.touched) .fp-circle {
    animation: enquirePulse 2.8s ease-in-out infinite;
  }
  @keyframes enquirePulse {
    0%, 100% { box-shadow: 0 2px 14px rgba(0,0,0,.22), 0 0 0 0 rgba(255,205,52,0); }
    50%       { box-shadow: 0 2px 14px rgba(0,0,0,.22), 0 0 0 5px rgba(255,205,52,0.28); }
  }
}

/* 480px — same single column, slightly smaller text */
@media (max-width: 480px) {
  .fp-slot { aspect-ratio: 16 / 9; }
  :root    { --pp-cut: 46px; --pp-r: 18px; }
  .fp-name { font-size: 15px; }
}

/* ── Enquiry info hint below CTA ── */
.products-cta {
  display        : flex;
  flex-direction : column;
  align-items    : center;
}
.fp-mobile-hint {
  display      : inline-block;
  font-family  : var(--font-b);
  font-size    : 13px;
  color        : var(--text-muted);
  background   : rgba(10,33,61,0.05);
  border       : 1px solid rgba(10,33,61,0.11);
  border-radius: 999px;
  padding      : 7px 20px;
  margin-top   : 16px;
  text-align   : center;
  white-space  : nowrap;
  line-height  : 1.4;
}
.fp-mobile-hint strong { color: var(--text-head); font-weight: 700; }

/* On very narrow screens — allow wrap but keep centred */
@media (max-width: 360px) {
  .fp-mobile-hint { white-space: normal; padding: 7px 16px; font-size: 12px; }
}