/** Shopify CDN: Minification failed

Line 5041:0 Unexpected "<"
Line 5075:0 Unexpected "<"

**/
/*
Theme Name: Kalles 
Author: The4Studio
Author URI: https://the4.co/
Version: 1.0
/* -------------------------------------------
[Table of contents]
1. SWATCH COLORS CSS
2. TOOLTIPS
3. ANIMATE CSS
4. MAGNIFIC POPUP CSS
5. T4s Modal CSS
6. PHOTOSWIPE
7. SCROLLBAR CSS
8. LOADING CSS
9. PREVENT SCROLLING CSS
10. COLORS CSS
11. SWATCH LIMIT
12. CLOSE OVERLAY
12A. LOCK SCROLL
12B. HEADER
15. DRIFT ZOOM
16. MEGA MENU
17. CAROUSEL NAV
18. SHOPIFY MODEL
19. NOTICES
20. OTHER CSS
21. PRODUCT ITEM HOVER

------------------------------------------- */

/* ==========================================================================
   1. SWATCH COLORS CSS
   ========================================================================== */
.t4sfrm-remove-vsoldout .t4s-soldout,
.t4sp-remove-unavail-true .t4s-unavailable {
    display: none !important;
}
.is-t4sOptioNname .t4s-soldout {
    border: dashed 0.5px rgb(119 119 119 / 20%);
}
.is-t4sOptioNname .t4s-soldout>span {
    text-decoration: line-through;
    opacity: .5;
}
.t4s-style-color .t4s-swatch.is-t4scolor .t4s-swatch-item {
    position: relative;
    overflow: hidden;
}
.t4s-style-color .is-t4scolor .t4s-soldout {
    border: dashed 0.5px rgb(119 119 119 / 20%);
}
.t4s-style-color .is-t4scolor .t4s-soldout:before, .t4s-style-color .is-t4scolor .t4s-soldout:after {
    content: " ";
    position: absolute;
    left: auto;
    right: auto;
    top: 50%;
    width: 100%;
    height: .5px;
    display: inline-block;
    background-color: #222;
     z-index: 2;
    transform: rotate(45deg);
    transition: background-color .2s ease-in-out,transform .2s ease-in-out,width .2s ease-in-out; 
}
.t4s-style-color .is-t4scolor .t4s-soldout:after {
    transform: rotate(-45deg);
}
/* Swatch end */

/* ==========================================================================
   2. TOOLTIPS
   ========================================================================== */
.t4s-tooltip {
  position: absolute;
  /* z-index: 1070; */
  z-index: 2022;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity, visibility;    
}
.t4s-modal-opened .t4s-tooltip {
  z-index: 99999;
}
.t4s-tooltip.is--show {
  visibility: visible;
  opacity: 1;
  animation: t4s-ani-fadeIn .4s ease;
}
.t4s-tooltip .t4s-tt-arrow {
  position: absolute;
  background-color: var(--t4s-tooltip-background);
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}

.t4s-tooltip:not(.t4scss-tooltip) {
    pointer-events: none
}

.t4s-tooltip-inner {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    padding: 8px 10px;
    max-width: 250px;
    background-color: var(--t4s-tooltip-background);
    color: var(--t4s-tooltip-color);
    word-break: break-word;
    border-radius: 0
}

/* .t4s-tooltip.bs-tooltip-top {
    margin-top: -3px;
    padding: 5px 0
} */

/* .t4s-tooltip.bs-tooltip-top .t4s-tt-arrow {
    bottom: 0;
    left: 50%;
    border-width: 5px 5px 0;
    border-top-color: rgba(0,0,0,.9)
} */

/* .t4s-tooltip.bs-tooltip-bottom {
    margin-bottom: -3px;
    padding: 5px 0
} */

/* .t4s-tooltip.bs-tooltip-bottom .t4s-tt-arrow {
    top: 0;
    left: 50%;
    border-width: 0 5px 5px;
    border-bottom-color: rgba(0,0,0,.9)
} */

/* .t4s-tooltip.bs-tooltip-left {
    margin-left: -3px
} */

/* .t4s-tooltip.bs-tooltip-left .t4s-tt-arrow {
    top: 50%;
    right: 0;
    border-width: 5px 0 5px 5px;
    border-left-color: rgba(0,0,0,.9)
} */

/* .t4s-tooltip.bs-tooltip-right {
    margin-left: 3px
} */

/* .t4s-tooltip.bs-tooltip-right .t4s-tt-arrow {
    top: 50%;
    left: 0;
    border-width: 5px 5px 5px 0;
    border-right-color: rgba(0,0,0,.9)
} */
/* Tooltip end */

