/* ═══════════════════════════════════════════════════════════════
   IBRAHIM FASHION — Header
   Announcement bar, main header, nav, mega menu, mobile menu.
   Loaded after components.css.
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. ANNOUNCEMENT BAR
   ───────────────────────────────────────────────────────────── */
.if-announce {
  background: var(--if-charcoal);
  color: var(--if-champagne);
  font-family: var(--if-font-body);
  font-size: var(--if-fs-xs);
  letter-spacing: var(--if-track-wide);
  text-transform: uppercase;
  text-align: center;
  height: var(--if-announce-h);
  position: relative;
  overflow: hidden;
  z-index: calc(var(--if-z-header) + 1);
}

.if-announce__viewport {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.if-announce__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--if-s3);
  padding-inline: var(--if-s5);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--if-dur) var(--if-ease),
              transform var(--if-dur) var(--if-ease);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.if-announce__slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.if-announce a {
  color: var(--if-gold-soft);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--if-dur-fast) var(--if-ease);
}

.if-announce a:hover {
  color: var(--if-white);
}

.if-announce__controls {
  position: absolute;
  right: var(--if-gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}

.if-announce__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--if-r-pill);
  background: rgba(255, 255, 255, 0.3);
  transition: background var(--if-dur-fast) var(--if-ease),
              width var(--if-dur) var(--if-ease);
}

.if-announce__dot.is-active {
  background: var(--if-gold);
  width: 20px;
}

@media (max-width: 640px) {
  .if-announce {
    font-size: var(--if-fs-xxs);
    letter-spacing: 0.08em;
  }
}


/* ─────────────────────────────────────────────────────────────
   2. MAIN HEADER WRAPPER
   ───────────────────────────────────────────────────────────── */
.if-header {
  position: sticky;
  top: 0;
  z-index: var(--if-z-header);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--if-dur) var(--if-ease),
              box-shadow var(--if-dur) var(--if-ease);
}

.if-header.is-scrolled {
  border-bottom-color: var(--if-line);
  box-shadow: 0 1px 12px rgba(28, 27, 25, 0.04);
}

.if-header__inner {
  display: flex;
  align-items: center;
  gap: var(--if-s5);
  height: var(--if-header-h);
}


/* ─────────────────────────────────────────────────────────────
   3. LOGO
   ───────────────────────────────────────────────────────────── */
.if-logo {
  font-family: var(--if-font-display);
  font-size: 1.35rem;
  font-weight: var(--if-fw-medium);
  letter-spacing: var(--if-track-widest);
  text-transform: uppercase;
  color: var(--if-charcoal);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--if-dur-fast) var(--if-ease);
}

.if-logo:hover {
  opacity: 0.75;
  color: var(--if-charcoal);
}

.if-logo b,
.if-logo strong {
  color: var(--if-gold);
  font-weight: var(--if-fw-semi);
}

.if-logo img {
  max-height: 48px;
  width: auto;
}


/* ─────────────────────────────────────────────────────────────
   4. DESKTOP NAVIGATION
   ───────────────────────────────────────────────────────────── */
.if-nav {
  display: flex;
  align-items: center;
  gap: var(--if-s4);
  margin-inline: auto;
  height: 100%;
}

.if-nav__list {
  display: flex;
  align-items: center;
  gap: var(--if-s5);
  height: 100%;
}

.if-nav__item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.if-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--if-font-body);
  font-size: var(--if-fs-xs);
  font-weight: var(--if-fw-medium);
  letter-spacing: var(--if-track-wide);
  text-transform: uppercase;
  color: var(--if-ink);
  padding-block: 6px;
  position: relative;
  transition: color var(--if-dur-fast) var(--if-ease);
}

.if-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--if-gold);
  transition: width var(--if-dur) var(--if-ease);
}

.if-nav__link:hover,
.if-nav__link[aria-current="page"] {
  color: var(--if-charcoal);
}

.if-nav__link:hover::after,
.if-nav__link[aria-current="page"]::after {
  width: 100%;
}

/* Chevron for items with dropdown */
.if-nav__link--has-children::before {
  content: "";
  order: 2;
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--if-dur) var(--if-ease);
  margin-left: 2px;
}

.if-nav__item:hover .if-nav__link--has-children::before {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Sale link special color */
.if-nav__link--sale {
  color: var(--if-sale);
}


/* ─────────────────────────────────────────────────────────────
   5. MEGA MENU
   ───────────────────────────────────────────────────────────── */
.if-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: var(--if-z-dropdown);
  padding: var(--if-s6) var(--if-s7);
  background: var(--if-white);
  border: 1px solid var(--if-line);
  border-radius: var(--if-r-sm);
  box-shadow: var(--if-shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--if-dur) var(--if-ease),
              transform var(--if-dur) var(--if-ease),
              visibility var(--if-dur);
  min-width: 240px;
}

.if-nav__item:hover .if-mega,
.if-nav__item:focus-within .if-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Wide mega menu with columns */
.if-mega--wide {
  min-width: 720px;
}

/* Single-list mega (e.g. Shop categories) — hug content, no empty columns */
.if-mega__grid:only-child,
.if-mega__grid > .if-mega__list:only-child {
  display: block;
}
.if-mega__grid > .if-mega__list:only-child {
  min-width: 220px;
}
.if-mega--wide:has(> .if-mega__grid > .if-mega__list:only-child) {
  min-width: 0;
  width: max-content;
}

.if-mega__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--if-s6);
}

