/* ==========================================================================
   Honda Markaz — v27 interface layer
   Loaded after app.css. Adds the shared design tokens, gradients, elevation,
   motion and control styling used by the public site, the admin/employee panel
   and the developer panel.
   ========================================================================== */

:root {
  /* Brand ramp */
  --hm-red-050: #fff1f2;
  --hm-red-100: #ffe0e2;
  --hm-red-400: #f4444d;
  --hm-red-500: #e51b23;
  --hm-red-600: #cf0d15;
  --hm-red-700: #a8090f;

  /* Neutral ramp */
  --hm-ink-900: #0b0d10;
  --hm-ink-800: #14171c;
  --hm-ink-700: #1d2127;
  --hm-ink-500: #454c56;
  --hm-ink-400: #69707c;
  --hm-ink-200: #d9dee5;
  --hm-ink-100: #eef1f5;
  --hm-ink-050: #f7f9fb;

  /* Gradients */
  --grad-red: linear-gradient(135deg, var(--hm-red-400) 0%, var(--hm-red-600) 55%, var(--hm-red-700) 100%);
  --grad-red-soft: linear-gradient(135deg, rgba(244, 68, 77, .14), rgba(168, 9, 15, .06));
  --grad-dark: linear-gradient(160deg, #1b1f26 0%, #0d1014 100%);
  --grad-surface: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  --grad-sheen: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 48%, transparent 66%);
  --grad-line: linear-gradient(90deg, transparent, rgba(229, 27, 35, .55), transparent);

  /* Elevation */
  --lift-1: 0 1px 2px rgba(15, 20, 28, .06), 0 2px 8px rgba(15, 20, 28, .05);
  --lift-2: 0 4px 12px rgba(15, 20, 28, .07), 0 12px 28px rgba(15, 20, 28, .07);
  --lift-3: 0 10px 24px rgba(15, 20, 28, .10), 0 26px 60px rgba(15, 20, 28, .12);
  --lift-red: 0 8px 22px rgba(207, 13, 21, .26);

  /* Motion */
  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --dur-fast: .16s;
  --dur: .26s;
  --dur-slow: .5s;

  --ring: 0 0 0 3px rgba(229, 27, 35, .22);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
}

/* -------------------------------------------------------------- Base polish */

::selection { background: rgba(229, 27, 35, .22); }

html { scroll-behavior: smooth; }

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* One consistent, visible keyboard focus ring everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--hm-red-500);
  outline-offset: 2px;
  border-radius: 6px;
}

.ui-icon { stroke-width: 1.8; vertical-align: middle; }

/* Modern, unobtrusive scrollbars in the panels. */
.panel-body *,
.developer-body * { scrollbar-width: thin; }
.panel-body *::-webkit-scrollbar,
.developer-body *::-webkit-scrollbar { width: 10px; height: 10px; }
.panel-body *::-webkit-scrollbar-thumb {
  background: var(--s-border-2);
  border: 3px solid transparent;
  border-radius: 20px;
  background-clip: content-box;
}
.panel-body *::-webkit-scrollbar-thumb:hover { background: var(--s-muted); background-clip: content-box; }
.developer-body *::-webkit-scrollbar-thumb {
  background: var(--s-border-2);
  border: 3px solid transparent;
  border-radius: 20px;
  background-clip: content-box;
}

/* ------------------------------------------------------------------ Motion */

@keyframes hm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hm-spin { to { transform: rotate(360deg); } }
@keyframes hm-sheen { from { transform: translateX(-120%); } to { transform: translateX(220%); } }
@keyframes hm-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(229, 27, 35, .35); } 70% { box-shadow: 0 0 0 12px rgba(229, 27, 35, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 27, 35, 0); } }

/* fill-mode is `backwards`, never `both`: the element's own style stays fully
   visible, and the hidden start state only applies while the animation is
   pending. If animations never run — reduced motion, an old browser, a
   background tab that is not compositing — the content is still on screen. */
.hm-auto-reveal {
  animation: hm-rise var(--dur-slow) var(--ease-out) backwards;
  animation-delay: var(--auto-reveal-delay, 0ms);
}
/* Kept so older markup that still adds the class renders identically. */
.hm-auto-reveal.is-in { opacity: 1; transform: none; }

[data-home-reveal], [data-reveal] {
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

/* ----------------------------------------------------------------- Buttons */

.button,
.hm-btn,
.panel-button,
.dev-button,
.hm-primary-button,
.hm-secondary-button,
.hm-small-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              filter var(--dur) var(--ease-out);
}

/* A single light sweep on hover reads as premium without being noisy. */
.button:not(.button-dark):not(.button-light)::after,
.hm-btn.primary::after,
.panel-button:not(.light):not(.dark)::after,
.dev-button.primary::after,
.hm-primary-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-sheen);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}
.button:not(.button-dark):not(.button-light):hover::after,
.hm-btn.primary:hover::after,
.panel-button:not(.light):not(.dark):hover::after,
.dev-button.primary:hover::after,
.hm-primary-button:hover::after {
  opacity: .9;
  animation: hm-sheen .75s var(--ease-out);
}

.button:not(.button-dark):not(.button-light),
.hm-primary-button,
.panel-button:not(.light):not(.dark),
.hm-btn.primary,
.dev-button.primary {
  background-image: var(--grad-red);
  border-color: var(--hm-red-600);
  color: #fff;
  box-shadow: var(--lift-red);
}

.button:not(.button-dark):not(.button-light):hover,
.hm-primary-button:hover,
.panel-button:not(.light):not(.dark):hover,
.hm-btn.primary:hover,
.dev-button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(207, 13, 21, .34);
  filter: saturate(1.06);
}

.button:active,
.hm-primary-button:active,
.panel-button:active,
.hm-btn:active,
.dev-button:active,
.hm-secondary-button:active { transform: translateY(0) scale(.985); }

.hm-btn:hover,
.dev-button:hover,
.panel-button.light:hover { transform: translateY(-1px); box-shadow: var(--lift-2); }

.hm-secondary-button {
  backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, .34);
}
.hm-secondary-button:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}

