/** Shopify CDN: Minification failed

Line 947:2 Unexpected "{"
Line 947:3 Expected identifier but found "%"
Line 948:28 Unexpected bad string token
Line 948:75 Unterminated string token
Line 950:69 Unterminated string token
Line 951:3 Expected identifier but found "%"
Line 3099:22 Unexpected "{"
Line 3099:31 Expected ":"

**/
/* START_SECTION:announcement-marquee (INDEX:3) */
.marquee-bar {
    overflow: hidden;
    white-space: nowrap;
    padding: 0.8rem 0;
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    max-height: 6rem;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .marquee-bar__inner-anim {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  }
  html.header-condensed .marquee-bar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
  }
  html.header-condensed .marquee-bar .marquee-bar__inner-anim {
    transform: translateY(-100%);
    opacity: 0;
  }
  .marquee-bar__viewport {
    overflow: hidden;
  }
  .marquee-bar__track {
    display: flex;
    width: max-content;
    animation-name: marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .marquee-bar__set {
    display: flex;
    flex: none;
  }
  .marquee-bar__item {
    padding-right: 3.2rem;
  }
  /* --- One-at-a-time mode --------------------------------------------------
     The lines are stacked on top of each other so the bar is as tall as one
     line and never reflows as the message changes. The rotator itself is the
     positioning context and is sized by the tallest line, which is why the
     lines are absolute but the first one is not removed from the flow. */
  .marquee-bar__rotator {
    position: relative;
    display: block;
    text-align: center;
    padding: 0 1.6rem;
  }
  .marquee-bar__line {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.6rem;
    opacity: 0;
    /* A small lift as it goes and a small drop as it arrives: enough to read
       as a change of message rather than a flicker. */
    transform: translateY(0.4rem);
    transition-property: opacity, transform;
    transition-timing-function: ease;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .marquee-bar__line.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Holds the bar open. Hidden from the eye and from screen readers, it exists
     only so the row has a height of its own. */
  .marquee-bar__rotator::before {
    content: '\00a0';
    display: block;
    visibility: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee-bar__line {
      transition: none;
      transform: none;
    }
  }

  @keyframes marquee-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
/* END_SECTION:announcement-marquee */
/* START_SECTION:contact-faq (INDEX:19) */
.cfaq__head {
    max-width: 60rem;
    margin-bottom: 2.8rem;
  }
  .cfaq__heading {
    margin: 0 0 0.8rem;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .cfaq__sub {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.6;
  }

  .cfaq__list {
    /* A CSS multi-column list keeps the accordion balanced across two
       columns without a grid's fixed row heights, so an open answer
       pushes only the items below it. */
    column-gap: 2.4rem;
  }
  .cfaq__item {
    /* break-inside prevents a column boundary splitting one question
       from its answer. */
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 1.2rem;
    padding: 0 2rem;
    border: 1px solid #ded7c8;
    border-radius: 12px;
    transition: border-color 0.15s ease;
  }
  .cfaq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.8rem 0;
    cursor: pointer;
    list-style: none;
  }
  .cfaq__summary::-webkit-details-marker {
    display: none;
  }
  .cfaq__summary::marker {
    content: '';
  }
  .cfaq__question {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .cfaq__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    transition: transform 0.18s ease;
  }
  .cfaq__icon svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  .cfaq__item[open] .cfaq__icon {
    transform: rotate(180deg);
  }
  .cfaq__answer {
    padding-bottom: 1.8rem;
    font-size: 1.4rem;
    line-height: 1.65;
  }
  .cfaq__answer > :first-child {
    margin-top: 0;
  }
  .cfaq__answer > :last-child {
    margin-bottom: 0;
  }
  .cfaq__answer a {
    color: inherit;
  }

  .cfaq__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem 2.4rem;
    margin-top: 2.4rem;
    padding: 2.6rem 3.2rem;
  }
  .cfaq__cta-heading {
    margin: 0 0 0.4rem;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .cfaq__cta-text {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.55;
  }
  a.cfaq__cta-button,
  a.cfaq__cta-button:hover,
  a.cfaq__cta-button:focus {
    /* Same reason as elsewhere: base.css underlines anchors and loads
       after this compiled stylesheet. */
    text-decoration: none;
  }
  a.cfaq__cta-button {
    flex: 0 0 auto;
    display: inline-block;
    padding: 1.3rem 2.8rem;
    border-radius: 10px;
    font-size: 1.4rem;
    font-weight: 700;
  }

  @media screen and (max-width: 989px) {
    .cfaq__list {
      columns: 1 !important;
    }
  }
  @media screen and (max-width: 749px) {
    .cfaq__item {
      padding: 0 1.6rem;
    }
    .cfaq__cta {
      padding: 2rem;
    }
    a.cfaq__cta-button {
      width: 100%;
      text-align: center;
    }
  }
/* END_SECTION:contact-faq */
/* START_SECTION:custom-footer (INDEX:23) */
.tf {
    display: block;
  }
  .tf__top {
    display: grid;
    align-items: start;
    border-bottom: 1px solid;
  }
  /* The mark and the sentence side by side, so the band is one line deep on a
     desktop and two on a phone — it is an introduction, not a section. */
  .tf__band {
    padding-bottom: 2.4rem;
  }
  .tf__brand--band {
    display: flex;
    align-items: center;
    gap: 1.6rem;
  }
  .tf__brand--band .tf__logo,
  .tf__brand--band .tf__logo-text {
    flex: none;
  }
  .tf__brand--band .tf__blurb {
    /* No top margin: in the band it sits beside the mark, not under it. */
    margin: 0;
    /* Wider than the column version, which was sized for a narrow column. */
    max-width: 70ch;
  }
  .tf__brand--band .tf__badges {
    margin-top: 1.2rem;
  }
  @media screen and (max-width: 749px) {
    .tf__brand--band {
      align-items: flex-start;
      gap: 1.2rem;
    }
    .tf__brand--band .tf__blurb {
      max-width: none;
    }
  }
  .tf__logo {
    display: block;
    height: auto;
    max-width: 100%;
  }
  /* A transparent PNG or SVG can simply be flooded white. */
  .tf__logo--white {
    filter: brightness(0) invert(1);
  }
  .tf__logo--dark {
    filter: brightness(0);
  }
  /* For a JPG, which always carries an opaque background: invert it so the
     white surround becomes black and the artwork becomes light, then blend
     with screen, under which black is a no-op. The surround disappears and a
     clean light version of the mark is left on the footer colour. */
  .tf__logo--knockout {
    filter: grayscale(1) invert(1) brightness(1.5) contrast(1.15);
    mix-blend-mode: screen;
  }
  /* Tile (2026-09-29, owner): square logo on a small rounded light panel, with
     the name and sentence beside it, as on the Total Sheds footer. The panel
     colour is the "Logo panel colour" setting; the size is "Logo width".
     tune: 4px = space round the logo inside the tile; 14px = corner rounding;
     2rem = name size. */
  .tf__id {
    display: flex;
    /* Top-aligned so the name starts level with the top of the tile. */
    align-items: flex-start;
    gap: 1.6rem;
    min-width: 0;
  }
  .tf__logo--tile {
    flex: none;
    padding: 4px;
    border-radius: 14px;
    box-sizing: border-box;
  }
  .tf__id-text {
    min-width: 0;
  }
  .tf__name {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    /* line-height 1 plus a small lift removes the space above the capitals,
       so the top of the "E" lines up with the top of the tile.
       tune: -0.1em = lift; 0.4rem = gap from name to sentence. */
    line-height: 1;
    margin-top: -0.1em;
  }
  .tf__id .tf__blurb {
    margin: 0.4rem 0 0;
  }
  /* Owner, 2026-09-29: the sentence wraps after "treated and", but the badges
     stay where they were — so the sentence's box keeps its old width (which is
     what places the badges) and only the text inside it is narrowed.
     tune: 36em = longest line of the sentence; 70ch = space before the badges. */
  .tf__brand--band .tf__id .tf__blurb {
    width: 70ch;
    max-width: 100%;
  }
  /* The rich-text sentence arrives in its own paragraph, whose default top
     margin was most of the gap under the name. */
  .tf__id .tf__blurb > p {
    margin: 0;
    max-width: 36em;
  }
  /* Keeps the logo's real colours by giving it a light panel to sit on. */
  .tf__logo--plate {
    padding: 10px 14px;
    border-radius: 6px;
    box-sizing: content-box;
  }
  .tf__logo-text {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .tf__blurb {
    margin: 1.4rem 0 0;
    line-height: 1.6;
    opacity: 0.75;
    max-width: 34ch;
  }
  .tf__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.8rem 0 0;
    padding: 0;
    list-style: none;
  }
  .tf__badge {
    padding: 0.5rem 0.9rem;
    border: 1px solid;
    border-radius: 100px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.8;
  }
  .tf__heading {
    margin: 0 0 1.4rem;
    font-family: var(--font-body-family);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
  }
  .tf__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.9rem;
  }
  .tf__list a,
  .tf__contact,
  .tf__policies a {
    color: inherit;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.15s ease, color 0.15s ease;
  }
  .tf__list a:hover,
  .tf__contact:hover,
  .tf__policies a:hover {
    opacity: 1;
  }
  .tf__contact {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  .tf__contact--strong {
    font-size: 1.9rem;
    font-weight: 700;
    opacity: 1;
  }
  /* A long email address is one unbroken token, so without this it
     refused to wrap and spilled over the next footer column. */
  .tf__contact > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .tf__contact-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 10px;
    /* Each contact method gets its own colour so the three rows read as
       three different things at a glance. A single neutral tile made
       them blur into one block. The tint and the stroke come from the
       same hue, set per row below. */
    background: color-mix(in srgb, var(--tf-icon, #a8ce8e) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--tf-icon, #a8ce8e) 38%, transparent);
    color: var(--tf-icon, #a8ce8e);
    transition: background-color 0.15s ease;
  }
  .tf__contact:hover .tf__contact-icon {
    background: color-mix(in srgb, var(--tf-icon, #a8ce8e) 34%, transparent);
  }
  .tf__contact-icon svg {
    display: block;
    width: 1.7rem;
    height: 1.7rem;
  }
  .tf__contact--phone {
    --tf-icon: #8FCB6E;
  }
  .tf__contact--email {
    --tf-icon: #E8B44A;
  }
  /* The address needs about 214px of column. Rather than trimming the type
     until it just fits at one particular width, the column is a query
     container and the link swaps to the word "Email" whenever the column is
     too narrow to hold the address honestly. */
  .tf__col {
    container-type: inline-size;
  }
  .tf__contact--email > .tf__contact-text {
    font-size: 1.35rem;
    letter-spacing: -0.005em;
    overflow-wrap: normal;
  }
  .tf__contact-short {
    display: none;
  }
  @container (max-width: 15.5rem) {
    .tf__contact-full {
      display: none;
    }
    .tf__contact-short {
      display: inline;
    }
  }
  @supports not (container-type: inline-size) {
    /* Older engines get the same swap on viewport width instead. */
    @media screen and (max-width: 1100px) and (min-width: 750px) {
      .tf__contact-full {
        display: none;
      }
      .tf__contact-short {
        display: inline;
      }
    }
  }
  .tf__contact--hours {
    --tf-icon: #8FB8D9;
  }

  .tf__hours {
    margin-bottom: 0.6rem;
  }
  .tf__hours-toggle {
    margin-bottom: 0;
    cursor: pointer;
    list-style: none;
  }
  .tf__hours-toggle::-webkit-details-marker {
    display: none;
  }
  .tf__hours-toggle::marker {
    content: '';
  }
  .tf__hours-label {
    font-weight: 600;
  }
  .tf__hours-caret {
    width: 1rem;
    height: 1rem;
    margin-left: 0.2rem;
    transition: transform 0.18s ease;
  }
  .tf__hours[open] .tf__hours-caret {
    transform: rotate(180deg);
  }
  .tf__hours-list {
    margin: 1rem 0 0;
    padding: 1.2rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    list-style: none;
    display: grid;
    gap: 0.7rem;
  }
  .tf__hours-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.6rem;
    font-size: 1.3rem;
    line-height: 1.4;
  }
  .tf__hours-day {
    opacity: 0.75;
  }
  .tf__hours-time {
    font-weight: 600;
    white-space: nowrap;
  }
  .tf__rte {
    margin-top: 1rem;
    line-height: 1.6;
    opacity: 0.75;
  }
  .tf__rte p {
    margin: 0 0 0.8rem;
  }
  .tf__newsletter-text {
    margin: 0 0 1.4rem;
    line-height: 1.6;
    opacity: 0.75;
  }
  .tf__form {
    margin: 0;
  }
  /* Input and button share one bordered box so the field reads as a single
     control rather than a stray outline floating in the middle of the page. */
  .tf__field {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    overflow: hidden;
  }
  .tf__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.2rem 1.4rem;
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: 1.4rem;
  }
  .tf__input::placeholder {
    color: currentColor;
    opacity: 0.55;
  }
  .tf__input:focus {
    outline: none;
  }
  .tf__field:focus-within {
    border-color: rgba(255, 255, 255, 0.5);
  }
  .tf__submit {
    flex: none;
    padding: 0 1.8rem;
    border: none;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .tf__form-note {
    margin: 0.9rem 0 0;
    font-size: 1.3rem;
    opacity: 0.8;
  }
  .tf__form-note--error {
    opacity: 1;
  }
  .tf__social {
    display: flex;
    gap: 1.6rem;
    margin: 1.8rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 1.3rem;
  }
  .tf__social a {
    color: inherit;
    text-decoration: none;
    opacity: 0.75;
  }
  .tf__social a:hover {
    opacity: 1;
  }
  .tf__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem 2.4rem;
    padding-top: 2.2rem;
    font-size: 1.25rem;
  }
  .tf__bottom-left,
  .tf__bottom-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
  }
  .tf__copy {
    opacity: 0.7;
  }
  .tf__policies {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tf__vat {
    opacity: 0.7;
  }
  .tf__payments {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tf__payment-icon {
    width: 3.6rem;
    height: 2.3rem;
    display: block;
  }

  @media screen and (max-width: 989px) {
    .tf__top {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  @media screen and (max-width: 749px) {
    /* The wide wordmark, description and badges cannot share one row on a
       phone without reducing the description to a column a few words wide.
       Stack the three pieces so every line uses the available viewport. */
    .tf__brand--band {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 1.4rem;
    }
    .tf__brand--band .tf__logo {
      width: auto;
      max-width: min(18rem, 62vw);
    }
    .tf__brand--band .tf__blurb,
    .tf__brand--band .tf__badges {
      width: 100%;
      min-width: 0;
      margin: 0;
    }
    .tf__brand--band .tf__blurb {
      line-height: 1.55;
      overflow-wrap: anywhere;
    }
    .tf__top {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .tf__col,
    .tf__list,
    .tf__list li,
    .tf__list a {
      min-width: 0;
      max-width: 100%;
    }
    .tf__list a {
      overflow-wrap: anywhere;
    }
    .tf__bottom {
      justify-content: flex-start;
    }
  }
/* END_SECTION:custom-footer */
/* START_SECTION:custom-header (INDEX:24) */
.header-wrapper-2 {
    position: relative;
    /* Above anything a section can reach. The open mega menu is inside this
       element, so whatever number is here is the ceiling for the menu too —
       it cannot rise above its own parent's place in the stack however high
       its own z-index goes. */
    z-index: 100;
  }
  .header-wrapper-2--sticky {
    position: sticky;
    top: 0;
  }
  html.header-condensed .header-wrapper-2--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  /* No transition on this margin. Condensing swaps the header from sticky to
     fixed, which takes it out of flow and drops the page by the header's
     height in a single frame; the margin here is the compensation for exactly
     that. Animating the compensation over 0.4s meant the content visibly
     jumped up and then eased back down while you were still scrolling — the
     jitter in the first moment of every scroll, on every page. Applied
     instantly in the same frame as the position swap, the two cancel out and
     nothing moves. */
  #MainContent {
    transition: none;
  }
  .header-wrapper-2--border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .header-2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem 2.6rem;
  }
  .header-2__logo {
    flex: none;
    display: flex;
  }
  .header-2__logo-image {
    height: 4.2rem;
    width: auto;
    display: block;
  }
  /* Both logos are in the markup so neither has to be swapped in after paint.
     The mark is hidden everywhere by default and revealed only inside the
     mobile stylesheet's breakpoint — without this it stacked above the
     wordmark on desktop. */
  .header-2__logo-image--mobile {
    display: none;
  }
  .header-2__search-row {
    flex: 1 1 44rem;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.8rem;
    max-width: var(--header-search-max-width, 76rem);
  }
  .header-2__search-form {
    flex: 1 1 auto;
    min-width: 20rem;
  }
  .header-2__search-form .field {
    background: var(--header-search-bg, #EDECE7);
    border-radius: var(--header-search-radius, 6px);
    overflow: hidden;
  }
  .header-2__search-form .field:before {
    box-shadow: none;
  }
  .header-2__search-form .field:after {
    border-radius: var(--header-search-radius, 6px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  }
  .header-2__search-form .search__input.field__input {
    background: transparent;
    border-color: transparent;
    border-radius: var(--header-search-radius, 6px);
    padding-top: var(--header-search-padding-y, 12px);
    padding-bottom: var(--header-search-padding-y, 12px);
    padding-left: 5rem;
    padding-right: 1.4rem;
    height: var(--header-search-btn-size, 41px);
    font-size: 1.3rem;
  }
  .header-2__search-form .search__button.field__button {
    position: absolute;
    left: 0.6rem;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    height: var(--header-search-btn-size, 41px);
    width: 4.2rem;
  }
  .header-2__search-form .search__button.field__button > .svg-wrapper {
    height: 2rem;
    width: 2rem;
  }
  .header-2__search-form .search__input.field__input::placeholder {
    opacity: 1;
    color: rgba(18, 18, 18, 0.55);
  }
  .header-2__rating {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    white-space: nowrap;
    font-size: 1rem;
  }
  .header-2__rating-stars {
    display: flex;
    gap: 0.2rem;
  }
  .header-2__icons {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--header-icon-gap, 2rem);
  }
  a.header-2__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    position: relative;
    text-decoration: none;
    text-align: center;
  }
  .header-2__icon-label {
    white-space: nowrap;
    font-weight: var(--header-icon-label-weight, 500);
  }
  .header-2__icon--cart .cart-count-bubble {
    top: -0.4rem;
    right: -0.6rem;
    bottom: auto;
    left: auto;
    background-color: #5B8C42;
    color: #fff;
  }
  summary.header-2__delivery-button {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    white-space: nowrap;
    border-radius: var(--header-postcode-radius, 8px);
    padding: 1rem 1.6rem;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    background: var(--header-postcode-bg, #F1EAD9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  summary.header-2__delivery-button:hover {
    border-color: #5B8C42;
    color: #5B8C42;
    text-decoration: none;
  }
  .header-2__delivery-button::-webkit-details-marker {
    display: none;
  }

  /* Icon presentation: strip the pill chrome so it sits in the icon row
     as a peer of Saved / Contact / Sign in rather than as a button. The
     selectors are tag-qualified to match the pill rules above, which are
     `summary.header-2__delivery-button` and would otherwise win. */
  .header-2__delivery--icon summary.header-2__delivery-button {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    font-size: 1.1rem;
    font-weight: var(--header-icon-label-weight, 500);
    text-align: center;
  }
  .header-2__delivery--icon summary.header-2__delivery-button:hover {
    color: #5b8c42;
  }
  .header-2__delivery--icon .svg-wrapper svg {
    width: 2rem;
    height: 2rem;
  }
  .header-2__delivery--icon .header-2__delivery-label {
    white-space: nowrap;
  }
  .header-2__delivery-modal.modal__content {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }
  .header-2__delivery-modal .modal-overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  {%- comment -%}
    The modal inherited Dawn's generic dialog styling — square corners, a
    black button and an unstyled input — which looked nothing like the
    rest of the site. It now uses the theme's own palette and shapes.
  {%- endcomment -%}
  .header-2__delivery-modal-content {
    position: relative;
    width: 42rem;
    max-width: calc(100vw - 4rem);
    background: #fff;
    color: #26261f;
    border-radius: 14px;
    padding: 2.8rem;
    box-shadow: 0 18px 50px rgba(20, 51, 4, 0.18);
  }
  .header-2__delivery-modal-content h3 {
    margin: 0 0 0.8rem;
    padding-right: 3.2rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #143304;
  }
  .header-2__delivery-modal-content p {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.55;
    color: #5a5a4a;
  }
  .header-2__delivery-modal-content input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ded7c8;
    border-radius: 10px;
    background: #fdfbf6;
    padding: 1.3rem 1.5rem;
    margin: 1.6rem 0 1.2rem;
    /* 16px so iOS does not zoom the page when the field takes focus. */
    font-size: 1.6rem;
    font-family: inherit;
    color: #26261f;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .header-2__delivery-modal-content input::placeholder {
    color: #a8a894;
  }
  .header-2__delivery-modal-content input:focus,
  .header-2__delivery-modal-content input:focus-visible {
    outline: none;
    border-color: #5b8c42;
    box-shadow: 0 0 0 3px rgba(91, 140, 66, 0.18);
  }
  .header-2__delivery-modal-content .button {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 1.4rem 2rem;
    border: 0;
    border-radius: 10px;
    background: #143304;
    color: #fff;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .header-2__delivery-modal-content .button::after {
    /* Dawn draws a shadow ring on .button via a pseudo-element. */
    display: none;
  }
  .header-2__delivery-modal-content .button:hover {
    background: #0e2603;
  }
  .header-2__delivery-footnote {
    margin-top: 1.4rem !important;
    text-align: center;
    font-size: 1.2rem;
    color: #8a8a74 !important;
  }
  /* Square bordered close button in the corner, matching the mock-up
     rather than Dawn's floating cross. */
  .header-2__delivery-modal .modal__close-button {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid #ded7c8;
    border-radius: 8px;
    background: #fff;
    color: #5a5a4a;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .header-2__delivery-modal .modal__close-button:hover {
    border-color: #5b8c42;
    color: #143304;
  }
  .header-2__delivery-modal .modal__close-button svg {
    width: 1.4rem;
    height: 1.4rem;
  }
  .header-2__nav-row {
    /* The nav is a band, so it is ruled on both edges. With only a top rule
       it ran into the page with nothing closing it off. */
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
  }
  .header-2__nav-inner {
    display: flex;
    align-items: center;
    gap: var(--header-nav-gap, 0.8rem);
  }
  .page-width.header-2__nav-inner {
    padding-left: 6.3rem;
  }
  .header-2__nav-inner .header__menu-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.4rem;
    font-weight: var(--header-nav-weight, 600);
    font-size: var(--header-nav-size, 1.2rem);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .header-2__nav-inner .header__menu-item span,
  .header-2__nav-inner .header__menu-item:hover span,
  .header-2__nav-inner details[open] > .header__menu-item {
    text-decoration: none;
  }
  .header-2__nav-inner .header__menu-item .icon-caret {
    position: static;
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-left: 0.4rem;
    opacity: 0.45;
    vertical-align: middle;
    transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
  }
  .header-2__nav-inner .header__menu-item:hover {
    background: #F1EAD9;
  }
  .header-2__nav-inner .header__menu-item:hover .icon-caret {
    color: #5B8C42;
    opacity: 1;
  }
  .header-2__nav-inner details[open] > .header__menu-item,
  .header-2__nav-inner header-menu:hover .header__menu-item:not(:hover) {
    background: #0E2603;
    color: #F5F1E6;
  }
  .header-2__nav-inner details[open] > .header__menu-item .icon-caret,
  .header-2__nav-inner header-menu:hover .header__menu-item:not(:hover) .icon-caret {
    color: #9CC17E;
    opacity: 1;
    transform: rotate(180deg);
  }
  .mega-menu__panel-wrap {
    display: none;
  }
  .header-2__nav-inner details[open] > .mega-menu__panel-wrap,
  .header-2__nav-inner header-menu:hover .mega-menu__panel-wrap {
    display: block;
  }

  /* Touch-screen extras for the dropdown (2026-09-30, owner) — only when a
     finger opened it ([data-touch-open]); mouse users never see them.
     tune: backdrop colour/opacity below. */
  .mega-menu__touchbar {
    display: none;
  }
  .header-2__nav-inner details[data-touch-open] .mega-menu__touchbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.4rem 0 0.2rem;
  }
  .mega-menu__shop-all {
    font-size: 1.5rem;
    font-weight: 700;
    color: #143304;
    text-decoration: none;
  }
  .mega-menu__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #DED7C8;
    border-radius: 50%;
    background: #fff;
    color: #143304;
    cursor: pointer;
  }
  .mega-touch-backdrop {
    display: none;
  }
  .mega-touch-open .mega-touch-backdrop {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--timber-header-h, 120px);
    z-index: 40;
    background: rgba(20, 30, 15, 0.38);
  }

  /* Mega menu */
  .header-2__nav-inner header-menu > details {
    position: static;
  }
  /* The panel is laid over the page rather than pushing it down, so a change
     of height can never move the content underneath either. */
  .mega-menu__panel-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    /* Edge to edge. It was capped to the page width and rounded, which left
       the panel floating as a card with the page showing down either side —
       the header above it runs the full width, so a panel that hangs from it
       has to as well. The inner grid is still held to the page width by its
       own padding, so the content stays in line with everything else. */
    background: rgb(var(--color-background));
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    /* The deals strip is the last thing in here and paints to the very bottom
       edge; without this its corners would show the panel's white behind. */
    overflow: hidden;
  }
  .mega-menu {
    display: grid;
    /* minmax(0, 1fr) rather than a bare 1fr — the same trap already written
       up in best-sellers.liquid. A bare 1fr keeps a min-content floor, so a
       long product name ("Timber Decking Boards 32mm x 125mm") refused to
       shrink and widened the whole grid past its container instead. With
       margin: 0 auto centring that over-wide grid, it then overflowed BOTH
       sides and .mega-menu__panel-wrap's overflow: hidden silently sliced
       it — the featured column off the right, the deals strip off the left.
       minmax(0, …) removes the floor so the column can actually shrink. */
    grid-template-columns: 21rem 1px minmax(0, 1fr) 21rem;
    grid-template-areas: "sidebar divider content featured";
    gap: 0 2.6rem;
    /* No bottom padding: the deals strip closes the panel itself, and padding
       under it was the white band below the strip. The room between the
       columns and the strip is set on the strip's own top margin instead, so
       it is a gap rather than a border of empty panel. */
    padding: 2.6rem 0 0;
    /* Every panel is the same height whatever it holds. They were sized by
       their own contents, so moving the cursor from a menu with three rows to
       one with two made the panel jump — and with it everything on the page
       below. The tallest menu sets the number; the rest simply have space at
       the foot. */
    min-height: 32rem;
    /* Holds the columns to the page width while the panel behind them runs the
       full width of the window. */
    max-width: var(--page-width);
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .mega-menu__tab-radio {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }
  .mega-menu__eyebrow {
    margin: 0 0 1.2rem;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(var(--color-foreground), 0.5);
  }
  .mega-menu__sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
  }
  .mega-menu__tab-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1.1rem 1.4rem;
    border-radius: 6px;
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(var(--color-foreground), 0.85);
    cursor: pointer;
  }
  .mega-menu__tab-label svg {
    flex-shrink: 0;
    opacity: 0.4;
  }
  .mega-menu__divider {
    grid-area: divider;
    background: rgba(0, 0, 0, 0.08);
  }
  .mega-menu__content {
    grid-area: content;
  }
  .mega-menu__panel-body {
    display: none;
  }
  .mega-menu__grid {
    display: grid;
    /* Same reason as the outer grid above: these two tracks are what the
       long product names actually sit in, so the min-content floor has to
       come off here too or the outer fix alone achieves nothing. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 3.2rem;
  }
  .mega-menu__product {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    /* Every row the same height whatever the name. A title long enough to wrap
       used to push its own row taller than the one beside it, and the whole
       grid lost its alignment. */
    min-height: 5.6rem;
  }
  .mega-menu__product-text {
    min-width: 0;
  }
  .mega-menu__product-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mega-menu__product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 6px;
    background: #F1EAD9;
    color: #2B3B1E;
  }
  .mega-menu__product-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  .mega-menu__product-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }
  .mega-menu__product-sub {
    /* One line, always. The straplines are short by design and a wrapped one
       would put the row out of step with the one beside it. */
    display: block;
    font-size: 1.2rem;
    line-height: 1.35;
    color: rgba(var(--color-foreground), 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mega-menu__product-group { min-width: 0; }
  .mega-menu__product--refined { min-height: 4.8rem; padding-bottom: 0.45rem; }
  .mega-menu__refinements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0 1.2rem 0.75rem 6rem;
  }
  .mega-menu__refinement {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(43, 59, 30, 0.19);
    border-radius: 999px;
    color: rgb(43, 59, 30);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }
  .mega-menu__refinement:hover,
  .mega-menu__refinement:focus-visible {
    background: #173606;
    border-color: #173606;
    color: #fff;
  }
  .mega-menu__featured {
    grid-area: featured;
  }
  .mega-menu__featured-card {
    display: none;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
  }
  .mega-menu__featured-image {
    position: relative;
    display: block;
    /* Square (2026-09-30, owner): the product photos are square, so the whole
       product shows with nothing cropped. It was a 13.2rem-tall landscape box,
       which cut off the top of panels and both ends of gates.
       tune: 1 / 1 = shape of the photo box; 16rem = its size (was the full
       ~20.7rem card width, owner asked for it a bit smaller on 2026-09-30). */
    aspect-ratio: 1 / 1;
    width: 16rem;
    max-width: 100%;
    border-radius: 6px;
    background: repeating-linear-gradient(-42deg, #EFE7D6 0 11px, #E7DDC8 11px 22px);
    margin-bottom: 1.2rem;
    /* The box had a height but nothing holding the picture to it. Until now
       every featured card fell back to the striped placeholder, which has no
       size of its own and so never showed the omission; the moment a real
       photograph went in it rendered at its natural size and ran out of the
       column and down the panel. */
    overflow: hidden;
  }
  .mega-menu__featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
  .mega-menu__featured-tag {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    color: rgba(0, 0, 0, 0.55);
  }
  .mega-menu__featured-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
  }
  .mega-menu__featured-price {
    font-size: 1.3rem;
    color: rgba(var(--color-foreground), 0.65);
    margin-bottom: 0.8rem;
  }
  .mega-menu__featured-link {
    font-size: 1.3rem;
    font-weight: 600;
    color: #5B8C42;
  }
  .mega-menu__deals {
    /* Full-width footer row under all four columns. Without an explicit
       span it auto-places into the sidebar cell and its negative margin
       drags it across the product grid. */
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem 5rem;
    /* Pulled out past the grid's own gutters so the band reaches both edges
       of the panel, and pushed down so it is not sitting under the last line
       of the featured column. */
    margin-top: 3.2rem;
    margin-bottom: 0;
    /* The standard full-bleed pair: pull out to the window's edges, then pad
       back in by the same amount plus the gutter, so the band spans the panel
       while its text stays in line with the columns above. */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50% + 2rem);
    padding-right: calc(50vw - 50% + 2rem);
    background: #F1EAD9;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    font-size: 1.3rem;
  }
  .mega-menu__deals-label {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(var(--color-foreground), 0.55);
  }
  .mega-menu__deals-badge {
    padding: 0.2rem 0.9rem;
    border-radius: 20px;
    background: #F3D9C6;
    color: #B4540E;
    font-size: 1.1rem;
    font-weight: 600;
  }
  .mega-menu__deals-text {
    color: rgba(var(--color-foreground), 0.75);
  }

  /* CSS-only tab switching, per radio index */
  #mega-tab-fencing-gates-0:checked ~ .mega-menu__sidebar label[data-tab="0"],
  #mega-tab-fencing-gates-1:checked ~ .mega-menu__sidebar label[data-tab="1"],
  #mega-tab-fencing-gates-2:checked ~ .mega-menu__sidebar label[data-tab="2"],
  #mega-tab-fencing-gates-3:checked ~ .mega-menu__sidebar label[data-tab="3"],
  #mega-tab-concrete-0:checked ~ .mega-menu__sidebar label[data-tab="0"],
  #mega-tab-concrete-1:checked ~ .mega-menu__sidebar label[data-tab="1"],
  #mega-tab-concrete-2:checked ~ .mega-menu__sidebar label[data-tab="2"],
  #mega-tab-concrete-3:checked ~ .mega-menu__sidebar label[data-tab="3"],
  #mega-tab-garden-outdoor-0:checked ~ .mega-menu__sidebar label[data-tab="0"],
  #mega-tab-garden-outdoor-1:checked ~ .mega-menu__sidebar label[data-tab="1"],
  #mega-tab-garden-outdoor-2:checked ~ .mega-menu__sidebar label[data-tab="2"],
  #mega-tab-garden-outdoor-3:checked ~ .mega-menu__sidebar label[data-tab="3"],
  #mega-tab-timber-0:checked ~ .mega-menu__sidebar label[data-tab="0"],
  #mega-tab-timber-1:checked ~ .mega-menu__sidebar label[data-tab="1"],
  #mega-tab-timber-2:checked ~ .mega-menu__sidebar label[data-tab="2"],
  #mega-tab-timber-3:checked ~ .mega-menu__sidebar label[data-tab="3"] {
    background: #0E2603;
    color: #F5F1E6;
  }
  .mega-menu__sidebar label[data-tab] svg {
    transition: opacity 0.15s ease, color 0.15s ease;
  }
  #mega-tab-fencing-gates-0:checked ~ .mega-menu__sidebar label[data-tab="0"] svg,
  #mega-tab-fencing-gates-1:checked ~ .mega-menu__sidebar label[data-tab="1"] svg,
  #mega-tab-fencing-gates-2:checked ~ .mega-menu__sidebar label[data-tab="2"] svg,
  #mega-tab-fencing-gates-3:checked ~ .mega-menu__sidebar label[data-tab="3"] svg,
  #mega-tab-concrete-0:checked ~ .mega-menu__sidebar label[data-tab="0"] svg,
  #mega-tab-concrete-1:checked ~ .mega-menu__sidebar label[data-tab="1"] svg,
  #mega-tab-concrete-2:checked ~ .mega-menu__sidebar label[data-tab="2"] svg,
  #mega-tab-concrete-3:checked ~ .mega-menu__sidebar label[data-tab="3"] svg,
  #mega-tab-garden-outdoor-0:checked ~ .mega-menu__sidebar label[data-tab="0"] svg,
  #mega-tab-garden-outdoor-1:checked ~ .mega-menu__sidebar label[data-tab="1"] svg,
  #mega-tab-garden-outdoor-2:checked ~ .mega-menu__sidebar label[data-tab="2"] svg,
  #mega-tab-garden-outdoor-3:checked ~ .mega-menu__sidebar label[data-tab="3"] svg,
  #mega-tab-timber-0:checked ~ .mega-menu__sidebar label[data-tab="0"] svg,
  #mega-tab-timber-1:checked ~ .mega-menu__sidebar label[data-tab="1"] svg,
  #mega-tab-timber-2:checked ~ .mega-menu__sidebar label[data-tab="2"] svg,
  #mega-tab-timber-3:checked ~ .mega-menu__sidebar label[data-tab="3"] svg {
    opacity: 1;
    color: #9CC17E;
  }
  .mega-menu__product {
    transition: background-color 0.15s ease;
  }
  .mega-menu__product:hover {
    background: #F1EAD9;
  }
  #mega-tab-fencing-gates-0:checked ~ .mega-menu__content [data-panel="0"],
  #mega-tab-fencing-gates-1:checked ~ .mega-menu__content [data-panel="1"],
  #mega-tab-fencing-gates-2:checked ~ .mega-menu__content [data-panel="2"],
  #mega-tab-fencing-gates-3:checked ~ .mega-menu__content [data-panel="3"],
  #mega-tab-concrete-0:checked ~ .mega-menu__content [data-panel="0"],
  #mega-tab-concrete-1:checked ~ .mega-menu__content [data-panel="1"],
  #mega-tab-concrete-2:checked ~ .mega-menu__content [data-panel="2"],
  #mega-tab-concrete-3:checked ~ .mega-menu__content [data-panel="3"],
  #mega-tab-garden-outdoor-0:checked ~ .mega-menu__content [data-panel="0"],
  #mega-tab-garden-outdoor-1:checked ~ .mega-menu__content [data-panel="1"],
  #mega-tab-garden-outdoor-2:checked ~ .mega-menu__content [data-panel="2"],
  #mega-tab-garden-outdoor-3:checked ~ .mega-menu__content [data-panel="3"],
  #mega-tab-timber-0:checked ~ .mega-menu__content [data-panel="0"],
  #mega-tab-timber-1:checked ~ .mega-menu__content [data-panel="1"],
  #mega-tab-timber-2:checked ~ .mega-menu__content [data-panel="2"],
  #mega-tab-timber-3:checked ~ .mega-menu__content [data-panel="3"] {
    display: block;
  }
  #mega-tab-fencing-gates-0:checked ~ .mega-menu__featured [data-featured="0"],
  #mega-tab-fencing-gates-1:checked ~ .mega-menu__featured [data-featured="1"],
  #mega-tab-fencing-gates-2:checked ~ .mega-menu__featured [data-featured="2"],
  #mega-tab-fencing-gates-3:checked ~ .mega-menu__featured [data-featured="3"],
  #mega-tab-concrete-0:checked ~ .mega-menu__featured [data-featured="0"],
  #mega-tab-concrete-1:checked ~ .mega-menu__featured [data-featured="1"],
  #mega-tab-concrete-2:checked ~ .mega-menu__featured [data-featured="2"],
  #mega-tab-concrete-3:checked ~ .mega-menu__featured [data-featured="3"],
  #mega-tab-garden-outdoor-0:checked ~ .mega-menu__featured [data-featured="0"],
  #mega-tab-garden-outdoor-1:checked ~ .mega-menu__featured [data-featured="1"],
  #mega-tab-garden-outdoor-2:checked ~ .mega-menu__featured [data-featured="2"],
  #mega-tab-garden-outdoor-3:checked ~ .mega-menu__featured [data-featured="3"],
  #mega-tab-timber-0:checked ~ .mega-menu__featured [data-featured="0"],
  #mega-tab-timber-1:checked ~ .mega-menu__featured [data-featured="1"],
  #mega-tab-timber-2:checked ~ .mega-menu__featured [data-featured="2"],
  #mega-tab-timber-3:checked ~ .mega-menu__featured [data-featured="3"] {
    display: flex;
  }
  /* 990px is the width the mega menu first appears at, and every rule above
     is base scope — the two 21rem side columns are the same absolute size
     there as at 1360px. The fixed cost is 539px (210 sidebar + 1 divider +
     210 featured + three 2.6rem gaps + 2rem padding each side), so at 990px
     the content column gets 451px, split into two product tracks with a
     32px gap: about 209px each before the icon takes ~40 of it. The minmax
     fix stops that overflowing, but it does not stop it being cramped —
     names wrap to three lines.

     Dropping the featured column returns 210px plus a gap to the products.
     It is a promotional tile rather than navigation, so it is the right
     thing to sacrifice first; the sidebar and the product list are what
     people actually opened the menu for.

     grid-template-areas has to be redeclared alongside grid-template-columns,
     not just left alone: the areas string is what defines the explicit grid,
     so a four-column string against three columns would keep a fourth
     implicit track and its gap even with the featured element hidden.

     To reverse: delete this block. To keep the featured tile instead, drop
     this and shrink the side columns (21rem -> 16rem) — that keeps all four
     columns but leaves every one of them tight rather than three roomy. */
  @media screen and (min-width: 990px) and (max-width: 1149px) {
    .mega-menu {
      grid-template-columns: 21rem 1px minmax(0, 1fr);
      grid-template-areas: "sidebar divider content";
    }
    .mega-menu__featured {
      display: none;
    }
  }
  @media screen and (max-width: 989px) {
    .mega-menu__panel-wrap {
      display: none;
    }
  }
  .header-2__deals-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-size: var(--header-nav-size, 1.2rem);
    font-weight: var(--header-nav-weight, 600);
  }
  .header-2__nav-links {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    margin-left: auto;
    font-size: 1.3rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .header-2__nav-links a {
    color: inherit;
    text-decoration: none;
  }
  .header-2__nav-links a:hover {
    text-decoration: underline;
  }
  html.header-condensed .header-2__nav-links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  @media screen and (max-width: 989px) {
    .header-2__rating,
    .header-2__icon-label {
      display: none;
    }
  }

  /* ------------------------------------------------------------------
     Phone layout.

     The desktop header is four stacked rows — utility bar, logo, search,
     nav — which on a phone eats most of the first screen before a single
     product appears. Here it collapses to one compact bar plus a slim
     search, and the category row becomes a swipeable strip instead of a
     wrapped block that gets clipped at the edge.
     ------------------------------------------------------------------ */
  @media screen and (max-width: 749px) {
    .header-2 {
      gap: 1rem 1.2rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
      row-gap: 1rem;
    }
    .header-2__search-row {
      flex: 1 1 100%;
      order: 3;
    }
    .header-2__icons {
      gap: 1.4rem;
    }
    .header-2__icon {
      gap: 0;
    }

    /* The category row scrolls sideways rather than being cut off. The
       negative margin lets it bleed to both edges, so the last item is
       visibly half-cut — the cue that tells a thumb there is more. */
    .header-2__nav-row {
      overflow: hidden;
    }
    .page-width.header-2__nav-inner {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      overflow-x: auto;
      overflow-y: hidden;
      flex-wrap: nowrap;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      scroll-padding-inline: 1.5rem;
    }
    .page-width.header-2__nav-inner::-webkit-scrollbar {
      display: none;
    }
    .header-2__nav-inner > * {
      flex: 0 0 auto;
    }
    .header-2__nav-links {
      display: none;
    }
    .header-2__delivery-button {
      padding: 0.9rem 1.2rem;
      font-size: 1.1rem;
    }
  }
/* END_SECTION:custom-header */
/* START_SECTION:main-product (INDEX:60) */
/* Buttons/selects don't inherit the page font by default in browsers —
     Dawn misses this reset in a few spots (share button, quantity stepper),
     so anything with visible text was silently falling back to Arial. */
  .product__info-container button,
  .product__info-container select,
  .product__media-wrapper button {
    font-family: inherit;
  }
  /* Dawn's product--large is a fixed 65/35 column split, and it caps the image
     below its own column width — together that left a big dead gap between the
     image and the info text. Design is closer to 54.5/45.5 with the image filling
     its column, so override both. */
  @media screen and (min-width: 990px) {
    .product.product--large:not(.product--no-media) .grid__item.product__media-wrapper {
      max-width: 54.5%;
      width: calc(54.5% - var(--grid-desktop-horizontal-spacing) / 2);
    }
    .product.product--large:not(.product--no-media) .grid__item.product__info-wrapper {
      max-width: 45.5%;
      width: calc(45.5% - var(--grid-desktop-horizontal-spacing) / 2);
      padding-left: 3rem;
    }
  }
  .product__media-wrapper .product-media-container.constrain-height {
    margin-left: 0;
  }

  /* ---- Gallery: white card + thumbnail strip ---- */
  .product__media-wrapper .product-media-container {
    background: #ffffff;
    border: 1px solid #DED7C8;
    border-radius: 8px;
    padding: 24px;
  }
  .product__media-wrapper .product-media-container.constrain-height {
    /* Leave room for the thumbnail strip so the gallery's overall height
       stays where it was before thumbnails were introduced. */
    --viewport-offset: 520px;
  }
  .product__media-wrapper .media {
    background: transparent;
  }
  .product__media-wrapper .thumbnail-list {
    margin-top: 12px;
    gap: 10px;
  }
  .product__media-wrapper .thumbnail-list__item {
    width: 82px;
    height: 82px;
    flex: 0 0 auto;
  }
  /* Tablet/desktop row: 82px, but allowed to shrink (2026-10-01). On a
     ~1024–1100px screen the gallery column is ~490–530px and six fixed 82px
     squares (542px with gaps) ran past it towards the text. The row is a flex
     row, so the squares share the space instead. Phones keep their own swipe
     row. tune: the 82px. */
  @media screen and (min-width: 750px) {
    .product__media-wrapper .thumbnail-list > .thumbnail-list__item {
      flex: 0 1 82px;
      min-width: 0;
      width: auto;
      height: auto;
      aspect-ratio: 1 / 1;
    }
  }
  .product__media-wrapper .thumbnail {
    background: #ffffff;
    border: 1px solid #DED7C8;
    border-radius: 6px;
    padding: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .product__media-wrapper .thumbnail:hover {
    border-color: #5B8C42;
  }
  .product__media-wrapper .thumbnail img {
    object-fit: contain;
  }
  .product__media-wrapper .thumbnail[aria-current='true'] {
    border: 2px solid #143304;
    box-shadow: none;
  }
  .product__media-wrapper .thumbnail[aria-current='true']:after {
    display: none;
  }
  .product__media-wrapper .product-media-container.constrain-height.media-fit-contain {
    width: 100%;
  }
  .product__info-container > .product__text {
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(var(--color-foreground), 0.65);
  }
  .product__title h1.h1 {
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.14;
    letter-spacing: -0.028em;
    color: rgb(20, 51, 4);
  }
  /* Two lines only when collapsed, so the price card is above the fold on
     first load rather than pushed down by the description. */
  .product__info-container .product__description-wrap {
    margin: 1rem 0 0;
  }
  /* Dawn sets .product__info-container .product__description { margin: 2.5rem 0 }
     at the same specificity and loads after this file, so the wrapper class has
     to be in the selector to win. */
  .product__info-container .product__description-wrap .product__description {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
  }
  /* The rte's own paragraphs carry a ~30px bottom margin that pushed the
     Read more toggle well clear of the text. Kill it on the last one. */
  .product__info-container .product__description-wrap .product__description > *:last-child {
    margin-bottom: 0;
  }
  .product__description-wrap:not(.is-expanded) .product__description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Expanded, everything past the intro paragraph gets the green rule down
     the side so the revealed detail reads as a distinct block. */
  .product__description-wrap.is-expanded .product__description > *:not(:first-child) {
    border-left: 2px solid #5B8C42;
    margin-left: 0;
    padding-left: 1.6rem;
  }
  .product__description-toggle {
    /* Block-level flex, not inline-flex: as an inline the button sat in the
       parent's line box and inherited ~25px of strut leading above it that
       no margin could remove. */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.4rem;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    color: #5B8C42;
    font-family: inherit;
    font-weight: 600;
    font-size: 1.4rem;
    cursor: pointer;
  }
  .product__description-toggle-text--less {
    display: none;
  }
  .product__description-wrap.is-expanded .product__description-toggle-text--more {
    display: none;
  }
  .product__description-wrap.is-expanded .product__description-toggle-text--less {
    display: inline;
  }
  .product__description-toggle-icon::before {
    content: '+';
  }
  .product__description-wrap.is-expanded .product__description-toggle-icon::before {
    content: '\2212';
  }

  /* ---- Price card ---- */
  .product__price-card {
    background: #ffffff;
    border: 1px solid #DED7C8;
    border-radius: 6px;
    padding: 20px 22px;
    margin: 4px 0 14px;
  }
  .product__price-card-label {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(138, 138, 116);
  }
  .product__price-card-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .product__price-card .price {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgb(20, 51, 4);
  }
  .product__price-card .price .price-item {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit;
  }
  .product__price-card-note {
    font-size: 13.5px;
    color: rgba(38, 38, 31, 0.6);
  }
  .product__price-tiers {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #EDE7DA;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .product__price-tier {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 14px;
    font-size: 13.5px;
  }
  .product__price-tier-qty {
    color: rgba(38, 38, 31, 0.8);
    white-space: nowrap;
  }
  .product__price-tier--head {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(38, 38, 31, 0.55);
  }
  .product__price-tiers-note {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    opacity: 0.7;
  }
  .product__price-tier-price {
    font-weight: 700;
    color: rgb(38, 38, 31);
  }
  .product__price-tier-save {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #B4540E;
  }

  /* ---- Variant picker: label, green glow, select button ---- */
  .combined-variant-select__label {
    display: block;
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(138, 138, 116);
  }
  .combined-variant-select__control {
    position: relative;
    border: 2px solid #5B8C42;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(91, 140, 66, 0.14);
  }
  /* Dawn draws the select's own border via .select::after, so the "Select"
     pill has to be a real element rather than another pseudo. */
  .combined-variant-select__control.select::after,
  .combined-variant-select__control.select::before {
    display: none;
  }
  .combined-variant-select__control .svg-wrapper {
    display: none;
  }
  .combined-variant-select__cta {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    pointer-events: none;
    background: #143304;
    color: #ffffff;
    border-radius: 4px;
    padding: 9px 14px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .combined-variant-select__select {
    width: 100%;
    height: 52px;
    border: none;
    background: none;
    padding: 0 108px 0 16px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: rgb(20, 51, 4);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }
  .combined-variant-select__hint {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: rgba(38, 38, 31, 0.6);
  }

  /* ---- Purchase row: stepper + add to basket side by side ---- */
  .product__purchase-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 14px 0 0;
  }
  .product__purchase-row .product-form__quantity {
    flex: 0 0 auto;
    margin: 0;
  }
  .product__purchase-row .product-form__quantity .form__label {
    display: none;
  }
  .product__purchase-row .quantity {
    height: 100%;
    min-height: 52px;
    width: 118px;
    background: #ffffff;
    border: 1px solid #DED7C8;
    border-radius: 4px;
  }
  .product__purchase-row .quantity:after {
    box-shadow: none;
  }
  /* Dawn wraps the buy buttons in an unclassed div, so target every direct
     child that isn't the quantity block rather than a specific class. */
  .product__purchase-row > *:not(.product-form__quantity) {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }
  /* Dawn gives product-form a 25px vertical margin and the submit button a
     10px bottom margin — both would knock the button out of line with the
     stepper, so zero them inside the row. */
  .product__info-container .product__purchase-row .product-form {
    margin: 0;
  }
  .product__purchase-row .product-form__submit {
    margin-bottom: 0;
  }
  .product__purchase-row .product-form__buttons {
    max-width: none;
    width: 100%;
    height: 100%;
  }
  .product__purchase-row product-form,
  .product__purchase-row product-form > form {
    display: block;
    width: 100%;
  }
  .product__purchase-row .product-form__submit {
    width: 100%;
    height: 100%;
  }
  .product-form__submit-price {
    font-weight: 800;
  }

  /* ---- Buy buttons ---- */
  .product-form__buttons .product-form__submit {
    background: #143304;
    color: #ffffff;
    border-color: #143304;
    border-radius: 4px;
    min-height: 52px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
  }
  .product-form__buttons .product-form__submit:not([disabled]):hover {
    background: #1c4406;
    border-color: #1c4406;
  }
  .product-form__buttons .product-form__submit::after {
    box-shadow: none;
  }

  /* ---- Postcode check ---- */
  .product__postcode {
    display: block;
    background: #ffffff;
    border: 1px solid #DED7C8;
    border-radius: 6px;
    padding: 16px 18px;
    margin-top: 14px;
  }
  .product__postcode-heading {
    display: block;
    margin-bottom: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: rgb(20, 51, 4);
  }
  .product__postcode-row {
    display: flex;
    gap: 8px;
  }
  .product__postcode-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #DED7C8;
    border-radius: 4px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 13.5px;
    color: rgb(38, 38, 31);
  }
  .product__postcode-input:focus {
    outline: none;
    border-color: #5B8C42;
    box-shadow: 0 0 0 3px rgba(91, 140, 66, 0.16);
  }
  .product__postcode-button {
    flex: 0 0 auto;
    background: #143304;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 11px 24px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
  }
  .product__postcode-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: rgba(38, 38, 31, 0.7);
  }
  .product__postcode-button:hover {
    filter: brightness(1.08);
  }
  .product__postcode-result {
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #5B8C42;
  }
  .product__stock-badge {
    position: absolute;
    top: 1.4rem;
    left: 1.4rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    padding: 0.7rem 1.2rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: rgb(20, 51, 4);
  }
  .product__stock-badge-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #649949;
  }
  .product__stock-badge--out .product__stock-badge-dot {
    background: #999;
  }
  .product__media-wrapper {
    position: relative;
  }
  .product__spec-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0.6rem 0 1.4rem;
  }
  .product__spec-pill {
    display: inline-flex;
    align-items: center;
    background: #F1EAD9;
    /* Same border colour as the price/spec cards so the pills read as part
       of the same set of surfaces. */
    border: 1px solid #DED7C8;
    border-radius: 4px;
    padding: 0.6rem 1.1rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: rgb(20, 51, 4);
  }
  /* 3D button test (2026-10-01). tune: colours, radius, padding. */
  .product__3d-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 14px 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    background: #143304;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(20, 51, 4, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .product__3d-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(20, 51, 4, 0.24);
  }
  .product__3d-cta:focus-visible {
    outline: 3px solid #649949;
    outline-offset: 2px;
  }
  .product__3d-cta-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
  }
  .product__3d-cta-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .product__3d-cta-text strong {
    font-size: 15px;
    line-height: 1.25;
  }
  .product__3d-cta-text span {
    font-size: 13px;
    line-height: 1.35;
    opacity: 0.82;
  }
  .product__3d-cta-arrow {
    flex: none;
    display: flex;
    opacity: 0.85;
  }
  .product__urgency-banner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #E9F1E2;
    /* Solid 2px rule, matching the design's stronger callout border. */
    border: 2px solid #B7CFA6;
    border-radius: 8px;
    padding: 16px 18px;
    margin: 14px 0;
  }
  .product__urgency-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2F5720;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }
  .product__urgency-row .svg-wrapper {
    flex: 0 0 auto;
    display: flex;
  }
  .product__urgency-social {
    padding-left: 26px;
    color: #3E6B2A;
    font-size: 13px;
    line-height: 1.3;
  }
  .price-per-item__container price-per-item .price-per-item,
  volume-pricing.parent-display {
    background: #F1EAD9;
    border-radius: 6px;
    padding: 1.2rem 1.4rem;
    margin-top: 1rem;
  }
  volume-pricing.parent-display ul.list-unstyled li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 1.3rem;
  }
  volume-pricing.parent-display ul.list-unstyled li > span:first-child {
    font-weight: 600;
    color: rgb(20, 51, 4);
  }
  .product__sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    border-top: 1px solid rgb(222, 215, 200);
    box-shadow: 0 -8px 26px rgba(20, 51, 4, 0.12);
    /* Swipe up from below the fold: the eased curve overshoots slightly at the
       start then settles, so it reads as a slide rather than a pop. */
    transform: translateY(100%);
    opacity: 0.25;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 0.84, 0.3, 1);
  }
  .product__sticky-bar.product__sticky-bar--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .product__sticky-bar {
      transition: opacity 0.15s linear;
    }
  }
  /* .page-width ships its own max-width and padding shorthand and loads after
     this file, so the compound selector is needed for these to hold. */
  .product__sticky-bar .product__sticky-bar-inner.page-width {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .product__sticky-bar-info {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-width: 0;
  }
  .product__sticky-bar-image {
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .product__sticky-bar-text {
    display: flex;
    flex-direction: column;
    /* No gap: the two lines sit tight together as in the design, where the
       whole block is only ~32.5px tall rather than the 46px it was. */
    gap: 0;
    min-width: 0;
  }
  .product__sticky-bar-title {
    /* Lighter than the 14px/700 it started at — at full weight the title was
       shouting over the price, which is what the bar is really selling. */
    line-height: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product__sticky-bar-meta {
    line-height: 15.5px;
    opacity: 0.6;
  }
  .product__sticky-bar-buy {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-shrink: 0;
  }
  .product__sticky-bar-price {
    font-weight: 800;
  }
  .product__sticky-bar-vat {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.6;
    margin-left: 6px;
  }
  .product__sticky-bar-button {
    /* Fixed 43px box matching the design's button; the horizontal padding
       lands it at ~235px for the "ADD TO BASKET · £30.89" label. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Same dark green, weight, tracking and radius as the main Add to basket
       button on the page, so the two read as one control. */
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 0.56px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
  }
  .combined-variant-select__label {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(var(--color-foreground), 0.7);
    margin-bottom: 0.6rem;
  }
  combined-variant-select .select.combined-variant-select__control {
    border: 1px solid #649949;
    border-radius: 6px;
  }
  @media screen and (max-width: 749px) {
    .product__sticky-bar-info {
      display: none;
    }
  }
/* END_SECTION:main-product */
/* START_SECTION:mobile-tab-bar (INDEX:64) */
.mtb {
    display: none;
  }

  @media screen and (max-width: 989px) {
    .mtb {
      display: block;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 40;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mtb__list {
      display: flex;
      align-items: stretch;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .mtb__item {
      flex: 1 1 0;
      min-width: 0;
    }
    .mtb__link {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      height: var(--mtb-height, 62px);
      text-decoration: none;
      /* The whole cell is the target, not just the glyph. */
      width: 100%;
    }
    .mtb__icon {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      /* Sized so the active pill has room to sit behind the glyph without
         changing the icon's position when it appears. */
      /* Only as tall as the glyph needs. The bar stays short by removing the
         padding around the icon, not by shrinking the icon. */
      width: 44px;
      height: 36px;
      border-radius: 999px;
      transition: background-color 0.15s ease;
    }

    /* One tab is promoted to a raised button, the way an app promotes its
       primary action. It sits proud of the bar rather than inside it, which
       is the whole point — a filled circle in the row would just read as a
       fifth icon that happens to be coloured.

       The lift is a negative margin, not absolute positioning, so the circle
       still occupies its cell and the five tabs stay evenly spaced. The bar
       has no overflow clipping, so the part that pokes above simply shows. */
    .mtb__link--featured .mtb__icon {
      width: 58px;
      height: 58px;
      margin-top: -22px;
      border-radius: 50%;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    }
    .mtb__link--featured .mtb__label {
      font-weight: 700;
    }
    /* The pill that marks the current tab would fight the filled circle. */
    .mtb__link--featured.mtb__link--current .mtb__icon {
      background: inherit;
    }
    .mtb__label {
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .mtb__count {
      position: absolute;
      top: -5px;
      right: 0;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      line-height: 16px;
      text-align: center;
    }
    .mtb__count--empty {
      display: none;
    }
  }
/* END_SECTION:mobile-tab-bar */
/* START_SECTION:product-breadcrumb (INDEX:75) */
/* Compound selector so this outranks .page-width's own padding shorthand,
     which otherwise wins on load order and resets the vertical spacing. */
  nav.product-breadcrumb.page-width {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    /* Sits directly above the gallery card; page-width supplies the
       horizontal inset, this only adds breathing room above and below. */
  }
  .product-breadcrumb a {
    color: inherit;
    opacity: 0.6;
    text-decoration: none;
  }
  .product-breadcrumb a:hover {
    opacity: 1;
    text-decoration: underline;
  }
  .product-breadcrumb span[aria-hidden] {
    opacity: 0.35;
  }
  .product-breadcrumb__current {
    font-weight: 600;
  }
/* END_SECTION:product-breadcrumb */
/* START_SECTION:product-cross-sell (INDEX:76) */
.product-cross-sell__heading {
    margin: 0 0 6px;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .product-cross-sell__subheading {
    margin: 0 0 22px;
    line-height: 1.45;
    opacity: 0.72;
  }
  /* Keeps the old spacing when no subheading is set, since the heading's own
     bottom margin is now only the 6px gap to the subline. */
  .product-cross-sell__heading + .product-cross-sell__grid {
    margin-top: 20px;
  }
/* END_SECTION:product-cross-sell */
/* START_SECTION:product-description-panel (INDEX:77) */
/* Card matches the specifications card above it — same border, radius and
     horizontal rhythm — so the two read as a pair rather than two designs. */
  .pdp-card {
    display: block;
    border: 1px solid rgb(222, 215, 200);
    border-radius: 6px;
    overflow: hidden;
  }
  .pdp-card__header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 24px 32px;
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }
  .pdp-card__mark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: #fff;
  }
  .pdp-card__headings {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .pdp-card__title {
    font-size: 22px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgb(20, 51, 4);
  }
  .pdp-card__sub {
    font-size: 12.5px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgb(138, 138, 116);
  }
  /* Only one of the two sublines is ever shown, so the row doesn't reflow
     when the label swaps between open and close. */
  .pdp-card__sub-open,
  .pdp-card.is-open .pdp-card__sub-closed {
    display: none;
  }
  .pdp-card.is-open .pdp-card__sub-open {
    display: inline;
  }
  .pdp-card__chevron {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgb(222, 215, 200);
    border-radius: 50%;
    color: rgb(20, 51, 4);
    transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.3, 1), background-color 0.2s ease;
  }
  .pdp-card__header:hover .pdp-card__chevron {
    background: rgb(247, 245, 240);
  }
  .pdp-card.is-open .pdp-card__chevron {
    transform: rotate(180deg);
  }

  /* Teaser: two lines of the description fading out, so a closed card still
     tells you what's inside it. */
  .pdp-card__teaser {
    display: grid;
    grid-template-rows: 1fr;
    padding: 0 32px;
    transition: grid-template-rows 0.3s cubic-bezier(0.16, 0.84, 0.3, 1), opacity 0.2s ease;
  }
  .pdp-card__teaser > * {
    overflow: hidden;
  }
  .pdp-card__teaser-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-bottom: 24px;
    font-size: 14px;
    line-height: 1.65;
    color: rgb(38, 38, 31);
    opacity: 0.62;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  }
  .pdp-card__teaser-text > * {
    margin: 0;
  }
  /* line-clamp counts lines inside the box, but each block child starts a new
     one — without this the second paragraph bleeds in under the fade. */
  .pdp-card__teaser-text > *:not(:first-child) {
    display: none;
  }
  .pdp-card.is-open .pdp-card__teaser {
    grid-template-rows: 0fr;
    opacity: 0;
  }

  /* 0fr → 1fr on a grid row animates to the content's natural height, which a
     max-height guess can't do without either clipping or easing badly. */
  .pdp-card__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.16, 0.84, 0.3, 1);
  }
  .pdp-card__body-inner {
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .pdp-card.is-open .pdp-card__body {
    grid-template-rows: 1fr;
  }
  .pdp-card.is-open .pdp-card__body-inner {
    opacity: 1;
    transition-delay: 0.1s;
  }
  .pdp-card__rte {
    position: relative;
    margin: 0 32px 30px;
    padding-left: 22px;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgb(38, 38, 31);
  }
  /* Green rule down the side, echoing the expanded Read more block in the buy
     column so the two reveals share a vocabulary. */
  .pdp-card__rte::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 3px;
  }
  .pdp-card__rte > *:first-child {
    margin-top: 0;
  }
  .pdp-card__rte > *:last-child {
    margin-bottom: 0;
  }

  .pdp-card__points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
    margin: 0;
    padding: 22px 32px 30px;
    list-style: none;
    border-top: 1px solid rgb(222, 215, 200);
    background: rgb(247, 245, 240);
  }
  .pdp-card__point {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgb(38, 38, 31);
  }
  .pdp-card__point strong {
    font-weight: 700;
  }
  .pdp-card__point-text {
    display: block;
    opacity: 0.7;
  }
  .pdp-card__point-tick {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border-radius: 50%;
    color: #fff;
  }

  @media screen and (max-width: 749px) {
    .pdp-card__header {
      padding: 18px;
      gap: 12px;
    }
    .pdp-card__title {
      font-size: 18px;
    }
    .pdp-card__teaser {
      padding: 0 18px;
    }
    .pdp-card__rte {
      margin: 0 18px 22px;
    }
    .pdp-card__points {
      grid-template-columns: minmax(0, 1fr);
      padding: 18px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-card__body,
    .pdp-card__teaser,
    .pdp-card__chevron {
      transition: none;
    }
  }
/* END_SECTION:product-description-panel */
/* START_SECTION:product-promo-strip (INDEX:79) */
.product-promo-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    /* min-height, not height: at narrower widths the badge, message and
       "Price match promise" link don't fit on one line and flex-wrap drops
       the link onto a second row. A fixed height clipped the box at one
       row's height regardless, so that second row spilled out past the
       green background and sat on top of the breadcrumb underneath it —
       the text overlap this rule fixes. Vertical padding replaces the
       height so a wrapped second line still sits inside the green box with
       even space top and bottom instead of flush against the edge. */
    min-height: 4.45rem;
    padding: 1rem 2.8rem;
  }
  .product-promo-strip__left {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
  }
  .product-promo-strip__badge {
    display: inline-flex;
    border-radius: 3px;
    padding: 0.4rem 1rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .product-promo-strip__message {
    font-size: 1.3rem;
  }
  /* PROMO_STRIP_TRUNCATE_MAX: below this width the badge + headline clause +
     "Price match promise" link no longer fit one line, so the trailing
     "— no accounts, no tiers, no haggling" clause drops rather than
     wrapping the bar onto a second row. 989px matches the tablet range
     this bar was actually overflowing on the product page. */
  @media screen and (max-width: 989px) {
    .product-promo-strip__message-extra {
      display: none;
    }
  }
  .product-promo-strip__link {
    font-size: 1.3rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }
/* END_SECTION:product-promo-strip */
/* START_SECTION:product-run-calculator (INDEX:80) */
.run-calc__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    align-items: center;
    border-radius: 6px;
    padding: 30px 32px;
  }
  .run-calc__heading {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: inherit;
  }
  .run-calc__subtext {
    margin: 0 0 20px;
    max-width: 405px;
    font-size: 13.5px;
    line-height: 1.5;
    opacity: 0.78;
  }
  .run-calc__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .run-calc__field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border-radius: 4px;
    padding: 11px 16px;
  }
  .run-calc__field-label {
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(38, 38, 31, 0.75);
  }
  .run-calc__input {
    width: 3.5ch;
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: rgb(20, 51, 4);
    -moz-appearance: textfield;
  }
  .run-calc__input:focus {
    outline: none;
  }
  .run-calc__input::-webkit-outer-spin-button,
  .run-calc__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .run-calc__field-unit {
    font-size: 13.5px;
    color: rgba(38, 38, 31, 0.55);
  }
  .run-calc__chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
  }
  .run-calc__total {
    /* Lifted off the card with a translucent white wash, as in the design,
       rather than sitting flat on the same dark green. */
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 20px;
  }
  .run-calc__total-label {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.65;
  }
  .run-calc__total-price {
    display: block;
    margin-bottom: 14px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .run-calc__button {
    display: block;
    width: 100%;
    border: none;
    border-radius: 4px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.15s ease;
  }
  .run-calc__button:hover {
    filter: brightness(1.08);
  }
  .run-calc__button[disabled] {
    cursor: default;
    opacity: 0.7;
  }

  @media screen and (max-width: 989px) {
    .run-calc__card {
      grid-template-columns: 1fr;
      gap: 24px;
    }
  }
  @media screen and (max-width: 749px) {
    .run-calc__card {
      padding: 24px 20px;
    }
  }
/* END_SECTION:product-run-calculator */
/* START_SECTION:product-specifications (INDEX:81) */
/* Values below are taken directly from the design's computed styles. */
  .product-specs__card {
    border: 1px solid rgb(222, 215, 200);
    border-radius: 6px;
    padding: 30px 32px 34px;
  }
  .product-specs__heading {
    margin: 0 0 22px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .product-specs__group {
    margin: 0 0 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .product-specs__rows {
    display: flex;
    flex-direction: column;
    margin-bottom: 26px;
  }
  .product-specs__rows:last-child {
    margin-bottom: 0;
  }
  .product-specs__row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 16px;
    border-radius: 4px;
    line-height: 16px;
  }
  .product-specs__label {
  }
  .product-specs__value {
    font-weight: 700;
    text-align: right;
  }

  @media screen and (max-width: 749px) {
    .product-specs__card {
      padding: 22px 18px 24px;
    }
    .product-specs__row {
      flex-direction: column;
      gap: 3px;
      line-height: 1.4;
    }
    .product-specs__value {
      text-align: left;
    }
  }
/* END_SECTION:product-specifications */
/* START_SECTION:product-video-strip (INDEX:82) */
/* Same white card as the description panel, so this row reads as a surface
     sitting on the page rather than floating loose on the background. */
  .pvs__card {
    border: 1px solid rgb(222, 215, 200);
  }
  .pvs__heading {
    margin: 0 0 6px;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .pvs__subheading {
    margin: 0 0 22px;
    line-height: 1.45;
    opacity: 0.72;
  }
  .pvs__heading + .pvs__grid {
    margin-top: 20px;
  }
  .pvs__grid {
    display: grid;
  }
  .pvs__frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(222, 215, 200);
  }
  .pvs__frame video,
  .pvs__frame iframe,
  .pvs__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
  }
  .pvs__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* Faint timber-toned wash rather than flat grey, so an empty slot still
       looks like part of this page. */
    background:
      repeating-linear-gradient(
        135deg,
        rgba(20, 51, 4, 0.035) 0 12px,
        rgba(20, 51, 4, 0.06) 12px 24px
      );
    color: rgb(20, 51, 4);
  }
  .pvs__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding-left: 4px;
    border-radius: 50%;
  }
  .pvs__placeholder-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.55;
  }
  .pvs__caption {
    margin: 10px 0 0;
    line-height: 1.4;
    opacity: 0.72;
  }

  @media screen and (max-width: 989px) {
    #shopify-section-{{ section.id }} .pvs__grid,
    .pvs__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media screen and (max-width: 749px) {
    /* The columns are overridden in the id-scoped {% comment %}style{% endcomment %}
       block instead: Liquid is not evaluated inside {% comment %}stylesheet{% endcomment %},
       so an id selector written here is a literal string that matches nothing
       and the real id rule wins. */
    .pvs__heading {
      font-size: 20px;
    }
    .pvs__grid > .pvs__item {
      flex: 0 0 min(240px, 68vw);
      scroll-snap-align: start;
    }
    .pvs__grid::-webkit-scrollbar {
      display: none;
    }
  }
/* END_SECTION:product-video-strip */
/* START_SECTION:related-products (INDEX:85) */
/* h2 in the selector so this outranks Dawn's .h2 size rule, which loads after
     this file. Values are the cross-sell heading's, so the two rows match. */
  .related-products h2.related-products__heading {
    font-family: var(--font-body-family);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  /* The card itself lives in component-timber-card.css, shared with every
     other product row, so all that is left here is the gap under the heading. */
  .related-products h2.related-products__heading + .related-products__grid {
    margin-top: 20px;
  }
/* END_SECTION:related-products */
/* START_SECTION:resource-guides (INDEX:86) */
.resource-guides__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-bottom: 1.6rem;
  }
  .resource-guides__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .resource-guides__heading {
    margin: 0;
    font-size: 2.2rem;
    letter-spacing: -0.02em;
  }
  .resource-guides__view-all {
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
  }
  .resource-guides__grid {
    display: grid;
    gap: 1.4rem;
  }
  .resource-guides__card {
    display: flex;
    flex-direction: column;
    background: rgb(var(--color-background));
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
  }
  .resource-guides__card:hover {
    border-color: rgb(var(--color-button));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }
  .resource-guides__image-wrap {
    height: 12rem;
    background: repeating-linear-gradient(-42deg, #EFE7D6 0 11px, #E7DDC8 11px 22px);
  }
  .resource-guides__placeholder {
    height: 100%;
  }
  .resource-guides__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  /* Two classes deep to beat base.css's own `.icon { fill: … }`, which the
     compiled section stylesheet loads before and would otherwise lose to. */
  .resource-guides__card .resource-guides__icon svg {
    width: 3.6rem;
    height: 3.6rem;
    /* The asset icons are a mix of stroked and filled paths, so both are set
       to the accent rather than assuming one or the other. */
    fill: #3F6B2A;
    stroke: #3F6B2A;
    stroke-width: 0.2;
  }
  .resource-guides__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .resource-guides__card-body {
    padding: 1.3rem 1.5rem 1.6rem;
  }
  .resource-guides__card-tag {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .resource-guides__card-title {
    margin: 0.7rem 0 0.6rem;
    font-size: 1.5rem;
    line-height: 1.28;
  }
  .resource-guides__card-text {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.5;
    opacity: 0.75;
  }

  .resource-guides__card--interactive {
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
    width: 100%;
  }
  .resource-guides__card--interactive.is-open {
    border-color: rgb(var(--color-button));
  }
  .resource-guides__image-wrap {
    position: relative;
  }
  .resource-guides__tool-flag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    background: rgba(20, 51, 4, 0.92);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .resource-guides__card-cue {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgb(var(--color-button));
  }
  .resource-guides__chev {
    transition: transform 0.2s ease;
  }
  .is-open .resource-guides__chev {
    transform: rotate(180deg);
  }

  .resource-guides__panel,
  .resource-guides__tabpanel {
    margin-top: 1.4rem;
    padding: 2rem 2.2rem;
    background: rgb(var(--color-background));
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 6px;
  }
  .resource-guides__panel[hidden],
  .resource-guides__tabpanel[hidden] {
    display: none;
  }
  .resource-guides__rte {
    font-size: 1.35rem;
    line-height: 1.65;
    max-width: 70ch;
  }
  .resource-guides__rte > *:first-child {
    margin-top: 0;
  }
  .resource-guides__rte > *:last-child {
    margin-bottom: 0;
  }
  .resource-guides__panel-cta {
    display: inline-block;
    margin-top: 1.4rem;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    color: rgb(var(--color-button));
  }

  /* Calculator */
  .rg-calc__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.2rem 1.6rem;
  }
  .resource-guides__rte + .rg-calc {
    margin-top: 1.8rem;
    display: block;
  }
  .rg-calc__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
  }
  .rg-calc__input {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    padding-right: 1rem;
  }
  .rg-calc__input:focus-within {
    border-color: rgb(var(--color-button));
  }
  .rg-calc__input input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.9rem 1rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    color: inherit;
  }
  .rg-calc__input input:focus {
    outline: none;
  }
  .rg-calc__input em {
    font-style: normal;
    font-size: 1.15rem;
    font-weight: 600;
    opacity: 0.6;
  }
  .rg-calc__out {
    display: grid;
    gap: 0.2rem;
    margin-top: 1.8rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }
  .rg-calc__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 0.55rem 0;
    font-size: 1.3rem;
  }
  .rg-calc__row span {
    opacity: 0.72;
  }
  /* The answer the customer actually came for. */
  .rg-calc__row--key {
    font-size: 1.7rem;
    font-weight: 800;
    color: rgb(var(--color-button));
  }
  .rg-calc__row--key span {
    opacity: 1;
    font-size: 1.4rem;
    font-weight: 700;
    color: inherit;
  }

  .resource-guides {
    /* The tablist carries a 22px top margin. With no padding above it that
       margin collapses out through the container, so the coloured band
       started 22px late and the page background showed through as a white
       strip. flow-root keeps the margin inside the band. */
    display: flow-root;
  }
  .resource-guides__tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.2rem;
  }
  .resource-guides__link-pill[aria-selected='true'] {
    background: rgb(var(--color-button));
    border-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
  }
  .resource-guides__link-pill {
    font-family: inherit;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: 1rem 1.6rem;
    text-decoration: none;
    color: inherit;
  }
  .resource-guides__link-pill:hover {
    border-color: rgb(var(--color-button));
  }
  /* Pill cards at every width (2026-09-30, owner: match Total Sheds' "Good to know"
     row). This row layout used to start below 990px only; desktop kept tall cards
     with a striped placeholder on top. Desktop keeps its columns side by side;
     below 990px they stack. tune: the min-width: 990px block for desktop sizing. */
    /* Three stacked cards with a 120px striped placeholder each is most of a
       screen spent on decoration that carries no information. Below desktop
       width the card turns on its side: a small marker, the title and its
       one line of explanation, and an arrow saying it goes somewhere. This
       used to be a phone-only (max-width: 749px) treatment with a 2-column
       striped-placeholder grid from 750-989px; the 2-column version is gone
       and the row layout now starts at 989px instead. TEMP: trying this out
       at 750-989px per Rio's request 2026-09-14 — revert by restoring the
       749px breakpoint below if it doesn't look right. */
    .resource-guides__card {
      flex-direction: row;
      align-items: center;
      gap: 1.3rem;
      padding: 1.4rem 1.4rem 1.4rem 1.5rem;
      border-radius: 1.4rem;
      border-color: rgba(0, 0, 0, 0.1);
      background: rgba(20, 51, 4, 0.035);
    }
    .resource-guides__image-wrap {
      flex: 0 0 auto;
      width: 4.2rem;
      height: 4.2rem;
      border-radius: 50%;
      overflow: hidden;
      /* Below 749px timber-mobile.css swaps the striped-placeholder gradient
         for a flat green tint and shrinks the icon so it sits inside its own
         margin, since the disc is the icon's ground now and needs no ground
         of its own. This row layout starts at 989px, so the same two rules
         are repeated here rather than widening timber-mobile.css's own
         749px query (mobile CSS there is signed off and not to be touched). */
      background: rgba(100, 153, 73, 0.14);
    }
    .resource-guides__card .resource-guides__icon svg {
      width: 20px;
      height: 20px;
    }
    .resource-guides__card-body {
      padding: 0;
      flex: 1 1 auto;
      min-width: 0;
    }
    .resource-guides__card-title {
      margin: 0 0 0.3rem;
      font-size: 1.45rem;
    }
    .resource-guides__card-text {
      font-size: 1.2rem;
      line-height: 1.4;
    }
    /* The tag duplicates what the title already says at this size, and the
       "Interactive" flag has nowhere to sit once the image is a 42px disc. */
    .resource-guides__card-tag,
    .resource-guides__tool-flag {
      display: none;
    }
    /* Every row ends in the same affordance, whether it navigates or opens a
       panel underneath. The cue keeps its chevron and drops its label. */
    .resource-guides__card::after {
      content: '→';
      flex: 0 0 auto;
      font-size: 1.6rem;
      line-height: 1;
      opacity: 0.45;
    }
    .resource-guides__card--interactive::after {
      content: '↓';
    }
    .resource-guides__card--interactive.is-open::after {
      content: '↑';
    }
    /* The cue's own row of text sits below the copy and pushes the row two
       lines taller; the arrow on the right already says the same thing. */
    .resource-guides__card-cue {
      display: none;
    }
  @media screen and (max-width: 989px) {
    .resource-guides__grid {
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
    }
  }
  @media screen and (min-width: 990px) {
    .resource-guides__card {
      gap: 1.6rem;
      padding: 1.8rem 2rem 1.8rem 1.8rem;
      border-radius: 2.4rem;
    }
    .resource-guides__image-wrap {
      width: 5.2rem;
      height: 5.2rem;
    }
    .resource-guides__card .resource-guides__icon svg {
      width: 22px;
      height: 22px;
    }
    .resource-guides__card-title {
      font-size: 1.6rem;
      font-weight: 600;
    }
    .resource-guides__card-text {
      font-size: 1.3rem;
    }
  }
