/**
 * Mobile Quick Shop: card redesign (<768px) + bottom-sheet panel.
 *
 * Loaded after similar-products.css. Everything that alters the card is scoped
 * to the mobile media query so the desktop card (size overlay, round swatches,
 * hover nav) is untouched. The new card elements default to display:none so
 * they never appear on desktop.
 *
 * @package Konte Child
 */

/* New card elements are hidden by default (desktop); the mobile query shows them.
   The colour row (swatches + "+N colors") is NOT handled here: it is a desktop
   hover affordance and is hidden below 768px, both in similar-products.css. */
.konte-similar-card__quickshop,
.konte-similar-card__color-name {
	display: none;
}

/* ================================================================== *
 * Card — mobile only
 * ================================================================== */
@media (max-width: 767.98px) {

	.konte-qs-csheet, .konte-qs-ssheet
	{
		height:30vh !important;
	}

	.konte-qs-choose
	{
		font-weight: 300 !important;
	}

	.konte-similar-card__quickshop
	{
		margin-top:6px !important;
		margin-bottom:0px !important;
	}

	.konte-similar-card__info
	{
		margin-top:0px !important;
	}


	/* Replace the hover size overlay with the Quick Shop bar. */
	.konte-similar-card__sizes {
		display: none !important;
	}

	/* Separate bordered button below the image (not overlaid on it). */
	.konte-similar-card__quickshop {
		display: block;
		width: 100%;
		margin: 8px 0;
		padding: 12px 8px;
		border: 1px solid var(--ink_text);
		background: var(--bg_clr1);
		color: var(--ink_text);
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		cursor: pointer;
		line-height: 15px;
	}

	/* "Name - Colour" line. */
	.konte-similar-card__color-name {
		display: inline;
		color: var(--ink_text);
		font-size: 12px;
		font-style: normal;
    	font-weight: 300;
    	line-height: normal;
	}

}

/* ================================================================== *
 * Bottom sheet (opened by JS on mobile only)
 * ================================================================== */
.konte-qs-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.konte-qs-overlay[hidden] {
	display: none;
}

.konte-qs-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.konte-qs-overlay.is-open .konte-qs-backdrop {
	opacity: 1;
}

.konte-qs-sheet {
	position: relative;
	width: 100%;
	max-width: 640px;
	/* 92dvh, not 85: the gallery is the only flexible element in this column, so
	 * it absorbs every pixel the body below it takes. At 85dvh the track fell
	 * below the image's natural height and object-fit: cover began cropping the
	 * top of the frame. See AI_WORK_LOG 2026-08-05 17:07 UTC. */
	height: 92dvh;
	max-height: 92dvh;
	display: flex;
	flex-direction: column;
	background: var(--bg_clr1);
	border-radius: 16px 16px 0 0;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	will-change: transform;
	outline: none;
	overflow: hidden;
}

.konte-qs-overlay.is-open .konte-qs-sheet {
	transform: translateY(0);
}

/* Own dedicated row at the top of the sheet, right-aligned; bare "×" (no circle). */
.konte-qs-close {
	align-self: flex-end;
	flex: 0 0 auto;
	width: 36px;
	height: 3.43dvh;
	/* auto-left pins it to the right; the gap to the gallery below is now
	 * .konte-qs-gallery's own margin-top, not this row's bottom margin. */
	margin: 0px 6px 0px auto;
	padding: 0;
	border: 0;
	background: var(--bg_clr1);
	color: var(--ink_text);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding-top: 8px;
}

/*
 * Fills the sheet under the close row and does NOT scroll: a flex column whose
 * gallery flexes to absorb leftover height while the body keeps its natural
 * (compact) height. Total content therefore always equals the sheet height, so
 * every element stays visible within 85vh with no vertical scroll.
 */
.konte-qs-scroll {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overscroll-behavior: contain;
}

/* -------- Gallery -------- */
/* Column: the track fills the flexed height, the dots sit below it. */
.konte-qs-gallery {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin-top: 10px;
}

.konte-qs-track {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.konte-qs-track::-webkit-scrollbar {
	display: none;
}

.konte-qs-slide {
	/* One full image + half of the next (1.5 slides visible). */
	flex: 0 0 66.66%;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

/* Height is driven by the flex gallery (fills leftover space), not a fixed ratio. */
.konte-qs-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Anchor the crop to the top of the frame. On short phones the track cannot
	 * be made tall enough for the image's natural 1.259 ratio, and the default
	 * `50% 50%` splits that loss evenly - taking the model's head off. Crop from
	 * the bottom instead. Inert on tall phones, where nothing is cropped. */
	object-position: 50% 0;
	background-color: #f4f2ee;
}

.konte-qs-dots {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 8px 0 2px;
}

.konte-qs-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	transition: background 0.2s ease;
}

