@charset "UTF-8";

:root {
	
	/* Scroll top link */
	--scroll-top-link-color: var(--white);
	--scroll-top-link-flash-color: var(--blue-dark1);
	--scroll-top-link-flash-shadow: 0 0 30px 0px var(--orange-base);
	
	/* catalog elements */
	--split-sides-border-color: var(--gray-medium);
	--magnifying-glass-bg: var(--transparent);
	--catalog-input-reference-color: var(--black);
	--catalog-input-reference-border-color: var(--black);
	--catalog-input-sub-reference-bg: var(--orange-base);
	--catalog-input-sub-reference-color: var(--blue-dark2);
	--catalog-input-sub-reference-border-color: var(--blue-dark2);
	--search-help-catalog-bg: var(--blue-washed);
	--catalog-cover-link: rgba(155, 185, 192, 0.12);
	--breadcrumb-background: var(--orange-base);
	--breadcrumb-link-color: var(--white);
	--breadcrumb-border-color: var(--white-semi-transparent);
	--breadcrumb-image-border: var(--blue-gray-light);
	--catalog-box-text-color: var(--black);
	--catalog-box-border: var(--blue-gray-light);
	--catalog-box-inner-border: var(--gray-medium);
	--catalog-image-background: var(--white);
	--catalog-image-overlay: var(--white-transparent);
	--catalog-left-menu-header-color: var(--blue-dark1);
	--catalog-left-menu-item-separator: var(--orange-light);
	--stock-ok-color: var(--green-text);
	--stock-dock-color: var(--orange-base);
	--stock-arriving-color: var(--blue-medium);
	--stock-soldout-color: var(--red-dark);
	--destock-color: var(--red);
	--noprice-coming-color: var(--green-text);
	--notify-button-bg: var(--blue-gray-base);
	--notify-button-color: var(--blue-washed-light2);
	
	/* urls */
	--catalog-topper-magnifying-glass-icon: url('../img/magnifying-glass-white.svg');
	--search-help-catalog-bg-img: url('../img/home-search-bg.jpg');
	--search-help-catalog-i-info: url('../img/i-information.svg');
}

/* common rules for .catalog */

.catalog > main {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: stretch;
}

.catalog #brands-disclaimer {
    padding: .5em 1.5em;
}

/* Split layout (left menu) */

.catalog .split-page-container {
    align-self: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
    padding: .5em 0;
}

.split-page-container .left-page-side {
	box-sizing: border-box;
	max-width: 250px;
	padding: 0 .5em;
	border-right: 2px solid var(--split-sides-border-color);
}

.split-page-container .right-page-side {
	box-sizing: border-box;
	max-width: 1200px;
	border-left: 2px solid var(--split-sides-border-color);
	padding: 0 .5em;
	margin-left: -2px;
}


/*-----------------------------------------
|          Google reCaptcha Badge          |
 -----------------------------------------*/

.quota-exceeded .grecaptcha-badge {
	visibility: visible;
}


/*-----------------------------------------
|              SCROLL TOP LINK             |
 -----------------------------------------*/

#top-link {
	position: fixed;
	right: 5px;
	bottom: 10px;
	transition: all .3s;
}

#top-link a {
	padding: 0 .1em;
	background: transparent;
	font-size: 3em;
	text-decoration: none;
	color: var(--scroll-top-link-color);
	text-shadow: 0 0 5px rgba(0, 0, 0, .3);
	border: 3px solid var(--scroll-top-link-color);
	box-shadow: 0 0 5px rgba(0, 0, 0, .3);
	border-radius: 10px;
	line-height: 1em;
	text-align: center;
	vertical-align: middle;
	opacity: .5;
	transition: all .3s;
}

#top-link.flashing a {
	color: var(--scroll-top-link-flash-color);
	border-color: var(--scroll-top-link-flash-color);
	box-shadow: var(--scroll-top-link-flash-shadow);
	opacity: 1;
}

#top-link a:hover,
#top-link a:focus {
	opacity: 1;
}


/*-----------------------------------------
|              CONTENT-TOPPER              |
 -----------------------------------------*/

#topper-icon.magnifying-glass {
	background: var(--magnifying-glass-bg);
	background-image: var(--catalog-topper-magnifying-glass-icon);
}

.content-topper #reference-search {
	position: absolute;
	right: 1em;
	bottom: 1em;
}

#reference-search input#reference {
	padding: .5em;
	color: var(--catalog-input-reference-color);
	border: 1px solid var(--catalog-input-reference-border-color);
	border-radius: .5em;
	font-size: 14px;
	font-weight: blod;
	font-weight: 700;
	margin-right: .5em;
}

#reference-search input#sub-reference {
	padding: .5em;
	background-color: var(--catalog-input-sub-reference-bg);
	color: var(--catalog-input-sub-reference-color);
	border: 1px solid var(--catalog-input-sub-reference-border-color);
	border-radius: .5em;
	font-size: 14px;
	font-weight: blod;
	font-weight: 700;
	
}

.message#topper-message {
	margin-bottom: 4em;
}

