/* ============================================================
   Jewel Tones — Liquid Glass v4 (premium dark + logo gemstones)
   ============================================================ */

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  position: relative;
  z-index: 1;
  padding: var(--s-4);
}

/* ── Starry night sky background — navy + jewel atmosphere ─ */
.stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%,   #1a1530 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 100%, #0a0816 0%, transparent 50%),
    #050510;
}
.stars__layer {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  will-change: transform;
}
/* Three star layers with different sizes + speeds for depth */
.stars__layer--1 {
  background-image:
    radial-gradient(1px 1px at 20px 30px,  rgba(255,255,255,0.95), transparent),
    radial-gradient(1px 1px at 60px 70px,  rgba(224,194,119,0.85), transparent),
    radial-gradient(1px 1px at 120px 150px, rgba(255,255,255,0.70), transparent),
    radial-gradient(1px 1px at 180px 40px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 240px 200px,rgba(199,38,74,0.55), transparent),
    radial-gradient(1px 1px at 300px 100px,rgba(255,255,255,0.75), transparent);
  background-size: 350px 350px;
  animation: starDrift 240s linear infinite;
}
.stars__layer--2 {
  background-image:
    radial-gradient(1.5px 1.5px at 80px 50px,  rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px   at 160px 220px, rgba(224,194,119,0.95), transparent),
    radial-gradient(1.5px 1.5px at 220px 90px, rgba(255,255,255,0.90), transparent),
    radial-gradient(2px 2px   at 320px 280px, rgba(123,63,171,0.65), transparent);
  background-size: 420px 420px;
  animation: starDrift 360s linear infinite reverse, twinkle 6s ease-in-out infinite;
}
.stars__layer--3 {
  background-image:
    radial-gradient(2.5px 2.5px at 100px 120px, rgba(224,194,119,1), transparent),
    radial-gradient(3px 3px     at 280px 60px,  rgba(255,255,255,1), transparent),
    radial-gradient(2.5px 2.5px at 380px 240px, rgba(26,139,139,0.75), transparent);
  background-size: 500px 500px;
  animation: starDrift 480s linear infinite, twinkle 8s ease-in-out infinite 1s;
}

@keyframes starDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-350px, -350px); }
}
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Soft gold glows — corner ambience */
.stars__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.stars__glow--gold {
  /* Ruby corner glow — top-right */
  width: 520px; height: 520px;
  top: -180px; right: -150px;
  background: radial-gradient(circle, rgba(199,38,74,0.32) 0%, transparent 70%);
  animation: glowFloat 18s ease-in-out infinite alternate;
}
.stars__glow--copper {
  /* Amethyst corner glow — bottom-left */
  width: 600px; height: 600px;
  bottom: -220px; left: -180px;
  background: radial-gradient(circle, rgba(123,63,171,0.32) 0%, transparent 70%);
  animation: glowFloat 22s ease-in-out infinite alternate-reverse;
}
@keyframes glowFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.15); }
}

/* Glass sheen — בוטל (אפקט הזרקור הנע ברקע) בכל הדפים */
.stars__sheen { display: none; }

/* Light mode — cream sky, no stars; jewel-tinted corner glows (ruby + amethyst) */
[data-theme="light"] .stars {
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, #FFFFFF 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 100%, #F0E6CC 0%, transparent 50%),
    #FAF3E2;
}
[data-theme="light"] .stars__layer { display: none; }
[data-theme="light"] .stars__glow--gold {
  background: radial-gradient(circle, rgba(199,38,74,0.22) 0%, transparent 70%);
}
[data-theme="light"] .stars__glow--copper {
  background: radial-gradient(circle, rgba(123,63,171,0.22) 0%, transparent 70%);
}

/* ============================================================
   App topbar (inner pages — clean, minimal)
   RTL layout: back arrow on the LEFT, logo+title on the RIGHT.
   ============================================================ */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--s-4);
  background: rgba(10, 7, 3, 0.70);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border-faint);
}
[data-theme="light"] .app-topbar {
  background: rgba(255, 253, 245, 0.85);
  border-bottom-color: rgba(154, 78, 38, 0.18);
}
.app-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: inherit;
}
.app-topbar-logo {
  height: 48px !important;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(212, 168, 83, 0.30));
  transition: transform var(--t-fast) var(--ease);
}
.app-topbar-brand:hover .app-topbar-logo { transform: scale(1.06); }
.app-topbar-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.app-topbar-actions { display: flex; gap: var(--s-2); align-items: center; }

