/** Shopify CDN: Minification failed

Line 2880:7 Cannot use type selector "--success" directly after nesting selector "&"
Line 2886:7 Cannot use type selector "--error" directly after nesting selector "&"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:c-ask-roger (INDEX:5) */
ask-roger {
    display: block; 
    padding-block: 30px;

    &[bg-color] {
      padding-block: 48px 88px;
      margin-block-start: 48px;
      position: relative;
      background-color: var(--bgColor);
    }
  
    .ask-roger__box {
      --distance-to-bleed: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
      margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
      margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    }

    .ask-roger__columns {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .ask-roger__media {
      width: 100%;
      
      @media screen and (min-width: 768px) {
        width: 50%;
        order: 2;
      }

      &[invert-order] {
        @media screen and (min-width: 768px) {
          order: 1;
        }
      }
    }

    /* Mobile shows the image at its own shape; only the empty state needs a size */
    .ask-roger__image {
      &:empty {
        aspect-ratio: 1;
        background-color: #FDE7D6;
      }

      img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .ask-roger__content {
      width: 100%;
    }

    .ask-roger__eyebrow {
      font-family: var(--eyebrow-font);
      font-weight: var(--eyebrow-font-weight);
      line-height: 1;
      color: var(--color-slate);
      margin-block-end: 4px;
      font-size: 12px;
      text-transform: uppercase;
      position: relative;
      padding-top: 10px; /* bar sits at -8px and is 2px tall: 16px between bar and text */

      &:before {
        content: '';
        position: absolute;
        top: -8px;
        left: 0;
        width: 48px;
        height: 2px;
        background-color: var(--color-tangerine);
      }
    }

    .ask-roger__heading {
      font-family: var(--heading-font-family);
      font-size: var(--heading-size-mobile);
      font-weight: var(--heading-font-weight);
      color: var(--heading-color);
      line-height: 1.02;
      letter-spacing: -0.02em;
      margin: 0 0 16px 0;

      span {
        color: var(--heading-alt-color);
      }
    }

    .ask-roger__text {
      font-family: var(--text-font-family);
      color: var(--description-color);
      font-size: 15px;
      line-height: 1.5;
      margin: 0 0 32px 0
    }

    .ask-roger__links {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .ask-roger__link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--links-color);
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      font-size: 15px;
      text-decoration: none;
      transition: color 0.24s ease;

      &:hover {
        color: var(--color-tangerine);
        text-decoration: underline;

        svg {
          transform: translate(2px, -2px);
        }
      }

      svg {
        transition: transform 0.2s ease;
      }
    }

    .ask-roger__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 24px;
      font-family: var(--text-font-family);
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      border: 1px solid transparent;
      border-radius: 2px;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

      /* Outlined: no fill, so override the global .button background */
      &[secondary] {
        --c-button-bg: transparent;
        --c-button-bg-hover: transparent;
        color: var(--color-dark-matter);
        border: 1px solid var(--color-wall);
        background-image: none;

        &:hover {
          /**/
        }
      }

      svg {
        width: 14px;
        height: 14px;
        fill: stroke;
      }
    }
  }

  @media screen and (min-width: 768px) {
    ask-roger {
      padding-block: 50px;

      &[bg-color] {
        padding-block: 64px;
        margin-block-start: 64px;
      }

      .ask-roger__columns {
        flex-direction: row;
        align-items: center;
        gap: 48px;
      }

      .ask-roger__media {
        flex: 0 0 calc(50% - 24px);
        order: 2;
      }

      .ask-roger__image {
        aspect-ratio: 3 / 2;
      }

      .ask-roger__content {
        flex: 0 0 calc(50% - 24px);
        order: 1;
        padding-right: 64px;

        /* Small desktops: less padding so the headline fits the narrower column */
        @media screen and (max-width: 1199px) {
          padding-right: 32px;
        }

        @media screen and (max-width: 999px) {
          padding-right: 24px;
        }
      }

      .ask-roger__heading {
        font-size: var(--heading-size-desktop);

        /* Small desktops: cap the headline so it fits the narrower columns */
        @media screen and (max-width: 1199px) {
          font-size: min(40px, var(--heading-size-desktop));
        }

        @media screen and (max-width: 999px) {
          font-size: min(38px, var(--heading-size-desktop));
        }
      }

      .ask-roger__text {
        font-size: 16px;
      }
    }
  }
/* END_SECTION:c-ask-roger */

/* START_SECTION:c-cart-drawer (INDEX:8) */
.c-cart-drawer {
    --drawer-max-width: min(100vw, 26rem);
    --drawer-header-padding-inline: 24px;
    --drawer-body-padding-inline: 24px;
    --drawer-footer-padding-inline: 24px;

    &::part(content) {
      background: var(--color-cereal-milk);
    }

    &::part(header) {
      padding-block: 26px;
      border-color: var(--color-wall);
    }

    &::part(close-button) {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--color-wall);
      border-radius: 50%;
      background-color: var(--color-white);
      color: var(--color-dark-matter);
    }

    &::part(body) {
      padding-block: 0;
    }

    &::part(footer) {
      padding-block: 26px;
      background: var(--color-white);
      border-color: var(--color-wall);
    }

    .c-cart-drawer__header {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .c-cart-drawer__title {
      font-family: var(--heading-font-family);
      font-weight: var(--heading-font-weight);
      font-size: 22px;
      line-height: 1.02;
      color: var(--color-dark-matter);
    }

    .c-cart-drawer__count {
      font-family: var(--tab-font);
      font-size: 13px;
      color: var(--color-slate);
    }

    c-cart-drawer-items {
      display: block;
      transition: opacity 0.2s ease;

      &[aria-busy='true'] {
        opacity: 0.6;
        pointer-events: none;
      }
    }

    .c-cart-drawer__items {
      margin: 0;
      padding: 0;
      list-style: none;
      outline: none;

      > li {
        margin: 0;
        padding-block: 24px;
        border-bottom: 1px solid var(--color-wall);
      }
    }

    .c-cart-drawer__empty {
      display: grid;
      justify-items: center;
      gap: 20px;
      text-align: center;

      p {
        font-family: var(--text-font-family);
        font-size: 16px;
        color: var(--color-slate);
      }
    }

    /* --- Footer --- */
    .c-cart-drawer__subtotal {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;

      span {
        font-family: var(--button-font-500);
        font-weight: var(--button-font-500-weight);
        font-size: 16px;
        color: var(--color-dark-matter);
      }

      strong {
        font-family: var(--heading-font-family);
        font-weight: var(--heading-font-weight);
        font-size: 24px;
        line-height: 1;
        color: var(--color-dark-matter);
      }
    }

    .c-cart-drawer__note-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 4px 16px;
      margin-top: 8px;
      font-family: var(--text-font-family);
      font-size: 13px;
      color: var(--color-slate);
    }

    .c-cart-drawer__note-toggle {
      all: unset;
      cursor: pointer;
      color: var(--color-dark-matter);
      text-decoration: underline;
      text-underline-offset: 3px;

      &:focus-visible {
        outline: 2px solid var(--color-burnt-orange);
        outline-offset: 2px;
      }
    }

    .c-cart-drawer__buttons {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .c-cart-drawer__button {
      all: unset;
      cursor: pointer;
      box-sizing: border-box;
      width: 100%;
      padding: 13px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 3px;
      font-family: var(--button-font);
      font-weight: var(--button-font-weight);
      font-size: 16px;
      text-align: center;

      &:focus-visible {
        outline: 2px solid var(--color-dark-matter);
        outline-offset: 2px;
      }
    }

    .c-cart-drawer__button--primary {
      background-color: var(--color-burnt-orange);
      color: var(--color-white);
    }

    .c-cart-drawer__button--secondary {
      background-color: var(--color-white);
      border: 1px solid var(--color-wall);
      color: var(--color-dark-matter);
    }

    /* --- Order note: slides up over the footer, opened by the theme's <cart-note-dialog> --- */
    .c-cart-drawer__note {
      background: var(--color-white);
      border-color: var(--color-wall);
      box-shadow: 0 -6px 16px rgb(0 0 0 / 0.06);
      padding: 24px;

      label {
        display: block;
        margin-bottom: 10px;
        font-family: var(--button-font-500);
        font-weight: var(--button-font-500-weight);
        font-size: 15px;
        color: var(--color-dark-matter);
      }

      textarea {
        box-sizing: border-box;
        width: 100%;
        min-height: 96px;
        padding: 12px 14px;
        border: 1px solid var(--color-wall);
        border-radius: 2px;
        font-family: var(--text-font-family);
        font-size: 14px;
        color: var(--color-dark-matter);
        background-color: var(--color-white);
        resize: vertical;
      }

      .c-cart-drawer__button {
        margin-top: 14px;
        background-color: var(--color-dark-matter);
        color: var(--color-white);
      }
    }
  }
/* END_SECTION:c-cart-drawer */

