/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
:root {
    --color-primary: #ebe6d7;
    --color-secondary: #faf8f2;
}
@import url('https://fonts.googleapis.com/css2?family=Halant:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet');
body {
    font-family: 'Halant', serif;
    overflow-x: hidden;
}

:root {
    --primary-color: #645832;
    --secondary-color: rgba(100, 88, 50, 0.1);
    --star-color: #645832;
    --write-review-text-color: white;
    --write-review-bg-color: #645832;
    --paginate-color: #645832;
    --border-radius: 0;
    --reviewer-name-color: #645832;
    --color-background: rgb(246, 244, 237);
    --gradient-background: #f6f4ed;
    --color-foreground: rgb(51, 51, 51);
    --color-background-contrast: rgb(204, 192, 152);
    --color-shadow: rgb(18, 18, 18);
    --color-headings: #333333;
    --color-text: #333333BF;
    --color-button: rgb(100, 88, 50);
    --hover-button: rgb(0, 0, 0);
    --border-color: #645832;
    --price-color: #645832;
    --compare-price-color: #666666;
    --secondary-button-bg-hover: #645832;
    --secondary-text-color: #645832;
    --secondary-button-text-hover: #ffffff;
    --primary-button-text: #333333;
    --primary-button-text-hover: #645832;
    --color-button-text: rgb(255, 255, 255);
    --color-secondary-button: rgb(246, 244, 237);
    --color-secondary-button-text: rgb(18, 18, 18);
    --color-link: rgb(18, 18, 18);
    --color-badge-foreground: rgb(51, 51, 51);
    --color-badge-background: rgb(246, 244, 237);
    --color-badge-border: rgb(51, 51, 51);
    --payment-terms-background-color: rgb(246, 244, 237);
    --color-border: #000000;
    --color-footer-bg: #ebe6d7;
    --color-footer-social_link: #666666;
    --inout-color: #ffffff;
    --footer-title-color: #000000;
    --footer-border-color: #d2d2d1;
    --footer-color-content: #333333;
    --hover-color: #645832;
}
.header:not(.transparent) .header-nav-main.nav > li > a:hover, .header:not(.transparent) .header-nav-main.nav > li.active > a, .header:not(.transparent) .header-nav-main.nav > li.current > a, .header:not(.transparent) .header-nav-main.nav > li > a.active, .header:not(.transparent) .header-nav-main.nav > li > a.current {
  color: #645832 !important;
}
.nav-slide {
  position: relative !important;
  left: 46% !important;
  transform: translateX(-50%) !important;
  width: 102vw !important;
  max-width: 110vw !important;
  box-sizing: border-box !important;
  transition: max-height 0.6s ease, opacity 0.6s ease;
  z-index: 9999;
  overflow: hidden;
  max-height: 500px;
  background-color: #645832;
  margin: 0 !important;
  padding-top: 0 !important;
}
.slide-up-close {
  max-height: 0 !important;
  opacity: 0;
}
.topbar-close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 5;
  padding: 0 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.ttannouncement-bar {
  overflow: hidden;
  width: 96%;
  white-space: nowrap;
}
.marquee-content {
  display: inline-flex;
  animation: marquee-scroll 25s linear infinite;
}
.ttannouncement-bar:hover .marquee-content {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.marquee-slide a {
  text-decoration: none;
  color: #ffffff;
}
.marquee-slide {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding: 14px 0;
  position: relative;
}
.marquee-slide::after {
  content: '';
  position: absolute;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ffffff;
}
.wpcf7-form{
  margin-bottom: 0;
}
.header-top-title {
  padding: 0 60px;
  text-transform: capitalize;
  &:hover{
    color: #fff;
  }
}
.header-nav-main .nav-top-link{
  font-size: 18px;
}
ul.header-nav.header-nav-main.nav.nav-left.nav-size-large.nav-spacing-xlarge{
  justify-content: center;
}
.newsletter-container {
  text-align: center;
}
.newsletter-title {
  font-size: 46px;
  color: var(--footer-color-content) !important;
  margin-bottom: 20px;
  font-weight: 500;
}
.newsletter-input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 1.1rem;
  color: var(--footer-color-content);
  padding: 0;
}
.newsletter-input::placeholder {
  color: #7a7a7a;
}
.newsletter-btn {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0 0 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsletter-btn i {
  font-size: 1.3rem;
  color: var(--footer-color-content);
  transition: transform 0.3s ease;
}
.newsletter-btn:hover i {
  transform: rotate(45deg) !important;
}\div.newsletter-form br {
  display: none;
}
div.newsletter-form p {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 8px 15px;
  box-sizing: border-box;
}
div.newsletter-form span.wpcf7-form-control-wrap {
  flex: 1;
}
div.newsletter-form input.newsletter-input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 1.1rem;
  color: var(--footer-color-content);
  padding: 0;
  box-shadow: none;
  height: auto;
  margin-bottom: 0;
}
div.newsletter-form button.newsletter-btn {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0 0 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  margin-bottom: 0;
}
div.newsletter-form button.newsletter-btn i {
  font-size: 1.3rem;
  color: var(--footer-color-content);
  transition: transform 0.3s ease;
}
div.newsletter-form button.newsletter-btn:hover i {
  transform: translate(2px, -2px);
}
.header {
  .header-wrapper {
    box-shadow: none !important;
    .header-main {
      .header-nav {
        gap: 10px;
        .menu-item{
          a{
            color: var(--footer-color-content);
          }
        }
        .menu-item-152 {
          position: relative;
          .nav-dropdown {
            display: block !important;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(15px);
            transition: opacity .35s ease, transform .35s ease, visibility .35s ease, border-top-color .35s ease !important;
            &::before {
              content: "";
              position: absolute;
              top: -30px;
              left: 0;
              right: 0;
              height: 30px;
              background: transparent;
              z-index: 999;
            }
          }
          &:hover {
            .nav-dropdown {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: translateY(0);
            }
          }
        }
        .header-search{
          a{
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
           -webkit-transition: all 400ms ease-in-out 0s; 
           .icon-search{
              text-decoration: none;
              transition: all 400ms ease-in-out 0s;
              -webkit-transition: all 400ms ease-in-out 0s;
              -moz-transition: all 400ms ease-in-out 0s;
              -o-transition: all 400ms ease-in-out 0s;
              -ms-transition: all 400ms ease-in-out 0s;
              &::before{
                content:'\f002';
                font-family: "Font Awesome 6 Pro";
                font-size: 24px;
              }
            }
            &:hover{
              .icon-search{
                transform: rotateY(180deg);
                -webkit-transform: rotateY(180deg);
                -moz-transform: rotateY(180deg);
              }
            }
            &::after{
              content:'Search';
            }
          }
        }
        .cart-item{
          a{
            display: flex;
            align-items: center;
            font-size: 14px;
            gap: 10px;
            .custom-cart-count-text{
              margin-left: 0;
            }
            .icon-shopping-basket{
              text-decoration: none;
              transition: all 400ms ease-in-out 0s;
              -webkit-transition: all 400ms ease-in-out 0s;
              -moz-transition: all 400ms ease-in-out 0s;
              -o-transition: all 400ms ease-in-out 0s;
              -ms-transition: all 400ms ease-in-out 0s;
              
              &::before{
                content:'\f290';
                font-family: "Font Awesome 6 Pro";
                font-size: 24px;
              }
            }
            &:hover{
              .icon-shopping-basket{
                  transform: rotateY(180deg);
                  -webkit-transform: rotateY(180deg);
                  -moz-transform: rotateY(180deg);
              }
            }
          }
        }
      }
    }
  }
}
.searchform-wrapper {
  .searchform{
    input::placeholder{
      content: 'Search for...' !important;
    }
  }
}


.ss-menu-shop{
  background-color: #FAF8F2 !important;
  border-top: 2px solid #645832;
  transition: opacity .35s ease, transform .35s ease, visibility .35s ease, border-top-color .35s ease;
  .row-menu-shop{
    padding: 0 50px;
    .col-list-menu{
      .text-menu-shop{
        .ul-menu-shop{
          display: grid;
          gap: 24px 88px;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          list-style: none;
          margin: 0 auto;
          width: 100%;
          padding: 0;
          .li-title-menu-shop{
            margin: 0;
            a{
              max-width: 100%;
              width: 100%;
              display: block;
              font-size: 18px;
              color: var(--footer-color-content);
              padding-bottom: 10px;
              border-bottom: 1px solid rgba(51, 51, 51, 0.1);
              &:hover{
                color: var(--hover-color);
                border-color: var(--hover-color);
              }
            }
            ul{
              list-style:none;
              margin: 0;
              margin-top: 10px;
              li{
                margin: 0;
                a{
                  width: 100%;
                  padding-bottom: 10px;
                  border-bottom: 0;
                  font-size: 15px;
                }
              }
            }
          }
        }
      } 
    }
    .col-image{
      .img-menu-hover a {
          position: relative;
          display: block;
          overflow: hidden;
      }
      .img-menu-hover a:after {
          content: "";
          background: #00000012;
          position: absolute;
          top: 10px;
          right: 10px;
          bottom: 10px;
          left: 10px;
          opacity: 0;
          transition: all 0.4s ease-in-out;
          transform: rotate(-180deg) scale(0);
          pointer-events: none;
      }

      .img-menu-hover a:hover:after {
          opacity: 1;
          transform: rotate(0) scale(1);
      }
    }
  }
}

