/* ==================================================================
   ELI · 2026-09-22 (סבב שני)

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


/* ==================================================================
   1. הריחוף על כרטיס המוצר
   ==================================================================

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

.bp-card:hover .bp-card__reveal,
.bp-card:focus-within .bp-card__reveal{ opacity:0; }

.bp-card:hover .bp-card__reveal-btn,
.bp-card:focus-within .bp-card__reveal-btn{
  transform:translateY(16px) scale(.9);
  opacity:0;
}

.bp-card__media:hover .bp-card__reveal,
.bp-card__media:focus-within .bp-card__reveal{ opacity:1; }

.bp-card__media:hover .bp-card__reveal-btn,
.bp-card__media:focus-within .bp-card__reveal-btn{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* הזום שייך לאותה מחווה — גם הוא עובר לריחוף על התמונה */
.bp-card:hover .bp-card__media img,
.bp-card:focus-within .bp-card__media img{ transform:none; }

.bp-card__media:hover img,
.bp-card__media:focus-within img{ transform:scale(1.06); }

@media (prefers-reduced-motion: reduce){
  .bp-card__media:hover img,
  .bp-card__media:focus-within img{ transform:none; }
  .bp-card__media:hover .bp-card__reveal-btn{ transform:none; }
}


/* ==================================================================
   2. עמוד המוצר — שורת הפעולה
   ==================================================================

   הבעיה שהיתה: במוצר עם אפשרויות, טופס הקנייה גבוה יותר
   (יש בו גם את בחירת הצבע), ו-align-items:stretch מתח את כפתור
   הוואטסאפ לאותו גובה. עכשיו שני הכפתורים מקבלים בדיוק
   אותו ריפוד, אותו גודל פונט ואותו גובה שורה, והשורה
   מיישרת אותם לתחתית — אז הם זהים בכל סוג מוצר. */

.pdp-actions{ align-items:flex-end; }

.pdp-actions > .pdp-wa{ align-self:flex-end; }

.pdp-actions > form.cart button.single_add_to_cart_button,
.pdp-actions > .pdp-wa--solid{
  box-sizing:border-box;
  padding-block:clamp(16px, 1.9vw, 22px);
  padding-inline:26px;
  font-size:clamp(1rem, 1.3vw, 1.12rem);
  font-weight:var(--w-bold, 700);
  line-height:1.3;
}
.pdp-actions > .pdp-wa--solid svg{ inline-size:18px; block-size:18px; }

/*
 * במוצר עם וריאציות הטופס הוא עמודה (בחירת צבע מעל,
 * כמות + כפתור מתחת) — אחרת טבלת האפשרויות נדחפת
 * לצד הכפתור והכל נשבר.
 */
.pdp-actions > form.cart.variations_form{ display:block; }
.pdp-actions > form.cart.variations_form .woocommerce-variation-add-to-cart{
  display:flex;
  align-items:stretch;
  gap:10px;
}
.pdp-actions > form.cart.variations_form .woocommerce-variation-add-to-cart .quantity{ flex:none; }
.pdp-actions > form.cart.variations_form .single_variation_wrap{ margin:0; }
.pdp-actions > form.cart.variations_form .woocommerce-variation-price{ margin:0 0 10px; }

@media (max-width:560px){
  .pdp-actions{ flex-wrap:wrap; align-items:stretch; }
  .pdp-actions > form.cart,
  .pdp-actions > .pdp-wa{ flex:1 1 100%; }
  .pdp-actions > .pdp-wa--solid{ justify-content:center; }
}


/* ==================================================================
   3. עיגולי הצבע
   ==================================================================

   הרשימה הנפתחת של ווקומרס נשארת בעמוד כמקור האמת וכנגישות,
   רק מוסתרת מהעין. צבע כפול ("שחור כתום") מצוייר כעיגול
   חצוי באלכסון — כמו שהכלי נראה באמת. */

.bp-swatches__select{
  position:absolute !important;
  inline-size:1px; block-size:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.bp-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:2px 0 8px;
}

.bp-swatch{
  inline-size:38px;
  block-size:38px;
  padding:3px;
  border:0;
  background:transparent;
  border-radius:50%;
  cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--c-hairline, #E6E6E6);
  transition:box-shadow .2s ease, transform .22s cubic-bezier(.34,1.4,.5,1);
}

.bp-swatch__dot{
  display:block;
  inline-size:100%;
  block-size:100%;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}

.bp-swatch:hover{ transform:scale(1.07); }
.bp-swatch:focus-visible{
  outline:2px solid var(--c-orange, #F14B1C);
  outline-offset:3px;
}

.bp-swatch.is-on{
  box-shadow:inset 0 0 0 2px var(--c-orange, #F14B1C);
  transform:scale(1.07);
}

/* צבע שאזל או שאינו אפשרי עם הבחירות האחרות — מעומעם ומקווקו */
.bp-swatch.is-off{
  opacity:.34;
  cursor:not-allowed;
  transform:none;
}
.bp-swatch.is-off .bp-swatch__dot{
  background-image:linear-gradient(45deg,
    transparent calc(50% - 1px),
    rgba(0,0,0,.55) calc(50% - 1px),
    rgba(0,0,0,.55) calc(50% + 1px),
    transparent calc(50% + 1px)) !important;
}

.bp-swatches__name{
  margin:0 0 10px;
  min-block-size:1.2em;
  font-size:.92rem;
  font-weight:var(--w-bold, 700);
  color:var(--c-ink, #0A0A0A);
}
.bp-swatches__name:empty{ margin-block-end:2px; }

/* הטבלה של ווקומרס — בלי מסגרות, רק תווית ועיגולים */
.pdp__buy .variations th.label,
.pdp__buy .variations td.label{
  padding:0 0 2px;
  font-size:.82rem;
  font-weight:var(--w-bold, 700);
  color:var(--c-slate, #8A8A8A);
  text-align:right;
}
.pdp__buy .variations th.label label{ margin:0; }

.pdp__buy .reset_variations{
  display:inline-block;
  margin:0 0 10px;
  font-size:.82rem;
  color:var(--c-slate, #8A8A8A);
}
.pdp__buy .reset_variations:hover{ color:var(--c-orange, #F14B1C); }

@media (prefers-reduced-motion: reduce){
  .bp-swatch,
  .bp-swatch:hover,
  .bp-swatch.is-on{ transition:none; transform:none; }
}