/** Shopify CDN: Minification failed

Line 633:2 Unexpected "{"
Line 633:3 Expected identifier but found "%"
Line 634:8 Unexpected "/"
Line 634:75 Unterminated string token
Line 637:78 Unterminated string token
Line 649:73 Unterminated string token
Line 654:3 Expected identifier but found "%"
Line 2286:2 Unexpected "{"
Line 2286:3 Expected identifier but found "%"
Line 2287:28 Unexpected bad string token
... and 5 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:about-hero (INDEX:0) */
.ah__inner {
    display: grid;
    gap: 3.2rem;
    align-items: center;
  }
  .ah__eyebrow {
    display: inline-block;
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .ah__heading {
    margin: 0 0 1.6rem;
    font-size: 4.6rem;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.035em;
  }
  .ah__lead {
    font-size: 1.8rem;
    line-height: 1.55;
  }
  .ah__lead p {
    margin: 0;
  }
  .ah__lead p + p {
    margin-top: 1.2rem;
  }
  .ah__lead strong {
    color: rgb(20, 51, 4);
  }

  .ah__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 2.4rem;
  }
  a.ah__button,
  a.ah__button:hover,
  a.ah__button:focus {
    /* base.css underlines anchors and loads after this stylesheet, so the
       override has to win on specificity rather than order. */
    text-decoration: none;
  }
  a.ah__button {
    display: inline-block;
    padding: 1.4rem 2.8rem;
    font-size: 1.5rem;
    font-weight: 700;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  a.ah__button--secondary {
    border: 1px solid #ded7c8;
    background: transparent;
  }

  .ah__media {
    overflow: hidden;
  }
  .ah__image {
    display: block;
    width: 100%;
    height: auto;
  }

  .ah__pledge {
    padding: 2.8rem;
    border: 1px solid #ded7c8;
  }
  .ah__pledge-title {
    margin: 0 0 1.2rem;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .ah__pledge-text {
    font-size: 1.5rem;
    line-height: 1.6;
  }
  .ah__pledge-text p {
    margin: 0;
  }
  .ah__pledge-text p + p {
    margin-top: 1rem;
  }

  @media screen and (max-width: 989px) {
    .ah__inner {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 2.4rem;
    }
  }
  @media screen and (max-width: 749px) {
    .ah__heading {
      font-size: 3.2rem;
    }
    .ah__lead {
      font-size: 1.6rem;
    }
    .ah__pledge {
      padding: 2rem;
    }
    .ah__buttons {
      gap: 1rem;
    }
    a.ah__button {
      flex: 1 1 100%;
      text-align: center;
    }
  }
/* END_SECTION:about-hero */

/* START_SECTION:about-story (INDEX:1) */
.as__inner {
    display: grid;
    gap: 4rem;
    align-items: start;
  }
  .as__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .as__heading {
    margin: 0 0 1.8rem;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }
  .as__prose {
    /* A measure this wide is comfortable for long-form; the grid track
       is already narrower than the page, so this only bites on very
       wide screens. */
    max-width: 62rem;
    font-size: 1.6rem;
    line-height: 1.7;
  }
  .as__prose p {
    margin: 0 0 1.4rem;
  }
  .as__prose p:last-child {
    margin-bottom: 0;
  }
  .as__prose strong {
    font-weight: 700;
  }

  .as__aside {
    /* Sticky so the commitments stay alongside the prose as it scrolls
       past on a tall desktop screen. */
    position: sticky;
    top: 2rem;
  }
  .as__card {
    padding: 2.8rem;
    border: 1px solid #ded7c8;
  }
  .as__card-heading {
    margin: 0 0 1.8rem;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .as__list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .as__item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .as__tick {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
  }
  .as__tick svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
  }
  .as__item-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
  }
  .as__item-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .as__item-text {
    font-size: 1.3rem;
    line-height: 1.55;
  }
  .as__card-note {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #ded7c8;
    font-size: 1.3rem;
    line-height: 1.55;
  }
  .as__card-note p {
    margin: 0;
  }

  .as__quote {
    margin: 4rem 0 0;
    padding: 3.6rem 4rem;
  }
  .as__quote-text {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-indent: 0;
  }
  .as__quote-attrib {
    margin-top: 1.4rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  @media screen and (max-width: 989px) {
    .as__inner {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 2.8rem;
    }
    .as__aside {
      position: static;
    }
  }
  @media screen and (max-width: 749px) {
    .as__heading {
      font-size: 2.4rem;
    }
    .as__card {
      padding: 2rem;
    }
    .as__quote {
      margin-top: 2.8rem;
      padding: 2.4rem 2rem;
    }
    .as__quote-text {
      font-size: 1.9rem;
    }
  }
/* END_SECTION:about-story */

/* 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:best-sellers (INDEX:5) */
.best-sellers__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-bottom: 2.2rem;
  }
  .best-sellers__heading {
    margin: 0;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
/* END_SECTION:best-sellers */

/* START_SECTION:breadcrumb (INDEX:6) */
.bcr__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    list-style: none;
  }
  .bcr__item,
  .bcr__sep {
    display: flex;
    align-items: center;
    /* 1.2 keeps the bar at the design's 40px: 12 + 15 + 12 + 1px border. */
    line-height: 1.2;
  }
  .bcr__item a {
    text-decoration: none;
    transition: opacity 0.15s ease;
  }
  .bcr__item a:hover {
    text-decoration: underline;
  }
/* END_SECTION:breadcrumb */

/* START_SECTION:category-tiles (INDEX:13) */
.category-tiles__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.2rem;
  }
  .category-tiles__heading {
    margin: 0;
    font-size: 3rem;
    letter-spacing: -0.02em;
  }
  .category-tiles__view-all {
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
  }
  .category-tiles__grid {
    display: grid;
    gap: 1.6rem;
  }
  .category-tiles__tile {
    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;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .category-tiles__tile:hover {
    border-color: rgb(var(--color-button));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
  }
  .category-tiles__image-wrap {
    position: relative;
    height: 13.2rem;
    /* The blurred image is scaled past the frame, so the frame has to clip. */
    overflow: hidden;
    background: repeating-linear-gradient(-42deg, #EFE7D6 0 11px, #E7DDC8 11px 22px);
  }
  /* The dim wash. Always present, opacity 0 until the slider says otherwise,
     so there is no separate markup path to keep in step. */
  .category-tiles__image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .category-tiles__placeholder {
    height: 100%;
  }
  .category-tiles__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .category-tiles__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.6rem;
    min-height: 6.4rem;
    margin-top: auto;
  }
  .category-tiles__icon {
    display: flex;
    flex: none;
  }
  .category-tiles__text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .category-tiles__label {
    font-size: 1.3rem;
    font-weight: 700;
    min-width: 0;
  }
  .category-tiles__price {
    font-size: 1.15rem;
    font-weight: 600;
    white-space: nowrap;
    flex: none;
  }
  @media screen and (max-width: 749px) {
    /* Pulled into the page's own gutters and given a tighter gap, so each
       tile is as wide as a two-up row on a phone allows. */
    .category-tiles__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      margin-left: -1.5rem;
      margin-right: -1.5rem;
      gap: 0.6rem;
    }
    /* The whole tile is a square, photograph and bar together, rather than a
       fixed-height photo with a bar of whatever height under it. The photo
       takes the square less the bar, so a longer label eats into the picture
       instead of making one tile taller than its neighbour. */
    .category-tiles__tile {
      aspect-ratio: 1 / 1;
    }
    .category-tiles__image-wrap {
      height: auto !important;
      flex: 1 1 auto;
      min-height: 0;
    }

    /* The label sits on the photograph rather than in a bar beneath it, with
       the icon in a frosted chip above it. The bar is taken out of the flow
       and laid over the whole tile, so the picture keeps the full square. */
    .category-tiles__tile {
      position: relative;
    }
    .category-tiles__tile .category-tiles__image-wrap {
      position: absolute;
      inset: 0;
    }
    .category-tiles__tile .category-tiles__bar {
      position: absolute;
      inset: 0;
      z-index: 1;
      /* Replaces the bar's green, which the section sets in an id-scoped rule
         that outranks a plain class — hence the !important.

         Not a flat panel and not nothing: a wash that is heaviest at the
         middle, where the icon and label sit, and clears at both edges so the
         photograph is still a photograph. White type on a sunlit timber stack has no
         contrast of its own — this is what gives it some. */
      background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.32) 55%,
        rgba(0, 0, 0, 0.08) 100%
      ) !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.9rem;
      padding: 1.2rem;
      min-height: 0;
      margin-top: 0;
      color: #fff;
      /* The photograph behind the type is unpredictable, so the type carries
         its own shadow rather than relying on the picture being dark. */
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    }
    .category-tiles__tile .category-tiles__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4.4rem;
      height: 4.4rem;
      border-radius: 1.4rem;
      background: rgba(255, 255, 255, 0.22);
      border: 1px solid rgba(255, 255, 255, 0.35);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .category-tiles__tile .category-tiles__text {
      flex: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.2rem;
      text-align: center;
    }
    .category-tiles__tile .category-tiles__label {
      font-size: 1.6rem;
    }
    /* The price belongs on a bar, where there is room for it beside the name.
       Over the photograph it is a second line competing with the one that
       matters. */
    .category-tiles__tile .category-tiles__price {
      display: none;
    }
    .category-tiles__bar {
      padding: 1.1rem 1.2rem;
      gap: 0.8rem;
      min-height: 0;
    }
    .category-tiles__text {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.1rem;
    }
    .category-tiles__label {
      font-size: 1.25rem;
      line-height: 1.25;
    }
    .category-tiles__price {
      font-size: 1.05rem;
      opacity: 0.72;
    }
  }

  {%- comment -%}
    TEMP/reversible, per Rio's request 2026-09-14. The bar-style tile above
    keeps a FIXED pixel image height (set in the id-scoped style block,
    .category-tiles__image-wrap) at every width from 750px up to desktop.
    At 1106px and wider that's fine — the tile is wide enough that the fixed
    height still reads as a normal landscape crop. At 750-989px the grid
    drops to 2 columns, so each tile gets much narrower while the image
    height stays pinned — the photo gets crushed into an unnaturally tall
    sliver instead of the landscape crop it was composed for.

    Rather than patch the fixed-height bar-style to cope with a narrower
    column, this reuses the square/overlay treatment already built and
    tuned for <749px (same tile, image fills it, icon+label centered over a
    gradient wash, price dropped) — just repeated here for 750-989px
    instead of widening the <749px query itself, so the finalized phone
    treatment stays completely untouched. Does NOT bring over the phone
    block's page-bleed negative margins (-1.5rem) or grid-gap tightening,
    since the tablet page gutter differs from the phone one — only the
    tile/image/bar/icon/text visual treatment.

    Revert: delete this block. Nothing above or below it was changed.
  {%- endcomment -%}
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .category-tiles__tile {
      aspect-ratio: 1 / 1;
      /* Added per Rio's request 2026-09-14 — the tile's height was tied
         purely to width (half the viewport, since it's a square), so 2 rows
         of tiles kept growing taller as the window widened through this
         range, eventually pushing the bottom row below the fold. The point
         wasn't a pixel width, it was "all 4 must be visible without
         scrolling" — which a width-only rule can't promise on its own,
         since screen height varies independently of width. Capping the
         height stops the runaway growth: past this height the tile becomes
         a slightly-wider-than-tall crop instead of continuing to balloon
         into a bigger square.
         width: 100% is required alongside the cap, not optional — a grid
         item with both aspect-ratio and a capped (definite) height stops
         stretching to fill its column on its own (confirmed by testing:
         without this, the tile shrank to a smaller square and left-aligned
         in its track, leaving uneven empty space where the crop should be).
         Was 340px — Rio reported that still cut the bottom row off behind
         the mobile tab bar on his own screen, so brought down to 270px
         2026-09-14. Tune the cap by changing the number below; revert by
         deleting both of these two lines. */
      max-height: 270px;
      width: 100%;
      position: relative;
    }
    .category-tiles__tile .category-tiles__image-wrap {
      height: auto !important;
      position: absolute;
      inset: 0;
      flex: 1 1 auto;
      min-height: 0;
    }
    .category-tiles__tile .category-tiles__bar {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.32) 55%,
        rgba(0, 0, 0, 0.08) 100%
      ) !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* !important: the existing 750-1199px id-scoped rule above also sets
         .category-tiles__bar's gap (0.8rem), and an ID beats any number of
         plain classes regardless of source order — without this the bar
         would silently keep that gap instead of this block's 0.9rem. */
      gap: 0.9rem !important;
      padding: 1.2rem;
      min-height: 0;
      height: auto;
      margin-top: 0;
      color: #fff;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    }
    .category-tiles__tile .category-tiles__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4.4rem;
      height: 4.4rem;
      border-radius: 1.4rem;
      background: rgba(255, 255, 255, 0.22);
      border: 1px solid rgba(255, 255, 255, 0.35);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .category-tiles__tile .category-tiles__text {
      flex: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* Same reason as .category-tiles__bar's gap above — the id-scoped
         750-1199px rule sets this element's gap too (0.6rem) and would
         otherwise win over this plain-class rule's 0.2rem. */
      gap: 0.2rem !important;
      text-align: center;
    }
    .category-tiles__tile .category-tiles__label {
      font-size: 1.6rem;
    }
    .category-tiles__tile .category-tiles__price {
      display: none;
    }
  }
