/* Navbar colours - change these direct values while experimenting. */
.utility-nav {
  background: #ffffff;
  border-bottom-color: #dde2de;
}

/* Admin order run cards and paid-review states */
.admin-status--deliveryissue,
.admin-status--partiallyrefunded {
  color: #7a3d00;
  background: #fff3d6;
  border-color: #e6b968;
}

.admin-order-alert {
  margin: 1.25rem 0;
}

.admin-configured-runs {
  margin: 1.5rem 0;
}

.admin-configured-runs__heading,
.admin-configured-run header,
.admin-configured-run__items > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.admin-configured-runs__heading {
  align-items: end;
  margin-bottom: .8rem;
}

.admin-configured-runs__heading h2 {
  margin: .1rem 0 0;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.admin-configured-runs__heading > span {
  color: var(--ink-soft);
  font-weight: 700;
}

.admin-configured-runs__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

.admin-configured-run {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.admin-configured-run header {
  padding: 1rem 1.1rem .8rem;
}

.admin-configured-run h3,
.admin-configured-run p {
  margin: 0;
}

.admin-configured-run h3 {
  font-size: 1.08rem;
}

.admin-configured-run header p {
  margin-top: .25rem;
  color: var(--ink-soft);
  font-size: .9rem;
}

.admin-configured-run .admin-configured-run__length {
  color: var(--brand);
  font-weight: 700;
}

.admin-configured-run__choices {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin: 0;
  padding: .7rem 1.1rem;
  color: var(--ink-soft);
  background: #f4f8f5;
  border-block: 1px solid var(--line);
  font-size: .86rem;
  list-style: none;
}

.admin-configured-run__choices i {
  color: var(--brand);
  font-weight: 900;
}

.admin-configured-run__items {
  padding: .45rem 1.1rem;
}

.admin-configured-run__items > div {
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}

.admin-configured-run__items > div:last-child {
  border-bottom: 0;
}

.admin-configured-run__items small {
  display: block;
  color: var(--ink-soft);
}

.admin-configured-run footer {
  padding: .65rem 1.1rem;
  color: var(--ink-soft);
  background: #fafafa;
  border-top: 1px solid var(--line);
  font-size: .78rem;
}

.utility-nav__service {
  color: rgba(31, 38, 31, .88);
}

.utility-nav .nav-link,
.utility-nav .nav-link-button {
  color: #1f261f;
}

.utility-nav .nav-link:hover,
.utility-nav .nav-link:focus,
.utility-nav .nav-link.active,
.utility-nav .nav-link-button:hover,
.utility-nav .nav-link-button:focus,
.utility-nav .nav-link-button.active {
  color: #183d31;
  background: #edf0ef;
}

.utility-nav .nav-item:not(:last-child)::after {
  background: rgba(31, 38, 31, .2);
}

/* Change this background to recolour the main navbar and primary buttons together. */
.site-nav,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  background: #563d7c;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  color: #ffffff;
  border-color: transparent;
}

:root {
  --ink: #1d1f1f;
  --muted: #68706d;
  --line: #dde2de;
  --surface: #ffffff;
  --surface-alt: #f3f5f2;
  --page: #f6f7f5;
  --brand: #245c46;
  --brand-dark: #183d31;
  --accent: #b73b2f;
  --gold: #d6a743;
  --shadow-sm: 0 8px 22px rgba(29, 31, 31, .06);
}

html {
  font-size: 16px;
  min-height: 100%;
  overflow-y: scroll;
}

body {
  min-height: 100%;
  color: var(--ink);
  background: var(--page);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  padding-bottom: 4.5rem;
}

a {
  color: var(--brand);
}

a:hover {
  color: var(--accent);
}

.btn {
  border-radius: 4px;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .08);
}

.utility-nav {
  min-height: 2.35rem;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.utility-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.utility-nav__service {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-self: start;
  gap: .45rem 1.1rem;
  font-size: .78rem;
  font-weight: 500;
}

.utility-nav__service span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}

.utility-nav__links {
  justify-self: end;
  gap: .1rem;
  margin-left: 0 !important;
}

.utility-nav .nav-link,
.utility-nav .nav-link-button {
  font-size: .8rem;
  font-weight: 500;
  border-radius: 4px;
  padding: .32rem .6rem;
}

.utility-nav .nav-link:hover,
.utility-nav .nav-link:focus,
.utility-nav .nav-link.active,
.utility-nav .nav-link-button:hover,
.utility-nav .nav-link-button:focus,
.utility-nav .nav-link-button.active {
  text-decoration: none;
}

.utility-nav .nav-item {
  display: inline-flex;
  align-items: center;
}

.utility-nav .nav-item:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 1.15rem;
  margin: 0 .42rem;
}

.nav-logout {
  margin: 0;
}

.nav-link-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.muted {
  color: var(--muted);
}

.home-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #ffffff;
  background: #1c2c25;
}

.home-hero__content {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.eyebrow {
  margin: 0 0 .65rem;
  color: var(--gold);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08rem;
  text-transform: uppercase;
}

.home-hero h1,
.home-hero h1 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  line-height: .98;
  font-weight: 900;
}

.section {
  padding: 3rem 0;
}

main > .section:first-child {
  padding-top: 1.5rem;
}

.section--muted {
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding: 0 .75rem;
}

.section-heading h2,
.filter-panel h2 {
  margin: 0;
  color: #000000;
  font-size: 1.2rem;
  font-weight: 600;
}

.section-heading a:not(.btn) {
  color: #007bff;
  text-decoration: none;
}

.section-heading a:not(.btn):hover,
.section-heading a:not(.btn):focus {
  color: #0056b3;
  text-decoration: underline;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
}

.product-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.product-card:hover {
  border-color: #cfd7d1;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.product-card__image {
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  place-items: center;
  color: var(--muted);
  background: #f1f3f1;
  text-decoration: none;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .5rem;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .75rem;
  padding: .85rem;
}

.product-card__title {
  display: block;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.product-card__title:hover,
.product-card__title:focus {
  color: var(--brand);
}

.product-card__details {
  display: grid;
  gap: .18rem;
  margin: -.2rem 0 0;
  padding: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
  list-style: none;
}

.product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
}

.product-card__price {
  color: var(--brand-dark);
  font-size: 1.05rem;
  font-weight: 700;
}

.product-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  min-height: 2.35rem;
  font-size: .88rem;
}

.stock {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
}

.stock--in {
  color: #245c46;
  background: #e6f0eb;
}

.stock--out {
  color: #8b2a22;
  background: #f7dfdc;
}

.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .7rem;
  margin-bottom: 1.5rem;
}

.catalog-page {
  padding-top: 2rem;
}

.catalog-results {
  min-width: 0;
}

.listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
  padding: .7rem .9rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: .88rem;
  font-weight: 500;
}

.listing-toolbar__summary {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
}

.listing-toolbar__summary strong {
  color: var(--ink);
  font-weight: 700;
}

.listing-toolbar__summary small {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 400;
}

.catalog-sort {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 0;
}

.catalog-stock-filter {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  padding: .25rem .55rem;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: .82rem;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}

.catalog-stock-filter span {
  font-weight: 400;
}

.catalog-stock-filter input {
  width: .95rem;
  height: .95rem;
  margin: 0;
  accent-color: #007bff;
}

.catalog-stock-filter:hover,
.catalog-stock-filter:focus-within {
  border-color: #007bff;
  background: #f2f8ff;
}

.catalog-sort select {
  min-height: 2rem;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .25rem 2rem .25rem .55rem;
  font-size: .82rem;
}

.catalog-sort select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .15rem rgba(214, 167, 67, .18);
  outline: none;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.back-link {
  display: inline-flex;
  margin-bottom: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.product-detail__stock {
  flex: 0 0 auto;
  white-space: nowrap;
}

.product-detail__card {
  display: grid;
  grid-template-columns: minmax(280px, 520px) minmax(300px, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  padding: 2rem;
  color: #55595c;
  background: #ffffff;
  border: 1px solid #e6e8ea;
  border-radius: 4px;
  font-size: .9rem;
  line-height: 1.5;
}

.product-detail__media,
.product-detail__info {
  min-width: 0;
}

.product-detail__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-detail__gallery {
  display: grid;
  gap: .75rem;
  min-width: 0;
}

.product-detail__image-frame {
  position: relative;
  width: 100%;
  max-width: 520px;
  justify-self: start;
}

.product-detail__main-image {
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  place-items: center;
  object-fit: contain;
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 4px;
}

img.product-detail__main-image {
  padding: 1rem;
}

.product-detail__main-image--empty {
  color: var(--muted);
}

.product-detail__zoom {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #ffffff;
  background: rgba(0, 0, 0, .72);
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.product-detail__zoom:hover,
.product-detail__zoom:focus {
  background: #000000;
}

.product-detail__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .65rem;
  margin-top: 0;
}

.product-detail__thumb {
  width: 100%;
  padding: .35rem;
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}

.product-detail__thumb.active,
.product-detail__thumb:hover,
.product-detail__thumb:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(36, 92, 70, .16);
}

.product-detail__thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.product-detail__summary h1 {
  margin: 0 0 .55rem;
  color: #000000;
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 600;
}

.product-detail__details {
  display: grid;
  gap: .3rem;
  margin: 0 0 .8rem;
  padding: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.4;
  list-style: none;
}

.product-price {
  margin: 0;
  color: var(--accent);
  font-size: 1.35rem;
  font-weight: 600;
}

.product-description {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.purchase-panel {
  display: grid;
  gap: .6rem;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.purchase-panel__row {
  display: grid;
  grid-template-columns: 4.25rem auto;
  gap: .7rem;
  align-items: stretch;
  justify-content: start;
}

.purchase-panel__row .form-control {
  width: 4.25rem;
  max-width: 4.25rem;
}

.purchase-panel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: auto;
  min-width: 0;
  padding-inline: .85rem;
}

.purchase-panel__stock {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.purchase-panel__payments {
  display: block;
  width: min(100%, 320px);
  height: auto;
  margin-top: auto;
  align-self: flex-end;
}

.product-detail__unavailable {
  margin: 0;
  padding: 0;
  border-top: 0;
}

body.is-product-lightbox-open {
  overflow: hidden;
}

.product-lightbox[hidden] {
  display: none;
}

.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) 5rem;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(0, 0, 0, .94);
}

.product-lightbox__close {
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 2.4rem;
  padding: .45rem .85rem;
  color: #111111;
  background: #ffffff;
  border: 0;
  border-radius: 4px;
  font-weight: 700;
}

.product-lightbox__stage {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
}

.product-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 8.5rem);
  object-fit: contain;
}

.product-lightbox__count {
  align-self: end;
  margin-top: .75rem;
  color: rgba(255, 255, 255, .78);
  font-size: .9rem;
  font-weight: 700;
}

.product-lightbox__nav {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 5rem;
  color: #d71920;
  background: transparent;
  border: 0;
  font-size: 3.25rem;
  line-height: 1;
}

.product-lightbox__nav:hover,
.product-lightbox__nav:focus {
  color: #ff2730;
}

.product-lightbox__nav--prev {
  grid-column: 1;
}

.product-lightbox__nav--next {
  grid-column: 3;
}

/* Identity's packaged login view supplies its form but no site-width wrapper. */
.identity-login {
  padding-block: clamp(2rem, 6vw, 4.5rem);
  background:
    radial-gradient(circle at 12% 18%, rgba(232, 103, 35, .09), transparent 28rem),
    linear-gradient(180deg, #f3f6f4 0%, #ffffff 100%);
}

.identity-login__panel {
  width: min(100%, 34rem);
  margin-inline: auto;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  background: #ffffff;
  border: 1px solid var(--line);
  border-top: .3rem solid var(--brand);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm, 0 14px 34px rgba(10, 41, 34, .1));
}

.identity-login__panel > h1 {
  margin: 0 0 .35rem;
  color: var(--ink);
  font-size: clamp(1.7rem, 4vw, 2.25rem);
  font-weight: 750;
  letter-spacing: -.025em;
}

.identity-login__panel > .row {
  display: block;
  margin: 0;
}

.identity-login__panel > .row > [class*="col-"] {
  width: 100%;
  max-width: none;
  padding: 0;
}

.identity-login__panel h2 {
  margin: 0 0 1.35rem;
  color: var(--muted);
  font-size: .98rem;
  font-weight: 500;
  line-height: 1.5;
}

.identity-login__panel hr {
  display: none;
}

.identity-login__panel .form-floating {
  margin-bottom: .85rem;
}

.identity-login__panel .form-control {
  min-height: 3.25rem;
  border-color: #cbd4cf;
  border-radius: .45rem;
}

.identity-login__panel .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(18, 60, 50, .13);
}

.identity-login__panel button[type="submit"] {
  min-height: 3rem;
  margin-top: .4rem;
}

.identity-login__panel form + div,
.identity-login__panel form + p {
  margin-top: 1.2rem;
}

/* Hide the unused external-provider column; customer recovery links remain available. */
.identity-login__panel > .row > .col-lg-4.col-lg-offset-2 {
  display: none;
}

.identity-login__panel a {
  color: var(--brand);
  font-weight: 650;
}

.account-intro { color: var(--muted); line-height: 1.65; margin: .75rem 0 1.5rem; }
.account-remember { display: flex; align-items: center; gap: .65rem; min-height: 44px; margin-bottom: .75rem; }
.account-help { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); line-height: 1.7; }
.account-help p { margin: .8rem 0 0; }

.identity-login__panel a:hover,
.identity-login__panel a:focus {
  color: var(--accent);
}

@media (max-width: 575.98px) {
  .identity-login {
    padding-block: 1rem 2rem;
  }

  .identity-login__panel {
    padding: 1.25rem;
    border-radius: .75rem;
  }
}

.form-actions,
.admin-actions,
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

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

.cart-lines {
  display: grid;
  gap: .85rem;
}

.cart-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 170px 100px auto;
  gap: .85rem;
  align-items: center;
  padding: .85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.cart-line__image {
  display: grid;
  aspect-ratio: 1 / 1;
  place-items: center;
  color: var(--muted);
  background: #eef0ed;
  border-radius: 6px;
  text-decoration: none;
}

.cart-line__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .35rem;
}

.cart-line__body,
.cart-line__quantity {
  display: grid;
  gap: .45rem;
}

.cart-line__title {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.cart-line__total {
  font-weight: 900;
}

.cart-summary,
.order-confirmation {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.cart-summary h2,
.admin-panel h2,
.order-confirmation h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
}

.cart-summary__row,
.order-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.order-lines {
  display: grid;
  gap: .65rem;
}

.order-total {
  padding-top: .85rem;
  border-top: 1px solid var(--line);
}

.admin-actions {
  margin-bottom: 1rem;
}

.admin-section-tools {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}

.admin-section-tools h2,
.admin-section-tools p {
  margin: 0;
}

.admin-section-tools p {
  margin-top: .2rem;
  color: var(--muted);
}

.admin-section-tools .catalog-toolbar {
  width: min(100%, 31rem);
  margin: 0;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .85rem;
  margin-bottom: 2rem;
}

.admin-stats div,
.admin-panel {
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-stats span {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.admin-stats strong {
  display: block;
  margin-top: .25rem;
  font-size: 1.55rem;
}

.admin-table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-product-groups {
  display: grid;
  gap: 1.4rem;
}

.admin-product-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-bottom: .55rem;
}

.admin-product-group__header > div {
  display: flex;
  align-items: baseline;
  gap: .65rem;
}

.admin-product-group__header h2 {
  margin: 0;
  font-size: 1.18rem;
}

.admin-product-group__header span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.admin-product-group__empty {
  padding: 1rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
}

@media (max-width: 575.98px) {
  .admin-product-group__header {
    align-items: flex-start;
    flex-direction: column;
  }
}

.admin-table {
  margin: 0;
  min-width: 760px;
}

.admin-product-cell {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.admin-product-cell small {
  display: block;
  color: var(--muted);
}

.admin-thumb {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  place-items: center;
  background: #eef0ed;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.admin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .25rem;
}

.admin-table__actions {
  display: flex;
  gap: .5rem;
  white-space: nowrap;
}

.admin-form__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1.5rem;
  align-items: start;
}

.admin-form__fields,
.admin-form__side,
.admin-image-list,
.admin-category-list {
  display: grid;
  gap: 1rem;
}

.admin-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.admin-check {
  align-self: center;
  padding-top: 1.9rem;
}

.admin-image-item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  padding: .65rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: grab;
}

.admin-image-item.is-dragging {
  opacity: .45;
}

.admin-image-item img {
  width: 78px;
  height: 68px;
  object-fit: cover;
  background: #eef0ed;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.admin-image-item__details {
  min-width: 0;
}

.admin-image-item__details > span {
  display: block;
  margin-top: .25rem;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: .84rem;
}

.admin-image-primary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-image-item__actions {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
}

.admin-image-move {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
}

.admin-image-move:hover,
.admin-image-move:focus-visible {
  color: var(--brand-dark);
  background: var(--surface-alt);
  border-color: var(--line);
}

.admin-image-uploader {
  display: grid;
  gap: .65rem;
}

.admin-image-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.admin-image-drop {
  display: grid;
  min-height: 190px;
  padding: 1.2rem;
  place-items: center;
  align-content: center;
  gap: .35rem;
  text-align: center;
  color: var(--muted);
  background: var(--surface-alt);
  border: 2px dashed #a9b6aa;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.admin-image-drop strong {
  color: var(--ink);
  font-size: 1rem;
}

.admin-image-drop .btn {
  margin-top: .45rem;
  pointer-events: none;
}

.admin-image-drop__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--brand-dark);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.55rem;
  font-weight: 800;
}