/*-----------------------------------------
|                BREADCRUMB                |
 -----------------------------------------*/

#breadcrumb-container {
	background: var(--breadcrumb-background);
	display: flex;
	flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

#catalog-breadcrumb {
	flex-grow: 1;
    display: flex;
    flex-flow: row nowrap;
    padding: 1em;
    max-width: 1400px;
    margin: 0 auto;
}

#catalog-breadcrumb .small-screen {
	display: none;
}

#breadcrumb-text {
	display: flex;
    flex-flow: row nowrap;
    padding: 0 1em;
}

#catalog-breadcrumb #breadcrumb-text > * {
	position: relative;
}

#catalog-breadcrumb .cover-link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#catalog-breadcrumb #breadcrumb-text > *,
#catalog-breadcrumb > .evolution-image {
	padding: .3em 2em;
	border-left: 2px solid var(--breadcrumb-border-color);
	display: flex;
	flex-flow: column nowrap;
}

#catalog-breadcrumb #breadcrumb-text > *:first-child {
	padding-left: 0;
}

#catalog-breadcrumb #breadcrumb-text > *:first-child,
#catalog-breadcrumb > .evolution-image {
	border-left: none;
}

#catalog-breadcrumb .header {
	justify-content: flex-start;
}

#catalog-breadcrumb h3 {
	margin: 0;
	padding: 0;
	font-size: 16px;
	text-transform: uppercase;
}

#catalog-breadcrumb .header a {
    white-space: nowrap;
}

#catalog-breadcrumb .header a,
#catalog-breadcrumb .evolution-image #edit-search {
	color: var(--breadcrumb-link-color);
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	font-size: 14px;
	transition: all .3s;
}

#catalog-breadcrumb .header a .icon,
#catalog-breadcrumb .evolution-image #edit-search .icon {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin-bottom: -.2em;
	background: url('../img/arrow-circle-gray.svg') no-repeat center;
	background-size: contain;
	transition: all .3s;
}

#catalog-breadcrumb .header a:hover,
#catalog-breadcrumb .evolution-image #edit-search:hover {
	text-decoration: underline;
}

#catalog-breadcrumb .header a:hover .icon,
#catalog-breadcrumb .evolution-image #edit-search:hover .icon {
	filter: brightness(200%);
}

#catalog-breadcrumb .category,
#catalog-breadcrumb .model,
#catalog-breadcrumb .brand {
	text-transform: uppercase;
}

#catalog-breadcrumb .label {
	white-space: nowrap;
}

#catalog-breadcrumb .value {
	font-weight: bold;
}

#catalog-breadcrumb .prefix {
	font-size: 10px;
}

#catalog-breadcrumb .category .description {
	margin-top: 13px;
}

#catalog-breadcrumb > .evolution-image {
	flex-grow: 1;
	align-items: flex-end;
	padding: 0 1em 0 0;
}

#catalog-breadcrumb .evolution-image #edit-search {
	white-space: nowrap;
   	padding: 0 4px 8px 4px;
}

/* --- hidden link on the large screen --- */
#catalog-breadcrumb .evolution-image #edit-search {
	display: none;
}

#catalog-breadcrumb .evolution-image .image {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-color: white;
	width: 6em;
	height: 100%;
	border: 1px solid var(--breadcrumb-image-border);
}

/*-----------------------------------------
|               SEARCH-HELP                |
 -----------------------------------------*/

.catalog .search-help {
	width: 100%;
	min-height: 400px;
	
    background-image: var(--search-help-catalog-bg-img);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}

.search-help #i-information {
	width: 128px;
	height: 128px;
    margin: 0 3em 2em 0;
	
	background: var(--transparent);
	background-image: var(--search-help-catalog-i-info);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
    
    box-sizing: border-box;
}

.search-help #empty-element-for-centering {
	width: 128px;
	height: 128px;
    margin: 2em 0 0 3em;
}

.search-help .search-help-contents {
	padding: .5em;
	max-width: 650px;
}

.search-help .search-help-contents h2,
.search-help .search-help-contents h3,
.search-help .search-help-contents #opening-hours {
	color: var(--blue-dark2);
}

.search-help .search-help-contents h2,
.search-help .search-help-contents h3 {
	font-weight: blod;
	font-weight: 800;
	margin: .5em 0;
}

.search-help .search-help-contents h2 {
	font-size: 48px;
}

.search-help .search-help-contents h3 {
	font-size: 32px;
	margin-bottom: .2em;
	white-space: pre-wrap;
}

.search-help .search-help-contents h3 > span {
	white-space: nowrap;
}

.search-help .search-help-contents #opening-hours {
	font-size: 24px;
	margin: .2em 0;
}

.search-help .search-help-contents .search-help-separator {
	height: 4px;
	width: 100%;
	background-color: var(--white);
	border-radius: .5em;
}

.search-help a {
	color: inherit;
	text-decoration: none;
}


/*-----------------------------------------
|                PRO-ONLY                  |
 -----------------------------------------*/

