/** Shopify CDN: Minification failed

Line 1362:1 Expected "}" to go with "{"

**/
@charset "UTF-8";
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
/* clears the ‘X’ from Chrome */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
}

/* initial */

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  font-size: var(--font-body-size);
  letter-spacing: 0.06rem;
  line-height: var(--font-body-line-height);
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

@media screen and (max-width < 48rem){
  body {
    font-size: var(--font-body-size-mobile);
  }
}


main{
  padding-top: calc(var(--utility-bar-gap) + var(--header-gap) + var(--announcement-bar-gap));
  min-height: 75vh;
  overflow-x: hidden;
  max-width: 100vw;
}
@media screen and (max-width: 48rem){
  main{
    padding-top: calc(var(--header-gap) + var(--announcement-bar-gap));
  }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: var(--font-heading-letter-spacing);
  line-height: var(--font-heading-line-height);
  hyphens: auto;
  word-wrap: break-word;
}

h1, .h1{
  font-size: var(--font-heading-h1-size);
}
@media screen and (max-width: 48rem) {
  h1, .h1{
    font-size: calc(var(--font-heading-h1-size) * 0.9);
  }
}

h2, .h2{
  font-size: var(--font-heading-h2-size);
}
@media screen and (max-width: 48rem) {
  h2, .h2{
    font-size: calc(var(--font-heading-h2-size) * 0.9);
  }
}

h3, .h3{
  font-size: var(--font-heading-h3-size);
}
@media screen and (max-width: 48rem) {
  h3, .h3{
    font-size: calc(var(--font-heading-h3-size) * 0.9);
  }
}

h4, .h4{
  font-size: var(--font-heading-h4-size);
}
@media screen and (max-width: 48rem) {
  h4, .h4{
    font-size: calc(var(--font-heading-h4-size) * 0.9);
  }
}

h5, .h5{
  font-size: var(--font-heading-h5-size);
}
@media screen and (max-width: 48rem) {
  h5, .h5{
    font-size: calc(var(--font-heading-h5-size) * 0.9);
  }
}

h6, .h6{
  font-size: var(--font-heading-h6-size);
}

p{
  font-family: var(--font-body);
  font-style: var(--font-style);
  font-weight: var(--font-weight);
}

.text-color-text{
  color: rgb(var(--color-text)) !important;
}
.text-color-accent{
  color: rgb(var(--color-accent)) !important;
}
.text-color-heading{
  color: rgb(var(--color-heading)) !important;
}
.text-color-link{
  color: rgb(var(--color-links)) !important;
}
.text-color-link a:hover,
.text-color-link a:focus{
  color: rgb(var(--color-links-hover)) !important;
}
.font-body{
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  letter-spacing: 0.06rem;
  line-height: var(--font-body-line-height);
}
.font-heading{
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
}

*:focus{
  outline: none;
}
*:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: var(--color-focus-offset, 2px);
}
*.no-keyboard-focus{
  outline: none !important;
}
.link:focus-visible{
  display: inline-block;
}
.no-focus-visible:focus-visible{
  outline: none;
}

/* Focus-visible styles for custom buttons */
.custom-button:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: var(--color-focus-offset, 2px);
  box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.3);
}
.shopify-payment-button__button--unbranded:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: var(--color-focus-offset, 2px);
}

/* Focus-visible styles for elements with role="button" and tabindex */
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: var(--color-focus-offset, 2px);
}

/* Focus-visible styles for custom select buttons */
.custom-select button:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}
.custom-select li:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* Focus-visible for carousel navigation buttons */
.button-previous:focus-visible,
.button-next:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: var(--color-focus-offset, 2px);
  box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.3);
}

/* Focus-visible for close buttons */
.button-close:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: var(--color-focus-offset, 2px);
}

/* Focus-visible for checkbox labels */
input[type="checkbox"]:focus-visible + label{
  outline: 2px solid var(--color-focus);
  outline-offset: var(--color-focus-offset, 2px);
}

