/* Layouts: store, admin, auth (Agent.md 10.8 – 10.10). */

/* ================= Store ================= */
.store-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.store-main { flex: 1; }

.site-header {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-block-end: 1px solid var(--border);
}
@supports (backdrop-filter: blur(12px)) {
  /* Glass effect is limited to the sticky header (Agent.md 10.1 rule 5). */
  .site-header { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
.site-header-inner {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--header-height);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 800; font-size: var(--fs-xl); color: var(--text);
  letter-spacing: 0.5px;
}
.brand:hover { color: var(--text); }
.brand-mark {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--gradient-brand); color: #fff; font-size: var(--fs-lg);
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 45%, transparent);
}
.brand-name { direction: ltr; unicode-bidi: isolate; }

.site-nav { display: none; flex: 1; min-width: 0; }
/* Category names come from the owner; long ones scroll instead of wrapping or widening the page. */
.site-nav ul { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2);
  color: var(--muted); font-weight: 700; border-radius: var(--radius-sm); white-space: nowrap;
}
.site-nav a:hover, .site-nav a.active { color: var(--text); background: var(--primary-soft); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.header-search { display: none; }
/* Narrow enough that the five main sections fit beside it at 1280px. */
.header-search .input { min-height: 40px; padding-block: var(--space-2); width: 170px; }
.cart-link { position: relative; }
.cart-count {
  position: absolute; inset-block-start: 2px; inset-inline-end: 2px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
}

/* Mobile menu: <details> works without JavaScript on static pages. */
.mobile-menu { position: relative; }
.mobile-menu > summary { list-style: none; }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu-panel {
  position: fixed; inset-inline: 0; inset-block-start: var(--header-height);
  max-height: calc(100dvh - var(--header-height)); overflow-y: auto;
  background: var(--surface); border-block-end: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
}
.mobile-menu-panel ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu-panel a { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--text); font-weight: 700; }
.mobile-menu-panel a:hover { background: var(--primary-soft); }
.mobile-menu-panel form { margin-block-end: var(--space-3); }

@media (min-width: 1024px) {
  .site-nav { display: block; }
  .header-search { display: block; }
  .mobile-menu { display: none; }
}

.site-footer {
  margin-block-start: var(--space-8);
  background: var(--surface);
  border-block-start: 1px solid var(--border);
  padding-block: var(--space-7) var(--space-5);
  color: var(--muted);
}
.site-footer h2 { font-size: var(--fs-lg); color: var(--text); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-block-end: var(--space-2); }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--secondary); }
.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-bottom { margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); font-size: var(--fs-sm); text-align: center; }
.footer-bottom p { margin: 0; }
.footer-bottom .footer-credit { margin-block-start: var(--space-1); color: var(--muted); font-size: var(--fs-xs); }

/* Hero used by the temporary home page and later by the Hero section (T2.09). */
.hero {
  position: relative; overflow: hidden;
  padding-block: var(--space-6);
  background:
    radial-gradient(600px 300px at 85% 10%, color-mix(in srgb, var(--primary) var(--band-glow, 35%), transparent), transparent 70%),
    radial-gradient(500px 280px at 10% 90%, color-mix(in srgb, var(--secondary) var(--band-glow-2, 22%), transparent), transparent 70%),
    var(--band-hero);
  border-block-end: 1px solid var(--border);
}
/* The about section under the hero sits on its own band too, a shade apart from both (owner's request, 2026-10-28). */
.about-band {
  background:
    radial-gradient(520px 260px at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--band-about);
  border-block-end: 1px solid var(--border);
}
.hero-title { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.2; margin-block-end: var(--space-2); }
.hero-lead { font-size: var(--fs-md); color: var(--muted); max-width: 520px; margin: 0; white-space: pre-line; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-5); }

.section { padding-block: var(--space-7); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-5); }

