:root{
	--alpha-badge-border: 1;
	--badge-corner-radius: 4.0rem;
	--card-image-padding: 0.0rem;
	--card-corner-radius: 0.0rem;
	--card-border-width: 0.0rem;
	--card-border-opacity: 0.0;
	--card-shadow-opacity: 0.1;
	--card-shadow-visible: 0;
	--card-shadow-horizontal-offset: 0.0rem;
	--card-shadow-vertical-offset: 0.0rem;
	--card-shadow-blur-radius: 0.0rem;
	--color-shadow: 16, 57, 72; /*missing*/
    --duration-short: .1s;
    --duration-default: .2s;
    --duration-long: .5s;
    --media-padding: 0px;
	--media-border-opacity: 0.05;
	--media-border-width: 1px;
	--media-radius: 0px;
	--media-shadow-opacity: 0.0;
	--media-shadow-horizontal-offset: 0px;
	--media-shadow-vertical-offset: 0px;
	--media-shadow-blur-radius: 0px;
	--media-shadow-visible: 0;
	--inputs-radius: 4px;
    --inputs-border-width: 1px;
    --inputs-border-opacity: 0.55;
    --inputs-shadow-opacity: 0.0;
    --inputs-shadow-horizontal-offset: 0px;
    --inputs-margin-offset: 0px;
    --inputs-shadow-vertical-offset: 0px;
    --inputs-shadow-blur-radius: 0px;
    --inputs-radius-outset: 0px;
	--popup-border-width: 1px;
    --popup-border-opacity: 0.1;
    --popup-corner-radius: 0px;
    --popup-shadow-opacity: 0.0;
    --popup-shadow-horizontal-offset: 0px;
    --popup-shadow-vertical-offset: 0px;
    --popup-shadow-blur-radius: 0px;
    --text-boxes-border-opacity: 0.0;
    --text-boxes-border-width: 0px;
    --text-boxes-radius: 0px;
    --text-boxes-shadow-opacity: 0.0;
    --text-boxes-shadow-horizontal-offset: 0px;
    --text-boxes-shadow-vertical-offset: 0px;
    --text-boxes-shadow-blur-radius: 0px;
    --variant-pills-radius: 40px;
    --variant-pills-border-width: 1px;
    --variant-pills-border-opacity: 0.55;
    --variant-pills-shadow-opacity: 0.0;
    --variant-pills-shadow-horizontal-offset: 0px;
    --variant-pills-shadow-vertical-offset: 0px;
    --variant-pills-shadow-blur-radius: 0px;

    --global-fontSizes-body-lg: 16px;
	--global-fontSizes-body-md: 14px;
	--global-fontSizes-body-sm: 12px;
	--global-fontSizes-body-xs: 10px;
	--global-fontSizes-display-lg: 40px;
	--global-fontSizes-display-md: 32px;
	--global-fontSizes-display-xl: 48px;
	--global-fontSizes-display-xxl: 60px;
	--global-fontSizes-display-xxxl: 80px;
	--global-fontSizes-heading-lg: 20px;
	--global-fontSizes-heading-md: 16px;
	--global-fontSizes-heading-sm: 14px;
	--global-fontSizes-heading-xl: 26px;
	--global-fontSizes-heading-xs: 12px;
    --global-borderWidth-none: 0;
    --global-borderWidth-thick: 2px;
    --global-borderWidth-thin: 1px;
    --global-boxShadow-high: 0px 6px 24px 0px rgba(0,0,0,0.14);
    --global-boxShadow-low: 0px 1px 4px 0px rgba(0,0,0,0.14);
    --global-boxShadow-mid: 0px 4px 14px 0px rgba(0,0,0,0.10);
    --global-boxShadow-subtle: 0px 1px 4px 0px rgba(0,0,0,0.10);
    --global-constant-black-default: #070707;
    --global-constant-black-hover: #131313;
    --global-constant-black-pressed: #252525;
    --global-constant-blackMuted-default: rgba(0,0,0,0.5);
    --global-constant-blackMuted-hover: rgba(0,0,0,0.66);
    --global-constant-blackMuted-pressed: rgba(0,0,0,0.82);
    --global-constant-blackSubtle-default: rgba(0,0,0,0.14);
    --global-constant-blackSubtle-hover: rgba(0,0,0,0.2);
    --global-constant-blackSubtle-pressed: rgba(0,0,0,0.26);
    --global-constant-white-default: #ffffff;
    --global-constant-white-hover: #f5f5f5;
    --global-constant-white-pressed: #e8e8e8;
    --global-constant-whiteMuted-default: rgba(255,255,255,0.5);
    --global-constant-whiteMuted-hover: rgba(255,255,255,0.66);
    --global-constant-whiteMuted-pressed: rgba(255,255,255,0.82);
    --global-constant-whiteSubtle-default: rgba(255,255,255,0.14);
    --global-constant-whiteSubtle-hover: rgba(255,255,255,0.2);
    --global-constant-whiteSubtle-pressed: rgba(255,255,255,0.26);
    --global-effects-lg: 100px;
    --global-effects-md: 50px;
    --global-effects-sm: 20px;
    --global-icon-lg: 32px;
    --global-icon-md: 24px;
    --global-icon-sm: 20px;
    --global-icon-xl: 40px;
    --global-icon-xs: 16px;
    --global-layer-0: 0;
    --global-layer-1: 100;
    --global-layer-10: 1000;
    --global-layer-11: 1100;
    --global-layer-12: 1200;
    --global-layer-2: 200;
    --global-layer-20: 2000;
    --global-layer-3: 300;
    --global-layer-4: 400;
    --global-layer-5: 500;
    --global-layer-6: 600;
    --global-layer-7: 700;
    --global-layer-8: 800;
    --global-layer-9: 900;
    --global-nonSemantic-blueberry: #1a52a7;
    --global-nonSemantic-holly: #0cac7e;
    --global-nonSemantic-honeycomb: #f5b400;
    --global-nonSemantic-jasper: #f75058;
    --global-nonSemantic-lavender: #6e479d;
    --global-nonSemantic-lollipop: #ea1f44;
    --global-nonSemantic-moonshade: #4f71ba;
    --global-nonSemantic-ocean: #1d8acb;
    --global-nonSemantic-pumpkin: #fb790e;
    --global-nonSemantic-raspberry: #be2a61;
    --global-opacity-disabled: 0.6;
    --global-opacity-enabled: 1;
    --global-radius-circle: 9999px;
    --global-radius-lg: 12px;
    --global-radius-md: 8px;
    --global-radius-pill: 9999px;
    --global-radius-sm: 4px;
    --global-radius-smMd: 6px;
    --global-radius-xl: 16px;
    --global-radius-xxl: 40px;
    --global-space-12: 12px;
    --global-space-16: 16px;
    --global-space-24: 24px;
    --global-space-32: 32px;
    --global-space-4: 4px;
    --global-space-40: 40px;
    --global-space-48: 48px;
    --global-space-56: 56px;
    --global-space-8: 8px;
    --global-transition-fast-duration: 200ms;
    --global-transition-fast-easing: ease;
    --global-transition-regular-duration: 350ms;
    --global-transition-regular-easing: ease;
    --global-transition-slow-duration: 500ms;
    --global-transition-slow-easing: ease;
    --global-zindex-high-than-header-dropdown: 101;
    --global-zindex-header-dropdown: 100;
    --global-zindex-lower-than-header-dropdown: 99;
    --global-zindex-lower-than-popular-tags: 98;

    --dialog-container: var(--global-bg-elevated-default);
    --dialog-cover: var(--component-dialog-overlay-bg);
    --dialog-divider: var(--global-border-muted-default);
    --dialog-shadow: var(--global-boxShadow-high);
}

