/** Shopify CDN: Minification failed

Line 14:0 Unexpected "{"
Line 14:1 Expected identifier but found "%"
Line 14:37 Expected identifier but found "%"
Line 1997:144 Unexpected "!"

**/
.grecaptcha-badge{display:none}.section__flush-top .m-section-my{margin-top:0}.section__flush-bottom .m-section-my{margin-bottom:0}.sf__text-stroke{-webkit-text-stroke:.5px #dfdfdf;letter-spacing:10px;text-transform:uppercase;font-size:110px;font-style:italic;color:rgba(0,0,0,0);font-weight:bold}.sf__text-stroke.text-stroke-1{font-size:48px;line-height:56px;font-style:normal;-webkit-text-stroke:1px dimgray;letter-spacing:0}.sf__text-scroll{font-size:48px;line-height:56px}.m-scroll{display:flex;width:100%;height:165px;position:relative;margin:auto;overflow:hidden}.m-scroll__title{white-space:nowrap;transition:all 1s ease}.m-scroll__title>div{display:flex;animation:scrollText var(--speed, 22s) infinite linear;position:absolute}.sf__scrolling-text .sf__scrolling-text-inner{width:100%;height:auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;overflow:hidden;white-space:nowrap;vertical-align:baseline}.sf__scrolling-text .sf__scrolling-text-inner:hover>*{animation-play-state:paused}.sf__scrolling-text .sf__scrolling-text-inner>*{margin:0;animation-duration:var(--speed, 15s)}.sf__scrolling-text .sf__scrolling-text-inner a{color:inherit;text-decoration:none}.sf__scrolling-text .sf__scrolling-text-inner a em{font-style:normal}.sf__scrolling-text .sf__scrolling-text-inner span.custom{padding:0 1em;display:inline-block;vertical-align:middle}.sf__scrolling-text .sf__scrolling-text-inner span.custom[data-scale=medium]{padding:0 1em;transform:scale(0.5)}.sf__scrolling-text .sf__scrolling-text-inner span.custom[data-scale=large]{padding:0 2em}.sf__scrolling-text[data-s-dir=ltr] .sf__scrolling-text-inner>*{transform:translateX(-20%) translateZ(0);animation:sf-scrolling-text-animation linear infinite 15s}.sf__scrolling-text[data-s-dir=rtl]{direction:rtl}.sf__scrolling-text[data-s-dir=rtl] .sf__scrolling-text-inner>*{transform:translateX(20%) translateZ(0);animation:sf-scrolling-text-animation-reverse linear infinite 15s}.sf__scrolling-text[data-s-speed=lowest] .sf__scrolling-text-inner>*{animation-duration:15s}.sf__scrolling-text[data-s-speed=medium] .sf__scrolling-text-inner>*{animation-duration:7s}.sf__scrolling-text[data-s-speed=fast] .sf__scrolling-text-inner>*{animation-duration:4s}.sf__scrolling-text[data-style=text-outline] em{-webkit-text-stroke-color:inherit;-webkit-text-fill-color:rgba(0,0,0,0)}.sf__scrolling-text[data-style=text-outline][data-outline-thickness=thin] em{-webkit-text-stroke-width:.015em}.sf__scrolling-text[data-style=text-outline][data-outline-thickness=thick] em{-webkit-text-stroke-width:.03em}.sf__scrolling-text[data-style=text-outline] a:hover em{-webkit-text-fill-color:initial;-webkit-text-stroke-width:0}.sf__scrolling-text.font_size_11vh *{font-size:11vh;line-height:1.2em}.sf__tab-item{width:100%;color:#fff;overflow:hidden;margin-bottom:40px}.sf__tab-item input{position:absolute;opacity:0;z-index:-1}.sf__tab-item-label{display:flex;justify-content:space-between;padding:1em 0;font-weight:bold;cursor:pointer;color:#000;border-bottom:1px solid #ededed;position:relative}.sf__tab-item-label::after,.sf__tab-item-label::before{position:absolute;content:"";text-align:center;transition:all var(--m-duration-default, 0.25s);transform:translateY(-50%);top:50%;background:#000}.sf__tab-item-label::after{width:11px;height:1px;right:0}.sf__tab-item-label::before{width:1px;height:11px;right:4.5px}.sf__tab-item-content{max-height:0;padding:0;color:#000;transition:all var(--m-duration-default, 0.25s)}.sf__tab-item input:checked+.sf__tab-item-label{border-bottom-color:#000}.sf__tab-item input:checked+.sf__tab-item-label::before{display:none}.sf__tab-item input:checked~.sf__tab-item-content{max-height:100vh;padding:20px 0 0}.ssw-faveiticon{position:relative !important;display:flex;align-items:center}.ssw-socialconnect{display:flex;align-items:center;justify-content:space-between}.ssw-social-login-widget .ssw-socialconnect>div>a{display:inline-flex !important;justify-content:center;align-items:center;height:44px !important}.ssw-social-login-widget .ssw-socialconnect>div>a i[class*=ssw-icon]{transform:none !important}.ssw-stars>i{font-size:16px !important}@media screen and (min-width: 768px){.hide-on-desk{display:none !important}}@media screen and (max-width: 767px){.hide-on-mobile{display:none !important}.hidden-br-mobile br{display:none}}.shopify-policy__container{max-width:740px !important;margin:0 auto 4rem !important}.shopify-policy__title h1{font-size:1.875rem;line-height:2.25rem;padding:32px 16px}@media screen and (min-width: 1024px){.shopify-policy__title h1{font-size:2.25rem;line-height:2.5rem;padding-top:64px;padding-bottom:64px}}.m-menu-badge{position:relative;height:100%}.m-menu-badge::before{content:var(--badge);position:absolute;top:-4px;left:6px;font-size:12px;text-transform:capitalize;width:42px;height:20px;font-weight:500;border-radius:11px;display:flex;align-items:center;justify-content:center}.m-menu-badge--hot::before{background-color:#ffe7e7;color:#da3f3f}.m-menu-badge--new::before{background-color:#d5fbef;color:#3a9076}.flex{display:flex}.grid{display:grid}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1 1 0%}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.gap-4{gap:16px}.col-span-2{grid-column:span 2/span 2}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.mt-0{margin-top:0 !important}.mt-10{margin-top:10px}.mb-0{margin-bottom:0}.text-2xl{font-size:1.5rem;line-height:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.leading-7{line-height:1.75rem}.leading-6{line-height:1.5rem}.pl-8{padding-left:32px}.px-3{padding-left:12px;padding-right:12px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-10{margin-top:40px}.mb-10{margin-bottom:40px}.mb-6{margin-bottom:24px}.mb-4{margin-bottom:16px}.mb-2\.5{margin-bottom:10px}.mb-2{margin-bottom:8px}.mr-5{margin-right:20px}.mx-auto{margin-left:auto;margin-right:auto}.list-disc{list-style-type:disc}.w-full{width:100%}.text-color-subtext{color:rgb(var(--color-foreground-secondary))}.w-\[20px\]{width:20px}.h-\[20px\]{height:20px}.-mx-4{margin:0 -16px}.px-4{padding:0 16px}.mb-14{margin-bottom:56px}.mt-4{margin-top:16px}.px-12{padding:0 48px}.w-4{width:1rem}.h-4{height:1rem}.w-36{width:9rem}.ml-2{margin-left:8px}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}@media screen and (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:pr-4{padding-right:16px}.md\:pl-12{padding-left:48px}.md\:pr-10{padding-right:40px}.md\:gap-7{gap:28px}.md\:mb-6{margin-bottom:24px}}@media screen and (min-width: 1280px){.xl\:items-center{align-items:center}.xl\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media screen and (max-width: 767px){.img-ctn{margin-bottom:24px}}




{% comment %} CUSTOMIZED BY THRAAYA {% endcomment %}

.m-menu {
    --main-link-px: 16px;
    --main-link-py: 20px;
    font-size: 20px!important;
    font-weight: 500!important;
}

@media (max-width: 749px) {
  .m-menu-quick-links {
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: px solid rgba(0, 0, 0, 0.1);
  }

  .m-menu-quick-links__heading {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    color: #333;
  }

  .m-menu-sublist {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .m-menu-sublist li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .m-menu-sublist li:last-child {
    border-bottom: none;
  }

  .m-menu-link {
    color: inherit;
    text-decoration: none;
    display: block;
    font-weight: 500;
  }
}

@media (max-width: 749px) {
  .m-menu-customer {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .m-menu-customer__currency {
    padding: 0 16px;
    margin: 0;
  }

  .m-menu-customer__currency select {
    margin-top: 0 !important;
  }

  /* Remove bottom padding on the menu list too, if needed */
  .m-menu-drawer__navigation {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}




@media (max-width: 749px) {
  .m-menu-item {
    padding: 12px 16px;
  }

  .m-menu-customer__language-currency select {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }
}







 .custom-quick-links {
    padding: 16px;
    border-top: none;
    border-bottom: none;
  }

  .custom-quick-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .custom-quick-links-list li {
    padding: 8px 0;
    border-bottom: none;
  }

  .custom-quick-links-list li:last-child {
    padding-bottom: 0;
  }

  .custom-quick-links-list .m-menu-link {
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    display: block;
  }

 .custom-quick-links-list li,
  .custom-quick-links .m-menu-sublist li {
    border-bottom: none !important;
  }













@media (max-width: 749px) {
  .custom-quick-links {
    padding: 16px;
    border-top: none;
    border-bottom: none;
  }

  .custom-quick-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .custom-quick-links-list li {
    padding: 8px 0;
    border-bottom: none;
  }

  .custom-quick-links-list li:last-child {
    padding-bottom: 0;
  }

  .custom-quick-links-list .m-menu-link {
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    display: block;
  }
}

@media (max-width: 749px) {
  .custom-quick-links-list li,
  .custom-quick-links .m-menu-sublist li {
    border-bottom: none !important;
  }
}

@media (max-width: 749px) {
  div[id="m-cart-drawer"].m-cart-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: auto !important;
  }

  .m-cart-drawer__backdrop {
    width: 100vw !important;
    left: 0 !important;
    right: auto !important;
  }
}

@media (max-width: 749px) {
  .m-cart-drawer__inner {
    width: 100vw !important;
    max-width: 100vw !important;
    transform: translateX(0) !important;
  }
}


.m-topbar a[href*="facebook"] {
  order: 2;
}
.social-media-links {
  column-gap: 30px;
}
.m-header__center {
  justify-content: flex-start;
}
.logo-left-menu-center .m-header__left,
.logo-left-menu-center .m-header__right {
  flex: 0 1 0%;
}
.special-style {
  padding: 0em 15px 0px 0px;
}
.m-menu-mobile__item > a {
  font-size: 18px;
  font-weight:600;
}
@media (max-width: 749px) {
  .m-menu-drawer__wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 749px) {
  .m-menu-customer__wrapper {
    display: none !important;
  }
}


.m-menu-drawer__navigation li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 12px 16px;
    }


@media only screen and (max-width: 749px) {
    .m-menu-drawer__navigation li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 12px 16px;
    }
}










@media (max-width: 1023px) {
  /* Full-screen overlay container
  .m-menu-drawer {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    width: 100vw !important;
  } */

  /* Backdrop must also cover the full screen 
  .m-menu-drawer__backdrop {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    width: 100vw !important;
  }*/

  /* The actual panel must be full height too */
  .m-menu-drawer__wrapper {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  /* Content fills the panel */
  .m-menu-drawer__content {
    height: 100% !important;
    max-height: 100% !important;
  }
}


/*

@media (max-width: 1023px) {
  .m-menu-drawer__wrapper {
    height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom);
    background-color: rgb(var(--color-background));
  }
}


@media (max-width: 1023px) {
  .m-menu-drawer__content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 1023px) {
  .m-menu-drawer__wrapper {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
  }
}


body.header-drawer-open {
  overflow: hidden;
}

*/




/* Slide-in mobile menu from RIGHT (Minimog) */
.m-menu-drawer__wrapper {
  left: auto !important;
  right: 0 !important;
  border-top: 1px solid;
  border-color: rgba(0,0,0,0.08);

  /* start off-screen to the right */
  transform: translateX(100%) !important;
}

/* when open, slide into view */
.m-menu-drawer.open .m-menu-drawer__wrapper {
  transform: translateX(0) !important;
}




@media screen and (min-width: 1024px) {
    .m-collection--wrapper {
        margin: 0px 0!important;
    }
}












.m-page-header__title {
  text-align: left;
}

.f-quantity-breaks
{
    max-width:600px!important;
}


.m-main-product--wrapper
{
  border-top: 0px solid #faf8f5!important;
  margin-top:0px;
  padding-top:0px;
}



.m-media-gallery__wrapper .swiper-button-control {
    width: 45px;
    height: 45px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 0%)!important;
    transition: var(--m-duration-default, 0.25s) all;
    color: rgb(var(--color-button-text, --text-black));
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
}

/*
.m-media-gallery__wrapper .swiper-button-control {
  opacity: 1!important;
  visibility: visible!important;
  transform: none!important;
  background: transparent!important;
}*/



.m-media-gallery__wrapper .swiper-button-control,
.m-media-gallery__wrapper .swiper-button-control:hover,
.m-media-gallery__wrapper .swiper-button-control:focus {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}



  .m-main-product--media.container-narrow,
  .m-main-product--media {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .m-product-media--wrapper,
  .m-product-media--slider,
  .m-product-media--desktop {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
 /* .m-product-media--item {
    padding-left: 0px !important;
    padding-right: 2px !important;
  }*/

/* align the menu items to the left */

.m-header__center {
  justify-content: flex-start !important;
}

.logo-left-menu-center .m-header__left, .logo-left-menu-center .m-header__right {
    flex: 0 1 0% !important;
}

.swiper-pagination {
    padding: 0px;
}


.f-quantity-breaks__list {
    border: 0px!important;
    background-color: #FFC1DA;
    padding: 0 20px;
}


.foxkit-button--secondary {
    background-color: transparent!important;
    border: var(--btn-border-width, 1px) solid var(--foxkit-btn-secondary-text, #000);
    color: var(--foxkit-btn-secondary-text, #000);
}

.f-quantity-breaks__subtitle {
    color: #000000;
}

@media screen and (max-width: 767px) {
    .main-product__block .main-product__block {
        margin-top: 0px!important;
    }


.css-182v6qn {
    display: flex;
    flex-direction: column;
    max-height: 100vh!important;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    padding: 32px;
    box-shadow: hsl(0, 0.00%, 100.00%) 0px 11px 15px -7px, rgb(255, 255, 255) 0px 24px 38px 3px, rgb(255, 255, 255) 0px 9px 46px 8px!important;
    border-radius: 0px;
}


.css-869sgq {
    position: fixed;
    inset: 0px;
    background: rgb(255, 255, 255)!important;
    z-index: 99999;
}




}

.main-product__block .main-product__block {
    margin-top: :50px!important;
}

.m-product-text {
    margin-top: :24px!important;
}

.foxkit-sizechart-button svg {
  display: none; /* Hides the SVG icon */
}

.foxkit-sizechart-button--label {
  text-decoration: underline; /* Adds underline to the label text */
}


/*
#sizefox-container {
  margin-right: auto!important;
}

#sizefox-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


.m-product-card__title {
    font-size: 18px!important;
    margin-bottom: 0px!important;
}*/


/*.shopify-policy__container {
    max-width: 560px;
    max-width: 65ch;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}*/

.shopify-policy__container {
  position: relative;
  max-width: 1600px !important;
  margin: 0 auto 4rem !important;
}

.shopify-policy__container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgb(var(--color-border));
  width: 100vw;
  transform: translateX(-50%);
  left: 50%;
}



@media only screen and (min-width: 1280px) {
    h3, .h3 {
        font-size: 18px!important;
        line-height: 1.278;
    }
}


/*
.m-product-media--mobile .swiper-pagination, .m-product-media--desktop .swiper-pagination {
   display: none!important;
}
*/


/*
.pswp .pswp__button {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eeeeee8a!important;
    color: #000;
    border-radius: 50%;
    opacity: 1;
    border: 0px solid rgb(var(--color-border));
    transition: all var(--m-duration-default, 0.25s)
}

.pswp .pswp__button:hover,.pswp .pswp__button:focus {
    background: rgb(var(--color-button-hover));
    color: rgb(var(--color-button-text-hover));
    border-color:rgb(var(--color-button-hover));
    box-shadow: 0 0 0 .2rem rgb(var(--color-button-hover));
    transition: all var(--m-duration-default, 0.25s)
}
    */








 .pswp .pswp__button {
  width: 40px!important;
  height: 40px!important;
  display: flex;
  align-items: center;
  justify-content: center;

  background:rgba(238, 238, 238, 0)!important;
  color: #000;
  border-radius: 50%;
  border: 0;
  opacity: 1;

  box-shadow: none;
  outline: none;
  transition: background var(--m-duration-default, 0.25s);
}

.pswp .pswp__button:hover,
.pswp .pswp__button:focus,
.pswp .pswp__button:active {
  background: rgb(var(--color-button-hover));
  color: rgb(var(--color-button-text-hover));
  box-shadow: none;
  outline: none;
}



.pswp .pswp__button,
.pswp .pswp__button * {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.pswp .pswp__button {
  -webkit-tap-highlight-color: transparent;
}

/*
@media (max-width: 749px) {
 .pswp .pswp__button--m-arrowPrev{
  position: fixed !important;
  left: 16px !important;
  bottom: 16px!important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
}

.pswp .pswp__button--m-arrowNext{
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
}
}*/





.m-pswp-pinch-hint{
  display: none!important;
}






@media screen and (max-width: 767px){

.m-pswp-pinch-hint{
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100005; /* above pswp chrome */

  width: 44px;
  height: 44px;

  display: flex!important;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0);
  border-radius: 999px;

  color: #2d2a26;
  pointer-events: none;
}


  /* ---- PhotoSwipe: force controls where we want them ---- 

  .pswp .pswp__top-bar.pswp__hide-on-close{
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;

    height: 0 !important;
    gap: 0 !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;

    pointer-events: none !important;
  }

  .pswp .pswp__button--m-close{
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    pointer-events: auto !important;
  }

  .pswp .pswp__button--m-arrowPrev{
    position: fixed !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important;
  }

  .pswp .pswp__button--m-arrowNext{
    position: fixed !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important;
  }
*/
}












@media (max-width: 768px) {
  .m-product-media--slider__pagination.swiper-pagination-fraction {
    top: 12px;
    left: 12px;
  }
}


/* Product image slider – fraction pagination to top-left */
.m-product-media--slider__pagination.swiper-pagination-fraction {
  position: absolute !important;
 /* top: 12px !important;
  left: 12px !important;

  bottom: auto !important;
  right: auto !important;*/



  bottom: 12px !important;
  right: 12px !important;

  top: auto !important;
  left: auto !important;

  width: auto !important;
  padding: 6px 10px;
 /* border-radius: 999px;

  background: rgba(255, 255, 255, 0.85);*/
  color: #111;
  font-size: 13px;
  line-height: 1;
  z-index: 10;
}

@media (max-width: 768px) {
/* Force zoom icon to top-right on all screens */
.m-product-media--zoom-icon {
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  opacity: 1 !important;
}
}



.shopify-policy__title {
    text-align: left!important;
}

.shopify-policy__title h1 {
    font-size: 24px!important;
    line-height: 2.25rem;
    padding-top: 30px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
}


.shopify-policy__title h3 {
    font-size: 18px!important;
    line-height: 2.25rem;
    padding-top: 30px;
    padding-right: 0px;
    padding-bottom: 40px;
    padding-left: 0px;
}


.m-complementary-products__wrapper {
    background-color: rgb(255 255 255)!important;
}



.m-product-option--label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    line-height: 24px;
    margin-bottom: 12px;
    font-weight: 500;
}



















































@media screen and (min-width: 1535px) {

  .m-main-product--info {
    display: flex;
    justify-content: center;   /* horizontal center */
    align-items: center;       /* vertical center */
  }

  .m-main-product--info .m-product-info--wrapper {
    max-width: 50% !important;
  }

}

@media screen and (min-width: 1024px) and (max-width: 1535px) {
  .m-main-product--info {
    display: flex;
    justify-content: center;   /* horizontal center */
    align-items: center;       /* vertical center */
  }

  .m-main-product--info .m-product-info--wrapper {
    max-width: 80% !important;
  }
}










/*

@media screen and (max-width: 1023px) and (orientation: portrait) { */
  /* Product page gallery images 
  .m-media-gallery .m-image,
  .m-media-gallery img {
    aspect-ratio: 4 / 5;  /* taller frame 
  }*/

  /* Ensure the image fills the frame nicely 
  .m-media-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}



@media screen and (min-width: 1025px) and (max-width: 1279px) and (orientation: landscape) {*/

  /* Product page gallery images 
  .m-media-gallery .m-image,
  .m-media-gallery img {
    aspect-ratio: 3 / 5;  *//* taller frame 
  }
*/
  /* Ensure the image fills the frame nicely 
  .m-media-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

*/




/* =========================================================
   MOBILE / TABLET (<1024px)
   Use 4:5 portrait ratio
   ========================================================= */
@media (max-width: 1023px){

  /* Remove fold height */
  .m-main-product .m-main-product--media{
    height: auto !important;
    position: relative;
  }

  /* Remove forced full-height behaviour */
  .m-main-product .m-product-media--wrapper,
  .m-main-product .m-media-gallery__inner,
  .m-main-product .m-media-gallery__list,
  .m-main-product .swiper-slide,
  .m-main-product .m-product-media,
  .m-main-product responsive-image.m-image{
    height: auto !important;
  }

  /* Apply clean 4:5 ratio */
  .m-main-product responsive-image.m-image{
    aspect-ratio: 4 / 5;
  }

  .m-main-product .m-product-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}














/* -----------------------------
   PRODUCT PAGE: SKIMS-style media height
   - iPad Air and below: image area fills the screen (minus header)
   - iPad Pro and up: left column stays 50% width (already), and image fills full height
-------------------------------- */

/* 1) Make sure we have a header height variable available.
   Minimog already uses --m-header-height in header CSS (so we’ll piggyback it). */
:root{
  --thraaya-header-h: var(--m-header-height, 0px);
}

/* 2) Media column: lock to viewport minus header */
.m-main-product .m-main-product--media{
  height: calc(100svh - var(--thraaya-header-h));
}

/* 3) The gallery wrapper + swiper: stretch to the column height */
.m-main-product .m-product-media--wrapper,
.m-main-product media-gallery.m-media-gallery,
.m-main-product media-gallery .m-media-gallery__wrapper,
.m-main-product media-gallery .m-media-gallery__inner,
.m-main-product media-gallery .m-media-gallery__list,
.m-main-product media-gallery .swiper-slide,
.m-main-product media-gallery .m-product-media,
.m-main-product media-gallery responsive-image.m-image{
  height: 100% !important;
}

/* 4) Kill “autoheight” behaviour visually, even if a class lingers */
.m-main-product media-gallery .swiper-container-autoheight,
.m-main-product media-gallery .swiper-wrapper{
  height: 100% !important;
}

/* 5) Make images fill the frame like SKIMS */
.m-main-product media-gallery responsive-image.m-image img,
.m-main-product media-gallery .m-product-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* -----------------------------
   DESKTOP / iPad Pro+ polish
   Make the left media column sticky so it “sits” beautifully while info scrolls.
-------------------------------- */
@media (min-width: 1024px){
  .m-main-product .m-main-product--media{
    position: sticky;
    top: var(--thraaya-header-h);
    align-self: flex-start;
  }

  .m-main-product .m-main-product--content{
    min-height: calc(100svh - var(--thraaya-header-h));
  }
}



/* Gallery must be positioning context for the scrub bar */
.m-main-product media-gallery .m-media-gallery__inner{
  position: relative !important;
}

/* Scrub: sit on the bottom edge of the media area */
.m-main-product .thraaya-scrub--hairline{
  bottom: 0 !important;
}



/*

Real-World Device Mapping

0–639px → Phones

640–767px → Large phones / small tablets

768–1023px → Tablets

1024–1279px → Laptops

1280–1535px → Desktop

1536px+ → Wide desktop / 27” monitors

*/













































@media (min-width: 768px) {


  .m-product-option--label{
max-width: 465px !important;
}

.m-button--primary, .shopify-payment-button__button.shopify-payment-button__button--unbranded, .spr-button.spr-button-primary
 {
   /* max-width:465px!important;*/
}


.m-main-product--info .m-product-info--wrapper {
    position: sticky;
    margin-top: 24px!important;

  
}



.m-complementary-products {
    margin-top:50px;
}


}

@media screen and (min-width: 1024px) {
    .m-main-product {
        margin-bottom: 48px;
        margin-top: 0px!important;
    }
}


/* Hide dots 
.swiper-pagination-bullets {
  display: none !important;
}



.m-collection-products .m-product-item {
    margin-bottom: 30px;
    padding: 0 0px!important;
}*/



/*
.m-product-card__info {
    margin-top: 12px;
    
}*/

/*
.m-product-card__content {
    position: relative;
    padding: 6px!important;
}


.m-collection-products .m-product-item {
    margin-bottom: 30px;
    padding: 0 1px !important;
}




.m-collection-products .m-product-item {
    margin-bottom: 30px;
    padding: 0 1px!important;
}



@media screen and (min-width: 1280px) {
    .m-collection-products .m-product-item {
       padding: 0 4px!important;
    }
}




.m-collection-products {
    position: relative;
    margin: 24px 0px 0!important;

    z-index: 9;
}


.m-collection-products .m-product-item {
    margin-bottom: 30px;
    padding: 0 1px!important;
        margin-left: -1px!important;
  margin-right: -1px!important;
}




@media screen and (min-width: 1024px) {
    .m-collection--wrapper {
        margin: 60px 0;
        margin-top: 30px!important;
        margin-right: 0px;
        margin-bottom: 60px;
        margin-left: 0px;
    }
}
*/

.container-full-custom {
    width: 100%;
    margin: 0 auto;
    padding: 0 0px!important;
}


/* Collection grid: make it full-bleed on mobile while keeping inner gaps */
@media (max-width: 767px){
 /* .template-collection .m-collection-products{
    margin-left: -1px !important;
    margin-right: -1px !important;
  }

  .template-collection .m-collection-products .m-product-item{
    padding-left: 1px !important;
    padding-right: 1px !important;
  }*/

  /*
  .m-product-card__info {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
*/
/*
    .m-collection-toolbar--wrapper {
        margin: 0;
        padding: 7px 15px!important;
       
    }
*/

}

  .m-product-card__info {
    padding-left: 8px !important;
    padding-right: 8px !important;
}


.template-collection .m-collection-products{
    margin-left: -1px !important;
    margin-right: -1px !important;
}

 .template-collection .m-collection-products .m-product-item{
    padding-left: 1px !important;
    padding-right: 1px !important;
  }


@media screen and (min-width: 1280px) {
    .m-collection-products {
        margin-left: 0px!important;
        margin-right: 0px!important;
    }
}




@media (min-width: 768px) {
  /* tablet + desktop styles */

   /* .template-collection .m-collection-products{
    margin-left: -1px !important;
    margin-right: -1px !important;
  }*/

  /*
  .template-collection .m-collection-products .m-product-item{
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  .m-product-card__info {
    padding-left: 8px !important;
    padding-right: 8px !important;
}*/

/*
    .m-collection-toolbar--wrapper {
        margin: 0;
        padding: 7px 15px!important;
       
    }
*/


/*@media screen and (min-width: 1280px) {
    .m-collection-products {
        margin-left: 0px!important;
        margin-right: 0px!important;
    }*/
/*}*/

/*
.m-collection-products {
    position: relative;
    margin: 24px 0px 0!important;
    z-index: 9;
    margin-left: 15px !important;
    margin-right: 15px !important;
}
*/

}


.m-sidebar--open {
  display: none !important;
}


.filterXbutton {
  border: none;
  color: white;
  padding-right: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  background-color:rgb(255, 255, 255); color: #2d2a26;
}

.filterXspan {
  border: none;
  color: white;
  padding-right: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  cursor: default;
  background-color:rgb(255, 255, 255); color: #2d2a26;
}

.m-active-facets--item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 12px 10px!important;
    text-transform: capitalize;
    background: rgba(var(--color-foreground), .1);
    border-radius: 0px!important;
   /* margin: 16px 16px 0 0; */
    color: rgb(var(--color-foreground));
    line-height: 1;
    font-size: 15px;
    transition: all var(--m-duration-default, .25s) ease;
    font-weight: 500;
    
}

.m-active-facets 
{
  margin-left: 15px !important;
}

.m-collapsible[open=true] .m-collapsible--button, .collapsible[open=true] .m-collapsible--button {
    border-bottom-color:#eeeeee!important;
}


.m-product-option--swatch .m-product-option--node__label {
    border-radius: 0%!important;
}

.m-tooltip {
    background-color: transparent!important;
}

.m-tooltip__content {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}











.smartsize-button__icon {
  display: none !important;
}

body {
  color: rgb(45, 42, 38)!important;
}

h1, h2, h3, h4, h5, h6 {
  color: rgb(45, 42, 38)!important;
}



.pswp .pswp__top-bar {

    gap: 50px!important;
    bottom: 40px!important;

}


/* Force PhotoSwipe UI to always be visible */
.pswp .pswp__hide-on-close{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Prevent PhotoSwipe from hiding UI */
.pswp:not(.pswp--ui-visible) .pswp__hide-on-close{
  opacity: 1 !important;
  pointer-events: auto !important;
}



.thraaya-hidden { display:none !important; }


/* Mobile (Swiper): do NOT use display:none filtering 
@media (max-width: 767px) {
  .thraaya-hidden { display: block !important; }
}*/

/* Desktop (grid): safe to hide non-selected media 
@media (min-width: 768px) {
  .thraaya-hidden { display: none !important; }
}*/





/* =========================================================
   THRAAYA: Stop Minimog PDP gallery re-animations/flicker
   - disables scroll-trigger reveal + image-loaded zoom fade
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
  /* 1) Neutralize the scroll-trigger system in product media */
  .template-product .m-product-media .m-scroll-trigger,
  .template-product .m-product-media .m-scroll-trigger.animate--fade-in,
  .template-product .m-product-media .m-scroll-trigger.animate--fade-in-up,
  .template-product .m-product-media .m-scroll-trigger.animate--fade-in-left,
  .template-product .m-product-media .m-scroll-trigger.animate--fade-in-right,
  .template-product .m-product-media .m-scroll-trigger.animate--zoom-fade {
    animation: none !important;
    transition: none !important;

    /* critical: undo the "start hidden" state */
    opacity: 1 !important;
    transform: none !important;
  }

  /* 2) Kill the "image loaded" zoom-fade on PDP media */
  .template-product .m-product-media responsive-image,
  .template-product .m-product-media responsive-image img,
  .template-product .m-product-media responsive-image.m-image-loaded img {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* 3) Optional: also remove the stagger delay variable effect */
  .template-product .m-product-media [style*="--animation-order"] {
    animation-delay: 0ms !important;
  }
}


.m-product-option--button .m-product-option--node__label {
    /* Kill delay */
    transition: none !important;
}





/* Selected swatch state: 1px outline uses the swatch's own colour 
.m-product-option--swatch input:checked + label,
.m-product-option--swatch .m-product-option--node__label[data-selected="true"] {
  box-shadow:
    0 0 0 1px var(--swatch-border, rgb(var(--color-foreground))),
    inset 0 0 0 4px rgb(var(--color-background));
}*/

/* Keep swatches instant (no animation delays) */
.m-product-option--swatch .m-product-option--node__label {
  transition: none !important;
  transform: none !important;
  animation: none !important;
  touch-action: manipulation;
}


/* Hover should use the swatch colour, not theme foreground (black) */
@media (hover: hover) and (pointer: fine) {
  .m-product-option--swatch:hover .m-product-option--node__label {
    box-shadow:
      0 0 0 1px var(--swatch-border, rgb(var(--color-foreground))),
      inset 0 0 0 2px rgb(var(--color-background)) !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}



/* Selected swatch: always use the swatch colour variable */
.m-product-option--swatch input:checked + label,
.m-product-option--swatch .m-product-option--node__label[data-selected="true"] {
  box-shadow:
    0 0 0 1px var(--swatch-border, rgb(var(--color-foreground))),
    inset 0 0 0 2px rgb(var(--color-background)) !important;
}


/* Base swatch */
.m-product-option--swatch .m-product-option--node__label {
  box-shadow: none !important;
  border: 1px solid transparent;
  background-clip: padding-box;
  margin: 4px!important;
}

/* Selected state: border uses swatch colour var (set by JS) + inner ring */
.m-product-option--swatch input:checked + label,
.m-product-option--swatch .m-product-option--node__label[data-selected="true"] {
  border-color: var(--swatch-border, rgb(var(--color-foreground))) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--color-background)) !important;
}

/* Hover (desktop mouse only): match selected (no scale, no black border) */
@media (hover: hover) and (pointer: fine) {
  .m-product-option--swatch:hover .m-product-option--node__label {
    border-color: var(--swatch-border, rgb(var(--color-foreground))) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--color-background)) !important;
    transform: none !important;
  }
}


