/*
 * classic.css: the classic storefront (VAI Ecom Essential) on today's libraries and data.
 * Loaded after Bootstrap 3, style.css and media.css (left as they were). It covers:
 *   - Swiper (classic.js) inside the old FlexSlider / bxSlider markup, with the old controls
 *   - pop-ups and photos in GLightbox
 *   - the hover photo strip (was Brazzers-Carousel), native selects (was Chosen), the price range
 *   - header additions: language switch, counts, sign-out button, cookie bar, WhatsApp button
 * Brand colours (admin › Frontend colours) are printed by the layout after this file.
 */

/* ------------------------------------------------------------------------------------------------ */
/* Base                                                                                             */
/* ------------------------------------------------------------------------------------------------ */
.classic-skip {
	position: absolute;
	top: -60px;
	left: 10px;
	z-index: 10000;
	padding: 10px 16px;
	background: #373d54;
	color: #fff;
	font-size: 14px;
}
.classic-skip:focus {
	top: 10px;
	color: #fff;
}
.classic-svg-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}
.classic-busy {
	opacity: 0.6;
	pointer-events: none;
	cursor: progress;
}
button.classic-link {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* ------------------------------------------------------------------------------------------------ */
/* Header                                                                                           */
/* ------------------------------------------------------------------------------------------------ */
.header_top .container:after {
	content: "";
	display: block;
	clear: both;
}
.header_top .contactinfo li a {
	color: inherit;
}
.classic-langs {
	float: right;
	margin: 0 0 0 10px;
	padding: 7px 0 0;
	list-style: none;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
}
.classic-langs li {
	display: inline-block;
	margin: 0 0 0 2px;
}
.classic-langs a {
	display: inline-block;
	min-width: 30px;
	padding: 3px 6px;
	border: 1px solid #e0e4f6;
	background: #fff;
	color: #373d54;
	text-align: center;
	line-height: 1.4;
}
.classic-langs a:hover,
.classic-langs a:focus {
	border-color: #373d54;
	text-decoration: none;
}
.classic-langs a[aria-current="true"] {
	background: #373d54;
	border-color: #373d54;
	color: #fff;
}
.social-icons li a .classic-svg-icon {
	box-sizing: content-box;
	padding: 11px 15px;
	margin-bottom: -1px;
	vertical-align: middle;
	transition: all 0.5s ease 0s;
}
.social-icons li a:hover .classic-svg-icon {
	background: #000;
	color: #fff;
}
.social-icons .fa-snapchat:hover {
	background: #e8d800;
	color: #fff;
}
.social-icons .fa-telegram:hover {
	background: #229ed9;
}
.social-icons .fa-skype:hover {
	background: #00aff0;
}
.social-icons .fa-google:hover {
	background: #ce3c2d;
}
.shop-menu ul {
	margin: 0;
	padding: 0;
}
.shop-menu .topauth form {
	display: inline;
	margin: 0;
}
.shop-menu .topauth button.classic-link {
	font-size: 14px;
	padding: 2px 0;
	line-height: 1;
	color: #373d54;
}
.shop-menu .topauth button.classic-link:hover .shop-menu-ttl {
	border-color: #5f6680;
}
.toplogo .classic-logo-text {
	display: block;
	font-family: 'PT Serif', serif;
	font-size: 30px;
	font-weight: 700;
	color: #373d54;
	line-height: 1.2;
}
/* Before the pop-up opens it, the map waits out of the layout (the old 0×0 box overflowed in right-to-left pages). */
.footer-wrap .f-block-modal.f-block-modal-map {
	display: none;
}
/* Keyboard: the categories menu opens like on hover while focus is inside it. */
.topcatalog:focus-within .topcatalog-list,
.topcatalog-list li:focus-within > ul {
	overflow: initial;
	transform: translate3d(0, 0, 0);
	visibility: visible;
	opacity: 1;
	width: auto;
}
.topmenu .mainmenu li.mainmenu-more:focus-within .mainmenu-sub {
	visibility: visible;
	opacity: 1;
}

/* ------------------------------------------------------------------------------------------------ */
/* Carousels: Swiper in the old FlexSlider markup (classic.js "carousel")                           */
/* ------------------------------------------------------------------------------------------------ */
.classic-carousel {
	position: relative;
}
/* Same low specificity as the old flexslider.css reset, so style.css still pads and sizes the slides. */
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav,
.flex-direction-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.flexslider .slides img {
	display: block;
	width: 100%;
	height: auto;
}
.flex-control-nav {
	position: absolute;
	bottom: -40px;
	width: 100%;
	text-align: center;
	z-index: 2;
}
.flex-control-nav li {
	display: inline-block;
	margin: 0 6px;
}
.flex-control-paging li a {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.5);
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
}
.flex-control-paging li a:hover {
	background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
	background: rgba(0, 0, 0, 0.9);
	cursor: default;
}
.flex-direction-nav a {
	position: absolute;
	top: 50%;
	z-index: 10;
	display: block;
	width: 20px;
	height: 18px;
	margin: -9px 0 0;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	text-decoration: none;
	cursor: pointer;
	background: url(../img/nav1.png) no-repeat left top;
	transition: all 0.2s ease-in;
}
.flex-direction-nav .flex-prev {
	left: -50px;
	background-position: left bottom;
}
.flex-direction-nav .flex-next {
	right: -50px;
}
.flex-direction-nav .flex-disabled,
.flex-direction-nav .swiper-button-lock {
	opacity: 0 !important;
	cursor: default;
	pointer-events: none;
}
.flex-direction-nav a:focus-visible,
.flex-control-paging li a:focus-visible,
.bx-controls-direction a:focus-visible {
	outline: 2px solid #3a89cf;
	outline-offset: 2px;
	opacity: 1;
}
@media screen and (max-width: 860px) {
	.flex-direction-nav .flex-prev {
		left: 10px;
	}
	.flex-direction-nav .flex-next {
		right: 10px;
	}
}

