/* ==========================================================================
   SafePoint — Components · v2 "Refined"
   קווי שיער במקום צללים · פינות כמעט חדות · צבע במינון
   ========================================================================== */

/* --------------------------------------------------------------------------
   כפתורים — מלבניים, שקטים
   -------------------------------------------------------------------------- */
.sp-btn {
  --_bg: var(--sp-action);
  --_fg: var(--sp-text-inverse);
  --_bd: var(--sp-action);

  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-space-3);
  font-size: var(--sp-text-sm);
  font-weight: var(--sp-weight-medium);
  letter-spacing: var(--sp-tracking-wide);
  line-height: 1;
  padding-block: 1.0625rem;
  padding-inline: var(--sp-space-8);
  border-radius: var(--sp-radius-sm);
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  text-align: center;
  transition: background-color var(--sp-duration-base) var(--sp-ease-out),
              color var(--sp-duration-base) var(--sp-ease-out),
              border-color var(--sp-duration-base) var(--sp-ease-out);
}
.sp-btn:hover { --_bg: var(--sp-action-hover); --_bd: var(--sp-action-hover); color: var(--_fg); }
.sp-btn[disabled], .sp-btn.is-disabled {
  --_bg: var(--sp-neutral-100); --_fg: var(--sp-neutral-400); --_bd: var(--sp-neutral-200);
  pointer-events: none;
}

.sp-btn--outline { --_bg: transparent; --_fg: var(--sp-neutral-800); --_bd: var(--sp-rule-strong); }
.sp-btn--outline:hover { --_bg: transparent; --_fg: var(--sp-purple-800); --_bd: var(--sp-purple-800); }

.sp-btn--inverse { --_bg: transparent; --_fg: #fff; --_bd: rgba(255,255,255,.42); }
.sp-btn--inverse:hover { --_bg: #fff; --_fg: var(--sp-purple-800); --_bd: #fff; }

.sp-btn--solid-light { --_bg: #fff; --_fg: var(--sp-purple-800); --_bd: #fff; }
.sp-btn--solid-light:hover { --_bg: var(--sp-purple-50); --_bd: var(--sp-purple-50); }

.sp-btn--sm { font-size: var(--sp-text-xs); padding-block: 0.75rem; padding-inline: var(--sp-space-5); }
.sp-btn--block { display: flex; inline-size: 100%; }

/* קישור־טקסט עם קו תחתון נמשך — הפעולה השנייה המרכזית באתר */
.sp-link {
  display: inline-flex; align-items: center; gap: var(--sp-space-2);
  font-size: var(--sp-text-sm);
  font-weight: var(--sp-weight-medium);
  letter-spacing: var(--sp-tracking-wide);
  color: var(--sp-neutral-800);
  padding-block-end: 3px;
  border-block-end: 1px solid var(--sp-rule-strong);
  transition: border-color var(--sp-duration-base) var(--sp-ease-out),
              color var(--sp-duration-base) var(--sp-ease-out);
}
.sp-link:hover { color: var(--sp-purple-800); border-color: var(--sp-purple-800); }
.sp-link svg { transition: transform var(--sp-duration-base) var(--sp-ease-out); }
.sp-link:hover svg { transform: translateX(3px); }

.sp-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px;
  color: var(--sp-neutral-600);
  border-radius: var(--sp-radius-sm);
  transition: color var(--sp-duration-fast) var(--sp-ease-out);
}
.sp-icon-btn:hover { color: var(--sp-purple-800); }

/* --------------------------------------------------------------------------
   תוויות — טקסט בלבד, בלי גלולות צבעוניות
   -------------------------------------------------------------------------- */
.sp-tag {
  display: inline-flex; align-items: center; gap: var(--sp-space-2);
  font-size: var(--sp-text-2xs);
  font-weight: var(--sp-weight-semibold);
  letter-spacing: var(--sp-tracking-wider);
  text-transform: uppercase;
  color: var(--sp-text-subtle);
}
/* תווית עם קו לפניה */
.sp-tag--ruled::before {
  content: ""; inline-size: 18px; block-size: 1px;
  background: currentColor; opacity: .5;
}
.sp-tag--cat { color: var(--sp-cat); }
.sp-tag--ink { color: var(--sp-neutral-800); }

/* תווית מסגרת דקה — לשימוש נדיר (״רב מכר״) */
.sp-tag-box {
  display: inline-flex; align-items: center;
  font-size: var(--sp-text-2xs);
  font-weight: var(--sp-weight-medium);
  letter-spacing: var(--sp-tracking-wide);
  padding: 0.3125rem var(--sp-space-3);
  border: 1px solid currentColor;
  border-radius: var(--sp-radius-xs);
  color: var(--sp-cat);
  background: rgba(255,255,255,.8);
}

/* צ׳יפ סינון */
.sp-chip {
  font-size: var(--sp-text-sm);
  color: var(--sp-text-subtle);
  padding-block-end: var(--sp-space-2);
  border-block-end: 1px solid transparent;
  transition: color var(--sp-duration-base) var(--sp-ease-out),
              border-color var(--sp-duration-base) var(--sp-ease-out);
}
.sp-chip:hover { color: var(--sp-neutral-800); }
.sp-chip.is-active { color: var(--sp-neutral-900); border-color: var(--sp-neutral-900); }

/* --------------------------------------------------------------------------
   הדר
   -------------------------------------------------------------------------- */
.sp-header {
  position: sticky; inset-block-start: 0; z-index: var(--sp-z-header);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--sp-rule);
}
.sp-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: var(--sp-space-6);
  min-block-size: 78px;
}
.sp-header__bar > .sp-cluster { flex-wrap: nowrap; gap: var(--sp-space-2); }
.sp-header__logo img { block-size: 40px; inline-size: auto; }

