/** Shopify CDN: Minification failed

Line 906:21 Expected identifier but found "{"
Line 906:22 Unexpected "{"
Line 906:32 Expected ":"

**/
/* Lumin CSS - Custom Styles - v1.0 */

@media (max-width: 600px) {
.dlmc {
  text-align: center;
  justify-content: center;
}
}

.dcml {
  text-align: center;
  justify-content: center;
}

@media (max-width: 600px) {
.dcml {
  text-align: left;
  justify-content: start;
}
}
@media screen and (max-width: 600px) {
  .mobile-hide {
    display: none !important;
  }
}

@media screen and (min-width: 601px) and (max-width: 989px) {
  .tablet-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .desktop-hide {
    display: none !important;
  }
}
.text-center {
  text-align: center;
}
.slider-counter {
    font-size: 1.5rem !important;
}
/*.slider-buttons {
    margin-top: -1rem !important;
}
.slider-button .icon {
    height: 0.8rem !important;
}
/*.product__info-container.price--on-sale .price-item--regular {
    text-decoration-thickness: 2px!important;
    font-size: 2.2rem!important;
    color: #258635 !important;
}
.product__info-container.price .price-item {
    font-weight: 600 !important;
    letter-spacing: 0px;
    font-size: 2.2rem!important;
}

.button, .button-label, .shopify-challenge__button, .customer button {
    font-size: 1.8rem !important;
    letter-spacing: 0rem !important;
    font-weight: 600 !important;
}
.full-unstyled-link {
    font-size: 2rem;
}*/
.header__icon .icon {
    stroke: currentColor;
    stroke-width: 0.5;
}
.cart-count-bubble {
    bottom: 2.3rem !important;
    left: 2.4rem !important;
    border: 1px solid;
}

    quantity-popover .quantity {
    min-height: 3.2rem;
}
/*.cart-item__image {
    border-radius: 8px;
}
quantity-popover .quantity {
    zoom: 0.8;
}
.drawer__inner {
    width: 100% !important;
    max-width: calc(140vw - 3rem) !important;
}
.header__menu-item {
    color: rgba(var(--color-foreground),1) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}*/
.header__active-menu-item {
    text-decoration: none !important;
}
.footer__content-bottom {
    border-top: none !important;
}
.footer-block__details-content .list-menu__item--link {
    color: rgba(var(--color-foreground),.95) !important;
    line-height: 1.4;
    letter-spacing: 0;
}
@media screen and (min-width: 750px){
.footer__content-top .grid {
    row-gap: 6rem;
    column-gap: 6rem;
}
}
@media screen and (min-width: 750px){
.grid--4-col-tablet .grid__item {
    width: calc(25% - 6rem * 3 / 4) !important;
}
}
.accordion {
    border-top: 0 !important;
}
/*.accordion details[open]>summary .icon-caret {
    display: none;
}
.price {
    letter-spacing: 0 !important;
    font-weight: 600;
}
.price .price-item {
font-weight: 600 !important;
letter-spacing: -1px;
font-size: 2.2rem!important;
}
.price--on-sale .price-item--regular {
    color: #51aeb0 !important;
}*/

.spr-container {
  border-color: #ffffff !important;
  background: #ffffff;
  border-radius: 12px;
}
.spr-review, .spr-form {
    border-color: #fff5f7 !important;
}
.page-title {text-align:center;}
.announcement-bar .slider-button {
    rotate: 270deg;
}
.product-form__buttons {
    max-width: 70rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    display: grid;
    gap: 10px;
}
.product-form__submit {
    max-height: calc(4.7rem + var(--buttons-border-width)* 2);
}
.shopify-payment-button__button {
    min-height: calc(4.7rem + var(--buttons-border-width) * 2);
    height: calc(4.7rem + var(--buttons-border-width) * 2);
}
.shopify-policy__container {
    max-width: 800px;
    max-width: 95ch;
}
.live-circle {
    border-radius: 50%;
    display: inline-block;
    padding: 0;
    width: 11px;
    min-width: 11px;
    height: 11px;
    margin-right: 0.7rem;
    box-shadow: 0 0 0 0 var(--color-button);
    transform: scale(1);
    animation: 2.5s infinite pulsegentle;
    transition: opacity .35s ease-in-out;
    background-color: var(--color-button);
}
.hs-pill {
    position: relative;
    pointer-events: none;
    padding: 0;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-width: max-content; */
    background-color: #F05D5E;
    color: #c57171;
    border: 1px solid #fa8787;
    z-index: 1;
    font-weight: 500;
    line-height: 1;
    font-size: 1rem;
}
@keyframes pulsegentle {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(236,0,140,.6)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 3px rgba(236,0,140,0)
    }

    100% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(236,0,140,0)
    }
}
.spr-container .spr-review-content-body {
    font-size: calc(var(--font-body-size)*1px);
    color: rgba(var(--color-foreground),.75);
    line-height: 1.6;
}

.product-form__input input[type=radio]:checked+ .color-swatch {
    background-color: rgb(var(--color-foreground), .05);
    color: rgb(var(--color-foreground));
    border: 3px solid var(--swatch-color) !important;
    box-shadow: 0 0 #000, inset 0 0 0 3px #fff;
}
.product-form__input input[type=radio]:disabled+label, .product-form__input input[type=radio].disabled+label {
    color: rgba(var(--color-foreground),.3) !important;
    text-decoration: none !important;
}
/*.product-form__input input[type=radio]:disabled+label, .product-form__input input[type=radio].disabled+label:after {
    position: absolute;
    content: "";
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 1px solid;
    border-color: #a7a7a3!important;
    transform: rotate(45deg);
}*/
.media.media--hover-effect > video + video,
.media.media--hover-effect > video + img,
.media.media--hover-effect > img + video {
  opacity: 0;
}
  