/* END_SECTION:category-tiles */

/* START_SECTION:collection-banner (INDEX:16) */
.cbn__band {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Faint diagonal weave so an image-less band still has some material to
       it rather than reading as flat colour. */
    background-image: repeating-linear-gradient(
      -42deg,
      rgba(255, 255, 255, 0.028) 0 14px,
      rgba(255, 255, 255, 0) 14px 28px
    );
  }
  .cbn__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cbn__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 26, 2, 0.88) 0%, rgba(10, 26, 2, 0.62) 55%, rgba(10, 26, 2, 0.35) 100%);
  }
  .cbn__inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
  /* Block-level with a shrink-to-fit width rather than inline-block: an
     inline box carries the line's strut, which added ~2px below the pill and
     pushed the measured gap to the title off by the same amount. */
  .cbn__eyebrow {
    display: block;
    width: fit-content;
    padding: 6px 12px;
    border: 1px solid;
    border-radius: 3px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.18;
  }
  .cbn__title {
    letter-spacing: -0.03em;
    line-height: 1.05;
  }
  .cbn__subtext {
    margin: 0;
    line-height: 1.65;
  }
  /* Paragraphs inside a rich-text description inherit the standfirst's colour
     and size rather than the theme's body defaults. */
  .cbn__subtext p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
  }
  .cbn__subtext p + p {
    margin-top: 0.8em;
  }

  @media screen and (max-width: 749px) {
    /* Hidden, not removed: the collection description is still in the page for
       search engines, it just stops costing a phone most of a screen before
       the first product. Long-form copy belongs to the desktop layout, where
       the band is beside the fold rather than filling it. */
    .cbn__subtext--desktop {
      display: none;
    }
  }

  .cbn__trust {
    display: flex;
    align-items: center;
  }
  .cbn__trust-inner {
    display: grid;
    width: 100%;
    margin: 0 auto;
    gap: 1.6rem 2.4rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
  }
  .cbn__trust-item {
    display: flex;
    align-items: center;
  }
  .cbn__trust-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cbn__trust-icon svg,
  .cbn__trust-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }
  .cbn__trust-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  /* line-height 1 so the gap between the two lines is exactly the value set,
     rather than that plus whatever leading the font brings. */
  .cbn__trust-title,
  .cbn__trust-sub {
    line-height: 1;
  }
/* END_SECTION:collection-banner */

/* START_SECTION:collection-browse (INDEX:17) */
.cbr__inner {
    display: grid;
    align-items: start;
    width: 100%;
    margin: 0 auto;
  }
  .cbr__sidebar {
    display: grid;
    gap: 1.6rem;
    position: sticky;
    top: 12rem;
  }
  .cbr__card-heading {
    margin: 0 0 1.2rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
  }
  .cbr__nav {
    display: grid;
  }
  .cbr__nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .cbr__nav-count {
    opacity: 0.65;
    font-weight: 600;
  }
  .cbr__nav-item.is-active .cbr__nav-count {
    opacity: 0.8;
  }
  .cbr__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .cbr__pill {
    padding: 0.7rem 1.2rem;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .cbr__pill:hover {
    border-color: rgb(20, 51, 4);
    background: rgba(20, 51, 4, 0.05);
  }
  .cbr__promo-heading {
    margin: 0 0 0.8rem;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .cbr__promo-text {
    margin: 0 0 1.6rem;
    font-size: 1.3rem;
    line-height: 1.5;
    opacity: 0.85;
  }
  .cbr__promo-button {
    display: inline-block;
    padding: 1rem 1.6rem;
    border-radius: 4px;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
  }

  .cbr__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-bottom: 2rem;
  }
  .cbr__title {
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .cbr__count {
    margin: 0.6rem 0 0;
    line-height: 1;
  }
  .cbr__sort {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 0;
    font-size: 1.3rem;
  }
  .cbr__sort label {
    opacity: 0.7;
  }
  .cbr__select {
    position: relative;
    display: flex;
    align-items: center;
  }
  .cbr__select select {
    appearance: none;
    padding: 1rem 3.6rem 1rem 1.4rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
  }
  .cbr__select svg {
    position: absolute;
    right: 1.4rem;
    pointer-events: none;
  }

  .cbr__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    margin-top: 3.2rem;
  }
  .cbr__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    height: 4rem;
    padding: 0 1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 4px;
    font-size: 1.35rem;
    font-weight: 700;
    text-decoration: none;
    color: inherit;
  }
  .cbr__page:hover {
    border-color: rgb(20, 51, 4);
  }
  .cbr__page.is-current {
    background: rgb(20, 51, 4);
    border-color: rgb(20, 51, 4);
    color: #fff;
  }
  .cbr__page.is-disabled {
    opacity: 0.35;
  }
  .cbr__page.is-gap {
    border: none;
    background: none;
    min-width: 2rem;
  }
  .cbr__empty {
    margin: 0;
    padding: 4rem 0;
    font-size: 1.5rem;
    opacity: 0.75;
  }

  @media screen and (max-width: 989px) {
    .cbr__sidebar {
      position: static;
    }
  }
/* END_SECTION:collection-browse */

