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

.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;
}

.site-nav {
  box-shadow: 0 1px 0 rgba(24, 61, 49, .16);
}

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

.site-nav .navbar-brand,
.site-nav .navbar-brand:hover,
.site-nav .navbar-brand:focus {
  color: #ffe484;
}

.site-nav .navbar-brand .bi {
  color: #ffffff;
}

.site-nav .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .88);
}

.site-nav .navbar-nav .nav-link:hover,
.site-nav .navbar-nav .nav-link:focus,
.site-nav .navbar-nav .nav-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, .12);
}

.site-nav .nav-item:not(:last-child)::after {
  background: rgba(255, 255, 255, .18);
}

: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;
}

.site-nav .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.site-nav .navbar-brand .bi {
  font-size: 1.3rem;
}

.site-nav .nav-link {
  font-size: .9rem;
  font-weight: 500;
  border-radius: 4px;
  padding-right: .9rem;
  padding-left: .9rem;
}

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

.site-nav .nav-item:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 1.5rem;
  margin: 0 .65rem;
  border-radius: 999px;
}

.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__media {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(15, 25, 21, .88), rgba(15, 25, 21, .48), rgba(15, 25, 21, .18)), url("/media/banner.jpg");
  background-position: center;
  background-size: cover;
}

.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;
}

.hero-copy {
  max-width: 620px;
  margin: 1.2rem 0 1.8rem;
  color: rgba(255, 255, 255, .9);
  font-size: 1.18rem;
}

.page-heading {
  padding: .85rem 0;
  color: var(--muted);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}

.page-heading .container {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 1.75rem;
}

.page-heading .eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.page-heading .eyebrow::after {
  content: "/";
  margin-left: .45rem;
  color: #9aa29f;
}

.page-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.3;
  font-weight: 500;
}

.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: -webkit-box;
  min-height: 3.32rem;
  overflow: hidden;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

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

.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;
}

.category-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .85rem;
  margin-bottom: 1.5rem;
}

.category-tile {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  color: #007bff;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .75rem 1rem;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.category-tile span {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
}

.category-tile small {
  color: #007bff;
  font-size: .78rem;
}

.category-tile:hover,
.category-tile:focus,
.category-tile.active {
  color: #0056b3;
  background: #eaf4ff;
  border-color: #007bff;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.category-tile:hover small,
.category-tile:focus small,
.category-tile.active small {
  color: #007bff;
}

.filter-panel {
  display: grid;
  gap: .25rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.filter-panel h2 {
  margin-bottom: .65rem;
}

.category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--ink);
  border-radius: 4px;
  padding: .55rem .6rem;
  text-decoration: none;
}

.category-link--section {
  margin-top: .35rem;
  color: var(--brand-dark);
  font-weight: 700;
}

.category-link--level-1 {
  padding-left: 1rem;
  font-weight: 600;
}

.category-link--level-2 {
  padding-left: 1.45rem;
  font-size: .9rem;
}

.category-link--level-3 {
  padding-left: 1.85rem;
  font-size: .86rem;
}

.category-link small {
  color: var(--muted);
  font-size: .78rem;
}

.category-link:hover,
.category-link:focus,
.category-link.active {
  color: var(--brand-dark);
  background: #eef3f0;
}

.category-link:hover small,
.category-link:focus small,
.category-link.active small {
  color: var(--brand);
}

.category-tree {
  display: grid;
  gap: .1rem;
  margin-top: .3rem;
}

.category-tree__item[hidden] {
  display: none;
}

.category-tree__row {
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  align-items: center;
  gap: .15rem;
}

.category-tree__row--level-1 {
  padding-left: .45rem;
}

.category-tree__row--level-2 {
  padding-left: .9rem;
}

.category-tree__row--level-3 {
  padding-left: 1.35rem;
}

.category-tree__toggle,
.category-tree__toggle-spacer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.7rem;
  flex: 0 0 auto;
}

.category-tree__toggle {
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: .78rem;
}

.category-tree__toggle:hover,
.category-tree__toggle:focus {
  color: var(--brand-dark);
  background: #eef3f0;
}

.category-tree__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: .75rem;
  color: var(--ink);
  border-radius: 4px;
  padding: .48rem .6rem;
  font-size: .92rem;
  text-decoration: none;
}

.category-tree__link span {
  min-width: 0;
}

.category-tree__link small {
  color: var(--muted);
  font-size: .76rem;
}

.category-tree__link--section {
  color: var(--brand-dark);
  font-weight: 700;
}

.category-tree__row--level-1 .category-tree__link {
  font-weight: 600;
}

.category-tree__row--level-2 .category-tree__link {
  font-size: .88rem;
}

.category-tree__row--level-3 .category-tree__link {
  font-size: .84rem;
}

