/* ============================================================================
   Transporter off-canvas mini-cart  ·  premium / Mobbin-grade rebuild
   Drop-in replacement for the theme's trc-minicart.css (same enqueue handle).

   Brand tokens (inherited from the global theme; safe fallbacks below):
     --tr-font-ka       body / Georgian text   (FiraGo — 400/500/600 ONLY)
     --tr-font-display  headings + prices       (Bebas / Gilroy Geo)
     --tr-container     page max width
   Colors: red #C62D3C (hover #A52330) · ink #1a1a1a · muted #7a7a7a
           hairlines #eee / #f2f2f2 / #f0f0f0 · surfaces #fff / #fafafa
   ========================================================================== */

/* Local token fallbacks — only used if the theme hasn't defined them. */
.trc-mc,
.trc-mc-overlay {
	--trc-red: #C62D3C;
	--trc-red-dark: #A52330;
	--trc-ink: #1a1a1a;
	--trc-muted: #7a7a7a;
	--trc-line: #eee;
	--trc-line-soft: #f2f2f2;
	--trc-surface: #fafafa;
	--trc-body: var(--tr-font-ka, "FiraGo", "Noto Sans Georgian", sans-serif);
	--trc-display: var(--tr-font-display, Bebas, "Gilroy Geo", sans-serif);
}

/* Scroll lock while the drawer is open (preserved). */
html.trc-mc-lock,
html.trc-mc-lock body { overflow: hidden !important; }

/* ── Overlay ──────────────────────────────────────────────────────────── */
.trc-mc-overlay {
	position: fixed; inset: 0;
	background: rgba(17, 19, 21, .42);
	opacity: 0; visibility: hidden;
	transition: opacity .35s ease, visibility .35s ease;
	z-index: 100000;
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
}
.trc-mc-overlay.is-open { opacity: 1; visibility: visible; }

/* ── Drawer shell ─────────────────────────────────────────────────────── */
.trc-mc {
	position: fixed; top: 0; right: 0; height: 100%;
	width: 408px; max-width: 92vw;
	background: #fff;
	z-index: 100001;
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform .46s cubic-bezier(.22, 1, .36, 1);
	box-shadow: -18px 0 48px rgba(15, 18, 20, .16);
	font-family: var(--trc-body);
	color: var(--trc-ink);
	-webkit-font-smoothing: antialiased;
}
.trc-mc.is-open { transform: translateX(0); }
.trc-mc *,
.trc-mc *::before,
.trc-mc *::after { box-sizing: border-box; }

