/* LO REN FORGE — Component styles
   Additional UI components not in main theme.css
   ================================================ */

/* ============ LF Monogram ============ */
.lf-monogram { flex-shrink: 0; transition: opacity 0.2s; }
.topnav-brand:hover .lf-monogram { opacity: 0.8; }

/* ============ Option chips (product variants) ============ */
.pd-option { margin-bottom: 20px; }
.pd-option > label {
  display: block;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--ink-60); text-transform: uppercase;
  margin-bottom: 10px;
}
.option-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.option-chips input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.option-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  font-family: var(--f-sans); font-size: 13px; color: var(--ink-60);
  cursor: pointer; transition: all 0.15s;
}
.option-chips input[type="radio"]:checked + .option-chip {
  border-color: var(--ink); background: var(--ink); color: var(--bg-cream);
}
.option-chip:hover { border-color: var(--ink); color: var(--ink); }

/* ============ Qty stepper ============ */
.qty-control {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line-strong); border-radius: 100px; padding: 2px;
}
.qty-control .qty-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: none; background: transparent;
  color: var(--ink-80); cursor: pointer; font-size: 18px; line-height: 1;
}
.qty-control .qty-btn:hover { background: var(--bg-paper); color: var(--ink); }
.qty-control .qty-display {
  font-family: var(--f-mono); font-size: 14px;
  min-width: 32px; text-align: center;
}

/* ============ Toast notification ============ */
.lf-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: var(--bg-cream);
  padding: 14px 24px; border-radius: 100px;
  font-family: var(--f-sans); font-size: 14px; font-weight: 500;
  z-index: 500; pointer-events: none;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0; white-space: nowrap;
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.4);
}
.lf-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ============ Loading spinner ============ */
.lf-spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ Badge / pill ============ */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 2px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.badge-ember { background: var(--ember); color: #fff; }
.badge-gold  { background: var(--gold); color: var(--ink); }
.badge-ink   { background: var(--ink); color: var(--bg-cream); }
.badge-outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-60); }

/* ============ Divider ============ */
.lf-divider {
  border: none; border-top: 1px solid var(--line);
  margin: var(--section-y) 0;
}
.lf-divider--heavy { border-top-width: 2px; border-color: var(--line-strong); }

/* ============ No-product message ============ */
.no-products, .no-posts {
  grid-column: 1 / -1;
  text-align: center; padding: 80px 20px;
  font-family: var(--f-display); font-size: 24px; color: var(--ink-40);
  font-style: italic;
}

/* ============ Search form ============ */
.search-form { display: flex; gap: 8px; }
.search-field {
  flex: 1; padding: 12px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  font-family: var(--f-sans); font-size: 15px; background: var(--bg); outline: none;
}
.search-field:focus { border-color: var(--ink); }
.search-submit { flex-shrink: 0; }

/* ============ Scroll progress (optional) ============ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: var(--line); z-index: 200;
}
.scroll-progress-bar {
  height: 100%; background: var(--accent);
  transform-origin: left; transition: transform 0.1s;
}

/* ============ Lede paragraph ============ */
.lede {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(20px, 2.5vw, 28px); line-height: 1.5;
  color: var(--ink); margin-bottom: 40px;
}

/* ============ Print ============ */
@media print {
  .topnav, .site-footer, .cart-drawer, .mobile-menu, .cart-scrim, .mm-scrim { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}