/*
 * Mim-Cafe — shop
 *
 * Single product for now. Everything routes through the same design tokens as
 * the cafe side, so one palette drives both halves of the site.
 */

.mim-product {
	--mim-media-w: 52%;
	--mim-sticky-top: 24px;

	display: grid;
	grid-template-columns: var(--mim-media-w) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	max-width: 1180px;
	margin-inline: auto;
	padding: 48px 32px 64px;
	box-sizing: border-box;
	font-family: var(--mim-font, system-ui, sans-serif);
	color: var(--mim-accent, #25334E);
	text-align: start;
}

.mim-product * { box-sizing: inherit; }

/* The image column is first in the DOM; this moves it without reordering the
   markup, so the heading still comes first for a screen reader. */
.mim-product--media-end .mim-product__media { order: 2; }

/* ── Media ── */

.mim-product__media {
	min-width: 0;
}

/* The figure and its thumbnails. This used to be the layout of the outer
   element; it moved in here when the outer one became a stretching shell for
   the sticky wrapper. */
.mim-product__media-inner {
	display: grid;
	gap: 14px;
	min-width: 0;
}

/*
 * ── Where the photograph is allowed to travel ──
 *
 * The outer element stretches to fill its grid row and does not stick. The
 * wrapper inside it sticks, and is bounded by the outer element -- so the photo
 * can ride down beside a long buy panel and then stops dead at the bottom of
 * row 1, instead of carrying on over the description in row 2.
 *
 * Sticking the outer grid item directly is what caused that: measured against
 * this stylesheet, the photo overlapped the description at 13 of 19 scroll
 * positions, by as much as 183px. This arrangement measures 0, and still pins
 * the photo for 62 positions when the panel is long, which is the whole point
 * of the setting.
 */
.mim-product--sticky .mim-product__media {
	align-self: stretch;
}

.mim-product--sticky .mim-product__media-inner {
	position: sticky;
	top: var(--mim-sticky-top);
}

.mim-product__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 26px;
	background: #1B2A6B;
}

.mim-product__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .25s ease;
}

.mim-product__image--empty { background: rgba(255, 255, 255, .06); }

.mim-product__figure.is-swapping .mim-product__image { opacity: 0; }

.mim-product__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mim-product__thumb {
	width: 66px;
	height: 66px;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 14px;
	background: none;
	cursor: pointer;
	transition: border-color .2s;
}

.mim-product__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mim-product__thumb.is-active { border-color: var(--mim-accent, #25334E); }

/* ── Panel ── */

.mim-product__panel {
	display: grid;
	gap: 18px;
	align-content: start;
	min-width: 0;
}

.mim-product__cats {
	margin: 0;
	font-size: 13px;
	letter-spacing: .02em;
	color: rgba(37, 51, 78, .55);
}

.mim-product__title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
}

.mim-product__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	direction: ltr;
	font-size: 28px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* The price changes as options are picked, so it gets a beat of movement —
   enough to notice, not enough to distract. */
.mim-product__price.is-changed { animation: mim-price-pop .35s ease; }

@keyframes mim-price-pop {
	40% { transform: translateY(-4px); }
	100% { transform: translateY(0); }
}

.mim-product__short {
	margin: 0;
	line-height: 2;
	color: rgba(37, 51, 78, .72);
}

.mim-product__short p { margin: 0 0 .8em; }
.mim-product__short p:last-child { margin-bottom: 0; }

.mim-product__sku {
	margin: 0;
	font-size: 13px;
	color: rgba(37, 51, 78, .5);
}

/* ── Options ── */

.mim-product__form {
	display: grid;
	gap: 20px;
	margin: 6px 0 0;
}

.mim-product__opt-group { display: grid; gap: 10px; }

.mim-product__opt-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(37, 51, 78, .62);
}

/* `min-width` rather than `width`: the label is a control and may be a word
   rather than a single character, which a fixed square would clip. */
