/*
 * Mim-Cafe — front-end styles
 *
 * Everything here is a default, not a decision: no `!important`, low
 * specificity, and every visual value routed through a custom property so
 * Elementor controls and hand-written CSS both override cleanly.
 */

/* ═══════════════════════════════════════════════════════════
   Base
   ═══════════════════════════════════════════════════════════ */

.mim-grid,
.mim-cats,
.mim-card,
.mim-orderbar,
.mim-drawer {
	font-family: var(--mim-font, system-ui, sans-serif);
	box-sizing: border-box;
}

.mim-grid *,
.mim-cats *,
.mim-orderbar *,
.mim-drawer * {
	box-sizing: inherit;
}

/* Latin text and digits render in Space Grotesk via the combined font family's
   unicode-range split, so numbers need no extra markup. */
.mim-price__value,
.mim-price__currency {
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

/* A price is a Latin-formatted number: "230,000 T" must read left to right
   with the currency last, even inside an RTL page. Without this the flex row
   reverses and the T lands in front of the digits. */
.mim-card__price,
.mim-item-price,
.mim-orderbar__total,
.mim-drawer__item-price,
.mim-drawer__total {
	direction: ltr;
}

/* Latin currency marks ("T") follow the Latin face explicitly, so they still
   match the digits when a designer picks a Persian-only family. */
.mim-price__currency {
	font-family: var(--mim-font-latin, inherit);
}

/* ── Isolation from the theme and the Elementor kit ─────────
   Elementor's global kit styles `button`, `a.elementor-button` and friends,
   and themes style `button` broadly. Every control in this plugin writes to
   these same properties, so anything not explicitly reset here would be
   fighting a rule the designer never set. Written at the same low specificity
   the widgets use, so Elementor's generated CSS still wins. */

.mim-card button,
.mim-orderbar button,
.mim-drawer button,
.mim-cats button,
.mim-checkout button,
.mim-loadmore {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: none;
	text-decoration: none;
	line-height: normal;
}

.mim-card a,
.mim-orderbar a,
.mim-drawer a,
.mim-cats a {
	box-shadow: none;
	text-decoration: none;
}

.mim-card img,
.mim-orderbar img,
.mim-drawer img {
	max-width: 100%;
	height: auto;
	box-shadow: none;
}

.mim-empty {
	padding: 32px 16px;
	text-align: center;
	opacity: .7;
}

.mim-editor-notice {
	padding: 18px;
	border: 1px dashed rgba(127, 127, 127, .5);
	border-radius: 10px;
	text-align: center;
	font-size: 13px;
	opacity: .8;
}

/* ═══════════════════════════════════════════════════════════
   Grid
   ═══════════════════════════════════════════════════════════ */

.mim-grid {
	display: grid;
	grid-template-columns: repeat(var(--mim-columns, 1), minmax(0, 1fr));
	gap: var(--mim-gap, 20px);
	align-items: start;
}

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

.mim-grid.is-loading {
	opacity: .45;
	pointer-events: none;
	transition: opacity .2s;
}

.mim-loadmore-wrap {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.mim-loadmore {
	padding: 12px 28px;
	border: 0;
	border-radius: 14px;
	background: var(--mim-accent, #25334E);
	color: var(--mim-on-accent, #fff);
	font: inherit;
	cursor: pointer;
	transition: opacity .2s, transform .2s;
}

.mim-loadmore:hover { transform: translateY(-1px); }
.mim-loadmore[disabled] { opacity: .5; cursor: default; transform: none; }

/* ═══════════════════════════════════════════════════════════
   Card
   ═══════════════════════════════════════════════════════════ */

.mim-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mim-card-surface, #BAAF91);
	border-radius: var(--mim-radius, 18px);
	transition-property: transform, box-shadow, background-color, border-color;
	transition-duration: .3s;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* ── Media ── */

.mim-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: transparent;
}

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

/* With item pages off the card is not interactive: no pointer cursor and no
   text selection drag when someone taps the photo. */
.mim-card:not(:has(a)) .mim-card__media,
.mim-card:not(:has(a)) .mim-card__title {
	cursor: default;
}

.mim-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .3s;
}

.mim-card__image--placeholder {
	background: linear-gradient(135deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .12));
}

.mim-hover-fade .mim-card:hover .mim-card__image { opacity: .82; }

/* ── Body ── */

.mim-card__body {
	flex: 1;
	position: relative;
	padding: 18px 16px 20px;
	background: var(--mim-accent, #25334E);
	color: var(--mim-on-accent, #fff);
	text-align: center;
}

.mim-card__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	color: inherit;
}

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

.mim-card__subtitle {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.6;
	opacity: .85;
}

.mim-card__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	margin: 8px 0 0;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
}

.mim-card__price .mim-price__currency {
	font-size: .72em;
	opacity: .9;
}

/* Divider under the card — used by the shop layout. */
.mim-card--has-divider .mim-card__body::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: var(--mim-accent, #25334E);
	opacity: .35;
}

/* ── Style variants ── */

/* Shop: photo sits on a solid tile, caption below on the page surface. */
.mim-card--shop {
	background: transparent;
	overflow: visible;
}

.mim-card--shop .mim-card__media {
	background: var(--mim-accent, #25334E);
	border-radius: var(--mim-radius, 18px);
	overflow: hidden;
}

.mim-card--shop .mim-card__body {
	background: transparent;
	color: inherit;
	padding: 14px 4px 18px;
}

.mim-card--shop .mim-card__title { font-size: 17px; font-weight: 600; }
.mim-card--shop .mim-card__price { font-size: 20px; margin-top: 6px; }

/* Minimal: no colour block at all. */
.mim-card--minimal {
	background: transparent;
}

.mim-card--minimal .mim-card__body {
	background: transparent;
	color: inherit;
	padding: 12px 2px 0;
	text-align: start;
}

/* ── Floating buttons ── */

.mim-add-btn {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: var(--mim-accent, #25334E);
	color: var(--mim-on-accent, #fff);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: transform .2s, background-color .2s, color .2s, opacity .2s;
}

/* Sized in em so one control (font-size) scales it, and centred by the
   button's flexbox rather than by a baseline nudge. */
.mim-add-btn__glyph {
	display: block;
	width: 1em;
	height: 1em;
	font-size: 24px;
	flex: 0 0 auto;
}

.mim-add-btn[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

/* The optional plate behind the button. `::before` keeps it a single element
   so positioning controls only ever have to move one thing. */
.mim-add-has-plate .mim-add-btn::before {
	content: "";
	position: absolute;
	inset: -6px;
	z-index: -1;
	border-radius: 18px;
	background: rgba(255, 255, 255, .85);
}

.mim-add-has-plate .mim-add-btn {
	isolation: isolate;
}

/* ── Click feedback ── */

.mim-add-anim-pop   .mim-add-btn.is-added { animation: mim-add-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
.mim-add-anim-spin  .mim-add-btn.is-added { animation: mim-add-spin .45s ease-in-out; }
.mim-add-anim-shake .mim-add-btn.is-added { animation: mim-add-shake .4s ease-in-out; }

.mim-add-anim-tick .mim-add-btn.is-added .mim-add-btn__glyph {
	animation: mim-add-tick .5s ease forwards;
}

@keyframes mim-add-pop   { 0% { transform: scale(1); } 45% { transform: scale(.84); } 100% { transform: scale(1); } }
@keyframes mim-add-spin  { to { transform: rotate(180deg); } }
@keyframes mim-add-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes mim-add-tick  { 0% { transform: rotate(0) scale(1); } 100% { transform: rotate(45deg) scale(1.1); } }

/* ── Entrance ── */

.mim-add-in-fade       .mim-add-btn,
.mim-add-in-pop        .mim-add-btn,
.mim-add-in-slide-down .mim-add-btn,
.mim-add-in-slide-up   .mim-add-btn {
	animation-duration: .5s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(.34, 1.3, .64, 1);
}

.mim-add-in-fade       .mim-add-btn { animation-name: mim-badge-fade; }
.mim-add-in-pop        .mim-add-btn { animation-name: mim-add-in-pop; }
.mim-add-in-slide-down .mim-add-btn { animation-name: mim-add-in-down; }
.mim-add-in-slide-up   .mim-add-btn { animation-name: mim-add-in-up; }

@keyframes mim-add-in-pop  { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes mim-add-in-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mim-add-in-up   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Physical sides. The reference design keeps "+" at top-left and the heart at
   top-right on an RTL page, so logical properties would flip them wrongly. */
.mim-add-pos-top-left     .mim-add-btn { top: var(--mim-add-offset-y, 14px);    left:  var(--mim-add-offset-x, 14px); }
.mim-add-pos-top-right    .mim-add-btn { top: var(--mim-add-offset-y, 14px);    right: var(--mim-add-offset-x, 14px); }
.mim-add-pos-bottom-left  .mim-add-btn { bottom: var(--mim-add-offset-y, 14px); left:  var(--mim-add-offset-x, 14px); }
.mim-add-pos-bottom-right .mim-add-btn { bottom: var(--mim-add-offset-y, 14px); right: var(--mim-add-offset-x, 14px); }

/* The standalone widget version flows inline instead of floating. */
.mim-add-wrap {
	display: flex;
	justify-content: center;
}

.mim-add-wrap .mim-add-btn {
	position: static;
	width: auto;
	height: auto;
	padding: 12px;
}

.mim-add-wrap .mim-add-btn--icon_text,
.mim-add-wrap .mim-add-btn--text {
	min-width: 0;
}

.mim-wish-btn {
	position: absolute;
	z-index: 2;
	top: var(--mim-add-offset-y, 14px);
	right: var(--mim-add-offset-x, 14px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: transform .2s, color .2s;
}

.mim-wish-btn:hover { transform: scale(1.12); }
.mim-wish-btn__glyph { width: 100%; height: 100%; }
.mim-wish-btn.is-active .mim-wish-btn__glyph path { fill: currentColor; }

/* The heart moves out of the way when "+" already occupies the right side. */
.mim-add-pos-top-right .mim-wish-btn { right: auto; left: var(--mim-add-offset-x, 14px); }

/* ── Badge ──────────────────────────────────────────────── */

.mim-card__badge {
	position: absolute;
	z-index: 3;
	padding: 5px 12px;
	border-radius: 99px;
	background: #E4572E;
	color: #fff;
	font-size: 13px;
	line-height: 1.6;
	white-space: nowrap;
	transform: rotate(var(--mim-badge-rotate, 0deg));
	transform-origin: center;
}

.mim-badge-pos-top-right    .mim-card__badge { top: var(--mim-badge-y, 14px);    right: var(--mim-badge-x, 14px); }
.mim-badge-pos-top-left     .mim-card__badge { top: var(--mim-badge-y, 14px);    left:  var(--mim-badge-x, 14px); }
.mim-badge-pos-bottom-right .mim-card__badge { bottom: var(--mim-badge-y, 14px); right: var(--mim-badge-x, 14px); }
.mim-badge-pos-bottom-left  .mim-card__badge { bottom: var(--mim-badge-y, 14px); left:  var(--mim-badge-x, 14px); }

.mim-badge-pos-top-center .mim-card__badge {
	top: var(--mim-badge-y, 14px);
	left: 50%;
	transform: translateX(-50%) rotate(var(--mim-badge-rotate, 0deg));
}

/* Inside the body the badge is part of the flow, not an overlay. */
.mim-card__badge--inline {
	position: static;
	display: inline-block;
	margin-bottom: 8px;
}

/* Entrance animations. Each sets its own keyframes but shares the duration and
   delay custom properties so the controls stay uniform. */
.mim-badge-anim-fade       .mim-card__badge,
.mim-badge-anim-pop        .mim-card__badge,
.mim-badge-anim-slide-down .mim-card__badge,
.mim-badge-anim-slide-up   .mim-card__badge,
.mim-badge-anim-slide-in   .mim-card__badge,
.mim-badge-anim-flip       .mim-card__badge {
	animation-duration: var(--mim-badge-duration, .6s);
	animation-delay: var(--mim-badge-delay, 0s);
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(.34, 1.3, .64, 1);
}

.mim-badge-anim-fade       .mim-card__badge { animation-name: mim-badge-fade; }
.mim-badge-anim-pop        .mim-card__badge { animation-name: mim-badge-pop; }
.mim-badge-anim-slide-down .mim-card__badge { animation-name: mim-badge-down; }
.mim-badge-anim-slide-up   .mim-card__badge { animation-name: mim-badge-up; }
.mim-badge-anim-slide-in   .mim-card__badge { animation-name: mim-badge-in; }
.mim-badge-anim-flip       .mim-card__badge { animation-name: mim-badge-flip; }

.mim-badge-anim-pulse .mim-card__badge {
	animation: mim-badge-pulse var(--mim-badge-duration, 1.6s) ease-in-out infinite;
	animation-delay: var(--mim-badge-delay, 0s);
}

.mim-badge-anim-shine .mim-card__badge {
	position: relative;
	overflow: hidden;
}

.mim-badge-anim-shine .mim-card__badge::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
	transform: translateX(-120%);
	animation: mim-badge-shine var(--mim-badge-duration, 2.4s) ease-in-out infinite;
	animation-delay: var(--mim-badge-delay, 0s);
}

@keyframes mim-badge-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mim-badge-pop  { from { opacity: 0; transform: scale(.4) rotate(var(--mim-badge-rotate, 0deg)); } to { opacity: 1; transform: scale(1) rotate(var(--mim-badge-rotate, 0deg)); } }
@keyframes mim-badge-down { from { opacity: 0; transform: translateY(-14px) rotate(var(--mim-badge-rotate, 0deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--mim-badge-rotate, 0deg)); } }
@keyframes mim-badge-up   { from { opacity: 0; transform: translateY(14px) rotate(var(--mim-badge-rotate, 0deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--mim-badge-rotate, 0deg)); } }
@keyframes mim-badge-in   { from { opacity: 0; transform: translateX(20px) rotate(var(--mim-badge-rotate, 0deg)); } to { opacity: 1; transform: translateX(0) rotate(var(--mim-badge-rotate, 0deg)); } }
@keyframes mim-badge-flip { from { opacity: 0; transform: rotateY(90deg); } to { opacity: 1; transform: rotateY(0); } }
@keyframes mim-badge-pulse { 0%, 100% { transform: scale(1) rotate(var(--mim-badge-rotate, 0deg)); } 50% { transform: scale(1.07) rotate(var(--mim-badge-rotate, 0deg)); } }
@keyframes mim-badge-shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }

.mim-card__stock-veil {
	position: absolute;
	z-index: 3;
	inset-inline: 0;
	bottom: 0;
	padding: 8px;
	background: rgba(0, 0, 0, .72);
	color: #fff;
	font-size: 13px;
	text-align: center;
}

.mim-card--out-of-stock .mim-card__media { opacity: .55; }

/* ═══════════════════════════════════════════════════════════
   Category groups — the anchor sections
   ═══════════════════════════════════════════════════════════ */

.mim-groups {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mim-group {
	/* Keeps a sticky header from covering the heading when a chip scrolls
	   the section into view. */
	scroll-margin-top: 90px;
}

.mim-group__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 34px 0 20px;
}

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

.mim-group__icon {
	width: 28px;
	height: 28px;
	color: var(--mim-accent, #25334E);
	fill: currentColor;
	flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   Attributes
   ═══════════════════════════════════════════════════════════ */

.mim-attrs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.mim-attrs--list {
	flex-direction: column;
	align-items: flex-start;
}

.mim-attr {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--mim-attr-color, var(--mim-accent, #25334E));
	line-height: 1.6;
}

.mim-attr a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
}

.mim-attr__icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: currentColor;
	fill: currentColor;
}

.mim-attrs--chips .mim-attr {
	padding: 5px 12px;
	border-radius: 99px;
}

/* Tint: the term colour at low opacity, so every chip stays readable without
   the designer picking a background per term. */
.mim-attrs--chips.mim-attrs--bg-tint .mim-attr {
	background: color-mix(in srgb, var(--mim-attr-color, #25334E) 14%, transparent);
}

.mim-attrs--chips.mim-attrs--bg-solid .mim-attr {
	background: var(--mim-attr-color, #25334E);
	color: #fff;
}

.mim-attrs--chips.mim-attrs--bg-solid .mim-attr__icon {
	color: #fff;
	fill: #fff;
}

.mim-attrs__sep { opacity: .5; }

/* Fallback for browsers without color-mix. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.mim-attrs--chips.mim-attrs--bg-tint .mim-attr {
		background: rgba(37, 51, 78, .12);
	}
}

/* ═══════════════════════════════════════════════════════════
   Custom fields
   ═══════════════════════════════════════════════════════════ */

.mim-field {
	display: flex;
	gap: 6px;
}

.mim-field--row { flex-direction: row; align-items: center; flex-wrap: wrap; }
.mim-field--column { flex-direction: column; }

.mim-field__label { opacity: .7; }
.mim-field__value { margin: 0; }

.mim-field__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

/* ═══════════════════════════════════════════════════════════
   Logo
   ═══════════════════════════════════════════════════════════ */

.mim-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.mim-logo a {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: inherit;
	color: inherit;
	text-decoration: none;
}

.mim-logo__text {
	margin: 0;
	font-size: 64px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.1;
	color: var(--mim-accent, #25334E);
}

.mim-logo__image {
	display: block;
	max-width: 100%;
	height: auto;
}

.mim-logo__tagline { line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════
   Category bubbles
   ═══════════════════════════════════════════════════════════ */

.mim-cats__track {
	display: flex;
	align-items: center;
	gap: 14px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-block: 4px;
}

.mim-cats--no-scrollbar .mim-cats__track {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mim-cats--no-scrollbar .mim-cats__track::-webkit-scrollbar {
	display: none;
}

.mim-cat {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	scroll-snap-align: center;
	text-decoration: none;
}

.mim-cat__bubble {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	/* Per-category colour wins over the widget default. */
	background: var(--mim-cat-color, var(--mim-cat-bg, var(--mim-accent, #25334E)));
	color: #fff;
	transition: transform .3s cubic-bezier(.34, 1.3, .64, 1), background-color .3s, border-color .3s;
	border: 0 solid transparent;
}

.mim-cat__icon {
	width: 38px;
	height: 38px;
	color: inherit;
	fill: currentColor;
	transition: color .3s;
}

.mim-cat__label {
	font-size: 13px;
	line-height: 1.4;
	color: inherit;
	transition: color .3s;
}

/* Label only on the active bubble — the reference behaviour. */
.mim-cats--label-active .mim-cat__label {
	display: none;
}

.mim-cats--label-active .mim-cat.is-active .mim-cat__label {
	display: block;
}

/* The active bubble shows icon *and* label, so the icon gives up some room.
   Scaled from the control value rather than a fixed size, so it still tracks
   whatever diameter the designer picked per breakpoint. */
.mim-cats--label-active .mim-cat.is-active .mim-cat__icon {
	width: calc(var(--mim-icon-size, 38px) * .72);
	height: calc(var(--mim-icon-size, 38px) * .72);
}

.mim-cat__label--outside {
	color: inherit;
}

.mim-cats__title {
	margin: 28px 0 20px;
	text-align: center;
	font-size: 32px;
	font-weight: 700;
	color: var(--mim-accent, #25334E);
}

/* ═══════════════════════════════════════════════════════════
   Order bar
   ═══════════════════════════════════════════════════════════ */

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

.mim-orderbar {
	display: flex;
	justify-content: center;
	padding-inline: 16px;
}

.mim-orderbar--fixed {
	position: fixed;
	inset-inline: 0;
	bottom: var(--mim-bar-bottom, 16px);
	z-index: 9990;
	/* The wrapper spans the viewport width so the pill can be centred, but it
	   must not swallow clicks meant for the page behind it. */
	pointer-events: none;
}

/* The drawer lives inside that wrapper, so it has to opt back in — otherwise
   nothing in it is clickable: no close button, no scrim, no quantity steppers. */
.mim-orderbar .mim-drawer {
	pointer-events: auto;
}

/* Sticky rides the page flow until it reaches the offset, then pins. */
.mim-orderbar--sticky {
	position: sticky;
	bottom: var(--mim-bar-bottom, 16px);
	z-index: 9990;
}

.mim-orderbar--inline {
	position: relative;
}

.mim-orderbar__pill {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 92%;
	padding: 10px 12px;
	border-radius: 22px;
	background: #BAAF91;
	box-shadow: 0 10px 34px rgba(20, 24, 40, .18);
	pointer-events: auto;
	opacity: 0;
	transition: transform .45s cubic-bezier(.34, 1.2, .64, 1), opacity .3s;
}

.mim-orderbar--in-slide .mim-orderbar__pill { transform: translateY(140%); }
.mim-orderbar--in-pop   .mim-orderbar__pill { transform: scale(.8); }
.mim-orderbar--in-fade  .mim-orderbar__pill { transform: none; }
.mim-orderbar--in-none  .mim-orderbar__pill { transform: none; transition: none; }

.mim-orderbar.is-visible .mim-orderbar__pill {
	transform: none;
	opacity: 1;
}

/* ── Liquid glass ───────────────────────────────────────────
   Three layers inside one pill:
     ::before  the lit inner edge — an inset shadow, drawn above the content
               plane so it reads as the rim of the glass
     ::after   the refracting backdrop, warped by an SVG turbulence filter
     element   a faint tint, so the glass has a colour of its own
   `isolation` keeps the negative z-index of ::after inside this stacking
   context instead of punching through to the page background. */

.mim-glass {
	position: relative;
	isolation: isolate;
	background: transparent;
	background-color: color-mix(
		in srgb,
		var(--mim-glass-tint, #fff) calc(var(--mim-glass-tint-opacity, .08) * 100%),
		transparent
	);
}

.mim-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 var(--mim-glass-inner-blur, 31px) var(--mim-glass-inner-spread, 0px) var(--mim-glass-inner-color, #fff);
}

.mim-glass::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	backdrop-filter: blur(var(--mim-glass-frost, 2px));
	-webkit-backdrop-filter: blur(var(--mim-glass-frost, 2px));
	filter: var(--mim-glass-filter);
	-webkit-filter: var(--mim-glass-filter);
}

/* The pill's own children must sit above the rim highlight. */
.mim-glass > * {
	position: relative;
	z-index: 1;
}

.mim-glass-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Without backdrop-filter the displacement map has nothing to refract, so fall
   back to a plain translucent pill rather than an invisible one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mim-glass {
		background-color: color-mix(in srgb, var(--mim-glass-tint, #fff) 82%, transparent);
	}

	.mim-glass::after { display: none; }
}

@supports not (background-color: color-mix(in srgb, red 10%, transparent)) {
	.mim-glass { background-color: rgba(255, 255, 255, .12); }
}

.mim-orderbar__cta {
	flex: 0 0 auto;
	padding: 10px 18px;
	border: 0;
	border-radius: 14px;
	background: #fff;
	color: var(--mim-accent, #25334E);
	font: inherit;
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}

.mim-orderbar__cta:hover { transform: translateY(-1px); }

.mim-orderbar__total {
	flex: 1;
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: 18px;
	color: #1F2430;
}

.mim-orderbar__total .mim-price__currency {
	font-size: .78em;
	opacity: .75;
}

.mim-orderbar.is-priceless .mim-orderbar__total { visibility: hidden; }

.mim-orderbar__thumbs {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* Stated explicitly rather than relying on defaults: a theme or the Elementor
   kit can otherwise square off every img on the page. */
.mim-orderbar__thumb {
	display: block;
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 50%;
	border: 2px solid #fff;
	object-fit: cover;
	background: #ddd;
	box-shadow: 0 2px 6px rgba(20, 24, 40, .18);
	position: relative;
}

/* Later thumbs slide under the earlier ones, so the newest addition tucks
   behind the stack instead of covering it. */
.mim-orderbar__thumb + .mim-orderbar__thumb {
	margin-inline-start: -14px;
	z-index: -1;
}

/* Flying thumbnail that travels from the card to the bar. */
.mim-fly {
	position: fixed;
	z-index: 99999;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	pointer-events: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════════════════
   Drawer
   ═══════════════════════════════════════════════════════════ */

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

.mim-drawer {
	position: fixed;
	inset: 0;
	z-index: 9995;
}

.mim-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(15, 18, 28, .55);
	opacity: 0;
	transition: opacity .3s;
}

.mim-drawer.is-open .mim-drawer__scrim { opacity: 1; }

.mim-drawer__panel {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	max-height: 82vh;
	display: flex;
	flex-direction: column;
	background: var(--mim-surface, #BAAF91);
	color: #1F2430;
	border-radius: 26px 26px 0 0;
	transform: translateY(100%);
	transition: transform .45s cubic-bezier(.34, 1.15, .64, 1);
}

.mim-drawer.is-open .mim-drawer__panel { transform: translateY(0); }

.mim-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 10px;
}

.mim-drawer__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

.mim-drawer__close {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .06);
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mim-drawer__items {
	flex: 1;
	overflow-y: auto;
	padding: 4px 20px 12px;
	-webkit-overflow-scrolling: touch;
}

.mim-drawer__empty {
	padding: 40px 0;
	text-align: center;
	opacity: .6;
}

.mim-drawer__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
}

.mim-drawer__item + .mim-drawer__item {
	border-top: 1px solid rgba(37, 51, 78, .15);
}

.mim-drawer__item-img {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	object-fit: cover;
	background: rgba(0, 0, 0, .06);
}

.mim-drawer__item-info {
	flex: 1;
	min-width: 0;
}

.mim-drawer__item-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mim-drawer__item-subtitle {
	margin: 2px 0 0;
	font-size: 12px;
	opacity: .65;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mim-drawer__item-side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.mim-drawer__item-price {
	display: flex;
	align-items: baseline;
	gap: 3px;
	font-size: 15px;
}

.mim-drawer__qty {
	display: flex;
	align-items: center;
	gap: 2px;
	border-radius: 10px;
	background: rgba(37, 51, 78, .1);
}

.mim-drawer__qty button {
	width: 26px;
	height: 26px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	border-radius: 8px;
}

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

.mim-drawer__qty-value {
	min-width: 22px;
	text-align: center;
	font-size: 14px;
}

.mim-drawer__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid rgba(37, 51, 78, .15);
}

.mim-drawer__totals {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex: 1 1 auto;
}

.mim-drawer__total {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: 20px;
	font-weight: 700;
}

/* Prices off: the total disappears but the checkout button must stay. */
.mim-drawer.is-priceless .mim-drawer__totals { visibility: hidden; }

.mim-drawer__checkout {
	flex: 1 1 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border: 0;
	border-radius: 16px;
	background: var(--mim-accent, #25334E);
	color: var(--mim-on-accent, #fff);
	font: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, transform .2s, opacity .2s;
}

.mim-drawer__checkout:hover { transform: translateY(-1px); }

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

/* ═══════════════════════════════════════════════════════════
   Checkout
   ═══════════════════════════════════════════════════════════ */

.mim-checkout {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 460px;
	margin-inline: auto;
	padding: 28px 24px;
	border-radius: 22px;
}

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

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

.mim-checkout__intro {
	margin: 0;
	opacity: .75;
	line-height: 1.8;
}

/* ── Summary ── */

.mim-checkout__summary {
	display: grid;
	gap: 8px;
	padding: 14px 16px;
	border-radius: 16px;
	background: rgba(37, 51, 78, .06);
}

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

.mim-sum__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
}

.mim-sum__row + .mim-sum__row {
	border-top: 1px solid rgba(37, 51, 78, .14);
}

.mim-sum__name { min-width: 0; overflow-wrap: anywhere; }

.mim-sum__qty { opacity: .6; }

.mim-sum__price {
	direction: ltr;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mim-sum__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid rgba(37, 51, 78, .14);
	font-size: 19px;
	font-weight: 700;
}

/* ── Form ── */

.mim-checkout__form[hidden],
.mim-checkout__empty[hidden],
.mim-checkout__success[hidden] { display: none; }

.mim-checkout__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

/* First and last name share a row when the option is on — but never on a
   phone, where two half-width text inputs are cramped. */
@media (min-width: 480px) {
	.mim-checkout--split-name .mim-checkout__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mim-checkout--split-name .mim-checkout__field--phone,
	.mim-checkout--split-name .mim-checkout__field--note {
		grid-column: 1 / -1;
	}
}

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

.mim-checkout__label {
	margin: 0;
	font-size: 13px;
	opacity: .8;
}

.mim-checkout__input {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid rgba(37, 51, 78, .18);
	border-radius: 14px;
	background: #fff;
	color: var(--mim-accent, #25334E);
	font: inherit;
	line-height: 1.6;
	transition: border-color .2s, box-shadow .2s;
	appearance: none;
	-webkit-appearance: none;
}

.mim-checkout__input:focus {
	outline: none;
	border-color: var(--mim-accent, #25334E);
	box-shadow: 0 0 0 3px rgba(37, 51, 78, .1);
}

/* Phone numbers are Latin digits — typing them in an RTL field jumbles them. */
.mim-checkout__input--ltr {
	direction: ltr;
	text-align: start;
	font-variant-numeric: tabular-nums;
}

textarea.mim-checkout__input { resize: vertical; min-height: 64px; }

.mim-checkout__error {
	margin: 0;
	color: #C0392B;
	font-size: 14px;
	line-height: 1.7;
}

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

.mim-checkout__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 24px;
	border: 0;
	border-radius: 16px;
	background: var(--mim-accent, #25334E);
	color: var(--mim-on-accent, #fff);
	font: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, transform .2s, opacity .2s;
}

.mim-checkout__submit:hover { transform: translateY(-1px); }

.mim-checkout__submit[disabled] {
	opacity: .55;
	cursor: progress;
	transform: none;
}

.mim-checkout.is-submitting { pointer-events: none; }

.mim-checkout__empty,
.mim-checkout__success {
	display: grid;
	gap: 14px;
	justify-items: center;
	text-align: center;
	line-height: 1.9;
}

.mim-checkout__code {
	margin: 0;
	direction: ltr;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   Context widgets
   ═══════════════════════════════════════════════════════════ */

.mim-item-title { margin: 0; }

.mim-item-title.mim-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mim-item-title a { color: inherit; text-decoration: none; }

.mim-item-image {
	display: block;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.mim-item-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.mim-item-image--placeholder {
	background: linear-gradient(135deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .12));
}

.mim-item-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: 0;
}

.mim-ingredients {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.mim-ingredients--list {
	flex-direction: column;
	align-items: flex-start;
}

.mim-ingredient {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.mim-ingredients--chips .mim-ingredient {
	padding: 4px 12px;
	border-radius: 99px;
	background: rgba(37, 51, 78, .1);
}

.mim-ingredient a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
}

.mim-ingredient__allergen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	border: 1px solid currentColor;
	color: #E4572E;
	font-size: .72em;
	line-height: 1;
}

.mim-ingredients__sep { opacity: .6; }

/* ═══════════════════════════════════════════════════════════
   Responsive

   Elementor's own responsive controls handle anything the designer sets.
   These rules cover what a control cannot: overflow safety, touch target
   sizes, and layouts that must restructure rather than just resize.
   ═══════════════════════════════════════════════════════════ */

/* Nothing in the plugin may push the page sideways. */
.mim-grid,
.mim-card,
.mim-cats,
.mim-orderbar,
.mim-drawer__panel {
	max-width: 100%;
	min-width: 0;
}

.mim-card__title,
.mim-card__subtitle,
.mim-card__price,
.mim-item-title,
.mim-drawer__item-title,
.mim-drawer__item-subtitle {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Long prices must shrink rather than overflow the colour block. */
.mim-card__price {
	flex-wrap: wrap;
}

/* ── Tablet ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.mim-cats__track {
		/* Let the row bleed to the screen edge so a partial bubble hints at
		   more content, exactly as in the reference. */
		scroll-padding-inline: 16px;
	}
}

/* ── Phone ──────────────────────────────────────────────── */

@media (max-width: 767px) {
	.mim-grid {
		/* Guard against a stale desktop column count on small screens. */
		grid-template-columns: repeat(var(--mim-columns, 1), minmax(0, 1fr));
	}

	.mim-card__body {
		padding: 16px 14px 18px;
	}

	/* Keep the tap target at 44px even if the visual size was dialled down. */
	.mim-add-btn,
	.mim-wish-btn {
		min-width: 44px;
		min-height: 44px;
	}

	.mim-orderbar--fixed {
		bottom: max(12px, env(safe-area-inset-bottom, 0px));
		padding-inline: 12px;
	}

	.mim-orderbar__pill {
		max-width: 100%;
		gap: 8px;
	}

	.mim-orderbar__cta {
		padding: 10px 14px;
		font-size: 14px;
		white-space: nowrap;
	}

	.mim-orderbar__total {
		font-size: 16px;
		min-width: 0;
		overflow: hidden;
	}

	.mim-orderbar__total .mim-price__value {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Four thumbnails on a 320px screen would crowd out the total. */
	.mim-orderbar__thumb:nth-child(n + 3) {
		display: none;
	}

	.mim-drawer__panel {
		max-height: 88vh;
		max-height: 88dvh;
	}

	.mim-drawer__item-img {
		width: 48px;
		height: 48px;
	}

	.mim-cats__title {
		margin: 20px 0 16px;
	}

	.mim-group__head {
		margin: 24px 0 16px;
	}

	.mim-drawer__foot {
		padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	}

	.mim-logo__text {
		word-break: break-word;
	}
}

/* ── Very narrow phones ─────────────────────────────────── */

@media (max-width: 380px) {
	.mim-orderbar__thumbs {
		display: none;
	}

	.mim-orderbar__cta {
		padding: 10px 12px;
		font-size: 13px;
	}

	.mim-drawer__item {
		gap: 8px;
	}
}

/* ── Landscape phone: the drawer must not eat the screen ── */

@media (max-height: 480px) and (orientation: landscape) {
	.mim-drawer__panel {
		max-height: 94vh;
		max-height: 94dvh;
	}

	.mim-drawer__head {
		padding: 12px 20px 6px;
	}
}

/* ── Coarse pointers ────────────────────────────────────── */

@media (hover: none) {
	/* Hover transforms stick on touch devices — drop them. */
	.mim-card:hover { transform: none; }
	.mim-card:hover .mim-card__image { transform: none; }
	.mim-add-btn:hover { transform: none; }
	.mim-wish-btn:hover { transform: none; }
	.mim-cat:not(.is-active):hover .mim-cat__bubble { transform: none; }
}

/* ── Wide screens ───────────────────────────────────────── */

@media (min-width: 1440px) {
	.mim-orderbar__pill {
		max-width: 640px;
	}
}

/* ═══════════════════════════════════════════════════════════
   Motion preferences
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.mim-card,
	.mim-card__image,
	.mim-cat__bubble,
	.mim-orderbar__pill,
	.mim-drawer__panel,
	.mim-drawer__scrim,
	.mim-add-btn,
	.mim-item-image img {
		transition-duration: .01ms;
	}

	.mim-fly { display: none; }
	.mim-add-btn.is-added { animation: none; }
}