/* Bootstrap dark theme overrides */
[data-bs-theme=dark] {
  --bs-body-bg: #0a0a0a;
  --bs-body-color: #e8e8e8;
  --bs-primary: #3b8f3f;
  --bs-primary-rgb: 59,143,63;
  --bs-primary-text-emphasis: #4aab4f;
  --bs-card-bg: #111111;
  --bs-card-border-color: #222222;
  --bs-border-color: #222222;
  --bs-link-color: #4aab4f;
  --bs-link-hover-color: #5cc462;
  --bs-form-control-bg: #181818;
  --bs-secondary-bg: #181818;
  --bs-tertiary-bg: #141414;
  --bs-nav-link-color: #999;
  --bs-nav-link-hover-color: #e8e8e8;
}

/* Lush brand tokens */
:root {
  --lush-sativa:  #3b8f3f;
  --lush-hybrid:  #c47a28;
  --lush-indica:  #7b3fa0;
  --lush-copper:  #c47a28;
  --lush-gold:    #d4943a;
  --lush-surface: #111111;
  --lush-surface2:#181818;
  --lush-border:  #222222;
  --lush-muted:   #777;
}

/* Base */
body { background:#0a0a0a; color:#e8e8e8; }
[hidden] { display:none !important; }

/* Mobile app-shell layout (no full-page scroll) */
html, body { height: 100%; margin: 0; overflow: hidden; }
#app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.app-nav { flex: 0 0 auto; position: static !important; }
#router-outlet { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sticky-cart { flex: 0 0 auto; position: static !important; }

/* Nav */
.nav-logo { height:34px; }
.app-nav { position:sticky; top:0; z-index:100; background:#000 !important; border-bottom:1px solid var(--lush-border); }
.nav-text { font-size:.8rem !important; padding:0 !important; color:#999 !important; white-space:nowrap; }
.nav-text:hover { color:#e8e8e8 !important; text-decoration:none; }
.nav-logout-btn { font-size:.72rem !important; padding:3px 9px !important; white-space:nowrap; flex-shrink:0; }
.nav-cart { position:relative; font-size:1.05rem; color:#e8e8e8; text-decoration:none; }
.link-accent { color:var(--lush-accent-light,#4aab4f); cursor:pointer; font-weight:600; }
.link-accent:hover { text-decoration:underline; }
.cart-badge { position:absolute; top:-6px; right:-10px; background:var(--lush-sativa); color:#fff; border-radius:999px; font-size:.65rem; font-weight:700; padding:1px 5px; min-width:16px; text-align:center; }

/* Product cards */
.product-card { background:var(--lush-surface); border:1px solid var(--lush-border); border-radius:12px; overflow:hidden; transition:border-color .15s, transform .15s; height:100%; }
.product-card:hover { border-color:var(--lush-sativa); transform:translateY(-2px); }
.product-card.hybrid:hover { border-color:var(--lush-hybrid); }
.product-card.indica:hover { border-color:var(--lush-indica); }
.product-img { height:160px; display:flex; align-items:center; justify-content:center; position:relative; }
.product-emoji { font-size:3rem; }
.type-badge { position:absolute; top:10px; left:10px; font-size:.7rem; font-weight:700; padding:2px 10px; border-radius:999px; }
.type-badge.sativa { background:rgba(59,143,63,.25); color:#4aab4f; }
.type-badge.hybrid { background:rgba(196,122,40,.25); color:#e8943a; }
.type-badge.indica { background:rgba(123,63,160,.25); color:#a06ad4; }
.product-badge { background:rgba(59,143,63,.12); color:#4aab4f; border-radius:999px; font-size:.68rem; font-weight:600; padding:2px 8px; display:inline-block; }
.product-badge.hybrid { background:rgba(196,122,40,.12); color:#e8943a; }
.product-badge.indica { background:rgba(123,63,160,.12); color:#a06ad4; }
.product-price { font-size:1.1rem; font-weight:700; color:#4aab4f; }

/* Category filter */
.cat-btn { padding:5px 14px; border-radius:999px; border:1px solid var(--lush-border); background:transparent; color:var(--lush-muted); cursor:pointer; font-size:.85rem; transition:all .15s; }
.cat-btn.active { background:var(--lush-sativa); border-color:var(--lush-sativa); color:#fff; }
.cat-btn.active.hybrid { background:var(--lush-hybrid); border-color:var(--lush-hybrid); }
.cat-btn.active.indica { background:var(--lush-indica); border-color:var(--lush-indica); }

/* Overlay / notification modal */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; backdrop-filter:blur(4px); }
.notif-modal { background:var(--lush-surface); border:1px solid var(--lush-border); border-radius:12px; width:100%; max-width:480px; overflow:hidden; }
.notif-badge { background:var(--lush-copper); color:#fff; font-size:.75rem; font-weight:700; padding:4px 16px; letter-spacing:1px; }
.notif-badge.sativa { background:var(--lush-sativa); }
.notif-badge.indica { background:var(--lush-indica); }

/* Cart items */
.cart-item { background:var(--lush-surface); border:1px solid var(--lush-border); border-radius:10px; padding:.875rem; display:flex; align-items:center; gap:1rem; margin-bottom:.75rem; }
.cart-item-img { width:54px; height:54px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.qty-btn { background:var(--lush-surface2); border:1px solid var(--lush-border); color:#e8e8e8; width:28px; height:28px; border-radius:6px; cursor:pointer; }

/* Order tracker */
.tracker { display:flex; align-items:center; margin-bottom:2rem; overflow-x:auto; }
.tracker-dot { width:14px; height:14px; border-radius:50%; background:var(--lush-border); }
.tracker-step--done .tracker-dot { background:var(--lush-sativa); }
.tracker-line { flex:1; height:2px; background:var(--lush-border); min-width:32px; }
.tracker-line--done { background:var(--lush-sativa); }

/* Success icon */
.success-icon { width:72px; height:72px; border-radius:50%; background:rgba(59,143,63,.15); border:2px solid var(--lush-sativa); display:flex; align-items:center; justify-content:center; font-size:2rem; color:#4aab4f; margin:0 auto 1.25rem; }

/* Avatar */
.avatar { width:60px; height:60px; border-radius:50%; background:var(--lush-sativa); color:#fff; font-weight:700; font-size:1.2rem; display:flex; align-items:center; justify-content:center; }

/* Login page */
.page-login { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 64px); }
.login-logo { height:60px; }
.btn-google { background:#fff; color:#333; border:none; display:flex; align-items:center; gap:.75rem; width:100%; padding:11px 16px; border-radius:8px; font-weight:600; cursor:pointer; }
.btn-facebook { background:#1877f2; color:#fff; border:none; display:flex; align-items:center; gap:.75rem; width:100%; padding:11px 16px; border-radius:8px; font-weight:600; cursor:pointer; }

/* Payment */
.payment-option { display:flex; align-items:center; gap:.75rem; padding:.75rem; background:rgba(59,143,63,.08); border:1px solid var(--lush-sativa); border-radius:8px; }

/* Orders */
.order-card { background:var(--lush-surface); border:1px solid var(--lush-border); border-radius:12px; padding:1.25rem; cursor:pointer; transition:border-color .15s; margin-bottom:.875rem; }
.order-card:hover { border-color:var(--lush-sativa); }
.order-item-pill { padding:3px 10px; border-radius:999px; font-size:.75rem; color:#fff; display:inline-block; }

/* Recurring */
.recurring-card { background:var(--lush-surface); border:1px solid var(--lush-border); border-radius:12px; padding:1rem; display:flex; align-items:center; gap:1rem; margin-bottom:.875rem; }
.recurring-card--paused { opacity:.6; }

/* Back link */
.back-link { font-size:.85rem; color:var(--lush-muted); display:inline-block; margin-bottom:.75rem; }

/* Shop hero */
.shop-hero { background:linear-gradient(135deg, #0a0a0a 0%, #111111 100%); border:1px solid var(--lush-border); border-radius:12px; padding:2rem; margin-bottom:2rem; position:relative; overflow:hidden; }

/* Form overrides */
.form-control, .form-select { background:#181818 !important; border-color:#222 !important; color:#e8e8e8 !important; }
.form-control:focus, .form-select:focus { border-color:#3b8f3f !important; box-shadow:0 0 0 .25rem rgba(59,143,63,.25) !important; }

/* Button overrides */
.btn-primary { background:#3b8f3f; border-color:#3b8f3f; }
.btn-primary:hover { background:#338038; border-color:#338038; }
.btn-outline-secondary { border-color:#333; color:#999; }
.btn-outline-secondary:hover { background:#222; border-color:#444; color:#e8e8e8; }

/* Badge helpers */
.badge-sativa { background:rgba(59,143,63,.2); color:#4aab4f; }
.badge-hybrid { background:rgba(196,122,40,.2); color:#e8943a; }
.badge-indica { background:rgba(123,63,160,.2); color:#a06ad4; }

/* Legacy / shared utility */
.page { max-width:1100px; margin:0 auto; padding:1.25rem 1rem 2rem; }
.muted { color:var(--lush-muted); }
.accent { color:#4aab4f; }
.empty-state { text-align:center; padding:4rem 1rem; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.empty-icon { font-size:3rem; }

/* Cart layout */
.cart-layout { display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start; }
@media(max-width:700px){ .cart-layout { grid-template-columns:1fr; } }
.cart-items { display:flex; flex-direction:column; gap:.75rem; }
.cart-item-info { flex:1; }
.cart-item-name { font-weight:600; font-size:.95rem; }
.cart-item-unit { font-size:.8rem; }
.cart-item-price { font-weight:700; color:#4aab4f; margin-top:.2rem; }
.cart-item-qty { display:flex; align-items:center; gap:.5rem; }
.qty-val { font-weight:600; min-width:20px; text-align:center; }
.cart-remove { background:none; border:none; color:var(--lush-muted); cursor:pointer; font-size:.85rem; padding:4px; }
.cart-remove:hover { color:#e05555; }
.cart-summary { background:var(--lush-surface); border:1px solid var(--lush-border); border-radius:12px; padding:1.5rem; position:sticky; top:80px; }
.cart-summary h3 { margin-bottom:1rem; }
.summary-row { display:flex; justify-content:space-between; font-size:.9rem; margin-bottom:.5rem; }
.summary-total { font-size:1.05rem; font-weight:700; margin-bottom:1rem; }
.summary-divider { height:1px; background:var(--lush-border); margin:.75rem 0; }

/* Checkout */
.checkout-layout { display:grid; grid-template-columns:1fr 340px; gap:2rem; align-items:start; }
@media(max-width:800px){ .checkout-layout { grid-template-columns:1fr; } }
.checkout-form { display:flex; flex-direction:column; gap:1rem; }
.payment-mock { background:var(--lush-surface); border:1px solid var(--lush-border); border-radius:8px; padding:1rem; margin-top:.5rem; }
.payment-icon { font-size:1.4rem; }
.payment-check { margin-left:auto; color:#4aab4f; font-weight:700; }
.checkout-summary { background:var(--lush-surface); border:1px solid var(--lush-border); border-radius:12px; padding:1.5rem; position:sticky; top:80px; }
.checkout-summary h3 { margin-bottom:1rem; }
.summary-item { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; font-size:.88rem; }
.summary-item-img { width:36px; height:36px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.summary-item-info { flex:1; display:flex; justify-content:space-between; }

/* Success page */
.page-success { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 64px); }
.success-card { width:100%; max-width:520px; background:var(--lush-surface); border:1px solid var(--lush-border); border-radius:12px; padding:2.5rem 2rem; text-align:center; }
.success-card h1 { font-size:1.75rem; margin-bottom:.5rem; }
.success-id { color:var(--lush-muted); font-size:.9rem; margin-bottom:.25rem; }
.success-eta { margin-bottom:1.5rem; font-size:.95rem; }
.success-items { text-align:left; margin-bottom:1rem; display:flex; flex-direction:column; gap:.5rem; }
.success-item { display:flex; align-items:center; gap:.75rem; font-size:.88rem; }
.success-item-img { width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.success-item span:last-child { margin-left:auto; font-weight:600; }
.success-total { font-weight:700; font-size:1rem; margin-bottom:.5rem; }
.success-address { font-size:.82rem; color:var(--lush-muted); margin-bottom:1.5rem; }
.success-actions { display:flex; gap:.75rem; justify-content:center; }

/* Orders page */
.orders-list { display:flex; flex-direction:column; gap:.875rem; margin-top:1.25rem; }
.order-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.75rem; }
.order-id { font-weight:700; font-size:.95rem; display:block; }
.order-date { font-size:.8rem; display:block; }
.order-card-items { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem; }
.order-card-footer { display:flex; justify-content:space-between; align-items:center; }
.order-total { font-weight:700; color:#4aab4f; }
.order-arrow { color:var(--lush-muted); }

/* Order detail */
.order-detail-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:2rem; }
.order-detail-header h1 { font-size:1.4rem; }
.tracker-step { display:flex; flex-direction:column; align-items:center; gap:.3rem; min-width:80px; }
.tracker-step span { font-size:.72rem; color:var(--lush-muted); text-align:center; }
.tracker-step--done span { color:#e8e8e8; }
.order-detail-layout { display:grid; grid-template-columns:1fr 300px; gap:2rem; }
@media(max-width:700px){ .order-detail-layout { grid-template-columns:1fr; } }
.order-detail-items h3 { margin-bottom:.75rem; }
.order-detail-item { display:flex; align-items:center; gap:1rem; margin-bottom:.75rem; }
.address-card { background:var(--lush-surface2); border:1px solid var(--lush-border); border-radius:8px; padding:1rem; font-size:.9rem; line-height:1.8; }

/* Account page */
.account-layout { display:flex; flex-direction:column; gap:1.5rem; }
.account-section { background:var(--lush-surface); border:1px solid var(--lush-border); border-radius:12px; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.profile-card { display:flex; align-items:center; gap:1.25rem; }
.profile-name { font-weight:700; font-size:1.05rem; }
.profile-email { font-size:.85rem; }
.prefs-list { display:flex; flex-direction:column; gap:.6rem; }
.pref-row { display:flex; align-items:center; gap:.75rem; cursor:pointer; font-size:.9rem; }
.pref-row input[type=checkbox] { accent-color:var(--lush-sativa); width:16px; height:16px; }
.account-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.5rem; }

/* Recurring page */
.recurring-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem; }
.recurring-header h1 { margin:.25rem 0; }
.add-recurring-card { background:var(--lush-surface); border:1px solid var(--lush-sativa); border-radius:12px; padding:1.5rem; margin-bottom:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.add-recurring-card h3 { margin-bottom:0; }
.recurring-list { display:flex; flex-direction:column; gap:.875rem; }
.recurring-img { width:52px; height:52px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.recurring-info { flex:1; }
.recurring-name { font-weight:600; font-size:.95rem; }
.recurring-meta { font-size:.8rem; margin:.2rem 0; }
.recurring-next { display:flex; align-items:center; font-size:.8rem; margin-top:.3rem; }
.recurring-price { font-weight:700; color:#4aab4f; white-space:nowrap; font-size:.95rem; }
.recurring-actions { display:flex; flex-direction:column; gap:.4rem; }

/* Notification modal extras */
.notif-img { height:180px; display:flex; align-items:center; justify-content:center; position:relative; }
.notif-img .product-emoji { font-size:4.5rem; }
.notif-body { padding:1.25rem 1.5rem 1.5rem; }
.notif-title { font-size:1.4rem; font-weight:700; margin:.25rem 0 .5rem; }
.notif-desc { font-size:.875rem; color:var(--lush-muted); margin-bottom:.875rem; line-height:1.5; }
.notif-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1rem; }
.notif-price { font-size:1.05rem; font-weight:700; color:#4aab4f; margin-left:auto; }
.notif-actions { display:flex; gap:.75rem; }

/* Form inputs (non-Bootstrap) */
.form-group { display:flex; flex-direction:column; gap:.3rem; }
.form-label { font-size:.82rem; color:var(--lush-muted); font-weight:500; }
.form-input { background:var(--lush-surface2); border:1px solid var(--lush-border); color:#e8e8e8; border-radius:8px; padding:10px 12px; font-size:.95rem; width:100%; transition:border-color .15s; }
.form-input:focus { outline:none; border-color:var(--lush-sativa); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-textarea { min-height:80px; resize:vertical; }
.field-error { font-size:.78rem; color:#e05555; }

/* Utility */
.error   { color:#e05555; }
.success { color:#3b8f3f; }

/* ── Compact product image ─────────────────────────────────────── */
.product-img-sm { height:90px; display:flex; align-items:center; justify-content:center; position:relative; }
.product-emoji-sm { font-size:2rem; }
.was-price { color:var(--lush-muted); font-size:.75rem; text-decoration:line-through; }
.product-name-clamp {
  font-size:.85rem; line-height:1.2; font-weight:700;
  min-height:2.05rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── Sticky checkout bar ───────────────────────────────────────── */
.sticky-cart {
  position:static; bottom:0; left:0; right:0; z-index:150;
  background:#000; border-top:1px solid var(--lush-border);
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.25rem;
  animation:slideUp .2s ease;
}
.sticky-cart-left { display:flex; align-items:center; gap:.5rem; font-size:.9rem; }
.sticky-cart-count { font-weight:600; color:var(--lush-accent-light,#4aab4f); }
.sticky-cart-divider { color:var(--lush-muted); }
.sticky-cart-total { font-weight:700; }
.sticky-cart-actions { display:flex; gap:.5rem; }

/* ── Inline notification banner ────────────────────────────────── */
.inline-notif {
  display:flex; align-items:center; gap:.875rem;
  background:var(--lush-surface); border:1px solid var(--lush-border);
  border-radius:10px; padding:.75rem 1rem;
  border-left:3px solid var(--lush-copper);
}
.inline-notif-img {
  width:44px; height:44px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.inline-notif-body { flex:1; display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.inline-notif-price { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.1rem; flex-shrink:0; }

/* ── Discount badge ────────────────────────────────────────────── */
.discount-badge {
  background:rgba(220,53,69,.15); color:#e05555;
  border-radius:999px; font-size:.65rem; font-weight:700; padding:1px 6px;
}

/* ── Checkout fulfilment toggle ────────────────────────────────── */
.fulfil-toggle { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:.5rem; }
.fulfil-opt {
  display:flex; flex-direction:column; align-items:flex-start; gap:.1rem;
  padding:.85rem 1rem; border-radius:10px; cursor:pointer; text-align:left;
  background:var(--lush-surface2); border:1px solid var(--lush-border); color:#e8e8e8;
  transition:border-color .15s, background .15s;
}
.fulfil-opt:hover { border-color:var(--lush-muted); }
.fulfil-opt.active { border-color:var(--lush-sativa); background:rgba(59,143,63,.1); }
.fulfil-icon { font-size:1.4rem; }
.fulfil-label { font-weight:700; font-size:.95rem; }
.fulfil-sub { font-size:.72rem; color:var(--lush-muted); }

/* ── Pickup location selector ──────────────────────────────────── */
.pickup-list { display:flex; flex-direction:column; gap:.5rem; }
.pickup-opt {
  display:flex; align-items:center; gap:.75rem; cursor:pointer;
  padding:.75rem; border-radius:10px;
  background:var(--lush-surface2); border:1px solid var(--lush-border);
  transition:border-color .15s, background .15s;
}
.pickup-opt:hover { border-color:var(--lush-muted); }
.pickup-opt.active { border-color:var(--lush-sativa); background:rgba(59,143,63,.1); }
.pickup-opt input[type=radio] { display:none; }
.pickup-info { flex:1; display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.pickup-info strong { font-size:.9rem; }
.pickup-info .muted { font-size:.78rem; }
.pickup-hours { font-size:.72rem; color:var(--lush-accent-light,#4aab4f); }
.pickup-check { color:var(--lush-accent-light,#4aab4f); font-weight:700; opacity:0; flex-shrink:0; }
.pickup-opt.active .pickup-check { opacity:1; }

/* ── Cover image cards (catalogue cartridges) ──────────────────── */
.product-cover-wrap { position:relative; width:100%; aspect-ratio:3/4; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-cover-wrap.compact { aspect-ratio:4/5; }
.product-cover { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* ── Payment gateway overlay + chips + steppers ────────────────── */
.pay-overlay { position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:300; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.pay-modal { background:var(--lush-surface); border:1px solid var(--lush-border); border-radius:14px; padding:2rem 2.5rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.pay-spinner { width:48px; height:48px; border:4px solid var(--lush-border); border-top-color:var(--lush-sativa); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.pay-status { font-size:1.1rem; font-weight:700; margin:0; }
.chip-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { padding:7px 14px; border-radius:999px; border:1px solid var(--lush-border); background:var(--lush-surface2); color:#bbb; cursor:pointer; font-size:.82rem; transition:all .15s; }
.chip.active { background:var(--lush-sativa); border-color:var(--lush-sativa); color:#fff; }
.stepper { display:inline-flex; align-items:center; gap:.75rem; }
.stepper button { width:34px; height:34px; border-radius:8px; border:1px solid var(--lush-border); background:var(--lush-surface2); color:#e8e8e8; font-size:1.1rem; cursor:pointer; }
.stepper .val { min-width:24px; text-align:center; font-weight:700; }

/* ── Recurring redesign ────────────────────────────────────────── */
.btn-outline-warning { border-color:#c47a28; color:#e8943a; }
.btn-outline-warning:hover { background:rgba(196,122,40,.15); color:#e8943a; }
.btn-outline-danger { border-color:#7a2a2a; color:#e06666; }
.btn-outline-danger:hover { background:rgba(122,42,42,.2); color:#fff; }
.recurring-card.paused { opacity:.6; }
.recurring-freq-chips { display:flex; gap:.4rem; flex-wrap:wrap; }

/* ── Recurring card vertical layout ────────────────────────────── */
.recurring-card { flex-direction:column; align-items:stretch; gap:1rem; }
.recurring-card-top { display:flex; align-items:center; gap:1rem; }
.recurring-img { width:54px; height:54px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.recurring-info { flex:1; display:flex; flex-direction:column; gap:.25rem; }
.recurring-name { font-weight:700; font-size:1rem; }
.recurring-price { font-weight:600; }
.recurring-controls { display:flex; flex-wrap:wrap; gap:1.25rem; }
.recurring-control-group { display:flex; flex-direction:column; gap:.4rem; }
.recurring-control-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; }
.recurring-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── Bottom tab bar (app nav) ──────────────────────────────────── */
.app-tabs { flex:0 0 auto; display:flex; background:#000; border-top:1px solid var(--lush-border); padding-bottom:env(safe-area-inset-bottom,0); }
.app-tabs .tab { flex:1; background:none; border:none; color:var(--lush-muted); display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px 10px; cursor:pointer; }
.app-tabs .tab .tab-icon { font-size:1.25rem; line-height:1; }
.app-tabs .tab .tab-label { font-size:.66rem; }
.app-tabs .tab.active { color:var(--lush-accent-light,#4aab4f); }

/* ── Tracker (fixed layout) ────────────────────────────────────── */
.tracker { display:flex; align-items:flex-start; margin:1.5rem 0; }
.tracker-step { display:flex; flex-direction:column; align-items:center; gap:.35rem; width:66px; flex-shrink:0; }
.tracker-step span { font-size:.66rem; text-align:center; color:var(--lush-muted); line-height:1.15; }
.tracker-step--done span { color:#e8e8e8; }
.tracker-dot { width:16px; height:16px; border-radius:50%; background:var(--lush-border); }
.tracker-step--done .tracker-dot { background:var(--lush-sativa); }
.tracker-line { flex:1; height:2px; background:var(--lush-border); margin-top:7px; }
.tracker-line--done { background:var(--lush-sativa); }

/* ── Star ratings ──────────────────────────────────────────────── */
.star-rating { display:inline-flex; gap:1px; cursor:pointer; user-select:none; line-height:1; }
.star-rating .star { color:var(--lush-gold,#d4943a); transition:transform .1s; }
.star-rating .star:hover { transform:scale(1.15); }
.star-sm { font-size:.95rem; }
.star-md { font-size:1.2rem; }
.star-lg { font-size:1.6rem; }
.rate-row { display:flex; align-items:center; gap:.4rem; margin-top:.3rem; }
.rate-label { font-size:.72rem; color:var(--lush-muted); }

/* ── QR collection card ────────────────────────────────────────── */
.qr-card { display:flex; align-items:center; gap:1rem; background:var(--lush-surface); border:1px solid var(--lush-sativa); border-radius:12px; padding:1rem 1.25rem; margin-bottom:1.5rem; }
.qr-card-text { flex:1; }
.qr-img { border-radius:8px; flex-shrink:0; background:#fff; padding:6px; }

/* ── Tracker: fit without horizontal scroll ────────────────────── */
.tracker { overflow: visible !important; align-items: flex-start; }
.tracker-step { width: auto !important; flex: 1 1 0; min-width: 0; }
.tracker-step span { font-size: .62rem; }
.tracker-line { flex: 1 1 0; }

/* ── Install button ────────────────────────────────────────────── */
.install-btn { white-space: nowrap; font-weight: 600; }

/* ── Client name in top nav ────────────────────────────────────── */
.nav-user { display:flex; align-items:center; gap:.5rem; text-decoration:none; min-width:0; }
.nav-user:hover { text-decoration:none; }
.nav-user-avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--lush-sativa),#2e6f31); color:#fff; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; letter-spacing:.5px; }
.nav-username { color:#e8e8e8; font-size:.88rem; font-weight:600; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Account address editors ───────────────────────────────────── */
.addr-editor { background:var(--lush-surface2); border:1px solid var(--lush-border); border-radius:10px; padding:1rem; margin-bottom:.875rem; display:flex; flex-direction:column; gap:.75rem; }
.addr-editor-title { font-weight:700; font-size:.95rem; }
.addr-edit-link { font-size:.78rem; color:var(--lush-accent-light,#4aab4f); white-space:nowrap; }

/* ── Client tier badges ──────────────────────────────────────────────── */
.tier-badge { font-size:.6rem; font-weight:800; letter-spacing:.5px; padding:1px 7px; border-radius:999px; text-transform:uppercase; }
.tier-gold   { background:linear-gradient(135deg,#d4af37,#b8902a); color:#1a1400; }
.tier-silver { background:linear-gradient(135deg,#cfcfd6,#9a9aa4); color:#1a1a1a; }
.tier-bronze { background:linear-gradient(135deg,#cd7f32,#9c5e22); color:#1a0f00; }
.gold-badge { background:rgba(212,175,55,.18); color:#e7c24c; border:1px solid rgba(212,175,55,.4); font-size:.6rem; font-weight:700; padding:1px 6px; border-radius:999px; }

/* ── Favourite remove button ─────────────────────────────────────────── */
.fav-remove { position:absolute; top:6px; right:6px; z-index:2; width:22px; height:22px; border-radius:50%; border:none; background:rgba(0,0,0,.6); color:#fff; font-size:.85rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.fav-remove:hover { background:rgba(220,53,69,.8); }
.fav-card-wrap { position:relative; }

/* ── Favourite heart toggle ────────────────────────────────────── */
.fav-heart { position:absolute; top:8px; right:8px; z-index:2; width:30px; height:30px; border-radius:50%; border:none; background:rgba(0,0,0,.5); color:#fff; font-size:1.05rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); transition:transform .1s; }
.fav-heart:hover { transform:scale(1.12); }
.fav-heart.active { color:#ff5a7a; }

/* ── Cart stepper (qty on Add-to-Cart) ─────────────────────────── */
.cart-stepper { display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:rgba(59,143,63,.12); border:1px solid var(--lush-sativa); border-radius:8px; padding:3px; }
.cart-stepper .cs-btn { width:32px; height:30px; border:none; border-radius:6px; background:var(--lush-sativa); color:#fff; font-size:1.1rem; line-height:1; cursor:pointer; flex-shrink:0; }
.cart-stepper .cs-btn:hover { background:#338038; }
.cart-stepper .cs-label { flex:1; text-align:center; font-size:.82rem; font-weight:700; color:var(--lush-accent-light,#4aab4f); }

/* ── Product detail page ───────────────────────────────────────── */
.page-product { max-width:760px; }
.pd-hero { position:relative; width:100%; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; aspect-ratio:16/10; }
.pd-hero-img { width:100%; height:100%; object-fit:contain; }
.pd-hero-emoji { font-size:6rem; }
.pd-title { font-size:1.8rem; font-weight:800; margin:.1rem 0 .15rem; }
.pd-tagline { font-size:.95rem; margin-bottom:.75rem; }
.pd-price { font-size:1.6rem; font-weight:800; color:var(--lush-accent-light,#4aab4f); }
.pd-section { font-size:.8rem; text-transform:uppercase; letter-spacing:1.5px; color:#fff; margin:1.25rem 0 .5rem; }
.pd-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.pd-chip { background:var(--lush-surface2); border:1px solid var(--lush-border); border-radius:999px; padding:5px 12px; font-size:.82rem; }
.pd-chip.sativa { border-color:rgba(59,143,63,.5); color:#4aab4f; }
.pd-chip.hybrid { border-color:rgba(196,122,40,.5); color:#e8943a; }
.pd-chip.indica { border-color:rgba(123,63,160,.5); color:#a06ad4; }
.pd-actions { display:flex; align-items:center; gap:.75rem; margin-top:1.5rem; }
.pd-stepper { flex:1; }