/* 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:contact-form-panel (INDEX:20) */
.cfp__inner {
    display: grid;
    gap: 2.4rem;
    align-items: start;
  }
  .cfp__card,
  .cfp__aside-card {
    padding: 3.2rem;
    border: 1px solid #ded7c8;
    border-radius: 16px;
  }
  .cfp__heading {
    margin: 0 0 0.8rem;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .cfp__intro {
    margin-bottom: 2.4rem;
    font-size: 1.4rem;
    line-height: 1.6;
  }
  .cfp__intro p {
    margin: 0;
  }

  .cfp__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }
  /* A row with a single surviving child (its sibling switched off in the
     editor) should not sit in a half-width column. */
  .cfp__row > .cfp__field:only-child {
    grid-column: 1 / -1;
  }
  .cfp__row:empty {
    display: none;
  }
  .cfp__field {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.6rem;
    min-width: 0;
  }
  .cfp__fieldset {
    border: 0;
    padding: 0;
    margin-inline: 0;
  }
  .cfp__label {
    padding: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: rgb(38, 38, 31);
  }
  .cfp__req {
    color: #b4540e;
  }
  .cfp__optional {
    font-weight: 400;
    color: rgb(138, 138, 116);
  }
  .cfp__input {
    width: 100%;
    box-sizing: border-box;
    padding: 1.2rem 1.4rem;
    border: 1px solid #ded7c8;
    border-radius: 10px;
    background: #fff;
    /* 16px so iOS does not zoom the viewport on focus. */
    font-size: 1.6rem;
    font-family: inherit;
    line-height: 1.4;
    color: rgb(38, 38, 31);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .cfp__input::placeholder {
    color: rgb(168, 168, 148);
  }
  .cfp__input:focus,
  .cfp__input:focus-visible {
    outline: none;
  }
  .cfp__textarea {
    resize: vertical;
    min-height: 14rem;
  }
  .cfp__select-wrap {
    position: relative;
  }
  .cfp__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 4rem;
    cursor: pointer;
  }
  .cfp__select-caret {
    position: absolute;
    top: 50%;
    right: 1.4rem;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
  }
  .cfp__select-caret svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .cfp__hint {
    font-size: 1.2rem;
    line-height: 1.45;
  }

  .cfp__radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .cfp__radio {
    margin: 0;
  }
  .cfp__radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .cfp__radio span {
    display: inline-block;
    padding: 0.9rem 1.6rem;
    border: 1px solid #ded7c8;
    border-radius: 999px;
    font-size: 1.3rem;
    font-weight: 600;
    color: rgb(90, 90, 74);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .cfp__radio input:focus-visible + span {
    outline: 2px solid #143304;
    outline-offset: 2px;
  }

  .cfp__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem 1.6rem;
    margin-top: 0.8rem;
  }
  .cfp__submit {
    padding: 1.4rem 3.2rem;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .cfp__hint--inline {
    flex: 1 1 20rem;
    margin: 0;
  }

  .cfp__status {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
    padding: 1.6rem;
    border-radius: 12px;
    font-size: 1.4rem;
    line-height: 1.5;
  }
  .cfp__status strong {
    display: block;
    font-size: 1.5rem;
  }
  .cfp__status p {
    margin: 0.4rem 0 0;
  }
  .cfp__status--success {
    background: #edf3e7;
    border: 1px solid #a8ce8e;
    color: #143304;
  }
  .cfp__status--error {
    background: #fdf1e8;
    border: 1px solid #e7c3a3;
    color: #7a3806;
  }
  .cfp__status-icon svg {
    display: block;
    width: 2rem;
    height: 2rem;
  }

  .cfp__aside-heading {
    margin: 0 0 1.8rem;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .cfp__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
  }
  .cfp__step {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
  }
  .cfp__step-number {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    font-size: 1.3rem;
    font-weight: 700;
  }
  .cfp__step-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
  }
  .cfp__step-title {
    font-size: 1.4rem;
    font-weight: 700;
  }
  .cfp__step-text {
    font-size: 1.3rem;
    line-height: 1.55;
  }
  .cfp__aside-note {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #ded7c8;
    font-size: 1.3rem;
    line-height: 1.55;
    color: rgb(90, 90, 74);
  }
  .cfp__aside-note p {
    margin: 0;
  }

  @media screen and (max-width: 989px) {
    .cfp__inner {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }
  @media screen and (max-width: 749px) {
    .cfp__card,
    .cfp__aside-card {
      padding: 2rem;
    }
    .cfp__row {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }
    .cfp__submit {
      width: 100%;
    }
  }
/* END_SECTION:contact-form-panel */

/* START_SECTION:contact-hero (INDEX:22) */
.contact-hero__head {
    max-width: 62rem;
    margin-bottom: 3.2rem;
  }
  .contact-hero__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(91, 140, 66);
  }
  .contact-hero__heading {
    margin: 0 0 1.2rem;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .contact-hero__sub {
    font-size: 1.6rem;
    line-height: 1.6;
  }
  .contact-hero__sub p {
    margin: 0;
  }
  .contact-hero__sub p + p {
    margin-top: 0.8rem;
  }

  .contact-hero__grid {
    display: grid;
    gap: 1.6rem;
  }
  .contact-hero__card {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    padding: 2rem;
    border: 1px solid #ded7c8;
    border-radius: 14px;
    text-decoration: none;
    /* The whole card is the hit target, so the transition has to be on the
       card rather than on any inner text. */
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  }
  a.contact-hero__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(20, 51, 4, 0.08);
  }
  a.contact-hero__card,
  a.contact-hero__card:hover,
  a.contact-hero__card:focus {
    /* Dawn underlines anchors from base.css, which loads after this
       compiled stylesheet — so this needs to beat a bare `a` rule on
       specificity rather than on order. */
    text-decoration: none;
  }
  .contact-hero__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 12px;
    background: #edf3e7;
  }
  .contact-hero__icon svg {
    display: block;
    width: 2rem;
    height: 2rem;
  }
  .contact-hero__card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
  }
  .contact-hero__card-label {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(138, 138, 116);
  }
  .contact-hero__card-value {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    /* Long email addresses must not widen the grid track. */
    overflow-wrap: anywhere;
  }
  .contact-hero__card-note {
    font-size: 1.3rem;
    line-height: 1.45;
    color: rgb(90, 90, 74);
  }
  .contact-hero__chip {
    align-self: flex-start;
    margin-top: 0.4rem;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
  }

  @media screen and (max-width: 989px) {
    .contact-hero__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  @media screen and (max-width: 749px) {
    .contact-hero__grid {
      grid-template-columns: 1fr !important;
      gap: 1rem;
    }
    .contact-hero__head {
      margin-bottom: 2.2rem;
    }
    .contact-hero__card {
      padding: 1.6rem;
      align-items: center;
    }
  }
/* END_SECTION:contact-hero */

/* 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:customer-auth (INDEX:26) */
.ca__card {
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    padding: 3.2rem;
    border: 1px solid #ded7c8;
    box-shadow: 0 18px 50px rgba(20, 51, 4, 0.07);
  }
  .ca__logo {
    display: block;
    width: 18rem;
    margin: 0 auto 2.4rem;
  }
  .ca__logo img {
    display: block;
    width: 100%;
    height: auto;
  }
  .ca__head {
    text-align: center;
    margin-bottom: 2.4rem;
  }
  .ca__heading {
    margin: 0 0 0.8rem;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
  }
  .ca__sub {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.55;
  }
  .ca__sub--left {
    text-align: left;
    margin-bottom: 1.8rem;
  }

  .ca__perks {
    padding: 1.8rem 2rem;
    margin-bottom: 2.4rem;
  }
  .ca__perks-title {
    display: block;
    margin-bottom: 1.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .ca__perks-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ca__perk {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.3rem;
    line-height: 1.4;
  }
  .ca__perk svg {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
  }

  .ca__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
  .ca__group {
    margin-bottom: 1.6rem;
    min-width: 0;
  }
  .ca__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .ca__label {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 1.3rem;
    font-weight: 700;
  }
  .ca__forgot {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
  }
  .ca__field {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.4rem;
    border: 1px solid #ded7c8;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .ca__field > svg {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    color: #8a8a74;
  }
  .ca__field input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.3rem 0;
    border: 0;
    background: none;
    /* 16px so iOS does not zoom the page on focus. */
    font-size: 1.6rem;
    font-family: inherit;
    color: #26261f;
  }
  .ca__field input:focus,
  .ca__field input:focus-visible {
    outline: none;
  }
  .ca__eye {
    flex: 0 0 auto;
    display: flex;
    padding: 0.4rem;
    border: 0;
    background: none;
    color: #8a8a74;
    cursor: pointer;
  }
  .ca__eye svg {
    width: 1.8rem;
    height: 1.8rem;
  }
  .ca__eye--on {
    color: #143304;
  }
  .ca__hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 1.2rem;
  }

  .ca__check {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin: 0.4rem 0 2rem;
    font-size: 1.3rem;
    line-height: 1.5;
  }
  .ca__check input {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    margin: 0.1rem 0 0;
    accent-color: #143304;
  }
  .ca__check p {
    margin: 0;
  }

  .ca__submit {
    display: block;
    width: 100%;
    padding: 1.4rem 2rem;
    border: 0;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .ca__ghost {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 1.2rem;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 1.3rem;
    color: #8a8a74;
    cursor: pointer;
  }

  .ca__foot {
    margin: 1.8rem 0 0;
    text-align: center;
    font-size: 1.35rem;
  }
  .ca__foot a {
    font-weight: 700;
  }

  .ca__note {
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.6rem;
    border-radius: 10px;
    font-size: 1.3rem;
    line-height: 1.5;
  }
  .ca__note--ok {
    background: #edf3e7;
    border: 1px solid #a8ce8e;
    color: #143304;
  }
  .ca__note--error {
    background: #fdf1e8;
    border: 1px solid #e7c3a3;
    color: #7a3806;
  }
  .ca__note ul {
    margin: 0.4rem 0 0;
    padding-left: 1.6rem;
  }

  @media screen and (max-width: 749px) {
    .ca__card {
      padding: 2.2rem 1.8rem;
    }
    .ca__heading {
      font-size: 2.2rem;
    }
    .ca__row,
    .ca__perks-list {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SECTION:customer-auth */

/* START_SECTION:deals-calculator (INDEX:27) */
.dcalc__inner {
    margin: 0 auto;
    padding: 0 2.4rem;
    text-align: center;
  }
  .dcalc__eyebrow {
    margin: 0 0 1.2rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
  }
  .dcalc__heading {
    margin: 0 0 1.4rem;
    line-height: 1.08;
  }
  .dcalc__intro {
    margin: 0 auto 3rem;
    line-height: 1.6;
  }
  .dcalc__panel {
    display: block;
    padding: 2.6rem 2.8rem 3rem;
    text-align: left;
  }
  .dcalc__step + .dcalc__step {
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .dcalc__step-label {
    margin: 0 0 1.2rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .dcalc__search {
    position: relative;
  }
  .dcalc__input {
    width: 100%;
    padding: 1.3rem 1.6rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1.45rem;
    color: inherit;
  }
  .dcalc__input:focus {
    outline: none;
    border-color: rgb(20, 51, 4);
  }
  .dcalc__results {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  }
  .dcalc__results[hidden] {
    display: none;
  }
  .dcalc__results button {
    display: block;
    width: 100%;
    padding: 1rem 1.2rem;
    background: none;
    border: none;
    border-radius: 3px;
    font-family: inherit;
    font-size: 1.35rem;
    text-align: left;
    cursor: pointer;
    color: inherit;
  }
  .dcalc__results button:hover {
    background: #f1ead9;
  }
  .dcalc__popular {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.4rem;
    font-size: 1.25rem;
  }
  .dcalc__popular > span {
    opacity: 0.6;
  }
  .dcalc__chip {
    padding: 0.6rem 1.1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 100px;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
  }
  .dcalc__chip:hover {
    border-color: rgb(20, 51, 4);
  }
  .dcalc__picked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin-bottom: 1.6rem;
  }
  .dcalc__picked-name {
    font-size: 1.6rem;
    font-weight: 800;
    color: rgb(20, 51, 4);
  }
  .dcalc__change {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
  }
  .dcalc__fields {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.4rem;
  }
  .dcalc__field {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 1.2rem;
    font-weight: 600;
  }
  .dcalc__field[hidden] {
    display: none;
  }
  .dcalc__field select,
  .dcalc__field input {
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    color: inherit;
  }
  .dcalc__out {
    margin-top: 2.4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .dcalc__out[hidden] {
    display: none;
  }
  .dcalc__result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 0.6rem 0;
    font-size: 1.35rem;
  }
  .dcalc__result span {
    opacity: 0.72;
  }
  .dcalc__result--total {
    margin-top: 0.8rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 1.8rem;
    font-weight: 800;
  }
  .dcalc__result--total span {
    opacity: 1;
    font-size: 1.45rem;
  }
  .dcalc__empty {
    margin: 2rem 0 0;
    font-size: 1.35rem;
    opacity: 0.6;
  }
  .dcalc__empty[hidden] {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .dcalc__fields {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SECTION:deals-calculator */

/* START_SECTION:deals-packages (INDEX:28) */
.dpk__inner {
    margin: 0 auto;
    padding: 0 2.4rem;
  }
  .dpk__head {
    text-align: center;
    margin-bottom: 3.2rem;
  }
  .dpk__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.8rem;
    padding: 0.7rem 1.4rem;
    border-radius: 100px;
    font-weight: 700;
    line-height: 1;
  }
  .dpk__eyebrow-icon {
    display: flex;
  }
  .dpk__heading {
    margin: 0 0 1.4rem;
    line-height: 1.06;
  }
  .dpk__intro {
    margin: 0 auto;
    line-height: 1.6;
  }

  .dpk__grid {
    display: grid;
    align-items: stretch;
  }

  .dpk__card {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .dpk__card--media {
    /* Clipping is what rounds the top of the photo to the card's own radius.
       Only the image variant gets it — the badge on a card without one hangs
       over the top border and would be sliced in half. */
    overflow: hidden;
  }
  .dpk__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 2.6rem 2.2rem 2.2rem;
  }
  .dpk__card--media .dpk__body {
    padding-top: 2rem;
  }

  .dpk__media {
    position: relative;
    background: #f3f1ec;
    overflow: hidden;
  }
  /* Absolutely placed so the photo can never stretch its box (2026-09-29). In
     flow, a square photo's own height overrode the box's aspect-ratio, so every
     card image rendered square — 550px tall on a 600px screen. The box shape is
     the "Image shape" setting (4:3 on phones). */
  .dpk__media-img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .dpk__media--product {
    background: #fff;
    border-bottom: 1px solid #ece7dd;
  }
  .dpk__media--product .dpk__media-img {
    object-fit: contain;
    padding: 1.4rem;
    box-sizing: border-box;
  }

  /* Phones. The card is a full-width panel here rather than one of three in a
     row, so the section's ratio — chosen for a narrow desktop column — makes a
     very tall box. A borrowed product photograph then sits in the middle of it
     with bands of white above and below, which is what made these look broken
     rather than merely plain.

     A landscape box and a cover fit instead: the photo fills the width, and
     the crop is at the top and bottom of a garden shot, where there is least
     to lose. The padding goes with it — it was insetting the picture from an
     edge it no longer reaches. */
  /* In-between widths (2026-09-29, owner). On desktop the four-column cards keep
     the "Image shape" setting (square on the deals page). Below 1100px the photo
     goes landscape; its size is held down by the card width (two a row, or one
     capped card), not by a height cap — a height cap cropped it to a zoomed-in strip.
     tune: 3 / 2 = shape with two cards a row; 4 / 3 = shape with one card. */
  @media screen and (max-width: 1100px) {
    .dpk__media {
      aspect-ratio: 3 / 2 !important;
    }
  }
  @media screen and (max-width: 619px) {
    .dpk__media {
      aspect-ratio: 4 / 3 !important;
    }
  }
  @media screen and (max-width: 749px) {
    .dpk__media--product .dpk__media-img {
      object-fit: cover;
      padding: 0;
    }
  }
  .dpk__card--featured {
    /* The featured package earns a tinted edge rather than a different
       layout, so the cards still scan as one set. */
    border-color: var(--dpk-accent);
    box-shadow: 0 0 0 1px var(--dpk-accent);
  }
  .dpk__badge {
    position: absolute;
    top: -1.1rem;
    left: 2.2rem;
    padding: 0.5rem 1.1rem;
    border-radius: 100px;
    background: #fff;
    border: 1px solid currentColor;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
  }
  .dpk__badge--media {
    top: 1.2rem;
    left: 1.2rem;
    border-color: transparent;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  }

  .dpk__card-head {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 1.4rem;
  }
  .dpk__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    border-radius: 10px;
    color: var(--dpk-accent);
    /* Tint and stroke come from the one accent the block sets, so a colour
       change never leaves the tile and the icon out of step. */
    background: color-mix(in srgb, var(--dpk-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--dpk-accent) 26%, transparent);
  }
  .dpk__titles {
    min-width: 0;
  }
  .dpk__name {
    margin: 0 0 0.4rem;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03rem;
    color: rgb(20, 51, 4);
  }
  .dpk__tagline {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.45;
    color: #5a5a4a;
  }

  .dpk__bestfor {
    margin: 0 0 1.8rem;
    font-size: 1.25rem;
    line-height: 1.5;
    color: #5a5a4a;
  }
  .dpk__bestfor-label {
    display: inline-block;
    margin-right: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.05rem;
    color: var(--dpk-accent);
  }

  .dpk__sizes {
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: #f3f1ec;
  }
  .dpk__size {
    flex: 1 1 0;
    padding: 0.8rem 0.4rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: 700;
    color: #5a5a4a;
    cursor: pointer;
  }
  .dpk__size.is-active {
    background: #fff;
    color: rgb(20, 51, 4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }
  .dpk__size-note {
    margin: 0 0 1.6rem;
    font-size: 1.2rem;
    line-height: 1.45;
    color: #7a7a68;
  }

  .dpk__items {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 1.6rem 0 0;
    border-top: 1px solid #ded7c8;
  }
  .dpk__item {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: baseline;
    padding: 0.55rem 0;
    font-size: 1.3rem;
    color: #3d3d30;
  }
  .dpk__item-qty {
    font-weight: 800;
    color: var(--dpk-accent);
  }
  .dpk__item-price {
    font-variant-numeric: tabular-nums;
    color: #7a7a68;
  }
  .dpk__item--missing {
    opacity: 0.45;
  }

  .dpk__extras {
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 1.4rem 0 0;
    border-top: 1px dashed #ded7c8;
  }
  .dpk__extras li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.35rem 0;
    font-size: 1.25rem;
    line-height: 1.45;
    color: #5a5a4a;
  }
  .dpk__extras svg {
    flex: 0 0 auto;
    margin-top: 0.3rem;
    color: var(--dpk-accent);
  }

  .dpk__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 1.6rem;
    border-top: 1px solid #ded7c8;
  }
  .dpk__price-main {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
  }
  .dpk__price-now {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.08rem;
  }
  .dpk__price-was {
    font-size: 1.4rem;
    color: #9a9a86;
    text-decoration: line-through;
  }
  .dpk__price-save {
    font-size: 1.3rem;
    font-weight: 800;
  }

  .dpk__add {
    display: block;
    width: 100%;
    margin-top: 1.6rem;
    padding: 1.5rem 1.8rem;
    border: 0;
    font-family: inherit;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
  }
  .dpk__add--link {
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
  }
  .dpk__add--link:hover {
    text-decoration: none;
    filter: brightness(0.92);
  }
  .dpk__add[disabled] {
    opacity: 0.55;
    cursor: default;
  }

  .dpk__foot {
    margin: 1.1rem 0 0;
    font-size: 1.15rem;
    line-height: 1.45;
    text-align: center;
    color: #7a7a68;
    min-height: 1.6rem;
  }
  .dpk__foot--error {
    color: #b4540e;
    font-weight: 700;
  }

  .dpk__disclaimer {
    margin: 3rem auto 0;
    max-width: 62rem;
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
  }

  @media screen and (max-width: 749px) {
    .dpk__body {
      padding: 2.4rem 1.8rem 2rem;
    }
  }
/* END_SECTION:deals-packages */

/* START_SECTION:deals-tiers (INDEX:29) */
.dlt__inner {
    margin: 0 auto;
    padding: 0 2.4rem;
    text-align: center;
  }
  .dlt__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.8rem;
    padding: 0.7rem 1.4rem;
    border-radius: 100px;
    font-weight: 700;
    line-height: 1;
  }
  .dlt__eyebrow-icon {
    display: flex;
  }
  .dlt__heading {
    margin: 0 0 1.4rem;
    line-height: 1.06;
  }
  .dlt__intro {
    margin: 0 auto 3rem;
    line-height: 1.6;
  }
  .dlt__tiers {
    display: flex;
    align-items: stretch;
  }
  .dlt__tier {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    box-sizing: border-box;
  }
  .dlt__tier-pct {
    font-weight: 800;
    line-height: 1;
  }
  .dlt__tier-label {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
  }
  .dlt__tier-range {
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.62;
  }

  .dlt__example {
    margin-top: 2.4rem;
    padding: 2.2rem 2.4rem 2.6rem;
    text-align: left;
  }
  .dlt__example-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 1.8rem;
    font-size: 1.45rem;
    font-weight: 800;
    color: rgb(20, 51, 4);
  }
  .dlt__example-icon {
    display: flex;
    color: #5b8c42;
  }
  .dlt__example-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }
  .dlt__example-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.4rem 1rem;
    border-radius: 6px;
  }
  .dlt__example-qty {
    font-size: 1.25rem;
    opacity: 0.62;
  }
  .dlt__example-price {
    font-size: 2rem;
    font-weight: 800;
    color: rgb(20, 51, 4);
  }
  .dlt__example-save {
    font-size: 1.25rem;
    font-weight: 700;
  }

  @media screen and (max-width: 749px) {
    .dlt__example-row {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SECTION:deals-tiers */

/* START_SECTION:delivered-counter (INDEX:30) */
.dcount__card {
    padding: 2.8rem 3.2rem 3rem;
  }
  .dcount__eyebrow {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  /* A row on any screen wide enough for two columns of digits, and two columns
     on a phone rather than a stack — the pair is the point, and stacking them
     turns a comparison into a list. */
  delivered-counter.dcount__figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 3.2rem;
    margin-top: 1.6rem;
  }
  .dcount__value {
    display: block;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    /* Digits line up column to column, so the two figures read as a pair
       rather than as two unrelated numbers. */
    font-variant-numeric: tabular-nums;
  }
  .dcount__caption {
    display: block;
    margin-top: 0.4rem;
    font-size: 1.35rem;
    line-height: 1.35;
  }
  .dcount__line {
    margin: 2rem 0 0;
    font-size: 1.5rem;
    line-height: 1.45;
  }
  .dcount__note {
    margin: 0.6rem 0 0;
    font-size: 1.25rem;
  }
  @media screen and (max-width: 749px) {
    .dcount__card {
      padding: 2.2rem 2rem 2.4rem;
    }
    .dcount__line {
      font-size: 1.4rem;
    }
  }
/* END_SECTION:delivered-counter */

/* START_SECTION:delivery-zones (INDEX:31) */
.dz__zone-panel {
    display: grid;
    grid-template-columns: 1fr 13rem;
    gap: 2rem;
    align-items: start;
  }
  .dz__map-wrap {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
  }
  .dz__map {
    width: 100%;
    max-width: 13rem;
    height: auto;
    display: block;
  }
  .dz__map-bg {
    /* The whole of Great Britain sits behind every zone at the same scale, so
       the shapes stay comparable from one zone to the next. */
    fill: rgba(0, 0, 0, 0.07);
  }
  .dz__map-caption {
    font-size: 1.1rem;
    opacity: 0.6;
    text-align: center;
  }
  @media screen and (max-width: 749px) {
    .dz__zone-panel {
      grid-template-columns: 1fr;
    }
    .dz__map-wrap {
      order: -1;
    }
  }

  .dz__head {
    max-width: 66rem;
    margin-bottom: 2.4rem;
  }
  .dz__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(91, 140, 66);
  }
  .dz__heading {
    margin: 0 0 1.2rem;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .dz__intro {
    font-size: 1.6rem;
    line-height: 1.6;
  }
  .dz__intro p {
    margin: 0;
  }
  .dz__intro p + p {
    margin-top: 0.8rem;
  }

  .dz__banner {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.8rem 2.2rem;
    margin-bottom: 2.4rem;
  }
  .dz__banner-icon svg {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    fill: currentColor;
  }
  .dz__banner-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1rem;
    font-size: 1.4rem;
    line-height: 1.5;
  }
  .dz__banner-text strong {
    font-size: 1.6rem;
  }

  .dz__checker {
    padding: 2.8rem;
    margin-bottom: 3.6rem;
    border: 1px solid #ded7c8;
  }
  .dz__checker-heading {
    margin: 0 0 0.6rem;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .dz__section-sub {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.6;
  }
  .dz__form {
    display: flex;
    gap: 1rem;
    margin-top: 1.8rem;
  }
  .dz__input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 34rem;
    box-sizing: border-box;
    padding: 1.3rem 1.6rem;
    border: 1px solid #ded7c8;
    border-radius: 10px;
    background: #fff;
    /* 16px keeps iOS from zooming the page when the field takes focus. */
    font-size: 1.6rem;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(38, 38, 31);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .dz__input::placeholder {
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(168, 168, 148);
  }
  .dz__input:focus,
  .dz__input:focus-visible {
    outline: none;
  }
  .dz__button {
    flex: 0 0 auto;
    padding: 1.3rem 2.6rem;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .dz__result {
    margin-top: 1.6rem;
    padding: 1.6rem 1.8rem;
    border: 1px solid #ded7c8;
    border-radius: 12px;
    font-size: 1.4rem;
    line-height: 1.55;
  }
  .dz__result strong {
    display: block;
    font-size: 1.6rem;
    color: rgb(20, 51, 4);
  }
  .dz__result p {
    margin: 0.5rem 0 0;
    color: rgb(90, 90, 74);
  }
  .dz__result--no {
    background: #f7f5f0;
  }

  .dz__examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.4rem;
  }
  .dz__examples-label {
    font-size: 1.2rem;
    color: rgb(138, 138, 116);
  }
  .dz__example {
    padding: 0.5rem 1.1rem;
    border: 1px solid #ded7c8;
    border-radius: 999px;
    background: transparent;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: inherit;
    color: rgb(90, 90, 74);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .dz__example:hover {
    border-color: rgb(91, 140, 66);
    color: rgb(20, 51, 4);
  }

  .dz__zones-head {
    max-width: 60rem;
    margin-bottom: 2rem;
  }
  .dz__section-heading {
    margin: 0 0 0.6rem;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .dz__zones {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.4rem;
  }
  .dz__zone {
    /* Each row carries its own tint through --dz-tint, set inline per
       block so a merchant can recolour a zone without new CSS. */
    background: var(--dz-tint, #f7f5f0);
    border: 1px solid color-mix(in srgb, var(--dz-dot, #5b8c42) 32%, transparent);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .dz__zone-row {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1.6rem 2rem;
    cursor: pointer;
    list-style: none;
  }
  .dz__zone-row::-webkit-details-marker {
    display: none;
  }
  .dz__zone-row::marker {
    content: '';
  }
  .dz__zone-dot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 999px;
    background: var(--dz-dot, #5b8c42);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
  }
  .dz__zone-id {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    /* Let the middle column absorb the free space and shrink first, so
       the price never wraps. */
    flex: 1 1 auto;
    min-width: 0;
  }
  .dz__zone-tier {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.25;
  }
  .dz__zone-sub {
    font-size: 1.3rem;
    line-height: 1.4;
    color: rgb(90, 90, 74);
  }
  .dz__zone-price {
    flex: 0 0 auto;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }
  .dz__zone-caret {
    flex: 0 0 auto;
    display: flex;
  }
  .dz__zone-caret svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    transition: transform 0.18s ease;
  }
  .dz__zone[open] .dz__zone-caret svg {
    transform: rotate(180deg);
  }
  .dz__zone-panel {
    padding: 0 2rem 1.8rem;
  }
  .dz__zone-note {
    margin: 0 0 1.2rem;
    font-size: 1.3rem;
    line-height: 1.55;
  }
  .dz__areas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .dz__area {
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
  }

  .dz__coverage {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.8rem 2rem;
    border: 1px solid #ded7c8;
    font-size: 1.4rem;
    line-height: 1.6;
  }
  .dz__coverage p {
    margin: 0;
  }
  .dz__coverage p + p {
    margin-top: 0.6rem;
  }
  .dz__coverage-icon svg {
    display: block;
    width: 2rem;
    height: 2rem;
  }

  @media screen and (max-width: 749px) {
    .dz__heading {
      font-size: 3rem;
    }
    .dz__checker {
      padding: 2rem;
    }
    .dz__form {
      flex-direction: column;
    }
    .dz__input {
      max-width: none;
    }
    .dz__button {
      width: 100%;
    }
    /* Wrapping the flex row put the price on a third line, indented under
       nothing, with the caret stranded on the first — three ragged lines for
       four pieces of information. A grid keeps the shape a shopper expects:
       the zone and its price on one line, the postcode summary underneath,
       the number and the caret holding both ends. */
    .dz__zone-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      grid-template-areas:
        'dot tier price caret'
        'dot sub  sub   sub';
      align-items: center;
      column-gap: 1.2rem;
      row-gap: 0.2rem;
      padding: 1.4rem 1.6rem;
    }
    .dz__zone-dot {
      grid-area: dot;
      align-self: start;
    }
    /* So the tier and the summary can be placed independently even though
       the markup wraps them together. */
    .dz__zone-id {
      display: contents;
    }
    .dz__zone-tier {
      grid-area: tier;
    }
    .dz__zone-sub {
      grid-area: sub;
      font-size: 1.2rem;
      line-height: 1.35;
    }
    .dz__zone-price {
      grid-area: price;
      margin: 0;
      font-size: 1.7rem;
      white-space: nowrap;
    }
    .dz__zone-caret {
      grid-area: caret;
      margin: 0;
    }
    .dz__zone-panel {
      padding: 0 1.6rem 1.6rem;
    }
    .dz__banner {
      align-items: flex-start;
      padding: 1.6rem;
    }
  }

  /* --- the map as a control -------------------------------------------- */
  .dz__map-button {
    position: relative;
    display: block;
    /* Sized to the map, not to the panel. At full width the button stretched
       across the row, leaving the map hard left and the magnifier stranded
       out on the right-hand edge. The ceiling matches .dz__map's own. */
    width: 100%;
    max-width: 13rem;
    margin-inline: auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: 8px;
    color: inherit;
  }
  .dz__map-button:focus-visible {
    outline: 2px solid rgb(91, 140, 66);
    outline-offset: 3px;
  }
  /* The magnifier only appears on hover on a mouse, and always on touch,
     where there is no hover to reveal it with. */
  .dz__map-zoom {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    color: #143304;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .dz__map-zoom svg {
    width: 14px;
    height: 14px;
  }
  .dz__map-button:hover .dz__map-zoom,
  .dz__map-button:focus-visible .dz__map-zoom {
    opacity: 1;
  }
  @media (hover: none) {
    .dz__map-zoom {
      opacity: 1;
    }
  }

  /* --- the enlarged view ------------------------------------------------ */
  .dz__map-modal {
    width: min(92vw, 62rem);
    max-width: none;
    padding: 2.4rem;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: inherit;
  }
  .dz__map-modal::backdrop {
    background: rgba(12, 31, 3, 0.55);
  }
  .dz__map-modal .dz__map {
    /* Overrides the 13rem thumbnail ceiling — the whole point of opening it. */
    max-width: none;
    width: 100%;
  }
  .dz__map-modal-figure {
    display: flex;
    justify-content: center;
  }
  .dz__map-modal-caption {
    margin: 1.6rem 0 0;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: rgb(20, 51, 4);
  }
  .dz__map-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 50%;
    background: #fff;
    color: #143304;
    cursor: pointer;
  }
  .dz__map-modal-close svg {
    width: 15px;
    height: 15px;
  }
  @media screen and (max-width: 749px) {
    .dz__map-modal {
      padding: 2rem 1.6rem;
    }
  }
/* END_SECTION:delivery-zones */

/* START_SECTION:faq-hub (INDEX:33) */
.faqh__head {
    max-width: 64rem;
    margin-bottom: 2.4rem;
  }
  .faqh__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .faqh__heading {
    margin: 0 0 1.2rem;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .faqh__intro {
    font-size: 1.6rem;
    line-height: 1.6;
  }
  .faqh__intro p {
    margin: 0;
  }

  .faqh__search {
    position: relative;
    max-width: 46rem;
    margin-bottom: 2rem;
  }
  .faqh__search-icon {
    position: absolute;
    top: 50%;
    left: 1.6rem;
    transform: translateY(-50%);
    display: flex;
    pointer-events: none;
    opacity: 0.6;
  }
  .faqh__search-icon svg {
    width: 1.8rem;
    height: 1.8rem;
  }
  .faqh__search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 1.3rem 1.6rem 1.3rem 4.6rem;
    border: 1px solid #ded7c8;
    /* 16px so iOS does not zoom the page when the field takes focus. */
    font-size: 1.6rem;
    font-family: inherit;
    color: rgb(38, 38, 31);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .faqh__search-input:focus,
  .faqh__search-input:focus-visible {
    outline: none;
  }

  .faqh__jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 3.2rem;
  }
  a.faqh__jump-link,
  a.faqh__jump-link:hover,
  a.faqh__jump-link:focus {
    /* base.css underlines anchors and loads after this stylesheet. */
    text-decoration: none;
  }
  a.faqh__jump-link {
    padding: 0.8rem 1.5rem;
    border: 1px solid #ded7c8;
    border-radius: 999px;
    font-size: 1.3rem;
    font-weight: 600;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .faqh__empty {
    margin: 0 0 2rem;
    font-size: 1.5rem;
  }

  .faqh__cat {
    margin-bottom: 3.6rem;
    /* Clears the sticky header when a jump link lands here. */
    scroll-margin-top: 11rem;
  }
  .faqh__cat-head {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-bottom: 1.6rem;
  }
  .faqh__cat-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 12px;
  }
  .faqh__cat-icon svg {
    display: block;
    width: 2rem;
    height: 2rem;
  }
  .faqh__cat-heading {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  .faqh__cat-note {
    margin: 0.3rem 0 0;
    font-size: 1.3rem;
    line-height: 1.5;
  }

  .faqh__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .faqh__item {
    padding: 0 2rem;
    border: 1px solid #ded7c8;
    transition: border-color 0.15s ease;
  }
  .faqh__item[hidden] {
    display: none;
  }
  .faqh__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.7rem 0;
    cursor: pointer;
    list-style: none;
  }
  .faqh__summary::-webkit-details-marker {
    display: none;
  }
  .faqh__summary::marker {
    content: '';
  }
  .faqh__q {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .faqh__caret {
    flex: 0 0 auto;
    display: flex;
  }
  .faqh__caret svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    transition: transform 0.18s ease;
  }
  .faqh__item[open] .faqh__caret svg {
    transform: rotate(180deg);
  }
  .faqh__a {
    padding-bottom: 1.8rem;
    font-size: 1.4rem;
    line-height: 1.7;
  }
  .faqh__a > :first-child {
    margin-top: 0;
  }
  .faqh__a > :last-child {
    margin-bottom: 0;
  }
  .faqh__a ul,
  .faqh__a ol {
    margin: 0.8rem 0;
    padding-left: 2rem;
  }
  .faqh__a li + li {
    margin-top: 0.4rem;
  }

  .faqh__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem 2.4rem;
    padding: 2.8rem 3.2rem;
  }
  .faqh__cta-heading {
    margin: 0 0 0.4rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .faqh__cta-text {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.55;
  }
  .faqh__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  a.faqh__cta-button,
  a.faqh__cta-secondary,
  a.faqh__cta-button:hover,
  a.faqh__cta-secondary:hover,
  a.faqh__cta-button:focus,
  a.faqh__cta-secondary:focus {
    text-decoration: none;
  }
  a.faqh__cta-button,
  a.faqh__cta-secondary {
    display: inline-block;
    padding: 1.3rem 2.6rem;
    font-size: 1.4rem;
    font-weight: 700;
  }
  a.faqh__cta-secondary {
    border: 1px solid;
    background: transparent;
  }

  @media screen and (max-width: 749px) {
    .faqh__heading {
      font-size: 3rem;
    }
    .faqh__search {
      max-width: none;
    }
    .faqh__jump {
      /* A wrapping chip block eats most of a phone screen before the
         first answer, so it scrolls sideways instead. */
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      margin-left: -1.6rem;
      margin-right: -1.6rem;
      padding: 0 1.6rem 0.4rem;
      margin-bottom: 2.4rem;
    }
    .faqh__jump::-webkit-scrollbar {
      display: none;
    }
    a.faqh__jump-link {
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .faqh__cat {
      margin-bottom: 2.8rem;
    }
    .faqh__item {
      padding: 0 1.6rem;
    }
    .faqh__cta {
      padding: 2rem;
    }
    .faqh__cta-actions {
      width: 100%;
    }
    a.faqh__cta-button,
    a.faqh__cta-secondary {
      flex: 1 1 100%;
      text-align: center;
    }
  }
/* END_SECTION:faq-hub */

/* START_SECTION:hero-search (INDEX:40) */
@media screen and (max-width: 749px) {
    .hero-search__heading {
      margin-bottom: 1.6rem;
    }
    .hero-search__checklist {
      /* Three bullets across a phone is three cramped columns. Stacked
         left-aligned they read as a list rather than as wrapped debris. */
      flex-direction: column;
      align-items: flex-start;
      gap: 0.7rem;
      text-align: left;
      max-width: 30rem;
      margin-left: auto;
      margin-right: auto;
    }
    .hero-search__banner {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.8rem 1rem;
      text-align: center;
    }
    .hero-search__banner-message {
      flex: 1 1 100%;
      order: 2;
    }
    /* On a phone the banner is three lines of promo before the shopper has
       seen a single product, so the section can drop it without losing the
       desktop version. */
    .hero-search--no-mobile-banner .hero-search__banner {
      display: none;
    }
  }

  .hero-search__inner {
    max-width: 90rem;
    margin: 0 auto;
    text-align: center;
  }
  .hero-search__eyebrow {
    margin: 0 0 1.4rem;
    font-size: 1.15rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
  }
  .hero-search__heading {
    margin: 0 0 2.2rem;
    font-size: 5rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.028em;
    text-wrap: balance;
  }
  .hero-search__form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    border: 1px solid rgba(191, 163, 105, 0.4);
    border-radius: 4px;
    padding: 1.6rem 2rem;
    max-width: 74rem;
    margin: 0 auto;
    text-align: left;
    box-shadow: 0 0 0 4px rgba(191, 163, 105, 0.08), 0 2px 10px rgba(191, 163, 105, 0.1);
  }
  .hero-search__input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
  }
  .hero-search__input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.5rem;
    color: inherit;
  }
  .hero-search__suggest {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    overflow: hidden;
    pointer-events: none;
    font-size: 1.5rem;
    transition: opacity 0.15s ease;
  }
  .hero-search__suggest--hidden {
    opacity: 0;
  }
  .hero-search__suggest-label {
    flex: none;
    color: rgba(18, 18, 18, 0.45);
  }
  .hero-search__suggest-term {
    display: inline-block;
    /* Only as wide as its own text (2026-09-30, owner). flex: 1 stretched the link
       to the search button, so most of the bar opened the suggestion instead of
       letting you type. Clicks beside it fall through (the wrapper is
       pointer-events: none) to the search input underneath. */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #121212;
    text-decoration: none;
    pointer-events: auto;
  }
  .hero-search__suggest-term:hover {
    color: #5B8C42;
  }
  .hero-search__submit {
    flex: none;
    width: 3.2rem;
    height: 3.2rem;
    border: none;
    border-radius: 50%;
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .hero-search__checklist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    margin: 1.6rem 0 2.2rem;
    padding: 0;
    list-style: none;
    font-size: 1.25rem;
  }
  .hero-search__checklist li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
  }
  .hero-search__banner {
    display: inline-flex;
    align-items: center;
    gap: 1.6rem;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: 0.7rem 0.8rem;
  }
  .hero-search__banner-badge {
    border-radius: 3px;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .hero-search__banner-link {
    flex: none;
    font-size: 1.3rem;
    font-weight: 800;
    padding-right: 1.2rem;
    color: #121212;
    text-decoration: none;
  }
  .hero-search__banner-message {
    min-width: 0;
    font-size: 1.4rem;
    line-height: 1.25;
  }

  @media screen and (min-width: 750px) and (max-width: 1199px) {
    .hero-search__banner {
      display: inline-flex !important;
      width: fit-content;
      margin-inline: auto;
      gap: clamp(0.6rem, 1vw, 1.2rem);
      padding: clamp(0.4rem, 0.55vw, 0.55rem) clamp(0.45rem, 0.65vw, 0.65rem);
    }
    .hero-search__banner-badge {
      padding: clamp(0.35rem, 0.48vw, 0.45rem) clamp(0.6rem, 0.8vw, 0.8rem);
      font-size: clamp(0.72rem, 0.78vw, 0.9rem) !important;
      white-space: nowrap;
    }
    .hero-search__banner-message {
      flex: 0 1 auto !important;
      overflow: visible;
      font-size: clamp(1rem, 1.08vw, 1.3rem);
      text-overflow: clip;
      white-space: nowrap;
    }
    .hero-search__banner-link {
      padding-right: clamp(0.4rem, 0.58vw, 0.7rem);
      font-size: clamp(0.98rem, 1vw, 1.2rem);
      white-space: nowrap;
    }
  }
/* END_SECTION:hero-search */

/* START_SECTION:main-policy (INDEX:59) */
.pol__head {
    margin-bottom: 3.2rem;
    padding-bottom: 2.4rem;
    border-bottom: 1px solid rgba(20, 51, 4, 0.12);
  }
  .pol__eyebrow {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(91, 140, 66);
  }
  .pol__title {
    margin: 0;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .pol__meta {
    margin: 1.2rem 0 0;
    font-size: 1.3rem;
    color: rgba(var(--color-foreground), 0.6);
  }

  /* The measure is the whole point of this template. Shopify's default runs
     legal text the full width of the viewport, which on a desktop is a 140
     character line nobody can track back from. */
  .pol__body {
    font-size: 1.6rem;
    line-height: 1.7;
  }
  .pol__body h2 {
    margin: 3.6rem 0 1.2rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: rgb(20, 51, 4);
  }
  .pol__body h2:first-child {
    margin-top: 0;
  }
  .pol__body h3 {
    margin: 2.4rem 0 0.8rem;
    font-size: 1.7rem;
    font-weight: 700;
  }
  .pol__body p,
  .pol__body ul,
  .pol__body ol {
    margin: 0 0 1.6rem;
  }
  .pol__body li {
    margin-bottom: 0.6rem;
  }
  .pol__body a {
    color: rgb(20, 51, 4);
    text-underline-offset: 0.3rem;
  }
  .pol__body blockquote {
    margin: 2rem 0;
    padding: 1.6rem 2rem;
    border-left: 3px solid rgba(20, 51, 4, 0.18);
    background: rgba(20, 51, 4, 0.04);
    border-radius: 0 8px 8px 0;
    font-style: normal;
  }
  .pol__body blockquote p:last-child {
    margin-bottom: 0;
  }
  /* The shipping policy carries a zone table; Dawn has no styling for one. */
  .pol__body table {
    width: 100%;
    margin: 0 0 2rem;
    border-collapse: collapse;
    font-size: 1.5rem;
  }
  .pol__body th,
  .pol__body td {
    padding: 1rem 1.2rem;
    text-align: left;
    border-bottom: 1px solid rgba(20, 51, 4, 0.12);
  }
  .pol__body th {
    font-weight: 700;
    background: rgba(20, 51, 4, 0.045);
  }

  .pol__related {
    margin-top: 4.8rem;
    padding-top: 2.4rem;
    border-top: 1px solid rgba(20, 51, 4, 0.12);
  }
  .pol__related-heading {
    margin: 0 0 1.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.55);
  }
  .pol__related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pol__related-list a {
    display: inline-block;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    background: rgba(20, 51, 4, 0.05);
    font-size: 1.35rem;
    font-weight: 600;
    text-decoration: none;
    color: rgb(20, 51, 4);
  }
  .pol__related-list a:hover {
    background: rgba(20, 51, 4, 0.1);
  }

  @media screen and (max-width: 749px) {
    /* The tab bar sits over the bottom of the page. */
    .pol {
      padding-bottom: 9rem;
    }
    .pol__head {
      margin-bottom: 2.4rem;
      padding-bottom: 1.8rem;
    }
    .pol__body {
      font-size: 1.55rem;
      line-height: 1.65;
    }
    .pol__body h2 {
      margin-top: 2.8rem;
      font-size: 1.8rem;
    }
    /* A four column table does not fit a phone; let it scroll rather than
       squash the prices into two characters a line. */
    .pol__body table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
  }
/* END_SECTION:main-policy */

/* 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:panel-3d-promo (INDEX:70) */
.panel-promo__card { padding: 2.8rem 3.2rem 3rem; }
  .panel-promo__eyebrow { display: block; margin-bottom: 1.6rem; color: #9BB98A; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  .panel-promo__heading { margin: 0 0 10px; color: inherit; font-family: var(--font-body-family); font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
  .panel-promo__text { margin: 0; max-width: 65ch; font-size: 1.5rem; line-height: 1.45; color: #DCE8D2; }
  .panel-promo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; }
  .panel-promo__button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 999px; background: #fff; color: #143304; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; }
  .panel-promo__button:not(:disabled):hover { filter: brightness(1.12); }
  .panel-promo__button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
  /* Same lift/scale/fade/blur handoff the 3D package gateway uses, played on the
     card before navigating. Tune the look here and the delay in PROMO_DELAY below. */
  .panel-promo__card { transition: transform .42s cubic-bezier(.2,.75,.2,1), opacity .34s ease, filter .34s ease; }
  .panel-promo__card.is-opening { transform: scale(1.035); opacity: 0; filter: blur(5px); }
  @media (prefers-reduced-motion: reduce) { .panel-promo__card { transition: none; } }
  .panel-promo__status { font-size: 1.25rem; color: #9BB98A; }
  @media (max-width: 749px) {
    .panel-promo__card { padding: 2.2rem 2rem 2.4rem; }
    .panel-promo__heading { font-size: 23px; }
    .panel-promo__text { font-size: 14px; }
    .panel-promo__actions { gap: 12px; }
    .panel-promo__button { max-width: 100%; font-size: 14px; }
  }
/* END_SECTION:panel-3d-promo */

/* START_SECTION:pricing-story (INDEX:74) */
.pricing-story__panel {
    border-radius: 6px;
    padding: 3.4rem 4rem;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
    align-items: center;
  }
  .pricing-story__eyebrow {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
  }
  .pricing-story__heading {
    margin: 0 0 1.3rem;
    font-size: 2.6rem;
    line-height: 1.14;
    letter-spacing: -0.02em;
  }
  .pricing-story__body {
    font-size: 1.4rem;
    line-height: 1.6;
    opacity: 0.85;
  }
  .pricing-story__body p {
    margin: 0 0 1.4rem;
  }
  .pricing-story__body p:last-child {
    margin-bottom: 0;
  }
  .pricing-story__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
  }
  /* tune: button size / radius */
  .pricing-story__btn {
    display: inline-flex;
    align-items: center;
    min-height: 4.4rem;
    padding: 0 2.2rem;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    color: inherit;
  }
  .pricing-story__btn--primary {
    background: #143304;
    border-color: #143304;
    color: #fff;
  }
  .pricing-story__btn:hover {
    opacity: 0.88;
  }
  .pricing-story__bullets {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
  .pricing-story__bullet {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    background: rgb(var(--color-background));
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    padding: 1.3rem 1.5rem;
  }
  .pricing-story__dot {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    margin-top: 0.6rem;
  }
  .pricing-story__bullet-lead {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
  }
  .pricing-story__bullet-text {
    display: block;
    font-size: 1.3rem;
    line-height: 1.5;
    opacity: 0.75;
  }
  @media screen and (max-width: 989px) {
    .pricing-story__panel {
      grid-template-columns: 1fr;
      padding: 3.2rem 3rem;
    }
  }
  /* Phones (2026-10-01): the box ran ~1000px tall, so the bullets show their
     lead line only and the panel padding is tighter. tune: drop the
     bullet-text rule to bring the text back. */
  @media screen and (max-width: 749px) {
    .pricing-story__panel {
      padding: 2.6rem 2rem;
      gap: 2.4rem;
    }
    .pricing-story__bullet-text {
      display: none;
    }
    .pricing-story__bullet-lead {
      margin-bottom: 0;
    }
    .pricing-story__bullet {
      padding: 1.1rem 1.4rem;
    }
    .pricing-story__dot {
      margin-top: 0.5rem;
    }
  }
/* END_SECTION:pricing-story */

/* 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-grid (INDEX:78) */
.product-grid__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-bottom: 2.2rem;
  }
  .product-grid__heading {
    margin: 0;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
  .product-grid__view-all {
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
  }
  .product-grid__grid {
    display: grid;
    gap: 1.2rem;
  }
  .product-grid__more {
    display: flex;
    justify-content: center;
    margin-top: 2.8rem;
  }
  /* Sized for a phone, where it is nearly the width of the screen. On a
     desktop the same pill sat in the middle of a 1200px row looking like a
     tag rather than the way on to the rest of the shop. */
  @media screen and (min-width: 750px) {
    .product-grid__more-button {
      padding: 2.2rem 6rem;
      font-size: 1.8rem;
    }
  }
  /* A pill rather than a full-width box. The old button ran the width of the
     grid, which made it read as another empty card at the foot of the row
     instead of as something to press. */
  .product-grid__more-button::after {
    content: '→';
    margin-left: 0.8rem;
    /* Nudges forward on hover — the arrow is the only moving part, so it does
       the work a colour change alone would not. */
    display: inline-block;
    transition: transform 0.15s ease;
  }
  .product-grid__more-button:hover::after {
    transform: translateX(3px);
  }
  .product-grid__more-button {
    /* Shared by the <button> and the <a> variants, so the two look
       identical whichever behaviour is selected. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-radius: 999px;
    padding: 1.4rem 3.2rem;
    font-family: inherit;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(20, 51, 4, 0.18);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }
  a.product-grid__more-button,
  a.product-grid__more-button:hover,
  a.product-grid__more-button:focus {
    /* base.css underlines anchors and loads after this stylesheet. */
    text-decoration: none;
  }
  @media screen and (max-width: 749px) {
    .product-grid__grid {
      /* minmax(0, ...) not 1fr: a bare 1fr keeps a min-content floor, so a
         long product title widened its own track and the two-up row overflowed
         the screen. */
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
/* END_SECTION:product-grid */

/* 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:promo-carousel (INDEX:83) */
/* A stacking context of its own, low in the order. The arrows and dots are
     positioned with a z-index so they sit over the video; without a context
     here those numbers are measured against the whole page, and they were
     landing on top of the header's open mega menu. Trapping them means they
     can never rise above the section itself, whatever they are set to. */
  .promo-carousel {
    position: relative;
    z-index: 0;
    isolation: isolate;
  }

  .promo-carousel-outer {
    background-color: #F3F1EC;
  }
  .promo-carousel-wrap {
    padding-top: 5.2rem;
    padding-bottom: 5.2rem;
  }
  .promo-carousel {
    position: relative;
    display: block;
    border-radius: 6px;
    overflow: hidden;
  }
  .promo-carousel__stage {
    position: relative;
    height: 100%;
  }
  .promo-carousel__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
  }
  .promo-carousel__slide--active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }
  .promo-carousel__media {
    position: absolute;
    inset: 0;
  }
  .promo-carousel__image,
  .promo-carousel__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .promo-carousel__overlay {
    position: absolute;
    inset: 0;
  }
  .promo-carousel__content {
    position: relative;
    padding: 0 6.4rem;
    max-width: 66rem;
  }
  .promo-carousel__eyebrow {
    margin: 0 0 1.2rem;
    font-size: 1.15rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
  }
  .promo-carousel__title {
    margin: 0 0 1.6rem;
    font-size: 4rem;
    line-height: 1.08;
    letter-spacing: -0.028em;
  }
  .promo-carousel__body {
    margin: 0 0 2.8rem;
    font-size: 1.5rem;
    line-height: 1.6;
    max-width: 47rem;
  }
  .promo-carousel__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    font-weight: 700;
    font-size: 1.4rem;
    padding: 1.4rem 3rem;
    border-radius: 4px;
    text-decoration: none;
  }
  .promo-carousel__dots {
    position: absolute;
    bottom: 2.2rem;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
  }
  .promo-carousel__dot {
    width: 1.2rem;
    height: 0.3rem;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    padding: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: width 0.3s;
  }
  .promo-carousel__dot--active {
    width: 3rem;
    background: rgba(255, 255, 255, 0.85);
  }
  .promo-carousel__arrows {
    position: absolute;
    bottom: 2rem;
    right: 2.4rem;
    z-index: 5;
    display: flex;
    gap: 1rem;
  }
  .promo-carousel__arrow {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
  }
  @media screen and (max-width: 749px) {
    /* A 420px cinematic banner is a desktop device. On a phone it reads as a
       sale hoarding rather than a message, so it compresses to a single solid
       card: photo dropped (it is scenery at this width, and it fights the
       text for contrast), one flat colour, generous radius, and the CTA as a
       pill so the tap target is obvious. */
    .promo-carousel-wrap {
      padding-top: 2.8rem;
      padding-bottom: 2.8rem;
    }
    .promo-carousel {
      border-radius: 1.8rem;
    }
    .promo-carousel__image,
    .promo-carousel__video {
      display: none;
    }
    /* Painted on the media wrapper as well as the overlay: with the image
       gone the wrapper is the element that reliably fills the card. */
    .promo-carousel__media,
    .promo-carousel__overlay {
      display: block !important;
      background: var(--promo-flat, #143304) !important;
    }
    .promo-carousel__slide {
      align-items: stretch;
    }
    .promo-carousel__content {
      padding: 2.2rem 2rem 5.2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .promo-carousel__eyebrow {
      margin-bottom: 0.9rem;
      font-size: 1.05rem;
      letter-spacing: 0.16em;
    }
    .promo-carousel__title {
      font-size: 2.3rem;
      line-height: 1.14;
      margin-bottom: 1rem;
    }
    .promo-carousel__body {
      font-size: 1.35rem;
      line-height: 1.5;
      margin-bottom: 1.8rem;
    }
    .promo-carousel__cta {
      align-self: flex-start;
      background: #FFFFFF;
      color: #143304;
      border-radius: 999px;
      padding: 1.2rem 2.2rem;
      font-size: 1.35rem;
    }
    .promo-carousel__dots {
      bottom: 1.6rem;
      justify-content: flex-start;
      padding-left: 2rem;
    }
    /* Two 40px circles on top of the copy in a card this size is clutter —
       the dots and a swipe are enough. */
    .promo-carousel__arrows {
      display: none;
    }
  }

  @media screen and (max-width: 359px) {
    /* At 320px the longest slide needs 241px inside a 226px card and gets
       clipped top and bottom, because the slide is centred. Trimming the
       type and the dot gutter brings it back inside. */
    .promo-carousel__content {
      padding: 1.8rem 1.6rem 4.4rem;
    }
    .promo-carousel__title {
      font-size: 2.05rem;
    }
    .promo-carousel__body {
      font-size: 1.25rem;
      margin-bottom: 1.4rem;
    }
    .promo-carousel__cta {
      padding: 1.1rem 1.9rem;
      font-size: 1.3rem;
    }
  }
/* END_SECTION:promo-carousel */

/* 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:search-results (INDEX:88) */
.sr__head {
    margin-bottom: 2rem;
  }
  .sr__head--empty {
    max-width: 60rem;
  }
  .sr__heading {
    margin: 0 0 0.8rem;
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
  }
  .sr__lead {
    font-size: 1.6rem;
    line-height: 1.6;
  }
  .sr__lead p {
    margin: 0;
  }
  .sr__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.6rem;
    margin: 0;
    font-size: 1.4rem;
  }
  a.sr__clear,
  a.sr__clear:hover,
  a.sr__clear:focus {
    text-decoration: none;
  }
  a.sr__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    opacity: 0.75;
  }
  a.sr__clear:hover {
    opacity: 1;
  }
  .sr__clear svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  .sr__form {
    max-width: 56rem;
    margin-bottom: 1.6rem;
  }
  .sr__field {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.6rem;
    border: 1px solid #ded7c8;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .sr__field svg {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    opacity: 0.55;
  }
  .sr__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.3rem 0;
    border: 0;
    background: none;
    /* 16px so iOS does not zoom the page on focus. */
    font-size: 1.6rem;
    font-family: inherit;
    color: rgb(38, 38, 31);
  }
  .sr__input:focus,
  .sr__input:focus-visible {
    outline: none;
  }
  .sr__field button {
    flex: 0 0 auto;
    padding: 0.6rem 1.2rem;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 700;
    color: rgb(20, 51, 4);
    cursor: pointer;
  }

  .sr__suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 3.2rem;
  }
  .sr__suggestions-label {
    font-size: 1.3rem;
    color: rgb(138, 138, 116);
  }
  a.sr__suggestion,
  a.sr__suggestion:hover,
  a.sr__suggestion:focus {
    text-decoration: none;
  }
  a.sr__suggestion {
    padding: 0.7rem 1.4rem;
    border: 1px solid #ded7c8;
    font-size: 1.3rem;
    font-weight: 600;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .sr__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
  }
  .sr__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid;
    font-size: 1.3rem;
    font-weight: 700;
  }
  .sr__chip a {
    display: flex;
    color: inherit;
    opacity: 0.6;
  }
  .sr__chip a:hover {
    opacity: 1;
  }
  .sr__chip svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .sr__sort {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
  }
  .sr__sort label {
    font-size: 1.3rem;
    color: rgb(138, 138, 116);
  }
  .sr__sort select {
    padding: 0.8rem 1.2rem;
    border: 1px solid #ded7c8;
    background: #fff;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
  }

  .sr__grid.tpc-grid {
    margin-bottom: 3.2rem;
  }

  .sr__aside {
    padding: 2.4rem 2.8rem;
    margin-bottom: 2.4rem;
  }
  .sr__aside-heading {
    margin: 0 0 1.4rem;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .sr__aside--pages,
  .sr__aside--none {
    margin-top: 0;
  }
  .sr__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 0.4rem 2rem;
    margin: 0 0 0.4rem;
    padding: 0;
    list-style: none;
  }
  .sr__list a,
  .sr__list a:hover,
  .sr__list a:focus {
    text-decoration: none;
  }
  .sr__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 1.4rem;
    font-weight: 600;
  }
  .sr__list svg {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    opacity: 0.5;
    transition: transform 0.15s ease;
  }
  .sr__list a:hover svg {
    transform: translateX(3px);
  }

  .sr__tips {
    margin: 1.2rem 0 2.4rem;
    padding-left: 1.8rem;
    font-size: 1.4rem;
    line-height: 1.7;
  }
  .sr__tips li + li {
    margin-top: 0.4rem;
  }

  @media screen and (max-width: 749px) {
    .sr__heading {
      font-size: 2.6rem;
    }
    .sr__controls {
      align-items: stretch;
      flex-direction: column;
    }
    .sr__sort {
      justify-content: space-between;
    }
    .sr__sort select {
      flex: 1 1 auto;
      min-width: 0;
    }
    .sr__aside {
      padding: 2rem 1.6rem;
    }
    .sr__list {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SECTION:search-results */

/* 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:stats-bar (INDEX:91) */
@media screen and (max-width: 749px) {
    .stats-bar__item {
      /* Value over label reads better in a narrow column than value beside
         a label that then wraps under it anyway. */
      flex-direction: column;
      align-items: flex-start;
      gap: 0.2rem;
    }
    .stats-bar__label {
      line-height: 1.25;
    }
  }

  div.stats-bar__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.6rem 2.8rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
  }
  .stats-bar__item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
  }
  .stats-bar__value {
    font-size: 2.4rem;
    font-weight: 800;
    color: #F5F1E1;
  }
  .stats-bar__label {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: #9BB98A;
  }
