/* ===========================================================
   HAVA ZINGBOIM — Skin Science Edition
   עיצוב אדיטוריאלי מינימליסטי: בז' חם, שחור רך, טיפוגרפיה קלה
   =========================================================== */

:root {
  --bg: #ffffff;
  --sand: #f6f1ea;        /* רקע סקשנים */
  --sand-deep: #efe7db;   /* רקע כהה יותר */
  --tile: #fbf9f6;        /* רקע תמונות מוצר — לבן-שמנת עדין */
  --ink: #1c1a17;
  --ink-soft: #6f6759;
  --ink-faint: #a29a8c;
  --line: #e6ded1;
  --black: #141210;
  --danger: #a4432e;
  --star: #1c1a17;
  --radius: 3px;
  --shadow-lg: 0 30px 70px rgba(28, 26, 23, .13);
  --font: 'Heebo', 'Segoe UI', Arial, sans-serif;
  /* עקומות: כניסה מאטה (iOS drawer), יציאה מאיצה, לחיצה קצרה וחדה */
  --ease-enter: cubic-bezier(.32, .72, 0, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --ease-press: cubic-bezier(.23, 1, .32, 1);
  --fs-base: 16.5px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: var(--fs-base);
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
  font-weight: 400;
}

img { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; transition: color .2s, opacity .2s; }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--ink-soft); }
}
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; color: inherit; }

/* מרווח אותיות הוא תלוי-גודל: טקסט גדול נקרא מרוח מדי בערך אחיד,
   וטקסט קטן נקרא צפוף מדי. */
h1, h2, h3, h4 { font-weight: 400; }
h1 { line-height: 1.12; letter-spacing: -.02em; }
h2 { line-height: 1.2;  letter-spacing: -.01em; }
h3 { line-height: 1.35; letter-spacing: .01em; }
h4 { line-height: 1.4;  letter-spacing: .015em; }

.container { width: min(1240px, 92%); margin-inline: auto; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -60px;
  right: 16px;
  background: var(--black);
  color: #fff;
  padding: 10px 22px;
  z-index: 4000;
  transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- Promo bar ---------- */
.promo-bar {
  background: var(--black);
  color: #f1ece3;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .08em;
  padding: 8px 14px;
}
.promo-bar a { color: #f1ece3; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* ב-96% אטימות הטשטוש אינו נראה אבל מחייב שכבה מורכבת בכל פריים גלילה */
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 78px;
  gap: 16px;
}
.logo {
  grid-column: 2;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 11px;
  line-height: 1.2;
}
.logo-mark { flex: 0 0 auto; display: flex; }
.logo-mark svg { width: 38px; height: 38px; display: block; }
.logo-text { display: flex; flex-direction: column; min-width: 0; }
.logo .logo-main {
  font-size: 1.3rem;
  letter-spacing: .22em;
  font-weight: 500;
  color: var(--ink);
}
.logo .logo-sub {
  font-size: .6rem;
  letter-spacing: .5em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.main-nav { grid-column: 1; justify-self: start; }
.main-nav > ul { display: flex; align-items: center; gap: 4px; }
.main-nav a, .main-nav .sub-toggle {
  display: block;
  padding: 8px 13px;
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--ink);
  background: none;
  border: none;
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover, .main-nav .sub-toggle:hover { color: var(--ink-soft); }
}
.main-nav a.active::after {
  content: "";
  position: absolute;
  right: 13px;
  left: 13px;
  bottom: 2px;
  height: 1px;
  background: var(--ink);
}
.has-sub { position: relative; }
.sub-toggle::after { content: " ›"; font-size: .8em; display: inline-block; transform: rotate(90deg); margin-right: 3px; }
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  min-width: 190px;
  padding: 8px 0;
  z-index: 1100;
  box-shadow: 0 18px 40px rgba(28, 26, 23, .1);
}
.has-sub:focus-within .sub-menu { display: block; }

@media (hover: hover) and (pointer: fine) {
  .has-sub:hover .sub-menu { display: block; }
}
.sub-menu a { padding: 9px 18px; font-size: .86rem; }
@media (hover: hover) and (pointer: fine) {
  .sub-menu a:hover { background: var(--sand); }
}