.catalog.pro-only .pro-only-message-container {
	width: 80%;
	align-self: center;
	
	display: flex;
	flex-flow: column;
	gap: 1em;
	
	padding: 3em .5em;
}

.catalog.pro-only p {
	margin: 0;
	padding: 0;
	text-align: center;
}

.catalog.pro-only .action-links {
	margin-top: 2em;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}


/*-----------------------------------------
|                 BRANDS                   |
 -----------------------------------------*/

.catalog.brands .brands-container {
	width: 80%;
	align-self: center;
	
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	
	padding: .5em;
}

/*-----------------------------------------
|               BRANDS-BOX                 |
 -----------------------------------------*/

.catalog .brand-box {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	
	min-width: 250px;
	height: 60px;
	
	color: var(--black);
	background-color: var(--white);
	
	border: 2px solid var(--gray-medium);
	border-bottom: none;
	
	padding: 5px 5px 9px 5px;
	margin: 10px;
	
	text-decoration: none;
	font-weight: blod;
	font-weight: 700;
	color: var(--blue-dark2);
	font-size: 18px;
	
	position: relative;
	
	transition: all .2s;
	
}

.catalog .brand-box::after {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: red;
	border-bottom: 6px solid var(--orange-base);
	content: "";
}

.catalog .brand-box:hover {
	filter: brightness(110%) contrast(110%);
	box-shadow: 0 0 5px var(--orange-base);
}

.catalog .brand-box > .prefix {
	position: absolute;
	top: 5px;
	left: 5px;
	color: var(--gray-medium);
	font-size: 14px;
}

/*-----------------------------------------
|      START - OVERRIDE .BRAND-BOX        |
 -----------------------------------------*/

.left-page-side.brands-container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: .5em;
}

.left-page-side .brand-box {
	min-width: 200px;
    height: 26px;
    margin: 0 0 6px 0;
    font-size: 13px;
    padding-bottom: 8px;
}

.left-page-side .brand-box::after {
	border-bottom-width: 4px;
}


.left-page-side .brand-box > .prefix {
    top: 0;
	font-size: 10px;
}

/*-----------------------------------------
|               EVOLUTIONS                 |
 -----------------------------------------*/

.catalog.evolutions .brands-container {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
}

