/* ==========================================================================
   Kaspar Construction Group — shared stylesheet
   No external fonts/frameworks are loaded — everything renders offline.
   ========================================================================== */

:root {
  --color-primary: #F5A900;      /* Kaspar Construction Group gold — brand accent */
  --color-primary-dark: #D19400;
  --color-ink: #1C1C1C;          /* Kaspar Construction Group near-black — header/footer (hex unconfirmed, see note) */
  --color-ink-soft: #2E2E2E;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F6F8;
  --color-border: #E3E5E9;
  --color-text: #1D2129;
  --color-text-muted: #5B6270;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(20, 24, 31, 0.08);
  --shadow-lg: 0 12px 30px rgba(20, 24, 31, 0.12);
  --max-width: 1180px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 12px; color: var(--color-ink); letter-spacing: -0.01em; }
h1 { font-weight: 800; }
h2 { font-weight: 800; font-size: 32px; }
h3 { font-weight: 700; }
p { margin: 0 0 16px; }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.section { padding: 72px 0; }
.section-alt { background: var(--color-bg-alt); }

/* Dark, photo-ready section background — same treatment as the homepage
   hero (gold edge + diagonal wash). Reusable anywhere a section should read
   as premium/branded rather than plain white or light grey. Once a real
   photo exists, drop a background-image on the section itself; the overlay
   and text colours below are already built to sit cleanly on top of it. */
.section-dark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--color-ink) 0%, #2E2E2E 100%);
}
.section-dark::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: var(--color-primary);
  z-index: 0;
}
.section-dark::after {
  content: "";
  position: absolute;
  right: -8%;
  top: -60px;
  width: 50%;
  height: 220px;
  background: var(--color-primary);
  opacity: 0.07;
  clip-path: polygon(100% 45%, 0 0, 0 100%, 100% 100%);
  pointer-events: none;
  z-index: 0;
}
.section-dark .container { position: relative; z-index: 1; }
.section-dark .eyebrow { font-weight: 800; }
.section-dark .section-head h2 { color: #fff; }
.section-dark .section-head p { color: #C9CDD6; }
.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.section-head p { color: var(--color-text-muted); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 2px 8px rgba(245, 169, 0, 0.25); }
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: 0 4px 12px rgba(245, 169, 0, 0.32); }
.btn-dark { background: var(--color-ink); color: #fff; }
.btn-dark:hover { background: var(--color-ink-soft); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-outline-dark { background: transparent; border-color: var(--color-border); color: var(--color-ink); }
.btn-outline-dark:hover { background: var(--color-bg-alt); }
.btn-block { width: 100%; }

/* Top utility bar */
.topbar {
  background: var(--color-ink);
  color: #cfd3da;
  font-size: 13px;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.topbar a:hover { color: #fff; }
.topbar-links { display: flex; gap: 18px; }

/* Header / Nav — merchant-style stacked header (OCL-style restructure):
   .site-header-group is the sticky unit (row 2 + row 3 together); the thin
   .topbar above it and the .trust-strip service band below it both scroll
   away normally, matching how OCL's own header behaves. */
.site-header-group {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Row 2 — main header: logo, search, account/basket. Light, not dark, now
   that the department links have moved down into their own dark bar below
   (.department-bar) — this is the one visual precondition the search box
   and account/basket icons needed (they read poorly on the old dark bar). */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.header-main-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
}
.header-main-row .logo { color: var(--color-ink); }

/* Header search — real, not decorative: filters window.KASPAR_MATERIALS
   (Building Supplies) and BSRSupabase.fetchEquipmentCatalogue() (Plant &
   Tool Hire) client-side, see js/site-search.js. */
.header-search {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  max-width: 640px;
  margin: 0 auto;
}
.header-search-input {
  width: 100%;
  padding: 12px 46px 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-ink);
  background: var(--color-bg-alt);
}
.header-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
}
.header-search-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 44px;
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--color-text-muted);
}
.header-search-btn:hover { color: var(--color-primary); }

.search-results-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 60;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
}
.search-result-item:last-of-type { border-bottom: none; }
.search-result-item:hover { background: var(--color-bg-alt); }
.search-result-item .sr-img,
.search-result-item .sr-img img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.search-result-item .sr-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  font-size: 16px;
}
.sr-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.sr-type-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}
.sr-type-tag-hire { color: var(--color-ink-soft); }
.sr-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-meta { font-size: 12px; color: var(--color-text-muted); }
.sr-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  flex-shrink: 0;
  white-space: nowrap;
}
.search-no-results { padding: 16px; font-size: 13px; color: var(--color-text-muted); }
.search-see-all {
  display: block;
  text-align: center;
  padding: 12px 16px;
  font-weight: 700;
  color: var(--color-primary);
  border-top: 1px solid var(--color-border);
}

.search-toggle-btn {
  display: none;
  background: none;
  border: none;
  font-size: 19px;
  cursor: pointer;
  color: var(--color-ink);
}

/* Row 3 — department bar: the old dark nav-row, now holding just the
   department links (.main-nav) and, on mobile, the hamburger's target. */
.department-bar {
  background: var(--color-ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}
.department-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
}
.logo, .nav-actions { flex-shrink: 0; }
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 21px;
  color: var(--color-ink);
}
.logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
}
.logo-img {
  height: 46px;
  width: auto;
  display: block;
}
.main-nav { display: flex; gap: 22px; }
.main-nav a {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--color-primary); }

