/*
 * TRC_Header — the persistent site header (owned by transporter-core).
 *
 * Matches production (transportershop.ge): row 1 black (#000) with a white
 * search box, white logo, wishlist + cart + red menu button; row 2 dark (#222)
 * with a red Sale pill, category nav (dropdowns) and the phone number.
 *
 * Everything is scoped to `.tr-header.trc-hdr` (higher specificity than the
 * theme's legacy `.tr-header`) so it wins regardless of stylesheet order.
 *
 * Breakpoint lg = 1025px, matching the plugin's own menu CSS.
 */

:root {
	--trc-hdr-1: 78px;   /* row 1 height */
	--trc-hdr-2: 56px;   /* row 2 height */
	--trc-hdr-accent: #C62D3C;
}
/* --tr-header-h drives the mega panel/overlay offset. The theme's header.css
   also declares it (same specificity, loaded later) as a fallback, so use
   :root:root here to keep transporter-core authoritative without editing the
   theme. Below lg the mega button is hidden, so the value only matters >=1025. */
:root:root { --tr-header-h: 78px; } /* row 2 hidden below lg */
@media (min-width: 1025px) {
	:root:root { --tr-header-h: 134px; } /* row 1 (78) + row 2 (56) */
}

/* ── Shell ── */
.tr-header.trc-hdr {
	position: sticky;
	top: 0;
	z-index: 9997;
	background: #000;
	color: #fff;
	font-family: "FiraGo", "Noto Sans Georgian", sans-serif;
	box-shadow: none;
}
.tr-header.trc-hdr.is-stuck {
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}
/* On scroll (>8px, JS toggles .is-stuck), collapse to ONLY the top bar: the
   category/Sale nav row scrolls out of view, leaving logo · search · icons ·
   menu button pinned. Also drop the mega-panel offset var to the row-1 height so
   a menu opened while scrolled still seats flush under the compact header. */
.tr-header.trc-hdr.is-stuck .trc-hdr__row--nav { display: none; }
.tr-header.trc-hdr.is-stuck { --tr-header-h: var(--trc-hdr-1, 78px); }

.tr-header.trc-hdr *,
.tr-header.trc-hdr *::before,
.tr-header.trc-hdr *::after { box-sizing: border-box; }