.sp-nav { display: flex; align-items: center; gap: var(--sp-space-8); }
.sp-nav__link {
  position: relative;
  font-size: var(--sp-text-sm);
  color: var(--sp-neutral-600);
  padding-block: var(--sp-space-2);
  transition: color var(--sp-duration-fast) var(--sp-ease-out);
}
.sp-nav__link::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: 0; block-size: 1px; background: var(--sp-neutral-900);
  transition: inline-size var(--sp-duration-base) var(--sp-ease-out);
}
.sp-nav__link:hover, .sp-nav__link[aria-current="page"] { color: var(--sp-neutral-900); }
.sp-nav__link:hover::after, .sp-nav__link[aria-current="page"]::after { inline-size: 100%; }

.sp-cart-count {
  position: absolute; inset-block-start: 6px; inset-inline-end: 4px;
  min-inline-size: 15px; block-size: 15px; padding-inline: 3px;
  display: grid; place-items: center;
  font-size: 9px; font-weight: var(--sp-weight-semibold);
  border-radius: var(--sp-radius-pill);
  background: var(--sp-purple-800); color: #fff;
}

.sp-burger { display: none; }
@media (max-width: 1040px) {
  .sp-burger { display: inline-flex; }
  .sp-nav {
    /* ‏גובה מפורש ולא ‎inset-block-end: 0‎ — ל-‎.sp-header יש
       ‎backdrop-filter‎, והוא הופך לבלוק המכיל של צאצאים ‎fixed‎.
       בלי זה המגירה נמדדת מול ההדר ויוצאת בגובה 65px. */
    position: fixed; inset-block-start: 78px; inset-inline: 0;
    block-size: calc(100svh - 78px);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: var(--sp-space-8) var(--sp-gutter);
    background: #fff;
    border-block-start: 1px solid var(--sp-rule);
    transform: translateX(100%);
    transition: transform var(--sp-duration-base) var(--sp-ease-out);
    overflow-y: auto; z-index: var(--sp-z-dropdown);
  }
  .sp-nav[data-open="true"] { transform: translateX(0); }
  .sp-nav__link {
    font-size: var(--sp-text-xl); font-weight: var(--sp-weight-light);
    inline-size: 100%; padding-block: var(--sp-space-5);
    border-block-end: 1px solid var(--sp-rule);
  }
  .sp-nav__link::after { display: none; }
}
@media (max-width: 620px) {
  .sp-hide-sm { display: none; }
  .sp-header__logo img { block-size: 34px; }
}

/* --------------------------------------------------------------------------
   גיבור — תמונת רוחב מלאה. אושרת נמצאת בצד ימין של הקובץ,
   ולכן הטקסט יורד לצד שמאל הפיזי (inline-end ב-RTL).
   -------------------------------------------------------------------------- */
.sp-hero {
  position: relative;
  isolation: isolate;
  background: var(--sp-neutral-50);
}
.sp-hero__bg { position: absolute; inset: 0; z-index: -2; display: block; }
.sp-hero__bg img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  object-position: 76% 50%;
}
/* צעיף עדין מצד הטקסט — מבטיח קריאוּת גם כשהחיתוך זז */
.sp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to left, transparent 38%, rgba(251,250,248,.72) 62%, rgba(251,250,248,.92) 100%);
}

.sp-hero__inner {
  display: flex;
  justify-content: flex-end;      /* ב-RTL: הקצה הפיזי השמאלי */
  align-items: center;
  min-block-size: min(78vh, 680px);
  padding-block: var(--sp-space-16);
}
.sp-hero__copy {
  /* ‏רוחב מפורש ב-rem: יחידת ch נמדדת מול גופן הגוף ולא מול הכותרת,
     ולכן היא מצרה את הטור בטעות. */
  max-inline-size: 27rem;
  margin-inline-end: clamp(0px, 5vw, 80px);
}
.sp-hero__copy .sp-lead { color: var(--sp-neutral-700); max-inline-size: 25rem; }

@media (max-width: 900px) {
  .sp-hero::before { display: none; }
  .sp-hero__bg { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 5; max-block-size: 62vh; }
  .sp-hero__bg img { object-position: 50% 22%; }
  .sp-hero__inner {
    min-block-size: 0;
    padding-block: var(--sp-space-12);
    justify-content: flex-start;
  }
  .sp-hero__copy { max-inline-size: none; margin-inline-end: 0; }
}