/* "Building Supplies" nav dropdown — desktop reveals on hover/focus so
   keyboard users tabbing through the nav also get it; the link list inside
   is generated straight from data/materials.json's categories at build time
   (see build.py's patch_building_supplies_nav), so adding a category there
   is all it takes to add a row here. Mobile override (no hover on touch)
   lives in the @media block below, alongside the rest of the mobile nav. */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-caret {
  font-size: 11px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -18px;
  margin-top: 14px;
  min-width: 240px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px 0;
  z-index: 20;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { color: var(--color-primary); background: var(--color-surface-alt, #f5f5f5); }
.nav-dropdown-divider {
  height: 1px;
  margin: 8px 0;
  background: var(--color-border);
}
.nav-dropdown-menu a.nav-dropdown-all {
  color: var(--color-primary);
  font-weight: 700;
}

/* "Building Supplies" mega-menu — OCL-style full flyout panel: a grid of
   category tiles (icon + name + one-line intro) instead of a plain link
   list, plus a "Shop All" close-out CTA. Markup is generated by build.py's
   _building_supplies_nav_html() straight from data/materials.json, so a new
   category only needs adding there. */
.nav-dropdown-menu.mega-menu-panel {
  min-width: 860px;
  max-width: 1020px;
  padding: 24px;
}
.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 24px;
}
.mega-menu-col { display: flex; flex-direction: column; }
.mega-menu-item {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px !important;
  border-radius: 8px;
  white-space: normal !important;
}
.mega-menu-item .icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(245, 169, 0, 0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.mega-menu-item-text strong {
  display: block;
  font-size: 14px;
  color: var(--color-text);
}
.mega-menu-item-text small {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.mega-menu-item:hover .mega-menu-item-text strong { color: var(--color-primary); }
/* The subcategory list under each column's category link — indented past
   the icon-badge so it visually nests under the category name, not the
   icon. Generated by build.py's _building_supplies_nav_html() from each
   category's own "subcategories" list in data/materials.json. */
.mega-menu-sublinks {
  display: flex;
  flex-direction: column;
  margin: 0 0 8px 50px;
}
.mega-menu-sublink {
  padding: 3px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: normal;
}
.mega-menu-sublink:hover { color: var(--color-primary); }
.mega-menu-cta {
  display: block;
  text-align: center;
  margin-top: 12px;
  padding-top: 16px !important;
  border-top: 1px solid var(--color-border);
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}
@media (max-width: 1350px) {
  .nav-dropdown-menu.mega-menu-panel { min-width: 620px; max-width: 700px; }
  .mega-menu-grid { grid-template-columns: repeat(2, 1fr); }
  .mega-menu-item-text small { display: none; }
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .btn { padding: 11px 20px; }
.basket-link { display: inline-flex; align-items: center; gap: 8px; }
.basket-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
}

@media (max-width: 1100px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Matches the now-dark header bar above it, since .main-nav a is white
       text sitewide — a white dropdown here would make it unreadable. */
    background: var(--color-ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-direction: column;
    padding: 16px 24px;
    gap: 16px;
  }
  .main-nav.open { display: flex; }
  .nav-toggle { display: block; }
  .nav-actions .btn { display: none; }

  /* No hover on touch devices — the dropdown becomes a plain always-expanded
     sub-list nested under "Building Supplies" instead of a hover overlay. */
  .nav-dropdown { display: flex; flex-direction: column; }
  .nav-dropdown-menu {
    display: block;
    position: static;
    margin: 10px 0 0;
    padding: 0 0 0 16px;
    background: none;
    box-shadow: none;
    border-left: 2px solid rgba(255, 255, 255, 0.14);
  }
  .nav-dropdown-menu a {
    padding: 8px 0;
    color: #C9CDD6;
    font-weight: 600;
  }
  .nav-dropdown-menu a:hover { color: var(--color-primary); background: none; }
  .nav-dropdown-divider { background: rgba(255, 255, 255, 0.14); }
  .nav-caret { display: none; }

  /* Mega-menu collapses to a plain single-column indented list on mobile,
     matching the rest of the touch nav — icons/intro copy dropped so it
     reads as a compact expanded sub-list rather than a shrunk desktop grid. */
  .nav-dropdown-menu.mega-menu-panel { min-width: 0; max-width: none; padding: 0; }
  .mega-menu-grid { grid-template-columns: 1fr; gap: 0; }
  .mega-menu-item { padding: 8px 0 !important; gap: 10px; }
  .mega-menu-item .icon-badge { width: 28px; height: 28px; font-size: 13px; }
  .mega-menu-item-text strong { color: #C9CDD6; font-size: 13px; }
  .mega-menu-item-text small { display: none; }
  .mega-menu-cta { border-top-color: rgba(255, 255, 255, 0.14); text-align: left; }

  /* Subcategories become an always-expanded indented list under each
     category, one level deeper than the category itself — a drill-down
     list rather than the desktop mega-menu shrunk down. */
  .mega-menu-col { display: block; }
  .mega-menu-sublinks { margin: 0 0 6px 38px; }
  .mega-menu-sublink { display: block; padding: 6px 0; color: #C9CDD6; font-size: 12.5px; font-weight: 600; }
  .mega-menu-sublink:hover { color: var(--color-primary); }
}

/* Mobile header search: row 2 collapses to logo + search icon + hamburger;
   tapping the icon expands the search input full-width beneath the row,
   per Dan's mobile spec — a toggle rather than a permanently-shown input,
   which has no room next to the logo/account/basket at phone widths. */
@media (max-width: 900px) {
  .header-search { display: none; }
  .header-search.mobile-search-open {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    padding: 12px 16px;
    box-shadow: var(--shadow-lg);
    z-index: 40;
  }
  .search-toggle-btn { display: inline-flex; }
  .header-main-row { position: relative; }
}

/* Hero — black/gold treatment matching the Kaspar van livery and business
   card assets: a gold edge, a soft diagonal gold wash, and a bold closing
   tagline ("Your Site, Our Strength.") echoing the card's signature line. */
.hero {
  position: relative;
  overflow: hidden;
  /* Real hero photography (Belle PCLX32 compactor plate) — Dan's first
     actual photo asset for the site. Layer 1: a left-to-right dark gradient
     so the headline/copy on the left stay legible, fading out toward the
     right where the product itself is already lit against a dark backdrop.
     Layer 2: the photo, cover-fit and right-anchored so the compactor stays
     in frame rather than the empty left-hand space. Replaces the earlier
     charcoal-gradient + logo-watermark placeholder now that real photography
     exists — swap this url() for further/better shots the same way. */
  background-image:
    linear-gradient(90deg, rgba(20, 20, 20, 0.93) 0%, rgba(20, 20, 20, 0.72) 38%, rgba(20, 20, 20, 0.35) 65%, rgba(20, 20, 20, 0.05) 100%),
    url('../images/hero-compactor-plate.jpg');
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right center;
  background-size: cover, cover;
  color: #fff;
  /* Symmetric padding — the .hero-services icon row that used to sit
     pinned to the bottom edge (needing extra bottom padding to clear it)
     was removed from the homepage as part of the building-materials-first
     repositioning; the .hero-services rule itself is left in place below
     in case a future page wants the same bottom-pinned icon strip. */
  padding: 88px 0;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: var(--color-primary);
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  left: -8%;
  bottom: -70px;
  width: 62%;
  height: 240px;
  background: var(--color-primary);
  opacity: 0.08;
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
}
.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
}
/* General-purpose 2-column grid — used by the homepage hero originally,
   still relied on elsewhere (e.g. the About page "Our Story" section), so
   kept as a standalone utility class independent of .hero-copy above. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.hero .eyebrow { font-weight: 800; }
.hero-headline {
  color: #fff;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.hero-headline span { color: var(--color-primary); }
.hero p.lead { color: #C9CDD6; font-size: 18px; max-width: 520px; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-tagline {
  margin: 32px 0 0;
  padding-top: 18px;
  border-top: 2px solid rgba(245, 169, 0, 0.35);
  max-width: 420px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}
.hero-tagline span { color: var(--color-primary); }

/* Homepage hero, v2 — replaces the photo/gradient .hero above with a split
   banner modelled on Dan's own promo graphic: a solid dark panel (real
   logo, live headline/copy, live working buttons — nothing baked into a
   flat image) alongside Dan's own real aggregate/sand/topsoil photography
   (images/hero-materials-panels.jpg — his photos, used as supplied, not
   sliced up or altered) filling the rest of the section.
   Boxed/centered inside the site's normal .container (like the TG Builders
   Merchants reference Dan pointed to), not stretched full-bleed edge to
   edge — the section itself sits on the ordinary white page background. */
.hero-materials { background: var(--color-bg); padding: 40px 0; }
.hero-materials-inner {
  display: flex;
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.14);
}
.hero-materials-panel {
  flex: 0 0 37%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-ink);
  padding: 28px clamp(20px, 4vw, 44px);
  color: #fff;
}
.hero-materials-logo {
  height: 32px;
  width: auto;
  display: block;
  /* .hero-materials-panel is a column flex container, whose default
     align-items:stretch would otherwise stretch this <img> to the full
     panel width (ignoring its real proportions) — this keeps it sized
     by its own aspect ratio instead. */
  align-self: flex-start;
  margin-bottom: 14px;
}
.hero-materials-headline {
  margin: 0 0 10px;
  line-height: 1.05;
  text-transform: uppercase;
}
.hero-materials-headline .line-1 {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}
.hero-materials-headline .line-2 {
  display: block;
  font-size: 26px;
  font-weight: 900;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}
.hero-materials-lead { color: #C9CDD6; font-size: 13px; line-height: 1.4; max-width: 340px; margin: 0 0 16px; }
.hero-materials-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-materials-actions .btn { padding: 9px 16px; font-size: 13px; }
/* Height comes from the photo's own aspect ratio (its real proportions,
   uncropped) rather than an arbitrary hero height — the dark text panel
   then stretches to match via align-items:stretch, so the photo is never
   forced to cover-crop down to a sliver of its middle section. */
.hero-materials-photo {
  flex: 1 1 0%;
  aspect-ratio: 2089 / 753;
  background-image: url('../images/hero-materials-panels.jpg');
  background-size: cover;
  background-position: center;
}
@media (max-width: 860px) {
  .hero-materials-inner { flex-direction: column; }
  .hero-materials-panel { flex: none; padding: 28px 24px; }
  .hero-materials-photo { aspect-ratio: 2089 / 753; min-height: 180px; }
}

/* Service icon row along the bottom of the hero — six core business lines,
   matching the reference mockup Dan shared. */
.hero-services {
  /* Pinned to the bottom edge of the hero/photo rather than floating in
     normal document flow partway down — always hugs the bottom regardless
     of how tall the headline/copy above it is. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  /* Own dark scrim, independent of the left-to-right hero photo overlay
     above — keeps icon labels legible no matter which part of the photo
     ends up behind this strip at a given viewport width. */
  background: rgba(18, 18, 18, 0.55);
}
.hero-services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.hero-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  color: #fff;
}
.hero-service-icon {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}
.hero-service span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #EDEEF1;
}
.hero-service:hover span { color: var(--color-primary); }

/* Offer tiles — relocated out of the hero (below it now) so the hero itself
   stays clean and photo-ready. */
.offers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.hero-stats div strong { display: block; font-size: 24px; color: #fff; }
.hero-stats div span { font-size: 13px; color: #9EA4B2; }

.hero-panel {
  background: #fff;
  border-radius: var(--radius);
  padding: 26px;
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.hero-panel h3 { font-size: 18px; }
.quick-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 6px;
  color: var(--color-text-muted);
}
.quick-form input, .quick-form select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
}
.quick-form .btn { margin-top: 20px; }

/* Hero ad tiles — replaces the old "Get a fast quote" form in the hero's
   right-hand slot with promotional banners (Dan's request, matching the
   bold colour-block style of competitor sites like Speedy Hire). Purely
   promotional/internal — no third-party ad network involved. */
.hero-ads {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ad-tile {
  display: block;
  border-radius: var(--radius);
  padding: 24px 26px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.ad-tile-primary {
  background: var(--color-primary);
  padding: 32px 28px;
}
.ad-tile-secondary {
  background: linear-gradient(120deg, var(--color-ink) 0%, #2E2E2E 100%);
  border: 1px solid rgba(255,255,255,0.12);
}
.ad-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.18);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.ad-tile h3 {
  color: #fff;
  font-size: 24px;
  margin: 0 0 8px;
  line-height: 1.1;
}
.ad-tile p {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  margin: 0 0 14px;
}
.ad-cta {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .hero-headline { font-size: 34px; }
  .hero-services-grid { grid-template-columns: repeat(3, 1fr); gap: 22px 12px; }
  .hero-grid { grid-template-columns: 1fr; }
  /* Below ~900px the copy above (headline + lead + buttons + tagline) can
     grow taller than any fixed reserved padding can predict, which was
     causing the services bar to overlap the copy above it. Instead of
     pinning it to the bottom of the hero, let it flow in normal document
     order beneath everything else — same bar, same look, no more overlap. */
  .hero { padding-bottom: 44px; }
  .hero-services {
    position: static;
    margin-top: 32px;
  }
}
@media (max-width: 560px) {
  .hero-services-grid { grid-template-columns: repeat(2, 1fr); }
  .offers-grid { grid-template-columns: 1fr; }
}

/* Trust strip */
.trust-strip {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 26px 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-soft);
}
.trust-item .icon-badge { color: var(--color-primary); font-size: 20px; }
@media (max-width: 800px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Cards / grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid-3-half { grid-template-columns: 1fr 1fr; }
@media (max-width: 950px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* grid-3 holds paragraph-heavy info cards (Delivery & Collection, About,
     Trade accounts) — those still need full width to read comfortably. */
  .grid-3 { grid-template-columns: 1fr; }
  .grid-3-half { grid-template-columns: 1fr; }
  /* grid-4 holds lightweight category tiles and equipment cards — kept at
     2-up on phones (tightened further below) so the page reads as a grid,
     like the desktop layout, instead of one long single-file scroll. */
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.category-card {
  padding: 26px 20px;
  text-align: center;
}
.category-card .icon-badge {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(245, 169, 0, 0.1);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin: 0 auto 14px;
}
.category-card h4 { font-size: 16px; margin-bottom: 4px; }
.category-card span { font-size: 13px; color: var(--color-text-muted); }

.equip-card .thumb {
  height: 210px;
  overflow: hidden;
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
}
.equip-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.card:hover .equip-card .thumb img,
.equip-card:hover .thumb img { transform: scale(1.04); }
.equip-card .body { padding: 20px 22px 22px; }
.equip-card h4 { font-size: 17px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.equip-card .meta { font-size: 13px; color: var(--color-text-muted); margin-bottom: 14px; }
.equip-card .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.equip-card .price { font-size: 21px; font-weight: 800; color: var(--color-ink); }
.equip-card .price span { font-size: 12px; font-weight: 500; color: var(--color-text-muted); }

/* Compact homepage "Popular Items" cards — no description/spec-list, no
   secondary View Details button (equip-card.js), and a smaller, quieter
   placeholder mark so a row of teaser cards reads as a curated showcase
   rather than a trimmed-down catalogue card. */
.equip-card-compact .thumb { height: 150px; }
.equip-card-compact .img-placeholder-mark { width: 38px; height: 38px; font-size: 13px; border-radius: 8px; }
.equip-card-compact .img-placeholder-label { font-size: 10px; }
.equip-card-compact .body { padding: 16px 18px 18px; }
.equip-card-compact h4 { font-size: 16px; margin-bottom: 4px; }
.equip-card-compact .price-row { margin-bottom: 12px; }

/* "Shop Building Supplies" homepage section — the 3 prominent group tiles
   (Aggregates & Landscaping / Building Materials / Drainage & Groundworks)
   each carry a short sub-link list so the grouping never hides the real,
   individual category pages underneath it (Dan: "make sure customers can
   still easily reach the actual individual categories from this section").
   The lighter "additional ranges" row below reuses the existing plain
   .card.category-card tile as-is (Timber & Fencing / Sheet Materials &
   Fixings / Site Supplies), so no separate styling is needed for those. */
.bs-group-card {
  padding: 30px 28px;
  text-align: left;
}
.bs-group-card .icon-badge {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(245, 169, 0, 0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.bs-group-card h3 { font-size: 19px; margin-bottom: 8px; }
.bs-group-card p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 18px;
}
.bs-group-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-group-links a {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 30px;
  padding: 7px 14px;
  white-space: nowrap;
}
.bs-group-links a:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* De-emphasised "Secondary Services" strip (Vehicle Hire, Construction
   Projects, Project Management) — kept available per Dan's instruction but
   visually quiet so it never competes with the core Building Supplies /
   Plant & Tool Hire identity above it. */
.secondary-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.secondary-service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.secondary-service-item span.icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(6, 35, 61, 0.06);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.secondary-service-item a { color: inherit; }
.secondary-service-item a:hover { color: var(--color-primary); }
@media (max-width: 950px) {
  .secondary-services-grid { grid-template-columns: 1fr; }
}

/* Promo banner — full-width strip at the very top of the homepage, above
   the header, per Dan's "advertisement at the top of the front page"
   request. Copy reuses the same verified pricing already shown in the
   hero ad tiles, never invented offers. */
.promo-banner {
  background: #fff;
  color: var(--color-ink);
  text-align: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(28, 28, 28, 0.08);
}
.promo-banner strong { color: var(--color-primary); font-weight: 800; }
.promo-banner a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
.promo-banner a:hover { color: var(--color-primary); }
@media (max-width: 560px) {
  .promo-banner { padding: 8px 12px; font-size: 11.5px; }
  .equip-card-compact .thumb { height: 100px; }
}

/* Mobile density pass — Dan's "make mobile look more like desktop, less
   long and squashed" request. Desktop keeps its full-size cards; phones
   get a genuinely compact 2-up grid (set above) with smaller imagery and
   tighter text so four category tiles or four equipment cards read as a
   grid, not an endless single column. */
@media (max-width: 560px) {
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 30px; }
  .hero { padding: 48px 0 56px; }
  .hero-actions { margin-top: 18px; }
  .hero-ads { margin-top: 24px; gap: 12px; }
  .ad-tile { padding: 18px 20px; }
  .ad-tile-primary { padding: 22px 20px; }
  .ad-tile h3 { font-size: 19px; }

  .category-card { padding: 16px 10px; }
  .category-card .icon-badge { width: 40px; height: 40px; font-size: 18px; margin-bottom: 8px; }
  .category-card h4 { font-size: 13px; margin-bottom: 0; }

  .equip-card .thumb { height: 110px; }
  .equip-card .body { padding: 12px 12px 14px; }
  .equip-card h4 { font-size: 14px; margin-bottom: 3px; }
  .equip-card .meta { font-size: 11px; margin-bottom: 8px; }
  .equip-card .price-row { margin-bottom: 8px; }
  .equip-card .price { font-size: 16px; }
  .equip-card .price span { font-size: 10px; }
  .equip-card .body .btn { padding: 9px 12px; font-size: 12px; }
}

/* Branded placeholder — replaces plain "Photo coming soon" text wherever a
   real product image hasn't been uploaded yet (migration 0099). Used inside
   .thumb (catalogue cards) and .gallery-main (product detail page). */
.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, #E9EBEF 100%);
}
.img-placeholder-mark {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.img-placeholder-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-primary);
  color: #fff;
  padding: 3px 9px;
  border-radius: 20px;
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step {
  text-align: center;
  padding: 10px;
}
.step .num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  margin: 0 auto 14px;
}
.step h4 { font-size: 16px; }
.step p { font-size: 14px; color: var(--color-text-muted); margin-bottom: 0; }

/* Reviews summary (aggregate rating above the testimonial cards) */
.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 14px;
}
.reviews-summary-stars { color: var(--color-primary); letter-spacing: 2px; font-size: 16px; }
.reviews-summary-score { font-weight: 800; color: var(--color-ink); }
.reviews-summary-note { color: var(--color-text-muted); font-size: 13px; }

/* Trade / finance CTA cards (homepage) */
.trade-cta-card {
  padding: 26px;
  text-align: left;
}
.trade-cta-card h4 { font-size: 16px; margin-bottom: 6px; }
.trade-cta-card .btn { margin-top: 14px; }

/* Testimonials */
.testimonial {
  padding: 26px;
}
.testimonial .stars { color: var(--color-primary); margin-bottom: 12px; letter-spacing: 2px; }
.testimonial p { font-style: italic; color: var(--color-ink-soft); }
.testimonial .who { font-weight: 700; font-size: 14px; margin-top: 12px; font-style: normal; }
.testimonial .who span { display: block; font-weight: 400; color: var(--color-text-muted); font-size: 13px; }

/* CTA band */
.cta-band {
  background: var(--color-primary);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.9); max-width: 560px; margin: 0 auto 26px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.site-footer {
  background: var(--color-ink);
  color: #B9BEC9;
  padding: 56px 0 24px;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-grid h4 { color: #fff; font-size: 13px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.04em; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 950px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 650px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Catalogue: page header */
.page-header {
  background: var(--color-ink);
  color: #fff;
  padding: 44px 0;
}
.page-header h1 { color: #fff; margin-bottom: 6px; }
.page-header p { color: #B9C2D0; margin: 0; }

/* Building Supplies category/product page headers — bolder centered
   uppercase treatment (OCL-style page titles), scoped to this modifier
   class rather than every .page-header sitewide (admin/booking pages keep
   their existing left-aligned sentence-case titles unchanged). */
.page-header-bs { text-align: center; }
.page-header-bs h1 { text-transform: uppercase; letter-spacing: 0.02em; }
.page-header-bs p { max-width: 640px; margin: 0 auto; }

/* Building Supplies category pages — OCL-style "Shop by Category" sidebar
   sitting alongside the product grid. Markup/links generated by build.py's
   _category_sidebar_html() from data/materials.json, so it can never list
   a category that doesn't really exist. */
.category-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}
.category-sidebar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  position: sticky;
  top: 84px;
}
.category-sidebar-head {
  background: var(--color-ink);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 18px;
}
.category-sidebar-list { display: flex; flex-direction: column; }
.category-sidebar-link {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.category-sidebar-link:last-child { border-bottom: none; }
.category-sidebar-link:hover { color: var(--color-primary); background: var(--color-bg-alt); }
.category-sidebar-link.active {
  color: var(--color-primary);
  background: rgba(245, 169, 0, 0.08);
  border-left: 3px solid var(--color-primary);
  padding-left: 15px;
}
@media (max-width: 800px) {
  .category-layout { grid-template-columns: 1fr; }
  .category-sidebar { position: static; }
}

/* Second sidebar block — a category's own subcategories, shown under the
   "Shop by Category" list when data/materials.json declares any for this
   category (build.py's _subcategory_sidebar_html()). Same card, so it
   reads as one continuous sidebar rather than a separate box. */
.category-sidebar-head-sub {
  background: var(--color-ink);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 18px;
  border-top: 3px solid var(--color-primary);
}

/* Product grid + product card — the merchant-style card used on category
   pages, subcategory pages, the landing page and search results
   (build.py's _product_card_html() / js/site-search.js's JS equivalent).
   "View Product" always goes to the product page; "Request a Quote" is
   the one slot designed to become "Add to Basket" later without touching
   the rest of the card, per Dan's requirement. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.product-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.pc-image {
  display: block;
  height: 160px;
  background: var(--color-bg-alt);
}
.pc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pc-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.pc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.pc-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
}
.pc-name:hover { color: var(--color-primary); }
.pc-code { font-size: 12px; color: var(--color-text-muted); margin-bottom: 2px; }
.pc-pack { font-size: 12px; color: var(--color-text-muted); margin-bottom: 8px; }
.pc-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary);
  margin: 4px 0 2px;
}
.pc-price.pc-poa { font-size: 14px; font-weight: 700; color: var(--color-ink-soft); margin-bottom: 12px; }
/* Ex-VAT sub-line under the bold inc-VAT headline price — mirrors the OCL
   Direct product-page layout Dan asked to match. */
.pc-price-exvat {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}
.pc-unit-note, .pc-vat-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.pc-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 950px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pc-body { padding: 12px 12px 14px; }
}

/* Sort control — shown only when a grid has enough products to make
   sorting worthwhile (build.py's _sort_control_html(): more than 4). No
   stock-based option; Building Supplies has no live inventory to sort by. */
.catalogue-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.sort-select {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  color: var(--color-ink);
  background: #fff;
}

/* On-page subcategory groupings ("dedicated": false) — an anchored section
   within its parent category page, so promoting one to a dedicated page
   later (flip "dedicated" to true) never changes this markup, only which
   subcategories reach it. */
.category-group { margin-bottom: 40px; }
.category-group:last-child { margin-bottom: 0; }
.category-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  scroll-margin-top: 96px;
}
.category-group-heading {
  font-size: 20px;
  margin: 0;
}
.category-group-head .catalogue-toolbar { margin-bottom: 0; }
@media (max-width: 560px) {
  .category-group-head { flex-direction: column; align-items: flex-start; }
}

/* Catalogue: filter bar */
.filter-bar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 14px;
  align-items: end;
  box-shadow: var(--shadow);
  margin-top: -30px;
  position: relative;
  z-index: 5;
}
.filter-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.filter-field input, .filter-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.filter-reset {
  padding: 10px 16px;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-reset:hover { background: var(--color-border); }
@media (max-width: 900px) {
  .filter-bar { grid-template-columns: 1fr 1fr; margin-top: 0; }
}
@media (max-width: 560px) {
  .filter-bar { grid-template-columns: 1fr; }
}

.results-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0 20px;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Catalogue: equipment grid + cards */
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 950px) { .catalogue-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .catalogue-grid { grid-template-columns: 1fr; } }

.equip-card .thumb { position: relative; }
.stock-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 20px;
  background: #1E8E4A;
  color: #fff;
  box-shadow: 0 2px 8px rgba(20, 24, 31, 0.18);
  z-index: 2;
}
.stock-badge.out { background: #B23A3A; }
.stock-badge.limited { background: #F5A900; }
.category-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.spec-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.spec-list li {
  font-size: 12px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 3px 9px;
  border-radius: 20px;
}
.price-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.price-table div {
  text-align: center;
  padding: 8px 4px;
  border-right: 1px solid var(--color-border);
}
.price-table div:last-child { border-right: none; }
.price-table .p-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 2px;
}
.price-table .p-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-ink);
}
.no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
}

/* About / Contact page */
.info-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
}
.info-card h4 { font-size: 16px; margin-bottom: 14px; }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.info-list li:last-child { border-bottom: none; }
.info-list .icon-badge {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(245, 169, 0, 0.1);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}