/* START_SECTION:c-collection-heading (INDEX:9) */
collection-heading {
    display: block; 
  
    .collection-heading__box {
      padding-top: 20px;
      --distance-to-bleed: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
      margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
      margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    }

    .collection-heading__heading {
      font-family: var(--heading-font-family);
      font-weight: var(--heading-font-weight);
      font-size: 32px;
      color: var(--heading-color, #0D0D0D);
      line-height: 1.02;
      text-transform: uppercase;

      span {
        color: var(--heading-alt-color);
      }
    }

    .collection-heading__breadcrumbs {
      ol {
        display: flex;
        align-items: center;
        gap: 0.4em;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          font-family: var(--tab-font);
          font-weight: var(--tab-font-weight);
          color: var(--heading-color);
          font-size: 0.75rem;

          a {
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }
    }
  }

  @media screen and (min-width: 768px) {
    collection-heading {
      padding-top: 30px;

      .collection-heading__heading {
        font-size: 32px;
      }
    }
  }
/* END_SECTION:c-collection-heading */

/* START_SECTION:c-full-width-image (INDEX:16) */
image-fw {
  display: block;
  margin-block: 15px;

  .image-fw__container {
    height: var(--mHeight);

    &[has-margins] {
      --distance-to-bleed: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
      margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
      margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/* Collection pages use the wider bleed width (same rule the header follows in theme.css) */
body:has(main .shopify-section--main-collection) image-fw {
  --container-max-width: var(--container-bleed-max-width);
}

@media (min-width: 786px) {
  image-fw {
    margin-block: 30px;
    
    .image-fw__container {
      height: var(--dHeight);
    }
  }
}
/* END_SECTION:c-full-width-image */

/* START_SECTION:c-get-samples (INDEX:17) */
get-samples {
    display: block;
    
    display: block;
    max-width: 100%;
    padding-block: 20px;

    .get-samples__container {
      margin: 0 auto;
      padding-top: 20px;
      --distance-to-bleed: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
      margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
      margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    }

    .get-samples__box {
      background-color: var(--color-warm-frosting);
      border: 1px solid var(--color-wall);
      border-radius: 4px;
      overflow: hidden;
    }

    .get-samples__columns {
      display: flex;
      flex-direction: column;
    }

    .get-samples__media {
      width: 100%;
      order: 1;
      display: flex;
      align-items: stretch;
      justify-content: stretch;
    }

    .get-samples__image {
      width: 100%;
      height: 100%;

      &:empty {
        background-color: var(--color-wall);

        &:after {
          display: flex;
          width: 100%;
          height: 100%;
          align-items: center;
          justify-content: center;
          content: 'missing img';
          text-transform: uppercase;
          font-family: var(--tab-font);
        }
      }

      img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .get-samples__content {
      width: 100%;
      order: 2;
      padding: 36px 24px 24px;
    }

    .get-samples__subheading {
      font-family: var(--text-font-family);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--subheading-color, #2b2b2b);
      margin: 0 0 12px 0;
    }

    .get-samples__heading {
      font-family: var(--heading-font-family);
      font-size: var(--heading-size-mobile);
      font-weight: var(--heading-font-weight, 700);
      color: var(--heading-color, #0d0d0d);
      line-height: 1.02;
      margin: 0 0 16px 0;
    }

    .get-samples__text {
      font-family: var(--text-font-family);
      color: var(--description-color, #4a4a4a);
      font-size: 15px;
      line-height: 1.5;
      margin: 0 0 24px 0;
    }

    .get-samples__buttons {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 12px;
    }

    .get-samples__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 24px;
      white-space: nowrap;

      /* Small phones: the two buttons share one row, so trim the side padding */
      @media screen and (max-width: 539px) {
        padding-inline: 16px;
      }
      font-family: var(--text-font-family);
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      border: 1px solid transparent;
      border-radius: 2px;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

      /* Outlined: no fill, so override the global .button background */
      &[secondary] {
        --c-button-bg: transparent;
        --c-button-bg-hover: transparent;
        color: var(--color-dark-matter);
        border: 1px solid var(--color-wall);
        background-image: none;

        &:is(:hover, :focus-visible) {
          border-color: var(--color-tangerine);
        }
      }

      svg {
        width: 14px;
        height: 14px;
        fill: stroke;

        /* Small phones: drop the arrow so both buttons fit on one row */
        @media screen and (max-width: 539px) {
          display: none;
        }
      }
    }
  }

  @media screen and (min-width: 768px) {
    get-samples {
      .get-samples__box {}

      .get-samples__columns {
        flex-direction: row;
        align-items: center;
        gap: 48px;
      }

      .get-samples__media {          
        flex: 0 0 50%;
        order: 2;
      }

      .get-samples__image {
        aspect-ratio: 16 / 10;
      }

      .get-samples__content {
        flex: 0 0 50%;
        order: 1;
      }

      .get-samples__heading {
        font-size: var(--heading-size-desktop);
      }

      .get-samples__text {
        font-size: 16px;
      }
    }
  }
/* END_SECTION:c-get-samples */

/* START_SECTION:c-main-cart (INDEX:19) */
c-cart {
    display: block;
    padding-block: 40px 64px;

    .c-cart__body {
      margin-inline: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
      transition: opacity 0.2s ease;
    }

    &[aria-busy='true'] .c-cart__body {
      opacity: 0.6;
      pointer-events: none;
    }

    .c-cart__layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 40px;
    }

    /* --- Header --- */
    .c-cart__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .c-cart__title {
      font-family: var(--heading-font-family);
      font-weight: var(--heading-font-weight);
      font-size: 30px;
      line-height: 1.02;
      text-transform: uppercase;
      color: var(--color-dark-matter);
    }

    .c-cart__count {
      display: block;
      margin-top: 12px;
      font-family: var(--tab-font);
      font-size: 14px;
      color: var(--color-slate);
    }

    .c-cart__continue {
      display: inline-flex;
      gap: 8px;
      font-family: var(--button-font-500);
      font-weight: var(--button-font-500-weight);
      font-size: 15px;
      line-height: 1.2;
      color: var(--color-burnt-orange);
      text-align: end;
    }

    /* --- Items --- */
    .c-cart__items {
      margin: 32px 0 0;
      padding: 0;
      list-style: none;

      > li {
        margin: 0;
        padding-block: 30px;
        border-bottom: 1px solid var(--color-wall);

        &:first-child {
          padding-top: 0;
        }
      }
    }

    .c-cart__error {
      margin-top: 16px;
      font-size: 14px;
      color: var(--color-no-red);
    }

    /* --- Upsells --- */
    .c-cart__upsells {
      margin-top: 48px;

      h2 {
        font-family: var(--eyebrow-font);
        font-weight: var(--eyebrow-font-weight);
        font-size: 15px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-slate);
      }
    }

    .c-cart__upsell-list {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      margin-top: 20px;
    }

    /* --- Summary --- */
    .c-cart__summary {
      align-self: start;
      padding: 32px 24px;
      background-color: var(--color-white);
      border: 1px solid var(--color-wall);

      h2 {
        font-family: var(--heading-font-family);
        font-weight: var(--heading-font-weight);
        font-size: 22px;
        line-height: 1;
        color: var(--color-dark-matter);
      }
    }

    .c-cart__rows {
      display: grid;
      gap: 18px;
      margin-top: 32px;

      > div {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        font-family: var(--text-font-family);
        font-size: 16px;
        color: var(--color-dark-matter);
      }

      dt small {
        font-size: 13px;
        color: var(--color-slate);
      }

      dt button {
        all: unset;
        cursor: pointer;
        margin-inline-start: 6px;
        font-size: 13px;
        color: var(--color-slate);
        text-decoration: underline;
      }
    }

    .c-cart__row--discount dd {
      color: color-mix(in srgb, var(--color-yes-green) 70%, black);
    }

    .c-cart__muted {
      color: var(--color-slate);
    }

    .c-cart__promo {
      display: flex;
      gap: 8px;
      margin-top: 24px;

      input {
        flex: 1;
        min-width: 0;
        height: 46px;
        padding-inline: 14px;
        border: 1px solid var(--color-wall);
        border-radius: 2px;
        font-family: var(--tab-font);
        font-size: 14px;
        background-color: var(--color-white);
      }

      button {
        all: unset;
        cursor: pointer;
        padding-inline: 20px;
        border-radius: 2px;
        background-color: var(--color-dark-matter);
        font-family: var(--button-font);
        font-weight: var(--button-font-weight);
        font-size: 15px;
        color: var(--color-white);

        &:focus-visible {
          outline: 2px solid var(--color-burnt-orange);
          outline-offset: 2px;
        }
      }
    }

    .c-cart__promo-error {
      margin-top: 8px;
      font-size: 13px;
      color: var(--color-no-red);
    }

    .c-cart__total {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-top: 20px;
      padding-top: 28px;
      border-top: 1px solid var(--color-wall);

      span {
        font-family: var(--button-font-500);
        font-weight: var(--button-font-500-weight);
        font-size: 18px;
        color: var(--color-dark-matter);
      }

      small {
        display: block;
        margin-top: 8px;
        font-size: 13px;
        color: var(--color-slate);
      }

      strong {
        font-family: var(--heading-font-family);
        font-weight: var(--heading-font-weight);
        font-size: 32px;
        line-height: 1;
        color: var(--color-dark-matter);
      }
    }

    .c-cart__checkout {
      all: unset;
      cursor: pointer;
      box-sizing: border-box;
      width: 100%;
      margin-top: 28px;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 3px;
      background-color: var(--color-burnt-orange);
      font-family: var(--button-font);
      font-weight: var(--button-font-weight);
      font-size: 17px;
      color: var(--color-white);

      &:focus-visible {
        outline: 2px solid var(--color-dark-matter);
        outline-offset: 2px;
      }
    }

    .c-cart__trust {
      display: grid;
      gap: 10px;
      margin: 24px 0 0;
      padding: 0;
      list-style: none;

      li {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--text-font-family);
        font-size: 13px;
        color: var(--color-slate);
      }

      svg {
        flex-shrink: 0;
        color: var(--color-burnt-orange);
      }
    }

    .c-cart__payments {
      margin-top: 20px;
      font-family: var(--tab-font);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-gray);
    }

    /* --- Empty --- */
    .c-cart__empty {
      max-width: 520px;
      padding-block: 40px;

      p {
        margin-top: 16px;
        font-family: var(--text-font-family);
        font-size: 16px;
        line-height: 1.4;
        color: var(--color-slate);
      }

      a {
        display: inline-block;
        margin-top: 28px;
        padding: 14px 20px;
        border-radius: 3px;
        background-color: var(--color-burnt-orange);
        font-family: var(--button-font);
        font-weight: var(--button-font-weight);
        font-size: 15px;
        color: var(--color-white);
      }
    }

    @media screen and (min-width: 700px) {
      .c-cart__upsell-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media screen and (min-width: 1000px) {
      padding-block: 72px 120px;

      .c-cart__layout {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 48px;
      }

      .c-cart__header {
        align-items: baseline;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--color-wall);
      }

      .c-cart__title-group {
        display: flex;
        align-items: baseline;
        gap: 18px;
      }

      .c-cart__title {
        font-size: 36px;
      }

      .c-cart__count {
        margin-top: 0;
      }

      .c-cart__continue {
        display: none;
      }

      .c-cart__items > li:first-child {
        padding-top: 30px;
      }

      .c-cart__summary {
        margin-top: 50px;
        padding: 36px 32px;
        border: 0;
      }
    }
  }
/* END_SECTION:c-main-cart */

/* START_SECTION:c-main-page (INDEX:20) */
c-main-page {
    display: block;
    padding-block: 48px;

    /* Narrow reading column, centred (720px, as the about page's brand callouts content used to be) */
    .c-main-page__container {
      display: grid;
      gap: 40px;
      margin-inline: max(var(--container-gutter), 50% - 720px / 2);
    }

    /* Embedded videos and maps in page content fill the column instead of the browser's 300×150 default */
    .c-main-page__content iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }

    .c-main-page__title {
      font-family: var(--heading-font-family);
      font-weight: var(--heading-font-weight);
      line-height: 1.02;
      color: var(--color-dark-matter);
      font-size: 36px;
      position: relative;
      padding-top: 18px; /* 2px bar + 16px to the text, like the value props eyebrow */

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 48px;
        height: 2px;
        background-color: var(--color-tangerine);
      }
    }

    .c-main-page__content {
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      line-height: 1.5;
      color: var(--color-dark-matter);
      font-size: 16px;
    }
  }

  @media screen and (min-width: 768px) {
    c-main-page {
      padding-block: 64px;

      .c-main-page__title {
        font-size: 42px;

        /* Small desktops: same headline steps as the rest of the site */
        @media screen and (max-width: 1199px) {
          font-size: 40px;
        }

        @media screen and (max-width: 999px) {
          font-size: 38px;
        }
      }
    }
  }
/* END_SECTION:c-main-page */

/* START_SECTION:c-main-search (INDEX:21) */
c-search {
    display: block;
    padding-bottom: 64px;

    .c-search__form {
      display: flex;
      align-items: center;
      max-width: 560px;
      margin-top: 24px;
      border-bottom: 1px solid var(--color-dark-matter);

      input {
        all: unset;
        flex: 1;
        min-width: 0;
        padding-block: 10px;
        font-family: var(--text-font-family);
        font-size: 16px;
        color: var(--color-dark-matter);

        &::placeholder {
          color: var(--color-gray);
        }
      }

      button {
        all: unset;
        cursor: pointer;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        color: var(--color-dark-matter);

        &:focus-visible {
          outline: 2px solid var(--color-burnt-orange);
        }
      }
    }

    /* Tabs: same type and underline as c-filter-links */
    .c-search__tabs {
      display: flex;
      gap: 32px;
      margin-top: 32px;
      overflow-x: auto;
      scrollbar-width: none;
      border-bottom: 1px solid var(--color-wall);

      a {
        position: relative;
        flex-shrink: 0;
        padding-bottom: 8px;
        font-family: var(--tab-font);
        font-weight: var(--tab-font-weight);
        font-size: 16px;
        line-height: 1.1;
        text-transform: uppercase;
        color: var(--color-dark-matter);

        &:before {
          content: '';
          position: absolute;
          inset-block-end: 0;
          width: 100%;
          height: 2px;
          background: var(--color-tangerine);
          transform: scaleX(0);
          transform-origin: left center;
          transition: transform 0.2s ease-in-out;
          pointer-events: none;
        }

        &[aria-current='page']:before,
        &:hover:before,
        &:focus-visible:before {
          transform: scaleX(1);
        }

        span {
          color: var(--color-slate);
        }
      }
    }

    .c-search__results {
      margin-top: 24px;
    }

    .c-search__empty {
      padding-block: 48px;
      font-family: var(--text-font-family);
      font-size: 16px;
      color: var(--color-slate);
    }

    .c-search__pages {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;

      li {
        margin: 0;
        border-bottom: 1px solid var(--color-wall);
      }

      a {
        display: block;
        padding-block: 20px;
      }

      h2 {
        font-family: var(--button-font-500);
        font-weight: var(--button-font-500-weight);
        font-size: 18px;
        color: var(--color-dark-matter);
      }

      p {
        margin-top: 6px;
        font-family: var(--text-font-family);
        font-size: 14px;
        line-height: 1.4;
        color: var(--color-slate);
      }

      a:hover h2 {
        text-decoration: underline;
        text-underline-offset: 3px;
      }
    }
  }

  @media screen and (min-width: 768px) {
    c-search .c-search__tabs {
      gap: 48px;
    }
  }
/* END_SECTION:c-main-search */

/* START_SECTION:c-product-layout (INDEX:25) */
product-layout {
    display: block;

    .product-layout__box {
      padding-block: 20px;
      --distance-to-bleed: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
      margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
      margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    }

    .product-layout__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: 'media' 'form-details' 'details';
      gap: 16px;
    }

    /* --- Media & Carousel Styles --- */
    .product-layout__media {
      grid-area: media;
      position: relative;
    }

    .product-layout__slider {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      /* The arrows are positioned against the slider, not the media box (which also holds the thumbnails) */
      anchor-name: --pdp-slider;

      &::-webkit-scrollbar {
        display: none;
      }

      /* Prev/next arrows, same as the quick view carousel, drawn as scroll buttons so no JS is needed */
      &::scroll-button(left),
      &::scroll-button(right) {
        content: "";
        position: absolute;
        position-anchor: --pdp-slider;
        top: calc(anchor(center) - 8px);
        width: 20px;
        height: 16px;
        padding: 0;
        border: 0;
        background-color: var(--color-white);
        mask: url('data:image/svg+xml,<svg width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 9.82747H24.8889M16.7018 19.1608L24.8889 9.82747L16.7018 0.494141" stroke="%23000" stroke-width="1.95"/></svg>') no-repeat center / contain;
        cursor: pointer;
        z-index: 2;
        transition: opacity 0.24s ease, background-color 0.24s ease;
      }

      &::scroll-button(left):hover:not(:disabled),
      &::scroll-button(right):hover:not(:disabled) {
        background-color: var(--color-tangerine);
      }

      &::scroll-button(left) {
        left: calc(anchor(left) + 16px);
        transform: scaleX(-1);
      }

      &::scroll-button(right) {
        right: calc(anchor(right) + 16px);
      }

      &::scroll-button(left):disabled,
      &::scroll-button(right):disabled {
        opacity: 0;
        cursor: default;
      }
    }

    .product-layout__slide {
      flex: 0 0 100%;
      width: 100%;
      scroll-snap-align: start;
    }

    .product-layout__aspect-box {
      width: 100%;
      aspect-ratio: 4 / 5;
      /* White box, so product shots on a white background (e.g. molding) blend in; same as the product cards */
      background-color: var(--color-white);
      position: relative;

      img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      /* Accessories (molding): square and vertical product shots aren't cropped, shown whole and centred.
         Flooring room shots keep the cover crop */
      &.is-upright img {
        object-fit: contain;
      }
    }

    /* Mobile carousel progress dots, over the image 16px from its bottom edge */
    .product-layout__dots {
      position: absolute;
      inset-inline: 0;
      inset-block-end: 16px;
      display: flex;
      justify-content: center;
      gap: 8px;
      pointer-events: none;
    }

    .product-layout__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgb(255 255 255 / 0.7);
      transition: background-color 0.2s ease;

      &[data-active] {
        background-color: var(--color-burnt-orange);
      }
    }

    .product-layout__thumbs {
      display: none;
    }

    /* --- Content / Details Styles --- */
    .product-layout__form-details {
      grid-area: form-details;
    }

    .product-layout__brand {
      font-family: var(--eyebrow-font-400);
      font-weight: var(--eyebrow-font-400-weight);
      font-size: 0.875rem;
      text-transform: uppercase;
      line-height: 1;
      color: var(--color-dark-matter);
    }

    .product-layout__heading {
      font-family: var(--heading-font-family);
      font-size: 2rem;
      font-weight: var(--heading-font-weight);
      color: var(--color-dark-matter);
      line-height: 1.02;
      text-transform: uppercase;
      margin-block-start: 8px;
    }

    .product-layout__subheading {
      font-family: var(--tab-font);
      font-weight: var(--tab-font-weight);
      line-height: 1;
      font-size: 0.9375rem;
      margin-block-start: 12px;
      color: var(--color-dark-matter);
    }

    .product-layout__description {
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      color: var(--color-dark-matter);
      font-size: 1rem;
      line-height: 1.5;
      margin-top: 32px;
    }
  }

  /* Mobile: gallery runs edge to edge and sits right under the header */
  @media screen and (max-width: 767px) {
    product-layout .product-layout__box {
      padding-block-start: 0;
    }

    product-layout .product-layout__media {
      margin-inline: calc(var(--distance-to-bleed) * -1);
    }
  }

  @media screen and (min-width: 768px) {
    product-layout {
      padding-block: 30px;

      .product-layout__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto 1fr;
        grid-template-areas: 'media form-details' 'details form-details';
        gap: 24px;
      }

      .product-layout__aspect-box {
        aspect-ratio: 3 / 2;
      }

      .product-layout__dots {
        display: none;
      }

      /* Desktop Thumbnail Row (No wrapping, inline snap-scroll) */
      .product-layout__thumbs {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      .product-layout__thumb {
        flex: 0 0 calc((100% - (8px * 5)) / 6); /* Shows 6 thumbs in view at a time */
        aspect-ratio: 1;
        background-color: var(--color-white);
        display: block;
        overflow: hidden;
        scroll-snap-align: start; /* Ensures selected thumbnail snaps directly to the first position */

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

      .product-layout__text {
        font-size: 16px;
      }
    }
  }

  @media screen and (min-width: 1024px) {
    product-layout {
      .product-layout__grid {
        grid-template-columns: 1fr minmax(0, 480px);
        gap: 48px;
      }
    }
  }
/* END_SECTION:c-product-layout */

/* START_SECTION:c-quote (INDEX:27) */
c-quote {
    display: block;
    padding-block: 48px;

    &[bg-color] {
      background-color: var(--bgColor);
    }

    .c-quote__container {
      display: grid;
      gap: 24px;
      margin-inline: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    }

    .c-quote__eyebrow {
      font-family: var(--eyebrow-font);
      font-weight: var(--eyebrow-font-weight);
      line-height: 1;
      color: var(--color-slate);
      font-size: 12px;
      text-transform: uppercase;
      margin-block-end: 12px;
      position: relative;
      padding-top: 10px; /* bar sits at -8px and is 2px tall: 16px between bar and text, as in value props */

      &:before {
        content: '';
        position: absolute;
        top: -8px;
        left: 0;
        width: 48px;
        height: 2px;
        background-color: var(--color-tangerine);
      }
    }

    .c-quote__headline {
      font-family: var(--heading-font-family);
      font-weight: var(--heading-font-weight);
      line-height: 1.02;
      color: var(--color-dark-matter);
      font-size: 36px;
    }

    .c-quote__body {
      display: grid;
      gap: 16px;
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      line-height: 1.5;
      color: var(--color-dark-matter);
      font-size: 16px;
    }

    .c-quote__quote-headline {
      font-weight: 600;
    }

    .c-quote__quotee {
      margin-block-start: 8px;
      font-family: var(--heading-font-family);
      font-weight: var(--heading-font-weight);
      line-height: 1.02;
      font-size: 18px;

      &:before {
        content: '—';
        display: block;
        margin-block-end: 4px;
      }
    }
  }

  @media screen and (min-width: 768px) {
    c-quote {
      padding-block: 64px;

      /* Same columns as c-brand-callouts, gap as value props: 50/50, then on a 12-col grid header 3 cols +
         1 empty + content 8, then 3 + 2 empty + 7 */
      .c-quote__container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
      }

      @media screen and (min-width: 1000px) {
        .c-quote__container {
          grid-template-columns: repeat(12, minmax(0, 1fr));
        }

        .c-quote__header {
          grid-column: 1 / span 3;
        }

        .c-quote__body {
          grid-column: 5 / -1;
        }
      }

      @media screen and (min-width: 1200px) {
        .c-quote__body {
          grid-column: 6 / -1;
        }
      }

      .c-quote__headline {
        font-size: 42px;

        /* Small desktops: same headline steps as the rest of the site */
        @media screen and (max-width: 1199px) {
          font-size: 40px;
        }

        @media screen and (max-width: 999px) {
          font-size: 38px;
        }
      }
    }
  }
