/**
 * v106/v107-additions.css
 *
 * v107 CHANGES vs v106:
 *  1. Token CSS simplified — no keyframe animation, no !important opacity wars.
 *     The JS owns opacity entirely. CSS just sets starting state (opacity:0)
 *     and allows pointer-events:none. The transition is set inline by JS.
 *
 *  2. Token container opacity: 1 always. No CSS can dim it.
 *
 *  3. Cart badge, unified sizing, 2FA styles — unchanged from v106.
 */

/* ═══════════════════════════════════════════════════════════════════
   1. TOKENS — minimal CSS, JS owns opacity
   ═══════════════════════════════════════════════════════════════════ */

/* v109: No CSS opacity rule — JS sets opacity to TOKEN_OPACITY immediately on spawn.
   No transition, no rAF delay, no flickering between 0 and target opacity. */
.brand-drift-token-v4 {
  /* opacity intentionally NOT set here — owned entirely by JS */
}

/* Container: always fully opaque — tokens handle their own opacity */
.cb-offcanvas .cb-menu-dyn-layer {
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   2. CART BADGE — on the right menu pill
   ═══════════════════════════════════════════════════════════════════ */

.menu-button.cb-menu-dots {
  position: relative !important;
}

.cb-cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--cb-hamburger-pink, #ff4fa3);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  line-height: 16px;
  text-align: center;
  display: none;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
}

.cb-cart-badge.visible {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cbBadgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cbBadgePop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.cb-cart-link-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cb-cart-link-badge {
  display: none;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--cb-hamburger-pink, #ff4fa3);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  line-height: 18px;
  text-align: center;
  padding: 0 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
  pointer-events: none;
}

.cb-cart-link-badge.visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: cbBadgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ═══════════════════════════════════════════════════════════════════
   3. UNIFIED RESPONSIVE SIZING — fluid layout for all pages
   ═══════════════════════════════════════════════════════════════════ */

.cb-page {
  padding: clamp(3.5rem, 5vw, 5rem) clamp(1rem, 4vw, 2.5rem) clamp(4rem, 6vw, 7rem) !important;
  max-width: min(1280px, 100%) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

.cb-page .cb-page-title,
.cb-page-title {
  font-size: clamp(0.82rem, 2.2vw, 1.15rem) !important;
}

.cb-page .cb-page-subtitle,
.cb-page-subtitle {
  font-size: clamp(0.52rem, 1.4vw, 0.66rem) !important;
}

.cb-page p,
.cb-page li,
.cb-page label,
.cb-page input,
.cb-page textarea {
  font-size: clamp(0.62rem, 1.6vw, 0.80rem) !important;
}

.cb-page h2 { font-size: clamp(0.66rem, 1.8vw, 0.80rem) !important; }
.cb-page h3 { font-size: clamp(0.60rem, 1.6vw, 0.72rem) !important; }

.cb-home-products-grid,
.products.columns-4,
.products.columns-3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 22vw, 260px), 1fr)) !important;
  gap: clamp(10px, 2vw, 24px) !important;
}

.cb-hprod-card,
.woocommerce ul.products li.product {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}

.woocommerce,
.woocommerce-page {
  padding: clamp(1rem, 3vw, 2rem) !important;
  max-width: min(1280px, 100%) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

#cb-main {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════
   4. SIGN-IN PAGE — unified sizing
   ═══════════════════════════════════════════════════════════════════ */

.cb-signin-page {
  padding: clamp(3rem, 5vw, 5rem) clamp(1rem, 4vw, 2rem) !important;
}

.cb-signin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: min(900px, 100%);
  margin: 0 auto;
}

@media (max-width: 640px) {
  .cb-signin-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   5. DASHBOARD 2FA SECTION
   ═══════════════════════════════════════════════════════════════════ */

.cb-dash-2fa-section {
  margin-top: 2.4rem;
  padding: 1.4rem;
  border-radius: 8px;
  border: 1px solid var(--cb-hamburger-pink, #ff4fa3);
  font-family: "JetBrains Mono", monospace;
}

.cb-dash-2fa-title {
  font-size: clamp(.65rem, 1.6vw, .78rem);
  font-weight: 700;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cb-2fa-status-pill {
  font-size: .58rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}

.cb-2fa-status-pill.active  { background: #4caf50; color: #fff; }
.cb-2fa-status-pill.inactive { background: rgba(0,0,0,.08); color: #888; }

.cb-dash-2fa-desc {
  font-size: clamp(.54rem, 1.4vw, .66rem);
  color: #666;
  line-height: 1.55;
  margin: 0 0 6px;
}