/* =========================================================
   NIKSIN Astra Skin v1.3.2
   Purpose: Let Astra/WooCommerce control layout, while only
   improving Astra header/footer visual consistency.
   This file intentionally avoids #content, .ast-container layout,
   #primary, #secondary, .woocommerce, .widget-area rules.
   ========================================================= */
:root{
  --bagus-red:#ef3138;
  --bagus-red-dark:#c91f27;
  --bagus-text:#17191d;
  --bagus-line:#e8eaee;
  --bagus-footer-bg:#14181e;
  --mz-header-height-desktop:82px;
  --mz-header-height-tablet:74px;
  --mz-header-height-mobile:66px;
}

/* Astra header visual only */
#masthead .ast-primary-header-bar{
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--bagus-line);
  box-shadow:0 4px 22px rgba(0,0,0,.045);
  min-height:var(--mz-header-height-desktop);
}
#masthead .site-logo-img img,
#masthead .custom-logo-link img,
#masthead img.custom-logo{
  width:150px;
  max-width:150px;
  max-height:72px;
  object-fit:contain;
}
#masthead .main-header-menu > .menu-item > .menu-link{
  color:var(--bagus-text);
  font-weight:800;
  font-size:15px;
  line-height:1.2;
}
#masthead .main-header-menu > .menu-item:hover > .menu-link,
#masthead .main-header-menu > .current-menu-item > .menu-link,
#masthead .main-header-menu > .current-menu-ancestor > .menu-link{
  color:var(--bagus-red);
}
#masthead .main-header-menu .sub-menu{
  border:1px solid var(--bagus-line);
  border-radius:14px;
  box-shadow:0 18px 46px rgba(18,20,23,.16);
  overflow:hidden;
}
#masthead .main-header-menu .sub-menu .menu-link{
  font-size:14px;
  font-weight:800;
  color:var(--bagus-text);
}
#masthead .main-header-menu .sub-menu .menu-link:hover{
  color:var(--bagus-red);
  background:#fff0f1;
}
#masthead .ast-custom-button,
#masthead .ast-builder-button-wrap .ast-custom-button,
#masthead .ast-custom-button-link .ast-custom-button{
  background:var(--bagus-red);
  color:#fff;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 10px 25px rgba(239,49,56,.22);
  border:0;
}
#masthead .ast-custom-button:hover,
#masthead .ast-builder-button-wrap .ast-custom-button:hover,
#masthead .ast-custom-button-link .ast-custom-button:hover{
  background:var(--bagus-red-dark);
  color:#fff;
}

/* Astra footer visual only */
.site-footer,
.site-primary-footer-wrap,
.site-above-footer-wrap,
.site-below-footer-wrap{
  background:var(--bagus-footer-bg);
  color:#c9ced7;
}
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title{
  color:#fff;
}
.site-footer p,
.site-footer li,
.site-footer a,
.site-footer .ast-footer-copyright{
  color:#c9ced7;
}
.site-footer a:hover{
  color:#fff;
}
.site-footer img.custom-logo,
.site-footer .custom-logo-link img{
  max-width:120px;
  height:auto;
  background:#fff;
  border-radius:8px;
  padding:5px;
}

@media (max-width:921px){
  #masthead .ast-primary-header-bar{
    min-height:var(--mz-header-height-tablet);
  }
  #masthead .site-logo-img img,
  #masthead .custom-logo-link img,
  #masthead img.custom-logo{
    width:132px;
    max-width:132px;
    max-height:62px;
  }
}
@media (max-width:544px){
  #masthead .ast-primary-header-bar{
    min-height:var(--mz-header-height-mobile);
  }
  #masthead .site-logo-img img,
  #masthead .custom-logo-link img,
  #masthead img.custom-logo{
    width:116px;
    max-width:116px;
    max-height:54px;
  }
}

/* =========================================================
   Astra mobile hamburger fallback drawer v1.4.0
   Scope: only the fallback drawer created by bagus-astra-menu-fix.js
   Purpose: show a proper vertical tree menu with submenu indentation.
   ========================================================= */
