/*────────────────────────────────────────*/
/* Root variables                         */
/*────────────────────────────────────────*/
:root {
  --hero-max-h:    100vh;
  --hero-min-h:    10vh;
  --logo-large-w:  48vw;
  --logo-small-w:  6vw;
  --trans-dur:     .4s;
  --trans-ease:    cubic-bezier(0.175,0.885,0.32,1.275);
}

/*────────────────────────────────────────*/
/* Header container                       */
/*────────────────────────────────────────*/
#dynamic-header {
  position:        fixed;
  inset:           0 0 auto 0;
  height:          var(--hero-max-h) !important;
  background:      var(--header-bg) !important;
  border-bottom:   var(--border-w) solid var(--border-color);
  z-index:         1000;
  overflow:        visible !important;
  transition:      height var(--trans-dur) var(--trans-ease);
}
#dynamic-header.shrink {
  height: var(--hero-min-h) !important;
}

/* Push content below header */
#site-content {
  padding-top: var(--hero-max-h) !important;
  transition:  padding-top var(--trans-dur) var(--trans-ease);
}
#dynamic-header.shrink + #site-content {
  padding-top: var(--hero-min-h) !important;
}

/*────────────────────────────────────────*/
/* Hero logo (absolute center)            */
/*────────────────────────────────────────*/
.hero-logo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}
.hero-logo svg.logo-svg {
  width:      var(--logo-large-w);
  height:     auto;
  line-height: 0;
  transition: width var(--trans-dur) var(--trans-ease);
}
#dynamic-header.shrink .hero-logo svg.logo-svg {
  width: var(--logo-small-w) !important;
}

/*────────────────────────────────────────*/
/* Header Inner – split left & right sides*/
/*────────────────────────────────────────*/
.header-left,
.header-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none; /* נראה רק ב-shrink */
  align-items: center;
  gap: var(--gap-buttons);
  z-index: 1002;
}
.header-left { left: 0rem; }
.header-right{ right:1rem; }

/* מציגים רק בעת shrink */
#dynamic-header.shrink .header-left,
#dynamic-header.shrink .header-right {
  display: flex !important;
}

/*────────────────────────────────────────*/
/* Cart Toggle (side-left)                */
/*────────────────────────────────────────*/
.header-left .cart-toggle {
  background: transparent;
  border:     none;
  padding:    0;
  cursor:     pointer;
}
.header-left .cart-toggle svg * {
  stroke: var(--header-fg) !important;
  fill:   var(--header-fg) !important;
}

.adfy_fc__woo-trigger-shortcode-button .icon svg {
height: 3rem;
width: 3rem;
}


/*────────────────────────────────────────*/
/* Cart-badge styling – השבתי כפי שהיה  */
/*────────────────────────────────────────*/
.adfy_fc__woo-trigger-shortcode-button .badge {
  align-items:      center;
  background-color: transparent !important;
  border:           0px solid var(--header-bg) !important;
  box-shadow:       0 0 0px rgba(0,0,0,0.1);
  border-radius:    0 !important;
  color:            var(--header-bg) !important;
  display:          inline-flex;
  font-size:        24px !important;
  height:           15px !important;
  width:            15px !important;
  justify-content:  center;
  line-height:      1;
  position:         relative !important;
  top:              -9px !important;
  right:            -35.5px !important;
  transition:       all 0.5s ease-in-out;
}

/*────────────────────────────────────────*/
/* 1. הסר ברירת־המחדל של הפדינג הכבד   */
/*────────────────────────────────────────*/
#site-content {
  /* בברירת־מחדל – אין פדינג */
  padding-top: 0 !important;
  transition:  padding-top var(--trans-dur) var(--trans-ease);
}

/*────────────────────────────────────────*/
/* 2. כשמתווסף .shrink – נדחף מתחת לכותרת המוקטנת */
/*────────────────────────────────────────*/
#dynamic-header.shrink + #site-content {
  padding-top: var(--hero-min-h) !important;
}

