/* ═══════════════════════════════════════════════════════
   Juliet Boutique — שכבת עיצוב v5  (Luxury feminine spirituality)
   נטענת כרגע מעמוד הבית בלבד, אחרי boutique.css.
   בסיס שמנת ולבן · ורוד ניוד באזורים נבחרים · זהב בפרטים קטנים
   Plum לכפתורים והדגשות · כחול לילה שמור לתוכן אסטרולוגי בלבד
   ═══════════════════════════════════════════════════════ */

:root {
  /* Plum — צבע הפעולה הראשי */
  --plum:        #6C3F5B;
  --plum-deep:   #55304A;
  --plum-tint:   #F3ECF1;
  --plum-line:   rgba(108, 63, 91, .22);
  --plum-shadow: rgba(108, 63, 91, .30);

  /* ורוד ניוד — רקעים עדינים בלבד */
  --nude:      #FBF3EF;
  --nude-deep: #F4E7E0;

  /* כחול לילה — שמור לתוכן אסטרולוגי, אינו בשימוש בעמוד הבית */
  --night-blue: #202B47;

  /* מקצב ורדיוסים רכים יותר */
  --r-card: 14px;
  --r-tile: 18px;
  --r-pill: 999px;

  --shadow-soft: 0 2px 14px rgba(33, 29, 27, .04);
  --shadow-card: 0 18px 44px -26px rgba(85, 48, 74, .30);

  /* טקסט משני מעט כהה יותר — קריאוּת טובה יותר על רקעי שמנת */
  --soft-taupe-a11y: #6A5749;
}

/* ─── טיפוגרפיה: שני גופנים בלבד בכל העמוד ───
   Frank Ruhl Libre לכותרות · Assistant לגוף. כפתורים וקלטים ירשו את גופן הגוף
   במקום ברירת המחדל של הדפדפן (Arial), כדי שלא ייכנס גופן שלישי. */
button, input, select, textarea { font-family: inherit; }

/* ─── טיפוגרפיה: יותר אוויר, אותיות רגועות ─── */
h1 { font-size: clamp(2.05rem, 4.4vw, 3.25rem); letter-spacing: -.018em; line-height: 1.16; }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.35rem); letter-spacing: -.012em; line-height: 1.22; }

.bq-section-head p { color: var(--soft-taupe-a11y); font-size: 1.04rem; line-height: 1.75; margin-top: 15px; }
.bq-kicker { color: var(--champagne-gold); letter-spacing: .24em; font-size: .7rem; }

/* ─── מקצב סקשנים אחיד ───
   ריפוד עליון נדיב (72–88px) שמפריד בין הכותרת לתוכן שמעליה, וריפוד תחתון מצומצם
   יותר — כך שהמרווח הריק בין סוף סקשן לכותרת הבא נשאר סביב 120px ולא 220px.
   הרקעים מתחלפים לסירוגין, ולכן האסימטריה אינה נראית לעין. */
.bq-section,
.bq-story,
.bq-gifts { padding-block: clamp(72px, 6.1vw, 88px) clamp(40px, 3.4vw, 48px); }
.bq-section-head { margin-bottom: clamp(38px, 3.4vw, 52px); }

/* ─── רצף רקעים בעמוד הבית — לבן · שמנת · ניוד לסירוגין ─── */
#categories,
#top-picks,
#juli-advisor,
#reviews,
#faq              { background: var(--warm-white); }
#new-arrivals,
#stone-jewelry    { background: var(--ivory); }
#intentions,
#gifts-quick      { background: var(--nude); }
#story            { background: var(--ivory); }

/* ═══ אזור הכותרת — שלוש שכבות בלבד, נמוך ככל האפשר ═══
   1. פס הודעה דק · 2. שורת לוגו/חיפוש/מועדפים/עגלה · 3. שורת תפריט אחת.
   שורת המשנה הנפרדת נעלמת, ובשורת התפריט נעשה שימוש בעותקים שכבר קיימים בה
   ("לפי כוונה" ו"יולי — יועצת הקריסטלים") — בלי שכפול ובלי הזזה ב-DOM. */