.hours-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours-table td { padding: 7px 0; border-bottom: 1px solid var(--color-border); }
.hours-table tr:last-child td { border-bottom: none; }
.hours-table td:last-child { text-align: right; font-weight: 600; color: var(--color-ink); }

.area-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.area-chips span {
  font-size: 13px;
  font-weight: 600;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-ink-soft);
  padding: 6px 12px;
  border-radius: 20px;
}

.map-placeholder {
  height: 220px;
  border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, #ECEEF1, #ECEEF1 12px, #E4E6EA 12px, #E4E6EA 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 20px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.form-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.form-card h3 { font-size: 20px; }
.form-card .form-sub { color: var(--color-text-muted); margin-bottom: 22px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* .form-field is an alias of .field — a few admin pages (equipment type
   detail, asset detail, the Extend Hire / Add Equipment panels on booking
   detail) were built using that name, which never had its own styling,
   so those fields were falling back to unstyled browser defaults
   (inline labels, tiny inputs, no consistent spacing). Styled identically
   here rather than renaming the class across every page that uses it. */
.field, .form-field { margin-bottom: 16px; }
.field label, .form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text-muted);
}
.field input, .field select, .field textarea,
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.field textarea, .form-field textarea { resize: vertical; min-height: 100px; }

.form-success {
  display: none;
  background: #E9F7EF;
  border: 1px solid #BEE6CE;
  color: #1E6B3A;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 18px;
}
.form-success.show { display: block; }