/* Home slider: the old fade stacking (float + negative margin) is Swiper's job now. */
.fr-slider .slides > li:first-child {
	opacity: 1;
}
.fr-slider .swiper-wrapper > .swiper-slide {
	float: none;
	margin-right: 0;
}
.fr-slider .slides li img {
	width: 100%;
}
/* Product rows on the home page: the tab bar wraps instead of hiding categories. */
.fr-pop-tabs.sections-show {
	height: auto;
}
.fr-pop-tab .swiper-slide.prod-i {
	float: none;
}
.fr-pop-tab .flex-control-nav {
	position: absolute;
}
.fr-pop-tab.classic-carousel .flex-viewport {
	padding-bottom: 10px;
}
/* Special offers and related products */
.discounts-list .swiper-slide,
.prod-related-car .swiper-slide,
.post-rel-wrap .swiper-slide,
.brands-list .swiper-slide {
	float: none;
}
.discounts-list .swiper-slide.discounts-i {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------------------------------------ */
/* Product photos: Swiper in the old bxSlider markup (classic.js "gallery")                         */
/* ------------------------------------------------------------------------------------------------ */
.bx-wrapper {
	position: relative;
	margin: 0 auto;
	padding: 0;
}
.bx-wrapper img {
	display: block;
	max-width: 100%;
}
.prod-slider .prod-slider-car.swiper-wrapper,
.prod-thumbs .prod-thumbs-car.swiper-wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
}
.prod-slider .swiper-slide,
.prod-thumbs .swiper-slide {
	float: none;
}
.prod-thumbs li.swiper-slide {
	margin: 0;
	cursor: pointer;
}
.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: block;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	overflow: hidden;
	text-indent: -9999px;
	outline: 0;
}
.bx-wrapper .bx-prev {
	left: 10px;
}
.bx-wrapper .bx-next {
	right: 10px;
}
.bx-wrapper .bx-controls-direction a.disabled,
.bx-wrapper .bx-controls-direction a.swiper-button-lock {
	display: none;
}
.prod-slider-wrap.classic-single .prod-thumbs {
	display: none;
}
.prod-slider .fancy-img {
	cursor: zoom-in;
}

/* ------------------------------------------------------------------------------------------------ */
/* Testimonials                                                                                     */
/* ------------------------------------------------------------------------------------------------ */
.reviewscar-wrap {
	position: relative;
	overflow: hidden;
}
.reviewscar-thumbs .swiper-slide img,
.reviewscar-thumbs .classic-avatar {
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}
.reviewscar-thumbs .classic-avatar {
	background: #e0e4f6;
	color: #373d54;
	font-size: 26px;
	font-weight: 700;
	line-height: 80px;
	text-align: center;
	text-transform: uppercase;
}
.reviewscar .classic-stars {
	display: block;
	margin: 12px 0 0;
	color: #f5a623;
	font-style: normal;
	letter-spacing: 2px;
}
.reviewscar .classic-quote-product {
	display: block;
	margin: 6px 0 0;
	font-size: 12px;
	font-style: normal;
}