/* שורת אמון — ארבע קוביות בסגול המותג, שקיפות יורדת 80/60/40/20 */
.sp-marks { display: grid; grid-template-columns: repeat(4, 1fr); }
.sp-marks__item:first-child { padding-inline-start: var(--sp-gutter); }
.sp-marks__item:last-child  { padding-inline-end: var(--sp-gutter); }
.sp-marks__item {
  display: flex; flex-direction: column; gap: var(--sp-space-2);
  padding: var(--sp-space-8) var(--sp-space-6);
  min-block-size: 100%;
  background: rgba(152, 102, 193, var(--_a, .2)); /* --sp-purple-500 */
}
.sp-marks__item:nth-child(1) { --_a: .80; }
.sp-marks__item:nth-child(2) { --_a: .60; }
.sp-marks__item:nth-child(3) { --_a: .40; }
.sp-marks__item:nth-child(4) { --_a: .20; }

.sp-marks__title {
  font-size: var(--sp-text-md);
  font-weight: var(--sp-weight-medium);
  color: var(--sp-neutral-900);
}
.sp-marks__text {
  font-size: var(--sp-text-sm);
  line-height: var(--sp-leading-normal);
  color: var(--sp-neutral-800); /* ‏neutral-700 נופל מ-AA על הקובייה של 80% */
}

@media (max-width: 900px) { .sp-marks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sp-marks { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   כרטיס מוצר — קו שיער, בלי צל, בלי גוון רקע
   -------------------------------------------------------------------------- */
.sp-product { display: flex; flex-direction: column; }
.sp-product__media {
  position: relative;
  aspect-ratio: 4 / 5;              /* זהה ליחס הקנבס של הקבצים */
  background: var(--sp-neutral-50);
  overflow: hidden;
  border: 1px solid var(--sp-rule);
  transition: border-color var(--sp-duration-base) var(--sp-ease-out);
}
.sp-product:hover .sp-product__media { border-color: var(--sp-rule-strong); }
.sp-product__media img {
  inline-size: 100%; block-size: 100%;
  /* הקבצים מנורמלים מראש: כל מוצר על קנבס 4:5 עם אותה מסה חזותית
     (‏scripts/normalize-products.py). לכן contain = התאמה מדויקת, בלי חיתוך. */
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--sp-duration-slow) var(--sp-ease-out);
}
.sp-product:hover .sp-product__media img { transform: scale(1.03); }
.sp-product__flags { position: absolute; inset-block-start: var(--sp-space-4); inset-inline-start: var(--sp-space-4); z-index: 2; }
.sp-product__wish {
  position: absolute; inset-block-start: var(--sp-space-3); inset-inline-end: var(--sp-space-3); z-index: 2;
  inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  color: var(--sp-neutral-400);
  transition: color var(--sp-duration-base) var(--sp-ease-out);
}
.sp-product__wish:hover { color: var(--sp-purple-800); }

.sp-product__body { display: flex; flex-direction: column; gap: var(--sp-space-2); padding-block-start: var(--sp-space-5); flex: 1; }
.sp-product__meta  { font-size: var(--sp-text-2xs); letter-spacing: var(--sp-tracking-wide); text-transform: uppercase; color: var(--sp-cat); }
.sp-product__title { font-size: var(--sp-text-lg); font-weight: var(--sp-weight-medium); color: var(--sp-neutral-900); }
.sp-product__desc  { font-size: var(--sp-text-sm); color: var(--sp-text-muted); flex: 1; }
.sp-product__foot  { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-4); padding-block-start: var(--sp-space-3); }

/* --------------------------------------------------------------------------
   קטגוריות — שורת קישורים, לא אריחים צבעוניים
   -------------------------------------------------------------------------- */
.sp-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--sp-rule); }
@media (max-width: 760px) { .sp-cats { grid-template-columns: repeat(2, 1fr); } }

.sp-cat-link {
  display: grid; gap: var(--sp-space-2); align-content: start;
  padding: var(--sp-space-10) var(--sp-space-6);
  /* כל קטגוריה נצבעת בגוון שלה */
  background: rgb(var(--sp-cat-rgb) / .30);
  transition: background var(--sp-duration-base) var(--sp-ease-out);
}
.sp-cat-link:hover { background: rgb(var(--sp-cat-rgb) / .45); }
.sp-cat-link__rule { inline-size: 26px; block-size: 2px; background: var(--sp-cat); margin-block-end: var(--sp-space-3); }
.sp-cat-link__name { font-size: var(--sp-text-2xl); font-weight: var(--sp-weight-light); color: var(--sp-neutral-900); }
.sp-cat-link__n    { font-size: var(--sp-text-sm); color: var(--sp-neutral-800); }
.sp-cat-link--tbd .sp-cat-link__name { color: var(--sp-neutral-400); }

/* --------------------------------------------------------------------------
   קרוסלת המלצות — נגיעת הסגול של הלוגו
   -------------------------------------------------------------------------- */
.sp-carousel { position: relative; }
.sp-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(26rem, 82vw);
  gap: var(--sp-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block-end: var(--sp-space-2);
}
.sp-carousel__track::-webkit-scrollbar { display: none; }

