/* ==========================================================================
   Magazine — שכבת העיצוב
   --------------------------------------------------------------------------
   נטענת אחרונה ומגדירה מחדש את הרכיבים שנושאים את המראה: המסטהד,
   השער, ראשי המדורים, כרטיס הפריט והספרד של עמוד המוצר.

   למה שכבה נפרדת ולא שכתוב של shop.css: הקובץ ההוא מחזיק את
   המבנה של 30 עמודים — עגלה, תשלום, חשבון, מדיניות. שכתוב שלו
   היה מסכן עמודים שאין להם קשר לעיצוב. כאן משנים רק את מה שנראה.

   שלושה חוקים שחוזרים לאורך הקובץ:
     1. קווי שיער מפרידים, לא קופסאות. מגזין בנוי על רשת ורווח.
     2. מספור. כל פריט וכל מדור מקבלים ספרה — זה מה שהופך רשימה
        למפתח עניינים.
     3. ניגוד גדלים. כותרת ענקית ליד טקסט זעיר היא כל האפקט.
   ========================================================================== */

/* ============================ Header ============================ */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line-ink);
  position: sticky; top: 0; z-index: 100;
}

.header-inner {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--header-h);
}

.header-nav .nav-list {
  display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0;
}

.nav-link {
  display: block; padding: 12px 0;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
  position: relative;
}
.nav-link:hover { color: var(--ink); text-decoration: none; }

/* הקו התחתון נבנה מהמרכז — תנועה קטנה שמסמנת חיות בלי רעש */
.nav-link::after {
  content: ""; position: absolute; bottom: 6px; inset-inline: 0;
  height: 1.5px; background: var(--ink);
  transform: scaleX(0); transform-origin: center;
  transition: transform .22s ease;
}
.nav-link:hover::after,
.nav-link.is-current::after { transform: scaleX(1); }

.header-search input {
  border: 0; border-bottom: 1px solid var(--line-ink);
  background: transparent; border-radius: 0;
  font-size: .9rem;
}
.header-search input:focus { background: transparent; border-bottom-width: 2px; }

/* ============================ שער ============================ */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--line-ink);
  overflow: hidden;
}

/* רשת הדפוס — קווים אנכיים דקים שמזכירים עמודות עמוד */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to left, rgba(255,255,255,.045) 0 1px, transparent 1px 25%
  );
}

.hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: end;
  gap: var(--sp-7);
  padding-block: var(--sp-8) var(--sp-7);
}

.hero-eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-5);
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--hot);
  color: var(--paper);
  font-size: .66rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
}

.hero-title {
  font-size: clamp(2.6rem, 8.4vw, 6.2rem);
  line-height: .94;
  letter-spacing: -.035em;
  color: var(--paper);
  margin-bottom: var(--sp-5);
  max-width: 14ch;
}

/* המילה האחרונה בכותרת מודגשת בקו תחתון עבה — הימור עיצובי */
.hero-title em {
  font-style: normal;
  box-shadow: inset 0 -.14em 0 var(--hot);
}

.hero-text {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255,255,255,.72);
  max-width: 46ch;
  margin-bottom: var(--sp-6);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero-actions .btn-primary {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.hero-actions .btn-primary:hover { background: var(--hot); border-color: var(--hot); color: #fff; }
.hero-actions .btn-outline { border-color: rgba(255,255,255,.4); color: var(--paper); }
.hero-actions .btn-outline:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.hero-art { align-self: end; }
.hero-art img {
  width: 100%; max-width: 340px;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.45));
}

/* ---------- רצועת הגיליון ---------- */

.hero-strip {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-strip-inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  padding-block: var(--sp-3);
  font-size: .66rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.58);
}
.hero-strip-inner strong { color: var(--paper); font-weight: 700; }

/* ============================ ראש מדור ============================ */

.section { padding-block: var(--sp-8); }
.section + .section { padding-top: 0; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-6);
  border-bottom: 1.5px solid var(--line-ink);
}

.section-title {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  letter-spacing: -.03em;
  line-height: 1;
}

