:root {
	--clr-dark	            : #10212E; /* Partner Loyal */
	--clr-dark-rgb          : 16, 33, 46; /* Partner Loyal rgb */
	--clr-light		        : #DCE2F0; /* Blueprint */
	--clr-light-rgb         : 220, 226, 240; /* Blueprint rgb */
	--clr-pantone		    : #A47864; /* ExpoMocha */
	--clr-copper		    : #C39469; /* ExpoCopper */
 
    --clr-black             : #000000; /* BlackBlack */
    --clr-black-80          : #1E1E1E; /* StandBlack */
    --clr-black-70          : #222233; /* Exhibit Twilight */
    --clr-black-70-rgb      : 34, 34, 51;
    --clr-white             : #ffffff; /* ShowFloor White */

    --clr-mint              : #73B490;
    --clr-mint-rgb          : 115, 180, 144;
    --clr-lighter           : #f7f8fa;
    --clr-lighter-rgb       : 247, 248, 250;

    --clr-danger            : #FF3B30;
    --clr-danger-rgb        : 255, 59, 48;
    --clr-border            : var(--clr-light);

    --gradient-1            : linear-gradient(var(--gradient-direction, 90deg), var(--clr-dark) 0%, #243445 33%, #496D8E 66%, var(--clr-pantone) 100%);

    --gradient-2            : linear-gradient(var(--gradient-direction, 90deg), var(--clr-dark) 0%, #243445 33%, #496D8E 66% );
    
    
    --gradient-2-scaled: linear-gradient(
        var(--gradient-direction, 90deg),
        
        var(--clr-dark) 0%,
        #243445 10%,
        #496D8E 35%,
        #496D8E 65%,
        #243445 90%,
        var(--clr-dark) 100%
        );
        
    --gradient-3            : linear-gradient(var(--gradient-direction, 90deg), #151F28 0%, var(--clr-copper) 100% );
        
    --gradient-4            : linear-gradient(var(--gradient-direction, 90deg), #A98D74 0%, #E6C09C 33%, #E6C09C 66%, #A98D74 100% );
    
    --overlay-1             : linear-gradient(var(--gradient-direction, 125deg), var(--clr-black-70), transparent);  

    --font-primary          : IBM Plex Sans, sans-serif;

    --global-ts-duration    : 250ms;
    --global-ts-function    : cubic-bezier(.58,.22,.2,.96);

    --swiper-theme-color    : #007aff
}

*, :after, :before { box-sizing: border-box; }
html { scroll-padding-top: 120px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; cursor: default; line-height: 1.5; scroll-behavior: smooth; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0 }

.material-symbols-rounded, .material-symbols-sharp { font-weight: 300; }

@media (min-width: 992px) {
    html { scroll-padding-top: 162px; }
}

/* ---------- Trustedshops ---------- */
.trustedshops { position: relative; display: flex; align-items: center; column-gap: 18px; background: var(--gradient-4); padding: 8px 16px; }
.trustedshops .trustedshops__score { display: flex; align-items: center; font-size: 15px; white-space: nowrap; }
.trustedshops .trustedshops__score i { --w: 19px; --h: 19px; margin-right: 10px; }  
.trustedshops .trustedshops__description { border-left: 1px solid var(--clr-dark); padding-left: 20px; font-size: 10px; line-height: 1.2; display: flex; flex-direction: column; flex-grow: 1; }
.trustedshops a { display: inline-flex; }
.trustedshops a::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* ---------- Social media ---------- */
.socials { display: flex; gap: 8px; margin-bottom: 32px }
.socials__social { align-items: center; background-color: #fff; border: 12px solid #fff; border-radius: 50%; color: var(--clr-copper); display: inline-flex; font-size: 24px; height: 48px; justify-content: center; width: 48px }

/* ---------- Containers ---------- */
@media (min-width: 1400px) {
    .container { max-width: calc(1250px + var(--bs-gutter-x)); }
}

/* ---------- Typography ---------- */
.wpb-text { --mt: 1em; font-size: 15px; line-height: 1.2; color: var(--clr-dark); }
.wpb-text p { line-height: 1.4; }
.wpb-text > * { margin: 0; }
.wpb-text > * + * { margin-top: var(--mt); }
.wpb-text .check-list { --mt: 2em; }
.wpb-text .check-list + .btn-group { --mt: 3em; }

.wpb-text p:has(+ :is(h1, h2, h3)) em { font-style: normal; color: var(--clr-copper); text-transform: uppercase; font-size: 14px; }
.wpb-text p:has(em) + :is(h1, h2, h3) { --mt: .5em; }
.wpb-text p:has(strong) + ul.check-list { --mt: .5em; }

.check-list { list-style: none; padding: 0; }
.check-list li { font-weight: 700; display: flex; align-items: center; gap: 10px; } 
.check-list li + li { margin-top: 10px; }
.check-list li i { font-weight: 600; color: var(--clr-copper); } 
.check-list.check-list--inline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.check-list.check-list--inline li { display: inline-flex; margin-top: 0!important; gap: 5px; }
.check-list.check-list--strong li { text-transform: uppercase; font-weight: 700; font-style: italic; }
.check-list.check-list--strong li i { font-size: 20px; font-weight: 700; }
.check-list.check-list--light li { font-weight: 400; }
.check-list.check-list--light li i { font-size: 18px; color: var(--clr-dark); } 

.steps { list-style: none; padding: 0; }
.steps .step { display: flex; align-items: center; padding: 17px 0; column-gap: 20px; }
.steps .step + .step { border-top: 1px solid var(--clr-light); }
.steps .step .step__number { font-weight: 700; font-size: 4em; }
.steps .step p { margin: 0; }
.steps .step:nth-child(2) .step__number { background: -webkit-linear-gradient(#10212E, #496D8E); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.steps .step:nth-child(n+2) .step__number { color: #496D8E; }

.wpb-text-collapse .wpb-text-collapse__body { position: relative; overflow: hidden; transition: height 0.3s ease-out; }
.wpb-text-collapse.collapsed .wpb-text-collapse__body { height: 200px; }
.wpb-text-collapse__toggle { display: none; cursor: pointer; font-weight: bold; margin-top: 10px; position: relative; z-index: 1; }
.wpb-text-collapse__toggle span { text-decoration: underline; }
.wpb-text-collapse.collapsed .wpb-text-collapse__toggle--open { display: inline-block; }
.wpb-text-collapse.collapsed .wpb-text-collapse__toggle--close { display: none; }
.wpb-text-collapse.expanded .wpb-text-collapse__toggle--open { display: none; }
.wpb-text-collapse.expanded .wpb-text-collapse__toggle--close { display: inline-block; }

/* ---------- Dropdown ---------- */
.wpb-dropdown { position: relative; }
.wpb-dropdown .wpb-dropdown__menu { opacity: 0; pointer-events: none; position: absolute; top: 100%; left: 0; min-width: max-content; background-color: #fff; border: 1px solid rgba(var(--clr-border)); padding: 10px; }
.wpb-dropdown .wpb-dropdown__menu--right { left: auto; right: 0; }
.wpb-dropdown .wpb-dropdown__menu ul { list-style: none; padding: 0; margin: 0; }
.wpb-dropdown .wpb-dropdown__menu ul .dropdown-item { font-size: 13px; white-space: nowrap; display: flex; align-items: center; gap: 5px; text-decoration: none; }
.wpb-dropdown .wpb-dropdown__menu ul .dropdown-item:hover { opacity: 1; }
.wpb-dropdown.wpb-dropdown__left .wpb-dropdown__menu { top: 0; right: 0; left: auto; } 
.wpb-dropdown.wpb-dropdown__right .wpb-dropdown__menu { top: 0; left: 0; right: auto; } 
.wpb-dropdown .wpb-dropdown__toggle { cursor: pointer; font-size: 13px; height: 100%; display: flex; align-items: center; white-space: nowrap; gap: 3px; }
.wpb-dropdown .wpb-dropdown__toggle i { font-size: 10px; }  
.wpb-dropdown .wpb-dropdown__toggle[aria-expanded="true"] + .wpb-dropdown__menu { opacity: 1; pointer-events: all; z-index: 850; }  

/*** ---------- backdrop ---------- ***/
.wpb-backdrop { background: linear-gradient(rgba(0, 0, 0, .39), rgba(0, 0, 0, .14)); backdrop-filter: blur(24px); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900; opacity: 0; pointer-events: none; transition: opacity 150ms ease; }    
.wpb-backdrop.active { opacity: 1; pointer-events: all; }
.wpb-backdrop.wpb-backdrop--search { background: transparent; backdrop-filter: blur(0); }

/* ---------- Buttons ---------- */
.btn-group { display: flex; flex-wrap: wrap; gap: 5px 17px; position: relative; align-items: center; }

.btn, .gform_wrapper .gform_submit { 
    --fs: 15px; 
    --lh: 1; 
    --p: 0 14px; 
    --br: 3px; 
    --gap: 10px;

    --clr: #fff; --bg-clr: var(--clr-dark); --border: none; --box-shadow: none; 
    --hover-clr: var(--clr); --hover-bg-clr: var(--bg-clr); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow); 
    --focus-clr: var(--hover-clr); --focus-bg-clr: var(--hover-bg-clr); --focus-border: var(--hover-border); --focus-box-shadow: var(--hover-box-shadow); 
    --active-clr: var(--focus-clr); --active-bg-clr: var(--focus-bg-clr); --active-border: var(--focus-border); --active-box-shadow: var(--focus-box-shadow); 

    text-transform: uppercase; font-weight: 600; display: inline-flex; justify-content: center; align-items: center; min-height: 40px; gap: var(--gap); font-size: var(--fs); line-height: var(--lh); padding: var(--p); color: var(--clr); background: var(--bg-clr); border-radius: var(--br); border: var(--border); box-shadow: var(--box-shadow); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; 

    transition-duration: var(--global-ts-duration); transition-timing-function: var(--global-ts-function);

    position: relative; font-family: var(--font-primary); webkit-transition-property: padding, color, background, border-color, -webkit-box-shadow; transition-property: padding, color, background, border-color, box-shadow, -webkit-box-shadow;
}

.btn.btn--primary { --bg-clr: transparent; z-index: 1; }
.btn.btn--primary::after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: var(--br); background: var(--gradient-2-scaled); background-size: 200% 100%; background-position: 0%; transition-property: background-position; transition-duration: 600ms; transition-timing-function: var(--global-ts-function); }  
.btn.btn--primary:hover::after { background-position: 100%; }

.btn span:not(.material-symbols-sharp, .material-symbols-rounded) { font: inherit; color: inherit; z-index: 1; }
.btn i { --clr: inherit; z-index: 1; }
.btn:hover, .gform_wrapper .gform_submit:hover { color: var(--hover-clr)!important; background: var(--hover-bg-clr)!important; border: var(--hover-border)!important; box-shadow: var(--hover-box-shadow)!important; }
.btn:hover i { --clr: var(--hover-clr); }
.btn:focus, .gform_wrapper .gform_submit:focus { color: var(--focus-clr)!important; background: var(--focus-bg-clr)!important; border: var(--focus-border)!important; box-shadow: var(--focus-box-shadow)!important; }
.btn:focus i { --clr: var(--focus-clr); }
.btn:active, .gform_wrapper .gform_submit:active { color: var(--active-clr)!important; background: var(--active-bg-clr)!important; border: var(--active-border)!important; box-shadow: var(--active-box-shadow)!important; }
.btn:active i { --clr: var(--active-clr); }
.btn:after { display: none; }
.btn.is-disabled { pointer-events: none; opacity: .5; }

.btn.btn--arrow:hover .wpb-icon.wpb-icon--top-right { transform: rotate(45deg); } 

.btn.btn--white { --bg-clr: #fff; --clr: var(--clr-dark); }
.btn.btn--outline { --bg-clr: transparent; --clr: #fff; --box-shadow: inset 0 0 0 1px #fff; --focus-box-shadow: inset 0 0 0 1px #fff; }
.btn.btn--outline-light { --bg-clr: transparent; --clr: var(--clr-text); --box-shadow: inset 0 0 0 1px var(--clr-light); --hover-box-shadow: inset 0 0 0 1px var(--clr-dark); }
.btn.btn--outline-dark { --bg-clr: transparent; --clr: var(--clr-text); --box-shadow: inset 0 0 0 1px var(--clr-dark); --focus-box-shadow: inset 0 0 0 1px var(--clr-dark); --hover-bg-clr: var(--clr-dark); --hover-clr: #fff; }

.btn.btn--link { font-size: 15px; --bg-clr: transparent; text-transform: none; --p: 0; min-height: auto; }
.btn.btn--link i { --w: 10px; --h: 10px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background-color: var(--clr-copper); }  
.btn.btn--link-animated { position: relative; min-height: 28px; padding-left: 34px; display: inline-flex; }
.btn.btn--link-animated .wpb-icon { position: absolute; left: 0; top: 0; transition-property: left, transform; transition-duration: var(--global-ts-duration); transition-timing-function: var(--global-ts-function); }
.btn.btn--link-animated:hover { padding-left: 0; padding-right: 34px; }
.btn.btn--link-animated:hover .wpb-icon { left: calc(100% - 28px); }

.btn.btn--link-secondary { font-size: 15px; --clr: var(--clr-dark); --bg-clr: transparent; text-transform: none; --p: 0; min-height: auto; }
.btn.btn--link-secondary .material-symbols-sharp { font-size: 20px; }  
.btn.btn--link-secondary:hover .material-symbols-sharp { font-size: 20px; }

.btn.btn--link-primary { font-size: 15px; --clr: var(--clr-dark); --bg-clr: transparent; text-transform: none; --p: 0; min-height: auto; }
.btn.btn--link-primary i { --w: 10px; --h: 10px; display: inline-grid; place-items: center; min-width: 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--gradient-2); }  
.btn.btn--link-primary i::after { background: #fff; }
.btn.btn--link-primary:hover i::after { transform: rotate(45deg); }

.btn--small { --fs: 14px; --p: 0 12px; min-height: 32px; }
.btn--large, .hero__button { --fs: 18px; min-height: 40px; }

.btn--primary, .gform_wrapper .gform_submit, form .upload__button { --br: 3px; padding: var(--p); min-height: 40px; }

.btn.btn--square { --p: 0; aspect-ratio: 1/1; }

@media (min-width: 992px) {
    .btn--large, .hero__button { --fs: 20px; min-height: 50px; }
}

/*** ---------- Badge ---------- ***/
.badge-group { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 4px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.badge { --fs: 12px; --lh: 1; --p: 3px 5px; --clr: #fff; --bg-clr: var(--clr-dark); --br: 3px; --border: none; --box-shadow: none; --hover-clr: var(--clr); --hover-bg-clr: var(--bg-clr); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow); display: inline-block; font-size: var(--fs); text-transform: uppercase; font-weight: 700; line-height: var(--lh); padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); box-shadow: var(--box-shadow); text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); transition-property: color, background-color, border-color, box-shadow; }
.badge:hover { color: var(--hover-clr); background-color: var(--hover-bg-clr); border: var(--hover-border); box-shadow: var(--hover-box-shadow); }
/* ---------- Forms ---------- */
form input[type=email], form input[type=number], form input[type=password], form input[type=tel], form input[type=text], form select, form textarea { font-weight: 400!important; }   

.form-switch { display: flex; align-items: center; column-gap: 14px; }
.form-switch .form-check-input { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; min-width: 40px; height: 25px; background-color: var(--clr-dark); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: left center; border-radius: 40px; transition-property: background-color, background-position; transition-duration: var(--global-ts-duration); transition-timing-function: ease; }
.form-switch .form-check-input:checked { background-color: var(--clr-copper); background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-label { user-select: none; cursor: pointer; font-weight: 400; }

/*** ---------- Icons ---------- ***/
.wpb-icon { --src: ; --clr: var(--clr-dark); --w: 14px; --h: 14px; display: inline-flex; background: transparent; transition-property: transform, background-color; transition-duration: var(--global-ts-duration); transition-timing-function: var(--global-ts-function); }
.wpb-icon::after { content:''; -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; display: inline-block; width: var(--w); height: var(--h); min-width: var(--w); min-height: var(--h); background-color: var(--clr); transition-property: transform, background-color; transition-duration: var(--global-ts-duration); transition-timing-function: var(--global-ts-function); }
.wpb-icon.wpb-icon--top-right { --src: url('/wp-content/themes/socialbrothers/wux/assets/icons/arrow_top_right.svg'); }
.wpb-icon.wpb-icon--chevron-left { --src: url('/wp-content/themes/socialbrothers/wux/assets/icons/chevron_left.svg'); }
.wpb-icon.wpb-icon--chevron-right { --src: url('/wp-content/themes/socialbrothers/wux/assets/icons/chevron_right.svg'); }
.wpb-icon.wpb-icon--trustedshops { --src: url('/wp-content/themes/socialbrothers/wux/assets/icons/trustedshops.svg'); }
.wpb-icon.wpb-icon--star-rating { --src: url('/wp-content/themes/socialbrothers/wux/assets/icons/star_rating.svg'); --w: 40px; --h: 8px; }
.wpb-icon.wpb-icon--swipe { --src: url('/wp-content/themes/socialbrothers/wux/assets/icons/icon_swipe.svg'); --w: 30px; --h: 40px; }
.wpb-icon.wpb-icon--expox { --src: url('/wp-content/themes/socialbrothers/wux/assets/icons/expo-x.svg'); --w: 240px; --h: 350px; --clr: rgba(var(--clr-light-rgb), .5); }

/* ---------- Whitespace ---------- */
[class*="wpb-wst"] { padding-top: var(--pt, 0); }
[class*="wpb-wsb"] { padding-bottom: var(--pb, 0); }

.wpb-wst--small { --pt: 54px; }
.wpb-wsb--small { --pb: 54px; }
.wpb-wst--medium { --pt: 40px; } 
.wpb-wsb--medium { --pb: 40px; }
.wpb-wst--large { --pt: 54px; } 
.wpb-wsb--large { --pb: 54px; }

@media(min-width: 1200px) {
    .wpb-wst--small { --pt: 40px; } 
    .wpb-wsb--small { --pb: 40px; }
    .wpb-wst--medium { --pt: 60px; }
    .wpb-wsb--medium { --pb: 60px; }
    .wpb-wst--large { --pt: 100px; }
    .wpb-wsb--large { --pb: 100px; }
}

@media(min-width: 1400px) {
    .wpb-wst--small { --pt: 60px; }
    .wpb-wsb--small { --pb: 60px; }
    .wpb-wst--medium { --pt: 80px; } 
    .wpb-wsb--medium { --pb: 80px; }
    .wpb-wst--large { --pt: 150px; } 
    .wpb-wsb--large { --pb: 150px; }
}

/*** ---------- Cards ---------- ***/
.card { --br: 6px; --p: 16px; border-radius: var(--br); list-style: none; }
.card .card-header picture { display: flex; width: 100%; height: 100%; }
.card .card-header picture img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--br) var(--br) 0 0; }
.card .card-body { padding: var(--p); }
.card .card-footer { padding: 0 var(--p) var(--p) var(--p); }

.card.card--blurb { position: relative; }
.card.card--blurb::before { content: ''; display: block; padding-top: 159%; }
.card.card--blurb .card-header { border-radius: var(--br); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; overflow: clip; }
.card.card--blurb .card-header::after { content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--br); background: linear-gradient(to top, rgba(34, 34, 51, .62) 0%, rgba(34, 34, 51, .0) 100%); } 
.card.card--blurb .card-header picture img { border-radius: var(--br); }
.card.card--blurb .card-body { position: absolute; top: auto; right: 0; bottom: 0; left: 0; z-index: 2; }  
.card.card--blurb .card-title { font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 700; }
.card.card--blurb .card-description { font-size: 15px; color: #fff; margin-top: 10px; }

.card.card--category { display: flex; align-items: end; min-height: 120px; position: relative; border: 1px solid rgba(255,255,255,.2); background-color: rgba(255,255,255,.16); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: background-color var(--global-ts-duration) var(--global-ts-function); }
.card.card--category .card-header { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.card.card--category .card-header img { object-position: left; width: 100%; height: 100%; object-fit: contain; }
.card.card--category .card-body { width: 100%; z-index: 1; text-align: right; }
.card.card--category .card-body a { display: inline-flex; align-items: center; column-gap: 5px; font-size: 15px; color: #fff; text-transform: uppercase; font-style: italic; font-weight: 700; }
.card.card--category .card-body a i { --w: 12px; --h: 12px; --clr: #fff; }
.card.card--category .card-body a:hover i { transform: rotate(45deg); }
.card.card--category .card-body a::before { content:''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.card.card--category:hover { background-color: rgba(0,0,0,.1); }

.card.card--inspiration { position: relative; }
.card.card--inspiration .card-header { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.card.card--inspiration .card-header img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--br); }
.card.card--inspiration .card-body { background: linear-gradient(to top, rgba(var(--clr-black-70-rgb), .75) 0%, rgba(var(--clr-black-70-rgb), 0) 50%); border-radius: var(--br); position: relative; z-index: 1; display: flex; align-items: end; column-gap: 20px; justify-content: space-between; min-height: 197px; transition: backdrop-filter var(--global-ts-duration) var(--global-ts-function); }
.card.card--inspiration .card-body i { width: 27px; height: 27px; min-width: 27px; min-height: 27px; border-radius: 50%; background-color: #fff; display: grid; place-items: center; --clr: var(--clr-dark); --w: 11px; --h: 11px; transition-property: transform, background-color, width, height, min-width, min-height; }
.card.card--inspiration .card-body i::after { transition-property: transform, background-color, width, height, min-width, min-height; }
.card.card--inspiration .card-body .card-title { text-transform: uppercase; font-size: 14px; color: #fff; font-weight: 600; }
.card.card--inspiration:hover .card-body { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.card.card--inspiration:hover .card-body i { transform: rotate(45deg); width: 40px; height: 40px; min-width: 40px; --w: 18px; --h: 18px; }

.card.card--page-link { position: relative; z-index: 1; padding: 0; overflow: clip; min-height: 90px; background-color: var(--clr-dark); }
.card.card--page-link .card__header { z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.card.card--page-link .card__header img { width: 100%; height: 100%; object-fit: cover; }
.card.card--page-link .card__body { font-style: italic; display: flex; height: 100%; align-items: end; justify-content: start; column-gap: 6px; padding: 14px 20px; font-size: 16px; color: #fff; line-height: 1; font-weight: 700; text-transform: uppercase; background: var(--overlay-1); }
.card.card--page-link .card__body .wpb-icon { --clr: #fff; transition-property: transform, background-color; transition-duration: var(--global-ts-duration); transition-timing-function: var(--global-ts-function); }
.card.card--page-link:hover .card__body .wpb-icon { transform: rotate(45deg); }

.card.card--blog { --br: 0; }
.card.card--blog .card-header img { aspect-ratio: 16 / 12; }
.card.card--blog .card-body { padding-inline: 0; }
.card.card--blog .card-body h3 { margin: 0; }

.card.card--page { border: 1px solid var(--clr-light); }
.card.card--page h3 { margin: 0; font-size: 16px; }

.card.card--cta { --p: 20px; --br: 3px; display: grid; grid-template-columns: 1fr 139px; background-color: var(--clr-light); margin-top: 100px; }
.card.card--cta .card-header { overflow: inherit; display: flex; position: relative; justify-content: center; }  
.card.card--cta .card-header img { position: absolute; right: 0; bottom: 0; left: 0; width: 139px; height: 175px; object-fit: contain; object-position: bottom; }
.card.card--cta .card-body .card-title { font-size: 15px; font-weight: 700; }
.card.card--cta .card-body a { display: block; font-size: 15px; width: 100%; }
.card.card--cta .card-footer { padding: 0; grid-column: span 2; }
.card.card--cta .trustedshops { border-radius: 0 0 var(--br) var(--br); }

.card.card--specifications { position: relative; color: #fff; text-align: center; }
.card.card--specifications .card-header { min-height: 100px; }
.card.card--specifications .card-body { padding: 43px 35px 0 35px; }
.card.card--specifications .card-header { padding: 0 10px; }
.card.card--specifications .card-footer { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 35px; }

@media (min-width: 992px) {
    .card .card-description-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--global-ts-duration) var(--global-ts-function); }
    .card .card-description-collapse > div { overflow: hidden; }

    .card.card--blurb:hover .card-description-collapse { grid-template-rows: 1fr; } 

    .card.card--category { --p: 30px; }
    .card.card--inspiration { --p: 30px; }
    .card.card--inspiration .card-body { min-height: 240px; }
}

@media (min-width: 992px) {
    .card.card--inspiration { --p: 40px; }
    .card.card--inspiration .card-body { min-height: 340px; }
}

/*** ---------- Swiper slider ---------- ***/
.swiper .swiper-button::after { display: none; } 
.swiper .swiper-button { user-select: none; color: #fff; width: 50px; height: 50px; border-radius: 50%; background: rgba(0,0,0,.18); backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px); }
.swiper .swiper-button span { font-weight: 700; font-size: 40px; }

/*** ---------- Blaze slider ---------- ***/
.blaze-slider .blaze-container { display: grid; grid-template-columns: 1fr; align-items: center; gap: 16px; }
.blaze-slider .blaze-pagination-container .blaze-pagination { display: flex; align-items: center; }
.blaze-slider .blaze-pagination-container .blaze-pagination button { border-radius: 0; width: 100%; height: 1px; padding: 0; background: #D9D9D9; cursor: pointer; border: none; text-indent: -9999rem; overflow: clip; transition: background var(--global-ts-duration) var(--global-ts-function); }
.blaze-slider .blaze-pagination-container .blaze-pagination button.active { height: 5px; background: var(--gradient-3); }
.blaze-slider .blaze-nav-container > span { font-size: 20px; --size: 50px; --inner-clr: var(--clr-dark); --hover-inner-clr: #fff; --bg-clr: transparent; --hover-bg-clr: var(--clr-dark); --border: 1px solid var(--clr-light); --hover-border: 1px solid transparent; --br: 50%; display: inline-grid; place-items: center; width: var(--size); min-width: var(--size); height: var(--size); min-height: var(--size); background: var(--bg-clr); border: var(--border); border-radius: var(--br); cursor: pointer; transition: background var(--global-ts-duration) var(--global-ts-function), border var(--global-ts-duration) var(--global-ts-function); }
.blaze-slider .blaze-nav-container > span:hover { background: var(--hover-bg-clr); border: var(--hover-border); }
.blaze-slider .blaze-nav-container > span i { color: var(--inner-clr); }
.blaze-slider .blaze-nav-container > span:hover i { color: var(--hover-inner-clr); }

@media (min-width: 992px) {
    .blaze-slider .blaze-nav-container > span { font-size: 16px; --size: 38px; }
}

/* ---------- Carousel ---------- */
.wpb-carousel { display: grid; grid-template-areas: "items"; position: relative; }
.wpb-carousel > * { pointer-events: none; grid-area: items; opacity: 0; }
.wpb-carousel > *.is-active { pointer-events: all; opacity: 1; }
.wpb-carousel .carousel__buttons { pointer-events: none; display: flex; align-items: center; justify-content: space-between; opacity: 1; z-index: 1; }
.wpb-carousel .carousel__buttons > span { user-select: none; pointer-events: all; cursor: pointer; display: grid; place-items: center; font-size: 10px; background-color: #4E4E4E; color: #fff; width: 20px; height: 20px; border-radius: 50%; }
.wpb-carousel .carousel__buttons > span i { --clr: #fff; --w: 8px; --h: 13px; pointer-events: none; }
.wpb-carousel .carousel__buttons > span span { pointer-events: none; font-weight: 600; }
.wpb-carousel .carousel__dots { display: flex; opacity: 1; gap: 4px; }
.wpb-carousel .carousel__dots span { cursor: pointer; pointer-events: all; display: inline-block; width: 6px; height: 6px; border-radius: 6px; background-color: rgba(255,255,255,.5); transition-property: background-color, width; transition-duration: var(--global-ts-duration); transition-timing-function: var(--global-ts-function); }
.wpb-carousel .carousel__dots span.is-active { background-color: #fff; width: 11px; }
.wpb-carousel .carousel__dots span span { font-weight: 700; }

.wpb-carousel.wpb-carousel--featured { width: 100%; max-width: 283px; }
.wpb-carousel.wpb-carousel--featured .carousel__buttons { margin-left: -10px; width: calc(100% + 20px); }
.wpb-carousel.wpb-carousel--featured .carousel__buttons span i { --h: 10px; }
.wpb-carousel.wpb-carousel--featured .wpb-carousel__item { pointer-events: none; min-height: 150px; position: relative; color: #fff; padding: 15px; border: 1px solid rgba(255,255,255,.31); background-color: rgba(255,255,255,.16); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 6px; overflow: clip; opacity: 0; transition: opacity 350ms var(--global-ts-function); }
.wpb-carousel.wpb-carousel--featured .wpb-carousel__item .item-text { height: 100%; display: flex; flex-direction: column; z-index: 1; position: relative; }
.wpb-carousel.wpb-carousel--featured .wpb-carousel__item .item-link { z-index: 2; position: absolute; right: 15px; top: 15px; }
.wpb-carousel.wpb-carousel--featured .wpb-carousel__item .item-link .wpb-icon { --clr: #fff; transition: transform var(--global-ts-duration) var(--global-ts-function); }
.wpb-carousel.wpb-carousel--featured .wpb-carousel__item:hover .item-link .wpb-icon { transform: rotate(45deg); }
.wpb-carousel.wpb-carousel--featured .wpb-carousel__item .item-title { margin-top: auto; font-size: 28px; font-weight: 700; line-height: 1; }
.wpb-carousel.wpb-carousel--featured .wpb-carousel__item .item-description { font-size: 12px; }
.wpb-carousel.wpb-carousel--featured .wpb-carousel__item .image { margin: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.wpb-carousel.wpb-carousel--featured .wpb-carousel__item .image img { width: 100%; height: 100%; object-fit: contain; object-position: right; }
.wpb-carousel.wpb-carousel--featured .wpb-carousel__item.is-active { opacity: 1; pointer-events: all; }
.wpb-carousel.wpb-carousel--featured .carousel__dots { padding: 0 15px; pointer-events: none; z-index: 1; position: absolute; top: 35px; left: 0; right: 0; width: 100%; }

/*** ---------- Modal ---------- ***/
.modal { --br: 6px; --p: 20px; --backdrop-clr: rgba(0,0,0,.45); position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; padding: 16px; background-color: var(--backdrop-clr); display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; transition: opacity var(--global-ts-duration) ease-in-out; z-index: 1090; }
.modal.show { display: flex; opacity: 1; pointer-events: all; }
.modal.show .modal-dialog { transform: translateY(0); }
.modal .modal-dialog { display: flex; flex-direction: column; border-radius: var(--br); width: 100%; max-width: 700px; height: auto; max-height: 80vh; transform: translateY(50px); transition: transform var(--global-ts-duration) ease; background-color: #fff; overflow: hidden; }
.modal .modal-dialog .modal-dialog__header { display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; align-items: center; padding: var(--p); background-color: #fff; font-family: inherit; }
.modal .modal-dialog .modal-dialog__header p { margin: 0; font-size: 16px; line-height: 16px; }
.modal .modal-dialog .modal-dialog__body { background-color: #fff; padding: var(--p); overflow-y: auto; overflow-x: hidden; }
.modal .modal-dialog .modal-dialog__footer { display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid #E4E9EA; background-color: #fff; padding: var(--p); z-index: 2; margin-top: auto; }
.modal .modal-close { cursor: pointer; width: 32px; height: 32px; background: url('/wp-content/themes/socialbrothers/wux/assets/icons/xmark.png') no-repeat center/contain; }
.modal .modal-title { font-size: 20px; font-weight: 700; margin: 0; }

.modal.modal--payment-method .modal-dialog__header { padding-bottom: 0; }
.modal.modal--payment-method .modal-dialog__body { padding-top: calc(var(--p) / 2); }
.modal.modal--payment-method .gform_heading { display: none; }
.modal.modal--payment-method .gfield_label { font-size: 10px; }  
.modal.modal--payment-method .gfield_label .gfield_required { color: var(--clr-text); }  
.modal.modal--payment-method .modal-title { font-size: clamp(24px, 4vw, 40px); }
.modal.modal--payment-method .gform_validation_errors, .modal.modal--payment-method .gfield_error .validation_message { display: none!important; }
.modal.modal--payment-method .modal-close { z-index: 2; position: relative; } 
.modal.modal--payment-method .modal-overlay { opacity: 0; pointer-events: none; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--br); background-color: #fff; align-items: center; }
.modal.modal--payment-method .modal-overlay .text { padding: var(--p); display: flex; align-items: start; padding-right: 48px; column-gap: 16px; }
.modal.modal--payment-method .modal-overlay .text .icon { display: inline-grid; place-items: center; font-size: 24px; --size: 54px; width: var(--size); height: var(--size); min-width: var(--size); border-radius: 50%; background: var(--clr-light); }
.modal.modal--payment-method .modal-overlay .text ul { list-style: none; padding: 0; }
.modal.modal--payment-method .modal-overlay .text ul li { display: flex; align-items: center; column-gap: 10px; }
.modal.modal--payment-method .modal-overlay .text ul li + li { margin-top: 20px; }  
.modal.modal--payment-method .modal-overlay .image { height: 100%; text-align: center; align-self: end; }
.modal.modal--payment-method .modal-overlay .image img { height: 100%; object-fit: contain; object-position: bottom; } 
.modal.modal--payment-method:has(.gform_confirmation_message) .modal-overlay { opacity: 1; pointer-events: all; }
.modal.modal--payment-method:has(.gform_confirmation_message) .modal-dialog__body { min-height: 500px; }

.modal.modal--component .modal-dialog__header { padding-bottom: 0; }
.modal.modal--component .modal-dialog__header .btn.btn--square { margin-left: auto; }  

@media (min-width: 576px) {
    .modal .modal-dialog { max-width: calc(540px - 32px); }
}

@media (min-width: 768px) {
    .modal .modal-dialog { max-width: calc(720px - 32px); }
    .modal.modal--small .modal-dialog { max-width: calc(720px - 32px); }

    .modal.modal--payment-method .gform_fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .modal.modal--payment-method .modal-overlay { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .modal.modal--payment-method .modal-overlay .text { padding-right: 0; }
}

@media (min-width: 992px) {
    .modal { --p: 32px; }
    .modal .modal-dialog { max-width: calc(960px - 32px); }
    .modal.modal--small .modal-dialog { max-width: calc(720px - 32px); }
    .modal.modal--medium .modal-dialog { max-width: 810px; }
}

@media (min-width: 1200px) { 
    .modal .modal-dialog { max-width: calc(1140px - 32px); }
    .modal.modal--small .modal-dialog { max-width: calc(720px - 32px); }
    .modal.modal--medium .modal-dialog { max-width: 810px; }
    .modal.modal--large .modal-dialog { max-width: calc(1140px - 32px); }

    .modal.modal--payment-method { --p: 68px; }
    .modal.modal--payment-method:has(.gform_confirmation_message) .modal-dialog__body { min-height: 400px; }
}

/*** ---------- Pagination ---------- ***/
.wpb-pagination { --p: 0; --clr: var(--clr-text); --bg-clr: #fff; --border: 1px solid transparent; --br: 40px; --hover-clr: #fff; --hover-bg-clr: var(--clr-dark); --hover-border: var(--border); --active-color: var(--hover-clr); --active-bg-clr: var(--hover-bg-clr); --active-border: var(--hover-border); position: relative; }
.wpb-pagination .has-prev-next { padding-left: 38px; padding-right: 38px; } 
.wpb-pagination ul { --gap: 5px!important; list-style: none; display: flex!important; justify-content: center; flex-wrap: wrap; gap: var(--gap); padding-top: 32px; }
.wpb-pagination li > * { width: 38px; height: 38px; display: inline-grid; place-items: center; font-weight: 600; font-size: 16px; line-height: 1.6; color: var(--clr-text); color: inherit; padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition-property: color, background-color, border-color; transition-duration: var(--global-ts-duration); transition-timing-function: var(--global-ts-function); }
.wpb-pagination li > * i { --w: 15px; --h: 15px; pointer-events: none; }
.wpb-pagination li > *:hover i { --clr: var(--hover-clr) }
.wpb-pagination li :is(> *:hover, > *:focus, > *:active) { color: var(--hover-clr); background-color: var(--hover-bg-clr); border: var(--hover-border); }
.wpb-pagination li > *.current { color: var(--active-color); background-color: var(--active-bg-clr); border: var(--active-border); }
.wpb-pagination li .page-number__prev { position: absolute; left: 0; }
.wpb-pagination li .page-number__next { position: absolute; right: 0; }
.wpb-pagination li:has([data-page="…"]),
.wpb-pagination li [data-page="…"] { pointer-events: none!important; }

/*** ---------- Range sliders ---------- ***/
.range-slider { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px; }
.range-slider .range-slider__input { grid-column: span 2; display: grid; grid-template-areas: "rangeInputs"; }
.range-slider .range-slider__input input { grid-area: rangeInputs; width: 100%; }
.range-slider .range-slider__min, .range-slider .range-slider__max { border: 1px solid var(--clr-light); border-radius: 3px; padding: 8px 11px; }
.range-slider .range-slider__min small, .range-slider .range-slider__max small { display: block; width: 100%; font-size: 10px; }
.range-slider .range-slider__min span, .range-slider .range-slider__max span { font-size: 15px; }

input[type=range] { --bg-clr: var(--clr-light); pointer-events: none; -webkit-appearance: none; appearance: none; width: 100%; outline: none!important; }
input[type=range]::-webkit-slider-container { border-radius: 20px; height: 5px; background: var(--bg-clr); background-image: linear-gradient(90deg,var(--bg-clr) var(--minPercent),var(--clr-copper) var(--minPercent),var(--clr-copper) var(--maxPercent),var(--bg-clr) var(--maxPercent)); }
input[type=range]::-webkit-slider-thumb { z-index: 5; position: relative; pointer-events: all; -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background:  var(--clr-dark); border: 2px solid var(--clr-light); cursor: pointer; border-radius: 50%; }
input[type=range]::-moz-range-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--clr-dark); border: 2px solid var(--clr-light); cursor: pointer; border-radius: 50%; }

/*** ---------- Offcanvas ---------- ***/
.wpb-offcanvas { --p: 18px; width: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: auto; flex-direction: column; z-index: 9999; background-color: #fff; transform: translate3d(100%, 0, 0); transition: transform 350ms ease; }
.wpb-offcanvas.wpb-offcanvas--left { transform: translate3d(-100%, 0, 0); top: 0; right: auto; bottom: 0; left: 0; }
.wpb-offcanvas.is-active { pointer-events: all; transform: translate3d(0%, 0, 0); }
.wpb-offcanvas .wpb-offcanvas__header { display: flex; justify-content: space-between; align-items: center; padding: var(--p); }
.wpb-offcanvas .wpb-offcanvas__header h3 { padding: 0; margin: 0; }
.wpb-offcanvas .wpb-offcanvas__body { padding: var(--p); flex-grow: 1; overflow-y: auto; }
.wpb-offcanvas .wpb-offcanvas__footer { display: grid; padding: var(--p); }
.wpb-offcanvas .wpb-offcanvas__footer .btn { width: 100%; }

body.admin-bar .wpb-offcanvas { top: 46px; }

@media (min-width: 576px) {
    .wpb-offcanvas { max-width: 300px; }
}

@media (min-width: 783px) {
    body.admin-bar .wpb-offcanvas { top: 32px; }
}

/*** ---------- Wux Filters ---------- ***/
#wux-filters .wf-filter-group { border-top: 1px solid var(--clr-light); }
#wux-filters .wf-filter-group .wf-collapse-toggle-label { padding: 15px 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; } 
#wux-filters .wf-filter-group .wf-collapse-toggle-label .material-symbols-sharp { transition: transform var(--global-ts-duration) var(--global-ts-function); }
#wux-filters .wf-filter-group .wf-collapse-toggle-label::before, #wux-filters .wf-filter-group .wf-collapse-toggle-label::after { display: none; }
#wux-filters .wf-filter-group .wf-collapse-toggle-checkbox { opacity: 0; position: absolute; left: -999rem; }
#wux-filters .wf-filter-group .wf-collapse-toggle-checkbox:checked + .wf-collapse-toggle-label .material-symbols-sharp { transform: rotate(180deg); }

#wux-filters .wf-filter-group--collapsable .wf-filter-group__body { height: 0px; overflow: hidden; transition: height 0.25s ease-in; }
#wux-filters .wf-filter-group--collapsable .wf-filter-group__body > label:last-child { margin-bottom: 20px; }  
#wux-filters .wf-filter-group--collapsable > [type="checkbox"]:checked + label + .wf-filter-group__body { height: auto; height: calc-size(max-content, size); }

#wux-filters .wf-filter-group--radio .wf-filter-group__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
#wux-filters .wf-filter-group--radio .wf-filter-group__body label { font-size: 15px; padding-left: 39px; }
#wux-filters .wf-filter-group--radio .wf-filter-group__body label:after { background: url('/wp-content/themes/socialbrothers/wux/assets/icons/check.svg') no-repeat center/12px var(--clr-copper); }
#wux-filters .wf-filter-group--radio .wf-filter-group__body input:checked + label:after { transform: translateY(-50%) scale(1); }

#wux-filters .wf-filter-group--multiselect .wf-filter-group__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
#wux-filters .wf-filter-group--multiselect .wf-filter-group__body label { font-size: 15px; padding-left: 39px; }
#wux-filters .wf-filter-group--multiselect .wf-filter-group__body label:after { background: url('/wp-content/themes/socialbrothers/wux/assets/icons/check.svg') no-repeat center/12px var(--clr-copper); }
#wux-filters .wf-filter-group--multiselect .wf-filter-group__body input:checked + label:after { transform: translateY(-50%) scale(1); }

#wux-filters .wf-filter-group--price .wf-filter-group__body { padding-bottom: 7px; }

#wux-filters .wf-filter-group--collapsable .range-slider { margin-bottom: 20px; }

/*** ---------- Categories list ---------- ***/
.wpb-categories { padding-bottom: 40px; }
.wpb-categories .wpb-categories__list { display: flex; flex-wrap: wrap; gap: 20px; }
.wpb-categories .wpb-categories__item { height: 70px; display: flex; align-items: center; background-color: rgba(var(--clr-light-rgb), .5); border-radius: 6px; overflow: clip; transition-property: background-color; transition-duration: var(--global-ts-duration); transition-timing-function: var(--global-ts-function); }
.wpb-categories .wpb-categories__item .wpb-categories__item-image { width: 90px; height: 100%; }
.wpb-categories .wpb-categories__item .wpb-categories__item-image picture { display: block; }
.wpb-categories .wpb-categories__item .wpb-categories__item-image picture img { width: 100%; height: 100%; }
.wpb-categories .wpb-categories__item .wpb-categories__item-text { white-space: nowrap; font-size: 15px; font-weight: 700; padding: 15px; color: var(--clr-dark); }
.wpb-categories .wpb-categories__item:hover { background-color: var(--clr-light); }
.wpb-categories .wpb-categories__item.wpb-categories__item--current { background: url('/wp-content/themes/socialbrothers/wux/assets/image/gradient_bg.png') no-repeat center / cover; }
.wpb-categories .wpb-categories__item.wpb-categories__item--current .wpb-categories__item-text { color: #fff; }

@media(max-width: 991.98px) {
    .wpb-categories .wpb-categories__list { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; }
    .wpb-categories .wpb-categories__item { height: 55px; scroll-snap-align: start; }
    .wpb-categories .wpb-categories__item .wpb-categories__item-image { width: 75px; }
}

@media(max-width: 575.98px) {
    .wpb-categories .wpb-categories__list { margin-inline: -18px; scroll-padding-left: 18px; padding-inline: 18px; }
    .wpb-categories .wpb-categories__item { height: 40px; }
    .wpb-categories .wpb-categories__item .wpb-categories__item-image { width: 60px; }
}

/* Product card
-------------------------------------- */
.wpb-product { border: 1px solid var(--clr-light); border-radius: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: clip; align-items: center; background-color: #fff; position: relative; }
.wpb-product .wpb-product__header a,
.wpb-product .wpb-product__header a picture { display: block; width: 100%; height: 100%; }
.wpb-product .wpb-product__header img { width: 100%; height: 100%; object-fit: cover; }
.wpb-product .wpb-product__body { padding: 20px; }
.wpb-product .prd-title { display: block; width: 100%; font-size: 15px; font-weight: 700; color: var(--clr-dark); margin-bottom: 10px; }
.wpb-product .prd-price tr { vertical-align: bottom; } 
.wpb-product .prd-price tr td { padding: 0; }
.wpb-product .prd-price tr small { font-size: 10px; line-height: 1; font-weight: 700; padding-right: 5px; }
.wpb-product .prd-price tr strong { font-size: 15px; font-weight: 700; line-height: 1; }  
.wpb-product .prd-price tr.prd-price__regular { color: rgba(var(--clr-dark-rgb), .5); }
.wpb-product .prd-price tr.prd-price__regular strong { text-decoration: line-through; }
.wpb-product .prd-price tr.prd-price__new { color: var(--clr-copper); }
.wpb-product .prd-price tr.prd-price__new strong { font-size: 24px; }
.wpb-product .wpb-product__footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 95px); grid-column: span 2; align-items: center; }
.wpb-product .wpb-product__footer .btn { width: 100%; min-height: 49px; border-radius: 0; }
.wpb-product .wpb-product__footer .btn.loading .material-symbols-sharp { opacity: 0; }
.wpb-product .wpb-product__footer .btn.loading::before { opacity: 1; content: ''; position: absolute; left: calc(50% - 13px); top: 11px;; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: inline-block; border: 4px solid #FFF; border-bottom-color: transparent; box-sizing: border-box; animation: rotation 1s linear infinite; }
.wpb-product .wpb-product__footer .btn.btn--dark { --p: 0 5px; white-space: break-spaces; width: 100%; grid-column: span 2; }
.wpb-product .wpb-product__footer .btn.btn--light { font-size: 20px; border-left: 1px solid rgba(var(--clr-dark-rgb), .3); }
.wpb-product .wpb-product__footer .btn.btn--light:hover { border-left: 1px solid rgba(255,255,255,.3)!important; }
.wpb-product .wpb-product__footer .btn.btn--dark:has(+ .btn--light) { grid-column: span 1; }
.wpb-product .wpb-product__footer .added_to_cart { display: none!important; }
.wpb-product .prd-specs { pointer-events: none; font-size: 10px; position: absolute; top: 0; right: 0; left: 0; padding: 20px; display: none; flex-wrap: wrap; gap: 10px; }
.wpb-product .prd-specs strong { display: block; } 

@media (min-width: 768px) {
    .wpb-product .prd-specs { display: flex; }
    .wpb-product { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: start; }
    .wpb-product .wpb-product__header img { aspect-ratio: 1/1; }
    .wpb-product .wpb-product__footer { grid-column: span 1; grid-template-columns: minmax(0, 1fr) minmax(0, 77px); }
}

.wpb-product--simple { border-radius: 0; grid-template-columns: 1fr 56px; border: none; gap: 10px; align-items: end; }
.wpb-product--simple .wpb-product__header { border-radius: 6px; grid-column: span 2; border: 1px solid var(--clr-light); }
.wpb-product--simple .wpb-product__body { padding: 0; }
.wpb-product--simple .prd-title { font-size: 16px; font-weight: 400; margin-bottom: 5px; }
.wpb-product--simple .prd-price tr small.prd-price__regular { font-size: 16px; font-weight: 400; color: var(--clr-light); text-decoration: line-through; }
.wpb-product--simple .prd-price tr strong.prd-price__new { font-size: 16px; }
.wpb-product--simple .wpb-product__footer { grid-column: span 1; }
.wpb-product--simple .wpb-product__footer .btn { width: 56px; border-radius: 3px; }

.wpb-product .product__loading { --color-1: rgba(245, 245, 245, 1); --color-2: rgba(225, 225, 225, 1); --bg-gradient: linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 25%, var(--color-1) 50%, var(--color-2) 75%, var(--color-1) 100%); position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #fff; margin: 0; opacity: 0; pointer-events: none; transition: opacity var(--ts-35) ease; }
.wpb-product .product__loading .product__loading-header{ height: 65%; width: 100%; background: var(--bg-gradient); background-size: 400% 100%; }
.wpb-product .product__loading .product__loading-body{ padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.wpb-product .product__loading .product__loading-body span { display: block; background: var(--bg-gradient); background-size: 400% 100%; height: 14px; min-width: 90px; width: fit-content; border-radius: 30px; }
.wpb-product .product__loading .product__loading-body span:nth-child(2){ min-width: 120px; }
.wpb-product .product__loading .product__loading-body span:nth-child(3){ width: 100%; height: 30px; margin-top: 16px; }

ul.products.--loading .wpb-product { pointer-events: none; }
ul.products.--loading .wpb-product .product__loading { opacity: 1; }
ul.products.--loading .wpb-product :is(.product__loading-header, .product__loading-body span){ animation: gradient-animation 10s linear infinite; }

/*** ---------- Accordion ---------- ***/
.wpb-accordion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; --bg: transparent; --active-bg: transparent; --active-clr: inherit; }
.wpb-accordion .collapse:not(.show) { display: none; }
.wpb-accordion__item { color: var(--clr-dark); border-bottom: .1rem solid var(--clr-light); }
.wpb-accordion__item .wpb-accordion__header { font-size: 15px; margin: 0; }
.wpb-accordion__item .wpb-accordion__button { font: inherit; color: inherit; min-height: 58px; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32px); column-gap: 20px; align-items: center; width: 100%; font-size: clamp(20px, 4vw, 28px); font-weight: 700; text-align: left; padding: 15px 0; background-color: var(--bg); border: 0; overflow-anchor: none; border-radius: 0; white-space: break-word!important; transition: background-color var(--global-ts-duration) ease-in-out, color var(--global-ts-duration) ease-in-out, border-radius var(--global-ts-duration) ease-in-out; }
.wpb-accordion__item .wpb-accordion__button::after { display: none; }
.wpb-accordion__item .wpb-accordion__button span { font-weight: 700; font-size: 32px; transition: color var(--global-ts-duration) ease-in-out; }
.wpb-accordion__item .wpb-accordion__button span { margin: auto; transition: transform var(--global-ts-duration) ease; }
.wpb-accordion__item .wpb-accordion__button.is-active { color: var(--active-clr); background-color: var(--active-bg); }
.wpb-accordion__item .wpb-accordion__button.is-active span { transform: rotate(-180deg); }
.wpb-accordion__item .wpb-accordion__body { padding: 20px 0; border-top: 1px solid var(--clr-border); }
.wpb-accordion__item .wpb-accordion__body .wpb-text { line-height: 1.6; } 
.wpb-accordion__item .wpb-accordion__body .wpb-text p { line-height: 1.6; } 
.wpb-accordion__item .collapse:not(.show) { display: none; }
.wpb-accordion__item .collapsing { height: 0; overflow: hidden; transition: height .35s ease; }

.wpb-bg-clr--gradient .wpb-accordion__item { color: #fff; }

/* .product-faq .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; } */

/*** ---------- Tooltips ---------- ***/
.wpb-tooltip { --bg: rgb( 255,255,255); position: absolute; pointer-events: none; opacity: 0; background-color: var(--bg); color: inherit; font-size: 10px; line-height: 1.2; padding: 10px; border-radius: 3px; z-index: 9999; box-shadow: 0 0 20px 0px rgba(0,0,0,.1); }
.wpb-tooltip::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 5px 5px 5px; border-color: transparent transparent var(--bg) transparent; bottom: 100%; transform: translateX(-50%); left: 50%; }
.wpb-tooltip.wpb-tooltip--left::after { border-width: 5px 0 5px 5px; border-color: transparent transparent transparent var(--bg); top: 50%; transform: translateY(-50%); left: calc(100% - 1px); }
.wpb-tooltip.wpb-tooltip--right::after { border-width: 5px 5px 5px 0; border-color: transparent var(--bg) transparent transparent; top: 50%; transform: translateY(-50%); right: calc(100% - 1px); left: auto; }
.wpb-tooltip.wpb-tooltip--top::after { border-width: 5px 5px 0 5px; border-color: var(--bg) transparent transparent transparent; top: 100%; transform: translateX(-50%); left: 50%; }
.wpb-tooltip.show { opacity: 1; }

/* Add to cart */
.add-success { position: fixed; top: 32px; right: 32px; background-color: var(--clr-mint); z-index: 9999; width: 45px; height: 45px; border-radius: 50%; display: inline-grid; place-items: center; transform: scale(0); animation: scale .5s cubic-bezier(0,0,.5,1.5) forwards, transform .5s forwards; animation-delay: 0s, 1.6s; } 
.add-success span { color: #fff; }
.add-success:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; animation: pulse 1s forwards; animation-delay: .6s; }

/*** ---------- Marquee ---------- ***/
.wpb-marquee { background-color: #fff; z-index: 2; overflow: clip; box-sizing: border-box; position: relative; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.wpb-marquee .marquee--inner { font-size: 80px; font-weight: 700; width: max-content; display: flex; color: #EDF1F7; animation: marquee 20s linear infinite; }
.wpb-marquee .marquee--inner > div { display: flex; align-items: center; width: 50%; }
.wpb-marquee .marquee--inner > div > span { display: flex; align-items: center; white-space: nowrap; }
.wpb-marquee .marquee--inner > div > span > span { width: 1px; height: 149px; display: inline-block; border-left: 1px solid var(--clr-border); margin: 0 .5em; }

.wpb-block--text-marquee:has(+ .wpb-block--compare) { margin-bottom: -57px; } 

/*** ---------- Keyframes ---------- ***/
@keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
} 

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

@keyframes scale {
    0% { transform: scale(0); }
    100% { transform: scale(100%); }
}

@keyframes transform {
    0% { transform: scale(100%) translateY(0px); opacity: 1; }
    100% { transform: scale(100%)  translateY(-10rem); opacity: 0; }
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--clr-mint); opacity: .7; }
    70% { transform: scale(1); box-shadow: 0 0 0 1.5rem var(--clr-mint); opacity: 0; }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--clr-mint); opacity: 0; }
}

@keyframes hideshowhide {
    0% { opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } 
}

@keyframes marquee {
    0% { transform: translate3d(0%, 0, 0); } 100% { transform: translate3d(-25%, 0, 0); }
}