.bq-anno {
  background: linear-gradient(90deg, var(--plum-deep) 0%, var(--plum) 55%, #8A5570 100%);
  letter-spacing: .04em;
  font-size: .86rem;
  padding-block: 7px;
}
.bq-header-sub { display: none; }

@media (min-width: 861px) {
  .bq-header-inner { padding-block: 10px; }
  #bq-nav .bq-drawer-body { gap: 10px 22px; }
  #bq-nav .bq-drawer-body a { min-height: 38px; padding-block: 7px; }

  /* "לפי כוונה" — קישור רגיל, זהה לשאר פריטי התפריט */
  #bq-nav .bq-drawer-body > a.bq-drawer-only { display: inline-flex; }

  /* "יולי — יועצת הקריסטלים" — הגלולה המודגשת היחידה בשורה (במקום גלולת הזהב) */
  #bq-nav .bq-nav-advisor {
    color: var(--plum);
    background: var(--plum-tint);
    border: 1px solid var(--plum-line);
    border-radius: var(--r-pill);
    padding-inline: 14px;
    font-size: .84rem;
    font-weight: 600;
    min-height: 32px;
    transition: background .25s, color .25s, border-color .25s;
  }
  #bq-nav .bq-nav-advisor:hover {
    background: var(--plum);
    color: #fff;
    border-color: var(--plum);
  }
}

/* ═══ Hero — תיבת טקסט בצד ימין, מעל אזור הסאטן הריק ═══
   בעברית (RTL) ‏margin-inline-start הוא הצד הימני; לכן auto בצד end דוחף ימינה. */
.bq-hero-v2 { min-height: min(600px, 72vh); }
.bq-hero-v2-content {
  max-width: 500px;
  margin-inline-start: clamp(16px, 3.5vw, 64px);
  margin-inline-end: auto;
  padding: clamp(30px, 3.2vw, 44px) clamp(26px, 2.8vw, 40px);
  border-radius: 20px;
  /* שמנת שקופה שמתמוססת לכיוון התמונה — לא מלבן לבן כבד */
  background: linear-gradient(90deg,
    rgba(252, 250, 247, 0) 0%,
    rgba(252, 250, 247, .40) 16%,
    rgba(252, 250, 247, .74) 46%,
    rgba(252, 250, 247, .84) 100%);
}
.bq-hero-v2-content h1 {
  font-size: clamp(1.8rem, 2.55vw, 2.3rem);
  line-height: 1.24;
  letter-spacing: -.012em;
  margin-bottom: 14px;
}
.bq-hero-v2-content .bq-hero-sub {
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 34ch;
  margin-bottom: var(--s3);
}
.bq-hero-v2-actions { gap: 12px; }
.bq-hero-v2-actions .bq-btn { padding: 12px 24px; }
/* הכפתור המשני חייב להיות קריא מעל התמונה — רקע לבן וקו Plum מלא */
.bq-hero-v2-actions .bq-btn-outline {
  background: rgba(255, 255, 255, .88);
  border-color: var(--plum);
  color: var(--plum-deep);
}

/* ─── שורת יתרונות ─── */
.bq-benefits-row {
  background: var(--warm-white);
  border-block: 1px solid var(--border);
  padding-block: var(--s3);
  letter-spacing: .02em;
}

/* ═══ כפתורים — Plum הוא הפעולה הראשית ═══ */
.bq-btn {
  border-radius: var(--r-pill);
  padding: 13px 28px;
  font-weight: 600;
  letter-spacing: .03em;
  border-width: 1.5px;
}
.bq-btn-primary {
  background: var(--plum);
  color: #fff;
  border-color: var(--plum);
}
.bq-btn-primary:hover {
  background: var(--plum-deep);
  border-color: var(--plum-deep);
  box-shadow: 0 12px 28px -10px var(--plum-shadow);
}
.bq-btn-outline {
  background: transparent;
  color: var(--plum);
  border-color: var(--plum-line);
}
.bq-btn-outline:hover {
  background: var(--plum) !important;
  color: #fff !important;
  border-color: var(--plum) !important;
  box-shadow: 0 12px 28px -10px var(--plum-shadow);
}
.bq-btn-wine {
  background: var(--plum);
  border-color: var(--plum);
}
.bq-btn-wine:hover {
  background: var(--plum-deep);
  box-shadow: 0 12px 28px -10px var(--plum-shadow);
}