.catalog.evolutions .evolutions-container {
	max-width: 1200px;
	
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.catalog.evolutions .evolution-box {
	max-width: 360px;
	width: 45%;
	
	color: var(--black);
	background-color: var(--white);
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
	
	border: 2px solid var(--gray-medium);
	border-bottom: 0;
	
	padding: 5px;
	margin: 10px;
	
	text-decoration: none;
	font-weight: bold;
	font-weight: 700;
	
	transition: all .2s;
	
	position: relative;
}

.catalog.evolutions .evolution-box::after {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: red;
	border-bottom: 6px solid var(--orange-base);
	content: "";
}

.catalog.evolutions .evolution-box .image-wrapper {
	width: 100%;
	height: 150px;
}

.catalog.evolutions .evolution-box .image-wrapper .image {
	width: 100%;
	height: 100%;
	
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.catalog.evolutions .evolution-box .text-wrapper {
	height: 4em;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
}

.catalog.evolutions .evolution-box .text-wrapper .name {
	color: var(--blue-dark2);
	text-align: center;
}

.catalog.evolutions .evolution-box .cover-link {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.catalog.evolutions .evolution-box:hover {
	filter: brightness(110%) contrast(110%);
	box-shadow: 0 0 5px var(--orange-base);
}
.catalog.evolutions .evolution-box:hover .text-wrapper {
	color: var(--blue-dark2);
	text-decoration: underline;
}



/*-----------------------------------------
|                 PRODUCTS                 |
 -----------------------------------------*/

.categories-menu h3 {
	margin: 0 0 1em 0;
	padding: 0;
	font-size: 16px;
	text-transform: uppercase;
	color: var(--catalog-left-menu-header-color);
	text-align: center;
}

.categories-menu h3 .value {
	font-weight: bolder;
	font-weight: 900;
}

.categories-menu ul {
	margin: 0;
	padding: 0 1em;
	display: flex;
	flex-direction: column;
}

.categories-menu li {
	margin: 0;
	padding: .7em 0 .7em 1.5em;
	background: url('../img/arrow-blue-dark.svg') no-repeat left top .8em;
	background-size: 1em;
	list-style-type: none;
	border-bottom: 3px solid var(--catalog-left-menu-item-separator);
}

.categories-menu li::marker {
    transform: translateX(1em);
}

.categories-menu a {
	color: inherit;
	font-weight: bold;
	font-weight: 700;
	text-decoration: none;
}

.categories-menu a:focus,
.categories-menu a:hover {
	text-decoration: underline;
}

/* products */

.products-list {
	display: flex;
	flex-flow: column nowrap;
}

.product-box {
	margin: 1em;
	padding: 1.5em 2em;
	
	color: var(--black);
	
	border: 2px solid var(--catalog-box-border);
	
	text-decoration: none;
	font-weight: bold;
	font-weight: 700;
	
	display: flex;
	flex-flow: column nowrap;
}

.product-box .description {
	display: flex;
	flex-flow: row nowrap;
}

.product-box .image-wrapper {
	flex-grow: 0;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 13em;
	height: 10em;
	border: 2px solid var(--catalog-box-inner-border);
	background-color: var(--catalog-image-background);
	padding: 4px;
	margin-right: 2em;
}

.product-box .image {
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: relative;
}

.product-box .destock {
	color: var(--destock-color);
	font-weight: normal;
}

.product-box .image .destock {
	position: absolute;
	left: 0;
	bottom: 0;
	display: none;
	background: var(--catalog-image-overlay);
}

.product-box .contents {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.product-box .name {
	margin: 0 0 1em 0;
	padding: 0;
	font-size: 24px;
	border-bottom: 2px solid var(--catalog-box-inner-border);
}

.product-box.public .short.name {
	display: none;
}

.product-box .details {
	display: flex;
	flex-flow: row nowrap;
}

.product-box .info {
	flex: 1;
	margin-right: 1em;
}
	
.product-box .prices {
	white-space: nowrap;
}
	
.product-box .prices + a {
	display: none;
}

.product-box .stock {
	margin-top: 1em;
	font-size: 14px;
}

.product-box .stock .icon {
	display: inline-block;
	border-radius: 50%;
	width: .7em;
	height: .7em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.product-box .stock .ok {
	color: var(--stock-ok-color);
}

.product-box .stock .ok.icon {
	background: var(--stock-ok-color);
}

.product-box .stock .dock {
	color: var(--stock-dock-color);
}

.product-box .stock .dock.icon {
	width: 1.2em;
	height: 1.2em;
	margin-bottom: -.2em;
	background-image: url('../img/icon-ondock.svg');
}

.product-box .stock .arriving {
	color: var(--stock-arriving-color);
}

.product-box .stock .arriving.icon {
	display: none;
}

.product-box .stock .soldout {
	color: var(--stock-soldout-color);
}

.product-box .stock .soldout.icon {
	background: var(--stock-soldout-color);
}

.product-box .price.public .value {
	color: var(--price-public-color);
}

.product-box .price.buy .value {
	color: var(--price-buy-color);
}

.product-box .price.sell .value {
	color: var(--price-sell-color);
}

.product-box .price.sell.nodef .value {
	color: var(--price-nodef-color);
}

.product-box .price .noprice {
	color: var(--price-nodef-color);
	font-weight: normal;
	font-style: italic;
}

.product-box .price .value.hidden {
	color: var(--price-nodef-color);
	font-weight: normal;
	font-style: italic;
	font-size: .8em;
}

.product-box .price .noprice.coming {
	color: var(--noprice-coming-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5em;
}

.product-box .price .noprice.coming .highlight {
	background-color: var(--noprice-coming-color);
	color: var(--body-background);
	font-weight: bold;
	padding: .3em .5em;
	border-radius: .2em;
}

.product-box .price .lowkey {
	font-size: .7em;
}

.product-box .order-form .stock {
	display: none;
}

.product-box .stock-qty-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.product-box .stock-qty-container .stock {
	display: inline-block;
	margin: 0;
	margin-right: 1em;
}

.product-box .order-form fieldset {
	border: none;
	padding: none;
	margin: none;
}

.product-box .order-form .fields .fieldset-contents {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.product-box .order-form .fields .fieldset-contents > * {
	margin-left: 1em;
}

.product-box .order-form .fields .fieldset-contents > .spacer {
	flex: 1;
	margin-left: 0;
}

.product-box .cart-button {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding: .4em 2em;
	font-size: 14px;
}

.product-box .cart-button .text {
	display: block;
}

.product-box .cart-button .icon {
	display: block;
	flex-shrink: 0;
	width: 2.7em;
	height: 2.4em;
	margin-right: .5em;
	background-image: url('../img/icon-cart-add.svg');
}

.product-box .notify-button {
	display: flex;
	flex-flow: row nowrap;
	gap: 1em;
	align-items: center;
	padding: .7em 2em;
	font-size: 14px;
	
	background-color: var(--notify-button-bg);
	color: var(--notify-button-color);
}

.product-box .notify-button .text {
	display: block;
}

.product-box .notify-button .icon {
	font-size: 1.5em;
	margin: 0;
}

.product-box .dock-button,
.product-box .dock-button:focus {
	text-transform: none;
	padding: .7em 2em;
	font-size: 14px;
	background-color: var(--gray--medium-light2);
	color: var(--stock-dock-color);
}

.product-box .dock-button:focus,
.product-box .dock-button:hover {
	box-shadow: inset 0 0 2px #fff8, inset 0 0 1px #0005;
	filter: none;
}

.product-box .dock-button .icon {
	width: 1.2em;
	height: 1.2em;
	margin-bottom: -.2em;
	background-image: url('../img/icon-ondock.svg');
}

.product-box .qty input {
	width: 3em;
	margin-left: .5em;
}


.no-result .french-parts-legal-info {
	background: var(--body-background);
	padding: 1em;
	border: 2px solid var(--catalog-box-border);
	color: var(--blue-dark1);
	font-style: normal;
	text-align: justify;
}

.no-result .french-parts-legal-info h1 {
	text-align: center;
	text-transform: uppercase;
	margin: 0;
}

.no-result .french-parts-legal-info em {
	color: var(--orange-base);
}

.no-result .french-parts-legal-info .warning {
	color: var(--orange-base);
	font-weight: bold;
	font-style: italic;
}

/*-----------------------------------------
|            ADD TO CART CONFIRM           |
 -----------------------------------------*/

.add .confirm-contents {
	box-sizing: border-box;
	margin: 0 auto;
	padding: 2em;
	min-height: 400px;
	max-width: 1200px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#add-cart-confirm-form {
	box-sizing: border-box;
	width: 100%;
	border: 2px solid var(--catalog-box-border);
	padding: 1em;
}

#add-cart-confirm-form h3 {
	padding: 0 0 .5em 0;
	text-transform: uppercase;
	border-bottom: 1px solid var(--catalog-box-inner-border);
}

#add-cart-confirm-form .messages {
	margin: .5em 0;
	padding: 0;
	min-height: 0;
}

.cart-product-box {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.cart-product-box .image-wrapper {
	flex-grow: 0;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 13em;
	height: 10em;
	border: 2px solid var(--catalog-box-inner-border);
	background-color: var(--catalog-image-background);
	padding: 4px;
	margin-right: 2em;
}

.cart-product-box .image {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: relative;
}

.cart-product-box .product-info {
	flex-grow: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.cart-product-box .name {
	margin: 0 0 1em 0;
	padding: 0;
	font-size: 18px;
	border-bottom: 2px solid var(--catalog-box-inner-border);
}

.cart-product-box .quantity {
	font-weight: bold;
	font-weight: 700;
	color: var(--gray-dark);
}

.cart-product-box .status {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-weight: 700;
	font-style: italic;
	margin-bottom: .5em;
}

.cart-product-box .status p {
	margin: .2em 0;
}

.cart-product-box .status.added {
	color: var(--green-text);
}

.cart-product-box .status.failed {
	color: var(--red-dark);
}

.cart-product-box .status.confirm {
	color: var(--orange-dark);
}

.cart-product-box .expiry {
	text-align: center;
	font-size: 13px;
	color: var(--form-messages-warning-background);
	font-style: normal;
}

.cart-product-box .expiry .warning {
	text-align: justify;
}

.cart-product-box .expiry em {
	font-style: normal;
	text-decoration: underline;
}

.cart-product-box .destock {
	color: var(--destock-color);
	font-style: italic;
	font-weight: bold;
    font-size: .9em;
    margin-bottom: .5em;
	display: none; /* FIXME: sentence to be improved, and this line should be removed */ 
}

#add-cart-confirm-form .submits .row1 {
	display: flex;
	flex-direction: row-reverse;
	align-items: baseline;
}

#add-cart-confirm-form .submits .row2 {
	text-align: right;
	margin-top: .3em;
}

#add-cart-confirm-form .submits .row1 > * {
	margin-left: .5em;
}

#add-cart-confirm-form .cancel,
#add-cart-confirm-form .undo,
#add-cart-confirm-form .abort {
	background: var(--gray-medium);
	color: var(--white);
	font-weight: normal;
}

#add-cart-confirm-form .confirm .icon {
	background-image: url('../img/icon-cart-add.svg');
}

#add-cart-confirm-form .undo .icon {
	background-image: url('../img/icon-remove-item.svg');
}

#add-cart-confirm-form .cart-link {
	color: var(--gray-dark);
	text-transform: uppercase;
	text-decoration: none;
	padding-left: 1.5em;
	padding-right: 1.2em;
	background: url('../img/icon-cart.svg') no-repeat bottom 80% left,
				url('../img/arrow-blue-medium.svg') no-repeat center right;
	background-size: 1.3em, .8em;
	border-bottom: 1px solid transparent;
	transition: all .3s;
}