.card__media .media video {
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

@media screen and (min-width: 990px) {
  .card .media.media--hover-effect > video:only-child,
  .card-wrapper .media.media--hover-effect > video:only-child {
    transition: transform var(--duration-long) ease;
  }

  .card:hover .media.media--hover-effect > video:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > video:first-child:only-child {
    transform: scale(1.03);
  }

  .card-wrapper:hover
    .media.media--hover-effect
    > video:first-child:not(:only-child) {
    opacity: 0;
  }

 .card-wrapper:hover .media.media--hover-effect > video + video,
 .card-wrapper:hover .media.media--hover-effect > video + img,
 .card-wrapper:hover .media.media--hover-effect > img + video {
  opacity: 1;
  transition: transform var(--duration-long) ease;
  transform: scale(1.03);
  }
}


.pdkt-fetr {
  display: flex;align-items: center;column-gap: 4px;text-transform: uppercase;font-size: small;font-weight: 500;
}
.pdkt-fetr-center {
  justify-content:center;
}
.pdkt-fetr-right {
  justify-content:flex-end;
}
/*.rich-text__wrapper h2:before {
    background-color: #e1f7f6;
    bottom: 10%;
    content: "";
    display: block;
    height: 12px;
    left: -5%;
    position: absolute;
    width: 110%;
    z-index: -1;
}*/
.lumin-collection {
   display: flex;
   align-items: center;
}
/*@media (max-width: 750px) {
  .lumin-collection-hide:first-child {
   display: none;
}
}
@media (max-width: 750px) {
.product__media-list .product__media-item {
    width: calc(100% - 1rem - var(--grid-mobile-horizontal-spacing)) !important;
  }
}

@media screen and (max-width: 749px){
.slider.slider--mobile {
    scroll-padding-left: 1rem !important;
}
}*/

/* BEGIN ANIMATION */

.is--animated,
.is--infinite {
  --duration-time: 1s;
}

.is--animated {
  -webkit-animation-duration: var(--duration-time);
  -webkit-animation-fill-mode: both;
  animation-duration: var(--duration-time);
  animation-fill-mode: both;
}

.is--infinite {
  animation-iteration-count: infinite;
  animation-duration: var(--duration-time);
}

.is--infinite:not(.lumin-ani-fadeIn) {
  --duration-time: 2s;
}

@media print, (prefers-reduced-motion: reduce) {
  .is--animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

.hdt-browser-Safari .is--animated.lumin-ani-swing {
  -webkit-transition-duration: 1ms !important;
  transition-duration: 1ms !important;
}

@keyframes lumin-ani-bounce {
  20%,
  53%,
  80%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.lumin-ani-bounce {
  -webkit-animation-name: lumin-ani-bounce;
  animation-name: lumin-ani-bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes lumin-ani-tada {
  from,
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
}

@keyframes lumin-ani-tada {
  from,
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
}

.lumin-ani-tada {
  -webkit-animation-name: lumin-ani-tada;
  animation-name: lumin-ani-tada;
}

@-webkit-keyframes lumin-ani-swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes lumin-ani-swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.lumin-ani-swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: lumin-ani-swing;
  animation-name: lumin-ani-swing;
}

@-webkit-keyframes lumin-ani-flash {
  50%,
  from,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@keyframes lumin-ani-flash {
  50%,
  from,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

.lumin-ani-flash {
  -webkit-animation-name: lumin-ani-flash;
  animation-name: lumin-ani-flash;
}

@-webkit-keyframes lumin-ani-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes lumin-ani-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.lumin-ani-fadeIn {
  -webkit-animation-name: lumin-ani-fadeIn;
  animation-name: lumin-ani-fadeIn;
}

@-webkit-keyframes lumin-ani-heartBeat {
  0%,
  28%,
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14%,
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}

@keyframes lumin-ani-heartBeat {
  0%,
  28%,
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14%,
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}

.lumin-ani-heartBeat {
  -webkit-animation-name: lumin-ani-heartBeat;
  animation-name: lumin-ani-heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes lumin-ani-shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes lumin-ani-shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.lumin-ani-shake {
  -webkit-animation-name: lumin-ani-shake;
  animation-name: lumin-ani-shake;
}

/* END ANIMATION */


/* START CARD COLOR SWATCHES */

.product-swatches {
  margin-bottom: 10px;
}

.product-form__controls-group label.color-swatch {
  width: 3.2rem;
  height: 3.2rem;
  padding: 0.9rem;
  border-radius: 50%;
  border: 0.1rem solid rgb(var(--color-border));
  box-sizing: border-box;
}
.product-form__controls-group label.color-swatch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  transform: translate(-50%, -50%);
  border-radius: inherit;
  background-color: var(--swatch-color);
  transition: border-color var(--duration-default);
  border: 0.1rem solid rgba(var(--color-accent), 0.3);
}

.card-wrapper .product-form__controls-group {
  gap: 0.4rem;
}
.card-wrapper .product-form__controls-group label.color-swatch {
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  border-color: transparent;
}
.card-wrapper .product-form__controls-group label.color-swatch::after {
  width: 1rem;
  height: 1rem;
}

.quick-add-modal .product-form__controls-group label.color-swatch {
  height: 3.2rem;
}

.product-form__controls-group input:checked:not(.disabled) + label.color-swatch,
.product-form__controls-group input + label.color-swatch:hover {
  border-color: rgb(var(--color-accent));
}

.product-form__controls-group input.disabled + label.color-swatch {
  opacity: 1;
}
.product-form__controls-group input.disabled + label.color-swatch::before {
  top: 50%;
  height: 0.1rem;
  clip-path: unset;
  z-index: 1;
  transform: translateY(-50%) rotate(-45deg);
}

.product-form__controls-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}
.product-form__controls-group input {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}
.product-form__controls-group input + label:hover {
  border-color: rgb(var(--color-button));
  color: rgb(var(--color-button));
}
.product-form__controls-group input.disabled + label {
  opacity: 0.5;
  pointer-events: none;
  background-color: transparent !important;
  border: 0.15rem solid rgba(var(--color-button-tertiary-text)) !important;
}
.product-form__controls-group input.disabled + label:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #9c9a9a;
  clip-path: polygon(96% 0, 100% 0, 4% 100%, 0% 100%);
}
.product-form__controls-group input:checked:not(.disabled) + label {
  border-color: rgb(var(--color-button));
  color: rgb(var(--color-button));
}
.product-form__controls-group input:checked:not(.disabled) + label:before {
  background-color: rgb(var(--color-button));
}
.product-form__controls-group label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 2rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: rgb(var(--color-foreground-title));
  border: 0.2rem solid rgb(var(--color-border));
  border-radius: 0.4rem;
  cursor: pointer;
  position: relative;
  transition: var(--duration-default);
}
@media (min-width: 750px) {
  .product-form__controls-group label {
    font-size: 1.6rem;
  }
}

.variant_button .color-swatch {
  padding: 0 !important;
}
/* END CARD COLOR SWATCHES */

/* checkbox start */
.inactiveMixin {
            content: "";
            position: absolute;
            display: block;
          }
          .beforeAnimation {
            -moz-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
            -o-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
            -webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
            transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
          }
          .afterAnimation {
            box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);
            -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
            -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
            -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
            transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
          }
          .toggleWrapper {
            margin: 20px 0;
            display:flex;
            align-items: center;
          }
          .toggleWrapper input.mobileToggle {
            opacity: 0;
            position: absolute;
          }
          .toggleWrapper input.mobileToggle + label {
            position: relative;
            display: inline-block;
            user-select: none;
            -moz-transition: 0.4s ease;
            -o-transition: 0.4s ease;
            -webkit-transition: 0.4s ease;
            transition: 0.4s ease;
            -webkit-tap-highlight-color: transparent;
            height: 30px;
            width: 50px;
            border: 1px solid #e4e4e4;
            border-radius: 60px;
            flex: 0 0 50px;
            margin-right: 10px;
          }
          .toggleWrapper input.mobileToggle + label:before {
            content: "";
            position: absolute;
            display: block;
            -moz-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
            -o-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
            -webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
            transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
            height: 30px;
            width: 50px;
            top: 0;
            left: -1px;
            border-radius: 30px;
          }
          .toggleWrapper input.mobileToggle + label:after {
            content: "";
            position: absolute;
            display: block;
            box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);
            -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
            -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
            -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
            transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
            background: whitesmoke;
            height: 28px;
            width: 28px;
            top: 0.5px;
            left: 0px;
            border-radius: 60px;
          }
          .toggleWrapper input.mobileToggle:checked + label:before {
            -moz-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
            -o-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
            -webkit-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
            transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
          }
          .toggleWrapper input.mobileToggle:checked + label:after {
            left: 24px;
          }

