/* ============================================================
   Gulf Engines Store — design system
   Shares tokens with gulfengines.com
   Type: Montserrat (Latin) · Risala (Arabic, brand font)
   ============================================================ */

/* Risala — brand Arabic face. Arabic-only: Latin letters and
   Western digits intentionally fall through to Montserrat. */
@font-face {
  font-family: 'Risala';
  src: url('/static/fonts/risala-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Risala';
  src: url('/static/fonts/risala-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Risala';
  src: url('/static/fonts/risala-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Risala';
  src: url('/static/fonts/risala-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Risala';
  src: url('/static/fonts/risala-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --gulf-blue: #1776BB;
  --gulf-blue-bright: #2f97e0;
  --gulf-blue-dark: #0d4a77;
  --gulf-blue-deep: #0a2c47;
  --ice-blue: #DCEBF7;
  --sand: #F0B45C;
  --sand-bright: #ffcf85;
  --bg: #070b0f;
  --bg-2: #0a1119;
  --panel: #0d1722;
  --panel-2: #111f2e;
  /* ── DAY (power off) — sampled from hero-day.mp4 sky:
     #5580aa top → #5787b5 upper → #759cc1 mid → #94a2b1 horizon ── */
  --sky-deep: #5580aa;
  --sky: #5787b5;
  --sky-mid: #759cc1;
  --sky-haze: #94a2b1;
  --page-grad: linear-gradient(180deg, #6f9ac4 0%, #9dbdd8 32%, #c7dcec 68%, #e3edf5 100%);
  --line: rgba(8, 32, 47, .16);
  --text: #08202f;
  --muted: #415d75;
  --accent-text: #10618f;
  --glass: rgba(255, 255, 255, .44);
  --glass-2: rgba(255, 255, 255, .26);
  --glass-edge: rgba(255, 255, 255, .60);
  --glass-blur: 18px;
  --thumb-wash: rgba(255, 255, 255, .40);
  --input-bg: rgba(255, 255, 255, .58);
  --overlay-bg: rgba(222, 236, 246, .90);
  --footer-grad: linear-gradient(180deg, transparent, rgba(255, 255, 255, .40));
  --font-latin: 'Montserrat', sans-serif;
  --font-arabic: 'Risala', 'Montserrat', 'Cairo', sans-serif;
  /* Numbers led by Latin, Arabic units/currency picked up by Risala.
     The two faces are complementary: Montserrat has no Arabic,
     Risala has no Latin or Western digits. */
  --font-mixed: 'Montserrat', 'Risala', 'Cairo', sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-soft: 0 12px 34px rgba(10, 38, 60, .18);
  --shadow-hover: 0 22px 58px rgba(10, 38, 60, .26);
  --glow: 0 0 0 1px rgba(23,118,187,.35), 0 12px 50px rgba(23,118,187,.25);
  --glow-warm: 0 0 0 1px rgba(240,180,92,.35), 0 12px 60px rgba(240,180,92,.28);
  --radius: 18px;
  --header-h: 74px;
}

/* ── NIGHT (power on) ─────────────────────────────────────────────── */
html.power-on {
  --page-grad: linear-gradient(180deg, #070b0f, #0a1119);
  --line: rgba(220, 235, 247, .09);
  --text: #eef6fc;
  --muted: #8ea6b8;
  --accent-text: #2f97e0;
  --glass: rgba(17, 31, 46, .52);
  --glass-2: rgba(13, 23, 34, .40);
  --glass-edge: rgba(220, 235, 247, .10);
  --thumb-wash: rgba(220, 235, 247, .05);
  --input-bg: rgba(7, 11, 15, .60);
  --overlay-bg: rgba(7, 11, 15, .88);
  --footer-grad: linear-gradient(180deg, transparent, rgba(10, 17, 25, .80));
  --shadow-soft: 0 12px 40px rgba(0, 0, 0, .45);
  --shadow-hover: 0 24px 70px rgba(0, 0, 0, .60);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--page-grad);
  color: var(--text);
  transition: color .9s var(--ease-out);
  font-family: var(--font-latin);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
html[lang="ar"] body { font-family: var(--font-arabic); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: rgba(23,118,187,.45); color: #fff; }

/* ---------- ambient background ---------- */
.ambient {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  /* DAY sky */
  background:
    radial-gradient(900px 620px at 78% 4%, rgba(255,246,224,.55), transparent 62%),
    var(--page-grad);
}
.ambient::before { /* NIGHT, crossfaded in — matches the video transition */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(23,118,187,.14), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(13,74,119,.18), transparent 60%),
    linear-gradient(180deg, #070b0f, #0a1119);
  opacity: 0;
  transition: opacity 1.15s var(--ease-out);
}
.power-on .ambient::before { opacity: 1; }
.ambient::after { /* faint grid */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(8,32,47,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,32,47,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1200px 700px at 50% 0%, #000 30%, transparent 75%);
  transition: opacity 1s;
}
.cursor-glow {
  position: fixed; z-index: -1; pointer-events: none;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(23,118,187,.10), transparent 65%);
  transform: translate(-50%, -50%);
  transition: opacity .5s;
  opacity: 0;
}
@media (hover:hover) { .power-on .cursor-glow { opacity: 1; } }

/* ---------- power-on global state ---------- */
.power-on .ambient::after {
  background-image:
    linear-gradient(rgba(220,235,247,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220,235,247,.028) 1px, transparent 1px);
  animation: gridPulse 4s ease-in-out infinite;
}
@keyframes gridPulse { 50% { opacity: .55; } }

/* product imagery ignition */
.p-img { transition: filter .9s var(--ease-out), transform .5s var(--ease-out); }
.power-on .p-img { filter: brightness(1.14) saturate(1.12) drop-shadow(0 0 26px rgba(47,151,224,.35)); }
.power-on .cat-lighting .p-img,
.power-on [data-cat~="lighting"] .p-img {
  filter: brightness(1.32) saturate(1.2) drop-shadow(0 0 34px rgba(240,180,92,.65)) drop-shadow(0 0 80px rgba(255,207,133,.35));
  animation: lampFlicker 6s linear infinite;
}
@keyframes lampFlicker {
  0%, 100% { filter: brightness(1.32) saturate(1.2) drop-shadow(0 0 34px rgba(240,180,92,.65)) drop-shadow(0 0 80px rgba(255,207,133,.35)); }
  3% { filter: brightness(1.22) saturate(1.15) drop-shadow(0 0 24px rgba(240,180,92,.5)) drop-shadow(0 0 60px rgba(255,207,133,.25)); }
  5%, 52% { filter: brightness(1.34) saturate(1.2) drop-shadow(0 0 36px rgba(240,180,92,.68)) drop-shadow(0 0 84px rgba(255,207,133,.38)); }
  54% { filter: brightness(1.26); }
}

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 clamp(16px, 4vw, 48px);
  gap: clamp(12px, 2vw, 28px);
  background: rgba(7, 11, 15, .72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(220, 235, 247, .10);
  transition: background .5s, box-shadow .5s, border-color .5s, backdrop-filter .5s;
}
/* only the hero page starts transparent, because the video is behind it */
body.has-hero .site-header:not(.scrolled) {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Deliberately dark in both themes — the header sits over the hero
   video, so its contents must always be light-on-dark. */
.site-header.scrolled {
  background: rgba(7, 11, 15, .72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: rgba(220, 235, 247, .10);
}
.power-on .site-header.scrolled { box-shadow: 0 8px 40px rgba(23,118,187,.12); }
.logo-link { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-link img { height: 46px; width: auto; transition: filter .8s; }
.power-on .logo-link img { filter: drop-shadow(0 0 14px rgba(47,151,224,.7)); }
.logo-text { font-weight: 700; letter-spacing: .12em; font-size: 14px; text-transform: uppercase; font-family: var(--font-latin); white-space: nowrap; }
.logo-text b { color: var(--gulf-blue-bright); }

.main-nav { display: flex; gap: clamp(10px, 1.6vw, 26px); margin-inline: auto; }
.main-nav a {
  font-size: 14.5px; font-weight: 600; color: #9fb6c8;
  padding: 8px 2px; position: relative; white-space: nowrap;
  transition: color .3s;
}
.main-nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--gulf-blue-bright), var(--sand));
  transform: scaleX(0); transition: transform .35s var(--ease-out);
  border-radius: 2px;
}
.main-nav a:hover, .main-nav a.active { color: #fff; }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icon-btn {
  position: relative;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(220,235,247,.20); color: #eaf3fa;
  transition: all .3s var(--ease-out);
}
.icon-btn:hover { border-color: var(--gulf-blue-bright); box-shadow: var(--glow); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.basket-count {
  position: absolute; top: -4px; inset-inline-end: -4px;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--sand); color: #14100a;
  font-size: 11px; font-weight: 700; font-family: var(--font-latin);
  display: grid; place-items: center; padding: 0 4px;
  opacity: 0; transform: scale(.5); transition: all .3s var(--ease-out);
}
.basket-count.show { opacity: 1; transform: scale(1); }
.lang-btn {
  border: 1px solid rgba(220,235,247,.20); background: transparent; color: #eaf3fa;
  padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 13px;
  font-family: var(--font-arabic); letter-spacing: .02em;
  transition: all .3s;
}
html[lang="ar"] .lang-btn { font-family: var(--font-latin); }
.lang-btn:hover { border-color: var(--gulf-blue-bright); box-shadow: var(--glow); }

/* ── THE POWER BUTTON ────────────────────────────────────────
   Fixed on the left, follows scroll. Glass core + a ring that
   draws itself on activation. Restrained until hovered.        */
/* Vertically centred on the left. This position overlaps the left edge
   of .container at common desktop widths, which previously swallowed
   clicks meant for the leftmost product card and the basket quantity
   controls. The container reserves a gutter wide enough to clear it
   (see the >=1024px rule below), so content never sits underneath. */
.power-fab {
  position: fixed; left: 26px; top: 50%; translate: 0 -50%;
  z-index: 95;
  width: 68px; height: 68px; padding: 0;
  border: 0; background: none;
  display: grid; place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.power-fab > * { grid-area: 1 / 1; }

/* glass core */
.pf-core {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    linear-gradient(155deg, rgba(233,244,252,.12), rgba(233,244,252,.02) 46%),
    rgba(9, 15, 22, .80);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 2px rgba(0,0,0,.5),
    0 10px 30px rgba(0,0,0,.5);
  transition: background .55s var(--ease-out), box-shadow .55s var(--ease-out), scale .35s var(--ease-out);
}
.pf-glyph {
  width: 23px; height: 23px;
  fill: none; stroke: #b3c8db; stroke-width: 2.2; stroke-linecap: round;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
  transition: stroke .55s var(--ease-out), filter .55s var(--ease-out);
}

/* progress ring */
.pf-ring { width: 68px; height: 68px; rotate: -90deg; overflow: visible; pointer-events: none; }
.pf-ring circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.pf-ring-track { stroke: rgba(233,244,252,.20); }
.pf-ring-fill {
  stroke: var(--sand-bright);
  stroke-dasharray: 283;          /* 2πr, r=45 */
  stroke-dashoffset: 283;         /* fully retracted while off */
  transition: stroke-dashoffset .95s var(--ease-out);
  filter: drop-shadow(0 0 6px rgba(255,207,133,.85));
}

/* state caption */
.pf-state {
  position: absolute; top: calc(100% + 9px); left: 50%; translate: -50% 0;
  font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  font-family: var(--font-latin); color: #c3d4e2;
  white-space: nowrap; transition: color .55s, text-shadow .55s;
  /* stays legible over the bright daytime video */
  text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 0 22px rgba(0,0,0,.6);
}
html[dir="rtl"] .pf-state { font-family: var(--font-arabic); letter-spacing: .04em; text-transform: none; font-size: 10.5px; }

/* hover tooltip — the invitation, shown only on intent */
.pf-tip {
  position: absolute; left: calc(100% + 14px); top: 50%; translate: 0 -50%;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(9,15,22,.94);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; pointer-events: none;
  opacity: 0; translate: -6px -50%;
  transition: opacity .3s var(--ease-out), translate .3s var(--ease-out);
}
html[dir="rtl"] .pf-tip { left: auto; right: calc(100% + 14px); translate: 6px -50%; }
.power-fab:hover .pf-tip, .power-fab:focus-visible .pf-tip { opacity: 1; translate: 0 -50%; }

/* interaction */
.power-fab:hover .pf-core { scale: 1.06; }
.power-fab:active .pf-core { scale: .96; }
.power-fab:hover .pf-glyph { stroke: var(--ice-blue); }
.power-fab:focus-visible { outline: none; }
.power-fab:focus-visible .pf-ring-track { stroke: var(--gulf-blue-bright); }

/* a slow breath while off, so it reads as interactive without nagging */
.power-fab:not(:hover) .pf-core { animation: pfBreathe 4.2s ease-in-out infinite; }
@keyframes pfBreathe {
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 2px rgba(0,0,0,.5),
                    0 10px 30px rgba(0,0,0,.5), 0 0 0 6px rgba(47,151,224,.055); }
}

/* ── energised ── */
.power-on .pf-ring-fill { stroke-dashoffset: 0; }
.power-on .pf-core {
  background:
    linear-gradient(155deg, rgba(255,225,180,.22), rgba(240,180,92,.06) 46%),
    rgba(28, 20, 9, .78);
  box-shadow:
    inset 0 1px 0 rgba(255,236,206,.3),
    inset 0 -1px 2px rgba(0,0,0,.45),
    0 10px 30px rgba(0,0,0,.45),
    0 0 22px rgba(240,180,92,.34),
    0 0 60px rgba(240,180,92,.16);
}
.power-on .pf-glyph {
  stroke: var(--sand-bright);
  filter: drop-shadow(0 0 7px rgba(255,207,133,.95));
}
.power-on .pf-state { color: var(--sand-bright); text-shadow: 0 0 12px rgba(240,180,92,.7); }
.power-on .power-fab:not(:hover) .pf-core { animation: none; }

@media (max-width: 1023px) {
  /* no rail available — park it in the corner instead */
  .power-fab { top: auto; bottom: 24px; translate: 0 0; }
  .footer-bottom { padding-bottom: 84px; }
}
@media (max-width: 700px) {
  .power-fab { left: 14px; top: auto; bottom: 20px; translate: 0 0; width: 60px; height: 60px; }
  .pf-core { width: 48px; height: 48px; }
  .pf-ring { width: 60px; height: 60px; }
  .pf-glyph { width: 20px; height: 20px; }
  .pf-state { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .power-fab:not(:hover) .pf-core { animation: none; }
  .pf-ring-fill { transition: none; }
}

/* THE POWER SWITCH */
.power-switch {
  display: flex; align-items: center; gap: 9px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px;
  transition: all .5s var(--ease-out);
}
.power-switch .pw-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  font-family: var(--font-latin); color: var(--muted); text-transform: uppercase;
  transition: color .5s;
}
.power-switch .pw-track {
  width: 40px; height: 22px; border-radius: 999px;
  background: #17222e; border: 1px solid var(--line);
  position: relative; transition: all .5s var(--ease-out);
}
.power-switch .pw-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #55708a;
  transition: all .45s var(--ease-out);
}
.power-switch:hover { border-color: var(--gulf-blue); }
.power-on .power-switch {
  border-color: rgba(240,180,92,.6);
  box-shadow: 0 0 20px rgba(240,180,92,.25), inset 0 0 12px rgba(240,180,92,.08);
}
.power-on .power-switch .pw-label { color: var(--sand-bright); text-shadow: 0 0 12px rgba(240,180,92,.8); }
.power-on .power-switch .pw-track { background: rgba(240,180,92,.25); border-color: rgba(240,180,92,.5); }
.power-on .power-switch .pw-knob {
  left: 20px; background: var(--sand-bright);
  box-shadow: 0 0 12px rgba(255,207,133,.9), 0 0 30px rgba(240,180,92,.6);
}

.menu-btn { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; font-family: inherit;
  border: 1px solid transparent;
  transition: all .35s var(--ease-out);
  position: relative; overflow: hidden;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gulf-blue), var(--gulf-blue-dark));
  color: #fff;
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
html[dir="rtl"] .btn-primary::before { transform: translateX(120%); }
.btn-primary:hover { box-shadow: var(--glow); transform: translateY(-2px); }
.btn-primary:hover::before { transform: translateX(120%); }
html[dir="rtl"] .btn-primary:hover::before { transform: translateX(-120%); }
.btn-ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--gulf-blue-bright); box-shadow: var(--glow); transform: translateY(-2px); }
.btn-whatsapp { background: linear-gradient(135deg, #1fa855, #128c46); color: #fff; }
.btn-whatsapp:hover { box-shadow: 0 0 0 1px rgba(31,168,85,.4), 0 12px 50px rgba(31,168,85,.3); transform: translateY(-2px); }
.btn svg { width: 17px; height: 17px; fill: currentColor; }

/* ---------- layout helpers ---------- */
.container { width: min(1240px, calc(100% - clamp(32px, 8vw, 96px))); margin-inline: auto; }
/* Reserve a left/right rail wide enough that the floating power button
   (left: 26px, 68px wide) never overlaps interactive content. */
@media (min-width: 1024px) {
  .container { width: min(1240px, calc(100% - 232px)); }
}
main { padding-top: var(--header-h); }
.section { padding: clamp(56px, 9vw, 110px) 0; position: relative; }
.section-head { margin-bottom: clamp(30px, 5vw, 56px); }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-text); font-family: var(--font-latin);
  margin-bottom: 14px;
}
.kicker::before { content: ""; width: 26px; height: 1.5px; background: var(--accent-text); }
h1, h2, h3 { line-height: 1.25; font-weight: 700; }
.section-head h2 { font-size: clamp(26px, 4vw, 42px); }
.section-head p { color: var(--muted); max-width: 640px; margin-top: 12px; font-size: 16px; }

/* theme handoff */
.prod-card, .cat-card, .trust-item, .faq-item, .contact-card, .auth-card,
.basket-item, .basket-summary, .cta-band, .pdp-main-img, .site-footer,
.form-grid input, .form-grid textarea {
  transition: background-color .9s var(--ease-out), border-color .9s var(--ease-out),
              box-shadow .9s var(--ease-out), color .9s var(--ease-out);
}

/* ---------- reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.92); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-scale.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .001s !important; }
}

/* ---------- hero (video, matches gulfengines.com theme) ---------- */
.hero {
  min-height: 100svh;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  text-align: center;
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--bg); }
.hero-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
.hero-vid.on { opacity: 1; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(70% 52% at 50% 44%, rgba(7,11,15,.62) 0%, rgba(7,11,15,.34) 45%, transparent 78%),
    linear-gradient(180deg, rgba(7,11,15,.62) 0%, transparent 26%, transparent 66%, rgba(7,11,15,.95) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(7,11,15,.42) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 50px 0 90px;
}
.hero-kicker {
  font-size: 13px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ice-blue); font-family: var(--font-latin);
  margin-bottom: 24px;
  animation: fadeUp 1s var(--ease-out) both .1s;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
html[dir="rtl"] .hero-kicker { letter-spacing: .06em; font-family: var(--font-arabic); }
.hero h1 {
  font-size: clamp(36px, 5.4vw, 74px);
  font-weight: 300; line-height: 1.1; letter-spacing: -.015em;
  color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,.55);
  max-width: 22ch;
  animation: fadeUp 1s var(--ease-out) both .22s;
}
.hero h1 b { font-weight: 600; display: block; }
html[dir="rtl"] .hero h1 { letter-spacing: 0; line-height: 1.25; }
.power-on .hero h1 b { text-shadow: 0 4px 40px rgba(0,0,0,.55), 0 0 60px rgba(240,180,92,.35); }
.hero p.lead {
  color: rgba(238,246,252,.85); font-size: clamp(15px, 1.6vw, 18.5px);
  max-width: 56ch; margin-top: 22px;
  text-shadow: 0 2px 18px rgba(0,0,0,.7);
  animation: fadeUp 1s var(--ease-out) both .34s;
}
.hero-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; justify-content: center; animation: fadeUp 1s var(--ease-out) both .46s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* hero controls always overlay the video, so they stay light */
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.hero .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.10); box-shadow: none; }
.hero-kicker { color: #dceaf7; }

.scroll-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: rgba(238,246,252,.75); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  font-family: var(--font-latin);
}
.scroll-hint .scroll-line {
  width: 1px; height: 42px; margin: 0 auto 10px;
  background: linear-gradient(180deg, #fff, transparent);
  animation: scrollLine 2.2s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes scrollLine { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

/* ---------- category grid (tall cards) ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 1180px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat-card {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-soft); border-radius: var(--radius);
  aspect-ratio: 3 / 4.9;
  padding: 26px 18px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: all .45s var(--ease-out);
  position: relative; overflow: hidden;
}
.cat-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(260px 320px at 50% 30%, rgba(23,118,187,.18), transparent 72%);
  opacity: 0; transition: opacity .45s;
}
.cat-card::after { /* base line accent */
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--gulf-blue-bright), var(--sand));
  transform: scaleX(0); transition: transform .45s var(--ease-out);
}
.cat-card:hover { transform: translateY(-8px); border-color: rgba(47,151,224,.45); box-shadow: var(--shadow-hover); }
.cat-card:hover::before { opacity: 1; }
.cat-card:hover::after { transform: scaleX(1); }
.cat-card img {
  width: min(78%, 170px); max-height: 52%; object-fit: contain;
  margin: auto; position: relative;
  transition: transform .5s var(--ease-out);
}
.cat-card:hover img { transform: scale(1.08) translateY(-4px); }
.cat-card h3 { font-size: 17px; position: relative; }
.cat-card span { color: var(--muted); font-size: 13px; font-family: var(--font-mixed); position: relative; margin-top: 4px; }
.power-on .cat-card img { filter: drop-shadow(0 0 18px rgba(47,151,224,.5)); }

/* ---------- product cards ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.prod-card {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-soft); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: all .45s var(--ease-out);
  position: relative;
}
.prod-card:hover { transform: translateY(-7px); border-color: rgba(47,151,224,.45); box-shadow: var(--shadow-hover); }
.power-on .prod-card:hover { box-shadow: var(--glow); }
.power-on .prod-card[data-cat~="lighting"]:hover { box-shadow: var(--glow-warm); }
.prod-thumb {
  aspect-ratio: 1; display: grid; place-items: center;
  background: radial-gradient(320px 220px at 50% 42%, var(--thumb-wash), transparent 78%);
  padding: 22px; position: relative;
}
.prod-thumb img { max-height: 100%; object-fit: contain; transition: transform .5s var(--ease-out); }
.prod-card:hover .prod-thumb img { transform: scale(1.06); }
.sale-badge {
  position: absolute; top: 12px; inset-inline-start: 12px;
  background: var(--sand); color: #14100a;
  font-size: 12px; font-weight: 700; font-family: var(--font-latin);
  padding: 4px 11px; border-radius: 999px;
}
.prod-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod-cat { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); font-weight: 700; font-family: var(--font-latin); }
/* Arabic script is cursive: letter-spacing and uppercase don't apply. */
html[dir="rtl"] .prod-cat { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
html[dir="rtl"] .kicker { font-family: var(--font-arabic); letter-spacing: .04em; text-transform: none; }
html[dir="rtl"] .scroll-hint { font-family: var(--font-arabic); letter-spacing: .06em; text-transform: none; }
.prod-name { font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.prod-name a::after { content: ""; position: absolute; inset: 0; }
.prod-price { margin-top: auto; display: flex; align-items: baseline; gap: 10px; font-family: var(--font-mixed); }
.prod-price .now { font-size: 18px; font-weight: 700; color: var(--text); }
.prod-price .was { font-size: 13.5px; color: var(--muted); text-decoration: line-through; }
.prod-price .quote { font-size: 13.5px; color: var(--sand); font-weight: 700; font-family: inherit; }
.prod-add {
  position: relative; z-index: 2;
  margin-top: 10px; padding: 11px; border-radius: 12px;
  border: 1px solid var(--line); background: transparent; color: var(--text);
  font-weight: 700; font-size: 13.5px;
  transition: all .3s var(--ease-out);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.prod-add:hover { border-color: var(--gulf-blue-bright); background: rgba(23,118,187,.12); box-shadow: var(--glow); }
.prod-add.added { border-color: rgba(31,168,85,.6); color: #4cd07d; background: rgba(31,168,85,.08); }
.prod-add svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- filter pills ---------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.filter-pill {
  padding: 10px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  border: 1px solid var(--line); color: var(--muted); background: transparent;
  transition: all .3s var(--ease-out);
}
.filter-pill:hover { color: var(--text); border-color: var(--gulf-blue); }
.filter-pill.active {
  background: linear-gradient(135deg, var(--gulf-blue), var(--gulf-blue-dark));
  color: #fff; border-color: transparent; box-shadow: var(--glow);
}

/* ---------- product page ---------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.pdp-gallery { position: sticky; top: calc(var(--header-h) + 24px); }
.pdp-main-img {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-soft);
  border-radius: var(--radius);
  aspect-ratio: 1; display: grid; place-items: center; padding: 34px;
  overflow: hidden;
}
.pdp-main-img img { max-height: 100%; object-fit: contain; transition: transform .5s var(--ease-out), opacity .25s; }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pdp-thumbs button {
  width: 72px; height: 72px; border-radius: 12px; padding: 8px;
  background: var(--glass-2); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); border: 1px solid var(--glass-edge);
  transition: all .3s;
}
.pdp-thumbs button.active, .pdp-thumbs button:hover { border-color: var(--gulf-blue-bright); box-shadow: var(--glow); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pdp-info .prod-cat { margin-bottom: 8px; }
.pdp-info h1 { font-size: clamp(24px, 3.4vw, 38px); margin-bottom: 14px; }
.pdp-info .desc { color: var(--muted); font-size: 16px; max-width: 56ch; }
.pdp-price { display: flex; align-items: baseline; gap: 14px; margin: 24px 0; font-family: var(--font-mixed); }
.pdp-price .now { font-size: 32px; font-weight: 700; color: var(--text); }
.pdp-price .was { font-size: 18px; color: var(--muted); text-decoration: line-through; }
.pdp-price .quote-txt { font-size: 19px; color: var(--sand); font-weight: 700; font-family: inherit; }
.pdp-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp-meta { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 20px; display: grid; gap: 10px; }
.pdp-meta div { display: flex; gap: 10px; color: var(--muted); font-size: 14.5px; align-items: center; }
.pdp-meta svg { width: 17px; height: 17px; stroke: var(--gulf-blue-bright); fill: none; stroke-width: 1.8; flex-shrink: 0; }

/* ---------- trust strip ---------- */
.trust-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.trust-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-soft);
  border-radius: var(--radius); padding: 20px;
  transition: all .4s var(--ease-out);
}
.trust-item:hover { transform: translateY(-4px); border-color: rgba(47,151,224,.35); }
.trust-item svg { width: 30px; height: 30px; stroke: var(--gulf-blue-bright); fill: none; stroke-width: 1.6; flex-shrink: 0; transition: all .5s; }
.power-on .trust-item svg { stroke: var(--sand-bright); filter: drop-shadow(0 0 10px rgba(240,180,92,.6)); }
.trust-item b { display: block; font-size: 14.5px; }
.trust-item span { color: var(--muted); font-size: 13px; }

/* ---------- partners marquee ---------- */
.marquee { overflow: hidden; position: relative; padding: 10px 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: clamp(40px, 6vw, 90px); width: max-content; animation: marquee 26s linear infinite; align-items: center; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
html[dir="rtl"] .marquee-track { animation-name: marqueeRtl; }
@keyframes marqueeRtl { to { transform: translateX(50%); } }
.marquee img { height: 52px; width: auto; object-fit: contain; opacity: .6; filter: grayscale(.4) brightness(1.6); transition: all .4s; }
.marquee img:hover { opacity: 1; filter: none; }
.power-on .marquee img { opacity: .9; filter: brightness(1.8) drop-shadow(0 0 12px rgba(47,151,224,.3)); }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(23,118,187,.20), transparent 65%),
    var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-soft);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(34px, 6vw, 70px);
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(47,151,224,.08), transparent 85%);
  animation: spin 14s linear infinite; pointer-events: none;
}
.cta-band h2 { font-size: clamp(22px, 3.4vw, 36px); max-width: 22ch; }
.cta-band p { color: var(--muted); margin-top: 8px; }
.cta-band > * { position: relative; z-index: 1; }