/* Onboarding wizard — shared progress bar (register.html + my-account.html) */
.wizard-progress {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0;
  padding: 4px 0;
}
.wizard-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 78px; text-align: center; flex-shrink: 0; }
.wizard-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: #EDEDED; color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.wizard-step-label { font-size: 11px; color: var(--color-text-muted); max-width: 92px; line-height: 1.3; }
.wizard-step-done .wizard-step-dot { background: #2F7D4F; color: #fff; }
.wizard-step-done .wizard-step-label { color: var(--color-ink); }
.wizard-step-current .wizard-step-dot { background: var(--color-ink); color: #fff; }
.wizard-step-current .wizard-step-label { color: var(--color-ink); font-weight: 600; }
.wizard-step-connector { width: 30px; height: 2px; background: #E3E3E3; margin: 13px 2px 0; flex-shrink: 0; }
@media (max-width: 640px) {
  .wizard-step-connector { width: 12px; }
  .wizard-step { min-width: 56px; }
  .wizard-step-label { display: none; }
}

.wizard-holding-panel { text-align: center; padding: 30px 20px; }
.wizard-holding-panel h3 { margin: 0 0 8px; }

/* Account type choice (register.html Step 0) */
.account-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 700px) {
  .account-type-grid { grid-template-columns: 1fr; }
}
.account-type-card {
  text-align: left;
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-type-card:hover { border-color: var(--color-ink); }
.account-type-card h4 { margin: 0 0 10px; font-size: 17px; }
.account-type-card ul { margin: 0 0 16px; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); flex-grow: 1; }
.account-type-card ul li { margin-bottom: 4px; }
.account-type-pick {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-ink);
  color: #fff;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
}

/* Admin nav — small unread-notification hint dot (migration 0065) */
.nav-notify-badge {
  position: absolute;
  top: -3px;
  right: -11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E0483E;
  box-shadow: 0 0 0 2px var(--color-ink);
}

/* Trade application fieldsets (My Account business details) */
.account-fieldset {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 16px 4px;
  margin: 0 0 20px;
}
.account-fieldset legend {
  font-weight: 600;
  font-size: 14px;
  padding: 0 8px;
}

/* Equipment detail page */
.breadcrumb {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 18px 0;
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb span.sep { margin: 0 6px; }
.breadcrumb span.current { color: var(--color-ink); font-weight: 600; }

.detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* Quantity stepper — Building Supplies product pages only. Not a basket:
   it just feeds a number into the existing free-text "Quantity /
   requirements" field on the quote form (js/product-quantity.js /
   js/building-supplies.js), so the slot is ready for a real "Add to
   Basket" later without any layout change here. */
.qty-field { margin-bottom: 18px; }
.qty-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 8px;
}
.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.qty-btn {
  width: 40px;
  border: none;
  background: var(--color-bg-alt);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
}
.qty-btn:hover { background: var(--color-border); }
.qty-input {
  width: 64px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  font-family: inherit;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gallery-main {
  height: 440px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 14px;
  position: relative;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .gallery-main { height: 300px; } }

.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.gallery-thumbs img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--color-border);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.gallery-thumbs img:hover { opacity: 1; }
.gallery-thumbs img.active { border-color: var(--color-primary); opacity: 1; }