.hm-btn.outline:hover { background: var(--tint-red); border-color: var(--hm-red-400); color: var(--s-red-text); }
.dev-button.danger:hover { background: var(--tint-red); border-color: var(--hm-red-600); color: var(--s-red-text); }
.dev-danger-card { border-color: #5a2226; background: linear-gradient(145deg, #1a1213, #100c0d); }
.dev-danger-card h2 { color: #ff8d90; }

.button:disabled,
.hm-btn:disabled,
.panel-button:disabled,
.dev-button:disabled,
.button.is-busy,
.hm-btn.is-busy,
.panel-button.is-busy,
.dev-button.is-busy {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: grayscale(.15);
}

/* Busy spinner while a form is submitting. */
.is-busy::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: hm-spin .7s linear infinite;
  vertical-align: -2px;
}

/* ------------------------------------------------------------------ Inputs */

.form-control,
.panel-input,
.dev-input,
.hm-form-grid input,
.hm-form-grid select,
.hm-form-grid textarea,
.hm-filter-bar input,
.hm-filter-bar select,
.hm-order-filters input,
.hm-order-filters select,
.hm-stacked-form input,
.hm-stacked-form select,
.hm-stacked-form textarea {
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.form-control:focus,
.panel-input:focus,
.hm-form-grid input:focus,
.hm-form-grid select:focus,
.hm-form-grid textarea:focus,
.hm-filter-bar input:focus,
.hm-filter-bar select:focus,
.hm-order-filters input:focus,
.hm-order-filters select:focus,
.hm-stacked-form input:focus,
.hm-stacked-form select:focus,
.hm-stacked-form textarea:focus {
  border-color: var(--hm-red-400);
  box-shadow: var(--ring);
  outline: none;
}

.dev-input:focus {
  border-color: var(--hm-red-500);
  box-shadow: 0 0 0 3px rgba(229, 27, 35, .18);
  background: #15161a;
  outline: none;
}

.panel-input::placeholder,
.form-control::placeholder { color: #9aa2ad; }
.dev-input::placeholder { color: #6d7078; }

input[type="file"].panel-input,
input[type="file"].dev-input { padding-top: 9px; cursor: pointer; }

/* ------------------------------------------------------------------- Cards */

.hm-card,
.panel-card,
.admin-dashboard-card,
.hm-metric-card,
.admin-metric-card {
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.hm-card:hover,
.admin-dashboard-card:hover { box-shadow: var(--lift-2); }

.hm-metric-card,
.admin-metric-card {
  position: relative;
  overflow: hidden;
  background-image: var(--grad-surface);
}

/* Coloured accent rail on every metric tile. */
.hm-metric-card::before,
.admin-metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad-red);
  opacity: .9;
}
.hm-metric-card.tone-blue::before, .admin-metric-card.metric-blue::before { background: linear-gradient(180deg, #4d9bff, #1f5fd0); }
.hm-metric-card.tone-green::before, .admin-metric-card.metric-green::before { background: linear-gradient(180deg, #3ed37f, #159b52); }
.hm-metric-card.tone-orange::before, .admin-metric-card.metric-orange::before { background: linear-gradient(180deg, #ffb648, #e07c05); }
.hm-metric-card.tone-purple::before, .admin-metric-card.metric-purple::before { background: linear-gradient(180deg, #a97bff, #6f36d8); }

.hm-metric-card:hover,
.admin-metric-card:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }

/* Metric tiles that are links (dashboard overview, billing channel glance).
   They must not pick up link colouring or underlines from the anchor. */
a.hm-metric-card,
a.admin-metric-card { color: inherit; text-decoration: none; cursor: pointer; }
a.hm-metric-card:hover,
a.admin-metric-card:hover { border-color: var(--hm-red-400); }

.hm-metric-card i,
.admin-metric-icon {
  background-image: var(--grad-red-soft);
  transition: transform var(--dur) var(--ease-spring);
}
.hm-metric-card:hover i,
.admin-metric-card:hover .admin-metric-icon { transform: scale(1.08) rotate(-4deg); }

.hm-metric-card small.up, .metric-trend.up { color: #12a355; }
.hm-metric-card small.down, .metric-trend.down { color: var(--hm-red-500); }
.hm-metric-card small.flat { color: var(--hm-ink-400); }
.hm-metric-card small { display: inline-flex; align-items: center; gap: 5px; }
.hm-metric-card small .ui-icon { width: 15px; height: 15px; }
.hm-metric-card small em { color: var(--hm-ink-400); font-style: normal; font-weight: 600; }

/* ------------------------------------------------------------------ Tables */

/* Every hover/selected state below uses a translucent tint rather than a fixed
   colour, so it darkens a light table and lightens a dark one instead of
   painting a white row under white text. */

.hm-data-table thead th,
.panel-table thead th,
.admin-data-table thead th,
.dev-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--s-surface-3);
  background-image: none;
  color: var(--s-text-2);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11.5px;
}

.hm-data-table tbody tr,
.panel-table tbody tr,
.admin-data-table tbody tr,
.dev-table tbody tr { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }

.hm-data-table tbody tr:hover,
.panel-table tbody tr:hover,
.admin-data-table tbody tr:hover,
.dev-table tbody tr:hover {
  background: var(--tint-hover);
  color: var(--s-text);
}
.hm-data-table tbody tr:hover td,
.panel-table tbody tr:hover td,
.admin-data-table tbody tr:hover td,
.dev-table tbody tr:hover td { color: var(--s-text); }
.hm-data-table tbody tr:hover a:not(.hm-btn):not(.dev-button):not(.panel-button),
.panel-table tbody tr:hover a:not(.hm-btn):not(.dev-button):not(.panel-button),
.dev-table tbody tr:hover a:not(.hm-btn):not(.dev-button):not(.panel-button) { color: var(--hm-red-400); }
.hm-data-table tbody tr:hover .panel-note,
.panel-table tbody tr:hover .panel-note,
.dev-table tbody tr:hover .panel-note { color: var(--s-muted); }

.hm-data-table tbody tr.selected,
.panel-table tbody tr.selected,
.dev-table tbody tr.selected {
  background: var(--tint-red);
  color: var(--s-text);
  box-shadow: inset 3px 0 0 var(--hm-red-500);
}
.hm-data-table tbody tr.selected td,
.panel-table tbody tr.selected td,
.dev-table tbody tr.selected td { color: var(--s-text); }

.hm-table-scroll,
.panel-table-wrap { overflow: auto; overscroll-behavior-x: contain; }

/* --------------------------------------------------------- Status pills */

.hm-status,
.status {
  border: 1px solid transparent;
  letter-spacing: .02em;
  white-space: nowrap;
}

.status-completed, .status-paid, .status-approved, .hm-status.success {
  background: #e6f8ee; color: #0f7f42; border-color: #b6e8ce;
}
.status-pending, .status-requested, .status-new, .status-unpaid, .hm-status.warning {
  background: #fff5e3; color: #9a5c00; border-color: #ffdda6;
}
.status-processing, .status-in_progress, .status-in-progress, .status-confirmed, .status-scheduled, .status-contacted, .status-partial {
  background: #e8f1ff; color: #1a56b8; border-color: #c2daff;
}
.status-cancelled, .status-declined, .status-refunded, .hm-status.danger {
  background: #ffecee; color: #b3151d; border-color: #ffc8cc;
}
.status-ready, .status-received {
  background: #f0ecff; color: #5b32c4; border-color: #d9cfff;
}
.hm-status.neutral {
  background: #eef0f3; color: #4b4f58; border-color: #dadde3;
}

/* ------------------------------------------------- Public site refinements */

.hm-site-header {
  position: sticky;
  top: 0;
  transition: box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.hm-site-header.is-stuck {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px);
}

.hm-main-nav a { position: relative; }
.hm-main-nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.hm-main-nav a:hover::after,
.hm-main-nav a.active::after { transform: scaleX(1); }

.hm-tool .ui-icon { width: 20px; height: 20px; }
.hm-tool, .hm-login-button { transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.hm-tool:hover, .hm-login-button:hover { transform: translateY(-1px); color: #fff; }
.hm-cart-tool em { animation: hm-pop .3s var(--ease-spring); }

/* Hero */
.hm-hero-content > * { animation: hm-rise .55s var(--ease-out) both; }
.hm-hero-slide:not(.active) .hm-hero-content > * { animation: none; }
.hm-hero-content .hm-hero-eyebrow { animation-delay: .04s; }
.hm-hero-content h1 { animation-delay: .10s; }
.hm-hero-content p { animation-delay: .16s; }
.hm-hero-content .hm-hero-trust { animation-delay: .22s; }
.hm-hero-content .hm-hero-actions { animation-delay: .28s; }

.hm-hero-trust span .ui-icon { color: var(--hm-red-400); }

.hm-hero-rail button { transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.hm-hero-rail button:hover { opacity: 1; }
.hm-hero-rail button.active { animation: hm-pulse-ring 1.8s var(--ease-out) 1; border-radius: 4px; }

.hm-slider-controls button {
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.hm-slider-controls button:hover { transform: scale(1.08); background: var(--hm-red-500); color: #fff; }

.hm-under-hero-actions a { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.hm-under-hero-actions a:hover { transform: translateY(-4px); box-shadow: var(--lift-3); }
.hm-under-hero-actions a:hover > .ui-icon:last-child { transform: translateX(4px); }
.hm-under-hero-actions a > .ui-icon:last-child { transition: transform var(--dur) var(--ease-out); }

.hm-footer-social-v8 a {
  display: inline-grid;
  place-items: center;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hm-footer-social-v8 a .ui-icon { width: 18px; height: 18px; }
.hm-footer-social-v8 a:hover { transform: translateY(-2px); background: var(--hm-red-500); color: #fff; }

.hm-bike-card, .hm-parts-grid a, .hm-why-grid span {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hm-bike-card:hover, .hm-parts-grid a:hover { transform: translateY(-5px); box-shadow: var(--lift-3); }
.hm-bike-card:hover .hm-bike-image img { transform: scale(1.06); }
.hm-bike-image img { transition: transform var(--dur-slow) var(--ease-out); }

.flash {
  animation: hm-rise .3s var(--ease-out) both;
  box-shadow: var(--lift-2);
}
.flash.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s; }

/* -------------------------------------------- Public inner pages (shop etc.) */

.page-hero {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(120deg, #0d1014 0%, #14181e 55%, #0b0d10 100%);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 27, 35, .22), transparent 62%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { animation: hm-rise .5s var(--ease-out) both; }
.page-hero p { animation: hm-rise .5s var(--ease-out) .08s both; }

.product-card, .service-card {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.product-card:hover, .service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--lift-3);
  border-color: var(--hm-red-400);
}
.product-media img, .service-card-media img { transition: transform var(--dur-slow) var(--ease-out); }
.product-card:hover .product-media img,
.service-card:hover .service-card-media img { transform: scale(1.06); }

.product-tag { background-image: var(--grad-red); color: #fff; }
.icon-button {
  transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) var(--ease-out);
}
.icon-button:hover { transform: scale(1.12) rotate(90deg); }

.filter-card, .summary-card, .account-card, .auth-card, .content-card, .booking-form {
  box-shadow: var(--lift-1);
  transition: box-shadow var(--dur) var(--ease-out);
}
.filter-card:hover, .summary-card:hover, .account-card:hover { box-shadow: var(--lift-2); }

.auth-card { animation: hm-rise .45s var(--ease-out) both; }

.empty-state {
  border: 1px dashed var(--hm-ink-200);
  border-radius: var(--radius-lg);
  background: var(--hm-ink-050);
}

.summary-line.total { border-top: 2px solid var(--hm-ink-100); }
.summary-line.total strong { color: var(--hm-red-600); }

.account-nav a { transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.account-nav a:hover { transform: translateX(3px); }
.account-nav a.active { background-image: linear-gradient(90deg, var(--hm-red-050), transparent); box-shadow: inset 3px 0 0 var(--hm-red-500); }

.order-row { transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
a.order-row:hover { background: var(--tint-hover); color: var(--s-text); transform: translateX(3px); }

/* --------------------------------------------------- Panel shell refinements */

.panel-sidebar { background-image: var(--grad-dark); }

.panel-nav a,
.dev-sidebar nav a {
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.panel-nav a::before,
.dev-sidebar nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--grad-red);
  transform: translateY(-50%);
  transition: height var(--dur) var(--ease-spring);
}
.panel-nav a:hover, .dev-sidebar nav a:hover { transform: translateX(2px); }
.panel-nav a.active::before,
.dev-sidebar nav a.active::before { height: 62%; }
.panel-nav a.active,
.dev-sidebar nav a.active { background-image: linear-gradient(90deg, rgba(229, 27, 35, .18), transparent 70%); }

.panel-topbar, .dev-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
}

.panel-admin-avatar, .dev-avatar {
  background-image: var(--grad-red);
  color: #fff;
  box-shadow: var(--lift-red);
}

.panel-top-icon { transition: transform var(--dur-fast) var(--ease-out); }
.panel-top-icon:hover { transform: translateY(-2px); }
.panel-top-icon em { animation: hm-pop .3s var(--ease-spring); }

.panel-profile-menu {
  box-shadow: var(--lift-3);
  transform-origin: top right;
}
.panel-profile-wrap.open .panel-profile-menu { animation: hm-pop .18s var(--ease-out) both; }

.panel-alert, .dev-alert {
  position: relative;
  padding-left: 16px;
  border-radius: var(--radius-sm);
  animation: hm-rise .3s var(--ease-out) both;
}
.panel-alert::before, .dev-alert::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: currentColor;
  opacity: .7;
}

.dev-alert-warning { background: rgba(224, 124, 5, .12); border: 1px solid rgba(255, 182, 72, .4); color: #ffce8a; }

/* Admin welcome banner */
.admin-welcome-banner { position: relative; overflow: hidden; }
.admin-welcome-banner::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 62%);
  pointer-events: none;
}
.admin-welcome-bike { transition: transform .8s var(--ease-out); }
.admin-welcome-banner:hover .admin-welcome-bike { transform: translateY(-6px) scale(1.02); }

.admin-quick-actions nav a i,
.employee-quick a i { transition: transform var(--dur) var(--ease-spring); }
.admin-quick-actions nav a:hover i,
.employee-quick a:hover i { transform: scale(1.12) rotate(-5deg); }
.admin-quick-actions nav a,
.admin-approval-list a,
.admin-activity-list a,
.employee-metrics a,
.employee-quick a { transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.admin-quick-actions nav a:hover,
.admin-approval-list a:hover,
.admin-activity-list a:hover { transform: translateX(3px); }
.employee-metrics a:hover, .employee-quick a:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }

.chart-line.current { filter: drop-shadow(0 4px 10px rgba(229, 27, 35, .28)); }
.admin-line-chart svg { overflow: visible; }

.panel-chart-bar { background-image: var(--grad-red); border-radius: 6px 6px 0 0; transition: filter var(--dur-fast); }
.panel-chart-bar:hover { filter: brightness(1.12); }

/* Payment method chips (billing desk) */
.payment-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.payment-method-chip { position: relative; cursor: pointer; }
.payment-method-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.payment-method-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--hm-ink-200);
  border-radius: 20px;
  background: #fff;
  color: var(--hm-ink-500);
  font-size: 13px;
  font-weight: 750;
  transition: all var(--dur-fast) var(--ease-out);
}
.payment-method-chip:hover span { border-color: var(--hm-red-400); color: var(--s-red-text); background: var(--tint-red); }
.payment-method-chip input:checked + span {
  background-image: var(--grad-red);
  border-color: var(--hm-red-600);
  color: #fff;
  box-shadow: var(--lift-red);
}
.payment-method-chip input:focus-visible + span { box-shadow: var(--ring); }
.hm-field-title { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 800; color: var(--hm-ink-500); }

/* Technician checklist */
.service-checklist header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hm-checklist-count { font-size: 12px; font-weight: 800; color: var(--hm-ink-400); white-space: nowrap; }
.hm-checklist-bar {
  height: 6px;
  margin: 0 14px 10px;
  border-radius: 20px;
  background: var(--hm-ink-100);
  overflow: hidden;
}
.hm-checklist-bar i { display: block; height: 100%; background-image: var(--grad-red); transition: width var(--dur) var(--ease-out); }
.service-checklist label.is-done span { color: var(--hm-ink-400); text-decoration: line-through; }
.service-checklist label.is-done em { color: #12a355; }
.hm-checklist-note { margin: 10px 14px; font-size: 12px; line-height: 1.6; color: var(--hm-ink-400); }

/* ------------------------------------------------- Developer panel refinements */

.developer-body { background-image: radial-gradient(1100px 520px at 12% -8%, rgba(229, 27, 35, .10), transparent 60%), #0a0b0d; }

.dev-card {
  border-radius: var(--radius-md);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.dev-card:hover { border-color: var(--s-border-2); }

.dev-summary-card {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(150deg, #16181c, #0f1013);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.dev-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-line);
}
.dev-summary-card:hover { transform: translateY(-3px); border-color: var(--s-border-2); }
.dev-summary-card strong.is-ok { color: #3ed37f; }
.dev-summary-card strong.is-bad { color: #ff7a80; }

.dev-section-link { transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.dev-section-link:hover { transform: translateY(-4px); border-color: var(--hm-red-600); }

.dev-login-card {
  box-shadow: 0 40px 100px rgba(0, 0, 0, .55);
  animation: hm-rise .5s var(--ease-out) both;
}
.dev-login-body { background-image: radial-gradient(900px 480px at 50% -10%, rgba(229, 27, 35, .16), transparent 62%), #08090b; }

.dev-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.dev-setup-side { display: grid; gap: 14px; min-width: 0; }
.dev-setup-side .dev-card { margin-bottom: 0; }

.dev-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dev-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #2b2c31;
  border-radius: var(--radius-sm);
  background: #101114;
}
.dev-check-list li.ok i { color: #3ed37f; }
.dev-check-list li.bad { border-color: rgba(229, 27, 35, .4); background: rgba(229, 27, 35, .07); }
.dev-check-list li.bad i { color: #ff7a80; }
.dev-check-list i { display: grid; place-items: center; flex: 0 0 auto; }
.dev-check-list .ui-icon { width: 17px; height: 17px; }
.dev-check-list span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dev-check-list strong { font-size: 12.5px; color: #eceef1; font-weight: 750; }
.dev-check-list small { font-size: 11.5px; color: #8b9099; line-height: 1.5; }

.dev-table-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dev-table-chips span {
  padding: 5px 11px;
  border: 1px solid rgba(229, 27, 35, .35);
  border-radius: 20px;
  background: rgba(229, 27, 35, .09);
  color: #ffb9bc;
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dev-note-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: #a4a9b2; font-size: 12.5px; line-height: 1.65; }
.dev-note-list code { padding: 2px 6px; border-radius: 5px; background: #202227; color: #ffd7d9; font-size: 12px; }

.dev-field small { display: block; margin-top: 5px; color: #7d828b; font-size: 11.5px; }
.dev-checkbox { transition: color var(--dur-fast); }
.dev-checkbox:hover { color: var(--s-text); }

.dev-location-status { letter-spacing: .06em; }
.dev-location-status.enabled { box-shadow: 0 0 0 1px rgba(62, 211, 127, .35) inset; }

/* -------------------------------------------------------- Counter sale (POS) */

.pos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}

.pos-search { display: flex; align-items: center; gap: 8px; min-width: 240px; }
.pos-search .ui-icon { color: var(--hm-ink-400); flex: 0 0 auto; }
.pos-search .panel-input { min-height: 40px; }

.pos-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  padding: 16px;
}

.pos-product {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--hm-ink-200);
  border-radius: var(--radius-md);
  background-image: var(--grad-surface);
  box-shadow: var(--lift-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.pos-product:hover { transform: translateY(-3px); box-shadow: var(--lift-2); border-color: var(--hm-red-400); }

.pos-product-media {
  display: block;
  height: 108px;
  border-radius: var(--radius-sm);
  background: var(--hm-ink-050);
  overflow: hidden;
}
.pos-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.pos-product:hover .pos-product-media img { transform: scale(1.05); }

.pos-product-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pos-product-body strong { font-size: 14px; line-height: 1.3; color: var(--hm-ink-800); }
.pos-product-body small { font-size: 11.5px; color: var(--hm-ink-400); }
.pos-product-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.pos-product-meta b { font-size: 15px; color: var(--hm-red-600); }

.pos-add-form { display: flex; gap: 8px; margin-top: auto; }
.pos-add-form .panel-input { width: 76px; min-height: 40px; text-align: center; }
.pos-add-form .panel-button { flex: 1; min-height: 40px; padding: 0 12px; }
.pos-add-form .ui-icon { width: 16px; height: 16px; }

.pos-cart { position: sticky; top: 96px; }
.pos-cart-form { display: grid; gap: 8px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--hm-ink-100); }
.pos-cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px auto 32px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--hm-ink-050);
}
.pos-cart-row strong { font-size: 13px; line-height: 1.35; min-width: 0; }
.pos-cart-row .panel-input { min-height: 36px; padding: 4px 8px; text-align: center; }
.pos-cart-row span { font-size: 13px; font-weight: 800; white-space: nowrap; }
.pos-cart-row .remove-button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--hm-ink-200);
  border-radius: 8px;
  background: #fff;
  color: var(--hm-ink-400);
  font-size: 17px;
  line-height: 1;
  transition: all var(--dur-fast) var(--ease-out);
}
.pos-cart-row .remove-button:hover { border-color: var(--hm-red-400); background: var(--tint-red); color: var(--s-red-text); }

.pos-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 34px 16px;
  text-align: center;
  color: var(--hm-ink-400);
}
.pos-empty .ui-icon { width: 34px; height: 34px; color: var(--hm-ink-200); }
.pos-empty strong { color: var(--hm-ink-700); }

.pos-complete-form .panel-button { width: 100%; }

.pos-service-form {
  padding: 14px;
  margin-bottom: 14px;
  border: 1px dashed var(--s-border-2);
  border-radius: var(--radius-sm);
  background: var(--s-surface-2);
}
.pos-service-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 78px; gap: 8px; margin-bottom: 10px; }
.pos-service-row .panel-input { min-height: 40px; }
.pos-service-form .panel-button { width: 100%; }
.pos-extra-list { display: grid; gap: 8px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--s-border); }
.pos-extra-list .pos-cart-row { grid-template-columns: minmax(0, 1fr) auto 32px; }
.pos-extra-list .pos-cart-row strong { display: flex; flex-direction: column; gap: 2px; }
.pos-extra-list .pos-cart-row small { font-weight: 600; font-size: 11.5px; color: var(--s-muted); }

.customer-invoices header h2 small {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--hm-red-500);
}

@media (max-width: 620px) {
  .pos-service-row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- Sales by section */

.section-range { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.section-range label { display: flex; flex-direction: column; gap: 4px; }
.section-range small { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--s-muted); }
.section-range .panel-input { min-height: 42px; }

.section-split { align-items: start; }
.section-bars { display: grid; gap: 16px; margin-bottom: 16px; }
.section-bar span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.section-bar strong { font-size: 13.5px; color: var(--s-text); }
.section-bar b { font-size: 14px; color: var(--s-text); }
.section-bar i {
  display: block;
  height: 10px;
  border-radius: 20px;
  background: var(--s-surface-3);
  overflow: hidden;
}
.section-bar i em {
  display: block;
  height: 100%;
  border-radius: 20px;
  background: var(--grad-red);
  transition: width .6s var(--ease-out);
}
.section-bar.tone-blue i em { background: linear-gradient(90deg, #4d9bff, #1f5fd0); }
.section-bar.tone-purple i em { background: linear-gradient(90deg, #a97bff, #6f36d8); }
.section-bar.tone-green i em { background: linear-gradient(90deg, #3ed37f, #159b52); }
.section-bar small { display: block; margin-top: 6px; font-size: 12px; color: var(--s-muted); }

.section-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px;
  margin-top: 16px;
}

.hm-section-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-sm);
  background: var(--s-surface-2);
  color: var(--s-muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.hm-section-note .ui-icon { flex: 0 0 auto; width: 17px; height: 17px; color: var(--hm-red-500); }
.hm-section-note a { color: var(--hm-red-500); font-weight: 750; white-space: nowrap; }

.hm-page-tabs a b {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--tint-strong);
  font-size: 11.5px;
}
.hm-page-tabs a.active b { background: var(--tint-red); color: var(--s-red-text); }
.hm-page-tabs a .ui-icon { width: 16px; height: 16px; }

.panel-table tfoot th {
  background: var(--s-surface-3);
  color: var(--s-text);
  font-weight: 800;
}

.pos-recent { margin-bottom: 16px; }
.pos-recent-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.pos-recent-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-sm);
  background: var(--s-surface-2);
  color: var(--s-text);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pos-recent-list a:hover { transform: translateY(-2px); border-color: var(--hm-red-400); }
.pos-recent-list i {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background-image: var(--grad-red-soft);
  color: var(--hm-red-500);
}
.pos-recent-list i .ui-icon { width: 17px; height: 17px; }
.pos-recent-list span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pos-recent-list strong { font-size: 13.5px; }
.pos-recent-list small { font-size: 11.5px; color: var(--s-muted); }
.pos-recent-list b { margin-left: auto; font-size: 13.5px; color: var(--hm-red-500); white-space: nowrap; }

/* The printable invoice always prints on white, whatever the panel theme is. */
body.invoice-body { background: #fff !important; color: #14171c !important; }
body.invoice-body .service-invoice,
body.invoice-body .invoice-table,
body.invoice-body .invoice-summary { color: #14171c !important; }
body.invoice-body .invoice-actions { display: flex; gap: 12px; align-items: center; justify-content: space-between; }

@media (max-width: 1080px) {
  .pos-layout { grid-template-columns: minmax(0, 1fr); }
  .pos-cart { position: static; }
}

/* ------------------------------------------- Icon sizing in replaced glyphs */

.hm-row-actions .ui-icon,
.admin-row-more .ui-icon { width: 16px; height: 16px; }

.hm-row-actions a,
.hm-row-actions button,
.admin-row-more {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: var(--hm-ink-400);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hm-row-actions a:hover,
.hm-row-actions button:hover,
.admin-row-more:hover {
  background: var(--tint-red);
  color: var(--s-red-text);
  transform: translateY(-1px);
}

.metric-trend b .ui-icon { width: 14px; height: 14px; vertical-align: -2px; }

.admin-chart-period {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--hm-ink-200);
  border-radius: 20px;
  background: var(--hm-ink-050);
  color: var(--hm-ink-500);
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
}
.admin-chart-period .ui-icon { width: 15px; height: 15px; color: var(--hm-red-500); }

.panel-caret {
  display: inline-grid;
  place-items: center;
  transition: transform var(--dur) var(--ease-spring);
}
.panel-caret .ui-icon { width: 15px; height: 15px; transform: rotate(90deg); }
.panel-profile-wrap.open .panel-caret { transform: rotate(180deg); }

.dash-metric i .ui-icon,
.hm-alert-list i .ui-icon { width: 19px; height: 19px; }
.dash-metric i, .hm-alert-list i { display: grid; place-items: center; }
.hm-alert-list i { color: #e07c05; }

.admin-quick-actions nav a b { display: inline-grid; place-items: center; }
.admin-quick-actions nav a b .ui-icon { width: 15px; height: 15px; }

/* ------------------------------------------------ Developer: user accounts */

.dev-lock-card {
  max-width: 520px;
  margin: 40px auto;
  padding: 34px 30px;
  text-align: center;
  animation: hm-rise .4s var(--ease-out) both;
}
.dev-lock-mark {
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(229, 27, 35, .4);
  border-radius: 50%;
  background: rgba(229, 27, 35, .1);
  color: var(--hm-red-400);
}
.dev-lock-mark .ui-icon { width: 30px; height: 30px; }
.dev-lock-card h2 { margin: 0 0 8px; font-size: 21px; }
.dev-lock-card > p { margin: 0 auto 20px; max-width: 400px; color: #9aa2ad; font-size: 13px; line-height: 1.65; }
.dev-lock-card code { padding: 2px 6px; border-radius: 5px; background: #202227; color: #ffd7d9; font-size: 12px; }
.dev-lock-card .dev-form { text-align: left; }
.dev-lock-note { margin: 16px 0 0; color: #71767f; font-size: 11.5px; }

.dev-inline-form { display: inline-flex; }
.dev-user-filters { align-items: end; gap: 10px; margin-bottom: 12px; }

.dev-user-table td { vertical-align: middle; }
.dev-user-table tr.selected { background: rgba(229, 27, 35, .09); box-shadow: inset 3px 0 0 var(--hm-red-500); }
.dev-user-table .dev-button { min-height: 32px; padding: 0 12px; }
.dev-user-table .dev-button .ui-icon { width: 14px; height: 14px; }

.dev-role-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.dev-role-tag.role-admin { background: rgba(229, 27, 35, .14); border-color: rgba(229, 27, 35, .4); color: #ff9ba0; }
.dev-role-tag.role-employee { background: rgba(77, 155, 255, .14); border-color: rgba(77, 155, 255, .4); color: #9dc6ff; }
.dev-role-tag.role-customer { background: rgba(62, 211, 127, .12); border-color: rgba(62, 211, 127, .34); color: #8fe6b4; }

.dev-hash-note {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #71767f;
  letter-spacing: .04em;
  cursor: help;
}

.dev-password-reveal {
  border-color: rgba(62, 211, 127, .45);
  background-image: linear-gradient(150deg, rgba(62, 211, 127, .10), #0f1013);
  animation: hm-pop .3s var(--ease-out) both;
}
.dev-reveal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}
.dev-reveal-row > span { display: flex; flex-direction: column; gap: 5px; min-width: 200px; flex: 1; }
.dev-reveal-row small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8b9099; }
.dev-reveal-row strong { font-size: 14px; color: #eceef1; }
.dev-reveal-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px !important;
  letter-spacing: .06em;
  color: #8ef0b0 !important;
  background: #05070a !important;
  border-color: rgba(62, 211, 127, .4) !important;
}

@media (max-width: 780px) {
  .dev-reveal-row { flex-direction: column; align-items: stretch; }
  .dev-reveal-row > span { min-width: 0; }
}

/* ==========================================================================
   THEME SYSTEM — light / dark for the admin, employee and developer panels
   --------------------------------------------------------------------------
   app.css was built up in layers and left a few components with the original
   dark panel background while the surrounding text had already moved to the
   light theme (metric cards on Reports, wholesale tiles, summary lines). That
   produced dark text on a dark box. Everything below re-declares those surfaces
   from one set of semantic tokens, so both themes stay readable.
   ========================================================================== */

:root,
html[data-theme="light"] {
  --s-bg: #f4f6fa;
  --s-surface: #ffffff;
  --s-surface-2: #f8fafc;
  --s-surface-3: #eef2f7;
  --s-text: #171a20;
  --s-text-2: #3f4650;
  --s-muted: #6b7280;
  --s-border: #e2e6eb;
  --s-border-2: #cfd6de;
  --s-input-bg: #ffffff;
  --s-input-text: #171a20;
  --s-sidebar: #202832;
  --s-sidebar-2: #171e27;
  --s-sidebar-text: #e8ecf1;
  --s-sidebar-muted: #97a1ae;
  --s-topbar: rgba(255, 255, 255, .92);
  --s-shadow-1: 0 1px 2px rgba(15, 20, 28, .06), 0 2px 8px rgba(15, 20, 28, .05);
  --s-shadow-2: 0 4px 12px rgba(15, 20, 28, .07), 0 12px 28px rgba(15, 20, 28, .07);
  /* Translucent tints: they darken a light surface and lighten a dark one, so a
     hover state can never paint a background the text cannot be read on. */
  --tint-hover: rgba(15, 20, 28, .045);
  --tint-strong: rgba(15, 20, 28, .085);
  --tint-red: rgba(229, 27, 35, .08);
  --s-red-text: #cf0d15;
}

html[data-theme="dark"] {
  --s-bg: #0c0f13;
  --s-surface: #151920;
  --s-surface-2: #1a1f27;
  --s-surface-3: #222831;
  --s-text: #eef1f5;
  --s-text-2: #ccd2da;
  --s-muted: #97a0ac;
  --s-border: #2a313b;
  --s-border-2: #39414d;
  --s-input-bg: #10141a;
  --s-input-text: #eef1f5;
  --s-sidebar: #0f1319;
  --s-sidebar-2: #0a0d11;
  --s-sidebar-text: #e8ecf1;
  --s-sidebar-muted: #8b95a3;
  --s-topbar: rgba(14, 17, 22, .92);
  --s-shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  --s-shadow-2: 0 6px 18px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .4);
  --tint-hover: rgba(255, 255, 255, .055);
  --tint-strong: rgba(255, 255, 255, .1);
  --tint-red: rgba(229, 27, 35, .16);
  --s-red-text: #ff9ba0;
}

/* Fallback only for a page that somehow renders before the theme script has set
   an attribute. Never applied once data-theme exists, so it cannot fight the
   light theme and produce white text on a white card. */
html:not([data-theme]) body.developer-body {
  --s-bg: #0c0f13;
  --s-surface: #151920;
  --s-surface-2: #1a1f27;
  --s-surface-3: #22272f;
  --s-text: #eef1f5;
  --s-text-2: #ccd2da;
  --s-muted: #97a0ac;
  --s-border: #2a313b;
  --s-border-2: #39414d;
  --s-input-bg: #10141a;
  --s-input-text: #eef1f5;
  --s-topbar: rgba(14, 17, 22, .92);
  --tint-hover: rgba(255, 255, 255, .055);
  --tint-strong: rgba(255, 255, 255, .1);
  --tint-red: rgba(229, 27, 35, .16);
  --s-red-text: #ff9ba0;
}

/* ------------------------------------------------------------ Theme toggle */

.hm-theme-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--s-border-2);
  border-radius: 10px;
  background: var(--s-surface-2);
  color: var(--s-text-2);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hm-theme-toggle:hover { transform: translateY(-2px); border-color: var(--hm-red-400); color: var(--hm-red-500); }
.hm-theme-toggle .ui-icon { width: 18px; height: 18px; }
.hm-theme-toggle > span { display: grid; place-items: center; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring); }
.hm-theme-toggle .hm-theme-moon { position: absolute; inset: 0; }
html[data-theme="light"] .hm-theme-toggle .hm-theme-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
html[data-theme="light"] .hm-theme-toggle .hm-theme-sun { opacity: 1; transform: none; }
html[data-theme="dark"] .hm-theme-toggle .hm-theme-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
html[data-theme="dark"] .hm-theme-toggle .hm-theme-moon { opacity: 1; transform: none; }

/* Colours cross-fade instead of snapping when the theme flips. */
.panel-body, .developer-body,
.panel-body .panel-card, .panel-body .hm-card, .panel-body .admin-dashboard-card,
.developer-body .dev-card {
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

/* ================================================ Admin / employee panel */

body.panel-body { background: var(--s-bg) !important; color: var(--s-text) !important; }
body.panel-body .panel-shell,
body.panel-body .panel-main,
body.panel-body .panel-content { background: transparent !important; color: var(--s-text); }

body.panel-body .panel-sidebar {
  background-image: linear-gradient(180deg, var(--s-sidebar), var(--s-sidebar-2)) !important;
  color: var(--s-sidebar-text) !important;
  border-right: 1px solid var(--s-border);
}
body.panel-body .panel-nav a { color: var(--s-sidebar-muted) !important; }
body.panel-body .panel-nav a:hover,
body.panel-body .panel-nav a.active { color: #fff !important; }
body.panel-body .panel-nav-label { color: var(--s-sidebar-muted) !important; }
body.panel-body .panel-quick-stats dt { color: var(--s-sidebar-muted) !important; }
body.panel-body .panel-quick-stats dd { color: #fff !important; }

body.panel-body .panel-topbar {
  background: var(--s-topbar) !important;
  border-bottom: 1px solid var(--s-border) !important;
  color: var(--s-text) !important;
}
body.panel-body .panel-page-context small { color: var(--hm-red-500) !important; }
body.panel-body .panel-page-context strong { color: var(--s-text) !important; }
body.panel-body .panel-page-context span { color: var(--s-muted) !important; }
body.panel-body .panel-global-search input {
  background: var(--s-input-bg) !important;
  border-color: var(--s-border) !important;
  color: var(--s-input-text) !important;
}
body.panel-body .panel-global-search { background: var(--s-input-bg) !important; border-color: var(--s-border) !important; }

/* "What to search" picker sitting inside the global search pill. */
.panel-global-search select {
  flex: 0 0 auto;
  height: 30px;
  max-width: 118px;
  padding: 0 6px;
  border: 0;
  border-left: 1px solid var(--s-border, #d8dee5);
  border-radius: 0;
  background: transparent;
  color: var(--s-muted, #69717d);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  outline: 0;
}
body.panel-body .panel-global-search select { color: var(--s-muted) !important; border-left-color: var(--s-border) !important; }
@media (max-width: 760px) { .panel-global-search select { display: none; } }
body.panel-body .panel-menu,
body.panel-body .panel-top-icon { color: var(--s-text-2) !important; border-color: var(--s-border) !important; }

/* The profile pill was dark-on-dark in the light panel. */
body.panel-body .panel-admin-profile { background: transparent !important; border-color: transparent !important; }
body.panel-body .panel-profile-wrap .panel-admin-profile:hover,
body.panel-body .panel-profile-wrap.open .panel-admin-profile {
  background: var(--s-surface-3) !important;
  border-color: var(--s-border-2) !important;
}
body.panel-body .panel-admin-profile strong { color: var(--s-text) !important; }
body.panel-body .panel-admin-profile small { color: var(--s-muted) !important; }
body.panel-body .panel-admin-profile b { color: var(--s-muted) !important; }
body.panel-body .panel-profile-menu {
  background: var(--s-surface) !important;
  border: 1px solid var(--s-border) !important;
  color: var(--s-text) !important;
}
body.panel-body .panel-profile-menu a,
body.panel-body .panel-profile-menu button { color: var(--s-text-2) !important; background: transparent !important; }
body.panel-body .panel-profile-menu a:hover,
body.panel-body .panel-profile-menu button:hover { background: var(--s-surface-3) !important; color: var(--s-text) !important; }

/* Cards and panels */
body.panel-body .panel-card,
body.panel-body .hm-card,
body.panel-body .admin-dashboard-card,
body.panel-body .hm-metric-card,
body.panel-body .admin-metric-card,
body.panel-body .metric-card,
body.panel-body .dash-metric,
body.panel-body .employee-summary,
body.panel-body .hm-editor-card {
  background: var(--s-surface) !important;
  background-image: none !important;
  border-color: var(--s-border) !important;
  color: var(--s-text) !important;
  box-shadow: var(--s-shadow-1);
}

/* THE BUG IN THE SCREENSHOT: report and wholesale tiles kept a dark gradient. */
body.panel-body .metric-card span,
body.panel-body .dash-metric > span { color: var(--s-muted) !important; }
body.panel-body .metric-card strong,
body.panel-body .dash-metric strong { color: var(--s-text) !important; }
body.panel-body .dash-metric small { color: var(--s-muted) !important; }
body.panel-body .dash-metric i { background: var(--grad-red-soft) !important; color: var(--hm-red-500) !important; }

body.panel-body h1,
body.panel-body h2,
body.panel-body h3,
body.panel-body .hm-page-head h1,
body.panel-body .panel-section-head h2 { color: var(--s-text) !important; }
body.panel-body .panel-note,
body.panel-body .hm-page-head p,
body.panel-body .admin-empty,
body.panel-body .empty { color: var(--s-muted) !important; }
body.panel-body .panel-section-head a { color: var(--hm-red-500) !important; }

/* Summary rows kept dark borders and light-on-light text. */
body.panel-body .summary-line { border-color: var(--s-border) !important; color: var(--s-text-2) !important; }
body.panel-body .summary-line strong { color: var(--s-text) !important; }
body.panel-body .summary-line.total strong { color: var(--hm-red-600) !important; }
body.panel-body .hm-summary-row { color: var(--s-text-2) !important; border-color: var(--s-border) !important; }
body.panel-body .hm-summary-row strong { color: var(--s-text) !important; }
body.panel-body .hm-line-remove {
  background: var(--s-surface) !important;
  border-color: var(--s-border) !important;
  color: var(--hm-red-600) !important;
}
body.panel-body .hm-line-remove:hover { background: var(--s-surface-2) !important; }
body.panel-body .hm-editor-parts h3 { color: var(--s-text) !important; }

/* Tables */
body.panel-body .panel-table,
body.panel-body .hm-data-table,
body.panel-body .admin-data-table { color: var(--s-text-2) !important; }
body.panel-body .panel-table thead th,
body.panel-body .hm-data-table thead th,
body.panel-body .admin-data-table thead th {
  background: var(--s-surface-3) !important;
  background-image: none !important;
  color: var(--s-text-2) !important;
  border-color: var(--s-border) !important;
}
body.panel-body .panel-table td,
body.panel-body .hm-data-table td,
body.panel-body .admin-data-table td { border-color: var(--s-border) !important; }
body.panel-body .panel-table tbody tr:hover,
body.panel-body .hm-data-table tbody tr:hover,
body.panel-body .admin-data-table tbody tr:hover { background: var(--s-surface-2) !important; }
body.panel-body .panel-table a,
body.panel-body .hm-data-table a.red-link { color: var(--hm-red-500) !important; }

/* Inputs */
body.panel-body .panel-input,
body.panel-body .form-control,
body.panel-body .hm-form-grid input,
body.panel-body .hm-form-grid select,
body.panel-body .hm-form-grid textarea,
body.panel-body .hm-filter-bar input,
body.panel-body .hm-filter-bar select,
body.panel-body .hm-order-filters input,
body.panel-body .hm-order-filters select,
body.panel-body .hm-stacked-form input,
body.panel-body .hm-stacked-form select,
body.panel-body .hm-stacked-form textarea,
body.panel-body .hm-inline-search input {
  background: var(--s-input-bg) !important;
  border-color: var(--s-border) !important;
  color: var(--s-input-text) !important;
}
body.panel-body label,
body.panel-body .panel-field label,
body.panel-body .hm-form-grid label > span { color: var(--s-text-2) !important; }
body.panel-body ::placeholder { color: var(--s-muted) !important; opacity: 1; }

/* Secondary buttons must not vanish in dark mode. */
body.panel-body .hm-btn:not(.primary):not(.outline),
body.panel-body .panel-button.light,
body.panel-body .hm-small-btn:not(.primary) {
  background: var(--s-surface) !important;
  border-color: var(--s-border-2) !important;
  color: var(--s-text) !important;
}
body.panel-body .hm-btn.outline { background: var(--s-surface) !important; color: var(--hm-red-500) !important; border-color: var(--hm-red-400) !important; }
body.panel-body .hm-btn:not(.primary):not(.outline):hover,
body.panel-body .panel-button.light:hover { background: var(--s-surface-3) !important; border-color: var(--hm-red-400) !important; }

body.panel-body .hm-page-tabs a,
body.panel-body .admin-inventory-toolbar nav a { color: var(--s-muted) !important; }
body.panel-body .hm-page-tabs a.active,
body.panel-body .admin-inventory-toolbar nav a.active { color: var(--hm-red-500) !important; }

body.panel-body .panel-alert {
  background: var(--s-surface) !important;
  border: 1px solid var(--s-border) !important;
  color: var(--s-text) !important;
}
body.panel-body .panel-alert-error { color: var(--hm-red-500) !important; border-color: rgba(229, 27, 35, .4) !important; }
body.panel-body .panel-alert-success { color: #12a355 !important; border-color: rgba(18, 163, 85, .4) !important; }

body.panel-body .hm-checklist-bar { background: var(--s-surface-3) !important; }
body.panel-body .payment-method-chip span { background: var(--s-surface) !important; border-color: var(--s-border-2) !important; color: var(--s-text-2) !important; }
body.panel-body .payment-method-chip input:checked + span { background-image: var(--grad-red) !important; color: #fff !important; border-color: var(--hm-red-600) !important; }
body.panel-body .pos-product { background: var(--s-surface) !important; background-image: none !important; border-color: var(--s-border) !important; }
body.panel-body .pos-product-body strong { color: var(--s-text) !important; }
body.panel-body .pos-product-media { background: var(--s-surface-3) !important; }
body.panel-body .pos-cart-row { background: var(--s-surface-2) !important; }
body.panel-body .pos-cart-row .remove-button { background: var(--s-surface) !important; border-color: var(--s-border-2) !important; color: var(--s-muted) !important; }
body.panel-body .admin-chart-period { background: var(--s-surface-2) !important; border-color: var(--s-border) !important; color: var(--s-text-2) !important; }
body.panel-body .empty-state { background: var(--s-surface-2) !important; border-color: var(--s-border-2) !important; color: var(--s-muted) !important; }

/* ============================================================ Welcome banner
   The banner was drawn as a light design with dark text. Switching it to a dark
   background in dark mode left the eyebrow and the description unreadable, so
   both themes now set every text colour explicitly. */

.admin-welcome-banner {
  height: auto !important;
  min-height: 186px;
  padding: 26px 0;
  border-radius: var(--radius-lg) !important;
  border-color: var(--s-border) !important;
  box-shadow: var(--s-shadow-1) !important;
}
.admin-welcome-copy { width: 52%; }
.admin-welcome-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 20px;
  background: var(--tint-strong);
  font-size: 13px !important;
  font-weight: 750;
  letter-spacing: .01em;
}
.admin-welcome-copy h1 {
  margin: 12px 0 8px !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
  letter-spacing: -.035em;
}
.admin-welcome-copy p { font-size: 14px !important; line-height: 1.6; max-width: 46ch; }

html[data-theme="light"] .admin-welcome-banner {
  background-image: linear-gradient(110deg, #ffffff 0%, #f4f6f8 64%, #e4000d 64%, #c5000c 100%) !important;
}
html[data-theme="light"] .admin-welcome-copy > span { color: #1f242b !important; background: rgba(15, 20, 28, .06); }
html[data-theme="light"] .admin-welcome-copy h1 { color: #14171c !important; }
html[data-theme="light"] .admin-welcome-copy p { color: #5b626c !important; }

html[data-theme="dark"] .admin-welcome-banner {
  background-image: linear-gradient(110deg, #171b21 0%, #12151a 62%, #8c060f 62%, #5e040a 100%) !important;
  border-color: #2a313b !important;
}
html[data-theme="dark"] .admin-welcome-copy > span { color: #e6eaf0 !important; background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .admin-welcome-copy h1 { color: #ffffff !important; }
html[data-theme="dark"] .admin-welcome-copy p { color: #b3bac4 !important; }
html[data-theme="dark"] .admin-welcome-banner::after { border-left-color: rgba(255, 90, 98, .3) !important; border-right-color: rgba(255, 90, 98, .16) !important; }

.admin-welcome-copy h1 em { color: var(--hm-red-500) !important; }
html[data-theme="dark"] .admin-welcome-copy h1 em { color: #ff5a62 !important; }

@media (max-width: 900px) {
  .admin-welcome-copy { width: 100%; }
  .admin-welcome-copy p { max-width: none; }
}

/* Banner layout for panels that are not .panel-admin-body (the developer
   dashboard). app.css scopes all of this to the admin body, which left the
   motorcycle and the Honda mark as static full-width blocks. */
.admin-welcome-banner {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.admin-welcome-banner > .admin-welcome-copy {
  position: relative;
  z-index: 3;
  width: 52%;
  padding-left: 34px;
}
.admin-welcome-banner > .admin-welcome-bike {
  position: absolute;
  z-index: 4;
  left: 52%;
  bottom: -10px;
  width: 320px;
  height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35));
}
.admin-welcome-banner > .admin-welcome-brand {
  position: absolute;
  z-index: 4;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  color: #fff;
}
.admin-welcome-banner > .admin-welcome-brand strong { font-family: Georgia, serif; font-size: 24px; letter-spacing: .04em; }
.admin-welcome-banner > .admin-welcome-brand small { margin-top: -2px; font-size: 12px; opacity: .85; }

@media (max-width: 1180px) {
  .admin-welcome-banner > .admin-welcome-brand { display: none; }
  .admin-welcome-banner > .admin-welcome-bike { left: auto; right: 12px; width: 260px; height: 160px; }
  .admin-welcome-banner > .admin-welcome-copy { width: 64%; }
}
@media (max-width: 780px) {
  .admin-welcome-banner > .admin-welcome-bike { opacity: .28; right: -30px; }
  .admin-welcome-banner > .admin-welcome-copy { width: 100%; padding-left: 22px; padding-right: 22px; }
}

/* Dark mode only: charts need a little help. */
html[data-theme="dark"] body.panel-body .chart-grid line { stroke: #2a313b; }
html[data-theme="dark"] body.panel-body .admin-chart-axis span { color: var(--s-muted); }
html[data-theme="dark"] body.panel-body img:not([src$=".svg"]) { filter: brightness(.94); }

/* Status pills need a dark-mode palette or they turn into pale blobs. */
html[data-theme="dark"] .status-completed, html[data-theme="dark"] .status-paid,
html[data-theme="dark"] .status-approved, html[data-theme="dark"] .hm-status.success {
  background: rgba(18, 163, 85, .16); color: #6ee7a4; border-color: rgba(18, 163, 85, .42);
}
html[data-theme="dark"] .status-pending, html[data-theme="dark"] .status-requested,
html[data-theme="dark"] .status-new, html[data-theme="dark"] .status-unpaid,
html[data-theme="dark"] .hm-status.warning {
  background: rgba(224, 124, 5, .16); color: #ffc978; border-color: rgba(224, 124, 5, .42);
}
html[data-theme="dark"] .status-processing, html[data-theme="dark"] .status-in_progress,
html[data-theme="dark"] .status-in-progress, html[data-theme="dark"] .status-confirmed,
html[data-theme="dark"] .status-scheduled, html[data-theme="dark"] .status-contacted,
html[data-theme="dark"] .status-partial {
  background: rgba(77, 155, 255, .16); color: #9dc6ff; border-color: rgba(77, 155, 255, .42);
}
html[data-theme="dark"] .status-cancelled, html[data-theme="dark"] .status-declined,
html[data-theme="dark"] .status-refunded, html[data-theme="dark"] .hm-status.danger {
  background: rgba(229, 27, 35, .16); color: #ff9ba0; border-color: rgba(229, 27, 35, .42);
}
html[data-theme="dark"] .status-ready, html[data-theme="dark"] .status-received {
  background: rgba(140, 100, 255, .16); color: #c4b0ff; border-color: rgba(140, 100, 255, .42);
}
html[data-theme="dark"] .hm-status.neutral {
  background: rgba(255, 255, 255, .08); color: #c7c9d1; border-color: rgba(255, 255, 255, .16);
}

/* ========================================================= Developer panel */

html[data-theme="light"] body.developer-body {
  background-image: radial-gradient(1100px 520px at 12% -8%, rgba(229, 27, 35, .07), transparent 60%);
  background-color: var(--s-bg);
  color: var(--s-text);
}
html[data-theme="light"] body.developer-body .dev-sidebar {
  background-image: linear-gradient(180deg, var(--s-sidebar), var(--s-sidebar-2)) !important;
  color: var(--s-sidebar-text) !important;
}
html[data-theme="light"] body.developer-body .dev-sidebar nav a { color: var(--s-sidebar-muted) !important; }
html[data-theme="light"] body.developer-body .dev-sidebar nav a.active,
html[data-theme="light"] body.developer-body .dev-sidebar nav a:hover { color: #fff !important; }
html[data-theme="light"] body.developer-body .dev-help { background: rgba(255, 255, 255, .06) !important; color: var(--s-sidebar-muted) !important; }
html[data-theme="light"] body.developer-body .dev-help strong { color: #fff !important; }

html[data-theme="light"] body.developer-body .dev-topbar {
  background: var(--s-topbar) !important;
  border-bottom-color: var(--s-border) !important;
  color: var(--s-text) !important;
}
html[data-theme="light"] body.developer-body .dev-topbar h1 { color: var(--s-text) !important; }
html[data-theme="light"] body.developer-body .dev-topbar h1 small { color: var(--s-muted) !important; }
html[data-theme="light"] body.developer-body .dev-user strong { color: var(--s-text) !important; }
html[data-theme="light"] body.developer-body .dev-user small { color: var(--s-muted) !important; }
html[data-theme="light"] body.developer-body .dev-search { background: var(--s-input-bg) !important; border-color: var(--s-border) !important; }
html[data-theme="light"] body.developer-body .dev-logout { color: var(--s-text-2) !important; }

html[data-theme="light"] body.developer-body .dev-card,
html[data-theme="light"] body.developer-body .dev-summary-card,
html[data-theme="light"] body.developer-body .dev-section-link,
html[data-theme="light"] body.developer-body .dev-slide-item,
html[data-theme="light"] body.developer-body .dev-check-list li,
html[data-theme="light"] body.developer-body .dev-login-card {
  background: var(--s-surface) !important;
  background-image: none !important;
  border-color: var(--s-border) !important;
  color: var(--s-text) !important;
  box-shadow: var(--s-shadow-1) !important;
}
html[data-theme="light"] body.developer-body h1,
html[data-theme="light"] body.developer-body h2,
html[data-theme="light"] body.developer-body h3,
html[data-theme="light"] body.developer-body strong,
html[data-theme="light"] body.developer-body .dev-check-list strong { color: var(--s-text) !important; }
html[data-theme="light"] body.developer-body p,
html[data-theme="light"] body.developer-body small,
html[data-theme="light"] body.developer-body .dev-note-list,
html[data-theme="light"] body.developer-body .dev-check-list small,
html[data-theme="light"] body.developer-body .dev-field small { color: var(--s-muted) !important; }
html[data-theme="light"] body.developer-body label { color: var(--s-text-2) !important; }
html[data-theme="light"] body.developer-body .dev-input {
  background: var(--s-input-bg) !important;
  border-color: var(--s-border) !important;
  color: var(--s-input-text) !important;
}
html[data-theme="light"] body.developer-body .dev-button:not(.primary) {
  background: var(--s-surface) !important;
  border-color: var(--s-border-2) !important;
  color: var(--s-text) !important;
}
html[data-theme="light"] body.developer-body .dev-note-list code,
html[data-theme="light"] body.developer-body .dev-lock-card code { background: var(--s-surface-3) !important; color: var(--hm-red-600) !important; }
html[data-theme="light"] body.developer-body .dev-reveal-value { background: var(--s-surface-3) !important; color: #0f7f42 !important; }
html[data-theme="light"] body.developer-body .dev-hash-note { color: var(--s-muted) !important; }
html[data-theme="light"] body.developer-body .dev-login-body,
html[data-theme="light"] body.dev-login-body { background-color: var(--s-bg) !important; }

/* ==========================================================================
   DEVELOPER PANEL — same design language as the admin panel
   --------------------------------------------------------------------------
   The developer panel used a tighter, darker style of its own. Everything below
   rebuilds its components on the admin panel's proportions, radii, shadows and
   typography, in both themes, without changing any markup.
   ========================================================================== */

body.developer-body { background-color: var(--s-bg) !important; color: var(--s-text) !important; }
body.developer-body .dev-main { background: transparent !important; }
body.developer-body .dev-content { padding: 20px 22px 28px !important; max-width: 1700px; margin: 0 auto; }

/* Sidebar: the admin panel's dark navy rail, in both themes. */
body.developer-body .dev-sidebar {
  background-image: linear-gradient(180deg, var(--s-sidebar), var(--s-sidebar-2)) !important;
  border-right: 1px solid var(--s-border) !important;
  color: var(--s-sidebar-text) !important;
}
body.developer-body .dev-sidebar-head { border-bottom: 1px solid rgba(255, 255, 255, .07) !important; }
body.developer-body .dev-sidebar nav { padding: 10px 12px !important; display: grid; gap: 3px; }
body.developer-body .dev-sidebar nav a {
  min-height: 44px;
  padding: 0 14px !important;
  border-radius: 10px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--s-sidebar-muted) !important;
}
body.developer-body .dev-sidebar nav a i { display: grid; place-items: center; }
body.developer-body .dev-sidebar nav a .ui-icon { width: 19px; height: 19px; }
body.developer-body .dev-sidebar nav a.active {
  background-image: linear-gradient(90deg, rgba(229, 27, 35, .22), transparent 72%) !important;
  color: #fff !important;
}
body.developer-body .dev-help {
  margin: 14px 12px !important;
  padding: 16px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  color: var(--s-sidebar-muted) !important;
}
body.developer-body .dev-help strong { color: #fff !important; }
body.developer-body .dev-help a { color: var(--hm-red-400) !important; }

/* Top bar: matches the admin top bar height, blur and controls. */
body.developer-body .dev-topbar {
  height: 76px !important;
  padding: 0 22px !important;
  background: var(--s-topbar) !important;
  border-bottom: 1px solid var(--s-border) !important;
  color: var(--s-text) !important;
}
body.developer-body .dev-topbar h1 { font-size: 19px !important; letter-spacing: -.02em; color: var(--s-text) !important; }
body.developer-body .dev-topbar h1 small { display: block; margin-top: 2px; font-size: 12.5px !important; font-weight: 600; color: var(--s-muted) !important; }
body.developer-body .dev-search {
  min-height: 42px;
  border-radius: 10px !important;
  background: var(--s-input-bg) !important;
  border: 1px solid var(--s-border) !important;
}
body.developer-body .dev-search input { color: var(--s-input-text) !important; background: transparent !important; }
body.developer-body .dev-user strong { color: var(--s-text) !important; font-size: 13.5px; }
body.developer-body .dev-user small { color: var(--s-muted) !important; }
body.developer-body .dev-avatar { width: 38px; height: 38px; border-radius: 11px !important; }
body.developer-body .dev-logout { color: var(--s-muted) !important; border-radius: 10px; padding: 8px; }

/* Cards: admin radius, border and shadow instead of the tight dark boxes. */
body.developer-body .dev-card {
  padding: 20px !important;
  margin-bottom: 16px !important;
  border-radius: var(--radius-md) !important;
  background: var(--s-surface) !important;
  background-image: none !important;
  border: 1px solid var(--s-border) !important;
  color: var(--s-text) !important;
  box-shadow: var(--s-shadow-1) !important;
}
body.developer-body .dev-card-head { margin-bottom: 16px !important; gap: 14px; }
body.developer-body .dev-card-head h2 { font-size: 17px !important; letter-spacing: -.015em; color: var(--s-text) !important; }
body.developer-body .dev-card-head p { margin-top: 4px; font-size: 13px !important; line-height: 1.6; color: var(--s-muted) !important; }

/* Summary cards become admin-style metric tiles with an accent rail. */
body.developer-body .dev-summary { gap: 14px !important; margin-bottom: 16px !important; }
body.developer-body .dev-summary-card {
  position: relative;
  overflow: hidden;
  min-height: 108px;
  padding: 18px 20px !important;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: var(--radius-md) !important;
  background: var(--s-surface) !important;
  background-image: none !important;
  border: 1px solid var(--s-border) !important;
  box-shadow: var(--s-shadow-1) !important;
}
body.developer-body .dev-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad-red);
}
body.developer-body .dev-summary-card.tone-blue::before { background: linear-gradient(180deg, #4d9bff, #1f5fd0); }
body.developer-body .dev-summary-card.tone-green::before { background: linear-gradient(180deg, #3ed37f, #159b52); }
body.developer-body .dev-summary-card.tone-orange::before { background: linear-gradient(180deg, #ffb648, #e07c05); }
body.developer-body .dev-summary-card > i {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background-image: var(--grad-red-soft);
  color: var(--hm-red-500);
  transition: transform var(--dur) var(--ease-spring);
}
body.developer-body .dev-summary-card:hover > i { transform: scale(1.08) rotate(-4deg); }
body.developer-body .dev-summary-card > i .ui-icon { width: 21px; height: 21px; }
body.developer-body .dev-summary-card > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.developer-body .dev-summary-card small:first-child {
  font-size: 11.5px !important;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--s-muted) !important;
}
body.developer-body .dev-summary-card strong { font-size: 24px !important; line-height: 1.15; letter-spacing: -.02em; color: var(--s-text) !important; }
body.developer-body .dev-summary-card small:last-child { font-size: 12px !important; color: var(--s-muted) !important; }

/* Section cards on the dashboard match the admin quick-action tiles. */
body.developer-body .dev-section-cards { gap: 14px !important; }
body.developer-body .dev-section-link {
  padding: 20px !important;
  border-radius: var(--radius-md) !important;
  background: var(--s-surface) !important;
  background-image: none !important;
  border: 1px solid var(--s-border) !important;
  box-shadow: var(--s-shadow-1) !important;
}
body.developer-body .dev-section-link > i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background-image: var(--grad-red-soft);
  color: var(--hm-red-500);
  margin-bottom: 14px;
}
body.developer-body .dev-section-link > i .ui-icon { width: 21px; height: 21px; }
body.developer-body .dev-section-link strong { font-size: 15px !important; color: var(--s-text) !important; }
body.developer-body .dev-section-link p { margin: 6px 0 14px; font-size: 13px !important; line-height: 1.6; color: var(--s-muted) !important; }

/* Forms sized like the admin panel rather than the old compact developer form. */
body.developer-body .dev-form-grid { gap: 14px !important; }
body.developer-body .dev-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px !important;
  font-weight: 750;
  color: var(--s-text-2) !important;
}
body.developer-body .dev-input {
  min-height: 46px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  background: var(--s-input-bg) !important;
  border: 1px solid var(--s-border) !important;
  color: var(--s-input-text) !important;
}
body.developer-body textarea.dev-input { min-height: 104px !important; }
body.developer-body .dev-button {
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}
body.developer-body .dev-button .ui-icon { width: 17px; height: 17px; }
body.developer-body .dev-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--s-border);
  border-radius: 10px;
  background: var(--s-surface-2);
  font-size: 13px;
  color: var(--s-text-2) !important;
}

/* Tables reuse the admin table treatment. */
body.developer-body .dev-table,
body.developer-body .panel-table { color: var(--s-text-2) !important; font-size: 13.5px; }
body.developer-body .dev-table thead th,
body.developer-body .panel-table thead th {
  height: 46px;
  background: var(--s-surface-3) !important;
  color: var(--s-text-2) !important;
  border-bottom: 1px solid var(--s-border) !important;
}
body.developer-body .dev-table td,
body.developer-body .panel-table td { height: 56px; border-bottom: 1px solid var(--s-border) !important; }
body.developer-body .panel-table-wrap { border-radius: var(--radius-sm); overflow: auto; }

/* Alerts, slide list and preview surfaces. */
body.developer-body .dev-alert { border-radius: 10px !important; padding: 13px 16px !important; }
body.developer-body .dev-slide-item {
  border-radius: 10px !important;
  background: var(--s-surface-2) !important;
  border: 1px solid var(--s-border) !important;
  color: var(--s-text) !important;
}
body.developer-body .dev-slide-item.active { border-color: var(--hm-red-500) !important; background: var(--tint-red) !important; }
body.developer-body .dev-slide-item small { color: var(--s-muted) !important; }
body.developer-body .dev-preview,
body.developer-body .dev-preview-toolbar {
  border-radius: var(--radius-md) !important;
  background: var(--s-surface-2) !important;
  border-color: var(--s-border) !important;
  color: var(--s-text) !important;
}
body.developer-body .dev-location-status { border-radius: 20px !important; padding: 6px 13px !important; }

/* Login card matches the panel card language. */
body.dev-login-body .dev-login-card {
  border-radius: var(--radius-lg) !important;
  background: var(--s-surface) !important;
  background-image: none !important;
  border: 1px solid var(--s-border) !important;
  color: var(--s-text) !important;
}
body.dev-login-body .dev-login-copy h1 { color: var(--s-text) !important; }
body.dev-login-body .dev-login-copy p { color: var(--s-muted) !important; }
body.dev-login-body .dev-login-copy small { color: var(--hm-red-500) !important; }
body.dev-login-body .dev-login-back { color: var(--s-muted) !important; }

.dev-welcome-banner { margin-bottom: 16px; }

@media (max-width: 900px) {
  body.developer-body .dev-content { padding: 14px !important; }
  body.developer-body .dev-summary-card { min-height: 92px; padding: 14px 16px !important; }
  body.developer-body .dev-summary-card strong { font-size: 20px !important; }
}

/* ==========================================================================
   HOVER STATES — one pass across every panel
   --------------------------------------------------------------------------
   Rule applied here: a hover may only change the background using a translucent
   tint, and whenever it does it must also restate the text colour. A fixed
   background colour is what made rows turn white under white text.
   ========================================================================== */

/* Clickable list rows: dashboards, activity, approvals, alerts, compact lists. */
body.panel-body .hm-compact-list a:hover,
body.panel-body .hm-mini-list a:hover,
body.panel-body .hm-alert-list a:hover,
body.panel-body .admin-activity-list a:hover,
body.panel-body .admin-approval-list a:hover,
body.panel-body .admin-bike-card:hover,
body.panel-body .admin-bottom-stats a:hover,
body.panel-body .admin-quick-actions nav a:hover,
body.panel-body .employee-metrics a:hover,
body.panel-body .employee-quick a:hover,
body.panel-body .pos-product:hover,
body.developer-body .dev-slide-item:hover,
body.developer-body .dev-section-link:hover,
body.developer-body .dev-check-list li:hover {
  background-color: var(--tint-hover) !important;
  color: var(--s-text) !important;
}

/* Their inner text must follow, otherwise only the wrapper changes. */
body.panel-body .hm-compact-list a:hover strong,
body.panel-body .hm-mini-list a:hover strong,
body.panel-body .hm-alert-list a:hover strong,
body.panel-body .admin-activity-list a:hover strong,
body.panel-body .admin-approval-list a:hover span,
body.panel-body .admin-bike-card:hover strong,
body.panel-body .admin-bottom-stats a:hover strong,
body.panel-body .admin-quick-actions nav a:hover span,
body.panel-body .employee-metrics a:hover strong,
body.panel-body .employee-quick a:hover strong,
body.developer-body .dev-slide-item:hover strong,
body.developer-body .dev-section-link:hover strong { color: var(--s-text) !important; }

body.panel-body .hm-compact-list a:hover small,
body.panel-body .hm-mini-list a:hover small,
body.panel-body .hm-alert-list a:hover small,
body.panel-body .admin-activity-list a:hover small,
body.panel-body .admin-activity-list a:hover time,
body.panel-body .admin-bike-card:hover small,
body.panel-body .admin-bottom-stats a:hover small,
body.panel-body .admin-quick-actions nav a:hover b,
body.developer-body .dev-slide-item:hover small,
body.developer-body .dev-section-link:hover p { color: var(--s-muted) !important; }

/* Plain text links inside panels. */
body.panel-body a:not(.hm-btn):not(.panel-button):not(.button):not(.hm-small-btn):hover,
body.developer-body a:not(.dev-button):not(.dev-section-link):not(.dev-slide-item):hover { color: var(--hm-red-400); }

/* Sidebar entries. */
body.panel-body .panel-nav a:hover,
body.developer-body .dev-sidebar nav a:hover {
  background-color: var(--tint-strong) !important;
  color: #fff !important;
}
body.panel-body .panel-nav a:hover i,
body.developer-body .dev-sidebar nav a:hover i { color: var(--hm-red-400) !important; }

/* Top bar controls. */
body.panel-body .panel-top-icon:hover,
body.panel-body .panel-menu:hover,
body.developer-body .dev-logout:hover {
  background-color: var(--tint-hover) !important;
  color: var(--s-text) !important;
}

/* Tabs and filters. */
body.panel-body .hm-page-tabs a:hover,
body.panel-body .admin-inventory-toolbar nav a:hover,
body.panel-body .account-nav a:hover {
  background-color: var(--tint-hover) !important;
  color: var(--s-text) !important;
}

/* Table action icons already tinted above; keep their titles readable. */
body.panel-body .hm-row-actions a:hover .ui-icon,
body.panel-body .hm-row-actions button:hover .ui-icon,
body.developer-body .hm-row-actions a:hover .ui-icon { color: var(--s-red-text); }

/* Secondary buttons in both themes. */
body.developer-body .dev-button:not(.primary):not(.danger):hover {
  background-color: var(--tint-strong) !important;
  border-color: var(--hm-red-400) !important;
  color: var(--s-text) !important;
}

/* Selected rows keep their text when hovered on top of the selection. */
body.panel-body tr.selected:hover,
body.developer-body tr.selected:hover { background: var(--tint-red) !important; color: var(--s-text) !important; }

/* Disabled controls must not look hoverable. */
body.panel-body button:disabled:hover,
body.developer-body button:disabled:hover { background-color: inherit !important; transform: none !important; }

/* ==========================================================================
   INHERITED TEXT COLOURS
   --------------------------------------------------------------------------
   Several dashboard components set a dark colour on the container and let the
   children inherit it (.admin-bike-card{color:#24282e}, .admin-bottom-stats>a
   {color:#2b3037}, .admin-approval-list>a{color:#424850}). Recolouring the card
   background alone left that inherited text invisible, so the containers are
   re-pointed at the theme tokens here.
   ========================================================================== */

body.panel-body .admin-bike-card,
body.panel-body .admin-bottom-stats > a,
body.panel-body .admin-approval-list > a,
body.panel-body .admin-activity-list a,
body.panel-body .hm-compact-list a,
body.panel-body .hm-mini-list a,
body.panel-body .hm-alert-list a,
body.panel-body .employee-summary,
body.panel-body .employee-summary div,
body.panel-body .invoice-customer,
body.panel-body .invoice-totals,
body.panel-body .payment-balance,
body.panel-body .service-checklist label,
body.panel-body .hm-queue-actions,
body.panel-body .job-customer,
body.panel-body .complaint-box,
body.panel-body .bill-summary,
body.panel-body .used-parts { color: var(--s-text) !important; }

/* Secondary lines stay muted rather than turning full-contrast. */
body.panel-body .admin-bike-card small,
body.panel-body .admin-bottom-stats small,
body.panel-body .admin-bottom-stats em,
body.panel-body .admin-activity-list small,
body.panel-body .admin-activity-list time,
body.panel-body .hm-compact-list small,
body.panel-body .hm-mini-list small,
body.panel-body .hm-alert-list small,
body.panel-body .admin-empty,
body.panel-body .metric-trend span,
body.panel-body .job-customer span,
body.panel-body .invoice-customer small,
body.panel-body .used-parts small { color: var(--s-muted) !important; }

/* Red accents that must survive the sweep. */
body.panel-body .admin-bike-card b,
body.panel-body .red-text,
body.panel-body .admin-card-footer-link,
body.panel-body .hm-compact-list a > b { color: var(--hm-red-500) !important; }
body.panel-body .metric-trend.up b { color: #12a355 !important; }
body.panel-body .metric-trend.down b { color: var(--hm-red-500) !important; }
body.panel-body .metric-trend.flat b { color: var(--s-muted) !important; }

/* Product photos sit on white in the source images, so give them a light plate
   in dark mode instead of a dark card showing through a transparent PNG. */
html[data-theme="dark"] body.panel-body .admin-bike-card img,
html[data-theme="dark"] body.panel-body .hm-mini-list img,
html[data-theme="dark"] body.panel-body .hm-product-cell img,
html[data-theme="dark"] body.panel-body .pos-product-media {
  background: #f2f4f7 !important;
}

/* Generic net: any unclassed text element inside a panel follows the theme.
   Elements that carry their own class keep their own colour. */
body.panel-body .panel-content td:not([class]),
body.panel-body .panel-content strong:not([class]),
body.panel-body .panel-content h4:not([class]),
body.panel-body .panel-content h5:not([class]),
body.developer-body .dev-content td:not([class]),
body.developer-body .dev-content strong:not([class]) { color: var(--s-text); }

body.panel-body .panel-content small:not([class]),
body.panel-body .panel-content em:not([class]),
body.panel-body .panel-content time:not([class]),
body.developer-body .dev-content small:not([class]),
body.developer-body .dev-content em:not([class]) { color: var(--s-muted); }

/* ==========================================================================
   EMPLOYEE DASHBOARD CARDS
   --------------------------------------------------------------------------
   These tiles hardcode near-white pastel backgrounds (#fffafa, #fbfdff …) with
   a dark text colour on the anchor. In dark mode the card stayed white while
   the values turned light, so the numbers vanished. Dark mode now gives them a
   dark surface with a tinted accent; light mode keeps the original pastels.
   ========================================================================== */

body.panel-body .employee-metrics strong,
body.panel-body .employee-quick strong { color: var(--s-text) !important; }
body.panel-body .employee-metrics span { color: var(--s-text-2) !important; }
body.panel-body .employee-quick span { color: var(--s-muted) !important; }
body.panel-body .employee-quick b { color: #fff !important; }

html[data-theme="dark"] body.panel-body .employee-metrics > a,
html[data-theme="dark"] body.panel-body .employee-quick > div > a {
  color: var(--s-text) !important;
  border-color: var(--s-border) !important;
  background: var(--s-surface) !important;
}

html[data-theme="dark"] body.panel-body .employee-metrics .red,
html[data-theme="dark"] body.panel-body .employee-quick .red {
  background: linear-gradient(160deg, rgba(229, 27, 35, .12), var(--s-surface) 62%) !important;
  border-color: rgba(229, 27, 35, .34) !important;
}
html[data-theme="dark"] body.panel-body .employee-metrics .blue,
html[data-theme="dark"] body.panel-body .employee-quick .blue {
  background: linear-gradient(160deg, rgba(77, 155, 255, .12), var(--s-surface) 62%) !important;
  border-color: rgba(77, 155, 255, .34) !important;
}
html[data-theme="dark"] body.panel-body .employee-metrics .green,
html[data-theme="dark"] body.panel-body .employee-quick .green {
  background: linear-gradient(160deg, rgba(62, 211, 127, .12), var(--s-surface) 62%) !important;
  border-color: rgba(62, 211, 127, .32) !important;
}
html[data-theme="dark"] body.panel-body .employee-metrics .orange,
html[data-theme="dark"] body.panel-body .employee-quick .orange {
  background: linear-gradient(160deg, rgba(224, 124, 5, .12), var(--s-surface) 62%) !important;
  border-color: rgba(224, 124, 5, .34) !important;
}
html[data-theme="dark"] body.panel-body .employee-quick .purple {
  background: linear-gradient(160deg, rgba(140, 100, 255, .12), var(--s-surface) 62%) !important;
  border-color: rgba(140, 100, 255, .34) !important;
}

/* Icon chips and accent text in dark mode. */
html[data-theme="dark"] body.panel-body .employee-metrics .red i,
html[data-theme="dark"] body.panel-body .employee-quick .red i { background: rgba(229, 27, 35, .18) !important; color: #ff9ba0 !important; }
html[data-theme="dark"] body.panel-body .employee-metrics .blue i,
html[data-theme="dark"] body.panel-body .employee-quick .blue i { background: rgba(77, 155, 255, .18) !important; color: #9dc6ff !important; }
html[data-theme="dark"] body.panel-body .employee-metrics .green i,
html[data-theme="dark"] body.panel-body .employee-quick .green i { background: rgba(62, 211, 127, .18) !important; color: #6ee7a4 !important; }
html[data-theme="dark"] body.panel-body .employee-metrics .orange i,
html[data-theme="dark"] body.panel-body .employee-quick .orange i { background: rgba(224, 124, 5, .18) !important; color: #ffc978 !important; }
html[data-theme="dark"] body.panel-body .employee-quick .purple i { background: rgba(140, 100, 255, .18) !important; color: #c4b0ff !important; }

html[data-theme="dark"] body.panel-body .employee-metrics .red em { color: #ff9ba0 !important; }
html[data-theme="dark"] body.panel-body .employee-metrics .blue em { color: #9dc6ff !important; }
html[data-theme="dark"] body.panel-body .employee-metrics .green em { color: #6ee7a4 !important; }
html[data-theme="dark"] body.panel-body .employee-metrics .orange em { color: #ffc978 !important; }

/* Hover must not repaint the card away from its tone. */
body.panel-body .employee-metrics > a:hover,
body.panel-body .employee-quick > div > a:hover {
  background-color: transparent !important;
  color: var(--s-text) !important;
  box-shadow: var(--s-shadow-2);
}

/* ==========================================================================
   BILLING DESK + SERVICE PRICE LIST
   ========================================================================== */

/* The selected job row was painted from a light-theme colour, so in dark mode
   the customer, bike and amount disappeared into it. */
body.panel-body .billing-jobs tbody tr.selected,
body.panel-body .hm-data-table tbody tr.selected {
  background: var(--tint-red) !important;
  color: var(--s-text) !important;
  box-shadow: inset 3px 0 0 var(--hm-red-500);
}
body.panel-body .billing-jobs tbody tr.selected td,
body.panel-body .billing-jobs tbody tr.selected a:not(.hm-small-btn) { color: var(--s-text) !important; }
body.panel-body .billing-jobs tbody tr.selected .red-link { color: var(--hm-red-400) !important; }

/* Field captions in the payment card sat on the card's own dark colour. */
body.panel-body .payment-card label,
body.panel-body .payment-card .hm-field-title,
body.panel-body .support-notes label,
body.panel-body .hm-stacked-form label { color: var(--s-text-2) !important; }
body.panel-body .payment-balance { color: var(--s-text) !important; border-color: var(--s-border) !important; }
body.panel-body .payment-balance strong { color: var(--hm-red-500) !important; }
body.panel-body .hm-inline-check span { color: var(--s-text-2) !important; }

/* Note boxes were left white in dark mode. */
body.panel-body .support-notes textarea,
body.panel-body .hm-stacked-form textarea,
body.panel-body .invoice-builder input,
body.panel-body .invoice-builder select {
  background: var(--s-input-bg) !important;
  border: 1px solid var(--s-border) !important;
  color: var(--s-input-text) !important;
}

body.panel-body .invoice-customer { background: var(--s-surface-2) !important; border-color: var(--s-border) !important; }
body.panel-body .invoice-customer small { color: var(--s-muted) !important; }
body.panel-body .invoice-customer strong,
body.panel-body .invoice-customer em { color: var(--s-text) !important; font-style: normal; }
body.panel-body .invoice-totals { border-color: var(--s-border) !important; }
body.panel-body .invoice-totals div { color: var(--s-text-2) !important; }
body.panel-body .invoice-totals strong { color: var(--s-text) !important; }
body.panel-body .invoice-totals .total strong { color: var(--hm-red-500) !important; }
body.panel-body .invoice-add-item summary { color: var(--hm-red-500) !important; }

/* Metric tile captions on this desk. */
body.panel-body .hm-metric-card span { color: var(--s-muted) !important; }
body.panel-body .hm-metric-card strong { color: var(--s-text) !important; }

/* Service price list: the description used to run straight on from the name. */
.service-name-cell { white-space: normal; }
.service-name-cell a { display: block; font-weight: 800; color: var(--hm-red-500); }
.service-name-cell small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--s-muted);
}

.service-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.service-row-actions form { display: inline-flex; margin: 0; }
.service-row-actions .panel-button { min-height: 34px; padding: 0 11px; font-size: 12.5px; gap: 6px; }
.service-row-actions .ui-icon { width: 14px; height: 14px; }
.panel-button.danger {
  background-image: none !important;
  background: var(--tint-red) !important;
  border: 1px solid rgba(229, 27, 35, .45) !important;
  color: var(--s-red-text) !important;
  box-shadow: none !important;
}
.panel-button.danger:hover {
  background: var(--hm-red-600) !important;
  border-color: var(--hm-red-600) !important;
  color: #fff !important;
}

@media (max-width: 900px) {
  .service-row-actions { flex-direction: column; align-items: stretch; }
  .service-row-actions .panel-button { width: 100%; }
}

/* ==========================================================================
   WORKSHOP: repair notice + payment section
   ========================================================================== */

.hm-repair-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(224, 124, 5, .45);
  border-left: 4px solid #e07c05;
  border-radius: var(--radius-md);
  background: linear-gradient(120deg, rgba(224, 124, 5, .14), rgba(224, 124, 5, .05));
  animation: hm-rise .35s var(--ease-out) both;
}
.hm-repair-banner > i { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(224, 124, 5, .18); color: #e07c05; }
.hm-repair-banner > i .ui-icon { width: 21px; height: 21px; }
.hm-repair-banner > div { flex: 1 1 320px; min-width: 0; }
.hm-repair-banner strong { display: block; margin-bottom: 6px; font-size: 15px; color: var(--s-text); }
.hm-repair-banner p { margin: 0 0 6px; font-size: 13px; line-height: 1.65; color: var(--s-text-2); }
.hm-repair-banner p:last-child { margin-bottom: 0; }
.hm-repair-banner em { font-style: normal; font-weight: 800; color: var(--s-text); }
.hm-repair-banner code { padding: 1px 6px; border-radius: 5px; background: var(--tint-strong); font-size: 12px; }
.hm-repair-banner .hm-btn { flex: 0 0 auto; }

/* Payment section — grouped instead of one long stack of fields. */
.hm-pay-group {
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-md);
  background: var(--s-surface-2);
}
.hm-pay-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.hm-pay-legend .ui-icon { width: 16px; height: 16px; color: var(--hm-red-500); }
.hm-pay-sublegend { display: block; margin: 14px 0 6px; font-size: 12px; font-weight: 750; color: var(--s-text-2); }

.hm-pay-group label { display: block; margin-bottom: 10px; font-size: 12.5px; font-weight: 750; color: var(--s-text-2); }
.hm-pay-group label:last-child { margin-bottom: 0; }
.hm-pay-group label small { display: block; margin: 2px 0 5px; font-size: 11.5px; font-weight: 600; color: var(--s-muted); }
.hm-pay-group input,
.hm-pay-group select,
.hm-pay-group textarea {
  width: 100%;
  min-height: 44px;
  margin-top: 5px;
  padding: 10px 13px;
  border: 1px solid var(--s-border);
  border-radius: 10px;
  background: var(--s-input-bg);
  color: var(--s-input-text);
  font: inherit;
}
.hm-pay-group textarea { min-height: 84px; resize: vertical; }
.hm-pay-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hm-pay-pair label { margin-bottom: 0; }

.hm-pay-readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.hm-pay-readout > div {
  padding: 12px 14px;
  border: 1px solid var(--s-border);
  border-radius: 10px;
  background: var(--s-surface);
}
.hm-pay-readout small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--s-muted); }
.hm-pay-readout strong { display: block; margin-top: 4px; font-size: 20px; letter-spacing: -.02em; color: var(--s-text); }
.hm-pay-balance.is-due { border-color: rgba(229, 27, 35, .45); background: var(--tint-red); }
.hm-pay-balance.is-due strong { color: var(--s-red-text); }
.hm-pay-balance.is-settled { border-color: rgba(18, 163, 85, .45); background: rgba(18, 163, 85, .1); }
.hm-pay-balance.is-settled strong { color: #12a355; }

.hm-pay-amount input { min-height: 52px !important; font-size: 18px !important; font-weight: 800; letter-spacing: -.01em; }
.hm-pay-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.hm-pay-quick .hm-btn { flex: 1 1 auto; min-height: 38px; padding: 0 12px; font-size: 12.5px; }

@media (max-width: 620px) {
  .hm-repair-banner { flex-direction: column; align-items: flex-start; }
  .hm-repair-banner .hm-btn { width: 100%; }
}

/* ==========================================================================
   RETURNING-CUSTOMER SEARCH + LIVE UPDATES
   ========================================================================== */

.hm-customer-search { display: grid; gap: 8px; }
.hm-customer-search input[type="search"],
.hm-customer-search select {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--s-border);
  border-radius: 10px;
  background: var(--s-input-bg);
  color: var(--s-input-text);
  font: inherit;
}
.hm-customer-search input[type="search"] {
  background-image: none;
  border-color: var(--s-border-2);
  font-weight: 700;
}
.hm-customer-search input[type="search"]:focus { border-color: var(--hm-red-400); box-shadow: var(--ring); outline: none; }
.hm-customer-search select[size]:not([size="1"]) { padding: 6px; }
.hm-customer-search option { padding: 7px 9px; border-radius: 6px; }
.hm-customer-hint { font-size: 11.5px; font-weight: 600; color: var(--s-muted); }

/* While a live form is in flight, keep the panel interactive but show progress. */
body.hm-live-busy .panel-content { position: relative; }
body.hm-live-busy .panel-content::after {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 200;
  background: var(--grad-red);
  transform-origin: left;
  animation: hm-live-bar .9s var(--ease-out) infinite;
}
@keyframes hm-live-bar {
  0% { transform: scaleX(0); opacity: 1; }
  70% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.panel-content { animation: hm-fade .2s var(--ease-out); }

.hm-field-hint { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--s-muted); }
.hm-field-hint a { color: var(--hm-red-500); }

/* ==========================================================================
   EXPORT TO EXCEL
   ========================================================================== */

.hm-export-controls { padding: 20px; margin-bottom: 16px; }
.hm-export-controls header h2 { margin: 0 0 14px; font-size: 16px; }
.hm-range-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hm-range-chip { position: relative; cursor: pointer; }
.hm-range-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hm-range-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--s-border-2);
  border-radius: 20px;
  background: var(--s-surface);
  color: var(--s-text-2);
  font-size: 13px;
  font-weight: 750;
  transition: all var(--dur-fast) var(--ease-out);
}
.hm-range-chip:hover span { border-color: var(--hm-red-400); color: var(--s-red-text); }
.hm-range-chip input:checked + span {
  background-image: var(--grad-red);
  border-color: var(--hm-red-600);
  color: #fff;
  box-shadow: var(--lift-red);
}
.hm-range-chip input:focus-visible + span { box-shadow: var(--ring); }

.hm-range-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.hm-range-dates label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 750; color: var(--s-text-2); }
.hm-range-dates input {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--s-border);
  border-radius: 10px;
  background: var(--s-input-bg);
  color: var(--s-input-text);
  font: inherit;
}

.hm-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.hm-export-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-md);
  background: var(--s-surface);
  box-shadow: var(--s-shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hm-export-card:hover { transform: translateY(-3px); box-shadow: var(--lift-2); border-color: var(--hm-red-400); }
.hm-export-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hm-export-card-head > i {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background-image: var(--grad-red-soft);
  color: var(--hm-red-500);
}
.hm-export-card-head > i .ui-icon { width: 20px; height: 20px; }
.hm-export-card-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-export-card strong { font-size: 14px; color: var(--s-text); overflow-wrap: anywhere; }
.hm-export-card small { font-size: 11.5px; color: var(--s-muted); }
.hm-export-card .hm-btn { justify-content: center; min-height: 38px; }
.hm-export-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hm-export-card-actions .hm-btn.primary { grid-column: 1 / -1; }
.hm-export-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 4px 2px; }
.hm-export-summary-grid > div { display: flex; flex-direction: column; gap: 3px; }
.hm-export-summary-grid small { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--s-muted); }
.hm-export-summary-grid strong { font-size: 15px; color: var(--s-text); overflow-wrap: anywhere; }


/* ==========================================================================
   CALL DESK
   ========================================================================== */

.hm-call-toolbar { padding: 14px 16px; margin-bottom: 14px; display: grid; gap: 12px; }
.hm-call-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.hm-call-filters .search { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--s-border); border-radius: 10px; background: var(--s-input-bg); }
.hm-call-filters .search .ui-icon { color: var(--s-muted); flex: 0 0 auto; }
.hm-call-filters .search input { flex: 1; min-height: 42px; border: 0; background: transparent; color: var(--s-input-text); outline: none; font: inherit; }
.hm-call-filters > label:not(.search) { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 750; color: var(--s-text-2); }
.hm-call-filters select { min-height: 42px; padding: 8px 12px; border: 1px solid var(--s-border); border-radius: 10px; background: var(--s-input-bg); color: var(--s-input-text); font: inherit; }

.hm-call-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.hm-call-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--s-border);
  border-left: 4px solid var(--s-border-2);
  border-radius: var(--radius-md);
  background: var(--s-surface);
  box-shadow: var(--s-shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.hm-call-card:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.hm-call-card.is-overdue { border-left-color: var(--hm-red-500); }

.hm-call-who { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.hm-call-avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background-image: var(--grad-red);
  color: #fff;
  font-size: 17px; font-weight: 800;
}
.hm-call-who > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hm-call-who strong { font-size: 15px; color: var(--s-text); }
.hm-call-number { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--hm-red-500); font-variant-numeric: tabular-nums; }
.hm-call-number .ui-icon { width: 15px; height: 15px; }
.hm-call-who small { font-size: 12px; color: var(--s-muted); }
.hm-customer-type { align-self: flex-start; gap: 5px; margin-top: 2px; }
.hm-customer-type .ui-icon { width: 12px; height: 12px; }

.hm-call-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 9px 11px;
  border: 1px dashed var(--s-border-2);
  border-radius: 9px;
  background: var(--s-surface-2);
  color: var(--s-text-2);
  font-size: 12px;
  line-height: 1.5;
}
.hm-call-hint .ui-icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--s-muted); }

.hm-call-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hm-call-dates > span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 9px; background: var(--s-surface-2); }
.hm-call-dates small { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--s-muted); }
.hm-call-dates strong { font-size: 12.5px; color: var(--s-text); white-space: nowrap; }
.hm-call-dates > span.is-overdue { background: var(--tint-red); }
.hm-call-dates > span.is-overdue strong { color: var(--s-red-text); }

.hm-call-actions { display: flex; gap: 8px; }
.hm-call-actions .hm-btn { flex: 1; }

.hm-call-log > summary {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  border: 1px dashed var(--s-border-2);
  border-radius: 9px;
  color: var(--s-text-2);
  font-size: 12.5px; font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.hm-call-log > summary::-webkit-details-marker { display: none; }
.hm-call-log > summary:hover { border-color: var(--hm-red-400); color: var(--s-red-text); }
.hm-call-log[open] > summary { margin-bottom: 10px; border-style: solid; }
.hm-call-log .ui-icon { width: 15px; height: 15px; }
.hm-call-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 10px; }
.hm-call-log label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 750; color: var(--s-text-2); }
.hm-call-log select, .hm-call-log input, .hm-call-log textarea {
  min-height: 40px; padding: 8px 11px;
  border: 1px solid var(--s-border); border-radius: 9px;
  background: var(--s-input-bg); color: var(--s-input-text); font: inherit;
}
.hm-call-log textarea { min-height: 68px; resize: vertical; }
.hm-call-notes { margin-bottom: 10px; }
.hm-call-note { white-space: normal; max-width: 280px; }

@media (max-width: 520px) {
  .hm-call-dates { grid-template-columns: 1fr 1fr; }
  .hm-call-actions { flex-direction: column; }
}


.hm-calldesk-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--s-border);
  border-left: 4px solid var(--hm-red-500);
  border-radius: var(--radius-md);
  background: var(--s-surface);
  box-shadow: var(--s-shadow-1);
}
.hm-calldesk-banner > i {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background-image: var(--grad-red-soft);
  color: var(--hm-red-500);
}
.hm-calldesk-banner > i .ui-icon { width: 20px; height: 20px; }
.hm-calldesk-banner > div { flex: 1 1 300px; min-width: 0; }
.hm-calldesk-banner strong { display: block; margin-bottom: 3px; font-size: 14.5px; color: var(--s-text); }
.hm-calldesk-banner p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--s-text-2); }
.hm-calldesk-banner form { margin: 0; }
.hm-calldesk-banner .hm-btn { flex: 0 0 auto; }

/* The one-time password is in a flash, so give it room to be read and copied. */
.panel-alert-success { user-select: text; line-height: 1.6; }

@media (max-width: 620px) {
  .hm-calldesk-banner { flex-direction: column; align-items: stretch; }
  .hm-calldesk-banner .hm-btn, .hm-calldesk-banner form { width: 100%; }
}

/* Build stamp — small, permanent, and readable in both themes. */
.hm-build-stamp {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 22px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--s-border);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--s-muted);
}
.hm-build-stamp .ui-icon { width: 14px; height: 14px; color: var(--hm-red-500); }

/* -------------------------------------- Last-resort contrast safety net */

/* If any component is still missed, these keep text legible rather than
   letting it disappear into its own background. */
body.panel-body [class*="card"] strong,
body.panel-body [class*="card"] b { color: inherit; }
body.panel-body .no-pad > .panel-table-wrap { background: transparent; }

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1080px) {
  .dev-setup-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 780px) {
  .hm-metric-card:hover,
  .admin-metric-card:hover,
  .hm-bike-card:hover,
  .hm-under-hero-actions a:hover { transform: none; }
  .payment-methods { gap: 6px; }
  .payment-method-chip span { min-height: 34px; padding: 0 11px; font-size: 12px; }
  .hm-data-table thead th,
  .panel-table thead th { position: static; }
}

/* ------------------------------------------------------------ Accessibility */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hm-auto-reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------- Print */

@media print {
  .panel-sidebar, .panel-topbar, .dev-sidebar, .dev-topbar,
  .site-header, .site-footer, .hm-head-actions, .hm-filter-bar,
  .hm-order-filters, .invoice-actions, .panel-alert, .flash { display: none !important; }
  .panel-main, .dev-main { margin: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .hm-card, .panel-card { box-shadow: none !important; border-color: #ccc !important; }
}

/* ==========================================================================
   SERVICE WORKSHOP — rebuilt job flow (v28)
   --------------------------------------------------------------------------
   The workshop is now three plain steps: register the customer and bike, pick
   services and parts, then bill it. Everything below is written from the
   semantic --s-* tokens so it reads correctly in both the light and the dark
   panel theme without a second set of rules.
   ========================================================================== */

/* -------------------------------------------------- Intake modal (step 0) */

.hm-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: 24px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  background: rgba(6, 8, 11, .68);
  backdrop-filter: blur(2px);
}

.hm-modal {
  width: min(1080px, 100%);
  margin: auto;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-lg);
  background: var(--s-surface);
  box-shadow: var(--lift-3);
  overflow: hidden;
}

.hm-modal > header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--s-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hm-modal > header h2 { margin: 0; font-size: 17px; color: var(--s-text); }
.hm-modal > header p { margin: 3px 0 0; font-size: 13px; color: var(--s-muted); }
.hm-modal-close { font-size: 13.5px; font-weight: 700; color: var(--s-red-text); white-space: nowrap; }

.hm-modal-body {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hm-modal-body label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 650; color: var(--s-text-2); }
.hm-modal-body input,
.hm-modal-body select,
.hm-modal-body textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--s-border-2, var(--s-border));
  border-radius: var(--radius-sm);
  background: var(--s-input-bg, var(--s-surface));
  color: var(--s-input-text, var(--s-text));
  font: inherit;
  font-size: 14px;
  outline: 0;
}
.hm-modal-body textarea { min-height: 92px; resize: vertical; }
.hm-modal-body input:focus,
.hm-modal-body select:focus,
.hm-modal-body textarea:focus { border-color: var(--hm-red-400); box-shadow: var(--ring); }
.hm-modal-body .span-2 { grid-column: 1 / -1; }
.hm-modal-body footer { display: flex; gap: 10px; padding-top: 4px; }

.hm-check {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px dashed var(--s-border-2, var(--s-border));
  border-radius: var(--radius-sm);
  background: var(--s-surface-2);
  font-weight: 600;
}
.hm-check input { width: 17px; min-height: 0; height: 17px; flex: none; padding: 0; }
.hm-check span { font-size: 13px; color: var(--s-muted); font-weight: 600; }

/* ------------------------------------------------ Selected job header bar */

.hm-job-bar {
  margin-bottom: 14px;
  padding: 13px 18px;
  border: 1px solid var(--s-border);
  border-left: 4px solid var(--hm-red-500);
  border-radius: var(--radius-md);
  background: var(--s-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.hm-job-identity { min-width: 0; display: grid; gap: 2px; }
.hm-job-no { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--s-red-text); }
.hm-job-identity strong { font-size: 16px; color: var(--s-text); }
.hm-job-identity small { font-size: 12.5px; color: var(--s-muted); }
.hm-job-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hm-job-state b { font-size: 19px; font-weight: 800; color: var(--s-text); }
.hm-job-state .hm-status .ui-icon { width: 13px; height: 13px; vertical-align: -2px; }

/* ------------------------------------------------------------ Step switcher */

.hm-steps {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hm-steps a {
  min-height: 66px;
  padding: 11px 15px;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-md);
  background: var(--s-surface);
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 3px 12px;
  color: var(--s-text);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.hm-steps a:hover { border-color: var(--hm-red-400); }
.hm-steps a i {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s-surface-3);
  color: var(--s-muted);
  font-style: normal;
  font-weight: 800;
  font-size: 14px;
}
.hm-steps a span { font-size: 14px; font-weight: 750; }
.hm-steps a small { font-size: 12px; color: var(--s-muted); }
.hm-steps a.active { border-color: var(--hm-red-500); background: var(--tint-red); }
.hm-steps a.active i { background: var(--grad-red); color: #fff; }

/* --------------------------------------------- Step 2: pickers and the bill */

.hm-build-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(410px, 520px);
  gap: 16px;
  align-items: start;
}

.hm-build-pickers { display: grid; gap: 14px; min-width: 0; }

.hm-picker > header {
  padding: 13px 16px;
  border-bottom: 1px solid var(--s-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hm-picker > header h2 { margin: 0; font-size: 14.5px; display: flex; align-items: center; gap: 8px; color: var(--s-text); }
.hm-picker > header h2 .ui-icon { width: 17px; height: 17px; color: var(--hm-red-500); }
.hm-picker > header a { font-size: 12.5px; font-weight: 700; color: var(--s-red-text); }

.hm-picker-search { padding: 12px 16px 0; display: flex; gap: 8px; }
.hm-picker-search label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--s-border-2, var(--s-border));
  border-radius: var(--radius-sm);
  background: var(--s-input-bg, var(--s-surface));
}
.hm-picker-search .ui-icon { width: 16px; height: 16px; color: var(--s-muted); flex: none; }
.hm-picker-search input {
  width: 100%;
  min-height: 40px;
  border: 0;
  background: none;
  color: var(--s-input-text, var(--s-text));
  font: inherit;
  font-size: 13.5px;
  outline: 0;
}

.hm-picker-list { padding: 8px 16px 4px; max-height: 340px; overflow: auto; }
.hm-picker-list .empty { padding: 18px 2px; font-size: 13px; color: var(--s-muted); }

.hm-picker-row {
  padding: 9px 0;
  border-bottom: 1px solid var(--s-border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px 74px auto;
  align-items: center;
  gap: 9px;
}
.hm-picker-row:last-child { border-bottom: 0; }
.hm-picker-row.wide { grid-template-columns: minmax(0, 1fr) 108px 74px auto; padding: 14px 16px; border: 0; }
.hm-picker-row.is-out { opacity: .55; }
.hm-picker-name { min-width: 0; display: grid; gap: 2px; }
.hm-picker-name strong { font-size: 13.5px; color: var(--s-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-picker-name small { font-size: 12px; color: var(--s-muted); }

.hm-picker-row input,
.hm-bill-line input {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--s-border-2, var(--s-border));
  border-radius: var(--radius-sm);
  background: var(--s-input-bg, var(--s-surface));
  color: var(--s-input-text, var(--s-text));
  font: inherit;
  font-size: 13.5px;
  outline: 0;
}
.hm-picker-row input:focus,
.hm-bill-line input:focus { border-color: var(--hm-red-400); box-shadow: var(--ring); }
.hm-num { text-align: right; }
.hm-num.tiny { width: 100%; }

.hm-picker-note { margin: 0; padding: 10px 16px 14px; font-size: 12px; color: var(--s-muted); line-height: 1.5; }

/* The running bill next to the pickers. */

.hm-bill-panel {
  position: sticky;
  top: 88px;
  height: auto;
  max-height: none;
  overflow: hidden;
}
.hm-bill-panel > .hm-bill-lines { min-height: 0; }
.hm-bill-panel > .hm-bill-totals,
.hm-bill-panel > .hm-btn { flex: none; }
.hm-bill-panel > .hm-btn { margin: 0 14px 14px; }
.hm-bill-panel > header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--s-border);
  background: linear-gradient(135deg, var(--s-surface-2), var(--s-surface));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hm-running-bill-title { min-width: 0; display: flex; align-items: center; gap: 11px; }
.hm-running-bill-title > i {
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--hm-red-500) 28%, var(--s-border));
  border-radius: 10px;
  background: var(--tint-red);
  color: var(--s-red-text);
  display: grid;
  place-items: center;
}
.hm-running-bill-title > i .ui-icon { width: 19px; height: 19px; }
.hm-running-bill-title > div { min-width: 0; display: grid; gap: 1px; }
.hm-running-bill-title small {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.hm-running-bill-title h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: var(--s-text);
}
.hm-bill-count {
  flex: none;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--s-border-2, var(--s-border));
  border-radius: 999px;
  background: var(--s-surface-3);
  color: var(--s-text-2);
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 800;
}

.hm-bill-lines {
  padding: 10px 14px 12px;
  max-height: 390px;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  align-content: start;
  gap: 5px 6px;
}
.hm-bill-lines .empty { grid-column: 1 / -1; padding: 18px 2px; font-size: 13px; color: var(--s-muted); }

/* Column headings, so the numbers below can be read straight down. */
.hm-bill-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 88px 96px 34px;
  gap: 8px;
  padding: 0 10px 4px;
  position: sticky;
  top: -8px;
  z-index: 2;
  background: var(--s-surface);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.hm-bill-head .right { text-align: right; }

.hm-bill-group {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 4px 10px;
  border-left: 3px solid var(--s-border-2);
  border-radius: 4px;
  background: var(--s-surface-3);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--s-text-2);
}
.hm-bill-group:first-of-type { margin-top: 0; }
.hm-bill-group.kind-service { border-left-color: #7c5cff; }
.hm-bill-group.kind-part { border-left-color: #4d9bff; }
.hm-bill-group.kind-custom { border-left-color: #e07c05; }

/* One row per line: name, qty, price, amount, save. */
.hm-bill-line {
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--s-border);
  border-left: 3px solid var(--s-border-2, var(--s-border));
  border-radius: var(--radius-sm);
  background: var(--s-surface-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 88px 96px auto;
  align-items: center;
  gap: 8px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.hm-bill-line:hover { border-color: var(--hm-red-400); }
.hm-bill-line.kind-service { border-left-color: #7c5cff; }
.hm-bill-line.kind-part { border-left-color: #4d9bff; }
.hm-bill-line.kind-custom { border-left-color: #e07c05; }

.hm-line-name { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hm-line-name strong {
  font-size: 13px;
  line-height: 1.3;
  color: var(--s-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-line-name small { font-size: 11px; color: var(--s-muted); }
.hm-line-label { width: 100%; }

.hm-bill-line .hm-num { min-height: 34px; padding: 5px 8px; text-align: right; }
.hm-bill-line .hm-num.tiny { text-align: center; }
.hm-line-total {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--s-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hm-line-save { min-height: 34px; width: 34px; padding: 0; }
.hm-line-save .ui-icon { width: 15px; height: 15px; }

.hm-line-remove-form { display: flex; }
.hm-bill-lines .hm-line-remove {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--s-border-2, var(--s-border));
  border-radius: var(--radius-sm);
  background: var(--s-surface);
  color: var(--s-red-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.hm-bill-lines .hm-line-remove:hover { background: var(--tint-red); border-color: var(--hm-red-400); }
.hm-bill-lines .hm-line-remove:disabled { opacity: .4; cursor: not-allowed; }

/* Amounts line up down the page for tallying. */
.hm-bill-totals > div strong,
.hm-bill-totals .total strong { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .hm-bill-head { display: none; }
  .hm-bill-line { grid-template-columns: minmax(0, 1fr) 58px 82px; grid-auto-rows: auto; }
  .hm-bill-line .hm-line-total { grid-column: 2 / -1; text-align: right; }
  .hm-line-save { grid-column: 1 / 2; justify-self: start; width: auto; padding: 0 12px; }
}

/* Compact: the breakdown rows used 34px each, so a bill with services, parts,
   other work, labour and a discount spent 200px on totals and starved the list.
   The breakdown is now tight and only the bill total stays large. */
.hm-bill-totals { padding: 8px 16px 12px; border-top: 1px solid var(--s-border); background: var(--s-surface-2); }
.hm-bill-totals > div {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--s-muted);
}
.hm-bill-totals > div strong { color: var(--s-text-2); font-weight: 700; }
.hm-bill-totals > div.total {
  min-height: 38px;
  margin-top: 5px;
  padding-top: 8px;
  border-top: 1px solid var(--s-border);
  font-size: 14px;
  font-weight: 800;
  color: var(--s-text);
}
.hm-bill-totals > div.total strong { font-size: 19px; font-weight: 900; color: var(--s-red-text); }
.hm-bill-totals > div.due strong { color: var(--s-red-text); }

.hm-btn.full { width: 100%; justify-content: center; }
.hm-bill-panel > .hm-btn.full { width: calc(100% - 32px); min-height: 44px; margin: 12px 16px 16px; border-radius: 9px; }

/* -------------------------------------------------- Step 3: bill & payment */

.hm-bill-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.hm-bill-review,
.hm-bill-form { width: 100%; min-width: 0; }
.hm-bill-form { display: block !important; overflow: visible !important; }
.hm-bill-form > form.hm-stacked-form {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.hm-bill-review > header,
.hm-bill-form > header {
  padding: 13px 16px;
  border-bottom: 1px solid var(--s-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hm-bill-review > header h2,
.hm-bill-form > header h2 { margin: 0; font-size: 14.5px; color: var(--s-text); }
.hm-bill-review > header a { font-size: 12.5px; font-weight: 700; color: var(--s-red-text); display: flex; align-items: center; gap: 6px; }
.hm-bill-review > header a .ui-icon { width: 15px; height: 15px; }

.hm-confirm-banner {
  margin: 14px 16px 0;
  padding: 10px 13px;
  border: 1px solid #b6e8ce;
  border-radius: var(--radius-sm);
  background: #e6f8ee;
  color: #0f7f42;
  font-size: 12.5px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hm-confirm-banner .ui-icon { width: 16px; height: 16px; flex: none; }
html[data-theme="dark"] .hm-confirm-banner { border-color: #1f5a3c; background: rgba(16, 147, 72, .14); color: #6ee7a8; }

.hm-data-table.compact th,
.hm-data-table.compact td { padding: 9px 12px; font-size: 13px; }

.hm-tag.tag-service { background: #f0ecff; color: #5b32c4; }
.hm-tag.tag-part { background: #e8f1ff; color: #1a56b8; }
.hm-tag.tag-custom { background: #fff5e3; color: #9a5c00; }
html[data-theme="dark"] .hm-tag.tag-service { background: rgba(91, 50, 196, .2); color: #c0aaff; }
html[data-theme="dark"] .hm-tag.tag-part { background: rgba(26, 86, 184, .2); color: #a5c6ff; }
html[data-theme="dark"] .hm-tag.tag-custom { background: rgba(154, 92, 0, .2); color: #ffcf87; }

.hm-bill-actions { padding: 0 16px 14px; display: grid; gap: 8px; }
.hm-bill-form .hm-stacked-form { padding: 14px 16px 8px; }
.hm-inline-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--s-border);
  border-radius: 999px;
  background: var(--s-surface-2);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--s-text-2);
}
.hm-bill-form-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.hm-pay-pair.compact { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.payment-methods.compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hm-pay-paperwork textarea { min-height: 96px; }
.hm-bill-submit-row { margin-top: 6px; }
.hm-bill-actions.compact {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding-top: 0;
}
.hm-bill-actions.compact .hm-btn.full { width: auto; }
.hm-bill-actions.compact .hm-btn { min-height: 42px; }
@media (max-width: 980px) {
  .hm-bill-form-top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .payment-methods.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hm-btn.small { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.hm-btn.ghost { background: none; border-style: dashed; }

/* --------------------------------------------------------- Shared oddments */

.hm-empty-state { padding: 46px 24px; text-align: center; }
.hm-empty-state .ui-icon { width: 42px; height: 42px; color: var(--s-muted); }
.hm-empty-state h2 { margin: 12px 0 6px; font-size: 18px; color: var(--s-text); }
.hm-empty-state > p { margin: 0 auto 18px; max-width: 460px; font-size: 13.5px; color: var(--s-muted); line-height: 1.6; }

.hm-section-note.warn { border-color: #ffdda6; background: #fff5e3; color: #7a4a00; }
.hm-section-note.warn .ui-icon { color: #9a5c00; }
html[data-theme="dark"] .hm-section-note.warn { border-color: #6b4a12; background: rgba(154, 92, 0, .16); color: #ffd694; }

.hm-data-table tr.selected { background: var(--tint-red); }

@media (max-width: 1280px) {
  .hm-build-grid { grid-template-columns: 1fr; }
  .hm-bill-panel { position: static; width: min(100%, 620px); justify-self: end; }
}

@media (max-width: 700px) {
  .hm-bill-panel { width: 100%; justify-self: stretch; }
  .hm-running-bill-title h2 { font-size: 14px; }
  .hm-bill-count { padding: 0 8px; }
}

@media (max-width: 860px) {
  .hm-modal-body { grid-template-columns: 1fr; }
  .hm-modal-body .span-2 { grid-column: auto; }
  .hm-steps { grid-template-columns: 1fr; }
  .hm-picker-row, .hm-picker-row.wide { grid-template-columns: 1fr 1fr; }
  .hm-picker-name { grid-column: 1 / -1; }
  .hm-picker-row button { grid-column: 1 / -1; }
  .hm-line-fields { grid-template-columns: 1fr 1fr; }
  .hm-line-total { grid-column: 1 / -1; text-align: left; padding-bottom: 0; }
}

/* A line whose figures have been typed over but not saved yet. */
.hm-bill-line.is-edited { border-color: var(--hm-red-400); }
.hm-line-total.is-edited { color: var(--s-red-text); }

/* ==========================================================================
   PUBLIC INNER PAGES — shop, product, cart, checkout, services, wholesale,
   contact, account, auth. The home page is deliberately left alone.

   Applied rules: 4.5:1 text contrast, 44px touch targets, 4/8px spacing scale,
   150–300ms motion with reduced-motion honoured, one primary action per card,
   equal card heights, and no meaning carried by colour alone.
   ========================================================================== */

.hm-inner-page {
  --page-surface: #101216;
  --page-surface-2: #15181d;
  --page-line: #262a31;
  --page-line-soft: #1e222890;
  --page-text: #f2f4f7;
  --page-text-2: #c2c8d2;
  --page-muted: #8c94a1;
}

/* ------------------------------------------------------------- Page header */

.hm-inner-page .page-hero { padding: clamp(38px, 6vw, 68px) 0 clamp(30px, 5vw, 52px); }
.hm-inner-page .page-hero .breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  background: rgba(255, 255, 255, .05);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: #ff8f95;
}
.hm-inner-page .page-hero h1 {
  margin: 16px 0 10px;
  font-size: clamp(30px, 5.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -.035em;
  color: #fff;
}
.hm-inner-page .page-hero p {
  max-width: 62ch;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.7;
  color: var(--page-text-2);
}

/* --------------------------------------------------------------- Shop grid */

.hm-inner-page .shop-layout { gap: clamp(18px, 2.4vw, 30px); }

.hm-inner-page .filter-card {
  background: var(--page-surface) !important;
  border: 1px solid var(--page-line) !important;
  border-radius: 16px !important;
  padding: 20px !important;
}
.hm-inner-page .filter-card h3 { margin: 0 0 14px; font-size: 15px; color: #fff; }
.hm-inner-page .filter-group { margin-bottom: 14px; }
.hm-inner-page .filter-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--page-muted);
}
.hm-inner-page .form-control {
  min-height: 46px;
  border-radius: 10px;
  background: #0b0d10;
  border: 1px solid var(--page-line);
  color: var(--page-text);
}
.hm-inner-page .form-control::placeholder { color: #6f7784; }
.hm-inner-page .form-control:focus { border-color: var(--hm-red-400); box-shadow: var(--ring); outline: none; }

.hm-inner-page .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
/* Same guard as the detail page: never let a card outgrow its track. */
.hm-inner-page .product-grid > *,
.hm-inner-page .service-grid > *,
.hm-inner-page .cart-layout > *,
.hm-inner-page .account-layout > *,
.hm-inner-page .shop-layout > * { min-width: 0; }

/* Cards are equal height with the action pinned to the bottom, so a longer
   description never leaves one card's button hanging lower than its neighbours. */
.hm-inner-page .product-card {
  display: flex;
  flex-direction: column;
  background: var(--page-surface) !important;
  border: 1px solid var(--page-line) !important;
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.hm-inner-page .product-card:hover {
  transform: translateY(-4px);
  border-color: #3c4150 !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45) !important;
}

.hm-inner-page .product-media {
  position: relative;
  height: auto !important;
  aspect-ratio: 4 / 3;
  padding: 18px !important;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f7f8fa, #e9ebef) !important;
  border-bottom: 1px solid var(--page-line) !important;
}
.hm-inner-page .product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* The fake drop shadow read as a smudge under line-art placeholders. */
.hm-inner-page .product-media::after { display: none !important; }

/* Placeholder artwork is a small line drawing: show it small and muted rather
   than blowing it up into a blurry smear. */
.hm-inner-page .product-media.is-placeholder {
  background: repeating-linear-gradient(45deg, #eef0f4 0 10px, #e7e9ee 10px 20px) !important;
}
.hm-inner-page .product-media.is-placeholder img {
  /* Percentages resolve unpredictably on a centred grid item, so cap in px. */
  max-width: 124px;
  max-height: 100px;
  opacity: .38;
}
.hm-inner-page .product-card:hover .product-media:not(.is-placeholder) img { transform: scale(1.05); }

.hm-inner-page .product-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(12, 14, 18, .88);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Stock is a dot plus a word, never colour alone. */
.hm-inner-page .product-stock {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2fbf6b;
  box-shadow: 0 0 0 3px rgba(47, 191, 107, .22);
}
.hm-inner-page .product-stock.out { background: #ef4d55; box-shadow: 0 0 0 3px rgba(239, 77, 85, .22); }

.hm-inner-page .product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 16px 16px 18px !important;
}
.hm-inner-page .product-meta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #ff7a80;
}
.hm-inner-page .product-body h3 {
  margin: 2px 0 0;
  font-size: 16.5px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #fff;
}
.hm-inner-page .product-body > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--page-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hm-inner-page .price-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--page-line);
}
.hm-inner-page .price-line strong {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #ff5a62;
  font-variant-numeric: tabular-nums;
}
.hm-inner-page .price-line span { font-size: 12px; color: var(--page-muted); font-variant-numeric: tabular-nums; }

.hm-inner-page .product-actions { display: flex; gap: 8px; margin-top: 12px; }
.hm-inner-page .product-actions .button { flex: 1; min-height: 44px; }
.hm-inner-page .product-actions form { display: flex; }
.hm-inner-page .icon-button {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--page-line);
  background: #0b0d10;
  color: #fff;
  font-size: 20px;
  display: grid;
  place-items: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.hm-inner-page .icon-button:hover { background: var(--hm-red-600); border-color: var(--hm-red-600); transform: none; }

.hm-inner-page .empty-state {
  padding: 48px 24px;
  border: 1px dashed var(--page-line);
  border-radius: 16px;
  background: var(--page-surface);
  text-align: center;
  color: var(--page-text-2);
}
.hm-inner-page .empty-state h3 { color: #fff; margin-top: 0; }

/* ----------------------------------------------------------- Product detail */

.hm-inner-page .product-detail { gap: clamp(20px, 3vw, 42px); }
/* Grid children default to min-width:auto, so a wide picture can push a column
   past its track and paint over the text beside it. */
.hm-inner-page .product-detail > * { min-width: 0; }
.hm-inner-page .product-detail-media {
  /* The width must come from the grid column and the height from the ratio.
     An earlier rule sets min-height:560px; without min-height:0 here the ratio
     resolves against that height instead and forces the box 64px wider than its
     track, straight over the product details. */
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 26px;
  border: 1px solid var(--page-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #f7f8fa, #e9ebef);
}
.hm-inner-page .product-detail-media img { width: 100%; height: 100%; object-fit: contain; }
.hm-inner-page .product-detail-media.is-placeholder img { max-width: 190px; max-height: 150px; opacity: .35; }
.hm-inner-page .detail-content h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.03em; color: #fff; }
.hm-inner-page .detail-description { font-size: 15px; line-height: 1.75; color: var(--page-text-2); max-width: 60ch; }
.hm-inner-page .detail-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid var(--page-line);
  border-radius: 14px;
  background: var(--page-surface);
}
.hm-inner-page .detail-price strong { font-size: 28px; font-weight: 900; color: #ff5a62; letter-spacing: -.02em; }
.hm-inner-page .detail-price span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--page-muted); }
.hm-inner-page .wholesale-note {
  padding: 13px 16px;
  border: 1px solid rgba(255, 145, 60, .3);
  border-left: 3px solid #e07c05;
  border-radius: 12px;
  background: rgba(224, 124, 5, .08);
  font-size: 13.5px;
  line-height: 1.65;
  color: #ffd0a3;
}
.hm-inner-page .purchase-box { margin: 18px 0; }
.hm-inner-page .purchase-row { display: flex; gap: 10px; }
.hm-inner-page .purchase-row .form-control { width: 100px; text-align: center; }
.hm-inner-page .purchase-row .button { flex: 1; max-width: 260px; }
.hm-inner-page .spec-table { border: 1px solid var(--page-line); border-radius: 14px; overflow: hidden; }
.hm-inner-page .spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--page-line);
  font-size: 13.5px;
}
.hm-inner-page .spec-row:last-child { border-bottom: 0; }
.hm-inner-page .spec-row:nth-child(odd) { background: rgba(255, 255, 255, .02); }
.hm-inner-page .spec-row span { color: var(--page-muted); }
.hm-inner-page .spec-row strong { color: #fff; text-align: right; }

/* ---------------------------------------------------------------- Services */

.hm-inner-page .service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.hm-inner-page .service-card {
  display: flex;
  flex-direction: column;
  background: var(--page-surface) !important;
  border: 1px solid var(--page-line) !important;
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.hm-inner-page .service-card:hover { transform: translateY(-4px); border-color: #3c4150 !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }

.hm-inner-page .service-card-media {
  height: auto !important;
  aspect-ratio: 16 / 9;
  display: grid !important;
  place-items: center;
  background: linear-gradient(150deg, #1a1e25, #101318) !important;
  border-bottom: 1px solid var(--page-line);
}
.hm-inner-page .service-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: none !important;
}
/* The placeholder is a line drawing — contain it and keep it small, instead of
   stretching a 700-byte SVG across the whole card. */
.hm-inner-page .service-card-media.is-placeholder {
  background: radial-gradient(circle at 50% 45%, rgba(229, 27, 35, .14), transparent 62%), #12151a !important;
}
.hm-inner-page .service-card-media.is-placeholder img {
  max-width: 88px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  opacity: .5;
}

.hm-inner-page .service-card-body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 18px !important; }
.hm-inner-page .service-card-body h3 { margin: 2px 0 0; font-size: 17px; line-height: 1.25; color: #fff; }
.hm-inner-page .service-card-body > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--page-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hm-inner-page .service-card-body .price-line { margin-top: auto; }
.hm-inner-page .service-card-body .button { min-height: 44px; margin-top: 12px; }

/* Booking form and side panel */
.hm-inner-page .booking-layout { gap: clamp(20px, 3vw, 40px); }
.hm-inner-page .booking-aside ul { padding-left: 18px; color: var(--page-text-2); line-height: 1.9; }
.hm-inner-page .booking-form,
.hm-inner-page .content-card,
.hm-inner-page .summary-card,
.hm-inner-page .account-card,
.hm-inner-page .contact-panel,
.hm-inner-page .wholesale-panel,
.hm-inner-page .booking-aside {
  background: var(--page-surface) !important;
  border: 1px solid var(--page-line) !important;
  border-radius: 16px !important;
}
.hm-inner-page .form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--page-text-2);
}
.hm-inner-page .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }

/* -------------------------------------------------------------------- Cart */

.hm-inner-page .cart-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr); gap: clamp(16px, 2vw, 26px); align-items: start; }
.hm-inner-page .cart-card { background: var(--page-surface) !important; border: 1px solid var(--page-line) !important; border-radius: 16px !important; overflow: hidden; }
.hm-inner-page .cart-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 96px 110px 44px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--page-line);
}
.hm-inner-page .cart-item:last-of-type { border-bottom: 0; }
.hm-inner-page .cart-thumb {
  width: 76px;
  height: 62px;
  border-radius: 10px;
  overflow: hidden;
  background: #eef0f4;
  display: grid;
  place-items: center;
}
.hm-inner-page .cart-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.hm-inner-page .cart-item h3 { margin: 0; font-size: 14.5px; color: #fff; }
.hm-inner-page .cart-item p { margin: 3px 0 0; font-size: 12.5px; color: var(--page-muted); }
.hm-inner-page .cart-qty { width: 100%; min-height: 44px; text-align: center; border-radius: 10px; background: #0b0d10; border: 1px solid var(--page-line); color: #fff; }
.hm-inner-page .cart-line-total { text-align: right; font-size: 15px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.hm-inner-page .remove-button {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--page-line);
  background: transparent;
  color: #ff8f95;
  font-size: 19px;
  transition: all var(--dur-fast) var(--ease-out);
}
.hm-inner-page .remove-button:hover { background: rgba(229, 27, 35, .16); border-color: var(--hm-red-500); }

.hm-inner-page .summary-card { padding: 20px !important; position: sticky; top: 96px; }
.hm-inner-page .summary-card h3 { margin: 0 0 14px; font-size: 16px; color: #fff; }
.hm-inner-page .summary-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--page-line-soft);
  font-size: 13.5px;
  color: var(--page-text-2);
}
.hm-inner-page .summary-line strong { color: #fff; font-variant-numeric: tabular-nums; }
.hm-inner-page .summary-line.total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--page-line); border-bottom: 0; font-size: 16px; }
.hm-inner-page .summary-line.total strong { font-size: 21px; font-weight: 900; color: #ff5a62; }
.hm-inner-page .summary-card .button { width: 100%; min-height: 48px; margin-top: 16px; }
.hm-inner-page .form-help { font-size: 12px; color: var(--page-muted); margin-top: 10px; }

/* ------------------------------------------------------------------- Auth */

.hm-inner-page .auth-section { display: grid; place-items: center; padding: clamp(24px, 6vw, 56px) 16px; }
.hm-inner-page .auth-shell {
  width: min(1040px, 100%);
  border: 1px solid var(--page-line);
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.hm-inner-page .auth-visual { border-right: 1px solid var(--page-line); }
.hm-inner-page .auth-card {
  padding: clamp(24px, 4vw, 46px) !important;
  background: var(--page-surface) !important;
  border-radius: 0 !important;
  box-shadow: none;
}
.hm-inner-page .auth-card h1 { margin: 10px 0 8px; font-size: clamp(23px, 3vw, 30px); line-height: 1.15; color: #fff; }
.hm-inner-page .auth-card > p { color: var(--page-text-2); font-size: 14px; line-height: 1.65; }
.hm-inner-page .auth-card .form-field { margin-bottom: 0; }
.hm-inner-page .auth-card .button { width: 100%; min-height: 48px; margin-top: 6px; }
.hm-inner-page .role-note {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--page-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .03);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--page-muted);
}
.hm-inner-page .auth-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--page-line); font-size: 13.5px; color: var(--page-text-2); text-align: center; }
.hm-inner-page .auth-footer a { color: #ff7a80; font-weight: 800; }
@media (max-width: 900px) {
  .hm-inner-page .auth-visual { border-right: 0; border-bottom: 1px solid var(--page-line); }
}

/* ----------------------------------------------------------------- Account */

.hm-inner-page .account-layout { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); align-items: start; }
.hm-inner-page .account-nav {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: var(--page-surface);
  border: 1px solid var(--page-line);
  border-radius: 16px;
  position: sticky;
  top: 96px;
}
.hm-inner-page .account-nav a,
.hm-inner-page .account-nav button {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--page-text-2);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  width: 100%;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hm-inner-page .account-nav a:hover,
.hm-inner-page .account-nav button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.hm-inner-page .account-nav a.active { background-image: linear-gradient(90deg, rgba(229, 27, 35, .2), transparent); color: #fff; box-shadow: inset 3px 0 0 var(--hm-red-500); }
.hm-inner-page .account-card { padding: 22px !important; }
.hm-inner-page .account-card h2 { margin: 0 0 16px; font-size: 19px; color: #fff; }
.hm-inner-page .order-list { display: grid; gap: 8px; }
.hm-inner-page .order-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--page-line);
  border-radius: 12px;
  background: var(--page-surface-2);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hm-inner-page a.order-row:hover { transform: translateX(3px); border-color: #3c4150; background: var(--page-surface-2); }
.hm-inner-page .order-row strong { color: #fff; font-size: 14px; }

/* --------------------------------------------------------------- Wholesale */

.hm-inner-page .wholesale-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(18px, 2.5vw, 34px); padding: clamp(20px, 3vw, 34px) !important; }
.hm-inner-page .wholesale-copy ul { padding-left: 18px; color: var(--page-text-2); line-height: 1.95; }
.hm-inner-page .wholesale-copy h2 { color: #fff; line-height: 1.15; }
.hm-inner-page .wholesale-login-callout { padding: 22px !important; }

/* ----------------------------------------------------------------- Contact */

.hm-inner-page .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 26px); align-items: start; }
.hm-inner-page .contact-panel { padding: 24px !important; }
.hm-inner-page .contact-list { display: grid; gap: 2px; margin: 18px 0; }
.hm-inner-page .contact-list > div { display: grid; gap: 3px; padding: 13px 0; border-bottom: 1px solid var(--page-line-soft); }
.hm-inner-page .contact-list span { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--page-muted); }
.hm-inner-page .contact-list strong { font-size: 15px; color: #fff; }
.hm-inner-page .map-embed {
  position: relative;
  min-height: 300px;
  border: 1px solid var(--page-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--page-surface);
}
.hm-inner-page .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.15) contrast(1.05); }
.hm-inner-page .map-embed-directions {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #101114;
  border: 1px solid var(--page-line);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.hm-inner-page .map-embed-directions .ui-icon { width: 16px; height: 16px; color: var(--red, #e51b23); }
.hm-inner-page .map-embed-directions:hover { border-color: var(--hm-red-400, #ff7a80); }
.hm-inner-page .hero-actions, .hm-inner-page .hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-inner-page .hero-actions .button, .hm-inner-page .hero-buttons .button { min-height: 46px; }

/* --------------------------------------------------------------- Status pill */

.hm-inner-page .status { padding: 5px 11px; border-radius: 20px; font-size: 11.5px; }

/* --------------------------------------------------------------- Responsive */

@media (max-width: 900px) {
  .hm-inner-page .cart-layout,
  .hm-inner-page .account-layout { grid-template-columns: minmax(0, 1fr); }
  .hm-inner-page .summary-card,
  .hm-inner-page .account-nav { position: static; }
  .hm-inner-page .account-nav { display: flex; flex-wrap: wrap; }
  .hm-inner-page .account-nav a, .hm-inner-page .account-nav button { width: auto; }
}
@media (max-width: 640px) {
  .hm-inner-page .cart-item { grid-template-columns: 60px minmax(0, 1fr) 44px; row-gap: 10px; }
  .hm-inner-page .cart-thumb { width: 60px; height: 52px; }
  .hm-inner-page .cart-qty { grid-column: 2 / 3; }
  .hm-inner-page .cart-line-total { grid-column: 1 / -1; text-align: left; }
  .hm-inner-page .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .hm-inner-page .order-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
}

/* ------------------------------------------------------ Colour choices

   A product can be sold in several colours, each with its own photo. The
   swatches read as colour + name so the choice never depends on colour alone. */

.hm-inner-page .hm-color-picker { margin: 18px 0 4px; }
.hm-inner-page .hm-color-label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--page-muted);
}
.hm-inner-page .hm-color-label b { color: #fff; letter-spacing: normal; text-transform: none; font-size: 14px; }
.hm-inner-page .hm-color-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-inner-page .hm-swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--page-line);
  border-radius: 26px;
  background: var(--page-surface);
  color: var(--page-text-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hm-inner-page .hm-swatch i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.hm-inner-page .hm-swatch:hover { border-color: #4d515e; color: #fff; }
.hm-inner-page .hm-swatch.is-on {
  border-color: var(--hm-red-500);
  background: rgba(229, 27, 35, .14);
  color: #fff;
  box-shadow: 0 0 0 1px var(--hm-red-500);
}
.hm-inner-page .hm-swatch:focus-visible { outline: none; box-shadow: var(--ring); }
.hm-inner-page [data-color-image] { transition: opacity var(--dur) var(--ease-out); }
.hm-inner-page [data-color-image].is-swapping { opacity: .25; }

.hm-inner-page .hm-cart-color { display: inline-flex; align-items: center; gap: 6px; }
.hm-inner-page .hm-cart-color i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* Colour editor inside the staff panel */
.hm-color-list { display: grid; gap: 8px; margin-bottom: 18px; }
.hm-color-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--s-line, #2a2d34);
  border-radius: 12px;
  background: var(--s-surface-2, rgba(255, 255, 255, .03));
}
.hm-color-thumb {
  width: 64px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background: #eef0f4;
  display: grid;
  place-items: center;
}
.hm-color-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.hm-color-meta { display: grid; gap: 2px; margin-right: auto; }
.hm-color-meta strong { font-size: 14px; }
.hm-color-meta span { font-size: 11.5px; opacity: .7; }
.hm-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .45);
}
.hm-color-editor .panel-note.warn { color: #ffb26b; }
.panel-button.small { min-height: 38px; padding: 0 14px; font-size: 13px; }

@media (max-width: 560px) {
  .hm-color-chip { flex-wrap: wrap; }
  .hm-color-meta { margin-right: 0; }
}

/* ========================================= Sidebar and report layout polish */

/* The sidebar itself stays fixed. Only its navigation list scrolls, so opening
   a lower admin page does not push the selected item back out of sight. */
.panel-modern-body .panel-sidebar {
  overflow: hidden;
}
.panel-modern-body .panel-sidebar .panel-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.panel-modern-body .panel-sidebar .panel-role-chip,
.panel-modern-body .panel-sidebar .panel-quick-stats,
.panel-modern-body .panel-sidebar .employee-access-card,
.panel-modern-body .panel-sidebar .panel-build-stamp,
.panel-modern-body .panel-sidebar .panel-sidebar-logout {
  flex: 0 0 auto;
}

/* Six report cards in one row made each daily/monthly form overflow its card.
   Three calm columns leave enough room for dates and full button labels. */
.panel-modern-body .report-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.panel-modern-body .report-card {
  min-width: 0;
  padding: 20px;
}
.panel-modern-body .report-card-head {
  min-height: 54px;
}
.panel-modern-body .report-card-head .panel-note {
  margin: 5px 0 0;
  line-height: 1.45;
}
.panel-modern-body .report-card-forms {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.panel-modern-body .report-card-forms form,
.panel-modern-body .report-card-forms .panel-input {
  min-width: 0;
}
.panel-modern-body .report-card-forms form {
  padding: 12px;
  border-color: var(--s-border);
  background: var(--s-surface-2);
}
.panel-modern-body .report-card-forms button {
  min-height: 40px;
}

@media (max-width: 1440px) {
  .panel-modern-body .report-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .panel-modern-body .report-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 480px) {
  .panel-modern-body .report-card-forms {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Wide report previews use the same proportions as their landscape printout. */
body.report-document-body .invoice-actions,
body.report-document-body .report-print {
  width: min(1400px, 100%);
}
body.report-document-body {
  page: report-landscape;
}
@page report-landscape {
  size: A4 landscape;
  margin: 9mm;
}
body.report-document-body .report-print {
  overflow: hidden;
}
body.report-document-body .report-table {
  width: 100%;
}
body.report-document-body .report-export-table {
  table-layout: fixed;
}
body.report-document-body .report-table th,
body.report-document-body .report-table td {
  padding: 7px 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

@media print {
  body.report-document-body {
    padding: 0 !important;
  }
  body.report-document-body .report-print {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body.report-document-body .service-invoice > header {
    padding-bottom: 10px;
  }
  body.report-document-body .service-invoice > header > div:last-child > strong {
    font-size: 21px;
  }
  body.report-document-body .report-tiles {
    margin: 12px 0;
    gap: 8px;
  }
  body.report-document-body .report-tile {
    padding: 9px;
  }
  body.report-document-body .report-tile strong {
    font-size: 16px;
  }
  body.report-document-body .report-table {
    font-size: 8.5px;
  }
  body.report-document-body .report-table th,
  body.report-document-body .report-table td {
    padding: 4px 3px;
  }
  body.report-document-body .report-table thead {
    display: table-header-group;
  }
  body.report-document-body .report-table tr,
  body.report-document-body .report-tile {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  body.report-document-body .report-subhead {
    margin: 14px 0 7px;
    padding-top: 10px;
  }
body.report-document-body .service-invoice footer {
    margin-top: 12px;
    padding-top: 8px;
  }
}

/* ======================================== Developer alerts and data cleanup */

.dev-toast-stack {
  position: fixed;
  z-index: 120;
  top: 98px;
  right: 22px;
  width: min(440px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}
body.developer-body .dev-sidebar {
  overflow: hidden;
}
body.developer-body .dev-sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.developer-body .dev-sidebar .dev-help {
  flex: 0 0 auto;
}
body.developer-body .dev-toast-stack .dev-alert {
  margin: 0;
  min-height: 58px;
  padding: 13px 46px 13px 16px !important;
  display: flex;
  align-items: center;
  background: var(--s-surface) !important;
  color: var(--s-text) !important;
  border: 1px solid var(--s-border) !important;
  border-left: 4px solid var(--hm-red-500) !important;
  box-shadow: var(--lift-3) !important;
  pointer-events: auto;
}
body.developer-body .dev-toast-stack .dev-alert-success {
  border-left-color: #25a85b !important;
}
body.developer-body .dev-toast-stack .dev-alert-error {
  border-left-color: var(--hm-red-500) !important;
}
body.developer-body .dev-toast-stack .dev-alert button {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  background: var(--s-surface-3);
  color: var(--s-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
body.developer-body .dev-cleanup-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
body.developer-body .dev-cleanup-warning > .ui-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}
body.developer-body .dev-cleanup-warning span {
  display: grid;
  gap: 3px;
}
body.developer-body .dev-cleanup-confirm {
  max-width: 620px;
}
body.developer-body .dev-danger-count {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(229, 27, 35, .4);
  border-radius: 20px;
  background: var(--tint-red);
  color: var(--s-red-text) !important;
  font-size: 13px;
}
body.developer-body .dev-delete-all-card {
  border-color: rgba(229, 27, 35, .45) !important;
}

@media (max-width: 720px) {
  .dev-toast-stack {
    top: 78px;
    right: 16px;
    left: 16px;
    width: auto;
  }
  body.developer-body .dev-delete-all-card .dev-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ======================================== v30.6 page heroes and panel polish */

/* A grid nav inside a flex-growing sidebar stretches its rows by default.
   Keep every section packed together beneath the brand instead. */
.panel-modern-body .panel-sidebar .panel-nav {
  align-content: start;
  grid-auto-rows: max-content;
}
.panel-modern-body .panel-sidebar .panel-nav-group {
  align-self: start;
}

/* The three homepage trust points stay readable and evenly aligned on every
   hero instead of collapsing into irregular icon/text pairs. */
.hm-page-home .hm-hero-trust {
  width: min(620px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.hm-page-home .hm-hero-trust span {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(8,9,11,.58);
  backdrop-filter: blur(8px);
}
.hm-page-home .hm-hero-trust .ui-icon {
  width: 16px;
  height: 16px;
  padding: 9px;
  border: 1px solid rgba(237,28,36,.45);
  border-radius: 50%;
  background: rgba(237,28,36,.10);
}
.hm-page-home .hm-hero-trust b {
  font-size: 11.5px;
  line-height: 1.25;
}

.hm-inner-page .hm-editable-page-hero {
  min-height: 410px;
  padding: 76px 0;
  background-image: var(--page-hero-image);
  background-position: var(--page-hero-position, center) center;
  background-size: cover;
}
.hm-inner-page .hm-editable-page-hero::before {
  background: linear-gradient(90deg,#07080a 0%,rgba(7,8,10,.94) 44%,rgba(7,8,10,.45) 73%,rgba(7,8,10,.18));
}
.hm-inner-page .hm-editable-page-hero .container::before {
  display: none;
}
.page-hero-eyebrow {
  display: block;
  margin: 18px 0 10px;
  color: #ff4c53;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}
.hm-inner-page .hm-editable-page-hero h1 {
  max-width: 760px;
  font-size: clamp(44px, 6vw, 78px);
}
.page-hero-button {
  width: max-content;
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-hero-button .ui-icon {
  width: 17px;
  height: 17px;
}

.hm-page-hero-editor {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
}
.hm-page-hero-preview {
  align-self: start;
  position: sticky;
  top: 90px;
}
.hm-page-hero-preview-frame {
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  padding: 34px;
  overflow: hidden;
  border-radius: 14px;
  background-position: center;
  background-size: cover;
  color: #fff;
}
.hm-page-hero-preview-frame > div {
  max-width: 470px;
}
.hm-page-hero-preview-frame small {
  color: #ff4c53;
  font-weight: 900;
  letter-spacing: .15em;
}
.hm-page-hero-preview-frame strong {
  display: block;
  margin: 8px 0;
  font-size: 34px;
  line-height: .98;
  text-transform: uppercase;
}
.hm-page-hero-preview-frame p {
  color: #d4d5da;
  line-height: 1.5;
}
.hm-page-hero-preview-frame span {
  display: inline-flex;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 7px;
  background: var(--red);
  font-weight: 800;
}

/* Public Services cards now read as a consistent workshop catalogue. */
.hm-page-services .service-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(22,24,30,.07);
}
.hm-page-services .service-card-media {
  height: 210px;
  background: linear-gradient(145deg,#f8f9fb,#eceef3);
}
.hm-page-services .service-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}
.hm-page-services .service-card-body p {
  flex: 1;
  line-height: 1.65;
}
.hm-page-services .service-card-body .button {
  width: 100%;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .hm-page-hero-editor {
    grid-template-columns: 1fr;
  }
  .hm-page-hero-preview {
    position: static;
  }
}

@media (max-width: 680px) {
  .hm-page-home .hm-hero-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .hm-page-home .hm-hero-trust span {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 5px;
    padding: 8px 4px;
    text-align: center;
  }
  .hm-page-home .hm-hero-trust b {
    font-size: 10px;
  }
  .hm-inner-page .hm-editable-page-hero {
    min-height: 350px;
    padding: 58px 0;
  }
  .hm-inner-page .hm-editable-page-hero::before {
    background: linear-gradient(90deg,rgba(7,8,10,.98),rgba(7,8,10,.82));
  }
  .hm-page-hero-preview-frame {
    min-height: 300px;
    padding: 24px;
  }
}

/* Keep every sign-in glyph optically centred inside its input. The field
   includes a label above the control, so centring from the field's top made the
   mail, lock and eye icons sit visibly above the typed text. */
.hm-inner-page .auth-card .hm-icon-field:not(.hm-icon-field-top) .hm-field-icon {
  top: auto;
  bottom: 17px;
}
.hm-inner-page .auth-card .hm-password-toggle {
  top: auto;
  bottom: 10px;
}
.hm-inner-page .auth-card .hm-field-icon,
.hm-inner-page .auth-card .hm-password-toggle {
  line-height: 0;
}

/* ======================================== v30.8 footer, auth and dashboard polish */

.hm-footer-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(28px, 3vw, 42px);
}
.hm-footer-cta > div:first-child {
  max-width: 760px;
}
.hm-footer-cta-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hm-footer-call {
  min-width: 275px;
  min-height: 76px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(5,7,10,.46);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  backdrop-filter: blur(9px);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.hm-footer-call:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.42);
  background: rgba(5,7,10,.7);
}
.hm-footer-call > .ui-icon {
  width: 22px;
  height: 22px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(239,27,36,.17);
  color: #ff4b53;
}
.hm-footer-call > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.hm-footer-call small {
  color: #aeb2ba;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .13em;
}
.hm-footer-call strong {
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: .015em;
  white-space: nowrap;
}

.hm-footer-main-v8 {
  grid-template-columns: minmax(260px, 1.28fr) minmax(145px, .65fr) minmax(175px, .78fr) minmax(290px, 1.2fr);
  align-items: start;
  gap: clamp(30px, 4vw, 58px);
  padding: 42px 8px 34px;
}
.hm-footer-column,
.hm-footer-brand-v8 {
  min-width: 0;
}
.hm-footer-contact-v8 > div {
  grid-template-columns: 28px minmax(0, 1fr);
}
.hm-footer-contact-v8 {
  gap: 16px;
}
.hm-footer-column h3 {
  margin-bottom: 20px;
}
.hm-footer-contact-v8 strong {
  overflow-wrap: anywhere;
}

.hm-footer-bottom-v8 {
  min-height: 86px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 340px) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.hm-footer-copyright {
  justify-self: start;
}
.hm-footer-legal {
  justify-self: end;
}
.hm-developer-card {
  min-height: 78px !important;
  width: 100%;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  border: 1px solid rgba(37,211,102,.62);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(37,211,102,.09), rgba(10,13,15,.96));
  color: #edf2ef !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hm-developer-card:hover {
  transform: translateY(-2px);
  border-color: #32e675;
  background: linear-gradient(135deg, rgba(37,211,102,.15), rgba(13,17,19,.98));
  box-shadow: 0 16px 36px rgba(0,0,0,.28), 0 0 0 3px rgba(37,211,102,.07);
}
.hm-developer-card > i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #25d366;
  color: #07120b;
  box-shadow: 0 8px 20px rgba(37,211,102,.22);
}
.hm-developer-card > i .ui-icon {
  width: 24px;
  height: 24px;
}
.hm-developer-card > span {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.hm-developer-card strong {
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
}
.hm-developer-card small {
  color: #aeb8b2;
  font-size: 11px;
  line-height: 1.35;
}
.hm-developer-card > b {
  display: grid;
  place-items: center;
  color: #58e98d;
}
.hm-developer-card > b .ui-icon {
  width: 17px;
  height: 17px;
  transform: rotate(-90deg);
}
.hm-developer-lower {
  justify-self: center;
  min-height: 58px !important;
  width: min(340px, 100%);
  grid-template-columns: 38px minmax(0, 1fr) 16px;
  gap: 10px;
  padding: 8px 12px !important;
  border-radius: 14px;
}
.hm-developer-lower > i {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.hm-developer-lower > i .ui-icon {
  width: 21px;
  height: 21px;
}
.hm-developer-lower strong {
  font-size: 13px;
}
.hm-developer-lower small {
  font-size: 10px;
}

/* A distinct, polished welcome banner in both panel themes. */
body.panel-body .admin-welcome-banner {
  min-height: 206px;
  padding: 0;
  border-radius: 16px !important;
  box-shadow: 0 16px 42px rgba(24,31,43,.10) !important;
}
html[data-theme="light"] body.panel-body .admin-welcome-banner {
  border-color: #dde2e9 !important;
  background-image:
    linear-gradient(112deg, #ffffff 0%, #ffffff 47%, #f3f5f8 61%, #d90916 61.2%, #a8000a 100%) !important;
}
html[data-theme="dark"] body.panel-body .admin-welcome-banner {
  border-color: #303744 !important;
  background-image:
    radial-gradient(circle at 54% 90%, rgba(255,77,86,.12), transparent 26%),
    linear-gradient(112deg, #171c23 0%, #10141a 47%, #181d25 61%, #980913 61.2%, #56040a 100%) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.28) !important;
}
body.panel-body .admin-welcome-banner::before {
  background:
    linear-gradient(135deg, transparent 0 34%, rgba(139,148,160,.11) 34.2% 34.7%, transparent 34.9% 43%, rgba(139,148,160,.08) 43.2% 43.7%, transparent 43.9%),
    repeating-linear-gradient(120deg, transparent 0 25px, rgba(255,255,255,.10) 26px 27px) !important;
}
html[data-theme="light"] body.panel-body .admin-welcome-banner::before {
  opacity: .56;
}
html[data-theme="dark"] body.panel-body .admin-welcome-banner::before {
  opacity: .8;
}
body.panel-body .admin-welcome-banner::after {
  right: 25%;
  top: -36px;
  width: 184px;
  height: 286px;
  border-radius: 0;
  background: transparent;
  transform: skewX(-22deg);
}
html[data-theme="light"] body.panel-body .admin-welcome-banner::after {
  border-left: 1px solid rgba(224,9,22,.2) !important;
  border-right: 1px solid rgba(224,9,22,.1) !important;
}
html[data-theme="dark"] body.panel-body .admin-welcome-banner::after {
  border-left: 1px solid rgba(255,88,97,.3) !important;
  border-right: 1px solid rgba(255,88,97,.15) !important;
}
body.panel-body .admin-welcome-banner > .admin-welcome-copy {
  width: 46%;
  padding-left: clamp(28px, 3.2vw, 52px);
}
body.panel-body .admin-welcome-copy > span {
  padding: 7px 13px;
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(20,26,36,.06);
}
html[data-theme="light"] body.panel-body .admin-welcome-copy > span {
  border-color: #e5e8ed;
  background: #f7f8fa !important;
}
html[data-theme="dark"] body.panel-body .admin-welcome-copy > span {
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.07) !important;
}
body.panel-body .admin-welcome-copy h1 {
  margin: 14px 0 8px !important;
  font-size: clamp(28px, 2.45vw, 39px) !important;
  line-height: 1.02;
}
body.panel-body .admin-welcome-copy p {
  margin: 0;
  font-size: 14px !important;
}
body.panel-body .admin-welcome-banner > .admin-welcome-bike {
  left: 51%;
  bottom: -8px;
  width: 380px;
  height: 218px;
}
body.panel-body .admin-welcome-banner > .admin-welcome-brand {
  right: 5.5%;
}

@media (max-width: 1100px) {
  .hm-footer-cta {
    grid-template-columns: 1fr;
  }
  .hm-footer-cta-actions {
    justify-content: flex-start;
  }
  .hm-footer-main-v8 {
    grid-template-columns: 1fr 1fr;
  }
  .hm-footer-brand-v8 {
    grid-column: 1 / -1;
  }
  .hm-footer-contact-v8 {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .hm-footer-contact-v8 h3,
  .hm-footer-contact-v8 > div:last-child {
    grid-column: auto;
  }
  .hm-footer-bottom-v8 {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 320px) minmax(0, 1fr);
  }
  .hm-footer-legal {
    grid-row: auto;
    grid-column: auto;
    justify-self: end;
  }
}

@media (max-width: 780px) {
  .hm-footer-bottom-v8 {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 18px 0;
    text-align: center;
  }
  .hm-footer-copyright,
  .hm-developer-lower,
  .hm-footer-legal {
    grid-column: 1;
    justify-self: center;
  }
  .hm-footer-legal {
    flex-wrap: wrap;
    justify-content: center;
  }
  body.panel-body .admin-welcome-banner > .admin-welcome-copy {
    width: 100%;
    padding: 24px;
  }
  body.panel-body .admin-welcome-banner > .admin-welcome-bike {
    right: -44px;
    left: auto;
    width: 275px;
    height: 174px;
    opacity: .3;
  }
}

@media (max-width: 680px) {
  .hm-footer-call {
    width: 100%;
    min-width: 0;
  }
  .hm-footer-main-v8 {
    grid-template-columns: 1fr;
    padding: 34px 4px 28px;
  }
  .hm-footer-brand-v8 {
    grid-column: auto;
  }
  .hm-footer-bottom-v8 {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 20px 0;
  }
  .hm-footer-copyright,
  .hm-footer-legal {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }
  .hm-footer-legal {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ===================================================================
   HOME · EXPLORE SECTION (bento)  —  scoped to .hm-hx
   Self-contained: no legacy .hm-home-panels rules apply here.
   =================================================================== */

.hm-hx {
  --hx-red: #ef202a;
  --hx-red-hot: #ff4d55;
  --hx-bg: #0a0c10;
  --hx-line: rgba(255, 255, 255, .085);
  --hx-line-soft: rgba(255, 255, 255, .055);
  --hx-text: #f3f4f6;
  --hx-muted: #98a1ac;
  --hx-radius: 20px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 86px 0 96px;
  background: var(--hx-bg);
  color: var(--hx-text);
}

.hm-hx-aura {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 780px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(620px 380px at 18% 8%, rgba(239, 32, 42, .20), transparent 68%),
    radial-gradient(540px 340px at 84% 2%, rgba(120, 140, 255, .08), transparent 70%);
}

.hm-hx-aura::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 78%);
}

.hm-hx-inner {
  position: relative;
  z-index: 1;
  width: min(1380px, calc(100% - 48px));
  margin-inline: auto;
}

/* ------------------------------------------------------------ Section head */

.hm-hx-head {
  max-width: 780px;
  margin: 0 auto 44px;
  text-align: center;
}

.hm-hx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--hx-red-hot);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.hm-hx-eyebrow i {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 32, 42, .85));
}

.hm-hx-eyebrow i:last-child { background: linear-gradient(90deg, rgba(239, 32, 42, .85), transparent); }

.hm-hx-head h2 {
  margin: 16px 0 14px;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
}

.hm-hx-head h2 em {
  font-style: normal;
  background: linear-gradient(100deg, #ff5158 0%, #ef202a 55%, #a50e14 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hm-hx-head p {
  margin: 0 auto;
  max-width: 620px;
  color: var(--hx-muted);
  font-size: 15px;
  line-height: 1.68;
}

/* ----------------------------------------------------------- Stats ribbon */

.hm-hx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.hm-hx-stat {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  border: 1px solid var(--hx-line);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  transition: border-color .25s ease, transform .25s ease;
}

.hm-hx-stat:hover { border-color: rgba(239, 32, 42, .38); transform: translateY(-3px); }

.hm-hx-stat-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(239, 32, 42, .3);
  background: linear-gradient(150deg, rgba(239, 32, 42, .24), rgba(239, 32, 42, .05));
  color: var(--hx-red-hot);
}

.hm-hx-stat-icon .ui-icon { width: 21px; height: 21px; }

.hm-hx-stat strong {
  display: block;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.hm-hx-stat strong em {
  font-style: normal;
  color: var(--hx-red-hot);
  margin-left: 1px;
}

.hm-hx-stat span {
  display: block;
  margin-top: 6px;
  color: var(--hx-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
}

/* -------------------------------------------------------------- Bento grid */

.hm-hx-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.hm-hx-span-12 { grid-column: span 12; }
.hm-hx-span-7  { grid-column: span 7; }
.hm-hx-span-5  { grid-column: span 5; }

.hm-hx-grid > [data-home-reveal]:nth-child(2) { --reveal-delay: 70ms; }
.hm-hx-grid > [data-home-reveal]:nth-child(3) { --reveal-delay: 140ms; }
.hm-hx-grid > [data-home-reveal]:nth-child(4) { --reveal-delay: 70ms; }
.hm-hx-grid > [data-home-reveal]:nth-child(5) { --reveal-delay: 140ms; }

.hm-hx-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius);
  background: linear-gradient(180deg, #14171d 0%, #0e1116 100%);
  transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}

.hm-hx-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent);
  pointer-events: none;
}

.hm-hx-card:hover,
.hm-hx-card:focus-within {
  border-color: rgba(239, 32, 42, .36);
  transform: translateY(-3px);
  box-shadow: 0 26px 56px rgba(0, 0, 0, .5);
}

/* Card header */

.hm-hx-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--hx-line-soft);
}

.hm-hx-card-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.hm-hx-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid rgba(239, 32, 42, .32);
  background: linear-gradient(150deg, rgba(239, 32, 42, .24), rgba(239, 32, 42, .05));
  color: var(--hx-red-hot);
}

.hm-hx-badge .ui-icon { width: 21px; height: 21px; }

.hm-hx-card-title h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}

.hm-hx-card-title p {
  margin: 4px 0 0;
  color: var(--hx-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.hm-hx-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid rgba(239, 32, 42, .28);
  background: rgba(239, 32, 42, .08);
  color: var(--hx-red-hot);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  transition: gap .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.hm-hx-more .ui-icon { width: 15px; height: 15px; }
.hm-hx-more:hover { gap: 11px; background: rgba(239, 32, 42, .18); border-color: rgba(239, 32, 42, .55); color: #fff; }

/* -------------------------------------------------------- Featured bikes */

.hm-hx-bike-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 16px;
  padding: 22px;
}

.hm-hx-bike {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--hx-line);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #191d24 0%, #0f1217 100%);
  transition: border-color .26s ease, transform .26s ease, box-shadow .26s ease;
}

.hm-hx-bike-media {
  position: relative;
  display: grid;
  place-items: center;
  height: 208px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 -46px 64px -44px rgba(15, 18, 23, .2);
}

.hm-hx-bike-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  filter: drop-shadow(0 16px 18px rgba(15, 18, 23, .28));
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.hm-hx-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 6px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d3131a, #f7242d);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(239, 32, 42, .38);
}

.hm-hx-bike-body {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  min-width: 0;
}

.hm-hx-bike-body > strong {
  font-size: 16.5px;
  font-weight: 850;
  color: #fff;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hm-hx-bike-sub {
  margin-top: 4px;
  color: var(--hx-muted);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hm-hx-bike-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hx-line-soft);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.hm-hx-price small {
  display: block;
  color: var(--hx-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hm-hx-price b {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.01em;
}

.hm-hx-go {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  transition: background .24s ease, border-color .24s ease, transform .24s ease;
}

.hm-hx-go .ui-icon { width: 16px; height: 16px; }

.hm-hx-bike:hover {
  border-color: rgba(239, 32, 42, .5);
  transform: translateY(-5px);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .55);
}

.hm-hx-bike:hover .hm-hx-bike-media img { transform: scale(1.07) translateY(-4px); }
.hm-hx-bike:hover .hm-hx-go { background: linear-gradient(135deg, #d3131a, #f7242d); border-color: #ff4d55; transform: translateX(3px); }

/* ---------------------------------------------------------- Parts tiles */

.hm-hx-parts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 22px 24px;
  flex: 1;
  grid-auto-rows: 1fr;
}

.hm-hx-parts-grid a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 112px;
  padding: 14px 10px;
  border: 1px solid var(--hx-line);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
  color: #d9dee5;
  font-size: 12.5px;
  font-weight: 750;
  text-align: center;
  transition: border-color .24s ease, transform .24s ease, color .24s ease, background .24s ease;
}

.hm-hx-parts-grid a i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  color: var(--hx-red-hot);
  transition: background .24s ease, border-color .24s ease, transform .24s ease;
}

.hm-hx-parts-grid a i .ui-icon { width: 22px; height: 22px; }

.hm-hx-parts-grid a:hover {
  border-color: rgba(239, 32, 42, .5);
  background: linear-gradient(180deg, rgba(239, 32, 42, .12), rgba(239, 32, 42, .02));
  color: #fff;
  transform: translateY(-4px);
}

.hm-hx-parts-grid a:hover i {
  background: rgba(239, 32, 42, .2);
  border-color: rgba(239, 32, 42, .45);
  transform: scale(1.06);
}

/* ------------------------------------------------------------ Why choose */

.hm-hx-parts,
.hm-hx-why,
.hm-hx-reviews { display: flex; flex-direction: column; }

.hm-hx-why-list {
  list-style: none;
  margin: 0;
  padding: 18px 22px 22px;
  display: grid;
  gap: 10px;
  flex: 1;
  grid-auto-rows: 1fr;
}

.hm-hx-why-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--hx-line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, .022);
  transition: border-color .24s ease, background .24s ease, transform .24s ease;
}

.hm-hx-why-list li i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(239, 32, 42, .28);
  background: linear-gradient(150deg, rgba(239, 32, 42, .2), rgba(239, 32, 42, .04));
  color: var(--hx-red-hot);
}

.hm-hx-why-list li i .ui-icon { width: 20px; height: 20px; }

.hm-hx-why-list b {
  display: block;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
}

.hm-hx-why-list small {
  display: block;
  margin-top: 3px;
  color: var(--hx-muted);
  font-size: 12px;
  line-height: 1.4;
}

.hm-hx-why-list li:hover {
  border-color: rgba(239, 32, 42, .34);
  background: rgba(239, 32, 42, .07);
  transform: translateX(4px);
}

/* ----------------------------------------------------------- Testimonials */

.hm-hx-review-body {
  display: flex;
  flex-direction: column;
  padding: 22px;
  flex: 1;
}

.hm-hx-quote-slider { position: relative; flex: 1; }

.hm-hx-quote { display: none; margin: 0; flex-direction: column; height: 100%; }
.hm-hx-quote.active { display: flex; animation: hm-hx-fade .38s ease; }

@keyframes hm-hx-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hm-hx-stars {
  color: #ffb020;
  font-size: 15px;
  letter-spacing: 3px;
}

.hm-hx-quote p {
  margin: 14px 0 0;
  color: #d6dae1;
  font-size: 14px;
  line-height: 1.72;
}

.hm-hx-quote footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hx-line-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}

.hm-hx-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f7242d, #8f0d13);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.hm-hx-who b { display: block; color: #fff; font-size: 13px; font-weight: 800; }
.hm-hx-who small { display: block; margin-top: 2px; color: var(--hx-muted); font-size: 11.5px; }

.hm-hx-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}

.hm-hx-dots i {
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .2);
  cursor: pointer;
  transition: background .22s ease, width .22s ease;
}

.hm-hx-dots i.active { width: 34px; background: var(--hx-red); }

/* --------------------------------------------------------------- Workshop */

.hm-hx-service { display: grid; grid-template-columns: 42% 58%; }

.hm-hx-service-media {
  position: relative;
  min-height: 350px;
  background-size: cover;
  background-position: center;
}

.hm-hx-service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 12, 16, .28) 0%, rgba(14, 17, 22, .18) 45%, rgba(14, 17, 22, .96) 100%);
}

.hm-hx-ribbon {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(10, 12, 16, .68);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hm-hx-ribbon .ui-icon { width: 15px; height: 15px; color: var(--hx-red-hot); }

.hm-hx-service-copy { display: flex; flex-direction: column; padding-bottom: 24px; }

.hm-hx-checks {
  list-style: none;
  margin: 18px 0 24px;
  padding: 0 22px;
  display: grid;
  gap: 11px;
}

.hm-hx-checks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 20px; }

.hm-hx-checks li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #cfd5dd;
  font-size: 13.5px;
  line-height: 1.45;
}

.hm-hx-checks li i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(239, 32, 42, .34);
  background: rgba(239, 32, 42, .14);
  color: var(--hx-red-hot);
}

.hm-hx-checks li i .ui-icon { width: 13px; height: 13px; }

/* ---------------------------------------------------------------- Buttons */

.hm-hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 47px;
  padding: 0 22px;
  border-radius: 12px;
  border: 1px solid rgba(255, 105, 112, .5);
  background: linear-gradient(135deg, #d3131a, #f7242d);
  color: #fff;
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 14px 32px rgba(239, 32, 42, .3);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}

.hm-hx-btn .ui-icon { width: 16px; height: 16px; }
.hm-hx-btn:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 18px 40px rgba(239, 32, 42, .42); }

.hm-hx-btn-ghost {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: none;
}

.hm-hx-btn-ghost:hover { background: rgba(255, 255, 255, .11); border-color: #fff; box-shadow: none; }

.hm-hx-service-copy .hm-hx-btn,
.hm-hx-wholesale-copy .hm-hx-btn { margin: auto 22px 0; align-self: flex-start; }

/* -------------------------------------------------------------- Wholesale */

.hm-hx-wholesale { display: grid; grid-template-columns: 56% 44%; }

.hm-hx-wholesale-copy { display: flex; flex-direction: column; padding-bottom: 26px; }

.hm-hx-lede {
  margin: 18px 22px 0;
  color: var(--hx-muted);
  font-size: 13.5px;
  line-height: 1.65;
  max-width: 560px;
}

.hm-hx-wholesale-media { position: relative; overflow: hidden; min-height: 300px; }

.hm-hx-wholesale-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hm-hx-wholesale-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 17, 22, .96) 0%, rgba(14, 17, 22, .2) 42%, rgba(10, 12, 16, .35) 100%);
}

/* -------------------------------------------------------------- CTA panel */

.hm-hx-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 34px 38px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(115deg, #a50f16 0%, #e51b23 46%, #780c11 100%);
  box-shadow: 0 28px 64px rgba(229, 27, 35, .3);
}

.hm-hx-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(420px 240px at 88% 12%, rgba(255, 255, 255, .22), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 22px);
}

.hm-hx-cta-copy { position: relative; z-index: 1; min-width: 0; }

.hm-hx-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .9);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hm-hx-cta-eyebrow .ui-icon { width: 15px; height: 15px; }

.hm-hx-cta h3 {
  margin: 12px 0 8px;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
}

.hm-hx-cta p {
  margin: 0;
  max-width: 660px;
  color: rgba(255, 255, 255, .88);
  font-size: 14.5px;
  line-height: 1.62;
}

.hm-hx-cta-actions {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
}

.hm-hx-cta .hm-hx-btn {
  background: #fff;
  border-color: #fff;
  color: #b3111a;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .26);
}

.hm-hx-cta .hm-hx-btn:hover { filter: none; background: #fff5f5; }

.hm-hx-cta .hm-hx-btn-ghost {
  background: rgba(0, 0, 0, .2);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  box-shadow: none;
}

.hm-hx-cta .hm-hx-btn-ghost:hover { background: rgba(0, 0, 0, .34); border-color: #fff; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1240px) {
  .hm-hx-service { grid-template-columns: 46% 54%; }
  .hm-hx-wholesale { grid-template-columns: 54% 46%; }
}

@media (max-width: 1080px) {
  .hm-hx { padding: 68px 0 76px; }
  .hm-hx-parts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-hx-inner { width: calc(100% - 36px); }
  .hm-hx-span-7,
  .hm-hx-span-5 { grid-column: span 12; }
}

@media (max-width: 900px) {
  .hm-hx-service,
  .hm-hx-wholesale { grid-template-columns: 1fr; }
  .hm-hx-parts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-hx-checks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-hx-service-media { min-height: 260px; }
  .hm-hx-service-media::after { background: linear-gradient(180deg, rgba(10, 12, 16, .25) 0%, rgba(14, 17, 22, .9) 100%); }
  .hm-hx-wholesale-media { min-height: 240px; order: -1; }
  .hm-hx-wholesale-media::after { background: linear-gradient(180deg, rgba(10, 12, 16, .2) 0%, rgba(14, 17, 22, .9) 100%); }
  .hm-hx-service-copy,
  .hm-hx-wholesale-copy { padding-bottom: 22px; }
  .hm-hx-cta { flex-direction: column; align-items: flex-start; padding: 30px 26px; }
  .hm-hx-cta-actions { width: 100%; }
  .hm-hx-cta-actions .hm-hx-btn { flex: 1; }
}

@media (max-width: 640px) {
  .hm-hx { padding: 52px 0 60px; }
  .hm-hx-inner { width: calc(100% - 24px); }
  .hm-hx-head { margin-bottom: 30px; }
  .hm-hx-eyebrow { font-size: 10px; letter-spacing: .22em; gap: 10px; }
  .hm-hx-eyebrow i { width: 24px; }
  .hm-hx-head p { font-size: 13.5px; }
  .hm-hx-stats { gap: 10px; }
  .hm-hx-stat { padding: 15px 16px; gap: 12px; }
  .hm-hx-stat-icon { width: 42px; height: 42px; border-radius: 12px; }
  .hm-hx-stat strong { font-size: 23px; }
  .hm-hx-grid { gap: 12px; }
  .hm-hx-card { border-radius: 17px; }
  .hm-hx-card-head { flex-wrap: wrap; gap: 12px; padding: 16px 16px; }
  .hm-hx-badge { width: 40px; height: 40px; border-radius: 12px; }
  .hm-hx-card-title h3 { font-size: 14.5px; }
  .hm-hx-card-title p { font-size: 11.5px; }
  .hm-hx-more { min-height: 34px; padding: 0 12px; font-size: 11.5px; }
  .hm-hx-bike-grid { padding: 16px; gap: 12px; }
  .hm-hx-bike-media { height: 190px; }
  .hm-hx-parts-grid { padding: 16px; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-hx-parts-grid a { min-height: 104px; font-size: 12px; }
  .hm-hx-why-list { padding: 14px 16px 18px; }
  .hm-hx-review-body { padding: 18px 16px; }
  .hm-hx-checks { padding: 0 16px; margin: 14px 0 20px; }
  .hm-hx-checks-2 { grid-template-columns: 1fr; }
  .hm-hx-lede { margin: 14px 16px 0; font-size: 13px; }
  .hm-hx-service-copy .hm-hx-btn,
  .hm-hx-wholesale-copy .hm-hx-btn { margin: 0 16px; align-self: stretch; }
  .hm-hx-cta { padding: 26px 20px; border-radius: 18px; }
  .hm-hx-cta-actions { flex-direction: column; }
  .hm-hx-cta p { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-hx-card,
  .hm-hx-bike,
  .hm-hx-bike-media img,
  .hm-hx-parts-grid a,
  .hm-hx-why-list li,
  .hm-hx-stat,
  .hm-hx-btn { transition: none; }
  .hm-hx-quote.active { animation: none; }
}

/* ===================================================================
   PUBLIC SITE · UNIFIED PREMIUM SKIN
   One button system, one card system and one form system for every
   customer-facing page, matching the home "Explore Honda Markaz" bento.

   Selectors repeat .hm-public-body twice on purpose: earlier stylesheets
   contain three-class rules such as `.hm-inner-page .auth-card .button`,
   and the doubled class raises specificity just enough to win without
   resorting to !important. Nothing here can reach the admin or developer
   panels, which never carry .hm-public-body.
   =================================================================== */

.hm-public-body {
  --hp-line: rgba(255, 255, 255, .085);
  --hp-line-soft: rgba(255, 255, 255, .055);
  --hp-muted: #98a1ac;
  --hp-red: #ef202a;
  --hp-red-hot: #ff4d55;
  --hp-radius: 20px;
  --hp-card: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 140px), linear-gradient(180deg, #14171d 0%, #0e1116 100%);
}

/* ------------------------------------------------------- 1 · Buttons */

.hm-public-body.hm-public-body .button,
.hm-public-body.hm-public-body .hm-primary-button,
.hm-public-body.hm-public-body .hm-secondary-button,
.hm-public-body.hm-public-body .account-nav form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-height: 47px;
  padding: 0 22px;
  border-radius: 12px;
  border: 1px solid rgba(255, 105, 112, .5);
  background: linear-gradient(135deg, #d3131a, #f7242d);
  color: #fff;
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 14px 32px rgba(239, 32, 42, .3);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}

.hm-public-body.hm-public-body .button .ui-icon,
.hm-public-body.hm-public-body .hm-primary-button .ui-icon,
.hm-public-body.hm-public-body .hm-secondary-button .ui-icon { width: 16px; height: 16px; }

.hm-public-body.hm-public-body .button:hover,
.hm-public-body.hm-public-body .hm-primary-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 18px 40px rgba(239, 32, 42, .42);
}

/* Ghost / secondary */
.hm-public-body.hm-public-body .button-dark,
.hm-public-body.hm-public-body .button-light,
.hm-public-body.hm-public-body .hm-secondary-button,
.hm-public-body.hm-public-body .account-nav form button {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
  box-shadow: none;
}

.hm-public-body.hm-public-body .button-dark:hover,
.hm-public-body.hm-public-body .button-light:hover,
.hm-public-body.hm-public-body .hm-secondary-button:hover,
.hm-public-body.hm-public-body .account-nav form button:hover {
  background: rgba(255, 255, 255, .11);
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: none;
  filter: none;
}

.hm-public-body.hm-public-body .button-small {
  min-height: 41px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 11.5px;
  letter-spacing: .05em;
}

.hm-public-body.hm-public-body .icon-button {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(239, 32, 42, .34);
  background: rgba(239, 32, 42, .12);
  color: var(--hp-red-hot);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}

.hm-public-body.hm-public-body .icon-button:hover {
  background: linear-gradient(135deg, #d3131a, #f7242d);
  border-color: #ff6b72;
  color: #fff;
  transform: translateY(-2px);
}

.hm-public-body.hm-public-body .remove-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--hp-line);
  background: rgba(255, 255, 255, .04);
  color: #b9bfc7;
  font-size: 17px;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.hm-public-body.hm-public-body .remove-button:hover {
  background: rgba(239, 32, 42, .16);
  border-color: rgba(239, 32, 42, .5);
  color: #fff;
}

.hm-public-body.hm-public-body .hm-login-button {
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.hm-public-body.hm-public-body .hm-login-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(239, 32, 42, .38);
}

/* Buttons that should span their container */
.hm-public-body.hm-public-body .summary-card .button,
.hm-public-body.hm-public-body .filter-card .button,
.hm-public-body.hm-public-body .product-actions .button,
.hm-public-body.hm-public-body .service-card-body .button,
.hm-public-body.hm-public-body .auth-card form > .button,
.hm-public-body.hm-public-body .purchase-row .button,
.hm-public-body.hm-public-body .account-nav form button { width: 100%; }

/* ------------------------------------------------- 2 · Surface system */

.hm-public-body.hm-public-body .product-card,
.hm-public-body.hm-public-body .service-card,
.hm-public-body.hm-public-body .filter-card,
.hm-public-body.hm-public-body .summary-card,
.hm-public-body.hm-public-body .cart-card,
.hm-public-body.hm-public-body .account-card,
.hm-public-body.hm-public-body .content-card,
.hm-public-body.hm-public-body .booking-form,
.hm-public-body.hm-public-body .booking-aside,
.hm-public-body.hm-public-body .contact-panel,
.hm-public-body.hm-public-body .auth-card,
.hm-public-body.hm-public-body .spec-table,
.hm-public-body.hm-public-body .empty-state,
.hm-public-body.hm-public-body .purchase-box,
.hm-public-body.hm-public-body .detail-price,
.hm-public-body.hm-public-body .map-embed,
.hm-public-body.hm-public-body .wholesale-copy,
.hm-public-body.hm-public-body .wholesale-login-callout {
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  background: var(--hp-card);
  box-shadow: none;
}

.hm-public-body.hm-public-body .product-card,
.hm-public-body.hm-public-body .service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .26s ease, transform .26s ease, box-shadow .26s ease;
}

.hm-public-body.hm-public-body .product-card:hover,
.hm-public-body.hm-public-body .service-card:hover {
  border-color: rgba(239, 32, 42, .4);
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(0, 0, 0, .5);
}

.hm-public-body.hm-public-body .section-dark {
  background: linear-gradient(180deg, #0d0f14 0%, #08090c 100%);
  border-top: 1px solid var(--hp-line);
  border-bottom: 1px solid var(--hp-line);
}

/* ---------------------------------------------------- 3 · Typography */

.hm-public-body.hm-public-body .section-kicker,
.hm-public-body.hm-public-body .breadcrumbs {
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--hp-red-hot);
}

.hm-public-body.hm-public-body .breadcrumbs {
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(10, 12, 16, .5);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #fff;
  letter-spacing: .16em;
}

.hm-public-body.hm-public-body .section-title {
  margin: 14px 0 18px;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
}

.hm-public-body.hm-public-body .section-copy { color: var(--hp-muted); line-height: 1.68; }

.hm-public-body.hm-public-body .page-hero h1 {
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.hm-public-body.hm-public-body .page-hero p { color: #ccd2da; }

.hm-public-body.hm-public-body .page-hero-eyebrow {
  color: var(--hp-red-hot);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .26em;
  text-transform: uppercase;
}

/* -------------------------------------------------------- 4 · Forms */

.hm-public-body.hm-public-body .form-control {
  width: 100%;
  min-height: 48px;
  padding: 0 15px;
  border-radius: 12px;
  border: 1px solid var(--hp-line);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.hm-public-body.hm-public-body textarea.form-control {
  min-height: 124px;
  padding: 13px 15px;
  line-height: 1.6;
  resize: vertical;
}

.hm-public-body.hm-public-body .form-control::placeholder { color: rgba(255, 255, 255, .32); }

.hm-public-body.hm-public-body .form-control:focus {
  outline: none;
  border-color: rgba(239, 32, 42, .7);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 3px rgba(239, 32, 42, .18);
}

.hm-public-body.hm-public-body select.form-control {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d55' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px 17px;
}

.hm-public-body.hm-public-body select.form-control option { background: #14171d; color: #fff; }

.hm-public-body.hm-public-body .form-field label,
.hm-public-body.hm-public-body .filter-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--hp-muted);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hm-public-body.hm-public-body .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.hm-public-body.hm-public-body .form-help { color: var(--hp-muted); font-size: 12.5px; line-height: 1.55; }

.hm-public-body.hm-public-body .hm-field-icon { color: var(--hp-red-hot); }

.hm-public-body.hm-public-body .hm-password-toggle {
  border-radius: 9px;
  border: 1px solid var(--hp-line);
  background: rgba(255, 255, 255, .05);
  color: #c3c9d1;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.hm-public-body.hm-public-body .hm-password-toggle:hover {
  border-color: rgba(239, 32, 42, .5);
  background: rgba(239, 32, 42, .12);
  color: #fff;
}

/* ------------------------------------------- 5 · Product & service cards */

.hm-public-body.hm-public-body .product-grid,
.hm-public-body.hm-public-body .service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 18px;
}

.hm-public-body.hm-public-body .product-media,
.hm-public-body.hm-public-body .service-card-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin: 13px 13px 0;
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 -46px 64px -44px rgba(15, 18, 23, .2);
}

.hm-public-body.hm-public-body .product-media img,
.hm-public-body.hm-public-body .service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.hm-public-body.hm-public-body .service-card .service-card-media img { object-fit: cover; }

/* Placeholder art keeps the same light plate so a mixed grid still reads as one row. */
.hm-public-body.hm-public-body .product-media.is-placeholder,
.hm-public-body.hm-public-body .service-card-media.is-placeholder { background: #f4f6f8; }
.hm-public-body.hm-public-body .product-media.is-placeholder img,
.hm-public-body.hm-public-body .service-card-media.is-placeholder img { object-fit: contain; padding: 22px; opacity: .55; }

.hm-public-body.hm-public-body .product-card:hover .product-media img { transform: scale(1.07) translateY(-4px); }
.hm-public-body.hm-public-body .service-card:hover .service-card-media img { transform: scale(1.05); }

.hm-public-body.hm-public-body .product-tag {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 2;
  padding: 6px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d3131a, #f7242d);
  color: #fff;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(239, 32, 42, .34);
}

.hm-public-body.hm-public-body .product-stock {
  position: absolute;
  top: 14px;
  right: 13px;
  z-index: 2;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #24c26a;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 3px rgba(36, 194, 106, .25);
}

.hm-public-body.hm-public-body .product-stock.out {
  background: #ef202a;
  box-shadow: 0 0 0 3px rgba(239, 32, 42, .25);
}

.hm-public-body.hm-public-body .product-body,
.hm-public-body.hm-public-body .service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}

.hm-public-body.hm-public-body .product-meta {
  color: var(--hp-red-hot);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hm-public-body.hm-public-body .product-body h3,
.hm-public-body.hm-public-body .service-card-body h3 {
  margin: 8px 0 0;
  color: #fff;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-transform: none;
}

.hm-public-body.hm-public-body .product-body p,
.hm-public-body.hm-public-body .service-card-body p {
  margin: 8px 0 0;
  color: var(--hp-muted);
  font-size: 13px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hm-public-body.hm-public-body .price-line {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hp-line-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.hm-public-body.hm-public-body .price-line strong {
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.01em;
}

.hm-public-body.hm-public-body .price-line span {
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hm-public-body.hm-public-body .product-actions {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hm-public-body.hm-public-body .product-actions form { flex: 0 0 auto; }
.hm-public-body.hm-public-body .service-card-body .button { margin-top: 15px; }

/* --------------------------------------------------- 6 · Shop layout */

.hm-public-body.hm-public-body .shop-layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.hm-public-body.hm-public-body .filter-card {
  position: sticky;
  top: 96px;
  padding: 22px;
}

.hm-public-body.hm-public-body .filter-card h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.hm-public-body.hm-public-body .filter-group { margin-bottom: 16px; }

.hm-public-body.hm-public-body .empty-state {
  padding: 54px 32px;
  text-align: center;
}

.hm-public-body.hm-public-body .empty-state h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 21px;
  font-weight: 850;
}

.hm-public-body.hm-public-body .empty-state p { margin: 0 0 20px; color: var(--hp-muted); }

/* ------------------------------------------------ 7 · Product detail */

.hm-public-body.hm-public-body .product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.hm-public-body.hm-public-body .product-detail-media {
  display: grid;
  place-items: center;
  height: 470px;
  padding: 0;
  border-radius: var(--hp-radius);
  border: 1px solid var(--hp-line);
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 -70px 90px -70px rgba(15, 18, 23, .22);
}

.hm-public-body.hm-public-body .product-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hm-public-body.hm-public-body .detail-content h1 {
  margin: 14px 0 12px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: #fff;
}

.hm-public-body.hm-public-body .detail-description { color: var(--hp-muted); font-size: 14.5px; line-height: 1.7; }

.hm-public-body.hm-public-body .detail-price {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 20px 0 0;
  padding: 20px 22px 20px 26px;
  overflow: hidden;
}

.hm-public-body.hm-public-body .detail-price::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #f7242d, #8f0d13);
}

.hm-public-body.hm-public-body .detail-price strong {
  color: #fff;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 900;
  letter-spacing: -.02em;
}

.hm-public-body.hm-public-body .detail-price span {
  color: var(--hp-muted);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hm-public-body.hm-public-body .wholesale-note {
  margin: 14px 0 0;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 176, 32, .3);
  background: rgba(255, 176, 32, .09);
  color: #e7dcc6;
  font-size: 13px;
  line-height: 1.6;
}

.hm-public-body.hm-public-body .wholesale-note strong { color: #ffc95c; }

.hm-public-body.hm-public-body .hm-color-picker { margin: 22px 0 0; }

.hm-public-body.hm-public-body .hm-color-label {
  display: block;
  margin-bottom: 11px;
  color: var(--hp-muted);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hm-public-body.hm-public-body .hm-color-label b { color: #fff; letter-spacing: .04em; }

.hm-public-body.hm-public-body .hm-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }

.hm-public-body.hm-public-body .hm-swatch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 15px 0 11px;
  border-radius: 999px;
  border: 1px solid var(--hp-line);
  background: rgba(255, 255, 255, .04);
  color: #d7dce3;
  font-size: 12.5px;
  font-weight: 750;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.hm-public-body.hm-public-body .hm-swatch i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  flex: 0 0 auto;
}

.hm-public-body.hm-public-body .hm-swatch:hover { border-color: rgba(255, 255, 255, .4); transform: translateY(-2px); }

.hm-public-body.hm-public-body .hm-swatch.is-on {
  border-color: rgba(239, 32, 42, .7);
  background: rgba(239, 32, 42, .14);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(239, 32, 42, .16);
}

.hm-public-body.hm-public-body .purchase-box { margin: 22px 0 0; padding: 20px; }
.hm-public-body.hm-public-body .purchase-box form { width: 100%; }

.hm-public-body.hm-public-body .purchase-row {
  width: 100%;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
}

.hm-public-body.hm-public-body .purchase-row .form-control { width: 100%; text-align: center; font-weight: 800; }
.hm-public-body.hm-public-body .purchase-row .button { max-width: none; }

.hm-public-body.hm-public-body .spec-table { margin: 22px 0 0; overflow: hidden; }

.hm-public-body.hm-public-body .spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hp-line-soft);
}

.hm-public-body.hm-public-body .spec-row:last-child { border-bottom: 0; }
.hm-public-body.hm-public-body .spec-row:nth-child(odd) { background: rgba(255, 255, 255, .018); }
.hm-public-body.hm-public-body .spec-row span { color: var(--hp-muted); font-size: 13px; }
.hm-public-body.hm-public-body .spec-row strong { color: #fff; font-size: 13.5px; font-weight: 800; }

/* ------------------------------------------------ 8 · Cart & summary */

.hm-public-body.hm-public-body .cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 20px;
  align-items: start;
}

.hm-public-body.hm-public-body .cart-card { overflow: hidden; }

.hm-public-body.hm-public-body .cart-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 92px 130px 34px;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hp-line-soft);
}

.hm-public-body.hm-public-body .cart-item h3 { margin: 0; color: #fff; font-size: 15.5px; font-weight: 800; }
.hm-public-body.hm-public-body .cart-item p { margin: 5px 0 0; color: var(--hp-muted); font-size: 12.5px; }

.hm-public-body.hm-public-body .cart-thumb {
  width: 92px;
  height: 74px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
}

.hm-public-body.hm-public-body .cart-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }

.hm-public-body.hm-public-body .cart-qty {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid var(--hp-line);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.hm-public-body.hm-public-body .cart-qty:focus {
  outline: none;
  border-color: rgba(239, 32, 42, .7);
  box-shadow: 0 0 0 3px rgba(239, 32, 42, .18);
}

.hm-public-body.hm-public-body .cart-line-total { color: #fff; font-size: 16px; font-weight: 900; text-align: right; }

.hm-public-body.hm-public-body .hm-cart-color { display: inline-flex; align-items: center; gap: 6px; }

.hm-public-body.hm-public-body .hm-cart-color i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  display: inline-block;
}

.hm-public-body.hm-public-body .summary-card {
  position: sticky;
  top: 96px;
  padding: 24px;
}

.hm-public-body.hm-public-body .summary-card h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.hm-public-body.hm-public-body .summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hp-line-soft);
  color: var(--hp-muted);
  font-size: 13.5px;
}

.hm-public-body.hm-public-body .summary-line strong { color: #fff; font-weight: 800; white-space: nowrap; }
.hm-public-body.hm-public-body .summary-line span { min-width: 0; }

.hm-public-body.hm-public-body .summary-line.total {
  margin-top: 6px;
  padding: 16px 0 18px;
  border-bottom: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.hm-public-body.hm-public-body .summary-line.total strong { color: var(--hp-red-hot); font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.hm-public-body.hm-public-body .summary-card .form-help { margin: 12px 0 0; text-align: center; }
.hm-public-body.hm-public-body .content-card { padding: 26px; }

/* ------------------------------------------------------ 9 · Account */

.hm-public-body.hm-public-body .account-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.hm-public-body.hm-public-body .account-nav {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  background: var(--hp-card);
}

.hm-public-body.hm-public-body .account-nav > a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: #cfd5dd;
  font-size: 13.5px;
  font-weight: 750;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.hm-public-body.hm-public-body .account-nav > a:hover {
  background: rgba(255, 255, 255, .05);
  border-color: var(--hp-line);
  color: #fff;
  transform: translateX(3px);
}

.hm-public-body.hm-public-body .account-nav > a.active {
  background: linear-gradient(135deg, rgba(239, 32, 42, .2), rgba(239, 32, 42, .06));
  border-color: rgba(239, 32, 42, .42);
  color: #fff;
  font-weight: 850;
}

.hm-public-body.hm-public-body .account-nav form { margin-top: 6px; }
.hm-public-body.hm-public-body .account-card { padding: 26px; }

.hm-public-body.hm-public-body .account-card h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -.01em;
}

.hm-public-body.hm-public-body .order-list { display: grid; gap: 10px; }

.hm-public-body.hm-public-body .order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 110px 118px;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--hp-line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, .022);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.hm-public-body.hm-public-body a.order-row:hover {
  border-color: rgba(239, 32, 42, .38);
  background: rgba(239, 32, 42, .07);
  transform: translateX(4px);
}

.hm-public-body.hm-public-body .order-row > strong,
.hm-public-body.hm-public-body .order-row div > strong { color: #fff; font-size: 14px; font-weight: 850; }
.hm-public-body.hm-public-body .order-row > span { color: var(--hp-muted); font-size: 12.5px; }
.hm-public-body.hm-public-body .order-row > strong:last-child { text-align: right; font-size: 15px; }

.hm-public-body.hm-public-body .status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #dfe3e9;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hm-public-body.hm-public-body .status-confirmed,
.hm-public-body.hm-public-body .status-completed,
.hm-public-body.hm-public-body .status-paid,
.hm-public-body.hm-public-body .status-delivered {
  border-color: rgba(36, 194, 106, .4);
  background: rgba(36, 194, 106, .14);
  color: #6ee49f;
}

.hm-public-body.hm-public-body .status-pending,
.hm-public-body.hm-public-body .status-in_progress,
.hm-public-body.hm-public-body .status-processing {
  border-color: rgba(255, 176, 32, .4);
  background: rgba(255, 176, 32, .14);
  color: #ffc95c;
}

.hm-public-body.hm-public-body .status-cancelled,
.hm-public-body.hm-public-body .status-refunded,
.hm-public-body.hm-public-body .status-unpaid {
  border-color: rgba(239, 32, 42, .42);
  background: rgba(239, 32, 42, .14);
  color: #ff7d84;
}

/* -------------------------------------- 10 · Workshop & wholesale copy */

.hm-public-body.hm-public-body .booking-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: stretch;
}

.hm-public-body.hm-public-body .booking-aside { display: flex; flex-direction: column; padding: 28px; }

.hm-public-body.hm-public-body .booking-aside h2 {
  margin: 14px 0 12px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
}

.hm-public-body.hm-public-body .booking-aside p { color: var(--hp-muted); font-size: 14px; line-height: 1.68; }
.hm-public-body.hm-public-body .booking-form { padding: 28px; }

.hm-public-body.hm-public-body .booking-aside ul,
.hm-public-body.hm-public-body .wholesale-copy ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.hm-public-body.hm-public-body .booking-aside li,
.hm-public-body.hm-public-body .wholesale-copy li {
  position: relative;
  padding: 0 0 0 34px;
  color: #cfd5dd;
  font-size: 13.5px;
  line-height: 1.5;
}

.hm-public-body.hm-public-body .booking-aside li::before,
.hm-public-body.hm-public-body .wholesale-copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(239, 32, 42, .34);
  background: rgba(239, 32, 42, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d55' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

.hm-public-body.hm-public-body .wholesale-panel {
  /* The older stylesheet frames this wrapper and pads it with !important;
     the two cards inside now carry the frame, so the wrapper goes flat. */
  padding: 0 !important;
  border: 0;
  background: none;
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: start;
}

.hm-public-body.hm-public-body .wholesale-copy,
.hm-public-body.hm-public-body .wholesale-login-callout { padding: 28px; }

.hm-public-body.hm-public-body .wholesale-copy h2,
.hm-public-body.hm-public-body .wholesale-login-callout h2 {
  margin: 14px 0 12px;
  font-size: clamp(23px, 2.4vw, 32px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
}

.hm-public-body.hm-public-body .wholesale-copy .section-copy { margin-top: 20px; font-size: 13.5px; }
.hm-public-body.hm-public-body .wholesale-login-callout p { color: var(--hp-muted); font-size: 14px; line-height: 1.68; }
.hm-public-body.hm-public-body .hero-buttons,
.hm-public-body.hm-public-body .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ------------------------------------------------------ 11 · Contact */

.hm-public-body.hm-public-body .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: stretch;
}

.hm-public-body.hm-public-body .contact-panel { padding: 28px; }

.hm-public-body.hm-public-body .contact-panel h2 {
  margin: 14px 0 12px;
  font-size: clamp(23px, 2.4fv, 32px);
  font-size: clamp(23px, 2.4vw, 32px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
}

.hm-public-body.hm-public-body .contact-panel > p { color: var(--hp-muted); font-size: 14px; line-height: 1.68; }
.hm-public-body.hm-public-body .contact-list { margin-top: 22px; display: grid; gap: 10px; }

.hm-public-body.hm-public-body .contact-list > div {
  padding: 14px 16px;
  border: 1px solid var(--hp-line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, .022);
}

.hm-public-body.hm-public-body .contact-list span {
  display: block;
  margin-bottom: 5px;
  color: var(--hp-red-hot);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hm-public-body.hm-public-body .contact-list strong { color: #fff; font-size: 14px; font-weight: 750; line-height: 1.5; }

.hm-public-body.hm-public-body .map-embed {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  padding: 0;
}

.hm-public-body.hm-public-body .map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.25) contrast(1.05);
}

.hm-public-body.hm-public-body .map-embed-directions {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(10, 12, 16, .82);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: .04em;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.hm-public-body.hm-public-body .map-embed-directions .ui-icon { width: 16px; height: 16px; color: var(--hp-red-hot); }

.hm-public-body.hm-public-body .map-embed-directions:hover {
  border-color: rgba(239, 32, 42, .6);
  background: rgba(239, 32, 42, .2);
  transform: translateY(-2px);
}

/* --------------------------------------------------------- 12 · Auth */

.hm-public-body.hm-public-body .auth-shell {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 0;
  border: 1px solid var(--hp-line);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #14171d, #0e1116);
}

.hm-public-body.hm-public-body .auth-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  padding: 34px;
  background-size: cover;
  background-position: center;
}

.hm-public-body.hm-public-body .auth-visual-copy h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
}

.hm-public-body.hm-public-body .auth-visual-copy p { margin: 0; color: #ccd2da; font-size: 14px; line-height: 1.68; }

.hm-public-body.hm-public-body .auth-trust-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.hm-public-body.hm-public-body .auth-trust-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 13px;
  background: rgba(10, 12, 16, .55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #e6eaf0;
  font-size: 13px;
  font-weight: 700;
}

.hm-public-body.hm-public-body .auth-trust-list .ui-icon { width: 19px; height: 19px; color: var(--hp-red-hot); flex: 0 0 auto; }

.hm-public-body.hm-public-body .auth-card {
  border: 0;
  border-radius: 0;
  padding: 38px;
  background: transparent;
}

.hm-public-body.hm-public-body .auth-card h1 {
  margin: 14px 0 12px;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: #fff;
}

.hm-public-body.hm-public-body .auth-card > p { color: var(--hp-muted); font-size: 14px; line-height: 1.68; }
.hm-public-body.hm-public-body .auth-card form { margin-top: 24px; display: grid; gap: 15px; }
.hm-public-body.hm-public-body .auth-card form > .button { margin-top: 6px; }

.hm-public-body.hm-public-body .auth-forgot-link { text-align: right; }

.hm-public-body.hm-public-body .auth-forgot-link a {
  color: var(--hp-red-hot);
  font-size: 12.5px;
  font-weight: 800;
}

.hm-public-body.hm-public-body .role-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--hp-line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, .022);
  color: var(--hp-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.hm-public-body.hm-public-body .role-note .ui-icon { width: 19px; height: 19px; color: var(--hp-red-hot); flex: 0 0 auto; }

.hm-public-body.hm-public-body .auth-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hp-line-soft);
  color: var(--hp-muted);
  font-size: 13.5px;
}

.hm-public-body.hm-public-body .auth-footer a { color: var(--hp-red-hot); font-weight: 800; }

/* ------------------------------------- 13 · Hero quick links & footer */

.hm-public-body.hm-public-body .hm-under-hero-actions > a {
  border-color: var(--hp-line);
  transition: background .24s ease, border-color .24s ease, transform .24s ease;
}

.hm-public-body.hm-public-body .hm-under-hero-actions > a:hover {
  background: linear-gradient(180deg, rgba(239, 32, 42, .12), rgba(239, 32, 42, .02));
  border-color: rgba(239, 32, 42, .45);
}

.hm-public-body.hm-public-body .hm-footer-cta {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 28px 64px rgba(229, 27, 35, .26);
}

.hm-public-body.hm-public-body .hm-footer-call {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(0, 0, 0, .24);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.hm-public-body.hm-public-body .hm-footer-call:hover {
  transform: translateY(-2px);
  border-color: #fff;
  background: rgba(0, 0, 0, .36);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
}

.hm-public-body.hm-public-body .hm-footer-cta-icon { border-radius: 12px; }
.hm-public-body.hm-public-body .hm-footer-map { border-radius: var(--hp-radius); overflow: hidden; border: 1px solid var(--hp-line); }

/* --------------------------------------------------- 14 · Responsive */

@media (max-width: 1100px) {
  .hm-public-body.hm-public-body .shop-layout,
  .hm-public-body.hm-public-body .cart-layout,
  .hm-public-body.hm-public-body .account-layout,
  .hm-public-body.hm-public-body .product-detail,
  .hm-public-body.hm-public-body .booking-layout,
  .hm-public-body.hm-public-body .contact-grid,
  .hm-public-body.hm-public-body .auth-shell { grid-template-columns: minmax(0, 1fr); }

  .hm-public-body.hm-public-body .filter-card,
  .hm-public-body.hm-public-body .summary-card,
  .hm-public-body.hm-public-body .account-nav { position: static; top: auto; }

  .hm-public-body.hm-public-body .account-nav { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .hm-public-body.hm-public-body .account-nav form { margin-top: 0; }
  .hm-public-body.hm-public-body .product-detail-media { height: 400px; }
  .hm-public-body.hm-public-body .map-embed { min-height: 380px; }
  .hm-public-body.hm-public-body .auth-visual { min-height: 320px; }
}

@media (max-width: 720px) {
  .hm-public-body.hm-public-body .product-grid,
  .hm-public-body.hm-public-body .service-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-public-body.hm-public-body .product-detail-media { height: 280px; }
  .hm-public-body.hm-public-body .detail-price { padding: 16px 18px 16px 22px; }

  .hm-public-body.hm-public-body .cart-item {
    grid-template-columns: 74px minmax(0, 1fr) 34px;
    grid-template-areas:
      "thumb info   remove"
      "qty   total  total";
    gap: 12px;
    padding: 16px;
  }

  .hm-public-body.hm-public-body .cart-thumb { grid-area: thumb; width: 74px; height: 62px; }
  .hm-public-body.hm-public-body .cart-item > div:nth-child(2) { grid-area: info; }
  .hm-public-body.hm-public-body .cart-qty { grid-area: qty; width: 100%; }
  .hm-public-body.hm-public-body .cart-line-total { grid-area: total; align-self: center; }
  .hm-public-body.hm-public-body .remove-button { grid-area: remove; }
  .hm-public-body.hm-public-body .account-nav { grid-template-columns: minmax(0, 1fr); }

  .hm-public-body.hm-public-body .order-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .hm-public-body.hm-public-body .order-row > strong:last-child { text-align: left; }

  .hm-public-body.hm-public-body .booking-aside,
  .hm-public-body.hm-public-body .booking-form,
  .hm-public-body.hm-public-body .contact-panel,
  .hm-public-body.hm-public-body .wholesale-copy,
  .hm-public-body.hm-public-body .wholesale-login-callout,
  .hm-public-body.hm-public-body .account-card,
  .hm-public-body.hm-public-body .content-card,
  .hm-public-body.hm-public-body .auth-card { padding: 20px; }

  .hm-public-body.hm-public-body .summary-card,
  .hm-public-body.hm-public-body .filter-card { padding: 18px; }

  .hm-public-body.hm-public-body .hero-actions .button,
  .hm-public-body.hm-public-body .hero-buttons .button,
  .hm-public-body.hm-public-body .hm-hero-actions .hm-primary-button,
  .hm-public-body.hm-public-body .hm-hero-actions .hm-secondary-button { width: 100%; }

  .hm-public-body.hm-public-body .hero-actions,
  .hm-public-body.hm-public-body .hero-buttons { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-public-body.hm-public-body .button,
  .hm-public-body.hm-public-body .hm-primary-button,
  .hm-public-body.hm-public-body .hm-secondary-button,
  .hm-public-body.hm-public-body .product-card,
  .hm-public-body.hm-public-body .service-card,
  .hm-public-body.hm-public-body .product-media img,
  .hm-public-body.hm-public-body .service-card-media img,
  .hm-public-body.hm-public-body .order-row,
  .hm-public-body.hm-public-body .account-nav > a,
  .hm-public-body.hm-public-body .hm-footer-call { transition: none; }
}

/* ===================================================================
   DEVELOPER PANEL · MEDIA CHECK
   Status pills for the screen that reports which referenced image files
   are actually present on the server.
   =================================================================== */

.developer-body .dev-media-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(148, 156, 168, .34);
  background: rgba(148, 156, 168, .12);
  color: #6b7280;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.developer-body .dev-media-ok {
  border-color: rgba(36, 178, 102, .4);
  background: rgba(36, 178, 102, .14);
  color: #1d8a51;
}

.developer-body .dev-media-missing {
  border-color: rgba(229, 27, 35, .42);
  background: rgba(229, 27, 35, .13);
  color: #c8121a;
}

.developer-body .dev-media-external {
  border-color: rgba(50, 131, 232, .4);
  background: rgba(50, 131, 232, .13);
  color: #2467b8;
}

.developer-body .dev-media-default {
  border-color: rgba(229, 156, 27, .42);
  background: rgba(229, 156, 27, .14);
  color: #a06a08;
}

.developer-body .dev-table code,
.developer-body .dev-note-list code {
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(148, 156, 168, .28);
  background: rgba(148, 156, 168, .12);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}

.developer-body .dev-empty-note {
  margin: 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(36, 178, 102, .32);
  background: rgba(36, 178, 102, .1);
  color: #1d8a51;
  font-size: 13.5px;
  font-weight: 700;
}

html[data-theme="dark"] .developer-body .dev-media-ok { color: #6ee49f; }
html[data-theme="dark"] .developer-body .dev-media-missing { color: #ff7d84; }
html[data-theme="dark"] .developer-body .dev-media-external { color: #8fbcf5; }
html[data-theme="dark"] .developer-body .dev-media-default { color: #ffc95c; }
html[data-theme="dark"] .developer-body .dev-media-pill { color: #b9bfc7; }

html[data-theme="dark"] .developer-body .dev-table code,
html[data-theme="dark"] .developer-body .dev-note-list code {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #e6eaf0;
}

html[data-theme="dark"] .developer-body .dev-empty-note {
  border-color: rgba(36, 194, 106, .34);
  background: rgba(36, 194, 106, .12);
  color: #6ee49f;
}

/* Saved-map preview on the Footer Edit screen. */
.developer-body .dev-map-preview {
  position: relative;
  height: 340px;
  margin: 4px 0 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(148, 156, 168, .28);
  background: rgba(148, 156, 168, .1);
}

.developer-body .dev-map-preview iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

html[data-theme="dark"] .developer-body .dev-map-preview {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
}

@media (max-width: 720px) {
  .developer-body .dev-map-preview { height: 260px; }
}

/* Secondary line under a name in developer tables. */
.developer-body .dev-muted-line {
  margin-top: 3px;
  color: rgba(108, 109, 117, .95);
  font-size: 12px;
  word-break: break-word;
}

html[data-theme="dark"] .developer-body .dev-muted-line { color: #9aa1ac; }

/* Developer Panel > Sidebar Editor */
.dev-sidebar-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: var(--s-muted);
  cursor: grab;
  border-radius: 6px;
}
.dev-sidebar-drag-handle:hover { color: var(--s-text); background: var(--tint-hover, rgba(127,127,127,.08)); }
.dev-sidebar-drag-handle .ui-icon { width: 16px; height: 16px; }
.dev-sidebar-group.is-dragging,
.dev-sidebar-item-row.is-dragging { opacity: .4; }
.dev-sidebar-group-head { display: flex; align-items: center; gap: 8px; }
.dev-sidebar-item-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.dev-role-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dev-role-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--s-border);
  color: var(--s-text-2);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.dev-role-tab:hover { border-color: var(--s-border-2); color: var(--s-text); }
.dev-role-tab.active { background: var(--hm-red-500); border-color: var(--hm-red-500); color: #fff; }
.dev-role-tab .dev-media-pill { margin: 0; }

.dev-sidebar-group {
  border: 1px solid var(--s-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--tint-hover, rgba(127,127,127,.04));
}
.dev-sidebar-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dev-sidebar-group-label { flex: 1; font-weight: 800; font-size: 14px; }
.dev-sidebar-items { display: grid; gap: 8px; }
.dev-sidebar-item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--s-border);
  border-radius: 9px;
}
.dev-sidebar-item-row .dev-input { flex: 1 1 160px; min-width: 120px; }
.dev-sidebar-icon-select { flex: 0 0 130px; }
.dev-sidebar-add-item { margin-top: 10px; }
.dev-sidebar-add-item summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--s-muted);
  padding: 6px 0;
}
.dev-sidebar-add-item summary:hover { color: var(--s-text); }
.dev-sidebar-add-item-form { margin-top: 10px; padding: 12px; border: 1px dashed var(--s-border-2); border-radius: 10px; }
.dev-sidebar-page-body { min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Custom pages rendered inside the staff panel */
.custom-page-card { line-height: 1.7; }
.custom-page-body { margin-top: 10px; color: var(--s-text-2); }
.custom-page-body h2, .custom-page-body h3, .custom-page-body h4 { color: var(--s-text); margin: 18px 0 8px; }
.custom-page-body p { margin: 0 0 12px; }
.custom-page-body ul, .custom-page-body ol { margin: 0 0 12px; padding-left: 22px; }
.custom-page-body a { color: var(--hm-red-400); }
.custom-page-body img { max-width: 100%; border-radius: 8px; }
.custom-page-body table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.custom-page-body th, .custom-page-body td { border: 1px solid var(--s-border); padding: 8px 10px; text-align: left; }
.hm-payment-history{margin-top:16px;padding-top:14px;border-top:1px solid var(--panel-line,#e4e8ec)}.hm-payment-history h3{margin:0 0 8px;font-size:14px}.hm-payment-history h3 small{font-weight:600;color:var(--muted,#69717d);font-size:12px;margin-left:6px}
.customer-payment-history{margin-top:14px}.customer-payment-history select{margin-bottom:10px}
.hm-add-toggle-btn{display:inline-flex;align-items:center;gap:8px}
[data-collapsible-box][hidden]{display:none!important}
.pos-customer-recap{justify-content:space-between}
.panel-button.full{width:100%;text-align:center;display:flex;align-items:center;justify-content:center;margin-top:12px}

/* =========================================================
   Dark theme for the modern control panel.

   app.css styles every .panel-modern-body surface with a hardcoded
   light colour (#fff cards, #f8f9fb page, near-black text). There was
   no dark counterpart, so switching the theme to dark left the sidebar
   and the older .panel-card screens dark while every .hm-card, metric
   tile, table and button stayed white — the mismatch that made one
   panel look like it belonged to a different site.

   ui.css loads after app.css and these selectors carry the extra
   html[data-theme="dark"] qualifier, so they win without !important.
   Light theme is untouched.
   ========================================================= */
html[data-theme="dark"] .panel-modern-body .panel-main { background: var(--s-bg); }

html[data-theme="dark"] .panel-modern-body .hm-card,
html[data-theme="dark"] .panel-modern-body .hm-metric-card,
html[data-theme="dark"] .panel-modern-body .panel-card {
  background: var(--s-surface);
  border-color: var(--s-border);
  color: var(--s-text);
  box-shadow: var(--s-shadow-1);
}

html[data-theme="dark"] .panel-modern-body .hm-card > header h2,
html[data-theme="dark"] .panel-modern-body .panel-card h2,
html[data-theme="dark"] .panel-modern-body .hm-page-head h1,
html[data-theme="dark"] .panel-modern-body .employee-dashboard-title h1,
html[data-theme="dark"] .panel-modern-body .hm-metric-card strong {
  color: var(--s-text);
}

html[data-theme="dark"] .panel-modern-body .hm-card > header p,
html[data-theme="dark"] .panel-modern-body .hm-page-head p,
html[data-theme="dark"] .panel-modern-body .panel-note,
html[data-theme="dark"] .panel-modern-body .hm-metric-card span,
html[data-theme="dark"] .panel-modern-body .hm-card > header h2 small {
  color: var(--s-muted);
}

/* Buttons: the plain one is a surface, the red primary keeps its colour. */
html[data-theme="dark"] .panel-modern-body .hm-btn,
html[data-theme="dark"] .panel-modern-body .hm-btn.outline {
  background: var(--s-surface-2);
  border-color: var(--s-border-2);
  color: var(--s-text);
}
html[data-theme="dark"] .panel-modern-body .hm-btn:hover { background: var(--s-surface-3); }
html[data-theme="dark"] .panel-modern-body .hm-btn.primary { color: #fff; }

/* Topbar and search. */
html[data-theme="dark"] .panel-modern-body .panel-topbar { background: var(--s-topbar); border-color: var(--s-border); }
html[data-theme="dark"] .panel-modern-body .panel-global-search {
  background: var(--s-input-bg);
  border-color: var(--s-border-2);
}
html[data-theme="dark"] .panel-modern-body .panel-global-search input { color: var(--s-input-text); }
html[data-theme="dark"] .panel-modern-body .panel-menu,
html[data-theme="dark"] .panel-modern-body .panel-top-icon,
html[data-theme="dark"] .panel-modern-body .panel-admin-profile { color: var(--s-text); }
html[data-theme="dark"] .panel-modern-body .panel-admin-avatar { background: var(--s-surface-3); color: var(--s-text); }
html[data-theme="dark"] .panel-modern-body .panel-page-context strong { color: var(--s-text); }
html[data-theme="dark"] .panel-modern-body .panel-page-context small,
html[data-theme="dark"] .panel-modern-body .panel-page-context span { color: var(--s-muted); }

/* Tables — both the modern and the older panel table markup. */
html[data-theme="dark"] .panel-modern-body .hm-data-table th,
html[data-theme="dark"] .panel-modern-body .panel-table th {
  background: var(--s-surface-2);
  color: var(--s-muted);
  border-color: var(--s-border);
}
html[data-theme="dark"] .panel-modern-body .hm-data-table td,
html[data-theme="dark"] .panel-modern-body .panel-table td {
  color: var(--s-text);
  border-color: var(--s-border);
}
html[data-theme="dark"] .panel-modern-body .hm-data-table tbody tr:hover,
html[data-theme="dark"] .panel-modern-body .panel-table tbody tr:hover { background: var(--tint-hover); }
html[data-theme="dark"] .panel-modern-body .panel-table a,
html[data-theme="dark"] .panel-modern-body .hm-data-table a { color: var(--s-text); }

/* Form controls inside the panel. */
html[data-theme="dark"] .panel-modern-body .panel-input,
html[data-theme="dark"] .panel-modern-body .hm-card input,
html[data-theme="dark"] .panel-modern-body .hm-card select,
html[data-theme="dark"] .panel-modern-body .hm-card textarea {
  background: var(--s-input-bg);
  border-color: var(--s-border-2);
  color: var(--s-input-text);
}
html[data-theme="dark"] .panel-modern-body .panel-field label { color: var(--s-text-2); }

/* Metric tile rings keep their accent colour but lose the white halo. */
html[data-theme="dark"] .panel-modern-body .hm-metric-card > i { border-color: var(--s-surface-3); }

/* ========================================================================== 
   WORKSHOP UX — rebuilt from the supplied Mia Motors Multan workflow
   ========================================================================== */
.hm-mia-intake-card { margin-bottom: 18px; overflow: hidden; }
.hm-mia-intake-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--s-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.hm-mia-intake-head h2 { margin: 3px 0 4px; font-size: 18px; color: var(--s-text); }
.hm-mia-intake-head p { margin: 0; color: var(--s-muted); font-size: 13px; }
.hm-workshop-kicker { display: block; color: var(--s-red-text); font-size: 10.5px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.hm-mia-intake-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hm-mia-intake-grid {
  padding: 18px 20px 20px;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: 16px;
}
.hm-intake-pane {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-md);
  background: var(--s-surface-2);
}
.hm-intake-pane-title { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.hm-intake-pane-title > i {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--tint-red);
  color: var(--s-red-text);
}
.hm-intake-pane-title > i .ui-icon { width: 19px; height: 19px; }
.hm-intake-pane-title strong, .hm-intake-pane-title small { display: block; }
.hm-intake-pane-title strong { font-size: 14px; color: var(--s-text); }
.hm-intake-pane-title small { margin-top: 2px; font-size: 11.5px; color: var(--s-muted); }
.hm-intake-field { display: grid; gap: 6px; margin-bottom: 12px; font-size: 12.5px; font-weight: 750; color: var(--s-text-2); }
.hm-intake-field > span small { font-weight: 600; color: var(--s-muted); }
.hm-intake-field input, .hm-intake-field select, .hm-intake-field textarea {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid var(--s-border);
  border-radius: 10px;
  background: var(--s-input-bg);
  color: var(--s-input-text);
  font: inherit;
  outline: 0;
}
.hm-intake-field textarea { min-height: 92px; resize: vertical; }
.hm-intake-field input:focus, .hm-intake-field select:focus, .hm-intake-field textarea:focus { border-color: var(--hm-red-400); box-shadow: var(--ring); }
.hm-intake-fields { display: grid; gap: 12px; }
.hm-intake-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-intake-fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-intake-fields .span-2 { grid-column: span 2; }
.hm-intake-save { margin-top: 2px; }
.hm-mia-intake-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.hm-mia-job-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  padding: 0;
  border-left-width: 1px;
  overflow: hidden;
}
.hm-mia-job-bar > div { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--s-border); display: grid; gap: 3px; }
.hm-mia-job-bar > div:last-child { border-right: 0; }
.hm-mia-job-bar small, .hm-mia-job-bar span, .hm-mia-job-bar strong { display: block; }
.hm-mia-job-bar small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--s-muted); }
.hm-mia-job-bar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--s-text); }
.hm-mia-job-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--s-muted); }
.hm-mia-job-bar .hm-job-money { text-align: right; justify-items: end; }
.hm-mia-job-bar .hm-job-money strong { font-size: 18px; }
.hm-mia-job-bar .hm-job-money .is-due { color: var(--s-red-text); font-weight: 750; }
.hm-mia-job-bar .hm-job-money .is-paid { color: #16a05d; font-weight: 750; }

.hm-mia-bill-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(360px, .78fr);
  gap: 18px;
  align-items: start;
}
.hm-mia-bill-main { min-width: 0; display: grid; gap: 16px; }
.hm-bill-review > header, .hm-mia-payment-history > header, .hm-mia-bill-form > header { align-items: flex-start; }
.hm-bill-review > header p, .hm-mia-payment-history > header p, .hm-mia-bill-form > header p { margin: 3px 0 0; font-size: 12px; color: var(--s-muted); }
.hm-mia-bill-form { position: sticky; top: 86px; overflow: visible !important; }
.hm-mia-bill-form > form.hm-stacked-form { display: block !important; padding: 15px 16px 10px; }
.hm-mia-bill-form .hm-pay-group { margin-bottom: 14px; background: var(--s-surface-2); }
.hm-mia-bill-form .hm-pay-readout { margin-top: 12px; margin-bottom: 0; }
.hm-mia-bill-form .hm-pay-balance { margin-top: 12px; padding: 13px 14px; border: 1px solid var(--s-border); border-radius: 10px; background: var(--s-surface); }
.hm-mia-bill-form .hm-pay-balance small, .hm-mia-bill-form .hm-pay-balance strong { display: block; }
.hm-mia-bill-form .hm-pay-balance small { color: var(--s-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hm-mia-bill-form .hm-pay-balance strong { margin-top: 4px; font-size: 19px; color: var(--s-text); }
.hm-mia-bill-submit { display: grid; gap: 8px; }
.hm-mia-invoice-totals { display: flex; justify-content: flex-end; padding: 16px; border-top: 1px solid var(--s-border); }
.hm-mia-invoice-totals dl { width: min(100%, 360px); margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; }
.hm-mia-invoice-totals dt { color: var(--s-muted); font-size: 12.5px; font-weight: 650; }
.hm-mia-invoice-totals dd { margin: 0; text-align: right; color: var(--s-text); font-size: 13px; font-weight: 750; }
.hm-mia-invoice-totals .grand { padding-top: 10px; border-top: 1px solid var(--s-border); color: var(--s-text); font-size: 17px; font-weight: 850; }
.hm-mia-invoice-totals .due { color: var(--s-red-text); }
.hm-mia-invoice-totals .paid { color: #16a05d; }
.hm-mia-payment-history { overflow: hidden; }
.hm-mia-payment-history > header { padding: 14px 16px; border-bottom: 1px solid var(--s-border); display: flex; justify-content: space-between; gap: 12px; }
.hm-mia-payment-history h2 { margin: 0; font-size: 14.5px; color: var(--s-text); }

@media (max-width: 1180px) {
  .hm-mia-bill-layout { grid-template-columns: 1fr; }
  .hm-mia-bill-form { position: static; width: min(100%, 680px); justify-self: end; }
  .hm-mia-job-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-mia-job-bar > div:nth-child(2) { border-right: 0; }
  .hm-mia-job-bar > div:nth-child(-n+2) { border-bottom: 1px solid var(--s-border); }
}
@media (max-width: 920px) {
  .hm-mia-intake-grid { grid-template-columns: 1fr; }
  .hm-mia-intake-actions { grid-column: auto; }
}
@media (max-width: 680px) {
  .hm-mia-intake-head { flex-direction: column; }
  .hm-mia-intake-head-actions, .hm-mia-intake-head-actions .hm-btn { width: 100%; }
  .hm-mia-intake-head-actions .hm-btn { justify-content: center; }
  .hm-mia-intake-grid { padding: 14px; }
  .hm-intake-fields.two, .hm-intake-fields.three { grid-template-columns: 1fr; }
  .hm-intake-fields .span-2 { grid-column: auto; }
  .hm-mia-intake-actions { flex-direction: column; }
  .hm-mia-intake-actions .hm-btn { width: 100%; justify-content: center; }
  .hm-mia-job-bar { grid-template-columns: 1fr; }
  .hm-mia-job-bar > div { border-right: 0; border-bottom: 1px solid var(--s-border); }
  .hm-mia-job-bar > div:last-child { border-bottom: 0; }
  .hm-mia-job-bar .hm-job-money { text-align: left; justify-items: start; }
  .hm-mia-bill-form { width: 100%; }
}