:root {
  --heading-font-family: Montserrat, sans-serif;
}

#matisse-returns-and-exchange-policy,
#matisse-affiliate-program,
#about-the-matisse-footwear-company,
#los-angeles-onsite-pickup,
#frequently-asked-questions-about-matisse-footwear,
#contact-us,
.index-page { 
  .container {
    font-family: var(--heading-font-family);
  }
  .Container, .hero__content__wrapper {
    max-width: 1200px;
    margin: 0 auto;
  }
  .Container {
    padding: 50px 15px;
    max-width: 800px;
    @media only screen and (max-width: 749px) {
      padding: 30px 15px;
    }
  }
  h1 {
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .2em; 
    margin-bottom: 25px;
    font-family: var(--heading-font-family);
  }
  p {
    margin-bottom: 25px;
    font-size: 14px;
    line-height: 1.5;
  }
  .returns-top, .affiliates-top {
    padding: 75px 15px;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
  }

  .affiliates-top {
    max-width: 1200px;
  }

  .button {
    font-size: 13px;
    padding: 10px 20px;
    text-transform: uppercase;
    letter-spacing: .2em;
    display: inline-block;
    font-weight: 500;
    &.button-primary {
      background-color: #000;
      color: #fff;
    }
  }

  .accordion {
    border: none;
    p {
      margin-bottom: 10px;
    }
  }
  .section-faq__title {
    @media only screen and (max-width: 749px) {
      font-size: 14px;
    }
  }

  .icon-nav-arrow-down {
    top: 22px;
  }
  .accordion__title {
    padding: 10px 15px 10px 30px;
    font-size: 16px;
    line-height: 1.5;

    @media only screen and (max-width: 749px) {
      font-size: 14px;
    }
  }
  .icon-nav-arrow-down {
    path {
      opacity: 1;
    }
  }
  .accordion__content {
    padding: 0 15px 15px 30px;
    line-height: 1.5;
  }
  .widget__links {
    list-style: none;
    li {
      margin-bottom: 10px;
      padding: 0;
      button {
        position: relative;
        padding-inline: 0;
        &.is-selected {
          &::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #000;
          }
        }
        
      }
    }
  }

  .contact-form-template {
    display: flex;
    flex-direction: column;
    label {
      display: none;
    }
    .Form__Group {
      display: flex;      
      gap: 10px;
      width: 100%;
      .Form__Item {
        width: 100%;
      }
    }
    input, textarea {
      width: 100%;
    }
  }
  .Alert {
    &.Alert--success{
      background-color: #cfffcf;
      color: #000;
      padding: 10px 15px;
      border-radius: 5px;
      margin-bottom: 20px;
    }
  }
}

.about-top {
  padding: 75px 15px;
  text-align: center;
  @media only screen and (max-width: 749px) {
    padding: 30px 15px;
  }
}

#about-the-matisse-footwear-company {
  --font-family:   var(--heading-font-family);
  * {
    font-family: var(--font-family);
  }
  .image-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    > * {
      width: 100%;
    }
    @media only screen and (max-width: 749px) {
      grid-template-columns: 1fr;
    }
    &.inverted {
      @media only screen and (max-width: 749px) {
        display: flex;
        flex-direction: column-reverse;
      }
    }

    .image-text__media {
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .image-text__content {
      background-color: #f9f6f0;
      padding: 30px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      .button-container {
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
        @media only screen and (max-width: 749px) {
          align-items: center;
          flex-direction: column;
        }
        .button-container__item {
          width: 100%;
        }
      }
      &.text-center {
        text-align: center;
      }
      @media only screen and (max-width: 749px) {
        padding: 15px;
      }
      img {
        width: calc(100% + 60px);
        margin-left:-30px;
        margin-right: -30px;
        @media only screen and (max-width: 749px) {
          margin-left: 0;
          margin-right: 0;
          width: 100%;
        }
      }
      
      p {
        font-size: 14px;
        line-height: 1.8;
      }
    }
  }
  .styled-title {
    font-size: clamp(24px, 4.1vw, 30px);
    font-weight: 500;
    margin-bottom: 20px;
    text-align: left;
    position: relative; 
    &::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 25px;
      height: 3px;
      background-color: #000;
    }
  }

  .bg-container {
    background-color: #f9f6f0;
    padding: 30px;
    @media only screen and (max-width: 749px) {
      padding: 15px;
    }
  }
}

.desktop-image {
  display: block;
}

.mobile-image {
  display: none;
}

.image-full-width {
  width: 100%;
  margin: 15px 0;
}

@media only screen and (max-width: 749px) {
  .desktop-image {
    display: none;
  }
  .mobile-image {
    display: block;
  }
}

.snap-slider-wrap {
  --gap: 12px;
  --peek: 0px;
  --arrow-size: 30px;
  --arrow-bg: rgba(60, 58, 52, 0.62);
  --arrow-color: #fff;
  --arrow-font-size: 18px;

  position: relative;
}

.snap-slider {
  display: grid;
  grid-auto-flow: column;
  gap: var(--gap);

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;

  /* mobile: 1 + 30px peek */
  grid-auto-columns: calc(100% - var(--peek));
  padding-right: var(--peek);

  scrollbar-width: none;
}

.snap-slider.one-column,
.snap-slider-wrap.one-column .snap-slider {
  grid-auto-columns: calc(100% - var(--peek));
}
.snap-slider::-webkit-scrollbar {
  display: none;
}

.snap-slider > * {
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: block;
}

.snap-slider > a {
  color: inherit;
  text-decoration: none;
}

.snap-slider > img,
.snap-slider > a > img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* desktop: 2 + 30px peek */
@media (min-width: 990px) {
  .snap-slider {
    grid-auto-columns: calc((100% - var(--gap) - var(--peek)) / 2);
  }

  .snap-slider.one-column,
  .snap-slider-wrap.one-column .snap-slider {
    grid-auto-columns: calc(100% - var(--peek));
  }
}

/* Arrow style */
.snap-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--arrow-size);
  height: var(--arrow-size);
  border: 0;
  border-radius: 999px;
  background: var(--arrow-bg);
  color: var(--arrow-color);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(1px);
}

.snap-arrow > span {
  font-size: var(--arrow-font-size);
  line-height: 1;
  margin-top: -4px; /* optical centering */
}

.snap-arrow--prev {
  left: 16px;
}
.snap-arrow--next {
  right: 16px;
}

.snap-arrow:hover:not([disabled]) {
  transform: translateY(-50%) scale(1.03);
}

.snap-arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* optional: smaller arrows on very small screens */
@media (max-width: 640px) {
  .snap-slider-wrap {
    --arrow-size: 25px;
    --arrow-font-size: 15px;
  }
}

.center-mobile {
  @media only screen and (max-width: 749px) {
    text-align: center;
  }
}