.sp-slide {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--sp-space-5);
  padding: var(--sp-space-8) var(--sp-space-7, var(--sp-space-6));
  background: var(--sp-neutral-0);
  border: 1px solid var(--sp-rule);
  border-block-start: 2px solid var(--sp-purple-500);   /* סגול הלוגו */
  border-radius: var(--sp-radius-sm);
  transition: border-color var(--sp-duration-base) var(--sp-ease-out),
              background var(--sp-duration-base) var(--sp-ease-out);
}
.sp-slide:hover { background: var(--sp-purple-50); }
.sp-slide__mark {
  font-family: var(--sp-font-accent);
  font-size: 3rem; line-height: .5;
  color: var(--sp-purple-300);
  block-size: 1.1rem;
}
.sp-slide__text {
  font-size: var(--sp-text-lg);
  font-weight: var(--sp-weight-light);
  line-height: var(--sp-leading-relaxed);
  letter-spacing: var(--sp-tracking-snug);
  color: var(--sp-neutral-800);
  flex: 1;
}
.sp-slide__src {
  font-size: var(--sp-text-2xs);
  font-weight: var(--sp-weight-semibold);
  letter-spacing: var(--sp-tracking-wider);
  text-transform: uppercase;
  color: var(--sp-purple-600);
}

/* פקדים */
.sp-carousel__ui {
  display: flex; align-items: center; gap: var(--sp-space-5);
  margin-block-start: var(--sp-space-6);
}
.sp-carousel__nav { display: flex; gap: var(--sp-space-2); }
.sp-carousel__btn {
  inline-size: 42px; block-size: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--sp-rule-strong);
  border-radius: var(--sp-radius-sm);
  color: var(--sp-neutral-700);
  background: #fff;
  transition: all var(--sp-duration-base) var(--sp-ease-out);
}
.sp-carousel__btn:hover:not(:disabled) {
  border-color: var(--sp-purple-500);
  background: var(--sp-purple-500);
  color: #fff;
}
.sp-carousel__btn:disabled { opacity: .3; cursor: default; }
.sp-carousel__btn--next svg { transform: scaleX(-1); }

.sp-carousel__rail { flex: 1; block-size: 2px; background: var(--sp-neutral-200); position: relative; }
.sp-carousel__rail span {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  inline-size: 20%;
  background: var(--sp-purple-500);
  transition: inline-size var(--sp-duration-base) var(--sp-ease-out),
              transform var(--sp-duration-base) var(--sp-ease-out);
}

/* --------------------------------------------------------------------------
   טפסים
   -------------------------------------------------------------------------- */
.sp-field { display: flex; flex-direction: column; gap: var(--sp-space-2); }
.sp-label {
  font-size: var(--sp-text-2xs);
  font-weight: var(--sp-weight-semibold);
  letter-spacing: var(--sp-tracking-wider);
  text-transform: uppercase;
  color: var(--sp-text-subtle);
}
.sp-input, .sp-select, .sp-textarea {
  inline-size: 100%;
  padding-block: var(--sp-space-3);
  padding-inline: 0;
  font-size: var(--sp-text-md);
  color: var(--sp-text);
  background: transparent;
  border: none;
  border-block-end: 1px solid var(--sp-rule-strong);
  border-radius: 0;
  transition: border-color var(--sp-duration-base) var(--sp-ease-out);
}
.sp-input::placeholder, .sp-textarea::placeholder { color: var(--sp-neutral-400); }
.sp-input:focus, .sp-select:focus, .sp-textarea:focus {
  outline: none; border-color: var(--sp-purple-800);
}
.sp-textarea { min-block-size: 96px; resize: vertical; line-height: var(--sp-leading-normal); }
.sp-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%2377716A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left center;
  padding-inline-end: 0;
}
.sp-field__msg { font-size: var(--sp-text-xs); color: var(--sp-text-subtle); }

.sp-check { display: inline-flex; align-items: center; gap: var(--sp-space-3); cursor: pointer; font-size: var(--sp-text-sm); color: var(--sp-text-muted); }
.sp-check input {
  appearance: none; inline-size: 16px; block-size: 16px;
  border: 1px solid var(--sp-rule-strong); border-radius: var(--sp-radius-xs);
  display: grid; place-content: center; cursor: pointer; flex-shrink: 0;
  transition: all var(--sp-duration-fast) var(--sp-ease-out);
}
.sp-check input::before {
  content: ""; inline-size: 8px; block-size: 8px; transform: scale(0);
  transition: transform var(--sp-duration-fast) var(--sp-ease-out);
  box-shadow: inset 1em 1em #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.sp-check input:checked { background: var(--sp-purple-800); border-color: var(--sp-purple-800); }
.sp-check input:checked::before { transform: scale(1); }

/* --------------------------------------------------------------------------
   רשימת סימון
   -------------------------------------------------------------------------- */
.sp-checklist { display: flex; flex-direction: column; gap: var(--sp-space-3); }
.sp-checklist li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-space-3);
  font-size: var(--sp-text-md); color: var(--sp-text-muted);
}
.sp-checklist li::before {
  content: ""; inline-size: 14px; block-size: 1px;
  background: var(--sp-cat); margin-block-start: 0.75em;
}

/* --------------------------------------------------------------------------
   אקורדיון
   -------------------------------------------------------------------------- */
.sp-accordion { border-block-end: 1px solid var(--sp-rule); }
.sp-accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-6);
  padding-block: var(--sp-space-6);
  font-size: var(--sp-text-lg);
  font-weight: var(--sp-weight-regular);
  color: var(--sp-neutral-900);
  cursor: pointer; list-style: none;
}
.sp-accordion summary::-webkit-details-marker { display: none; }
.sp-accordion summary::after {
  content: "+"; flex-shrink: 0;
  font-size: var(--sp-text-xl); font-weight: var(--sp-weight-light);
  color: var(--sp-neutral-400); line-height: 1;
  transition: transform var(--sp-duration-base) var(--sp-ease-out);
}
.sp-accordion[open] summary::after { content: "−"; }
.sp-accordion__body {
  padding-block-end: var(--sp-space-6);
  color: var(--sp-text-muted);
  max-inline-size: 68ch;
}

