/*
 * Memelio Magija — parduotuvė: produktų kortelės, kolekcijos, produkto
 * puslapis, krepšelis. Klasės sudėliotos taip, kad jas būtų galima
 * uždėti ant WooCommerce žymėjimo be papildomų apvalkalų.
 */

/* =====================================================================
 * Produkto kortelė
 * ================================================================== */

.mm-product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mm-surface);
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
	overflow: hidden;
	transition:
		border-color var(--mm-dur) var(--mm-ease),
		transform var(--mm-dur) var(--mm-ease-out-expo),
		box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-product:hover {
	transform: translateY(-5px);
	border-color: color-mix(in srgb, var(--mm-red) 45%, var(--mm-line));
	box-shadow: var(--mm-shadow);
}

.mm-product__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background:
		radial-gradient(90% 70% at 50% 100%, rgba(224, 27, 36, 0.16), transparent 70%),
		var(--mm-surface-2);
}

.mm-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--mm-ease-out-expo);
}

.mm-product:hover .mm-product__media img { transform: scale(1.07); }

.mm-product__link { position: absolute; inset: 0; z-index: 2; }

.mm-product__badge {
	position: absolute;
	top: var(--mm-4);
	left: var(--mm-4);
	z-index: 3;
}

.mm-product__badge--sale { background: var(--mm-text); color: var(--mm-black); }

/* Veiksmai išnyra iš dešinio krašto. */
.mm-product__actions {
	position: absolute;
	top: var(--mm-4);
	right: var(--mm-4);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: var(--mm-2);
	opacity: 0;
	transform: translateX(12px);
	transition: opacity var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease-out-expo);
}

.mm-product:hover .mm-product__actions,
.mm-product:focus-within .mm-product__actions { opacity: 1; transform: none; }

.mm-product__actions .mm-iconbtn {
	width: 38px;
	height: 38px;
	background: rgba(5, 5, 6, 0.7);
	backdrop-filter: blur(8px);
}

@media (hover: none) {
	.mm-product__actions { opacity: 1; transform: none; }
}

.mm-product__body {
	display: flex;
	flex-direction: column;
	gap: var(--mm-2);
	padding: var(--mm-5);
	flex: 1;
}

.mm-product__cat {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mm-text-4);
}

.mm-product__title {
	font-size: 1.0625rem;
	font-family: var(--mm-font-display);
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: none;
	color: var(--mm-text);
	line-height: 1.25;
}

.mm-product__price {
	font-family: var(--mm-font-display);
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--mm-red);
	letter-spacing: 0.02em;
}

.mm-product__price del { color: var(--mm-text-4); font-size: 0.875em; margin-right: var(--mm-2); }
.mm-product__price ins { text-decoration: none; }

.mm-product__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mm-3);
	margin-top: auto;
	padding-top: var(--mm-4);
	border-top: 1px solid var(--mm-line);
}

.mm-product__note { font-size: 0.6875rem; color: var(--mm-text-4); }

.mm-product__foot .mm-iconbtn {
	position: relative;
	z-index: 3;
	width: 38px;
	height: 38px;
}

.mm-product__foot .mm-iconbtn:hover { background: var(--mm-red); color: #fff; border-color: var(--mm-red); }

/* Išparduota. */
.mm-product--out .mm-product__media img { filter: grayscale(1) brightness(0.6); }

.mm-product__soldout {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	padding: var(--mm-2);
	background: rgba(5, 5, 6, 0.86);
	text-align: center;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mm-text-2);
}

/* =====================================================================
 * Kolekcijų plytelės
 * ================================================================== */

.mm-collection {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--mm-radius);
	aspect-ratio: 4 / 5;
	background: var(--mm-surface-2);
}

.mm-collection img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.72);
	transition: transform 1000ms var(--mm-ease-out-expo), filter var(--mm-dur-slow) var(--mm-ease);
}

.mm-collection:hover img { transform: scale(1.07); filter: brightness(0.95); }

.mm-collection::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(5, 5, 6, 0.94) 100%);
}

.mm-collection__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: var(--mm-5);
}

.mm-collection__title {
	font-size: var(--mm-fs-h4);
	color: var(--mm-text);
	margin-bottom: var(--mm-1);
}

.mm-collection__count {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-text-3);
}