/* ---------- info pages ---------- */
.prose { max-width: 780px; }
.prose h1 { font-size: clamp(28px, 4.4vw, 46px); margin-bottom: 22px; }
.prose h2 { font-size: 22px; margin: 34px 0 12px; color: var(--text); }
.prose p { color: var(--muted); margin-bottom: 14px; font-size: 16px; }
.prose li { color: var(--muted); margin-bottom: 8px; padding-inline-start: 22px; position: relative; }
.prose li::before { content: "◆"; position: absolute; inset-inline-start: 0; color: var(--gulf-blue-bright); font-size: 10px; top: 6px; }

/* FAQ */
.faq-item {
  border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-soft);
}
.faq-item summary {
  padding: 20px 24px; cursor: pointer; font-weight: 700; font-size: 16px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  transition: color .3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; color: var(--gulf-blue-bright); transition: transform .3s var(--ease-out); font-family: var(--font-latin); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--gulf-blue-bright); }
.faq-item .faq-body { padding: 0 24px 20px; color: var(--muted); }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.contact-card {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-soft);
  border-radius: var(--radius); padding: clamp(24px, 4vw, 40px);
}
.contact-card h3 { margin-bottom: 18px; font-size: 20px; }
.contact-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-row:last-child { border-bottom: 0; }
.contact-row svg { width: 22px; height: 22px; stroke: var(--gulf-blue-bright); fill: none; stroke-width: 1.7; flex-shrink: 0; margin-top: 3px; }
.contact-row b { display: block; font-size: 14px; margin-bottom: 2px; }
.contact-row a, .contact-row span { color: var(--muted); font-size: 15px; direction: ltr; unicode-bidi: embed; }
.contact-row .rtl-ok { direction: inherit; }

