/** Shopify CDN: Minification failed

Line 716:3 Unexpected ";"

**/


/* CSS from section stylesheet tags */
.handicraftVideo {
    height: 882px;
    position: relative;
    color: white;
  }

  .handicraftVideo video {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
  }

  .handicraftVideo h2 {
    position: absolute;
    top: 77px;
    left: var(--body-margin);
  }

  .handicraftVideo p {
    position: absolute;
    top: 77px;
    right: var(--body-margin);
    width: 546px;
  }

  .handicraftContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 131px;
    box-sizing: border-box;
  }

  .handicraftContentFirstText,
  .handicraftContentSecondText {
    width: 674px;
    text-align: center;
  }

  .handicraftContentFirstText {
    margin-top: 37px;
  }

  .slideshowWrapper {
    width: 100%;
  }

  .slideshowWrapper {
    width: 100%;
    box-sizing: border-box;
    margin-top: 126px;
    overflow: hidden;
  }

  .slideshow {
    display: flex;
    gap: 19px;
    padding-left: var(--body-margin);
    box-sizing: border-box;
  }

  .slideshow img {
    object-fit: cover;
    flex-shrink: 0;
    height: 32vw;
    width: auto;
  }

  .slideshowMobile {
    margin-left: var(--body-margin);
  }

  .slide {
    width: min-content;
  }

  .slideshowMobile img {
    width: auto;
    height: 32vw;
    min-height: 180px;
    object-fit: cover;
  }

  .moreMobile {
    display: none;
  }

  .handicraftContentSecondText {
    margin-top: 126px;
    margin-left: auto;
    margin-right: auto;
  }

  .handicraftInfos {
    display: flex;
    gap: min(90px, 7vw);
    margin: 107px var(--body-margin) 160px;
  }

  .handicraft-info {
    display: flex;
    flex-direction: column;
  }

  .handicraft-info p {
    max-width: 275px;
    text-align: left;
    margin-top: 20px;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (min-width: 850px) {
    .moreInfo {
      opacity: 1 !important;
      visibility: visible !important;
      height: auto !important;
    }
  }

  @media (max-width: 850px) {
    .handicraftVideo {
      height: 325px;
    }

    .handicraftVideo h2 {
      top: 40px;
    }

    .handicraftVideo p {
      display: none;
    }

    .handicraftContent {
      padding-top: 45px;
    }

    .handicraftContent > img {
      display: none;
    }

    .handicraftContentFirstText,
    .handicraftContentSecondText {
      width: 100%;
      text-align: left;
      padding: 0 var(--body-margin);
      box-sizing: border-box;
    }

    .handicraftContentFirstText {
      margin-top: 0;
    }

    .slideshowWrapper {
      margin-top: 45px;
    }

    .slideshow {
      display: none;
    }

    .moreMobile {
      display: initial;
      text-transform: uppercase;
      margin: 45px 0;
      cursor: pointer;
      align-self: flex-start;
      padding-left: var(--body-margin);
    }

    .handicraftContentSecondText {
      margin-top: 0;
    }

    .handicraftInfos {
      flex-direction: column;
      width: 100%;
      padding: 45px 0 45px var(--body-margin);
      box-sizing: border-box;
      gap: 40px;
      margin: 0;
    }

    .handicraftInfos img {
      width: 120px;
      height: auto;
      object-fit: cover;
    }

    .handicraftInfos p {
      width: 250px;
    }

    .moreInfo {
      animation: dropIn 0.3s ease-out
      , fadeIn 0.7s;
      will-change: transform;
    }

    @keyframes dropIn {
      from {
        transform: translateY(-10px);
      }
      to {
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  }
.philosophy {
    height: calc(100vh - 50px);
    position: relative;
  }

  .philosophyMobile {
    display: none;
  }

  .philosophyPageWrapper {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .philosophyPage {
    padding-top: 70px;
    box-sizing: border-box;
  }

  .philosophyPage h2 {
    margin-bottom: 5px;
  }

  .counterDesktop {
    margin-bottom: 20px;
  }

  .counterMobile {
    display: none;
  }

  .textContent > * {
    font-size: 2.375rem;
    width: 715px;
    margin: auto;
  }

  .nextArrow {
    position: absolute;
    top: 386px;
    right: 144px;
    cursor: pointer;
  }

  .philosophy-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .philosophyPage {
      padding-top: 45px;
    }

    .philosophyMobile {
      display: block;
    }

    .philosophyDesktop {
      display: none;
    }

    .counterDesktop {
      display: none;
    }

    .philosophyPage h2 {
      margin-bottom: 20px;
    }

    .counterMobile {
      display: block;
    }

    .textContent > * {
      font-size: 1.25rem;
      width: 100%;
      margin-top: 32px;
    }

    .textContent br {
      display: none;
    }

    .nextArrow {
      position: absolute;
      top: unset;
      right: var(--body-margin);
      bottom: 60px;
      cursor: pointer;
    }
  }
.hero-about {
    height: 100vh;
    display: flex;
  }

  .hero-about > * {
    width: 50%;
    height: 100%;
  }

  .heroImageSide {
    background-color: #a6bdd9;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-about img {
    max-width: 100%;
    padding: 0 var(--header-margin);
    object-fit: contain;
  }

  .heroText {
    background: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .heroText p {
    width: 405px;
    padding: 0 var(--body-margin);
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 950px) {
    .hero-about {
      flex-direction: column;
      height: auto;
    }

    .hero-about > * {
      width: 100%;
    }

    .hero-about img {
      box-sizing: border-box;
    }

    .heroText {
      height: auto;
      padding-top: 60px;
      padding-bottom: 60px;
    }
  }
.hands {
    height: 837px;
    display: flex;
    padding-top: 112px;
    box-sizing: border-box;
  }

  .hands > * {
    width: 50%;
  }

  .hands-imageSide {
    display: flex;
    align-items: flex-start;
  }

  .hands-imageSide div {
    width: 100%;
  }

  .hands-imageSide img {
    margin-top: 80px;
  }

  .hands-textSide {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
  }

  .hands-textSide p {
    max-width: 634px;
    width: 100%;
    margin-top: 45px;
    padding-left: var(--header-margin);
    box-sizing: border-box;
  }

  .hands-textSide img {
    padding-right: var(--header-margin);
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 950px) {
    .hands {
      flex-direction: column;
      padding-top: 55px;
      padding-bottom: 84px;
      height: auto;
    }

    .hands > * {
      width: 100%;
    }

    .hands-imageSide img {
      width: 100%;
      object-fit: cover;
      margin-top: 20px;
    }

    .hands-textSide {
      align-items: flex-start;
    }

    .hands-textSide img {
      display: none;
    }

    .hands-textSide p {
      width: 100%;
      padding-left: 0;
    }
  }
.hero {
    height: 100vh;
    position: relative;
  }

  .hero video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .heroContentWrapper {
    position: absolute;
    left: var(--header-margin);
    bottom: 64px;
    display: flex;
    width: calc(100% * 9 / 20);
    gap: calc(100% / 9);
    color: white;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .hero {
      height: 100 svh;
    }

    .heroContentWrapper {
      flex-direction: column;
      gap: 30px;
      padding: 0 var(--body-margin);
      width: 100%;
      box-sizing: border-box;
      left: 0;
      right: 0;
      bottom: 44px;
    }
  }
.atelier-info-intro {
    display: flex;
    margin: 0 var(--header-margin);
  }

  .atelier-info-buttons,
  .treatmentsWrapper {
    margin: 90px 0;
  }

  .treatmentsWrapper {
    width: calc(100% * 9 / 16);
  }

  .atelier-info-buttons {
    width: calc(100% * 7 / 16);
  }

  .atelier-info-buttons ul {
    margin-bottom: 22px;
    list-style-type: disc;
    margin-left: 0.8rem;
    line-height: 1.5;
  }

  .atelier-info-buttons a {
    display: block;
    width: max-content;
    margin-left: 14px;
  }

  .atelier-info-buttons button,
  .atelier-info-buttons a {
    margin-top: 30px;
  }

  .atelier-info-buttons li {
    list-style-type: disc;
  }

  .treatmentsSummary-treatments {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  .treatmentsSummary-treatments h5 {
    line-height: 1.5rem;
  }

  .treatmentsSummary {
    display: flex;
    gap: min(3vw, 34px);
    position: relative;
    width: 93px;
  }

  .slider {
    display: flex;
    width: 100%;
    gap: 30px;
  }

  .treatmentsSummary img {
    filter: grayscale(100%);
  }

  .treatmentsSummary-treatment {
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
  }

  .slide {
    width: 93px;
  }

  .nextArrow {
    position: absolute;
    top: 35%;
    right: -60px;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .treatmentsSummary-treatment p {
    text-transform: uppercase;
    font-size: 0.75rem;
    width: 93px;
  }

  .treatmentsSummary-treatment span {
    padding-right: 5px;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/


  @media (max-width: 1100px) {
    .atelier-info-intro {
      gap: calc(100% * 1 / 32);
    }

    .atelier-info-buttons,
    .treatmentsWrapper {
      width: 50%;
    }
  }

  @media (min-width: 1300px) {
    .nextArrow {
      display: none;
    }
  }

  @media (max-width: 850px) {

    .atelier-info-intro {
      flex-direction: column;
      margin: 0;
      padding-right: 0;
    }

    .treatment-info,
    .treatmentsWrapper {
      width: 100%;
    }

    .treatment-info {
      display: flex;
      flex-direction: column;
      margin: 50px 0 60px;
      padding-right: var(--body-margin);
      box-sizing: border-box;
    }

    .treatment-info button,
    .treatment-info a {
      margin-top: 45px;
      width: max-content;
    }

    .treatmentsWrapper {
      margin: 0;
    }
  }

  .treatmentsSummary-treatments {
    margin: 0 0 40px;
  }

  .treatmentsSummary-treatments h5 {
    margin-bottom: 20px;
  }

  .treatmentsSummary {
    gap: 16px;
  }

  .treatmentsSummary-treatment img {
    max-width: 82px;
    width: 100%;
    height: auto;
  }

  .slide {
    width: unset;
  }

  .treatmentsSummary-treatment img,
  .treatmentsSummary-treatment p {
    max-width: 82px;
  }

  .treatmentsSummary-treatment p {
    font-size: 11px;
  }

  .treatmentsSummary-treatment span {
    display: block;
  }

  .nextArrow {
    display: none;
  };

  /* Without swiper TODO: clean a bit */


  /*
   .swiper {
   width: 100%;
   overflow: scroll !important;
   }

   .swiper::-webkit-scrollbar {
   display: none;
   }

   .swiper {
   -ms-overflow-style: none;
   scrollbar-width: none;

   }

   .swiper > div {
   width: max-content;
   }

   .slide {
   margin-right: 18px;
   max-width: 82px;
   }

   .slide:last-of-type {
   padding-right: var(--body-margin);
   }
*/
/* Per alguna raó, si no poso això aquí, el següent bloc no s'aplica */
  .treatment {
    display: flex;
  }

  .treatment {
    min-height: 887px;
    display: flex;
  }

  .treatment > * {
    width: 50%;
  }

  .treatment:nth-of-type(odd) .treatments-imageSide,
  .treatment:nth-of-type(even) .contentSide {
    background-color: var(--main-color);
  }

  .treatments-imageSide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .treatments-imageSide h3 {
    position: absolute;
    font-size: 0.75rem;
    top: 77px;
    left: 70px;
  }

  .treatments-imageSide span {
    padding-right: 10px;
  }

  .treatments-imageSide .treatment-image {
    width: 379px;
    height: 467px;
  }

  .facialist {
    padding-left: 23px;
  }

  .contentSide {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content {
    width: 100%;
    max-width: 505px;
    padding: var(--header-margin);
  }

  .heading {
    font-size: 2rem;
    text-transform: unset;
    display: inline-block;
    margin: unset;
  }

  .accordion-heading {
    text-transform: uppercase;
    font-family: noiGrotesk;
    font-size: 0.75rem;
    margin: 18px 0 7px;
  }

  .duration {
    position: relative;
    margin-bottom: 38px;
    text-transform: uppercase;
    font-family: noiGrotesk;
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }

  .contentText {
    font-size: 0.9375rem;
  }

  .collapse {
    padding-left: 10px;
    font-size: 1rem;
  }

  .treatment-description {
    transition: height 0.3s ease
    , visibility 0.3s ease
    , opacity 0.3s ease
    , padding 0.3s;
  }

  .buttons {
    display: flex;
    gap: 70px;
    margin-top: 40px;
  }

  .hidden {
    display: none;
  }

  .buttons button,
  .buttons a {
    padding: 10px 38px;
  }

  .select {
    padding: 10px 38px;
    width: 355px;
    margin-top: 32px;
    border-radius: 0;
    text-align: center;
    text-align-last: center;
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    appearance: none;
  }

  .disabled {
    border-color: rgb(180, 180, 180);
    color: rgb(180, 180, 180);
    pointer-events: none;
    cursor: auto;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .treatment {
      height: 100%;
      flex-direction: column;
    }

    .treatment > * {
      width: 100%;
    }

    .treatment:nth-of-type(odd) .treatments-imageSide,
    .treatment:nth-of-type(odd) .contentSide {
      background-color: var(--main-color);
    }

    .treatment:nth-of-type(even) .treatments-imageSide,
    .treatment:nth-of-type(even) .contentSide {
      background-color: unset;
    }

    .treatments-imageSide h3 {
      display: none;
    }

    .treatments-imageSide img {
      padding: var(--body-margin) var(--body-margin) 0;
      width: 100%;
      max-width: 525px;
      box-sizing: border-box;
      height: auto;
    }

    .contentSide {
      padding: var(--body-margin);
      width: 100%;
      box-sizing: border-box;
    }

    .content {
      padding: 0;
    }

    .heading {
      font-size: 1.5rem;
    }

    .facialistMobile {
      display: initial;
      padding-right: 15px;
    }

    .contentText p {
      font-size: 0.875rem;

    }

    .select {
      font-size: 0.75rem;
      line-height: 1.4;
      padding: 15px 38px;
      width: 100%;
    }

    .buttons {
      flex-direction: column;
      align-items: center;
      gap: 19px;
      margin-top: 40px;
    }

    .buttons button,
    .buttons a {
      font-size: 0.75rem;
      width: 220px;
      padding-top: 15px;
      padding-bottom: 15px;
      text-align: center;
      box-sizing: border-box;
    }

  }

  @media (min-width: 850px) {
    .collapse {
      visibility: hidden !important;
    }

    .treatment-description {
      height: 100% !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
  }
.cart-overlay,
  .cartContent {
    z-index: 200;
  }

  .cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    opacity: 0;

    transition: transform 0s 0.4s
    , opacity 0.4s;
  }

  .cart-drawer--active .cart-overlay {
    opacity: 1;
    transition: transform 0s
    , opacity 1.5s;
    transform: translateX(0);
  }

  .cartContent {
    z-index: 200;
    background-color: var(--main-color);
    box-shadow: hsl(206 22% 7% / 35%) 0 -10px 38px -10px
    , hsl(206 22% 7% / 20%) 0 -10px 20px -15px;
    position: fixed;
    top: 0;
    right: 0;
    width: clamp(50vw, 700px, 100%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 calc(var(--header-margin) + 10px);
    height: 100vh;
    height: 100 dvh;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .cart-drawer--active .cartContent {
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .closeButton {
    position: absolute;
    top: 30px;
    right: var(--header-margin);
    margin-top: -8px;
    margin-right: -10px;
    padding: 10px;
    cursor: pointer;
    background: unset;
  }

  .cartIconMobile {
    display: none;
  }

  .cartProductList {
    margin-top: 125px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow-y: scroll;
  }

  .cartProduct {
    display: flex;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--button-inactive);
  }

  .cartProduct > a,
  .cartProduct > div {
    overflow: hidden;
    line-height: 0;
    height: 100%;
    margin-right: 30px;
  }

  .cartImage {
    object-fit: cover;
    background-color: var(--main-color-inactive);
    width: 87px;
    height: auto;
    height: 112px;
    object-fit: cover;
  }

  .productInfo {
    display: grid;
    grid-template-columns: 1.75fr 1fr;
    flex: 1;
  }

  .productPrice {
    text-align: right;
  }

  .discountedPrice {
    padding-right: 10px;
    color: var(--button-inactive);
    position: relative;
    /* text-decoration: line-through; */
  }

  .discountedPrice::before {
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    background: var(--button-inactive-border);
    transform: rotate(-10deg) translateY(-7px) translateX(2.5px);
  }

  .quantity {
    display: flex;
    gap: 10px;
  }

  .quantity * {
    height: 14px;
    align-self: flex-end;
    color: var(--dark-color);
  }

  .quantity input {
    width: 10px;
  }

  .quantity button {
    cursor: pointer;
    background-color: unset;
  }

  .attributes {
    margin-top: auto;
    margin-bottom: -5px;
    line-height: 1.4;
  }

  .removeItem {
    cursor: pointer;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    text-transform: uppercase;
    color: var(--button-inactive);
  }

  .removeItem img {
    padding-left: 5px;
  }

  .cartFooterWrapper {
    margin-top: auto;
  }

  .cartFooter {
    margin-top: 33px;
    margin-bottom: 83px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    border-top: 1px solid var(--button-inactive);
    padding-top: 22px;
  }

  .subtotal {
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
  }

  .discounts {
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    align-items: center;
  }

  .discountTag {
    padding: 5px 10px;
    border-radius: 6px;
    background-color: var(--button-color-active);
  }

  .cart-disclaimer {
    font-size: 12px;
  }

  .cartFooter .checkoutButton {
    margin-top: auto;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    padding: 18px 0;
  }

  .seeProducts {
    width: 415px;
    box-sizing: border-box;
    text-align: center;
  }


  /*
   ===========================================
   RESPONSIVE: MOBILE
   ===========================================
*/

  @media (max-width: 850px) {
    .cartIconMobile {
      display: initial;
      position: absolute;
      top: 30px;
      left: var(--header-margin);
      display: flex;
      align-items: center;
    }

    .cartIconMobile path {
      fill: var(--dark-color);
    }

    .cartQty {
      padding-left: 7px;
      height: 7px;
      line-height: 1;
    }

    .cartContent {
      padding: 0 23px;
    }

    .cartProductList {
      margin-top: 110px;
    }

    .cartProduct > a {
      margin-right: 15px;
    }

    .productInfo {
      row-gap: 15px;
    }

    .cartFooter {
      margin-top: 22px;
      margin-bottom: 29px;
    }

    .seeProducts {
      width: max-content;
    }

    .cartImage {
      width: 64px;
      height: 81px;
    }
  }
.categorySelector {
    width: 100%;
    padding-top: 150px;
    padding-bottom: 68px;
    display: flex;
    justify-content: center;
  }

  .categorySelector ul {
    display: flex;
    gap: 25px;
  }

  .categorySelector li {
    cursor: pointer;
    width: max-content;
  }

  .productListWrapper {
    margin-bottom: 80px;
    margin-left: var(--body-margin);
    margin-right: var(--body-margin);
  }

  .products {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: 70px;
    column-gap: min(4vw, 60px);
  }

  /* HOVER POINT */

  .point-wrapper {
    display: flex;
    align-items: center;
    color: var(--button-inactive);
    position: relative;
  }

  .point {
    position: absolute;
    left: 0;
    height: 3px;
    width: 3px;
    background-color: var(--button-inactive);
    border-radius: 100%;
    margin-right: 0.3rem;
    margin-bottom: 0.2rem;
    font-size: 1rem;
    opacity: 0;
    transform: translateX(-0.5rem);

    transition: opacity 0.25s cubic-bezier(0.45, 0.02, 0.09, 0.98)
    , color 0.25s ease;
    will-change: opacity;
  }

  .point-wrapper:hover .point,
  .active .point {
    opacity: 1;
    background-color: var(--dark-color);
  }

  .noPoint:hover .point {
    opacity: 0;
  }

  .textWrapper {
    /* display: inline-block; */
    transition: color 0.25s ease;
  }

  .point-wrapper:hover .textWrapper,
  .active .textWrapper {
    color: var(--dark-color);
  }

  .active .textWrapper {
    font-style: italic;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 70rem) {
    .products {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  @media (max-width: 850px) {
    .categorySelector {
      padding: 110px var(--body-margin) 25px;
      overflow: scroll;
      justify-content: flex-start;
      width: 100%;
      box-sizing: border-box;
    }

    .categorySelector::-webkit-scrollbar {
      display: none;
    }

    .categorySelector {
      -ms-overflow-style: none;
      /* IE and Edge */
      scrollbar-width: none;
      /* Firefox */
    }

    .categorySelector ul {
      width: max-content;
      transform: translateX(0.5rem);
      padding-right: var(--body-margin);
    }

    .products {
      grid-template-columns: 1fr 1fr;
      row-gap: 44px;
      column-gap: 33px;
    }

    .productListWrapper {
      margin-left: var(--header-margin);
      margin-right: var(--header-margin);
    }
  }
.footer {
    padding-top: 80px;
    padding-bottom: 60px;
    background-color: var(--secondary-color);
    color: white;
    font-size: 0.8rem;
  }

  .info {
    display: flex;
    justify-content: space-between;
  }

  .info > * {
    /* background-color: red; */
    width: 142px;
  }

  .nav1 ul,
  .nav2 ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .newsletter {
    position: relative;
    width: 365px;
  }

  .newsletter input {
    font-size: 1.1rem;
  }

  .newsletter input::placeholder {
    font-size: 0.8rem;
  }

  .address {
    width: 242px;
  }

  .address p {
    width: max-content;
  }

  .mobileBreak {
    display: none;
  }

  .desktopHidden {
    display: none;
  }

  .social {
    width: 42px;
    display: flex;
    justify-content: flex-end;
  }

  .socialContent {
    width: max-content;
  }

  .logoWrapper {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logo {
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .copy {
    margin-top: 30px;
    font-size: 0.68rem;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 1200px) {
    .mobileBreak {
      display: initial;
    }

    .mobileHidden {
      display: none;
    }

    .desktopHidden {
      display: initial;
    }

    .nav1,
    .nav2,
    .address,
    .social {
      width: 120px;
    }

    .newsletter {
      width: 200px;
    }
  }

  @media (max-width: 900px) {
    .footer {
      padding-top: 42px;
    }

    .info {
      flex-wrap: wrap;
    }

    .info .newsletter {
      order: 0;
      width: 100%;
      max-width: 350px;
    }

    .info > * {
      order: 1;
    }

    .nav1,
    .nav2 {
      width: 50%;
    }

    .newsletter,
    .nav1,
    .nav2 {
      margin-bottom: 42px;
    }

    .address,
    .social {
      width: 50%;
    }

    .social {
      justify-content: flex-start;
    }

    .logo img {
      width: 130px;
    }

    .logo p {
      font-size: 0.55rem;
    }
  }
.atelier,
  .artesania {
    height: 865px;
  }

  .artesania {
    display: flex;
    background-color: var(--main-color);
  }


  /*
   .artesania.no-background {
   background-color: transparent;
   }
*/

  .atelier > *,
  .artesania > * {
    width: 50%;
  }

  .artesaniaImage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--body-margin);
    box-sizing: border-box;
  }

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

  .atelierText,
  .artesaniaText {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px var(--body-margin);
    box-sizing: border-box;
  }

  .atelierContentWrapper,
  .artesaniaContentWrapper {
    width: 425px;
  }

  .atelierContentWrapper h3,
  .artesaniaContentWrapper h3 {
    margin-bottom: 35px;
  }

  .atelierContentWrapper p,
  .artesaniaContentWrapper p {
    margin-bottom: 2rem;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .atelier,
    .artesania {
      height: auto;
      flex-direction: column;
    }

    .atelier > *,
    .artesania > * {
      width: 100%;
    }
  }
.intro {
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .introContentWrapper {
    padding-top: clamp(65px, 14vw, 240px);
    /* padding-bottom: clamp(85px, 11vw, 205px); */
    width: 690px;
    text-align: center;
  }

  .intro p {
    font-size: 2rem;
    margin-bottom: 2rem;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .intro {
      padding: 0;
    }

    .intro p {
      font-size: 1.25rem;
      margin-bottom: 1.25rem;
    }
  }
.free-workshop-content-wrapper {
    padding-top: clamp(65px, 14vw, 200px);
    padding-bottom: clamp(85px, 11vw, 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color);
  }

  .free-workshop-content-wrapper .italic-heading {
    padding-bottom: 3rem;
  }

  .free-workshop-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

    .free-workshop-content span {
     display: block;
     font-family: "noiGrotesk";
     font-size: 1rem;
    }

    .free-workshop-content p {
      font-size: 1.75rem;
    }

    .free-workshop-content li {
      padding-bottom: 4rem;
    }

    .free-workshop-content {
      font-size: 1.2rem;
    }
.free-workshop-target {
    min-height: 100vh;
    display: flex;
    background-color: transparent;
  }

  .free-workshop-target-content,
  .free-workshop-target-image {
    width: 50%;
    height: 100%
  }

  .free-workshop-target-image {
    object-fit: cover;
  }

  .free-workshop-target-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .workshop-ordered ol {
    padding-left: 0;
    list-style-position: inside;
  }
.intro.workshop-footer {
    background-color: var(--main-color);
    padding-bottom: clamp(85px, 11vw, 205px);

  }

  .workshop-footer p {
    text-wrap: balance;
  }
.mission {
    position: relative;
    height: 100vh;
    width: 100%;
  }

  .mission img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .missionContentWrapper {
    position: relative;
    z-index: 10;
    color: white;
padding-top: clamp(65px, 14vw, 180px);
  }
  
  .missionContentWrapper .link {
    border-color: white;
  }

  .mission-content {
    font-size: 2rem;
    max-width: 690px;
     box-sizing: content-box;
     padding-top: 2rem;
  }

  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .mission-content {
      font-size: 1.25rem;
      margin-bottom: 1.25rem;
    }
  }
.free-workshop-target {
    height: 100vh;
    display: flex;
    background-color: transparent;
  }

  .free-workshop-target-content,
  .free-workshop-target-image {
    width: 50%;
    height: 100%
  }

  .free-workshop-target-image {
    object-fit: cover;
  }

  .free-workshop-target-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .workshop-unordered li {
    list-style: disc;
    list-style-position: inside;
  }

  @media (max-width: 850px) {

    .free-workshop-target {
      flex-direction: column;
      height: auto;
    }

    .free-workshop-target-content,
    .free-workshop-target-image {
      width: 100%;
    }

    .free-workshop-target-content {
      order: 1;
      padding: 40px 0;
    }

  }
.product-add-banner {}

.product-wrapper {
  display: flex;
}

.productGallery,
.productForm {
  width: 50%;
  height: 100vh;
}

/* Product Gallery */

.productGallery {
  position: sticky;
  top: 0;
}

.productGallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* Product Form */

.productForm {
  height: auto;
}

.productFormContent {
  padding: 170px var(--body-margin) 97px var(--header-margin);
}

.productTitle {
  font-size: 1.875rem;
}

.productSubtitle {
  padding-top: 0.3rem;
  padding-bottom: 0.1rem;
  font-size: 0.95rem;
  text-transform: none;
  font-style: italic;
}

.productDescription {
  margin-top: 31px;
}

.productDescription h5 {
  padding-top: 1rem;
  font-size: 0.875rem;
}

.productDescription p {
  padding-bottom: 1rem;
}

.addToCart {
  margin-top: 33px;
  cursor: pointer;
}

.disclaimer {
  padding-top: 16px;
}


/*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

@media (max-width: 900px) {
  .singleImage {
    position: relative !important;
    min-height: 70 svh;
  }
}

@media (max-width: 850px) {
  .product-wrapper {
    flex-direction: column;
  }

  .productGallery.free-workshop-gallery {
    height: 680px;
  }

  .productGallery,
  .productForm {
    width: 100%;
  }

  .productGallery {
    position: relative;
    height: 100%;
  }

  .productFormContent {
    box-sizing: border-box;
    padding: 39px calc(var(--header-margin) + 10px);
  }

  .addToCart {
    width: 100%;
    padding: 18px 0;
  }

}
.header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    height: 73px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color 0.4s ease;
  }

  .white {
    color: white;
  }

  .white .hamburger line {
    stroke: white;
  }

  .white .logo path {
    fill: white;
  }

  .white .cartIcon path {
    stroke: white;
    fill: white;
  }

  .scrollRef {
    margin-top: 10px;
    position: absolute;
    z-index: -1;
  }

  .active,
  .scrolled {
    /* background-color: white; */
    color: var(--dark-color);
  }

  .contentWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .logoWrapperHeader {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    width: 212px;
  }

  .header-title {
    margin: 0;
  }

  .hamburger {
    padding-bottom: 3px;
  }

  .hamburger line,
  .active .hamburger line,
  .scrolled .hamburger line {
    stroke: var(--dark-color);
  }

  .logo path {
    transition: fill 0.4s ease;
  }

  .logo path,
  .active .logo path,
  .scrolled .logo path {
    fill: var(--dark-color);
  }

  .navMobile,
  .navMobileWrapper {
    display: none;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: min(4vw, 65px);


    /*
   visibility: hidden;
   opacity: 0;
*/
    color: var(--dark-color);
    transition: opacity 0.4s ease
    , visibility 0.4s ease;
  }

  .hamburger {
    display: none;
  }

  .close-menu {
    display: none;
  }

  .active .nav {
    visibility: visible;
    opacity: 1;
  }

  .nav > li {
    position: relative;
    cursor: pointer;
  }

  .subMenu {
    position: absolute;
    top: 60px;
    left: 0;
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .subMenu div {
    opacity: 0;
    transition: opacity 0.2s ease 0.2s;
    will-change: opacity;
    cursor: pointer;
  }

  .active .subMenu div {
    opacity: 1;
  }


  /*
   .nav > li,
   .rightButtons a,
   .rightButtons > span {
   height: 5px;
   }
*/

  .rightButtons {
    display: flex;
    align-items: center;
  }

  .rightButtons > span {
    padding-left: 16px;
    cursor: pointer;
  }

  .cart {
    padding: 10px 10px 15px 25px;
    margin-right: -10px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .cartIcon path {
    transition: stroke 0.4s ease;
    transition: fill 0.4s ease;
  }

  .cartIcon path,
  .active .cartIcon path,
  .scrolled .cartIcon path {
    stroke: var(--dark-color);
    fill: var(--dark-color);
  }

  .cartQty {
    padding-left: 8px;
  }

  .rightButtons a,
  .rightButtons input,
  .rightButtons span {
    text-transform: uppercase;
    font-size: 0.8125rem;
  }

  .rightButtons input {
    line-height: 13px;
  }

  .cart span {
    height: 7px;
  }

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
    , opacity 2s ease;
    background-color: white;
    /* border-bottom: 1px solid #f5f1f1; */
  }

  .scrolled .bg {
    transform: translateY(calc(-100% + 73px));
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
    , opacity 0.6s ease;
    opacity: 1;
  }

  .megaMenuBg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 320px;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    background-color: white;
  }

  .active .megaMenuBg {
    transform: translateY(0);
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 950px) {
    .nav,
    .desktopButton,
    .megaMenuBg {
      display: none;
    }

    .cartQty {
      display: none;
    }

    .navMobileWrapper {
      display: initial;
      color: var(--dark-color);
      visibility: hidden;
      opacity: 0;
      position: absolute;
      left: var(--body-margin);
      top: 90px;
      transition: opacity 0.05s ease
      , visibility 0.05s ease;
    }

    .active .navMobileWrapper {
      visibility: visible;
      opacity: 1;
      transition: opacity 0.5s ease 0.2s
      , visibility 0.5s ease 0.2s;
    }

    .hamburger {
      display: inline;
    }

.active .hamburger {
  display: none;
}

.close-menu {
  display: none;
}

.active .close-menu {
  display: inline;
}

    /* .active .hamburger line:first-child {
       transform: translateY(2.8px) rotate(45deg);
        transform-origin: "center";
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), stroke 0.4s ease;
    }

    .active .hamburger line:nth-child(2) {
 transform: translateY(-2.8px) rotate(-45deg);
        transform-origin: "center";
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), stroke 0.4s ease;
    } */

    .navMobileWrapper nav {
      height: calc(100vh - 90px - 106px - 20px);
      height: calc(100dvh - 90px - 106px - 20px);
      overflow: scroll;
      -ms-overflow-style: none;
      /* IE and Edge */
      scrollbar-width: none;
      /* Firefox */
    }

    .navMobileWrapper nav::-webkit-scrollbar {
      display: none;
    }

    .navMobile {
      display: initial;
      display: flex;
      flex-direction: column;
      gap: 26px;
    }

    .navMobile li {
      cursor: pointer;
    }

    .submenuMobile {
      transition: height 0.5s ease
      , visibility 0.5s ease
      , opacity 0.3s ease;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding-left: 19px;
    }

    .submenuMobile li:first-of-type {
      padding-top: 19px;
    }

    .bottom {
      position: fixed;
      left: var(--body-margin);
      bottom: 51px;
      display: flex;
      flex-direction: column;
      gap: 26px;
    }

    .cita {
      display: block;
      text-transform: uppercase;
      font-size: 12px;
      line-height: 1.4;
      border: 0.5px solid var(--dark-color-border);
      padding: 18px 81px;
      margin-top: 41px;
      margin-right: 10px;
    }

    .active .bg {
      opacity: 1;
      transform: translateY(0);
      transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1)
      , opacity 0.2s ease;
    }
  }
.atelier,
  .artesania {
    height: 865px;
  }

  .artesania {
    display: flex;
    background-color: var(--main-color);
  }

  .atelier > *,
  .artesania > * {
    width: 50%;
  }

  .artesaniaImage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--body-margin);
    box-sizing: border-box;
  }

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

  .atelierText,
  .artesaniaText {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px var(--body-margin);
    box-sizing: border-box;
  }

  .atelierContentWrapper,
  .artesaniaContentWrapper {
    width: 425px;
  }

  .atelierContentWrapper h3,
  .artesaniaContentWrapper h3 {
    margin-bottom: 35px;
  }

  .atelierContentWrapper p,
  .artesaniaContentWrapper p {
    margin-bottom: 2rem;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .atelier,
    .artesania {
      height: auto;
      flex-direction: column;
    }

    .atelier > *,
    .artesania > * {
      width: 100%;
    }
  }
.atelier,
  .artesania {
    height: 865px;
  }

  .atelier {
    display: flex;
  }

  .atelier > *,
  .artesania > * {
    width: 50%;
  }

  .atelierImage {
    position: relative;
  }

  .atelierImage img {
    object-fit: cover;
  }

  .atelierText,
  .artesaniaText {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px var(--body-margin);
    box-sizing: border-box;
  }

  .atelierContentWrapper,
  .artesaniaContentWrapper {
    width: 425px;
  }

  .atelierContentWrapper h3,
  .artesaniaContentWrapper h3 {
    margin-bottom: 35px;
  }

  .atelierContentWrapper p,
  .artesaniaContentWrapper p {
    margin-bottom: 2rem;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .atelier,
    .artesania {
      height: auto;
      flex-direction: column;
    }

    .atelier > *,
    .artesania > * {
      width: 100%;
    }

    .atelierImage {
      height: 480px;
    }
  }
.bestSellers {
    padding-top: clamp(85px, 11vw, 205px);
    padding-bottom: clamp(65px, 8vw, 130px);
    background-color: var(--main-color);
  }

  .bestSellers h3 {
    margin-bottom: 26px;
  }

  .bestSellers p {
    margin-bottom: 37px;
  }

  .slider-wrapper {
    position: relative;

    margin-bottom: 5vh;
    height: auto;
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-auto-flow: column;
    justify-content: flex-start;
    gap: 2.5rem;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--body-margin);
    scrollbar-width: none;
  }

  .slide {
    scroll-snap-align: start;
    width: 300px;
  }

  .nextArrow {
    position: absolute;
    top: calc((100% - 94px) * 0.5);
    margin-right: var(--body-margin);
    /* right: calc(var(--body-margin) - 5px); */
    right: -60px;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .slider-wrapper img {
    max-width: 25vw;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .bestSellers {
      height: auto;
    }

    .bestSellers h3 {
      margin-bottom: 1.25rem;
    }

    .bestSellers p {
      margin-bottom: 1.25rem;
    }

    .slider-wrapper {
      padding-right: 0;
    }

    .slide {
      width: 45%;
      min-width: 185px;
      max-width: 220px;
    }

    .nextArrow {
      display: none;
    }

    .slide button {
      display: none;
    }

    .slider-wrapper img {
      max-width: unset;
    }
  }
.heroWrapper {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    color: white;
  }

  .heroWrapper > * {
    position: relative;
  }

  .heroWrapper img,
  .heroWrapper video {
    object-fit: cover;
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
  }

  .text {
    position: absolute;
    left: 70px;
    bottom: 60px;
    width: 200px;
  }

  .category {
    position: absolute;
    right: 70px;
    bottom: 60px;
    font-size: 0.8125rem;
  }

  .category span {
    padding-right: 10px;
    font-size: 0.75rem;
  }

  /* Layout 1: Single Layout */

  .layout-1 a:nth-child(1) {
    grid-area: 1 / 1 / 3 / 5;
  }

  @media (max-width: 849px) {
    .layout-1 a:nth-child(1) {
      grid-area: 1 / 1 / 5 / 3;
    }
  }

  /* Layout 2: Two Elements */

  .layout-2 a:nth-child(1) {
    grid-area: 1 / 1 / 3 / 3;
  }

  .layout-2 a:nth-child(2) {
    grid-area: 1 / 3 / 3 / 5;
  }

  @media (max-width: 849px) {
    .layout-2 a:nth-child(1) {
      grid-area: 1 / 1 / 3 / 3;
    }

    .layout-2 a:nth-child(2) {
      grid-area: 3 / 1 / 5 / 3;
    }
  }

  /* Layout 4: Four Elements */

  .layout-4 a:nth-child(1) {
    grid-area: 1 / 1 / 3 / 3;
  }

  .layout-4 a:nth-child(2) {
    grid-area: 1 / 3 / 2 / 5;
  }

  .layout-4 a:nth-child(3) {
    grid-area: 2 / 3 / 3 / 4;
  }

  .layout-4 a:nth-child(4) {
    grid-area: 2 / 4 / 3 / 5;
  }

  @media (max-width: 849px) {
    .layout-4 a:nth-child(1) {
      grid-area: 1 / 1 / 3 / 3;
    }

    .layout-4 a:nth-child(2) {
      grid-area: 3 / 1 / 4 / 3;
    }

    .layout-4 a:nth-child(3) {
      grid-area: 4 / 1 / 5 / 2;
    }

    .layout-4 a:nth-child(4) {
      grid-area: 4 / 2 / 5 / 3;
    }
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .heroWrapper {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, 1fr);
      min-height: 960px;
    }

    .category {
      left: 23px;
      bottom: 23px;
      right: unset;
    }

    .text {
      display: none;
    }
  }
.intro {
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .introContentWrapper {
    padding-top: clamp(65px, 14vw, 240px);
    width: 690px;
    text-align: center;
  }

  .intro p {
    font-size: 2rem;
    margin-bottom: 2rem;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .intro {
      padding: 0;
    }

    .intro p {
      font-size: 1.25rem;
      margin-bottom: 1.25rem;
    }
  }
.intro {
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .introContentWrapper {
    padding-top: clamp(65px, 14vw, 240px);
    /* padding-bottom: clamp(85px, 11vw, 205px); */
    width: 690px;
    text-align: center;
  }

  .intro p {
    font-size: 2rem;
    margin-bottom: 2rem;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .intro {
      padding: 0;
    }

    .intro p {
      font-size: 1.25rem;
      margin-bottom: 1.25rem;
    }
  }
.free-workshop-content-wrapper {
    padding-top: clamp(65px, 14vw, 200px);
    padding-bottom: clamp(85px, 11vw, 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color);
  }

  .free-workshop-content-wrapper .italic-heading {
    padding-bottom: 3rem;
  }

  .free-workshop-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

    .free-workshop-content span {
     display: block;
     font-family: "noiGrotesk";
     font-size: 1rem;
    }

    .free-workshop-content p {
      font-size: 1.75rem;
    }

    .free-workshop-content li {
      padding-bottom: 4rem;
    }

    .free-workshop-content {
      font-size: 1.2rem;
    }
.free-workshop-target {
    min-height: 100vh;
    display: flex;
    background-color: transparent;
  }

  .free-workshop-target-content,
  .free-workshop-target-image {
    width: 50%;
    height: 100%
  }

  .free-workshop-target-image {
    object-fit: cover;
  }

  .free-workshop-target-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .workshop-ordered ol {
    padding-left: 0;
    list-style-position: inside;
  }
.intro.workshop-footer {
    background-color: var(--main-color);
    padding-bottom: clamp(85px, 11vw, 205px);

  }

  .workshop-footer p {
    text-wrap: balance;
  }
.mission {
    position: relative;
    height: 100vh;
    width: 100%;
  }

  .mission img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .missionContentWrapper {
    position: relative;
    z-index: 10;
    color: white;
    padding-top: clamp(65px, 14vw, 180px);
  }

  .missionContentWrapper .link {
    border-color: white;
  }

  .mission-content {
    font-size: 2rem;
    max-width: 690px;
    box-sizing: content-box;
    padding-top: 2rem;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .mission-content {
      font-size: 1.25rem;
      margin-bottom: 1.25rem;
    }
  }
.free-workshop-target {
    height: 100vh;
    display: flex;
    background-color: transparent;
  }

  .free-workshop-target-content,
  .free-workshop-target-image {
    width: 50%;
    height: 100%
  }

  .free-workshop-target-image {
    object-fit: cover;
  }

  .free-workshop-target-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .workshop-unordered li {
    list-style: disc;
    list-style-position: inside;
  }

  @media (max-width: 850px) {

    .free-workshop-target {
      flex-direction: column;
      height: auto;
    }

    .free-workshop-target-content,
    .free-workshop-target-image {
      width: 100%;
    }

    .free-workshop-target-content {
      order: 1;
      padding: 40px 0;
    }

  }
.product-add-banner {}

.product-wrapper {
  display: flex;
}

.productGallery,
.productForm {
  width: 50%;
  height: 100vh;
}

/* Product Gallery */

.productGallery {
  position: sticky;
  top: 0;
}

.productGallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* Product Form */

.productForm {
  height: auto;
}

.productFormContent {
  padding: 170px var(--body-margin) 97px var(--header-margin);
}

.productTitle {
  font-size: 1.875rem;
}

.productSubtitle {
  padding-top: 0.3rem;
  padding-bottom: 0.1rem;
  font-size: 0.95rem;
  text-transform: none;
  font-style: italic;
}

.productDescription {
  margin-top: 31px;
}

.productDescription h5 {
  padding-top: 1rem;
  font-size: 0.875rem;
}

.productDescription p {
  padding-bottom: 1rem;
}

.addToCart {
  margin-top: 33px;
  cursor: pointer;
}

.disclaimer {
  padding-top: 16px;
}


/*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

@media (max-width: 900px) {
  .singleImage {
    position: relative !important;
    min-height: 70 svh;
  }
}

@media (max-width: 850px) {
  .product-wrapper {
    flex-direction: column;
  }

  .productGallery.free-workshop-gallery {
    height: 680px;
  }

  .productGallery,
  .productForm {
    width: 100%;
  }

  .productGallery {
    position: relative;
    height: 100%;
  }

  .productFormContent {
    box-sizing: border-box;
    padding: 39px calc(var(--header-margin) + 10px);
  }

  .addToCart {
    width: 100%;
    padding: 18px 0;
  }

}
.product-wrapper {
    display: flex;
  }

  .productGallery,
  .productForm {
    width: 50%;
    height: 100vh;
  }

  /* Product Gallery */

  .productGallery {
    position: sticky;
    top: 0;
  }

  .productGallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
  }

  .mySwiper {
    height: 100%;
    --swiper-theme-color: var(--dark-color);
    --swiper-navigation-size: 22px;
    --swiper-navigation-sides-offset: var(--main-padding);
    --swiper-pagination-bottom: 30px;
    --swiper-pagination-bullet-width: 6px;
    --swiper-pagination-bullet-height: 6px;
  }

  .mySwiper svg {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease
    , visibility 0.3s ease;
  }

  .mySwiper:hover svg {
    visibility: visible;
    opacity: 1;
  }

  .video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    background-color: black;
  }


  /* Product Form */

  .productForm {
    height: auto;
  }

  .productFormContent {
    padding: 170px var(--body-margin) 97px var(--header-margin);
  }

  .productTitle {
    font-size: 1.875rem;
  }

  .productSubtitle {
    padding-top: 0.3rem;
    padding-bottom: 0.1rem;
    font-size: 0.95rem;
    text-transform: none;
    font-style: italic;
  }

  .workshopInfo {
    text-transform: uppercase;
  }

  .workshopInfo:first-of-type {
    padding-top: 29px;
  }

  .productDescription {
    margin-top: 31px;
  }

  .productDescription h5 {
    padding-top: 1rem;
    font-size: 0.875rem;
  }

  .productDescription p {
    padding-bottom: 1rem;
  }

  .addToCart {
    margin-top: 33px;
    cursor: pointer;
  }

  .disclaimer {
    padding-top: 16px;
  }

  .infos-accordion {
    margin-top: 120px;
  }

  .accordionElement p {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  .accordionElement ul {
    list-style-position: outside;
    margin-left: 0.9rem;
  }

  .info-accordion {
    /* width: 45%; */
    border-bottom: 1px solid var(--dark-color-border);
    overflow-y: hidden;
    cursor: pointer;
  }

  .info-accordion:last-of-type {
    border: unset;
  }

  .heading {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 15px;
  }

  .heading h5 {
    margin: 0;
  }

  .heading span {
    font-size: 27px;
    font-weight: 100;
    font-family: noiGrotesk;
    line-height: 20px;
    margin-bottom: 5px;
  }

  .description {
    visibility: hidden;
    height: 0;
    opacity: 0;
    padding-Bottom: 0;
    transition: height 0.3s ease
    , visibility 0.3s ease
    , opacity 0.3s ease
    , padding 0.3s;
  }

  .accordion-open .description {
    visibility: initial;
    height: auto;
    opacity: 1;
    padding-bottom: 15px;
  }

  .accordion-open .plus-icon {
    display: none;
  }

  .accordion-open .minus-icon {
    display: inline;
  }

  .minus-icon {
    display: none;
  }

  .description img {
    margin-top: 20px;
    max-width: 100%;
    object-fit: contain;
    height: auto;
  }

  .description ul {
    list-style-type: disc;
    list-style-position: inside;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 900px) {
    .mySwiper svg {
      visibility: visible;
      opacity: 1;
    }

    .mySwiper {
      --swiper-navigation-size: 0;
      margin-top: 75px;
    }

    .mySwiper .swiper-slide {
      height: 70 svh;
    }

    .singleImage {
      position: relative !important;
      min-height: 70 svh;
    }
  }

  @media (max-width: 850px) {
    .product-wrapper {
      flex-direction: column;
    }

    .productGallery,
    .productForm {
      width: 100%;
    }

    .productGallery {
      position: relative;
      height: 100%;
    }

    .swiper {
      height: 680px;
    }

    .productFormContent {
      box-sizing: border-box;
      padding: 39px calc(var(--header-margin) + 10px);
    }

    .addToCart {
      width: 100%;
      padding: 18px 0;
    }

    .infos-accordion {
      margin-top: 36px;
    }

    .info-accordion {
      width: 100%;
    }

    .heading {
      margin: 10px 0 5px;
    }

    .heading h2 {
      font-size: 0.8125rem;
      margin-top: 3px;
    }

  }
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .search-results .prev,
  .search-results .page,
  .search-results .next {
    grid-column: 1 / -1;
  }
.workshops-wrapper {
    margin-bottom: 80px;
    padding-top: 150px;
    margin-left: var(--body-margin);
    margin-right: var(--body-margin);
  }

  .courses,
  .workshops {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: -55px;
  }

  .courses {
    padding-bottom: 100px;
  }

  .workshop-online-wrapper {
    width: 235px;
  }

  .workshopCard {
    margin-top: 110px;
    display: flex;
    gap: 41px;
    padding-bottom: 61px;
    border-bottom: 1px solid var(--dark-color-border);
  }

  .online-card {
    padding-left: calc(17px + 26px);
  }

  .workshopCard:last-of-type,
  .workshopCard:nth-last-of-type(2):nth-child(odd) {
    border: none;
  }

  .imageAndDate {
    display: flex;
    gap: 17px;
  }

  .imageAndDate p {
    font-size: 0.75rem;
  }

  .workshop-image {
    object-fit: cover;
  }

  .date {
    font-size: 0.875rem;
  }

  .month {
    text-transform: capitalize;
  }

  .workshop-content {
    max-width: 275px;
    display: flex;
    flex-direction: column;
  }

  .workshop-title {
    font-size: 1.5rem;
    margin-bottom: 6px;
  }

  .workshop-info {
    color: var(--button-inactive);
    margin-bottom: 17px;
  }

  .infoElement {
    font-size: 0.75rem;
    text-transform: uppercase;
  }

  .description {
    margin-bottom: 26px;
  }

  .buttonLink {
    margin-top: auto;
  }

  .workshop-content button {
    font-size: 0.75rem;
  }

  .imageMobile {
    display: none;
  }

  @media (max-width: 850px) {
    .workshops-wrapper {
      padding-top: 110px;
      margin-left: var(--header-margin);
      margin-right: var(--header-margin);
    }

    .courses,
    .workshops {
      grid-template-columns: 1fr;
      margin-top: 0;
    }
  }

  @media (max-width: 750px) {
    .imageDesktop {
      display: none;
    }

    .imageMobile {
      display: initial;
    }

    .imageMobile img {
      width: 100%;
      object-fit: cover;
      padding-bottom: 10px;
    }

    .workshopCard {
      margin-top: 27px;
      padding-bottom: 27px;
    }

    .workshopCard,
    .workshopCard:last-of-type,
    .workshopCard:nth-last-of-type(2):nth-child(odd) {
      border-bottom: 1px solid var(--dark-color-border);
    }

    .workshop-title {
      font-size: 1rem;
    }

    .workshop-content button {
      padding-left: 0;
      width: 100%;
      padding-right: 0;
    }
  }

/* CSS from block stylesheet tags */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }

/* CSS from snippet stylesheet tags */
.contact {
    height: 576px;
    display: flex;
  }

  .contact > * {
    width: 50%;
  }

  .contactVideo {
    position: relative;
  }

  .contactVideo video {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .contactImageMobile {
    display: none;
  }

  .contactText {
    display: flex;
    align-items: center;
    padding-left: 118px;
    box-sizing: border-box;
  }

  .dark {
    background: var(--main-color);
  }

  .contactText h4 {
    margin-bottom: 1rem;
    text-transform: uppercase;
  }

  .contactText div {
    margin-bottom: 68px;
  }

  .contactContentWrapper {
    display: flex;
    flex-direction: column;
  }

  .contactContentWrapper a {
    width: max-content;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .contact > * {
      width: 100%;
    }

    .contact {
      height: auto;
      flex-direction: column;
      scroll-margin-top: calc(-401px + 73px);
    }

    .contactVideo {
      height: 401px;
      position: relative;
    }

    .contactImageDesktop {
      display: none;
    }

    .contactImageMobile {
      display: initial;
    }

    .contactText {
      padding: 45px var(--body-margin) 55px;
    }

    .contactText p {
      margin-bottom: 30px;
    }
  }
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
.wrapper {
    display: flex;
    gap: 10px;
  }

  .wrapper li {
    text-transform: uppercase;
    color: var(--main-color-inactive);
  }

  .dark li {
    color: var(--main-color-dark-inactive);
  }

  .wrapper .active {
    color: var(--main-color);
  }

  .wrapper .activeDark {
    color: var(--dark-color);
  }
.images {
    position: relative;
    line-height: 0;
    margin-bottom: 20px;
    background-color: var(--light-color);
    overflow: hidden;
  }

  .images img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  .productSecondImage {
    position: absolute;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease
    , visibility 0.25s ease;
  }

  .productCardWrapper:hover .productSecondImage {
    visibility: visible;
    opacity: 1;
  }

  .cardInfo a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
  }

  .productTitle-card {
    text-transform: none;
    margin-bottom: 0.1rem;
    font-size: 0.8125rem;
    height: 18px;
  }

  .productPrice {
    font-size: 0.75rem;
  }

  .addToCart-card {
    cursor: pointer;
    opacity: 0;
    width: 100%;
    padding-left: unset;
    padding-right: unset;
  }

  .productCardWrapper:hover .addToCart-card {
    opacity: 1;
  }


  /*
   ===========================================
   RESPONSIVE: TABLET
   ===========================================
*/

  @media (max-width: 850px) {
    .cardInfo a {
      margin-bottom: 0;
    }

    .addToCart-card {
      display: none;
    }
  }