/* ============================================================
   WIKIBIZ BANK PRODUCT NAV
   Desktop: all products fit inside the common content rail.
   Tablet: compact grid.
   Mobile: intentional horizontal swipe without page overflow.
   ============================================================ */

.wbz-bank-product-nav{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  width:100%;
  max-width:var(--wbz-container);
  overflow:visible;
  margin:24px auto var(--wbz-space-6);
  padding:0;
}

.wbz-bank-product-nav__item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  min-height:70px;
  padding:8px 9px;
  border:1px solid var(--wbz-line);
  border-radius:var(--wbz-radius-md);
  background:var(--wbz-surface);
  background-image:none;
  color:var(--wbz-ink);
  text-decoration:none;
  filter:none;
  opacity:1;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}

.wbz-bank-product-nav__item,
.wbz-bank-product-nav__item:visited{
  color:var(--wbz-ink);
}

.wbz-bank-product-nav__item:hover{
  border-color:var(--wbz-line-strong);
  background:var(--wbz-tint);
  background-image:none;
  box-shadow:none;
  color:var(--wbz-brand);
  text-decoration:none;
  filter:none;
  opacity:1;
}

.wbz-bank-product-nav__item:focus-visible{
  outline:0;
  box-shadow:var(--wbz-focus-ring);
}

.wbz-bank-product-nav__item.is-active,
.wbz-bank-product-nav__item.is-active:visited{
  border-color:color-mix(in srgb,var(--wbz-brand) 48%,var(--wbz-line));
  background:var(--wbz-tint);
  background-image:none;
  color:var(--wbz-brand);
  box-shadow:none;
}

.wbz-bank-product-nav__icon{
  display:grid;
  flex:0 0 26px;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:var(--wbz-radius-sm);
  background:var(--wbz-bg2);
  color:var(--wbz-ink2);
}

.wbz-bank-product-nav__item.is-active .wbz-bank-product-nav__icon{
  background:color-mix(in srgb,var(--wbz-brand) 14%,var(--wbz-surface));
  color:var(--wbz-brand);
}

.wbz-bank-product-nav__icon svg{
  width:15px;
  height:15px;
}

.wbz-bank-product-nav__copy{
  display:grid;
  align-content:center;
  justify-items:start;
  gap:3px;
  min-width:0;
  overflow:visible;
  text-align:left;
}