#add-cart-confirm-form .cart-link:focus,
#add-cart-confirm-form .cart-link:hover {
	border-color: var(--gray-dark);
}

/*-----------------------------------------
|               NOITIFY FORM               |
 -----------------------------------------*/
.catalog.notify #product-notify-form {
	
	margin: 4em auto;
	width: 1024px;
	max-width: 95%;
	
}

#product-notify-form .cart-product-box {
	display: grid;
	gap: 1em;
	grid-template-areas: 	"p i i"
							"p f s";
	grid-template-columns: auto 1fr max-content;
}

#product-notify-form .cart-product-box .image-wrapper {
	grid-area: p;
	margin: 0;
}

#product-notify-form .cart-product-box .product-info {
	grid-area: i;
}

#product-notify-form .cart-product-box .field {
	grid-area: f;
	display: flex;
	flex-direction: column;
	gap: .5em;
	align-self: end;
}

#product-notify-form .cart-product-box .submits {
	grid-area: s;
	align-self: end;
	justify-self: end;
	
	display: flex;
	gap: .5em;
	flex-direction: column-reverse;
}

#product-notify-form .abort {
	background: var(--gray-medium);
	color: var(--white);
	font-weight: normal;
}

@media screen and (max-width: 850px) {
	#product-notify-form .cart-product-box {
		grid-template-areas: 	"p i"
								"p f"
								"p s";
	}
	
	#product-notify-form .cart-product-box .submits {
		flex-direction: row-reverse;
	}
}

