/* =========================
   Header (Bareco Studio) - CLEAN
   ========================= */

/* Promo bar */
.promo-bar{
  background:#000;
  color:#fff;
  border-bottom:1px solid #111;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:10px 56px;
  position:relative;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;

  /* close animation support */
  transition: opacity .22s ease, transform .22s ease, max-height .22s ease, padding .22s ease;
  transform: translateY(0);
  opacity: 1;
  max-height: 80px;
  overflow: hidden;
}
.promo-bar.is-closing{
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
}
.promo-bar p{ margin:0; }
.promo-bar .promo-bar__link{ color:#fff; }
.promo-bar .promo-bar__link:hover{ opacity:.85; }

.promo-close{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:10px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.promo-close:hover{ opacity:.75; }

/* =========================
   Header Base
   ========================= */
.site-header{
  background: var(--c-white);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 50;

  /* prevent header content from creating x-scroll */
  overflow-x: clip;
}

/* 3-area grid: left | logo | right */
.header-inner{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap: 14px;
  padding: 18px var(--gutter);
}

/* Allow grid children to shrink (prevents overflow in mid widths) */
.header-inner > *{ min-width:0; }
.header-left, .header-right{ min-width:0; }

/* Desktop placement */
.header-left{ grid-column: 1; justify-self:start; }
.header-logo{ grid-column: 2; justify-self:center; text-align:center; }
.header-right{
  grid-column: 3;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
}

/* Logo */
.header-logo__img{
  display:block;
  height:26px;
  width:auto;
  max-width:180px;
  object-fit:contain;
}

/* Links typography */
.acf-menu__link,
.menu a{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:500;
  color:#111;
}

/* Remove underline globally for header */
.site-header a{ text-decoration:none !important; }

/* =========================
   Right menu underline (COS-like)
   ========================= */
.header-right-nav a,
.acf-menu--right a{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding-bottom:3px;
}
.header-right-nav a::after,
.acf-menu--right a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  width:100%;
  background:#111;
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .22s ease;
}
.header-right-nav a:hover::after,
.header-right-nav a:focus-visible::after,
.acf-menu--right a:hover::after,
.acf-menu--right a:focus-visible::after{
  transform: scaleX(1);
}

/* Right nav list alignment */
.header-right-nav ul,
.acf-menu--right{
  display:flex;
  align-items:center;
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
}

/* =========================
   Icons (Cart / Wishlist)
   ========================= */
.header-right .icon-link i,
.icon-link--cart i,
.bc-wishlist a.wishlist_products_counter,
.bc-wishlist a.wishlist_products_counter:before{
  color:#111 !important;
}

/* Cart link + badge */
.icon-link--cart{
  position:relative;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  color:#111;
}
.icon-link--cart i{
  font-size:16px;
  line-height:1;
  display:block;
}
.cart-count{
  position:absolute;
  top:0;
  right:0;
  transform: translate(55%, -55%);
  background:#111;
  color:#fff;
  font-size:11px;
  line-height:1;
  padding:3px 5px;
  border-radius:999px;
  min-width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  letter-spacing:0;
  text-transform:none;
  font-weight:600;
  border:0;
}

/* Hide "Wishlist -" text + count */
.bc-wishlist .wishlist_products_counter_text{ display:none !important; }
.bc-wishlist .wishlist_products_counter_number{ display:none !important; }

/* WPC wishlist button text hide (icon-only) */
.woosw-btn{ font-size:0; line-height:1; }
.woosw-btn:before,
.woosw-btn i{ font-size:18px; color:#111; }

/* SR only */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* =========================
   CTA buttons
   ========================= */
.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  line-height:1;
  border:1px solid transparent;
}
@media (max-width: 767px) {
  .header-cta{
    display: none;
  }
}
.header-cta--outline{
  background:transparent;
  border-color:#111;
  color:#111;
}
.header-cta--outline:hover{
  background:#111;
  color:#fff;
}
.header-cta--solid{
  background:#111;
  border-color:#111;
  color:#fff;
}
.header-cta--solid:hover{
  background:transparent;
  color:#111;
}

/* =========================
   WP .menu dropdown (Desktop fallback)
   ========================= */
.menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:18px;
  align-items:center;
}
.menu a{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.menu > li{ position:relative; }
.menu li .sub-menu{
  list-style:none;
  margin:0;
  padding:14px;
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width:260px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 99;
}
.menu > li:hover > .sub-menu,
.menu > li:focus-within > .sub-menu{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.sub-menu li{ position:relative; }
.sub-menu a{
  width:100%;
  justify-content:space-between;
  padding:10px 8px;
  font-size:12px;
  text-transform:none;
  letter-spacing:.2px;
}
.sub-menu li .sub-menu{
  top:0;
  left: calc(100% + 10px);
}

/* WP menu caret (FontAwesome) */
.menu > li.menu-item-has-children > a::after{
  content:"\f078";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:10px;
  line-height:1;
  margin-left:8px;
  opacity:.75;
  transform: translateY(1px);
}

/* =========================
   ACF menus + Mega dropdown (Desktop)
   ========================= */
.acf-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:18px;
  align-items:center;
}
.acf-menu a{
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text);
}