.if-mega__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.if-mega__col-title {
  font-family: var(--if-font-body);
  font-size: var(--if-fs-xxs);
  font-weight: var(--if-fw-semi);
  letter-spacing: var(--if-track-widest);
  text-transform: uppercase;
  color: var(--if-gold-deep);
  margin-bottom: var(--if-s4);
  padding-bottom: var(--if-s3);
  border-bottom: 1px solid var(--if-line-soft);
}

.if-mega__list {
  display: grid;
  gap: var(--if-s3);
}

.if-mega__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--if-s2);
  font-size: var(--if-fs-sm);
  color: var(--if-body);
  transition: color var(--if-dur-fast) var(--if-ease),
              padding-left var(--if-dur-fast) var(--if-ease);
  position: relative;
}

.if-mega__list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--if-gold);
  transform: translateY(-50%);
  transition: width var(--if-dur-fast) var(--if-ease);
}

.if-mega__list a:hover {
  color: var(--if-gold-deep);
  padding-left: var(--if-s4);
}

.if-mega__list a:hover::before {
  width: var(--if-s3);
}

/* Featured image block in mega menu */
.if-mega__promo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--if-r-sm);
  overflow: hidden;
  background: linear-gradient(160deg, var(--if-linen), var(--if-champagne));
}

.if-mega__promo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.if-mega__promo-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--if-s4);
  background: linear-gradient(to top, rgba(28, 27, 25, 0.8), transparent);
  color: var(--if-white);
}

.if-mega__promo-body h4 {
  color: var(--if-white);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.if-mega__promo-body a {
  font-size: var(--if-fs-xs);
  letter-spacing: var(--if-track-wide);
  text-transform: uppercase;
  color: var(--if-gold-soft);
}


/* ─────────────────────────────────────────────────────────────
   6. HEADER TOOLS (search, account, wishlist, cart)
   ───────────────────────────────────────────────────────────── */
.if-tools {
  display: flex;
  align-items: center;
  gap: var(--if-s2);
  margin-left: auto;
  flex-shrink: 0;
}

.if-tools .if-icon-btn {
  position: relative;
}

/* Cart badge */
.if-cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--if-r-pill);
  background: var(--if-gold);
  color: var(--if-white);
  font-family: var(--if-font-body);
  font-size: 0.68rem;
  font-weight: var(--if-fw-semi);
  display: grid;
  place-items: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform: scale(0);
  transition: transform var(--if-dur) var(--if-ease-spring);
}

.if-cart-count.is-visible {
  transform: scale(1);
}

.if-cart-count.is-empty {
  display: none;
}

/* Wishlist count */
.if-wish-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--if-r-pill);
  background: var(--if-charcoal);
  color: var(--if-white);
  font-size: 0.68rem;
  font-weight: var(--if-fw-semi);
  display: grid;
  place-items: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.if-wish-count.is-empty {
  display: none;
}


/* ─────────────────────────────────────────────────────────────
   7. SEARCH OVERLAY
   ───────────────────────────────────────────────────────────── */
.if-search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--if-z-drawer);
  background: rgba(28, 27, 25, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--if-dur) var(--if-ease),
              visibility var(--if-dur);
}

.if-search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.if-search-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--if-white);
  padding: var(--if-s7) var(--if-gutter);
  transform: translateY(-100%);
  transition: transform var(--if-dur-slow) var(--if-ease);
  max-height: 100vh;
  overflow-y: auto;
}

.if-search-overlay.is-open .if-search-panel {
  transform: translateY(0);
}

.if-search-panel__inner {
  max-width: var(--if-container-narrow);
  margin-inline: auto;
}

.if-search-panel__close {
  position: absolute;
  top: var(--if-s5);
  right: var(--if-gutter);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--if-r-pill);
  color: var(--if-ink);
  transition: background var(--if-dur-fast) var(--if-ease);
}

.if-search-panel__close:hover {
  background: var(--if-gold-wash);
  color: var(--if-gold-deep);
}

.if-search-form {
  display: flex;
  align-items: center;
  gap: var(--if-s4);
  padding-block: var(--if-s5);
  border-bottom: 2px solid var(--if-charcoal);
}

.if-search-form svg {
  width: 24px;
  height: 24px;
  color: var(--if-gold-deep);
  flex-shrink: 0;
}

.if-search-form input {
  flex: 1;
  padding: 8px 0;
  font-family: var(--if-font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: var(--if-fw-regular);
  color: var(--if-charcoal);
  background: transparent;
  border: 0;
  letter-spacing: -0.01em;
}

.if-search-form input::placeholder {
  color: var(--if-faint);
  font-style: italic;
}

.if-search-form input:focus {
  outline: none;
  box-shadow: none;
}

.if-search-suggestions {
  padding-top: var(--if-s5);
  display: grid;
  gap: var(--if-s6);
}

.if-search-suggestions__group h4 {
  font-family: var(--if-font-body);
  font-size: var(--if-fs-xxs);
  font-weight: var(--if-fw-semi);
  letter-spacing: var(--if-track-widest);
  text-transform: uppercase;
  color: var(--if-muted);
  margin-bottom: var(--if-s3);
}

.if-search-suggestions__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--if-s2);
}

/* Search result items (live) */
.if-search-results {
  display: grid;
  gap: var(--if-s2);
  padding-top: var(--if-s5);
  max-height: 60vh;
  overflow-y: auto;
}