@media screen and (max-width: 600px) {
	#product-notify-form .cart-product-box {
		grid-template-areas: 	"p"
								"i"
								"f"
								"s";
	}

	#product-notify-form .cart-product-box .image-wrapper {
		justify-self: center;
	}
}


/*-----------------------------------------
|              SEARCH RESULTS              |
 -----------------------------------------*/

.reference-search-header {
	background: var(--breadcrumb-background);
	display: flex;
	flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}


.reference-search-header h2 {
    max-width: 1400px;
	flex-grow: 1;
	text-align: center;
	padding: 1em;
	margin: 0;
	font-size: 16px;
	text-transform: uppercase;
}

.reference-search-header h2 .value {
	color: var(--breadcrumb-link-color);
}

#reference-search-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 400px;
	padding: 2em 1em 0 1em;
}

#reference-search-results .brand {
	max-width: 1200px;
	width: 80%;
	margin-bottom: 1em;
}

#reference-search-results .brand .jssummary {
	background: var(--blue-washed);
	padding: .3em 1em;
	border-radius: 2px;
	color: var(--white);
	font-weight: bold;
}

#reference-search-results .brand .jsdetails {
	padding-left: 1em;
	padding-top: .5em;
}

#reference-search-results .evolution {
	margin-bottom: 1em;
	width: auto;
}

#reference-search-results .evolution .jssummary {
	background: var(--orange-washed);
	font-weight: normal;
	display: flex;
	flex-flow: row nowrap;
	align-items: baseline;
	padding: .2em 1em .2em 1em;
	margin-left: 1em;
	margin-top: .5em;
	font-weight: bold;
}

#reference-search-results .evolution .prefix,
#reference-search-results .evolution .label {
	font-weight: normal;
}

.search-breadcrumb {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	box-sizing: border-box;
	width: 100%;
}

.search-breadcrumb .breadcrumb-text {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.search-breadcrumb .breadcrumb-text > * {
	position: relative;
	padding: 0 1em;
	border-left: 2px solid var(--white);
}

.search-breadcrumb .breadcrumb-text > *:first-child {
	border-left: none;
}

.search-breadcrumb .breadcrumb-text > *:hover {
	text-decoration: underline;
}

#reference-search-results .search-breadcrumb .brand {
	position: relative;
	width: auto;
	max-width: none;
	margin: 0;
}

.search-breadcrumb .cover-link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.search-breadcrumb .evolution-image {
	align-self: stretch;
	position: relative;
	width: 10em;
}

.search-breadcrumb .evolution-image .image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-color: white;
	border: 1px solid var(--breadcrumb-image-border);
}

/*-----------------------------------------
|          CATEGORIES side-menu            |
 -----------------------------------------*/


/*-----------------------------------------
|                CATEGORIES                |
 -----------------------------------------*/

.catalog .category-box {
	width: 320px;
	height: 260px;
	
	color: var(--black);
	background-color: var(--white);
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
	
	border: 2px solid var(--gray-medium);
	border-bottom: none;
	
	padding: .5em;
	margin: 10px;
	
	transition: all .2s;

	text-decoration: none;
	font-weight: blod;
	font-weight: 700;
	
	position: relative;
}

.catalog .category-box::after {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: red;
	border-bottom: 6px solid var(--orange-base);
	content: "";
}

.catalog .category-box .image-wrapper {
	width: 100%;
	height: 75%; 
}

.catalog .category-box .image-wrapper .image {
	width: 100%;
	height: 100%;
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

.catalog .category-box .text-wrapper {
	width: 100%;
	height: 25%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.catalog .category-box .text-wrapper .name {
	color: var(--blue-dark2);
	font-size: 20px;
	text-align: center;
}

.catalog .category-box .cover-link {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.catalog .category-box:hover {
	filter: brightness(110%) contrast(110%);
	box-shadow: 0 0 5px var(--orange-base);
}
.catalog .category-box:hover .text-wrapper {
	color: var(--blue-dark2);
	text-decoration: underline;
}


/*-----------------------------------------
|           EVOLUTION-CATEGORIES           |
 -----------------------------------------*/

.catalog.evolution.categories .evolution-categories {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

/*-----------------------------------------
|                TEXT-INFO                 |
 -----------------------------------------*/

.catalog.evolutions .evolution-box .text-info,
.catalog.categories .category-box .text-info {
	position: absolute;
	top: 0;
	right: 0;

	padding: .2em .5em .2em .3em;
	font-size: 10px;
	color: var(--blue-dark2);
}

.catalog.evolutions .evolution-box:hover .text-info,
.catalog.categories .category-box:hover .text-info {
	color: var(--blue-dark2);
	text-decoration: underline;
}

/*-----------------------------------------
|                OVER-QUOTA                |
 -----------------------------------------*/

.quota-exceeded .page-container,
#banned-message {
	max-width: 1200px;
	align-self: center;
	text-align: center;
	padding: 0 .5em;
}

.quota-exceeded .page-container h3,
#banned-message h3 {
	text-align: center;
}

#quota-exceeded-form {
	text-align: center;
	display: inline-block;
	margin: 0 auto;
	border: 1px solid var(--gray-medium);
	padding: 1em;
}

#quota-exceeded-form .submits {
	text-align: right;
	margin-top: .5em;
}

