/* ==========================================================================
   Boogal Business OS

   The palette is the client's own, sampled from boogal.co.za/new. The logo
   colours are exact - taken from the logo file, not from a screen grab.

   Two families, doing two different jobs:

     IDENTITY   crimson and gold. The logo, headings, editorial accents.
     ACTION     blue. Buttons, links, focus rings. Nothing else.

   Keeping those apart is the point. When the brand colour is also the button
   colour, every panel turns into one flat wash and nothing reads as
   clickable. A button here is blue because it is a button.

   The neutrals are plain greys on plain white. The palette this replaced
   warmed everything towards paper and sand, which tinted every grey in the
   application.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Identity - exact values from the logo file */
  --crimson:        #C0202E;
  --crimson-deep:   #96141F;
  --crimson-soft:   #FBE8EA;
  --crimson-ink:    #6B0E16;

  --gold:           #DBB456;
  --gold-light:     #ECD292;
  --gold-deep:      #A8873A;
  --gold-soft:      #FCF6E7;

  /* Action - every button, link and focus ring.

     --blue-bright is the client's exact value. On white it measures 4.18:1,
     which passes WCAG AA for large text but not for normal text, so it is
     used only where the text is large or where nothing is written on it.
     --blue carries everything else at 5.95:1 and is visually almost the
     same colour. */
  --blue-bright:    #2575FC;
  --blue:           #1259E0;
  --blue-deep:      #0D47B5;
  --blue-soft:      #E8F0FE;
  --blue-ink:       #0B3D91;

  /* Editorial accent - the wordmark and inline links */
  --berry:          #CC3366;
  --berry-deep:     #A8244F;
  --berry-soft:     #FBE9F0;

  /* Neutrals - plain greys, plain white */
  --charcoal:       #333333;
  --charcoal-soft:  #4A4A4A;
  --slate:          #5C5C5C;
  --muted:          #757575;
  --line:           #E3E3E3;
  --line-strong:    #CFCFCF;
  --paper:          #FFFFFF;
  --panel:          #FFFFFF;
  --sunk:           #F3F3F3;

  /* Status. These carry meaning rather than brand, and people read them at a
     glance, so they are deliberately unchanged. --blue-status is kept
     distinct from the action blue for the same reason. */
  --green:          #1F7A4C;
  --green-soft:     #E3F2E9;
  --amber:          #B57608;
  --amber-soft:     #FBF0DC;
  --red:            #B0241F;
  --red-soft:       #F9E5E4;
  --blue-status:      #215C87;
  --blue-status-soft: #E4EFF6;

  /* Gradients */
  --grad-gold:      linear-gradient(135deg, #A8873A 0%, #DBB456 38%, #ECD292 62%, #B8933F 100%);
  --grad-crimson:   linear-gradient(135deg, #96141F 0%, #C0202E 100%);

  /* Type */
  --display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --body:    'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Space and shape */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(28,26,25,.05), 0 1px 3px rgba(28,26,25,.06);
  --shadow:    0 2px 4px rgba(28,26,25,.04), 0 4px 12px rgba(28,26,25,.07);
  --shadow-lg: 0 8px 24px rgba(28,26,25,.09), 0 2px 8px rgba(28,26,25,.05);
  --shadow-crimson: 0 6px 20px rgba(192,32,46,.20);
  --shadow-blue:    0 6px 20px rgba(37,117,252,.28);

  --header-h: 76px;
  --sidebar-w: 248px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--paper);
}

h1, h2, h3, h4, h5 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); letter-spacing: -.02em; }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--blue-deep); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

code, pre { font-family: var(--mono); font-size: .875em; }
pre { background: var(--sunk); padding: 1rem; border-radius: var(--r); overflow-x: auto; border: 1px solid var(--line); }

:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--crimson); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--crimson); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.wrap--narrow { max-width: 820px; }
.wrap--wide { max-width: 1440px; }

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }

.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row--between { justify-content: space-between; align-items: center; }
.row--center { justify-content: center; align-items: center; }
.row--middle { align-items: center; }
.row--tight { gap: .5rem; }

.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* The four pillars are a fixed set, so give them fixed tracks rather than
   auto-fit: at a 1160px content width a fourth 280px track does not fit and
   the last card drops to its own row. */
.pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .pillars { grid-template-columns: 1fr; } }

.section { padding: clamp(3rem, 8vw, 6rem) 0; }
.section--tight { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.section--sunk { background: var(--sunk); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--charcoal); color: #F2EDE7; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.muted { color: var(--slate); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }

.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .5rem; }  .mb-1 { margin-bottom: .5rem; }
.mt-2 { margin-top: 1rem; }   .mb-2 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mb-3 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 2.5rem; } .mb-4 { margin-bottom: 2.5rem; }

/* --------------------------------------------------------------------------
   4. Brand marks
   -------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { height: 46px; width: auto; }

.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 700; letter-spacing: .06em;
  color: var(--crimson);
}
.brand-tag {
  font-size: .5rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600; margin-top: .28rem;
  white-space: nowrap;
}

.gold-rule {
  height: 2px; border: 0; background: var(--grad-gold);
  width: 64px; margin: 1.25rem 0;
}
.gold-rule--center { margin-left: auto; margin-right: auto; }

.eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  /* Grey, not gold: gold at this size measures 3.39:1 on white, and the
     client sets her own eyebrows in grey. */
  color: var(--slate); margin: 0 0 .75rem;
}
.eyebrow--crimson { color: var(--crimson); }
.eyebrow--light { color: var(--gold-light); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--body); font-size: .95rem; font-weight: 600; line-height: 1;
  padding: .85rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-deep); color: #fff; box-shadow: var(--shadow-blue); }

/* Kept for the few places that genuinely want the brand colour on a button:
   a destructive-adjacent confirm, or a panel that is entirely about Boogal
   rather than about an action. */
