@font-face {
  font-family: "Gio";
  src: url("/asset/font/GiorgioSans-Bold.otf") format("truetype");
}
:root {
  --pal-bg1: #edeef0;
  --pal-bg2: #ffffff;
  --pal-brand: #00aae6;
  --pal-brand--contrast: #ffffff;
  --pal-error: #d90707;
  --pal-error--contrast: #ffffff;
  --pal-outline: #626262;
  --pal-heading: #000;
  --pal-text: #0f0f0f;
  --pal-text-dark: #333;
  --pal-text-light: #666;
}

a:focus, a:active {
  outline: 3px solid black;
}

button, submit-form .actions a, order-summary .bottom-bar > .next-step, *.button {
  --bg: var(--pal-brand);
  --fg: var(--pal-brand--contrast);
  box-sizing: border-box;
  font-family: "Gio", sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  padding-bottom: 0.6rem;
  border: none;
  background-color: var(--bg);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  border-radius: 0.25rem;
  letter-spacing: 0.07em;
  text-align: center;
}
button:hover, submit-form .actions a:hover, order-summary .bottom-bar > .next-step:hover, .button:hover {
  background-color: color-mix(in srgb, var(--bg), black 20%);
}
button:focus, submit-form .actions a:focus, order-summary .bottom-bar > .next-step:focus, .button:focus, button:active, submit-form .actions a:active, order-summary .bottom-bar > .next-step:active, .button:active {
  outline: 3px solid black;
}

blockquote {
  margin: 0;
  padding: 0 1rem;
  border-left: 3px solid var(--pal-text);
  line-height: 1.25;
}

body {
  position: relative;
  margin: 0;
  overflow-y: scroll;
  background-color: var(--pal-bg1);
}

html {
  overflow-x: hidden;
  scroll-padding-top: 14.5rem;
}

h1 {
  font-family: "Gio", sans-serif;
  font-size: 2.25rem;
  letter-spacing: 0.1rem;
  font-weight: normal;
  text-transform: uppercase;
}

p {
  line-height: 1.25;
}

