/* Embla only moves the track and never writes a slide width, so the per-carousel widths and
   gutters the vendor JS used to set live here. style.css and skin-1.css own the theme's looks. */

[data-summer-carousel] > .swiper-wrapper {
	flex-direction: row;
	height: auto;
}

/* Embla has no clipping .slick-list, so the hero's two viewports clip themselves; .swiper
   carousels get this from swiper-bundle.min.css already. */
.main-slider-wrapper .slider-main,
.main-slider-wrapper .slider-thumbs {
	overflow: hidden;
}

[data-summer-carousel] .swiper-slide,
[data-summer-carousel] .slick-slide {
	flex: 0 0 auto;
	width: 100%;
	height: auto;
}

/* Two banners per view: style.css marks the slide after the current one .slick-active too, which
   is slick's two-up config showing through. .slider-thumbs is 65vw, so the pair overhangs. */
.main-slider-wrapper .slider-thumbs .slick-slide {
	width: 50%;
}

.swiper-shop .swiper-slide {
	width: 33.333%;
	padding-inline: 15px;
}

.swiper-four .swiper-slide {
	width: 25%;
	padding-inline: 15px;
}

/* Three-up on a 15px gutter, not the 30px the others use, and the width is load-bearing:
   .product-box.style-2 pins its copy to the right edge of a fixed 400px card. */
.swiper-product .swiper-slide {
	width: calc(33.333% - 10px);
	margin-inline-end: 15px;
}

/* .shop-card.style-4 lays its media and copy out side by side behind a 150px fixed image,
   so the featured rail runs one slide wider than the other two to keep titles off four lines. */
.swiper-product2 .swiper-slide {
	width: 33.333%;
	padding-inline: 15px;
}

/* .swiper-product steps 3 - 2 - 1.5 - 1 across the breakpoints below, which is why it is
   kept apart from the rails that share one ladder. */
@media only screen and (max-width: 1199px) {
	.swiper-four .swiper-slide {
		width: 33.333%;
	}

	.swiper-product .swiper-slide {
		width: calc(50% - 7.5px);
	}

	.swiper-product2 .swiper-slide {
		width: 50%;
	}
}

@media only screen and (max-width: 991px) {
	.swiper-shop .swiper-slide,
	.swiper-four .swiper-slide,
	.swiper-product2 .swiper-slide {
		width: 50%;
	}
}

@media only screen and (max-width: 767px) {
	.swiper-product .swiper-slide {
		width: calc(66.666% - 5px);
	}
}

@media only screen and (max-width: 575px) {
	.main-slider-wrapper .slider-thumbs .slick-slide {
		width: 55%;
	}

	.swiper-shop .swiper-slide {
		width: 50%;
	}

	.swiper-four .swiper-slide,
	.swiper-product2 .swiper-slide {
		width: 80%;
	}

	.swiper-product .swiper-slide {
		width: 100%;
	}
}

/* Reference photography is uniformly 450x600 and .dz-media has no size of its own; merchant
   uploads run 0.51 to 1.17 aspect, so without a frame the row staircases. */
.card-container .shop-card .dz-media {
	aspect-ratio: 3 / 4;
	background-color: var(--bg-light);
}

/* contain, not cover: the catalogue ships cut-out packshots cropped to the garment's own edges,
   so filling the frame amputates them - the 130x255 jeans lose their legs. */
.card-container .shop-card .dz-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- Header logo --- */

/* Under 992px style.css boxes the logo at 90px tall inside a 65-80px bar. Pixio's wide logo hides
   the overflow in its own letterbox; a square mark hangs out of the bar. */
.site-header .main-bar .container-fluid > .logo-header a {
	display: flex;
	align-items: center;
	height: 100%;
	padding-block: 10px;
}

.site-header .main-bar .container-fluid > .logo-header img {
	max-height: 100%;
}

/* The drawer keeps the 90px box, so a square mark renders at 180px while Pixio's wide one reads small. */
.mo-left .header-nav .logo-header {
	padding-top: 10px;
}

.mo-left .header-nav .logo-header img {
	width: auto;
	height: 60px;
	max-width: 180px;
}

/* --- Header gaps left by the vendor JS this theme does not load --- */

/* style.css puts this column's geometry on the .bootstrap-select wrapper and .dropdown-toggle
   that script builds; without it the native control has to carry that geometry itself. */
.dz-search-area .search-input select.default-select {
	flex: 0 0 auto;
	width: auto;
	min-width: 185px;
	height: 45px;
	padding: 0 20px !important;
	background-color: transparent;
	border-right: 1px solid rgba(187, 187, 187, 0.68) !important;
}

/* style.css fixes the canvas at 580px for the reference's product carousel; this one holds the
   form alone, so a fixed height would be 400px of empty cream. */
.dz-search-area.offcanvas {
	height: auto;
	/* .offcanvas pins bottom as well as top, so height alone would still stretch to the fold. */
	bottom: auto;
}

/* --- Footer gap left by this theme's own mobile chrome --- */

/* Below 992px this theme's .extra-nav icon bar is fixed across the bottom 50px; the reference
   has no such bar, so nothing in style.css reserves the space under the footer. */
@media only screen and (max-width: 991px) {
	.site-footer.style-1 .footer-bottom {
		padding-bottom: 50px;
	}
}

/* --- Marquee band: the loop dz.carousel.js used to drive --- */

/* @keyframes ticker's translateX(-100%) has to equal one track: style.css leaves the wrapper
   display:block, so it shifts one viewport instead and the strip snaps back mid-word. */
