/* oi-nav-1.css — dipindah dari comp/seller-oi-nav.php (baris 263, 26 Okt 2026) agar bisa di-cache browser. */

/* <style id="IC_STOREFRONT_MAIN_NAV_SAFE_CATEGORY_LOOK_FINAL"> */
/*
 * Main nav Online Identity:
 * Tampilan mirip category product, tapi tidak memakai class/data category product.
 * Aman dari script seller-product.php.
 */
.ic-oi-nav{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  scrollbar-width:none !important;
  padding:4px 2px 8px !important;
}

.ic-oi-nav::-webkit-scrollbar{
  display:none !important;
}

.ic-oi-nav-item{
  appearance:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  flex:0 0 60px !important;
  width:60px !important;
  min-width:60px !important;
  max-width:60px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  text-decoration:none !important;
  white-space:normal !important;
  color:inherit !important;
  line-height:1.15 !important;
}

.ic-oi-nav-ring{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  min-height:50px !important;
  max-width:50px !important;
  max-height:50px !important;
  border-radius:999px !important;
  border:1px solid color-mix(in srgb, var(--brand, #198754) 32%, #ced4da) !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .08s ease, color .2s ease !important;
}

.ic-oi-nav-icon{
  font-size:20px !important;
  line-height:1 !important;
  color:#667085 !important;
}

.ic-oi-nav-label{
  margin-top:6px !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  line-height:1.15 !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  max-height:2.4em !important;
  overflow:hidden !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:#1f2937 !important;
}

.ic-oi-nav-item:hover .ic-oi-nav-ring{
  transform:translateY(-1px);
  border-color:var(--brand, #198754) !important;
}

.ic-oi-nav-item.is-active .ic-oi-nav-ring,
.ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring{
  border-width:3px !important;
  border-color:var(--brand, #198754) !important;
  box-shadow:0 0 0 .18rem color-mix(in srgb, var(--brand, #198754) 18%, transparent) !important;
}

.ic-oi-nav-item.is-active .ic-oi-nav-icon,
.ic-oi-nav-item[aria-current="page"] .ic-oi-nav-icon{
  color:var(--brand, #198754) !important;
}

/* <style id="IC_STOREFRONT_MAIN_NAV_NO_BLACK_ACTIVE_FINAL"> */
/*
 * Fix active black background:
 * Item main nav tidak boleh membawa background button lama.
 */
.ic-oi-nav .ic-oi-nav-item,
.ic-oi-nav .ic-oi-nav-item.active,
.ic-oi-nav .ic-oi-nav-item.is-active,
.ic-oi-nav .ic-oi-nav-item:active,
.ic-oi-nav .ic-oi-nav-item:focus,
.ic-oi-nav .ic-oi-nav-item:hover,
.ic-oi-nav .ic-oi-nav-item[aria-current="page"]{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  color:inherit !important;
}

.ic-oi-nav .ic-oi-nav-item::before,
.ic-oi-nav .ic-oi-nav-item::after{
  display:none !important;
  content:none !important;
}

.ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-label,
.ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-label{
  color:#1f2937 !important;
}

.ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
.ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring{
  background:#fff !important;
}

/* <style id="IC_STOREFRONT_MAIN_NAV_TEXT_WEIGHT_NORMAL_FINAL"> */
/*
 * Main nav Online Identity:
 * tulisan dibuat lebih normal, tidak terlalu bold.
 */
.ic-oi-nav .ic-oi-nav-label{
  font-weight:500 !important;
}

.ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-label,
.ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-label{
  font-weight:600 !important;
}