/* =========================================================
   miel — עיצוב בהשראת חנויות רהיטים מינימליסטיות (RTL)
   לבן · שחור · אפור · אדום להנחות בלבד

   מוסכמה אחת שחשוב לשמור עליה:
   כל כלל :hover יושב בתוך @media (hover: hover).

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

   שימו לב לבורר שמערבב :hover עם מצב אמיתי כמו .active.
   צריך לפצל אותו לשניים, אחרת המצב האמיתי מפסיק לעבוד
   בנייד. יש כאן שתי דוגמאות כאלה, בניווט.
   ========================================================= */
:root {
  --bg: #ffffff;
  --bg-soft: #f6f5f3;
  --ink: #1c1c1c;
  --ink-soft: #6b6b6b;
  --line: #e6e4e0;
  --sale: #c02b2b;
  --btn: #141414;
  --radius: 3px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ---------- נגישות ----------
   מסגרת מיקוד אחידה. :focus-visible מוצג רק בניווט מקלדת,
   כך שמי שמשתמש בעכבר לא רואה מסגרות בכל לחיצה, ומי שמנווט
   בלי עכבר תמיד יודע איפה הוא נמצא.

   העיצוב ביטל את המסגרת בעשרה מקומות, כולל בשדות טופס
   ההזמנה. זה נראה נקי ומשאיר מי שלא משתמש בעכבר בלי שום
   סימן על המסך. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
/* על רקע כהה מסגרת שחורה נבלעת, ולכן שם היא לבנה */
.btn:focus-visible,
.topbar a:focus-visible,
.hero :focus-visible { outline-color: #fff; outline-offset: 3px; }

/* קישור דילוג לתוכן. נסתר עד שמגיעים אליו במקלדת, ואז
   חוסך מעבר על כל שורת הקטגוריות בכל עמוד מחדש. */
.skip-link {
  position: absolute;
  right: 12px;
  top: -60px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 600;
}
/* בלי הנפשה בכוונה. קישור דילוג צריך להופיע ברגע שמגיעים
   אליו, לא להחליק פנימה. */
.skip-link:focus { top: 12px; }

/* מי שביקש במערכת ההפעלה פחות תנועה מקבל פחות תנועה.
   כולל גלילה חלקה, שכבר גרמה כאן בעבר לקפיצות באמצע. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* טקסט שנועד לקורא מסך בלבד */
.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;
}
body {
  font-family: 'Assistant', 'Heebo', -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  direction: rtl;
  line-height: 1.55;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; font-size: 1rem; color: inherit; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.hidden { display: none !important; }

/* ---------- פס עליון ---------- */
.topbar {
  background: #111;
  color: #fff;
  text-align: center;
  font-size: 0.82rem;
  padding: 8px 16px;
  letter-spacing: 0.03em;
}
.topbar b { font-weight: 700; }

/* ---------- הדר ---------- */
header.site {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--line);
}
.header-main {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px 0 14px;
}
/* בלי nowrap. מי שמגדיל טקסט ל־200% קיבל שורת לוגו רחבה
   מהמסך, וכל הדף נדחף לגלילה הצידה בגללה. */
.logo { text-align: center; line-height: 1.1; max-width: 100%; }
.logo .mark {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  margin-inline-end: -0.32em;
  color: #111;
}
.logo .tag {
  display: block;
  font-size: 0.68rem;
  color: var(--ink-soft);
  letter-spacing: 0.28em;
  margin-inline-end: -0.28em;
  margin-top: 2px;
  /* המרווח בין האותיות מוסיף רוחב שהשורה לא מוותרת עליו,
     וזה הספיק כדי לדחוף את הדף לגלילה הצידה בטקסט מוגדל. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.search-wrap { position: relative; flex: 1; max-width: 620px; margin: 0 auto; }
.search-wrap input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border: 1px solid #d9d7d2;
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.92rem;
  transition: border-color 0.15s;
}
.search-wrap input::placeholder { color: #6b6b6b; }
.search-wrap input:focus { border-color: #111; }
.search-wrap .search-ico {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: #6b6b6b;
  pointer-events: none;
}
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0; left: 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
  max-height: 400px;
  overflow-y: auto;
  z-index: 80;
}
.search-results a {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.search-results a:last-child { border-bottom: none; }
@media (hover: hover) {
  .search-results a:hover { background: var(--bg-soft); }
}
.search-results .thumb { width: 56px; height: 44px; flex: none; background: var(--bg-soft); }
.search-results .thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-results .sr-name { font-weight: 600; font-size: 0.9rem; }
.search-results .sr-price { margin-inline-start: auto; font-weight: 700; font-size: 0.9rem; }
.search-results .sr-empty { padding: 16px; color: var(--ink-soft); text-align: center; }

.header-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  color: #111;
}
@media (hover: hover) {
  .icon-btn:hover { opacity: 0.6; }
}
.icon-btn .badge {
  position: absolute;
  top: 3px; left: 3px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ---------- ניווט ---------- */
nav.main-nav ul {
  display: flex;
  justify-content: center;
  /* כשהרשימה ארוכה מהמסך, מרכוז שופך את העודף לשני הצדדים
     והפריטים הראשונים יוצאים מתחום הגלילה. לא רק שלא רואים
     אותם, אי אפשר להגיע אליהם. safe center מתנהג כמו התחלה
     בדיוק במצב הזה, ונשאר מרכוז כשהכל נכנס.
     דפדפן שלא מכיר אותו מתעלם מהשורה ונשאר עם center. */
  justify-content: safe center;
  gap: 8px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
nav.main-nav ul::-webkit-scrollbar { display: none; }
nav.main-nav a {
  display: block;
  padding: 10px 14px 13px;
  font-weight: 600;
  font-size: 0.93rem;
  color: #333;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}
nav.main-nav a.active { border-color: #111; color: #111; }
@media (hover: hover) {
  nav.main-nav a:hover { border-color: #111; color: #111; }
}
nav.main-nav a.sale-link { color: var(--sale); }
nav.main-nav a.sale-link.active { border-color: var(--sale); }
@media (hover: hover) {
  nav.main-nav a.sale-link:hover { border-color: var(--sale); }
}

/* ---------- כפתורים ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--btn);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 30px;
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}
@media (hover: hover) {
  .btn:hover { opacity: 0.85; }
}
.btn.ghost { background: transparent; color: #111; border: 1px solid #111; }
@media (hover: hover) {
  .btn.ghost:hover { background: #111; color: #fff; opacity: 1; }
}
.btn.light { background: #fff; color: #111; }
.btn.small { padding: 9px 18px; font-size: 0.86rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- הירו ובאנרים ---------- */
.hero {
  position: relative;
  min-height: 480px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero .hero-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 12, 0.28);
}
.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 60px 24px;
  max-width: 720px;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 300;
  letter-spacing: 0.14em;
  margin-inline-end: -0.14em;
  line-height: 1.2;
  margin-bottom: 10px;
}
.hero h1 b { font-weight: 800; }
.hero p {
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 28px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.hero .fine {
  position: absolute;
  bottom: 12px;
  right: 0; left: 0;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.85);
  z-index: 2;
}

.mid-banner {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 56px 0;
}
.mid-banner .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mid-banner::after { content: ''; position: absolute; inset: 0; background: rgba(20,16,12,0.32); }
.mid-banner .hero-inner { padding: 40px 24px; }
.mid-banner h3 { font-size: 1.9rem; font-weight: 300; letter-spacing: 0.1em; margin-bottom: 6px; }
.mid-banner h3 b { font-weight: 800; }
.mid-banner p { margin-bottom: 22px; }

/* ---------- פס יתרונות ---------- */
.perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 0 8px;
}
.perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 22px 16px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-inline-start: 1px solid var(--line);
}
.perk:last-child { border-inline-end: 1px solid var(--line); }
.perk .p-ico { color: #111; }
.perk b { color: #111; font-size: 0.92rem; font-weight: 700; }

/* ---------- כותרות מקטע ---------- */
.section { margin: 52px 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.section-head h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.section-head a { color: var(--ink-soft); font-weight: 600; font-size: 0.88rem; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  .section-head a:hover { color: #111; }
}

/* ---------- אריחי קטגוריות ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.cat-tile { text-align: center; }
.cat-tile .c-art {
  aspect-ratio: 1;
  background: var(--bg-soft);
  overflow: hidden;
  margin-bottom: 10px;
}
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
@media (hover: hover) {
  .cat-tile:hover img { transform: scale(1.05); }
}
.cat-tile b { font-size: 0.85rem; font-weight: 600; color: #333; }

/* ---------- כרטיס מוצר ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 26px 18px;
}
.p-card { position: relative; display: flex; flex-direction: column; }
.p-media {
  position: relative;
  aspect-ratio: 1 / 0.82;
  overflow: hidden;
  background: var(--bg-soft);
  display: block;
}
.p-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s, opacity 0.3s; }
@media (hover: hover) {
  .p-card:hover .p-media img { transform: scale(1.04); }
}
.p-badges {
  position: absolute;
  top: 10px; right: 10px;
  /* התוויות ממוקמות בתוך התמונה, ולכן הן צריכות גבול משלהן.
     בלי זה טקסט מוגדל מותח אותן מעבר לרוחב הכרטיס ודוחף
     את כל הדף לגלילה הצידה. */
  max-width: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}
.badge-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
}
.badge-pill.sale { background: var(--sale); color: #fff; }
.badge-pill.new { background: #111; color: #fff; }
.badge-pill.info { background: #fff; color: #333; border: 1px solid var(--line); font-weight: 600; }
.wish-toggle {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  color: #444;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  transition: color 0.15s;
}
@media (hover: hover) {
  .wish-toggle:hover { color: #000; }
}
.wish-toggle.on { color: var(--sale); }
.quick-add {
  position: absolute;
  bottom: 0; right: 0; left: 0;
  z-index: 2;
  background: rgba(17,17,17,0.9);
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.2s, transform 0.2s;
  width: 100%;
}
@media (hover: hover) {
  .p-card:hover .quick-add { opacity: 1; transform: translateY(0); }
}
.p-body { padding: 12px 4px 0; text-align: center; }
.p-model { font-size: 0.86rem; font-weight: 800; letter-spacing: 0.1em; color: #111; }
.p-title {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.4;
  margin: 3px 0 8px;
  min-height: 2.3em;
  overflow: hidden;
}
.p-price-row { display: flex; justify-content: center; align-items: baseline; gap: 10px; }
.p-price { font-weight: 700; font-size: 0.98rem; }
.p-price .from { font-weight: 400; font-size: 0.82rem; }
.p-price.on-sale { color: var(--sale); }
.p-old { color: #6b6b6b; text-decoration: line-through; font-size: 0.85rem; }

/* ---------- ניוזלטר ---------- */
.newsletter {
  background: var(--bg-soft);
  padding: 52px 32px;
  text-align: center;
}
.newsletter h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 6px; }
.newsletter p { color: var(--ink-soft); margin-bottom: 22px; font-size: 0.95rem; }
.newsletter form { display: flex; gap: 0; justify-content: center; flex-wrap: wrap; max-width: 460px; margin: 0 auto; }
.newsletter input {
  flex: 1;
  min-width: 220px;
  padding: 12px 16px;
  border: 1px solid #d9d7d2;
  border-inline-end: none;
  border-radius: 0;
  background: #fff;
}
.newsletter input:focus { border-color: #111; }
.newsletter .btn { border-radius: 0; }
.newsletter .nl-done { color: #2c7a3f; font-weight: 700; }
.newsletter .nl-msg { min-height: 1.2em; margin-top: 10px; font-size: 0.9rem; }
.newsletter .nl-err { color: #b3261e; }

/* ---------- פוטר ---------- */
footer.site {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  color: #555;
  margin-top: 64px;
  padding: 52px 0 24px;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
footer .f-logo { font-size: 1.4rem; font-weight: 800; letter-spacing: 0.3em; color: #111; margin-bottom: 12px; }
footer h2 { color: #111; font-size: 0.95rem; font-weight: 700; margin-bottom: 14px; letter-spacing: 0.04em; }
footer ul { list-style: none; display: grid; gap: 9px; }
@media (hover: hover) {
  footer a:hover { color: #111; text-decoration: underline; }
}
.footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 20px; color: #6b6b6b; font-size: 0.82rem; }

/* ---------- עמוד קטלוג ---------- */
.breadcrumbs { font-size: 0.82rem; color: #6b6b6b; margin: 18px 0 6px; }
@media (hover: hover) {
  .breadcrumbs a:hover { color: #111; text-decoration: underline; }
}
.breadcrumbs .sep { margin: 0 6px; }
.page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 2px; }
.page-sub { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 24px; }

.catalog-layout { display: grid; grid-template-columns: 230px 1fr; gap: 36px; align-items: start; }
.filters { position: sticky; top: 132px; max-height: calc(100vh - 150px); overflow-y: auto; padding-inline-end: 4px; }
.filters h3 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding-bottom: 12px;
  border-bottom: 1px solid #111;
}
.f-group { border-bottom: 1px solid var(--line); padding: 14px 0; }
.f-group > .js-fgroup {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
  user-select: none;
}
.f-group > .js-fgroup .chev { transition: transform 0.2s; color: var(--ink-soft); }
.f-group.open > .js-fgroup .chev { transform: rotate(180deg); }
.f-group .f-body { display: none; padding-top: 12px; }
.f-group.open .f-body { display: block; }
.f-check { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 0.88rem; color: #555; cursor: pointer; }
@media (hover: hover) {
  .f-check:hover { color: #111; }
}
.f-check input { accent-color: #111; width: 15px; height: 15px; }
.f-color-row { display: flex; flex-wrap: wrap; gap: 8px; }
.f-color {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.1s;
}
@media (hover: hover) {
  .f-color:hover { transform: scale(1.12); }
}
.f-color.on { outline: 2px solid #111; outline-offset: 2px; }
.f-price-row { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.f-price-row input {
  width: 76px;
  padding: 7px 10px;
  border: 1px solid #d9d7d2;
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.f-clear {
  margin-top: 14px;
  width: 100%;
  text-align: center;
  color: #555;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (hover: hover) {
  .f-clear:hover { border-color: #111; color: #111; }
}

.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  /* פריט שלא יודע להתכווץ מותח את השורה מעבר למסך כשמגדילים
     טקסט. min-width אפס מרשה לו להתכווץ ולרדת שורה. */
  max-width: 100%;
}
.catalog-toolbar .count { color: var(--ink-soft); font-size: 0.88rem; }

/* כפתור הסינון, חלונית הסינון והרקע שמאחוריה קיימים רק
   במסכים צרים. בדסקטופ הסרגל נשאר עמודה קבועה בצד. */
.f-toggle, .f-backdrop, .f-close, .f-apply-bar { display: none; }
.catalog-layout.no-filters { grid-template-columns: 1fr; }
.f-head { display: flex; align-items: center; justify-content: space-between; }
.catalog-toolbar select {
  padding: 9px 14px;
  border-radius: var(--radius);
  border: 1px solid #d9d7d2;
  background: #fff;
  cursor: pointer;
  font-size: 0.88rem;
}
.empty-state {
  border: 1px dashed var(--line);
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-soft);
}
.empty-state b { display: block; font-size: 1.05rem; color: #111; margin-bottom: 6px; }

/* ---------- עמוד מוצר ---------- */
.product-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; margin-top: 14px; align-items: start; }
.gallery-main {
  aspect-ratio: 1 / 0.8;
  background: var(--bg-soft);
  overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.gallery-thumbs button {
  width: 88px; height: 66px;
  overflow: hidden;
  border: 1px solid var(--line);
  padding: 0;
  background: var(--bg-soft);
  transition: border-color 0.15s;
}
.gallery-thumbs button.on { border: 2px solid #111; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pd-col { text-align: center; max-width: 440px; margin: 0 auto; width: 100%; }
.pd-model { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.08em; }
.pd-title { font-size: 1rem; font-weight: 400; color: #444; margin: 4px 0 14px; }
.pd-sale-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 2px; }
.pd-old { font-size: 0.95rem; color: #9b9891; text-decoration: line-through; }
.pd-save { background: var(--sale); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.pd-price { font-size: 2rem; font-weight: 800; margin-bottom: 2px; }
.pd-installments { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 20px; text-decoration: underline; text-underline-offset: 3px; }
.pd-opts { display: grid; gap: 18px; margin-bottom: 22px; }
.pd-opts b { display: block; margin-bottom: 8px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em; }
.opt-colors { display: flex; justify-content: center; gap: 10px; }
.opt-color {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.1s;
}
@media (hover: hover) {
  .opt-color:hover { transform: scale(1.1); }
}
.opt-color.on { outline: 2px solid #111; outline-offset: 2px; }
.opt-sizes { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.opt-size {
  padding: 8px 14px;
  border: 1px solid #d9d7d2;
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.15s;
}
@media (hover: hover) {
  .opt-size:hover { border-color: #111; }
}
.opt-size.on { background: #111; border-color: #111; color: #fff; }
.pd-buy { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.qty {
  display: flex;
  align-items: center;
  border: 1px solid #d9d7d2;
  border-radius: var(--radius);
  background: #fff;
}
.qty button { width: 38px; height: 100%; min-height: 46px; font-size: 1.1rem; color: #555; }
@media (hover: hover) {
  .qty button:hover { color: #000; }
}
.qty span { min-width: 30px; text-align: center; font-weight: 700; font-size: 0.95rem; }
.pd-buy .btn { flex: 1; font-size: 0.98rem; }
.pd-wish {
  border: 1px solid #d9d7d2;
  border-radius: var(--radius);
  width: 46px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #555;
}
@media (hover: hover) {
  .pd-wish:hover { border-color: #111; color: #111; }
}
.pd-wish.on { color: var(--sale); border-color: var(--sale); }
.pd-share { display: flex; justify-content: center; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 0.82rem; margin-bottom: 20px; }
.pd-delivery {
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  padding: 11px 16px;
  color: #444;
  font-size: 0.85rem;
  margin-bottom: 24px;
}

.accordion { border-top: 1px solid var(--line); text-align: right; }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 2px;
  font-weight: 600;
  font-size: 0.93rem;
  text-align: right;
}
.acc-head .plus { font-size: 1.2rem; font-weight: 300; color: #555; line-height: 1; }
.acc-item.open .acc-head .plus { display: none; }
.acc-head .minus { display: none; font-size: 1.2rem; font-weight: 300; color: #555; line-height: 1; }
.acc-item.open .acc-head .minus { display: block; }
.acc-body { display: none; padding: 0 2px 18px; color: #555; font-size: 0.9rem; }
.acc-item.open .acc-body { display: block; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.spec-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.spec-table td:first-child { color: #111; font-weight: 600; width: 45%; }

/* ---------- עגלה / וישליסט ---------- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; align-items: start; margin-top: 14px; }
.cart-list { display: grid; }
.cart-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  align-items: center;
}
.cart-item:first-child { border-top: 1px solid var(--line); }
.cart-item .ci-media { width: 130px; height: 96px; background: var(--bg-soft); }
.cart-item .ci-media img { width: 100%; height: 100%; object-fit: cover; }
.ci-name { font-weight: 700; font-size: 0.95rem; }
.ci-variant { color: var(--ink-soft); font-size: 0.85rem; margin: 2px 0 10px; }
.ci-controls { display: flex; align-items: center; gap: 16px; }
.ci-controls .qty button { min-height: 34px; width: 32px; }
.ci-remove { color: var(--ink-soft); font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  .ci-remove:hover { color: var(--sale); }
}
.ci-price { font-weight: 700; font-size: 1.05rem; text-align: left; }
.ci-price .was { display: block; font-weight: 400; font-size: 0.82rem; color: #9b9891; text-decoration: line-through; }
.cart-summary {
  background: var(--bg-soft);
  padding: 26px;
  position: sticky;
  top: 132px;
}
.cart-summary h3 { margin-bottom: 16px; font-size: 1.05rem; letter-spacing: 0.03em; }
.sum-row { display: flex; justify-content: space-between; padding: 7px 0; color: #555; font-size: 0.92rem; }
.sum-row.total { border-top: 1px solid #d9d7d2; margin-top: 10px; padding-top: 14px; color: #111; font-weight: 800; font-size: 1.1rem; }
.sum-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 12px; text-align: center; }

/* ---------- עמוד תשלום ---------- */
.checkout-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: start; margin-top: 14px; }
.co-block { border: 1px solid var(--line); padding: 22px 24px; margin-bottom: 18px; }
.co-block h3 { font-size: 1rem; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 16px; }
.co-block.co-terms { padding: 18px 24px; margin-bottom: 0; }
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.co-field { display: flex; flex-direction: column; gap: 5px; }
.co-field.wide { grid-column: 1 / -1; }
.co-label { font-size: 0.85rem; font-weight: 600; color: #555; }
.co-label i { color: var(--sale); font-style: normal; }
.co-field input, .co-field textarea {
  padding: 10px 12px;
  border: 1px solid #d9d7d2;
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.92rem;
  resize: vertical;
  transition: border-color 0.15s;
}
.co-field input:focus, .co-field textarea:focus { border-color: #111; }
.co-field.err input, .co-field.err textarea { border-color: var(--sale); }
.f-err { display: block; min-height: 15px; color: var(--sale); font-size: 0.78rem; line-height: 1.3; }

.co-radios { display: grid; gap: 10px; }
.co-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
@media (hover: hover) {
  .co-radio:hover { border-color: #b9b6b0; }
}
.co-radio.on { border-color: #111; }
.co-radio input { accent-color: #111; width: 16px; height: 16px; }
.co-radio-name { font-weight: 600; }
.co-radio-note { margin-inline-start: auto; color: var(--ink-soft); font-size: 0.82rem; }
.co-check { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; cursor: pointer; }
.co-block .co-check { margin-top: 16px; }
.co-block.co-terms .co-check { margin-top: 0; }
.co-check input { accent-color: #111; width: 16px; height: 16px; flex: none; }
.co-pay-note,
.co-ship-note {
  margin-top: 14px;
  background: var(--bg-soft);
  padding: 12px 14px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #555;
}

.co-ship-pick { margin-top: 18px; }
.co-ship-pick h4 { font-size: 0.92rem; margin-bottom: 10px; }

/* מופרד משורות הסיכום בכוונה. הסכום הזה לא נגבה באתר,
   ולכן הוא לא צריך להיראות כמו חלק מהסה"כ */
.sum-aside {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  font-size: 0.88rem;
}
.sum-aside em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.co-summary { background: var(--bg-soft); padding: 26px; position: sticky; top: 132px; }
.co-summary h3 { font-size: 1.05rem; letter-spacing: 0.03em; margin-bottom: 14px; }
.co-lines { border-bottom: 1px solid #d9d7d2; padding-bottom: 12px; margin-bottom: 8px; }
.co-line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 0.88rem; color: #555; }
.co-line-name { font-weight: 600; color: #111; }
.co-eta { display: flex; align-items: center; gap: 8px; margin: 16px 0; font-size: 0.85rem; color: #555; }

/* ---------- אישור הזמנה ---------- */
.order-done { max-width: 720px; margin: 30px auto 60px; text-align: center; }
.order-mark {
  width: 62px; height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
}
.order-num { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.08em; margin-top: 10px; }
.order-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 26px 0;
  text-align: right;
}
.order-facts > div { background: #fff; padding: 14px 16px; font-size: 0.9rem; }
.order-facts b { display: block; margin-bottom: 4px; font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.04em; }
.order-items { border-top: 1px solid var(--line); }
.order-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-size: 0.9rem;
}
.order-item .oi-media { width: 64px; height: 50px; background: var(--bg-soft); }
.order-item .oi-media img { width: 100%; height: 100%; object-fit: cover; }
.oi-variant { color: var(--ink-soft); font-size: 0.82rem; }
.oi-price { font-weight: 700; }
.order-total { display: flex; justify-content: space-between; padding: 16px 0; font-size: 1.1rem; font-weight: 800; }

/* ---------- עמודי תוכן ---------- */
.page-body { max-width: 720px; margin: 10px auto 70px; }
.page-body h1 { font-size: 1.7rem; font-weight: 700; margin-bottom: 18px; }
.page-body p { margin-bottom: 14px; color: #444; }
.page-contact {
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 18px;
  display: grid;
  gap: 10px;
}
.page-contact div { display: flex; gap: 12px; align-items: baseline; }
.page-contact span { width: 70px; color: var(--ink-soft); font-size: 0.88rem; }
.page-contact a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.co-terms-links { display: block; margin-top: 6px; font-size: 0.85rem; color: var(--ink-soft); }
.co-terms-links a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .page-body { margin: 4px auto 50px; }
  .page-body h1 { font-size: 1.4rem; }
}

/* ---------- ניהול ---------- */
.admin-wrap { max-width: 640px; margin: 40px auto 70px; }
.admin-card {
  border: 1px solid var(--line);
  padding: 28px 26px;
  margin-bottom: 18px;
}
.admin-card h1 { font-size: 1.35rem; font-weight: 700; margin-bottom: 10px; }
.admin-card h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.admin-card p { color: #555; font-size: 0.93rem; margin-bottom: 10px; }
.admin-card .co-field { margin: 18px 0 4px; }
.admin-card code {
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: var(--radius);
  font-size: 0.86rem;
}
.admin-note { font-size: 0.85rem; color: var(--ink-soft); }
.link-btn {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #111;
  font: inherit;
}
.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.admin-head h1 { font-size: 1.35rem; font-weight: 700; }
.admin-who { font-size: 0.85rem; color: var(--ink-soft); }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.admin-stat {
  border: 1px solid var(--line);
  padding: 18px 14px;
  text-align: center;
}
.admin-stat b { display: block; font-size: 1.5rem; font-weight: 800; }
.admin-stat span { font-size: 0.82rem; color: var(--ink-soft); }
.admin-back {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
@media (hover: hover) {
  .admin-back:hover { color: var(--ink); }
}

.admin-menu { display: grid; gap: 10px; margin-bottom: 18px; }
.admin-menu-item {
  display: block;
  border: 1px solid var(--line);
  padding: 16px 18px;
  transition: border-color 0.15s;
}
@media (hover: hover) {
  .admin-menu-item:hover { border-color: var(--ink); }
}
.admin-menu-item b { display: block; font-size: 1rem; }
.admin-menu-item span { font-size: 0.85rem; color: var(--ink-soft); }

.admin-alert {
  border: 1px solid var(--sale);
  color: var(--sale);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.admin-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.admin-search {
  flex: 1;
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: var(--radius);
}
.admin-search:focus { border-color: var(--ink); }
.admin-count { margin-bottom: 12px; }
.admin-empty { padding: 20px 0; }

.admin-list { border-top: 1px solid var(--line); }
.admin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
}
.admin-row.off { opacity: 0.55; }
.admin-row-main { flex: 1; min-width: 0; }
.admin-row-title { font-size: 0.95rem; }
.admin-row-title b { font-weight: 700; letter-spacing: 0.04em; }
.admin-row-meta { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }
.admin-tag {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 0 5px;
  font-size: 0.72rem;
  border-radius: var(--radius);
}
.admin-tag.sale { color: var(--sale); border-color: var(--sale); }
.admin-tag.muted { color: var(--ink-soft); }

/* עורך מוצר */
.pf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 4px; display: block; }
.admin-card textarea,
.admin-card select {
  width: 100%;
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  color: inherit;
  background: #fff;
}
.admin-card textarea:focus,
.admin-card select:focus { border-color: var(--ink); }

.pf-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.92rem; }
.pf-check input { width: 17px; height: 17px; accent-color: var(--btn); }

.pf-rows { margin-bottom: 12px; }
.pf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.pf-row input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.pf-row input[type="text"]:focus { border-color: var(--ink); }
.pf-row input[type="color"] {
  width: 38px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  flex: none;
}
.pf-thumb { width: 54px; height: 42px; object-fit: cover; background: var(--bg-soft); flex: none; }
.pf-del-row {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  border-radius: var(--radius);
}
@media (hover: hover) {
  .pf-del-row:hover { color: var(--sale); background: var(--bg-soft); }
}
.pf-none { padding: 6px 0 10px; }
.pf-image-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* מבצעים וחדשים: שורה עם שני פקדים שנשמרים מיד */
.lst-row { flex-wrap: wrap; gap: 12px; }
.lst-main { flex: 1 1 220px; min-width: 0; }
.lst-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lst-controls .btn.on { background: var(--ink); color: #fff; }
.lst-sale { display: flex; align-items: center; gap: 8px; }
.lst-old { display: flex; flex-direction: column; gap: 2px; }
.lst-old span { font-size: 0.72rem; color: var(--ink-soft); }
.lst-old input { width: 130px; }

/* שדה תמונה בהגדרות: מידות רצויות, תצוגה מקדימה, והעלאה */
.set-size {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
  direction: rtl;
}
.set-preview {
  display: block;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  margin-bottom: 10px;
}
.set-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
/* הקלט האמיתי מוסתר אבל נשאר במסמך, כדי שה־label יפעיל
   אותו וכדי שניווט במקלדת עדיין יגיע אליו */
.set-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.set-upload label.btn { cursor: pointer; }
.set-upload-msg { font-size: 0.82rem; color: var(--ink-soft); }
.set-image .set-value { font-size: 0.8rem; }

.pf-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pf-upload { position: relative; display: inline-block; }
.pf-upload span.btn { display: inline-flex; cursor: pointer; }
#pf-upload-status:empty { display: none; }
#pf-upload-status { margin-top: 8px; }

.co-captcha { display: flex; flex-direction: column; gap: 6px; }
.co-captcha #co-turnstile { min-height: 65px; }

/* הזמנות */
.admin-stat.hot { border-color: var(--ink); }
.admin-stat.hot b { color: var(--sale); }

.ord-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ord-tab {
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.ord-tab span { color: var(--ink-soft); font-size: 0.8rem; }
.ord-tab.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.ord-tab.on span { color: #fff; opacity: 0.7; }

.ord-row { text-decoration: none; }
.ord-chip {
  flex: none;
  font-size: 0.76rem;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}
.ord-chip.st-new { border-color: var(--sale); color: var(--sale); }
.ord-chip.st-delivered { border-color: #2f7a44; color: #2f7a44; }
.ord-chip.st-cancelled { text-decoration: line-through; }

.ord-set-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ord-set {
  border: 1px solid var(--line);
  padding: 8px 13px;
  border-radius: var(--radius);
  font-size: 0.87rem;
}
@media (hover: hover) {
  .ord-set:hover { border-color: var(--ink); }
}
.ord-set.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ord-set:disabled { opacity: 0.45; cursor: not-allowed; }

.ord-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ord-table td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ord-table td:first-child { width: 120px; color: var(--ink-soft); }
.ord-table a { text-decoration: underline; text-underline-offset: 3px; }

.ord-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.ord-sums { margin-top: 12px; font-size: 0.92rem; }
.ord-sums div { display: flex; justify-content: space-between; padding: 4px 0; }
.ord-sums .save { color: var(--sale); }
.ord-sums .total { font-weight: 800; font-size: 1.05rem; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }

/* טקסטים */
.set-field { padding: 14px 0; border-bottom: 1px solid var(--line); }
.set-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.set-head .co-label { margin: 0; }
.set-reset {
  margin-inline-start: auto;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .set-reset:hover { color: var(--ink); }
}
.set-head .admin-tag { margin-inline-start: auto; }
.set-value {
  width: 100%;
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.92rem;
  color: inherit;
  resize: vertical;
}
.set-value:focus { border-color: var(--ink); }

/* קטגוריות */
.cat-list { margin-bottom: 16px; }
.cat-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cat-line { display: flex; gap: 8px; align-items: center; }
.cat-line.sub { margin-top: 6px; flex-wrap: wrap; }
.cat-line.sub .pf-check { margin-top: 0; }
.cat-name {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.cat-sort {
  width: 70px;
  flex: none;
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.cat-name:focus, .cat-sort:focus { border-color: var(--ink); }
.cat-id { margin-inline-start: auto; }
.cat-del {
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .cat-del:hover { color: var(--sale); }
}

.admin-actions { display: flex; gap: 10px; margin-top: 4px; }
.admin-actions .btn { flex: 1; }
.btn.danger { color: var(--sale); border-color: var(--sale); flex: none; }

@media (max-width: 640px) {
  .admin-wrap { margin: 20px auto 50px; }
  .admin-stats { grid-template-columns: 1fr; }
  .pf-two { grid-template-columns: 1fr; gap: 0; }
  .admin-row { flex-wrap: wrap; }

  /* אזורי מגע. במסך מגע כל מה שנמוך מ־44 פיקסלים דורש
     כיוון, ובממשק ניהול שמופעל מהטלפון זה מה שגורם
     ללחוץ על הדבר הלא נכון. הגדלים כאן משנים רק את
     השטח הלחיץ, לא את הפריסה. */
  .admin-back {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-inline-end: 12px;
  }
  .pf-check { min-height: 44px; gap: 12px; }
  .pf-check input { width: 20px; height: 20px; }
  .pf-del-row { width: 40px; height: 40px; }
  .cat-del {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-inline: 10px;
  }
  /* שלושה פריטים בשורה אחת צפופים מדי כאן. המזהה
     והספירה יורדים לשורה משלהם. */
  .cat-line.sub { gap: 4px 14px; }
  .cat-id { margin-inline-start: 0; flex-basis: 100%; order: 3; }
  .ord-table a { display: inline-flex; align-items: center; min-height: 40px; }
  .ord-set, .ord-tab { min-height: 40px; display: inline-flex; align-items: center; }
  .pf-row input[type="color"] { width: 44px; height: 40px; }
}

/* ---------- טעינת קטלוג ---------- */
.catalog-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 90px 20px;
  color: var(--ink-soft);
}
.catalog-loading .spinner {
  width: 28px; height: 28px;
  border: 2px solid var(--line);
  border-top-color: #111;
  border-radius: 50%;
  animation: miel-spin 0.7s linear infinite;
}
@keyframes miel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .catalog-loading .spinner { animation-duration: 2.4s; }
}

/* ---------- טוסט ---------- */
.toast {
  position: fixed;
  bottom: 26px;
  right: 50%;
  transform: translateX(50%) translateY(20px);
  background: #111;
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 200;
  font-size: 0.92rem;
}
.toast.show { opacity: 1; transform: translateX(50%) translateY(0); }

/* ---------- רספונסיביות ---------- */
@media (max-width: 960px) {
  .catalog-layout { grid-template-columns: 1fr; }

  /* הסינון יוצא מזרימת הדף והופך לחלונית שנשלפת מהצד.
     בלי זה הוא תפס מסך שלם מעל המוצרים, והלקוח היה צריך
     לגלול מעבר לחמש קבוצות ריקות כדי לראות מוצר אחד. */
  .filters {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(420px, 88vw);
    max-height: none;
    background: var(--bg);
    z-index: 300;
    padding: 18px 20px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.16);
  }
  body.filters-open .filters { transform: translateX(0); }

  .f-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 290;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  body.filters-open .f-backdrop { opacity: 1; pointer-events: auto; }
  /* נעילת גלילה של הדף מאחורי החלונית */
  body.filters-open { overflow: hidden; }

  .f-head { position: sticky; top: 0; background: var(--bg); padding-bottom: 8px; z-index: 1; }
  .f-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--ink-soft);
  }

  /* כפתור האישור נשאר מוצמד לתחתית החלונית, כדי שלא צריך
     לגלול חזרה למעלה אחרי שמסמנים משהו */
  .f-apply-bar {
    display: block;
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding: 12px 0 18px;
    margin-top: 14px;
    border-top: 1px solid var(--line);
  }

  .f-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
  }
  .f-badge {
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
  }
  .catalog-toolbar { gap: 10px; }
  .catalog-toolbar .count { margin-inline-start: auto; }
  .product-layout { grid-template-columns: 1fr; gap: 28px; }
  .cart-layout { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .co-summary { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { min-height: 380px; }
}
@media (max-width: 640px) {
  .header-main { flex-wrap: wrap; gap: 10px; }
  .search-wrap { order: 3; max-width: none; flex-basis: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 100px 1fr; }
  .ci-price { grid-column: 1 / -1; text-align: right; }
  /* minmax(0, 1fr) ולא 1fr: ברירת המחדל נותנת לעמודה מינימום
     ברוחב התוכן, ואז כרטיס עם טקסט מוגדל מרחיב את העמודה
     במקום להתכווץ אליה. */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .co-grid { grid-template-columns: 1fr; }
  .co-block { padding: 18px 16px; }
  .co-radio-note { margin-inline-start: 0; flex-basis: 100%; }
  .order-facts { grid-template-columns: 1fr; }
}

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

   השורש היה כאן: פריט ברשת או ב־flex מקבל מינימום אוטומטי
   ברוחב התוכן שלו, ולכן הוא מסרב להתכווץ. בורר המיון, שרוחבו
   נקבע לפי האפשרות הארוכה ביותר, מתח בגללו את כל העמודה
   מעבר לרוחב המסך וגרר איתו את הדף כולו. */
.catalog-layout > * { min-width: 0; }
.catalog-toolbar > * { min-width: 0; max-width: 100%; }
.catalog-toolbar select { max-width: 100%; }
.product-grid, .cat-grid { max-width: 100%; }
.product-grid > *, .cat-grid > * { min-width: 0; }

/* ---------- ניהול: זרימה במסך צר ובטקסט מוגדל ----------
   נמדד ברוחב 320 עם טקסט כפול. אותו שורש כמו בצד הלקוח:
   שורות flex שלא יורדות שורה, ופריטים שמסרבים להתכווץ. */
.admin-head { flex-wrap: wrap; }
.admin-head > div { min-width: 0; flex: 1 1 auto; }
.admin-head h1, .admin-who { overflow-wrap: anywhere; }
.admin-who { display: block; }
.admin-toolbar { flex-wrap: wrap; }
.admin-toolbar > * { min-width: 0; max-width: 100%; }
.admin-card .co-field { min-width: 0; }
.admin-card .co-field input,
.admin-card .co-field textarea { max-width: 100%; }
.pf-two > * { min-width: 0; }
.admin-row-main { min-width: 0; }
.admin-row-title, .admin-row-meta { overflow-wrap: anywhere; }

/* טבלת פרטי ההזמנה: עמודה ראשונה קבועה חנקה את השנייה */
.ord-table { width: 100%; table-layout: fixed; }
.ord-table td { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .ord-table td:first-child { width: 84px; }
  .admin-actions { flex-wrap: wrap; }
  .admin-actions .btn { flex: 1 1 100%; }
  .admin-actions .btn.danger { flex: 1 1 100%; }
}