#banned-message {
	padding-left: 1em;
}

.quota-exceeded .explain,
#banned-message .explain {
	text-align: justify;
	font-style: italic;
}

.quota-exceeded blockquote,
#banned-message blockquote {
	background-color: var(--white-transparent);
	font-size: 14px;
	text-align: justify;
	margin-top: 0;
	padding: .5em;
}

/*-----------------------------------------
|               QUESTION-CARD              |
 -----------------------------------------*/

.catalog .question-card {
	margin: 1em;
	max-width: 100%;
    width: auto;
}

/*-----------------------------------------
|              MEDIA QUERIES               |
 -----------------------------------------*/

@media only screen and (max-device-width: 1140px), screen and (max-width: 1140px) {
	
	.search-help .search-help-contents h2 {
		font-size: 38px;
	}
	
	.search-help .search-help-contents h3 {
		font-size: 26px;
	}
	
	.search-help .search-help-contents #opening-hours {
		font-size: 20px;
	}
	
	.search-help #i-information {
   		margin-right: 2em;
	}
	
	.search-help #empty-element-for-centering {
	    margin-left: 0;
	}
	
	#catalog-breadcrumb #breadcrumb-text > * {
		padding: .3em 1em;
	}
	
	.product-box .details {
	    flex-direction: column;
	}
}

@media only screen and (max-device-width: 1024px), screen and (max-width: 1024px) {
	
	.catalog .split-page-container .left-page-side {
		display: none;
	}
	
	.catalog .split-page-container .right-page-side {
		border-right: none;
	}
	
	.search-help #empty-element-for-centering {
		display: none;	
	}
	
	.product-box .details {
	    flex-direction: row;
	}
	
	.product-box .prices {
		margin-top: 0;
	}
	
	#reference-search-results .brand {
		width: 100%;
	}
}

@media only screen and (max-device-width: 860px), screen and (max-width: 860px) {
	.search-help .search-help-contents {
		max-width: 500px;
	}
	
	.product-box .details {
		flex-direction: column;
		flex-grow: 1;
		justify-content: space-between;
	}
	
	.product-box .stock-qty-container {
		flex-wrap: wrap;
	}
	
	.product-box .prices {
		margin-top: .5em;
		white-space: normal;
		text-align: right;
	}
	
	.product-box .prices .label,
	.product-box .prices .value {
		white-space: nowrap;
	}
	
	.product-box .prices .label {
		margin-right: 1em;
	}
}

@media only screen and (max-device-width: 800px), screen and (max-width: 800px) {
	

	#catalog-breadcrumb .small-screen {
		display: block;
	}
	#catalog-breadcrumb .large-screen {
		display: none;
	}
	#catalog-breadcrumb .prefix {
		display: none;
	}
	
	#catalog-breadcrumb #breadcrumb-text {
	    flex-flow: column nowrap;
	    justify-content: flex-start;
	    align-items: flex-start;
	    flex-grow: 1;
	}
	#catalog-breadcrumb > .evolution-image {
		padding: 0;
		flex-grow: 0;
		align-items: stretch;
	}
	#catalog-breadcrumb > .evolution-image .image {
		width: auto;
	}
	
	#catalog-breadcrumb #breadcrumb-text > * {
		border-left: none;
		padding: .2em 0;
	}
	
	#catalog-breadcrumb .category,
	#catalog-breadcrumb .model .description {
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}
	
	/* --- hidden link on the small screen --- */
	#catalog-breadcrumb .header a {
		display: none;
	}
	
	/* --- visible link on the small screen --- */
	#catalog-breadcrumb .evolution-image #edit-search {
		display: inline;
	}
	
	#catalog-breadcrumb .category .description {
	    margin-top: 0;
	}
}