/* ================= Auth (login / setup) ================= */
.auth-shell {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--space-5) var(--space-4);
  background:
    radial-gradient(520px 320px at 80% 0%, color-mix(in srgb, var(--primary) var(--band-glow, 28%), transparent), transparent 70%),
    radial-gradient(480px 300px at 0% 100%, color-mix(in srgb, var(--secondary) var(--band-glow-2, 18%), transparent), transparent 70%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent);
}
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-block-end: var(--space-5); text-align: center; }
.auth-brand .brand-mark { width: 52px; height: 52px; font-size: var(--fs-2xl); border-radius: var(--radius-lg); }
.auth-brand h1 { font-size: var(--fs-2xl); margin: 0; }
.auth-brand p { color: var(--muted); margin: 0; }
.auth-footer { margin-block-start: var(--space-5); text-align: center; font-size: var(--fs-sm); color: var(--muted); }

/* ================= Admin ================= */
.admin-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.admin-topbar {
  position: sticky; inset-block-start: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--header-height); padding-inline: var(--space-4);
  background: var(--surface); border-block-end: 1px solid var(--border);
}
.admin-badge {
  display: none;
  font-size: var(--fs-xs); font-weight: 800; color: var(--secondary); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--secondary) 40%, transparent); background: var(--info-soft);
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
}
@media (min-width: 480px) { .admin-badge { display: inline-block; } }
.admin-user { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }
.admin-user-name { display: none; color: var(--muted); font-size: var(--fs-sm); }
@media (min-width: 768px) { .admin-user-name { display: inline; } }

.admin-body { flex: 1; display: flex; }

/* The sidebar toggle is a CSS checkbox so it works in both static and interactive admin pages. */
.admin-nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.admin-nav-button { display: inline-flex; }
.admin-sidebar {
  position: fixed; z-index: 50;
  inset-block: var(--header-height) 0; inset-inline-start: 0;
  width: min(84vw, var(--admin-sidebar));
  background: var(--surface); border-inline-end: 1px solid var(--border);
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease);
}
.admin-nav-toggle:checked ~ .admin-body .admin-sidebar { transform: translateX(0); }
.admin-nav-toggle:checked ~ .admin-body .admin-scrim { display: block; }
.admin-scrim { display: none; position: fixed; inset: var(--header-height) 0 0 0; z-index: 45; background: var(--overlay); }

@media (min-width: 1024px) {
  .admin-nav-button { display: none; }
  .admin-sidebar { position: sticky; inset-block-start: var(--header-height); height: calc(100dvh - var(--header-height)); transform: none; flex: 0 0 var(--admin-sidebar); }
  .admin-nav-toggle:checked ~ .admin-body .admin-scrim { display: none; }
}

.admin-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-nav-section { margin-block: var(--space-4) var(--space-2); padding-inline: var(--space-3); font-size: var(--fs-xs); font-weight: 800; color: var(--muted); }
.admin-nav a, .admin-nav .nav-disabled {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px; padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--muted); font-weight: 700; white-space: nowrap;
}
.admin-nav .badge { padding-inline: var(--space-2); font-size: 11px; }
.admin-nav a:hover { color: var(--text); background: var(--primary-soft); }
.admin-nav a.active { color: var(--text); background: var(--primary-soft); box-shadow: inset -3px 0 0 var(--primary); }
.admin-nav .nav-disabled { opacity: 0.55; cursor: default; }
.admin-nav .nav-disabled .badge { margin-inline-start: auto; }

.admin-main { flex: 1; min-width: 0; padding: var(--space-5) var(--space-4) var(--space-8); }
@media (min-width: 768px) { .admin-main { padding-inline: var(--space-6); } }
.admin-main { font-size: 0.9375rem; }

/* ================= Blazor reconnect UI (admin only) ================= */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible { display: none; }

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible { display: block; }

#components-reconnect-modal {
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-xl);
  background: var(--surface-elevated);
  color: var(--text);
  padding: var(--space-5);
  width: min(92vw, 380px);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
#components-reconnect-modal::backdrop { background: var(--overlay); }
#components-reconnect-modal p { margin: 0 0 var(--space-3); }
#components-reconnect-modal .spinner { margin: 0 auto var(--space-3); }