body{
	background-color: var(--global-bg-page-default);
	color: var(--global-content-regular-default);
	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
}

a:link, a:visited{
    text-decoration: none;
}

a:hover{
    text-decoration: none;
}

a:not(.btn):link,
a:not(.btn):visited,
.btn-link,
.nav-link,
.nav-tabs .nav-link:focus:not(.active),
.nav-tabs .nav-link:hover:not(.active){
    color: var(--global-primary-action-default);
}

a:not(.btn):hover,
.btn-link:hover{
	color: var(--global-primary-action-hover);
}

/* Make buttons focus state more visible for accessibility */
.btn:focus-visible{
    outline-style: solid;
    outline-color: -webkit-focus-ring-color;
    outline-width: 2px;
}

.btn-primary{
	background-color: var(--global-primary-actionBase-default);
	border-color: transparent;
}

.btn-primary:hover,
.swal2-styled.swal2-confirm:hover{
	background-color: var(--global-primary-actionBase-hover);
	border-color: var(--global-primary-actionBase-hover);
	border-color: transparent;
}

.btn-primary:focus,
.swal2-styled.swal2-confirm:focus{
	box-shadow: none !important;
	background-color: var(--global-primary-actionBase-pressed);
	border-color: var(--global-primary-actionBase-pressed);
	border-color: transparent;
}

.btn-secondary{
	color: var(--global-primary-onMuted-default) !important;
	background-color: var(--global-secondary-action-default);
	border-color: var(--global-secondary-action-default);
	background-image: none;
	border-color: transparent;
	font-weight: 600;
}
.btn-secondary:hover{
	background-color: var(--global-secondary-action-hover);
	border-color: transparent;
}
.btn-secondary:focus{
	background-color: var(--global-secondary-action-pressed);
	box-shadow: none !important;
	border-color: transparent;
}

.btn-component{
	background-color: var(--component-button-action-default);
	border-color: var(--component-button-action-default);
	color: var(--component-button-onAction-default);
    border-radius: var(--global-radius-md);
}
.btn-component:hover{
	background-color: var(--component-button-action-hover);
	border-color: var(--component-button-action-hover);
	color: var(--component-button-onAction-default);
}
.btn-component:focus{
	box-shadow: none !important;
	background-color: var(--component-button-action-pressed);
	border-color: var(--component-button-action-pressed);
	color: var(--component-button-onAction-default);
}

.btn-component-outline{
	background-color: transparent;
	border-color: var(--component-button-action-default);
	color: var(--component-button-action-default);
    border-radius: var(--global-radius-md);
}
.btn-component-outline:hover{
	background-color: transparent;
	border-color: var(--component-button-action-hover);
	color: var(--component-button-action-hover);
}
.btn-component-outline:focus{
	box-shadow: none !important;
	background-color: transparent;
	border-color: var(--component-button-action-pressed);
	color: var(--component-button-action-pressed);
}

hr{
	background-color: var(--global-content-muted-default);
}

.container-wide{
	max-width: 1000px;
	margin: 0 auto;
	padding-left: var(--global-space-24);
	padding-right: var(--global-space-24);
}