.bagus-menu-open,
.bagus-menu-open body{
  overflow:hidden !important;
}
.bagus-astra-drawer,
.bagus-astra-drawer *{
  box-sizing:border-box;
}
.bagus-astra-drawer{
  position:fixed;
  inset:0;
  z-index:1000000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}
.bagus-astra-drawer.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.bagus-astra-drawer__overlay{
  position:absolute;
  inset:0;
  background:rgba(15,18,24,.58);
}
.bagus-astra-drawer__panel{
  position:absolute;
  top:0;
  right:0;
  width:min(90vw,390px);
  height:60dvh;
  max-height:60dvh;
  min-height:360px;
  overflow:auto;
  border-bottom-left-radius:22px;
  background:#fff;
  color:#17191d;
  box-shadow:-24px 0 60px rgba(0,0,0,.2);
  padding:24px 22px 34px;
  transform:translateX(104%);
  transition:transform .24s ease;
}
.bagus-astra-drawer.is-open .bagus-astra-drawer__panel{
  transform:translateX(0);
}
.bagus-astra-drawer__close{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-left:auto;
  margin-bottom:18px;
  border:0;
  border-radius:12px;
  background:#303030;
  color:#fff;
  font-size:34px;
  line-height:1;
  box-shadow:none;
  padding:0;
  cursor:pointer;
}
.bagus-astra-drawer__nav{
  width:100%;
}
.bagus-astra-drawer__menu,
.bagus-astra-drawer__menu ul,
.bagus-astra-drawer__menu li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:100% !important;
}
.bagus-astra-drawer__menu{
  display:block !important;
  position:static !important;
  background:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}
.bagus-astra-drawer__menu li{
  display:block !important;
  position:relative !important;
  float:none !important;
  clear:both !important;
  text-align:left !important;
}
.bagus-astra-drawer__menu > li{
  border-bottom:1px solid #eef0f3;
}
.bagus-astra-drawer__menu a{
  display:block !important;
  width:100% !important;
  padding:15px 48px 15px 6px !important;
  color:#17191d !important;
  font-size:17px !important;
  font-weight:850 !important;
  line-height:1.35 !important;
  text-decoration:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-align:left !important;
}
.bagus-astra-drawer__menu a:hover,
.bagus-astra-drawer__menu .current-menu-item > a,
.bagus-astra-drawer__menu .current-menu-ancestor > a{
  color:#ef3138 !important;
}
.bagus-astra-drawer__menu .sub-menu{
  display:block !important;
  position:static !important;
  inset:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  float:none !important;
  min-width:0 !important;
  height:auto !important;
  box-shadow:none !important;
  border:0 !important;
  margin:0 0 10px 12px !important;
  padding:2px 0 2px 14px !important;
  border-left:3px solid #ffe0e3 !important;
  background:#fff !important;
}
.bagus-astra-drawer__menu .sub-menu a{
  position:relative !important;
  font-size:15px !important;
  font-weight:750 !important;
  padding:11px 40px 11px 24px !important;
  color:#4B4F58 !important;
}
.bagus-astra-drawer__menu .sub-menu a::before{
  content:"›" !important;
  position:absolute !important;
  left:4px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  color:#4B4F58 !important;
  font-size:24px !important;
  font-weight:700 !important;
  line-height:1 !important;
}
.bagus-astra-drawer__menu .sub-menu a .ast-icon,
.bagus-astra-drawer__menu .sub-menu a svg{
  display:none !important;
}
.bagus-astra-drawer__menu .sub-menu .sub-menu{
  margin-left:10px !important;
  border-left-color:#f0f2f5 !important;
}
.bagus-astra-drawer__menu .is-submenu-closed > .sub-menu{
  display:none !important;
}
.bagus-astra-drawer__menu .ast-menu-toggle,
.bagus-astra-drawer__menu .dropdown-menu-toggle,
.bagus-astra-drawer__menu .ast-header-navigation-arrow{
  display:none !important;
}
.bagus-submenu-toggle{
  position:absolute !important;
  top:7px !important;
  right:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid #eef0f3 !important;
  border-radius:50% !important;
  background:#fff5f6 !important;
  color:#ef3138 !important;
  font-size:20px !important;
  font-weight:900 !important;
  line-height:1 !important;
  box-shadow:none !important;
  cursor:pointer !important;
}
@media (min-width:1101px){
  .bagus-astra-drawer{display:none !important;}
}