/* END_SECTION:c-quote */

/* CSS from block stylesheet tags */
/* START_BLOCK:_c-pdp-availability (INDEX:92) */
product-availability {
    display: block;
    margin-top: 24px;
    
    .pa__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, max-content));
      grid-template-rows: auto auto auto;
      gap: 8px 24px;
    }

    .pa__grid-item {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;

      h3 {
        font-family: var(--button-font-500);
        font-weight: var(--button-font-500-weight);
        font-size: 0.6875rem;
        line-height: 1;
        color: var(--color-slate);
        text-transform: uppercase;
      }
      
      p {
        font-family: var(--text-font-800);
        font-weight: var(--text-font-800-weight);
        font-size: 0.875rem;
        line-height: 1;
        color: var(--color-dark-matter);

        &[oos] {
          color: var(--color-no-red);
        }

        &[is] {
          color: var(--color-yes-green)
        }

        &[stat] {
          line-height: 1.3;
          font-family: var(--tab-font);
          font-weight: var(--tab-font-weight);
          font-size: 0.75rem;
          color: var(--color-slate);

          a {
            color: inherit;
            text-decoration: underline;
            text-underline-offset: 2px;

            &:hover {
              color: var(--color-dark-matter);
            }
          }
        }
      }
    }

    .pa__pickup {
      margin-top: 40px;
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      font-size: 0.875rem;
      line-height: 1.5;
      color: var(--color-dark-matter);
    }
  }

  @media (min-width: 768px) {
    product-availability {
      .pa__grid {
        gap: 8px 32px;
      }
    }
  }