@media screen and (min-width: 1038px) {
    .container-wide{
        max-width: 1366px;
    }
}

.badge-general {
    border: 1px solid transparent;
    border-radius: var(--badge-corner-radius);
    display: inline-block;
    padding: 0.3125rem 0.8125rem 0.3125rem 0.8125rem;
    text-align: center;
    word-break: break-word;
}

.card-badge .badge-product-out-of-stock{
    background-color: #797875;
    color: #FFFFFF;
    border-color: transparent;
    font-size: 0.9rem;
    line-height: 1.2em;
    letter-spacing: 0em;
}

.card-badge .badge-product-on-sale{
	background-color: #0A6847;
	color: #FFFFFF;
}

.card-badge .badge-product-is-in-buyer-account{
	background-color: #615EFC;
	color: #FFFFFF;
}

.card-badge .badge-product-is-in-buyer-account .icon{
	margin-right: 3px;
	position: relative;
	top: -2px;
}

.card .card-meta a{
    color: inherit !important;
}

.custom-style-color-placeholder-background {
    background-color: rgba(77, 77, 77, 0.1) !important;
}

.pagination-wrapper ul li a{
	border-radius: 0px;
}

.ratio{
    display: flex;
    position: relative;
    align-items: stretch;
}

.ratio:before{
    content: '';
    width: 0;
    height: 0;
    padding-bottom: var(--ratio-percent);
}

.page-with-sidebar{
	display: grid;
    gap: 4rem;
    align-items: flex-start;
    grid-template-columns: 1fr;
    grid-auto-columns: 3fr;
	grid-auto-flow: column;
}

@media (max-width: 1024px) {
    .page-with-sidebar{
        display: block;
    }

    .filters-wrapper-outer{
		display: none;
	}

	.filters-meta-wrapper .mobile-filter-button-wrapper{
		display: block !important;
		margin-bottom: 20px;
	}
}

@media (min-width: 1024px) {
    body > header, header.sticky, main > * {
        padding: 4rem max((100% - 71.25rem) / 2, 4rem);
    }
}

/* FORM CONTROL START */

.form-control{
	color: var(--global-content-regular-default);
	font-size: var(--global-fontSizes-body-md);
	background-color: var(--global-bg-base-default);
	border-color: var(--global-border-action-default);
	border-radius: var(--global-radius-md);
}

.form-control:hover{
	border-color: var(--global-border-action-hover);
}

.form-control:focus{
	border-color: var(--global-border-action-pressed);
	box-shadow: none;
	background-color: var(--global-bg-base-default);
	color: var(--global-content-regular-default);
}

.form-control:focus-visible{
	/* Highlight is for Firefox and -webkit-focus-ring-color is for Chrome */
	/*https://remysharp.com/til/css/focus-ring-default-styles */
	outline: 1px auto Highlight;
	outline-offset: -2px;
	outline: -webkit-focus-ring-color solid;
}

/* FORM CONTROL END */

/* FORM SELECT START */

.form-select{
	font-size: var(--global-fontSizes-body-md);
	padding: 10px 36px 10px 16px;
    color: var(--global-content-regular-default);
	border-radius: var(--global-radius-md);
    background-color: var(--global-bg-base-default);
    border-color: var(--global-border-action-default);
}

.form-select:hover{
	border-color: var(--global-border-action-hover);
}

.form-select:focus{
	border-color: var(--global-border-action-pressed);
	box-shadow: none;
}

.form-select:focus-visible{
	/* Highlight is for Firefox and -webkit-focus-ring-color is for Chrome */
	/*https://remysharp.com/til/css/focus-ring-default-styles */
	outline: 1px auto Highlight;
	outline-offset: -2px;
	outline: -webkit-focus-ring-color solid;
}

/*
	Filters has select inputs which should be disabled when request
	is being processed. A grey background does not look good, just
	change opacity here.
*/
.form-select:disabled{
	background-color: var(--global-bg-base-default);
	opacity: 0.5;
}

/* FORM SELECT END */

/* FORM CHECK START */

.form-check-input:checked{
    background-color: var(--global-primary-action-default);
    border-color: var(--global-primary-action-default);
}

.form-check-input:focus{
	box-shadow: none;
}

.form-check-input:focus-visible{
	/* Highlight is for Firefox and -webkit-focus-ring-color is for Chrome */
	/*https://remysharp.com/til/css/focus-ring-default-styles */
	outline: 1px auto Highlight;
	outline-offset: -2px;
	outline: -webkit-focus-ring-color solid;
}

.form-check-input:checked:disabled{
	background-color: #666666;
    border-color: #666666;
}

/* FORM CHECK END */

/* HEADER START */

.header-wrapper{
	border-bottom: 1px solid var(--global-tertiary-border);
	margin-bottom: var(--global-space-32);
}

.header .header-top{
	margin-top: var(--global-space-32);
	display: flex;
	justify-content: space-between;
}

.header .logo-wrapper a{
	display: inline-block;
}