/* END_SECTION:stats-bar */

/* START_SECTION:timber-404 (INDEX:92) */
.t404__inner {
    max-width: 62rem;
    text-align: center;
  }
  .t404__code {
    margin: 0 0 1.2rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .t404__title {
    margin: 0 0 1.4rem;
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.03em;
  }
  .t404__text {
    margin: 0 auto 3.2rem;
    max-width: 46ch;
    font-size: 1.6rem;
    line-height: 1.55;
  }
  .t404__text p {
    margin: 0;
  }

  .t404__search {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    max-width: 46rem;
    margin: 0 auto 4rem;
    padding: 0.6rem 0.6rem 0.6rem 1.8rem;
    border: 1px solid rgba(20, 51, 4, 0.16);
    border-radius: 999px;
    background: #fff;
  }
  .t404__search input[type='search'] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font-size: 1.5rem;
    padding: 0.8rem 0;
  }
  .t404__search input[type='search']:focus {
    outline: none;
  }
  .t404__search button {
    display: grid;
    place-items: center;
    width: 4.2rem;
    height: 4.2rem;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: rgb(20, 51, 4);
    color: #fff;
    cursor: pointer;
  }

  .t404__browse-heading {
    margin: 0 0 1.4rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.55);
  }
  .t404__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 3.2rem;
  }
  .t404__link {
    padding: 1rem 1.6rem;
    border-radius: 999px;
    background: rgba(20, 51, 4, 0.05);
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    color: rgb(20, 51, 4);
    transition: background-color 0.15s ease;
  }
  .t404__link:hover {
    background: rgba(20, 51, 4, 0.1);
  }
  .t404__help {
    margin: 0;
    font-size: 1.35rem;
    color: rgba(var(--color-foreground), 0.55);
  }

  @media screen and (max-width: 749px) {
    .t404__text {
      font-size: 1.5rem;
      margin-bottom: 2.4rem;
    }
    .t404__search {
      margin-bottom: 3rem;
    }
    /* A wrapping row of pills reads better than a centred jumble on a narrow
       screen, so they scroll instead. */
    .t404__links {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
      scrollbar-width: none;
      margin-left: -1.6rem;
      margin-right: -1.6rem;
      padding: 0 1.6rem 0.4rem;
    }
    .t404__links::-webkit-scrollbar {
      display: none;
    }
    .t404__link {
      flex: none;
      white-space: nowrap;
    }
  }