column-layout {
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 0.5rem;
  max-width: 524px;
}
@media (min-width: 720px) {
  column-layout {
    padding: 0;
  }
}
@media (min-width: 960px) {
  column-layout {
    display: flex;
    justify-content: stretch;
    gap: 1rem;
    margin: 0 auto;
    background-color: var(--pal-bg2);
    max-width: 720px;
  }
  column-layout > * {
    flex-grow: 1;
    width: 50%;
  }
}
@media (min-width: 1160px) {
  column-layout {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  column-layout {
    max-width: 1160px;
  }
}
column-layout:target product-selector {
  display: none;
}
@media (max-width: 960px) {
  column-layout:target order-summary {
    display: none;
  }
}
@media (min-width: 960px) {
  column-layout:target order-summary .complete {
    display: none;
  }
}
column-layout:target submit-form {
  display: block;
}
column-layout submit-form {
  display: none;
}

tabbed-header {
  position: relative;
  display: block;
  max-width: 524px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 720px) {
  tabbed-header {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
  }
}
@media (min-width: 960px) {
  tabbed-header {
    max-width: 720px;
  }
}
@media (min-width: 1160px) {
  tabbed-header {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  tabbed-header {
    max-width: 1160px;
  }
}
tabbed-header > section {
  display: none;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--pal-bg1);
  margin: 2rem;
  padding-left: 2rem;
  max-width: 524px;
}
tabbed-header > section::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.75rem;
  bottom: 0.25rem;
  left: 0;
  width: 2px;
  background-color: var(--pal-outline);
}
@media (min-width: 720px) {
  tabbed-header > section {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 4rem;
  }
}
@media (min-width: 960px) {
  tabbed-header > section {
    max-width: 720px;
  }
}
@media (min-width: 1160px) {
  tabbed-header > section {
    max-width: 960px;
    padding-left: 7rem;
  }
  tabbed-header > section::before {
    left: 5rem;
    top: 2.75rem;
    bottom: 3rem;
  }
}
@media (min-width: 1200px) {
  tabbed-header > section {
    max-width: 1160px;
  }
}
tabbed-header > section h1 {
  background-color: var(--pal-bg1);
  margin: 0;
}
tabbed-header > section ul {
  color: var(--pal-outline);
}
tabbed-header > section p {
  color: var(--pal-outline);
  font-size: 0.9rem;
}
tabbed-header > section p > span {
  display: none;
}
tabbed-header > section p:not(:first-of-type) {
  display: none;
}
@media (min-width: 720px) {
  tabbed-header > section p {
    display: block !important;
  }
  tabbed-header > section p > span {
    display: inline-block;
  }
}
tabbed-header > section p a {
  text-decoration: none;
  font-weight: bold;
}
tabbed-header > section p.icon::before {
  content: "";
  display: block;
  float: left;
  width: 1rem;
  height: 1rem;
  margin: 0.25rem;
  margin-top: 0;
  background-color: #4a4a49;
  mask-size: auto 100%;
  mask-position: 50%;
  mask-repeat: no-repeat;
}
tabbed-header > section p.icon.icon-phone::before {
  mask-image: url("/asset/icon-phone.svg");
}
tabbed-header > section strong, tabbed-header > section a {
  color: #4a4a49;
}
tabbed-header > section strong.one-off-colour, tabbed-header > section a.one-off-colour {
  color: #333333;
}
tabbed-header nav {
  display: flex;
  justify-content: stretch;
  margin: 0 0.5rem;
  margin-top: -2rem;
  background-color: var(--pal-bg2);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
@media (min-width: 720px) {
  tabbed-header nav {
    margin: 0 auto;
    width: 100%;
  }
}
tabbed-header nav ul {
  display: flex;
  flex-grow: 1;
  gap: 1rem;
  list-style-type: none;
  margin: 1rem;
  padding: 0;
}
@media (min-width: 1160px) {
  tabbed-header nav ul {
    gap: 2rem;
    margin: 2rem;
  }
}
tabbed-header nav ul li {
  width: 50%;
}
tabbed-header nav ul li.selected a {
  background-color: var(--pal-brand);
}
tabbed-header nav ul li.selected a:hover {
  background-color: var(--pal-outline);
}
tabbed-header nav ul li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  padding: 0.2rem 0.75rem;
  padding-bottom: 0.3rem;
  height: 100%;
  font-size: 1.25rem;
  font-family: "Gio", sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pal-brand--contrast);
  background-color: var(--pal-outline);
  text-decoration: none;
  border-radius: 0.25rem;
  line-height: 1;
}
tabbed-header nav ul li a:hover {
  background-color: var(--pal-brand);
}
@media (min-width: 1160px) {
  tabbed-header nav ul li a {
    padding: 0.5rem 2rem;
  }
  tabbed-header nav ul li a::before {
    content: "";
    display: block;
    height: 2rem;
    margin-top: 0.25rem;
    aspect-ratio: 256/70;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  tabbed-header nav ul li a[href*=london-brick]::before {
    background-image: url("/asset/logo-london.svg");
  }
  tabbed-header nav ul li a[href*=accrington-brick]::before {
    background-image: url("/asset/logo-butterley.svg");
  }
}
@media (min-width: 1160px) {
  tabbed-header nav ul li a {
    font-size: 1.5rem;
  }
  tabbed-header nav ul li a::before {
    margin-right: 1rem;
  }
  tabbed-header nav ul li a br {
    display: none;
  }
}

load-visualiser {
  display: block;
  max-width: 524px;
  padding-bottom: 2rem;
  padding-top: 2rem;
}
@media (min-width: 720px) {
  load-visualiser {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    order: 10;
    padding-top: 2rem;
    background-color: var(--pal-bg2);
  }
}
@media (min-width: 960px) {
  load-visualiser {
    max-width: 720px;
  }
}
@media (min-width: 1160px) {
  load-visualiser {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  load-visualiser {
    max-width: 1160px;
  }
}
load-visualiser #render {
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 1280/480;
}
@media (min-width: 960px) {
  load-visualiser #render {
    width: calc(60% - 1rem);
    margin-left: 1rem;
  }
}
@media (min-width: 1160px) {
  load-visualiser #render {
    width: calc(60% - 2rem);
    margin-left: 2rem;
  }
}
load-visualiser #render .render {
  position: relative;
  z-index: 0;
  width: calc(100% - 4rem);
  margin: 0 auto;
  background-color: var(--pal-bg1);
  background-image: url("/asset/lorry-orange.png");
  background-size: 100%;
  background-repeat: no-repeat;
  aspect-ratio: 1000/400;
  container-type: size;
}
load-visualiser #render .render .surprise {
  position: relative;
  height: 100%;
  aspect-ratio: 1;
  background-image: url("/asset/lorry-flash.png");
  background-size: auto 100%;
  opacity: 0;
  z-index: 1000;
}
@keyframes surprise {
  from {
    opacity: 1;
  }
}
load-visualiser #render .render .surprise:hover {
  animation: surprise 1s infinite steps(2, jump-none);
}
.dir--selector--accrington-brick load-visualiser #render .render {
  background-image: url("/asset/lorry-blue.png");
}
@media (min-width: 960px) {
  load-visualiser #render .render {
    background-color: transparent;
  }
}
load-visualiser #render .render.sticky {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid var(--pal-outline);
}
load-visualiser #render .render.sticky::before, load-visualiser #render .render.sticky::after {
  box-sizing: border-box;
  content: "";
  position: fixed;
  z-index: 101;
  display: block;
  background: var(--pal-bg1);
  top: 0;
  bottom: -1px;
  width: 2rem;
  border-bottom: 1px solid var(--pal-outline);
}
load-visualiser #render .render.sticky::before {
  left: -2rem;
}
load-visualiser #render .render.sticky::after {
  right: -2rem;
}
load-visualiser #render .render ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
load-visualiser #render .render ul::after {
  content: "";
  position: absolute;
  display: block;
  z-index: 20;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("/asset/lorry-guard-orange.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
.dir--selector--accrington-brick load-visualiser #render .render ul::after {
  background-image: url("/asset/lorry-guard-blue.png");
}
load-visualiser #render .render ul > li {
  position: absolute;
  top: 6.5cqw;
  left: 35cqw;
  width: 16%;
  aspect-ratio: 1;
}
load-visualiser #render .render ul > li:nth-of-type(1) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 15;
}
load-visualiser #render .render ul > li:nth-of-type(2) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 14;
}
load-visualiser #render .render ul > li:nth-of-type(3) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 13;
}
load-visualiser #render .render ul > li:nth-of-type(4) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 12;
}
load-visualiser #render .render ul > li:nth-of-type(5) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 11;
}
load-visualiser #render .render ul > li:nth-of-type(6) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 10;
}
load-visualiser #render .render ul > li:nth-of-type(7) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 9;
}
load-visualiser #render .render ul > li:nth-of-type(8) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 8;
}
load-visualiser #render .render ul > li:nth-of-type(9) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 7;
}
load-visualiser #render .render ul > li:nth-of-type(10) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 6;
}
load-visualiser #render .render ul > li:nth-of-type(11) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 5;
}
load-visualiser #render .render ul > li:nth-of-type(12) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 4;
}
load-visualiser #render .render ul > li:nth-of-type(13) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 3;
}
load-visualiser #render .render ul > li:nth-of-type(14) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 2;
}
load-visualiser #render .render ul > li:nth-of-type(15) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 1;
}
load-visualiser #render .render ul > li:nth-of-type(16) {
  transform-origin: bottom center;
  transform: scale(var(--offsetZ)) translate(var(--offsetX), var(--offsetY));
  z-index: 0;
}
load-visualiser #render .render ul[data-error=oversize]::before {
  content: "";
  position: absolute;
  display: block;
  width: 10vw;
  aspect-ratio: 1;
  left: 50%;
  top: 10%;
  background-image: none;
  mask-image: url("/asset/warning.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: 50%;
  background-color: #b4140f;
  animation: flash 1s infinite steps(2, jump-none);
}
@keyframes flash {
  from {
    opacity: 0.5;
  }
}
@media (min-width: 720px) {
  load-visualiser #render .render ul[data-error=oversize]::before {
    width: 3rem;
    left: 57%;
    top: 1.75rem;
  }
}
load-visualiser #render .render img {
  position: absolute;
  width: 100%;
  height: 100%;
  color: transparent;
}
load-visualiser #render .data {
  display: none;
}
load-visualiser .load {
  display: none;
}
load-visualiser .overweight, load-visualiser .oversize {
  font-weight: bold;
  color: red;
}