.dz-features-wrapper {
	display: flex;
	/* Pinned LTR so /ar cannot reverse the two tracks and expose the wrap gap; Arabic labels
	   still shape RTL inside their own item. */
	direction: ltr;
}

.dz-features-wrapper .dz-features {
	flex: 0 0 auto;
	width: max-content;
	/* 32.9528s was written by the vendor JS for a shift of one 1440px viewport. Ours travels a
	   whole 4355px track, so the duration is re-timed to keep the reference's 43.8px/s crawl. */
	animation-duration: 99s;
}

/* style.css only pauses on hover; a strip that never stops is exactly what this query is for. */
@media (prefers-reduced-motion: reduce) {
	.dz-features-wrapper .dz-features {
		animation-play-state: paused;
	}
}

/* --- Language switcher and account menu: icon-cluster items that open a panel --- */

/* The cluster's icon rule (.extra-nav .extra-cell ul li a/button) is a descendant selector, so it
   also squashes a panel's items into a centred 40px icon slot; li.login-link a adds its underline. */
.site-header .extra-nav .extra-cell ul li .dropdown-menu .dropdown-item {
	display: block;
	min-width: 100%;
	padding: 6px 20px;
	border-bottom: 0;
	line-height: 1.5;
	text-align: start;
}

/* The toggle is a language code where its neighbours are 20px glyphs, and the same rule sizes
   any <i> in the cluster to 20px - here the chevron only marks that a panel opens. */
.site-header .extra-nav .extra-cell ul li.language-link a {
	gap: 6px;
	align-items: center;
	font-size: 16px;
	color: var(--title);
}

.site-header .extra-nav .extra-cell ul li.language-link a i {
	font-size: 11px;
}

/* Below 767px .extra-nav is the fixed 50px bar on the viewport's bottom edge, so a panel that
   drops below its toggle opens off-screen. */
@media only screen and (max-width: 767px) {
	.site-header .extra-nav .extra-cell ul li.dropdown .dropdown-menu[data-bs-popper] {
		top: auto;
		bottom: 100%;
		margin-top: 0;
		margin-bottom: var(--bs-dropdown-spacer);
	}
}

/* style.css pins the dropdown's text and its own edge to the physical left, so an Arabic menu
   reads flush-left inside a right-anchored panel. The logical value leaves English untouched. */
.header-nav .nav > li .mega-menu,
.header-nav .nav > li .sub-menu,
.header-nav.w3menu .nav > li .mega-menu,
.header-nav.w3menu .nav > li .sub-menu {
	text-align: start;
}

/* The subscribe button is absolutely positioned at right: 0, which in Arabic parks it on top of
   the placeholder where the text begins. */
.dzSubscribe .form-group .input-group .input-group-addon {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

[dir="rtl"] .dzSubscribe .form-group .input-group .input-group-addon .btn i {
	transform: scaleX(-1);
}

.shop-card .shop-meta {
	pointer-events: none;
}

.shop-card .shop-meta > * {
	pointer-events: auto;
}

@media only screen and (max-width: 991.98px) {
	.shop-card .shop-meta .btn.btn-rounded {
		bottom: -4px;
	}
}

@media only screen and (max-width: 575px) {
	.shop-card .shop-meta .btn.btn-rounded {
		bottom: -15px;
	}
}

@media only screen and (max-width: 575.98px) {
	.shop-card:not([class*="style-"]) .dz-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.shop-card:not([class*="style-"]) .dz-content .title {
		width: 100%;
	}
}

/* --- Colour swatches (Swatch doctype) --- */

/* The dot's own colour is data and arrives inline; everything else about it lives here. */
.swatch-dot {
	display: inline-block;
	flex-shrink: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border: 1px solid rgba(0, 0, 0, 0.12);
	vertical-align: middle;
}

.swatch-dot-sm {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin-right: 6px;
}

/* --- Product card copy: name, rating, then price, stacked --- */

.shop-card:not([class*="style-"]) .dz-content,
.shop-card.style-2 .dz-content {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 6px;
}

.shop-card .dz-content .shop-card-title {
	width: 100%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* style-2 right-aligns its price and drops the MRP onto a line of its own. */
.shop-card .dz-content .shop-card-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	text-align: start;
}

.shop-card .dz-content .shop-card-price del {
	margin: 0;
}

.shop-card .shop-card-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1;
	color: var(--bs-secondary-text);
}

.shop-card .shop-card-rating-average {
	color: var(--title);
	font-weight: 600;
}

.shop-card .shop-card-rating .dz-rating {
	display: flex;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-card .shop-card-rating .dz-rating li {
	font-size: 14px;
	color: var(--bs-gray-300);
}

.shop-card .shop-card-rating .dz-rating li svg {
	width: 1em;
	height: 1em;
	display: block;
}

.shop-card .shop-card-rating .dz-rating li.star-fill {
	color: var(--bs-warning);
}

/* style.css strips the outline from every link, and from every button with !important, which left
   keyboard focus invisible across the theme. */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--title) !important;
	outline-offset: 2px;
}

/* The top-level nav links fill the header's height, so an outside ring is clipped by the page edge. */
.header-nav .nav > li > a:focus-visible {
	outline-offset: -2px;
}

/* style.css opens the desktop mega-menu on :hover only; navigation.html sets .menu-expanded on keyboard focus.
   The mobile drawer keeps its own chevron toggle (li.open). */
@media only screen and (min-width: 992px) {
	.header-nav .nav > li.menu-expanded > .mega-menu {
		opacity: 1;
		visibility: visible;
		margin-top: 0;
		z-index: 11;
		pointer-events: unset;
	}
}