/* =========================================================
   SK DYNAMIC PRODUCT QUICK VIEW
========================================================= */

.sk-qv-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	background: rgba(11, 13, 18, 0.62);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;
}

.sk-qv-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.sk-qv-modal {
	position: relative;
	width: min(1180px, 100%);
	max-height: calc(100vh - 60px);
	background: #FDFCF9;
	overflow: auto;
	transform: translateY(20px);
	transition: transform 0.25s ease;
	box-shadow: 0 20px 70px rgba(0, 0, 0, 0.22);
}

.sk-qv-overlay.is-open .sk-qv-modal {
	transform: translateY(0);
}


/* =========================================================
   CLOSE
========================================================= */

.sk-qv-close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 110;

	box-sizing: border-box !important;

	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;

	padding: 0 !important;
	margin: 0 !important;

	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	border: 0 !important;
	border-radius: 0 !important;

	background: #287AA3 !important;
	color: #fff !important;

	cursor: pointer;

	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 32px !important;
	font-weight: 400 !important;
	line-height: 1 !important;

	box-shadow: none !important;
	aspect-ratio: auto !important;

	transition:
		background 0.2s ease,
		opacity 0.2s ease;
}

.sk-qv-close:hover {
	background: #1f6284 !important;
	color: #fff !important;
	opacity: 0.92;
}