.detail-panel h1 { font-size: 28px; margin-bottom: 8px; }
.fleet-note {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}
.detail-panel .price-table { margin-top: 4px; }
.detail-panel .spec-list { margin-top: 4px; }

/* Duration selector + price calculator (equipment detail page) */
.hire-calculator {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 18px 0 20px;
  background: var(--color-bg-alt);
}
.hire-calculator-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.duration-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.duration-option {
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.duration-option:hover { border-color: var(--color-primary); }
.duration-option.active {
  border-color: var(--color-primary);
  background: rgba(245, 169, 0, 0.06);
}
.duration-option .duration-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
}
.duration-option .duration-price {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary);
}
.price-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px dashed var(--color-border);
  padding-top: 14px;
}
.price-summary-label { font-size: 13px; color: var(--color-text-muted); font-weight: 600; }
.price-summary-value { font-size: 30px; font-weight: 800; color: var(--color-ink); }
.price-summary-sub { font-size: 12px; color: var(--color-text-muted); display: block; text-align: right; }

.mini-policy-list { margin-bottom: 18px; }
.mini-policy-list li { padding: 9px 0; }

/* Feature bullets (equipment_features, migration 0100) */
.feature-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.feature-list li {
  position: relative;
  padding: 4px 0 4px 24px;
  font-size: 14px;
  color: var(--color-text);
}
.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #1E8E4A;
  font-weight: 800;
}