/* ================= Print (basic; documents are built in Phase 6) ================= */
@media print {
  :root { --bg: #fff; --text: #000; --muted: #333; }
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .admin-topbar, .admin-sidebar, .admin-scrim, .no-print, #components-reconnect-modal { display: none !important; }
  .admin-main { padding: 0; }
  a { color: #000; }
}

/* ---------- Home sections (Phase 2) ---------- */
.brand-logo { width: 40px; height: 40px; object-fit: contain; border-radius: var(--radius-sm); }

/* Smaller and stacked on every screen (owner's request, 2026-10-29: «تصغير القسم الرئيسي وترتيبه فوق بعض»):
   the title, the text under it, then the picture, all centred. */
.hero-grid { display: grid; gap: var(--space-5); justify-items: center; text-align: center; }
.hero .hero-text { display: grid; justify-items: center; }
.hero .hero-actions { justify-content: center; }
/* Hero card (owner's request, 2026-10-27): bordered and glowing like the category cards, 4:3 like the framing
   dialog, and flipping in 3D to the logo between pictures. */
.hero-media { display: flex; justify-content: center; width: 100%; }
.hero-card {
  position: relative; width: min(100%, 380px); aspect-ratio: 4 / 3; perspective: 1600px;
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: 0 28px 60px -28px var(--primary), var(--shadow-md);
}
.hero-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.9s var(--ease); }
.hero-card.is-flipped .hero-flip { transform: rotateY(180deg); }
.hero-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-lg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.hero-face picture, .hero-front img { display: block; width: 100%; height: 100%; }
.hero-front img { object-fit: cover; }
.hero-back {
  transform: rotateY(180deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; padding: 10% 12%;
  background:
    radial-gradient(80% 80% at 50% 40%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%),
    linear-gradient(140deg, var(--surface-elevated), var(--bg));
}
.hero-back img { width: 100%; min-height: 0; flex: 0 1 62%; object-fit: contain; }
/* Latin name in the logo's light lavender, wide and calm like the original wordmark. */
.hero-back-name {
  direction: ltr; font-size: clamp(1.75rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: 0.12em; line-height: 1;
  background: linear-gradient(90deg, var(--wordmark, #F2F0FF) 0%, var(--wordmark, #F2F0FF) 45%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  /* A gentle cross-fade instead of the 3D turn. */
  .hero-flip { transform: none !important; transition: none; }
  .hero-face { transition: opacity 0.6s ease; }
  .hero-back { transform: none; opacity: 0; }
  .hero-card.is-flipped .hero-front { opacity: 0; }
  .hero-card.is-flipped .hero-back { opacity: 1; }
}

/* About: title, picture, text in one centred column; the whole picture, never cropped (owner's request, 2026-10-28). */
.about-stack { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.about-title { margin: 0; font-size: var(--fs-2xl); }
.about-stack > .glow-frame { width: fit-content; max-width: min(100%, 420px); }
.about-text { max-width: 640px; margin-inline: auto; }
.about-text > :first-child { margin-block-start: 0; }
.about-image {
  display: block; width: auto; max-width: 100%; max-height: 320px; height: auto;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  object-fit: contain;
}

.feature-grid, .offer-grid, .contact-list { list-style: none; margin: 0; padding: 0; }
.feature-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Each card has its own colour, like the category cards (owner's request, 2026-10-28). */
.feature-card {
  --tone-a: var(--primary);
  --tone-b: var(--accent);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--space-2);
  background:
    radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--tone-a) 26%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
  border-color: color-mix(in srgb, var(--tone-a) 40%, var(--border));
  transition: border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.feature-card::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px;
  background: linear-gradient(90deg, var(--tone-a), var(--tone-b));
}
.feature-card.tone-1 { --tone-a: var(--primary); --tone-b: var(--accent); }
.feature-card.tone-2 { --tone-a: var(--secondary); --tone-b: var(--success); }
.feature-card.tone-3 { --tone-a: var(--warning); --tone-b: var(--danger); }
.feature-card.tone-4 { --tone-a: var(--accent); --tone-b: var(--primary); }
.feature-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tone-a) 70%, transparent);
  box-shadow: 0 16px 36px -18px var(--tone-a);
}
.feature-card h3 { margin: 0; font-size: var(--fs-lg); }
.feature-card p { margin: 0; }
.feature-icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--tone-a, var(--primary)), var(--tone-b, var(--accent)));
  color: var(--bg);
  box-shadow: 0 10px 22px -10px var(--tone-a, var(--primary));
}
@media (prefers-reduced-motion: reduce) { .feature-card:hover { transform: none; } }