.tr-header.trc-hdr .trc-hdr__row { width: 100%; }
.tr-header.trc-hdr .trc-hdr__row--main { background: #000; }
.tr-header.trc-hdr .trc-hdr__row--nav  { background: #222; border-top: 1px solid rgba(255, 255, 255, 0.06); }

.tr-header.trc-hdr .trc-hdr__inner {
	max-width: var(--tr-container, 1560px);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 22px;
}
.tr-header.trc-hdr .trc-hdr__row--main .trc-hdr__inner { height: var(--trc-hdr-1); }
.tr-header.trc-hdr .trc-hdr__row--nav  .trc-hdr__inner { height: var(--trc-hdr-2); gap: 4px; }

/* ── Logo ── */
.tr-header.trc-hdr .trc-hdr__logo { flex: 0 0 auto; display: flex; align-items: center; }
.tr-header.trc-hdr .trc-hdr__logo-link { display: inline-flex; align-items: center; line-height: 0; }
/* The logo asset (b-2-hover.png) is a very wide wordmark, ~330x29 natively.
   Size it by WIDTH with height:auto so its aspect ratio is preserved (setting an
   explicit height AND a smaller max-width stretches it vertically). 240px wide
   matches production (img renders 240x21, undistorted and crisp) and sits
   balanced in the row. */
.tr-header.trc-hdr .trc-hdr__logo-img,
.tr-header.trc-hdr .trc-hdr__logo img { width: 240px; height: auto; max-width: 100%; display: block; }

/* ── Search (white box, centre) ── */
.tr-header.trc-hdr .trc-hdr__search {
	flex: 1 1 auto;
	max-width: 1080px;
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 26px;
	overflow: hidden;
	height: 46px;
}
.tr-header.trc-hdr .trc-hdr__search-input {
	flex: 1 1 auto;
	height: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 0 8px 0 20px;
	font-size: 14px;
	color: #222;
	font-family: inherit;
}
.tr-header.trc-hdr .trc-hdr__search-input::placeholder { color: #9a9a9a; }
.tr-header.trc-hdr .trc-hdr__search-btn {
	flex: 0 0 auto;
	width: 48px;
	height: 100%;
	border: 0;
	background: transparent;
	color: #333;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s ease;
}
.tr-header.trc-hdr .trc-hdr__search-btn:hover { color: var(--trc-hdr-accent); }

/* ── Actions (wishlist / cart / menu) ── */
.tr-header.trc-hdr .trc-hdr__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 28px; }

.tr-header.trc-hdr .trc-hdr__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
	transition: color 0.15s ease;
}
.tr-header.trc-hdr .trc-hdr__action:hover { color: var(--trc-hdr-accent); }

.tr-header.trc-hdr .trc-hdr__count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--trc-hdr-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	font-family: "FiraGo", sans-serif;
}
.tr-header.trc-hdr .trc-hdr__count.is-empty { background: #555; }

/* The red slide-out "მენიუ" button lives in core's mega-menu.css; just seat it. */
.tr-header.trc-hdr .trc-hdr__menu-btn { display: inline-flex; align-items: center; }
.tr-header.trc-hdr .trc-hdr__menu-btn .tr-mega-wrap { display: inline-flex; }
/* Target-design geometry: standard rectangular button (lightly rounded) + wider.
   Duplicated here (matching mega-menu.css) on purpose: mega-menu.css is
   TRC_VERSION-versioned and would serve a stale ?ver=, whereas trc-header.css is
   filemtime-versioned and busts cache reliably. Specificity 0,3,0 wins over
   mega-menu.css's 0,1,0 base rule. */
.tr-header.trc-hdr .trc-hdr__menu-btn .tr-menu-btn {
	width: 140px;
	height: 44px;
	border-radius: 50px !important;
	padding: 0 20px;
}

/* ── Row 2 : Sale + nav + phone ── */
.tr-header.trc-hdr .trc-hdr__sale {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 40px;
	padding: 0 20px 0 6px;
	border-radius: 50px;
	background: #2a2a2a;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
	margin-right: 10px;
	/* Transparent 1px border reserves the space (box-sizing: border-box), so the
	   red hover border below appears with zero layout shift. */
	border: 1px solid transparent;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.tr-header.trc-hdr .trc-hdr__sale:hover { background: #3a3a3a; border-color: #e3000f; }
/* Kill the global red focus ring (base.css `:where(a…):focus-visible { outline:
   2px solid var(--tr-brand) }`) on the Sales pill — it read as an unwanted red
   border. The hover/active background change is the affordance instead. */
.tr-header.trc-hdr .trc-hdr__sale:focus,
.tr-header.trc-hdr .trc-hdr__sale:focus-visible,
.tr-header.trc-hdr .trc-hdr__sale:active { outline: none; box-shadow: none; }
/* The red circular "%" chip that leads the dark Sales pill. */
.tr-header.trc-hdr .trc-hdr__sale-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--trc-hdr-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	flex: 0 0 auto;
}

.tr-header.trc-hdr .trc-hdr__nav { flex: 1 1 auto; min-width: 0; }
.tr-header.trc-hdr .trc-hdr__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}
/* The full-width dropdown panel positions against the whole nav row, so the row
   is the containing block and the item itself must be static. */
.tr-header.trc-hdr .trc-hdr__row--nav { position: relative; }
.tr-header.trc-hdr .trc-hdr__nav-item { position: static; }
.tr-header.trc-hdr .trc-hdr__nav-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: var(--trc-hdr-2);
	padding: 0 14px;
	color: #eaeaea;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, background 0.15s ease;
}
.tr-header.trc-hdr .trc-hdr__nav-link:hover,
.tr-header.trc-hdr .trc-hdr__nav-item.is-open > .trc-hdr__nav-link { color: #fff; background: rgba(255, 255, 255, 0.05); }
.tr-header.trc-hdr .trc-hdr__nav-icon { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }
.tr-header.trc-hdr .trc-hdr__caret {
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.7;
	transition: transform 0.2s ease;
}
.tr-header.trc-hdr .trc-hdr__nav-item:hover .trc-hdr__caret,
.tr-header.trc-hdr .trc-hdr__nav-item.is-open .trc-hdr__caret { transform: rotate(180deg); }

/* ── Dropdown mega-panel (full-width, card grid) ─────────────────────────────
   Matches production: hovering a category opens a full-width dark panel below
   the nav row with a 4-column grid of cards (name + "N პროდუქტი" + image),
   the same card design as the red slide-out mega menu. */
.tr-header.trc-hdr .trc-hdr__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #141414;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 26px 44px rgba(0, 0, 0, 0.5);
	max-height: 80vh;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 60;
}
@media (hover: hover) {
	.tr-header.trc-hdr .trc-hdr__nav-item.has-dropdown:hover .trc-hdr__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
}
.tr-header.trc-hdr .trc-hdr__nav-item.is-open .trc-hdr__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.tr-header.trc-hdr .trc-hdr__dd-inner {
	max-width: var(--tr-container, 1560px);
	margin: 0 auto;
	padding: 24px;
}
.tr-header.trc-hdr .trc-hdr__dd-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