/* ─── צ'יפים (רצועת התקציב במתנות) ─── */
.bq-chip {
  border-color: var(--plum-line);
  background: rgba(255, 255, 255, .7);
  padding: 11px 20px;
  letter-spacing: .02em;
  transition: background .25s, color .25s, border-color .25s;
}
.bq-chip:hover { background: var(--plum-tint); border-color: var(--plum); color: var(--plum); }
.bq-chip[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: #fff; }

/* ═══ כרטיס מוצר — נקי, תמונה גדולה, מחיר ב-Plum ═══ */
.bq-grid { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: clamp(16px, 2vw, 30px); }

.bq-card {
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  transition: box-shadow .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1);
}
.bq-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}
.bq-card-imgwrap { background: #fff; border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; }
.bq-card-imgwrap img {
  padding: 6px;
  border-bottom: 0;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.bq-card:hover .bq-card-imgwrap img { transform: scale(1.035); }

/* אחידות כרטיסים בעמוד הבית: אותו מבנה בכל כרטיס — שם · מחיר · פעולה.
   התיאור והתגיות נשארים בעמודי הקטגוריה והמוצר, כמו שכבר נהוג ב-#picks-grid. */
#new-grid .bq-card-desc,
#stone-jewelry-grid .bq-card-desc,
#new-grid .bq-card-intents,
#stone-jewelry-grid .bq-card-intents { display: none; }

/* גוף הכרטיס: מרווחים מפורשים במקום gap אחיד —
   שם · 14px · מחיר · 13px · פעולה. קומפקטי, בלי חלל ריק מלאכותי. */
.bq-card-body { padding: 13px 14px 15px; gap: 0; }
.bq-card-name {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -.005em;
  min-height: 2.68em;   /* בדיוק שתי שורות — מקום המחיר והכפתור זהה בכל הכרטיסים */
  margin-bottom: 14px;
}
.bq-card-name a:hover { color: var(--plum); }
.bq-card-desc { font-size: .82rem; line-height: 1.55; }
.bq-card-price {
  color: var(--plum);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
  margin-bottom: 13px;
}
.bq-card-price del { color: var(--soft-taupe-a11y); font-weight: 400; }

.bq-tag { border-color: var(--plum-line); color: var(--soft-taupe-a11y); background: rgba(255, 255, 255, .6); }

/* "הוספה לעגלה" — Outline יוקרתי ב-Plum: מסגרת ברורה 1.5px, טקסט Plum מלא במשקל 600
   ורקע ורוד-ניוד בהיר מאוד. ממולא ב-hover, ולא כפתור סגול כבד ברוחב מלא. */
.bq-card-actions { margin-top: auto; gap: 8px; padding-top: 0; }
.bq-card-actions .bq-btn {
  flex: 0 1 auto;
  width: calc(100% - 12px);
  margin-inline: auto;
  min-height: 44px;
  padding: 9px 14px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--r-pill);
  background: var(--nude);
  color: var(--plum);
  /* 2px ולא 1.5px: במסך ב-DPR 1 הדפדפן מעגל 1.5px כלפי מטה ל-1px והמסגרת נחלשת */
  border: 2px solid rgba(108, 63, 91, .52);
  transition: background .22s, color .22s, border-color .22s, box-shadow .22s;
}
.bq-card-actions .bq-btn:hover {
  background: var(--plum);
  color: #fff;
  border-color: var(--plum);
  box-shadow: 0 10px 22px -12px var(--plum-shadow);
}
/* מצב מיקוד ברור למקלדת */
.bq-card-actions .bq-btn:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 2px;
  background: #fff;
  border-color: var(--plum);
  box-shadow: 0 0 0 4px rgba(108, 63, 91, .16);
}