.offer-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.offer-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.offer-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.offer-card .offer-image { border-radius: 0; }
.offer-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.offer-body h3 { margin: 0; font-size: var(--fs-lg); }
.offer-body p { margin: 0; }

.contact-list li { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.contact-list .icon { color: var(--secondary); flex: 0 0 auto; }

.page-article { max-width: 760px; margin-inline: auto; }

/* Floating WhatsApp button; sits above the mobile sticky bar added in Phase 3. */
.whatsapp-fab {
  position: fixed; z-index: 35;
  inset-block-end: var(--space-5); inset-inline-start: var(--space-4);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gradient-primary); color: var(--on-primary);
  box-shadow: var(--shadow-md), var(--glow-primary);
}
.whatsapp-fab:hover { color: var(--on-primary); }
@media print { .whatsapp-fab { display: none; } }
.auth-brand .auth-logo { width: 64px; height: 64px; }

/* ================= Footer cards (owner's request, 2026-10-27) ================= */
.footer-cards {
  display: grid; gap: var(--space-5); justify-content: center;
  grid-template-columns: minmax(0, 520px);
}
@media (min-width: 768px) { .footer-cards { grid-template-columns: repeat(2, minmax(0, 460px)); } }
.footer-card {
  --tone: var(--primary);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tone) 26%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
  border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--border));
  box-shadow: 0 22px 48px -26px var(--tone);
}
.footer-card.tone-contact { --tone: var(--secondary); }
.footer-card h2 { margin: 0; font-size: var(--fs-xl); }
.footer-card p { margin: 0; color: var(--muted); }
.footer-lead { color: var(--text) !important; font-weight: 700; white-space: pre-line; }
.footer-text { white-space: pre-line; }
.footer-logo { max-height: 72px; width: auto; object-fit: contain; }
.footer-hours { display: inline-flex; gap: var(--space-2); align-items: flex-start; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
.footer-links li { margin: 0; }
.footer-phone { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.footer-number { font-size: var(--fs-xl); font-weight: 800; color: var(--text); letter-spacing: 0.5px; }
.footer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.footer-address { display: inline-flex; gap: var(--space-2); align-items: center; }
.contact-pill {
  --pill: var(--primary);
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill);
  color: var(--text) !important; font-weight: 700; font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--pill) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--pill) 45%, transparent);
  transition: background-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.contact-pill:hover { background: color-mix(in srgb, var(--pill) 30%, transparent); transform: translateY(-2px); }
.contact-pill.pill-phone { --pill: var(--secondary); }
.contact-pill.pill-whatsapp { --pill: var(--success); }
.contact-pill.pill-telegram { --pill: var(--info); }
.contact-pill.pill-map-pin { --pill: var(--warning); }
@media (prefers-reduced-motion: reduce) { .contact-pill:hover { transform: none; } }
.footer-card.tone-brand { justify-content: center; }
/* The bell joined the top bar (2026-10-28): on phones the badge and the name make room so nothing leaves the screen. */
@media (max-width: 600px) {
  .admin-topbar .admin-badge { display: none; }
}
@media (max-width: 420px) {
  .admin-topbar .brand-name { display: none; }
  .admin-topbar { gap: var(--space-2); }
}

/* Dividers between the home sections (owner's request, 2026-10-29: «اريد فواصل بين الاقسام»): a thin line in the
   store's colours that fades at both ends, with a small glowing badge in the middle. */
.home-sections > section + section { position: relative; border-block-start: 0; }
.home-sections > section + section::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: min(720px, 84%);
  height: 2px;
  transform: translateX(50%);
  background: linear-gradient(90deg, transparent, var(--primary) 25%, var(--accent) 50%, var(--secondary) 75%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}