/* END_BLOCK:_c-pdp-availability */

/* START_BLOCK:_c-pdp-box-calculator (INDEX:93) */
sqft-calculator {
    display: block;
    margin-top: 40px;

    .sqft-calc__form {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .sqft-calc__headline {
      h2 {
        font-family: var(--heading-font-family);
        font-weight: var(--heading-font-weight);
        font-size: 20px;
        line-height: 1;
        text-box: trim-both cap alphabetic;
        color: var(--color-dark-matter);
      }

       p {
        font-family: var(--text-font-family);
        font-weight: var(--text-font-weight);
        color: var(--color-dark-matter);
        font-size: 16px;
        line-height: 1.2;
        margin-top: 12px;
      }
    }

    .sqft-calc__box {
      display: flex;
      flex-direction: column;
      padding: 16px;
      background-color: var(--color-warm-frosting);
      border-radius: 10px;
    }

    .sqft-calc__sqft-field {
      display: flex;
      align-items: center;
      gap: 24px;
      justify-content: space-between;

      label {
        flex: 0 0 auto;
        font-family: var(--text-font-family);
        font-weight: var(--text-font-weight);
        font-size: 18px;
        color: var(--color-dark-matter);
      }

      input[type=number] {
        appearance: none;
        margin: 0;
        flex: 0 1 auto;
        display: flex;
        align-items: center;
        padding-inline: 12px;
        height: 36px;
        text-align: right;
        min-width: 0;
        max-width: calc(36px * 3);
        border-radius: 4px;
        border: 1px solid var(--color-wall);
        border-radius: 3px;
        font-family: var(--tab-font);
        font-weight: var(--tab-font-weight);
        font-size: 14px;
        color: var(--color-dark-matter);
        letter-spacing: 0px;
        -moz-appearance: textfield;
        outline: none;
        transition: border-color 0.24s ease;
        background-color: var(--color-white);

        &::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }

        &:active,
        &:focus-visible {
          outline: none;
          border-color: var(--color-tangerine);
        }
      }
    }

    .sqft-calc__extra-coverage {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
    }

    .sqft-calc__extra-checkbox {
      display: flex;
      gap: 4px;

      label {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        cursor: pointer;
        font-family: var(--text-font-family);
        font-weight: var(--text-font-weight);
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0px;

        &:before,
        &:after {
          content: '';
          display: block;
          height: 16px;
          transition: all 0.24s ease;
          transition-property: background-color, border-color, transform;
        }

        &:before {
          width: 32px;
          background-color: var(--color-wall);
          border-radius: 16px;
        }

        &:after {
          width: 16px;
          background-color: var(--color-white);
          border: 2px solid hsl(from var(--color-tangerine) h s calc(l - 15));
          border-radius: 8px;
          position: absolute;
          left: 0;
          top: 1px;
        }

        input {
          border: 0;
          clip-path: inset(50%);
          height: 1px;
          margin: -1px;
          overflow: hidden;
          padding: 0;
          position: absolute;
          white-space: nowrap;
          width: 1px;
        }

        &:has(input:checked) {
          &:before {
            background-color: var(--color-burnt-orange);
          }

          &:after {
            border-color: var(--color-burnt-orange);
            transform: translateX(100%);
          }
        }

        &:has(input:disabled) {
          cursor: not-allowed;

          &:before {
            background-color: var(--color-wall);
          }

          &:after {
            background-color: var(--color-wall);
            border-color: hsl(from var(--color-wall) h s calc(l - 15));
            transform: translateX(0%);
          }
        }
      }

      &:has(input:disabled) {
        .sqft-calc__tooltip-icon {
          background-color: rgb(from var(--color-dark-matter) r g b / 0.6);

          &:hover,
          &:focus-visible,
          &[aria-expanded=true] {
            background-color: var(--color-dark-matter);
          }
        }
      }
    }
    
    .sqft-calc__tooltip-trigger {
      all: unset;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background-color: var(--color-burnt-orange);
      color: var(--color-white);
      font-size: 10px;
      font-style: normal;
      font-weight: bold;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background-color 0.24s ease;
      position: relative;
      top: 2px;
      anchor-name: --tooltip-anchor;

      &:before {
        content: '?';
        font-family: var(--tab-font-600);
        font-weight: var(--tab-font-600-weight);
        color: var(--color-white);
        font-size: 9px;
        line-height: 9px;
        text-box: trim-both cap alphabetic;
      }
    }

    .sqft-calc__tooltip {
      margin: 0;
      width: max-content;
      max-width: 240px;
      padding: 10px 12px;
      background-color: #f2efe9;
      border: 1px solid var(--color-wall);
      border-radius: 4px;
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      font-size: 0.6875rem;
      line-height: 1.4;
      color: var(--color-dark-matter);
      z-index: 10;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      position-anchor: --tooltip-anchor;
      top: calc(anchor(bottom) + 4px);
      left: anchor(center);
      transform: translateX(-50%);

      /* Keeps the popover within the viewport edges */
      position-try-options: flip-block, flip-inline;
    }

    .sqft-calc__tooltip-trigger:hover .sqft-calc__tooltip,
    .sqft-calc__tooltip-trigger:focus .sqft-calc__tooltip {
      display: block;
    }

    .sqft-calc__extra-amount {
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      font-size: 14px;
      line-height: 18px;
      color: var(--color-dark-matter);
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;

      input[type="checkbox"] {
        cursor: pointer;

        &:disabled {
          cursor: not-allowed;
        }
      }
    }
    
    .sqft-calc__boxes-field {
      display: grid;
      grid-template-columns: auto 1fr 16px auto;
      grid-template-areas: 'blabel . . bfield' 'bcount bcount . bfield';
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--color-wall);     

      label {
        flex: 0 0 auto;
        font-family: var(--text-font-family);
        font-weight: var(--text-font-weight);
        font-size: 16px;
        line-height: 1;
        display: flex;
        align-items: center;
        color: var(--color-dark-matter);
        grid-area: blabel;
        padding-top: 2px;
      }

      span {
        font-family: var(--tab-font);
        font-weight: var(--tab-font-weight);
        font-size: 12px;
        letter-spacing: -0.05px;
        color: var(--color-dark-matter);
        text-box: trim-both cap alphabetic;
        line-height: 1;
        display: inline-block;
        position: relative;
        grid-area: bcount;
        margin-top: 2px;

        &:before {
          content: "";
          display: inline-block;
          width: 14px;
          height: 14px;
          transform: translateY(25%);
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="19"><path fill="currentColor" d="M7.75 17.021V9.883L1.5 6.263v6.966q0 .077.038.144a.33.33 0 0 0 .116.116zm1.5 0 6.096-3.533a.33.33 0 0 0 .115-.115.3.3 0 0 0 .039-.144V6.264L9.25 9.883zm-1.654 1.637L.904 14.806A1.78 1.78 0 0 1 0 13.244V5.66a1.77 1.77 0 0 1 .904-1.562L7.596.246a1.78 1.78 0 0 1 1.808 0l6.692 3.852A1.78 1.78 0 0 1 17 5.66v7.584a1.77 1.77 0 0 1-.904 1.562l-6.692 3.852a1.78 1.78 0 0 1-1.808 0m4.76-12.306 2.319-1.33-6.021-3.484A.3.3 0 0 0 8.5 1.49a.3.3 0 0 0-.154.048l-2.171 1.25zM8.5 8.591l2.325-1.347L4.65 3.675 2.325 5.021z"/></svg>');
          margin-right: 2px;
        }
      }

      boxes-quantity-box {
        display: flex;
        align-items: center;
        gap: 4px;
        grid-area: bfield;

        boxes-unit {
          display: block;
          font-family: var(--tab-font);
          font-weight: var(--tab-font-weight);
          font-size: 14px;
          color: var(--color-dark-matter);
          letter-spacing: 0px;

          &:empty {
            display: none;
          }
        }
      }
    }

    .sqft-calc__amount {
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      font-size: 14px;
      color: var(--color-dark-matter);
    }

    .sqft-calc__total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
      padding-top: 8px;
      border-top: 1px solid var(--color-wall);
    }

    .sqft-calc__total-label {
      font-family: var(--button-font);
      font-weight: var(--button-font-weight);
      font-size: 18px;
      color: var(--color-dark-matter);
    }

    .sqft-calc__total-value {
      font-family: var(--button-font);
      font-weight: var(--button-font-weight);
      font-size: 18px;
      color: var(--color-dark-matter);
    }

    .sqft-calc__submit {
      margin-top: 8px;
      cursor: pointer;
      transition: all 0.24s ease;
      display: grid;
      place-items: center;
      grid-template-areas: 'buttonstack';

      > span {
        grid-area: buttonstack;
        display: flex;
        align-items: center;
      }

      > loader-box {
        grid-area: buttonstack;
        width: 20px;
        height: 20px;
        display: block;
        opacity: 0;
        border: 2px solid var(--color-white);
        border-right-color: transparent;
        border-radius: 50%;
        animation: sample-pdp-spinner 0.6s linear infinite;
      }

      &[processing] {
        cursor: wait;

        span {
          opacity: 0;
        }

        loader-box {
          opacity: 1;
        }
      }

      &[disabled] {
        cursor: not-allowed;
        background-color: var(--color-wall);
        color: var(--color-white);
      }
    }

    .sqft-calc__atc-minprogress {
      margin-top: 16px;

      &:not([invalid]) {
        .sqft-calc__min-text {
          opacity: 0;
        }
      }
    }

    .sqft-calc__min-message {
      display: flex;
      justify-content: space-between;
    }

    .sqft-calc__min-text {
      font-family: var(--button-font-500);
      font-weight: var(--button-font-500-weight);
      color: var(--color-burnt-orange);
      font-size: 12px;
      line-height: 1;
      text-box: trim-both cap alphabetic;
      letter-spacing: 0px;
      transition: opacity 0.24s ease;
    }

    .sqft-calc__sqft-total {
      font-family: var(--tab-font);
      font-weight: var(--tab-font-weight);
      color: var(--color-dark-matter);
      font-size: 12px;
      text-box: trim-both cap alphabetic;
      line-height: 1;
      letter-spacing: 0px;
    }

    .sqft-calc__atc-progress-bar {
      width: 100%;
      height: 2px;
      border-radius: 1px;
      background-color: var(--color-wall);
      overflow: hidden;
      margin-top: 4px;
      position: relative;
      display: grid;

      > span {
        display: block;
        height: 100%;
        background-color: var(--color-burnt-orange);
        transform: scaleX(var(--cta-progress, 0%));
        transition: transform 0.24s ease;
        transform-origin: left center;
        will-change: transform;
      }
    }
  }