.header-icons {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
@media (hover: hover) and (pointer: fine) {
  .header-icons a:hover { background: var(--sand); }
}
.header-icons svg { width: 19px; height: 19px; }

.nav-toggle {
  display: none;
  grid-column: 1;
  justify-self: start;
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav-toggle span { width: 22px; height: 1.5px; background: var(--ink); transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 38px;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .08em;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-dark { background: var(--black); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn-dark:hover { background: #37332c; color: #fff; }
}
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover { background: var(--ink); color: #fff; }
}
.btn-sm { padding: 11px 20px; font-size: .82rem; }

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section-sand { background: var(--sand); }
.section-head { text-align: center; max-width: 44rem; margin: 0 auto 52px; }
.section-head .eyebrow, .eyebrow {
  display: block;
  font-size: .7rem;
  letter-spacing: .38em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 400; }
.section-head p { color: var(--ink-soft); margin-top: 10px; font-size: .95rem; }

/* ---------- Hero ---------- */
.hero { background: var(--sand-deep); overflow: hidden; }
.hero-inner {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  min-height: 560px;
}
.hero-copy { padding: 70px 0 70px 40px; }
.hero-copy h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  font-weight: 300;
  line-height: 1.25;
  margin-bottom: 22px;
}
.hero-copy p {
  color: var(--ink-soft);
  max-width: 30rem;
  margin-bottom: 34px;
  font-size: 1.02rem;
}
.hero-media { position: relative; height: 100%; min-height: 420px; }
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* ---------- USP strip ---------- */
.usp-strip { border-bottom: 1px solid var(--line); background: var(--bg); }
.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 44px 0;
}
.usp { text-align: center; }
.usp svg { width: 30px; height: 30px; margin: 0 auto 12px; display: block; stroke: var(--ink); }
.usp h3 { font-size: .92rem; font-weight: 500; letter-spacing: .03em; }
.usp p { font-size: .8rem; color: var(--ink-soft); margin-top: 2px; }

/* ---------- Category tiles ---------- */
.cats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.cat-tile { text-align: center; }
.cat-tile .ct-media {
  background: var(--tile);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  margin-bottom: 14px;
}
.cat-tile img {
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .cat-tile:hover img { transform: scale(1.06); }
}
.cat-tile span { font-size: .9rem; letter-spacing: .04em; }

/* ---------- Product cards ---------- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 34px 26px;
}
.product-card { position: relative; display: flex; flex-direction: column; }
.card-media {
  position: relative;
  display: block;
  background: var(--tile);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 22px;
  margin-bottom: 14px;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .45s ease;
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .card-media img { transform: scale(1.05); }
}
.badge-sale {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #fff;
  color: var(--ink);
  font-size: .7rem;
  letter-spacing: .06em;
  padding: 4px 12px;
  z-index: 2;
  border: 1px solid var(--line);
}
.wish-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
@media (hover: hover) and (pointer: fine) {
  .wish-btn:hover { background: #fff; }
}
.wish-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.6; transition: fill .2s; }
.wish-btn[aria-pressed="true"] svg { fill: var(--ink); }

.card-name {
  font-size: .93rem;
  font-weight: 500;
  line-height: 1.5;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
@media (hover: hover) and (pointer: fine) {
  .card-name a:hover { color: var(--ink-soft); }
}
.rating-row { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ink-soft); margin-bottom: 6px; }
.stars { color: var(--star); letter-spacing: .1em; font-size: .8rem; }
.card-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.price-now { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* --ink-faint נותן ניגודיות 2.8:1 בלבד — מתחת לדרישת WCAG AA (4.5:1).
   מחיר המחירון והכיתוב המשפטי הקטן הם בדיוק הטקסטים שחייבים להיות קריאים,
   ולכן הם עברו ל--ink-soft. */
.price-old { font-size: .85rem; color: var(--ink-soft); text-decoration: line-through; }
/* inline-block, אחרת הקו החוצה של ההורה נמתח גם על המילים "מחיר מחירון"
   (קו חוצה מתפשט ליורשים ואי אפשר לבטל אותו מהילד). */
.po-label { display: inline-block; font-size: .72rem; text-decoration: none; letter-spacing: .02em; }
.card-btn { margin-top: auto; width: 100%; }

/* ---------- Horizontal scroller (favorites / related) ---------- */
.scroller-wrap { position: relative; }
.scroller {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  touch-action: pan-y;   /* הקרוסלה מטפלת באופקי, הדפדפן באנכי */
  scrollbar-width: none;
  padding-bottom: 6px;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller .product-card { flex: 0 0 258px; scroll-snap-align: start; }
.scroll-btn {
  position: absolute;
  top: 118px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
@media (hover: hover) and (pointer: fine) {
  .scroll-btn:hover { background: var(--sand); }
}
.scroll-btn.prev { right: -18px; }
.scroll-btn.next { left: -18px; }

/* ---------- Why band ---------- */
.why-band { background: var(--sand); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-item { text-align: center; padding: 10px; }
.why-item svg { width: 28px; height: 28px; margin: 0 auto 12px; display: block; stroke: var(--ink); }
.why-item h3 { font-size: .95rem; font-weight: 500; margin-bottom: 4px; }
.why-item p { font-size: .8rem; color: var(--ink-soft); }

/* ---------- About split band ---------- */
.about-band { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; }
.about-band .ab-media { background: var(--tile); position: relative; overflow: hidden; }
.about-band .ab-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.about-band .ab-text {
  background: var(--sand-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 70px 9%;
}
.about-band .ab-text .eyebrow { margin-bottom: 10px; }
.about-band .ab-text h2 { font-size: 1.7rem; letter-spacing: .14em; font-weight: 400; margin-bottom: 20px; }
.about-band .ab-text p { color: #55503f; max-width: 30rem; margin-bottom: 30px; font-size: .96rem; }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testi-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 30px 26px;
  text-align: center;
}
.testi-card .stars { font-size: .9rem; margin-bottom: 14px; display: block; }
.testi-card blockquote { font-size: .93rem; color: #44403a; margin-bottom: 14px; }
.testi-card cite { font-style: normal; font-size: .8rem; color: var(--ink-soft); letter-spacing: .05em; }
.testi-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.testi-side .ts-img { background: var(--tile); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 12px; }
.testi-side img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.testi-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 26px; align-items: start; }

/* ---------- Articles ---------- */
.articles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.article-card {
  display: grid;
  grid-template-columns: 210px 1fr;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  color: var(--ink);
  /* drop-shadow במקום box-shadow: צל מונפש מצייר מחדש בכל פריים.
     הערך האפסי קיים גם במנוחה, כדי שהקשר הערימה לא ייווצר רק בריחוף
     (ה-mix-blend-mode של התמונה היה קופץ). */
  filter: drop-shadow(0 0 0 rgba(28, 26, 23, 0));
  transition: filter .25s;
}
@media (hover: hover) and (pointer: fine) {
  .article-card:hover { filter: drop-shadow(0 16px 26px rgba(28, 26, 23, .14)); color: var(--ink); }
}
.article-card .ac-media { background: var(--tile); display: flex; align-items: center; justify-content: center; padding: 18px; }
.article-card .ac-media img { max-height: 180px; object-fit: contain; mix-blend-mode: multiply; }
.article-card .ac-body { padding: 28px 26px; display: flex; flex-direction: column; gap: 8px; }
.article-card .ac-tag { font-size: .68rem; letter-spacing: .3em; color: var(--ink-soft); text-transform: uppercase; }
.article-card h3 { font-size: 1.1rem; font-weight: 500; }
.article-card p { font-size: .88rem; color: var(--ink-soft); flex: 1; }
.article-card .ac-more { font-size: .82rem; letter-spacing: .06em; border-bottom: 1px solid var(--ink); align-self: flex-start; padding-bottom: 2px; }

/* ---------- Catalog page ---------- */
.catalog-hero {
  background: var(--sand);
  padding: 58px 0 46px;
  text-align: center;
}
.catalog-hero h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 300; margin-bottom: 10px; }
.catalog-hero p { color: var(--ink-soft); max-width: 40rem; margin-inline: auto; font-size: .95rem; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin: 38px 0 18px;
}
.search-wrap { position: relative; flex: 1 1 280px; max-width: 400px; }
.search-wrap input {
  width: 100%;
  padding: 12px 42px 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 16px;   /* מתחת ל-16px אייפון מזים את הדף בפוקוס */
  background: #fff;
  color: var(--ink);
}
.search-wrap input:focus { outline: 1.5px solid var(--ink); }
.search-wrap .search-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  width: 16px;
  height: 16px;
  stroke: var(--ink-soft);
}
.sort-wrap { display: flex; align-items: center; gap: 10px; }
.sort-wrap label { font-size: .85rem; color: var(--ink-soft); }
.sort-wrap select {
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-family: inherit;
  font-size: .88rem;
  color: var(--ink);
}
.sort-wrap select:focus { outline: 1.5px solid var(--ink); }

.cat-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.cat-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 8px 18px;
  border-radius: var(--radius);
  font-size: .84rem;
  letter-spacing: .03em;
  transition: background .2s, color .2s, border-color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .cat-chip:hover { border-color: var(--ink); }
}
.cat-chip[aria-pressed="true"] { background: var(--black); color: #fff; border-color: var(--black); }
.results-count { color: var(--ink-soft); font-size: .85rem; margin-bottom: 22px; }
.no-results { text-align: center; padding: 70px 20px; color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- Product page ---------- */
.breadcrumb {
  font-size: .8rem;
  color: var(--ink-soft);
  padding: 20px 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.breadcrumb a { color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .breadcrumb a:hover { color: var(--ink); }
}
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--ink); }

.product-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  padding: 26px 0 70px;
  align-items: start;
}
.gallery { display: grid; grid-template-columns: 76px 1fr; gap: 14px; position: sticky; top: 120px; }
.gallery .thumbs { display: flex; flex-direction: column; gap: 12px; }
.gallery .thumb {
  background: var(--tile);
  border: 1px solid transparent;
  aspect-ratio: 1/1;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery .thumb img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery .thumb[aria-current="true"] { border-color: var(--ink); }
.gallery .main-img {
  background: var(--tile);
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
}
.gallery .main-img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery .main-img .badge-sale { top: 16px; right: 16px; }

.pinfo .p-cat { font-size: .7rem; letter-spacing: .34em; color: var(--ink-soft); text-transform: uppercase; }
.pinfo h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; margin: 8px 0 4px; }
.pinfo .p-sub { color: var(--ink-soft); font-size: .95rem; margin-bottom: 12px; }
.pinfo .rating-row { font-size: .85rem; margin-bottom: 18px; }
.pinfo .p-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.pinfo .p-price .price-now { font-size: 1.6rem; font-weight: 500; }
.pinfo .p-price .price-old { font-size: 1.05rem; }
.pinfo .p-desc { color: #46423a; font-size: .95rem; margin-bottom: 24px; border-top: 1px solid var(--line); padding-top: 20px; }

.mini-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 26px; }
.mini-icons .mi { text-align: center; font-size: .72rem; color: var(--ink-soft); }
.mini-icons svg { width: 22px; height: 22px; margin: 0 auto 6px; display: block; stroke: var(--ink); }

.buy-row { display: flex; gap: 12px; margin-bottom: 12px; }
.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 0 0 auto;
}
.qty button {
  width: 42px;
  height: 50px;
  background: #fff;
  border: none;
  font-size: 1.05rem;
}
@media (hover: hover) and (pointer: fine) {
  .qty button:hover { background: var(--sand); }
}
.qty output { width: 40px; text-align: center; font-size: .95rem; }
.buy-row .btn { flex: 1; }
.buy-alt { width: 100%; margin-bottom: 20px; }
.ship-notes { font-size: .82rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 4px; border-top: 1px dashed var(--line); padding-top: 16px; }

/* Tabs */
.tabs { border-top: 1px solid var(--line); padding: 50px 0 60px; }
.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: 38px;
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 22px;
  font-size: .92rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.tab-btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab-panel { display: none; max-width: 820px; margin-inline: auto; }
.tab-panel.active { display: block; }
.tab-panel h3 { font-size: 1.1rem; font-weight: 500; margin-bottom: 12px; }
.tab-panel p, .tab-panel li { color: #46423a; font-size: .95rem; }
.tab-panel ul { margin: 14px 0; }
.tab-panel ul li {
  padding-right: 26px;
  position: relative;
  margin-bottom: 8px;
}
.tab-panel ul li::before { content: "✓"; position: absolute; right: 0; color: var(--ink); }
.tab-panel ol { margin: 14px 22px 14px 0; list-style: decimal; }
.tab-panel ol li { margin-bottom: 8px; }
.faq-item { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq-item summary { cursor: pointer; font-weight: 500; font-size: .95rem; list-style: none; position: relative; padding-left: 26px; }
.faq-item summary::after { content: "+"; position: absolute; left: 0; top: 0; font-size: 1.1rem; color: var(--ink-soft); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin-top: 8px; }

/* ---------- Article pages ---------- */
.article-hero { background: var(--sand); padding: 62px 0 48px; }
.article-hero .eyebrow { margin-bottom: 12px; }
.article-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 300; max-width: 48rem; margin-bottom: 14px; }
.article-hero .article-meta { color: var(--ink-soft); font-size: .88rem; }

.article-body { max-width: 740px; margin-inline: auto; padding: 56px 0 30px; }
.article-body h2 { font-size: 1.45rem; font-weight: 500; margin: 44px 0 14px; }
.article-body h3 { font-size: 1.08rem; font-weight: 500; margin: 28px 0 8px; }
.article-body p { margin-bottom: 18px; color: #3c3830; }
.article-body ul, .article-body ol { margin: 0 22px 20px 0; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 8px; color: #3c3830; }
.article-body strong { color: var(--ink); font-weight: 600; }
.pull-quote {
  border-right: 2px solid var(--ink);
  background: var(--sand);
  padding: 24px 28px;
  margin: 30px 0;
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.7;
}
.info-box {
  background: var(--sand);
  padding: 28px 30px;
  margin: 30px 0;
}
.info-box h3 { margin-top: 0 !important; }
.info-box ul { list-style: none !important; margin-right: 0 !important; }
.info-box ul li { padding-right: 24px; position: relative; }
.info-box ul li::before { content: "—"; position: absolute; right: 0; color: var(--ink-soft); }
.disclaimer { font-size: .8rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 40px; }
.article-cta {
  background: var(--sand-deep);
  padding: 46px 38px;
  text-align: center;
  margin: 48px 0 20px;
}
.article-cta h3 { font-size: 1.3rem; font-weight: 400; margin-bottom: 8px; }
.article-cta p { color: var(--ink-soft); margin-bottom: 24px; font-size: .92rem; }

/* ---------- About page ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
}
.about-grid .about-media { background: var(--tile); padding: 40px; }
.about-grid .about-media img { mix-blend-mode: multiply; }
.about-text h2 { font-size: 1.7rem; font-weight: 400; margin-bottom: 16px; }
.about-text p { color: #3c3830; margin-bottom: 16px; font-size: .97rem; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.stat { border: 1px solid var(--line); text-align: center; padding: 20px 10px; }
.stat .stat-num { font-size: 1.8rem; font-weight: 300; }
.stat .stat-label { font-size: .78rem; color: var(--ink-soft); }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value-card { background: #fff; border: 1px solid var(--line); padding: 32px 28px; }
.value-card .v-icon svg { width: 26px; height: 26px; stroke: var(--ink); margin-bottom: 14px; }
.value-card h3 { font-size: 1rem; font-weight: 500; margin-bottom: 8px; }
.value-card p { font-size: .88rem; color: var(--ink-soft); }

.lines-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.line-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  filter: drop-shadow(0 0 0 rgba(28, 26, 23, 0));
  transition: filter .25s;
}
@media (hover: hover) and (pointer: fine) {
  .line-card:hover { filter: drop-shadow(0 16px 26px rgba(28, 26, 23, .14)); }
}
.line-card .line-tag { font-size: .65rem; letter-spacing: .3em; color: var(--ink-soft); text-transform: uppercase; }
.line-card h3 { font-size: 1.08rem; font-weight: 500; }
.line-card p { font-size: .87rem; color: var(--ink-soft); flex: 1; }
.line-card a { font-size: .82rem; letter-spacing: .05em; border-bottom: 1px solid var(--ink); align-self: flex-start; padding-bottom: 2px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--sand); border-top: 1px solid var(--line); margin-top: 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 64px 0 46px;
}
.f-col h3 { font-size: .92rem; font-weight: 600; letter-spacing: .05em; margin-bottom: 16px; }
.f-col ul li { margin-bottom: 9px; }
.f-col ul a { font-size: .88rem; color: #55503f; }
@media (hover: hover) and (pointer: fine) {
  .f-col ul a:hover { color: var(--ink); }
}
.f-news p { font-size: .88rem; color: var(--ink-soft); margin-bottom: 16px; }
.news-form { display: flex; max-width: 330px; }
.news-form input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: none;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.news-form input:focus { outline: 1.5px solid var(--ink); }
.news-form button {
  padding: 12px 20px;
  background: var(--black);
  color: #fff;
  border: none;
  font-size: .85rem;
  letter-spacing: .05em;
  border-radius: var(--radius) 0 0 var(--radius);
}
@media (hover: hover) and (pointer: fine) {
  .news-form button:hover { background: #37332c; }
}
.f-brand { text-align: left; }
.f-brand .logo-main { font-size: 1.15rem; letter-spacing: .22em; font-weight: 500; display: block; }
.f-brand .logo-sub { font-size: .58rem; letter-spacing: .45em; color: var(--ink-soft); display: block; margin-bottom: 18px; }
.social-row { display: flex; gap: 10px; justify-content: flex-start; }
.social-row a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .social-row a:hover { background: var(--ink); }
}
@media (hover: hover) and (pointer: fine) {
  .social-row a:hover svg { stroke: #fff; }
}
.social-row svg { width: 16px; height: 16px; stroke: var(--ink); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 18px 0;
  font-size: .78rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Floating buttons ---------- */
.float-wa {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1500;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
  transition: transform .2s, background .2s;
}
@media (hover: hover) and (pointer: fine) {
  .float-wa:hover { transform: scale(1.07); background: #25d366; color: #fff; }
}
.float-wa svg { width: 26px; height: 26px; }

/* ---------- Accessibility widget ---------- */
.a11y-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2500;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: #1a5dab;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
  transition: transform .2s;
}
.a11y-btn:focus-visible { transform: scale(1.07); }

@media (hover: hover) and (pointer: fine) {
  .a11y-btn:hover { transform: scale(1.07); }
}
.a11y-btn svg { width: 30px; height: 30px; }

.a11y-panel {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 2500;
  width: 300px;
  max-height: min(72vh, 560px);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  display: none;
}
.a11y-panel.open { display: block; }
.a11y-panel h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.a11y-panel .a11y-close { background: none; border: none; font-size: 1.15rem; line-height: 1; color: var(--ink-soft); }
.a11y-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-action {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 12px 8px;
  font-size: .8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color .15s, background .15s;
}
.a11y-action .ic { font-size: 1.15rem; }
@media (hover: hover) and (pointer: fine) {
  .a11y-action:hover { border-color: var(--ink); }
}
.a11y-action[aria-pressed="true"] { background: #1a5dab; border-color: #1a5dab; color: #fff; }
.a11y-reset {
  margin-top: 10px;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--sand);
  padding: 11px;
  font-size: .85rem;
}
@media (hover: hover) and (pointer: fine) {
  .a11y-reset:hover { background: var(--sand-deep); }
}
.a11y-statement { font-size: .74rem; color: var(--ink-soft); margin-top: 12px; line-height: 1.5; }

/* ---------- Accessibility modes ---------- */
html.a11y-fs-1 { font-size: calc(var(--fs-base) * 1.12); }
html.a11y-fs-2 { font-size: calc(var(--fs-base) * 1.25); }
html.a11y-fs-3 { font-size: calc(var(--fs-base) * 1.4); }

html.a11y-grayscale { filter: grayscale(1); }

html.a11y-contrast body,
html.a11y-contrast .site-header,
html.a11y-contrast .hero,
html.a11y-contrast .section-sand,
html.a11y-contrast .why-band,
html.a11y-contrast .catalog-hero,
html.a11y-contrast .article-hero,
html.a11y-contrast .site-footer,
html.a11y-contrast .about-band .ab-text,
html.a11y-contrast .article-cta,
html.a11y-contrast .info-box,
html.a11y-contrast .pull-quote {
  background: #000 !important;
  color: #fff !important;
}
html.a11y-contrast .product-card, html.a11y-contrast .testi-card,
html.a11y-contrast .line-card, html.a11y-contrast .value-card,
html.a11y-contrast .article-card, html.a11y-contrast .stat,
html.a11y-contrast .a11y-panel, html.a11y-contrast .a11y-action,
html.a11y-contrast .cat-chip, html.a11y-contrast .search-wrap input,
html.a11y-contrast .sort-wrap select, html.a11y-contrast .news-form input,
html.a11y-contrast .qty, html.a11y-contrast .qty button, html.a11y-contrast .sub-menu {
  background: #000 !important;
  color: #fff !important;
  border-color: #ffe45c !important;
}
html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4,
html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast label,
html.a11y-contrast .card-name, html.a11y-contrast .price-now,
html.a11y-contrast .logo .logo-main, html.a11y-contrast blockquote,
html.a11y-contrast .results-count, html.a11y-contrast cite, html.a11y-contrast output {
  color: #fff !important;
}
html.a11y-contrast a, html.a11y-contrast .eyebrow, html.a11y-contrast .p-cat,
html.a11y-contrast .logo .logo-sub, html.a11y-contrast .ac-tag,
html.a11y-contrast .line-tag, html.a11y-contrast .stars,
html.a11y-contrast .breadcrumb a, html.a11y-contrast .tab-btn {
  color: #ffe45c !important;
}
html.a11y-contrast .btn-dark, html.a11y-contrast .news-form button,
html.a11y-contrast .float-wa, html.a11y-contrast .promo-bar {
  background: #ffe45c !important;
  color: #000 !important;
}
html.a11y-contrast .card-media, html.a11y-contrast .gallery .main-img,
html.a11y-contrast .gallery .thumb, html.a11y-contrast .cat-tile .ct-media,
html.a11y-contrast .about-grid .about-media, html.a11y-contrast .ts-img,
html.a11y-contrast .ac-media {
  background: #fff !important;
}
html.a11y-contrast .card-media img, html.a11y-contrast .gallery img,
html.a11y-contrast .cat-tile img, html.a11y-contrast .ts-img img,
html.a11y-contrast .ac-media img, html.a11y-contrast .about-media img {
  mix-blend-mode: normal !important;
}

html.a11y-links a, html.a11y-links .btn, html.a11y-links .cat-chip, html.a11y-links .tab-btn {
  text-decoration: underline !important;
  background: #ffe45c !important;
  color: #000 !important;
  border-color: #000 !important;
}

html.a11y-font body, html.a11y-font h1, html.a11y-font h2, html.a11y-font h3,
html.a11y-font h4, html.a11y-font button, html.a11y-font input, html.a11y-font select,
html.a11y-font .logo .logo-main {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
}

html.a11y-noanim *, html.a11y-noanim *::before, html.a11y-noanim *::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path fill='black' stroke='white' stroke-width='1' d='M4 2l16 11h-8l4 8-3 1.5L9 14l-5 5z'/></svg>") 4 2, auto !important;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2.5px solid #1a5dab;
  outline-offset: 2px;
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.value-card .v-icon { font-size: 1.5rem; margin-bottom: 10px; }
.f-brand .social-row { justify-content: flex-end; }
.center-cta { text-align: center; margin-top: 46px; }

/* ---------- Cart ---------- */
.buy-cart { display: none; }
html.shop-active .buy-cart { display: inline-flex; }
/* כשהעגלה פעילה — כפתור הוואטסאפ בדף מוצר הופך למשני */
html.shop-active #order-btn { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  html.shop-active #order-btn:hover { background: var(--ink); color: #fff; }
}

.cart-icon {
  position: relative;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) and (pointer: fine) {
  .cart-icon:hover { background: var(--sand); }
}
.cart-icon svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute;
  top: 2px;
  left: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--black);
  color: #fff;
  font-size: .62rem;
  line-height: 17px;
  text-align: center;
  font-weight: 600;
}

.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 16, .62);
  z-index: 2600;
  opacity: 0;
  /* visibility נכנס לתוקף רק בתום הדהייה, כך שאין צורך בטיימר ב-JS
     — טיימר כזה יורה גם כשהמגירה כבר נפתחה מחדש. */
  visibility: hidden;
  transition: opacity .3s var(--ease-exit), visibility 0s .3s;
}
.cart-backdrop.open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease-enter), visibility 0s; }

