/*
 Theme Name:   Hello Elementor Child
 Template:     hello-elementor
 Version:      1.0
*/

/*────────────────────────────────────────*/
/* Imports                                 */
/*────────────────────────────────────────*/
@import url('/wp-content/uploads/fonts/fonts.css');

/*────────────────────────────────────────*/
/* 1. CSS VARIABLES – All in one :root    */
/*────────────────────────────────────────*/
:root {
  /* fonts */
  --font-body:           'Sapir Classic', sans-serif;
  --font-heading:        'cy', sans-serif;
  --font-static-btn:     'Sapir Classic', sans-serif;
  --font-filter-btn:     'Sapir Classic', sans-serif;
  --font-page-title:     'Sapir Classic', sans-serif;

  /* cart fonts */
  --adfy_woofc_base_text_font_size: 44px !important;
  --adfy_woofc_cart_product_title_font_size: 44px !important;
  --adfy_woofc_base_button_font_size: 44px !important;
  --adfy_woofc_font_family: 'Sapir Classic', sans-serif !important;

  /* colors */
  --black:               #161616;
  --white:               #fff;
  --gray:                #ccc;

  /* border */
  --border-w:            2px;
  --border-color:        #161616;

  /* spacing */
  --gap-horizontal:      8px;
  --gap-vertical:        10px;
  --gap-buttons:         5px;
  --gap-theme:           20px;
  --gap-popup:           6px;
  --grid-side-padding: 16px;

      --wvs-single-product-item-font-size: 36px !important;
          --wvs-single-product-item-width: 70px !important;
    --wvs-single-product-item-height: 70px !important;


  /* animations */
  --anim-d:              0.6s;
  --anim-ease:           cubic-bezier(0.25,0.1,0.25,1);

  /* filter bar */
  --filter-top-offset:   100px;

}


  #adfy__floating-cart .adfy__woofc-header .adfy__woofc-title {
    align-items: center;
    color: var(--adfy_woofc_cart_title_text_color);
    display: flex
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 40px !important;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.adfy__woofc-button, a.adfy__woofc-button, button.adfy__woofc-button, button.adfy__woofc-button[type=submit], input.adfy__woofc-button[type=submit] {
    font-size: var(--adfy_woofc_base_button_font_size);
    font-family: var( --adfy_woofc_font_family) !important;
    font-weight: var(--adfy_woofc_base_button_font_weight);
    gap: 5px;
    letter-spacing: var(--adfy_woofc_base_button_letter_spacing);
    line-height: 1;
    fill: var(--adfy_woofc_primary_button_label_color);
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    background: transparent;
    background-color: var(--adfy_woofc_primary_button_background_color);
    border-color: var(--adfy_woofc_primary_button_border_color);
    border-radius: var(--adfy_woofc_base_button_border_radius);
    border-style: solid;
    border-width: 1px;
    box-shadow: none;
    color: var(--adfy_woofc_primary_button_label_color);
    padding: 15px 25px;
    text-decoration: none;
    text-transform: var(--adfy_woofc_base_button_text_transform);
    transition: all .5s ease;
}

@media (max-width: 768px) {
    :root {
    /* cart fonts */
  --adfy_woofc_base_text_font_size: 34px !important;
  --adfy_woofc_cart_product_title_font_size: 34px !important;
  --adfy_woofc_base_button_font_size: 34px !important;
  --adfy_woofc_font_family: 'Sapir Classic', sans-serif !important;
  }

  #adfy__floating-cart .adfy__woofc-header .adfy__woofc-title {
    align-items: center;
    color: var(--adfy_woofc_cart_title_text_color);
    display: flex
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 40px !important;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.adfy__woofc-button, a.adfy__woofc-button, button.adfy__woofc-button, button.adfy__woofc-button[type=submit], input.adfy__woofc-button[type=submit] {
    font-size: var(--adfy_woofc_base_button_font_size);
    font-family: var( --adfy_woofc_font_family) !important;
    font-weight: var(--adfy_woofc_base_button_font_weight);
    gap: 5px;
    letter-spacing: var(--adfy_woofc_base_button_letter_spacing);
    line-height: 1;
    fill: var(--adfy_woofc_primary_button_label_color);
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    background: transparent;
    background-color: var(--adfy_woofc_primary_button_background_color);
    border-color: var(--adfy_woofc_primary_button_border_color);
    border-radius: var(--adfy_woofc_base_button_border_radius);
    border-style: solid;
    border-width: 1px;
    box-shadow: none;
    color: var(--adfy_woofc_primary_button_label_color);
    padding: 15px 25px;
    text-decoration: none;
    text-transform: var(--adfy_woofc_base_button_text_transform);
    transition: all .5s ease;
}

    }