/* Left-side group: brand + cart-pill sit together (RTL: visually on the left) */
.app-topbar-left {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.app-cart-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 17px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--t-fast) var(--ease);
}
.app-cart-pill:hover {
  transform: scale(1.08);
  border-color: var(--border-bold);
  color: var(--gold);
}
[data-theme="light"] .app-cart-pill {
  background: rgba(255, 253, 245, 0.90);
  border-color: var(--copper-deep);
  color: var(--copper-deep);
}
.app-cart-pill-ico { line-height: 1; display: block; }
.app-cart-pill-count {
  position: absolute;
  top: -4px;
  left: -6px; /* RTL viewport: visually on the upper-right of the icon */
  min-width: 18px;
  padding: 2px 5px;
  background: linear-gradient(135deg, #C9A961 0%, #7B3FAB 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(123, 63, 171, 0.45);
  pointer-events: none;
}
.app-cart-pill-count:empty { display: none !important; }
/* Staff iframe — never show the customer cart pill */
html.staff .app-cart-pill,
html.staff-mode .app-cart-pill { display: none !important; }

/* Share pill — שיתוף קישור לעמוד המוצר (אותו עיצוב כמו עגלה) */
.app-share-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--t-fast) var(--ease);
}
.app-share-pill:hover {
  transform: scale(1.08);
  border-color: var(--border-bold);
  color: var(--gold);
}
[data-theme="light"] .app-share-pill {
  background: rgba(255, 253, 245, 0.90);
  border-color: var(--copper-deep);
  color: var(--copper-deep);
}
.app-share-pill-ico { line-height: 1; display: block; }
html.staff .app-share-pill,
html.staff-mode .app-share-pill { display: none !important; }

/* Toast — מוצג כשמעתיקים קישור (דסקטופ) */
.app-share-toast {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.22) 0%, rgba(123, 63, 171, 0.20) 100%);
  border: 1px solid var(--border-bold);
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(123, 63, 171, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.app-share-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.app-share-toast.err { background: rgba(248, 113, 113, 0.18); border-color: rgba(248, 113, 113, 0.50); word-break: break-all; }

@media (max-width: 640px) {
  .app-topbar { height: 56px; }
  .app-topbar-logo { height: 40px !important; }
  .app-cart-pill { width: 34px; height: 34px; font-size: 15px; }
  .app-cart-pill-count { font-size: 12px; min-width: 16px; padding: 1px 4px; }
  .app-share-pill { width: 34px; height: 34px; font-size: 14px; }
  .app-topbar-left { gap: var(--s-2); }
}
.app-back {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--t-fast) var(--ease);
}
.app-back:hover { transform: scale(1.08); border-color: var(--border-bold); color: var(--gold); }
.app-back svg { width: 16px; height: 16px; display: block; }
[data-theme="light"] .app-back {
  background: rgba(255, 253, 245, 0.90);
  border-color: var(--copper-deep);
  color: var(--copper-deep);
}
@media (max-width: 640px) {
  .app-topbar { height: 76px; padding: 0 var(--s-3); }
  .app-topbar-logo { height: 62px !important; }
  .app-topbar-title { font-size: 14px; }
  .app-back { width: 34px; height: 34px; }
}

/* ── Top-right action group (homepage only) ─────────────── */
.top-actions {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 110;
  display: flex;
  gap: 8px;
  align-items: center;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  text-decoration: none;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-base) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { transform: scale(1.08); border-color: var(--border-bold); color: var(--gold); }
/* Light mode — solid white pills with copper accent */
[data-theme="light"] .icon-btn {
  background: rgba(255, 253, 245, 0.90);
  border-color: var(--copper-deep);
  color: var(--copper-deep);
  box-shadow: 0 4px 12px rgba(154, 78, 38, 0.18);
}
[data-theme="light"] .icon-btn:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 20px; height: 20px; display: block; }

/* Theme toggle — swap icons based on theme */
#theme-toggle .icon-sun { display: none; }
#theme-toggle .icon-moon { display: block; }
[data-theme="dark"] #theme-toggle .icon-sun { display: block; }
[data-theme="dark"] #theme-toggle .icon-moon { display: none; }

@media (max-width: 640px) {
  .top-actions { top: 12px; right: 12px; gap: 6px; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn svg { width: 18px; height: 18px; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-7);
  text-align: center;
  position: relative;
  flex: 1;
}

.hero__logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  position: relative;
  flex-wrap: wrap;
}

