@import url("https://use.typekit.net/zvs8nbk.css");

/* import fonts from assets folder, like `AzoSuper.otf` */
@font-face {
  font-family: "AzoSuper";
  src: url("AzoSuper.woff2") format("woff2"),
    url("AzoSuper.woff") format("woff"), url("AzoSuper.otf") format("opentype");
}

/* set global variables */
:root {
  /* color */
  --black: #000000;
  --red: #cb1517;
  --cream: #ebe5d4;
  --gold: #c0a969;

  /* font */
  --font-azo-super: "AzoSuper", sans-serif;
  --font-obviously: "obviously", sans-serif;

  /* size */
  --site-max-width: 1440px;
}

body {
  font-family: var(--font-azo-super);

  h2 {
    font-family: var(--font-azo-super);
  }
}

/* custom header */
.section-header[id$="header"] {
  z-index: 5;
}
.header {
  max-width: var(--site-max-width);
  background-color: var(--red);
  padding: 20px 60px !important;

  @media (max-width: 600px) {
    padding: 20px 24px !important;
  }

  * {
    color: var(--cream);
  }

  nav.header__inline-menu {
    margin-left: 0;

    ul.list-menu {
      gap: 48px;

      li {
        a {
          font-family: var(--font-obviously);
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 130%;
          letter-spacing: 2.52px;
          text-transform: uppercase;
          padding-inline: 0;
        }
      }
    }
  }

  h1.header__heading {
    a {
      padding: 0;

      .custom-header__logo-wrapper {
        display: flex;
        padding: 0;

        img {
          width: 100px;
          height: 100px;
          object-fit: contain;
        }
      }
    }
  }

  .header__icons.header__icons--localization.header-localization {
    justify-content: flex-end;
    align-items: center;
    gap: 48px;
    padding: 0;

    .desktop-localization-wrapper,
    .header__search {
      display: none;
    }

    a.custom-header__right-menu {
      font-family: var(--font-obviously);
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 130%;
      letter-spacing: 2.52px;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0;

      &:hover {
        text-decoration: underline;
      }

      @media (max-width: 989px) {
        display: none;
      }
    }

    .header__icon--cart {
      margin: 0;
      transition: all 0.3s ease-in-out;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  header-drawer {
    details {
      #menu-drawer {
        background-color: var(--red);
        padding: 20px 60px;
        max-width: 100%;
        width: 100%;

        ul {
          gap: 48px;

          li {
            a {
              font-family: var(--font-obviously);
              font-size: 24px;
              font-style: normal;
              font-weight: 400;
              line-height: 120%;
              text-transform: uppercase;
              padding-inline: 0;
            }
          }
        }
      }
    }
  }
}

/* custom footer */
.shopify-section.shopify-section-group-footer-group {
  .footer {
    max-width: var(--site-max-width);
    margin-inline: auto;
    background-color: var(--red);
    padding: 90px 60px;

    @media (max-width: 600px) {
      padding: 60px 24px;
    }

    .custom-footer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 56px;

      * {
        max-width: 823px;
        text-align: center;
        margin: 0;
        color: var(--cream);
      }

      .custom-footer__heading {
        span {
          font-family: var(--font-azo-super);
          font-size: 52px;
          font-style: normal;
          font-weight: 900;
          line-height: 150%;
          text-transform: uppercase;

          @media (max-width: 600px) {
            font-size: 48px;
          }
        }
      }

      .custom-footer__description {
        font-family: var(--font-obviously);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: 0.56px;
        text-transform: none;
        max-width: 600px;
      }

      .custom-footer__img-wrapper {
        width: 100px;
        height: 92px;

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

      .custom-footer__links {
        display: flex;
        gap: 12px;
      }

      .custom-footer__caution {
        font-family: var(--font-obviously);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 145%;
        letter-spacing: 0.7px;
        text-transform: none;
      }
    }

    .footer__content-top,
    .footer__content-bottom {
      display: none;
    }
  }
}

/* shop-homepage hero */
.shop-homepage-hero {
  max-width: var(--site-max-width);
  margin-inline: auto;
  background-color: var(--cream);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 192px 60px;

  @media (max-width: 600px) {
    padding: 88px 24px;
  }

  .shop-title-wrapper {
    width: 100%;
    max-width: min(983px, 68.26vw);

    @media (max-width: 600px) {
      max-width: min(410px, 90vw);
    }

    .hero-title {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

/* borghetti slider */
.borghetti-slider {
  max-width: var(--site-max-width);
  margin-inline: auto;
  padding: 100px 0 60px;
  background-color: var(--cream);

  @media (max-width: 600px) {
    padding-block: 48px;
  }

  .borghetti-slider__title {
    color: var(--red);
    font-family: var(--font-azo-super);
    font-size: 96px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 48px;
    max-width: 1320px;
    padding-inline: 60px;
    margin: 16px auto;

    p {
      margin: 0;
    }

    @media screen and (max-width: 1200px) {
      font-size: 54px;
    }
    @media screen and (max-width: 900px) {
      font-size: 48px;
    }
    @media screen and (max-width: 600px) {
      padding-inline: 24px;
    }
  }

  .swiper {
    width: 100%;
    padding: 50px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    @media (max-width: 600px) {
      padding: 50px 0px 0px;
    }

    .swiper-wrapper {
      width: 100%;
      margin-inline: auto;

      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: calc(100% - 120px);
        height: auto;
        aspect-ratio: 3/2;
        border: 6px solid var(--gold);
        border-radius: 16px;
        overflow: hidden;

        @media (max-width: 600px) {
          height: 358px;
        }

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

/* custom featured collection */
div[id$="product-grid"],
section[id$="featured_collection"] {
  .custom-featured-collection {
    background-color: var(--red);
    max-width: var(--site-max-width);
    margin-inline: auto;
    padding: 132px 60px;

    @media (max-width: 600px) {
      padding: 48px 24px 34px;
    }

    .collection {
      padding: 0;

      slider-component {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
      }

      ul {
        margin: 0;
        overflow: hidden;

        li {
          display: block;

          @media (max-width: 989px) {
            margin-bottom: 14px;
          }

          .card-wrapper {
            width: 100%;
            height: 100%;
            border: 3px solid var(--gold);
            border-radius: 8px;
            overflow: hidden;
            background-color: var(--black);

            .card-image {
              height: 428px;
              background-color: var(--cream);

              @media (max-width: 600px) {
                height: 360px;
              }

              .image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.3s ease-in-out;

                @media (max-width: 989px) {
                  object-fit: contain;
                }

                @media (max-width: 600px) {
                  object-fit: cover;
                }

                &:hover {
                  transform: scale(1.05);
                }
              }
            }

            .card-content {
              border-top: 3px solid var(--gold);
              padding: 40px;
              height: calc(100% - 428px);
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
              row-gap: 32px;

              @media (max-width: 989px) {
                height: auto;
              }

              * {
                margin: 0;
              }

              h3 {
                min-height: 104px;
                text-align: center;

                a {
                  color: var(--cream);
                  font-family: var(--font-azo-super);
                  font-size: 48px;
                  font-style: normal;
                  font-weight: 900;
                  line-height: 110%;
                  text-transform: uppercase;
                  text-decoration: none;
                  transition: color 0.3s ease-in-out;
                  word-break: keep-all;

                  @media (max-width: 900px) {
                    font-size: 32px;
                  }

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

              .card-btn {
                background-color: var(--black);
                border: none;
                cursor: pointer;
                display: flex;
                padding: 16px 24px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                border-radius: 8px;
                background: var(--cream);
                transition: all 0.3s ease-in-out;

                &:hover {
                  background-color: var(--gold);

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

                span {
                  color: var(--red);
                  font-family: var(--font-obviously);
                  font-size: 24px;
                  font-style: normal;
                  font-weight: 700;
                  line-height: normal;
                  text-transform: uppercase;
                  text-align: center;

                  @media (max-width: 600px) {
                    font-size: 20px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* /products/borghetti */
.products-borghetti {
  /* product-borghetti hero */
  .product-borghetti-hero {
    max-width: var(--site-max-width);
    margin-inline: auto;
    background-color: var(--cream);
    position: relative;

    * {
      color: var(--red);
      margin: 0;
    }

    .product-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-content: space-between;
      padding: 75px 60px 0;
      min-height: 900px;

      @media (max-width: 900px) {
        padding: 50px 60px 0;
        grid-template-columns: 1fr;
        row-gap: 40px;
      }

      @media (max-width: 600px) {
        padding: 50px 24px 0;
      }

      .product-info {
        max-width: 652px;
        padding-bottom: 100px;
        display: grid;
        row-gap: 40px;

        @media (max-width: 900px) {
          padding-bottom: 0;
        }

        @media (max-width: 900px) {
          max-width: 100%;
        }

        h1.product-title {
          font-family: var(--font-azo-super);
          font-size: 64px;
          font-style: normal;
          font-weight: 900;
          line-height: 105%;
          text-transform: uppercase;

          @media (max-width: 1200px) {
            font-size: 58px;
          }

          @media (max-width: 600px) {
            font-size: 48px;
          }

          @media (max-width: 360px) {
            font-size: 40px;
          }
        }
        div.product-description {
          h2 {
            font-family: var(--font-obviously);
            font-size: 24px;
            font-style: normal;
            font-weight: 650;
            line-height: normal;
            text-transform: uppercase;
            margin-bottom: 40px;
          }

          p {
            font-family: var(--font-obviously);
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 124%;
            letter-spacing: 0.4px;
          }
        }

        .product-price {
          font-family: var(--font-azo-super);
          font-size: 48px;
          font-style: normal;
          font-weight: 900;
          line-height: 110%;
          text-transform: uppercase;
        }

        .add-to-cart-btn {
          display: flex;
          padding: 16px 24px;
          justify-content: center;
          align-items: center;
          gap: 10px;
          border-radius: 8px;
          background-color: var(--red);
          text-align: center;
          font-family: var(--font-obviously);
          font-size: 24px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          text-transform: uppercase;
          border: none;
          cursor: pointer;

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

          @media (max-width: 900px) {
            width: 100%;
          }
        }

        .find-near-you-btn {
          font-family: var(--font-obviously);
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: 124%;
          letter-spacing: 0.4px;
          text-decoration-line: underline;

          @media (max-width: 900px) {
            text-align: center;
          }
        }
      }

      .product-image {
        position: relative;

        img {
          position: absolute;
          bottom: calc(0% - 10px);
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          max-width: 264px;
          height: auto;
          object-fit: contain;
          z-index: 3;

          @media (max-width: 900px) {
            position: relative;
            bottom: 32px;
          }
        }
      }
    }

    .bottom-triange {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 77px;
      clip-path: polygon(0 0, 100% 80%, 100% 100%, 0 100%);
      background-color: var(--red);
      z-index: 2;
    }
  }

  /* borghetti video */
  .video-section {
    max-width: var(--site-max-width);
    padding-inline: 0;
    margin-top: -4px;

    deferred-media {
      border: none;
    }
  }

  /* borghetti-recipe */
  .borghetti-recipe {
    max-width: var(--site-max-width);
    margin-inline: auto;
    padding: 110px 60px 250px;
    background-color: var(--cream);
    position: relative;

    @media (max-width: 600px) {
      padding: 50px 24px 150px;
    }

    .borghetti-recipe-heading {
      margin-bottom: 160px;

      @media (max-width: 900px) {
        margin-bottom: 100px;
      }

      @media (max-width: 600px) {
        margin-bottom: 48px;
      }

      * {
        color: var(--red);
        margin: 0;
      }

      .borghetti-recipe__title {
        text-align: center;
        font-family: var(--font-azo-super);
        font-size: 250px;
        font-size: min(250px, 17.35vw);
        font-style: normal;
        font-weight: 900;
        line-height: 100%;
        letter-spacing: -7.541px;
        text-transform: uppercase;

        @media (max-width: 1200px) {
          font-size: 150px;
        }
        @media (max-width: 900px) {
          font-size: 92px;
          letter-spacing: -5px;
        }
        @media (max-width: 600px) {
          font-size: 61px;
          letter-spacing: -3px;
        }
        @media (max-width: 360px) {
          font-size: 50px;
          letter-spacing: -2px;
        }
      }

      .borghetti-recipe__subheading {
        text-align: center;
        font-family: var(--font-azo-super);
        font-size: 64px;
        font-style: normal;
        font-weight: 900;
        line-height: 1.65;
        margin-top: 32px;
        @media (max-width: 900px) {
          font-size: 28px;
        }
        @media (max-width: 600px) {
          font-size: 24px;
        }
      }
    }

    .borghetti-recipe-grid {
      max-width: 1100px;
      margin-inline: auto;
      display: grid;
      grid-template-columns: 493px 574px;
      gap: 32px;
      justify-content: space-between;

      @media (max-width: 1200px) {
        grid-template-columns: 1fr 1fr;
      }

      @media (max-width: 900px) {
        grid-template-columns: 1fr;
      }

      .borghetti-recipe__image {
        width: 100%;
        height: 100%;

        .img-wrapper {
          border: 3px solid var(--gold);
          border-radius: 16px;
          overflow: hidden;
          display: flex;
          max-height: 523px;

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

      .borghetti-recipe__content {
        height: fit-content;
        display: flex;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        border-radius: 16px;
        border: 2px solid var(--gold);
        background: var(--cream);

        * {
          margin: 0;
        }

        h4 {
          color: var(--red);
          font-family: var(--font-azo-super);
          font-size: 24px;
          font-style: normal;
          font-weight: 900;
          line-height: 110%;
          text-transform: uppercase;
          margin-bottom: 32px;
        }
        p,
        li {
          color: var(--black);
          font-family: var(--font-obviously);
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 125%;
          letter-spacing: 0.28px;
          margin-bottom: 24px;

          a {
            color: var(--black);
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
        .borghetti-recipe__what-you-need {
          border-bottom: 2px solid var(--gold);
          padding-bottom: 32px;
        }
        .borghetti-recipe__how-to-make {
          .borghetti-recipe__steps {
            ol {
              list-style-type: none;
              counter-reset: list-counter;
              padding-left: 0;

              li {
                counter-increment: list-counter;
                position: relative;
                padding-left: 43px;

                &::before {
                  content: "";
                  position: absolute;
                  top: calc(50% - 12px);
                  left: 0;
                  width: 28px;
                  height: 28px;
                  background-color: var(--gold);
                  border-radius: 50%;
                }

                &::after {
                  content: counter(list-counter);
                  position: absolute;
                  top: calc(50% - 14px);
                  left: 0;
                  width: 28px;
                  height: 28px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  text-align: center;
                  font-family: var(--font-obviously);
                  font-size: 16px;
                  font-style: normal;
                  font-weight: 670;
                  line-height: 100%;
                  letter-spacing: 0.32px;
                }
              }
            }
          }
        }
      }
    }

    .bottom-triange {
      content: "";
      display: block;
      position: absolute;
      bottom: calc(0% - 1px);
      left: 0;
      width: 100%;
      height: 107px;
      clip-path: polygon(0 70%, 100% 0%, 100% 100%, 0 100%);
      background-color: var(--red);
      z-index: 2;
    }
  }
}

.age-gate {
  background-color: var(--red);
  background-image: url("./21plus-desktop.jpg");
  background-size: cover;
  background-position: center center;
  position: fixed;
  z-index: 14;
  width: 100%;
  height: 100%;
  display: none;

  @media screen and (max-width: 900px) {
    background-image: url("./21plus-mobile.jpg");

    img {
      max-width: 220px;
    }
  }

  .age-gate__content {
    padding: 60px;

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

    h2 {
      color: var(--cream);
      font-size: 64px;
      line-height: 66px; /* 103.125% */
      text-transform: uppercase;
      max-width: 660px;
      margin: 48px 0 32px;

      @media screen and (max-width: 900px) {
        font-size: 40px;
        line-height: 44px;
        text-transform: uppercase;
      }
    }
  }

  .age-gate__buttons {
    display: flex;
    gap: 1rem;

    button {
      border-radius: 8px;
      border: 2px solid var(--cream);
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      text-transform: uppercase;
      font-family: "obviously-wide";
      font-size: 24px;
      color: var(--cream);
      width: 160px;
      height: 70px;
      padding-bottom: 6px;
      cursor: pointer;

      @media screen and (max-width: 900px) {
        font-size: 16px;
        width: 143px;
        height: 57px;
      }

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

  p {
    position: absolute;
    bottom: 1rem;
    max-width: 750px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 var(--side-padding);
    font-size: 14px;
    font-style: normal;
    line-height: 145%; /* 20.3px */
    letter-spacing: 0.7px;
    text-transform: uppercase;
    font-family: "obviously-narrow", sans-serif;
    color: var(--red);
    text-align: center;
    width: 100%;

    @media screen and (max-width: 900px) {
      font-size: 12px;
      line-height: 116%;
      letter-spacing: 0.24px;
    }
  }
}