:root {
  --green: #2e3192;
  --green-700: #24287a;
  --green-900: #181b5c;
  --green-50: #eef0fb;
  --green-100: #d9dcf3;
  --gold: #f2a531;
  --brand-red: #e3202b;
  --brand-red-700: #c0161f;
  --gold-50: #fff5e3;
  --ink: #17201a;
  --ink-2: #435047;
  --muted: #6c786f;
  --line: #e1e6e0;
  --line-2: #eef1ed;
  --paper: #f5f6f2;
  --card: #ffffff;
  --red: #b3261e;
  --red-50: #fcebea;
  --amber: #8a6200;
  --amber-50: #fff4d6;
  --blue: #1f5aa6;
  --blue-50: #e8f0fb;
  --photo-bg: #ffffff;
  --input-line: #cfd6ce;
  --gold-line: #ecd98f;
  --gold-ink: #5d4a06;
  --dash-line: #c2cbc1;
  --thead: #fafbf9;
  --tabs-bg: #e9ece7;
  --sub-row: #fffcf0;
  --red-line: #efc4c1;
  --strong: #181b5c;
  --side-bg: #181b5c;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 32, 20, .06), 0 2px 8px rgba(16, 32, 20, .05);
  --shadow-lg: 0 12px 40px rgba(16, 32, 20, .18);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--paper); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body.no-scroll { overflow: hidden; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  border: 1px solid var(--input-line); border-radius: 7px; padding: 8px 10px; background: var(--card); min-height: 38px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46, 49, 146, .18); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; min-height: 0; accent-color: var(--green); margin: 0; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.strong { font-weight: 700; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .2px; }
.right { text-align: right; white-space: nowrap; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.neg { color: var(--red); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--input-line); background: var(--card);
  border-radius: 7px; padding: 8px 14px; font-weight: 700; cursor: pointer; min-height: 38px; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover:not(:disabled) { background: var(--line-2); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--green-700); }