.if-search-result {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--if-s4);
  align-items: center;
  padding: var(--if-s3);
  border-radius: var(--if-r-sm);
  transition: background var(--if-dur-fast) var(--if-ease);
}

.if-search-result:hover {
  background: var(--if-gold-wash);
}

.if-search-result__img {
  width: 56px;
  height: 74px;
  border-radius: var(--if-r-sm);
  object-fit: cover;
  background: var(--if-linen);
}

.if-search-result__title {
  font-family: var(--if-font-display);
  font-size: 1.05rem;
  color: var(--if-charcoal);
  line-height: var(--if-lh-snug);
}

.if-search-result__meta {
  font-size: var(--if-fs-xs);
  color: var(--if-muted);
  margin-top: 2px;
}

.if-search-result__price {
  font-size: var(--if-fs-sm);
  font-weight: var(--if-fw-medium);
  color: var(--if-charcoal);
  font-variant-numeric: tabular-nums;
}

.if-search-empty {
  padding-block: var(--if-s8);
  text-align: center;
  color: var(--if-muted);
}

.if-search-empty h4 {
  color: var(--if-charcoal);
  margin-bottom: var(--if-s2);
}


/* ─────────────────────────────────────────────────────────────
   8. MOBILE HEADER
   ───────────────────────────────────────────────────────────── */
.if-burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin-left: -8px;
  align-items: center;
  justify-content: center;
  color: var(--if-ink);
  border-radius: var(--if-r-pill);
  transition: background var(--if-dur-fast) var(--if-ease);
}

.if-burger:hover {
  background: var(--if-gold-wash);
}

.if-burger svg {
  width: 22px;
  height: 22px;
}


/* ─────────────────────────────────────────────────────────────
   9. MOBILE DRAWER MENU
   ───────────────────────────────────────────────────────────── */
.if-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--if-z-drawer);
  pointer-events: none;
}

.if-mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 25, 0.5);
  opacity: 0;
  transition: opacity var(--if-dur) var(--if-ease);
}

.if-mobile-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(400px, 100%);
  background: var(--if-white);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--if-dur-slow) var(--if-ease);
  overflow: hidden;
}

.if-mobile-menu.is-open {
  pointer-events: auto;
}

.if-mobile-menu.is-open .if-mobile-menu__overlay {
  opacity: 1;
}

.if-mobile-menu.is-open .if-mobile-menu__panel {
  transform: translateX(0);
}

.if-mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--if-s5);
  border-bottom: 1px solid var(--if-line);
}

.if-mobile-menu__head .if-logo {
  font-size: 1.15rem;
}

.if-mobile-menu__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--if-r-pill);
  color: var(--if-ink);
}

.if-mobile-menu__close:hover {
  background: var(--if-gold-wash);
}

.if-mobile-menu__body {
  flex: 1;
  overflow-y: auto;
  padding-block: var(--if-s3);
}

.if-mobile-menu__search {
  padding: var(--if-s4) var(--if-s5);
  border-bottom: 1px solid var(--if-line-soft);
}

.if-mobile-menu__search-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--if-s3);
  padding: 12px 16px;
  background: var(--if-ivory);
  border: 1px solid var(--if-line);
  border-radius: var(--if-r-sm);
  font-size: var(--if-fs-sm);
  color: var(--if-muted);
  text-align: left;
}

.if-mobile-menu__search-btn svg {
  width: 18px;
  height: 18px;
}

/* Mobile nav items */
.if-mobile-nav {
  padding-inline: var(--if-s5);
}

.if-mobile-nav__item {
  border-bottom: 1px solid var(--if-line-soft);
}

.if-mobile-nav__trigger,
.if-mobile-nav__link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--if-s3);
  padding: var(--if-s4) 0;
  font-family: var(--if-font-body);
  font-size: var(--if-fs-body);
  font-weight: var(--if-fw-medium);
  letter-spacing: 0.02em;
  color: var(--if-charcoal);
  text-align: left;
  text-transform: none;
}

.if-mobile-nav__chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--if-dur) var(--if-ease);
  margin-right: 4px;
}

.if-mobile-nav__trigger[aria-expanded="true"] .if-mobile-nav__chev {
  transform: rotate(45deg);
}

.if-mobile-nav__sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--if-dur-slow) var(--if-ease);
  padding-left: var(--if-s4);
}

.if-mobile-nav__trigger[aria-expanded="true"] + .if-mobile-nav__sub {
  max-height: 500px;
}

.if-mobile-nav__sub a {
  display: block;
  padding: var(--if-s3) 0;
  font-size: var(--if-fs-sm);
  color: var(--if-body);
}

.if-mobile-nav__sub a:hover {
  color: var(--if-gold-deep);
}

.if-mobile-menu__foot {
  padding: var(--if-s5);
  border-top: 1px solid var(--if-line);
  background: var(--if-ivory);
  display: grid;
  gap: var(--if-s3);
}

.if-mobile-menu__foot .if-btn {
  width: 100%;
}


/* ─────────────────────────────────────────────────────────────
   10. MOBILE STICKY BOTTOM NAV
   ───────────────────────────────────────────────────────────── */
.if-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--if-z-header);
  background: var(--if-white);
  border-top: 1px solid var(--if-line);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 12px rgba(28, 27, 25, 0.04);
}

.if-bottom-nav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.if-bottom-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--if-muted);
  transition: color var(--if-dur-fast) var(--if-ease);
  position: relative;
}

.if-bottom-nav__link svg {
  width: 20px;
  height: 20px;
}