/* END_SECTION:resource-guides */
/* START_SECTION:social-gallery (INDEX:90) */
.social-gallery {
    /* The header's margin would otherwise escape the band and drag the
       painted background down with it. */
    display: flow-root;
  }
  .social-gallery__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
  }
  .social-gallery__heading {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  .social-gallery__handle {
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  .social-gallery__handle:hover {
    text-decoration: underline;
  }
  /* Fixed-size thumbnails in a left-aligned row, not a grid stretched across
     the page. As a four-column grid each photo became 298px on a wide screen
     — these are proof shots sitting under a heading, and at that size they
     read as the main event. Wrapping means more than four blocks simply flow
     onto a second line. */
  /* One row, always. These are proof shots: eight of them in a line reads as
     a strip of evidence, and the same eight wrapped onto a second row of two
     reads as a grid someone forgot to fill. So the row never wraps, the photos
     share the width between them, and when the window gets too narrow for the
     share to stay respectable the last photo drops out of the row rather than
     onto a line of its own. Four is the floor — below that the phone rail
     takes over, which is a different thing again. */
  /* A grid with a set number of columns, not a row of fixed-width photos.

     Fixed widths were the mistake: eight photos at the size the merchant set,
     plus the gaps, comes to more than the 1200px the page is ever allowed to
     be, so the row ran off the side. The breakpoints meant to prevent that
     were measuring the window, which keeps growing after the container has
     stopped — so on a wide screen they never fired.

     Columns solve both. The row is always exactly full, the photos are as
     large as the space allows rather than a number typed in a setting, and
     nothing can overflow because the track count is what is being set. */
  swipe-rail.social-gallery__rail {
    display: block;
  }
  .social-gallery__grid {
    --sg-gap: 1.2rem;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sg-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    cursor: grab;
  }
  .social-gallery__grid::-webkit-scrollbar {
    display: none;
  }
  .social-gallery__grid.is-dragging {
    cursor: grabbing;
  }
  .social-gallery__grid > .social-gallery__photo {
    flex: 0 0 calc((100% - (var(--sg-cols, 6) - 1) * var(--sg-gap)) / var(--sg-cols, 6));
    scroll-snap-align: start;
  }
  .social-gallery__image {
    -webkit-user-drag: none;
    user-select: none;
  }
  .social-gallery__photo {
    position: relative;
    display: block;
    width: auto;
    max-width: 100%;
    overflow: hidden;
    background: repeating-linear-gradient(-42deg, #efe7d6 0 11px, #e7ddc8 11px 22px);
    text-decoration: none;
    color: inherit;
  }
  .social-gallery__placeholder {
    display: block;
    height: 100%;
  }
  /* Absolute rather than height: 100% — the wrapper's height comes from
     aspect-ratio, which is indefinite, so a percentage height would resolve
     to auto and a tall photo would stretch the row. */
  .social-gallery__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .social-gallery__caption {
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0.8rem;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #143304;
  }

  @media screen and (max-width: 749px) {
    /* Sized off the reference, measured rather than guessed: their thumbnails
       are square at 22% of the viewport with an 8px gap, which shows three in
       full and about three-quarters of the fourth. Ours sits 1.15x above that
       by choice, which trades some of the fourth photo's peek for a larger
       image. These are proof shots, not products — a rail of two big squares
       showed a quarter of the row. */
    .social-gallery__grid {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      gap: 8px;
      margin-left: -16px;
      margin-right: -16px;
      padding: 0 16px 4px;
      scroll-snap-type: x proximity;
      scroll-padding-left: 16px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .social-gallery__grid::-webkit-scrollbar {
      display: none;
    }
    /* The rail scrolls, so nothing needs hiding here — put back anything the
       desktop breakpoints above took out. */
    .social-gallery__photo:nth-child(n + 5) {
      display: block;
    }
    .social-gallery__grid > .social-gallery__photo {
      /* Exactly four across, no peek: the screen less its gutters, less the
         three gaps between them, quartered. The row still scrolls, so photos
         five onward are a swipe away — it is the first screenful that is
         being fixed at four. */
      flex: 0 0 calc((100vw - 32px - 24px) / 4);
      scroll-snap-align: start;
      border-radius: 12px;
    }
    .social-gallery__heading {
      font-size: 1.55rem;
    }
    .social-gallery__header {
      margin-bottom: 1.2rem;
      gap: 0.4rem 1.2rem;
    }
    /* The heading takes the room and the handle sits against the right edge
       beside it, rather than the two sharing a line only when both happen to
       be short. */
    .social-gallery__heading {
      flex: 1 1 60%;
    }
    .social-gallery__handle {
      font-size: 1.3rem;
    }
  }
/* END_SECTION:social-gallery */
/* START_SECTION:utility-bar (INDEX:95) */
.utility-bar-2 {
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    max-height: 6rem;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
  }
  div.utility-bar-2__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 2rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  }
  html.header-condensed .utility-bar-2 {
    max-height: 0;
    border-bottom-color: transparent;
    pointer-events: none;
  }
  html.header-condensed .utility-bar-2__inner-anim {
    transform: translateY(-100%);
    opacity: 0;
  }
  .utility-bar-2__links {
    display: flex;
    gap: 2.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }
  .utility-bar-2__links a {
    color: inherit;
    text-decoration: none;
  }
  .utility-bar-2__links a:hover {
    text-decoration: underline;
  }
  .utility-bar-2__contact {
    margin: 0;
    white-space: normal;
  }
  .utility-bar-2__hours {
    margin-left: 0.8rem;
    opacity: 0.85;
  }
  @media screen and (max-width: 749px) {
    .utility-bar-2__hours {
      display: none;
    }
  }
/* END_SECTION:utility-bar */