/**
 * v122-additions.css
 *
 * 1. Sign-in page: COMPLETE REWRITE - uses cb-signup-* classes so inputs
 *    are IDENTICAL to the signup page. ALL previous signin-width overrides
 *    from v118/v120 are superseded. The page now shares the exact same
 *    .cb-form-input, .cb-form-field, .cb-form-row layout as signup.
 *
 * 2. Product grid: adaptive grid definition that works on all pages.
 *
 * 3. Per-user 2FA method toggle styles (on account page).
 */

/* ══════════════════════════════════════════════════════════════════
   1. SIGN-IN PAGE — exact signup match
   .cb-signin-page-custom uses .cb-signup-* classes — all form CSS
   is inherited. Only sign-in-specific additions below.
   ══════════════════════════════════════════════════════════════════ */

/* Kill every v118/v120 max-width override — the custom form needs none of them */
.cb-signin-page .woocommerce,
.cb-signin-page .woocommerce-page .woocommerce,
.cb-signin-page .woocommerce-form-login,
.cb-signin-page .woocommerce-form-register {
  display: none !important; /* Old WC form never shown */
}

/* Remember-me + forgot-password row */
.cb-signin-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: -0.3rem;
  margin-bottom: 0.8rem;
}

.cb-signin-remember {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.48rem, 1vw, 0.56rem);
  color: var(--cb-color-body, #555);
  cursor: pointer;
  user-select: none;
}

.cb-signin-remember input[type="checkbox"] {
  width: auto !important;
  margin: 0;
  accent-color: var(--cb-hamburger-pink, #ff4fa3);
}

.cb-signin-lost {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.48rem, 1vw, 0.56rem);
  color: var(--cb-hamburger-pink, #ff4fa3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.cb-signin-lost:hover {
  border-bottom-color: var(--cb-hamburger-pink, #ff4fa3);
}

/* ══════════════════════════════════════════════════════════════════
   2. ADAPTIVE PRODUCT GRID
   Applies on front page, shop, all category pages.
   ══════════════════════════════════════════════════════════════════ */

.cb-home-products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: clamp(0.8rem, 2vw, 1.5rem) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.cb-home-products {
  width: 100%;
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

.cb-home-products-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(0.8rem, 2vw, 1.4rem);
}

.cb-home-products-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.55rem, 1.2vw, 0.72rem);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--cb-color-body, #333);
}

.cb-home-products-viewall {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.48rem, 1vw, 0.58rem);
  color: var(--cb-hamburger-pink, #ff4fa3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.cb-home-products-viewall:hover { border-bottom-color: var(--cb-hamburger-pink, #ff4fa3); }

.cb-hprod-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cb-hprod-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

.cb-hprod-img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #f5f5f5;
  overflow: hidden;
}

.cb-hprod-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cb-hprod-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0f0f0 25%, #e8e8e8 100%);
}

.cb-hprod-new-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--cb-hamburger-pink, #ff4fa3);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 3px;
}

.cb-hprod-out-of-stock {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 3px;
}

.cb-hprod-info {
  padding: 0.6rem 0.2rem 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cb-hprod-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.54rem, 1.1vw, 0.66rem);
  font-weight: 600;
  color: var(--cb-color-body, #333);
  line-height: 1.3;
}

.cb-hprod-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.50rem, 1vw, 0.60rem);
  color: var(--cb-hamburger-pink, #ff4fa3);
}

/* ══════════════════════════════════════════════════════════════════
   3. PER-USER 2FA METHOD SELECTOR (account page)
   ══════════════════════════════════════════════════════════════════ */

.cb-2fa-method-selector {
  display: flex;
  gap: 0.8rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.cb-2fa-method-option {
  flex: 1;
  min-width: 140px;
  border: 2px solid #eee;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  text-align: center;
}

.cb-2fa-method-option input { display: none; }

.cb-2fa-method-option.selected,
.cb-2fa-method-option:has(input:checked) {
  border-color: var(--cb-hamburger-pink, #ff4fa3);
  background: #fff5fa;
}

.cb-2fa-method-option strong {
  display: block;
  font-size: 0.7rem;
  margin-bottom: 0.25rem;
  color: var(--cb-hamburger-pink, #ff4fa3);
}