/*────────────────────────────────────────*/
/* 4. Reset / Normalize                   */
/*────────────────────────────────────────*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*────────────────────────────────────────*/
/* 5. Base Styles                         */
/*────────────────────────────────────────*/
html {
  font-size: 100%;
  line-height: 1;
}
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;

}
a {
  color: inherit;
  text-decoration: none;
}


/*────────────────────────────────────────*/
/* 6. Direction / Alignment               */
/*────────────────────────────────────────*/
[lang="he"],[lang^="he-"] { direction: rtl; text-align: right; }
[lang="en"],[lang^="en-"] { direction: ltr; text-align: left; }


/* ────────────────────────────────────────
   Override לפונטים באנגלית
──────────────────────────────────────── */
html:lang(en) {
  --font-body:       'cy', sans-serif;
  --font-heading:    'cy', sans-serif;
  --font-static-btn: 'cy', sans-serif;
  --font-filter-btn: 'cy', sans-serif;
  --font-page-title: 'cy', sans-serif;
}

/*────────────────────────────────────────*/
/* 7. Site Layout                         */
/*────────────────────────────────────────*/

.site-main .container {
  width: 100%;                               /* חובה כדי ש־max-width יעבוד */
  /*max-width: var(--content-max-w, 1200px);   /* רוחב מקסימלי – תגדיר את --content-max-w ב־:root אם צריך */
  margin: 0 auto;                            /* מרכז את הקונטיינר */
  padding: 0 var(--gap-horizontal);          /* ריפוד צדדי דינמי */
  box-sizing: border-box;                    /* כדי שה־padding לא יגדיל את הרוחב */
}


/*────────────────────────────────────────*/
/* 8.7 Menu Toggle (Hamburger)           */
/*────────────────────────────────────────*/
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
}
.menu-toggle svg {
  display: block;
  width: 3rem;
  height: 3rem;
}


/*────────────────────────────────────────*/
/* 10. Filter Bar & Products Grid         */
/*────────────────────────────────────────*/
/* A) Toggle filters by device */
.bootleg-filter.filter-desktop-only { display: none !important; }
.bootleg-filter.filter-mobile-only  { display: inline-block !important; }
@media (min-width: 1024px) {
  .bootleg-filter.filter-mobile-only  { display: none !important; }
  .bootleg-filter.filter-desktop-only { display: inline-block !important; }
}
/* 10.1 Bar Wrapper */
.bootleg-filter-wrapper {
  position: sticky;
  top: var(--filter-top-offset);
    margin-bottom: clamp(1rem, 3vw, 3rem);

  z-index: 9;
  background: transparent;
  display: flex;
  justify-content: center;
  padding: 12px 0 !important;
}
/* 10.2 Bar */
.bootleg-filter-bar {
  position: relative;
  display: flex;
  justify-content: center;
  --filter-offset: 50%;
  --filter-width: 0;
  --filter-height: 0;
  --filter-top: 50%;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 8px !important;
  padding: 12px 12px;
}
.bootleg-filter-bar::before {
  content: '';
  position: absolute;
  top: var(--filter-top);
  left: var(--filter-offset);
  width: var(--filter-width);
  height: var(--filter-height);
  background: var(--border-color);
  transform: translate(-50%, -50%) rotate(3deg);
  transform-origin: center;
  z-index: -1;
  transition:
    left   var(--anim-d) var(--anim-ease),
    width  var(--anim-d) var(--anim-ease),
    height var(--anim-d) var(--anim-ease),
    top    var(--anim-d) var(--anim-ease);
}