.m-product-card .m-product-option {
    display: flex;
    margin-bottom: 0;
    margin-top: 12px!important;
}


.m-product-card__title {
   /* font-size: calc(var(--font-base-size, 16) * 1px);*/
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 0px!important;
}

.m-product-card__fabric{
  font-size:12px!important;
}

.m-price-item m-price-item--regular{
  font-size:12px!important;
}

.m-product-card__name {
    font-weight: 600;
}


 /*

.m-product-option--swatch .m-product-option--node__label {

    transition: none !important;


    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}


.m-product-option--swatch input:checked + label,
.m-product-option--swatch .m-product-option--node__label[data-selected="true"] {
  box-shadow:
    0 0 0 1px var(--swatch-color, rgb(var(--color-foreground))),
    inset 0 0 0 4px rgb(var(--color-background)) !important;
}



.m-product-option--swatch input:checked + label {
  box-shadow:
    0 0 0 1px var(--selected-swatch-border, rgb(var(--color-foreground))),
    inset 0 0 0 4px rgb(var(--color-background))) !important;
}
*/

/*
.m-media-gallery__inner { position: relative !important; }

.m-media-zoom-overlay{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 9999 !important;

  width: 44px !important;
  height: 44px !important;
  background: red !important;
  border: 2px solid blue !important;
  opacity: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
*/