.acf-menu__item{ position:relative; }

.acf-menu__item.has-dropdown > .acf-menu__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.acf-menu__item.has-dropdown > .acf-menu__link::after{
  content:"\f078";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:10px;
  line-height:1;
  opacity:.75;
  transform: translateY(1px);
}

/* Mega dropdown */
.mega-dropdown{
  position:absolute;
  left:0;
  top: calc(100% + 10px);
  width: min(900px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  background:#fff;
  border:1px solid var(--border);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 99;
}
.acf-menu__item.has-dropdown::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:10px;
  background:transparent;
}
.acf-menu__item:hover > .mega-dropdown,
.acf-menu__item:focus-within > .mega-dropdown{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* Inner layout: links + promo image */
.mega-dropdown__inner{
  display:grid;
  grid-template-columns: 1fr 420px;
  min-height:360px;
  gap:0;
  padding:0;
}
.mega-dropdown__links{
  padding:22px;
  border-right:1px solid var(--border);
}
.mega-dropdown__links ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.mega-dropdown__links a{
  text-transform:none;
  letter-spacing:.2px;
  font-size:13px;
  padding:8px 6px;
  display:block;
}
.dd-heading{
  font-weight: var(--fw-bold);
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:12px;
  margin-top:10px;
  padding:8px 6px;
}
.mega-dropdown__media{
  position:relative;
  display:block;
  height:100%;
}
.mega-dropdown__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mega-dropdown__media-label{
  position:absolute;
  left:14px;
  bottom:14px;
  background: rgba(255,255,255,.92);
  padding:8px 10px;
  font-weight: var(--fw-bold);
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:12px;
}

/* =========================
   Mobile: burger + drawer
   ========================= */
.header-burger{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  border-radius:10px;

  /* ✅ make lines visible */
  padding:10px;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:6px;
  color:#111;
}
.header-burger span{
  display:block;
  height:2px;
  width:100%;
  background:#111;
  border-radius:2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Burger -> X when open */
body.nav-open .header-burger span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
body.nav-open .header-burger span:nth-child(2){ opacity:0; }
body.nav-open .header-burger span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Drawer */
.mobile-drawer{
  position:fixed;
  inset:0;
  display:none;
  z-index: 9999;
}
.mobile-drawer__panel{
  position:absolute;
  z-index: 2;
  top:0;
  left:0;
  height:100%;
  width: min(360px, 92vw);
  background:#fff;
  border-right:1px solid var(--border);
  transform: translateX(-102%);
  transition: transform .2s ease;
  padding:16px;
  overflow:auto;

  z-index: 2;
  pointer-events:auto;
}
.mobile-drawer__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.25);
  border:0;

  z-index: 1;
  pointer-events:auto;
}