@media only screen and (max-device-width: 768px), screen and (max-width: 768px) {
	
	#brands-disclaimer #registered-trademark {
		font-size: 13px;
	}
	
	#brands-disclaimer #adaptive-interchangeable {
		font-size: 15px;
	}
	
	.catalog .search-help {
		background-position: left 25% center;
	}
	
	.catalog .search-help {
		flex-flow: column nowrap;
		justify-content: flex-start;
		min-height: 0;
	}
	
	.search-help #i-information {
		width: 84px;
		height: 84px;
   		margin: 1em 0 0 0;
	}
	
	.search-help .search-help-contents {
		max-width: 450px;
		margin: 0 auto; 
	}
	
	.search-help .search-help-contents h2,
	.search-help .search-help-contents h3,
	.search-help .search-help-contents #opening-hours {
		text-align: center;
	}
	
	.search-help .search-help-contents h2 {
		font-size: 34px;
		margin-top: 0;
	}
	
	.search-help .search-help-contents h3 {
		font-size: 24px;
	}
	
	.search-help .search-help-contents #opening-hours {
		font-size: 18px;
	}
	
	.catalog.evolutions .evolution-box {
		width: 100%;
	}
	
	.catalog.evolutions .evolution-box .image-wrapper {
		height: 120px;
	}
	
	.catalog .category-box {
		width: 260px;
		height: 200px;
		padding: .3em;
		margin: 5px;
	}
	
	.product-box {
		padding: 1em;
	}
	
	.product-box .image-wrapper {
		margin-right: 1em;
	}
	
	.product-box .name {
		margin-bottom: .5em;
	}
	
	.product-box.public .short.name {
		display: block;
	}
	
	.product-box.public .long.name {
		display: none;
	}
	
	.product-box .info {
		font-size: 14px;
	}
	
	.product-box .order-form {
		margin-top: .2em;
	}
	
	.product-box .order-form .stock-qty-container {
		margin-left: 0;
	}
	
	.product-box .order-form .spacer {
		display: none;
	}
	
	.product-box .image .destock {
		display: block;
	}
	
	.product-box .order-form .fields .fieldset-contents {
		justify-content: space-between;
	}
	
	.search-breadcrumb .breadcrumb-text {
		flex-direction: column;
	}
	
	.search-breadcrumb .breadcrumb-text > * {
		border: none;
		padding: 0;
	}
	
	.search-breadcrumb .breadcrumb-text .brand > *,
	.search-breadcrumb .breadcrumb-text .model > * {
		display: inline;
	}
}

@media only screen and (max-device-width: 650px), screen and (max-width: 650px) {
	
	.product-box .description {
		flex-direction: column;
		align-items: center;
	}
	
	.product-box .image-wrapper {
		margin-right: 0;
	}
	
	.product-box .contents {
		align-self: stretch;
	}
	
}

@media only screen and (max-device-width: 560px), screen and (max-width: 560px) {
	
	.catalog.evolutions .evolution-box .image-wrapper {
		height: 90px;
	}
	
	#catalog-breadcrumb {
		font-size: 14px;
	}
	
	#catalog-breadcrumb .evolution-image #edit-search {
		font-size: 12px;
	    padding: .5em 0px;
	}
	
	.cart-product-box {
	    flex-direction: column;
	    align-items: center;
	}
	
	.cart-product-box .product-info {
		margin-top: 1em;
	}
	
	.cart-product-box .status {
		margin-bottom: .5em;
	}
	
}

@media only screen and (max-device-width: 520px), screen and (max-width: 520px) {
	
	#reference-search-results .evo-display {
		flex-direction: column;
		align-items: center;
	}
	
	#reference-search-results .evo-display > .image-wrapper {
		width: 100%;
	}
}

@media only screen and (max-device-width: 460px), screen and (max-width: 460px) {
	
	.search-help #i-information {
		width: 56px;
		height: 56px;
	}
	
	.search-help .search-help-contents {
		padding-left: 1em;
		padding-right: 1em; 
	}
	
	.search-help .search-help-contents h2 {
		font-size: 30px;
	}
	
	.search-help .search-help-contents h3 {
		font-size: 22px;
	}
	
	.search-help .search-help-contents #opening-hours {
		font-size: 16px;
	}
	
	.catalog.evolutions .evolution-box {
	    margin: 4px;
	}
	
	.catalog.evolutions .evolution-box .text-wrapper {
		font-size: 13px;
	}
	
	#catalog-breadcrumb {
		box-sizing: border-box;
		padding: .3em;
	}
	
	#catalog-breadcrumb .evolution-image {
		padding: 0 .2em .2em 0;
	}
	
	.search-breadcrumb {
		flex-direction: column;
	}
	
	.search-breadcrumb .evolution-image {
		align-self: stretch;
		width: auto;
		height: 5em;
	}
	
	.product-box .order-form .fields .fieldset-contents {
		flex-flow: column;
	}
	
	.product-box .order-form .cart-button {
		margin-top: .2em;
	}
	
	.add .confirm-contents {
   		padding: 2em .5em;
	}
	
}

@media only screen and (max-device-width: 380px), screen and (max-width: 380px) {
		
	.catalog.evolutions .evolutions-container {
		padding: 3px;
	}
	
	.centered-contents h1 {
		font-size: 38px;
	}
	
	#catalog-breadcrumb {
	    flex-flow: column nowrap;
	}

	#catalog-breadcrumb h3 {
	    font-size: 14px;
	}
	
	#catalog-breadcrumb #edit-search {
		text-align: right;
	}
	
	#catalog-breadcrumb .evolution-image {
		height: 8em;
		align-self: stretch;
	}
	
	#catalog-breadcrumb .evolution-image .image {
		width: auto;
	}
}

@media only screen and (max-device-width: 320px), screen and (max-width: 320px) {
	
}