/*
 * trc-responsive.css — consolidated mobile-responsiveness layer (transporter-core).
 *
 * Loaded globally on every page and LAST (priority-100 enqueue in TRC_Header) so
 * its @media rules refine BOTH core-plugin components and the theme's homepage
 * sections on phones — without editing the theme. Pure @media overrides; desktop
 * is never touched. `!important` is used only where a rule must beat an existing
 * component @media rule of equal specificity whose load order is not guaranteed
 * (several component sheets enqueue lazily from inside shortcodes).
 *
 * Breakpoints: 1024 (lg), 900, 768 (tablet/phone), 480, 400 (small phone).
 * Derived from a per-stylesheet audit; each block notes what it fixes.
 */

/* ══ Homepage — image/category accordion (section 4) ══
   The 4 category banner panels (ტრანსპორტისთვის / OFFROAD / თოვლის / წყლის)
   vanish on mobile: the theme's mobile block sets `height:200px` but the base
   `.tr-accordion__panel { flex: 1 1 0 }` gives flex-basis:0, which wins over
   `height` in the column flex — collapsing every panel to 0px (section ~15px).
   Give the panels a real flex-basis so they stack at 200px each. */
@media (max-width: 768px) {
	.tr-accordion { flex-direction: column; height: auto; }
	.tr-accordion__panel { flex: 0 0 200px !important; height: 200px; }
	.tr-accordion:hover .tr-accordion__panel,
	.tr-accordion:hover .tr-accordion__panel:hover { flex-grow: 0; }
	.tr-accordion__btn { opacity: 1; transform: none; }
}

/* ══ Full-bleed 100vw overflow → no horizontal scrollbar / "red bar" at bottom ══
   The hero and branch banners use width:100vw + margin:calc(50% - 50vw) to break
   out to the viewport edges. `100vw` INCLUDES the vertical scrollbar, so on a
   classic (non-overlay) scrollbar — e.g. Windows Chrome — the banner is ~17px
   wider than the content area and a horizontal scrollbar appears at the page
   bottom (which the user sees as a red horizontal bar because their scrollbar is
   red-themed). Clip that overflow at the page wrapper. `clip` (not hidden/auto)
   does NOT create a scroll container, so the sticky header and vertical scroll
   are unaffected. Applies at every width. */
.tr-page { overflow-x: clip; }

/* ══ Brands index page — remove the duplicate "Brands" title ══
   The brands listing (/brands/) is an Elementor page that supplies its own
   heading ("ჩვენი პარტნიორი ბრენდები"), but the theme ALSO prints its generic
   page title (.tr-entry__title = "ბრენდები" = "Brands") above it, so the title
   reads "Brands" twice. TRC_Brand_Archive tags the page body with
   `trc-brands-index`; hide the redundant theme title, keeping the page's own. */
body.trc-brands-index .tr-entry__title { display: none !important; }

/* ══ Brands index page — container alignment ══
   The Elementor sections on /brands/ render 1560px wide (the WP content wrapper),
   while the standard core archive wraps at 1500px (.trc-archive-wrap), so the
   heading + brand grid sat ~30px wider on each side and misaligned with the
   header/archives. Constrain the top-level Elementor sections to the same 1500px
   and centre them so the left/right boundaries match every other archive. */
