/* DaruGet Stage 9 v9 — utility nav group + unified breadcrumbs */

/* ---------- Desktop nav utility cluster ---------- */
@media(min-width:901px){
  .category-navigation .category-nav-row{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:1280px!important;
    min-height:64px!important;
    margin:0 auto!important;
    padding-inline:10px!important;
    gap:4px!important;
    box-sizing:border-box!important;
    direction:rtl!important;
  }

  /* Main categories remain on the right/center area */
  .category-navigation .category-nav-item,
  .category-navigation .health-mag-link{
    flex:0 0 auto!important;
  }

  /* Three utility actions become one left-side group */
  .category-navigation .nav-utility-group{
    margin-right:auto!important;
    margin-left:0!important;
    padding-right:18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    flex:0 0 auto!important;
    position:relative!important;
  }
  .category-navigation .nav-utility-group::before{
    content:""!important;
    position:absolute!important;
    right:7px!important;
    top:50%!important;
    width:1px!important;
    height:27px!important;
    transform:translateY(-50%)!important;
    background:#e3eae6!important;
  }

  .category-navigation .nav-utility-group .otc-nav-link,
  .category-navigation .nav-utility-group .nav-club,
  .category-navigation .nav-utility-group .nav-special{
    flex:0 0 auto!important;
    margin:0!important;
    box-sizing:border-box!important;
    white-space:nowrap!important;
  }

  /* Keep all three visually balanced */
  .category-navigation .nav-utility-group .otc-nav-link{
    min-height:40px!important;
    padding-inline:10px!important;
    gap:6px!important;
  }
  .category-navigation .nav-utility-group .nav-club{
    min-height:40px!important;
    padding-inline:10px!important;
    gap:6px!important;
  }
  .category-navigation .nav-utility-group .nav-special{
    min-height:40px!important;
    padding-inline:10px!important;
    gap:6px!important;
  }
}

/* Smaller desktop/laptop: preserve left cluster without overflow */
@media(min-width:901px) and (max-width:1220px){
  .category-navigation .category-nav-row{
    max-width:100%!important;
    padding-inline:8px!important;
    gap:2px!important;
  }
  .category-navigation .category-nav-link,
  .category-navigation .health-mag-link{
    padding-inline:7px!important;
    font-size:12px!important;
  }
  .category-navigation .nav-utility-group{
    padding-right:12px!important;
    gap:5px!important;
  }
  .category-navigation .nav-utility-group::before{
    right:4px!important;
  }
  .category-navigation .nav-utility-group .otc-nav-link,
  .category-navigation .nav-utility-group .nav-club,
  .category-navigation .nav-utility-group .nav-special{
    padding-inline:8px!important;
    font-size:12px!important;
  }
  .category-navigation .nav-utility-group .nav-club svg{
    width:16px!important;
    height:16px!important;
  }
  .category-navigation .nav-utility-group small{
    font-size:12px!important;
  }
}

/* ---------- Unified breadcrumb design ---------- */
.breadcrumbs,
.product-breadcrumb,
.breadcrumb,
.cart-breadcrumb,
.interaction-breadcrumb{
  width:max-content!important;
  max-width:100%!important;
  min-height:40px!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin:0 0 18px!important;
  padding:7px 11px!important;
  box-sizing:border-box!important;
  border:1px solid #e0e8e3!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#fcfefd,#f7faf8)!important;
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.7!important;
  box-shadow:0 3px 10px rgba(15,23,42,.025)!important;
}

.breadcrumbs a,
.product-breadcrumb a,
.breadcrumb a,
.cart-breadcrumb a,
.interaction-breadcrumb a{
  display:inline-flex!important;
  align-items:center!important;
  min-height:26px!important;
  padding:0 4px!important;
  border-radius:7px!important;
  color:#52645b!important;
  text-decoration:none!important;
  font-weight:800!important;
  transition:color .16s ease,background .16s ease!important;
}
.breadcrumbs a:hover,
.product-breadcrumb a:hover,
.breadcrumb a:hover,
.cart-breadcrumb a:hover,
.interaction-breadcrumb a:hover{
  color:#15803d!important;
  background:#edf8f1!important;
}

.breadcrumbs .breadcrumb-separator,
.product-breadcrumb .breadcrumb-separator,
.breadcrumb .breadcrumb-separator,
.cart-breadcrumb .breadcrumb-separator,
.interaction-breadcrumb .breadcrumb-separator,
.product-breadcrumb>span:not([class]),
.breadcrumb>span:not([class]),
.cart-breadcrumb>span:not([class]){
  flex:0 0 auto!important;
  color:#a4b2aa!important;
  font-size:13px!important;
  font-weight:500!important;
  line-height:1!important;
}

.breadcrumbs strong,
.product-breadcrumb strong,
.breadcrumb strong,
.cart-breadcrumb strong,
.interaction-breadcrumb strong,
.breadcrumb-current{
  display:inline-flex!important;
  align-items:center!important;
  min-height:27px!important;
  max-width:min(420px,60vw)!important;
  padding:2px 9px!important;
  border:1px solid #cce2d3!important;
  border-radius:8px!important;
  background:#edf8f1!important;
  color:#126c35!important;
  font-size:12px!important;
  line-height:1.55!important;
  font-weight:900!important;
  white-space:normal!important;
}

/* Brand/product names can be long: don't crash layout */
.product-breadcrumb #crumbName,
.breadcrumbs #brandCrumb{
  overflow-wrap:anywhere!important;
}

/* Give breadcrumbs comfortable separation from page hero/content */
.stage9-section>.breadcrumbs:first-child,
.product-page .product-breadcrumb,
.cart-page .cart-breadcrumb,
.checkout-page .cart-breadcrumb{
  margin-top:2px!important;
  margin-bottom:18px!important;
}

@media(max-width:680px){
  .breadcrumbs,
  .product-breadcrumb,
  .breadcrumb,
  .cart-breadcrumb,
  .interaction-breadcrumb{
    width:100%!important;
    min-height:38px!important;
    gap:5px!important;
    margin-bottom:13px!important;
    padding:6px 8px!important;
    border-radius:10px!important;
    font-size:12px!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    scrollbar-width:none!important;
  }
  .breadcrumbs::-webkit-scrollbar,
  .product-breadcrumb::-webkit-scrollbar,
  .breadcrumb::-webkit-scrollbar,
  .cart-breadcrumb::-webkit-scrollbar,
  .interaction-breadcrumb::-webkit-scrollbar{
    display:none!important;
  }
  .breadcrumbs a,
  .product-breadcrumb a,
  .breadcrumb a,
  .cart-breadcrumb a,
  .interaction-breadcrumb a{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    font-size:12px!important;
  }
  .breadcrumbs strong,
  .product-breadcrumb strong,
  .breadcrumb strong,
  .cart-breadcrumb strong,
  .interaction-breadcrumb strong,
  .breadcrumb-current{
    flex:0 0 auto!important;
    max-width:65vw!important;
    font-size:12px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}