/* Tek Centre Brand & Polish */
@import './animations.css';

@import './front_counter.css';

/* Rest of your existing styles below... */
/* ==========================================================================
   TEC Centre - app.css  (WeBuy-inspired theme)
   Design tokens -> reset -> layout -> components -> pages -> utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens  (sourced from cex-design-tokens.css)
   -------------------------------------------------------------------------- */
@import './cex-design-tokens.css';

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-family);
  background: var(--navy);
  color: var(--white);
  min-height: 100vh;
  line-height: var(--leading);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Cards and content surfaces keep dark text on their light backgrounds */
.card, [class*="card"], .admin-content, .tech-content, .tech-login-card,
.admin-layout, .site-main, .form-group, .data-table,
input, select, textarea, label, .alert, .modal {
    color: var(--colour-text);
}

img, svg { display: block; max-width: 100%; }

a { color: var(--colour-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { list-style: none; }

button { cursor: pointer; font: inherit; }

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
    font-family: var(--font-family);
    letter-spacing: -0.01em;
    color: var(--white);
    background: none;
    -webkit-text-fill-color: var(--white);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin-bottom: var(--space-4); }

::placeholder { color: #7b85b8; }

/* -- Dark theme - headings default to white, no gradient needed.
   Admin/tech contexts keep their own overrides below.          -- */

/* Ensure no stray -webkit-text-fill-color from old gradient rules */
* { -webkit-text-fill-color: inherit; }
p:last-child { margin-bottom: 0; }

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: rgba(255,255,255,0.08);
    color: var(--cyan);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-6);
    box-sizing: border-box;
}

.site-main {
    min-height: calc(100vh - var(--header-h) - 4rem);
    padding-block: var(--space-8);
}

/* Inner readability wrapper - use inside full-width sections */
.section-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* -- Responsive layout ------------------------------------------------------ */
/* SUPERSEDED - see cex-design-tokens.css */ /* body { overflow-x: hidden; } */

/* Header and footer always span full width */
.site-header .container { max-width: 100%; padding-inline: var(--space-8); }
.site-footer .container { max-width: 100%; padding-inline: var(--space-8); }
.admin-content          { padding-inline: var(--space-6); }
.booking-section        { padding-inline: var(--space-4); }
.auth-section           { padding-inline: var(--space-4); }

/* Mobile - full width below 768px */
@media (max-width: 768px) {
    .container,
    .page-container,
    .content-wrap {
        max-width: 100%;
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* Print - consistent font across all printed pages */
@media print {
    body, *, *::before, *::after {
        font-family: var(--font-family) !important;
    }
}

/* ── Admin print stylesheet ────────────────────────────────────────────────
   Hides chrome and renders tables cleanly in black-on-white.             */
@media print {
  /* Reset to white page */
  body, .admin-page { background: #fff !important; color: #111 !important; }

  /* Hide everything that isn't content */
  .admin-sidebar, .site-header, .mobile-cta-bar, .footer-v2, .footer-bar,
  .admin-toolbar .btn, .admin-toolbar form, .admin-filter-bar,
  .admin-filter-form, .btn, button, .modal, .cookie-banner,
  .admin-tab-nav, .no-print, [data-no-print] { display: none !important; }

  /* Make layout single column */
  .admin-layout { display: block !important; }
  .admin-content { padding: 0 !important; margin: 0 !important; width: 100% !important; }

  /* Tables */
  .table-wrap, .admin-table, .data-table {
    overflow: visible !important;
    page-break-inside: auto;
  }
  .admin-table th, .admin-table td,
  .data-table  th, .data-table  td {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #ccc !important;
    padding: 4px 8px !important;
    font-size: 10pt !important;
  }
  .admin-table thead th, .data-table thead th {
    background: #f0f0f0 !important;
    font-weight: 700 !important;
  }
  tr { page-break-inside: avoid; }

  /* KPI cards */
  .kpi-card { border: 1px solid #ccc !important; background: #fff !important; }
  .kpi-card__val, .kpi-card__label { color: #111 !important; }

  /* Print header: show shop name + date */
  .admin-content::before {
    content: "Tek Centre — printed " attr(data-print-date);
    display: block;
    font-size: 9pt;
    color: #666;
    margin-bottom: 8px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
  }

  /* Badges */
  .badge { border: 1px solid #ccc !important; background: transparent !important; color: #111 !important; }

  a { color: #111 !important; text-decoration: none !important; }
}

/* --------------------------------------------------------------------------
   4. Site header / nav
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background: var(--header-bg);
    border-bottom: none;
    box-shadow: 0 2px 24px rgba(0,0,0,.35);
}

.site-header .container {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 100%;
    padding-inline: var(--space-8);
}

.site-logo {
    font-size: 1.375rem;
    font-weight: 800;
    text-decoration: none;
    flex-shrink: 0;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Responsive logo swap */
.site-logo__img        { display: block; vertical-align: middle; }
.site-logo__img--long  { height: 40px; width: auto; }
.site-logo__img--short { display: none; height: 40px; width: auto; }

@media (max-width: 767px) {
    .site-logo__img--long  { display: none; }
    .site-logo__img--short { display: block; }
}

.logo-tec    { color: var(--colour-primary); }
.logo-centre { color: var(--colour-text); }

/* In dark header: logo colours - no background box */
.site-header .logo-tec {
    color: var(--colour-primary);
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin-right: .1em;
}
.site-header .logo-centre { color: rgba(255,255,255,.92); }

.site-nav { margin-left: auto; }
.site-nav > ul {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}
.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.45rem 0.875rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(255,255,255,.72);
    transition: background var(--transition), color var(--transition);
    text-decoration: none;
    white-space: nowrap;
}
.site-nav a:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    text-decoration: none;
}
.site-nav a.nav-link--active {
    background: rgba(96,165,250,.2);
    color: #fff;
    font-weight: 600;
}
/* "Register" pill button - keep blue */
.site-nav a.btn {
    background: var(--colour-primary);
    color: #fff;
    border-color: var(--colour-primary);
    padding: 0.4rem 1rem;
}
.site-nav a.btn:hover { background: var(--colour-primary-dark); }
.site-nav a.btn.nav-link--active { background: var(--colour-primary-dark); }

/* "Log out" form button in nav */
.site-nav .btn-link {
    color: rgba(255,255,255,.72);
    background: none;
}
.site-nav .btn-link:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}

/* Cart count badge on nav */
.cart-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--colour-accent);
    color: #000;
    font-size: .6rem;
    font-weight: 700;
    margin-left: 2px;
}

/* Hamburger */
.nav-toggle-cb  { display: none; }
.nav-toggle-btn {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 2.25rem; height: 2.25rem;
    padding: 0.3rem;
    margin-left: auto;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.nav-toggle-btn span {
    display: block;
    width: 100%; height: 2px;
    background: rgba(255,255,255,.8);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

@media (max-width: 900px) {
    .nav-toggle-btn { display: flex; }
    .site-nav {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0; right: 0;
        background: #1e293b;
        border-bottom: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 8px 32px rgba(0,0,0,.4);
        padding: var(--space-3) var(--space-4);
        z-index: 2200;
    }
    .nav-toggle-cb:checked ~ .site-nav { display: block; }
    .site-nav > ul { flex-direction: column; align-items: stretch; gap: var(--space-1); }
    .site-nav a  { display: flex; border-radius: var(--radius-sm); }
    /* mobile dropdowns */
    .nav-dropdown__menu {
        position: static;
        display: block;
        box-shadow: none;
        border: none;
        background: rgba(255,255,255,.05);
        border-radius: var(--radius-sm);
        margin: var(--space-1) 0 var(--space-1) var(--space-4);
        padding: var(--space-1) 0;
    }
    .nav-dropdown__menu li a { color: rgba(255,255,255,.7); }
    .nav-dropdown__menu li a:hover { background: rgba(255,255,255,.08); color: #fff; }
}

/* --------------------------------------------------------------------------
   5. Site footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--header-bg);
    color: var(--colour-text-faint);
    padding-block: var(--space-8);
    font-size: var(--text-sm);
    border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer .container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-4) var(--space-8);
    align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-brand__logo  { font-size: var(--text-lg); }
/* Footer logo on dark bg */
.footer-brand__logo .logo-tec    { color: var(--colour-primary); background: none; padding: 0; margin: 0; border-radius: 0; }
.footer-brand__logo .logo-centre { color: rgba(255,255,255,.75); }
.footer-brand__tagline { margin: 0; font-size: var(--text-xs); color: var(--colour-text-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: flex-end; }
.footer-copy  { color: var(--colour-text-muted); font-size: var(--text-xs); grid-column: 1 / -1; border-top: 1px solid var(--colour-grey-800); padding-top: var(--space-4); }
.site-footer a { color: var(--colour-text-faint); text-decoration: none; font-size: var(--text-xs); }
.site-footer a:hover { color: #fff; }
@media (max-width: 640px) {
    .site-footer .container { grid-template-columns: 1fr; }
    .footer-links { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   6. Buttons - pill-shaped like CeX
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.55rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--radius-btn);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-family);
    /* SUPERSEDED - see cex-design-tokens.css */ /* text-transform: uppercase; */
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition),
                color var(--transition), transform var(--transition);
    text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--colour-primary);
    color: #fff;
    border-color: var(--colour-primary);
}
.btn-primary:hover { background: var(--colour-primary-dark); border-color: var(--colour-primary-dark); box-shadow: 0 4px 12px rgba(37,99,235,.35); }

.btn-secondary {
    background: var(--colour-surface);
    color: var(--colour-text);
    border-color: var(--colour-border-strong);
}
.btn-secondary:hover { background: rgba(255,255,255,0.1); box-shadow: var(--shadow-sm); }

.btn-dark {
    background: var(--colour-text);
    color: #fff;
    border-color: var(--colour-text);
}
.btn-dark:hover { background: var(--colour-grey-700); box-shadow: var(--shadow); }

.btn:focus-visible {
    outline: 2px solid var(--colour-primary);
    outline-offset: 2px;
}

.btn-lg    { padding: 1rem 2.5rem;   font-size: var(--text-base); }
.btn-sm    { padding: 0.4rem 1rem;   font-size: var(--text-xs); }
.btn-xs    { padding: 0.25rem 0.7rem; font-size: var(--text-xs); }
.btn-block { width: 100%; }

.btn-outline-white {
    background: transparent;
    border: 2px solid rgba(255,255,255,.5);
    color: #fff;
}
.btn-outline-white:hover {
    background: rgba(255,255,255,.12);
    border-color: #fff;
    color: #fff;
    text-decoration: none;
}

.btn-link {
    background: none;
    border: none;
    padding: 0.45rem 0.875rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: background var(--transition);
}
.btn-link:hover { background: rgba(255,255,255,0.08); }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #ffffff;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1.5px solid var(--colour-border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--colour-text);
    background: var(--colour-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #A855F7;
    box-shadow: 0 0 0 3px rgba(168,85,247,.1);
}

input::placeholder, textarea::placeholder { color: var(--colour-text-faint); }

.input-sm   { width: auto; padding: 0.3rem 0.75rem; font-size: var(--text-xs); border-radius: 4px; }
.input-xs   { width: 8rem; padding: 0.2rem 0.5rem;  font-size: var(--text-xs); }
.input-full { width: 100%; }

.form-hint { font-size: var(--text-xs); color: var(--colour-text-muted); margin-top: var(--space-1); }
.required  { color: var(--colour-error); }
.optional  { color: var(--muted); font-weight: 400; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.inline-form { display: inline-flex; align-items: center; gap: var(--space-2); }

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
    user-select: none;
}
.checkbox-label input[type=checkbox] {
    width: 1rem; height: 1rem;
    accent-color: var(--colour-primary);
}

/* --------------------------------------------------------------------------
   8. Alerts / flash messages
   -------------------------------------------------------------------------- */
.alert {
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    border-left: 4px solid;
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-6);
}
.alert--success { background: var(--colour-success-light); border-color: var(--colour-success); color: var(--colour-success-fg); }
.alert--error   { background: var(--colour-error-light);   border-color: var(--colour-error);   color: var(--colour-error-fg); }
.alert--warning { background: var(--colour-warning-light); border-color: var(--colour-warning); color: var(--colour-warning-fg); }
.alert--info    { background: var(--colour-info-light);    border-color: var(--colour-info);    color: var(--colour-info-fg); }
.alert__list    { margin: var(--space-2) 0 0 var(--space-4); list-style: disc; }
.alert__list li + li { margin-top: var(--space-1); }
.alert--page    { max-width: var(--container-width); margin-inline: auto; margin-top: 0.75rem; padding-inline: var(--container-padding); }
.display-contents { display: contents; }

/* --------------------------------------------------------------------------
   9. Badges
   -------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 0.2em 0.75em;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
}
.badge--yellow { background: var(--badge-yellow-bg); color: var(--badge-yellow-fg); }
.badge--blue   { background: var(--badge-blue-bg);   color: var(--badge-blue-fg);   }
.badge--purple { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }
.badge--green  { background: var(--badge-green-bg);  color: var(--badge-green-fg);  }
.badge--red    { background: var(--badge-red-bg);    color: var(--badge-red-fg);    }
.badge--grey   { background: var(--badge-grey-bg);   color: var(--badge-grey-fg);   }

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--colour-border);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    background: var(--colour-surface);
}
.data-table th,
.data-table td {
    padding: 0.75rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid var(--colour-border);
    white-space: nowrap;
}
.data-table th {
    background: var(--colour-bg);
    font-weight: 700;
    color: var(--muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--colour-border-strong);
}
.data-table tbody tr:hover { background: var(--colour-bg); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .row--self { background: var(--colour-primary-light); }

.cell-primary   { display: block; font-weight: 600; }
.cell-secondary { display: block; font-size: var(--text-xs); color: var(--colour-text-muted); }
.ref { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--colour-border); padding: 0.15em 0.5em; border-radius: 4px; }

/* --------------------------------------------------------------------------
   11. Pagination
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-6);
}
.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: var(--space-2);
    border: 1.5px solid var(--colour-border-strong);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--colour-surface);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
}
.pagination__item:hover  { background: rgba(255,255,255,0.08); text-decoration: none; }
.pagination__item--active {
    background: var(--colour-primary);
    border-color: var(--colour-primary);
    color: #fff;
    font-weight: 700;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   12. Modal
   -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.modal__box {
    position: relative;
    background: var(--colour-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-8);
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
}
.modal__title   { font-size: var(--text-xl); margin-bottom: var(--space-6); }
.modal__actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.modal__box--wide { max-width: 42rem; }

/* Modal timeline */
.modal-timeline {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.modal-timeline__heading {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin: 0 0 0.75rem;
}
.modal-tl { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.modal-tl__item {
  display: flex; gap: 0.65rem; align-items: flex-start;
  position: relative; padding-bottom: 0.75rem;
}
.modal-tl__item::before {
  content: ''; position: absolute; left: 5px; top: 12px;
  width: 1px; height: calc(100% - 4px); background: var(--border);
}
.modal-tl__item:last-child::before { display: none; }
.modal-tl__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--blue); border: 2px solid var(--navy);
  flex-shrink: 0; margin-top: 3px;
}
.modal-tl__body { display: flex; flex-direction: column; gap: 0.1rem; }
.modal-tl__label { font-size: 0.82rem; font-weight: 600; color: var(--white); }
.modal-tl__note  { font-size: 0.78rem; color: var(--muted); }
.modal-tl__time  { font-size: 0.72rem; color: var(--muted); }

/* Inline status select (repairs list) */
.inline-status-select {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--white); font-family: 'Inter', sans-serif; font-size: 0.78rem;
  padding: 0.3rem 0.5rem; cursor: pointer;
  transition: border-color 0.3s;
}
.inline-status-select:focus { outline: none; border-color: rgba(46,91,255,.5); }

/* Technician workload strip */
.tech-workload-strip { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.tech-workload-card {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  min-width: 180px; flex: 1;
}
.twc__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(46,91,255,0.15); color: #7b9fff;
  font-size: 0.9rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.twc__name  { font-size: 0.85rem; font-weight: 700; color: var(--white); margin-bottom: 0.2rem; }
.twc__stats { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.twc__total { font-size: 0.75rem; color: var(--muted); }
.twc__badge {
  font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem;
  border-radius: 99px;
}
.twc__badge--blue  { background: rgba(46,91,255,0.15);  color: #7b9fff; }
.twc__badge--amber { background: rgba(245,166,35,0.15); color: #f5a623; }
.twc__badge--red   { background: rgba(240,56,122,0.15); color: #f0387a; }

/* Bulk action toolbar */
.bulk-toolbar {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.65rem 1rem; background: rgba(46,91,255,0.1);
  border: 1px solid rgba(46,91,255,0.3); border-radius: 10px;
  margin-bottom: 0.75rem;
}
.bulk-toolbar__count { font-size: 0.82rem; font-weight: 700; color: var(--white); }
.col-check { width: 36px; padding: 0 0.5rem !important; }

/* Admin tab nav (shared between import pages) */
.admin-tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--border); }
.admin-tab {
  padding: 0.5rem 1.1rem; font-size: 0.85rem; font-weight: 600;
  color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color 0.15s;
}
.admin-tab:hover { color: var(--white); }
.admin-tab--active { color: var(--white); border-bottom-color: var(--blue); }

/* Modal tabs */
.modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--colour-border-strong);
    margin-bottom: var(--space-4);
}
.modal-tab {
    padding: var(--space-2) var(--space-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--colour-text-muted);
    cursor: pointer;
}
.modal-tab--active { color: var(--colour-primary); border-bottom-color: var(--colour-primary); }

/* --------------------------------------------------------------------------
   13. Admin layout — vertical sidebar + content
   -------------------------------------------------------------------------- */
.admin-layout {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - var(--header-h));
}

.admin-sidebar {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
    background: var(--navy2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
    z-index: 80;
}
.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Front Counter button ── */
.admin-sidebar__header { padding: 1rem 1rem 0.5rem; }
.admin-sidebar__fc-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    background: var(--blue);
    color: #fff;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.admin-sidebar__fc-btn:hover { background: var(--blue-h); color: #fff; text-decoration: none; }
.admin-sidebar__fc-btn.is-active { background: var(--blue-h); }

/* ── Accordion groups ── */
.sidebar__group { border-bottom: 1px solid rgba(255,255,255,0.04); }

.sidebar__group-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s;
    font-family: inherit;
    line-height: 1.4;
}
.sidebar__group-btn:hover { color: var(--white); }
.sidebar__group.is-open > .sidebar__group-btn { color: var(--white); }

.sidebar__group-arrow {
    display: inline-block;
    font-size: 1rem;
    opacity: 0.35;
    transition: transform 0.2s, opacity 0.2s;
    flex-shrink: 0;
}
.sidebar__group.is-open > .sidebar__group-btn .sidebar__group-arrow {
    transform: rotate(90deg);
    opacity: 0.7;
}

.sidebar__group-links { display: none; padding-bottom: 0.35rem; }
.sidebar__group.is-open > .sidebar__group-links { display: block; }

/* ── Individual links ── */
.sidebar__link {
    display: block;
    padding: 0.32rem 1rem 0.32rem 1.35rem;
    font-size: 0.79rem;
    font-weight: 400;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.12s, background 0.12s;
    border-left: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar__link:hover {
    color: var(--white);
    background: rgba(255,255,255,0.04);
    text-decoration: none;
}
.sidebar__link--active {
    color: var(--white);
    background: rgba(46,91,255,0.1);
    border-left-color: var(--blue);
    font-weight: 500;
}

@media (max-width: 920px) {
    .admin-layout { flex-direction: column; }
    .admin-sidebar {
        width: 100%;
        height: auto;
        position: static;
        padding: 0.5rem 0.5rem 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        overflow-y: visible;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
    }
    .admin-sidebar__header { padding: 0.25rem 0.5rem 0.25rem 0; }
    .admin-sidebar__fc-btn { width: auto; white-space: nowrap; }
    .sidebar__group { border-bottom: none; display: inline-flex; flex-direction: column; position: relative; }
    .sidebar__group-links {
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        z-index: 200;
        min-width: 160px;
        padding: 0.4rem 0;
    }
    .sidebar__link { padding: 0.35rem 1rem; border-left: none; }
}

.admin-content { min-width: 0; flex: 1; }

.admin-heading {
    font-size: var(--text-xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--colour-border);
}
.toolbar-actions  { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.empty-state {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    text-align: center;
    padding: var(--space-12);
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

/* Card component - used throughout admin */
.card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 4px 8px rgba(0,0,0,.06);
    overflow: hidden;
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.08);
}
/* Admin tables sit edge-to-edge inside cards */
.card .admin-table {
    margin-inline: calc(-1 * var(--space-5));
    width: calc(100% + 2 * var(--space-5));
}

/* Admin table - used throughout admin pages */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.admin-table th {
    background: var(--colour-bg);
    border-bottom: 2px solid var(--colour-border-strong);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--colour-text-muted);
    white-space: nowrap;
}
.admin-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--colour-border);
    vertical-align: top;
    color: var(--colour-text);
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: #f8faff; }
.admin-table .card { margin-bottom: 0; }

/* Admin page body spacing */
body.admin-page .site-main { padding-block: var(--space-4); }
/* Homepage: hero flushes to header, sections own their own centering */
body.page-home .site-main               { padding-block: 0; }

/* --------------------------------------------------------------------------
   14. Tab filter
   -------------------------------------------------------------------------- */
.tab-filter { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.tab-filter__item {
    padding: 0.4rem 1rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    border: 1.5px solid var(--colour-border-strong);
    background: var(--colour-surface);
    transition: background var(--transition), border-color var(--transition);
}
.tab-filter__item:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.tab-filter__item--active {
    background: var(--colour-primary);
    border-color: var(--colour-primary);
    color: #fff;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   15. Contact message cards
   -------------------------------------------------------------------------- */
.message-list { display: flex; flex-direction: column; gap: var(--space-3); }

.message-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}
.message-card:hover { box-shadow: var(--shadow); }
.message-card--handled { opacity: 0.6; }

.message-card__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.message-card__summary::-webkit-details-marker { display: none; }
.message-card__summary:hover { background: var(--colour-bg); }

.message-card__name    { font-weight: 700; }
.message-card__email   { font-size: var(--text-sm); color: var(--colour-text-muted); }
.message-card__subject { font-size: var(--text-sm); flex: 1; }
.message-card__date    { font-size: var(--text-xs); color: var(--colour-text-faint); margin-left: auto; }

.message-card__body {
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-top: 1px solid var(--colour-border);
    background: var(--colour-bg);
}
.message-card__text    { white-space: pre-wrap; font-size: var(--text-sm); margin-bottom: var(--space-4); }
.message-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   16. Auth pages
   -------------------------------------------------------------------------- */
.auth-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-block: var(--space-8);
}

.auth-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-8);
    width: 100%;
    max-width: 26rem;
}

.auth-title    { margin-bottom: var(--space-1); font-size: var(--text-2xl); }
.auth-subtitle { color: var(--colour-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.auth-switch   { text-align: center; font-size: var(--text-sm); margin-top: var(--space-6); color: var(--colour-text-muted); }

/* --------------------------------------------------------------------------
   17. Booking form
   -------------------------------------------------------------------------- */
.booking-section { max-width: 72rem; margin-inline: auto; }

/* Booking layout — form + contact sidebar */
.booking-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; }
.booking-layout__main { min-width: 0; }

.booking-contact-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.25rem;
}
.booking-contact-card--light { background: rgba(255,255,255,0.03); }
.booking-contact-card__title { font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem; color: var(--white); }
.booking-contact-card__text  { font-size: 0.875rem; color: var(--muted); margin: 0 0 1rem; }
.booking-contact-card__item  { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; margin-bottom: 0.5rem; color: var(--white); }
.booking-contact-card__item a { color: var(--cyan); text-decoration: none; }
.booking-contact-card__item a:hover { text-decoration: underline; }
.booking-contact-card__icon { font-size: 1.1rem; flex-shrink: 0; }
.booking-contact-card__hours { margin: 0.75rem 0; font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 0.75rem; }
.booking-contact-card__hours p { margin: 0 0 0.2rem; }
.booking-contact-card__link { display: inline-block; margin-top: 0.75rem; font-size: 0.875rem; color: var(--cyan); text-decoration: none; }
.booking-contact-card__link:hover { text-decoration: underline; }
.booking-expect-list { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; color: var(--muted); }
.booking-expect-list li { margin-bottom: 0.4rem; }

@media (max-width: 860px) {
    .booking-layout { grid-template-columns: 1fr; }
    .booking-layout__aside { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .booking-contact-card { margin-bottom: 0; }
}
@media (max-width: 560px) {
    .booking-layout__aside { grid-template-columns: 1fr; }
}

.booking-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
}

.booking-card__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--colour-border);
}

.booking-contact-detail {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--white);
    margin: var(--space-1) 0 0;
}

.booking-card__subtitle {
    font-size: var(--text-base);
    font-weight: 600;
    margin: var(--space-6) 0 var(--space-3);
    color: var(--colour-text);
}

/* -- Tier Selection ---------------------------------------- */
.tier-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.tier-card {
    border: 2px solid var(--colour-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    background: var(--colour-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.tier-card:hover {
    border-color: var(--colour-primary);
    box-shadow: var(--shadow-sm);
}

.tier-card--selected {
    border-color: var(--colour-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.tier-badge {
    display: inline-block;
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--space-2);
}

.tier-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--colour-text);
    margin: var(--space-2) 0 var(--space-1);
}

.tier-turnaround {
    font-size: 13px;
    color: var(--muted);
}

.tier-description {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: var(--space-2);
}

#service-summary {
    background: var(--colour-primary-light);
    border: 1.5px solid var(--colour-primary);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
}
#service-summary[hidden] { display: none; }

.service-summary__row { display: flex; justify-content: space-between; margin-bottom: var(--space-1); }
.service-summary__row:last-child { margin-bottom: 0; font-weight: 700; }

/* --------------------------------------------------------------------------
   18. Homepage
   -------------------------------------------------------------------------- */
/* -- Hero - full-width dark hero with diagonal brand-gradient overlay ------ */
.hero {
    background: var(--tc-gradient);
    color: #fff;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
/* Diagonal brand gradient glow - sits behind content */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 120% at 80% 50%, rgba(168,85,247,.18) 0%, transparent 60%),
        linear-gradient(135deg, rgba(168,85,247,.08) 0%, rgba(59,130,246,.12) 100%);
    pointer-events: none;
    z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-16) var(--space-8);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}
.hero__text { flex: 1; min-width: 0; }
.hero__headline {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-4);
}
.hero__accent { color: var(--colour-accent); display: block; }
.hero__sub {
    font-size: var(--text-lg);
    color: #94a3b8;
    margin-bottom: var(--space-3);
    line-height: 1.6;
}
.hero__devices {
    font-size: var(--text-sm);
    color: rgba(255,255,255,.45);
    letter-spacing: .04em;
    margin-bottom: var(--space-8);
}
.hero__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}
.hero__visual {
    font-size: 8rem;
    line-height: 1;
    animation: hero-float 3.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-18px); }
}
@media (max-width: 768px) {
    .hero { min-height: auto; }
    .hero__inner { flex-direction: column; text-align: center; padding: var(--space-12) var(--space-6); gap: var(--space-8); }
    .hero__visual { font-size: 5rem; order: -1; }
    .hero__actions { justify-content: center; }
}
@media (max-width: 400px) {
    .hero__inner { padding: var(--space-8) var(--space-4); gap: var(--space-6); }
    .hero__visual { font-size: 3.5rem; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { width: 100%; justify-content: center; }
}

.section       { margin-bottom: var(--space-16); }
.section--alt  {
    background: var(--colour-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-8);
    border: 1px solid var(--colour-border);
    box-shadow: var(--shadow-sm);
}
.section__title { font-size: var(--text-2xl); margin-bottom: var(--space-8); text-align: center; font-weight: 800; }
.section__cta   { text-align: center; margin-top: var(--space-8); }

/* Category cards - CeX-style */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-4);
}
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: box-shadow var(--transition), transform var(--transition);
    color: var(--colour-text);
}
.category-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); text-decoration: none; }
.category-card__icon  { font-size: 2.75rem; line-height: 1; }
.category-card__name  { font-weight: 700; font-size: var(--text-sm); text-align: center; }
.category-card__count { font-size: var(--text-xs); color: var(--colour-text-muted); }

/* Service cards */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-4);
}
.service-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}
.service-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.service-card__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.service-card__device { font-size: var(--text-xs); color: var(--colour-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.service-card__price  { font-size: var(--text-xl); font-weight: 800; color: var(--colour-primary); letter-spacing: -0.02em; }
.service-card__name   { font-weight: 600; margin-bottom: var(--space-3); color: var(--colour-text); }
.service-card__meta   { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--colour-text-muted); list-style: disc; padding-left: var(--space-4); }

/* How-it-works steps */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-8);
    list-style: none;
    padding: 0;
}
.step { display: flex; gap: var(--space-4); align-items: flex-start; }
.step__num {
    flex-shrink: 0;
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    background: var(--colour-primary);
    color: #fff;
    font-weight: 800;
    font-size: var(--text-base);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
}
.step__title { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-1); }
.step__desc  { font-size: var(--text-sm); color: var(--colour-text-muted); margin: 0; }

/* CTA strip */
.cta-strip {
    background: var(--colour-grey-900);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-8);
    text-align: center;
    margin-bottom: var(--space-8);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}
.cta-strip__title { font-size: var(--text-2xl); font-weight: 800; flex-basis: 100%; margin: 0; }
.cta-strip__sub   { color: var(--colour-text-faint); margin: 0; flex-basis: 100%; }
.cta-strip .btn-primary  { background: var(--colour-primary); border-color: var(--colour-primary); }
.cta-strip .btn-secondary { border-color: var(--colour-grey-600); color: var(--colour-grey-200); background: transparent; }
.cta-strip .btn-secondary:hover { background: var(--colour-grey-800); }

.page-title { margin-bottom: var(--space-6); }

/* .gradient-heading - utility class, inherits from h1-h6 base rule (no-op, kept for semantics) */

/* --------------------------------------------------------------------------
   19. Booking confirmation
   -------------------------------------------------------------------------- */
.booking-confirm {
    display: flex;
    justify-content: center;
    padding-block: var(--space-8);
}
.confirm-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-12) var(--space-8);
    width: 100%;
    max-width: 30rem;
    text-align: center;
}
.confirm-card__icon {
    width: 4.5rem; height: 4.5rem;
    border-radius: 50%;
    background: var(--colour-success-light);
    color: var(--colour-success);
    font-size: 2rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-4);
}
.confirm-card__title   { margin-bottom: var(--space-2); }
.confirm-card__sub     { color: var(--colour-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.confirm-card__ref     { background: var(--colour-bg); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-6); }
.ref-label  { display: block; font-size: var(--text-xs); color: var(--colour-text-faint); margin-bottom: var(--space-2); }
.ref-code   { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; letter-spacing: .1em; }
.confirm-card__actions { display: flex; flex-direction: column; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   20. Contact page
   -------------------------------------------------------------------------- */
.contact-wrap {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.contact-hero {
    padding: 2.5rem 0 1.75rem;
    text-align: center;
}
.contact-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,194,232,0.12); border: 1px solid rgba(0,194,232,0.35);
    color: var(--cyan); border-radius: 99px; padding: 4px 14px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; margin-bottom: 1.1rem;
}
.contact-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--white);
    margin: 0 0 0.6rem;
    line-height: 1.05;
}
.contact-hero__sub {
    color: var(--muted);
    font-size: 1rem;
    margin: 0;
}