.mobile-drawer__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.mobile-drawer__title{
  font-weight: var(--fw-bold);
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:12px;
}
.mobile-drawer__close{
  background:transparent;
  border:1px solid var(--border);
  padding:8px 12px;
  cursor:pointer;
  text-transform:uppercase;
  font-size:11px;
}

/* Mobile menu */
.menu-mobile{
  display:block;
  margin-top:14px;
}
.menu-mobile > li{ border-bottom:1px solid var(--border); }
.menu-mobile a{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 8px;
  font-size:12px;
  letter-spacing:.6px;
}

/* Collapsible sub-menus (JS adds .is-open on li) */
.menu-mobile .sub-menu{
  display:none;
  position:static;
  border:0;
  box-shadow:none;
  padding:0 0 10px 0;
  margin-left:10px;
}
.menu-mobile li.is-open > .sub-menu{ display:block; }
.menu-mobile--secondary{ margin-top:20px; opacity:.9; }

/* Drawer open state */
body.nav-open{ overflow:hidden; }
body.nav-open .mobile-drawer{ display:block; }
body.nav-open .mobile-drawer__panel{ transform: translateX(0); }

/* =========================
   Responsive rules
   ========================= */

/* ✅ Switch to mobile header earlier (fixes 1042px overflow caused by left nav) */
@media (max-width: 1100px){
  .header-burger{ display:flex; flex-direction:column; align-items:stretch; justify-content:center; }
  .header-left{ display:none !important; }
  .header-right-nav{ display:none !important; } /* keep icons + CTA */
  .header-logo{ justify-self:center; text-align:center; }
  .mega-dropdown{ display:none !important; }
}

/* Small: tighten logo */
@media (max-width: 900px){
  .header-logo__img{ height:22px; max-width:150px; }
}

/* Extra small: hide CTA to avoid overflow */
@media (max-width: 520px){
  .header-cta{ display:none; }
  .header-right{ gap:10px; }
  .header-inner {
    padding-left: 0;
    padding-right: 0;
  }
  .header-logo__img {
    max-width: 135px;
  }
}


.menu-mobile > li.menu-item-has-children > a::after{
  transition: transform .2s ease;
}

.menu-mobile li.is-open > a::after{
  transform: rotate(180deg) translateY(1px);
}


















/* =========================
   Mobile Drawer Menu (ACF)
   HTML: <ul class="menu menu-mobile"> ... <ul class="sub-menu">
   ========================= */

/* reset lists inside mobile nav */
.mobile-nav ul,
.mobile-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* top-level list */
.mobile-nav .menu-mobile {
  margin-top: 14px;
}

/* top-level items */
.mobile-nav .menu-mobile > li {
  border-bottom: 1px solid rgba(0,0,0,.12);
}

/* ✅ ONLY top-level links (sub-menu links is rule se affect nahi honge) */
.mobile-nav .menu-mobile > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 12px;
  color: #111;
  text-decoration: none;
}

/* chevron ONLY for parents */
.mobile-nav .menu-mobile > li.menu-item-has-children > a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex: 0 0 auto;
  opacity: .9;
  margin-left: 10px;
}

/* open state */
.mobile-nav .menu-mobile > li.is-open > a::after {
  transform: rotate(-135deg);
}

/* submenu hidden by default */
.mobile-nav .menu-mobile .sub-menu {
  display: none;
  position: static !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;

  padding: 6px 0 14px 14px; /* indent */
}

/* show when open */
.mobile-nav .menu-mobile > li.is-open > .sub-menu {
  display: block;
}

/* submenu links */
.mobile-nav .menu-mobile .sub-menu a {
  display: block;
  padding: 10px 10px;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: none;
  color: #111;
  text-decoration: none;
}

.mobile-nav .menu-mobile .sub-menu a:hover {
  text-decoration: underline;
}