.sk-qv-close span,
.sk-qv-close-icon {
	display: block !important;
	flex-shrink: 0;

	width: 22px !important;
	height: 22px !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   LOADING
========================================================= */

.sk-qv-loading {
	position: absolute;
	inset: 0;
	z-index: 100;

	display: flex;
	align-items: center;
	justify-content: center;

	background: #FDFCF9;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.sk-qv-loading.is-active {
	opacity: 1;
	visibility: visible;
}

.sk-qv-loader {
	width: 34px;
	height: 34px;

	border: 2px solid rgba(11, 13, 18, 0.15);
	border-top-color: #0B0D12;
	border-radius: 50%;

	animation: skQvSpin 0.75s linear infinite;
}

@keyframes skQvSpin {
	to {
		transform: rotate(360deg);
	}
}


/* =========================================================
   CONTENT
========================================================= */

.sk-qv-content {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(390px, 0.85fr);
	min-height: 650px;
	align-items: start;
}

@media (min-width: 768px) {

	.sk-qv-content {
		grid-template-columns: 45% 55%;
		gap: 20px;
	}
}


/* =========================================================
   LEFT GALLERY
========================================================= */

.sk-qv-gallery-column {
	min-width: 0;
	padding: 35px;
	background: #FDFCF9;
}

@media (min-width: 768px) {

	.sk-qv-gallery-column {
		position: sticky;
		top: 0;
		align-self: start;
		max-height: calc(100vh - 60px);
		overflow-y: auto;
		scrollbar-width: none;

		/* Remove right padding — 20px grid gap handles column spacing */
		padding: 35px 0 35px 35px;
	}

	.sk-qv-gallery-column::-webkit-scrollbar {
		display: none;
	}

	.sk-qv-info {
		padding-top: 40px !important;
		padding-bottom: 20px !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
}

.sk-qv-gallery-main {
	position: relative;
	width: 100%;
}

.sk-qv-gallery-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #F3F2F0;
}

.sk-qv-main-image {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	object-fit: cover !important;
	object-position: center !important;

	background: transparent !important;

	user-select: none;
	-webkit-user-drag: none;
}


/* =========================================================
   MAIN IMAGE SLIDE
========================================================= */

.sk-qv-slide-out-left {
	animation: skQvSlideOutLeft 0.175s ease forwards;
}

.sk-qv-slide-in-right {
	animation: skQvSlideInRight 0.35s ease forwards;
}

.sk-qv-slide-out-right {
	animation: skQvSlideOutRight 0.175s ease forwards;
}

.sk-qv-slide-in-left {
	animation: skQvSlideInLeft 0.35s ease forwards;
}

@keyframes skQvSlideOutLeft {
	from {
		transform: translateX(0);
		opacity: 1;
	}

	to {
		transform: translateX(-100%);
		opacity: 0;
	}
}

@keyframes skQvSlideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes skQvSlideOutRight {
	from {
		transform: translateX(0);
		opacity: 1;
	}

	to {
		transform: translateX(100%);
		opacity: 0;
	}
}

@keyframes skQvSlideInLeft {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}


/* =========================================================
   MAIN ARROWS
========================================================= */

.sk-qv-main-arrow {
	position: absolute !important;
	top: 50% !important;
	z-index: 10;

	width: 42px !important;
	height: 42px !important;

	padding: 0 !important;
	margin: 0 !important;

	display: flex !important;
	align-items: center;
	justify-content: center;

	transform: translateY(-50%) !important;

	border: 0 !important;
	border-radius: 50% !important;

	background: rgba(0, 0, 0, 0.65) !important;
	color: #fff !important;

	cursor: pointer;

	opacity: 0;
	visibility: hidden;

	transition:
		opacity 0.2s ease,
		background 0.2s ease;

	box-shadow: none !important;
}

.sk-qv-gallery-main:hover .sk-qv-main-arrow {
	opacity: 1;
	visibility: visible;
}

.sk-qv-main-arrow:hover {
	background: #000 !important;
}

.sk-qv-main-prev {
	left: 15px !important;
}

.sk-qv-main-next {
	right: 15px !important;
}

.sk-qv-main-arrow span {
	font-family: Arial, sans-serif;
	font-size: 30px;
	line-height: 1;
	color: #fff;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.sk-qv-thumbnails-wrap {
	position: relative;
	width: 100%;
	margin-top: 15px;
}

.sk-qv-thumbnails {
	width: 100%;
	overflow: hidden;
}

.sk-qv-thumbnail-track {
	display: flex;
	gap: 10px;
	align-items: stretch;
	transition: transform 0.3s ease;
}

.sk-qv-thumbnail {
	position: relative;

	flex: 0 0 calc((100% - 30px) / 4);
	width: calc((100% - 30px) / 4);

	aspect-ratio: 1 / 1;

	padding: 0 !important;
	margin: 0 !important;

	border: 1px solid transparent !important;
	border-radius: 0 !important;

	background: transparent !important;

	overflow: hidden;

	cursor: pointer;

	box-shadow: none !important;

	transition:
		opacity 0.2s ease,
		border-color 0.2s ease;
}

.sk-qv-thumbnail img {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	min-width: 100% !important;
	min-height: 100% !important;

	max-width: none !important;
	max-height: none !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	object-fit: cover !important;
	object-position: center !important;

	background: transparent !important;
}

.sk-qv-thumbnail:hover {
	opacity: 0.8;
}

.sk-qv-thumbnail.is-active {
	border: 2px solid #0B0D12 !important;
}


/* =========================================================
   THUMBNAIL OVERLAY ARROWS
========================================================= */

.sk-qv-thumb-arrow {
	position: absolute !important;
	top: 50% !important;

	z-index: 20;

	width: 34px !important;
	height: 34px !important;

	padding: 0 !important;
	margin: 0 !important;

	transform: translateY(-50%) !important;

	display: flex !important;
	align-items: center;
	justify-content: center;

	border: 0 !important;
	border-radius: 50% !important;

	background: rgba(0, 0, 0, 0.7) !important;
	color: #fff !important;

	cursor: pointer;

	opacity: 0;
	visibility: hidden;

	box-shadow: none !important;

	transition:
		opacity 0.2s ease,
		background 0.2s ease;
}

.sk-qv-thumbnails-wrap:hover .sk-qv-thumb-arrow {
	opacity: 1;
	visibility: visible;
}

.sk-qv-thumb-arrow:hover {
	background: #000 !important;
}

.sk-qv-thumb-prev {
	left: 8px !important;
}

.sk-qv-thumb-next {
	right: 8px !important;
}

.sk-qv-thumb-arrow span {
	font-family: Arial, sans-serif;
	font-size: 24px;
	line-height: 1;
	color: #fff;
}


/* =========================================================
   RIGHT PRODUCT INFORMATION
========================================================= */

.sk-qv-info {
	min-width: 0;
	padding: 75px 60px 60px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}


/* =========================================================
   CATEGORY
========================================================= */

.sk-qv-category {
	margin: 0 0 18px;

	font-family: "Inter Tight", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;

	letter-spacing: 2.4px;
	text-transform: uppercase;

	color: #5C4F4F;
}


/* =========================================================
   MODEL / SKU
========================================================= */

.sk-qv-model {
	margin: 0 0 18px;

	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;

	letter-spacing: 0.4px;

	color: #5C4F4F;
}

.sk-qv-model[hidden] {
	display: none !important;
}


/* =========================================================
   TITLE
========================================================= */

.sk-qv-title {
	margin: 0 0 12px !important;
	padding: 0 !important;

	font-family: Georgia, serif !important;
	font-size: 48px !important;
	font-weight: 400 !important;
	line-height: 50.4px !important;

	letter-spacing: -0.5px !important;
	text-transform: none !important;

	color: #0B0D12 !important;
}


/* =========================================================
   PRICE
========================================================= */

.sk-qv-price {
	margin: 0 0 32px;

	font-family: "Inter Tight", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;

	color: #0B0D12;
}

.sk-qv-price del {
	opacity: 0.55;
	margin-right: 8px;
}

.sk-qv-price ins {
	text-decoration: none;
}


/* =========================================================
   VARIATIONS
========================================================= */

.sk-qv-variations {
	width: 100%;
	margin-bottom: 30px;
}

.sk-qv-attribute {
	width: 100%;
	margin: 0 0 25px;
}

.sk-qv-attribute-title {
	margin: 0 0 12px;

	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;

	letter-spacing: 2.4px;
	text-transform: uppercase;

	color: #5C4F4F;
}

.sk-qv-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	overflow: visible;
}