/* ==========================================================================
   3. ANIMATE CSS
   ========================================================================== */
    @keyframes t4s-ani-rotate {
        100% {
            transform: rotate(360deg)
        }
    }

    @keyframes t4s-ani-fadeIn {
        from {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    @keyframes t4s-ani-fadeOut {
        from {
            opacity: 1
        }

        to {
            opacity: 0
        }
    }

    @keyframes t4s-ani-fadeInBottomShort {
        from {
            transform: translate3d(0, 20px, 0)
        }

        to {
            transform: none
        }
    }

    @keyframes t4s-ani-ShakePrev {
        25% {
            transform: translate3d(0px, 0, 0)
        }

        50% {
            transform: translate3d(3px, 0, 0)
        }

        75% {
            transform: translate3d(-3px, 0, 0)
        }
    }

    @keyframes t4s-ani-ShakeNext {
        25% {
            transform: translate3d(0px, 0, 0)
        }

        50% {
            transform: translate3d(-3px, 0, 0)
        }

        75% {
            transform: translate3d(3px, 0, 0)
        }
    }

    @keyframes t4s-ani-FadeInLoader {
        from {
            opacity: 0
        }

        to {
            opacity: .8
        }
    }

    @keyframes t4s-ani-SlideFromTop {
        from {
            transform: translateY(-150px)
        }

        to {
            transform: none
        }
    }

    @keyframes t4s-ani-SlideFromBottom {
        from {
            transform: translateY(150px)
        }

        to {
            transform: none
        }
    }

    @keyframes t4s-ani-SlideFromLeft {
        from {
            transform: translateX(-150px)
        }

        to {
            transform: none
        }
    }

    @keyframes t4s-ani-SlideFromRight {
        from {
            transform: translateX(150px)
        }

        to {
            transform: none
        }
    }

    @keyframes t4s-ani-RightFlipY {
        from {
            transform: translateX(100px) rotate3d(0, 1, 0, 90deg) scale(0.6)
        }

        to {
            transform: perspective(1000px) translateY(0px) rotate3d(0, 1, 0, 0deg) scale(1)
        }
    }

    @keyframes t4s-ani-LeftFlipY {
        from {
            transform: translateX(-100px) rotate3d(0, 1, 0, -90deg) scale(0.6)
        }

        to {
            transform: perspective(1000px) translateY(0px) rotate3d(0, 1, 0, 0deg) scale(1)
        }
    }

    @keyframes t4s-ani-TopFlipX {
        from {
            transform: translateY(-100px) rotate3d(1, 0, 0, 90deg) scale(0.6)
        }

        to {
            transform: perspective(1000px) translateY(0) rotate3d(1, 0, 0, 0deg) scale(1)
        }
    }

    @keyframes t4s-ani-BottomFlipX {
        from {
            transform: translateY(100px) rotate3d(1, 0, 0, 90deg) scale(0.6)
        }

        to {
            transform: perspective(1000px) translateY(0) rotate3d(1, 0, 0, 0deg) scale(1)
        }
    }

    @keyframes t4s-ani-ZoomIn {
        from {
            transform: scale(0.7)
        }

        to {
            transform: none
        }
    }

    @keyframes t4s-ani-RotateZ {
        from {
            transform: matrix3d(0.70592, 0.02465, 0.37557, -0.00062, -0.06052, 0.79532, 0.06156, -0.0001, -0.46435, -0.10342, 0.87958, -0.00146, -21.42566, 4.13698, 4.81749, 0.99197085)
        }

        to {
            transform: none
        }
    }
   @-webkit-keyframes t4s-icon-pop {
     0% {
       -webkit-transform: scale(1);
               transform: scale(1);
     }
     40% {
       top: -3px; 
       -webkit-transform: scale(1.15) rotate(-5deg); 
               transform: scale(1.15) rotate(-5deg);
     }
     100% {
       top: 0; 
       -webkit-transform: scale(1) rotate(0); 
               transform: scale(1) rotate(0);
     }
   }

   @keyframes t4s-icon-pop {
     0% {
       -webkit-transform: scale(1);
               transform: scale(1);
     }
     40% {
       top: -3px; 
       -webkit-transform: scale(1.15) rotate(-5deg); 
               transform: scale(1.15) rotate(-5deg);
     }
     100% {
       top: 0; 
       -webkit-transform: scale(1) rotate(0); 
               transform: scale(1) rotate(0);
     }
   }
   .t4s-site-nav__icons.is--hover2 .t4s-site-nav__icon svg.t4s-icon {
      transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
   }
   .t4s-site-nav__icons.is--hover2 .t4s-site-nav__icon:hover svg.t4s-icon {
      transform: scale(1.15);
   }
   .t4s-site-nav__icons.is--hover3 .t4s-site-nav__icon:hover svg.t4s-icon {
/*        -webkit-animation: t4s-icon-pop 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
       animation: t4s-icon-pop 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); */
       -webkit-animation: t4s-icon-pop 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
       animation: t4s-icon-pop 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
       -webkit-animation-fill-mode: both;
       animation-fill-mode: both;
   }

/* ==========================================================================
   4. MAGNIFIC POPUP CSS
   ========================================================================== */
    .mfp-bg,.t4sp-theme .mfp-bg {
        position: fixed;
        z-index: 1102 !important;
        overflow: hidden;
        background-color: rgba(0,0,0,0.7)
    }

    .global-color-scheme-light .mfp-bg {
        background-color: rgba(0,0,0,0.8)
    }

    .mfp-wrap,.t4sp-theme .mfp-wrap {
        position: fixed;
        z-index: 1103 !important;
        outline: none !important;
        -webkit-backface-visibility: hidden
    }

    .mfp-container {
        position: absolute;
        padding: 0 8px;
        text-align: center;
        overflow: auto;
    }

    .mfp-container:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle
    }

    .mfp-content {
        position: relative;
        z-index: 1105;
        display: inline-block;
        margin: 0 auto;
        vertical-align: middle;
        text-align: left
    }

    .mfp-inline-holder .mfp-content {
        width: 100%;
        cursor: auto
    }

    .mfp-close,.mfp-arrow,.mfp-preloader,.mfp-counter {
        user-select: none
    }

    .mfp-preloader {
        position: absolute;
        top: 50%;
        right: 8px;
        left: 8px;
        z-index: 1104;
        margin-top: -.8em;
        width: auto;
        color: #CCC;
        text-align: center
    }

    .mfp-preloader a {
        color: #CCC
    }

    .mfp-preloader a:hover {
        color: #FFF
    }

    .mfp-s-ready .mfp-preloader,.mfp-s-error .mfp-content {
        display: none
    }

    .mfp-iframe-holder,.mfp-video-holder {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .mfp-iframe-holder .mfp-content,.mfp-video-holder .mfp-content {
        max-width: 900px;
        width: 100%;
        line-height: 0
    }

    .mfp-iframe-scaler,.mfp-video-scaler {
        overflow: hidden;
        padding-top: 56.25%;
        width: 100%;
        height: 0
    }

    .mfp-iframe-scaler iframe,.mfp-video-scaler video {
        position: absolute;
        display: block;
        background: #000
    }

    .t4s-mfp-popup {
        margin: 25px auto;
        padding: 30px;
        width: 100%;
        background-color: var(--t4s-light-color)
    }

    [class*="color-scheme-light"] .t4s-mfp-popup {
        background-color: #101010
    }

    .mfp-move-horizontal .mfp-with-anim {
        opacity: 0;
        transition: transform .3s ease, opacity .3s ease;
        transform: translateX(-100px)
    }

    .mfp-move-horizontal .mfp-with-anim .summary-inner {
        opacity: 0;
        transition: transform .3s ease, opacity .3s ease;
        transform: translateY(30px)
    }

    .mfp-move-horizontal.mfp-bg {
        opacity: 0;
        transition: opacity .25s ease, visibility 0s ease .25s
    }

    .mfp-move-horizontal.mfp-ready .mfp-with-anim,.mfp-move-horizontal.mfp-ready .mfp-with-anim .summary-inner {
        opacity: 1;
        transform: none
    }

    .mfp-move-horizontal.mfp-ready.mfp-bg {
        opacity: 1;
        transition: opacity .25s ease, visibility 0s ease
    }

    .mfp-move-horizontal.mfp-removing .mfp-with-anim {
        opacity: 0;
        transform: translateX(100px)
    }

    .mfp-move-horizontal.mfp-removing.mfp-bg {
        opacity: 0
    }

    .mfp-move-horizontal.mfp-removing .mfp-close {
        display: none
    }

    .mfp-bg,.mfp-wrap,.mfp-container,.mfp-iframe-scaler iframe,.mfp-video-scaler video {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    button.mfp-close {
        position: fixed;
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1104;
        padding: 0;
        width: 50px;
        height: 50px;
        background: none;
        color: #FFF;
        text-align: center;
        font-weight: 400;
        font-size: 0;
        opacity: 1;
        cursor: pointer;
        transition: all .25s ease;
        touch-action: manipulation;
        opacity: 0;
        transition: all .25s ease, opacity 0s ease 0s
    }
    button.mfp-close .t4smfp-icon-close,.t4s-iconsvg-close {
        width: 16px;
        height: 16px;
        stroke-width: 1.5px;
        display: inline-block;
        pointer-events: none;
    }
    button.mfp-close:before,button.mfp-close:after {
        display: none !important;
    }

    button.mfp-close:hover {
        background-color: rgba(0,0,0,0.3);
        box-shadow: none;
        color: #FFF;
        opacity: 1
    }

    .mfp-ready button.mfp-close {
        opacity: 1;
        transition: all .25s ease, opacity .3s ease .35s
    }
    .t4s-loading-spin {
        position: absolute;
        top: 50%;
        margin-top: -9px;
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 1px solid rgba(255,255,255,0.3);
        border-left-color: #fff;
        border-radius: 50%;
        vertical-align: middle;
        animation: t4s-ani-rotate 450ms infinite linear;
    }
    .t4s-spin-centered {
        left: 50%;
        margin-left: -9px;
    }
    .t4s-spin-medium {
        border-width: 2px;
        width: 35px;
        height: 35px;
        margin-top: -17.5px;
    }
    .t4s-spin-centered.t4s-spin-medium {
        margin-left: -17.5px;
    }
    .mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content {
       width: 100%;
       cursor: auto
    }
    .mfp-ajax-cur {
      cursor: progress
    }
    .t4s-modal-opened.t4sp-theme .mfp-bg {
     z-index: 99992!important;
    }
    .t4s-modal-opened.t4sp-theme .mfp-wrap,
    .t4s-modal-opened.t4sp-theme .pswp__t4s {
     z-index: 99993!important;
    }
   .t4s-mfp-btn-close-inline { position: relative }
   .t4s-mfp-btn-close-inline button.mfp-close {
      position: absolute;
      width: auto;
      top: -15px;
      right: -15px;
      padding: 15px;
      height: auto;
      background-color: #000;
   }
   .t4s-mfp-btn-close-inline button.mfp-close:hover { opacity: .8; }

/* ==========================================================================
   5. T4s Modal CSS
   ========================================================================== */
    .t4s-modal {
        display: none;
        bottom: 0;
        left: 0;
        opacity: 1;
        overflow: hidden;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 9999;
        color: var(--text-color);
        align-items: center;
        justify-content: center;
    }
    .t4s-modal--is-active {
        display: flex!important;
        overflow: hidden;
    }
    .t4s-modal-opened,
    html.js.is-opening-mfp,
    html.js.t4s-modal-opened{
      overflow: hidden !important;
    }
    .t4s-modal-opened .t4s-modal:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #e0e0e0;
        animation: overlay-on .3s forwards;
        cursor: pointer;
    }
    .t4s-modal__inner {
      background-color: #fff;
      width:100%;
      max-width: 950px;
      margin: 15px;
      box-shadow: 0 12px 25px rgb(0 0 0 / 15%);
    }
    .t4s-modal__content {
        position: relative;
        max-width: 100%; 
        max-height: 80vh;
        overflow: auto;
       -webkit-overflow-scrolling: touch;
    }
    .t4s-modal-opened .t4s-modal .t4s-modal__inner {
      animation:t4s-modal-opening 0.3s forwards;
    }

    .t4s-modal-opened .t4s-modal:before{
      content:"";
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background-color:#e0e0e0;
      opacity: .6 !important;
      animation: none !important;
      /* animation:t4s-overlay-on 0.3s forwards; */
      cursor:pointer;
    }

    .t4s-modal-closing .t4s-modal .t4s-modal__inner {
      animation:t4s-modal-closing 0.15s forwards;
    }

    .t4s-modal-closing .t4s-modal:before {
      content:"";
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background-color:#e0e0e0;
      animation:t4s-overlay-off 0.15s forwards;
    }

    .t4s-modal--is-closing {
      display:flex !important;
      overflow:hidden;
    }
    .t4s-modal-close {
        border: 0;
        padding: 6px;
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(25%,-25%);
        z-index: 2;
        transition: transform .15s ease-out;
        width: 40px;
        height: 40px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .t4s-modal-close .t4s-modal-icon-close {
        width: 16px;
        height: 16px;
        stroke-width: 1.5px;
        display: inline-block;
        pointer-events: none;
    }
    .rtl_true .t4s-modal-close {
       left: 0;
       right: auto;
       transform: translate(-25%,-25%);
    }
    @keyframes t4s-modal-opening {
      0%{
        opacity:0;
        transform:scale(0.97);
      }
      to{
        opacity:1;
        transform:scale(1);
      }
    }

    @keyframes t4s-modal-closing{
      0%{
        opacity:1;
        transform:scale(1);
      }
      to{
        opacity:0;
        transform:scale(0.97);
      }
    }
    @keyframes t4s-overlay-on{
      0%{ opacity:0; }
      to{ opacity:0.6; }
    }

    @keyframes t4s-overlay-off{
      0%{ opacity:0.6; }
      to{ opacity:0; }
    }
    @media (min-width: 769px) {
        .t4s-modal__content {
            max-height: 90vh;    
        }
    }
    html.js {
        overflow: visible !important;
    }
    @media (min-width: 768px) {
      html.is-opening-mfp {
          overflow: visible !important;
      }
      html.is-opening-mfp body {
          overflow: hidden !important;
      }
      html.is-opening-mfp .mfp-wrap {
          overflow: hidden auto !important;
      }
    }

/* ==========================================================================
   6. PHOTOSWIPE
   ========================================================================== */
    /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
    /*
        Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
    */
    /* pswp = photoswipe */
    .pswp {
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      overflow: hidden;
      -ms-touch-action: none;
      touch-action: none;
      z-index: 1500;
      -webkit-text-size-adjust: 100%;
      /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
      -webkit-backface-visibility: hidden;
      outline: none; }
      .pswp * {
        -webkit-box-sizing: border-box;
                box-sizing: border-box; }
      .pswp img {
        max-width: none; }

    /* style is added when JS option showHideOpacity is set to true */
    .pswp--animate_opacity {
      /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
      opacity: 0.001;
      will-change: opacity;
      /* for open/close transition */
      -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
              transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

    .pswp--open {
      display: block; }

    .pswp--zoom-allowed .pswp__img {
      /* autoprefixer: off */
      cursor: -webkit-zoom-in;
      cursor: -moz-zoom-in;
      cursor: zoom-in; }

    .pswp--zoomed-in .pswp__img {
      /* autoprefixer: off */
      cursor: -webkit-grab;
      cursor: -moz-grab;
      cursor: grab; }

    .pswp--dragging .pswp__img {
      /* autoprefixer: off */
      cursor: -webkit-grabbing;
      cursor: -moz-grabbing;
      cursor: grabbing; }

    /*
        Background is added as a separate element.
        As animating opacity is much faster than animating rgba() background-color.
    */
    .pswp__bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0;
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      will-change: opacity; }

    .pswp__scroll-wrap {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; }

    .pswp__container,
    .pswp__zoom-wrap {
      -ms-touch-action: none;
      touch-action: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0; }

    /* Prevent selection and tap highlights */
    .pswp__container,
    .pswp__img {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none; }

    .pswp__zoom-wrap {
      position: absolute;
      width: 100%;
      -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
      transform-origin: left top;
      /* for open/close transition */
      -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
              transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }

    .pswp__bg {
      will-change: opacity;
      /* for open/close transition */
      -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
              transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

    .pswp--animated-in .pswp__bg,
    .pswp--animated-in .pswp__zoom-wrap {
      -webkit-transition: none;
      transition: none; }

    .pswp__container,
    .pswp__zoom-wrap {
      -webkit-backface-visibility: hidden; }

    .pswp__item {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      overflow: hidden; }

    .pswp__img {
      position: absolute;
      width: auto;
      height: auto;
      top: 0;
      left: 0; }

    /*
        stretched thumbnail or div placeholder element (see below)
        style is added to avoid flickering in webkit/blink when layers overlap
    */
    .pswp__img--placeholder {
      -webkit-backface-visibility: hidden; }

    /*
        div element that matches size of large image
        large image loads on top of it
    */
    .pswp__img--placeholder--blank {
      background: #222; }

    .pswp--ie .pswp__img {
      width: 100% !important;
      height: auto !important;
      left: 0;
      top: 0; }

    /*
        Error message appears when image is not loaded
        (JS option errorMsg controls markup)
    */
    .pswp__error-msg {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      font-size: 14px;
      line-height: 16px;
      margin-top: -8px;
      color: #CCC; }

    .pswp__error-msg a {
      color: #CCC;
      text-decoration: underline; }

    /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
    /*

        Contents:

        1. Buttons
        2. Share modal and links
        3. Index indicator ("1 of X" counter)
        4. Caption
        5. Loading indicator
        6. Additional styles (root element, top bar, idle state, hidden state, etc.)

    */
    /*
        
        1. Buttons

     */
    /* <button> css reset */
    .pswp__button {
      width: 44px;
      height: 44px;
      position: relative;
      background: none;
      cursor: pointer;
      overflow: visible;
      -webkit-appearance: none;
      display: block;
      border: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      float: right;
      opacity: 0.75;
      -webkit-transition: opacity 0.2s;
              transition: opacity 0.2s;
      -webkit-box-shadow: none;
              box-shadow: none;
          background-color: transparent !important;;
     }
      .pswp__button:focus, .pswp__button:hover {
        opacity: 1; }
      .pswp__button:active {
        outline: none;
        opacity: 0.9; }
      .pswp__button::-moz-focus-inner {
        padding: 0;
        border: 0; }

    /* pswp__ui--over-close class it added when mouse is over element that should close gallery */
    .pswp__ui--over-close .pswp__button--close {
      opacity: 1; }

    .pswp__button,
    .pswp__button--arrow--left:before,
    .pswp__button--arrow--right:before {
      background: url(default-skin.png?v=1904) 0 0 no-repeat;
      background-size: 264px 88px;
      width: 44px;
      height: 44px; }

    @media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
      /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
      .pswp--svg .pswp__button,
      .pswp--svg .pswp__button--arrow--left:before,
      .pswp--svg .pswp__button--arrow--right:before {
        background-image: url(default-skin.svg?v=1904); }
      .pswp--svg .pswp__button--arrow--left,
      .pswp--svg .pswp__button--arrow--right {
        background: none; } }

    .pswp__button--close {
      background-position: 0 -44px; }

    .pswp__button--share {
      background-position: -44px -44px; }

    .pswp__button--fs {
      display: none; }

    .pswp--supports-fs .pswp__button--fs {
      display: block; }

    .pswp--fs .pswp__button--fs {
      background-position: -44px 0; }

    .pswp__button--zoom {
      display: none;
      background-position: -88px 0; }

    .pswp--zoom-allowed .pswp__button--zoom {
      display: block; }

    .pswp--zoomed-in .pswp__button--zoom {
      background-position: -132px 0; }

    /* no arrows on touch screens */
    .pswp--touch .pswp__button--arrow--left,
    .pswp--touch .pswp__button--arrow--right {
      visibility: hidden; }

    /*
        Arrow buttons hit area
        (icon is added to :before pseudo-element)
    */
    .pswp__button--arrow--left,
    .pswp__button--arrow--right {
      background: none;
      top: 50%;
      margin-top: -50px;
      width: 70px;
      height: 100px;
      position: absolute; }

    .pswp__button--arrow--left {
      left: 0; }

    .pswp__button--arrow--right {
      right: 0; }

    .pswp__button--arrow--left:before,
    .pswp__button--arrow--right:before {
      content: '';
      top: 35px;
      background-color: rgba(0, 0, 0, 0.3);
      height: 30px;
      width: 32px;
      position: absolute; }

    .pswp__button--arrow--left:before {
      left: 6px;
      background-position: -138px -44px; }

    .pswp__button--arrow--right:before {
      right: 6px;
      background-position: -94px -44px; }

    /*

        2. Share modal/popup and links

     */
    .pswp__counter,
    .pswp__share-modal {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

    .pswp__share-modal {
      display: block;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding: 10px;
      position: absolute;
      z-index: 1600;
      opacity: 0;
      -webkit-transition: opacity 0.25s ease-out;
              transition: opacity 0.25s ease-out;
      -webkit-backface-visibility: hidden;
      will-change: opacity; }

    .pswp__share-modal--hidden {
      display: none; }

    .pswp__share-tooltip {
      z-index: 1620;
      position: absolute;
      background: #FFF;
      top: 56px;
      border-radius: 2px;
      display: block;
      width: auto;
      right: 44px;
      -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
      -webkit-transform: translateY(6px);
          -ms-transform: translateY(6px);
              transform: translateY(6px);
      -webkit-transition: -webkit-transform 0.25s;
              transition: transform 0.25s;
      -webkit-backface-visibility: hidden;
      will-change: transform; }
      .pswp__share-tooltip a {
        display: block;
        padding: 8px 12px;
        color: #000;
        text-decoration: none;
        font-size: 14px;
        line-height: 18px; }
        .pswp__share-tooltip a:hover {
          text-decoration: none;
          color: #000; }
        .pswp__share-tooltip a:first-child {
          /* round corners on the first/last list item */
          border-radius: 2px 2px 0 0; }
        .pswp__share-tooltip a:last-child {
          border-radius: 0 0 2px 2px; }

    .pswp__share-modal--fade-in {
      opacity: 1; }
      .pswp__share-modal--fade-in .pswp__share-tooltip {
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0); }

    /* increase size of share links on touch devices */
    .pswp--touch .pswp__share-tooltip a {
      padding: 16px 12px; }

    a.pswp__share--facebook:before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      top: -12px;
      right: 15px;
      border: 6px solid transparent;
      border-bottom-color: #FFF;
      -webkit-pointer-events: none;
      -moz-pointer-events: none;
      pointer-events: none; }

    a.pswp__share--facebook:hover {
      background: #3E5C9A;
      color: #FFF; }
      a.pswp__share--facebook:hover:before {
        border-bottom-color: #3E5C9A; }

    a.pswp__share--twitter:hover {
      background: #55ACEE;
      color: #FFF; }

    a.pswp__share--pinterest:hover {
      background: #CCC;
      color: #CE272D; }

    a.pswp__share--download:hover {
      background: #DDD; }

    /*

        3. Index indicator ("1 of X" counter)

     */
    .pswp__counter {
      position: absolute;
      left: 0;
      top: 0;
      height: 44px;
      font-size: 13px;
      line-height: 44px;
      color: #FFF;
      opacity: 0.75;
      padding: 0 10px; }

    /*
        
        4. Caption

     */
    .pswp__caption {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      min-height: 44px; }
      .pswp__caption small {
        font-size: 11px;
        color: #BBB; }

    .pswp__caption__center {
      text-align: center;
      max-width: 420px;
      margin: 0 auto;
      font-size: 13px;
      padding: 10px;
      line-height: 20px;
      color: #CCC; }

    .pswp__caption--empty {
      display: none; }

    /* Fake caption element, used to calculate height of next/prev image */
    .pswp__caption--fake {
      visibility: hidden; }

    /*

        5. Loading indicator (preloader)

        You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

     */
    .pswp__preloader {
      width: 44px;
      height: 44px;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -22px;
      opacity: 0;
      -webkit-transition: opacity 0.25s ease-out;
              transition: opacity 0.25s ease-out;
      will-change: opacity;
      direction: ltr; }

    .pswp__preloader__icn {
      width: 20px;
      height: 20px;
      margin: 12px; }

    .pswp__preloader--active {
      opacity: 1; }
      .pswp__preloader--active .pswp__preloader__icn {
        /* We use .gif in browsers that don't support CSS animation */
        background: url(preloader.gif?v=1904) 0 0 no-repeat; }

    .pswp--css_animation .pswp__preloader--active {
      opacity: 1; }
      .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
        -webkit-animation: clockwise 500ms linear infinite;
                animation: clockwise 500ms linear infinite; }
      .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
        -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
                animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }

    .pswp--css_animation .pswp__preloader__icn {
      background: none;
      opacity: 0.75;
      width: 14px;
      height: 14px;
      position: absolute;
      left: 15px;
      top: 15px;
      margin: 0; }

    .pswp--css_animation .pswp__preloader__cut {
      /* 
                The idea of animating inner circle is based on Polymer ("material") loading indicator 
                 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
            */
      position: relative;
      width: 7px;
      height: 14px;
      overflow: hidden; }

    .pswp--css_animation .pswp__preloader__donut {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: 14px;
      height: 14px;
      border: 2px solid #FFF;
      border-radius: 50%;
      border-left-color: transparent;
      border-bottom-color: transparent;
      position: absolute;
      top: 0;
      left: 0;
      background: none;
      margin: 0; }

    @media screen and (max-width: 1024px) {
      .pswp__preloader {
        position: relative;
        left: auto;
        top: auto;
        margin: 0;
        float: right; } }

    @-webkit-keyframes clockwise {
      0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg); }
      100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg); } }

    @keyframes clockwise {
      0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg); }
      100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg); } }

    @-webkit-keyframes donut-rotate {
      0% {
        -webkit-transform: rotate(0);
                transform: rotate(0); }
      50% {
        -webkit-transform: rotate(-140deg);
                transform: rotate(-140deg); }
      100% {
        -webkit-transform: rotate(0);
                transform: rotate(0); } }

    @keyframes donut-rotate {
      0% {
        -webkit-transform: rotate(0);
                transform: rotate(0); }
      50% {
        -webkit-transform: rotate(-140deg);
                transform: rotate(-140deg); }
      100% {
        -webkit-transform: rotate(0);
                transform: rotate(0); } }

    /*
        
        6. Additional styles

     */
    /* root element of UI */
    .pswp__ui {
      -webkit-font-smoothing: auto;
      visibility: visible;
      opacity: 1;
      z-index: 1550; }

    /* top black bar with buttons and "1 of X" indicator */
    .pswp__top-bar {
      position: absolute;
      left: 0;
      top: 0;
      height: 44px;
      width: 100%; }

    .pswp__caption,
    .pswp__top-bar,
    .pswp--has_mouse .pswp__button--arrow--left,
    .pswp--has_mouse .pswp__button--arrow--right {
      -webkit-backface-visibility: hidden;
      will-change: opacity;
      -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
              transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

    /* pswp--has_mouse class is added only when two subsequent mousemove events occur */
    .pswp--has_mouse .pswp__button--arrow--left,
    .pswp--has_mouse .pswp__button--arrow--right {
      visibility: visible; }

    .pswp__top-bar,
    .pswp__caption {
      background-color: rgba(0, 0, 0, 0.5); }

    /* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
    .pswp__ui--fit .pswp__top-bar,
    .pswp__ui--fit .pswp__caption {
      background-color: rgba(0, 0, 0, 0.3); }

    /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
    .pswp__ui--idle .pswp__top-bar {
      opacity: 0; }

    .pswp__ui--idle .pswp__button--arrow--left,
    .pswp__ui--idle .pswp__button--arrow--right {
      opacity: 0; }

    /*
        pswp__ui--hidden class is added when controls are hidden
        e.g. when user taps to toggle visibility of controls
    */
    .pswp__ui--hidden .pswp__top-bar,
    .pswp__ui--hidden .pswp__caption,
    .pswp__ui--hidden .pswp__button--arrow--left,
    .pswp__ui--hidden .pswp__button--arrow--right {
      /* Force paint & create composition layer for controls. */
      opacity: 0.001; }

    /* pswp__ui--one-slide class is added when there is just one item in gallery */
    .pswp__ui--one-slide .pswp__button--arrow--left,
    .pswp__ui--one-slide .pswp__button--arrow--right,
    .pswp__ui--one-slide .pswp__counter {
      display: none; }

    .pswp__element--disabled {
      display: none !important; }

    .pswp--minimal--dark .pswp__top-bar {
      background: none; }

    /* nathan custom thumbnails */
    .pswp__thumbnails {
        padding: 5px;
        position: absolute;
        bottom: 0;
        width: 100%;
        margin: 0;
        white-space: nowrap;
        overflow: auto;
        opacity: 0;
        background: 0 0;
        transition: opacity .2s ease-out;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        text-align: center;
        transform: translate3d(0,100%,0);
        background-color: rgba(0,0,0,.8);
    }
    .pswp_thumb_item {
        min-width: 50px;
        width: 50px;
        margin: 5px;
        border-radius: 2px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        display: inline-block;
        background-color: rgba(0,0,0,1);
    }
    .pswp_thumb_item img {
        width: 100%;
    }
    .pswp--animated-in .pswp__thumbnails {
        opacity: 1;
        transition: transform .6s cubic-bezier(.19,1,.22,1) 0s;
        transform: translate3d(0,0,0);
    }
/*     .pswp_thumb_item:not(.pswp_thumb_active) {
       opacity: .6;
       box-shadow: 0 0 0 2px var(--accent-color);
    } */
    .pswp_thumb_item img {
        margin-bottom: -5px;
        opacity: .6;
        transition: transform .6s,opacity .6s;
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    .pswp_thumb_item img:hover,  .pswp_thumb_item.pswp_thumb_active img {
        -ms-transform: translateY(-5px);
        transform: translateY(-5px);
        opacity: 1;
    }
    @media (min-width: 768px) {
        .pswp_thumb_item {
           min-width: 70px;
           width: 70px;
        }
    }

/* ==========================================================================
   7. SCROLLBAR CSS
   ========================================================================== */
   @media (min-width: 1025px) {

        .t4s-scrollbar ::-webkit-scrollbar,.t4s-current-scrollbar::-webkit-scrollbar {
            height: 5px;              /* height of horizontal scrollbar ← You're missing this */
            width: 5px;               /* width of vertical scrollbar */
        }

        .t4s-scrollbar ::-webkit-scrollbar-track,.t4s-current-scrollbar::-webkit-scrollbar-track {
            background-color: rgba(0,0,0,.05)
        }

        .t4s-scrollbar ::-webkit-scrollbar-thumb,.t4s-current-scrollbar::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,.12)
        }

        .t4s-scheme-light .t4s-scrollbar ::-webkit-scrollbar-track,.t4s-scrollbar.t4s-scheme-light ::-webkit-scrollbar-track,
        .t4s-scheme-light .t4s-current-scrollbar::-webkit-scrollbar-track,.t4s-current-scrollbar.t4s-scheme-light::-webkit-scrollbar-track {
            background-color: rgba(255,255,255,.05)
        }

        .t4s-scheme-light .t4s-scrollbar ::-webkit-scrollbar-thumb,.t4s-scrollbar.t4s-scheme-light ::-webkit-scrollbar-thumb,
        .t4s-scheme-light .t4s-current-scrollbar::-webkit-scrollbar-thumb,.t4s-current-scrollbar.t4s-scheme-light::-webkit-scrollbar-thumb {
            background-color: rgba(255,255,255,.12)
        }

   }

/* ==========================================================================
   8. LOADING CSS

   <div class="loading-icon"><div class="loading-icon__animation"></div></div>
   ========================================================================== */
    
    .loading-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      transform: translate(-50%, -50%);
    }

    .loading-icon__animation {
      position: relative;
      left: -32px;
      width: 10px;
      height: 10px;
      color: var(--loading-icon-color);
      border-radius: 5px;
      box-shadow: 16px 0 0 0 var(--loading-icon-color), 32px 0 0 0 var(--loading-icon-color), 48px 0 0 0 var(--loading-icon-color);
      animation: dotTyping 1.5s infinite linear;
    }

   @keyframes dotTyping {
      0% {
        box-shadow: 16px 0 0 0 var(--loading-icon-color), 32px 0 0 0 var(--loading-icon-color), 48px 0 0 0 var(--loading-icon-color);
      }
      16.667% {
        box-shadow: 16px -10px 0 0 var(--loading-icon-color), 32px 0 0 0 var(--loading-icon-color), 48px 0 0 0 var(--loading-icon-color);
      }
      33.333% {
        box-shadow: 16px 0 0 0 var(--loading-icon-color), 32px 0 0 0 var(--loading-icon-color), 48px 0 0 0 var(--loading-icon-color);
      }
      50% {
        box-shadow: 16px 0 0 0 var(--loading-icon-color), 32px -10px 0 0 var(--loading-icon-color), 48px 0 0 0 var(--loading-icon-color);
      }
      66.667% {
        box-shadow: 16px 0 0 0 var(--loading-icon-color), 32px 0 0 0 var(--loading-icon-color), 48px 0 0 0 var(--loading-icon-color);
      }
      83.333% {
        box-shadow: 16px 0 0 0 var(--loading-icon-color), 32px 0 0 0 var(--loading-icon-color), 48px -10px 0 0 var(--loading-icon-color);
      }
      100% {
        box-shadow: 16px 0 0 0 var(--loading-icon-color), 32px 0 0 0 var(--loading-icon-color), 48px 0 0 0 var(--loading-icon-color);
      }
    }
    .product__add-to-cart-button.cart-drawer--loading {
        --loading-icon-color: #ffffff;
        color: transparent;
    }
/*     https://www.figma.com/proto/sRLXS1tPIU323eF8MaswTK/01-Cobis?node-id=4961%3A35361&scaling=min-zoom&page-id=2680%3A5534 */
    .lazyloadt4s-loaderis-load-css:before,
    .lazyloadt4s-loader.is-load-css:after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
        background-color: #fff;
        border-radius: 5px;
        width: 50px;
        height: 5px;
        border-radius: 2.5px;
        margin: auto;
        z-index: 1;
        box-shadow: 0 0 1px #0006;
    }
    .lazyloadt4s-loader.is-load-css:after {
        transform: scaleX(0);
        animation: progress_bar--progressBarFillScale 20s cubic-bezier(.01,1.06,.71,1) forwards;
        transform-origin: 0 0;
        background-color: #222;
        z-index: 2;
    }
    @keyframes progress_bar--progressBarFillScale {
        0% {
            transform: scaleX(.001)
        }

        1% {
            transform: scaleX(.001)
        }

        to {
            transform: scaleX(.97)
        }
    }