.bq-badge { border-radius: var(--r-pill); padding: 4px 11px; letter-spacing: .05em; font-size: .68rem; }
.bq-badge-gold { background: var(--champagne-gold); color: #40342A; }

/* ─── כפתור מועדפים ─── */
.bq-fav:hover { color: var(--plum); }

/* ─── מוזאיקת העולמות ─── */
.bq-worlds-grid { gap: clamp(12px, 1.6vw, 20px); }
.bq-world-card { border-radius: var(--r-tile); box-shadow: var(--shadow-soft); }
.bq-world-card:hover { box-shadow: 0 24px 54px -30px rgba(85, 48, 74, .45); }
.bq-world-card-text h3 { font-size: 1.28rem; letter-spacing: -.005em; }
.bq-world-card.is-jewelry .bq-world-card-text h3 { font-size: 1.65rem; }
.bq-world-card-text .bq-gift-cta {
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  padding-bottom: 2px;
  letter-spacing: .06em;
  font-size: .78rem;
}

/* ─── כרטיסי כוונה ─── */
.bq-intent-cards { gap: 18px; max-width: 820px; }
.bq-intent-card--img { border-radius: var(--r-tile); min-height: 162px; border-color: rgba(255, 255, 255, .55); }
.bq-intent-card--img span {
  font-family: var(--font-head);
  font-size: 1.1rem;
  letter-spacing: .01em;
}

/* ─── כרטיס יולי · יועצת הקריסטלים ─── */
.juli-entry {
  background:
    radial-gradient(130% 150% at 50% -30%, rgba(108, 63, 91, .12), transparent 58%),
    radial-gradient(90% 120% at 88% 120%, rgba(184, 154, 103, .12), transparent 55%),
    linear-gradient(158deg, #FFFCFA 0%, #FBF3EF 48%, #F5EBF1 100%);
  border-color: var(--plum-line);
  box-shadow: 0 26px 60px -32px var(--plum-shadow), inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.juli-entry::after { border-color: rgba(184, 154, 103, .30); }
.juli-entry__orb {
  background: radial-gradient(circle at 34% 28%, #fff, var(--dusty-rose) 96%);
  box-shadow: 0 12px 30px rgba(108, 63, 91, .28), 0 0 0 8px rgba(108, 63, 91, .07);
}
.juli-entry__cta {
  background: var(--plum);
  color: #fff;
  box-shadow: 0 14px 30px -12px var(--plum-shadow);
}
.juli-entry:hover .juli-entry__cta { background: var(--plum-deep); }
.juli-entry__foot b { color: var(--plum); }

/* ─── סיפור המותג ─── */
.bq-story-inner { gap: clamp(32px, 5vw, 72px); }
.bq-story-text p { line-height: 1.85; }
.bq-story-quote {
  font-size: 1.12rem;
  color: var(--plum);
  line-height: 1.6;
  border-inline-start: 2px solid var(--plum-line);
  padding-inline-start: 16px;
  margin-block: 22px 10px;
}
.bq-story-img { border-radius: var(--r-tile); box-shadow: 0 28px 60px -34px rgba(85, 48, 74, .45); }

/* ─── שאלות נפוצות ─── */
.bq-faq details {
  border-radius: var(--r-card);
  border-color: var(--border);
  background: #fff;
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}
.bq-faq summary { padding: 18px 22px; }
.bq-faq details[open] summary { color: var(--plum); }
.bq-faq summary::after { color: var(--champagne-gold); }
.bq-faq .acc-body { padding: 0 22px 20px; }

/* ─── ביקורות ─── */
.bq-reviews-cta { gap: 14px; margin-top: var(--s4); }

/* ═══ מובייל ═══ */
@media (max-width: 760px) {
  .bq-section,
  .bq-story,
  .bq-gifts { padding-block: clamp(48px, 8.4vw, 60px) clamp(30px, 5.2vw, 38px); }
  .bq-section-head { margin-bottom: 32px; }
  .bq-section-head p { margin-top: 13px; }
  .bq-btn { padding: 13px 24px; }

  /* Hero במובייל: התמונה למעלה במלואה, הטקסט מתחתיה — התכשיטים לא מוסתרים */
  .bq-hero-v2 { display: block; height: auto; min-height: 0; background: var(--warm-white); }
  .bq-hero-v2 picture,
  .bq-hero-v2 img {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
  }
  .bq-hero-v2 img { aspect-ratio: 4/3; object-fit: cover; object-position: 32% 50%; }
  .bq-hero-v2::after { display: none; }
  .bq-hero-v2-content {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 26px 20px 30px;
    background: var(--warm-white);
    border-radius: 0;
    text-align: center;
  }
  .bq-hero-v2-content h1 { font-size: clamp(1.68rem, 6.4vw, 2.05rem); }
  .bq-hero-v2-content .bq-hero-sub { font-size: 1.02rem; max-width: 42ch; margin-inline: auto; }
  /* שני הכפתורים בשורה אחת גם ב-375px */
  .bq-hero-v2-actions { justify-content: center; gap: 10px; }
  .bq-hero-v2-actions .bq-btn { padding: 12px 17px; font-size: .95rem; }
}
@media (max-width: 560px) {
  .bq-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .bq-card-body { padding: 11px 11px 13px; gap: 0; }
  .bq-card-name { font-size: .95rem; margin-bottom: 12px; }
  .bq-card-price { font-size: .96rem; margin-bottom: 11px; }
  .bq-card-actions .bq-btn { width: calc(100% - 6px); padding: 9px 6px; font-size: .83rem; min-height: 44px; }
  .bq-intent-cards { gap: 12px; }
  .bq-intent-card--img { min-height: 128px; }
  .bq-intent-card--img span { font-size: 1rem; }
  .bq-story-quote { font-size: 1.05rem; }
}