/* Shared components: buttons, header, search, category bar, cards, rails, drawer/sheet, bottom nav, footer, forms. */

/* ---------- Buttons ---------- */
.ml-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--ml-s2);
	min-height: var(--ml-tap);
	padding: 0 var(--ml-s5);
	border: 1px solid transparent;
	border-radius: var(--ml-r-md);
	font-size: var(--ml-fs-sm); font-weight: 700; line-height: 1;
	white-space: nowrap;
	transition: background var(--ml-dur) var(--ml-ease), border-color var(--ml-dur), color var(--ml-dur), transform var(--ml-dur);
}
.ml-btn:active { transform: scale(.98); }
.ml-btn .ml-icon { inline-size: 18px; block-size: 18px; }
.ml-btn--primary { background: var(--ml-accent); color: var(--ml-on-accent); }
.ml-btn--primary:hover { background: var(--ml-accent-strong); color: var(--ml-on-accent); }
.ml-btn--ghost { background: var(--ml-surface-1); border-color: var(--ml-border-strong); color: var(--ml-text); }
.ml-btn--ghost:hover { border-color: var(--ml-accent); color: var(--ml-accent); }
.ml-btn--lg { min-height: 52px; padding-inline: var(--ml-s6); font-size: var(--ml-fs-md); border-radius: var(--ml-r-md); }

/* WooCommerce buttons follow the same system */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--ml-s2);
	min-height: var(--ml-tap); padding: 0 var(--ml-s5);
	border: 1px solid var(--ml-border-strong); border-radius: var(--ml-r-md);
	background: var(--ml-surface-1); color: var(--ml-text);
	font-size: var(--ml-fs-sm); font-weight: 700; line-height: 1;
	transition: background var(--ml-dur), border-color var(--ml-dur), color var(--ml-dur);
}
.woocommerce .button:hover { border-color: var(--ml-accent); color: var(--ml-accent); }
.woocommerce .button.alt, .woocommerce .single_add_to_cart_button, .woocommerce .checkout-button, .woocommerce #place_order {
	background: var(--ml-accent); border-color: transparent; color: var(--ml-on-accent);
}
.woocommerce .button.alt:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce .checkout-button:hover, .woocommerce #place_order:hover {
	background: var(--ml-accent-strong); color: var(--ml-on-accent);
}
.woocommerce .button:disabled, .woocommerce .button.disabled { opacity: .45; cursor: not-allowed; }
.woocommerce .button.loading { opacity: .7; pointer-events: none; }

.ml-iconbtn {
	display: inline-grid; place-items: center;
	position: relative;
	inline-size: var(--ml-tap); block-size: var(--ml-tap);
	padding: 0; border: 0; border-radius: var(--ml-r-md);
	background: transparent; color: var(--ml-text);
}
.ml-iconbtn:hover { background: var(--ml-surface-2); color: var(--ml-text); }
.ml-icon { inline-size: 22px; block-size: 22px; flex: none; }

/* ---------- Badges & tags ---------- */
.ml-badge {
	position: absolute; inset-block-start: -9px; inset-inline-start: -13px; /* RTL: top-right corner, clear of the icon and its label */
	min-inline-size: 16px; block-size: 16px; padding: 0 4px;
	display: grid; place-items: center;
	border-radius: var(--ml-r-pill);
	border: 2px solid var(--ml-surface-1);
	background: var(--ml-accent); color: var(--ml-on-accent);
	font-size: 11px; font-weight: 800; line-height: 1;
	box-sizing: content-box;
}
.ml-badge[hidden] { display: none; }
.ml-tag {
	display: inline-flex; align-items: center;
	padding: 3px 10px; border-radius: var(--ml-r-pill);
	font-size: var(--ml-fs-xs); font-weight: 700; line-height: 1.5;
}
.ml-tag--sale { background: var(--ml-sale-soft); color: var(--ml-sale); }
.ml-tag--muted { background: var(--ml-surface-2); color: var(--ml-text-2); }
.ml-eyebrow { margin: 0 0 var(--ml-s2); color: var(--ml-accent); font-size: var(--ml-fs-sm); font-weight: 700; }

/* ---------- Header ---------- */
.ml-header {
	position: sticky; inset-block-start: 0; z-index: 50;
	background: var(--ml-surface-1);
	border-block-end: 1px solid var(--ml-border);
}
.admin-bar .ml-header { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar .ml-header { inset-block-start: 0; } }

.ml-header__bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "menu brand actions" "search search search";
	align-items: center;
	gap: var(--ml-s2);
	padding-block: var(--ml-s2) var(--ml-s3);
}
.ml-header__menu { grid-area: menu; }
.ml-header__brand { grid-area: brand; justify-self: center; display: flex; align-items: center; }
.ml-header__actions { grid-area: actions; display: flex; align-items: center; gap: var(--ml-s1); }
.ml-header__search { grid-area: search; }

/* Logo: the horizontal wordmark (mark + «میشی‌لند», 1200×303) at every width, so the store name is always
   readable. Height-driven; width follows the ratio via aspect-ratio (reserved before load: no layout shift).
   Mobile 36px · tablet 44px · desktop 52px. */
.ml-logo { display: inline-flex; align-items: center; line-height: 0; }
.ml-logo picture { display: block; }
.ml-logo__img { display: block; block-size: 36px; inline-size: auto; aspect-ratio: 1200 / 303; max-inline-size: none; object-fit: contain; }
.ml-logo--text { line-height: 1.4; font-size: var(--ml-fs-lg); font-weight: 900; color: var(--ml-text); }
@media (min-width: 481px) { .ml-logo__img { block-size: 44px; } }
@media (min-width: 1024px) { .ml-logo__img { block-size: 52px; } }

.ml-action {
	position: relative;
	display: inline-flex; align-items: center; gap: var(--ml-s2);
	min-block-size: var(--ml-tap); min-inline-size: var(--ml-tap);
	justify-content: center;
	padding-inline: var(--ml-s2);
	border-radius: var(--ml-r-md);
	color: var(--ml-text); font-size: var(--ml-fs-sm); font-weight: 600;
}
.ml-action:hover { background: var(--ml-surface-2); color: var(--ml-text); }
.ml-action__icon { position: relative; display: inline-flex; }
.ml-action__label { display: none; }
.ml-header__account { display: none; } /* mobile: account lives in the bottom nav */