/* Delivery / Collection / Cross Hire fulfilment badges (product page) */
.fulfilment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
}
.fulfilment-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-soft);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: 20px;
}

.cta-secondary-row {
  display: flex;
  gap: 10px;
}
.cta-secondary-row .btn { font-size: 13px; padding: 11px 14px; }

/* Enlarge-image lightbox */
.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 28, 0.92);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.image-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}
.image-lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}

/* Specifications table (equipment_specifications, migration 0100) */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.specs-table tr { border-bottom: 1px solid var(--color-border); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table tr:nth-child(even) { background: var(--color-bg-alt); }
.specs-table td {
  padding: 12px 20px;
  font-size: 14px;
}
.specs-table td:first-child {
  font-weight: 700;
  color: var(--color-ink);
  width: 40%;
}
.specs-table td:last-child { color: var(--color-text); }

/* Downloads list (equipment_documents, migration 0100) */
.downloads-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 640px) { .downloads-list { grid-template-columns: 1fr; } }
.downloads-list li {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.downloads-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
}
.downloads-list a:hover { color: var(--color-primary); }
.downloads-list .download-icon { font-size: 18px; }
.downloads-list .download-type {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.not-found {
  text-align: center;
  padding: 90px 20px;
}
.not-found h2 { margin-bottom: 10px; }

.related-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 950px) { .related-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .related-row { grid-template-columns: 1fr; } }