product-selector {
  display: block;
  margin-bottom: 16rem;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--pal-bg2);
  max-width: 524px;
}
@keyframes flash-outline {
  from {
    outline-color: transparent;
  }
}
@media (min-width: 720px) {
  product-selector {
    margin-bottom: 24rem;
  }
}
@media (min-width: 960px) {
  product-selector {
    background-color: var(--pal-bg1);
    border-radius: 0.5rem;
    margin-left: 1rem;
    max-height: 49rem;
    overflow-y: scroll;
    scrollbar-color: var(--pal-brand) var(--pal-bg2);
  }
}
@media (min-width: 1160px) {
  product-selector {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}
product-selector > h3 {
  display: none;
}
product-selector > ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
product-selector > ul > li details {
  margin: 0 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--pal-bg2), black 25%);
}
@media (min-width: 960px) {
  product-selector > ul > li details {
    margin: 0 1rem;
  }
}
product-selector > ul > li details summary {
  display: flex;
  position: relative;
  align-items: center;
  cursor: pointer;
}
product-selector > ul > li details summary::-webkit-details-marker, product-selector > ul > li details summary::marker {
  display: none;
  content: "";
}
product-selector > ul > li details summary::before {
  display: block;
  content: "";
  aspect-ratio: 256/70;
  height: 2rem;
  background-size: 100%;
  background-repeat: no-repeat;
}
product-selector > ul > li details summary::after {
  content: "";
  position: absolute;
  right: 1rem;
  display: block;
  width: 1rem;
  margin-top: 0.25rem;
  aspect-ratio: 1;
  background-image: url("/asset/chevron.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
product-selector > ul > li details summary[data-category*=London]::before {
  background-image: url("/asset/logo-london.svg");
}
product-selector > ul > li details summary[data-category*=Ecostock]::before {
  background-image: url("/asset/logo-ecostock.svg");
}
product-selector > ul > li details summary[data-category*=Butterley]::before, product-selector > ul > li details summary[data-category*="Accrington Bricks"]::before, product-selector > ul > li details summary[data-category*="Accrington Brick Load Selector"]::before {
  background-image: url("/asset/logo-butterley.svg");
}
product-selector > ul > li details summary[data-category*=Thermalite]::before {
  background-image: url("/asset/logo-thermalite.svg");
}
product-selector > ul > li details summary[data-category*=Conbloc]::before {
  background-image: url("/asset/logo-conblock.svg");
}
product-selector > ul > li details summary:hover h4 {
  text-decoration: underline;
}
product-selector > ul > li details summary h4 {
  cursor: pointer;
  font-size: 1.25rem;
  margin: 1rem;
  font-family: "Gio", sans-serif;
  letter-spacing: 0.07em;
  font-weight: normal;
  text-transform: uppercase;
}
product-selector > ul > li details[open] summary::after {
  rotate: 90deg;
}
product-selector > ul > li details > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style-type: none;
  padding: 0;
  gap: 1rem 2rem;
}
@media (min-width: 960px) {
  product-selector > ul > li details > ul {
    margin: 0 1rem;
    gap: 0.5rem 2rem;
  }
}
product-selector > ul > li details > ul > li {
  width: calc(33.33% - 1.35rem);
  display: flex;
  flex-direction: column;
}
@media (min-width: 1200px) {
  product-selector > ul > li details > ul > li {
    width: calc(25% - 1.5rem);
  }
}
product-selector > ul > li details > ul > li img {
  display: block;
  border-radius: 50%;
  width: 100%;
  aspect-ratio: 1;
  background-color: rgba(0, 0, 0, 0.2);
  object-fit: cover;
}
product-selector > ul > li details > ul > li > form {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
@media (min-width: 1200px) {
  product-selector > ul > li details > ul > li > form {
    overflow: initial;
  }
}
product-selector > ul > li details > ul > li > form > label {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
product-selector > ul > li details > ul > li > form > label span {
  flex-grow: 1;
  display: block;
  font-family: "Gio", sans-serif;
  line-height: 1;
  letter-spacing: 0.07em;
  width: 100%;
  margin: 0.5rem 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.9rem;
}
product-selector > ul > li details > ul > li > form > label input {
  box-sizing: border-box;
  -moz-appearance: textfield;
  max-width: 100%;
  padding: 0.5rem;
  height: 2rem;
  border: 1px solid var(--pal-outline);
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}
product-selector > ul > li details > ul > li > form > label input::-webkit-outer-spin-button, product-selector > ul > li details > ul > li > form > label input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
@media (min-width: 1200px) {
  product-selector > ul > li details > ul > li > form > label input {
    max-width: calc(100% + 1rem);
    width: calc(100% + 1rem);
    margin-left: -0.5rem;
  }
}
product-selector > ul > li details > ul > li > form button.numChange, product-selector > ul > li details > ul > li > form submit-form .actions a.numChange, submit-form .actions product-selector > ul > li details > ul > li > form a.numChange, product-selector > ul > li details > ul > li > form order-summary .bottom-bar > .numChange.next-step, order-summary product-selector > ul > li details > ul > li > form .bottom-bar > .numChange.next-step, product-selector > ul > li details > ul > li > form .numChange.button {
  position: absolute;
  bottom: 0;
  height: 2rem;
  width: 1rem;
  background-color: transparent;
  color: var(--pal-text);
  border-right: 1px solid var(--pal-text);
  background-image: url("/asset/chevron-black.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
@media (min-width: 960px) {
  product-selector > ul > li details > ul > li > form button.numChange, product-selector > ul > li details > ul > li > form submit-form .actions a.numChange, submit-form .actions product-selector > ul > li details > ul > li > form a.numChange, product-selector > ul > li details > ul > li > form order-summary .bottom-bar > .numChange.next-step, order-summary product-selector > ul > li details > ul > li > form .bottom-bar > .numChange.next-step, product-selector > ul > li details > ul > li > form .numChange.button {
    display: none;
    background-position-x: 0.25rem;
  }
}
@media (min-width: 1200px) {
  product-selector > ul > li details > ul > li > form button.numChange, product-selector > ul > li details > ul > li > form submit-form .actions a.numChange, submit-form .actions product-selector > ul > li details > ul > li > form a.numChange, product-selector > ul > li details > ul > li > form order-summary .bottom-bar > .numChange.next-step, order-summary product-selector > ul > li details > ul > li > form .bottom-bar > .numChange.next-step, product-selector > ul > li details > ul > li > form .numChange.button {
    display: block;
    width: 0.5rem;
    background-position-x: 50%;
  }
}
product-selector > ul > li details > ul > li > form button.numChange:hover, product-selector > ul > li details > ul > li > form submit-form .actions a.numChange:hover, submit-form .actions product-selector > ul > li details > ul > li > form a.numChange:hover, product-selector > ul > li details > ul > li > form order-summary .bottom-bar > .numChange.next-step:hover, order-summary product-selector > ul > li details > ul > li > form .bottom-bar > .numChange.next-step:hover, product-selector > ul > li details > ul > li > form .numChange.button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
product-selector > ul > li details > ul > li > form button.numChange[value=sub], product-selector > ul > li details > ul > li > form submit-form .actions a.numChange[value=sub], submit-form .actions product-selector > ul > li details > ul > li > form a.numChange[value=sub], product-selector > ul > li details > ul > li > form order-summary .bottom-bar > .numChange[value=sub].next-step, order-summary product-selector > ul > li details > ul > li > form .bottom-bar > .numChange[value=sub].next-step, product-selector > ul > li details > ul > li > form .numChange[value=sub].button {
  left: 0;
}
@media (min-width: 1200px) {
  product-selector > ul > li details > ul > li > form button.numChange[value=sub], product-selector > ul > li details > ul > li > form submit-form .actions a.numChange[value=sub], submit-form .actions product-selector > ul > li details > ul > li > form a.numChange[value=sub], product-selector > ul > li details > ul > li > form order-summary .bottom-bar > .numChange[value=sub].next-step, order-summary product-selector > ul > li details > ul > li > form .bottom-bar > .numChange[value=sub].next-step, product-selector > ul > li details > ul > li > form .numChange[value=sub].button {
    left: -0.5rem;
  }
}
product-selector > ul > li details > ul > li > form button.numChange[value=add], product-selector > ul > li details > ul > li > form submit-form .actions a.numChange[value=add], submit-form .actions product-selector > ul > li details > ul > li > form a.numChange[value=add], product-selector > ul > li details > ul > li > form order-summary .bottom-bar > .numChange[value=add].next-step, order-summary product-selector > ul > li details > ul > li > form .bottom-bar > .numChange[value=add].next-step, product-selector > ul > li details > ul > li > form .numChange[value=add].button {
  right: 0;
  scale: -100% 100%;
}
@media (min-width: 1200px) {
  product-selector > ul > li details > ul > li > form button.numChange[value=add], product-selector > ul > li details > ul > li > form submit-form .actions a.numChange[value=add], submit-form .actions product-selector > ul > li details > ul > li > form a.numChange[value=add], product-selector > ul > li details > ul > li > form order-summary .bottom-bar > .numChange[value=add].next-step, order-summary product-selector > ul > li details > ul > li > form .bottom-bar > .numChange[value=add].next-step, product-selector > ul > li details > ul > li > form .numChange[value=add].button {
    right: -0.5rem;
  }
}
product-selector > ul > li:last-of-type details {
  border-bottom: none;
}
product-selector > ul > li[data-category=Thermalite] img, product-selector > ul > li[data-category=Conbloc] img {
  filter: brightness(0.95);
}
product-selector[data-london-restriction]::before {
  display: block;
  padding: 0 1rem;
  font-weight: bold;
  font-size: 1rem;
}
@media (min-width: 960px) {
  product-selector[data-london-restriction]::before {
    padding: 1rem;
  }
}
product-selector[data-london-restriction][data-london-restriction=step1]::before {
  content: "1. Select London Bricks - 16 Packs Required";
}
product-selector[data-london-restriction][data-london-restriction=step1] > ul > li:not([data-category="London Bricks"]) {
  display: none;
}
product-selector[data-london-restriction][data-london-restriction=step2]::before {
  content: "2. Select Additional Products";
}
order-summary {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--pal-bg2);
  border-top: 1px solid var(--pal-outline);
}
@keyframes flash {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@media (min-width: 960px) {
  order-summary {
    position: relative;
    background-color: transparent;
    margin-right: 1rem;
  }
}
@media (min-width: 1160px) {
  order-summary {
    border-top: none;
    margin-right: 2rem;
  }
}
@media (min-width: 720px) {
  order-summary > details {
    display: block;
  }
}
order-summary > details > summary {
  list-style: none;
}
order-summary > details > summary::-webkit-details-marker, order-summary > details > summary::marker {
  display: none;
  content: "";
}
order-summary > details > summary .details {
  width: 7rem;
  display: block;
  margin: 0 auto;
  margin-top: -1rem;
  text-align: center;
  cursor: pointer;
}
order-summary > details > summary .details::before {
  content: "View ";
}
@media (min-width: 720px) {
  order-summary > details > summary .details {
    display: none;
  }
}
order-summary > details[open] > summary .details::before {
  content: "Hide ";
}
order-summary > details > div {
  height: 70dvh;
}
@media (min-width: 720px) {
  order-summary > details > div {
    display: block;
    height: auto;
  }
}
order-summary > ul > li .headers {
  display: flex;
  gap: 1rem;
  align-items: center;
}
order-summary > ul > li .headers h4 {
  width: 24rem;
}
order-summary > ul > li .headers span {
  display: block;
  width: 6rem;
}
order-summary > ul > li > ul {
  margin: 0;
  padding: 0;
}
order-summary > ul > li > ul > li {
  position: relative;
}
order-summary > ul > li > ul > li form {
  display: flex;
  align-items: center;
}
order-summary > ul > li > ul > li form h5 {
  width: 24rem;
}
order-summary > ul > li > ul > li form button, order-summary > ul > li > ul > li form submit-form .actions a, submit-form .actions order-summary > ul > li > ul > li form a, order-summary > ul > li > ul > li form .bottom-bar > .next-step, order-summary > ul > li > ul > li form *.button {
  position: absolute;
  left: 20rem;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  cursor: pointer;
}
order-summary > ul > li > ul > li form button:hover, order-summary > ul > li > ul > li form submit-form .actions a:hover, submit-form .actions order-summary > ul > li > ul > li form a:hover, order-summary > ul > li > ul > li form .bottom-bar > .next-step:hover, order-summary > ul > li > ul > li form .button:hover {
  background: #eee;
}
order-summary > ul > li > ul > li form label {
  width: 6rem;
}
order-summary > ul > li > ul > li form label input {
  box-sizing: border-box;
  width: 100%;
}
order-summary > ul > li > ul > li form span {
  width: 6rem;
  text-align: right;
}
order-summary .overview, order-summary .bottom-bar {
  display: flex;
  gap: 1rem;
}
order-summary .overview .weight, order-summary .bottom-bar .weight {
  --pal-circle-track: var(--pal-brand);
  margin-left: 1rem;
}
@media (min-width: 960px) {
  order-summary .overview .weight, order-summary .bottom-bar .weight {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: absolute;
    top: -10rem;
    right: 0;
  }
}
@media (min-width: 960px) {
  order-summary .overview .weight, order-summary .bottom-bar .weight {
    right: 1rem;
    top: -12rem;
  }
}
@media (min-width: 1160px) {
  order-summary .overview .weight, order-summary .bottom-bar .weight {
    right: 3rem;
    top: -16rem;
  }
}
@media (min-width: 1200px) {
  order-summary .overview .weight, order-summary .bottom-bar .weight {
    right: 5rem;
    top: -17rem;
  }
}
order-summary .overview .weight > p, order-summary .bottom-bar .weight > p {
  display: none;
  font-family: "Gio", sans-serif;
  text-transform: uppercase;
  color: var(--pal-outline);
  font-size: 1.5rem;
  line-height: 1;
  width: 10rem;
}
@media (min-width: 960px) {
  order-summary .overview .weight > p, order-summary .bottom-bar .weight > p {
    display: block;
  }
}
order-summary .overview .weight > p.errorString, order-summary .bottom-bar .weight > p.errorString {
  display: none;
  color: var(--pal-error);
  animation: flash 1s infinite steps(2, jump-none);
}
order-summary .overview .weight > p.errorString::before, order-summary .bottom-bar .weight > p.errorString::before {
  content: "";
  display: block;
  width: 2rem;
  aspect-ratio: 1;
  margin-bottom: 0.5rem;
  background-image: url("/asset/info-error.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}
order-summary .overview .weight[data-error][data-error=overweight], order-summary .bottom-bar .weight[data-error][data-error=overweight] {
  --pal-circle-track: var(--pal-error);
  animation: flash 1s infinite steps(2, jump-none);
}
order-summary .overview .weight[data-error][data-error=overweight] .ring .center > span, order-summary .bottom-bar .weight[data-error][data-error=overweight] .ring .center > span {
  color: var(--pal-error);
}
order-summary .overview .weight[data-error][data-error=overweight] p.weightString, order-summary .bottom-bar .weight[data-error][data-error=overweight] p.weightString {
  display: none;
}
@media (min-width: 1160px) {
  order-summary .overview .weight[data-error][data-error=overweight] p.errorString, order-summary .bottom-bar .weight[data-error][data-error=overweight] p.errorString {
    display: block;
  }
}
order-summary .overview .weight .ring, order-summary .bottom-bar .weight .ring {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-image: conic-gradient(var(--pal-circle-track) 0turn, var(--pal-circle-track) var(--turn), var(--pal-outline) var(--turn), var(--pal-outline));
}
@media (min-width: 960px) {
  order-summary .overview .weight .ring, order-summary .bottom-bar .weight .ring {
    width: 8rem;
    height: 8rem;
  }
}
@media (min-width: 1160px) {
  order-summary .overview .weight .ring, order-summary .bottom-bar .weight .ring {
    width: 10rem;
    height: 10rem;
  }
}
order-summary .overview .weight .ring::before, order-summary .overview .weight .ring::after, order-summary .bottom-bar .weight .ring::before, order-summary .bottom-bar .weight .ring::after {
  content: "";
  position: absolute;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--pal-circle-track);
  border-radius: 1rem;
  translate: 0 -2.75rem;
  transform-origin: 50% 3rem;
}
@media (min-width: 960px) {
  order-summary .overview .weight .ring::before, order-summary .overview .weight .ring::after, order-summary .bottom-bar .weight .ring::before, order-summary .bottom-bar .weight .ring::after {
    width: 1rem;
    height: 1rem;
    translate: 0 -3.5rem;
    transform-origin: 50% 4rem;
  }
}
@media (min-width: 1160px) {
  order-summary .overview .weight .ring::before, order-summary .overview .weight .ring::after, order-summary .bottom-bar .weight .ring::before, order-summary .bottom-bar .weight .ring::after {
    translate: 0 -4.5rem;
    transform-origin: 50% 5rem;
  }
}
order-summary .overview .weight .ring::after, order-summary .bottom-bar .weight .ring::after {
  rotate: var(--turn);
}
order-summary .overview .weight .ring .center, order-summary .bottom-bar .weight .ring .center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  border-radius: 50%;
  background-color: var(--pal-bg2);
}
@media (min-width: 960px) {
  order-summary .overview .weight .ring .center, order-summary .bottom-bar .weight .ring .center {
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
  }
}
@media (min-width: 1160px) {
  order-summary .overview .weight .ring .center, order-summary .bottom-bar .weight .ring .center {
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
  }
}
order-summary .overview .weight .ring .center > span, order-summary .bottom-bar .weight .ring .center > span {
  font-family: "Gio", sans-serif;
  font-size: 2rem;
  color: var(--pal-text);
}
order-summary .overview .weight .ring .center > span::after, order-summary .bottom-bar .weight .ring .center > span::after {
  display: block;
  content: "KG";
  font-size: 1rem;
  text-align: center;
}
@media (min-width: 960px) {
  order-summary .overview .weight .ring .center > span, order-summary .bottom-bar .weight .ring .center > span {
    font-size: 2.5rem;
  }
  order-summary .overview .weight .ring .center > span::after, order-summary .bottom-bar .weight .ring .center > span::after {
    font-size: 1.5rem;
  }
}
order-summary .overview .total, order-summary .bottom-bar .total {
  flex-grow: 1;
}
order-summary .overview .total table, order-summary .bottom-bar .total table {
  width: calc(100% - 1rem);
  margin-top: 1rem;
  border-collapse: collapse;
}
@media (min-width: 960px) {
  order-summary .overview .total table, order-summary .bottom-bar .total table {
    width: 100%;
  }
}
order-summary .overview .total table th, order-summary .overview .total table td, order-summary .bottom-bar .total table th, order-summary .bottom-bar .total table td {
  box-sizing: border-box;
  font-size: 0.8rem;
  padding: 0.5rem;
  font-weight: bold;
  text-align: center;
  border: none;
}
order-summary .overview .total table th:first-of-type, order-summary .overview .total table td:first-of-type, order-summary .bottom-bar .total table th:first-of-type, order-summary .bottom-bar .total table td:first-of-type {
  text-align: left;
}
order-summary .overview .total table tbody tr td, order-summary .bottom-bar .total table tbody tr td {
  background-color: color-mix(in srgb, var(--pal-bg2), var(--pal-outline) 10%);
}
order-summary .overview .total table tbody tr td:first-of-type, order-summary .bottom-bar .total table tbody tr td:first-of-type {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
order-summary .overview .total table tbody tr td:nth-of-type(2), order-summary .bottom-bar .total table tbody tr td:nth-of-type(2) {
  width: 5rem;
}
order-summary .overview .total table tbody tr td:nth-of-type(3), order-summary .bottom-bar .total table tbody tr td:nth-of-type(3) {
  width: 5rem;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
order-summary .overview .total table tbody tr[data-error=overweight] td, order-summary .bottom-bar .total table tbody tr[data-error=overweight] td {
  animation: flash 1s infinite steps(2, jump-none);
  background-color: var(--pal-error);
  color: var(--pal-error--contrast);
}
order-summary .overview .restart, order-summary .bottom-bar .restart {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  color: var(--pal-text);
  font-size: 0.8rem;
  font-weight: bold;
  padding: 0.5rem 0;
  margin-left: 1rem;
  width: 7rem;
  text-decoration: none;
}
order-summary .overview .restart::after, order-summary .bottom-bar .restart::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.5rem;
  background-image: url("/asset/chevron.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
@media (min-width: 1200px) {
  order-summary .overview .restart, order-summary .bottom-bar .restart {
    position: absolute;
    top: -6rem;
    right: 14.5rem;
  }
}
order-summary .overview .info, order-summary .bottom-bar .info {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  margin: 1rem 0;
  margin-top: 0;
}
order-summary .overview .info::before, order-summary .bottom-bar .info::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  background-image: url("/asset/info.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}
order-summary .overview .info[data-error], order-summary .bottom-bar .info[data-error] {
  color: var(--pal-error);
}
order-summary .overview .info[data-error]::before, order-summary .bottom-bar .info[data-error]::before {
  background-image: url("/asset/info-error.svg");
}
order-summary .overview .info[data-error][data-error=oversize], order-summary .bottom-bar .info[data-error][data-error=oversize] {
  position: relative;
  background-color: #333333;
  color: white;
  border-radius: 0.5rem;
  margin: 1rem;
}
@media (min-width: 720px) {
  order-summary .overview .info[data-error][data-error=oversize], order-summary .bottom-bar .info[data-error][data-error=oversize] {
    margin: 0;
    margin-top: 1rem;
  }
}
order-summary .overview .info[data-error][data-error=oversize] span, order-summary .bottom-bar .info[data-error][data-error=oversize] span {
  font-size: 0.8rem;
}
@media (min-width: 720px) {
  order-summary .overview .info[data-error][data-error=oversize] span, order-summary .bottom-bar .info[data-error][data-error=oversize] span {
    font-size: 1.5rem;
    padding: 4rem;
    padding-left: 8rem;
  }
}
order-summary .overview .info[data-error][data-error=oversize]::before, order-summary .bottom-bar .info[data-error][data-error=oversize]::before {
  position: absolute;
  background-image: none;
  mask-image: url("/asset/warning.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: 50%;
  background-color: white;
  width: 3rem;
  height: 3rem;
  top: 4.75rem;
  left: 4rem;
}
order-summary .overview .info span, order-summary .bottom-bar .info span {
  font-family: "Gio", sans-serif;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  font-size: 0.9rem;
  translate: 0 -0.2rem;
}
@media (min-width: 414px) {
  order-summary .overview .info span, order-summary .bottom-bar .info span {
    font-size: 1.1rem;
  }
}
@media (max-width: 960px) {
  order-summary .bottom-bar {
    margin-top: -0.5rem;
  }
}
order-summary .bottom-bar > .next-step {
  display: block;
  margin: 0.5rem 0;
  width: calc(100% - 11rem);
  text-align: center;
}
@media (min-width: 960px) {
  order-summary .bottom-bar > .next-step {
    width: calc(100% - 7rem);
  }
}
@media (min-width: 1160px) {
  order-summary .bottom-bar > .next-step {
    margin-top: 1rem;
    width: calc(100% - 2rem);
    font-size: calc(1rem + 2px);
  }
  order-summary .bottom-bar > .next-step::before {
    content: "NEXT - ";
  }
}
order-summary .bottom-bar > .complete {
  width: calc(100% - 11rem);
}
@media (min-width: 960px) {
  order-summary .bottom-bar > .complete {
    width: 100%;
  }
}
order-summary .bottom-bar > .complete p {
  display: none;
  font-weight: bold;
  text-align: center;
}
@media (min-width: 960px) {
  order-summary .bottom-bar > .complete p {
    display: block;
  }
}
@media (min-width: 1160px) {
  order-summary .bottom-bar > .complete p {
    padding: 1rem 2rem;
  }
}
order-summary .bottom-bar > .complete form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 1160px) {
  order-summary .bottom-bar > .complete form {
    margin-top: 2rem;
  }
}
order-summary .bottom-bar > .complete form button, order-summary .bottom-bar > .complete form submit-form .actions a, submit-form .actions order-summary .bottom-bar > .complete form a, order-summary .bottom-bar > .complete form *.button, order-summary .bottom-bar > .complete form .bottom-bar > .next-step {
  margin-bottom: 0.5rem;
  width: 100%;
}
order-summary .bottom-bar > .complete form button:last-of-type, order-summary .bottom-bar > .complete form submit-form .actions a:last-of-type, submit-form .actions order-summary .bottom-bar > .complete form a:last-of-type, order-summary .bottom-bar > .complete form .button:last-of-type, order-summary .bottom-bar > .complete form .bottom-bar > .next-step:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 720px) {
  order-summary .bottom-bar > .complete form button, order-summary .bottom-bar > .complete form submit-form .actions a, submit-form .actions order-summary .bottom-bar > .complete form a, order-summary .bottom-bar > .complete form *.button, order-summary .bottom-bar > .complete form .bottom-bar > .next-step {
    width: auto;
  }
}
@media (min-width: 1160px) {
  order-summary .bottom-bar > .complete form button, order-summary .bottom-bar > .complete form submit-form .actions a, submit-form .actions order-summary .bottom-bar > .complete form a, order-summary .bottom-bar > .complete form *.button, order-summary .bottom-bar > .complete form .bottom-bar > .next-step {
    width: 100%;
    font-size: calc(1rem + 2px);
  }
}
@media (min-width: 720px) {
  order-summary .bottom-bar > .complete form button[value=submit-order]::after, order-summary .bottom-bar > .complete form submit-form .actions a[value=submit-order]::after, submit-form .actions order-summary .bottom-bar > .complete form a[value=submit-order]::after, order-summary .bottom-bar > .complete form [value=submit-order].button::after, order-summary .bottom-bar > .complete form .bottom-bar > [value=submit-order].next-step::after {
    content: " to the sales team";
  }
}
@media (min-width: 960px) {
  order-summary .bottom-bar > .complete form button[value=submit-order]::after, order-summary .bottom-bar > .complete form submit-form .actions a[value=submit-order]::after, submit-form .actions order-summary .bottom-bar > .complete form a[value=submit-order]::after, order-summary .bottom-bar > .complete form [value=submit-order].button::after, order-summary .bottom-bar > .complete form .bottom-bar > [value=submit-order].next-step::after {
    content: "";
  }
}
@media (min-width: 1160px) {
  order-summary .bottom-bar > .complete form button[value=submit-order]::after, order-summary .bottom-bar > .complete form submit-form .actions a[value=submit-order]::after, submit-form .actions order-summary .bottom-bar > .complete form a[value=submit-order]::after, order-summary .bottom-bar > .complete form [value=submit-order].button::after, order-summary .bottom-bar > .complete form .bottom-bar > [value=submit-order].next-step::after {
    content: " to the sales team";
  }
}
order-summary .bottom-bar > .complete form button[value=download-submit], order-summary .bottom-bar > .complete form submit-form .actions a[value=download-submit], submit-form .actions order-summary .bottom-bar > .complete form a[value=download-submit], order-summary .bottom-bar > .complete form [value=download-submit].button, order-summary .bottom-bar > .complete form .bottom-bar > [value=download-submit].next-step, order-summary .bottom-bar > .complete form button[value=download], order-summary .bottom-bar > .complete form submit-form .actions a[value=download], submit-form .actions order-summary .bottom-bar > .complete form a[value=download], order-summary .bottom-bar > .complete form [value=download].button, order-summary .bottom-bar > .complete form .bottom-bar > [value=download].next-step {
  --bg: var(--pal-brand);
}
@media (min-width: 720px) {
  order-summary .bottom-bar {
    flex-direction: column;
    align-items: center;
  }
  order-summary .bottom-bar > .info {
    order: -1;
    margin-top: 1rem;
    color: var(--pal-text);
  }
  order-summary .bottom-bar > .info span {
    padding-top: 0.2rem;
  }
}
order-summary .product-list {
  list-style-type: none;
  margin: 0;
  padding: 0 1rem;
}
@media (min-width: 960px) {
  order-summary .product-list {
    padding: 0;
  }
}
order-summary .product-list:empty::before {
  content: "Select and add products to the load selector using the drop down menus opposite.";
  display: block;
  padding: 4rem;
  text-align: center;
}
order-summary .product-list > li .headers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
order-summary .product-list > li .headers h4 {
  display: flex;
  flex-grow: 1;
  align-items: center;
  font-size: 0.8rem;
}
order-summary .product-list > li .headers span {
  font-size: 0.8rem;
  font-weight: bold;
  width: 5rem;
  text-align: center;
}
order-summary .detail-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
order-summary .detail-list > li {
  display: flex;
  border-top: 1px solid var(--pal-outline);
}
order-summary .detail-list > li > form {
  position: relative;
  top: 0;
  right: 0;
  flex-grow: 1;
}
order-summary .detail-list > li > form > details > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
order-summary .detail-list > li > form > details > summary::-webkit-details-marker, order-summary .detail-list > li > form > details > summary::marker {
  display: none;
  content: "";
}
order-summary .detail-list > li > form > details > summary > h5 {
  display: flex;
  align-items: center;
  flex-grow: 1;
  cursor: pointer;
  margin: 0;
  font-weight: normal;
}
order-summary .detail-list > li > form > details > summary > h5 span {
  display: inline-block;
  max-width: 8rem;
}
@media (min-width: 1200px) {
  order-summary .detail-list > li > form > details > summary > h5 span {
    max-width: 12rem;
    width: 12rem;
  }
}
order-summary .detail-list > li > form > details > summary > h5::after {
  content: "";
  display: inline-block;
  margin-left: 0.5rem;
  height: 0.7rem;
  aspect-ratio: 1;
  background-image: url("/asset/chevron.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
order-summary .detail-list > li > form > details > summary > h5:hover {
  text-decoration: underline;
}
order-summary .detail-list > li > form > details > summary > label {
  width: 5rem;
}
order-summary .detail-list > li > form > details > summary > label input {
  box-sizing: border-box;
  -moz-appearance: textfield;
  width: 5rem;
  padding: 0.5rem;
  height: 2rem;
  border: 1px solid var(--pal-outline);
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}
order-summary .detail-list > li > form > details > summary > label input::-webkit-outer-spin-button, order-summary .detail-list > li > form > details > summary > label input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
order-summary .detail-list > li > form > details > summary > span {
  font-size: 0.8rem;
  width: 5rem;
  font-weight: bold;
  text-align: center;
}
order-summary .detail-list > li > form > details[open] > summary > h5::after {
  rotate: 90deg;
}
order-summary .detail-list > li > form > details > div {
  display: flex;
  margin-bottom: 1rem;
}
order-summary .detail-list > li > form > details > div > img {
  width: 8rem;
  margin-right: 1rem;
}
order-summary .detail-list > li > form > details > div > img[data-category=Thermalite], order-summary .detail-list > li > form > details > div > img[data-category=Conbloc] {
  height: 3.5rem;
  object-fit: cover;
}
order-summary .detail-list > li > form > details > div dl {
  font-size: 0.8rem;
}
order-summary .detail-list > li > form > details > div dl > div {
  margin-bottom: 0.5rem;
}
order-summary .detail-list > li > form > details > div dl dt {
  display: inline-block;
  font-weight: bold;
  width: 6rem;
}
order-summary .detail-list > li > form > details > div dl dd {
  display: inline-block;
  padding: 0;
  margin: 0;
}
order-summary ::-webkit-inner-spin-button, order-summary ::-webkit-outer-spin-button {
  display: none;
}
order-summary dialog {
  display: none;
}

submit-form {
  display: block;
  margin-bottom: 24rem;
  background-color: var(--pal-bg2);
  border-radius: 0.5rem;
}
@media (min-width: 960px) {
  submit-form {
    background-color: var(--pal-bg1);
    margin-left: 2rem;
  }
  submit-form::before {
    content: "Please complete the form with your details";
    display: block;
    font-weight: bold;
    padding: 2rem;
  }
}
submit-form label {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  width: 100%;
}
submit-form label > span {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}
submit-form label > input, submit-form label > textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--pal-outline);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 0.8rem;
}
submit-form label > input::placeholder, submit-form label > textarea::placeholder {
  font-weight: normal;
}
@media (min-width: 960px) {
  submit-form label > input, submit-form label > textarea {
    border: none;
    padding: 0.5rem;
  }
}
submit-form label > textarea {
  flex-grow: 1;
  resize: none;
}
submit-form form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 1rem;
}
@media (min-width: 960px) {
  submit-form form {
    margin: 0 2rem;
  }
}
submit-form form > div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
submit-form form > div > div {
  width: 50%;
}
submit-form form > div > div.notes {
  display: flex;
  align-items: stretch;
}
submit-form form > div > div.notes label {
  justify-content: stretch;
  margin-bottom: calc(1rem - 1px);
}
submit-form .actions {
  flex-direction: column;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
submit-form .actions button, submit-form .actions a, submit-form .actions *.button, submit-form .actions order-summary .bottom-bar > .next-step, order-summary submit-form .actions .bottom-bar > .next-step {
  width: 80%;
  margin: 0 auto;
}
submit-form .actions a {
  background-color: transparent;
  color: var(--pal-brand);
}
submit-form .actions a:hover {
  background-color: transparent;
  text-decoration: underline;
}
submit-form .address-container textarea {
  height: 6rem;
}
submit-form .address-container .suggestions {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
  max-width: 22rem;
}
submit-form .address-container .suggestions:empty {
  display: none;
}
submit-form .address-container .suggestions::before {
  content: "";
  position: absolute;
  z-index: 0;
  display: block;
  width: 1rem;
  aspect-ratio: 1;
  background-color: var(--pal-bg2);
  rotate: 45deg;
  translate: 0.5rem -0.5rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
}
submit-form .address-container .suggestions li {
  position: relative;
  z-index: 10;
  background-color: var(--pal-bg2);
}
submit-form .address-container .suggestions li a {
  display: block;
  color: var(--pal-text);
  font-size: 0.8rem;
  text-decoration: none;
  padding: 0.5rem;
}
submit-form .address-container .suggestions li a:hover {
  text-decoration: underline;
}

body {
  font-family: sans-serif;
}
body > header {
  background-color: var(--pal-bg2);
  padding: 1rem;
}
.embedded body > header {
  display: none;
}
body > header > h1 {
  max-width: 524px;
  margin: 0 auto;
  background-image: url("/asset/forterra.svg");
  background-size: auto 100%;
  background-repeat: no-repeat;
}
@media (min-width: 960px) {
  body > header > h1 {
    max-width: 720px;
  }
}
@media (min-width: 1160px) {
  body > header > h1 {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  body > header > h1 {
    max-width: 1160px;
  }
}
body > header > h1 > a {
  display: block;
  text-decoration: none;
  color: transparent;
}

body.uri--index tabbed-header > section > p {
  display: block;
}
body.uri--index tabbed-header > section > p > span {
  display: inline-block;
}
body.uri--index tabbed-header .close {
  display: none;
}
body.uri--index .intro-text {
  box-sizing: border-box;
  margin: 0 auto;
  margin-bottom: 2rem;
  padding: 1rem;
  padding-bottom: 2rem;
  background-color: var(--pal-bg2);
  max-width: min(100vw - 1rem, 524px - 1rem);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
@media (min-width: 720px) {
  body.uri--index .intro-text {
    max-width: 524px;
  }
}
@media (min-width: 960px) {
  body.uri--index .intro-text {
    max-width: 720px;
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}
@media (min-width: 1160px) {
  body.uri--index .intro-text {
    max-width: 960px;
    gap: 6rem;
  }
}
@media (min-width: 1200px) {
  body.uri--index .intro-text {
    max-width: 1160px;
  }
}
body.uri--index .intro-text h2 {
  font-family: sans-serif;
  font-size: 1rem;
  padding: 0 0.75rem;
}
@media (min-width: 1160px) {
  body.uri--index .intro-text h2 {
    padding: 0 2rem;
  }
}
@media (min-width: 960px) {
  body.uri--index .intro-text p {
    font-size: 0.9rem;
  }
}
body.uri--index .intro-text ul {
  padding: 0 1rem;
  padding-left: 1.5rem;
  font-size: 0.8rem;
  line-height: 1.25;
  margin-bottom: 2rem;
}
body.uri--index .intro-text ul.hyphens-instead-of-bullets {
  padding-left: 0.6rem;
}
body.uri--index .intro-text ul.hyphens-instead-of-bullets li::marker {
  content: "- ";
  color: var(--pal-text-light);
}
@media (min-width: 1160px) {
  body.uri--index .intro-text ul {
    padding: 0 2rem;
    padding-left: 2.75rem;
  }
}
body.uri--index .intro-text ul li {
  margin-bottom: 0.5rem;
}
body.uri--index .intro-text ul li p {
  margin: 0;
  color: var(--pal-text-light);
}
body.uri--index .intro-text ul li p strong {
  color: var(--pal-text-dark);
}
body.uri--index .intro-text ul li ul {
  margin-bottom: 0;
}
body.uri--index .intro-text ul li ul li {
  margin-bottom: 0;
}
body.uri--index .intro-text ul.darker p {
  color: var(--pal-text);
}
@media (min-width: 960px) {
  body.uri--index .intro-text > div {
    width: calc(50% - 3rem);
  }
}
@media (min-width: 1160px) {
  body.uri--index .intro-text > div {
    width: calc(50% - 6rem);
  }
}
body.uri--index load-visualiser {
  position: relative;
  box-shadow: none;
}
body.uri--index load-visualiser #render {
  margin-left: auto;
  margin-right: auto;
}

body.uri--thank-you > div {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 2rem;
}
@media (min-width: 960px) {
  body.uri--thank-you > div {
    padding: 0 8rem;
    padding-top: 8rem;
    padding-bottom: 2rem;
  }
}
body.uri--thank-you > div p {
  font-size: 1.2rem;
  text-align: center;
}
@media (min-width: 960px) {
  body.uri--thank-you > div p {
    font-size: 1.4rem;
  }
}
body.uri--thank-you > div p a {
  color: inherit;
  text-decoration: none;
}
body.uri--thank-you > div form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
}
@media (min-width: 720px) {
  body.uri--thank-you > div form {
    flex-direction: row;
  }
}
body.uri--thank-you > div form button, body.uri--thank-you > div form *.button, body.uri--thank-you > div form order-summary .bottom-bar > .next-step, order-summary body.uri--thank-you > div form .bottom-bar > .next-step, body.uri--thank-you > div form submit-form .actions a, submit-form .actions body.uri--thank-you > div form a {
  padding-left: 2rem;
  padding-right: 2rem;
}

@page {
  margin-left: 0cm;
  margin-right: 0cm;
  margin-top: 0cm;
  margin-bottom: 0cm;
}
@media print {
  html {
    width: 100%;
    height: 100%;
    background: red;
  }
}
body.uri--pdf {
  background: white;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 0.8rem;
}
@media screen {
  body.uri--pdf {
    width: 210mm;
    height: 297mm;
  }
}
body.uri--pdf::before {
  content: "";
  display: block;
  background: #00abe7;
  height: 1rem;
}
body.uri--pdf > header {
  display: none;
}

section.top {
  margin: 2rem;
  padding-top: 1rem;
}
section.top img {
  float: right;
}
section.top h1 {
  font-size: 3.25rem;
  margin: 0;
  margin-top: -0.7rem;
  letter-spacing: 0.05em;
}
section.top h2 {
  margin: 0;
}
section.top dl {
  display: flex;
  flex-wrap: wrap;
  width: 12rem;
}
section.top dl dt {
  width: 5rem;
}
section.top dl dt::after {
  content: ":";
}
section.top dl dd {
  margin: 0;
  padding: 0;
}
section.contact {
  margin: 0 2rem;
  background-color: var(--pal-bg1);
}
section.contact ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-top: 1rem;
  padding-left: 2rem;
  padding-bottom: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
section.contact ul > li {
  margin-bottom: 0.5rem;
}
section.contact ul > li label {
  display: block;
}
section.contact ul > li label span:first-of-type {
  display: inline-block;
  width: 6rem;
}
section.contact ul > li label span:last-of-type {
  font-weight: bold;
}
section.summary {
  margin: 0 2rem;
  margin-top: 1rem;
  background-color: var(--pal-bg1);
}
section.summary h1 {
  margin: 0;
  padding: 1rem 2rem;
}
section.summary p.note {
  padding: 1rem 2rem;
  padding-top: 0;
  margin-top: 0;
  font-weight: bold;
  font-size: 1.25em;
}
section.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  padding-bottom: 1rem;
  background-color: white;
  background-image: url("/asset/socials.svg");
  background-size: auto 3rem;
  background-position: right 2rem bottom 1rem;
  background-repeat: no-repeat;
}
section.bottom p {
  margin: 0;
}
section print-summary {
  display: block;
}
section print-summary .product-list {
  margin: 0 2rem;
  padding: 0;
  list-style-type: none;
}
section print-summary .product-list .headers {
  display: flex;
  padding: 0.25rem 0;
  border-bottom: 1px solid black;
}
section print-summary .product-list .headers.additional {
  padding-top: 1rem;
}
section print-summary .product-list .headers h4 {
  margin: 0;
  flex-grow: 1;
  font-size: 0.8rem;
}
section print-summary .product-list .headers span {
  width: 6rem;
  text-align: center;
  font-weight: bold;
}
section print-summary .product-list .headers span:last-of-type {
  text-align: right;
}
section print-summary .detail-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
section print-summary .detail-list > li {
  border-bottom: 1px solid black;
  padding: 0.25rem 0;
}
section print-summary .detail-list .summary {
  display: flex;
}
section print-summary .detail-list .summary h5 {
  flex-grow: 1;
  font-size: 0.9rem;
  margin: 0;
  font-weight: normal;
}
section print-summary .detail-list .summary span {
  width: 6rem;
  text-align: center;
}
section print-summary .detail-list .summary span:last-of-type {
  text-align: right;
}
section print-summary .total-box {
  display: flex;
  padding: 0.5rem 0;
}
section print-summary .total-box h6 {
  flex-grow: 1;
  font-size: 0.9rem;
  margin: 0;
}
section print-summary .total-box span {
  width: 6rem;
  font-weight: bold;
  text-align: center;
}
section print-summary .total-box span:last-of-type {
  text-align: right;
}
section load-visualiser {
  position: relative;
  display: flex !important;
  justify-content: center;
  background-color: var(--pal-bg1);
  padding: 0;
  padding-top: 2rem;
  max-width: 100% !important;
}
section load-visualiser #render {
  align-self: center;
  justify-self: center;
  margin: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 32rem;
}
section load-visualiser.small {
  width: 24rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 0;
}
section terms-conditions {
  display: block;
  padding-bottom: 1rem;
  padding-right: 2rem;
}
section terms-conditions h6 {
  font-size: 0.8rem;
  padding: 0 2rem;
  margin: 0;
}
section terms-conditions ul {
  column-count: 2;
}

[hidden] {
  display: none !important;
}

/*# sourceMappingURL=style.css.map */