.hero__logo {
  width: min(420px, 62vw);
  height: auto;
  display: block;
  filter:
    drop-shadow(0 14px 28px rgba(0,0,0,0.55))
    drop-shadow(0 0 36px rgba(212,168,83,0.30));
  transition: transform 0.6s var(--ease);
  animation: heroReveal 1s var(--ease) both;
}
[data-theme="light"] .hero__logo {
  filter:
    drop-shadow(0 10px 22px rgba(30,20,5,0.20))
    drop-shadow(0 0 28px rgba(184,136,46,0.18));
}
/* Compact variant for inner pages */
.hero__logo--compact { width: min(220px, 40vw); }

/* Page title block (inner pages) */
.page-title { text-align: center; }
.page-title__h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  
  
  
  color: #F2D79A;
  margin: 0 0 var(--s-2);
  animation: heroReveal 0.9s var(--ease) 0.1s both;
}
.page-title__sub {
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  animation: heroReveal 0.9s var(--ease) 0.2s both;
}
[data-theme="light"] .page-title__h1 {
  color: #F2D79A;
}

/* ── Original Award seal ───────────────────────────────── */
.award-seal {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  transform: rotate(-7deg);
  filter:
    drop-shadow(0 12px 30px rgba(212, 168, 83, 0.60))
    drop-shadow(0 0 55px rgba(200, 112, 64, 0.35));
  animation: sealFloat 5s ease-in-out infinite, heroReveal 1s var(--ease) 0.15s both;
}
@keyframes sealFloat {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(-5deg) translateY(-4px); }
}
[data-theme="light"] .award-seal {
  filter:
    drop-shadow(0 12px 30px rgba(154, 78, 38, 0.45))
    drop-shadow(0 0 35px rgba(184, 136, 46, 0.40))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}
[data-theme="light"] .award-seal::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 20, 8, 0.92) 0%, rgba(28, 20, 8, 0.78) 60%, transparent 100%);
  z-index: -1;
}
.award-seal svg { width: 100%; height: 100%; display: block; }
.award-seal__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18%;
  pointer-events: none;
}
.award-seal__trophy {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.60));
}
.award-seal__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  
  
  
  color: #E8C171;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.30);
}
.award-seal__year {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: #fbbf24;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.30);
}

/* ── Action cards — Liquid Glass with photo + 3D tilt ──── */
.actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  perspective: 1200px;
}

.card {
  position: relative;
  display: block;
  height: 220px;
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text-primary);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  will-change: transform;
  animation: cardReveal 0.8s var(--ease) both;
  cursor: pointer;
}
/* Light mode — bolder borders and shadow */
[data-theme="light"] .card {
  border: 1.5px solid rgba(154, 78, 38, 0.30);
  box-shadow: 0 12px 32px rgba(154, 78, 38, 0.18);
}
[data-theme="light"] .card:hover {
  border-color: var(--copper-deep);
  box-shadow:
    0 24px 48px rgba(154, 78, 38, 0.28),
    0 0 50px rgba(184, 136, 46, 0.20);
}
[data-theme="light"] .card--featured {
  border-color: var(--copper-deep);
}
.card:nth-child(1) { animation-delay: 0.25s; }
.card:nth-child(2) { animation-delay: 0.40s; }

.card:hover {
  box-shadow:
    0 28px 60px rgba(0,0,0,0.45),
    0 0 60px color-mix(in srgb, var(--card-jewel, var(--gold)) 32%, transparent);
  border-color: color-mix(in srgb, var(--card-jewel, var(--gold)) 60%, var(--border-bold));
}

/* Image background */
.card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateZ(0);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease);
  filter: grayscale(20%) contrast(1.05);
}
.card:hover .card__media img { transform: scale(1.08); }

.card__media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--card-jewel, var(--gold)) 22%, transparent) 0%,
      color-mix(in srgb, var(--card-jewel, var(--gold)) 8%, transparent) 100%),
    linear-gradient(180deg, rgba(10,14,26,0.40) 0%, rgba(10,14,26,0.85) 100%);
  transition: background var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
/* Light mode — much lighter overlay so images show through warmly */
[data-theme="light"] .card__media-overlay {
  background:
    linear-gradient(135deg, rgba(255,253,245,0.20) 0%, rgba(244,208,120,0.10) 100%),
    linear-gradient(180deg, rgba(255,250,235,0.10) 0%, rgba(120,80,30,0.55) 100%);
}
[data-theme="light"] .card__media img {
  filter: grayscale(10%) contrast(0.98) brightness(1.05) saturate(1.10);
}

/* Shine layer (mouse-followed via JS) */
.card__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background var(--t-base) var(--ease);
  mix-blend-mode: overlay;
  z-index: 2;
}