.contact-map {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 2rem;
    background: var(--navy3);
}
.contact-map iframe {
    display: block;
    width: 100%;
    height: 340px;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 22rem;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-form-col { min-width: 0; }
.contact-info-col { display: flex; flex-direction: column; gap: 1rem; }

.info-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.2rem 1.4rem;
    font-size: 0.9rem;
}
.info-card__title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 0.85rem;
}
.info-card address { font-style: normal; line-height: 1.7; color: var(--muted); }
.info-card p { color: var(--muted); margin: 0.25rem 0; }
.info-card a { color: var(--white); text-decoration: none; }
.info-card a:hover { color: var(--cyan); }

.hours-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1rem; }
.hours-list dt { font-weight: 600; color: var(--white); font-size: 0.875rem; }
.hours-list dd { color: var(--muted); font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   21. Account / customer dashboard
   -------------------------------------------------------------------------- */
.account-layout {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: var(--space-6);
    align-items: start;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--space-6);
}
@media (max-width: 768px) { .account-layout { grid-template-columns: 1fr; } }
.account-main { min-width: 0; }

.profile-card {
    background: linear-gradient(135deg, #0d0d0d 0%, #1d4ed8 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow);
}
.profile-card__avatar {
    width: 4rem; height: 4rem;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xl); font-weight: 800;
    margin: 0 auto var(--space-3);
    border: 2px solid rgba(255,255,255,.3);
}
.profile-card__name   { font-weight: 700; font-size: var(--text-base); }
.profile-card__email  { font-size: var(--text-xs); opacity: .75; }
.profile-card__phone  { font-size: var(--text-xs); opacity: .75; }
.profile-card__since  { font-size: var(--text-xs); opacity: .5; margin-top: var(--space-2); }

.account-nav { display: flex; flex-direction: column; gap: 2px; background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); padding: var(--space-2); }
.account-nav__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm); font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background var(--transition);
    background: none; border: none; text-align: left; cursor: pointer; width: 100%;
}
.account-nav__link:hover          { background: var(--colour-bg); text-decoration: none; }
.account-nav__link--active        { background: var(--colour-primary-light); color: var(--colour-primary); font-weight: 700; }
.account-nav__link--logout        { color: var(--colour-error); }
.account-nav__link--logout:hover  { background: var(--colour-error-light); }

/* Account stats strip */
.account-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
@media (max-width: 640px) { .account-stats { grid-template-columns: repeat(2, 1fr); } }

.account-stat {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    text-align: center;
}
.account-stat__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--colour-primary);
    line-height: 1.1;
}
.account-stat__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--colour-text-muted);
    margin-top: .25rem;
}

/* Account section title */
.account-section-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--colour-heading);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--colour-border);
}

/* My devices grid */
.account-devices { margin-bottom: var(--space-6); }

.device-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.device-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: border-color .15s;
}
.device-card:hover { border-color: var(--colour-primary); }

.device-card__icon {
    font-size: 1.75rem;
    flex-shrink: 0;
    line-height: 1;
}
.device-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.device-card__name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--colour-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.device-card__cat {
    font-size: var(--text-xs);
    color: var(--colour-text-muted);
}
.device-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: .1rem;
}
.device-card__count {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--colour-primary);
}
.device-card__last {
    font-size: .68rem;
    color: var(--colour-text-muted);
    white-space: nowrap;
}

/* Form help text */
.form-help {
    font-size: var(--text-xs);
    color: var(--colour-text-muted);
    margin-top: var(--space-1);
}

.booking-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }

.booking-item {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition);
}
.booking-item:hover { box-shadow: var(--shadow); }
.booking-item__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.booking-item__summary::-webkit-details-marker { display: none; }
.booking-item__summary:hover { background: var(--colour-bg); }
.booking-item__left    { display: flex; flex-direction: column; gap: var(--space-1); }
.booking-item__right   { display: flex; align-items: center; gap: var(--space-3); }
.booking-item__service { font-size: var(--text-sm); color: var(--colour-text-muted); }
.booking-item__date    { font-size: var(--text-xs); color: var(--colour-text-faint); }

.booking-item__body {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--colour-border);
    background: var(--colour-bg);
}

.booking-detail {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}
.booking-detail dt { font-weight: 700; color: var(--colour-text-muted); }
.booking-detail dd { color: var(--colour-text); }

/* --------------------------------------------------------------------------
   22. Services page
   -------------------------------------------------------------------------- */
.services-page { max-width: var(--container); }

.services-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.services-header .page-title { margin: 0; flex-basis: 100%; }
.services-header p { flex: 1; margin: 0; }

.services-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.services-section {
    margin-bottom: var(--space-12);
    scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.services-section__title { font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-2); }
.services-section__desc  { margin-bottom: var(--space-6); }

.device-block { margin-bottom: var(--space-8); }
.device-block__name {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--colour-border);
}

/* --------------------------------------------------------------------------
   23. Track page
   -------------------------------------------------------------------------- */
.track-page    { max-width: 44rem; margin-inline: auto; }
.track-header  { margin-bottom: var(--space-6); }

.track-lookup  { margin-bottom: var(--space-8); }
.track-form__row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}
.track-form__input {
    flex: 1;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.track-result  { display: flex; flex-direction: column; gap: var(--space-6); }

.track-status-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-8);
    text-align: center;
}
.track-status-card__ref    { margin-bottom: var(--space-4); }
.track-status-card__status { margin-bottom: var(--space-2); }
.badge--lg { font-size: var(--text-sm); padding: .5em 1.25em; }

.track-details, .track-timeline {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}
.track-details__title, .track-timeline__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--colour-border);
}

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; position: relative; }
.timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem; top: 0.5rem; bottom: 0.5rem;
    width: 2px;
    background: var(--colour-border-strong);
}
.timeline__item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding-bottom: var(--space-4);
    position: relative;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
    flex-shrink: 0;
    width: 1rem; height: 1rem;
    border-radius: 50%;
    background: var(--colour-primary);
    border: 2px solid var(--colour-surface);
    box-shadow: 0 0 0 2px var(--colour-primary);
    margin-top: 0.15rem;
    position: relative;
    z-index: 1;
}
.timeline__body  { display: flex; flex-direction: column; gap: 2px; }
.timeline__label { font-size: var(--text-sm); font-weight: 600; }
.timeline__time  { font-size: var(--text-xs); color: var(--colour-text-faint); }

/* --------------------------------------------------------------------------
   24. Admin calendar
   -------------------------------------------------------------------------- */
.cal-nav { display: flex; gap: var(--space-2); align-items: center; }

.cal-grid-wrap { overflow-x: auto; margin-bottom: var(--space-4); }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(9rem, 1fr));
    border-top: 1px solid var(--colour-border);
    border-left: 1px solid var(--colour-border);
    min-width: 42rem;
    border-radius: var(--radius);
    overflow: hidden;
}

.cal-grid__head {
    background: var(--colour-bg);
    border-right: 1px solid var(--colour-border);
    border-bottom: 1px solid var(--colour-border);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--colour-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
}

.cal-grid__cell {
    border-right: 1px solid var(--colour-border);
    border-bottom: 1px solid var(--colour-border);
    padding: var(--space-2);
    min-height: 7rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--colour-surface);
}
.cal-grid__cell--empty  { background: var(--colour-bg); }
.cal-grid__cell--today  { background: var(--colour-primary-light); }
.cal-grid__cell--today .cal-grid__day {
    background: var(--colour-primary);
    color: #fff;
    border-radius: 50%;
    width: 1.6rem; height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cal-grid__day {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--colour-text-muted);
    margin-bottom: 2px;
    display: inline-block;
}

.cal-chip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    line-height: 1.3;
    cursor: pointer;
    border: none;
    text-align: left;
    width: 100%;
    transition: filter var(--transition), transform var(--transition);
}
.cal-chip:hover { filter: brightness(.93); transform: translateY(-1px); }
.cal-chip--unscheduled { background: rgba(255,255,255,0.1); color: var(--text-secondary); }
.cal-chip--scheduled   { background: var(--colour-primary-light); color: var(--colour-primary); border: 1px solid var(--colour-primary); }
.cal-chip__ref  { font-weight: 700; font-size: 0.68rem; }
.cal-chip__svc  { font-size: 0.68rem; }
.cal-chip__time { font-size: 0.65rem; opacity: .75; }

.cal-legend {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
    font-size: var(--text-xs);
    color: var(--colour-text-muted);
    align-items: center;
}
.cal-legend .cal-chip { display: inline-flex; flex-direction: row; gap: var(--space-2); width: auto; pointer-events: none; }

/* --------------------------------------------------------------------------
   25. Reminders panel
   -------------------------------------------------------------------------- */
.reminders-panel {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}
.reminders-panel__title { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-3); }
.reminder-list { display: flex; flex-direction: column; gap: var(--space-3); }
.reminder-item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    background: var(--colour-bg);
    border-radius: var(--radius-sm);
}
.reminder-item__dot {
    width: .75rem; height: .75rem;
    border-radius: 50%;
    background: var(--colour-primary);
    flex-shrink: 0;
    margin-top: .25rem;
}
.reminder-item__body { display: flex; flex-direction: column; gap: 2px; }
.reminder-item__msg  { font-size: var(--text-sm); font-weight: 500; }
.reminder-item__meta { font-size: var(--text-xs); color: var(--colour-text-faint); }

/* --------------------------------------------------------------------------
   26. Catalogue management
   -------------------------------------------------------------------------- */
.cat-layout {
    display: grid;
    grid-template-columns: 14rem 14rem 1fr;
    gap: var(--space-4);
    align-items: flex-start;
}
@media (max-width: 900px) { .cat-layout { grid-template-columns: 1fr; } }

.cat-panel {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.cat-panel--wide { grid-column: 3; }
@media (max-width: 900px) { .cat-panel--wide { grid-column: auto; } }

.cat-panel__head {
    background: var(--colour-bg);
    border-bottom: 1px solid var(--colour-border);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--colour-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cat-list { list-style: none; }
.cat-list__item {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--colour-border);
}
.cat-list__item:last-child { border-bottom: none; }
.cat-list__item--active .cat-list__link {
    background: var(--colour-primary-light);
    color: var(--colour-primary);
    font-weight: 700;
}
.cat-list__item--inactive { opacity: .5; }

.cat-list__link {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    color: var(--colour-text);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: background var(--transition);
}
.cat-list__link:hover { background: var(--colour-bg); text-decoration: none; }
.cat-list__name { font-weight: 600; }
.cat-list__meta { font-size: var(--text-xs); color: var(--colour-text-muted); }

.cat-list__edit {
    flex-shrink: 0;
    width: 2.25rem;
    background: none;
    border: none;
    border-left: 1px solid var(--colour-border);
    color: var(--colour-text-faint);
    cursor: pointer;
    font-size: 1rem;
    transition: background var(--transition), color var(--transition);
}
.cat-list__edit:hover { background: var(--colour-bg); color: var(--colour-text); }

.cat-empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
}

.row--inactive { opacity: .5; }

/* --------------------------------------------------------------------------
   27. Utility classes
   -------------------------------------------------------------------------- */
.text-muted   { color: var(--colour-text-muted); }
.text-sm      { font-size: var(--text-sm); }
.text-center  { text-align: center; }
.mt-4         { margin-top: var(--space-4); }
.mt-6         { margin-top: var(--space-6); }
.mb-4         { margin-bottom: var(--space-4); }
.mb-6         { margin-bottom: var(--space-6); }
.sr-only      { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   28. Services drill-down page
   -------------------------------------------------------------------------- */

.services-drill {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

/* Hero banner */
.services-hero {
    background: linear-gradient(135deg, var(--brand-colour, #0d0d0d) 0%, #0d0d0d 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-8);
    margin-bottom: var(--space-8);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.services-hero::before {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    top: -120px; right: -80px;
    pointer-events: none;
}
.services-hero__inner  { position: relative; }
.services-hero__icon   { font-size: 3rem; line-height: 1; display: block; margin-bottom: var(--space-3); }
.services-hero__title  { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: var(--space-3); letter-spacing: -0.02em; }
.services-hero__sub    { font-size: var(--text-base); color: rgba(255,255,255,.75); max-width: 36rem; margin-inline: auto; margin: 0 auto; }

/* Breadcrumb */
.drill-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-8);
    font-size: var(--text-sm);
}
.drill-breadcrumb__item {
    color: var(--colour-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition);
}
.drill-breadcrumb__item:hover { color: var(--colour-primary-dark); text-decoration: underline; }
.drill-breadcrumb__item--current {
    color: var(--colour-text-muted);
    font-weight: 400;
    cursor: default;
}
.drill-breadcrumb__sep { color: var(--colour-text-faint); font-size: var(--text-base); }

/* Shared drill grid */
.drill-grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

/* Stage 0: Category grid */
.drill-grid--categories {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.drill-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--colour-text);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
    text-align: center;
}
.drill-cat-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); border-color: var(--colour-primary); text-decoration: none; }
.drill-cat-card__icon  { font-size: 3.5rem; line-height: 1; }
.drill-cat-card__name  { font-weight: 700; font-size: var(--text-base); }
.drill-cat-card__count { font-size: var(--text-xs); color: var(--colour-text-muted); }

/* Stage 1: Brand grid */
.drill-grid--brands {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.drill-brand-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6);
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--brand-colour, var(--colour-primary));
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--colour-text);
    transition: box-shadow var(--transition), transform var(--transition);
}
.drill-brand-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); text-decoration: none; }
.drill-brand-card__logo  {
    flex: 1;
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.drill-brand-card__count { font-size: var(--text-xs); color: var(--colour-text-muted); white-space: nowrap; }
.drill-brand-card__arrow { font-size: var(--text-lg); color: var(--colour-text-faint); margin-left: var(--space-2); }

/* Stage 2: Model grid */
.drill-grid--models {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.drill-model-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--colour-text);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.drill-model-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); text-decoration: none; }
.drill-model-card__image {
    flex-shrink: 0;
    width: 5rem; height: 100%;
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-3);
}
.drill-model-card__body  { flex: 1; padding: var(--space-4) 0; display: flex; flex-direction: column; gap: 3px; }
.drill-model-card__brand { font-size: var(--text-xs); color: var(--colour-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.drill-model-card__model { font-size: var(--text-base); font-weight: 700; }
.drill-model-card__count { font-size: var(--text-xs); color: var(--colour-primary); font-weight: 600; }
.drill-model-card__arrow { font-size: var(--text-lg); color: var(--colour-text-faint); padding-right: var(--space-4); }

/* Stage 3: Service cards */
.service-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.service-card-v2 {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
}
.service-card-v2:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }

.service-icon-wrap {
    background: var(--colour-primary-light);
    color: var(--colour-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    min-height: 8rem;
}
.service-icon-wrap svg { display: block; }

.service-card-v2__body {
    padding: var(--space-5) var(--space-5) var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.service-card-v2__name {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--colour-text);
    margin: 0;
}
.service-card-v2__desc {
    font-size: var(--text-xs);
    color: var(--colour-text-muted);
    margin: 0;
    line-height: 1.5;
}
.service-card-v2__price {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--colour-primary);
    letter-spacing: -0.03em;
    margin-top: auto;
    padding-top: var(--space-2);
}
.service-card-v2__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}
.service-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2em 0.65em;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
}
.service-tag--time     { background: var(--badge-yellow-bg); color: var(--badge-yellow-fg); }
.service-tag--warranty { background: var(--badge-green-bg);  color: var(--badge-green-fg); }

.service-card-v2__cta {
    margin: 0 var(--space-5) var(--space-5);
    text-align: center;
}

/* Admin import page */
.import-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: flex-start;
}
@media (max-width: 768px) { .import-page { grid-template-columns: 1fr; } }

.import-instructions {
    background: var(--colour-primary-light);
    border: 1px solid var(--colour-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-7);
}
.import-instructions__title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-4); }
.import-instructions__steps {
    list-style: decimal;
    padding-left: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}
.import-instructions__template { margin-top: var(--space-4); }

.import-upload-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-7);
    box-shadow: var(--shadow-sm);
}
.import-upload-card__title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-4); }

/* ==========================================================================
   COMPONENTS - ProductCard  -  ProductGrid  -  SearchBar  -  FiltersSidebar  -  PriceDisplay
   All values reference cex-design-tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   ProductCard
   -------------------------------------------------------------------------- */
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 4px 8px rgba(0,0,0,.06);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.product-card:hover {
    box-shadow: 0 0 0 2px var(--blue), 0 8px 32px rgba(46,91,255,.18);
    border-color: var(--blue);
    transform: translateY(-3px);
}

/* Thumbnail */
.product-card__thumb {
    background: var(--navy3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    border-bottom: 1px solid var(--colour-border);
    min-height: 9rem;
}
.product-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    background: var(--colour-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.product-card__icon-wrap svg { width: 2.25rem; height: 2.25rem; }

/* Body */
.product-card__body {
    flex: 1;
    padding: var(--space-4) var(--space-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.product-card__device {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--colour-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}
.product-card__title {
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--colour-text);
    line-height: 1.3;
    margin: 0;
}
.product-card__desc {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta badges */
.product-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.product-card__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--colour-text-muted);
    background: var(--colour-bg);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.6rem;
}

/* Footer */
.product-card__footer {
    padding: var(--space-4);
}

/* --------------------------------------------------------------------------
   ProductGrid  - 4-col -> 2-col -> 1-col
   -------------------------------------------------------------------------- */
.product-grid__heading {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-6);
}
.product-grid__empty {
    text-align: center;
    color: var(--colour-text-muted);
    padding: var(--space-12) 0;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
@media (max-width: 1200px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .product-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   SearchBar  - CeX red accent button
   -------------------------------------------------------------------------- */
.search-bar-wrap {
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
}

.search-bar__inner {
    display: flex;
    align-items: center;
    background: var(--colour-surface);
    border: 2px solid var(--colour-border-strong);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-2) 0 var(--space-4);
    gap: var(--space-2);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.search-bar__inner:focus-within {
    border-color: var(--colour-primary);
    box-shadow: 0 0 0 3px var(--colour-primary-light);
}

.search-bar__icon {
    color: var(--colour-text-muted);
    flex-shrink: 0;
    display: flex;
}

.search-bar__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: var(--text-base);
    color: var(--colour-text);
    padding: 0.75rem 0;
    min-width: 0;
}
.search-bar__input::placeholder { color: var(--colour-text-faint); }
/* Hide browser's native x in search inputs */
.search-bar__input::-webkit-search-cancel-button { display: none; }

.search-bar__clear {
    display: flex;
    align-items: center;
    color: var(--colour-text-muted);
    padding: var(--space-1);
    border-radius: 50%;
    transition: color var(--transition), background var(--transition);
    flex-shrink: 0;
}
.search-bar__clear:hover { color: var(--colour-text); background: var(--colour-bg); }

/* Red button - CeX signature accent */
.search-bar__btn {
    flex-shrink: 0;
    background: var(--cex-red);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    padding: 0.55rem 1.4rem;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
    white-space: nowrap;
}
.search-bar__btn:hover {
    background: var(--cex-red-dark);
    box-shadow: 0 4px 12px rgba(226,10,3,.35);
    transform: translateY(-1px);
}
.search-bar__btn:active { transform: translateY(0); }

@media (max-width: 480px) {
    .search-bar__btn { padding: 0.55rem 1rem; }
}

/* --------------------------------------------------------------------------
   FiltersSidebar  - desktop rail + mobile drawer
   -------------------------------------------------------------------------- */

/* Checkbox toggle - hidden */
.filters-drawer-cb { display: none; }

/* Mobile trigger button */
.filters-toggle {
    display: none;
    align-items: center;
    gap: var(--space-2);
    background: var(--colour-surface);
    border: 1px solid var(--colour-border-strong);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    color: var(--colour-text);
    position: relative;
    transition: background var(--transition), box-shadow var(--transition);
}
.filters-toggle:hover { background: var(--colour-bg); box-shadow: var(--shadow-sm); }
.filters-toggle__dot {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cex-red);
    border: 2px solid var(--colour-surface);
}

/* Sidebar */
.filters-sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.filters-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.filters-sidebar__heading {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    margin: 0;
}
.filters-sidebar__close {
    display: none;    /* shown only on mobile */
    cursor: pointer;
    color: var(--colour-text-muted);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
}
.filters-sidebar__close:hover { color: var(--colour-text); background: var(--colour-bg); }

/* Group */
.filters-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.filters-group__label {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--colour-text-muted);
    margin: 0;
}

/* Pill options (sort) */
.filters-group__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.filters-pill {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    background: var(--colour-bg);
    border: 1px solid var(--colour-border-strong);
    color: var(--colour-text-muted);
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filters-pill:hover { background: var(--colour-primary-light); color: var(--colour-primary); border-color: var(--colour-primary); text-decoration: none; }
.filters-pill--active { background: var(--colour-primary); color: #fff; border-color: var(--colour-primary); }

/* List options (categories / brands) */
.filters-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.filters-list__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.45rem var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.filters-list__link:hover { background: var(--colour-bg); color: var(--colour-text); text-decoration: none; }
.filters-list__link--active {
    background: var(--colour-primary-light);
    color: var(--colour-primary);
    font-weight: var(--fw-semibold);
}

/* Price range */
.filters-price-form { display: flex; flex-direction: column; gap: var(--space-3); }
.filters-price__row { display: flex; align-items: center; gap: var(--space-3); }
.filters-price__label { font-size: var(--text-sm); color: var(--colour-text-muted); white-space: nowrap; }
.filters-price__range {
    flex: 1;
    accent-color: var(--cex-red);
    height: 4px;
    cursor: pointer;
}
.filters-price__output {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    min-width: 3rem;
    text-align: right;
}
.filters-price__apply { align-self: flex-start; }

/* Reset link */
.filters-reset {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    text-decoration: none;
    transition: color var(--transition);
}
.filters-reset:hover { color: var(--cex-red); text-decoration: none; }

/* Backdrop (mobile only) */
.filters-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 149;
    cursor: pointer;
}

/* -- Mobile drawer -- */
@media (max-width: 768px) {
    .filters-toggle { display: inline-flex; }
    .filters-sidebar__close { display: flex; }

    .filters-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(20rem, 85vw);
        background: var(--colour-surface);
        border-right: 1px solid var(--colour-border);
        box-shadow: var(--shadow-lg);
        padding: var(--space-6);
        overflow-y: auto;
        z-index: 150;
        transform: translateX(-110%);
        transition: transform 280ms cubic-bezier(.4,0,.2,1);
    }

    .filters-drawer-cb:checked ~ .filters-sidebar { transform: translateX(0); }
    .filters-drawer-cb:checked ~ .filters-backdrop { display: block; }
}

/* --------------------------------------------------------------------------
   PriceDisplay  - 3-tier CeX-style price strip
   -------------------------------------------------------------------------- */
.price-display {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--colour-border-strong);
    border-radius: var(--radius);
    overflow: hidden;
}

.price-display__tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-3) var(--space-2);
    background: var(--colour-bg);
    border-right: 1px solid var(--colour-border-strong);
    transition: background var(--transition);
    cursor: default;
    text-align: center;
}
.price-display__tier:last-child { border-right: none; }
.price-display__tier--active {
    background: var(--colour-primary-light);
}

.price-display__label {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--colour-text-muted);
}
.price-display__tier--active .price-display__label { color: var(--colour-primary); }

.price-display__price {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    color: var(--colour-text);
    line-height: 1.1;
}
.price-display__tier--active .price-display__price { color: var(--colour-primary); }

.price-display__hint {
    font-size: var(--text-xs);
    color: var(--colour-text-faint);
}

/* Screen-reader only utility (used by search-bar) */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* --------------------------------------------------------------------------
   Slot Picker
   -------------------------------------------------------------------------- */
#slot-picker-wrap { margin-top: var(--space-4); }

.slot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.slot-btn {
    padding: 0.45rem 1rem;
    border: 1px solid var(--colour-border-strong);
    border-radius: var(--radius-sm);
    background: var(--colour-surface);
    color: var(--colour-text);
    font: var(--fw-medium) var(--text-sm) var(--font-sans);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
    min-width: 6rem;
    text-align: center;
}
.slot-btn:hover:not(:disabled) {
    background: var(--colour-primary-light);
    border-color: var(--colour-primary);
    color: var(--colour-primary);
}
.slot-btn--selected {
    background: var(--colour-primary);
    border-color: var(--colour-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
.slot-btn--unavailable,
.slot-btn:disabled {
    background: var(--colour-bg);
    border-color: var(--colour-border);
    color: var(--colour-text-faint);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: .6;
}
.slot-loading,
.slot-error {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    margin: 0;
}
.slot-error { color: var(--colour-error); }

#slot-hint {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    min-height: 1.4em;
}

/* --------------------------------------------------------------------------
   AI Chat Widget
   -------------------------------------------------------------------------- */
/* Floating toggle button */
.chat-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 900;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--colour-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37,99,235,.4);
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.chat-toggle:hover { background: var(--colour-primary-dark); box-shadow: 0 6px 24px rgba(37,99,235,.5); }
.chat-toggle:active { transform: scale(.95); }
.chat-toggle--open { background: var(--colour-grey-700); }
.chat-toggle--open:hover { background: var(--colour-grey-900); }

.chat-toggle__icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.chat-toggle__icon--close { display: none; }
.chat-toggle--open .chat-toggle__icon--chat   { display: none; }
.chat-toggle--open .chat-toggle__icon--close  { display: block; }

/* Widget drawer */
.chat-widget {
    position: fixed;
    bottom: 5.5rem;
    right: 1.5rem;
    z-index: 899;
    width: min(22rem, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0,0,0,.18);
    overflow: hidden;
    max-height: 70vh;
}

/* Header */
.chat-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--colour-primary);
    color: #fff;
    flex-shrink: 0;
}
.chat-header__avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.chat-header__info { flex: 1; min-width: 0; }
.chat-header__name {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    margin: 0;
    line-height: 1.2;
}
.chat-header__status {
    font-size: var(--text-xs);
    opacity: .8;
    margin: 0;
}
.chat-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.8);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition), background var(--transition);
    flex-shrink: 0;
}
.chat-close:hover { color: #fff; background: rgba(255,255,255,.15); }

/* Messages */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    scroll-behavior: smooth;
}

.chat-msg {
    display: flex;
    max-width: 85%;
}
.chat-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg--assistant { align-self: flex-start; }

.chat-bubble {
    padding: 0.55rem 0.9rem;
    border-radius: 4px;
    font-size: var(--text-sm);
    line-height: 1.5;
    word-break: break-word;
}
.chat-msg--user .chat-bubble {
    background: var(--colour-primary);
    color: #fff;
}
.chat-msg--assistant .chat-bubble {
    background: var(--colour-bg);
    color: var(--colour-text);
    border: 1px solid var(--colour-border);
    border-bottom-left-radius: 0.25rem;
}

/* Typing dots */
.chat-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 1rem;
}
.chat-dots span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--colour-text-muted);
    animation: chat-dot 1.2s infinite ease-in-out;
}
.chat-dots span:nth-child(2) { animation-delay: .2s; }
.chat-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes chat-dot {
    0%, 80%, 100% { transform: scale(.7); opacity: .5; }
    40%            { transform: scale(1);  opacity: 1; }
}

/* Input area */
.chat-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--colour-border);
    background: var(--colour-surface);
    flex-shrink: 0;
}
.chat-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--colour-border-strong);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font: var(--text-sm)/1.4 var(--font-sans);
    color: var(--colour-text);
    background: var(--colour-bg);
    max-height: 7.5rem;
    overflow-y: auto;
    transition: border-color var(--transition), box-shadow var(--transition);
    field-sizing: content;
}
.chat-input:focus {
    outline: none;
    border-color: var(--colour-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.chat-input::placeholder { color: var(--colour-text-faint); }

.chat-send {
    background: var(--colour-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
    flex-shrink: 0;
}
.chat-send:hover:not(:disabled) { background: var(--colour-primary-dark); }
.chat-send:disabled { opacity: .5; cursor: not-allowed; }
.chat-send svg { width: 1.1rem; height: 1.1rem; }

/* ═══════════════════════════════════════════════
   SHOP PAGE
   ═══════════════════════════════════════════════ */

.shop-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

/* ── Hero ─────────────────────────────────────── */
.shop-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(135deg, var(--navy2) 0%, #0d1030 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2.5rem 3rem;
  margin: 1.5rem 0;
  overflow: hidden;
  position: relative;
}
.shop-hero::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(46,91,255,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.shop-hero-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.6rem;
}
.shop-hero h1 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
.shop-hero h1 em {
  font-style: normal;
  color: var(--blue);
}
.shop-hero-sub {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1.4rem;
  max-width: 420px;
}
.shop-hero-btns {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.shop-hero-btns a {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.4rem;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.18s;
}
.shop-btn-primary {
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
}
.shop-btn-primary:hover { background: var(--blue-h); border-color: var(--blue-h); }
.shop-btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.18);
}
.shop-btn-ghost:hover { background: rgba(255,255,255,0.05); }
.shop-hero-badges {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.shop-hero-badge {
  background: rgba(46,91,255,0.1);
  border: 1px solid rgba(46,91,255,0.22);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 210px;
}
.shop-hero-badge span { font-size: 1rem; flex-shrink: 0; }

/* ── Trust strip ──────────────────────────────── */
.shop-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.shop-trust-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.shop-trust-ico { font-size: 1.5rem; flex-shrink: 0; }
.shop-trust-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 2px; }
.shop-trust-sub { font-size: 0.72rem; color: var(--muted); line-height: 1.35; }

/* ── Section heading ──────────────────────────── */
.shop-sec-head {
  margin-bottom: 1rem;
}
.shop-sec-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.35rem;
}
.shop-sec-head h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}
.shop-sec-head p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ── Category tiles ───────────────────────────── */
.shop-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.shop-cat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem 0.75rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s;
}
.shop-cat:hover {
  border-color: rgba(46,91,255,0.4);
  background: rgba(46,91,255,0.06);
  transform: translateY(-2px);
}
.shop-cat.active {
  border-color: var(--blue);
  background: rgba(46,91,255,0.1);
  box-shadow: 0 0 0 1px var(--blue);
}
.shop-cat-ico {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}
.shop-cat.active .shop-cat-ico {
  background: rgba(46,91,255,0.15);
  border-color: rgba(46,91,255,0.3);
}
.shop-cat-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  line-height: 1.3;
}
.shop-cat-count {
  font-size: 0.65rem;
  color: var(--muted);
}