.m-media-gallery__inner { position: relative; }

.m-media-zoom-overlay{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
}

/* Hide by default (desktop & up) */
.m-media-zoom-overlay{
  display: none;
}

/* Show on mobile only */
@media (max-width: 767px){
  .m-media-zoom-overlay{
    display: flex;
  }
}



.m-cart-count {
    color:rgb(255, 255, 255)!important;
    font-size: 10px;
    font-weight: 500;
    height: 20px;
    min-width: 20px;
    background-color:#2d2a26!important;
    position: absolute;
    top: 6px;
    right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 9999px;
}



.m-logo {
    font-size: 1rem;
    line-height: unset;
    padding-left: 20px!important;
    padding-right: 12px!important;
    display: flex;
    align-items: left!important;
    justify-content: left!important;
    position: relative;
    color: inherit;
}


@media (max-width: 767px) {

.m-logo {
    font-size: 1rem;
    line-height: unset;
    padding-left: 6px!important;
    padding-right: 12px!important;
    display: flex;
    align-items: left!important;
    justify-content: left!important;
    position: relative;
    color: inherit;
}

}






.m-hamburger-box {
  --color-foreground: var(--header-transparent-text-color, #221D1D) !important;

  display: inline-block !important;
  position: relative !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Base stroke: 1.83px to match SVG specs */
.m-hamburger-box__inner,
.m-hamburger-box__inner::before,
.m-hamburger-box__inner::after {
  height: 1px !important;
  background: rgb(var(--color-foreground)) !important;
  /* All transitions removed for instant state switching */
  transition: none !important;
}

/* =========================================================
   STATE 1: Closed (Hamburger)
   ========================================================= 
*/

.m-hamburger-box__inner {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  top: 10.1px !important; /* Vertically centered */
  transform-origin: 50% 50% !important;
}

.m-hamburger-box__inner::before,
.m-hamburger-box__inner::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
}

.m-hamburger-box__inner::before {
  top: -6.8px !important; /* Top bar spacing */
}

.m-hamburger-box__inner::after {
  bottom: -6.8px !important; /* Bottom bar spacing */
}

/* =========================================================
   STATE 2: Open (The "X")
   ========================================================= 
*/

/* Rotate the main bar 45 degrees */
.m-hamburger-box.active .m-hamburger-box__inner {
  transform: rotate(45deg) !important;
}

/* Hide the top bar */
.m-hamburger-box.active .m-hamburger-box__inner::before {
  top: 0 !important;
  opacity: 0 !important;
}

/* Move bottom bar to center and rotate -90deg relative to parent (making it -45deg total) */
.m-hamburger-box.active .m-hamburger-box__inner::after {
  bottom: 0 !important;
  transform: rotate(-90deg) !important;
}




.m-product-option .option-label--selected {
    font-weight: 600!important;
}















/* --- 1. DUMMY DATA & ORIGINAL THEME OUTPUTS --- */
/* Completely hide the dummy XXXS swatch and the theme's native size label */
[data-value="XXXS"], 
.m-product-option--node[data-value="XXXS"],
#size-label-output {
    display: none !important;
}