.ss-footer{
  .align-center{
    margin-bottom: 80px;
  }
  .row{
    .pb-0{
      .col-inner{
        padding-bottom: 0 !important;
        .ux-logo{
          .ux-logo-link{
            padding-left: 0 !important;
          }
        }
      }
    }
    .col-icon{
      .text{
        p{margin-bottom: 0;}
      }
      .social-icons {
        display: flex;
        gap: 8px;
        .icon{
          padding: 15px 0;
          border: 0;
          margin: 0;
          color: var(--color-footer-social_link);
          transition: all 400ms ease-in-out 0s;
          -webkit-transition: all 400ms ease-in-out 0s;
          -moz-transition: all 400ms ease-in-out 0s;
          -o-transition: all 400ms ease-in-out 0s;
          -ms-transition: all 400ms ease-in-out 0s;
          &:hover{
            border: 0;
            color: var(--color-footer-social_link) !important;
            background-color: transparent !important;
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            i{
              color: var(--color-footer-social_link) !important;
            }
          }
        }
      }
    }
    .col-text{
      .text{
        h2{
          color: var(--footer-color-content);
          margin-bottom: 28px;
          font-weight: 600;
          font-size: 24px;
        }
        ul{
          list-style: none;
          margin-bottom: 0;
          & > li{
            margin-left: 0;
            margin-bottom: 15px;
            
            a{
              color: var(--footer-color-content);
              &:hover{
                color: var(--hover-color);
              }
            }
          }
        }
      }
    }
  }
}

.absolute-footer{
  padding: 10px 0;
  border-top: 1px solid var(--footer-border-color);
  .copyright-footer{
    color: var(--footer-color-content);
    font-size: 16px;
  }
}

.ss-footer .ux-menu-title{
  font-size: 24px;
  margin-bottom: 20px;
  color: #000;
}
.ss-footer .ux-menu-link__link {
  font-size: 16px;
  color: #000;
}
.ss-footer .ux-menu-link:hover .ux-menu-link__link{
  color: var(--footer-color-content);
}
.ss-footer h3{
  font-size: 24px;
  margin-bottom: 20px;
  color: #000;
}
.ss-footer li{
  font-size: 16px;
  color: #000;
}

/* ABOUT US */
.ss-imb-au{
  .row-imb-au{
    .col-imb-au{
      padding: 0;
        .text-img-au{
          padding: 50px;
          h2{font-size: 46px; color: var(--color-headings);margin: 0; margin-bottom: 10px; font-weight: 500;}
          p{font-size: 16px; color: var(--color-text);margin: 0; margin-bottom: 10px;}
        }
    }
  }
}

.video-banner {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  background: #1a1a1a;
  .video-banner__iframe-placeholder{
    height: 100%;
  }
}

.video-banner__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.video-banner__poster.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

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

.video-banner__poster::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.video-banner__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 2rem;
}

.video-banner__content .caption-with-letter-spacing {
  margin-top: 24px;
  margin-bottom: 0;
  font-size: 16px;
  letter-spacing: 0.15em;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.85);
}

.video-banner__content .title {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  color: #fff;
}