/* END_BLOCK:_c-pdp-box-calculator */

/* START_BLOCK:_c-pdp-certifications (INDEX:94) */
.c-pdp-certs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
  }

  .c-pdp-certs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--color-wall);
    border-radius: 2px;
    font-family: var(--tab-font);
    font-weight: var(--tab-font-weight);
    font-size: 0.75rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-dark-matter);
    text-decoration: none;
    transition: border-color 0.2s ease;

    svg {
      flex: none;
      width: 12px;
      height: 12px;
      color: var(--color-yes-green);
    }
  }

  a.c-pdp-certs__item:hover {
    border-color: var(--color-dark-matter);
  }
/* END_BLOCK:_c-pdp-certifications */

/* START_BLOCK:_c-pdp-details (INDEX:95) */
tff-pdp-details {
    display: block;
    width: 100%;

    /* Accordion Container Styling */
    .tff-pdp-details__items {
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--color-wall);
    }

    .tff-pdp-details__button {
      width: 100%;
      background: none;
      border: none;
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: left;
      cursor: pointer;
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      font-size: 18px;
      text-box: trim-both cap alphabetic;
      color: var(--color-burnt-orange);
      transition: color 0.24s ease;

      &:hover, &:focus-visible {
        opacity: 0.85;
      }

      .tff-pdp-details__icon {
        width: 16px;
        height: 16px;
        position: relative;
        flex-shrink: 0;
        margin-left: 16px;
        color: var(--color-burnt-orange);
        transition: transform 0.4s cubic-bezier(.19,1,.22,1);

        &:before, &:after {
          content: '';
          position: absolute;
          background-color: currentColor;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 1.5px;
          will-change: transform;
          transition: opacity 0.24s ease;
        }

        &:before {
          transform: translate(-50%, -50%) rotate(90deg);
        }
        
        &:after {
          transform: translate(-50%, -50%);
        }
      }

      &[aria-expanded="true"] {
        .tff-pdp-details__icon {
          transform: rotate(270deg);
            
          &:after {
            opacity: 0;
          }
        }
      }
    }

    .tff-pdp-details__panel {
      display: grid;
      grid-template-rows: 0fr;
      transition: all 0.4s cubic-bezier(.19,1,.22,1);
      transition-property: grid-template-rows, padding;

      > div {
        overflow: hidden;
      }

      &[expanded] {
        grid-template-rows: 1fr;
        padding-bottom: 24px;
      }
    }

    /* Specifications List Layout */
    .tff-pdp-details__specs-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .tff-pdp-details__spec-item {
      font-family: var(--tab-font);
      font-size: 13px;
      line-height: 1.5;
      color: var(--color-dark-matter);
      display: flex;
      align-items: baseline;
      gap: 6px;

      .tff-pdp-details__spec-label {
        font-weight: 700;
        text-transform: capitalize;

        &:after {
          content: ":";
        }
      }

      .tff-pdp-details__spec-value {
        font-weight: 400;
        color: #333333;
      }
    }

    /* Rich Text Content Formatting */
    .tff-pdp-details__body {
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      font-size: 14px;
      line-height: 1.6;
      color: var(--color-dark-matter);

      p {
        margin-bottom: 12px;
        &:last-child {
          margin-bottom: 0;
        }
      }

      strong {
        font-weight: 700;
      }

      a {
        color: var(--color-burnt-orange);

        &:hover, &:focus-visible {
          text-decoration: underline;
        }
      }
    }
  }

  @media (min-width: 768px) {
    tff-pdp-details {
      .tff-pdp-details__button {
        font-size: 22px;
      }
    }
  }
/* END_BLOCK:_c-pdp-details */

