/*
 * Mim-Cafe — account panel, cart page and coupons.
 *
 * Loaded alongside the main sheet. Every colour routes through --mim-acc /
 * --mim-acc-soft so the widget's two colour controls retint the whole panel,
 * and the dark theme only has to override a handful of surface variables.
 */

/* The whole account/cart/checkout family sits on the same warm surface as the
   order drawer, which is the palette this design settled on. */
.mim-account {
	--mim-acc: #25334E;
	--mim-acc-soft: #BAAF91;
	--mim-acc-nav: 246px;
	--mim-acc-surface: #FBF6EE;
	--mim-acc-page: rgba(37, 51, 78, .045);
	--mim-acc-text: #25334E;
	--mim-acc-muted: rgba(37, 51, 78, .62);
	--mim-acc-line: rgba(37, 51, 78, .12);
	--mim-acc-gap: 24px;

	display: grid;
	/* In an RTL document the first column lands on the right, which is where the
	   sidebar belongs on a Persian site — no direction-specific rule needed. */
	grid-template-columns: var(--mim-acc-nav) minmax(0, 1fr);
	gap: var(--mim-acc-gap);
	align-items: start;
	max-width: 1180px;
	margin-inline: auto;
	/* Air on every side, and never flush against a phone's edge. */
	padding: clamp(16px, 3vw, 32px);
	box-sizing: border-box;
	color: var(--mim-acc-text);
	font-family: var(--mim-font, system-ui, sans-serif);
	line-height: 1.8;
	text-align: start;
}

.mim-account--out {
	grid-template-columns: minmax(0, 1fr);
	place-items: center;
}

/* ── Isolation ──
   The Elementor kit colours every link on the page, which turned the order
   text purple and made it vanish on hover. Colours here come from the panel's
   own variables and nothing else. */
.mim-account a,
.mim-account a:hover,
.mim-account a:focus,
.mim-account a:visited,
.mim-account a:active {
	color: inherit;
	text-decoration: none;
	background: none;
	opacity: 1;
}

/* The link reset above clears `background` on every anchor, which silently
   erased the fill from any button rendered as an <a> — white text on nothing.
   The background has to be restated at the same specificity, not just the
   colour. */
.mim-account .mim-abtn,
.mim-account .mim-abtn:hover,
.mim-account .mim-abtn:focus,
.mim-account .mim-abtn:visited {
	background: var(--mim-acc);
	color: #fff;
	text-decoration: none;
}

.mim-account .mim-abtn--ghost,
.mim-account .mim-abtn--ghost:hover,
.mim-account .mim-abtn--ghost:visited {
	background: transparent;
	color: var(--mim-acc);
}

.mim-account button,
.mim-account button:hover,
.mim-account button:focus {
	text-decoration: none;
	box-shadow: none;
	outline: none;
}

/* ── Cards ── */

.mim-acard {
	background: var(--mim-acc-surface);
	border: 1px solid var(--mim-acc-line);
	border-radius: 18px;
	padding: 18px;
	box-sizing: border-box;
}

.mim-account__title {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
	color: var(--mim-acc);
}


.mim-acard__title { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.mim-account__section { margin-top: 28px; }

.mim-account__empty {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 10px;
	min-height: 260px;
	padding: 40px 24px;
	text-align: center;
	color: var(--mim-acc-muted);
}

.mim-account__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--mim-acc-page);
}

.mim-account__empty-glyph {
	width: 28px;
	height: 28px;
	color: var(--mim-acc);
	opacity: .55;
}

.mim-account__empty-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--mim-acc);
}

.mim-account__empty-text {
	max-width: 40ch;
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
}

.mim-account__empty .mim-abtn { margin-top: 4px; }

/* ── Sidebar ──
   First grid column, which in an RTL document lands on the right — where it
   belongs on a Persian site — without a single direction-specific rule. */

.mim-account__nav {
	/* Not sticky: an element cannot both match its neighbour's height and float
	   free of it. Matching heights is what was asked for, so the tab list takes
	   the slack and the sign-out sits at the bottom of whatever height results. */
	display: flex;
	flex-direction: column;
	gap: 20px;
	/* A fixed height, not a stretched one: matching the content made the sidebar
	   jump every time a shorter tab was selected. This is the height of the
	   longest tab, so it never moves. */
	height: var(--mim-acc-nav-h, 560px);
	padding: 22px 18px;
	background: var(--mim-acc-surface);
	border: 1px solid var(--mim-acc-line);
	border-radius: 26px;
	text-align: start;
}

.mim-account__greeting {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--mim-acc-muted);
	text-align: start;
}

.mim-account__user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--mim-acc-line);
	text-align: start;
}

/* Avatar doubles as the upload trigger — clicking it opens the file picker. */
/* The wrapper carries no size and no border of its own — it is sized by the
   image inside it.

   That border was the bug. `flex-basis: 54px` sizes the *border box*, so a 2px
   border on a content-box button left only 50px of content for a 54px image;
   `overflow: hidden` then clipped the difference, which is the half-cut avatar.
   The ring is now a box-shadow on the image, which takes up no layout space and
   cannot squeeze anything. */
.mim-account__avatar-btn {
	--mim-avatar: 54px;

	position: relative;
	flex: 0 0 auto;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	line-height: 0;
	cursor: pointer;
	overflow: hidden;
}

/* get_avatar() prints its own width/height attributes and themes love to
   override img sizing, so both dimensions and the aspect are pinned here at a
   specificity high enough to survive it. `cover` on a square box crops the long
   edge instead of squashing the picture. */
/* `!important` on the geometry only. get_avatar() writes width/height
   attributes and themes routinely set `img { height: auto }` at a specificity
   this cannot otherwise beat — which is what turned the circle into an oval.
   No colour or spacing is forced here, so nothing a designer sets is affected. */