.category-tree__link:hover,
.category-tree__link:focus,
.category-tree__link.active {
  color: var(--brand-dark);
  background: #eef3f0;
}

.category-tree__link:hover small,
.category-tree__link:focus small,
.category-tree__link.active small {
  color: var(--brand);
}

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

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

.catalog-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.catalog-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1rem;
}

.catalog-breadcrumb a,
.catalog-breadcrumb span {
  color: #007bff;
  text-decoration: none;
}

.catalog-breadcrumb a:hover,
.catalog-breadcrumb a:focus {
  color: #0056b3;
  text-decoration: underline;
}

.catalog-breadcrumb .bi {
  color: var(--muted);
  font-size: .68rem;
}

.catalog-top-search {
  position: relative;
  width: min(100%, 340px);
  flex: 0 1 340px;
}

.catalog-top-search input {
  width: 100%;
  min-height: 2rem;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .28rem 2.25rem .28rem .75rem;
  font-size: .82rem;
  outline: none;
}

.catalog-top-search input::placeholder {
  color: var(--muted);
}

.catalog-top-search input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .15rem rgba(214, 167, 67, .18);
}

.catalog-top-search button {
  position: absolute;
  top: 50%;
  right: .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  color: var(--brand-dark);
  background: transparent;
  border: 0;
  border-radius: 4px;
  transform: translateY(-50%);
}

.catalog-top-search button:hover,
.catalog-top-search button:focus {
  background: #edf0ef;
}

.catalog-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 1.25rem;
}

.catalog-heading--search-only {
  display: flex;
  justify-content: flex-end;
}

.catalog-heading--search-only .catalog-search {
  width: min(100%, 420px);
}

.catalog-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.1;
}

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

.catalog-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem;
}

.catalog-search .form-control {
  min-height: 2.45rem;
  border-radius: 4px;
}

.catalog-search .btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

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

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

.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__topbar {
  margin-bottom: 1.25rem;
  align-items: flex-start;
}

.product-detail__topbar .catalog-breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
}

.product-detail__topbar .catalog-breadcrumb span {
  color: var(--ink);
}

.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-price {
  margin: 0;
  color: var(--accent);
  font-size: 1.35rem;
  font-weight: 600;
}

.product-detail__sku {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
}

.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;
}

.account-form {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

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

.form-actions {
  margin-top: 1rem;
}

.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-toolbar {
  justify-content: space-between;
  margin-bottom: 1rem;
}

.admin-toolbar .catalog-toolbar {
  min-width: min(100%, 520px);
  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-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: 64px minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
}

.admin-image-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #eef0ed;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .25rem;
}

.admin-image-item span {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: .84rem;
}

.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;
}

.about-header {
  margin-bottom: 1.5rem;
}

.about-header h1 {
  margin: 0 0 .75rem;
  color: var(--brand-dark);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 600;
  line-height: 1.05;
}

.about-header p {
  margin: 0;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.65;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.about-location-panel {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(380px, 1.22fr);
  gap: .75rem;
  align-items: stretch;
}

.about-intro-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 26%);
  gap: 3rem;
  align-items: start;
}

.about-intro-media__image {
  margin: 0;
}

.about-intro-media__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.site-alert {
  margin-bottom: 1rem;
  padding: 2rem;
  color: #55595c;
  background: #ffffff;
  border: 1px solid #e6e8ea;
  border-radius: 4px;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.5;
}

.site-alert h2 {
  margin: 0 0 .75rem;
  color: #55595c;
  font: inherit;
  line-height: 1.2;
}

.site-alert .site-alert__title {
  color: #000000;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}

.site-alert address,
.site-alert p {
  margin-bottom: 0;
  font: inherit;
  line-height: 1.5;
}

.site-alert__actions {
  margin-top: 1rem;
}

.home-welcome-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(((100% - 4.5rem) / 7) * 1.6);
  gap: 1.5rem;
  align-items: start;
}

.home-welcome-intro__image {
  margin: 0;
  padding-right: .75rem;
}

.home-welcome-intro img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

.home-specialty-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .25rem 1rem;
  margin: .8rem 0 .85rem;
  padding-left: 1rem;
}

.home-specialty-list li::marker {
  color: #563d7c;
}

.home-front-gallery {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.5rem 0 0;
}

.home-front-gallery img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid #e6e8ea;
  border-radius: 4px;
  transition: box-shadow .16s ease, transform .16s ease;
}

.home-front-gallery img:hover {
  z-index: 10;
  box-shadow: 0 16px 40px rgba(29, 31, 31, .22);
  transform: scale(2);
}

.home-welcome {
  margin-bottom: 2rem;
}

.site-alert p + p {
  margin-top: .75rem;
}