/* Raudonas kraštas apačioje užvedus. */
.mm-collection__body::before {
	content: "";
	position: absolute;
	left: var(--mm-5);
	right: var(--mm-5);
	bottom: 0;
	height: 2px;
	background: var(--mm-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--mm-dur-slow) var(--mm-ease-out-expo);
}

.mm-collection:hover .mm-collection__body::before { transform: scaleX(1); }

/* =====================================================================
 * Parduotuvės įrankių juosta
 * ================================================================== */

.mm-shopbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mm-4);
	padding-block: var(--mm-4);
	border-block: 1px solid var(--mm-line);
	margin-bottom: var(--mm-7);
}

.mm-shopbar__count { font-size: var(--mm-fs-xs); color: var(--mm-text-3); }

.mm-shopbar__tools { display: flex; align-items: center; gap: var(--mm-3); }
.mm-shopbar__tools .mm-select { width: auto; min-width: 190px; padding-block: 0.6875rem; }

/* =====================================================================
 * Produkto puslapis
 * ================================================================== */

.mm-single {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(var(--mm-6), 4vw, var(--mm-9));
	align-items: start;
}

@media (max-width: 900px) {
	.mm-single { grid-template-columns: minmax(0, 1fr); }
}

/* --- Galerija -------------------------------------------------------- */

.mm-gallery { display: flex; flex-direction: column; gap: var(--mm-3); }

.mm-gallery__main {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
	background:
		radial-gradient(80% 60% at 50% 100%, rgba(224, 27, 36, 0.15), transparent 70%),
		var(--mm-surface-2);
	aspect-ratio: 4 / 5;
}

.mm-gallery__main img { width: 100%; height: 100%; object-fit: cover; }

.mm-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--mm-3);
}

.mm-gallery__thumb {
	position: relative;
	padding: 0;
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
	overflow: hidden;
	background: var(--mm-surface-2);
	cursor: pointer;
	aspect-ratio: 1 / 1;
	transition: border-color var(--mm-dur-fast) var(--mm-ease), opacity var(--mm-dur-fast) var(--mm-ease);
	opacity: 0.6;
}

.mm-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mm-gallery__thumb:hover { opacity: 1; }
.mm-gallery__thumb[aria-current="true"] { border-color: var(--mm-red); opacity: 1; }

/* --- Suvestinė -------------------------------------------------------- */

.mm-summary { display: flex; flex-direction: column; gap: var(--mm-5); }

.mm-summary__title { font-size: var(--mm-fs-h2); }

.mm-summary__price {
	font-family: var(--mm-font-display);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	font-weight: 300;
	color: var(--mm-red);
	line-height: 1;
}

.mm-summary__excerpt { font-size: var(--mm-fs-sm); line-height: 1.75; color: var(--mm-text-2); }

.mm-summary__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: var(--mm-4);
	padding-block: var(--mm-5);
	border-block: 1px solid var(--mm-line);
}

.mm-summary__metaitem { display: flex; flex-direction: column; gap: var(--mm-1); }

.mm-summary__metalabel {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mm-text-4);
}

.mm-summary__metavalue { font-size: var(--mm-fs-sm); color: var(--mm-text); }

/* --- Variantai -------------------------------------------------------- */

.mm-swatches { display: flex; flex-wrap: wrap; gap: var(--mm-2); }

.mm-swatch {
	padding: 0.6875rem var(--mm-4);
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
	background: none;
	color: var(--mm-text-2);
	font-family: var(--mm-font-body);
	font-size: var(--mm-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: border-color var(--mm-dur-fast) var(--mm-ease), color var(--mm-dur-fast) var(--mm-ease), background var(--mm-dur-fast) var(--mm-ease);
}

.mm-swatch:hover { color: var(--mm-text); border-color: var(--mm-line-strong); }

.mm-swatch[aria-pressed="true"] {
	color: var(--mm-text);
	border-color: var(--mm-red);
	background: var(--mm-red-wash);
}

/* --- Kiekis ir pirkimas ------------------------------------------------ */

.mm-buy { display: flex; flex-wrap: wrap; gap: var(--mm-3); }

.mm-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
	overflow: hidden;
	flex: none;
}

.mm-qty button {
	width: 46px;
	height: 52px;
	border: 0;
	background: none;
	color: var(--mm-text-2);
	font-size: 1.125rem;
	cursor: pointer;
	transition: background var(--mm-dur-fast) var(--mm-ease), color var(--mm-dur-fast) var(--mm-ease);
}