/* form (mailto) */
.form-grid { display: grid; gap: 14px; }
.form-grid input, .form-grid textarea {
  width: 100%; background: var(--input-bg); border: 1px solid var(--glass-edge);
  border-radius: 12px; padding: 14px 16px; color: var(--text);
  font-family: inherit; font-size: 15px; transition: all .3s;
}
.form-grid input:focus, .form-grid textarea:focus { outline: none; border-color: var(--gulf-blue-bright); box-shadow: var(--glow); }
.form-grid textarea { min-height: 130px; resize: vertical; }

/* ---------- basket page ---------- */
.basket-list { display: grid; gap: 14px; }
.basket-item {
  display: grid; grid-template-columns: 86px 1fr auto; gap: 16px; align-items: center;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-soft);
  border-radius: var(--radius); padding: 14px 18px;
}
.basket-item .bi-img { width: 86px; height: 86px; border-radius: 12px; background: var(--thumb-wash); display: grid; place-items: center; padding: 8px; }
.basket-item .bi-img img { max-height: 100%; object-fit: contain; }
.basket-item h3 { font-size: 15.5px; }
.basket-item .bi-price { color: var(--muted); font-size: 13.5px; font-family: var(--font-mixed); }
.qty-ctrl { display: flex; align-items: center; gap: 4px; }
.qty-ctrl button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  background: transparent; color: var(--text); font-size: 16px; font-family: var(--font-latin);
  transition: all .25s;
}
.qty-ctrl button:hover { border-color: var(--gulf-blue-bright); }
.qty-ctrl b { min-width: 30px; text-align: center; font-family: var(--font-latin); }
.bi-remove { background: none; border: none; color: var(--muted); font-size: 13px; text-decoration: underline; margin-top: 4px; }
.bi-remove:hover { color: #ff7a7a; }
.basket-summary {
  margin-top: 26px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-soft);
  border-radius: var(--radius); padding: 26px;
}
.basket-summary .total-row { display: flex; justify-content: space-between; font-size: 17px; margin-bottom: 6px; }
.basket-summary .note { color: var(--muted); font-size: 13.5px; margin: 10px 0 20px; }
.basket-empty { text-align: center; padding: 60px 0; color: var(--muted); }
.basket-empty svg { width: 60px; height: 60px; stroke: var(--muted); fill: none; stroke-width: 1.2; margin: 0 auto 18px; }