@media (min-width: 1024px) {
	.ml-header__bar {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "brand search actions";
		gap: var(--ml-s8);
		min-block-size: var(--ml-header-h);
		padding-block: var(--ml-s3);
	}
	.ml-header__menu { display: none; }
	.ml-header__brand { justify-self: start; }
	.ml-header__search { max-inline-size: 640px; inline-size: 100%; justify-self: center; }
	.ml-header__account { display: inline-flex; }
	.ml-action { padding-inline: var(--ml-s3); }
	.ml-action__label { display: inline; }
	.ml-header__cart { border: 1px solid var(--ml-border-strong); }
}

/* ---------- Search ---------- */
.ml-search {
	position: relative;
	display: flex; align-items: center;
	min-block-size: 46px;
	background: var(--ml-surface-2);
	border: 1px solid transparent;
	border-radius: var(--ml-r-md);
	transition: border-color var(--ml-dur), background var(--ml-dur), box-shadow var(--ml-dur);
}
.ml-search:focus-within { background: var(--ml-surface-1); border-color: var(--ml-accent); box-shadow: 0 0 0 3px var(--ml-accent-soft); }
.ml-search > .ml-icon { position: absolute; inset-inline-start: var(--ml-s3); color: var(--ml-text-3); pointer-events: none; inline-size: 20px; block-size: 20px; }
.ml-search__input {
	flex: 1; min-inline-size: 0; block-size: 46px;
	padding-inline: calc(var(--ml-s3) + 28px) var(--ml-s3);
	background: transparent; border: 0; outline: none;
	font-size: var(--ml-fs-md); color: var(--ml-text);
}
.ml-search__input::placeholder { color: var(--ml-text-3); }
.ml-search__submit { display: none; }
@media (min-width: 1024px) {
	.ml-header__search .ml-search__submit {
		display: inline-grid; place-items: center;
		block-size: 38px; inline-size: 44px; margin-inline-end: 4px;
		border: 0; border-radius: var(--ml-r-sm);
		background: var(--ml-accent); color: var(--ml-on-accent);
	}
	.ml-header__search .ml-search__submit .ml-icon { inline-size: 20px; block-size: 20px; }
}
.ml-search.is-loading > .ml-icon { animation: ml-pulse 1s ease-in-out infinite; }
@keyframes ml-pulse { 50% { opacity: .35; } }
.ml-search--block { max-inline-size: 520px; margin: var(--ml-s6) auto; gap: var(--ml-s2); padding-inline-end: 4px; background: var(--ml-surface-1); border-color: var(--ml-border-strong); }

/* Live suggestions (assets/js/search.js) */
.ml-suggest {
	position: absolute; z-index: 70; inset-inline: 0; inset-block-start: calc(100% + 6px);
	max-block-size: min(70vh, 480px); overflow-y: auto;
	margin: 0; padding: var(--ml-s2); list-style: none;
	background: var(--ml-surface-1); border: 1px solid var(--ml-border); border-radius: var(--ml-r-lg);
	box-shadow: var(--ml-shadow-lg);
}
.ml-suggest__item { display: flex; align-items: center; gap: var(--ml-s3); min-block-size: 56px; padding: var(--ml-s2); border-radius: var(--ml-r-md); }
.ml-suggest [aria-selected="true"] .ml-suggest__item, .ml-suggest__item:hover { background: var(--ml-surface-2); color: var(--ml-text); }
.ml-suggest__item img { inline-size: 48px; block-size: 48px; object-fit: contain; background: var(--ml-surface-1); border: 1px solid var(--ml-border); border-radius: var(--ml-r-sm); flex: none; }
.ml-suggest__text { display: grid; gap: 2px; min-inline-size: 0; }
.ml-suggest__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ml-fs-sm); font-weight: 600; }
.ml-suggest__price { color: var(--ml-text-2); font-size: var(--ml-fs-xs); font-weight: 700; }
/* Skeleton rows while suggestions load */
.ml-suggest__skel { display: flex; align-items: center; gap: var(--ml-s3); padding: var(--ml-s2); }
.ml-skel { display: block; block-size: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--ml-surface-2) 25%, var(--ml-surface-3) 50%, var(--ml-surface-2) 75%); background-size: 200% 100%; animation: ml-shimmer 1.1s linear infinite; }
.ml-skel--img { inline-size: 48px; block-size: 48px; flex: none; border-radius: var(--ml-r-sm); }
.ml-skel--short { inline-size: 40%; }
.ml-skel-lines { display: grid; gap: 8px; flex: 1; }
@keyframes ml-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ml-skel { animation: none; } }
.ml-suggest__empty { padding: var(--ml-s3); color: var(--ml-text-2); font-size: var(--ml-fs-sm); }
.ml-suggest__all a { display: flex; align-items: center; justify-content: center; min-block-size: var(--ml-tap); margin-block-start: var(--ml-s1); border-radius: var(--ml-r-md); color: var(--ml-accent); font-size: var(--ml-fs-sm); font-weight: 700; }
.ml-suggest__all a:hover { background: var(--ml-accent-soft); }

/* ---------- Category bar ---------- */
/* Mobile: a compact chip row, only on store pages. Desktop: a quiet text bar on every page. */
.ml-catbar { display: none; }
.ml-catbar.is-store { display: block; border-block-start: 1px solid var(--ml-border); }
.ml-catbar__inner { display: flex; align-items: center; gap: var(--ml-s2); padding-block: var(--ml-s2); }
.ml-catbar__all, .ml-catbar__guide { display: none; }
.ml-catbar__list { flex: 1; min-inline-size: 0; margin: 0; padding: 0; list-style: none; gap: var(--ml-s2); }
.ml-catbar__list a {
	display: inline-flex; align-items: center;
	min-block-size: 36px; padding: 0 var(--ml-s3);
	border: 1px solid var(--ml-border); border-radius: var(--ml-r-pill);
	background: var(--ml-surface-1); color: var(--ml-text-2);
	font-size: var(--ml-fs-sm); font-weight: 600; white-space: nowrap;
}
.ml-catbar__list a:hover, .ml-catbar__list a[aria-current="page"] { border-color: var(--ml-accent-line); background: var(--ml-accent-soft); color: var(--ml-accent-strong); }

