:root {
  --ink: #14261f;
  --ink-soft: #263d33;
  --muted: #77877d;
  --line: #e5e9e3;
  --paper: #ffffff;
  --canvas: #f5f6f1;
  --green: #12694d;
  --green-dark: #0c4d38;
  --green-bright: #38a77a;
  --green-pale: #e9f4ec;
  --gold: #d6b36e;
  --danger: #a73535;
  --shadow: 0 26px 80px rgba(18, 39, 29, .11);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  background:
    radial-gradient(ellipse at 7% 7%, rgba(215, 231, 214, .62), transparent 29rem),
    radial-gradient(ellipse at 96% 76%, rgba(235, 224, 194, .28), transparent 28rem),
    linear-gradient(145deg, #fafbf8 0%, #f3f6f0 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex; flex-direction: column; -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .66; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(56,167,122,.45); outline-offset: 3px; }
.hidden { display: none !important; }
.site-header {
  width: min(1180px, calc(100% - 48px)); min-height: 86px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(211, 222, 211, .84);
}
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; min-width: 0; }
.brand-icon {
  position: relative; width: 47px; height: 47px; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden; border-radius: 15px;
  color: #fff; font-size: 13px; font-weight: 900; letter-spacing: -.05em;
  background: linear-gradient(145deg, #194b38, #102b20 78%);
  box-shadow: 0 8px 20px rgba(15, 66, 45, .19), inset 0 1px 0 rgba(255,255,255,.16);
}
.brand-icon::after { content: ""; position: absolute; width: 44px; height: 44px; border: 1px solid rgba(216,183,111,.45); border-radius: 13px; transform: rotate(24deg) translate(18px, 16px); }
.brand-spark { position: absolute; top: 5px; right: 6px; color: var(--gold); font-size: 8px; }
.brand-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brand-name strong { font-size: 12px; letter-spacing: .1em; font-weight: 900; white-space: nowrap; }
.brand-name strong em { color: var(--green); font-style: normal; }
.brand-name small { color: #89958c; font-size: 9px; letter-spacing: .22em; font-weight: 800; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-status { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid #e0e7de; border-radius: 999px; color: #557164; background: rgba(255,255,255,.68); font-size: 10px; letter-spacing: .075em; font-weight: 850; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #36a275; box-shadow: 0 0 0 4px rgba(54,162,117,.11); }
.page-shell {
  flex: 1; width: min(1100px, calc(100% - 48px)); display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(365px, 430px);
  align-items: center; gap: clamp(42px, 7vw, 104px); margin: 54px auto 58px;
}
.welcome-copy { max-width: 570px; padding: 4px 0 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: #6f8c7b; font-size: 10px; font-weight: 900; letter-spacing: .19em; }
.eyebrow-line { width: 28px; height: 2px; border-radius: 4px; background: var(--gold); }
h1 { max-width: 600px; margin: 0; font-size: clamp(39px, 4.6vw, 59px); line-height: 1.065; letter-spacing: -.065em; font-weight: 780; }
h1 > span { color: var(--green); }
.welcome-lede { max-width: 430px; margin: 22px 0 0; color: #6e7e73; font-size: 15px; line-height: 1.8; }
.hero-art {
  min-height: 204px; margin-top: 30px; position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid rgba(255,255,255,.11); border-radius: 22px;
  background: linear-gradient(115deg, #142f24 0%, #183d2d 58%, #0e291e 100%);
  box-shadow: 0 20px 42px rgba(20, 52, 36, .16);
}
.hero-art::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .14; background-image: radial-gradient(rgba(255,255,255,.9) .65px, transparent .65px); background-size: 17px 17px; mask-image: linear-gradient(90deg, #000, transparent 90%); }
.art-orb { position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(213,183,113,.22); }
.orb-one { width: 260px; height: 260px; right: -55px; top: -85px; box-shadow: 0 0 0 25px rgba(255,255,255,.018), 0 0 0 50px rgba(255,255,255,.015); }
.orb-two { width: 164px; height: 164px; right: -7px; top: -38px; border-color: rgba(214,179,110,.4); }
.art-grid { position: absolute; right: 42px; bottom: 18px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 45% 35%, rgba(73,166,115,.24), rgba(48,117,79,.02) 70%); }
.art-content { position: relative; padding: 22px 25px 20px; }
.art-topline { display: flex; align-items: center; gap: 10px; }
.art-mark { display: grid; place-items: center; width: 29px; height: 29px; color: #192e22; background: var(--gold); border-radius: 9px; font-size: 9px; font-weight: 900; letter-spacing: -.04em; }
.art-tag { color: #bbd1c0; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.art-heading { margin-top: 18px; color: white; font-size: 25px; font-weight: 730; letter-spacing: -.045em; line-height: 1.1; }
.art-heading span { color: #dbc184; }
.art-rule { height: 1px; width: 100%; max-width: 315px; margin-top: 18px; background: linear-gradient(90deg, rgba(255,255,255,.22), transparent); }
.art-bottom { display: flex; align-items: center; gap: 10px; margin-top: 15px; }
.art-check { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(111,201,151,.4); border-radius: 50%; color: #88ddb0; font-size: 12px; }
.art-bottom > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.art-bottom small { color: #91b6a0; font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.art-bottom strong { color: #e6eee7; font-size: 10px; font-weight: 600; }
.quiet-note { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: #7c8980; font-size: 11px; line-height: 1.5; }
.note-mark { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; color: var(--green); border-radius: 7px; background: #e6f0e6; font-size: 11px; font-weight: 900; }
.auth-card, .account-card {
  width: 100%; position: relative; padding: 31px; border: 1px solid rgba(223,230,219,.96);
  border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: var(--shadow);
}
.auth-card::before, .account-card::before { content: ""; height: 3px; position: absolute; top: -1px; left: 26px; right: 26px; border-radius: 0 0 9px 9px; background: linear-gradient(90deg, var(--green), #4cab7a 55%, var(--gold)); }
.card-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-kicker { display: block; color: #799080; font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.lock-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--green); background: #edf5ee; }
.lock-mark svg, .otp-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
h2 { margin: 0; font-size: 27px; font-weight: 780; letter-spacing: -.052em; line-height: 1.2; }
.card-intro { margin: 9px 0 23px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; margin-bottom: 22px; border: 1px solid #edf0e9; border-radius: 13px; background: #f5f7f2; }
.auth-tab { min-height: 39px; border: 0; border-radius: 9px; padding: 10px; color: #7b897e; font-size: 12px; font-weight: 800; background: transparent; transition: background .18s, color .18s, box-shadow .18s; }
.auth-tab.active { color: #173528; background: #fff; box-shadow: 0 2px 8px rgba(31,56,36,.09), inset 0 0 0 1px rgba(226,234,224,.72); }
.form-stack { display: flex; flex-direction: column; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 8px; color: #435b4b; font-size: 11px; font-weight: 800; }
.field input { width: 100%; min-width: 0; height: 48px; border: 1px solid #dfe7dd; border-radius: 11px; outline: none; padding: 0 13px; color: var(--ink); background: #fbfcfa; font-size: 13px; font-weight: 500; transition: border-color .16s, box-shadow .16s, background .16s; }
.field input::placeholder { color: #a0aaa0; }
.field input:focus { border-color: #54a57d; background: #fff; box-shadow: 0 0 0 4px rgba(31,139,98,.10); }
.field small { color: #8b978d; font-size: 10px; font-weight: 500; }
.password-row { display: flex; align-items: center; position: relative; }
.password-row input { padding-right: 58px; }
.show-password { position: absolute; right: 7px; border: 0; padding: 7px 8px; color: var(--green-dark); border-radius: 7px; background: transparent; font-size: 11px; font-weight: 800; }
.show-password:hover { background: #eaf4ec; }
.form-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -5px; min-height: 17px; }
.password-requirement { color: #95a095; font-size: 10px; }
.text-link { border: 0; padding: 2px 0; color: var(--green-dark); background: transparent; font-size: 11px; font-weight: 800; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.centered { display: block; align-self: center; }
.primary-button, .secondary-button {
  display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 49px;
  border: 1px solid transparent; border-radius: 11px; padding: 12px 16px;
  font-size: 12px; font-weight: 850; transition: transform .16s, background .16s, box-shadow .16s, border-color .16s;
}
.primary-button { color: #fff; background: linear-gradient(115deg, #155e43, #21835c); box-shadow: 0 8px 17px rgba(20,105,77,.16); }
.primary-button:hover:not(:disabled) { background: linear-gradient(115deg, #104b35, #1a714e); box-shadow: 0 11px 22px rgba(20,105,77,.23); transform: translateY(-1px); }
.primary-button span { font-size: 15px; }
.secondary-button { color: #405d4c; background: #fff; border-color: #dfe7dc; }
.secondary-button:hover:not(:disabled) { background: #f6f9f4; border-color: #cbdccb; }
.form-message { margin: 0; border-radius: 10px; padding: 11px 12px; font-size: 11px; line-height: 1.6; }
.form-message.error { color: #963535; border: 1px solid #efd2d2; background: #fff6f5; }
.form-message.success { color: #185e40; border: 1px solid #cde5d2; background: #f0faf2; }
.card-footnote { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 22px 0 0; padding-top: 17px; border-top: 1px solid #edf0e9; color: #97a096; font-size: 10px; line-height: 1.5; text-align: center; }
.footnote-check { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #347858; background: #edf5ec; font-size: 9px; font-weight: 900; }
.verification-panel, .forgot-panel { padding-top: 2px; }
.otp-icon, .account-success-icon { display: grid; place-items: center; width: 49px; height: 49px; margin: 6px auto 17px; border-radius: 16px; color: var(--green); background: #e9f4eb; font-size: 20px; font-weight: 800; }
.otp-copy { color: var(--muted); font-size: 12px; line-height: 1.7; text-align: center; margin: 0 0 20px; }
#verificationCode { text-align: center; letter-spacing: .35em; font-size: 20px; font-weight: 850; }
.account-card { grid-column: 1 / -1; max-width: 670px; justify-self: center; padding: 34px; }
.account-card-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; }
.account-card-header .card-kicker { margin-bottom: 10px; }
.account-card-header .account-success-icon { margin: 0; flex: 0 0 auto; }
.account-card h2 { font-size: 31px; }
.account-email { margin: 8px 0 0; color: var(--green-dark); font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.account-divider { height: 1px; background: var(--line); margin: 25px 0 19px; }
.account-description { max-width: 480px; margin: 0 auto 22px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.account-actions { width: min(100%, 340px); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.button-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #d8e9d9; background: rgba(255,255,255,.13); font-size: 13px; }
.deposit-panel { margin-top: 28px; padding-top: 25px; border-top: 1px solid var(--line); text-align: left; }
.deposit-heading { display: flex; justify-content: space-between; align-items: center; }
.close-inline { border: 0; width: 31px; height: 31px; border-radius: 9px; color: #5a7064; background: #f0f5ef; font-size: 22px; line-height: 1; }
.deposit-panel h3 { margin: 9px 0; font-size: 22px; letter-spacing: -.04em; }
.payment-note { margin: 0 0 15px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.till-box { display: flex; flex-direction: column; gap: 8px; margin: 17px 0 10px; padding: 16px; border: 1px dashed #bfd3bd; border-radius: 13px; background: linear-gradient(120deg, #f5faf4, #fbfcf8); }
.till-box span { color: #738778; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 900; }
.till-box strong { color: #176247; font-size: 21px; overflow-wrap: anywhere; }
.setup-hint { margin: 0 0 14px; color: #96662a; font-size: 11px; }
.payment-disclaimer { margin: 16px 0 0; padding: 12px 13px; border-radius: 10px; color: #82704d; background: #fbf7ec; font-size: 10px; line-height: 1.6; }
.my-payments, .admin-payments { margin-top: 24px; }
.my-payments h4, .admin-payments h4 { margin: 0 0 11px; color: var(--ink-soft); font-size: 13px; }
.payments-list { display: flex; flex-direction: column; gap: 9px; }
.payment-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid #e7ebe3; border-radius: 11px; background: #fbfcf9; font-size: 11px; }
.payment-row strong { display: block; margin-bottom: 4px; font-size: 12px; }
.payment-row small { display: block; margin-top: 3px; color: #7e8c81; overflow-wrap: anywhere; }
.payment-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
.payment-status { color: #8c692b; font-weight: 850; text-transform: uppercase; font-size: 9px; letter-spacing: .08em; }
.review-actions { display: flex; gap: 5px; }
.review-actions button { border: 1px solid #d6e4d6; border-radius: 7px; padding: 6px 8px; background: white; color: #236948; font-size: 10px; font-weight: 800; }
.review-actions button:last-child { color: #a13a3a; }
.muted { color: #7f8d81; font-size: 12px; }
.site-footer { width: min(1180px, calc(100% - 48px)); margin: 0 auto; min-height: 65px; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #929d91; border-top: 1px solid rgba(211,222,211,.84); font-size: 10px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; width: min(450px, calc(100% - 32px)); padding: 14px 16px; border: 1px solid #dbe8dc; border-radius: 13px; color: #234637; background: white; box-shadow: 0 12px 40px rgba(30,68,49,.15); font-size: 12px; line-height: 1.5; }
.toast.error { border-color: #efd0d0; color: #a33737; }
.toast a { color: var(--green-dark); font-weight: 800; }
.reset-shell { width: min(100% - 32px, 500px); margin: auto; padding: 50px 0; }
.reset-card { padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow); }
.reset-card .brand { margin-bottom: 30px; }
.reset-card h1 { margin: 14px 0; font-size: 32px; }
.reset-card p { color: var(--muted); line-height: 1.7; font-size: 13px; }
.reset-card .back-link { display: inline-block; margin-top: 18px; color: var(--green-dark); text-decoration: none; font-size: 12px; font-weight: 750; }
.reset-message { margin-top: 14px; padding: 12px; border-radius: 10px; font-size: 12px; line-height: 1.6; }
.reset-message.success { color: #1c6948; background: #f0faf2; border: 1px solid #cfe8d6; }
.reset-message.error { color: #a13535; background: #fff4f4; border: 1px solid #f0d2d2; }
@media (max-width: 900px) {
  .page-shell { grid-template-columns: minmax(0, 1fr) minmax(340px, 410px); gap: 32px; }
  h1 { font-size: clamp(38px, 5vw, 52px); }
  .hero-art { min-height: 190px; }
}
@media (max-width: 760px) {
  .site-header { width: min(100% - 32px, 560px); min-height: 74px; }
  .page-shell { grid-template-columns: 1fr; width: min(100% - 32px, 470px); gap: 25px; margin: 30px auto 38px; }
  .welcome-copy { text-align: center; padding-top: 4px; }
  .eyebrow { justify-content: center; margin-bottom: 17px; }
  h1 { margin-inline: auto; font-size: clamp(36px, 8vw, 48px); }
  .welcome-lede { margin: 15px auto 0; font-size: 13px; }
  .hero-art { text-align: left; margin-top: 22px; min-height: 190px; }
  .quiet-note { justify-content: center; margin-top: 17px; font-size: 10px; }
  .auth-card, .account-card { padding: 25px; border-radius: 20px; }
  .account-card { grid-column: auto; }
  .site-footer { width: min(100% - 32px, 560px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding: 17px 0; }
}
@media (max-width: 430px) {
  .site-header { width: calc(100% - 24px); min-height: 70px; }
  .brand { gap: 9px; }
  .brand-icon { width: 40px; height: 40px; border-radius: 13px; }
  .brand-name strong { font-size: 9px; letter-spacing: .08em; }
  .brand-name small { font-size: 8px; }
  .header-status { padding: 9px 10px; font-size: 8px; }
  .page-shell { width: calc(100% - 24px); margin-top: 24px; }
  .auth-card, .account-card { padding: 21px 18px; }
  h2 { font-size: 25px; }
  .account-card-header { align-items: flex-start; }
  .account-card h2 { font-size: 27px; }
  .account-success-icon { width: 43px; height: 43px; }
  .payment-row { flex-direction: column; }
  .payment-row-right { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Daraja sandbox product checkout additions */
.stk-sandbox-card { margin-top: 24px; padding: 18px; border: 1px solid #dce8dc; border-radius: 16px; background: linear-gradient(145deg, #f7fbf5, #ffffff); }
.stk-sandbox-card h4 { margin: 10px 0 8px; color: var(--ink); font-size: 16px; letter-spacing: -.025em; }
.sandbox-note { margin: 0 0 16px; color: #718174; font-size: 11px; line-height: 1.65; }
.manual-payment-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0; color: #9aa59a; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.manual-payment-divider::before, .manual-payment-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
#stkCheckoutHint { padding: 10px 12px; border-radius: 10px; background: #fff7e8; color: #8b6325; line-height: 1.5; }
#stkPaymentStatus { padding: 10px 12px; border-radius: 10px; background: #f0f7f1; color: #275a3e; line-height: 1.5; }
#stkPaymentStatus.error, #stkPaymentMessage.error { background: #fff4f4; color: #a13535; }
#stkPaymentStatus.success, #stkPaymentMessage.success { background: #eef8f0; color: #1c6948; }
.stk-sandbox-card .payment-status { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: #fff1cf; color: #7b5a1b; }


/* Product catalog and admin store manager */
.storefront-section { margin: 26px 0 24px; padding: 20px; border: 1px solid #e1e9df; border-radius: 18px; background: rgba(255,255,255,.72); text-align: left; }
.storefront-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.storefront-heading h3 { margin: 4px 0 5px; font-size: 22px; letter-spacing:-.035em; }
.storefront-caption { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.product-catalog { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:13px; }
.product-card { overflow:hidden; display:flex; flex-direction:column; min-width:0; border:1px solid #e4ebe1; border-radius:15px; background:#fff; box-shadow:0 5px 18px rgba(18,39,29,.035); }
.product-card-image,.product-card-placeholder { width:100%; height:128px; object-fit:cover; background:#edf5ed; }
.product-card-placeholder { display:grid; place-items:center; color:#1c6749; font-size:37px; font-weight:900; background:linear-gradient(135deg,#eaf4e9,#fbf6e9); }
.product-card-body { display:flex; flex:1; flex-direction:column; gap:8px; padding:14px; }
.product-card h4 { margin:0; font-size:14px; color:var(--ink); overflow-wrap:anywhere; }
.product-card-description { min-height:38px; margin:0; color:var(--muted); font-size:11px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.product-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:9px; }
.product-card-foot strong { font-size:13px; color:#155e43; }
.product-choose-button { width:auto; min-height:37px; padding:9px 11px; border-radius:9px; font-size:10px; white-space:nowrap; }
.catalog-empty { grid-column:1/-1; padding:23px; border:1px dashed #ccdccc; border-radius:13px; text-align:center; background:#fbfdf9; }
.catalog-empty strong { display:block; color:var(--ink-soft); font-size:13px; }
.catalog-empty p { margin:8px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.account-actions-expanded { max-width:340px; }
.admin-wrap { width:min(1140px,calc(100% - 40px)); margin:36px auto 64px; }
.admin-topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:24px; }
.admin-topbar h1 { margin:7px 0; font-size:clamp(28px,4vw,42px); letter-spacing:-.05em; }
.admin-topbar p { max-width:600px; margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.admin-panel { padding:24px; margin-bottom:20px; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 12px 40px rgba(20,40,28,.045); }
.admin-panel h2 { margin:0 0 8px; font-size:20px; }
.admin-panel-intro { margin:0 0 20px; color:var(--muted); font-size:12px; line-height:1.6; }
.admin-product-grid { display:grid; grid-template-columns:1.2fr 1.8fr 1fr 2fr auto auto; gap:13px; align-items:end; }
.admin-product-grid .field { min-width:0; }
.admin-product-grid textarea { width:100%; min-height:92px; resize:vertical; border:1px solid #dce5d9; border-radius:10px; padding:11px 12px; color:var(--ink); font:inherit; font-size:12px; background:#fcfdfb; }
.admin-product-grid input[type="text"],.admin-product-grid input[type="number"],.admin-product-grid input[type="url"] { min-width:0; width:100%; }
.admin-checkbox { display:flex; gap:8px; align-items:center; min-height:42px; color:var(--ink-soft); font-size:12px; font-weight:700; }
.admin-form-actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.admin-form-actions button { width:auto; min-width:150px; }
.admin-product-list { display:grid; gap:11px; }
.admin-product-row { display:grid; grid-template-columns:82px minmax(0,1fr) auto; gap:15px; align-items:center; padding:13px; border:1px solid #e5ebe2; border-radius:14px; background:#fcfdfb; }
.admin-product-thumb { display:grid; place-items:center; width:82px; height:76px; overflow:hidden; border-radius:10px; color:#1c6749; font-size:26px; font-weight:900; background:#eef5ec; }
.admin-product-thumb img { width:100%; height:100%; object-fit:cover; }
.admin-product-detail { min-width:0; }
.admin-product-detail strong { display:block; color:var(--ink); font-size:13px; overflow-wrap:anywhere; }
.admin-product-detail p { margin:5px 0; color:var(--muted); font-size:11px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.admin-product-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:#286448; font-size:11px; font-weight:800; }
.admin-badge { padding:4px 7px; border-radius:999px; background:#eaf5eb; color:#246345; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.admin-badge.off { background:#f1f1ee; color:#7a8178; }
.admin-row-actions { display:flex; gap:7px; justify-content:flex-end; flex-wrap:wrap; }
.admin-row-actions button { width:auto; min-height:35px; padding:8px 11px; border:1px solid #dbe6d7; border-radius:9px; background:white; color:#315b43; font-size:10px; font-weight:800; }
.admin-row-actions button.danger { color:#a13a3a; border-color:#efd8d4; }
.admin-notice { margin:0 0 18px; padding:12px 14px; border-radius:11px; background:#f3f8f0; color:#335c42; font-size:12px; line-height:1.6; }
.admin-error { background:#fff4f4; color:#963535; }
.admin-footnote { color:#839084; font-size:11px; line-height:1.6; }
@media(max-width:900px) { .admin-product-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:620px) { .storefront-section { padding:15px; } .product-catalog { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); } .admin-wrap { width:calc(100% - 24px); margin:20px auto 40px; } .admin-panel { padding:17px; } .admin-topbar { align-items:flex-start; flex-direction:column; } .admin-product-grid { grid-template-columns:1fr; } .admin-product-row { grid-template-columns:58px minmax(0,1fr); } .admin-product-thumb { width:58px;height:58px; } .admin-row-actions { grid-column:1/-1; justify-content:flex-start; } }

/* Wallet + region based digital-proxy storefront */
.wallet-overview{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:20px 0 25px;padding:20px;border:1px solid #dce9dc;border-radius:18px;background:linear-gradient(120deg,#f2f8f1,#fffdf7)}
.wallet-overview h3{margin:5px 0 7px;font-size:18px;letter-spacing:-.025em}
.wallet-balance{display:block;color:#155e43;font-size:32px;letter-spacing:-.05em;line-height:1.1}
.wallet-overview .muted{margin:9px 0 0;font-size:10px}
.wallet-topup-toggle{width:auto;min-width:160px;white-space:nowrap}
.wallet-topup-panel{margin:0 0 25px;padding:22px;border:1px solid #dce9dc;border-radius:17px;background:#fbfdf9;text-align:left}
.wallet-topup-panel h3{margin:7px 0 0;font-size:21px}
.wallet-topup-panel .sandbox-note{margin:14px 0;padding:12px 14px;background:#fff8e8;border:1px solid #f0dfb8;border-radius:10px;color:#765b27;font-size:11px;line-height:1.6}
.orders-panel{margin:0 0 26px;padding:20px;border:1px solid #e3e9df;border-radius:16px;background:#fff;text-align:left}
.country-filter-field{display:flex;flex-direction:column;gap:7px;max-width:260px;margin:0 0 16px;color:#435b4b;font-size:11px;font-weight:800}
.country-filter-field select,.admin-product-grid select{width:100%;min-height:44px;border:1px solid #dfe7dd;border-radius:11px;padding:0 12px;background:#fff;color:#1d3428;font:inherit}
.product-card-body .region-chip,.region-chip{display:inline-flex;align-items:center;width:max-content;padding:5px 9px;border-radius:999px;background:#edf6ed;color:#246347;font-size:10px;font-weight:850;letter-spacing:.02em}
.product-card-foot{align-items:flex-start;flex-direction:column;gap:4px}
.stock-caption{font-size:10px;color:#718375;font-weight:600}
.product-card-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:13px}
.product-card-actions button{min-height:42px;padding:9px 12px;font-size:11px}
.product-wallet-button{border-color:#d9e6d8;background:#f8fbf6}
.delivery-card{padding:15px;margin:11px 0;border:1px solid #cfe1d0;border-radius:13px;background:#f9fcf8;min-width:0}
.delivery-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.delivery-card-head strong{font-size:13px;color:#1a3828}
.delivery-meta{margin:8px 0;color:#718075;font-size:10px}
.delivery-payload{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;margin:10px 0 12px;padding:13px;border-radius:9px;background:#12271e;color:#d5f6df;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;user-select:text}
.delivery-card .secondary-button{max-width:220px;min-height:38px}
.admin-product-meta .region-chip{margin-left:4px}
.admin-row-actions{flex-wrap:wrap}
@media(max-width:620px){.wallet-overview{align-items:stretch;flex-direction:column}.wallet-topup-toggle{width:100%}.orders-panel,.wallet-topup-panel{padding:15px}.product-card-actions{grid-template-columns:1fr}}


/* Member dashboard navigation, regional proxy art, security settings and support */
.member-dashboard-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 18px;text-align:left}
.dashboard-nav-item{display:flex;align-items:center;gap:10px;min-width:0;padding:13px;border:1px solid #e3eae1;border-radius:14px;text-decoration:none;color:var(--ink);background:linear-gradient(145deg,#fff,#f8fbf7);transition:transform .18s,border-color .18s,box-shadow .18s}
.dashboard-nav-item:hover{transform:translateY(-2px);border-color:#bdd8c1;box-shadow:0 8px 24px rgba(18,60,38,.07)}
.dashboard-nav-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:#eaf4e9;color:#196345;font-size:21px;font-weight:800}
.dashboard-nav-item span:last-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.dashboard-nav-item strong{font-size:12px;letter-spacing:-.015em}
.dashboard-nav-item small{color:var(--muted);font-size:9px;line-height:1.4}
.dashboard-overview-hero{position:relative;display:grid;grid-template-columns:1.15fr .85fr;min-height:212px;overflow:hidden;margin:0 0 18px;border-radius:20px;background:linear-gradient(115deg,#143929 0%,#1c5940 57%,#0b2b20 100%);text-align:left;box-shadow:0 16px 34px rgba(18,70,45,.13)}
.dashboard-overview-copy{position:relative;z-index:1;padding:24px 26px;color:#fff}
.dashboard-overview-copy .card-kicker{color:#b4d7bd}
.dashboard-overview-copy h3{max-width:330px;margin:10px 0;font-size:clamp(22px,3vw,31px);line-height:1.12;letter-spacing:-.05em}
.dashboard-overview-copy p:not(.card-kicker){max-width:350px;margin:0;color:#d2e2d4;font-size:12px;line-height:1.7}
.overview-cta{display:inline-flex;align-items:center;gap:12px;margin-top:17px;padding:10px 14px;border-radius:10px;background:#e6c982;color:#193627;text-decoration:none;font-size:11px;font-weight:900}
.overview-illustration{position:relative;overflow:hidden;min-height:210px;background:radial-gradient(circle at 60% 35%,rgba(239,213,147,.2),transparent 55%)}
.illustration-sun{position:absolute;width:112px;height:112px;top:16px;right:20%;border-radius:50%;background:linear-gradient(140deg,rgba(247,218,148,.8),rgba(247,218,148,.04));box-shadow:0 0 0 18px rgba(242,219,155,.06),0 0 0 38px rgba(242,219,155,.035)}
.illustration-building{position:absolute;bottom:31px;border:1px solid rgba(193,230,199,.25);background:linear-gradient(180deg,rgba(106,183,132,.65),rgba(29,95,65,.9));border-radius:8px 8px 0 0;box-shadow:inset 0 0 0 5px rgba(255,255,255,.025)}
.building-one{width:47px;height:99px;right:47%;}.building-two{width:68px;height:139px;right:27%;}.building-three{width:42px;height:77px;right:12%;}
.illustration-building:after{content:"";position:absolute;inset:12px 9px;background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(221,241,220,.28) 12px 14px),repeating-linear-gradient(90deg,transparent 0 11px,rgba(221,241,220,.28) 11px 13px)}
.illustration-node{position:absolute;z-index:2;display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(222,246,222,.45);border-radius:11px;background:#f3d58d;color:#173b29;font-weight:900;box-shadow:0 6px 18px rgba(0,0,0,.17)}
.node-one{right:54%;top:31px}.node-two{right:22%;top:94px;background:#d0f0d2}.node-three{right:41%;top:117px;background:#fff5d7}
.illustration-ground{position:absolute;right:-5%;bottom:0;left:-5%;height:34px;background:linear-gradient(0deg,#102c21,#184c35);transform:skewY(-3deg)}
.country-showcase{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:20px 0 18px}
.country-tile{display:flex;flex-direction:column;overflow:hidden;position:relative;min-width:0;padding:0;border:1px solid #e3ebe1;border-radius:15px;text-align:left;background:#fff;transition:transform .18s,border-color .18s,box-shadow .18s}
.country-tile:hover,.country-tile:focus-visible{transform:translateY(-3px);border-color:#b8d1b9;box-shadow:0 12px 24px rgba(20,62,37,.1)}
.country-tile-image{display:block;position:relative;height:94px;overflow:hidden;background:#dceee0}
.country-tile-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.country-tile:hover .country-tile-image img{transform:scale(1.045)}
.country-tile-meta{display:flex;flex-direction:column;gap:5px;padding:12px 11px;min-width:0}
.country-tile-meta strong{color:#1b3226;font-size:12px;overflow-wrap:anywhere}
.country-tile-meta small{color:#77877c;font-size:10px}
.country-tile-arrow{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:25px;height:25px;border-radius:8px;color:#184a32;background:rgba(255,255,255,.88);font-weight:900}
.checkout-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0 20px;padding:11px;border:1px solid #e7ece5;border-radius:13px;background:#fafcf9}
.checkout-step{display:flex;align-items:center;gap:8px;min-width:0;padding:7px;border-radius:9px;opacity:.58}
.checkout-step>span{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:50%;background:#dfe7de;color:#3d5c46;font-size:10px;font-weight:900}
.checkout-step div{display:flex;flex-direction:column;gap:3px;min-width:0}.checkout-step strong{font-size:10px;line-height:1.2}.checkout-step small{font-size:8px;color:#859187;line-height:1.2}
.checkout-step.is-active{background:#eaf5eb;opacity:1}.checkout-step.is-active>span{background:#176747;color:#fff}
.member-tool-panel{margin:23px 0;padding:22px;border:1px solid #e1e9df;border-radius:19px;background:linear-gradient(160deg,#fff 0%,#fbfdf9 100%);text-align:left;box-shadow:0 10px 26px rgba(19,46,30,.035);scroll-margin-top:22px}
.tool-panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:18px}.tool-panel-heading h3{margin:6px 0;font-size:22px;letter-spacing:-.04em}.tool-panel-heading p:not(.card-kicker){margin:0;color:var(--muted);font-size:11px;line-height:1.6;max-width:480px}
.tool-panel-icon{display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;border-radius:14px;background:#eaf4e9;color:#1b6848;font-size:22px}.support-icon{background:#e9f0ff;color:#365ba1}
.settings-profile-row{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:20px;border:1px solid #e6ece3;border-radius:13px;background:#f8fbf7}
.settings-avatar{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#173f2b,#2c7b50);color:#fff;font-weight:900;letter-spacing:-.04em}
.settings-profile-row>span:nth-child(2){display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}.settings-profile-row>span:nth-child(2) strong{font-size:12px}.settings-profile-row>span:nth-child(2) small{font-size:10px;color:var(--muted);overflow-wrap:anywhere}
.settings-verified{padding:5px 8px;border-radius:999px;background:#e8f5ea;color:#237247;font-size:9px;font-weight:850;white-space:nowrap}
.settings-password-form{max-width:540px}.settings-password-form h4{margin:0;font-size:15px}.settings-submit{max-width:220px}.settings-security-note{margin:0;color:#829085;font-size:10px;line-height:1.6}
.support-contact-row{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:14px;border:1px solid #dfe8f7;border-radius:13px;background:#f7faff}.support-contact-symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#e5edff;color:#3159a2;font-weight:900;font-size:20px}.support-contact-row>span:nth-child(2){display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.support-contact-row small{font-size:8px;color:#7180a0;font-weight:900;letter-spacing:.13em}.support-contact-row strong{font-size:12px;color:#263e68;overflow-wrap:anywhere}.support-mailto{width:auto;min-height:37px;padding:9px 12px;text-decoration:none;white-space:nowrap}
.support-form{max-width:640px}.support-form textarea{width:100%;min-height:130px;resize:vertical;border:1px solid #dfe7dd;border-radius:11px;padding:13px;color:var(--ink);background:#fbfcfa;font:inherit;font-size:13px;font-weight:500}.support-form textarea:focus{outline:none;border-color:#54a57d;box-shadow:0 0 0 4px rgba(31,139,98,.10);background:#fff}.support-form select,.support-form input{width:100%;min-height:46px;border:1px solid #dfe7dd;border-radius:11px;padding:0 12px;color:var(--ink);background:#fbfcfa;font:inherit;font-size:13px;font-weight:500}.support-form select:focus,.support-form input:focus{outline:none;border-color:#54a57d;box-shadow:0 0 0 4px rgba(31,139,98,.10);background:#fff}
@media(max-width:850px){.member-dashboard-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.country-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}.country-tile-image{height:115px}}
@media(max-width:620px){.member-dashboard-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.dashboard-nav-item{padding:10px;gap:8px}.dashboard-nav-icon{width:32px;height:32px;flex-basis:32px;font-size:18px}.dashboard-nav-item strong{font-size:11px}.dashboard-nav-item small{font-size:8px}.dashboard-overview-hero{grid-template-columns:1fr}.dashboard-overview-copy{padding:22px}.overview-illustration{position:absolute;inset:0 0 0 48%;opacity:.52}.country-showcase{gap:8px}.country-tile-image{height:84px}.checkout-steps{padding:6px;gap:2px}.checkout-step{gap:5px;padding:6px 2px}.checkout-step>span{flex-basis:22px;width:22px;height:22px}.checkout-step strong{font-size:8px}.checkout-step small{font-size:7px}.member-tool-panel{padding:16px}.tool-panel-heading h3{font-size:20px}.support-contact-row{align-items:flex-start;flex-wrap:wrap}.support-contact-row>span:nth-child(2){min-width:60%}.support-mailto{margin-left:54px}.settings-verified{font-size:8px}}


/* PENDING_BILLIONAIRES_EXPIRED_PROXY_STATUS_V1 */
.stock-caption.stock-has-expired{color:#96620a;font-weight:750}
.stock-caption.stock-is-expired{display:inline-flex;padding:5px 8px;border:1px solid #f0c4c4;border-radius:7px;background:#fff2f2;color:#a52d2d;font-weight:800}



/* PENDING_BILLIONAIRES_DASHBOARD_NAVIGATION_V1 */
.dashboard-nav-item.is-active{border-color:#8ab99a;background:linear-gradient(145deg,#edf8ef,#f8fbf7);box-shadow:0 8px 22px rgba(18,92,55,.09)}
.dashboard-nav-item.is-active .dashboard-nav-icon{background:#176747;color:#fff}
#dashboardOverview,#accountDescription,#walletOverview,#ordersPanel,#storefrontSection,#accountSettings,#accountSupport{scroll-margin-top:20px}