/* ── Products section ─────────────────────────── */
#shop-products { scroll-margin-top: 80px; }

/* ── Toolbar ──────────────────────────────────── */
.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.shop-count {
  font-size: 0.82rem;
  color: var(--muted);
  margin-right: auto;
}
.shop-count strong { color: var(--white); }
.shop-filter-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}
.shop-filter-toggle:hover { border-color: rgba(255,255,255,0.2); }
.shop-filter-toggle.active {
  background: rgba(46,91,255,0.12);
  border-color: var(--blue);
  color: var(--blue);
}
.filter-badge {
  background: var(--blue);
  color: #fff;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  margin-left: 2px;
}
.shop-sort {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 2rem 0.5rem 0.85rem;
  font-size: 0.8rem;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237b85b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-color: var(--card-bg);
}
.shop-view-btns { display: flex; gap: 3px; }
.shop-view-btn {
  width: 32px; height: 32px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.15s;
}
.shop-view-btn.active,
.shop-view-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ── Filter panel ─────────────────────────────── */
.shop-filter-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}
.shop-filter-panel.open { display: grid; }
.filter-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.filter-checks label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--white);
  cursor: pointer;
  padding: 0.25rem 0;
}
.filter-checks label:hover { color: var(--cyan); }
.filter-checks input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--blue);
  flex-shrink: 0;
}
.filter-count-badge {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--muted);
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  padding: 1px 6px;
}
.filter-price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.filter-price-row input {
  width: 100%;
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.45rem 0.6rem;
  font-size: 0.78rem;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  outline: none;
}
.filter-price-row input::placeholder { color: var(--muted); }
.filter-price-row span { color: var(--muted); font-size: 0.78rem; flex-shrink: 0; }
.filter-apply {
  margin-top: 0.6rem;
  padding: 0.45rem 1rem;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.filter-apply:hover { background: var(--blue-h); }

/* ── Active filter tags ───────────────────────── */
.active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.active-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(46,91,255,0.12);
  border: 1px solid rgba(46,91,255,0.25);
  border-radius: 99px;
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #c8d5ff;
  text-decoration: none;
  transition: background 0.15s;
}
.active-tag:hover { background: rgba(46,91,255,0.22); }
.active-tag .rm { opacity: 0.6; font-size: 0.9rem; }
.clear-tags {
  background: transparent;
  border: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cyan);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  padding: 0.3rem 0.2rem;
}
.clear-tags:hover { text-decoration: underline; }

/* ── Product grid ─────────────────────────────── */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.shop-grid.list-view { grid-template-columns: 1fr; }

/* ── Product card ─────────────────────────────── */
.prod-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.prod-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 10px 36px rgba(0,0,0,0.4);
}
.prod-card-img {
  aspect-ratio: 1;
  background: #181b35;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  position: relative;
  padding: 1.25rem;
  overflow: hidden;
}
.prod-card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.prod-card-img .no-img {
  font-size: 3.5rem;
  opacity: 0.18;
}
.prod-badges {
  position: absolute;
  top: 8px; left: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.badge {
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-refurb { background: rgba(14,184,127,0.15); color: #0eb87f; border: 1px solid rgba(14,184,127,0.25); }
.badge-new    { background: rgba(46,91,255,0.15);  color: #7fa8ff; border: 1px solid rgba(46,91,255,0.25); }
.badge-oos    { background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--border); }
.badge-sale   { background: rgba(240,56,122,0.15); color: #f0387a; border: 1px solid rgba(240,56,122,0.25); }

.prod-card-body {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.prod-card-cat {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cyan);
  margin-bottom: 0.25rem;
}
.prod-card-name {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.3rem;
  color: var(--white);
}
.prod-card-desc {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: auto;
  padding-bottom: 0.75rem;
}
.prod-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  margin-top: 0.75rem;
  gap: 0.5rem;
}
.prod-price { font-size: 1.1rem; font-weight: 800; color: var(--white); }
.prod-was   { font-size: 0.68rem; color: var(--muted); text-decoration: line-through; display: block; }
.prod-stock {
  font-size: 0.68rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.prod-stock::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.stock-in  { color: #0eb87f; }
.stock-low { color: #f5a623; }
.stock-out { color: var(--muted); }

.prod-add-btn {
  width: 34px; height: 34px;
  background: var(--blue);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s;
}
.prod-add-btn:hover { background: var(--blue-h); transform: scale(1.08); }
.prod-add-btn:disabled {
  background: rgba(255,255,255,0.07);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

/* List view */
.shop-grid.list-view .prod-card { flex-direction: row; }
.shop-grid.list-view .prod-card-img {
  aspect-ratio: unset;
  width: 130px;
  min-width: 130px;
  border-bottom: none;
  border-right: 1px solid var(--border);
  padding: 0.75rem;
}
.shop-grid.list-view .prod-card-body {
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
}
.shop-grid.list-view .prod-card-foot {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  margin-left: auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Empty state */
.shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
}
.shop-empty-ico { font-size: 2.5rem; opacity: 0.3; margin-bottom: 0.75rem; }
.shop-empty h3  { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4rem; }
.shop-empty p   { font-size: 0.85rem; color: var(--muted); }

/* ── Pagination ───────────────────────────────── */
.shop-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 2rem;
}
.pager-btn {
  min-width: 34px; height: 34px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6rem;
  text-decoration: none;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}
.pager-btn:hover   { border-color: var(--blue); color: var(--blue); }
.pager-btn.current { background: var(--blue); border-color: var(--blue); color: #fff; }
.pager-dots        { color: var(--muted); font-size: 0.8rem; padding: 0 0.2rem; }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-trust { grid-template-columns: repeat(3, 1fr); }
  .shop-hero { padding: 2rem; }
  .shop-hero h1 { font-size: 1.6rem; }
  .shop-hero-badges { display: none; }
}
@media (max-width: 680px) {
  .shop-hero { grid-template-columns: 1fr; }
  .shop-trust { grid-template-columns: 1fr; }
  .shop-cats  { grid-template-columns: repeat(3, 1fr); }
  .shop-wrap  { padding: 0 0.75rem 2rem; }
}
@media (max-width: 480px) {
  .shop-grid  { grid-template-columns: repeat(2, 1fr); }
  .shop-cats  { grid-template-columns: repeat(3, 1fr); }
}

/* -- Settings page ------------------------------------------------------- */
.admin-page-header { margin-bottom: var(--space-6); }
.admin-page-title  { font-size: var(--text-xl); font-weight: 700; color: var(--colour-text); }
.admin-section-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--colour-text);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--colour-border);
}
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* -- Cosmetic checklist modal grid --------------------------------------- */
.checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

/* -- Announcement Banner --------------------------------------------------- */
.tc-banner {
    position: relative;
    width: 100%;
    background: linear-gradient(90deg, #1a45e8 0%, #2e5bff 40%, #6b3fff 100%);
    color: #fff;
    height: 36px;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 2200;
    flex-shrink: 0;
}

.tc-banner-track-wrap {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
}

.tc-banner-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: tc-scroll var(--tc-scroll-dur, 40s) linear infinite;
    will-change: transform;
}

.tc-banner-track:hover {
    animation-play-state: paused;
}

@keyframes tc-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}

.tc-banner-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 32px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.tc-banner-emoji {
    font-size: 0.9rem;
    line-height: 1;
}

.tc-banner-sep {
    color: rgba(255,255,255,0.55);
    font-size: 0.65rem;
    margin-left: 24px;
}

.tc-banner-link {
    color: #00c2e8;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,194,232,0.4);
    transition: border-color 0.2s;
}

.tc-banner-link:hover {
    border-bottom-color: #00c2e8;
}

.tc-banner-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.2);
    border: none;
    border-left: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}

.tc-banner-close:hover {
    background: rgba(0,0,0,0.35);
    color: #fff;
}

.tc-banner-hidden {
    display: none !important;
}

.topbar {
    top: 0;
}

/* Muted rows in data tables (inactive items) */
.row-muted td {
    opacity: 0.5;
}

/* Warning rows in data tables (low-stock parts) */
.row-warning td {
    background: rgba(245,166,35,0.07);
}

/* Amber badge for low-stock / warnings */
.badge--amber {
    background: rgba(245,166,35,0.18);
    color: #f5a623;
    border: 1px solid rgba(245,166,35,0.3);
}

/* --------------------------------------------------------------------------
   Global ecommerce layout and category/service cards
   -------------------------------------------------------------------------- */
.layout-section {
    padding-block: var(--space-8);
}

.layout-section--compact {
    padding-block: var(--space-5);
}

.layout-stack {
    display: grid;
    gap: var(--space-6);
}

.category-card-grid,
.service-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-5);
}

.category-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--card-bg) !important;
    color: var(--white);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.category-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(46,91,255,0.45) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.28) !important;
    text-decoration: none;
}

.category-service-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(46,91,255,0.16), rgba(0,194,232,0.08));
}

.category-service-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4,16,42,0.02) 35%, rgba(4,16,42,0.3) 100%);
}

.category-service-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 0.28s ease, filter 0.28s ease;
}

.category-service-card:hover .category-service-card__image {
    filter: saturate(1.05);
    transform: scale(1.06);
}

.category-service-card__placeholder {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--cyan);
    font-size: 2rem;
    font-weight: 800;
}

.category-service-card__placeholder svg {
    width: 46px;
    height: 46px;
}

.category-service-card__placeholder:empty::before,
.category-service-card__placeholder:empty::after {
    content: '';
    display: block;
}

.category-service-card__placeholder:empty::before {
    width: 46px;
    height: 76px;
    border: 3px solid rgba(255,255,255,0.82);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
    box-shadow: 0 18px 34px rgba(0,0,0,0.24);
}

.category-service-card__placeholder:empty::after {
    position: absolute;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    transform: translateY(31px);
}

.category-service-card__media--laptop .category-service-card__placeholder:empty::before,
.category-service-card__media--laptops .category-service-card__placeholder:empty::before,
.category-service-card__media--computer .category-service-card__placeholder:empty::before,
.category-service-card__media--computers .category-service-card__placeholder:empty::before {
    width: 86px;
    height: 54px;
    border-radius: 8px;
}

.category-service-card__media--laptop .category-service-card__placeholder:empty::after,
.category-service-card__media--laptops .category-service-card__placeholder:empty::after,
.category-service-card__media--computer .category-service-card__placeholder:empty::after,
.category-service-card__media--computers .category-service-card__placeholder:empty::after {
    width: 106px;
    height: 9px;
    border-radius: 0 0 12px 12px;
    transform: translateY(34px);
}

.category-service-card__media--tablet .category-service-card__placeholder:empty::before,
.category-service-card__media--tablets .category-service-card__placeholder:empty::before,
.category-service-card__media--ipad .category-service-card__placeholder:empty::before,
.category-service-card__media--ipads .category-service-card__placeholder:empty::before {
    width: 62px;
    height: 82px;
    border-radius: 10px;
}

.category-service-card__media--console .category-service-card__placeholder:empty::before,
.category-service-card__media--consoles .category-service-card__placeholder:empty::before,
.category-service-card__media--gaming .category-service-card__placeholder:empty::before,
.category-service-card__media--games-console .category-service-card__placeholder:empty::before {
    width: 92px;
    height: 50px;
    border-radius: 24px;
}

.category-service-card__media--console .category-service-card__placeholder:empty::after,
.category-service-card__media--consoles .category-service-card__placeholder:empty::after,
.category-service-card__media--gaming .category-service-card__placeholder:empty::after,
.category-service-card__media--games-console .category-service-card__placeholder:empty::after {
    width: 56px;
    height: 8px;
    border-radius: 999px;
    transform: translateY(0);
}

.category-service-card__media--service .category-service-card__placeholder {
    color: var(--cyan);
}

.drill-cat-card.category-service-card {
    align-items: stretch;
    gap: 0;
    padding: 0;
    text-align: left;
}

.drill-cat-card.category-service-card .category-service-card__placeholder {
    color: var(--cyan);
}

.service-card-v2.category-service-card {
    padding: 0;
}

.service-card-v2.category-service-card .service-icon-wrap {
    min-height: 0;
    padding: 0;
    background: transparent;
    color: inherit;
}

.category-service-card__body {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    background: var(--card-bg);
    position: relative;
    z-index: 1;
}

.category-service-card__title {
    color: var(--white);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
}

.category-service-card__price {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
}

.category-service-card--background {
    min-height: 220px;
    justify-content: flex-end;
}

.category-service-card--background .category-service-card__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.category-service-card--background .category-service-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(4,16,42,0.88) 100%);
}

.category-service-card--background .category-service-card__body {
    position: relative;
    z-index: 1;
    padding: 1.25rem;
}

.svc-tile {
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.16);
}

.svc-tile:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.24);
}

@media (max-width: 768px) {
    .layout-section {
        padding-block: var(--space-6);
    }

    .category-card-grid,
    .service-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

@media (max-width: 420px) {
    .category-card-grid,
    .service-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Homepage/card refinement pass */
.page-home .main {
    padding-top: 1rem;
    padding-bottom: 2.25rem;
}

.page-home .hero-banner {
    margin-bottom: 1.75rem;
}

.page-home .home-section-head {
    align-items: flex-end;
    margin-top: 0;
    margin-bottom: 1rem;
}

.page-home .sec-title {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.2;
}

.page-home .home-section-sub {
    max-width: 460px;
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.page-home .home-service-grid {
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.page-home .home-final-cta {
    border-color: rgba(255,255,255,0.08);
    margin-bottom: 0;
    padding: 1.35rem 1.5rem;
    background: rgba(46,91,255,0.08);
}

.page-home .home-final-cta .home-shop-cta-title {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
}

.page-home .home-final-cta .home-shop-cta-sub {
    font-size: 0.82rem;
    line-height: 1.45;
}

.page-home .home-final-cta-actions {
    gap: 0.6rem;
}

.category-service-card {
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
}

.category-service-card:hover {
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important;
}

.category-service-card__media {
    aspect-ratio: 5 / 3;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        var(--navy3);
}

.category-service-card__media::after {
    background:
        linear-gradient(180deg, rgba(4,16,42,0) 45%, rgba(4,16,42,0.22) 100%),
        rgba(4,16,42,0.04);
}

.category-service-card__image {
    filter: saturate(0.9) contrast(0.98) brightness(0.96);
}

.category-service-card:hover .category-service-card__image {
    filter: saturate(0.98) contrast(1) brightness(1);
}

.category-service-card__body {
    gap: 0.25rem;
    padding: 0.95rem 1rem 1.05rem;
}

.category-service-card__title {
    font-size: 0.95rem;
    letter-spacing: 0;
}

.category-service-card__price {
    font-size: 0.8rem;
}

@media (max-width: 700px) {
    .page-home .home-section-head {
        align-items: flex-start;
    }

    .page-home .home-final-cta {
        padding: 1.2rem;
    }
}

/* Category card system */
.category-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.category-card {
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    background: var(--card-bg) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
    color: var(--white);
}

.category-card:hover,
.category-card:focus-visible {
    border-color: rgba(255,255,255,0.2) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.22) !important;
    transform: translateY(-3px);
}

.category-card:focus-visible {
    outline: 2px solid rgba(0,194,232,0.6);
    outline-offset: 3px;
}

.category-card__media {
    aspect-ratio: 5 / 3;
    background: var(--navy3);
}

.category-card__media::after {
    background:
        linear-gradient(180deg, rgba(4,16,42,0) 48%, rgba(4,16,42,0.24) 100%),
        rgba(4,16,42,0.04);
}

.category-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) contrast(0.98) brightness(0.96);
    transform: scale(1.01);
    transition: transform 0.28s ease, filter 0.28s ease;
}

.category-card:hover .category-card__image,
.category-card:focus-visible .category-card__image {
    filter: saturate(1) contrast(1) brightness(1);
    transform: scale(1.045);
}

.category-card__body {
    display: grid;
    gap: 0.25rem;
    padding: 0.95rem 1rem 1.05rem;
    background: var(--card-bg);
}

.category-card__title {
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.category-card__meta {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.category-card.drill-cat-card {
    align-items: stretch;
    gap: 0;
    padding: 0;
    text-align: left;
}

@media (max-width: 768px) {
    .category-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }
}

@media (max-width: 440px) {
    .category-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Premium homepage redesign */
.page-home .main {
    display: grid;
    gap: 1.5rem;
    max-width: 1200px;
    padding: 1.25rem 1.5rem 2.75rem;
}

.home-premium-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: clamp(1.25rem, 4vw, 3rem);
    align-items: center;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: clamp(2rem, 5vw, 4rem);
    background:
        radial-gradient(circle at 78% 18%, rgba(0,194,232,0.22), transparent 18rem),
        radial-gradient(circle at 20% 10%, rgba(46,91,255,0.26), transparent 20rem),
        linear-gradient(135deg, #081233 0%, #101a45 48%, #050b1d 100%);
    box-shadow: 0 24px 70px rgba(0,0,0,0.32);
}

.home-premium-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(90deg, #000 0%, transparent 82%);
    pointer-events: none;
}

.home-premium-hero__content,
.home-premium-hero__panel {
    position: relative;
    z-index: 1;
}

.home-eyebrow {
    width: fit-content;
    margin-bottom: 0.85rem;
    border: 1px solid rgba(0,194,232,0.28);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    background: rgba(0,194,232,0.1);
    color: var(--cyan);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-premium-hero__title {
    max-width: 760px;
    margin: 0;
    color: var(--white) !important;
    font-size: clamp(2.1rem, 5vw, 4.35rem);
    line-height: 1.02;
    letter-spacing: 0;
    -webkit-text-fill-color: var(--white) !important;
}

.home-premium-hero__copy {
    max-width: 660px;
    margin: 1rem 0 0;
    color: var(--offwhite);
    font-size: clamp(1rem, 1.7vw, 1.14rem);
    line-height: 1.65;
}

.home-premium-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.6rem;
}

.home-premium-hero__panel {
    display: grid;
    gap: 1rem;
}

.home-hero-device-card {
    min-height: 150px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 1.25rem;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045)),
        rgba(5,11,29,0.42);
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}

.home-hero-device-card--primary {
    transform: translateX(-1rem);
}

.home-hero-device-card span {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--cyan);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.home-hero-device-card strong {
    display: block;
    color: #fff;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.22;
}

.home-action-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.home-action-card,
.home-brand-card,
.home-trust-item {
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(46,91,255,0.12), rgba(255,255,255,0.035)),
        var(--card-bg);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

.home-action-card {
    min-height: 220px;
    padding: 1.35rem;
    color: var(--white);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.home-action-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,194,232,0.28);
    box-shadow: 0 16px 36px rgba(0,0,0,0.26);
    text-decoration: none;
}

.home-action-card__kicker {
    color: var(--cyan);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.home-action-card h2 {
    margin: 0.75rem 0 0.55rem;
    color: #fff !important;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    -webkit-text-fill-color: #fff !important;
}

.home-action-card p,
.home-section-heading p,
.home-brand-card li,
.home-trust-item span {
    color: var(--muted);
    line-height: 1.5;
}

.home-action-card--repairs { background: linear-gradient(135deg, rgba(0,194,232,0.14), rgba(46,91,255,0.08)), var(--card-bg); }
.home-action-card--refurb { background: linear-gradient(135deg, rgba(46,91,255,0.16), rgba(185,157,255,0.08)), var(--card-bg); }
.home-action-card--new { background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,194,232,0.06)), var(--card-bg); }

.home-repair-categories,
.home-brand-support {
    display: grid;
    gap: 1rem;
}

.home-section-heading {
    max-width: 720px;
}

.home-section-heading h2 {
    margin: 0;
    color: #fff !important;
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    -webkit-text-fill-color: #fff !important;
}

.home-section-heading p {
    margin: 0.55rem 0 0;
}

.home-brand-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.home-brand-card {
    padding: 1.25rem;
}

.home-brand-card h3 {
    margin: 0 0 0.85rem;
    color: #fff !important;
    font-size: 1rem;
    -webkit-text-fill-color: #fff !important;
}

.home-brand-card ul {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
}

.home-local-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.home-trust-item {
    padding: 1rem;
}

.home-trust-item strong {
    display: block;
    margin-bottom: 0.35rem;
    color: #fff;
}

.page-home .home-section-head {
    align-items: flex-end;
}

.page-home .home-service-grid {
    margin-bottom: 0;
}

.page-home .home-final-cta {
    margin: 0;
    padding: 1.5rem;
    background:
        radial-gradient(circle at top right, rgba(0,194,232,0.12), transparent 18rem),
        rgba(46,91,255,0.08);
}

.page-home .home-final-cta-actions {
    gap: 0.65rem;
}

@media (max-width: 920px) {
    .home-premium-hero,
    .home-action-section,
    .home-brand-grid,
    .home-local-trust {
        grid-template-columns: 1fr;
    }

    .home-hero-device-card--primary {
        transform: none;
    }
}

@media (max-width: 620px) {
    .page-home .main {
        padding-inline: 1rem;
    }

    .home-premium-hero {
        min-height: 0;
        padding: 1.5rem;
    }

    .home-premium-hero__actions,
    .home-premium-hero__actions a,
    .home-final-cta-actions,
    .home-final-cta-actions a {
        width: 100%;
        justify-content: center;
    }
}

/* Homepage premium polish */
.page-home .site-main {
    background:
        radial-gradient(circle at 50% 0%, rgba(46,91,255,0.12), transparent 28rem),
        var(--navy);
}

.page-home .main {
    gap: 1.75rem;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

.page-home .btn-hero-p,
.page-home .btn-hero-s {
    min-height: 44px;
    border-radius: 999px;
    padding: 0.72rem 1.18rem;
    font-size: 0.88rem;
    line-height: 1;
}

.page-home .btn-hero-p {
    box-shadow: 0 12px 26px rgba(46,91,255,0.28);
}

.page-home .btn-hero-s {
    background: rgba(255,255,255,0.045);
    border-color: rgba(255,255,255,0.45);
}

.home-premium-hero {
    grid-template-columns: minmax(0, 1.22fr) minmax(270px, 0.78fr);
    min-height: 460px;
    padding: clamp(2.4rem, 5vw, 4.5rem);
    border-radius: 20px;
}

.home-premium-hero__title {
    max-width: 820px;
    font-size: clamp(2.35rem, 5.6vw, 4.65rem);
    line-height: 0.98;
}

.home-premium-hero__copy {
    max-width: 620px;
    margin-top: 1.15rem;
    font-size: clamp(1rem, 1.5vw, 1.12rem);
}

.home-premium-hero__actions {
    margin-top: 1.85rem;
}

.home-premium-hero__panel {
    gap: 0.9rem;
}

.home-hero-device-card {
    min-height: 158px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 18px;
}

.home-action-section,
.home-brand-grid,
.home-local-trust {
    gap: 1.15rem;
}

.home-action-card,
.home-brand-card,
.home-trust-item {
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 8px 22px rgba(0,0,0,0.16);
}

.home-action-card {
    min-height: 205px;
    padding: 1.45rem;
}

.home-action-card h2 {
    margin-top: 0.7rem;
    margin-bottom: 0.5rem;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.home-action-card p {
    max-width: 22rem;
    margin: 0;
}

.home-repair-categories,
.home-brand-support {
    gap: 1.05rem;
}

.page-home .home-section-head {
    padding-top: 0.25rem;
}

.page-home .sec-title,
.home-section-heading h2 {
    letter-spacing: 0;
}

.home-brand-card {
    padding: 1.35rem;
}

.home-brand-card ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.42rem;
}

.home-brand-card li {
    font-size: 0.88rem;
}

.home-brand-card li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 0.45rem;
    border-radius: 50%;
    background: rgba(0,194,232,0.75);
    vertical-align: 0.12em;
}

.home-local-trust {
    align-items: stretch;
}

.home-trust-item {
    padding: 1.1rem;
}

.home-trust-item strong {
    font-size: 0.95rem;
}

.home-trust-item span {
    font-size: 0.82rem;
}

.page-home .home-final-cta {
    border-radius: 16px;
    padding: 1.35rem 1.5rem;
}

.page-home .home-final-cta .home-shop-cta-title {
    margin: 0 0 0.35rem;
}

.page-home .home-final-cta .home-shop-cta-sub {
    margin: 0;
}

@media (max-width: 920px) {
    .home-premium-hero {
        min-height: 0;
    }

    .home-brand-card ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .page-home .main {
        gap: 1.25rem;
        padding-top: 1rem;
    }

    .home-premium-hero {
        border-radius: 16px;
    }

    .home-action-card {
        min-height: auto;
    }
}

/* Homepage alignment pass */
.page-home .main {
    width: min(100%, 1200px);
    margin-inline: auto;
    padding-left: clamp(1rem, 3vw, 1.5rem);
    padding-right: clamp(1rem, 3vw, 1.5rem);
}

.home-premium-hero,
.home-action-section,
.home-repair-categories,
.home-brand-support,
.home-local-trust,
.home-final-cta {
    width: 100%;
}

.home-premium-hero {
    justify-items: stretch;
}

.home-premium-hero__content {
    max-width: 760px;
}

.home-premium-hero__actions,
.home-final-cta-actions {
    align-items: center;
}

.home-action-section,
.home-brand-grid,
.home-local-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-local-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-action-card,
.home-brand-card,
.home-trust-item,
.category-card {
    height: 100%;
}

.home-repair-categories,
.home-brand-support {
    align-items: stretch;
}

.page-home .home-section-head,
.home-section-heading {
    width: 100%;
}

.page-home .home-section-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.page-home .home-section-head > div,
.home-section-heading {
    min-width: 0;
}

.page-home .home-section-head .sec-link {
    flex: 0 0 auto;
}

.page-home .home-service-grid.category-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.home-final-cta-inner {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.home-final-cta-actions {
    justify-content: flex-end;
}

@media (max-width: 1020px) {
    .home-action-section,
    .home-brand-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-local-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .home-action-section,
    .home-brand-grid,
    .home-local-trust {
        grid-template-columns: 1fr;
    }

    .home-final-cta-inner {
        grid-template-columns: 1fr;
    }

    .home-final-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .page-home .home-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-home .home-section-head .sec-link {
        align-self: flex-start;
    }

    .home-premium-hero__actions,
    .home-final-cta-actions {
        align-items: stretch;
    }
}

/* Homepage premium rhythm pass */
.page-home .main {
    gap: clamp(2rem, 4vw, 3.25rem);
    padding-top: clamp(1.25rem, 2.5vw, 2rem);
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.home-premium-hero {
    min-height: 500px;
    padding: clamp(2.75rem, 6vw, 5rem);
}

.home-premium-hero__content {
    align-self: center;
}

.home-premium-hero__panel {
    align-self: center;
    max-width: 360px;
    justify-self: end;
}

.home-hero-device-card {
    min-height: 170px;
    padding: 1.45rem;
}

.home-action-section,
.home-brand-grid,
.home-local-trust {
    gap: clamp(1rem, 2vw, 1.35rem);
}

.home-action-card {
    min-height: 230px;
    padding: 1.65rem;
}

.home-action-card h2 {
    margin-top: 1rem;
}

.home-action-card p {
    max-width: 19rem;
}

.home-repair-categories,
.home-brand-support {
    gap: 1.25rem;
}

.page-home .home-section-head,
.home-section-heading {
    margin-bottom: 0;
}

.page-home .sec-title,
.home-section-heading h2 {
    font-size: clamp(1.45rem, 2.4vw, 2.05rem);
}

.page-home .home-section-sub,
.home-section-heading p {
    max-width: 560px;
    font-size: 0.94rem;
}

.page-home .home-service-grid.category-card-grid {
    gap: clamp(1rem, 2vw, 1.25rem);
}

.category-card__body {
    padding: 1.08rem 1.1rem 1.15rem;
}

.category-card__title {
    font-size: 1rem;
}

.home-brand-card,
.home-trust-item {
    padding: 1.45rem;
}

.home-brand-card ul {
    row-gap: 0.5rem;
}

.home-local-trust {
    margin-top: -0.25rem;
}

.home-trust-item {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
        var(--card-bg);
}

.page-home .home-final-cta {
    padding: clamp(1.5rem, 3vw, 2rem);
}

.page-home .home-final-cta .home-shop-cta-title {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

@media (max-width: 920px) {
    .home-premium-hero {
        min-height: 0;
    }

    .home-premium-hero__panel {
        max-width: none;
        justify-self: stretch;
    }
}

@media (max-width: 620px) {
    .page-home .main {
        gap: 1.6rem;
        padding-bottom: 2.75rem;
    }

    .home-premium-hero {
        padding: 1.65rem;
    }

    .home-hero-device-card {
        min-height: 132px;
    }
}

.admin-subheading {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    color: var(--colour-text);
}

/* ==========================================================================
   About page
   ========================================================================== */

/* Intro split: text + stat cards */
.about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
    margin-bottom: 2.5rem;
}
@media (max-width: 768px) { .about-intro-grid { grid-template-columns: 1fr; } }

.about-intro-text p {
    color: var(--muted);
    line-height: 1.7;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}
.about-intro-aside {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.about-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
}
.about-stat-card__num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--cyan);
    margin: 0 0 0.2rem;
    line-height: 1;
}
.about-stat-card__label {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
}

/* About / Services compact grid */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}
.svc-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.svc-card:hover {
  border-color: rgba(46,91,255,0.4);
  background: rgba(46,91,255,0.04);
  transform: translateY(-2px);
}
.svc-card__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.svc-card__icon--blue   { background: rgba(46,91,255,0.15);  color: #7b9fff; }
.svc-card__icon--cyan   { background: rgba(0,194,232,0.15);  color: #00c2e8; }
.svc-card__icon--purple { background: rgba(107,63,255,0.15); color: #a07fff; }
.svc-card__icon--green  { background: rgba(14,184,127,0.15); color: #0eb87f; }
.svc-card__icon--amber  { background: rgba(245,166,35,0.15); color: #f5a623; }
.svc-card__title { font-size: 0.88rem; font-weight: 700; color: var(--white); margin: 0 0 0.2rem; }
.svc-card__desc  { font-size: 0.76rem; color: var(--muted); margin: 0; line-height: 1.45; }
@media (max-width: 768px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .svc-grid { grid-template-columns: 1fr; } }

/* About hero stat strip */
.about-stat-strip {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.about-stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.about-stat-item__num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--cyan);
    line-height: 1;
    flex-shrink: 0;
    min-width: 3rem;
}
.about-stat-item__label {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.4;
}

/* Local grid: personal + business */
.about-local-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
@media (max-width: 640px) { .about-local-grid { grid-template-columns: 1fr; } }

.about-local-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
}
.about-local-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 0.75rem;
}
.about-local-card p {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.65;
    margin: 0 0 0.6rem;
}
.about-local-card p:last-child { margin-bottom: 0; }

/* FAQ accordion */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}
.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.faq-item:has(.faq-item__trigger[aria-expanded="true"]) {
    border-color: rgba(0,194,232,0.3);
}
.faq-item__trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    text-align: left;
}
.faq-item__trigger:hover { color: var(--cyan); }
.faq-item__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    position: relative;
    transition: border-color 0.2s, transform 0.2s;
}
.faq-item__icon::before,
.faq-item__icon::after {
    content: '';
    position: absolute;
    background: var(--muted);
    border-radius: 2px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s, background 0.2s;
}
.faq-item__icon::before { width: 8px; height: 1.5px; }
.faq-item__icon::after  { width: 1.5px; height: 8px; }
.faq-item__trigger[aria-expanded="true"] .faq-item__icon {
    border-color: var(--cyan);
    transform: rotate(45deg);
}
.faq-item__trigger[aria-expanded="true"] .faq-item__icon::before,
.faq-item__trigger[aria-expanded="true"] .faq-item__icon::after { background: var(--cyan); }
.faq-item__body {
    padding: 0 1.4rem 1.1rem;
}
.faq-item__body p {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}

