/*====================================/
    FONT CDNS
=====================================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/tilt-warp');
/*====================================/
    ROOT STYLING
=====================================*/
:root {
    /* COLOR PALETTE */
    --body-font: "Inter", serif;
    --body-heading-font: "Inter", serif;
    --body-font-size: 16px;
    --body-background: #e4f1f7;
    
    /* COLOR PALETTE */
    --color-border: #cbcbcb;
    --color-primary: red;
    --color-text: black; /* Primary Text Color */
    --color-text-darker: #585858;
    --color-text-secondary: #ccc;
    --color-text-dark: #0D0D0D;
    --color-bg: #ffffff; /* CONTENT BG */
    --color-brighter-bg: var(--color-bg); /* CONTENT BG */
    
    /* CONTENT */
    --content-width: 1300px;
    --content-padding: 20px;
    
    /* FOOTER */
    --footer-watermark-width: 52px;
    --footer-background: #000;
    --footer-watermark: var(--color-text-darker);
    
    /* TEBEX FOOTER*/
    --tebex-legal-footer-max-width: var(--content-width);
    --tebex-legal-footer-background-color: black;
    --tebex-legal-footer-border-color: black;
    --tebex-legal-footer-text-color: white;
}
#loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-background);
    opacity: 1;
    z-index:5000;
}
/*====================================/
    BASE STYLING
=====================================*/
* {
    border-color: var(--color-border) !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--body-heading-font);
}
body {
    background: var(--body-background);
    font-family: var(--body-font);
    font-size: var(--body-font-size);
}
body::before {display: none;}
:root .btn-glyph:before {
    display: none !important;
}
.hidden {display: none !important;}
.quantity-field .adjust {
    font-size: 17px;
    color: var(--color-text);
}
.quantity-field .adjust:before,.quantity-field .adjust:after {
    display: none;
}
/*====================================/
    APP AND CONTENT
=====================================*/
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#content {
    flex: 1;
}
.container,  .tebex-template-container {
    max-width: var(--content-width);
    margin: 0 auto;
}
/*====================================/
    FOOTER AND WATERMARK
=====================================*/
#foot {
    color:white;
    background: var(--footer-background);
    font-weight: 600;
    border-bottom: 1px solid #1a1a1a !important;
}
#foot strong {
    font-weight: inherit;
}
#foot .copyright {
    padding: 48px 0px;
}
#foot .copyright #watermark {
    opacity:.65;
    width: var(--footer-watermark-width);
}
#foot .copyright #watermark path {
    fill: var(--footer-watermark);
}
#foot .copyright .container {
    display: flex;
    align-items: center;
}
#foot .copyright .right {
    margin-left: auto;
}
#foot .copyright .left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#foot .copyright .left p {
    font-size: 15px;
}
#foot .copyright .left small {
    color: var(--color-text-darker);
    font-size: 12px;
    display: block;
}

/*====================================/
    DEVICE COMPATABILITY
=====================================*/
@media only screen and (max-width: 768px) {
    .container,  .tebex-template-container {
        padding: 0 var(--content-padding) !important;
    }
}

/* ROOT STYLING */
:root {
    /* CONTENT */
    --button-border-radius: 7px;
    --button-large-border-radius: 12px;
}
.btn-primary, .btn-secondary, .btn-tertiary {
    border-radius: var(--button-border-radius) !important;
}
.relative {
    position: relative;
}
.dropdown-menu > a {
    display: block;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: bold;
}
.dropdown-menu {
    min-width: 150px;
    display: flex;
    flex-direction: column;
    position: absolute;
    background: #f3f3f3;
    margin-top: 10px;
    border-radius: 10px;
    border: 1px solid;
    overflow: hidden;
}
.dropdown-menu > a.active {
    background: #000000;
    color: white;
}
.currency .dropdown-menu {
    min-width: 92px;
    text-align: center;
}
.site-header, .site-sale-banner, .site-home-categories, .site-content, .site-footer-inner {
    padding: 0px !important;
}

/* MINI SIDEBAR */
@media only screen and (min-width: 768px) {
    .mini .basket-popup-content {
        overflow:hidden;
        border-radius: 8px;
        height: 58dvh !important;
    }
    .mini .basket-popup-content {
        translate: 0% -100px !important;
    }
    body:not(.mini) .basket-popup-content {
        max-width: 450px;
    }
}
.mini .basket-popup {
    left: 0 !important;
    margin: 0 auto !important;
}
.mini .basket .basket-checkout {
    padding-bottom: 30px !important;
}

