:root {
  --font-en: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-bn: 'Noto Sans Bengali', 'Hind Siliguri', 'SolaimanLipi', 'Kalpurush', system-ui, sans-serif;
}

body.font-en-system { --font-en: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body.font-en-inter { --font-en: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body.font-en-poppins { --font-en: Poppins, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body.font-en-roboto { --font-en: Roboto, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }
body.font-en-nunito { --font-en: 'Nunito Sans', Nunito, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }
body.font-en-georgia { --font-en: Georgia, 'Times New Roman', Times, serif; }
body.font-bn-noto-bengali { --font-bn: 'Noto Sans Bengali', 'Hind Siliguri', 'SolaimanLipi', 'Kalpurush', system-ui, sans-serif; }
body.font-bn-hind-siliguri { --font-bn: 'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', 'Kalpurush', system-ui, sans-serif; }
body.font-bn-solaimanlipi { --font-bn: 'SolaimanLipi', 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif; }
body.font-bn-kalpurush { --font-bn: 'Kalpurush', 'Noto Sans Bengali', 'Hind Siliguri', 'SolaimanLipi', system-ui, sans-serif; }
body.font-bn-system { --font-bn: system-ui, -apple-system, Segoe UI, Arial, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-en), var(--font-bn), ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--ink); padding-bottom: 86px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand img, .brand-mark { width: 42px; height: 42px; border-radius: 14px; object-fit: cover; background: linear-gradient(135deg, var(--brand), #60a5fa); color: white; display: grid; place-items: center; font-weight: 900; }
.brand strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.brand small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.top-actions { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lang-form select { width: auto; padding: 6px 8px; border-radius: 10px; font-weight: 900; }
.cart-pill { background: var(--brand-soft); color: var(--brand-dark); border: 1px solid #bfdbfe; border-radius: 999px; padding: 8px 10px; font-weight: 800; }
.cart-pill span { background: var(--brand); color: #fff; border-radius: 999px; padding: 1px 6px; margin-left: 3px; }
.page { width: min(1120px, 100%); margin: 0 auto; padding: 16px; }
.hero-card, .detail-card, .auth-card, .success-card, .card-form, .summary-card, .cart-footer-card, .review-card, .settings-section { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 20px; box-shadow: var(--shadow); }
.hero-card { min-height: 280px; display: flex; align-items: end; color: white; overflow: hidden; background: radial-gradient(circle at 80% 10%, rgba(147,197,253,.6), transparent 30%), linear-gradient(135deg, #1e3a8a, #2563eb 55%, #0f172a); background-size: cover; background-position: center; }
.hero-overlay { width: 100%; padding: 18px; margin: -18px; border-radius: 24px; background: linear-gradient(90deg, rgba(15,23,42,.68), rgba(15,23,42,.22)); }
.hero-card h1 { margin: 4px 0 8px; font-size: clamp(32px, 8vw, 58px); line-height: .95; letter-spacing: -1.4px; }
.hero-card p { max-width: 640px; }
.eyebrow { color: var(--brand-dark); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 6px; }
.hero-card .eyebrow { color: #bfdbfe; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn { border: 0; background: var(--brand); color: #fff; padding: 12px 16px; border-radius: 14px; font-weight: 900; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 24px rgba(37, 99, 235, .25); }
.btn:hover { background: var(--brand-dark); }
.btn-muted { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn-whatsapp { background: var(--whatsapp); color: #063b1e; box-shadow: 0 10px 24px rgba(37, 211, 102, .25); }
.btn-google { background: #fff; color: #111827; border: 1px solid rgba(148,163,184,.55); box-shadow: 0 12px 28px rgba(2,6,23,.18); }
.btn-google:hover { background: #f8fafc; color: #0f172a; }
.google-icon { width: 24px; height: 24px; border-radius: 999px; display: inline-grid; place-items: center; font-weight: 950; background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0 100%); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.auth-email-link { display: block; text-align: center; margin-top: 12px; font-weight: 900; color: var(--brand-soft); }
.auth-note { text-align: center; margin: 10px 0 0; font-size: 12px; }
.btn-small { padding: 8px 11px; border-radius: 11px; font-size: 13px; }
.btn-full { width: 100%; }
.section-head { display: flex; align-items: end; justify-content: space-between; margin: 24px 0 12px; }
h1, h2, h3 { margin: 0; letter-spacing: -.03em; }
.searchbar { display: flex; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 8px; margin-bottom: 12px; }
.searchbar input { flex: 1; border: 0; outline: 0; padding: 10px; min-width: 0; }
.chip-row, .panel-tabs, .status-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.chip, .panel-tabs a, .status-tabs a { white-space: nowrap; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px; padding: 10px 14px; font-weight: 800; font-size: 13px; }
.chip.active, .panel-tabs .active, .status-tabs .active { color: #fff; background: var(--brand-dark); border-color: var(--brand-dark); }
.status-tabs span { opacity: .75; margin-left: 4px; }
.item-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.item-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.item-photo, .detail-photo, .cart-thumb, .mini-thumb { background: linear-gradient(135deg, #dbeafe, #bfdbfe); display: grid; place-items: center; color: var(--brand-dark); font-size: 42px; font-weight: 900; }
.item-photo { height: 170px; }
.item-photo img, .detail-photo img, .cart-thumb img, .mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-body { padding: 14px; }
.item-category { margin: 0 0 4px; color: var(--brand-dark); font-size: 12px; font-weight: 900; }
.item-body h3 { font-size: 18px; margin-bottom: 6px; }
.item-body p { color: var(--muted); margin: 0 0 12px; line-height: 1.45; }
.row-between, .order-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.detail-card { display: grid; gap: 20px; }
.detail-photo { min-height: 300px; border-radius: 22px; overflow: hidden; }
.detail-photo video { width: 100%; height: 100%; object-fit: cover; background: #020617; }
.lead { color: var(--muted); font-size: 18px; }
.detail-price { font-size: 34px; font-weight: 900; margin: 20px 0; color: var(--brand-dark); }
.back-link { display: inline-block; margin: 0 0 14px; color: var(--muted); font-weight: 800; }
.media-carousel { position: relative; overflow: hidden; }
.media-frame { position: relative; overflow: hidden; }
.carousel-media { display: none; width: 100%; height: 100%; object-fit: cover; }
.carousel-media.active { display: block; }
.media-arrow { position: absolute; top: 50%; transform: translateY(-50%); border: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(15,23,42,.72); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 3; }
.media-arrow.prev { left: 10px; }
.media-arrow.next { right: 10px; }
.media-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; }
.media-dots button { width: 9px; height: 9px; border-radius: 999px; border: 0; background: rgba(255,255,255,.55); }
.media-dots button.active { width: 22px; background: #fff; }
.cart-list, .order-list, .review-list { display: grid; gap: 12px; }
.cart-row, .order-card, .admin-row { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: grid; gap: 10px; align-items: center; }
.cart-row { grid-template-columns: 56px 1fr; }
.cart-thumb { width: 56px; height: 56px; border-radius: 16px; overflow: hidden; font-size: 22px; }
.cart-row small, .order-card small, .admin-row small { display: block; color: var(--muted); margin-top: 3px; }
.order-card-info { display: grid; gap: 4px; text-decoration: none; }
.order-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.order-card-head strong { font-size: 15px; }
.order-card-time { margin-top: 0 !important; white-space: nowrap; }
.order-card-label { display: inline-block; min-width: 68px; font-weight: 900; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; opacity: .82; }
.order-card-items { line-height: 1.45; }
.qty-control { display: inline-flex; align-items: center; gap: 8px; background: #eef2ff; border-radius: 999px; padding: 5px; width: fit-content; }
.qty-control button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: white; cursor: pointer; font-weight: 900; }
.remove-btn, .danger { border: 0; background: #fee2e2; color: var(--bad); border-radius: 12px; padding: 9px 12px; font-weight: 900; cursor: pointer; }
.cart-footer-card { margin-top: 14px; display: grid; gap: 12px; }
.two-col { display: grid; gap: 16px; }
.card-form { display: grid; gap: 13px; }
.card-form label { display: grid; gap: 7px; font-weight: 800; }
.card-form small, label small { color: var(--muted); font-weight: 600; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; background: #fff; color: var(--ink); outline-color: var(--brand); }
textarea { resize: vertical; }
.summary-card { height: fit-content; }
.apply-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.muted { color: var(--muted); line-height: 1.5; }
.auth-card, .success-card { max-width: 520px; margin: 30px auto; }
.success-card { text-align: center; }
.success-icon { width: 76px; height: 76px; border-radius: 50%; background: #dcfce7; color: var(--good); display: grid; place-items: center; margin: 0 auto 14px; font-size: 42px; font-weight: 900; }
.divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted); font-weight: 800; }
.divider:before, .divider:after { content: ''; flex: 1; height: 1px; background: var(--line); }
.stacked-form { margin-top: 16px; }
.flash { width: min(1088px, calc(100% - 32px)); margin: 12px auto 0; border-radius: 16px; padding: 12px 14px; font-weight: 800; }
.flash-error { background: #fee2e2; color: #991b1b; }
.flash-success { background: #dcfce7; color: #166534; }
.empty { background: var(--card); border: 1px dashed var(--line); border-radius: 20px; padding: 24px; text-align: center; color: var(--muted); }
.error-page h1 { color: var(--bad); }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.metric { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); }
.metric span { color: var(--muted); font-size: 12px; font-weight: 800; }
.metric strong { display: block; font-size: 25px; margin-top: 4px; }
.badge { width: fit-content; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 900; text-transform: capitalize; }
.badge.pending { background: #fef3c7; color: #92400e; }
.badge.approved { background: #dbeafe; color: #1e40af; }
.badge.delivered { background: #dcfce7; color: #166534; }
.badge.cancelled { background: #fee2e2; color: #991b1b; }
.inline-status, .row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-status select { min-width: 140px; }
.status-button-row { display: flex; gap: 6px; flex-wrap: wrap; }
.status-button-row form { margin: 0; }
.status-btn { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 10px; font-size: 12px; font-weight: 900; cursor: pointer; text-transform: capitalize; }
.status-btn.pending.active, .status-btn.pending:hover { background: #fef3c7; color: #92400e; }
.status-btn.approved.active, .status-btn.approved:hover { background: #dbeafe; color: #1e40af; }
.status-btn.delivered.active, .status-btn.delivered:hover { background: #dcfce7; color: #166534; }
.status-btn.cancelled.active, .status-btn.cancelled:hover { background: #fee2e2; color: #991b1b; }
.status-btn:disabled { cursor: default; opacity: .95; }
.check-row { display: flex; gap: 14px; flex-wrap: wrap; }
.check-row label, .mini-check { display: inline-flex; align-items: center; gap: 7px; }
.check-row input, .mini-check input { width: auto; }
.coupon-row { grid-template-columns: 1fr; }
.order-detail { max-width: 760px; margin: 0 auto; }
.total { font-size: 18px; font-weight: 900; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: #111827; color: white; padding: 12px 16px; border-radius: 999px; font-weight: 900; z-index: 50; box-shadow: var(--shadow); }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; align-items: center; gap: 3px; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
.bottom-nav a, .bottom-nav button { border: 0; background: transparent; color: var(--muted); padding: 9px 8px; border-radius: 12px; font-weight: 900; font-size: 11px; cursor: pointer; }
.bottom-nav .active { background: var(--brand-soft); color: var(--brand-dark); }
.whatsapp-float { position: fixed; right: 16px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 80; width: 48px; height: 48px; min-width: 48px; min-height: 48px; max-width: 48px; max-height: 48px; border-radius: 999px; background: var(--whatsapp); display: inline-grid; place-items: center; box-shadow: 0 12px 26px rgba(37,211,102,.35); border: 2px solid rgba(255,255,255,.96); padding: 0; line-height: 1; transition: transform .18s ease, box-shadow .18s ease; }
.whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(37,211,102,.44); }
.whatsapp-float svg { width: 26px; height: 26px; fill: white; display: block; }
.info-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 18px; padding: 14px; margin: 16px 0; }
.info-box pre { margin: 8px 0 0; white-space: pre-wrap; font-family: inherit; color: var(--muted); }
.rating-line { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.stars { color: #f59e0b; letter-spacing: .04em; }
.review-card { display: grid; gap: 10px; }
.review-head { display: flex; align-items: center; gap: 10px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--brand-soft); color: var(--brand-dark); display: grid; place-items: center; font-weight: 900; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.owner-reply { background: #f8fafc; border-left: 4px solid var(--brand); border-radius: 14px; padding: 12px; }
.owner-reply p { margin: 4px 0 0; }
.settings-grid { display: grid; gap: 16px; }
.preview-logo { width: 90px; height: 90px; object-fit: cover; border-radius: 20px; border: 1px solid var(--line); }
.preview-banner { width: 100%; max-height: 220px; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); }
.media-admin-list { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.media-admin-row { display: grid; grid-template-columns: 86px 1fr; gap: 12px; align-items: center; }
.media-admin-row img, .media-admin-row video { width: 86px; height: 64px; object-fit: cover; border-radius: 12px; background: #020617; }
.mini-thumb { width: 56px; height: 56px; border-radius: 16px; overflow: hidden; font-size: 22px; }
.item-admin-row { grid-template-columns: 56px 1fr; }
.message-card p { margin: 0; color: var(--ink); line-height: 1.55; }
.compact-form { box-shadow: none; border-radius: 18px; padding: 14px; }
@media (min-width: 640px) {
  .item-grid { grid-template-columns: repeat(2, 1fr); }
  .cart-row, .order-card, .admin-row { grid-template-columns: auto 1fr auto auto; }
  .manage-card { grid-template-columns: 1fr auto auto auto; }
  .coupon-row { grid-template-columns: 1fr 120px 150px auto auto; }
  .item-admin-row { grid-template-columns: 56px 1fr auto; }
  .brand strong, .brand small { max-width: 200px; }
}
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .bottom-nav { display: none; }
  .whatsapp-float { bottom: 24px; right: 24px; width: 52px; height: 52px; min-width: 52px; min-height: 52px; max-width: 52px; max-height: 52px; }
  .whatsapp-float svg { width: 29px; height: 29px; }
  .brand strong, .brand small { max-width: none; }
  .page { padding: 24px; }
  .item-grid { grid-template-columns: repeat(4, 1fr); }
  .detail-card { grid-template-columns: 1fr 1fr; align-items: center; }
  .two-col { grid-template-columns: 1fr 380px; align-items: start; }
  .two-col.wide-left { grid-template-columns: 420px 1fr; }
  .metric-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .settings-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* v4 refinements: universal shop, bilingual catalog, banner slider, footer contacts */
.hero-card { position: relative; isolation: isolate; }
.hero-slider { align-items: stretch; }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity .55s ease, transform 2.8s ease; }
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-overlay { position: relative; z-index: 2; align-self: end; }
.hero-slider::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15,23,42,.72), rgba(30,58,138,.36), rgba(15,23,42,.18)); pointer-events: none; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.65); background: rgba(15,23,42,.52); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.hero-arrow.prev { left: 10px; }
.hero-arrow.next { right: 10px; }
.hero-dots { position: absolute; z-index: 4; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; }
.hero-dots button { width: 9px; height: 9px; border-radius: 999px; border: 0; background: rgba(255,255,255,.58); cursor: pointer; }
.hero-dots button.active { width: 24px; background: #fff; }
.product-tools { margin-top: 18px; align-items: center; }
.product-tools select { max-width: 180px; }
.site-footer {
  width: 100%;
  margin: 38px 0 0;
  color: #e5eefc;
  background:
    radial-gradient(circle at 12% 8%, rgba(59,130,246,.34), transparent 28%),
    linear-gradient(135deg, #07152f 0%, #0b1f49 48%, #091225 100%);
  border-top: 4px solid #2563eb;
  box-shadow: 0 -18px 45px rgba(15, 23, 42, .08);
}
.footer-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 34px 16px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.footer-brand-block { display: grid; gap: 14px; }
.footer-brand { display: flex; align-items: center; gap: 12px; width: fit-content; }
.footer-brand img, .footer-brand-mark { width: 50px; height: 50px; border-radius: 16px; object-fit: cover; background: linear-gradient(135deg, #2563eb, #7dd3fc); color: #fff; display: grid; place-items: center; font-weight: 950; box-shadow: 0 14px 30px rgba(37,99,235,.28); }
.footer-brand strong { display: block; color: #fff; font-size: 20px; letter-spacing: -.03em; }
.footer-brand small { display: block; color: #b9d5ff; margin-top: 2px; line-height: 1.45; }
.site-footer p { margin: 0; color: #cbdaf3; line-height: 1.65; max-width: 420px; }
.footer-contact-list { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; color: #dbeafe; font-size: 14px; }
.footer-contact-list li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; }
.footer-contact-list span { width: 22px; height: 22px; border-radius: 999px; background: rgba(96,165,250,.16); color: #bfdbfe; display: inline-grid; place-items: center; flex: 0 0 22px; font-size: 12px; }
.footer-contact-list a { color: #eff6ff; font-weight: 800; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-socials a { border: 1px solid rgba(191,219,254,.22); background: rgba(255,255,255,.08); color: #eff6ff; border-radius: 999px; padding: 8px 11px; font-size: 12px; font-weight: 900; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.footer-socials a:hover { transform: translateY(-1px); background: rgba(37,99,235,.35); border-color: rgba(191,219,254,.52); }
.footer-column { display: grid; gap: 10px; align-content: start; }
.footer-column h3 { margin: 0 0 4px; color: #fff; font-size: 15px; letter-spacing: -.02em; position: relative; padding-bottom: 10px; }
.footer-column h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 999px; background: #60a5fa; }
.footer-column a { color: #cbdaf3; font-size: 14px; line-height: 1.35; width: fit-content; transition: color .18s ease, transform .18s ease; }
.footer-column a:hover { color: #fff; transform: translateX(2px); }
.footer-mini-note { color: #a8c7f7; font-size: 13px; line-height: 1.55; margin-top: 4px; }
.footer-bottom {
  border-top: 1px solid rgba(191,219,254,.16);
  background: rgba(3, 7, 18, .24);
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  color: #a8c7f7;
  font-size: 12px;
  text-align: center;
}
.banner-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.banner-preview-grid .preview-banner { height: 96px; }
.social-admin-list { display: grid; gap: 9px; }
.social-admin-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.category-editor { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.inline-edit-form { display: grid; grid-template-columns: 1fr; gap: 8px; }
.inline-edit-form label { display: grid; gap: 5px; font-weight: 800; }
.inline-edit-form small { align-self: center; }
@media (max-width: 520px) {
  .product-tools { grid-template-columns: 1fr; }
  .product-tools select, .product-tools button { max-width: none; width: 100%; }
  .hero-arrow { width: 30px; height: 30px; font-size: 22px; }
  .hero-overlay { margin: -8px; }
}
@media (min-width: 640px) {
  .inline-edit-form { grid-template-columns: 1.2fr 1.2fr 90px auto auto; align-items: end; }
  .social-admin-row { grid-template-columns: 160px 1fr; }
}
@media (min-width: 900px) {
  .footer-inner { grid-template-columns: minmax(280px, 1.35fr) repeat(3, minmax(150px, .75fr)); padding: 42px 24px 34px; align-items: start; }
  .footer-bottom { flex-direction: row; text-align: left; padding: 15px 24px; }
  .hero-arrow { width: 40px; height: 40px; }
}
.product-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }

/* v7 polish: clean centered footer, pre-orders, professional motion */
body {
  background: linear-gradient(120deg, #f4f7ff 0%, #eef6ff 35%, #f8fbff 70%, #f4f7ff 100%);
  background-size: 240% 240%;
  animation: ambientShift 28s ease-in-out infinite;
}
body::before {
  content: '';
  position: fixed;
  inset: -22% -12% auto auto;
  width: 46vw;
  height: 46vw;
  min-width: 260px;
  min-height: 260px;
  background: radial-gradient(circle, rgba(37,99,235,.10), transparent 66%);
  pointer-events: none;
  z-index: -1;
  animation: orbFloat 22s ease-in-out infinite alternate;
}
@keyframes ambientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes orbFloat {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(-7vw,12vh,0) scale(1.16); }
}
.hero-card, .item-card, .preorder-card, .card-form, .auth-card, .metric, .detail-card, .summary-card, .review-card {
  animation: surfaceIn .46s ease both;
}
@keyframes surfaceIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.item-card, .preorder-card, .btn, .chip, .cart-pill, .footer-main-links a, .footer-category-links a { transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.item-card:hover, .preorder-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(15, 23, 42, .14); }
.btn:hover, .chip:hover, .cart-pill:hover { transform: translateY(-1px); }
.auth-shell.centered-auth { min-height: calc(100vh - 170px); display: grid; place-items: center; padding: 18px 0; }
.auth-card-polished { width: min(520px, 100%); margin: 0 auto; border-radius: 30px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.text-center { text-align: center; }
.register-prompt { display: grid; gap: 8px; justify-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-weight: 800; }
.register-prompt a { color: var(--brand); font-weight: 950; text-decoration: underline; text-underline-offset: 4px; padding: 8px 18px; border-radius: 999px; background: var(--brand-soft); }
.register-prompt a:hover { background: var(--brand); color: #fff; text-decoration: none; }
.site-footer { margin-top: 42px; border-top: 1px solid rgba(37,99,235,.18); background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%); color: var(--ink); box-shadow: none; }
.footer-inner.footer-centered { width: min(1120px, 100%); padding: 30px 16px 22px; display: block; text-align: center; }
.footer-contact-panel { display: grid; gap: 16px; justify-items: center; }
.footer-contact-panel h2 { color: var(--brand-dark); font-size: clamp(22px, 5vw, 34px); margin: 0; }
.footer-contact-pills, .footer-main-links, .footer-category-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.footer-pill, .footer-main-links a, .footer-category-links a { border: 1px solid #dbeafe; background: #fff; color: #1e3a8a; border-radius: 999px; padding: 10px 13px; font-size: 13px; font-weight: 900; box-shadow: 0 10px 24px rgba(37, 99, 235, .07); }
.footer-pill.whatsapp { background: #e7fff0; border-color: rgba(37,211,102,.35); color: #087536; }
.footer-main-links a { background: var(--brand); color: #fff; border-color: var(--brand); }
.footer-main-links a:hover, .footer-category-links a:hover, .footer-pill:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37, 99, 235, .12); }
.footer-socials.centered { justify-content: center; }
.footer-socials.centered a { background: #fff; color: var(--brand-dark); border: 1px solid #dbeafe; box-shadow: 0 10px 24px rgba(37, 99, 235, .07); }
.footer-bottom.centered { display: flex; justify-content: center; align-items: center; text-align: center; padding: 14px 16px calc(92px + env(safe-area-inset-bottom)); color: var(--muted); background: #fff; border-top: 1px solid var(--line); }
.preorder-strip { margin: 20px 0; }
.compact-head { margin: 0 0 12px; }
.preorder-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.preorder-card { background: #fff; border: 1px solid #dbeafe; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.preorder-media { height: 160px; background: linear-gradient(135deg, #dbeafe, #bfdbfe); display: grid; place-items: center; color: var(--brand-dark); font-size: 42px; font-weight: 950; }
.preorder-media img { width: 100%; height: 100%; object-fit: cover; }
.preorder-body { padding: 14px; display: grid; gap: 8px; }
.preorder-body h3 { font-size: 18px; }
.preorder-body p, .preorder-body small { margin: 0; color: var(--muted); line-height: 1.45; }
.preorder-detail-photo span { font-size: 64px; font-weight: 950; }
.preorder-info-box p { margin: 6px 0 0; }
.preorder-form { margin-top: 16px; box-shadow: none; border-radius: 22px; background: #f8fafc; }
.preorder-admin-layout .order-card { grid-template-columns: 1fr auto auto; align-items: center; }
.preorder-order-card .status-button-row { grid-column: 1 / -1; }
.preorder-admin-row { grid-template-columns: 56px 1fr; }
@media (min-width: 640px) {
  .preorder-grid { grid-template-columns: repeat(2, 1fr); }
  .preorder-admin-row { grid-template-columns: 56px 1fr auto; }
}
@media (min-width: 900px) {
  .footer-bottom.centered { padding: 14px 24px; }
  .preorder-grid { grid-template-columns: repeat(4, 1fr); }
  .preorder-admin-layout .order-card { grid-template-columns: 1fr auto auto auto; }
  .preorder-order-card .status-button-row { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* v8: professional desktop-first administration panel */
.staff-area {
  --admin-sidebar: 278px;
  background: #f3f6fb;
  animation: none;
}
.staff-area::before { display: none; }
.staff-area .topbar {
  z-index: 40;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #e4eaf4;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
}
.staff-area .page {
  width: 100%;
  max-width: none;
  padding: 14px;
}
.admin-sidebar {
  margin: 0 0 16px;
  background: #0f1d3a;
  color: #dbeafe;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
}
.admin-sidebar-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px 14px;
  border-bottom: 1px solid rgba(219,234,254,.14);
  margin-bottom: 10px;
}
.admin-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(37,99,235,.28);
}
.admin-sidebar-head strong { display: block; color: #fff; letter-spacing: -.02em; }
.admin-sidebar-head small { display: block; color: #93b5e8; margin-top: 2px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 8px;
}
.admin-menu p {
  grid-column: 1 / -1;
  margin: 12px 6px 2px;
  color: #7da3db;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.admin-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #cbdaf3;
  font-size: 14px;
  font-weight: 850;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.admin-menu a span {
  width: 25px;
  height: 25px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: rgba(148,163,184,.14);
  color: #bfdbfe;
  flex: 0 0 25px;
  font-size: 12px;
}
.admin-menu a:hover { background: rgba(96,165,250,.15); color: #fff; transform: translateX(2px); }
.admin-menu a.active { background: #fff; color: #0f1d3a; box-shadow: 0 14px 28px rgba(2,6,23,.18); }
.admin-menu a.active span { background: #dbeafe; color: #1d4ed8; }
.admin-page-head,
.admin-card,
.staff-area .card-form,
.staff-area .summary-card,
.staff-area .metric,
.staff-area .order-card,
.staff-area .admin-row {
  border: 1px solid #e2e8f0;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}
.admin-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-radius: 24px;
  padding: 20px;
  margin: 0 0 16px;
}
.admin-page-head h1 { font-size: clamp(28px, 4vw, 42px); }
.admin-page-head .muted { margin: 7px 0 0; max-width: 780px; line-height: 1.55; }
.admin-card {
  border-radius: 22px;
  padding: 18px;
}
.admin-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.admin-section-title.compact { margin: 4px 0 8px; }
.admin-section-title h2, .admin-section-title h3 { margin: 0 0 5px; }
.admin-section-title p { margin: 0; color: var(--muted); line-height: 1.48; }
.subtab-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.subtab-nav a {
  border: 1px solid #dbe4f0;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}
.subtab-nav a strong { display: block; color: #0f172a; }
.subtab-nav a small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.35; }
.subtab-nav a.active {
  border-color: rgba(37,99,235,.42);
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff;
  box-shadow: 0 16px 34px rgba(37,99,235,.20);
}
.subtab-nav a.active strong, .subtab-nav a.active small { color: #fff; }
.admin-panel-form { display: grid; gap: 16px; }
.settings-panel { margin-bottom: 16px; }
.settings-section-clean { padding: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.form-grid.two { grid-template-columns: 1fr; }
.form-grid label { margin: 0; }
.span-two { grid-column: 1 / -1; }
.field-note { margin: 0 0 7px; color: var(--muted); font-weight: 850; font-size: 13px; }
.settings-savebar {
  position: sticky;
  bottom: 12px;
  z-index: 8;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 38px rgba(15,23,42,.10);
  backdrop-filter: blur(12px);
}
.admin-split-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.form-actions { margin-top: 6px; }
.staff-area .section-head {
  border-radius: 20px;
  padding: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 28px rgba(15,23,42,.05);
}
.staff-area .panel-tabs {
  background: rgba(255,255,255,.9);
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 10px;
  margin-bottom: 14px;
}

@media (min-width: 720px) {
  .subtab-nav.settings-subtabs { grid-template-columns: repeat(2, 1fr); }
  .subtab-nav:not(.settings-subtabs) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .staff-area { padding-bottom: 0; }
  .staff-area .topbar { position: sticky; }
  .staff-area .page {
    padding: 24px 26px 34px calc(var(--admin-sidebar) + 26px);
    min-height: calc(100vh - 68px);
  }
  .admin-sidebar {
    position: fixed;
    left: 18px;
    top: 82px;
    bottom: 22px;
    width: calc(var(--admin-sidebar) - 18px);
    margin: 0;
    overflow: auto;
    border-radius: 26px;
    z-index: 18;
  }
  .admin-menu { grid-template-columns: 1fr; gap: 4px; }
  .admin-menu a { padding: 11px 12px; }
  .subtab-nav.settings-subtabs { grid-template-columns: repeat(4, 1fr); }
  .admin-split-layout { grid-template-columns: minmax(420px, .92fr) minmax(460px, 1.08fr); }
  .staff-area .two-col.wide-left { grid-template-columns: minmax(340px, 420px) 1fr; }
  .staff-area .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v9: dark professional e-commerce administration console */
.staff-area {
  --bg: #0b0f14;
  --card: #151a21;
  --ink: #f8fafc;
  --muted: #8d9aac;
  --line: #29313b;
  --brand: #ff7e67;
  --brand-dark: #f15f4b;
  --brand-soft: rgba(255, 126, 103, .14);
  --good: #36d36b;
  --bad: #ef5350;
  --warn: #facc15;
  --shadow: 0 20px 48px rgba(0, 0, 0, .26);
  min-height: 100vh;
  background: radial-gradient(circle at 82% 6%, rgba(37, 99, 235, .08), transparent 28%), #0b0f14;
  color: var(--ink);
  padding-bottom: 0;
}
.staff-area .bottom-nav { display: none !important; }
.staff-area .flash { margin-left: 0; background: #151a21; border-color: #2e3946; color: #e5e7eb; }
.admin-console-topbar {
  position: sticky;
  top: 0;
  z-index: 44;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px 12px 18px;
  background: rgba(19, 24, 31, .94);
  border-bottom: 1px solid #29313b;
  backdrop-filter: blur(16px);
}
.admin-console-topbar h1 { margin: 0; font-size: 18px; color: #f8fafc; letter-spacing: -.02em; }
.admin-console-topbar small { display: inline-flex; align-items: center; gap: 6px; color: #9aa7b8; font-weight: 700; }
.live-dot { width: 9px; height: 9px; border-radius: 999px; background: #31c45d; box-shadow: 0 0 0 4px rgba(49,196,93,.10); }
.admin-view-store { border: 1px solid #303b48; color: #b9c4d4; border-radius: 12px; padding: 8px 12px; font-weight: 900; background: #1a2028; }
.admin-mobile-menu { border: 1px solid #303b48; color: #f8fafc; background: #1a2028; border-radius: 12px; padding: 8px 10px; font-weight: 900; }
.staff-area .page { width: 100%; max-width: none; min-height: calc(100vh - 58px); padding: 16px; }
.admin-sidebar {
  position: fixed;
  inset: 58px auto 0 0;
  width: 282px;
  z-index: 43;
  margin: 0;
  padding: 16px 0 18px;
  border-radius: 0;
  border: 0;
  border-right: 1px solid #29313b;
  background: #151a21;
  color: #b9c4d4;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .22s ease;
}
.staff-area.admin-menu-open .admin-sidebar { transform: translateX(0); }
.admin-sidebar-scrim { display: none; position: fixed; inset: 58px 0 0; z-index: 42; background: rgba(0,0,0,.52); }
.staff-area.admin-menu-open .admin-sidebar-scrim { display: block; }
.admin-sidebar-head { display: block; padding: 0 18px 18px; margin: 0; border-bottom: 1px solid #29313b; }
.admin-role-badge { display: inline-flex; color: #ff8b73; border: 1px solid rgba(255, 126, 103, .48); background: rgba(255,126,103,.10); padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 950; margin-bottom: 14px; }
.admin-sidebar-head strong { display: block; font-size: 20px; color: #fff; letter-spacing: -.03em; }
.admin-sidebar-head small { display: block; color: #7f8b9c; margin-top: 2px; max-width: 220px; }
.admin-menu { grid-template-columns: 1fr; gap: 0; display: block; overflow: auto; padding: 14px 0 10px; }
.admin-menu p { margin: 18px 18px 9px; color: #7d8a9e; font-size: 11px; font-weight: 950; letter-spacing: .17em; text-transform: uppercase; }
.admin-menu a { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-left: 4px solid transparent; border-radius: 0; color: #a9b5c5; font-size: 16px; font-weight: 750; }
.admin-menu a span { width: 26px; height: 26px; border-radius: 8px; background: transparent; color: inherit; font-size: 17px; }
.admin-menu a:hover { transform: none; background: rgba(255,255,255,.035); color: #fff; }
.admin-menu a.active { background: rgba(255, 126, 103, .09); color: #fff; border-left-color: #ff7e67; box-shadow: none; }
.admin-menu a.active span { background: transparent; color: inherit; }
.admin-sidebar-foot { margin-top: auto; padding: 14px 16px 0; border-top: 1px solid #29313b; }
.admin-sidebar-foot button { width: 100%; border: 1px solid rgba(239,83,80,.45); background: rgba(239,83,80,.10); color: #ff6b68; border-radius: 12px; padding: 13px 14px; font-weight: 950; cursor: pointer; }
.admin-screen { display: grid; gap: 16px; }
.admin-content-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 0 8px; }
.admin-content-head h2 { font-size: 22px; color: #f8fafc; margin: 0 0 6px; }
.admin-content-head p { color: #8d9aac; margin: 0; max-width: 760px; }
.bulk-save-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; border: 1px solid #2a333e; background: #151a21; transition: border-color .18s ease, background .18s ease; }
.bulk-save-bar.has-changes { border-color: #ff7e67; background: rgba(255, 126, 103, .10); }
.bulk-save-status { display: grid; gap: 2px; }
.bulk-save-status strong { font-size: 14px; color: #f8fafc; }
.bulk-save-status span { font-size: 12px; color: #8d9aac; }
.bulk-save-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bulk-save-actions [data-bulk-submit] { min-width: 150px; }
.bulk-save-actions [data-bulk-submit]:disabled { opacity: .55; cursor: default; }
.bulk-save-bar-bottom { margin: 14px 0 0; }
tr[data-bulk-row].is-dirty { box-shadow: inset 3px 0 0 #ff7e67; background: rgba(255, 126, 103, .06); }
.admin-panel, .staff-area .card-form, .staff-area .admin-card, .staff-area .summary-card, .staff-area .order-card, .staff-area .settings-section, .staff-area .section-head, .admin-page-head {
  background: #151a21;
  border: 1px solid #2a333e;
  border-radius: 12px;
  box-shadow: none;
  color: #e6edf7;
}
.staff-area .card-form, .staff-area .admin-card, .staff-area .settings-section { padding: 18px; }
.admin-panel { overflow: hidden; }
.admin-section-title { padding: 18px 18px 0; }
.admin-section-title.compact { margin: 0; padding: 18px; }
.admin-section-title h2, .admin-section-title h3 { color: #f8fafc; }
.admin-section-title p { color: #8d9aac; }
.admin-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 0 18px 18px; }
.admin-toolbar input, .admin-toolbar select { width: auto; min-width: min(270px, 100%); }
.staff-area input, .staff-area textarea, .staff-area select {
  background: #20262e;
  border-color: #343e4a;
  color: #eef4ff;
  border-radius: 10px;
  outline-color: #ff7e67;
}
.staff-area input::placeholder, .staff-area textarea::placeholder { color: #8d9aac; }
.admin-table-wrap { overflow-x: auto; border-top: 1px solid #2a333e; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.admin-table th { background: #222830; color: #8996a9; text-align: left; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 14px 18px; border-bottom: 1px solid #303945; white-space: nowrap; }
.admin-table td { padding: 14px 18px; border-bottom: 1px solid #29313b; vertical-align: middle; color: #b8c3d1; }
.admin-table tr:hover td { background: rgba(255,255,255,.018); }
.admin-table strong { color: #f8fafc; }
.admin-table small { display: block; color: #7f8b9c; margin-top: 4px; line-height: 1.35; }
.admin-empty-row { text-align: center; color: #8d9aac !important; padding: 34px !important; }
.admin-thumb { width: 48px; height: 48px; border-radius: 9px; overflow: hidden; background: #20262e; display: grid; place-items: center; color: #ffd166; font-weight: 950; }
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.category-thumb { border-radius: 999px; }
.code-pill { color: #facc15; font-weight: 900; letter-spacing: .03em; }
.price-green { color: #36d36b !important; }
.status-switch.on { color: #36d36b; font-weight: 900; }
.status-switch.off { color: #ffb86b; font-weight: 900; }
.role-pill { display: inline-flex; border: 1px solid #344052; background: #20262e; color: #d6e2f1; padding: 6px 9px; border-radius: 999px; text-transform: capitalize; font-size: 12px; font-weight: 900; }
.table-actions { display: inline-flex; gap: 8px; align-items: center; }
.table-actions form { margin: 0; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center; border: 1px solid #38516f; background: rgba(37,99,235,.18); color: #bfdbfe; cursor: pointer; font-weight: 950; text-align: center; }
.icon-btn.edit:hover { background: rgba(37,99,235,.30); }
.icon-btn.delete { border-color: rgba(239,83,80,.42); background: rgba(239,83,80,.16); color: #ff7774; }
.row-action-form { display: inline-flex; gap: 8px; align-items: center; }
.row-action-form select { min-width: 120px; padding: 9px 10px; }
.admin-chip { border: 1px solid #343e4a; background: #20262e; color: #9aa7b8; border-radius: 999px; padding: 10px 14px; cursor: pointer; font-weight: 900; }
.admin-chip.active { background: #ff7e67; color: #fff; border-color: #ff7e67; }
.badge { display: inline-flex; padding: 7px 10px; border-radius: 999px; text-transform: capitalize; font-weight: 950; font-size: 12px; }
.badge.pending { background: rgba(250,204,21,.14); color: #facc15; }
.badge.approved, .badge.published, .badge.read { background: rgba(59,130,246,.14); color: #93c5fd; }
.badge.delivered, .badge.approved { background: rgba(54,211,107,.12); color: #36d36b; }
.badge.cancelled, .badge.blocked, .badge.hidden { background: rgba(239,83,80,.14); color: #ff7774; }
.status-tabs { padding: 0 0 12px; }
.staff-area .status-tabs a, .staff-area .panel-tabs a, .staff-area .subtab-nav a { background: #20262e; border-color: #343e4a; color: #9aa7b8; box-shadow: none; }
.staff-area .status-tabs a.active, .staff-area .panel-tabs .active, .staff-area .subtab-nav a.active { background: #ff7e67; color: #fff; border-color: #ff7e67; }
.status-button-row { display: flex; flex-wrap: wrap; gap: 7px; }
.status-button-row form { margin: 0; }
.status-btn { border: 1px solid #343e4a; background: #20262e; color: #aeb9c8; border-radius: 9px; padding: 8px 10px; font-size: 12px; font-weight: 950; cursor: pointer; text-transform: capitalize; }
.status-btn.active, .status-btn:disabled { opacity: .75; cursor: default; background: #29313b; }
.status-btn.approved { color: #93c5fd; }
.status-btn.delivered { color: #36d36b; }
.status-btn.cancelled { color: #ff7774; }
.admin-primary, .staff-area .btn:not(.btn-muted) { background: #ff7e67; color: #fff; box-shadow: none; }
.admin-primary:hover, .staff-area .btn:not(.btn-muted):hover { background: #f15f4b; }
.staff-area .btn-muted { background: #eef2f7; color: #667085; border-color: #e2e8f0; box-shadow: none; }
.staff-area .danger { border: 1px solid rgba(239,83,80,.42); background: rgba(239,83,80,.16); color: #ff7774; box-shadow: none; }
.admin-modal { position: fixed; inset: 0; z-index: 80; display: none; background: rgba(0,0,0,.56); }
.admin-modal.is-open { display: flex; justify-content: flex-end; }
.admin-modal-dialog { width: min(680px, 100%); max-height: 100vh; overflow: auto; background: #151a21; border-left: 1px solid #303945; box-shadow: -30px 0 90px rgba(0,0,0,.45); animation: slidePanel .18s ease-out; }
.admin-modal-wide { width: min(760px, 100%); }
.admin-modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: #151a21; border-bottom: 1px solid #303945; }
.admin-modal-head h2 { color: #f8fafc; font-size: 20px; }
.modal-close { border: 0; background: transparent; color: #8d9aac; font-size: 28px; line-height: 1; cursor: pointer; }
.admin-modal-body { display: grid; gap: 14px; padding: 22px; }
.admin-modal-body label, .staff-area .card-form label { color: #aab6c7; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 950; }
.admin-modal-body label input, .admin-modal-body label textarea, .admin-modal-body label select, .staff-area .card-form label input, .staff-area .card-form label textarea, .staff-area .card-form label select { margin-top: 7px; text-transform: none; letter-spacing: normal; font-size: 15px; font-weight: 500; }
.admin-modal-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; margin: 8px -22px -22px; background: #151a21; border-top: 1px solid #303945; }
.admin-modal-media { padding: 0 22px 22px; }
.admin-modal-media h3 { color: #f8fafc; margin-bottom: 12px; }
.modal-checks label { text-transform: none; letter-spacing: normal; color: #cbd5e1; }
.media-admin-row { border: 1px solid #303945; border-radius: 12px; padding: 10px; background: #10151c; }
.media-admin-row img, .media-admin-row video { background: #0b0f14; }
body.modal-open { overflow: hidden; }
@keyframes slidePanel { from { transform: translateX(24px); opacity: .55; } to { transform: translateX(0); opacity: 1; } }
.staff-area .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.staff-area .metric { background: #151a21; border-color: #2a333e; box-shadow: none; border-radius: 12px; }
.staff-area .metric span { color: #8d9aac; }
.staff-area .metric strong { color: #f8fafc; }
.staff-area .two-col, .staff-area .admin-split-layout { gap: 16px; }
.staff-area .empty { background: #151a21; border-color: #2a333e; color: #8d9aac; }
@media (min-width: 980px) {
  .admin-console-topbar { padding-left: 310px; }
  .admin-mobile-menu { display: none; }
  .admin-sidebar { transform: none; top: 0; bottom: 0; width: 290px; }
  .admin-sidebar-scrim { display: none !important; }
  .staff-area .page { padding: 22px 24px 34px 314px; min-height: calc(100vh - 58px); }
}
@media (max-width: 720px) {
  .admin-content-head { align-items: stretch; flex-direction: column; }
  .admin-toolbar { display: grid; grid-template-columns: 1fr; }
  .admin-toolbar input, .admin-toolbar select { width: 100%; }
  .admin-table { min-width: 760px; }
  .admin-modal-dialog { width: 100%; }
}
@media (min-width: 980px) {
  .manager-area .admin-console-topbar { padding-left: 18px; }
  .manager-area .page { padding-left: 24px; }
}

/* v10: unified premium dark UI across customer, manager, and admin */
:root {
  --bg: #090d12;
  --card: #141a22;
  --card-2: #1a222c;
  --ink: #f6f8fb;
  --muted: #98a4b4;
  --line: #2a333f;
  --brand: #ff7e67;
  --brand-dark: #f15f4b;
  --brand-soft: rgba(255, 126, 103, .14);
  --accent: #ffd166;
  --good: #35d36c;
  --bad: #ef5350;
  --warn: #ffd166;
  --whatsapp: #25d366;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
}

html { background: #090d12; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 0%, rgba(255,126,103,.12), transparent 28%),
    radial-gradient(circle at 8% 16%, rgba(255,209,102,.08), transparent 28%),
    linear-gradient(135deg, #090d12 0%, #0d1218 48%, #090d12 100%);
  background-size: 220% 220%;
  animation: darkAmbientShift 34s ease-in-out infinite;
}
body::before {
  background: radial-gradient(circle, rgba(255,126,103,.10), transparent 68%);
  opacity: .8;
}
@keyframes darkAmbientShift {
  0%, 100% { background-position: 0% 48%; }
  50% { background-position: 100% 52%; }
}

a { color: inherit; }
.topbar {
  background: rgba(13, 18, 24, .88);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
}
.brand img, .brand-mark {
  background: linear-gradient(135deg, #ff7e67, #ffd166);
  color: #14120d;
  box-shadow: 0 12px 26px rgba(255,126,103,.22);
}
.brand strong { color: #fff; }
.brand small, .top-actions a { color: #aeb9c8; }
.top-actions a:hover { color: #fff; }
.lang-form select {
  background: #1a222c;
  color: #f6f8fb;
  border-color: #303b49;
}
.cart-pill {
  background: rgba(255,126,103,.12);
  color: #ffd7cf;
  border-color: rgba(255,126,103,.28);
}
.cart-pill span { background: #ff7e67; color: #fff; }

.page { color: var(--ink); }
.hero-card, .detail-card, .auth-card, .success-card, .card-form, .summary-card, .cart-footer-card, .review-card, .settings-section, .item-card, .preorder-card, .cart-row, .order-card, .admin-row, .metric, .admin-card {
  background: rgba(20, 26, 34, .94);
  border-color: rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.hero-card {
  background:
    radial-gradient(circle at 82% 10%, rgba(255,209,102,.26), transparent 28%),
    linear-gradient(135deg, rgba(22,27,35,.96), rgba(28,35,45,.82) 48%, rgba(255,126,103,.52));
  border: 1px solid rgba(255,255,255,.12);
}
.hero-overlay { background: linear-gradient(90deg, rgba(9,13,18,.78), rgba(9,13,18,.34)); }
.eyebrow, .item-category { color: var(--accent); }
.hero-card .eyebrow { color: #ffd166; }
.lead, .muted, .item-body p, .cart-row small, .order-card small, .admin-row small, .preorder-body p, .preorder-body small, .register-prompt { color: var(--muted); }

.btn { background: #ff7e67; box-shadow: 0 14px 30px rgba(255,126,103,.23); color: #fff; }
.btn:hover { background: #f15f4b; }
.btn-muted {
  background: #202833;
  color: #f2f6fc;
  border-color: #344052;
}
.btn-whatsapp { background: var(--whatsapp); color: #052f17; }
.chip, .panel-tabs a, .status-tabs a {
  background: #161d26;
  border-color: #2b3542;
  color: #aeb9c8;
}
.chip.active, .panel-tabs .active, .status-tabs .active {
  background: #ff7e67;
  color: #fff;
  border-color: #ff7e67;
}
.searchbar, .qty-control {
  background: #141a22;
  border-color: #2a333f;
}
input, textarea, select {
  background: #1a222c;
  color: #f6f8fb;
  border-color: #303b49;
  outline-color: #ff7e67;
}
input::placeholder, textarea::placeholder { color: #7f8b9c; }
input[type="file"] { background: #1a222c; color: #d6e2f1; }
input[type="number"] { color-scheme: dark; }
.item-photo, .detail-photo, .cart-thumb, .mini-thumb, .preorder-media {
  background: linear-gradient(135deg, #1e2834, #121820);
  color: var(--accent);
}
.detail-price { color: var(--accent); }
.remove-btn, .danger { background: rgba(239,83,80,.15); color: #ff7774; border: 1px solid rgba(239,83,80,.32); }
.empty { background: #141a22; border-color: #2a333f; color: var(--muted); }
.flash { background: #141a22; color: #f6f8fb; border-color: #2a333f; }

.auth-card-polished {
  background: rgba(20, 26, 34, .94);
  border: 1px solid rgba(255,255,255,.08);
}
.register-prompt { border-top-color: #2a333f; }
.register-prompt a {
  color: #fff;
  background: rgba(255,126,103,.14);
  border: 1px solid rgba(255,126,103,.30);
}
.register-prompt a:hover { background: #ff7e67; color: #fff; }

.site-footer {
  background: linear-gradient(180deg, rgba(17,23,31,.98), rgba(9,13,18,1));
  border-top: 1px solid rgba(255,255,255,.08);
  color: #f6f8fb;
}
.footer-contact-panel h2 { color: #fff; }
.footer-pill, .footer-main-links a, .footer-category-links a, .footer-socials.centered a {
  background: #161d26;
  color: #d6e2f1;
  border-color: #2a333f;
  box-shadow: none;
}
.footer-main-links a { background: rgba(255,126,103,.14); color: #ffd7cf; border-color: rgba(255,126,103,.28); }
.footer-main-links a:hover, .footer-category-links a:hover, .footer-pill:hover, .footer-socials.centered a:hover {
  background: #202833;
  color: #fff;
  box-shadow: none;
}
.footer-pill.whatsapp { background: rgba(37,211,102,.14); border-color: rgba(37,211,102,.35); color: #77f5a7; }
.footer-bottom.centered { background: #090d12; border-top-color: #1d2530; color: #8d9aac; }
.bottom-nav {
  background: rgba(13, 18, 24, .94);
  border-top-color: rgba(255,255,255,.08);
  box-shadow: 0 -12px 32px rgba(0,0,0,.28);
}
.bottom-nav a, .bottom-nav button { color: #9aa7b8; }
.bottom-nav .active { background: rgba(255,126,103,.14); color: #ffd7cf; }

.whatsapp-float {
  width: 52px;
  height: 52px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  right: 16px;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 38px rgba(0,0,0,.36);
}

/* v10 admin/manager: compact utility topbar, visible shop name, and dark workspace */
.staff-area {
  --bg: #090d12;
  --card: #141a22;
  --ink: #f6f8fb;
  --muted: #98a4b4;
  --line: #2a333f;
  --brand: #ff7e67;
  --brand-dark: #f15f4b;
  --brand-soft: rgba(255,126,103,.14);
  background:
    radial-gradient(circle at 86% 0%, rgba(255,126,103,.09), transparent 25%),
    #090d12;
  color: var(--ink);
  padding-bottom: 0;
}
.admin-console-topbar {
  min-height: 54px;
  background: rgba(13, 18, 24, .92);
  border-bottom: 1px solid #242d38;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.admin-topbar-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-topbar-title strong { color: #fff; font-size: 15px; letter-spacing: -.01em; }
.admin-topbar-title small { color: #9aa7b8; display: inline-flex; align-items: center; gap: 6px; }
.admin-view-store {
  white-space: nowrap;
  border: 1px solid rgba(255,126,103,.36);
  background: rgba(255,126,103,.12);
  color: #ffd7cf;
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 950;
  font-size: 13px;
}
.admin-view-store:hover { background: #ff7e67; color: #fff; }
.live-dot { background: #35d36c; }
.admin-sidebar {
  background: #111720;
  border-right-color: #252f3b;
  box-shadow: 14px 0 40px rgba(0,0,0,.22);
}
.admin-sidebar-head { min-height: 96px; }
.admin-role-badge {
  color: #ffb8aa;
  border-color: rgba(255,126,103,.45);
  background: rgba(255,126,103,.13);
}
.admin-sidebar-head strong { color: #fff; }
.admin-sidebar-head small { color: #98a4b4; }
.admin-menu p { color: #7f8b9c; }
.admin-menu a { color: #aeb9c8; }
.admin-menu a:hover { background: rgba(255,255,255,.045); color: #fff; }
.admin-menu a.active { background: rgba(255,126,103,.11); border-left-color: #ff7e67; color: #fff; }
.admin-panel, .staff-area .card-form, .staff-area .admin-card, .staff-area .summary-card, .staff-area .order-card, .staff-area .settings-section, .staff-area .section-head, .admin-page-head, .staff-area .metric {
  background: #141a22;
  border-color: #2a333f;
  color: #e9eef6;
}
.admin-table th { background: #1b232d; color: #8f9bad; border-bottom-color: #303b49; }
.admin-table td { border-bottom-color: #26303b; color: #bdc7d5; }
.admin-table tr:hover td { background: rgba(255,255,255,.025); }
.admin-thumb, .role-pill, .admin-chip, .status-btn { background: #1a222c; border-color: #303b49; }
.icon-btn { border-color: rgba(255,209,102,.35); background: rgba(255,209,102,.12); color: #ffd166; }
.icon-btn.edit:hover { background: rgba(255,209,102,.20); }
.price-green, .status-switch.on { color: #35d36c !important; }
.code-pill { color: #ffd166; }
.admin-modal-dialog, .admin-modal-head, .admin-modal-actions { background: #141a22; }
.admin-modal-dialog { border-left-color: #303b49; }
.admin-modal-head, .admin-modal-actions { border-color: #303b49; }
.media-admin-row { background: #0d1218; border-color: #303b49; }
.staff-area .btn-muted { background: #202833; color: #f2f6fc; border-color: #344052; }

@media (min-width: 980px) {
  .admin-console-topbar {
    position: fixed;
    top: 12px;
    right: 18px;
    left: auto;
    width: auto;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    z-index: 60;
  }
  .admin-console-topbar .admin-topbar-title { display: none; }
  .admin-console-topbar .admin-view-store { box-shadow: 0 12px 24px rgba(0,0,0,.25); }
  .admin-sidebar {
    top: 0;
    bottom: 0;
    width: 290px;
    transform: none;
  }
  .staff-area .page {
    padding: 24px 24px 34px 314px;
    min-height: 100vh;
  }
  .manager-area .admin-console-topbar { left: auto; right: 18px; padding-left: 0; }
  .manager-area .page { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 979px) {
  .admin-console-topbar { padding: 10px 14px; }
  .admin-view-store { padding: 8px 10px; }
  .staff-area .page { padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; }
}

/* v11 customer storefront: dark catalogue tabs, centered category sections, and ordering actions */
body:not(.staff-area) {
  --bg: #080e19;
  --card: #111927;
  --ink: #f8fbff;
  --muted: #8fa2be;
  --line: rgba(126, 155, 194, .22);
  --brand: #ff6b4a;
  --brand-dark: #ef5535;
  --brand-soft: rgba(255,107,74,.14);
  --accent: #ffd166;
  background:
    radial-gradient(circle at 92% 0%, rgba(47, 119, 255, .16), transparent 28%),
    radial-gradient(circle at 12% 14%, rgba(255, 107, 74, .12), transparent 27%),
    linear-gradient(180deg, #0d1727 0%, #080e19 42%, #070b13 100%);
}
body:not(.staff-area) .page {
  width: 100%;
  max-width: 1540px;
  padding: 14px 14px 26px;
}
body:not(.staff-area) .topbar {
  background: rgba(13, 23, 39, .92);
  border-bottom: 1px solid rgba(126,155,194,.22);
  box-shadow: 0 12px 32px rgba(0,0,0,.26);
}
body:not(.staff-area) .top-actions select,
body:not(.staff-area) .top-actions a,
body:not(.staff-area) .cart-pill {
  background: rgba(29, 45, 72, .78);
  border: 1px solid rgba(89, 127, 188, .32);
  color: #d7e6ff;
  border-radius: 999px;
}
body:not(.staff-area) .cart-pill span { background: #2f80ff; }
.storefront-shell {
  position: sticky;
  top: 69px;
  z-index: 12;
  margin: -14px -14px 20px;
  padding: 12px 14px 14px;
  background: rgba(9, 16, 29, .88);
  border-bottom: 1px solid rgba(126,155,194,.18);
  backdrop-filter: blur(16px);
}
.store-search-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.store-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 14px;
  height: 48px;
  border-radius: 999px;
  background: rgba(30, 44, 72, .76);
  border: 1px solid rgba(74, 112, 175, .42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.store-search-field span { color: #6f90c9; font-size: 20px; }
.store-search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e8f1ff;
  padding: 0;
}
.store-search-panel select {
  height: 48px;
  border-radius: 999px;
  background: rgba(30, 44, 72, .76);
  border: 1px solid rgba(74, 112, 175, .42);
  color: #e8f1ff;
  padding: 0 14px;
}
.category-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 0 2px;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(29, 45, 72, .82);
  border: 1px solid rgba(89, 127, 188, .42);
  color: #b8c9e7;
  font-weight: 850;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.category-tab.active,
.category-tab:hover {
  background: linear-gradient(135deg, #ff784f, #ff5e3a);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
}
.catalogue-section { margin: 30px 0 38px; }
.catalogue-heading {
  text-align: center;
  margin: 0 auto 18px;
  max-width: 620px;
}
.catalogue-heading .eyebrow {
  color: #79a7ff;
  font-size: 13px;
  letter-spacing: .16em;
  margin-bottom: 8px;
}
.catalogue-heading h2 {
  color: #f8fbff;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.05;
}
.catalogue-heading p { color: #8fa2be; margin: 8px 0 0; }
.product-grid-v11,
.centered-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 320px));
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  width: 100%;
}
.product-card-v11 {
  width: 100%;
  background: rgba(17, 27, 44, .98) !important;
  border: 1px solid rgba(74, 112, 175, .30) !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(0,0,0,.24) !important;
  color: #f8fbff;
}
.product-card-v11:hover { transform: translateY(-3px); border-color: rgba(255,107,74,.45) !important; }
.product-card-v11.is-unavailable,
.product-detail-v11.is-unavailable {
  filter: grayscale(1);
  background: linear-gradient(145deg, #111827, #030712) !important;
  border-color: rgba(255,255,255,.22) !important;
}
.product-card-v11.is-unavailable:hover { transform: none; }
.product-card-v11.is-unavailable .product-media-v11 img,
.product-detail-v11.is-unavailable .detail-photo img,
.product-detail-v11.is-unavailable .detail-photo video {
  filter: grayscale(1) contrast(.9) brightness(.72);
}
.unavailable-badge {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 62%;
  padding: 16px 12px;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.72), rgba(255,255,255,.88));
  color: #dc2626;
  border-top: 2px solid rgba(220,38,38,.8);
  border-bottom: 2px solid rgba(220,38,38,.8);
  box-shadow: 0 18px 42px rgba(0,0,0,.34);
  font-size: clamp(34px, 8vw, 56px);
  font-style: normal;
  font-weight: 1000;
  letter-spacing: .08em;
  line-height: .86;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 10px 24px rgba(220,38,38,.22);
}
.unavailable-badge span { display: block; }
.product-card-v11 .unavailable-badge {
  font-size: clamp(30px, 8vw, 48px);
}
.detail-unavailable-badge {
  font-size: clamp(46px, 8vw, 78px);
  min-height: 58%;
  padding: 22px 16px;
}
.unavailable-note {
  min-height: 0 !important;
  margin: 8px 0 10px !important;
  color: #f8fafc !important;
  background: rgba(15,23,42,.76);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 850;
}
.detail-unavailable-note {
  font-size: 14px;
  line-height: 1.45;
}
.card-action-message,
.action-message-owner {
  background: #f8fafc !important;
  color: #111827 !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.24) !important;
}
.action-message-owner { grid-column: 1 / -1; }
.product-media-v11,
.product-card-v11 .item-photo,
.product-card-v11 .preorder-media {
  aspect-ratio: 1.55 / 1;
  min-height: 178px;
  background: linear-gradient(135deg, #203351, #17243b) !important;
  display: grid;
  place-items: center;
  position: relative;
}
.product-media-v11 img,
.product-card-v11 video { width: 100%; height: 100%; object-fit: cover; }
.product-media-v11 span { font-size: 42px; }
.product-info-v11 { padding: 14px 14px 12px; }
.product-code {
  margin: 0 0 4px;
  color: #728aad;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.product-info-v11 h3 { font-size: 18px; margin: 0 0 4px; color: #fff; }
.product-info-v11 p { color: #7890b2; margin: 0 0 12px; min-height: 20px; }
.product-info-v11 small { display: block; color: #8fa2be; margin: 3px 0; }
.product-card-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.product-card-bottom strong,
.detail-price { color: #ff744f; font-weight: 950; }
.product-actions-v11 { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.product-actions-v11 .btn-small { min-height: 34px; padding: 8px 11px; }
.qty-control.mini,
.detail-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(29,45,72,.88);
  border: 1px solid rgba(89,127,188,.42);
  border-radius: 999px;
  overflow: hidden;
  height: 35px;
}
.qty-control.mini[hidden], .detail-qty[hidden], .product-add-wrap[hidden] { display: none !important; }
.qty-control.mini button,
.detail-qty button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}
.qty-control.mini span,
.detail-qty span { min-width: 30px; text-align: center; color: #fff; font-weight: 950; }
.product-detail-v11 {
  max-width: 1180px;
  margin: 10px auto 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  align-items: start;
  gap: 24px;
  background: rgba(17, 27, 44, .98) !important;
  border-color: rgba(74,112,175,.30) !important;
}
.product-detail-v11 .detail-photo {
  min-height: 420px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #203351, #17243b) !important;
  position: relative;
}
.product-detail-info-v11 h1 { font-size: clamp(34px, 5vw, 58px); color: #fff; line-height: 1; margin-bottom: 10px; }
.product-detail-info-v11 .lead { color: #b9c8dd; font-size: 18px; }
.detail-action-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}
.detail-action-panel .detail-qty { grid-column: 1 / -1; justify-self: start; height: 42px; }
.detail-action-panel .detail-qty button { width: 44px; height: 42px; }
.detail-action-panel .detail-qty span { min-width: 42px; }
.whatsapp-order { background: #25d366 !important; color: #062a15 !important; box-shadow: 0 14px 30px rgba(37,211,102,.22) !important; }
.call-order { background: rgba(121,167,255,.16) !important; color: #d8e7ff !important; border: 1px solid rgba(121,167,255,.32) !important; box-shadow: none !important; }
.product-detail-section-v11 { max-width: 1180px; margin: 0 auto 30px; }
.detail-copy-card {
  background: rgba(17, 27, 44, .98);
  border: 1px solid rgba(74, 112, 175, .30);
  border-radius: 22px;
  padding: 20px;
  color: #b9c8dd;
  line-height: 1.75;
}
.related-items-v11 { max-width: 1320px; margin-left: auto; margin-right: auto; }
.compact-preorders { margin: 22px auto 30px; max-width: 1320px; }
.back-link { color: #b8c9e7; display: inline-flex; margin: 8px 0 14px; font-weight: 900; }
.bottom-nav a::before,
.bottom-nav button::before { display: block; font-size: 18px; line-height: 1; margin-bottom: 2px; }
.bottom-nav a[href="/"]::before { content: '🛍️'; }
.bottom-nav a[href="/cart"]::before { content: '🛒'; }
.bottom-nav a[href="/message"]::before { content: '💬'; }
.bottom-nav a[href="/customer"]::before { content: '📋'; }
.bottom-nav a[href="/login"]::before { content: '👤'; }
.bottom-nav form button::before { content: '↪'; }
@media (max-width: 760px) {
  body:not(.staff-area) .page { padding: 10px 12px 22px; }
  .storefront-shell { top: 66px; margin-left: -12px; margin-right: -12px; padding: 10px 12px 12px; }
  .store-search-panel { grid-template-columns: 1fr; }
  .store-search-panel select, .store-search-panel .btn { width: 100%; }
  .category-tab { padding: 9px 14px; min-height: 38px; }
  .product-grid-v11, .centered-products { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .product-media-v11, .product-card-v11 .item-photo { min-height: 205px; }
  .product-detail-v11 { grid-template-columns: 1fr; padding: 14px; border-radius: 20px; }
  .product-detail-v11 .detail-photo { min-height: 300px; }
  .detail-action-panel { grid-template-columns: 1fr; }
  .catalogue-heading h2 { font-size: 26px; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .product-grid-v11, .centered-products { grid-template-columns: repeat(auto-fit, minmax(245px, 300px)); }
}

/* v12 customer UX refinements: compact search, accessible dark details, SVG bottom navigation */
body:not(.staff-area) {
  padding-bottom: 92px;
}
body:not(.staff-area) .storefront-shell {
  padding-top: 10px;
}
body:not(.staff-area) .store-search-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 940px;
  margin: 0 auto 12px;
}
body:not(.staff-area) .store-search-field {
  flex: 1 1 340px;
  max-width: 560px;
  height: 42px;
  padding: 0 12px;
  border-radius: 18px;
}
body:not(.staff-area) .store-search-field span {
  font-size: 17px;
}
body:not(.staff-area) .store-search-panel select {
  flex: 0 0 184px;
  height: 42px;
  padding: 0 12px;
  border-radius: 16px;
}
body:not(.staff-area) .store-search-panel .btn {
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 16px;
}
body:not(.staff-area) .product-actions-v11 .product-add-wrap {
  min-width: 104px;
  text-align: center;
  white-space: nowrap;
}
body:not(.staff-area) .product-actions-v11 .btn-small {
  border-radius: 11px;
}
body:not(.staff-area) .detail-copy-card,
body:not(.staff-area) .product-detail-section-v11 .review-card,
body:not(.staff-area) .product-detail-section-v11 .card-form,
body:not(.staff-area) .info-box {
  background: rgba(13, 21, 35, .96) !important;
  border: 1px solid rgba(109, 143, 195, .28) !important;
  color: #dce8fb !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
}
body:not(.staff-area) .detail-copy-card p,
body:not(.staff-area) .review-card p,
body:not(.staff-area) .owner-reply p,
body:not(.staff-area) .info-box pre {
  color: #dce8fb !important;
}
body:not(.staff-area) .info-box strong,
body:not(.staff-area) .card-form h2,
body:not(.staff-area) .review-card strong {
  color: #ffffff !important;
}
body:not(.staff-area) .owner-reply {
  background: rgba(255, 209, 102, .09);
  border: 1px solid rgba(255, 209, 102, .20);
  border-radius: 16px;
  padding: 12px;
}
body:not(.staff-area) input,
body:not(.staff-area) textarea,
body:not(.staff-area) select {
  background: rgba(17, 27, 44, .94);
  color: #eff6ff;
  border-color: rgba(109, 143, 195, .32);
}
body:not(.staff-area) input::placeholder,
body:not(.staff-area) textarea::placeholder {
  color: #7185a5;
}
body:not(.staff-area) .empty {
  background: rgba(13, 21, 35, .92);
  border-color: rgba(109, 143, 195, .28);
  color: #9fb0c9;
}
.customer-bottom-nav.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  padding: 7px max(8px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
  background: rgba(9, 16, 29, .94);
  border-top: 1px solid rgba(126,155,194,.22);
  box-shadow: 0 -16px 38px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}
.customer-bottom-nav a,
.customer-bottom-nav button {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 6px 4px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #8192ae;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
  cursor: pointer;
}
.customer-bottom-nav a::before,
.customer-bottom-nav button::before {
  content: none !important;
  display: none !important;
}
.customer-bottom-nav a:hover,
.customer-bottom-nav a.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,107,74,.22), rgba(255,107,74,.09));
}
.customer-bottom-nav .nav-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: currentColor;
}
.customer-bottom-nav .nav-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.24));
}
.customer-bottom-nav a.active .nav-icon,
.customer-bottom-nav a:hover .nav-icon {
  color: #ff8a66;
}
.customer-bottom-nav em[data-cart-count] {
  position: absolute;
  top: 5px;
  right: calc(50% - 24px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ff6b4a;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(255,107,74,.38);
}
.staff-area .customer-bottom-nav { display: none !important; }
@media (min-width: 900px) {
  .customer-bottom-nav.bottom-nav {
    padding-left: max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
  }
  .customer-bottom-nav a { max-width: 240px; justify-self: center; width: min(100%, 220px); }
}
@media (max-width: 760px) {
  body:not(.staff-area) .store-search-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    max-width: 100%;
  }
  body:not(.staff-area) .store-search-field {
    flex-basis: auto;
    max-width: none;
    height: 40px;
  }
  body:not(.staff-area) .store-search-panel select {
    grid-column: 1 / -1;
    width: 100%;
    height: 40px;
  }
  body:not(.staff-area) .store-search-panel .btn {
    width: auto;
    min-height: 40px;
    padding: 9px 14px;
  }
  body:not(.staff-area) .product-card-bottom {
    align-items: stretch;
    flex-direction: column;
  }
  body:not(.staff-area) .product-actions-v11 {
    justify-content: stretch;
  }
  body:not(.staff-area) .product-actions-v11 .btn-small,
  body:not(.staff-area) .product-actions-v11 .qty-control {
    flex: 1 1 auto;
    justify-content: center;
  }
  .customer-bottom-nav a { font-size: 10px; border-radius: 14px; min-height: 54px; }
  .customer-bottom-nav .nav-icon svg { width: 21px; height: 21px; }
}

/* v13: compact customer filters + workspace-first admin layout */
body:not(.staff-area) .storefront-shell {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  margin-bottom: 18px !important;
  min-height: 58px;
}
body:not(.staff-area) .store-search-panel {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 270px) 132px 78px !important;
  align-items: center !important;
  gap: 7px !important;
  max-width: none !important;
  margin: 0 !important;
}
body:not(.staff-area) .store-search-field {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
}
body:not(.staff-area) .store-search-field span { font-size: 15px !important; }
body:not(.staff-area) .store-search-panel select {
  flex: none !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 9px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
}
body:not(.staff-area) .store-search-panel .btn {
  width: 100% !important;
  min-height: 36px !important;
  padding: 8px 10px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
}
body:not(.staff-area) .category-tabs {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 7px !important;
  padding: 1px 0 !important;
  margin: 0 !important;
}
body:not(.staff-area) .category-tab {
  min-height: 36px !important;
  padding: 7px 12px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body:not(.staff-area) .catalogue-section { margin-top: 24px !important; }
body:not(.staff-area) .catalogue-heading { margin-bottom: 14px !important; }
body:not(.staff-area) .catalogue-heading .eyebrow { margin-bottom: 5px !important; }
body:not(.staff-area) .catalogue-heading p { margin-top: 5px !important; }
body:not(.staff-area) .product-add-wrap { min-width: 118px !important; }
body:not(.staff-area) .product-add-wrap::first-letter { text-transform: uppercase; }

@media (max-width: 820px) {
  body:not(.staff-area) .storefront-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 7px 10px !important;
    min-height: 0 !important;
  }
  body:not(.staff-area) .store-search-panel {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 104px 68px !important;
    gap: 6px !important;
  }
  body:not(.staff-area) .store-search-field,
  body:not(.staff-area) .store-search-panel select,
  body:not(.staff-area) .store-search-panel .btn {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }
  body:not(.staff-area) .store-search-field { padding: 0 9px !important; }
  body:not(.staff-area) .store-search-field input { font-size: 13px !important; }
  body:not(.staff-area) .category-tabs { gap: 6px !important; }
  body:not(.staff-area) .category-tab {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}

img[data-defer-src] {
  background: #fff;
  opacity: 0;
}
img.image-loaded {
  opacity: 1;
  transition: opacity .22s ease;
}
@media (max-width: 430px) {
  body:not(.staff-area) .store-search-panel {
    grid-template-columns: minmax(0, 1fr) 92px 60px !important;
  }
  body:not(.staff-area) .store-search-panel select { font-size: 11px !important; padding: 0 6px !important; }
  body:not(.staff-area) .store-search-panel .btn { font-size: 11px !important; padding: 7px 6px !important; }
}

/* Admin v13: thinner sidebar, smaller typography, no top action overlap */
.staff-area {
  --admin-sidebar: 206px !important;
}
.admin-sidebar-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,126,103,.32);
  background: rgba(255,126,103,.10);
  color: #ffd7cf;
  font-size: 11px;
  font-weight: 950;
  width: fit-content;
}
.admin-sidebar-store:hover { background: #ff7e67; color: #fff; }
.admin-sidebar {
  font-size: 12px !important;
}
.admin-sidebar-head {
  min-height: auto !important;
  padding: 12px 12px 10px !important;
}
.admin-role-badge {
  font-size: 10px !important;
  padding: 3px 7px !important;
  border-radius: 7px !important;
}
.admin-sidebar-head strong {
  font-size: 14px !important;
  line-height: 1.15 !important;
  margin-top: 8px !important;
}
.admin-sidebar-head small {
  font-size: 11px !important;
  max-width: 160px !important;
}
.admin-menu p {
  font-size: 8.5px !important;
  letter-spacing: .16em !important;
  margin: 10px 12px 3px !important;
}
.admin-menu a {
  gap: 7px !important;
  min-height: 34px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}
.admin-menu a span {
  width: 20px !important;
  height: 20px !important;
  flex-basis: 20px !important;
  font-size: 12px !important;
}
.admin-sidebar-foot { padding: 10px 10px 0 !important; }
.admin-sidebar-foot button {
  min-height: 34px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
}
.admin-content-head {
  min-height: 0 !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  align-items: center !important;
}
.admin-content-head h2 { font-size: 17px !important; margin: 0 !important; }
.admin-content-head p { font-size: 12px !important; margin: 3px 0 0 !important; max-width: 720px; }
.admin-content-head .btn { min-height: 36px !important; padding: 8px 12px !important; border-radius: 10px !important; font-size: 12px !important; }
.admin-panel { padding: 12px !important; border-radius: 14px !important; }
.admin-section-title { margin-bottom: 10px !important; }
.admin-section-title h2,
.admin-section-title h3 { font-size: 15px !important; margin: 0 0 3px !important; }
.admin-section-title p { font-size: 12px !important; }
.admin-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  margin-bottom: 10px !important;
}
.admin-toolbar input,
.admin-toolbar select {
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  padding: 0 10px !important;
}
.admin-toolbar input { width: min(320px, 38vw) !important; }
.admin-toolbar select { width: min(230px, 24vw) !important; }
.admin-table th { padding: 10px 12px !important; font-size: 10px !important; }
.admin-table td { padding: 10px 12px !important; font-size: 12px !important; }
.admin-table small { font-size: 11px !important; }
.admin-thumb { width: 38px !important; height: 38px !important; border-radius: 10px !important; }
.table-actions { gap: 6px !important; }
.icon-btn { width: 32px !important; height: 32px !important; border-radius: 9px !important; font-size: 13px !important; }
.admin-modal-dialog { max-width: min(680px, 100vw) !important; }
.admin-modal-wide { max-width: min(760px, 100vw) !important; }
.admin-modal-head { padding: 14px 16px !important; }
.admin-modal-head h2 { font-size: 17px !important; }
.admin-modal-body { padding: 14px 16px !important; gap: 12px !important; }
.admin-modal-actions { padding: 12px 16px !important; }

@media (min-width: 980px) {
  .admin-console-topbar {
    display: none !important;
  }
  .admin-sidebar {
    width: var(--admin-sidebar) !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
  }
  .staff-area .page {
    padding: 14px 16px 26px calc(var(--admin-sidebar) + 16px) !important;
  }
  .manager-area .page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 979px) {
  .admin-console-topbar {
    min-height: 46px !important;
    padding: 7px 10px !important;
  }
  .admin-topbar-title strong,
  .admin-topbar-title small { display: none !important; }
  .admin-view-store { font-size: 11px !important; padding: 7px 9px !important; }
  .admin-sidebar-store { display: none; }
  .admin-sidebar { width: min(230px, 86vw) !important; }
  .staff-area .page { padding: 10px !important; }
  .admin-content-head { align-items: stretch !important; flex-direction: column !important; }
  .admin-toolbar { flex-wrap: wrap !important; }
  .admin-toolbar input,
  .admin-toolbar select { width: 100% !important; }
}

/* Admin v14: database backup and restore */
.database-admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.database-card { display: flex; flex-direction: column; gap: 12px; }
.database-summary-box,
.database-warning {
  border: 1px solid rgba(73, 86, 105, .75);
  background: rgba(15, 23, 42, .56);
  border-radius: 14px;
  padding: 13px;
}
.database-summary-box span,
.database-summary-box small { display: block; color: #93a4bb; font-size: 12px; }
.database-summary-box strong { display: block; margin: 5px 0; color: #f8fafc; font-size: 18px; word-break: break-word; }
.database-warning { border-color: rgba(255, 184, 107, .38); background: rgba(255, 184, 107, .08); }
.database-warning strong { display: block; color: #ffc46b; margin-bottom: 5px; }
.database-warning p { margin: 0; color: #d4dbe8; font-size: 12px; line-height: 1.55; }
.database-danger-warning { border: 1px solid rgba(248, 113, 113, .45); background: rgba(127, 29, 29, .18); border-radius: 14px; padding: 13px; }
.database-danger-warning strong { display: block; color: #fca5a5; margin-bottom: 5px; }
.database-danger-warning p { margin: 0; color: #fee2e2; font-size: 12px; line-height: 1.55; }

.database-action-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.database-import-btn { width: fit-content; }
.database-table-panel { margin-top: 14px; }
.database-count-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.database-count-card {
  border: 1px solid rgba(73, 86, 105, .72);
  background: rgba(20, 28, 38, .82);
  border-radius: 13px;
  padding: 11px 12px;
}
.database-count-card span {
  display: block;
  color: #94a3b8;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 5px;
}
.database-count-card strong { color: #f8fafc; font-size: 19px; }
.database-card code { color: #ffd37a; background: rgba(255,255,255,.06); padding: 2px 5px; border-radius: 5px; }
@media (max-width: 1120px) {
  .database-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .database-admin-grid { grid-template-columns: 1fr; }
  .database-import-btn { width: 100%; }
}

/* v16: account security and deployment-ready polish */
.top-actions .top-role-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 13px;
  border-radius: 999px;
  font-weight: 950;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.top-actions .admin-top-link {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #fff;
  border-color: rgba(248,113,113,.5);
}
.top-actions .manager-top-link {
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: #111827;
  border-color: rgba(251,191,36,.5);
}
.auth-link.subtle {
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #fbbf24;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.password-reset-card { max-width: 860px; }
.reset-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.reset-option-card {
  background: rgba(15,23,42,.78);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.26);
}
.reset-option-card h2 { margin: 0 0 8px; font-size: 18px; color: #f8fafc; }
.reset-option-card p { color: #aebace; line-height: 1.55; margin: 0 0 12px; }
.inline-reset-form { display: flex; justify-content: center; margin-top: 14px; }
.link-button {
  border: 0;
  background: transparent;
  color: #fbbf24;
  font-weight: 900;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.password-panel { margin-top: 18px; }
.admin-password-panel { margin-bottom: 16px; }
.admin-grid-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
}
.admin-grid-form label { min-width: 0; }
.reset-approval-form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 520px;
  margin-bottom: 8px;
}
.reset-approval-form input, .row-action-form input {
  min-width: 0;
  width: 100%;
}
.badge.rejected { background: rgba(239,68,68,.14); color: #fecaca; border-color: rgba(239,68,68,.4); }
@media (max-width: 860px) {
  .admin-grid-form { grid-template-columns: 1fr; }
  .reset-approval-form { grid-template-columns: 1fr; min-width: 0; }
  .top-actions .top-role-link { min-height: 34px; padding: 8px 11px; }
}

/* v17: admin-selectable global color combinations */
body.theme-obsidian-coral {
  --theme-bg-rgb: 8, 14, 25; --theme-bg2-rgb: 13, 23, 39; --theme-card-rgb: 17, 25, 39; --theme-card2-rgb: 26, 34, 44;
  --theme-line-rgb: 126, 155, 194; --theme-brand-rgb: 255, 107, 74; --theme-brand-dark-rgb: 239, 85, 53; --theme-accent-rgb: 255, 209, 102;
  --theme-ink: #f8fbff; --theme-muted: #8fa2be; --theme-on-brand: #ffffff;
}
body.theme-midnight-blue {
  --theme-bg-rgb: 5, 16, 32; --theme-bg2-rgb: 9, 25, 49; --theme-card-rgb: 13, 27, 48; --theme-card2-rgb: 20, 39, 66;
  --theme-line-rgb: 96, 165, 250; --theme-brand-rgb: 59, 130, 246; --theme-brand-dark-rgb: 29, 78, 216; --theme-accent-rgb: 125, 211, 252;
  --theme-ink: #f8fbff; --theme-muted: #9fb8dc; --theme-on-brand: #ffffff;
}
body.theme-emerald-night {
  --theme-bg-rgb: 4, 24, 18; --theme-bg2-rgb: 8, 44, 33; --theme-card-rgb: 13, 36, 29; --theme-card2-rgb: 18, 55, 43;
  --theme-line-rgb: 52, 211, 153; --theme-brand-rgb: 16, 185, 129; --theme-brand-dark-rgb: 5, 150, 105; --theme-accent-rgb: 167, 243, 208;
  --theme-ink: #f3fff9; --theme-muted: #9acdbd; --theme-on-brand: #052e22;
}
body.theme-gold-luxury {
  --theme-bg-rgb: 8, 8, 8; --theme-bg2-rgb: 22, 18, 10; --theme-card-rgb: 23, 20, 13; --theme-card2-rgb: 37, 30, 14;
  --theme-line-rgb: 212, 175, 55; --theme-brand-rgb: 212, 175, 55; --theme-brand-dark-rgb: 180, 133, 24; --theme-accent-rgb: 254, 240, 138;
  --theme-ink: #fffaf0; --theme-muted: #c6b99a; --theme-on-brand: #171307;
}
body.theme-violet-neon {
  --theme-bg-rgb: 14, 7, 28; --theme-bg2-rgb: 26, 13, 51; --theme-card-rgb: 25, 16, 43; --theme-card2-rgb: 45, 27, 75;
  --theme-line-rgb: 168, 85, 247; --theme-brand-rgb: 168, 85, 247; --theme-brand-dark-rgb: 126, 34, 206; --theme-accent-rgb: 240, 171, 252;
  --theme-ink: #fbf7ff; --theme-muted: #c8b5dd; --theme-on-brand: #ffffff;
}
body.theme-rose-charcoal {
  --theme-bg-rgb: 18, 12, 18; --theme-bg2-rgb: 34, 22, 32; --theme-card-rgb: 29, 22, 30; --theme-card2-rgb: 46, 31, 43;
  --theme-line-rgb: 251, 113, 133; --theme-brand-rgb: 190, 18, 60; --theme-brand-dark-rgb: 159, 18, 57; --theme-accent-rgb: 253, 164, 175;
  --theme-ink: #fff7fa; --theme-muted: #d0a9b4; --theme-on-brand: #ffffff;
}
body.theme-cyan-steel {
  --theme-bg-rgb: 5, 18, 27; --theme-bg2-rgb: 12, 33, 45; --theme-card-rgb: 14, 29, 39; --theme-card2-rgb: 22, 45, 58;
  --theme-line-rgb: 6, 182, 212; --theme-brand-rgb: 6, 182, 212; --theme-brand-dark-rgb: 8, 145, 178; --theme-accent-rgb: 103, 232, 249;
  --theme-ink: #f2fdff; --theme-muted: #9bcad5; --theme-on-brand: #06252d;
}
body.theme-coffee-amber {
  --theme-bg-rgb: 20, 13, 7; --theme-bg2-rgb: 39, 25, 13; --theme-card-rgb: 33, 23, 15; --theme-card2-rgb: 53, 35, 20;
  --theme-line-rgb: 217, 119, 6; --theme-brand-rgb: 217, 119, 6; --theme-brand-dark-rgb: 180, 83, 9; --theme-accent-rgb: 252, 211, 77;
  --theme-ink: #fff8ed; --theme-muted: #c7a985; --theme-on-brand: #1f1306;
}
body.theme-slate-lime {
  --theme-bg-rgb: 9, 14, 21; --theme-bg2-rgb: 16, 24, 35; --theme-card-rgb: 18, 27, 38; --theme-card2-rgb: 27, 39, 53;
  --theme-line-rgb: 132, 204, 22; --theme-brand-rgb: 132, 204, 22; --theme-brand-dark-rgb: 101, 163, 13; --theme-accent-rgb: 190, 242, 100;
  --theme-ink: #f8ffe8; --theme-muted: #a9b99c; --theme-on-brand: #122006;
}
body.theme-monochrome-pro {
  --theme-bg-rgb: 6, 7, 9; --theme-bg2-rgb: 17, 19, 24; --theme-card-rgb: 18, 20, 25; --theme-card2-rgb: 33, 36, 43;
  --theme-line-rgb: 148, 163, 184; --theme-brand-rgb: 229, 231, 235; --theme-brand-dark-rgb: 203, 213, 225; --theme-accent-rgb: 255, 255, 255;
  --theme-ink: #ffffff; --theme-muted: #a8b0bd; --theme-on-brand: #0a0b0d;
}
body[class*="theme-"] {
  --bg: rgb(var(--theme-bg-rgb));
  --card: rgb(var(--theme-card-rgb));
  --card-2: rgb(var(--theme-card2-rgb));
  --ink: var(--theme-ink);
  --muted: var(--theme-muted);
  --line: rgba(var(--theme-line-rgb), .24);
  --brand: rgb(var(--theme-brand-rgb));
  --brand-dark: rgb(var(--theme-brand-dark-rgb));
  --brand-soft: rgba(var(--theme-brand-rgb), .14);
  --accent: rgb(var(--theme-accent-rgb));
  background:
    radial-gradient(circle at 92% 0%, rgba(var(--theme-brand-rgb), .15), transparent 28%),
    radial-gradient(circle at 12% 14%, rgba(var(--theme-accent-rgb), .09), transparent 27%),
    linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 42%, #05070b 100%) !important;
  color: var(--ink);
}
body[class*="theme-"] .topbar,
body[class*="theme-"] .customer-bottom-nav.bottom-nav,
body[class*="theme-"] .admin-console-topbar {
  background: rgba(var(--theme-bg2-rgb), .92) !important;
  border-color: rgba(var(--theme-line-rgb), .22) !important;
}
body[class*="theme-"] .brand img,
body[class*="theme-"] .brand-mark,
body[class*="theme-"] .admin-mark {
  background: linear-gradient(135deg, rgb(var(--theme-brand-rgb)), rgb(var(--theme-accent-rgb))) !important;
  color: var(--theme-on-brand) !important;
}
body[class*="theme-"] .hero-card {
  background:
    radial-gradient(circle at 82% 10%, rgba(var(--theme-accent-rgb), .24), transparent 28%),
    linear-gradient(135deg, rgba(var(--theme-card-rgb), .96), rgba(var(--theme-card2-rgb), .86) 48%, rgba(var(--theme-brand-rgb), .50)) !important;
}
body[class*="theme-"] .btn,
body[class*="theme-"] .admin-primary,
body[class*="theme-"].staff-area .btn:not(.btn-muted),
body[class*="theme-"] .chip.active,
body[class*="theme-"] .panel-tabs .active,
body[class*="theme-"] .status-tabs .active,
body[class*="theme-"] .category-tab.active,
body[class*="theme-"] .category-tab:hover,
body[class*="theme-"] .admin-chip.active,
body[class*="theme-"].staff-area .status-tabs a.active,
body[class*="theme-"].staff-area .panel-tabs .active,
body[class*="theme-"].staff-area .subtab-nav a.active {
  background: linear-gradient(135deg, rgb(var(--theme-brand-rgb)), rgb(var(--theme-brand-dark-rgb))) !important;
  border-color: rgba(var(--theme-brand-rgb), .70) !important;
  color: var(--theme-on-brand) !important;
}
body[class*="theme-"] .btn:hover,
body[class*="theme-"] .admin-view-store:hover,
body[class*="theme-"] .admin-sidebar-store:hover { background: rgb(var(--theme-brand-dark-rgb)) !important; color: var(--theme-on-brand) !important; }
body[class*="theme-"] .btn-muted {
  background: rgba(var(--theme-card2-rgb), .95) !important;
  color: var(--ink) !important;
  border-color: rgba(var(--theme-line-rgb), .28) !important;
}
body[class*="theme-"] .cart-pill,
body[class*="theme-"] .top-actions select,
body[class*="theme-"] .top-actions a,
body[class*="theme-"] .store-search-field,
body[class*="theme-"] .store-search-panel select,
body[class*="theme-"] .category-tab,
body[class*="theme-"] .footer-pill,
body[class*="theme-"] .footer-category-links a,
body[class*="theme-"] .footer-socials.centered a,
body[class*="theme-"] .admin-view-store,
body[class*="theme-"] .admin-sidebar-store {
  background: rgba(var(--theme-card2-rgb), .78) !important;
  border-color: rgba(var(--theme-line-rgb), .30) !important;
  color: var(--ink) !important;
}
body[class*="theme-"] .cart-pill span,
body[class*="theme-"] .customer-bottom-nav em[data-cart-count] { background: rgb(var(--theme-brand-rgb)) !important; color: var(--theme-on-brand) !important; }
body[class*="theme-"] .eyebrow,
body[class*="theme-"] .item-category,
body[class*="theme-"] .catalogue-heading .eyebrow,
body[class*="theme-"] .detail-price,
body[class*="theme-"] .product-card-bottom strong,
body[class*="theme-"] .code-pill,
body[class*="theme-"] .stars,
body[class*="theme-"] .customer-bottom-nav a.active .nav-icon,
body[class*="theme-"] .customer-bottom-nav a:hover .nav-icon { color: rgb(var(--theme-accent-rgb)) !important; }
body[class*="theme-"] .item-card,
body[class*="theme-"] .product-card-v11,
body[class*="theme-"] .detail-card,
body[class*="theme-"] .card-form,
body[class*="theme-"] .summary-card,
body[class*="theme-"] .review-card,
body[class*="theme-"] .admin-panel,
body[class*="theme-"].staff-area .admin-card,
body[class*="theme-"] .admin-card,
body[class*="theme-"] .cart-row,
body[class*="theme-"] .order-card,
body[class*="theme-"] .preorder-card,
body[class*="theme-"] .detail-copy-card {
  background: rgba(var(--theme-card-rgb), .96) !important;
  border-color: rgba(var(--theme-line-rgb), .26) !important;
  color: var(--ink) !important;
}
body[class*="theme-"] input,
body[class*="theme-"] textarea,
body[class*="theme-"] select {
  background: rgba(var(--theme-card2-rgb), .92) !important;
  border-color: rgba(var(--theme-line-rgb), .30) !important;
  color: var(--ink) !important;
  outline-color: rgb(var(--theme-brand-rgb)) !important;
}
body[class*="theme-"] .admin-sidebar { background: rgb(var(--theme-card-rgb)) !important; border-color: rgba(var(--theme-line-rgb), .20) !important; }
body[class*="theme-"] .admin-role-badge { color: rgb(var(--theme-accent-rgb)) !important; border-color: rgba(var(--theme-brand-rgb), .45) !important; background: rgba(var(--theme-brand-rgb), .12) !important; }
body[class*="theme-"] .admin-menu a.active { background: rgba(var(--theme-brand-rgb), .13) !important; border-left-color: rgb(var(--theme-brand-rgb)) !important; color: #fff !important; }
body[class*="theme-"] .admin-table th { background: rgba(var(--theme-card2-rgb), .88) !important; border-bottom-color: rgba(var(--theme-line-rgb), .28) !important; }
body[class*="theme-"] .admin-table td { border-bottom-color: rgba(var(--theme-line-rgb), .18) !important; }
body.theme-monochrome-pro .top-actions .admin-top-link { background: #f8fafc !important; color: #111827 !important; border-color: #cbd5e1 !important; }

.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.theme-option {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 146px;
  padding: 13px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 16px;
  background: rgba(15,23,42,.42);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.theme-option:hover, .theme-option.selected { transform: translateY(-2px); border-color: rgba(var(--theme-brand-rgb), .65); background: rgba(var(--theme-brand-rgb), .08); }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option strong { color: #fff; font-size: 14px; }
.theme-option small { color: #9aa7b8; line-height: 1.42; font-size: 12px; }
.theme-swatch { height: 42px; border-radius: 13px; display: grid; grid-template-columns: 1.3fr .75fr .55fr; overflow: hidden; border: 1px solid rgba(255,255,255,.10); }
.theme-swatch i { display: block; }
.theme-swatch-obsidian-coral { background: #080e19; }.theme-swatch-obsidian-coral i:nth-child(1){background:#111927}.theme-swatch-obsidian-coral i:nth-child(2){background:#ff6b4a}.theme-swatch-obsidian-coral i:nth-child(3){background:#ffd166}
.theme-swatch-midnight-blue { background: #051020; }.theme-swatch-midnight-blue i:nth-child(1){background:#0d1b30}.theme-swatch-midnight-blue i:nth-child(2){background:#3b82f6}.theme-swatch-midnight-blue i:nth-child(3){background:#7dd3fc}
.theme-swatch-emerald-night { background: #041812; }.theme-swatch-emerald-night i:nth-child(1){background:#0d241d}.theme-swatch-emerald-night i:nth-child(2){background:#10b981}.theme-swatch-emerald-night i:nth-child(3){background:#a7f3d0}
.theme-swatch-gold-luxury { background: #080808; }.theme-swatch-gold-luxury i:nth-child(1){background:#17140d}.theme-swatch-gold-luxury i:nth-child(2){background:#d4af37}.theme-swatch-gold-luxury i:nth-child(3){background:#fef08a}
.theme-swatch-violet-neon { background: #0e071c; }.theme-swatch-violet-neon i:nth-child(1){background:#19102b}.theme-swatch-violet-neon i:nth-child(2){background:#a855f7}.theme-swatch-violet-neon i:nth-child(3){background:#f0abfc}
.theme-swatch-rose-charcoal { background: #120c12; }.theme-swatch-rose-charcoal i:nth-child(1){background:#1d161e}.theme-swatch-rose-charcoal i:nth-child(2){background:#f43f5e}.theme-swatch-rose-charcoal i:nth-child(3){background:#fda4af}
.theme-swatch-cyan-steel { background: #05121b; }.theme-swatch-cyan-steel i:nth-child(1){background:#0e1d27}.theme-swatch-cyan-steel i:nth-child(2){background:#06b6d4}.theme-swatch-cyan-steel i:nth-child(3){background:#67e8f9}
.theme-swatch-coffee-amber { background: #140d07; }.theme-swatch-coffee-amber i:nth-child(1){background:#21170f}.theme-swatch-coffee-amber i:nth-child(2){background:#d97706}.theme-swatch-coffee-amber i:nth-child(3){background:#fcd34d}
.theme-swatch-slate-lime { background: #090e15; }.theme-swatch-slate-lime i:nth-child(1){background:#121b26}.theme-swatch-slate-lime i:nth-child(2){background:#84cc16}.theme-swatch-slate-lime i:nth-child(3){background:#bef264}
.theme-swatch-monochrome-pro { background: #060709; }.theme-swatch-monochrome-pro i:nth-child(1){background:#121419}.theme-swatch-monochrome-pro i:nth-child(2){background:#94a3b8}.theme-swatch-monochrome-pro i:nth-child(3){background:#f8fafc}
@media (max-width: 720px) {
  .theme-picker-grid { grid-template-columns: 1fr; }
  .theme-option { min-height: 122px; }
}

@media (min-width: 980px) { .subtab-nav.settings-subtabs { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }


/* v18: make public Login button proportional with Cart button */
body:not(.staff-area) .top-actions { gap: 8px; }
body:not(.staff-area) .cart-pill,
body:not(.staff-area) .top-actions .login-top-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body:not(.staff-area) .top-actions .login-top-link {
  background: linear-gradient(135deg, rgba(var(--theme-brand-rgb), .96), rgba(var(--theme-brand-dark-rgb), .96)) !important;
  border: 1px solid rgba(var(--theme-brand-rgb), .55) !important;
  color: var(--theme-on-brand) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}
body:not(.staff-area) .top-actions .login-top-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
@media (max-width: 430px) {
  body:not(.staff-area) .cart-pill,
  body:not(.staff-area) .top-actions .login-top-link {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

/* v21: professional balanced light/dark color systems with improved contrast */
body.theme-light-royal {
  --theme-bg-rgb: 246, 248, 252; --theme-bg2-rgb: 238, 243, 250; --theme-card-rgb: 255, 255, 255; --theme-card2-rgb: 241, 245, 249;
  --theme-line-rgb: 203, 213, 225; --theme-brand-rgb: 37, 99, 235; --theme-brand-dark-rgb: 29, 78, 216; --theme-accent-rgb: 234, 88, 12;
  --theme-ink: #0f172a; --theme-muted: #475569; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(37,99,235,.10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(234,88,12,.08), transparent 28%), linear-gradient(180deg, #f8fafc 0%, #eef4ff 42%, #f8fafc 100%);
}
body.theme-light-emerald {
  --theme-bg-rgb: 244, 250, 247; --theme-bg2-rgb: 232, 246, 239; --theme-card-rgb: 255, 255, 255; --theme-card2-rgb: 236, 245, 241;
  --theme-line-rgb: 187, 207, 199; --theme-brand-rgb: 4, 120, 87; --theme-brand-dark-rgb: 6, 95, 70; --theme-accent-rgb: 15, 118, 110;
  --theme-ink: #10201b; --theme-muted: #47645b; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(5,150,105,.11), transparent 31%), radial-gradient(circle at 12% 15%, rgba(15,118,110,.08), transparent 28%), linear-gradient(180deg, #f7fcf9 0%, #eaf7f1 44%, #f8fbfa 100%);
}
body.theme-light-amber {
  --theme-bg-rgb: 253, 248, 236; --theme-bg2-rgb: 250, 239, 212; --theme-card-rgb: 255, 253, 247; --theme-card2-rgb: 249, 241, 223;
  --theme-line-rgb: 224, 200, 160; --theme-brand-rgb: 180, 83, 9; --theme-brand-dark-rgb: 146, 64, 14; --theme-accent-rgb: 217, 119, 6;
  --theme-ink: #22170b; --theme-muted: #6b5130; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(180,83,9,.13), transparent 31%), radial-gradient(circle at 10% 14%, rgba(217,119,6,.08), transparent 28%), linear-gradient(180deg, #fffbeb 0%, #f8ecd2 44%, #fffaf0 100%);
}
body.theme-light-rose {
  --theme-bg-rgb: 253, 247, 250; --theme-bg2-rgb: 250, 235, 242; --theme-card-rgb: 255, 255, 255; --theme-card2-rgb: 249, 241, 245;
  --theme-line-rgb: 221, 198, 209; --theme-brand-rgb: 190, 18, 60; --theme-brand-dark-rgb: 159, 18, 57; --theme-accent-rgb: 124, 58, 237;
  --theme-ink: #24111b; --theme-muted: #6f4c5d; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(190,18,60,.10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(124,58,237,.08), transparent 28%), linear-gradient(180deg, #fff7fb 0%, #f7e8ef 44%, #fffafa 100%);
}
body.theme-light-slate {
  --theme-bg-rgb: 248, 250, 252; --theme-bg2-rgb: 241, 245, 249; --theme-card-rgb: 255, 255, 255; --theme-card2-rgb: 242, 246, 250;
  --theme-line-rgb: 203, 213, 225; --theme-brand-rgb: 15, 23, 42; --theme-brand-dark-rgb: 30, 41, 59; --theme-accent-rgb: 59, 130, 246;
  --theme-ink: #111827; --theme-muted: #526173; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(59,130,246,.10), transparent 31%), linear-gradient(180deg, #ffffff 0%, #eef2f7 45%, #f8fafc 100%);
}
body.theme-dark-obsidian {
  --theme-bg-rgb: 8, 12, 20; --theme-bg2-rgb: 12, 19, 31; --theme-card-rgb: 17, 25, 39; --theme-card2-rgb: 26, 35, 50;
  --theme-line-rgb: 91, 119, 160; --theme-brand-rgb: 249, 115, 22; --theme-brand-dark-rgb: 234, 88, 12; --theme-accent-rgb: 251, 191, 36;
  --theme-ink: #f8fafc; --theme-muted: #aebacd; --theme-on-brand: #111827; --theme-page-bg: radial-gradient(circle at 92% 0%, rgba(249,115,22,.16), transparent 30%), radial-gradient(circle at 12% 14%, rgba(251,191,36,.10), transparent 28%), linear-gradient(180deg, #0c1320 0%, #080c14 48%, #05070b 100%);
}
body.theme-dark-navy {
  --theme-bg-rgb: 6, 18, 34; --theme-bg2-rgb: 9, 25, 49; --theme-card-rgb: 13, 27, 48; --theme-card2-rgb: 20, 39, 66;
  --theme-line-rgb: 96, 165, 250; --theme-brand-rgb: 37, 99, 235; --theme-brand-dark-rgb: 29, 78, 216; --theme-accent-rgb: 125, 211, 252;
  --theme-ink: #f8fbff; --theme-muted: #b3c8e5; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 92% 0%, rgba(59,130,246,.20), transparent 31%), radial-gradient(circle at 12% 14%, rgba(125,211,252,.10), transparent 28%), linear-gradient(180deg, #091931 0%, #061222 48%, #030712 100%);
}
body.theme-dark-forest {
  --theme-bg-rgb: 4, 19, 16; --theme-bg2-rgb: 8, 38, 31; --theme-card-rgb: 13, 36, 31; --theme-card2-rgb: 18, 55, 45;
  --theme-line-rgb: 52, 211, 153; --theme-brand-rgb: 16, 185, 129; --theme-brand-dark-rgb: 5, 150, 105; --theme-accent-rgb: 167, 243, 208;
  --theme-ink: #f3fff9; --theme-muted: #acd7ca; --theme-on-brand: #052e22; --theme-page-bg: radial-gradient(circle at 92% 0%, rgba(16,185,129,.18), transparent 30%), radial-gradient(circle at 12% 14%, rgba(167,243,208,.09), transparent 28%), linear-gradient(180deg, #08261f 0%, #041914 48%, #020b09 100%);
}
body.theme-dark-burgundy {
  --theme-bg-rgb: 25, 10, 20; --theme-bg2-rgb: 44, 18, 34; --theme-card-rgb: 39, 21, 33; --theme-card2-rgb: 62, 32, 50;
  --theme-line-rgb: 251, 113, 133; --theme-brand-rgb: 190, 18, 60; --theme-brand-dark-rgb: 159, 18, 57; --theme-accent-rgb: 253, 186, 116;
  --theme-ink: #fff7fb; --theme-muted: #e2bcc9; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 92% 0%, rgba(244,63,94,.18), transparent 30%), radial-gradient(circle at 12% 14%, rgba(253,186,116,.09), transparent 28%), linear-gradient(180deg, #2c1222 0%, #190a14 48%, #080207 100%);
}
body.theme-dark-luxury {
  --theme-bg-rgb: 8, 8, 8; --theme-bg2-rgb: 20, 18, 14; --theme-card-rgb: 24, 22, 18; --theme-card2-rgb: 38, 33, 23;
  --theme-line-rgb: 212, 175, 55; --theme-brand-rgb: 212, 175, 55; --theme-brand-dark-rgb: 180, 133, 24; --theme-accent-rgb: 254, 240, 138;
  --theme-ink: #fffaf0; --theme-muted: #d7c9aa; --theme-on-brand: #171307; --theme-page-bg: radial-gradient(circle at 92% 0%, rgba(212,175,55,.17), transparent 30%), radial-gradient(circle at 12% 14%, rgba(254,240,138,.08), transparent 28%), linear-gradient(180deg, #14120e 0%, #080808 48%, #030303 100%);
}

body[class*="theme-"] {
  --bg: rgb(var(--theme-bg-rgb));
  --card: rgb(var(--theme-card-rgb));
  --card-2: rgb(var(--theme-card2-rgb));
  --ink: var(--theme-ink);
  --muted: var(--theme-muted);
  --line: rgba(var(--theme-line-rgb), .30);
  --brand: rgb(var(--theme-brand-rgb));
  --brand-dark: rgb(var(--theme-brand-dark-rgb));
  --brand-soft: rgba(var(--theme-brand-rgb), .13);
  --accent: rgb(var(--theme-accent-rgb));
  --shadow: 0 18px 45px rgba(15, 23, 42, .14);
  background: var(--theme-page-bg) !important;
  color: var(--ink) !important;
}
body[class*="theme-dark-"] { --shadow: 0 22px 50px rgba(0,0,0,.36); }
body[class*="theme-"] .topbar,
body[class*="theme-"] .bottom-nav,
body[class*="theme-"] .admin-console-topbar,
body[class*="theme-"] .site-footer {
  background: rgba(var(--theme-card-rgb), .92) !important;
  border-color: rgba(var(--theme-line-rgb), .28) !important;
  color: var(--ink) !important;
}
body[class*="theme-"] .hero-card,
body[class*="theme-"] .item-card,
body[class*="theme-"] .product-card-v11,
body[class*="theme-"] .detail-card,
body[class*="theme-"] .auth-card,
body[class*="theme-"] .success-card,
body[class*="theme-"] .card-form,
body[class*="theme-"] .summary-card,
body[class*="theme-"] .cart-footer-card,
body[class*="theme-"] .review-card,
body[class*="theme-"] .settings-section,
body[class*="theme-"] .admin-card,
body[class*="theme-"] .admin-panel,
body[class*="theme-"] .cart-row,
body[class*="theme-"] .order-card,
body[class*="theme-"] .preorder-card,
body[class*="theme-"] .detail-copy-card,
body[class*="theme-"] .info-box,
body[class*="theme-"] .reset-option-card,
body[class*="theme-"] .metric,
body[class*="theme-"] .empty {
  background: rgba(var(--theme-card-rgb), .96) !important;
  border-color: rgba(var(--theme-line-rgb), .28) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow) !important;
}
body[class*="theme-"] .admin-sidebar {
  background: rgb(var(--theme-card-rgb)) !important;
  color: var(--ink) !important;
  border-color: rgba(var(--theme-line-rgb), .28) !important;
}
body[class*="theme-"] .product-media-v11,
body[class*="theme-"] .product-card-v11 .item-photo,
body[class*="theme-"] .product-card-v11 .preorder-media,
body[class*="theme-"] .product-detail-v11 .detail-photo {
  background: linear-gradient(135deg, rgba(var(--theme-card2-rgb), .98), rgba(var(--theme-brand-rgb), .16)) !important;
}
body[class*="theme-"] .catalogue-heading h2,
body[class*="theme-"] .product-info-v11 h3,
body[class*="theme-"] .product-detail-info-v11 h1,
body[class*="theme-"] .card-form h2,
body[class*="theme-"] .review-card strong,
body[class*="theme-"] .info-box strong,
body[class*="theme-"] .admin-section-title h2,
body[class*="theme-"] .theme-option strong,
body[class*="theme-"] .brand strong,
body[class*="theme-"] h1,
body[class*="theme-"] h2,
body[class*="theme-"] h3 {
  color: var(--ink) !important;
}
body[class*="theme-"] .muted,
body[class*="theme-"] .product-code,
body[class*="theme-"] .product-info-v11 p,
body[class*="theme-"] .product-info-v11 small,
body[class*="theme-"] .product-detail-info-v11 .lead,
body[class*="theme-"] .catalogue-heading p,
body[class*="theme-"] .brand small,
body[class*="theme-"] .reset-option-card p,
body[class*="theme-"] .theme-option small,
body[class*="theme-"] .detail-copy-card,
body[class*="theme-"] .detail-copy-card p,
body[class*="theme-"] .review-card p,
body[class*="theme-"] .owner-reply p,
body[class*="theme-"] .info-box pre,
body[class*="theme-"] .admin-card p,
body[class*="theme-"] .admin-menu small,
body[class*="theme-"] label small,
body[class*="theme-"] .field-note {
  color: var(--muted) !important;
}
body[class*="theme-"] input,
body[class*="theme-"] textarea,
body[class*="theme-"] select,
body[class*="theme-"] .store-search-field,
body[class*="theme-"] .theme-option,
body[class*="theme-"] .footer-pill,
body[class*="theme-"] .footer-category-links a,
body[class*="theme-"] .footer-socials.centered a,
body[class*="theme-"] .category-tab,
body[class*="theme-"] .cart-pill,
body[class*="theme-"] .top-actions select,
body[class*="theme-"] .admin-view-store,
body[class*="theme-"] .admin-sidebar-store,
body[class*="theme-"] .qty-control.mini,
body[class*="theme-"] .detail-qty {
  background: rgba(var(--theme-card2-rgb), .96) !important;
  border-color: rgba(var(--theme-line-rgb), .34) !important;
  color: var(--ink) !important;
}
body[class*="theme-"] input::placeholder,
body[class*="theme-"] textarea::placeholder { color: var(--muted) !important; opacity: .82; }
body[class*="theme-"] .btn,
body[class*="theme-"] .primary-btn,
body[class*="theme-"] .admin-primary,
body[class*="theme-"] .chip.active,
body[class*="theme-"] .panel-tabs .active,
body[class*="theme-"] .status-tabs .active,
body[class*="theme-"] .category-tab.active,
body[class*="theme-"] .category-tab:hover,
body[class*="theme-"] .admin-chip.active,
body[class*="theme-"] .top-actions .login-top-link,
body[class*="theme-"].staff-area .subtab-nav a.active {
  background: linear-gradient(135deg, rgb(var(--theme-brand-rgb)), rgb(var(--theme-brand-dark-rgb))) !important;
  border-color: rgba(var(--theme-brand-rgb), .62) !important;
  color: var(--theme-on-brand) !important;
}
body[class*="theme-"] .btn-muted,
body[class*="theme-"] .call-order,
body[class*="theme-"] .status-btn,
body[class*="theme-"] .admin-table-action,
body[class*="theme-"] .bottom-nav a,
body[class*="theme-"] .bottom-nav button {
  background: rgba(var(--theme-card2-rgb), .92) !important;
  border-color: rgba(var(--theme-line-rgb), .34) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
body[class*="theme-"] .bottom-nav .active,
body[class*="theme-"] .customer-bottom-nav a.active {
  background: rgba(var(--theme-brand-rgb), .16) !important;
  color: rgb(var(--theme-brand-rgb)) !important;
}
body[class*="theme-"] .eyebrow,
body[class*="theme-"] .item-category,
body[class*="theme-"] .catalogue-heading .eyebrow,
body[class*="theme-"] .detail-price,
body[class*="theme-"] .product-card-bottom strong,
body[class*="theme-"] .code-pill,
body[class*="theme-"] .stars,
body[class*="theme-"] .nav-icon,
body[class*="theme-"] .admin-role-badge {
  color: rgb(var(--theme-accent-rgb)) !important;
}
body[class*="theme-"] .owner-reply {
  background: rgba(var(--theme-accent-rgb), .10) !important;
  border-color: rgba(var(--theme-accent-rgb), .25) !important;
  color: var(--ink) !important;
}
body[class*="theme-"] .admin-menu a.active {
  background: rgba(var(--theme-brand-rgb), .14) !important;
  border-left-color: rgb(var(--theme-brand-rgb)) !important;
  color: var(--ink) !important;
}
body[class*="theme-"] .admin-table th {
  background: rgba(var(--theme-card2-rgb), .96) !important;
  color: var(--ink) !important;
  border-bottom-color: rgba(var(--theme-line-rgb), .30) !important;
}
body[class*="theme-"] .admin-table td { color: var(--ink) !important; border-bottom-color: rgba(var(--theme-line-rgb), .22) !important; }
body[class*="theme-"] .admin-table tr:hover td { background: rgba(var(--theme-brand-rgb), .06) !important; }
body[class*="theme-"] .top-actions .admin-top-link { background: #dc2626 !important; color: #fff !important; border-color: #ef4444 !important; }
body[class*="theme-"] .whatsapp-order,
body[class*="theme-"] .whatsapp-float { background: #25d366 !important; color: #062a15 !important; }
body[class*="theme-"] .whatsapp-float svg { fill: #fff !important; }
body[class*="theme-light-"] .flash-error { background: #fee2e2 !important; color: #7f1d1d !important; border: 1px solid #fecaca; }
body[class*="theme-light-"] .flash-success { background: #dcfce7 !important; color: #14532d !important; border: 1px solid #bbf7d0; }
body[class*="theme-dark-"] .flash-error { background: rgba(239,68,68,.18) !important; color: #fecaca !important; border: 1px solid rgba(239,68,68,.35); }
body[class*="theme-dark-"] .flash-success { background: rgba(34,197,94,.16) !important; color: #bbf7d0 !important; border: 1px solid rgba(34,197,94,.32); }

.theme-swatch-light-royal { background:#f8fafc; }.theme-swatch-light-royal i:nth-child(1){background:#ffffff}.theme-swatch-light-royal i:nth-child(2){background:#2563eb}.theme-swatch-light-royal i:nth-child(3){background:#ea580c}
.theme-swatch-light-emerald { background:#f4faf7; }.theme-swatch-light-emerald i:nth-child(1){background:#ffffff}.theme-swatch-light-emerald i:nth-child(2){background:#047857}.theme-swatch-light-emerald i:nth-child(3){background:#0f766e}
.theme-swatch-light-amber { background:#fff7ed; }.theme-swatch-light-amber i:nth-child(1){background:#fffdf7}.theme-swatch-light-amber i:nth-child(2){background:#b45309}.theme-swatch-light-amber i:nth-child(3){background:#d97706}
.theme-swatch-light-rose { background:#fff7fb; }.theme-swatch-light-rose i:nth-child(1){background:#ffffff}.theme-swatch-light-rose i:nth-child(2){background:#be123c}.theme-swatch-light-rose i:nth-child(3){background:#7c3aed}
.theme-swatch-light-slate { background:#f8fafc; }.theme-swatch-light-slate i:nth-child(1){background:#ffffff}.theme-swatch-light-slate i:nth-child(2){background:#0f172a}.theme-swatch-light-slate i:nth-child(3){background:#3b82f6}
.theme-swatch-dark-obsidian { background:#080c14; }.theme-swatch-dark-obsidian i:nth-child(1){background:#111927}.theme-swatch-dark-obsidian i:nth-child(2){background:#f97316}.theme-swatch-dark-obsidian i:nth-child(3){background:#fbbf24}
.theme-swatch-dark-navy { background:#061222; }.theme-swatch-dark-navy i:nth-child(1){background:#0d1b30}.theme-swatch-dark-navy i:nth-child(2){background:#2563eb}.theme-swatch-dark-navy i:nth-child(3){background:#7dd3fc}
.theme-swatch-dark-forest { background:#041914; }.theme-swatch-dark-forest i:nth-child(1){background:#0d241f}.theme-swatch-dark-forest i:nth-child(2){background:#10b981}.theme-swatch-dark-forest i:nth-child(3){background:#a7f3d0}
.theme-swatch-dark-burgundy { background:#190a14; }.theme-swatch-dark-burgundy i:nth-child(1){background:#271521}.theme-swatch-dark-burgundy i:nth-child(2){background:#be123c}.theme-swatch-dark-burgundy i:nth-child(3){background:#fdba74}
.theme-swatch-dark-luxury { background:#080808; }.theme-swatch-dark-luxury i:nth-child(1){background:#181612}.theme-swatch-dark-luxury i:nth-child(2){background:#d4af37}.theme-swatch-dark-luxury i:nth-child(3){background:#fef08a}
body[class*="theme-"] .theme-option { min-height: 162px; }
body[class*="theme-"] .theme-option.selected::after {
  content: 'Selected';
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(var(--theme-brand-rgb), .15);
  color: rgb(var(--theme-brand-rgb));
}
@media (max-width: 720px) {
  body[class*="theme-"] .theme-option { min-height: 136px; }
}

/* v22: mobile-first customer catalogue cleanup
   Search/sort controls are intentionally removed from the customer homepage.
   The sticky catalogue header now only contains compact category tabs, saving mobile space. */
body:not(.staff-area) .category-only-shell {
  display: block !important;
  padding: 6px 10px !important;
  margin: -10px -12px 14px !important;
  min-height: 0 !important;
  background: rgba(var(--theme-card-rgb), .92) !important;
  border-bottom: 1px solid rgba(var(--theme-line-rgb), .26) !important;
  backdrop-filter: blur(16px);
}
body:not(.staff-area) .category-tabs-compact {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  padding: 2px 2px 3px !important;
  margin: 0 !important;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
body:not(.staff-area) .category-tabs-compact::-webkit-scrollbar { display: none; }
body:not(.staff-area) .category-tabs-compact .category-tab {
  min-height: 31px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  scroll-snap-align: start;
  box-shadow: none !important;
}
body:not(.staff-area) .catalogue-section { margin-top: 18px !important; }
body:not(.staff-area) .catalogue-heading { margin-bottom: 12px !important; }
body:not(.staff-area) .catalogue-heading h2 { font-size: clamp(22px, 6vw, 34px) !important; }
body:not(.staff-area) .catalogue-heading p { font-size: 13px !important; }
@media (max-width: 430px) {
  body:not(.staff-area) .category-only-shell { padding: 5px 8px !important; margin-bottom: 12px !important; }
  body:not(.staff-area) .category-tabs-compact { gap: 5px !important; }
  body:not(.staff-area) .category-tabs-compact .category-tab {
    min-height: 29px !important;
    padding: 5px 8px !important;
    font-size: 11.5px !important;
  }
  body:not(.staff-area) .product-grid-v11,
  body:not(.staff-area) .centered-products { gap: 12px !important; }
}
@media (min-width: 900px) {
  body:not(.staff-area) .category-only-shell {
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding: 8px 24px !important;
  }
  body:not(.staff-area) .category-tabs-compact {
    justify-content: center !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  body:not(.staff-area) .category-tabs-compact .category-tab {
    min-height: 34px !important;
    font-size: 13px !important;
    padding: 7px 12px !important;
  }
}

/* v23: contrast and asset-recovery polish
   These rules intentionally sit at the end of the file so every theme keeps reliable readability.
   Light themes use light surfaces with dark text; dark themes use dark surfaces with light text. */
body[class*="theme-"] {
  color-scheme: light;
  background: var(--theme-page-bg) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-dark-"] { color-scheme: dark; }
body[class*="theme-"] .page,
body[class*="theme-"] main,
body[class*="theme-"] section,
body[class*="theme-"] article,
body[class*="theme-"] div,
body[class*="theme-"] p,
body[class*="theme-"] span,
body[class*="theme-"] label,
body[class*="theme-"] td,
body[class*="theme-"] th,
body[class*="theme-"] small {
  text-shadow: none;
}

/* Universal text hierarchy */
body[class*="theme-"] h1,
body[class*="theme-"] h2,
body[class*="theme-"] h3,
body[class*="theme-"] h4,
body[class*="theme-"] .brand strong,
body[class*="theme-"] .admin-sidebar-head strong,
body[class*="theme-"] .admin-content-head h2,
body[class*="theme-"] .admin-page-head h1,
body[class*="theme-"] .admin-section-title h2,
body[class*="theme-"] .admin-section-title h3,
body[class*="theme-"] .metric strong,
body[class*="theme-"] .bulk-save-status strong,
body[class*="theme-"] .admin-table strong,
body[class*="theme-"] .product-info-v11 h3,
body[class*="theme-"] .product-detail-info-v11 h1,
body[class*="theme-"] .catalogue-heading h2,
body[class*="theme-"] .footer-contact-panel h2 {
  color: var(--theme-ink) !important;
}
body[class*="theme-"] .muted,
body[class*="theme-"] .lead,
body[class*="theme-"] .brand small,
body[class*="theme-"] .admin-sidebar-head small,
body[class*="theme-"] .admin-content-head p,
body[class*="theme-"] .admin-page-head p,
body[class*="theme-"] .admin-section-title p,
body[class*="theme-"] .metric span,
body[class*="theme-"] .bulk-save-status span,
body[class*="theme-"] .admin-table small,
body[class*="theme-"] .item-body p,
body[class*="theme-"] .product-info-v11 p,
body[class*="theme-"] .product-info-v11 small,
body[class*="theme-"] .product-detail-info-v11 .lead,
body[class*="theme-"] .catalogue-heading p,
body[class*="theme-"] .order-card small,
body[class*="theme-"] .cart-row small,
body[class*="theme-"] label small,
body[class*="theme-"] .field-note,
body[class*="theme-"] .empty,
body[class*="theme-"] .register-prompt,
body[class*="theme-"] .theme-option small {
  color: var(--theme-muted) !important;
}

/* Shared surfaces */
body[class*="theme-"] .hero-card,
body[class*="theme-"] .item-card,
body[class*="theme-"] .product-card-v11,
body[class*="theme-"] .detail-card,
body[class*="theme-"] .auth-card,
body[class*="theme-"] .auth-card-polished,
body[class*="theme-"] .success-card,
body[class*="theme-"] .card-form,
body[class*="theme-"] .summary-card,
body[class*="theme-"] .cart-footer-card,
body[class*="theme-"] .review-card,
body[class*="theme-"] .settings-section,
body[class*="theme-"] .admin-card,
body[class*="theme-"] .admin-panel,
body[class*="theme-"] .admin-page-head,
body[class*="theme-"] .cart-row,
body[class*="theme-"] .order-card,
body[class*="theme-"] .preorder-card,
body[class*="theme-"] .detail-copy-card,
body[class*="theme-"] .info-box,
body[class*="theme-"] .reset-option-card,
body[class*="theme-"] .metric,
body[class*="theme-"] .empty,
body[class*="theme-"] .message-card,
body[class*="theme-"] .bulk-save-bar {
  background: rgba(var(--theme-card-rgb), .98) !important;
  border: 1px solid rgba(var(--theme-line-rgb), .34) !important;
  color: var(--theme-ink) !important;
  box-shadow: var(--shadow) !important;
}
body[class*="theme-"] .bulk-save-bar.has-changes {
  border: 1px solid rgba(var(--theme-brand-rgb), .55) !important;
  background: rgba(var(--theme-brand-rgb), .10) !important;
}
body[class*="theme-dark-"] .hero-card,
body[class*="theme-dark-"] .product-card-v11,
body[class*="theme-dark-"] .item-card,
body[class*="theme-dark-"] .admin-panel,
body[class*="theme-dark-"] .admin-card,
body[class*="theme-dark-"] .metric {
  box-shadow: 0 20px 50px rgba(0,0,0,.34) !important;
}

/* Inputs */
body[class*="theme-"] input,
body[class*="theme-"] textarea,
body[class*="theme-"] select {
  background: rgba(var(--theme-card2-rgb), .98) !important;
  border: 1px solid rgba(var(--theme-line-rgb), .46) !important;
  color: var(--theme-ink) !important;
  caret-color: rgb(var(--theme-brand-rgb));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
body[class*="theme-"] input:focus,
body[class*="theme-"] textarea:focus,
body[class*="theme-"] select:focus {
  border-color: rgba(var(--theme-brand-rgb), .78) !important;
  outline: 3px solid rgba(var(--theme-brand-rgb), .16) !important;
}
body[class*="theme-"] input::placeholder,
body[class*="theme-"] textarea::placeholder { color: var(--theme-muted) !important; opacity: .78; }
body[class*="theme-light-"] input[type="number"] { color-scheme: light; }
body[class*="theme-dark-"] input[type="number"] { color-scheme: dark; }

/* Admin/staff: reliable desktop console contrast */
body[class*="theme-"].staff-area {
  background: var(--theme-page-bg) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-"].staff-area .page {
  background: transparent !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-"].staff-area .admin-console-topbar {
  background: rgba(var(--theme-card-rgb), .96) !important;
  border-color: rgba(var(--theme-line-rgb), .30) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-"].staff-area .admin-sidebar {
  background: rgba(var(--theme-card-rgb), .99) !important;
  border-right: 1px solid rgba(var(--theme-line-rgb), .36) !important;
  color: var(--theme-ink) !important;
  box-shadow: 12px 0 34px rgba(15, 23, 42, .10) !important;
}
body[class*="theme-dark-"].staff-area .admin-sidebar { box-shadow: 14px 0 42px rgba(0,0,0,.34) !important; }
body[class*="theme-"].staff-area .admin-sidebar-head,
body[class*="theme-"].staff-area .admin-sidebar-foot {
  border-color: rgba(var(--theme-line-rgb), .32) !important;
}
body[class*="theme-"].staff-area .admin-role-badge {
  background: rgba(var(--theme-brand-rgb), .14) !important;
  color: rgb(var(--theme-brand-rgb)) !important;
  border: 1px solid rgba(var(--theme-brand-rgb), .42) !important;
}
body[class*="theme-"].staff-area .admin-menu p {
  color: var(--theme-muted) !important;
  opacity: 1 !important;
}
body[class*="theme-"].staff-area .admin-menu a {
  color: var(--theme-muted) !important;
  background: transparent !important;
  border-left-color: transparent !important;
}
body[class*="theme-"].staff-area .admin-menu a:hover {
  background: rgba(var(--theme-brand-rgb), .08) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-"].staff-area .admin-menu a.active {
  background: rgba(var(--theme-brand-rgb), .16) !important;
  border-left-color: rgb(var(--theme-brand-rgb)) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-"].staff-area .admin-menu a span { filter: none; }

body[class*="theme-"].staff-area .admin-panel,
body[class*="theme-"].staff-area .admin-card,
body[class*="theme-"].staff-area .summary-card,
body[class*="theme-"].staff-area .order-card,
body[class*="theme-"].staff-area .settings-section,
body[class*="theme-"].staff-area .section-head,
body[class*="theme-"].staff-area .admin-page-head,
body[class*="theme-"].staff-area .metric,
body[class*="theme-"].staff-area .card-form {
  background: rgba(var(--theme-card-rgb), .98) !important;
  border-color: rgba(var(--theme-line-rgb), .34) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-"].staff-area .admin-table-wrap {
  border-color: rgba(var(--theme-line-rgb), .34) !important;
  background: rgba(var(--theme-card-rgb), .98) !important;
}
body[class*="theme-"].staff-area .admin-table th {
  background: rgba(var(--theme-card2-rgb), .98) !important;
  color: var(--theme-ink) !important;
  border-bottom-color: rgba(var(--theme-line-rgb), .38) !important;
}
body[class*="theme-"].staff-area .admin-table td {
  background: transparent !important;
  color: var(--theme-ink) !important;
  border-bottom-color: rgba(var(--theme-line-rgb), .24) !important;
}
body[class*="theme-"].staff-area .admin-table tr:hover td { background: rgba(var(--theme-brand-rgb), .07) !important; }
body[class*="theme-"].staff-area .admin-empty-row { color: var(--theme-muted) !important; }
body[class*="theme-"].staff-area .price-green,
body[class*="theme-"].staff-area .status-switch.on { color: #16a34a !important; }
body[class*="theme-dark-"].staff-area .price-green,
body[class*="theme-dark-"].staff-area .status-switch.on { color: #4ade80 !important; }

/* Admin subtabs and status tabs */
body[class*="theme-"].staff-area .status-tabs a,
body[class*="theme-"].staff-area .panel-tabs a,
body[class*="theme-"].staff-area .subtab-nav a,
body[class*="theme-"].staff-area .admin-chip,
body[class*="theme-"].staff-area .role-pill,
body[class*="theme-"].staff-area .status-btn,
body[class*="theme-"].staff-area .admin-table-action,
body[class*="theme-"].staff-area .icon-btn,
body[class*="theme-"].staff-area .btn-muted {
  background: rgba(var(--theme-card2-rgb), .98) !important;
  border: 1px solid rgba(var(--theme-line-rgb), .40) !important;
  color: var(--theme-ink) !important;
  box-shadow: none !important;
}
body[class*="theme-"].staff-area .status-tabs a.active,
body[class*="theme-"].staff-area .panel-tabs .active,
body[class*="theme-"].staff-area .subtab-nav a.active,
body[class*="theme-"].staff-area .admin-chip.active {
  background: linear-gradient(135deg, rgb(var(--theme-brand-rgb)), rgb(var(--theme-brand-dark-rgb))) !important;
  border-color: rgba(var(--theme-brand-rgb), .72) !important;
  color: var(--theme-on-brand) !important;
}
body[class*="theme-"].staff-area .btn:not(.btn-muted),
body[class*="theme-"].staff-area .admin-primary {
  background: linear-gradient(135deg, rgb(var(--theme-brand-rgb)), rgb(var(--theme-brand-dark-rgb))) !important;
  border-color: rgba(var(--theme-brand-rgb), .62) !important;
  color: var(--theme-on-brand) !important;
}
body[class*="theme-"].staff-area .danger,
body[class*="theme-"].staff-area .remove-btn {
  background: rgba(220, 38, 38, .12) !important;
  border-color: rgba(220, 38, 38, .40) !important;
  color: #b91c1c !important;
}
body[class*="theme-dark-"].staff-area .danger,
body[class*="theme-dark-"].staff-area .remove-btn { color: #fca5a5 !important; }

/* Public/customer controls */
body[class*="theme-"]:not(.staff-area) .topbar,
body[class*="theme-"]:not(.staff-area) .bottom-nav,
body[class*="theme-"]:not(.staff-area) .category-only-shell,
body[class*="theme-"]:not(.staff-area) .storefront-shell,
body[class*="theme-"]:not(.staff-area) .site-footer {
  background: rgba(var(--theme-card-rgb), .96) !important;
  border-color: rgba(var(--theme-line-rgb), .32) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-"]:not(.staff-area) .category-tab,
body[class*="theme-"]:not(.staff-area) .cart-pill,
body[class*="theme-"]:not(.staff-area) .top-actions select,
body[class*="theme-"]:not(.staff-area) .top-actions a,
body[class*="theme-"]:not(.staff-area) .qty-control,
body[class*="theme-"]:not(.staff-area) .detail-qty,
body[class*="theme-"]:not(.staff-area) .footer-pill,
body[class*="theme-"]:not(.staff-area) .footer-main-links a,
body[class*="theme-"]:not(.staff-area) .footer-category-links a,
body[class*="theme-"]:not(.staff-area) .footer-socials.centered a {
  background: rgba(var(--theme-card2-rgb), .98) !important;
  border: 1px solid rgba(var(--theme-line-rgb), .42) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-"]:not(.staff-area) .category-tab.active,
body[class*="theme-"]:not(.staff-area) .category-tab:hover,
body[class*="theme-"]:not(.staff-area) .top-actions .login-top-link,
body[class*="theme-"]:not(.staff-area) .top-actions .admin-top-link,
body[class*="theme-"]:not(.staff-area) .top-actions .manager-top-link,
body[class*="theme-"]:not(.staff-area) .btn,
body[class*="theme-"]:not(.staff-area) .primary-btn {
  background: linear-gradient(135deg, rgb(var(--theme-brand-rgb)), rgb(var(--theme-brand-dark-rgb))) !important;
  border-color: rgba(var(--theme-brand-rgb), .72) !important;
  color: var(--theme-on-brand) !important;
}
body[class*="theme-"]:not(.staff-area) .top-actions .admin-top-link { background: #dc2626 !important; color: #fff !important; border-color: #ef4444 !important; }
body[class*="theme-"]:not(.staff-area) .product-card-bottom strong,
body[class*="theme-"]:not(.staff-area) .detail-price,
body[class*="theme-"]:not(.staff-area) .stars,
body[class*="theme-"]:not(.staff-area) .catalogue-heading .eyebrow,
body[class*="theme-"]:not(.staff-area) .product-code { color: rgb(var(--theme-accent-rgb)) !important; }
body[class*="theme-light-"]:not(.staff-area) .product-card-bottom strong,
body[class*="theme-light-"]:not(.staff-area) .detail-price { color: rgb(var(--theme-brand-dark-rgb)) !important; }
body[class*="theme-"]:not(.staff-area) .detail-copy-card,
body[class*="theme-"]:not(.staff-area) .owner-reply,
body[class*="theme-"]:not(.staff-area) .info-box {
  background: rgba(var(--theme-card2-rgb), .96) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-"]:not(.staff-area) .detail-copy-card p,
body[class*="theme-"]:not(.staff-area) .review-card p,
body[class*="theme-"]:not(.staff-area) .owner-reply p,
body[class*="theme-"]:not(.staff-area) .info-box pre { color: var(--theme-muted) !important; }

/* Light theme micro-adjustments for readable dashboard and footer */
body.theme-light-royal,
body.theme-light-emerald,
body.theme-light-amber,
body.theme-light-rose,
body.theme-light-slate {
  --shadow: 0 18px 45px rgba(15, 23, 42, .11);
}
body.theme-light-royal .admin-sidebar,
body.theme-light-emerald .admin-sidebar,
body.theme-light-amber .admin-sidebar,
body.theme-light-rose .admin-sidebar,
body.theme-light-slate .admin-sidebar { box-shadow: 8px 0 24px rgba(15, 23, 42, .08) !important; }
body.theme-light-royal .admin-table th,
body.theme-light-emerald .admin-table th,
body.theme-light-amber .admin-table th,
body.theme-light-rose .admin-table th,
body.theme-light-slate .admin-table th { color: #334155 !important; }
body.theme-light-royal .metric strong,
body.theme-light-emerald .metric strong,
body.theme-light-amber .metric strong,
body.theme-light-rose .metric strong,
body.theme-light-slate .metric strong { color: #0f172a !important; }

/* When the browser accidentally caches an unstyled admin page, the fixed absolute asset URL and fallbacks in server.js repair future loads. */

/* v24: explicit high-contrast database and credential administration surfaces */
body[class*="theme-"].staff-area .database-summary-box,
body[class*="theme-"].staff-area .database-count-card {
  background: rgb(var(--theme-card2-rgb)) !important;
  border: 1px solid rgba(var(--theme-line-rgb), .62) !important;
  color: var(--theme-ink) !important;
  box-shadow: none !important;
}
body[class*="theme-"].staff-area .database-summary-box span,
body[class*="theme-"].staff-area .database-summary-box small,
body[class*="theme-"].staff-area .database-count-card span {
  color: var(--theme-muted) !important;
  opacity: 1 !important;
}
body[class*="theme-"].staff-area .database-summary-box strong,
body[class*="theme-"].staff-area .database-count-card strong {
  color: var(--theme-ink) !important;
}
body[class*="theme-"].staff-area .database-card code {
  background: rgb(var(--theme-card2-rgb)) !important;
  border: 1px solid rgba(var(--theme-line-rgb), .48) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-light-"].staff-area .database-warning {
  background: #fffbeb !important;
  border-color: #d97706 !important;
}
body[class*="theme-light-"].staff-area .database-warning strong,
body[class*="theme-light-"].staff-area .database-warning p {
  color: #78350f !important;
}
body[class*="theme-light-"].staff-area .database-danger-warning {
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
}
body[class*="theme-light-"].staff-area .database-danger-warning strong,
body[class*="theme-light-"].staff-area .database-danger-warning p {
  color: #7f1d1d !important;
}
body[class*="theme-dark-"].staff-area .database-warning {
  background: rgba(245, 158, 11, .14) !important;
  border-color: #fbbf24 !important;
}
body[class*="theme-dark-"].staff-area .database-warning strong,
body[class*="theme-dark-"].staff-area .database-warning p {
  color: #fef3c7 !important;
}
body[class*="theme-dark-"].staff-area .database-danger-warning {
  background: rgba(220, 38, 38, .18) !important;
  border-color: #f87171 !important;
}
body[class*="theme-dark-"].staff-area .database-danger-warning strong,
body[class*="theme-dark-"].staff-area .database-danger-warning p {
  color: #fee2e2 !important;
}
body[class*="theme-"].staff-area .database-card .danger {
  min-height: 42px;
  padding: 10px 14px;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 10px;
  font-weight: 900;
}

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.credentials-card { display: flex; flex-direction: column; }
.credentials-card .admin-panel-form { flex: 1; }
.credentials-card .btn { width: 100%; margin-top: auto; }
.credentials-notice,
.credentials-empty {
  margin: 0;
  padding: 12px 13px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.55;
}
body[class*="theme-"].staff-area .credentials-notice,
body[class*="theme-"].staff-area .credentials-empty {
  background: rgb(var(--theme-card2-rgb)) !important;
  border: 1px solid rgba(var(--theme-line-rgb), .56) !important;
  color: var(--theme-muted) !important;
}
.credentials-staff-panel { margin-top: 14px; }
.credentials-table td:first-child small { display: block; margin-top: 4px; }
.credentials-delete-form {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 275px;
}
.credentials-delete-form input { min-width: 0; }
.credentials-delete-form .danger {
  min-height: 40px;
  padding: 9px 11px;
  border-style: solid;
  border-width: 1px;
  border-radius: 9px;
  font-weight: 900;
  white-space: nowrap;
}
.credentials-current {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}
body[class*="theme-"].staff-area .credentials-current {
  background: rgba(var(--theme-brand-rgb), .13) !important;
  border: 1px solid rgba(var(--theme-brand-rgb), .42) !important;
  color: var(--theme-ink) !important;
}
@media (max-width: 1120px) {
  .credentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .credentials-grid { grid-template-columns: 1fr; }
  .credentials-delete-form { grid-template-columns: 1fr; min-width: 220px; }
}

/* v24: coupon administration must remain inside the admin workspace */
.coupon-admin-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}
.coupon-create-card,
.coupon-existing-panel,
.coupon-list,
.coupon-manage-card,
.coupon-edit-form { min-width: 0; }
.coupon-create-form { padding: 0 18px 18px; }
.coupon-active-check {
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
  min-height: 42px;
  margin: 0;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.coupon-active-check input { width: auto !important; margin: 0 !important; flex: 0 0 auto; }
.coupon-list { display: grid; gap: 12px; padding: 0 18px 18px; }
.coupon-manage-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 13px;
}
body[class*="theme-"].staff-area .coupon-manage-card {
  background: rgb(var(--theme-card2-rgb)) !important;
  border: 1px solid rgba(var(--theme-line-rgb), .52) !important;
  color: var(--theme-ink) !important;
}
.coupon-manage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.coupon-manage-head > div { min-width: 0; }
.coupon-manage-head strong { display: block; overflow-wrap: anywhere; }
.coupon-manage-head small { display: block; margin-top: 3px; }
.coupon-edit-form {
  display: grid;
  grid-template-columns: minmax(100px, .7fr) minmax(145px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
}
.coupon-edit-form label { min-width: 0; }
.coupon-edit-form input { min-width: 0; }
.coupon-edit-form .btn { min-height: 42px; white-space: nowrap; }
.coupon-delete-form {
  display: flex;
  justify-content: flex-end;
  padding-top: 11px;
  border-top: 1px solid rgba(var(--theme-line-rgb), .34);
}
.coupon-delete-form .danger {
  max-width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border-style: solid;
  border-width: 1px;
  overflow-wrap: anywhere;
}
@media (max-width: 1180px) {
  .coupon-admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .coupon-edit-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coupon-edit-form .coupon-active-check,
  .coupon-edit-form .btn { width: 100%; }
}
@media (max-width: 460px) {
  .coupon-list,
  .coupon-create-form { padding-left: 12px; padding-right: 12px; }
  .coupon-manage-card { padding: 12px; }
  .coupon-edit-form { grid-template-columns: 1fr; }
  .coupon-delete-form { justify-content: stretch; }
  .coupon-delete-form .danger { width: 100%; }
}

/* v25: customer header, actions, footer, reviews, video, and contrast system */
body:not(.staff-area) .topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
body:not(.staff-area) .brand { min-width: 0; flex: 1 1 auto; }
body:not(.staff-area) .brand > span:last-child { min-width: 0; }
body:not(.staff-area) .brand strong,
body:not(.staff-area) .brand small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:not(.staff-area) .brand img,
body:not(.staff-area) .brand-mark,
.preview-logo {
  border-radius: 50% !important;
  aspect-ratio: 1;
  object-fit: cover !important;
  object-position: center !important;
}
body:not(.staff-area) .top-actions {
  flex: 0 0 auto;
  min-width: 0;
}
body:not(.staff-area) .top-actions > a {
  white-space: nowrap;
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Distinct, recognizable product actions. */
.detail-action-panel .purchase-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-height: 48px;
  padding: 11px 14px !important;
  border-radius: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15;
  text-align: center;
}
.purchase-action .action-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
}
.purchase-action .action-icon svg { width: 22px; height: 22px; fill: currentColor; }
.availability-inline-form {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(150px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 330px;
}
.availability-inline-form input[type="text"],
.availability-inline-form input[name="unavailable_reason"] {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(var(--theme-line-rgb, 203,213,225), .9);
  padding: 7px 9px;
}
.availability-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 850;
  white-space: nowrap;
}
.availability-button-form {
  grid-template-columns: minmax(96px, auto) minmax(150px, 1fr) auto;
}
.availability-button-group,
.availability-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.availability-button-group form {
  margin: 0;
}
.availability-button-group {
  min-width: 250px;
}
.availability-btn {
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
}
.availability-btn.available {
  border-color: rgba(22, 163, 74, .45);
  color: #15803d;
}
.availability-btn.unavailable {
  border-color: rgba(220, 38, 38, .35);
  color: #b91c1c;
}
.availability-btn.is-current {
  box-shadow: inset 0 0 0 2px currentColor;
}
@media (max-width: 760px) {
  .availability-inline-form {
    grid-template-columns: 1fr;
    min-width: 210px;
  }
  .availability-button-group {
    min-width: 210px;
  }
}
body[class*="theme-"]:not(.staff-area) .action-add-cart,
body[class*="theme-"]:not(.staff-area) .card-action-add {
  background: #6d28d9 !important;
  border-color: #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(109,40,217,.24) !important;
}
body[class*="theme-"]:not(.staff-area) .action-order-now,
body[class*="theme-"]:not(.staff-area) .card-action-buy {
  background: #ea580c !important;
  border-color: #f97316 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(234,88,12,.24) !important;
}
body[class*="theme-"]:not(.staff-area) .action-whatsapp {
  background: #16a34a !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(22,163,74,.24) !important;
}
body[class*="theme-"]:not(.staff-area) .action-call {
  background: #0369a1 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(3,105,161,.24) !important;
}
body[class*="theme-"]:not(.staff-area) .purchase-action:hover,
body[class*="theme-"]:not(.staff-area) .card-action-add:hover,
body[class*="theme-"]:not(.staff-area) .card-action-buy:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
body[class*="theme-"]:not(.staff-area) .back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid rgba(var(--theme-line-rgb), .58);
  border-radius: 11px;
  background: rgb(var(--theme-card2-rgb)) !important;
  color: var(--theme-ink) !important;
  font-weight: 900;
}

/* Centered responsive YouTube description. */
.product-video-card {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 12px;
  border-radius: 20px;
  aspect-ratio: 16 / 9;
}
body[class*="theme-"]:not(.staff-area) .product-video-card {
  background: rgb(var(--theme-card-rgb)) !important;
  border: 1px solid rgba(var(--theme-line-rgb), .42) !important;
  box-shadow: var(--shadow) !important;
}
.product-video-card iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 13px;
}

/* Review composer first, then one vertical feedback column. */
.reviews-stack,
.review-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.review-compose-card { width: 100%; max-width: none; }
.review-form-grid { display: grid; grid-template-columns: minmax(180px, .4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.review-form-grid textarea { min-height: 112px; }
.review-submit,
.review-login-link { width: fit-content; min-width: 160px; }
body[class*="theme-"]:not(.staff-area) .review-compose-card h2,
body[class*="theme-"]:not(.staff-area) .review-compose-card label {
  color: var(--theme-ink) !important;
}
body[class*="theme-"]:not(.staff-area) .review-login-link {
  background: rgb(var(--theme-card2-rgb)) !important;
  border-color: rgba(var(--theme-line-rgb), .56) !important;
  color: var(--theme-ink) !important;
}

/* Minimal, editable footer columns. */
.streamlined-footer { margin-top: 30px; }
.footer-columns {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 30px 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  text-align: left;
}
.streamlined-footer .footer-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}
.streamlined-footer .footer-column h2 {
  margin: 0 0 5px;
  font-size: 17px;
}
.streamlined-footer .footer-column p,
.streamlined-footer .footer-column a,
.streamlined-footer .footer-column nav > span {
  margin: 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.streamlined-footer .footer-contact-column p,
.streamlined-footer .footer-contact-column a,
.streamlined-footer .footer-message-link {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.streamlined-footer .footer-custom-column nav { display: grid; gap: 9px; }
body[class*="theme-"]:not(.staff-area) .streamlined-footer .footer-column h2,
body[class*="theme-"]:not(.staff-area) .streamlined-footer .footer-column p,
body[class*="theme-"]:not(.staff-area) .streamlined-footer .footer-column a,
body[class*="theme-"]:not(.staff-area) .streamlined-footer .footer-column nav > span {
  color: var(--theme-ink) !important;
}
body[class*="theme-"]:not(.staff-area) .streamlined-footer .footer-column a {
  text-decoration: underline;
  text-decoration-color: rgba(var(--theme-brand-rgb), .42);
  text-underline-offset: 3px;
}
.streamlined-footer-bottom {
  justify-content: center !important;
  padding: 12px 20px !important;
  text-align: center !important;
}
.footer-language-row {
  display: flex;
  justify-content: center;
  padding: 12px 16px calc(76px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(var(--theme-line-rgb), .32);
}
.footer-language-form {
  width: min(360px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.footer-language-form label { font-weight: 850; }
.footer-language-form select { min-height: 42px; padding: 8px 12px; }
body[class*="theme-"]:not(.staff-area) .streamlined-footer-bottom,
body[class*="theme-"]:not(.staff-area) .footer-language-row {
  background: rgb(var(--theme-card2-rgb)) !important;
  border-color: rgba(var(--theme-line-rgb), .38) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-"]:not(.staff-area) .footer-language-form label { color: var(--theme-ink) !important; }

/* Footer column editor. */
.footer-sections-admin { display: grid; gap: 14px; margin: 16px 0; }
.footer-section-admin {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(var(--theme-line-rgb), .45);
  border-radius: 14px;
  background: rgb(var(--theme-card2-rgb));
}
.footer-section-admin-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.footer-items-admin { display: grid; gap: 9px; }
.footer-item-admin { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(180px, 1.3fr) 42px; gap: 8px; }
.footer-item-admin .danger { padding: 8px; }

/* Fixed mobile navigation: five compact non-overlapping cells. */
.customer-bottom-nav.bottom-nav { overflow: visible; }
.customer-bottom-nav .live-preorder { isolation: isolate; }
.preorder-live-dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 23px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.65);
  animation: preorderPulse 1.5s ease-out infinite;
}
@keyframes preorderPulse {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,.70); transform: scale(1); }
  70% { box-shadow: 0 0 0 9px rgba(239,68,68,0); transform: scale(1.12); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); transform: scale(1); }
}

/* Reliable cart and quantity contrast in every theme. */
body[class*="theme-"]:not(.staff-area) .qty-control,
body[class*="theme-"]:not(.staff-area) .qty-control.mini,
body[class*="theme-"]:not(.staff-area) .detail-qty {
  background: rgb(var(--theme-card2-rgb)) !important;
  border: 1px solid rgba(var(--theme-line-rgb), .66) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-"]:not(.staff-area) .qty-control button,
body[class*="theme-"]:not(.staff-area) .qty-control.mini button,
body[class*="theme-"]:not(.staff-area) .detail-qty button {
  background: rgb(var(--theme-brand-rgb)) !important;
  color: var(--theme-on-brand) !important;
  border: 1px solid rgba(var(--theme-brand-dark-rgb), .48) !important;
}
body[class*="theme-"]:not(.staff-area) .qty-control span,
body[class*="theme-"]:not(.staff-area) .qty-control.mini span,
body[class*="theme-"]:not(.staff-area) .detail-qty span {
  color: var(--theme-ink) !important;
  background: transparent !important;
}

body:not(.staff-area) { padding-bottom: 0; }
@media (max-width: 899px) {
  .footer-columns { grid-template-columns: 1fr; gap: 22px; padding: 24px 16px; }
  .footer-column-empty { display: none !important; }
  .review-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body:not(.staff-area) .topbar { padding: 8px 10px !important; }
  body:not(.staff-area) .brand { gap: 8px; }
  body:not(.staff-area) .brand img,
  body:not(.staff-area) .brand-mark { width: 38px !important; height: 38px !important; flex: 0 0 38px; }
  body:not(.staff-area) .brand strong { font-size: 14px; }
  body:not(.staff-area) .brand small { font-size: 10px; max-width: 46vw; }
  body:not(.staff-area) .top-actions > a { min-height: 34px !important; padding: 7px 9px !important; font-size: 11px !important; max-width: 92px; }
  .detail-action-panel { grid-template-columns: 1fr !important; }
  .review-submit,
  .review-login-link { width: 100%; }
  .footer-section-admin-head,
  .footer-item-admin { grid-template-columns: 1fr; }
  .footer-item-admin .danger { width: 100%; min-height: 38px; }
  .customer-bottom-nav.bottom-nav {
    padding: 4px max(3px, env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(3px, env(safe-area-inset-right)) !important;
  }
  .customer-bottom-nav a {
    min-width: 0;
    min-height: 48px !important;
    padding: 4px 1px !important;
    gap: 1px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
  .customer-bottom-nav .nav-icon { width: 19px; height: 19px; }
  .customer-bottom-nav .nav-icon svg { width: 18px !important; height: 18px !important; }
  .customer-bottom-nav em[data-cart-count] {
    top: 2px;
    right: calc(50% - 20px);
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    font-size: 8px;
  }
  .preorder-live-dot { top: 2px; right: calc(50% - 19px); width: 7px; height: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .preorder-live-dot { animation: none; box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
}

/* v28: compact commerce navigation inspired by category-first storefronts */
.store-header { width: 100%; }
.mobile-store-header { display: none; }
.desktop-store-header {
  width: min(1320px, 100%);
  min-width: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}
.desktop-brand img,
.desktop-brand .brand-mark { width: 38px !important; height: 38px !important; flex: 0 0 38px; }
.desktop-brand strong { font-size: 14px !important; }
.desktop-brand small { font-size: 10px !important; }
.desktop-store-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
}
.desktop-store-nav a {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desktop-store-nav a:hover,
.desktop-store-nav a.active { background: rgba(var(--theme-brand-rgb), .12); color: var(--theme-ink); }
.desktop-store-nav .live-preorder-link { padding-right: 18px; }
.desktop-store-nav .live-preorder-link i {
  position: absolute;
  right: 6px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  animation: preorderPulse 1.5s ease-out infinite;
}
.desktop-store-actions { display: flex; align-items: center; gap: 7px; }
.desktop-store-actions a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--theme-line-rgb), .42);
  border-radius: 9px;
  background: rgb(var(--theme-card2-rgb));
  color: var(--theme-ink);
  font-size: 12px;
  font-weight: 850;
}
.desktop-icon-action { width: 36px; padding: 0; }
.desktop-account-link { padding: 7px 10px; }
.desktop-cart-link { gap: 5px; padding: 6px 9px; }
.desktop-store-actions svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.desktop-cart-link span {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgb(var(--theme-brand-rgb));
  color: var(--theme-on-brand);
  font-size: 10px;
}

/* Category drawer */
.store-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
  pointer-events: none;
}
.store-drawer-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(2, 6, 23, .58);
  opacity: 0;
  transition: opacity .2s ease;
}
.store-drawer-panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(340px, 88vw);
  display: flex;
  flex-direction: column;
  background: rgb(var(--theme-card-rgb));
  color: var(--theme-ink);
  border-right: 1px solid rgba(var(--theme-line-rgb), .48);
  box-shadow: 24px 0 60px rgba(2,6,23,.32);
  transform: translateX(-102%);
  transition: transform .22s ease;
  overflow: hidden;
}
body.store-menu-open { overflow: hidden; }
body.store-menu-open .store-drawer { visibility: visible; pointer-events: auto; }
body.store-menu-open .store-drawer-scrim { opacity: 1; }
body.store-menu-open .store-drawer-panel { transform: translateX(0); }
.store-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(var(--theme-line-rgb), .36);
}
.store-drawer-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.store-drawer-brand img,
.store-drawer-brand .brand-mark { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; object-fit: cover; }
.store-drawer-brand strong,
.store-drawer-brand small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.store-drawer-brand strong { color: var(--theme-ink); font-size: 14px; }
.store-drawer-brand small { color: var(--theme-muted); font-size: 10px; margin-top: 2px; }
.store-drawer-head > button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--theme-line-rgb), .48);
  border-radius: 9px;
  background: rgb(var(--theme-card2-rgb));
  color: var(--theme-ink);
  font-size: 23px;
  line-height: 1;
}
.store-drawer-categories {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 10px 14px;
}
.store-drawer-categories p {
  margin: 9px 8px;
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.store-drawer-categories a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--theme-ink);
  font-size: 13px;
  font-weight: 750;
}
.store-drawer-categories a:hover { background: rgba(var(--theme-brand-rgb), .10); }
.store-drawer-categories a small {
  min-width: 24px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgb(var(--theme-card2-rgb));
  color: var(--theme-muted);
  text-align: center;
}
.store-drawer-categories .drawer-preorder-link { color: #dc2626; }
body[class*="theme-dark-"] .store-drawer-categories .drawer-preorder-link { color: #fca5a5; }
.store-drawer-utility {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-top: 1px solid rgba(var(--theme-line-rgb), .36);
}
.store-drawer-utility a { padding: 9px 10px; border-radius: 8px; color: var(--theme-muted); font-size: 12px; font-weight: 800; }
.store-drawer-utility a:hover { background: rgb(var(--theme-card2-rgb)); color: var(--theme-ink); }

/* Page search and category controls are compact and scroll with content. */
.store-search-section { margin: 2px 0 8px; scroll-margin-top: 64px; }
.store-search-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(var(--theme-line-rgb), .38);
  border-radius: 13px;
  background: rgb(var(--theme-card-rgb));
}
.store-search-input {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(var(--theme-line-rgb), .44);
  border-radius: 9px;
  background: rgb(var(--theme-card2-rgb));
}
.store-search-input input { min-width: 0; height: 36px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.store-search-form select { min-height: 38px; padding: 7px 9px; border-radius: 9px; }
.store-search-form .btn { min-height: 38px; padding: 8px 13px; border-radius: 9px; }
body:not(.staff-area) .storefront-shell,
body:not(.staff-area) .category-only-shell {
  position: static !important;
  top: auto !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 5px 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body:not(.staff-area) .category-tabs { gap: 6px !important; }
body:not(.staff-area) .category-tab { min-height: 34px !important; padding: 6px 10px !important; font-size: 11px !important; border-radius: 9px !important; }

/* Floating cart quantity and value, available on both layouts. */
.floating-cart-summary {
  position: fixed;
  z-index: 68;
  top: 52%;
  right: auto;
  left: 10px;
  transform: translateY(-50%) translateX(-130%);
  width: 142px;
  min-height: 52px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(var(--theme-brand-rgb), .52);
  border-radius: 0 13px 13px 0;
  background: rgb(var(--theme-card-rgb));
  color: var(--theme-ink);
  box-shadow: 0 14px 34px rgba(2,6,23,.24);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.floating-cart-summary.has-items { transform: translateY(-50%) translateX(0); opacity: 1; pointer-events: auto; }
.floating-cart-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgb(var(--theme-brand-rgb));
  color: var(--theme-on-brand);
}
.floating-cart-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.floating-cart-copy { min-width: 0; }
.floating-cart-copy strong,
.floating-cart-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.floating-cart-copy strong { color: var(--theme-ink); font-size: 11px; }
.floating-cart-copy small { margin-top: 2px; color: rgb(var(--theme-brand-rgb)); font-size: 12px; font-weight: 950; }

@media (min-width: 900px) {
  body:not(.staff-area) .store-header {
    position: sticky !important;
    top: 0 !important;
    min-height: 54px !important;
    padding: 7px 14px !important;
    z-index: 70;
  }
  .customer-bottom-nav.bottom-nav { display: none !important; }
  body:not(.staff-area) { padding-bottom: 0 !important; }
  .footer-language-row { padding-bottom: 14px !important; }
}

@media (max-width: 899px) {
  body:not(.staff-area) .store-header {
    position: relative !important;
    top: auto !important;
    min-height: 48px !important;
    padding: 5px 8px !important;
    z-index: 30;
    backdrop-filter: none !important;
  }
  .desktop-store-header { display: none !important; }
  .mobile-store-header {
    position: relative;
    width: 100%;
    height: 38px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
  }
  .mobile-header-brand {
    justify-self: center;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
  }
  .mobile-header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .mobile-header-brand img,
  .mobile-header-brand .brand-mark { width: 36px !important; height: 36px !important; border-radius: 50% !important; object-fit: cover; }
  .mobile-header-button {
    position: relative;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--theme-ink) !important;
    box-shadow: none !important;
  }
  .mobile-header-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-header-auth svg { fill: none; }
  .mobile-header-auth[aria-label="Open profile"] svg { fill: currentColor; stroke: none; }
  .mobile-header-cart span {
    position: absolute;
    top: -1px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgb(var(--theme-brand-rgb));
    color: var(--theme-on-brand);
    font-size: 8px;
    font-weight: 950;
  }
  body:not(.staff-area) .page { padding-top: 8px !important; }
  .store-search-form { grid-template-columns: minmax(0, 1fr) auto; padding: 6px; gap: 6px; }
  .store-search-form select { grid-column: 1 / -1; grid-row: 2; min-height: 34px; }
  .store-search-input input { height: 34px; }
  .store-search-form .btn { min-height: 36px; padding: 7px 10px; }
  .customer-bottom-nav.bottom-nav {
    display: grid !important;
    min-height: 52px !important;
    padding-top: 3px !important;
    padding-bottom: calc(3px + env(safe-area-inset-bottom)) !important;
  }
  .customer-bottom-nav a,
  .customer-bottom-nav button {
    min-height: 44px !important;
    padding: 3px 1px !important;
    font-size: 9px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 0 !important;
  }
  .customer-bottom-nav .nav-icon { width: 18px !important; height: 18px !important; }
  .customer-bottom-nav .nav-icon svg { width: 18px !important; height: 18px !important; }
  .footer-language-row { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
  .floating-cart-summary {
    right: auto;
    left: 4px;
    width: 94px;
    min-height: 46px;
    grid-template-columns: 30px 1fr;
    gap: 6px;
    padding: 6px;
    border-radius: 0 12px 12px 0;
  }
  .floating-cart-icon { width: 29px; height: 32px; border-radius: 8px; }
  .floating-cart-icon svg { width: 18px; height: 18px; }
  .floating-cart-copy strong { font-size: 9px; }
  .floating-cart-copy small { font-size: 10px; }
  .whatsapp-float { bottom: calc(62px + env(safe-area-inset-bottom)) !important; }
}

.profile-logout-form { margin-top: 14px; }
.profile-logout-form .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .store-drawer-scrim,
  .store-drawer-panel,
  .floating-cart-summary { transition: none; }
  .desktop-store-nav .live-preorder-link i { animation: none; }
}

/* v29: responsive ecommerce layout and always-visible cart tab */
body.theme-light-amber {
  --theme-bg-rgb: 255, 251, 247;
  --theme-bg2-rgb: 255, 247, 237;
  --theme-card-rgb: 255, 255, 255;
  --theme-card2-rgb: 255, 250, 245;
  --theme-line-rgb: 226, 213, 199;
  --theme-brand-rgb: 249, 115, 22;
  --theme-brand-dark-rgb: 194, 65, 12;
  --theme-accent-rgb: 234, 88, 12;
  --theme-ink: #172033;
  --theme-muted: #667085;
  --theme-on-brand: #ffffff;
  --theme-page-bg: linear-gradient(180deg, #fff 0%, #fffaf5 44%, #fff 100%);
}

body:not(.staff-area) .page {
  width: min(1480px, 100%);
  padding-inline: clamp(10px, 2.2vw, 30px);
}

.store-search-form {
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: 920px;
  margin-inline: auto;
}

.floating-cart-summary,
.floating-cart-summary.has-items {
  top: 50%;
  right: auto;
  left: 0;
  width: 40px;
  min-width: 40px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 2px 1px 3px;
  overflow: hidden;
  border: 1px solid rgba(var(--theme-brand-dark-rgb), .35);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: rgb(var(--theme-brand-rgb));
  box-shadow: 0 8px 20px rgba(var(--theme-brand-rgb), .26);
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

.floating-cart-main {
  width: 22px;
  height: 22px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  color: var(--theme-on-brand);
}

.floating-cart-icon {
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: transparent;
  color: var(--theme-on-brand);
  box-shadow: none;
}

.floating-cart-icon svg { width: 14px; height: 14px; }
.floating-cart-summary > small {
  width: auto;
  min-width: 32px;
  min-height: 11px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--theme-on-brand);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}
.floating-cart-summary:hover { box-shadow: 0 10px 24px rgba(var(--theme-brand-rgb), .34); }

@media (min-width: 1200px) {
  .product-grid-v11,
  .centered-products { grid-template-columns: repeat(auto-fit, minmax(250px, 310px)); }
}

@media (min-width: 460px) and (max-width: 899px) {
  .product-grid-v11,
  .centered-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  body:not(.staff-area) .page { padding-inline: 10px !important; }
  .store-search-form { grid-template-columns: minmax(0, 1fr) auto; }
  .store-search-form .btn { width: auto; }
  .category-tabs-compact { padding-right: 12px !important; }
  .product-card-bottom { align-items: flex-start; flex-direction: column; }
  .product-actions-v11 { width: 100%; justify-content: stretch; }
  .product-actions-v11 .btn { flex: 1 1 120px; }
  .floating-cart-summary,
  .floating-cart-summary.has-items {
    right: auto;
    left: 0;
    width: 36px;
    min-width: 36px;
    min-height: 0;
  }
  .floating-cart-main { min-height: 0; padding: 0; }
  .floating-cart-summary > small { min-height: 11px; font-size: 8px; }
}

@media (max-width: 459px) {
  .product-grid-v11,
  .centered-products { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 360px) {
  .store-search-form { grid-template-columns: 1fr; }
  .store-search-form .btn { width: 100%; }
  .mobile-store-header { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .floating-cart-summary,
  .floating-cart-summary.has-items { width: 34px; min-width: 34px; }
}

/* v30: clean, single-surface storefront search */
.store-search-section { margin: 4px 0 14px; }
.store-search-form {
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.store-search-input {
  min-height: 48px;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #ded6ce;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(23, 32, 51, .06);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.store-search-input:focus-within {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .14), 0 6px 18px rgba(23, 32, 51, .08);
}
.store-search-input svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: #667085;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[class*="theme-"] .store-search-input input,
body[class*="theme-"] .store-search-input input:focus {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--theme-ink) !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
body[class*="theme-"] .store-search-input input::placeholder {
  color: #8a94a6 !important;
  opacity: 1;
}
.store-search-form .btn {
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(249, 115, 22, .22);
}

@media (max-width: 599px) {
  .store-search-section { margin-bottom: 10px; }
  .store-search-form { padding: 0; gap: 7px; }
  .store-search-input { min-height: 44px; padding: 0 11px; border-radius: 10px; }
  body[class*="theme-"] .store-search-input input,
  body[class*="theme-"] .store-search-input input:focus { height: 42px; font-size: 14px; }
  .store-search-form .btn { min-height: 44px; padding: 8px 13px; border-radius: 10px; }
}

/* v31: card-wide detail links and professional product detail layout */
.product-card-v11 {
  position: relative;
  cursor: pointer;
}
.product-card-detail-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.product-card-detail-link:focus-visible {
  outline: 3px solid rgba(249, 115, 22, .42);
  outline-offset: 3px;
}
.product-card-v11 .media-arrow,
.product-card-v11 .product-actions-v11,
.product-card-v11 .product-actions-v11 button,
.product-card-v11 .product-actions-v11 a {
  position: relative;
  z-index: 3;
}

.product-detail-v11 {
  width: min(1280px, 100%);
  max-width: 1280px;
  margin: 8px auto 34px;
  padding: clamp(16px, 2vw, 28px);
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: clamp(24px, 3vw, 48px);
  border-radius: 18px !important;
  align-items: start;
}
.detail-gallery {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: visible;
}
.detail-gallery.single-media { grid-template-columns: minmax(0, 1fr); }
.detail-thumbnails {
  display: flex;
  flex-direction: row;
  gap: 10px;
  min-width: 0;
  width: 100%;
  padding: 10px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid rgba(var(--theme-line-rgb), .5);
  border-top: 0;
  border-radius: 0 0 14px 14px;
}
.detail-thumbnail {
  flex: 0 0 62px;
  width: 62px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(var(--theme-line-rgb), .58);
  border-radius: 9px;
  background: #fff;
  color: var(--theme-muted);
  cursor: pointer;
}
.detail-thumbnail.active {
  border: 2px solid #f97316;
  padding: 3px;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, .1);
}
.detail-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.detail-stage {
  position: relative;
  min-width: 0;
  display: grid;
}
body[class*="theme-"] .product-detail-v11 .detail-photo {
  width: 100%;
  min-height: 0;
  height: clamp(300px, 45vw, 390px);
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid rgba(var(--theme-line-rgb), .5) !important;
  border-radius: 14px 14px 0 0;
  background: #fff !important;
  box-shadow: none !important;
}
.detail-gallery.single-media .detail-photo { border-radius: 14px; }
.product-detail-v11 .detail-photo img,
.product-detail-v11 .detail-photo video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  background: #fff;
}
.detail-stage .media-arrow {
  width: 34px;
  height: 42px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  color: #f97316;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
}
.product-detail-info-v11 { min-width: 0; padding-top: 4px; }
.product-detail-info-v11 .eyebrow { margin-bottom: 8px; }
body[class*="theme-"] .product-detail-info-v11 h1 {
  margin: 0 0 10px;
  font-size: clamp(25px, 2.4vw, 38px);
  line-height: 1.15;
}
.product-detail-info-v11 .lead { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.product-detail-info-v11 .rating-line { margin: 8px 0 0; }
.product-detail-info-v11 .detail-price {
  margin: 18px 0;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(var(--theme-line-rgb), .46);
  font-size: clamp(27px, 3vw, 38px);
  color: #ea580c !important;
}
.detail-action-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.detail-action-panel .purchase-action { min-width: 0; min-height: 46px; border-radius: 7px !important; }
body[class*="theme-"]:not(.staff-area) .action-add-cart {
  background: #f97316 !important;
  border-color: #f97316 !important;
  box-shadow: 0 8px 18px rgba(249, 115, 22, .2) !important;
}
body[class*="theme-"]:not(.staff-area) .action-order-now {
  background: #052f2c !important;
  border-color: #052f2c !important;
  box-shadow: 0 8px 18px rgba(5, 47, 44, .18) !important;
}
body[class*="theme-"]:not(.staff-area) .action-call {
  background: #26439a !important;
  border-color: #26439a !important;
}
.product-detail-section-v11 { width: min(1280px, 100%); max-width: 1280px; }
.product-detail-section-v11 .section-head { margin-bottom: 10px; }
.product-detail-section-v11 .detail-copy-card { border-radius: 12px !important; }

@media (max-width: 899px) {
  .product-actions-v11 .card-action-buy { display: none !important; }
  .product-detail-v11 {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 12px;
    margin-top: 4px;
    border-radius: 14px !important;
  }
  .detail-gallery { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
  .detail-thumbnail { width: 56px; height: 56px; border-radius: 7px; }
  .product-detail-info-v11 { padding: 0 2px 4px; }
  body[class*="theme-"] .product-detail-info-v11 h1 { font-size: clamp(22px, 5vw, 28px); }
  .product-detail-info-v11 .detail-price { margin: 14px 0; padding-bottom: 14px; font-size: 27px; }
  .detail-action-panel { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .detail-action-panel .purchase-action {
    min-height: 44px;
    padding: 9px 7px !important;
    gap: 6px !important;
    font-size: 12px;
  }
  .purchase-action .action-icon,
  .purchase-action .action-icon svg { width: 18px; height: 18px; flex-basis: 18px; }
}

@media (max-width: 380px) {
  .detail-gallery { grid-template-columns: 48px minmax(0, 1fr); gap: 7px; }
  .detail-thumbnail { width: 48px; height: 48px; }
  .detail-action-panel .purchase-action { font-size: 11px; }
}

/* v32: promotional homepage banners, language switch, preorder media sizing */
.home-banner-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(260px, 1fr);
  gap: 16px;
  width: min(1280px, 100%);
  margin: 0 auto 16px;
}
.home-banner-main,
.home-banner-side {
  position: relative;
  min-width: 0;
  height: clamp(270px, 28vw, 410px);
  overflow: hidden;
  border-radius: 14px;
  background: #172033;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .13);
}
.home-banner-main { isolation: isolate; }
.home-banner-main::after {
  background: linear-gradient(90deg, rgba(4, 18, 17, .78), rgba(4, 18, 17, .34) 52%, rgba(4, 18, 17, .08));
}
.home-banner-main .hero-slide,
.home-banner-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-banner-copy {
  position: absolute;
  z-index: 3;
  left: clamp(24px, 5vw, 72px);
  bottom: clamp(36px, 6vw, 74px);
  width: min(560px, calc(100% - 90px));
  color: #fff;
}
.home-banner-copy p {
  margin: 0 0 7px;
  color: #fed7aa;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.home-banner-copy h1 {
  margin: 0;
  max-width: 520px;
  color: #fff;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .35);
}
.home-banner-copy > span { display: block; max-width: 500px; margin-top: 10px; color: #f8fafc; font-size: 14px; line-height: 1.45; }
.home-banner-copy > a {
  display: inline-flex;
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #f97316;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(249, 115, 22, .28);
}
.home-banner-main .hero-arrow { border: 0; border-radius: 7px; background: rgba(255,255,255,.92); color: #ea580c; }
.home-banner-main .hero-dots { right: auto; left: clamp(24px, 5vw, 72px); justify-content: flex-start; }
.home-banner-main .hero-dots button.active { width: 22px; background: #f97316; }
.home-banner-side::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(4,18,17,.78)); }
.home-banner-side span { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; color: #fff; }
.home-banner-side small,
.home-banner-side strong { display: block; }
.home-banner-side small { color: #fed7aa; font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.home-banner-side strong { margin-top: 3px; font-size: clamp(21px, 2vw, 30px); }

.compact-preorders .preorder-card { max-width: 320px; }
.compact-preorders .product-media-v11,
.compact-preorders .preorder-media {
  width: 100%;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden;
}
.compact-preorders .product-media-v11 img,
.compact-preorders .preorder-media img { width: 100%; height: 100%; object-fit: cover; }
.preorder-list-page .preorder-card { max-width: 320px; }
.preorder-list-page .preorder-media {
  width: 100%;
  height: auto;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden;
}
.preorder-list-page .preorder-media img { width: 100%; height: 100%; object-fit: cover; }
.preorder-detail-photo { min-height: 0 !important; aspect-ratio: 4 / 3; }
.preorder-detail-photo img { width: 100%; height: 100%; object-fit: cover; }

.footer-language-row { display: flex; justify-content: center; }
.footer-language-form.language-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
}
.language-switch-label { color: var(--theme-muted); font-size: 12px; font-weight: 850; }
.language-switch-track {
  position: relative;
  width: 190px;
  height: 42px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(var(--theme-line-rgb), .62);
  border-radius: 999px;
  background: rgb(var(--theme-card-rgb));
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, .08);
}
.language-switch-thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: 32px;
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 4px 12px rgba(249, 115, 22, .25);
  transition: transform .22s ease;
}
.language-switch.is-bn .language-switch-thumb { transform: translateX(100%); }
.language-switch-track button {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.language-switch.is-en button[value="en"],
.language-switch.is-bn button[value="bn"] { color: #fff; }

@media (max-width: 899px) {
  .home-banner-layout { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 14px; }
  .home-banner-side { display: none; }
  .home-banner-main { height: auto; aspect-ratio: 1.75 / 1; border-radius: 10px; }
  .home-banner-copy { left: 42px; bottom: 38px; width: calc(100% - 84px); }
  .home-banner-copy p { font-size: 9px; margin-bottom: 4px; }
  .home-banner-copy h1 { font-size: clamp(22px, 7vw, 38px); }
  .home-banner-copy > span { display: none; }
  .home-banner-copy > a { margin-top: 10px; padding: 7px 11px; font-size: 10px; }
  .home-banner-main .hero-dots { left: 42px; bottom: 12px; }
  .home-banner-main .hero-arrow { width: 30px; height: 34px; }
  .home-banner-main .hero-arrow.prev { left: 6px; }
  .home-banner-main .hero-arrow.next { right: 6px; }
}

@media (max-width: 480px) {
  .home-banner-main { aspect-ratio: 1.6 / 1; }
  .home-banner-copy { bottom: 34px; }
  .home-banner-copy h1 { font-size: clamp(20px, 7vw, 30px); }
  .footer-language-form.language-switch { flex-direction: column; gap: 8px; }
}

/* v33: product image zoom and legible banner copy */
.product-card-v11 .product-media-v11 img,
.product-card-v11 .item-photo img,
.preorder-card .preorder-media img {
  transition: transform .38s cubic-bezier(.2, .75, .25, 1);
  transform-origin: center;
  will-change: transform;
}
.product-card-v11:hover .product-media-v11 img,
.product-card-v11:focus-within .product-media-v11 img,
.preorder-card:hover .preorder-media img,
.preorder-card:focus-within .preorder-media img { transform: scale(1.055); }
.product-card-v11:active .product-media-v11 img,
.preorder-card:active .preorder-media img { transform: scale(1.08); }

.product-detail-v11 .detail-photo { cursor: zoom-in; }
.product-detail-v11 .zoomable-product-image {
  transition: transform .38s cubic-bezier(.2, .75, .25, 1);
  transform-origin: center;
  will-change: transform;
}
.product-detail-v11 .detail-photo.is-image-zoomed { cursor: zoom-out; }
.product-detail-v11 .detail-photo.is-image-zoomed .zoomable-product-image.active { transform: scale(1.24); }

.home-banner-main {
  background:
    radial-gradient(circle at 82% 18%, rgba(251, 146, 60, .46), transparent 30%),
    linear-gradient(135deg, #fff7ed, #fed7aa 55%, #fdba74);
}
.home-banner-main .hero-slide.is-unavailable { visibility: hidden; }
.home-banner-copy {
  width: min(540px, calc(100% - 100px));
  padding: clamp(16px, 2.3vw, 28px);
  border: 2px solid rgba(255, 255, 255, .96);
  border-left: 5px solid #f97316;
  border-radius: 13px;
  background: rgba(255, 255, 255, .9);
  color: #172033;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .22);
  backdrop-filter: blur(8px);
}
.home-banner-copy p { color: #c2410c; }
.home-banner-copy h1 {
  color: #172033;
  font-size: clamp(28px, 3.5vw, 50px);
  text-shadow: none;
}
.home-banner-copy > span { color: #475467; }
.home-banner-side { background: linear-gradient(135deg, #ffedd5, #fdba74); }
.home-banner-side img[aria-hidden="true"] { color: transparent; }

@media (max-width: 899px) {
  .home-banner-copy {
    width: calc(100% - 84px);
    padding: 12px 14px;
    border-width: 1px;
    border-left-width: 4px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .9);
  }
  .home-banner-copy h1 { font-size: clamp(19px, 5.6vw, 30px); }
}

@media (prefers-reduced-motion: reduce) {
  .product-card-v11 img,
  .preorder-card img,
  .product-detail-v11 .zoomable-product-image { transition: none; }
}

/* v34: compact dashboard and complete global theme propagation */
.home-banner-side::after { display: none; }
.dashboard-screen { gap: 8px !important; }
.dashboard-screen > .admin-content-head {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 7px 10px !important;
}
.dashboard-screen > .admin-content-head h2 { font-size: 16px !important; }
.dashboard-screen > .admin-content-head p { margin-top: 1px !important; font-size: 10px !important; line-height: 1.25; }
.staff-area .admin-metrics {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  gap: clamp(2px, .5vw, 8px) !important;
  margin: 0 !important;
}
.staff-area .admin-metrics .metric {
  min-width: 0;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: clamp(4px, .7vw, 10px) 3px !important;
  overflow: hidden;
  border-radius: 9px !important;
  text-align: center;
}
.staff-area .admin-metrics .metric span {
  width: 100%;
  color: var(--theme-muted) !important;
  font-size: clamp(6px, .72vw, 10px) !important;
  line-height: 1.12;
  font-weight: 850;
  overflow: hidden;
}
.staff-area .admin-metrics .metric strong {
  max-width: 100%;
  color: var(--theme-ink) !important;
  font-size: clamp(8px, 1.15vw, 18px) !important;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-variant-numeric: tabular-nums;
}
.dashboard-screen > .admin-panel { padding: 0 !important; }
.dashboard-screen > .admin-panel .admin-section-title.compact { padding: 9px 11px !important; }
.dashboard-screen > .admin-panel .admin-table { min-width: 520px; }
.dashboard-screen > .admin-panel .admin-table th,
.dashboard-screen > .admin-panel .admin-table td { padding: 7px 9px !important; }

/* v49 production admin dashboard and realtime order polish */
.dashboard-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: start; }
.recent-customer-list { display: grid; gap: 10px; padding: 14px; }
.recent-customer-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; border: 1px solid rgba(var(--theme-line-rgb), .24); border-radius: 16px; background: rgba(var(--theme-card2-rgb), .48); color: inherit; }
.recent-customer-row strong, .recent-customer-row small { display: block; }
.recent-customer-row small { color: var(--theme-muted); margin-top: 3px; }
[data-live-orders] [data-order-id] { transition: background .25s ease, transform .25s ease; }
[data-live-orders] [data-order-id]:first-child { animation: liveOrderPulse 1.2s ease; }
@keyframes liveOrderPulse { 0% { background: rgba(var(--theme-brand-rgb), .18); transform: translateY(-2px); } 100% { background: transparent; transform: translateY(0); } }
@media (max-width: 920px) { .dashboard-grid { grid-template-columns: 1fr; } }

body[class*="theme-"] .floating-cart-summary { background: rgb(var(--theme-brand-rgb)); }
body[class*="theme-"] .floating-cart-icon { background: transparent; }
body[class*="theme-"] .language-switch-thumb { background: rgb(var(--theme-brand-rgb)); }
body[class*="theme-"] .floating-cart-summary > small { color: var(--theme-on-brand); }
body[class*="theme-"] .store-search-input:focus-within {
  border-color: rgb(var(--theme-brand-rgb));
  box-shadow: 0 0 0 3px rgba(var(--theme-brand-rgb), .14), 0 6px 18px rgba(23, 32, 51, .08);
}
body[class*="theme-"] .home-banner-main .hero-arrow { color: rgb(var(--theme-brand-dark-rgb)); }
body[class*="theme-"] .home-banner-main .hero-dots button.active { background: rgb(var(--theme-brand-rgb)); }
body[class*="theme-"] .product-card-v11:hover { border-color: rgba(var(--theme-brand-rgb), .5) !important; }
body[class*="theme-"]:not(.staff-area) .action-add-cart {
  background: rgb(var(--theme-brand-rgb)) !important;
  border-color: rgb(var(--theme-brand-rgb)) !important;
  color: var(--theme-on-brand) !important;
}
body[class*="theme-"]:not(.staff-area) .action-order-now {
  background: rgb(var(--theme-brand-dark-rgb)) !important;
  border-color: rgb(var(--theme-brand-dark-rgb)) !important;
  color: var(--theme-on-brand) !important;
}

body[class*="theme-"].staff-area .admin-modal-dialog,
body[class*="theme-"].staff-area .admin-modal-head,
body[class*="theme-"].staff-area .admin-modal-actions,
body[class*="theme-"].staff-area .settings-savebar {
  background: rgb(var(--theme-card-rgb)) !important;
  border-color: rgba(var(--theme-line-rgb), .42) !important;
  color: var(--theme-ink) !important;
}
body[class*="theme-"].staff-area .admin-modal-head h2,
body[class*="theme-"].staff-area .admin-modal-media h3,
body[class*="theme-"].staff-area .admin-modal-body label { color: var(--theme-ink) !important; }
body[class*="theme-"].staff-area .media-admin-row {
  background: rgb(var(--theme-card2-rgb)) !important;
  border-color: rgba(var(--theme-line-rgb), .38) !important;
}

@media (max-width: 700px) {
  .dashboard-screen > .admin-content-head p { display: none; }
  .staff-area .admin-metrics .metric { min-height: 48px; gap: 3px; padding-inline: 1px !important; }
  .staff-area .admin-metrics .metric span { font-size: 0 !important; white-space: nowrap; }
  .staff-area .admin-metrics .metric span::after {
    content: attr(data-short);
    font-size: clamp(5px, 1.65vw, 8px);
    line-height: 1;
  }
  .staff-area .admin-metrics .metric strong { font-size: clamp(7px, 2.2vw, 11px) !important; }
}

/* v35: compact mobile catalogue, professional cart, auth actions and live admin badges */
.desktop-brand img,
.desktop-brand .brand-mark {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
}
.desktop-brand strong {
  max-width: 240px !important;
  font-size: 19px !important;
  line-height: 1.1;
}

.auth-card-polished { max-width: 560px; }
.auth-primary-actions {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(190px, 1.2fr);
  gap: 10px;
  margin-top: 2px;
}
.auth-primary-actions .btn { width: 100%; min-height: 48px; }
.continue-guest { margin-top: 12px; }
body:not(.staff-area) .register-prompt a {
  min-width: 128px;
  border: 2px solid rgb(var(--theme-brand-rgb));
  background: rgb(var(--theme-brand-rgb)) !important;
  color: var(--theme-on-brand) !important;
  box-shadow: 0 8px 20px rgba(var(--theme-brand-rgb), .28);
  text-align: center;
  text-decoration: none;
}

.cart-panel,
.cart-footer-card {
  border: 1px solid rgba(var(--theme-line-rgb), .38) !important;
  background: rgb(var(--theme-card-rgb)) !important;
  color: var(--theme-ink) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .09) !important;
}
.cart-panel { overflow: hidden; border-radius: 20px; }
.cart-column-head,
.cart-row {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) 110px 150px 110px 88px !important;
  gap: 16px !important;
  align-items: center !important;
}
.cart-column-head {
  padding: 12px 18px;
  background: rgba(var(--theme-brand-rgb), .09);
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cart-panel .cart-list { gap: 0; }
.cart-panel .cart-row {
  border: 0 !important;
  border-top: 1px solid rgba(var(--theme-line-rgb), .28) !important;
  border-radius: 0 !important;
  padding: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.cart-item-name strong { color: var(--theme-ink); font-size: 16px; }
.cart-rate strong,
.cart-line-total { color: var(--theme-ink); font-variant-numeric: tabular-nums; }
.cart-rate small { display: block; margin-top: 2px; color: var(--theme-muted); }
.cart-panel .qty-control {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(var(--theme-line-rgb), .48);
  background: rgb(var(--theme-card2-rgb));
  border-radius: 12px;
}
.cart-panel .qty-control button {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(var(--theme-brand-rgb), .12);
  color: rgb(var(--theme-brand-dark-rgb));
  font-size: 18px;
  line-height: 1;
  touch-action: manipulation;
}
.cart-panel .qty-control span { min-width: 30px; text-align: center; color: var(--theme-ink); font-weight: 900; }
.cart-panel .remove-btn { padding: 8px 10px; font-size: 12px; }
.contact-seller-btn { width: fit-content; margin: 6px auto 0; justify-self: center; }
body:not(.staff-area) .btn-whatsapp {
  background: #20b858 !important;
  border-color: #20b858 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(32, 184, 88, .24) !important;
}

.admin-menu a b { min-width: 0; flex: 1; font-weight: inherit; }
.admin-nav-count {
  min-width: 21px;
  height: 21px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #303945;
  color: #a9b5c5;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}
.admin-nav-count.has-count {
  background: #ff5f45;
  color: #fff;
  animation: admin-count-pulse 1.35s ease-in-out infinite;
}
@keyframes admin-count-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 95, 69, .05); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px rgba(255, 95, 69, .16); transform: scale(1.06); }
}

@media (max-width: 899px) {
  body:not(.staff-area) .store-header { min-height: 58px !important; padding: 6px 9px !important; }
  .mobile-store-header { height: 46px !important; }
  .mobile-header-brand {
    justify-self: center;
    width: min(100%, 290px) !important;
    height: 46px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
  }
  .mobile-header-brand img,
  .mobile-header-brand .brand-mark {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
  }
  .mobile-header-brand strong {
    min-width: 0;
    max-width: 220px;
    overflow: hidden;
    color: var(--theme-ink);
    font-size: clamp(17px, 5vw, 22px);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* v45: single-row mobile identity bar and persistent customer/shop conversations */
@media (max-width: 899px) {
  body:not(.staff-area) .store-header {
    min-height: 50px !important;
    padding: 4px 8px !important;
  }
  .mobile-store-header {
    width: 100%;
    height: 42px !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) max-content !important;
    align-items: center;
    gap: 5px;
  }
  .mobile-header-brand {
    width: auto !important;
    max-width: 100% !important;
    height: 42px !important;
    min-width: 0;
    justify-self: start !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow: hidden;
  }
  .mobile-header-brand img,
  .mobile-header-brand .brand-mark {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    flex: 0 0 34px !important;
    aspect-ratio: 1;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center;
  }
  .mobile-header-brand .brand-name-lines {
    min-width: 0;
    max-width: 100% !important;
    display: flex !important;
    align-items: baseline;
    gap: .28em;
    overflow: hidden !important;
    color: var(--theme-ink);
    font-size: clamp(14px, 4.6vw, 18px) !important;
    line-height: 1 !important;
    letter-spacing: -.035em;
    white-space: nowrap !important;
  }
  .mobile-header-brand .brand-name-lines > span {
    display: inline !important;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-header-actions {
    width: max-content;
    justify-self: end;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center;
    gap: 1px;
  }
  .mobile-header-button {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 36px !important;
    min-height: 36px !important;
    flex: 0 0 32px !important;
  }
  .mobile-header-button svg { width: 20px !important; height: 20px !important; }
  .mobile-header-cart span { top: 0; right: -1px; }
}

@media (max-width: 390px) {
  .mobile-store-header { grid-template-columns: 30px minmax(0, 1fr) max-content !important; gap: 3px; }
  .mobile-header-brand { gap: 4px !important; }
  .mobile-header-brand img,
  .mobile-header-brand .brand-mark { width: 30px !important; height: 30px !important; min-width: 30px; flex-basis: 30px !important; }
  .mobile-header-brand .brand-name-lines { font-size: clamp(13px, 4.1vw, 16px) !important; }
  .mobile-header-button { width: 30px !important; min-width: 30px !important; max-width: 30px !important; flex-basis: 30px !important; }
}

/* v47: production realtime support workspace */
.support-shell {
  width: min(1380px, 100%);
  height: min(820px, calc(100dvh - 82px));
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(280px, 350px) minmax(0, 1fr);
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid rgba(var(--theme-line-rgb), .34);
  border-radius: 16px;
  background: rgb(var(--theme-card-rgb));
  box-shadow: var(--shadow);
}
.support-inbox,
.support-thread { min-width: 0; min-height: 0; }
.support-inbox { display: grid; grid-template-rows: auto auto minmax(0, 1fr); border-right: 1px solid rgba(var(--theme-line-rgb), .32); background: rgb(var(--theme-card-rgb)); }
.support-inbox-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.support-inbox-head p { margin: 0 0 2px; font-size: 9px; }
.support-inbox-head h1 { margin: 0; color: var(--theme-ink); font-size: 21px; }
.support-inbox-head > span { min-width: 28px; height: 28px; display: grid; place-items: center; padding: 0 7px; border-radius: 999px; background: rgba(var(--theme-brand-rgb), .13); color: rgb(var(--theme-brand-rgb)); font-size: 11px; font-weight: 900; }
.support-search { padding: 0 12px 10px; }
.support-search input { width: 100%; min-height: 38px; padding: 8px 12px; border-radius: 10px; font-size: 12px; }
.support-inbox .message-contact-list { min-height: 0; overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 0; }
.message-contact-row.is-active { background: rgba(var(--theme-brand-rgb), .14); box-shadow: inset 3px 0 rgb(var(--theme-brand-rgb)); }
.support-thread { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgb(var(--theme-card2-rgb)); }
.support-thread-empty { align-self: center; justify-self: center; max-width: 340px; padding: 28px; text-align: center; color: var(--theme-muted); }
.support-thread-empty span { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; background: rgba(var(--theme-brand-rgb), .14); color: rgb(var(--theme-brand-rgb)); font-size: 26px; }
.support-thread-empty h2 { margin: 0; color: var(--theme-ink); font-size: 20px; }
.support-thread-empty p { margin: 7px 0 0; font-size: 12px; line-height: 1.5; }
.support-thread .staff-chat-header { grid-template-columns: 42px minmax(0, 1fr) auto; }
.support-thread .staff-chat-header .chat-back { display: none; }

.chat-compose-row {
  grid-template-columns: auto minmax(100px, 1fr) 40px 42px;
  align-items: end;
}
.chat-media-actions { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 22px; background: rgb(var(--theme-card2-rgb)); }
.chat-media-actions button,
.chat-compose-row > .chat-voice,
.chat-compose-row > .chat-send {
  width: 36px;
  height: 38px;
  min-width: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--theme-muted);
  font-size: 18px;
  cursor: pointer;
}
.chat-media-actions button:hover,
.chat-voice:hover { background: rgba(var(--theme-brand-rgb), .12); color: rgb(var(--theme-brand-rgb)); }
.chat-compose-row > .chat-voice.is-recording { background: #dc2626; color: #fff; animation: chat-recording-pulse 1.2s infinite; }
.chat-compose-row > .chat-send { width: 42px; height: 42px; background: rgb(var(--theme-brand-rgb)); color: var(--theme-on-brand); font-size: 18px; }
.chat-compose-row > .chat-send:disabled { opacity: .55; cursor: wait; }
.chat-hidden-input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.chat-preview { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) 28px; align-items: center; gap: 8px; margin: 0 2px 7px; padding: 7px; border: 1px solid rgba(var(--theme-line-rgb), .34); border-radius: 10px; background: rgb(var(--theme-card2-rgb)); }
.chat-preview[hidden] { display: none; }
.chat-preview img { width: 44px; height: 44px; border-radius: 7px; object-fit: cover; }
.chat-preview audio { width: min(280px, 100%); height: 36px; }
.chat-preview > span { min-width: 0; overflow: hidden; color: var(--theme-ink); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview > button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(239, 68, 68, .13); color: #dc2626; font-size: 20px; cursor: pointer; }
.chat-error { margin: 6px 4px 0; color: #dc2626; font-size: 10px; font-weight: 750; }
.chat-error[hidden] { display: none; }
.chat-audio { display: block; width: min(300px, 100%); height: 40px; margin: 2px 0 4px; }
.chat-document { min-width: 190px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; margin: 1px 0 5px; padding: 7px; border-radius: 8px; background: rgba(var(--theme-card2-rgb), .72); color: var(--theme-ink); }
.chat-document span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: rgba(var(--theme-brand-rgb), .15); color: rgb(var(--theme-brand-rgb)); font-size: 20px; }
.chat-document b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chat-live-notice { position: fixed; top: 18px; left: 50%; z-index: 500; max-width: calc(100% - 30px); padding: 11px 16px; transform: translateX(-50%); border-radius: 10px; background: #0f766e; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.24); font-size: 12px; font-weight: 850; }
.realtime-notice { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; z-index: 520; max-width: calc(100% - 28px); padding: 11px 16px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: #0f766e; color: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.28); font-size: 12px; font-weight: 850; text-align: center; }
.chat-camera-modal { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: 16px; background: rgba(2, 6, 23, .86); }
.chat-camera-modal > div { width: min(680px, 100%); overflow: hidden; border-radius: 16px; background: #0f172a; box-shadow: 0 25px 70px rgba(0,0,0,.5); }
.chat-camera-modal video { display: block; width: 100%; max-height: min(70dvh, 620px); background: #000; object-fit: contain; }
.chat-camera-modal > div > div { display: flex; justify-content: flex-end; gap: 8px; padding: 10px; }
.chat-camera-modal button { min-height: 42px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: #1e293b; color: #fff; font-weight: 800; cursor: pointer; }
.chat-camera-modal .camera-capture-button { border-color: #0f766e; background: #0f766e; }
@keyframes chat-recording-pulse { 50% { transform: scale(.9); opacity: .75; } }

@media (max-width: 760px) {
  .customer-chat-app {
    height: calc(100dvh - 105px) !important;
    min-height: 420px;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .support-shell {
    width: 100%;
    height: calc(100dvh - 62px);
    min-height: 430px;
    display: block;
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .support-inbox { height: 100%; border-right: 0; }
  .support-thread { display: none; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
  .support-shell.has-open-chat .support-inbox { display: none; }
  .support-shell.has-open-chat .support-thread { display: grid; }
  .support-thread .staff-chat-header { grid-template-columns: 32px 38px minmax(0, 1fr) auto; padding: 7px 9px; }
  .support-thread .staff-chat-header .chat-back { display: grid; }
  .chat-compose-row { grid-template-columns: auto minmax(72px, 1fr) 38px 40px; gap: 3px; }
  .chat-media-actions { gap: 0; }
  .chat-media-actions button { width: 31px; min-width: 31px; height: 36px; font-size: 16px; }
  .chat-compose-row > .chat-voice { width: 38px; min-width: 38px; height: 40px; }
  .chat-compose-row > .chat-send { width: 40px; min-width: 40px; height: 40px; }
  .chat-compose-row textarea { min-height: 40px; padding: 10px; }
  .chat-message-list { overscroll-behavior-y: contain; }
  .wa-message { max-width: 88%; }
}

@media (max-width: 390px) {
  .chat-compose-row { grid-template-columns: auto minmax(54px, 1fr) 34px 38px; }
  .chat-media-actions button { width: 28px; min-width: 28px; }
  .chat-compose-row > .chat-voice { width: 34px; min-width: 34px; }
  .chat-compose-row > .chat-send { width: 38px; min-width: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-voice.is-recording { animation: none; }
}
.database-config-list { display: grid; gap: 8px; margin: 12px 0 0; }
.database-config-list > div { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1fr); gap: 12px; padding: 9px 10px; border-radius: 9px; background: rgb(var(--theme-card2-rgb)); }
.database-config-list dt { color: var(--theme-muted); font-size: 10px; font-weight: 800; }
.database-config-list dd { margin: 0; overflow-wrap: anywhere; color: var(--theme-ink); font-size: 11px; font-weight: 800; }

/* v46: focused WhatsApp-style messaging and staff contact inbox */
.chat-app,
.staff-chat-app {
  width: min(760px, 100%);
  margin: 10px auto 18px;
  display: grid;
  grid-template-rows: auto minmax(260px, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(var(--theme-line-rgb), .42);
  border-radius: 18px;
  background: rgb(var(--theme-card-rgb));
  box-shadow: 0 18px 45px rgba(15, 23, 42, .13);
}
.customer-chat-app { height: min(720px, calc(100dvh - 168px)); min-height: 510px; }
.chat-app-header,
.staff-chat-header {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: 34px 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(var(--theme-line-rgb), .34);
  background: rgb(var(--theme-card-rgb));
}
.chat-back {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--theme-ink);
  font-size: 30px;
  line-height: 1;
}
.chat-back:hover { background: rgba(var(--theme-brand-rgb), .12); }
.chat-avatar,
.message-contact-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: rgb(var(--theme-brand-rgb));
  color: var(--theme-on-brand);
  font-weight: 950;
}
.chat-avatar img,
.message-contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-app-identity { min-width: 0; }
.chat-archive-form { justify-self: end; }
.chat-archive-form button { white-space: nowrap; }
.chat-app-identity strong,
.chat-app-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-app-identity strong,
.chat-app-identity strong a { color: var(--theme-ink); font-size: 15px; }
.chat-app-identity small { margin-top: 2px; color: var(--theme-muted); font-size: 10px; }

.chat-message-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding: 14px 16px 18px;
  background-color: rgb(var(--theme-card2-rgb));
  background-image: radial-gradient(rgba(var(--theme-line-rgb), .20) .7px, transparent .7px);
  background-size: 13px 13px;
  overscroll-behavior: contain;
}
.chat-day-label {
  align-self: center;
  margin-bottom: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(var(--theme-card-rgb), .9);
  color: var(--theme-muted);
  font-size: 9px;
  font-weight: 800;
}
.chat-welcome {
  align-self: center;
  max-width: 310px;
  margin: auto;
  padding: 16px;
  border: 1px solid rgba(var(--theme-line-rgb), .32);
  border-radius: 14px;
  background: rgba(var(--theme-card-rgb), .93);
  text-align: center;
}
.chat-welcome strong { color: var(--theme-ink); }
.chat-welcome p { margin: 5px 0 0; color: var(--theme-muted); font-size: 12px; line-height: 1.45; }
.wa-message {
  width: fit-content;
  max-width: min(78%, 520px);
  padding: 7px 9px 5px;
  border: 1px solid rgba(var(--theme-line-rgb), .3);
  border-radius: 11px;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .07);
}
.wa-incoming { align-self: flex-start; border-bottom-left-radius: 3px; background: rgb(var(--theme-card-rgb)); }
.wa-outgoing { align-self: flex-end; border-bottom-right-radius: 3px; background: rgba(var(--theme-brand-rgb), .16); }
.wa-message p { margin: 0; overflow-wrap: anywhere; color: var(--theme-ink); font-size: 13px; line-height: 1.42; white-space: pre-wrap; }
.wa-message time { display: block; margin-top: 3px; color: var(--theme-muted); font-size: 8px; line-height: 1; text-align: right; }
.chat-photo { display: block; margin: -2px -4px 5px; overflow: hidden; border-radius: 8px; }
.chat-photo img { display: block; width: min(280px, 100%); max-height: 300px; object-fit: cover; }

.chat-composer {
  min-width: 0;
  padding: 8px;
  border-top: 1px solid rgba(var(--theme-line-rgb), .34);
  background: rgb(var(--theme-card-rgb));
}
.chat-optional-details { margin: 0 0 7px; border: 1px solid rgba(var(--theme-line-rgb), .34); border-radius: 10px; background: rgb(var(--theme-card2-rgb)); }
.chat-optional-details summary { padding: 8px 10px; color: var(--theme-ink); font-size: 11px; font-weight: 900; cursor: pointer; }
.chat-optional-details summary span { float: right; color: var(--theme-muted); font-size: 9px; }
.chat-optional-details > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 0 8px 8px; }
.chat-optional-details label { display: grid; gap: 3px; color: var(--theme-muted); font-size: 9px; font-weight: 800; }
.chat-optional-details input { min-width: 0; height: 34px; padding: 6px 8px; border-radius: 8px; font-size: 11px; }
.chat-compose-row { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) 42px; align-items: end; gap: 6px; }
.chat-compose-row textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  max-height: 120px;
  margin: 0;
  padding: 11px 13px;
  resize: none;
  border-radius: 21px !important;
  font-size: 13px;
  line-height: 1.35;
}
.chat-attach,
.chat-compose-row > button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--theme-card2-rgb));
  color: var(--theme-muted);
  cursor: pointer;
}
.chat-compose-row > button { width: 42px; height: 42px; background: rgb(var(--theme-brand-rgb)); color: var(--theme-on-brand); }
.chat-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chat-attach svg,
.chat-compose-row > button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chat-file-name { display: block; margin: 0 44px 5px; overflow: hidden; color: var(--theme-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.message-contacts-screen { max-width: 980px; }
.message-contact-list { overflow: hidden; border: 1px solid rgba(var(--theme-line-rgb), .35); border-radius: 15px; background: rgb(var(--theme-card-rgb)); }
.message-contact-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(var(--theme-line-rgb), .24);
  color: var(--theme-ink);
}
.message-contact-row:last-child { border-bottom: 0; }
.message-contact-row:hover { background: rgba(var(--theme-brand-rgb), .07); }
.message-contact-row.has-unread { background: rgba(var(--theme-brand-rgb), .09); }
.message-contact-avatar { width: 48px; height: 48px; }
.message-contact-copy { min-width: 0; }
.message-contact-copy strong,
.message-contact-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-contact-copy strong { color: var(--theme-ink); font-size: 14px; }
.message-contact-copy small { margin-top: 4px; color: var(--theme-muted); font-size: 11px; }
.message-contact-meta { display: grid; justify-items: end; gap: 6px; }
.message-contact-meta time { color: var(--theme-muted); font-size: 9px; }
.message-contact-meta em { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: rgb(var(--theme-brand-rgb)); color: var(--theme-on-brand); font-size: 9px; font-style: normal; font-weight: 950; }

.staff-chat-app { width: min(1050px, 100%); height: min(760px, calc(100dvh - 82px)); margin: 0 auto; }
.staff-chat-body { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 240px; overflow: hidden; }
.staff-chat-body > .chat-message-list { min-height: 0; }
.chat-contact-details { display: grid; align-content: start; gap: 10px; padding: 16px; border-left: 1px solid rgba(var(--theme-line-rgb), .3); background: rgb(var(--theme-card-rgb)); }
.chat-contact-details > strong { color: var(--theme-ink); }
.chat-contact-details span { display: grid; gap: 3px; overflow-wrap: anywhere; color: var(--theme-muted); font-size: 11px; }
.chat-contact-details span b { color: var(--theme-ink); font-size: 9px; text-transform: uppercase; }

.customer-activity-screen { max-width: 1100px; }
.customer-profile-head { display: grid; grid-template-columns: 34px 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 18px; border-radius: 16px; background: rgb(var(--theme-card-rgb)); }
.customer-profile-head .message-contact-avatar { width: 58px; height: 58px; }
.customer-profile-head h1 { margin: 2px 0 3px; font-size: 24px; }
.customer-profile-head p { margin: 0; color: var(--theme-muted); }
.customer-activity-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.customer-activity-metrics > div,
.customer-activity-card { padding: 15px; border: 1px solid rgba(var(--theme-line-rgb), .34); border-radius: 14px; background: rgb(var(--theme-card-rgb)); }
.customer-activity-metrics span,
.customer-activity-metrics strong { display: block; }
.customer-activity-metrics span { color: var(--theme-muted); font-size: 10px; }
.customer-activity-metrics strong { margin-top: 5px; color: var(--theme-ink); font-size: 20px; }
.customer-activity-card { margin-top: 12px; }
.customer-activity-card h2 { margin: 0 0 12px; font-size: 17px; }
.profile-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.profile-detail-grid span { display: grid; gap: 4px; color: var(--theme-muted); font-size: 11px; }
.profile-detail-grid b { color: var(--theme-ink); font-size: 9px; text-transform: uppercase; }
.profile-activity-list { display: grid; gap: 7px; }
.profile-activity-list > a,
.profile-activity-list > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; background: rgb(var(--theme-card2-rgb)); color: var(--theme-ink); }
.profile-activity-list strong,
.profile-activity-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-activity-list small { margin-top: 3px; color: var(--theme-muted); font-size: 9px; }
.profile-activity-list time { color: var(--theme-muted); font-size: 9px; white-space: nowrap; }

@media (max-width: 760px) {
  .customer-chat-app {
    width: 100%;
    height: calc(100dvh - 143px);
    min-height: 430px;
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
    grid-template-rows: auto minmax(120px, 1fr) auto;
  }
  .chat-app-header { min-height: 54px; grid-template-columns: 30px 38px minmax(0, 1fr); gap: 8px; padding: 7px 9px; }
  .chat-avatar { width: 38px; height: 38px; }
  .chat-message-list { padding: 10px 9px 13px; }
  .wa-message { max-width: 86%; }
  .chat-composer { padding: 6px; }
  .chat-optional-details > div { grid-template-columns: 1fr; }
  .chat-compose-row { grid-template-columns: 36px minmax(0, 1fr) 40px; gap: 4px; }
  .chat-attach { width: 36px; min-width: 36px; height: 40px; }
  .chat-compose-row > button { width: 40px; min-width: 40px; height: 40px; }
  .chat-compose-row textarea { min-height: 40px; padding: 10px 12px; }
  .message-contact-row { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 10px; }
  .message-contact-avatar { width: 42px; height: 42px; }
  .staff-chat-app { height: calc(100dvh - 62px); border-radius: 0; }
  .staff-chat-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .chat-contact-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid rgba(var(--theme-line-rgb), .3);
    border-left: 0;
  }
  .chat-contact-details > strong,
  .chat-contact-details > .btn { grid-column: 1 / -1; }
  .customer-profile-head { grid-template-columns: 30px 48px minmax(0, 1fr); padding: 13px; }
  .customer-profile-head .message-contact-avatar { width: 48px; height: 48px; }
  .customer-profile-head > .badge { grid-column: 2 / -1; width: fit-content; }
  .customer-activity-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-activity-list > a,
  .profile-activity-list > div { grid-template-columns: minmax(0, 1fr) auto; }
  .profile-activity-list > a > b,
  .profile-activity-list > div > b { grid-column: 1 / -1; }
  .profile-activity-list.compact > div { grid-template-columns: minmax(0, 1fr); }
}

.message-center {
  width: min(860px, 100%);
  margin: 18px auto 34px;
  display: grid;
  gap: 14px;
}
.message-center-head,
.message-inbox,
.message-composer {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(var(--theme-line-rgb), .38);
  border-radius: 20px;
  background: rgb(var(--theme-card-rgb));
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}
.message-center-head h1 { margin: 4px 0 7px; }
.message-center-head > p:last-child { margin: 0; }
.message-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(var(--theme-line-rgb), .38);
  border-radius: 14px;
  background: rgb(var(--theme-card-rgb));
}
.message-tabs a {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgb(var(--theme-card2-rgb));
  color: var(--theme-ink);
  font-size: 13px;
  font-weight: 900;
}
.message-tabs a:hover,
.message-tabs a:focus-visible { background: rgba(var(--theme-brand-rgb), .14); color: rgb(var(--theme-brand-dark-rgb)); }
.message-tabs span {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: rgb(var(--theme-brand-rgb));
  color: var(--theme-on-brand);
  font-size: 10px;
}
.message-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.message-section-head h2 { margin: 3px 0 0; font-size: clamp(20px, 4vw, 28px); }
.message-section-head > small { color: var(--theme-muted); text-align: right; }
.chat-thread,
.admin-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 520px;
  overflow-y: auto;
  padding: 4px 3px;
  scroll-behavior: smooth;
}
.chat-bubble,
.admin-chat-bubble {
  width: fit-content;
  max-width: min(78%, 620px);
  padding: 11px 13px;
  border: 1px solid rgba(var(--theme-line-rgb), .35);
  border-radius: 15px;
  background: rgb(var(--theme-card2-rgb));
  color: var(--theme-ink);
}
.chat-bubble.from-customer,
.admin-chat-bubble.from-shop { align-self: flex-end; border-bottom-right-radius: 4px; background: rgba(var(--theme-brand-rgb), .14); }
.chat-bubble.from-shop,
.admin-chat-bubble.from-customer { align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-bubble strong,
.admin-chat-bubble strong { display: block; margin-bottom: 4px; color: rgb(var(--theme-brand-dark-rgb)); font-size: 11px; }
.chat-bubble p,
.admin-chat-bubble p { margin: 0; overflow-wrap: anywhere; color: var(--theme-ink); line-height: 1.48; white-space: pre-wrap; }
.chat-bubble time,
.admin-chat-bubble time { display: block; margin-top: 6px; color: var(--theme-muted); font-size: 9px; }
.message-inbox-empty { display: grid; justify-items: center; gap: 5px; padding: 30px 12px; color: var(--theme-muted); text-align: center; }
.message-inbox-empty span { font-size: 28px; }
.message-inbox-empty p { margin: 0; }
.message-compose-form { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.message-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.message-account-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(var(--theme-brand-rgb), .09); color: var(--theme-muted); font-size: 12px; }

.admin-conversation-list { display: grid; gap: 14px; }
.admin-conversation {
  padding: 18px;
  border: 1px solid rgba(var(--theme-line-rgb), .38);
  border-radius: 16px;
  background: rgb(var(--theme-card-rgb));
}
.admin-conversation-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.admin-conversation-head strong,
.admin-conversation-head small { display: block; }
.admin-conversation-head small { margin-top: 4px; color: var(--theme-muted); }
.admin-chat-thread { max-height: 420px; margin-bottom: 14px; padding: 12px; border-radius: 12px; background: rgb(var(--theme-card2-rgb)); }
.admin-message-reply-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.admin-message-reply-form label { display: grid; gap: 6px; }
.admin-message-reply-form textarea { min-height: 82px; resize: vertical; }
.admin-message-reply-form .btn { min-height: 44px; }
.admin-conversation > .status-button-row { margin-top: 10px; }

@media (max-width: 680px) {
  .message-center { margin-top: 8px; gap: 10px; }
  .message-center-head,
  .message-inbox,
  .message-composer { padding: 16px 13px; border-radius: 16px; }
  .message-contact-grid { grid-template-columns: 1fr; }
  .chat-bubble { max-width: 88%; }
  .message-section-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .message-section-head > small { text-align: left; }
  .admin-conversation { padding: 13px; }
  .admin-conversation-head { align-items: flex-start; }
  .admin-message-reply-form { grid-template-columns: 1fr; }
  .admin-message-reply-form .btn { width: 100%; }
}

@media (max-width: 760px) {
  body:not(.staff-area) .product-grid-v11,
  body:not(.staff-area) .centered-products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    gap: 10px !important;
  }
  body:not(.staff-area) .product-card-v11 { border-radius: 14px !important; }
  body:not(.staff-area) .item-card .product-media-v11,
  body:not(.staff-area) .item-card .item-photo,
  body:not(.staff-area) .preorder-card .product-media-v11,
  body:not(.staff-area) .preorder-card .preorder-media {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1.16 / 1 !important;
  }
  body:not(.staff-area) .product-info-v11 { padding: 10px !important; }
  body:not(.staff-area) .item-card .product-code,
  body:not(.staff-area) .item-card .product-info-v11 > p,
  body:not(.staff-area) .compact-preorders .product-info-v11 > p,
  body:not(.staff-area) .compact-preorders .product-info-v11 > small { display: none; }
  body:not(.staff-area) .product-info-v11 h3 {
    min-height: 36px;
    margin-bottom: 6px;
    display: -webkit-box;
    overflow: hidden;
    color: var(--theme-ink);
    font-size: 14px;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body:not(.staff-area) .product-card-bottom { gap: 7px; margin-top: 4px; }
  body:not(.staff-area) .product-card-bottom > strong { font-size: 15px; }
  body:not(.staff-area) .product-actions-v11 { width: 100%; }
  body:not(.staff-area) .item-card .card-action-buy { display: none !important; }
  body:not(.staff-area) .product-actions-v11 .product-add-wrap,
  body:not(.staff-area) .product-actions-v11 .qty-control {
    width: 100%;
    min-width: 0 !important;
    min-height: 34px;
    padding: 7px 6px;
    font-size: 11px;
  }
  body:not(.staff-area) .product-actions-v11 .qty-control { padding: 0; }
  body:not(.staff-area) .qty-control.mini button { width: 31px; height: 31px; }

  .cart-column-head { display: none !important; }
  .cart-panel .cart-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px 12px !important;
    padding: 16px !important;
  }
  .cart-item-name { grid-column: 1 / -1; }
  .cart-item-name strong { font-size: 17px; }
  .cart-rate,
  .cart-line-total { display: grid; gap: 3px; }
  .cart-rate::before,
  .cart-line-total::before,
  .cart-panel .qty-control::before {
    content: attr(data-label);
    color: var(--theme-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .cart-panel .qty-control {
    display: grid;
    grid-template-columns: 34px 30px 34px;
    justify-self: end;
    position: relative;
    margin-top: 18px;
  }
  .cart-panel .qty-control::before {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
  }
  .cart-line-total { align-self: center; font-size: 16px; }
  .cart-panel .remove-btn { align-self: end; justify-self: end; min-width: 82px; }
  .cart-footer-card { border-radius: 18px !important; }
}

@media (max-width: 430px) {
  .auth-primary-actions { grid-template-columns: 1fr; }
  .mobile-header-brand { gap: 6px; }
  .mobile-header-brand img,
  .mobile-header-brand .brand-mark { width: 40px !important; height: 40px !important; flex-basis: 40px; }
  .mobile-header-brand strong { max-width: 190px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-nav-count.has-count { animation: none; }
}

/* v36: centered catalogue rows, compact product metadata, and urgent staff order alerts */
.brand-name-lines {
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  line-height: .9 !important;
}
.brand-name-lines > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-brand .brand-name-lines {
  max-width: 240px !important;
  font-size: clamp(18px, 1.55vw, 22px) !important;
  font-weight: 950;
  letter-spacing: -.045em;
}

.product-name-code {
  color: rgb(var(--theme-accent-rgb));
  font-size: .68em;
  font-weight: 850;
  letter-spacing: .02em;
  white-space: nowrap;
}
.item-card .product-media-v11 {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
}
.item-card .product-media-v11 .item-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto !important;
  overflow: hidden;
}
.item-card .product-media-v11 .carousel-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
}

.category-surface {
  --category-surface-rgb: 59, 130, 246;
  margin: 22px 0 30px !important;
  padding: clamp(16px, 2.4vw, 28px);
  border: 1px solid rgba(var(--category-surface-rgb), .24);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(var(--category-surface-rgb), .13), rgba(var(--category-surface-rgb), .035) 58%),
    rgba(var(--theme-card-rgb), .76);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}
.category-surface-1 { --category-surface-rgb: 16, 185, 129; }
.category-surface-2 { --category-surface-rgb: 249, 115, 22; }
.category-surface-3 { --category-surface-rgb: 168, 85, 247; }
.category-surface-4 { --category-surface-rgb: 236, 72, 153; }
.category-surface-5 { --category-surface-rgb: 6, 182, 212; }
.preorder-category-surface { --category-surface-rgb: 245, 158, 11; }
.category-surface .catalogue-heading .eyebrow,
.category-surface .catalogue-heading h2 { color: rgb(var(--category-surface-rgb)) !important; }
body[class*="theme-dark-"] .category-surface .catalogue-heading h2 { color: var(--theme-ink) !important; }

@media (min-width: 761px) {
  body:not(.staff-area) .product-grid-v11.centered-products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
  }
  body:not(.staff-area) .product-grid-v11.centered-products > .product-card-v11 {
    flex: 0 1 300px;
    width: min(300px, 100%);
    max-width: 310px;
  }
}
@media (min-width: 900px) {
  body:not(.staff-area) .item-card .product-card-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  body:not(.staff-area) .item-card .product-actions-v11 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body:not(.staff-area) .item-card .product-actions-v11 .btn,
  body:not(.staff-area) .item-card .product-actions-v11 .qty-control {
    width: 100%;
    min-width: 0 !important;
    min-height: 38px;
    justify-content: center;
  }
  body:not(.staff-area) .item-card .product-actions-v11 .card-action-buy {
    display: inline-flex !important;
  }
}

.settings-subtabs {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 7px;
  scrollbar-width: thin;
}
.settings-subtabs > a {
  flex: 1 0 132px;
  min-width: 0;
  padding: 11px 10px;
  border-radius: 12px;
  text-align: center;
}
body[class*="theme-"].staff-area .settings-subtabs > a:not(.active) strong {
  color: var(--theme-ink) !important;
}
body[class*="theme-"].staff-area .settings-subtabs > a:not(.active) small {
  color: var(--theme-muted) !important;
  opacity: 1;
}
body[class*="theme-"].staff-area .settings-subtabs > a.active strong,
body[class*="theme-"].staff-area .settings-subtabs > a.active small {
  color: var(--theme-on-brand) !important;
}
.add-social-platform {
  grid-column: 1 / -1;
  justify-self: center;
  width: fit-content;
}

.admin-orders-link {
  position: relative;
  isolation: isolate;
}
.admin-orders-link.has-pending-orders::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  padding: 2px;
  border-radius: 11px;
  background: conic-gradient(from 0deg, transparent 0 20%, #ff5f45 30%, #ffd166 42%, transparent 54% 78%, #ff5f45 90%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: pending-order-border-spin .8s linear infinite;
  filter: drop-shadow(0 0 5px rgba(255, 95, 69, .9));
}
@keyframes pending-order-border-spin { to { transform: rotate(1turn); } }

.pending-order-alarm {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 95;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px solid #fff1a8;
  border-radius: 12px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, .8), 0 14px 35px rgba(127, 29, 29, .42);
  font-size: 12px;
  letter-spacing: .06em;
  transform: translateX(-50%);
  animation: pending-order-alarm-pulse .62s ease-in-out infinite;
}
.pending-order-alarm[hidden] { display: none !important; }
.pending-order-alarm span { font-size: 19px; }
.pending-order-alarm strong { color: #fff; white-space: nowrap; }
.pending-order-alarm em {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: #b91c1c;
  font-style: normal;
  font-weight: 950;
}
@keyframes pending-order-alarm-pulse {
  0%, 100% { transform: translateX(-50%) scale(.96); box-shadow: 0 0 0 0 rgba(239, 68, 68, .72), 0 12px 30px rgba(127, 29, 29, .36); }
  50% { transform: translateX(-50%) scale(1.05); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0), 0 18px 42px rgba(127, 29, 29, .54); }
}

@media (max-width: 760px) {
  .mobile-header-brand .brand-name-lines {
    max-width: 195px;
    font-size: clamp(16px, 4.8vw, 20px) !important;
    letter-spacing: -.045em;
  }
  .category-surface { padding: 14px 10px; border-radius: 16px; }
  .settings-subtabs > a { flex: 0 0 auto; min-width: max-content; padding: 9px 11px; }
  .settings-subtabs > a small { display: none !important; }
  .pending-order-alarm { bottom: 10px; min-height: 42px; padding: 8px 10px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-orders-link.has-pending-orders::before,
  .pending-order-alarm { animation: none; }
}

/* v38: desktop category product dropdown navigation */
@media (min-width: 900px) {
  .desktop-store-header,
  .desktop-store-nav { overflow: visible; }
  .desktop-category-menu {
    position: relative;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
  }
  .desktop-category-menu > a {
    padding-right: 4px;
    border-radius: 8px 0 0 8px;
  }
  .desktop-category-menu > button {
    width: 23px;
    height: 30px;
    flex: 0 0 23px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: transparent;
    color: var(--theme-muted);
    cursor: pointer;
  }
  .desktop-category-menu > button:hover,
  .desktop-category-menu > button:focus-visible,
  .desktop-category-menu.is-open > button,
  .desktop-category-menu.is-open > a {
    background: rgba(var(--theme-brand-rgb), .12);
    color: var(--theme-ink);
  }
  .desktop-category-menu > button svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .16s ease;
  }
  .desktop-category-menu.is-open > button svg { transform: rotate(180deg); }
  .desktop-category-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    z-index: 150;
    width: max-content;
    min-width: 230px;
    max-width: min(340px, 82vw);
    max-height: min(460px, 70vh);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(var(--theme-line-rgb), .48);
    border-radius: 12px;
    background: rgb(var(--theme-card-rgb));
    color: var(--theme-ink);
    box-shadow: 0 20px 45px rgba(15, 23, 42, .22);
  }
  .desktop-category-dropdown[hidden] { display: none !important; }
  .desktop-category-dropdown > strong {
    display: block;
    padding: 7px 10px 9px;
    border-bottom: 1px solid rgba(var(--theme-line-rgb), .34);
    color: var(--theme-ink);
    font-size: 12px;
  }
  .desktop-store-nav .desktop-category-dropdown > a {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--theme-ink);
    font-size: 12px;
    font-weight: 750;
    overflow: visible;
  }
  .desktop-store-nav .desktop-category-dropdown > a:hover,
  .desktop-store-nav .desktop-category-dropdown > a:focus-visible {
    background: rgba(var(--theme-brand-rgb), .1);
    color: rgb(var(--theme-brand-dark-rgb));
  }
  .desktop-category-dropdown > a span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .desktop-category-dropdown > a small {
    color: var(--theme-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
  }
  .desktop-category-menu:nth-last-of-type(-n+2) .desktop-category-dropdown {
    right: 0;
    left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-category-menu > button svg { transition: none; }
}

/* v39: unified category triggers, tagline strip, stacked contact actions, and compact cart media */
@media (min-width: 900px) {
  .desktop-store-nav { gap: 5px; }
  .desktop-store-nav > a,
  .desktop-category-menu > a {
    font-size: 13.5px;
    padding: 9px 10px;
  }
  .desktop-category-menu > button {
    width: auto;
    height: 34px;
    flex: 0 1 auto;
    grid-auto-flow: column;
    gap: 5px;
    padding: 7px 7px 7px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 850;
    white-space: nowrap;
  }
  .desktop-category-menu > button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .desktop-category-menu.is-open > button { border-radius: 8px; }
}

.store-tagline-strip {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  border-bottom: 1px solid rgba(var(--theme-line-rgb), .32);
  background: rgba(var(--theme-brand-rgb), .09);
  color: var(--theme-ink);
  text-align: center;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .025em;
}
.store-tagline-strip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-float {
  position: fixed;
  right: 16px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 79;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255,255,255,.96);
  border-radius: 999px;
  background: rgb(var(--theme-brand-rgb));
  color: var(--theme-on-brand);
  box-shadow: 0 12px 26px rgba(var(--theme-brand-rgb), .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.message-float.above-whatsapp { bottom: calc(136px + env(safe-area-inset-bottom)); }
.message-float:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(var(--theme-brand-rgb), .4); }
.message-float svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-column-head,
.cart-row {
  grid-template-columns: minmax(180px, 1fr) 64px 105px 142px 105px 84px !important;
}
.cart-item-photo {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--theme-line-rgb), .38);
  border-radius: 10px;
  background: rgb(var(--theme-card2-rgb));
  color: var(--theme-muted);
  font-weight: 950;
}
.cart-item-photo img { width: 100%; height: 100%; object-fit: cover; }
.cart-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.cart-footer-actions .btn { width: auto; min-width: 132px; }

@media (min-width: 900px) {
  .message-float { right: 24px; bottom: 24px; width: 52px; height: 52px; }
  .message-float.above-whatsapp { bottom: 86px; }
}

@media (max-width: 760px) {
  .store-tagline-strip { min-height: 25px; padding: 3px 10px; font-size: 10px; }
  .message-float { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .message-float.above-whatsapp { bottom: calc(120px + env(safe-area-inset-bottom)); }
  .cart-panel .cart-row { grid-template-columns: minmax(0, 1fr) auto !important; }
  .cart-item-name { grid-column: 1 !important; align-self: center; }
  .cart-item-photo { grid-column: 2; width: 48px; height: 48px; }
  .cart-panel .qty-control { grid-column: 2; }
  .cart-rate { grid-column: 1; }
  .cart-line-total { grid-column: 1; }
  .cart-panel .remove-btn { grid-column: 2; }
  .cart-footer-actions { justify-content: stretch; }
  .cart-footer-actions .btn { flex: 1 1 130px; min-width: 0; }
}

/* v40: public review gallery and moderation workflow */
.footer-columns { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer-reviews-column nav { display: grid; gap: 8px; }
.review-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 8px 0 20px;
  padding: 20px;
  border: 1px solid rgba(var(--theme-line-rgb), .36);
  border-radius: 18px;
  background: rgb(var(--theme-card-rgb));
  color: var(--theme-ink);
}
.review-page-head h1 { margin: 3px 0 5px; }
.review-page-head p { margin: 0; color: var(--theme-muted); }
.review-page-head.compact { max-width: 820px; margin-inline: auto; }
.review-write-card { max-width: 820px; margin: 0 auto 30px; }
.public-review-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
.public-review-card { align-content: start; }
.review-head { min-width: 0; }
.review-head > div:nth-child(2) { min-width: 0; }
.review-head small { display: block; margin-top: 3px; color: var(--theme-muted); }
.review-type-badge {
  margin-left: auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(var(--theme-brand-rgb), .11);
  color: rgb(var(--theme-brand-dark-rgb));
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}
.review-product-link { width: fit-content; color: rgb(var(--theme-brand-dark-rgb)); font-weight: 900; }
.review-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  max-width: 620px;
}
.review-image-grid a {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(var(--theme-line-rgb), .4);
  border-radius: 10px;
  background: rgb(var(--theme-card2-rgb));
}
.review-image-grid img { width: 100%; height: 100%; object-fit: cover; }
.review-status-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.review-status-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.review-status-tabs span {
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  text-align: center;
  font-size: 10px;
}
.admin-review-card .review-head .badge { margin-left: auto; }
.review-moderation-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-moderation-actions form { margin: 0; }

@media (max-width: 640px) {
  .review-page-head { align-items: stretch; flex-direction: column; padding: 15px; }
  .review-page-head .btn { width: 100%; }
  .review-head { align-items: flex-start; flex-wrap: wrap; }
  .review-type-badge { margin-left: 54px; }
}

/* v41: purpose-built narrow cart cards and centered incomplete product rows */
@media (max-width: 760px) {
  body:not(.staff-area) .product-grid-v11.centered-products {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: stretch;
    gap: 10px !important;
  }
  body:not(.staff-area) .product-grid-v11.centered-products > .product-card-v11 {
    width: calc(50% - 5px);
    max-width: calc(50% - 5px);
    flex: 0 1 calc(50% - 5px);
  }

  .cart-panel {
    overflow: visible;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .cart-panel .cart-list { gap: 12px; }
  .cart-panel .cart-row {
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "photo name name"
      "rate rate total"
      "quantity quantity remove";
    gap: 13px 10px !important;
    padding: 14px !important;
    overflow: hidden;
    border: 1px solid rgba(var(--theme-line-rgb), .38) !important;
    border-radius: 16px !important;
    background: rgb(var(--theme-card-rgb)) !important;
    box-shadow: 0 9px 24px rgba(15, 23, 42, .08) !important;
  }
  .cart-item-name {
    grid-area: name !important;
    min-width: 0;
    align-self: center;
  }
  .cart-item-name strong {
    display: block;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.35;
    text-overflow: ellipsis;
  }
  .cart-item-photo {
    grid-area: photo !important;
    width: 54px;
    height: 54px;
    align-self: center;
    border-radius: 11px;
  }
  .cart-rate {
    grid-area: rate !important;
    align-self: center;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 3px 7px;
  }
  .cart-rate::before { grid-column: 1 / -1; }
  .cart-rate strong { font-size: 15px; }
  .cart-rate small { margin: 0; font-size: 10px; }
  .cart-line-total {
    grid-area: total !important;
    align-self: center;
    justify-self: end;
    min-width: 74px;
    font-size: 15px;
    text-align: right;
  }
  .cart-panel .qty-control {
    grid-area: quantity !important;
    justify-self: start;
    width: fit-content;
    margin: 0;
    display: grid;
    grid-template-columns: auto 32px 28px 32px;
    gap: 3px;
    padding: 3px;
  }
  .cart-panel .qty-control::before {
    position: static;
    align-self: center;
    padding: 0 5px 0 3px;
    white-space: nowrap;
  }
  .cart-panel .qty-control button {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
    flex-basis: 32px;
  }
  .cart-panel .qty-control span { min-width: 28px; }
  .cart-panel .remove-btn {
    grid-area: remove !important;
    align-self: center;
    justify-self: end;
    min-width: 72px;
    padding: 8px 9px;
  }
  .cart-footer-card {
    padding: 14px !important;
    border-radius: 16px !important;
  }
  .cart-footer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .cart-footer-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 9px 7px;
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .cart-panel .cart-row {
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    padding: 12px !important;
    gap: 11px 8px !important;
  }
  .cart-item-photo { width: 48px; height: 48px; }
  .cart-panel .qty-control { grid-template-columns: 30px 26px 30px; }
  .cart-panel .qty-control::before { display: none; }
  .cart-panel .qty-control button {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    min-height: 30px;
    flex-basis: 30px;
  }
  .cart-panel .qty-control span { min-width: 26px; }
}

/* v42: fixed-border alert travel, guest order tracking, success spacing, and centered preorders */
@property --pending-order-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.admin-orders-link.has-pending-orders::before {
  background: conic-gradient(from var(--pending-order-angle), transparent 0 72%, #ff5f45 78%, #fff1a8 84%, #ff5f45 90%, transparent 96%);
  transform: none !important;
  animation: pending-order-border-travel 1.05s linear infinite;
}
@keyframes pending-order-border-travel { to { --pending-order-angle: 360deg; } }

.success-card {
  display: grid;
  gap: 14px;
}
.success-card > * { margin-top: 0; margin-bottom: 0; }
.success-actions {
  display: grid;
  gap: 10px;
}
.success-actions .btn {
  width: 100%;
  margin: 0 !important;
}

.guest-orders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid rgba(var(--theme-line-rgb), .36);
  border-radius: 18px;
  background: rgb(var(--theme-card-rgb));
}
.guest-orders-head h1 { margin: 3px 0 5px; }
.guest-orders-head p { margin: 0; color: var(--theme-muted); }
.guest-order-lookup { margin-bottom: 16px; }
.guest-order-lookup h2 { margin-bottom: 5px; }
.guest-order-lookup-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(170px, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.guest-order-lookup-form label { display: grid; gap: 6px; }
.guest-order-lookup-form .btn { min-height: 46px; }
.guest-order-list { display: grid; gap: 10px; }
.guest-order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--theme-line-rgb), .38);
  border-radius: 14px;
  background: rgb(var(--theme-card-rgb));
  color: var(--theme-ink);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}
.guest-order-card small { display: block; margin-top: 4px; color: var(--theme-muted); }

body:not(.staff-area) .preorder-grid.centered-products {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: stretch;
  gap: 18px;
}
body:not(.staff-area) .preorder-grid.centered-products > .preorder-card {
  width: min(300px, 100%);
  max-width: 320px;
  flex: 0 1 300px;
}

@media (max-width: 760px) {
  .success-card {
    width: calc(100% - 8px);
    margin: 18px auto;
    padding: 18px 16px;
    gap: 12px;
  }
  .success-card h1 {
    overflow-wrap: anywhere;
    font-size: clamp(28px, 9vw, 42px);
    line-height: 1.12;
  }
  .success-actions { gap: 9px; }
  .guest-orders-head { align-items: stretch; flex-direction: column; padding: 14px; }
  .guest-orders-head .btn { width: 100%; }
  .guest-order-lookup-form { grid-template-columns: 1fr; }
  .guest-order-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 13px;
  }
  .guest-order-card > strong { grid-column: 1; }
  .guest-order-card > span:last-child { grid-column: 2; grid-row: 1 / span 2; }
  body:not(.staff-area) .preorder-grid.centered-products { gap: 10px; }
  body:not(.staff-area) .preorder-grid.centered-products > .preorder-card {
    width: calc(50% - 5px);
    max-width: calc(50% - 5px);
    flex: 0 1 calc(50% - 5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-orders-link.has-pending-orders::before { animation: none; }
}

/* v43: expandable product lists in the mobile category drawer */
.store-drawer-category { border-radius: 9px; }
.store-drawer-category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 2px;
}
.store-drawer-category-row > a { min-width: 0; }
.store-drawer-category-row > button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  justify-self: end;
  padding: 0;
  border: 1px solid rgba(var(--theme-line-rgb), .38);
  border-radius: 9px;
  background: rgb(var(--theme-card2-rgb));
  color: var(--theme-muted);
  cursor: pointer;
}
.store-drawer-category-row > button:hover,
.store-drawer-category-row > button:focus-visible,
.store-drawer-category.is-open .store-drawer-category-row > button {
  border-color: rgba(var(--theme-brand-rgb), .5);
  background: rgba(var(--theme-brand-rgb), .13);
  color: rgb(var(--theme-brand-rgb));
}
.store-drawer-category-row > button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}
.store-drawer-category.is-open .store-drawer-category-row > button svg { transform: rotate(180deg); }
.store-drawer-products {
  display: grid;
  gap: 2px;
  margin: 2px 4px 7px 16px;
  padding: 5px;
  border-left: 2px solid rgba(var(--theme-brand-rgb), .38);
  border-radius: 0 9px 9px 0;
  background: rgba(var(--theme-brand-rgb), .045);
}
.store-drawer-products[hidden] { display: none !important; }
.store-drawer-categories .store-drawer-products > a {
  min-height: 36px;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 700;
}
.store-drawer-products > a small {
  max-width: 86px;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .store-drawer-category-row > button svg { transition: none; }
}

/* v44: one responsive contact stack prevents fixed-action collisions */
.floating-contact-stack {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 82;
  display: grid;
  grid-auto-flow: row;
  justify-items: center;
  gap: 12px;
  width: 52px;
  pointer-events: none;
}
.floating-contact-stack > .message-float,
.floating-contact-stack > .whatsapp-float {
  position: static !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  pointer-events: auto;
}
.floating-contact-stack > .message-float {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}
.floating-contact-stack > .whatsapp-float {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}

@media (min-width: 900px) {
  .floating-contact-stack {
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    gap: 14px;
    width: 54px;
  }
  .floating-contact-stack > .message-float,
  .floating-contact-stack > .whatsapp-float {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
  }
}

@media (max-width: 360px) {
  .floating-contact-stack {
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(66px + env(safe-area-inset-bottom));
    gap: 9px;
    width: 46px;
  }
  .floating-contact-stack > .message-float,
  .floating-contact-stack > .whatsapp-float {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
  }
}

/* Keep the mobile identity row last in the cascade so legacy size rules cannot split it. */
@media (max-width: 899px) {
  body:not(.staff-area) .store-header { min-height: 50px !important; padding: 4px 8px !important; }
  .mobile-store-header {
    height: 42px !important;
    grid-template-columns: 32px minmax(0, 1fr) max-content !important;
    gap: 5px !important;
  }
  .mobile-header-brand {
    width: auto !important;
    max-width: 100% !important;
    height: 42px !important;
    justify-self: start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  .mobile-header-brand img,
  .mobile-header-brand .brand-mark {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    aspect-ratio: 1;
    border-radius: 50% !important;
    object-fit: cover !important;
  }
  .mobile-header-brand .brand-name-lines {
    max-width: 100% !important;
    display: flex !important;
    gap: .28em;
    overflow: hidden !important;
    font-size: clamp(14px, 4.6vw, 18px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .mobile-header-brand .brand-name-lines > span { display: inline !important; }
  .mobile-header-actions { width: max-content; display: flex !important; flex-flow: row nowrap !important; gap: 1px !important; }
  .mobile-header-button { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 36px !important; min-height: 36px !important; flex: 0 0 32px !important; }
  .mobile-header-button svg { width: 20px !important; height: 20px !important; }
}

@media (max-width: 390px) {
  .mobile-store-header { grid-template-columns: 30px minmax(0, 1fr) max-content !important; gap: 3px !important; }
  .mobile-header-brand { gap: 4px !important; }
  .mobile-header-brand img,
  .mobile-header-brand .brand-mark { width: 30px !important; height: 30px !important; min-width: 30px !important; flex-basis: 30px !important; }
  .mobile-header-brand .brand-name-lines { font-size: clamp(13px, 4.1vw, 16px) !important; }
  .mobile-header-button { width: 30px !important; min-width: 30px !important; max-width: 30px !important; flex-basis: 30px !important; }
}

/* v48: final chat geometry overrides legacy composer rules */
.chat-compose-row { grid-template-columns: auto minmax(100px, 1fr) 40px 42px; gap: 6px; }
body:has(.customer-chat-app) { padding-bottom: 0; }
@media (max-width: 760px) {
  .customer-chat-app {
    height: calc(100dvh - 78px) !important;
    min-height: 420px;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .chat-compose-row { grid-template-columns: auto minmax(72px, 1fr) 38px 40px; gap: 3px; }
}
@media (max-width: 390px) {
  .chat-compose-row { grid-template-columns: auto minmax(54px, 1fr) 34px 38px; }
}

/* v50: premium homepage controls, glow countdowns, and wide product ticker */
.store-search-anchor {
  display: block;
  scroll-margin-top: 86px;
}
.store-status-row {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px max(16px, env(safe-area-inset-left)) 6px max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid rgba(var(--theme-line-rgb), .32);
  background:
    radial-gradient(circle at 50% -20%, rgba(var(--theme-accent-rgb), .24), transparent 34%),
    linear-gradient(90deg, rgba(var(--theme-card-rgb), .94), rgba(var(--theme-brand-rgb), .11), rgba(var(--theme-card2-rgb), .94));
  backdrop-filter: blur(16px);
}
.status-product-ticker {
  position: relative;
  flex: 0 1 auto;
  display: block;
  width: clamp(136px, 18vw, 238px);
  min-height: 34px;
  overflow: hidden;
  border: 1px solid rgba(var(--theme-line-rgb), .34);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(var(--theme-card-rgb), .88), rgba(var(--theme-card2-rgb), .76)),
    radial-gradient(circle at 0% 0%, rgba(var(--theme-brand-rgb), .18), transparent 30%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .13), 0 0 18px rgba(var(--theme-brand-rgb), .10);
}
.status-product-ticker-item {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  color: var(--theme-ink);
  opacity: 0;
  transform: translateY(8px) scale(.985);
  pointer-events: none;
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}
.status-product-ticker-item.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.status-product-ticker-item span {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-product-ticker-item strong {
  color: rgb(var(--theme-brand-rgb));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.store-motto {
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
  max-width: min(42vw, 520px);
  overflow: hidden;
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.08)),
    linear-gradient(120deg, rgba(var(--theme-brand-rgb), .95), rgba(var(--theme-accent-rgb), .92), rgba(var(--theme-brand-dark-rgb), .95));
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .035em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.40), 0 0 14px rgba(255,255,255,.45);
  box-shadow: 0 10px 26px rgba(var(--theme-brand-rgb), .22), 0 0 34px rgba(var(--theme-accent-rgb), .20), inset 0 1px 0 rgba(255,255,255,.35);
  animation: mottoGlowPulse 5.4s ease-in-out infinite;
}
.preorder-top-countdown {
  min-width: 0;
  flex: 0 0 auto;
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  gap: 7px;
  max-width: min(34vw, 330px);
  padding: 7px 10px;
  border: 1px solid rgba(250, 204, 21, .56);
  border-radius: 999px;
  background:
    radial-gradient(circle at 24% 10%, rgba(255,255,255,.26), transparent 22%),
    linear-gradient(135deg, #111827 0%, #7f1d1d 48%, #b45309 100%);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 12px 30px rgba(180, 83, 9, .26), 0 0 26px rgba(245, 158, 11, .20);
}
.preorder-top-countdown b {
  min-width: 0;
  overflow: hidden;
  color: #fff7ed;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preorder-top-countdown strong,
.store-offer-strip strong,
.preorder-card-countdown strong {
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-shadow: 0 0 10px rgba(255,255,255,.80), 0 0 22px rgba(250,204,21,.74), 0 0 38px rgba(249,115,22,.50);
  white-space: nowrap;
}
@keyframes mottoGlowPulse {
  0%, 100% {
    filter: saturate(1) brightness(1);
    box-shadow: 0 10px 26px rgba(var(--theme-brand-rgb), .22), 0 0 28px rgba(var(--theme-accent-rgb), .18), inset 0 1px 0 rgba(255,255,255,.35);
  }
  45% {
    filter: saturate(1.22) brightness(1.08);
    box-shadow: 0 12px 32px rgba(var(--theme-brand-rgb), .34), 0 0 42px rgba(var(--theme-accent-rgb), .32), inset 0 1px 0 rgba(255,255,255,.48);
  }
  70% {
    filter: saturate(1.12) brightness(1.03);
    box-shadow: 0 10px 30px rgba(var(--theme-accent-rgb), .26), 0 0 36px rgba(var(--theme-brand-rgb), .26), inset 0 1px 0 rgba(255,255,255,.42);
  }
}
.store-offer-strip {
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px max(16px, env(safe-area-inset-left)) 6px max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid rgba(var(--theme-line-rgb), .3);
  background:
    radial-gradient(circle at 96% 0%, rgba(250,204,21,.22), transparent 26%),
    linear-gradient(90deg, #052e16 0%, #14532d 52%, #713f12 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(20, 83, 45, .18);
}
.store-offer-strip span {
  min-width: 0;
  overflow: hidden;
  color: #f7fee7;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preorder-card-countdown {
  display: grid;
  gap: 5px;
  margin: 10px 0;
  padding: 13px 14px;
  border: 1px solid rgba(250, 204, 21, .54);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 12%, rgba(250,204,21,.32), transparent 30%),
    linear-gradient(135deg, #0f172a 0%, #7f1d1d 52%, #92400e 100%);
  box-shadow: 0 16px 34px rgba(127, 29, 29, .22), 0 0 32px rgba(245, 158, 11, .18);
}
.preorder-card-countdown span {
  color: #ffedd5;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.preorder-card-countdown strong {
  font-size: 22px;
  line-height: 1.05;
}
[data-countdown].is-ended {
  color: rgba(255,255,255,.72) !important;
  text-shadow: none !important;
}
@media (max-width: 760px) {
  .store-status-row { gap: 5px; min-height: 38px; padding: 4px 6px; }
  .status-product-ticker { width: clamp(82px, 24vw, 118px); min-height: 28px; }
  .status-product-ticker-item { gap: 4px; padding: 5px 7px; }
  .status-product-ticker-item span { font-size: 8px; }
  .status-product-ticker-item strong { font-size: 8px; }
  .store-motto { max-width: 34vw; padding: 7px 9px; font-size: 9px; letter-spacing: .01em; }
  .preorder-top-countdown { gap: 5px; padding: 5px 7px; }
  .preorder-top-countdown b { max-width: 72px; font-size: 8px; }
  .preorder-top-countdown strong { font-size: 9px; }
  .store-offer-strip { min-height: 30px; gap: 6px; padding-top: 4px; padding-bottom: 4px; }
  .store-offer-strip span { font-size: 10px; }
  .store-offer-strip strong { font-size: 10px; }
  .preorder-card-countdown { border-radius: 14px; padding: 11px 12px; }
  .preorder-card-countdown strong { font-size: 19px; }
}
@media (max-width: 430px) {
  .status-product-ticker { width: 74px; }
  .status-product-ticker-item { grid-template-columns: minmax(0, 1fr); gap: 0; text-align: center; }
  .status-product-ticker-item strong { display: none; }
  .store-motto { max-width: 38vw; }
  .preorder-top-countdown { max-width: 34vw; grid-template-columns: minmax(0, 1fr); gap: 0; text-align: center; }
  .preorder-top-countdown b { max-width: 100%; }
}

/* v50: expanded high-contrast ecommerce color systems */
.theme-swatch[style] { background: var(--sw-bg) !important; }
.theme-swatch[style] i:nth-child(1) { background: var(--sw-card) !important; }
.theme-swatch[style] i:nth-child(2) { background: var(--sw-brand) !important; }
.theme-swatch[style] i:nth-child(3) { background: var(--sw-accent) !important; }
.theme-color-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.theme-color-dots i {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
body.theme-light-pure { --theme-bg-rgb: 255,255,255; --theme-bg2-rgb: 248,250,252; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 241,245,249; --theme-line-rgb: 203,213,225; --theme-brand-rgb: 29,78,216; --theme-brand-dark-rgb: 30,64,175; --theme-accent-rgb: 249,115,22; --theme-ink: #0f172a; --theme-muted: #475569; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-milk { --theme-bg-rgb: 255,253,245; --theme-bg2-rgb: 250,244,232; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 250,246,237; --theme-line-rgb: 222,211,190; --theme-brand-rgb: 146,64,14; --theme-brand-dark-rgb: 120,53,15; --theme-accent-rgb: 234,88,12; --theme-ink: #26180b; --theme-muted: #66513a; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .12), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .09), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-porcelain { --theme-bg-rgb: 248,251,255; --theme-bg2-rgb: 235,245,255; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 240,247,255; --theme-line-rgb: 191,219,254; --theme-brand-rgb: 30,64,175; --theme-brand-dark-rgb: 30,58,138; --theme-accent-rgb: 8,145,178; --theme-ink: #0f172a; --theme-muted: #475569; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .11), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-ash { --theme-bg-rgb: 241,245,249; --theme-bg2-rgb: 226,232,240; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 248,250,252; --theme-line-rgb: 203,213,225; --theme-brand-rgb: 31,41,55; --theme-brand-dark-rgb: 17,24,39; --theme-accent-rgb: 37,99,235; --theme-ink: #111827; --theme-muted: #4b5563; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .08), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .09), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-fog { --theme-bg-rgb: 246,247,249; --theme-bg2-rgb: 235,240,243; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 242,246,247; --theme-line-rgb: 203,213,225; --theme-brand-rgb: 15,118,110; --theme-brand-dark-rgb: 17,94,89; --theme-accent-rgb: 100,116,139; --theme-ink: #10201f; --theme-muted: #52636a; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .07), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-ice-blue { --theme-bg-rgb: 239,248,255; --theme-bg2-rgb: 224,242,254; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 240,249,255; --theme-line-rgb: 186,230,253; --theme-brand-rgb: 7,89,133; --theme-brand-dark-rgb: 12,74,110; --theme-accent-rgb: 14,165,233; --theme-ink: #082f49; --theme-muted: #466577; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .11), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .10), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-sky { --theme-bg-rgb: 240,249,255; --theme-bg2-rgb: 224,242,254; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 236,249,255; --theme-line-rgb: 186,230,253; --theme-brand-rgb: 3,105,161; --theme-brand-dark-rgb: 7,89,133; --theme-accent-rgb: 2,132,199; --theme-ink: #082f49; --theme-muted: #486574; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .11), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .09), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-aqua { --theme-bg-rgb: 239,253,251; --theme-bg2-rgb: 204,251,241; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 240,253,250; --theme-line-rgb: 153,246,228; --theme-brand-rgb: 15,118,110; --theme-brand-dark-rgb: 17,94,89; --theme-accent-rgb: 6,182,212; --theme-ink: #0f2f2c; --theme-muted: #456662; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .10), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-mint { --theme-bg-rgb: 240,253,244; --theme-bg2-rgb: 220,252,231; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 242,252,246; --theme-line-rgb: 187,247,208; --theme-brand-rgb: 21,128,61; --theme-brand-dark-rgb: 22,101,52; --theme-accent-rgb: 22,163,74; --theme-ink: #10261a; --theme-muted: #496354; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .09), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-sage { --theme-bg-rgb: 245,247,239; --theme-bg2-rgb: 235,240,222; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 247,250,240; --theme-line-rgb: 207,216,190; --theme-brand-rgb: 77,124,15; --theme-brand-dark-rgb: 63,98,18; --theme-accent-rgb: 101,163,13; --theme-ink: #1d2512; --theme-muted: #5a664b; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-cream { --theme-bg-rgb: 255,247,237; --theme-bg2-rgb: 254,237,213; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 255,250,244; --theme-line-rgb: 254,215,170; --theme-brand-rgb: 194,65,12; --theme-brand-dark-rgb: 154,52,18; --theme-accent-rgb: 245,158,11; --theme-ink: #2b170c; --theme-muted: #72513a; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .11), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .10), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-sand { --theme-bg-rgb: 250,243,228; --theme-bg2-rgb: 244,232,209; --theme-card-rgb: 255,250,240; --theme-card2-rgb: 250,244,232; --theme-line-rgb: 222,203,170; --theme-brand-rgb: 146,64,14; --theme-brand-dark-rgb: 120,53,15; --theme-accent-rgb: 217,119,6; --theme-ink: #24170a; --theme-muted: #68553c; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .11), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .09), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-honey { --theme-bg-rgb: 255,248,220; --theme-bg2-rgb: 254,240,138; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 255,251,235; --theme-line-rgb: 245,208,91; --theme-brand-rgb: 161,98,7; --theme-brand-dark-rgb: 133,77,14; --theme-accent-rgb: 202,138,4; --theme-ink: #271b05; --theme-muted: #6c5723; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .12), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .10), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-peach { --theme-bg-rgb: 255,241,232; --theme-bg2-rgb: 254,215,200; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 255,247,243; --theme-line-rgb: 251,207,189; --theme-brand-rgb: 194,65,12; --theme-brand-dark-rgb: 154,52,18; --theme-accent-rgb: 251,113,133; --theme-ink: #2b130c; --theme-muted: #745046; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .10), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-blush { --theme-bg-rgb: 255,245,245; --theme-bg2-rgb: 254,226,226; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 255,247,247; --theme-line-rgb: 254,202,202; --theme-brand-rgb: 185,28,28; --theme-brand-dark-rgb: 153,27,27; --theme-accent-rgb: 249,115,22; --theme-ink: #2b1010; --theme-muted: #724747; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-coral { --theme-bg-rgb: 255,247,243; --theme-bg2-rgb: 255,228,220; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 255,248,245; --theme-line-rgb: 254,205,211; --theme-brand-rgb: 194,65,12; --theme-brand-dark-rgb: 154,52,18; --theme-accent-rgb: 244,63,94; --theme-ink: #2c130d; --theme-muted: #744f45; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .10), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-sakura { --theme-bg-rgb: 255,241,247; --theme-bg2-rgb: 252,231,243; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 253,242,248; --theme-line-rgb: 251,207,232; --theme-brand-rgb: 190,24,93; --theme-brand-dark-rgb: 157,23,77; --theme-accent-rgb: 219,39,119; --theme-ink: #2b1020; --theme-muted: #714a60; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-lavender { --theme-bg-rgb: 245,243,255; --theme-bg2-rgb: 237,233,254; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 250,245,255; --theme-line-rgb: 221,214,254; --theme-brand-rgb: 67,56,202; --theme-brand-dark-rgb: 55,48,163; --theme-accent-rgb: 124,58,237; --theme-ink: #1e1b4b; --theme-muted: #5d5780; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .09), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-lilac { --theme-bg-rgb: 250,245,255; --theme-bg2-rgb: 243,232,255; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 252,247,255; --theme-line-rgb: 233,213,255; --theme-brand-rgb: 109,40,217; --theme-brand-dark-rgb: 91,33,182; --theme-accent-rgb: 147,51,234; --theme-ink: #28124a; --theme-muted: #69547d; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .09), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-periwinkle { --theme-bg-rgb: 238,242,255; --theme-bg2-rgb: 224,231,255; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 245,247,255; --theme-line-rgb: 199,210,254; --theme-brand-rgb: 55,48,163; --theme-brand-dark-rgb: 49,46,129; --theme-accent-rgb: 37,99,235; --theme-ink: #172554; --theme-muted: #53607f; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-cool-gray { --theme-bg-rgb: 243,244,246; --theme-bg2-rgb: 229,231,235; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 249,250,251; --theme-line-rgb: 209,213,219; --theme-brand-rgb: 31,41,55; --theme-brand-dark-rgb: 17,24,39; --theme-accent-rgb: 2,132,199; --theme-ink: #111827; --theme-muted: #4b5563; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .08), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .09), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-stone { --theme-bg-rgb: 250,250,249; --theme-bg2-rgb: 245,245,244; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 250,250,249; --theme-line-rgb: 214,211,209; --theme-brand-rgb: 68,64,60; --theme-brand-dark-rgb: 41,37,36; --theme-accent-rgb: 15,118,110; --theme-ink: #1c1917; --theme-muted: #57534e; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .08), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-mocha { --theme-bg-rgb: 251,244,234; --theme-bg2-rgb: 242,229,211; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 251,246,239; --theme-line-rgb: 220,202,179; --theme-brand-rgb: 124,45,18; --theme-brand-dark-rgb: 100,37,15; --theme-accent-rgb: 161,98,7; --theme-ink: #23170f; --theme-muted: #665341; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-espresso { --theme-bg-rgb: 248,241,231; --theme-bg2-rgb: 237,225,210; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 249,244,237; --theme-line-rgb: 214,197,175; --theme-brand-rgb: 63,42,29; --theme-brand-dark-rgb: 45,31,22; --theme-accent-rgb: 180,83,9; --theme-ink: #21160f; --theme-muted: #5f5045; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .09), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-nord { --theme-bg-rgb: 238,246,251; --theme-bg2-rgb: 224,238,247; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 242,248,252; --theme-line-rgb: 190,209,222; --theme-brand-rgb: 46,95,134; --theme-brand-dark-rgb: 38,78,110; --theme-accent-rgb: 14,116,144; --theme-ink: #102535; --theme-muted: #4d6371; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-teal { --theme-bg-rgb: 240,253,250; --theme-bg2-rgb: 204,251,241; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 242,252,250; --theme-line-rgb: 153,246,228; --theme-brand-rgb: 15,118,110; --theme-brand-dark-rgb: 17,94,89; --theme-accent-rgb: 20,184,166; --theme-ink: #0d2f2a; --theme-muted: #476762; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .10), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-cyan { --theme-bg-rgb: 236,254,255; --theme-bg2-rgb: 207,250,254; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 240,253,255; --theme-line-rgb: 165,243,252; --theme-brand-rgb: 14,116,144; --theme-brand-dark-rgb: 21,94,117; --theme-accent-rgb: 6,182,212; --theme-ink: #0e3038; --theme-muted: #486873; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .10), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-indigo { --theme-bg-rgb: 245,247,255; --theme-bg2-rgb: 224,231,255; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 246,248,255; --theme-line-rgb: 199,210,254; --theme-brand-rgb: 55,48,163; --theme-brand-dark-rgb: 49,46,129; --theme-accent-rgb: 79,70,229; --theme-ink: #172554; --theme-muted: #545f80; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .09), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-denim { --theme-bg-rgb: 241,246,255; --theme-bg2-rgb: 219,234,254; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 245,249,255; --theme-line-rgb: 191,219,254; --theme-brand-rgb: 29,78,216; --theme-brand-dark-rgb: 30,64,175; --theme-accent-rgb: 37,99,235; --theme-ink: #10204d; --theme-muted: #50627d; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-olive { --theme-bg-rgb: 248,250,240; --theme-bg2-rgb: 236,243,214; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 249,252,240; --theme-line-rgb: 217,226,188; --theme-brand-rgb: 77,124,15; --theme-brand-dark-rgb: 63,98,18; --theme-accent-rgb: 132,204,22; --theme-ink: #1c250d; --theme-muted: #59664a; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-lime { --theme-bg-rgb: 247,254,231; --theme-bg2-rgb: 236,252,203; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 250,255,241; --theme-line-rgb: 217,249,157; --theme-brand-rgb: 63,98,18; --theme-brand-dark-rgb: 54,83,20; --theme-accent-rgb: 101,163,13; --theme-ink: #1a250a; --theme-muted: #556647; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-plum { --theme-bg-rgb: 255,247,255; --theme-bg2-rgb: 250,232,255; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 253,244,255; --theme-line-rgb: 245,208,254; --theme-brand-rgb: 134,25,143; --theme-brand-dark-rgb: 112,26,117; --theme-accent-rgb: 190,24,93; --theme-ink: #2b1030; --theme-muted: #6d4e72; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-ruby { --theme-bg-rgb: 255,245,247; --theme-bg2-rgb: 255,228,232; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 255,247,249; --theme-line-rgb: 254,205,211; --theme-brand-rgb: 185,28,28; --theme-brand-dark-rgb: 153,27,27; --theme-accent-rgb: 225,29,72; --theme-ink: #2b1015; --theme-muted: #72464f; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .10), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }
body.theme-light-graphite { --theme-bg-rgb: 247,247,245; --theme-bg2-rgb: 232,232,228; --theme-card-rgb: 255,255,255; --theme-card2-rgb: 249,249,247; --theme-line-rgb: 212,212,207; --theme-brand-rgb: 39,39,42; --theme-brand-dark-rgb: 24,24,27; --theme-accent-rgb: 202,138,4; --theme-ink: #18181b; --theme-muted: #52525b; --theme-on-brand: #ffffff; --theme-page-bg: radial-gradient(circle at 88% 0%, rgba(var(--theme-brand-rgb), .08), transparent 30%), radial-gradient(circle at 10% 14%, rgba(var(--theme-accent-rgb), .08), transparent 28%), linear-gradient(180deg, rgb(var(--theme-bg2-rgb)) 0%, rgb(var(--theme-bg-rgb)) 48%, rgb(var(--theme-bg-rgb)) 100%); }

/* v51: centered status polish, compact chat, and perceived performance */
.status-product-ticker-2,
.status-product-ticker-3 { display: none; }
.store-motto {
  border-color: rgba(180, 83, 9, .22) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,247,237,.88)) !important,
    radial-gradient(circle at 50% -35%, rgba(250,204,21,.35), transparent 48%) !important;
  color: #1f1306 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 0 14px rgba(245,158,11,.26) !important;
}
.preorder-top-countdown {
  max-width: min(31vw, 300px);
  overflow: hidden;
}
.preorder-top-countdown b { max-width: 130px; }
.preorder-top-countdown strong,
.preorder-card-countdown strong,
.preorder-detail-countdown strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(11px, 1.6vw, 16px);
}
.preorder-card-countdown {
  width: 100%;
  min-width: 0;
  justify-items: center;
  padding: 9px 10px;
  overflow: hidden;
}
.preorder-card-countdown strong {
  font-size: clamp(13px, 4.2vw, 18px);
  line-height: 1;
  white-space: normal;
  overflow-wrap: anywhere;
}
.preorder-detail-card {
  align-items: start;
}
.preorder-detail-countdown {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 760px);
  margin: 0 auto 10px;
  padding: 11px 15px;
  border: 1px solid rgba(250, 204, 21, .58);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(250,204,21,.25), transparent 28%),
    linear-gradient(135deg, #0f172a 0%, #7f1d1d 52%, #92400e 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgba(127,29,29,.20), 0 0 30px rgba(245,158,11,.16);
}
.preorder-detail-countdown span {
  color: #ffedd5;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.preorder-detail-countdown strong {
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(255,255,255,.78), 0 0 22px rgba(250,204,21,.72);
}
body:not(.staff-area) .qty-control,
body:not(.staff-area) .qty-control.mini,
.cart-panel .qty-control {
  gap: 4px !important;
  padding: 3px !important;
}
body:not(.staff-area) .qty-control button,
body:not(.staff-area) .qty-control.mini button,
.cart-panel .qty-control button {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  font-size: 13px !important;
}
body:not(.staff-area) .qty-control span,
body:not(.staff-area) .qty-control.mini span,
.cart-panel .qty-control span {
  min-width: 24px !important;
  font-size: 12px !important;
}
.text-only-chat-composer .chat-compose-row {
  grid-template-columns: minmax(0, 1fr) 42px 44px !important;
}
.text-only-chat-composer .chat-refresh,
.text-only-chat-composer .chat-send {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 950;
}
.text-only-chat-composer .chat-refresh {
  background: rgba(var(--theme-card2-rgb), .98);
  color: rgb(var(--theme-brand-rgb));
  border: 1px solid rgba(var(--theme-line-rgb), .40);
}
.text-only-chat-composer .chat-refresh.is-refreshing {
  animation: chatRefreshSpin .45s ease;
}
@keyframes chatRefreshSpin {
  to { transform: rotate(360deg); }
}
.page-transition-veil {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  grid-template-rows: 1fr auto 18vh;
  place-items: center;
  background: rgba(3, 7, 18, .52);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: opacity .16s ease;
}
.page-transition-veil.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.page-transition-veil span {
  grid-row: 2;
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(15,23,42,.82);
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  font-weight: 900;
}
.page-transition-veil p {
  grid-row: 1;
  align-self: end;
  width: min(86vw, 620px);
  margin: 0 0 12vh;
  padding: 16px 20px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 22px;
  background: rgba(255, 251, 235, .92);
  color: #1f1306;
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
  font-size: clamp(18px, 4.6vw, 34px);
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
}
.initial-page-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  grid-template-rows: 1fr auto 18vh;
  place-items: center;
  background:
    radial-gradient(circle at 22% 16%, rgba(var(--theme-accent-rgb), .22), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(var(--theme-brand-rgb), .20), transparent 28%),
    linear-gradient(180deg, rgba(var(--theme-bg2-rgb), .98), rgba(var(--theme-bg-rgb), .98));
  color: var(--theme-ink);
  opacity: 1;
  pointer-events: auto;
  transition: opacity .22s ease, visibility .22s ease;
}
.initial-page-loader p {
  grid-row: 1;
  align-self: end;
  width: min(86vw, 640px);
  margin: 0 0 12vh;
  padding: 18px 22px;
  border: 1px solid rgba(var(--theme-line-rgb), .40);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(var(--theme-card-rgb), .98), rgba(var(--theme-card2-rgb), .92)),
    radial-gradient(circle at 10% 0%, rgba(var(--theme-accent-rgb), .16), transparent 34%);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .18), 0 0 34px rgba(var(--theme-brand-rgb), .10);
  color: var(--theme-ink);
  font-size: clamp(20px, 5vw, 38px);
  font-weight: 950;
  line-height: 1.12;
  text-align: center;
}
.initial-page-loader span {
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid rgba(var(--theme-brand-rgb), .24);
  border-radius: 999px;
  background: rgba(var(--theme-card-rgb), .94);
  color: rgb(var(--theme-brand-rgb));
  box-shadow: 0 16px 42px rgba(15, 23, 42, .15);
  font-weight: 950;
}
.initial-page-loader span::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 3px solid rgba(var(--theme-brand-rgb), .20);
  border-top-color: rgb(var(--theme-brand-rgb));
  border-radius: 50%;
  animation: initialLoaderSpin .8s linear infinite;
}
body:not(.initial-load-complete) > :not(.initial-page-loader):not(script) {
  visibility: hidden;
}
body.initial-load-complete > :not(script) {
  visibility: visible;
}
body.initial-load-complete .initial-page-loader,
.initial-page-loader.is-hiding {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
@keyframes initialLoaderSpin {
  to { transform: rotate(360deg); }
}
@media (min-width: 1280px) {
  .status-product-ticker-2 { display: block; }
}
@media (min-width: 1536px) {
  .status-product-ticker-3 { display: block; }
}
@media (max-width: 760px) {
  .status-product-ticker { display: none !important; }
  .store-status-row { gap: 8px; }
  .store-motto { max-width: 44vw; }
  .preorder-top-countdown {
    max-width: 46vw;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 2px;
    text-align: center;
  }
  .preorder-top-countdown b {
    display: block;
    max-width: 100%;
    color: #fff7ed;
    font-size: clamp(8px, 2.3vw, 10px);
    line-height: 1.05;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .preorder-top-countdown strong {
    font-size: clamp(8px, 2.5vw, 10px);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .preorder-card-countdown strong {
    font-size: clamp(10px, 3.2vw, 14px);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .preorder-detail-countdown {
    gap: 7px;
    padding: 10px 11px;
    border-radius: 14px;
  }
  .preorder-detail-countdown span { font-size: 9px; }
  .preorder-detail-countdown strong { font-size: 15px; }
  body:has(.customer-chat-app) {
    min-height: 100dvh;
    padding-bottom: 0 !important;
    overflow: hidden;
  }
  .customer-chat-app {
    height: calc(100dvh - 58px) !important;
    min-height: 0 !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  .customer-chat-app .chat-composer {
    margin: 0 8px max(8px, env(safe-area-inset-bottom));
    border-radius: 18px;
  }
  .text-only-chat-composer .chat-compose-row {
    grid-template-columns: minmax(0, 1fr) 38px 40px !important;
    gap: 5px !important;
  }
  .text-only-chat-composer .chat-refresh,
  .text-only-chat-composer .chat-send {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
}
@media (max-width: 430px) {
  .store-motto { max-width: 43vw; }
  .preorder-top-countdown { max-width: 49vw; }
}

.custom-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.custom-color-grid label {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  padding: 12px;
  border: 1px solid rgba(var(--theme-line-rgb), .28);
  border-radius: 14px;
  background: rgba(var(--theme-card2-rgb), .68);
  color: var(--theme-ink);
  font-weight: 900;
}
.custom-color-grid input {
  grid-row: 1 / span 2;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 14px !important;
}
.custom-color-grid span {
  color: var(--theme-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
}
.quote-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quote-preview-list span,
.quote-preview-list em {
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 360px);
  padding: 8px 11px;
  border: 1px solid rgba(var(--theme-line-rgb), .34);
  border-radius: 999px;
  background: rgba(var(--theme-card2-rgb), .78);
  color: var(--theme-ink);
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quote-preview-list em {
  color: var(--theme-muted);
  font-style: normal;
}
.inline-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.loading-quote-manager {
  max-height: 430px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(var(--theme-line-rgb), .32);
  border-radius: 16px;
  background: rgba(var(--theme-card2-rgb), .50);
}
.loading-quote-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(var(--theme-line-rgb), .28);
  border-radius: 12px;
  background: rgba(var(--theme-card-rgb), .82);
}
.loading-quote-row span {
  color: var(--theme-ink);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.35;
}

/* v54: clearer admin theme swatches and separate custom color mode */
.theme-mode-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 13px 15px;
  border: 1px solid rgba(var(--theme-line-rgb), .34);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--theme-brand-rgb), .14), transparent 34%),
    rgba(var(--theme-card2-rgb), .82);
  color: var(--theme-ink);
  cursor: pointer;
}
.theme-mode-card input {
  width: 18px !important;
  height: 18px !important;
  accent-color: rgb(var(--theme-brand-rgb));
}
.theme-mode-card span {
  display: grid;
  gap: 2px;
}
.theme-mode-card strong {
  color: var(--theme-ink);
  font-size: 14px;
  font-weight: 950;
}
.theme-mode-card small {
  color: var(--theme-muted);
  line-height: 1.35;
}
.theme-mode-card.selected {
  border-color: rgba(var(--theme-brand-rgb), .78);
  box-shadow: 0 0 0 3px rgba(var(--theme-brand-rgb), .10), 0 16px 36px rgba(15, 23, 42, .12);
}
body[class*="theme-"] .theme-option {
  background:
    linear-gradient(145deg, rgba(var(--theme-card-rgb), .94), rgba(var(--theme-card2-rgb), .82)) !important;
  color: var(--theme-ink);
}
body[class*="theme-"] .theme-option.selected {
  box-shadow: 0 0 0 3px rgba(var(--theme-brand-rgb), .12), 0 14px 34px rgba(15, 23, 42, .13);
}
body[class*="theme-"] .theme-option strong {
  color: var(--theme-ink) !important;
}
body[class*="theme-"] .theme-option small {
  color: var(--theme-muted) !important;
}
.theme-option .theme-swatch {
  height: 56px;
  grid-template-columns: 1.15fr .95fr .7fr;
  background:
    linear-gradient(135deg, var(--sw-bg), var(--sw-card)) !important;
  border: 1px solid rgba(15, 23, 42, .18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 10px 22px rgba(15, 23, 42, .12);
}
.theme-option .theme-swatch i:nth-child(1) { background: var(--sw-card) !important; }
.theme-option .theme-swatch i:nth-child(2) { background: var(--sw-brand) !important; }
.theme-option .theme-swatch i:nth-child(3) { background: var(--sw-accent) !important; }
.theme-color-dots {
  margin-top: -2px;
  padding: 5px;
  width: max-content;
  border: 1px solid rgba(var(--theme-line-rgb), .34);
  border-radius: 999px;
  background: rgba(var(--theme-card-rgb), .82);
}
.theme-color-dots i {
  width: 20px;
  height: 20px;
  border-color: rgba(15, 23, 42, .22);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18), inset 0 0 0 1px rgba(255,255,255,.45);
}
.theme-color-dots .sw-bg { background: var(--sw-bg); }
.theme-color-dots .sw-card { background: var(--sw-card); }
.theme-color-dots .sw-brand { background: var(--sw-brand); }
.theme-color-dots .sw-accent { background: var(--sw-accent); }
.theme-palette-light-royal { --sw-bg: #f8fafc; --sw-card: #ffffff; --sw-brand: #2563eb; --sw-accent: #ea580c; }
.theme-palette-light-emerald { --sw-bg: #f7fcf9; --sw-card: #ffffff; --sw-brand: #047857; --sw-accent: #0f766e; }
.theme-palette-light-amber { --sw-bg: #fffbeb; --sw-card: #fffdf7; --sw-brand: #b45309; --sw-accent: #d97706; }
.theme-palette-light-rose { --sw-bg: #fff7fb; --sw-card: #ffffff; --sw-brand: #be123c; --sw-accent: #7c3aed; }
.theme-palette-light-slate { --sw-bg: #f8fafc; --sw-card: #ffffff; --sw-brand: #0f172a; --sw-accent: #3b82f6; }
.theme-palette-light-pure { --sw-bg: #ffffff; --sw-card: #ffffff; --sw-brand: #1d4ed8; --sw-accent: #f97316; }
.theme-palette-light-milk { --sw-bg: #fffdf5; --sw-card: #ffffff; --sw-brand: #92400e; --sw-accent: #ea580c; }
.theme-palette-light-porcelain { --sw-bg: #f8fbff; --sw-card: #ffffff; --sw-brand: #1e40af; --sw-accent: #0891b2; }
.theme-palette-light-ash { --sw-bg: #f1f5f9; --sw-card: #ffffff; --sw-brand: #1f2937; --sw-accent: #2563eb; }
.theme-palette-light-fog { --sw-bg: #f6f7f9; --sw-card: #ffffff; --sw-brand: #0f766e; --sw-accent: #64748b; }
.theme-palette-light-ice-blue { --sw-bg: #eff8ff; --sw-card: #ffffff; --sw-brand: #075985; --sw-accent: #0ea5e9; }
.theme-palette-light-sky { --sw-bg: #f0f9ff; --sw-card: #ffffff; --sw-brand: #0369a1; --sw-accent: #0284c7; }
.theme-palette-light-aqua { --sw-bg: #effdfb; --sw-card: #ffffff; --sw-brand: #0f766e; --sw-accent: #06b6d4; }
.theme-palette-light-mint { --sw-bg: #f0fdf4; --sw-card: #ffffff; --sw-brand: #15803d; --sw-accent: #16a34a; }
.theme-palette-light-sage { --sw-bg: #f5f7ef; --sw-card: #ffffff; --sw-brand: #4d7c0f; --sw-accent: #65a30d; }
.theme-palette-light-cream { --sw-bg: #fff7ed; --sw-card: #ffffff; --sw-brand: #c2410c; --sw-accent: #f59e0b; }
.theme-palette-light-sand { --sw-bg: #faf3e4; --sw-card: #fffaf0; --sw-brand: #92400e; --sw-accent: #d97706; }
.theme-palette-light-honey { --sw-bg: #fff8dc; --sw-card: #ffffff; --sw-brand: #a16207; --sw-accent: #ca8a04; }
.theme-palette-light-peach { --sw-bg: #fff1e8; --sw-card: #ffffff; --sw-brand: #c2410c; --sw-accent: #fb7185; }
.theme-palette-light-blush { --sw-bg: #fff5f5; --sw-card: #ffffff; --sw-brand: #b91c1c; --sw-accent: #f97316; }
.theme-palette-light-coral { --sw-bg: #fff7f3; --sw-card: #ffffff; --sw-brand: #c2410c; --sw-accent: #f43f5e; }
.theme-palette-light-sakura { --sw-bg: #fff1f7; --sw-card: #ffffff; --sw-brand: #be185d; --sw-accent: #db2777; }
.theme-palette-light-lavender { --sw-bg: #f5f3ff; --sw-card: #ffffff; --sw-brand: #4338ca; --sw-accent: #7c3aed; }
.theme-palette-light-lilac { --sw-bg: #faf5ff; --sw-card: #ffffff; --sw-brand: #6d28d9; --sw-accent: #9333ea; }
.theme-palette-light-periwinkle { --sw-bg: #eef2ff; --sw-card: #ffffff; --sw-brand: #3730a3; --sw-accent: #2563eb; }
.theme-palette-light-cool-gray { --sw-bg: #f3f4f6; --sw-card: #ffffff; --sw-brand: #1f2937; --sw-accent: #0284c7; }
.theme-palette-light-stone { --sw-bg: #fafaf9; --sw-card: #ffffff; --sw-brand: #44403c; --sw-accent: #0f766e; }
.theme-palette-light-mocha { --sw-bg: #fbf4ea; --sw-card: #ffffff; --sw-brand: #7c2d12; --sw-accent: #a16207; }
.theme-palette-light-espresso { --sw-bg: #f8f1e7; --sw-card: #ffffff; --sw-brand: #3f2a1d; --sw-accent: #b45309; }
.theme-palette-light-nord { --sw-bg: #eef6fb; --sw-card: #ffffff; --sw-brand: #2e5f86; --sw-accent: #0e7490; }
.theme-palette-light-teal { --sw-bg: #f0fdfa; --sw-card: #ffffff; --sw-brand: #0f766e; --sw-accent: #14b8a6; }
.theme-palette-light-cyan { --sw-bg: #ecfeff; --sw-card: #ffffff; --sw-brand: #0e7490; --sw-accent: #06b6d4; }
.theme-palette-light-indigo { --sw-bg: #f5f7ff; --sw-card: #ffffff; --sw-brand: #3730a3; --sw-accent: #4f46e5; }
.theme-palette-light-denim { --sw-bg: #f1f6ff; --sw-card: #ffffff; --sw-brand: #1d4ed8; --sw-accent: #2563eb; }
.theme-palette-light-olive { --sw-bg: #f8faf0; --sw-card: #ffffff; --sw-brand: #4d7c0f; --sw-accent: #84cc16; }
.theme-palette-light-lime { --sw-bg: #f7fee7; --sw-card: #ffffff; --sw-brand: #3f6212; --sw-accent: #65a30d; }
.theme-palette-light-plum { --sw-bg: #fff7ff; --sw-card: #ffffff; --sw-brand: #86198f; --sw-accent: #be185d; }
.theme-palette-light-ruby { --sw-bg: #fff5f7; --sw-card: #ffffff; --sw-brand: #b91c1c; --sw-accent: #e11d48; }
.theme-palette-light-graphite { --sw-bg: #f7f7f5; --sw-card: #ffffff; --sw-brand: #27272a; --sw-accent: #ca8a04; }
.theme-palette-dark-obsidian { --sw-bg: #080c14; --sw-card: #111927; --sw-brand: #f97316; --sw-accent: #fbbf24; }
.theme-palette-dark-navy { --sw-bg: #061222; --sw-card: #0d1b30; --sw-brand: #2563eb; --sw-accent: #7dd3fc; }
.theme-palette-dark-forest { --sw-bg: #041914; --sw-card: #0d241f; --sw-brand: #10b981; --sw-accent: #a7f3d0; }
.theme-palette-dark-burgundy { --sw-bg: #190a14; --sw-card: #271521; --sw-brand: #be123c; --sw-accent: #fdba74; }
.theme-palette-dark-luxury { --sw-bg: #080808; --sw-card: #181612; --sw-brand: #d4af37; --sw-accent: #fef08a; }
.custom-theme-panel:not(.is-active) .custom-color-grid {
  display: none;
}
.custom-theme-panel.is-active .custom-color-grid {
  animation: fadeUp .18s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* v56: one centered storefront rhythm across header, banners, tabs, and sections */
body:not(.staff-area) {
  --store-gutter: clamp(16px, 4vw, 72px);
  --store-content-max: 1440px;
  --store-content-width: min(var(--store-content-max), calc(100vw - (var(--store-gutter) * 2)));
}
body:not(.staff-area) .desktop-store-header,
body:not(.staff-area) .home-banner-layout,
body:not(.staff-area) .category-only-shell,
body:not(.staff-area) .compact-preorders,
body:not(.staff-area) .catalogue-section,
body:not(.staff-area) .store-search-section {
  width: var(--store-content-width) !important;
  max-width: var(--store-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body:not(.staff-area) .store-status-row {
  padding-left: max(var(--store-gutter), calc((100vw - var(--store-content-max)) / 2));
  padding-right: max(var(--store-gutter), calc((100vw - var(--store-content-max)) / 2));
}
body:not(.staff-area) .category-only-shell.storefront-shell {
  position: relative;
  top: auto;
  z-index: 8;
  margin-top: 14px !important;
  margin-bottom: 20px !important;
  padding: 10px 12px;
  border: 1px solid rgba(var(--theme-line-rgb), .24);
  border-radius: 0;
  background: rgba(var(--theme-card-rgb), .72);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .10);
}
body:not(.staff-area) .category-tabs-compact {
  justify-content: center;
}
body:not(.staff-area) .home-banner-layout {
  align-items: stretch;
}
body:not(.staff-area) .compact-preorders,
body:not(.staff-area) .catalogue-section {
  box-sizing: border-box;
}
body:not(.staff-area) .preorder-grid.centered-products,
body:not(.staff-area) .product-grid-v11.centered-products {
  justify-content: center;
}
@media (max-width: 760px) {
  body:not(.staff-area) {
    --store-content-width: min(100%, calc(100vw - 20px));
  }
  body:not(.staff-area) .home-banner-layout {
    grid-template-columns: 1fr;
  }
  body:not(.staff-area) .home-banner-side {
    display: none;
  }
  .inline-field-row {
    grid-template-columns: 1fr;
  }
  .loading-quote-row {
    grid-template-columns: 1fr;
  }
}

/* v53: rotating product galleries and pan-zoom detail images */
.media-carousel .carousel-media {
  opacity: 0;
  transition: opacity .45s ease, transform .38s cubic-bezier(.2, .75, .25, 1);
}
.media-carousel .carousel-media.active {
  opacity: 1;
}
.item-card .product-media-v11 .carousel-media {
  display: block;
}
.detail-gallery .carousel-media {
  display: block;
  position: absolute;
  inset: 0;
}
.detail-gallery .detail-photo {
  position: relative;
}
.product-detail-v11 .zoomable-product-image {
  cursor: zoom-in;
  touch-action: none;
  transform: translate3d(var(--zoom-x, 0px), var(--zoom-y, 0px), 0) scale(1);
}
.product-detail-v11 .detail-photo.is-image-zoomed .zoomable-product-image.active {
  cursor: grab;
  transform: translate3d(var(--zoom-x, 0px), var(--zoom-y, 0px), 0) scale(1.75);
}
.product-detail-v11 .detail-photo.is-image-zoomed .zoomable-product-image.active:active {
  cursor: grabbing;
}
.detail-thumbnails::-webkit-scrollbar {
  height: 6px;
}
.detail-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(var(--theme-line-rgb), .7);
  border-radius: 999px;
}
@media (max-width: 760px) {
  body[class*="theme-"] .product-detail-v11 .detail-photo {
    height: clamp(230px, 68vw, 310px);
  }
  .detail-thumbnail {
    flex-basis: 54px;
    width: 54px;
    height: 48px;
  }
}

/* v52: cleaner pre-order date chips */
.preorder-date-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 9px 0;
}
.preorder-date-chips span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(var(--theme-line-rgb), .34);
  border-radius: 13px;
  background:
    radial-gradient(circle at 92% 0%, rgba(var(--theme-accent-rgb), .18), transparent 32%),
    linear-gradient(135deg, rgba(var(--theme-card-rgb), .98), rgba(var(--theme-card2-rgb), .92));
  color: var(--theme-muted);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .045em;
  line-height: 1.1;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .10);
}
.preorder-date-chips b {
  display: block;
  overflow: hidden;
  color: var(--theme-ink);
  font-size: 11px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.preorder-date-chips-detail {
  margin-bottom: 0;
}
.preorder-info-box > strong {
  display: block;
  margin-bottom: 8px;
}
@media (max-width: 520px) {
  .preorder-date-chips {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .preorder-date-chips span {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: 8px 9px;
  }
  .preorder-date-chips b {
    text-align: right;
    font-size: 10px;
  }
}

/* v53: confirmed admin cleanup controls */
.admin-clear-form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.admin-clear-form input {
  width: 132px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--theme-line-rgb), .62);
  border-radius: 8px;
  background: rgba(var(--theme-card-rgb), .94);
  color: var(--theme-ink);
  font: inherit;
}
.admin-clear-form .danger {
  min-height: 36px;
  white-space: nowrap;
}
.support-clear-form {
  margin: 0 12px 10px;
}
.settings-entry-list {
  display: grid;
  gap: 10px;
}
.settings-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(var(--theme-line-rgb), .34);
  border-radius: 10px;
  background: rgba(var(--theme-card-rgb), .72);
}
.settings-entry-row input:not([type="checkbox"]) {
  min-width: 0;
}
.banner-entry-row {
  grid-template-columns: 140px minmax(0, 1fr) auto auto;
}
.banner-entry-row .preview-banner {
  width: 140px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
}
.social-admin-row.settings-entry-row {
  grid-template-columns: minmax(120px, .75fr) minmax(0, 1.25fr) auto auto;
}
.footer-section-admin-head {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.footer-item-admin {
  grid-template-columns: minmax(140px, .7fr) minmax(180px, 1.3fr) auto auto;
}
.loading-quote-row.settings-entry-row {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}
@media (max-width: 720px) {
  .admin-clear-form {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }
  .admin-clear-form input,
  .admin-clear-form .danger {
    width: 100%;
  }
  .settings-entry-row,
  .banner-entry-row,
  .social-admin-row.settings-entry-row,
  .footer-section-admin-head,
  .footer-item-admin,
  .loading-quote-row.settings-entry-row {
    grid-template-columns: 1fr;
  }
  .banner-entry-row .preview-banner {
    width: 100%;
    height: auto;
    max-height: 140px;
  }
}

/* v56: manager catalogue uses the same responsive staff shell as admin */
@media (min-width: 980px) {
  .manager-area .admin-console-topbar {
    padding-left: 310px;
  }
  .manager-area .page {
    padding: 22px 24px 34px 314px;
  }
}

/* v57: mobile staff catalogue controls */
.staff-bottom-nav {
  display: none;
}
.staff-tick-form {
  margin: 0;
}
.staff-tick-form-compact {
  display: flex;
  justify-content: center;
}
.staff-tick-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 118px;
  cursor: pointer;
  user-select: none;
}
.staff-tick-toggle input[type="checkbox"],
.staff-tick-toggle input[type="hidden"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.staff-tick-box {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 8px;
  border: 2px solid rgba(148, 163, 184, .75);
  background: rgba(15, 23, 42, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.staff-tick-box::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  opacity: 0;
  transform: rotate(45deg) scale(.75);
  transition: opacity .16s ease, transform .16s ease;
}
.staff-tick-toggle input[type="checkbox"]:checked + .staff-tick-box {
  border-color: #10b981;
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 8px 18px rgba(16, 185, 129, .24);
}
.staff-tick-toggle input[type="checkbox"]:checked + .staff-tick-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.staff-tick-text {
  color: var(--theme-ink, #e5e7eb);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
.staff-tick-toggle.is-off .staff-tick-text {
  color: #f97316;
}
.availability-tick-form {
  grid-template-columns: minmax(126px, auto) minmax(220px, 1fr) auto;
  align-items: center;
}
.availability-switch-form {
  grid-template-columns: minmax(142px, auto) minmax(160px, 1fr) auto;
}
.availability-slider {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 142px;
  cursor: pointer;
  user-select: none;
}
.availability-slider input[type="checkbox"],
.availability-slider input[type="hidden"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.availability-slider-track {
  position: relative;
  width: 58px;
  height: 31px;
  flex: 0 0 58px;
  border-radius: 999px;
  background: #dc2626;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  transition: background .18s ease;
}
.availability-slider-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(15,23,42,.28);
  transition: transform .18s ease;
}
.availability-slider input[type="checkbox"]:checked + .availability-slider-track {
  background: #16a34a;
}
.availability-slider input[type="checkbox"]:checked + .availability-slider-track .availability-slider-knob {
  transform: translateX(27px);
}
.availability-slider-text {
  font-size: 12px;
  font-weight: 950;
  color: #b91c1c;
  white-space: nowrap;
}
.availability-slider input[type="checkbox"]:checked ~ .availability-slider-text {
  color: #15803d;
}
body[class*="theme-dark-"].staff-area .availability-slider-text {
  color: #fca5a5;
}
body[class*="theme-dark-"].staff-area .availability-slider input[type="checkbox"]:checked ~ .availability-slider-text {
  color: #86efac;
}
@media (max-width: 760px) {
  .staff-area {
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }
  .staff-area .page {
    padding: 12px 10px calc(92px + env(safe-area-inset-bottom)) !important;
  }
  .staff-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 75;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 3px;
    padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
    border-top: 1px solid rgba(var(--theme-line-rgb), .38);
    background: rgba(var(--theme-card-rgb), .97);
    box-shadow: 0 -12px 28px rgba(15,23,42,.16);
    backdrop-filter: blur(16px);
  }
  .staff-bottom-nav a {
    position: relative;
    display: grid;
    place-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 52px;
    padding: 5px 3px;
    border-radius: 12px;
    color: var(--theme-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 950;
  }
  .staff-bottom-nav a.active {
    background: rgba(var(--theme-brand-rgb), .16);
    color: var(--theme-ink);
  }
  .staff-bottom-nav span {
    font-size: 18px;
    line-height: 1;
  }
  .staff-bottom-nav b {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .staff-bottom-nav em {
    position: absolute;
    top: 4px;
    right: 8px;
    min-width: 17px;
    height: 17px;
    display: none;
    place-items: center;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    line-height: 1;
  }
  .staff-bottom-nav em.has-count {
    display: grid;
  }
  .catalogue-table {
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  .catalogue-table thead {
    display: none;
  }
  .catalogue-table tbody,
  .catalogue-table tr,
  .catalogue-table td {
    display: block;
    width: 100%;
  }
  .catalogue-table tr {
    padding: 12px;
    border: 1px solid rgba(var(--theme-line-rgb), .34);
    border-radius: 14px;
    background: rgba(var(--theme-card-rgb), .98);
  }
  .catalogue-table td {
    padding: 7px 0 !important;
    border-bottom: 0 !important;
    font-size: 13px !important;
  }
  .catalogue-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--theme-muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .catalogue-table td[data-label="Image"],
  .catalogue-table td[data-label="Icon"],
  .catalogue-table td[data-label="Media"],
  .catalogue-categories-table td[data-label="Sort"] {
    display: none;
  }
  .catalogue-table td[data-label="Name"] {
    padding-top: 0 !important;
  }
  .catalogue-table td[data-label="Name"]::before,
  .catalogue-table td[data-label="Actions"]::before {
    display: none;
  }
  .catalogue-table .staff-tick-form-compact {
    justify-content: flex-start;
  }
  .catalogue-table .staff-tick-toggle {
    justify-content: space-between;
    width: 100%;
  }
  .catalogue-table .availability-inline-form,
  .catalogue-table .availability-switch-form,
  .catalogue-table .availability-tick-form {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .catalogue-table .availability-switch-form input[name="unavailable_reason"] {
    width: 100%;
  }
  .catalogue-table .availability-slider {
    width: 100%;
    justify-content: space-between;
  }
  .catalogue-table .table-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .bulk-save-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .bulk-save-actions {
    flex-direction: column;
  }
  .bulk-save-actions button {
    width: 100%;
  }
}