/* Find us grid */
.about-find-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 2.5rem;
}
@media (max-width: 640px) { .about-find-grid { grid-template-columns: 1fr; } }

.about-find-map iframe { width: 100%; }
.about-find-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 200px;
}

/* ==========================================================================
   Hero Carousel
   ========================================================================== */

.hero-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 24px 70px rgba(0,0,0,0.36);
    min-height: 420px;
    margin-bottom: 1.75rem;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}

.hero-carousel:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.hero-carousel__track {
    display: flex;
    height: 100%;
    transition: transform 0.58s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
/* Per-slide background images */
.hero-carousel__slide--repairs   { background-image: url('/images/hero/slide-repairs.jpg'); }
.hero-carousel__slide--gaming    { background-image: url('/images/hero/slide-gaming.jpg'); }
.hero-carousel__slide--console   { background-image: url('/images/hero/slide-console.jpg'); }
.hero-carousel__slide--refurb    { background-image: url('/images/hero/slide-refurb.jpg'); }
.hero-carousel__slide--business  { background-image: url('/images/hero/slide-technician.jpg'); }

.hero-carousel__slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 420px;
    display: flex;
    align-items: center;
}

/* Dark gradient overlay — heavy left for text, fades right to reveal image */
.hero-carousel__slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        108deg,
        rgba(7, 14, 45, 0.90) 0%,
        rgba(7, 14, 45, 0.70) 36%,
        rgba(7, 14, 45, 0.38) 62%,
        rgba(7, 14, 45, 0.14) 100%
    );
    pointer-events: none;
}

.hero-carousel__content {
    position: relative;
    z-index: 1;
    padding: clamp(2rem, 5.5vw, 4.5rem);
    max-width: 640px;
}

.hero-carousel__kicker {
    display: inline-block;
    margin-bottom: 0.85rem;
    border: 1px solid rgba(0,194,232,0.30);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    background: rgba(0,194,232,0.10);
    color: var(--cyan);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.hero-carousel__title {
    margin: 0 0 0.9rem;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: clamp(2rem, 5vw, 3.9rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
    font-weight: 800;
}

.hero-carousel__copy {
    margin: 0 0 1.7rem;
    color: rgba(255, 255, 255, 0.80);
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    line-height: 1.65;
    max-width: 510px;
}

.hero-carousel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Prev / Next arrow buttons */
.hero-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.20);
    background: rgba(10, 15, 46, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    padding: 0;
    flex-shrink: 0;
}

.hero-carousel__btn:hover,
.hero-carousel__btn:focus-visible {
    background: rgba(46, 91, 255, 0.60);
    border-color: rgba(46, 91, 255, 0.60);
    outline: none;
}

.hero-carousel__btn--prev { left: 1.1rem; }
.hero-carousel__btn--next { right: 1.1rem; }

.hero-carousel__btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Dot indicators */
.hero-carousel__dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.38);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.22s, width 0.22s, border-radius 0.22s;
    flex-shrink: 0;
}

.hero-carousel__dot[aria-selected="true"] {
    background: var(--cyan);
    width: 26px;
    border-radius: 4px;
}

/* Screen-reader live region */
.hero-carousel__live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* Responsive — tablet */
@media (max-width: 900px) {
    .hero-carousel,
    .hero-carousel__slide {
        min-height: 340px;
    }
    .hero-carousel__content {
        padding: 2.25rem 1.75rem;
        max-width: 100%;
    }
}

/* Responsive — mobile */
@media (max-width: 600px) {
    .hero-carousel,
    .hero-carousel__slide {
        min-height: 330px;
        border-radius: 12px;
    }
    .hero-carousel__content {
        padding: 1.75rem 1.25rem;
    }
    .hero-carousel__title {
        font-size: clamp(1.55rem, 7vw, 2rem);
    }
    .hero-carousel__copy {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }
    .hero-carousel__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-carousel__actions a {
        text-align: center;
    }
    /* Hide arrows on very small screens — swipe handles navigation */
    .hero-carousel__btn {
        width: 36px;
        height: 36px;
    }
    .hero-carousel__btn--prev { left: 0.5rem; }
    .hero-carousel__btn--next { right: 0.5rem; }
    .hero-carousel__btn svg  { width: 16px; height: 16px; }
}

/* ===================================================================
   Repair Booking Wizard — 5-step visual device selection
   =================================================================== */

/* Page wrapper */
.repair-wizard-page { padding-bottom: 4rem; }

/* Step progress bar */
.wiz-progress {
    margin: 1.75rem 0 2.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.wiz-progress__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 480px;
}
.wiz-progress__item {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
}
.wiz-progress__item:not(:last-child)::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 0.5rem;
    transition: background 0.3s;
}
.wiz-progress__item--done:not(:last-child)::after,
.wiz-progress__item--active:not(:last-child)::after {
    background: var(--blue);
}
.wiz-progress__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.wiz-progress__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--card-bg);
    transition: background 0.25s, border-color 0.25s, color 0.25s;
    line-height: 1;
}
.wiz-progress__label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    transition: color 0.25s;
}
.wiz-progress__item--active .wiz-progress__num {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.wiz-progress__item--active .wiz-progress__label { color: var(--white); }
.wiz-progress__item--done .wiz-progress__num {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.wiz-progress__item--done .wiz-progress__label { color: var(--muted); }

/* Step containers */
.wiz-step { animation: wizStepIn 0.2s ease; }
@keyframes wizStepIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wiz-step-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
.wiz-step-title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--white);
    margin: 0;
}
.wiz-step-sub {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0.25rem 0 0;
    font-weight: 400;
}
.wiz-page-head {
    margin-bottom: 0.5rem;
}
.wiz-page-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    color: var(--white);
    margin: 0 0 0.4rem;
}
.wiz-page-sub {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0;
}

/* Back button */
.wiz-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.18s, color 0.18s;
}
.wiz-back-btn:hover {
    border-color: var(--blue);
    color: var(--white);
}

/* Search bar */
.wiz-search-bar {
    margin-bottom: 1.25rem;
}
.wiz-search {
    width: 100%;
    max-width: 380px;
    padding: 0.65rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--white);
    font-family: var(--font-family);
    font-size: 0.9rem;
    transition: border-color 0.18s;
}
.wiz-search:focus { outline: none; border-color: var(--blue); }

/* Loading / empty / error states */
.wiz-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.95rem;
}
.wiz-state__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 0.5rem;
}
.wiz-state__loading {
    display: inline-block;
    width: 28px; height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: wiz-spin 0.7s linear infinite;
    margin-bottom: 0.75rem;
}
@keyframes wiz-spin { to { transform: rotate(360deg); } }

/* ---- Step 1: Category cards ---- */
.wiz-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (min-width: 560px) { .wiz-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .wiz-cat-grid { grid-template-columns: repeat(5, 1fr); } }

.wiz-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 160px;
    padding: 1.25rem 0.75rem 1.1rem;
    border-radius: 16px;
    border: 2px solid var(--border);
    background: var(--card-bg);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.15s;
    text-align: center;
}
.wiz-cat-card:hover, .wiz-cat-card:focus-visible {
    border-color: var(--blue);
    transform: translateY(-3px);
    outline: none;
}
.wiz-cat-card:active { transform: scale(0.97); }

/* Category gradient backgrounds */
.wiz-cat-bg {
    position: absolute;
    inset: 0;
    opacity: 1;
    z-index: 0;
}
.wiz-cat-bg--phones   { background: linear-gradient(145deg, #0d1640 0%, #1a2e6a 100%); }
.wiz-cat-bg--tablets  { background: linear-gradient(145deg, #0a2535 0%, #0e3d50 100%); }
.wiz-cat-bg--laptops  { background: linear-gradient(145deg, #0d2a0d 0%, #153d15 100%); }
.wiz-cat-bg--consoles { background: linear-gradient(145deg, #2a0a10 0%, #4a1020 100%); }
.wiz-cat-bg--gaming   { background: linear-gradient(145deg, #1a0a2a 0%, #32144a 100%); }
.wiz-cat-bg--watches  { background: linear-gradient(145deg, #2a1a00 0%, #4a3200 100%); }
.wiz-cat-bg--default  { background: linear-gradient(145deg, #12152e 0%, #1a1f45 100%); }

.wiz-cat-card__icon {
    position: relative;
    z-index: 1;
    color: var(--white);
    opacity: 0.9;
    margin-bottom: 0.6rem;
    flex-shrink: 0;
}
.wiz-cat-card__icon svg { display: block; }
.wiz-cat-card__name {
    position: relative;
    z-index: 1;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
    display: block;
}
.wiz-cat-card__hint {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.6);
    display: block;
    margin-top: 0.2rem;
    line-height: 1.35;
}

/* ---- Step 2: Brand cards (text-based, no images) ---- */
.wiz-brand-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 2rem;
}
@media (min-width: 480px) { .wiz-brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .wiz-brand-grid { grid-template-columns: repeat(4, 1fr); } }

.wiz-brand-card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 0.75rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    min-height: 96px;
    transition: border-color 0.2s, background 0.18s, transform 0.15s;
}
.wiz-brand-card:hover, .wiz-brand-card:focus-visible {
    border-color: var(--blue);
    background: rgba(46,91,255,0.06);
    transform: translateY(-3px);
    outline: none;
}
.wiz-brand-card:active { transform: scale(0.97); }
.wiz-brand-card--other { border-style: dashed; }

.wiz-brand-card__initial {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(46,91,255,0.12);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.18s, color 0.18s;
}
.wiz-brand-card:hover .wiz-brand-card__initial {
    background: rgba(46,91,255,0.2);
}
.wiz-brand-card__initial--other {
    background: rgba(168,179,216,0.12);
    color: var(--muted);
}
.wiz-brand-card__name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    line-height: 1.3;
}

/* ---- Step 3: Model cards ---- */
.wiz-model-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (min-width: 560px) { .wiz-model-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .wiz-model-grid { grid-template-columns: repeat(4, 1fr); } }

.wiz-model-card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
}
.wiz-model-card:hover, .wiz-model-card:focus-visible {
    border-color: var(--blue);
    transform: translateY(-3px);
    outline: none;
}
.wiz-model-card:active { transform: scale(0.98); }

.wiz-model-card__placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255,255,255,0.35);
}
.wiz-model-card__placeholder--phones   { background: linear-gradient(145deg, #0d1640 0%, #1a2e6a 100%); }
.wiz-model-card__placeholder--tablets  { background: linear-gradient(145deg, #0a2535 0%, #0e3d50 100%); }
.wiz-model-card__placeholder--laptops  { background: linear-gradient(145deg, #0d2a0d 0%, #153d15 100%); }
.wiz-model-card__placeholder--consoles { background: linear-gradient(145deg, #2a0a10 0%, #4a1020 100%); }
.wiz-model-card__placeholder--pcs      { background: linear-gradient(145deg, #1a1500 0%, #352800 100%); }
.wiz-model-card__placeholder--watches  { background: linear-gradient(145deg, #2a1a00 0%, #4a3200 100%); }
.wiz-model-card__placeholder--other    { background: linear-gradient(145deg, #12152e 0%, #1a1f45 100%); }
.wiz-model-card__body {
    padding: 0.85rem 0.9rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.wiz-model-card__name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    line-height: 1.35;
}
.wiz-model-card__sub {
    font-size: 0.73rem;
    color: var(--muted);
    margin: 0;
}
.wiz-model-card__cta {
    margin-top: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cyan);
    text-align: left;
}

/* ---- Step 4: Repair cards ---- */
.wiz-repair-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (min-width: 560px) { .wiz-repair-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .wiz-repair-grid { grid-template-columns: repeat(3, 1fr); } }

.wiz-repair-card {
    background: #13162e;
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem 1.25rem 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, background 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}
.wiz-repair-card:hover, .wiz-repair-card:focus-visible {
    border-color: var(--blue);
    background: #161a36;
    transform: translateY(-3px);
    outline: none;
}
.wiz-repair-card:active { transform: scale(0.98); }

.wiz-repair-card__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(46,91,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    margin-bottom: 0.25rem;
    flex-shrink: 0;
}
.wiz-repair-card__icon svg { display: block; }
.wiz-repair-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    line-height: 1.3;
}
.wiz-repair-card__desc {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
    flex: 1;
}
.wiz-repair-card__price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--white);
    margin: 0.25rem 0 0;
    line-height: 1;
}
.wiz-repair-card__price-prefix {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted);
    display: block;
    margin-bottom: 0.15rem;
}
.wiz-repair-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}
.wiz-repair-card__badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 99px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}
.wiz-repair-card__badge--warranty {
    color: var(--cyan);
    border-color: rgba(0,194,232,0.25);
}
.wiz-repair-card__select-btn {
    margin-top: 0.75rem;
    display: block;
    width: 100%;
    padding: 0.6rem;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.18s;
    pointer-events: none; /* parent button handles click */
}
.wiz-repair-card:hover .wiz-repair-card__select-btn { background: var(--blue-h); }

/* ---- Step 5: Selected repair summary bar ---- */
.wiz-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: rgba(46,91,255,0.1);
    border: 1px solid rgba(46,91,255,0.3);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
.wiz-selection-bar__trail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--white);
    font-weight: 500;
}
.wiz-selection-bar__crumb { color: var(--muted); }
.wiz-selection-bar__sep  { color: rgba(255,255,255,0.25); }
.wiz-selection-bar__repair { font-weight: 700; color: var(--white); }
.wiz-selection-bar__price {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--cyan);
    white-space: nowrap;
}
.wiz-selection-bar__change {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cyan);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: underline;
}

/* Step breadcrumb (mini trail shown below step titles) */
.wiz-step-crumb {
    font-size: 0.75rem;
    color: var(--muted);
    margin: 0.2rem 0 0;
    font-weight: 400;
}

/* "Other" device details form (shown inside model grid container) */
.wiz-other-form {
    background: rgba(46,91,255,0.05);
    border: 1px solid rgba(46,91,255,0.2);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    max-width: 560px;
}
.wiz-other-form__intro {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.wiz-other-input {
    width: 100%;
    padding: 0.65rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--white);
    font-family: var(--font-family);
    font-size: 0.9rem;
    transition: border-color 0.18s;
    box-sizing: border-box;
}
.wiz-other-input:focus {
    outline: none;
    border-color: var(--blue);
}
textarea.wiz-other-input { resize: vertical; line-height: 1.5; }

/* Slot buttons — explicit dark styling inside the wizard */
.repair-wizard-page .slot-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--white);
}
.repair-wizard-page .slot-btn:hover:not(:disabled) {
    background: rgba(46,91,255,0.15);
    border-color: var(--blue);
    color: var(--white);
}
.repair-wizard-page .slot-btn--selected {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.repair-wizard-page .slot-btn--unavailable,
.repair-wizard-page .slot-btn:disabled {
    background: transparent;
    border-color: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.25);
}

/* ===================================================================
   Phone Repair Pages — brand cards, filter bar, pricing table
   =================================================================== */

/* Brand grid — phones hub page */
.repair-brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.repair-brand-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.22s, transform 0.18s;
}
.repair-brand-card:hover {
    border-color: rgba(46,91,255,0.45);
    transform: translateY(-3px);
}

.repair-brand-card__img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    background: #0a0c1e;
}

.repair-brand-card__placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: #0a0c1e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.repair-brand-card__body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.repair-brand-card__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
}

.repair-brand-card__tagline {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.35;
}

.repair-brand-card__from {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--cyan);
    font-weight: 600;
}

/* Filter bar — search + repair type chips */
.repair-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.repair-filter-search {
    width: 100%;
    max-width: 380px;
    padding: 0.6rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--white);
    font-family: var(--font-family);
    font-size: 0.9rem;
    transition: border-color 0.18s;
}
.repair-filter-search:focus {
    outline: none;
    border-color: var(--blue);
}

.repair-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.repair-chip {
    padding: 0.35rem 0.9rem;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-family: var(--font-family);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    white-space: nowrap;
}
.repair-chip:hover {
    border-color: var(--blue);
    color: var(--white);
}
.repair-chip[aria-selected="true"] {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}

/* Pricing table */
.pricing-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid var(--border);
    margin-bottom: 2rem;
    -webkit-overflow-scrolling: touch;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pricing-table th {
    padding: 0.8rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    background: #0c0e24;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.pricing-table th:first-child {
    min-width: 175px;
    position: sticky;
    left: 0;
    background: #0c0e24;
    z-index: 1;
}

.pricing-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: top;
    white-space: nowrap;
}
.pricing-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--card-bg);
    z-index: 1;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.pricing-table tbody tr:last-child td { border-bottom: none; }
.pricing-table tbody tr:hover td     { background: rgba(46,91,255,0.07); }
.pricing-table tbody tr:hover td:first-child { background: rgba(46,91,255,0.12); }

.pricing-table__model {
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
}
.pricing-table__year {
    font-size: 0.73rem;
    color: var(--muted);
    font-weight: 400;
    margin-left: 0.3rem;
}

.pricing-table__price {
    font-weight: 700;
    color: var(--white);
    display: block;
}
.pricing-table__price--from::before {
    content: 'from ';
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--muted);
}
.pricing-table__price--free {
    color: var(--cyan);
    font-weight: 600;
}

.pricing-table__time {
    font-size: 0.72rem;
    color: var(--muted);
    display: block;
}
.pricing-table__note {
    font-size: 0.7rem;
    color: var(--muted);
    display: block;
    font-style: italic;
}
.pricing-table__na {
    color: rgba(255,255,255,0.18);
}

/* No results row */
.pricing-no-results {
    text-align: center;
    padding: 2rem;
    color: var(--muted);
    display: none;
}

/* Brand section header (android.php multi-brand) */
.pricing-brand-header {
    padding: 0.7rem 1rem;
    background: rgba(46,91,255,0.1);
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cyan);
}

/* Responsive */
@media (max-width: 640px) {
    .repair-brand-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Homepage 2025 — hero, trust strip, why-choose, testimonials,
   FAQ, local SEO, repair tiles, tracker promo, final CTA,
   floating mobile CTAs
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.home-hero {
    padding: 3.5rem 0 2rem;
}

.home-hero__inner {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: center;
}

.home-hero__location {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 0.75rem;
}

.home-hero__pin {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.home-hero__title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--white);
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

.home-hero__sub {
    font-size: 1.05rem;
    color: var(--muted);
    line-height: 1.65;
    max-width: 520px;
    margin-bottom: 1.75rem;
}

.home-hero__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.home-hero__call {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.home-hero__call svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.home-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.home-hero__pill {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 4px 12px;
}

.home-hero__pill--green {
    color: #4ade80;
    background: rgba(74,222,128,0.08);
    border-color: rgba(74,222,128,0.25);
}

.home-hero__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero__badge-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.home-hero__stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.home-hero__stat-card--1 { border-left: 3px solid var(--cyan); }
.home-hero__stat-card--2 { border-left: 3px solid var(--blue); }
.home-hero__stat-card--3 { border-left: 3px solid #4ade80; }

.home-hero__stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    min-width: 40px;
}

.home-hero__stat-label {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 500;
}

.home-hero__stat-icon {
    width: 22px;
    height: 22px;
    color: #4ade80;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .home-hero__inner { grid-template-columns: 1fr; }
    .home-hero__visual { display: none; }
}

@media (max-width: 600px) {
    .home-hero { padding: 2rem 0 1.5rem; }
    .home-hero__actions .btn-hero-p,
    .home-hero__actions .btn-hero-s { width: 100%; justify-content: center; }
}

/* ---- Trust strip --------------------------------------------------------- */
.home-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
}

.home-trust-strip__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--border);
}

.home-trust-strip__item:last-child { border-right: none; }

.home-trust-strip__icon {
    width: 22px;
    height: 22px;
    color: var(--cyan);
    flex-shrink: 0;
}

.home-trust-strip__item strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}

.home-trust-strip__item span {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.3;
    margin-top: 1px;
}

@media (max-width: 900px) {
    .home-trust-strip { grid-template-columns: repeat(2, 1fr); }
    .home-trust-strip__item:nth-child(2) { border-right: none; }
}

@media (max-width: 500px) {
    .home-trust-strip { grid-template-columns: 1fr; }
    .home-trust-strip__item { border-right: none; border-bottom: 1px solid var(--border); }
    .home-trust-strip__item:last-child { border-bottom: none; }
}

/* ---- Repair tiles -------------------------------------------------------- */
.home-repair-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.home-repair-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.15s;
}

.home-repair-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 12px 12px 0 0;
}

.home-repair-tile:hover {
    border-color: rgba(46,91,255,0.45);
    transform: translateY(-2px);
}

.home-repair-tile--iphone::before    { background: linear-gradient(90deg, #a8b3d8, #2e5bff); }
.home-repair-tile--samsung::before   { background: linear-gradient(90deg, #00c2e8, #1a45e8); }
.home-repair-tile--laptop::before    { background: linear-gradient(90deg, #2e5bff, #b99dff); }
.home-repair-tile--console::before   { background: linear-gradient(90deg, #4ade80, #00c2e8); }
.home-repair-tile--tablet::before    { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.home-repair-tile--business::before  { background: linear-gradient(90deg, #b99dff, #2e5bff); }

.home-repair-tile__label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.25;
}

.home-repair-tile__sub {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
    flex: 1;
}

.home-repair-tile__arrow {
    width: 16px;
    height: 16px;
    color: var(--muted);
    margin-top: 0.5rem;
    transition: color 0.15s, transform 0.15s;
}

.home-repair-tile:hover .home-repair-tile__arrow {
    color: var(--cyan);
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .home-repair-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .home-repair-tiles { grid-template-columns: 1fr; }
}

/* ---- Why choose ---------------------------------------------------------- */
.home-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.home-why-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.home-why-card__icon {
    width: 40px;
    height: 40px;
    background: rgba(46,91,255,0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    flex-shrink: 0;
}

.home-why-card__icon svg {
    width: 20px;
    height: 20px;
    color: var(--cyan);
}

.home-why-card__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    line-height: 1.3;
}

.home-why-card__text {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .home-why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .home-why-grid { grid-template-columns: 1fr; }
}

/* ---- Repair tracker promo ------------------------------------------------ */
.home-tracker-promo {
    background: linear-gradient(135deg, rgba(46,91,255,0.15), rgba(0,194,232,0.08));
    border: 1px solid rgba(46,91,255,0.35);
    border-radius: 14px;
    padding: 1.75rem 2rem;
}

.home-tracker-promo__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.home-tracker-promo__icon {
    width: 52px;
    height: 52px;
    background: rgba(46,91,255,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-tracker-promo__icon svg {
    width: 24px;
    height: 24px;
    color: var(--cyan);
}

.home-tracker-promo__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 0.2rem;
}

.home-tracker-promo__sub {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0;
    max-width: 480px;
    line-height: 1.55;
}

.home-tracker-promo__btn {
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .home-tracker-promo__inner { flex-direction: column; align-items: flex-start; }
    .home-tracker-promo__btn { margin-left: 0; width: 100%; text-align: center; }
}

/* ---- Testimonials -------------------------------------------------------- */
.home-reviews__stars-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.1rem;
    color: #f5c518;
}

.home-reviews__rating-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--white);
}

.home-reviews__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.home-review-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.home-review-card__stars {
    color: #f5c518;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.home-review-card__text {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
    flex: 1;
    font-style: italic;
}

.home-review-card__author {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.02em;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}

.home-reviews__disclaimer {
    font-size: 0.72rem;
    color: var(--muted);
    opacity: 0.6;
    text-align: center;
    margin-top: 0.75rem;
}

@media (max-width: 900px) {
    .home-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .home-reviews__grid { grid-template-columns: 1fr; }
}

/* ---- Visit section additions --------------------------------------------- */
.home-visit-walkin {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.75rem;
    font-style: italic;
}

/* ---- Local SEO section --------------------------------------------------- */
.home-local-seo {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem;
}

.home-local-seo__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 1.25rem;
}

.home-local-seo__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.home-local-seo__cols p {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.7;
    margin: 0 0 0.75rem;
}

.home-local-seo__link {
    color: var(--cyan);
    text-decoration: none;
}

.home-local-seo__link:hover { text-decoration: underline; }

.home-local-seo__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.home-local-seo__links a {
    font-size: 0.78rem;
    color: var(--cyan);
    text-decoration: none;
    background: rgba(0,194,232,0.08);
    border: 1px solid rgba(0,194,232,0.2);
    border-radius: 6px;
    padding: 4px 10px;
    white-space: nowrap;
}

.home-local-seo__links a:hover {
    background: rgba(0,194,232,0.14);
    text-decoration: underline;
}

@media (max-width: 700px) {
    .home-local-seo__cols { grid-template-columns: 1fr; gap: 0; }
}

/* ---- FAQ ----------------------------------------------------------------- */
.home-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.home-faq__item {
    border-bottom: 1px solid var(--border);
}

.home-faq__item:last-child { border-bottom: none; }

.home-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    background: transparent;
    border: none;
    padding: 1rem 1.25rem;
    color: var(--white);
    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.home-faq__q:hover { background: rgba(255,255,255,0.03); }

.home-faq__q[aria-expanded="true"] { background: rgba(255,255,255,0.04); }

.home-faq__chevron {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.home-faq__q[aria-expanded="true"] .home-faq__chevron {
    transform: rotate(180deg);
    color: var(--cyan);
}

.home-faq__a {
    padding: 0 1.25rem 1rem;
    background: rgba(255,255,255,0.02);
}

.home-faq__a p {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
}

/* ---- Final CTA ----------------------------------------------------------- */
.home-final-cta {
    background: linear-gradient(135deg, rgba(46,91,255,0.18), rgba(0,194,232,0.07));
    border: 1px solid rgba(46,91,255,0.3);
    border-radius: 16px;
    padding: 2.5rem 2rem;
}

.home-final-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.home-final-cta__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--white);
    margin: 0 0 0.3rem;
}

.home-final-cta__sub {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0;
}

.home-final-cta__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .home-final-cta__inner { flex-direction: column; align-items: flex-start; }
    .home-final-cta__actions { width: 100%; flex-direction: column; }
    .home-final-cta__actions .btn-hero-p,
    .home-final-cta__actions .btn-hero-s { width: 100%; text-align: center; justify-content: center; }
}

/* ---- Floating mobile CTA bar --------------------------------------------- */
.mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--navy2, #111328);
    border-top: 1px solid var(--border);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-cta-bar__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    padding: 10px 8px 8px;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-right: 1px solid var(--border);
    transition: background 0.15s;
}

.mobile-cta-bar__btn:last-child { border-right: none; }

.mobile-cta-bar__btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mobile-cta-bar__btn--call    { color: var(--white); }
.mobile-cta-bar__btn--call:hover { background: rgba(255,255,255,0.06); }

.mobile-cta-bar__btn--whatsapp    { color: #4ade80; }
.mobile-cta-bar__btn--whatsapp:hover { background: rgba(74,222,128,0.08); }

.mobile-cta-bar__btn--book    { color: var(--blue, #2e5bff); }
.mobile-cta-bar__btn--book:hover { background: rgba(46,91,255,0.1); }

/* Show mobile bar + add body padding only on small screens */
@media (max-width: 767px) {
    .mobile-cta-bar {
        display: flex;
        flex-direction: row;
    }
    /* Prevent content hiding behind the bar */
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
}

/* ---- Local landing page shared styles ------------------------------------ */
.local-hero {
    padding: 2.5rem 0 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}

.local-hero__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 0.5rem;
}

.local-hero__title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.2;
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.local-hero__sub {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.65;
    max-width: 600px;
    margin-bottom: 1.5rem;
}

.local-hero__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.local-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.local-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 4px 12px;
}

.local-trust-pill--green {
    color: #4ade80;
    background: rgba(74,222,128,0.08);
    border-color: rgba(74,222,128,0.25);
}

.local-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}

.local-content__main { min-width: 0; }

.local-content__sidebar {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.local-cta-card {
    background: linear-gradient(135deg, rgba(46,91,255,0.15), rgba(0,194,232,0.06));
    border: 1px solid rgba(46,91,255,0.3);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
}

.local-cta-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 0.4rem;
}

.local-cta-card__sub {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0 0 1.25rem;
    line-height: 1.55;
}

.local-cta-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.local-price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.local-price-table th,
.local-price-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.local-price-table th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(255,255,255,0.03);
}

.local-price-table td { color: var(--white); }

.local-price-table td:last-child {
    text-align: right;
    font-weight: 700;
    color: var(--cyan);
}

.local-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    margin: 2rem 0 0.75rem;
}

.local-section-title:first-child { margin-top: 0; }

.local-prose p {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.75;
    margin: 0 0 0.85rem;
}

.local-prose a {
    color: var(--cyan);
    text-decoration: none;
}

.local-prose a:hover { text-decoration: underline; }

.local-faq {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin: 1.5rem 0;
}

.local-faq__item { border-bottom: 1px solid var(--border); }
.local-faq__item:last-child { border-bottom: none; }

.local-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    background: transparent;
    border: none;
    padding: 1rem 1.25rem;
    color: var(--white);
    font-family: var(--font-family);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.local-faq__q:hover { background: rgba(255,255,255,0.03); }

.local-faq__q[aria-expanded="true"] { background: rgba(255,255,255,0.04); }

.local-faq__chevron {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.local-faq__q[aria-expanded="true"] .local-faq__chevron {
    transform: rotate(180deg);
    color: var(--cyan);
}

.local-faq__a { padding: 0 1.25rem 1rem; background: rgba(255,255,255,0.02); }

.local-faq__a p {
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .local-content { grid-template-columns: 1fr; }
    .local-content__sidebar { position: static; }
}

/* ============================================================
   Phone model pages — pm-* components
   ============================================================ */

/* Trust pills */
.pm-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}
.pm-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 99px;
    font-size: 0.78rem;
    color: var(--muted);
}
.pm-trust-pill--green { color: #4ade80; border-color: rgba(74,222,128,0.3); }

/* Search box */
.pm-search-wrap { margin: 1.25rem 0; }
.pm-search-input {
    width: 100%;
    max-width: 420px;
    padding: 0.65rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--white);
    font-size: 0.9rem;
    font-family: var(--font-family);
    outline: none;
    transition: border-color 0.15s;
}
.pm-search-input:focus { border-color: var(--blue); }
.pm-search-hint { font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; }

/* Model groups */
.pm-model-group { margin-bottom: 2rem; }
.pm-model-group__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
}