/* Focus-visible for links inside overflow-hidden containers */
.overflow-hidden > a:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* Focus-visible for facet filter dropdown options */
.input--dropdown-select li:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}
th, td{
  border: 1px solid;
  border-color: currentColor;
}
table{
  min-width: 100%;
  max-width: 100%;
}
#main a:not(.custom-button):not(.icon):not(.button-back):not([href="#"]){
  color: rgb(var(--color-links));
}
#main a:not(.custom-button):not(.icon):not(.button-back):not([href="#"]):hover{
  color: rgb(var(--color-links-hover));
}
#main .icon{
  color: rgb(var(--color-icons));
}
.body-text h1,
.body-text h2,
.body-text h3,
.body-text h4,
.body-text h5,
.body-text h6{
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}
.body-text ol:not(.custom-list),
.article-content ol:not(.custom-list),
.shopify-policy__body ol:not(.custom-list){
  list-style: decimal !important;
  list-style-position: inside !important;
  margin-block: 1em;
  padding-left: 1rem !important;
}
.body-text ul:not(.custom-list),
.article-content ul:not(.custom-list),
.shopify-policy__body ul:not(.custom-list){
  list-style: disc !important;
  list-style-position: inside !important;
  margin-block: 1em;
  padding-left: 1rem !important;
}
.body-text td,
.body-text th{
  padding: 0.5em;
}
.body-text table,
.article-content table{
  margin-block: 1em;
}
.body-text ol.custom-list,
.body-text ul.custom-list,
.article-content ol.custom-list,
.article-content ul.custom-list{
  display: inline-block;
}
.body-text hr,
.article-content hr{
  margin-block: 3em;
}
blockquote{
  font-style: italic;
  border-left: .2rem solid color-mix(in oklab,currentColor 10%,transparent);
  display: inline-flex;
  margin-left: 1rem;
  margin-block: 1em;
}
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.skip-to-content:focus{
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
  outline: 2px solid var(--color-focus);
  outline-offset: var(--color-focus-offset, 2px);
}

.custom-container{
  width: var(--page-general-width);
  max-width: var(--page-max-width);
  margin-inline: auto;
}

.swiper-button-next:after,
.swiper-button-previous:after{
  display: none;
}
.swiper-pagination.hidden{
  display: none !important;
}
.button-previous,
.button-next{
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 100%;
}
.button-previous.focused,
.button-next.focused{
  opacity: 100%;
}
/* Show navigation buttons when any element within the slider group receives keyboard focus */
.group:focus-within > .swiper-navigation-wrapper .button-previous,
.group:focus-within > .swiper-navigation-wrapper .button-next,
.group:focus-within > .button-previous,
.group:focus-within > .button-next,
.button-previous:focus-visible,
.button-next:focus-visible{
  opacity: 1;
}
number-pagination .button-previous,
number-pagination .button-next{
  box-shadow: unset;
}
.button-previous svg,
.button-next svg{
  transition: all 0.1s ease-in-out;
}
.button-previous:hover svg,
.button-next:hover svg{
  transform: scale(1.2);
}
@media screen and (max-width: 48rem){
  .button-previous,
  .button-next{
    opacity: 100;
  }
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;  /* Hide scrollbar for IE/Edge */
  scrollbar-width: none;      /* Hide scrollbar for Firefox */
}

.default-transition-timing{
  transition-timing-function: var(--default-transition-timing);
}
.dynamic-transition-timing{
  transition-timing-function: var(--dynamic-transition-timing);
}

.link{
  color: rgb(var(--color-links));
}
.link.no-link-color{
  color: currentColor !important;
}
.link:hover, .link:focus,
.link-hover:hover, .link-hover:focus{
  color: rgb(var(--color-links-hover));
}
.link-hover-animation{
  color: inherit;
}

.link-hover-animation:hover,
.link-hover-animation:focus{
  --link: rgba(var(--color-links-hover), 60%);
  --link-hover: rgb(var(--color-links-hover));
  --dur: 0.8s;

  background-image: linear-gradient(90deg, var(--link) 0, 
    var(--link) 40%, 
    var(--link-hover) 60%, 
    var(--link) 100%
  );
  background-size: 200% 100%;
  background-position: 0% 0;

  -webkit-background-clip: text;
  background-clip: text;
  
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari */
  text-shadow: 0 0 0 currentColor;

  animation: hl-sweep var(--dur) linear infinite;
  will-change: background-position; 
  backface-visibility: hidden;
  padding: 0;
}

@keyframes hl-sweep{
  0%   { background-position: 200% 0; }
  100% { background-position:  0% 0; }
}

@media (prefers-reduced-motion: reduce){
  .link-hover-animation{
    animation: none;
    background-position: 0% 0;
  }
}