/* Body content */
.card__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-5);
  text-align: right;
  z-index: 3;
  color: #fff;
  /* Caption scrim — darkens only the bottom where the text sits, so the photo
     stays bright on top but white text always has contrast (fixes light-on-light). */
  background: linear-gradient(to top,
    rgba(8,10,18,0.74) 0%,
    rgba(8,10,18,0.46) 24%,
    rgba(8,10,18,0.12) 48%,
    transparent 70%);
}
/* Light mode — warm copper scrim (on-brand) instead of cold navy */
[data-theme="light"] .card__body {
  background: linear-gradient(to top,
    rgba(58,32,10,0.82) 0%,
    rgba(58,32,10,0.54) 26%,
    rgba(58,32,10,0.16) 50%,
    transparent 72%);
}

.card__corner {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--gold-bright);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  transition: all var(--t-base) var(--ease);
}
/* Light mode — solid cream badge, but icon + border use the card's own jewel */
[data-theme="light"] .card__corner {
  background: rgba(255,250,235,0.95);
  border-color: var(--card-jewel, var(--copper-deep));
  color: var(--card-jewel, var(--copper-deep));
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.card__corner svg { width: 20px; height: 20px; }
.card:hover .card__corner {
  background: var(--gradient-gold);
  border-color: var(--gold-bright);
  color: #1a1208;
  transform: scale(1.10) rotate(-6deg);
}

.card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}
.card__desc {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  margin-top: 4px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Featured card — gold metallic + jewel accent */
.card--featured { border-color: var(--gold); }
.card--featured .card__media-overlay {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--card-jewel, var(--gold)) 36%, transparent) 0%,
      color-mix(in srgb, var(--card-jewel, var(--gold)) 16%, transparent) 100%),
    linear-gradient(180deg, rgba(10,14,26,0.30) 0%, rgba(10,14,26,0.85) 100%);
}
.card--featured::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-gold);
  z-index: 4;
}

/* ── Jewel rotation: each card gets a different gemstone ── */
.actions > a.card:nth-of-type(4n+1) { --card-jewel: var(--jewel-ruby); }
.actions > a.card:nth-of-type(4n+2) { --card-jewel: var(--jewel-amethyst); }
.actions > a.card:nth-of-type(4n+3) { --card-jewel: var(--jewel-emerald); }
.actions > a.card:nth-of-type(4n+4) { --card-jewel: var(--jewel-topaz); }
/* Light mode: keep the jewel rotation — only replace gold accents (frame/text) with copper, not the gems */

/* Jewel underline strip — gives each card a colored signature */
.actions > a.card::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--card-jewel, var(--gold));
  opacity: 0.85;
  z-index: 4;
  transition: height var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.actions > a.card:hover::before { height: 5px; opacity: 1; }

/* Corner badge inherits the card jewel on hover */
.card:hover .card__corner {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--card-jewel, var(--gold)) 100%);
  border-color: var(--gold-bright);
  color: #fff;
  transform: scale(1.10) rotate(-6deg);
}

/* ── Reveal animations ──────────────────────────────────── */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Respect reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .orb-1, .orb-2, .orb-3, .award-seal { animation: none; }
  .hero__logo, .card { animation: none; }
  .card { transform: none !important; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero { gap: var(--s-5); }
  /* Mobile: stack vertically — logo on top, seal below */
  .hero__logo-row { gap: var(--s-3) !important; flex-direction: column !important; flex-wrap: nowrap !important; }
  .hero__logo { width: min(260px, 70vw); }
  .award-seal { width: 110px; height: 110px; }
  .award-seal__trophy { font-size: 18px; }
  .award-seal__title { font-size: 12px; }
  .award-seal__year { font-size: 12px; }
  .actions { grid-template-columns: 1fr; max-width: 380px; gap: var(--s-4); }
  .card { height: 160px; }
  .card__body { padding: var(--s-4); }
  .card__corner { width: 38px; height: 38px; top: var(--s-3); left: var(--s-3); }
  .card__corner svg { width: 17px; height: 17px; }
  .card__title { font-size: 18px; }
  .card__desc { font-size: 14px; }
}

@media (max-height: 720px) {
  .hero__logo { width: min(280px, 48vw); }
  .award-seal { width: 130px; height: 130px; }
  .hero { gap: var(--s-5); }
  .card { height: 180px; }
}

/* ============================================================
   Customer Bottom Bar — mobile quick-contact strip
   Injected by bottom-bar.js on index.html for guests + customers.
   Hidden for staff (worker/manager/admin) by the JS itself.
   ============================================================ */