/* ── Header ───────────────────────────────────────────────────────────── */
.trc-mc__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px 24px;
	border-bottom: 1px solid var(--trc-line);
	flex: 0 0 auto;
}
.trc-mc__title {
	font-family: var(--trc-body);
	font-size: 16px; font-weight: 600; letter-spacing: .1px;
	color: var(--trc-ink);
	display: inline-flex; align-items: baseline; gap: 7px;
}
.trc-mc__count { color: var(--trc-muted); font-weight: 500; font-size: 14px; }
.trc-mc__close {
	width: 34px; height: 34px; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: transparent; border-radius: 9px;
	color: #9a9a9a; cursor: pointer;
	transition: background .18s ease, color .18s ease;
	-webkit-appearance: none;
}
.trc-mc__close:hover { background: #f5f5f5; color: var(--trc-ink); }
.trc-mc__close:active { background: #ededed; }

/* ── Scrollable body ──────────────────────────────────────────────────── */
.trc-mc__body {
	flex: 1 1 auto; overflow-y: auto;
	padding: 6px 24px 10px;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.trc-mc__items { display: flex; flex-direction: column; }

/* ── Item row ─────────────────────────────────────────────────────────── */
.trc-mc__item {
	display: grid;
	grid-template-columns: 64px 1fr;
	column-gap: 14px; align-items: start;
	padding: 18px 0;
	border-bottom: 1px solid var(--trc-line-soft);
	/* Transform-only entrance: visibility never depends on the frame landing. */
	animation: trc-mc-in .42s cubic-bezier(.22, 1, .36, 1) backwards;
	animation-delay: var(--d, 0ms);
}
.trc-mc__item:last-child { border-bottom: 0; }
.trc-mc__item.is-removing {
	opacity: 0; transform: translateX(14px);
	transition: opacity .28s ease, transform .28s ease;
	pointer-events: none;
}
@keyframes trc-mc-in { from { transform: translateY(10px); } }

.trc-mc__thumb {
	display: block; width: 64px; height: 64px;
	border: 1px solid var(--trc-line);
	border-radius: 9px; background: var(--trc-surface);
	overflow: hidden; flex: 0 0 auto;
}
.trc-mc__thumb img {
	width: 100%; height: 100%;
	object-fit: contain;          /* photos carry baked-in white bg — never cover */
	padding: 6px; box-sizing: border-box;
	display: block;
}

.trc-mc__info { min-width: 0; display: flex; flex-direction: column; }

.trc-mc__topline {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 10px;
}
.trc-mc__name {
	font-family: var(--trc-body);
	font-size: 14px; font-weight: 400;   /* REGULAR — never bold on FiraGo */
	line-height: 1.38; color: var(--trc-ink);
	text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
	-webkit-box-orient: vertical; overflow: hidden;
	transition: color .18s ease;
}
.trc-mc__name:hover { color: var(--trc-red); }

.trc-mc__rm {
	width: 24px; height: 24px; flex: 0 0 auto; margin: -2px -4px 0 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: transparent; border-radius: 6px;
	color: #c2c2c2; cursor: pointer;
	transition: background .16s ease, color .16s ease;
	-webkit-appearance: none;
}
.trc-mc__rm:hover { background: #faf0f1; color: var(--trc-red); }

.trc-mc__unit {
	font-family: var(--trc-body);
	font-size: 12.5px; font-weight: 500; color: var(--trc-muted);
	margin-top: 3px;
}

.trc-mc__ctl {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; margin-top: 12px;
}

/* Minimal quantity stepper */
.trc-mc__qty {
	display: inline-flex; align-items: center;
	border: 1px solid #e6e6e6; border-radius: 8px;
	height: 34px; overflow: hidden; background: #fff;
	user-select: none;
}
.trc-mc__qbtn {
	width: 32px; height: 100%; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: #fff; color: var(--trc-ink);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	-webkit-appearance: none;
}
.trc-mc__qbtn:hover:not(:disabled) { background: #f5f5f5; }
.trc-mc__qbtn:active:not(:disabled) { background: #ededed; }
.trc-mc__qbtn:disabled { color: #d2d2d2; cursor: not-allowed; }
.trc-mc__qbtn svg { display: block; }
.trc-mc__qval {
	min-width: 34px; text-align: center;
	font-family: var(--trc-body);
	font-size: 14px; font-weight: 600; color: var(--trc-ink);
	line-height: 1;
	border-left: 1px solid #eee; border-right: 1px solid #eee;
	align-self: stretch; display: inline-flex; align-items: center; justify-content: center;
}

.trc-mc__line {
	font-family: var(--trc-display);
	font-size: 17px; font-weight: 400; letter-spacing: .4px;
	color: var(--trc-ink); white-space: nowrap;
	transition: opacity .2s ease;
}
.trc-mc__line.is-pending { opacity: .38; }

/* ── Empty state ──────────────────────────────────────────────────────── */
.trc-mc__empty {
	display: flex; flex-direction: column; align-items: center;
	text-align: center; padding: 60px 20px 48px; gap: 6px;
}
.trc-mc__empty-ico {
	width: 58px; height: 58px; margin-bottom: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--trc-surface);
	color: #c8c8c8;
}
.trc-mc__empty-title {
	font-family: var(--trc-body);
	font-size: 15px; font-weight: 600; color: var(--trc-ink);
}
.trc-mc__empty-sub {
	font-family: var(--trc-body);
	font-size: 13px; font-weight: 400; color: var(--trc-muted);
	margin-bottom: 18px;
}
.trc-mc__empty-btn {
	font-family: var(--trc-body);
	font-size: 13.5px; font-weight: 600; color: var(--trc-ink);
	background: transparent; border: 1.5px solid #e2e2e2;
	border-radius: 8px; padding: 11px 22px; min-height: 44px;
	cursor: pointer; transition: border-color .18s ease, color .18s ease;
	-webkit-appearance: none;
}
.trc-mc__empty-btn:hover { border-color: var(--trc-red); color: var(--trc-red); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.trc-mc__foot {
	border-top: 1px solid var(--trc-line);
	padding: 18px 24px 22px;
	background: #fff; flex: 0 0 auto;
}
.trc-mc.is-empty .trc-mc__foot { display: none; }

.trc-mc__subtotal {
	display: flex; align-items: baseline; justify-content: space-between;
	margin-bottom: 16px;
}
.trc-mc__subtotal-label {
	font-family: var(--trc-body);
	font-size: 13.5px; font-weight: 500; color: var(--trc-muted);
}
.trc-mc__sub {
	font-family: var(--trc-display);
	font-size: 26px; font-weight: 400; letter-spacing: .5px;
	color: var(--trc-red); line-height: 1;
}

.trc-mc__btn {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 48px; border-radius: 8px;
	font-family: var(--trc-body);
	font-size: 14px; font-weight: 600; letter-spacing: .2px;
	text-decoration: none; cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	box-sizing: border-box; -webkit-appearance: none;
}
.trc-mc__btn + .trc-mc__btn { margin-top: 10px; }
.trc-mc__btn--outline { border: 1.5px solid #e2e2e2; background: #fff; color: var(--trc-ink); }
.trc-mc__btn--outline:hover { border-color: var(--trc-red); color: var(--trc-red); }
.trc-mc__btn--red { border: 0; background: var(--trc-red); color: #fff; }
.trc-mc__btn--red:hover { background: var(--trc-red-dark); color: #fff; }

/* ── Phones: the drawer becomes a bottom sheet ─────────────────────────────
   Opened through the shared TRCSheet controller (transporter-core), which
   supplies the scrim, the drag handle (.trc-sheet__handle), swipe-to-dismiss
   and the z-tier; tokens come from trc-sheet.css with safe fallbacks here. */
@media (max-width: 768px) {
	.trc-mc {
		top: auto; left: 0; right: 0; bottom: 0;
		width: 100%; max-width: 100%;
		height: auto;
		max-height: 88vh;
		max-height: calc(100dvh - 40px);
		border-radius: var(--trc-sheet-radius, 22px) var(--trc-sheet-radius, 22px) 0 0;
		box-shadow: none;
		padding-bottom: var(--trc-safe-b, env(safe-area-inset-bottom, 0px));
		z-index: var(--trc-z-sheet, 100050);
		transform: translate3d(0, 100%, 0);
		visibility: hidden;
		transition: transform var(--trc-dur-sheet, .5s) var(--trc-ease-sheet, cubic-bezier(.32, .72, 0, 1)), visibility 0s linear var(--trc-dur-sheet, .5s);
	}
	.trc-mc.is-open {
		transform: translate3d(0, 0, 0);
		visibility: visible;
		box-shadow: 0 -10px 40px rgba(0, 0, 0, .16);
		transition: transform var(--trc-dur-sheet, .5s) var(--trc-ease-sheet, cubic-bezier(.32, .72, 0, 1)), visibility 0s;
	}
	/* The shared sheet scrim replaces the drawer's own overlay on phones. */
	.trc-mc-overlay { z-index: var(--trc-z-scrim, 100040); }

	.trc-mc__head { padding: 2px 16px 14px 20px; border-bottom: 1px solid var(--trc-line); touch-action: none; }
	.trc-mc__title { font-size: 17px; }
	.trc-mc__close { background: #f2f2f4; border-radius: 50%; color: var(--trc-ink); }
	.trc-mc__body { padding: 2px 20px 8px; }
	.trc-mc__item { padding: 16px 0; }
	.trc-mc__foot { padding: 14px 20px 16px; }
	.trc-mc__empty { padding: 36px 20px 30px; }
	/* Checkout + view-cart side by side: one thumb-reach row, primary on the right. */
	.trc-mc__foot { display: grid; grid-template-columns: 1fr 1.35fr; column-gap: 10px; }
	.trc-mc__subtotal { grid-column: 1 / -1; margin-bottom: 14px; }
	.trc-mc__btn + .trc-mc__btn { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.trc-mc { transition: none; }
	.trc-mc-overlay { transition: none; }
	.trc-mc__item { animation: none; }
	.trc-mc__item.is-removing { transition: none; }
}