/*     <div class="loading__spinner" hidden><svg aria-hidden="true" focusable="false" role="presentation" class="t4s-svg-spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                          <circle class="t4s-path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                        </svg></div> */
/*     .t4s-predictive-search .t4s-svg-spinner {
        width: 1.5rem;
        height: 1.5rem;
        line-height: 0;
        --color-foreground: 18, 18, 18;
    } */
    .t4s-cart-spinner:not([hidden]),
    .t4s-svg-spinner:not([hidden]),
    .t4s-btn-loading__svg.is--loading .t4s-svg__spinner {
      animation: t4s_rotator 1.4s linear infinite;
    }

    @keyframes t4s_rotator {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(270deg);
      }
    }
    .t4s-cart-spinner:not([hidden]) .t4s-path,
    .t4s-svg-spinner:not([hidden]) .t4s-path,
    .t4s-btn-loading__svg.is--loading .t4s-path {
      stroke-dasharray: 280;
      stroke-dashoffset: 0;
      transform-origin: center;
      stroke: var(--secondary-color);
      animation: t4s_dash 1.4s ease-in-out infinite;
    }

    @media screen and (forced-colors: active) {
      .t4s-cart-spinner:not([hidden]) .t4s-path,
      .t4s-svg-spinner:not([hidden]) .t4s-path {
        stroke: CanvasText;
      }
    }

    @keyframes t4s_dash {
      0% {
        stroke-dashoffset: 280;
      }
      50% {
        stroke-dashoffset: 75;
        transform: rotate(135deg);
      }
      100% {
        stroke-dashoffset: 280;
        transform: rotate(450deg);
      }
    }
   .t4s-btn-loading__svg.is--loading {
       position: relative;
       pointer-events: none;
   }
   .t4s-btn-loading__svg.is--loading .t4s-btn-atc_text,
   .t4s-btn-loading__svg.is--loading .t4s-btn-icon,
   .t4s-btn-loading__svg.is--loading .t4s-btn-op0 {
       opacity: 0;
   }
   .t4s-btn-loading__svg.is--loading >.t4s-loading__spinner {
       top: 50%;
       left: 50%;
       width: 1.8rem;
       transform: translate(-50%,-50%);
       position: absolute;
       display: flex;
   }
   .t4s-btn-loading__svg.is--loading .t4s-path,
   .t4s-svg-spinner:not([hidden]) .t4s-path {
       stroke: currentColor;
   }
   .is--pe-none { pointer-events: none !important; }

   /* Effect loading when ajax filter, panigation on main section */
   .t4s-section-main .is--enabled.is--loading {
    opacity: .5;
    pointer-events: none;
   }

/* ==========================================================================
   9. PREVENT SCROLLING CSS
   ========================================================================== */
    
  body.t4s-prevent-scrolling {
      overflow: hidden;
      position: fixed;
      width: 100%; 
  }

