/* =================================================================
   TAHDIX — shared brand system for website mockups
   Navy 534C #1B3A5F · Gold 7555C #C8A148
   Fonts: Cormorant Garamond (EN display) · Frank Ruhl Libre (HE display)
          EB Garamond (EN body) · Heebo (UI / HE body)
   RTL-first, mobile-first, WCAG AA.
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Frank+Ruhl+Libre:wght@400;500;700;900&family=Heebo:wght@300;400;500;600;700;800&display=swap');

:root{
  /* brand */
  --navy:#1B3A5F;
  --navy-700:#15314f;
  --navy-900:#0d2138;
  --navy-soft:#26466b;
  --gold:#C8A148;
  --gold-bright:#d8b86a;
  --gold-deep:#a07c2e;
  --cream:#F6F1E7;
  --cream-2:#efe8d8;
  --paper:#FCFAF5;
  --ink:#21282f;
  --ink-soft:#55606b;
  --line:#e7e0d0;

  /* fonts */
  --f-display-en:'Cormorant Garamond', serif;
  --f-display-he:'Frank Ruhl Libre', serif;
  --f-body-en:'EB Garamond', serif;
  --f-ui:'Heebo', system-ui, sans-serif;

  /* scale */
  --container:1180px;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --shadow-sm:0 2px 10px -4px rgba(20,40,70,.18);
  --shadow-md:0 14px 40px -18px rgba(20,40,70,.32);
  --shadow-lg:0 30px 80px -30px rgba(13,33,56,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-ui); color:var(--ink); background:var(--paper);
  line-height:1.6; direction:rtl; text-align:right;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
ul{ list-style:none; }

/* latin runs inside Hebrew */
.en{ direction:ltr; unicode-bidi:isolate; display:inline-block; }
.f-en{ font-family:var(--f-body-en); }
.disp-en{ font-family:var(--f-display-en); }

/* layout */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
section{ position:relative; }

/* price */
.price{ font-family:var(--f-ui); font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
.price .cur{ font-weight:700; }
.price-old{ text-decoration:line-through; opacity:.5; font-weight:500; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--f-ui); font-weight:700; font-size:1rem; line-height:1;
  padding:1.05em 1.9em; border-radius:999px; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s;
  min-height:52px; white-space:nowrap;
}
.btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.btn-gold{ background:var(--gold); color:var(--navy-900); box-shadow:0 10px 26px -12px rgba(200,161,72,.8); }
.btn-gold:hover{ background:var(--gold-bright); transform:translateY(-2px); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-700); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--navy); }
.btn-ghost:hover{ background:var(--navy); color:#fff; }
.btn-ghost-gold{ background:transparent; color:var(--gold); box-shadow:inset 0 0 0 1.5px var(--gold); }
.btn-ghost-gold:hover{ background:var(--gold); color:var(--navy-900); }
.btn-lg{ font-size:1.12rem; padding:1.18em 2.2em; min-height:58px; }
.btn-block{ width:100%; }

/* eyebrow / kicker */
.kicker{ font-family:var(--f-ui); font-weight:700; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); }

/* trust strip */
.trust{ display:flex; flex-wrap:wrap; gap:18px 34px; align-items:center; justify-content:center; }
.trust .item{ display:inline-flex; align-items:center; gap:9px; font-size:.92rem; font-weight:500; color:var(--ink-soft); }
.trust .item svg{ width:21px; height:21px; flex:0 0 auto; color:var(--gold-deep); }

/* star rating placeholder */
.stars{ display:inline-flex; gap:2px; color:var(--gold); }
.stars svg{ width:18px; height:18px; }

/* mandala helper */
.mandala-bg{ position:absolute; inset:0; background-image:url('../assets/mandala.png'); background-repeat:no-repeat; pointer-events:none; }

/* sticky mobile add-to-cart (shared) */
.sticky-cart{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; align-items:center; gap:14px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); box-shadow:0 -10px 30px -20px rgba(0,0,0,.4);
}
.sticky-cart .sc-info{ flex:1; min-width:0; }
.sticky-cart .sc-name{ font-weight:700; font-size:.95rem; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-cart .sc-price{ font-weight:800; color:var(--ink); }
.sticky-cart .btn{ padding:.95em 1.4em; min-height:48px; }

/* reviews-empty placeholder */
.reviews-empty{
  border:1.5px dashed var(--line); border-radius:var(--r-lg);
  padding:40px 24px; text-align:center; color:var(--ink-soft);
}
.reviews-empty .tag{ display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); background:var(--cream); padding:6px 14px; border-radius:999px; margin-bottom:12px; }

/* elegant image placeholders (no real lifestyle photos yet) */
.ph{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(42,70,107,.6) 0%, transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%);
  display:flex; align-items:flex-end; isolation:isolate;
}
.ph::before{
  content:""; position:absolute; inset:0; opacity:.16; mix-blend-mode:screen;
  background-image:url('../assets/mandala.png'); background-size:cover; background-position:center;
}
.ph::after{
  content:attr(data-label); position:relative; z-index:2;
  font-family:var(--f-display-en); font-style:italic; font-size:.95rem;
  color:rgba(255,255,255,.72); padding:14px 18px; letter-spacing:.02em;
}
.ph.gold{ background:linear-gradient(135deg, #d9b96a 0%, #a87f2c 100%); }
.ph.gold::after{ color:rgba(40,28,8,.66); }
.ph.cream{ background:linear-gradient(135deg, #f0e7d4 0%, #e2d4b6 100%); }
.ph.cream::after{ color:rgba(80,60,20,.6); }

/* real lifestyle photo fill — neutralizes mandala overlay + label */
.ph.photo{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.ph.photo::before, .ph.photo::after{ display:none !important; content:none !important; }

/* a11y */
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; right:12px; top:-60px; background:var(--navy); color:#fff; padding:10px 18px; border-radius:0 0 10px 10px; z-index:200; transition:top .2s; }
.skip-link:focus{ top:0; }

@media (max-width:760px){
  .sticky-cart{ display:flex; }
  .container{ padding-inline:18px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}