/* --- 2. THE LIGHTNING SHADOW LABEL --- */
/* Injects the saved size into the label instantly from the CSS variable */
#shadow-size-label::before {
    content: var(--selected-size-text);
    display: inline-block;
    font-weight: 600;
    margin-left: 5px;
    transition: none !important;
}

/* Hide the shadow label content if memory is empty or dummy XXXS is selected */
#lightning-picker-wrapper[style*="XXXS"] #shadow-size-label::before,
#lightning-picker-wrapper[style*="--selected-size-text: ''"] #shadow-size-label::before,
#lightning-picker-wrapper[style*='--selected-size-text: ""'] #shadow-size-label::before {
    display: none !important;
}

/* --- 3. OPTION LABEL HINT (Select a size) --- */
/* Shows the italic hint next to the "Size" title when no valid size is picked */
.force-select-active .option-label:has(#shadow-size-label) .option-label--title::after,
body[data-size-locked="true"] .option-label:has(#shadow-size-label) .option-label--title::after {
    content: " (Select a size)";
    font-size: 13px;
    font-style: italic;
    opacity: 0.7;
    margin-left: 5px;
    color: #2d2a26;
}

/* --- 4. THE BUTTON LOCK (GHOST MODE) --- */
/* Physically disables the Add to Cart button using the Global Body Lock or class */
body[data-size-locked="true"] button[id^="ProductSubmitButton-"],
.force-select-active button[name="add"],
.force-select-active button[id^="ProductSubmitButton-"] {
    pointer-events: none !important;
    background-color: #ffffff !important;
    color: #999 !important;
    border: 1px solid #2d2a26 !important;
    opacity: 0.6 !important;
    position: relative !important;
    cursor: not-allowed !important;
}

/* Hide "Add to Bag" text inside the locked button */
body[data-size-locked="true"] button[id^="ProductSubmitButton-"] .m-add-to-cart--text,
.force-select-active button[name="add"] .m-add-to-cart--text {
    visibility: hidden !important;
}

/* Injects "Select a size" text onto the locked button */
body[data-size-locked="true"] button[id^="ProductSubmitButton-"]::after,
.force-select-active button[name="add"]::after,
.force-select-active button[id^="ProductSubmitButton-"]::after {
    content: "Select a size";
    visibility: visible !important;
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
   /* font-weight: bold; */
    color: #2d2a26;
}

/* --- 5. MOBILE & UX POLISH --- */
/* Removes the gray tap-flash on mobile and ensures buttons feel like buttons */
.m-product-option--node {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}






/* Ensure the button uses the dynamic color once unlocked */
body:not([data-size-locked="true"]) button[id^="ProductSubmitButton-"] {
    background-color: var(--dynamic-accent-color) !important;
    color: var(--dynamic-contrast-text) !important;
    border-color: var(--dynamic-accent-color) !important;
}




/* Update Button Color (When unlocked) 
body:not([data-size-locked="true"]) button[id^="ProductSubmitButton-"] {
    background-color: var(--dynamic-accent-color, #000) !important;
    color: var(--dynamic-contrast-text, #fff) !important;
    border-color: var(--dynamic-accent-color, #000) !important;
}*/

/* Update Cart Count Circle */
.m-cart-count, .cart-count-bubble {
    background-color: var(--dynamic-accent-color, #000) !important;
    color: var(--dynamic-contrast-text, #fff) !important;
}



.m-button:not(.m-button--link,.m-link-underline,.m-button--blank):hover,
.shopify-payment-button__button.shopify-payment-button__button--unbranded:not(.m-button--link,.m-link-underline,.m-button--blank):hover,
.spr-button.spr-button-primary:not(.m-button--link,.m-link-underline,.m-button--blank):hover{box-shadow:0 0 0 .1rem var(--dynamic-accent-color)}!important;







/* THRAAYA PREMIUM DESIGNER RESET (V2 - Stable Layout) */

/* 1. Stop all engine durations 

@media screen and (min-width: 1024px) {
  

:root {
  --m-duration-animate: 0s !important;
  --m-duration-image: 0s !important;
  --m-animation-duration: 0s !important;
}*/

/* 2. Lock the physical container size to prevent swatches from jumping 
.m-product-card__media {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
}*/

/* 3. Stack the images perfectly on top of each other 
.m-product-card__main-image,
.m-product-card__hover-image,
.thraaya-static-img {
  position: relative;*/ /* Main image stays in the flow 
  display: block !important;
  width: 100% !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.m-product-card__hover-image {
  position: absolute !important; *//* Stacked on top 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  visibility: hidden; *//* Hidden but physically "there" 
  opacity: 0 !important;
}*/

/* 4. Instant Visibility Swap (No flicker, No layout shifts) 
.m-product-card:hover .m-product-card__hover-image {
  visibility: visible !important;
  opacity: 1 !important;
}*/

/* Ensure the main image is ignored by the mouse while hover image is up 
.m-product-card:hover .m-product-card__main-image {
  opacity: 0 !important;
}


}*/

/** {
  animation: none !important;
  transition: none !important;
  transition-duration: 0s !important;
}*/





/* 2. RE-ENABLE SPINNING FOR ADD TO BAG 
.animate-spin, .m-spinner-icon svg {
    animation: thraayaSpin 1s linear infinite !important;
    display: block !important;
}

@keyframes thraayaSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
*/


/*
.m-banner-promotion {
  order: 3 !important;
  margin-top: 30px;
  margin-bottom: 0;
}
.m-collection-filters-form {
  margin-bottom: 0;
}
.m-toolbar--column-switcher {
  display: none;
}
@media screen and (min-width: 1024px) {
  .m-product-card__info {
    margin-top: 0px !important;
  }
}
@media screen and (max-width: 767px) {
  .m-product-option--swatch .m-product-option--node__label {
    width: 20px !important;
    height: 20px !important;
  }
}
*/






/* Filter accordion selection indicator */
.m-accordion--item-button {
  position: relative;
}

.m-filter-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  vertical-align: middle;
}

/* dot mode */
.m-filter-indicator--dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
}

/* number mode (and dot+number) */
.m-filter-indicator--count {
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  border: 1px solid currentColor;
  opacity: 0.9;
}






.m-accordion--item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms cubic-bezier(.4,0,.2,1),
              opacity 160ms ease;
  opacity: 0.55;
}

