/* ------------------------------
   Ghayma (غيمة) — styles.css v1.2.1
   ------------------------------ */

/* 0) Force light palette */
:root { color-scheme: light; }

/* 1) Reset (lite) */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html:focus-within { scroll-behavior: smooth; }
html, body { min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
html, body { overflow-x: hidden; } /* prevent horizontal jank on dir swap */

img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 2) Theme */
:root{
  --bg:#F5F5F5; --text:#0f172a; --muted:#374151; --border:#e2e8f0; --card:#fff;
  --accent:#577c8e; --accent-600:#436274; --accent-50:rgba(87,124,142,.12);
  --primary:#1e293b; --shadow:0 10px 30px rgba(87,124,142,.14); --radius:16px;
  --container:1200px; --pad:clamp(16px,3vw,24px);
  --ar-font:"Noto Kufi Arabic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --en-font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --btn-ink-1:#1f2937; --btn-ink-2:#0f172a;

  /* Measured via JS for perfect stacking/anchors */
  --topbar-h: 36px;
  --header-h: calc(var(--topbar-h) + 56px);
}
html, body, .site-header, .nav, .site-footer, section { background: var(--bg); }
html[lang="ar"] body{font-family:var(--ar-font)}
html[lang="en"] body{font-family:var(--en-font)}
html[dir="rtl"] .nav-list, html[dir="rtl"] .about-points, html[dir="rtl"] .bullets{direction:rtl}

/* 3) Type & container */
body{color:var(--text);line-height:1.65}
h1,h2,h3{line-height:1.2;color:var(--primary);letter-spacing:.2px}
h1{font-size:clamp(28px,4.8vw,48px);font-weight:800}
h2{font-size:clamp(22px,3.2vw,32px);font-weight:800}
h3{font-size:clamp(18px,2.1vw,22px);font-weight:700}
p.lead{font-size:clamp(16px,2.2vw,18px);color:var(--muted);margin-top:10px}
p.muted,.muted{color:var(--muted)}
.container{width:min(100%,var(--container));margin-inline:auto;padding-inline:var(--pad)}

/* 4) Utilities */
.center{text-align:center}
.skip-link{position:absolute;left:-9999px;top:-9999px}
.skip-link:focus-visible{left:16px;top:16px;background:var(--accent);color:#fff;padding:8px 12px;border-radius:8px}

/* Ensure anchors offset under sticky bars (topbar + header) */
section[id]{ scroll-margin-top: calc(var(--header-h, 92px) + 8px); }

/* 5) Topbar (sticky above header) */
.topbar{
  position: sticky;
  top: env(safe-area-inset-top);
  z-index: 80;
  background:linear-gradient(90deg,var(--accent-50),transparent 70%);
  border-bottom:1px solid var(--border);
  color:var(--muted);
  font-size:14px
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding-block:8px;gap:12px}
.topbar-right,.topbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topbar a.social{opacity:.9}
.topbar a.whatsapp{padding:6px 10px;border:1px solid var(--border);border-radius:999px;transition:background .2s ease,border-color .2s ease}
.topbar a.whatsapp:hover{background:var(--accent-50);border-color:var(--accent)}

/* 6) Header / Nav */
.site-header{
  position:sticky;
  top: calc(var(--topbar-h, 0px) + env(safe-area-inset-top));
  z-index:70;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  backdrop-filter:saturate(1.2) blur(6px);
}
.site-header .container{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;padding-block:12px}
.logo img{ max-height:40px; width:auto; height:auto; object-fit:contain; border-radius:12px }
.logo-mark{border-radius:12px}

.nav{transition:transform .25s ease, opacity .18s ease; z-index:60}
.nav-list{display:flex;gap:clamp(10px,2.5vw,24px);align-items:center;list-style:none;padding:0;margin:0}
.nav-list a{font-weight:600;color:var(--muted);position:relative;padding:10px 4px}
.nav-list a:hover,.nav-list a:focus-visible{color:var(--text)}
.nav-list a::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:2px;transform:scaleX(0);transform-origin:var(--x,0) 50%;background:var(--accent);transition:transform .25s ease}
.nav-list a:hover::after{transform:scaleX(1)}
.nav-list a.active{color:var(--text)}
.nav-list a.active::after{transform:scaleX(1)}