.header .logo-wrapper .logo-image{
	/* 
	   For dark mode the logo that will be specified is
	   /images/designv2/logo/payhip-marketplace-light.svg
	*/
	background-image: url(https://payhip.com/images/designv2/logo/payhip-marketplace-light.svg);
    background-position: 0 11px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 50px;
    width: 215px;
}

.header .logo-wrapper .logo-badge{
    display: inline-block;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    padding-left: 0px;
    color: var(--global-primary-action-default);
    letter-spacing: 1px;
    vertical-align: top;
}

.header .header-categories-wrapper > ul{
	list-style-type: none;
	padding-left: 0px;
	margin-bottom: 0px;
	display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
}

.header .header-categories-wrapper > ul > li{
	position: relative;
}

.header .header-categories-wrapper > ul > li > a{
	display: inline-block;
    vertical-align: middle;
    color: var(--global-content-regular-default);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-left: var(--global-space-16);
    padding-right: var(--global-space-16);
    padding-top: var(--global-space-12);
    padding-bottom: var(--global-space-16);
}

.header .header-categories-wrapper > ul > li.active > a{
	color: var(--global-primary-action-default);
	border-bottom: 3px solid var(--global-primary-action-default);
}

.header .header-categories-wrapper > ul > li:not(.active) > a:hover{
	opacity: 0.75;
}

.header .header-categories-wrapper .header-category-dropdown-menu{
	z-index: 4;
    position: absolute;
    top: 100%;
    left: 0px;
    right: auto;
    background: var(--global-bg-elevated-default);
    max-width: 400px;
    border-radius: var(--global-radius-sm);
    padding-top: 8px;
    padding-bottom: 8px;
    /*box-shadow: 0 8px 15px rgba(0,0,0,.25),0 0 3px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.15);*/
    box-shadow: var(--global-boxShadow-high);
    margin-top: -5px;
    visibility: hidden;
    transition: transform .3s ease,opacity 250ms linear,visibility .3s linear;
    opacity: 0;
    transform-origin: 50% -10px;
    transform: scale(.9) rotateX(-45deg);
    width: 300px;
    max-height: 450px;
    overflow-y: auto;
    z-index: var(--global-zindex-header-dropdown);
}

.header .header-categories-wrapper li.open .header-category-dropdown-menu{
    visibility: visible;
    opacity: 1;
    transform: scale(1) rotateX(0deg);
}

.header .header-categories-wrapper .header-category-dropdown-menu a{
    display: block;
    color: var(--global-content-regular-default);
    text-overflow: ellipsis;
    padding: var(--global-space-8) var(--global-space-12);
}

.header .header-categories-wrapper .header-category-dropdown-menu a:hover{
	background-color: var(--global-content-regular-default);
    color: var(--global-bg-elevated-default);
}

.header .header-categories-wrapper .header-category-dropdown-arrow{
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    top: 120%;
    overflow: hidden;
    margin-top: -15px;
    transition: top .1s 0s ease;
    height: 10px;
    visibility: hidden;
}

.header .header-categories-wrapper .header-category-dropdown-arrow:before {
    top: 100%;
    position: absolute;
    width: 12px;
    height: 12px;
    top: 9px;
    left: 50%;
    margin-top: -5px;
    margin-left: -6px;
    background: var(--global-bg-elevated-default);
    transition: none;
    transform: rotate(45deg);
    box-shadow: var(--global-boxShadow-high);
    content: '';
    /* z-index needs to be higher otherwise box shadow of dropdown covers arrow */
    z-index: var(--global-zindex-high-than-header-dropdown);
}

.header .header-categories-wrapper li.open .header-category-dropdown-arrow{
    top: 100%;
    visibility: visible;
}

.header .header-categories-wrapper .go-back-link-wrapper svg.icon{
    width: 20px;
    height: 20px;
    position: relative;
    top: -2px;
    margin-right: 5px;
}

.header .header-categories-wrapper li .show-category-children-link svg.icon{
    width: 24px;
    height: 24px;
}

/* For tablet devices need to ensure the dropdown is away from right side otherwise scroll will appear */
@media screen and (max-width: 1210px) {
	.header .header-categories-wrapper li:last-child .header-category-dropdown-menu{
		left: -200px;
	}
}

.header .header-bottom{
	margin-top: var(--global-space-24);
}

.header .header-top-right .btn{
	margin-right: var(--global-space-12);
}

.header .header-top-right .btn:last-child{
	margin-right: 0px;
}

.header .header-library-button .icon{
	position: relative;
	top: -2px;
	margin-right: 5px;
}

.header .header-top-center{
	flex: 0 1 732px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.header .header-top-right{
	display: flex;
	align-items: center;
	/* This area needs to have a minimum width of 200px for smaller screen dimensions */
	flex: 0 0 200px;
}

.header .header-more-options-dropdown .btn:after{
	display: none;
}

.header .header-more-options-dropdown .dropdown-menu{
	background-color: var(--global-bg-elevated-default);
	border-radius: var(--global-radius-md);
	box-shadow: var(--global-boxShadow-low);
	border: none;
	overflow: hidden;
}

.header .header-more-options-dropdown .dropdown-menu a{
	color: var(--global-content-regular-default);
}

.header .header-more-options-dropdown .dropdown-menu a:hover{
	background-color: var(--global-tertiary-link-hover);
}

/* narnia */

.header .header-actions-mobile{
	display: none;
}

@media screen and (max-width: 1024px) {
	.header .header-actions-mobile,
	.header .header-top{
		display: block;
	}

	.header .header-actions-desktop,
	.header .header-categories-wrapper{
		display: none;
	}

	.header .header-top-left{
		display: flex;
		justify-content: space-between;
	}

	.header .search-bar-block{
		margin: 0px;
	}
}

/* HEADER END */

/* HEADER MOBILE START */

.header-mobile{
	border-bottom: 1px solid var(--global-tertiary-border);
	margin-bottom: var(--global-space-32);
	padding-bottom: var(--global-space-16);
}

.header-mobile .header-top{
	margin-top: var(--global-space-24);
	display: flex;
	justify-content: space-between;
}

.header-mobile .logo-wrapper a{
	display: inline-block;
}

.header-mobile .logo-wrapper .logo-image{
	/* 
	   For dark mode the logo that will be specified is
	   /images/designv2/logo/payhip-marketplace-dark.svg
	*/
	background-image: url(https://payhip.com/images/designv2/logo/payhip-marketplace-light.svg);
    background-position: 0 11px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 50px;
    width: 215px;
}

.header-mobile .logo-wrapper .logo-badge{
    display: inline-block;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    padding-left: 0px;
    color: var(--global-primary-action-default);
    letter-spacing: 1px;
    vertical-align: top;
}

.header-mobile .header-bottom{
	margin-top: var(--global-space-16);
}

.header-mobile .header-top-right .btn{
	margin-right: var(--global-space-12);
}

.header-mobile .header-top-right .btn:last-child{
	margin-right: 0px;
}

.header-mobile .header-library-button .icon{
	position: relative;
	top: -2px;
	margin-right: 5px;
}

.header-mobile .header-top-center{
	flex: 0 1 732px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.header-mobile .header-top-right{
	display: flex;
	align-items: center;
}

.header-mobile .search-bar-block{
	margin-left: 0px;
	margin-right: 0px;
}

/* HEADER MOBILE END */

/* PRODUCT CARD START */

.product-card-wrapper{
    box-shadow: var(--global-boxShadow-low);
	/*background-color: var(--global-bg-base-default);*/
	background-color: var(--global-bg-elevated-default);
	text-align: center;
	border-radius: var(--global-radius-md);
	overflow: hidden;
}

/* Make link focus state visible for accessibility */
.product-card-wrapper .product-url-link:focus-visible{
    outline-style: solid;
    outline-color: -webkit-focus-ring-color;
    outline-width: 2px;
}

.product-card-wrapper .product-name{
	font-size: var(--global-fontSizes-heading-lg);
	line-height: 1.6;
	font-weight: normal;
}

.product-card-wrapper .product-name a{
	color: inherit;
}

.product-card-wrapper .product-card-top-text{
	padding: var(--global-space-16);
	padding-bottom: 0px;
}

.product-card-wrapper .product-card-bottom{
	padding: var(--global-space-16);
}

.product-card-wrapper .card-meta{
	padding-top: 0px;
	color: var(--global-content-muted-default);
}

.product-card-wrapper .store-attribution{
	font-size: var(--global-fontSizes-body-md);
	margin-top: var(--global-space-4);
}

.product-card-wrapper .store-attribution a{
	position: relative;
	color: var(--global-content-muted-default);
	text-decoration: underline;
	/*
		I want the store link to have higher precendence than the
		overall product card link
	*/
	z-index: var(--global-zindex-lower-than-popular-tags);
}

.product-card-wrapper .meta-core{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.product-card-wrapper .meta-core .product-reviews{
	display: flex;
	align-items: center;
	font-size: var(--global-fontSizes-body-md);
}

.product-card-wrapper .meta-core .product-reviews svg.icon{
	margin-right: 5px;
	fill: var(--global-content-regular-default);
}

.product-card-wrapper .price-block{
	color: var(--global-content-regular-default);
	padding: var(--global-space-4) var(--global-space-8);
	border-radius: var(--global-radius-md);
	font-weight: 600;
	font-size: var(--global-fontSizes-body-md);
}

/* PRODUCT CARD END */

/* STAR RATING START */

.star-rating{
	color: #FFB828;
	width: 100px;
	height: 20px;
	display: block;
	position: relative;
	vertical-align: middle;
}

.star-rating .star-rating-indicator{
	bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.star-rating .star-rating-indicator .star-rating-indicator-layer{
    position: absolute;
    overflow: hidden;
    height: 20px;
    left: 0px;
    top: 0px;
    width: 100%;
}

.star-rating .star-rating-indicator .star-rating-indicator-layer svg{
    position: absolute;
    width: 100px;
    height: 20px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.star-rating .star-rating-indicator .star-rating-indicator-layer-foreground{
	width: 0;
}

/* STAR RATING END */

/* SEARCH BAR START */

.search-bar-block{
	margin: 0 0 0 40px;
	padding: 0 4px;
	flex: 1;
	flex-basis: 0.000000001px;
}

.search-bar-block form{
    height: 40px;
    position: relative;
    flex: 1;
    flex-basis: 0.000000001px;
    display: flexbox;
    display: flex;
    flex-direction: row;
}

.search-bar-block .inner{
    border: 1px solid transparent;
    background-color: transparent;
    border-radius: 0 40px 40px 0;
    cursor: pointer;
    height: 40px;
    width: 64px;
    margin: 0;
}

.search-bar-block .inner{
    position: relative;
    align-items: center;
    background-color: var(--global-bg-elevated-default);
    border: 1px solid var(--global-tertiary-border);
    border-radius: 40px;
    padding: 0 var(--global-space-16);
    flex: 1;
    flex-basis: 0.000000001px;
    display: flexbox;
    display: flex;
    flex-direction: row;
}

.search-bar-block.has-focus .inner{
	border-color: var(--global-primary-action-default);
}

.search-bar-block .search-input-wrapper{
	width: 100%;
}

.search-bar-block .search-input-wrapper input.search-input{
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: inherit;
    font-family: Roboto, Noto, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-left: 4px;
    max-width: 100%;
    outline: none;
    text-align: inherit;
    width: 100%;
    -ms-flex: 1 1 0.000000001px;
    -webkit-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
    -webkit-flex-basis: 0.000000001px;
    -ms-flex-preferred-size: 0.000000001px;
    flex-basis: 0.000000001px;
    outline: none;
}

.search-bar-block .search-button{
	position: relative;
	margin: 0;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	background: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
	color: inherit;
}

.search-bar-block .clear-button-wrapper{
    height: 24px;
    width: 24px;
    display: flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-bar-block .clear-button-wrapper .clear-button{
	position: relative;
	margin: 0;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	background: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
	flex: 1;
	flex-basis: 0.000000001px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
    min-width: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    color: inherit;
}

/* SEARCH BAR END */

/* SEARCH AUTOCOMPLETE START */

.search-autocomplete-wrapper{
	/* Needs to be above product cards */
	z-index: 100;
}

.search-autocomplete-wrapper .inner{
	background-color: var(--global-bg-elevated-default);
	border-radius: var(--global-radius-lg);
	box-shadow: var(--global-boxShadow-mid);
	margin-top: var(--global-space-4);
	overflow: hidden;
}

.search-autocomplete-wrapper .search-autocomplete-headline{
	padding: var(--global-space-16);
	padding-bottom: 0px;
	font-size: var(--global-fontSizes-heading-md);
}

.search-autocomplete-wrapper .search-autocomplete-list{
	
}

.search-autocomplete-wrapper ul.search-autocomplete-list{
	padding-left: 0px;
	margin-bottom: 0px;
	list-style-type: none;
}

.search-autocomplete-wrapper .search-autocomplete-list li{
	display: block;
}

.search-autocomplete-wrapper .search-autocomplete-list li a{
	padding: var(--global-space-8) var(--global-space-16);
    display: flex;
    gap: var(--global-space-16);
    align-items: center;
    color: var(--global-content-regular-default);
}

.search-autocomplete-wrapper .search-autocomplete-list li a:hover{
	background-color: var(--global-content-regular-default);
	color: var(--global-bg-elevated-default);
}

.search-autocomplete-wrapper .search-autocomplete-list .top{

}

.search-autocomplete-wrapper .search-autocomplete-list .bottom{
	opacity: 0.5;
}

.search-autocomplete-wrapper .search-autocomplete-list.categories{
	
}

.search-autocomplete-wrapper .search-autocomplete-list.products{
	
}

.search-autocomplete-wrapper .search-autocomplete-divider{
	border-bottom: 1px solid var(--global-tertiary-border);
	margin-top: var(--global-space-4);
	margin-bottom: var(--global-space-4);
}

.search-autocomplete-wrapper .search-autocomplete-list.products a{

}

.search-autocomplete-wrapper .product-thumbnail{
	width: var(--global-space-48);
}

.search-autocomplete-wrapper .product-thumbnail-inner{
	padding-bottom: 100%;
	position: relative;
}

.search-autocomplete-wrapper .product-thumbnail img{
	display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
	object-fit: cover;
	object-position: center center;
	border-radius: var(--global-radius-md);
}

.search-autocomplete-wrapper .product-details{
	
}

.search-autocomplete-wrapper .category-thumbnail{
	width: var(--global-space-48);
	height: var(--global-space-48);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.search-autocomplete-wrapper .category-thumbnail .category-thumbnail-bg{
	background-color: var(--global-tertiary-link-hover);
	border-radius: var(--global-radius-md);
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.search-autocomplete-wrapper .search-autocomplete-list li a:hover .category-thumbnail{
	color: var(--global-bg-elevated-default);
}

.search-autocomplete-wrapper .search-autocomplete-list li a:hover  .category-thumbnail-bg{
	background-color: var(--global-bg-elevated-default);
	opacity: 0.1;
}

/* SEARCH AUTOCOMPLETE END */

/* FILTERS START */

.filters-wrapper [role=navigation] menu{
    display: grid;
    gap: var(--global-space-12);
}

.filters-wrapper a{
	color: var(--global-content-regular-default);
}

.filters-wrapper li{
    list-style: none;
    padding-bottom: 0px;
}

.filters-wrapper [role=navigation] menu li .inner{
	display: flex;
	align-items: center;
}

.filters-wrapper [role=navigation] menu svg.icon.apply-margin-left{
	margin-left: var(--global-space-8);
}

.filters-wrapper [role=navigation] menu svg.icon.apply-margin-right{
	margin-right: var(--global-space-8);
}

.filters-wrapper .filter-navigation-wrapper .filter-navigation-top-level-menu{
	padding-left: 0px;
	margin-bottom: 0px;
}

.filters-wrapper .filter-section{
	border-bottom: 1px solid var(--global-tertiary-border);
	padding-bottom: var(--global-space-24);
	margin-bottom: var(--global-space-24);
}

.filters-wrapper .filter-body{
    padding-top: var(--global-space-8);
}

.filters-wrapper .filter-navigation-wrapper{
	padding-top: 0px;
}

.filters-wrapper .filter-navigation-wrapper a{
    color: var(--global-content-regular-default);
    position: relative;
    display: block;
}

.filters-wrapper .filter-navigation-wrapper li{
    position: relative;
}

.filters-wrapper .filter-navigation-wrapper menu li.show-hover-background:before{
    content: "";
    border-radius: 8px;
    transition-timing-function: ease-out;
    transition-property: background-color;
    transition-duration: 100ms;
    position: absolute;
    top: -7px;
    left: -10px;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.filters-wrapper .filter-navigation-wrapper li.show-hover-background:hover:before{
	background-color: var(--global-tertiary-link-hover);
}

.filters-wrapper .filter-header{
    font-size: var(--global-fontSizes-body-lg);
    font-weight: 600;
}

.filters-wrapper .filter-header .icon{
	position: relative;
	margin-right: 3px;
	top: -2px;
	opacity: 0.6;
	display: none;
}

.filters-wrapper .filter-related-tags-wrapper .count{
	opacity: 0.5;
}

.filters-wrapper .form-check-wrapper-outer{
	margin-bottom: var(--global-space-4);
}

.filters-wrapper .form-check-wrapper-outer .form-check-input,
.filters-wrapper .form-check-wrapper-outer .form-check-label{
	cursor: pointer;
}

.filters-wrapper .filter-extra-wrapper{
    border-bottom: none;
}

.filters-wrapper .filter-extra-wrapper a{
    color: var(--global-content-regular-default);
}

.filters-wrapper .filter-extra-wrapper a:hover{
    text-decoration: underline;
}

/* FILTERS END */

/* FILTERS META START */

.filters-meta-wrapper .active-filters-wrapper{
	align-items: center;
	display: flex;
}

.filters-meta-wrapper .active-filters-wrapper .remove-filter-button{
    font-size: var(--global-fontSizes-body-md);
    font-weight: 500;
    margin-bottom: 8px;
    margin-right: 8px;
    background-color: #FFF;
    padding: 5px 20px;
    display: inline-block;
    border-radius: var(--global-radius-xxl);
    border: 1px solid var(--global-tertiary-border);
}

.filters-meta-wrapper .active-filters-wrapper .remove-filter-button:hover{
	border-color: #C80036;
}

.filters-meta-wrapper .active-filters-wrapper .remove-filter-button:hover .icon{
	color: #C80036;
}

.filters-meta-wrapper .active-filters-wrapper .remove-filter-button .icon{
	width: 20px;
	height: 20px;
	margin-left: 10px;
	position: relative;
}

.filters-meta-wrapper .active-filters-wrapper .remove-filter-button .button-contents{
	display: flex;
	align-items: center;
}

.filters-meta-wrapper .active-filters-wrapper .clear-filters-link{
    cursor: pointer;
    font-size: var(--global-fontSizes-body-md);
    font-weight: 500;
	margin-bottom: 8px;
	margin-left: 8px;
	/* text should appear on one line */
	display: inline-block;
}

@media screen and (min-width: 1000px) {
	.filters-meta-wrapper .active-filters-wrapper .clear-filters-link{
		display: inline-block;
	}
}

.filters-meta-wrapper .number-of-results-message,
.filters-meta-wrapper .loading-results-message-first-request{
	color: var(--global-content-muted-default);
}

@media (min-width: 768px){
	.filters-meta-wrapper .number-of-results-message,
    .filters-meta-wrapper .loading-results-message-first-request{
		text-align: right;
	}
}

.filters-meta-wrapper .search-query-wrapper{
	font-size: var(--global-fontSizes-body-lg);
	font-weight: 600;
	margin-bottom: var(--global-space-16);
}

.filters-meta-wrapper .mobile-filter-button-wrapper{
	display: none;
}

.filters-meta-wrapper .mobile-filter-button .icon{
	position: relative;
	top: -2px;
	margin-right: 5px;
}

/* FILTERS META END */

/* MOBILE FILTER OFFCANVAS START */

#mobile-filter-offcanvas{
    background-color: var(--global-bg-page-default);
    color: var(--global-content-regular-default);
}

#mobile-filter-offcanvas .inner{
	height: calc(100% - 65px);
	overflow-y: auto;
	padding: 0px 24px;
}

#mobile-filter-offcanvas .button-wrapper{
	position: absolute;
    bottom: 20px;
    left: 24px;
    width: calc(100% - 46px);
}

#mobile-filter-offcanvas .button-wrapper .btn{
	width: 100%;
}

/* MOBILE FILTER OFFCANVAS END */

/* ALL MODALS START */

.modal .modal-content{
    color: var(--global-content-regular-default);
    background-color: var(--dialog-container);
    box-shadow: var(--dialog-shadow);
}

/* ALL MODALS END */

/* MORE FILTERS MODAL START */

#more-filters-modal .loading-state{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

#more-filters-modal .loading-state .spinner-wrapper{
    display: inline-block;
    vertical-align: middle;
}

#more-filters-modal .loading-state .spinner-wrapper .spinner{
    display: inline-block;
    width: 40px;
    height: 40px;
    border-style: solid;
    border-color: rgb(23,152,190) rgb(23,152,190) transparent transparent;
    border-width: 2px;
    border-radius: 50%;
    -webkit-animation: spinner-spin 0.8s linear 0s infinite normal none running;
    animation: spinner-spin 0.8s linear 0s infinite normal none running;
}

#more-filters-modal .error-state{
    color: #B8001F;
}

#more-filters-modal .core-contents input[type="checkbox"],
#more-filters-modal .core-contents label{
    cursor: pointer;
}

#more-filters-modal .save-button{
    margin-left: 15px;
}

#more-filters-modal .modal-footer-success-wrapper{
    width: 100%;
}

#more-filters-modal .modal-meta-message{
    font-size: 14px;
    padding: 10px;
    background-color: #F7F7F7;
    border-top: 1px solid #DEE2E6;
}