.m-accordion--item.open .m-accordion--item-icon {
  transform: rotate(90deg);
  opacity: 0.9;
}













/* =========================================================
   THRAAYA - Filter summary + capsules + sticky footer
   ========================================================= */

/* Summary bar (top of filter content) */
.thraaya-filter-summary {
  padding: 10px 0 6px;
}

.thraaya-filter-summary__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left:20px;
  padding-right:20px;
}

.m-filter--widget-title{
  padding-left:20px;
  padding-right:20px;
  padding-top:3px;
  padding-bottom:3px;
}


.m-facets 
{
  padding-left:20px;
  padding-right:20px;
}

.thraaya-filter-summary__title {
  font-size: 14px;
  color: rgba(0,0,0,0.65);
}

.thraaya-filter-summary__capsules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1;
}

.thraaya-filter-summary__clear {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  font-size: 13px;
  color: rgba(0,0,0,0.6);
  white-space: nowrap;
}

.thraaya-filter-summary__clear:hover {
  color: rgba(0,0,0,0.85);
}

.thraaya-filter-summary__divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin-top: 20px;
  margin-bottom: 20px;
}

.thraaya-filter-summary_X_divider
{
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin-top: 0px;
  margin-bottom: 0x;
}


.m-filter--wrapper {
    padding: 0!important;
}