@property --pos { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.link-hover-animation-highlight:hover{
  --link: rgba(var(--color-links-hover), 100%);
  --link-hover: #fff;
  --dur: 1.2s;

   background-image: linear-gradient(90deg, var(--link) 0, 
    var(--link) 80%, 
    var(--link-hover) 90%, 
    var(--link) 100%
  );

  background-size: 200% 100%, 100% 100%;
  background-position: var(--pos) 0, 0 0;

  -webkit-background-clip: text;
  background-clip: text;

    color: transparent;
  -webkit-text-fill-color: transparent; /* Safari */

  animation: hl-ltr-highlight var(--dur) linear infinite;
  opacity: .85;
  transform: translateZ(0);   
  will-change: background-position;
  backface-visibility: hidden;
  text-shadow: 0 0 0 currentColor;
}

@keyframes hl-ltr-highlight{
  from { --pos:   200%; }
  to   { --pos: 0%; }
}

@media (prefers-reduced-motion: reduce){
  .link-hover-highlight::after{ animation: none !important; }
}
/* drawer */
.drawer__inner{
  background: var(--drawer-color-background);
  color: rgb(var(--drawer-color-text));
  box-shadow: var(--drawer-shadow);
}
.drawer a.link{
  color: rgb(var(--drawer-color-links));
}
.drawer a.link:hover{
  color: rgb(var(--drawer-color-links-hover));
}
.drawer .placeholder{
  color: rgb(var(--drawer-color-placeholder));
}
.drawer .button--primary,
.drawer .input--primary{
  background: rgba(var(--drawer-color-primary-input-background), var(--input-background-opacity));
  color: rgb(var(--drawer-color-primary-input-text));
  border-color: rgb(var(--drawer-color-primary-input-border));
}
.drawer .button--secondary,
.drawer .input--secondary{
  background: rgba(var(--drawer-color-secondary-input-background), var(--input-background-opacity));
  color: rgb(var(--drawer-color-secondary-input-text));
  border-color: rgb(var(--drawer-color-secondary-input-border));
}
.drawer .custom-input-wrapper.input--primary:after{
  background-color: rgb(var(--drawer-color-primary-input-border));
}
.drawer .custom-input-wrapper.input--primary input{
  border-color: rgb(var(--drawer-color-primary-input-border));
}
.drawer .custom-input-wrapper.input--secondary:after{
  background-color: rgb(var(--drawer-color-secondary-input-border));
}
.drawer .custom-input-wrapper.input--secondary input{
  border-color: rgb(var(--drawer-color-secondary-input-border));
}
.drawer .input--primary label{
  background-color: rgb(var(--drawer-color-primary-input-background));
}
.drawer .input--secondary label{
  background-color: rgb(var(--drawer-color-secondary-input-background));
}
.drawer .custom-button{
  max-width: var(--drawer-input-width);
}
/* eof drawer */

/* popup */
.popup[data-style="full"]{
  background: var(--popup-color-background);
}
.popup__inner{
  box-shadow: var(--popup-shadow);
  border-radius: var(--popup-radius);
  background: var(--popup-color-background);
  color: rgb(var(--popup-color-text));
}
.popup[data-style="full"] .popup__inner{
  background: transparent;
}
.popup[data-style="full"] .popup__inner{
  box-shadow: unset;
}
.popup__inner a.link{
  color: rgb(var(--popup-color-links));
}
.popup__inner a.link:hover,
.popup__inner a.link:focus{
  color: rgb(var(--popup-color-links-hover));
}
.popup .button--primary,
.popup .input--primary{
  background: rgba(var(--popup-color-primary-input-background), var(--input-background-opacity));
  color: rgb(var(--popup-color-primary-input-text));
  border-color: rgb(var(--popup-color-primary-input-border));
}
.popup .button--secondary,
.popup .input--secondary{
  background: rgba(var(--popup-color-secondary-input-background), var(--input-background-opacity));
  color: rgb(var(--popup-color-secondary-input-text));
  border-color: rgb(var(--popup-color-secondary-input-border));
}
.popup .custom-input-wrapper.input--primary:after{
  background-color: rgb(var(--popup-color-primary-input-border));
}
.popup .custom-input-wrapper.input--primary input{
  border-color: rgb(var(--popup-color-primary-input-border));
}
.popup .custom-input-wrapper.input--secondary:after{
  background-color: rgb(var(--popup-color-secondary-input-border));
}
.popup .custom-input-wrapper.input--secondary input{
  border-color: rgb(var(--popup-color-secondary-input-border));
}
.popup .input--primary label{
  background-color: rgb(var(--popup-color-primary-input-background));
}
.popup .input--secondary label{
  background-color: rgb(var(--popup-color-secondary-input-background));
}
.popup .custom-button{
    max-width: var(--popup-input-width);
}
/* eof popup */

/* price */
.price{
  font-size: 14px;
  line-height: 1.2;
}
.price:not(.price--on-sale) .price__sale,
.price--on-sale .price__regular,
.price--sold-out .price__sale,
.price--sold-out .price__regular,
.price--sold-out .price__unit{
  display: none !important;
}
.price-item--sale{
  color: rgb(201,0,46);
}
.price .price__unit{
  font-size: 11px;
}
.price.price--on-sale .price__regular{
  display: none;
}
.price.price--sold-out .badge--sale{
  display: none;
}
/* eof price */

/* badge */
.badge{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  min-height: 23px;
  max-height: 27px;
  color: #fff;
  padding-inline: var(--badge-padding);
  font-size: 12px;
  border-radius: var(--badge-radius);
  font-weight: bold;
  line-height: normal;
}
.badge--sold-out{
  background: rgb(var(--color-badge-soldout));
}
.badge--sale{
  background: rgb(var(--color-badge-sale));
}
.badge--expired{
  background: #000;
}
/* eof badge */

/* button */
.custom-button{
  --color-links-hover: currentColor;
  padding: var(--button-padding);
  max-width: var(--button-width);
  border-radius: var(--button-radius);
  border-width: var(--button-border-width);
  border-style: solid;
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: #000;
  color: #fff;
  transition: all 0.3s ease-in-out;
  line-height: normal;
  position: relative;
  overflow: hidden;
}
.custom-button:disabled{
  opacity: 0.5;
  pointer-events: none;
}
.shopify-payment-button__button--unbranded{
  padding: var(--button-padding) !important;
  max-width: var(--button-width) !important;
  min-height: calc(22px + (var(--button-padding) * 2));
  --color-links-hover: currentColor;
  padding: var(--button-padding);
  max-width: var(--button-width);
  border-radius: var(--button-radius);
  border-width: var(--button-border-width);
  border-style: solid;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: all 0.3s ease-in-out;
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.button--primary{
  background: rgba(var(--color-primary-input-background), var(--button-background-opacity));
  color: rgb(var(--color-primary-input-text));
  border-color: rgb(var(--color-primary-input-border));
}
.button--primary:hover{
  --color-links-hover: var(--color-primary-input-text-hover);
  background: rgb(var(--color-primary-input-background-hover));
  color: rgb(var(--color-primary-input-text-hover));
  border-color: rgb(var(--color-primary-input-border-hover));
}
.button--secondary{
  background: rgba(var(--color-secondary-input-background), var(--button-background-opacity));
  color: rgb(var(--color-secondary-input-text));
  border-color: rgb(var(--color-secondary-input-border));
}
.button--secondary:hover{
  --color-links-hover: var(--color-secondary-input-text-hover);
  background: rgb(var(--color-secondary-input-background-hover));
  color: rgb(var(--color-secondary-input-text-hover));
  border-color: rgb(var(--color-secondary-input-border-hover));
}
.custom-button svg.button-border{
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 0.3s ease;
  opacity: 0.3;
}
.custom-button:hover svg.button-border{
  stroke-dashoffset: 0;
}
.custom-button .ripple{
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
  z-index: 10;
}
@keyframes ripple-animation {
  to {
      transform: scale(4);
      opacity: 0;
  }
}
/* image */
.img-blur img {
  -webkit-animation: blur 1s ease-in-out forwards;
          animation: blur 1s ease-in-out forwards;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  filter: blur(2px);
}
.img-blur svg {
  -webkit-animation: blur 1s ease-in-out forwards;
          animation: blur 1s ease-in-out forwards;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  filter: blur(2px);
}
@-webkit-keyframes blur {
  0% {
    filter: blur(2px);
  }
  100% {
    filter: blur(0);
  }
}

@keyframes blur {
  0% {
    filter: blur(2px);
  }
  100% {
    filter: blur(0);
  }
}
/* eof image */

.error{
  color: var(--color-text-error);
}

/* quantity selector */
cart-quantity-selector[data-value="1"] .button-minus{
  opacity: 0;
  pointer-events: none;
}
cart-quantity-selector.disabled{
  pointer-events: none;
  opacity: 0.5;
}
/* eof quantity selector */

/* input */
.input input,
.input textarea{
  outline: unset !important;
}
.custom-input-wrapper:has(input:focus-visible),
.custom-input-wrapper:has(textarea:focus-visible){
  outline: 2px solid var(--color-focus);
  outline-offset: var(--color-focus-offset, 2px);
}
.input:-webkit-autofill {
  animation-name: autofill-start;
  animation-duration: 0.01s;
  animation-iteration-count: 1;
}
.input label{
  height: max-content;
  position: absolute;
  display: flex;
  align-items: center;
  pointer-events: none;
  left: calc(var(--input-padding) - var(--spacing)*1);
}
.input.active label{
  margin-top: 0;
  margin-bottom: 0;
  transform: translateY(-50%);
  left: calc(var(--input-padding) - var(--spacing)*1);
}
.input.static-active label{
  margin-top: 0;
  margin-bottom: 0;
  transform: translateY(-50%);
  left: calc(var(--input-padding) - var(--spacing)*1);
}
.custom-input-wrapper{
  border-radius: var(--input-radius);
}
.custom-input-wrapper:after{
  content: '';
  width: 0;
  height: 1px;
  display: block;
  position: absolute;
  top: calc(100% + 3px);
  transition: all 0.3s ease-in-out;
  left: 0;
  right: 0;
  margin: auto;
}
.custom-input-wrapper.active:after{
  width: calc(100% - var(--input-radius));
}
.custom-input-wrapper.input--primary:after{
  background-color: rgb(var(--color-primary-input-border));
}
.custom-input-wrapper.input--secondary:after{
  background-color: rgb(var(--color-secondary-input-border));
}
.custom-input{
  padding: var(--input-padding);
  border-style: solid;
}
.custom-input-wrapper{
  border-radius: var(--input-radius);
  border-width: var(--input-border-width);
}
.custom-input-wrapper label{
  display: block;
}
.custom-input-wrapper:not(.active) textarea + label{
  padding-block: var(--input-padding);
}
.custom-select button{
  border-radius: var(--input-radius);
  border-width: var(--input-border-width);
  padding: var(--input-padding);
  border-style: solid;
}
.custom-select ul{
  transform-origin: 50% 0;
  transition: all .2s ease-in-out, opacity .15s ease-out;
  border-radius: 0 0 15px 15px;
  max-width: calc(100% - var(--input-radius));
  left: 0;
  right: 0;
  margin: auto;
}
.custom-select ul[data-hidden="false"]{
  opacity: 1;
  visibility: visible;
  scale: 1;
}
.custom-select ul[data-hidden="true"]{
  opacity: 0;
  visibility: hidden;
  scale: 0.75;
}
.custom-select svg{
    transition: all .2s var(--default-transition-timing);
    width: 12px;
}
.input--primary{
  background: rgba(var(--color-primary-input-background), var(--input-background-opacity));
  color: rgb(var(--color-primary-input-text));
  border-color: rgb(var(--color-primary-input-border));
}
.input--primary label{
  background-color: rgb(var(--color-primary-input-background));
}
.input--secondary{
  background: rgba(var(--color-secondary-input-background), var(--input-background-opacity));
  color: rgb(var(--color-secondary-input-text));
  border-color: rgb(var(--color-secondary-input-border));
}
.input--secondary label{
  background-color: rgb(var(--color-secondary-input-background));
}

/* checkbox */
input[type="checkbox"] + label svg:not(.checkbox-border):not(.checkbox-static-border){
  opacity: 0;
  visibility: hidden;
  transition: all 0.1s ease-in-out;
}
input[type="checkbox"]:checked + label svg{
  opacity: 1 !important;
  visibility: visible !important;
}

.placeholder{
  /* color: rgb(var(--color-placeholder)); */
  background-color: rgb(var(--color-placeholder));
}
.heading span{
  font-size: var(--heading-font-size);
}
.body-text span{
  font-size: var(--text-font-size);
}
.subheading span{
  font-size: var(--subheading-font-size);
}
.overlay{
  background-color: rgba(0, 0, 0, var(--overlay-opacity));
}
.shopify-section-group-header-group{
  position: relative;
}
.custom-theme-block{
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  z-index: 1;
  position: relative;
  text-wrap: wrap;
  hyphens: auto;
  text-align: var(--text-alignment);
}
/* media */
media[type="image"][data-enable-zoom="true"]:hover,
media[type="image"][data-enable-zoom="true"]:focus{
  cursor: zoom-in;
}
.object-contain{
  -o-object-fit: contain;
  object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
  object-fit: cover;
}
.min-w-\[max\(33\.3\%\,150px\)\]{
  min-width: max(33.3%, 150px);
}
.max-w-\[max\(33\.3\%\,150px\)\]{
  max-width: max(33.3%, 150px);
}
.pt-\[66\.67\%\]{
  padding-top: 66.67%;
}

/* accordion */
.accordion .accordion-heading[aria-expanded="false"] svg{
  transform: rotate(180deg);
}
.accordion .accordion-heading svg{
  transition: all 0.3s ease-in-out;
}
.accordion .accordion-heading:after{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: all 0.3s ease-in-out;
}
.accordion .accordion-heading:hover:after{
  width: 100%;
}

.shopify-payment-button__button--unbranded{
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* checkbox */
.checkbox-border {
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  transition: stroke-dashoffset 0.3s ease;
}
.group-product-card .custom-checkbox:hover .checkbox-border {
  stroke-dashoffset: 0;
}

/* list */
ul.form-status{
  list-style: disc;
  padding-left: 2rem;
}
.accordion-body ul{
  list-style: inside;
}
/* image sticker */
.image-sticker img{
  transition: all 0.3s linear;
  user-select: none;
}

/* product badge */
.product-badge{
  padding: var(--badge-padding);
}

/* animation section - scroll */
.animation-section parallax-element[data-animation-type="fade-toggle"] svg,
.animation-section parallax-element[data-animation-type="fade-toggle"] img{
  transition: all 2s ease-in-out !important;
  opacity: 0;
}
.animation-section.is-preroll parallax-element[data-animation-type="fade-toggle"] svg,
.animation-section.is-preroll parallax-element[data-animation-type="fade-toggle"] img{
  opacity: 1;
  transition-delay: 0.5s !important;
}

/* product compare checkbox */
.compare-product-checkbox[data-hidden="true"]{ display: none; }
.compare-product-checkbox label{
  gap: 0.5rem;
  font-size: 0.85em;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
}
.compare-product-checkbox label span:not(.custom-checkbox){
  opacity: 0;
  visibility: hidden;
  transition: all 0.1s ease-in-out;
  display: block;
  background: black;
  color: white;
  padding: 0.5rem;
  position: absolute;
  top: 0;
  left: calc(100% + 1rem);
  border-radius: 5px;
  line-height: 1.5;
  bottom: 0;
  height: max-content;
  margin: auto;
  width: max-content;
  max-width: 140px;
}
.compare-product-checkbox label:hover span:not(.custom-checkbox){
  opacity: 1;
  visibility: visible;
}
.compare-product-checkbox label span:not(.custom-checkbox):before{
  content: '';
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid #000;
  right: 100%;
  top: 1rem;
  margin: auto;
}
.compare-product-checkbox .custom-checkbox svg:first-child{
  fill: #fff;
}
.compare-product-checkbox .checkbox-border{
  stroke: #000;
}
.compare-product-checkbox .custom-checkbox svg:last-child{
  fill: #000;
  z-index: 10;
}

/* other */
.scroll-area {
  scrollbar-gutter: stable both-edges;
}
.button-bubble:before{
    content: "";
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #000;
    bottom: 100%;
    top: unset;
}

/* hover zoom image */
.hover-zoom-image-wrapper{
  cursor: pointer;
}
/* Overlay that brightens what's behind it */
.hover-zoom-image-wrapper hover-zoom-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;

  /* Tiny alpha background so backdrop-filter actually renders */
  background: rgba(255, 255, 255, 0.001);

  /* Start hidden */
  opacity: 0;

  /* Feathered center mask */
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    #000 0%, #000 40%, rgba(0,0,0,0) 70%);
  mask-image: radial-gradient(circle at 50% 50%,
    #000 0%, #000 40%, rgba(0,0,0,0) 70%);

  transition:
    opacity .3s ease-in-out,
    -webkit-backdrop-filter .3s ease-in-out,
    backdrop-filter .3s ease-in-out;
}
.hover-zoom-image-wrapper:hover hover-zoom-image::after {
  opacity: 1;
  -webkit-backdrop-filter: brightness(1.1);
  backdrop-filter: brightness(1.1);
}
hover-zoom-image{
  display: block;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  position: relative;
}
hover-zoom-image img{
  transform-origin: center center; /* keep zoom centered */
  transition: transform 0.1s linear;
  will-change: transform;
  z-index: 1;
}
hover-zoom-image img.isZoomed{
  transform: scale(1.2);
}
.shopify-challenge__container{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
/* BeautybyKat policy pages */
body .shopify-policy__container {
  width: calc(100% - 48px) !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 130px 0 90px !important;
}

body .shopify-policy__title {
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  text-align: left !important;
}

body .shopify-policy__title h1 {
  display: block !important;
  margin: 0 !important;
  font-size: 38px !important;
  line-height: 1.2 !important;
}

body .shopify-policy__body,
body .shopify-policy__body .rte {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

body .shopify-policy__body p {
  margin: 0 0 16px !important;
}

body .shopify-policy__body h2,
body .shopify-policy__body h3 {
  margin: 32px 0 12px !important;
}

@media screen and (max-width: 749px) {
  body .shopify-policy__container {
    width: calc(100% - 32px) !important;
    padding: 90px 0 65px !important;
  }

  body .shopify-policy__title h1 {
    font-size: 29px !important;
  }
  /* Consistent styling for all Shopify policy pages */
.shopify-policy__container {
  max-width: 900px;
  margin: 0 auto;
  padding: 55px 24px 70px;
  color: #5f5652;
}

.shopify-policy__title {
  text-align: left;
  margin-bottom: 35px;
}

.shopify-policy__title h1 {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 12px;
  color: #2f2725;
  font-family: var(--font-heading-family);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: var(--font-heading-weight);
  line-height: 1.2;
}

.shopify-policy__title h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 55px;
  height: 2px;
  background: #a2826c;
}

.shopify-policy__body {
  color: #5f5652;
  font-family: var(--font-body-family);
}

.shopify-policy__body h2,
.shopify-policy__body h3 {
  margin: 34px 0 14px;
  color: #2f2725;
  font-family: var(--font-heading-family);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: var(--font-heading-weight);
  line-height: 1.3;
}

.shopify-policy__body h4 {
  margin: 26px 0 10px;
  color: #4a3e39;
  font-family: var(--font-heading-family);
  font-size: 18px;
  line-height: 1.4;
}

.shopify-policy__body p,
.shopify-policy__body li {
  color: #5f5652;
  font-family: var(--font-body-family);
  font-size: 14px;
  line-height: 1.75;
}

.shopify-policy__body p {
  margin: 0 0 16px;
}

.shopify-policy__body a {
  color: #8b6654;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shopify-policy__body a:hover {
  color: #2f2725;
}

.shopify-policy__body ul,
.shopify-policy__body ol {
  padding-left: 24px;
  margin-bottom: 18px;
}

@media screen and (max-width: 749px) {
  .shopify-policy__container {
    padding: 38px 18px 55px;
  }

  .shopify-policy__title {
    margin-bottom: 28px;
  }

  .shopify-policy__body h2,
  .shopify-policy__body h3 {
    margin-top: 28px;
  }
}
/* Back to School navigation highlight — menus only */
custom-header a[href*="/collections/flash-sale"],
menu-drawer a[href*="/collections/flash-sale"],
.menu-drawer a[href*="/collections/flash-sale"] {
  color: #fff3c4;
  font-weight: 600;
  position: relative;
  transition: color 0.25s ease;
}

custom-header a[href*="/collections/flash-sale"]::before,
menu-drawer a[href*="/collections/flash-sale"]::before,
.menu-drawer a[href*="/collections/flash-sale"]::before {
  content: "📚";
  display: inline-block;
  margin-right: 6px;
  font-size: 1.05em;
  line-height: 1;
}

custom-header a[href*="/collections/flash-sale"]:hover,
menu-drawer a[href*="/collections/flash-sale"]:hover,
.menu-drawer a[href*="/collections/flash-sale"]:hover {
  color: #ffffff;
}