.if-bottom-nav__link.is-active,
.if-bottom-nav__link:hover {
  color: var(--if-gold-deep);
}

.if-bottom-nav__link .if-cart-count {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
}


/* ─────────────────────────────────────────────────────────────
   11. RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {

  .if-nav__list {
    gap: var(--if-s4);
  }

  .if-nav__link {
    font-size: 0.72rem;
  }
}

@media (max-width: 1023px) {

  .if-header__inner {
    height: var(--if-header-h-mobile);
    gap: var(--if-s3);
  }

  .if-burger {
    display: inline-flex;
  }

  .if-nav {
    display: none;
  }

  .if-logo {
    font-size: 1.1rem;
    letter-spacing: 0.18em;
  }

  .if-tools .if-icon-btn {
    width: 44px;
    height: 44px;
  }

  .if-tools .if-icon-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Hide some tools on mobile — they live in the drawer */
  .if-tools__hide-mobile {
    display: none;
  }

  /* Show sticky bottom nav */
  .if-bottom-nav {
    display: block;
  }

  /* Add space below body for bottom nav */
  body {
    padding-bottom: 62px;
  }

  /* Bottom nav visible only on actual mobile shopping pages */
  body:not(.if-shop-page):not(.if-single-product):not(.woocommerce-cart):not(.woocommerce-checkout) .if-bottom-nav {
    display: none;
  }

  body:not(.if-shop-page):not(.if-single-product):not(.woocommerce-cart):not(.woocommerce-checkout) {
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {

  .if-announce__controls {
    display: none;
  }

  .if-search-panel {
    padding: var(--if-s6) var(--if-s4);
  }

  .if-search-panel__close {
    top: var(--if-s3);
    right: var(--if-s3);
  }

  .if-search-form input {
    font-size: 1.1rem;
  }

  .if-search-result {
    grid-template-columns: 48px 1fr auto;
    gap: var(--if-s3);
  }

  .if-search-result__img {
    width: 48px;
    height: 64px;
  }

  .if-search-result__title {
    font-size: 0.95rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   12. HIDE HORIZONTAL SCROLL — safety net
   ───────────────────────────────────────────────────────────── */
.if-header,
.if-announce,
.if-mobile-menu {
  max-width: 100vw;
  overflow-x: clip;
}

/* ═══════════════════════════════════════════════════════════════
   MINI CART DRAWER
   ═══════════════════════════════════════════════════════════════ */
.if-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 27, 25, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 900;
}

.if-cart-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.if-mini-cart {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(440px, 100%);
  background: #fff;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: -8px 0 40px rgba(28, 27, 25, 0.15);
}

.if-mini-cart.is-open {
  transform: translateX(0);
}

.if-mini-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--if-line);
  flex-shrink: 0;
}

.if-mini-cart__title {
  font-family: var(--if-font-display);
  font-size: 1.35rem;
  margin: 0;
  color: var(--if-charcoal);
}

.if-mini-cart__count {
  font-family: var(--if-font-body);
  font-size: 0.9rem;
  color: var(--if-muted);
  font-weight: 400;
}

.if-mini-cart__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--if-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.if-mini-cart__close:hover {
  background: var(--if-gold-wash);
}

.if-mini-cart__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.if-mini-cart__body .cart_list,
.if-mini-cart__body .woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}

.if-mini-cart__body .woocommerce-mini-cart-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--if-line);
  position: relative;
}

.if-mini-cart__body .woocommerce-mini-cart-item img {
  width: 64px;
  height: 85px;
  object-fit: cover;
  border-radius: 2px;
}

.if-mini-cart__body .woocommerce-mini-cart-item a {
  font-family: var(--if-font-display);
  font-size: 1rem;
  color: var(--if-charcoal);
  display: block;
  margin-bottom: 4px;
  text-decoration: none;
}

.if-mini-cart__body .woocommerce-mini-cart-item .quantity {
  font-size: 0.85rem;
  color: var(--if-muted);
  display: block;
  margin-top: 4px;
}

.if-mini-cart__body .woocommerce-mini-cart-item .remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--if-muted);
  font-size: 1.2rem;
  border-radius: 999px;
  text-decoration: none;
}

.if-mini-cart__body .woocommerce-mini-cart-item .remove:hover {
  background: #9B2C2C;
  color: #fff;
}

.if-mini-cart__body .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--if-line);
  margin-top: 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--if-charcoal);
}

.if-mini-cart__body .woocommerce-mini-cart__buttons {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.if-mini-cart__body .woocommerce-mini-cart__buttons a {
  display: block;
  padding: 14px 20px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.if-mini-cart__body .woocommerce-mini-cart__buttons a.button {
  background: var(--if-charcoal);
  color: #fff;
  border: 1px solid var(--if-charcoal);
}

.if-mini-cart__body .woocommerce-mini-cart__buttons a.button:hover {
  background: var(--if-gold);
  border-color: var(--if-gold);
}

.if-mini-cart__body .woocommerce-mini-cart__buttons a.button.checkout {
  background: var(--if-gold);
  border-color: var(--if-gold);
}

.if-mini-cart__body .woocommerce-mini-cart__buttons a.button.checkout:hover {
  background: var(--if-gold-deep);
  border-color: var(--if-gold-deep);
}

.if-mini-cart__body .woocommerce-mini-cart__empty-message {
  text-align: center;
  padding: 40px 16px;
  color: var(--if-muted);
  font-size: 1rem;
}


/* ═══════════════════════════════════════════════════════════════
   LOGO FITTING - always fits in its slot
   Any ratio (square, 3:4, wide, tall) stays inside bounds.
   ═══════════════════════════════════════════════════════════════ */

/* Logo wrapper — fixed slot, centers the image */
.if-logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 48px;
  max-width: 260px;
  overflow: hidden;
  flex-shrink: 0;
  line-height: 0;
}

/* Custom logo link (WordPress wrapper) */
.if-logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  max-width: 100%;
  line-height: 0;
}