.lang-switch{display:flex;gap:8px;align-items:center}
.btn-lang{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--card);transition:border-color .2s,box-shadow .2s,background .2s}
.btn-lang[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-50)}
.btn-lang svg{flex:0 0 auto;filter:drop-shadow(0 1px 0 rgba(0,0,0,.08))}
.nav-toggle{display:none;width:44px;height:36px;border-radius:10px;border:1px solid var(--border)}
.nav-toggle .bar{display:block;width:22px;height:2px;background:var(--text);margin:4px auto;border-radius:1px}

@media (max-width:900px){
  .site-header .container{grid-template-columns:auto auto 1fr auto}
  .nav{
    position:fixed;
    inset: calc(var(--header-h, 56px) + env(safe-area-inset-top)) 0 auto 0;
    border-bottom:1px solid var(--border);
    transform:translateY(-140%);
    opacity:0;
    max-height:calc(100vh - var(--header-h, 56px) - env(safe-area-inset-top));
    overflow:auto;
    width:100%;
    background:var(--bg)
  }
  .nav.open{ transform:translateY(0); opacity:1 }
  .nav-list{padding:16px var(--pad);flex-direction:column;align-items:stretch}
  .nav-list a{display:block;overflow-wrap:anywhere;white-space:normal;line-height:1.9;padding-block:10px}
  .nav-toggle{display:inline-block;justify-self:end}
  body.nav-open{overflow:hidden}
  .nav-backdrop{
    position:fixed;
    inset: calc(var(--header-h, 56px) + env(safe-area-inset-top)) 0 0 0;
    background:rgba(15,23,42,.24);
    z-index:55;opacity:0;pointer-events:none;transition:opacity .2s ease
  }
  .nav-backdrop.show{opacity:1;pointer-events:auto}
}

/* 7) Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:14px;border:1px solid var(--border);background:var(--card);color:var(--text);font-weight:700;transition:transform .08s,background .2s,border-color .2s,box-shadow .2s;box-shadow:0 2px 0 rgba(0,0,0,.04)}
.btn:hover{transform:translateY(-1px);border-color:var(--accent)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,var(--btn-ink-1),var(--btn-ink-2));color:#fff;border-color:transparent;box-shadow:0 10px 28px rgba(15,23,42,.18)}
.btn.primary:hover{filter:brightness(1.03)}
.btn.outline{background:transparent;border-color:var(--accent);color:var(--accent-600)}
.btn.outline:hover{background:var(--accent-50);border-color:var(--accent-600)}

/* badges */
.badges{list-style:none;padding:0;margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 12px;color:var(--muted);font-weight:600}
.badges li{line-height:1.4}

/* 8) Hero */
.hero{padding-block:clamp(36px,8vw,80px);position:relative;overflow:clip}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(18px,4vw,40px);align-items:center}
.hero-text .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.hero .badges{margin-top:12px}
.hero-media img{border-radius:calc(var(--radius) + 4px);box-shadow:0 30px 60px rgba(87,124,142,.14);object-fit:cover}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr}}
@media (max-width:600px){.hero-text .hero-cta .btn{flex:1 1 100%}.badges{font-size:14px}}

/* 9) Sections */
section{padding-block:clamp(36px,8vw,80px)}
.section-head{text-align:center;margin-bottom:clamp(16px,3.6vw,28px)}
.section-head p{max-width:70ch;margin-inline:auto}
.section-head h2{position:relative;display:inline-block;padding-inline:.15em}
.section-head h2::after{content:"";position:absolute;inset:auto 0 -4px 0;height:8px;border-radius:999px;background:radial-gradient(60% 100% at 50% 100%,rgba(87,124,142,.20),rgba(87,124,142,0));pointer-events:none}

/* 10) Catalog Cards — 4 + 4 */
.grid.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,2.4vw,20px);
  list-style:none; padding:0; margin:0;
}
@media (max-width:990px){.grid.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.grid.cards{grid-template-columns:repeat(2,1fr); justify-items:center }}
@media (max-width:430px){.grid.cards{grid-template-columns:1fr; justify-items:center }}
.grid.cards .card{ width:100%; max-width:420px }

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in oklab,var(--accent) 40%,var(--border))}
.card img{aspect-ratio:4/3;object-fit:cover}
.card h3{padding:12px 14px 0}
.card p{padding:6px 14px 16px;color:var(--muted)}