.deferred-media__poster-button-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deferred-media__poster-button-wrapper .circle-text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: vb-rotate 12s linear infinite;
}
.deferred-media__poster-button-wrapper .circle-text text {
  font-size: 7.5px;
  fill: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
@keyframes vb-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.deferred-media__poster-button {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}
.deferred-media__poster-button-wrapper:hover .deferred-media__poster-button {
  background: transparent;
  transform: scale(1.08);
}
.deferred-media__poster-button .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.deferred-media__poster-button .icon-play {
  width: 20px;
  height: 20px;
  margin-left: 2px;
}

.video-banner__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.video-banner.is-playing .video-banner__video {
  opacity: 1;
}
.video-banner__video video,
.video-banner__video iframe,
.video-banner__iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

.video-banner__pause-btn {
 display: none !important;
}
.product-au, .shop-container > .products{
  .badge-container{
    margin: 0;
    position: absolute !important;
    top: 2%;
    left: 3%;
    z-index: 5;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    .badge{
      max-height: 20px;
      .badge-inner{
        background-color: #645832;
        padding: 2px 10px;
      }
    }
  }
  .product-small:hover .badge-container{
    opacity: 1;
    transform: translateX(0);
  }

  .product-small .box-image .image-fade_in_back{
    position: relative;
    overflow: hidden;
  }
  .product-small .box-image .back-image{
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .product-small:hover .box-image .back-image{
    opacity: 1;
    transform: translateX(0);
  }
  .product-small .box-image .image-fade_in_back > a > img:first-child{
    position: relative;
    z-index: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .product-small .box-image .back-image{
    position: absolute !important;
    inset: 0;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  .product-small{
    .box-text{
      padding: 15px 0;
      text-align: left;
      .title-wrapper{
        .product-title, .mitti-product-excerpt{
          font-size: 18px; color: var(--color-headings); margin: 0; a{margin: 0; margin-bottom: 7px; color: var(--color-headings); display: -webkit-box; -webkit-line-clamp: 1; overflow: hidden; -webkit-box-orient: vertical;}
        }
        .mitti-product-excerpt{padding-bottom: 0; margin-bottom: 7px; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 1; overflow: hidden; -webkit-box-orient: vertical;}
      }
      .price-wrapper{
        .price{
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 18px;
          color: var(--price-color);
          .woocommerce-Price-amount{
            bdi{
              color: var(--price-color);
            }
          }
          ins{
            order: 1;
            font-size: 18px;
            .woocommerce-Price-amount{
              bdi{
                color: var(--price-color);
              }
            }
          }
          del{
            order: 2;
            font-size: 14px;
            text-decoration: none;
            .woocommerce-Price-amount{
              bdi{
                color: var(--compare-price-color);
                font-size: 14px;
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
  }

  .product-gallery-thumbs{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 0;
    .gallery-thumb{
      width: 40px;
      height: 40px;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color 0.3s ease, opacity 0.3s ease;
      opacity: 0.6;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      &:hover,
      &.is-active{
        opacity: 1;
        border-color: var(--color-primary, #645832);
      }
    }
  }

  /* Hover quick-add button shown on second image */
  .product-small{
    position: relative;
  }

  .product-small .hover-quickadd-btn{
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    background-color: var(--color-secondary);
    color: var(--primary-button-text);
    border-radius: 4px;
    text-decoration: none;
    opacity: 0;
    transform: translateY(6px);
    transition: .5s ease;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 3;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    margin: 0;
    text-transform: none;
    ;
    &:hover{
      background-color: var(--border-color);
      color: white;
      transition: .5s ease;
    }
  }

  .product-small:hover .hover-quickadd-btn{
    opacity: 1;
    transform: translateY(0);
  }

  .product-small .hover-quickadd-btn.choose-option{
    background: transparent;
    color: var(--color-button, #645832);
    border: 2px solid var(--color-button, #645832);
  }

  /* Quick add modal */
  #quickadd-modal{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    background: rgba(0,0,0,0.45);
    padding: 20px;
  }
  #quickadd-modal.is-open{ display: flex; }
  #quickadd-modal .quickadd-inner{
    width: 100%;
    max-width: 1100px;
    background: #fff;
    border-radius: 6px;
    max-height: 90vh;
    overflow: auto;
    position: relative;
    padding: 18px;
  }
  #quickadd-modal .quickadd-close{
    position: absolute;
    right: 12px;
    top: 12px;
    background: transparent;
    border: 0;
    font-size: 20px;
    cursor: pointer;
  }
}
.ss-hinh-anh{
  .row{
    .col{
      .col-inner{
        height: 100%;
        .img, .img-inner{height: 100%;}
      }
      .imb-bold-build{
        .box-text{
          padding: 0; 
          font-size: 20px;
          .box-text-inner{
            font-size: 20px;
            padding: 20px 0;
            border-bottom: 1px solid var(--border-color);
            color: var(--color-headings);
            a{
              margin: 0; 
              display: flex;
              align-items: center;
              justify-content: space-between;
              transition: .3s ease;
              &:hover{
                &::after{
                  transform: rotate(45deg);
                  transition: .3s ease;
                }
              }
              &::after{
                content: '\e09f';
                font-family: "Font Awesome 6 Pro";
                transition: .3s ease;
              }
              p{
                margin: 0;
              }
            }
          }
        }
      }
    }
  }
}

.ss-chinh-sach{
  .row{
    padding:40px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    .col-chinh-sach{
      .icon-box {
        .icon-box-img{
          margin-bottom: 15px;
          text-decoration: none;
          -webkit-transition: all 400ms ease-in-out 0s;
          .icon{
            transition: all 400ms ease-in-out 0s;
            -webkit-transition: all 400ms ease-in-out 0s;
            -moz-transition: all 400ms ease-in-out 0s;
            -o-transition: all 400ms ease-in-out 0s;
            -ms-transition: all 400ms ease-in-out 0s;
          }
        }
        .icon-box-text{
          h3{font-weight: 500;}
        }
          &:hover{
          .icon{
              transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
          }  
        }
      }   
    }
  }
}

/* HOME */
.text-arrow {
  p {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;

    a {
      display: inline-flex; 
      align-items: center;
      width: fit-content;
      border-bottom: 2px solid var(--border-color);
      font-size: 18px;
      margin: 0;
      gap: 10px;
      white-space: nowrap; 
      transition: border-color .3s ease;

      &::after {
        content: '\e09f';
        font-family: "Font Awesome 6 Pro";
        transition: transform .3s ease;
      }

      &:hover {
        &::after {
          transform: rotate(45deg);
        }
      }
    }
  }
}
.ss-banner{
  .slider{
    .flickity-button{
      .flickity-button-icon{
            background-color: white;
            height: 50px;
            min-width: 50px;
            padding: 18px;
            path{
              fill: #000;
            }
      }
      &:hover{
        .flickity-button-icon{
          background-color: var(--hover-color);
           path{
            fill: #fff;
          }
        }
      }
    }
  }
  .banner-2{
    .text-banner{
      .text-inner{
        align-items: center;
        p{width: 12%;};
      }
    }
  }
  .text-banner{
    .text-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      h2{font-size: 52px; color: var(--color-headings);}
      p{
        width: 18%;
        a{
          border-bottom: 1px solid var(--border-color);
          margin: 0;
          color: var(--color-headings);
          font-size: 18px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          transition: .3s ease;
          gap: 10px;
          &:hover{
            color: var(--hover-color);
            &::after{
              transform: rotate(45deg);
              transition: .3s ease;
              color: var(--hover-color);
            }
          }
          &::after{
            content: '\e09f';
            font-family: "Font Awesome 6 Pro";
            transition: .3s ease;
          }
        }
      }
    }
  }
}
.ss-categories{
  background-color: var(--color-primary) !important;
  .row{
    .col{
      .text-banner{
        
        h2{font-weight: 500; font-size: 46px; color: var(--color-headings); margin-bottom: 10px;}
        p{font-size: 16px; color: var(--color-text); margin-bottom: 0;}
      }
    }
  }
  .row-cat-sp{
    margin-top: 40px;
    .pb-0{
      padding: 0;
      .large-columns-4{
        margin: 0;
        .flickity-button{display: none;}
        .flickity-viewport{
          .flickity-slider{}
          .product-category {
            
            a{
              .box{
                .box-text{
                  text-align: left;
                  border-bottom: 2px solid var(--border-color);
                  padding: 20px 0;
                  .box-text-inner{
                    h5{
                      font-size: 24px; 
                      font-weight: 500;
                      color: var(--color-headings);
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      transition: .3s ease;
                      text-transform: capitalize;
                      &::after{
                        content: '\e09f';
                        font-family: "Font Awesome 6 Pro";
                        transition: .3s ease;
                      }
                    }
                  }
                }
              }
              &:hover{
                .box{
                  .box-text{
                    .box-text-inner{
                      h5{
                        color: var(--hover-color);
                        &::after{
                           transform: rotate(45deg);
                           transition: .3s ease;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@keyframes floatUpDown{
  0%, 100% {
      transform: translateY(28px);
  }
  50% {
      transform: translateY(-58px);
  }
}
.ss-finest{
  padding-bottom: 76px !important;
  .row{
    margin-right: 20px;
    .col-anh-float{
      overflow: visible;
      .col-inner{overflow: visible; margin-top: 28px !important;}
      .img{
        margin-bottom: 0;
        overflow: visible;
        animation: floatUpDown 7s ease-in-out infinite;
        transition: transform 0.5s ease;
        z-index: 1;
        .img-inner{
          overflow: visible;
          padding-left: 20px;
          img{
              display: block;
              width: 77%;
              height: auto;
          }
        }
      }
      .about-grid-bg-block{
        display: flex !important;
        position: absolute;
        top: -18px;
        left: 0;
        right: 0;
        width: 50%;
        min-height: 108%;
        z-index: 0;
        background: #ebe6d7;
      }
    }
    .col-text-center{
      .text-banner{
        h2{font-size: 46px; color: var(--color-headings); font-weight: 500; margin-bottom: 15px;}
        p{font-size: 16px; color: #666666; margin-bottom: 15px;}
      }
      .text-arrow{
        p{
          justify-content: flex-start;
        }
      }
    }
  }
}
@keyframes pulse-border{
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}
.ss-italy{
  background-color: var(--color-secondary);
  .section-content{padding: 0 34px; padding-right: 24px;}
  .row{
    .col-text{
      .text-banner{
        h2{font-size: 46px; color: var(--color-headings); font-weight: 500; margin-bottom: 15px;}
        p{font-size: 16px; color: #666666; margin-bottom: 15px;}
      }
      .text-arrow{
        padding-bottom: 15px;
        p{
          justify-content: flex-start;
        }
      }
    }
    .col-vid{
      .img{
        padding-bottom: 15px;
      }
      .video-button-wrapper{
        a{
          height: 100px;
          width: 100px;
          background-color: var(--hover-color);
          border: 0;
          margin: 0;
          .icon-play{
            height: 100px;
            &::before{
              line-height: 100px;
              font-size: 44px;
            }
          }
          &::before{
            content: "";
            position: absolute;
            z-index: 0;
            left: 50%;
            top: 50%;
            display: block;
            width: 90px;
            height: 90px;
            background-color: var(--hover-color);
            border-radius: 50%;
            animation: pulse-border 1500ms ease-out infinite;
          }
        }
      }
    }
  }
}
.ss-the-rest{
  background-color: var(--color-secondary) !important;
}
.ss-20-off{
  background-color: var(--color-primary);
  .col-pic{}
  .col-text{
    padding: 30px 50px;
    .row{
      .col{
        .text-banner{
          h2{
            color: var(--color-headings);
            font-size: 46px;
            margin-bottom: 15px;
            font-weight: 500;
          }
          p{
            margin-bottom: 0;
            font-size: 16px;
            color: var(--color-text);
          }
        }
      }
    }
    .product-au{
      margin-top: 15px;
      
      .flickity-button:hover{
        .flickity-button-icon{
          padding-left: 0;
          filter: brightness(0) saturate(100%) invert(33%) sepia(29%) saturate(603%) hue-rotate(8deg) brightness(95%) contrast(93%);
        }
      }
      .previous{
        left: -3%;
        &:hover{
          .flickity-button-icon{
            left: 60%;
          }
        }
      }
      .next{
        left: 99%;
        &:hover{
          .flickity-button-icon{
            left: 60%;
          }
        }
      }
    }
  }
}
.ss-latest-new{
  padding-bottom: 0 !important;
  .row{
    .col{
      .text-banner{
        .blog__title{
          margin-bottom: 0;
        }
      }
    }
    
  }
  .row-cat-sp{
    margin-bottom: 0;
    .col{
      .flickity-viewport{
        .flickity-slider{width: 100% !important;}
        .post-item{
          padding: 0 15px 30px;
          .box-text{
            .post-title{
              font-size: 22px;
              font-weight: 500;
              a{
                display: -webkit-box;
                -webkit-line-clamp: 3;
                overflow: hidden;
                -webkit-box-orient: vertical;
                margin: 0;
                min-height: 86px;
              }
            }
            .is-divider{display: none;}
            .button{
              margin: 0 !important;
              border-bottom: 2px solid var(--border-color) !important;
              width: 28%;
              font-size: 18px;
              display: flex;
              margin: 0;
              transition: .3s ease;
              gap: 10px;
              text-transform: none;
              font-weight: 500;
              color: var(--color-text);
              &:hover{
                color: var(--hover-color) !important;
                &::after{
                  transform: rotate(45deg);
                  transition: .3s ease;
                }
              }
              &::after{
                content: '\e09f';
                font-family: "Font Awesome 6 Pro";
                transition: .3s ease;
              }
            }
          }
        }
      }
    }
  }
}


.ss-slide-home{
  background-color: var(--color-secondary);
  .section-content{
    padding: 0 50px;
   .marquee-auto-wrap {
    &::before{
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 2;
      width: 12%;
      left: 0;
      right: auto;
      background-image: linear-gradient(-90deg, transparent, var(--color-secondary));
    }
    &::after{
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 2;
      width: 12%;
      left: auto;
      right: 0;
      background-image: linear-gradient(-90deg, var(--color-secondary), transparent);
    }
   }
  }
  .box{
    width: 150px;
    height: 150px;
    max-width: 150px;
    .box-image{
      width: 150px ;
      height: 150px ;
    }
    img{
      width: 150px ;
      height: 150px ;
    }
  }
}

/* FAQ */
.ss-faq{
  background-color: var(--color-secondary);
  .row-text{
    .text-banner{
      h2{font-size: 52px; font-weight: 500; margin-bottom: 60px;}
      p{font-size: 18px; font-weight: 500; color: #645832; margin-bottom: 0;}
    }
  }
  .row-faq{
    .col-faq{
      .faq-class{
        .accordion-item{
          border-bottom: 2px solid var(--border-color);
          .accordion-title{
            border-top: 0;
            padding: 15px 0;
            font-size: 22px;
            font-weight: 500;
            color: var(--color-headings);
            line-height: 1.2;
            .toggle{
              right: 0;
              left: auto;
              margin-right: 0;    
              .icon-angle-down{
                width: 40px;
                height: 40px;
                &::before{
                  content: '\2b';
                  font-family: "Font Awesome 6 Pro";
                  height: 40px;
                  width: 40px;
                  font-size: 18px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-weight: bold;
                }
              }
            }
            &:hover{
              background-color: #F2F0EA !important;
            }
          }
          .active{
            background-color: transparent !important;
            .toggle{
              .icon-angle-down{
                width: 40px;
                height: 40px;
                &::before{
                  content: '\f068';
                  font-family: "Font Awesome 6 Pro";
                  height: 40px;
                  width: 40px;
                  font-size: 18px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-weight: bold;
                }
              }
            }
          }
          .accordion-inner{
            padding: 0;
            p{
              font-size: 18px;
              color: var(--color-text);
              margin-bottom: 15px;
            }
          }
        }
      }
    }
  }
}
/* CONTACT US */
.ss-contact-us{
  background-color: var(--color-secondary) !important;
  padding: 36px 50px 0 !important;
  .section-content{padding: 0 50px;}
  .row-text{
    .text-h1{
      h1{font-size: 52px; margin-bottom: 36px; font-weight: 500; color: var(--color-headings);}
    }
    .text-banner{
      p{font-size: 18px; margin-bottom: 0; color: #645832;}
      h2{font-size: 46px; margin-bottom: 0; color: var(--color-headings); font-weight: 500;}
    }
  }
  .row-icon-box{
    max-width: 1170px;
    margin-top: 36px;
    .icon-box-feat{
      padding: 10px 60px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      .icon-box-img{margin: 0;}
      .icon-box-img .icon .icon-inner img{padding-top: 0;}
      .icon-box-text{
        margin: 0;
        padding: 0;
        width: fit-content;
        flex: 0 0 auto;
        p{
          color: var(--color-headings);
          margin-bottom: 0;
        }
      }
    }
  }
  .row-form{
    margin-top: 36px;
    padding: 0 260px;
    .col-form{
      padding: 0;
      .text-banner{
        h2{margin-bottom: 36px;}
      }
    }
    .wpcf7{
      .contact-form{
        .col{
          padding: 0 7.5px 15px;
          &:last-child{padding-bottom: 0;}
          p{
            label{
                font-size: 16px;
                color: #333333;
                font-weight: 500;
                text-align: left;
                margin-bottom: 0;
            }
            .wpcf7-spinner{display: none;}
            .button{
              margin-top: 12px;
              margin-bottom: 0;
              padding: 5px 60px;
              font-weight: 500;
              font-size: 16px;
              color: #fff;
              background-color: var(--primary-button-text-hover);
              text-transform: capitalize;
              &:hover{
                background-color: #000000;
              }
            }
          }
          .wpcf7-form-control-wrap{
            input, textarea{
              padding: 15px;
              margin-bottom: 0;
              height: 45px;
              box-shadow: none;
              border-color: #908f8c;
              background-color: transparent;
              &::placeholder{
                color: var(--color-headings);
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
}
.wpcf7 .wpcf7-not-valid-tip{
  margin-top: 0 !important;
  color:  #fff !important;
  background-color: #645832 !important;
  &::after{
    border-bottom-color: #645832 !important;
  }
}
@media (max-width: 1000px) {
  .section{padding: 27px 0 !important;}
  .ttannouncement-bar{
    width: 94%;
  }
  .header {
    .header-wrapper {
      .header-main {
        .flex-row{
          align-items: center;
          .logo{
            order: 2!important;
          }
          .flex-left{
            flex: 0 1 0 !important;
            order: 1 !important;
            margin-right: 10px;
          }

        }
        .mobile-nav{
          height: 70px;
          .header-search{
            a{
              display: flex;
              align-items: center;
              gap: 10px;
              font-size: 14px;
              -webkit-transition: all 400ms ease-in-out 0s; 
              .icon-search{
                  text-decoration: none;
                  transition: all 400ms ease-in-out 0s;
                  -webkit-transition: all 400ms ease-in-out 0s;
                  -moz-transition: all 400ms ease-in-out 0s;
                  -o-transition: all 400ms ease-in-out 0s;
                  -ms-transition: all 400ms ease-in-out 0s;
                  &::before{
                    content:'\f002';
                    font-family: "Font Awesome 6 Pro";
                    font-size: 20px;
                    color: var(--footer-color-content);
                  }
                  }
                &:hover{
                  .icon-search{
                    transform: rotateY(180deg);
                    -webkit-transform: rotateY(180deg);
                    -moz-transform: rotateY(180deg);
                  }
                }
            }
          }
          .cart-item{
            a{
              display: flex;
              align-items: center;
              font-size: 14px;
              gap: 5px;
              .custom-cart-count-text{
                margin-left: 0;
                color: var(--footer-color-content);
              }
              .icon-shopping-basket{
                text-decoration: none;
                transition: all 400ms ease-in-out 0s;
                -webkit-transition: all 400ms ease-in-out 0s;
                -moz-transition: all 400ms ease-in-out 0s;
                -o-transition: all 400ms ease-in-out 0s;
                -ms-transition: all 400ms ease-in-out 0s;
                
                &::before{
                  content:'\f290';
                  font-family: "Font Awesome 6 Pro";
                  font-size: 20px;
                  color: var(--footer-color-content);
                }
              }
              &:hover{
                .icon-shopping-basket{
                    transform: rotateY(180deg);
                    -webkit-transform: rotateY(180deg);
                    -moz-transform: rotateY(180deg);
                }
              }
            }
          }
        }
      }
    }
  }
  .mfp-wrap {
    .mfp-close{
      left: 0;
      color: var(--footer-color-content);
      filter: brightness(0) invert(1);
    }
    .mfp-content{
      background-color: #FAF8F2;
      width: 500px;
      .sidebar-menu {
        padding: 50px 0;
        .nav{
          .active{
            .toggle{
              transform: rotate(90deg);
            }
          }
          .menu-item{
            border-top: 0;
            padding-left: 0;
            .toggle{
              font-size: 14px;
              .icon-angle-down{
                &:before{
                  content: '\f061';
                  font-family: "Font Awesome 6 Pro";
                  height: 14px;
                  display: block;
                  font-size: 14px;
                }
              }
            }
            .sub-menu {
              padding-bottom: 0;
            }
            a{
              color: var(--footer-color-content);
              font-size: 14px;
              text-transform: none;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
  .topbar-close { right: -22px; }

  .ss-footer{
    background-color: var(--color-primary) !important;
    padding: 20px 0 !important;
    .align-center{
      margin-bottom: 20px;
      .newsletter-container{
        h2{
          font-size: 30px;
        }
        .newsletter-form{
          & > p{
            padding: 5px 15px;
          }
        }
      }
    }
    .row{
      .col-icon{
        .text{
          p{font-size: 14px;}
        }
      }
      .col-text{
        .text{
          h2{font-size: 20px; margin-bottom: 15px;}
          ul{
            li{margin-bottom: 10px;}
          }
        }
      }
    }
  }
  .ss-imb-au{
    padding-bottom: 0 !important;
    .row-imb-au{
      display: flex;
      align-items: stretch !important;
      &:last-child{ 
        padding-bottom: 0;
      }
      .col-imb-au{
        padding: 0;
        .col-inner{
          height: 100%;
          .text-img-au{
            h2{font-size: 28px;}
            p{font-size: 16px;}
          }
          .img{
            height: 100%;
            .img-inner{
              height: 100%;
              img{
                height: 100%;
                object-fit: cover;
              }
            }
          }
        }
      }
    }
  }
  .ss-video{
    .video-banner{
      height: 50vh;
      .video-banner__content{
        .caption-with-letter-spacing {
          margin-top: 12px;
          margin-bottom: 0;
          font-size: 16px;
        }
        .title{font-size: 20px;}
      }
    }
  }
  .ss-chinh-sach{
    .row{
      display: grid;
      grid-template-rows: 1fr;
      overflow: auto;
      justify-content: start;
      grid-template-columns: repeat(3, 40%);
      &::-webkit-scrollbar{
          display: none;
      }
      .col{
        max-width: 100%;
        flex: 0 0 40%;
        scroll-snap-align: start;
        .col-inner{
          .icon-box{
            .icon-box-text {
              h3{
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
  /* HOME */
  .ss-banner{
    padding-bottom: 0 !important;
    .banner-2{
      .text-banner{
        .text-inner{
          align-items: center;
          p{width: 23%;};
        }
      }
    }
    .text-banner{
      .text-inner {
        h2{font-size: 25px; color: var(--color-headings);}
        p{
          width: 34%;
          a{
            font-size: 14px;
          }
        }
      }
    }
  }
  .ss-categories{
    padding: 7px 0 !important;
    .section-content{padding: 20px;}
    .row{
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 20px;
      .col{
        .text-banner{
          padding-left: 10px;
          h2{font-size: 34px;}
          p{font-size: 16px;}
        }
      }
    }
    .row-cat-sp{
      .col{
        .large-columns-4{
          .flickity-viewport{
            .product-category {
              a{
                .box{
                  .box-text{
                    padding: 10px 0;
                    .box-text-inner{
                      h5{
                        font-size: 22px; 
                        font-weight: 500;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  @keyframes floatUpDown_tb{
    0%, 100% {
        transform: translateY(10px);
    }
    50% {
        transform: translateY(-38px);
    }
  }
  .ss-finest{
    .section-content{padding: 0 34px;}
    .row{
      display: flex;
      .col-anh-float{
        order: 2;
        flex: 0 0 50%;
        .img{
          animation: floatUpDown_tb 7s ease-in-out infinite;
          transition: transform 0.5s ease;
          .img-inner{
            padding-left: 10px;
          }
        }
        .about-grid-bg-block{
          display: flex !important;
          position: absolute;
          top: -18px;
          left: 0;
          right: 0;
          width: 50%;
          min-height: 108%;
          z-index: 0;
          background: #ebe6d7;
        }
      }
      .col-anh-static{order: 3; flex: 0 0 50%;}
      .col-text-center{
        order: 1; flex: 0 0 100%;
        .text-banner{
          h2{font-size: 25px;}
          p{font-size: 16px;}
        }
        .text-arrow{
          padding-bottom: 30px;
          p{
            justify-content: flex-start;
          }
        }
      }
    }
  }
  .ss-italy{
    .row{
      .col{
        .text-banner{
          h2{font-size: 35px;}
        }
      }
    }
  }
  .ss-the-rest{
    .row{
      .col{
        .text-banner{padding-left: 0;}
      }
    }
  }
 .ss-20-off{
    padding: 0 !important;
    .col-pic{padding: 0;}
    .col-text{
      padding: 15px;
      .row{
        .col{
          .text-banner{
            h2{
              font-size: 25px;
            }
            p{
              font-size: 16px;
              margin-bottom: 0;
            }
          }
        }
      }
      .product-au{
        .flickity-button{display: none;}
      }
    }
  }

  .ss-latest-new{
    .section-content{padding: 20px 35px;}
    .row{
      .col{
        .text-banner{
          padding-left: 0;
          .blog__title{font-size: 25px;}
        }
      }
    }
    .row-cat-sp{
      margin-bottom: 0;
      .col{
        .flickity-viewport{
          .post-item{
            .box-text{
              .post-title{
                font-size: 18px;
                a{min-height: 70px;}
              }
              .button{
                font-size: 14px;
                width: 30%;
              }
            }
          }
        }
      }
    }
  }
  .ss-slide-home{
    .section-content{
      padding: 0 20px;
    }
  }
  .ss-faq{
    .row-text{
      .text-banner{
        h2{font-size: 44px; margin-bottom: 40px;}
      }
    }
    .row-faq{
      .col-anh > .col-inner{
        position: sticky;
        top: 90px;
      } 
      .col-faq{
        .faq-class{
          .accordion-item{
            .accordion-title{
              display: flex;
              justify-content: space-between;
              align-items: center;
              span{display: flex; flex: 0 0 80%;}
              .toggle{
                top: auto;
                right: 0;
                left: auto;
                margin-right: 0;
              }   
            }
            .active{
              .toggle{
                top: auto;
              }
            }
            .accordion-inner{
              padding: 0;
              p{
                font-size: 18px;
                color: var(--color-text);
                margin-bottom: 15px;
              }
            }
          }
        }
      }
    }
  }
  .ss-contact-us{
    padding-bottom: 0 !important;
    .row-text{
      .text-h1{
        h1{margin-bottom: 27px;}
      }
    }
    .row-icon-box{
      margin-top: 27px;
      .col-icon-box{
        padding: 0 15px !important;
        &:last-child{padding-bottom: 0;}
        .col-inner{width: fit-content;}
      }
      .icon-box-feat{
        padding: 10px 26px;
        flex-wrap: nowrap;
        .icon-box-text{
          flex: 0 1 80%;
          p{
            line-height: 1.2;
          }
        }
      }
    }
    .row-form{
      margin-top: 27px;
      padding: 0 15px;
      .col-form{
        padding: 0;
        .text-banner{
          h2{margin-bottom: 27px;}
        }
      }
      .wpcf7{
        .contact-form{
          .col{
            p{
              label{
                  font-size: 14px;
              }
              .wpcf7-spinner{display: none;}
              .button{
                font-size: 14px;
              }
            }
            .wpcf7-form-control-wrap{
              input, textarea{
                height: 45px;
                &::placeholder{
                  color: var(--color-headings);
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
    }
  }
}


@media (max-width: 600px) {
  .header {
    .header-wrapper {
      .header-main {
        .mobile-nav{
          height: 70px;
        }
      }
    }
  }
  .mfp-wrap {
    .mfp-content{
      width: 100%;
    }
  }
  .ttannouncement-bar{
    width: 90%;
  }
  .marquee-slide{
    font-size: 14px;
  }
  .header-top-title { font-size: 14px; }
   .deferred-media__poster-button-wrapper {
    width: 90px;
    height: 90px;
  }
  .deferred-media__poster-button {
    width: 40px;
    height: 40px;
  }
  .deferred-media__poster-button .icon-play {
    width: 11px;
    height: 11px;
  }
  .deferred-media__poster-button-wrapper .circle-text text {
    font-size: 6px;
    letter-spacing: 2px;
  }
  .video-banner__content .title {
    font-size: clamp(1.3rem, 5vw, 2rem);
  }
  .video-banner__pause-btn {
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
  }
  .video-banner__pause-btn svg {
    width: 16px;
    height: 16px;
  }
  .ss-imb-au{
    padding-bottom: 0 !important;
    .row-imb-au{
      flex-direction: column-reverse;
      padding-bottom: 27px;
      &:last-child{ 
        flex-direction: column;
        padding: 0;
      }
      .col-imb-au{
        padding: 0 15px;
        .col-inner{
          height: 100%;
          .text-img-au{
            margin-top: 10px;
            padding: 0;
            h2{font-size: 20px;}
            p{font-size: 14px;}
          }
        }
      }
    }
  }
  .ss-hinh-anh{
    .row{
      .col{
        padding-bottom: 20px !important;
        &:last-child{padding-bottom: 0 !important;}
        .product-au{
          .product-small{padding-bottom: 20px !important;}
        }
      }
    }
  }
  .ss-banner{
    padding-top: 0 !important;
    .banner-2{
      .text-banner{
        .text-inner{
          align-items: center;
          p{width: 42%;};
        }
      }
    }
    .text-banner{
      .text-inner {
        h2{font-size: 25px; color: var(--color-headings);}
        p{
          width: 42%;
          a{
            font-size: 14px;
          }
        }
      }
    }
  }
  .text-arrow{
    p{
      padding-right: 10px;
    }
  }
  .ss-categories{
    padding: 42px 0 !important;
    .section-content{padding: 0 !important;}
    .row{
      margin-bottom: 20px;
      .col{
        padding-right: 0;
        .text-banner{
          max-height: 28px;
          padding-left: 0;
          h2{max-height: 28px; font-size: 22px;margin-bottom: 0;}
          p{display: none;}
        }
        .text-arrow{
          max-height: 28px;
          p{
            max-height: 28px;
          }
        }
      }
    }
    .row-cat-sp{
      margin-bottom: 0;
      .col{
        padding: 0 2px 0 6px;
        .large-columns-4{
          .flickity-viewport{
            .product-category {
              padding: 0 10px;
              a{
                .box{
                  .box-text{
                    .box-text-inner{
                      h5{
                        font-size: 18px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  @keyframes floatUpDown_mb{
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-30px);
    }
  }
  .ss-finest{
    .section-content{padding: 0;}
    .row{
      display: flex;
      .col-anh-float{
        padding-bottom: 30px !important;
        order: 2;
        flex: 0 0 100%;
        .img{
          animation: floatUpDown_mb 7s ease-in-out infinite;
          transition: transform 0.5s ease;
          .img-inner{
            padding-left: 10px;
            img{width: 92%;}
          }
        }
        .about-grid-bg-block{
          min-height: 104%;
        }
      }
      .col-anh-static{order: 3; flex: 0 0 100%;}
      .col-text-center{
        order: 1;
        flex: 0 0 100%;
        .text-banner{
          h2{font-size: 25px; margin-top: 15px;}
          p{font-size: 14px;}
        }
        .text-arrow{
          p{
            justify-content: flex-start;
          }
        }
      }
    }
  }
  .ss-italy{
    .section-content{padding: 0;}
    .row{
      .col{
        padding: 0 15px;
        .text-banner{
          h2{font-size: 22px;}
          p{font-size: 14px;}
        }
        .text-arrow{
          padding-bottom: 25px;
        }
      }
      .col-vid{
        .video-button-wrapper{
          a{
            height: 80px;
            width: 80px;
            .icon-play{
              height: 80px;
              &::before{
                line-height: 80px;
                font-size: 22px;
              }
            }
            &::before{
              width: 70px;
              height: 70px;
            }
          }
        }
      }
    }
  }
  .product-au, .shop-container > .products{
    .flickity-viewport{
      .product-small{
        .product-gallery-thumbs{
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;
          align-items: stretch;
          margin-top: 8px;

          .gallery-thumb{
            width: 100%;
            height: auto;
            padding-top: 100%; /* square aspect ratio */
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            img{
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }
    }
  }
  .ss-20-off{
    .col-pic{}
    .col-text{
      .row{
        .col{
          .text-banner{
            h2{
              font-size: 20px;
            }
            p{
              font-size: 14px;
              margin-bottom: 15px;
            }
          }
          .text-arrow{
            p{
              display: flex;
              justify-content: flex-start;
            }
          }
        }
      }
    }
  }
  .ss-latest-new{
    padding-bottom: 0 !important;
    .section-content{padding: 0}
    .row{
      .col{
        .text-banner{
          min-height: 28px;
          h2{min-height: 28px;}
          padding-left: 0;
          .blog__title{font-size: 20px;}
        }
        .text-arrow{
          max-height: 28px;
          p{max-height: 28px;}
        }
      }
    }
    .row-cat-sp{
      .col{
        padding: 0;
        .flickity-viewport{
          .post-item{
            .box-text{
              .post-title{
                font-size: 14px;
                a{min-height: 54px;}
              }
              .button{
                font-size: 12px;
                width: 48%;
              }
            }
          }
        }
      }
    }
  }
  .ss-slide-home{
    .section-content{
      padding: 0 15px;
    }
  }
  .ss-faq{
    .row-text{
      .text-banner{
        h2{margin-bottom: 30px; font-size: 36px;}
        p{font-size: 14px;}
      }
    }
    .row-faq{
      .col-anh{
        padding-bottom: 5px !important;
      }
      .col-faq{
        .faq-class{
          .accordion-item{
            .accordion-title{
              font-size: 18px;
              .toggle{
                transform: none !important;
                height: 25px;
                width: 25px;
                line-height: 1;
                .icon-angle-down{
                  height: 25px;
                  width: 25px;
                  &::before{
                    height: 25px;
                    width: 25px;
                    font-size: 16px;
                  }
                }
              }
            }
            .active{
              .toggle{
                transform: none !important;
                top: auto;
                height: 25px;
                width: 25px;
                line-height: 1;
                .icon-angle-down{
                  height: 25px;
                  width: 25px;
                  &::before{
                    height: 25px;
                    width: 25px;
                    font-size: 16px;
                  }
                }
              }
            }
            .accordion-inner{
              p{
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
  .ss-faq-contact-us{
    .row-text{
      .text-banner{
        h2{font-size: 20px; margin-bottom: 27px;}
      }
    }
  }
  .ss-contact-us{
    padding-bottom: 0 !important;
    .section-content{padding: 0;}
    .row-text{
      .text-h1{
        h1{font-size: 26px;}
      }
      .text-banner{
        p{font-size: 18px;}
        h2{font-size: 25px;}
      }
    }
    .row-icon-box{
      .col-icon-box{
        padding: 0 15px 15px !important;
        &:last-child{padding-bottom: 0;}
        .col-inner{width: fit-content;}
      }
      .icon-box-feat{
        padding: 10px 30px;
        .icon-box-text{
          flex: 1 0 80%;
          p{
            font-size: 15px;
          }
        }
      }
    }
    .row-form{
      margin-top: 0;
      padding: 0 50px;
      .col-form{
        padding: 0;
        .text-banner{
          h2{margin-bottom: 15px;}
        }
      }
      .wpcf7{
        .contact-form{
          .col{
            .wpcf7-form-control-wrap{
              input, textarea{
                height: 35px;
                &::placeholder{
                  color: var(--color-headings);
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 423px) {
  .header-top-title { padding: 0 2rem; }
}
@media (max-width: 320px) {
  .header-top-title { font-size: 1.3rem; }
  .topbar-close { padding: 0 1rem; }
}

/* COLLECTION PAGE */
.woocommerce-shop{
  .shop-page-title{display: none;}
  #main{
    background-color: var(--color-secondary);
  }
}
.mitti-collection {
  background: #faf8f5;
  color: var(--color-headings, #333);
  padding-top: 28px;
  padding-bottom: 0;
}
.mitti-collection-tags {
  display: flex;
  gap: 20px;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid #f2e2e2;
  border-radius: 2px;
  margin-bottom: 24px;
  background-color: #fff;
}
.mitti-collection-tags > strong {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 20px;
}
.mitti-collection-tags__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.mitti-collection-tags__list a,
.facets__display-vertical a {
  color: var(--color-headings, #333);
  text-decoration: none;
  font-size: 14px;
}
.mitti-collection-tags__list a:hover,
.facets__display-vertical a:hover {
  color: var(--hover-color, #645832);
}
.mitti-collection-tags__list a.is-active {
  color: var(--hover-color, #645832);
  font-weight: 600;
}
.mitti-collection-tags__list .mitti-tags-reset {
  color: var(--hover-color, #645832);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mitti-filter-empty {
  color: var(--color-text, #333333bf);
  font-size: 14px;
}
.row.category-page-row.mitti-collection-layout {
    padding-top: 20px !important;
}
.mitti-collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f2e2e2;
}
.mitti-view-switcher {
  display: inline-flex;
  gap: 6px;
}
.mitti-view-button {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  margin: 0;
  background: transparent;
  color: var(--color-headings, #333);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-transform: none;
  opacity: .5;
}
.mitti-4-col::before{
  content: '\e196';
  font-family: "Font Awesome 6 Pro";
  font-size: 17px;
  font-weight: 900;
}
.mitti-3-col::before{
  content: '\e196';
  font-family: "Font Awesome 6 Sharp";
  font-size: 17px;
  font-weight: 900;
}
.mitti-list-col::before{
  content: '\f0ca';
  font-family: "Font Awesome 6 Sharp";
  font-size: 17px;
  font-weight: 900;
}
.mitti-short-list-col::before{
  content: '\f0c9';
  font-family: "Font Awesome 6 Sharp";
  font-size: 17px;
  font-weight: 900;
}

.mitti-view-button.is-active,
.mitti-view-button:hover {
  opacity: 1;
  color: var(--color-headings, #333);
}
.mitti-product-count,
.mitti-sort-wrap {
  white-space: nowrap;
  font-size: 15px;
}
.mitti-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mitti-sort-wrap .woocommerce-ordering {
  float: none;
  margin: 0;
}
.mitti-sort-wrap select {
  min-width: 150px;
  height: 36px;
  margin: 0;
  padding:0 10px;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  color: inherit;
  font: inherit;
}
.mitti-collection-layout {
  align-items: flex-start;
  margin-left: -15px;
  margin-right: -15px;

}

.mitti-collection-sidebar,
.mitti-collection-products {
  position: sticky;
  top: 122px;
  padding-left: 15px;
  padding-right: 15px;
}
.mitti-collection-sidebar .col-inner {
  position: sticky;
  top: 90px;
}
.mitti-collection-sidebar h2 {
  margin: 0 0 18px;
  color: var(--color-headings, #333);
  font-size: 16px;
  font-weight: 600;
}
.facets__disclosure-vertical {
  border-top: 1px solid #f2e2e2;
}
.facets__disclosure-vertical summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: 20px;
}
.facets__disclosure-vertical summary::-webkit-details-marker {
  display: none;
}
.mitti-filter-caret {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.facets__disclosure-vertical[open] .mitti-filter-caret {
  transform: rotate(225deg) translate(-2px, -2px);
}
.facets__display-vertical {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0;
  overflow: hidden;
  font-size: 15px;
}
.facets__disclosure-vertical[open] .facets__display-vertical {
  grid-template-rows: 1fr;
}
.facets__display-inner {
  min-height: 0;
}
.mitti-filter-form {
  margin: 0;
}
.mitti-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  cursor: pointer;
  color: var(--color-text, #333);
}
.mitti-filter-option input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  accent-color: var(--color-secondary, #645832);
  appearance: none;
  background-color: var(--color-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  &:checked{
    accent-color: var(--color-secondary, #645832);
    border-color: var(--border-color);
    background-color: transparent;    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9' fill='none' stroke='%23333333' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4.5 4.5 8 11 1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 9px;
  }
}
.mitti-filter-label {
  font-size: 14px;
  font-weight: 500;
  flex: 1 1 auto;
}
.mitti-filter-count {
  font-size: 16px;
  margin-left: auto;
  font-weight: 500;
  color: var(--color-text, #333333bf);
  white-space: nowrap;
}
.mitti-color-swatch {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(51, 51, 51, .15);
  border-radius: 50%;
  background: var(--swatch-color, #e5e5e5);
}
.mitti-price-highest {
  margin: 0 0 20px;
  color: var(--color-text, #333333bf);
  font-size: 14px;
}
.mitti-price-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  
}
.mitti-price-input {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(51, 51, 51, .5);
  background: transparent;
}
.mitti-price-input > span {
  padding-left: 10px;
  color: var(--color-text, #333);
}
.mitti-price-input input {
  width: 90px;
  height: 44px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-headings, #333);
  font: inherit;
}
.mitti-price-input input:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}
.mitti-price-input input::-webkit-outer-spin-button,
.mitti-price-input input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.mitti-price-input input[type=number] {
  -moz-appearance: textfield;
}
.facets__display-vertical ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mitti-view-grid-4 {
  --mitti-columns: 4;
}
.mitti-view-grid-3 {
  --mitti-columns: 3;
}
.mitti-collection-products .products {
  display: grid;
  grid-template-columns: repeat(var(--mitti-columns, 4), minmax(0, 1fr));
  gap: 32px 24px;
  margin: 0;
}
.mitti-collection-products .products::before,
.mitti-collection-products .products::after {
  display: none;
}
.mitti-collection-products .products .product-small {
  width: auto;
  max-width: none;
  flex: none;
  margin: 0;
}
.mitti-product-review-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
  margin: 0 0 7px;
  line-height: 1;
}
.mitti-product-review-summary .vw-summary-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
}
.mitti-product-review-summary .vw-stars {
  display: inline-flex;
  gap: 2px;
}
.mitti-product-review-summary .vw-star {
  color: #645832;
  font-size: 12px;
}
.mitti-product-review-summary .vw-star.empty {
  color: #d9d5ca;
}
.mitti-product-review-summary .vw-stars {
  display: inline-flex;
  gap: 2px;
}
.mitti-product-review-summary .vw-star {
  color: #645832;
  font-size: 12px;
}
.mitti-collection-products .products.mitti-view-list,
.mitti-collection-products .products.mitti-view-short-list {
  grid-template-columns: 1fr;
}
.mitti-collection-products .products.mitti-view-list .product-small,
.mitti-collection-products .products.mitti-view-short-list .product-small {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 0 32px;
  border-bottom: 1px solid rgba(100, 88, 50, .18);
  position: relative;
  &:last-child{
    border-bottom: 0;
  }
}
.mitti-collection-products .products.mitti-view-list .product-small,
.mitti-collection-products .products.mitti-view-short-list .product-small {
  display: grid;
  align-items: start;
  min-width: 0;
}
.mitti-collection-products .products.mitti-view-list .product-small {
  grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
  column-gap: 32px;
  row-gap: 0;
}
.mitti-collection-products .products.mitti-view-short-list .product-small {
  grid-template-columns: minmax(220px, 30%) minmax(0, 1fr) minmax(180px, 22%);
  column-gap: 32px;
  row-gap: 0;
}
.mitti-collection-products .products.mitti-view-list .product-small .box-image,
.mitti-collection-products .products.mitti-view-short-list .product-small .box-image {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 100%;
  max-width: none;
  margin: 0;
}
.mitti-collection-products .products.mitti-view-list .product-small .box-text,
.mitti-collection-products .products.mitti-view-short-list .product-small .box-text {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 0;
}
.mitti-collection-products .products.mitti-view-list .product-small .product-gallery-thumbs,
.mitti-collection-products .products.mitti-view-short-list .product-small .product-gallery-thumbs {
  grid-column: 2;
  grid-row: 2;
  margin: 14px 0 0;
}
.mitti-collection-products .products.mitti-view-list .product-small + .product-gallery-thumbs,
.mitti-collection-products .products.mitti-view-short-list .product-small + .product-gallery-thumbs {
  position: absolute;
  z-index: 2;
  left: calc(30% + 32px);
  bottom: 32px;
}
.mitti-collection-products .products.mitti-view-short-list .product-small .box-text,
.mitti-collection-products .products.mitti-view-short-list .product-small .product-gallery-thumbs {
  grid-column: 2;
}
.mitti-collection-products .products.mitti-view-short-list .product-small .box-image ~ .box-text {
  padding-right: 0;
}
.mitti-collection-products .products.mitti-view-short-list .product-small .hover-quickadd-btn,
.mitti-collection-products .products.mitti-view-list .product-small .hover-quickadd-btn {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  display: inline-flex;
  width: auto;
  min-width: 120px;
  margin: 0;
}
.mitti-collection-products .products.mitti-view-short-list .product-small .image-tools,
.mitti-collection-products .products.mitti-view-list .product-small .image-tools {
  position: absolute;
  z-index: 7;
  top: 58px;
  right: 0;
  left: auto;
  display: flex;
  gap: 8px;
}
.mitti-collection-products .products.mitti-view-short-list .product-small .box-image,
.mitti-collection-products .products.mitti-view-list .product-small .box-image {
  overflow: visible;
  position: static !important;
}
.mitti-collection-products .products.mitti-view-short-list .product-small .image-tools .icon,
.mitti-collection-products .products.mitti-view-list .product-small .image-tools .icon {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(51, 51, 51, .8);
  background: transparent;
}
.mitti-product-excerpt {
  display: none;
  margin: 12px 0 0;
  color: var(--color-text, #333333bf);
  font-size: 16px;
  line-height: 1.45;
}
.mitti-collection-products .products.mitti-view-list .mitti-product-excerpt,
.mitti-collection-products .products.mitti-view-short-list .mitti-product-excerpt {
  display: block;
}

@media (max-width: 849px) {
  .mitti-collection {
    padding: 20px 35px 0 ;
  }
  .mitti-collection-toolbar {
    flex-wrap: wrap;
    gap: 12px 18px;
  }
  .mitti-collection-sidebar .col-inner {
    position: static;
  }
  .mitti-collection-products .mitti-view-grid-4 {
    --mitti-columns: 2;
    gap: 32px 18px;
  }
   .mitti-collection-products .mitti-view-grid-3 {
    --mitti-columns: 1;
    gap: 32px 18px;
  }
  .mitti-collection-products .products.mitti-view-list .product-small,
  .mitti-collection-products .products.mitti-view-short-list .product-small {
    grid-template-columns: minmax(150px, 32%) minmax(0, 1fr) !important;
     .box-image .out-of-stock-label{
        font-size: 14px;
        max-width: 162px !important;
      }
  }
  .mitti-collection-products .products.mitti-view-short-list .product-small {
    grid-template-columns: minmax(150px, 32%) minmax(0, 1fr) 150px;
  }
  .mitti-collection-products .products.mitti-view-short-list > .product-small{
      grid-template-columns: minmax(162px, 30%) minmax(0, 1fr) 125px !important;
      column-gap: 20px !important;
      .box-text{
        .title-wrapper{
          .mitti-product-excerpt{display: none;}
        }
      }
  }
  .mitti-view-grid-3{
    .box-image .out-of-stock-label{
      max-width: 482px !important;
    }
  }
  .box-image .out-of-stock-label{
    font-size: 14px;
    max-width: 222px !important;
  }
  .facets__disclosure-vertical summary{
    font-size: 16px;
  }
}
@media (max-width: 549px) {
  .mitti-collection-tags {
    align-items: flex-start;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 10px;
  }
  .mitti-collection-toolbar {
    justify-content: flex-start;
  }
  .mitti-sort-wrap {
    width: 100%;
    justify-content: space-between;
  }
  .mitti-collection-products .products {
    --mitti-columns: 2;
    gap: 20px 10px;
  }
  .mitti-collection-products .products.mitti-view-list .product-small,
  .mitti-collection-products .products.mitti-view-short-list .product-small {
    padding-bottom: 24px;
  }
  .mitti-collection-products .products.mitti-view-list .product-small,
  .mitti-collection-products .products.mitti-view-short-list .product-small {
    display: block;
  }
  .mitti-collection-products .products.mitti-view-list .product-small .box-image,
  .mitti-collection-products .products.mitti-view-short-list .product-small .box-image {
    margin-bottom: 16px;
  }
  .mitti-collection-products .products.mitti-view-list .product-small .hover-quickadd-btn,
  .mitti-collection-products .products.mitti-view-short-list .product-small .hover-quickadd-btn {
    position: static;
    width: 100%;
    margin-top: 14px;
  }
  .mitti-collection-products .products.mitti-view-list .product-small .image-tools,
  .mitti-collection-products .products.mitti-view-short-list .product-small .image-tools {
    position: static;
    margin-top: 10px;
  }
  .mitti-collection-products .products.mitti-view-list .product-small .product-gallery-thumbs,
  .mitti-collection-products .products.mitti-view-short-list .product-small .product-gallery-thumbs {
    margin-top: 12px;
  }
  .mitti-collection-products .products.mitti-view-list .product-small + .product-gallery-thumbs,
  .mitti-collection-products .products.mitti-view-short-list .product-small + .product-gallery-thumbs {
    position: static;
  }
}

/* LIST VIEW REPAIR: Flatsome nests a second .product-small inside the outer product column. */
.mitti-collection-products .quick-view {
  display: none !important;
}
.mitti-collection-products .products.mitti-view-list .box-text .product-gallery-thumbs,
.mitti-collection-products .products.mitti-view-short-list .box-text .product-gallery-thumbs {
  position: static !important;
  display: flex !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: fit-content;
  max-width: 100%;
  margin: 15px 0 0 !important;
}
.mitti-collection-products .products.mitti-view-list > .product-small,
.mitti-collection-products .products.mitti-view-short-list > .product-small {
  display: grid;
  align-items: start;
  position: relative;
}
.mitti-collection-products .products.mitti-view-list > .product-small {
  grid-template-columns: minmax(200px, 30%) minmax(0, 1fr);
  column-gap: 32px;
}
.mitti-collection-products .products.mitti-view-short-list > .product-small {
  grid-template-columns: minmax(260px, 30%) minmax(0, 1fr) 120px;
  column-gap: 32px;
}
.mitti-collection-products .products.mitti-view-list > .product-small > .col-inner,
.mitti-collection-products .products.mitti-view-short-list > .product-small > .col-inner,
.mitti-collection-products .products.mitti-view-list > .product-small > .col-inner > .product-small.box,
.mitti-collection-products .products.mitti-view-short-list > .product-small > .col-inner > .product-small.box {
  display: contents;
}
.mitti-collection-products .products.mitti-view-list > .product-small .box-image,
.mitti-collection-products .products.mitti-view-short-list > .product-small .box-image {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 100%;
  max-width: none;
  position: static !important;
  overflow: visible;
  height: 100%;
  .image-fade_in_back{
    height: 100%;
    a{
      height: 100%;
      img{height: 100%;}
    }
  }
}
.mitti-collection-products .products.mitti-view-list > .product-small .box-text,
.mitti-collection-products .products.mitti-view-short-list > .product-small .box-text {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  min-width: 0;
  padding: 0;
}
.mitti-collection-products .products.mitti-view-list > .product-small + .product-gallery-thumbs,
.mitti-collection-products .products.mitti-view-short-list > .product-small + .product-gallery-thumbs {
  grid-column: 2;
  grid-row: 2;
  position: static;
  margin-top: 16px;
}
.mitti-collection-products .products.mitti-view-list > .product-small .hover-quickadd-btn,
.mitti-collection-products .products.mitti-view-short-list > .product-small .hover-quickadd-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  position: absolute;
  z-index: 8;
  top: 0;
  left: auto !important;
  right: 0;
  bottom: auto !important;
  min-width: 120px;
  margin: 0;
  padding: 8px;
  background-color: var(--hover-color) !important;
  color: #fff;
  border-radius: 0;
  font-weight: 500;
  font-size: 14px;
}
.out-of-stock{
  .product-small{
    .box-image{
      .image-fade_in_back{
        filter: brightness(.8);
      }
    }
  }
}
.mitti-view-grid-3{
  .box-image .out-of-stock-label{
    max-width: 414px;
  }
}
.mitti-view-list, .mitti-view-short-list{
  .box-image .out-of-stock-label{
    max-width: 404px;
  }
}
.box-image .out-of-stock-label {
    position: absolute;
    background-color: var(--color-primary);
    color: var(--hover-color);
    font-weight: 500;
    opacity: 1;
    padding: 5px 0;
    text-align: center;
    text-transform: none;
    z-index: 9999;
}
.mitti-collection-products .products.mitti-view-list > .product-small .hover-quickadd-btn ~ .hover-quickadd-btn,
.mitti-collection-products .products.mitti-view-short-list > .product-small .hover-quickadd-btn ~ .hover-quickadd-btn {
  display: none !important;
}
.mitti-collection-products .products.mitti-view-list > .product-small .grid-tools,
.mitti-collection-products .products.mitti-view-short-list > .product-small .grid-tools {
  display: none !important;
}
.mitti-collection-products .products.mitti-view-list > .product-small .image-tools{
  position: absolute;
  z-index: 8;
  top: 58px;
  right: 0;
  left: auto;
  display: flex !important;
  gap: 8px;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* List keeps all product information in the second column. */
.mitti-collection-products .products.mitti-view-list > .product-small .box-image {
  display: contents;
}
.mitti-collection-products .products.mitti-view-list > .product-small .box-image .image-fade_in_back {
  grid-column: 1;
  grid-row: 1 / span 5;
  width: 100%;
  height: 100%;
  a{
    height: 100%;
    img{height: 100%;}
  }
}
.mitti-collection-products .products.mitti-view-list > .product-small .box-image .hover-quickadd-btn {
  position: static !important;
  grid-column: 2;
  grid-row: 2;
  width: fit-content;
  min-width: 120px;
  margin: 15px 0 0;
  background-color: var(--hover-color);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  padding: 8px;
}
.mitti-collection-products .products.mitti-view-list > .product-small .box-image .image-tools {
  display: none !important;
}
.mitti-collection-products .products.mitti-view-list > .product-small .box-text {
  grid-column: 2;
  grid-row: 1;
}
.mitti-collection-products .products.mitti-view-list > .product-small + .product-gallery-thumbs {
  grid-column: 2;
  grid-row: 3;
  width: fit-content;
  margin: 14px 0 0;
}
.mitti-collection-products .products.mitti-view-list > .product-small .image-tools .icon,
.mitti-collection-products .products.mitti-view-short-list > .product-small .image-tools .icon {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(51, 51, 51, .8);
  background: transparent;
}
.mitti-collection-products .products.mitti-view-list > .product-small .mitti-product-excerpt,
.mitti-collection-products .products.mitti-view-short-list > .product-small .mitti-product-excerpt {
  display: block;
  color: var(--color-text) !important;
  font-size: 16px;
  padding-bottom: 15px;
}
@media (max-width: 549px) {
  .mitti-collection-sidebar{display: none;}
  .mitti-collection-products .products.mitti-view-list > .product-small,
  .mitti-collection-products .products.mitti-view-short-list > .product-small {
    display: block;
  }
  .mitti-collection-products .products.mitti-view-list > .product-small > .col-inner,
  .mitti-collection-products .products.mitti-view-short-list > .product-small > .col-inner,
  .mitti-collection-products .products.mitti-view-list > .product-small > .col-inner > .product-small.box,
  .mitti-collection-products .products.mitti-view-short-list > .product-small > .col-inner > .product-small.box {
    display: block;
    padding-bottom: 0;
  }
  .mitti-collection-products .products.mitti-view-list > .product-small .hover-quickadd-btn,
  .mitti-collection-products .products.mitti-view-short-list > .product-small .hover-quickadd-btn {
    position: absolute;
    top: 325px;
    width: 100%;
    margin-top: 0;
    background-color: var(--color-secondary) !important;
    box-shadow: 0 .2rem .5rem #00000029;
    color: var(--color-headings);
    margin: 0 auto;
    max-width: 328px;
    right: 24px;
    &:hover{
      background-color: var(--hover-color) !important;
      color: #fff;
    }
  }
  .mitti-collection-products .products.mitti-view-list > .product-small .box-image {
    display: block;
  }
  .mitti-collection-products .products.mitti-view-list > .product-small .box-image .image-fade_in_back {
    display: block;
  }
  .mitti-collection-products .products.mitti-view-list > .product-small .box-image .hover-quickadd-btn {
    display: inline-flex !important;
    grid-column: auto;
    grid-row: auto;
    margin-top: 14px;
  }
  .mitti-collection-products .products.mitti-view-short-list > .product-small .image-tools {
    position: static;
    margin-top: 10px;
  }
  .mitti-view-switcher, .mitti-product-count{display: none;}
}

.mobile-facets-trigger,
.mobile-facets,
.mobile-facets-backdrop {
  display: none;
}

@media (max-width: 767px) {
  html.mitti-mobile-facets-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.mitti-mobile-facets-open {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .mitti-collection-toolbar {
    padding-bottom: 10px;
  }

  .mitti-collection-toolbar > .mitti-sort-wrap {
    display: none;
  }

  .mitti-collection-layout > .mitti-collection-sidebar {
    display: none;
  }

  .mobile-facets-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-headings, #333);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
  }

  .mobile-facets-trigger__icon {
    position: relative;
    width: 18px;
    height: 14px;
    flex: 0 0 18px;
  }

  .mobile-facets-trigger__icon::before,
  .mobile-facets-trigger__icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 1px;
    background: currentColor;
  }

  .mobile-facets-trigger__icon::before {
    top: 3px;
    box-shadow: 7px 4px 0 -3px currentColor;
  }

  .mobile-facets-trigger__icon::after {
    bottom: 2px;
    box-shadow: 3px -4px 0 -3px currentColor;
  }

  .mobile-facets-backdrop {
    position: fixed;
    inset: var(--mitti-mobile-facets-top, 70px) 0 0;
    display: block;
    z-index: 998;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }

  .mobile-facets-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-facets {
    position: fixed;
    top: var(--mitti-mobile-facets-top, 70px);
    right: 0;
    z-index: 999;
    display: flex;
    width: 85%;
    max-width: 380px;
    height: calc(100vh - var(--mitti-mobile-facets-top, 70px));
    height: calc(100dvh - var(--mitti-mobile-facets-top, 70px));
    background-color: var(--color-secondary);
    color: var(--color-text, #333);
    transform: translateX(100%);
    transition: transform .35s ease;
    flex-direction: column;
  }

  .mobile-facets.is-open {
    transform: translateX(0);
  }

  .mobile-facets__header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    padding: 14px 52px 12px 20px;
    border-bottom: 1px solid #EAE6E1;
    text-align: center;
  }

  .mobile-facets__header h2,
  .mobile-facets__header p {
    margin: 0;
  }

  .mobile-facets__header h2 {
    color: var(--color-headings, #333);
    font-size: 25px;
    font-weight: 500;
    line-height: 1.25;
  }

  .mobile-facets__header p {
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-text, #333333bf);
  }

  .mobile-facets__close {
    position: absolute;
    top: 24px;
    right: 16px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-headings, #333);
  }

  .mobile-facets__close::before,
  .mobile-facets__close::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 9px;
    width: 18px;
    height: 1px;
    background: currentColor;
  }

  .mobile-facets__close::before {
    transform: rotate(45deg);
  }

  .mobile-facets__close::after {
    transform: rotate(-45deg);
  }

  .mobile-facets__main {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .mobile-facets.is-panel-open .mobile-facets__main {
    overflow: hidden;
  }

  .mobile-facets .mitti-collection-sidebar {
    display: block;
    position: static;
    width: 100%;
    max-width: none;
    padding: 0;
    flex: none;
  }

  .mobile-facets .mitti-collection-sidebar .col-inner {
    position: static;
    top: auto;
  }

  .mobile-facets .mitti-collection-sidebar h2 {
    display: none;
  }

  .mobile-facets .facets__disclosure-vertical {
    border-top: 0;
    border-bottom: 1px solid #EAE6E1;
  }

  .mobile-facets .facets__disclosure-vertical summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 500;
  }

  .mobile-facets .mitti-filter-caret {
    width: auto;
    height: auto;
    flex: 0 0 auto;
    border: 0;
    transform: none;
  }

  .mobile-facets .mitti-filter-caret::before {
    content: "\2192";
    font-size: 17px;
    line-height: 1;
  }

  .mobile-facets .facets__disclosure-vertical[open] .mitti-filter-caret {
    transform: none;
  }

  .mobile-facets:not(.is-panel-open) .facets__display-vertical {
    display: none;
  }

  .mobile-facets .facets__disclosure-vertical.is-mobile-panel-active {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    min-height: 100%;
    border-bottom: 0;
    background: #FAF8F5;
    flex-direction: column;
    animation: mitti-mobile-panel-in .28s ease both;
  }

  .mobile-facets .facets__disclosure-vertical.is-mobile-panel-active summary {
    justify-content: flex-start;
    gap: 10px;
    min-height: 52px;
    border-bottom: 1px solid #EAE6E1;
  }

  .mobile-facets .facets__disclosure-vertical.is-mobile-panel-active .mitti-filter-caret {
    order: -1;
  }

  .mobile-facets .facets__disclosure-vertical.is-mobile-panel-active .mitti-filter-caret::before {
    content: "\2190";
  }

  .mobile-facets .facets__disclosure-vertical.is-mobile-panel-active .facets__display-vertical {
    display: block;
    flex: 1;
    overflow-y: auto;
    font-size: 15px;
  }

  .mobile-facets .facets__display-inner {
    padding: 0 20px 16px;
  }

  .mobile-facets .facets__disclosure-vertical.is-mobile-panel-active .facets__display-inner {
    padding: 16px 14px 32px;
  }

  .mobile-facets .facets__disclosure-vertical.is-mobile-panel-active .mitti-filter-option {
    min-height: 34px;
    margin-bottom: 8px;
  }

  .mobile-facets.is-panel-open .facets__disclosure-vertical:not(.is-mobile-panel-active),
  .mobile-facets.is-panel-open .mobile-facets__sort {
    visibility: hidden;
  }

  .mobile-facets .mitti-sort-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 50px;
    padding: 14px 44px 14px 20px;
    border-bottom: 1px solid #EAE6E1;
    font-size: 15px;
    white-space: nowrap;
  }

  .mobile-facets .mitti-sort-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
  }

  .mobile-facets .mitti-sort-wrap .woocommerce-ordering {
    margin: 0;
  }

  .mobile-facets .mitti-sort-wrap select {
    min-width: 120px;
    max-width: 170px;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-headings, #333);
    font-size: 15px;
    font-weight: 500;
    text-align: right;
    appearance: none;
  }

  .mobile-facets__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid #EAE6E1;
    background: #FAF8F5;
  }

  .mobile-facets__footer a,
  .mobile-facets__clear-current {
    color: var(--color-headings, #333);
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .mobile-facets__clear-current {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    text-transform: none;
  }

  .mobile-facets.is-panel-open .mobile-facets__clear-all {
    display: none;
  }

  .mobile-facets.is-panel-open .mobile-facets__clear-current {
    display: inline;
  }

  .mobile-facets__apply {
    min-height: 44px;
    margin: 0;
    padding: 12px 36px;
    border: 0;
    border-radius: 2px;
    background: #5C523C;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
  }

  @keyframes mitti-mobile-panel-in {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(0);
    }
  }
}