/* --------------------------------------------------------------------------
   שורת נתונים
   -------------------------------------------------------------------------- */
.sp-stats { display: flex; flex-wrap: wrap; border-block-start: 1px solid var(--sp-rule); }
.sp-stat {
  flex: 1 1 130px;
  padding: var(--sp-space-6) var(--sp-space-5) 0 0;
}
.sp-stat__num { display: block; font-size: var(--sp-text-3xl); font-weight: var(--sp-weight-light); letter-spacing: var(--sp-tracking-tight); color: var(--sp-neutral-900); }
.sp-stat__label { font-size: var(--sp-text-sm); color: var(--sp-text-subtle); }

/* --------------------------------------------------------------------------
   ציטוט אישי / הערת מטפלת
   -------------------------------------------------------------------------- */
.sp-note {
  display: grid; gap: var(--sp-space-4);
  padding-inline-start: var(--sp-space-8);
  border-inline-start: 1px solid var(--sp-purple-300);
}
.sp-note__text {
  font-size: var(--sp-text-xl);
  font-weight: var(--sp-weight-light);
  line-height: var(--sp-leading-relaxed);
  letter-spacing: var(--sp-tracking-snug);
}

/* --------------------------------------------------------------------------
   פוטר
   -------------------------------------------------------------------------- */
.sp-footer { background: var(--sp-bg-ink); color: rgba(255,255,255,.78); }
.sp-footer a { color: rgba(255,255,255,.78); }
.sp-footer a:hover { color: #fff; }
.sp-footer__grid { display: grid; gap: var(--sp-space-12); grid-template-columns: 1.6fr repeat(3, 1fr); }
@media (max-width: 900px) { .sp-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sp-footer__grid { grid-template-columns: 1fr; } }
.sp-footer__title {
  font-size: var(--sp-text-2xs); font-weight: var(--sp-weight-semibold);
  letter-spacing: var(--sp-tracking-wider); text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-block-end: var(--sp-space-5);
}
.sp-footer__links { display: flex; flex-direction: column; gap: var(--sp-space-3); font-size: var(--sp-text-sm); }
.sp-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-space-4);
  padding-block: var(--sp-space-6);
  border-block-start: 1px solid rgba(255,255,255,.14);
  font-size: var(--sp-text-xs); color: rgba(255,255,255,.5);
}

/* --------------------------------------------------------------------------
   מדיה
   -------------------------------------------------------------------------- */
.sp-media { overflow: hidden; background: var(--sp-neutral-100); }
.sp-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sp-media--portrait { aspect-ratio: 3 / 4; }
.sp-media--square   { aspect-ratio: 1; }
.sp-media--wide     { aspect-ratio: 16 / 10; }

/* --------------------------------------------------------------------------
   אזור הטיפולים — חצי תמונה, חצי טקסט, לרוחב מלא של המסך
   -------------------------------------------------------------------------- */
.sp-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-block-size: clamp(420px, 46vw, 640px);
}

/* חצי הטקסט — מיושר לקצה החיצוני לפי רוחב המיכל של שאר העמוד */
.sp-halves__copy {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-space-6);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-inline-start: max(var(--sp-gutter), calc((100vw - var(--sp-container)) / 2));
  padding-inline-end: clamp(1.5rem, 4vw, 4.5rem);
}
.sp-halves__copy > * { max-inline-size: 34rem; }

/* חצי התמונה — ממלא את גובה השורה */
.sp-halves__media { position: relative; overflow: hidden; background: var(--sp-neutral-100); }
.sp-halves__media img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  object-position: var(--_pos, 62% 50%);
}

@media (max-width: 860px) {
  .sp-halves { grid-template-columns: 1fr; min-block-size: 0; }
  .sp-halves__media { order: -1; aspect-ratio: 4 / 3; }
  .sp-halves__copy {
    padding-inline: var(--sp-gutter);
    padding-block: var(--sp-space-12);
  }
}

