@font-face {
	font-family: sf pro display;
	font-style: normal;
	font-weight: 400;
	src: url('../../fonts/SFPRODISPLAYREGULAR.OTF') format('opentype')
}

@font-face {
	font-family: sf pro display;
	font-style: normal;
	font-weight: 500;
	src: url('../../fonts/SFPRODISPLAYMEDIUM.OTF') format('opentype')
}

@font-face {
	font-family: sf pro display;
	font-style: normal;
	font-weight: 700;
	src: url('../../fonts/SFPRODISPLAYBOLD.OTF') format('opentype')
}

a {
	color: inherit;
	text-decoration: inherit;
}

:root {
	font-family: 'SF Pro Display', sans-serif;
	font-size: 16px;
	--Primary-Font-Color: #000;
	--Size-Title: 1.75rem;
	--Size-Title-3: 1.25rem;
	--Weight-Medium: 500;
	--Spacing-medium: 1rem;
	--Size-Body: 1rem;
	--Size-Subhead: 0.9375rem;
	--Pdp-Image-Max-Height: 80vw;
	--Carousel-Nav-Button-Height: 30px;
	--swiper-navigation-sides-offset: 8px;
}

@media  (min-width: 600px) {
  :root {
    --Pdp-Image-Max-Height: 500px;
  }
}



/* CPD-4899 enhancements */
body[data-responsive="true"] {
	margin: var(--Spacing-medium);
	margin-block-end: 0;
	min-height: 100vh;
	line-height: 1.5;
}

/* Box sizing rules */
body[data-responsive="true"] *,
body[data-responsive="true"] *::before,
body[data-responsive="true"] *::after {
	box-sizing: border-box;
}

