/*─────────────────────────────────────────────────────────────
  0) Offset below WP Admin Bar (32 px) when logged in
─────────────────────────────────────────────────────────────*/
body.admin-bar .slim-header {
  top: 32px !important;
}

/*─────────────────────────────────────────────────────────────
  1) Slim slide-in header (desktop only)
─────────────────────────────────────────────────────────────*/
.slim-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  transform: translateY(-100%) !important;          /* start off-screen */
  transition: transform .35s ease-in-out !important;
  z-index: 9999;
  min-height: 60px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
}
body.show-slim .slim-header {
  transform: translateY(0) !important;              /* slide in */
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

/*─────────────────────────────────────────────────────────────
  2) Swap headers: visually hide PRIMARY during slim state
     (keeps height, so no page jump on iPad)
─────────────────────────────────────────────────────────────*/
.header-primary {                                    /* add fade support */
  transition: opacity .15s ease-in-out;
}
body.show-slim .header-primary {
  visibility: hidden !important;
  opacity: 0   !important;
  pointer-events: none !important;
}

/*─────────────────────────────────────────────────────────────
  3) Per-header cart-icon sizing via CSS vars
─────────────────────────────────────────────────────────────*/
.header-primary   { --cart-icon-size: 35px; }
.header-secondary { --cart-icon-size: 120px; }

/*─────────────────────────────────────────────────────────────
  4) Hide slim entirely on tablet & phone
─────────────────────────────────────────────────────────────*/
@media (max-width: 980px) {
  .slim-header { display:none !important; }
}

/*─────────────────────────────────────────────────────────────
  5) Show only the cart icon in the active header
─────────────────────────────────────────────────────────────*/
body:not(.show-slim) .header-secondary .custom-cart-icon {   /* page-top */
  display:none !important;
}
body.show-slim        .header-primary   .custom-cart-icon {  /* scrolled */
  display:none !important;
}
/*─────────────────────────────────────────────────────────────
  Force main header to show on tablets ≥ 768 px
  (overrides Divi’s et_pb_hidden_* classes)
─────────────────────────────────────────────────────────────*/
@media (min-width: 768px) {
  .header-primary.et_pb_hidden_phone,
  .header-primary.et_pb_hidden_tablet {
    display: block !important;      /* let it occupy space   */
    visibility: visible !important; /* make it visible       */
    opacity: 1 !important;          /* ensure fully opaque   */
    pointer-events: auto !important;
  }
}