.mim-account .mim-account__avatar,
.mim-account .mim-account__avatar-btn img {
	/* Fixed pixels, not percentages. A percentage is only square if the parent
	   is, and the parent is a flex child that a theme's button rules can stretch
	   — which is what kept producing an oval. This cannot be stretched. */
	display: block;
	width: var(--mim-avatar, 54px) !important;
	height: var(--mim-avatar, 54px) !important;
	min-width: var(--mim-avatar, 54px) !important;
	min-height: var(--mim-avatar, 54px) !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: 1 !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	object-position: center;
	padding: 0 !important;
	border: 0 !important;
	box-sizing: border-box;
	box-shadow: 0 0 0 2px var(--mim-acc-soft);
}

.mim-account__avatar-btn::after {
	content: "تغییر";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 2px 0;
	background: rgba(37, 51, 78, .72);
	color: #fff;
	font-size: 9px;
	line-height: 1.4;
	text-align: center;
	opacity: 0;
	transition: opacity .2s;
}

.mim-account__avatar-btn:hover::after,
.mim-account__avatar-btn:focus-visible::after { opacity: 1; }

.mim-account__avatar-btn.is-busy { opacity: .5; pointer-events: none; }

.mim-account__user-text {
	display: grid;
	min-width: 0;
	font-size: 14px;
	line-height: 1.6;
	text-align: start;
}

.mim-account__user-text strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mim-account__user-text span {
	font-size: 12px;
	color: var(--mim-acc-muted);
	font-variant-numeric: tabular-nums;
}

.mim-account__tabs {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mim-account .mim-account__tab {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
	width: 100%;
	padding: 11px 14px;
	border: 0;
	border-radius: 14px;
	background: none;
	color: var(--mim-acc);
	font: inherit;
	font-size: 14px;
	line-height: 1.5;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

/* Fixed basis and no shrink: the glyph is what keeps the labels on one
   optical line, so it must never be squeezed or pushed onto its own row. */
.mim-account .mim-account__tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	line-height: 0;
}

.mim-account__tab-glyph {
	width: 100%;
	height: 100%;
	color: inherit;
	opacity: .75;
}

.mim-account .mim-account__tab-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-align: start;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mim-account__tab:hover { background: var(--mim-acc-page); }

.mim-account__tab.is-active {
	background: var(--mim-acc);
	color: #fff;
}

.mim-account__tab.is-active .mim-account__tab-glyph { opacity: 1; }

/* ── Panels ── */

/* A flex column so the dashboard blocks can be reordered on a phone, and a
   floor so a tab with nothing in it still fills the screen rather than leaving
   the footer riding halfway up. */
.mim-account__panel { display: none; }

.mim-account__panel.is-active {
	display: flex;
	flex-direction: column;
	min-height: 420px;
}

.mim-account__body { min-height: 420px; }

/* ── Dashboard head ── */

.mim-dash__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 24px;
}

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

.mim-dash__title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mim-acc);
}

.mim-dash__subtitle {
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--mim-acc-muted);
}

.mim-dash__profile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px 6px 16px;
	padding-inline: 16px 6px;
	background: var(--mim-acc-surface);
	border: 1px solid var(--mim-acc-line);
	border-radius: 999px;
}

.mim-dash__profile-text {
	display: grid;
	min-width: 0;
	font-size: 13px;
	line-height: 1.5;
	text-align: start;
}

.mim-dash__profile-text strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mim-dash__profile-text span {
	font-size: 11px;
	color: var(--mim-acc-muted);
	font-variant-numeric: tabular-nums;
}

.mim-account .mim-dash__profile-avatar {
	flex: 0 0 44px;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: 1 !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	object-position: center;
}

/* ── Stats ── */

.mim-dash__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.mim-stat {
	display: grid;
	gap: 10px;
	align-content: start;
	padding: 20px;
	border-radius: 22px;
}

.mim-stat__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.mim-stat__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--mim-acc-muted);
}

.mim-stat__unit {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--mim-acc-page);
	font-size: 11px;
	color: var(--mim-acc-muted);
}

.mim-stat__value {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mim-acc);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

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

.mim-stat__chip {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--mim-acc-page);
	font-size: 12px;
	color: var(--mim-acc-muted);
	white-space: nowrap;
}

/* ── Spend ring ── */

.mim-donut-card {
	padding: 22px;
	border-radius: 22px;
}

.mim-donut-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.mim-donut-card__head .mim-acard__title { margin: 0; }

.mim-donut-card__hint {
	font-size: 12px;
	color: var(--mim-acc-muted);
}

.mim-donut-card__body {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 28px;
}

.mim-donut {
	position: relative;
	flex: 0 0 auto;
	width: 190px;
	height: 190px;
}

.mim-donut__svg {
	width: 100%;
	height: 100%;
	/* SVG angles start at 3 o'clock; a ring should start at the top. */
	transform: rotate(-90deg);
}

.mim-donut__rail {
	fill: none;
	stroke: var(--mim-acc-page);
	stroke-width: 18;
}

.mim-donut__slice {
	fill: none;
	stroke-width: 18;
	stroke-linecap: round;
}

.mim-donut__center {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 2px;
	text-align: center;
	pointer-events: none;
}

.mim-donut__center-label {
	font-size: 12px;
	color: var(--mim-acc-muted);
}

.mim-donut__center-value {
	font-size: 22px;
	font-weight: 700;
	color: var(--mim-acc);
	font-variant-numeric: tabular-nums;
}

.mim-donut__center-unit {
	font-size: 11px;
	color: var(--mim-acc-muted);
}

.mim-donut__side {
	flex: 1 1 220px;
	display: grid;
	gap: 16px;
	min-width: 0;
}

.mim-donut-card.is-sample .mim-donut__svg { opacity: .45; }

.mim-donut-card.is-sample .mim-donut__center-value--sample {
	font-size: 15px;
	font-weight: 600;
}

.mim-donut__cta {
	display: grid;
	justify-items: start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 16px;
	background: var(--mim-acc-page);
}

.mim-donut__cta p {
	margin: 0;
	font-size: 13px;
	line-height: 1.9;
	color: var(--mim-acc-muted);
}

.mim-donut__legend {
	flex: 1 1 auto;
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.mim-donut__legend-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}

.mim-donut__dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.mim-donut__legend-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mim-donut__legend-value {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--mim-acc);
	font-variant-numeric: tabular-nums;
}

/* ── Habits and favourites ── */