/* 11) Featured Bundles — clean gallery */
.bundles .bundle-gallery{
  list-style:none; padding:0; margin:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2.2vw,18px);
}
.bundles .bundle-gallery li{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 8px 24px rgba(87,124,142,.10);
}
.bundles .bundle-gallery img{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
@media (max-width:900px){ .bundles .bundle-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bundles .bundle-gallery{ grid-template-columns:1fr; } }

/* 11b) Bundle card styles (kept) */
.bundles .bundle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,3vw,24px)}
@media (max-width:900px){.bundles .bundle-grid{grid-template-columns:1fr}}
.bundle-card{display:grid;grid-template-columns:minmax(280px,.95fr) 1.05fr;gap:clamp(12px,2.2vw,18px);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 32px rgba(87,124,142,.10);align-items:stretch}
.bundle-card>img{width:100%;height:100%;object-fit:cover;min-height:280px;border-radius:0}
.bundle-body{padding:clamp(16px,3vw,24px)}
.bundle-body h3{margin-bottom:6px}
.bundle-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
@media (max-width:900px){.bundle-card{grid-template-columns:1fr}.bundle-card>img{height:auto;aspect-ratio:16/10;min-height:unset}}

/* Bullets */
.bullets{list-style:disc inside;margin:12px 0;padding-inline:0;color:var(--text)}
.bullets li{line-height:1.9;margin:.45em 0;overflow-wrap:anywhere}
.bullets li::marker{font-size:.9em;color:var(--accent-600)}
html[dir="rtl"] .bullets{padding-inline:0}
.note{margin-top:8px;color:var(--muted)}

/* 11c) Custom Bundle Builder */
#bundle-builder{margin-top:clamp(20px,3vw,28px)}
.bundle-form{
  display:grid;
  gap:clamp(12px,2.4vw,18px);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:calc(var(--radius));
  padding:clamp(14px,3vw,22px);
  box-shadow:0 10px 28px rgba(87,124,142,.10);
}
.bundle-form fieldset{
  border:1px dashed color-mix(in oklab,var(--accent) 22%, var(--border));
  border-radius:12px;
  padding:clamp(12px,2.4vw,16px);
  position:relative;
}
.bundle-form legend{
  font-weight:800;
  padding:0 .35em;
  color:var(--primary);
}
.bundle-form label{display:grid;gap:6px;margin:8px 0;color:var(--muted)}
.bundle-form input,
.bundle-form select,
.bundle-form textarea{
  border:1px solid var(--border);
  border-radius:12px;
  padding:11px 12px;
  background:color-mix(in oklab,var(--card) 94%, transparent);
}
.bundle-form input:focus-visible,
.bundle-form select:focus-visible,
.bundle-form textarea:focus-visible{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-50);
}

/* NEW: Illustration preview inside fieldsets */
.fieldset-illustration{
  margin:6px 0 10px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(87,124,142,.05),transparent);
}
.fieldset-illustration img{
  width:100%;
  height:auto;
  max-height:260px;
  object-fit:cover;
  display:block;
  aspect-ratio:16/9;
}

/* NEW: add-on subrows (indented) */
.bundle-form .addon{display:flex;align-items:center;gap:10px;margin:6px 0}
.bundle-form .addon.sub{display:grid;gap:8px;margin:6px 0 10px; padding:10px 12px;
  border:1px dashed color-mix(in oklab,var(--accent) 18%, var(--border));
  border-radius:10px; background:color-mix(in oklab,#fff 86%,transparent);
}
html[dir="rtl"] .bundle-form .addon.sub{border-right:3px solid var(--accent-50)}
html[dir="ltr"] .bundle-form .addon.sub{border-left:3px solid var(--accent-50)}
.bundle-form .addon.qty label{display:grid}

/* Totals & actions */
.bundle-total{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(18px,2.2vw,20px);padding:8px 0;color:var(--primary)
}
.bundle-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:600px){ .bundle-actions .btn{ flex:1 1 100% } }