.mini .basket-popup .popup-scroll-cont {
    justify-content: center !important;
}
/* Normal Basket */
.basket--header .left {
    display: flex;
    align-items: center;
    gap: 30px;
}
.basket--header .sidebarToggle {
    padding-left: 86px;
    cursor: pointer;
    color: white;
}
.basket .basket-checkout {
    padding-bottom: 30px !important;
}
.basket-popup-content {
    translate: 0 !important;
}
.basket-popup .popup-scroll-cont {
    background: #000000cc !important;
}
.basket .basket-second-header .basket-title {
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    gap: 5px;
}
.basket .basket-second-header .basket-title p {
    font-size: 13px;
}
.basket-avatar {
    max-width: 42px;
    border-radius: 10px;
    overflow: hidden;
}
.basket-avatar img {
    max-width: 100%;
}
.basket .basket-second-header {
    justify-content: flex-start !important;
    gap: 20px !important;
}
.basket .basket-second-header .count {
    margin-left: auto !important;
}
.basket .basket-second-header .basket-title p a {
    text-decoration: underline !important;
    color: #eb0000 !important;
}
.basket .basket-second-header .basket-title:before {
    display: none;
}
.basket .basket-second-header .basket-title {
    text-transform: capitalize;
    font-size: 17px !important;
}
.basket .basket-second-header {
    padding: 25px 20px !important;
    border-bottom: 1px solid;
}
.basket .basket-second-header .count {
    font-size: 15px !important;
    font-weight: 600 !important;
}
.basket .basket-item {
    border: 1px solid;
}
.basket .basket-item .price {
    font-size: 12px !important;
    margin-top: 2px !important;
    font-weight: 600 !important;
}
.basket .basket-item .price strong {
    font-size: inherit !important;
}
/* Package/card price - overrides platform shared.css */
.store-product .price,
.store-product .actions .price {
    font-size: 17px !important;
}
.store-product .price strong {
    font-size: 17px !important;
}
.basket .basket-item .title {
    font-size: 17px !important;
}
.basket .basket-checkout .total strong {
    font-weight: 800 !important;
    font-size: 22px !important;
}
.basket .basket-checkout .checkout {
    padding: 12px !important;
    height: auto !important;
    background: black !important;
    color: white !important;
}
.basket-item .btn-secondary {height: 40px;}
.basket .basket-item .remove {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    background: #000000 !important;
}
.basket--header {
    height: 55px;
    display: flex;
    align-items: center;
    background: #000000;
    padding: 0 20px;
}
.basket .cart-btn i {
    font-size: 13px;
    opacity: .75;
}
.basket .cart-btn i.fa-angle-down {
    margin-left: -2px;
    font-size: 12px;
}
.cart-btn {
    gap: 10px;
    cursor:pointer;
}
.basket-popup .popup-close, .cart-btn {
    font-weight: 600 !important;
    background: transparent !important;
    font-size: 14px !important;
    width:auto;
    height: 55px;
    display: flex;
    align-items: center;
    color: white !important;
    opacity: 1 !important;
}
.basket-popup-content .popup-close {
    background: none;
    color: black;
    right: 20px;
}
.basket-popup-content .popup-close:before {
    content: "x";
    margin-right: 10px;
    position: relative;
    top: -2px;
    font-size: 16px;
    opacity: .65;
}

/* */