@media (min-width: 1024px) {
	.ml-catbar, .ml-catbar.is-store { display: block; border-block-start: 1px solid var(--ml-border); }
	.ml-catbar__inner { gap: var(--ml-s6); padding-block: 0; min-block-size: 48px; }
	.ml-catbar__all {
		display: inline-flex; align-items: center; gap: var(--ml-s2);
		min-block-size: 48px; padding: 0; border: 0; background: none;
		color: var(--ml-text); font-size: var(--ml-fs-sm); font-weight: 800;
	}
	.ml-catbar__all .ml-icon { inline-size: 18px; block-size: 18px; color: var(--ml-accent); }
	.ml-catbar__list { display: flex; gap: var(--ml-s5); overflow: hidden; }
	.ml-catbar__list a {
		min-block-size: 48px; padding: 0; border: 0; border-radius: 0; background: none;
		color: var(--ml-text-2); font-weight: 600;
		box-shadow: inset 0 -2px 0 transparent;
	}
	.ml-catbar__list a:hover, .ml-catbar__list a[aria-current="page"] { background: none; color: var(--ml-text); box-shadow: inset 0 -2px 0 var(--ml-accent); }
	.ml-catbar__guide { display: inline-flex; align-items: center; gap: var(--ml-s2); margin-inline-start: auto; color: var(--ml-accent); font-size: var(--ml-fs-sm); font-weight: 700; white-space: nowrap; }
	.ml-catbar__guide .ml-icon { inline-size: 18px; block-size: 18px; }
}

/* Chips (sub-categories, magazine topics, detail nav) */
.ml-chips { gap: var(--ml-s2); margin: 0; padding: 0; list-style: none; }
.ml-chips a {
	display: inline-flex; align-items: center; gap: var(--ml-s1);
	min-block-size: 38px; padding: 0 var(--ml-s4);
	border: 1px solid var(--ml-border); border-radius: var(--ml-r-pill);
	background: var(--ml-surface-1); color: var(--ml-text-2);
	font-size: var(--ml-fs-sm); font-weight: 600; white-space: nowrap;
}
.ml-chips a:hover, .ml-chips a[aria-current="page"] { border-color: var(--ml-accent-line); color: var(--ml-accent-strong); background: var(--ml-accent-soft); }
.ml-chips__count { color: var(--ml-text-3); font-size: var(--ml-fs-xs); }
.ml-chips--wrap { display: flex; flex-wrap: wrap; justify-content: center; margin-block: var(--ml-s6); }

/* ---------- Breadcrumbs ---------- */
.ml-breadcrumbs { margin-block: var(--ml-s3) var(--ml-s4); color: var(--ml-text-3); font-size: var(--ml-fs-xs); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.ml-breadcrumbs a { color: var(--ml-text-2); }
.ml-breadcrumbs a:hover { color: var(--ml-accent); }
.ml-breadcrumbs .separator { margin-inline: 6px; color: var(--ml-border-strong); }
.ml-breadcrumbs ol { display: flex; gap: var(--ml-s2); margin: 0; padding: 0; list-style: none; }

/* ---------- Sections ---------- */
.ml-section { margin-block: var(--ml-s10); }
@media (min-width: 1024px) { .ml-section { margin-block: var(--ml-s12); } }
.ml-section__head { display: flex; align-items: end; justify-content: space-between; gap: var(--ml-s4); margin-block-end: var(--ml-s4); }
.ml-section__head h2 { font-size: var(--ml-fs-xl); font-weight: 800; }
@media (min-width: 1024px) { .ml-section__head h2 { font-size: var(--ml-fs-2xl); } }
.ml-section__more { display: inline-flex; align-items: center; gap: 2px; min-block-size: var(--ml-tap); color: var(--ml-accent); font-size: var(--ml-fs-sm); font-weight: 700; white-space: nowrap; }
.ml-section__more .ml-icon { inline-size: 18px; block-size: 18px; }

/* ---------- Product card ---------- */
.ml-card {
	position: relative;
	display: flex; flex-direction: column;
	block-size: 100%;
	background: var(--ml-surface-1);
	border: 1px solid var(--ml-border);
	border-radius: var(--ml-r-lg);
	overflow: hidden;
	transition: border-color var(--ml-dur), box-shadow var(--ml-dur), transform var(--ml-dur) var(--ml-ease);
}
@media (hover: hover) {
	.ml-card:hover { border-color: var(--ml-border-strong); box-shadow: var(--ml-shadow-md); transform: translateY(-2px); }
}
.ml-card__media { position: relative; display: block; aspect-ratio: 1; background: #fff; }
.ml-card__img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: var(--ml-s3); }
.ml-card__media .ml-tag { position: absolute; inset-block-start: var(--ml-s2); inset-inline-start: var(--ml-s2); }
.ml-card.is-oos .ml-card__img { opacity: .5; filter: grayscale(.5); }
.ml-card__body { display: flex; flex-direction: column; gap: var(--ml-s2); flex: 1; padding: var(--ml-s3); border-block-start: 1px solid var(--ml-border); }
.ml-card__title {
	font-size: var(--ml-fs-sm); font-weight: 600; line-height: 1.8; color: var(--ml-text);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-block-size: calc(1.8em * 2);
}
.ml-card__title a { color: inherit; }
.ml-card__title a::after { content: ""; position: absolute; inset: 0; }
.ml-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--ml-s2); margin: 0; font-size: var(--ml-fs-xs); }
.ml-card__stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ml-card__stock::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.ml-card__stock.is-in { color: var(--ml-success); }
.ml-card__stock.is-out { color: var(--ml-text-3); }
.ml-card__rating { display: inline-flex; align-items: center; gap: 4px; color: var(--ml-text-2); }
.ml-card__rating .ml-icon { inline-size: 14px; block-size: 14px; color: var(--ml-star); fill: var(--ml-star); }
.ml-card { container: ml-card / inline-size; }
/* Price on top, button below: same rhythm on every card whatever the price length. */
.ml-card__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ml-s2); margin-block-start: auto; }
/* Reserve the old-price line (del above ins) on every card, so rows with and without a discount have equal heights. */
.ml-card__foot .ml-price { min-inline-size: 0; min-block-size: calc(var(--ml-fs-md) * 1.4 + var(--ml-fs-xs) * 1.4 + 2px); justify-content: flex-end; }
/* Narrow cards (2-column mobile, 5-up rails at 1024): price on top, full-width button below. */
@container ml-card (max-width: 230px) {
	.ml-card__foot { flex-direction: column; align-items: stretch; }
	.ml-card__foot .ml-card__add { inline-size: 100%; }
	.ml-card .added_to_cart { align-self: center; }
}