/* 12) Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.6vw,24px);counter-reset:step;list-style:none;padding:0}
.steps li{list-style:none}
.steps li{position:relative;background:linear-gradient(180deg,rgba(87,124,142,.06),rgba(87,124,142,0)),#fff;border:1px solid color-mix(in oklab,var(--accent) 12%,var(--border));border-radius:calc(var(--radius) + 4px);padding:clamp(16px,3.2vw,22px) clamp(16px,3.2vw,22px) clamp(18px,3.2vw,24px);box-shadow:0 8px 26px rgba(15,23,42,.06);transition:transform .2s,box-shadow .2s,border-color .2s;min-height:160px;padding-inline-start:68px}
html[dir="rtl"] .steps li{padding-inline-start:clamp(16px,3.2vw,22px);padding-inline-end:68px}
.steps li:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(15,23,42,.12);border-color:color-mix(in oklab,var(--accent) 26%,var(--border))}
.steps li h3{margin-bottom:8px}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;inset-inline-start:14px;top:14px;width:36px;height:36px;border-radius:12px;font-weight:800;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,var(--accent),var(--accent-600));box-shadow:0 6px 14px rgba(87,124,142,.18)}
html[dir="rtl"] .steps li::before{inset-inline-start:auto;inset-inline-end:14px}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* 13) Masonry */
.masonry{columns:3 280px;column-gap:clamp(10px,2vw,16px)}
.masonry img{width:100%;border-radius:calc(var(--radius) - 4px);margin:0 0 clamp(10px,2vw,16px);break-inside:avoid;box-shadow:0 10px 26px rgba(87,124,142,.10)}
@media (max-width:600px){.masonry{columns:1 260px}}

/* 14) Reviews */
.reviews .reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2.2vw,20px);
  list-style:none; padding:0; margin:0;
}
@media (max-width:1200px){.reviews .reviews-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.reviews .reviews-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.reviews .reviews-grid{grid-template-columns:1fr}}
.review-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:calc(var(--radius));
  padding:clamp(14px,2.6vw,18px);
  box-shadow:0 10px 28px rgba(87,124,142,.10);
  display:grid; gap:8px;
}
.review-card .stars{letter-spacing:2px; font-weight:800}
.review-card .quote{color:var(--text)}
.review-card .meta{color:var(--muted); font-size:14px}

/* 15) About */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(16px,3vw,24px);align-items:center}
.about-text .about-points{margin-top:10px;color:var(--muted)}
.about-text .about-points li{margin:.25em 0}
.about-media img{border-radius:var(--radius);box-shadow:0 22px 60px rgba(87,124,142,.14)}
@media (max-width:1000px){.about-grid{grid-template-columns:1fr}}

/* --- NEW: Background card for About section --- */
.about-card{
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(16px, 3.2vw, 28px);
  box-shadow: 0 16px 48px rgba(87,124,142,.12);
  overflow: hidden;
}
.about-card::before{
  /* very soft decorative wash from corners */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 220px at 100% -40px, rgba(87,124,142,.10), transparent 60%),
    radial-gradient(800px 180px at -10% 100%, rgba(87,124,142,.08), transparent 60%),
    linear-gradient(180deg, rgba(87,124,142,.04), transparent 30%);
  pointer-events:none;
}
.about-card .about-grid{ position: relative; z-index: 1; }

/* tighter spacing on small screens so it feels “cardy” not cramped */
@media (max-width: 560px){
  .about-card{ padding: clamp(14px, 4vw, 20px); border-radius: calc(var(--radius) + 4px); }
}

/* 16) FAQ */
.faq-list{display:grid;gap:12px}
details{border:1px solid var(--border);border-radius:12px;background:var(--card);overflow:hidden}
details>summary{cursor:pointer;font-weight:700;padding:14px 16px;list-style:none;position:relative;display:flex;align-items:center;gap:.6em}
details>summary::-webkit-details-marker{display:none}
details>summary::marker{content:""}
details>summary::after{content:"▸";margin-inline-start:auto;transition:transform .2s ease;opacity:.8}
details[open]>summary::after{transform:rotate(90deg)}
details>div{padding:10px 16px 14px;color:var(--muted);border-top:1px solid var(--border)}
details>div ul{list-style:disc outside;padding-inline-start:1.2em}
html[dir="rtl"] details>div ul{padding-inline-start:0;padding-inline-end:1.4em}
details[open]{box-shadow:0 10px 28px rgba(87,124,142,.10);border-color:color-mix(in oklab,var(--accent) 35%,var(--border))}

/* 17) Contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,3vw,24px);align-items:start}
.quick-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(14px,3vw,22px);box-shadow:0 10px 28px rgba(87,124,142,.10)}
.quick-form h3{margin-bottom:10px}
.quick-form label{display:grid;gap:6px;margin:10px 0;color:var(--muted)}
.quick-form input,.quick-form textarea{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:color-mix(in oklab,var(--card) 92%,transparent)}
.quick-form input:focus-visible,.quick-form textarea:focus-visible{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-50)}
.quick-form .form-note{font-size:12px;color:var(--muted);margin-top:6px}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.contact-meta{margin-top:8px;color:var(--muted)}
.contact-meta li{margin:.25em 0}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:600px){.contact-actions .btn{flex:1 1 100%}}

/* 17b) Contact info cards */
.contact-info-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2.4vw,16px);
}
@media (max-width:900px){ .contact-info-cards{ grid-template-columns:1fr; } }
.contact-info-cards .card{ padding:clamp(12px, 2.2vw, 16px) }
.contact-info-cards .card h3{ padding:0 0 6px 0 }
.contact-info-cards .card p{ padding:0; color:var(--muted) }