.konte-qs-dot.is-active {
	background: var(--ink_text);
}

/* -------- Body -------- */
/* Fixed (natural) height so the gallery above absorbs the remaining space. */
.konte-qs-body {
	flex: 0 0 auto;
	padding: 25px 20px 16px;
	/* Keep the last row (View Full Details) clear of the device's bottom inset -
	   the sheet is pinned to the viewport floor. Falls back to the flat 16px. */
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.konte-qs-colorrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 17px;
}

.konte-qs-swatchwrap {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.konte-qs-swatches {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.konte-qs-swatch-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.konte-qs-swatch {
	display: block;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.18);
	background-color: #e6e6e6;
	background-size: cover;
	background-position: center;
	cursor: pointer;
}

.konte-qs-swatch.is-active {
	    box-shadow: 0 0 0 2px var(--bg_clr1), 0 0 0 2.5px var(--h_clr);
}

.konte-qs-more {
	color: #6b6b6b;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}

/* "Choose a colour" — pinned to the far right of the colour row, opening the
   all-colours sheet. Mirrors the PDP's .kgp-color-summary__choose. */
.konte-qs-choose {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink_text);
	font-size: 13px;
	line-height: 1.2;
	text-align: right;
	white-space: nowrap;
	cursor: pointer;
}

.konte-qs-title {
	margin: 0 0 1.25dvh;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 400;
}

.konte-qs-price {
	margin: 0 0 1.94dvh;
	color: var(--ink_text);
	font-size: 15px;
}

.konte-qs-price del {
	margin-right: 6px;
	opacity: 0.6;
}

/* -------- Size row -------- */
/* Opens the size sheet; styled to match the PDP's mobile .ksp-trigger so the two
   surfaces read the same (css/pdp-size-summary.css). */
.konte-qs-size {
	margin-bottom: 2.97dvh;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.konte-qs-size__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--ink_text);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}

.konte-qs-size__label {
	flex: 0 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.konte-qs-size__chevron {
	flex: 0 0 auto;
	margin-left: 14px;
	font-size: 0.9rem;
	line-height: 1;
}

/* -------- Actions -------- */
.konte-qs-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 7px;
}

/* Height scales with the viewport: 5.03dvh == 44px at the 874px design frame
 * (402x874), the same reference every other dvh value in this file uses. Scaling
 * down on shorter phones hands that height back to the gallery above, which is
 * the only element that can shrink. The 40px floor is a tap-target minimum - a
 * plain 5.03dvh gives 32px at 640px tall, which is how "View Full Details" ended
 * up unreachable on real phones (AI_WORK_LOG 2026-08-01). The 48px ceiling stops
 * them ballooning on tall viewports. */