/* Add-to-cart pill. Selector specificity beats `.woocommerce a.button` without !important.
   States come from WooCommerce's own classes: .loading (AJAX), .added (done), product_type_* (variable). */
.ml-card .ml-card__foot .ml-card__add {
	--ml-add: #176b5d;
	--ml-add-hover: #11594e;
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	flex: none;
	min-block-size: 44px; block-size: auto; inline-size: auto;
	padding: 0 16px 0 18px;
	border: 0; border-radius: 14px;
	background: var(--ml-add); color: #fff;
	font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap;
	text-decoration: none; cursor: pointer;
	box-shadow: 0 4px 12px rgba(23, 107, 93, .14);
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* Icon in a translucent circle: plus (simple), arrow (variable/other), spinner (loading), check (added). */
.ml-card .ml-card__foot .ml-card__add::before {
	content: ""; flex: 0 0 24px; inline-size: 24px; block-size: 24px; box-sizing: border-box;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16) var(--ml-add-ico, var(--ml-ico-plus-w)) center / 14px no-repeat;
}
.ml-card .ml-card__foot .ml-card__add:not(.product_type_simple) { --ml-add-ico: var(--ml-ico-arrow-w); }
.ml-card .ml-card__foot .ml-card__add.added { --ml-add-ico: var(--ml-ico-check-w); background: #18794e; }
@media (hover: hover) {
	.ml-card .ml-card__foot .ml-card__add:hover,
	.ml-card .ml-card__foot .ml-card__add:active { background: var(--ml-add-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(23, 107, 93, .18); }
}
.ml-card .ml-card__foot .ml-card__add:active { transition: none; } /* no bounce on press */
.ml-card .ml-card__foot .ml-card__add:focus-visible { outline: 3px solid rgba(23, 107, 93, .35); outline-offset: 3px; }

/* Loading / added: swap the visible label, keep the element's size (text via ::after, icon via ::before). */
.ml-card .ml-card__foot .ml-card__add.loading,
.ml-card .ml-card__foot .ml-card__add.added { font-size: 0; gap: 0; }
.ml-card .ml-card__foot .ml-card__add.loading::after,
.ml-card .ml-card__foot .ml-card__add.added::after { font-size: 14px; margin-inline-start: 9px; }
.ml-card .ml-card__foot .ml-card__add.loading { pointer-events: none; opacity: 1; background: var(--ml-add-hover); transform: none; }
.ml-card .ml-card__foot .ml-card__add.loading::after { content: "در حال افزودن"; }
.ml-card .ml-card__foot .ml-card__add.added::after { content: "اضافه شد"; }
.ml-card .ml-card__foot .ml-card__add.loading::before {
	background: none;
	border: 2px solid rgba(255, 255, 255, .35); border-block-start-color: #fff;
	animation: ml-spin .7s linear infinite;
}
@keyframes ml-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ml-card .ml-card__foot .ml-card__add.loading::before { animation-duration: 2s; } }

/* Out of stock: grey, disabled, no icon. */
.ml-card .ml-card__foot .ml-card__add.is-out-of-stock {
	background: #e8ecea; color: #6b7570; box-shadow: none; cursor: not-allowed; transform: none; padding-inline: 16px;
}
.ml-card .ml-card__foot .ml-card__add.is-out-of-stock::before { display: none; }

/* WooCommerce's "view cart" link after an AJAX add. */
.ml-card .added_to_cart {
	position: relative; z-index: 1;
	align-self: flex-start;
	color: var(--ml-add, #176b5d); font-size: var(--ml-fs-xs); font-weight: 700;
	text-decoration: underline; text-underline-offset: 3px;
}
.ml-card .added_to_cart:hover { color: #11594e; }

@media (max-width: 600px) {
	.ml-card .ml-card__foot .ml-card__add { inline-size: 100%; min-block-size: 40px; padding: 0 10px; gap: 6px; font-size: 13px; border-radius: 12px; }
	.ml-card .ml-card__foot .ml-card__add::before { flex-basis: 21px; inline-size: 21px; block-size: 21px; background-size: 12px; }
	.ml-card .ml-card__foot .ml-card__add.loading::after,
	.ml-card .ml-card__foot .ml-card__add.added::after { font-size: 13px; margin-inline-start: 6px; }
}
:root {
	--ml-ico-plus-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--ml-ico-arrow-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m6 6-6-6 6-6'/%3E%3C/svg%3E");
	--ml-ico-check-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Price */
.ml-price { display: flex; flex-direction: column; gap: 2px; font-weight: 800; font-size: var(--ml-fs-md); line-height: 1.4; color: var(--ml-text); }
.ml-price del { order: -1; color: var(--ml-text-3); font-weight: 500; font-size: var(--ml-fs-xs); }
.ml-price ins { text-decoration: none; }
.ml-price .woocommerce-Price-currencySymbol { font-size: .72em; font-weight: 600; color: var(--ml-text-2); margin-inline-start: 2px; }
.ml-price__oos { color: var(--ml-text-3); font-size: var(--ml-fs-sm); font-weight: 600; }

/* Rail variants: deals sit on a soft orange panel, ready-to-ship on a soft brand panel. */
.ml-rail--deal, .ml-rail--ready {
	padding: var(--ml-s5) var(--ml-s4) var(--ml-s4);
	border-radius: var(--ml-r-xl);
	border: 1px solid var(--ml-accent-2-line);
	background: linear-gradient(180deg, var(--ml-accent-2-soft), #fff 70%);
}
.ml-rail--deal .ml-eyebrow { color: var(--ml-accent-2); }
.ml-rail--ready { border-color: var(--ml-accent-line); background: linear-gradient(180deg, var(--ml-accent-soft), #fff 70%); }
@media (min-width: 1024px) { .ml-rail--deal, .ml-rail--ready { padding: var(--ml-s6); } }

/* Trust band */
.ml-trust { margin-block: var(--ml-s12) 0; padding-block: var(--ml-s6); background: var(--ml-surface-1); border-block: 1px solid var(--ml-border); }
.ml-trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ml-s4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ml-trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ml-trust__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ml-trust__item { display: flex; align-items: flex-start; gap: var(--ml-s3); }
.ml-trust__icon { display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; border-radius: var(--ml-r-md); background: var(--ml-accent-soft); color: var(--ml-accent); }
.ml-trust__body { display: grid; gap: 2px; font-size: var(--ml-fs-xs); color: var(--ml-text-2); line-height: 1.7; }
.ml-trust__body strong { color: var(--ml-text); font-size: var(--ml-fs-sm); }

/* Add-to-cart toast (app.js) */
.ml-toast {
	position: fixed; z-index: 90; inset-inline: var(--ml-s4); inset-block-end: calc(var(--ml-bottom-nav-h) + var(--ml-s3) + env(safe-area-inset-bottom));
	display: flex; align-items: center; justify-content: space-between; gap: var(--ml-s3);
	max-inline-size: 420px; margin-inline: auto; padding: var(--ml-s3) var(--ml-s4);
	border-radius: var(--ml-r-lg); background: var(--ml-ink); color: #fff; box-shadow: var(--ml-shadow-lg);
	font-size: var(--ml-fs-sm); font-weight: 600;
	transform: translateY(12px); opacity: 0; pointer-events: none;
	transition: transform var(--ml-dur) var(--ml-ease), opacity var(--ml-dur);
}
.ml-toast.is-on { transform: none; opacity: 1; pointer-events: auto; }
.ml-toast a { color: #9be3cf; font-weight: 800; white-space: nowrap; }
@media (min-width: 1024px) { .ml-toast { inset-block-end: var(--ml-s6); inset-inline: auto var(--ml-s6); } }

/* ---------- Rails ---------- */
.ml-rail__list { gap: var(--ml-s3); padding-block: 2px var(--ml-s2); scroll-padding-inline: var(--ml-gutter); }
.ml-rail__item { inline-size: 46%; max-inline-size: 240px; }
@media (min-width: 768px) { .ml-rail__item { inline-size: 30%; } }
@media (min-width: 1024px) { .ml-rail__item { inline-size: calc((100% - 4 * var(--ml-s4)) / 5); } .ml-rail__list { gap: var(--ml-s4); } }

/* ---------- Guide cards ---------- */
.ml-guide-grid { display: grid; gap: var(--ml-s4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .ml-guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ml-guide-grid { grid-template-columns: repeat(4, 1fr); gap: var(--ml-s5); } }
.ml-guide-card { position: relative; display: flex; flex-direction: column; background: var(--ml-surface-1); border: 1px solid var(--ml-border); border-radius: var(--ml-r-lg); overflow: hidden; transition: box-shadow var(--ml-dur), border-color var(--ml-dur); }
.ml-guide-card:hover { border-color: var(--ml-border-strong); box-shadow: var(--ml-shadow-md); }
.ml-guide-card__media { display: block; aspect-ratio: 16 / 9; background: var(--ml-accent-soft); }
.ml-guide-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ml-guide-card__ph { display: grid; place-items: center; block-size: 100%; color: var(--ml-accent); }
.ml-guide-card__ph .ml-icon { inline-size: 36px; block-size: 36px; }
.ml-guide-card__body { padding: var(--ml-s4); }
.ml-guide-card__title { font-size: var(--ml-fs-md); font-weight: 700; line-height: 1.7; }
.ml-guide-card__title a { color: var(--ml-text); }
.ml-guide-card__title a::after { content: ""; position: absolute; inset: 0; }
.ml-guide-card__excerpt { margin: var(--ml-s2) 0 0; color: var(--ml-text-2); font-size: var(--ml-fs-sm); line-height: 1.9; }

/* ---------- Empty states ---------- */
.ml-empty { display: grid; justify-items: center; gap: var(--ml-s3); padding: var(--ml-s12) var(--ml-s4); text-align: center; background: var(--ml-surface-1); border: 1px dashed var(--ml-border-strong); border-radius: var(--ml-r-xl); }
.ml-empty > * { max-inline-size: 100%; min-inline-size: 0; }
.ml-empty .ml-search--block { inline-size: 100%; }
.ml-empty .ml-search__input { min-inline-size: 0; }
.ml-empty__title { margin: 0; font-size: var(--ml-fs-lg); font-weight: 800; }
.ml-empty__text { margin: 0; color: var(--ml-text-2); }

/* ---------- Page head ---------- */
.ml-page-head { margin-block: var(--ml-s2) var(--ml-s6); }
.ml-page-head__title { font-size: var(--ml-fs-2xl); }
.ml-page-head__desc { margin-block-start: var(--ml-s3); }

/* ---------- Pagination ---------- */
.ml-pagination .nav-links, .woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ml-s2); margin: var(--ml-s8) 0 0; padding: 0; list-style: none; border: 0; }
.ml-pagination .page-numbers, .woocommerce-pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-inline-size: var(--ml-tap); min-block-size: var(--ml-tap); padding: 0 var(--ml-s3);
	border: 1px solid var(--ml-border); border-radius: var(--ml-r-md);
	background: var(--ml-surface-1); color: var(--ml-text-2); font-weight: 700;
}
.ml-pagination a.page-numbers:hover, .woocommerce-pagination a.page-numbers:hover { border-color: var(--ml-accent); color: var(--ml-accent); }
.ml-pagination .page-numbers.current, .woocommerce-pagination .page-numbers.current { background: var(--ml-text); border-color: transparent; color: #fff; }
.woocommerce-pagination li { border: 0 !important; }

/* ---------- Drawer & bottom sheet (native <dialog>) ---------- */
.ml-drawer, .ml-sheet {
	position: fixed; inset: 0; z-index: 200;
	inline-size: 100%; max-inline-size: none; block-size: 100%; max-block-size: none;
	margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
}
.ml-drawer::backdrop, .ml-sheet::backdrop { background: rgba(22, 24, 26, .45); }
.ml-drawer__panel {
	position: absolute; inset-block: 0; inset-inline-start: 0;
	inline-size: min(88vw, 360px);
	display: flex; flex-direction: column; gap: var(--ml-s4);
	padding: var(--ml-s4) var(--ml-s4) calc(var(--ml-s8) + env(safe-area-inset-bottom));
	background: var(--ml-surface-1);
	box-shadow: var(--ml-shadow-lg);
	overflow-y: auto; overscroll-behavior: contain;
}
.ml-drawer[open] .ml-drawer__panel { animation: ml-drawer-in var(--ml-dur) var(--ml-ease); }
@keyframes ml-drawer-in { from { transform: translateX(24px); opacity: 0; } }
.ml-drawer__head, .ml-sheet__head { display: flex; align-items: center; justify-content: space-between; }
.ml-drawer__title, .ml-sheet__title { margin: 0; font-weight: 800; font-size: var(--ml-fs-lg); }
.ml-drawer__sub { margin: 0 0 var(--ml-s2); color: var(--ml-text-3); font-size: var(--ml-fs-xs); font-weight: 700; }
.ml-drawer__links, .ml-drawer__cats { margin: 0; padding: 0; list-style: none; }
.ml-drawer__links a, .ml-drawer__cats a {
	display: flex; align-items: center; justify-content: space-between;
	min-block-size: 48px; padding-inline: var(--ml-s3);
	border-radius: var(--ml-r-md); font-weight: 600; color: var(--ml-text);
}
.ml-drawer__links a:hover, .ml-drawer__cats a:hover { background: var(--ml-surface-2); color: var(--ml-text); }
.ml-drawer__count { min-inline-size: 28px; padding: 2px 8px; border-radius: var(--ml-r-pill); background: var(--ml-surface-2); color: var(--ml-text-2); font-size: var(--ml-fs-xs); text-align: center; }
.ml-drawer__guide { display: flex; align-items: center; gap: var(--ml-s2); min-block-size: 48px; padding-inline: var(--ml-s3); border-radius: var(--ml-r-md); background: var(--ml-accent-soft); color: var(--ml-accent-strong); font-weight: 700; }

/* Desktop: the same dialog becomes a mega panel under the header (categories in columns). */
@media (min-width: 1024px) {
	.ml-drawer__panel {
		inset-block: 96px auto; inset-inline: 0; margin-inline: auto;
		inline-size: min(1120px, calc(100vw - 64px)); max-block-size: calc(100vh - 140px);
		padding: var(--ml-s6); border-radius: var(--ml-r-xl);
	}
	.ml-drawer[open] .ml-drawer__panel { animation-name: ml-mega-in; }
	.ml-drawer__cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px var(--ml-s4); }
	.ml-drawer__links { display: flex; flex-wrap: wrap; gap: var(--ml-s2) var(--ml-s4); }
	.ml-drawer__guide { align-self: flex-start; padding-inline: var(--ml-s4); }
}
@keyframes ml-mega-in { from { transform: translateY(-8px); opacity: 0; } }

.ml-sheet__panel {
	position: absolute; inset-inline: 0; inset-block-end: 0;
	max-block-size: 85dvh; overflow-y: auto; overscroll-behavior: contain;
	display: flex; flex-direction: column; gap: var(--ml-s4);
	padding: var(--ml-s3) var(--ml-s4) calc(var(--ml-s6) + env(safe-area-inset-bottom));
	background: var(--ml-surface-1);
	border-radius: var(--ml-r-xl) var(--ml-r-xl) 0 0;
	box-shadow: var(--ml-shadow-lg);
}
.ml-sheet__panel::before { content: ""; align-self: center; inline-size: 40px; block-size: 4px; border-radius: 4px; background: var(--ml-border-strong); }
.ml-sheet[open] .ml-sheet__panel { animation: ml-sheet-in var(--ml-dur) var(--ml-ease); }
@keyframes ml-sheet-in { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 768px) {
	.ml-sheet__panel { inset-inline: 0; margin-inline: auto; inline-size: 480px; inset-block-end: auto; inset-block-start: 10vh; border-radius: var(--ml-r-xl); }
}

/* ---------- Bottom nav (mobile) ---------- */
.ml-bottomnav {
	position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
	padding-block-end: env(safe-area-inset-bottom);
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	border-block-start: 1px solid var(--ml-border);
	box-shadow: 0 -4px 16px -12px rgba(22, 24, 26, .25);
}
.ml-bottomnav ul { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.ml-bottomnav__item {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	block-size: var(--ml-bottom-nav-h);
	color: var(--ml-text-3); font-size: 11px; font-weight: 600;
}
.ml-bottomnav__item[aria-current="page"], .ml-bottomnav__item:hover { color: var(--ml-accent); }
.ml-bottomnav__icon { position: relative; }
@media (min-width: 1024px) { .ml-bottomnav { display: none; } }

/* ---------- Footer (dark block) ---------- */
.ml-footer { margin-block-start: var(--ml-s16); background: var(--ml-ink); color: var(--ml-on-ink-2); font-size: var(--ml-fs-sm); }
.ml-footer a { color: var(--ml-on-ink); }
.ml-footer a:hover { color: #fff; text-decoration: underline; }
.ml-footer__grid { display: grid; gap: var(--ml-s8); padding-block: var(--ml-s10); }
@media (min-width: 768px) { .ml-footer__grid { grid-template-columns: 2fr 1fr 1fr auto; gap: var(--ml-s10); } }
.ml-footer__brand { margin: 0 0 var(--ml-s2); color: #fff; font-size: var(--ml-fs-lg); font-weight: 900; }
.ml-footer__text { color: var(--ml-on-ink-2); line-height: 2; }
.ml-footer__title { margin: 0 0 var(--ml-s3); color: #fff; font-weight: 800; }
.ml-footer__links, .ml-contact { margin: 0; padding: 0; list-style: none; }
.ml-footer__links a { display: flex; align-items: center; min-block-size: 36px; color: var(--ml-on-ink-2); }
.ml-footer__links a:hover { color: #fff; }
.ml-contact li { display: flex; align-items: center; gap: var(--ml-s2); min-block-size: 36px; }
.ml-contact .ml-icon { inline-size: 18px; block-size: 18px; color: #7fd3c5; }
/* Trust badges (eNamad + Torob guarantee): equal white cards, images contained (never stretched or cropped). */
.ml-trust-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ml-s3); }
.ml-trust-badge {
	display: grid; place-items: center; flex: none;
	inline-size: 92px; block-size: 92px; box-sizing: border-box; padding: 6px;
	background: #fff; border: 1px solid var(--ml-border); border-radius: var(--ml-r-md); overflow: hidden;
	transition: box-shadow .2s ease;
}
.ml-footer a.ml-trust-badge:hover { text-decoration: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.ml-trust-badge:focus-visible { outline: 3px solid #7fd3c5; outline-offset: 2px; }
.ml-trust-badge img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: 100%; object-fit: contain; }
.ml-trust-badge[hidden] { display: none; }
.ml-trust-badge__text { color: var(--ml-text); font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center; }
@media (max-width: 767px) { .ml-trust-badge { inline-size: 78px; block-size: 78px; padding: 5px; } }
.ml-footer__legal { padding-block: var(--ml-s4); border-block-start: 1px solid rgba(255, 255, 255, .1); color: var(--ml-on-ink-2); font-size: var(--ml-fs-xs); }
.ml-footer__legal p { margin: 0; }

/* ---------- WooCommerce notices ---------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ml-s3);
	margin: 0 0 var(--ml-s4); padding: var(--ml-s3) var(--ml-s4);
	list-style: none;
	border-radius: var(--ml-r-md);
	border: 1px solid var(--ml-border);
	border-inline-start: 4px solid var(--ml-accent);
	background: var(--ml-surface-1);
	color: var(--ml-text);
	font-size: var(--ml-fs-sm);
}
.woocommerce-message { border-inline-start-color: var(--ml-success); }
.woocommerce-error { border-inline-start-color: var(--ml-danger); background: #fdf3f3; }
.woocommerce-error li + li { margin-block-start: var(--ml-s1); }
.woocommerce-message .button, .woocommerce-info .button { order: 2; }

/* WooCommerce AJAX loading overlay (jQuery blockUI) */
.blockUI.blockOverlay { background: rgba(255, 255, 255, .6) !important; opacity: 1 !important; border-radius: inherit; }

/* ---------- Forms ---------- */
.woocommerce form .form-row { margin: 0 0 var(--ml-s4); }
.woocommerce form .form-row label, .ml-label { display: block; margin-block-end: var(--ml-s1); color: var(--ml-text-2); font-size: var(--ml-fs-sm); font-weight: 600; }
.woocommerce form .form-row .required { color: var(--ml-danger); text-decoration: none; }
.woocommerce input.input-text, .woocommerce textarea, .woocommerce select, .woocommerce .select2-selection, .ml-input,
.woocommerce-page input[type="text"], .woocommerce-page input[type="email"], .woocommerce-page input[type="tel"], .woocommerce-page input[type="password"], .woocommerce-page input[type="number"] {
	inline-size: 100%; min-block-size: var(--ml-tap);
	padding: var(--ml-s2) var(--ml-s3);
	background: var(--ml-surface-1); color: var(--ml-text);
	border: 1px solid var(--ml-border-strong); border-radius: var(--ml-r-md);
	font-size: var(--ml-fs-md); /* 16px: no iOS zoom on focus */
}
.woocommerce input.input-text:focus, .woocommerce textarea:focus, .woocommerce select:focus { border-color: var(--ml-accent); outline: none; box-shadow: 0 0 0 3px var(--ml-accent-soft); }
.woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--ml-danger); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--ml-success); }
.woocommerce select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ml-text-2) 50%), linear-gradient(135deg, var(--ml-text-2) 50%, transparent 50%); background-position: 16px 50%, 11px 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-start: 32px; }
.select2-container--default .select2-selection--single { block-size: var(--ml-tap); display: flex; align-items: center; }
.select2-dropdown { border-color: var(--ml-border-strong); border-radius: var(--ml-r-md); }

/* Quantity stepper (progressively enhanced by app.js) */
.quantity { display: inline-flex; align-items: center; border: 1px solid var(--ml-border-strong); border-radius: var(--ml-r-md); background: var(--ml-surface-1); }
.quantity .qty { inline-size: 3em; min-block-size: var(--ml-tap); border: 0 !important; background: transparent !important; text-align: center; font-weight: 700; -moz-appearance: textfield; box-shadow: none !important; padding: 0 !important; }
.quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ml-qty-btn { inline-size: var(--ml-tap); block-size: var(--ml-tap); display: grid; place-items: center; border: 0; background: transparent; color: var(--ml-text); }
.ml-qty-btn .ml-icon { inline-size: 18px; block-size: 18px; }
.ml-qty-btn:hover { color: var(--ml-accent); }

/* Star rating (WooCommerce markup) */
.star-rating { position: relative; display: inline-block; inline-size: 5.4em; block-size: 1.1em; font-size: 14px; line-height: 1; overflow: hidden; }
.star-rating::before { content: "★★★★★"; position: absolute; inset: 0; color: var(--ml-surface-3); letter-spacing: .1em; }
.star-rating span { position: absolute; inset-block: 0; inset-inline-start: 0; overflow: hidden; padding-block-start: 1.5em; }
.star-rating span::before { content: "★★★★★"; position: absolute; inset-block-start: 0; inset-inline-start: 0; color: var(--ml-star); letter-spacing: .1em; }

/* ---------- Card actions: wishlist / compare / quick view ---------- */
.ml-card__actions {
	position: absolute; z-index: 2; inset-block-start: var(--ml-s2); inset-inline-end: var(--ml-s2);
	display: flex; flex-direction: column; gap: 6px;
}
.ml-card__actions[hidden] { display: none; }
.ml-card__act {
	display: grid; place-items: center; inline-size: 36px; block-size: 36px; padding: 0;
	border: 1px solid var(--ml-border); border-radius: 50%;
	background: rgba(255, 255, 255, .94); color: var(--ml-text-2); cursor: pointer;
	transition: color var(--ml-dur), border-color var(--ml-dur), opacity var(--ml-dur), transform var(--ml-dur) var(--ml-ease);
}
.ml-card__act .ml-icon { inline-size: 18px; block-size: 18px; }
.ml-card__act:hover { color: var(--ml-accent); border-color: var(--ml-accent-line); }
.ml-card__act[aria-pressed="true"] { color: var(--ml-accent); border-color: var(--ml-accent-line); background: var(--ml-accent-soft); }
.ml-card__act[data-ml-toggle="wishlist"][aria-pressed="true"] .ml-icon { fill: currentColor; }
.ml-card__act:focus-visible { outline: 2px solid var(--ml-accent); outline-offset: 2px; }
/* Touch: only the wishlist heart stays visible (compare/quick view need hover space). */
.ml-card__act:not([data-ml-toggle="wishlist"]) { display: none; }
@media (hover: hover) and (min-width: 1024px) {
	.ml-card__act:not([data-ml-toggle="wishlist"]) { display: grid; }
	.ml-card__act { opacity: 0; transform: translateX(-4px); }
	.ml-card__act[aria-pressed="true"], .ml-card:hover .ml-card__act, .ml-card:focus-within .ml-card__act { opacity: 1; transform: none; }
}
.ml-header__wish { display: none; }
@media (min-width: 1024px) { .ml-header__wish { display: inline-flex; } }

/* ---------- Rail slider ---------- */
.ml-rail__tools { display: flex; align-items: center; gap: var(--ml-s2); }
.ml-rail__nav { display: none; }
@media (hover: hover) and (min-width: 1024px) {
	.ml-rail__nav {
		display: grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 0;
		border: 1px solid var(--ml-border-strong); border-radius: 50%; background: var(--ml-surface-1); color: var(--ml-text); cursor: pointer;
	}
	.ml-rail__nav:hover:not(:disabled) { border-color: var(--ml-accent); color: var(--ml-accent); }
	.ml-rail__nav:disabled { opacity: .35; cursor: default; }
	.ml-rail__nav[data-ml-rail="prev"] .ml-icon { transform: scaleX(-1); } /* RTL: prev points right */
	.ml-rail__nav .ml-icon { inline-size: 20px; block-size: 20px; }
}
.ml-rail--feature {
	padding: var(--ml-s5) var(--ml-s4) var(--ml-s4);
	border-radius: var(--ml-r-xl); border: 1px solid var(--ml-border); background: var(--ml-surface-2);
}
@media (min-width: 1024px) { .ml-rail--feature { padding: var(--ml-s6); } }

/* ---------- Quick view dialog ---------- */
.ml-quick { inline-size: min(880px, calc(100vw - 24px)); max-block-size: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--ml-r-xl); background: var(--ml-surface-1); color: var(--ml-text); box-shadow: var(--ml-shadow-lg); }
.ml-quick::backdrop { background: rgba(22, 24, 26, .45); }
.ml-quick__panel { position: relative; padding: var(--ml-s5); }
.ml-quick__close { position: absolute; inset-block-start: var(--ml-s2); inset-inline-end: var(--ml-s2); z-index: 1; }
.ml-quick__body { display: grid; gap: var(--ml-s5); }
@media (min-width: 768px) { .ml-quick__body { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.ml-quick__media { aspect-ratio: 1; border-radius: var(--ml-r-lg); border: 1px solid var(--ml-border); background: #fff; overflow: hidden; }
.ml-quick__media img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: var(--ml-s4); }
.ml-quick__info { display: grid; gap: var(--ml-s3); align-content: start; }
.ml-quick__title { margin: 0; padding-inline-end: var(--ml-s8); font-size: var(--ml-fs-lg); font-weight: 800; line-height: 1.7; }
.ml-quick__price { font-size: var(--ml-fs-lg); }
.ml-quick__desc { max-block-size: 9.5em; overflow: auto; color: var(--ml-text-2); font-size: var(--ml-fs-sm); line-height: 1.9; }
.ml-quick__desc p { margin: 0 0 var(--ml-s2); }
.ml-quick__actions { display: flex; flex-wrap: wrap; gap: var(--ml-s2); }
.ml-quick__loading { grid-column: 1 / -1; block-size: 320px; border-radius: var(--ml-r-lg); background: linear-gradient(90deg, var(--ml-surface-2), var(--ml-surface-1), var(--ml-surface-2)); background-size: 200% 100%; animation: ml-shimmer 1.2s linear infinite; }
@keyframes ml-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ml-quick__loading { animation: none; } .ml-card__act { transition: none; } }

/* ---------- Wishlist / compare pages ---------- */
.ml-btn--sm { min-height: 38px; padding-inline: var(--ml-s3); font-size: var(--ml-fs-sm); }
.ml-list[aria-busy="true"] { opacity: .6; }
.ml-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--ml-s3); margin: 0; padding: 0; list-style: none; }
.ml-mini { display: grid; grid-template-columns: 96px 1fr; gap: var(--ml-s3); padding: var(--ml-s3); border: 1px solid var(--ml-border); border-radius: var(--ml-r-lg); background: var(--ml-surface-1); }
.ml-mini__media { aspect-ratio: 1; border-radius: var(--ml-r-md); background: #fff; overflow: hidden; }
.ml-mini__media img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.ml-mini__body { display: grid; gap: var(--ml-s1); align-content: start; font-size: var(--ml-fs-sm); }
.ml-mini__title { color: var(--ml-text); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ml-mini__row { display: flex; flex-wrap: wrap; gap: var(--ml-s2); margin-block-start: var(--ml-s1); }
.ml-compare { overflow-x: auto; border: 1px solid var(--ml-border); border-radius: var(--ml-r-lg); background: var(--ml-surface-1); }
.ml-compare__table { inline-size: 100%; min-inline-size: 560px; border-collapse: collapse; font-size: var(--ml-fs-sm); }
.ml-compare__table th, .ml-compare__table td { padding: var(--ml-s3); border-block-end: 1px solid var(--ml-border); text-align: start; vertical-align: top; }
.ml-compare__table th { inline-size: 120px; background: var(--ml-surface-2); color: var(--ml-text-2); font-weight: 700; }
.ml-compare__product { display: grid; gap: var(--ml-s2); margin-block-end: var(--ml-s2); color: var(--ml-text); font-weight: 700; }
.ml-compare__product img { inline-size: 120px; block-size: 120px; object-fit: contain; }

/* ---------- Design-preview flag (mishiland-core, staging only) ---------- */
.ml-preview-flag { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--ml-s3); padding: 6px var(--ml-s4); background: var(--ml-accent-soft); color: var(--ml-accent-strong); font-size: var(--ml-fs-xs); font-weight: 700; border-block-end: 1px solid var(--ml-accent-line); }
.ml-preview-flag a { color: inherit; text-decoration: underline; }