.sk-qv-option {
	position: relative;

	min-width: 50px;
	min-height: 42px;

	padding: 8px 14px !important;

	border: 1px solid #D8D4D2 !important;
	border-radius: 0 !important;

	background: #FDFCF9 !important;
	color: #0B0D12 !important;

	font-family: "Inter Tight", sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 20px !important;

	cursor: pointer;

	transition:
		border-color 0.2s ease,
		background 0.2s ease,
		color 0.2s ease,
		opacity 0.2s ease;

	box-shadow: none !important;
}

.sk-qv-option-tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	z-index: 40;

	transform: translateX(-50%);

	width: max-content;
	max-width: 220px;

	padding: 6px 10px;

	background: #0B0D12;
	color: #fff;

	font-family: "Inter Tight", sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 16px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: nowrap;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity 0.15s ease,
		visibility 0.15s ease;
}

.sk-qv-option-tooltip::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;

	transform: translateX(-50%);

	border: 6px solid transparent;
	border-top-color: #0B0D12;
}

.sk-qv-option:hover .sk-qv-option-tooltip,
.sk-qv-option:focus-visible .sk-qv-option-tooltip {
	opacity: 1;
	visibility: visible;
}

.sk-qv-option:hover {
	border-color: #0B0D12 !important;
}

.sk-qv-option.is-selected {
	border-color: #0B0D12 !important;
	background: #0B0D12 !important;
	color: #FDFCF9 !important;
}

.sk-qv-option.is-disabled {
	opacity: 1;
	cursor: not-allowed;
	pointer-events: auto;
	text-decoration: none;
	color: #9A908C !important;
	border-color: #E4E0DE !important;
	background: #F7F5F2 !important;
}

.sk-qv-option.is-disabled::before,
.sk-qv-option.is-disabled::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;

	width: 72%;
	height: 2px;

	background: #B42318;

	pointer-events: none;

	opacity: 1;
	visibility: visible;
	border: 0;
	padding: 0;
	transform: none;
}

.sk-qv-option.is-disabled::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.sk-qv-option.is-disabled::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.sk-qv-option.has-image.is-disabled {
	opacity: 1;
}

.sk-qv-option.has-image.is-disabled img {
	opacity: 0.45;
}

.sk-qv-option.is-disabled:hover {
	border-color: #E4E0DE !important;
	background: #F7F5F2 !important;
	color: #9A908C !important;
}


/* =========================================================
   IMAGE SWATCH
========================================================= */

.sk-qv-option.has-image {
	width: 58px;
	height: 58px;

	padding: 3px !important;
}

.sk-qv-option.has-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	margin: 0;
	padding: 0;

	border: 0;
}


/* =========================================================
   CART
========================================================= */