/* END_SECTION:timber-404 */

/* START_SECTION:timber-collection-list (INDEX:93) */
.tcl__head {
    max-width: 60ch;
    margin-bottom: 3.6rem;
  }
  .tcl__eyebrow {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(91, 140, 66);
  }
  .tcl__title {
    margin: 0 0 1.2rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .tcl__lead {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.55;
    color: rgba(var(--color-foreground), 0.65);
  }

  .tcl__grid {
    display: grid;
    gap: 1.6rem;
    margin-bottom: 3.2rem;
  }

  /* A card is a category, not a photo frame. Dawn's version is image-led,
     which is why it collapsed into grey boxes with no collection images —
     this leads with the name and what is inside it. */
  .tcl__card {
    display: flex;
    flex-direction: column;
    padding: 2rem 2.2rem 1.6rem;
    border: 1px solid rgba(20, 51, 4, 0.12);
    border-radius: 16px;
    background: rgba(20, 51, 4, 0.03);
  }
  .tcl__card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
    text-decoration: none;
    color: inherit;
  }
  .tcl__card-title {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgb(20, 51, 4);
  }
  .tcl__card-head:hover .tcl__card-title {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }
  .tcl__card-count {
    flex: none;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--color-foreground), 0.55);
  }
  .tcl__card-text {
    margin: 0.8rem 0 0;
    font-size: 1.4rem;
    line-height: 1.5;
    color: rgba(var(--color-foreground), 0.62);
  }

  .tcl__children {
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(20, 51, 4, 0.1);
  }
  .tcl__children li + li {
    border-top: 1px solid rgba(20, 51, 4, 0.07);
  }
  .tcl__children a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1rem 0;
    font-size: 1.45rem;
    font-weight: 600;
    text-decoration: none;
    color: rgb(20, 51, 4);
  }
  .tcl__children a:hover {
    color: rgb(91, 140, 66);
  }
  .tcl__child-count {
    font-size: 1.2rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--color-foreground), 0.5);
  }

  .tcl__all {
    display: inline-block;
    padding: 1.2rem 2.4rem;
    border-radius: 999px;
    background: rgb(20, 51, 4);
    color: #fff;
    font-size: 1.45rem;
    font-weight: 600;
    text-decoration: none;
  }
  .tcl__all:hover {
    background: rgb(14, 38, 3);
    color: #fff;
  }

  @media screen and (max-width: 749px) {
    .tcl__head {
      margin-bottom: 2.4rem;
    }
    .tcl__lead {
      font-size: 1.5rem;
    }
    .tcl__card {
      padding: 1.6rem 1.6rem 1.2rem;
    }
    .tcl__card-title {
      font-size: 1.75rem;
    }
  }