/* v138: Logo inside fallback mobile drawer */
.bagus-astra-drawer__top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  width:100% !important;
  margin:0 0 22px !important;
  padding:0 0 10px !important;
}
.bagus-astra-drawer__brand{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  max-width:150px !important;
  width:auto !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
.bagus-astra-drawer__brand img{
  display:block !important;
  width:auto !important;
  max-width:132px !important;
  max-height:64px !important;
  height:auto !important;
  object-fit:contain !important;
}
.bagus-astra-drawer__top .bagus-astra-drawer__close{
  flex:0 0 44px !important;
  margin:0 !important;
}
@media (max-width:544px){
  .bagus-astra-drawer__panel{
    padding-top:22px !important;
  }
  .bagus-astra-drawer__brand img{
    max-width:120px !important;
    max-height:58px !important;
  }
}


/* v139: Keep mobile drawer compact at 60% viewport height.
   Menu content scrolls inside the panel when there are many submenu items. */
.bagus-astra-drawer__panel{
  height:60dvh !important;
  max-height:60dvh !important;
  min-height:360px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  border-bottom-left-radius:22px !important;
}
.bagus-astra-drawer__nav{
  max-height:calc(60dvh - 112px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:2px !important;
}
@media (max-width:544px){
  .bagus-astra-drawer__panel{
    width:min(92vw,390px) !important;
    height:60dvh !important;
    max-height:60dvh !important;
    min-height:340px !important;
  }
  .bagus-astra-drawer__nav{
    max-height:calc(60dvh - 106px) !important;
  }
}
@media (max-height:620px){
  .bagus-astra-drawer__panel{
    min-height:0 !important;
  }
}


/* =========================================================
   v140: Force hamburger/mobile header on tablet widths.
   Astra default breakpoint is 921px, but NIKSIN menu is too wide
   around 768px-1100px, so tablet should use hamburger drawer.
   ========================================================= */
@media (max-width:1100px){
  #ast-desktop-header{
    display:none !important;
  }

  #ast-mobile-header,
  #masthead .ast-mobile-header-wrap,
  #masthead .ast-mobile-header-wrap .ast-primary-header-bar{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  #masthead .ast-mobile-header-wrap .ast-primary-header-bar,
  #masthead .ast-mobile-header-wrap .site-primary-header-wrap{
    min-height:var(--mz-header-height-tablet) !important;
  }

  #masthead .ast-mobile-header-wrap .site-primary-header-wrap,
  #masthead .ast-mobile-header-wrap .ast-builder-grid-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
  }

  #masthead .ast-mobile-header-wrap .site-header-primary-section-left,
  #masthead .ast-mobile-header-wrap .site-header-primary-section-right{
    display:flex !important;
    align-items:center !important;
  }

  #masthead .ast-mobile-header-wrap .site-header-primary-section-right{
    margin-left:auto !important;
    justify-content:flex-end !important;
  }

  #masthead .ast-mobile-header-wrap [data-section="section-header-mobile-trigger"],
  #masthead .ast-mobile-header-wrap .ast-mobile-menu-trigger-fill,
  #masthead .ast-mobile-header-wrap .main-header-menu-toggle,
  #masthead .ast-mobile-header-wrap .mobile-menu-toggle-icon{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* Prevent any normal menu list from showing horizontally in tablet header. */
  #masthead .ast-mobile-header-wrap .ast-builder-menu,
  #masthead .ast-mobile-header-wrap .main-navigation,
  #masthead .ast-mobile-header-wrap .main-header-menu,
  #masthead .ast-mobile-header-wrap .ast-builder-menu-mobile{
    display:none !important;
  }

  /* But keep the actual hamburger trigger visible. */
  #masthead .ast-mobile-header-wrap [data-section="section-header-mobile-trigger"],
  #masthead .ast-mobile-header-wrap [data-section="section-header-mobile-trigger"] .ast-button-wrap,
  #masthead .ast-mobile-header-wrap [data-section="section-header-mobile-trigger"] button{
    display:flex !important;
  }

  #masthead .ast-mobile-menu-trigger-fill{
    width:48px !important;
    height:48px !important;
    border-radius:12px !important;
    padding:0 !important;
  }

  #masthead .ast-mobile-header-wrap .custom-logo-link img,
  #masthead .ast-mobile-header-wrap img.custom-logo{
    width:132px !important;
    max-width:132px !important;
    max-height:62px !important;
  }
}