/* checkbox end */

 .testimonial-slider-buttons {
    color:rgba(var(--color-foreground), 1) !important;
    background: rgba(var(--color-button),.1) !important;
    border-radius: 30px;
    width: 30px !important;
    height: 30px !important;
  }

/* tooltip size chart */
tool-tip{
  display:none;
}

tool-tip[data-tool-tip-open=true]{
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:10001;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%
}

tool-tip[data-tool-tip-open=true]:before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#e0e0e0;
    background-color:{{ settings.color_modal_overlays | default: "#000" }};
    background-color:var(--colorModalBg);
    animation:overlay-on 0.3s forwards;
    cursor:pointer;
  }

.tool-tip__inner{
  animation:modal-close 0.3s forwards;
  opacity:0
}

tool-tip[data-tool-tip-open=true] .tool-tip__inner{
    animation:modal-open 0.3s forwards;
    display:block;
    position:fixed;
    background-color:#fff;
    box-shadow:0 10px 20px rgba(0, 0, 0, 0.0902);
    padding:30px;
    max-width:720px;
    min-width:250px;
    min-height:250px
}

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

tool-tip[data-tool-tip-open=true] .tool-tip__inner{
      width:100%;
      max-width:93%
}
    }

.tool-tip__content{
  overflow:auto;
  max-height:80vh
}

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

.tool-tip__content{
    font-size:0.85em
}
  }

.tool-tip__close{
  position:absolute;
  top:0;
  right:0;
}

.tool-tip__close .icon{
  width:28px;
  height:28px;
}