/* END_SECTION:timber-collection-list */

/* START_SECTION:timber-page (INDEX:94) */
.tpg__head {
    margin-bottom: 3.2rem;
    padding-bottom: 2.4rem;
    border-bottom: 1px solid rgba(20, 51, 4, 0.12);
  }
  .tpg__eyebrow {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(91, 140, 66);
  }
  .tpg__title {
    margin: 0;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .tpg__body {
    font-size: 1.6rem;
    line-height: 1.7;
  }
  .tpg__body h2 {
    margin: 3.6rem 0 1.2rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: rgb(20, 51, 4);
  }
  .tpg__body h2:first-child {
    margin-top: 0;
  }
  .tpg__body h3 {
    margin: 2.4rem 0 0.8rem;
    font-size: 1.7rem;
    font-weight: 700;
  }
  .tpg__body p,
  .tpg__body ul,
  .tpg__body ol {
    margin: 0 0 1.6rem;
  }
  .tpg__body li {
    margin-bottom: 0.6rem;
  }
  .tpg__body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }
  .tpg__body table {
    width: 100%;
    margin: 0 0 2rem;
    border-collapse: collapse;
    font-size: 1.5rem;
  }
  .tpg__body th,
  .tpg__body td {
    padding: 1rem 1.2rem;
    text-align: left;
    border-bottom: 1px solid rgba(20, 51, 4, 0.12);
  }
  .tpg__body th {
    font-weight: 700;
    background: rgba(20, 51, 4, 0.045);
  }

  @media screen and (max-width: 749px) {
    .tpg__head {
      margin-bottom: 2.4rem;
      padding-bottom: 1.8rem;
    }
    .tpg__body {
      font-size: 1.55rem;
      line-height: 1.65;
    }
    .tpg__body h2 {
      margin-top: 2.8rem;
      font-size: 1.8rem;
    }
    /* Wide content scrolls rather than forcing the page sideways. */
    .tpg__body table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
  }