/* שורת כפתורי סוגי הטיפולים */
.sp-pills {
  /* גריד ולא flex — כדי שארבעה כפתורים לא ייפלו 3+1 עם יתום בשורה שנייה */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-space-3);
  padding-block-start: var(--sp-space-6);
  border-block-start: 1px solid var(--sp-rule);
}
.sp-pill {
  display: flex; align-items: baseline; justify-content: center; gap: var(--sp-space-3);
  padding-block: 0.8125rem;
  padding-inline: var(--sp-space-5);
  border: 1px solid var(--sp-rule-strong);
  border-radius: var(--sp-radius-sm);
  background: #fff;
  font-size: var(--sp-text-md);
  color: var(--sp-neutral-800);
  transition: border-color var(--sp-duration-base) var(--sp-ease-out),
              background var(--sp-duration-base) var(--sp-ease-out),
              color var(--sp-duration-base) var(--sp-ease-out);
}
.sp-pill:hover {
  border-color: var(--sp-purple-800);
  background: var(--sp-purple-800);
  color: #fff;
}
.sp-pill__n {
  font-size: var(--sp-text-2xs);
  letter-spacing: var(--sp-tracking-wide);
  color: var(--sp-neutral-400);
  font-variant-numeric: tabular-nums;
  transition: color var(--sp-duration-base) var(--sp-ease-out);
}
.sp-pill:hover .sp-pill__n { color: rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   פתיח החנות — רצף פריימים שנגלל עם המשתמש
   הסקשן גבוה, בתוכו שכבה דביקה בגובה מסך אחד.
   -------------------------------------------------------------------------- */
.sp-scrolly {
  position: relative;
  block-size: 300vh;            /* מרחק הגלילה שמזין את האנימציה */
  background: var(--sp-neutral-50);
}
.sp-scrolly__stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.sp-scrolly__canvas {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
}
.sp-scrolly__copy {
  position: relative; z-index: 2;
  inline-size: 100%;
  max-inline-size: var(--sp-container);
  padding-inline: var(--sp-gutter);
  display: flex; flex-direction: column; gap: var(--sp-space-6);
  align-items: flex-start;
}
.sp-scrolly__copy > * { max-inline-size: 32rem; }

/* מד התקדמות דק בתחתית השכבה */
.sp-scrolly__bar {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3;
  block-size: 2px; background: var(--sp-neutral-200);
}
.sp-scrolly__bar span {
  display: block; block-size: 100%; inline-size: 0%;
  background: var(--sp-purple-500);
  transform-origin: right center;
}

@media (max-width: 760px) {
  .sp-scrolly { block-size: 220vh; }
}

/* ללא JS או בהעדפת תנועה מופחתת — תמונה סטטית, בלי גלילה ארוכה */
.sp-scrolly.is-static { block-size: auto; }
.sp-scrolly.is-static .sp-scrolly__stage {
  position: relative; block-size: auto;
  min-block-size: clamp(420px, 52vw, 640px);
  padding-block: var(--sp-space-20);
}
.sp-scrolly.is-static .sp-scrolly__bar { display: none; }

/* ==========================================================================
   תנועה — הופעה בטעינה ובגלילה. עדין: 12px ו-600ms, בלי קפיצות.
   ========================================================================== */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 620ms var(--sp-ease-out), transform 620ms var(--sp-ease-out);
  transition-delay: var(--_d, 0ms);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* מדיה — התמונה נכנסת בזום עדין פנימה */
.js-reveal [data-reveal="media"] { transform: none; }
.js-reveal [data-reveal="media"] img { transform: scale(1.06); transition: transform 1100ms var(--sp-ease-out); }
.js-reveal [data-reveal="media"].is-in img { transform: none; }

/* הגיבור נכנס מיד בטעינה, בהשהיה מדורגת */
.sp-hero__copy > * {
  opacity: 0; transform: translateY(14px);
  animation: sp-rise 720ms var(--sp-ease-out) forwards;
}
.sp-hero__copy > *:nth-child(1) { animation-delay:  80ms; }
.sp-hero__copy > *:nth-child(2) { animation-delay: 180ms; }
.sp-hero__copy > *:nth-child(3) { animation-delay: 280ms; }
.sp-hero__bg img { animation: sp-fade 1200ms var(--sp-ease-out) both; }

@keyframes sp-rise { to { opacity: 1; transform: none; } }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js-reveal [data-reveal="media"] img { transform: none !important; }
  .sp-hero__copy > *, .sp-hero__bg img { animation: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   הפרפר של המותג — ריחוף עדין + היענות לסמן
   הציר הוא גוף הפרפר (‏31% / 86%), כדי שהכנפיים ינפנפו והגוף יישאר במקומו.
   -------------------------------------------------------------------------- */
.sp-butterfly {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1;
  padding: clamp(1rem, 4vw, 3rem);
  perspective: 1100px;
}
.sp-butterfly::before {
  content: ""; position: absolute; z-index: 0;
  inline-size: 82%; block-size: 82%;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(152,102,193,.16) 0%,
              rgba(152,102,193,.06) 45%,
              transparent 70%);
  animation: sp-glow 7s var(--sp-ease-in-out) infinite;
}

/* שכבה חיצונית — הימשכות לסמן (נשלטת מ-JS) */
.sp-butterfly__pull {
  position: relative; z-index: 1;
  inline-size: 100%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 900ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
/* שכבה אמצעית — ריחוף איטי למעלה ולמטה */
.sp-butterfly__float { animation: sp-float 6.5s var(--sp-ease-in-out) infinite; }

/* שכבה פנימית — הנפנוף עצמו */
.sp-butterfly img {
  display: block;
  inline-size: 100%; block-size: auto;
  transform-origin: 31% 86%;
  animation: sp-flap 3.4s var(--sp-ease-in-out) infinite;
  backface-visibility: hidden;
}

@keyframes sp-flap {
  0%, 100% { transform: rotateY(0deg)   rotate(0deg); }
  35%      { transform: rotateY(34deg)  rotate(-1.6deg); }
  55%      { transform: rotateY(26deg)  rotate(-1deg); }
  78%      { transform: rotateY(6deg)   rotate(.4deg); }
}
@keyframes sp-float {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(1.2deg); }
}
@keyframes sp-glow {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .sp-butterfly img,
  .sp-butterfly__float,
  .sp-butterfly::before { animation: none; }
  .sp-butterfly__pull { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   מגה־מניו — נפתח מתחת להדר לכל רוחב המסך
   -------------------------------------------------------------------------- */
.sp-header { position: sticky; }          /* עוגן ל-absolute של הפאנל */

.sp-mega {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  background: var(--sp-bg);
  border-block-end: 1px solid var(--sp-rule);
  box-shadow: 0 18px 40px rgba(21,18,15,.07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--sp-duration-base) var(--sp-ease-out),
              transform var(--sp-duration-base) var(--sp-ease-out),
              visibility 0s linear var(--sp-duration-base);
}
.sp-mega[data-open="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.sp-mega__inner {
  display: grid;
  gap: var(--sp-space-10);
  padding-block: var(--sp-space-10) var(--sp-space-12);
}
.sp-mega__col { display: flex; flex-direction: column; gap: var(--sp-space-3); }

/* כותרת עמודה — עם קו הצבע של הקטגוריה */
.sp-mega__rule { inline-size: 24px; block-size: 2px; background: var(--sp-cat, var(--sp-purple-500)); }
.sp-mega__title {
  font-size: var(--sp-text-lg);
  font-weight: var(--sp-weight-medium);
  color: var(--sp-neutral-900);
}
.sp-mega__meta { font-size: var(--sp-text-2xs); letter-spacing: var(--sp-tracking-wide);
  text-transform: uppercase; color: var(--sp-text-subtle); }
.sp-mega__list { display: flex; flex-direction: column; gap: var(--sp-space-2); margin-block-start: var(--sp-space-2); }
.sp-mega__list a {
  font-size: var(--sp-text-sm);
  color: var(--sp-text-muted);
  padding-block: 2px;
  transition: color var(--sp-duration-fast) var(--sp-ease-out);
}
.sp-mega__list a:hover { color: var(--sp-cat-ink, var(--sp-purple-800)); }

/* עמודת ההדגשה — מוצר או קריאה לפעולה */
.sp-mega__feature {
  display: flex; flex-direction: column; gap: var(--sp-space-4);
  padding: var(--sp-space-6);
  background: var(--sp-bg-subtle);
  border-radius: var(--sp-radius-sm);
}
.sp-mega__feature img {
  inline-size: 100%; aspect-ratio: 4/5; object-fit: contain;
  mix-blend-mode: multiply;
}

/* פס תחתון בפאנל */
.sp-mega__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-space-4);
  padding-block: var(--sp-space-5);
  border-block-start: 1px solid var(--sp-rule);
  font-size: var(--sp-text-sm);
  color: var(--sp-text-subtle);
}

/* חץ קטן ליד פריט בתפריט שיש לו פאנל */
.sp-nav__link[aria-haspopup]::before {
  content: ""; display: inline-block;
  inline-size: 6px; block-size: 6px;
  margin-inline-end: 7px;
  border-inline-end: 1.2px solid currentColor;
  border-block-end: 1.2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .5;
  transition: transform var(--sp-duration-base) var(--sp-ease-out), opacity var(--sp-duration-base) var(--sp-ease-out);
}
.sp-nav__link[aria-expanded="true"]::before { transform: translateY(1px) rotate(-135deg); opacity: 1; }

/* מובייל — אין מגה־מניו, הקישורים מתנהגים רגיל */
@media (max-width: 1040px) {
  .sp-mega { display: none; }
  .sp-nav__link[aria-haspopup]::before { display: none; }
}

/* ==========================================================================
   עמודים פנימיים
   ========================================================================== */

/* פירורי לחם */
.sp-crumbs { padding-block: var(--sp-space-5); border-block-end: 1px solid var(--sp-rule); }
.sp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-space-2);
  font-size: var(--sp-text-xs); color: var(--sp-text-subtle); }