/* 10.3 Filter Buttons */
.bootleg-filter {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-filter-btn);
  text-transform: uppercase;
  cursor: pointer;
  transition:
  transform var(--anim-d) var(--anim-ease),
  box-shadow var(--anim-d) var(--anim-ease);
  min-width: 100px;
  text-align: center;
  flex: 0 0 auto !important;
  padding: 4px 12px !important;
  font-size: 2.3rem !important;
  min-width: auto !important;
  border: var(--border-w) solid var(--border-color) !important;
}
.bootleg-filter.active {
  transform: rotate(3deg);
  box-shadow: 6px 6px 0 var(--border-color);
}
.bootleg-filter:not(.active):hover {
  background: var(--white);
}

/* ─────────────────────────────────── */
/*  Reset default button bevels       */
/*────────────────────────────────────*/
.bootleg-filter,
.bootleg-filter:hover,
.bootleg-filter:focus,
.bootleg-filter:active {
  /* מסיר את הסגנון המגושם של הדפדפן */
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;

  /* מבטל כל shadow אפשרי */

  /* force Flat solid border */
  border: var(--border-w) solid var(--border-color) !important;
}
/*────────────────────────────────────────*/
/* 10.4 Products Grid – עם שוליים         */
/*────────────────────────────────────────*/
.bootleg-grid {
  display: grid;
  gap: var(--gap-vertical) var(--gap-horizontal);
  grid-template-columns: repeat(4, 1fr);
  /* שוליים אנכיים (מרווח בין הכותרת לגריד) */
  margin: var(--gap-vertical) auto;
    margin-top: 0 !important;
  /* ריווח אופקי משני הצדדים */
  padding: 0 var(--grid-side-padding);
  /* אופציונלי: להגביל רוחב מקסימלי */
  max-width: 1800px;
}

/*────────────────────────────────────────*/
/* 11. Overlay Static Buttons on Items    */
/*────────────────────────────────────────*/
.bootleg-image-container {
  position: relative;
}

/* 11.1 Static Buttons – hidden by default, show on hover, centered */
.bootleg-image-container .bootleg-static-buttons {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--gap-buttons);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--anim-d) var(--anim-ease),
    visibility 0s linear var(--anim-d);
  z-index: 2;
}
.bootleg-image-container:hover .bootleg-static-buttons {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 11.2 Button base styles */
.bootleg-static-buttons button,
.bootleg-static-buttons a {
  min-width: 54px;            /* אחיד לגודל כפתורי המידות */
  height: 50px;               /* גובה קבוע */
  padding: 0 1rem;            /* רוחב פנימי אופקי */
  font-family: var(--font-static-btn);
  font-size: 1.6rem;
  font-weight: 300;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--white);
  border: var(--border-w) solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background var(--anim-d) var(--anim-ease),
    color      var(--anim-d) var(--anim-ease);
}
.bootleg-static-buttons button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.bootleg-static-buttons button:hover,
.bootleg-static-buttons a:hover {
  background: var(--black);
  color: var(--white);
}

/*────────────────────────────────────────*/
/* 12. Popup logic                        */
/*────────────────────────────────────────*/
/* hide popup by default */
.bootleg-popup {
  display: none;
  justify-content: center;
  align-items: center;
  gap: var(--gap-buttons);
}