.admin-image-drop:hover,
.admin-image-drop:focus-within,
.admin-image-drop.is-over {
  background: #f0f6f1;
  border-color: var(--brand);
}

.admin-image-status {
  min-height: 1.3em;
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
}

.admin-image-status.is-error {
  color: #a92121;
  font-weight: 700;
}

.admin-image-previews {
  display: grid;
  gap: .55rem;
}

.admin-image-preview {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  padding: .55rem;
  background: #f4f8f4;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-image-preview img {
  width: 64px;
  height: 58px;
  object-fit: cover;
  border-radius: 5px;
}

.admin-image-preview__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 700;
}

.admin-image-preview__size {
  display: block;
  color: var(--muted);
  font-size: .78rem;
}

.admin-image-preview__actions {
  display: flex;
  gap: .3rem;
}

@media (max-width: 575px) {
  .admin-image-item,
  .admin-image-preview {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .admin-image-item img {
    width: 64px;
    height: 60px;
  }

  .admin-image-item__actions,
  .admin-image-preview__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.admin-category-list {
  max-height: 420px;
  overflow: auto;
  padding-right: .25rem;
}

.content-body {
  line-height: 1.65;
}

.content-body img {
  max-width: 100%;
  height: auto;
}

.content-body a {
  font-weight: 700;
}

.narrow {
  max-width: 860px;
}

.empty-state {
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 1rem;
}

.site-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  padding: 1rem 0;
  color: #ffe484;
  background: #563d7c;
  font-size: .9rem;
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.site-footer__brand {
  color: #ffffff;
}

@media (max-width: 900px) {
  .home-hero {
    min-height: 460px;
  }

  .catalog-heading,
  .catalog-layout,
  .product-detail__card,
  .cart-layout,
  .admin-form__main,
  .about-grid,
  .about-location-panel,
  .about-intro-media {
    grid-template-columns: 1fr;
  }

  

  .product-detail__thumbs {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  }

  .cart-line {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  

  

  .cart-line__quantity,
  .cart-line__builder-actions,
  .cart-line__total,
  .cart-line > form:last-child {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .utility-nav__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: .35rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
  }

  .utility-nav__links {
    justify-self: start;
  }

  .utility-nav__service {
    gap: .35rem .75rem;
  }

  .home-hero__content {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  

  

  

  

  

  

  

  .product-detail__card {
    padding: 1.25rem;
  }

  .product-lightbox {
    grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem;
    padding: .85rem;
  }

  .product-lightbox__nav {
    width: 3.25rem;
    height: 4rem;
    font-size: 2.65rem;
  }

  .catalog-toolbar,
  .catalog-search {
    grid-template-columns: 1fr;
  }

  .section-heading,
  .site-footer .container,
  .pagination-bar,
  .admin-toolbar,
  .form-actions,
  .listing-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  

  .admin-form__grid,
  .cart-line,
  .about-list div,
  .sell-list,
  .sell-form__grid {
    grid-template-columns: 1fr;
  }

  .cart-line__quantity,
  .cart-line__total {
    grid-column: auto;
  }
}

/* Palisade builder (buy by the metre) */
.pal-intro {
  margin-bottom: 1.5rem;
}

.pal-intro p {
  max-width: 70ch;
  margin-bottom: 0;
}

.pal-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.5rem;
  align-items: start;
}

.pal-steps {
  display: grid;
  gap: 1.25rem;
}

.pal-step {
  background: #ffffff;
  border: 1px solid #dde2de;
  border-radius: .75rem;
  padding: 1.1rem 1.25rem 1.25rem;
}

.pal-step legend {
  float: none;
  width: auto;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.pal-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #563d7c;
  color: #ffffff;
  font-size: .9rem;
  flex-shrink: 0;
}

.pal-step__hint {
  color: #5c665c;
  font-size: .92rem;
  margin: -.35rem 0 .85rem;
}

.pal-options {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.pal-options--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

@media (min-width: 768px) {
  #pal-finishes,
  #mesh-colours,
  #mesh-systems {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

#mesh-colours .pal-card--other-ral {
  grid-column: 1 / -1;
}

.pal-finish-info__swatch {
  position: relative;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
}

.pal-finish-info__swatch span {
  position: absolute;
  left: .4rem;
  bottom: .2rem;
  width: .7rem;
  height: 2.7rem;
  border: 1px solid rgb(255 255 255 / 85%);
  border-radius: .12rem;
  transform-origin: 50% 90%;
}

.pal-finish-info__swatch span:nth-child(1) { background: #c1121c; transform: rotate(-15deg); }
.pal-finish-info__swatch span:nth-child(2) { background: #ed7829; transform: rotate(2deg); }
.pal-finish-info__swatch span:nth-child(3) { background: #f0ca00; transform: rotate(19deg); }
.pal-finish-info__swatch span:nth-child(4) { background: #1d6848; transform: rotate(36deg); }
.pal-finish-info__swatch span:nth-child(5) { background: #004f7c; transform: rotate(53deg); }
.pal-finish-info__swatch span:nth-child(6) { background: #7d7f7d; transform: rotate(70deg); }

.pal-pill {
  border: 1px solid #cdd4ce;
  background: #ffffff;
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-weight: 600;
  color: #1f261f;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.pal-pill:hover,
.pal-pill:focus-visible {
  border-color: #563d7c;
  color: #563d7c;
}

.pal-pill.active {
  background: #563d7c;
  border-color: #563d7c;
  color: #ffffff;
}

.pal-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  text-align: left;
  border: 1px solid #cdd4ce;
  background: #ffffff;
  border-radius: .65rem;
  padding: .9rem 1rem;
  color: #1f261f;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pal-card:hover,
.pal-card:focus-visible {
  border-color: #563d7c;
}

.pal-card.active {
  border-color: #563d7c;
  box-shadow: 0 0 0 2px rgba(86, 61, 124, .28);
}

.pal-card__icon {
  font-size: 1.6rem;
  color: #563d7c;
}

.pal-card span {
  font-size: .88rem;
  color: #5c665c;
}

.pal-length {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  gap: 1rem 1.75rem;
  align-items: end;
}

.pal-length__field .form-control {
  max-width: 11rem;
}

.pal-stepper {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.pal-stepper output {
  min-width: 2.6rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
}

.pal-stepper .btn {
  width: 2.4rem;
  padding: .3rem 0;
  font-weight: 700;
}

.pal-stepper--small output {
  min-width: 2rem;
  font-size: 1rem;
}

.pal-stepper--small .btn {
  width: 2rem;
  padding: .1rem 0;
}

.pal-length__snapped {
  grid-column: 1 / -1;
  margin: 0;
  font-weight: 600;
  color: #563d7c;
}

.pal-endpost {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  background: #f5f2fa;
  border: 1px solid #d9cfe9;
  border-radius: .6rem;
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

.pal-endpost input {
  margin-top: .3rem;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.pal-endpost span {
  font-size: .92rem;
  color: #1f261f;
}

.pal-extras {
  display: grid;
  gap: .5rem;
}

.pal-extra {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .85rem;
  border: 1px solid #e3e7e3;
  border-radius: .55rem;
  padding: .55rem .8rem;
}

.pal-extra__thumb {
  display: block;
  width: 52px;
  height: 52px;
  border: 1px solid #e3e7e3;
  border-radius: .45rem;
  background: #f5f7f5;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
  transform-origin: center left;
}

.pal-extra__thumb:hover {
  position: relative;
  z-index: 30;
  transform: scale(3);
  box-shadow: 0 10px 30px rgba(10, 41, 34, .35);
}

.pal-extra.pal-extra--no-image {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.pal-endpost__thumb {
  flex: 0 0 52px;
}

.pal-extra__title {
  color: #1f261f;
  text-decoration: none;
  font-size: .95rem;
}

.pal-extra__title:hover {
  color: #563d7c;
  text-decoration: underline;
}

.pal-extra__price {
  font-weight: 600;
  white-space: nowrap;
}

.pal-summary {
  position: sticky;
  top: 1rem;
  background: #ffffff;
  border: 1px solid #dde2de;
  border-radius: .75rem;
  padding: 1.25rem;
  display: grid;
  gap: .9rem;
}

.pal-summary h2 {
  font-size: 1.2rem;
  margin: 0;
}

.pal-summary__config {
  font-size: .95rem;
}

.pal-summary__materials {
  margin: 0;
  padding-left: 1.15rem;
  font-size: .88rem;
  color: #5c665c;
  display: grid;
  gap: .25rem;
}

.pal-summary__lines {
  display: grid;
  gap: .3rem;
  border-top: 1px solid #e3e7e3;
  padding-top: .75rem;
}

.pal-summary__line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .93rem;
}

.pal-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #e3e7e3;
  padding-top: .75rem;
  font-size: 1.05rem;
}

.pal-summary__total strong {
  font-size: 1.45rem;
  color: #563d7c;
}

.pal-summary__note {
  margin: 0;
  font-size: .82rem;
  color: #5c665c;
}

@media (max-width: 991px) {
  .pal-builder {
    grid-template-columns: 1fr;
  }

  .pal-summary {
    position: static;
  }
}

/* Mesh builder additions (shares the .pal-* builder styles) */
.pal-card--row {
  flex-direction: row;
  align-items: center;
  gap: .7rem;
}

.pal-swatch {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #cdd4ce;
  flex-shrink: 0;
}

.pal-card:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Footer overhaul - in-flow multi-column footer replacing the original fixed bar */
body {
  padding-bottom: 0;
}

.site-footer {
  position: static;
  margin-top: 2.5rem;
  padding: 2.25rem 0 1.25rem;
  color: rgba(255, 255, 255, .88);
}

.site-footer .container {
  display: block;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.site-footer__col h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 .6rem;
}

.site-footer__col h3 + ul + h3 {
  margin-top: 1.1rem;
}

.site-footer__col p {
  font-size: .9rem;
  margin: 0 0 .75rem;
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
  font-size: .9rem;
}

.site-footer__col a {
  color: #ffe484;
  text-decoration: none;
}

.site-footer__col a:hover,
.site-footer__col a:focus {
  color: #ffffff;
  text-decoration: underline;
}

.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, .25);
  padding-top: 1rem;
  font-size: .85rem;
}

@media (max-width: 767px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* Delivery messaging + basket badge */
.utility-nav__delivery {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.utility-nav__delivery:hover,
.utility-nav__delivery:focus {
  color: #183d31;
  text-decoration: underline;
}

.basket-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  margin-left: .3rem;
  border-radius: 999px;
  background: #563d7c;
  color: #ffffff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}

.cart-summary__row--total {
  border-top: 1px solid #dde2de;
  padding-top: .75rem;
  font-size: 1.05rem;
}

.cart-summary__free {
  color: #1c7c43;
  font-weight: 700;
}

.cart-delivery-note {
  margin: 0;
  padding: .6rem .75rem;
  border-radius: .5rem;
  background: #f5f2fa;
  border: 1px solid #d9cfe9;
  font-size: .88rem;
}

.cart-delivery-note--qualified {
  background: #eaf6ef;
  border-color: #bfe3cd;
  color: #1c7c43;
  font-weight: 600;
}

.cart-delivery-form {
  display: grid;
  gap: .55rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--surface-alt);
}

.cart-delivery-form fieldset {
  display: grid;
  gap: .45rem;
  margin: 0 0 .35rem;
  padding: 0;
  border: 0;
}

.cart-delivery-form legend {
  margin-bottom: .25rem;
  font-size: .9rem;
  font-weight: 800;
}

.cart-delivery-form label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
}

.cart-delivery-form > label:not(.cart-delivery-form__save) {
  display: block;
  font-weight: 700;
}

.cart-delivery-form__delivery-fields {
  display: grid;
  gap: .55rem;
}

.cart-delivery-form__delivery-fields[hidden] {
  display: none;
}

.cart-delivery-form__delivery-fields > label:not(.cart-delivery-form__save) {
  display: block;
  font-weight: 700;
}

.cart-delivery-form small {
  color: var(--muted);
  font-size: .78rem;
}

.cart-delivery-form__save {
  align-items: flex-start !important;
  margin-top: .25rem;
  color: var(--muted);
  font-size: .8rem !important;
}

.cart-delivery-form__status {
  color: var(--muted);
  font-size: .8rem;
}

.cart-delivery-form__status:empty {
  display: none;
}

.cart-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.product-delivery-note {
  margin: .6rem 0 0;
  font-size: .88rem;
  color: #5c665c;
}

.product-delivery-note a {
  color: #563d7c;
}

/* ===========================================================================
   One Stop Fencing brand and conversion pass — July 2026
   ========================================================================== */

:root {
  --ink: #17211f;
  --ink-soft: #35433f;
  --muted: #68736f;
  --line: #d9dfdc;
  --line-strong: #c5cfca;
  --surface: #ffffff;
  --surface-alt: #f0f2ef;
  --page: #f7f8f5;
  --brand: #123c32;
  --brand-dark: #0a2922;
  --brand-bright: #17614d;
  --accent: #ed7829;
  --accent-dark: #c85b14;
  --accent-pale: #fff1e7;
  --cream: #f3f0e8;
  --success: #197347;
  --shadow-sm: 0 10px 30px rgba(15, 39, 32, .07);
  --shadow-md: 0 22px 60px rgba(10, 41, 34, .13);
  --radius-sm: .45rem;
  --radius-md: .8rem;
  --radius-lg: 1.1rem;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
}

body {
  color: var(--ink);
  background: var(--page);
  font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.55;
  padding-bottom: 0;
}

::selection {
  color: #ffffff;
  background: var(--brand-bright);
}

a {
  color: var(--brand-bright);
  text-underline-offset: .16em;
}

a:hover {
  color: var(--accent-dark);
}

h1,
h2,
h3,
.navbar-brand,
.product-card__price,
.product-price,
.pal-summary__total strong {
  letter-spacing: -.025em;
}

.container {
  width: min(100% - 2.5rem, 1280px);
  max-width: none;
}

.site-main {
  min-height: 50vh;
  overflow: clip;
}

.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 9999;
  padding: .7rem 1rem;
  color: #ffffff;
  background: var(--brand-dark);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
}

.skip-link:focus {
  color: #ffffff;
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--accent-dark) !important;
  outline-offset: 3px;
}

.btn {
  min-height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: -.01em;
  padding: .62rem 1.05rem;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.site-nav,
.site-nav .btn-primary {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  box-shadow: 0 10px 24px rgba(10, 41, 34, .18);
}

.btn-outline-primary {
  color: var(--brand);
  border-color: var(--brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
}

.btn-accent {
  color: #1c241f;
  background: var(--accent);
  border-color: var(--accent);
}

.btn-accent:hover,
.btn-accent:focus {
  color: #ffffff;
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 12px 30px rgba(237, 120, 41, .25);
}

.btn-ghost-light {
  color: #ffffff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .7);
  backdrop-filter: blur(8px);
}

.btn-ghost-light:hover,
.btn-ghost-light:focus {
  color: var(--brand-dark);
  background: #ffffff;
  border-color: #ffffff;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}

.text-link:hover {
  color: var(--accent-dark);
}

.eyebrow {
  display: block;
  margin: 0 0 .65rem;
  color: var(--brand-bright);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.eyebrow--light {
  color: #cddcd6;
}

.section {
  padding: 5.5rem 0;
}

main > .section:first-child {
  padding-top: 2rem;
}

.section--muted {
  background: var(--surface-alt);
  border: 0;
}

.section-heading {
  margin-bottom: 2rem;
  padding: 0;
}

.section-heading--intro {
  align-items: flex-end;
}

.section-heading--intro h2,
.section-heading h2 {
  margin: 0;
  max-width: 760px;
  color: var(--ink);
  font-size: clamp(1.75rem, 3vw, 2.8rem);
  font-weight: 750;
  line-height: 1.08;
}

.section-heading--intro p {
  max-width: 680px;
  margin: .7rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.section-heading a:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}

.section-heading a:not(.btn):hover,
.section-heading a:not(.btn):focus {
  color: var(--accent-dark);
  text-decoration: none;
}

/* Header */
.site-header {
  position: relative;
  z-index: 1040;
  background: #ffffff;
}

.utility-nav {
  min-height: 2.55rem;
  color: rgba(255, 255, 255, .86);
  background: var(--brand-dark);
  border: 0;
}

.utility-nav__inner {
  min-height: 2.55rem;
}

.utility-nav__service {
  color: rgba(255, 255, 255, .85);
  font-size: .76rem;
  gap: .4rem 1.5rem;
}

.utility-nav__service .bi {
  color: var(--accent);
}

.utility-nav__delivery {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
}

.utility-nav__delivery:hover,
.utility-nav__delivery:focus {
  color: #ffffff;
  text-decoration: underline;
}

.utility-nav .nav-link,
.utility-nav .nav-link-button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2rem;
  color: rgba(255, 255, 255, .85);
  font-size: .76rem;
  border-radius: .25rem;
  padding: .25rem .45rem;
}

.utility-nav .nav-link:hover,
.utility-nav .nav-link:focus,
.utility-nav .nav-link.active,
.utility-nav .nav-link-button:hover,
.utility-nav .nav-link-button:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, .1);
}

.utility-nav .nav-item:not(:last-child)::after {
  height: .9rem;
  margin: 0 .28rem;
  background: rgba(255, 255, 255, .25);
}

.basket-badge {
  min-width: 1.22rem;
  height: 1.22rem;
  margin-left: .1rem;
  color: var(--brand-dark);
  background: var(--accent);
}

.main-nav {
  min-height: 5.2rem;
  padding: .65rem 0;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 22px rgba(10, 41, 34, .04);
}

.main-nav .navbar-brand,
.site-nav .navbar-brand,
.navbar-brand--footer {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--brand-dark);
  text-decoration: none;
}

/* Logo mark: numeral 1 built from a STOP sign (see _BrandMark.cshtml).
   The 1 is white with a currentColor outline; the footer inverts the fill. */
.brand-mark-svg {
  width: 2.05rem;
  height: 3.05rem;
  flex-shrink: 0;
  color: #1d1f1f;
}

.brand-mark-svg .mark-one {
  fill: #ffffff;
  stroke: currentColor;
}

.brand-wordmark {
  display: grid;
  line-height: .9;
}

.brand-wordmark strong {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: .03em;
}

.brand-wordmark small {
  margin-top: .4rem;
  color: #ed7829;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .32em;
}

.main-nav .navbar-collapse {
  align-items: center;
}

.main-nav__links {
  align-items: center;
  gap: .05rem;
}

.main-nav .nav-item {
  position: relative;
}

.main-nav .nav-item::after,
.site-nav .nav-item:not(:last-child)::after {
  display: none;
}

.main-nav .nav-link {
  position: relative;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 650;
  border-radius: .35rem;
  padding: .7rem .72rem;
}

.main-nav .nav-link::after {
  content: "";
  position: absolute;
  right: .72rem;
  bottom: .38rem;
  left: .72rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus,
.main-nav .nav-link.active {
  color: var(--brand);
  background: #f2f5f3;
}

.main-nav .nav-link:hover::after,
.main-nav .nav-link:focus::after,
.main-nav .nav-link.active::after {
  transform: scaleX(1);
}

.main-nav__builder-link .nav-link {
  color: var(--brand-bright);
}

/* "Other Products" dropdown in the main navbar */
.main-nav__dropdown {
  min-width: 13rem;
  margin-top: .2rem;
  padding: .35rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: .5rem;
  box-shadow: 0 12px 28px rgba(10, 41, 34, .12);
}

.main-nav__dropdown .dropdown-item {
  padding: .5rem .6rem;
  color: var(--ink-soft);
  border-radius: .35rem;
  font-size: .88rem;
  font-weight: 650;
}

.main-nav__dropdown .dropdown-item:hover,
.main-nav__dropdown .dropdown-item:focus,
.main-nav__dropdown .dropdown-item.active {
  color: var(--brand);
  background: #f2f5f3;
}

/* In the collapsed mobile menu the dropdown sits inline and pushes the rest of
   the list down, instead of floating over it. !important overrides the inline
   styles Popper writes onto the menu. */
@media (max-width: 991.98px) {
  .main-nav__dropdown {
    position: static !important;
    width: 100%;
    margin: .1rem 0 .3rem;
    transform: none !important;
    background: #f7f9f8;
    box-shadow: none;
  }
}

/* Orange Contact call-to-action on its own row above the nav links, so it sits directly
   above Installation at the right-hand end of the row (Anthony, 7 August 2026). */
.main-nav__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .45rem;
  /* Drops the search/Contact row clear of the dark utility bar above it. */
  padding-top: .5rem;
}

.main-nav__actions {
  display: flex;
  /* stretch, not center: the two used to share a centre line but differ in height (33px vs
     26px), so their top and bottom edges were ~3.6px out. Stretching makes Contact match the
     search pill exactly, whatever either one's padding later becomes. */
  align-items: stretch;
  gap: .5rem;
}

/* Search sits on the white navbar now, so it is a bordered white pill rather than the
   translucent one it wore on the dark bar. */
.main-nav__search {
  display: flex;
  align-items: center;
  /* Explicit width, not a flex-basis: .main-nav__actions is shrink-to-fit inside a column
     with align-items: flex-end, and in that context a basis of 320px collapsed to 182px. */
  flex: 0 0 auto;
  width: 320px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.main-nav__search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1.75rem;
  padding: 0 .2rem 0 .7rem;
  color: var(--ink);
  font-size: .74rem;
  background: transparent;
  border: 0;
  outline: 0;
}

.main-nav__search input::placeholder {
  color: var(--muted);
}

.main-nav__search:focus-within {
  border-color: var(--accent);
}

.main-nav__search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin: .1rem;
  color: #1b251f;
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.main-nav__search button:hover,
.main-nav__search button:focus {
  color: #ffffff;
  background: var(--accent-dark);
}

.main-nav__search button .bi {
  font-size: .72rem;
}

.main-nav__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  /* Vertical padding is nominal - .main-nav__actions stretches this to the search pill's
     height. Horizontal padding and font size are what actually set its size. */
  padding: .22rem 1.15rem;
  color: #1b251f;
  background: var(--accent);
  /* Same outline as the search pill beside it, so the pair reads as one control group. */
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}

.main-nav__contact:hover,
.main-nav__contact:focus,
.main-nav__contact.active {
  color: #ffffff;
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.main-nav__contact .bi {
  font-size: .82rem;
}

/* Collapsed menu is full width and left aligned, so the button follows suit. */
@media (max-width: 991.98px) {
  .main-nav__stack {
    align-items: stretch;
    gap: .5rem;
    padding-top: .75rem;
  }

  .main-nav__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .main-nav__search {
    flex: 1 1 auto;
    width: auto;
  }

  .main-nav__search input {
    min-height: 2.4rem;
    font-size: .85rem;
  }

  .main-nav__search button {
    width: 2.2rem;
    height: 2.2rem;
  }

  .main-nav__contact {
    justify-content: center;
    /* Matches the search input's 2.4rem + borders so the two stacked pills are equal. */
    min-height: 2.5rem;
    padding: .5rem .85rem;
    font-size: .85rem;
  }
}

.main-nav .navbar-toggler {
  width: 3rem;
  height: 3rem;
  border-color: var(--line-strong);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23123c32' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Homepage hero */
.home-data-warning {
  padding-top: 1rem;
}

.home-hero-v2 {
  position: relative;
  min-height: 650px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #ffffff;
  background: var(--brand-dark);
}

.home-hero-v2__image,
.home-hero-v2__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-hero-v2__image {
  object-fit: cover;
  object-position: center center;
}

.home-hero-v2__shade {
  background:
    linear-gradient(90deg, rgba(6, 28, 23, .95) 0%, rgba(8, 36, 29, .85) 38%, rgba(8, 36, 29, .35) 67%, rgba(8, 36, 29, .15) 100%),
    linear-gradient(0deg, rgba(8, 34, 28, .38), transparent 45%);
}

.home-hero-v2__inner {
  position: relative;
  z-index: 1;
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

.home-hero-v2__content {
  max-width: 720px;
}

.home-hero-v2 h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(3.2rem, 6vw, 5.6rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.055em;
}

.home-hero-v2 h1 em {
  color: var(--accent);
  font-style: normal;
  font-weight: 450;
}

.home-hero-v2__content > p {
  max-width: 650px;
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(1.06rem, 2vw, 1.25rem);
  line-height: 1.6;
}

.home-hero-v2__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2rem;
}

.home-hero-v2__actions .btn {
  min-height: 3.4rem;
  padding-right: 1.3rem;
  padding-left: 1.3rem;
  font-size: .96rem;
}

.home-hero-v2__proof {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin: 1.7rem 0 0;
  padding: 0;
  color: rgba(255, 255, 255, .8);
  font-size: .87rem;
  font-weight: 600;
  list-style: none;
}

.home-hero-v2__proof li {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
}

.home-hero-v2__proof .bi {
  color: var(--accent);
  font-size: 1rem;
}

.home-service-rail {
  position: relative;
  z-index: 2;
  color: #ffffff;
  background: var(--brand);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.home-service-rail__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-service-rail__grid > div {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
  padding: 1.25rem 1.3rem;
}

.home-service-rail__grid > div:first-child {
  padding-left: 0;
}

.home-service-rail__grid > div + div {
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.home-service-rail__grid .bi {
  color: var(--accent);
  font-size: 1.45rem;
}

.home-service-rail__grid span {
  min-width: 0;
  display: grid;
}

.home-service-rail__grid strong {
  font-size: .87rem;
}

.home-service-rail__grid small {
  overflow: hidden;
  color: rgba(255, 255, 255, .68);
  font-size: .73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Guided builder choices */
.home-build-section {
  background: #ffffff;
}

.builder-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.builder-choice {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #ffffff;
  background: var(--brand-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.builder-choice > img,
.builder-choice__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.builder-choice > img {
  object-fit: cover;
  transition: transform .6s ease;
}

.builder-choice:hover > img {
  transform: scale(1.035);
}

.builder-choice__shade {
  background: linear-gradient(0deg, rgba(7, 28, 23, .97) 0%, rgba(8, 38, 31, .77) 48%, rgba(8, 38, 31, .08) 100%);
}

.builder-choice__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2.25rem;
}

.builder-choice__number {
  position: absolute;
  right: 1.8rem;
  bottom: 1.4rem;
  color: rgba(255, 255, 255, .08);
  font-size: 7rem;
  font-weight: 900;
  line-height: .8;
}

.builder-choice h3 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 780;
  line-height: 1;
}

.builder-choice p {
  max-width: 560px;
  margin: 1rem 0;
  color: rgba(255, 255, 255, .78);
}

.builder-choice ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
}

.builder-choice li {
  padding: .35rem .6rem;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 650;
}

.builder-choice .btn {
  position: relative;
  z-index: 2;
  color: var(--brand-dark);
  border: 0;
}

.builder-choice .btn:hover {
  color: #ffffff;
  background: var(--accent);
}

/* Departments */
.home-departments {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

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

.department-card {
  position: relative;
  /* Matches the 1000x750 department photos, so object-fit: cover never crops
     them. Do NOT reintroduce min-height: it wins over the ratio and the sides
     start getting cut again as the grid narrows. */
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #ffffff;
  background: var(--brand-dark);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.department-card > img,
.department-card__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.department-card > img {
  object-fit: cover;
  transition: transform .5s ease;
}

.department-card__overlay {
  background: linear-gradient(0deg, rgba(7, 29, 24, .96), rgba(7, 29, 24, .55) 55%, rgba(7, 29, 24, .05));
}

.department-card__content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  padding: 1.6rem;
}

.department-card__content small {
  color: var(--accent);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.department-card__content strong {
  max-width: 310px;
  margin-top: .2rem;
  font-size: 1.55rem;
  line-height: 1.08;
}

.department-card__content > span {
  max-width: 340px;
  margin-top: .55rem;
  color: rgba(255, 255, 255, .72);
  font-size: .85rem;
  line-height: 1.45;
}

.department-card__content em {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: .8rem;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: .78rem;
  font-style: normal;
  font-weight: 700;
}

.department-card:hover,
.department-card:focus {
  color: #ffffff;
}

.department-card:hover > img,
.department-card:focus > img {
  transform: scale(1.045);
}

/* Product cards */
.home-featured {
  background: #ffffff;
}

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 1.15rem;
}

.product-grid--featured {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.product-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

.product-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e9eeeb;
}

.product-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 38, 31, .32), transparent 42%);
  opacity: 0;
  transition: opacity .2s ease;
}

.product-card:hover .product-card__image::after {
  opacity: 1;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  /* Whole photograph, never a crop: a wide shot of a barrier or a run lost its ends under
     object-fit: cover (Anthony, 4 September 2026). The product page already shows photos whole. */
  object-fit: contain;
  padding: .35rem;
  transition: transform .35s ease;
  /* Own compositor layer from the start, so a photo that finishes decoding after the first
     paint is drawn immediately rather than on the next hover. */
  backface-visibility: hidden;
}

.product-card:hover .product-card__image img {
  transform: scale(1.035);
}

.product-card__view {
  position: absolute;
  right: .8rem;
  bottom: .75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #ffffff;
  font-size: .75rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity .2s ease, transform .2s ease;
}

.product-card:hover .product-card__view {
  opacity: 1;
  transform: translateY(0);
}

.product-card__no-image {
  display: grid;
  place-items: center;
  gap: .35rem;
  color: var(--muted);
  font-size: .8rem;
}

.product-card__no-image .bi {
  font-size: 1.5rem;
}

.product-card__body {
  gap: .58rem;
  padding: 1.1rem;
}

.product-card__title {
  color: var(--ink);
  font-size: .92rem;
  font-weight: 680;
  line-height: 1.42;
}

.product-card__meta {
  min-height: 2rem;
  align-items: center;
  margin-top: auto;
  flex-wrap: wrap;
  row-gap: .35rem;
}

.product-card__price-group {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  gap: .35rem;
}

.product-card__price,
.product-card__price-vat,
.product-card .stock {
  white-space: nowrap;
}

.product-card__price-vat {
  font-size: .68rem;
}

.product-card__price {
  color: var(--brand-dark);
  font-size: 1.15rem;
  font-weight: 800;
}

.stock {
  min-height: auto;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .28rem .5rem;
  font-size: .66rem;
  font-weight: 750;
  border-radius: 999px;
}

.stock i {
  width: .4rem;
  height: .4rem;
  display: inline-block;
  background: currentColor;
  border-radius: 50%;
}

.stock--in {
  color: var(--success);
  background: #e9f5ee;
}

.stock--out {
  /* "To order" is a promise to order it in, not a refusal - amber, not red. */
  color: #8a5a13;
  background: #f8ebe8;
}

.product-card__button {
  min-height: 2.65rem;
  justify-content: space-between;
  margin-top: .28rem;
  padding: .5rem .75rem;
  font-size: .8rem;
}

.product-card__enquire {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .3rem;
  color: var(--brand);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}

/* Homepage process CTA */
.home-advice {
  padding: 5.5rem 0;
  color: #ffffff;
  background: var(--brand-dark);
}

.home-advice__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: center;
}

.home-advice__visual {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .55rem 1rem;
  color: rgba(255, 255, 255, .84);
}

.home-advice__visual > span:nth-of-type(odd) {
  color: var(--accent);
  font-size: 1.6rem;
  font-weight: 300;
}

.home-advice__visual > span:nth-of-type(even) {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.home-advice__visual i {
  grid-column: 1 / -1;
  width: 1px;
  height: 2.6rem;
  margin-left: .9rem;
  background: rgba(255, 255, 255, .22);
}

.home-advice__copy h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
}

.home-advice__copy p {
  margin: 1.2rem 0 1.5rem;
  color: rgba(255, 255, 255, .7);
  font-size: 1.05rem;
}

.home-advice__copy > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}

.home-advice .btn-primary {
  color: var(--brand-dark);
  background: var(--accent);
  border-color: var(--accent);
}

.home-advice .text-link {
  color: #ffffff;
}

/* Catalogue */
.catalog-page {
  padding-top: 1.5rem !important;
  padding-bottom: 5rem;
}

.catalog-page-heading {
  max-width: 820px;
  /* Tightened 2.6rem -> .45rem over two passes: the breadcrumb row above already carries its
     own bottom margin, and the two stacked left a large gap above the eyebrow. Bottom padding
     trimmed too - .range-builder-promo below adds its own top margin. */
  padding: .45rem 0 1rem;
}

.catalog-page-heading h1 {
  margin: 0;
  color: var(--ink);
  /* Was clamp(2.1rem, 4vw, 3.6rem) - category titles read oversized at the top of a grid. */
  font-size: clamp(1.7rem, 2.5vw, 2.4rem);
  font-weight: 780;
  line-height: 1.06;
}

.catalog-page-heading p {
  max-width: 720px;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.range-builder-promo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  /* Top margin reduced: it sat under .catalog-page-heading's bottom padding. */
  margin: .8rem 0 1.25rem;
  padding: 1.35rem 1.5rem;
  color: #ffffff;
  background: var(--brand-dark);
  border-radius: var(--radius-md);
}

.range-builder-promo--palisade {
  min-height: 9rem;
  overflow: hidden;
  background-color: var(--brand-dark);
  background-image:
    linear-gradient(90deg,
      rgba(5, 29, 24, .97) 0%,
      rgba(5, 29, 24, .91) 45%,
      rgba(5, 29, 24, .63) 76%,
      rgba(5, 29, 24, .74) 100%),
    url("/images/meter-palisade-promo.jpg");
  background-position: center 46%;
  background-size: cover;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 28px rgba(7, 35, 29, .14);
}

.range-builder-promo--mesh {
  min-height: 9rem;
  overflow: hidden;
  background-color: var(--brand-dark);
  background-image:
    linear-gradient(90deg,
      rgba(5, 29, 24, .97) 0%,
      rgba(5, 29, 24, .91) 45%,
      rgba(5, 29, 24, .63) 76%,
      rgba(5, 29, 24, .74) 100%),
    url("/images/meter-mesh-promo.jpg");
  background-position: center 50%;
  background-size: cover;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 28px rgba(7, 35, 29, .14);
}

.range-builder-promo__icon {
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  color: var(--brand-dark);
  background: var(--accent);
  border-radius: 50%;
  font-size: 1.35rem;
}

.range-builder-promo .eyebrow {
  margin-bottom: .2rem;
  font-size: .62rem;
}

.range-builder-promo strong {
  display: block;
  color: #ffffff;
  font-size: 1.08rem;
}

.range-builder-promo p {
  margin: .2rem 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: .82rem;
}

.range-builder-promo .btn {
  white-space: nowrap;
}

.listing-toolbar {
  margin-bottom: 1.3rem;
  padding: .9rem 0;
  background: transparent;
  border-top: 1px solid var(--line);
  border-right: 0;
  border-bottom: 1px solid var(--line);
  border-left: 0;
  border-radius: 0;
}

.listing-toolbar__summary strong {
  font-size: .95rem;
}

.listing-toolbar__summary small {
  color: var(--muted);
}

.catalog-stock-filter,
.catalog-sort select {
  min-height: 2.5rem;
  background: #ffffff;
  border-color: var(--line-strong);
  border-radius: .4rem;
}

.catalog-sort__apply {
  min-height: 2.5rem;
  padding: .38rem .8rem;
  font-size: .8rem;
}

.catalog-stock-filter:hover,
.catalog-stock-filter:focus-within {
  border-color: var(--brand-bright);
}

.pagination-bar {
  margin-top: 2rem;
  padding: 1.2rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* Product detail */
.product-detail {
  padding-top: 1.5rem !important;
  padding-bottom: 5rem;
}

.product-detail__card {
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1.2rem, 3vw, 2.5rem);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.product-detail__image-frame {
  overflow: hidden;
  background: #eef1ef;
  border: 0;
  border-radius: var(--radius-md);
}

.product-detail__main-image {
  object-fit: contain;
}

.product-detail__zoom {
  right: 1rem;
  bottom: 1rem;
  color: #ffffff;
  background: rgba(10, 41, 34, .86);
  border: 0;
  backdrop-filter: blur(8px);
}

.product-detail__summary h1 {
  font-size: clamp(2rem, 3vw, 3.25rem);
  font-weight: 760;
  line-height: 1.05;
}

.product-description {
  color: var(--ink-soft);
  font-size: .95rem;
}

.product-description.content-body {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.product-description ul {
  padding-left: 1.15rem;
}

.product-description li::marker {
  color: var(--accent);
}

.product-price {
  margin: .8rem 0;
  color: var(--brand-dark);
  font-size: 2rem;
  font-weight: 820;
}

.purchase-panel {
  padding: 1.2rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.purchase-panel__row .form-control {
  min-height: 3rem;
}

.purchase-panel__button {
  min-height: 3rem;
  background: var(--brand);
}

.purchase-panel__payments {
  max-width: 290px;
  height: auto;
  margin-top: 1rem;
}

.product-delivery-note,
.product-delivery-note a {
  color: var(--muted);
}

.product-purchase-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  margin-top: .8rem;
  color: var(--muted);
  font-size: .75rem;
}

.product-purchase-assurance span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.product-purchase-assurance .bi {
  color: var(--brand-bright);
}

.product-builder-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.5rem;
  padding: 2rem;
  background: var(--cream);
  border-radius: var(--radius-lg);
}

.product-builder-callout h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}

.product-builder-callout p {
  max-width: 720px;
  margin: .6rem 0 0;
  color: var(--muted);
}

.product-builder-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  flex: 0 0 auto;
}

/* Fence builders */
.builder-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .65fr);
  min-height: 330px;
  margin: .25rem 0 2rem;
  overflow: hidden;
  color: #ffffff;
  background: var(--brand-dark);
  border-radius: var(--radius-lg);
}

.builder-intro__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 3.5rem);
}

.builder-intro .eyebrow { color: #ffb47b; }

.builder-intro h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 780;
  line-height: .98;
}

.builder-intro p {
  max-width: 720px;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 1rem;
}

.builder-intro__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.3rem;
  margin-top: 1.5rem;
}

.builder-intro__facts span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255, 255, 255, .68);
  font-size: .78rem;
}