/* ---------- search overlay ---------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--overlay-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: none; padding: clamp(80px, 14vh, 140px) 20px 40px;
  overflow-y: auto;
}
.search-overlay.open { display: block; animation: fadeIn .3s var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; } }
.search-box { max-width: 680px; margin: 0 auto; }
.search-box input {
  width: 100%; background: var(--glass); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); border: 1px solid var(--gulf-blue);
  border-radius: 16px; padding: 18px 22px; font-size: 18px; color: var(--text);
  font-family: inherit; box-shadow: var(--glow);
}
.search-box input:focus { outline: none; }
.search-results { max-width: 680px; margin: 18px auto 0; display: grid; gap: 10px; }
.search-results a {
  display: flex; gap: 14px; align-items: center;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-edge); border-radius: 14px; padding: 12px 16px;
  transition: all .25s;
}
.search-results a:hover { border-color: var(--gulf-blue-bright); box-shadow: var(--glow); }
.search-results img { width: 52px; height: 52px; object-fit: contain; }
.search-results .sr-name { font-weight: 700; font-size: 14.5px; }
.search-results .sr-price { color: var(--muted); font-size: 12.5px; font-family: var(--font-mixed); }
.search-close {
  position: fixed; top: 22px; inset-inline-end: 26px;
  background: none; border: none; color: var(--text); font-size: 34px; line-height: 1;
}

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 40px; background: var(--footer-grad); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 4vw, 56px); padding: clamp(44px, 7vw, 80px) 0 40px;
}
.site-footer h4 { font-size: 15px; margin-bottom: 16px; color: var(--text); letter-spacing: .04em; }
.site-footer p { color: var(--muted); font-size: 14px; }
.site-footer li { margin-bottom: 9px; }
.site-footer li a { color: var(--muted); font-size: 14px; transition: all .25s; }
.site-footer li a:hover { color: var(--gulf-blue-bright); padding-inline-start: 4px; }
.footer-logo { height: 48px; width: auto; margin-bottom: 14px; }
.footer-bottom { border-top: 1px solid var(--line); padding: 20px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.footer-bottom a { color: var(--gulf-blue-bright); }

/* WhatsApp floating */
.wa-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #1fa855, #128c46);
  display: grid; place-items: center;
  box-shadow: 0 10px 34px rgba(18,140,70,.45);
  transition: all .35s var(--ease-out);
}
.wa-float:hover { transform: translateY(-4px) scale(1.05); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }

/* ---------- auth ---------- */
.auth-wrap { max-width: 460px; margin: 0 auto; }
.auth-card {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-soft);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 42px);
}
.auth-card h1 { font-size: 26px; margin-bottom: 6px; }
.auth-card .auth-sub { color: var(--muted); font-size: 14.5px; margin-bottom: 24px; }
.auth-msg { display: none; font-size: 14px; font-weight: 600; padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; }
.auth-msg.err { display: block; color: #ff9a9a; background: rgba(255,90,90,.08); border: 1px solid rgba(255,90,90,.3); }
.auth-msg.ok { display: block; color: #6fe09a; background: rgba(31,168,85,.1); border: 1px solid rgba(31,168,85,.35); }
.auth-alt { text-align: center; margin-top: 20px; color: var(--muted); font-size: 14px; }
.auth-alt a { color: var(--gulf-blue-bright); font-weight: 700; }
.account-rows { display: grid; gap: 0; }
.account-rows .contact-row b { font-size: 13px; color: var(--muted); }
.account-rows .contact-row span { color: var(--text); font-size: 16px; }
.user-chip { display: none; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ice-blue); }
.icon-btn.logged-in { border-color: rgba(47,151,224,.55); color: var(--gulf-blue-bright); }

/* toast */
.toast {
  position: fixed; bottom: 96px; right: 24px; z-index: 300;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(31,168,85,.5);
  border-radius: 14px; padding: 14px 20px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-soft);
  opacity: 0; transform: translateY(14px); transition: all .4s var(--ease-out);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .main-nav {
    position: fixed; top: var(--header-h); inset-inline: 0; bottom: 0;
    background: rgba(7,11,15,.97); backdrop-filter: blur(20px);
    flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    transform: translateY(-110%); opacity: 0; pointer-events: none;
    transition: transform .5s var(--ease-out), opacity .4s;
    z-index: 99;
  }
  .main-nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .main-nav a { font-size: 20px; padding: 12px; }
  .menu-btn { display: grid; }
  .power-switch .pw-label { display: none; }
  .pdp { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-core { opacity: .5; inset-inline-end: -40%; }
}
@media (max-width: 560px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .prod-body { padding: 12px; }
  .basket-item { grid-template-columns: 64px 1fr; }
  .basket-item .bi-ctrl { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .lang-btn { padding: 8px 12px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}