.tool-tip-trigger{
  background:none;
  border:0;
  cursor:pointer;
}

.tool-tip-trigger .icon{
  width:28px;
  height:28px;
}

.tool-tip-trigger__title{
  display:inline-block;
}

.tool-tip-trigger__title:focus,.tool-tip-trigger__title:hover{
  text-decoration:underline;
  text-underline-offset:2px;
}

.tool-tip-trigger__content{
  display:none !important;
}

.size-chart__standalone{
  margin:25px 0;
  margin:var(--sizeChartMargin)
}

.size-chart__standalone svg{
    margin-left:5px;
    margin-left:var(--sizeChartIconMargin);
  }/* 
 * MODERN DESIGN SYSTEM
 * Ultra-moderne styling for Recoverm8.dk
 * Created: December 2025
 */

/* ============================================
   DISABLE ANIMATIONS IN SHOPIFY EDITOR
   ============================================ */

/* Stop all animations when in Shopify theme editor to prevent shaking */
.shopify-section--editor * {
  animation: none !important;
  transition: none !important;
}

/* Disable animations in design mode */
[data-shopify-editor-section] *,
.shopify-section--editor *,
body[class*="template-"] .shopify-section--editor * {
  animation: none !important;
  animation-duration: 0s !important;
  animation-iteration-count: 0 !important;
  transition: none !important;
}

/* Specifically disable floating orbs and pseudo-elements in editor */
.shopify-section--editor *::before,
.shopify-section--editor *::after,
[data-shopify-editor-section] *::before,
[data-shopify-editor-section] *::after {
  animation: none !important;
  animation-duration: 0s !important;
  animation-iteration-count: 0 !important;
  transition: none !important;
}

/* Disable all keyframe animations in editor */
@media (min-width: 0) {
  .shopify-section--editor .float-animation,
  .shopify-section--editor .pulse-animation,
  .shopify-section--editor .fade-in-up,
  .shopify-section--editor .scale-in,
  .shopify-section--editor .slide-in-left,
  .shopify-section--editor .slide-in-right,
  .shopify-section--editor .rotate-in,
  .shopify-section--editor .shimmer {
    animation: none !important;
  }
}

/* ============================================
   FIX HORIZONTAL SCROLLBAR - MEN UNDTAG MENUER!
   ============================================ */

/* IKKE overflow-x: hidden på body/html - det klipper mobile menu! */

/* Kun overflow-x: hidden på sections der IKKE er header eller menu */
.shopify-section:not([id*="header"]):not(.section-header):not(.announcement-bar-section) {
  overflow-x: hidden;
  position: relative;
}

/* KRITISK: Header og menu SKAL have overflow: visible */
.section-header,
.header-wrapper,
.header,
sticky-header,
.menu-drawer,
.menu-drawer-container,
header-drawer,
.header__inline-menu,
nav,
details {
  overflow: visible !important;
}

/* ============================================
   FIX ANNOUNCEMENT BAR SCROLLBAR
   ============================================ */