.builder-intro__facts strong,
.builder-intro__facts .bi {
  color: var(--accent);
}

.builder-intro__media {
  position: relative;
  min-height: 260px;
  overflow: hidden;
}

.builder-intro__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #0a2922 0%,
    rgba(10, 41, 34, .85) 14%,
    rgba(10, 41, 34, .58) 30%,
    rgba(10, 41, 34, .32) 48%,
    rgba(10, 41, 34, .14) 66%,
    rgba(10, 41, 34, .04) 82%,
    transparent 100%);
}

.builder-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pal-builder {
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 1.5rem;
}

.pal-summary-jump {
  display: none;
}

.pal-steps {
  gap: .9rem;
}

.pal-step {
  position: relative;
  padding: 1.35rem 1.5rem 1.5rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 3px 14px rgba(10, 41, 34, .025);
}

.pal-step legend {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 750;
}

.pal-step__number {
  width: 1.85rem;
  height: 1.85rem;
  color: var(--brand-dark);
  background: var(--accent);
  font-size: .78rem;
  font-weight: 800;
}

.pal-step__hint {
  color: var(--muted);
}

.pal-pill {
  min-height: 2.65rem;
  color: var(--ink-soft);
  background: #ffffff;
  border-color: var(--line-strong);
  font-size: .88rem;
}