/* 1. העברת aside לגוף (body) – לא בתוך header-inner */
/*    ודא ש‐<aside id="offcanvas-menu"> נמצא *מחוץ* ל־.header-inner, או לפחות ש־.header-inner אין overflow:hidden. */

/* 2. מיקום ומעבר */
#offcanvas-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;     /* או כל רוחב שנוח לך */
  height: 100vh;
  background: var(--header-bg);
  color: var(--header-fg);
  box-shadow: -4px 0 12px rgba(0,0,0,0.2);
  transform: translateX(100%);       /* מתחבא מוצפן מימין */
  transition: transform 0.4s var(--trans-ease);
  z-index: 1001;
}

/* 3. מצב פתוח */
#offcanvas-menu.open {
  transform: translateX(0);
}

/* 4. Overlay */
#offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--trans-ease);
  z-index: 1000;
}
#offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}


/* 1. תסתיר את ה-SVG הישן */
.cart-toggle .fly-cart-btn svg {
  display: none !important;
}

/* 2. תגרום לכפתור להציג את האייקון החדש כרקע */
.cart-toggle .fly-cart-btn {
  position: relative;       /* כדי שה-::before יתיישב עליו */
  width: 3rem;
  height: 3rem;
  padding: 0;               /* תבטלי פדינג מיותר */
  background: none !important;
}

/* 3. תוסיף pseuo-element עם ה-SVG החדש */
.cart-toggle .fly-cart-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;    /* גודל האייקון הרצוי */
  height: 1.5rem;
  transform: translate(-50%, -50%);
  background: url('/wp-content/themes/hello-elementor-child/assets/cart.svg') no-repeat center/contain;
}

/* 4. תוודא שה-badge (המספר) עדיין מופיע מעל הכול */
.cart-toggle .fly-cart-btn .badge {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  /* השארי פה את שאר הסגנון שלך ל-badge */
}


/*────────────────────────────────────────*/
/* Responsive – General Adjustments       */
/*────────────────────────────────────────*/
@media (max-width: 1024px) {
  :root {
    --logo-large-w: 40vw !important;
    --logo-small-w: 8vw !important;
  --hero-max-h:    100vh;
  --hero-min-h:    8vh !important;
  }
}
@media (max-width: 768px) {
  :root {
    --logo-large-w: 60vw !important;
    --logo-small-w: 10vw !important;
      --hero-max-h:    100vh;
  --hero-min-h:    8vh !important;
  }

.adfy_fc__woo-trigger-shortcode-button .icon svg {
height: 1.7rem;
width: 1.7rem;
}
.adfy_fc__woo-trigger-shortcode-button .badge {
  align-items:      center;
  background-color: transparent !important;
  border:           0px solid var(--header-bg) !important;
  box-shadow:       0 0 0px rgba(0,0,0,0.1);
  border-radius:    0 !important;
  color:            var(--header-bg) !important;
  display:          inline-flex;
  font-size:        14px !important;
  height:           15px !important;
  width:            15px !important;
  justify-content:  center;
  line-height:      1;
  position:         relative !important;
  top:              -6px !important;
  right:            -25.5px !important;
  transition:       all 0.5s ease-in-out;
}

}
@media (max-width: 480px) {
  :root {
    --logo-large-w: 80vw !important;
    --logo-small-w: 15vw !important;
      --hero-max-h:    100vh;
  --hero-min-h:    8vh !important;
  }

.adfy_fc__woo-trigger-shortcode-button .icon svg {
height: 1.7rem;
width: 1.7rem;
}
.adfy_fc__woo-trigger-shortcode-button .badge {
  align-items:      center;
  background-color: transparent !important;
  border:           0px solid var(--header-bg) !important;
  box-shadow:       0 0 0px rgba(0,0,0,0.1);
  border-radius:    0 !important;
  color:            var(--header-bg) !important;
  display:          inline-flex;
  font-size:        14px !important;
  height:           15px !important;
  width:            15px !important;
  justify-content:  center;
  line-height:      1;
  position:         relative !important;
  top:              -6px !important;
  right:            -25.5px !important;
  transition:       all 0.5s ease-in-out;
}

}