/* Pricing page */
.policy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 950px) { .policy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .policy-grid { grid-template-columns: 1fr; } }

.policy-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
}
.policy-card .icon-badge {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(245, 169, 0, 0.1);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  margin-bottom: 12px;
}
.policy-card h4 { font-size: 15px; margin-bottom: 8px; }
.policy-card p { font-size: 13px; color: var(--color-text-muted); margin: 0; }

.delivery-bands { list-style: none; margin: 16px 0 0; padding: 0; }
.delivery-bands li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.delivery-bands li:last-child { border-bottom: none; }
.delivery-bands li span:last-child { font-weight: 700; color: var(--color-ink); white-space: nowrap; }

.vat-note {
  background: #F5A900;
  border: 1px solid #D19400;
  color: #fff;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 40px;
}

.category-group { margin-bottom: 52px; }
.category-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-ink);
}
.category-group-head h3 { font-size: 20px; margin: 0; }
.category-group-head span { font-size: 13px; color: var(--color-text-muted); }

.price-table-full {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.price-table-full th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}
.price-table-full th.num, .price-table-full td.num { text-align: right; }
.price-table-full td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  vertical-align: middle;
}
.price-table-full tr:last-child td { border-bottom: none; }
.price-table-full tr:hover td { background: var(--color-bg-alt); }
.price-table-full .item-name { font-weight: 700; color: var(--color-ink); }
.price-table-full .item-avail { font-size: 12px; color: var(--color-text-muted); font-weight: 400; }
.price-table-full .num { font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.price-table-full .btn { padding: 8px 16px; font-size: 13px; white-space: nowrap; }

@media (max-width: 800px) {
  .price-table-full thead { display: none; }
  .price-table-full, .price-table-full tbody, .price-table-full tr, .price-table-full td {
    display: block;
    width: 100%;
  }
  .price-table-full tr { padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
  .price-table-full td { padding: 3px 0; border-bottom: none; }
  .price-table-full td.num::before { content: attr(data-label) ": "; font-weight: 400; color: var(--color-text-muted); }
  .price-table-full td.action { padding-top: 10px; }
}

/* Hire Basket page */
.basket-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .basket-layout { grid-template-columns: 1fr; }
}

.basket-item {
  display: flex;
  gap: 18px;
  padding: 18px;
  margin-bottom: 16px;
}
.basket-item-thumb {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
}
.basket-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.basket-item-thumb .img-placeholder-mark { width: 34px; height: 34px; font-size: 11px; border-radius: 7px; }
.basket-item-thumb .img-placeholder-label { display: none; }
.basket-item-body { flex: 1; min-width: 0; }
.basket-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.basket-item-top h4 { font-size: 16px; margin: 2px 0 4px; }
.basket-item-top h4 a { color: inherit; }

.remove-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
}
.remove-btn:hover { color: var(--color-primary); }

.waitlist-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #FDECEC;
  color: #B23A3A;
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.waitlist-inline-note {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 4px 0 10px;
}

.basket-item-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  overflow: hidden;
}
.qty-btn {
  background: var(--color-bg-alt);
  border: none;
  width: 30px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  color: var(--color-ink);
}
.qty-btn:hover { background: var(--color-border); }
.qty-input {
  width: 44px;
  height: 34px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-size: 14px;
  font-family: inherit;
}
.duration-select {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.basket-item-price {
  margin-left: auto;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-ink);
  white-space: nowrap;
}