/* Capsules */
.thraaya-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  border-radius: 0;
  padding: 12px 10px;
  font-size: 14px;
 /* line-height: 1;*/
  cursor: pointer;
  max-width: 100%;
}

.thraaya-pill:hover {
  border-color: rgba(0,0,0,0.22);
  background: rgba(0,0,0,0.05);
}

.thraaya-pill__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.thraaya-pill__x {
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}

.thraaya-pill--more {
  background: transparent;
}

/* Sticky footer */
.thraaya-filter-footer {
  position: sticky!important;
  bottom: 0;
  background: #fff;
  padding: 12px 0 14px;
  z-index: 2;
}

.thraaya-filter-footer__divider {
 /* height: 1px;
  background: rgba(0,0,0,0.08);
  margin-bottom: 12px;*/
}

.thraaya-filter-footer__btn {
  width: 90%;
  border: 0;
  cursor: pointer;
  padding: 14px 12px;
  border-radius: 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff;
  background: #111;
}

.thraaya-filter-footer__btn:hover {
  background: #000;
}



.m-facets {
  margin-bottom:30px !important;
}









/* Lock footer to the bottom of the sidebar drawer 
.m-sidebar .thraaya-filter-footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    padding: 20px !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; *//* Handle iPhone Notch 
    box-shadow: 0 -5px 15px rgba(0,0,0,0.08) !important;
    z-index: 100 !important;
    display: none;*/ /* Controlled by JS 
    justify-content: center;
    border-top: 1px solid #e8e8e8;
}
*/
/* Ensure the scrollable area doesn't get hidden behind the footer 
.m-sidebar--content {
    padding-bottom: 100px !important; 
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.thraaya-filter-footer__btn {
    width: 100% !important;
    background: #000 !important;
    color: #fff !important;
    padding: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 0 !important;
}


*/




/* Drawer shell: fixed viewport height, no scrolling here */
.facest-filters-section .m-sidebar--content {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;          /* dynamic viewport height (best on mobile) */
  overflow: hidden !important;        /* prevents footer from being part of scroll */
}

/* Only THIS area scrolls */
.facest-filters-section .m-filter--wrapper {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0 !important;           /* critical in flex layouts so scrolling works */

  /* reserve space so content never sits under the footer */
  padding-bottom: calc(var(--thraaya-footer-h, 92px) + env(safe-area-inset-bottom)) !important;
}

/* Footer: pinned at bottom, full drawer width, overlays visually */
.facest-filters-section .thraaya-filter-footer {
  flex: 0 0 auto !important;
  width: 100% !important;
  background: #fff !important;
  z-index: 20 !important;

  padding: 16px 20px !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;

  border-top: 1px solid #e8e8e8 !important;
  box-shadow: 0 -8px 20px rgba(0,0,0,0.08) !important;

  display: none; /* your JS toggles visibility */
}

/* Button styling */
.facest-filters-section .thraaya-filter-footer__btn {
  width: 100% !important;
  height: 50px !important;
  background: #000 !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: none !important;
  border-radius: 0 !important;
}




























/* =========================================================
   FILTER ACCORDION: HARD HIDE CLOSED CONTENT
   Prevents "ghost" filter items showing when accordion is closed
   ========================================================= */