.sp-crumbs a { color: var(--sp-text-subtle); }
.sp-crumbs a:hover { color: var(--sp-neutral-900); }
.sp-crumbs li:not(:last-child)::after { content: "‹"; margin-inline-start: var(--sp-space-2); opacity: .5; }

/* כותרת עמוד */
.sp-pagehead { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--sp-space-10); }
.sp-pagehead h1 { max-inline-size: 20ch; }
.sp-pagehead .sp-lead { max-inline-size: 52ch; margin-block-start: var(--sp-space-5); }
.sp-pagehead--cat { border-block-end: 4px solid var(--sp-cat, var(--sp-purple-500)); }

/* סרגל סינון קטגוריות */
.sp-filters { display: flex; flex-wrap: wrap; gap: var(--sp-space-6);
  padding-block: var(--sp-space-5); border-block-end: 1px solid var(--sp-rule);
  margin-block-end: var(--sp-space-12); align-items: center; }
.sp-filters__count { margin-inline-start: auto; font-size: var(--sp-text-sm); color: var(--sp-text-subtle); }

/* --- עמוד מוצר --- */
.sp-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .sp-pdp { grid-template-columns: 1fr; } }
.sp-pdp__media { background: var(--sp-cat-soft, var(--sp-neutral-50)); border: 1px solid var(--sp-rule);
  aspect-ratio: 4/5; position: relative; overflow: hidden; }