.sk-qv-cart-area {
	width: 100%;
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.sk-qv-quantity {
	display: flex;
	align-items: center;

	height: 52px;

	border: 1px solid #D8D4D2;
}

.sk-qv-quantity button {
	width: 40px;
	height: 100%;

	padding: 0 !important;
	margin: 0 !important;

	border: 0 !important;
	background: transparent !important;
	color: #0B0D12 !important;

	font-family: "Inter Tight", sans-serif;
	font-size: 20px;
	line-height: 1;

	cursor: pointer;
}

.sk-qv-qty {
	width: 45px !important;
	height: 100% !important;

	padding: 0 !important;
	margin: 0 !important;

	border: 0 !important;

	background: transparent !important;
	color: #0B0D12 !important;

	text-align: center;

	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
}

.sk-qv-qty::-webkit-inner-spin-button,
.sk-qv-qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sk-qv-qty {
	-moz-appearance: textfield;
}

.sk-qv-add-to-cart {
	position: relative;
	overflow: hidden;
	flex: 1;

	min-height: 52px;

	padding: 15px 24px !important;
	margin: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	background: #0B0D12 !important;
	color: #FDFCF9 !important;

	font-family: "Inter Tight", sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;

	letter-spacing: 4.2px !important;
	text-transform: uppercase !important;

	cursor: pointer;

	transition:
		background 0.2s ease,
		opacity 0.2s ease;

	box-shadow: none !important;
}

.sk-qv-add-to-cart:hover:not(:disabled) {
	background: #287AA3 !important;
	color: #FDFCF9 !important;
}

.sk-qv-add-to-cart:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.sk-qv-button-loader {
	display: none;

	width: 16px;
	height: 16px;

	border: 2px solid rgba(253, 252, 249, 0.35);
	border-top-color: #FDFCF9;

	border-radius: 50%;

	vertical-align: middle;

	animation: skQvSpin 0.7s linear infinite;
}

.sk-qv-add-to-cart.is-loading {
	pointer-events: none;
}

.sk-qv-add-to-cart.is-loading .sk-qv-button-text {
	display: none;
}

.sk-qv-add-to-cart.is-loading .sk-qv-button-loader {
	display: inline-block;
}

.sk-qv-add-to-cart:not(.is-loading) .sk-qv-button-loader {
	display: none !important;
}

.sk-qv-add-to-cart:not(.is-loading) .sk-qv-button-text {
	display: inline !important;
}

.sk-qv-add-to-cart:not(.is-loading)::before,
.sk-qv-add-to-cart:not(.is-loading)::after,
.sk-qv-add-to-cart.loading::before,
.sk-qv-add-to-cart.loading::after,
.sk-qv-add-to-cart.added::before,
.sk-qv-add-to-cart.added::after {
	content: none !important;
	display: none !important;
	animation: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	border: 0 !important;
	background: none !important;
}

.sk-qv-add-to-cart .blockUI,
.sk-qv-add-to-cart .blockOverlay,
.sk-qv-add-to-cart .spinner,
.sk-qv-cart-area .blockUI {
	display: none !important;
}


/* =========================================================
   MESSAGE
========================================================= */

.sk-qv-message {
	width: 100%;
	margin-top: 15px;

	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	line-height: 20px;

	color: #0B0D12;
}

.sk-qv-message.is-error {
	color: #B42318;
}

.sk-qv-message.is-success {
	color: #287AA3;
}


/* =========================================================
   BODY LOCK
========================================================= */

body.sk-qv-open {
	overflow: hidden;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.sk-qv-overlay {
		padding: 0;
		align-items: flex-start;
		overflow-y: auto;
	}

	.sk-qv-modal {
		width: 100%;
		max-height: none;
		min-height: 100vh;
		overflow: visible;
	}

	.sk-qv-content {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.sk-qv-gallery-column {
		padding: 0;
	}

	.sk-qv-gallery-stage {
		aspect-ratio: 1 / 1;
	}

	.sk-qv-main-arrow {
		display: none !important;
	}

	.sk-qv-thumbnails-wrap {
		padding: 0 15px;
		margin-top: 10px;
	}

	.sk-qv-thumbnails {
		overflow-x: auto;
		overflow-y: hidden;

		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;

		scroll-snap-type: x proximity;
	}

	.sk-qv-thumbnails::-webkit-scrollbar {
		display: none;
	}

	.sk-qv-thumbnail-track {
		gap: 8px;
		transform: none !important;
	}

	.sk-qv-thumbnail {
		flex: 0 0 calc((100% - 24px) / 4);
		width: calc((100% - 24px) / 4);

		scroll-snap-align: start;
	}

	.sk-qv-thumb-arrow {
		display: none !important;
	}

	.sk-qv-info {
		padding: 40px 24px 35px;
	}

	.sk-qv-category {
		margin-bottom: 15px;
	}

	.sk-qv-title {
		font-size: 38px !important;
		line-height: 40.4px !important;
		margin-bottom: 18px !important;
	}

	.sk-qv-price {
		margin-bottom: 28px;
	}

	.sk-qv-cart-area {
		flex-direction: column;
	}

	.sk-qv-quantity {
		width: 100%;
		justify-content: center;
	}

	.sk-qv-add-to-cart {
		width: 100%;
	}

	.sk-qv-close {
		top: 12px;
		right: 12px;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.sk-qv-overlay,
	.sk-qv-modal,
	.sk-qv-main-image,
	.sk-qv-thumbnail,
	.sk-qv-option {
		transition: none !important;
		animation: none !important;
	}
}