.m-filter--widget.m-accordion--item:not(.open) .m-accordion--item-content {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.m-filter--widget.m-accordion--item.open .m-accordion--item-content {
  overflow: hidden; /* keeps animation clean */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* If Minimog uses inner wrappers, ensure nothing inside can "bleed" */
.m-filter--widget.m-accordion--item:not(.open) .m-accordion--item-content * {
  pointer-events: none !important;
}


.thraaya-filter-footer__btn.is-bumping { animation: thraaya-bump 220ms ease; }
@keyframes thraaya-bump { 0%{transform:scale(1)} 45%{transform:scale(0.98)} 100%{transform:scale(1)} }




/* =========================================================
   THRAAYA – Pill-style facet buttons for Size + Underwear Style
   ========================================================= */

/* Pill base: applies only to labels that contain these facet inputs 
.m-filter--wrapper label:has(input[name*="filter.v.option.size"]),
.m-filter--wrapper label:has(input[name*="filter.v.t.shopify.underwear-style"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 10px 14px;
  min-height: 44px;               
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,0.18);
  background: transparent;

  box-shadow: none !important;
  outline: none;
  cursor: pointer;

  transition: border-color 120ms ease, background-color 120ms ease;
}*/

/* Ensure the text aligns and doesn’t inherit weird styles */
.m-filter--wrapper label:has(input[name*="filter.v.option.size"]) .m-facet--label,
.m-filter--wrapper label:has(input[name*="filter.v.t.shopify.underwear-style"]) .m-facet--label {
  font-weight: 600;
  line-height: 1;
}

/* The count (often inside .m-facet--count) – make it look like (22) */
.m-filter--wrapper label:has(input[name*="filter.v.option.size"]) .m-facet--count,
.m-filter--wrapper label:has(input[name*="filter.v.t.shopify.underwear-style"]) .m-facet--count {
  opacity: 0.7;
  font-weight: 500;
}

/* Selected state: label contains a checked input */
.m-filter--wrapper label:has(input[name*="filter.v.option.size"]:checked),
.m-filter--wrapper label:has(input[name*="filter.v.t.shopify.underwear-style"]:checked) {
  border-color: rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.03);
}

/* Hover (desktop): subtle emphasis */
@media (hover: hover) {
  .m-filter--wrapper label:has(input[name*="filter.v.option.size"]):hover,
  .m-filter--wrapper label:has(input[name*="filter.v.t.shopify.underwear-style"]):hover {
    border-color: rgba(0,0,0,0.40);
  }
}

/* Disabled / unavailable (if theme uses disabled) */
.m-filter--wrapper label:has(input[name*="filter.v.option.size"]:disabled),
.m-filter--wrapper label:has(input[name*="filter.v.t.shopify.underwear-style"]:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}



/* Hide the actual checkbox/radio inside pill labels (keep accessible) */
.m-filter--wrapper label:has(input[name*="filter.v.option.size"]) input,
.m-filter--wrapper label:has(input[name*="filter.v.t.shopify.underwear-style"]) input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Ensure the label can position the hidden input */
.m-filter--wrapper label:has(input[name*="filter.v.option.size"]),
.m-filter--wrapper label:has(input[name*="filter.v.t.shopify.underwear-style"]) {
  position: relative !important;
}









/* =========================================================
   THRAAYA – Size + Style as 2-column pill buttons
   Targets Minimog markup: ul.m-facets > li.m-facet--item > label.m-facet--checkbox
   ========================================================= */

/* 1) Force 2-column layout for SIZE group */
.m-filter--widget-content:has(input[name="filter.v.option.size"]) ul.m-facets {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* 2) Force 2-column layout for UNDERWEAR STYLE group */
.m-filter--widget-content:has(input[name*="filter.v.t.shopify.underwear-style"]) ul.m-facets {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* Make each item/label fill the grid cell */
.m-filter--widget-content:has(input[name="filter.v.option.size"]) .m-facet--item,
.m-filter--widget-content:has(input[name*="filter.v.t.shopify.underwear-style"]) .m-facet--item {
  margin: 0 !important;
}

.m-filter--widget-content:has(input[name="filter.v.option.size"]) label.m-facet--checkbox,
.m-filter--widget-content:has(input[name*="filter.v.t.shopify.underwear-style"]) label.m-facet--checkbox {
  width: 100% !important;
}

/* ---------------------------------------------------------
   Pill styling (label becomes the pill)
   --------------------------------------------------------- */
.m-filter--widget-content:has(input[name="filter.v.option.size"]) label.m-facet--checkbox,
.m-filter--widget-content:has(input[name*="filter.v.t.shopify.underwear-style"]) label.m-facet--checkbox {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  padding: 10px 14px !important;
  min-height: 44px !important;
  border-radius: 0px !important;

  border: 1px solid rgba(0,0,0,0.18) !important;
  background: transparent !important;

  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;

  transition: border-color 120ms ease, background-color 120ms ease;
}

/* Hide the default checkbox UI (input + checkbox svg) */
.m-filter--widget-content:has(input[name="filter.v.option.size"]) label.m-facet--checkbox > input,
.m-filter--widget-content:has(input[name*="filter.v.t.shopify.underwear-style"]) label.m-facet--checkbox > input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* In your markup, the checkbox icon is the first SVG after input */
.m-filter--widget-content:has(input[name="filter.v.option.size"]) label.m-facet--checkbox > svg,
.m-filter--widget-content:has(input[name*="filter.v.t.shopify.underwear-style"]) label.m-facet--checkbox > svg {
  display: none !important;
}

/* Text weight + count */
.m-filter--widget-content:has(input[name="filter.v.option.size"]) .m-facet--label,
.m-filter--widget-content:has(input[name*="filter.v.t.shopify.underwear-style"]) .m-facet--label {
  font-weight: 500 !important;
  line-height: 1 !important;
}

.m-filter--widget-content:has(input[name="filter.v.option.size"]) .m-facet--product-count,
.m-filter--widget-content:has(input[name*="filter.v.t.shopify.underwear-style"]) .m-facet--product-count {
  opacity: 0.7 !important;
  font-weight: 500 !important;
}

/* Selected state: label contains a checked input */
.m-filter--widget-content:has(input[name="filter.v.option.size"]) label.m-facet--checkbox:has(input:checked),
.m-filter--widget-content:has(input[name*="filter.v.t.shopify.underwear-style"]) label.m-facet--checkbox:has(input:checked) {
  border-color: rgba(0,0,0,0.55) !important;
  background: rgba(0,0,0,0.03) !important;
}

/* Hover state (desktop only) */
@media (hover: hover) {
  .m-filter--widget-content:has(input[name="filter.v.option.size"]) label.m-facet--checkbox:hover,
  .m-filter--widget-content:has(input[name*="filter.v.t.shopify.underwear-style"]) label.m-facet--checkbox:hover {
    border-color: rgba(0,0,0,0.40) !important;
  }
}








/* =========================================================
   THRAAYA – Color as pill buttons (dot + name) using Minimog swatches
   ========================================================= */

/* 2 columns */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline > li {
  margin: 0 !important;
}

/* Pill container */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline > li.m-facet--color > label {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  padding: 10px 14px !important;
  min-height: 44px !important;
  border-radius: 0 !important;

  border: 1px solid rgba(0,0,0,0.18) !important;
  background: transparent !important;
  box-shadow: none !important;

  cursor: pointer !important;
}

/* Dot: keep Minimog swatch as the dot (uses inline background-color) */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline > li.m-facet--color .m-facet--color-label {
  width: 12px !important;
  height: 12px !important;
  border-radius: 0 !important;
  flex: 0 0 12px !important;
  margin: 0 !important;

  /* you said no dot border */
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep the inner label accessible but not visible (it lives inside the dot) */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline > li.m-facet--color .m-facet--color-label .m\:visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Name tag: use the tooltip text as the visible label */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline > li.m-facet--color .m-tooltip__content {
  display: inline !important;
  position: static !important;
  transform: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;

  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: currentColor !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

/* If Minimog adds tooltip arrow pseudo-elements, hide them */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline > li.m-facet--color .m-tooltip__content::before,
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline > li.m-facet--color .m-tooltip__content::after {
  display: none !important;
}

/* Selected state:
   - Minimog sets li.active/remove-tag
   - AND input may be checked
*/
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline > li.m-facet--color.active > label,
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline > li.m-facet--color > label:has(input:checked) {
  border-color: rgba(0,0,0,0.55) !important;
  background: rgba(0,0,0,0.03) !important;
}

/* Hover */
@media (hover: hover) {
  .m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
  ul.m-facets.m-filter--swatches-inline > li.m-facet--color > label:hover {
    border-color: rgba(0,0,0,0.40) !important;
  }
}










/* =========================================================
   THRAAYA – Accordion heading active-dot (CSS-only)
   Shows when ANY option inside the accordion is selected
   ========================================================= */

.m-filter--widget-title {
 font-size:18px !important;
 font-weight:600 !important;
}

.m-filter--widget.m-accordion--item .m-filter--widget-title > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Dot appears when this accordion has checked inputs */
.m-filter--widget.m-accordion--item:has(input:checked)
  .m-filter--widget-title > span:first-child::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 0 !important;
  background: currentColor !important;
  opacity: 0.9 !important;
  display: inline-block !important;
}

/* Remove the buggy right indicator */
.m-filter--widget-title .m-filter-indicator {
  display: none !important;
}

/* =========================================================
   Accordion active indicator: move dot from LEFT to RIGHT
   (CSS-only, stable)
   ========================================================= */

/* Kill any left-side dot */
.m-filter--widget.m-accordion--item:has(input:checked)
  .m-filter--widget-title > span:first-child::before {
  content: none !important;
  display: none !important;
}

/* Recreate the dot on the RIGHT side */
.m-filter--widget.m-accordion--item:has(input:checked)
  .m-filter--widget-title > span:first-child::after {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  opacity: 0.9 !important;
  margin-left: 6px !important; /* brings it close to title */
  vertical-align: middle !important;
}




/* =========================================================
   THRAAYA – Full width filter drawer on mobile
   ========================================================= */
@media (max-width: 767px) {
  .m-sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* If Minimog uses an inner wrapper that sets width */
  .m-sidebar .m-sidebar--content {
    width: 100% !important;
  }

  /* Optional: remove rounding/spacing if it exists */
  .m-sidebar {
    border-radius: 0 !important;
  }
}




/* Material 2-column grid */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.fabric"]) ul.m-facets {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* Pill styling */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.fabric"]) label.m-facet--checkbox {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  padding: 10px 14px !important;
  min-height: 44px !important;
  border-radius: 0 !important;

  border: 1px solid rgba(0,0,0,0.18) !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Hide checkbox svg icon for Material */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.fabric"]) label.m-facet--checkbox > svg {
  display: none !important;
}

/* Hide real input (accessible) */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.fabric"]) label.m-facet--checkbox > input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
}