.btn--brand { background: var(--crimson); color: #fff; box-shadow: var(--shadow-sm); }
.btn--brand:hover { background: var(--crimson-deep); color: #fff; box-shadow: var(--shadow-crimson); }

.btn--gold { background: var(--grad-gold); color: #2A1F06; }
.btn--gold:hover { color: #2A1F06; box-shadow: 0 6px 18px rgba(219,180,86,.36); }

.btn--dark { background: var(--charcoal); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }

.btn--ghost { background: transparent; color: var(--blue); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-deep); }

.btn--light { background: #fff; color: var(--charcoal); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn--light:hover { border-color: var(--line-strong); color: var(--charcoal); }

.btn--on-dark { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); }
.btn--on-dark:hover { background: #fff; color: var(--charcoal); }

.btn--danger { background: var(--red); color: #fff; }
.btn--danger:hover { background: #8E1C18; color: #fff; }

.btn--sm { padding: .5rem .9rem; font-size: .82rem; border-radius: var(--r-sm); }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
/* Large buttons only, where 3:1 is the bar, so the client's exact blue is
   used at the size she uses it. */
.btn--primary.btn--lg { background: var(--blue-bright); }
.btn--primary.btn--lg:hover { background: var(--blue); }
.btn--block { width: 100%; }
.btn--icon { padding: .55rem; width: 36px; height: 36px; }

.btn-group { display: inline-flex; gap: .5rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   6. Cards and panels
   -------------------------------------------------------------------------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--shadow); border-color: transparent; }
.card--pad-lg { padding: 2rem; }
.card--tight { padding: 1rem; }

.card--link { transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); text-decoration: none; }

.card--accent { border-top: 3px solid var(--crimson); }
.card--accent-gold { border-top: 3px solid var(--gold); }

.card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin: -1.5rem -1.5rem 1.25rem; padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.card-head h2, .card-head h3 { margin: 0; font-size: 1.05rem; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.panel-head {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--sunk);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.panel-head h2, .panel-head h3 { margin: 0; font-size: 1rem; }
.panel-body { padding: 1.25rem; }
.panel-foot { padding: .9rem 1.25rem; border-top: 1px solid var(--line); background: var(--sunk); }

/* --------------------------------------------------------------------------
   7. Badges, pills, status
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .3rem .6rem; border-radius: 999px;
  background: var(--sunk); color: var(--slate); border: 1px solid var(--line);
  white-space: nowrap;
}
.badge--green  { background: var(--green-soft); color: var(--green); border-color: transparent; }
.badge--amber  { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.badge--red    { background: var(--red-soft);   color: var(--red);   border-color: transparent; }
.badge--blue   { background: var(--blue-status-soft); color: var(--blue-status); border-color: transparent; }
.badge--gold   { background: var(--gold-soft);  color: var(--gold-deep); border-color: transparent; }
.badge--crimson{ background: var(--crimson-soft); color: var(--crimson); border-color: transparent; }
.badge--muted  { background: var(--sunk); color: var(--muted); }
.badge--solid  { background: var(--crimson); color: #fff; border-color: transparent; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot--green { background: var(--green); }
.dot--amber { background: var(--amber); }
.dot--red   { background: var(--red); }
.dot--blue  { background: var(--blue-status); }
.dot--muted { background: var(--muted); }

.dot--pulse { position: relative; }
.dot--pulse::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid currentColor; opacity: .35; animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { transform: scale(.8); opacity: .5; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field:last-child { margin-bottom: 0; }

label, .label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--charcoal-soft); margin-bottom: .4rem;
}
.label-hint { font-weight: 400; color: var(--muted); font-size: .78rem; }

.input, input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], input[type="url"],
input[type="search"], input[type="datetime-local"], select, textarea {
  width: 100%;
  font-family: var(--body); font-size: .95rem; color: var(--charcoal);
  padding: .7rem .85rem;
  background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  appearance: none;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6560' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
  padding-right: 2.2rem;
}

.input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(176,23,39,.12);
}

.input--error, .input.is-error { border-color: var(--red); }
.input--error:focus { box-shadow: 0 0 0 3px rgba(176,36,31,.16); }

input::placeholder, textarea::placeholder { color: var(--muted); }
input:disabled, select:disabled, textarea:disabled { background: var(--sunk); color: var(--muted); cursor: not-allowed; }

.help { font-size: .78rem; color: var(--slate); margin-top: .35rem; }
.error-text { font-size: .78rem; color: var(--red); margin-top: .35rem; font-weight: 500; }

.check {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .9rem; font-weight: 400; color: var(--charcoal); cursor: pointer;
  margin-bottom: .5rem;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 17px; height: 17px; margin: .18rem 0 0; flex: none; accent-color: var(--crimson); cursor: pointer;
}
.check span { line-height: 1.45; }

fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem; margin: 0 0 1.5rem; }
legend { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); padding: 0 .5rem; }

.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.field--full { grid-column: 1 / -1; }

.input-group { display: flex; gap: .5rem; }
.input-group .input { flex: 1; }

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
table.data th {
  text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--slate); padding: .7rem .85rem; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
  background: var(--sunk);
}
table.data td { padding: .8rem .85rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background-color .12s var(--ease); }
table.data tbody tr:hover { background: var(--sunk); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

.table-empty { padding: 3rem 1.5rem; text-align: center; color: var(--slate); }
.table-empty h3 { color: var(--charcoal); margin-bottom: .35rem; }

/* --------------------------------------------------------------------------
   10. Alerts and flashes
   -------------------------------------------------------------------------- */
.alert {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .95rem 1.15rem; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--panel);
  border-left: 4px solid var(--slate);
  margin-bottom: 1rem; font-size: .92rem;
}
.alert strong { display: block; margin-bottom: .15rem; }
.alert--success { background: var(--green-soft); border-color: transparent; border-left-color: var(--green); color: #14472C; }
.alert--warning { background: var(--amber-soft); border-color: transparent; border-left-color: var(--amber); color: #6A4604; }
.alert--danger  { background: var(--red-soft);   border-color: transparent; border-left-color: var(--red);   color: #6E1512; }
.alert--info    { background: var(--blue-status-soft); border-color: transparent; border-left-color: var(--blue-status); color: #143751; }

.flash-stack { position: fixed; top: 1rem; right: 1rem; z-index: 200; max-width: 380px; width: calc(100% - 2rem); }
.flash-stack .alert { box-shadow: var(--shadow-lg); animation: slideIn .3s var(--ease); }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   11. Public site: header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,249,246,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; height: var(--header-h);
  /* Wider than the body wrap: brand, seven nav items and a call to action
     do not fit in 1200px without the labels wrapping. */
  max-width: 1360px;
}

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  /* The base reset makes every svg display:block, so a chevron sitting next
     to a label drops onto its own line and pushes the text up. Buttons get
     away with it because .btn is already inline-flex; these links are not. */
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .65rem; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 500; color: var(--charcoal-soft);
  white-space: nowrap;
}
.nav a:hover { background: var(--sunk); color: var(--crimson); text-decoration: none; }
.nav a.is-active { color: var(--blue); font-weight: 600; }

.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop__menu {
  position: absolute; top: calc(100% + .5rem); left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: .5rem; z-index: 10;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu { opacity: 1; visibility: visible; transform: none; }
.nav-drop__menu a { display: block; padding: .55rem .7rem; font-size: .88rem; }
.nav-drop__menu small { display: block; color: var(--muted); font-size: .74rem; font-weight: 400; }

.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--charcoal); }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 1rem; box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .85rem .6rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-drop__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding-left: 1rem; }
  .header-cta { display: none; }
}

/* --------------------------------------------------------------------------
   12. Public site: hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  /* A quiet neutral wash. The old hero faded into crimson, which put the
     brand colour behind everything before a word had been read. */
  background: linear-gradient(170deg, #FFFFFF 0%, #FCFCFC 60%, var(--sunk) 100%);
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: ''; position: absolute; top: -260px; right: -200px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(219,180,86,.13) 0%, transparent 68%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -320px; left: -220px;
  width: 580px; height: 580px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,117,252,.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  line-height: 1.04; letter-spacing: -.025em;
  color: var(--charcoal); margin-bottom: 1.25rem;
}
/* The client sets the second line in italic rather than colouring it. It
   carries the emphasis without adding another colour to the page. */
.hero__headline em { font-style: italic; font-weight: 500; }
.hero h1 .accent { color: var(--crimson); }
.hero h1 .gold {
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-deep);
}
.hero__lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--slate); max-width: 56ch; margin-bottom: 2rem; }
.hero__actions { display: flex; gap: .85rem; flex-wrap: wrap; }
.hero__note { margin-top: 1.75rem; font-size: .85rem; color: var(--muted); }