/* מספר המדור יושב מעל הכותרת, כמו בעמוד תוכן עניינים */
.section-num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font);
  font-size: .64rem; font-weight: 500;
  letter-spacing: .2em; color: var(--ink-3);
}

.section-link {
  flex: none;
  font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink-3);
}
.section-link:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }

/* ============================ מפתח הקטגוריות ============================ */

/*
 * הקטגוריות אינן אריחים אלא מפתח עניינים: מספר, שם גדול, וקו.
 * העיצוב הקודם בנה רשת של קופסאות עם רקע וגבול, ולכן כאן נדרש
 * איפוס מפורש — בלעדיו נשארת מסגרת אפורה מסביב לכל שורה.
 */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-7);
  background: transparent;
  border: 0;
  counter-reset: cat;
}

.category-tile {
  counter-increment: cat;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--sp-4);
  min-height: 0;
  padding: var(--sp-4) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-align: start;
  overflow: visible;
  transition: padding-inline-start .2s ease;
}
.category-tile:hover {
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  padding-inline-start: var(--sp-3);
}

.category-tile::before {
  content: counter(cat, decimal-leading-zero);
  flex: none;
  font-family: var(--font);
  font-size: .64rem; font-weight: 500;
  letter-spacing: .1em;
  color: var(--ink-3);
}