/* 18) Footer */
.site-footer{border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:1.1fr .9fr .8fr;gap:clamp(16px,3vw,24px);align-items:start;padding-block:clamp(20px,4vw,32px)}
.footer-grid nav ul{display:grid;gap:8px;color:var(--muted);list-style:none;padding:0;margin:0}
.footer-grid .logo-mark{margin-bottom:8px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.06));border-radius:12px}
.footer-cta{display:grid;gap:10px;justify-items:start}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}

/* 19) Language visibility (JS also toggles) */
html[data-active-lang="ar"] .lang-en{display:none!important}
html[data-active-lang="en"] .lang-ar{display:none!important}

/* 20) Animations */
@media (prefers-reduced-motion:no-preference){
  .card,.bundle-card,.bundle-form,.quick-form,.about-media img,.masonry img,.btn{will-change:transform,box-shadow}
  .hero h1,.hero p.lead,.hero .btn,.hero .badges li{animation:fadeUp .6s ease both}
  .hero h1{animation-delay:.02s}.hero p.lead{animation-delay:.08s}
  .hero .btn:nth-child(1){animation-delay:.14s}.hero .btn:nth-child(2){animation-delay:.18s}
  .hero .badges li:nth-child(1){animation-delay:.24s}.hero .badges li:nth-child(2){animation-delay:.28s}.hero .badges li:nth-child(3){animation-delay:.32s}
  .card:hover,.bundle-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,23,42,.10)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* 21) RTL niceties */
.nav-list a:hover::after{--x:0}
html[dir="rtl"] .nav-list a::after{transform-origin:100% 50%}

/* 22) No-JS helper */
.no-js .nav{transform:none!important}

/* 23) Topbar tidy on small screens */
@media (max-width: 680px){
  .topbar .container{
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding-block: 6px;
  }
  .topbar-left{ order: 1; line-height: 1.5; }
  .topbar-right{
    order: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
  }
  .topbar a.social{ white-space: nowrap; }
  .topbar a.whatsapp{ justify-self: end; }
  .topbar .hours{
    grid-column: 1 / -1;
    font-size: 12px;
    opacity: .9;
  }
}
@media (max-width: 380px){
  .topbar .container{ gap: 4px; }
  .topbar .hours{ font-size: 11px; }
  .topbar a.whatsapp{ padding: 5px 10px; }
}

/* 24) Custom Scrollbar (RESTORED) */
:root{
  --scrollbar-track: color-mix(in oklab, var(--bg) 92%, #000);
  --scrollbar-thumb: color-mix(in oklab, var(--accent) 35%, #000 0%);
  --scrollbar-thumb-hover: color-mix(in oklab, var(--accent-600) 45%, #000 0%);
}
html{
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background:var(--scrollbar-track); border-radius:999px }
*::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border-radius:999px;
  border:2px solid var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb:hover{ background:var(--scrollbar-thumb-hover) }
/* --- Reviews polish (card container + spacing + nicer CTA) --- */
.reviews-card{
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(14px, 3.2vw, 22px);
  box-shadow: 0 14px 40px rgba(87,124,142,.10);
  overflow: hidden;
}
.reviews-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 180px at 100% -30px, rgba(87,124,142,.10), transparent 60%),
    radial-gradient(760px 160px at -10% 100%, rgba(87,124,142,.08), transparent 60%),
    linear-gradient(180deg, rgba(87,124,142,.04), transparent 30%);
  pointer-events:none;
}
.reviews-card > *{ position: relative; z-index: 1; }

/* give grid a touch more space; keep layout breakpoints */
.reviews .reviews-grid{
  gap: clamp(14px, 2.4vw, 22px);
  margin: 0;
}

/* visually separate CTA from cards + safe spacing on all screens */
.reviews .reviews-cta{
  margin-top: clamp(14px, 3vw, 22px);
  padding-top: clamp(10px, 2.2vw, 16px);
  border-top: 1px solid var(--border);
}

/* Instagram button: pill + subtle glow */
.btn.pill{ border-radius: 999px; }
.btn.ig{
  box-shadow: 0 10px 28px rgba(87,124,142,.10);
  background:
    linear-gradient(180deg, rgba(87,124,142,.06), rgba(87,124,142,0)) var(--card);
  border-color: color-mix(in oklab, var(--accent) 42%, var(--border));
}
.btn.ig:hover{
  background: var(--accent-50);
  border-color: var(--accent);
}
.reviews-cta .btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
}
.reviews-cta svg{ flex:0 0 auto; }