.home-sections > section + section::after {
  content: "";
  position: absolute;
  inset-block-start: -7px;
  inset-inline-start: 50%;
  width: 16px;
  height: 16px;
  transform: translateX(50%) rotate(45deg);
  border-radius: 4px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 80%, transparent);
  pointer-events: none;
  z-index: 2;
}
/* The bands' own bottom lines would double the divider. */
.home-sections > .hero, .home-sections > .about-band { border-block-end: 0; }

/* ================= The calm light look (owner's request, 2026-10-30: «الوان المتجر يريدها ان تكون اهدأ») =================
   Same layout, quieter decoration: no moving light on pictures, soft shadows instead of coloured glows, and thin
   dividers. The dark look keeps everything above as it was. The admin takes the same look («يجب توحيد الثيم»). */
:root[data-theme="light"] {
  --band-glow: 12%;
  --band-glow-2: 8%;
  --wordmark: var(--text);
}
[data-theme="light"] .glow-frame::after,
[data-theme="light"] .product-card-image::after,
[data-theme="light"] .product-gallery-main::after,
[data-theme="light"] .hero-front::after { display: none; }
[data-theme="light"] .reel {
  padding: 1px;
  background: color-mix(in srgb, var(--tone-a) 28%, var(--border));
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .reel:hover,
[data-theme="light"] .reel:focus-visible { box-shadow: var(--shadow-md); }
[data-theme="light"] .reel-inner { border-radius: 17px; background: var(--surface); }
[data-theme="light"] .reel-tag { background: var(--tone-a); box-shadow: none; }
[data-theme="light"] .home-sections > section + section::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
  box-shadow: none;
}
[data-theme="light"] .home-sections > section + section::after {
  width: 8px;
  height: 8px;
  inset-block-start: -4px;
  border-radius: 2px;
  background: var(--primary);
  box-shadow: none;
}

/* ================= A focused purchase (owner's request, 2026-10-31: «عملية الشراء اجعلها ابسط … سهولة ووضوح») =================
   From the lens page on (product-options.js sets .is-buying) and on the delivery page, only the purchase shows:
   no footer, no path and no description, and on a phone not the pictures either, so the step starts at the top. */
.is-buying .site-footer,
.is-buying .breadcrumbs,
.is-buying .product-lead,
body:has(.checkout-page) .site-footer { display: none; }
@media (max-width: 1023px) {
  .is-buying .product-gallery { display: none; }
  .is-buying .product-info { padding-block-start: 0; }
}

/* ================= Smaller «لماذا تختارنا» and footer cards (owner's request, 2026-10-31: «صغرهن هذه الكروت لاحاجة
   لهذه الاحجام») =================
   The icon sits beside the title and the line under it, and the footer cards are about half their height. */
.feature-grid { gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.feature-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  column-gap: var(--space-3); row-gap: 2px;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
}
.feature-card .feature-icon { grid-row: span 2; width: 38px; height: 38px; border-radius: var(--radius-sm); box-shadow: none; }
.feature-card .feature-icon .icon { width: 20px; height: 20px; }
.feature-card h3 { font-size: var(--fs-md); }
.feature-card p { font-size: var(--fs-sm); line-height: 1.5; }
.feature-card::after { height: 2px; }

.site-footer { margin-block-start: var(--space-6); padding-block: var(--space-5) var(--space-4); }
.footer-cards { gap: var(--space-3); grid-template-columns: minmax(0, 420px); }
@media (min-width: 768px) { .footer-cards { grid-template-columns: repeat(2, minmax(0, 380px)); } }
.footer-card {
  gap: var(--space-2); padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-lg); box-shadow: 0 12px 28px -22px var(--tone);
}
.footer-card h2 { font-size: var(--fs-lg); }
.footer-card p { font-size: var(--fs-sm); }
.footer-logo { max-height: 44px; }
.footer-number { font-size: var(--fs-lg); }
.footer-phone { gap: var(--space-1); }
.contact-pill { min-height: 34px; padding: 0 var(--space-3); }
.footer-bottom { margin-block-start: var(--space-4); padding-block-start: var(--space-3); }

/* «ثبّت EyeZone على جهازك» after signing in (2026-11-04): shown by admin-install.js through classes on <html>. */
.install-bar { display: none; align-items: center; flex-wrap: wrap; }
html.can-install .install-bar { display: flex; }
.install-steps { display: none; }
html.install-by-hand .install-steps { display: block; }
html.install-by-hand .install-lead,
html.install-by-hand .install-button { display: none; }