body.trc-brands-index .tr-entry__content > .elementor > .e-con,
body.trc-brands-index .tr-entry__content > .elementor > .elementor-section {
	max-width: 1500px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ══ Neutral scrollbars ══
   The site never styled the page scrollbar, so it inherited the OS/theme — which
   on the user's machine renders RED. Force a subtle grey scrollbar so no red
   stripe shows at any page edge (horizontal or vertical). WebKit/Chromium + FF. */
html { scrollbar-width: thin; scrollbar-color: #c2c2c2 transparent; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb { background: #c2c2c2; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover { background: #a8a8a8; background-clip: content-box; }

/* ══ Global safety net ══
   Contain any accidental horizontal overflow inside the content column at narrow
   widths (320–360px were outside the 375px ground-truth check). overflow-x:clip
   keeps the y-axis visible and never creates a scroll container. */
@media (max-width: 768px) {
	.tr-main { overflow-x: clip; }
}

/* ══ Header — mega panel (mobile layout) ══
   The panel's column reflow is keyed to `.is-open`, which the JS only adds inside
   nested requestAnimationFrame — fragile. Force the column layout the moment the
   panel opens (independent of that class), one category card per row, and make the
   card internals flexible: the fixed 180px text + 120px image (=300px) otherwise
   overflow the narrow mobile card and clip every Georgian category name. */
@media (max-width: 768px) {
	.tr-mega-panel { flex-direction: column !important; }
	.tr-mega-panel .tr-card-grid { grid-template-columns: 1fr; }
	.tr-mega-panel .tr-card { height: 92px; padding-left: 18px; }
	.tr-mega-panel .tr-card-text { width: auto; flex: 1 1 auto; min-width: 0; }
	.tr-mega-panel .tr-card-name { font-size: 18px; }
	.tr-mega-panel .tr-card-img { width: 84px; height: 84px; }
}

/* ══ Mobile menu (.trmob) open position ══
   mobile-menu.css opens the panel at top:var(--trmob-header-h, 60px); the 60px
   default assumed the old single-row header. Ours is taller (logo row + search
   row on phones), so open the panel below the real header height at each
   breakpoint — otherwise it overlaps the search row and the close (X) button. */
@media (max-width: 1024px) { :root { --trmob-header-h: 66px; } }
@media (max-width: 768px)  { :root { --trmob-header-h: 113px; } }

/* ══ Mobile bottom tab bar ══
   Now TRC_Mobile_Nav (trc-tabbar.css) — a body-level bar that yields to the
   transport page's .kw-bottom-bar CTA instead of being hidden there. */

/* ══ Hero ══
   No title breakpoint below 768px, so 34px is the floor to 320px; the longest
   Georgian word then exceeds the padded box and is clipped. Scale down + tighten
   padding on small phones. */
@media (max-width: 480px) {
	.tr-hero .tr-hero__inner { padding: 20px; }
	.tr-hero .tr-hero__title { font-size: 28px !important; line-height: 32px !important; }
}

/* ══ Homepage — category strip ══
   The first below-hero carousel (Categories) is made wall-to-wall with a left
   offset in the "Wall-to-wall sliders" block below (left card aligns to the 16px
   page gutter, right edge bleeds off-viewport). No separate padding rule needed. */

/* ══ Single product — global order: Title -> Spec cards -> Image -> Price -> Description ══
   The 4 key spec cards now render as a full-width .specs-row directly under the
   H1 (outside .product-grid), so the grid itself is description (left) / image
   (centre) / price (right). .specs-col is kept in the selectors only so an older
   cached template can't break the layout mid-deploy. */
.kw-product:not(.trc-acc) .specs-col,
.kw-product:not(.trc-acc) .desc-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
	z-index: 2;
}
.kw-product:not(.trc-acc) .specs-col .specs { margin-top: 0; }

/* Desktop (>=1101px): description left, image in the wide centre (bleeds via its
   own negative margins), price right. */
@media (min-width: 1101px) {
	.kw-product:not(.trc-acc) .product-grid {
		grid-template-areas: "desc image price" !important;
	}
	.kw-product:not(.trc-acc) .center-col { grid-area: image; }
	.kw-product:not(.trc-acc) .right-col  { grid-area: price; }
	.kw-product:not(.trc-acc) .desc-col   { grid-area: desc; }
}

/* Tablet (901-1100px): image left, price right, description full width under
   them. Kill the image bleed so it can't overflow the narrower grid. */
@media (min-width: 901px) and (max-width: 1100px) {
	.kw-product:not(.trc-acc) .product-grid {
		grid-template-columns: 1fr 1fr !important;
		grid-template-areas: "image price" "desc desc" !important;
	}
	.kw-product:not(.trc-acc) .center-col { grid-area: image; margin-left: 0 !important; margin-right: 0 !important; }
	.kw-product:not(.trc-acc) .right-col  { grid-area: price; }
	.kw-product:not(.trc-acc) .desc-col   { grid-area: desc; }
}

/* Mobile (<=900px): single column, order Image -> Price -> Description (title +
   spec cards already sit above the grid in the DOM). Overrides the base
   center/right order:-2/-1 rules. */
@media (max-width: 900px) {
	.kw-product:not(.trc-acc) .center-col { order: 1 !important; }
	.kw-product:not(.trc-acc) .right-col  { order: 2 !important; }
	.kw-product:not(.trc-acc) .desc-col   { order: 3 !important; }
}

/* Wishlist heart removed from the single-product title row (per design). Hidden
   here too so it never shows on accessory singles (which render it in markup). */
.kw-product .trc-acc-wish { display: none !important; }

/* ══ Single product — "Similar equipment" grid (3 desktop / 2 tablet / 1 mobile) ══ */
.kw-product .similar-section { margin-top: 52px; }
.kw-product .similar-title {
	font-family: "Bebas", "Bebas Neue", "Noto Sans Georgian", sans-serif;
	font-size: 30px; letter-spacing: 0.03em; color: #111; margin: 0 0 20px;
}
/* The Similar cards reuse the archive component (.trc-products-grid.trc-cols-3 +
   .trc-product-wrapper) styled by trc-archive.css, so they are a 1:1 match with
   the archive (visuals, hover, borders, responsive columns). No custom card CSS. */

/* ══ Equipment (transport) single — targeted fixes (2026-09-22) ═══════════════════
   Placed in trc-responsive.css (loaded last @100, filemtime-versioned) so they win
   over the transport template CSS and reliably bust cache. */
/* 1. "Similar equipment" grid: 4 columns on desktop. */
.kw-product .similar-section .trc-products-grid,
.kw-product .trc-similar-grid { grid-template-columns: repeat(4, 1fr) !important; }
/* 2. Main page container background: pure white. */
body.single-transport { background-color: #ffffff !important; }
/* 3. Popup/modal "Send" (გაგზავნა) button: solid brand red + white text. */
.kw-popup .kw-popup-send,
.kw-popup-send { background-color: #D42B2B !important; color: #fff !important; border: 0 !important; }
.kw-popup .kw-popup-send:hover,
.kw-popup-send:hover { background-color: #B92020 !important; color: #fff !important; }

@media (max-width: 768px) {
	/* 1 (mobile). "Similar equipment" grid: 2 columns. */
	.kw-product .similar-section .trc-products-grid,
	.kw-product .trc-similar-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Accessory title row: keep the title + wishlist heart inline on phones (the
   shared .title-row forces flex-direction:column at <=768). Scoped to .trc-acc so
   the large transport Bebas title keeps its own stacked treatment. */
@media (max-width: 768px) {
	.kw-product.trc-acc .trc-acc-titlerow { flex-direction: row !important; align-items: center; }
	.kw-product.trc-acc .trc-acc-titlerow h1 { min-width: 0; }
}

/* ══ Archive (core trc-archive.css) — touch targets + transport-card overflow ══ */
@media (max-width: 768px) {
	/* Transport (tr_category) cards: brand badge sits at right:-5px and, on the
	   edge-to-edge mobile grid, overhangs the viewport -> horizontal scroll. Pull flush. */
	.trc-product-wrapper .trc-brand-logo { right: 0 !important; }
	/* Primary filter-drawer toggle: ~36px tall -> raise to a 44px touch target. */
	.trc-filter-toggle { padding: 11px 16px !important; min-height: 44px; }
	/* Layout-switch view icons: enlarge the hit area without changing glyph size. */
	.trc-view-icons-mobile svg { box-sizing: content-box; padding: 6px; }
	/* Sort dropdown: ~28px tall -> comfortable 40px tap zone. */
	.trc-ordering select { min-height: 40px; }
}

/* ══ Contact form — label/asterisk/spacing (desktop + mobile) ══
   Contact Form 7 outputs each field as:
     <label>Label <span>*</span><br><span class="wpcf7-form-control-wrap"><input></span></label>
   contact.css sets the <label> to display:flex; flex-direction:column, which turns
   the bare label text, the "*" span, the <br> AND the input wrapper into FOUR
   separate stacked rows (gap:6px each) — so the asterisk drops to its own line and
   the <br> adds a large empty gap before the input. Render the label as a normal
   block instead: "Label *" stays inline, the <br> is dropped, and the input gets a
   small, tight top margin. Applies at all breakpoints. */
.tr-contact__form-card .tr-form label { display: block; }
.tr-contact__form-card .tr-form label br { display: none; }
/* the asterisk (a bare <span> child, not the input wrapper) sits inline next to the text */
.tr-contact__form-card .tr-form label > span:not(.wpcf7-form-control-wrap) {
	display: inline;
	margin-left: 3px;
	color: var(--tr-brand, #BF3434);
}
/* the input wrapper drops to its own line, tightly grouped under the label */
.tr-contact__form-card .tr-form label > span.wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

/* ══ Wall-to-wall sliders on mobile ══
   The Categories carousel and Best-Sellers grid on the homepage, plus the
   Features slider on the single product page, sit inside padded containers on
   mobile. Break the TRACK out to the full viewport width so it scrolls
   edge-to-edge (headings keep their padding). 100vw is safe here because
   .tr-page has overflow-x:clip, so no phantom horizontal scrollbar appears. */
@media (max-width: 768px) {
	/* Best Sellers grid + single-page Features slider: full wall-to-wall (both edges). */
	.tr-bestsellers .tr-bestsellers__grid,
	.kw-product .features-track {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Features (მახასიათებლები) carousel: keep the full-bleed width (cards peek off
	   the right edge) but inset the FIRST card to the page gutter so it isn't flush
	   against the screen edge — same treatment as the Categories strip below. This
	   sits AFTER the wall-to-wall rule above so it wins the padding-left. */
	.kw-product .features-track {
		padding-left: 16px !important;
		scroll-padding-left: 16px !important;
	}
	/* First slider (Categories): LEFT-ALIGNED to the page content gutter (~21px)
	   so it lines up with the rest of the page, while still bleeding off the RIGHT
	   edge (cards peek). The user wants a proper left offset, not a flush edge. */
	.tr-home .tr-section--category-strip { padding-left: 0 !important; padding-right: 0 !important; }
	.tr-home .tr-section--category-strip .mcc-carousel-section {
		width: auto !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: calc(50% - 50vw) !important;   /* extend right edge to the viewport (peek) */
		padding-left: 16px !important;                /* align first card with page content */
		padding-right: 0 !important;
	}
}

/* ══ Contact (theme component) ══
   CF7 inputs are 15px -> iOS auto-zooms on focus; bump to 16px. Branch link is a
   ~20px-tall tap target -> add vertical padding. */
@media (max-width: 768px) {
	.tr-contact__form-card .tr-form input.wpcf7-text { font-size: 16px !important; }
	.tr-contact__branch-link { display: inline-block; padding: 11px 4px; }
}

/* The sheet head injected on phones is meaningless in the desktop sidebar
   (e.g. after rotating a tablet past the breakpoint). */
@media (min-width: 769px) {
	.trc-sidebar > .trc-sheet__head { display: none; }
}

/* ══ Archive filter — WHITE BOTTOM-SHEET on mobile ══
   Part of the unified sheet system (trc-sheet.css / trc-sheet.js): the archive
   JS opens it through TRCSheet, which supplies the shared scrim, the drag handle
   (.trc-sheet__handle, injected) and swipe-down-to-dismiss, and keeps it on the
   sheet z-tier. Geometry + motion use the shared tokens. Lives here (loaded
   last, filemtime-versioned) so it wins over trc-archive.css. Content recolored
   dark-on-white. */
@media (max-width: 768px) {
	.trc-archive-wrap .trc-sidebar,
	.trc-sidebar {
		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		max-height: 88vh !important;
		max-height: calc(100dvh - 40px) !important;
		background: #ffffff !important;
		z-index: var(--trc-z-sheet, 100050) !important;
		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) !important;
		box-shadow: none !important;
		border-radius: var(--trc-sheet-radius, 22px) var(--trc-sheet-radius, 22px) 0 0 !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		scrollbar-width: none;
		padding-bottom: env(safe-area-inset-bottom, 0px) !important;
	}
	.trc-sidebar::-webkit-scrollbar { display: none; }
	.trc-sidebar.active {
		transform: translate3d(0, 0, 0) !important;
		visibility: visible;
		transition: transform var(--trc-dur-sheet, .5s) var(--trc-ease-sheet, cubic-bezier(.32, .72, 0, 1)), visibility 0s !important;
		box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.16) !important;
	}
	.trc-sidebar-inner { background: #ffffff !important; color: #333 !important; padding: 0 20px 30px !important; border-radius: 0 !important; }
	/* Fallback backdrop (only used if the sheet controller is unavailable). */
	.trc-sidebar-overlay { z-index: var(--trc-z-scrim, 100040) !important; }
	/* The close control, moved into the sheet head by the archive JS, becomes the
	   standard round X (label kept for screen readers, visually hidden). */
	.trc-sidebar .trc-sheet__head .trc-close-sidebar {
		flex: 0 0 auto;
		width: 34px;
		height: 34px;
		margin: 0 !important;
		padding: 0;
		gap: 0;
		justify-content: center;
		border-radius: 50%;
		background: #f2f2f4;
		font-size: 0 !important;
		color: #1a1a1a !important;
	}
	.trc-sidebar .trc-sheet__head .trc-close-sidebar svg { width: 14px; height: 14px; fill: #1a1a1a !important; }

	/* recolor filter content dark-on-white */
	.trc-sidebar .trc-widget { border-bottom-color: #ececec !important; }
	.trc-sidebar h5.trc-widget-title { color: #111 !important; }
	.trc-sidebar ul.trc-category-list li a { color: #454545 !important; }
	.trc-sidebar ul.trc-category-list li a:hover,
	.trc-sidebar ul.trc-category-list li.active-category a { color: #C62D3C !important; }
	.trc-sidebar .trc-cat-count { color: #9a9a9a !important; }
	.trc-sidebar .trc-cat-back { color: #666 !important; }
	.trc-sidebar .trc-cat-back:hover { color: #111 !important; }
	.trc-sidebar .trc-widget-title.trc-cat-parent a { color: #111 !important; }
	.trc-sidebar ul.trc-category-children { border-top-color: #ececec !important; }
	.trc-sidebar .trc-toggle-label { color: #454545 !important; }
	.trc-sidebar .trc-toggle-btn { background: #e9e9e9 !important; border-color: #cfcfcf !important; }
	.trc-sidebar .trc-checkbox { border-color: #cfcfcf !important; }
	.trc-sidebar .trc-close-sidebar { color: #333 !important; }
	.trc-sidebar .trc-close-sidebar svg { fill: #333 !important; }
	.trc-sidebar .trc-price-track-bg { background: #e4e4e4 !important; }
	.trc-sidebar .trc-range-input::-webkit-slider-thumb { background: #111 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; }
	.trc-sidebar .trc-price-val { background: #f4f4f4 !important; color: #111 !important; border-color: #dcdcdc !important; }
	.trc-sidebar .trc-brand-card { background: #fff !important; border: 1px solid #e6e6e6 !important; }
}


/* ══ Cart page: layout/table/totals now live in a dedicated trc-cart.css (enqueued on is_cart); the mini-cart lives in trc-minicart.*. Kept below: global add-to-cart brand fix, cross-sell card buttons, empty-cart. ══ */
/* Cross-sell / product-card buttons on the cart page. WooCommerce's default
   .button (grey #e9e6ed bg with white text = invisible) overrides the archive
   .trc-cart-btn here, so re-assert the brand style — matching the shop archive. */
.trc-cartpage .trc-cart-btn,
.trc-cartpage a.button.trc-cart-btn,
.trc-cartpage .trc-cart-crosssells .trc-cart-btn,
.trc-cartpage .trc-detail-btn {
	background: #C62D3C !important;
	background-color: #C62D3C !important;
	color: #fff !important;
	border: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	opacity: 1 !important;
}
.trc-cartpage .trc-cart-btn:hover,
.trc-cartpage a.button.trc-cart-btn:hover,
.trc-cartpage .trc-detail-btn:hover { background: #a52330 !important; background-color: #a52330 !important; color: #fff !important; }
.trc-cartpage .trc-cart-btn.trc-in-cart { background: #8a1f29 !important; background-color: #8a1f29 !important; }
.trc-cartpage .trc-cart-btn.trc-in-cart:hover { background: #6e1820 !important; background-color: #6e1820 !important; }
.trc-cartpage .trc-cart-btn.trc-at-max { background: #4a4a4a !important; background-color: #4a4a4a !important; }
.trc-cartpage .trc-cart-btn.trc-out-of-stock,
.trc-cartpage .trc-detail-btn.trc-btn-disabled { background: #999 !important; background-color: #999 !important; }

/* Default WooCommerce loop add-to-cart buttons (e.g. the plain /shop/ page, which
   still renders WC's default product grid). WC's grey .button (#e9e6ed bg + grey
   text) reads as broken/colorless — brand them red site-wide. Scoped to the
   add-to-cart button so Update/quantity/etc. buttons are untouched. */
.woocommerce a.button.add_to_cart_button,
.woocommerce button.button.add_to_cart_button,
.woocommerce .products a.button.add_to_cart_button,
.woocommerce ul.products li.product a.button {
	background: #C62D3C !important;
	background-color: #C62D3C !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 4px !important;
	font-weight: 500 !important;
	opacity: 1 !important;
}
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.button.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button:hover { background: #a52330 !important; background-color: #a52330 !important; color: #fff !important; }
.woocommerce a.added_to_cart { color: #C62D3C !important; font-weight: 600 !important; }

/* Empty cart */
.trc-cartpage .cart-empty, .trc-cartpage .wc-empty-cart-message { text-align: center; font-size: 16px; color: #6a6a6a; padding: 30px 0; }
.trc-cartpage .return-to-shop { text-align: center; margin-top: 10px; }
.trc-cartpage .return-to-shop .button { display: inline-flex; background: #C62D3C; color: #fff; border-radius: 8px; padding: 12px 26px; font-family: "FiraGO", sans-serif; font-weight: 700; text-decoration: none; }
.trc-cartpage .return-to-shop .button:hover { background: #A52330; }
/* ══════════════════════════════════════════════════════════════════════════
   QA SWEEP FIXES — 2026-09-23 (audit wf_3fdb3847-916)
   Each block notes the finding id it closes. Appended last on purpose: this
   file is enqueued at priority 100, so equal-specificity rules win on order.
   ══════════════════════════════════════════════════════════════════════════ */

/* [design-04 + woo-18] Nine templates render h1.tr-entry__title with ZERO
   styling (bare browser default), and WooCommerce shortcode headings had a
   24px line-height at 30px so Georgian ascenders collided. */
.tr-entry__title,
.tr-page-title,
body.post-type-archive-product .woocommerce-products-header__title {
	font-family: var(--tr-font-display, Bebas, "Gilroy Geo", sans-serif);
	font-size: 48px;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: .01em;
	color: #111;
	margin: 0 0 20px;
}
.woocommerce h2,
.woocommerce h3 { line-height: 1.25; margin: 32px 0 16px; }
.woocommerce h2:first-child,
.woocommerce h3:first-child { margin-top: 0; }
@media (max-width: 768px) {
	.tr-entry__title,
	.tr-page-title,
	body.post-type-archive-product .woocommerce-products-header__title { font-size: 30px; }
}

/* [overflowB-001] Georgian compound words carry no break opportunities, so long
   headings overflowed / were clipped by the page-level overflow-x:clip. */
@media (max-width: 768px) {
	h1, h2, h3,
	.elementor-heading-title,
	.tr-entry__title,
	.trc-page-title,
	.ty-title { overflow-wrap: anywhere; word-break: normal; }
}
@media (max-width: 480px) {
	/* Elementor per-post CSS is (0,0,4,0) — !important is required to win. */
	.elementor-widget-heading .elementor-heading-title { font-size: 30px !important; line-height: 1.12 !important; }
	.tr-entry__title { font-size: 24px; line-height: 1.2; }
	/* /thank-you/ styles .ty-* from an inline <style> INSIDE <body>, i.e. after
	   every head stylesheet, so these need !important to win on source order. */
	.ty-title { font-size: 28px !important; line-height: 1.1 !important; }
	.ty-hero { padding: 72px 20px 48px !important; }
}

/* [tabbar-thankyou-socials-under-bar + gap2-enlayer-13] /thank-you/ sized its
   hero to 100vh, so the social row sat inside the fixed tab-bar band and could
   never be scrolled clear. */
@media (max-width: 768px) {
	body.trc-has-tabbar main.ty-page {
		min-height: calc(100vh - var(--trc-tabbar-space, 62px));
		min-height: calc(100dvh - var(--trc-tabbar-space, 62px));
	}
}

/* [gap1-accountauth-02] Order-received renders no #tr-footer, so it never got
   the footer spacer and the last ~63px sat behind the tab bar. */
@media (max-width: 768px) {
	body.trc-has-tabbar.mc-thankyou-body { padding-bottom: calc(63px + env(safe-area-inset-bottom, 0px)); }
}

/* [tablet-001] 769–991px: the header action cluster collapsed left, leaving up
   to ~418px of empty header (the search box is display:none in that range). */
@media (min-width: 769px) and (max-width: 991px) {
	.tr-header.trc-hdr .trc-hdr__inner > .trc-hdr__actions { margin-left: auto; }
}

/* [tablet-002] The fixed transport CTA bar (68px + 1px border at >=769px) sat
   permanently over the footer legal-link row, making those links unclickable.
   Keyed to the body class, NOT html.trc-cta-on, so document height can't change
   mid-scroll as that class toggles. */
@media (min-width: 769px) {
	body.single-transport #tr-footer::after { content: ""; display: block; height: 69px; }
}

/* [tabbar-cta-btn-height] Transport CTA buttons were 40–42px / 9px / 3px radius. */
@media (max-width: 768px) {
	body .kw-bottom-bar .bb-btn { min-height: 44px; border-radius: 8px; font-weight: 600; }
}

/* [overflowA-1] .kw-product{overflow:hidden} clipped the deliberately 100vw
   features carousel by 5px per side, so the last card could never be fully
   scrolled into view. Negative margin == .kw-product's own padding. */
@media (max-width: 768px) {
	#kwProduct .features-track {
		width: auto !important;
		max-width: none !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
		padding-left: 16px !important;
		scroll-padding-left: 16px !important;
	}
}
@media (max-width: 420px) {
	#kwProduct .features-track {
		margin-left: -12px !important;
		margin-right: -12px !important;
		padding-left: 12px !important;
		scroll-padding-left: 12px !important;
	}
}

/* [tabbar-dead-kwpopup-overlay] A dead duplicate call-request form ships on every
   transport single (kwOpenPopup now routes to #trcFormModal). It stayed in the
   tab order and on the sheet z-tier. Removing the markup is on the punch list. */
body .kw-popup-overlay:not(.open) { display: none !important; }

/* [woo-06] Default WooCommerce notice bars (green/blue/red with the icon font)
   appeared on archives, product and cart pages. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 0;
	border-radius: 12px;
	background: #f7f7f7;
	color: #1a1a1a;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 14px;
	line-height: 1.5;
	padding: 14px 20px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }
.woocommerce-error { background: #FFF1F2; color: #9B1C2A; }
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	border-radius: 8px;
	background: #C62D3C;
	color: #fff;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-weight: 600;
}
.woocommerce-message a.button:hover,
.woocommerce-error a.button:hover { background: #A52330; }

/* [gap3-wcproductstates-01 + -11] Every product-card CTA state colour in
   trc-archive.css was dead: sold-out, in-cart and at-max all rendered full brand
   red, because the .woocommerce a.button.add_to_cart_button block above is
   (0,4,3)!important in this same (last-loaded) sheet. */
.woocommerce .trc-product-card .trc-cart-btn.trc-out-of-stock,
.trc-archive-wrap .trc-product-card .trc-cart-btn.trc-out-of-stock,
.trc-archive-wrap .trc-product-wrapper .trc-cart-btn.trc-out-of-stock {
	background: #8a8a8f !important;
	background-color: #8a8a8f !important;
	color: #fff !important;
	border-radius: 4px !important;
	min-height: 42px !important;
	margin-top: 15px !important;
	font-size: 13px !important;
	padding: 12px !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}
.woocommerce ul.products li.product a.button.trc-in-cart,
.woocommerce .trc-product-card a.button.trc-in-cart,
.trc-archive-wrap .trc-product-card .trc-cart-btn.trc-in-cart,
.trc-archive-wrap .trc-product-card .add_to_cart_button.trc-in-cart {
	background: #8A1F29 !important;
	background-color: #8A1F29 !important;
	color: #fff !important;
}
.woocommerce ul.products li.product a.button.trc-in-cart:hover,
.trc-archive-wrap .trc-product-card .add_to_cart_button.trc-in-cart:hover {
	background: #6E1820 !important;
	background-color: #6E1820 !important;
}
.woocommerce ul.products li.product a.button.trc-at-max,
.woocommerce .trc-product-card a.button.trc-at-max,
.trc-archive-wrap .trc-product-card .trc-cart-btn.trc-at-max,
.trc-archive-wrap .trc-product-card .add_to_cart_button.trc-at-max {
	background: #4a4a4a !important;
	background-color: #4a4a4a !important;
	color: #fff !important;
	cursor: not-allowed !important;
}

/* [woo-11 + gap1-accountauth-08] The my-checkout plugin paints its whole flow
   from its own token, a near-miss red (#C92A4A). Re-point the token instead of
   editing that plugin's CSS (it ships a STATIC ?ver=0.6.0 — edits there would
   never bust cache). */
.mc-shell {
	--c-primary: #C62D3C;
	--c-primary-hover: #A52330;
	--c-focus: #C62D3C;
	--radius: 8px;
}

/* [gap1-accountauth-01/-04/-06/-07 + woo-04] My Account is painted 100% by
   WooCommerce core CSS — no brand rule existed anywhere. Everything below is
   scoped to body.woocommerce-account, which carries no other brand CSS, so the
   blast radius is that template family only. Longhand font properties on
   purpose: the `font:` shorthand with var() silently drops the family. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; }
/* The sidebar grid is for the LOGGED-IN shell only: when logged out this same
   container holds the login/register columns, which a 260px first track would
   crush. :has() gates it on the account nav actually being present. */
@supports selector(:has(*)) {
	.woocommerce-account .tr-entry__content > .woocommerce:has(.woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}
	.woocommerce-account .tr-entry__content > .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
	.woocommerce-account .tr-entry__content > .woocommerce:has(.woocommerce-MyAccount-navigation)::after { content: none; }
	@media (max-width: 900px) {
		.woocommerce-account .tr-entry__content > .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; gap: 20px; }
	}
}
/* Logged-out: login beside register, stacked on small screens. */
.woocommerce-account #customer_login.u-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
	width: 100%;
}
.woocommerce-account #customer_login.u-columns > div { float: none !important; width: auto !important; margin: 0 !important; }
/* WooCommerce clearfixes these containers with ::before/::after{display:table};
   inside a grid those pseudo-elements become GRID ITEMS and take cells 1 and 4,
   pushing login into column 2 and register onto a second row. */
.woocommerce-account #customer_login.u-columns::before,
.woocommerce-account #customer_login.u-columns::after { content: none; }
.woocommerce-account #customer_login h2 {
	font-family: var(--tr-font-display, Bebas, "Gilroy Geo", sans-serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .02em;
	color: #1a1a1a;
	margin: 0 0 14px;
}
@media (max-width: 900px) {
	.woocommerce-account #customer_login.u-columns { grid-template-columns: 1fr; gap: 20px; }
}
.woocommerce-account .tr-entry__title {
	font-family: var(--tr-font-display, Bebas, "Gilroy Geo", sans-serif);
	font-size: 34px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: .02em;
	color: #1a1a1a;
	margin: 0 0 24px;
}
.woocommerce-account .tr-entry__content {
	color: #1a1a1a;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}
.woocommerce-account .tr-entry__content small { color: #7a7a7a; }
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 8px;
	background: #f7f7f7;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	border-radius: 8px;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: #1a1a1a;
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #fff; color: #C62D3C; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: #C62D3C; color: #fff; }
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 28px;
	background: #fff;
}
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-table--order-details,
.woocommerce-account table.woocommerce-table--order-downloads,
.woocommerce-account table.woocommerce-MyAccount-paymentMethods {
	width: 100%;
	border: 1px solid #ececec;
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}
.woocommerce-account .woocommerce-orders-table__header,
.woocommerce-account table.woocommerce-table--order-details th,
.woocommerce-account table.woocommerce-MyAccount-paymentMethods th {
	background: #f7f7f7;
	font-weight: 600;
	color: #1a1a1a;
	padding: 14px 16px;
	text-align: start;
	border: 0;
}
.woocommerce-account .woocommerce-orders-table__cell,
.woocommerce-account table.woocommerce-table--order-details td,
.woocommerce-account table.woocommerce-MyAccount-paymentMethods td {
	padding: 14px 16px;
	border: 0;
	border-top: 1px solid #ececec;
	color: #1a1a1a;
}
.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-form-login button[type="submit"],
.woocommerce-account .woocommerce-form-register button[type="submit"],
.woocommerce-account .woocommerce-ResetPassword button[type="submit"],
.woocommerce-account .woocommerce-pagination .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 8px;
	background: #C62D3C;
	color: #fff;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .woocommerce-form-login button[type="submit"]:hover,
.woocommerce-account .woocommerce-form-register button[type="submit"]:hover,
.woocommerce-account .woocommerce-ResetPassword button[type="submit"]:hover { background: #A52330; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	background: #fff;
	color: #1a1a1a;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row .input-text,
.woocommerce-account .woocommerce form .form-row select,
.woocommerce-account form .woocommerce-Input.input-text,
.woocommerce-account .woocommerce-ResetPassword input[type="text"],
.woocommerce-account .woocommerce-ResetPassword input[type="password"] {
	min-height: 48px;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	padding: 12px 14px;
	background: #fff;
	color: #1a1a1a;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 16px; /* load-bearing: 15px makes iOS Safari zoom on focus */
	font-weight: 400;
	line-height: 1.4;
}
.woocommerce-account .woocommerce form .form-row input.input-text:focus,
.woocommerce-account form .woocommerce-Input.input-text:focus {
	border-color: #C62D3C;
	outline: none;
	box-shadow: 0 0 0 3px rgba(198, 45, 60, .12);
}
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .woocommerce-EditAccountForm label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 14px;
	font-weight: 500;
	color: #1a1a1a;
}
.woocommerce-account .woocommerce-Address { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 20px; }
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column--billing-address h2,
.woocommerce-account .woocommerce-column--shipping-address h2 {
	font-family: var(--tr-font-display, Bebas, "Gilroy Geo", sans-serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .02em;
	color: #1a1a1a;
}
.woocommerce-account .woocommerce-EditAccountForm fieldset { border: 1px solid #ececec; border-radius: 12px; padding: 20px; margin-top: 24px; }
.woocommerce-account .woocommerce-EditAccountForm legend {
	font-family: var(--tr-font-display, Bebas, "Gilroy Geo", sans-serif);
	font-size: 20px;
	font-weight: 400;
	color: #1a1a1a;
	padding: 0 8px;
}
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
	background: #f7f7f7;
	border: 0;
	border-left: 3px solid #C62D3C;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 0 0 20px;
	color: #1a1a1a;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	list-style: none;
}
.woocommerce-account .woocommerce-message { border-left-color: #2e7d32; }
.woocommerce-account .woocommerce-info { border-left-color: #1a1a1a; }
.woocommerce-account .woocommerce-error li,
.woocommerce-account .woocommerce-info li,
.woocommerce-account .woocommerce-message li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-account .woocommerce-LostPassword a { color: #C62D3C; font-family: var(--tr-font-ka, "FiraGO", sans-serif); }
.woocommerce-account .woocommerce-pagination ul { border: 0; display: flex; gap: 6px; padding: 0; }
.woocommerce-account .woocommerce-pagination ul li { border: 0; }
.woocommerce-account .woocommerce-pagination ul li a,
.woocommerce-account .woocommerce-pagination ul li span {
	border-radius: 8px;
	min-width: 40px;
	padding: 10px;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 14px;
	font-weight: 500;
}
.woocommerce-account .woocommerce-pagination ul li span.current { background: #C62D3C; color: #fff; }
.woocommerce-account .woocommerce-password-strength {
	border-radius: 8px;
	padding: 8px 12px;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 13px;
	font-weight: 500;
	border: 1px solid transparent;
}
.woocommerce-account .woocommerce-password-hint {
	display: block;
	margin-top: 6px;
	font-family: var(--tr-font-ka, "FiraGO", sans-serif);
	font-size: 13px;
	font-weight: 400;
	color: #7a7a7a;
}

/* [2026-10-12] Elementor removal fallout — duplicate page titles.
   /order/ (and any page built on Elementor's "canvas" template) rendered with
   NO theme chrome. With Elementor uninstalled WordPress falls back to the normal
   page template, which prints .tr-entry__title above the content — so the order
   page showed a giant untranslated "Order" heading above the form's own
   "შეკვეთის გაფორმება" title. The form supplies its heading; hide the theme's. */
body:has(.tr-ord) .tr-entry__title { display: none; }