.basket-summary { position: sticky; top: 90px; }
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.summary-row span:last-child { font-weight: 700; color: var(--color-ink); }
.summary-row.muted { font-size: 12px; color: var(--color-text-muted); }
.summary-row.muted span:last-child { font-weight: 400; color: var(--color-text-muted); }
.summary-row.total { border-bottom: none; padding-top: 14px; }
.summary-row.total span:last-child { font-size: 22px; }
.summary-row.deposit {
  background: var(--color-bg-alt);
  margin: 10px -22px 0;
  padding: 12px 22px;
  border-bottom: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

.empty-basket {
  text-align: center;
  padding: 80px 20px;
}
.empty-basket h2 { margin-bottom: 8px; }
.empty-basket p { color: var(--color-text-muted); margin-bottom: 24px; }

/* Booking form + confirmation */
.radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) { .radio-group { grid-template-columns: 1fr; } }
.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.radio-option:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(245, 169, 0, 0.06);
}
.radio-option input { accent-color: var(--color-primary); width: 16px; height: 16px; }

.file-input-note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 6px;
}

.terms-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 8px 0 20px;
}
.terms-row input { margin-top: 3px; accent-color: var(--color-primary); }

.booking-recap {
  position: sticky;
  top: 90px;
}
.booking-recap-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}
.booking-recap-item:last-child { border-bottom: none; }
.booking-recap-item .ri-name { font-weight: 600; color: var(--color-ink); }
.booking-recap-item .ri-meta { color: var(--color-text-muted); font-size: 12px; display: block; }

.confirmation-hero {
  text-align: center;
  padding: 50px 20px 20px;
}
.confirmation-hero .check-badge {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(30, 142, 74, 0.12);
  color: #1E8E4A;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}
.confirmation-hero .booking-ref {
  display: inline-block;
  font-family: var(--font, monospace);
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: 8px;
  margin-top: 10px;
}

.summary-block { margin-bottom: 32px; }
.summary-block h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.detail-kv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  font-size: 14px;
}
@media (max-width: 640px) { .detail-kv { grid-template-columns: 1fr; } }
.detail-kv div span { display: block; }
.detail-kv div .kv-label { font-size: 12px; color: var(--color-text-muted); margin-bottom: 2px; }
.detail-kv div .kv-value { font-weight: 600; color: var(--color-ink); }

@media print {
  .site-header, .department-bar, .trust-strip, .topbar, .build-notice, .site-footer, .no-print { display: none !important; }
}

/* Admin back office */
.admin-header {
  background: var(--color-ink);
  color: #fff;
  padding: 14px 0;
}
.admin-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-header .logo { color: #fff; }
.admin-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #B9C2D0;
}
.admin-header-right strong { color: #fff; }
.admin-role-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(255,255,255,0.12);
  padding: 3px 9px;
  border-radius: 20px;
}

.admin-login-wrap {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.admin-login-card { width: 100%; max-width: 380px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 16px;
}
.stat-card .stat-label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  display: block;
}
.stat-card .stat-value { font-size: 26px; font-weight: 800; color: var(--color-ink); }

.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 20px;
}
.status-quote { background: #F1EAFB; color: #5B3FA5; }
.status-new { background: #E6F1FB; color: #185FA5; }
.status-confirmed { background: #EAF3DE; color: #3B6D11; }
.status-out { background: #F5A900; color: #fff; }
.status-partially_returned { background: #F5A900; color: #fff; }
.status-returned { background: #E1F5EE; color: #0F6E56; }
.status-completed { background: #E4E9F7; color: #2A3E8C; }
.status-cancelled { background: #FCEBEB; color: #A32D2D; }
.status-reviewed { background: #FBF2E3; color: #8A5A1E; }
.status-planned { background: #E6F1FB; color: #185FA5; }

/* Customer profile statuses */
.status-active { background: #EAF3DE; color: #3B6D11; }
.status-blocked { background: #FCEBEB; color: #A32D2D; }
.status-suspended { background: #F5A900; color: #fff; }

/* Document verification statuses */
.status-pending { background: #F5A900; color: #fff; }
.status-verified { background: #EAF3DE; color: #3B6D11; }
.status-rejected { background: #FCEBEB; color: #A32D2D; }

/* Customer completion statuses (migrations 0063/0064) */
.status-draft { background: #F0F0F0; color: #666; }
.status-awaiting_email_verification { background: #F0F0F0; color: #666; }
.status-incomplete { background: #F5A900; color: #fff; }
.status-ready_to_submit { background: #E6F1FB; color: #185FA5; }
.status-awaiting_review { background: #E4E9F7; color: #2A3E8C; }
.status-changes_requested { background: #F5A900; color: #fff; }

.onboarding-step-btn {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-muted);
}
.onboarding-step-btn.step-done { border-color: #3B6D11; color: #3B6D11; background: #EAF3DE; }
.onboarding-step-btn.step-current { border-color: #F5A900; color: #F5A900; background: #fff; }

.admin-section { margin-bottom: 40px; }
.admin-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.admin-section-head h3 { font-size: 17px; margin: 0; }
.admin-section-head span { font-size: 13px; color: var(--color-text-muted); }

.admin-table-wrap {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--color-bg-alt); }
.admin-table a.row-link { color: var(--color-ink); font-weight: 700; }
.admin-table a.row-link:hover { color: var(--color-primary); }
.admin-empty-row td {
  text-align: center;
  color: var(--color-text-muted);
  padding: 30px 14px;
}

/* Reusable inline overlay panel — used by the Customer Register's New
   Customer form and other quick-add/quick-edit panels that shouldn't
   force a full page navigation. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 28, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  z-index: 200;
}
.modal-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  width: 100%;
  max-width: 480px;
}

.status-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* Placeholder banner used only during build phase */
.build-notice {
  background: #F5A900;
  border-bottom: 1px solid #D19400;
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 8px 12px;
}

/* ---- Cookie consent banner (js/consent.js) — gates the Google Ads tag
   behind visitor consent. Fixed to the bottom so it never reflows page
   content, high z-index so it always sits above the header/nav. ---- */
#kaspar-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: var(--color-ink);
  box-shadow: var(--shadow-lg);
}
.kaspar-cookie-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.kaspar-cookie-banner-copy { flex: 1 1 380px; }
.kaspar-cookie-banner-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.kaspar-cookie-banner-text a { color: var(--color-primary); }
.kaspar-cookie-banner-status {
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}
.kaspar-cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .kaspar-cookie-banner-inner { padding: 16px; gap: 14px; }
  .kaspar-cookie-banner-actions { width: 100%; }
  .kaspar-cookie-banner-actions .btn { flex: 1; padding: 12px 16px; font-size: 14px; }
}