/* ==========================================================================
   10. COLORS CSS
   ========================================================================== */
    /*150 colors css*/
    [class*=' bg_color_'] {
        font-size: 0;
        --t4s-bg-color: #e5e5e5;
        background-color: var(--swatch--background, var(--t4s-bg-color));
    }

    .bg_color_cyan {
        --t4s-bg-color: #25bdb0
    }

    .bg_color_pink {
        --t4s-bg-color: #fcc6de
    }

    .bg_color_black {
        --t4s-bg-color: #000
    }

    .bg_color_grey {
        --t4s-bg-color: #ccc
    }

    .bg_color_green {
        --t4s-bg-color: #e1eb78
    }

    .bg_color_sliver {
        --t4s-bg-color: #f2f2f2
    }

    .bg_color_blue {
        --t4s-bg-color: #a8bcd4
    }

    .bg_color_purple {
        --t4s-bg-color: #7e0b80
    }

    .bg_color_white {
        --t4s-bg-color: #fff;
        border: 1px solid #ddd
    }

    .bg_color_brown {
        --t4s-bg-color: #977945
    }

    .bg_color_red {
        --t4s-bg-color: #f63400
    }

    .bg_color_brown {
        --t4s-bg-color: #ad8111
    }

    .bg_color_gold {
        --t4s-bg-color: #cea525
    }

    .bg_color_beige {
        --t4s-bg-color: #f0deba
    }

    .bg_color_gray {
        --t4s-bg-color: #bfbfbf
    }

    .bg_color_orange {
        --t4s-bg-color: #ff7900
    }

    .bg_color_yellow {
        --t4s-bg-color: #dcdb79
    }

    .bg_color_navy {
        --t4s-bg-color: #001f3f
    }

    .bg_color_aqua {
        --t4s-bg-color: #7fdbff
    }

    .bg_color_teal {
        --t4s-bg-color: #39cccc
    }

    .bg_color_gun-smoke {
        --t4s-bg-color: #12221f
    }

    .bg_color_olive {
        --t4s-bg-color: olive
    }

    .bg_color_lime {
        --t4s-bg-color: #0f0
    }

    .bg_color_rose-gold {
        --t4s-bg-color: #fcdbd6
    }

    .bg_color_clear {
        --t4s-bg-color: #caf6ea
    }

    .bg_color_maroon {
        --t4s-bg-color: maroon
    }

    .bg_color_ivory {
        --t4s-bg-color: ivory
    }

    .bg_color_lavenderblush {
        --t4s-bg-color: #b0e0e6
    }

    .bg_color_powderblue {
        --t4s-bg-color: #f012be
    }

    .bg_color_darkgreen {
        --t4s-bg-color: #006400
    }

    .bg_color_saddlebrown {
        --t4s-bg-color: #8b4513
    }

    .bg_color_lightcoral {
        --t4s-bg-color: #f08080
    }

    .bg_color_palevioletred {
        --t4s-bg-color: #db7093
    }

    .bg_color_chocolate {
        --t4s-bg-color: #d2691e
    }

    .bg_color_darkolivegreen {
        --t4s-bg-color: #556b2f
    }

    .bg_color_darkred {
        --t4s-bg-color: #8b0000
    }

    .bg_color_mediumaquamarine {
        --t4s-bg-color: #66cdaa
    }

    .bg_color_sandybrown {
        --t4s-bg-color: #f4a460
    }

    .bg_color_darkslategray {
        --t4s-bg-color: #2f4f4f
    }

    .bg_color_salmon {
        --t4s-bg-color: salmon
    }

    .bg_color_slateblue {
        --t4s-bg-color: #6a5acd
    }

    .bg_color_lightgray {
        --t4s-bg-color: #d3d3d3
    }

    .bg_color_lemonchiffon {
        --t4s-bg-color: #fffacd
    }

    .bg_color_thistle {
        --t4s-bg-color: #d8bfd8
    }

    .bg_color_wheat {
        --t4s-bg-color: wheat
    }

    .bg_color_lightsalmon {
        --t4s-bg-color: #ffa07a
    }

    .bg_color_hotpink {
        --t4s-bg-color: #ff69b4
    }

    .bg_color_lawngreen {
        --t4s-bg-color: #7cfc00
    }

    .bg_color_snow {
        --t4s-bg-color: snow
    }

    .bg_color_darkslateblue {
        --t4s-bg-color: #483d8b
    }

    .bg_color_coral {
        --t4s-bg-color: coral
    }

    .bg_color_limegreen {
        --t4s-bg-color: #32cd32
    }

    .bg_color_lightgrey {
        --t4s-bg-color: #d3d3d3
    }

    .bg_color_royalblue {
        --t4s-bg-color: #4169e1
    }

    .bg_color_dimgrey {
        --t4s-bg-color: #696969
    }

    .bg_color_lightseagreen {
        --t4s-bg-color: #20b2aa
    }

    .bg_color_skyblue {
        --t4s-bg-color: #87ceeb
    }

    .bg_color_orchid {
        --t4s-bg-color: orchid
    }

    .bg_color_darksalmon {
        --t4s-bg-color: #e9967a
    }

    .bg_color_darkorchid {
        --t4s-bg-color: #9932cc
    }

    .bg_color_cornflowerblue {
        --t4s-bg-color: #6495ed
    }

    .bg_color_cornsilk {
        --t4s-bg-color: #fff8dc
    }

    .bg_color_lightslategrey {
        --t4s-bg-color: #789
    }

    .bg_color_whitesmoke {
        --t4s-bg-color: #f5f5f5
    }

    .bg_color_seagreen {
        --t4s-bg-color: #2e8b57
    }

    .bg_color_crimson {
        --t4s-bg-color: #dc143c
    }

    .bg_color_azure {
        --t4s-bg-color: azure
    }

    .bg_color_paleturquoise {
        --t4s-bg-color: #afeeee
    }

    .bg_color_darkkhaki {
        --t4s-bg-color: #bdb76b
    }

    .bg_color_mediumvioletred {
        --t4s-bg-color: #c71585
    }

    .bg_color_lightgoldenrodyellow {
        --t4s-bg-color: #fafad2
    }

    .bg_color_violet {
        --t4s-bg-color: violet
    }

    .bg_color_peachpuff {
        --t4s-bg-color: #ffdab9
    }

    .bg_color_steelblue {
        --t4s-bg-color: #4682b4
    }

    .bg_color_blanchedalmond {
        --t4s-bg-color: #ffebcd
    }

    .bg_color_moccasin {
        --t4s-bg-color: #ffe4b5
    }

    .bg_color_antiquewhite {
        --t4s-bg-color: #faebd7
    }

    .bg_color_mediumturquoise {
        --t4s-bg-color: #48d1cc
    }

    .bg_color_lightskyblue {
        --t4s-bg-color: #87cefa
    }

    .bg_color_darkorange {
        --t4s-bg-color: #ff8c00
    }

    .bg_color_darkblue {
        --t4s-bg-color: #00008b
    }

    .bg_color_springgreen {
        --t4s-bg-color: #00ff7f
    }

    .bg_color_lavender {
        --t4s-bg-color: #e6e6fa
    }

    .bg_color_mediumpurple {
        --t4s-bg-color: #9370db
    }

    .bg_color_deepskyblue {
        --t4s-bg-color: #00bfff
    }

    .bg_color_mintcream {
        --t4s-bg-color: #f5fffa
    }

    .bg_color_deeppink {
        --t4s-bg-color: #ff1493
    }

    .bg_color_darkseagreen {
        --t4s-bg-color: #8fbc8f
    }

    .bg_color_papayawhip {
        --t4s-bg-color: #ffefd5
    }

    .bg_color_orangered {
        --t4s-bg-color: #ff4500
    }

    .bg_color_tomato {
        --t4s-bg-color: tomato
    }

    .bg_color_navajowhite {
        --t4s-bg-color: #ffdead
    }

    .bg_color_mediumorchid {
        --t4s-bg-color: #ba55d3
    }

    .bg_color_ghostwhite {
        --t4s-bg-color: #f8f8ff
    }

    .bg_color_slategrey {
        --t4s-bg-color: #708090
    }

    .bg_color_forestgreen {
        --t4s-bg-color: #228b22
    }

    .bg_color_dodgerblue {
        --t4s-bg-color: #1e90ff
    }

    .bg_color_linen {
        --t4s-bg-color: linen
    }

    .bg_color_blueviolet {
        --t4s-bg-color: #8a2be2
    }

    .bg_color_gainsboro {
        --t4s-bg-color: #dcdcdc
    }

    .bg_color_lightgreen {
        --t4s-bg-color: #90ee90
    }

    .bg_color_chartreuse {
        --t4s-bg-color: #7fff00
    }

    .bg_color_mistyrose {
        --t4s-bg-color: #ffe4e1
    }

    .bg_color_darkgray {
        --t4s-bg-color: #a9a9a9
    }

    .bg_color_peru {
        --t4s-bg-color: peru
    }

    .bg_color_tan {
        --t4s-bg-color: tan
    }

    .bg_color_palegreen {
        --t4s-bg-color: #98fb98
    }

    .bg_color_rebeccapurple {
        --t4s-bg-color: #639
    }

    .bg_color_darkcyan {
        --t4s-bg-color: #008b8b
    }

    .bg_color_oldlace {
        --t4s-bg-color: #fdf5e6
    }

    .bg_color_rosybrown {
        --t4s-bg-color: #bc8f8f
    }

    .bg_color_darkslategrey {
        --t4s-bg-color: #2f4f4f
    }

    .bg_color_lightslategray {
        --t4s-bg-color: #789
    }

    .bg_color_turquoise {
        --t4s-bg-color: #40e0d0
    }

    .bg_color_darkgoldenrod {
        --t4s-bg-color: #b8860b
    }

    .bg_color_honeydew {
        --t4s-bg-color: #f0fff0
    }

    .bg_color_mediumslateblue {
        --t4s-bg-color: #7b68ee
    }

    .bg_color_mediumspringgreen {
        --t4s-bg-color: #00fa9a
    }

    .bg_color_plum {
        --t4s-bg-color: plum
    }

    .bg_color_darkgrey {
        --t4s-bg-color: #a9a9a9
    }

    .bg_color_slategray {
        --t4s-bg-color: #708090
    }

    .bg_color_darkmagenta {
        --t4s-bg-color: #8b008b
    }

    .bg_color_lightblue {
        --t4s-bg-color: #add8e6
    }

    .bg_color_floralwhite {
        --t4s-bg-color: #fffaf0
    }

    .bg_color_dimgray {
        --t4s-bg-color: #696969
    }

    .bg_color_greenyellow {
        --t4s-bg-color: #adff2f
    }

    .bg_color_fuchsia {
        --t4s-bg-color: #f0f
    }

    .bg_color_cadetblue {
        --t4s-bg-color: #5f9ea0
    }

    .bg_color_yellowgreen {
        --t4s-bg-color: #9acd32
    }

    .bg_color_darkviolet {
        --t4s-bg-color: #9400d3
    }

    .bg_color_sienna {
        --t4s-bg-color: sienna
    }

    .bg_color_lightpink {
        --t4s-bg-color: #ffb6c1
    }

    .bg_color_mediumblue {
        --t4s-bg-color: #0000cd
    }

    .bg_color_bisque {
        --t4s-bg-color: bisque
    }

    .bg_color_aquamarine {
        --t4s-bg-color: #7fffd4
    }

    .bg_color_palegoldenrod {
        --t4s-bg-color: #eee8aa
    }

    .bg_color_aliceblue {
        --t4s-bg-color: #f0f8ff
    }

    .bg_color_olivedrab {
        --t4s-bg-color: #6b8e23
    }

    .bg_color_indigo {
        --t4s-bg-color: indigo
    }

    .bg_color_lightcyan {
        --t4s-bg-color: #e0ffff
    }

    .bg_color_midnightblue {
        --t4s-bg-color: #191970
    }

    .bg_color_khaki {
        --t4s-bg-color: khaki
    }

    .bg_color_burlywood {
        --t4s-bg-color: #deb887
    }

    .bg_color_lightyellow {
        --t4s-bg-color: #ffffe0
    }

    .bg_color_lightsteelblue {
        --t4s-bg-color: #b0c4de
    }

    .bg_color_goldenrod {
        --t4s-bg-color: #daa520
    }

    .bg_color_darkturquoise {
        --t4s-bg-color: #00ced1
    }

    .bg_color_magenta {
        --t4s-bg-color: #f0f
    }

    .bg_color_seashell {
        --t4s-bg-color: #fff5ee
    }

    .bg_color_indianred {
        --t4s-bg-color: #cd5c5c
    }

    .bg_color_mediumseagreen {
        --t4s-bg-color: #3cb371
    }

    .bg_color_firebrick {
        --t4s-bg-color: #b22222
    }
    .bg_color_ntloading {
        --t4s-bg-color: #f5f5f5;
    }

/* ==========================================================================
   11. SWATCH LIMIT
   ========================================================================== */
    .t4s-pr-color__item.is--colors-more a {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .t4s-pr-color__item.is--colors-more a:before {
        content: '...';
        content: var(--text);
        z-index: 10;
        color: #222;
        font-size: 9px;
        overflow: hidden;
/*      
        position: absolute;
        top: 0;
        left: 2px;
        right: 2px;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center */
    }

    .t4s-product-colors.is-t4s--opended .t4s-pr-color__item.is--colors-more a:before {
        content: "-";
        content: var(--text2)
    }
    .t4s-product-colors.is-t4s--opended .t4s-pr-color__item:not(.is--colors-more) {
        display: inline-block!important;
    }
/*     .t4s-pr-color__value.lazyloadt4sed {
        animation: 1.25s cubic-bezier(.26,.54,.32,1) forwards t4s-ani-fadeIn;
    } */

/* ==========================================================================
   12. CLOSE OVERLAY
   ========================================================================== */

.t4s-close-overlay {
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   width: 100vw;
   z-index: 468;
   visibility: hidden;
   pointer-events: none;
   opacity: 0;
   background: rgba(0,0,0,.7);
   transition: opacity .3s ease-in-out,visibility .3s ease-in-out;
}
.t4s-close-overlay.is--visible {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition: opacity .25s,visibility;
}


/* ==========================================================================
   12A. LOCK SCROLL
   ========================================================================== */

.t4s-lock-scroll {
    overflow: hidden;
}
[data-t4s-scroll-me] {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   12B. HEADER
   ========================================================================== */
header {
    position: relative;
}
.t4s-count-box,
.t4s-site-nav__icon .ssw-counter-fave-menu {
    width: 15px;
    height: 15px;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 10px;
    line-height: 15px;
    box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 30%);
    opacity: 1;
    transition: .3s ease-in-out;
    background-color: var(--h-count-bgcolor);
    color: var(--h-count-color);
    text-align: center;
    border-radius: 50%;
    top: -5px;
    right: -9px;
}
.t4s-use__kalles .t4s-count-box { right: -6px; }
.t4s-use__line .t4s-count-box { top: -3px;right: -7px; }
.t4s-section-header.animate {
    transition: transform .15s ease-out;
}
.shopify-section-header-hidden {
    transform: translateY(-100%);
}
.t4s-icon-select-arrow {
    opacity: 1;
    width: 10px;
    height: 10px;
    position: absolute;
    top: calc(50% - 5px);
    right: 12px;
    transition: opacity .2s ease-in-out, transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
.t4s_lb_nav {
    position: absolute;
    color: #fff;
    font-size: 9px;
    padding: 0 8px;
    border-radius: 50px;
    top: 50%;
    line-height: 18px;
    background: #01bad4;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: -5px;
    margin-top: -14px;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    opacity: 1;
}
.shopify-section-header-sticky,
.t4sp-sticky .t4s-section-header.shopify-section-header-sticky {
    position: sticky;
    top: 0;
    z-index: 460;
    -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
}
.no-transiton-nav-a .t4s-section-header .t4s-push-menu-btn,
.no-transiton-nav-a .t4s-section-header .t4s-nav__ul>li> a,
.no-transiton-nav-a .t4s-section-header .t4s-nav__ul>li> a *,
.no-transiton-nav-a .t4s-section-header .t4s-site-nav__icon a,
.no-transiton-nav-a .t4s-section-header .t4s-site-nav__icon a *,
.no-transiton-nav-a .t4s-section-header .t4s-site-nav__icon svg {
    transition: none !important;
}

/* ==========================================================================
   15. DRIFT ZOOM
   ========================================================================== */
@keyframes drift-fadeZoomIn {
  0% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes drift-fadeZoomOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  15% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

@keyframes drift-loader-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes drift-loader-before {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2) translateX(6px);
  }
  25% {
    transform: scale(1.3) translateX(8px);
  }
  40% {
    transform: scale(1.2) translateX(6px);
  }
  50% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.8) translateX(6px);
  }
  75% {
    transform: scale(0.7) translateX(8px);
  }
  90% {
    transform: scale(0.8) translateX(6px);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes drift-loader-after {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2) translateX(-6px);
  }
  25% {
    transform: scale(1.3) translateX(-8px);
  }
  40% {
    transform: scale(1.2) translateX(-6px);
  }
  50% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.8) translateX(-6px);
  }
  75% {
    transform: scale(0.7) translateX(-8px);
  }
  90% {
    transform: scale(0.8) translateX(-6px);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes drift-fadeZoomIn {
  0% {
    -webkit-transform: scale(1.5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes drift-fadeZoomOut {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  15% {
    -webkit-transform: scale(1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.5);
    opacity: 0;
  }
}

@-webkit-keyframes drift-loader-rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-180deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@-webkit-keyframes drift-loader-before {
  0% {
    -webkit-transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.2) translateX(6px);
  }
  25% {
    -webkit-transform: scale(1.3) translateX(8px);
  }
  40% {
    -webkit-transform: scale(1.2) translateX(6px);
  }
  50% {
    -webkit-transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.8) translateX(6px);
  }
  75% {
    -webkit-transform: scale(0.7) translateX(8px);
  }
  90% {
    -webkit-transform: scale(0.8) translateX(6px);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@-webkit-keyframes drift-loader-after {
  0% {
    -webkit-transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.2) translateX(-6px);
  }
  25% {
    -webkit-transform: scale(1.3) translateX(-8px);
  }
  40% {
    -webkit-transform: scale(1.2) translateX(-6px);
  }
  50% {
    -webkit-transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.8) translateX(-6px);
  }
  75% {
    -webkit-transform: scale(0.7) translateX(-8px);
  }
  90% {
    -webkit-transform: scale(0.8) translateX(-6px);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

.drift-zoom-pane {
  /* background: rgba(0, 0, 0, 0.5); */
  /* This is required because of a bug that causes border-radius to not
  work with child elements in certain cases. */
  background: #fff;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  box-shadow: 0 1px 5px rgb(127 127 127 / 2%), 0 5px 18px rgb(127 127 127 / 20%);
  z-index: 3;
}

.drift-zoom-pane.drift-opening {
  animation: drift-fadeZoomIn 180ms ease-out;
  -webkit-animation: drift-fadeZoomIn 180ms ease-out;
}

.drift-zoom-pane.drift-closing {
  animation: drift-fadeZoomOut 210ms ease-in;
  -webkit-animation: drift-fadeZoomOut 210ms ease-in;
}

.drift-zoom-pane.drift-inline {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 75px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.drift-loading .drift-zoom-pane-loader {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 66px;
  height: 20px;
  animation: drift-loader-rotate 1800ms infinite linear;
  -webkit-animation: drift-loader-rotate 1800ms infinite linear;
}

.drift-zoom-pane-loader:before,
.drift-zoom-pane-loader:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  border-radius: 20px;
  background-color: rgba(var(--accent-color-rgb), 0.9);
}

.drift-zoom-pane-loader:before {
  left: 0;
  animation: drift-loader-before 1800ms infinite linear;
  -webkit-animation: drift-loader-before 1800ms infinite linear;
}

.drift-zoom-pane-loader:after {
  right: 0;
  animation: drift-loader-after 1800ms infinite linear;
  -webkit-animation: drift-loader-after 1800ms infinite linear;
  animation-delay: -900ms;
  -webkit-animation-delay: -900ms;
}

.drift-bounding-box {
    background: rgba(255,255,255,.25);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 40%) inset;
    z-index: 500;
}
.drift-zoom-pane img {
    position: absolute;
    display: block;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    top: 0;
    left: 0;
}
.t4s-product__zoom-wrapper .drift-zoom-pane {
    top: 0;
    left: 0;
    height: 520px;
    width: 100%;
    max-width: 520px;
}
.is-zoom-type__external .t4s-product__info-container {
    transition: opacity .2s;
}
.is-zoom-type__external .zoom_fade_info .t4s-product__info-container {
    opacity: .3;
}

/* ==========================================================================
   16. MEGA MENU
   ========================================================================== */
.t4s-type__mega> .t4s-sub-menu,
.t4s-type__drop> .t4s-sub-menu,
.t4s-type__lv0_mega> .t4s-sub-menu,
.t4s-type__lv0_drop> .t4s-sub-menu {
     position: absolute;
     min-width: 250px;
     background-color: var(--t4s-body-background);
     top: 100%;
     z-index: 101;
     padding: 0;
     -webkit-box-shadow: inset 0 0 0 1px #eaeaea, 0 5px 20px rgb(0 0 0 / 15%);
     box-shadow: inset 0 0 0 1px #eaeaea, 0 5px 20px rgb(0 0 0 / 15%);
     box-shadow: 0 0 3px rgb(0 0 0 / 15%);
     opacity: 0;
     visibility: hidden;
    transition: .2s ease-in-out;
    pointer-events: none !important;
}
.t4s-type__drop> .t4s-sub-menu .t4s_lb_nav{
  position: relative;
  margin-inline-start: 5px;
  display: inline-block;
}
.t4s-type__drop> .t4s-sub-menu{padding:10px 0}
.t4s-type__mega> .t4s-sub-menu *,
.t4s-type__drop> .t4s-sub-menu *,
.t4s-type__lv0_mega> .t4s-sub-menu *,
.t4s-type__lv0_drop> .t4s-sub-menu  * {
    pointer-events: none !important;
}
.t4s-type__mega> .t4s-sub-menu,
.t4s-type__lv0_mega> .t4s-sub-menu {
   padding: 20px 15px;
   max-width: 100vw;
   max-height: 75vh;
   overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.t4s-type__mega> .t4s-sub-menu,
.t4s-type__lv0_mega> .t4s-sub-menu {
   max-width: var(--t4s-max-width,100vw);
   max-height: var(--t4s-max-height,75vh);
}
#shopify-section-header-vertical .t4s-type__mega > .t4s-sub-menu {
   max-width: calc(100vw - 280px);
   max-width: -webkit-calc(100vw - 280px);
}
.t4s-sub-menu .t4s-container {
    max-width: 100%;
}
.t4s-menu-item.has--children.is-action__hover .t4s-sub-menu {
   pointer-events: auto !important;
   opacity: 1;
   visibility: visible;
}
.t4s-menu-item.has--children.is-action__hover .t4s-sub-menu * {
   pointer-events: auto !important;
}
.t4s-nav__hover_sideup .t4s-nav__ul>li>.t4s-sub-menu,
.t4s-nav__hover_sideup #t4s-nav-categories>li>.t4s-sub-menu {
    -webkit-transform: translateY(15px) translateZ(0);
    transform: translateY(15px) translateZ(0);
    transition: opacity .2s,visibility .2s,transform .2s,-webkit-transform .2s
}
.t4s-nav__hover_sideup .t4s-nav__ul>li.t4s-menu-item.is-action__hover>.t4s-sub-menu,
.t4s-nav__hover_sideup #t4s-nav-categories>li.t4s-menu-item.is-action__hover>.t4s-sub-menu {
    -webkit-transform: none;
    transform: none
}
/* .t4s-nav__ul>li.t4s-menu-item:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 11px;
    left: 0;
    height: 20px;
    pointer-events: none;
    opacity: 0;
}
 */
.t4s-nav__ul>li.t4s-menu-item.is-action__hover:after {
    pointer-events: auto;
    opacity: 1;
}
/* .t4s-section-header:not(.calc-pos-submenu) {
    overflow-x: hidden;
} */
.menu-width__full .t4s-sub-menu {
   width: 100vw;
   left: 0;
}
.t4s-header__wrapper:not(.t4s-layout_vertical) .menu-width__full .t4s-sub-menu {
   left: 0 !important;
   max-width: 100vw !important;
}
.menu-width__full .t4s-sub-menu .t4s-container {
    max-width: 100%;
}
.t4s-sub-menu.is--center-screen {
    left: 50%;
    transform: translateX(-50%);
}
.t4s-nav__hover_sideup .t4s-nav__ul>li>.t4s-sub-menu.is--center-screen,
.t4s-nav__hover_sideup #t4s-nav-categories>li>.t4s-sub-menu.is--center-screen {
    -webkit-transform: translateX(-50%) translateY(15px) translateZ(0);
    transform: translateX(-50%) translateY(15px) translateZ(0);
}
.t4s-nav__hover_sideup .t4s-nav__ul>li.t4s-menu-item.is-action__hover>.t4s-sub-menu.is--center-screen,
.t4s-nav__hover_sideup #t4s-nav-categories>li.t4s-menu-item.is-action__hover>.t4s-sub-menu.is--center-screen {
    -webkit-transform: translateX(-50%) translateY(0) translateZ(0);
    transform: translateX(-50%) translateY(0) translateZ(0);
}