.sp-pdp__media img { inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sp-pdp__flags { position: absolute; inset-block-start: var(--sp-space-5); inset-inline-start: var(--sp-space-5); }
.sp-pdp__body { display: flex; flex-direction: column; gap: var(--sp-space-5); }
.sp-pdp__tagline { font-size: var(--sp-text-xl); font-weight: var(--sp-weight-light);
  color: var(--sp-cat-ink, var(--sp-purple-800)); letter-spacing: var(--sp-tracking-snug); }
.sp-pdp__price { font-size: var(--sp-text-3xl); font-weight: var(--sp-weight-light);
  letter-spacing: var(--sp-tracking-tight); color: var(--sp-neutral-900); }
.sp-pdp__buy { display: flex; flex-wrap: wrap; gap: var(--sp-space-4); align-items: center;
  padding-block: var(--sp-space-6); border-block: 1px solid var(--sp-rule); }

/* בורר כמות */
.sp-qty { display: inline-flex; align-items: center; border: 1px solid var(--sp-rule-strong);
  border-radius: var(--sp-radius-sm); }
.sp-qty button { inline-size: 42px; block-size: 46px; display: grid; place-items: center; color: var(--sp-text-muted); }
.sp-qty button:hover { color: var(--sp-purple-800); }
.sp-qty__v { inline-size: 42px; text-align: center; font-size: var(--sp-text-sm); font-weight: var(--sp-weight-medium); }

/* בלוקי מידע (מה עושה / למי / רכיבים) */
.sp-info { display: grid; gap: var(--sp-space-10); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sp-info__h { font-size: var(--sp-text-2xs); font-weight: var(--sp-weight-semibold);
  letter-spacing: var(--sp-tracking-wider); text-transform: uppercase;
  color: var(--sp-text-subtle); margin-block-end: var(--sp-space-4);
  padding-block-end: var(--sp-space-3); border-block-end: 1px solid var(--sp-rule); }

/* --- עמוד טיפול --- */
.sp-tmeta { display: flex; flex-wrap: wrap; gap: var(--sp-space-8); padding-block: var(--sp-space-6);
  border-block: 1px solid var(--sp-rule); }
.sp-tmeta__k { font-size: var(--sp-text-2xs); letter-spacing: var(--sp-tracking-wider);
  text-transform: uppercase; color: var(--sp-text-subtle); display: block; margin-block-end: 3px; }
.sp-tmeta__v { font-size: var(--sp-text-md); font-weight: var(--sp-weight-medium); }

/* פס CTA דביק בתחתית עמוד טיפול/מוצר במובייל */
.sp-stickybar { display: none; }
@media (max-width: 760px) {
  .sp-stickybar {
    position: sticky; inset-block-end: 0; z-index: var(--sp-z-sticky);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-4);
    padding: var(--sp-space-3) var(--sp-gutter);
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-block-start: 1px solid var(--sp-rule);
  }
}

/* --- עמוד צור קשר --- */
.sp-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
@media (max-width: 900px) { .sp-contact { grid-template-columns: 1fr; } }
.sp-channel { display: flex; gap: var(--sp-space-4); align-items: baseline;
  border-block-start: 1px solid var(--sp-rule); padding-block-start: var(--sp-space-5); }

/* ==========================================================================
   תיקוני מובייל
   מקבילים אחד לאחד לסניפט "מובייל — תיקוני פריסה" שבוורדפרס.
   ========================================================================== */

/* ‏פריט גריד מסרב להצטמצם מתחת לרוחב התוכן שלו (‎min-inline-size: auto‎).
   התמונה בפנים החזיקה את הטור רחב מהמסך, וכל העמוד נדחף הצידה. */
.sp-halves > * { min-inline-size: 0; }

@media (max-width: 780px) {
  .sp-section-head:has(.sp-section-head__aside) { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* שורת האמון ומקטע "הקליניקה בבקבוק" — לא מוצגים בטלפון */
  .sp-marks,
  .sp-scrolly { display: none; }

  /* אריחי הקטגוריות — ארבעה בשורה, קומפקטיים */
  .sp-cats { grid-template-columns: repeat(4, 1fr); }
  .sp-cat-link {
    padding: var(--sp-space-5) var(--sp-space-2);
    gap: var(--sp-space-1);
    text-align: center;
    justify-items: center;
  }
  .sp-cat-link__rule { inline-size: 16px; margin-block-end: var(--sp-space-2); }
  .sp-cat-link__name { font-size: var(--sp-text-sm); line-height: 1.25; text-wrap: balance; }
  .sp-cat-link__n    { font-size: var(--sp-text-2xs); }

  /* גריד המוצרים — שתי עמודות במקום אחת */
  .sp-grid--4,
  .sp-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sp-grid { gap: var(--sp-space-4); }
  .sp-product__title { font-size: var(--sp-text-md); line-height: 1.3; }
  .sp-product__desc  { display: none; }
  .sp-product__body  { padding: var(--sp-space-4); }

  /* ‏בכרטיס של 165px אין מקום למחיר ולקישור זה לצד זה, ו"הוספה לסל"
     נשבר באמצע. מרשים לשורה להתקפל במקום למילה. */
  .sp-product__foot {
    flex-wrap: wrap;
    gap: var(--sp-space-1) var(--sp-space-2);
    font-size: var(--sp-text-sm);
  }
  .sp-product__foot .sp-link { white-space: nowrap; }
}