/* MORE FILTERS MODAL END */

/* MOBILE NAVIGATION OFFCANVAS START */

#mobile-navigation-offcanvas{
	background-color: var(--global-bg-page-default);
	color: var(--global-content-regular-default);
}

#mobile-navigation-offcanvas .inner{
	height: calc(100% - 65px);
	overflow-y: auto;
	padding: 0px 24px;
}

#mobile-navigation-offcanvas .button-wrapper{
	position: absolute;
    bottom: 20px;
    left: 24px;
    width: calc(100% - 46px);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--global-space-16);
}

#mobile-navigation-offcanvas .button-wrapper .icon{
	position: relative;
	top: -2px;
	margin-right: 5px;
}

#mobile-navigation-offcanvas .button-wrapper .btn{
	width: 100%;
}

#mobile-navigation-offcanvas .inner ul{
	padding-left: 0px;
	margin-bottom: 0px;
	list-style-type: none;
}

#mobile-navigation-offcanvas .inner li{
	padding: 10px 0px;
	display: block;
}

#mobile-navigation-offcanvas .inner li a{
	display: flex;
	justify-content: space-between;
	color: inherit;
}

#mobile-navigation-offcanvas .inner li a:not(.show-category-children-link){
	text-decoration: underline;
}

#mobile-navigation-offcanvas .inner li a svg.icon{
	width: 24px;
	height: 24px;
}