/* Model card grid */
.pm-model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 0.75rem;
}
.pm-model-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--white);
    transition: border-color 0.15s, transform 0.12s;
}
.pm-model-card:hover {
    border-color: var(--blue);
    transform: translateY(-2px);
}
.pm-model-card__name { font-size: 0.9rem; font-weight: 700; }
.pm-model-card__year { font-size: 0.75rem; color: var(--muted); }
.pm-model-card__from { font-size: 0.78rem; color: var(--cyan); margin-top: 0.15rem; }
.pm-model-card__repairs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}
.pm-model-card__tag {
    font-size: 0.68rem;
    padding: 0.15rem 0.45rem;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    color: var(--muted);
}
.pm-model-card__arrow {
    font-size: 0.75rem;
    color: var(--blue);
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Repair cards (model detail page) */
.pm-repair-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.pm-repair-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    gap: 0.5rem;
}
.pm-repair-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}
.pm-repair-card__name { font-size: 0.95rem; font-weight: 700; }
.pm-repair-card__price { font-size: 1.25rem; font-weight: 800; color: var(--cyan); white-space: nowrap; }
.pm-repair-card__desc { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin: 0; flex: 1; }
.pm-repair-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.pm-repair-card__time,
.pm-repair-card__warranty {
    font-size: 0.75rem;
    color: var(--muted);
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
}
.pm-repair-card__note { font-size: 0.72rem; color: var(--muted); font-style: italic; }
.pm-repair-card__btn { margin-top: 0.75rem; text-align: center; }
.pm-price-note { font-size: 0.75rem; color: var(--muted); margin-bottom: 1.5rem; }

@media (max-width: 600px) {
    .pm-repair-cards { grid-template-columns: 1fr; }
    .pm-model-grid { grid-template-columns: repeat(2, 1fr); }
}


/* =============================================================================
   MOBILE RESPONSIVE OVERRIDES
   Desktop layout, colours and spacing are unchanged.
   These rules only activate on screens <= 768 px and narrower.
   ============================================================================= */

/* -- 1. Global safety -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 768px) {
  img, video, iframe, embed, object { max-width: 100%; height: auto; }
  .main, .container, .section-inner, .page-container, .content-wrap {
    min-width: 0;
    word-break: break-word;
  }
}

/* -- 2. Topbar --------------------------------------------------------------- */
/* style.css already wraps search to its own row at <=760px.
   Here we trim clutter on phones. */
@media (max-width: 600px) {
  .topbar-phone { display: none; }
  .icon-btn[title="Shop"],
  .icon-btn[title="Track repair"],
  .icon-btn[aria-label="Track repair"],
  .icon-btn[title="Admin panel"],
  .icon-btn[aria-label="Admin"] { display: none; }
}

@media (max-width: 480px) {
  .topbar-inner { gap: 0.4rem; padding-inline: 0.75rem; }
  .logo-text { font-size: 0.95rem; }
  /* Account button: avatar only on very small screens */
  .account-btn .account-name,
  .account-btn > span:not(.account-avatar) { display: none; }
}

/* -- 3. Category nav --------------------------------------------------------- */
@media (max-width: 600px) {
  .cat-nav-inner { padding-inline: 0.75rem; }
  .cat-item       { padding: 0.55rem 0.8rem; }
  .cat-label      { font-size: 0.82rem; }
}

/* -- 4. Main container padding ----------------------------------------------- */
@media (max-width: 600px) {
  .main { padding: 1rem 0.9rem 2rem; }
}

/* -- 5. Forms: stack at 600 px (was 480 px) ---------------------------------- */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr !important; }
  .form-group select,
  .form-group input,
  .form-group textarea { width: 100%; max-width: 100%; }
}

/* -- 6. Tables: horizontal scroll on mobile ---------------------------------- */
@media (max-width: 768px) {
  .admin-table,
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 500px;
  }
  /* Remove the negative-margin edge-bleed that forces horizontal overflow */
  .card .admin-table,
  .card .data-table {
    margin-inline: 0 !important;
    width: 100% !important;
  }
  /* Let cards containing tables scroll horizontally */
  .card:has(.admin-table),
  .card:has(.data-table) {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  /* Local SEO pricing tables */
  .local-price-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 360px;
  }
  /* Cart */
  .cart-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 420px;
  }
  /* Reports / Finance */
  .report-table,
  .finance-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 480px;
  }
  .data-table-wrap,
  .cal-grid-wrap { overflow-x: auto; }
}