.category-tile span,
.category-tile img + span {
  position: static;
  color: var(--ink);
  text-shadow: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.category-tile img { display: none; }   /* המפתח טיפוגרפי בלבד */

/* חץ בקצה — מופיע בריחוף בלבד, כדי לא להוסיף רעש במנוחה */
.category-tile::after {
  content: "←";
  margin-inline-start: auto;
  color: var(--ink-3);
  opacity: 0; transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.category-tile:hover::after { opacity: 1; transform: translateX(0); }

/* ============================ רשת הפריטים ============================ */

/*
 * רשת אחידה, ולא ספרד עם פריט מוביל שנפרס לרוחב.
 * ניסיתי קודם לפרוס את הפריט הראשון על שתי עמודות: זה נראה נכון
 * כשמספר הפריטים מתחלק יפה, אבל כשנשאר פריט בודד נפער חור ענק
 * באמצע העמוד. חנות יד שנייה לא שולטת בכמות — כל פריט הוא עותק
 * יחיד — ולכן הרשת חייבת להיראות טוב בכל מספר.
 *
 * הקצב העריכתי מגיע במקום זה מגובה התמונות: כל פריט שלישי גבוה
 * יותר. הכרטיסים מיושרים למעלה, וכך נוצר מדרג טבעי בלי חללים.
 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
  align-items: start;
  gap: var(--sp-7) var(--sp-5);
  counter-reset: item;
}

/* ============================ כרטיס פריט ============================ */

.product-card {
  counter-increment: item;
  position: relative;
  display: flex; flex-direction: column;
  background: transparent;
  border: 0;
}

.product-card-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--bg-3);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.product-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.product-card:hover .product-card-media img { transform: scale(1.035); }

.product-card-noimage {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}

/* מספר הפריט — ספרה בפינה, כמו מספר עמוד */
.product-card-media::after {
  content: counter(item, decimal-leading-zero);
  position: absolute; bottom: 0; inset-inline-start: 0;
  padding: 5px 9px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 700;
  font-size: .68rem; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.product-badges {
  position: absolute; top: 0; inset-inline-end: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}

.product-card .badge {
  border-radius: 0;
  padding: 4px 8px;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .06em;
}
.badge-sale { background: var(--hot); color: #fff; }
.badge-new  { background: var(--ink); color: #fff; }
.badge-out  { background: var(--bg-2); color: var(--ink-2); }

.product-card-body { display: flex; flex-direction: column; flex: 1; }

.product-card-brand {
  font-size: .62rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}

.product-card-title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.18;
  letter-spacing: -.02em;
}
.product-card-title a { color: var(--ink); }
.product-card-title a:hover { text-decoration: none; box-shadow: inset 0 -1px 0 var(--ink); }

.product-card-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-size: .7rem; color: var(--ink-3);
  margin-bottom: var(--sp-3);
}

.condition-chip {
  padding: 2px 7px;
  border: 1px solid var(--line);
  font-size: .64rem; letter-spacing: .04em;
  color: var(--ink-2);
}

.product-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.price { display: flex; align-items: baseline; gap: var(--sp-2); }
.price-now {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.price-sale { color: var(--hot); }
.price-old {
  font-size: .78rem; color: var(--ink-3);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.btn-fav {
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  background: transparent; color: var(--ink-2);
}
.btn-fav:hover { border-color: var(--ink); color: var(--ink); }
.btn-fav[aria-pressed="true"] { background: var(--hot); border-color: var(--hot); color: #fff; }

/* כפתור ההוספה מופיע בריחוף בדסקטופ; בטלפון הוא תמיד גלוי */
.product-card .btn-block { margin-top: var(--sp-3); }

.product-card.is-out .product-card-media img { filter: grayscale(1); opacity: .55; }

/* ============================ רצועת אמירה ============================ */

.cta-band {
  background: var(--ink); color: var(--paper);
  padding-block: var(--sp-8);
  margin-top: var(--sp-8);
  border-top: 1px solid var(--line-ink);
}
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-6);
}
.cta-title {
  margin: 0 0 var(--sp-2);
  color: var(--paper);
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.02; letter-spacing: -.03em;
  max-width: 18ch;
}
.cta-text { margin: 0; color: rgba(255,255,255,.7); max-width: 52ch; }
.cta-band .btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-band .btn-light:hover { background: var(--hot); border-color: var(--hot); color: #fff; }

/* ============================ Footer ============================ */

.site-footer {
  background: var(--ink); color: rgba(255,255,255,.72);
  padding-top: var(--sp-8);
  margin-top: 0;
  border-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
}
.footer-heading {
  margin: 0 0 var(--sp-3);
  font-family: var(--font);
  font-size: .64rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-block; padding: 4px 0; color: rgba(255,255,255,.8); font-size: .86rem; }
.footer-links a:hover { color: #fff; }
.footer-text { font-size: .86rem; color: rgba(255,255,255,.6); max-width: 34ch; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: var(--sp-4);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* ============================ כפתורים ============================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 11px var(--sp-5);
  border: 1.5px solid transparent;
  border-radius: 0;
  font-family: var(--font);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--hot); border-color: var(--hot); text-decoration: none; }
.btn-dark { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-dark:hover { background: var(--accent-ink); border-color: var(--accent-ink); text-decoration: none; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.btn-light { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-light:hover { border-color: var(--ink); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn-ghost:hover { color: var(--ink); text-decoration: none; }
.btn-lg { min-height: 52px; padding-inline: var(--sp-6); font-size: .78rem; }
.btn-sm { min-height: 34px; padding: 5px var(--sp-3); font-size: .68rem; letter-spacing: .1em; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- כפתור PayPal ---------- */

/*
 * צבעי PayPal מחייבים: הצהוב והכחול הם נכסי מותג שלהם ואסור
 * לצבוע אותם מחדש. לכן הכפתור הוא האלמנט היחיד באתר שיוצא
 * מהפלטה — וזה בסדר, כי לקוחות מזהים אותו מיידית.
 */
.btn-paypal {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px;
  margin-top: var(--sp-2);
  padding: 10px var(--sp-5);
  background: #ffc439;
  border: 1.5px solid #ffc439;
  border-radius: 0;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.btn-paypal:hover { background: #f0b52c; border-color: #f0b52c; }
.btn-paypal:active { background: #e5aa22; }
.btn-paypal:disabled { opacity: .5; cursor: not-allowed; }

.btn-paypal-label {
  font-family: var(--font);
  font-size: .82rem; font-weight: 700;
  color: #000;
  letter-spacing: 0;
}
.btn-paypal-logo { flex: none; display: block; }

/* ============================ עמוד מוצר ============================ */

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--sp-7);
  align-items: start;
  padding-block: var(--sp-6) var(--sp-8);
}

.gallery-main {
  aspect-ratio: 3 / 4;
  background: var(--bg-3);
  overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.gallery-thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.gallery-thumb {
  width: 68px; aspect-ratio: 1; padding: 0;
  border: 1px solid var(--line); background: var(--bg-3);
  cursor: pointer; overflow: hidden;
}
.gallery-thumb.is-active { border-color: var(--ink); border-width: 2px; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-title {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.02; letter-spacing: -.03em;
  margin-bottom: var(--sp-4);
}

.product-brand {
  font-size: .66rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-2);
}

.product-price-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}
.product-price-row .price-now { font-size: 2rem; }

.spec-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-5); margin: 0;
}
.spec-list > div {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: .86rem;
}
.spec-list dt { color: var(--ink-3); margin: 0; }
.spec-list dd { margin: 0; font-weight: 500; }

/* ============================ מובייל ============================ */

@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--sp-5); padding-block: var(--sp-7) var(--sp-6); }
  .hero-art { justify-self: center; }
  .hero-art img { max-width: 220px; }
  .cta-inner { grid-template-columns: 1fr; }
  .product-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
}

@media (max-width: 760px) {
  .section { padding-block: var(--sp-7); }
  .section-head { margin-bottom: var(--sp-5); }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-3); }
  /* בטלפון הפריט המוביל תופס שורה שלמה, ולכן נשאר מוביל */
  .product-grid > .product-card:first-child { grid-column: 1 / -1; }
  .product-grid > .product-card:first-child .product-card-media { aspect-ratio: 4 / 3; }
  .product-grid > .product-card:first-child .product-card-title { font-size: 1.25rem; }

  .category-grid { grid-template-columns: 1fr; }
  .category-tile { padding: var(--sp-3) 0; }

  .hero-title { font-size: clamp(2.1rem, 11vw, 3.1rem); }
  .hero-strip-inner { gap: var(--sp-4); font-size: .6rem; }

  .spec-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }

  .product-card-title { font-size: .95rem; }
  .price-now { font-size: 1.02rem; }
}

@media (max-width: 420px) {
  .product-grid { gap: var(--sp-5) var(--sp-2); }
}

@media print {
  .site-header, .site-footer, .hero-art, .btn { display: none !important; }
}

/* ==========================================================================
   תיקוני ירושה
   --------------------------------------------------------------------------
   shop.css מחזיק כללים בסלקטור כפול (.product-card .btn-primary), שגובר
   על סלקטור יחיד כאן. במקום להחליש אותו שם — מה שהיה נוגע גם בעגלה
   ובתשלום — מותאמת כאן אותה רמת ספציפיות.
   ========================================================================== */

.product-card .btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.product-card .btn-primary:hover {
  background: var(--hot);
  border-color: var(--hot);
  color: #fff;
}
.product-card .btn-outline,
.product-card .btn-light {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line);
}

/* כפתורי הכרטיס: נמוכים, אבל לא מתחת לסף אזור המגע */
.product-card .btn-primary,
.product-card .btn-outline,
.product-card .btn-light {
  min-height: 38px;
  padding: 8px var(--sp-3);
  font-size: .68rem;
  letter-spacing: .12em;
}

/* ---------- רצועת הגיליון: הדגשים ---------- */
.hero-strip-inner strong { color: var(--paper); }

/* ---------- ההדגשה בכותרת השער ---------- */
/* קו דק מתחת למילה ולא גוש צבע — הגרסה הראשונה בלעה את האות */
.hero-title em {
  font-style: normal;
  box-shadow: inset 0 -.085em 0 var(--hot);
}

/* ==========================================================================
   תיקוני ירושה — סבב שני
   ========================================================================== */

/* תגית מבצע: shop.css צבע אותה בירוק המותג בסלקטור כפול.
   ירוק הוא צבע ה"בסדר" באתר; מבצע צריך להיות הצבע החם. */
.product-badges .badge-sale { background: var(--hot); color: #fff; }
.product-badges .badge-new  { background: var(--ink);  color: #fff; }

/*
 * כפתור המועדפים חוזר לתחתית הכרטיס.
 * בעיצוב הקודם הוא ריחף מעל התמונה כעיגול לבן. בגריד עריכתי
 * צפוף זה קטע את הצילום ומשך תשומת לב לפעולה משנית.
 */
.product-card .btn-fav {
  position: static;
  width: 36px; height: 36px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-3);
  flex: none;
}
.product-card .btn-fav:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.product-card .btn-fav[aria-pressed="true"] {
  background: var(--hot); border-color: var(--hot); color: #fff;
}

/*
 * גובה תמונה אחיד.
 * הקצב המדורג שניסיתי קודם — כל פריט שלישי גבוה יותר — נראה
 * אקראי ולא מכוון, והוציא את כפתורי ההוספה מיישור. במגזין אמיתי
 * מפתח הפריטים דווקא אחיד; הקצב מגיע מהטיפוגרפיה ומהרווח.
 */
.product-grid > .product-card .product-card-media { aspect-ratio: 3 / 4; }

/* ==========================================================================
   יישור הכרטיסים
   --------------------------------------------------------------------------
   שמות פריטים נשברים למספר שורות שונה, וחלקם בלי מידה או מותג.
   בלי גובה אחיד כפתורי ההוספה יושבים בגבהים שונים והשורה נראית
   רשלנית. כאן כל כרטיס נמתח לגובה השורה, והתחתית נדחפת למטה.
   ========================================================================== */

.product-grid { align-items: stretch; }

.product-card { height: 100%; }
.product-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }

/* הכותרת שומרת גובה של שתי שורות — כך הרשת נושמת אחיד */
.product-card-title {
  min-height: 2.36em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
}
.product-card-footer .price { flex: 1 1 auto; min-width: 0; }

/* כפתור ההוספה תמיד בתחתית, בשורה משלו */
.product-card .btn-block { margin-top: var(--sp-3); }

/* ==========================================================================
   תיקוני ירושה — סבב שלישי
   --------------------------------------------------------------------------
   שתי תכונות שלא הוצהרו כאן במפורש המשיכו לרשת את הערך מ-shop.css,
   למרות שהקובץ הזה נטען אחריו. CSS דורס תכונה-תכונה ולא כלל שלם.
   ========================================================================== */

/*
 * התמונה נעלה מהתמתחות. בתוך flex column עם גובה אחיד היא ניפחה
 * את עצמה למלא את השארית, וביטלה את יחס הגובה-רוחב — ולכן
 * תחתיות התמונות בשורה אחת יצאו בגבהים שונים.
 */
.product-card-media { flex: 0 0 auto; }

/*
 * שורת המחיר חייבת להיות אופקית. shop.css הגדיר flex-direction: column,
 * וכך המחיר והלב הוצגו זה מתחת לזה ובמרכז הכרטיס.
 */
.product-card-footer {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: start;
}

.product-card-body { gap: 0; text-align: start; }

/* המטא צמוד לכותרת, לא מרחף באמצע הכרטיס */
.product-card-meta { margin-bottom: var(--sp-2); }

/* ==========================================================================
   הדר במובייל — שורה אחת
   --------------------------------------------------------------------------
   ארבעה ילדים: המבורגר, לוגו, חיפוש ואזור הפעולות. אזור הפעולות
   מכיל שלושה אייקונים וגם כפתור "צור קשר", ובטלפון הרוחב הזה דוחף
   את כולם לשורה שלישית. הכפתור מוסתר כאן — הוא קיים בפוטר, בתפריט
   ובסרגל התחתון, ולכן לא אובדת דרך להגיע אליו.
   ========================================================================== */

@media (max-width: 760px) {
  .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    min-height: 54px;
    padding-top: var(--sp-2);
  }

  .header-burger  { order: 1; flex: none; }
  .logo           { order: 2; flex: 0 1 auto; min-width: 0; }
  .header-actions { order: 3; margin-inline-start: auto; flex: none; gap: 0; }
  .header-search  { order: 4; flex: 1 0 100%; margin: 0; }

  .header-support { display: none; }

  .logo-img { height: 30px; max-width: 132px; }
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn svg { width: 19px; height: 19px; }

  /* רצועת הגיליון מתקצרת — שני פריטים מספיקים בטלפון */
  .hero-strip-inner { gap: var(--sp-3) var(--sp-4); font-size: .58rem; }
  .hero-strip-inner span:nth-child(n + 3) { display: none; }
}