/* when open: show popup and hide static buttons */
.bootleg-popup.open {
  display: flex !important;
}
.bootleg-item:has(.bootleg-popup.open) .bootleg-static-buttons {
  display: none !important;
}
/*────────────────────────────────────────*/
/* 12. Popup מידות + AJAX Add to Cart      */
/*────────────────────────────────────────*/
.bootleg-popup {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: var(--gap-popup);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.bootleg-popup.open {
  opacity: 1;
  pointer-events: auto;
}
.bootleg-popup .bootleg-size {
  width: 54px;
  height: 50px;
  background: var(--white);
  border: var(--border-w) solid var(--border-color) !important;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(20px);
  transition:
  z-index: 10;
    opacity var(--anim-d) var(--anim-ease),
    transform var(--anim-d) var(--anim-ease);
}
.bootleg-popup.open .bootleg-size {
  opacity: 1;
  transform: translateY(0);
}
.bootleg-popup .bootleg-size:disabled,
.bootleg-popup .bootleg-size.out-of-stock {
  background: var(--gray);
  color: #666;
  cursor: not-allowed;
}

/*────────────────────────────────────────*/
/* 13. Product Item                       */
/*────────────────────────────────────────*/
.bootleg-item {
  position: relative;
}
.bootleg-image-container {
  aspect-ratio: 4/5;
  border: var(--border-w) solid var(--border-color) !important;
  overflow: hidden;
    position: relative;

}
.bootleg-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*────────────────────────────────────────*/
/* 14. Product Info – title+price תחת התמונה בשורה */
/*────────────────────────────────────────*/
.bootleg-info {
  display: flex;                            /* שורה יחידה */
  justify-content: space-between;           /* כותרת משמאל, מחיר מימין */
  align-items: center;                      /* יישור אנכי */
  width: 100%;                              /* יתפרס על כל רוחב הפריט */
  margin-top: 0px;           /* ריווח מעל */
  padding: 0 var(--gap-horizontal);         /* ריווח אופקי לפי משתנה */
  position: static;                         /* חוזר ל־flow רגיל מתחת לתמונה */
  background: transparent;                  /* מסיר כל רקע */
  /*border: var(--border-w) solid var(--border-color) !important;*/
      border-top-width: 0px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-top: none;
    border-color: var(--border-color);
  padding: 6px var(--gap-horizontal);
  font-family: var(--font-body);

}

/* שומר על הסגנון הקיים של כותרת ומחיר */
.bootleg-title {
  font-size: 2rem;
  line-height: 1.5rem;
  margin: 0;
  font-weight: 300;
 color: var(--black) !important;

}

.bootleg-price {
  font-size: 2rem;
  line-height: 1.5rem;
  margin: 0;
  font-weight: 300;

}

/*────────────────────────────────────────*/
/* 15. Spinner                            */
/*────────────────────────────────────────*/
.bootleg-spinner {
  border: 3px solid rgba(0,0,0,0.1);
  border-top: 3px solid var(--black);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin var(--anim-d) linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/*────────────────────────────────────────*/
/* 16. Toasts                             */
/*────────────────────────────────────────*/
.bootleg-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  background: var(--black);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 4px;
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
  z-index: 9999;
}
.bootleg-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.bootleg-toast.success { background: #28a745; }
.bootleg-toast.error   { background: #dc3545; }


/*────────────────────────────────────────*/
/* 18. Portal Scene                       */
/*────────────────────────────────────────*/
.bootleg-image-container {
  position: relative;
  overflow: hidden;
}

.bootleg-image-container .portal-scene {
  position: absolute !important;
  inset: 0 !important;          /* top/right/bottom/left: 0 */
  overflow: hidden !important;
}

/* bg ו-fg מכסים את כל ה־scene */
.bootleg-image-container .portal-scene .portal-bg,
.bootleg-image-container .portal-scene .portal-fg {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  animation: portalAutoMove 20s ease-in-out infinite;
}
.bootleg-image-container .portal-scene .portal-fg {
  animation-direction: reverse;
}

/* התמונות – מלאות, חתוכות במרכז, בלי כל transform קיים */
.bootleg-image-container .portal-scene img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.1);
  transform-origin: center center;
}

/* רק keyframes לאוטומטית – אופציונלי */
@keyframes portalAutoMove {
  0%   { transform: scale(1.1) translate(0,0); }
  25%  { transform: scale(1.12) translate(10px,-10px); }
  50%  { transform: scale(1.1) translate(-10px,10px); }
  75%  { transform: scale(1.13) translate(20px,5px); }
  100% { transform: scale(1.1) translate(0,0); }
}



/*────────────────────────────────────────*/
/* 19. Keyframes for Animations           */
/*────────────────────────────────────────*/
@keyframes fadeInUp    { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOutDown { from { opacity: 1; transform: translateY(0);  } to { opacity: 0; transform: translateY(20px); } }
@keyframes bounce-icon { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }


/*────────────────────────────────────────*/
/* Page Title – responsive clamp + full width */
/*────────────────────────────────────────*/

/* 1) Full-viewport width */
.page-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: clamp(5rem, 24vw, 30rem);
  font-family: var(--font-page-title);
  line-height: 1;
  font-weight: 300;
  white-space: nowrap;
  letter-spacing: -0.05em;
  /*margin-bottom: clamp(1rem, 4vw, 4rem);*/
}

/*────────────────────────────────────────*/
/* 8.x RTL support (אם דרוש)             */
/*────────────────────────────────────────*/
html[dir="rtl"] #dynamic-header {
  flex-direction: row-reverse;
}