/* ------------------------------------------------------------------------------------------------ */
/* Lightbox and pop-ups (GLightbox)                                                                 */
/* ------------------------------------------------------------------------------------------------ */
.classic-lightbox .goverlay {
	background: rgba(0, 0, 0, 0.75);
}
.classic-modal .gprev,
.classic-modal .gnext,
.classic-single .gprev,
.classic-single .gnext {
	display: none;
}
.classic-modal .gslide-inline {
	max-width: 92vw;
}
.classic-modal .ginlined-content {
	padding: 0;
}
.ginlined-content .f-block-modal {
	display: block;
}
.ginlined-content .f-block-modal.f-block-modal-content {
	padding: 20px;
}
.ginlined-content .f-block-modal.f-block-modal-content .f-block-modal-img {
	max-width: 100%;
	height: auto;
}
.ginlined-content .f-block-modal.f-block-modal-map,
.ginlined-content .f-block-modal.f-block-modal-map .allstore-gmap {
	width: 700px;
	max-width: 100%;
	height: 400px;
	max-height: 70vh;
}
.f-block-modal-map .allstore-gmap > div {
	width: 100%;
	height: 100%;
}
.ginlined-content .f-block-modal-video {
	width: 853px;
	max-width: 92vw;
}
.classic-video {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	background: #000;
}
.classic-video iframe,
.f-block-modal-video .classic-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.f-block-modal-callback .modalform {
	max-width: 100%;
}
.f-block-modal-callback .modalform input[type=tel] {
	border: 1px solid #e0e4f6;
	width: 100%;
	padding: 0 14px;
	height: 42px;
	margin: 0 0 14px;
	font-size: 14px;
}
.modalform .classic-modal-note {
	margin: 0 0 16px;
	font-size: 13px;
	color: #616161;
}
.f-block .f-block-btn {
	display: block;
}
.f-block .iframe-img .classic-f-block-icon {
	display: block;
	height: 100%;
	background: #f8fafc;
	color: #5f6680;
	font-size: 26px;
	line-height: 53px;
}

/* ------------------------------------------------------------------------------------------------ */
/* Photo strip on hover (was Brazzers-Carousel)                                                     */
/* ------------------------------------------------------------------------------------------------ */
.brazzers-daddy {
	position: relative;
}
.brazzers-daddy:after {
	content: "";
	display: table;
	clear: both;
}
.brazzers-daddy .image-wrap img {
	display: none;
}
.brazzers-daddy .image-wrap img:first-child {
	display: inline-block;
}

/* ------------------------------------------------------------------------------------------------ */
/* Selects (were Chosen) and the price range                                                        */
/* ------------------------------------------------------------------------------------------------ */
.section-filter .section-filter-select select.chosen-select,
select.classic-select {
	display: block;
	width: 100%;
	height: 32px;
	opacity: 1;
	padding: 0 30px 0 10px;
	border: 1px solid #e0e4f6;
	border-radius: 0;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23373d54' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 10px center;
	color: #373d54;
	font-size: 13px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}
.section-filter .section-filter-select select.chosen-select:focus,
select.classic-select:focus {
	border-color: #373d54;
	outline: none;
}
.range-slider .classic-range-input {
	display: none;
}
.irs--flat .irs-line {
	height: 3px;
	top: 28px;
	background: #e0e4f6;
	border-radius: 0;
}
.irs--flat .irs-bar {
	height: 3px;
	top: 28px;
	background: #373d54;
}
.irs--flat .irs-handle {
	top: 23px;
	width: 14px;
	height: 14px;
	cursor: pointer;
}
.irs--flat .irs-handle > i:first-child {
	left: 2px;
	width: 10px;
	height: 10px;
	margin: 0;
	top: 0;
	border-radius: 10px;
	background: #373d54;
}
.irs--flat .irs-handle.state_hover > i:first-child,
.irs--flat .irs-handle:hover > i:first-child {
	background: #3a89cf;
}
.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single {
	background: #373d54;
	font-size: 11px;
}
.irs--flat .irs-from:before,
.irs--flat .irs-to:before,
.irs--flat .irs-single:before {
	border-top-color: #373d54;
}
.irs--flat .irs-min,
.irs--flat .irs-max {
	color: #5f6680;
	background: #f8fafc;
}