@media (max-width:544px){
  #masthead .ast-mobile-header-wrap .ast-primary-header-bar,
  #masthead .ast-mobile-header-wrap .site-primary-header-wrap{
    min-height:var(--mz-header-height-mobile) !important;
  }

  #masthead .ast-mobile-header-wrap .custom-logo-link img,
  #masthead .ast-mobile-header-wrap img.custom-logo{
    width:116px !important;
    max-width:116px !important;
    max-height:54px !important;
  }
}


/* =========================================================
   v1.5.2 - Global sticky Astra header + safe content clearance
   Purpose:
   - Keep the Astra/NIKSIN header pinned to the viewport top.
   - Preserve normal document flow so homepage hero/feature strip
     always starts below the header instead of sliding underneath it.
   - Respect the WordPress admin bar while logged in.
   ========================================================= */
#masthead.site-header,
#masthead{
  position:-webkit-sticky !important;
  position:sticky !important;
  top:0 !important;
  z-index:99990 !important;
  width:100% !important;
  isolation:isolate;
  background:#fff;
}

/* Logged-in desktop: keep sticky header below the 32px WP admin bar. */
body.admin-bar #masthead.site-header,
body.admin-bar #masthead{
  top:32px !important;
}

/* Logged-in tablet/mobile: WordPress admin bar is 46px high. */
@media (max-width:782px){
  body.admin-bar #masthead.site-header,
  body.admin-bar #masthead{
    top:46px !important;
  }
}

/*
 * Sticky (not fixed) deliberately keeps #masthead in normal layout flow.
 * Therefore the first homepage section cannot sit underneath the header.
 * scroll-margin/scroll-padding also keeps anchor targets visible when
 * jumping to homepage sections from buttons or menu links.
 */
html{
  scroll-padding-top:calc(var(--mz-header-height-desktop) + 12px);
}
.bagus-home > section,
.bagus-elementor-home{
  scroll-margin-top:calc(var(--mz-header-height-desktop) + 12px);
}

/* Keep the first homepage strip/hero in its own layer below the sticky header. */
.bagus-home{
  position:relative;
  z-index:0;
}
.bagus-home > .bagus-feature-strip:first-child,
.bagus-home > .bagus-hero:first-child,
.bagus-elementor-home{
  position:relative;
  z-index:1;
}

@media (max-width:1100px){
  html{
    scroll-padding-top:calc(var(--mz-header-height-tablet) + 10px);
  }
  .bagus-home > section,
  .bagus-elementor-home{
    scroll-margin-top:calc(var(--mz-header-height-tablet) + 10px);
  }
}

@media (max-width:544px){
  html{
    scroll-padding-top:calc(var(--mz-header-height-mobile) + 8px);
  }
  .bagus-home > section,
  .bagus-elementor-home{
    scroll-margin-top:calc(var(--mz-header-height-mobile) + 8px);
  }
}