.konte-qs-add {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(40px, 5.03dvh, 48px);
	box-sizing: border-box;
	padding: 0 15px;
	border: 1px solid var(--ink_text);
	background: var(--ink_text);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.konte-qs-wishlist {
	flex: 0 0 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Matches .konte-qs-add so the two stay level in the row. */
	height: clamp(40px, 5.03dvh, 48px);
	box-sizing: border-box;
	padding: 0;
	border: 1px solid var(--ink_text);
	background: var(--ink_text);
	cursor: pointer;
}

.konte-qs-wishlist__icon::before {
	content: '\2661'; /* heart outline */
	color: #fff;
	font-size: 12px;
	line-height: 1;
}

.konte-qs-wishlist.is-active .konte-qs-wishlist__icon::before {
	content: '\2665'; /* filled heart */
}

.konte-qs-buynow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* Matches .konte-qs-add - see the note there. */
	height: clamp(40px, 5.03dvh, 48px);
	box-sizing: border-box;
	margin-bottom: 10px;
	padding: 0 15px;
	border: 1px solid var(--ink_text);
	background: var(--bg_clr1);
	color: var(--ink_text);
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.konte-qs-add.is-disabled,
.konte-qs-buynow.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.konte-qs-add.is-busy,
.konte-qs-buynow.is-busy,
.konte-qs-wishlist.is-busy {
	opacity: 0.6;
	cursor: wait;
}

/* Full-width 44px tap target rather than a bare 19px line of text. The sheet is
   pinned to the bottom of the viewport, so this link lands in the band that a
   mobile browser's bottom toolbar / home indicator overlays — a thin target
   there reads as an unresponsive link. Paired with the safe-area padding on
   .konte-qs-body, which lifts it clear of that chrome. */
.konte-qs-details {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	text-align: center;
	color: var(--ink_text);
	
	
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	
	font-family: var(--font2);
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

.konte-qs-details:hover {
	text-decoration: underline;
}

/* Lock the page behind the open sheet. */
body.konte-qs-open {
	overflow: hidden;
}

/* ================================================================== *
 * Sub-sheets: "Choose your colour" and the size list.
 *
 * Both open from inside the Quick Shop sheet and must paint above it, so they
 * take z-index 100000 against its 99999 — the same stacking the PDP's size
 * guide uses over the .ksp sheet. Each keeps its OWN body scroll-lock class:
 * sharing one with .konte-qs-open would unlock the page as soon as the inner
 * sheet closed, while the Quick Shop behind it is still open.
 * ================================================================== */
.konte-qs-csheet-overlay,
.konte-qs-ssheet-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.konte-qs-csheet-overlay[hidden],
.konte-qs-ssheet-overlay[hidden] {
	display: none;
}

.konte-qs-csheet-backdrop,
.konte-qs-ssheet-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.konte-qs-csheet-overlay.is-open .konte-qs-csheet-backdrop,
.konte-qs-ssheet-overlay.is-open .konte-qs-ssheet-backdrop {
	opacity: 1;
}

.konte-qs-csheet,
.konte-qs-ssheet {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	max-height: 70dvh;
	padding: 18px 20px 22px;
	background: var(--bg_clr1);
	border-radius: 16px 16px 0 0;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	will-change: transform;
	outline: none;
	overflow: hidden;
}

.konte-qs-csheet-overlay.is-open .konte-qs-csheet,
.konte-qs-ssheet-overlay.is-open .konte-qs-ssheet {
	transform: translateY(0);
}

.konte-qs-csheet__close,
.konte-qs-ssheet__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink_text);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

/* -------- "Choose your colour" sheet -------- */
.konte-qs-csheet__title {
	margin: 0 0 4px;
	padding-right: 28px; /* clear the close button */
	color: var(--ink_text);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-family: var(--font2) !important;
}

.konte-qs-csheet__name {
	margin-bottom: 14px;
	color: #6b6b6b;
	font-size: 13px;
}

/* Every colour; reuses the .konte-qs-swatch chip box at the larger sheet size.
   Wraps and scrolls so a long colour list never overflows the sheet. */
.konte-qs-csheet__swatches {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 12px;
	min-height: 0;
	margin: 0;
	/* Room for the selected chip's outline (1.5px + 2px offset), which the
	   scroll container would otherwise clip. */
	padding: 4px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.konte-qs-csheet__swatches .konte-qs-swatch {
	width: 28px;
	height: 28px;
	border-color: #d9d9d9;
}

/* Selected chip — outline rather than the summary row's double ring, matching
   the PDP colour sheet. */
.konte-qs-csheet__swatches .konte-qs-swatch.is-active {
	box-shadow: none;
	outline: 1.5px solid var(--ink_text);
	outline-offset: 2px;
}

/* -------- Size sheet -------- */
.konte-qs-ssheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 4px;
	padding: 0 28px 10px 0; /* clear the close button */
	border-bottom: 1px solid #e5e5e5;
}

.konte-qs-ssheet__colorname {
	color: var(--ink_text);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.konte-qs-size__list {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

/* Full-width rows, mirroring .ksp-sizes on the PDP. */
.konte-qs-size__item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	min-height: 48px;
	padding: 0 4px;
	box-sizing: border-box;
	color: var(--ink_text);
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.konte-qs-size__item + .konte-qs-size__item {
	border-top: 1px solid #eee;
}

.konte-qs-size__item.is-selected {
	background: var(--bg_clr2);
	font-weight: 500;
}

.konte-qs-size__item.is-oos {
	color: #b3b3b3;
	cursor: not-allowed;
}

.konte-qs-size__oos {
	margin-left: auto;
	padding-left: 8px;
	color: #999;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Lock the page behind each open sub-sheet. */
body.konte-qs-color-open,
body.konte-qs-size-open {
	overflow: hidden;
}