/**
 * Soukara — Quick-view modal & toast layout.
 *
 * Adds only the LAYOUT chrome for the quick-view modal (positioning, grid,
 * columns, sizing, the buy-panel rows) and the shared toast position. The
 * entrance animations (.sx-modal / .sx-scrim / .sx-toast) and their @keyframes
 * already live in storefront.css and are NOT re-declared here.
 *
 * The modal shell (#soukara-quickview) is created by storefront.js when a
 * quick-view is first opened; it ships hidden and is revealed via `.is-open`.
 *
 * @package Soukara
 */

/* =====================================================================
 * Modal shell + scrim (positioning only; animation comes from .sx-* classes)
 * ================================================================== */

.soukara-qv {
	display: none;
}
.soukara-qv.is-open {
	display: block;
}

.soukara-qv__scrim {
	position: fixed;
	inset: 0;
	background: rgba( 27, 31, 48, 0.5 );
	-webkit-backdrop-filter: blur( 3px );
	backdrop-filter: blur( 3px );
	z-index: 70;
}

.soukara-qv__modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 760px;
	max-width: 94vw;
	max-height: 90vh;
	overflow: auto;
	background: var( --cream );
	z-index: 71;
	border-radius: 16px;
	box-shadow: var( --shadow-xl );
}

.soukara-qv__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 300px;
}

/* =====================================================================
 * Loading / error states
 * ================================================================== */

.soukara-qv__loading,
.soukara-qv__error {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 40px;
	font-size: 14px;
	color: var( --text-muted );
}

/* =====================================================================
 * Left: image well
 * ================================================================== */

.soukara-qv__media {
	position: relative;
	background: var( --slate-950 );
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.soukara-qv__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =====================================================================
 * Right: buy panel
 * ================================================================== */

.soukara-qv__panel {
	padding: 30px 30px 28px;
	position: relative;
}

.soukara-qv__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 0;
	background: var( --sand-100 );
	border-radius: 99px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --slate-700 );
}

.soukara-qv__brand {
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --clay-600 );
	font-weight: 700;
	margin-bottom: 8px;
	padding-right: 44px; /* clear the close button */
}

.soukara-qv__name {
	font-family: var( --font-display );
	font-size: 30px;
	font-weight: 600;
	color: var( --text-strong );
	line-height: 1.06;
	margin: 0 0 10px;
	padding-right: 44px;
}

.soukara-qv__rating {
	margin-bottom: 14px;
}

.soukara-qv__price {
	font-family: var( --font-display );
	font-size: 26px;
	font-weight: 600;
	color: var( --color-price );
	margin-bottom: 18px;
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.soukara-qv__price del {
	font-size: 18px;
	color: var( --text-subtle );
	font-weight: 400;
}
.soukara-qv__price ins {
	text-decoration: none;
}

.soukara-qv__blurb {
	font-size: 14px;
	line-height: 1.6;
	color: var( --text-muted );
	margin: 0 0 20px;
}
.soukara-qv__blurb p {
	margin: 0 0 10px;
}
.soukara-qv__blurb p:last-child {
	margin-bottom: 0;
}

/* Set-size buttons */
.soukara-qv__sizelabel {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var( --text-muted );
	margin-bottom: 10px;
}
.soukara-qv__sizes {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.soukara-qv__size {
	padding: 0 16px;
	height: 44px;
	border-radius: 8px;
	border: 1.5px solid var( --color-border-strong );
	background: var( --cream );
	color: var( --text-strong );
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
}
.soukara-qv__size.is-active {
	border-color: var( --slate-800 );
	background: var( --slate-800 );
	color: var( --cream );
}
.soukara-qv__size-price {
	font-size: 10.5px;
	opacity: 0.7;
	font-family: var( --font-mono );
}

/* Buy row: stepper + add (the .soukara-qty stepper itself lives in
   storefront.css — it is shared by the cart and PDP). */
.soukara-qv__buy {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.soukara-qv__add {
	flex: 1;
	border: 0;
	background: var( --slate-800 );
	color: var( --cream );
	border-radius: 8px;
	height: 48px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.soukara-qv__add:hover {
	background: var( --slate-900 );
	color: var( --cream );
}
.soukara-qv__add.is-loading {
	opacity: 0.6;
	cursor: progress;
}

.soukara-qv__details {
	display: inline-block;
	margin-top: 16px;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	color: var( --slate-700 );
}

/* =====================================================================
 * Toast (position only; .sx-toast supplies the entrance animation)
 * ================================================================== */

.soukara-toast {
	position: fixed;
	bottom: 28px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 80;
	background: var( --slate-900 );
	color: var( --cream );
	padding: 14px 22px;
	border-radius: 10px;
	box-shadow: var( --shadow-lg );
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 600;
	max-width: 90vw;
}

/* =====================================================================
 * Responsive: collapse the modal to a single column on narrow screens
 * ================================================================== */

@media ( max-width: 640px ) {
	.soukara-qv__body {
		grid-template-columns: 1fr;
	}
	.soukara-qv__media {
		min-height: 220px;
	}
	.soukara-qv__modal {
		max-height: 92vh;
	}
}