/* Force hide any scrollbars in announcement bar */
.announcement-bar,
.announcement-bar-section,
.utility-bar,
.announcement-bar-slider,
.slider--everywhere,
.announcement-bar__announcement,
.announcement-bar__message,
slideshow-component,
.announcement-bar *,
.utility-bar *,
.utility-bar__grid {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Specific width constraints */
.announcement-bar,
.utility-bar,
.announcement-bar-slider {
  max-width: 100vw !important;
  width: 100% !important;
}

.utility-bar__grid {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* Hide scrollbar completely */
.announcement-bar::-webkit-scrollbar,
.utility-bar::-webkit-scrollbar,
.announcement-bar *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.announcement-bar,
.utility-bar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* ============================================
   MENU - SIMPEL KLIK SYSTEM
   ============================================ */

/* Z-index hierarki for menu system */
/* FIX: Shopify section group wrapper SKAL have høj z-index */
.shopify-section-group-header-group,
.section-header.shopify-section-group-header-group,
.section-header {
  z-index: 100000 !important;
  overflow: visible !important;
  position: relative !important;
}

.header-wrapper,
.header {
  position: relative !important;
  z-index: 100000 !important;
}

/* Submenu base styling - ALTID synlig med høj z-index */
.header__submenu,
.header__submenu.global-settings-popup,
.global-settings-popup,
.list-menu--disclosure {
  z-index: 100001 !important;
  position: absolute !important;
  background: white !important;
  color: #000 !important;
  animation: none !important;
  transition: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  padding: 0.5rem 0 !important;
  min-width: 20rem !important;
}

/* Når details er ÅBEN (clicked), vis submenu */
.header__inline-menu details[open] > .header__submenu,
.header__menu details[open] > .header__submenu,
details[open] > .header__submenu,
details[open] .header__submenu {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: translateY(0) !important;
  z-index: 100001 !important;
  position: absolute !important;
  pointer-events: auto !important;
}

/* Sikr submenu items er synlige og klikbare */
.header__submenu a,
.header__submenu .list-menu__item {
  color: #000 !important;
  display: block !important;
  padding: 0.75rem 1.5rem !important;
  transition: background 0.2s ease !important;
}

.header__submenu a:hover,
.header__submenu .list-menu__item:hover {
  background: #f5f5f5 !important;
}

/* ============================================
   GLASSMORPHISM SYSTEM
   ============================================ */

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
  transform: translateY(-8px);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   MODERN GRADIENT SYSTEM
   ============================================ */

.gradient-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-sunset {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-ocean {
  background: linear-gradient(135deg, #2af598 0%, #009efd 100%);
}

.gradient-fire {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.gradient-brand {
  background: linear-gradient(135deg, #e76a05 0%, #ff8534 100%);
}

.gradient-animated {
  background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 400% 400%;
  animation: gradient-flow 8s ease infinite;
}

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Text gradients */
.text-gradient-brand {
  background: linear-gradient(135deg, #e76a05 0%, #ff8534 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-rainbow {
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-flow 4s ease infinite;
}

/* ============================================
   MODERN BUTTON SYSTEM
   ============================================ */

.btn-modern {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  font-weight: 700;
  border-radius: 50px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  cursor: pointer;
  border: none;
  text-decoration: none;
  max-width: 100%;
  word-wrap: break-word;
}

.btn-primary-modern {
  background: linear-gradient(135deg, #e76a05 0%, #ff8534 100%);
  color: white;
  box-shadow: 0 10px 30px rgba(231, 106, 5, 0.4);
}

.btn-primary-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.btn-primary-modern:hover::before {
  left: 100%;
}

.btn-primary-modern:hover {
  transform: none;
  box-shadow: 0 20px 50px rgba(231, 106, 5, 0.6);
}

.btn-secondary-modern {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #333;
}

.btn-secondary-modern:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: none;
}

/* ============================================
   ADVANCED ANIMATIONS
   ============================================ */

/* Floating animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.pulse-animation {
  animation: pulse 2s ease-in-out infinite;
}

/* Fade in up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Scale in */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Slide in from left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Slide in from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Rotate in */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-15deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

.rotate-in {
  animation: rotateIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* ============================================
   MODERN CARD EFFECTS
   ============================================ */

.card-modern {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  will-change: transform;
  backface-visibility: hidden;
}

.card-modern:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .card-modern,
  .btn-modern,
  .product-card-ultra,
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Card with gradient border */
.card-gradient-border {
  position: relative;
  background: white;
  border-radius: 24px;
  padding: 2px;
  overflow: hidden;
}

.card-gradient-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
  background-size: 200% 200%;
  animation: gradient-flow 4s ease infinite;
  border-radius: 24px;
  z-index: -1;
}

.card-gradient-border-inner {
  background: white;
  border-radius: 22px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

/* ============================================
   3D TRANSFORM EFFECTS
   ============================================ */

.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-3d:hover {
  transform: rotateY(5deg) rotateX(-5deg);
}

/* Magnetic effect */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   GLOW EFFECTS
   ============================================ */

.glow-brand {
  box-shadow: 0 0 20px rgba(231, 106, 5, 0.5), 
              0 0 40px rgba(231, 106, 5, 0.3),
              0 0 60px rgba(231, 106, 5, 0.1);
}

.glow-primary {
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.5),
              0 0 40px rgba(102, 126, 234, 0.3);
}

.glow-pulse {
  animation: glow-pulse-anim 2s ease-in-out infinite;
}

@keyframes glow-pulse-anim {
  0%, 100% {
    box-shadow: 0 0 20px rgba(231, 106, 5, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(231, 106, 5, 0.8),
                0 0 60px rgba(231, 106, 5, 0.4);
  }
}

/* ============================================
   MODERN SECTION BACKGROUNDS
   ============================================ */

.section-modern {
  position: relative;
  overflow: hidden;
}

.section-modern::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(231, 106, 5, 0.05) 0%, transparent 70%);
  animation: rotate-slow 20s linear infinite;
  pointer-events: none;
}

@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Mesh gradient background */
.mesh-gradient {
  background: 
    radial-gradient(at 40% 20%, rgba(102, 126, 234, 0.1) 0, transparent 50%),
    radial-gradient(at 80% 0%, rgba(118, 75, 162, 0.1) 0, transparent 50%),
    radial-gradient(at 0% 50%, rgba(240, 147, 251, 0.1) 0, transparent 50%),
    radial-gradient(at 80% 100%, rgba(231, 106, 5, 0.1) 0, transparent 50%),
    radial-gradient(at 0% 100%, rgba(102, 126, 234, 0.1) 0, transparent 50%);
  background-color: #ffffff;
}

/* ============================================
   INTERACTIVE ELEMENTS
   ============================================ */

/* Ripple effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
  width: 300px;
  height: 300px;
}

/* Tilt effect on hover */
.tilt-hover {
  transition: transform 0.3s ease;
}

.tilt-hover:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
}

/* ============================================
   MODERN TYPOGRAPHY
   ============================================ */

.heading-ultra-modern {
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Prevent text overflow */
h1, h2, h3, h4, h5, h6, p, span, a {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.heading-with-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

.heading-with-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #e76a05, #ff8534, #e76a05);
  background-size: 200% 100%;
  border-radius: 2px;
  animation: underline-flow 3s ease infinite;
}

@keyframes underline-flow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ============================================
   ENHANCED PRODUCT CARDS
   ============================================ */

.product-card-ultra {
  position: relative;
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card-ultra::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(231, 106, 5, 0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}

.product-card-ultra:hover::before {
  opacity: 1;
}

.product-card-ultra:hover {
  transform: translateY(-16px) scale(1.03);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
}

.product-card-ultra .product-image {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card-ultra:hover .product-image {
  transform: scale(1.15);
}

/* ============================================
   LOADING & SKELETON EFFECTS
   ============================================ */

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Loading spinner modern */
.spinner-modern {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(231, 106, 5, 0.1);
  border-top-color: #e76a05;
  border-radius: 50%;
  animation: spin-modern 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes spin-modern {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   MICRO INTERACTIONS
   ============================================ */

/* Bounce on click */
.bounce-click {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.bounce-click:active {
  transform: scale(0.95);
}

/* Shake error */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-12px); }
  75% { transform: translateX(12px); }
}

.shake {
  animation: shake 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Success checkmark animation */
@keyframes success-check {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.success-check {
  animation: success-check 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   BADGE & TAG SYSTEM
   ============================================ */

.badge-modern {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.badge-sale {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
  animation: pulse 2s ease-in-out infinite;
}

.badge-new {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.badge-premium {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1a1a1a;
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

/* ============================================
   IMAGE EFFECTS
   ============================================ */

.image-hover-zoom {
  overflow: hidden;
  border-radius: 16px;
  max-width: 100%;
}

.image-hover-zoom img {
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 100%;
  height: auto;
  display: block;
}

.image-hover-zoom:hover img {
  transform: scale(1.15);
}

/* Ensure all images don't cause overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Image with gradient overlay */
.image-gradient-overlay {
  position: relative;
}

.image-gradient-overlay::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.image-gradient-overlay:hover::after {
  opacity: 1;
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for multiple elements */
.scroll-reveal:nth-child(1) { transition-delay: 0s; }
.scroll-reveal:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal:nth-child(3) { transition-delay: 0.2s; }
.scroll-reveal:nth-child(4) { transition-delay: 0.3s; }
.scroll-reveal:nth-child(5) { transition-delay: 0.4s; }
.scroll-reveal:nth-child(6) { transition-delay: 0.5s; }

/* ============================================
   HOVER GLOW EFFECTS
   ============================================ */

.hover-glow-brand {
  transition: all 0.3s ease;
}

.hover-glow-brand:hover {
  filter: drop-shadow(0 0 20px rgba(231, 106, 5, 0.6));
}

/* ============================================
   MODERN FORM INPUTS
   ============================================ */

.input-modern {
  padding: 14px 20px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
}

.input-modern:focus {
  border-color: #e76a05;
  box-shadow: 0 0 0 4px rgba(231, 106, 5, 0.1);
  transform: translateY(-2px);
  outline: none;
}

.input-modern::placeholder {
  color: #999;
  font-weight: 400;
}

/* ============================================
   CONFETTI & CELEBRATION EFFECTS
   ============================================ */

@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  background: #e76a05;
  z-index: 9999;
  pointer-events: none;
  animation: confetti-fall 3s linear;
}

/* ============================================
   NUMBER COUNTER ANIMATION
   ============================================ */

.counter {
  font-weight: 700;
  font-size: 48px;
  background: linear-gradient(135deg, #e76a05 0%, #ff8534 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-slow {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.rounded-modern {
  border-radius: 24px;
}

.rounded-pill {
  border-radius: 9999px;
}

.shadow-modern {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.shadow-intense {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 749px) {
  .heading-ultra-modern {
    font-size: clamp(24px, 8vw, 48px);
  }
  
  .card-modern:hover {
    transform: translateY(-8px) scale(1.01);
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ============================================
   MODERNE SØGEFUNKTION (SEARCH MODAL)
   ============================================ */

/* TOTAL SKJULNING AF ALLE POPUPS OG BANNERS NÅR SØGEMODAL ER ÅBEN */

/* Force lav z-index på header når search er åben */
.header__search details[open] ~ .section-header,
body:has(.header__search details[open]) .section-header,
body:has(.header__search details[open]) .header-wrapper,
body:has(.header__search details[open]) sticky-header {
  z-index: 1 !important;
}

/* Skjul alle promo popups ALTID */
promo-popup,
promo-popup-p,
.promo-popup,
.promo-popup-p,
promo-popup.is-active,
promo-popup-p.is-active,
.promo-popup.is-active,
.promo-popup-p.is-active,
promo-popup[data-section-id],
promo-popup-p[data-section-id] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -99999 !important;
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* Skjul alle popup wrappers og content */
.popup-wrapper,
.popup-p-wrapper,
.popup,
.popup-p,
.promo-popup .popup-wrapper,
.promo-popup-p .popup-p-wrapper {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Skjul alle overlays */
.popup-overlay,
.popup-p-overlay,
.promo-popup .popup-overlay,
.promo-popup-p .popup-p-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -99999 !important;
}

/* Ekstra regler når details er open */
details[open] promo-popup,
details[open] promo-popup-p,
details[open] > .search-modal ~ promo-popup,
details[open] > .search-modal ~ promo-popup-p,
.header__search details[open] ~ promo-popup,
.header__search details[open] ~ promo-popup-p {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Når body har details open */
body:has(details[open] > .search-modal) promo-popup,
body:has(details[open] > .search-modal) promo-popup-p,
body:has(details[open]) promo-popup,
body:has(details[open]) promo-popup-p {
  display: none !important;
  visibility: hidden !important;
}

/* SKJUL ALT CONTENT NÅR SEARCH MODAL ER ÅBEN */
.header__search details[open] ~ * .shopify-section,
body:has(.header__search details[open]) .shopify-section:not(.section-header),
body:has(.header__search details[open]) main,
body:has(.header__search details[open]) footer,
body:has(.header__search details[open]) .announcement-bar-section {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* OVERRIDE GRADIENT CLASS PÅ SEARCH MODAL */
.search-modal.gradient,
.search-modal.modal__content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Modal overlay - Semi-transparent så man kan se siden */
.modal-overlay,
.search-modal .modal-overlay,
details[open] .modal-overlay {
  display: block !important;
  background: rgba(0, 0, 0, 0.4) !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  backdrop-filter: blur(4px) !important;
}

details[open] .modal-overlay::after {
  display: none !important;
  background: none !important;
}

/* Search modal content container - OVERRIDE base.css */
.search-modal,
details[open] > .search-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  z-index: 9999999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 1 !important;
  min-height: 100vh !important;
}

.search-modal__content {
  background: white !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5) !important;
  padding: 50px !important;
  max-width: 900px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 99999999999 !important;
  animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: auto !important;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Search form og field - KLIKBARE og synlige */
.search-modal__form,
.search-modal__form .field,
.search-modal form,
predictive-search,
search-form {
  position: relative !important;
  margin-bottom: 0 !important;
  z-index: 99999999999 !important;
  pointer-events: auto !important;
  width: 100% !important;
}

/* Alle interactive elementer skal være klikbare */
.search-modal input,
.search-modal button,
.search-modal a,
.search-modal .field__button {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 99999999999 !important;
}

.search-modal__form .search__input.field__input {
  width: 100% !important;
  padding: 20px 140px 20px 60px !important;
  font-size: 18px !important;
  border: 3px solid #e0e0e0 !important;
  border-radius: 50px !important;
  background: white !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  cursor: text !important;
  z-index: 99999999999 !important;
  position: relative !important;
  color: #000 !important;
  font-weight: 500 !important;
}

.search-modal__form .search__input.field__input::placeholder {
  color: #999 !important;
  font-weight: 400 !important;
}

.search-modal__form .search__input.field__input:focus {
  outline: none !important;
  border-color: #e76a05 !important;
  background: white !important;
  box-shadow: 0 0 0 4px rgba(231, 106, 5, 0.1) !important;
  z-index: 99999999999 !important;
  color: #000 !important;
}

/* Search icon til venstre */
.search-modal__form .search__button {
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  pointer-events: none !important;
  right: auto !important;
}

.search-modal__form .search__button .icon {
  width: 24px !important;
  height: 24px !important;
  color: #666 !important;
}

.search-modal__form .search__input.field__input:focus ~ .search__button .icon {
  color: #e76a05 !important;
}

/* Reset button */
.search-modal__form .reset__button {
  position: absolute !important;
  right: 70px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 99999999999 !important;
}

.search-modal__form .reset__button:hover {
  background: #f0f0f0 !important;
  transform: translateY(-50%) scale(1.1) !important;
}

.search-modal__form .reset__button::after {
  display: none !important;
}

.search-modal__form .reset__button .icon {
  width: 18px !important;
  height: 18px !important;
  color: #999 !important;
  pointer-events: none !important;
}

/* Close button - flot og moderne */
.search-modal__close-button {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  width: 44px !important;
  height: 44px !important;
  background: #f0f0f0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  border: none !important;
  margin: 0 !important;
  pointer-events: auto !important;
  z-index: 99999999999 !important;
}

.search-modal__close-button:hover {
  background: #e76a05 !important;
  transform: rotate(90deg) scale(1.1) !important;
}

.search-modal__close-button .icon {
  width: 20px !important;
  height: 20px !important;
  color: #666 !important;
  transition: color 0.3s ease !important;
  pointer-events: none !important;
}

.search-modal__close-button:hover .icon {
  color: white !important;
}

/* Label styling */
.search-modal__form .field__label {
  display: none !important;
}

/* Predictive search results - FLOTTE og fuld højde */
.search-modal .predictive-search,
.search-modal predictive-search {
  margin-top: 30px !important;
  border: none !important;
  border-radius: 20px !important;
  background: #f8f9fa !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  max-height: 500px !important;
  min-height: 200px !important;
  overflow-y: auto !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 99999999999 !important;
  pointer-events: auto !important;
  padding: 10px !important;
}

/* Predictive search items */
.search-modal .predictive-search__item,
.search-modal .predictive-search__list-item {
  padding: 18px 20px !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
  margin: 6px 0 !important;
  background: white !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  pointer-events: auto !important;
}

.search-modal .predictive-search__item:hover,
.search-modal .predictive-search__list-item:hover,
.search-modal .predictive-search__list-item:hover > *,
.search-modal .predictive-search__list-item[aria-selected='true'] > * {
  background: white !important;
  box-shadow: 0 4px 20px rgba(231, 106, 5, 0.2) !important;
  transform: translateX(6px) !important;
  border-color: #e76a05 !important;
}

/* Predictive search headings - ORANGE */
.search-modal .predictive-search__heading {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #e76a05 !important;
  margin: 24px 20px 12px 20px !important;
  border: none !important;
  padding: 0 !important;
}

/* Predictive search image - flot med border */
.search-modal .predictive-search__image {
  border-radius: 12px !important;
  border: 2px solid #e0e0e0 !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
}

.search-modal .predictive-search__item:hover .predictive-search__image {
  border-color: #e76a05 !important;
  transform: scale(1.1) rotate(2deg) !important;
}

/* Predictive search item content */
.search-modal .predictive-search__item-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Predictive search item titles - SORT TEKST */
.search-modal .predictive-search__item-heading,
.search-modal .predictive-search__item h3,
.search-modal .predictive-search__item h4 {
  font-weight: 600 !important;
  color: #000 !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

.search-modal .predictive-search__item:hover .predictive-search__item-heading {
  color: #e76a05 !important;
}

/* Predictive search vendor/category - SORT */
.search-modal .predictive-search__item-vendor {
  font-size: 13px !important;
  color: #666 !important;
  font-weight: 400 !important;
}

/* Predictive search price - SORT med orange på hover */
.search-modal .predictive-search .price,
.search-modal .predictive-search__item .price {
  font-weight: 700 !important;
  color: #000 !important;
  font-size: 16px !important;
}

.search-modal .predictive-search__item:hover .price {
  color: #e76a05 !important;
}

/* Links i search results - SORT */
.search-modal .predictive-search a,
.search-modal .predictive-search__item a {
  color: #000 !important;
  text-decoration: none !important;
}

/* Mobile responsive */
@media (max-width: 749px) {
  .search-modal__content {
    padding: 30px 20px !important;
    border-radius: 20px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  
  .search-modal__form .search__input.field__input {
    padding: 18px 120px 18px 50px !important;
    font-size: 16px !important;
  }
  
  .search-modal__close-button {
    top: 15px !important;
    right: 15px !important;
    width: 40px !important;
    height: 40px !important;
  }
  
  .search-modal .predictive-search {
    max-height: 300px !important;
  }
}

/* Smooth scrollbar for results */
.search-modal .predictive-search::-webkit-scrollbar {
  width: 8px !important;
}

.search-modal .predictive-search::-webkit-scrollbar-track {
  background: transparent !important;
}

.search-modal .predictive-search::-webkit-scrollbar-thumb {
  background: #d0d0d0 !important;
  border-radius: 10px !important;
}

.search-modal .predictive-search::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0 !important;
}



/* 
 * DISABLE BUTTON ANIMATIONS
 * Fjerner alle hover bevægelser på knapper
 */

/* Disable all button transform animations */
button:hover,
.button:hover,
.btn-modern:hover,
.btn-primary-modern:hover,
.btn-secondary-modern:hover,
[type="submit"]:hover,
.shopify-payment-button__button:hover,
.product-form__submit:hover {
  transform: none !important;
}

/* Keep hover effects but no movement */
button,
.button,
.btn-modern {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
}

/* Specifically for product pages */
.product-form__submit:hover,
.product-form button:hover {
  transform: none !important;
}

/* 
 * DISABLE PRODUCT CARD HOVER EFFECTS
 * Fjerner hover effekter på produktkort i shop/collection sider
 */

/* Disable 3D lift animations */
.animate--hover-3d-lift .card-wrapper:hover .card--card,
.animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
.animate--hover-3d-lift .product-grid .grid__item:hover,
.animate--hover-3d-lift .collection-list .grid__item:hover {
  transform: none !important;
  box-shadow: none !important;
  z-index: auto !important;
  transition: none !important;
}

/* Disable vertical lift animations */
.animate--hover-vertical-lift .card-wrapper:hover .card--card,
.animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* Disable shape hover effects */
.animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* Disable card wrapper hover effects */
.card-wrapper:hover .card--card:after,
.card-wrapper:hover .card--standard .card__inner:after,
.card-wrapper:hover .card--card:before,
.card-wrapper:hover .card--standard .card__media:after {
  opacity: 0 !important;
  transform: none !important;
}

/* Disable product card ultra hover effects */
.product-card-ultra:hover,
.product-card-ultra:hover::before {
  transform: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  opacity: 0 !important;
}

.product-card-ultra:hover .product-image {
  transform: none !important;
}

/* Disable modern card hover effects */
.card-modern:hover {
  transform: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Keep image hover effects disabled (sekundært billede) but allow link to work */
.card .media.media--hover-effect > img:only-child,
.card-wrapper .media.media--hover-effect > img:only-child {
  transition: none !important;
}

.card:hover .media.media--hover-effect > img:first-child:only-child,
.card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
  opacity: 1 !important;
}

.card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
  opacity: 1 !important;
}

.card-wrapper:hover .media.media--hover-effect > img + img {
  opacity: 0 !important;
}

/* Disable shape animations on hover */
.product-card-wrapper:hover .shape--round,
.product-card-wrapper:hover .shape--blob {
  transform: none !important;
}

/* Remove scale effects from collection cards */
.collection-list .grid__item:hover .card,
.product-grid .grid__item:hover .card {
  transform: none !important;
}

/* Keep cursor pointer but remove transform */
.card-wrapper {
  cursor: pointer;
}

.card-wrapper:hover {
  transform: none !important;
}

/* Ensure smooth transitions are disabled */
.card-wrapper .card,
.card-wrapper .card__inner,
.card-wrapper .media {
  transition: none !important;
}

/* Disable any remaining hover transforms */
.product-card-wrapper:hover,
.card-wrapper:hover,
.grid__item:hover {
  transform: none !important;
}

/* Keep basic interactivity but no movement */
.card:hover,
.card__inner:hover {
  transform: none !important;
}

/* Disable glassmorphism card hover */
.glass-card:hover {
  transform: none !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Disable 3D card hover */
.card-3d:hover {
  transform: none !important;
}