.keshet-bottom-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(180deg, rgba(10,14,26,0.92) 0%, rgba(10,14,26,0.98) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -10px 28px rgba(0,0,0,0.55);
  direction: rtl;
}
.kbb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.kbb:active { transform: scale(0.94); }
.kbb__ico { width: 24px; height: 24px; display: block; }
.kbb__lbl { line-height: 1; }
.kbb--call { color: var(--gold-bright); }
.kbb--call:hover, .kbb--call:focus-visible { background: rgba(224,194,119,0.14); }
.kbb--wa   { color: #25d366; }
.kbb--wa:hover, .kbb--wa:focus-visible   { background: rgba(37,211,102,0.14); }
.kbb--chat { color: #4cfa8a; }
.kbb--chat:hover, .kbb--chat:focus-visible { background: rgba(37,211,102,0.14); }
.kbb--nav  { color: var(--jewel-emerald); }
.kbb--nav:hover, .kbb--nav:focus-visible { background: rgba(26,139,139,0.18); }
.kbb--login { color: var(--text-secondary, #8899bb); }
.kbb--login:hover, .kbb--login:focus-visible { background: rgba(136,153,187,0.14); }

/* Badge הודעות לא-נקראות על אייקון הצ׳אט */
.kbb__badge {
  position: absolute;
  top: 2px;
  left: calc(50% - 18px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #FF3B30 0%, #C7264A 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(199,38,74,0.55), 0 0 0 2px rgba(10,14,26,0.92);
  pointer-events: none;
}
[data-theme="light"] .kbb__badge {
  box-shadow: 0 2px 8px rgba(199,38,74,0.45), 0 0 0 2px rgba(255,250,240,0.94);
}

/* Reserve space so centered hero on home isn't covered (body.home has overflow:hidden) */
body.has-keshet-bottom-bar .page {
  padding-bottom: calc(var(--s-7) + 56px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   Home — גלילת עמוד רגילה. הכל זז יחד למעלה כשגוללים:
   אייקונים → לוגו → חותם → קוביות. רק bottom-bar נשאר fixed.
   הקוביות שומרות על גודל טבעי מהעיצוב.
   ============================================================ */
/* ביטול הנעילה ל-100dvh + overflow:hidden שמוגדרת ב-tokens.css */
body.home,
html:has(body.home) {
  height: auto;
  overflow: visible;
}

body.home .page {
  min-height: 100dvh;
  height: auto;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-4);
  /* כל ה-padding בנפרד — כדי שכלל body.has-keshet-bottom-bar .page
     { padding-bottom } יוכל לחול בלי לדרוס */
  padding-top: var(--s-3);
  padding-right: var(--s-4);
  padding-left: var(--s-4);
}

/* Top icons — fixed מעל התוכן, 40px מכל שוליים */
body.home .top-actions {
  position: fixed;
  top: 20px;
  left: 40px;
  right: 40px;
  width: auto;
  z-index: 110;
  justify-content: space-between;
  margin: 0;
  align-self: auto;
}

/* Hero — גודל טבעי, גולל עם העמוד */
body.home .hero {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  width: 100%;
}
body.home .hero__logo-row { flex: 0 0 auto; }
body.home .actions { flex: 0 0 auto; }

/* במובייל — אייקונים עליונים קצת קטנים יותר (חוסך פיקסלים בלי לפגוע בלוגו) */
@media (max-width: 640px) {
  body.home .top-actions { gap: 6px; }
  body.home .icon-btn { width: 40px; height: 40px; }
  body.home .icon-btn svg { width: 17px; height: 17px; }
}

/* Light theme */
[data-theme="light"] .keshet-bottom-bar {
  background: linear-gradient(180deg, rgba(255,250,240,0.94) 0%, rgba(255,250,240,0.99) 100%);
  border-top-color: var(--copper-deep, #8a4f1a);
  box-shadow: 0 -8px 22px rgba(120,80,30,0.18);
}
[data-theme="light"] .kbb         { color: var(--copper-deep, #8a4f1a); }
[data-theme="light"] .kbb--call   { color: var(--copper-deep, #8a4f1a); }
[data-theme="light"] .kbb--wa     { color: #1aa84a; }
[data-theme="light"] .kbb--chat   { color: #128c7e; }
[data-theme="light"] .kbb--nav    { color: #0c6868; }

/* Desktop: hide — phone number already visible in topbar/contact areas */
@media (min-width: 900px) {
  .keshet-bottom-bar { display: none; }
  body.has-keshet-bottom-bar .page { padding-bottom: var(--s-4); }
}