/* ===== Specs v4 design system (exact tokens) ===== */
:root {
  --red: #da3b26;          /* Appzoola Red */
  --blue: #3799eb;         /* button enabled fill */
  --blue-hover: #126cff;   /* hover / link */
  --link: #126cff;
  --link-hover: #ed220d;
  --text: #2a2a2a;
  --text-dim: #929292;
  --text-mid: #424242;
  --line: #d6d6d6;
  --editbox-border: #d9f1ff;
  --dropdown-bg: #dbe9ff;
  --disabled-fill: #ebebeb;
  --bg: #f4f6f9;
  --card: #ffffff;
  --ok: #0a7a3a;
  --shadow: 0 4px 5px rgb(0 0 0 / 15%);
  --r-btn: 15px;
  --r-box: 12px;
  --icon-bg: #b9d4ff;
  /* Typography tokens — defaults; overridden at runtime from the DB theme (applyTheme). */
  --font: 'Manrope';
  --fs: 12px;          /* base font size (David: Manrope 12) */
  --fs-sm: 11px;
  --ctrl-py: 5px;      /* control vertical padding — compact */
  --ctrl-px: 9px;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font), 'Manrope', -apple-system, Segoe UI, Arial, sans-serif;
  font-weight: 400; font-size: var(--fs); line-height: 1.45; text-shadow: none;
}
h1 { font-size: 22px; font-weight: 600; line-height: 1.2em; margin: 0 0 10px; }
h2 { font-size: 13px; font-weight: 600; line-height: 1.4em; margin: 0 0 7px; }
h3 { font-size: var(--fs); font-weight: 600; line-height: 1.4em; margin: 0 0 5px; }
h4 { font-size: 12.5px; font-weight: 600; line-height: 1.4em; margin: 0 0 4px; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

/* ===== Buttons (radius 15px) ===== */
.btn {
  font-family: inherit; font-size: var(--fs); font-weight: 500; cursor: pointer;
  border: none; border-radius: var(--r-btn); padding: 6px 14px; color: #fff;
  background: var(--blue);
}
.btn:hover { background: var(--blue-hover); }
.btn.red { background: var(--red); }
.btn.cancel { background: #fff; color: var(--text); }
.btn.cancel:hover { color: var(--blue-hover); }
.btn:disabled { background: var(--disabled-fill); color: #5e5e5e; cursor: default; }
.btn.lg { padding: 9px 20px; font-size: var(--fs); }

/* ===== Edit boxes (radius 3px) ===== */
label { display: block; font-size: var(--fs-sm); color: var(--text-dim); margin: 8px 0 3px; }
input, select, textarea {
  width: 100%; max-width: 520px; padding: var(--ctrl-py) var(--ctrl-px); font-family: inherit; font-size: var(--fs); color: var(--text);
  line-height: 1.3; border: 1px solid var(--editbox-border); border-radius: var(--r-box); background: #fff;
}
/* Inputs that genuinely span their container opt back in with .w-full (search bars, table cells). */
input.w-full, select.w-full, textarea.w-full { max-width: none; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); }

.card { background: var(--card); border-radius: var(--r-box); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }

/* In-app modal dialog — REPLACES every window.confirm/alert/prompt (those are forbidden). */
.modal-backdrop { position: fixed; inset: 0; background: rgba(18,26,42,.46); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal { background: #fff; border-radius: var(--r-box); box-shadow: 0 16px 44px rgb(0 0 0 / 28%); padding: 16px 18px; width: 100%; max-width: 420px; }
.modal h4 { margin: 0 0 10px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-sm); line-height: 1.5; }
.pill.green { background: #e9f9ef; color: var(--ok); }
.pill.grey { background: var(--disabled-fill); color: var(--text-dim); }
.muted { color: var(--text-dim); }
.err { color: var(--red); font-size: var(--fs); }
/* Compact, responsive form grid: packs as many ~240px fields per row as fit and fills the width,
   instead of two huge columns with dead space. A lone field stays one column wide (auto-FILL keeps
   the empty tracks), so single selects never stretch full-width. Long fields opt into a full row
   with gridColumn 1/-1 (+ .w-full on the control). */
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; align-items: end; }
.row { display: flex; gap: 12px; align-items: center; }
.spacer { flex: 1; }

/* ===== Masthead (master menu) ===== */
.masthead {
  display: flex; align-items: center; gap: 26px; padding: 0 32px; height: 66px;
  background: #fff; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 300; font-size: 22px; letter-spacing: .5px; cursor: pointer; }
.brand b { font-weight: 600; }
.brand .dot { color: var(--red); }
.masthead nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.masthead nav a { color: var(--text); font-size: var(--fs); cursor: pointer; }
.masthead nav a:hover { color: var(--blue-hover); }
.masthead .cartbtn { color: var(--text); cursor: pointer; position: relative; }
.masthead .cartbtn .count {
  position: absolute; top: -8px; right: -10px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 600; border-radius: 999px; padding: 0; box-sizing: border-box;
  width: 16px; height: 16px; line-height: 16px; min-width: 16px; text-align: center;
}

/* ===== Storefront ===== */
.hero {
  background: linear-gradient(120deg, #0d1b2a 0%, #1b2b44 55%, var(--blue) 130%);
  color: #fff; padding: 64px 32px; text-align: center;
}
.hero h1 { color: #fff; }
.hero p { font-size: 13px; opacity: .9; max-width: 640px; margin: 0 auto 24px; }
.section { max-width: 1180px; margin: 0 auto; padding: 34px 32px; }
.section h2 { text-align: center; }
.section .lead { text-align: center; color: var(--text-dim); margin-bottom: 26px; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.product-card {
  background: #fff; border-radius: var(--r-box); box-shadow: var(--shadow); overflow: hidden;
  cursor: pointer; transition: transform .12s ease;
}
.product-card:hover { transform: translateY(-3px); }
.product-card .thumb {
  height: 150px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef4fd, #dbe9ff); color: var(--blue); font-size: 40px;
}
.product-card .body { padding: 14px 16px; }
.product-card .name { font-weight: 400; font-size: 13px; }
.product-card .sku { color: var(--text-dim); font-size: 12px; margin: 2px 0 8px; }
.product-card .price { color: var(--text); font-size: 13px; }
.product-card .price small { color: var(--text-dim); text-decoration: line-through; font-size: var(--fs); margin-left: 6px; }

/* ===== Standard neumorphic login (matches Foundation neo_login.css) ===== */
.neo-wrap { min-height: calc(100vh - 0px); display: flex; align-items: center; justify-content: center; background: #dde1e7; padding: 30px; }
.neo-card { width: 340px; padding: 34px 30px; background: #dde1e7; border-radius: 10px; box-shadow: -3px -3px 7px #ffffff73, 2px 2px 5px rgba(94,104,121,.288); }
.neo-title { font-size: 24px; font-weight: 600; color: #595959; text-align: center; margin-bottom: 6px; }
.neo-title .dot { color: var(--red); }
.neo-brand { display: flex; justify-content: center; margin-bottom: 10px; }
.neo-sub { text-align: center; color: #7a7f88; font-size: 13px; margin-bottom: 20px; }
.neo-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.neo-tab { cursor: pointer; font-size: 12px; padding: 6px 12px; border-radius: 16px; color: #595959; background: #dde1e7; border: none; box-shadow: 2px 2px 5px #BABECC, -5px -5px 10px #ffffff73; }
.neo-tab.on { color: #3498db; box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #ffffff73; }
.neo-field { position: relative; margin-top: 14px; }
.neo-field .neo-icon { position: absolute; left: 0; top: 0; width: 45px; height: 46px; display: flex; align-items: center; justify-content: center; color: #8a8f99; pointer-events: none; }
.neo-input { height: 46px; width: 100%; padding: 0 16px 0 45px; outline: none; border: none; font-size: 14px; background: #dde1e7; color: #595959; border-radius: 23px; box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #ffffff73; }
.neo-input:focus { box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #ffffff73; }
.neo-btn { margin-top: 18px; width: 100%; height: 46px; font-size: 15px; font-weight: 600; background: #dde1e7; border-radius: 23px; border: none; cursor: pointer; color: #595959; box-shadow: 2px 2px 5px #BABECC, -5px -5px 10px #ffffff73; }
.neo-btn:hover { color: #3498db; }
.neo-btn:active { box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #ffffff73; }
.neo-btn:disabled { color: #9aa0a6; cursor: default; }
.neo-alt { text-align: center; margin-top: 16px; color: #595959; font-size: 13px; }
.neo-alt a { color: #3498db; cursor: pointer; }
.neo-err { color: var(--red); font-size: 12.5px; margin-top: 10px; text-align: center; }
.neo-ok { color: #2e9e5b; font-size: 12.5px; margin-top: 10px; text-align: center; }

/* ===== Login (standard look and feel) ===== */
.login-wrap { min-height: calc(100vh - 66px); display: flex; align-items: center; justify-content: center; padding: 30px; }
.login-card { width: 100%; max-width: 410px; background: #fff; border-radius: var(--r-box); box-shadow: var(--shadow); padding: 34px 32px; }
.login-card .logo { text-align: center; font-size: 24px; font-weight: 300; margin-bottom: 6px; }
.login-card .logo b { font-weight: 600; } .login-card .logo .dot { color: var(--red); }
.login-card h3 { text-align: center; color: var(--text-dim); font-size: 13px; margin-bottom: 18px; }
.login-card .btn { width: 100%; margin-top: 20px; }
.login-card .alt { text-align: center; margin-top: 16px; font-size: var(--fs); color: var(--text-dim); }

/* ===== Admin ===== */
/* THE BACK OFFICE FILLS WHATEVER THE TOP MENU LEAVES - WITH NO NUMBER TO GO STALE.
   This said calc(100vh - 66px), a height the top bar had when it was ONE row. It is two
   rows now and measures 97px, so every back-office page carried 31px of dead scroll below
   the fold and the sidebar overshot the window. A measurement copied into a stylesheet is
   wrong the day the thing it measured changes (RULES_NO_HARDCODING), so the page is a
   full-height column and the shell simply takes the rest - which is also what keeps a
   footer at the foot of a short page. */
#root:has(> .admin-shell) { display: flex; flex-direction: column; min-height: 100vh; }
.admin-shell { display: flex; flex: 1 1 auto; min-height: 0; }
.sidebar { width: 232px; background: #fff; box-shadow: var(--shadow); padding: 16px 12px; flex-shrink: 0; }
.side-group { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin: 14px 10px 6px; }
/* Collapsible group header (a button that toggles its items). */
.side-group--toggle { display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer; font-family: inherit; }
.side-group--toggle:hover { color: var(--text); }
.sg-chev { font-size: 10px; opacity: .55; transition: transform .18s ease; }
.sg-chev--open { transform: rotate(180deg); }
.side-group__items { display: flex; flex-direction: column; }
.side-brand { display: flex; align-items: center; padding: 6px 10px 14px; cursor: pointer; }
.side-item {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 13px; border: none;
  background: transparent; cursor: pointer; border-radius: var(--r-box); color: var(--text);
  font-family: inherit; font-size: var(--fs); font-weight: 400; text-align: left; margin-bottom: 1px;
}
.side-item:hover { background: var(--dropdown-bg); }
.side-item.active { background: var(--blue); color: #fff; }
.side-item .fa { width: 18px; }
.content { flex: 1; padding: 26px 32px; }
.page-head { display: flex; align-items: center; margin-bottom: 18px; }

table { width: 100%; border-collapse: collapse; font-size: var(--fs); }
th, td { text-align: left; padding: 5px 9px; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
th { color: var(--text-dim); font-weight: 600; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }

/* ===== Stat cards + simple bar chart ===== */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat { background: #fff; border-radius: var(--r-box); box-shadow: var(--shadow); padding: 18px 20px; }
.stat .label { color: var(--text-dim); font-size: var(--fs-sm); }
.stat .value { display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: 600; margin-top: 8px; }
.stat-ico { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }

/* Dashboard second row: stock status + category breakdown */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } }
.stock-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.stock-pill { flex: 1; min-width: 120px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.stock-pill b { font-size: 26px; color: var(--c); line-height: 1; }
.stock-pill span { color: var(--text-dim); font-size: var(--fs-sm); }
.hbars { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.hbar { display: grid; grid-template-columns: 110px 1fr 34px; align-items: center; gap: 10px; }
.hbar-name { font-size: var(--fs-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-track { background: var(--line); border-radius: 6px; height: 14px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-hover)); border-radius: 6px; min-width: 2px; }
.hbar-num { text-align: right; font-weight: 600; font-size: var(--fs-sm); }

.designer-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--card); z-index: 2; padding: 20px; }

/* CRM kanban + timeline styles now live in the shared package: @bnb/crm/crm.css */

.bars { display: flex; align-items: flex-end; gap: 16px; height: 200px; padding: 22px 8px 34px; }
.bar { flex: 1; background: linear-gradient(180deg, var(--blue), var(--blue-hover)); border-radius: 4px 4px 0 0; position: relative; min-height: 4px; }
.bar span { position: absolute; bottom: -26px; left: -6px; right: -6px; text-align: center; font-size: 11px; line-height: 1.2; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar em { position: absolute; top: -20px; left: -6px; right: -6px; text-align: center; font-size: 11px; font-style: normal; color: var(--text); white-space: nowrap; }

/* ===================================================================
   Active eCommerce CMS look — conform storefront layout to the PHP app
   =================================================================== */
:root { --primary: #3799eb; --primary-dark: #126cff; --aec-bar: #0d1b2a; }

/* Top utility bar */
.topbar { background: var(--aec-bar); color: #c7d2dd; font-size: var(--fs); }
.topbar .wrap { max-width: 1200px; margin: 0 auto; padding: 7px 20px; display: flex; gap: 18px; align-items: center; }
.topbar a { color: #c7d2dd; } .topbar a:hover { color: #fff; }
.topbar .spacer { flex: 1; }

/* Main header with search */
.aec-header { background: #fff; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 30; }
.aec-header .wrap { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 22px; }
.aec-logo { font-size: 24px; font-weight: 300; white-space: nowrap; cursor: pointer; }
.aec-logo b { font-weight: 600; } .aec-logo .dot { color: var(--red); }
.searchbar { flex: 1; display: flex; border: 2px solid var(--primary); border-radius: 6px; overflow: hidden; max-width: 680px; }
.searchbar select { border: none; border-right: 1px solid var(--line); border-radius: 0; width: auto; background: #f6f8fa; color: var(--text-mid); font-size: var(--fs); padding: 0 12px; }
.searchbar input { border: none; border-radius: 0; flex: 1; }
.searchbar input:focus { border: none; }
.searchbar button { background: var(--primary); color: #fff; border: none; padding: 0 20px; cursor: pointer; font-size: 13px; }
.searchbar button:hover { background: var(--primary-dark); }
.header-icons { display: flex; align-items: center; gap: 22px; }
.hicon { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: var(--text-mid); font-size: 11px; position: relative; }
.hicon .fa { font-size: 13px; }
.hicon:hover { color: var(--primary-dark); }
.hicon .badge { position: absolute; top: -6px; right: 2px; background: var(--red); color: #fff; font-size: 10px; font-weight: 600; border-radius: 999px; padding: 0; box-sizing: border-box; width: 16px; height: 16px; line-height: 16px; min-width: 16px; text-align: center; }

/* Category nav strip */
.cat-nav { background: #fff; border-top: 1px solid #eef0f3; box-shadow: var(--shadow); }
.cat-nav .wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; gap: 4px; }
.cat-nav a { padding: 11px 16px; font-size: var(--fs); color: var(--text); white-space: nowrap; }
.cat-nav a:hover { color: var(--primary-dark); }
.cat-nav .all { background: var(--primary); color: #fff; font-weight: 500; }
.cat-nav .all:hover { color: #fff; background: var(--primary-dark); }

/* Home banner: 3-column grid */
.aec-page { max-width: 1200px; margin: 0 auto; padding: 18px 20px 40px; }
.banner-grid { display: grid; grid-template-columns: 240px 1fr 200px; gap: 12px; }
.cat-menu { background: #fff; border-radius: 6px; box-shadow: var(--shadow); padding: 8px 0; }
.cat-menu .ci { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: var(--fs); cursor: pointer; color: var(--text); }
.cat-menu .ci:hover { background: var(--dropdown-bg); color: var(--primary-dark); }
.cat-menu .ci .fa { width: 16px; color: var(--primary); }
.hero-slider { position: relative; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); min-height: 330px;
  background: linear-gradient(120deg, #0d1b2a, #1b2b44 55%, var(--primary)); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.hero-slider h1 { color: #fff; }
.hero-slider p { opacity: .9; max-width: 560px; }
.hero-dots { position: absolute; bottom: 14px; display: flex; gap: 7px; }
.hero-dots i { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.5); }
.hero-dots i.on { background: #fff; }
.deal-col { background: var(--primary); border-radius: 8px; box-shadow: var(--shadow); padding: 8px; }
.deal-col .head { color: #fff; font-weight: 600; text-align: center; padding: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.deal-col .di { background: #fff; border-radius: 6px; padding: 8px; margin-bottom: 8px; text-align: center; cursor: pointer; }
.deal-col .di .nm { font-size: 12px; margin-top: 4px; }
.deal-col .di .pr { font-size: var(--fs); color: var(--red); font-weight: 600; }
.deal-col .di .fa { font-size: 26px; color: var(--primary); }

/* Product section */
.psec { background: #fff; border-radius: 8px; box-shadow: var(--shadow); margin-top: 18px; }
.psec .head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid #eef0f3; }
.psec .head h3 { margin: 0; font-weight: 400; font-size: 13px; }
.psec .head .more { margin-left: auto; font-size: var(--fs); }
.psec .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pcard { padding: 14px; border-right: 1px solid #f2f4f6; border-bottom: 1px solid #f2f4f6; cursor: pointer; position: relative; }
.pcard:hover { box-shadow: var(--shadow); z-index: 2; }
.pcard .disc { position: absolute; top: 10px; left: 10px; background: var(--red); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 3px; }
.pcard .wish { position: absolute; top: 10px; right: 10px; color: #c2c9d2; }
.pcard .wish:hover { color: var(--red); }
.pcard .thumb { height: 150px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 42px; }
.pcard .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pcard .stars { color: #f5a623; font-size: 12px; margin: 6px 0 3px; }
.pcard .stars .off { color: #dfe3e8; }
.pcard .nm { font-size: var(--fs); color: var(--text); height: 38px; overflow: hidden; }
.pcard .price { margin-top: 6px; }
.pcard .price b { color: var(--primary-dark); font-size: 13px; font-weight: 600; }
.pcard .price s { color: var(--text-dim); font-size: 12px; margin-left: 6px; }
.pcard .atc { margin-top: 10px; width: 100%; border: 1px solid var(--primary); color: var(--primary); background: #fff; border-radius: 4px; padding: 7px; font-family: inherit; font-size: var(--fs); cursor: pointer; }
.pcard .atc:hover { background: var(--primary); color: #fff; }

/* Categories grid */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.cat-tile { background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 20px; text-align: center; cursor: pointer; }
.cat-tile:hover { color: var(--primary-dark); }
.cat-tile .fa { font-size: 30px; color: var(--primary); }
.cat-tile .nm { margin-top: 8px; font-size: var(--fs); }

/* Footer */
.aec-footer { background: var(--aec-bar); color: #aebccb; margin-top: 40px; }
.aec-footer .wrap { max-width: 1200px; margin: 0 auto; padding: 38px 20px 18px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.aec-footer h4 { color: #fff; font-size: var(--fs); margin-bottom: 12px; }
.aec-footer a { color: #aebccb; display: block; padding: 4px 0; font-size: var(--fs); }
.aec-footer a:hover { color: #fff; }
.aec-footer .pay { display: flex; gap: 8px; margin-top: 12px; font-size: 22px; color: #6b7c8f; }
.aec-footer .copy { border-top: 1px solid #20344a; text-align: center; padding: 14px; font-size: var(--fs); color: #7e8ea0; }

/* Topbar currency/language dropdowns */
.tb-select { position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: #c7d2dd; }
.tb-select:hover { color: #fff; }
.tb-select select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; border: none; }
.tb-select .fa { font-size: 9px; }

/* Clickable elements use the hand cursor (links without href default to text cursor) */
a, .side-item, .pcard, .product-card, .cat-tile, .cat-menu .ci, .deal-col .di,
.hicon, .brand, .aec-logo, .psec .head .more, .tb-select, .cat-nav a, button { cursor: pointer; }

/* ===================================================================
   Layout templates (skins) — selected in Appearance, driven by the
   data-template attribute on <html>. Classic is the baseline (no rules).
   =================================================================== */

/* ---- MODERN: rounded, bold, airy ---- */
[data-template="modern"] body { font-weight: 400; }
[data-template="modern"] .aec-page { padding-top: 26px; }
[data-template="modern"] .hero-slider { min-height: 400px; border-radius: 20px; }
[data-template="modern"] .hero-slider h1 { font-size: 52px; font-weight: 800; letter-spacing: -1px; }
[data-template="modern"] .psec { border-radius: 18px; }
[data-template="modern"] .psec .head { padding: 18px 22px; }
[data-template="modern"] .psec .head h3 { font-weight: 700; }
[data-template="modern"] .pcard { border-right: none; border-bottom: none; border-radius: 16px; transition: transform .14s ease, box-shadow .14s ease; }
[data-template="modern"] .pcard:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgb(0 0 0 / 16%); }
[data-template="modern"] .pcard .thumb { border-radius: 12px; background: linear-gradient(135deg, #eef4fd, #dbe9ff); }
[data-template="modern"] .pcard .atc { border-radius: 999px; }
[data-template="modern"] .cat-tile { border-radius: 16px; }
[data-template="modern"] .deal-col, [data-template="modern"] .cat-menu { border-radius: 16px; }
[data-template="modern"] .searchbar { border-radius: 999px; }
[data-template="modern"] .searchbar button { border-radius: 0 999px 999px 0; }

/* ===================================================================
   DARK THEME — toggled via data-theme="dark" on <html> (@bnb/ui ThemeToggle).
   Purely additive: overrides design tokens + the hardcoded light surfaces.
   Accent (--primary/--blue) and the top/footer bar (--aec-bar) come from the
   DB theme at runtime and are intentionally left as-is.
   =================================================================== */
:root[data-theme="dark"] {
  --text: #e7e9ee;
  --text-mid: #c3c9d4;
  --text-dim: #8b94a4;
  --line: #2a3340;
  --line-soft: #222a36;
  --editbox-border: #313c4d;
  --dropdown-bg: #1c2f4a;
  --disabled-fill: #28313e;
  --bg: #0f141b;
  --card: #1a212c;
  --panel: #141a23;
  --input-bg: #121821;
  --cancel-bg: #232c39;
  --ok: #3ecb80;
  --icon-bg: #1c3350;
  --shadow: 0 6px 18px rgb(0 0 0 / 55%);
  /* Accent TEXT tokens MUST lighten on dark — saturated blue on black is unreadable (RULES_FRONTEND). */
  --blue: #7fb6ff;
  --blue-hover: #a9ceff;
  --link: #8fc0ff;
  --link-hover: #ff9b8e;
  --primary: #7fb6ff;
  --primary-dark: #a9ceff;
  color-scheme: dark;
}
/* surfaces that hardcode white → dark card */
:root[data-theme="dark"] .aec-header,
:root[data-theme="dark"] .cat-nav,
:root[data-theme="dark"] .cat-menu,
:root[data-theme="dark"] .psec,
:root[data-theme="dark"] .cat-tile,
:root[data-theme="dark"] .product-card,
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .masthead,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .deal-col .di { background: var(--card); }
/* form controls */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .searchbar select { background: var(--input-bg); color: var(--text); border-color: var(--editbox-border); }
:root[data-theme="dark"] .btn.cancel { background: var(--cancel-bg); color: var(--text); }
:root[data-theme="dark"] .pcard .atc { background: var(--card); }
/* borders */
:root[data-theme="dark"] th, :root[data-theme="dark"] td,
:root[data-theme="dark"] .psec .head,
:root[data-theme="dark"] .pcard,
:root[data-theme="dark"] .cat-nav { border-color: var(--line-soft); }
:root[data-theme="dark"] .searchbar select { border-right-color: var(--line); }
/* product thumbs + hovers */
:root[data-theme="dark"] .pcard .thumb,
:root[data-theme="dark"] .product-card .thumb { background: linear-gradient(135deg, #16202f, #1a2740); }
:root[data-theme="dark"] .pcard:hover { box-shadow: 0 8px 22px rgb(0 0 0 / 55%); }
:root[data-theme="dark"] [data-template="minimal"] .pcard:hover { background: #161c25; }
:root[data-theme="dark"] [data-template="minimal"] .pcard .thumb { background: var(--card); }
:root[data-theme="dark"] .pcard .stars .off { color: #3a4452; }
:root[data-theme="dark"] .pcard .wish { color: #5b6675; }
/* neumorphic login — dark variant */
:root[data-theme="dark"] .neo-wrap { background: #11161d; }
:root[data-theme="dark"] .neo-card { background: #1b2230; box-shadow: -2px -2px 6px #ffffff08, 4px 4px 10px #00000080; }
:root[data-theme="dark"] .neo-title,
:root[data-theme="dark"] .neo-sub,
:root[data-theme="dark"] .neo-alt,
:root[data-theme="dark"] .neo-input,
:root[data-theme="dark"] .neo-btn,
:root[data-theme="dark"] .neo-tab { color: #cfd5df; }
:root[data-theme="dark"] .neo-input,
:root[data-theme="dark"] .neo-btn,
:root[data-theme="dark"] .neo-tab { background: #1b2230; box-shadow: inset 2px 2px 5px #0b0f15, inset -3px -3px 6px #2a3340; }
:root[data-theme="dark"] .neo-tab.on { box-shadow: inset 2px 2px 5px #0b0f15, inset -3px -3px 6px #2a3340; color: var(--blue); }
:root[data-theme="dark"] .neo-input:focus { box-shadow: inset 1px 1px 2px #0b0f15, inset -1px -1px 2px #2a3340; }
:root[data-theme="dark"] .neo-btn:hover { color: #5ab0ff; }

/* ---- MINIMAL: flat, sharp, lots of whitespace ---- */
[data-template="minimal"] body { font-weight: 300; }
[data-template="minimal"] .aec-header { box-shadow: none; border-bottom: 1px solid var(--line); }
[data-template="minimal"] .cat-nav { box-shadow: none; border-bottom: 1px solid var(--line); }
[data-template="minimal"] .aec-page { padding-top: 30px; }
[data-template="minimal"] .banner-grid { gap: 24px; }
[data-template="minimal"] .hero-slider { min-height: 260px; background: var(--aec-bar); box-shadow: none; border: none; }
[data-template="minimal"] .hero-slider h1 { font-size: 34px; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; }
[data-template="minimal"] .psec { box-shadow: none; border: 1px solid var(--line); margin-top: 28px; }
[data-template="minimal"] .psec .head h3 { font-weight: 300; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; }
[data-template="minimal"] .pcard { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
[data-template="minimal"] .pcard:hover { box-shadow: none; background: #fafbfc; }
[data-template="minimal"] .pcard .thumb { background: #fff; }
[data-template="minimal"] .pcard .atc { border-radius: 0; }
[data-template="minimal"] .cat-tile { box-shadow: none; border: 1px solid var(--line); }
[data-template="minimal"] .deal-col, [data-template="minimal"] .cat-menu { box-shadow: none; border: 1px solid var(--line); }
[data-template="minimal"] .searchbar { border-width: 1px; border-radius: 0; }

/* ===================================================================
   APPLE-STYLE STOREFRONT (.ax) — big, bold, light, generous whitespace.
   Used by the Sleepwell storefront + category pages.
   =================================================================== */
.ax { max-width: 1180px; margin: 0 auto; padding: 50px 22px 110px; }
.ax-hero { padding: 30px 0 6px; }
.ax-hero--sm { padding: 16px 0 0; }
.ax-eyebrow { color: var(--primary); font-weight: 600; font-size: 19px; letter-spacing: -.01em; margin: 0 0 8px; }
.ax-h1 { font-size: clamp(40px, 6.2vw, 66px); font-weight: 700; letter-spacing: -.022em; line-height: 1.04; color: #1d1d1f; margin: 0 0 16px; }
.ax-lede { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.4; color: #6e6e73; max-width: 700px; margin: 0; }

.ax-seg-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 32px 0 38px; }
.ax-seg { display: inline-flex; gap: 2px; background: #e8e8ed; border-radius: 999px; padding: 5px; flex-wrap: wrap; }
.ax-pill { border: none; background: transparent; border-radius: 999px; padding: 10px 20px; font-family: inherit; font-size: 16px; font-weight: 500; color: #1d1d1f; cursor: pointer; transition: background .2s, color .2s; }
.ax-pill:hover:not(.on) { background: rgba(128,128,128,.22); color: var(--text); }
.ax-pill.on { background: #1d1d1f; color: #fff; }
.ax-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e3e3e8; border-radius: 999px; padding: 9px 16px; color: #86868b; }
.ax-search input { border: none; outline: none; font-family: inherit; font-size: 15px; width: 200px; background: transparent; padding: 0; color: #1d1d1f; }

.ax-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Apple "line-up" card: a white image PANEL, with the text below it on the page. */
.ax-card { background: transparent; box-shadow: none; padding: 0; text-align: center; display: flex; flex-direction: column; cursor: pointer; outline: none; }
.ax-card__panel { background: var(--card); border-radius: 20px; height: 340px; display: flex; align-items: center; justify-content: center; padding: 34px; cursor: pointer; box-shadow: 0 2px 16px rgba(0,0,0,.05); transition: transform .35s var(--ease), box-shadow .35s; }
/* lift the whole tile on hover/keyboard-focus, so it reads as one big clickable target */
.ax-card:hover .ax-card__panel, .ax-card:focus-visible .ax-card__panel { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,.12); }
.ax-card:focus-visible .ax-card__panel { box-shadow: 0 0 0 3px var(--primary); }
.ax-card:hover .ax-card__name { color: var(--primary); }
.ax-card__panel img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ax-card__name { font-size: 23px; font-weight: 600; letter-spacing: -.014em; color: #1d1d1f; line-height: 1.18; margin: 22px 0 6px; cursor: pointer; }
.ax-card__tagline { color: #6e6e73; font-size: 16px; line-height: 1.4; margin: 0 0 10px; }
.ax-card__img { height: 300px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; cursor: pointer; }
.ax-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ax-ph { width: 78%; height: 78%; border-radius: 18px; background: linear-gradient(135deg, #f2f2f5, #e6e6eb); }
.ax-tag { color: #bf4800; font-weight: 600; font-size: 15px; margin: 0 0 5px; }
.ax-card__desc { color: #6e6e73; font-size: 16px; line-height: 1.42; margin: 0 0 16px; flex: 1; }
.ax-card__price { color: #1d1d1f; font-size: 16px; font-weight: 500; margin: 0 0 18px; }
.ax-h1__dim { color: #86868b; font-weight: 700; }

/* ===== Apple-style bag / cart ===== */
.axbag { max-width: 840px; margin: 0 auto; padding: 52px 22px 100px; }
.axbag__head { text-align: center; margin-bottom: 44px; }
.axbag__total { font-size: clamp(28px,4vw,40px); font-weight: 600; letter-spacing: -.02em; color: var(--text); margin: 0 0 10px; }
.axbag__sub { color: var(--text-mid); font-size: 17px; margin: 0 0 26px; }
.axbag__checkout { padding: 13px 44px; font-size: 17px; }
.axbag__empty { text-align: center; color: var(--text-dim); padding: 50px 0 70px; }
.axbag__empty svg { font-size: 42px; margin-bottom: 16px; }
.axbag__empty p { font-size: 18px; margin: 0; }
.axbag__items { border-top: 1px solid var(--line); }
.axbag__row { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 26px; align-items: center; padding: 30px 4px; border-bottom: 1px solid var(--line); }
.axbag__img { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; }
.axbag__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.axbag__info h3 { font-size: 19px; font-weight: 600; color: var(--text); margin: 0 0 5px; }
.axbag__sku { color: var(--text-dim); font-size: 13px; margin: 0 0 10px; }
.axbag__remove, .axbag__clear { color: var(--link); font-size: 14px; cursor: pointer; }
.axbag__remove:hover, .axbag__clear:hover { text-decoration: underline; }
.axbag__qty select { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-family: inherit; font-size: 15px; cursor: pointer; }
.axbag__price { font-size: 18px; font-weight: 600; color: var(--text); white-space: nowrap; }
.axbag__foot { display: flex; justify-content: flex-end; padding-top: 22px; }
@media (max-width: 640px) { .axbag__row { grid-template-columns: 80px 1fr auto; } .axbag__qty { grid-column: 2; justify-self: start; } .axbag__img { width: 80px; height: 80px; } }

/* Apple lift for the remaining .section-based pages (checkout, account, wishlist, help, track, login) */
.section { max-width: 980px; margin: 0 auto; padding: 50px 22px 90px; }
.section > h2 { font-size: clamp(28px,3.4vw,40px); font-weight: 700; letter-spacing: -.02em; text-align: center; color: var(--text); margin: 0 0 30px; }
.section .lead { text-align: center; color: var(--text-mid); margin-bottom: 30px; font-size: 17px; }

/* Apple pill buttons everywhere */
.btn { border-radius: 980px; padding: 11px 24px; font-weight: 500; background: var(--primary); color: #fff; }
.btn:hover { background: var(--primary-dark); }
.btn.lg { padding: 13px 30px; font-size: 16px; }
.btn.cancel { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn.cancel:hover { border-color: var(--primary); color: var(--text); }
:root[data-theme="dark"] .btn.cancel { background: transparent; color: var(--text); }
.ax-card__cta { display: flex; align-items: center; justify-content: center; gap: 22px; }
.ax-btn { background: var(--primary); color: #fff; border: none; border-radius: 980px; padding: 11px 23px; font-family: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: background .2s; }
.ax-btn:hover { background: var(--primary-dark); }
.ax-link { color: var(--primary); font-size: 16px; cursor: pointer; white-space: nowrap; }
.ax-link:hover { text-decoration: underline; }
.ax-loading { grid-column: 1 / -1; text-align: center; color: #86868b; font-size: 17px; padding: 80px 0; }

@media (max-width: 920px) { .ax-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ax-grid { grid-template-columns: 1fr; } .ax-search input { width: 130px; } }

/* Apple-minimal top nav */
.axnav { background: rgba(250,250,252,.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid #e3e3e8; position: sticky; top: 0; z-index: 50; }
/* Full-bleed nav exactly like the main marketing site: logo hard LEFT, icons hard RIGHT — never a
   centred max-width box that floats the logo in from the edge. Matches .nav__inner on appzoola.com. */
.axnav__inner { max-width: none; margin: 0; display: flex; align-items: center; gap: 26px; padding: 0 clamp(24px, 3.5vw, 56px); height: 56px; }
.axnav__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.axnav__logo img { height: 30px; display: block; }
/* icon + wordmark sized to match the main marketing site exactly (icon 34px, Michroma 1.15rem) */
.axnav__icon { height: 34px; width: auto; display: block; flex: 0 0 auto; }
.axnav__wm { font-family: 'Michroma', sans-serif; font-weight: 400; font-size: 1.15rem; letter-spacing: .3px; line-height: 1; white-space: nowrap; }
.axnav__wm .wm-app { color: #ee2b24; }
.axnav__wm .wm-rest { color: var(--text); }
.axnav__logo b { font-size: 18px; color: #1d1d1f; }
/* Shared brand mark (components/Brand.tsx) — header, sign-in and back office all render this. */
.axbrand { display: inline-flex; align-items: center; gap: 10px; }
.axbrand__icon { height: 34px; width: auto; display: block; flex: 0 0 auto; }
.axbrand--lg { gap: 12px; }
.axbrand--lg .axbrand__icon { height: 46px; }
.axbrand--lg .axnav__wm { font-size: 1.55rem; }
/* same menu treatment as the main site: links pushed toward the centre/right, quiet until hover */
.axnav__links { display: flex; gap: 1.7rem; margin-left: 2.2rem; margin-right: auto; }
.axnav__links a { color: var(--text); font-size: 15px; cursor: pointer; opacity: .72; transition: opacity .2s, color .2s; white-space: nowrap; text-decoration: none; }
.axnav__links a:hover { opacity: 1; color: var(--primary); }
.axnav__icons { display: flex; gap: 18px; align-items: center; font-size: 16px; }
/* every header action — links AND the theme toggle button — sits in an identical 24px box,
   centred, so they line up perfectly regardless of glyph shape. No baseline drift. */
.axnav__icons > a, .axnav__icons > .axnav__toggle { display: inline-flex; align-items: center; justify-content: center; height: 24px; width: 24px; padding: 0; margin: 0; border: none; background: none; line-height: 1; }
.axnav__icons .axnav__toggle svg, .axnav__icons a svg { height: 17px; width: 17px; display: block; }
.axnav__icons a { color: #1d1d1f; cursor: pointer; position: relative; font-size: 16px; opacity: .82; transition: opacity .2s, color .2s; }
.axnav__icons a:hover, .axnav__icons .axnav__toggle:hover { opacity: 1; color: var(--primary); }
.axbadge { position: absolute; top: -8px; right: -10px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 600; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
/* The main-site call-to-action pill (e.g. "Book a consultation"), so the shop header matches the
   marketing site. Colour comes from the tenant '--cta' token (falls back to a neutral indigo). */
.axnav__cta { background: var(--cta, #4f5bd6); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; padding: 9px 18px; border-radius: 999px; white-space: nowrap; cursor: pointer; transition: filter .2s; }
.axnav__cta:hover { filter: brightness(1.1); }
@media (max-width: 760px) { .axnav__links { display: none; } }

/* Apple-style footer */
.axfoot { background: #f5f5f7; border-top: 1px solid #d2d2d7; margin-top: 64px; color: #6e6e73; }
.axfoot__inner { max-width: none; margin: 0; padding: 42px clamp(24px, 3.5vw, 56px) 26px; }
.axfoot__top { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: 30px; padding-bottom: 26px; }
.axfoot__col h4, .axfoot__brand b { font-size: 13px; font-weight: 600; color: #1d1d1f; margin: 0 0 12px; display: block; }
.axfoot__col a { display: block; color: #6e6e73; padding: 5px 0; cursor: pointer; font-size: 13px; text-decoration: none; }
.axfoot__col a:hover { color: var(--primary); text-decoration: underline; }
.axfoot__brand img { height: 26px; margin-bottom: 12px; display: block; }
.axfoot__brand p { margin: 0 0 12px; max-width: 300px; line-height: 1.45; font-size: 13px; }
.axfoot__phone { color: #1d1d1f; font-weight: 600; font-size: 16px; text-decoration: none; }
.axfoot__legal { border-top: 1px solid #d2d2d7; padding-top: 18px; font-size: 12px; color: #86868b; }
@media (max-width: 740px) { .axfoot__top { grid-template-columns: 1fr 1fr; } }

/* ===================================================================
   THEME-AWARE light + dark (Apple). Surface tokens live in CSS so the
   @bnb/ui dark toggle works; brand tokens (--primary etc.) come from the
   DB. Appended last so these win over the hardcoded values above.
   =================================================================== */
:root { --bg:#f5f5f7; --card:#ffffff; --text:#1d1d1f; --text-mid:#6e6e73; --text-dim:#86868b; --line:#e3e3e8; }
:root[data-theme="dark"] { --bg:#000000; --card:#1c1c1e; --text:#f5f5f7; --text-mid:#a1a1a6; --text-dim:#8e8e93; --line:#2a2a2c; color-scheme: dark; }

/* storefront surfaces -> tokens */
.ax-h1, .ax-card__name, .ax-card__price { color: var(--text); }
.ax-lede, .ax-card__desc { color: var(--text-mid); }
.ax-loading { color: var(--text-dim); }
/* THE PRODUCT TILES FOLLOW THE THEME LIKE EVERYTHING ELSE.
   They were deliberately held WHITE in both modes, so that product photos with white
   backgrounds would blend into them. The cost was a page of white blocks on a black
   background, which is the thing David actually sees: "IF ITS DARK THEN ITS DARK
   THROUGHOUT. IF ITS LIGHT THEN ITS LIGHT THROUGHOUT. NOT A MIX." (21 August 2026.)
   One theme wins over one kind of photograph blending nicely. */
.ax-card__panel { background: var(--card); }
.ax-card__tagline { color: var(--text-mid); }
.ax-h1__dim { color: var(--text-dim); }
:root[data-theme="dark"] .ax-card__panel:hover { box-shadow: 0 24px 54px rgba(0,0,0,.7); }
.ax-search { background: var(--card); border-color: var(--line); }
.ax-search input { color: var(--text); }
.ax-seg { background: var(--line); }
.ax-pill { color: var(--text); }
.ax-pill.on { background: var(--text); color: var(--bg); }
:root[data-theme="dark"] .ax-card:hover { box-shadow: 0 22px 48px rgba(0,0,0,.6); }
:root[data-theme="dark"] .ax-ph { background: linear-gradient(135deg,#2a2a2c,#1c1c1e); }
:root[data-theme="dark"] .ax-tag { color: #ff8a52; }

/* nav -> tokens + logo swap */
.axnav { background: rgba(245,245,247,.82); border-bottom-color: var(--line); }
:root[data-theme="dark"] .axnav { background: rgba(20,20,22,.82); }
.axnav__logo b, .axnav__links a, .axnav__icons a, .axnav__toggle { color: var(--text); }
.axnav__logo .logo-light { display: block; }
.axnav__logo .logo-dark { display: none; }
:root[data-theme="dark"] .axnav__logo .logo-light { display: none; }
:root[data-theme="dark"] .axnav__logo .logo-dark { display: block; }
.axnav__logo img { height: 44px; display: block; }
.axnav__toggle { opacity: .82; font-size: 16px; padding: 0; display: inline-flex; align-items: center; }
.axnav__toggle:hover { opacity: 1; color: var(--primary); }

/* footer -> tokens */
.axfoot { background: var(--bg); border-top-color: var(--line); }
:root[data-theme="dark"] .axfoot { background: #1c1c1e; }
.axfoot__legal { border-top-color: var(--line); color: var(--text-dim); }
.axfoot__col h4, .axfoot__brand b, .axfoot__phone { color: var(--text); }
.axfoot__col a, .axfoot__brand p { color: var(--text-mid); }

/* ===== Apple-style product page (.axpd) — long-form, big-bold sections, used by EVERY BnB ===== */
.axpd { --ink:#06070d; --panel:#0a0c14; --acc:#2b8fff; --wt:#ffffff; --w72:rgba(255,255,255,.72); --w45:rgba(255,255,255,.45); --line2:rgba(255,255,255,.09);
  max-width: none; margin: 0; padding: 0; background: var(--ink); color: var(--wt);
  font-family: 'Inter', var(--font), -apple-system, Segoe UI, Arial, sans-serif; }
.axpd * { box-sizing: border-box; }
.axpd h1,.axpd h2,.axpd h3,.axpd h4 { letter-spacing: -.02em; font-weight: 700; margin: 0; }
.axpd > section { position: relative; padding: clamp(70px,11vw,150px) clamp(22px,6vw,90px); }
.axwrap { max-width: 1180px; margin-left: auto; margin-right: auto; }
.axpitch, .axspot, .axdesigns, .axtl, .axinc, .axfaq, .axprice { max-width: 1180px; margin-left: auto; margin-right: auto; }
/* reveal */
.axrev { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
.axrev.in { opacity: 1; transform: none; }
/* buttons */
.axbtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: inherit; font-size: 1rem; font-weight: 600; border: 0; border-radius: 980px; padding: .85rem 1.8rem; cursor: pointer; text-decoration: none; transition: transform .2s, background .2s, border-color .2s; white-space: nowrap; }
.axbtn--solid { background: var(--acc); color: #fff; }
.axbtn--solid:hover { background: #4aa0ff; transform: translateY(-2px); }
.axbtn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.32); }
.axbtn--ghost:hover { border-color: #fff; }
.axbtn--lg { padding: 1.05rem 2.4rem; font-size: 1.12rem; }
.axpd__back { position: absolute; z-index: 5; top: 22px; left: clamp(22px,6vw,90px); color: rgba(255,255,255,.7); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.axpd__back:hover { color: #fff; }
/* 1 HERO */
.axh { width: 100%; max-width: none; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 12vh clamp(22px,6vw,90px); }
.axh__bg { position: absolute; inset: 0; background-image: var(--photo); background-size: cover; background-position: center; z-index: 0; animation: axken 22s ease-in-out infinite alternate; }
.axh::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,7,13,.55) 0%, rgba(6,7,13,.72) 55%, var(--ink) 96%); }
@keyframes axken { to { transform: scale(1.07); } }
.axh__inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; text-align: center; }
.axh__eyebrow { color: var(--acc); font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 18px; }
.axh__title { font-size: clamp(58px, 10vw, 118px); line-height: .98; margin: 0 0 18px; text-shadow: 0 2px 40px rgba(0,0,0,.5); }
.axh__tag { font-size: clamp(20px, 2.6vw, 30px); font-weight: 500; color: rgba(255,255,255,.86); max-width: 720px; margin: 0 auto 22px; line-height: 1.3; }
.axh__price { color: var(--w72); font-size: 16px; margin: 0 0 28px; } .axh__price b { color:#fff; font-weight:600; }
.axh__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* 2 WHAT'S INSIDE — static feature list */
.axstrip { text-align: center; padding: 48px clamp(22px,6vw,90px); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.axstrip__label { color: var(--w45); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 22px; }
.axstrip__pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 980px; margin: 0 auto; }
.axstrip__pill { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--line2); border-radius: 980px; padding: 11px 20px; font-size: 15px; font-weight: 500; color: #fff; }
.axstrip__pill svg { color: var(--acc); font-size: 12px; }
/* 3 PITCH */
.axpitch { text-align: center; }
.axpitch h2 { font-size: clamp(30px, 4.4vw, 54px); font-weight: 600; line-height: 1.16; max-width: 940px; margin: 0 auto; }
.axpitch h2 span { color: var(--acc); }
.axpitch p { color: var(--w45); font-size: 18px; margin: 26px 0 0; }
/* 4 SPOTLIGHTS */
.axspot { padding-top: clamp(50px,7vw,90px); padding-bottom: clamp(50px,7vw,90px); }
.axspot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,80px); align-items: center; max-width: 1180px; margin: 0 auto; }
.axspot--rev .axspot__grid { direction: rtl; } .axspot--rev .axspot__text, .axspot--rev .axspot__vis { direction: ltr; }
.axspot__text { position: relative; }
.axspot__num { position: absolute; top: -70px; left: -10px; font-size: 130px; font-weight: 800; color: rgba(255,255,255,.05); letter-spacing: -.04em; z-index: 0; }
.axspot__text h3 { position: relative; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; margin: 0 0 16px; } .axspot__text h3 span { color: var(--acc); }
.axspot__text p { position: relative; font-size: 18px; line-height: 1.55; color: var(--w72); max-width: 30ch; }
.axspot__vis { min-height: 300px; }
/* vignette fake-UI */
.axv { position: relative; min-height: 320px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line2); overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 34px; gap: 20px; }
.axv__glow { position: absolute; top: -40%; right: -20%; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(43,143,255,.35), transparent 70%); filter: blur(30px); }
.axv__chip { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; background: rgba(43,143,255,.16); color: #cfe6ff; border: 1px solid rgba(43,143,255,.4); border-radius: 12px; padding: 10px 16px; font-size: 15px; font-weight: 600; }
.axv__list { position: relative; list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.axv__list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; line-height: 1.35; color: rgba(255,255,255,.86); }
.axv__list li svg { color: var(--acc); font-size: 12px; margin-top: 3px; flex: none; }
.axv--1 .axv__glow{background:radial-gradient(closest-side,rgba(120,90,255,.32),transparent 70%)} .axv--2 .axv__glow{background:radial-gradient(closest-side,rgba(43,143,255,.32),transparent 70%);top:auto;bottom:-40%;left:-15%;right:auto}
.axv--3 .axv__glow{background:radial-gradient(closest-side,rgba(52,211,153,.3),transparent 70%)} .axv--4 .axv__glow{background:radial-gradient(closest-side,rgba(255,180,80,.28),transparent 70%)}
/* 5 TWO PRODUCTS */
.axtwo { text-align: center; background: var(--panel); border-radius: 36px; margin: 0 clamp(12px,3vw,40px); }
.axtwo h2 { font-size: clamp(34px,5vw,64px); }
.axtwo__sub { color: var(--w72); font-size: 19px; max-width: 640px; margin: 18px auto 0; line-height: 1.5; } .axtwo__sub em { color:#fff; font-style: normal; }
.axtwo__stage { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; margin: 60px 0 28px; min-height: 360px; }
.axframe { background: #0e1119; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.axframe--web { width: min(620px, 70%); border-radius: 16px; overflow: hidden; transform: rotate(-2deg); }
.axframe__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #151922; }
.axframe__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); }
.axframe__bar span { margin-left: 14px; font-size: 12px; color: rgba(255,255,255,.4); }
.axframe--web .axframe__shot { height: 300px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.axframe--web .axframe__shot b { font-size: 40px; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.axframe--phone { width: 168px; border-radius: 30px; padding: 10px; margin-left: -70px; margin-bottom: -20px; transform: rotate(3deg); position: relative; z-index: 2; }
.axframe--phone .axframe__notch { width: 54px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.25); margin: 4px auto 8px; }
.axframe--phone .axframe__shot { height: 300px; border-radius: 20px; background-size: cover; background-position: center; }
.axframe--phone .axframe__tabs { display: flex; justify-content: space-around; padding: 12px 0 4px; } .axframe--phone .axframe__tabs i { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.14); }
.axtwo__caps { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; color: var(--w45); font-size: 14px; }
/* 6 DESIGNS */
.axdesigns__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1180px; margin: 0 auto; }
.axbig { font-size: clamp(90px,12vw,150px); font-weight: 800; letter-spacing: -.04em; line-height: 1; background: linear-gradient(120deg,#fff,var(--acc)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: 8px; }
.axdesigns h2 { font-size: clamp(32px,4vw,52px); margin: 0 0 18px; }
.axdesigns p { color: var(--w72); font-size: 18px; line-height: 1.55; max-width: 36ch; }
.axdesigns__fan { position: relative; height: 360px; }
.axdesigns__fan span { position: absolute; top: 18px; left: 50%; width: 224px; height: 304px; border-radius: 18px; background-image: var(--photo); background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 34px 64px rgba(0,0,0,.6); transform-origin: bottom center; overflow: hidden; }
.axdesigns__fan span::after { content: ""; position: absolute; inset: 0; }
.axdesigns__fan span:nth-child(1){transform:translateX(-74%) rotate(-11deg);z-index:1;filter:brightness(.6)} .axdesigns__fan span:nth-child(1)::after{background:linear-gradient(155deg,rgba(43,143,255,.34),rgba(6,7,13,.58))}
.axdesigns__fan span:nth-child(2){transform:translateX(-57%) rotate(-4deg);z-index:2;filter:brightness(.82)} .axdesigns__fan span:nth-child(2)::after{background:linear-gradient(155deg,rgba(255,95,120,.3),rgba(6,7,13,.5))}
.axdesigns__fan span:nth-child(3){transform:translateX(-43%) rotate(3deg);z-index:3} .axdesigns__fan span:nth-child(3)::after{background:linear-gradient(155deg,rgba(52,211,153,.26),rgba(6,7,13,.42))}
.axdesigns__fan span:nth-child(4){transform:translateX(-26%) rotate(10deg);z-index:2;filter:brightness(.7)} .axdesigns__fan span:nth-child(4)::after{background:linear-gradient(155deg,rgba(180,120,255,.3),rgba(6,7,13,.55))}
/* 7 TIMELINE */
.axtl { text-align: center; }
.axtl h2 { font-size: clamp(34px,5vw,64px); margin-bottom: 50px; }
.axtl__rail { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; text-align: left; position: relative; }
.axtl__rail::before { content: ""; position: absolute; top: 16px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--acc), rgba(43,143,255,.1)); }
.axtl__step { position: relative; padding-top: 44px; }
.axtl__step::before { content: ""; position: absolute; top: 9px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 5px rgba(43,143,255,.18); }
.axtl__step b { color: var(--acc); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.axtl__step h4 { font-size: 24px; margin: 8px 0 10px; }
.axtl__step p { color: var(--w72); font-size: 16px; line-height: 1.5; }
.axtl__end { margin: 44px 0 0; font-size: 22px; color: #fff; font-weight: 500; }
/* 8 INCLUDED */
.axinc { text-align: center; }
.axinc h2 { font-size: clamp(34px,5vw,60px); }
.axinc__sub { color: var(--w72); font-size: 18px; margin: 16px 0 44px; }
.axinc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; text-align: left; max-width: 900px; margin: 0 auto; }
.axinc__row { display: flex; align-items: flex-start; gap: 14px; font-size: 17px; padding: 6px 0; }
.axinc__row b { font-weight: 600; color: #fff; } .axinc__row em { font-style: normal; color: var(--w45); }
.axinc__check { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(43,143,255,.16); color: var(--acc); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 2px; }
/* 9 PRICE */
.axprice { text-align: center; }
.axprice__card { position: relative; max-width: 640px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 32px; padding: 56px 40px; overflow: hidden; }
.axprice__card::before { content: ""; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 120%; height: 120%; background: radial-gradient(closest-side, rgba(43,143,255,.22), transparent 65%); }
.axprice__card > * { position: relative; }
.axprice__eyebrow { color: var(--acc); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 14px; }
.axprice__num { font-size: 110px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0; } .axprice__num span { font-size: 26px; font-weight: 500; color: var(--w45); }
.axprice__line { font-size: 22px; font-weight: 600; margin: 14px 0 6px; }
.axprice__meta { color: var(--w72); font-size: 15px; margin: 0 0 26px; }
.axprice__fine { color: var(--w45); font-size: 14px; margin: 16px 0 0; }
/* 10 FAQ */
.axfaq { max-width: 820px; margin: 0 auto; }
.axfaq h2 { font-size: clamp(30px,4vw,48px); margin-bottom: 30px; }
.axfaq__item { border-top: 1px solid var(--line2); }
.axfaq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 20px; font-weight: 600; }
.axfaq__item summary::-webkit-details-marker { display: none; }
.axfaq__item summary svg { color: var(--acc); transition: transform .2s; flex: none; } .axfaq__item[open] summary svg { transform: rotate(45deg); }
.axfaq__item p { color: var(--w72); font-size: 17px; line-height: 1.6; margin: 0 0 22px; max-width: 68ch; }
/* 11 FINAL */
.axfinal { min-height: 68vh; display: flex; align-items: center; text-align: center; overflow: hidden; }
.axfinal__bg { position: absolute; inset: 0; background-image: var(--photo); background-size: cover; background-position: center; filter: blur(60px) brightness(.5); opacity: .3; }
.axfinal::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side at 50% 50%, transparent, var(--ink) 80%); }
.axfinal__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.axfinal h2 { font-size: clamp(40px,6vw,78px); line-height: 1.02; margin: 0 0 18px; }
.axfinal p { color: var(--w72); font-size: 20px; margin: 0 0 30px; }
.axfinal__fine { color: var(--w45); font-size: 14px; margin-top: 16px !important; }
/* sticky bar */
.axstick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(18px,5vw,60px); background: rgba(10,12,20,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line2); transform: translateY(110%); transition: transform .3s cubic-bezier(.16,.84,.44,1); }
.axstick.show { transform: none; }
.axstick__name { font-weight: 600; color: #fff; } .axstick__name i { color: var(--w45); font-style: normal; font-weight: 400; }
.axstick__actions { display: flex; align-items: center; gap: 10px; }
.axstick__wish { padding: 10px 14px; border: 1px solid var(--line2); background: transparent; color: #fff; border-radius: 980px; cursor: pointer; }
@media (max-width: 900px) {
  .axspot__grid, .axdesigns__grid { grid-template-columns: 1fr; gap: 28px; }
  .axspot--rev .axspot__grid { direction: ltr; }
  .axspot__num { top: -54px; font-size: 96px; }
  .axtl__rail { grid-template-columns: 1fr; gap: 28px; } .axtl__rail::before { display: none; }
  .axinc__grid { grid-template-columns: 1fr; }
  .axtwo__stage { transform: scale(.86); }
}
/* legacy .axpd container tweaks kept below intentionally overridden above */
.axpd-legacy-anchor { display: none; }

/* Brand accent — indigo. On dark, the button fill lifts slightly and accent TEXT
   (links) brightens to a light indigo so it reads on black; buttons always keep a
   solid indigo fill with white text (never dark text on a coloured fill). */
:root { --primary:#4f5bd6; --primary-dark:#3a45b8; --blue:#4f5bd6; --blue-hover:#3a45b8; --link:#4f5bd6; }
:root[data-theme="dark"] { --primary:#4f5bd6; --primary-dark:#5b67e8; --blue:#4f5bd6; --blue-hover:#5b67e8; --link:#c3c9ff; }
.ax-btn { color: #fff; }            /* always white text on the indigo fill */
.ax-link { color: var(--link); font-weight: 500; }   /* light indigo on dark = high contrast */
/* product image area sits flush on the card (white photo backgrounds removed at source) */
.ax-card__img { background: transparent; }

/* Dark-mode FILLS keep a deep blue (light accent tokens are for TEXT only, not fills). */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .ax-btn,
:root[data-theme="dark"] .side-item.active,
:root[data-theme="dark"] .searchbar button,
:root[data-theme="dark"] .cat-nav .all,
:root[data-theme="dark"] .axbadge { background: #2f6fd0; color: #fff; }
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .ax-btn:hover,
:root[data-theme="dark"] .searchbar button:hover { background: #3d8ce0; color: #fff; }
:root[data-theme="dark"] .deal-col { background: #16253c; }
:root[data-theme="dark"] .pcard .atc { background: var(--card); border-color: #7fb6ff; color: #cfe2ff; }
:root[data-theme="dark"] .pcard .atc:hover { background: #2f6fd0; color: #fff; }
/* segmented control active pill stays light-on-dark, not dark-on-dark */
:root[data-theme="dark"] .ax-pill.on { background: #f5f5f7; color: #1d1d1f; }
:root[data-theme="dark"] .ax-seg { background: #2a2a2e; }

/* ── Product detail page (themed via the design tokens above — no hardcoded colours) ── */
.pd { max-width: 1400px; margin: 0 auto; padding: 24px clamp(16px,4vw,48px); font-family: var(--font); color: var(--text); }
.pd-back { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-dim); margin-bottom: 18px; }
.pd-back:hover { color: var(--primary); }
.pd-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(24px,4vw,56px); align-items: start; }
.pd-media { border-radius: 20px; overflow: hidden; background: var(--card); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.pd-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.pd-name { font-size: clamp(28px,4vw,42px); line-height: 1.06; margin: 0 0 10px; font-weight: 700; color: var(--text); }
.pd-tag { color: var(--text-mid); font-size: 17px; margin: 0 0 18px; }
.pd-price { font-size: 26px; font-weight: 700; margin: 0 0 24px; color: var(--text); }
.pd-block { margin: 0 0 24px; }
.pd-label { font-size: 13px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 10px; }
.pd-label b { color: var(--text); font-weight: 600; text-transform: none; letter-spacing: 0; }
/* colour swatches */
.pd-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.pd-sw { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: none; padding: 0; cursor: pointer; width: 48px; }
.pd-sw-dot { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); transition: box-shadow .15s; }
.pd-sw.on .pd-sw-dot { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--primary); }
.pd-sw-name { font-size: 10.5px; line-height: 1.1; text-align: center; color: var(--text-dim); }
.pd-sw.on .pd-sw-name { color: var(--primary); font-weight: 600; }
.pd-hint { font-size: 12.5px; color: var(--text-dim); margin: 10px 0 0; }
/* size selector — pick one */
.pd-sizes { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-size { padding: 9px 16px; border-radius: var(--r-btn); border: 1.5px solid var(--line); background: var(--card); color: var(--text); font-family: var(--font); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s; }
.pd-size:hover { border-color: var(--primary); }
.pd-size.on { border-color: var(--primary); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.pd-actions { display: flex; gap: 12px; margin: 26px 0; align-items: center; }
.pd-wish { padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--font); }
.pd-wish:hover { border-color: var(--primary); }
@media (max-width: 820px) { .pd-grid { grid-template-columns: 1fr; } }


/* ================================================================
   DARK-BLUE-ON-BLACK — permanent fix (David, inviolate, 2026-07-27).
   On the dark theme the indigo brand accent is ONLY ever a solid FILL
   (always with white text). Anywhere it is used as TEXT or an ICON it
   must brighten to a light indigo so it never sits dark-blue on black.
   Button / nav / column FILLS are deliberately left untouched.
   ================================================================ */
:root[data-theme="dark"]{ --accent-ink:#aab6ff; }
:root[data-theme="dark"] .cat-menu .ci .fa,
:root[data-theme="dark"] .deal-col .di .fa,
:root[data-theme="dark"] .cat-tile .fa,
:root[data-theme="dark"] .pcard .thumb,
:root[data-theme="dark"] .neo-tab.on,
:root[data-theme="dark"] .ax-eyebrow,
:root[data-theme="dark"] .ax-link,
:root[data-theme="dark"] .ax-card:hover .ax-card__name,
:root[data-theme="dark"] .page-head h2 svg,
:root[data-theme="dark"] .page-head h2 .fa{ color: var(--accent-ink) !important; }
:root[data-theme="dark"] [style*="color: var(--blue)"],
:root[data-theme="dark"] [style*="color:var(--blue)"]{ color: var(--accent-ink) !important; }


/* ============================================================================
   KANBAN BOARD — shared by the CRM Deals / Activities boards and the
   Projects & Tasks board (the <Kanban/> component in @bnb/crm and @bnb/projects).
   Lives here in the DB stylesheet (design.platform_stylesheet name='commerce-admin')
   because ALL styling does — there is NO .css file. These rules were previously
   missing, so every board rendered unstyled; added 2026-07-27. Token-driven, so it
   follows the light/dark theme automatically.
   ============================================================================ */
.kanban { display: flex; gap: 14px; align-items: flex-start; width: 100%; overflow-x: auto; padding-bottom: 10px; }
.kan-col {
  flex: 1 1 0; min-width: 240px; display: flex; flex-direction: column; gap: 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-box); padding: 10px;
  transition: background .15s, border-color .15s;
}
.kan-col-over { background: color-mix(in srgb, var(--blue) 10%, var(--card)); border-color: var(--blue); }
.kan-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 2px 8px; border-bottom: 1px solid var(--line); margin-bottom: 2px; font-weight: 600;
}
.kan-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-box);
  box-shadow: var(--shadow); padding: 10px 12px; cursor: grab; user-select: none;
  transition: box-shadow .15s, transform .05s;
}
.kan-card:hover { box-shadow: 0 6px 14px rgb(0 0 0 / 16%); }
.kan-card:active { cursor: grabbing; }
.kan-card-dragging { opacity: .5; transform: rotate(1deg); }
.kan-empty {
  padding: 16px 8px; text-align: center; font-size: var(--fs-sm);
  border: 1px dashed var(--line); border-radius: var(--r-box);
}
@media (max-width: 820px) { .kan-col { min-width: 200px; } }


/* ================================================================
   BUTTON + KANBAN sizing fix (David 2026-07-27): a button must always
   fit its label (never clip/wrap), and kanban column headings must show
   the full stage name, never truncate to 'Qualifi...'.
   ================================================================ */
.btn, .icon-btn, .ax-btn, .ax-link, .nav-btn { white-space: nowrap; line-height: 1.2; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.kan-head, .kan-head span, .deal-col .head { white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; }
.kan-col { min-width: 220px; }

/* --- 2026-07-28 store fixes (David): sticky footer, logo-left footer, dark-mode readable links --- */
#root{display:flex;flex-direction:column;min-height:100dvh}
.axfoot{margin-top:auto}
.axfoot__top{display:flex;flex-wrap:wrap;gap:30px 48px;align-items:flex-start}
.axfoot__brand{order:-1;margin-right:auto;max-width:340px}
@media (max-width:740px){.axfoot__top{gap:24px}.axfoot__brand{margin-right:0;flex-basis:100%}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--link:#8fc0ff;--link-hover:#ff9b8e;--blue:#7fb6ff;--blue-hover:#a9ceff;--primary:#7fb6ff;--primary-dark:#a9ceff}}

/* readability: section/group + panel titles at full contrast (David 2026-07-30) */
.side-group,.side-group--toggle{color:var(--text);font-weight:700;opacity:.92}
.card>h3,.card>h4,.panel-title,.section-title,.dt-title,.table-title{color:var(--text)}
/* ===== website editor + shop basket ===== */
/* Website — the owner writing the words on their own site */
.wa{display:flex;flex-direction:column;gap:18px;max-width:1400px}
.wa-head{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.wa-head h1{margin:0 0 4px}
.wa-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.wa-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.wa-label{font-size:13px;font-weight:600}
.wa-hint{font-size:12.5px;opacity:.72}
.wa-actions{position:sticky;bottom:0;padding:14px 0;display:flex;gap:12px}
.wa .card h2{margin:0 0 14px;font-size:16px}


/* ---- Task board cards: readable at a glance (David, 19 Aug 2026) ---- */
.kan-card { overflow: hidden; }
.kan-card-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kan-card-top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.kan-card-title {
  flex: 1; min-width: 0; cursor: pointer; line-height: 1.35;
  /* A long word with no spaces still has to stay inside the card. */
  overflow-wrap: anywhere; word-break: break-word;
}
.kan-card-pill { flex: 0 0 auto; white-space: nowrap; }
.kan-card-desc {
  color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.45;
  overflow-wrap: anywhere; word-break: break-word;
  /* Four lines is enough to know what it is; the whole text is on hover. */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.kan-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  color: var(--text-dim); font-size: var(--fs-sm); min-width: 0;
}
.kan-card-meta > span { display: inline-flex; align-items: center; min-width: 0; }
.kan-card-actions {
  display: flex; gap: 8px; padding-top: 8px;
  border-top: 1px solid var(--line);
}
.kan-card-actions .btn { padding: 4px 10px; }


/* ---- Nothing may spill out of a card, whatever the markup (David, 19 Aug 2026) ----
   A pasted command, a file path or a long address has no spaces in it, so a browser
   will not break it and it runs straight out of the box and over its neighbour.
   Applied to the card ITSELF and to everything inside it, so it holds for cards that
   predate the newer markup as well. */
.kan-card, .card, .kan-col { min-width: 0; }
.kan-card { overflow: hidden; }
.kan-card, .kan-card * { overflow-wrap: anywhere; word-break: break-word; }
/* A grid cell's second line, and any muted sub-line, wraps rather than overflows. */
.grid-sub, .muted { overflow-wrap: anywhere; word-break: break-word; }

/* THE TWO-LINE GRID CELL - ONE SPACING STANDARD, EVERY GRID, EVERY COLUMN.
   A title with a quieter line under it. The first line is a block at the normal
   reading height whichever tag it uses, so two columns side by side are spaced
   identically and the second line stays inside the row. David, 21 August 2026. */
.bnb-grid .ag-cell > div { line-height: 1.35; }
.bnb-grid .ag-cell > div > strong,
.bnb-grid .ag-cell > div > span { display: block; line-height: 1.35; }
.bnb-grid .grid-sub { font-size: 12px; line-height: 1.35; }

/* AND WHEN THE TITLE IS A BARE TEXT NODE. A cell holding a quieter sub-line reads
   at the normal height whatever the title is written as - <strong>, <span>, or no
   tag at all - so no module can space its rows differently by writing its markup a
   different way. David, 21 August 2026. */
.bnb-grid .ag-cell:has(.grid-sub),
.bnb-grid .ag-cell:has(> .muted) { line-height: 1.35; }




/* ---- Nothing overflows its box, in any module (David, 19 Aug 2026) ----
   A table cell will not shrink below its content unless it is told it may, which is
   why a long unbroken word drags a table wider than the screen. */
table { table-layout: auto; max-width: 100%; }
th, td { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
/* A table that genuinely needs more room scrolls inside its own panel rather than
   pushing the whole page sideways. */
.card > table, .panel > table { display: table; width: 100%; }
/* The places a description, note or comment is printed. */
.cell-sub, .grid-sub, .sub, .desc, .note, .muted, .pill { overflow-wrap: anywhere; word-break: break-word; }
/* Anything laid out as a flex or grid child refuses to shrink by default; this is
   what actually lets the text wrap instead of stretching its parent. */
.row > *, .grid2 > *, .stack > * { min-width: 0; }


/* ---- The board keeps usable columns (David, 19 Aug 2026) ---- */
.kan-col { min-width: 260px !important; flex: 0 0 260px; }
.kanban { overflow-x: auto; }
/* Cards still hold their content; it is the COLUMN that must not collapse. */
.kan-card { min-width: 0; }

/* WHO IS SIGNED IN, AND ANYTHING THE SIDEBAR HAS TO SAY OUT LOUD.
   These two were written as inline style attributes on the elements themselves, which is a
   second place the design lived and the one the browser actually used. They are rows here
   now, like every other style. (David, 21 August 2026: the back office is one standard.) */
.side-who { padding: 8px 11px; margin: 6px 0; border-radius: var(--r-box); background: var(--bg); }
.side-who__label { font-size: var(--fs-sm); color: var(--text-dim); }
.side-who__name { font-weight: 600; }
.side-note { margin: 4px 11px 8px; font-size: var(--fs-sm); }
.side-note.bad { color: var(--red, #c0392b); }

/* ACTIONS INSIDE A GRID ROW FIT THE ROW, AND THEY NEVER TOUCH.
   A grid row is 56 pixels tall. A full-size button is 36 tall and carries 24 pixels of padding
   down each side, so two of them in one cell could not sit side by side in the column, wrapped
   onto two lines instead, made the cell 81 pixels tall and spilled out over the row underneath
   with the pair jammed against each other. Measured on the affiliate list, 25 August 2026.

   Inside a grid cell the actions are compact and stacked, so the pair fits the row with clear
   space between them, and the padding is trimmed so the WHOLE label is read rather than cut off
   with dots - the column is 143 wide and "Approve payment" needs 94 of it, which it did not get
   until the cell and the button stopped spending 70 pixels on padding.

   Written for EVERY grid cell, not for the one screen it was found on, because the next screen
   with two actions in a row lands in exactly the same place. */
.bnb-grid .ag-cell .row { flex-wrap: nowrap; gap: 8px; }
.bnb-grid .ag-cell:has(.aff-rowactions) { padding-left: 8px; padding-right: 8px; }
.bnb-grid .ag-cell .row.aff-rowactions {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.bnb-grid .ag-cell .btn {
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.5;
  min-height: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: center;
}