/* Card */
.tr-header.trc-hdr .trc-hdr__dd-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 100px;
	padding: 0 0 0 22px;
	background: #1e1e1e;
	border: 1px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.18s ease, background 0.18s ease;
}
.tr-header.trc-hdr .trc-hdr__dd-card:hover { border-color: var(--trc-hdr-accent); background: #242424; }
.tr-header.trc-hdr .trc-hdr__dd-card-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1 1 auto; }
.tr-header.trc-hdr .trc-hdr__dd-card-name {
	color: #fff;
	/* Match the site's heading typography exactly: the Hero title and all H1/H2
	   page headings use --tr-font-display (Bebas → Gilroy Geo). Use the same here
	   so dropdown sub-category titles read as headings, not body text. */
	font-family: var(--tr-font-display, Bebas, "Gilroy Geo", sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 5px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tr-header.trc-hdr .trc-hdr__dd-card-count { color: var(--trc-hdr-accent); font-family: var(--tr-font-ka, "FiraGo", "Noto Sans Georgian", sans-serif); font-size: 13px; font-weight: 400; }
.tr-header.trc-hdr .trc-hdr__dd-card-img {
	flex: 0 0 auto;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tr-header.trc-hdr .trc-hdr__dd-card-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Brand logos: give them breathing room inside the image cell. */
.tr-header.trc-hdr .trc-hdr__dd-card-img--brand { padding: 16px; }

.tr-header.trc-hdr .trc-hdr__phone {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.tr-header.trc-hdr .trc-hdr__phone:hover { color: var(--trc-hdr-accent); }

/* ── Search toggle (mobile only) + language switcher ── */
/* The collapse-to-icon button is hidden on desktop (which uses the full search
   bar); it appears <=991px and sits next to the hamburger. */
.tr-header.trc-hdr .trc-hdr__search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
	transition: color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.tr-header.trc-hdr .trc-hdr__search-toggle:hover { color: var(--trc-hdr-accent, #C62D3C); }

/* ============================================================================
   Header LANGUAGE SWITCHER (TranslatePress) — minimal, text-only.
   - Labels "Geo"/"Eng" (set by trc-header.js; no text-transform here).
   - NO borders, frames or backgrounds on the toggle OR the dropdown.
   - On hover the OTHER language drops directly beneath the active one and stays
     clickable: the dropdown butts FLUSH to the toggle at top:100% (no gap → the
     pointer never crosses dead space), so the menu can't disappear mid-move.
   Works for both .trc-hdr__lang--bar (desktop) and .trc-hdr__lang--compact.
   ============================================================================ */

/* Outer wrapper: display is controlled by --bar / --compact (below), so it is NOT
   forced here. Just positioning + collapse to content. */
.tr-header.trc-hdr .trc-hdr__lang {
	position: relative;
	align-items: center;
	margin: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 0 !important;
	width: auto !important;
	max-width: none !important;
	line-height: normal;
	font-family: "FiraGo", sans-serif;
}
/* Inner TranslatePress wrappers: force inline-flex + auto width so they SHRINK to
   the toggle text. TP defaults .trp-language-switcher-container to a fixed 200px,
   which (a) left "Geo" ~160px from the phone on desktop and (b) ballooned the
   mobile actions row to ~294px so it wrapped to a 2nd line. height:auto collapses
   their default 2x height so the dropdown butts flush under the toggle. */
.tr-header.trc-hdr .trc-hdr__lang .trp_language_switcher_shortcode,
.tr-header.trc-hdr .trc-hdr__lang .trp-language-switcher,
.tr-header.trc-hdr .trc-hdr__lang .trp-language-switcher-container {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 0 !important;
	width: auto !important;
	max-width: none !important;
	line-height: normal;
}

/* Current-language container: kill TP's inline width:129px AND its own background
   dropdown-arrow; no border/background; collapse to the toggle height. */
.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-current-language {
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	display: inline-flex;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

/* The toggle — plain text + a small chevron (rotates on open). */
.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-current-language > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 0 !important;
	border: 0 !important;
	background: none !important;
	color: #eaeaea !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: .01em;
	text-transform: none !important;
	text-decoration: none !important;
	line-height: 1 !important;
	white-space: nowrap;
	cursor: pointer;
	transition: color .15s ease;
}
.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-current-language > a::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%206l4%204%204-4'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%206l4%204%204-4'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .7;
	transition: transform .2s ease, opacity .2s ease;
}
.tr-header.trc-hdr .trc-hdr__lang:hover .trp-ls-shortcode-current-language > a,
.tr-header.trc-hdr .trc-hdr__lang.trc-lang-open .trp-ls-shortcode-current-language > a {
	color: #fff !important;
}
.tr-header.trc-hdr .trc-hdr__lang.trc-lang-open .trp-ls-shortcode-current-language > a::after {
	transform: rotate(180deg);
	opacity: 1;
}

/* The dropdown — NO box: just the other language's text, flush below the toggle.
   top:100% (no gap) + a small padding-top keeps a CONTINUOUS hover area with a
   little breathing room, so the menu stays visible/clickable as the pointer
   moves down onto it.
   CRITICAL: TranslatePress forces `overflow:hidden auto` and collapses this box
   to ~0 height, so the "Eng" link overflowed OUTSIDE the z-indexed box and the
   page (hero) captured the pointer — the menu looked like it "disappeared". Force
   height:auto + overflow:visible so the box wraps the link and its z-index wins. */
.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-language {
	display: block !important;
	position: absolute;
	top: 100%;
	left: 0;
	width: max-content !important;
	min-width: 96px !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	margin: 8px 0 0 0 !important;
	padding: 6px !important;
	border: 1px solid rgba(255, 255, 255, 0.10) !important;
	border-radius: 10px !important;
	background: #1c1c1c !important;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45) !important;
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* NO transition: TranslatePress toggles inline display:none on this element,
	   which leaves a CSS opacity/transform transition permanently stuck at its
	   start value (the menu stays invisible even while "revealed"). An instant
	   visibility+opacity toggle is bug-free — the reveal always shows. */
}
/* Invisible hover-bridge above the menu: guarantees a CONTINUOUS hover area from
   the toggle down onto the menu (covers the brief translateY transition offset),
   so the menu can never drop while the pointer travels to the other language. */
.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-language::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}
/* compact (mobile/tablet) sits near the right edge — right-align so it can't
   overflow the viewport. */
.tr-header.trc-hdr .trc-hdr__lang--compact .trp-ls-shortcode-language,
.tr-header.trc-hdr .trc-hdr__lang--bar .trp-ls-shortcode-language {
	left: auto;
	right: 0;
}
/* The current language is already shown as the toggle; hide its duplicate inside
   the dropdown so ONLY the other language drops down. */
.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-language > a.trp-ls-disabled-language {
	display: none !important;
}
.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-language > a {
	display: block;
	padding: 7px 12px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: none !important;
	color: #d0d0d0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	text-decoration: none !important;
	line-height: 1 !important;
	white-space: nowrap;
	transition: color .15s ease, background .15s ease;
}
.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-language > a:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.08) !important;
}
/* Reveal ONLY on click (JS toggles .trc-lang-open). No :hover / :focus-within
   reveal — the switcher must open on click alone. Instant + forced (!important)
   so the second language always shows and stays clickable. */
.tr-header.trc-hdr .trc-hdr__lang.trc-lang-open .trp-ls-shortcode-language {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}
/* The active language is rendered as the toggle; it must stay fully visible while
   the dropdown is open (never hidden by TP's own state or any inherited rule). */
.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-current-language,
.tr-header.trc-hdr .trc-hdr__lang.trc-lang-open .trp-ls-shortcode-current-language,
.tr-header.trc-hdr .trc-hdr__lang.trc-lang-open .trp-ls-shortcode-current-language > a {
	display: inline-flex !important;
	opacity: 1 !important;
	visibility: visible !important;
}
/* Accessibility: keyboard focus ring only (transient, not a persistent border). */
.tr-header.trc-hdr .trc-hdr__lang a:focus-visible {
	outline: 2px solid var(--trc-hdr-accent, #C62D3C);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-current-language > a,
	.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-current-language > a::after,
	.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-language,
	.tr-header.trc-hdr .trc-hdr__lang .trp-ls-shortcode-language > a { transition: none !important; }
}

/* Show/hide per instance & breakpoint: desktop shows the row-2 --bar switcher;
   <=1024px (row 2 is hidden) shows the row-1 --compact copy next to the search
   icon. Declared AFTER the block above so they control display per variant. */
.tr-header.trc-hdr .trc-hdr__lang--bar { display: inline-flex; flex: 0 0 auto; margin-left: 14px; margin-right: 20px; }
.tr-header.trc-hdr .trc-hdr__lang--compact { display: none; flex: 0 0 auto; }
@media (max-width: 1024px) {
	.tr-header.trc-hdr .trc-hdr__lang--compact { display: inline-flex; }
}


/* ── Responsive ── */
/* Menu trigger by breakpoint: desktop keeps the red "მენიუ" mega button; phones
   and tablets use the production-style hamburger (.trmob → left-tab category
   menu), which mobile-menu.css already shows at <=1024px and hides at >=1025px.
   So on mobile we hide the mega button/panel and let the trmob hamburger be the
   single trigger — matching the original mobile header. */
@media (max-width: 1024px) {
	.tr-header.trc-hdr .trc-hdr__row--nav { display: none; }
	.tr-header.trc-hdr .trc-hdr__inner { padding: 0 14px; gap: 14px; }
	.tr-header.trc-hdr .trc-hdr__search { max-width: none; }
	/* Desktop mega button off, production hamburger on. */
	.tr-header.trc-hdr .tr-mega-wrap { display: none !important; }
	.tr-header.trc-hdr .trc-hdr__menu-btn .trmob { display: inline-flex; }
}

/* Under 992px the full search bar collapses to an icon (next to the hamburger),
   matching production; tapping it reveals the full-width search row. */
@media (max-width: 991px) {
	.tr-header.trc-hdr .trc-hdr__search-toggle { display: inline-flex; }
	.tr-header.trc-hdr .trc-hdr__search { display: none; }
	.tr-header.trc-hdr .trc-hdr__row--main .trc-hdr__inner { flex-wrap: wrap; }
	.tr-header.trc-hdr.is-search-open .trc-hdr__search {
		display: flex;
		order: 20;
		flex: 1 1 100%;
		max-width: none;
		margin: 10px 0 0;
		height: 42px;
	}
	.tr-header.trc-hdr.is-search-open .trc-hdr__search-toggle { color: var(--trc-hdr-accent, #C62D3C); }
}

/* Phones / small tablets: compact top row (logo + menu button), full-width
   search row; wishlist + cart move to the fixed bottom tab bar (like production). */
@media (max-width: 768px) {
	.tr-header.trc-hdr .trc-hdr__row--main .trc-hdr__inner {
		height: auto;
		min-height: 54px;
		flex-wrap: wrap;
		padding-top: 9px;
		padding-bottom: 9px;
		row-gap: 9px;
		column-gap: 10px;
	}
	.tr-header.trc-hdr .trc-hdr__logo { order: 1; }
	.tr-header.trc-hdr .trc-hdr__logo-img,
	.tr-header.trc-hdr .trc-hdr__logo img { width: 190px; height: auto; max-width: 50vw; }
	/* Top wishlist + cart live in the phone tab bar (TRC_Mobile_Nav); only the
	   menu button remains up here. */
	.tr-header.trc-hdr .trc-hdr__wish,
	.tr-header.trc-hdr .trc-hdr__cart { display: none; }
	.tr-header.trc-hdr .trc-hdr__actions { order: 2; margin-left: auto; gap: 12px; }

	:root:root { --tr-header-h: 112px; }
	/* Bottom clearance for the fixed tab bar is owned by trc-tabbar.css
	   (body.trc-has-tabbar), so pages without the bar don't get dead space. */
}

@media (max-width: 400px) {
	.tr-header.trc-hdr .trc-hdr__logo-img,
	.tr-header.trc-hdr .trc-hdr__logo img { max-width: 150px; }
}

/* ==========================================================================
   Wishlist heart button (cards + single pages) — shipped with the header so
   the styling lives in one core stylesheet.
   ========================================================================== */
.trc-wish-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #444;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.trc-wish-btn:hover { color: var(--trc-hdr-accent, #C62D3C); transform: translateY(-1px); }
.trc-wish-btn .trc-wish-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: fill 0.15s ease, stroke 0.15s ease; }
.trc-wish-btn.is-active { color: var(--trc-hdr-accent, #C62D3C); }
.trc-wish-btn.is-active .trc-wish-ic { fill: var(--trc-hdr-accent, #C62D3C); stroke: var(--trc-hdr-accent, #C62D3C); }
.trc-wish-btn.trc-wish-pulse { animation: trcWishPulse 0.35s ease; }
@keyframes trcWishPulse { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* Heart in a single-page title row (transport + accessory). Loaded globally so
   it applies even where the accessory stylesheet is not enqueued. */
.kw-product .trc-acc-titlerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.trc-acc-wish {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	background: #fff;
	border: 1.5px solid #e2e2e2;
	box-shadow: none;
}
.trc-acc-wish .trc-wish-ic { width: 22px; height: 22px; }
.trc-acc-wish:hover { border-color: var(--trc-hdr-accent, #C62D3C); transform: translateY(-1px); }
.trc-acc-wish.is-active { border-color: var(--trc-hdr-accent, #C62D3C); }

/* Full-width labeled wishlist CTA (e.g. transport price card). Scoped to
   .kw-product so it out-specifies the price card's single-class .btn rules. */
.kw-product .trc-wish-cta {
	width: 100%;
	min-width: 0;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 16px;
	border: 1.5px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
	background: transparent;
	color: #fff;
	font-family: "FiraGo", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
}
.kw-product .trc-wish-cta .trc-wish-heart { display: inline-flex; flex: 0 0 auto; }
.kw-product .trc-wish-cta .trc-wish-ic { width: 18px; height: 18px; }
.kw-product .trc-wish-cta:hover { border-color: var(--trc-hdr-accent, #C62D3C); color: #fff; transform: none; }
.kw-product .trc-wish-cta.is-active { border-color: var(--trc-hdr-accent, #C62D3C); }
.kw-product .trc-wish-cta.is-active .trc-wish-ic { fill: var(--trc-hdr-accent, #C62D3C); stroke: var(--trc-hdr-accent, #C62D3C); }

/* Heart positioned on a product card image (top-right). */
.trc-product-image-wrap { position: relative; }
.trc-product-image-wrap .trc-wish-btn--card {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 34px;
	height: 34px;
}
.trc-product-image-wrap .trc-wish-btn--card .trc-wish-ic { width: 17px; height: 17px; }

/* ── Wishlist page (saved items rendered as shop-archive cards) ──
   The grid + cards reuse the archive classes (.trc-products-grid +
   .trc-product-card / .trc-product-wrapper) styled by trc-archive.css, so the
   wishlist is a 1:1 match with the shop. The card's heart toggle IS the
   remove-from-wishlist control. Only the page shell is styled here. */
.trc-wishlist-page { max-width: var(--tr-container, 1560px); margin: 0 auto; padding: 30px 20px 64px; }
.trc-wishlist-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 22px; flex-wrap: wrap; }
.trc-wishlist-page__title { font-family: "Bebas Neue", "Bebas", "Noto Sans Georgian", sans-serif; font-size: 34px; letter-spacing: .02em; line-height: 1.1; margin: 0; color: #1a1a1a; }
.trc-wishlist-count { font-size: 14px; font-weight: 600; color: #8a8a8a; }
.trc-wishlist-cards { margin-top: 0; }

/* Empty / no-results state. */
.trc-wishlist-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 56px 20px 68px; }
.trc-wishlist-empty__icon { color: #d6d6d6; display: inline-flex; }
.trc-wishlist-empty__text { margin: 0; font-size: 16px; color: #6a6a6a; }
.trc-wishlist-empty__btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 6px; padding: 12px 26px; background: var(--trc-hdr-accent, #C62D3C); color: #fff; font-family: "FiraGO", sans-serif; font-weight: 700; font-size: 14px; border-radius: 8px; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.trc-wishlist-empty__btn:hover { background: #A52330; color: #fff; transform: translateY(-1px); }

@media (max-width: 768px) {
	.trc-wishlist-page { padding: 20px 12px 48px; }
	.trc-wishlist-page__title { font-size: 27px; }
}
@media (max-width: 480px) { .trc-wishlist-grid { grid-template-columns: 1fr; } }