/**
 * "Added to your wishlist" confirmation popup.
 *
 * Matches the two reference designs:
 *   desktop  a cream card anchored TOP-RIGHT over a dimmed backdrop, closed by
 *            the X / the backdrop / ESC. No calls to action.
 *   mobile   a bottom sheet with one full-width outlined CTA whose destination
 *            is set in the Custom Actions admin screen.
 *
 * Layout is a CSS grid that reflows at the project's 767.98px breakpoint:
 *   desktop  "media details"              (image left, copy right, no CTA row)
 *   mobile   "media details" / "cta cta"  (thumbnail + copy, then the CTA)
 *
 * The shell / backdrop / .is-open pattern is intentionally the same as
 * css/added-to-cart-popup.css so the two popups share one close behaviour; only
 * the anchoring differs (flex-start/flex-end instead of centred). The z-index
 * band sits one step above the cart popup's 100000/100001 so the two can never
 * fight, and the JS closes the cart popup before opening this one.
 *
 * @package Konte Child
 */

/* -------- Backdrop -------- */




.konte-wl-popup-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100002;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.konte-wl-popup-backdrop[hidden] {
	display: none;
}

.konte-wl-popup-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* -------- Shell (anchors the card top-right) -------- */
.konte-wl-popup {
	position: fixed;
	inset: 0;
	z-index: 100003;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	/* Clears the sticky site header so the card never sits under it. */
	padding: 118px 24px 24px;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.konte-wl-popup[hidden] {
	display: none;
}

.konte-wl-popup.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* -------- Card -------- */
.konte-wl-popup__card {
	position: relative;
	display: grid;
	grid-template-columns: 34% minmax(0, 1fr);
	grid-template-areas: "media details";
	gap: 20px 24px;
	width: 100%;
	max-width: 460px;
	max-height: 100%;
	padding: 24px;
	background: var(--bg_clr1);
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	transform: translateY(-16px);
	transition: transform 0.25s ease;
}

.konte-wl-popup.is-open .konte-wl-popup__card {
	transform: translateY(0);
}

/* The card takes focus when the popup opens, so the dialog is entered without
   landing on a control. It is not an interactive element, so no focus ring. */
.konte-wl-popup__card:focus {
	outline: none;
}

/* -------- Close -------- */
.konte-wl-popup__close {
	position: absolute;
	top: 16px;
	right: 18px;
	z-index: 2;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.konte-wl-popup__close:hover,
.konte-wl-popup__close:focus {
	opacity: 1;
}

/* -------- Media -------- */
.konte-wl-popup__media {
	grid-area: media;
	align-self: start;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background: #fff;
	border: 1px solid var(--ink_text);
	border-radius: 16px;
	overflow: hidden;
}

.konte-wl-popup__media[hidden] {
	display: none;
}

.konte-wl-popup__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------- Details -------- */
.konte-wl-popup__details {
	grid-area: details;
	min-height: 0;
	overflow-y: auto;
	/* Keeps the copy clear of the absolutely positioned close button. */
	padding-right: 24px;
	color: var(--ink_text);
	font-family: var(--font2);
}

.konte-wl-popup__eyebrow {
	margin: 0 0 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.konte-wl-popup__title {
	margin: 0 0 10px;
	font-family: var(--font1)!important;
	color: var(--ink_text);
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.34px;
}

/* Price on the left, size + colour on the right. */
.konte-wl-popup__pricerow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.konte-wl-popup__price {
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

.konte-wl-popup__price del {
	margin-right: 8px;
	opacity: 0.55;
}

.konte-wl-popup__variation {
	display: flex;
	gap: 14px;
	white-space: nowrap;
}

.konte-wl-popup__size,
.konte-wl-popup__color {
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

.konte-wl-popup__size[hidden],
.konte-wl-popup__color[hidden] {
	display: none;
}

/* Fallback line for any non-size/colour attribute. */
.konte-wl-popup__attrline {
	margin-bottom: 12px;
	font-size: 13px;
	color: #6b6b6b;
}

.konte-wl-popup__attrline[hidden] {
	display: none;
}

/* The short description — this is what renders the
   "REGULAR FIT  SHIRT COLLAR  STANDARD LENGTH" line plus the copy beneath it. */
.konte-wl-popup__shortdesc {
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink_text);
	display:none;
}

.konte-wl-popup__shortdesc[hidden] {
	display: none;
}

.konte-wl-popup__shortdesc p {
	margin: 0 0 8px;
}

.konte-wl-popup__shortdesc p:last-child {
	margin-bottom: 0;
}

.konte-wl-popup__shortdesc .reg_01,
.konte-wl-popup__shortdesc .but_01 {
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

.konte-wl-popup__shortdesc .pdt_01,
.konte-wl-popup__shortdesc .blank_line {
	display: none;
}

/* -------- Call to action --------
   Hidden by default and revealed only in the mobile query, so it can never flash
   on desktop during load. The reference desktop card carries no CTA. */
.konte-wl-popup__cta {
	display: none;
}

/* -------- Mobile: bottom sheet -------- */
@media (max-width: 767.98px) {

	.konte-wl-popup__size, .konte-wl-popup__color
	{
		color:var(--ink_text);
		font-family: var(--font2);
		font-size: 12px;
		font-style: normal;
		font-weight: 300;
		line-height: normal;
	}

	.konte-wl-popup__price
	{
		color:var(--ink_text);
		font-family: var(--font2);
		font-size: 12px;
		font-style: normal;
		font-weight: 300;
		line-height: normal;
	}

	.konte-wl-popup__eyebrow
	{	margin-top:7px;
		color:var(--ink_text);
		font-family: var(--font2);
		font-size: 10px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}

	.konte-wl-popup {
		align-items: flex-end;
		justify-content: center;
		padding: 0;
	}

	.konte-wl-popup__card {
		grid-template-columns: 128px minmax(0, 1fr);
		grid-template-areas:
			"media details"
			"cta   cta";
		gap: 27px 15px;
		max-width: none;
		max-height: 36vh;
		padding: 16px 16px 33px;
		border-radius: 20px 20px 0 0;
		transform: translateY(100%);
	}

	/* The reference mobile sheet has no visible X. Keep the control in the tab
	   order for keyboard and screen-reader users, revealed only on focus; the
	   sheet is otherwise dismissed by tapping the dimmed area above it. */
	.konte-wl-popup__close {
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
	}

	/* When a keyboard user does tab to it, it must be legible over the heading
	   it sits above, hence the backing. */
	.konte-wl-popup__close:focus {
		width: 28px;
		height: 28px;
		overflow: visible;
		clip: auto;
		clip-path: none;
		background: var(--bg_clr1);
		border-radius: 50%;
	}

	.konte-wl-popup__details {
		padding-right: 0;
	}

	.konte-wl-popup__title {
		
		color:var(--ink_text);
		font-family: var(--font1);
		font-size: 16px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		letter-spacing: -0.272px;
	}

	/* Price, size and colour stack on their own lines in the mobile reference. */
	.konte-wl-popup__pricerow {
		display: block;
		margin-bottom: 0;
	}

	.konte-wl-popup__price {
		margin-bottom: 10px;
	}

	.konte-wl-popup__variation {
		display: block;
	}

	.konte-wl-popup__size,
	.konte-wl-popup__color {
		display: block;
		margin-bottom: 10px;
	}

	/* Compact card: the tech-spec copy is desktop-only per the reference. */
	.konte-wl-popup__attrline,
	.konte-wl-popup__shortdesc {
		display: none;
	}

	.konte-wl-popup__cta {
		grid-area: cta;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 54px;
		width: 100%;
		padding: 0 16px;
		border: 1px solid var(--ink_text);
		border-radius: 6px;
		background: transparent;
		color: var(--ink_text);
		font-family: var(--font2);
		font-size: 14px;
		
		letter-spacing: 0.08em;
		
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		
		
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}

	.konte-wl-popup__cta:hover,
	.konte-wl-popup__cta:focus {
		color: var(--ink_text);
		text-decoration: none;
	}
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
	.konte-wl-popup,
	.konte-wl-popup-backdrop,
	.konte-wl-popup__card {
		transition: none;
	}

	.konte-wl-popup__card {
		transform: none;
	}
}