/* mobile: comfy tap target, keeps RTL/LTR intact */
@media (max-width: 600px){
  .reviews-card{ padding: clamp(12px, 4vw, 18px); }
  .reviews-cta .btn{ width: 100%; justify-content: center; }
}

/* --- “Made to Order” polish: background card + tidy CTA --- */
.custom-card{
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(16px, 3.2vw, 28px);
  box-shadow: 0 16px 48px rgba(87,124,142,.12);
  overflow: hidden;
}
.custom-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 220px at 100% -40px, rgba(87,124,142,.10), transparent 60%),
    radial-gradient(800px 180px at -10% 100%, rgba(87,124,142,.08), transparent 60%),
    linear-gradient(180deg, rgba(87,124,142,.04), transparent 30%);
  pointer-events:none;
}
.custom-card > *{ position: relative; z-index: 1; }

/* separate CTA from steps with a gentle divider */
.custom .custom-cta{
  margin-top: clamp(14px, 3vw, 22px);
  padding-top: clamp(10px, 2.2vw, 16px);
  border-top: 1px solid var(--border);
}

/* mobile nicety: full-width CTA buttons if needed */
@media (max-width: 600px){
  .custom .custom-cta .btn{ width: 100%; }
}

/* =========================================================
   v1.2.2 — Mobile fix for Custom Bundle Builder overflow
   (kept surgical; no visual changes on desktop)
   ========================================================= */
@media (max-width: 640px){
  .bundle-form{
    padding-inline: 12px;
    overflow: hidden; /* stop any child from spilling out */
  }
  .bundle-form fieldset,
  .bundle-form legend,
  .bundle-form label,
  .bundle-actions{
    min-width: 0; /* allow shrinking inside the card */
  }
  .bundle-form label{
    grid-template-columns: 1fr; /* inputs/selects stack cleanly */
  }
  .bundle-form input,
  .bundle-form select,
  .bundle-form textarea{
    width: 100%;
    max-width: 100%;
  }
  /* add-on rows: prevent flex items from pushing outside */
  .bundle-form .addon{
    flex-wrap: wrap;
    align-items: stretch;
  }
  .bundle-actions .btn{
    width: 100%; /* full-width buttons on small screens */
  }
  /* preview image safety cap */
  .fieldset-illustration img{
    max-width: 100%;
    height: auto;
  }
}

/* tiny RTL/LTR nudge so the dashed side marker never pokes out */
@media (max-width: 640px){
  html[dir="rtl"] .bundle-form .addon.sub{ margin-inline-start: 0; }
  html[dir="ltr"] .bundle-form .addon.sub{ margin-inline-start: 0; }
}

/* ---- Mobile checkbox alignment fix (surgical) ---- */
@media (max-width: 640px){
  /* keep addon rows from stretching the checkbox */
  .bundle-form .addon{
    flex-wrap: wrap;          /* still wrap when needed */
    align-items: center;      /* <-- was 'stretch' earlier; center fixes the odd position */
    gap: 10px;
  }
  /* make sure generic label grid rule doesn't interfere with .addon */
  .bundle-form label.addon{
    display: flex;            /* enforce flex on addon labels */
    grid-template-columns: unset;
  }
  /* nice, consistent checkbox size & spacing */
  .bundle-form .addon input[type="checkbox"]{
    inline-size: 18px;
    block-size: 18px;
    margin: 0;                /* remove any accidental shifts */
  }
}

/* === Minimal add-ons (requested) === */
/* Gradient button (subtle; reusable anywhere) */
.btn.gradient{
  color:#fff;
  border-color:transparent;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 84%, #6eddff 0%) 0%, #5998ff 100%);
  box-shadow: 0 14px 36px rgba(168, 201, 255, 0.24);
}
.btn.gradient:hover{ filter: brightness(1.04); }

/* Reveal helper (reuses existing fadeUp keyframes) */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity: 0; transform: translateY(10px); }
  .reveal.in{ animation: fadeUp .6s ease both; }
}