/* Avoid inherited transforms/overflow on the header itself breaking sticky. */
#masthead,
#masthead .ast-primary-header-bar{
  transform:none !important;
}


/* =========================================================
   v1.5.3 - Compact responsive Astra header
   Purpose:
   - Keep a standard, compact header height on every device.
   - Remove Astra's inherited vertical bar padding that can make
     the sticky header appear much taller than the configured height.
   - Keep the hero/feature strip naturally below the sticky header.
   ========================================================= */
#masthead .ast-primary-header-bar,
#masthead .main-header-bar{
  min-height:var(--mz-header-height-desktop) !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
#masthead .site-primary-header-wrap,
#masthead .ast-builder-grid-row{
  min-height:var(--mz-header-height-desktop) !important;
  align-items:center !important;
}
#masthead .ast-site-identity,
#masthead .site-branding{
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}
#masthead .site-logo-img img,
#masthead .custom-logo-link img,
#masthead img.custom-logo{
  width:126px !important;
  max-width:126px !important;
  max-height:58px !important;
  height:auto !important;
}
#masthead .main-header-menu > .menu-item > .menu-link{
  min-height:var(--mz-header-height-desktop) !important;
  display:flex !important;
  align-items:center !important;
  line-height:1.2 !important;
}

@media (max-width:1100px){
  #masthead .ast-mobile-header-wrap .ast-primary-header-bar,
  #masthead .ast-mobile-header-wrap .main-header-bar,
  #masthead .ast-mobile-header-wrap .site-primary-header-wrap,
  #masthead .ast-mobile-header-wrap .ast-builder-grid-row{
    min-height:var(--mz-header-height-tablet) !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  #masthead .ast-mobile-header-wrap .custom-logo-link img,
  #masthead .ast-mobile-header-wrap img.custom-logo{
    width:112px !important;
    max-width:112px !important;
    max-height:52px !important;
    height:auto !important;
  }
  #masthead .ast-mobile-menu-trigger-fill{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }
}

@media (max-width:544px){
  #masthead .ast-mobile-header-wrap .ast-primary-header-bar,
  #masthead .ast-mobile-header-wrap .main-header-bar,
  #masthead .ast-mobile-header-wrap .site-primary-header-wrap,
  #masthead .ast-mobile-header-wrap .ast-builder-grid-row{
    min-height:var(--mz-header-height-mobile) !important;
  }
  #masthead .ast-mobile-header-wrap .custom-logo-link img,
  #masthead .ast-mobile-header-wrap img.custom-logo{
    width:100px !important;
    max-width:100px !important;
    max-height:46px !important;
  }
  #masthead .ast-mobile-menu-trigger-fill{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    border-radius:10px !important;
  }
}


/* =========================================================
   v1.5.9 - Mobile viewport-anchored header

   Astra's sticky header can stop sticking when an ancestor becomes
   the scroll container (for example overflow set by a page builder).
   Use viewport fixed positioning ONLY on phones. #page reserves
   the measured header height so product cards and the home hero
   remain below the header. No WooCommerce grid/layout overrides.
   Tablet and desktop keep the existing sticky behaviour.
   ========================================================= */
@media screen and (max-width:544px) {
  #masthead.site-header,
  #masthead {
    position:fixed !important;
    inset-inline:0 !important;
    top:0 !important;
    width:100% !important;
    max-width:100% !important;
    z-index:99990 !important;
    margin:0 !important;
    background:#fff !important;
    transform:none !important;
    -webkit-transform:none !important;
  }

  /* The #page wrapper is the header's normal Astra parent.
     Reserved space replaces only the removed header flow height. */
  body #page.site {
    padding-top:var(--bagus-mobile-header-height, var(--mz-header-height-mobile)) !important;
  }

  /* WordPress mobile admin bar may scroll away instead of staying
     fixed: the lightweight script updates this offset when needed. */
  body.admin-bar #masthead.site-header,
  body.admin-bar #masthead {
    top:var(--bagus-mobile-admin-offset, 46px) !important;
  }
}