.mm-qty button:hover { background: rgba(255, 255, 255, 0.06); color: var(--mm-text); }

.mm-qty input {
	width: 48px;
	height: 52px;
	border: 0;
	border-inline: 1px solid var(--mm-line);
	background: none;
	color: var(--mm-text);
	text-align: center;
	font-family: var(--mm-font-body);
	font-size: var(--mm-fs-sm);
	-moz-appearance: textfield;
}

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

.mm-buy .mm-btn { flex: 1 1 220px; }

/* --- Pasitikėjimo eilutės po pirkimo mygtuku --------------------------- */

.mm-assure {
	display: flex;
	flex-direction: column;
	gap: var(--mm-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mm-assure li {
	display: flex;
	align-items: center;
	gap: var(--mm-3);
	margin: 0;
	font-size: var(--mm-fs-xs);
	color: var(--mm-text-3);
}

.mm-assure .mm-icon { color: var(--mm-red); }

/* =====================================================================
 * Krepšelis
 * ================================================================== */

.mm-cart {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
	gap: clamp(var(--mm-6), 3vw, var(--mm-8));
	align-items: start;
}

@media (max-width: 900px) { .mm-cart { grid-template-columns: minmax(0, 1fr); } }

.mm-cartline {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--mm-4);
	padding-block: var(--mm-5);
	border-bottom: 1px solid var(--mm-line);
}

.mm-cartline:first-child { border-top: 1px solid var(--mm-line); }

.mm-cartline__media {
	aspect-ratio: 1 / 1;
	border-radius: var(--mm-radius);
	overflow: hidden;
	background: var(--mm-surface-2);
}

.mm-cartline__media img { width: 100%; height: 100%; object-fit: cover; }

.mm-cartline__title { font-size: var(--mm-fs-sm); color: var(--mm-text); margin-bottom: var(--mm-1); }
.mm-cartline__variant { font-size: 0.6875rem; color: var(--mm-text-4); }

.mm-cartline__price {
	font-family: var(--mm-font-display);
	font-size: 1.125rem;
	color: var(--mm-text);
	white-space: nowrap;
}

@media (max-width: 620px) {
	.mm-cartline { grid-template-columns: 72px minmax(0, 1fr) auto; }
	.mm-cartline__price { grid-column: 2 / -1; }
}

/* --- Užsakymo suvestinė ------------------------------------------------ */

.mm-ordersum {
	position: sticky;
	top: calc(var(--mm-header-h) + var(--mm-5));
	display: flex;
	flex-direction: column;
	gap: var(--mm-4);
	padding: var(--mm-6);
	background: var(--mm-surface);
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
}

.mm-ordersum__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mm-4);
	font-size: var(--mm-fs-sm);
	color: var(--mm-text-3);
}

.mm-ordersum__row strong { color: var(--mm-text); }

.mm-ordersum__total {
	padding-top: var(--mm-4);
	border-top: 1px solid var(--mm-line);
	font-family: var(--mm-font-display);
	font-size: var(--mm-fs-h4);
	color: var(--mm-text);
}

.mm-ordersum__total span:last-child { color: var(--mm-red); }

/* =====================================================================
 * Greita peržiūra
 * ================================================================== */

.mm-quickview {
	position: fixed;
	inset: 0;
	z-index: var(--mm-z-modal);
	display: grid;
	place-items: center;
	padding: var(--mm-gutter);
	background: rgba(4, 4, 5, 0.9);
	backdrop-filter: blur(12px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mm-dur) var(--mm-ease), visibility var(--mm-dur);
}

.mm-quickview.is-open { opacity: 1; visibility: visible; }

.mm-quickview__panel {
	position: relative;
	width: min(960px, 100%);
	max-height: 88vh;
	overflow-y: auto;
	padding: clamp(var(--mm-5), 3vw, var(--mm-8));
	background: var(--mm-surface);
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
	transform: translateY(18px) scale(0.98);
	transition: transform var(--mm-dur-slow) var(--mm-ease-out-expo);
}

.mm-quickview.is-open .mm-quickview__panel { transform: none; }

.mm-quickview__close { position: absolute; top: var(--mm-4); right: var(--mm-4); z-index: 2; }