/*────────────────────────────────────────*/
/* Mobile – Small Screens <480px         */
/*────────────────────────────────────────*/
@media (max-width: 479px) {
  :root {
    --border-w: 1px;
    --gap-horizontal: 4px;
    --gap-vertical: 6px;
    --gap-buttons: 2px;
    --gap-popup: 2px;
    --filter-top-offset: 48px;
  --adfy_woofc_base_text_font_size: 24px !important;
  --adfy_woofc_cart_product_title_font_size: 24px !important;
  --adfy_woofc_base_button_font_size: 24px !important;
  --adfy_woofc_font_family: 'Sapir Classic', sans-serif !important;
  }

/* 10.3 Filter Buttons */
.bootleg-filter {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-filter-btn);
  text-transform: uppercase;
  cursor: pointer;
  transition:
  transform var(--anim-d) var(--anim-ease),
  box-shadow var(--anim-d) var(--anim-ease);
  min-width: 100px;
  text-align: center;
  flex: 0 0 auto !important;
  padding: 2px 8px !important;
  font-size: 1.2rem !important;
  min-width: auto !important;
  border: var(--border-w) solid var(--border-color) !important;

}
.bootleg-filter.active {
  transform: rotate(3deg);
  box-shadow: 3px 3px 0 var(--border-color);
}
.bootleg-filter:not(.active):hover {
  background: var(--white);
 } 

  .bootleg-filter-bar {
    flex-wrap: nowrap;
    gap: var(--gap-horizontal);
  }


  .bootleg-static-buttons button,
  .bootleg-static-buttons a {
    font-size: 0.85rem;
    padding: 2px 10px !important;
    min-width: 20px;
    height: 33px;
  }

  .bootleg-popup .bootleg-size {
    width: 30px;
    height: 33px;
    font-size: 0.75rem;
  }

  .bootleg-info {
  display: flex;                            /* שורה יחידה */
  justify-content: space-between;           /* כותרת משמאל, מחיר מימין */
  align-items: center;                      /* יישור אנכי */
  width: 100%;                              /* יתפרס על כל רוחב הפריט */
  margin-top: 0px;           /* ריווח מעל */
  padding: 0 var(--gap-horizontal);         /* ריווח אופקי לפי משתנה */
  position: static;                         /* חוזר ל־flow רגיל מתחת לתמונה */
  background: transparent;                  /* מסיר כל רקע */
  border: var(--border-w) solid var(--border-color) !important;
  border-top: none; /* שומר על המשכיות חלקה מהתמונה */
  padding: 6px var(--gap-horizontal);
  font-family: var(--font-body);

}

/* שומר על הסגנון הקיים של כותרת ומחיר */
.bootleg-title {
  font-size: 1rem;
  line-height: 0.8rem;
  margin: 0;
  font-weight: 300;
}

.bootleg-price {
  font-size: 1rem;
  line-height: 0.8rem;
  margin: 0;
  font-weight: 300;

}

  
}

/*────────────────────────────────────────*/
/* Tablet – Medium Screens 768–1023px    */
/*────────────────────────────────────────*/
@media (min-width: 768px) and (max-width: 1023px) {

  .bootleg-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bootleg-filter {
    font-size: 1.4rem;
    padding: 6px 12px;
  }

  .bootleg-static-buttons button,
  .bootleg-static-buttons a {
    font-size: 0.85rem;
    padding: 4px 10px;
  }

}

/*────────────────────────────────────────*/
/* Mobile & Small Tablet - General <768px */
/*────────────────────────────────────────*/
@media (max-width: 768px) {
  .bootleg-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .bootleg-filter {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-filter-btn);
  text-transform: uppercase;
  cursor: pointer;
  transition:
  transform var(--anim-d) var(--anim-ease),
  box-shadow var(--anim-d) var(--anim-ease);
  min-width: 100px;
  text-align: center;
  flex: 0 0 auto !important;
  padding: 4px 12px !important;
  font-size: 2rem !important;
  min-width: auto !important;
  border: var(--border-w) solid var(--border-color) !important;
}  
}