/* Selected */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.fabric"]) label.m-facet--checkbox:has(input:checked) {
  border-color: rgba(0,0,0,0.55) !important;
  background: rgba(0,0,0,0.03) !important;
}



/* =========================================================
   FIX: Show color names next to dots (use tooltip content as label)
   ========================================================= */

/* Force tooltip text to behave like normal inline text */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline
li.m-facet--color
.m-tooltip__content {
  position: static !important;
  transform: none !important;
  inset: auto !important;

  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;

  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;

  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: currentColor !important;

  pointer-events: none !important; /* avoid hover weirdness */
  white-space: nowrap !important;
}

/* Kill tooltip arrows completely */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline
li.m-facet--color
.m-tooltip__content::before,
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline
li.m-facet--color
.m-tooltip__content::after {
  display: none !important;
}








/* Color pill count styling (matches your other facet counts) */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline .m-facet--product-count {
  margin-left: 6px !important;
  opacity: 0.7 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}



/* Color pill count spacing */
.m-filter--widget-content:has(input[name="filter.v.t.shopify.color-pattern"])
ul.m-facets.m-filter--swatches-inline .m-facet--product-count {
  margin-left: 6px !important;
  opacity: 0.7 !important;
  font-weight: 500 !important;
}



/* Always show the sticky footer CTA */
.thraaya-filter-footer {
  position: sticky !important;
  bottom: 0 !important;
  background: #fff !important;
  z-index: 30 !important;
  display: flex !important;
  justify-content: center !important;
}

/* Optional: add a subtle top separation so it feels premium */
.thraaya-filter-footer {
 /* border-top: 1px solid rgba(0,0,0,0.08) !important;*/
  padding-top:24px;
}

.m-filter--widget {
    margin-bottom: 20px!important;
}




.m-active-facets--item {
   
  /*  margin: 6px 16px 0 0!important;*/
    
}

/* Container: Horizontal Scroll */
#ActiveFacets.m-active-facets {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0px;
  padding-bottom:10px;
  padding-top:0px;
  padding-left:0px;
  padding-right:0px;
  position: relative;
}

#ActiveFacets.m-active-facets::-webkit-scrollbar {
  display: none;
}

/* Individual Filter Items */
#ActiveFacets .m-active-facets--item {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* THE STICKY CLEAR BUTTON */
#ActiveFacets .m-active-facets--item-remove-all {
  position: sticky !important;
  right: 0;
  z-index: 10;
  margin-left: auto;
  padding-left: 20px;
  padding-right: 10px;
  /* Use your site's background color here to hide scrollable text behind the button */
  background: linear-gradient(to right, transparent, #ffffff 20%);
}

#ActiveFacets .m-active-facets--remove-all {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-decoration: underline;
  color: #000;
  padding-top: 5px;
  padding-bottom: 5px;
}






/* Container Tweaks */
#ActiveFacets.m-active-facets {
  cursor: grab;
  user-select: none;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#ActiveFacets.m-active-facets::-webkit-scrollbar {
  display: none;
}

#ActiveFacets.m-active-facets.is-dragging {
  cursor: grabbing;
}

/* Individual Filter Items */
#ActiveFacets .m-active-facets--item {
  flex: 0 0 auto !important;
  pointer-events: auto !important; /* Ensure they stay clickable */
}

/* THE STICKY CLEAR BUTTON FIX */
#ActiveFacets .m-active-facets--item-remove-all {
  position: sticky !important;
  right: 0;
  z-index: 20; /* Higher than other items */
  margin-left: auto;
  padding-left: 30px; /* Space for the gradient */
  background: linear-gradient(to right, transparent, #ffffff 40%);
  pointer-events: none; /* Let the container drag through the padding area */
}

/* Ensure the actual link inside the sticky container gets clicks back */
#ActiveFacets .m-active-facets--item-remove-all a {
  pointer-events: auto !important;
  display: inline-block;
  cursor: pointer;
  position: relative;
  z-index: 21;
}




.m-active-facets--remove-icon {
  margin-left: 8px;
}






.main-product__block .m-product-title {

    font-size: 20px!important;

}



.jm-sort-filter__select{
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    background-color: transparent;
    color: var(--jm-review-widget-text-color);
    border: 1px solid var(--jm-review-widget-text-color);
    inline-size: 100%;
    align-self: stretch;
    padding-inline-start: var(--jm-filter-padding-inline);
    padding-inline-end: 2em;
    padding-block: var(--jm-filter-padding-block);
    cursor: pointer;
    font-weight: 500;
    border-radius: 0!important;
}







@media screen and (max-width: 767px) {
    .m-mixed-layout--mobile-scroll .m-mixed-layout__inner {
        --slider-grid: auto / auto-flow var(--mobile-column-width, 33vw)!important;
        display: grid;
        grid: var(--slider-grid);
        column-gap: var(--column-gap-mobile, var(--column-gap));
        margin-inline: 0 !important;
    }
}


.m-product-option--button .m-product-option--node__label {
    border: 1px solid rgb(var(--color-border));
    min-width: 35px;
    padding: 10px;
    margin: 4px!important;
    font-size: 18px;
    border-radius: 5px;
    transition: var(--m-duration-default, .25s) all;
    text-transform: capitalize;
    line-height: 1.3;
}


/* Keep the tile's space in the grid, but hide + disable it 
label.m-facet--checkbox:has(input[name="filter.v.option.size"][value="XXXS"]) {
  visibility: hidden !important;   
  pointer-events: none !important; 
}*/

/* Optional: prevent it from taking focus (keyboard tabbing)
label.m-facet--checkbox:has(input[name="filter.v.option.size"][value="XXXS"]) input {
  display: none !important;
}

 */

/* Make the size filter options a real 2-column grid */
.m-filter--widget [name="filter.v.option.size"] {
  /* this targets inputs; we use it to find the parent wrapper below */
}

.m-filter--widget:has(input[name="filter.v.option.size"]) .m-facet--checkboxes,
.m-filter--widget:has(input[name="filter.v.option.size"]) .m-facet--values,
.m-filter--widget:has(input[name="filter.v.option.size"]) .m-facet--list,
.m-filter--widget:has(input[name="filter.v.option.size"]) .m-facet--content {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* Ensure each tile spans one grid cell nicely */
.m-filter--widget:has(input[name="filter.v.option.size"]) label.m-facet--checkbox {
  width: 100% !important;
  margin: 0 !important;
}









.m-collection-toolbar--sticky{position:static!important;top:0;left:0;right:0;padding:0 15px;z-index:10;background-color:rgb(var(--color-background))}

@media screen and (max-width: 767px) {
    .m-collection-toolbar {
        position: static!important;
        top: 0;
        z-index: 11;
    }
}


 .m-collection-toolbar--wrapper {
        margin: 0;
       /* padding: 7px 15px!important;*/
        padding: 0px 0px 7px 15px!important;
       
    }

    .m-active-facets--item:hover {
    color: #2d2a26!important;
    background: #2d2a261a!important;
}


@media (max-width: 767px) {
.m-active-facets--item {
    margin: 6px 8px 0 0 !important;
}
}


@media (min-width: 768px) {
.m-active-facets--item {
    margin: 6px 12px 0 0 !important;
}
}



@media (min-width: 768px) {
    .md\:m\:grid-3-cols {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}