/* ==========================================================================
   17. CAROUSEL NAV
   ========================================================================== */
/* Hover thumb 1 */
.carousel__nav-hover1 .t4s-carousel__nav-item:not(.is-nav-selected) {
  opacity: .5;
  transition: transform .6s,opacity .6s;
}
.carousel__nav-hover1 .t4s-carousel__nav-item.is-nav-selected, 
.carousel__nav-hover1 .t4s-carousel__nav-item:hover {
  opacity: 1;
}

/* End hover thumb 1 */
/* Hover thumb 2 */
.carousel__nav-hover2 .t4s-carousel__nav-item {
  overflow: hidden
}
.carousel__nav-hover2 .t4s-carousel__nav-item .t4s-carousel__nav-inner {
  margin-bottom: -5px;
  opacity: .5;
  transition: transform .6s,opacity .6s;
  transform: translateY(0);
  overflow: hidden
}
.carousel__nav-hover2 .t4s-carousel__nav-item.is-nav-selected .t4s-carousel__nav-inner, 
.carousel__nav-hover2 .t4s-carousel__nav-item:hover .t4s-carousel__nav-inner {
  transform: translateY(-5px);
  opacity: 1;
}
.t4s-thumbnail__badge:empty {
    display: none !important;
}
.t4s-thumbnail__badge {
   --thumb-badge-size:  20px;
   --thumb-badge-icon:  10px;
   --thumb-video-icon:  8px;
    position: absolute;
    width: var(--thumb-badge-size);
    height: var(--thumb-badge-size);
    left: auto;
    top: 5px;
    background-color: var(--t4s-light-color);
    box-shadow: 0 0 5px rgb(0 0 0 / 9%);
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    right: 5px;
    opacity: 1;
   transition: transform .6s,opacity .6s;
}
.t4s-thumbnail__badge svg {
    width: var(--thumb-badge-icon);
    height: auto;
}
[data-mdtype="video"] .t4s-thumbnail__badge svg {
    width: var(--thumb-video-icon);
}
@media screen and (min-width: 768px) {
   
   .t4s-thumbnail__badge {
      --thumb-badge-size:  30px;
      --thumb-badge-icon:  12px;
      --thumb-video-icon:  10px;
   }
}
/* End hover thumb 2 */

/* ==========================================================================
   18. SHOPIFY MODEL
   ========================================================================== */
/* .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster,
button.plyr__control.plyr__control--overlaid {
    background-color: #5b5b5b;
    color: #f3f3f3 !important;
    border: 1px solid rgba(243,243,243,0.05)
}

.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover,.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus {
    color: #f3f3f3
}
.plyr__control--overlaid, .btnt4_style_2 .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster { 
border-radius: 50% !important;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
    background: #f3f3f3;
    border-color: rgba(91,91,91,0.05);
} */
.t4s-deferred-media video,
.t4s-deferred-media iframe,
.t4s-deferred-media model-viewer,
.t4s-deferred-media .shopify-model-viewer-ui, 
.t4s-deferred-media .plyr,
.t4s-deferred-media .media-item {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.t4s-deferred-media.is-media__initialized .t4s-product__media {
    opacity: 0;
}
.t4s-pr-group-btns>button {

}

.t4s-pr-group-btns[hidden] {
    opacity: 0;
    pointer-events: none;
}
.t4s-pr-group-btns[hidden] button {
    pointer-events: none;
}
.is-shopify-xr__showing .t4s-pr-group-btns[hidden] {
    opacity: 1;
    pointer-events: auto;
}
.is-shopify-xr__showing .t4s-pr-group-btns button:not(.t4s-pr__view-in-space) {
   display: none !important;
}
.t4s-deferred-media model-viewer, 
.t4s-deferred-media .shopify-model-viewer-ui, 
.t4s-deferred-media .plyr, 
.t4s-deferred-media .plyr__video-wrapper,
.t4s-deferred-media .media-video {
    height: 100%;
}
.plyr.plyr--full-ui.plyr--video .plyr__video-wrapper {
    background-color: transparent;
    height: 100%;
}
.plyr.plyr--full-ui.plyr--video .plyr__poster {
    --color-video-bg: #f2f2f2;
    background-color: var(--color-video-bg);
    pointer-events: none;
}
.t4s-deferred-media.is--adding {
    opacity: 0;
    visibility: hidden;
    transition: visibility .35s ease, opacity .35s ease;
}
.t4s-deferred-media.is-media__initialized {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   19. NOTICES
   ========================================================================== */
.is--error-checkbox input[type="checkbox"][data-agreemail-checkbox]:not(:checked), 
.is--error-checkbox input[type="checkbox"][data-agreemail-checkbox]:not(:checked)+label:before,
.is--error-email input[type="email"],
.is--error-email .t4s-newsletter__inner {
    border-color: var(--t4s-error-color) !important;
}
#t4s-notices__wrapper {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    z-index: 69900;
    background-color: var(--t4s-warning-color);
    color: var(--t4s-light-color);
    cursor: pointer;
    transform: translate3d(0px, 100%, 0px);
    transition: all 0.35s ease 0s;
    min-height: 60px;
    padding: 10px 80px 10px 65px;
    border: 0px;
}
#t4s-notices__wrapper[data-notices-status="success"] {
    background-color: var(--t4s-success-color);
}
#t4s-notices__wrapper[data-notices-status="error"] {
    background-color: var(--t4s-error-color);
}
#t4s-notices__wrapper.is--show {
    transform: none;
}
#t4s-notices__wrapper .t4s-svg {
    fill: currentcolor;
    width: 18px;
    color: var(--t4s-light-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 24px;
    opacity: 0;
    display: none;
}
#t4s-notices__wrapper[data-notices-status="warning"] .t4s-svg-triangle-exclamation,
#t4s-notices__wrapper[data-notices-status="error"] .t4s-svg-triangle-exclamation,
#t4s-notices__wrapper[data-notices-status="success"] .t4s-svg-circle-check {
    display: block;
}
#t4s-notices__wrapper button.t4s-notices__close {
    position: absolute;
    inset: 0px 0px 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    background-color: rgba(0, 0, 0, 0.1);
    font-weight: 500;
    font-size: 45px;
    cursor: pointer;
    transition: background-color 0.25s ease 0s;
}
#t4s-notices__wrapper .t4s-svg-close {
    stroke-width: 1.5px;
    opacity: 1;
    display: block;
}
.t4s-notices__progressbar {
    position: absolute;
    left: 0;
    top: 0;
    height: 4px;
    width: 100%;
    /* background-color: rgba(0, 0, 0, 0.1); */
    z-index: 1;
}
.t4s-notices__progressbar>span {
    display: block;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 0 0 3px 3px;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
#t4s-notices__wrapper .t4s-notices__progressbar>span {
   animation-name: t4s-ani-w;
}

#t4s-notices__wrapper .t4s-notices__mess {
    opacity: 0;
}
#t4s-notices__wrapper.is--show .t4s-svg {
    animation: t4s-ani-revealIn 2s cubic-bezier(.25,1.6,.25,1) both;
}
#t4s-notices__wrapper.is--show .t4s-notices__mess {
    animation: t4s-ani-slideIn 1.35s cubic-bezier(.16,.81,.32,1) both;
}

@keyframes t4s-ani-w {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}
@-webkit-keyframes t4s-ani-w {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

@keyframes t4s-ani-revealIn {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,1)
    }

    to {
        opacity: 1
    }
}
@-webkit-keyframes t4s-ani-revealIn {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,1)
    }

    to {
        opacity: 1
    }
}