.site-alert h3 {
  margin: 2rem 0 .65rem;
  color: #55595c;
  font: inherit;
  line-height: 1.2;
}

.site-alert ul,
.site-alert ol,
.site-alert dl,
.site-alert li,
.site-alert dt,
.site-alert dd,
.site-alert strong,
.site-alert a {
  font: inherit;
}

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

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

.sell-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem 1.5rem;
  margin: 0 0 1rem;
  padding-left: 0;
  list-style: none;
  font-size: .92rem;
}

.sell-intro-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 28%);
  gap: 2.25rem;
  align-items: start;
}

.sell-intro-media__image {
  margin: 0;
  padding-left: 1.25rem;
}

.sell-intro-media__image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e6e8ea;
  border-radius: 4px;
}

.sell-intro-media .sell-list {
  display: block;
  column-count: 2;
  column-gap: 1.5rem;
}

.sell-intro-media .sell-list li {
  break-inside: avoid;
  margin-bottom: .45rem;
}

.site-alert-list {
  grid-template-columns: minmax(0, 1fr);
}

.valuation-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 17%) minmax(120px, 17%);
  gap: 1.5rem;
  align-items: start;
}

.valuation-feature__image {
  margin: 2rem 0 0;
}

.valuation-feature__image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e6e8ea;
  border-radius: 4px;
}

.sell-list li {
  display: grid;
  grid-template-columns: .75rem minmax(0, 1fr);
  gap: .45rem;
  align-items: start;
  line-height: 1.4;
}

.sell-list li::before {
  content: "";
  width: .32rem;
  height: .32rem;
  margin-top: .55rem;
  border-radius: 50%;
  background: #563d7c;
}

.sell-list .bi {
  display: none;
}

.sell-form {
  margin-top: .25rem;
}

.sell-form-panel {
  background: #f7f8f9;
  border-color: #e1e4e6;
}

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

.sell-form__message {
  margin-top: 1rem;
}

.about-list {
  display: grid;
  gap: .55rem;
  margin: 0;
}

.about-list div {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: .5rem;
}

.about-list dt {
  color: inherit;
  font-weight: 400;
}

.about-list dd {
  margin: 0;
}

.about-map {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-sizing: border-box;
  min-height: 0;
}

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

.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;
  }

  .about-map iframe {
    min-height: 360px;
  }

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

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

  .valuation-feature {
    grid-template-columns: 1fr;
  }

  .valuation-feature__image {
    margin-top: .75rem;
  }

  .cart-line__quantity,
  .cart-line__total {
    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;
  }

  .catalog-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .home-welcome-intro {
    grid-template-columns: 1fr;
  }

  .sell-intro-media {
    grid-template-columns: 1fr;
  }

  .sell-intro-media .sell-list {
    column-count: 1;
  }

  .sell-intro-media__image {
    padding-left: 0;
  }

  .sell-intro-media__image img {
    max-width: 260px;
  }

  .home-welcome-intro img {
    max-width: 160px;
  }

  .catalog-top-search {
    width: 100%;
    flex-basis: auto;
  }

  .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));
  }

  .category-gallery {
    grid-template-columns: 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));
}

.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__svg {
  width: 110px;
  height: 32px;
}

.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: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .85rem;
  border: 1px solid #e3e7e3;
  border-radius: .55rem;
  padding: .55rem .8rem;
}

.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;
}

.pal-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .85rem 1.5rem;
  background: #563d7c;
  color: #ffffff;
  border-radius: .75rem;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.5rem;
}

.pal-promo__text strong {
  display: block;
  font-size: 1.15rem;
}

.pal-promo__text span {
  font-size: .92rem;
  opacity: .85;
}

.pal-promo .btn {
  background: #ffffff;
  color: #563d7c;
  font-weight: 600;
  border: none;
}

.pal-promo .btn:hover,
.pal-promo .btn:focus {
  background: #ece6f5;
  color: #563d7c;
}

@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;
}

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