/* START_BLOCK:_c-pdp-form (INDEX:96) */
pdp-form {
    display: block;
    width: 100%;
    margin-top: 40px;

    .pdp-form {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .pdp-form__error-message {
      color: var(--color-error);
      background-color: var(--color-error-bg);
      border: 1px solid var(--color-error-border);
      padding: 12px 16px;
      border-radius: 4px;
      font-size: 14px;
      line-height: 1.4;
      margin-bottom: 16px;
    }

    .pdp-form__error-message[hidden] {
      display: none;
    }

    .pdp-form__variants {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .pdp-form__option-group {
      border: none;
      padding: 0;
      margin: 0;

      legend {
        font-family: var(--heading-font-family);
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 8px;
        color: var(--color-dark-matter);

        span {
          font-weight: 400;
          color: var(--color-wall-dark);
        }
      }
    }

    .pdp-form__option-values {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .pdp-form__option-btn {
      position: relative;
      cursor: pointer;

      input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;

        &:checked + span {
          border-color: var(--color-dark-matter);
          background-color: var(--color-dark-matter);
          color: var(--color-white);
        }

        &:focus-visible + span {
          outline: 2px solid var(--color-dark-matter);
          outline-offset: 2px;
        }
      }

      span {
        display: inline-block;
        padding: 8px 16px;
        border: 1px solid var(--color-wall);
        border-radius: 4px;
        font-family: var(--tab-font);
        font-size: 14px;
        user-select: none;
        transition: all 0.24s ease;
        background-color: var(--color-white);
        color: var(--color-dark-matter);
      }
    }

    .pdp-form__quantity-wrapper {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .pdp-form__label {
      font-family: var(--heading-font-family);
      font-size: 14px;
      font-weight: 600;
      color: var(--color-dark-matter);
    }

    .pdp-form__submit-wrapper {
      width: 100%;
    }

    .pdp-form__submit {
      position: relative;
      width: 100%;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 4px;
      font-family: var(--button-font);
      font-weight: var(--button-font-weight, 600);
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.24s ease;

      &[disabled] {
        background-color: var(--color-wall);
        color: var(--color-wall-dark);
        cursor: not-allowed;
      }

      &[is-loading] {
        pointer-events: none;

        [data-submit-text] {
          visibility: hidden;
        }

        .pdp-form__spinner {
          visibility: visible;
          opacity: 1;
        }
      }
    }

    .pdp-form__spinner {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      width: 20px;
      height: 20px;
      border: 2px solid var(--color-white);
      border-right-color: transparent;
      border-radius: 50%;
      animation: pdp-spinner 0.6s linear infinite;
    }
  }

  @keyframes pdp-spinner {
    to {
      transform: rotate(360deg);
    }
  }
/* END_BLOCK:_c-pdp-form */

/* START_BLOCK:_c-pdp-installation-care (INDEX:97) */
.tff-pdp-details__item--install {
    border-bottom: 1px solid var(--color-wall, #e5e5e5);
  }
/* END_BLOCK:_c-pdp-installation-care */

/* START_BLOCK:_c-pdp-order-sample (INDEX:98) */
order-samples {
    display: block;
    margin-top: 40px;

    .order-samples__headline {
      h2 {
        font-family: var(--heading-font-family);
        font-weight: var(--heading-font-weight);
        font-size: 20px;
        line-height: 1;
        text-box: trim-both cap alphabetic;
        color: var(--color-dark-matter);
      }

       p {
        font-family: var(--text-font-family);
        font-weight: var(--text-font-weight);
        color: var(--color-dark-matter);
        font-size: 16px;
        line-height: 1.2;
        margin-top: 12px;
      }
    }

    .order-samples__sample-button {
      margin-block: 12px 48px;

      button {
        all: unset;
        cursor: pointer;
        background-color: var(--color-burnt-orange);
        font-family: var(--button-font);
        font-weight: var(--button-font-weight);
        color: var(--color-white);
        font-size: 15px;
        line-height: 15px;
        letter-spacing: 0px;
        border-radius: 3px;
        padding: 10px 12px 10px 10px;
        width: max-content;
        position: relative;
        transition: background-color 0.24s ease;
        display: grid;
        place-items: center;
        grid-template-areas: 'buttonstack';

        > span {
          grid-area: buttonstack;
          display: flex;
          gap: 4px;
          align-items: center;
        }

        > loader-box {
          grid-area: buttonstack;
          width: 20px;
          height: 20px;
          display: block;
          opacity: 0;
          border: 2px solid var(--color-white);
          border-right-color: transparent;
          border-radius: 50%;
          animation: sample-pdp-spinner 0.6s linear infinite;
        }

        &:hover {
          background-color: var(--color-tangerine);
        }

        &[processing] {
          cursor: wait;

          span {
            opacity: 0;
          }

          loader-box {
            opacity: 1;
          }
        }

        /* Mobile: full width, like the other PDP buttons */
        @media screen and (max-width: 767px) {
          box-sizing: border-box;
          width: 100%;
        }
      }
    }
  }

  @keyframes sample-pdp-spinner {
    to {
      transform: rotate(360deg);
    }
  }
/* END_BLOCK:_c-pdp-order-sample */

/* START_BLOCK:_c-pdp-request-quote (INDEX:99) */
request-a-quote {
    display: block;
    margin-top: 40px;

    h2 {
      font-family: var(--heading-font-family);
      font-weight: var(--heading-font-weight);
      font-size: 1.25rem;
      line-height: 1;
      color: var(--color-dark-matter);
    }

    p {
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      font-size: 1rem;
      line-height: 1.5;
      margin-top: 16px;
    }

    button {
       margin-top: 24px;
       font-size: 0.9375rem;
    }

    .quote-modal {
      border: none;
      padding: 0;
      background: transparent;
      overflow: visible;
      max-width: none;
      max-height: none;
      margin: auto;

      &::backdrop {
        background-color: rgba(0, 0, 0, 0.75);
      }
    }

    .quote-modal__content {
      position: relative;
      background-color: #ffffff;
      padding: 32px 24px 24px;
      border-radius: 4px;
      width: 90vw;
      max-width: 480px;
      max-height: 90vh;
      overflow-y: auto;
      box-sizing: border-box;
    }

    .quote-modal__close {
      position: absolute;
      top: 8px;
      right: 8px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      margin-top: 0;
      color: var(--color-dark-matter);
      outline: none;
      transition: opacity 0.2s ease;

      &:hover {
        opacity: 0.6;
      }

      svg {
        display: block;
        width: 20px;
        height: 20px;
      }
    }

    .quote-modal__intro {
      font-family: var(--text-font-family);
      font-size: 14px;
      line-height: 1.4;
      color: #333333;
      margin-top: 0;
      margin-bottom: 20px;
    }

    .quote-modal__form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .quote-modal__field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .quote-modal__label {
      font-family: var(--text-font-family);
      font-size: 13px;
      font-weight: 600;
      color: #1c1c1c;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .quote-modal__tooltip-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: rgb(182, 83, 18);
      color: #ffffff;
      font-size: 10px;
      font-style: normal;
      font-weight: bold;
      cursor: pointer;
      position: relative;
    }

    .quote-modal__tooltip {
      display: none;
      position: absolute;
      top: 24px;
      left: 0;
      width: 240px;
      padding: 10px 12px;
      background-color: #f2efe9;
      border: 1px solid #e0dad0;
      border-radius: 4px;
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      font-size: 0.6875rem;
      line-height: 1.4;
      color: #333333;
      z-index: 10;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .quote-modal__tooltip-trigger:hover .quote-modal__tooltip,
    .quote-modal__tooltip-trigger:focus .quote-modal__tooltip {
      display: block;
    }

    .quote-modal__input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--color-wall);
      border-radius: 3px;
      font-size: 14px;
      box-sizing: border-box;

      &:focus {
        outline: none;
        border-color: var(--color-tangerine);
      }
    }

    .quote-modal__submit {
      width: 100%;
      padding: 12px;
      margin-top: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
    }

    .quote-modal__alert {
      padding: 12px;
      border-radius: 3px;
      font-size: 13px;
      margin-bottom: 12px;

      &--success {
        background-color: #e8f4ec;
        color: #1e7e34;
        border: 1px solid #c3e6cb;
      }

      &--error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
      }
    }
  }
/* END_BLOCK:_c-pdp-request-quote */

/* START_BLOCK:_c-pdp-rogers-take (INDEX:100) */
rogers-take {
    display: block;
    background-color: var(--color-warm-frosting);
    padding: 32px;
    margin-top: 32px;

    h2 {
      font-family: var(--heading-font-family);
      font-weight: var(--heading-font-weight);
      font-size: 1.25rem;
      line-height: 1;
      color: var(--color-dark-matter);
    }

    p {
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      font-size: 1rem;
      line-height: 1.5;
      margin-top: 16px;
    }
  }
/* END_BLOCK:_c-pdp-rogers-take */

/* START_BLOCK:_c-pdp-specs (INDEX:101) */
.tff-pdp-details__item--specs {
    border-bottom: 1px solid var(--color-wall, #e5e5e5);
  }
/* END_BLOCK:_c-pdp-specs */

/* START_BLOCK:_c-shipping-returns (INDEX:103) */
.tff-pdp-details__item--shipping {
    border-bottom: 1px solid var(--color-wall, #e5e5e5);
  }
/* END_BLOCK:_c-shipping-returns */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:c-active-facets (INDEX:124) */
.c-active-facets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-block-end: 24px;
  }

  .c-facet-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background-color: var(--color-snow);
    border: 1px solid var(--color-dark-matter);
    border-radius: 4px;
    color: var(--color-dark-matter);
    font-family: var(--tab-font); /* Geist Mono 400 */
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;

    svg {
      flex: none;
      color: var(--color-slate);
      transition: color 0.24s ease;
    }

    &:hover svg {
      color: var(--color-tangerine);
    }
  }

  .c-active-facets__clear-wrap {
    margin-inline-start: auto;
  }

  .c-active-facets__clear {
    color: var(--color-dark-matter);
    font-family: var(--tab-font);
    font-weight: var(--tab-font-weight);
    font-size: 0.8125rem;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.24s ease;

    &:hover {
      color: var(--color-tangerine);
    }
  }

  @media screen and (max-width: 991px) {
    .c-active-facets {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      margin-inline: calc(var(--container-gutter) * -1);
      padding-inline: var(--container-gutter);

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .c-active-facets__clear-wrap {
      margin-inline-start: 8px;
    }
  }
/* END_SNIPPET:c-active-facets */

/* START_SNIPPET:c-cart-drawer-item (INDEX:125) */
.c-drawer-item {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    grid-template-areas:
      'media title total'
      'media vendor vendor'
      'media chips chips'
      'media qty remove'
      'media error error';
    column-gap: 14px;
    align-items: start;

    .c-drawer-item__media {
      grid-area: media;
      grid-row: 1 / -1;
      aspect-ratio: 1;
      background-color: var(--color-frost);

      img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .c-drawer-item__title {
      grid-area: title;
      font-family: var(--button-font-500);
      font-weight: var(--button-font-500-weight);
      font-size: 15px;
      line-height: 1.25;
      color: var(--color-dark-matter);
    }

    .c-drawer-item__total {
      grid-area: total;
      font-family: var(--button-font);
      font-weight: var(--button-font-weight);
      font-size: 15px;
      line-height: 1.25;
      text-align: end;
      color: var(--color-dark-matter);

      s {
        display: block;
        font-size: 12px;
        color: var(--color-gray);
      }
    }

    .c-drawer-item__vendor {
      grid-area: vendor;
      margin-top: 4px;
      font-family: var(--text-font-family);
      font-size: 13px;
      color: var(--color-slate);
    }

    .c-drawer-item__chip {
      grid-area: chips;
      justify-self: start;
      margin-top: 8px;
      padding: 5px 7px;
      font-family: var(--tab-font);
      font-size: 11px;
      line-height: 1;
      color: var(--color-dark-matter);
      background-color: var(--color-warm-frosting);
      border: 1px solid var(--color-wall);
      border-radius: 2px;
    }

    c-quantity {
      --c-quantity-size: 28px;

      grid-area: qty;
      margin-top: 12px;
    }

    .c-drawer-item__remove {
      all: unset;
      grid-area: remove;
      align-self: end;
      justify-self: end;
      cursor: pointer;
      font-family: var(--text-font-family);
      font-size: 12px;
      color: var(--color-slate);

      &:hover {
        color: var(--color-dark-matter);
      }

      &:focus-visible {
        outline: 2px solid var(--color-burnt-orange);
        outline-offset: 2px;
      }
    }

    .c-drawer-item__error {
      grid-area: error;
      margin-top: 18px;
      font-size: 13px;
      color: var(--color-no-red);
    }
  }
/* END_SNIPPET:c-cart-drawer-item */

/* START_SNIPPET:c-cart-line-item (INDEX:126) */
.c-line {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas: 'media info' 'pricing pricing';
    column-gap: 16px;

    .c-line__media {
      grid-area: media;
      aspect-ratio: 1;
      background-color: var(--color-frost);

      img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .c-line__info {
      grid-area: info;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }

    .c-line__title {
      font-family: var(--button-font-500);
      font-weight: var(--button-font-500-weight);
      font-size: 17px;
      line-height: 1.25;
      color: var(--color-dark-matter);
    }

    .c-line__vendor {
      font-family: var(--text-font-family);
      font-size: 14px;
      line-height: 1.2;
      color: var(--color-slate);
    }

    .c-line__chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 6px 0 0;
      padding: 0;
      list-style: none;

      li {
        margin: 0;
        font-family: var(--tab-font);
        font-size: 11px;
        line-height: 1;
        color: var(--color-dark-matter);
        background-color: var(--color-warm-frosting);
        border: 1px solid var(--color-wall);
        border-radius: 2px;
        padding: 6px 8px;
      }
    }

    .c-line__meta,
    .c-line__discount {
      font-family: var(--tab-font);
      font-size: 12px;
      line-height: 1.3;
      color: var(--color-slate);
      margin-top: 4px;
    }

    .c-line__remove {
      all: unset;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      font-family: var(--text-font-family);
      font-size: 13px;
      color: var(--color-slate);

      &:hover {
        color: var(--color-dark-matter);
      }

      &:focus-visible {
        outline: 2px solid var(--color-burnt-orange);
        outline-offset: 2px;
      }
    }

    .c-line__pricing {
      grid-area: pricing;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--color-wall);
    }

    .c-line__unit {
      font-family: var(--tab-font);
      font-size: 13px;
      color: var(--color-slate);
      max-width: 9ch;
    }

    c-quantity {
      --c-quantity-size: 40px;
    }

    .c-line__total {
      font-family: var(--button-font);
      font-weight: var(--button-font-weight);
      font-size: 20px;
      color: var(--color-dark-matter);

      text-align: end;

      s {
        display: block;
        font-size: 14px;
        color: var(--color-gray);
      }
    }

    .c-line__error {
      flex-basis: 100%;
      font-size: 13px;
      color: var(--color-no-red);
    }

    @media screen and (min-width: 700px) {
      grid-template-columns: 118px minmax(0, 1fr) auto;
      grid-template-areas: 'media info pricing';
      column-gap: 26px;

      .c-line__title {
        font-size: 19px;
      }

      .c-line__pricing {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: flex-start;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
      }

      .c-line__unit {
        max-width: none;
      }

      .c-line__total {
        margin-top: 8px;
      }
    }
  }
/* END_SNIPPET:c-cart-line-item */

/* START_SNIPPET:c-collection-card (INDEX:127) */
c-collection-card {
    display: flex;
    flex-direction: column;
    color: var(--color-dark-matter);

    .ccc__media {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background-color: var(--color-white);
    }

    .ccc__track {
      display: flex;
      height: 100%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      overscroll-behavior-x: contain;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .ccc__slide {
      flex: 0 0 100%;
      scroll-snap-align: start;

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .ccc__badge {
      position: absolute;
      inset-block-start: 16px;
      inset-inline-end: 16px;
      text-box: trim-start cap alphabetic;
      background-color: var(--color-snow);
      font-family: var(--tab-font);
      font-weight: var(--tab-font-weight);
      font-size: 0.75rem;
      line-height: 1;
      padding: 8px;
      border-radius: 2px;
      pointer-events: none;
    }

    .ccc__arrow,
    .ccc__quickview {
      display: none;
    }

    .ccc__details {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-block: 0.625rem;
      text-decoration: none;
      color: inherit;
    }

    .ccc__title {
      font-family: var(--text-font-800);
      font-weight: var(--text-font-800-weight);
      font-size: 1rem;
      line-height: 1.3;
    }

    /* Sits right under the title: cancels the details gap */
    .ccc__vendor {
      margin-block-start: -4px;
      font-family: var(--button-font);
      font-weight: var(--button-font-weight);
      font-size: 0.75rem;
    }

    .ccc__description {
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      font-size: 0.75rem;
    }
  }

  /* Desktop with a mouse: arrows and Quick View appear on hover */
  @media screen and (min-width: 768px) and (hover: hover) {
    c-collection-card {
      .ccc__arrow {
        display: grid;
        place-content: center;
        position: absolute;
        inset-block-start: 50%;
        width: 32px;
        height: 32px;
        margin-block-start: -16px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-white);
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.24s ease, color 0.24s ease;

        &:hover {
          color: var(--color-tangerine);
        }

        svg {
          width: 16px;
          height: auto;
          filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35));
        }

        &[hidden] {
          display: none;
        }
      }

      .ccc__arrow--prev {
        inset-inline-start: 8px;

        svg {
          transform: scaleX(-1);
        }
      }

      .ccc__arrow--next {
        inset-inline-end: 8px;
      }

      .ccc__quickview {
        display: flex;
        position: absolute;
        inset-inline: 16px;
        inset-block-end: 16px;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.24s ease;

        .button {
          pointer-events: auto;
          width: 100%;
        }
      }

      &:hover,
      &:focus-within {
        .ccc__arrow,
        .ccc__quickview {
          opacity: 1;
        }
      }
    }
  }
/* END_SNIPPET:c-collection-card */

/* START_SNIPPET:c-facets-sheet (INDEX:128) */
@media screen and (max-width: 991px) {
    /* .facets-drawer.drawer outranks the theme's .drawer::part(content) */
    .facets-drawer.drawer::part(content) {
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      max-width: none;
      height: auto;
      max-height: 85dvh;
      margin-inline-start: 0 !important;
      border-start-start-radius: 12px;
      border-start-end-radius: 12px;
      overflow: hidden;
    }
  }

  /* The sort popover is already a bottom sheet below 700px; just round its top */
  @media screen and (max-width: 699px) {
    #sort-by-popover::part(content) {
      border-start-start-radius: 12px;
      border-start-end-radius: 12px;
    }
  }
/* END_SNIPPET:c-facets-sheet */

/* START_SNIPPET:c-parallax (INDEX:131) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      [c-parallax] {
        view-timeline: --c-parallax block;
      }

      [c-parallax]:not([c-parallax="background"]) img {
        animation: c-parallax-pan linear both;
        animation-timeline: --c-parallax;
        animation-range: cover;
      }

      [c-parallax="background"] {
        animation: c-parallax-pan-background linear both;
        animation-timeline: --c-parallax;
        animation-range: cover;
      }
    }
  }

  /* Bottom of the image showing as the banner enters, top as it leaves: the image appears to move slower than the page */
  @keyframes c-parallax-pan {
    from { object-position: 50% 100%; }
    to { object-position: 50% 0%; }
  }

  @keyframes c-parallax-pan-background {
    from { background-position: 50% 100%; }
    to { background-position: 50% 0%; }
  }
/* END_SNIPPET:c-parallax */

/* START_SNIPPET:c-placeholder (INDEX:132) */
.c-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background-color: hsl(from rgb(var(--background)) h s calc(l - var(--c-placeholder-shade, 5)));
    transition: background-color 0.24s ease;

    .c-placeholder__mark {
      width: var(--c-placeholder-width, 22%);
      fill: hsl(from rgb(var(--background)) h s calc(l - 10));
    }

    .c-placeholder__accent {
      fill: color-mix(in oklab, var(--color-tangerine) 22%, hsl(from rgb(var(--background)) h s calc(l - 6)));
    }
  }