#mobile-navigation-offcanvas .inner .go-back-link-wrapper{
	margin-bottom: 10px;
}

#mobile-navigation-offcanvas .inner .go-back-link-wrapper a{
	color: inherit;
	text-decoration: none;
}

#mobile-navigation-offcanvas .inner .go-back-link-wrapper svg.icon{
	width: 20px;
	height: 20px;
	position: relative;
	top: -2px;
	margin-right: 5px;
}

/* MOBILE NAVIGATION OFFCANVAS END */

/* PAGNATION START */

.pagination-wrapper{
	margin-top: var(--global-space-32);
}

.pagination-wrapper .pagination{
	justify-content: center;
}

.pagination-wrapper .pagination li{
	margin-right: var(--global-space-12);
}

/*
.pagination-wrapper .pagination .page-link{
	background-color: var(--global-secondary-action-default);
	color: var(--global-primary-onMuted-default);
	border: none;
	border-radius: var(--global-radius-md);
	padding: var(--global-space-12) var(--global-space-16);
}

.pagination-wrapper .page-item.active .page-link{
	background-color: var(--component-button-action-default);
	color: var(--component-button-onAction-default);
}

.pagination-wrapper .page-link:hover{
	background-color: var(--global-secondary-action-pressed);
	color: var(--global-secondary-onActionBase-pressed);
}

.pagination-wrapper .page-link:focus{
	box-shadow: none;
	background-color: var(--global-secondary-action-pressed);
	color: var(--global-secondary-onActionBase-pressed);
}

.pagination-wrapper .page-item.active .page-link:focus{
	background-color: var(--component-button-action-hover);
	color: var(--component-button-onAction-hover);
}

.pagination-wrapper .page-item.active .page-link:focus{
	box-shadow: none;
	background-color: var(--component-button-action-pressed);
	color: var(--component-button-onAction-pressed);
}
*/