.mim-account__habits {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

.mim-habit {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.mim-account .mim-habit__img {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	max-width: none;
	aspect-ratio: 1;
	border-radius: 20px;
	object-fit: cover;
}

/* Grows to fill the row but is allowed to wrap the button onto its own line
   rather than being pushed underneath it — which is what the button's fixed
   width used to force at this card size. */
.mim-habit__text {
	display: grid;
	flex: 1 1 110px;
	min-width: 0;
	font-size: 14px;
}

.mim-habit .mim-abtn--sm {
	flex: 0 0 auto;
	margin-inline-start: auto;
}

.mim-habit__text strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mim-habit__text span { font-size: 12px; color: var(--mim-acc-muted); }

.mim-habit__remove {
	position: absolute;
	top: 6px;
	inset-inline-end: 8px;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: var(--mim-acc-line);
	color: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

/* ── Orders ── */

.mim-account__filters {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.mim-account__chip {
	padding: 8px 16px;
	border: 1px solid var(--mim-acc-line);
	border-radius: 99px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.mim-account__chip.is-active {
	background: var(--mim-acc);
	border-color: var(--mim-acc);
	color: #fff;
}

.mim-account__orders { display: grid; gap: 12px; }

.mim-account__signout {
	/* The panel is a flex column and some of its blocks carry an explicit order;
	   an unordered sibling defaults to 0 and would jump to the front. Sign-out
	   belongs last wherever it appears. */
	order: 99;
	display: flex;
	justify-content: flex-start;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--mim-acc-line);
}

.mim-account .mim-abtn--danger,
.mim-account .mim-abtn--danger:hover,
.mim-account .mim-abtn--danger:focus,
.mim-account .mim-abtn--danger:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(192, 57, 43, .1);
	color: #C0392B;
}

.mim-account .mim-abtn--danger:hover {
	background: #C0392B;
	color: #fff;
}

.mim-abtn__icon {
	display: inline-flex;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}

.mim-abtn__glyph {
	width: 100%;
	height: 100%;
	color: inherit;
}

.mim-order { display: grid; gap: 12px; }

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

.mim-order-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 16px;
}

.mim-order-pager__btn {
	min-width: 38px;
	padding: 8px 12px;
	border: 1px solid var(--mim-acc-line);
	border-radius: 12px;
	background: var(--mim-acc-surface);
	color: var(--mim-acc);
	font: inherit;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}

.mim-order-pager__btn:hover { background: var(--mim-acc-page); }

.mim-order-pager__btn.is-active {
	background: var(--mim-acc);
	border-color: var(--mim-acc);
	color: #fff;
}

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

.mim-order__id {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

.mim-order__badge {
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 12px;
	background: var(--mim-acc-line);
}

.mim-order__badge--cafe { background: rgba(37, 51, 78, .12); }
.mim-order__badge--shop { background: rgba(186, 175, 145, .35); }

.mim-order__status {
	margin-inline-start: auto;
	font-size: 13px;
	color: var(--mim-acc-muted);
}

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

.mim-order__thumbs { display: flex; flex: 0 0 auto; }

.mim-order__thumbs img {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	border: 2px solid var(--mim-acc-surface);
	object-fit: cover;
}

.mim-order__thumbs img + img { margin-inline-start: -14px; }

.mim-order__lines {
	min-width: 0;
	font-size: 14px;
	color: var(--mim-acc-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.mim-order__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--mim-acc-line);
	font-size: 14px;
}

.mim-order__date { color: var(--mim-acc-muted); font-variant-numeric: tabular-nums; }
.mim-order__total { font-weight: 700; font-variant-numeric: tabular-nums; }

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

/* ── Coupons ── */

.mim-account__coupons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

.mim-coupon {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mim-coupon--personal {
	border-color: var(--mim-acc);
	border-width: 2px;
}

.mim-coupon__value {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	min-width: 74px;
	padding: 12px 8px;
	border-radius: 14px;
	background: var(--mim-acc);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
}

.mim-coupon__text { flex: 1; min-width: 0; font-size: 13px; }
.mim-coupon__text p { margin: 0; }

.mim-coupon__tag {
	display: inline-block;
	margin-bottom: 3px;
	padding: 2px 8px;
	border-radius: 99px;
	background: var(--mim-acc-soft);
	color: var(--mim-acc);
	font-size: 11px;
}

.mim-coupon__expiry { color: var(--mim-acc-muted); }

.mim-coupon__code {
	flex: 0 0 auto;
	display: grid;
	gap: 2px;
	padding: 8px 12px;
	border: 1px dashed var(--mim-acc-line);
	border-radius: 12px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: center;
}

.mim-coupon__code span { font-weight: 700; letter-spacing: .04em; }
.mim-coupon__code small { font-size: 11px; color: var(--mim-acc-muted); }
.mim-coupon__code.is-copied small { color: #1E8E3E; }

/* ── Detail rows ── */

.mim-account__rows { display: grid; }

.mim-arow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 13px 0;
	font-size: 14px;
}

.mim-arow + .mim-arow { border-top: 1px solid var(--mim-acc-line); }
.mim-arow span { color: var(--mim-acc-muted); }

/* ── Forms ── */

.mim-account__form { display: grid; gap: 18px; }

.mim-account__grid2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

.mim-afield { display: grid; gap: 6px; font-size: 13px; }
.mim-afield > span { color: var(--mim-acc-muted); }

.mim-ainput {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mim-acc-line);
	border-radius: 14px;
	background: var(--mim-acc-surface);
	color: inherit;
	font: inherit;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .2s, box-shadow .2s;
}

.mim-ainput:focus {
	outline: none;
	border-color: var(--mim-acc);
	box-shadow: 0 0 0 3px rgba(37, 51, 78, .1);
}

.mim-ainput--ltr {
	direction: ltr;
	text-align: start;
	font-variant-numeric: tabular-nums;
}

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

.mim-account__theme label {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border: 1px solid var(--mim-acc-line);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}

.mim-account__theme input { accent-color: var(--mim-acc); }

.mim-account__theme label:has(input:checked) {
	border-color: var(--mim-acc);
	background: var(--mim-acc-line);
}

.mim-account__msg { margin: 0; font-size: 14px; }
.mim-account__msg[hidden] { display: none; }
.mim-account__msg.is-error { color: #C0392B; }
.mim-account__msg.is-ok { color: #1E8E3E; }

.mim-abtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	border: 0;
	border-radius: 14px;
	background: var(--mim-acc);
	color: #fff;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, opacity .2s, transform .2s;
}

.mim-abtn:hover { transform: translateY(-1px); }
.mim-abtn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.mim-abtn--sm {
	padding: 7px 12px;
	font-size: 12px;
	line-height: 1.6;
	border-radius: 10px;
	white-space: nowrap;
}

.mim-abtn--ghost {
	background: none;
	border: 1px solid var(--mim-acc-line);
	color: inherit;
}

.mim-account__login {
	display: grid;
	gap: 14px;
	justify-items: center;
	text-align: center;
	max-width: 420px;
	margin-inline: auto;
	padding: 40px 26px;
}

.mim-account__hint { font-size: 13px; color: var(--mim-acc-muted); margin: 0; }

/* ── Responsive ── */

@media (max-width: 900px) {
	.mim-account {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		/* Room for the fixed tab bar, plus the home indicator on a modern phone. */
		padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	}

	/* On a phone the sidebar card disappears completely.
	 *
	 * It used to stay as a slim identity strip above the content — but the
	 * profile card at the top of the dashboard now shows the same face, the
	 * same name and considerably more besides, so the strip was the same
	 * information twice, costing a screenful before anything useful started.
	 *
	 * `display: contents` removes the box without removing its children, which
	 * matters because the tab bar lives inside it and still has to render.
	 * Hiding the nav outright would take the navigation with it. */
	.mim-account__nav {
		display: contents;
	}

	.mim-account__greeting,
	.mim-account__user {
		display: none;
	}

	.mim-account__tabs {
		position: fixed;
		inset-inline: var(--mim-bar-inset, 12px);
		bottom: calc(var(--mim-bar-inset, 12px) + env(safe-area-inset-bottom, 0px));
		z-index: 60;

		display: flex;
		flex-direction: row;
		justify-content: space-around;
		gap: 2px;
		height: auto;
		padding: 8px 6px;
		border-radius: var(--mim-bar-radius, 18px);
		background: var(--mim-bar-bg, var(--mim-acc-surface));
		box-shadow: 0 10px 30px rgba(37, 51, 78, .18);
	}

	/* Icon over label, every tab labelled. Showing the name only on the active
	   tab meant four of the five were unreadable pictograms. */
	.mim-account .mim-account__tab {
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-width: 0;
		padding: 8px 4px;
		border-radius: calc(var(--mim-bar-radius, 18px) - 6px);
		color: var(--mim-bar-color, var(--mim-acc));
		text-align: center;
		transition: background-color .2s, color .2s;
	}

	.mim-account .mim-account__tab-icon {
		flex: 0 0 var(--mim-bar-icon, 21px);
		width: var(--mim-bar-icon, 21px);
		height: var(--mim-bar-icon, 21px);
	}

	.mim-account .mim-account__tab-text {
		display: none;
		width: 100%;
		font-size: var(--mim-bar-font, 12px);
		line-height: 1.5;
		text-align: center;

		/* One line, always. Wrapping made the bar's height jump between tabs, so
		   a long name is faded out at its end instead — the first few letters
		   are what identify it, and a soft edge reads as "there is more" where a
		   hard cut just looks broken. */
		white-space: nowrap;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to left, #000 70%, transparent 100%);
		mask-image: linear-gradient(to left, #000 70%, transparent 100%);
	}

	/* In a left-to-right document the fade belongs on the other end. */
	[dir="ltr"] .mim-account .mim-account__tab-text {
		-webkit-mask-image: linear-gradient(to right, #000 70%, transparent 100%);
		mask-image: linear-gradient(to right, #000 70%, transparent 100%);
	}

	/* The selected tab gets the room it needs to show its name in full. */
	.mim-account .mim-account__tab.is-active .mim-account__tab-text {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.mim-account--bar-labels .mim-account__tab-text { display: block; }

	.mim-account .mim-account__tab.is-active {
		flex: 1.4 1 0;
		background: var(--mim-bar-active-bg, var(--mim-acc));
		color: var(--mim-bar-active-color, #fff);
	}

	.mim-account .mim-account__tab.is-active .mim-account__tab-glyph { opacity: 1; }

	.mim-dash__head {
		align-items: flex-start;
		gap: 12px;
	}

	.mim-dash__head          { order: 1; }
	.mim-dash__block--spend  { order: 2; }
	.mim-dash__block--habits { order: 3; }
	.mim-dash__block--recent { order: 4; }
	.mim-dash__stats         { order: 5; margin-top: 24px; }

	.mim-order__foot { flex-wrap: wrap; }
	.mim-coupon { flex-wrap: wrap; }
	.mim-coupon__code { width: 100%; }
}

/* ── Phone ── */

@media (max-width: 560px) {
	.mim-dash__title { font-size: 22px; }

	/* Redundant beside the identity card directly above it. */
	.mim-dash__profile { display: none; }

	.mim-dash__stats {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.mim-stat {
		padding: 16px;
		border-radius: 18px;
	}

	.mim-stat__value { font-size: 26px; }

	.mim-donut-card { padding: 16px; }

	.mim-donut-card__body {
		gap: 18px;
		justify-content: center;
	}

	.mim-donut {
		width: 160px;
		height: 160px;
	}

	/* The total has to fit inside the ring's hole, which shrank with it. */
	.mim-donut__center-value { font-size: 18px; }

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

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

	.mim-habit { gap: 10px; }

	.mim-habit__text { flex: 1 1 auto; }

	.mim-habit .mim-abtn--sm {
		flex: 1 0 100%;
		margin-inline-start: 0;
		text-align: center;
	}

	.mim-account__empty {
		min-height: 220px;
		padding: 32px 18px;
	}

	.mim-account__panel.is-active,
	.mim-account__body { min-height: 320px; }
}

/* ═══════════════════════════════════════════════════════════
   Cart page
   ═══════════════════════════════════════════════════════════ */

/* Cart, checkout and account all share the drawer's warm surface — the
   palette this design settled on — and centre themselves on the page. */
.mim-cartpage,
.mim-checkout {
	background: var(--mim-surface, #FBF6EE);
}

.mim-cartpage {
	display: block;
	padding: 26px 22px;
	border-radius: 24px;
	box-sizing: border-box;
	font-family: var(--mim-font, system-ui, sans-serif);
}

/* The surface stretches; the content stays within a readable measure. */
.mim-cartpage__inner {
	display: grid;
	gap: 16px;
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
}

.mim-cartpage--boxed {
	max-width: 720px;
	margin-inline: auto;
}

.mim-cartpage--page {
	width: 100%;
	border-radius: 0;
}

/* Vertical centring for the standalone pages the plugin creates. */
.mim-page-center {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 40px);
	padding: 20px;
	box-sizing: border-box;
}

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

.mim-cartpage__rows { display: grid; gap: 12px; }
.mim-cartpage__rows[hidden],
.mim-cartpage__empty[hidden],
.mim-cartpage__foot[hidden] { display: none; }

.mim-cartrow {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: #fff;
	border-radius: 18px;
}

.mim-cartrow__img {
	--mim-cart-thumb: 72px;
	width: var(--mim-cart-thumb);
	height: var(--mim-cart-thumb);
	min-width: var(--mim-cart-thumb);
	border-radius: 14px;
	object-fit: cover;
	background: rgba(0, 0, 0, .05);
}

.mim-cartrow__info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mim-cartrow__title { margin: 0; font-weight: 600; }

.mim-cartrow__sub {
	margin: 0;
	font-size: 13px;
	opacity: .65;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

.mim-cartrow__side {
	display: grid;
	gap: 8px;
	justify-items: center;
	flex: 0 0 auto;
}

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

.mim-cartrow__qty button {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 9px;
	background: none;
	color: inherit;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

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

.mim-cartrow__qty-value {
	min-width: 26px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.mim-cartrow__remove {
	border: 0;
	background: none;
	color: inherit;
	opacity: .55;
	font-size: 12px;
	cursor: pointer;
}

.mim-cartpage__empty {
	display: grid;
	gap: 16px;
	justify-items: center;
	text-align: center;
	padding: 44px 20px;
}

.mim-cartpage__foot {
	display: grid;
	gap: 14px;
	padding: 18px;
	background: #fff;
	border-radius: 18px;
}

.mim-cartpage__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 19px;
	font-weight: 700;
}

.mim-cartpage__total-value {
	direction: ltr;
	font-variant-numeric: tabular-nums;
}

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

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

@media (max-width: 560px) {
	.mim-cartrow { flex-wrap: wrap; }
	.mim-cartrow__side { width: 100%; grid-auto-flow: column; justify-content: space-between; }
}

/* ═══════════════════════════════════════════════════════════
   Clearance for the floating tab bar

   The bar is `position: fixed`, so it floats over whatever happens to be at
   the bottom of the viewport — and at the very end of the page that is the
   site footer, with the designer's own name underneath it.

   Padding on `.mim-account` could never fix this: the footer is not inside
   the account widget. The page itself has to end higher up, which means the
   padding belongs on the body.

   Two selectors for one job — `:has()` where it is supported, and a class the
   script adds everywhere else — because a footer covered by a floating bar is
   not something to leave to feature detection.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	body.mim-has-tabbar {
		padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
	}
}

@supports selector(:has(*)) {
	@media (max-width: 900px) {
		body:has(.mim-account__tabs) {
			padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
		}
	}
}

/* ═══════════════════════════════════════════════════════════
   Tooltips on the header buttons

   The buttons carry `aria-label` for a screen reader and `title` for a
   desktop browser, but `title` waits a second and a half and then draws in
   the operating system's font at the mouse — useless on a touch screen and
   ugly everywhere. This is the same text, immediately, in the page's own
   type.

   `pointer-events: none` matters: the bubble sits over the button it belongs
   to, and without it the hover would flicker as the cursor crossed onto it.
   ═══════════════════════════════════════════════════════════ */

[data-mim-tip] {
	position: relative;
}

[data-mim-tip]::after {
	content: attr(data-mim-tip);
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-start: 50%;
	z-index: 20;
	transform: translateX(50%) translateY(-4px);
	padding: 6px 10px;
	background: rgba(37, 51, 78, .95);
	border-radius: 9px;
	font-family: var(--mim-font, inherit);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.5;
	color: #F3EFE7;
	/*
	 * Wraps. It used to be `nowrap`, which turns a sentence of explanation into
	 * a single line several hundred pixels wide — fine beside a wide card on a
	 * desktop, and straight off the side of a phone.
	 */
	white-space: normal;
	width: max-content;
	max-width: min(260px, 68vw);
	opacity: 0;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}

[dir="ltr"] [data-mim-tip]::after {
	transform: translateX(-50%) translateY(-4px);
}

[data-mim-tip]:hover::after,
[data-mim-tip]:focus-visible::after {
	opacity: 1;
	transform: translateX(50%) translateY(0);
}

[dir="ltr"] [data-mim-tip]:hover::after,
[dir="ltr"] [data-mim-tip]:focus-visible::after {
	transform: translateX(-50%) translateY(0);
}

/* Near the right edge of the cover the bubble would run off the card. */
[data-mim-tip][data-mim-tip-align="start"]::after {
	inset-inline-start: auto;
	inset-inline-end: 0;
	transform: translateY(-4px);
}

[data-mim-tip][data-mim-tip-align="start"]:hover::after,
[data-mim-tip][data-mim-tip-align="start"]:focus-visible::after {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	[data-mim-tip]::after {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   حساب من — artwork, birthday, password

   Three small blocks that all follow the same shape: a card, a short
   explanation, the controls, and a status line that stays hidden until there
   is something to report.
   ═══════════════════════════════════════════════════════════ */

.mim-artctl__note {
	margin: 0 0 12px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--mim-acc-muted, rgba(37, 51, 78, .6));
}

.mim-artctl__row,
.mim-birth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.mim-birth__row .mim-field {
	flex: 1 1 120px;
	min-width: 0;
	margin: 0;
}

/* The save button lines up with the bottom of the two selects rather than
   with the top of their labels. */
.mim-birth__row .mim-abtn {
	flex: 0 0 auto;
	min-height: 46px;
}

.mim-pass {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: stretch;
}

.mim-pass .mim-field {
	margin: 0;
}

.mim-pass .mim-abtn {
	align-self: flex-start;
}

/* A ghost button reads as a secondary action, which changing a picture is —
   the primary way is still tapping the picture itself. */
.mim-abtn--ghost {
	background: transparent;
	border: 1.5px solid var(--mim-acc-line, #E4DFD5);
	color: var(--mim-acc-ink, #25334E);
}

.mim-abtn--ghost:hover {
	border-color: var(--mim-acc-ink, #25334E);
}

@media (max-width: 480px) {
	.mim-artctl__row .mim-abtn,
	.mim-birth__row .mim-abtn {
		flex: 1 1 100%;
	}
}

/* ═══════════════════════════════════════════════════════════
   Outline icons stay hollow

   An icon drawn with strokes carries `fill="none"` on its root. Any CSS rule
   setting `fill` beats that presentation attribute and paints the interior
   solid — which is exactly what a blanket `fill: currentColor` on the glyph
   classes was doing to every outline icon in the panel.

   The artwork already declares what it wants. This only makes sure nothing
   above overrules it.
   ═══════════════════════════════════════════════════════════ */

.mim-account svg[fill="none"],
.mim-account svg[fill="none"] > g,
.mim-profile svg[fill="none"],
.mim-profile svg[fill="none"] > g {
	fill: none;
}

/* The medal is the exception: its root says `fill="none"` and it paints
   through an inline style on each path. Nothing here may reach those. */
.mim-medal,
.mim-medal > g,
.mim-medal path {
	fill: revert;
}

/* ═══════════════════════════════════════════════════════════════
   کیف پول
   ═══════════════════════════════════════════════════════════════ */

.mim-wallet {
	display: grid;
	gap: 20px;
}

/* The balance, and it is meant to be the loudest thing on the tab. A wallet
   screen that makes you hunt for the number has failed at its one job. */
.mim-wallet__balance {
	background: var(--mim-accent, #25334E);
	color: #fff;
	border-radius: 18px;
	padding: 24px 22px;
	text-align: center;
}

.mim-wallet__label {
	display: block;
	font-size: 13px;
	opacity: .72;
	margin-bottom: 6px;
}

.mim-wallet__figure {
	display: block;
	font-size: clamp(28px, 7vw, 40px);
	font-weight: 700;
	line-height: 1.2;
	/* The figure is Latin-digit and the unit is Persian; without this the two
	   swap places at some widths and the amount reads as the unit. */
	direction: ltr;
	unicode-bidi: isolate;
}

.mim-wallet__unit {
	font-size: .45em;
	font-weight: 500;
	opacity: .75;
	margin-inline-start: 6px;
}

.mim-wallet__hint {
	margin: 10px 0 0;
	font-size: 12.5px;
	opacity: .8;
}

/* ── Topping up ─────────────────────────────────────────────── */

.mim-wallet__topup {
	display: grid;
	gap: 12px;
	padding: 18px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 16px;
	background: var(--mim-card-surface, #fff);
}

.mim-wallet__topup-title {
	font-weight: 600;
	font-size: 14px;
}

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

.mim-wallet__preset {
	flex: 1 1 auto;
	min-width: 92px;
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 10px;
	background: transparent;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

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

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

.mim-wallet__custom {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 10px;
	padding: 0 12px;
}

.mim-wallet__custom input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 12px 0;
	font: inherit;
	outline: none;
}

.mim-wallet__currency {
	font-size: 12px;
	opacity: .6;
}

.mim-wallet__note:empty {
	display: none;
}

.mim-wallet__note {
	margin: 0;
	font-size: 12.5px;
	opacity: .8;
}

/* ── The statement ──────────────────────────────────────────── */

.mim-wallet__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.mim-wallet__row {
	display: grid;
	/* Type takes what is left, the date and amount get fixed columns, so a
	   long note cannot push the figure off the edge on a phone. */
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 10px;
	padding: 12px 4px;
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	font-size: 13.5px;
}

.mim-wallet__row:last-child {
	border-bottom: 0;
}

.mim-wallet__row-type small {
	display: block;
	font-size: 11.5px;
	opacity: .6;
	margin-top: 2px;
}

.mim-wallet__row-date {
	font-size: 12px;
	opacity: .55;
	direction: ltr;
	unicode-bidi: isolate;
}

.mim-wallet__row-amount {
	font-weight: 600;
	unicode-bidi: isolate;
	white-space: nowrap;
}

.mim-wallet__row.is-in .mim-wallet__row-amount {
	color: #1a7f37;
}

.mim-wallet__row.is-out .mim-wallet__row-amount {
	color: #b32d2e;
}

.mim-wallet__more {
	margin: 12px 0 0;
	font-size: 12px;
	opacity: .6;
}

/* ── The tick box at checkout ───────────────────────────────── */

.mim-wallet-pay {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	margin: 14px 0;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 12px;
	background: var(--mim-card-surface, #fff);
	font-size: 13.5px;
	cursor: pointer;
}

.mim-wallet-pay input {
	margin-top: 2px;
	flex: 0 0 auto;
}

.mim-wallet-pay__amount {
	font-weight: 600;
}

.mim-wallet-pay__note {
	display: block;
	font-size: 12px;
	opacity: .65;
	margin-top: 3px;
}

.mim-wallet-pay input:disabled + * {
	opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════
   Order list — the filter and the thumbnails
   ═══════════════════════════════════════════════════════════════ */

/*
 * The filter reads as a segmented control rather than three loose outlines.
 *
 * It was three bordered pills floating on the page background, which is the
 * shape of a set of unrelated buttons. These three are one choice with three
 * answers, and exactly one of them is always true — so they share a track, sit
 * flush inside it, and the active one is a solid block that slides between
 * positions. The shape now says "pick one", which is what it is for.
 *
 * `:is()` keeps the specificity high enough to beat the theme and Elementor's
 * button rules without a single `!important`.
 */
.mim-account__filters {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--mim-acc, #25334E) 7%, transparent);
	/* Fallback for browsers without color-mix; overridden by the line above
	   wherever it is supported. */
	background: rgba(37, 51, 78, .07);
	flex-wrap: nowrap;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

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

.mim-account :is(.mim-account__chip) {
	flex: 0 0 auto;
	min-height: 38px;
	padding: 0 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease;
}

.mim-account :is(.mim-account__chip):hover {
	background: rgba(37, 51, 78, .08);
}

.mim-account :is(.mim-account__chip).is-active {
	background: var(--mim-acc, #25334E);
	color: #fff;
	/* The one shadow on this control, and it is doing a job: it lifts the
	   active segment off the track so the choice is readable at a glance
	   rather than by comparing two shades of navy. */
	box-shadow: 0 1px 3px rgba(27, 35, 51, .28);
}

/*
 * Rounded squares, not circles.
 *
 * A circle crops a square product photo to 78% of its area and takes the crop
 * out of the corners, which is where a cup handle, a lid or the edge of a plate
 * lives. A generous radius keeps the shape soft and keeps the photo.
 *
 * The overlap stays: it is what makes four items read as one order rather than
 * four separate rows.
 */
.mim-account .mim-order__thumbs img {
	width: 46px;
	height: 46px;
	min-width: 46px;
	border-radius: 14px;
	border: 2px solid var(--mim-acc-surface, #fff);
	object-fit: cover;
}

.mim-account .mim-order__thumbs img + img { margin-inline-start: -12px; }

@media (max-width: 480px) {
	.mim-account :is(.mim-account__chip) {
		padding: 0 14px;
		font-size: 13px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   The bottom tab bar must never widen the page
   ═══════════════════════════════════════════════════════════════ */

/*
 * ── Measured, not guessed ──
 *
 * On a 364px screen DevTools reported `nav.mim-account__tabs` at 443.6px. The
 * page therefore scrolled sideways, and every phone got a layout an inch wider
 * than the glass.
 *
 * The first attempt at this told the tabs to shrink — `min-width: 0`, a
 * truncating label — and it did not work, for two reasons worth writing down:
 *
 *   1. It guessed the label's class. The element is `.mim-account__tab-text`,
 *      not a bare `span`, so the truncation never applied to anything.
 *
 *   2. More importantly, it was the wrong *kind* of fix. It depended on the
 *      flex items agreeing to compress, which depends in turn on which of
 *      several `flex` and `width` declarations across two stylesheets wins the
 *      cascade — and `mim-profile.css` loads after this file and has opinions
 *      about the same elements. A fix that only holds while a cascade race goes
 *      one way is not a fix.
 *
 * So the constraint is put where it cannot be argued with: on the bar itself.
 * It is never allowed to be wider than the screen, and if its contents genuinely
 * will not fit, the *bar* scrolls internally rather than the document. That is
 * the important reversal — a bar the thumb can nudge sideways is a normal phone
 * pattern; a page that slides out from under the whole layout is a bug.
 *
 * It also means the next tab added here cannot reintroduce this, which matters:
 * this is the second time the panel has grown a tab and the second time it has
 * widened the page.
 */
@media (max-width: 860px) {
	.mim-account__tabs,
	.mim-account .mim-account__tabs {
		box-sizing: border-box;
		/* The gutter matches `inset-inline` on the fixed positioning above, so
		   the bar sits inside the screen with the same margin it is placed
		   with. `100vw` rather than `100%`, because a fixed element's
		   percentage resolves against a containing block that has already been
		   pushed by the overflow this is meant to prevent. */
		max-width: calc(100vw - (var(--mim-bar-inset, 12px) * 2));
		overflow-x: auto;
		overflow-y: hidden;
		/* Nudged by a thumb, not by a scrollbar taking 8px of a 68px bar. */
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

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

	/*
	 * `width: 100%` from the desktop rule is what makes five items each ask for
	 * the full bar. On the main axis `flex-basis` normally wins, but only while
	 * nothing later in the cascade re-asserts a width — which is exactly the
	 * race described above. Setting it to `auto` here removes the question.
	 */
	.mim-account .mim-account__tab {
		width: auto;
		min-width: 0;
		max-width: 100%;
	}

	.mim-account .mim-account__tab-text {
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/*
	 * The backstop, scoped to pages that actually have the panel on them.
	 *
	 * A blanket `overflow-x: hidden` on body is how a real layout bug gets
	 * hidden for a year instead of fixed; scoped here it only covers the one
	 * component whose overflow has now been dealt with above.
	 */
	body:has(.mim-account__tabs) {
		overflow-x: hidden;
	}
}


/* ═══════════════════════════════════════════════════════════════
   Nothing in the panel may be wider than the panel
   ═══════════════════════════════════════════════════════════════ */

/*
 * ── Why a rule rather than another fix ──
 *
 * This is the third separate thing in this panel found sticking out past the
 * edge of a phone: the header container, the tab bar, and a 340px decorative
 * halo mis-centred under RTL. Each was fixed individually and the next one
 * appeared. Chasing them one at a time is not converging, because the panel is
 * a big surface with a dozen contributors and any of them can do it again.
 *
 * So the containment goes on the containers. Whatever a child does — a fixed
 * width, a negative margin, a transform, a grid track with a large minimum, a
 * future block nobody has written yet — it is clipped at the panel's edge and
 * the document never learns about it.
 *
 * `overflow-x: clip`, not `hidden`, and the difference matters here:
 *
 *   • `hidden` makes the element a scroll container. That silently breaks
 *     `position: sticky` inside it, and on some engines introduces its own
 *     scrollbar — trading a page-level bug for a panel-level one.
 *   • `clip` just clips. No scroll container, no sticky breakage, and it does
 *     not clip the `position: fixed` tab bar, which needs to escape to the
 *     viewport.
 *
 * `min-width: 0` on the flex and grid ancestors is the other half. A flex or
 * grid item defaults to `min-width: auto`, meaning it refuses to shrink below
 * its content — so without this, a wide child pushes its parent wide and the
 * clip above has nothing to bite on because the parent genuinely *is* that
 * wide.
 */
.mim-account,
.mim-account__body,
.mim-account__panel,
.mim-profile {
	min-width: 0;
	max-width: 100%;
}

.mim-account__body,
.mim-account__panel,
.mim-profile {
	overflow-x: clip;
}

/*
 * The decorative layers that are allowed to bleed, kept inside their own card.
 *
 * The rank-up halo is absolutely positioned and much larger than the card it
 * sits behind — that is the effect. It needs a parent that clips it, or it
 * reaches the document.
 */
.mim-rankup,
.mim-profile__cover {
	overflow: clip;
}

@supports not (overflow: clip) {
	/* Safari before 16 and Firefox before 81. `hidden` is the fallback and
	   costs the sticky behaviour noted above, which is the lesser problem. */
	.mim-account__body,
	.mim-account__panel,
	.mim-profile,
	.mim-rankup,
	.mim-profile__cover {
		overflow-x: hidden;
	}
}


/* ── The intake card's tooltip ──────────────────────────────── */

/*
 * Anchored to the card, not to the question mark.
 *
 * `[data-mim-tip]` makes the button itself the containing block, so the bubble
 * is centred on an 18px target that sits hard against the edge of the card.
 * Centring something 260px wide on that will always hang off one side, and no
 * amount of `max-width` fixes it — the geometry is wrong, not the size.
 *
 * Making the button `position: static` hands the containing block to the row,
 * and the bubble is then pinned inside the card's own padding. It cannot
 * escape, whatever the text says or how narrow the screen is.
 */
.mim-intake__row {
	position: relative;
}

.mim-intake__help[data-mim-tip] {
	position: static;
}

.mim-intake__help[data-mim-tip]::after {
	inset-block-start: 44px;
	inset-inline-start: 16px;
	inset-inline-end: 16px;
	width: auto;
	max-width: none;
	transform: translateY(-4px);
}

.mim-intake__help[data-mim-tip]:hover::after,
.mim-intake__help[data-mim-tip]:focus-visible::after {
	transform: translateY(0);
}

/* ═══════════════════════════════════════════════════
   کشف منو
   ═══════════════════════════════════════════════════

   Takes the place of the calorie/caffeine block when that is switched off.
   Same footprint on the page, deliberately — it is not a smaller consolation
   prize, it is the same slot pointing the other way.
*/
.mim-discover {
	padding: 18px;
}

.mim-discover__head {
	margin-bottom: 14px;
}

.mim-discover__sub {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.8;
	opacity: 0.72;
}

.mim-discover__body {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
}

.mim-discover__dial {
	position: relative;
	width: 140px;
	height: 140px;
}

.mim-discover__dial svg {
	width: 100%;
	height: 100%;
	/* Start the arc at the top rather than at three o'clock, and run it the way
	   a Persian reader's eye goes. */
	transform: rotate(-90deg) scaleX(-1);
}

.mim-discover__track,
.mim-discover__fill {
	fill: none;
	stroke-width: 11;
	stroke-linecap: round;
}

.mim-discover__track {
	stroke: currentColor;
	opacity: 0.12;
}

.mim-discover__fill {
	stroke: var(--mim-rank-to, #A8813C);
	transition: stroke-dasharray 0.6s ease;
}

.mim-discover__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 2px;
}

/* The count is the headline. The percentage is downstairs in small type,
   because "۹ طعم" is an achievement and "۹٪" is a mark out of a hundred. */
.mim-discover__center strong {
	font-size: 30px;
	line-height: 1;
	font-weight: 700;
}

.mim-discover__center span {
	font-size: 11.5px;
	opacity: 0.66;
}

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

.mim-discover__label {
	margin: 0 0 8px;
	font-size: 12px;
	opacity: 0.6;
}

.mim-discover__cats {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mim-discover__cat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 999px;
	border: 1px solid currentColor;
	font-size: 12.5px;
	opacity: 0.38;
	min-width: 0;
}

.mim-discover__cat.is-on {
	opacity: 1;
	border-color: transparent;
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.mim-discover__cat-count {
	font-size: 11px;
	opacity: 0.7;
}

.mim-discover__next {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
}

.mim-discover__foot {
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	font-size: 11.5px;
	opacity: 0.55;
	text-align: center;
}

@media (max-width: 620px) {
	.mim-discover__body {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 14px;
	}

	.mim-discover__side {
		width: 100%;
	}

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

	.mim-discover__next {
		text-align: center;
	}
}

/* ═══════════════════════════════════════════════════════════
   Colours Elementor has no business setting

   The page builder paints every `a` and every `button` on the page from the
   kit's global palette. Inside this panel that produced pink page numbers and
   pink tab labels — controls the panel styles itself, coloured by a rule that
   has never seen them.

   Each of these states its own colour. Nothing here uses `inherit`, because
   inherit walks up into whatever the builder set on the ancestor and that is
   the rule being escaped.
   ═══════════════════════════════════════════════════════════ */

.mim-order-pager__btn,
.mim-order-pager__btn:hover,
.mim-order-pager__btn:focus,
.mim-order-pager__btn:visited {
	color: var(--mim-acc, #25334E);
	text-decoration: none;
	box-shadow: none;
}

/* The current page is filled, so its label has to be the colour that reads on
   the fill rather than the one that reads on the card. */
.mim-account .mim-order-pager__btn.is-active,
.mim-account .mim-order-pager__btn.is-active:hover,
.mim-account .mim-order-pager__btn.is-active:focus {
	color: #FFF;
}

.mim-account .mim-account__tab,
.mim-account .mim-account__tab:hover,
.mim-account .mim-account__tab:focus,
.mim-account .mim-account__tab:visited {
	color: var(--mim-acc-text, #25334E);
	text-decoration: none;
}

.mim-account .mim-account__tab.is-active,
.mim-account .mim-account__tab.is-active:hover,
.mim-account .mim-account__tab.is-active:focus {
	color: #FFF;
}

.mim-account .mim-account__tab-text,
.mim-account .mim-account__tab-glyph {
	color: currentColor;
	fill: currentColor;
}