.btn-ok { background: var(--green-50); border-color: #bcc1ea; color: var(--green-700); }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #921f19; }
.btn-danger-ghost { color: var(--red); border-color: var(--red-line); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--red-50); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.btn-lg { min-height: 48px; padding: 12px 26px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.link { background: none; border: 0; padding: 0; color: var(--green); font-weight: 700; cursor: pointer; }
.link.danger { color: var(--red); }
.icon-btn { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; padding: 6px 8px; border-radius: 6px; color: inherit; position: relative; }
.icon-btn:hover { background: rgba(0, 0, 0, .06); }

/* ---------- badges ---------- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; }
.st-pending { background: #ffe27a; color: #5a4300; }
.st-review { background: #ffe27a; color: #5a4300; }
.st-ok { background: #bfe8c9; color: #0f5a27; }
.st-bad { background: #f9c4c1; color: #8e1610; }
.st-warn { background: #ffd8b0; color: #7a3c00; }
.st-muted { background: var(--line-2); color: var(--muted); }

/* ---------- brand ---------- */
.brand { display: inline-flex; flex-direction: column; line-height: 1; color: #fff; }
.brand-us { font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: 1px; }
.brand-us i { font-style: normal; color: var(--gold); font-size: .55em; vertical-align: middle; margin: 0 2px; }
.brand-name { font-family: var(--serif); font-size: 17px; letter-spacing: .5px; margin-top: 2px; }
.brand-sm { flex-direction: row; align-items: baseline; gap: 8px; }
.brand-sm .brand-us { font-size: 21px; }
.brand-sm .brand-name { font-size: 16px; margin: 0; }
.brand-logo { max-height: 40px; display: block; }
.brand-img { display: block; height: auto; }
.brand-img.name { height: 34px; width: auto; }
.brand-img.wide { width: 100%; max-width: 420px; }
.brand-img.mark { height: 64px; width: auto; }

/* ---------- login ---------- */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-page.single { grid-template-columns: 1fr; place-items: center; background: linear-gradient(160deg, #181b5c, #2e3192); }
.login-art {
  background:
    radial-gradient(1200px 600px at -10% 110%, rgba(227, 32, 43, .22), transparent 60%),
    radial-gradient(900px 500px at 120% -10%, rgba(255, 255, 255, .08), transparent 60%),
    linear-gradient(160deg, #181b5c, #2e3192 70%);
  color: #fff; display: flex; align-items: flex-end; padding: 56px; position: relative; overflow: hidden;
}
.login-art::after {
  content: ''; position: absolute; right: -80px; top: -60px; width: 420px; height: 620px; opacity: .1;
  background: repeating-linear-gradient(115deg, #fff 0 2px, transparent 2px 26px); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: rotate(-18deg);
}
.login-art-inner { position: relative; z-index: 1; max-width: 480px; }
.login-logo { background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-lg); display: inline-block; width: 100%; max-width: 460px; }
.login-logo .brand-img.wide { max-width: 100%; }
.login-art .brand-us { font-size: 54px; }
.login-art .brand-name { font-size: 30px; }
.login-tag { font-size: 20px; line-height: 1.4; margin: 28px 0 12px; opacity: .92; }
.login-since { color: #fff; opacity: .75; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; }
.login-card { align-self: center; justify-self: center; width: min(400px, calc(100% - 32px)); background: var(--card); padding: 36px; border-radius: 14px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px; }
.login-page:not(.single) .login-card { box-shadow: none; background: transparent; }
.login-card h1 { font-family: var(--serif); font-size: 30px; }
.login-card .brand { color: var(--green); }
.login-card .brand-img.wide { max-width: 300px; margin-bottom: 4px; }
.login-card p { margin: 0; }
.form-error { background: var(--red-50); color: var(--red); padding: 8px 12px; border-radius: 7px; font-weight: 600; }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label { font-size: 12px; font-weight: 800; color: var(--ink-2); letter-spacing: .2px; }
.field-hint { font-size: 11.5px; color: var(--muted); }
.field-wide { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-bottom: 18px; }
.form-grid.one { grid-template-columns: 1fr; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.form-actions.sticky { position: sticky; bottom: 0; background: var(--paper); padding: 12px 0; z-index: 2; }
.checks { display: flex; flex-wrap: wrap; gap: 14px; min-height: 38px; align-items: center; }
.check, .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.pw-form { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 18px; top: 84px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; width: min(400px, calc(100vw - 36px)); }
.toast { background: var(--ink); color: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: flex-start; animation: rise .2s ease-out; }
.toast-msg { flex: 1; }
.toast-msg div { opacity: .85; font-size: 13px; margin-top: 2px; }
.toast-success { background: var(--green-700); }
.toast-error { background: var(--red); }
.toast-warn { background: var(--card); color: var(--ink); border: 2px solid var(--gold); }
.toast .btn { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .3); color: inherit; }
.toast-warn .btn { background: var(--green); color: #fff; border-color: var(--green); }
.toast-x { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; padding: 0 2px; }
@keyframes rise { from { transform: translateY(-8px); opacity: 0; } }

/* ---------- modal & drawer ---------- */
.modal-back, .drawer-back { position: fixed; inset: 0; background: rgba(14, 26, 18, .45); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--card); border-radius: 14px; width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.modal-wide { width: min(920px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); gap: 12px; }
.modal-head h3 { font-size: 17px; }
.modal-body { padding: 18px 20px; overflow: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.drawer-back { justify-content: flex-end; padding: 0; }
.drawer { background: var(--card); width: min(440px, 100%); height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: slide .2s ease-out; }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { font-family: var(--serif); font-size: 22px; }
.drawer-body { flex: 1; overflow: auto; padding: 4px 18px; }
.drawer-foot { border-top: 1px solid var(--line); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.tot-row { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 4px; }
.hold-timer { background: var(--gold-50); border: 1px solid var(--gold-line); color: var(--gold-ink); padding: 9px 14px; font-size: 13px; }
.drawer .hold-timer { border-width: 0 0 1px; }
.page .hold-timer { border-radius: 8px; margin-bottom: 16px; }

/* ---------- spinner / empty ---------- */
.spinner-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 60px 0; color: var(--muted); }
.spinner { width: 22px; height: 22px; border: 3px solid var(--green-100); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.empty-title { font-weight: 800; color: var(--ink-2); font-size: 16px; margin-bottom: 4px; }

/* ---------- customer top bar ---------- */
.topbar { background: var(--card); color: var(--strong); position: sticky; top: 0; z-index: 100; border-bottom: 4px solid var(--green); box-shadow: 0 3px 0 var(--brand-red); }
.topbar-inner { max-width: 1480px; margin: 0 auto; padding: 0 20px; height: 62px; display: flex; align-items: center; gap: 28px; }
.topbar-brand { color: var(--strong); display: flex; align-items: center; }
.topbar-brand:hover { text-decoration: none; }
.topnav { display: flex; gap: 4px; }
.topnav a { color: var(--ink-2); font-weight: 700; padding: 8px 12px; border-radius: 7px; }
.topnav a:hover { color: var(--green); background: var(--green-50); text-decoration: none; }
.topnav a.active { color: #fff; background: var(--green); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar .btn-ghost { color: var(--ink-2); }
.topbar .btn-ghost:hover { background: var(--line-2) !important; }
.who { font-weight: 700; color: var(--strong); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-btn { display: flex; align-items: center; gap: 8px; background: var(--brand-red); color: #fff; border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 800; cursor: pointer; }
.cart-btn:hover { background: var(--brand-red-700); }
.cart-count { background: #fff; color: var(--brand-red) !important; color: #fff; border-radius: 999px; min-width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; padding: 0 6px; }
.hold-banner { background: var(--red-50); color: var(--red); text-align: center; padding: 10px; font-weight: 700; }

/* ---------- bell ---------- */
.bell-wrap { position: relative; }
.bell .dot { position: absolute; top: 0; right: 0; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; min-width: 17px; height: 17px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; }
.bell-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-height: 440px; overflow: auto; background: var(--card); color: var(--ink); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 200; border: 1px solid var(--line); }
.bell-head { font-weight: 800; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bell-empty { padding: 20px; color: var(--muted); text-align: center; }
.bell-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.bell-item:hover { background: var(--line-2); text-decoration: none; }
.bell-item.unread { background: var(--green-50); }
.bell-title { font-weight: 800; }
.bell-body { font-size: 13px; color: var(--ink-2); }
.bell-time { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.bell-enable { width: 100%; background: var(--line-2); border: 0; padding: 10px; font-weight: 700; color: var(--green); cursor: pointer; }

/* ---------- order header ---------- */
.cust-main { max-width: 1480px; margin: 0 auto; padding: 0 20px 60px; }
.order-header { display: flex; flex-wrap: wrap; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); padding: 12px 16px; box-shadow: var(--shadow); margin-bottom: 18px; }
.order-header.compact { border-radius: var(--radius); box-shadow: none; padding: 0; border: 0; margin-bottom: 12px; }
.oh-field { display: flex; flex-direction: column; gap: 3px; min-width: 170px; flex: 1; }
.oh-field > span { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.oh-acct { color: var(--green-700); font-weight: 700; font-size: 11.5px; }

/* ---------- shop ---------- */
.shop { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.filters { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow: auto; padding-right: 4px; }
.filters-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px 10px; font-size: 15px; }
.fgroup { border-top: 1px solid var(--line); padding: 10px 2px; }
.fgroup summary { font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::after { content: '▾'; color: var(--muted); font-size: 12px; }
.fgroup:not([open]) summary::after { content: '▸'; }
.fcount { background: var(--green); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 7px; margin-left: 6px; margin-right: auto; }
.flist { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.flist-scroll { max-height: 260px; overflow: auto; }
.fsearch { margin-top: 8px; min-height: 32px; padding: 5px 9px; font-size: 13px; }
.fopt { display: flex; align-items: center; gap: 8px; padding: 3px 2px; cursor: pointer; border-radius: 5px; }
.fopt:hover { background: var(--line-2); }
.fopt span { flex: 1; }
.fopt em { font-style: normal; color: var(--muted); font-size: 12px; }
.price-range { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.price-range input { min-height: 32px; padding: 5px 8px; }
.search-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.search-box { flex: 1; position: relative; }
.search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-box input { padding-left: 38px; min-height: 44px; font-size: 15px; border-radius: 9px; }
.search-row select { width: auto; min-height: 44px; }
.filter-toggle { display: none; min-height: 44px; }
@media (max-width: 900px) { .filter-toggle { display: inline-flex; } }
.seg { display: flex; border: 1px solid var(--input-line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--card); padding: 0 12px; min-height: 42px; cursor: pointer; font-size: 16px; color: var(--muted); }
.seg button.on { background: var(--green); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { background: var(--green-50); color: var(--green-700); border: 1px solid #c5c9ee; border-radius: 999px; padding: 3px 10px; font-weight: 700; cursor: pointer; font-size: 12.5px; }
.sec-title { font-size: 19px; font-weight: 800; margin: 8px 0 14px; display: flex; align-items: center; gap: 8px; }
.flame { color: var(--red); font-size: 12px; }
.deals { margin-bottom: 26px; }
.deal-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.deal-row .card { scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.rows { display: flex; flex-direction: column; gap: 10px; }
.more { display: flex; justify-content: center; padding: 24px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; }
.card:hover { box-shadow: var(--shadow); border-color: var(--input-line); }
.card-incart { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.card-img { position: relative; aspect-ratio: 1 / 1; background: var(--photo-bg); cursor: zoom-in; overflow: hidden; border-bottom: 1px solid var(--line-2); }
.card-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .3s; }
.card:hover .card-img img { transform: scale(1.03); }
.card-img .ph { background: var(--line-2); }
.ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--green); cursor: default; font-size: 12px; }
.ph span { color: var(--muted); font-weight: 600; }
.ph-leaf { width: 56px; height: 56px; color: var(--green); }
.ribbon { position: absolute; top: 10px; left: 10px; background: var(--brand-red); color: #fff; font-weight: 800; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.tag-pill { position: absolute; bottom: 10px; left: 10px; background: rgba(255, 255, 255, .92); color: var(--green-700); font-weight: 800; font-size: 11px; padding: 3px 8px; border-radius: 999px; }
.tag-pill + .tag-pill { left: auto; right: 10px; }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-title { font-size: 14.5px; font-weight: 800; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-price { display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.card-price b { font-size: 19px; color: var(--strong); }
.card-price > span { color: var(--muted); font-weight: 600; }
.box-price { margin-left: auto; font-size: 12px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 12px; color: var(--muted); }
.card-meta b { color: var(--ink-2); }
.stock b { color: var(--green-700); }
.stock.low b { color: var(--red); }
.card-notes { margin: 0; font-size: 12.5px; background: var(--gold-50); padding: 6px 8px; border-radius: 6px; color: var(--gold-ink); }
.card-actions { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 6px; }
.card-actions .btn { flex: 1; }
.card-row { flex-direction: row; }
.card-row .card-img { width: 140px; flex: none; aspect-ratio: auto; }
.card-row .card-title { min-height: 0; }
.card-row .card-actions { max-width: 320px; }
.card-compact .card-notes { display: none; }
.zoom-img { display: block; margin: 0 auto; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.modal-body:has(.zoom-img) { display: flex; justify-content: center; align-items: center; background: var(--photo-bg); }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--input-line); border-radius: 8px; overflow: hidden; background: var(--card); }
.stepper button { border: 0; background: var(--line-2); width: 34px; min-height: 36px; font-size: 17px; font-weight: 700; cursor: pointer; color: var(--green-700); }
.stepper button:disabled { color: var(--muted); cursor: not-allowed; }
.stepper input { border: 0; width: 44px; text-align: center; min-height: 36px; padding: 0; border-radius: 0; font-weight: 800; }
.stepper input:focus { box-shadow: none; }
.stepper.sm button { width: 28px; min-height: 30px; font-size: 15px; }
.stepper.sm input, .stepper-val { width: 38px; min-height: 30px; text-align: center; font-weight: 800; display: inline-grid; place-items: center; }

/* ---------- cart lines ---------- */
.cline, .oline { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); align-items: center; }
.cline:last-child, .oline:last-child { border-bottom: 0; }
.cline-img { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--line-2); display: grid; place-items: center; }
.cline-img img { width: 100%; height: 100%; object-fit: contain; background: var(--photo-bg); }
.cline-img .ph-leaf { width: 30px; height: 30px; }
.cline-name, .oline-name { font-weight: 800; }
.cline-ctl { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.cline-total, .oline-total { font-weight: 800; white-space: nowrap; }
.oline-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.why { font-size: 12.5px; color: var(--ink-2); }
.oline.is-rejected .oline-name { text-decoration: line-through; color: var(--muted); }
.oline.is-rejected .cline-img { opacity: .5; }

/* ---------- pages ---------- */
.page { padding: 24px 0 40px; }
.page.narrow { max-width: 1100px; margin: 0 auto; }
.page-title { font-family: var(--serif); font-size: 28px; font-weight: 700; margin-bottom: 14px; }
.page-row, .panel-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-row { margin-bottom: 8px; }
.panel-row .panel-title { margin: 0; }
.back { display: inline-block; margin-bottom: 10px; font-weight: 700; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.panel-title { font-size: 15px; font-weight: 800; margin: 0 0 12px; }
.panel .panel-title + .form-grid { margin-top: 0; }
.panel > .panel-title:not(:first-child) { margin-top: 10px; }
.summary { display: flex; flex-direction: column; gap: 6px; margin-left: auto; max-width: 320px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 8px; }
.summary div { display: flex; justify-content: space-between; }
.summary .grand { font-size: 17px; padding-top: 6px; border-top: 1px dashed var(--line); }
.disclaimer { font-size: 12.5px; color: var(--ink-2); background: var(--card); border-left: 4px solid var(--gold); border-radius: 6px; padding: 12px 16px; margin: 18px 0; }
.checkout-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.tb-search { max-width: 320px; }
.toolbar select { width: auto; }
.tabs { display: flex; gap: 4px; background: var(--tabs-bg); padding: 3px; border-radius: 9px; flex-wrap: wrap; }
.tab { border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; font-weight: 700; cursor: pointer; color: var(--ink-2); }
.tab.on { background: var(--card); color: var(--strong); box-shadow: var(--shadow); }
.tabs.big { margin-bottom: 16px; display: inline-flex; }
.notice { background: var(--amber-50); border: 1px solid var(--gold-line); color: var(--gold-ink); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }

/* ---------- order cards & detail ---------- */
.od-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.od-head .page-title { margin-bottom: 2px; }
.od-actions { display: flex; align-items: center; gap: 8px; }
.od-actions .badge { font-size: 13px; padding: 4px 12px; }
.od-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.live-note { display: flex; align-items: center; gap: 10px; background: var(--blue-50); color: var(--blue); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); animation: pulse 1.5s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 90, 166, .5); } 100% { box-shadow: 0 0 0 10px rgba(31, 90, 166, 0); } }
.rep-note { background: var(--gold-50); border: 1px solid var(--gold-line); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }

.tracker { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; margin: 4px 0 18px; counter-reset: s; }
.tracker li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; color: var(--muted); }
.tracker li::before { content: ''; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: var(--line); z-index: 0; }
.tracker li:first-child::before { display: none; }
.tracker li.done::before { background: var(--green); }
.tk-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--card); border: 3px solid var(--line); display: grid; place-items: center; font-weight: 800; z-index: 1; }
.tracker li.done .tk-dot { background: var(--green); border-color: var(--green); color: #fff; }
.tracker li.done { color: var(--ink); }
.tk-label { font-weight: 800; }
.tk-time { font-size: 11.5px; color: var(--muted); }
.tracker.bad li.done:last-child .tk-dot { background: var(--red); border-color: var(--red); }
.tracker.bad li.done:last-child::before { background: var(--red); }

.dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; margin: 0; }
.dl dt { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.dl dd { margin: 0; }
.timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.timeline li { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.timeline li:last-child { border: 0; }
.tl-time { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acct-grid .panel { margin: 0; }
.addr { padding: 6px 0; border-bottom: 1px solid var(--line-2); }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel .tbl-wrap { box-shadow: none; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 800; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--thead); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl-click tbody tr { cursor: pointer; }
.tbl-click tbody tr:hover { background: var(--green-50); }
.tbl .thumb { width: 52px; padding: 6px 8px; }
.tbl .thumb img, .tbl .thumb .ph-leaf { width: 42px; height: 42px; border-radius: 6px; object-fit: contain; background: var(--photo-bg); display: block; }
.nophoto { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 6px; border: 1px dashed var(--dash-line); font-size: 9.5px; text-align: center; color: var(--muted); font-weight: 700; line-height: 1.1; }
.is-muted td { opacity: .55; }
.tag-chip { display: inline-block; background: var(--green-50); color: var(--green-700); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; margin: 1px 3px 1px 0; }
.inline-input { min-height: 32px; padding: 4px 8px; }
.mark-input { min-height: 30px; padding: 3px 6px; width: 90px; }

/* ---------- staff shell ---------- */
.staff { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--side-bg); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 18px 12px; }
.side-brand { display: block; padding: 6px 12px 4px; }
.side-brand:hover { text-decoration: none; }
.side-role { color: #fff; opacity: .7; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 8px 16px; }
.side nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; }
.side-link { color: rgba(255, 255, 255, .78); padding: 9px 10px; border-radius: 7px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.side-link:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.side-link.active { background: rgba(255, 255, 255, .15); color: #fff; box-shadow: inset 3px 0 0 var(--brand-red); }
.side-badge { background: var(--brand-red); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 7px; min-width: 20px; text-align: center; }
.side-sep { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 255, 255, .45); padding: 16px 10px 6px; font-weight: 800; }
.side-foot { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.side-user { color: #fff; font-weight: 700; padding: 0 8px; }
.side .btn-ghost { color: rgba(255, 255, 255, .8); }
.side .btn-ghost:hover { background: rgba(255, 255, 255, .1) !important; }
.staff-main { min-width: 0; display: flex; flex-direction: column; }
.staff-top { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.staff-top-title { font-weight: 800; color: var(--ink-2); }
.staff-content { padding: 0 24px; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); box-shadow: var(--shadow); }
a.stat:hover { border-color: var(--green); text-decoration: none; }
.stat.warn { border-color: var(--gold-line); background: var(--gold-50); }
.stat-v { font-size: 26px; font-weight: 800; font-family: var(--serif); }
.stat-l { font-size: 12px; color: var(--muted); font-weight: 700; }
.stats.small .stat { box-shadow: none; }
.ok-panel { border-color: #bcc1ea; }

.info-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.info-strip > div { background: var(--card); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-strip span { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 800; letter-spacing: .5px; }
.info-strip small { color: var(--muted); }
.review td { vertical-align: top; }
.review tr.is-rejected td:not(:last-child):not(:nth-last-child(2)) { color: var(--muted); }
.review tr.is-rejected .strong { text-decoration: line-through; }
.review tr.is-sub { background: var(--card)cf0; }
.actions-col { width: 1%; }
.row-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; min-width: 220px; }
.qty-edit { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.finalize { border-color: var(--green); box-shadow: 0 0 0 1px var(--green-100), var(--shadow); }
.fin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reason-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }

.picker-search { min-height: 42px; margin-bottom: 10px; }
.picker-list { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.picker-item { display: grid; grid-template-columns: 44px 1fr 110px 70px; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line-2); background: var(--card); padding: 8px 10px; cursor: pointer; }
.picker-item:hover { background: var(--line-2); }
.picker-item.on { background: var(--green-50); box-shadow: inset 3px 0 0 var(--green); }
.pi-img { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--line-2); display: grid; place-items: center; }
.pi-img img { width: 100%; height: 100%; object-fit: contain; background: var(--photo-bg); }
.pi-img .ph-leaf { width: 26px; height: 26px; }
.pi-name { display: flex; flex-direction: column; font-weight: 700; }
.pi-num { text-align: right; font-weight: 800; display: flex; flex-direction: column; }
.picker-foot { display: grid; grid-template-columns: 120px 220px 1fr; gap: 14px; align-items: end; margin-top: 14px; }
.picker-total { text-align: right; font-size: 15px; padding-bottom: 8px; }

.add-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.add-row .field { min-width: 180px; flex: 1; }
.add-row.panel { margin-top: 0; }
.price-add { position: relative; margin-top: 16px; max-width: 520px; }
.suggest { border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; background: var(--card); box-shadow: var(--shadow); }
.suggest button { display: flex; justify-content: space-between; width: 100%; border: 0; background: none; padding: 8px 10px; text-align: left; cursor: pointer; border-bottom: 1px solid var(--line-2); }
.suggest button:hover { background: var(--line-2); }

.pe-grid { display: grid; grid-template-columns: 340px 1fr; gap: 22px; }
.drop { position: relative; border: 2px dashed var(--dash-line); border-radius: 12px; aspect-ratio: 1 / 1; display: grid; place-items: center; cursor: pointer; overflow: hidden; background: var(--line-2); transition: border-color .15s, background .15s; }
.drop.has-img { aspect-ratio: auto; min-height: 160px; max-height: 520px; display: block; background: var(--photo-bg); }
.drop.has-img img { width: 100%; height: auto; max-height: 516px; object-fit: contain; display: block; }
.drop.big { aspect-ratio: auto; min-height: 180px; margin-bottom: 16px; }
.drop.over { border-color: var(--green); background: var(--green-50); }
.drop img { width: 100%; height: 100%; object-fit: contain; background: var(--photo-bg); }
.drop-ph { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); text-align: center; padding: 16px; }
.drop-ph b { color: var(--ink); font-size: 15px; }
.drop-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .8); font-weight: 800; }
.email-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 8px; background: #f2f4f1; }
.code { background: var(--side-bg); color: #e8eafb; padding: 12px 14px; border-radius: 8px; font-size: 12.5px; white-space: pre-wrap; overflow-x: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .od-grid { grid-template-columns: 1fr; }
  .info-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }
  .login-art { padding: 32px 24px; min-height: 220px; }
  .login-art .brand-us { font-size: 40px; }
  .login-tag { font-size: 16px; }
  .shop { grid-template-columns: minmax(0, 1fr); }
  .filters:not(.open) { display: none; }
  .filters { position: static; max-height: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; }
  .fgroup:not(:first-of-type) { }
  .topbar-inner { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .topnav { order: 3; width: 100%; overflow-x: auto; }
  .who { display: none; }
  .cust-main { padding: 0 16px 60px; }
  .staff { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; }
  .side-role, .side-sep { display: none; }
  .side nav { flex-direction: row; overflow-x: auto; width: 100%; order: 3; }
  .side-link { white-space: nowrap; }
  .side-foot { border: 0; padding: 0; margin-left: auto; }
  .staff-content, .staff-top { padding-left: 16px; padding-right: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .acct-grid { grid-template-columns: 1fr; }
  .pe-grid { grid-template-columns: 1fr; }
  .picker-foot { grid-template-columns: 1fr 1fr; }
  .card-row { flex-direction: column; }
  .card-row .card-img { width: 100%; aspect-ratio: 1 / 1; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-body { padding: 10px; }
  .card-actions { flex-direction: column; align-items: stretch; }
  .stepper { justify-content: space-between; }
  .stepper input { flex: 1; }
  .box-price { margin-left: 0; width: 100%; }
  .search-row { flex-wrap: wrap; }
  .search-box { flex-basis: 100%; }
  .info-strip { grid-template-columns: 1fr; }
  .tracker .tk-time { display: none; }
  .cart-total { display: none; }
}

@media (max-width: 560px) { .brand-img.name { height: 26px; } }

@media print {
  .topbar, .side, .staff-top, .toasts, .od-actions .btn, .back, .finalize, .live-note, .actions-col, .row-actions { display: none !important; }
  .staff { display: block; }
  body { background: #fff; }
  .panel, .tbl-wrap { box-shadow: none; }
}
@media (max-width: 560px) { .oh-field { min-width: calc(50% - 6px); } }
.side-brand { display: flex; justify-content: center; }
.side-brand .brand-img.mark-side { height: 112px; width: auto; }
@media (max-width: 900px) { .side-brand { padding: 6px 10px; } .side-brand .brand-img.mark-side { height: 44px; } }


/* ---------- dark mode ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --green: #7378ee;
  --green-700: #5f64dc;
  --green-900: #12143a;
  --green-50: #23264a;
  --green-100: #30346a;
  --gold-50: #3a2f14;
  --ink: #e9ebf2;
  --ink-2: #bcc2cf;
  --muted: #8d95a6;
  --line: #2b303c;
  --line-2: #21252f;
  --paper: #0e1016;
  --card: #171a22;
  --red: #ff8f86;
  --red-50: #3b1817;
  --amber: #f5c451;
  --amber-50: #3a2f0c;
  --blue: #93b6ff;
  --blue-50: #1a2440;
  --photo-bg: #ffffff;
  --input-line: #343a48;
  --gold-line: #6b5520;
  --gold-ink: #f3d58a;
  --dash-line: #3d4454;
  --thead: #1c2029;
  --tabs-bg: #232733;
  --sub-row: #2a2516;
  --red-line: #6b2b28;
  --strong: #c9ccff;
  --side-bg: #10122e;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
}
:root[data-theme="dark"] .topbar { border-bottom-color: #2e3192; }
.brand-pair { display: inline-flex; }
:root:not([data-theme="dark"]) .only-dark { display: none !important; }
:root[data-theme="dark"] .only-light { display: none !important; }
:root[data-theme="dark"] .login-logo { background: transparent; box-shadow: none; padding: 0; }
:root[data-theme="dark"] .st-pending, :root[data-theme="dark"] .st-review { background: #5c4a0e; color: #ffe27a; }
:root[data-theme="dark"] .st-ok { background: #17432a; color: #93e6ad; }
:root[data-theme="dark"] .st-bad { background: #4d1c1a; color: #ffaaa4; }
:root[data-theme="dark"] .st-warn { background: #4d2f12; color: #ffc68c; }
:root[data-theme="dark"] .toast { background: #2a2e3a; }
:root[data-theme="dark"] .toast-success { background: #1f4d33; }
:root[data-theme="dark"] .toast-error { background: #7a1f1a; }
:root[data-theme="dark"] .toast-warn { background: var(--card); color: var(--ink); }
:root[data-theme="dark"] .stepper button { color: var(--strong); }
:root[data-theme="dark"] .ph-leaf { color: #8f94f0; }
:root[data-theme="dark"] .email-frame { background: #f2f4f1; }
.theme-btn { font-size: 18px; line-height: 1; }
.login-theme { position: fixed; top: 12px; right: 12px; z-index: 50; }
.orders-list td { white-space: nowrap; }
.orders-list td.mono a { color: inherit; }
@media (max-width: 700px) {
  .orders-list th:nth-child(3), .orders-list td:nth-child(3), .orders-list th:nth-child(5), .orders-list td:nth-child(5),
  .orders-list th:nth-child(6), .orders-list td:nth-child(6), .orders-list th:nth-child(7), .orders-list td:nth-child(7),
  .orders-list th:nth-child(9), .orders-list td:nth-child(9) { display: none; }
  .orders-list { font-size: 13px; }
  .orders-list th, .orders-list td { padding: 10px 6px; }
  .orders-list .badge { font-size: 10.5px; padding: 2px 6px; }
}

/* ---------- favorites, recommendations, side popups ---------- */
.fav-btn { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--brand-red); font-size: 19px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18); transition: transform .12s; }
.fav-btn:hover { transform: scale(1.08); }
.fav-btn.on { background: var(--brand-red); color: #fff; }
.heart-inline { color: var(--brand-red); }
.fav-opt { font-weight: 700; }
.sec-ico { color: var(--green); margin-right: 2px; }
.card-note { font-size: 11.5px; font-weight: 800; color: var(--green); background: var(--green-50); border-radius: 999px; padding: 2px 9px; align-self: flex-start; }
.side-pops { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 36px)); }
.side-pop { position: relative; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--brand-red);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px 14px; animation: popin .25s ease-out; }
@keyframes popin { from { transform: translateX(24px); opacity: 0; } }
.side-pop-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 20px; color: var(--muted); cursor: pointer; }
.side-pop-title { font-weight: 800; font-size: 13.5px; padding-right: 22px; }
.side-pop-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.side-pop-body { display: flex; gap: 10px; margin: 10px 0; align-items: center; }
.side-pop-img { width: 64px; height: 64px; flex: none; border-radius: 8px; overflow: hidden; background: var(--photo-bg); display: grid; place-items: center; }
.side-pop-img img { width: 100%; height: 100%; object-fit: contain; }
.side-pop-img .ph-leaf { width: 34px; height: 34px; }
.side-pop-name { font-weight: 800; line-height: 1.25; }
.side-pop-price { font-size: 13px; color: var(--ink-2); }
.side-pop-price b { color: var(--strong); }
.side-pop-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 560px) { .side-pops { left: 10px; right: 10px; bottom: 10px; width: auto; } }

/* ---------- staff insights ---------- */
.w-auto { width: auto; }
.fu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.fu-card { display: block; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brand-red); border-radius: var(--radius);
  padding: 14px 16px; color: var(--ink); box-shadow: var(--shadow); }
.fu-card:hover { border-color: var(--green); border-left-color: var(--brand-red); text-decoration: none; }
.fu-top { display: flex; justify-content: space-between; gap: 10px; }
.fu-heat { color: var(--brand-red); letter-spacing: 2px; font-size: 12px; white-space: nowrap; }
.fu-reasons { margin: 8px 0; padding-left: 18px; }
.fu-reasons li { margin: 2px 0; }
.fu-offer { background: var(--gold-50); color: var(--gold-ink); border-radius: 6px; padding: 6px 8px; font-size: 13px; margin-bottom: 6px; }
.fu-offer span { font-weight: 800; }
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 16px; }
.act-grid.two { grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); }
.act-list { list-style: none; padding: 0; margin: 0; }
.act-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.act-list li:last-child { border: 0; }
.act-list li span { color: var(--muted); white-space: nowrap; font-size: 12px; }
.act-timeline li { grid-template-columns: 150px 1fr; }
.kind { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-right: 4px; }
.k-muted { background: var(--line-2); color: var(--muted); }
.k-blue { background: var(--blue-50); color: var(--blue); }
.k-green { background: #bfe8c9; color: #0f5a27; }
.k-red { background: #f9c4c1; color: #8e1610; }
.k-gold { background: #ffe27a; color: #5a4300; }
:root[data-theme="dark"] .k-green { background: #17432a; color: #93e6ad; }
:root[data-theme="dark"] .k-red { background: #4d1c1a; color: #ffaaa4; }
:root[data-theme="dark"] .k-gold { background: #5c4a0e; color: #ffe27a; }
.tbl-wrap.flat { box-shadow: none; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 140px; padding-top: 6px; border-bottom: 1px solid var(--line); }
.bar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bar { width: 100%; background: var(--green); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.bar-col:hover .bar { opacity: 1; background: var(--brand-red); }
.bars-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.sp-picked { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-bottom: 8px; }
.sp-item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.sp-img { width: 44px; height: 44px; flex: none; border-radius: 6px; overflow: hidden; background: var(--photo-bg); display: grid; place-items: center; }
.sp-img img { width: 100%; height: 100%; object-fit: contain; }
.sp-img .ph-leaf { width: 26px; height: 26px; }
.sp-name { flex: 1; display: flex; flex-direction: column; font-weight: 700; font-size: 13px; line-height: 1.25; }
@media (max-width: 700px) { .act-grid.two { grid-template-columns: 1fr; } .fu-list { grid-template-columns: 1fr; } .act-timeline li { grid-template-columns: 1fr; } }

/* =====================================================================
   Liquid glass layer: frosted translucent surfaces over a soft brand mesh
   ===================================================================== */
:root {
  --radius: 16px;
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .80);
  --glass-edge: rgba(24, 27, 92, .09);
  --glass-hi: rgba(255, 255, 255, .85);
  --blur: blur(22px) saturate(170%);
  --glass-shadow: inset 0 1px 0 var(--glass-hi), 0 12px 32px rgba(24, 27, 92, .08), 0 1px 2px rgba(24, 27, 92, .06);
  --mesh:
    radial-gradient(1100px 700px at -5% -10%, rgba(46, 49, 146, .18), transparent 60%),
    radial-gradient(900px 620px at 105% 0%, rgba(227, 32, 43, .10), transparent 55%),
    radial-gradient(1000px 800px at 50% 115%, rgba(242, 165, 49, .12), transparent 60%),
    linear-gradient(180deg, #f4f6fc 0%, #e8ecf6 100%);
  --paper: #eef1f8;
}
:root[data-theme="dark"] {
  --glass: rgba(26, 30, 44, .55);
  --glass-strong: rgba(28, 32, 48, .80);
  --glass-edge: rgba(255, 255, 255, .08);
  --glass-hi: rgba(255, 255, 255, .07);
  --glass-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 36px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .4);
  --mesh:
    radial-gradient(1100px 700px at -5% -10%, rgba(80, 86, 230, .22), transparent 60%),
    radial-gradient(900px 620px at 105% 0%, rgba(227, 32, 43, .12), transparent 55%),
    radial-gradient(1000px 800px at 50% 115%, rgba(242, 165, 49, .08), transparent 60%),
    linear-gradient(180deg, #0c0e16 0%, #090b11 100%);
  --paper: #0b0d14;
}
body { background: var(--mesh); background-attachment: fixed; }

/* shared glass surface */
.panel, .tbl-wrap, .order-header, .stat, .fu-card, .info-strip, .filters, .card, .bell-pop, .also,
.login-page.single .login-card, .notice, .disclaimer, .rep-note, .live-note, .hold-timer {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.panel, .tbl-wrap, .order-header, .stat, .fu-card, .info-strip, .card, .filters { border-radius: var(--radius); }
.info-strip > div { background: transparent; }
.info-strip { gap: 0; }
.info-strip > div + div { border-left: 1px solid var(--glass-edge); }
.modal, .drawer { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); }
.modal { border-radius: 20px; }
.modal-back, .drawer-back { background: rgba(12, 14, 40, .30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tbl th { background: transparent; }
.tbl td { border-bottom-color: var(--glass-edge); }
.tbl-click tbody tr:hover { background: rgba(46, 49, 146, .06); }
:root[data-theme="dark"] .tbl-click tbody tr:hover { background: rgba(255, 255, 255, .04); }

/* top bars */
.topbar { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-edge); box-shadow: 0 6px 24px rgba(24, 27, 92, .06); }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #2e3192 0%, #2e3192 45%, #e3202b 55%, #e3202b 100%); opacity: .85; }
:root[data-theme="dark"] .topbar { border-bottom-color: var(--glass-edge); }
.staff-top { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--glass-edge); }
.staff .side { background: linear-gradient(180deg, rgba(24, 27, 92, .94), rgba(28, 31, 104, .88)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-right: 1px solid rgba(255, 255, 255, .08); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .staff .side { background: linear-gradient(180deg, rgba(16, 18, 46, .92), rgba(12, 14, 34, .9)); }
.side-link { border-radius: 10px; }
.side-link.active { background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 3px 0 0 var(--brand-red); }

/* controls */
.btn { border-radius: 11px; background: var(--glass-strong); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(24, 27, 92, .06); }
.btn:hover:not(:disabled) { background: var(--glass-strong); border-color: rgba(46, 49, 146, .25); transform: translateY(-1px); }
.btn-primary { background: linear-gradient(180deg, #4247c0 0%, #2e3192 100%); border-color: rgba(24, 27, 92, .5); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px rgba(46, 49, 146, .28); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #4b51d0 0%, #33379f 100%); border-color: rgba(24, 27, 92, .5); }
:root[data-theme="dark"] .btn-primary { background: linear-gradient(180deg, #7c81f2 0%, #5b60d8 100%); border-color: rgba(255, 255, 255, .12); }
.btn-danger { background: linear-gradient(180deg, #ea3c45, #c0161f); }
.btn-ghost { background: transparent; box-shadow: none; border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: rgba(46, 49, 146, .06); transform: none; }
input, select, textarea { background: var(--glass-strong); border-color: var(--input-line); border-radius: 11px; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: rgba(255, 255, 255, .04); }
.tabs { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 12px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.tab { border-radius: 9px; }
.tab.on { background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 8px rgba(24, 27, 92, .10); }
.seg { border-radius: 11px; border-color: var(--glass-edge); background: var(--glass); }
.seg button { background: transparent; }
.seg button.on { background: linear-gradient(180deg, #4247c0, #2e3192); }
.cart-btn { border-radius: 12px; background: linear-gradient(180deg, #ef3a43, #d11c25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px rgba(227, 32, 43, .28); }
.chip { background: var(--glass-strong); border-color: var(--glass-edge); }
.badge { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
.toast { border-radius: 14px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); background: rgba(24, 27, 92, .88); box-shadow: var(--shadow-lg); }
.toast-success { background: rgba(20, 90, 50, .9); }
.toast-error { background: rgba(170, 25, 30, .92); }
.toast-warn { background: var(--glass-strong); }

/* product tiles: photos fill the frame */
.card { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 40px rgba(24, 27, 92, .14); }
.card-img { background: var(--line-2); border-bottom: 1px solid var(--glass-edge); }
.card-img img { object-fit: cover; }
.card-row .card-img img { object-fit: cover; }
.cline-img img, .tbl .thumb img, .pi-img img, .sp-img img { object-fit: cover; }
.card-incart { box-shadow: 0 0 0 2px var(--green), var(--glass-shadow); }
.ribbon { background: linear-gradient(180deg, #ef3a43, #d11c25); box-shadow: 0 4px 12px rgba(227, 32, 43, .35); }
.fav-btn { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fav-btn.on { background: var(--brand-red); }
.stepper { border-radius: 11px; border-color: var(--input-line); background: var(--glass-strong); }
.stepper button { background: transparent; }

/* filters */
.filters { padding: 6px 14px 10px; top: 88px; }
.filters-head { padding: 10px 2px; }
.clear-btn { min-height: 28px; padding: 3px 10px; font-size: 12px; }
.chip-clear { background: transparent; color: var(--brand-red); border-color: rgba(227, 32, 43, .35); }
.fgroup { border-top-color: var(--glass-edge); }
.cat-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--green-50); color: var(--strong); }

/* order header: account box beside the carrier */
.oh-carrier { flex: 1.6; }
.oh-pair { display: flex; gap: 8px; }
.oh-pair select { flex: 1; min-width: 0; }
.oh-acct-box { width: 150px; flex: none; font-weight: 700; color: var(--strong); background: var(--green-50) !important; border-color: transparent; }
.oh-acct-box:placeholder-shown { font-weight: 400; }
@media (max-width: 560px) { .oh-carrier { min-width: 100%; } .oh-acct-box { width: 120px; } }

/* bought together inside the cart */
.also { margin: 0 18px 12px; padding: 10px 12px; border-radius: 14px; }
.also-title { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.also-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; }
.also-item .cline-img { width: 44px; height: 44px; }
.also-name { font-weight: 700; font-size: 13px; line-height: 1.25; }

/* notifications */
.bell-pop { border-radius: 16px; background: var(--glass-strong); }
.bell-item { border-bottom-color: var(--glass-edge); }
.bell-item.unread { background: rgba(46, 49, 146, .07); }
.bell-time { font-variant-numeric: tabular-nums; }

/* admin helpers */
.tag-editor { display: flex; flex-direction: column; gap: 6px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--input-line); border-radius: 11px; padding: 6px; background: var(--glass-strong); }
.tag-list input { border: 0; min-height: 28px; padding: 2px 6px; flex: 1; min-width: 160px; background: transparent; box-shadow: none; }
.tag-chip.big { font-size: 12.5px; padding: 3px 4px 3px 10px; display: inline-flex; align-items: center; gap: 2px; }
.tag-chip.big button { border: 0; background: none; cursor: pointer; color: inherit; font-size: 15px; line-height: 1; padding: 0 4px; }
.tag-suggest { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.order-btns { white-space: nowrap; width: 1%; }
.icon-btn.sm { font-size: 11px; padding: 4px 6px; }
.assign-list { max-height: 52vh; overflow: auto; border: 1px solid var(--glass-edge); border-radius: 12px; }
.assign-item { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--glass-edge); cursor: pointer; }
.assign-item.on { background: rgba(46, 49, 146, .07); }
.login-page:not(.single) .login-card { background: transparent; }

.side-pop { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge);
  border-top: 3px solid var(--brand-red); border-radius: 16px; box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); }
.side-pop-img img { object-fit: cover; }

/* =====================================================================
   Readability, tighter layout, full window photo viewer, prebook print
   ===================================================================== */
/* brighter text in dark mode */
:root[data-theme="dark"] { --ink: #f6f7fb; --ink-2: #e2e6ef; --muted: #bfc6d4; --strong: #d6d8ff; }
:root[data-theme="dark"] .card-meta b, :root[data-theme="dark"] .fopt { color: #f1f3f9; }
:root[data-theme="dark"] .fopt em, :root[data-theme="dark"] .oh-field > span { color: #c9cfdc; }

/* slightly larger small type everywhere */
.small { font-size: 13.5px; }
.card-meta { font-size: 13px; }
.card-title { font-size: 15.5px; }
.card-price b { font-size: 20px; }
.box-price { font-size: 13px; }
.fopt { font-size: 14.5px; }
.fopt em { font-size: 12.5px; }
.bell-body { font-size: 14px; }
.bell-time, .tk-time, .tl-time, .field-hint { font-size: 12.5px; }
.tbl th { font-size: 12px; }
.tbl td { font-size: 14px; }
.oh-field > span { font-size: 11.5px; }

/* use the width of the window */
.topbar-inner, .cust-main { max-width: none; }
.topbar-inner { padding: 0 24px; }
.cust-main { padding: 0 24px 48px; }
.shop { grid-template-columns: 232px minmax(0, 1fr); gap: 20px; }
.grid { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 14px; }
.deals { margin-bottom: 18px; }
.deal-row { grid-auto-columns: minmax(214px, 1fr); gap: 14px; }
.sec-title { font-size: 18px; margin: 4px 0 10px; }
.card-body { padding: 10px 12px 12px; gap: 5px; }
.card-title { min-height: 0; }
.card-actions { padding-top: 4px; }
@media (min-width: 1700px) { .grid { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); } }

/* full window photo viewer */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(5, 7, 18, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 76px 32px 28px; cursor: zoom-out; animation: lbIn .16s ease-out; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 24px; color: #fff; cursor: default; }
.lb-title { font-size: 20px; font-weight: 800; letter-spacing: .2px; }
.lb-sub { font-size: 14px; color: rgba(255, 255, 255, .78); margin-top: 3px; }
.lb-close { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .10);
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lb-close:hover { background: rgba(255, 255, 255, .22); }
.lb-img { width: 100%; height: 100%; object-fit: contain; cursor: default; display: block; }
@media (max-width: 700px) { .lightbox { padding: 70px 8px 8px; } .lb-bar { padding: 12px 14px; } .lb-title { font-size: 16px; } }

/* prebook print sheet: hidden on screen */
.print-sheet { display: none; }
@media print {
  @page { size: letter; margin: 0.45in; }
  html, body { background: #fff !important; }
  body * { visibility: hidden; }
  .print-sheet, .print-sheet * { visibility: visible; }
  .od-page > :not(.print-sheet) { display: none !important; }
  .topbar, .staff .side, .staff-top, .toasts, .side-pops { display: none !important; }
  .staff, .staff-main, .cust-main, .page { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .print-sheet { display: block; position: absolute; left: 0; top: 0; width: 100%; color: #000; font: 10.5px/1.35 Manrope, Arial, sans-serif; }
  .ps-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #2e3192; padding-bottom: 8px; margin-bottom: 8px; }
  .ps-brand img { height: 38px; width: auto; display: block; }
  .ps-co { font-size: 9.5px; color: #333; margin-top: 4px; }
  .ps-title { text-align: right; }
  .ps-kind { font-size: 20px; font-weight: 800; letter-spacing: 3px; color: #2e3192; }
  .ps-num { font-size: 15px; font-weight: 800; font-family: ui-monospace, monospace; }
  .ps-st { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #444; }
  .ps-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 16px; margin-bottom: 8px; }
  .ps-info span { display: inline-block; min-width: 72px; color: #555; font-weight: 700; }
  .ps-info .ps-wide { grid-column: 1 / -1; }
  .ps-tbl { width: 100%; border-collapse: collapse; }
  .ps-tbl th { text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1.5px solid #000; padding: 3px 4px; }
  .ps-tbl td { padding: 3px 4px; border-bottom: 1px solid #ddd; vertical-align: top; }
  .ps-tbl .n { text-align: right; white-space: nowrap; }
  .ps-tbl tr.rej td { color: #777; }
  .ps-tbl tr { page-break-inside: avoid; }
  .ps-tbl tfoot td { border-top: 1.5px solid #000; border-bottom: 0; font-weight: 700; padding-top: 5px; }
  .ps-note { margin: 10px 0 4px; font-weight: 700; }
  .ps-disc { margin: 0; font-size: 9px; color: #444; }
}
.deal-row { grid-auto-columns: 226px; }
@media (min-width: 1700px) { .deal-row { grid-auto-columns: 246px; } }
@media (max-width: 700px) { .deal-row { grid-auto-columns: 72%; } }

/* =====================================================================
   Site looks (preview). Set <html data-look="...">.
   ===================================================================== */

/* A. Liquid Glass Pro: the glass made obvious, floating bars, vivid backdrop */
:root[data-look="glass"] {
  --radius: 22px;
  --glass: rgba(255, 255, 255, .38);
  --glass-strong: rgba(255, 255, 255, .62);
  --glass-edge: rgba(255, 255, 255, .65);
  --glass-hi: rgba(255, 255, 255, .95);
  --blur: blur(28px) saturate(190%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25), 0 18px 44px rgba(30, 34, 120, .16);
  --mesh:
    radial-gradient(620px 520px at 8% 12%, rgba(70, 76, 230, .55), transparent 70%),
    radial-gradient(560px 480px at 92% 8%, rgba(240, 60, 70, .42), transparent 70%),
    radial-gradient(700px 560px at 70% 85%, rgba(40, 190, 140, .38), transparent 70%),
    radial-gradient(600px 500px at 15% 90%, rgba(250, 180, 60, .40), transparent 70%),
    linear-gradient(135deg, #dfe4ff 0%, #f3e9f4 50%, #e3f4ee 100%);
}
:root[data-look="glass"][data-theme="dark"] {
  --glass: rgba(30, 34, 60, .40);
  --glass-strong: rgba(34, 38, 66, .62);
  --glass-edge: rgba(255, 255, 255, .16);
  --glass-hi: rgba(255, 255, 255, .22);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 20px 50px rgba(0, 0, 0, .55);
  --mesh:
    radial-gradient(620px 520px at 8% 12%, rgba(90, 96, 255, .50), transparent 70%),
    radial-gradient(560px 480px at 92% 8%, rgba(240, 50, 70, .35), transparent 70%),
    radial-gradient(700px 560px at 70% 85%, rgba(30, 170, 130, .30), transparent 70%),
    linear-gradient(135deg, #0b0d24 0%, #120c1f 100%);
}
:root[data-look="glass"] .topbar { margin: 10px 14px 0; border-radius: 20px; border: 1px solid var(--glass-edge); top: 10px; }
:root[data-look="glass"] .topbar::after { display: none; }
:root[data-look="glass"] .topnav a { border-radius: 999px; }
:root[data-look="glass"] .topnav a.active { background: rgba(46, 49, 146, .85); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(46,49,146,.35); }
:root[data-look="glass"] .order-header { margin-top: 14px; border-radius: 20px; }
:root[data-look="glass"] .btn-primary, :root[data-look="glass"] .cart-btn { border-radius: 999px; }
:root[data-look="glass"] .card-img { margin: 8px 8px 0; border-radius: 16px; border: 0; }
:root[data-look="glass"] .card-body { padding-top: 12px; }

/* B. Florist Catalog: editorial, warm paper, serif names, no shadows */
:root[data-look="catalog"] {
  --radius: 4px;
  --mesh: #f6f2ea; --paper: #f6f2ea;
  --glass: #fffdf8; --glass-strong: #fffdf8; --glass-edge: #e3dccd; --glass-hi: transparent;
  --blur: none; --glass-shadow: none;
  --ink: #1d1a16; --ink-2: #3c372f; --muted: #6f675b; --strong: #1d1a16; --line: #e3dccd; --line-2: #ece6da; --input-line: #d6cdbb;
  --green: #1f2a6b; --green-700: #1f2a6b; --green-50: #ece8de;
}
:root[data-look="catalog"][data-theme="dark"] {
  --mesh: #15130f; --paper: #15130f; --glass: #1d1b16; --glass-strong: #1d1b16; --glass-edge: #34302a;
  --ink: #f4efe5; --ink-2: #e2dccf; --muted: #c2b9a8; --strong: #f4efe5; --line: #34302a; --line-2: #2a2721; --input-line: #464036;
  --green: #c9b27a; --green-700: #c9b27a; --green-50: #2a2721;
}
:root[data-look="catalog"] .topbar { box-shadow: none; border-bottom: 1px solid var(--glass-edge); }
:root[data-look="catalog"] .topbar::after { display: none; }
:root[data-look="catalog"] .topnav a { border-radius: 0; text-transform: uppercase; letter-spacing: 1.4px; font-size: 12.5px; }
:root[data-look="catalog"] .topnav a.active { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand-red); }
:root[data-look="catalog"] .card, :root[data-look="catalog"] .card:hover { box-shadow: none; transform: none; border-color: var(--glass-edge); }
:root[data-look="catalog"] .card-img { border-radius: 0; }
:root[data-look="catalog"] .card-title, :root[data-look="catalog"] .sec-title, :root[data-look="catalog"] .page-title { font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: .1px; }
:root[data-look="catalog"] .card-title { font-size: 17px; text-transform: capitalize; }
:root[data-look="catalog"] .sec-title { font-size: 24px; border-bottom: 1px solid var(--glass-edge); padding-bottom: 6px; }
:root[data-look="catalog"] .card-price b { color: var(--ink); font-family: Fraunces, Georgia, serif; }
:root[data-look="catalog"] .btn, :root[data-look="catalog"] input, :root[data-look="catalog"] select, :root[data-look="catalog"] .stepper { border-radius: 2px; box-shadow: none; }
:root[data-look="catalog"] .btn-primary { background: #1d1a16; border-color: #1d1a16; color: #fff; box-shadow: none; text-transform: uppercase; letter-spacing: 1.2px; font-size: 12.5px; }
:root[data-look="catalog"][data-theme="dark"] .btn-primary { background: #c9b27a; border-color: #c9b27a; color: #15130f; }
:root[data-look="catalog"] .cart-btn { border-radius: 2px; background: var(--brand-red); box-shadow: none; }
:root[data-look="catalog"] .ribbon { border-radius: 0; box-shadow: none; letter-spacing: 1.5px; }
:root[data-look="catalog"] .chip, :root[data-look="catalog"] .badge { border-radius: 2px; }
:root[data-look="catalog"] .fav-btn { border-radius: 0; }
:root[data-look="catalog"] .filters, :root[data-look="catalog"] .order-header { border-radius: 0; }

/* C. Night Cooler: always dark, photo first, bright accents */
:root[data-look="cooler"] {
  color-scheme: dark;
  --radius: 14px;
  --mesh: radial-gradient(1200px 600px at 50% -10%, #1b2250 0%, #0a0c14 60%); --paper: #0a0c14;
  --glass: #12151f; --glass-strong: #161a26; --glass-edge: #232838; --glass-hi: rgba(255,255,255,.04); --blur: none;
  --glass-shadow: 0 10px 30px rgba(0,0,0,.5);
  --ink: #f6f7fb; --ink-2: #e3e6ee; --muted: #b6bdcc; --strong: #ffffff; --line: #232838; --line-2: #1a1e2a; --input-line: #2c3244;
  --card: #12151f; --green: #ff4d57; --green-700: #ff6b73; --green-50: #2a1418; --thead: #12151f;
}
:root[data-look="cooler"] body { color: var(--ink); }
:root[data-look="cooler"] .topbar { background: rgba(10,12,20,.85); border-bottom: 1px solid #232838; }
:root[data-look="cooler"] .topbar::after { background: linear-gradient(90deg, transparent, #ff4d57 30%, #6f74ff 70%, transparent); }
:root[data-look="cooler"] .topnav a { color: #c9cedb; }
:root[data-look="cooler"] .topnav a.active { background: #ffffff; color: #0a0c14; border-radius: 999px; }
:root[data-look="cooler"] .card { border: 0; }
:root[data-look="cooler"] .card:hover { box-shadow: 0 0 0 1px #ff4d57, 0 24px 50px rgba(0,0,0,.6); }
:root[data-look="cooler"] .card-img { aspect-ratio: 4 / 5; border: 0; }
:root[data-look="cooler"] .card-price b { color: #ffffff; font-size: 22px; }
:root[data-look="cooler"] .btn-primary { background: #ff4d57; border-color: #ff4d57; color: #fff; box-shadow: 0 8px 20px rgba(255,77,87,.35); border-radius: 999px; }
:root[data-look="cooler"] .btn { color: var(--ink); }
:root[data-look="cooler"] input, :root[data-look="cooler"] select, :root[data-look="cooler"] .stepper { background: #0e1119; color: var(--ink); border-color: #2c3244; }
:root[data-look="cooler"] .sec-title { font-size: 22px; letter-spacing: .2px; }
:root[data-look="cooler"] .seg button.on { background: #ff4d57; }
:root[data-look="cooler"] .only-dark { display: inline !important; }
:root[data-look="cooler"] .only-light { display: none !important; }
:root[data-look="cooler"] .fav-btn { background: rgba(0,0,0,.45); color: #fff; }

/* D. Wholesale Market: dense, flat, fast to scan, most products per screen */
:root[data-look="market"] {
  --radius: 6px;
  --mesh: #f2f3f5; --paper: #f2f3f5;
  --glass: #ffffff; --glass-strong: #ffffff; --glass-edge: #dcdfe4; --glass-hi: transparent; --blur: none;
  --glass-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
:root[data-look="market"][data-theme="dark"] { --mesh: #101217; --paper: #101217; --glass: #181b22; --glass-strong: #1c2028; --glass-edge: #2a2f3a; --glass-shadow: none; }
:root[data-look="market"] .topbar { background: #2e3192; border: 0; box-shadow: none; }
:root[data-look="market"] .topbar::after { background: #e3202b; height: 3px; }
:root[data-look="market"] .topbar .brand-img.only-light { display: none !important; }
:root[data-look="market"] .topbar .brand-img.only-dark { display: inline !important; }
:root[data-look="market"] .topnav a, :root[data-look="market"] .who, :root[data-look="market"] .topbar .btn-ghost, :root[data-look="market"] .theme-btn, :root[data-look="market"] .bell { color: #fff !important; }
:root[data-look="market"] .topnav a.active { background: rgba(255,255,255,.18); }
:root[data-look="market"] .grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
:root[data-look="market"] .deal-row { grid-auto-columns: 186px; gap: 10px; }
:root[data-look="market"] .card:hover { transform: none; box-shadow: 0 4px 14px rgba(16,24,40,.12); }
:root[data-look="market"] .card-body { padding: 8px 10px 10px; gap: 3px; }
:root[data-look="market"] .card-title { font-size: 14px; }
:root[data-look="market"] .card-price b { font-size: 18px; color: #b3121b; }
:root[data-look="market"][data-theme="dark"] .card-price b { color: #ff7a80; }
:root[data-look="market"] .card-meta { font-size: 12px; }
:root[data-look="market"] .btn-primary { background: #f2a531; border-color: #e0951f; color: #1b1b1b; box-shadow: none; }
:root[data-look="market"] .btn, :root[data-look="market"] .card:hover { border-radius: 6px; }
:root[data-look="market"] .sec-title { font-size: 17px; }
:root[data-look="market"] .ribbon { border-radius: 3px; box-shadow: none; }
:root[data-look="market"] .cart-btn { background: #e3202b; box-shadow: none; border-radius: 6px; }

/* prebook print: roomier, uses the whole page */
@media print {
  @page { size: letter; margin: 0.5in 0.55in; }
  .print-sheet { font-size: 12.5px; line-height: 1.5; }
  .ps-head { padding-bottom: 14px; margin-bottom: 18px; border-bottom-width: 3px; align-items: center; }
  .ps-brand img { height: 58px; }
  .ps-co { font-size: 11.5px; margin-top: 6px; line-height: 1.45; }
  .ps-kind { font-size: 30px; letter-spacing: 5px; }
  .ps-num { font-size: 20px; margin-top: 2px; }
  .ps-st { font-size: 12px; margin-top: 4px; }
  .ps-info { grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid #c9ccd8; border-radius: 6px; margin-bottom: 22px; }
  .ps-info > div { padding: 9px 12px; border-bottom: 1px solid #e3e5ec; border-right: 1px solid #e3e5ec; }
  .ps-info > div:nth-child(3n) { border-right: 0; }
  .ps-info .ps-wide { border-right: 0; }
  .ps-info > div:last-child { border-bottom: 0; }
  .ps-info span { display: block; min-width: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: #666; margin-bottom: 2px; }
  .ps-tbl th { font-size: 10.5px; padding: 8px 8px; background: #eef0f8; border-bottom: 2px solid #2e3192; }
  .ps-tbl td { padding: 9px 8px; }
  .ps-tbl tbody tr:nth-child(even) td { background: #f8f9fc; }
  .ps-tbl tfoot td { padding-top: 10px; font-size: 13.5px; border-top: 2px solid #2e3192; }
  .ps-note { margin: 26px 0 8px; font-size: 12.5px; padding: 10px 14px; border-left: 4px solid #2e3192; background: #f3f4fa; }
  .ps-disc { font-size: 10.5px; line-height: 1.5; }
  .print-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media print { .ps-tbl th:last-child, .ps-tbl td:last-child { min-width: 1.6in; } .ps-tbl td:first-child { white-space: nowrap; } }

/* compact tiles and carousel above the catalog */
.mini-sec { margin-bottom: 16px; }
.mini-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mini-head .sec-title { margin: 0; }
.mini-track { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 2px 8px; scrollbar-width: thin; }
.mini { scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  transition: transform .18s ease, box-shadow .18s ease; }
.mini:hover { transform: translateY(-2px); }
.mini-incart { box-shadow: 0 0 0 2px var(--green), var(--glass-shadow); }
.mini-img { position: relative; aspect-ratio: 1 / 1; background: var(--line-2); cursor: zoom-in; overflow: hidden; }
.mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-img .ph { cursor: default; }
.mini-img .ph-leaf { width: 40px; height: 40px; }
.mini-qty { position: absolute; left: 8px; bottom: 8px; background: var(--green); color: #fff; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.mini-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mini-note { font-size: 11.5px; font-weight: 800; color: var(--strong); }
.mini-name { font-size: 13.5px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.mini-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.mini-price { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.mini-price b { font-size: 16px; color: var(--strong); }
.mini-foot .btn { min-width: 52px; }
.car-tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 999px; padding: 4px;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.car-tab { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-weight: 800; font-size: 14px; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.car-tab:hover { color: var(--strong); }
.car-tab.on { background: linear-gradient(180deg, #4247c0, #2e3192); color: #fff; box-shadow: 0 4px 12px rgba(46, 49, 146, .3); }
:root[data-theme="dark"] .car-tab.on { background: linear-gradient(180deg, #7c81f2, #5b60d8); }
.car-arrows { display: flex; gap: 6px; flex: none; }
.car-btn { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass-strong); color: var(--strong);
  font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--glass-shadow); }
.car-btn:hover { transform: translateY(-1px); }
@media (min-width: 1700px) { .mini-track { grid-auto-columns: 184px; } }
@media (max-width: 700px) { .mini-track { grid-auto-columns: 42%; } .car-arrows { display: none; } .car-tab { font-size: 13px; padding: 5px 10px; } }

/* phones and small tablets */
@media (max-width: 900px) {
  .shop { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cust-main { padding: 0 12px 40px; }
  .topbar-inner { padding: 0 12px; }
  :root[data-look="glass"] .topbar { margin: 8px 8px 0; top: 8px; border-radius: 18px; }
}
@media (max-width: 700px) {
  .topbar-inner { height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
  .topbar-right { margin-left: auto; }
  .topnav { order: 3; width: 100%; justify-content: space-between; }
  .topnav a { white-space: nowrap; padding: 7px 12px; font-size: 14px; }
  .search-row .search-box { flex-basis: 100%; }
}
@media (max-width: 700px) { .car-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .car-tab { white-space: nowrap; } }

/* photo view with frequently bought together */
.lightbox { flex-direction: column; gap: 14px; }
.lb-stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.lb-extra { flex: none; width: min(1100px, 100%); cursor: default; }
.fbt { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; padding: 12px 16px; color: #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fbt-title { font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.fbt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fbt-plus { font-size: 22px; opacity: .6; }
.fbt-item { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .07); border-radius: 12px; padding: 6px 10px 6px 8px; cursor: pointer; flex: 1 1 220px; min-width: 0; }
.fbt-item.off { opacity: .45; }
.fbt-item input { accent-color: #7c81f2; width: 18px; height: 18px; flex: none; }
.fbt-img { width: 52px; height: 52px; border-radius: 9px; overflow: hidden; flex: none; background: rgba(255, 255, 255, .1); display: grid; place-items: center; }
.fbt-img img { width: 100%; height: 100%; object-fit: cover; }
.fbt-info { display: flex; flex-direction: column; min-width: 0; }
.fbt-name { font-weight: 700; font-size: 13.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbt-price { font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.fbt-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.fbt-total { font-size: 13.5px; color: rgba(255, 255, 255, .85); }
.fbt-total b { color: #fff; font-size: 16px; }
@media (max-width: 700px) { .fbt-plus { display: none; } .fbt-item { flex-basis: 100%; } .fbt-buy { width: 100%; align-items: stretch; } .lb-extra { max-height: 46vh; overflow: auto; } }

/* personal specials */
.sp-mode { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--glass-edge); }
.sp-toggle { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 420px; cursor: pointer; }
.sp-toggle input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.sp-per { width: 140px; }
.sp-preview td { vertical-align: top; }
.sp-pick { display: inline-flex; flex-direction: column; background: var(--green-50); border-radius: 10px; padding: 4px 10px; margin: 2px 6px 2px 0; font-size: 13px; font-weight: 700; }
.sp-pick em { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--strong); opacity: .85; }
.topnav a { white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 701px) { .topbar-inner { gap: 14px; } .who { max-width: 150px; } .topnav a { padding: 8px 10px; } }

/* carrier service days */
.days { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.day { min-width: 38px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--input-line); background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 800; text-align: center; cursor: pointer; }
.day.on { background: linear-gradient(180deg, #4247c0, #2e3192); border-color: transparent; color: #fff; }
:root[data-theme="dark"] .day.on { background: linear-gradient(180deg, #7c81f2, #5b60d8); }
.days.ro .day { cursor: default; min-width: 34px; padding: 3px 4px; }
.days.ro .day:not(.on) { opacity: .45; border-style: dashed; }
.inline-select { min-height: 34px; padding: 4px 8px; font-size: 13.5px; max-width: 190px; }
.acct-wide { grid-column: 1 / -1; }
.days.ro { flex-wrap: nowrap; }
.tbl-scroll { overflow-x: auto; max-width: 100%; } .tbl-scroll .tbl td, .tbl-scroll .tbl th { white-space: nowrap; }
.acct-grid > * { min-width: 0; }

/* password rules checklist */
.pw-rules { list-style: none; margin: -4px 0 2px; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.pw-rules li { display: flex; align-items: center; gap: 8px; }
.pw-dot { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--input-line); display: grid; place-items: center; font-size: 10px; font-weight: 800; flex: none; }
.pw-rules li.met { color: var(--ink); }
.pw-rules li.met .pw-dot { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.pw-match { font-size: 13px; color: var(--red); margin-top: -4px; }
.pw-match.ok { color: #1f8a4c; }
.login-page.single .login-card { background: rgba(255, 255, 255, .96); }
:root[data-theme="dark"] .login-page.single .login-card { background: rgba(22, 25, 36, .96); }
.pair-why { font-size: 11.5px; font-weight: 700; color: var(--strong); margin-top: 1px; }
.fbt-why { font-size: 11.5px; font-weight: 700; color: #c9ccff; }

/* needs attention */
.attn { padding: 14px 18px; margin-bottom: 14px; }
.attn-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.attn-bar { flex: 1; min-width: 180px; height: 10px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.attn-bar span { display: block; height: 100%; background: linear-gradient(90deg, #2e9b5c, #1f8a4c); border-radius: 999px; transition: width .4s; }
.attn-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 6px; }
.attn-chip { border: 1px solid var(--glass-edge); background: var(--glass-strong); color: var(--ink); font: inherit; font-weight: 700; font-size: 13.5px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.attn-chip b { margin-left: 4px; color: var(--brand-red); }
.attn-chip.on { background: linear-gradient(180deg, #4247c0, #2e3192); color: #fff; border-color: transparent; }
.attn-chip.on b { color: #ffd8b0; }
.need-chip { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin: 1px 4px 1px 0;
  background: #ffe9cc; color: #8a4b00; }
:root[data-theme="dark"] .need-chip { background: #4d2f12; color: #ffc68c; }
.pe-foot { margin-right: auto; }

/* account access pills */
.access-pill { display: inline-block; font: inherit; font-size: 12.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px; border: 0; white-space: nowrap; }
.access-pill.on { background: #d6f2df; color: #145c33; }
.access-pill.sent { background: #dfe3ff; color: #2e3192; }
.access-pill.send { background: linear-gradient(180deg, #ef3a43, #d11c25); color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(227, 32, 43, .25); }
.access-pill.send:hover { filter: brightness(1.06); }
:root[data-theme="dark"] .access-pill.on { background: #17432a; color: #93e6ad; }
:root[data-theme="dark"] .access-pill.sent { background: #2a2e66; color: #c9ccff; }
.link-btn { border: 0; background: none; color: var(--strong); font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; margin-left: 6px; }
.nowrap { white-space: nowrap; }
.send-now { align-items: flex-start; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--glass-edge); }
.send-now input { margin-top: 3px; }
.tbl-wrap { overflow-x: auto; }

/* badges on tiles: Hot Deal and On Sale stack in the corner */
.ribbons { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; z-index: 1; }
.ribbons .ribbon { position: static; }
.ribbon.sale { background: linear-gradient(180deg, #23a85d, #157a40); box-shadow: 0 4px 12px rgba(21, 122, 64, .35); }
.mini-sale { position: absolute; top: 8px; left: 8px; font-size: 10.5px; padding: 3px 8px; }
.sale-btn { background: linear-gradient(180deg, #23a85d, #157a40) !important; color: #fff !important; border-color: transparent !important; }

/* Dropdowns and pills: black text in light mode, white text in dark mode */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
select, input, textarea { color: var(--ink); }
select option, select optgroup { color: #111317; background: #ffffff; }
:root[data-theme="dark"] select option, :root[data-theme="dark"] select optgroup { color: #f6f7fb; background: #1b1e2b; }
.chip, .tag-chip, .cat-chip, .tab, .car-tab, .attn-chip, .fopt, .seg button, .need-chip,
.tag-pill, .topnav a, .access-pill.sent, .access-pill.on, .badge.st-muted { color: #111317; }
:root[data-theme="dark"] .chip, :root[data-theme="dark"] .tag-chip, :root[data-theme="dark"] .cat-chip, :root[data-theme="dark"] .tab,
:root[data-theme="dark"] .car-tab, :root[data-theme="dark"] .attn-chip, :root[data-theme="dark"] .fopt, :root[data-theme="dark"] .seg button,
:root[data-theme="dark"] .need-chip, :root[data-theme="dark"] .topnav a, :root[data-theme="dark"] .access-pill.sent,
:root[data-theme="dark"] .access-pill.on, :root[data-theme="dark"] .badge.st-muted { color: #ffffff; }
/* the tag pill sits on a white photo label, keep it dark */
:root[data-theme="dark"] .tag-pill { color: #111317; }
/* selected or filled pills keep white text on their dark color */
.tab.on, .car-tab.on, .attn-chip.on, .seg button.on, .topnav a.active, .chip-clear { color: #ffffff; }
.tab.on { color: #111317; }
:root[data-theme="dark"] .tab.on { color: #ffffff; }
.chip-clear { color: var(--brand-red) !important; }
.attn-chip b { color: inherit; opacity: .75; }
/* Windows draws the open list from the box's own colors, so dark mode needs a solid dark box. */
:root[data-theme="dark"] select { background-color: #1b1e2b; color: #f6f7fb; }
:root[data-theme="dark"] select option:checked { background: #3a3f9e; color: #ffffff; }
:root:not([data-theme="dark"]) select { background-color: #ffffff; color: #111317; }
:root:not([data-theme="dark"]) select option:checked { background: #dfe3ff; color: #111317; }

/* service day note in the order header */
.svc-note { flex-basis: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px;
  background: #fff4dc; border: 1px solid #f0d9a0; color: #6b4a00; font-size: 13.5px; font-weight: 600; }
:root[data-theme="dark"] .svc-note { background: #3a2f0c; border-color: #6b5520; color: #ffe2a3; }
.svc-note .btn { margin-left: auto; }

/* inventory freshness */
.inv-fresh { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sec-title:has(.inv-fresh) { align-items: baseline; }
.fresh { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; background: var(--glass); border: 1px solid var(--glass-edge); }
.fresh.warn { background: #fff4dc; border-color: #f0d9a0; color: #6b4a00; }
:root[data-theme="dark"] .fresh.warn { background: #3a2f0c; border-color: #6b5520; color: #ffe2a3; }
.forgot-link { display: block; margin: 2px auto 0; font-size: 13.5px; }

/* first visit guide */
.tour { position: fixed; inset: 0; z-index: 400; }
.tour-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(8, 10, 30, .62), 0 0 0 3px #ffffff, 0 0 30px 6px rgba(124, 129, 242, .7);
  transition: all .3s ease; pointer-events: none; }
.tour-card { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); width: min(460px, calc(100vw - 24px)); padding: 18px 20px;
  background: var(--card); color: var(--ink); border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); border: 1px solid var(--glass-edge); }
.tour-step { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--strong); }
.tour-card h3 { margin: 4px 0 6px; font-size: 19px; }
.tour-card p { margin: 0 0 14px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.tour-actions { display: flex; gap: 8px; justify-content: flex-end; }
.tour-actions .btn-ghost { margin-right: auto; }
.tour-card.top { bottom: auto; top: 90px; }

/* Tag colors picker */
.tagc-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; max-height: 60vh; overflow: auto; }
.tagc-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.tagc-preview { min-width: 130px; }
.tagc-swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; position: relative; overflow: hidden; }
.swatch.on { outline: 3px solid var(--green-600, #1f8a4c); outline-offset: 2px; }
.swatch.custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); display: inline-block; }
.swatch.custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }

.tagc-new { display: flex; gap: 8px; margin: 10px 0 4px; }
.tagc-new input { flex: 1; max-width: 340px; }
.tagc-count { margin-left: auto; }
.link.danger { color: var(--brand-red, #d11c25); }
.tag-chip.pick { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 3px 10px; margin: 2px 4px 2px 0; }
.tag-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 6px; }

.tagf-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 10px; border-radius: 10px; background: var(--green-50, rgba(31,138,76,.08)); }

.color-other { display: flex; gap: 8px; align-items: center; }
.color-other input { flex: 1; }

.preview-banner { position: relative; z-index: 5; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 18px; background: #f2b705; color: #111317; font-size: 14px; }
.preview-banner .btn { background: #111317; color: #fff; border-color: #111317; }
.cv-pick { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cv-row { display: flex; gap: 8px; align-items: center; }

.warn-text { color: #b45309; }
:root[data-theme="dark"] .warn-text { color: #fbbf24; }

.facet-search { width: 100%; margin: 6px 0 8px; padding: 6px 10px; font-size: 13px; }

/* Side panel layout for the photo popup: photo on the left, pairings on the right like the cart. */
@media (min-width: 900px) {
  .lightbox.lb-side { display: grid; grid-template-columns: minmax(0, 1fr) 470px; grid-template-rows: minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .lb-side .lb-stage { grid-column: 1; height: 100%; }
  .lb-side .lb-extra { grid-column: 2; width: auto; align-self: center; max-height: 100%; overflow: auto; }
  .lb-side .fbt { padding: 18px; }
  .lb-side .fbt-title { font-size: 17px; margin-bottom: 12px; }
  .lb-side .fbt-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; }
  .lb-side .fbt-plus { display: none; }
  .lb-side .fbt-item { flex: none; padding: 10px 12px; }
  .lb-side .fbt-img { width: 104px; height: 104px; border-radius: 12px; }
  .lb-side .fbt-item { gap: 14px; }
  .lb-side .fbt-name { font-size: 15px; }
  .lb-side .fbt-price { font-size: 14px; margin-top: 2px; }
  .lb-side .fbt-why { font-size: 12.5px; margin-top: 2px; }
  .lb-side .fbt-name { white-space: normal; }
  .lb-side .fbt-buy { margin: 8px 0 0; align-items: stretch; border-top: 1px solid rgba(255,255,255,.14); padding-top: 12px; }
  .lb-side .fbt-buy .btn { width: 100%; padding: 12px; font-size: 15px; }
}
@media (min-width: 900px) {
  .lightbox.lb-side:has(.lb-extra:empty) { grid-template-columns: minmax(0, 1fr); }
  .lightbox.lb-side .lb-extra:empty { display: none; }
}