/* The image itself — fits in the slot regardless of ratio */
.if-logo img,
.if-logo .custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  object-position: center left;
}

/* Keep text logo behavior when no image is set */
.if-logo:not(:has(img)) {
  height: auto;
  max-width: none;
}

/* ── Footer logo — same idea, bigger slot ── */
.if-footer__logo img,
.if-footer__logo .custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 60px;
  object-fit: contain;
  object-position: center left;
}

/* ── Mobile menu logo ── */
.if-mobile-menu__head .if-logo {
  height: 36px;
  max-width: 200px;
}

.if-mobile-menu__head .if-logo img,
.if-mobile-menu__head .if-logo .custom-logo {
  max-height: 36px;
}

/* ── Preloader logo ── */
.if-preloader__logo img,
.if-preloader__logo .custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 48px;
  object-fit: contain;
}

/* ── Responsive tweaks ── */
@media (max-width: 1023px) {
  .if-logo {
    height: 40px;
    max-width: 200px;
  }
  .if-logo img,
  .if-logo .custom-logo {
    max-height: 40px;
  }
}

@media (max-width: 640px) {
  .if-logo {
    height: 36px;
    max-width: 160px;
  }
  .if-logo img,
  .if-logo .custom-logo {
    max-height: 36px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LOGO - HARD CONSTRAINT (fix for oversized logo)
   Uses !important to override everything.
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper */
.if-header .if-logo {
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
  max-height: 48px !important;
  max-width: 240px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The custom-logo-link anchor generated by WordPress */
.if-header .if-logo .custom-logo-link {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  max-height: 48px !important;
  max-width: 240px !important;
  overflow: hidden !important;
  line-height: 0 !important;
  text-decoration: none !important;
}

/* The image itself — force size, preserve ratio */
.if-header .if-logo img,
.if-header .if-logo .custom-logo,
.if-header .if-logo .custom-logo-link img {
  display: block !important;
  height: auto !important;
  width: auto !important;
  max-height: 48px !important;
  max-width: 240px !important;
  object-fit: contain !important;
  object-position: center left !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Text logo variant — keep as-is */
.if-header .if-logo--text {
  height: auto !important;
  max-height: none !important;
  max-width: none !important;
  display: inline-flex !important;
}

/* Prevent the header from stretching */
.if-header__inner {
  height: var(--if-header-h, 72px) !important;
  max-height: var(--if-header-h, 72px) !important;
  overflow: visible !important;
  align-items: center !important;
}

/* ── Mobile ── */
@media (max-width: 1023px) {
  .if-header .if-logo,
  .if-header .if-logo .custom-logo-link,
  .if-header .if-logo img,
  .if-header .if-logo .custom-logo {
    max-height: 36px !important;
    max-width: 160px !important;
  }

  .if-header .if-logo {
    height: 36px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LOGO - BIGGER SIZE (override previous constraint)
   ═══════════════════════════════════════════════════════════════ */

/* Header height increase to fit bigger logo */
.if-header__inner {
  height: 88px !important;
  max-height: 88px !important;
}

/* Logo wrapper */
.if-header .if-logo {
  height: 64px !important;
  max-height: 64px !important;
  max-width: 320px !important;
}

.if-header .if-logo .custom-logo-link {
  height: 100% !important;
  max-height: 64px !important;
  max-width: 320px !important;
}

.if-header .if-logo img,
.if-header .if-logo .custom-logo,
.if-header .if-logo .custom-logo-link img {
  max-height: 64px !important;
  max-width: 320px !important;
  width: auto !important;
  height: auto !important;
}

/* Adjust header spacing for taller bar */
.if-header__inner {
  gap: 32px !important;
}

/* Mobile — still bigger than before but proportional */
@media (max-width: 1023px) {
  .if-header__inner {
    height: 64px !important;
    max-height: 64px !important;
  }

  .if-header .if-logo,
  .if-header .if-logo .custom-logo-link {
    height: 44px !important;
    max-height: 44px !important;
    max-width: 200px !important;
  }

  .if-header .if-logo img,
  .if-header .if-logo .custom-logo {
    max-height: 44px !important;
    max-width: 200px !important;
  }
}


/* LOGO even bigger */
.if-header__inner {
  height: 104px !important;
  max-height: 104px !important;
}
.if-header .if-logo,
.if-header .if-logo .custom-logo-link,
.if-header .if-logo img,
.if-header .if-logo .custom-logo {
  height: 80px !important;
  max-height: 80px !important;
  max-width: 400px !important;
}


/* ═══════════════════════════════════════════════════════════════
   LOGO - 2X SIZE (128px height, header 150px)
   ═══════════════════════════════════════════════════════════════ */

.if-header__inner {
  height: 150px !important;
  max-height: 150px !important;
  gap: 40px !important;
}

.if-header .if-logo,
.if-header .if-logo .custom-logo-link {
  height: 128px !important;
  max-height: 128px !important;
  max-width: 640px !important;
  overflow: visible !important;
}

.if-header .if-logo img,
.if-header .if-logo .custom-logo,
.if-header .if-logo .custom-logo-link img {
  max-height: 128px !important;
  max-width: 640px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Navigation vertical alignment */
.if-header .if-nav {
  height: 100% !important;
}

/* Scroll pe header thoda chhota */
.if-header.is-scrolled .if-header__inner {
  height: 100px !important;
  max-height: 100px !important;
  transition: height 0.35s ease !important;
}

.if-header.is-scrolled .if-logo,
.if-header.is-scrolled .if-logo .custom-logo-link {
  height: 80px !important;
  max-height: 80px !important;
}

.if-header.is-scrolled .if-logo img,
.if-header.is-scrolled .if-logo .custom-logo {
  max-height: 80px !important;
}

.if-header__inner {
  transition: height 0.35s ease !important;
}
.if-header .if-logo,
.if-header .if-logo .custom-logo-link,
.if-header .if-logo img,
.if-header .if-logo .custom-logo {
  transition: max-height 0.35s ease !important;
}

/* Mobile — bara lakin proportional */
@media (max-width: 1023px) {
  .if-header__inner {
    height: 90px !important;
    max-height: 90px !important;
  }

  .if-header .if-logo,
  .if-header .if-logo .custom-logo-link {
    height: 64px !important;
    max-height: 64px !important;
    max-width: 280px !important;
  }

  .if-header .if-logo img,
  .if-header .if-logo .custom-logo {
    max-height: 64px !important;
    max-width: 280px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LOGO - 50% BIGGER (192px height, header 225px)
   ═══════════════════════════════════════════════════════════════ */

.if-header__inner {
  height: 225px !important;
  max-height: 225px !important;
  gap: 48px !important;
}

.if-header .if-logo,
.if-header .if-logo .custom-logo-link {
  height: 192px !important;
  max-height: 192px !important;
  max-width: 900px !important;
  overflow: visible !important;
}

.if-header .if-logo img,
.if-header .if-logo .custom-logo,
.if-header .if-logo .custom-logo-link img {
  max-height: 192px !important;
  max-width: 900px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Nav needs more breathing room at this size */
.if-nav__list {
  gap: 28px !important;
}

.if-nav__link {
  font-size: 0.78rem !important;
}

/* Scroll pe chhota */
.if-header.is-scrolled .if-header__inner {
  height: 130px !important;
  max-height: 130px !important;
}

.if-header.is-scrolled .if-logo,
.if-header.is-scrolled .if-logo .custom-logo-link {
  height: 100px !important;
  max-height: 100px !important;
}

.if-header.is-scrolled .if-logo img,
.if-header.is-scrolled .if-logo .custom-logo {
  max-height: 100px !important;
}

/* Mobile — proportional, still big */
@media (max-width: 1023px) {
  .if-header__inner {
    height: 110px !important;
    max-height: 110px !important;
  }

  .if-header .if-logo,
  .if-header .if-logo .custom-logo-link {
    height: 80px !important;
    max-height: 80px !important;
    max-width: 320px !important;
  }

  .if-header .if-logo img,
  .if-header .if-logo .custom-logo {
    max-height: 80px !important;
    max-width: 320px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LOGO - FORCE UPSCALE (fills 192px height regardless of native size)
   ═══════════════════════════════════════════════════════════════ */

.if-header .if-logo img,
.if-header .if-logo .custom-logo,
.if-header .if-logo .custom-logo-link img {
  height: 192px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
}

/* Wrapper ko bhi accommodate karna hoga */
.if-header .if-logo,
.if-header .if-logo .custom-logo-link {
  height: 192px !important;
  max-height: none !important;
  max-width: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
}

/* Scroll pe chhota */
.if-header.is-scrolled .if-logo img,
.if-header.is-scrolled .if-logo .custom-logo {
  height: 100px !important;
}

.if-header.is-scrolled .if-logo,
.if-header.is-scrolled .if-logo .custom-logo-link {
  height: 100px !important;
}

/* Mobile */
@media (max-width: 1023px) {
  .if-header .if-logo img,
  .if-header .if-logo .custom-logo {
    height: 80px !important;
  }

  .if-header .if-logo,
  .if-header .if-logo .custom-logo-link {
    height: 80px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LOGO - 70% BIGGER, HEADER BAR SAME HEIGHT
   Logo floats over/under header. Menu bar unchanged.
   ═══════════════════════════════════════════════════════════════ */

/* Header bar height — SAME as before (no change) */
.if-header__inner {
  height: 225px !important;
  max-height: 225px !important;
  overflow: visible !important;
  position: relative !important;
}

/* Logo wrapper — allow overflow, center vertically */
.if-header .if-logo,
.if-header .if-logo .custom-logo-link {
  height: 326px !important;
  max-height: none !important;
  max-width: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 5 !important;
  margin-block: -50px !important; /* centers overflow nicely */
}

/* The image — force 70% bigger */
.if-header .if-logo img,
.if-header .if-logo .custom-logo,
.if-header .if-logo .custom-logo-link img {
  height: 326px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08)) !important;
}

/* Menu bar and tools stay in normal position */
.if-header .if-nav,
.if-header .if-tools {
  position: relative !important;
  z-index: 6 !important;
}

/* Header overflow visible so logo shows through */
.if-header {
  overflow: visible !important;
}

/* Scrolled state — logo shrinks */
.if-header.is-scrolled .if-header__inner {
  height: 100px !important;
  max-height: 100px !important;
}

.if-header.is-scrolled .if-logo,
.if-header.is-scrolled .if-logo .custom-logo-link {
  height: 100px !important;
  margin-block: 0 !important;
}

.if-header.is-scrolled .if-logo img,
.if-header.is-scrolled .if-logo .custom-logo {
  height: 100px !important;
  filter: none !important;
}

/* Mobile — proportional */
@media (max-width: 1023px) {
  .if-header__inner {
    height: 90px !important;
    max-height: 90px !important;
  }

  .if-header .if-logo,
  .if-header .if-logo .custom-logo-link {
    height: 120px !important;
    margin-block: -15px !important;
  }

  .if-header .if-logo img,
  .if-header .if-logo .custom-logo {
    height: 120px !important;
  }

  .if-header.is-scrolled .if-header__inner {
    height: 60px !important;
  }

  .if-header.is-scrolled .if-logo,
  .if-header.is-scrolled .if-logo .custom-logo-link,
  .if-header.is-scrolled .if-logo img,
  .if-header.is-scrolled .if-logo .custom-logo {
    height: 60px !important;
    margin-block: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LOGO - FINAL CLEAN RESET
   Overrides every prior logo rule. No blinking, no duplicates.
   ═══════════════════════════════════════════════════════════════ */

/* Kill ALL transitions/animations on logo elements */
.if-header .if-logo,
.if-header .if-logo *,
.if-header .if-logo img,
.if-header .if-logo .custom-logo,
.if-header .if-logo .custom-logo-link {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
}

/* Single source of truth — wrapper */
.if-header .if-logo,
.if-header .if-logo .custom-logo-link {
  display: flex !important;
  align-items: center !important;
  height: 220px !important;
  max-height: 220px !important;
  max-width: 700px !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 5 !important;
  background: transparent !important;
}

/* Single image — force size, no doubling */
.if-header .if-logo img,
.if-header .if-logo .custom-logo,
.if-header .if-logo .custom-logo-link img {
  display: block !important;
  height: 220px !important;
  width: auto !important;
  max-height: 220px !important;
  max-width: 700px !important;
  object-fit: contain !important;
  object-position: center left !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Hide any duplicate/secondary logo that WordPress may render */
.if-header .if-logo .custom-logo-link + .custom-logo-link,
.if-header .if-logo .custom-logo + .custom-logo,
.if-header .if-logo img + img {
  display: none !important;
}

/* Header bar — stable height */
.if-header__inner {
  height: 225px !important;
  max-height: 225px !important;
  overflow: visible !important;
  align-items: center !important;
}

/* Scroll state — logo shrinks smoothly but we keep it simple */
.if-header.is-scrolled .if-header__inner {
  height: 110px !important;
  max-height: 110px !important;
}

.if-header.is-scrolled .if-logo,
.if-header.is-scrolled .if-logo .custom-logo-link,
.if-header.is-scrolled .if-logo img,
.if-header.is-scrolled .if-logo .custom-logo {
  height: 90px !important;
  max-height: 90px !important;
}

/* Mobile */
@media (max-width: 1023px) {
  .if-header__inner {
    height: 90px !important;
    max-height: 90px !important;
  }

  .if-header .if-logo,
  .if-header .if-logo .custom-logo-link,
  .if-header .if-logo img,
  .if-header .if-logo .custom-logo {
    height: 70px !important;
    max-height: 70px !important;
    max-width: 220px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HEADER - SLIM + STATIC (final)
   Narrow bar, no sticky. Content below shows properly.
   ═══════════════════════════════════════════════════════════════ */

/* Static — scrolls away with page */
.if-header {
  position: static !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--if-line) !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Slim inner bar */
.if-header__inner {
  height: 72px !important;
  max-height: 72px !important;
  min-height: 72px !important;
  overflow: visible !important;
  align-items: center !important;
  gap: 32px !important;
}

/* Logo — fits the slim bar, no overflow, no animation */
.if-header .if-logo,
.if-header .if-logo .custom-logo-link {
  display: flex !important;
  align-items: center !important;
  height: 56px !important;
  max-height: 56px !important;
  min-height: 56px !important;
  max-width: 260px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

.if-header .if-logo img,
.if-header .if-logo .custom-logo,
.if-header .if-logo .custom-logo-link img {
  display: block !important;
  height: 56px !important;
  width: auto !important;
  max-height: 56px !important;
  max-width: 260px !important;
  object-fit: contain !important;
  object-position: center left !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
}

/* Nav — vertically centered in slim bar */
.if-nav,
.if-nav__list,
.if-tools {
  height: auto !important;
  align-items: center !important;
}

/* Remove the scrolled shadow behavior since header is now static */
.if-header.is-scrolled {
  box-shadow: none !important;
  border-bottom-color: var(--if-line) !important;
}

/* Remove sticky header behavior entirely — the JS adds is-scrolled but
   since position is static it won't matter visually. */
.if-header.is-scrolled .if-header__inner {
  height: 72px !important;
  max-height: 72px !important;
}

/* Body padding adjustment — since header no longer sticky, no overlap */
body {
  padding-top: 0 !important;
}

/* Mobile — even slimmer */
@media (max-width: 1023px) {
  .if-header__inner {
    height: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
  }

  .if-header .if-logo,
  .if-header .if-logo .custom-logo-link {
    height: 44px !important;
    max-height: 44px !important;
    max-width: 180px !important;
  }

  .if-header .if-logo img,
  .if-header .if-logo .custom-logo {
    height: 44px !important;
    max-height: 44px !important;
    max-width: 180px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LOGO - BIGGER (120px) INSIDE SLIM 72px BAR
   Logo floats above/below bar. No layout shift, no overlap issues.
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper — allows overflow, centers logo */
.if-header .if-logo,
.if-header .if-logo .custom-logo-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 72px !important;
  max-height: 72px !important;
  min-height: 72px !important;
  max-width: 400px !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Image — 120px, overflows bar */
.if-header .if-logo img,
.if-header .if-logo .custom-logo,
.if-header .if-logo .custom-logo-link img {
  display: block !important;
  height: 120px !important;
  width: auto !important;
  max-height: 120px !important;
  max-width: 400px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
  position: relative !important;
}

/* Header allows visible overflow */
.if-header,
.if-header__inner {
  overflow: visible !important;
}

/* Make sure hero/content below is not covered — add top padding to page */
.if-home,
.if-main {
  position: relative !important;
  z-index: 1 !important;
}

/* Mobile — proportional */
@media (max-width: 1023px) {
  .if-header .if-logo,
  .if-header .if-logo .custom-logo-link {
    height: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
    max-width: 200px !important;
  }

  .if-header .if-logo img,
  .if-header .if-logo .custom-logo {
    height: 80px !important;
    max-height: 80px !important;
    max-width: 200px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HEADER BAR - DARK (match footer)
   ═══════════════════════════════════════════════════════════════ */

.if-header {
  background: var(--if-charcoal-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Nav links — white on dark */
.if-header .if-nav__link {
  color: #E5DFD2 !important;
}

.if-header .if-nav__link:hover,
.if-header .if-nav__link[aria-current="page"] {
  color: #FFFFFF !important;
}

.if-header .if-nav__link::after {
  background: var(--if-gold) !important;
}

/* Sale link stays gold/red */
.if-header .if-nav__link--sale {
  color: #E8A0A0 !important;
}

.if-header .if-nav__link--sale:hover {
  color: #FF6B6B !important;
}

/* Tools icons — gold/light on dark */
.if-header .if-icon-btn {
  color: #E5DFD2 !important;
}

.if-header .if-icon-btn:hover {
  background: rgba(198, 161, 91, 0.15) !important;
  color: var(--if-gold-soft) !important;
}

/* SVG strokes */
.if-header .if-icon-btn svg {
  stroke: currentColor !important;
}

/* Cart badge stays gold */
.if-header .if-cart-count {
  background: var(--if-gold) !important;
  color: var(--if-charcoal-bg) !important;
}

/* Burger icon */
.if-header .if-burger {
  color: #E5DFD2 !important;
}

/* Search icon */
.if-header .if-icon-btn[data-search-open] {
  color: #E5DFD2 !important;
}

/* Text logo (if any) */
.if-header .if-logo--text,
.if-header .if-logo {
  color: #FFFFFF !important;
}

.if-header .if-logo--text b,
.if-header .if-logo b {
  color: var(--if-gold) !important;
}

/* Sticky/scroll state — keep dark */
.if-header.is-scrolled {
  background: var(--if-charcoal-bg) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Mega menu still light */
.if-mega {
  background: #FFFFFF !important;
  color: var(--if-body) !important;
}

.if-mega__list a {
  color: var(--if-body) !important;
}

.if-mega__col-title {
  color: var(--if-gold-deep) !important;
}


/* ═══════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR - WHITE
   ═══════════════════════════════════════════════════════════════ */

.if-announce {
  background: #FFFFFF !important;
  color: var(--if-charcoal) !important;
  border-bottom: 1px solid var(--if-line) !important;
}

.if-announce__slide {
  color: var(--if-charcoal) !important;
}

.if-announce a {
  color: var(--if-gold-deep) !important;
  border-bottom-color: var(--if-gold) !important;
}

.if-announce a:hover {
  color: var(--if-charcoal) !important;
}

/* Dots — darker so visible on white */
.if-announce__dot {
  background: rgba(28, 27, 25, 0.25) !important;
}

.if-announce__dot.is-active {
  background: var(--if-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE R — MOBILE PERFECT: logo fit at small widths
   The desktop "LOGO - BIGGER (120px)" block (see .if-header .if-logo
   img + .custom-logo-link img) has specificity (0,3,1) which outranks
   the later ≤1023px "Mobile — proportional" rules (0,3,0), pinning the
   logo at 120px tall / 158px wide on phones. At 320px that pushed the
   cart icon 50px off-screen. Equal-specificity rules re-asserted here
   (later in file = cascade winner) restore the intended mobile sizes.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .if-header .if-logo .custom-logo-link img,
  .if-header .if-logo img,
  .if-header .if-logo .custom-logo {
    height: 80px !important;
    max-height: 80px !important;
    max-width: 200px !important;
  }

  .if-header .if-logo,
  .if-header .if-logo .custom-logo-link {
    height: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
    max-width: 200px !important;
  }
}

@media (max-width: 359px) {
  .if-header .if-logo .custom-logo-link img,
  .if-header .if-logo img,
  .if-header .if-logo .custom-logo {
    height: 56px !important;
    max-height: 56px !important;
    max-width: 120px !important;
  }

  .if-header .if-logo,
  .if-header .if-logo .custom-logo-link {
    max-width: 120px !important;
  }

  .if-tools {
    gap: 4px;
  }
}