/*────────────────────────────────────────*/
/* Page Title Responsiveness              */
/*────────────────────────────────────────*/
@media (max-width: 480px) {
  .page-title {
  display: block;
  max-width: 100vw;
  font-size: 25vw; /* מפתח: משנה לפי רוחב viewport */
  font-family: var(--page-title);
  line-height: 1;
  font-weight: 200;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin: var(--gap-vertical) 0 calc(var(--gap-vertical) * 1.5);
  letter-spacing: -0.05em;
}


  .bootleg-filter {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-filter-btn);
  text-transform: uppercase;
  cursor: pointer;
  transition:
  transform var(--anim-d) var(--anim-ease),
  box-shadow var(--anim-d) var(--anim-ease);
  min-width: 100px;
  text-align: center;
  flex: 0 0 auto !important;
  padding: 4px 12px !important;
  font-size: 1.2rem !important;
  min-width: auto !important;
  border: var(--border-w) solid var(--border-color) !important;
}  

  .bootleg-filter.active {
    transform: rotate(3deg);
    box-shadow: 2px 2px 0 var(--border-color);
  }

  .bootleg-filter-bar::-webkit-scrollbar {
    height: 6px;
  }

  .bootleg-filter-bar::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 0px;
  }

  .bootleg-filter-bar::-webkit-scrollbar-track {
    background: transparent;
  }
  }

  /* בעמוד מוצר – רק התמונה הראשונה תוצג */
.single-product .woocommerce-product-gallery__wrapper 
  .woocommerce-product-gallery__image:nth-child(n+2) {
    display: none !important;
}

/* רק התמונה הראשונה תישאר, כל שאר התמונות יוסתרו */
.single-product .woocommerce-product-gallery__image:nth-child(n+2) {
  display: none !important;
}

/* מסתירים טאבים, upsells ומוצרים קשורים */
.single-product .woocommerce-tabs,
.single-product .upsells.products,
.single-product .related.products {
  display: none !important;
}

:root {
  /* תוכל לכוונן כאן לפי הצורך */
  --fg-offset-y:   90px;
  --fg-rotation:   8deg;
  --bg-offset-x:  -20px;
  --bg-offset-y:  -90px;
  --bg-rotation:  -8deg;
  --scale-factor:  1.05;
  --dur:           0.4s;
  --ease:         ease-out;
}

/* 1. וידא שה-container תומך overflow */
.bootleg-image-container {
  position: relative;
  overflow: visible;
}

/* 2. הפורטל נשאר בתחתית */
.portal-scene {
  position: relative;
  z-index: 0;
}