/* 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-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 rgba(237, 120, 41, .7) !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__quote {
  margin-left: .8rem;
  color: #1b251f !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  white-space: nowrap;
}

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

.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%;
  object-fit: cover;
  padding: 0;
  transition: transform .35s ease;
}

.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__sku {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

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

.product-card__meta {
  min-height: 2rem;
  align-items: center;
  margin-top: auto;
}

.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 {
  color: #8a332c;
  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-topbar {
  min-height: 2.8rem;
  margin-bottom: 0;
  padding: .25rem 0 1rem;
  border-bottom: 0;
}

.catalog-breadcrumb {
  color: var(--muted);
  font-size: .76rem;
}

.catalog-breadcrumb a,
.catalog-breadcrumb span {
  color: inherit;
}

.catalog-breadcrumb a:hover,
.catalog-breadcrumb a:focus {
  color: var(--brand);
}

.catalog-top-search {
  min-width: min(100%, 360px);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: 0 5px 18px rgba(10, 41, 34, .04);
}

.catalog-top-search input {
  min-height: 2.6rem;
  color: var(--ink);
  font-size: .8rem;
  border: 0;
}

.catalog-top-search button {
  width: 2.6rem;
  height: 2.6rem;
  color: #ffffff;
  background: var(--brand);
  border-radius: 50%;
  margin: .2rem;
}

.catalog-top-search button:hover,
.catalog-top-search button:focus {
  background: var(--accent-dark);
}

.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__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-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__topbar {
  margin-bottom: 1rem;
}

.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: cover;
}

.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-detail__sku {
  margin-top: .7rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.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 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-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,
.pal-pill:focus-visible {
  color: var(--brand);
  border-color: var(--brand-bright);
}

.pal-pill.active {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 7px 18px rgba(18, 60, 50, .15);
}

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

.pal-card__svg path {
  stroke: var(--brand) !important;
}

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

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

.pal-card.active {
  border-color: var(--brand);
  background: #f1f6f3;
  box-shadow: 0 0 0 2px rgba(18, 60, 50, .16);
}

.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-endpost {
  background: #edf5f1;
  border-color: #cfe2d8;
  border-radius: var(--radius-sm);
}

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

.pal-extra {
  border-color: var(--line);
  border-radius: var(--radius-sm);
}

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

.pal-summary {
  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: var(--brand-dark);
  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;
}

/* Contact */
.contact-page {
  background: var(--cream);
}

.contact-page__heading {
  max-width: 820px;
  margin-bottom: 3rem;
}

.contact-page__heading h1 {
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 780;
  line-height: .96;
}

.contact-page__heading p {
  max-width: 720px;
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.contact-page__grid {
  display: grid;
  grid-template-columns: minmax(300px, .68fr) minmax(0, 1.32fr);
  gap: 1.25rem;
  align-items: start;
}

.contact-guide {
  padding: 2rem;
  color: #ffffff;
  background: var(--brand-dark);
  border-radius: var(--radius-lg);
}

.contact-guide h2 {
  margin: 0 0 1.5rem;
  color: #ffffff;
  font-size: 1.35rem;
}

.contact-guide ol {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-guide li {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
}

.contact-guide li > span {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
}

.contact-guide strong {
  font-size: .9rem;
}

.contact-guide p {
  margin: .18rem 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: .78rem;
}

.contact-guide__note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  color: rgba(255, 255, 255, .72);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .8rem;
}

.contact-guide__note .bi {
  color: var(--accent);
  font-size: 1.15rem;
}

.contact-form {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

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

.contact-form .form-label {
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 700;
}

.contact-form .form-label span {
  color: var(--muted);
  font-weight: 500;
}

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

.contact-form__message {
  margin-top: 1rem;
}

.contact-form textarea.form-control {
  min-height: 180px;
  resize: vertical;
}

.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.contact-form__actions small {
  color: var(--muted);
}

/* 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__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;
}

.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;
  }

  .main-nav__quote {
    margin-left: .45rem;
    padding-right: .8rem;
    padding-left: .8rem;
  }

  .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;
  }

  .main-nav__quote {
    width: 100%;
    margin: .5rem 0 0;
  }

  .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-finish__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

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

  .contact-page__grid {
    grid-template-columns: 1fr;
  }

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

  .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 {
    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-topbar {
    align-items: stretch;
    flex-direction: column;
    gap: .8rem;
  }

  .catalog-top-search {
    width: 100%;
  }

  .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: minmax(0, 1fr) auto;
  }

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

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

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

  .contact-guide ol {
    grid-template-columns: 1fr;
  }

  .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;
}

/* 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__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__contact {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .65rem;
  color: #1b251f;
  background: var(--accent);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

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

/* .utility-nav__service .bi paints icons accent-orange, which would vanish here. */
.utility-nav__contact .bi {
  color: inherit;
  font-size: .7rem;
}

@media (max-width: 767px) {
  .utility-nav__contact {
    display: inline-flex !important;
  }
}

/* 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: #123c32;
  border-color: #123c32;
}

.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 */
.admin-pricing__intro {
  max-width: 720px;
  color: #68736f;
}

.admin-pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.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-pricing__note {
  margin: 0 0 .6rem;
  color: #68736f;
  font-size: .8rem;
}

.admin-pricing__save {
  margin-top: 1.25rem;
}

/* --- 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-count {
  margin: .75rem 0 0;
  color: #68736f;
  font-size: .88rem;
}

/* 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 {
  max-width: 700px;
}

.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 {
  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 {
  width: 100%;
  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%;
  }
}