.mim-product__help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.mim-product__help:hover {
	background: var(--mim-accent, #25334E);
	border-color: var(--mim-accent, #25334E);
	color: #fff;
}

.mim-product__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Weights are short and grinds are long, so a shared minimum keeps a row of
   either from turning into a ragged staircase of different-width pills.

   `flex-shrink: 0` is the important half: in the nowrap row a phone gets, a
   shrinkable pill is squeezed below its content and the label spills out of
   its own border. The row is allowed to overflow — that is what it scrolls
   for — the pills are not. */
.mim-product__opts .mim-opt {
	flex: 0 0 auto;
	min-width: 92px;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
}

/* On a phone the same row would wrap to four lines and push the buy button off
   the first screen. One horizontal swipe keeps it to one line, and the fade on
   the trailing edge is what says there is more. */
@media (max-width: 767px) {
	.mim-scroller,
	.mim-product__opts {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;

		/* The row bleeds to both screen edges so nothing looks clipped mid-pill,
		   while its content still lines up with the rest of the panel. */
		margin-inline: -16px;
		padding-inline: 16px;

		/* Only the far edge fades. The row starts flush against the near edge
		   with nothing behind it, so a fade there says "scroll back" about a
		   place there is nothing to scroll back to. */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
	}

	[dir="rtl"] .mim-scroller,
	[dir="rtl"] .mim-product__opts {
		-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent 100%);
		mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent 100%);
	}

	/* Scrolled to the end there is nothing left to hint at, so the fade goes. */
	.mim-scroller.is-end,
	.mim-product__opts.is-end {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.mim-scroller::-webkit-scrollbar,
	.mim-product__opts::-webkit-scrollbar { display: none; }

	.mim-scroller > *,
	.mim-product__opts > * {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

.mim-opt {
	--mim-opt-bg: #fff;
	--mim-opt-color: #25334E;
	--mim-opt-bd: rgba(37, 51, 78, .18);

	padding: 11px 18px;
	border: 1px solid var(--mim-opt-bd);
	border-radius: 14px;
	background: var(--mim-opt-bg);
	color: var(--mim-opt-color);
	font: inherit;
	line-height: 1.6;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}

.mim-opt[disabled] {
	opacity: .4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* ── Buy row ── */

.mim-product__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.mim-product__qty {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px;
	border: 1px solid rgba(37, 51, 78, .18);
	border-radius: 14px;
	background: #fff;
}

.mim-product__qty button {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s;
}

.mim-product__qty button:hover { background: rgba(37, 51, 78, .08); }

.mim-product__qty > span {
	min-width: 28px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.mim-product__add {
	flex: 1 1 200px;
	padding: 17px 28px;
	border: 0;
	border-radius: 16px;
	background: var(--mim-accent, #25334E);
	color: var(--mim-on-accent, #fff);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s, transform .2s, opacity .2s;
}

.mim-product__add:hover { transform: translateY(-2px); }

.mim-product__add[disabled] {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

/* ── Grind help ── */

.mim-grind-modal[hidden] { display: none; }

.mim-grind-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.mim-grind-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(20, 26, 40, .5);
	backdrop-filter: blur(2px);
}

.mim-grind-modal__panel {
	position: relative;
	width: min(560px, 100%);
	max-height: 82vh;
	max-height: 82dvh;
	overflow-y: auto;
	padding: 24px;
	border-radius: 22px;
	background: var(--mim-surface, #FBF6EE);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	animation: mim-grind-in .25s ease;
}

@keyframes mim-grind-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.mim-grind-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.mim-grind-modal__head h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.mim-grind-modal__close {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(37, 51, 78, .08);
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.mim-grind-modal__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mim-grind-modal__list li {
	display: grid;
	gap: 3px;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .6);
}

.mim-grind-modal__list strong { font-size: 15px; }

.mim-grind-modal__list span {
	font-size: 13px;
	line-height: 1.9;
	color: rgba(37, 51, 78, .72);
}

/* ── Tablet ── */

@media (max-width: 1024px) {
	.mim-product {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 32px 24px 48px;
	}

	.mim-product--media-end .mim-product__media { order: 0; }

	/* One column here, so there is nothing to ride alongside. Both halves are
	   released: the wrapper as well as the shell, or the wrapper would go on
	   sticking inside a stretched shell for no reason. */
	.mim-product--sticky .mim-product__media,
	.mim-product--sticky .mim-product__media-inner {
		position: static;
		align-self: auto;
	}
}

/* ── Phone ──
   The photo pins to the top of the viewport and the panel rides up over it.
   `position: sticky` on the figure does the whole thing: the panel is the next
   block in normal flow, so it covers the image as the page scrolls, and the
   image un-pins by itself once its own column has scrolled past. */

@media (max-width: 767px) {
	.mim-product {
		gap: 0;
		padding: 0 0 32px;
	}

	/* The photo pins to the top and the panel rides up over it as the page
	   scrolls. `position: sticky` on the figure does the whole thing: the panel
	   is the next block in normal flow, so it covers the image on its way past,
	   and the image un-pins by itself once its own column has scrolled out.

	   The panel needs a solid ground of its own for that — it is passing over a
	   photograph. White, not the cream surface: the cream was reading as a
	   tinted block behind the title and price rather than as the page. */
	/*
	 * Here the shell is the right thing to stick, not the wrapper.
	 *
	 * On a phone the panel is the next block in normal flow rather than a
	 * neighbouring column, so it rides up over the photo -- and for that the
	 * photo has to be pinned to the viewport, not held inside a shell that
	 * scrolls away with it. This is the opposite arrangement to desktop on
	 * purpose, and it is why the desktop rule was not simply moved.
	 */
	.mim-product--sticky .mim-product__media {
		position: sticky;
		top: 0;
		z-index: 0;
	}

	.mim-product--sticky .mim-product__media-inner {
		position: static;
	}

	.mim-product__figure {
		aspect-ratio: 4 / 5;
		border-radius: 0;
	}

	.mim-product__thumbs {
		padding-inline: 16px;
		margin-top: 12px;
	}

	.mim-product--sticky .mim-product__panel {
		position: relative;
		z-index: 1;
		margin-top: -26px;
		padding: 26px 16px 32px;
		border-radius: 26px 26px 0 0;
		background: #fff;

		/* Reaches past the bottom of the content so the white keeps covering the
		   photo even when the panel is shorter than the screen. */
		min-height: 60vh;
		box-shadow: 0 -12px 30px rgba(37, 51, 78, .1);
	}

	.mim-product:not(.mim-product--sticky) .mim-product__panel {
		padding: 24px 16px 0;
		background: #fff;
	}

	/*
	 * ── The description needs the same white ground the panel has ──
	 *
	 * The photo above is pinned to the top of the window and the panel rides
	 * up over it. That works because the panel is positioned and opaque.
	 *
	 * The description used to be inside the panel and inherited both. It was
	 * moved out to give it the full width of the page, and out here it was a
	 * plain static block with no background -- so a positioned photograph
	 * painted straight over the top of it on the way past. That is the
	 * "image comes over the description" on a phone.
	 *
	 * Same treatment as the panel: positioned, above the photo, and opaque.
	 * No top margin, so the white runs on from the panel without a seam for
	 * the photo to show through.
	 */
	/*
	 * Two classes, not one.
	 *
	 * The base rule for this element lives further down the file and weighs
	 * exactly the same as a single class here, so it was winning on order and
	 * this whole block was inert -- measured at 400px wide, the description
	 * still computed the desktop margin of 40px. Being inside a media query
	 * carries no weight in the cascade.
	 *
	 * That dead 40px is the bug being fixed: a transparent band between the
	 * white panel and the white description, with the pinned photograph
	 * showing through it.
	 */
	.mim-product .mim-product__desc {
		position: relative;
		z-index: 1;
		margin-top: 0;
		padding: 4px 16px 8px;
		background: #fff;
		border-top: 0;
	}

	/*
	 * The ground runs on above the description.
	 *
	 * The photograph is pinned to the top of the window with the panel and the
	 * description riding over it, and that only works while those two are
	 * touching. Any space between them is a window onto the photo — and the
	 * space is not ours to remove: it comes from the widget's own spacing
	 * setting in the page builder, at a weight the stylesheet cannot outrank
	 * without overruling a deliberate choice.
	 *
	 * So instead of requiring the gap to be zero, the white simply continues
	 * upwards past the edge. It runs under the panel, which is also white, so
	 * the overlap is invisible; and it is generous enough to swallow any
	 * spacing a person would plausibly choose.
	 *
	 * Behind the text rather than over it: the description already makes a
	 * stacking context at z-index 1, so -1 here is behind its own content while
	 * still in front of the photograph outside it.
	 */
	.mim-product .mim-product__desc::before {
		content: '';
		position: absolute;
		inset-inline: 0;
		bottom: 100%;
		height: 160px;
		background: #fff;
		z-index: -1;
		pointer-events: none;
	}

	.mim-product__title { font-size: 24px; }
	.mim-product__price { font-size: 24px; }

	.mim-product__add { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.mim-product__price.is-changed { animation: none; }
	.mim-grind-modal__panel { animation: none; }
	.mim-product__add:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════
   Archive
   ═══════════════════════════════════════════════════════════ */

.mim-shop {
	max-width: 1240px;
	margin-inline: auto;
	padding: 32px 24px 48px;
	box-sizing: border-box;
	font-family: var(--mim-font, system-ui, sans-serif);
	color: var(--mim-accent, #25334E);
	text-align: start;
}

.mim-shop * { box-sizing: inherit; }

/* ── Filter bar ── */

.mim-shop__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 28px;
}

.mim-shop__search { flex: 1 1 220px; min-width: 0; }

.mim-shop__field {
	width: 100%;
	padding: 11px 16px;
	border: 1px solid rgba(37, 51, 78, .16);
	border-radius: 12px;
	background: #fff;
	color: inherit;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.mim-shop__field:focus {
	outline: none;
	border-color: var(--mim-accent, #25334E);
}

.mim-shop__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.mim-shop__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
}

.mim-shop__chip {
	--mim-chip-bg: #fff;
	--mim-chip-color: #25334E;
	--mim-chip-bd: rgba(37, 51, 78, .16);

	padding: 10px 16px;
	border: 1px solid var(--mim-chip-bd);
	border-radius: 12px;
	background: var(--mim-chip-bg);
	color: var(--mim-chip-color);
	font: inherit;
	line-height: 1.6;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}

/* Base styling for the selected state. The widget's colour controls override
   these variables; without a default here the chip would look unselected on a
   page where nobody has touched the colours. */
.mim-shop__chip.is-active {
	--mim-chip-bg: var(--mim-accent, #25334E);
	--mim-chip-color: #fff;
	--mim-chip-bd: var(--mim-accent, #25334E);
}

.mim-shop__chip:not(.is-active):hover {
	--mim-chip-bd: var(--mim-accent, #25334E);
}

.mim-shop__sort { display: inline-flex; }

.mim-shop__sort .mim-shop__field {
	width: auto;
	padding-inline-end: 34px;
	/* The arrow is drawn rather than left to the platform, which renders it on
	   the wrong side in an RTL select. */
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(14px) calc(50% - 2px), calc(19px) calc(50% - 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.mim-shop__count {
	margin: 0 0 16px;
	font-size: 13px;
	color: rgba(37, 51, 78, .55);
}

/* ── Grid ── */

.mim-shop__grid {
	--mim-cols: 3;

	display: grid;
	grid-template-columns: repeat(var(--mim-cols), minmax(0, 1fr));
	gap: 28px;
	transition: opacity .2s ease;
}

.mim-shop.is-loading .mim-shop__grid { opacity: .45; }

.mim-shop__empty[hidden] { display: none; }

.mim-shop__empty {
	margin: 40px 0;
	padding: 40px 20px;
	border: 1px dashed rgba(37, 51, 78, .2);
	border-radius: 18px;
	text-align: center;
	color: rgba(37, 51, 78, .6);
}

.mim-shop__more {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.mim-shop__more-btn[hidden] { display: none; }

.mim-shop__more-btn {
	padding: 14px 30px;
	border: 1px solid rgba(37, 51, 78, .2);
	border-radius: 14px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.mim-shop__more-btn:hover {
	background: var(--mim-accent, #25334E);
	border-color: var(--mim-accent, #25334E);
	color: #fff;
}

.mim-shop__pager[hidden] { display: none; }

.mim-shop__pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 28px;
}

.mim-shop__page {
	min-width: 40px;
	padding: 9px 12px;
	border: 1px solid rgba(37, 51, 78, .16);
	border-radius: 12px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.mim-shop__page.is-active {
	background: var(--mim-accent, #25334E);
	border-color: var(--mim-accent, #25334E);
	color: #fff;
}

/* ── Card ── */

.mim-pcard {
	--mim-pcard-btn: 44px;
	--mim-pcard-inset: 14px;
	--mim-pcard-rule: rgba(37, 51, 78, .18);

	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mim-pcard__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: #1B2A6B;
}

.mim-pcard__link {
	display: block;
	width: 100%;
	height: 100%;
}

.mim-pcard__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.mim-pcard:hover .mim-pcard__image { transform: scale(1.04); }

.mim-pcard__image--empty { background: rgba(255, 255, 255, .06); }

/* The two controls sit in opposite top corners, mirrored with the document
   rather than pinned to left and right. */
.mim-pcard__add,
.mim-pcard__wish {
	position: absolute;
	top: var(--mim-pcard-inset);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mim-pcard-btn);
	height: var(--mim-pcard-btn);
	padding: 0;
	border: 0;
	cursor: pointer;
	transition: transform .2s, background-color .2s, color .2s;
}

.mim-pcard__add {
	inset-inline-end: var(--mim-pcard-inset);
	border-radius: 14px;
	background: #6C5CE7;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
}

.mim-pcard .mim-pcard__add:hover {
	color: #fff;
	transform: scale(1.06);
}

.mim-pcard__wish {
	inset-inline-start: var(--mim-pcard-inset);
	background: none;
	color: #fff;
}

.mim-pcard__wish svg {
	width: 26px;
	height: 26px;
}

.mim-pcard__wish.is-active svg { fill: currentColor; }

.mim-pcard__flag {
	position: absolute;
	inset-inline-start: 14px;
	bottom: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 12px;
}

.mim-pcard--out .mim-pcard__image { opacity: .55; }

.mim-pcard__body {
	display: grid;
	gap: 6px;
	padding: 16px 8px 18px;
	border-bottom: 1px solid var(--mim-pcard-rule);
	text-align: center;
}

.mim-pcard__title {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.mim-pcard .mim-pcard__title a {
	color: inherit;
	text-decoration: none;
}

.mim-pcard__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 5px;
	margin: 0;
	direction: ltr;
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* "from" is a Persian word inside an LTR price row, so it needs its own
   direction back or it lands after the number. */
.mim-pcard__from {
	direction: rtl;
	font-size: .7em;
	font-weight: 400;
	opacity: .65;
}

/* ── Small screens ── */

@media (max-width: 767px) {
	.mim-shop__bar { gap: 8px; }

	.mim-shop__tools { margin-inline-start: 0; }

	/* The category row scrolls rather than wrapping into four lines. */
	.mim-shop__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: -14px;
		padding-inline: 14px;
	}

	.mim-shop__chips::-webkit-scrollbar { display: none; }

	/* Fallback only — the widget's own responsive control outranks this. Three
	   columns is a desktop default and would be unusable at this width. */
	.mim-shop__grid { --mim-cols: 2; }

	.mim-pcard {
		--mim-pcard-btn: 36px;
		--mim-pcard-inset: 10px;
	}

	.mim-pcard__add { font-size: 18px; }
	.mim-pcard__wish svg { width: 21px; height: 21px; }

	.mim-pcard__body { padding: 12px 4px 14px; }
	.mim-pcard__title { font-size: 14px; }
	.mim-pcard__price { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.mim-pcard:hover .mim-pcard__image { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   Carousel
   ═══════════════════════════════════════════════════════════ */

.mim-carousel {
	--mim-slide: 280px;

	font-family: var(--mim-font, system-ui, sans-serif);
	color: var(--mim-accent, #25334E);
}

.mim-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 18px;
}

.mim-carousel__heading {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
}

.mim-carousel__tools {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mim-carousel .mim-carousel__all {
	color: inherit;
	font-size: 14px;
	text-decoration: none;
	opacity: .7;
}

.mim-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(37, 51, 78, .16);
	border-radius: 50%;
	background: #fff;
	color: var(--mim-accent, #25334E);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.mim-carousel__arrow:hover {
	background: var(--mim-accent, #25334E);
	color: #fff;
}

/* The browser owns the scrolling: momentum, snapping, keyboard and touch all
   come free, and the arrows only nudge scrollLeft. */
.mim-carousel__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	/* `proximity`, not `mandatory`: a mandatory snap re-snaps mid-animation and
	   cancelled the arrows' programmatic scroll outright. Proximity still lands
	   slides tidily after a flick without fighting a scripted scroll. */
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.mim-carousel__track::-webkit-scrollbar { display: none; }

.mim-carousel__slide {
	flex: 0 0 var(--mim-slide);
	scroll-snap-align: start;
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mim-carousel__track { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════
   Reviews
   ═══════════════════════════════════════════════════════════ */

.mim-reviews {
	max-width: 900px;
	margin-inline: auto;
	font-family: var(--mim-font, system-ui, sans-serif);
	color: var(--mim-accent, #25334E);
	text-align: start;
}

.mim-reviews__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.mim-reviews__heading {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}

.mim-reviews__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.mim-reviews__avg { font-weight: 700; font-variant-numeric: tabular-nums; }
.mim-reviews__count { opacity: .6; }

.mim-stars {
	--mim-star: #E0A83B;

	display: inline-flex;
	gap: 1px;
	direction: ltr;
	font-size: 15px;
	line-height: 1;
	color: rgba(37, 51, 78, .22);
}

.mim-stars__star.is-on { color: var(--mim-star); }

.mim-reviews__empty {
	margin: 0 0 24px;
	padding: 28px 20px;
	border: 1px dashed rgba(37, 51, 78, .2);
	border-radius: 16px;
	text-align: center;
	color: rgba(37, 51, 78, .6);
}

.mim-reviews__list {
	display: grid;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.mim-review {
	padding: 18px;
	border-radius: 18px;
	background: #fff;
}

.mim-review__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.mim-review .mim-review__avatar {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50%;
	object-fit: cover;
}

.mim-review__who {
	display: grid;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
}

.mim-review__who time {
	font-size: 12px;
	opacity: .55;
	font-variant-numeric: tabular-nums;
}

.mim-review__text {
	line-height: 2;
	color: rgba(37, 51, 78, .8);
}

.mim-review__text p { margin: 0 0 .6em; }
.mim-review__text p:last-child { margin-bottom: 0; }

/* WooCommerce prints its own form here; only its shapes are restyled, so the
   nonce, the rating field and the moderation rules stay untouched. */
.mim-reviews__form input[type="text"],
.mim-reviews__form input[type="email"],
.mim-reviews__form textarea {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid rgba(37, 51, 78, .18);
	border-radius: 14px;
	background: #fff;
	color: inherit;
	font: inherit;
	box-sizing: border-box;
}

.mim-reviews__form input[type="submit"] {
	padding: 14px 28px;
	border: 0;
	border-radius: 14px;
	background: var(--mim-accent, #25334E);
	color: #fff;
	font: inherit;
	cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   Shop cart

   Two parts: the lines, and the total. On a laptop they sit side by side
   with the total following the scroll; on a phone the total drops to the
   bottom and the checkout button pins itself above the fold of the
   keyboard, because that is the only thing anyone is looking for by then.
   ═══════════════════════════════════════════════════════════ */

.mim-wcart {
	--mim-wcart-line: rgba(37, 51, 78, .12);
	--mim-wcart-muted: rgba(37, 51, 78, .6);

	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	grid-template-areas: 'head head' 'rows summary';
	gap: 20px 24px;
	max-width: 1120px;
	margin-inline: auto;
	padding: clamp(20px, 4vw, 44px) var(--mim-gutter, 20px) clamp(40px, 6vw, 64px);
	align-items: start;
	box-sizing: border-box;
	font-family: var(--mim-font, system-ui, sans-serif);
	color: var(--mim-accent, #25334E);
	text-align: start;
}

.mim-wcart * { box-sizing: inherit; }

.mim-wcart__heading {
	grid-area: head;
	margin: 0;
	font-size: clamp(22px, 4vw, 30px);
	font-weight: 800;
}

.mim-wcart__form {
	grid-area: rows;
	min-width: 0;
}

/* ── Empty ── */

.mim-wcart__empty {
	grid-area: rows;
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: clamp(40px, 8vw, 72px) 24px;
	background: #fff;
	border: 1px dashed var(--mim-wcart-line);
	border-radius: 22px;
	text-align: center;
}

.mim-wcart__empty strong { font-size: 18px; }

.mim-wcart__empty p {
	max-width: 40ch;
	margin: 0;
	line-height: 1.9;
	color: var(--mim-wcart-muted);
}

/* ── Rows ──

   An explicit grid, not flex-wrap. Every row puts its image, its details,
   its stepper and its price in the same four columns, so the whole list
   reads down a set of alignments instead of re-flowing per row. */

.mim-wcart__rows {
	display: grid;
	gap: 10px;
}

.mim-wrow {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto auto;
	grid-template-areas: 'img info qty price';
	align-items: center;
	gap: 16px;
	position: relative;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--mim-wcart-line);
	border-radius: 18px;
}

.mim-wrow__img {
	grid-area: img;
	width: 76px;
	height: 76px;
	border-radius: 14px;
	object-fit: cover;
}

.mim-wrow__img--empty { background: rgba(37, 51, 78, .07); }

.mim-wrow__info {
	grid-area: info;
	min-width: 0;
}

.mim-wrow__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.mim-wcart .mim-wrow__title a {
	color: inherit;
	text-decoration: none;
}

.mim-wrow__meta {
	margin: 5px 0 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--mim-wcart-muted);
}

.mim-wrow__side {
	grid-area: qty;
	display: contents;
}

.mim-wrow__qty {
	grid-area: qty;
	display: inline-flex;
}

/* WooCommerce prints its own number input; only its shape is restyled. */
.mim-wrow__qty .qty {
	width: 68px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--mim-wcart-line);
	border-radius: 12px;
	font: inherit;
	color: inherit;
	text-align: center;
}

.mim-wrow__price {
	grid-area: price;
	min-width: 90px;
	font-size: 15px;
	font-weight: 800;
	text-align: end;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Pinned to the corner rather than given a column of its own: a delete
   control does not deserve a quarter of the row's width. */
.mim-wcart .mim-wrow__remove {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: rgba(192, 57, 43, .08);
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
	color: #C0392B;
	text-decoration: none;
	opacity: 0;
	transition: opacity .16s ease;
}

.mim-wrow:hover .mim-wrow__remove,
.mim-wrow:focus-within .mim-wrow__remove {
	opacity: 1;
}

/* Nothing reveals itself on hover on a touch screen, so there it is
   simply always visible. */
@media (hover: none) {
	.mim-wcart .mim-wrow__remove { opacity: 1; }
}

/* ── Coupon and update ── */

.mim-wcart__foot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	margin-top: 14px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--mim-wcart-line);
	border-radius: 18px;
}

.mim-wcart__coupon {
	display: flex;
	gap: 8px;
	min-width: 0;
}

.mim-wcart__code {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 15px;
	background: rgba(37, 51, 78, .04);
	border: 1px solid var(--mim-wcart-line);
	border-radius: 12px;
	font: inherit;
	color: inherit;
}

.mim-wcart__code:focus {
	outline: none;
	border-color: var(--mim-accent, #25334E);
}

.mim-wcart__apply,
.mim-wcart__update {
	flex: 0 0 auto;
	padding: 11px 18px;
	background: transparent;
	border: 1px solid var(--mim-wcart-line);
	border-radius: 12px;
	font: inherit;
	font-weight: 600;
	color: inherit;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .16s, background-color .16s;
}

.mim-wcart__apply:hover,
.mim-wcart__update:hover {
	border-color: var(--mim-accent, #25334E);
	background: rgba(37, 51, 78, .04);
}

/* Disabled until something changes — WooCommerce toggles it. */
.mim-wcart__update[disabled] {
	opacity: .45;
	cursor: default;
}

/* ── Summary ── */

.mim-wcart__summary {
	grid-area: summary;
	position: sticky;
	top: 20px;
	display: grid;
	gap: 11px;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--mim-wcart-line);
	border-radius: 22px;
}

.mim-wcart__summary h2 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 800;
}

.mim-wcart__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--mim-wcart-muted);
}

.mim-wcart__line--coupon { color: #24734a; }

.mim-wcart__line--total {
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--mim-wcart-line);
	font-size: 19px;
	font-weight: 800;
	color: var(--mim-accent, #25334E);
}

.mim-wcart .mim-wcart__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 6px;
	padding: 15px 24px;
	background: var(--mim-accent, #25334E);
	border-radius: 14px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: transform .15s ease;
}

.mim-wcart .mim-wcart__cta:hover {
	transform: translateY(-2px);
	color: #fff;
}

/* ── Tablet ── */

@media (max-width: 900px) {
	.mim-wcart {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'head' 'rows' 'summary';
	}

	.mim-wcart__summary {
		position: static;
	}
}

/* ── Phone ──

   The row becomes two columns and three rows: the picture keeps its place
   on the left, the name runs full width beside it, and the stepper and the
   price share the line underneath. Nothing wraps unpredictably because
   nothing is left to wrap. */

@media (max-width: 560px) {
	.mim-wrow {
		grid-template-columns: 64px minmax(0, 1fr);
		grid-template-areas:
			'img info'
			'img qty'
			'price price';
		gap: 6px 14px;
		align-items: start;
		padding: 14px;
	}

	.mim-wrow__img {
		grid-row: 1 / 3;
		width: 64px;
		height: 64px;
	}

	.mim-wrow__qty {
		align-self: center;
	}

	.mim-wrow__qty .qty {
		width: 74px;
		/* 16px keeps iOS from zooming the page when the field is focused. */
		font-size: 16px;
	}

	.mim-wrow__price {
		margin-top: 6px;
		padding-top: 10px;
		border-top: 1px dashed var(--mim-wcart-line);
		text-align: start;
	}

	.mim-wcart__foot {
		grid-template-columns: minmax(0, 1fr);
	}

	.mim-wcart__coupon {
		flex-wrap: wrap;
	}

	.mim-wcart__code {
		flex: 1 1 100%;
		font-size: 16px;
	}

	.mim-wcart__apply,
	.mim-wcart__update {
		flex: 1 1 auto;
		width: 100%;
	}

	.mim-wcart__summary {
		padding: 18px;
	}

	.mim-wcart .mim-wcart__cta {
		padding: 16px;
		font-size: 16px;
	}
}

/* ═══════════════════════════════════════════════════════════
   Archive sidebar
   ═══════════════════════════════════════════════════════════ */

.mim-shop { --mim-aside-w: 250px; }

.mim-shop__layout { display: block; }

.mim-shop--aside .mim-shop__layout {
	display: grid;
	/* Two named tracks rather than two implicit ones: the script inserts a
	   placeholder before the sidebar, and with implicit columns that spacer
	   would claim a column of its own and push the grid sideways. */
	grid-template-columns: var(--mim-aside-w) minmax(0, 1fr);
	grid-template-areas: "aside main";
	gap: 32px;
	align-items: start;
}

.mim-shop--aside .mim-shop__aside { grid-area: aside; }
.mim-shop--aside .mim-shop__main { grid-area: main; }

.mim-shop--aside [data-mim-aside-holder] { grid-area: aside; }

/* The aside is first in the DOM so the filters are reachable before the grid;
   this moves it visually without changing that order. */
.mim-shop--aside-end .mim-shop__layout {
	grid-template-columns: minmax(0, 1fr) var(--mim-aside-w);
	grid-template-areas: "main aside";
}

.mim-shop__main { min-width: 0; }

.mim-shop__aside {
	display: grid;
	gap: 22px;
	min-width: 0;
}

/*
 * ── How the sidebar travels ──
 *
 * It scrolls with the page. No scrollbar of its own: a box inside the page that
 * scrolls separately means two things move under one gesture, and which one
 * moves depends on where the pointer happens to be. That was the first attempt
 * and it was worse than the problem.
 *
 * Short sidebar: pinned near the top, the ordinary sticky behaviour.
 *
 * Sidebar taller than the screen: it rides up with the page like any other
 * column until its last filter comes into view, and from there it stays -- the
 * `is-tall` rule below anchors the bottom instead of the top. So everything in
 * it is reachable on the way down, and once you have seen all of it, it follows
 * you rather than scrolling away.
 *
 * Which of the two applies is a question about the height of the window, and
 * CSS cannot ask it, so the script measures and sets `is-tall`. Until the
 * script runs, the plain top-sticky rule holds, which is the safe half.
 */
.mim-shop__aside--sticky {
	position: sticky;
	top: var(--mim-aside-top, 20px);
}

/*
 * Taller than the window: hold it by a negative top offset.
 *
 * The obvious spelling of "anchor the bottom" is `bottom: 20px`, and it does
 * nothing here. Once an element is taller than the sticky rectangle, browsers
 * honour only the top constraint and ignore the bottom one -- measured on a
 * 1422px sidebar in a 720px window, the anchor held at 0 of 82 scroll
 * positions and the bottom edge passed straight through the line.
 *
 * A negative top is the offset that works, and it is the same request written
 * from the other end: put the top wherever it has to be for the bottom to come
 * to rest on the gap, i.e. window height minus sidebar height minus the gap.
 * That is a number only the script can know, so it sets the property and this
 * rule spends it.
 *
 * The fallback of 20px is deliberate: if the script never runs, the sidebar
 * behaves like an ordinary top-sticky column, which is imperfect but never
 * broken.
 */
.mim-shop__aside--sticky.is-tall {
	top: var(--mim-aside-stick-top, 20px);
	bottom: auto;
}

/* The script only adds this when it found sticky dead — see initStickyAside. */
.mim-shop__aside--js { position: static; }

.mim-shop__aside--js.is-pinned {
	position: fixed;
	z-index: 5;
}

[data-mim-aside-holder] { grid-column: 1; }

.mim-shop__group { display: grid; gap: 10px; }

.mim-shop__aside-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--mim-accent, #25334E);
}

.mim-shop__stack {
	display: grid;
	gap: 6px;
}

/* In the sidebar a chip is a full-width row with its count pushed to the far
   edge, rather than the pill it is in the top bar. */
.mim-shop__stack .mim-shop__chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	text-align: start;
	white-space: normal;
}

.mim-shop__n {
	flex: 0 0 auto;
	font-size: 12px;
	opacity: .55;
	font-variant-numeric: tabular-nums;
}

.mim-shop__reset {
	padding: 10px 14px;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--mim-accent, #25334E);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	justify-self: start;
}

@media (max-width: 900px) {
	.mim-shop--aside .mim-shop__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.mim-shop--aside-end .mim-shop__layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "aside" "main";
	}

	.mim-shop--aside .mim-shop__layout {
		grid-template-areas: "aside" "main";
	}

	.mim-shop__aside,
	.mim-shop__aside--sticky,
	.mim-shop__aside--sticky.is-tall,
	.mim-shop__aside--js.is-pinned {
		position: static;
		width: auto;
		gap: 16px;

		/* One column here, so no anchor means anything. */
		top: auto;
		bottom: auto;
	}

	[data-mim-aside-holder] { display: none; }

	/* A column of full-width rows is a wall on a phone. One swipe per group
	   keeps every filter reachable without the page growing a screen taller. */
	.mim-shop__stack {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: -14px;
		padding-inline: 14px;
		scroll-snap-type: x proximity;

		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
	}

	[dir="rtl"] .mim-shop__stack {
		-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent 100%);
		mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent 100%);
	}

	.mim-shop__stack.is-end {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.mim-shop__stack::-webkit-scrollbar { display: none; }

	.mim-shop__stack .mim-shop__chip {
		flex: 0 0 auto;
		width: auto;
		white-space: nowrap;
		scroll-snap-align: start;
	}
}

/* ═══════════════════════════════════════════════════════════
   Product description
   ═══════════════════════════════════════════════════════════ */

.mim-product__desc {
	/*
	 * The description spans both columns.
	 *
	 * Without this it is simply the third item in a two-column grid, so it
	 * gets placed automatically into row 2, column 1 -- the narrow column,
	 * directly under the photograph. Two things went wrong there at once:
	 * the prose got the narrowest measure on the page, and the photograph,
	 * which is sticky, stayed pinned over the top of it on the way down.
	 *
	 * Spanning the full width puts it below both columns, which is where a
	 * description belongs, and it ends the sticky run at the bottom of row
	 * 1: a sticky grid item is held inside its own grid area, and that area
	 * no longer reaches down here.
	 */
	grid-column: 1 / -1;

	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid rgba(37, 51, 78, .12);
}

.mim-product__desc-title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
}

.mim-product__desc-body {
	line-height: 2.1;
	color: rgba(37, 51, 78, .78);
}

.mim-product__desc-body p { margin: 0 0 .9em; }
.mim-product__desc-body p:last-child { margin-bottom: 0; }

.mim-product__desc-body img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

/* ═══════════════════════════════════════════════════════════
   Special offer
   ═══════════════════════════════════════════════════════════ */

.mim-offer {
	position: relative;
	display: grid;
	gap: 18px;
	padding: 24px;
	border-radius: 24px;
	background: var(--mim-accent, #25334E);
	color: #fff;
	font-family: var(--mim-font, system-ui, sans-serif);
	text-align: start;
}

.mim-offer__badge {
	position: absolute;
	top: 0;
	inset-inline-end: 24px;
	transform: translateY(-50%);
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--mim-surface, #BAAF91);
	color: var(--mim-accent, #25334E);
	font-size: 12px;
	font-weight: 700;
}

.mim-offer__head { display: grid; gap: 4px; }

.mim-offer__heading {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}

.mim-offer__sub {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
}

.mim-offer__pair {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mim-offer__item {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 12px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .08);
}

.mim-offer__thumb {
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	border-radius: 14px;
	object-fit: cover;
}

.mim-offer__thumb--empty { background: rgba(255, 255, 255, .12); }

.mim-offer__text {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.mim-offer__name {
	font-weight: 600;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.mim-offer__each {
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .75);
}

.mim-offer__plus {
	flex: 0 0 auto;
	font-size: 22px;
	font-weight: 700;
	opacity: .6;
}

.mim-offer__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
}

.mim-offer__total {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
}

.mim-offer__sum,
.mim-offer__special {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: 24px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.mim-offer__special { color: var(--mim-surface, #BAAF91); }

/* The old total stays visible and struck through: the saving is the argument,
   and it only lands if both numbers are on screen. */
.mim-offer__old {
	font-size: 16px;
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .5);
}

.mim-offer__cur { font-size: .62em; font-weight: 400; }

.mim-offer__add {
	padding: 14px 26px;
	border: 0;
	border-radius: 14px;
	background: var(--mim-surface, #BAAF91);
	color: var(--mim-accent, #25334E);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: transform .2s, filter .2s;
}

.mim-offer__add:hover { transform: translateY(-2px); filter: brightness(1.05); }

@media (max-width: 640px) {
	.mim-offer__pair {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.mim-offer__plus { align-self: center; }

	.mim-offer__thumb { width: 62px; height: 62px; }

	.mim-offer__foot { justify-content: center; }

	.mim-offer__add { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.mim-offer__add:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   Theme armour
   ═══════════════════════════════════════════════════════════

   Themes and Elementor's global kit both style bare `button` and `a` elements,
   and several do it at a specificity that beat the single-class rules above —
   which is why the shop's buttons kept inheriting the theme's look and the
   widget's own colour controls appeared to do nothing.

   Each rule below repeats a property the base rule already set, at one class
   more specificity. That is enough to outrank a theme, and still well under
   Elementor's `.elementor-element-xxxx .mim-foo`, so every control in the
   widget panel keeps winning. Only properties themes actually hijack are
   listed — geometry that a control owns is left alone. */

.mim-shop .mim-shop__chip.mim-shop__chip,
.mim-shop .mim-shop__reset.mim-shop__reset,
.mim-shop .mim-shop__field.mim-shop__field,
.mim-product .mim-opt.mim-opt,
.mim-product .mim-product__help.mim-product__help,
.mim-product .mim-product__add.mim-product__add,
.mim-pcard .mim-pcard__add.mim-pcard__add,
.mim-pcard .mim-pcard__wish.mim-pcard__wish,
.mim-offer .mim-offer__add.mim-offer__add,
.mim-cartpage .mim-carttabs__tab.mim-carttabs__tab,
.mim-cartbadge .mim-cartbadge__act.mim-cartbadge__act,
.mim-wcart .mim-wcart__cta.mim-wcart__cta {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	min-height: 0;
	width: auto;
	max-width: none;
	outline: none;
}

.mim-shop .mim-shop__chip.mim-shop__chip {
	background: var(--mim-chip-bg);
	color: var(--mim-chip-color);
	border: 1px solid var(--mim-chip-bd);
}

.mim-shop .mim-shop__stack .mim-shop__chip.mim-shop__chip { width: 100%; }

.mim-shop .mim-shop__reset.mim-shop__reset {
	background: none;
	border: 0;
	text-decoration: underline;
}

.mim-shop .mim-shop__field.mim-shop__field {
	width: 100%;
	background: #fff;
	color: inherit;
	border: 1px solid rgba(37, 51, 78, .16);
}

.mim-product .mim-opt.mim-opt {
	background: var(--mim-opt-bg);
	color: var(--mim-opt-color);
	border: 1px solid var(--mim-opt-bd);
}

.mim-product .mim-product__help.mim-product__help {
	background: none;
	color: inherit;
	border: 1px solid currentColor;
}

.mim-product .mim-product__help.mim-product__help:hover {
	background: var(--mim-accent, #25334E);
	border-color: var(--mim-accent, #25334E);
	color: #fff;
}

.mim-pcard .mim-pcard__add.mim-pcard__add,
.mim-pcard .mim-pcard__wish.mim-pcard__wish {
	border: 0;
	width: var(--mim-pcard-btn, 40px);
	height: var(--mim-pcard-btn, 40px);
}

/* ── Feedback after an add ── */

.mim-pcard__add.is-busy,
.mim-product__add.is-busy,
.mim-offer__add.is-busy {
	opacity: .6;
	pointer-events: none;
}

.mim-pcard__add.is-added,
.mim-product__add.is-added {
	background: #4CAF7D;
	color: #fff;
}

.mim-pcard__add.is-failed,
.mim-product__add.is-failed {
	background: #D9534F;
	color: #fff;
}

/* The plus is a fixed square; a word of feedback has to be readable in it
   without stretching the card. */
.mim-pcard__add.is-added,
.mim-pcard__add.is-failed {
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	padding: 2px;
	text-align: center;
}

/* ═══════════════════════════════════════════════════
   The rating row keeps its place
   ═══════════════════════════════════════════════════

   A product nobody has rated draws no stars at all — deliberately, because an
   empty outline reads as "rated zero" rather than "not yet rated". The side
   effect is that a card with a rating is taller than a card without one, so a
   grid of mostly-unrated products comes out ragged.

   Stars are now off on the grid by default, which removes the problem. This is
   here so that switching them back on does not bring it back: the slot is
   reserved whether or not anything is drawn in it, and every card in the row is
   the same height either way.
*/
.mim-pcard__body .mim-rate-out {
	display: inline-flex;
	min-height: 18px;
	align-items: center;
}

.mim-pcard--rateslot .mim-pcard__title + * {
	margin-block-start: 0;
}

/* ═══════════════════════════════════════════════════════════
   Clearing the filters

   A capsule in the bottom corner rather than a button at the foot of the
   sidebar. It is wanted at one moment — when somebody has narrowed too far and
   is looking at an empty grid — and at that moment the sidebar is the last
   place they are looking, or on a phone is a drawer they have already closed.

   Absent until there is something to clear, so it costs nothing the rest of the
   time.
   ═══════════════════════════════════════════════════════════ */

.mim-shop__clearpill {
	position: fixed;
	/* Physically left, in a right-to-left page: the near corner is where the
	   thumb already is on a phone, and on a desktop it is the corner the grid
	   is not using. */
	left: 18px;
	bottom: 18px;
	z-index: 60;

	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;

	background: var(--mim-shop-accent, #25334E);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 28px -10px rgba(20, 27, 41, .55);

	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: #FFF;
	white-space: nowrap;
	cursor: pointer;

	/* Where it comes from. The class lands a frame later, so this is the
	   starting state and `.is-in` is the resting one. */
	opacity: 0;
	transform: translateY(14px) scale(.94);
	transition:
		opacity .22s ease,
		transform .26s cubic-bezier(.2, .9, .3, 1);
}

.mim-shop__clearpill[hidden] {
	display: none;
}

.mim-shop__clearpill.is-in {
	opacity: 1;
	transform: none;
}

.mim-shop__clearpill:hover {
	filter: brightness(1.08);
}

.mim-shop__clearpill:active {
	transform: scale(.97);
}

.mim-shop__clearpill:focus-visible {
	outline: 2px solid #FFF;
	outline-offset: 2px;
}

/* The × reads as "remove these", which is what the button does — it is not a
   close button for the capsule itself. */
.mim-shop__clearpill-x {
	font-size: 16px;
	line-height: 1;
	opacity: .85;
}

/* How many are on. Without it the capsule says "clear filters" whether one
   thing or six is narrowing the list, and six is when people lose track. */
.mim-shop__clearpill-n {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: rgba(255, 255, 255, .22);
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
}

@media (max-width: 560px) {
	.mim-shop__clearpill {
		left: 12px;
		/* Above the order bar, which is fixed to the same edge on a phone. */
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		padding: 10px 14px;
		font-size: 13px;
	}
}

/* A page with a fixed order bar of its own gets out of its way. */
body:has(.mim-orderbar--fixed) .mim-shop__clearpill {
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
	.mim-shop__clearpill {
		transition: opacity .01s;
		transform: none;
	}

	.mim-shop__clearpill.is-in {
		transform: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   Holding the capsule against the page builder

   It is a <button>, and this site's builder styles every button on the page —
   its own padding, its own corner radius, its own colours, its own font. The
   capsule came out looking like a form submit.

   This is the third time that has happened here, so the lesson from the rank
   chip is applied once rather than one property at a time: everything that
   decides how it looks is stated, not inherited.

   Two classes deep to outrank `.elementor-kit-N button`; no further, so a
   designer who wants to restyle it from the panel still can.
   ═══════════════════════════════════════════════════════════ */

.mim-shop .mim-shop__clearpill,
.mim-shop button.mim-shop__clearpill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 11px 16px;

	background-color: var(--mim-shop-accent, #25334E);
	background-image: none;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 28px -10px rgba(20, 27, 41, .55);

	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	color: #FFF;

	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* Hover must not undo any of it — a kit's `button:hover` sets its own
   background and would repaint the capsule the moment a pointer touched it. */
.mim-shop .mim-shop__clearpill:hover,
.mim-shop .mim-shop__clearpill:focus,
.mim-shop .mim-shop__clearpill:active {
	background-color: var(--mim-shop-accent, #25334E);
	background-image: none;
	color: #FFF;
	text-decoration: none;
}

.mim-shop .mim-shop__clearpill:hover {
	filter: brightness(1.08);
}

.mim-shop .mim-shop__clearpill-n {
	background: rgba(255, 255, 255, .22);
	color: #FFF;
}

/* ═══════════════════════════════════════════════════════════
   Holding the shop cart against the page builder

   Every control in here already had a colour of sorts: `color: inherit`. That
   looks like a decision and is not one. It is still a declaration on the
   element, at specificity (0,1,0), and the kit's `.elementor-kit-N button` is
   (0,2,0) — so the kit wins and the lettering turns pink. `inherit` only wins
   where nothing else is competing, which is not this page.

   So each one says its colour, two classes deep, which outranks the kit
   without being so specific that a designer can no longer restyle it.

   The photograph is here for the same reason as the rows in the menu cart: the
   corner has to be stated where the kit cannot reach it.
   ══════════════════════════════════════════════════════════ */

.mim-wcart .mim-wrow__img,
.mim-wcart img.mim-wrow__img {
	border-radius: 16px;
	object-fit: cover;
}

/* The product name. A link, so the kit styles it twice over — once as `a`,
   once again on hover and on visited. */
.mim-wcart .mim-wrow__title a,
.mim-wcart .mim-wrow__title a:visited {
	color: var(--mim-accent, #25334E);
	text-decoration: none;
}

.mim-wcart .mim-wrow__title a:hover,
.mim-wcart .mim-wrow__title a:focus {
	color: var(--mim-accent, #25334E);
	text-decoration: underline;
}

/* Apply-coupon and update-cart: outline buttons, ink lettering. */
.mim-wcart button.mim-wcart__apply,
.mim-wcart button.mim-wcart__update {
	background-color: transparent;
	background-image: none;
	border: 1px solid var(--mim-wcart-line);
	border-radius: 12px;
	box-shadow: none;

	font-family: inherit;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: var(--mim-accent, #25334E);

	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.mim-wcart button.mim-wcart__apply:hover,
.mim-wcart button.mim-wcart__apply:focus,
.mim-wcart button.mim-wcart__update:hover,
.mim-wcart button.mim-wcart__update:focus {
	background-color: rgba(37, 51, 78, .05);
	background-image: none;
	color: var(--mim-accent, #25334E);
	text-decoration: none;
}

/* The coupon field and the quantity box. Kits style inputs too, and a pink
   caret in a coupon field is the same bug wearing a different hat. */
.mim-wcart input.mim-wcart__code,
.mim-wcart .mim-wrow__qty input {
	background-color: rgba(37, 51, 78, .04);
	border: 1px solid var(--mim-wcart-line);
	border-radius: 12px;
	font-family: inherit;
	color: var(--mim-accent, #25334E);
	-webkit-appearance: none;
	appearance: none;
}

/* WooCommerce renders the quantity box itself, so it arrives with its own
   class and none of ours. */
.mim-wcart .mim-wrow__qty .qty {
	width: 62px;
	padding: 8px 6px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--mim-accent, #25334E);
}

/* Remove. It is an <a>, so `button` rules miss it and `a` rules catch it. */
.mim-wcart a.mim-wrow__remove,
.mim-wcart a.mim-wrow__remove:visited {
	color: #C0392B;
	text-decoration: none;
}

.mim-wcart a.mim-wrow__remove:hover,
.mim-wcart a.mim-wrow__remove:focus {
	background-color: rgba(192, 57, 43, .16);
	color: #C0392B;
	text-decoration: none;
}