/* 3. שכבת ה-PNGs מעל הפורטל */
.shirt-3d {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* 4. הגדרה בסיסית לכל תמונה – עכשיו היא תתפוס את רוב הרוחב/גובה */
.shirt-3d img {
  position: absolute;
  top: 50%; left: 50%;
  /* מלא כמעט את כל הקונטיינר */
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transition:
    transform var(--dur) var(--ease),
    opacity   var(--dur) var(--ease);
  backface-visibility: hidden;
}

/* 5. סדר ז-אינדקס */
.shirt-3d .front-of-shirt {
  z-index: 3;
  opacity: 1;
}
.shirt-3d .back-of-shirt {
  z-index: 2;
  opacity: 0;
}

/* 6. אפקט הובר על ה-PNGs בלבד */
.bootleg-image-container.has-back:hover .shirt-3d .front-of-shirt {
  transform:
    translate(
      calc(-50%),
      calc(-50% + var(--fg-offset-y))
    )
    rotateZ(var(--fg-rotation))
    scale(var(--scale-factor));
}

.bootleg-image-container.has-back:hover .shirt-3d .back-of-shirt {
  opacity: 1;
  transform:
    translate(
      calc(-50% + var(--bg-offset-x)),
      calc(-50% + var(--bg-offset-y))
    )
    rotateZ(var(--bg-rotation))
    scale(var(--scale-factor));
}

/* ------------------------------------ */
/* 1. הסתרת השכבה הסטטית של הפורטל    */
/* ------------------------------------ */
.portal-scene .portal-fg {
  display: none !important;
}

/* ------------------------------------ */
/* 2. וידוא שה-portal-bg נשאר בתחתית   */
/* ------------------------------------ */
.portal-scene .portal-bg {
  z-index: 0;
  position: relative;
}

/* ------------------------------------ */
/* 3. שכבת ה-PNGים מעל הפורטל         */
/* ------------------------------------ */
.shirt-3d {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* ------------------------------------ */
/* 4. תמונות החזית והגב – מלאות, ללא חיתוך */
/* ------------------------------------ */
.shirt-3d img {
  position: absolute;
  top:  50%; left:  50%;
  width:  100%;
  height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transition:
    transform var(--dur) var(--ease),
    opacity   var(--dur) var(--ease);
  backface-visibility: hidden;
}

/* ------------------------------------ */
/* 5. סדר ז-אינדקס ומצבי opacity התחלתיים */
/* ------------------------------------ */
.shirt-3d .front-of-shirt {
  z-index: 3;
  opacity: 1;
}
.shirt-3d .back-of-shirt {
  z-index: 2;
  opacity: 0;
}

/* ------------------------------------ */
/* 6. אפקט Hover על ה-PNG בלבד          */
/* ------------------------------------ */
.bootleg-image-container.has-back:hover .shirt-3d .front-of-shirt {
  transform:
    translate(
      calc(-50%),
      calc(-50% + var(--fg-offset-y))
    )
    rotateZ(var(--fg-rotation))
    scale(var(--scale-factor));
}

.bootleg-image-container.has-back:hover .shirt-3d .back-of-shirt {
  opacity: 1;
  transform:
    translate(
      calc(-50% + var(--bg-offset-x)),
      calc(-50% + var(--bg-offset-y))
    )
    rotateZ(var(--bg-rotation))
    scale(var(--scale-factor));
}


/* ברוחב עד 768px (טאבלט ומטה) */
@media (min-width: 1920px) {
   :root {
 --filter-top-offset:   100px; 
  }
  .bootleg-image-container {
    --fg-offset-y:   15vh;
    --bg-offset-x:  -15px;
    --bg-offset-y:  -15vh;
  }
  .bootleg-filter-wrapper {
  position: sticky;
  top: var(--filter-top-offset);
  }
}


/* ברוחב עד 768px (טאבלט ומטה) */
@media (max-width: 768px) {
     :root {
 --filter-top-offset:   80px; 
  }
  .bootleg-image-container {
    --fg-offset-y:   10vh;
    --bg-offset-x:  -15px;
    --bg-offset-y:  -10vh;
}
.bootleg-filter-wrapper {
  position: sticky;
  top: var(--filter-top-offset);
  }
  
  .menu-toggle svg {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
}



}

/* ברוחב עד 480px (טלפון) */
@media (max-width: 480px) {
     :root {
 --filter-top-offset:   55px; 
  }
  .bootleg-image-container {
    --fg-offset-y:   8vh;
    --bg-offset-x:  -10px;
    --bg-offset-y:  -8vh;
  }
  .bootleg-filter-wrapper {
  position: sticky;
  top: var(--filter-top-offset);
  }

  /*────────────────────────────────────────*/
/* 8.7 Menu Toggle (Hamburger)           */
/*────────────────────────────────────────*/
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
}
.menu-toggle svg {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
}


}

@media (min-width: 1600px) {
  .site-main .container { max-width: 1400px; }
}
@media (min-width: 2000px) {
  .site-main .container { max-width: 1800px; }
}

#site-footer {
  background-color: var(--header-bg);
  color: #fff;
  padding: 25px 20px;
  text-align: center;
  border-top: var(--border-w) solid var(--border-color) !important;

}



.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.footer-social a svg {
  fill: currentColor;
  transition: 0.3s;
}

.footer-social a:hover svg {
  transform: scale(1.2);
  color: #ccc;
}

.footer-text p {
  margin-top: 10px;
  font-size: 20px;
  opacity: 0.7;
  font-family: 'Atlas';
}