/* Remove default margin in favour of better control in authored CSS */
body[data-responsive="true"] h1,
body[data-responsive="true"] h2,
body[data-responsive="true"] h3,
body[data-responsive="true"] h4,
body[data-responsive="true"] p,
body[data-responsive="true"] figure,
body[data-responsive="true"] blockquote,
body[data-responsive="true"] dl,
body[data-responsive="true"] dd {
	margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
body[data-responsive="true"] ul[role='list'],
body[data-responsive="true"] ol[role='list'] {
	list-style: none;
}

/* Set shorter line heights on headings and interactive elements */
body[data-responsive="true"] h1,
body[data-responsive="true"] h2,
body[data-responsive="true"] h3,
body[data-responsive="true"] h4,
body[data-responsive="true"] button,
body[data-responsive="true"] input,
body[data-responsive="true"] label {
	line-height: 1.1;
}

/* Balance text wrapping on headings */
body[data-responsive="true"] h1,
body[data-responsive="true"] h2,
body[data-responsive="true"] h3,
body[data-responsive="true"] h4 {
	text-wrap: balance;
}

/* A elements that don't have a class get default styles */
body[data-responsive="true"] a:not([class]) {
	text-decoration-skip-ink: auto;
	color: currentColor;
}

/* Make images easier to work with */
body[data-responsive="true"] img,
body[data-responsive="true"] picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
body[data-responsive="true"] input,
body[data-responsive="true"] button,
body[data-responsive="true"] textarea,
body[data-responsive="true"] select {
	font-family: inherit;
	font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
body[data-responsive="true"] textarea:not([rows]) {
	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
body[data-responsive="true"] :target {
	scroll-margin-block: 5ex;
}

body[data-responsive="true"] .content {
	max-width: 48rem;
}

body[data-responsive="true"] #look-grid {
	display: grid;
	row-gap: 1.5rem;
	column-gap: 1.5rem;
	flex-shrink: 0;
	align-self: stretch;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media only screen and (min-width: 46rem) {
	body[data-responsive="true"] #look-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

body[data-responsive="true"] .look-item-price {
	margin: initial;
}

body[data-responsive="true"] .look-title,
body[data-responsive="true"] .look-pdp-title {
	margin-top: var(--Spacing-medium);
	margin-bottom: var(--Spacing-medium);
	margin-left: 0;
	margin-right: 0;
	color: #000;
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: var(--Size-Title);
	font-style: normal;
	font-weight: var(--Weight-Medium);
	text-align: center;
}

body[data-responsive="true"] .look-item {
	margin-bottom: initial;
	border: initial;
	width: 100%;
}

body[data-responsive="true"] .look-item-img {
	border-radius: 5px;
	height: initial;
	width: initial;
}

body[data-responsive="true"] .look-item-img img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

body[data-responsive="true"] .look-item-data {
	margin-left: 0;
	letter-spacing: -0.4px;
	line-height: 1.3;
}

body[data-responsive="true"] .look-item-more-details {
	margin: 0;
}

body[data-responsive="true"] .look-data-container {
	display: flex;
	margin-top: var(--Spacing-medium);
	flex-direction: column;
	align-items: center;
	text-align: center;
	align-self: stretch;
}

body[data-responsive="true"] .look-item-title {
	margin: 0;
	font-size: var(--Size-Title-3);
	font-weight: 500;
}

body[data-responsive="true"] .look-item-subtitle {
	font-size: 1rem;
}

body[data-responsive="true"] .look-item-data.look-item-price {
	color: var(--Primary-Font-Color);
}

/* PDP */

body[data-responsive="true"] .look-item-img-pdp {
	display: inline;
	height: auto;
	margin-left: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
	max-height: 320px;
}

body[data-responsive="true"] .look-item-data-pdp {
	overflow: hidden;
	color: var(--Text-primary, #000);
	font-feature-settings: 'liga' off, 'clig' off;
	text-overflow: ellipsis;

	/* Header/Header 1 */
	font-family: "SF Pro Display";
	font-size: var(--Size-Title-3);
	font-style: normal;
	font-weight: 600;
	line-height: 1.25;
	/* 125% */
}

body[data-responsive="true"] .look-pdp-carousel-tile {
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	height: 21.4375rem;
}

body[data-responsive="true"] .pdp-content {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	min-width: 18.75rem;
	max-width: 48rem;
	min-height: 396.21px;
	padding: var(--Spacing-medium, 16px) var(--Spacing-sideMargin, 16px);
	align-items: flex-start;
	gap: var(--Spacing-medium, 16px);
	width: var(--Pdp-Image-Max-Height);
}

body[data-responsive="true"] .look-item-full {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--Spacing-medium, 16px);
}

body[data-responsive="true"] .look-item-description-title-pdp {
	margin: 0;

	overflow: hidden;
	color: var(--Text-primary, #000);
	text-overflow: ellipsis;

	font-size: var(--Size-Subhead, 15px);
	font-style: normal;
	font-weight: 500;
	line-height: 1.33;
	letter-spacing: -0.23px;
}


body[data-responsive="true"] .look-item-description-pdp {
	margin: 0;
	color: var(--Text-primary, #000);
	font-feature-settings: 'liga' off, 'clig' off;

	font-size: 1rem;
	font-style: normal;
	font-weight: var(--Weight-Regular, 400);
	/* line-height: 22px; */
	letter-spacing: -0.43px;
}

body[data-responsive="true"] .look-pdp-identifiers {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--Spacing-x-small, 4px);
	align-self: stretch;
}

body[data-responsive="true"] #pdp-images {
	margin: 0 auto;
	max-height: var(--Pdp-Image-Max-Height);
}

body[data-responsive="true"] .swiper-container {
	position: relative;
	overflow: hidden;
}

body[data-responsive="true"] #pdp-images.swiper-container {
	width: var(--Pdp-Image-Max-Height);
	height: var(--Pdp-Image-Max-Height);
}



body[data-responsive="true"] .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
}

body[data-responsive="true"] .swiper-slide img {
	max-width: 100%;
	max-height: var(--Pdp-Image-Max-Height);
	object-fit: contain;
}

body[data-responsive="true"] .swiper-button-disabled {
	display: none;
}

body[data-responsive="true"] .pdp-content #look-title {
	margin-bottom: 0;
}

body[data-responsive="true"] .swiper-button-next {
	background-image: url("data:image/svg+xml,%3csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20.8998 18L16.2998 13.4L17.6998 12L23.6998 18L17.6998 24L16.2998 22.6L20.8998 18Z' fill='%233C3C43' fill-opacity='0.6'/%3e %3c/svg%3e");
	background-position-x: 40%;
}

body[data-responsive="true"] .swiper-button-prev {
	background-image: url("data:image/svg+xml,%3csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M22.3 24L16.3 18L22.3 12L23.7 13.4L19.1 18L23.7 22.6L22.3 24Z' fill='%233C3C43' fill-opacity='0.6'/%3e %3c/svg%3e");
	background-position-x: center;
	background-position-x: 60%;
}


body[data-responsive="true"] .swiper-nav-button {
	height: var(--Carousel-Nav-Button-Height);
	width: var(--Carousel-Nav-Button-Height);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position-y: 30%;
	background-color: rgb(255, 255, 255);
}

body[data-responsive="true"] .swiper-navigation-icon {
	display: none;
}

body[data-responsive="true"] #backlink {
	/* 1. Set the background image to the SVG Data URI */
	background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M7.4 12.575L12.3 17.475C12.5 17.675 12.5958 17.9083 12.5875 18.175C12.5792 18.4417 12.475 18.675 12.275 18.875C12.075 19.0583 11.8417 19.1542 11.575 19.1625C11.3083 19.1708 11.075 19.075 10.875 18.875L4.275 12.275C4.175 12.175 4.10417 12.0667 4.0625 11.95C4.02083 11.8333 4 11.7083 4 11.575C4 11.4417 4.02083 11.3167 4.0625 11.2C4.10417 11.0833 4.175 10.975 4.275 10.875L10.875 4.275C11.0583 4.09167 11.2875 4 11.5625 4C11.8375 4 12.075 4.09167 12.275 4.275C12.475 4.475 12.575 4.7125 12.575 4.9875C12.575 5.2625 12.475 5.5 12.275 5.7L7.4 10.575H18.575C18.8583 10.575 19.0958 10.6708 19.2875 10.8625C19.4792 11.0542 19.575 11.2917 19.575 11.575C19.575 11.8583 19.4792 12.0958 19.2875 12.2875C19.0958 12.4792 18.8583 12.575 18.575 12.575H7.4Z' fill='%233C3C43' fill-opacity='0.6'/%3e %3c/svg%3e");

	/* 2. Style the background properties */
	background-repeat: no-repeat;
	background-size: contain; /* Ensure the SVG fits inside the element */
	background-position: center; /* Center the icon */

	/* 3. Define the dimensions of the link element */
	display: inline-block; /* Essential to set width/height */
	width: 32px; /* Set the width of the icon container */
	height: 32px; /* Set the height of the icon container */

	/* 4. Hide the link text, while keeping it accessible for screen readers */
	text-indent: -9999px;
	overflow: hidden;

	/* 5. Optional: Add hover state for visual feedback */
	transition: transform 0.2s ease-in-out;
}