/* heading rows (ACF row_type heading) */
.mobile-nav .menu-mobile .sub-menu .dd-heading {
  padding: 10px 10px 6px;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.6;
}

/* secondary mobile menu (right menu) */
.mobile-nav .menu-mobile--secondary {
  margin-top: 18px;
  border-top: 1px solid rgba(0,0,0,.12);
}
.mobile-nav .menu-mobile--secondary > li > a {
  padding: 12px 10px;
}









/* =========================================================
   FIX: Mobile Drawer slide open/close + submenu spacing issue
   (Add this at the VERY END of header.css)
   ========================================================= */

@media (max-width: 1100px){

  /* ---- Drawer smooth open/close (no display:none cut) ---- */
  .mobile-drawer{
    display:block;                 /* override old display:none */
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: opacity .28s ease, visibility 0s linear .28s;
  }

  body.nav-open .mobile-drawer{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition: opacity .28s ease, visibility 0s;
  }

  .mobile-drawer__backdrop{
    opacity:0;
    transition: opacity .28s ease;
  }
  body.nav-open .mobile-drawer__backdrop{
    opacity:1;
  }

  .mobile-drawer__panel{
    transform: translateX(-105%);
    transition: transform .32s ease;
    will-change: transform;
  }
  body.nav-open .mobile-drawer__panel{
    transform: translateX(0);
  }

  /* ---- Submenu: NO leftover spacing on close + smooth slide ---- */
  .mobile-nav .menu-mobile .sub-menu{
    display:block !important;      /* stop display:none/opacity rules fighting */
    position: static !important;
    box-shadow:none !important;
    background: transparent !important;
    border:0 !important;

    max-height:0;
    overflow:hidden;

    /* IMPORTANT: closed state has ZERO vertical padding -> no gap */
    padding:0 0 0 14px;
    margin:0;

    opacity:0;
    transform: translateY(-4px);

    transition:
      max-height .28s ease,
      padding .28s ease,
      opacity .20s ease,
      transform .20s ease;
  }

  .mobile-nav .menu-mobile > li.is-open > .sub-menu{
    max-height:600px;              /* enough for links */
    padding:6px 0 14px 14px;       /* only when open */
    opacity:1;
    transform: translateY(0);
  }

}












/* =========================================================
   FIX: Mobile drawer smooth open/close (no display:none jump)
   Paste at VERY END of header.css
   ========================================================= */

.mobile-drawer{
  display:block;                 /* override old display:none */
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}

.mobile-drawer__backdrop{
  opacity:0;
  transition: opacity .22s ease;
}

.mobile-drawer__panel{
  transform: translateX(-102%);
  transition: transform .22s ease;
}

body.nav-open .mobile-drawer{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition: opacity .22s ease, visibility 0s linear 0s;
}

body.nav-open .mobile-drawer__backdrop{
  opacity:1;
}

body.nav-open .mobile-drawer__panel{
  transform: translateX(0);
}


/* =========================================================
   FIX: Mobile submenu spacing + smooth collapse/expand
   Works with: <ul class="menu menu-mobile"> <li> <ul class="sub-menu">
   ========================================================= */

/* ensure submenu doesn't leave gap when "closed" */
.mobile-nav .menu-mobile > li > .sub-menu{
  display:block !important;      /* stop display:none/block flicker */
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding-top:0;
  padding-bottom:0;
  margin:0;
  transition: max-height .25s ease, padding .25s ease, opacity .2s ease;
}

/* open state */
.mobile-nav .menu-mobile > li.is-open > .sub-menu{
  max-height: 600px;             /* enough for your lists */
  opacity:1;
  padding-top:6px;
  padding-bottom:14px;
}

/* keep indent without creating extra vertical space */
.mobile-nav .menu-mobile > li > .sub-menu{
  padding-left:14px;
}

/* submenu links layout clean (no flex spacing issues) */
.mobile-nav .menu-mobile .sub-menu a{
  display:block !important;
  padding:10px 10px;
  width:auto;
}