/* ברוחב עד 480px (טלפון) */
@media (max-width: 480px) {
  #site-footer {
  padding: 20px 15px;
  }

  .footer-text p {
  margin-top: 10px;
  font-size: 15px;
  opacity: 0.7;
}

  }




  .elementor-10 .elementor-element.elementor-element-7c79337 .elementor-heading-title {
    font-family: "Sapir", Sans;
    font-size: clamp(5rem, 18vw, 24rem);
    color: var(--border-color);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -3.6px;
    word-spacing: 0px;
  }


  .elementor-widget-heading .elementor-heading-title {
        color: var(--border-color);
/*  font-family: "Sapir", Sans;
    font-size: clamp(5rem, 24vw, 30rem);
    font-weight: 300;
    line-height: 15rem;
    letter-spacing: -3.6px;
    word-spacing: 0px;*/
  }

  .bootleg-faq {

    font-size: 23px;
    font-family: var(--font-page-title);
    line-height: 1;
    color: var(--border-color) !important;
    letter-spacing: 0em;
      overflow-wrap: break-word !important;   /* תעשה שבירה בתוך מילים */
  word-break: break-word !important;  
  }

  .elementor-widget-text-editor {
    color: var(--border-color) !important;
      overflow-wrap: break-word !important;   /* תעשה שבירה בתוך מילים */
  word-break: break-word !important;  


  }

  /* מוודא שכל ווידג'ט טקסט יישאר בתוך הקונטיינר */
.elementor-widget-text-editor .elementor-widget-container {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;  /* שבירה בתוך מילים ארוכות */
  word-break: break-word;
}

/* מוודא שה־Section/Column לא יזרוק תוכן החוצה */
.elementor-section,
.elementor-column {
  overflow: hidden;
}


.elementor-3262 .elementor-element.elementor-element-80fcc91 {
    --divider-border-style: solid;
    --divider-color: var(--header-bg) !important;
    --divider-border-width: 1px;
}

.elementor-widget-divider {


      --divider-border-style: solid;
    --divider-color: var(--header-bg) !important;
    --divider-border-width: 1px;
}

/* 1. סלקטור כללי - כל קישור חדש טאב */
.main-navigation a[target="_blank"]::after {
  content: "\2197\FE0E";         /* ↗︎ + VS15 כדי שהוא יישאר חץ טקסטואלי */
  margin-left: 0.35em;           /* ריווח מהטקסט */
  font-variant-emoji: text;      /* כופה גופן טקסטואלי על חצים */
  /* אופציונלי: גודל וצבע */
  color: inherit;
  font-size: 0.8em;
}

/* 2. (אלטרנטיבה) אם אתה רוצה שבמקום כל קישור חדש טאב,
   רק פריט מסוים בתפריט יקבל את החץ, תיתן לו CSS Class ב־Menus:
   למשל "new-tab" ואז: */
.main-navigation .menu-item.new-tab > a::after {
  content: "\2197\FE0E";
  margin-left: 0.35em;
  font-variant-emoji: text;
}



.elementor-3458 .elementor-element.elementor-element-19b2b4f .cart button, .elementor-3458 .elementor-element.elementor-element-19b2b4f .cart .button {
  font-family: var(--font-filter-btn) !important;
}


.woo-variation-swatches.wvs-show-label .variations td .woo-selected-variation-item-name, .woo-variation-swatches.wvs-show-label .variations td label, .woo-variation-swatches.wvs-show-label .variations th .woo-selected-variation-item-name, .woo-variation-swatches.wvs-show-label .variations th label
Specificity: (0,4,1) {
font-size: 36px !important;
}

@media (max-width: 1024px) {
    .elementor-3458 .elementor-element.elementor-element-19b2b4f .cart button, .elementor-3458 .elementor-element.elementor-element-19b2b4f .cart .button {

font-size: 36px !important;
}
}


.elementor-3458 .elementor-element.elementor-element-19b2b4f .cart button, .elementor-3458 .elementor-element.elementor-element-19b2b4f .cart .button {
font-size: 36px !important;

}


.elementor-3458 .elementor-element.elementor-element-495911b3 .elementor-heading-title {
color: var(--border-color) !important;

}
 

.elementor-widget-woocommerce-cart .woocommerce table.cart img {
  object-fit: contain !important;     /* ״תכיל״ את התמונה בשלמותה בתוך המיכל */
  object-position: center !important; 
  display: block !important;          /* תשתמש ב־block ולא ב־flex */
  width: auto !important;             /* רוחב אוטומטי כדי לשמור על הפרופורציות */
  max-width: 100% !important;         /* לא יצא מהתא שלו */
  height: auto !important;            /* גובה אוטומטי */
  max-height: 80px !important;     
}