/* END_SNIPPET:c-placeholder */

/* START_SNIPPET:c-product-quickview (INDEX:134) */
pc-quickview {
    display: flex;
    flex-direction: column;

    .pcp__thumbnail {
      aspect-ratio: 4/5;
      min-height: 0;
      position: relative;
      background-color: var(--color-white);

      .pcp__thumbnail-link {
        display: block;
        height: 100%;
      }

      img {
        object-fit: cover;
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .pcp__badge {
      position: absolute;
      inset-block-start: 1rem;
      inset-inline-end: 1rem;
      text-box: trim-start cap alphabetic;
      background-color: var(--color-snow);
      font-family: var(--tab-font);
      font-weight: var(--tab-font-weight);
      font-size: 0.75rem;
      line-height: 1;
      padding: 8px;
      border: 1ps solid var(--color-dark-matter);
      border-radius: 2px;
      color: var(--color-dark-matter);
    }

    .pcp__details {
      flex: 1;
      padding-block: 0.625rem;

      &[padded] {
        padding: 0.625rem;
      }
    }

    .pcp__product-name {
      font-family: var(--text-font-800);
      font-weight: var(--text-font-800-weight);
      transition: opacity 0.24s ease;
    }

    .pcp__product-description {
      font-family: var(--text-font-family);
      font-weight: var(--text-font-weight);
      transition: opacity 0.24s ease;
    }

    .pcp__image-quickview {
      display: none;
    }

    .pcp__quickview {
      grid-area: pcpstack;

      button {
        display: flex;
        width: 100%;
        --button-background: 182 83 18;
      }
    }
  }

  @media screen and (max-width: 767px) {    
    pc-quickview {
      .pcp__details {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .pcp__quickview {
      }
    }
  }

  @media screen and (min-width: 768px) {
    pc-quickview {
      cursor: pointer;
      
      &:hover, &:focus-visible {
        .pcp__product-name, 
        .pcp__product-description {
          opacity: 0;
        }

        .pcp__quickview {
          opacity: 1;
        }
      }
      
      .pcp__details {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 'pcpstack';

        > * {
          transition: opacity 0.24s ease;
        }
      }

      .pcp__product-name {
        grid-area: pcpstack;
      }

      .pcp__quickview {
        grid-area: pcpstack;
        opacity: 0;
      }

      /* Quick View over the image: full width, 16px from the image's sides and bottom; the title stays visible */
      .pcp__image-quickview {
        display: block;
        position: absolute;
        inset-inline: 16px;
        inset-block-end: 16px;
        opacity: 0;
        transition: opacity 0.24s ease;

        .button {
          width: 100%;
        }
      }

      &:has(.pcp__image-quickview) {
        .pcp__details .pcp__quickview {
          display: none;
        }

        &:hover, &:focus-visible {
          .pcp__product-name,
          .pcp__product-description {
            opacity: 1;
          }

          .pcp__image-quickview {
            opacity: 1;
          }
        }
      }
    }
  }
/* END_SNIPPET:c-product-quickview */

/* START_SNIPPET:c-quantity (INDEX:135) */
c-quantity {
    --c-quantity-size: 36px;

    display: inline-grid;
    grid-template-areas: 'stack unit';
    width: fit-content;
    align-items: center;
    justify-items: center;
    position: relative;
    border: 1px solid var(--color-wall);
    background-color: var(--color-white);
    border-radius: 3px;
    transition: border-color 0.24s ease;

    &:focus-within {
      border-color: var(--color-tangerine);
    }

    quantity-buttons {
      display: flex;
      overflow: hidden;
      position: relative;
      grid-area: stack;
      transition: opacity 0.24s ease;

      > button[quantity-button] {
        all: unset;
        flex: 0 0 var(--c-quantity-size);
        display: block;
        width: var(--c-quantity-size);
        height: var(--c-quantity-size);
        cursor: pointer;
        touch-action: manipulation;
        transition: opacity 0.24s ease;

        button-icon {
          display: block;
          width: 100%;
          height: 100%;
          position: relative;
          transform-origin: center;
          transform: rotate(180deg);

          &:before,
          &:after {
            content: '';
            display: block;
            background-color: var(--color-dark-matter);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }

        &[add] button-icon {
          &:before {
            width: 32%;
            height: 1px;
          }

          &:after {
            width: 1px;
            height: 32%;
          }
        }

        &[subtract] button-icon:before {
          width: 32%;
          height: 1px;
        }

        &[disabled] {
          cursor: not-allowed;

          button-icon {
            &:before,
            &:after {
              background-color: var(--color-warm-frosting);
            }
          }
        }

        &:hover:not([disabled]),
        &:focus-visible:not([disabled]) {
          opacity: 0.64;
        }

        &:focus-visible {
          outline: none;
        }

        &:active:not([disabled]) button-icon {
          top: 1px;
        }
      }

      > input {
        all: unset;
        height: var(--c-quantity-size);
        font-family: var(--tab-font);
        font-weight: var(--tab-font-weight);
        font-size: 14px;
        color: var(--color-dark-matter);
        letter-spacing: 0px;
        text-align: center;
        appearance: textfield;
        cursor: default;
        transition: opacity 0.24s ease;
        border-radius: 0px;
        border-inline: 1px solid var(--color-wall);

        @supports (field-sizing: content) {
          field-sizing: content;
          min-width: var(--c-quantity-size);
          max-width: 96px;
        }

        @supports (not (field-sizing: content)) {
          width: var(--c-quantity-size);
        }

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
          appearance: none;
          margin: 0;
        }
      }
    }

    quantity-spinner {
      width: 10px;
      height: 10px;
      pointer-events: none;
      grid-area: stack;
      display: grid;
      grid-template-areas: 'spinnerstack';
      place-items: center;
      opacity: 0;
      transition: opacity 0.24s ease;

      &:before,
      &:after {
        content: '';
        grid-area: spinnerstack;
        box-sizing: border-box;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--color-tangerine);
        animation: c-quantity-spinner 2s linear infinite;
        transform-origin: center;
      }

      &:after {
        animation-delay: 1s;
      }
    }

    quantity-unit {
      grid-area: unit;
      align-self: stretch;
      display: grid;
      place-items: center;
      padding-inline: 8px;
      border-inline-start: 1px solid var(--color-wall);
      background-color: var(--color-cereal-milk);
      font-family: var(--tab-font);
      font-size: 10px;
      color: var(--color-slate);
    }

    quantity-limit {
      display: block;
      position: absolute;
      left: 50%;
      top: calc(100% + 4px);
      transform: translate(-50%, 10%);
      white-space: nowrap;
      font-size: 10px;
      letter-spacing: 0.72px;
      color: var(--color-burnt-orange);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.24s ease;
    }

    &[processing] {
      quantity-buttons {
        opacity: 0.24;
        pointer-events: none;
      }

      quantity-spinner {
        opacity: 1;
      }
    }

    &[at-limit] quantity-limit {
      opacity: 1;
    }
  }

  @keyframes c-quantity-spinner {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
/* END_SNIPPET:c-quantity */

/* START_SNIPPET:c-quickview (INDEX:136) */
product-quickview {
    .quick-view-modal {
      padding: 0;
      border: none;
      border-radius: 4px;
      background: #ffffff;
      max-width: 960px;
      max-height: 85vh;
      width: 90vw;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      margin: auto;
    }

    .quick-view-modal::backdrop {
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(3px);
    }

    .quick-view-modal__container {
      position: relative;
      width: 100%;
    }

    .quick-view-modal__close {
      position: absolute;
      top: 8px; /* 36px hit area around a 20px icon: puts the icon 16px from the edges */
      right: 8px;
      z-index: 10;
      background: transparent;
      border: none;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: color 0.2s ease;
    }

    .quick-view-modal__close:is(:hover, :focus-visible) {
      color: var(--color-tangerine);
      outline: none;
    }

    .quick-view-modal__content {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      min-height: 520px;
      max-height: 85vh;
    }

    /* Media Carousel Container */
    .quick-view-modal__media {
      position: relative;
      background-color: #f4f4f4;
      overflow: hidden;
      min-height: 0;
    }

    .quick-view-modal__carousel {
      display: flex;
      width: 100%;
      height: 100%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      scroll-marker-group: after;
    }

    .quick-view-modal__carousel::-webkit-scrollbar {
      display: none;
    }

    /* Prev/next arrows (same arrow as the collection cards), drawn as scroll buttons so no JS is needed */
    .quick-view-modal__carousel::scroll-button(left),
    .quick-view-modal__carousel::scroll-button(right) {
      content: "";
      position: absolute;
      top: 50%;
      width: 20px;
      height: 16px;
      margin-top: -8px;
      padding: 0;
      border: 0;
      background-color: var(--color-white);
      mask: url('data:image/svg+xml,<svg width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 9.82747H24.8889M16.7018 19.1608L24.8889 9.82747L16.7018 0.494141" stroke="%23000" stroke-width="1.95"/></svg>') no-repeat center / contain;
      cursor: pointer;
      z-index: 2;
      transition: opacity 0.24s ease, background-color 0.24s ease;
    }

    .quick-view-modal__carousel::scroll-button(left):hover:not(:disabled),
    .quick-view-modal__carousel::scroll-button(right):hover:not(:disabled) {
      background-color: var(--color-tangerine);
    }

    .quick-view-modal__carousel::scroll-button(left) {
      left: 16px;
      transform: scaleX(-1);
    }

    .quick-view-modal__carousel::scroll-button(right) {
      right: 16px;
    }

    .quick-view-modal__carousel::scroll-button(left):disabled,
    .quick-view-modal__carousel::scroll-button(right):disabled {
      opacity: 0;
      cursor: default;
    }

    .quick-view-modal__carousel::scroll-marker-group {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 2;
    }

    .quick-view-modal__slide {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      position: relative;
      scroll-snap-align: start;
    }

    .quick-view-modal__slide::scroll-marker {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .quick-view-modal__slide::scroll-marker:target-current {
      background-color: var(--color-burnt-orange);
      transform: scale(1.2);
    }

    .quick-view-modal__slide::scroll-marker:hover {
      background-color: var(--color-tangerine);
      transform: scale(1.2);
    }

    .quick-view-modal__slide img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    /* Details Column */
    .quick-view-modal__details {
      padding: 48px 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #1a1a1a;
      font-family: var(--text-font-family);
      overflow-y: auto;
    }

    .quick-view-modal__vendor {
      font-family: var(--eyebrow-font);
      font-weight: var(--eyebrow-font-weight);
      font-size: 13px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #333333;
      display: block;
      margin-bottom: 8px;
    }

    .quick-view-modal__title {
      font-family: var(--heading-font-family);
      font-weight: var(--heading-font-weight);
      font-style: var(--heading-font-style, normal);
      font-size: 32px;
      line-height: 1.02;
      text-transform: uppercase;
      margin: 0 0 8px 0;
      letter-spacing: -0.01em;
    }

    .quick-view-modal__subtitle {
      font-family: monospace, var(--text-font-family);
      font-size: 14px;
      color: #444444;
      margin: 0 0 20px 0;
    }

    /* Reviews row: commented out with its markup below
    .quick-view-modal__reviews {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #555555;
      margin-bottom: 24px;
    }

    .quick-view-modal__stars {
      color: #1a1a1a;
      letter-spacing: 1px;
    }

    .quick-view-modal__read-link {
      color: #c1510e;
      text-decoration: none;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: 12px;
    }

    .quick-view-modal__read-link:hover {
      text-decoration: underline;
    }
    */

    .quick-view-modal__description {
      font-size: 15px;
      line-height: 1.5;
      color: #333333;
      margin-bottom: 32px;
    }

    .quick-view-modal__button {
      display: block;
      width: 100%;
      text-align: center;
      font-family: var(--button-font);
      font-weight: var(--button-font-weight);
      font-size: 15px;
      text-decoration: none;
      --button-background: 182 83 18;
    }

    @media screen and (max-width: 767px) {
      .quick-view-modal__content {
        grid-template-columns: 1fr;
      }
      .quick-view-modal__media {
        aspect-ratio: 3 / 2;

        /* Large phones / small tablets: wider crop so the details keep enough room */
        @media screen and (min-width: 540px) {
          aspect-ratio: 2 / 1;
        }
      }
      .quick-view-modal__details {
        padding: 24px;
      }
    }
  }
/* END_SNIPPET:c-quickview */

/* START_SNIPPET:c-search-result-item (INDEX:137) */
/* Product result in the header search dropdown: square thumbnail + title, no price */
  .c-search-result {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    color: var(--color-dark-matter);

    .c-search-result__media {
      aspect-ratio: 1;
      overflow: hidden;
      background-color: var(--color-frost);

      img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform 0.4s ease;
      }
    }

    .c-search-result__title {
      font-family: var(--button-font-500);
      font-weight: var(--button-font-500-weight);
      font-size: 14px;
      line-height: 1.3;
    }

    &:hover,
    &:focus-visible {
      .c-search-result__title {
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      img {
        transform: scale(1.04);
      }
    }

    @media screen and (min-width: 992px) {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      gap: 12px;
    }
  }

  /* Header search dropdown (sections/predictive-search.liquid): tab and heading styles from c-filter-links */
  .predictive-search {
    .predictive-search__tabs [role='tab'],
    .predictive-search__category {
      font-family: var(--tab-font);
      font-weight: var(--tab-font-weight);
      font-size: 14px;
      line-height: 1.1;
      letter-spacing: 0;
      text-transform: uppercase;
      color: var(--color-dark-matter);
    }

    .predictive-search__tabs [role='tab'],
    .predictive-search__tabs [role='tab']:not([aria-selected='true']) {
      box-shadow: none;
      opacity: 1;
    }

    .predictive-search__tabs [role='tab'] {
      position: relative;
      padding-block-end: 8px;

      &:before {
        content: '';
        position: absolute;
        inset-block-end: 0;
        width: 100%;
        height: 2px;
        background: var(--color-tangerine);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.2s ease-in-out;
        pointer-events: none;
      }

      &[aria-selected='true']:before,
      &:hover:before,
      &:focus-visible:before {
        transform: scaleX(1);
      }
    }

    .predictive-search__category {
      padding-block-end: 8px;
      border-color: var(--color-wall);
    }

    .predictive-search__tabs::part(tab-list) {
      border-color: var(--color-wall);
    }

    .predictive-search__collections a span {
      font-family: var(--button-font-500);
      font-weight: var(--button-font-500-weight);
      font-size: 14px;
      line-height: 1.3;
      letter-spacing: 0;
      text-transform: none;
      color: var(--color-dark-matter);
    }

    .predictive-search__suggestions a {
      font-family: var(--text-font-family);
      font-size: 15px;
      color: var(--color-dark-matter);

      mark {
        color: var(--color-burnt-orange);
      }
    }
  }
/* END_SNIPPET:c-search-result-item */

/* START_SNIPPET:c-upsell-card (INDEX:140) */
.c-upsell {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background-color: var(--color-white);

    .c-upsell__media {
      width: 64px;
      height: 64px;
      display: block;
      background-color: var(--color-frost);

      img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .c-upsell__title {
      display: block;
      font-family: var(--button-font);
      font-weight: var(--button-font-weight);
      font-size: 15px;
      line-height: 1.25;
      color: var(--color-dark-matter);
    }

    .c-upsell__price {
      margin-top: 6px;
      font-family: var(--tab-font);
      font-size: 13px;
      color: var(--color-slate);
    }

    .c-upsell__add {
      all: unset;
      cursor: pointer;
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border: 1px solid var(--color-wall);
      border-radius: 50%;
      font-size: 18px;
      color: var(--color-dark-matter);

      &:hover {
        border-color: var(--color-dark-matter);
      }

      &:focus-visible {
        outline: 2px solid var(--color-burnt-orange);
        outline-offset: 2px;
      }
    }
  }
/* END_SNIPPET:c-upsell-card */