/* מגירה נשלפת מצד ימין של המסך, בגודל נורמלי */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  height: 100%;
  width: min(410px, 92vw);
  background: #fff;
  z-index: 2700;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s var(--ease-exit), visibility 0s .3s;
  display: flex;
  flex-direction: column;
  box-shadow: -18px 0 50px rgba(20, 18, 16, .22);
}
.cart-drawer.open { transform: translateX(0); visibility: visible; transition: transform .35s var(--ease-enter), visibility 0s; }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.cart-head h2 { font-size: 1.1rem; font-weight: 500; letter-spacing: .02em; }
.cart-close {
  background: none;
  border: none;
  font-size: 1.05rem;
  color: var(--ink-soft);
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
@media (hover: hover) and (pointer: fine) {
  .cart-close:hover { background: var(--sand); color: var(--ink); }
}

/* contain עוצר את שרשור הגלילה לדף שמאחור כשמגיעים לסוף הרשימה */
.cart-items { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px; }
.cart-empty { text-align: center; color: var(--ink-soft); padding: 60px 10px; line-height: 1.9; }
.cart-line {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.cl-img { background: var(--tile); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 6px; }
.cl-img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cl-info { display: flex; flex-direction: column; gap: 4px; }
.cl-name { font-size: .88rem; font-weight: 500; line-height: 1.45; }
.cl-price { font-size: .82rem; color: var(--ink-soft); margin-bottom: 6px; }
.cl-was { opacity: .55; margin-inline-start: 5px; font-size: .78rem; }
.cl-qty { display: flex; align-items: center; gap: 6px; }
.cl-qty button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .cl-qty button:hover { background: var(--sand); }
}
.cl-qty span { min-width: 24px; text-align: center; font-size: .9rem; }
.cl-remove {
  width: auto !important;
  padding: 0 8px !important;
  font-size: .76rem !important;
  color: var(--ink-soft);
  border-color: transparent !important;
  margin-right: auto;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .cl-remove:hover { color: var(--danger); background: none !important; }
}

.cart-foot { border-top: 1px solid var(--line); padding: 20px 24px; flex: 0 0 auto; }
/* שורת החיסכון — מראה ללקוחה כמה ההנחה שווה לה בפועל, בלי קוד קופון */
.cart-saved { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: .85rem; color: var(--ink-soft); }
.cart-saved strong { font-weight: 600; color: #1b7a4b; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; font-size: 1rem; }
.cart-total strong { font-size: 1.3rem; font-weight: 600; }
.cart-checkout { width: 100%; }
.cart-note { font-size: .74rem; color: var(--ink-soft); text-align: center; margin-top: 12px; line-height: 1.5; }

/* ---------- Reveal ---------- */
/* 400ms במקום 700ms, וה-JS מוסיף השהיה מדורגת לכל אלמנט בקבוצה */
/* filter נכלל כאן כי כרטיסים שהם גם .reveal וגם בעלי צל בריחוף יורשים
   את ה-transition הזה, והוא היה מבטל להם את הנפשת הצל. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .4s var(--ease-enter), transform .4s var(--ease-enter), filter .25s var(--ease-enter); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Mobile foundations ---------- */
html { -webkit-text-size-adjust: 100%; }
/* clip, not hidden: `hidden` would make overflow-y compute to auto and turn
   <body> into its own scroll container, which breaks page scrolling. */
body { overflow-x: clip; }
img, video { max-width: 100%; }
a, button { -webkit-tap-highlight-color: rgba(20, 18, 16, .08); }
/* iOS zooms the page when a focused field is under 16px */
input, select, textarea { font-size: 16px; }

/* ---------- Mobile sticky buy bar (product pages) ---------- */
.mobile-buy-bar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cats-row { grid-template-columns: repeat(3, 1fr); }
  .usp-grid, .why-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .testi-layout { grid-template-columns: 1fr; }
  .testi-side { grid-template-columns: repeat(4, 1fr); }
  .product-layout { grid-template-columns: 1fr; gap: 40px; }
  .gallery { position: static; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .lines-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 60px 0 30px; text-align: center; }
  .hero-copy p { margin-inline: auto; }
  .hero-media { min-height: 380px; }
  .hero-media img { position: static; height: 380px; }
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: none;
    box-shadow: var(--shadow-lg);
  }
  .main-nav.open { display: block; }
  .main-nav > ul { flex-direction: column; align-items: stretch; padding: 12px; gap: 2px; }
  .main-nav a, .main-nav .sub-toggle { padding: 13px 16px; width: 100%; text-align: right; }
  .sub-menu { display: block; position: static; border: none; box-shadow: none; padding: 0 18px; }
  .sub-toggle { display: none; }
  .header-icons svg { width: 18px; height: 18px; }
  .articles-grid { grid-template-columns: 1fr; }
  .article-card { grid-template-columns: 1fr; }
  .article-card .ac-media img { max-height: 150px; }
  .cats-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .testi-grid { grid-template-columns: 1fr; }
  .testi-side { grid-template-columns: repeat(2, 1fr); }
  .values-grid, .lines-grid, .why-grid, .usp-grid { grid-template-columns: 1fr 1fr; }
  .about-band { grid-template-columns: 1fr; }
  .about-band .ab-media { min-height: 300px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .f-brand { text-align: right; }
  .section { padding: 56px 0; }
  .scroll-btn { display: none; }
  .buy-row { flex-wrap: wrap; }
  .buy-row .btn { flex: 1 1 100%; }
  .gallery { grid-template-columns: 1fr; }
  .gallery .thumbs { flex-direction: row; order: 2; }
  .gallery .thumb { width: 68px; }
  .float-wa { bottom: 18px; left: 18px; width: 50px; height: 50px; }
  .a11y-btn { bottom: 18px; right: 18px; width: 50px; height: 50px; }
  .a11y-panel { right: 12px; left: 12px; width: auto; bottom: 80px; }

  /* --- container & rhythm --- */
  .container { width: min(1240px, 90%); }
  .section-head { margin-bottom: 34px; }
  .section-head h2 { font-size: clamp(1.45rem, 6vw, 1.9rem); }
  .section-head p { font-size: .9rem; }

  /* --- header: comfortable thumb targets ---
     `1fr auto 1fr` makes both side columns as wide as the wider one, which
     pushes a long wordmark past the viewport. Size the sides to content and
     let the logo take (and shrink into) what is left. */
  .header-inner {
    padding: 10px 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 64px;
  }
  /* הסימן מוסיף רוחב, אז מקטינים אותו ואת הטקסט כדי שההדר יישאר בתוך המסך */
  .logo { min-width: 0; gap: 7px; }
  .logo-mark svg { width: 27px; height: 27px; }
  .logo .logo-main {
    font-size: clamp(.62rem, 2.8vw, .85rem);   /* "MORAN COSMETICS" ארוך מהשם הישן ב-15% */
    letter-spacing: .02em;
    white-space: nowrap;
  }
  .logo .logo-sub { font-size: .45rem; letter-spacing: .16em; }
  .header-icons { gap: 2px; }
  .header-icons a, .header-icons button, .nav-toggle {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .main-nav a, .main-nav .sub-toggle { min-height: 48px; display: flex; align-items: center; }
  .sub-menu a { min-height: 44px; font-size: .9rem; }

  /* --- hero --- */
  .hero-copy { padding: 44px 0 26px; }
  .hero-copy h1 { font-size: clamp(1.85rem, 8.2vw, 2.5rem); line-height: 1.18; }
  .hero-copy p { font-size: .95rem; }
  .hero-media { min-height: 0; }
  .hero-media img { height: min(58vh, 400px); width: 100%; object-fit: cover; }
  .hero-copy .btn, .hero-actions .btn { min-height: 50px; }

  /* --- trust / usp strip: 4 icons across, like the reference --- */
  .usp-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .usp-grid .usp, .usp-grid > * { text-align: center; font-size: .72rem; }
  .usp-grid svg { margin-inline: auto; }

  /* --- category tiles --- */
  .cats-row { gap: 12px; }
  .cat-tile, .cats-row > * { min-height: 0; }

  /* --- product cards --- */
  .product-card .wish-btn { width: 44px; height: 44px; }
  .card-name { font-size: .92rem; line-height: 1.45; }
  .card-btn { min-height: 46px; }

  /* --- catalog: bring products above the fold ---
     On a 812px-tall phone the hero + toolbar + five wrapped rows of filter
     chips pushed the first product to 827px, so an arriving visitor saw no
     product at all. Compact the chrome and scroll the filters in one row. */
  .catalog-hero { padding: 20px 0 16px; }
  .catalog-hero h1 { font-size: clamp(1.35rem, 5.5vw, 1.7rem); margin-bottom: 5px; }
  .catalog-hero p { font-size: .85rem; line-height: 1.5; }
  /* search + sort share one row instead of stacking into two */
  .toolbar { gap: 8px; margin-bottom: 12px; flex-wrap: nowrap; align-items: center; }
  .search-wrap { flex: 1 1 auto; min-width: 0; max-width: none; }
  .search-wrap input { padding: 11px 38px 11px 12px; }
  .sort-wrap { flex: 0 0 auto; }
  /* keep the label for screen readers, drop it visually to save the row */
  .sort-wrap label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .sort-wrap select { max-width: 132px; }

  .cat-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 12px;
    padding-bottom: 4px;
  }
  .cat-filters::-webkit-scrollbar { display: none; }
  .cat-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .results-count { font-size: .8rem; margin-bottom: 12px; }

  /* --- product page: shorter gallery so title + price reach the fold --- */
  .product-layout { padding: 14px 0 40px; gap: 26px; }
  .gallery { grid-template-columns: 1fr; gap: 10px; position: static; }
  .gallery .main-img { padding: 16px; height: min(46vh, 78vw); aspect-ratio: auto; }
  .gallery .thumbs {
    flex-direction: row; order: 2; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .gallery .thumbs::-webkit-scrollbar { display: none; }
  .gallery .thumb { width: 60px; flex: 0 0 60px; }
  /* a lone thumbnail adds nothing on a phone */
  .gallery .thumbs:has(.thumb:only-child) { display: none; }

  .pinfo h1 { font-size: clamp(1.35rem, 5.6vw, 1.75rem); }
  .pinfo .p-price { margin-bottom: 16px; }
  .pinfo .p-price .price-now { font-size: 1.45rem; }
  .mini-icons { gap: 6px; margin-bottom: 20px; }
  .mini-icons .mi { font-size: .66rem; line-height: 1.3; }
  .qty button { width: 46px; height: 52px; }
  .qty output { width: 44px; }
  .buy-row .btn, .buy-alt { min-height: 52px; }

  /* --- tabs / accordions --- */
  .tab-list { gap: 6px; margin-bottom: 26px; }
  .tab-btn { min-height: 44px; font-size: .85rem; }
  .tabs { padding: 34px 0 40px; }

  /* --- cart drawer: near full-width, clear of the home indicator --- */
  .cart-drawer { width: min(420px, 100vw); }
  .cart-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .cart-line { gap: 10px; }
  /* thumb-sized controls on the checkout path */
  .cart-close { width: 44px; height: 44px; }
  .cl-qty button { width: 44px; height: 44px; }
  .cl-qty span { min-width: 32px; }
  .cl-remove { min-height: 44px; padding-inline: 10px; }
  .cart-foot .btn { min-height: 52px; }

  /* --- footer --- */
  .footer-grid { gap: 26px; }
  .footer a { min-height: 40px; display: inline-flex; align-items: center; }
}

@media (max-width: 480px) {
  .usp-grid, .why-grid, .values-grid, .lines-grid { grid-template-columns: 1fr; }
  /* the trust strip stays 4-up — it is icon-led, not text-led */
  .usp-grid { grid-template-columns: repeat(4, 1fr); }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .card-btn { padding: 10px 8px; font-size: .78rem; }
  .cats-row { grid-template-columns: repeat(2, 1fr); }
  .stats-row, .about-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mini-icons { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Sticky buy bar ---------- */
@media (max-width: 768px) {
  .mobile-buy-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 2400; /* under the cart overlay (2600) so the drawer covers it */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .99);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(20, 18, 16, .12);
    transform: translateY(115%);
    transition: transform .32s var(--ease-enter);
  }
  .mobile-buy-bar.visible { transform: none; }
  .mbb-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .mbb-name {
    font-size: .78rem; color: var(--ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mbb-price { font-size: 1.05rem; font-weight: 500; }
  .mbb-price:empty { display: none; }
  .mbb-add { flex: 0 0 auto; min-height: 48px; padding-inline: 26px; white-space: nowrap; }

  /* keep the floating buttons and the footer clear of the bar */
  body.has-buy-bar { padding-bottom: 74px; }
  body.has-buy-bar .float-wa,
  body.has-buy-bar .a11y-btn { bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.has-buy-bar .a11y-panel { bottom: calc(142px + env(safe-area-inset-bottom)); }
}

/* ---------- פופאפ מבצעים ---------- */
.promo-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 18, 16, .55);
  opacity: 0;
  transition: opacity .25s var(--ease-enter);
}
.promo-modal.open { display: flex; }
.promo-modal.visible { opacity: 1; }

.promo-card {
  background: #fff;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  max-height: 90dvh;   /* vh הוא הגובה הגדול במובייל ונחתך מתחת לסרגל */
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  padding: 34px 28px 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(20, 18, 16, .3);
  transform: translateY(14px) scale(.98);
  transition: transform .3s var(--ease-enter);
}
.promo-modal.visible .promo-card { transform: none; }

.promo-close {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  font-size: 1.15rem;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .promo-close:hover { color: var(--ink); }
}

.promo-card .promo-eyebrow {
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.promo-card h2 {
  font-size: clamp(1.5rem, 5.5vw, 1.9rem);
  font-weight: 400;
  margin: 10px 0 18px;
  line-height: 1.25;
}
.promo-card h2 strong { font-weight: 600; }

.promo-perks {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  text-align: right;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.promo-perks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 2px;
  font-size: .92rem;
  line-height: 1.5;
}
.promo-perks li + li { border-top: 1px solid var(--line); }
.promo-perks .pp-mark {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  font-size: .72rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-code-row {
  background: var(--sand);
  border: 1px dashed var(--ink-faint);
  padding: 13px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.promo-code-row .pc-label { font-size: .74rem; color: var(--ink-soft); }
.promo-code-row .pc-code {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .14em;
}
.promo-copy {
  background: none;
  border: 1px solid var(--ink);
  padding: 9px 14px;
  font-size: .78rem;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
}
@media (hover: hover) and (pointer: fine) {
  .promo-copy:hover { background: var(--black); color: #fff; border-color: var(--black); }
}
.promo-copy.copied { background: var(--black); color: #fff; border-color: var(--black); }

.promo-card .btn { width: 100%; min-height: 52px; }
.promo-note {
  font-size: .82rem;
  color: var(--ink-soft);
  margin-top: 14px;
  line-height: 1.5;
}
.promo-note a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 768px) {
  .promo-modal { padding: 14px; align-items: flex-end; }
  .promo-card {
    padding: 30px 20px 22px;
    max-height: 88vh;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
  .promo-perks li { font-size: .87rem; padding: 12px 0; }
  .promo-code-row { padding: 12px; }
  .promo-code-row .pc-code { font-size: 1.08rem; }
}

/* ---------- מד התקדמות למשלוח חינם בעגלה ---------- */
.ship-progress {
  background: var(--sand);
  padding: 11px 13px;
  margin-bottom: 12px;
  font-size: .8rem;
  line-height: 1.45;
}
.ship-progress .sp-text { display: block; margin-bottom: 8px; }
.ship-progress .sp-text strong { font-weight: 600; }
.ship-progress .sp-bar {
  height: 5px;
  background: var(--line);
  overflow: hidden;
}
.ship-progress .sp-fill {
  height: 100%;
  width: 0;
  background: var(--black);
  transition: width .4s ease;
}
.ship-progress.done { background: #eef4ec; }
.ship-progress.done .sp-fill { background: #4a7a4a; }

/* ===========================================================
   חובות גילוי צרכניות — פרטי עוסק, הסכמה לדיוור וטופס ביטול
   =========================================================== */
.f-legal, .f-disclaimer {
  display: block;
  margin-top: 8px;
  font-size: .74rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.news-consent {
  max-width: 330px;
  margin-top: 10px;
  font-size: .76rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.news-consent a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }

/* טופס ביטול עסקה */
.cancel-form { margin: 24px 0 8px; }
.cf-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cf-row label { font-size: .9rem; font-weight: 500; }
.cf-row input, .cf-row select, .cf-row textarea {
  width: 100%;
  max-width: 420px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
}
.cf-row input:focus, .cf-row select:focus, .cf-row textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.cf-row textarea { resize: vertical; min-height: 72px; }
.cf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 10px; }
.cf-actions .btn { min-height: 48px; }
.cf-note { min-height: 1.4em; font-size: .9rem; color: var(--ink); }

/* ===========================================================
   משוב לחיצה ותחושת מגע
   -----------------------------------------------------------
   במסך מגע אין ריחוף: כל כללי ה-hover סגורים מאחורי שער יכולת,
   ולכן המשוב היחיד שנשאר הוא :active. בלעדיו כל נגיעה באתר
   מרגישה כאילו הכפתור לא שמע.
   =========================================================== */
button, a, [role="button"], .cat-chip, .cart-icon, summary {
  touch-action: manipulation;   /* בלי המתנה לזיהוי הקשה כפולה */
}
button, [role="button"], .btn, .cat-chip, .nav-toggle, .cart-icon {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;  /* בלי תפריט "העתק" בלחיצה ארוכה על פקד */
}
/* ההדגשה האפורה של המערכת מוחלפת במשוב שעיצבנו בעצמנו */
a, button { -webkit-tap-highlight-color: transparent; }

.btn, .cat-chip, .wish-btn, .cart-icon, .nav-toggle, .cart-close,
.promo-close, .a11y-action, .a11y-reset, .qty button, .cl-qty button,
.scroll-btn, .news-form button, .cf-actions .btn {
  transition: transform 120ms var(--ease-press), background .2s, color .2s, border-color .2s;
}
.btn:active, .cat-chip:active, .wish-btn:active, .cart-icon:active,
.nav-toggle:active, .cart-close:active, .promo-close:active,
.a11y-action:active, .a11y-reset:active, .qty button:active,
.cl-qty button:active, .scroll-btn:active, .news-form button:active,
.cf-actions .btn:active {
  transform: scale(.97);
}
/* הכפתורים הצפים כבר גדלים בריחוף — להם ירידה קצת עמוקה יותר כדי שתיראה */
.float-wa:active, .a11y-btn:active { transform: scale(.94); }

/* כפתור שהגיע לתקרה לא מתחזה לפעיל */
.cl-qty button[disabled], .qty button[disabled] {
  opacity: .35;
  cursor: default;
  transform: none;
}

/* ספרות באותו רוחב — אחרת הסכומים קופצים כששינוי כמות מעדכן אותם */
.cart-total strong, .cart-saved strong, .cl-price, .mbb-price,
.p-price .price-now, .p-price .price-old, .price-old {
  font-variant-numeric: tabular-nums;
}

/* ===========================================================
   העדפות נגישות נוספות של מערכת ההפעלה
   =========================================================== */
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: #fff; }
  .cart-backdrop { background: rgba(20, 18, 16, .9); }
  .promo-modal { background: rgba(20, 18, 16, .9); }
  .mobile-buy-bar { background: #fff; }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: #4a463f; --line: #b9b0a1; }
  .site-header, .mobile-buy-bar { background: #fff; }
  .btn, .cat-chip, .qty button, .cl-qty button, .news-form input,
  .search-wrap input, .cf-row input, .cf-row select, .cf-row textarea {
    border: 1px solid var(--ink);
  }
  .price-old { color: var(--ink); }
}

/* ---------- דף קופה ודף תודה ---------- */
.checkout-wrap { padding-block: 40px 70px; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.co-form h2, .co-summary h2 { font-size: 1.15rem; font-weight: 500; margin-bottom: 18px; }
.co-form label { display: block; font-size: .88rem; margin-bottom: 14px; color: var(--ink); }
.co-form label small { color: var(--ink-soft); font-size: .78rem; }
.co-form input:not([type="checkbox"]), .co-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.co-form input:focus, .co-form textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.co-form input[dir="ltr"] { text-align: right; }
.co-form .co-check { display: flex; gap: 10px; align-items: center; }
.co-form .co-check input { width: 18px; height: 18px; flex: 0 0 auto; }
.co-submit { width: 100%; min-height: 52px; margin-top: 6px; }
.co-submit:disabled { opacity: .7; cursor: wait; }
.co-secure { font-size: .78rem; color: var(--ink-soft); text-align: center; margin-top: 12px; }
.co-error { background: #fbeeea; color: var(--danger); padding: 12px 14px; font-size: .88rem; margin-bottom: 12px; }
.co-alert { background: #fbeeea; color: var(--danger); padding: 14px 16px; margin-bottom: 24px; }
.co-empty { text-align: center; padding: 40px 0; }
.co-empty p { margin-bottom: 18px; color: var(--ink-soft); }
.co-summary { background: var(--sand); padding: 24px; position: sticky; top: 100px; }
.co-line, .co-row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 7px 0; }
.co-line { border-bottom: 1px solid var(--line); }
.co-line small { color: var(--ink-soft); }
.co-row:first-of-type { margin-top: 8px; }
.co-gift { color: #1b7a4b; }
.co-total { border-top: 1px solid var(--ink); margin-top: 8px; padding-top: 12px; font-size: 1rem; }
.co-total strong { font-size: 1.3rem; font-weight: 600; }
.co-wa { font-size: .8rem; color: var(--ink-soft); margin-top: 16px; }
.co-wa a { text-decoration: underline; }
.ty-wrap { max-width: 40rem; }
.ty-wrap p { margin-bottom: 14px; line-height: 1.8; }
.ty-order { font-weight: 600; }
.ty-wrap .btn { margin-top: 14px; }
@media (max-width: 820px) {
  .checkout-grid { grid-template-columns: 1fr; gap: 28px; }
  .co-summary { position: static; order: -1; }
}