.pal-pill:hover {
  color: var(--brand);
  border-color: var(--brand-bright);
}

.pal-pill:focus-visible {
  color: var(--brand-dark);
  border-color: var(--accent);
  outline: 0;
  background: #f1f6f3;
  box-shadow: 0 0 0 2px rgba(237, 120, 41, .25);
}

.pal-pill.active {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 750;
  box-shadow: 0 0 0 2px rgba(237, 120, 41, .25);
}

.pal-card {
  min-height: 100px;
  color: var(--ink);
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 1rem;
}

.pal-card__icon {
  color: var(--brand-bright);
}

.pal-card:hover {
  border-color: var(--brand-bright);
  background: #f8faf8;
}

.pal-card:focus-visible {
  border-color: var(--accent);
  outline: 0;
  background: #f8faf8;
  box-shadow: 0 0 0 2px rgba(237, 120, 41, .25);
}

.pal-card.active {
  border-color: var(--accent);
  color: #ffffff;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(237, 120, 41, .25);
}

.pal-card span {
  color: var(--muted);
}

.form-control,
.form-select,
.catalog-sort select {
  color: var(--ink);
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
}

.form-control:focus,
.form-select:focus,
.catalog-sort select:focus {
  border-color: var(--brand-bright);
  box-shadow: 0 0 0 .22rem rgba(23, 97, 77, .13);
}

.pal-length__snapped {
  color: var(--brand-bright);
}

.pal-length__error {
  display: block;
  max-width: 22rem;
  margin-top: .4rem;
  color: #8b2e24;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.4;
}

.pal-length__error[hidden] {
  display: none;
}

.pal-length {
  padding: 1rem;
  background: #f1f6f3;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  transition: box-shadow .15s ease;
}

.pal-length:focus-within {
  box-shadow: 0 0 0 3px rgba(237, 120, 41, .25);
}

.pal-endpost {
  background: #fff;
  border-color: var(--line);
  border-radius: var(--radius-sm);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pal-endpost input {
  accent-color: var(--brand);
}

.pal-endpost:has(input:checked) {
  background: #f1f6f3;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(237, 120, 41, .2);
}

.pal-endpost:has(input:focus-visible) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(237, 120, 41, .25);
}

.pal-endpost:has(input:disabled) {
  background: var(--surface-alt);
  border-color: var(--line);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .65;
}

.pal-extra {
  background: #fff;
  border-color: var(--line);
  border-radius: var(--radius-sm);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pal-extra.is-selected {
  background: #f1f6f3;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(237, 120, 41, .2);
}

.pal-extra:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(237, 120, 41, .25);
}

.pal-extra__title:hover {
  color: var(--accent-dark);
}

.pal-summary {
  top: 1rem;
  scroll-margin-top: 1rem;
  overflow: hidden;
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-top: 5px solid var(--brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.pal-summary h2 {
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 780;
}

.pal-summary__config {
  color: var(--ink-soft);
}

.pal-summary__materials {
  color: var(--muted);
}

.pal-summary__line,
.pal-summary__total {
  border-color: var(--line);
}

.pal-summary__total strong {
  color: var(--brand);
  font-size: 1.75rem;
}

.pal-summary__submit {
  min-height: 3.1rem;
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}

.pal-summary__submit:hover,
.pal-summary__submit:focus {
  color: #ffffff;
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.pal-summary__note,
.pal-summary__note a {
  color: var(--muted);
}

/* Basket, content, and general panels */
.cart-layout {
  gap: 1.5rem;
}

.cart-line,
.cart-summary,
.order-confirmation,
.content-body,
.site-alert,
.admin-panel {
  background: #ffffff;
  border-color: var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 18px rgba(10, 41, 34, .035);
}

.cart-line__image {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.cart-line__image img {
  object-fit: cover;
}

.cart-summary {
  top: 1rem;
  border-top: 5px solid var(--brand);
  box-shadow: var(--shadow-sm);
}

.cart-summary__row--total {
  border-color: var(--line);
}

.cart-delivery-note {
  background: var(--accent-pale);
  border-color: #f2d2bd;
}

.cart-delivery-note--qualified {
  color: var(--success);
  background: #e9f5ee;
  border-color: #cbe5d6;
}

.empty-state {
  color: var(--muted);
  background: #ffffff;
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
}

.content-body {
  padding: clamp(1.5rem, 4vw, 3rem);
}

.content-body h1,
.content-body h2 {
  color: var(--ink);
}

.content-body h1 {
  font-size: clamp(2rem, 4vw, 3.3rem);
}

.alert {
  border-radius: var(--radius-sm);
}

/* About */
.about-hero {
  padding: 5rem 0;
  color: #ffffff;
  background: var(--brand-dark);
}

.about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr);
  gap: 5rem;
  align-items: center;
}

.about-hero h1 {
  max-width: 780px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 780;
  line-height: .96;
}

.about-hero p {
  max-width: 720px;
  margin: 1.5rem 0 1.8rem;
  color: rgba(255, 255, 255, .72);
  font-size: 1.1rem;
}

.about-hero .btn-primary {
  color: var(--brand-dark);
  background: var(--accent);
  border-color: var(--accent);
}

.about-hero figure {
  position: relative;
  margin: 0;
}

.about-hero figure::before {
  content: "";
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 36%;
  height: 45%;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}

.about-hero img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.about-hero figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: .5rem .7rem;
  color: var(--brand-dark);
  background: var(--accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.about-values {
  background: #ffffff;
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about-values__grid article {
  padding: 2rem;
}

.about-values__grid article + article {
  border-left: 1px solid var(--line);
}

.about-values__grid article > span {
  color: var(--accent);
  font-size: .75rem;
  font-weight: 800;
}

.about-values__grid h3 {
  margin: 1.5rem 0 .7rem;
  font-size: 1.25rem;
}

.about-values__grid p {
  margin: 0;
  color: var(--muted);
}

.about-process__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 5rem;
}

.about-process h2,
.about-finish h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.02;
}

.about-process__steps {
  display: grid;
  gap: .75rem;
}

.about-process__steps > div {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.15rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.about-process__steps .bi {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--accent-pale);
  border-radius: 50%;
  font-size: 1.2rem;
}

.about-process__steps span {
  color: var(--muted);
}

.about-process__steps strong {
  color: var(--ink);
}

.about-finish {
  background: #ffffff;
}

.about-finish__grid {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: center;
}

.about-finish__image img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.about-finish p {
  color: var(--muted);
}

.about-finish__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.about-location__grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr);
  gap: 4rem;
  align-items: stretch;
}

.about-location__details {
  align-self: center;
}

.about-location h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.02;
}

.about-location__details > p {
  margin: 1.2rem 0 1.4rem;
  color: var(--muted);
}

.about-location address {
  display: grid;
  gap: .12rem;
  margin: 0;
  color: var(--ink-soft);
  font-style: normal;
  line-height: 1.55;
}

.about-location address strong {
  color: var(--ink);
  font-weight: 800;
}

.about-location__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
}

.about-location__map {
  min-height: 390px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 35px rgba(7, 35, 29, .1);
}

.about-location__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  border: 0;
}

/* Contact */

/* Footer */
.site-footer {
  position: static;
  margin-top: 0;
  padding: 0;
  color: rgba(255, 255, 255, .76);
  background: #071f1a;
  font-size: .9rem;
}

.site-footer .container {
  display: block;
}

.site-footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 3.3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.site-footer__cta h2 {
  max-width: 760px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.65rem, 3vw, 2.7rem);
  line-height: 1.06;
}

.site-footer__admin-shortcut {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  cursor: default;
}

.site-footer__admin-shortcut:hover {
  color: inherit;
  text-decoration: none;
}

.site-footer__admin-shortcut:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.site-footer__cta .btn {
  flex: 0 0 auto;
  color: var(--brand-dark);
}

.site-footer__grid {
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  gap: 3rem;
  margin: 0;
  padding: 3.5rem 0;
}

.navbar-brand--footer {
  margin-bottom: 1.2rem;
  color: #ffffff;
}

.navbar-brand--footer .brand-wordmark small {
  color: var(--accent);
}

.navbar-brand--footer .brand-mark-svg {
  color: #ffffff;
}

.navbar-brand--footer .brand-mark-svg .mark-one {
  fill: #071f1a;
}

.site-footer__intro p {
  max-width: 330px;
  color: rgba(255, 255, 255, .62);
  font-size: .86rem;
}

.site-footer__address {
  display: grid;
  gap: .08rem;
  margin: 1rem 0 1.15rem;
  color: rgba(255, 255, 255, .7);
  font-size: .82rem;
  font-style: normal;
  line-height: 1.45;
}

.site-footer__address strong {
  margin-bottom: .2rem;
  color: #ffffff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.site-footer__address a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: max-content;
  margin-top: .4rem;
}

.footer-delivery {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #ffffff !important;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
}

.footer-delivery .bi {
  color: var(--accent);
}

.site-footer__col h3 {
  color: #ffffff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.site-footer__col h3 + ul + h3 {
  margin-top: 1.5rem;
}

.site-footer__col ul {
  gap: .52rem;
  font-size: .82rem;
}

.site-footer__col a {
  color: rgba(255, 255, 255, .65);
}

.site-footer__col a:hover,
.site-footer__col a:focus {
  color: var(--accent);
  text-decoration: none;
}

.site-footer__payments {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.5rem;
  color: rgba(255, 255, 255, .75);
  font-size: .76rem;
}

.site-footer__payments .bi {
  color: var(--accent);
  font-size: 1.1rem;
}

.site-footer__payments small {
  color: rgba(255, 255, 255, .42);
}

.site-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 0;
  color: rgba(255, 255, 255, .44);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .75rem;
}