.content {
	margin: 0 auto;
	width: 100%;
	max-width: 396px;
}

.text-dark-grey {
	color: #333333;
}

.text-grey {
	color: #b2b2b6;
}

.text-red {
	color: #F00;
}

#look-logo {
	width: 100%;
	height: 120px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50%;
}


.look-title {
	margin: 15px auto;
	text-align: center;
	font-weight: 700;
}

#look-grid {
	display: grid;
	grid-template-columns: 198px 198px;
	justify-items: center;
	grid-row-gap: 16px;
}

.look-item {
	border-left: 2px solid #fff;
	width: 198px;
	margin-bottom: 10px;
}

.look-item-img {
	width: 198px;
	height: 198px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50%;
}

.look-item-data {
	margin-left: 25px;
	font-size: 15px;
}

.look-item-title {
	margin-top: 10px;
	max-height: 65px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	/* number of lines to show */
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.look-item-ref-num {
	font-weight: 400;
}

.look-item-price {
	font-weight: 400;
	margin-bottom: 16px;
}

.look-item-more-details {
	margin-bottom: 16px;
	margin-left: 25px;
	color: blue;
}

.look-item-more-details-pdp {
	color: blue;
}

.look-item-old-price {
	text-decoration: line-through;
	margin-left: 6px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body[data-responsive="false"] #look-logo {
		width: 30%;
		height: 50px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (min-device-width: 480px) and (max-device-width: 768px) {
	body[data-responsive="false"] #look-logo {
		width: 35%;
		height: 60px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	body[data-responsive="false"] #look-logo {
		width: 40%;
		height: 80px;
		margin-left: auto;
		margin-right: auto;
	}

}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1200px) {
	body[data-responsive="false"] #look-logo {
		width: 50%;
		height: 100px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (min-device-width: 1200px) {
	body[data-responsive="false"] #look-logo {
		width: 50%;
		height: 120px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Setting Media Query Breakpoint to 600px */
@media only screen and (max-width: 600px) {
	#look-grid {
		display: grid;
		grid-template-columns: 100%;
		justify-items: center;
	}
}

/* PDP */

.look-item-data-pdp {
	margin-left: 25px;
	margin-right: 10px;
	font-size: 15px;
	margin-bottom: 16px;
}

.look-title-pdp {
	margin: 15px auto;
	margin-bottom: 25px;
	text-align: center;
	font-weight: 400;
	letter-spacing: 1px;
}

.look-item-full {
	width: 100%;
}

.look-item-img-pdp {
	height: auto;
	margin-left: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
	max-height: 320px;
}

.look-item-title-pdp {
	margin-top: 30px;
	margin-bottom: 10px;
	font-weight: 500;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	font-size: 20px;
	letter-spacing: 1px;
	overflow-wrap: break-word;
}

.look-item-ref-num-pdp {
	font-weight: 400;
	font-size: 16px;
	margin-top: 5px;
	margin-bottom: 5px;
	letter-spacing: 0;
}

.look-item-price-pdp {
	font-weight: 400;
	margin-top: 5px;
	margin-bottom: 16px;

}

.look-item-description-title-pdp {
	margin-top: 25px;
}

.look-item-description-pdp {
	margin-top: 5px;
	margin-bottom: 250px;
	margin-right: 4px;
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	font-size: 15px;
	line-height: 22px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body[data-responsive="false"] #look-logo {
		width: 30%;
		height: 50px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (min-device-width: 480px) and (max-device-width: 768px) {
	body[data-responsive="false"] #look-logo {
		width: 35%;
		height: 60px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	body[data-responsive="false"] #look-logo {
		width: 40%;
		height: 80px;
		margin-left: auto;
		margin-right: auto;
	}

}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1200px) {
	body[data-responsive="false"] #look-logo {
		width: 50%;
		height: 100px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (min-device-width: 1200px) {
	body[data-responsive="false"] #look-logo {
		width: 50%;
		height: 120px;
		margin-left: auto;
		margin-right: auto;
	}
}

.carousel-full {
	max-width: 400px;
}

.carousel-inner img {
	width: auto;
	height: 400px;
	margin-bottom: 30px;
}

.carousel-indicators {
	height: 20px !important;
}

.carousel-indicators li {
	background-color: #b2b2b6 !important;
	width: 10px !important;
	height: 10px !important;
	border: 1pt solid white;
	border-radius: 100%;
}

.carousel-indicators .active {
	background-color: grey !important;
}

.carousel-item {
	text-align: center;
}

.dark-carousel-icon {
	filter: invert(100%);
}