@media (max-width: 380px) {
  .logo-img { height: 27px; max-width: 112px; }
  .icon-btn { width: 35px; height: 35px; }
}

/* ---------- השער בטלפון ---------- */
@media (max-width: 680px) {
  .hero-inner { padding-block: var(--sp-6) var(--sp-5); gap: var(--sp-4); }
  .hero-title { margin-bottom: var(--sp-4); }
  .hero-text  { font-size: .92rem; margin-bottom: var(--sp-5); }

  /* שני הכפתורים זה לצד זה — חוסך גלילה ומשאיר את האיור במסך */
  .hero-actions { flex-wrap: nowrap; gap: var(--sp-2); }
  .hero-actions .btn {
    flex: 1 1 50%;
    min-height: 44px;
    padding-inline: var(--sp-2);
    font-size: .7rem;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  .hero-art { margin-top: var(--sp-3); }
  .hero-art img { max-width: 190px; }
}

/* ==========================================================================
   עמוד המוצר — ליטושים
   ========================================================================== */

/*
 * תקרת גובה לגלריה. ביחס 3/4 על עמודה רחבה התמונה הגיעה לאלף
 * פיקסלים ודחפה את המחיר ואת כפתורי הקנייה מתחת לקיפול.
 */
.gallery-main { max-height: 76vh; aspect-ratio: auto; height: 640px; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

/* כל כפתורי הפעולה ברוחב זהה — אחרת השורה נראית מקרית */
.secondary-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.secondary-actions .btn { width: 100%; }
.secondary-actions .btn-ghost { border-color: transparent; }

.product-price-row .badge-sale { background: var(--hot); color: #fff; }

@media (max-width: 900px) {
  .gallery-main { height: auto; aspect-ratio: 3 / 4; max-height: none; }
}

/* ==========================================================================
   אזורי מגע
   --------------------------------------------------------------------------
   קישור בגובה שורת טקסט הוא כ-20 פיקסלים, ובאצבע זה מחטיא.
   הריפוד נוסף אנכית בלבד — הטיפוגרפיה נשארת כפי שתוכננה.
   ========================================================================== */

.footer-links a,
.footer-contact a,
.breadcrumbs a,
.section-link,
.link-sm,
.product-brand,
.cookie-link,
.auth-note a,
.legal a {
  display: inline-block;
  padding-block: 7px;
  min-height: 32px;
}

.search-submit { width: 38px; height: 38px; }

/* הפוטר: הריפוד הנוסף דורש כיווץ המרווח בין שורות */
.footer-links li { line-height: 1.2; }

/*
 * קישור שם הפריט ממלא את גוש הכותרת.
 * הקיצוץ לשתי שורות הוגדר על ה-h3, אבל אזור הלחיצה נקבע לפי ה-a
 * שבתוכו — ולכן הוא נשאר בגובה שורת טקסט אחת.
 */
.product-card-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.36em;
}

/*
 * הפעולות המשניות בעמוד המוצר.
 * flex-wrap שנותר מהעיצוב הקודם גרם לשני הכפתורים לזלוג לשתי
 * עמודות במקום להיערם, ולכן הם הופיעו זה לצד זה ובחצי רוחב.
 */
.secondary-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.secondary-actions > * { width: 100%; }

/*
 * המיכל עצמו התכווץ לרוחב התוכן.
 * ההורה הוא flex עם align-items: flex-start, ולכן הילד מקבל רוחב
 * מינימלי ולא נמתח. align-self מבטל את זה נקודתית.
 */
.secondary-actions { align-self: stretch; width: 100%; }