.pagination-wrapper .pagination .page-link{
	background-color: var(--global-secondary-action-default);
	color: var(--global-primary-onMuted-default);
	border: none;
	border-radius: var(--global-radius-md);
	padding: var(--global-space-8) var(--global-space-16);
    border: 2px solid transparent;
}

.pagination-wrapper .page-link:hover{
	box-shadow: var(--global-boxShadow-low);
}

.pagination-wrapper .page-link:focus{
	box-shadow: var(--global-boxShadow-low);
}

.pagination-wrapper .page-item.active .page-link{
	border-color: var(--global-primary-onMuted-default);
    color: var(--global-primary-onMuted-default);
    cursor: default;
}

.pagination-wrapper .page-item.active .page-link:hover{
	box-shadow: none;
}

/* PAGINATION END */

/* NPROGRESS START */

#nprogress .bar{
	background-color: var(--global-primary-action-default) !important;
}

/* NPROGRESS END */

/* BREADCRUMB START */

.breadcrumb-wrapper{
	margin-bottom: var(--global-space-32);
}

/* BREADCRUMB END */

/* FOOTER START */

.footer{
    margin-bottom: var(--global-space-56);
}

/* FOOTER END */

/* SKELETON START */

.skeleton-ui{
    animation-duration: 2000ms;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: skeleton-ui-animation;
    animation-timing-function: cubic-bezier(0.99, 0.01, 0.54, 0.54);
    background: linear-gradient(to right, var(--global-skeleton-background) 50%, var(--global-skeleton-foreground) 50%);
    background-size: 200%;
}

.skeleton-image{
    padding-top: 100%;
}

.skeleton-title{
    height: 33px;
    border-radius: 6px;
}

.skeleton-meta{
    width: 40%;
    height: 21px;
    margin: 0 auto;
}

/* SKELETON END */

/* START ANIMATION */

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

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


@keyframes skeleton-ui-animation {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: -100% 0
    }
}

/* END ANIMATION */