.hero__regions {
  margin-top: 2rem; font-size: .88rem; color: var(--slate);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.hero__regions strong { color: var(--charcoal); font-weight: 600; }
.hero__pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--blue-bright);
  box-shadow: 0 0 0 0 rgba(37,117,252,.55);
  animation: heroPulse 2.4s var(--ease) infinite;
  flex: none;
}
@keyframes heroPulse {
  70%  { box-shadow: 0 0 0 9px rgba(37,117,252,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,117,252,0); }
}
@media (prefers-reduced-motion: reduce) { .hero__pulse { animation: none; } }

/* --------------------------------------------------------------------------
   13. Pillars and services
   -------------------------------------------------------------------------- */
.pillar {
  display: flex; flex-direction: column; height: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.75rem; position: relative; overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pillar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-crimson);
}
.pillar--gold::before { background: var(--grad-gold); }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.pillar__icon {
  width: 46px; height: 46px; border-radius: var(--r);
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--crimson-soft); color: var(--crimson);
}
.pillar--gold .pillar__icon { background: var(--gold-soft); color: var(--gold-deep); }

.pillar h3 { font-family: var(--display); font-size: 1.4rem; margin-bottom: .35rem; }
.pillar__tag { font-size: .8rem; color: var(--gold-deep); font-weight: 600; margin-bottom: .85rem; }
.pillar__list { list-style: none; padding: 0; margin: 1rem 0 1.5rem; font-size: .9rem; }
.pillar__list li { padding: .3rem 0 .3rem 1.3rem; position: relative; color: var(--slate); }
.pillar__list li::before {
  content: ''; position: absolute; left: 0; top: .78rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.pillar__foot { margin-top: auto; padding-top: 1rem; }

/* --------------------------------------------------------------------------
   14. Compliance score
   -------------------------------------------------------------------------- */
.score {
  display: flex; align-items: center; gap: 1.25rem;
}
.score__ring { position: relative; width: 108px; height: 108px; flex: none; }
.score__ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.score__ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.score__track { stroke: var(--line); }
.score__value-ring { transition: stroke-dashoffset .9s var(--ease); }
.score__ring--green .score__value-ring { stroke: var(--green); }
.score__ring--amber .score__value-ring { stroke: var(--amber); }
.score__ring--red   .score__value-ring { stroke: var(--red); }
.score__ring--unknown .score__value-ring { stroke: var(--muted); }

.score__centre {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.score__number { font-size: 1.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.score__pct { font-size: .8rem; color: var(--muted); }

.score__band {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.score__band--green { color: var(--green); }
.score__band--amber { color: var(--amber); }
.score__band--red   { color: var(--red); }

.compliance-list { list-style: none; padding: 0; margin: 0; }
.compliance-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.compliance-item:last-child { border-bottom: 0; }
.compliance-item__body { flex: 1; min-width: 0; }
.compliance-item__name { font-weight: 600; font-size: .93rem; }
.compliance-item__meta { font-size: .8rem; color: var(--slate); }

/* --------------------------------------------------------------------------
   15. Admin shell
   -------------------------------------------------------------------------- */
.admin { display: flex; min-height: 100vh; background: var(--paper); }

.sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--charcoal); color: #C9C2BA;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar__brand { padding: 1.25rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar__brand .brand-name { color: #fff; font-size: 1.35rem; }
.sidebar__brand .brand-tag { color: var(--gold-light); }

.sidebar__nav { padding: .75rem .6rem; flex: 1; }
.sidebar__group { margin-bottom: 1.1rem; }
.sidebar__label {
  font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #78706A; padding: .5rem .6rem .35rem;
}
.sidebar a {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .65rem; margin-bottom: 1px; border-radius: var(--r-sm);
  color: #C9C2BA; font-size: .88rem; font-weight: 500;
}
.sidebar a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sidebar a.is-active { background: var(--blue); color: #fff; }
.sidebar a.is-active:hover { background: var(--blue-deep); }
.sidebar a svg { flex: none; opacity: .85; }
.sidebar__count {
  margin-left: auto; font-size: .7rem; font-weight: 700;
  background: rgba(255,255,255,.14); padding: .1rem .4rem; border-radius: 999px; min-width: 20px; text-align: center;
}
.sidebar a.is-active .sidebar__count { background: rgba(0,0,0,.25); }
.sidebar__count--alert { background: var(--crimson); color: #fff; }

.sidebar__foot { padding: .9rem 1rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .78rem; }

.admin__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.5rem; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.topbar__title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.topbar__search { position: relative; flex: 1; max-width: 420px; }
.topbar__search input { padding-left: 2.2rem; }
.topbar__search svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--muted); }

.admin__content { padding: 1.5rem; flex: 1; }
.admin__content > .wrap { padding: 0; max-width: none; }

.page-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.page-head h1 { font-size: 1.55rem; margin: 0 0 .2rem; letter-spacing: -.015em; }
.page-head p { margin: 0; color: var(--slate); font-size: .9rem; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 150;
    transform: translateX(-100%); transition: transform .22s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: none; }
  .admin__content { padding: 1rem; }
  .topbar { padding: .75rem 1rem; }
}

.sidebar-scrim {
  display: none; position: fixed; inset: 0; z-index: 140;
  background: rgba(28,26,25,.45);
}
.sidebar-scrim.is-open { display: block; }

/* --------------------------------------------------------------------------
   16. TODAY tiles
   -------------------------------------------------------------------------- */
.today {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin-bottom: 1.75rem;
}
.tile {
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1rem; text-decoration: none; color: inherit;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; color: inherit; border-color: var(--line-strong); }
.tile__count { font-size: 1.9rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tile__value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile__label { font-size: .8rem; color: var(--slate); font-weight: 500; }
.tile__detail { font-size: .72rem; font-weight: 600; }

.tile--crimson .tile__count, .tile--crimson .tile__value { color: var(--crimson); }
.tile--red .tile__count, .tile--red .tile__value { color: var(--red); }
.tile--red .tile__detail { color: var(--red); }
.tile--amber .tile__count, .tile--amber .tile__value { color: var(--amber); }
.tile--gold .tile__count, .tile--gold .tile__value { color: var(--gold-deep); }
.tile--blue .tile__count, .tile--blue .tile__value { color: var(--blue-status); }
.tile--muted .tile__count, .tile--muted .tile__value { color: var(--muted); }

/* --------------------------------------------------------------------------
   17. Chat (public widget and admin assistant)
   -------------------------------------------------------------------------- */
.chat-launcher {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 120;
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1.15rem; border: 0; border-radius: 999px;
  background: var(--grad-crimson); color: #fff; font-family: var(--body);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-crimson);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(176,23,39,.32); }

.chat-panel {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 130;
  width: min(400px, calc(100vw - 2rem)); height: min(620px, calc(100vh - 2.5rem));
  background: var(--panel); border-radius: var(--r-lg); overflow: hidden;
  display: none; flex-direction: column;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.chat-panel.is-open { display: flex; }

.chat-head {
  padding: .9rem 1.1rem; background: var(--grad-crimson); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.chat-head strong { display: block; font-size: .95rem; }
.chat-head small { opacity: .82; font-size: .74rem; }
.chat-head button { background: none; border: 0; color: #fff; cursor: pointer; padding: .3rem; opacity: .85; }
.chat-head button:hover { opacity: 1; }

.chat-log { flex: 1; overflow-y: auto; padding: 1rem; background: var(--paper); }

.msg { display: flex; margin-bottom: .85rem; }
.msg--user { justify-content: flex-end; }
.msg__bubble {
  max-width: 84%; padding: .7rem .9rem; border-radius: var(--r-lg);
  font-size: .9rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.msg--assistant .msg__bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg--user .msg__bubble { background: var(--crimson); color: #fff; border-bottom-right-radius: 4px; }
.msg--system .msg__bubble { background: var(--gold-soft); border: 1px solid var(--gold-light); font-size: .84rem; }

.chat-typing { display: flex; gap: .25rem; padding: .7rem .9rem; }
.chat-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: bounce 1.3s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .18s; }
.chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

.chat-foot { padding: .75rem; border-top: 1px solid var(--line); background: #fff; }
.chat-form { display: flex; gap: .5rem; align-items: flex-end; }
.chat-form textarea {
  flex: 1; min-height: 42px; max-height: 120px; padding: .6rem .75rem;
  border-radius: var(--r); font-size: .9rem; resize: none;
}
.chat-send {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: var(--r);
  background: var(--crimson); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.chat-send:disabled { opacity: .5; cursor: not-allowed; }

.chat-disclaimer { font-size: .68rem; color: var(--muted); text-align: center; margin-top: .5rem; }

.chat-chips { display: flex; gap: .4rem; flex-wrap: wrap; padding: 0 1rem 1rem; }
.chat-chip {
  font-size: .78rem; padding: .4rem .7rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); cursor: pointer; color: var(--charcoal-soft);
  font-family: var(--body); transition: border-color .15s var(--ease), color .15s var(--ease);
}
.chat-chip:hover { border-color: var(--crimson); color: var(--crimson); }

/* Admin assistant: a full-height column rather than a floating panel */
.assistant { display: grid; grid-template-columns: 260px 1fr; gap: 1.25rem; height: calc(100vh - 160px); }
.assistant__log { flex: 1; overflow-y: auto; padding: 1.25rem; }
.assistant__panel { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 900px) { .assistant { grid-template-columns: 1fr; height: auto; } .assistant__side { display: none; } }

/* --------------------------------------------------------------------------
   18. Approval card
   -------------------------------------------------------------------------- */
.approval {
  border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--r); background: var(--panel); overflow: hidden; margin-bottom: 1rem;
}
.approval--high { border-left-color: var(--red); }
.approval__head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.approval__body { padding: 1.25rem; }
.approval__preview {
  background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1rem; font-size: .88rem; white-space: pre-wrap; line-height: 1.55;
  max-height: 340px; overflow-y: auto; font-family: var(--body);
}
.approval__consequence {
  font-size: .84rem; color: var(--crimson-ink); background: var(--crimson-soft);
  padding: .6rem .85rem; border-radius: var(--r-sm); margin-top: .85rem;
}
.approval__foot { padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: var(--sunk); display: flex; gap: .5rem; flex-wrap: wrap; }
.approval__warnings { background: var(--amber-soft); border-radius: var(--r-sm); padding: .8rem 1rem; margin-top: .85rem; font-size: .85rem; }
.approval__warnings ul { margin: .35rem 0 0; padding-left: 1.1rem; }

/* --------------------------------------------------------------------------
   19. Automation switch
   -------------------------------------------------------------------------- */
.master-switch {
  border-radius: var(--r-lg); padding: 1.75rem; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.master-switch--on  { background: linear-gradient(135deg, #14472C 0%, #1F7A4C 100%); }
.master-switch--off { background: linear-gradient(135deg, #6E1512 0%, #B0241F 100%); }
.master-switch h2 { color: #fff; margin: 0 0 .3rem; font-size: 1.4rem; }
.master-switch p { margin: 0; opacity: .92; font-size: .92rem; max-width: 60ch; }

.switch { position: relative; display: inline-block; width: 52px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider {
  position: absolute; cursor: pointer; inset: 0; background: var(--line-strong);
  border-radius: 999px; transition: background-color .2s var(--ease);
}
.switch__slider::before {
  content: ''; position: absolute; height: 24px; width: 24px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s var(--ease); box-shadow: var(--shadow-sm);
}
.switch input:checked + .switch__slider { background: var(--green); }
.switch input:checked + .switch__slider::before { transform: translateX(22px); }
.switch input:focus-visible + .switch__slider { outline: 2px solid var(--blue); outline-offset: 2px; }
.switch input:disabled + .switch__slider { opacity: .5; cursor: not-allowed; }

.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.switch-row:last-child { border-bottom: 0; }
.switch-row__body { flex: 1; }
.switch-row__body strong { display: block; font-size: .95rem; }
.switch-row__body span { font-size: .82rem; color: var(--slate); }
.switch-row.is-held { opacity: .6; }

/* --------------------------------------------------------------------------
   20. Health checks
   -------------------------------------------------------------------------- */
.health-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.health {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  border-left: 3px solid var(--muted);
}
.health--green { border-left-color: var(--green); }
.health--amber { border-left-color: var(--amber); }
.health--red   { border-left-color: var(--red); }
.health__body { min-width: 0; flex: 1; }
.health__label { font-size: .78rem; color: var(--slate); font-weight: 600; }
.health__value { font-weight: 700; font-size: .95rem; }
.health__detail { font-size: .78rem; color: var(--slate); margin-top: .2rem; line-height: 1.45; }

/* --------------------------------------------------------------------------
   21. Timeline
   -------------------------------------------------------------------------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 1.1rem 1.75rem; }
.timeline li::before {
  content: ''; position: absolute; left: 2px; top: .35rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--gold);
}
.timeline li.is-ai::before { border-color: var(--crimson); }
.timeline__meta { font-size: .76rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   22. Charts (inline SVG / CSS bars)
   -------------------------------------------------------------------------- */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 130px; }
.bars__bar { flex: 1; background: var(--crimson); border-radius: 2px 2px 0 0; min-height: 2px; position: relative; opacity: .85; transition: opacity .15s var(--ease); }
.bars__bar:hover { opacity: 1; }
.bars__bar--gold { background: var(--gold); }

.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--slate); margin-top: .75rem; }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.meter { height: 8px; background: var(--sunk); border-radius: 999px; overflow: hidden; }
.meter__fill { height: 100%; border-radius: 999px; transition: width .6s var(--ease); }
.meter__fill--green { background: var(--green); }
.meter__fill--amber { background: var(--amber); }
.meter__fill--red { background: var(--red); }
.meter__fill--crimson { background: var(--crimson); }
.meter__fill--gold { background: var(--grad-gold); }

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--charcoal); color: #A29A93; padding: 3.5rem 0 1.75rem; margin-top: auto; }
.site-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: #A29A93; font-size: .9rem; display: block; padding: .28rem 0; }
.site-footer a:hover { color: var(--gold-light); text-decoration: none; }
/* An fr track cannot be combined with repeat(auto-fit, ...) in one track list.
   Doing so invalidates the whole declaration and the footer collapses into a
   single column, which is what used to happen here. Explicit tracks. */
.site-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.09);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem;
}
.partner-credit { color: #8A827B; }
.partner-credit strong { color: var(--gold-light); font-weight: 600; }

/* --------------------------------------------------------------------------
   24. Utilities
   -------------------------------------------------------------------------- */
.empty {
  text-align: center; padding: 3rem 1.5rem; color: var(--slate);
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--panel);
}
.empty h3 { color: var(--charcoal); margin-bottom: .4rem; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--crimson-soft); color: var(--crimson);
  font-size: .8rem; font-weight: 700;
}
.avatar--lg { width: 52px; height: 52px; font-size: 1rem; }
.avatar--gold { background: var(--gold-soft); color: var(--gold-deep); }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; overflow-x: auto; }
.tabs a {
  padding: .7rem 1rem; font-size: .88rem; font-weight: 500; color: var(--slate);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a:hover { color: var(--crimson); text-decoration: none; }
.tabs a.is-active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }

.pagination { display: flex; gap: .3rem; align-items: center; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: .45rem .75rem; border-radius: var(--r-sm); font-size: .85rem;
  border: 1px solid var(--line); background: var(--panel); color: var(--charcoal-soft);
}
.pagination a:hover { border-color: var(--crimson); color: var(--crimson); text-decoration: none; }
.pagination .is-current { background: var(--crimson); color: #fff; border-color: var(--crimson); font-weight: 600; }
.pagination .is-disabled { opacity: .45; }

.filters {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end;
  padding: 1rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 1.25rem;
}
.filters .field { margin: 0; min-width: 140px; }

details.disclose { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); margin-bottom: .75rem; }
details.disclose > summary {
  padding: .85rem 1.1rem; cursor: pointer; font-weight: 600; font-size: .92rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary::after { content: '+'; color: var(--muted); font-size: 1.2rem; line-height: 1; }
details.disclose[open] > summary::after { content: '\2212'; }
details.disclose > div { padding: 0 1.1rem 1.1rem; }

.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: .5rem 1rem; font-size: .9rem; }
.kv dt { color: var(--slate); font-size: .82rem; }
.kv dd { margin: 0; font-weight: 500; }

.print-only { display: none; }
@media print {
  .sidebar, .topbar, .site-header, .site-footer, .chat-launcher, .chat-panel, .btn, .filters { display: none !important; }
  .admin__content { padding: 0; }
  body { background: #fff; }
  .card, .panel { border: 1px solid #ccc; box-shadow: none; }
  .print-only { display: block; }
}

/* --------------------------------------------------------------------------
   25. Admin components

   The admin screens were written against this vocabulary (.table, .modal,
   .stat, .toolbar, .thread) while the earlier stylesheet used another
   (table.data, .chat-panel). This section closes that gap. Tokens only - no
   new colours are introduced here.
   -------------------------------------------------------------------------- */

/* ---- Tables ------------------------------------------------------------ */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--slate); background: var(--sunk);
  padding: .7rem .85rem; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.table td { padding: .8rem .85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td { border-bottom: 0; border-top: 1px solid var(--line-strong); padding: .55rem .85rem; }
.table--hover tbody tr { transition: background-color .12s var(--ease); }
.table--hover tbody tr:hover { background: var(--sunk); }
.table--plain th, .table--plain td { padding: .4rem 0; border-bottom: 0; background: none; }
.table--form td { padding: .35rem .4rem; vertical-align: middle; }
.table--form input, .table--form select { margin-bottom: .25rem; }
.table tr.is-muted { opacity: .55; }
.table tr.is-overdue td { box-shadow: inset 3px 0 0 var(--red); }

/* ---- Modals ------------------------------------------------------------ */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1rem, 5vh, 4rem) 1rem;
  background: rgba(28,26,25,.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal__panel {
  width: 100%; max-width: 560px; background: var(--panel);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); overflow: hidden;
}
.modal__panel--wide { max-width: 860px; }
.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line);
}
.modal__head h2 { margin: 0; font-size: 1.15rem; }
.modal__body { padding: 1.25rem; }
.modal__body hr { margin: 1.25rem 0; }
.modal__foot {
  display: flex; justify-content: flex-end; gap: .6rem;
  padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: var(--sunk);
}

/* ---- Stat tiles -------------------------------------------------------- */
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .3rem;
}
.stat__value { font-family: var(--display); font-size: 1.9rem; line-height: 1.05; color: var(--charcoal); }
.stat__label { font-size: .78rem; color: var(--slate); }
.stat--green { border-left: 3px solid var(--green); }
.stat--amber { border-left: 3px solid var(--amber); }
.stat--red   { border-left: 3px solid var(--red); }
.stat--gold  { border-left: 3px solid var(--gold); }

/* ---- Toolbar and chips ------------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.toolbar select, .toolbar input[type="date"] { width: auto; margin: 0; }
.toolbar__search { position: relative; flex: 1 1 220px; display: flex; align-items: center; }
.toolbar__search svg { position: absolute; left: .7rem; color: var(--muted); }
.toolbar__search input { padding-left: 2.2rem; margin: 0; }

.filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .75rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--panel);
  font-size: .82rem; color: var(--slate); cursor: pointer; text-decoration: none;
  transition: border-color .14s var(--ease), color .14s var(--ease), background-color .14s var(--ease);
}
.chip:hover { border-color: var(--crimson); color: var(--crimson); text-decoration: none; }
.chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip__count { font-size: .72rem; opacity: .75; font-variant-numeric: tabular-nums; }
.chip--red { border-color: var(--red); color: var(--red); }

/* ---- Panels ------------------------------------------------------------ */
.panel-body--flush { padding: 0; }

/* ---- Inbox threads and search results ---------------------------------- */
.thread {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .9rem 1.15rem; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background-color .12s var(--ease);
}
.thread:hover { background: var(--sunk); text-decoration: none; }
.thread:last-child { border-bottom: 0; }
.thread.is-unread { background: var(--crimson-soft); }
.thread.is-unread .thread__top strong { font-weight: 700; }
.thread__icon { flex: none; color: var(--slate); display: flex; align-items: center; padding-top: .1rem; }
.thread__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.thread__top { font-size: .92rem; }
.thread__preview,
.thread__meta {
  font-size: .8rem; color: var(--slate);
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread__right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }

/* ---- Admin assistant --------------------------------------------------- */
.chat {
  display: flex; flex-direction: column; min-height: 60vh;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.chat__scroll { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.chat__empty { margin: auto; text-align: center; max-width: 46ch; padding: 2rem 0; }
.chat__empty h2 { font-size: 1.3rem; }
.chat__suggestions { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-top: 1.25rem; }
.chat__composer { display: flex; gap: .6rem; padding: .85rem 1rem; border-top: 1px solid var(--line); background: var(--sunk); }
.chat__composer textarea { flex: 1; margin: 0; resize: none; max-height: 160px; }
.chat__note { font-size: .74rem; color: var(--muted); padding: .6rem 1rem .85rem; margin: 0; border-top: 1px solid var(--line); }

.convo {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .5rem .6rem; border-radius: var(--r-sm);
  text-decoration: none; color: inherit;
}
.convo:hover { background: var(--sunk); text-decoration: none; }
.convo.is-active { background: var(--blue-soft); }
.convo__title { font-size: .85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo__meta { font-size: .72rem; color: var(--muted); }

/* ---- Message bubbles --------------------------------------------------- */
.bubble { max-width: 78%; display: flex; flex-direction: column; gap: .3rem; }
.bubble--me, .bubble--us { align-self: flex-end; }
.bubble--ai, .bubble--them { align-self: flex-start; }
.bubble--note { align-self: center; max-width: 92%; }
.bubble--compact { max-width: 100%; }
.bubble__body {
  padding: .7rem .95rem; border-radius: var(--r);
  background: var(--sunk); font-size: .9rem; line-height: 1.55;
}
.bubble__body p { margin: 0 0 .6rem; }
.bubble__body p:last-child { margin-bottom: 0; }
.bubble--me .bubble__body, .bubble--us .bubble__body { background: var(--crimson); color: #fff; }
.bubble--note .bubble__body { background: var(--gold-soft); border: 1px dashed var(--gold); }
.bubble__label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.bubble__meta { font-size: .72rem; color: var(--muted); }
.bubble--me .bubble__meta, .bubble--us .bubble__meta { text-align: right; }
.bubble__files { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---- Memory and approvals --------------------------------------------- */
.memory { display: flex; gap: 1rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--line); }
.memory:last-child { border-bottom: 0; }
.memory.is-pinned { background: var(--gold-soft); }
.memory__body { flex: 1; min-width: 0; }
.memory__actions { flex: none; display: flex; gap: .25rem; align-items: flex-start; }
.approval__summary { font-style: italic; }

/* ---- Appointments ------------------------------------------------------ */
.appt { display: flex; gap: 1rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--line); }
.appt:last-child { border-bottom: 0; }
.appt__time {
  flex: none; width: 62px; display: flex; flex-direction: column;
  font-family: var(--mono); font-size: .85rem; line-height: 1.3;
}
.appt__body { flex: 1; min-width: 0; }
.appt__actions { flex: none; display: flex; gap: .4rem; align-items: flex-start; flex-wrap: wrap; }

/* ---- Reminders --------------------------------------------------------- */
.reminder { padding: .9rem 1.15rem; border-bottom: 1px solid var(--line); }
.reminder:last-child { border-bottom: 0; }
.reminder.is-sent { opacity: .6; }
.reminder__head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.reminder__channels { display: flex; gap: .3rem; margin: .4rem 0; }
.reminder__body { margin-top: .5rem; }
.reminder__body pre {
  font-size: .8rem; white-space: pre-wrap; background: var(--sunk);
  padding: .8rem; border-radius: var(--r-sm); border: 1px solid var(--line); margin: 0;
}

/* ---- Sage matching ----------------------------------------------------- */
.match { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 1.25rem; padding: 1.15rem; border-bottom: 1px solid var(--line); }
.match:last-child { border-bottom: 0; }
.match__source { border-right: 1px solid var(--line); padding-right: 1.25rem; }
.match__candidates { display: flex; flex-direction: column; gap: .5rem; }
.match__candidate {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--r-sm);
}
@media (max-width: 760px) {
  .match { grid-template-columns: 1fr; }
  .match__source { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 1rem; }
}

/* ---- Install / import wizard steps ------------------------------------- */
.wizard { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; counter-reset: wizard; }
.wizard li {
  counter-increment: wizard; display: flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--line-strong);
  font-size: .8rem; color: var(--slate);
}
.wizard li::before {
  content: counter(wizard); display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--line); color: var(--charcoal); font-size: .68rem; font-weight: 700;
}
.wizard li.is-done { border-color: var(--green); color: var(--green); }
.wizard li.is-done::before { content: '✓'; background: var(--green); color: #fff; }
.wizard li.is-current { border-color: var(--crimson); background: var(--crimson); color: #fff; }
.wizard li.is-current::before { background: rgba(255,255,255,.25); color: #fff; }

.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li {
  counter-increment: step; position: relative;
  padding: 0 0 1.1rem 2.4rem; border-left: 1px solid var(--line); margin-left: .7rem;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(step); position: absolute; left: -.75rem; top: -.15rem;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--crimson); color: #fff; font-size: .75rem; font-weight: 700;
}
.steps strong { display: block; font-size: .92rem; margin-bottom: .15rem; }
.steps span { display: block; font-size: .84rem; color: var(--slate); }

/* ---- Logs and health --------------------------------------------------- */
.logview {
  font-family: var(--mono); font-size: .78rem; line-height: 1.55;
  background: var(--charcoal); color: #D6D0CA;
  padding: 1rem; max-height: 70vh; overflow: auto; margin: 0;
}
.logline { white-space: pre-wrap; word-break: break-word; padding: .1rem 0; }
.logline--warn { color: var(--gold-light); }
.logline--error { color: #F0908A; }

.health-row { display: flex; gap: .85rem; padding: .85rem 1.15rem; border-bottom: 1px solid var(--line); }
.health-row:last-child { border-bottom: 0; }
.health-row .dot { margin-top: .35rem; flex: none; }
.health-row__body { flex: 1; min-width: 0; }

/* ---- Small pieces ------------------------------------------------------ */
.file-icon { flex: none; color: var(--slate); display: flex; align-items: center; padding-top: .1rem; }

.tickbox {
  width: 20px; height: 20px; border-radius: 5px; padding: 0;
  border: 1.5px solid var(--line-strong); background: var(--panel);
  cursor: pointer; display: grid; place-items: center; color: transparent;
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.tickbox:hover { border-color: var(--green); color: var(--green); }
.tickbox--done { background: var(--green); border-color: var(--green); color: #fff; cursor: default; }

.check--inline { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.check--tight { margin: 0; padding: 0; }

.card--accent-red { border-left: 3px solid var(--red); }

.box { border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; background: var(--panel); }
.tag {
  display: inline-block; padding: .18rem .5rem; border-radius: var(--r-sm);
  background: var(--sunk); font-size: .72rem; color: var(--slate);
}
.ref { font-family: var(--mono); font-size: .8rem; color: var(--slate); }
mark, .mark { background: var(--gold-soft); color: inherit; padding: 0 .15rem; border-radius: 3px; }

/* ---- Bar charts -------------------------------------------------------- */
.sparkbars {
  display: flex; align-items: flex-end; gap: 2px; height: 52px;
  padding: 0; margin: 0;
}
.sparkbars--tall { height: 120px; }
.sparkbars__bar {
  flex: 1; min-width: 2px; border-radius: 2px 2px 0 0;
  background: var(--crimson); opacity: .78;
  transition: opacity .14s var(--ease);
}
.sparkbars__bar:hover { opacity: 1; }

/* ---- Numbered principles (About) --------------------------------------- */
.principle__number {
  font-family: var(--display);
  font-size: 2.1rem; line-height: 1;
  color: var(--gold); margin: 0 0 .4rem;
}

/* ---- The three themes: Support, Growth, Implementation ----------------- */
.themes { gap: 1.5rem; }

.theme {
  padding: 1.5rem 0 0;
  border-top: 2px solid var(--gold);
}
.theme__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: .75rem;
  border-radius: var(--r-sm); background: var(--gold-soft); color: var(--gold-deep);
}
.theme__name {
  font-family: var(--display); font-size: 1.5rem; line-height: 1.1;
  margin: 0 0 .15rem; color: var(--charcoal);
}
.theme__lead {
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  color: var(--crimson); margin: 0 0 .6rem;
}

/* A pillar card names the theme it belongs to, so the two blocks read as one
   idea rather than two lists. */
.pillar__theme {
  display: inline-block; margin-bottom: .4rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}

/* ---- Quote builder rows ------------------------------------------------ */
.quote-line td { border-bottom: 1px solid var(--line); }
.quote-line:last-child td { border-bottom: 0; }

/* ==========================================================================
   Shop
   Nothing here introduces a new colour. Every value is one of the brand
   tokens defined at the top of this file, so re-theming the site re-themes
   the shop with it.
   ========================================================================== */

/* ---- Utilities the shop screens lean on -------------------------------- */
.h4 { font-family: var(--display); font-size: 1.05rem; margin: 0 0 .6rem; }
.card-body { padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
.card-body summary { cursor: pointer; }
.list { margin: 0; padding-left: 1.1rem; }
.list li + li { margin-top: .4rem; }
.table--sm th, .table--sm td { padding: .45rem .6rem; font-size: .85rem; }

/* ---- Product grid ------------------------------------------------------ */
.shop-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.product-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  color: inherit; text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.product-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: var(--line-strong); text-decoration: none; color: inherit;
}
.product-card__media {
  position: relative; aspect-ratio: 1 / 1; background: var(--sunk);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; }
.product-card__flags { position: absolute; top: .5rem; left: .5rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.product-card__body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.product-card__name { font-weight: 600; line-height: 1.35; font-size: .95rem; }
.product-card__code { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.product-card__price { margin-top: auto; padding-top: .5rem; font-weight: 700; color: var(--charcoal); }
.product-card__price small { font-weight: 400; color: var(--slate); }

/* ---- One product ------------------------------------------------------- */
.product-layout { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .product-layout { grid-template-columns: 1.05fr 1fr; } }

.product-gallery__main {
  aspect-ratio: 1 / 1; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }
.product-gallery__thumbs { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.product-gallery__thumb {
  width: 62px; height: 62px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--panel); padding: .25rem; cursor: pointer; overflow: hidden;
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__thumb.is-active { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }

/* ---- Colour and option swatches ---------------------------------------- */
.swatches { display: flex; gap: .5rem; flex-wrap: wrap; }
.swatch {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--panel); cursor: pointer; font-size: .82rem; transition: all .14s var(--ease);
}
.swatch:hover { border-color: var(--blue); }
.swatch.is-active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-ink); }
.swatch.is-out { opacity: .5; }
.swatch__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); flex: none; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch:focus-within { box-shadow: 0 0 0 3px var(--blue-soft); }

/* ---- Branding picker --------------------------------------------------- */
.branding-option {
  border: 1px solid var(--line); border-radius: var(--r); padding: .85rem 1rem;
  transition: border-color .14s var(--ease), background-color .14s var(--ease);
}
.branding-option + .branding-option { margin-top: .6rem; }
.branding-option.is-active { border-color: var(--blue); background: var(--blue-soft); }
.branding-option__head { display: flex; align-items: flex-start; gap: .6rem; }
.branding-option__body { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--line-strong); }

/* ---- Live price panel -------------------------------------------------- */
.price-panel {
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: 1.25rem; background: var(--paper);
}
@media (min-width: 900px) {
  .price-panel { position: sticky; top: calc(var(--header-h) + 1rem); }
}
.price-panel__total { font-family: var(--display); font-size: 2rem; color: var(--charcoal); line-height: 1.05; }
.price-panel__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; padding: .2rem 0; }
.price-panel__row--sum { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .6rem; font-weight: 600; }
.price-panel.is-busy { opacity: .55; }

/* ---- Basket ------------------------------------------------------------ */
.cart-line { display: grid; gap: 1rem; grid-template-columns: 80px 1fr; align-items: start; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.cart-line:last-of-type { border-bottom: 0; }
.cart-line__media { width: 80px; height: 80px; border-radius: var(--r-sm); background: var(--sunk); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cart-line__media img { width: 100%; height: 100%; object-fit: contain; padding: .35rem; }
.cart-line__money { text-align: right; white-space: nowrap; }
@media (min-width: 720px) { .cart-line { grid-template-columns: 90px 1fr auto; } }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.qty button { border: 0; background: var(--panel); width: 32px; height: 34px; cursor: pointer; font-size: 1rem; color: var(--slate); }
.qty button:hover { background: var(--sunk); color: var(--charcoal); }
.qty input { border: 0; width: 56px; height: 34px; text-align: center; margin: 0; border-radius: 0; box-shadow: none; }
.qty input:focus { box-shadow: none; }

/* ---- Checkout ---------------------------------------------------------- */
.checkout-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .checkout-layout { grid-template-columns: 1.4fr 1fr; } }

.route-option {
  display: block; border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 1rem 1.15rem; cursor: pointer; transition: all .14s var(--ease);
}
.route-option + .route-option { margin-top: .7rem; }
.route-option.is-active { border-color: var(--blue); background: var(--blue-soft); }
.route-option__title { font-weight: 600; display: flex; align-items: center; gap: .5rem; }

/* ---- Stock ------------------------------------------------------------- */
.stock-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: .35rem; }
.stock-dot--in { background: var(--green); }
.stock-dot--low { background: var(--amber); }
.stock-dot--out { background: var(--muted); }

/* ---- Browsing and filters ---------------------------------------------- */
.shop-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 880px) { .shop-layout { grid-template-columns: 236px minmax(0, 1fr); } }
.facet + .facet { margin-top: 1.5rem; }
.facet__title { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .5rem; }
.facet__list { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.facet__list li + li { margin-top: .3rem; }
.facet__list a { color: var(--slate); text-decoration: none; }
.facet__list a:hover, .facet__list a.is-active { color: var(--blue); }
.facet__list a.is-active { font-weight: 600; }
.facet__list ul { list-style: none; margin: .3rem 0 0; padding-left: .8rem; }