/*
 * Colour in the header and the hero (owner's request, 2026-11-09, on a screenshot of the home page):
 * the store's name in the header as a gradient, each top link in its own colour, and the hero heading as a moving
 * gradient. Everything is drawn from the store's own colours (--primary, --accent, --secondary), so it follows the
 * colours chosen in the settings and both themes.
 */
/*
 * Deeper shades of the store's colours (owner's request, 2026-11-09: «الوان اطوخ»): each colour mixed with the text
 * colour, so they turn darker and richer on the light theme and stay bright enough to read on the dark one. */
.site-header .brand-name, .hero-title, .section-heading-flow {
  --deep-p: color-mix(in srgb, var(--primary) 62%, var(--text));
  --deep-a: color-mix(in srgb, var(--accent) 62%, var(--text));
  --deep-s: color-mix(in srgb, var(--secondary) 62%, var(--text));
}
.site-header .brand-name {
  background: linear-gradient(135deg, var(--deep-p) 0%, var(--deep-a) 50%, var(--deep-s) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Mixed a little with the text colour so each stays readable: darker on the light theme, lighter on the dark one. */
.site-nav li:nth-child(4n + 1) a { --nav-c: var(--primary); }
.site-nav li:nth-child(4n + 2) a { --nav-c: var(--accent); }
.site-nav li:nth-child(4n + 3) a { --nav-c: var(--secondary); }
.site-nav li:nth-child(4n + 4) a { --nav-c: color-mix(in srgb, var(--primary) 50%, var(--accent)); }
.site-nav a { color: color-mix(in srgb, var(--nav-c, var(--primary)) 62%, var(--text)); }
.site-nav a:hover, .site-nav a.active {
  color: color-mix(in srgb, var(--nav-c, var(--primary)) 52%, var(--text));
  background: color-mix(in srgb, var(--nav-c, var(--primary)) 14%, transparent);
}
.site-nav a.active { box-shadow: inset 0 -2px 0 var(--nav-c, var(--primary)); }

/* The home sections' headings move the same way («لماذا تختارنا؟», «تسوّق حسب القسم»…; owner's request, 2026-11-09). */
.section-heading-flow,
.hero-title {
  background: linear-gradient(90deg, var(--deep-p), var(--deep-a), var(--deep-s), var(--deep-a), var(--deep-p));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* A moving gradient is repainted on every frame, which took a quarter of a slow phone's time (measured 2026-11-09):
     the hero plays twice and stops, and each section heading plays once when it comes into view (store-menu.js). */
  animation: hero-title-flow 6s linear 2;
  /* Room for Arabic letters' tails, which background-clip would otherwise cut. */
  padding-block: 0.08em;
}
/* Inline, so the heading keeps its own alignment and the colours run over the words only. */
.section-heading-flow { display: inline-block; max-width: 100%; animation: none; }
.section-heading-flow.is-flowing { animation: hero-title-flow 6s linear 1; }
html:has(details.mobile-menu[open]) .hero-title,
html.is-navigating .hero-title { animation-play-state: paused; }
@keyframes hero-title-flow {
  from { background-position: 0% 50%; }
  to { background-position: 150% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title, .section-heading-flow, .section-heading-flow.is-flowing { animation: none; }
}

/*
 * A thin moving bar along the top the moment a link is pressed, so the wait for the server does not look like a frozen
 * phone (owner's report, 2026-11-09: «هناك لاك يبين بالهاتف عند فتح القائمة واختيار عنصر»). Moved with transform, which the
 * phone draws without repainting the page.
 */
html.is-navigating::after {
  content: ""; position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 100; pointer-events: none;
  background: var(--primary); transform-origin: right center; animation: navigating-bar 1.6s ease-out forwards;
}
@keyframes navigating-bar { from { transform: scaleX(0.08); } to { transform: scaleX(0.92); } }
@media (prefers-reduced-motion: reduce) { html.is-navigating::after { animation: none; transform: scaleX(0.6); } }