/* ------------------------------------------------------------------------------------------------ */
/* Product cards: buttons, prices, stock                                                            */
/* ------------------------------------------------------------------------------------------------ */
.prod-i-info a.active,
.prod-i-info a[aria-pressed="true"] {
	color: #3a89cf;
}
.prod-i-price .classic-was,
.discounts-i-price del {
	color: #888;
	font-size: 12px;
	font-weight: 400;
	margin: 0 0 0 6px;
}
.prod-i-price .classic-ask {
	color: #3a89cf;
	font-weight: 500;
}
.prod-i .classic-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	padding: 3px 8px;
	background: #ff3333;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.4;
}
.prod-i .classic-tag.classic-out {
	background: #5f6680;
}
.prod-i .classic-low {
	display: block;
	margin: 4px 0 0;
	font-size: 12px;
	color: #ff3333;
}
.prod-i .prod-i-top {
	position: relative;
}
/* The card's buttons appear on hover; keyboard users see them when focus is inside the card. */
.prod-items .prod-i-top:focus-within .prod-i-info,
.prod-items .prod-i-top:focus-within .prod-i-addwrap {
	opacity: 1;
}
.prod-items .prod-i-info a:focus-visible,
.prod-items .prod-i-add:focus-visible {
	outline: 2px solid #3a89cf;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------------------------------------ */
/* Home page                                                                                        */
/* ------------------------------------------------------------------------------------------------ */
.classic-perks {
	margin: 0 0 40px;
}
.classic-perks .iconbox-i-img {
	height: auto;
	margin: 0 0 18px;
	font-size: 44px;
	line-height: 1;
	color: #3a89cf;
}
.classic-perks .iconbox-i-ttl {
	margin-bottom: 6px;
}
.classic-tiles .posts-i-img span {
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}
.classic-tiles .classic-tile-name {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 120px;
	background: #f8fafc;
	color: #373d54;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
	padding: 10px;
}
.newsletter form {
	margin: 0;
}
.newsletter .classic-newsletter-fields {
	display: inline-block;
}
.newsletter-done {
	display: none;
}

/* ------------------------------------------------------------------------------------------------ */
/* Order status badges ("My orders", the order page)                                                */
/* ------------------------------------------------------------------------------------------------ */
.classic-badge {
	display: inline-block;
	margin: 0 0 4px;
	margin-inline-end: 4px;
	padding: 2px 8px;
	border: 1px solid #e0e4f6;
	background: #f8fafc;
	color: #373d54;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
}
.classic-badge.classic-ok {
	border-color: #b7dfc0;
	background: #eef8f0;
	color: #2e6b3a;
}
.classic-badge.classic-bad {
	border-color: #ebc4c4;
	background: #fbefef;
	color: #a12b2b;
}
.classic-badge.classic-info {
	border-color: #c4d8ec;
	background: #eef5fc;
	color: #24639e;
}

/* ------------------------------------------------------------------------------------------------ */
/* WhatsApp button, cookie bar                                                                      */
/* ------------------------------------------------------------------------------------------------ */
#whatsapp-support-mobile {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 100;
	width: 56px;
	height: 56px;
	background: url(/website/img/about/whatsApp-support-icon.webp) no-repeat center center;
	background-size: contain;
	opacity: 1;
}
#whatsapp-support-mobile:focus-visible {
	outline: 2px solid #3a89cf;
	outline-offset: 3px;
}
/* The cookie bar (templates/allstore/partials/tracking) uses the modern design's variables. */
.consent {
	--surface: #fff;
	--ink: #373d54;
	--line: #e0e4f6;
	--accent-text: #3a89cf;
	font-family: 'Roboto', sans-serif;
}
.consent .muted {
	display: block;
	color: #5f6680;
}
.consent .small {
	font-size: 12px;
}
.consent .btn-ghost {
	background: #fff;
	border: 1px solid #e0e4f6;
	color: #373d54;
}
.consent .btn-ghost:hover {
	border-color: #373d54;
}
.consent .btn-primary {
	background: #373d54;
	border-color: #373d54;
}
html.consent-open #whatsapp-support-mobile {
	bottom: calc(30px + var(--consent-h, 0px));
}

/* ------------------------------------------------------------------------------------------------ */
/* Message boxes (sweetalert)                                                                       */
/* ------------------------------------------------------------------------------------------------ */
.swal-button {
	background-color: #373d54;
	border-radius: 0;
	font-family: 'Roboto', sans-serif;
}
.swal-button:not([disabled]):hover {
	background-color: #474f6e;
}
.swal-button--cancel {
	background-color: #e0e4f6;
	color: #373d54;
}
.swal-button--cancel:not([disabled]):hover {
	background-color: #d0d6ef;
}
.swal-title,
.swal-text {
	font-family: 'Roboto', sans-serif;
	color: #373d54;
}
.swal-text {
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.flex-direction-nav a,
	.social-icons li a i,
	.social-icons li a .classic-svg-icon {
		transition: none;
	}
}