/** Shopify CDN: Minification failed

Line 933:7 Cannot use type selector "--success" directly after nesting selector "&"
Line 939:7 Cannot use type selector "--error" directly after nesting selector "&"

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