/* -- 7. Grids: collapse on small screens ------------------------------------- */
@media (max-width: 600px) {
  /* Service-grid icon row: 6 -> 3 at 900px already, now 3 at 600px (stays readable) */
  .service-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .trust-bar    { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  .service-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .how-grid     { grid-template-columns: 1fr !important; }
}

@media (max-width: 360px) {
  .product-grid { grid-template-columns: 1fr !important; }
}

/* -- 8. Hero banner (dark-gradient 2-col on shop/dashboard) ------------------ */
@media (max-width: 768px) {
  .hero-banner {
    grid-template-columns: 1fr !important;
    padding: 1.75rem 1.25rem !important;
    min-height: 0 !important;
  }
  .hero-banner .hero-stats { display: none; }
}

/* -- 9. Homepage hero inner -------------------------------------------------- */
@media (max-width: 768px) {
  .home-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .home-hero__visual { display: none; }
}

/* -- 10. Local SEO pages: sidebar stacks below content ----------------------- */
@media (max-width: 768px) {
  .local-content {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .local-content__sidebar {
    position: static !important;
    top: auto !important;
  }
  .local-hero__sub { max-width: 100%; }
}

@media (max-width: 600px) {
  .local-hero { padding: 1.5rem 0 1rem; }
  .local-hero__title { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  .local-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .local-hero__actions a { text-align: center; justify-content: center; }
}

/* -- 11. Page hero actions: stack on small phones ---------------------------- */
@media (max-width: 480px) {
  .page-hero { padding: 1.5rem 1rem 1.25rem !important; }
  .page-hero__title { font-size: clamp(1.5rem, 6.5vw, 2.4rem) !important; }
  .page-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .page-hero__actions a { text-align: center; justify-content: center; }
}

/* -- 12. Repair pages -------------------------------------------------------- */
@media (max-width: 600px) {
  .repair-brand-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .repair-services-grid { grid-template-columns: 1fr !important; }
}

/* -- 13. Booking page -------------------------------------------------------- */
/* booking-layout already 1-col at 860px */
@media (max-width: 560px) {
  .booking-layout__aside { grid-template-columns: 1fr !important; }
}

/* -- 14. Shop sidebar ------------------------------------------------------- */
@media (max-width: 767px) {
  .shop-filter-toggle { display: flex; }
  .shop-sidebar { max-width: 90vw; }
}

/* -- 15. Admin pages --------------------------------------------------------- */
@media (max-width: 768px) {
  .admin-heading { font-size: 1.15rem; flex-wrap: wrap; }
  .admin-toolbar { gap: 0.75rem; }
  .toolbar-actions { flex-wrap: wrap; width: 100%; }
  .toolbar-filters { flex-wrap: wrap; width: 100%; }
  .toolbar-filters select,
  .toolbar-filters input[type="text"],
  .toolbar-filters input[type="search"],
  .toolbar-filters input[type="date"] {
    min-width: 0;
    flex: 1 1 140px;
    max-width: 100%;
  }
  .kpi-card { min-width: 0; }
  .ticket-layout,
  .ticket-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .kpi-strip       { grid-template-columns: 1fr 1fr !important; }
  .finance-summary { grid-template-columns: 1fr 1fr !important; }
}

/* -- 16. Footer -------------------------------------------------------------- */
/* style.css already sets flex-direction:column at <=760px */
@media (max-width: 600px) {
  .footer-bar   { padding: 1rem 0.9rem; gap: 1rem; }
  .footer-links { gap: 0.5rem 1rem; }
  .footer-info  { gap: 0.2rem; }
}

/* -- 17. Mobile CTA bar + safe padding for nav bar -------------------------- */
@media (max-width: 600px) {
  .mobile-cta-bar { display: flex; }
  /* Push public-page content clear of the fixed mobile CTA bar.
     Admin/tech pages don't render the CTA bar so no extra padding needed. */
  body:not(.admin-page):not(.tech-portal-body) .site-main { padding-bottom: 72px; }
}

/* -- 18. Chat widget: shift above mobile CTA bar ---------------------------- */
@media (max-width: 600px) {
  .chat-fab    { bottom: 80px; right: 1rem; }
  .chat-widget {
    bottom: 140px;
    right: 1rem;
    width: calc(100vw - 2rem);
    max-width: 360px;
  }
}

/* -- 19. Announcement banner ------------------------------------------------- */
@media (max-width: 600px) {
  .tc-banner { font-size: 0.78rem; }
}

/* -- 20. Product detail page ------------------------------------------------- */
@media (max-width: 768px) {
  .product-detail-layout,
  .prod-detail-grid { grid-template-columns: 1fr !important; }
}

/* -- 21. Phone repair model pages -------------------------------------------- */
@media (max-width: 600px) {
  .pm-repair-cards { grid-template-columns: 1fr !important; }
  .pm-model-grid   { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 360px) {
  .pm-model-grid { grid-template-columns: 1fr !important; }
}

/* -- 22. Buttons on smallest phones ----------------------------------------- */
@media (max-width: 360px) {
  .btn-hero-p,
  .btn-hero-s { padding: 0.6rem 1rem; font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IT SERVICES PAGES — repairs/computers + drill-down pages
   Classes: it-tab-nav, it-services-grid, it-service-card, it-pricing-table,
            it-spotlight-grid, it-brand-chips, it-badge, it-faq, etc.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Category tab nav ─────────────────────────────────────────────────────── */
.it-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.it-tab-btn {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.it-tab-btn:hover {
  background: rgba(46,91,255,0.12);
  border-color: rgba(46,91,255,0.35);
  color: var(--white);
}

.it-tab-btn.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ── Category section ─────────────────────────────────────────────────────── */
.it-category-section { margin-bottom: 2rem; }
.it-category-section.hidden { display: none; }

.it-category-header { margin-bottom: 1.5rem; }
.it-category-title  { font-size: 1.25rem; font-weight: 700; color: var(--white); margin: 0 0 0.35rem; }
.it-category-desc   { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ── Service card grid ────────────────────────────────────────────────────── */
.it-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.it-service-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.it-service-card:hover {
  border-color: rgba(46,91,255,0.35);
  box-shadow: 0 4px 20px rgba(46,91,255,0.08);
}

.it-service-card__name {
  color: var(--white);
  font-size: 0.975rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.it-service-card__desc {
  color: var(--muted);
  font-size: 0.85rem;
  flex: 1;
  line-height: 1.5;
  margin: 0 0 0.9rem;
}

.it-service-card__price {
  color: var(--cyan);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.it-service-card__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.it-service-card__link {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--cyan);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.it-service-card__link:hover {
  background: rgba(0,194,232,0.1);
  border-color: var(--cyan);
}

/* ── Service badges ───────────────────────────────────────────────────────── */
.it-badge {
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
}

.it-badge--nfnf {
  background: rgba(16,185,129,0.15);
  color: #34d399;
}

.it-badge--diag {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
}

.it-badge--time {
  background: rgba(99,102,241,0.12);
  color: #a5b4fc;
}

/* ── Drill-down spotlight grid ────────────────────────────────────────────── */
.it-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.it-spotlight-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--white);
  padding: 1.25rem 1.25rem 1rem;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.it-spotlight-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.it-spotlight-card__icon {
  font-size: 1.6rem;
  margin-bottom: 0.65rem;
}

.it-spotlight-card__title {
  color: var(--white);
  font-size: 0.975rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.it-spotlight-card__desc {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
  margin: 0;
}

/* ── Brand chips ──────────────────────────────────────────────────────────── */
.it-brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.it-brand-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.3rem 0.8rem;
}

/* ── Pricing table ────────────────────────────────────────────────────────── */
.it-pricing-table-wrap {
  border-radius: 12px;
  margin-bottom: 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.it-pricing-table {
  border-collapse: collapse;
  min-width: 540px;
  width: 100%;
}

.it-pricing-table th {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.65rem 1rem;
  text-align: left;
  text-transform: uppercase;
}

.it-pricing-table td {
  border-bottom: 1px solid var(--border);
  color: var(--white);
  font-size: 0.875rem;
  padding: 0.7rem 1rem;
  vertical-align: top;
}

.it-pricing-table tr:last-child td { border-bottom: none; }

.it-pricing-table tr:hover td { background: rgba(255,255,255,0.025); }

.it-pricing-table .price-col {
  color: var(--cyan);
  font-weight: 700;
  white-space: nowrap;
}

.it-pricing-table .notes-col { color: var(--muted); font-size: 0.82rem; }

/* ── Info/callout boxes ───────────────────────────────────────────────────── */
.it-nfnf-box,
.it-notice-box,
.it-callout-box {
  border-radius: 12px;
  margin-bottom: 2rem;
  padding: 1.1rem 1.25rem;
}

.it-nfnf-box {
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.25);
  color: #6ee7b7;
}

.it-notice-box {
  background: rgba(251,191,36,0.07);
  border: 1px solid rgba(251,191,36,0.25);
  color: #fde68a;
}

.it-callout-box {
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.25);
  color: #c7d2fe;
}

.it-nfnf-box strong,
.it-notice-box strong,
.it-callout-box strong { font-weight: 700; }

/* ── Process steps ────────────────────────────────────────────────────────── */
.it-process-steps {
  counter-reset: steps;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.it-process-steps li {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  counter-increment: steps;
  padding: 0.9rem 1rem 0.9rem 3rem;
  position: relative;
}

.it-process-steps li::before {
  align-items: center;
  background: var(--blue);
  border-radius: 50%;
  color: #fff;
  content: counter(steps);
  display: flex;
  font-size: 0.75rem;
  font-weight: 700;
  height: 1.6rem;
  justify-content: center;
  left: 0.75rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
}

/* ── Symptom/included lists ───────────────────────────────────────────────── */
.it-symptoms-list,
.it-included-list {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.it-symptoms-list li,
.it-included-list li {
  color: var(--muted);
  font-size: 0.88rem;
  padding-left: 1.4rem;
  position: relative;
}

.it-symptoms-list li::before {
  color: #f87171;
  content: '✕';
  font-size: 0.75rem;
  left: 0;
  position: absolute;
  top: 0.05rem;
}

.it-included-list li::before {
  color: #34d399;
  content: '✓';
  font-size: 0.8rem;
  font-weight: 700;
  left: 0;
  position: absolute;
  top: 0.05rem;
}

/* ── SSD size guide ───────────────────────────────────────────────────────── */
.it-size-guide {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.87rem;
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
}

.it-size-guide strong { color: var(--white); }

/* ── FAQ (dl/dt/dd) ───────────────────────────────────────────────────────── */
.it-faq {
  display: grid;
  gap: 0;
  margin: 0 0 2rem;
}

.it-faq dt {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  color: var(--white);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  margin-top: 0.5rem;
  padding: 0.9rem 1.1rem;
}

.it-faq dt:first-of-type { margin-top: 0; }

.it-faq dd {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0 0 10px 10px;
  border-top: none;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 0;
  padding: 0.9rem 1.1rem;
}

/* ── Section sub-headings on drill-down pages ─────────────────────────────── */
.it-section-title {
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.it-section-lead {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}

/* ── Mobile responsive overrides ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .it-services-grid       { grid-template-columns: 1fr; }
  .it-spotlight-grid      { grid-template-columns: 1fr 1fr; }
  .it-process-steps       { grid-template-columns: 1fr; }
  .it-symptoms-list,
  .it-included-list       { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .it-spotlight-grid      { grid-template-columns: 1fr; }
  .it-tab-btn             { font-size: 0.8rem; padding: 0.4rem 0.75rem; }
}

/* ==========================================================================
   Stage 1 — Payments, Quotes, Quote Builder (migration 049)
   ========================================================================== */

/* ── KPI card warning state ──────────────────────────────────────────────── */
.kpi-card--warn .kpi-card__value { color: #f59e0b; }

/* ── Quick-action status buttons on ticket page ──────────────────────────── */
.quick-status-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── Quote builder: line-item rows ──────────────────────────────────────── */
.quote-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ── Quote totals table ──────────────────────────────────────────────────── */
.quote-totals-table {
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 220px;
}

.quote-totals-table td {
  padding: 3px 8px;
  color: var(--muted);
  text-align: right;
}

.quote-totals-table td:first-child {
  text-align: left;
  color: var(--muted);
}

.quote-totals-table__grand td {
  font-size: 1.05rem;
  color: var(--white);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

/* ── Public quote approval page ──────────────────────────────────────────── */
/* Reuses existing it-pricing-table, it-callout-box, it-nfnf-box, page-hero */

/* ── track.php payment/quote panels ─────────────────────────────────────── */
/* Reuses .track-details / .booking-detail which already exist */

/* ── Admin quote list ────────────────────────────────────────────────────── */
/* Reuses .data-table / .table-wrap */

/* ── Notification queue (cron status) ───────────────────────────────────── */
/* No new CSS needed – admin tables handle it */

/* =============================================================================
   QUOTE BUILDER — guided walk-in workflow  (admin/quote_builder.php)
   ============================================================================= */

.qb-content { max-width: 1280px; }

/* Stage banner */
.qb-stage-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem var(--space-4); border-radius: 10px;
  margin-bottom: var(--space-4); font-size: .85rem; gap: var(--space-3);
}
.qb-stage-banner-blue   { background: rgba(46,91,255,.1);  border: 1px solid rgba(46,91,255,.3); }
.qb-stage-banner-orange { background: rgba(255,152,0,.1);  border: 1px solid rgba(255,152,0,.3); }
.qb-stage-banner__label { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.qb-stage-banner__action { color: var(--blue); font-weight: 700; }
.qb-stage-banner-orange .qb-stage-banner__action { color: #ff9800; }
.qb-stage-banner__next  { color: var(--muted); margin-left: auto; font-size: .8rem; }

/* Step indicator */
.qb-steps {
  display: flex; align-items: center; gap: 0;
  margin-bottom: var(--space-5);
}
.qb-step-item  { display: flex; align-items: center; gap: var(--space-2); }
.qb-step-dot {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; flex-shrink: 0;
  background: var(--card-bg); border: 2px solid var(--border); color: var(--muted);
  transition: background .2s, border-color .2s, color .2s;
}
.qb-step-dot.is-active { background: var(--blue);  border-color: var(--blue); color: #fff; }
.qb-step-dot.is-done   { background: #22c55e; border-color: #22c55e; color: #fff; }
.qb-step-label { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.qb-step-label.is-active { color: var(--white); font-weight: 600; }
.qb-step-line  { flex: 1; height: 2px; background: var(--border); margin: 0 var(--space-2); transition: background .2s; }
.qb-step-line.is-done { background: #22c55e; }

/* Layout */
.qb-wrap { display: grid; grid-template-columns: 1fr 310px; gap: var(--space-5); align-items: start; }
@media (max-width: 1100px) { .qb-wrap { grid-template-columns: 1fr; } }

/* Section headings inside panels */
.qb-section-title { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: var(--space-2); }
.qb-section-sub   { font-size: .85rem; color: var(--muted); margin-bottom: var(--space-3); }

/* Step panels */
.qb-panel { display: none; }
.qb-panel.is-active { display: block; }

/* Customer search */
.qb-search-wrap { position: relative; margin-bottom: var(--space-3); }
.qb-search-input {
  width: 100%; padding: .75rem 1rem;
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 10px;
  color: var(--white); font-size: 1rem; font-family: var(--font-family);
  transition: border-color .15s;
}
.qb-search-input:focus { outline: none; border-color: var(--blue); }
.qb-search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--navy2); border: 1px solid var(--border); border-radius: 10px;
  z-index: 60; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.55);
}
.qb-search-result {
  padding: .7rem 1rem; cursor: pointer; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  transition: background .1s;
}
.qb-search-result:last-child { border-bottom: none; }
.qb-search-result:hover { background: rgba(46,91,255,.15); }
.qb-search-result__name { font-weight: 600; font-size: .9rem; color: var(--white); }
.qb-search-result__meta { font-size: .8rem; color: var(--muted); }

/* Selected customer badge */
.qb-selected-customer {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3); background: rgba(46,91,255,.1);
  border: 1px solid rgba(46,91,255,.3); border-radius: 8px; margin-bottom: var(--space-3);
  font-size: .9rem;
}
.qb-selected-customer span:first-child { font-weight: 600; color: var(--white); }
.qb-clear-btn {
  margin-left: auto; font-size: .78rem; color: var(--muted); background: none;
  border: none; cursor: pointer; font-family: var(--font-family); padding: 0;
}
.qb-clear-btn:hover { color: var(--white); }

/* Selected device badge */
.qb-selected-device {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  background: rgba(0,194,232,.08); border: 1px solid rgba(0,194,232,.25); border-radius: 8px;
  font-size: .9rem; font-weight: 600; color: var(--cyan);
}

/* Device category tiles */
.qb-cat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
  margin-bottom: var(--space-2);
}
@media (max-width: 700px) { .qb-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .qb-cat-grid { grid-template-columns: repeat(2, 1fr); } }
.qb-cat-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--space-3) var(--space-2);
  background: var(--card-bg); border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; color: var(--muted); font-size: .8rem; font-weight: 600;
  font-family: var(--font-family); text-align: center;
  transition: border-color .15s, color .15s, background .15s;
}
.qb-cat-btn:hover { border-color: var(--blue); color: var(--white); }
.qb-cat-btn.is-selected {
  border-color: var(--blue); background: rgba(46,91,255,.12); color: var(--white);
}
.qb-cat-btn__icon { font-size: 1.9rem; line-height: 1; }

/* Service quick-select tiles */
.qb-svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
  margin-bottom: var(--space-2);
}
@media (max-width: 700px) { .qb-svc-grid { grid-template-columns: repeat(2, 1fr); } }
.qb-svc-btn {
  display: flex; flex-direction: column; gap: 4px; padding: var(--space-3);
  background: var(--card-bg); border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; text-align: left; font-family: var(--font-family);
  transition: border-color .15s, background .15s;
}
.qb-svc-btn:hover   { border-color: var(--blue); }
.qb-svc-btn.is-selected { border-color: var(--blue); background: rgba(46,91,255,.12); }
.qb-svc-btn__name  { font-weight: 600; font-size: .9rem; color: var(--white); }
.qb-svc-btn__price { font-size: .9rem; color: var(--cyan); font-weight: 700; }
.qb-svc-btn__time  { font-size: .75rem; color: var(--muted); }

/* Context bar (step 2) */
.qb-ctx-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: var(--space-3); font-size: .9rem;
}
.qb-ctx-bar > span:first-child { font-weight: 600; color: var(--white); }
.qb-ctx-sep { color: rgba(255,255,255,0.25); }

/* Line item rows */
.qb-line {
  display: grid; grid-template-columns: 88px 1fr 58px 90px 28px;
  gap: var(--space-1); align-items: center; margin-bottom: var(--space-2);
}
@media (max-width: 640px) { .qb-line { grid-template-columns: 72px 1fr 50px 78px 24px; } }
.qb-remove-line {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); cursor: pointer; font-size: .8rem; font-family: var(--font-family);
  transition: color .15s, border-color .15s;
}
.qb-remove-line:hover { color: #ef4444; border-color: #ef4444; }

/* Navigation row */
.qb-nav-row {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--space-3);
}
.qb-present-btn { min-width: 200px; }

/* Existing quote actions */
.qb-existing-actions {
  display: flex; gap: var(--space-2); justify-content: flex-end;
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* Summary sidebar */
.qb-summary {
  position: sticky; top: 80px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  padding: var(--space-4);
}
.qb-summary__title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: var(--space-3);
}
.qb-summary__device {
  font-size: .9rem; font-weight: 600; color: var(--cyan);
  margin-bottom: var(--space-3); padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.qb-summary__empty { color: var(--muted); font-size: .85rem; padding: var(--space-2) 0; }
.qb-summary__row {
  display: flex; justify-content: space-between; padding: .35rem 0;
  border-bottom: 1px solid var(--border); font-size: .88rem;
}
.qb-summary__row:last-child { border-bottom: none; }
.qb-summary__row label { color: var(--muted); }
.qb-summary__row span  { font-weight: 600; color: var(--white); }
.qb-summary__total {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 2px solid var(--border);
  display: flex; justify-content: space-between; align-items: baseline;
}
.qb-summary__total-label { font-weight: 700; font-size: .9rem; color: var(--white); }
.qb-summary__total-value { font-size: 1.7rem; font-weight: 800; color: var(--cyan); }
.qb-summary__deposit {
  margin-top: var(--space-2); background: rgba(46,91,255,.08);
  border-radius: 8px; padding: var(--space-2) var(--space-3); font-size: .82rem;
}
.qb-summary__deposit label { color: var(--muted); }
.qb-summary__deposit span  { color: var(--white); font-weight: 600; }
.qb-summary__turnaround {
  margin-top: var(--space-2); display: flex; justify-content: space-between;
  font-size: .82rem; padding: var(--space-1) 0;
}
.qb-summary__turnaround label { color: var(--muted); }
.qb-summary__turnaround span  { color: var(--white); font-weight: 600; }
.qb-summary__present-btn {
  margin-top: var(--space-3); width: 100%; padding: .8rem;
  background: var(--blue); color: #fff; border: none; border-radius: 10px;
  font-size: .95rem; font-weight: 700; cursor: pointer;
  font-family: var(--font-family); transition: background .15s;
}
.qb-summary__present-btn:hover { background: var(--blue-h); }
.qb-summary__note { font-size: .72rem; color: var(--muted); margin-top: var(--space-2); text-align: center; }

/* Customer repair history */
.qb-history { margin-top: var(--space-3); }
.qb-history__title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: var(--space-2);
}
.qb-history-item {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--space-2) var(--space-3); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: var(--space-1); font-size: .82rem;
}
.qb-history-item__ref  { color: var(--cyan); font-weight: 600; }
.qb-history-item__desc { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.qb-history-item__date { color: var(--muted); font-size: .75rem; white-space: nowrap; margin-left: var(--space-2); }

/* Presentation card (step 3) */
.qb-present-card { background: var(--navy2) !important; }
.qb-present-device  { font-size: 1rem; color: var(--muted); margin-bottom: var(--space-2); font-weight: 600; }
.qb-present-breakdown {
  display: inline-flex; flex-direction: column; gap: 4px;
  margin-bottom: var(--space-3); min-width: 220px;
}
.qb-bd-row {
  display: flex; justify-content: space-between; gap: var(--space-4);
  font-size: .9rem; color: var(--muted);
}
.qb-bd-row span:last-child { font-weight: 600; color: var(--white); }
.qb-present-total-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 4px;
}
.qb-present-total  { font-size: 3.5rem; font-weight: 800; color: var(--cyan); line-height: 1; margin-bottom: var(--space-3); }
.qb-present-warranty { font-size: .8rem; color: var(--muted); }

/* Decision buttons */
.qb-decision__question {
  font-size: 1.2rem; font-weight: 700; color: var(--white); margin-bottom: var(--space-4);
}
.qb-decision-btns { display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; margin: 0 auto; }
.qb-decision-btn {
  padding: 1rem var(--space-4); border: none; border-radius: 12px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  font-family: var(--font-family); transition: opacity .15s, transform .1s;
}
.qb-decision-btn:active { transform: scale(.98); }
.qb-decision-btn--yes     { background: #22c55e; color: #fff; font-size: 1.1rem; padding: 1.1rem; }
.qb-decision-btn--think   { background: rgba(255,152,0,.12); border: 2px solid #ff9800; color: #ff9800; }
.qb-decision-btn--decline { background: rgba(239,68,68,.08); border: 2px solid rgba(239,68,68,.3); color: #ef4444; }
.qb-decision-btn:hover { opacity: .85; }

/* Payment section */
.qb-pay-section {
  padding: var(--space-4); background: var(--navy2);
  border: 1px solid var(--border); border-radius: 12px; margin-top: var(--space-4);
}
.qb-think-section, .qb-decline-section {
  padding: var(--space-4); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 12px; margin-top: var(--space-4);
}
.qb-pay-title    { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: var(--space-1); }
.qb-pay-subtitle { font-size: .85rem; color: var(--muted); margin-bottom: var(--space-3); }
.qb-pay-amount-row {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.qb-pay-amount-input {
  width: 110px; padding: .65rem .75rem;
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 8px;
  color: var(--white); font-size: 1.05rem; font-weight: 700; font-family: var(--font-family);
}
.qb-pay-quick { display: flex; gap: var(--space-1); }
.qb-pay-quick-btn {
  padding: .4rem .75rem; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 6px; color: var(--muted); font-size: .8rem; cursor: pointer;
  font-family: var(--font-family); transition: color .15s, border-color .15s;
}
.qb-pay-quick-btn:hover { color: var(--white); border-color: var(--blue); }
.qb-pay-btns {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
}
@media (max-width: 500px) { .qb-pay-btns { grid-template-columns: repeat(2, 1fr); } }
.qb-pay-btn {
  padding: .9rem var(--space-2); border: 2px solid var(--border); border-radius: 10px;
  background: var(--card-bg); color: var(--white); font-size: .85rem; font-weight: 600;
  cursor: pointer; font-family: var(--font-family); line-height: 1.5;
  transition: border-color .15s, background .15s;
}
.qb-pay-btn:hover { border-color: var(--blue); background: rgba(46,91,255,.1); }
.qb-pay-btn--later { opacity: .7; }

/* Decline reason buttons */
.qb-decline-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
@media (max-width: 500px) { .qb-decline-btns { grid-template-columns: repeat(2, 1fr); } }
.qb-decline-reason-btn {
  padding: .6rem var(--space-2); border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--navy2); color: var(--muted); font-size: .82rem;
  cursor: pointer; font-family: var(--font-family); transition: color .15s, border-color .15s;
}
.qb-decline-reason-btn:hover  { color: var(--white); border-color: var(--muted); }
.qb-decline-reason-btn.is-selected { border-color: #ef4444; color: #ef4444; }

/* ── flatpickr dark theme override ─────────────────────────────────────────── */
.flatpickr-calendar {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    font-family: 'Inter', sans-serif;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-monthDropdown-months {
    background: var(--navy2);
    color: var(--white);
}
.flatpickr-weekdays { background: var(--navy2); }
span.flatpickr-weekday { color: var(--muted); font-size: 0.72rem; }
.flatpickr-day { color: var(--white); border-radius: 6px; }
.flatpickr-day:hover { background: rgba(46,91,255,0.2); border-color: transparent; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.flatpickr-day.today { border-color: var(--cyan); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: rgba(255,255,255,0.2); }
.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: var(--muted); }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--white); }
.numInputWrapper span.arrowUp:after { border-bottom-color: var(--muted); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════════
   QUOTE BUILDER v2 — counter workflow  (qbv-* classes)
══════════════════════════════════════════════════════════════════════════════ */

/* ── Screens ─────────────────────────────────────────────────────────────── */
.qbv-screen { display: none; }
.qbv-screen.is-active { display: block; }
.qbv-screen-title {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.qbv-screen-sub { color: var(--muted); font-size: .9rem; margin-top: 4px; }

/* ── Device screen layout ────────────────────────────────────────────────── */
.qbv-device-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4); align-items: start;
}
@media (max-width: 860px) { .qbv-device-wrap { grid-template-columns: 1fr; } }
.qbv-device-left, .qbv-device-right { min-width: 0; }

/* ── Service list ────────────────────────────────────────────────────────── */
.qbv-svc-list { display: flex; flex-direction: column; gap: 4px; }
.qbv-svc-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: .7rem var(--space-3);
  background: var(--navy); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.qbv-svc-row:hover { border-color: var(--blue); background: rgba(46,91,255,.08); }
.qbv-svc-row__left  { flex: 1; min-width: 0; }
.qbv-svc-row__name  { font-weight: 600; font-size: .9rem; color: var(--white); }
.qbv-svc-row__meta  { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.qbv-svc-row__price { font-size: 1.05rem; font-weight: 700; color: var(--cyan); white-space: nowrap; }

/* ── Preview screen layout ───────────────────────────────────────────────── */
.qbv-preview-wrap {
  display: grid; grid-template-columns: 1fr 380px;
  gap: var(--space-4); align-items: start;
  margin-bottom: var(--space-4);
}
@media (max-width: 960px) { .qbv-preview-wrap { grid-template-columns: 1fr; } }
.qbv-preview-sidebar { min-width: 0; }

/* ── Quote card — customer-facing ────────────────────────────────────────── */
.qbv-quote-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  padding: var(--space-5) var(--space-5) var(--space-4);
}
.qbv-quote-repair { font-size: 1.5rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.qbv-quote-device-lbl { font-size: .9rem; color: var(--muted); margin-bottom: var(--space-3); }
.qbv-quote-price {
  font-size: 3rem; font-weight: 800; color: var(--cyan);
  letter-spacing: -.02em; line-height: 1; margin-bottom: var(--space-3);
}
.qbv-was-price { font-size: 1.1rem; color: var(--muted); text-decoration: line-through; display: block; margin-bottom: 4px; }

/* ── Discount badge ──────────────────────────────────────────────────────── */
.qbv-discount-badge {
  display: flex; align-items: center; gap: 8px;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35);
  border-radius: 8px; padding: .4rem .75rem; margin-bottom: var(--space-2);
  font-size: .88rem;
}
.qbv-discount-badge__was    { color: var(--muted); text-decoration: line-through; }
.qbv-discount-badge__arrow  { color: #f59e0b; }
.qbv-discount-badge__reason { color: #f59e0b; font-weight: 600; }

/* ── Meta grid (turnaround / warranty / stock / tech) ────────────────────── */
.qbv-meta-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2);
  margin-top: var(--space-2);
}
@media (max-width: 560px) { .qbv-meta-grid { grid-template-columns: 1fr; } }
.qbv-meta-item { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.qbv-meta-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; }

/* ── Sidebar totals ──────────────────────────────────────────────────────── */
.qbv-totals-row {
  border-top: 1px solid var(--border); margin-top: var(--space-3);
  padding-top: var(--space-2); display: flex; flex-direction: column; gap: 4px;
}
.qbv-totals-subtotal { font-size: .85rem; color: var(--muted); }
.qbv-totals-final    { font-size: 1.1rem; font-weight: 700; color: var(--cyan); }

/* ── Quote line inputs ───────────────────────────────────────────────────── */
.qbv-line-desc  { flex: 1; }
.qbv-line-qty   { width: 60px !important; min-width: 0; }
.qbv-line-price { width: 76px !important; min-width: 0; }

/* ── 7-button action bar ─────────────────────────────────────────────────── */
.qbv-action-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-3) 0; margin-bottom: var(--space-3);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.qbv-action-btn {
  padding: .65rem 1rem; border-radius: 9px; border: 1.5px solid var(--border);
  background: var(--card-bg); color: var(--white); font-size: .85rem; font-weight: 600;
  cursor: pointer; font-family: var(--font-family); line-height: 1.3;
  transition: border-color .15s, background .15s, color .15s; white-space: nowrap;
}
.qbv-action-btn:hover { border-color: var(--blue); background: rgba(46,91,255,.1); }
.qbv-action-btn--decline  { border-color: rgba(239,68,68,.4);  color: #f87171; }
.qbv-action-btn--decline:hover  { background: rgba(239,68,68,.1);  border-color: #ef4444; color: #f87171; }
.qbv-action-btn--discount { border-color: rgba(245,158,11,.4); color: #fbbf24; }
.qbv-action-btn--discount:hover { background: rgba(245,158,11,.1); border-color: #f59e0b; color: #fbbf24; }
.qbv-action-btn--save:hover  { background: rgba(46,91,255,.12); border-color: var(--blue); }
.qbv-action-btn--book:hover  { background: rgba(46,91,255,.12); border-color: var(--blue); }
.qbv-action-btn--ahead { border-color: rgba(34,197,94,.4);  color: #4ade80; }
.qbv-action-btn--ahead:hover { background: rgba(34,197,94,.12); border-color: #22c55e; color: #4ade80; }
.qbv-action-btn--send  { border-color: rgba(0,194,232,.4);  color: var(--cyan); }
.qbv-action-btn--send:hover  { background: rgba(0,194,232,.08); border-color: var(--cyan); color: var(--cyan); }

/* ── Inline action panels ────────────────────────────────────────────────── */
.qbv-inline-panel {
  display: none;
  background: var(--navy2); border: 1px solid var(--border); border-radius: 12px;
  padding: var(--space-4); margin-bottom: var(--space-3);
}
.qbv-inline-panel.is-active { display: block; }
.qbv-panel-title {
  font-size: 1.05rem; font-weight: 700; margin-bottom: var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--border);
}
.qbv-panel-title--red    { color: #f87171; border-color: rgba(239,68,68,.25); }
.qbv-panel-title--orange { color: #fbbf24; border-color: rgba(245,158,11,.25); }
.qbv-panel-title--blue   { color: #7da4ff; border-color: rgba(46,91,255,.25); }
.qbv-panel-title--green  { color: #4ade80; border-color: rgba(34,197,94,.25); }

/* ── Decline reason grid ─────────────────────────────────────────────────── */
.qbv-decline-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
  margin-bottom: var(--space-3);
}
@media (max-width: 600px) { .qbv-decline-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Discount price display ──────────────────────────────────────────────── */
.qbv-discount-orig {
  font-size: 1.35rem; font-weight: 700; color: var(--muted); text-decoration: line-through;
}
.qbv-discount-new { font-size: 1.8rem; font-weight: 800; color: var(--cyan); }
.qbv-discount-label { font-size: .8rem; color: #fbbf24; margin-top: 2px; }

/* ── Payment block ───────────────────────────────────────────────────────── */
.qbv-payment-block {
  background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px;
  padding: var(--space-3); margin-bottom: var(--space-2);
}
.qbv-payment-block__title { font-weight: 600; font-size: .9rem; color: var(--white); margin-bottom: var(--space-2); }
.qbv-pay-amount-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }

/* ── Calendar datepicker ─────────────────────────────────────────────────── */
.qbv-dp-wrap { position: relative; display: inline-block; width: 100%; }
.qbv-dp-trigger {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px; cursor: pointer; text-align: left;
    background: var(--colour-surface, #1a1d2e); color: var(--colour-muted, #888);
    border: 1px solid var(--colour-border, rgba(255,255,255,0.1));
    font-size: 0.875rem; font-family: inherit; transition: border-color .15s;
}
.qbv-dp-trigger:hover { border-color: var(--blue, #2e5bff); }
.qbv-dp-trigger.has-value { color: var(--colour-text, #fff); }
.qbv-dp-trigger svg { flex-shrink: 0; opacity: .6; }

.qbv-calendar {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 600;
    background: var(--colour-surface-2, #111328);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px; padding: 14px; width: 300px;
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.qbv-cal-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.qbv-cal-title { font-size: .9rem; font-weight: 700; color: var(--colour-text, #fff); }
.qbv-cal-arrow {
    background: none; border: none; cursor: pointer; padding: 4px 10px;
    border-radius: 7px; font-size: 1rem; color: var(--colour-text, #fff);
    transition: background .12s;
}
.qbv-cal-arrow:hover { background: rgba(255,255,255,.1); }

.qbv-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.qbv-cal-dow {
    font-size: .65rem; font-weight: 700; text-align: center;
    color: var(--colour-muted, #888); padding: 3px 0 6px;
}
.qbv-cal-day {
    aspect-ratio: 1; width: 100%;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px; border: none; cursor: pointer; font-size: .8rem;
    background: none; color: var(--colour-text, #fff);
    transition: background .1s, color .1s;
}
.qbv-cal-day:hover:not([disabled]) { background: rgba(255,255,255,.1); }
.qbv-cal-day.is-today { color: var(--cyan, #00c2e8); font-weight: 700; }
.qbv-cal-day.is-selected {
    background: var(--blue, #2e5bff) !important; color: #fff !important; font-weight: 700;
}
.qbv-cal-day.is-closed { color: var(--red, #ef4444) !important; opacity: .35; cursor: not-allowed; }
.qbv-cal-day[disabled]:not(.is-closed) { opacity: .22; cursor: not-allowed; color: var(--colour-muted, #888); }
.qbv-cal-legend {
    font-size: .65rem; color: var(--colour-muted, #888);
    margin-top: 10px; text-align: center;
}

/* ── Slot picker ─────────────────────────────────────────────────────────── */
.qbv-slot-grid {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; min-height: 38px; align-items: flex-start;
}
.qbv-slot-hint { font-size: .82rem; color: var(--muted, #888); align-self: center; }
.qbv-slot-avail-msg { font-size: .78rem; color: var(--muted, #888); width: 100%; margin-bottom: 4px; }
.qbv-slot-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 14px; border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    background: var(--card-bg, #13162e); cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    white-space: nowrap;
}
.qbv-slot-btn:hover:not([disabled]) { border-color: var(--blue, #2e5bff); color: var(--blue, #2e5bff); }
.qbv-slot-btn.is-selected { background: var(--blue, #2e5bff); color: #fff; border-color: var(--blue, #2e5bff); }
.qbv-slot-btn--full { opacity: .45; cursor: not-allowed; }
.qbv-slot-time { font-size: .82rem; font-weight: 700; }
.qbv-slot-end  { font-size: .68rem; opacity: .75; }

/* ── Print layer ─────────────────────────────────────────────────────────── */
.qbv-print-layer { display: none; }
@media print {
  body { background: #fff !important; color: #111 !important; }
  .site-header, .site-footer, .admin-sidebar, .admin-topbar,
  form#qbv-form, .qbv-action-bar, .qbv-inline-panel, .qbv-screen { display: none !important; }
  .admin-content { padding: 0 !important; margin: 0 !important; }
  .qbv-print-layer { display: block !important; color: #111; background: #fff; }
  .qbv-print-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #222;
  }
  .qbv-print-logo { font-size: 1.4rem; font-weight: 800; }
  .qbv-print-meta { text-align: right; font-size: .8rem; line-height: 1.6; }
  .qbv-print-device { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
  .qbv-print-footer { margin-top: 16px; padding-top: 10px; border-top: 1px solid #bbb; font-size: .75rem; color: #666; }
}

/* ==========================================================================
   MOBILE NAVIGATION & HERO  (≤768 px)
   Hidden on desktop by default; switched on via media query below.
   Desktop layout is unchanged above 768 px.
   ========================================================================== */

/* Mobile-only elements: hidden by default on all screen sizes */
.mob-call-btn,
.mob-menu-btn { display: none; }

/* Call button */
.mob-call-btn {
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 9px;
  background: var(--blue);
  color: #fff !important;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  flex-shrink: 0;
  cursor: pointer;
}
.mob-call-btn:hover { background: var(--blue-h); }

/* Hamburger button */
.mob-menu-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--navy3);
  border: 1px solid var(--border);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--white);
  flex-shrink: 0;
}
.mob-menu-btn:hover { border-color: rgba(255,255,255,0.25); }

/* Dark overlay behind the panel */
.mob-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 199;
}
.mob-menu-overlay.is-open { display: block; }

/* Slide-out panel */
.mob-menu {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 88vw);
  height: 100vh;
  background: var(--card-bg);
  border-left: 1px solid var(--border);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.mob-menu.is-open { transform: translateX(0); }

.mob-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mob-menu__brand {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--white);
}
.mob-menu__close {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--navy3);
  border: 1px solid var(--border);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mob-menu__close:hover { border-color: rgba(255,255,255,0.25); }

.mob-menu__list {
  list-style: none;
  padding: 0.5rem 0;
  flex: 1;
}
.mob-menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  min-height: 52px;
  transition: background 0.15s;
}
.mob-menu__item:last-child { border-bottom: none; }
.mob-menu__item:hover,
.mob-menu__item:focus { background: var(--navy3); outline: none; }
.mob-menu__item--cta { color: var(--cyan); }
.mob-menu__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  background: var(--blue);
  color: #fff;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0 4px;
  margin-left: auto;
}

.mob-menu__footer {
  padding: 1.25rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.mob-menu__call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem;
  border-radius: 9px;
  background: var(--blue);
  color: #fff !important;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s;
}
.mob-menu__call:hover { background: var(--blue-h); }

/* Mobile hero — hidden on desktop, shown on mobile */
.mob-hero { display: none; }

.mob-hero__inner {
  padding: 20px 16px 18px;
  background: var(--card-bg);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.mob-hero__title {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 4px;
}
.mob-hero__question {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  margin-top: 0;
}

/* 3-col device quick-pick grid */
.mob-device-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.mob-device-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 6px;
  background: var(--navy3);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  text-align: center;
  min-height: 48px;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  overflow: hidden;
  line-height: 1.3;
}
.mob-device-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.mob-device-btn:hover,
.mob-device-btn:focus { border-color: var(--blue); background: rgba(46,91,255,0.1); outline: none; }
.mob-device-btn--iphone::before  { background: linear-gradient(90deg, #a8b3d8, #2e5bff); }
.mob-device-btn--samsung::before { background: linear-gradient(90deg, #00c2e8, #1a45e8); }
.mob-device-btn--laptop::before  { background: linear-gradient(90deg, #2e5bff, #b99dff); }
.mob-device-btn--console::before { background: linear-gradient(90deg, #4ade80, #00c2e8); }
.mob-device-btn--tablet::before  { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.mob-device-btn--other::before   { background: rgba(255,255,255,0.15); }
.mob-device-btn--other           { color: var(--muted); font-weight: 600; }

.mob-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.mob-hero__actions .btn-hero-p,
.mob-hero__actions .btn-hero-s {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.mob-hero__trust {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

/* -- Mobile breakpoint: single-row header, show mobile elements ----------- */
@media (max-width: 768px) {
  /* Prevent style.css from making the header wrap at 760 px */
  .topbar { height: 60px !important; }
  .topbar-inner {
    height: 60px !important;
    min-height: 0 !important;
    flex-wrap: nowrap !important;
    padding-block: 0 !important;
  }

  /* Hide search bar — no room on mobile */
  .search-wrap { display: none !important; }

  /* Hide all desktop-only topbar elements */
  .topbar-phone,
  .topbar .btn-book,
  .icon-btn,
  .account-btn { display: none !important; }

  /* Show mobile-only elements */
  .mob-call-btn { display: flex !important; }
  .mob-menu-btn { display: flex !important; }

  /* Hide category nav — hamburger covers navigation */
  .cat-nav { display: none !important; }

  /* Mobile hero visible; desktop carousel hidden */
  .mob-hero { display: block !important; }
  .hero-carousel { display: none !important; }

  /* Trust strip: 2-col on mobile */
  .home-trust-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .home-trust-strip__item:nth-child(2) { border-right: none !important; }

  /* Hide brochure-only sections — keep conversion-critical sections only.
     Kept: trust strip, repair tiles, popular prices, visit us, final CTA.
     Hidden: why cards, testimonials, tracker promo, categories grid,
             featured products, local SEO text, FAQ accordion. */
  .home-why,
  .home-tracker-promo,
  .home-reviews,
  .home-featured-products,
  .home-repair-categories,
  .home-local-seo,
  .home-faq { display: none !important; }

  /* Popular repair price cards: single column on mobile */
  .repair-services-grid { grid-template-columns: 1fr !important; }

  /* Repair service card: horizontal list layout on mobile */
  .repair-service-card {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.85rem 1rem !important;
  }
  .repair-service-card__device { flex-shrink: 0; width: 90px; }
  .repair-service-card__name   { flex: 1; }
  .repair-service-card__price  { font-size: 1rem !important; margin: 0 !important; flex-shrink: 0; }
  .repair-service-card__meta   { display: none !important; }

  /* Visit section: stack columns */
  .home-visit-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }

  /* Section spacing: tighten up on mobile */
  .home-section-head { margin-top: 1.5rem !important; margin-bottom: 0.75rem !important; }
  .home-repair-highlight,
  .home-repair-tiles { margin-bottom: 0 !important; }
}

/* ── Small-screen tweaks ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .qbv-action-bar { gap: 6px; }
  .qbv-action-btn { padding: .5rem .65rem; font-size: .78rem; }
  .qbv-quote-price { font-size: 2.2rem; }
  .qbv-quote-repair { font-size: 1.25rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SEO Pages — seo_page.php, local.php, guides.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.seo-page-wrap { max-width: 1100px; margin: 0 auto; padding: var(--space-6) 0; }

/* Hero */
.seo-hero { margin-bottom: var(--space-6); }
.seo-hero__title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 var(--space-3);
}
.seo-hero__intro {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 640px;
  margin: 0;
}

/* Two-column layout */
.seo-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-6);
  align-items: start;
}

/* Price box */
.seo-price-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.seo-price-box--quote { border-color: rgba(0,194,232,.25); }
.seo-price-box__inner { display: flex; flex-direction: column; gap: 4px; }
.seo-price-box__label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.seo-price-box__amount { font-size: 2.4rem; font-weight: 800; color: var(--white); line-height: 1; }
.seo-price-box__amount--quote { font-size: 1.1rem; font-weight: 600; color: var(--cyan); }
.seo-price-box__meta { font-size: 12px; color: var(--muted); }
.seo-price-box__cta { white-space: nowrap; }

/* Body content */
.seo-body {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  color: var(--white);
  line-height: 1.7;
}
.seo-body h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--space-3); color: var(--white); }
.seo-body h3 { font-size: 1.05rem; font-weight: 600; margin: var(--space-4) 0 var(--space-2); color: var(--white); }
.seo-body p  { margin: 0 0 var(--space-3); color: var(--muted); }
.seo-body ul, .seo-body ol { padding-left: 1.4em; margin: 0 0 var(--space-3); color: var(--muted); }
.seo-body li { margin-bottom: 6px; }
.seo-body strong { color: var(--white); font-weight: 600; }

/* FAQ */
.seo-faq {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.seo-faq__title { font-size: 1.2rem; font-weight: 700; margin: 0 0 var(--space-4); color: var(--white); }
.seo-faq details {
  border-top: 1px solid var(--border);
  padding: var(--space-3) 0;
}
.seo-faq details:last-child { border-bottom: 1px solid var(--border); }
.seo-faq summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  list-style: none;
  padding-right: var(--space-4);
  position: relative;
}
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--cyan);
  font-size: 18px;
  line-height: 1;
  transition: transform .2s;
}
.seo-faq details[open] summary::after { content: "\2212"; }
.seo-faq details > div {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* Sidebar */
.seo-aside { display: flex; flex-direction: column; gap: var(--space-4); }

.seo-cta-box {
  background: linear-gradient(135deg, #1a2d6e 0%, #0f1a42 100%);
  border: 1px solid rgba(46,91,255,.3);
  border-radius: 14px;
  padding: var(--space-5);
  text-align: center;
}
.seo-cta-box__title { font-size: 1.1rem; font-weight: 700; color: var(--white); margin: 0 0 var(--space-2); }
.seo-cta-box__text  { font-size: 13px; color: var(--muted); margin: 0 0 var(--space-4); line-height: 1.5; }
.seo-cta-box__btn   { display: block; width: 100%; }

.seo-contact-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-4);
}
.seo-contact-box__title { font-size: 14px; font-weight: 700; color: var(--white); margin: 0 0 var(--space-3); }
.seo-contact-box__list  { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: 8px; }
.seo-contact-box__list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.seo-contact-box__list a { color: var(--cyan); text-decoration: none; }
.seo-contact-box__list a:hover { text-decoration: underline; }
.seo-contact-box__hours { font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: var(--space-2); display: flex; flex-direction: column; gap: 4px; }

.seo-related {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-4);
}
.seo-related__title { font-size: 14px; font-weight: 600; color: var(--white); margin: 0 0 var(--space-3); }
.seo-related ul     { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.seo-related li a   { font-size: 13px; color: var(--cyan); text-decoration: none; display: block; padding: 4px 0; border-bottom: 1px solid var(--border); }
.seo-related li:last-child a { border-bottom: none; }
.seo-related li a:hover { color: var(--white); }

/* Index pages (local.php, guides.php) */
.seo-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.seo-index-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-4);
  text-decoration: none;
  transition: border-color .2s, transform .15s;
}
.seo-index-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.seo-index-card__title { font-size: 15px; font-weight: 600; color: var(--white); margin: 0 0 var(--space-2); line-height: 1.35; }
.seo-index-card__desc  { font-size: 13px; color: var(--muted); margin: 0 0 var(--space-2); line-height: 1.5; }
.seo-index-card__meta  { font-size: 11px; color: var(--cyan); text-transform: uppercase; letter-spacing: .05em; }
.seo-index-cta { text-align: center; padding: var(--space-4) 0; color: var(--muted); font-size: 14px; }
.seo-index-cta a { color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════════════
   Admin SEO pages (admin/seo_pages.php, admin/seo_page_edit.php)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stat bar */
.seo-admin-stats {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.seo-admin-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}
.seo-admin-stat__num   { font-size: 1.6rem; font-weight: 800; color: var(--white); line-height: 1; }
.seo-admin-stat__label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

/* Filter bar */
.seo-admin-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-3);
}

/* Table utilities */
.row--muted { opacity: .55; }

/* Badge types for page_type */
.badge--repair { background: rgba(46,91,255,.18); color: #8ba4ff; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.badge--local  { background: rgba(0,194,232,.15); color: var(--cyan); border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.badge--guide  { background: rgba(16,185,129,.15); color: #34d399; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; }

/* Action buttons (small reusable utility) */
.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}
.btn-action:hover { background: var(--blue-h); border-color: var(--blue-h); color: var(--white); }
.btn-action--sm   { padding: 3px 9px; font-size: 11px; border-radius: 6px; }
.btn-action--outline { background: transparent; border-color: var(--border); color: var(--muted); }
.btn-action--outline:hover { border-color: var(--blue); color: var(--white); background: rgba(46,91,255,.12); }
.btn-action--danger { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); color: #f87171; }
.btn-action--danger:hover { background: #ef4444; border-color: #ef4444; color: var(--white); }

/* Edit page layout */
.seo-edit-form { margin-top: var(--space-4); }
.seo-edit-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-5);
  align-items: start;
}
.card-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.seo-edit-html-area { font-family: "Consolas", "Courier New", monospace; }

/* Admin SEO generator form */
.seo-gen-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-4);
}
.seo-gen-preview {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5);
}
.seo-gen-preview__title  { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 var(--space-4); }
.seo-gen-preview__field  { margin-bottom: var(--space-3); }
.seo-gen-preview__label  { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.seo-gen-preview__value  { font-size: 14px; color: var(--white); line-height: 1.5; }
.seo-gen-preview__slug   { font-size: 13px; color: var(--cyan); font-family: monospace; }
.seo-gen-actions         { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .seo-layout       { grid-template-columns: 1fr; }
  .seo-aside        { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .seo-edit-grid    { grid-template-columns: 1fr; }
  .seo-gen-layout   { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .seo-hero__title  { font-size: 1.5rem; }
  .seo-price-box    { flex-direction: column; align-items: flex-start; }
  .seo-aside        { display: flex; flex-direction: column; }
  .seo-admin-stats  { gap: var(--space-2); }
  .seo-admin-stat   { min-width: 60px; padding: 8px 12px; }
}

/* ==========================================================
   Homepage search bar (desktop)
   ========================================================== */
.home-search-wrap {
  padding: 1.25rem 0 0.5rem;
}
.home-search-form {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 620px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.home-search-form:focus-within {
  border-color: var(--blue);
}
.home-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: var(--white);
  font-family: var(--font-family);
  min-width: 0;
}
.home-search-input::placeholder {
  color: #7b85b8;
}
.home-search-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.25rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-family);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}
.home-search-btn:hover {
  background: var(--blue-h);
}

/* Mobile: hide desktop search bar (mob-hero has its own) */
@media (max-width: 768px) {
  .home-search-wrap { display: none; }
}

/* ==========================================================
   Mobile hero search
   ========================================================== */
.mob-hero__search {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--navy3);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
.mob-hero__search:focus-within {
  border-color: var(--blue);
}
.mob-hero__search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 0.65rem 0.75rem;
  font-size: 0.875rem;
  color: var(--white);
  font-family: var(--font-family);
  min-width: 0;
}
.mob-hero__search-input::placeholder {
  color: #7b85b8;
}
.mob-hero__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.875rem;
  background: var(--blue);
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.mob-hero__search-btn:hover {
  background: var(--blue-h);
}

/* ==========================================================
   Refurbished category quick-links (below featured products)
   ========================================================== */
.home-refurb-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.home-refurb-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.home-refurb-cat:hover {
  border-color: var(--cyan);
  background: rgba(0,194,232,0.07);
}
.home-refurb-cat--all {
  color: var(--muted);
}
.home-refurb-cat--all:hover {
  border-color: var(--blue);
  color: var(--white);
  background: rgba(46,91,255,0.08);
}

/* ==========================================================
   Homepage promo bar (above carousel, desktop only)
   ========================================================== */
.home-promo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 1.25rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.home-promo-bar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.home-promo-bar__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}
.home-promo-bar__item strong {
  color: var(--white);
  font-weight: 700;
}
.home-promo-bar__pill {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}
.home-promo-bar__pill--sale    { background: rgba(0,194,232,0.15); color: var(--cyan); border: 1px solid rgba(0,194,232,0.25); }
.home-promo-bar__pill--repair  { background: rgba(46,91,255,0.15); color: #7b9fff;     border: 1px solid rgba(46,91,255,0.25); }
.home-promo-bar__pill--gaming  { background: rgba(107,63,255,0.15); color: #b99dff;    border: 1px solid rgba(107,63,255,0.25); }
.home-promo-bar__pill--local   { background: rgba(74,222,128,0.12); color: #4ade80;    border: 1px solid rgba(74,222,128,0.2); }
.home-promo-bar__sep {
  color: rgba(255,255,255,0.25);
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
}
@media (max-width: 768px) {
  .home-promo-bar { display: none; }
}

/* ==========================================================
   Cookie consent banner
   ========================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 0.85rem 1rem;
  background: var(--navy2);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
.cookie-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
  min-width: 200px;
}
.cookie-banner__text a {
  color: var(--cyan);
  text-decoration: none;
}
.cookie-banner__text a:hover { text-decoration: underline; }
.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.cookie-banner__accept {
  padding: 0.5rem 1.25rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-family);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.cookie-banner__accept:hover { background: var(--blue-h); }
.cookie-banner__learn {
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.cookie-banner__learn:hover { color: var(--white); }
@media (max-width: 600px) {
  .cookie-banner__inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .cookie-banner__accept { width: 100%; text-align: center; }
  /* Lift mobile CTA bar up when cookie banner is visible */
  body.has-cookie-banner .mobile-cta-bar { bottom: calc(3.5rem + 60px); }
}

/* ── Legal / Terms Pages ─────────────────────────────── */

.legal-page {
  max-width: 860px;
  margin: 2.5rem auto 4rem;
  padding: 0 1rem;
}

/* Header */
.legal-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.legal-header__badge {
  display: inline-block;
  background: rgba(46,91,255,0.12);
  border: 1px solid rgba(46,91,255,0.25);
  color: var(--blue);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.legal-header__title {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  color: var(--white);
}
.legal-header__meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.legal-header__intro {
  font-size: 0.95rem;
  color: var(--offwhite);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 720px;
}

/* Table of Contents grid */
.legal-toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.4rem 1rem;
}
.legal-toc-link {
  font-size: 0.8rem;
  color: var(--cyan);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.legal-toc-link:hover {
  border-bottom-color: var(--cyan);
}

/* Section */
.legal-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}
.legal-section:last-of-type {
  border-bottom: none;
}
.legal-section--highlight {
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem 2rem;
  margin-bottom: 2.5rem;
}
.legal-section__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: -0.01em;
}
.legal-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* Sub-section heading */
.legal-subsection {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--offwhite);
  margin: 1.3rem 0 0.5rem;
}

/* Body text */
.legal-section p,
.legal-footer-note p {
  font-size: 0.875rem;
  color: var(--offwhite);
  line-height: 1.75;
  margin-bottom: 0.85rem;
}
.legal-section p:last-child {
  margin-bottom: 0;
}

/* Lists */
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.85rem 0;
}
.legal-list li {
  font-size: 0.875rem;
  color: var(--offwhite);
  line-height: 1.7;
  padding: 0.3rem 0 0.3rem 1.4rem;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.legal-list li:last-child { border-bottom: none; }
.legal-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-size: 0.75rem;
  top: 0.38rem;
}

/* Contact card */
.legal-contact-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 0.85rem 0;
}
.legal-contact-row {
  display: flex;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.85rem;
  color: var(--offwhite);
}
.legal-contact-row:last-child { border-bottom: none; }
.legal-contact-label {
  min-width: 130px;
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
}
.legal-contact-row a {
  color: var(--cyan);
  text-decoration: none;
}
.legal-contact-row a:hover { text-decoration: underline; }

/* Notice boxes */
.legal-notice {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 0.75rem 0 1.25rem;
  align-items: flex-start;
}
.legal-notice--amber {
  background: rgba(245,166,35,0.08);
  border: 1px solid rgba(245,166,35,0.25);
}
.legal-notice--blue {
  background: rgba(46,91,255,0.08);
  border: 1px solid rgba(46,91,255,0.2);
}
.legal-notice__icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 0.05rem; }
.legal-notice__body {
  font-size: 0.875rem;
  color: var(--offwhite);
  line-height: 1.65;
}
.legal-notice--amber .legal-notice__body strong { color: #f5a623; }
.legal-notice--blue .legal-notice__body strong { color: #7fa8ff; }

/* Links within body */
.legal-section a {
  color: var(--cyan);
  text-decoration: none;
}
.legal-section a:hover { text-decoration: underline; }

/* Footer note */
.legal-footer-note {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 1rem;
}
.legal-footer-note a {
  color: var(--cyan);
  text-decoration: none;
}
.legal-footer-note a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 600px) {
  .legal-section--highlight { padding: 1.25rem 1rem; }
  .legal-contact-row { flex-direction: column; gap: 0.2rem; }
  .legal-contact-label { min-width: unset; }
  .legal-toc-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Booking Redesign ──────────────────────────────────────────────────────── */
.booking-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

/* Progress bar */
.book-progress {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 10;
}
.book-progress__inner {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 0;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}
.book-step-counter {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
  padding: 0.4rem 0 0.75rem;
}

/* Step header */
.book-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.book-back {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.35rem 0.9rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.book-back:hover { border-color: rgba(255,255,255,0.2); color: var(--white); }
.book-step-label {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* Step panels */
.book-step { display: none; }
.book-step.active { display: block; }

/* Category / brand / model tile grids */
.book-tile-grid--lg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}
.book-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
}
.book-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  text-align: center;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.book-tile:hover,
.book-tile.selected {
  border-color: var(--blue);
  background: rgba(46,91,255,0.1);
  transform: translateY(-2px);
}
.book-tile__icon {
  font-size: 2rem;
  line-height: 1;
}
.book-tile__icon--letter {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(46,91,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue);
}
.book-tile__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}

.book-tile--brand {
  min-height: 100px;
  justify-content: center;
}

.book-tile__brand-logo {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 0.2s;
}

.book-tile__brand-logo svg {
  width: 100%;
  height: 100%;
  max-width: 48px;
  max-height: 32px;
}

.book-tile--brand:hover .book-tile__brand-logo,
.book-tile--brand.selected .book-tile__brand-logo {
  color: var(--white);
}

/* Service card grid — step 4 */
.book-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
.book-svc-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-align: center;
  padding: 0;
  transition: all 0.22s;
  display: flex;
  flex-direction: column;
}
.book-svc-card:hover {
  border-color: rgba(46,91,255,0.55);
  background: rgba(46,91,255,0.06);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.bsc__img {
  background: #0d0f24;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.5rem 0.75rem;
  aspect-ratio: 3 / 4;
}
.bsc__img svg { width: 80px; height: 80px; max-width: 100%; }
.bsc__body {
  padding: 0.65rem 0.6rem 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.bsc__name { font-size: 0.75rem; font-weight: 600; color: var(--white); line-height: 1.3; }
.bsc__price { font-size: 0.82rem; font-weight: 800; color: var(--cyan); }

/* Category hero banner — step 3 */
.book-cat-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--navy3, #181b35);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.bch__icon { font-size: 2.2rem; line-height: 1; flex-shrink: 0; }
.bch__title { font-size: 1rem; font-weight: 700; color: var(--white); line-height: 1.3; }
.bch__sub { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }

/* Tier tiles (step 5) */
.book-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.book-tier-tile {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
}
.book-tier-tile.selected,
.book-tier-tile:hover {
  border-color: var(--blue);
  background: rgba(46,91,255,0.08);
}
.btt__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}
.btt__price { font-size: 1.4rem; font-weight: 800; color: var(--white); margin-bottom: 0.25rem; }
.btt__desc { font-size: 0.75rem; color: var(--muted); line-height: 1.4; }
.book-price-summary { font-size: 0.82rem; color: var(--muted); text-align: center; margin-top: 0.5rem; }

/* Slot wrap (step 6) */
.book-slot-wrap { display: flex; flex-direction: column; gap: 1.25rem; }
.book-date-picker { max-width: 280px; }
.book-slot-note { font-size: 0.8rem; color: var(--muted); }
#skipSlot {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#skipSlot:hover { color: var(--white); }

/* Summary card + details form (step 7) */
.book-summary-card {
  background: var(--navy3, #181b35);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.book-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
}
.book-summary-row strong { color: var(--white); font-weight: 600; }
.book-summary-row--price {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.price-highlight { color: var(--cyan); font-size: 1.1rem; font-weight: 800; }

.book-deposit-notice {
  background: rgba(245,166,35,0.1);
  border: 1px solid rgba(245,166,35,0.3);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  color: #f5a623;
  margin-bottom: 1rem;
}

.btn-book--lg {
  width: 100%;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1rem;
  border-radius: 10px;
}

/* Loading/empty state */
.book-tile-grid.loading,
.book-service-grid.loading { opacity: 0.5; pointer-events: none; }
.book-loading-msg {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 2rem;
  grid-column: 1 / -1;
}

/* Mobile */
@media (max-width: 600px) {
  .book-tile-grid--lg { grid-template-columns: repeat(2, 1fr); }
  .book-tile-grid     { grid-template-columns: repeat(2, 1fr); }
  .book-service-grid  { grid-template-columns: repeat(2, 1fr); }
  .book-tier-grid     { grid-template-columns: 1fr; }
  .book-step-label    { font-size: 1.1rem; }
  .bst__meta          { display: none; }
}

/* ── iDoctor Booking Journey ──────────────────────────────────────────────── */
:root { --tc-green: #66b32e; }

.bj-page { padding: 2.5rem 0 4rem; }

.bj-hero {
  text-align: center;
  padding: 3rem 1.5rem 2.5rem;
  max-width: 720px;
  margin: 0 auto 2rem;
}
.bj-hero__trust {
  font-size: 0.82rem;
  color: var(--tc-green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}
.bj-hero__heading { font-size: 2.2rem; font-weight: 800; color: var(--white); margin-bottom: 0.6rem; }
.bj-hero__sub { font-size: 1rem; color: var(--muted); }

.bj-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}
.bj-device-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem 1rem 1.25rem;
  text-decoration: none;
  color: var(--white);
  gap: 0.75rem;
  transition: border-color 0.18s, transform 0.18s;
}
.bj-device-card:hover,
.bj-device-card:focus-visible {
  border-color: var(--tc-green);
  transform: translateY(-2px);
  text-decoration: none;
}
.bj-device-card:focus-visible { outline: 2px solid var(--tc-green); outline-offset: 2px; }
.bj-device-card__icon { line-height: 0; }
.bj-device-card__name { font-size: 1rem; font-weight: 700; }
.bj-device-card__action { font-size: 0.78rem; color: var(--tc-green); font-weight: 600; }

.bj-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.bj-breadcrumb a { color: var(--cyan); text-decoration: none; }
.bj-breadcrumb a:hover { text-decoration: underline; }

.bj-model-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  margin-bottom: 1.75rem;
}
.bj-model-hero__icon { flex-shrink: 0; line-height: 0; }
.bj-model-hero__heading { font-size: 1.6rem; font-weight: 800; color: var(--white); margin-bottom: 0.3rem; }
.bj-model-hero__sub { font-size: 0.9rem; color: var(--tc-green); }

.bj-search-wrap { margin-bottom: 1.25rem; }
.bj-search {
  width: 100%;
  max-width: 380px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--white);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 0.9rem;
}
.bj-search::placeholder { color: #7b85b8; }
.bj-search:focus { outline: 2px solid var(--tc-green); border-color: var(--tc-green); }

.bj-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}
.bj-model-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 0.75rem 1rem;
  text-decoration: none;
  color: var(--white);
  gap: 0.5rem;
  transition: border-color 0.15s, transform 0.15s;
}
.bj-model-card:hover,
.bj-model-card:focus-visible {
  border-color: var(--tc-green);
  transform: translateY(-2px);
  text-decoration: none;
}
.bj-model-card:focus-visible { outline: 2px solid var(--tc-green); outline-offset: 2px; }
.bj-model-card__img { line-height: 0; opacity: 0.7; }
.bj-model-card__name { font-size: 0.82rem; font-weight: 600; }
.bj-model-card__sub { font-size: 0.72rem; color: var(--tc-green); }

.bj-section-heading { font-size: 1.5rem; font-weight: 800; color: var(--white); margin-bottom: 1.5rem; }

.bj-repair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9rem;
}
.bj-repair-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1rem 1rem;
  text-decoration: none;
  color: var(--white);
  gap: 0.6rem;
  transition: border-color 0.15s, transform 0.15s;
}
.bj-repair-card:hover,
.bj-repair-card:focus-visible {
  border-color: var(--tc-green);
  transform: translateY(-2px);
  text-decoration: none;
}
.bj-repair-card:focus-visible { outline: 2px solid var(--tc-green); outline-offset: 2px; }
.bj-repair-card__img { line-height: 0; }
.bj-repair-card__img img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; }
.bj-repair-card__name { font-size: 0.85rem; font-weight: 600; }
.bj-repair-card__price { color: var(--tc-green); font-size: 1rem; font-weight: 700; }
.bj-repair-card__action { font-size: 0.75rem; color: var(--muted); margin-top: auto; }

.bj-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}
.bj-detail-image {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.bj-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.bj-detail-image__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2rem;
}
.bj-detail-title { font-size: 1.5rem; font-weight: 800; color: var(--white); margin-bottom: 0.75rem; }
.bj-detail-price { font-size: 2rem; font-weight: 800; color: var(--tc-green); margin-bottom: 1rem; }
.bj-detail-desc { font-size: 0.9rem; color: var(--muted); line-height: 1.65; margin-bottom: 0.75rem; }
.bj-detail-time { font-size: 0.82rem; color: var(--muted); margin-bottom: 1.25rem; }

.bj-trust-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bj-trust-list li {
  font-size: 0.85rem;
  color: var(--white);
  padding-left: 1.3rem;
  position: relative;
}
.bj-trust-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--tc-green);
  font-weight: 700;
}

.bj-book-btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.75rem 1.75rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.16s;
}
.bj-book-btn:hover { background: var(--blue-h); text-decoration: none; color: #fff; }
.bj-book-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.bj-book-btn--full { display: block; width: 100%; text-align: center; margin-top: 1.25rem; height: 52px; line-height: 52px; padding: 0 1rem; font-size: 0.95rem; font-weight: 700; border-radius: 10px; }

.bj-related { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.bj-related__heading { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 1rem; }

.bj-form-layout { max-width: 620px; margin: 0 auto; }
.bj-summary-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.bj-summary-box__heading { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.85rem; }
.bj-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bj-summary-row:last-child { border-bottom: none; }
.bj-summary-row strong { color: var(--white); font-weight: 600; }
.bj-price { color: var(--tc-green) !important; font-weight: 700; }

.bj-deposit-notice {
  background: rgba(245,166,35,0.1);
  border: 1px solid rgba(245,166,35,0.3);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  color: #f5a623;
  margin-bottom: 1rem;
}

.bj-confirm {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 1rem;
}
.bj-confirm__check { margin-bottom: 1.25rem; line-height: 0; display: inline-block; }
.bj-confirm__heading { font-size: 2rem; font-weight: 800; color: var(--white); margin-bottom: 0.5rem; }
.bj-confirm__sub { color: var(--muted); margin-bottom: 1.5rem; }
.bj-confirm__actions { margin-top: 1.75rem; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.bj-confirm .bj-summary-box { max-width: 480px; margin: 0 auto 1.5rem; text-align: left; }
.bj-confirm .bj-deposit-notice { max-width: 480px; margin: 0 auto 1.5rem; text-align: left; }

.bj-empty { color: var(--muted); padding: 2rem 0; }
.bj-empty a { color: var(--cyan); }

/* Slot picker dark-theme overrides for iDoctor booking form */
.bj-form-layout #slot-picker-wrap { margin-top: 0; margin-bottom: 1.25rem; }
.bj-form-layout #slot-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.bj-form-layout .slot-btn {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  min-width: 5.5rem;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.bj-form-layout .slot-btn:hover:not(:disabled) {
  border-color: var(--tc-green);
  color: var(--tc-green);
}
.bj-form-layout .slot-btn--selected {
  background: var(--tc-green);
  border-color: var(--tc-green);
  color: #fff;
}
.bj-form-layout .slot-btn:focus-visible { outline: 2px solid var(--tc-green); outline-offset: 2px; }
.bj-form-layout .slot-btn--unavailable,
.bj-form-layout .slot-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.bj-form-layout .slot-loading { color: var(--muted); font-size: 0.85rem; padding: 0.5rem 0; }
.bj-form-layout .slot-error   { color: #f5a623;      font-size: 0.85rem; padding: 0.5rem 0; }
.bj-form-layout #slot-hint    { color: var(--muted);  font-size: 0.82rem; margin-top: 0.5rem; }

@media (max-width: 900px) {
  .bj-detail-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .bj-detail-image { aspect-ratio: 4/3; max-height: 300px; min-height: auto; }
  .bj-hero__heading { font-size: 1.7rem; }
}
@media (max-width: 640px) {
  .bj-device-grid { grid-template-columns: repeat(2, 1fr); }
  .bj-model-grid  { grid-template-columns: repeat(2, 1fr); }
  .bj-repair-grid { grid-template-columns: repeat(2, 1fr); }
  .bj-model-hero  { flex-direction: column; text-align: center; padding: 1.5rem 1rem; }
  .bj-detail-price { font-size: 1.5rem; }
  .bj-detail-title { font-size: 1.2rem; }
  .bj-hero__heading { font-size: 1.4rem; }
}

/* ── Services Browse Page ──────────────────────────────────────────────────── */
.services-browse {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

.services-browse__header { margin-bottom: 1.5rem; }

.services-browse__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.services-browse__sub {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 600px;
}

.services-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.sb__item { color: var(--muted); }
.sb__item--active { color: var(--white); font-weight: 600; }
.sb__item--link { color: var(--cyan); cursor: pointer; }
.sb__item--link:hover { text-decoration: underline; }
.sb__sep { color: var(--muted); }

.services-panel { display: none; }
.services-panel.active { display: block; }

.services-model-hero {
  background: var(--navy3, #181b35);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.ssh__device {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.ssh__headline {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
}

.ssh__sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

.services-price-list {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.spl__row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.spl__row:last-child { border-bottom: none; }
.spl__row:hover { background: rgba(46,91,255,0.05); }

.spl__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
}

.spl__meta {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.spl__price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--cyan);
  white-space: nowrap;
}

.spl__book {
  background: var(--blue);
  color: #fff;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.spl__book:hover { background: var(--blue-h); }

.services-book-cta {
  text-align: center;
  padding: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.services-book-cta p {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.6rem;
}

@media (max-width: 600px) {
  .spl__row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .spl__meta { display: none; }
  .spl__price { font-size: 0.9rem; }
}

/* ── Booking Hero Banner ───────────────────────────────────────────────────── */
.book-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0 1.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.book-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

.book-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  animation: blink 2s infinite;
}

.book-hero__title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.book-hero__sub {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 420px;
}

.book-hero__trust {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
}

.book-hero__pill {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.3rem 0.9rem;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .book-hero { padding: 1rem 0 1.25rem; }
  .book-hero__title { font-size: 1.4rem; }
  .book-hero__trust { display: none; }
}

/* ── Booking wizard — text contrast fix ────────────────────────────────────
   The global "body:not(.admin-page) label/p { color: var(--tc-text-soft) }"
   rule dims these elements to #cbd5e1. Override to full white inside the
   booking wizard so all labels, headings and hints are clearly readable.
   ────────────────────────────────────────────────────────────────────────── */
.booking-page label,
.booking-page .form-label {
  color: var(--white) !important;
}
.booking-page .book-step-label {
  color: var(--white) !important;
}
.booking-page .form-hint,
.booking-page .book-step-counter {
  color: var(--muted) !important;
}
.booking-page .book-summary-row {
  color: var(--muted);
}
.booking-page .book-summary-row strong {
  color: var(--white) !important;
}
.booking-page .price-highlight {
  color: var(--cyan) !important;
}
.booking-page .bj-deposit-notice {
  color: var(--white) !important;
  background: rgba(245,166,35,0.1);
  border: 1px solid rgba(245,166,35,0.3);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.booking-page .book-loading-msg {
  color: var(--muted) !important;
}
/* Plain paragraph text within the wizard */
.booking-page p {
  color: var(--muted) !important;
}
/* Skip link */
.booking-page #skipSlot {
  color: var(--muted) !important;
}
/* Confirmation screen */
.bj-confirm p,
.bj-confirm label {
  color: var(--muted) !important;
}
/* Services browse page */
.services-browse label,
.services-browse .form-label,
.services-browse p {
  color: var(--muted) !important;
}

/* ── Category Tiles (step 1) ───────────────────────────────────────────────── */
.book-tile--cat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-align: left;
  transition: all 0.22s;
  position: relative;
  overflow: hidden;
  min-height: 130px;
}

.book-tile--cat::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.22s;
  border-radius: 16px;
}

.book-tile--cat:hover { transform: translateY(-3px); }
.book-tile--cat:hover::before { opacity: 1; }

.book-tile--cat[data-slug*="phone"] { border-color: rgba(46,91,255,0.3); }
.book-tile--cat[data-slug*="phone"]::before { background: rgba(46,91,255,0.06); }
.book-tile--cat[data-slug*="phone"] .book-tile__cat-icon { color: #2e5bff; }

.book-tile--cat[data-slug*="laptop"] { border-color: rgba(0,194,232,0.3); }
.book-tile--cat[data-slug*="laptop"]::before { background: rgba(0,194,232,0.06); }
.book-tile--cat[data-slug*="laptop"] .book-tile__cat-icon { color: #00c2e8; }

.book-tile--cat[data-slug*="tablet"] { border-color: rgba(107,63,255,0.3); }
.book-tile--cat[data-slug*="tablet"]::before { background: rgba(107,63,255,0.06); }
.book-tile--cat[data-slug*="tablet"] .book-tile__cat-icon { color: #6b3fff; }

.book-tile--cat[data-slug*="console"],
.book-tile--cat[data-slug*="gaming"] { border-color: rgba(240,56,122,0.3); }
.book-tile--cat[data-slug*="console"]::before,
.book-tile--cat[data-slug*="gaming"]::before { background: rgba(240,56,122,0.06); }
.book-tile--cat[data-slug*="console"] .book-tile__cat-icon,
.book-tile--cat[data-slug*="gaming"] .book-tile__cat-icon { color: #f0387a; }

.book-tile--cat[data-slug*="desktop"],
.book-tile--cat[data-slug*="pc"] { border-color: rgba(14,184,127,0.3); }
.book-tile--cat[data-slug*="desktop"]::before,
.book-tile--cat[data-slug*="pc"]::before { background: rgba(14,184,127,0.06); }
.book-tile--cat[data-slug*="desktop"] .book-tile__cat-icon,
.book-tile--cat[data-slug*="pc"] .book-tile__cat-icon { color: #0eb87f; }

.book-tile--cat:not([data-slug*="phone"]):not([data-slug*="laptop"]):not([data-slug*="tablet"]):not([data-slug*="console"]):not([data-slug*="gaming"]):not([data-slug*="desktop"]):not([data-slug*="pc"]) {
  border-color: rgba(245,166,35,0.3);
}
.book-tile--cat:not([data-slug*="phone"]):not([data-slug*="laptop"]):not([data-slug*="tablet"]):not([data-slug*="console"]):not([data-slug*="gaming"]):not([data-slug*="desktop"]):not([data-slug*="pc"])::before {
  background: rgba(245,166,35,0.06);
}
.book-tile--cat:not([data-slug*="phone"]):not([data-slug*="laptop"]):not([data-slug*="tablet"]):not([data-slug*="console"]):not([data-slug*="gaming"]):not([data-slug*="desktop"]):not([data-slug*="pc"]) .book-tile__cat-icon {
  color: #f5a623;
}

.book-tile__cat-icon {
  font-size: 2.2rem;
  line-height: 1;
  transition: transform 0.22s;
}

.book-tile--cat:hover .book-tile__cat-icon { transform: scale(1.15); }

.book-tile--cat .book-tile__label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
  flex: 1;
}

.book-tile__cat-arrow {
  position: absolute;
  bottom: 1rem;
  right: 1.1rem;
  font-size: 0.85rem;
  color: var(--muted);
  transition: transform 0.2s, color 0.2s;
}

.book-tile--cat:hover .book-tile__cat-arrow {
  transform: translateX(4px);
  color: var(--white);
}

@media (max-width: 600px) {
  .book-tile--cat { min-height: 100px; padding: 1rem; }
  .book-tile__cat-icon { font-size: 1.75rem; }
}

/* ── Model Search + Model Tiles (step 3) ───────────────────────────────────── */
.book-search-wrap { margin-bottom: 1rem; }

.book-search-input {
  width: 100%;
  max-width: 400px;
  height: 44px;
  background: var(--navy3, #181b35);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  padding: 0 1rem;
  outline: none;
  transition: border-color 0.2s;
}

.book-search-input::placeholder { color: var(--muted); }
.book-search-input:focus { border-color: var(--blue); }

/* Step 3 hero — icon + stacked title/sub */
#stepModelHero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(46,91,255,0.06);
  border: 1px solid rgba(46,91,255,0.15);
  border-radius: 14px;
}
.model-hero__icon { font-size: 2.2rem; line-height: 1; flex-shrink: 0; }
.model-hero__text { display: flex; flex-direction: column; gap: 0.15rem; }
.model-hero__text h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--white); }
.model-hero__text p  { margin: 0; font-size: 0.82rem; color: var(--muted); }

/* Step 3 search */
.model-search-wrap { position: relative; margin-bottom: 1rem; }
.model-search-icon {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted); pointer-events: none;
}
.model-search-input {
  width: 100%; padding: 0.7rem 1rem 0.7rem 2.5rem;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; color: var(--white);
  font-family: 'Inter', sans-serif; font-size: 0.9rem;
  box-sizing: border-box; transition: border-color 0.18s;
}
.model-search-input::placeholder { color: #7b85b8; }
.model-search-input:focus { outline: none; border-color: rgba(46,91,255,0.5); }

/* Model grid — 4–5 columns, larger tiles */
.book-tile-grid--models { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }

.book-tile--model {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-align: center;
  transition: all 0.2s;
}

.book-tile--model:hover {
  border-color: rgba(46,91,255,0.5);
  background: rgba(46,91,255,0.07);
  transform: translateY(-2px);
}

.book-tile__model-icon {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 0.25rem;
  transition: transform 0.2s;
}

.book-tile--model:hover .book-tile__model-icon { transform: scale(1.1); }

.book-tile__model-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}

.book-tile__model-brand {
  font-size: 0.68rem;
  color: var(--muted);
}

/* ── Services Page Hero ────────────────────────────────────────────────────── */
.svc-page-hero {
  background: linear-gradient(135deg, #0c1060 0%, #0b0d1f 60%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2.5rem 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.svc-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(46,91,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,91,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.svc-page-hero__inner { position: relative; }

.svc-page-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}

.svc-page-hero__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.svc-page-hero__sub {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 1.5rem;
}

.svc-page-hero__stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.svc-page-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--white);
}

.stat-lab {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Form Input (booking details step) ─────────────────────────────────────── */
.form-input {
  width: 100%;
  background: var(--navy3, #181b35);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 0.65rem 1rem;
  outline: none;
  transition: border-color 0.2s;
  display: block;
}

.form-input:focus { border-color: var(--blue); }
.form-input::placeholder { color: #7b85b8; }

/* Booking wizard — logged-in user notice */
.book-logged-in-notice {
  font-size: .875rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  padding: .65rem .85rem;
  background: rgba(46,91,255,.08);
  border: 1px solid rgba(46,91,255,.25);
  border-radius: 8px;
}
.book-logged-in-notice strong { color: var(--white); }
.book-logged-in-notice a { color: var(--cyan); }

/* Invoice import page */
.match-row--ok   { border-left: 3px solid var(--tag-green); }
.match-row--warn { border-left: 3px solid var(--tag-amber); }
.match-row--none { border-left: 3px solid var(--pink); }
.match-icon { font-size: .85rem; width: 1.4rem; text-align: center; flex-shrink: 0; }
.col-detect { font-size: .75rem; color: var(--muted); margin-top: .2rem; }
.preview-table td, .preview-table th { padding: .4rem .5rem; font-size: .82rem; }
.preview-table select { font-size: .8rem; padding: .25rem .4rem; min-width: 180px; max-width: 260px; }
.total-row td { font-weight: 700; border-top: 2px solid var(--border); }

/* ── Homepage + Footer missing classes (restored) ── */

/* sec-head: section header row (title + link) */
.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

/* Product grid: homepage featured products */
.prod-img {
  aspect-ratio: 1;
  background: var(--navy3, #181b35);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  padding: 12px 10px 6px;
}
.prod-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.prod-body { padding: 0.85rem; }
.prod-name {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 3px;
  line-height: 1.3;
  color: var(--white);
}
.prod-spec {
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.prod-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.prod-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.badge-green {
  background: rgba(14,184,127,0.15);
  color: #0eb87f;
  border: 1px solid rgba(14,184,127,0.25);
}

/* Visit Us section */
.home-visit-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  margin-bottom: 0;
}
.home-visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.home-visit-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.85rem;
}
.home-visit-line {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 0.2rem;
}
.home-visit-line a {
  color: var(--cyan);
  text-decoration: none;
}
.home-visit-line a:hover { text-decoration: underline; }
.home-visit-line--mt { margin-top: 0.75rem; }

/* Opening hours table */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  color: var(--muted);
}
.hours-table td {
  padding: 0.3rem 0;
  line-height: 1.5;
}
.hours-table td:last-child {
  text-align: right;
  color: var(--white);
  font-weight: 600;
}
.hours-closed { color: var(--muted) !important; opacity: 0.55; }

/* Footer info column */
.footer-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 420px;
}
.footer-info p {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}
.footer-info a {
  color: var(--muted);
  text-decoration: none;
}
.footer-info a:hover { color: var(--white); }

/* ── Repair service price cards (homepage popular repairs section) ── */
.repair-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.repair-service-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.1rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, transform 0.18s;
}
.repair-service-card:hover {
  border-color: rgba(46,91,255,0.35);
  transform: translateY(-2px);
}
.repair-service-card--link { cursor: pointer; }

.repair-service-card__device {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.6rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}
.repair-service-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
.repair-service-card__price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--white);
  margin-top: auto;
  margin-bottom: 0.35rem;
}
.repair-service-card__meta {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .repair-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .repair-services-grid { grid-template-columns: 1fr; }
  .repair-service-card {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
  .repair-service-card__device { border-bottom: none; padding-bottom: 0; margin-bottom: 0; flex-shrink: 0; width: 80px; }
  .repair-service-card__name   { flex: 1; }
  .repair-service-card__price  { font-size: 1rem; margin-top: 0; }
  .repair-service-card__meta   { display: none; }
}

/* ==========================================================================
   BOOKING REDESIGN — bk-* classes
   ========================================================================== */

.bk-page { background: var(--navy); min-height: 100vh; }

.bk-steps {
  display: flex; align-items: center; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 50;
  background: var(--navy2); border-bottom: 1px solid var(--border);
  padding: 0 1.5rem; gap: 0; overflow-x: auto;
}
.bk-step {
  display: flex; align-items: center; gap: 6px;
  padding: 0.75rem 0.5rem; white-space: nowrap;
  color: var(--muted); font-size: 0.75rem; font-weight: 500;
}
.bk-step.active { color: var(--white); }
.bk-step.active .bk-step-num {
  background: var(--blue); color: #fff;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
}
.bk-step.done { color: var(--muted); }
.bk-step.done .bk-step-num { color: var(--cyan); font-size: 0.9rem; }
.bk-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); color: var(--muted);
  font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
.bk-step-sep { flex: 1; min-width: 20px; height: 1px; background: var(--border); }
.bk-step-label-txt { display: none; }
@media (min-width: 640px) { .bk-step-label-txt { display: inline; } }

.bk-wizard { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

.bk-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 3rem 0 2rem; }
.bk-hero-left { display: flex; flex-direction: column; gap: 1rem; }
.bk-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--cyan); color: var(--cyan);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 99px; width: fit-content;
}
.bk-hero-h1 { font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 800; color: var(--white); line-height: 1.15; }
.bk-hero-sub { color: var(--muted); font-size: 1rem; }
.bk-hero-right { display: flex; justify-content: center; }
.bk-hero-trust { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.bk-trust-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.bk-trust-icon { font-size: 1rem; }

.bk-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-top: 1.5rem; }
.bk-cat-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 1.25rem 0.75rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  color: var(--white); text-align: center;
}
.bk-cat-tile:hover { border-color: var(--blue); }
.bk-cat-tile.active { border: 2px solid var(--blue); background: rgba(46,91,255,0.08); }
.bk-cat-tile__icon { display: flex; align-items: center; justify-content: center; }
.bk-cat-tile__name { font-size: 0.88rem; font-weight: 600; color: var(--white); }
.bk-cat-tile__sub  { font-size: 0.72rem; color: var(--muted); }

.bk-brand-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; }
.bk-brand-tab {
  display: flex; align-items: center; gap: 6px; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: 99px; background: var(--card-bg);
  color: var(--muted); font-size: 0.8rem; cursor: pointer; transition: border-color 0.15s;
}
.bk-brand-tab:hover { border-color: var(--blue); }
.bk-brand-tab.active { border-color: var(--blue); color: var(--white); background: rgba(46,91,255,0.08); }
.bk-brand-tab svg { width: 20px; height: 20px; }

.bk-dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.bk-dev-tile {
  display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; cursor: pointer; transition: border-color 0.15s; color: var(--white);
}
.bk-dev-tile:hover { border-color: var(--blue); }
.bk-dev-tile.active { border: 2px solid var(--blue); background: rgba(46,91,255,0.08); }
.bk-dev-img {
  height: 120px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.03); position: relative;
}
.bk-dev-name { font-size: 0.8rem; font-weight: 500; padding: 8px 10px 10px; color: var(--white); }
.bk-dev-badge {
  position: absolute; top: 6px; right: 6px;
  background: #0eb87f; color: #fff; font-size: 0.65rem; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
}

.bk-screen-h2 { font-size: 1.4rem; font-weight: 700; color: var(--white); margin: 1rem 0 0.25rem; }
.bk-screen-sub { color: var(--muted); font-size: 0.85rem; margin-bottom: 1rem; }
.bk-repair-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
.bk-sort-label { font-size: 0.75rem; color: var(--muted); margin-right: 6px; }
.bk-sort-sel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; color: var(--white); padding: 5px 10px; font-size: 0.8rem; }
.bk-view-btns { display: flex; gap: 4px; }
.bk-vbtn { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); padding: 5px 10px; cursor: pointer; transition: border-color 0.15s; }
.bk-vbtn.active { border-color: var(--blue); color: var(--white); }
.bk-repair-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.bk-repair-grid.list { grid-template-columns: 1fr; }
.bk-repair-card {
  display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; cursor: pointer; transition: border-color 0.15s; text-align: left; color: var(--white);
}
.bk-repair-card:hover { border-color: var(--blue); }
.bk-repair-card.active { border: 2px solid var(--blue); background: rgba(46,91,255,0.08); }
.bk-repair-grid.list .bk-repair-card { flex-direction: row; align-items: center; gap: 1rem; padding: 0.75rem 1rem; }
.bk-repair-img { height: 140px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); }
.bk-repair-img--sm { height: 70px; width: 80px; flex-shrink: 0; border-radius: 8px; }
.bk-repair-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bk-repair-list-info { flex: 1; }
.bk-repair-name { font-size: 0.82rem; font-weight: 500; color: var(--white); min-height: 2.2em; line-height: 1.3; }
.bk-repair-price { font-size: 0.95rem; font-weight: 700; color: var(--blue); }
.bk-repair-meta { font-size: 0.72rem; }
.bk-card-book-btn {
  margin: 0 12px 12px; padding: 7px 0; text-align: center;
  background: rgba(46,91,255,0.12); color: var(--blue); border-radius: 8px;
  font-size: 0.78rem; font-weight: 600; transition: background 0.15s;
}
.bk-repair-card:hover .bk-card-book-btn { background: var(--blue); color: #fff; }
.bk-repair-grid.list .bk-card-book-btn { margin: 0; padding: 6px 14px; flex-shrink: 0; }

.bk-detail { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; margin-top: 1rem; }
.bk-detail-img { display: flex; flex-direction: column; gap: 10px; }
.bk-detail-main-img {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  min-height: 300px; display: flex; align-items: center; justify-content: center;
}
.bk-detail-thumbs { display: flex; gap: 8px; }
.bk-thumb { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 6px; cursor: pointer; transition: border-color 0.15s; }
.bk-thumb.active { border-color: var(--blue); }
.bk-detail-info { display: flex; flex-direction: column; gap: 1rem; }
.bk-detail-h1 { font-size: 1.4rem; font-weight: 800; color: var(--white); line-height: 1.2; }
.bk-detail-price { font-size: 1.4rem; font-weight: 700; color: var(--cyan); }
.bk-detail-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
.bk-tier-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.bk-tier-opts { display: flex; flex-direction: column; gap: 8px; }
.bk-tier-opt {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg);
  cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: left; color: var(--white);
}
.bk-tier-opt.active { border: 2px solid var(--blue); background: rgba(46,91,255,0.08); }
.bk-tier-radio {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0;
}
.bk-tier-opt.active .bk-tier-radio { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px var(--card-bg); }
.bk-tier-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bk-tier-name { font-size: 0.88rem; font-weight: 600; color: var(--white); }
.bk-tier-desc { font-size: 0.75rem; }
.bk-tier-price { font-size: 0.9rem; font-weight: 700; color: var(--cyan); flex-shrink: 0; }
.bk-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bk-bullet { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.bk-tick { color: var(--cyan); font-weight: 700; flex-shrink: 0; }
.bk-book-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-related { margin-top: 2.5rem; }
.bk-related-h { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 1rem; }

.bk-slot-grid { margin-top: 1rem; }
.bk-week-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.bk-week-label { flex: 1; text-align: center; font-weight: 600; color: var(--white); font-size: 0.9rem; }
.bk-day-cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.bk-day-col { display: flex; flex-direction: column; gap: 4px; min-width: 80px; }
.bk-day-head { display: flex; flex-direction: column; align-items: center; padding: 6px 0; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.bk-day-head.today .bk-day-num {
  background: var(--blue); color: #fff; border-radius: 50%;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.bk-day-name { font-size: 0.7rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.bk-day-num { font-size: 0.9rem; font-weight: 700; color: var(--white); }
.bk-day-closed { text-align: center; font-size: 0.72rem; padding: 6px 0; }
.bk-day-slots { display: flex; flex-direction: column; gap: 4px; }
.bk-slot-btn {
  padding: 6px 4px; font-size: 0.72rem; font-weight: 500; text-align: center;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--white); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.bk-slot-btn:hover { border-color: var(--blue); }
.bk-slot-btn.selected { background: var(--blue); color: #fff; border-color: var(--blue); }
.bk-slot-btn.full { text-decoration: line-through; opacity: 0.4; cursor: default; }
.bk-slot-loading { font-size: 0.72rem; color: var(--muted); text-align: center; padding: 4px 0; }
.bk-skip-link { color: var(--cyan); text-decoration: underline; font-size: 0.85rem; }

.bk-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; margin-bottom: 1.5rem; font-size: 0.85rem;
}
.bk-summary-item { color: var(--white); font-weight: 500; }
.bk-summary-sep { color: var(--border); }

.bk-review { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; margin-top: 1rem; }
.bk-review-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.bk-review-table th { text-align: left; color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; padding: 0 0 8px; border-bottom: 1px solid var(--border); }
.bk-review-table td { padding: 12px 8px 12px 0; vertical-align: middle; border-bottom: 1px solid var(--border); }
.bk-review-table td:not(:first-child) { text-align: right; }
.bk-review-img { display: inline-flex; vertical-align: middle; margin-right: 10px; }
.bk-review-svc-name { font-weight: 600; color: var(--white); }
.bk-remove-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); width: 22px; height: 22px; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0; margin-right: 8px; vertical-align: middle;
}
.bk-remove-btn:hover { border-color: #f44; color: #f44; }
.bk-slot-info { font-size: 0.82rem; margin-top: 0.75rem; }
.bk-change-link { color: var(--cyan); text-decoration: underline; font-size: 0.8rem; margin-left: 8px; }
.bk-totals-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; }
.bk-totals-h { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 1rem; }
.bk-totals-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--muted); padding: 4px 0; }
.bk-totals-total { font-size: 1rem; font-weight: 700; color: var(--white); }
.bk-divider { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.bk-service-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 1rem; }
.bk-service-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg);
  cursor: pointer; transition: border-color 0.15s; text-align: left; color: var(--white);
}
.bk-service-opt.active { border: 2px solid var(--blue); background: rgba(46,91,255,0.08); }
.bk-service-opt.active .bk-tier-radio { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px var(--card-bg); }
.bk-deposit-notice {
  background: rgba(255,193,7,0.08); border: 1px solid rgba(255,193,7,0.25);
  border-radius: 10px; padding: 12px 16px; font-size: 0.85rem; color: #ffc107; margin-top: 1rem;
}

.bk-details-form { max-width: 640px; }
.bk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bk-form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 1rem; }
.bk-input {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  color: var(--white); padding: 10px 14px; font-size: 0.9rem; font-family: var(--font-family);
  transition: border-color 0.15s;
}
.bk-input:focus { outline: none; border-color: var(--blue); }
.bk-textarea { resize: vertical; min-height: 90px; }
.bk-checkbox-group { flex-direction: row; align-items: flex-start; gap: 8px; }
.bk-check-label { font-size: 0.82rem; color: var(--muted); cursor: pointer; line-height: 1.5; }
.bk-check-label a { color: var(--cyan); }
.bk-check-label input[type="checkbox"] { margin-top: 2px; accent-color: var(--blue); flex-shrink: 0; }

.bk-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff; border: none; border-radius: 10px;
  padding: 11px 24px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  font-family: var(--font-family); transition: background 0.15s;
}
.bk-btn-primary:hover { background: var(--blue-h); }
.bk-btn-primary:disabled { opacity: 0.4; cursor: default; }
.bk-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 20px; font-size: 0.88rem; font-weight: 500;
  cursor: pointer; font-family: var(--font-family); transition: background 0.15s;
}
.bk-btn-ghost:hover { background: rgba(255,255,255,0.05); }
.bk-btn-ghost:disabled { opacity: 0.4; cursor: default; }
.bk-btn-full { width: 100%; }

.bk-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); margin-bottom: 1.25rem; flex-wrap: wrap; }
.bk-breadcrumb a { color: var(--cyan); text-decoration: none; }
.bk-breadcrumb a:hover { text-decoration: underline; }

.bk-loading { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 2rem 0; }
.bk-error-msg { background: rgba(244,67,54,0.1); border: 1px solid rgba(244,67,54,0.3); border-radius: 10px; padding: 12px 16px; color: #f44336; font-size: 0.85rem; margin-bottom: 1rem; }
.bk-muted { color: var(--muted); }
.bk-cyan  { color: var(--cyan); }

.booking-user-notice { background: rgba(46,91,255,0.08); border: 1px solid rgba(46,91,255,0.2); border-radius: 10px; padding: 10px 16px; font-size: 0.85rem; color: var(--muted); margin-bottom: 1rem; }
.booking-user-notice strong { color: var(--white); }
.booking-user-notice a { color: var(--cyan); }

@media (max-width: 768px) {
  .bk-hero { grid-template-columns: 1fr; }
  .bk-hero-right { display: none; }
  .bk-repair-grid { grid-template-columns: repeat(2, 1fr); }
  .bk-dev-grid    { grid-template-columns: repeat(2, 1fr); }
  .bk-cat-grid    { grid-template-columns: repeat(2, 1fr); }
  .bk-detail      { grid-template-columns: 1fr; }
  .bk-review      { grid-template-columns: 1fr; }
  .bk-review-right { order: -1; }
  .bk-form-row    { grid-template-columns: 1fr; }
  .bk-day-cols    { overflow-x: auto; }
  .bk-book-bar    { flex-direction: column; }
  .bk-btn-full    { width: 100%; }
}
@media (max-width: 480px) {
  .bk-repair-grid { grid-template-columns: 1fr; }
  .bk-wizard { padding: 1rem 0.75rem 3rem; }
}

/* ── Profile page ─────────────────────────────────────────────────────────── */
.prof-section {
  margin-bottom: 1.5rem;
}
.prof-section--card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.prof-section__head {
  padding: 1.25rem 1.5rem 0;
}
.prof-section--card .prof-section__head {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
}
.prof-section__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.2rem;
}
.prof-section__sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}
.prof-section__body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.prof-section:not(.prof-section--card) .prof-section__body {
  padding-left: 0;
  padding-right: 0;
}
.prof-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.prof-optional {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.3rem;
}
.prof-actions {
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}
.postcode-lookup-row {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}
.postcode-lookup-row .input-full { flex: 1; }
.profile-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.2rem;
}
.profile-card__meta svg { opacity: 0.5; flex-shrink: 0; }
@media (max-width: 600px) {
  .prof-row-2col { grid-template-columns: 1fr; }
  .postcode-lookup-row { flex-direction: column; align-items: stretch; }
}

/* ── Track page: my bookings picker ──────────────────────────────────────── */
.track-my-bookings { margin-bottom: 1.5rem; }
.track-my-bookings__label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted); margin: 0 0 0.65rem;
}
.track-booking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}
.track-booking-card {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.85rem 1rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  text-align: left; cursor: pointer; font-family: 'Inter', sans-serif;
  transition: border-color 0.15s, background 0.15s;
}
.track-booking-card:hover { border-color: rgba(46,91,255,0.45); background: rgba(46,91,255,0.05); }
.track-booking-card--active { border-color: var(--blue); background: rgba(46,91,255,0.08); }
.tbc__ref     { font-size: 0.78rem; font-weight: 700; color: var(--cyan); font-family: monospace; }
.tbc__device  { font-size: 0.85rem; font-weight: 600; color: var(--white); }
.tbc__service { font-size: 0.75rem; color: var(--muted); }
.tbc__status  {
  display: inline-block; margin-top: 0.35rem; font-size: 0.68rem; font-weight: 700;
  padding: 0.2rem 0.55rem; border-radius: 99px;
}
.tbc__status.badge--yellow { background: rgba(245,166,35,0.15); color: #f5a623; }
.tbc__status.badge--blue   { background: rgba(46,91,255,0.15);  color: #7b9fff; }
.tbc__status.badge--purple { background: rgba(107,63,255,0.15); color: #a07fff; }
.tbc__status.badge--green  { background: rgba(14,184,127,0.15); color: #0eb87f; }
.tbc__status.badge--grey   { background: rgba(168,179,216,0.1); color: var(--muted); }
.tbc__status.badge--red    { background: rgba(240,56,122,0.15); color: #f0387a; }

/* ── Footer v2 ────────────────────────────────────────────────────────────── */
.footer-v2 {
  background: var(--navy2);
  border-top: 1px solid var(--border);
  padding: 3rem 1.5rem 0;
  font-family: 'Inter', sans-serif;
}
.footer-v2__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
}

/* Brand column */
.footer-v2__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  margin-bottom: 0.85rem;
}
.footer-v2__logo img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }
.footer-v2__logo span { font-size: 1.05rem; font-weight: 800; color: var(--white); letter-spacing: -0.01em; }
.footer-v2__tagline {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 1.25rem;
  max-width: 260px;
}
.footer-v2__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer-v2__contact li a {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s;
}
.footer-v2__contact li a:hover { color: var(--white); }
.footer-v2__contact svg { flex-shrink: 0; margin-top: 1px; opacity: 0.6; }

/* Column headings */
.footer-v2__col-heading {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--white);
  margin: 0 0 1rem;
}
/* Column nav links */
.footer-v2__col nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer-v2__col nav a {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1.3;
}
.footer-v2__col nav a:hover { color: var(--white); }

/* Opening hours */
.footer-v2__hours {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.footer-v2__hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.8rem;
  font-size: 0.8rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.footer-v2__hours-row:last-child { border-bottom: none; }
.footer-v2__hours-row--open span:last-child { color: var(--white); font-weight: 600; }
.footer-v2__hours-row--closed { opacity: 0.45; }
.footer-v2__book-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-v2__book-cta:hover { color: var(--cyan); }

/* Bottom bar */
.footer-v2__bottom-wrap {
  border-top: 1px solid var(--border);
}
.footer-v2__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-v2__copy { font-size: 0.73rem; color: var(--muted); margin: 0; }
.footer-v2__legal { display: flex; gap: 1.5rem; }
.footer-v2__legal a { font-size: 0.73rem; color: var(--muted); text-decoration: none; transition: color 0.15s; }
.footer-v2__legal a:hover { color: var(--white); }

/* Responsive */
@media (max-width: 960px) {
  .footer-v2__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  .footer-v2 { padding: 2rem 1rem 0; }
  .footer-v2__inner { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 2rem; }
  .footer-v2__bottom { padding: 1rem 0; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .footer-v2__tagline { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TECH PORTAL — nav, layout, ticket page, flash messages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base body ─────────────────────────────────────────────────────────────── */
.tech-portal-body {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-family);
  min-height: 100vh;
  margin: 0;
}

/* ── Top nav bar ───────────────────────────────────────────────────────────── */
.tech-topnav {
  background: var(--navy2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 200;
  height: 56px;
}
.tech-topnav__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 0 1.25rem;
  max-width: 1600px;
  margin: 0 auto;
}
.tech-topnav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}
.tech-topnav__logo {
  height: 28px;
  width: auto;
}
.tech-topnav__label {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.tech-topnav__name   { font-size: 0.8rem; font-weight: 700; color: var(--white); }
.tech-topnav__portal { font-size: 0.65rem; font-weight: 500; color: var(--muted); }

/* ── Nav links ─────────────────────────────────────────────────────────────── */
.tech-topnav-links {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 0.5rem;
}
.tech-topnav-links::-webkit-scrollbar { display: none; }

.tech-nav-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.65rem;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.tech-nav-link:hover {
  color: var(--white);
  background: rgba(255,255,255,0.06);
}
.tech-nav-link.active {
  color: var(--white);
  background: rgba(46,91,255,0.18);
  border-bottom: 2px solid var(--blue);
}
.tech-nav-link--admin {
  color: var(--cyan);
  border: 1px solid rgba(0,194,232,0.3);
  margin-left: 0.25rem;
}
.tech-nav-link--admin:hover {
  background: rgba(0,194,232,0.1);
  color: var(--cyan);
}
.tech-nav-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 0.25rem;
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .tech-nav-link span { display: none; }
  .tech-nav-link--icon { padding: 0.35rem 0.5rem; }
}

/* ── Right side: search + user pill ───────────────────────────────────────── */
.tech-topnav__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Quick search */
.tech-quicksearch-wrap { position: relative; }
.tech-quicksearch {
  width: 200px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--white);
  font-family: var(--font-family);
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  transition: border-color 0.15s, background 0.15s;
}
.tech-quicksearch::placeholder { color: var(--muted); }
.tech-quicksearch:focus {
  outline: none;
  border-color: rgba(46,91,255,0.5);
  background: rgba(46,91,255,0.06);
}
.tech-quicksearch__results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 320px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 300;
  max-height: 360px;
  overflow-y: auto;
}
.tech-quicksearch__results.open { display: block; }
.tqs-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 0.6rem 0.85rem 0.25rem;
}
.tqs-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  text-decoration: none;
  transition: background 0.12s;
}
.tqs-item:hover { background: rgba(46,91,255,0.1); }
.tqs-ref  { font-size: 0.75rem; font-weight: 700; color: var(--cyan); white-space: nowrap; }
.tqs-name { font-size: 0.8rem; color: var(--white); flex: 1; }
.tqs-status { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.tqs-stock  { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.tqs-low    { color: #f0387a; }
.tqs-empty  { padding: 0.75rem 0.85rem; font-size: 0.8rem; color: var(--muted); }

/* User pill */
.tech-user-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  transition: background 0.15s;
  position: relative;
  user-select: none;
}
.tech-user-pill:hover { background: rgba(255,255,255,0.06); }
.tech-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(46,91,255,0.25);
  color: #7b9fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tech-user-name  { font-size: 0.8rem; font-weight: 600; color: var(--white); }
.tech-user-caret { font-size: 0.65rem; color: var(--muted); }

.tech-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 180px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 300;
  padding: 0.4rem;
}
.tech-user-dropdown.open { display: block; }
.tud__name   { font-size: 0.8rem; font-weight: 700; color: var(--white); padding: 0.4rem 0.6rem 0.1rem; }
.tud__role   { font-size: 0.7rem; color: var(--muted); padding: 0 0.6rem 0.4rem; }
.tud__divider { height: 1px; background: var(--border); margin: 0.25rem 0; }
.tud__item {
  display: block;
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.tud__item:hover { background: rgba(255,255,255,0.06); color: var(--white); }
.tud__item--danger { color: #f0387a; }
.tud__item--danger:hover { background: rgba(240,56,122,0.1); color: #f0387a; }

/* Hamburger (mobile) */
.tech-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.tech-hamburger span {
  display: block;
  height: 2px;
  background: var(--muted);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.tech-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tech-hamburger.open span:nth-child(2) { opacity: 0; }
.tech-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Mobile nav panel ──────────────────────────────────────────────────────── */
.tech-mobile-nav {
  display: none;          /* hidden by default — JS adds .open */
  position: fixed;
  top: 56px;
  left: 0;
  width: 240px;
  height: calc(100vh - 56px);
  background: var(--navy2);
  border-right: 1px solid var(--border);
  z-index: 180;
  padding: 0.75rem 0;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
}
.tech-mobile-nav.open {
  display: block;
  transform: translateX(0);
}
.tech-mobile-nav__link {
  display: block;
  padding: 0.65rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.tech-mobile-nav__link:hover { background: rgba(255,255,255,0.05); color: var(--white); }
.tech-mobile-nav__link--danger { color: #f0387a; }
.tech-mobile-nav__divider { height: 1px; background: var(--border); margin: 0.5rem 0; }

.tech-mobile-overlay {
  display: none;
  position: fixed;
  inset: 56px 0 0 0;
  background: rgba(0,0,0,0.5);
  z-index: 170;
}
.tech-mobile-overlay.open { display: block; }

/* ── Flash messages ────────────────────────────────────────────────────────── */
.tech-flash {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 1px solid transparent;
}
.tech-flash--success { background: rgba(14,184,127,0.12); border-color: rgba(14,184,127,0.3); color: #0eb87f; }
.tech-flash--error   { background: rgba(240,56,122,0.12); border-color: rgba(240,56,122,0.3); color: #f0387a; }
.tech-flash--warning { background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.3); color: #f5a623; }
.tech-flash--info    { background: rgba(0,194,232,0.10); border-color: rgba(0,194,232,0.25); color: var(--cyan); }

/* ── Main content wrapper ──────────────────────────────────────────────────── */
.tech-content {
  padding: 1.75rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Shared tech card title ────────────────────────────────────────────────── */
.tech-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Back link ─────────────────────────────────────────────────────────────── */
.tech-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 1rem;
  transition: color 0.15s;
}
.tech-back-link:hover { color: var(--white); }

/* ── Definition list (booking summary) ────────────────────────────────────── */
.tech-dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.45rem 0.75rem;
  margin: 0;
  font-size: 0.85rem;
}
.tech-dl dt { color: var(--muted); font-weight: 500; align-self: start; padding-top: 1px; }
.tech-dl dd { margin: 0; color: var(--white); word-break: break-word; }

/* ── Quick action buttons ──────────────────────────────────────────────────── */
.quick-status-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── Ticket two-column layout ──────────────────────────────────────────────── */
.tech-ticket-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.25rem;
  align-items: start;
}
.tech-ticket-left  { display: flex; flex-direction: column; gap: 0; }
.tech-ticket-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: calc(56px + 1rem);
  max-height: calc(100vh - 56px - 2rem);
  overflow-y: auto;
}

/* ── Activity log ──────────────────────────────────────────────────────────── */
.tech-event-log {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tech-event {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.tech-event:last-child { border-bottom: none; }
.tech-event__time {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 0.1rem;
}
.tech-event__actor { font-weight: 600; color: var(--white); }
.tech-event__desc  { color: var(--muted); }

/* ── Sub-tasks ─────────────────────────────────────────────────────────────── */
.ticket-task-list { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.ticket-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
  font-size: 0.85rem;
}
.ticket-task:last-child { border-bottom: none; }
.ticket-task--done .ticket-task__check span { text-decoration: line-through; color: var(--muted); }
.ticket-task__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  flex: 1;
  color: var(--white);
}
.ticket-task__del {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.ticket-task__del:hover { opacity: 1; }

/* ── Job timer ─────────────────────────────────────────────────────────────── */
.timer-display {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.timer-running-badge { animation: pulse-green 2s ease-in-out infinite; }
@keyframes pulse-green { 0%,100% { opacity:1; } 50% { opacity:.7; } }

/* ── Wiki related block ────────────────────────────────────────────────────── */
.wiki-related-block {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.wiki-related-heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 0 0 0.65rem;
}
.wiki-related-list { display: flex; flex-direction: column; gap: 0.3rem; }
.wiki-related-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 7px;
  text-decoration: none;
  color: var(--cyan);
  font-size: 0.84rem;
  transition: background 0.12s;
}
.wiki-related-item:hover { background: rgba(0,194,232,0.07); }
.wiki-related-icon::before { content: '📄'; font-size: 0.8rem; }

/* ── Responsive: tablet/mobile ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tech-ticket-layout { grid-template-columns: 1fr 260px; }
}
@media (max-width: 900px) {
  .tech-topnav__inner { gap: 0.5rem; padding: 0 1rem; }
  .tech-topnav-links { display: none; }
  .tech-quicksearch { width: 140px; }
  .tech-hamburger { display: flex; }
  .tech-ticket-layout { grid-template-columns: 1fr; }
  .tech-ticket-right { order: 1; position: static; max-height: none; overflow-y: visible; }
  .tech-content { padding: 1rem; }
}
@media (max-width: 600px) {
  .tech-topnav__portal { display: none; }
  .tech-user-name { display: none; }
  .tech-quicksearch { width: 110px; }
  .tech-dl { grid-template-columns: 100px 1fr; }
}

/* ── Fix: prevent Book a Repair button being squashed in topbar ─────────── */
.btn-book { flex-shrink: 0; }

/* ── Assets / stock system ──────────────────────────────────────────────── */
.stock-ok    { color: #22c55e; }
.stock-low   { color: #f59e0b; }
.stock-empty { color: #ef4444; }

.kpi-value { font-size: 1.75rem; font-weight: 700; color: var(--white); line-height: 1; }
.kpi-label { font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; }
.kpi-card  { text-align: center; padding: 1rem; }

.page-title  { font-size: 1.5rem; font-weight: 700; color: var(--white); margin: 0; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }

.detail-list { display: grid; grid-template-columns: 120px 1fr; gap: 0.5rem 1rem; margin: 0; }
.detail-list dt { color: var(--muted); font-size: 0.85rem; font-weight: 500; align-self: start; padding-top: 2px; }
.detail-list dd { margin: 0; color: var(--white); font-size: 0.9rem; }

/* ── Phase 2: asset search, inline adjust, GI badges ───────────────────── */
.asset-search-dropdown { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; margin-top: 0.25rem; max-height: 240px; overflow-y: auto; }
.asset-result-item { padding: 0.6rem 1rem; cursor: pointer; font-size: 0.875rem; border-bottom: 1px solid var(--border); transition: background 0.1s; }
.asset-result-item:last-child { border-bottom: none; }
.asset-result-item:hover { background: rgba(46,91,255,0.1); }

.stock-adjust-form { display: inline-flex; align-items: center; gap: 0.35rem; }
.btn-icon { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--white); font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s; }
.btn-icon:hover { background: rgba(255,255,255,0.08); }
.stock-qty { min-width: 2rem; text-align: center; font-weight: 600; }

tr.stock-low-row   td:first-child { border-left: 3px solid #f59e0b; }
tr.stock-empty-row td:first-child { border-left: 3px solid #ef4444; }

.gi-status-draft    { background: rgba(168,179,216,0.15); color: var(--muted); }
.gi-status-received { background: rgba(34,197,94,0.15);   color: #22c55e; }
.gi-status-invoiced { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.gi-status-paid     { background: rgba(46,91,255,0.15);   color: var(--blue); }

.parts-cost-summary { padding: 0.75rem; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid var(--border); font-size: 0.9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUSINESS PAGE — /business
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero — matches hero-carousel card proportions ────────────────────────── */
.biz-hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 70px rgba(0,0,0,0.36);
  min-height: 520px;
  display: flex;
  align-items: center;
  background-image: url('/images/hero/slide-technician.jpg');
  background-size: cover;
  background-position: center;
  margin-bottom: 1.75rem;
}
.biz-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    rgba(7,14,45,0.94) 0%,
    rgba(7,14,45,0.76) 38%,
    rgba(7,14,45,0.42) 65%,
    rgba(7,14,45,0.15) 100%
  );
  pointer-events: none;
}
.biz-hero__content {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 5.5vw, 4.5rem);
  max-width: 640px;
}
.biz-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
  margin-bottom: 1.5rem;
}
.biz-trust-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.28rem 0.75rem;
  border-radius: 99px;
  backdrop-filter: blur(4px);
}

/* ── Services: sticky pitch + scrolling list ───────────────────────────────── */
.biz-services-wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  padding-top: 5rem;
  padding-bottom: 5rem;
  align-items: start;
}

/* Left sticky pitch */
.biz-pitch {
  position: sticky;
  top: calc(64px + 2rem);
  padding-right: 3rem;
}
.biz-pitch__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: 0.75rem;
}
.biz-pitch__title {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 0 0 1rem;
}
.biz-pitch__body {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.biz-pitch__cta { display: inline-block; margin-bottom: 1.25rem; }
.biz-pitch__contact {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.biz-pitch__contact a { color: var(--cyan); text-decoration: none; transition: color 0.15s; }
.biz-pitch__contact a:hover { color: var(--white); }
.biz-pitch__contact span { opacity: 0.4; }

/* Right scrolling service list */
.biz-service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.biz-svc {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.biz-svc:hover { background: rgba(46,91,255,0.04); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
.biz-svc--cta { background: rgba(46,91,255,0.05); border-radius: 10px; border: 1px solid rgba(46,91,255,0.2); margin-top: 0.75rem; padding: 1.5rem; }
.biz-svc--cta:hover { background: rgba(46,91,255,0.1); }
.biz-svc__num {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: 0.05em;
  min-width: 26px;
  padding-top: 3px;
  flex-shrink: 0;
}
.biz-svc__body { flex: 1; }
.biz-svc__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.4rem;
}
.biz-svc__desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.biz-svc__link {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding-top: 3px;
  transition: color 0.15s;
  flex-shrink: 0;
}
.biz-svc__link:hover { color: var(--cyan); }

/* ── Bottom CTA ────────────────────────────────────────────────────────────── */
.biz-final-cta {
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(46,91,255,0.18) 0%, transparent 65%),
    var(--navy2);
  border-top: 1px solid var(--border);
}
.biz-final-cta__title {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 0 0 0.75rem;
}
.biz-final-cta__sub {
  font-size: 1rem;
  color: var(--muted);
  margin: 0 0 2rem;
}
.biz-final-cta__sub a { color: var(--cyan); text-decoration: none; }
.biz-final-cta__sub a:hover { text-decoration: underline; }
.biz-final-cta__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .biz-services-wrap { grid-template-columns: 1fr; padding-top: 3rem; padding-bottom: 3rem; }
  .biz-pitch { position: static; padding-right: 0; padding-bottom: 2rem; border-bottom: 1px solid var(--border); margin-bottom: 0; }
}
@media (max-width: 600px) {
  .biz-hero { min-height: 380px; border-radius: 12px; }
  .biz-hero__content { padding: 2rem 1.5rem; }
  .biz-svc { flex-wrap: wrap; }
  .biz-svc__link { flex-basis: 100%; padding-top: 0.5rem; }
}

/* ── Phase 4: suggested parts panel ────────────────────────────────────── */
.suggested-parts-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.suggested-part-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.75rem 1rem; min-width: 180px; max-width: 220px;
  display: flex; flex-direction: column; gap: 0.3rem; transition: border-color 0.15s;
}
.suggested-part-card:hover:not(.out-of-stock) { border-color: var(--blue); }
.suggested-part-card.out-of-stock { opacity: 0.5; }
.sp-name  { font-size: 0.875rem; font-weight: 600; color: var(--white); line-height: 1.3; }
.sp-meta  { font-size: 0.78rem; color: var(--muted); }
.sp-stock { font-size: 0.8rem; margin-bottom: 0.4rem; }
.sp-allocate-btn { margin-top: auto; width: 100%; text-align: center; }
.sp-allocate-btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 600px) {
  .suggested-parts-grid { flex-direction: column; }
  .suggested-part-card  { max-width: 100%; }
}

/* ── Phase 3: photos + scanner ─────────────────────────────────────────── */
.asset-photo-gallery { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.asset-photo-thumb {
  position: relative; width: 100px; height: 100px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: var(--card-bg); flex-shrink: 0;
}
.asset-photo-thumb.uploading { opacity: 0.5; }
.asset-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-photo-thumb .primary-badge {
  position: absolute; top: 4px; left: 4px;
  background: var(--blue); color: #fff;
  font-size: 0.65rem; font-weight: 600; padding: 1px 5px; border-radius: 4px;
}
.asset-photo-thumb .upload-status {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center; font-size: 0.7rem;
  background: rgba(0,0,0,0.6); color: #fff; padding: 2px 0;
}
.asset-photo-thumb .photo-actions {
  position: absolute; top: 0; right: 0; display: none;
  flex-direction: column; gap: 2px; padding: 3px;
  background: rgba(0,0,0,0.5); border-radius: 0 10px 0 8px;
}
.asset-photo-thumb:hover .photo-actions { display: flex; }

.scanner-overlay { animation: scannerPulse 1.5s ease-in-out infinite; }
@keyframes scannerPulse {
  0%, 100% { border-color: var(--blue); box-shadow: 0 0 0 9999px rgba(0,0,0,0.35); }
  50%       { border-color: var(--cyan); box-shadow: 0 0 0 9999px rgba(0,0,0,0.45); }
}

@media (max-width: 600px) {
  .asset-photo-thumb { width: 80px; height: 80px; }
}