/* END_SECTION:timber-page */

/* 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 */

/* START_SECTION:value-props (INDEX:96) */
.value-props__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.4rem;
  }
  .value-props__heading-row {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgb(20, 51, 4);
  }
  .value-props__heading-stat {
    font-size: 1.2rem;
    opacity: 0.7;
  }
  .value-props__grid {
    display: grid;
    gap: 3.4rem;
    padding-bottom: 3.4rem;
  }
  .value-props__grid--divider {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
  .value-props__item {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    /* The soft card was only on mobile; on desktop these were bare columns of
       text with nothing separating one claim from the next. The tint is what
       makes each one read as its own thing at a glance. */
    background: rgba(20, 51, 4, 0.045);
    border-radius: 14px;
    padding: 1.5rem 1.6rem 1.6rem;
    text-decoration: none;
    color: inherit;
  }
  /* The whole tile is the button, so it has to look like one under a finger
     and a cursor. */
  .value-props__item--link {
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
  }
  .value-props__item--link:hover {
    background: rgba(20, 51, 4, 0.085);
  }
  .value-props__item--link:active {
    transform: translateY(1px);
  }
  .value-props__icon {
    display: inline-block;
  }
  .value-props__icon svg {
    display: block;
    width: 3rem;
    height: 3rem;
  }
  .value-props__heading {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    color: rgb(20, 51, 4);
  }
  .value-props__text {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgb(90, 90, 74);
  }
  .value-props__text p {
    margin: 0;
  }
  @media screen and (max-width: 989px) {
    .value-props__grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  @media screen and (max-width: 749px) {
    /* On a phone these stop being a row of copy and become four tiles: the
       card edge is what tells a thumb where one claim ends and the next
       begins, which the bare two-column text layout never did. Stays two up
       all the way down to 320px — a single column would push the last claim
       most of a screen below the fold. */
    .value-props__grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 1.2rem !important;
      padding-bottom: 2.4rem !important;
    }
    .value-props__item {
      background: rgba(20, 51, 4, 0.045);
      border-radius: 1.2rem;
      padding: 1.2rem 1.1rem;
      gap: 0.6rem;
    }
    .value-props__icon svg {
      width: 2.2rem !important;
      height: 2.2rem !important;
    }
    .value-props__heading {
      font-size: 1.4rem;
      line-height: 1.25;
    }
    .value-props__text {
      font-size: 1.2rem;
      line-height: 1.45;
    }
    .value-props__heading-row {
      font-size: 1.9rem;
    }
  }

  @media screen and (max-width: 359px) {
    /* Below an iPhone SE the two columns are 110px wide and every heading
       breaks across three lines. One column reads. */
    .value-props__grid {
      grid-template-columns: 1fr !important;
    }
  }
/* END_SECTION:value-props */