.wbz-bank-product-nav__copy b{
  display:-webkit-box;
  overflow:hidden;
  color:inherit;
  font-size:13.5px;
  font-weight:700;
  line-height:1.15;
  white-space:normal;
  text-overflow:clip;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.wbz-bank-product-nav__copy small{
  display:-webkit-box;
  overflow:hidden;
  color:var(--wbz-mut);
  font-size:10.5px;
  line-height:1.2;
  white-space:normal;
  text-overflow:clip;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}


/* Temporary product landing. */
.wbz-bank-product-stub{padding:42px 0 64px}
.wbz-bank-product-stub>p{
  margin:0 0 8px;
  color:var(--wbz-brand);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase
}
.wbz-bank-product-stub h1{
  margin:0 0 18px;
  font-size:clamp(32px,4vw,46px)
}
.wbz-bank-product-stub>div{
  display:grid;
  gap:10px;
  max-width:620px;
  padding:24px;
  border:1px solid var(--wbz-line);
  border-radius:var(--wbz-radius-lg);
  background:var(--wbz-surface);
  box-shadow:var(--wbz-shadow-xs)
}
.wbz-bank-product-stub strong{font-size:18px}
.wbz-bank-product-stub span{color:var(--wbz-ink2)}
.wbz-bank-product-stub a{
  width:max-content;
  color:var(--wbz-brand);
  font-weight:700;
  text-decoration:none
}

/* Mid-size desktop/tablet: two rows instead of a scrollbar. */
@media(max-width:900px) and (min-width:701px){
  .wbz-bank-product-nav{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  .wbz-bank-product-nav__item{
    min-height:66px;
    padding:9px 11px;
  }

  .wbz-bank-product-nav__copy b{font-size:13px}
  .wbz-bank-product-nav__copy small{font-size:10px}
}

/* Mobile: swipe is intentional, but only inside the nav itself. */
@media(max-width:700px){
  .wbz-bank-product-nav{
    display:flex;
    gap:10px;
    width:auto;
    max-width:none;
    overflow-x:auto;
    overflow-y:hidden;
    margin-right:-16px;
    margin-bottom:20px;
    margin-left:-16px;
    padding:0 16px 8px;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .wbz-bank-product-nav::-webkit-scrollbar{display:none}

  .wbz-bank-product-nav__item{
    flex:0 0 176px;
    min-width:176px;
    min-height:66px;
    padding:10px 12px;
  }

  .wbz-bank-product-nav__icon{
    flex-basis:30px;
    width:30px;
    height:30px;
  }

  .wbz-bank-product-nav__copy b{font-size:13px}
  .wbz-bank-product-nav__copy small{font-size:10px}
}

html[data-theme="dark"] .wbz-bank-product-nav__item:hover{
  background:color-mix(in srgb,var(--wbz-brand) 7%,var(--wbz-surface));
  background-image:none;
  border-color:color-mix(in srgb,var(--wbz-brand) 58%,var(--wbz-line));
  color:var(--wbz-acc);
  box-shadow:0 8px 20px rgba(185,255,38,.08);
  transform:translateY(-1px);
}

html[data-theme="dark"] .wbz-bank-product-nav__item:hover .wbz-bank-product-nav__icon{
  background:color-mix(in srgb,var(--wbz-brand) 12%,var(--wbz-bg2));
  color:var(--wbz-acc);
}

html[data-theme="dark"] .wbz-bank-product-nav__item:hover .wbz-bank-product-nav__copy small{
  color:color-mix(in srgb,var(--wbz-acc) 72%,var(--wbz-mut));
}

html[data-theme="dark"] .wbz-bank-product-nav__item.is-active{
  border-color:color-mix(in srgb,var(--wbz-brand) 52%,var(--wbz-line));
  background:color-mix(in srgb,var(--wbz-brand) 11%,var(--wbz-surface));
  color:var(--wbz-brand);
  box-shadow:none;
}

html[data-theme="dark"] .wbz-bank-product-nav__item.is-active .wbz-bank-product-nav__icon{
  background:color-mix(in srgb,var(--wbz-brand) 12%,var(--wbz-bg2));
  color:var(--wbz-brand);
}

html[data-theme="dark"] .wbz-bank-product-nav__item.is-active:hover{
  background:color-mix(in srgb,var(--wbz-brand) 9%,var(--wbz-surface));
  border-color:var(--wbz-acc);
  color:var(--wbz-acc);
  box-shadow:0 8px 20px rgba(185,255,38,.10);
}

html[data-theme="dark"] .wbz-bank-product-nav__item.is-active:hover .wbz-bank-product-nav__icon{
  background:color-mix(in srgb,var(--wbz-acc) 12%,var(--wbz-bg2));
  color:var(--wbz-acc);
}

html[data-theme="dark"] .wbz-bank-product-nav__item.is-active:hover .wbz-bank-product-nav__copy small{
  color:color-mix(in srgb,var(--wbz-acc) 72%,var(--wbz-mut));
}

/* STAGE 12 — equal left alignment makes all five product cards read symmetrically. */
.wbz-hub-categories .wbz-bank-product-nav__item{justify-content:flex-start;padding-left:14px;padding-right:14px}
.wbz-hub-categories .wbz-bank-product-nav__icon{flex-basis:30px;width:30px;height:30px}
.wbz-hub-categories .wbz-bank-product-nav__copy{justify-items:start;width:100%;text-align:left}
.wbz-hub-categories .wbz-bank-product-nav__copy b{font-size:14px}
.wbz-hub-categories .wbz-bank-product-nav__copy small{font-size:11px}
@media(max-width:700px){
  .wbz-hub-categories .wbz-bank-product-nav__item{padding-left:13px;padding-right:13px}
}


/* STAGE 13 — one-pixel visual contract for product navigation. */
.wbz-bank-product-nav__item{border-width:1px}
.wbz-bank-product-nav__item:focus-visible{
  outline:1px solid var(--wbz-brand);
  outline-offset:2px;
  box-shadow:none;
}