/* ============================================================================
   trc-tabbar.css — phone tab bar + catalog sheet (transporter-core)

   Depends on trc-sheet.css for the z-index / motion / geometry tokens.
   Phones only (<=768px); nothing here renders on tablets or desktop.
   ========================================================================== */

.trc-tabbar { display: none; }

@media (max-width: 768px) {

	/* ══ Tab bar shell — frosted white glass ══════════════════════════════════ */
	.trc-tabbar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--trc-z-tabbar, 9990);
		padding-bottom: var(--trc-safe-b, 0px);
		background: rgba(255, 255, 255, .97);
		border-top: 1px solid rgba(17, 17, 17, .07);
		box-shadow: 0 -6px 24px rgba(0, 0, 0, .06);
		transform: translate3d(0, 0, 0);
		transition: transform .44s var(--trc-ease-sheet, cubic-bezier(.32, .72, 0, 1)), box-shadow .3s ease;
		font-family: var(--tr-font-ka, "FiraGO", "Noto Sans Georgian", sans-serif);
		-webkit-font-smoothing: antialiased;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		user-select: none;
	}
	@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
		.trc-tabbar {
			background: rgba(255, 255, 255, .8);
			-webkit-backdrop-filter: saturate(180%) blur(20px);
			backdrop-filter: saturate(180%) blur(20px);
		}
	}

	/* Yield the bottom slot: to a page CTA bar (transport single) and to the
	   on-screen keyboard. Never two bottom bars at once. */
	html.trc-cta-on .trc-tabbar,
	html.trc-kb .trc-tabbar {
		transform: translate3d(0, calc(100% + 12px), 0);
		box-shadow: none;
	}
	html.trc-kb .trc-tabbar { transition-duration: .2s; }

	.trc-tabbar .trc-tabbar__inner {
		position: relative;
		display: flex;
		align-items: stretch;
		height: var(--trc-tabbar-h, 62px);
		max-width: 560px;
		margin: 0 auto;
	}

	/* ── Sliding active indicator (one element, springs between tabs) ── */
	.trc-tabbar .trc-tabbar__ink {
		position: absolute;
		top: 0;
		left: 0;
		width: 20%;
		height: 3px;
		transform: translate3d(calc(var(--i, 0) * 100%), 0, 0);
		transition: transform .5s var(--trc-ease-spring, cubic-bezier(.34, 1.56, .64, 1)), opacity .25s ease;
		pointer-events: none;
	}
	.trc-tabbar .trc-tabbar__ink::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 22px;
		height: 3px;
		margin-left: -11px;
		border-radius: 0 0 3px 3px;
		background: #C62D3C;
	}
	.trc-tabbar .trc-tabbar__ink.is-hidden { opacity: 0; }

	/* ── Tab ── */
	.trc-tabbar .trc-tab {
		position: relative;
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		margin: 0;
		padding: 5px 0 3px;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: #8a8a8f;
		font: inherit;
		line-height: 1;
		text-decoration: none;
		text-transform: none;
		letter-spacing: 0;
		cursor: pointer;
		outline: none;
		-webkit-appearance: none;
		appearance: none;
		-webkit-tap-highlight-color: transparent;
		transition: color .25s ease;
	}
	.trc-tabbar .trc-tab:hover,
	.trc-tabbar .trc-tab:focus { color: #8a8a8f; background: none; }
	.trc-tabbar .trc-tab.is-active,
	.trc-tabbar .trc-tab.is-active:hover,
	.trc-tabbar .trc-tab.is-active:focus { color: #111; }
	.trc-tabbar .trc-tab:focus-visible .trc-tab__icon {
		outline: 2px solid #C62D3C;
		outline-offset: 5px;
		border-radius: 8px;
	}

	/* Icon: an outline glyph and its filled twin, cross-faded on activation. */
	.trc-tabbar .trc-tab__icon {
		position: relative;
		display: block;
		width: 26px;
		height: 26px;
		flex: 0 0 auto;
		transition: transform .18s ease;
	}
	.trc-tabbar .trc-tab__svg {
		position: absolute;
		top: 1px;
		left: 1px;
		display: block;
		width: 24px;
		height: 24px;
		max-width: none;
		transition: opacity .22s ease, transform .4s var(--trc-ease-spring, cubic-bezier(.34, 1.56, .64, 1));
	}
	.trc-tabbar .trc-tab__svg--fill {
		opacity: 0;
		transform: scale(.55);
		color: #C62D3C;
	}
	.trc-tabbar .trc-tab.is-active .trc-tab__svg--line { opacity: 0; transform: scale(.8); }
	.trc-tabbar .trc-tab.is-active .trc-tab__svg--fill { opacity: 1; transform: scale(1); }

	/* Tap micro-interaction: press-in, then a springy pop on release. */
	.trc-tabbar .trc-tab:active .trc-tab__icon { transform: scale(.84); transition-duration: .08s; }
	.trc-tabbar .trc-tab.is-pop .trc-tab__icon { animation: trc-tab-pop .5s var(--trc-ease-spring, cubic-bezier(.34, 1.56, .64, 1)); }
	@keyframes trc-tab-pop {
		0%   { transform: scale(.82); }
		55%  { transform: scale(1.14); }
		100% { transform: scale(1); }
	}

	.trc-tabbar .trc-tab__label {
		display: block;
		max-width: 100%;
		padding: 0 2px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 10.5px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: .1px;
	}
	.trc-tabbar .trc-tab.is-active .trc-tab__label { font-weight: 600; }

	/* ── Count badges (wishlist + cart; cart markup is shared with the header
	      so WooCommerce fragments replace it in place) ── */
	.trc-tabbar .trc-tab__badge,
	.trc-tabbar .trc-hdr__cart-count {
		position: absolute;
		top: -5px;
		left: 15px;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 9px;
		background: #C62D3C;
		color: #fff;
		font-family: var(--tr-font-ka, "FiraGO", sans-serif);
		font-size: 10.5px;
		font-weight: 600;
		line-height: 18px;
		text-align: center;
		box-shadow: 0 0 0 2px #fff;
		transform-origin: 30% 70%;
		transition: transform .35s var(--trc-ease-spring, cubic-bezier(.34, 1.56, .64, 1)), opacity .2s ease;
		pointer-events: none;
		box-sizing: border-box;
	}
	.trc-tabbar .trc-tab__badge.is-empty,
	.trc-tabbar .trc-hdr__cart-count.is-empty { transform: scale(0); opacity: 0; }
	.trc-tabbar .is-bump { animation: trc-badge-bump .55s var(--trc-ease-spring, cubic-bezier(.34, 1.56, .64, 1)); }
	@keyframes trc-badge-bump {
		0%   { transform: scale(1); }
		35%  { transform: scale(1.45); }
		100% { transform: scale(1); }
	}

	/* ══ Page clearance — the fixed bar must never hide the page's end ══════════
	   Base: pad the body by the bar's full height (incl. the home-indicator inset).
	   Where the site footer exists, move that clearance INTO the footer instead,
	   so its black background runs under the translucent bar (no light strip). */
	body.trc-has-tabbar { padding-bottom: var(--trc-tabbar-space, 62px) !important; }
	@supports selector(:has(a)) {
		body.trc-has-tabbar:has(#tr-footer) { padding-bottom: 0 !important; }
		body.trc-has-tabbar #tr-footer::after {
			content: "";
			display: block;
			height: var(--trc-tabbar-space, 62px);
		}
	}

	/* The transport CTA bar takes the bottom slot on scroll — give it the same
	   home-indicator clearance as the tab bar it replaces. */
	body .kw-bottom-bar { padding-bottom: var(--trc-safe-b, 0px); }

	/* ══ Catalog sheet ═══════════════════════════════════════════════════════ */
	.trc-sheet.trc-catalog {
		height: 86vh;
		height: 86dvh;
	}
	.trc-sheet.trc-catalog .trc-sheet__title { font-size: 26px; }

	/* Category tabs — horizontally scrolling pills, pinned under the title. */
	.trc-catalog .trc-catalog__tabs {
		flex: 0 0 auto;
		display: flex;
		gap: 8px;
		margin: 0;
		padding: 2px 20px 14px;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-padding: 0 20px;
		border-bottom: 1px solid #f0f0f2;
	}
	.trc-catalog .trc-catalog__tabs::-webkit-scrollbar { display: none; }
	.trc-catalog .trc-catalog__tab {
		flex: 0 0 auto;
		height: 36px;
		margin: 0;
		padding: 0 16px;
		border: 0;
		border-radius: 999px;
		background: #f2f2f4;
		box-shadow: none;
		color: #3a3a3c;
		font-family: var(--tr-font-ka, "FiraGO", sans-serif);
		font-size: 13.5px;
		font-weight: 500;
		line-height: 36px;
		letter-spacing: 0;
		text-transform: none;
		white-space: nowrap;
		cursor: pointer;
		-webkit-appearance: none;
		-webkit-tap-highlight-color: transparent;
		transition: background .25s ease, color .25s ease, transform .15s ease;
	}
	.trc-catalog .trc-catalog__tab:active { transform: scale(.95); }
	.trc-catalog .trc-catalog__tab.is-active { background: #111; color: #fff; }

	.trc-catalog .trc-catalog__body { padding: 16px 20px 28px; }

	/* Sale entry — the header's dark "Sales" pill, as a card. */
	.trc-catalog a.trc-catalog__sale {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0 0 18px;
		padding: 12px 14px 12px 12px;
		border-radius: 14px;
		background: #1a1a1a;
		color: #fff;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: transform .15s ease;
	}
	.trc-catalog a.trc-catalog__sale:hover { color: #fff; }
	.trc-catalog a.trc-catalog__sale:active { transform: scale(.98); }
	.trc-catalog .trc-catalog__sale-badge {
		flex: 0 0 auto;
		width: 36px;
		height: 36px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #C62D3C;
		color: #fff;
		font-family: var(--tr-font-display, Bebas, "Gilroy Geo", sans-serif);
		font-size: 19px;
		line-height: 1;
	}
	.trc-catalog .trc-catalog__sale-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
	.trc-catalog .trc-catalog__sale-title {
		font-family: var(--tr-font-display, Bebas, "Gilroy Geo", sans-serif);
		font-size: 20px;
		line-height: 1;
		letter-spacing: .4px;
	}
	.trc-catalog .trc-catalog__sale-sub { font-size: 12px; line-height: 1.2; color: rgba(255, 255, 255, .62); }
	.trc-catalog .trc-catalog__sale svg { flex: 0 0 auto; width: 18px; height: 18px; color: rgba(255, 255, 255, .5); }

	/* Panels */
	.trc-catalog .trc-catalog__panel { animation: trc-cat-in .4s var(--trc-ease-sheet, cubic-bezier(.32, .72, 0, 1)); }
	.trc-catalog .trc-catalog__panel[hidden] { display: none; }
	@keyframes trc-cat-in {
		from { opacity: 0; transform: translate3d(0, 10px, 0); }
		to   { opacity: 1; transform: none; }
	}

	.trc-catalog .trc-catalog__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0 0 12px;
	}
	.trc-catalog .trc-catalog__meta { font-size: 12.5px; color: #8a8a8f; }
	.trc-catalog a.trc-catalog__all,
	.trc-catalog a.trc-catalog__all:hover {
		display: inline-flex;
		align-items: center;
		gap: 1px;
		color: #C62D3C;
		font-size: 13px;
		font-weight: 500;
		text-decoration: none;
	}
	.trc-catalog .trc-catalog__all svg { width: 16px; height: 16px; }

	/* Category cards — 2-up grid, soft grey tiles, product art multiplied in. */
	.trc-catalog .trc-catalog__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.trc-catalog a.trc-catalog__card {
		display: flex;
		flex-direction: column;
		min-width: 0;
		padding: 10px 10px 12px;
		border-radius: 14px;
		background: #f5f5f7;
		color: #111;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: transform .15s ease, background .2s ease;
		animation: trc-cat-card .5s var(--trc-ease-sheet, cubic-bezier(.32, .72, 0, 1)) backwards;
		animation-delay: var(--d, 0ms);
	}
	.trc-catalog a.trc-catalog__card:hover { color: #111; }
	.trc-catalog a.trc-catalog__card:active { transform: scale(.97); background: #eeeef0; }
	@keyframes trc-cat-card {
		from { opacity: 0; transform: translate3d(0, 12px, 0); }
	}
	.trc-catalog .trc-catalog__media {
		display: block;
		aspect-ratio: 4 / 3;
		margin: 0 0 8px;
		border-radius: 10px;
		overflow: hidden;
	}
	.trc-catalog .trc-catalog__media img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: contain;
		mix-blend-mode: multiply;
		opacity: 0;
		transition: opacity .35s ease;
	}
	.trc-catalog .trc-catalog__media img.is-loaded { opacity: 1; }
	.trc-catalog .trc-catalog__name {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-family: var(--tr-font-display, Bebas, "Gilroy Geo", sans-serif);
		font-size: 15px;
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: .2px;
		color: #111;
	}
	.trc-catalog .trc-catalog__count { margin-top: 3px; font-size: 11.5px; line-height: 1.2; color: #8a8a8f; }

	/* Brands — 3-up logo tiles. */
	.trc-catalog .trc-catalog__brands {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}
	.trc-catalog a.trc-catalog__brand {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 7px;
		min-width: 0;
		padding: 12px 8px 10px;
		border-radius: 14px;
		background: #f5f5f7;
		color: #111;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: transform .15s ease;
		animation: trc-cat-card .5s var(--trc-ease-sheet, cubic-bezier(.32, .72, 0, 1)) backwards;
		animation-delay: var(--d, 0ms);
	}
	.trc-catalog a.trc-catalog__brand:hover { color: #111; }
	.trc-catalog a.trc-catalog__brand:active { transform: scale(.96); }
	.trc-catalog .trc-catalog__brand-logo {
		width: 100%;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.trc-catalog .trc-catalog__brand-logo img {
		width: 100%;
		height: 100%;
		max-width: 92%;
		max-height: 100%;
		object-fit: contain;
		mix-blend-mode: multiply;
		opacity: 0;
		transition: opacity .35s ease;
	}
	.trc-catalog .trc-catalog__brand-logo img.is-loaded { opacity: 1; }
	.trc-catalog .trc-catalog__brand-initial {
		font-family: var(--tr-font-display, Bebas, "Gilroy Geo", sans-serif);
		font-size: 24px;
		line-height: 1;
		color: #b0b0b5;
	}
	.trc-catalog .trc-catalog__brand-name {
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 11.5px;
		line-height: 1.2;
		color: #3a3a3c;
	}

	/* "More" — grouped page links + contact rows. */
	.trc-catalog .trc-catalog__links {
		display: flex;
		flex-direction: column;
		margin: 0 0 16px;
		border-radius: 14px;
		background: #f5f5f7;
		overflow: hidden;
	}
	.trc-catalog a.trc-catalog__link,
	.trc-catalog a.trc-catalog__link:hover {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		min-height: 52px;
		padding: 0 14px 0 16px;
		border-bottom: 1px solid #ebebee;
		color: #111;
		font-size: 15px;
		line-height: 1.3;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.trc-catalog a.trc-catalog__link:last-child { border-bottom: 0; }
	.trc-catalog a.trc-catalog__link:active { background: #ececef; }
	.trc-catalog .trc-catalog__link svg { flex: 0 0 auto; color: #b0b0b5; }

	.trc-catalog .trc-catalog__contact { display: grid; gap: 10px; }
	.trc-catalog a.trc-catalog__contact-row,
	.trc-catalog a.trc-catalog__contact-row:hover {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
		border: 1px solid #ededf0;
		border-radius: 14px;
		color: #111;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.trc-catalog a.trc-catalog__contact-row:active { background: #fafafa; }
	.trc-catalog .trc-catalog__contact-ic {
		flex: 0 0 auto;
		width: 38px;
		height: 38px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #faf0f1;
		color: #C62D3C;
	}
	.trc-catalog .trc-catalog__contact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
	.trc-catalog .trc-catalog__contact-label { font-size: 11.5px; line-height: 1.2; color: #8a8a8f; }
	.trc-catalog .trc-catalog__contact-value { font-size: 15px; font-weight: 500; line-height: 1.25; }
}

@media (prefers-reduced-motion: reduce) {
	.trc-tabbar,
	.trc-tabbar .trc-tabbar__ink,
	.trc-tabbar .trc-tab__svg { transition-duration: .01s !important; }
	.trc-tabbar .trc-tab.is-pop .trc-tab__icon,
	.trc-tabbar .is-bump,
	.trc-catalog .trc-catalog__panel,
	.trc-catalog a.trc-catalog__card,
	.trc-catalog a.trc-catalog__brand { animation: none !important; }
}