/* Responsive */
@media (max-width: 1199px) {
  .main-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
    font-size: .82rem;
  }

  

  .product-grid--featured {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .container {
    width: min(100% - 2rem, 1280px);
  }

  .main-nav {
    min-height: 4.7rem;
  }

  .main-nav .navbar-collapse {
    margin-top: .7rem;
    padding: .7rem;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }

  .main-nav__links {
    align-items: stretch;
  }

  .main-nav .nav-link {
    min-height: 2.8rem;
    display: flex;
    align-items: center;
    padding: .65rem .8rem;
    font-size: .9rem;
  }

  

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

  .home-service-rail__grid > div:first-child {
    padding-left: 1.3rem;
  }

  .home-service-rail__grid > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }

  .home-service-rail__grid > div:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, .16);
  }

  .builder-choice {
    min-height: 460px;
  }

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

  .product-grid--featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-advice__inner,
  .about-process__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .home-advice__visual {
    grid-template-columns: repeat(5, auto);
    justify-content: start;
  }

  .home-advice__visual i {
    grid-column: auto;
    width: 3rem;
    height: 1px;
    margin: 0;
  }

  .about-hero__grid,
  .about-location__grid,
  .about-finish__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-hero figure,
  .about-finish__image {
    max-width: 680px;
  }

  

  

  .product-builder-callout {
    align-items: flex-start;
    flex-direction: column;
  }

  .builder-intro {
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
  }

  .pal-builder {
    grid-template-columns: 1fr;
  }

  .pal-summary-jump {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    justify-self: start;
    padding: .55rem .8rem;
    color: var(--brand);
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: .84rem;
    font-weight: 750;
    text-decoration: none;
  }

  .pal-summary-jump:hover,
  .pal-summary-jump:focus-visible {
    color: var(--accent-dark);
    border-color: var(--accent-dark);
  }

  .pal-summary {
    position: static;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .section {
    padding: 4rem 0;
  }

  .utility-nav__promise,
  .utility-nav__detail {
    display: none !important;
  }

  .utility-nav__inner {
    min-height: 2.6rem;
    align-items: center;
    flex-direction: row;
    gap: .4rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  .utility-nav__service {
    flex: 1;
    min-width: 0;
  }

  .utility-nav__delivery span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .utility-nav .nav-item:not(:first-child) {
    display: none;
  }

  .utility-nav .nav-item::after {
    display: none;
  }

  .main-nav .navbar-brand {
    gap: .55rem;
  }

  .brand-mark-svg {
    width: 1.8rem;
    height: 2.7rem;
  }

  .brand-wordmark strong {
    font-size: 1rem;
  }

  .brand-wordmark small {
    font-size: .58rem;
  }

  .home-hero-v2 {
    min-height: 600px;
    align-items: flex-end;
  }

  .home-hero-v2__image {
    object-position: 60% center;
  }

  .home-hero-v2__shade {
    background: linear-gradient(0deg, rgba(6, 28, 23, .98) 0%, rgba(7, 33, 27, .86) 60%, rgba(7, 33, 27, .35) 100%);
  }

  .home-hero-v2__inner {
    padding-top: 5rem;
    padding-bottom: 3.5rem;
  }

  .home-hero-v2 h1 {
    font-size: clamp(2.8rem, 13vw, 4.3rem);
  }

  .home-hero-v2__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-hero-v2__actions .btn {
    width: 100%;
  }

  .home-hero-v2__proof {
    display: grid;
    gap: .35rem;
  }

  .home-service-rail__grid {
    grid-template-columns: 1fr;
  }

  .home-service-rail__grid > div,
  .home-service-rail__grid > div:first-child {
    padding: .85rem 0;
    border: 0;
  }

  .home-service-rail__grid > div + div,
  .home-service-rail__grid > div:nth-child(3),
  .home-service-rail__grid > div:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-left: 0;
  }

  .home-service-rail__grid small {
    white-space: normal;
  }

  .section-heading--intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .builder-choice-grid,
  .department-grid,
  .product-grid--featured,
  .about-values__grid,
  .contact-form__grid {
    grid-template-columns: 1fr;
  }

  .builder-choice {
    min-height: 480px;
  }

  .builder-choice__content {
    padding: 1.5rem;
  }

  .builder-choice__number {
    font-size: 5.5rem;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  .product-card__body {
    padding: .8rem;
  }

  .product-card__title {
    font-size: .82rem;
  }

  .product-card__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: .35rem;
  }

  .home-advice__visual {
    grid-template-columns: auto 1fr;
  }

  .home-advice__visual i {
    grid-column: 1 / -1;
    width: 1px;
    height: 2rem;
    margin-left: .9rem;
  }

  

  .catalog-page-heading {
    padding-top: .4rem;
  }

  .range-builder-promo {
    grid-template-columns: auto 1fr;
  }

  .range-builder-promo .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .listing-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-sort {
    justify-content: space-between;
  }

  .product-detail__card {
    gap: 2rem;
    padding: 1rem;
  }

  .product-detail__summary h1 {
    font-size: 2rem;
  }

  .product-builder-callout,
  .builder-intro__copy,
  .contact-guide,
  .contact-form {
    padding: 1.35rem;
  }

  .builder-intro {
    display: flex;
    flex-direction: column-reverse;
  }

  .builder-intro__media {
    min-height: 210px;
  }

  .builder-intro__media::after {
    background: linear-gradient(0deg,
      #0a2922 0%,
      rgba(10, 41, 34, .8) 18%,
      rgba(10, 41, 34, .5) 38%,
      rgba(10, 41, 34, .24) 58%,
      rgba(10, 41, 34, .08) 78%,
      transparent 100%);
  }

  .builder-intro h1 {
    font-size: 2.5rem;
  }

  .pal-step {
    padding: 1.15rem;
  }

  .pal-options--cards {
    grid-template-columns: 1fr;
  }

  .pal-extra {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: .55rem .7rem;
  }

  .pal-extra__thumb {
    width: 44px;
    height: 44px;
    grid-row: 1 / span 2;
  }

  .pal-extra.pal-extra--no-image {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pal-endpost__thumb {
    flex-basis: 44px;
    grid-row: auto;
  }

  .pal-extra .pal-stepper {
    grid-column: 2 / -1;
    justify-self: end;
  }

  .pal-extra--no-image .pal-stepper {
    grid-column: 1 / -1;
  }

  .about-values__grid article {
    padding: 1.5rem 0;
  }

  .about-values__grid article + article {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .about-location__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .about-location__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .about-location__map,
  .about-location__map iframe {
    min-height: 320px;
  }

  

  .site-footer__cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-footer__legal {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .container {
    width: min(100% - 1.25rem, 1280px);
  }

  .utility-nav__delivery {
    font-size: .68rem;
  }

  .utility-nav .nav-link,
  .utility-nav .nav-link-button {
    font-size: .7rem;
    padding-right: .25rem;
    padding-left: .25rem;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-card__image {
    aspect-ratio: 16 / 10;
  }

  .product-card__meta {
    align-items: center;
    flex-direction: row;
  }

  .purchase-panel__row,
  .catalog-sort,
  .product-builder-callout__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .product-builder-callout__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- Mobile account links in the hamburger menu (25 Jul 2026) --------------
   The utility navbar hides everything except the basket on small screens, so
   the collapse menu carries Log in / Register (or Admin / Log out). */

.main-nav__account {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid #d9dfdc;
}

.main-nav__account-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .55rem 1rem;
  color: #123c32;
  background: #f0f2ef;
  border: 0;
  border-radius: .45rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.main-nav__account-link:hover,
.main-nav__account-link:focus {
  color: #0a2922;
  background: #fff1e7;
}

.main-nav__account-form {
  display: inline-flex;
  margin: 0;
}

/* Guest basket sign-in prompt in the basket summary */
.cart-guest-note {
  margin: .65rem 0 0;
  color: #68736f;
  font-size: .85rem;
}

/* Palisade builder: option locked out by the selected palisade type
   (e.g. D-profile is unavailable for Scorpio Standard) */
.pal-card--disabled {
  opacity: .38;
  cursor: not-allowed;
}

/* Palisade type cards: small photo thumbnail + magnifier zoom */
.pal-type {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1 1 240px;
}

.pal-type[hidden] {
  display: none;
}

.pal-type--brochure {
  flex-direction: column;
}

.pal-type--brochure > .pal-card {
  flex: 1;
}

.pal-card--brochure { cursor: pointer; }
.pal-card__select {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.pal-card--brochure:has(.pal-card__select:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pal-card__brochure {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  max-width: 100%;
  margin-top: .5rem;
  color: #245d4e;
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.45;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.pal-card__brochure i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid #f2b8c0;
  border-radius: .3rem;
  background: linear-gradient(225deg, #2688da 0 4px, #fff0f2 4.5px 100%);
  color: #d01d36;
  font-size: .85rem;
  line-height: 1;
}

.pal-card__brochure:hover { color: #123c32; }
.pal-card__brochure:hover i,
.pal-card__brochure:focus-visible i {
  background: linear-gradient(225deg, #2688da 0 4px, #d01d36 4.5px 100%);
  border-color: #d01d36;
  color: #fff;
}
.pal-card__brochure:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.brochure-link {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  width: fit-content;
  max-width: 100%;
  margin: .75rem 0;
  padding: .4rem 0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.brochure-link small {
  display: inline-block;
  font-weight: 400;
}

/* Utility bar items all share the same colour and weight: the delivery link,
   the Secure payment badge and the phone number. */
.utility-nav__promise {
  color: #ffffff;
  font-weight: 600;
}

.utility-nav__phone {
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  white-space: nowrap;
}

.utility-nav__phone:hover,
.utility-nav__phone:focus-visible {
  color: var(--accent);
}

.utility-nav__delivery strong {
  font-weight: 600;
}

/* Phone number in the utility navbar. Unlike the other promise items it stays
   visible on small screens, where the number matters most. */
@media (max-width: 991px) {
  .utility-nav__phone {
    display: inline-flex !important;
  }
}

/* Contact call-to-action in the utility bar, sitting after the phone number.
   Stays visible on small screens, where the other promise items are hidden. */

/* .utility-nav__service .bi paints icons accent-orange, which would vanish here. */

/* Despatch lead time shown on each finish card */
.pal-card__lead {
  display: block;
  margin-top: .3rem;
  color: #197347;
  font-size: .78rem;
  font-weight: 600;
}

.pal-card__lead .bi {
  font-size: .74rem;
}

/* Custom RAL colour picker in the Finish step */
.pal-swatch--multi {
  background: conic-gradient(#004f7c 0 60deg, #383e42 60deg 120deg, #a72920 120deg 180deg, #f7a600 180deg 240deg, #f4f1e6 240deg 300deg, #45322e 300deg 360deg);
}

.pal-ral {
  margin-top: .7rem;
  padding: .8rem .9rem;
  background: #f0f2ef;
  border: 1px solid #d9dfdc;
  border-radius: .65rem;
}

.pal-ral[hidden] {
  display: none;
}

.pal-ral .pal-step__hint {
  margin-bottom: .55rem;
}

.pal-ral__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.pal-ral__swatch {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem .4rem .45rem;
  color: #1f261f;
  background: #ffffff;
  border: 1px solid #cdd4ce;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}

.pal-ral__swatch span {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 50%;
}

.pal-ral__swatch:hover,
.pal-ral__swatch:focus {
  border-color: #123c32;
}

.pal-ral__swatch.active {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(237, 120, 41, .25);
}

.pal-ral__swatch.active span {
  border-color: rgba(255, 255, 255, .5);
}

.pal-type .pal-card--type {
  width: 100%;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  text-align: left;
}

/* Card thumbnails double in size on hover, growing leftwards over the card
   so they never spill off the page edge. */
.pal-card__thumb {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: .45rem;
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
  transform-origin: center right;
}

.pal-card__thumb:hover {
  position: relative;
  z-index: 30;
  transform: scale(2);
  box-shadow: 0 10px 30px rgba(10, 41, 34, .35);
}

.pal-card__body {
  min-width: 0;
}

/* Post fixing cards keep their stacked icon / title / description layout when a
   photo is added alongside, unlike the type cards whose text runs inline. */
.pal-card__body--stack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}

/* Admin palisade pricing page */

/* Each palisade range gets its own headed section, so a rate and the components it belongs
   with are read together rather than hunted for across one long grid. */
.admin-pricing__section + .admin-pricing__section {
  margin-top: 2rem;
}

.admin-pricing__section-head {
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--line);
}

.admin-pricing__section-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}

.admin-pricing__section-head p {
  margin: .2rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}

.admin-pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  /* Panels hold different numbers of heights, so let each one end where its content does
     rather than stretching every card in a row to match the tallest. */
  align-items: start;
  margin-top: 1.25rem;
  padding-bottom: 1rem;
}

.admin-pricing__group {
  min-width: 0;
  margin: 0;
  padding: 1rem 1.1rem 1.15rem;
  background: #ffffff;
  border: 1px solid #d9dfdc;
  border-radius: .8rem;
}

.admin-pricing__group legend {
  float: left;
  width: 100%;
  margin-bottom: .65rem;
  font-size: .92rem;
  font-weight: 700;
}

.admin-pricing__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .45rem;
  font-size: .9rem;
}

.admin-pricing__field .form-control {
  width: 7rem;
  flex-shrink: 0;
  text-align: right;
}

/* --- Admin order detail + admin mobile polish (25 Jul 2026) ---------------- */

.admin-order-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.4rem;
}

.admin-order-head h1 {
  margin-bottom: .5rem;
  font-size: 1.6rem;
}

.admin-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  margin: 0;
  color: #68736f;
  font-size: .92rem;
}

.admin-status {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
}

.admin-status--paid { color: #197347; background: #e2f2e9; }
.admin-status--pending { color: #8a5a13; background: #fdf0d8; }
.admin-status--failed,
.admin-status--cancelled { color: #a13333; background: #fbe7e7; }

.admin-status-form {
  min-width: 240px;
}

.admin-status-form__row {
  display: flex;
  gap: .5rem;
}

.admin-status-form small {
  display: block;
  margin-top: .35rem;
  color: #68736f;
}

.admin-order-stripe {
  display: grid;
  gap: .3rem;
  margin-top: 1rem;
  color: #68736f;
  font-size: .88rem;
  overflow-wrap: anywhere;
}

/* Admin tables already sit in .admin-table-wrap; make sure that wrapper
   scrolls on its own on narrow screens instead of stretching the page. */
.admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  min-width: 640px;
}

@media (max-width: 575.98px) {
  .admin-order-head {
    flex-direction: column;
  }

  .admin-status-form {
    width: 100%;
  }

  .admin-toolbar,
  .admin-actions {
    flex-wrap: wrap;
    gap: .5rem;
  }
}

/* ---------------------------------------------------------------- installation page
   Mirrors the homepage hero and department-card patterns so the page sits in the same
   design language. Photos live in wwwroot/images/installation (see 6u in HANDOFF). */

.install-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #ffffff;
  background: var(--brand-dark);
}

.install-hero__image,
.install-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.install-hero__image {
  object-fit: cover;
  object-position: center center;
}

.install-hero__shade {
  background:
    linear-gradient(90deg, rgba(6, 28, 23, .95) 0%, rgba(8, 36, 29, .86) 40%, rgba(8, 36, 29, .4) 72%, rgba(8, 36, 29, .18) 100%),
    linear-gradient(0deg, rgba(8, 34, 28, .4), transparent 45%);
}

.install-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.install-hero__content {
  /* Wide enough to keep the longer headline on two lines instead of orphaning "gates". */
  max-width: 820px;
}

.install-hero h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.045em;
}

.install-hero h1 em {
  /* inline-block so the margin applies: at line-height .98 the descenders of the line above
     ("supply security fencing and gates") were touching this one. */
  display: inline-block;
  margin-top: .16em;
  color: var(--accent);
  font-style: normal;
  font-weight: 450;
}

.install-hero__content > p {
  max-width: 620px;
  margin: 1.35rem 0 0;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  line-height: 1.6;
}

.install-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.9rem;
}

.install-hero__actions .btn {
  min-height: 3.2rem;
  padding-right: 1.3rem;
  padding-left: 1.3rem;
  font-size: .94rem;
}

.install-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin: 1.6rem 0 0;
  padding: 0;
  color: rgba(255, 255, 255, .8);
  font-size: .87rem;
  font-weight: 600;
  list-style: none;
}

.install-hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
}

.install-hero__proof .bi {
  color: var(--accent);
  font-size: 1rem;
}

/* --- what we install --- */
.install-what__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
}

.install-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.install-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.install-card__body {
  padding: 1.15rem 1.25rem 1.35rem;
}

.install-card h3 {
  margin: 0 0 .45rem;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 700;
}

.install-card p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
}

/* --- process --- */
.install-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.install-steps li {
  padding: 1.5rem 1.4rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.install-steps__number {
  display: block;
  margin-bottom: .7rem;
  color: var(--accent);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.install-steps h3 {
  margin: 0 0 .5rem;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 700;
}

.install-steps p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
}

/* --- gallery --- */
.install-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.install-gallery__item {
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* Feature tile: 2x2 on the 4-column grid, so 13 photos fill it exactly instead of
   leaving one stranded. Only applied where the grid is 4 wide. */
@media (min-width: 1200px) {
  .install-gallery__item--feature {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
  }

  .install-gallery__item--feature img {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
  }

  .install-gallery__item--feature figcaption {
    font-size: .88rem;
  }
}

.install-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}

.install-gallery__item:hover img,
.install-gallery__item:focus-within img {
  transform: scale(1.04);
}

.install-gallery__item figcaption {
  padding: .7rem .9rem .85rem;
  color: var(--muted);
  font-size: .81rem;
  line-height: 1.4;
}

/* --- what the price includes --- */
.install-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.install-detail h2 {
  margin: .35rem 0 1rem;
}

.install-detail > .container > div > p {
  color: var(--muted);
  line-height: 1.65;
}

.install-detail__list {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.install-detail__list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem 0;
  color: var(--ink);
  font-size: .95rem;
  border-top: 1px solid var(--line);
}

.install-detail__list li:first-child {
  border-top: 0;
}

.install-detail__list .bi {
  margin-top: .12rem;
  color: var(--brand);
  font-size: 1.05rem;
}

.install-detail__aside {
  padding: 1.6rem 1.6rem 1.5rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.install-detail__aside h3 {
  margin: 0 0 .6rem;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
}

.install-detail__aside p {
  margin: 0 0 .9rem;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.install-detail__aside ul {
  margin: 0 0 1.3rem;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: .89rem;
  line-height: 1.7;
}

.install-detail__note {
  margin: .9rem 0 0 !important;
  font-size: .85rem !important;
}

.install-detail__note .bi {
  color: var(--accent);
}

/* --- closing call to action --- */
.install-cta {
  color: #ffffff;
  background: var(--brand-dark);
}

.install-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}

.install-cta h2 {
  max-width: 620px;
  margin: .35rem 0 .8rem;
  color: #ffffff;
}

.install-cta p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  line-height: 1.6;
}

.install-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

@media (max-width: 1199.98px) {
  .install-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .install-what__grid,
  .install-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .install-detail__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .install-hero {
    min-height: 460px;
  }
}

@media (max-width: 767px) {
  .install-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .install-hero__inner {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (max-width: 575px) {
  .install-what__grid,
  .install-steps,
  .install-gallery {
    grid-template-columns: 1fr;
  }

  .install-cta__actions .btn {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ admin shell
   Shared by every /admin page via _AdminNav.cshtml. Keeps the shop's palette but a
   denser, tool-like rhythm. */

.admin-page {
  padding-top: 1.5rem;
}

/* --- shell: navigation rail beside the page --- */
.admin-shell {
  display: grid;
  grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
  align-items: start;
  gap: 1.75rem;
  width: min(100%, 96rem);
  margin: 0 auto;
  padding: 0 max(1rem, env(safe-area-inset-left));
}

.admin-shell__rail {
  position: sticky;
  top: 1rem;
  align-self: start;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.admin-rail__head {
  padding: .95rem 1rem .8rem;
  color: #ffffff;
  background: var(--brand-dark);
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}

.admin-rail__eyebrow {
  display: block;
  color: rgba(255, 255, 255, .62);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.admin-rail__head strong {
  display: block;
  margin-top: .1rem;
  font-size: 1.02rem;
}

.admin-rail__reveal {
  display: none;
}

.admin-rail__body {
  padding: .6rem .55rem .55rem;
}

.admin-rail__exit {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  padding: .6rem .7rem;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  border-top: 1px solid var(--line);
}

.admin-rail__exit:hover,
.admin-rail__exit:focus {
  color: var(--brand);
}

.admin-shell__main {
  min-width: 0;
}

.admin-rail__find {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .1rem .25rem .5rem;
  padding: .35rem .55rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.admin-rail__find .bi {
  color: var(--muted);
  font-size: .8rem;
}

.admin-rail__find input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .1rem 0;
  color: var(--ink);
  font-size: .82rem;
  background: none;
  border: 0;
}

.admin-rail__find input:focus {
  outline: none;
}

.admin-rail__find:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(18, 60, 50, .12);
}

.admin-tree__empty {
  margin: .2rem .6rem .6rem;
  color: var(--muted);
  font-size: .8rem;
}

/* --- the tree itself --- */
.admin-tree__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Every level after the first is indented by a fixed step and carries a guide line, so the
   depth of a branch is readable at a glance rather than inferred from the label. */
.admin-tree__list:not(.admin-tree__list--root) {
  margin-left: 1.15rem;
  padding-left: .35rem;
  border-left: 1px solid var(--line);
}

.admin-tree__row {
  display: flex;
  align-items: center;
  gap: .1rem;
  border-radius: 6px;
}

.admin-tree__row:hover {
  background: var(--surface-alt);
}

.admin-tree__row.is-current {
  background: rgba(36, 92, 70, .1);
}

.admin-tree__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.9rem;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 4px;
}

.admin-tree__toggle .bi {
  font-size: .72rem;
  transition: transform .15s ease;
}

.admin-tree__toggle:hover {
  color: var(--ink);
}

.admin-tree__item.is-collapsed > .admin-tree__row > .admin-tree__toggle .bi {
  transform: rotate(-90deg);
}

.admin-tree__link {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: .38rem .5rem .38rem .15rem;
  color: var(--ink);
  font-size: .85rem;
  line-height: 1.3;
  text-decoration: none;
}

.admin-tree__link:hover,
.admin-tree__link:focus {
  color: var(--brand);
}

.admin-tree__icon {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .85rem;
}

/* Bootstrap Icons has shopping bags, but no material sack. */
.bi.admin-icon-sack::before {
    content: "";
    width: 0.95em;
    height: 1em;
    background: currentColor;
    clip-path: polygon(
        35% 0,
        65% 0,
        61% 13%,
        72% 22%,
        68% 31%,
        84% 48%,
        94% 75%,
        89% 91%,
        73% 100%,
        27% 100%,
        11% 91%,
        6% 75%,
        16% 48%,
        32% 31%,
        28% 22%,
        39% 13%
    );
}

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

.admin-tree__count {
  flex: 0 0 auto;
  padding: .05rem .4rem;
  color: var(--muted);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: var(--surface-alt);
  border-radius: 999px;
}

.admin-tree__hint {
  margin: -.15rem 0 .35rem 2rem;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}

/* A range heading is the anchor for a whole branch, so it reads heavier than its children. */
.admin-tree__item--range > .admin-tree__row > .admin-tree__link {
  font-size: .89rem;
  font-weight: 700;
}

.admin-tree__item--range > .admin-tree__row > .admin-tree__link .admin-tree__icon {
  color: var(--brand);
}

.admin-tree__item--range + .admin-tree__item--range,
.admin-tree__item--page + .admin-tree__item--range,
.admin-tree__item--range + .admin-tree__item--page {
  margin-top: .1rem;
}

/* Prices are what staff come here for: the pricing editors are marked out from the listings. */
.admin-tree__item--pricing > .admin-tree__row > .admin-tree__link {
  color: var(--brand-dark);
  font-weight: 700;
}

.admin-tree__item--pricing > .admin-tree__row > .admin-tree__link .admin-tree__icon {
  color: var(--gold);
}

.admin-tree__item--page > .admin-tree__row > .admin-tree__link {
  font-weight: 700;
}

.admin-tree__row.is-current > .admin-tree__link,
.admin-tree__row.is-current > .admin-tree__link .admin-tree__icon {
  color: var(--brand-dark);
  font-weight: 800;
}

.admin-tree__row.is-current > .admin-tree__link .admin-tree__count {
  color: #ffffff;
  background: var(--brand);
}

/* --- breadcrumb above the page --- */
.admin-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-bottom: .9rem;
  color: var(--muted);
  font-size: .78rem;
}

.admin-crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.admin-crumbs a:hover,
.admin-crumbs a:focus {
  color: var(--brand);
  text-decoration: underline;
}

.admin-crumbs strong {
  color: var(--ink);
}

.admin-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.admin-page-header h1 {
  margin: .1rem 0 .4rem;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.1;
}

.admin-page-header p {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.55;
}

.admin-eyebrow {
  display: block;
  color: var(--brand);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.admin-actions--tight {
  margin: 0;
  gap: .5rem;
}

/* --- needs attention --- */
.admin-attention {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .4rem;
}

.admin-attention li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .9rem;
  font-size: .9rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-md);
}

.admin-attention li.is-warning {
  background: #fdf6ec;
  border-color: #f0dcc0;
  border-left-color: var(--accent);
}

.admin-attention li .bi {
  color: var(--muted);
}

.admin-attention li.is-warning .bi {
  color: var(--accent);
}

.admin-attention a {
  color: var(--ink);
  font-weight: 600;
}

.admin-attention--clear {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .9rem;
  color: var(--muted);
  font-size: .9rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.admin-attention--clear .bi {
  color: var(--brand);
}

/* --- dashboard split --- */
.admin-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin-top: 2rem;
}

/* Without this the recent-orders table's min-content width pushes both columns wider than the
   phone screen, and the catalogue breakdown beside it loses its numbers off the right edge. */
.admin-split > * {
  min-width: 0;
}

.admin-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}

.admin-section-heading h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.admin-section-heading a {
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

.admin-breakdown {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-breakdown li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem;
  font-size: .88rem;
  background: #ffffff;
  border-top: 1px solid var(--line);
}

.admin-breakdown li:first-child {
  border-top: 0;
}

.admin-breakdown li span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* --- pricing hub cards --- */
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.admin-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color .2s ease, transform .2s ease;
}

.admin-card:hover,
.admin-card:focus {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.admin-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  color: #ffffff;
  background: var(--brand);
  border-radius: 50%;
  font-size: 1.1rem;
}

.admin-card__body {
  display: block;
  min-width: 0;
}

.admin-card__body strong {
  display: block;
  margin-bottom: .3rem;
  font-size: 1.02rem;
}

.admin-card__body span {
  display: block;
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.5;
}

.admin-card__body em {
  display: block;
  margin-top: .5rem;
  color: var(--brand);
  font-size: .78rem;
  font-style: normal;
  font-weight: 700;
}

.admin-card__go {
  margin-left: auto;
  align-self: center;
  color: var(--muted);
}

/* --- notes and figures --- */
.admin-note {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-top: 1.5rem;
  padding: .9rem 1.1rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.admin-note .bi {
  margin-top: .1rem;
  color: var(--brand);
}

.admin-note strong {
  color: var(--ink);
}

.admin-figure {
  margin: 0;
}

.admin-figure dt {
  color: var(--muted);
  font-size: .82rem;
}

.admin-figure dd {
  margin: 0 0 .8rem;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-pricing__hint {
  margin: -.2rem 0 .6rem;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}

.admin-pricing__legend {
  margin: 0 0 .8rem;
  font-size: .95rem;
  font-weight: 700;
}

.admin-pricing__group--accent {
  background: var(--surface-alt);
}

/* Long labels ("V mesh clip & security bolt") squash to one word per line in the narrow
   label column, so a wide field stacks its label above the input instead. */
.admin-pricing__field--wide {
  grid-column: 1 / -1;
  display: block;
}

.admin-pricing__field--wide > span {
  display: block;
  margin-bottom: .3rem;
}

.admin-pricing__field--wide .form-control {
  width: 100%;
}

/* The footer CTA is hidden on admin pages; keep the rest of the footer tidy without it. */
.site-footer__cta[hidden] {
  display: none;
}

.admin-pricing__grid--narrow {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

@media (max-width: 991.98px) {
  .admin-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575px) {
  

  

  

  

  

  

  .admin-section-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-page-header {
    flex-direction: column;
  }
}

/* --- dashboard shortcuts to each pricing screen --- */
.admin-jump__heading {
  margin: 0 0 .6rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-jump {
  display: grid;
  /* Six shortcuts: two balanced rows of three on a desktop, rather than five and an orphan. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: .7rem;
  margin-bottom: 1.5rem;
}

.admin-jump a {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: .1rem;
  padding: .85rem .95rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-md);
  transition: border-color .15s ease, transform .15s ease;
}

.admin-jump a:hover,
.admin-jump a:focus {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.admin-jump .bi {
  color: var(--brand);
  font-size: 1.15rem;
}

.admin-jump span {
  font-size: .95rem;
  font-weight: 700;
}

.admin-jump small {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.admin-jump__accent {
  border-top-color: var(--accent);
  background: var(--accent-pale);
}

.admin-jump__accent .bi {
  color: var(--accent-dark);
}

.admin-card--accent {
  border-color: var(--accent);
  background: var(--accent-pale);
}

.admin-card--accent .admin-card__icon {
  background: var(--accent-dark);
}

.admin-card--accent .admin-card__body em {
  color: var(--accent-dark);
}

/* --- percentage price change --- */
.admin-percent__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.admin-percent__grid > .admin-panel {
  display: flex;
  flex-direction: column;
}

.admin-percent .admin-panel h2 {
  margin: 0 0 .9rem;
  font-size: 1rem;
}

.admin-hint {
  margin: .4rem 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}

.admin-percent__direction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-bottom: 1rem;
}

.admin-percent__choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-percent__choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem .5rem;
  color: var(--muted);
  font-size: .87rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.admin-percent__choice input:checked + span {
  color: var(--brand-dark);
  background: #eef7f0;
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.admin-percent__choice input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.admin-percent__input {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.admin-percent__input .form-control {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.admin-percent__input span {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--muted);
}

.admin-percent__amount {
  margin-bottom: 1rem;
}

.admin-percent__examples {
  display: grid;
  gap: .3rem;
  margin: .3rem 0 0;
  padding: .6rem .7rem;
  list-style: none;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}

.admin-percent__examples li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}

.admin-percent__examples span {
  color: var(--muted);
}

.admin-percent__examples .bi {
  color: var(--muted);
  font-size: .7rem;
}

.admin-percent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.25rem;
}

.admin-preview {
  margin-top: 1.75rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 2px solid var(--brand);
  border-radius: var(--radius-md);
}

.admin-preview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.admin-preview__head h2 {
  margin: .15rem 0 0;
  font-size: 1.3rem;
}

.admin-preview__badge {
  padding: .3rem .8rem;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--brand);
  border-radius: 999px;
}

.admin-preview__badge.is-down {
  background: var(--accent);
}

.admin-preview__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .8rem;
  margin: 1.1rem 0 1.25rem;
  padding: 0;
}

.admin-preview__figures > div {
  padding: .7rem .8rem;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}

.admin-preview__figures dt {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.admin-preview__figures dd {
  margin: .25rem 0 0;
  font-size: 1.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.admin-preview__figures dd small {
  display: block;
  margin-top: .1rem;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 600;
}

.admin-preview__figures dd.is-up {
  color: var(--brand);
}

.admin-preview__figures dd.is-down {
  color: var(--accent);
}

.admin-preview__rounding {
  font-size: .95rem !important;
  font-weight: 700 !important;
}

.admin-preview h3 {
  margin: 0 0 .6rem;
  font-size: .95rem;
}

.admin-preview__apply {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.admin-preview__apply p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.admin-recent {
  margin-top: 2rem;
}

.admin-delta {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.admin-delta.is-up {
  color: var(--brand);
}

.admin-delta.is-down {
  color: var(--accent);
}

.admin-batch-note {
  display: block;
  color: var(--muted);
  font-style: italic;
}

.admin-pill {
  display: inline-block;
  padding: .15rem .55rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

tr.is-reverted {
  color: var(--muted);
}

tr.is-reverted td {
  text-decoration: line-through;
  text-decoration-color: rgba(104, 112, 109, .5);
}

tr.is-reverted td.admin-table__actions {
  text-decoration: none;
}

.admin-table--compact th,
.admin-table--compact td {
  padding-block: .45rem;
  font-size: .85rem;
}

.admin-table--compact small {
  display: block;
  color: var(--muted);
  font-size: .74rem;
}

/* Bootstrap's own disabled colour shows through the brand override, which reads as a
   different (blue) button rather than an inactive one. */
.admin-page .btn-primary:disabled,
.admin-page .btn-primary.disabled {
  color: var(--muted);
  background: var(--surface-alt);
  border-color: var(--line);
  opacity: 1;
  transform: none;
  box-shadow: none;
}

/* SKUs are read constantly in these tables; Bootstrap's pink code colour fights the page. */
.admin-table code {
  color: var(--ink-soft);
  font-size: .8rem;
}

.admin-nowrap {
  white-space: nowrap;
}

.admin-form__fields > .admin-panel {
  margin-bottom: 1rem;
}

.admin-form__fields legend,
.admin-form__side h2 {
  margin: 0 0 .7rem;
  font-size: 1rem;
  font-weight: 700;
}

.admin-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: 1.25rem;
}

/* Deleting is separated from saving so it cannot be hit by accident. */
.admin-form__delete {
  margin-left: auto;
}

/* --- how to write a description, shown under the full description box --- */
.admin-writing-help {
  margin-top: .6rem;
  padding: .8rem .95rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.admin-writing-help strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--ink);
}

.admin-writing-help ul {
  margin: 0 0 .5rem;
  padding-left: 1.1rem;
}

.admin-writing-help p {
  margin: 0 0 .35rem;
}

.admin-writing-help code {
  padding: .05rem .3rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: .82rem;
}

.admin-writing-help pre {
  margin: 0;
  padding: .7rem .8rem;
  color: var(--ink-soft);
  font-size: .8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* --- structured listing details (gates, railings, barriers) --- */
.admin-structured legend {
  margin: 0 0 .3rem;
  font-size: 1rem;
  font-weight: 700;
}

.admin-structured__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin: .5rem 0 0;
  padding: .7rem .9rem;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}

.admin-structured__title span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.admin-structured__title strong {
  font-size: .98rem;
}

/* --- editing prices straight in a listing --- */
.admin-pricebar {
  position: sticky;
  bottom: .75rem;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-top: .75rem;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 -6px 18px rgba(29, 31, 31, .07);
}

.admin-pricebar strong {
  font-size: .88rem;
}

.admin-pricebar p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
}

.admin-pricebar__count {
  margin-left: auto;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}

.admin-price-input {
  display: flex;
  align-items: center;
  gap: .25rem;
  width: 7.5rem;
}

/* Gate and barrier listings carry four extra columns, so the fixed-content ones must not wrap. */
.admin-table code,
.admin-table .admin-nowrap,
.admin-table__stock {
  white-space: nowrap;
}

.admin-price-input span {
  color: var(--muted);
  font-size: .85rem;
}

.admin-price-input input {
  padding: .3rem .45rem;
  font-size: .87rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

tr.is-changed .admin-price-input input {
  border-color: var(--brand);
  background: #f2f9f4;
  box-shadow: inset 0 0 0 1px var(--brand);
}

tr.is-changed td:first-child {
  box-shadow: inset 3px 0 0 var(--brand);
}

@media (max-width: 1099.98px) {
  .admin-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .admin-shell__rail {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .admin-rail__head {
    display: none;
  }

  .admin-shell__rail.is-collapsible .admin-rail__body {
    display: none;
  }

  .admin-shell__rail.is-collapsible.is-open .admin-rail__body {
    display: block;
  }

  .admin-rail__reveal {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .75rem .9rem;
    color: var(--ink);
    font-weight: 700;
    text-align: left;
    background: none;
    border: 0;
  }

  .admin-rail__reveal em {
    margin-left: auto;
    color: var(--muted);
    font-size: .82rem;
    font-style: normal;
    font-weight: 600;
  }

  .admin-rail__reveal .bi {
    font-size: 1.15rem;
  }
}

/* ------------------------------------------------------------------ enquiry forms
   Two forms (supply / installation) sharing one view. See Views/Home/Contact.cshtml. */

.enquiry-page {
  padding-top: 1.1rem;
}

.enquiry-intro {
  max-width: 760px;
  margin: 1.2rem 0 1.6rem;
}

.enquiry-intro h1 {
  margin: .25rem 0 .6rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.08;
}

.enquiry-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.enquiry-sent {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin: 1.2rem 0 0;
  padding: 1rem 1.2rem;
  background: #eef7f0;
  border: 1px solid #c6e2cd;
  border-radius: var(--radius-md);
}

.enquiry-sent .bi {
  margin-top: .15rem;
  color: #1d7a3f;
  font-size: 1.2rem;
}

.enquiry-sent strong {
  display: block;
  margin-bottom: .15rem;
}

.enquiry-sent span {
  color: var(--muted);
  font-size: .9rem;
}

/* --- the two-way switch --- */
.enquiry-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1.8rem;
}

.enquiry-switch a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.1rem;
  color: var(--ink);
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color .2s ease, background .2s ease;
}

.enquiry-switch a:hover,
.enquiry-switch a:focus {
  border-color: var(--brand);
}

.enquiry-switch a.active {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
}

.enquiry-switch .bi {
  flex: 0 0 auto;
  font-size: 1.3rem;
  color: var(--brand);
}

.enquiry-switch a.active .bi {
  color: var(--accent);
}

.enquiry-switch span {
  display: block;
  min-width: 0;
}

.enquiry-switch strong {
  display: block;
  font-size: .98rem;
}

.enquiry-switch small {
  display: block;
  color: var(--muted);
  font-size: .8rem;
}

.enquiry-switch a.active small {
  color: rgba(255, 255, 255, .78);
}

/* --- layout --- */
.enquiry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
}

.enquiry-group {
  margin: 0 0 1.6rem;
  padding: 1.3rem 1.4rem 1.5rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.enquiry-group legend {
  display: flex;
  align-items: center;
  gap: .6rem;
  float: left;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.enquiry-group legend + * {
  clear: both;
}

.enquiry-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  color: #ffffff;
  background: var(--brand);
  border-radius: 50%;
  font-size: .82rem;
  font-weight: 800;
}

.enquiry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.enquiry-field {
  display: block;
  min-width: 0;
}

#enquiry-ral-field[hidden] {
  display: none;
}

.enquiry-field--full {
  display: block;
  margin-top: 1rem;
}

.enquiry-field > span {
  display: block;
  margin-bottom: .3rem;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 600;
}

.enquiry-field em {
  color: var(--accent);
  font-style: normal;
}

.enquiry-field .form-control,
.enquiry-field .form-select {
  width: 100%;
}

.enquiry-hint {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}

.enquiry-error {
  display: block;
  margin-top: .25rem;
  color: #b3261e;
  font-size: .8rem;
}

.enquiry-error:empty {
  display: none;
}

.enquiry-summary.validation-summary-valid,
.enquiry-summary:empty {
  display: none;
}

/* Keep the Tag Helper's empty list from taking space before validation runs. */
.enquiry-summary ul:empty {
  display: none;
}

.enquiry-summary ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* Shown in the builder summary when a custom RAL colour turns the run into a quotation. */
.pal-summary__quote {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0 0 .8rem;
  padding: .7rem .85rem;
  color: #6b4a12;
  font-size: .82rem;
  line-height: 1.5;
  background: #fdf6ec;
  border: 1px solid #f0dcc0;
  border-radius: var(--radius-md);
}

.pal-summary__quote .bi {
  margin-top: .1rem;
  color: var(--accent);
}

.pal-summary__quote[hidden] {
  display: none;
}

.enquiry-required-note {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .8rem;
}

.enquiry-required-note em {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}

.form-select.is-invalid,
.form-control.is-invalid {
  border-color: #b3261e;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.enquiry-website {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.enquiry-actions p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

/* --- dropzone --- */
.dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.8rem 1.2rem;
  text-align: center;
  background: var(--surface-alt);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.dropzone:hover,
.dropzone:focus-within {
  border-color: var(--brand);
  background: #eef3ef;
}

.dropzone.is-dragging {
  border-color: var(--accent);
  background: #fdf3ea;
}

.dropzone.has-files {
  padding: 1.1rem;
}

/* The real input still posts the files; it just must not swallow the clicks. */
.dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dropzone__prompt .bi {
  display: block;
  margin-bottom: .4rem;
  color: var(--brand);
  font-size: 1.6rem;
}

.dropzone__prompt strong {
  display: block;
  font-size: .98rem;
}

.dropzone__prompt span {
  color: var(--muted);
  font-size: .86rem;
}

.dropzone__browse {
  /* Padded to a 30px+ target. The whole dropzone is clickable too, but this is the bit
     that looks like a control, so it should be big enough to hit on its own. */
  padding: .3rem .2rem;
  color: var(--brand);
  font: inherit;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

.dropzone__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .6rem;
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
}

.dropzone__item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .45rem .55rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.dropzone__thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: .4rem;
  background: var(--surface-alt);
}

.dropzone__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dropzone__meta {
  min-width: 0;
  flex: 1 1 auto;
}

.dropzone__meta strong {
  display: block;
  overflow: hidden;
  font-size: .82rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropzone__meta small {
  color: var(--muted);
  font-size: .75rem;
}

.dropzone__remove {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}

.dropzone__remove:hover,
.dropzone__remove:focus {
  color: #b3261e;
  border-color: #e5b4b0;
}

.dropzone__summary {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .78rem;
}

.dropzone__error {
  margin: .55rem 0 0;
  color: #b3261e;
  font-size: .82rem;
}

/* --- aside --- */
.enquiry-aside {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 1.5rem;
}

.enquiry-card {
  padding: 1.15rem 1.25rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.enquiry-card--muted {
  background: var(--surface-alt);
}

.enquiry-card h2 {
  margin: 0 0 .6rem;
  font-size: 1rem;
  font-weight: 700;
}

.enquiry-card p {
  margin: 0 0 .6rem;
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.55;
}

.enquiry-card p:last-child {
  margin-bottom: 0;
}

.enquiry-phone {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .5rem;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 800;
  text-decoration: none;
}

.enquiry-phone .bi {
  color: var(--accent);
  font-size: 1rem;
}

.enquiry-steps {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.65;
}

@media (max-width: 991.98px) {
  .enquiry-layout {
    grid-template-columns: 1fr;
  }

  .enquiry-aside {
    position: static;
  }
}

@media (max-width: 575px) {
  .enquiry-switch {
    grid-template-columns: 1fr;
  }

  .enquiry-group {
    padding: 1.1rem 1rem 1.2rem;
  }
}

/* ------------------------------------------------------------------ catalogue discovery
   Active-search context and numbered pagination. */

.catalog-page-heading h1 span {
  color: var(--brand-bright);
}

.catalog-search-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  color: var(--ink-soft);
  background: var(--accent-pale);
  border: 1px solid #f2d2bd;
  border-radius: var(--radius-sm);
  font-size: .84rem;
}

.catalog-search-context > span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

.catalog-search-context .bi {
  color: var(--accent-dark);
}

.catalog-search-context a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
  color: var(--brand);
  font-weight: 750;
  text-decoration: none;
}

.catalog-search-context a:hover,
.catalog-search-context a:focus-visible {
  color: var(--accent-dark);
  text-decoration: underline;
}

.catalog-empty {
  display: grid;
  justify-items: center;
  padding: clamp(2rem, 7vw, 4.5rem) 1.25rem;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.catalog-empty > .bi {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  margin-bottom: .9rem;
  color: var(--brand);
  background: var(--surface-alt);
  border-radius: 50%;
  font-size: 1.3rem;
}

.catalog-empty h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
}

.catalog-empty p {
  max-width: 620px;
  margin: .65rem 0 1.25rem;
  color: var(--muted);
}

.catalog-empty__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .65rem 1rem;
}

.catalog-pagination {
  margin-top: 2rem;
}

.catalog-pagination ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-pagination a,
.catalog-pagination li > span {
  min-width: 2.55rem;
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .65rem;
  color: var(--ink-soft);
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
}

.catalog-pagination a:hover,
.catalog-pagination a:focus-visible {
  color: var(--brand);
  background: #f4f8f6;
  border-color: var(--brand-bright);
}

.catalog-pagination li > .is-current {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
}

.catalog-pagination .catalog-pagination__direction {
  gap: .35rem;
  min-width: 6.25rem;
}

.catalog-pagination .catalog-pagination__direction.is-disabled {
  color: #99a29f;
  background: var(--surface-alt);
  border-color: var(--line);
}

.catalog-pagination li > .catalog-pagination__ellipsis {
  min-width: 1.25rem;
  padding-right: 0;
  padding-left: 0;
  background: transparent;
  border-color: transparent;
}

@media (max-width: 767px) {
  .catalog-search-context {
    align-items: flex-start;
  }
}

@media (max-width: 575px) {
  .catalog-search-context {
    flex-direction: column;
    gap: .45rem;
  }

  .catalog-empty__actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-empty__actions .btn {
    width: 100%;
  }

  .catalog-empty__actions .text-link {
    justify-content: center;
    padding: .5rem;
  }

  .catalog-pagination ul {
    gap: .25rem;
  }

  .catalog-pagination a,
  .catalog-pagination li > span {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: .3rem;
  }

  .catalog-pagination .catalog-pagination__direction {
    min-width: 2.25rem;
  }

  .catalog-pagination__direction > span {
    display: none;
  }
}

/* Basket availability and checkout readiness */
.cart-page-heading {
  max-width: 720px;
  margin-bottom: 1.5rem;
}

.cart-page-heading h1 {
  margin: .2rem 0 .45rem;
}

.cart-page-heading p {
  margin: 0;
  color: var(--muted);
}

.cart-line--unavailable {
  background: #fff8f2;
  border-color: #e8b58f;
}

.cart-line--builder {
  grid-template-columns: minmax(0, 1fr) 170px 100px auto;
  border-left: 4px solid var(--accent);
  background: #fbfdfc;
}

.cart-line__run-label {
  color: var(--accent-dark);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cart-line__run-config {
  display: grid;
  gap: .15rem;
}

.cart-line__run-config strong {
  color: var(--ink);
  line-height: 1.4;
}

.cart-line__run-config span,
.cart-line__run-note {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}

.cart-line__run-components {
  display: grid;
  gap: .2rem;
  margin: .2rem 0 0;
  padding-left: 1.15rem;
  color: var(--ink-soft);
  font-size: .84rem;
  line-height: 1.4;
}

.cart-line__builder-lines {
  display: grid;
  gap: .2rem;
  margin: .35rem 0 0;
  padding: .7rem 0 0 1.15rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .84rem;
  line-height: 1.4;
}

.cart-line__builder-actions {
  display: grid;
  align-content: center;
}

.cart-line__builder-actions .btn {
  white-space: nowrap;
}

.cart-line__quantity-label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cart-line__quantity a {
  font-size: .8rem;
  font-weight: 800;
}

.cart-line__availability {
  display: inline-flex;
  align-items: flex-start;
  gap: .4rem;
  margin-top: .25rem;
  color: #8b3a18;
  font-size: .8rem;
  font-weight: 750;
}

.cart-line__quantity--unavailable {
  color: #8b3a18;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cart-delivery-progress {
  height: .42rem;
  margin: -.35rem 0 1.1rem;
  overflow: hidden;
  background: #dce5e1;
  border-radius: 999px;
}

.cart-delivery-progress > span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: linear-gradient(90deg, var(--brand-bright), var(--accent));
  border-radius: inherit;
  transition: width .25s ease;
}

.cart-summary__attention {
  margin: .65rem 0 0;
  color: #8b3a18;
  font-size: .78rem;
  text-align: center;
}

.cart-checkout-unavailable {
  display: flex;
  gap: .75rem;
  margin-top: .9rem;
  padding: .9rem;
  color: var(--ink);
  background: #f3f7f4;
  border: 1px solid #bdd3c7;
  border-radius: var(--radius-sm);
}

.cart-checkout-unavailable > i {
  color: var(--brand);
  font-size: 1.25rem;
}

.cart-checkout-unavailable strong,
.cart-checkout-unavailable span {
  display: block;
}

.cart-checkout-unavailable span {
  margin-top: .2rem;
  color: var(--ink-soft);
  font-size: .84rem;
  line-height: 1.45;
}

.cart-checkout-unavailable__actions {
  display: grid;
  gap: .55rem;
  margin-top: .7rem;
}

/* Product enquiry fallback */
.product-detail__enquiry {
  margin-top: 1rem;
  padding: 1.25rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
}

.purchase-panel__payments {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  align-items: center;
  align-self: flex-start;
  gap: .65rem;
  padding: .65rem .8rem;
  color: var(--ink-soft);
  background: #f7f9f8;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.purchase-panel__payments > .bi {
  color: var(--brand);
  font-size: 1.25rem;
}

.purchase-panel__payments span,
.purchase-panel__payments small {
  display: block;
}

.purchase-panel__payments strong {
  font-size: .82rem;
}

.purchase-panel__payments small {
  color: var(--muted);
  font-size: .72rem;
}

.product-detail__enquiry h2 {
  margin: .2rem 0 .45rem;
  font-size: 1.25rem;
}

.product-detail__enquiry p {
  margin: 0 0 1rem;
  color: var(--muted);
}

.product-detail__enquiry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1rem;
}

.product-detail__phone {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--brand);
  font-weight: 800;
  text-decoration: none;
}

.product-detail__phone:hover,
.product-detail__phone:focus-visible {
  color: var(--accent-dark);
  text-decoration: underline;
}

/* Order fulfilment details */
.admin-status-form--locked {
  display: grid;
  align-content: center;
  gap: .25rem;
  color: var(--brand);
  background: #edf6f1;
  border-color: #a8cbbb;
}

.admin-status-form--locked strong {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.admin-status--stockissue {
  color: #8b3a18;
  background: #fff0e5;
  border-color: #e8b58f;
}

.admin-status--disputed,
.admin-status--refunded {
  color: #8b3a18;
  background: #fff0e5;
  border-color: #e8b58f;
}

.admin-delivery {
  display: flex;
  gap: 1rem;
  margin: 1.25rem 0;
  padding: 1.15rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.admin-delivery__icon {
  display: grid;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: #fff;
  background: var(--brand);
  border-radius: 50%;
}

.admin-delivery h2 {
  margin: 0 0 .55rem;
  font-size: 1.1rem;
}

.admin-delivery address {
  margin: .25rem 0;
  color: var(--ink-soft);
  font-style: normal;
}

@media (max-width: 767px) {
  .cart-line {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: .75rem;
  }

  .cart-line__image {
    width: 72px;
    height: 72px;
  }

  .cart-line__quantity,
  .cart-line__builder-actions,
  .cart-line__total,
  .cart-line > form:last-child {
    grid-column: 2;
  }

  .cart-line__quantity {
    justify-self: stretch;
  }

  .cart-line__quantity .form-control {
    min-width: 0;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .cart-line--configured-run {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .cart-line--configured-run .cart-line__body {
    grid-column: 1 / -1;
  }

  .cart-line--configured-run .cart-line__builder-actions {
    grid-column: 1;
    justify-self: start;
  }

  .cart-line--configured-run .cart-line__total {
    grid-column: 2;
  }

  .cart-line--configured-run > form:last-child {
    grid-column: 3;
  }
}

@media (max-width: 575px) {
  .cart-line--builder {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-line--builder .cart-line__image {
    display: none;
  }

  .cart-line--builder .cart-line__body,
  .cart-line--builder .cart-line__quantity,
  .cart-line--builder .cart-line__builder-actions,
  .cart-line--builder .cart-line__total,
  .cart-line--builder > form:last-child {
    grid-column: 1;
  }

  .product-detail__enquiry-actions,
  .product-detail__enquiry-actions .btn {
    width: 100%;
  }

  .product-detail__enquiry-actions .btn {
    justify-content: center;
  }

  .product-lightbox {
    grid-template-columns: minmax(0, 1fr);
    padding: .6rem;
  }

  .product-lightbox__stage {
    grid-column: 1;
  }

  .product-lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 2.75rem;
    height: 3.5rem;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border-radius: 4px;
    transform: translateY(-50%);
  }

  .product-lightbox__nav--prev {
    left: .5rem;
  }

  .product-lightbox__nav--next {
    right: .5rem;
  }
}

/* Friendly HTTP error pages */
.system-message-page {
  display: grid;
  min-height: min(66vh, 42rem);
  align-items: center;
  background:
    radial-gradient(circle at 18% 18%, rgba(232, 126, 39, .12), transparent 32%),
    linear-gradient(145deg, #f6f8f6, #edf3ef);
}

.system-message {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.system-message__code {
  position: absolute;
  top: -.3em;
  right: -.02em;
  z-index: 0;
  color: rgba(18, 60, 50, .055);
  font-size: clamp(8rem, 24vw, 15rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.system-message > *:not(.system-message__code) {
  position: relative;
  z-index: 1;
}

.system-message__icon {
  display: grid;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  place-items: center;
  color: #fff;
  background: var(--brand);
  border-radius: 50%;
  font-size: 1.55rem;
}

.system-message h1 {
  margin: .45rem 0 .75rem;
}

.system-message p {
  max-width: 35rem;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.system-message__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin-top: 1.5rem;
}

.system-message small {
  display: block;
  margin-top: 1.4rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ admin: 4 Sept 2026 additions
   Status filter chips (orders, enquiries), honest listing status, enquiry detail, categories
   editor, and the pricing-bar cancel link restyled as a real secondary button. */
.admin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .6rem;
}

.admin-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  color: #35433f;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  background: #f7f8f5;
  border: 1px solid #d9dfdc;
  border-radius: 999px;
}

.admin-chip span {
  padding: 0 .4rem;
  color: #68736f;
  font-weight: 700;
  background: #ffffff;
  border-radius: 999px;
}

.admin-chip:hover {
  color: #123c32;
  border-color: #123c32;
}

.admin-chip.is-active {
  color: #ffffff;
  background: #123c32;
  border-color: #123c32;
}

.admin-chip.is-active span {
  color: #123c32;
}

.admin-table__status small {
  display: block;
  max-width: 16rem;
  color: #68736f;
  font-size: .72rem;
  line-height: 1.3;
}

.admin-breakdown__label {
  color: #35433f;
}

.admin-table tr.is-new td {
  background: #fff8f2;
}

.admin-status--enquiry-new { color: #c85b14; background: #fff1e7; }
.admin-status--enquiry-inprogress { color: #8a5a13; background: #fdf0d8; }
.admin-status--enquiry-quoted { color: #1d5f8a; background: #e4f0f8; }
.admin-status--enquiry-closed { color: #68736f; background: #f0f2ef; }
.admin-status--dispatched,
.admin-status--collected { color: #1d5f8a; background: #e4f0f8; }
.admin-status--completed { color: #197347; background: #e2f2e9; }

.admin-order-head__controls {
  display: grid;
  gap: .75rem;
  min-width: min(100%, 22rem);
}

.admin-pricebar__cancel {
  margin-left: auto;
}

.admin-enquiry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.admin-enquiry__message,
.admin-enquiry__photos {
  grid-column: 1 / -1;
}

.admin-enquiry__text {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.6;
}

.admin-enquiry__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .75rem;
}

.admin-enquiry__gallery a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #d9dfdc;
  border-radius: .5rem;
  background: #f0f2ef;
}

.admin-enquiry__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-categories tr.is-child td:first-child {
  padding-left: 1.4rem;
}

.admin-categories tr.is-hidden td {
  color: #68736f;
}

.admin-categories__path {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: calc(var(--depth, 0) * 1.1rem);
  font-size: .8rem;
}

.admin-categories__path code {
  color: #68736f;
  font-size: .78rem;
}

.admin-categories__order {
  width: 5.5rem;
  margin-left: auto;
  text-align: right;
}

.admin-settings .admin-panel + .admin-panel {
  margin-top: 1rem;
}

.admin-form__grid-wide {
  grid-column: 1 / -1;
}

.admin-description-help {
  margin: .5rem 0 1rem;
  padding: .8rem 1rem;
  color: #35433f;
  font-size: .85rem;
  background: #f0f2ef;
  border-radius: .5rem;
}

.admin-description-help ul {
  margin: .4rem 0 0;
  padding-left: 1.1rem;
}

.admin-description-help kbd {
  padding: .05rem .35rem;
  font-size: .8rem;
  background: #ffffff;
  border: 1px solid #d9dfdc;
  border-radius: .25rem;
}

/* ------------------------------------------------------------------ customer side: 4 Sept 2026 additions */
/* Amber "to order" badge background to match the amber text above. */
.stock--out { background: #fdf0d8; }
.stock--out i { background: #c9922a; }

/* The global focus ring is dark orange, which vanished on the orange buttons. */
.btn-accent:focus-visible,
.main-nav__contact:focus-visible {
  outline: 3px solid #123c32 !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #ffffff;
}

/* Footer small print was under 4.5:1. */
.site-footer__legal { color: rgba(255, 255, 255, .7); }
.site-footer__payments small { color: rgba(255, 255, 255, .7); }
.site-footer__phone,
.site-footer__hours {
  display: block;
  margin-top: .35rem;
}
.site-footer__phone { font-weight: 700; }
.site-footer__hours { color: rgba(255, 255, 255, .78); font-size: .82rem; }

/* Fixed running total for the builders on small screens. */
.builder-mobile-total {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: none;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  color: #ffffff;
  text-decoration: none;
  background: #0a2922;
  box-shadow: 0 -8px 24px rgba(10, 41, 34, .25);
  transition: transform .2s ease;
}

.builder-mobile-total.is-hidden { transform: translateY(110%); }
.builder-mobile-total__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: .78rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, .8);
}
.builder-mobile-total__value { font-size: 1.15rem; }
.builder-mobile-total__vat { font-size: .65rem; font-weight: 400; white-space: nowrap; }
.builder-mobile-total__cta {
  padding: .35rem .7rem;
  font-size: .8rem;
  font-weight: 700;
  color: #0a2922;
  background: #ed7829;
  border-radius: 999px;
}

@media (max-width: 991.98px) {
  .builder-mobile-total { display: flex; }
  body.has-builder-mobile-total { padding-bottom: 4.5rem; }
}

@media print {
  .site-header, .site-footer, .skip-link, .builder-mobile-total, .admin-shell__rail,
  .main-nav__actions, .product-detail__actions, .btn, form.cart-delivery-form, .site-footer__cta {
    display: none !important;
  }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .section { padding: 0 !important; }
  .pal-summary { position: static !important; box-shadow: none !important; }
}

/* Listing actions (4 September 2026): icon-only edit / clone / delete buttons, and the strip of
   the original's photographs on the clone form. */
.admin-table__actions {
  white-space: nowrap;
}

.admin-table__actions .btn + .btn {
  margin-left: .3rem;
}

.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.btn-icon .bi {
  line-height: 1;
}

.admin-clone-photos {
  margin: 1rem 0;
  padding: .8rem;
  background: #f7f8f5;
  border: 1px solid #d9dfdc;
  border-radius: .5rem;
}

.admin-clone-photos__strip {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .6rem 0 .4rem;
}

.admin-clone-photos__strip img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  padding: .2rem;
  background: #ffffff;
  border: 1px solid #d9dfdc;
  border-radius: .35rem;
}

/* Builder-priced listings (5 September 2026): fixed price text with a link to the rate page,
   and a greyed bin that explains why it cannot delete. */
.admin-price-fixed {
  display: inline-grid;
  gap: .1rem;
  line-height: 1.25;
}

.admin-price-fixed strong {
  font-size: .95rem;
}

.admin-price-fixed a {
  color: #68736f;
  font-size: .72rem;
  text-decoration: underline;
}

.admin-price-fixed a:hover {
  color: #123c32;
}

.btn-icon.is-disabled {
  color: #c5cfca;
  border-color: #e3e8e5;
  background: #f7f8f5;
  cursor: not-allowed;
  pointer-events: auto;
}

.admin-form__actions .admin-hint.admin-form__delete {
  max-width: 24rem;
  margin: 0 0 0 auto;
  text-align: right;
}

/* Product enquiry (5 September 2026): the item the customer asked about, shown on the form
   in place of the fence-type questions. */
.enquiry-product {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: .9rem;
  background: #f7f8f5;
  border: 1px solid #d9dfdc;
  border-radius: .6rem;
}

.enquiry-product__image {
  flex: 0 0 120px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #d9dfdc;
  border-radius: .45rem;
}

.enquiry-product__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .25rem;
}

.enquiry-product__body {
  display: grid;
  gap: .3rem;
  min-width: 0;
}

.enquiry-product__body strong {
  font-size: 1.05rem;
  line-height: 1.3;
}

.enquiry-product__details {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #68736f;
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .9rem;
}

.enquiry-product__price {
  font-weight: 700;
  color: #123c32;
}

@media (max-width: 575.98px) {
  .enquiry-product { flex-direction: column; }
  .enquiry-product__image { flex-basis: auto; width: 100%; max-width: 220px; }
}

/* Local development copy banner (6 September 2026). Never rendered on the live site. */
.local-copy-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .25rem .6rem;
  padding: .4rem 1rem;
  background: #fff3cd;
  color: #5c3d00;
  border-bottom: 1px solid #e6c866;
  font-size: .82rem;
  line-height: 1.35;
  text-align: center;
}

.local-copy-bar a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

@media print {
  .local-copy-bar { display: none; }
}

/* Gate range filters share the existing responsive listing toolbar. */
.catalog-gate-filter { display: flex; align-items: center; gap: .45rem; font-size: .85rem; }
/* Keep the labels available to assistive technology without repeating them visually. */
.catalog-gate-filter > span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.catalog-gate-filter select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23465059' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 12px 8px;
}
.catalog-gate-clear { display: none; }
@media (max-width: 575px) {
  .catalog-gate-filter { flex: 1 1 140px; flex-direction: column; align-items: stretch; gap: .25rem; }
  .catalog-gate-filter select { width: 100%; min-height: 44px; }
}

/* Brochure downloads beside the phone number in the top utility bar. */
.utility-nav__brochures > .nav-link {
  border: 0;
  background: transparent;
  font-weight: 600;
  white-space: nowrap;
}
.utility-nav__brochures .brochures-menu {
  width: min(26rem, calc(100vw - 2rem));
  min-width: 0;
  max-height: min(36rem, calc(100dvh - 7rem));
  overflow-y: auto;
  padding: .4rem;
  box-shadow: var(--shadow-sm);
}
.brochures-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .65rem .8rem;
  border-radius: .25rem;
  font-size: .9rem;
  font-weight: 600;
  white-space: normal;
}
.brochures-menu .dropdown-item small {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 400;
}
.brochures-menu .dropdown-item:disabled {
  color: var(--muted);
  opacity: .75;
}
.brochures-menu .dropdown-item:active small {
  color: inherit;
}

.brochures-menu__thumbnail {
  flex: 0 0 52px;
  width: 52px;
  height: 72px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.brochures-menu__thumbnail--fencing {
  object-fit: cover;
}
.utility-nav__service .brochures-menu__text {
  display: block;
  min-width: 0;
}

/* Each pale profile owns its top choices; controls are siblings, never nested buttons. */
.pal-type .pal-profile-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: .25rem .85rem;
  cursor: pointer;
}
.pal-profile-card > .pal-card__thumb {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.pal-profile-card > .pal-card__body {
  display: contents;
}
.pal-profile-card .pal-card__body > strong,
.pal-profile-card .pal-card__body > span {
  grid-column: 1;
}
.pal-profile-card:has(.pal-card__select:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pal-profile-tops:not([hidden]) {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1rem;
  margin-top: .5rem;
}
.pal-profile-tops label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: .2rem 0;
  color: var(--ink);
  font-size: .85rem;
  line-height: 1.3;
  cursor: pointer;
}
.pal-profile-tops input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.pal-profile-tops label:has(input:disabled) {
  opacity: .5;
  cursor: not-allowed;
}

/* Selected options use orange with white labels, descriptions and icons. */
.pal-card.active span,
.pal-card.active .pal-card__icon,
.pal-card.active .pal-card__brochure,
.pal-card.active .pal-profile-tops label {
  color: #ffffff;
}

.pal-card.active .pal-card__thumb {
  border: 1px solid #ffffff;
}

/* A dark focus outline stays distinct against the orange selection. */
.pal-card.active:focus-visible,
.pal-card.active :focus-visible,
.pal-pill.active:focus-visible,
.pal-ral__swatch.active:focus-visible {
  outline: 3px solid var(--brand-dark) !important;
  outline-offset: 3px;
}

.pal-card.active:has(.pal-card__select:focus-visible) {
  outline: 3px solid var(--brand-dark);
  outline-offset: 3px;
}

.pal-card.active .pal-profile-tops input {
  accent-color: var(--brand-dark);
}

/* Delivery is the first builder step, with the same orange pills as fence height. */
.builder-delivery { scroll-margin-top: 6rem; }
.builder-delivery__options { position: relative; }
.builder-delivery__options .pal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  margin: 0;
  cursor: pointer;
}
.builder-delivery__options input:checked + .pal-pill {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 750;
  box-shadow: 0 0 0 2px rgba(237, 120, 41, .25);
}
.builder-delivery__options input:focus-visible + .pal-pill {
  outline: 3px solid var(--brand-dark);
  outline-offset: 3px;
}
.builder-delivery__options input:disabled + .pal-pill { cursor: wait; }
.builder-delivery [data-builder-postcode-fields] { margin-top: 1rem; }
.builder-delivery small, .builder-delivery__status { color: var(--muted); font-size: .88rem; }
.builder-delivery__status { margin: .85rem 0 0; }
.builder-delivery__reminder { margin: .75rem 0 0; font-size: .88rem; }
.builder-postmix-note, .builder-postmix-removed { margin: 1rem 0 .5rem; font-size: .9rem; }
.builder-postmix-removed { color: #8a3a09; font-weight: 600; }
.builder-delivery-change { font-size: .9rem; }
.builder-delivery [hidden] { display: none !important; }

/* Keep gate listings at four cards per desktop row; retain the shared mobile grid. */
@media (min-width: 992px) {
  .product-grid.product-grid--gates {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}