.goto-products {
  .product-card-swatch.is-disabled {
      opacity: .4;
      position: relative
  }
  .product-card-swatch.is-disabled::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -20%;
      right: -20%;
      height: 2px;
      background-color: #dad4d0;
      transform: translateY(-50%) rotate(45deg);
      z-index: 10
  }
  background-color:#171717;
  .product__accordion-container {
      max-width: 1000px;
      margin: 45px auto 0 auto;
      padding: 4px;
      @media screen and (max-width: 768px) {
          margin:12px auto 0 auto
      }
  }
  .badge-goto-stock {
      display: none !important
  }
  .product-secondary-image {
      display: none !important
  }
  .product-primary-image {
      opacity: 1 !important
  }
  .btn-goto {
      background-color: #fff;
      color: #000;
      padding: .5rem 1rem;
      border-radius: .5rem;
      text-decoration: none;
      display: inline-block;
      font-size: 12px;
      font-weight: 800;
      font-family: "Urbanist";
      box-shadow: 0 4px 4px 0 #00000040;
      margin-top: auto;
      @media screen and (min-width: 768px) {
          font-size:28px
      }
      &:hover {
          background-color: #333;
          color: #fff;
          text-decoration: none
      }
  }
  @media only screen and (max-width:768px) {
      right: 20px;
      top: 20px;
      .product-card .badge {
          right: 8px;
          left: auto !important
      }
  }
  .products {
      @media screen and (min-width: 1068px) {
          justify-content:center
      }
  }
  .product-featured-image {
      border-radius: 20px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
      mask-image: linear-gradient(to bottom, black 90%, transparent 100%)
  }
  .badge-goto {
      position: absolute;
      z-index: 30;
      display: inline-flex;
      align-items: center;
      border-radius: var(--badge-corner-radius, 50px);
      text-transform: uppercase;
      font-size: 8px;
      letter-spacing: .05em;
      font-weight: var(--font-body-bold-weight, 600);
      height: 23px;
      padding: 0 10px;
      line-height: 0;
      left: 3px;
      top: 4px;
      svg {
          margin-right: 5px
      }
      @media screen and (min-width:768px) {
          font-size: 14px;
          padding: 16px;
          border-radius: 30px;
          margin: 10px;
          svg {
              width: 15px;
              height: 15px;
              path {
                  fill: black
              }
          }
      }
  }
  .badge-goto-stock {
      background: #ff8bd5;
      color: #171717
  }
  .badge-goto-stock-limited {
      background: #ff8bd5;
      color: #171717
  }
  .badge-goto-stock-low {
      background: #ff8bd5;
      color: #000
  }
  .badge-goto-stock-new-arrival {
      background: linear-gradient(90deg, #a4b0c4 0%, #e6b8d7 33%, #dde09f 66%, #c4cab5 100%);
      color: #171717
  }
  .badge-spring-high-demand {
      background: #252525;
      color: #fff;
      svg {
          path {
              fill: #fff !important
          }
      }
  }
  .product-card .badge {
      right: 3px;
      top: 4px !important;
      left: auto !important;
      font-size: 8px;
      margin: 16px;
      @media screen and (min-width: 768px) {
          font-size:14px;
          padding: 16px;
          border-radius: 30px;
          margin: 10px
      }
  }
  .product-card .product-featured-image-link {
      padding-bottom: 80%
  }
  .product-card-swatch-label {
      position: absolute;
      top: -11px;
      left: 26px;
      color: white !important;
      padding: 6px 2px;
      font-size: 10px;
      text-transform: uppercase;
      font-weight: bold;
      z-index: 5
  }
  .product-card-swatches .product-card-swatch {
      width: 21px;
      height: 21px;
      border-radius: 15px;
      box-shadow: 0 0 0 1px #f5f5f5 inset;
      @media screen and (min-width: 768px) {
          width:50px;
          height: 50px;
          border-radius: 30px
      }
  }
  .product-card-swatches .product-card-swatch.active {
      box-shadow: 0 0 0 2px #000 inset
  }
  .product-card-swatches .product-card-swatch:after {
      border-radius: 30px
  }
  .product-card-swatches--container {
      display: flex;
      overflow: visible;
      height: auto;
      margin-bottom: 36px
  }
  .card-variant-name {
      font-family: Urbanist;
      font-weight: 500;
      font-size: 12px;
      color: #f5f5f5;
      padding-top: 17px;
      @media screen and (min-width: 768px) {
          padding-top:36px;
          font-size: 20px;
          margin: 0 auto
      }
      strong {
          font-size: 20px;
          @media screen and (max-width: 768px) {
              font-size:12px
          }
      }
  }
  .product-card-swatches {
      background-color: #343434;
      border-radius: 30px;
      width: fit-content;
      right: 0;
      margin: 0 auto;
      padding: 2px;
      position: relative;
      text-align: center
  }
  .product-card-info a {
      color: #f5f5f5;
      font-family: "Urbanist", sans-serif;
      font-weight: 400;
      font-size: 16px;
      text-transform: none;
      pointer-events: none;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 50px;
      @media screen and (min-width: 768px) {
          height:110px;
          font-size: 32px;
          margin: 0 auto
      }
  }
  .price {
      @media screen and (min-width: 768px) {
          margin:0 auto
      }
  }
  .price del {
      font-size: 20px;
      opacity: .5;
      @media screen and (min-width: 768px) {
          font-size:30px
      }
  }
  .price del .amount {
      font-family: Urbanist;
      font-weight: 400;
      font-size: 20px;
      text-transform: uppercase;
      color: #f5f5f5;
      opacity: 1;
      @media screen and (min-width: 768px) {
          font-size:30px
      }
  }
  .price ins .amount {
      color: #f5f5f5;
      font-family: Urbanist;
      font-weight: 700;
      font-size: 20px;
      text-transform: uppercase;
      .from {
          display: none
      }
      @media screen and (min-width:768px) {
          font-size: 30px
      }
  }
  .featured-collection__inner {
      margin: 0 auto;
      padding-top: 20px;
      @media screen and (min-width: 768px) {
          max-width:1000px;
          padding-top: 50px
      }
      .product-card-swatches .product-card-swatch {
          margin: 3px 2px;
          @media screen and (min-width: 768px) {
              margin:4px
          }
      }
      .product-card-swatches .product-card-swatch:after {
          top: 1px;
          left: 1px;
          right: 1px;
          bottom: 1px
      }
      .product-card-swatch-label {
          top: -8px;
          left: 28px;
          padding: 6px 2px;
          @media screen and (max-width: 768px) {
              left:10px;
              font-size: 6px;
              padding: 4px 1px
          }
      }
  }
  .featured-collection__header {
      .section-divider {
          text-align: center;
          font-size: 1.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 1rem 0;
          color: white;
          @media screen and (min-width: 768px) {
              margin-bottom:40px
          }
      }
      .section-divider__line {
          margin-left: 0;
          flex: 1;
          height: 2px;
          background: linear-gradient(to right, #aab2cd, #dce19c, #e6b7d9, #6da9b2);
          position: relative;
          bottom: 0;
          left: 0;
          @media screen and (min-width: 768px) {
              height:6px;
              margin-left: -35px
          }
      }
      .section-divider__line--reversed {
          transform: scaleX(-1);
          right: 0;
          left: auto;
          @media screen and (min-width: 768px) {
              height:6px;
              margin-left: -35px;
              right: -40px
          }
      }
      .section-divider__title {
          margin: 0 8px;
          font-family: Tenor Sans;
          font-weight: 400;
          font-size: 32px;
          line-height: 44px;
          text-align: center;
          color: #fff;
          max-width: 660px;
          line-height: 1;
          @media screen and (max-width: 768px) {
              max-width:270px
          }
          @media screen and (min-width:768px) {
              font-size: 80px
          }
      }
  }
  .single-add-to-cart-button {
      background-color: white;
      color: black;
      font-size: 12px;
      height: 26px;
      font-family: "Urbanist";
      @media screen and (min-width: 768px) {
          font-size:18px;
          height: 40px
      }
      &[disabled] {
          background-color: gray !important;
          color: #fff;
          cursor: not-allowed;
          box-shadow: none;
          &:hover {
              background-color: darkgray !important;
              color: #fff !important
          }
      }
  }
  .single-add-to-cart-button:hover {
      color: white
  }
  .card-badge-goto {
      display: none
  }
  .product-main-container {
      .badge-goto {
          display: none
      }
      .product-card {
          max-width: 1000px;
          margin: 0 auto
      }
      .product-card-info {
          text-align: start;
          padding: 0 !important;
          .card-badge-goto {
              display: inline-flex;
              align-items: center;
              border-radius: var(--badge-corner-radius, 50px);
              text-transform: uppercase;
              font-size: 10px;
              letter-spacing: .05em;
              font-weight: var(--font-body-bold-weight, 600);
              height: 28px;
              padding: 0 10px;
              line-height: 0;
              width: fit-content;
              margin-bottom: 14px;
              svg {
                  margin-right: 5px;
                  path {
                      fill: black
                  }
              }
              @media screen and (min-width:768px) {
                  padding: 16px;
                  font-size: 16px;
                  margin-top: -10%;
                  z-index: 3;
                  margin-bottom: 5%;
                  svg {
                      width: 15px;
                      height: 15px
                  }
              }
          }
      }
      .product-card-swatches {
          margin: 0
      }
      .product-card-info a {
          font-size: 22px;
          height: auto;
          @media screen and (min-width: 768px) {
              font-size:32px
          }
      }
      .product-card-swatches {
          .product-card-swatch {
              width: 38px;
              height: 38px;
              border-radius: 30px;
              margin: 4px 4px;
              @media screen and (min-width: 768px) {
                  width:50px;
                  height: 50px;
                  border-radius: 30px
              }
          }
      }
      .single-add-to-cart-button {
          width: 100%;
          height: 33px
      }
      .badge {
          background: transparent;
          color: white;
          width: 43px;
          height: 43px;
          border: 2px solid white;
          border-radius: 30px;
          line-height: normal;
          font-size: 12px;
          padding: 0;
          @media screen and (min-width: 768px) {
              font-size:50px;
              width: 150px;
              height: 150px;
              border-radius: 80px;
              margin: 40px;
              line-height: .9
          }
      }
      .product-featured-image {
          pointer-events: none
      }
  }
  .product-form__error-message {
      color: white
  }
  .option-group {
      padding-top: 10px;
      .option-label {
          font-weight: bold;
          color: #fff
      }
      .option-value {
          margin-left: 5px;
          color: #fff
      }
      .circle-options {
          display: flex;
          gap: 8px;
          margin-top: .5rem;
          .circle-option {
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              width: 40px;
              height: 40px;
              cursor: pointer;
              font-weight: 500;
              transition: all .2s ease;
              box-shadow: 0 0 0 1px transparent;
              input {
                  display: none;
                  &:checked+span {
                      /* box-shadow: 0 0 0 1px #ea8537 inset */
                      background-color: #151515;
                      color: white;
                  }
              }
              span {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                  box-shadow: 0 0 0 1px #dad4d0;
                  transition: box-shadow .2s ease;
                  color: white
              }
          }
      }
  }
  .collapsible__content--dimension {
      margin: 0 auto;
      max-width: 500px
  }
}

.section-featured-collection {
  .hero_banner_style_spring {
      .option-group {
          .option-label {
              color: #000
          }
          .option-value {
              color: #000
          }
      }
      .circle-options {
          .circle-option {
              input {
                  &:checked+span {
                      box-shadow: 0 0 0 1px #151515 inset
                  }
              }
              span {
                  box-shadow: 0 0 0 1px #dad4d0;
                  color: black
              }
          }
      }
      background-color:#dfb3a9;
      .section-divider__title {
          color: #382d2d
      }
      .price {
          font-size: 1.2rem;
          @media screen and (min-width: 768px) {
              font-size:2rem;
              margin: 0 auto
          }
      }
      .price del .amount {
          color: #151515
      }
      .price ins .amount {
          color: #151515
      }
      .single-add-to-cart-button {
          border: none
      }
      .product-card-swatches {
          background-color: #fbcdc2
      }
      .badge-goto-stock {
          background: #000;
          color: #fff;
          svg {
              path {
                  fill: #fff !important
              }
          }
      }
  }
  .hero_banner_style_o2_bed,
  .hero_banner_style_m1_collection,
  .hero_banner_style_marshbello {
      background-color: #cbcbcb;
      .section-divider__title {
          color: #202020
      }
      .product-card-info {
          padding: 0 !important;
          a {
              color: #151515;
              margin: unset
          }
      }
      .price {
          text-align: start;
          margin: unset;
          del .amount {
              color: #151515
          }
          ins .amount {
              color: #151515
          }
      }
      .card-variant-name {
          color: #151515;
          text-align: start;
          line-height: 1.2;
          margin: unset
      }
      .product-card-swatches {
          background-color: #cbcbcb;
          text-align: start
      }
      .product-card-title {
          text-align: start
      }
      .single-add-to-cart-button {
          background-color: #333333;
          color: #f5f5f5;
          font-size: 12px;
          height: 36px;
          font-family: "Urbanist";
          @media screen and (min-width: 768px) {
              font-size:18px;
              height: 40px
          }
      }
      .single-add-to-cart-button:hover {
          color: #333333;
          background-color: #f5f5f5
      }
      .single-add-to-cart-button:before {
          color: #f5f5f5;
          background-color: #f5f5f5;
          background: #f5f5f5
      }
      .single-add-to-cart-button:after {
          color: #333333;
          background-color: #333333;
          background: #333333
      }
      .accordion:first-of-type {
          border-top: 1px solid #151515
      }
      .metafield-rich_text_field {
          font-family: Urbanist
      }
      .accordion {
          border-bottom: 1px solid #151515;
          summary {
              box-sizing: border-box;
              font-size: 16px;
              padding: 6px 40px 10px 0;
              font-family: Urbanist;
              @media screen and (min-width: 768px) {
                  font-size:24px;
                  font-weight: 500;
                  padding: 10px 40px 12px 0
              }
          }
      }
      .hero-banner-goto__blocks {
          padding: 20px 0;
          max-width: 800px;
          margin: 40px auto;
          min-height: 100px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          position: relative;
          z-index: 1;
          gap: 6px;
          margin: 0 auto;
          letter-spacing: 1px;
          text-align: center;
          .hero-banner-goto__text-block {
              padding: 0 10px;
              position: relative;
              flex: 1 1 calc(30% - 20px);
              @media screen and (max-width: 338px) {
                  &:nth-child(3)::before {
                      width:0 !important
                  }
              }
              &:not(:first-child)::before {
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 25%;
                  height: 50%;
                  width: 2px;
                  background-color: #9a9b9d;
                  @media screen and (min-width: 768px) {
                      top:10%;
                      height: 70%
                  }
              }
              h3 {
                  color: #2d3238;
                  font-family: Tenor Sans;
                  font-weight: 400;
                  font-size: 16px;
                  line-height: 24px;
                  margin-bottom: 4px;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  text-overflow: ellipsis;
                  max-width: 150px;
                  margin: 0 auto;
                  @media screen and (min-width: 768px) {
                      font-size:24px
                  }
              }
              p {
                  color: #000000;
                  font-family: "Urbanist";
                  font-size: 12px;
                  line-height: 16px;
                  opacity: .9;
                  overflow: hidden;
                  max-width: 140px;
                  margin: 0 auto;
                  @media screen and (min-width: 768px) {
                      margin-top:20px;
                      font-size: 20px;
                      line-height: 1
                  }
              }
          }
      }
      .featured-collection__inner .product-card {
          .card-variant-name {
              @media screen and (max-width: 768px) {
                  display:none
              }
          }
          .badge {
              background-color: transparent;
              color: white;
              width: 27px;
              height: 26px;
              border: 2px solid white;
              border-radius: 30px;
              line-height: 8px;
              font-size: 8px;
              padding: 0;
              margin: 6px;
              @media screen and (min-width: 768px) {
                  font-size:14px;
                  width: 50px;
                  height: 50px;
                  border-radius: 80px;
                  margin: 12px;
                  line-height: 1
              }
          }
      }
  }
  .hero_banner_style_m1_collection {
      background-color: #b5c1d2;
      .product-card-swatches {
          background-color: #b5c1d2
      }
      .section-divider__title {
          max-width: 800px
      }
      .section-divider__line {
          background: linear-gradient(90deg, #b9c1c6 0%, #e5cfbd 19.23%, #eeb599 47.12%, #dfb3a9 66.35%, #d59b8d 84.13%, #cc7e7e 100%)
      }
  }
  .hero_banner_style_o2_bed {
      background-color: #e9f1f2;
      .product-card-swatches {
          background-color: transparent;
          .product-card-swatch {
              margin: 8px 4px 0 0
          }
      }
      .section-divider__line {
          background: linear-gradient(90deg, #b9c0c6 0%, #bde5e2 19.23%, #99d7ee 47.12%, #a9dcdf 66.35%, #8db8d5 84.13%, #7ea1cc 100%)
      }
      .option-group {
          .option-label-wrapper {
              display: none
          }
          .circle-option {
              height: 22px;
              width: 28px;
              span {
                  border-radius: 5px;
                  color: #151515;
                  box-shadow: 0 0 0 1px #151515
              }
              @media screen and (min-width:768px) {
                  height: 38px;
                  width: 77px;
                  span {
                      font-size: 20px
                  }
              }
          }
      }
  }
}