.wrapper--art:before {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    background-color: inherit;
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
    mask-position: bottom;
    -webkit-mask-position: bottom;
}
.blocky:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="5.23" viewBox="0 0 38.22 5.23"><rect width="38.22" height="5.23" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="5.23" viewBox="0 0 38.22 5.23"><rect width="38.22" height="5.23" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 110px 8px;
    mask-size: 110px 8px;
    height: 8px;
    top: -8px;
}
.pointedSm:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="110.128" height="8.291" viewBox="0 0 110.128 8.291"><polygon points="55.064 .658 0 8.291 55.064 8.291 110.128 8.291 55.064 .658" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="110.128" height="8.291" viewBox="0 0 110.128 8.291"><polygon points="55.064 .658 0 8.291 55.064 8.291 110.128 8.291 55.064 .658" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 110px 8px;
    mask-size: 110px 8px;
    height: 8px;
    top: -8px;
}
.pointed:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="12.911" viewBox="0 0 181.383 12.911"><polygon points="90.691 0 0 12.911 90.691 12.911 181.383 12.911 90.691 0" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="12.911" viewBox="0 0 181.383 12.911"><polygon points="90.691 0 0 12.911 90.691 12.911 181.383 12.911 90.691 0" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 181px 12px;
    mask-size: 181px 12px;
    height: 12px;
    top: -12px;
}
.puzzle:before {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    top: auto !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 24" preserveAspectRatio="none"><path d="M0 0H10V8H20V0H30V8H40V0H50V8H60V0H70V8H80V0H90V8H100V0H110V8H120V0H130V8H140V0H150V8H160V0H170V8H180V0H190V8H200V0H210V8H220V0H230V8H240V0H250V8H260V0H270V8H280V0H290V8H300V0H310V8H320V0H330V8H340V0H350V8H360V0H370V8H380V0H390V8H400V0V24H0Z" fill="%23252d3c"/></svg>') no-repeat bottom !important;
    background-size: 100% 24px !important;
    -webkit-mask: none !important;
    mask: none !important;
}
.curveSm:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="7.009" viewBox="0 0 76 7.009"><path d="m63.752,5.662c-6.966-1.487-10.52-3.518-18.55-4.82-3.048-.494-5.565-.692-7.202-.783-1.638.09-4.155.289-7.202.783-8.03,1.302-11.584,3.333-18.55,4.82C9.392,6.271,5.215,6.949,0,7.009h76c-5.215-.06-9.392-.738-12.248-1.348Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="7.009" viewBox="0 0 76 7.009"><path d="m63.752,5.662c-6.966-1.487-10.52-3.518-18.55-4.82-3.048-.494-5.565-.692-7.202-.783-1.638.09-4.155.289-7.202.783-8.03,1.302-11.584,3.333-18.55,4.82C9.392,6.271,5.215,6.949,0,7.009h76c-5.215-.06-9.392-.738-12.248-1.348Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 76px 7px;
    mask-size: 76px 7px;
    height: 7px;
    top: -7px;
}
.curve:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="140.957" height="15.743" viewBox="0 0 140.957 15.743"><path d="m118.242,12.69c-12.92-3.368-19.511-7.969-34.405-10.917-5.652-1.119-10.321-1.568-13.358-1.773-3.038.205-7.706.654-13.358,1.773-14.894,2.948-21.485,7.549-34.405,10.917-5.296,1.381-13.044,2.916-22.715,3.053h140.957c-9.672-.137-17.42-1.672-22.716-3.053Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="140.957" height="15.743" viewBox="0 0 140.957 15.743"><path d="m118.242,12.69c-12.92-3.368-19.511-7.969-34.405-10.917-5.652-1.119-10.321-1.568-13.358-1.773-3.038.205-7.706.654-13.358,1.773-14.894,2.948-21.485,7.549-34.405,10.917-5.296,1.381-13.044,2.916-22.715,3.053h140.957c-9.672-.137-17.42-1.672-22.716-3.053Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 140px 15px;
    mask-size: 140px 15px;
    height: 15px;
    top: -15px;
}
.curveLg:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="20.257" viewBox="0 0 181.383 20.257"><path d="m152.153,16.329c-16.626-4.334-25.107-10.254-44.272-14.048-7.273-1.44-13.28-2.018-17.189-2.281-3.909.264-9.916.842-17.189,2.281-19.165,3.794-27.647,9.714-44.272,14.048-6.815,1.777-16.785,3.752-29.23,3.928h181.383c-12.446-.176-22.415-2.151-29.23-3.928Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="20.257" viewBox="0 0 181.383 20.257"><path d="m152.153,16.329c-16.626-4.334-25.107-10.254-44.272-14.048-7.273-1.44-13.28-2.018-17.189-2.281-3.909.264-9.916.842-17.189,2.281-19.165,3.794-27.647,9.714-44.272,14.048-6.815,1.777-16.785,3.752-29.23,3.928h181.383c-12.446-.176-22.415-2.151-29.23-3.928Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 181px 20px;
    mask-size: 181px 20px;
    height: 20px;
    top: -20px;
}
.waveXs:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="7.2" viewBox="0 0 38.22 7.2"><path d="m19.11,7.17C4.85,6.86,0,0,0,0v7.2h38.22V0s-4.85,6.86-19.11,7.17Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="7.2" viewBox="0 0 38.22 7.2"><path d="m19.11,7.17C4.85,6.86,0,0,0,0v7.2h38.22V0s-4.85,6.86-19.11,7.17Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 37px 7px;
    mask-size: 37px 7px;
    height: 7px;
    top: -7px;
}
.waveSm:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="8.733" viewBox="0 0 76 8.733"><path d="m38,0h0s0,0,0,0h0C25.644,8.733,0,8.703,0,8.703v.029h76v-.029S50.356,8.733,38,0Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="8.733" viewBox="0 0 76 8.733"><path d="m38,0h0s0,0,0,0h0C25.644,8.733,0,8.703,0,8.703v.029h76v-.029S50.356,8.733,38,0Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 76px 8px;
    mask-size: 76px 8px;
    height: 8px;
    top: -8px;
}
.wave:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="11.584" viewBox="0 0 76 11.584"><path d="m38.034.029v-.029c-.005.005-.011.01-.017.015-.005-.005-.011-.01-.017-.015v.029C25.631,11.583.034,11.56.034,11.56v.024h75.966v-.024s-25.598.023-37.966-11.531Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="11.584" viewBox="0 0 76 11.584"><path d="m38.034.029v-.029c-.005.005-.011.01-.017.015-.005-.005-.011-.01-.017-.015v.029C25.631,11.583.034,11.56.034,11.56v.024h75.966v-.024s-25.598.023-37.966-11.531Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 76px 11px;
    mask-size: 76px 11px;
    height: 11px;
    top: -11px;
}
.waveLg:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="144" height="21.958" viewBox="0 0 144 21.958"><path d="m72.032.056v-.056c-.01.01-.022.018-.032.028-.01-.01-.021-.018-.032-.028v.056C62.241,21.316,0,21.913,0,21.913v.045h144v-.045S81.759,21.316,72.032.056Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="144" height="21.958" viewBox="0 0 144 21.958"><path d="m72.032.056v-.056c-.01.01-.022.018-.032.028-.01-.01-.021-.018-.032-.028v.056C62.241,21.316,0,21.913,0,21.913v.045h144v-.045S81.759,21.316,72.032.056Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 144px 21px;
    mask-size: 144px 21px;
    height: 21px;
    top: -21px;
}