@keyframes t4s-ani-slideIn {
    0% {
        opacity: 0;
        transform: translateX(50px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}
@-webkit-keyframes t4s-ani-slideIn {
    0% {
        opacity: 0;
        transform: translateX(50px)
    }

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

/* ==========================================================================
   20. OTHER CSS
   ========================================================================== */
.not--cookies .t4s-cookie-message {display: block}
.t4s-countdown-enabled {
    display: block;
}
.t4s-countdown-pr.expired_cdt4 { 
   display: block;
}
.t4s-drawer {
   position: fixed;
   top: 0;
   left: 0;
   visibility: hidden;
   width: calc(100vw - 65px);
   height: 100%;
   max-height: 100vh;
   max-height: none;
   z-index: 200;
   transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
   background: var(--t4s-light-color);
   box-shadow: none;
   touch-action: manipulation;
   pointer-events: none;    
   display: flex;
   flex-direction: column;
   overflow: hidden;    
    -webkit-transform: translate3d(-104%,0,0);
    transform: translate3d(-104%,0,0);
}
/* .t4s-drawer__left {
   transform: translateX(calc(-100vw + 44px));
} */
.t4s-drawer__right {
   right: 0;
   left: auto;
    -webkit-transform: translate3d(104%,0,0);
    transform: translate3d(104%,0,0);
}
.rtl_true .t4s-drawer {
   right: 0;
   left: auto;
    -webkit-transform: translate3d(104%,0,0);
    transform: translate3d(104%,0,0);
}

.rtl_true .t4s-drawer__right {
   right: auto;
   left: 0;
    -webkit-transform: translate3d(-104%,0,0);
    transform: translate3d(-104%,0,0);
}

/* ==========================================================================
   21. PRODUCT ITEM HOVER
   ========================================================================== */
.t4s-product-img img {
    -webkit-transition: opacity .5s,-webkit-transform 2s cubic-bezier(0,0,.44,1.18);
    transition: opacity .5s,transform 2s cubic-bezier(0,0,.44,1.18),-webkit-transform 2s cubic-bezier(0,0,.44,1.18);
}
.t4s-product-hover-img {
    opacity: 0; 
    background-color: var(--t4s-light-color);
}
/* 
0. No animation
1. Opacity 
*/
.t4s-product-inner:hover .t4s-product-hover-img {
    opacity: 1;
}
.pr_img_effect_0 .t4s-product-img img {
    transition: none;
}

/* 2. Zoom */
.pr_img_effect_2 .t4s-product-inner:hover .t4s-product-hover-img {
    opacity: 1;
}
.pr_img_effect_2 .t4s-product-inner:hover .t4s-product-hover-img,
.pr_img_effect_2.enable_eff_img1_true .t4s-product-inner:hover .t4s-product-main-img {
    transform: scale(1.09);
    -webkit-transform: scale(1.09);
    opacity: 1;
}

/* 3. Move Bottom */
.pr_img_effect_3 .t4s-product-main-img {
    opacity: 1;
    -webkit-transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
}
.pr_img_effect_3 .t4s-product-hover-img {
    -webkit-transform: translate(0,-100%);
    transform: translate(-0,-100%);
    -webkit-transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    opacity: 1;
}
.pr_img_effect_3 .t4s-product-inner:hover .is-show-img2 .t4s-product-main-img {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
.pr_img_effect_3 .t4s-product-inner:hover .t4s-product-hover-img {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

/* 4. Flip Card */
.pr_img_effect_4 .t4s-product .t4s-product-inner {
    perspective: 1000px;
}
.pr_img_effect_4 .t4s-product-img {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.pr_img_effect_4 .t4s-product-img img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 1;
}
.pr_img_effect_4 .t4s-product-inner:hover .t4s-product-img,
.pr_img_effect_4 .t4s-product-hover-img  {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.pr_img_effect_4 .t4s-product-inner:hover .t4s-product-img:not(.is-show-img2) {
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

/* 5. Rotate Zoom */
.pr_img_effect_5 .t4s-product-hover-img {
    transition:  opacity .5s, transform 1.4s cubic-bezier(0,0,.44,1.18),-webkit-transform 1.4s cubic-bezier(0,0,.44,1.18);
}
.pr_img_effect_5.enable_eff_img1_true .t4s-product-inner:hover .t4s-product-main-img,
.pr_img_effect_5 .t4s-product-inner:hover .t4s-product-hover-img {
    -webkit-transform: scale(1.25) rotate(10deg);
    transform: scale(1.25) rotate(10deg);
}

/* ==========================================================================
   1X. ECLIPSE TITLE
   ========================================================================== */
/* .t4s-product-title {
   overflow: hidden;
}
.t4s-product-title > a {
    white-space: nowrap;
    display: block;
}
.t4s-product-title > a:hover {
    transform: translateX(0);
    animation: 6s linear 2s 1 show_msg_first,12s linear 8s infinite show_msg;
    animation: 6s linear 2s 1 show_msg_first,12s linear 8s infinite show_msg;
}
@keyframes show_msg_first {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

@keyframes show_msg {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(-100%)
    }
} */
.your-header-class {
    font-weight: bold !important; /* Forces the text to be bold */
    font-size: 1.2em !important; /* Optional: Adjusts size for better visibility */
    text-transform: uppercase !important; /* Optional: Makes text uppercase */
}

/* Cross out & color sold-out variant options */
.variant-input.soldout label,
input[type="radio"][disabled] + label,
.swatch__item--soldout label,
.swatch-element.soldout label {
  text-decoration: line-through;
  color: #c0392b;   /* muted red */
  opacity: 0.7;
  cursor: not-allowed;
  position: relative; /* needed for tooltip */
}

/* Tooltip styling */
.variant-input.soldout label::after,
input[type="radio"][disabled] + label::after,
.swatch__item--soldout label::after,
.swatch-element.soldout label::after {
  content: "Sold Out";
  position: absolute;
  bottom: 120%; /* show above label */
  left: 50%;
  transform: translateX(-50%);
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

/* Show tooltip on hover */
.variant-input.soldout label:hover::after,
input[type="radio"][disabled] + label:hover::after,
.swatch__item--soldout label:hover::after,
.swatch-element.soldout label:hover::after {
  opacity: 1;
}

/* ---------- Footer 3-column layout fix ---------- */
/* Constrain the black card and keep 3 columns on one row */
.t4s-footer-wrap.auto-3col .hc-grid{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:nowrap; /* keep everything on one row until small screens */
  box-sizing:border-box;
}

/* Prevent overflow from long text or elements */
.t4s-footer-wrap.auto-3col .hc-grid > * { min-width:0; }

/* Column widths and alignment */
.hc-left{
  flex:0 0 33%;
  max-width:33%;
  text-align:left;
  white-space:normal; /* allow wrapping so it doesn't push other cols */
  overflow-wrap:break-word;
}

.hc-center{
  flex:0 0 34%;
  max-width:34%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

/* Right column: stack title above icons and align them to the right */
.hc-right{
  flex:0 0 33%;
  max-width:33%;
  display:flex;
  flex-direction:column;
  align-items:flex-end; /* right-align content */
  text-align:right;
  gap:8px;
}

/* social heading in right column */
.hc-right .t4s-col-heading,
.hc-right .t4s-footer-heading,
.hc-right h3 { 
  margin:0 0 6px;
  text-align:right;
  letter-spacing:0.08em;
}

/* ensure icons sit in a row */
.hc-right .t4s-footer-content,
.hc-right .t4s-socials,
.hc-right .t4s-social-list { 
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
}

/* center menu style */
.hc-menu{
  display:flex;
  gap:36px;
  list-style:none;
  margin:0;
  padding:0;
}
.hc-menu a{
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:700;
  font-size:16px;
  color:inherit;
  display:inline-block;
  padding:6px 0;
}

/* responsive: stack on small screens */
@media (max-width: 980px){
  .t4s-footer-wrap.auto-3col .hc-grid{flex-wrap:wrap}
  .hc-left, .hc-center, .hc-right{flex-basis:100%;max-width:100%;text-align:center;align-items:center;justify-content:center}
  .hc-left{order:3;margin-top:12px}
  .hc-center{order:1;margin-bottom:8px}
  .hc-right{order:2;margin-bottom:8px;align-items:center}
  .hc-right .t4s-footer-content{justify-content:center}
}

/* Footer: center "Stay in Touch" above the icons and tighten icon spacing */
.hc-right {
  /* keep the right column sitting at the right, stacked vertically */
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* keeps the block at the right side of the footer */
  text-align: right;
}

/* Create a small wrapper for heading+icons and center its internal content */
.hc-right .t4s-footer-heading,
.hc-right .t4s-footer-content {
  /* ensure these are sized by their content and centered internally */
  align-self: flex-end; /* keep the wrapper right-aligned in the column */
}

/* Center heading above icons inside the wrapper */
.hc-right .t4s-footer-heading,
.hc-right .t4s-col-heading,
.hc-right h3 {
  display: block;
  width: auto;
  margin: 0 0 8px;      /* spacing between heading and icons */
  text-align: center;   /* center the text above the icons */
  align-self: center;   /* center the heading inside the wrapper */
}

/* Force the icons container to center its icons (so heading sits centered above them) */
.hc-right .t4s-footer-content,
.hc-right .t4s-socials,
.hc-right .t4s-social-list {
  display: flex !important;
  gap: 0px !important;         /* tighten horizontal spacing between icons */
  align-items: center !important;
  justify-content: center !important; /* center icons inside the right-column wrapper */
}

/* Slightly smaller icons so they fit neatly under the heading */
.hc-right .hc-ico {
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: rgba(255,255,255,0.06) !important;
}
.hc-right .hc-ico svg { width: 14px; height: 14px; }

/* on small screens, keep everything centered and stacked nicely */
@media (max-width: 980px) {
  .hc-right {
    align-items: center;
    text-align: center;
  }
  .hc-right .t4s-footer-heading,
  .hc-right .t4s-col-heading,
  .hc-right h3 { align-self: center; text-align:center; }
  .hc-right .t4s-footer-content,
  .hc-right .t4s-socials,
  .hc-right .t4s-social-list { justify-content:center; gap:4px; }
}

/* Tighten social icons spacing in right column (paste at bottom of theme CSS) */
:root { --social-gap: 4px; } /* change to 4px or 12px if you want more/less space */

.hc-right .t4s-footer-content,
.hc-right .t4s-socials,
.hc-right .t4s-social-list {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--social-gap) !important;      /* space between icon blocks */
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove default list item / anchor spacing that some themes add */
.hc-right .t4s-social-list li,
.hc-right .t4s-social-list li a,
.hc-right .t4s-socials a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Make icon boxes uniform and remove extra inner padding */
.hc-right .hc-ico {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Make the svg (icon) slightly smaller and centered */
.hc-right .hc-ico svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* If you want them even tighter, change the gap variable to 6px or 4px above */
/* Mobile: keep them centered and slightly bigger touch targets */
@media (max-width: 980px) {
  :root { --social-gap: 4px; } /* comfortable touch spacing on mobile */
  .hc-right .hc-ico { width: 40px !important; height: 40px !important; min-width: 40px; min-height: 40px; }
  .hc-right .hc-ico svg { width: 16px !important; height: 16px !important; }
}

/* Tighten social icons spacing in right column (paste at bottom of theme CSS) */
:root { --social-gap: 4px; } /* change to 4px or 12px if you want more/less space */

.hc-right .t4s-footer-content,
.hc-right .t4s-socials,
.hc-right .t4s-social-list {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--social-gap) !important;      /* space between icon blocks */
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove default list item / anchor spacing that some themes add */
.hc-right .t4s-social-list li,
.hc-right .t4s-social-list li a,
.hc-right .t4s-socials a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Make icon boxes uniform and remove extra inner padding */
.hc-right .hc-ico {
  width: 28px !important;
  height: 28px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Make the svg (icon) slightly smaller and centered */
.hc-right .hc-ico svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}

/* SUPER-AGGRESSIVE: tighten social icons and force single centered row (paste at tail of theme CSS LRCHANGE) */
:root { --__tight_gap: 4px; --__tight_icon: 24px; --__tight_svg: 11px; --__icons_wrap_w: 240px; }

.t4s-footer-wrap, .footer, .site-footer { /* make sure wrapper doesn't interfere */
  -webkit-font-smoothing: antialiased;
}

/* target common social wrappers and lists used by many themes */
.hc-right .t4s-footer-content,
.hc-right .t4s-socials,
.hc-right .t4s-social-list,
.hc-right .socials,
.hc-right .social-list,
.hc-right ul,
.hc-right .social-icons,
.hc-right .footer-socials {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--__tight_gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
  max-width: var(--__icons_wrap_w) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* remove any per-item padding/margins that cause spacing */
.hc-right .t4s-social-list li,
.hc-right .t4s-social-list li a,
.hc-right .t4s-socials li,
.hc-right .t4s-socials a,
.hc-right .social-list li,
.hc-right .social-list li a,
.hc-right .social-icons a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* icon box sizing (tight) */
.hc-right .hc-ico,
.hc-right .social-icon,
.hc-right a .icon,
.hc-right .icon-wrap {
  width: var(--__tight_icon) !important;
  height: var(--__tight_icon) !important;
  min-width: var(--__tight_icon) !important;
  min-height: var(--__tight_icon) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: rgba(255,255,255,0.06) !important;
  box-sizing: border-box !important;
}

/* svg/icon inside */
.hc-right .hc-ico svg,
.hc-right .social-icon svg,
.hc-right .icon-wrap svg {
  width: var(--__tight_svg) !important;
  height: var(--__tight_svg) !important;
  display:block !important;
}

/* heading centered above icons */
.hc-right .t4s-footer-heading,
.hc-right .t4s-col-heading,
.hc-right h3,
.hc-right .title {
  text-align: center !important;
  align-self: center !important;
  margin-bottom: 8px !important;
}

/* desktop: ensure they remain in a single row */
@media (min-width: 481px) {
  .hc-right .t4s-footer-content,
  .hc-right .t4s-socials { flex-wrap: nowrap !important; }
}

/* mobile: relax for touch */
@media (max-width: 480px) {
  :root { --__tight_icon: 34px; --__tight_svg: 14px; --__tight_gap: 4px; --__icons_wrap_w: 320px; }
  .hc-right .t4s-footer-content { max-width: var(--__icons_wrap_w) !important; gap: var(--__tight_gap) !important; flex-wrap: wrap !important; }
}

/* ----- Footer socials: definitive override (paste at very end of theme CSS) ----- */
/* Purpose: center the "Stay in touch" heading directly above icons, tighten spacing,
   prevent wrapping, and remove conflicting min-widths that force icons to stack. */

.hc-right { 
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;        /* center column content (heading + icons) */
  text-align: center !important;
  gap: 4px !important;                   /* distance between heading and icon row */
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* make a small inner wrapper that centers the icons and limits their total width */
.hc-right .t4s-footer-content,
.hc-right .t4s-socials,
.hc-right .t4s-social-list {
  display: flex !important;
  justify-content: center !important;   /* center icons under the heading */
  align-items: center !important;
  gap: 4px !important;                   /* control horizontal space between icons */
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;          /* avoid wrapping into multiple rows */
  max-width: 220px !important;           /* shrink the widget width so it sits under heading */
  width: auto !important;
  box-sizing: border-box !important;
}

/* icon box: uniform, no forced min-widths */
.hc-right .hc-ico,
.hc-right .social-icon,
.hc-right .icon-wrap,
.hc-right a .icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;               /* VERY IMPORTANT: remove previously forced min-width */
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 6px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: rgba(255,255,255,0.06) !important;
  box-sizing: border-box !important;
}

/* svg inside icons */
.hc-right .hc-ico svg,
.hc-right .social-icon svg,
.hc-right .icon-wrap svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* heading centered and slightly spaced from icons */
.hc-right .t4s-footer-heading,
.hc-right .t4s-col-heading,
.hc-right h3 {
  margin: 0 0 8px !important;
  text-align: center !important;
  align-self: center !important;
  letter-spacing: .08em !important;
}

/* small-screen adjustments: allow wrap if the viewport is very narrow and keep touch targets comfortable */
@media (max-width: 480px) {
  .hc-right .t4s-footer-content,
  .hc-right .t4s-socials,
  .hc-right .t4s-social-list {
    gap: 4px !important;
    max-width: 320px !important;
    flex-wrap: wrap !important;
  }
  .hc-right .hc-ico { width: 42px !important; height: 42px !important; }
  .hc-right .hc-ico svg { width: 18px !important; height: 18px !important; }
}

/* --- Footer: menu top row, copyright left + socials right (paste at end of theme CSS or inside <style>) --- */
.t4s-footer-wrap .hc-grid,
.footer .hc-grid {
  display: grid !important;
  grid-template-columns: 1fr minmax(320px, 640px) 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 18px 24px !important;
  max-width:1200px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.t4s-footer-wrap .hc-center,
.footer .hc-center {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  justify-self: center !important;
  align-self: center !important;
}

.t4s-footer-wrap .hc-left,
.footer .hc-left {
  grid-column: 1 / 2 !important;
  grid-row: 2 / 3 !important;
  justify-self: start !important;
  text-align: left !important;
}

.t4s-footer-wrap .hc-right,
.footer .hc-right {
  grid-column: 3 / 4 !important;
  grid-row: 2 / 3 !important;
  justify-self: end !important;
  text-align: right !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
}

.t4s-footer-wrap .hc-right .t4s-footer-heading,
.t4s-footer-wrap .hc-right .t4s-col-heading,
.t4s-footer-wrap .hc-right h3 {
  margin: 0 0 8px !important;
  text-align: center !important;
  align-self: center !important;
}

:root { --social-gap: 6px; }
.t4s-footer-wrap .hc-right .t4s-footer-content,
.t4s-footer-wrap .hc-right .t4s-socials,
.t4s-footer-wrap .hc-right .t4s-social-list {
  display:flex !important;
  gap: var(--social-gap) !important;
  justify-content:center !important;
  align-items:center !important;
}

.t4s-footer-wrap .hc-right .hc-ico {
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:6px !important;
  background: rgba(255,255,255,0.06) !important;
}
.t4s-footer-wrap .hc-right .hc-ico svg { width:14px !important; height:14px !important; }

@media (max-width: 980px) {
  .t4s-footer-wrap .hc-grid,
  .footer .hc-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .t4s-footer-wrap .hc-center,
  .t4s-footer-wrap .hc-left,
  .t4s-footer-wrap .hc-right {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .t4s-footer-wrap .hc-right { align-items:center !important; }
  :root { --social-gap: 10px; }
  .t4s-footer-wrap .hc-right .hc-ico { width:40px !important; height:40px !important; }
}

/* ---- Footer: keep copyright on one line ---- */
/* Paste this at the end of your theme CSS file (or inside <style> in theme.liquid) */

.t4s-footer-wrap .hc-left,
.footer .hc-left {
  /* give the left column more room and prevent wrapping */
  max-width: 45% !important;   /* increase if needed */
  min-width: 280px !important; /* ensure small screens still show it */
  white-space: nowrap !important;
  overflow: visible !important;
}

/* make sure copyright text elements are inline and won't force breaks */
.t4s-footer-wrap .hc-left p,
.t4s-footer-wrap .hc-left .copyright,
.t4s-footer-wrap .hc-left .copy,
.t4s-footer-wrap .hc-left .t4s-copy,
.footer .hc-left p,
.footer .hc-left .copyright,
.footer .hc-left .copy,
.footer .hc-left .t4s-copy {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* If the copyright contains explicit <br> tags, hide them */
.t4s-footer-wrap .hc-left br,
.footer .hc-left br {
  display: none !important;
}

/* Mobile: allow wrapping if it gets too tight so it doesn't overflow */
@media (max-width: 640px) {
  .t4s-footer-wrap .hc-left,
  .footer .hc-left {
    white-space: normal !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  .t4s-footer-wrap .hc-left p,
  .footer .hc-left p {
    display: block !important;
  }
}

/* ---- Footer: force center menu into single centered row ---- */
/* Paste at end of theme CSS (or inside <style> in theme.liquid) */

.t4s-footer-wrap .hc-center,
.t4s-footer-wrap .hc-center .hc-menu,
.hc-center .hc-menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 34px !important;        /* horizontal space between menu items — tweak if needed */
  flex-wrap: nowrap !important;/* prevent wrapping to multiple lines */
  white-space: nowrap !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure each item sits inline and doesn't force line breaks */
.t4s-footer-wrap .hc-center .hc-menu li,
.hc-center .hc-menu li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* If anchors have extra padding/line-height that cause wrap, reduce them slightly */
.t4s-footer-wrap .hc-center .hc-menu li a,
.hc-center .hc-menu li a {
  display: inline-block !important;
  padding: 6px 8px !important;  /* adjust left/right padding if needed */
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Remove accidental <br> tags inside the menu */
.t4s-footer-wrap .hc-center .hc-menu br,
.hc-center .hc-menu br {
  display: none !important;
}

/* Small-screen fallback: allow wrapping if it gets too tight */
@media (max-width: 900px) {
  .t4s-footer-wrap .hc-center .hc-menu,
  .hc-center .hc-menu {
    gap: 2px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* --- Footer: align copyright baseline with socials --- */
/* Paste this at the end of your theme CSS file */

.t4s-footer-wrap.auto-3col .hc-grid {
  align-items: flex-end !important;   /* align all three columns to the bottom */
}

/* remove extra top margins/line breaks that can push copyright up */
.hc-left,
.hc-left * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap;                /* keep copyright on one line */
}

/* make left column horizontally comfortable and vertically centered to baseline */
.hc-left {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
}

/* small nudge if fonts/size cause a slight offset */
.t4s-footer-wrap.auto-3col .hc-left { 
  /* tweak this value if needed: positive moves copyright up, negative moves down */
  margin-bottom: 2px !important;
}

/* ensure right column (socials) is bottom aligned too */
.hc-right,
.hc-right .t4s-footer-content {
  align-items: flex-end !important;
}

/* safety: keep menu centered on its own row */
.hc-center { align-self: flex-start !important; }

/* ===== Tighten socials so they fit under "STAY IN TOUCH" ===== */
.hc-right {
  align-items: flex-end; /* keep column right-aligned */
}

/* Force heading+icons to size to their content and stay together */
.hc-right .t4s-footer-heading,
.hc-right .t4s-footer-content {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;        /* keeps block at right side of column */
  margin-right: 40px;       /* tweak this to move the block left/right from page edge */
  text-align: center;       /* center heading above icons */
  white-space: nowrap;      /* keep icons on one row */
  margin-bottom: 6px;       /* small gap between heading and icons */
}

/* tighten the space between icons */
.hc-right .t4s-footer-content,
.hc-right .t4s-socials,
.hc-right .t4s-social-list {
  gap: 2px !important;      /* lower number = tighter */
  justify-content: center !important;
  align-items: center !important;
}

/* normalize per-item spacing that themes sometimes add */
.hc-right .t4s-social-list li,
.hc-right .t4s-social-list li a,
.hc-right .t4s-socials a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* icon box sizing (smaller/tighter) — tweak sizes if you want them smaller/bigger */
.hc-right .hc-ico {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.06) !important;
  display: inline-grid !important;
  place-items: center !important;
}

/* svg inside icon */
.hc-right .hc-ico svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}

/* Optional: if you find the whole block too close to the right edge, increase margin-right above */

/* --- Tighten footer social icons (paste at end of theme CSS) --- */

/* Target many common wrappers and the hc-right column you use */
.hc-right .t4s-footer-content,
.hc-right .t4s-socials,
.hc-right .t4s-social-list,
.hc-right .socials,
.hc-right .social-list,
.hc-right .footer-socials,
.hc-right .social-icons {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important; /* center under heading */
  align-items: center !important;
  gap: 6px !important;                 /* starting gap; reduce to 4 or 2 if needed */
  max-width: 220px !important;         /* limit width to keep icons under heading */
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Remove any per-item padding/margin the theme might add */
.hc-right .t4s-social-list li,
.hc-right .t4s-social-list li a,
.hc-right .t4s-socials li,
.hc-right .t4s-socials a,
.hc-right .social-list li,
.hc-right .social-list li a,
.hc-right .socials a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Slight negative overlap between items to visually tighten spacing (safe range: -2 to -8) */
.hc-right .t4s-social-list li + li,
.hc-right .t4s-socials li + li,
.hc-right .social-list li + li {
  margin-left: -6px !important; /* change to -4px or -2px if overlap too strong */
}

/* Icon box sizing — adjust to taste */
.hc-right .hc-ico,
.hc-right .social-icon,
.hc-right .icon-wrap,
.hc-right a .icon,
.hc-right .t4s-social-list li a {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 6px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: rgba(255,255,255,0.06) !important;
  box-sizing: border-box !important;
}

/* Shrink svg inside the boxes slightly */
.hc-right .hc-ico svg,
.hc-right .social-icon svg,
.hc-right .icon-wrap svg {
  width: 14px !important;
  height: 14px !important;
  display:block !important;
}

/* Mobile: keep them touch-friendly but still tight */
@media (max-width: 480px) {
  .hc-right .t4s-footer-content,
  .hc-right .t4s-socials,
  .hc-right .t4s-social-list {
    gap: 8px !important;
    max-width: 320px !important;
    flex-wrap: nowrap !important;
  }
  .hc-right .hc-ico { width: 40px !important; height: 40px !important; }
  .hc-right .hc-ico svg { width: 16px !important; height: 16px !important; }
}

/* --- FORCE-TIGHT FOOTER SOCIALS - paste at BOTTOM of Assets/theme.css --- */
/* Aggressive: overrides any theme CSS, shrinks icon boxes and reduces gaps. */

footer .t4s-footer-content,
footer .t4s-socials,
footer .t4s-social-list,
footer .socials,
footer .social-list,
footer .social-icons,
.hc-right .t4s-footer-content,
.hc-right .t4s-socials,
.hc-right .t4s-social-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important; /* keep icons centered under heading */
  align-items: center !important;
  gap: 6px !important;                 /* starting gap: change to 4px or 2px below */
  max-width: 200px !important;         /* keeps icons width-limited to sit under heading */
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* zero any extra per-item padding */
footer .t4s-social-list li,
footer .t4s-social-list li a,
footer .t4s-socials li,
footer .t4s-socials a,
footer .social-list li,
footer .social-list li a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* optionally tuck icons slightly closer together — adjust if overlap is too much */
footer .t4s-social-list li + li,
footer .t4s-socials li + li,
footer .social-list li + li {
  margin-left: -4px !important; /* try -4px (safe). If you want even tighter use -6px */
}

/* set consistent icon box size */
footer .hc-ico,
footer .t4s-social-list li a,
footer .social-icon,
footer .icon-wrap {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 6px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: rgba(255,255,255,0.06) !important;
  box-sizing: border-box !important;
}

/* shrink the svg inside */
footer .hc-ico svg,
footer .t4s-social-list li a svg,
footer .social-icon svg {
  width: 14px !important;
  height: 14px !important;
  display:block !important;
}

/* mobile tweaks */
@media (max-width: 480px) {
  footer .t4s-footer-content,
  footer .t4s-socials,
  footer .t4s-social-list {
    gap: 8px !important;
    max-width: 320px !important;
    flex-wrap: nowrap !important;
  }
  footer .hc-ico { width: 40px !important; height: 40px !important; }
  footer .hc-ico svg { width: 16px !important; height: 16px !important; }
}

/* tighten social icons, remove extra spacing/padding and center under heading */
.hc-right .t4s-social-list,
.hc-right .t4s-footer-content {
  gap: 4px !important;               /* space between icon boxes — set to 4/6/8 as you like */
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* remove any per-link margins/padding that cause extra gaps */
.hc-right .t4s-social-list li,
.hc-right .t4s-social-list li a,
.hc-right .t4s-socials a,
.hc-right a.tiktok,
.hc-right a[class*="tiktok"] {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* force uniform icon box size */
.hc-right .hc-ico,
.hc-right .t4s-social-list li a > svg,
.hc-right .t4s-social-list li a .hc-ico {
  width: 28px !important;
  height: 28px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.06) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* svg inside icon: make smaller so the boxes are neat */
.hc-right .t4s-social-list li a svg,
.hc-right .hc-ico svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}


/* ---------- TIGHT SOCIAL ICONS (robust) ---------- */
/* Target common social wrappers used by this theme */
.hc-right .t4s-social-list,
.hc-right .t4s-footer-content,
.footer .t4s-social-list,
.footer .social-list,
.footer .socials,
.t4s-social-list,
.social-list,
.socials {
  display: flex !important;
  gap: 6px !important;            /* change to 4px / 8px if you want tighter / looser */
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}

/* Remove per-item padding/margins and force inline-flex */
.hc-right .t4s-social-list li,
.hc-right .t4s-social-list li a,
.hc-right .t4s-socials a,
.t4s-social-list li,
.social-list li,
.social-list li a,
.socials a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Make bottom footer stretch full width */
.t4s-footer-wrap .container,
.footer__content {
  max-width: 100% !important;
  padding-left: 20px;   /* keep a little breathing room */
  padding-right: 20px;
}

/* Align copyright and socials at edges */
.footer__bottom, .t4s-footer-bottom {
  display: flex;
  justify-content: space-between; /* copyright left, socials right */
  align-items: center;
}

/* === Full-bleed bottom footer + edge alignment === */

/* 1) Break the footer-bottom container out to the full browser width */
.t4s-footer-bottom .container,
.t4s-footer-bottom .t4s-container,
.t4s-footer-bottom .footer__content,
.t4s-footer-bottom .t4s-container-fluid {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; /* full-bleed trick */
  margin-right: 0 !important;
  padding-left: 20px !important;   /* gutter so text doesn’t hug the edge */
  padding-right: 20px !important;
}

/* 2) Make the bottom row a left/right bar */
.t4s-footer-bottom .t4s-row,
.t4s-footer-bottom .footer__bottom,
.t4s-footer-bottom .t4s-inner,
.t4s-footer-bottom .t4s-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* left = copyright, right = socials */
  flex-wrap: wrap;
  gap: 12px;
}

/* 3) Make sure the specific bits sit on the correct sides */
.t4s-footer-bottom .footer__copyright,
.t4s-footer-bottom .t4s-footer-copyright {
  margin: 0 !important;     /* flush left */
  order: 1;
}

.t4s-footer-bottom .t4s-socials,
.t4s-footer-bottom .footer__social,
.t4s-footer-bottom .social-links {
  margin-left: auto !important;  /* flush right */
  text-align: right;
  order: 2;
}

/* Optional: keep the mid “policy links” centered — remove if you want a pure left/right bar */
.t4s-footer-bottom .policy-links,
.t4s-footer-bottom .footer__policies {
  margin: 0 auto;
}

/* If your theme fades footer links, un-dim them */
.t4s-footer-bottom .t4s-socials *,
.t4s-footer-bottom a { opacity: 1 !important; }

/* === Full-bleed bottom footer + edge alignment === */

/* 1) Break the bottom bar out to the viewport width */
footer .footer__bottom,
footer .footer-bottom,
footer .t4s-footer-bottom {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; /* full-bleed breakout */
  padding-left: 20px !important;            /* gutter */
  padding-right: 20px !important;
  box-sizing: border-box;
}

/* 2) Layout: copyright flush left, socials flush right */
footer .footer__bottom,
footer .footer-bottom,
footer .t4s-footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  flex-wrap: wrap;
}

/* 3) Make sure the specific bits sit on each side */
footer .footer__copyright,
footer .t4s-footer-copyright { margin: 0 !important; order: 1; }

footer .footer__social,
footer .social-links,
footer .t4s-socials { margin-left: auto !important; text-align: right; order: 2; }

/* If your theme dims footer links, keep them visible */
footer .t4s-footer-bottom a,
footer .t4s-footer-bottom .t4s-socials * { opacity: 1 !important; }

/* ==== quick footer social fix ==== */
/* center the title over the icons */
.t4s-footer-fullbleed .hc-right {
  display: inline-flex;
  flex-direction: column;
  align-items: center;    /* center title and icons */
  justify-content: center;
}

/* make sure SVG icon shapes inherit color */
.t4s-footer-fullbleed .hc-ico svg,
.t4s-footer-fullbleed .hc-ico svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* subtle lift on hover (keeps existing background) */
.t4s-footer-fullbleed .hc-ico {
  transition: transform .12s ease, color .14s ease, background .14s ease;
}
.t4s-footer-fullbleed .hc-ico:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.02);
}

/* brand-color icon hover (colors the SVG via currentColor) */
.t4s-footer-fullbleed .hc-ico--fb:hover  { color: #1877F2 !important; } /* Facebook blue */
.t4s-footer-fullbleed .hc-ico--ig:hover  { color: #E1306C !important; } /* Instagram pink */
.t4s-footer-fullbleed .hc-ico--yt:hover  { color: #FF0000 !important; } /* YouTube red */
.t4s-footer-fullbleed .hc-ico--tt:hover  { color: #25F4EE !important; } /* TikTok cyan */


/* center "STAY IN TOUCH" above the icons */
.t4s-footer-fullbleed .hc-right {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;   /* center title + icons */
  justify-self: end !important;     /* keep the whole block right-aligned in the footer grid */
  gap: 8px !important;
}

.t4s-footer-fullbleed .hc-social-title {
  position: static !important;
  left: auto !important;
  transform: none !important;
  margin: 0 0 6px 0 !important;
  text-align: center !important;
  display: block !important;
  width: auto !important;
}


/* Prevent "STAY IN TOUCH" + icons from being clipped by scrollbar */
.t4s-footer-fullbleed .hc-right{
  margin-right: 16px !important;   /* leave a safe gap from the viewport edge/scrollbar */
  z-index: 2 !important;           /* ensure it's above any scrollbar overlays */
  box-sizing: border-box !important;
}

/* Keep the title on one line and centered above icons */
.t4s-footer-fullbleed .hc-social-title{
  white-space: nowrap !important;
  display: block !important;
  text-align: center !important;
}

/* Slightly reduce margin on narrow viewports so layout doesn't break */
@media (max-width: 1100px){
  .t4s-footer-fullbleed .hc-right{ margin-right: 12px !important; }
}
@media (max-width: 640px){
  .t4s-footer-fullbleed .hc-right{ margin-right: 0 !important; justify-self: center !important; }
}

/* SAFE RESTORE: force theme hero CTA visible & clickable */
a.t4s-full-width-link,
a.t4s-full-width-link > * ,
.t4s-bl-item,
.t4s-btn,
.t4s-bl-item .t4s-btn,
a.t4s-full-width-link .t4s-bl-item {
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
  color: inherit !important;
  background: initial !important;
  background-image: initial !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: auto !important;
  padding: initial !important;
  min-width: initial !important;
  min-height: initial !important;
}

/* Ensure no overlay pseudo-elements are active */
a.t4s-full-width-link::before,
a.t4s-full-width-link::after,
.t4s-bl-item::before,
.t4s-bl-item::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
}

/* QUICK RESTORE: make theme hero CTA visible & clickable again */
a.t4s-full-width-link,
a.t4s-full-width-link > * ,
.t4s-bl-item,
.t4s-btn,
.t4s-bl-item .t4s-btn,
a.t4s-full-width-link .t4s-bl-item {
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
  color: inherit !important;
  background: initial !important;
  background-image: initial !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: auto !important;
  padding: initial !important;
  min-width: initial !important;
  min-height: initial !important;
}

/* remove any overlay pseudo-elements leftover */
a.t4s-full-width-link::before,
a.t4s-full-width-link::after,
.t4s-bl-item::before,
.t4s-bl-item::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
}

/* ===== restore native product buttons & prevent overlays from blocking ===== */
/* Make product group buttons visible & clickable even if [hidden] was applied */
.t4s-pr-group-btns,
.t4s-pr-group-btns[hidden] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: block !important;
  height: auto !important;
}

/* Also ensure any buttons inside are clickable */
.t4s-pr-group-btns[hidden] button,
.t4s-pr-group-btns button {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* If there are hero/link pseudo-elements overlaying CTAs, hide them just for CTAs */
a.t4s-full-width-link::before,
a.t4s-full-width-link::after,
.t4s-bl-item::before,
.t4s-bl-item::after {
  display: none !important;
  content: none !important;
  pointer-events: none !important;
}

/* Product page: bigger Add to Cart */
.template-product .t4s-btn-atc,
.template-product .t4s-product-form__submit{
  width:100%!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  transform:none!important; zoom:1!important;
  font-size:22px!important; padding:16px 24px!important; min-height:56px!important;
  border-radius:9999px!important;
}
.template-product .t4s-btn-atc *{transform:none!important}

/* Optional: match dynamic checkout button */
.template-product .shopify-payment-button__button{
  width:100%!important; min-height:52px!important; border-radius:9999px!important;
}

/* Product page – ATC color + hover (solid, readable) */
.template-product .t4s-btn-atc,
.template-product .t4s-product-form__submit{
  width:100% !important;                 /* remove if not full width */
  display:flex!important;align-items:center!important;justify-content:center!important;
  transform:none!important;zoom:1!important;
  background:#2b2b2b!important;          /* default */
  color:#fff!important;border:none!important;box-shadow:none!important;
  font-size:18px!important;padding:16px 24px!important;min-height:56px!important;border-radius:12px!important;
}
.template-product .t4s-btn-atc:hover,
.template-product .t4s-product-form__submit:hover{background:#3c3c3c!important;color:#fff!important;filter:none!important}
.template-product .t4s-btn-atc *{transform:none!important}  /* neutralize theme animations */

/* ATC hover color on product pages */
.template-product .t4s-btn-atc:hover,
.template-product .t4s-product-form__submit:hover,
.template-product .t4s-btn-atc:focus,
.template-product .t4s-product-form__submit:focus {
  background: #C7D9E3 !important;
  color: #222 !important;          /* dark text for contrast */
  border-color: #C7D9E3 !important;
  filter: none !important;         /* stop theme darken effect */
}

/* Force ATC hover color and disable theme overlay */
.template-product .t4s-btn-atc:hover,
.template-product .t4s-product-form__submit:hover,
.template-product .t4s-btn-atc:focus,
.template-product .t4s-product-form__submit:focus{
  background:#C7D9E3 !important;
  color:#222 !important;
  border-color:#C7D9E3 !important;
  filter:none !important;
}

/* remove sweep/overlay pseudo-elements that repaint the button */
.template-product .t4s-btn-atc::before,
.template-product .t4s-btn-atc::after,
.template-product .t4s-product-form__submit::before,
.template-product .t4s-product-form__submit::after{
  content:none !important;
  background:none !important;
  border:0 !important;
}

/* make the cart icon follow the hover color too */
.template-product .t4s-btn-atc:hover svg,
.template-product .t4s-product-form__submit:hover svg,
.template-product .t4s-btn-atc:hover svg *,
.template-product .t4s-product-form__submit:hover svg *{
  fill:#222 !important; stroke:#222 !important;
}

/* Cart drawer: larger solid Checkout */
#t4s-mini_cart [name="checkout"],
.t4s-drawer [name="checkout"],
.t4s-mini_cart .t4s-btn-checkout{
  width:100%!important; display:flex!important; align-items:center!important; justify-content:center!important;
  min-height:56px!important; padding:16px 24px!important; font-size:18px!important; border-radius:12px!important;
  background:#2b2b2b!important; color:#fff!important; border:none!important; box-shadow:none!important; filter:none!important;
}
#t4s-mini_cart [name="checkout"]::before,
#t4s-mini_cart [name="checkout"]::after{content:none!important}
#t4s-mini_cart [name="checkout"]:hover{background:#C7D9E3!important; color:#222!important}

/* Product specs accordion styling (paste at bottom of theme css) */
.product-specs-area { color: #000 !important; font-size: 16px !important; line-height: 1.5 !important; margin-top: 1rem; }

/* Remove default marker (theme may hide it) and add our caret */
.product-specs-area summary { list-style: none; cursor: pointer; padding: 0.45rem 0; display: block; font-weight: 700; font-size: 1.05rem; color: inherit; position: relative; outline: none; }
.product-specs-area summary::-webkit-details-marker { display: none; }
.product-specs-area summary::before {
  content: '\25B6'; /* right-pointing triangle */
  display: inline-block;
  transform-origin: center;
  margin-right: 0.6rem;
  transition: transform .18s ease;
  font-size: 0.9rem;
  color: inherit;
}

/* rotate / switch to down triangle when open */
.product-specs-area details[open] > summary::before { content: '\25BC'; /* down triangle */ transform: none; }

/* body content */
.product-specs-area .specs-body { padding: 0.5rem 0 0.85rem 1.6rem; color: inherit; font-size: 1rem; }

/* keep lists readable */
.product-specs-area .specs-body ul,
.product-specs-area .specs-body ol { margin-left: 1.25rem; }

/* smaller screens */
@media (max-width: 749px) {
  .product-specs-area { font-size: 15px !important; }
  .product-specs-area summary { font-size: 1rem; }
}

/* Kalles – Dark mega menu (desktop only) */
@media (min-width:1025px){
  .t4s-site-nav .t4s-megamenu{
    --mega-bg:#151515;
    --mega-text:#ededed;
    --mega-muted:#bdbdbd;
    --mega-hover:#C7D9E3;

    background:var(--mega-bg) !important;
    color:var(--mega-text) !important;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    z-index:10001; /* keep above page content */
  }

  /* Links & hover */
  .t4s-site-nav .t4s-megamenu a{
    color:var(--mega-text) !important;
  }
  .t4s-site-nav .t4s-megamenu a:hover{
    color:var(--mega-hover) !important;
    background:transparent !important;
  }

  /* Column/section headings inside the mega */
  .t4s-site-nav .t4s-megamenu .t4s-menu__title,
  .t4s-site-nav .t4s-megamenu .menu-title{
    color:var(--mega-muted) !important;
    cursor:default;
  }

  /* Remove any white pointer/triangle */
  .t4s-site-nav .t4s-megamenu::before,
  .t4s-site-nav .t4s-megamenu::after{
    display:none !important;
  }

  /* If there are nested sub-menus, keep them dark too */
  .t4s-site-nav .t4s-megamenu .t4s-sub-menu{
    background:transparent !important;
  }
}

@media (min-width:1025px){
  .t4s-site-nav .t4s-megamenu[data-id="1"]{
    background:#151515 !important;
    color:#ededed !important;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
  }
  .t4s-site-nav .t4s-megamenu[data-id="1"] a{
    color:#ededed !important;
  }
  .t4s-site-nav .t4s-megamenu[data-id="1"] a:hover{
    color:#C7D9E3 !important;
    background:transparent !important;
  }
}

/* ---------- Active tab styling (top-level) ---------- */
.t4s-nav__ul>li>a{ position:relative } /* anchor for the underline */

@media (min-width:1025px){
  /* Strong underline + color for the active item */
  .t4s-nav__ul>li.is--nav__active> a{
    color: var(--h-text-color-hover) !important;
  }
  .t4s-nav__ul>li.is--nav__active> a::after{
    content:"";
    position:absolute;
    left:12px; right:12px; bottom:-6px; height:2px;
    background:#C7D9E3; border-radius:2px;
  }
}

/* Mobile drawer: clear left bar for the active item */
@media (max-width:1024.98px){
  .t4s-push-menu .is--nav__active > a{
    color:#C7D9E3 !important;
    border-left:3px solid #C7D9E3;
    padding-left:14px;
  }
}

/* ---------- Keep SHOP highlighted on shop pages ---------- */
/* Change the href below to your SHOP link (e.g., /collections/hoodies or /collections/all) */
body.template-collection .t4s-nav__ul>li>a[href="/collections/hoodies"],
body.template-product    .t4s-nav__ul>li>a[href="/collections/hoodies"]{
  color:#C7D9E3 !important;
}
body.template-collection .t4s-nav__ul>li>a[href="/collections/hoodies"]::after,
body.template-product    .t4s-nav__ul>li>a[href="/collections/hoodies"]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-6px; height:2px;
  background:#C7D9E3; border-radius:2px;
}

/* Strong, visible active tab */
.t4s-nav__ul>li>a{ position:relative }  /* anchor for underline */

@media (min-width:1025px){
  .t4s-nav__ul>li.is--nav__active> a{
    color:#111 !important;          /* dark text so it pops on grey header */
    font-weight:700 !important;      /* optional: make it bolder */
  }
  .t4s-nav__ul>li.is--nav__active> a::after{
    content:"";
    position:absolute; left:10px; right:10px; bottom:-8px;
    height:3px; border-radius:2px;
    background:#00A4FF;             /* pick your accent; try #00A4FF or #ffffff */
  }
}

/* Mobile drawer visibility */
@media (max-width:1024.98px){
  .t4s-push-menu .is--nav__active > a{
    color:#00A4FF !important;
    border-left:3px solid #00A4FF;
    padding-left:14px;
    font-weight:700;
  }
}

/* If you use a transparent header on the homepage, keep it readable over images */
html.is--header-transparent:not(.is-header--stuck) 
  .t4s-nav__ul>li.is--nav__active> a{ color:#fff !important; }
html.is--header-transparent:not(.is-header--stuck) 
  .t4s-nav__ul>li.is--nav__active> a::after{ background:#fff; }


/* Active tab underline = Subscribe button color (#C7D9E3) */
.t4s-nav__ul>li.is--nav__active>a::after{
  background:#C7D9E3 !important;
}

/* If you use a transparent header on the homepage, keep it the same */
html.is--header-transparent:not(.is-header--stuck)
  .t4s-nav__ul>li.is--nav__active>a::after{
    background:#C7D9E3 !important;
}

/* Hide contact fields after successful submit (keeps the success note visible) */
form[action*="/contact"]:has(.note.form-success) input,
form[action*="/contact"]:has(.note.form-success) textarea,
form[action*="/contact"]:has(.note.form-success) select,
form[action*="/contact"]:has(.note.form-success) button,
form[action*="/contact"]:has(.shopify-form-status) input,
form[action*="/contact"]:has(.shopify-form-status) textarea,
form[action*="/contact"]:has(.shopify-form-status) select,
form[action*="/contact"]:has(.shopify-form-status) button {
  display: none !important;
}

/* Optional: style Shopify's success message */
.note.form-success, .shopify-form-status {
  background:#113b2b; color:#d7ffe9; padding:12px 14px; border-radius:12px;
}

/* BAYAN – Sticky header (global) */
:root{
  --hdr-z: 10000;
  --hdr-bg: rgba(0,0,0,.55);      /* header background (edit) */
  --hdr-shadow: 0 6px 22px rgba(0,0,0,.18); /* scroll shadow (edit) */
}

/* We'll attach this class to your actual header element via JS */
.bayan-sticky-header{
  position: fixed;
  left: 0; right: 0; top: var(--header-offset, 0px);
  z-index: var(--hdr-z);
  width: 100%;
  background: var(--hdr-bg);
  backdrop-filter: saturate(160%) blur(6px);    /* subtle glass effect */
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  transition: box-shadow .25s ease, background .25s ease, top .2s ease;
}

/* Prevent content from sliding under the fixed header */
body.has-fixed-header{
  padding-top: calc(var(--header-offset, 0px) + var(--header-height, 72px));
}

/* Add a soft shadow once the user scrolls a bit */
body.scrolled .bayan-sticky-header{
  box-shadow: var(--hdr-shadow);
}

<style id="bayan-sticky-css-v2">
  :root{
    --bar-h: 0px;                /* set by JS if you use an announcement/top bar */
    --header-h: 80px;            /* updated by JS */
    --hdr-bg: rgba(0,0,0,.55);
    --hdr-shadow: 0 8px 24px rgba(0,0,0,.18);
  }

  /* Make sure the wrapper doesn’t clip the fixed header */
  .t4s-website-wrapper{ overflow: visible !important; }

  /* The actual header when fixed */
  .bayan-sticky-fixed{
    position: fixed !important;
    inset-inline: 0;
    top: var(--bar-h) !important;
    z-index: 10000 !important;
    width: 100%;
    background: var(--hdr-bg);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    transition: background .2s ease, box-shadow .2s ease, top .2s ease;
  }
  body.bayan-scrolled .bayan-sticky-fixed{ box-shadow: var(--hdr-shadow); }

  /* Spacer that preserves layout when we fix the header */
  #bayan-header-spacer{ height: var(--header-h); }

  /* Safety: if JS can’t run, try pure CSS sticky on common selectors */
  #t4s-header, .t4s-header, .shopify-section-header, header.site-header{
    position: sticky;
    top: 0;
    z-index: 9999;
  }
</style>

/* ---------- Out-of-stock button: make it red ---------- */
button[disabled],
button[aria-disabled="true"],
button.add-to-cart[disabled],
button.add-to-cart[aria-disabled="true"],
.button--sold-out,
.btn--sold-out,
.product-form__cart-submit:disabled,
.product-form__cart-submit[aria-disabled="true"],
.product-form--sold-out .product-form__cart-submit,
.product-form--sold-out .btn,
.product-form__submit--sold-out,
.add-to-cart.sold-out,
.soldout-button,
.sold-out-button {
  background: #d21b1b !important;   /* main red — change if you want different red */
  border-color: #b51717 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* keep it a bit smaller on phones so it doesn't overlap */
@media (max-width: 749px) {
  button[disabled],
  button[aria-disabled="true"],
  .product-form__cart-submit:disabled,
  .add-to-cart.sold-out {
    font-size: 15px !important;
    padding: 10px 14px !important;
  }
}

/* BAYAN – make the SAVE badge bigger and more pill-like */
.t4s-badge-price {
  display: inline-block !important;
  font-size: 1.2rem !important;        /* bigger text */
  padding: 0.25rem 1rem !important;  /* taller + wider pill */
  border-radius: 999px !important;     /* fully rounded */
  font-weight: 600 !important;         /* a bit bolder */
  letter-spacing: 0.04em !important;   /* more "badge" feel */
}

/* =========================
   CUSTOM OVERRIDES (LEONARD)
   Keep at end of file.
   ========================= */

/* Sold-out tooltip + strike-through */
.variant-input.soldout label,
input[type="radio"][disabled] + label,
.swatch__item--soldout label,
.swatch-element.soldout label {
  text-decoration: line-through;
  color: #c0392b;
  opacity: 0.7;
  cursor: not-allowed;
  position: relative;
}

.variant-input.soldout label::after,
input[type="radio"][disabled] + label::after,
.swatch__item--soldout label::after,
.swatch-element.soldout label::after {
  content: "Sold Out";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.variant-input.soldout label:hover::after,
input[type="radio"][disabled] + label:hover::after,
.swatch__item--soldout label:hover::after,
.swatch-element.soldout label:hover::after {
  opacity: 1;
}

/* Footer 3-col layout fix */
.t4s-footer-wrap.auto-3col .hc-grid{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:nowrap;
  box-sizing:border-box;
}
.t4s-footer-wrap.auto-3col .hc-grid > * { min-width:0; }
.hc-left{ flex:0 0 33%; max-width:33%; text-align:left; white-space:normal; overflow-wrap:break-word; }
.hc-center{ flex:0 0 34%; max-width:34%; display:flex; justify-content:center; align-items:center; text-align:center; }
.hc-right{ flex:0 0 33%; max-width:33%; display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:8px; }

@media (max-width: 980px){
  .t4s-footer-wrap.auto-3col .hc-grid{flex-wrap:wrap}
  .hc-left, .hc-center, .hc-right{flex-basis:100%;max-width:100%;text-align:center;align-items:center;justify-content:center}
  .hc-left{order:3;margin-top:12px}
  .hc-center{order:1;margin-bottom:8px}
  .hc-right{order:2;margin-bottom:8px;align-items:center}
  .hc-right .t4s-footer-content{justify-content:center}
}

/* BW pre-footer brand row */
.bw-brandrow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  transform:translate(var(--bw-x,0px),var(--bw-y,0px));
  flex-wrap:wrap
}
.bw-brandrow__logo{display:block;max-width:220px;height:auto;flex:0 0 auto}
.bw-brandrow__copy{line-height:1.25;font-size:14px;flex:1 1 260px;min-width:220px}
@media(max-width:749px){
  .bw-brandrow{flex-direction:column;align-items:flex-start;gap:10px}
  .bw-brandrow__logo{max-width:180px}
  .bw-brandrow__copy{font-size:13px;min-width:0}
}