/* Columbus Garaż – kolory z palety Kadence (jak inc/columbus-fitment.php w motywie). */
:root {
	--cg-primary: var(--global-palette1, #2B6CB0);
	--cg-primary-dark: var(--global-palette2, #215387);
	--cg-text: var(--global-palette3, #1A202C);
	--cg-muted: var(--global-palette6, #718096);
	--cg-soft: var(--global-palette7, #EDF2F7);
	--cg-bg: var(--global-palette9, #ffffff);
	--cg-success: var(--global-palette11, #13612e);
	--cg-border: #d8dee8;
	--cg-radius: 0;
	/* Przyciski bez zaokrągleń + wspólna szerokość kolumny przycisków na karcie produktu. */
	--cg-btn-radius: 0;
	--cg-col: 380px;
}

.cg-icon-svg { flex: 0 0 auto; vertical-align: middle; }

/*
 * Kadence stylizuje każdy button:hover / :focus (biały tekst, tło przycisku motywu, cień).
 * Każdy przycisk wtyczki ma więc jawnie ustawiony kolor i tło także na hover/focus.
 */
.cg-link:hover, .cg-link:focus { color: var(--cg-primary-dark); background: none; box-shadow: none; }
.cg-remove:hover, .cg-remove:focus { color: var(--global-palette13, #b82105); background: var(--cg-soft); box-shadow: none; }
.cg-drawer__close:hover, .cg-drawer__close:focus { color: var(--cg-text); background: none; box-shadow: none; }
.cg-header-icon:hover, .cg-header-icon:focus { color: var(--cg-primary); background: none; box-shadow: none; }
.cg-toast__link:hover, .cg-toast__link:focus { color: #fff; background: none; box-shadow: none; }
.cg-fab:hover, .cg-fab:focus { color: #fff; background: var(--cg-primary-dark); }
.cg-button:hover, .cg-button:focus { color: #fff; background: var(--cg-primary-dark); border-color: var(--cg-primary-dark); box-shadow: none; }
.cg-button--ghost:hover, .cg-button--ghost:focus { color: var(--cg-primary-dark); background: var(--cg-soft); }
.cg-button:disabled:hover { background: var(--cg-primary); border-color: var(--cg-primary); }
.car-filter .cg-cf-save:hover, .car-filter .cg-cf-save:focus { color: #2e7d32; background: #f1f8f1; }
.cg-add__toggle:hover { color: var(--cg-primary-dark); }
.cg-button, .cg-btn { text-transform: none; letter-spacing: normal; }
.cg-button:disabled, .cg-button[disabled] { color: #fff; background: var(--cg-primary); border-color: var(--cg-primary); opacity: .45; }
html.cg-lock { overflow: hidden; }

/* ---------- Przyciski ogólne ---------- */
.cg-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 9px 16px; border-radius: var(--cg-btn-radius); border: 1px solid var(--cg-primary);
	background: var(--cg-primary); color: #fff; font-weight: 600; font-size: 14px; line-height: 1.2;
	cursor: pointer; text-decoration: none; white-space: nowrap;
}
.cg-button:hover { background: var(--cg-primary-dark); border-color: var(--cg-primary-dark); color: #fff; }
.cg-button:disabled { opacity: .5; cursor: not-allowed; }
.cg-button--sm { padding: 6px 10px; font-size: 13px; }
.cg-button--ghost { background: var(--cg-bg); color: var(--cg-primary); }
.cg-button--ghost:hover { background: var(--cg-soft); color: var(--cg-primary-dark); }

.cg-link {
	background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 14px;
	color: var(--cg-primary); text-decoration: underline; text-underline-offset: 2px;
}
.cg-link:hover { color: var(--cg-primary-dark); }
.cg-link--small { font-size: 12px; font-weight: 400; margin-left: auto; }

.cg-remove {
	flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border-radius: var(--cg-btn-radius);
	border: 0; background: transparent; color: var(--cg-muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.cg-remove:hover { background: var(--cg-soft); color: var(--global-palette13, #b82105); }

.cg-button:focus-visible, .cg-link:focus-visible, .cg-remove:focus-visible, .cg-btn:focus-visible,
.cg-fab:focus-visible, .cg-header-icon:focus-visible, .cg-drawer__close:focus-visible, .cg-cf-save:focus-visible {
	outline: 2px solid var(--cg-primary); outline-offset: 2px;
}

.cg-muted { color: var(--cg-muted); font-weight: 400; font-size: 13px; }
.cg-empty { margin: 0 0 12px; color: var(--cg-muted); font-size: 14px; }

.cg-select {
	width: 100%; padding: 9px 12px; font-size: 14px; color: var(--cg-text);
	border: 1px solid var(--cg-border); border-radius: var(--cg-btn-radius); background-color: var(--cg-bg); box-sizing: border-box;
}
.cg-select:disabled { background-color: #f5f5f5; color: #999; }
.cg-select--sm { width: auto; max-width: 100%; padding: 4px 8px; font-size: 12px; margin-top: 6px; }

.cg-badge {
	position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 999px; background: var(--global-palette13, #b82105); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box;
}
.cg-badge[hidden] { display: none; }

/* ---------- "Dodaj do garażu" przy produkcie ---------- */
/* Wygląd wspólny z "Sprawdź dopasowanie auta" (motyw: inc/columbus-fitment.php). */
.cg-product--single { display: block; margin: 0 0 16px; }
/* Pod "Sprawdź dopasowanie auta" – ta sama szerokość (inc/columbus-fitment.php: max-width 380px). */
.cg-product--single .cg-btn { display: flex; width: 100%; max-width: var(--cg-col); box-sizing: border-box; }

/*
 * Karta produktu: wszystkie przyciski w jednej kolumnie o tej samej szerokości
 * ("Dodaj do koszyka", "Sprawdź dopasowanie auta" – inc/columbus-fitment.php, "Dodaj do garażu").
 */
.single-product .summary form.cart:not(.variations_form),
.single-product .summary .woocommerce-variation-add-to-cart {
	display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; max-width: var(--cg-col);
}
.single-product .summary form.cart .single_add_to_cart_button { flex: 1 1 auto; margin: 0; border-radius: var(--cg-btn-radius); }
.cg-product--loop { margin-top: 8px; }
/* Kadence: przyciski listingu siedzą w .product-action-wrap (flex) – nasz blok w osobnym wierszu. */
.product-action-wrap:has(.cg-product--loop) { flex-wrap: wrap; }
.product-action-wrap .cg-product--loop { flex: 1 0 100%; width: 100%; }
.product-action-wrap:has(.cg-product--loop) > .button { flex: 1 0 100%; width: 100%; justify-content: center; text-align: center; box-sizing: border-box; }
/* Bloki WooCommerce (Product Collection, siatki produktów) – wyśrodkowany, pod "Dodaj do koszyka". */
.wc-block-product .cg-product--loop,
.wc-block-grid__product .cg-product--loop { display: block; margin: 8px 0 0; }
/* "Dodaj do koszyka" z bloków na tę samą szerokość co "Do garażu". */
.wc-block-product:has(.cg-product--loop) .wc-block-components-product-button,
.wc-block-grid__product:has(.cg-product--loop) .wp-block-button { display: block; width: 100%; margin-left: 0; margin-right: 0; }
.wc-block-product:has(.cg-product--loop) .wc-block-components-product-button__button,
.wc-block-grid__product:has(.cg-product--loop) .wp-block-button__link { display: flex; justify-content: center; width: 100%; box-sizing: border-box; }

.cg-btn {
	--cg-btn-accent: var(--cg-primary);
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 46px; padding: 10px 18px; border-radius: var(--cg-btn-radius); cursor: pointer;
	border: 2px solid var(--cg-btn-accent); background: var(--cg-bg); color: var(--cg-text);
	font-weight: 600; font-size: 15px; line-height: 1.2; text-transform: none; letter-spacing: normal;
	box-shadow: none; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
/* Kadence nadpisuje button:hover – kolory ustawiamy jawnie dla każdego stanu. */
.cg-btn:hover, .cg-btn:focus-visible {
	background: var(--cg-btn-accent); color: #fff; border-color: var(--cg-btn-accent);
	transform: translateY(-2px); box-shadow: 0 8px 18px rgba(43, 108, 176, .28);
}
.cg-btn:focus:not(:focus-visible):not(:hover) { background: var(--cg-bg); color: var(--cg-text); box-shadow: none; transform: none; }
.cg-btn:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(43, 108, 176, .2); }

/* Ikona garażu ze znaczkiem + / ✓ / × */
.cg-btn__icon { position: relative; display: inline-flex; margin-right: 6px; color: var(--cg-btn-accent); transition: color .2s, transform .25s; }
.cg-btn:hover .cg-btn__icon, .cg-btn:focus-visible .cg-btn__icon { color: #fff; transform: scale(1.08); }
.cg-btn__badge {
	position: absolute; right: -7px; top: -6px; width: 15px; height: 15px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--cg-btn-accent); color: #fff; box-shadow: 0 0 0 2px var(--cg-bg);
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s, color .2s, box-shadow .2s;
}
.cg-btn__badge svg { position: absolute; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .15s; }
.cg-btn__check { opacity: 0; }
.cg-btn:hover .cg-btn__badge, .cg-btn:focus-visible .cg-btn__badge {
	background: #fff; color: var(--cg-btn-accent); box-shadow: 0 0 0 2px var(--cg-btn-accent);
	transform: rotate(90deg) scale(1.2);
}

/* W garażu: wypełniony, ✓ – na hover × (usuń) */
.cg-btn.is-active { --cg-btn-accent: var(--cg-success); background: var(--cg-success); border-color: var(--cg-success); color: #fff; }
.cg-btn.is-active .cg-btn__icon { color: #fff; }
.cg-btn.is-active .cg-btn__badge { background: #fff; color: var(--cg-success); box-shadow: 0 0 0 2px var(--cg-success); }
.cg-btn.is-active .cg-btn__plus { opacity: 0; }
.cg-btn.is-active .cg-btn__check { opacity: 1; }
.cg-btn.is-active:hover, .cg-btn.is-active:focus-visible { background: #0f4f25; border-color: #0f4f25; color: #fff; box-shadow: 0 8px 18px rgba(19, 97, 46, .3); }
.cg-btn.is-active:focus:not(:focus-visible):not(:hover) { background: var(--cg-success); color: #fff; }
.cg-btn.is-active:hover .cg-btn__badge, .cg-btn.is-active:focus-visible .cg-btn__badge {
	background: var(--global-palette13, #b82105); color: #fff; box-shadow: 0 0 0 2px #fff; transform: rotate(45deg) scale(1.2);
}
.cg-btn.is-active:hover .cg-btn__plus, .cg-btn.is-active:focus-visible .cg-btn__plus { opacity: 1; }
.cg-btn.is-active:hover .cg-btn__check, .cg-btn.is-active:focus-visible .cg-btn__check { opacity: 0; }

/* Po dodaniu: ikona "podskakuje" */
.cg-btn.is-pop .cg-btn__icon { animation: cg-pop .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cg-pop {
	0% { transform: scale(1); }
	35% { transform: scale(1.35) translateY(-3px); }
	65% { transform: scale(.92); }
	100% { transform: scale(1); }
}

.cg-btn--loop { width: 100%; min-height: 38px; padding: 7px 10px; font-size: 13px; gap: 8px; border-width: 1.5px; }
.cg-btn--loop .cg-btn__icon { margin-right: 4px; }
.cg-btn--loop .cg-btn__badge { width: 13px; height: 13px; right: -6px; top: -5px; }
.cg-btn--loop:hover, .cg-btn--loop:focus-visible { transform: translateY(-1px); }

@media (max-width: 560px) {
	.cg-product--single .cg-btn, .cg-fit--single { max-width: none; }
	.single-product .summary form.cart:not(.variations_form),
	.single-product .summary .woocommerce-variation-add-to-cart { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cg-btn, .cg-btn__icon, .cg-btn__badge { transition: none; }
	.cg-btn:hover, .cg-btn--loop:hover { transform: none; }
	.cg-btn.is-pop .cg-btn__icon { animation: none; }
}

/* ---------- "Pasuje do Twojego auta" ---------- */
.cg-fit[hidden] { display: none !important; }
.cg-fit__check { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Karta produktu: box nad przyciskami, szerokość kolumny przycisków */
.cg-fit--single {
	display: flex; align-items: center; gap: 12px; box-sizing: border-box;
	width: 100%; max-width: var(--cg-col); margin: 14px 0 10px; padding: 10px 14px;
	background: #eef7f1; border: 1px solid #bfe0c9; border-left: 4px solid var(--cg-success); color: var(--cg-text);
}
.cg-fit--single ~ .columbus-fitment { margin-top: 0; }
.cg-fit__icon {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 28px; height: 28px; background: var(--cg-success); color: #fff;
}
.cg-fit__icon .cg-fit__check { width: 16px; height: 16px; }
.cg-fit__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cg-fit__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cg-success); }
.cg-fit__car { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }

/* Listing: krótki znaczek nad "Do garażu" */
.cg-fit--loop {
	display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 6px; padding: 4px 8px;
	background: #eef7f1; color: var(--cg-success); font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center;
}

/* Panel garażu: "✓ Pasuje" przy produkcie */
.cg-fit--inline { display: inline-flex; align-items: center; gap: 4px; margin: 4px 8px 0 0; color: var(--cg-success); font-size: 12px; font-weight: 600; }

/* ---------- Pasek na archiwum auta ---------- */
.cg-archive-bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
	margin: 0 0 20px; padding: 12px 16px; border-radius: var(--cg-radius);
	background: var(--cg-soft); border: 1px solid var(--cg-border); color: var(--cg-text); font-size: 14px;
}
.cg-archive-bar[hidden] { display: none; }
.cg-archive-bar > .cg-icon-svg { color: var(--cg-primary); }
.cg-archive-bar__text { flex: 1 1 240px; }
.cg-archive-bar.is-saved { background: #eef7f1; border-color: #bfe0c9; }
.cg-archive-bar.is-saved > .cg-icon-svg { color: var(--cg-success); }

/* ---------- Przycisk w filtrze auta (wtyczka car-filter) ---------- */
/* .car-filter button stylizuje każdy przycisk w formularzu – nadpisujemy wyższą specyficznością. */
.car-filter .cg-cf-save {
	grid-column: 1 / -1; border-radius: var(--cg-btn-radius); padding: 12px 24px; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0;
	color: #2e7d32; background: #fff; border: 2px solid #4caf50; box-shadow: none;
}
.car-filter .cg-cf-save:hover { background: #f1f8f1; transform: none; box-shadow: none; }
.car-filter .cg-cf-save::after { content: none; }
.car-filter .cg-cf-save.is-active, .car-filter .cg-cf-save:disabled { cursor: default; opacity: 1; background: #f1f8f1; }
.car-filter .cg-cf-save[hidden] { display: none; }

/* ---------- Pływający przycisk + ikona w nagłówku ---------- */
.cg-fab {
	position: fixed; right: 20px; bottom: 20px; z-index: 9990;
	width: 56px; height: 56px; border-radius: var(--cg-btn-radius); border: 0; padding: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--cg-primary); color: #fff; cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.cg-fab:hover { background: var(--cg-primary-dark); }

.cg-header-icon {
	position: relative; display: inline-flex; align-items: center; gap: 6px;
	padding: 6px; border: 0; background: none; color: inherit; cursor: pointer; font: inherit;
}

/* ---------- Panel (drawer) ---------- */
.cg-drawer { position: fixed; inset: 0; z-index: 100000; }
.cg-drawer[hidden] { display: none; }
.cg-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s; }
.cg-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw);
	display: flex; flex-direction: column; background: var(--cg-bg); color: var(--cg-text);
	box-shadow: -8px 0 30px rgba(0, 0, 0, .2); transform: translateX(100%); transition: transform .25s ease;
}
.cg-drawer.is-open .cg-drawer__backdrop { opacity: 1; }
.cg-drawer.is-open .cg-drawer__panel { transform: none; }
.cg-drawer__head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px 20px; border-bottom: 1px solid var(--cg-border);
}
.cg-drawer__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; }
.cg-drawer__close { border: 0; background: none; font-size: 32px; line-height: 1; padding: 0 6px; cursor: pointer; color: inherit; }
.cg-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 28px; overscroll-behavior: contain; }

@media (prefers-reduced-motion: reduce) {
	.cg-drawer__panel, .cg-drawer__backdrop, .cg-toast { transition: none; }
}

/* ---------- Zawartość garażu (panel i Moje konto) ---------- */
.cg-sec { margin-bottom: 24px; }
.cg-sec__title { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 16px; }

.cg-vehicles, .cg-products, .cg-recent { list-style: none; margin: 0; padding: 0; }

.cg-vehicle {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
	margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--cg-border); border-radius: var(--cg-radius);
}
.cg-vehicle.is-active { border-color: var(--cg-primary); background: var(--cg-soft); }
.cg-vehicle__pick { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; margin: 0; cursor: pointer; font-weight: 600; font-size: 14px; }
.cg-vehicle__pick input { margin: 0; accent-color: var(--cg-primary); }
.cg-vehicle__meta { display: flex; align-items: center; gap: 10px; }
.cg-tag {
	padding: 2px 8px; border-radius: 999px; background: var(--cg-primary); color: #fff;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}

.cg-context {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
	margin: 0 0 10px; padding: 10px 12px; border: 1px dashed var(--cg-primary); border-radius: var(--cg-radius); font-size: 14px;
}
.cg-context .cg-button { margin-left: auto; }

.cg-add { margin-top: 4px; }
.cg-add__toggle { cursor: pointer; color: var(--cg-primary); font-weight: 600; font-size: 14px; padding: 4px 0; }
.cg-add__form { display: grid; gap: 8px; margin-top: 10px; }

.cg-group { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--cg-muted); }

.cg-prod {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 10px 0; border-bottom: 1px solid var(--cg-border);
}
.cg-prod:last-child { border-bottom: 0; }
.cg-prod.is-missing { align-items: center; justify-content: space-between; color: var(--cg-muted); font-size: 14px; }
.cg-prod__img { flex: 0 0 64px; }
.cg-prod__img img { display: block; width: 64px; height: 64px; object-fit: contain; border-radius: 6px; background: #f7f7f7; }
.cg-prod__body { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.cg-prod__name { display: block; color: var(--cg-text); font-weight: 600; text-decoration: none; line-height: 1.3; }
.cg-prod__name:hover { color: var(--cg-primary); }
.cg-prod__sku { display: block; font-size: 12px; }
.cg-prod__price { margin-top: 2px; font-weight: 600; }
.cg-prod__price del { color: var(--cg-muted); font-weight: 400; }
.cg-prod__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.cg-recent li {
	display: flex; justify-content: space-between; gap: 10px;
	padding: 6px 0; border-bottom: 1px solid var(--cg-border); font-size: 14px;
}
.cg-recent li:last-child { border-bottom: 0; }
.cg-recent a { color: var(--cg-primary); }

.cg-note { margin: 0; padding: 10px 12px; border-radius: var(--cg-radius); background: var(--cg-soft); font-size: 13px; }

/* ---------- Pełna podstrona: /garaz/ i Moje konto → Mój garaż ---------- */
.cg-page { max-width: 1200px; }
.cg-page-soon { padding: 24px; background: var(--cg-soft); text-align: center; }
.cg-garage--full { container-type: inline-size; }
.cg-garage__more { display: flex; width: 100%; margin-top: 4px; box-sizing: border-box; }

/* Baner z aktywnym autem */
.cg-hero {
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
	margin: 0 0 28px; padding: 22px 24px; background: var(--cg-text); color: #fff;
	border-left: 6px solid var(--cg-primary);
}
.cg-hero > .cg-icon-svg { width: 44px; height: 44px; color: #fff; opacity: .9; }
.cg-hero__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.cg-hero__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #9ecbff; }
.cg-hero__title { font-size: 26px; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.cg-hero__sub { font-size: 14px; color: rgba(255, 255, 255, .75); }
.cg-hero .cg-hero__cta { padding: 13px 22px; font-size: 15px; }
.cg-hero--empty { background: var(--cg-soft); color: var(--cg-text); border-left-color: var(--cg-primary); }
.cg-hero--empty > .cg-icon-svg { color: var(--cg-primary); }
.cg-hero--empty .cg-hero__label { color: var(--cg-primary); }
.cg-hero--empty .cg-hero__title { color: var(--cg-text); }
.cg-hero--empty .cg-hero__sub { color: var(--cg-muted); }

/* Dwie kolumny: auta | produkty (gdy jest miejsce) */
.cg-layout { display: grid; gap: 28px; }
@container (min-width: 760px) {
	.cg-layout { grid-template-columns: minmax(280px, 340px) 1fr; align-items: start; }
	.cg-layout__side { position: sticky; top: 100px; }
}
.cg-garage--full .cg-sec__title { font-size: 18px; padding-bottom: 8px; border-bottom: 2px solid var(--cg-text); }
.cg-garage--full .cg-add__form .cg-button { width: 100%; }

/* Produkty jako kafelki */
.cg-garage--full .cg-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.cg-garage--full .cg-group { margin: 22px 0 10px; }
.cg-garage--full .cg-group:first-child { margin-top: 0; }
.cg-garage--full .cg-prod {
	position: relative; flex-direction: column; align-items: stretch; gap: 10px;
	padding: 12px; border: 1px solid var(--cg-border); background: var(--cg-bg);
	transition: border-color .2s, box-shadow .2s;
}
.cg-garage--full .cg-prod:last-child { border-bottom: 1px solid var(--cg-border); }
.cg-garage--full .cg-prod:hover { border-color: var(--cg-primary); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.cg-garage--full .cg-prod__img { flex: none; }
.cg-garage--full .cg-prod__img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 0; }
.cg-garage--full .cg-prod__name { font-size: 14px; }
.cg-garage--full .cg-prod__price { font-size: 16px; margin-top: 4px; }
.cg-garage--full .cg-prod .cg-select--sm { width: 100%; }
.cg-garage--full .cg-prod__actions { flex-direction: row; align-items: center; margin-top: auto; }
.cg-garage--full .cg-prod__actions .cg-button { flex: 1; }
.cg-garage--full .cg-prod__actions .cg-remove { position: absolute; top: 6px; right: 6px; background: rgba(255, 255, 255, .9); }
.cg-garage--full .cg-prod.is-missing { flex-direction: row; }
.cg-garage--full .cg-prod.is-missing .cg-remove { position: static; }

.cg-page .cg-add__form { grid-template-columns: 1fr; }

@media (max-width: 640px) {
	.cg-hero { padding: 18px; }
	.cg-hero__title { font-size: 21px; }
	.cg-hero .cg-hero__cta { width: 100%; }
	.cg-garage--full .cg-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.cg-prod__img { flex-basis: 52px; }
	.cg-prod__img img { width: 52px; height: 52px; }
	.cg-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; }
}

/* ---------- Powiadomienie ---------- */
.cg-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 100001;
	display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
	padding: 12px 18px; border-radius: var(--cg-radius); background: var(--cg-text); color: #fff;
	font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	transform: translate(-50%, 20px); opacity: 0; transition: opacity .25s, transform .25s;
}
.cg-toast[hidden] { display: none; }
.cg-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.cg-toast__link { border: 0; background: none; padding: 0; color: #9ecbff; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; white-space: nowrap; }

/* =====================================================================
 * 1.2 – pasek "tylko pasujące", koszyk/checkout, podpowiedzi, wycena,
 *       edycja auta, powiadomienia, udostępnianie, ikona nagłówka
 * ===================================================================== */

/* Listing: "Pokaż tylko części do mojego auta" */
.cg-shop-bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
	margin: 0 0 20px; padding: 12px 16px; background: var(--cg-soft); border-left: 4px solid var(--cg-primary);
	color: var(--cg-text); font-size: 14px;
}
.cg-shop-bar[hidden] { display: none; }
.cg-shop-bar > .cg-icon-svg { color: var(--cg-primary); }
.cg-shop-bar__text { flex: 1 1 240px; }
.cg-shop-bar.is-filtered { background: #eef7f1; border-left-color: var(--cg-success); }
.cg-shop-bar__check { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--cg-success); color: #fff; }
.cg-shop-bar.is-empty { border-left-color: var(--cg-border); }

/* Koszyk: czy produkty pasują do auta z garażu */
.cg-cart-check {
	display: flex; align-items: flex-start; gap: 14px; margin: 0 0 20px; padding: 16px 18px;
	border: 1px solid; border-left-width: 5px; color: var(--cg-text); font-size: 14px; line-height: 1.45;
}
.cg-cart-check.is-ok { align-items: center; padding: 10px 16px; background: #f1f8f4; border-color: #bfe0c9; border-left-color: var(--cg-success); }
.cg-cart-check.is-warning { background: #fff8eb; border-color: #f5d49a; border-left-color: #d97706; }
.cg-cart-check__icon {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 30px; height: 30px; color: #fff; font-size: 17px; font-weight: 800; line-height: 1;
}
.cg-cart-check.is-ok .cg-cart-check__icon { width: 24px; height: 24px; font-size: 14px; background: var(--cg-success); }
.cg-cart-check.is-warning .cg-cart-check__icon { background: #d97706; }
.cg-cart-check__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cg-cart-check__title { font-size: 16px; }
.cg-cart-check.is-ok .cg-cart-check__body { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cg-cart-check__car { color: var(--cg-muted); }
.cg-cart-check__car b { color: var(--cg-text); }
.cg-cart-check__list { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 6px; }
.cg-cart-check__list li { margin: 0; padding: 8px 12px; background: #fff; border: 1px solid #f5d49a; }
.cg-cart-check__list a { display: block; color: var(--cg-text); font-weight: 600; text-decoration: none; }
.cg-cart-check__list a:hover { color: var(--cg-primary); text-decoration: underline; }
.cg-cart-check__fits { display: block; margin-top: 2px; color: #92400e; font-size: 12px; }
.cg-cart-check__help { margin: 4px 0 0; color: var(--cg-muted); font-size: 13px; }
.cg-cart-check__actions { flex: 0 0 auto; }
@media (max-width: 640px) {
	.cg-cart-check { flex-wrap: wrap; }
	.cg-cart-check__actions { flex-basis: 100%; }
	.cg-cart-check__actions .cg-button { width: 100%; }
}

/* Etykieta przy produkcie w koszyku */
.cg-cart-fit {
	display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px;
	font-size: 12px; font-weight: 600; line-height: 1.5;
}
.cg-cart-fit.is-ok { background: #eef7f1; color: var(--cg-success); }
.cg-cart-fit.is-warning { background: #fff3dc; color: #92400e; }

/* Checkout: "Zamówienie do auta" */
.cg-checkout-vehicle { margin: 0 0 16px; padding: 12px 14px; background: var(--cg-soft); border-left: 4px solid var(--cg-primary); font-size: 14px; }
.cg-checkout-vehicle label { display: flex; gap: 8px; align-items: flex-start; margin: 0; cursor: pointer; }
.cg-checkout-vehicle input[type="checkbox"] { margin-top: 3px; }
.cg-checkout-vehicle__notes { margin: 6px 0 0 24px; font-style: italic; }
.cg-checkout-vehicle__help { margin: 6px 0 0 24px; color: var(--cg-muted); font-size: 12px; }
.cg-order-vehicle { margin: 12px 0; }

/* Garaż: narzędzia, edycja auta, powiadomienia */
.cg-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.cg-tools:empty { display: none; }
.cg-vehicle__name { display: flex; flex-direction: column; min-width: 0; }
.cg-vehicle__sub { font-weight: 400; font-size: 12px; color: var(--cg-muted); }
.cg-vehicle__notes { flex: 1 0 100%; margin: 0; padding-left: 24px; font-size: 12px; color: var(--cg-muted); font-style: italic; }
.cg-vehicle__form { flex: 1 0 100%; display: grid; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--cg-border); }
.cg-vehicle__form label, .cg-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--cg-text); }
.cg-vehicle__form input, .cg-vehicle__form textarea,
.cg-field input, .cg-field select, .cg-field textarea {
	width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 14px; font-weight: 400;
	border: 1px solid var(--cg-border); border-radius: var(--cg-btn-radius); background: var(--cg-bg); color: var(--cg-text);
}
.cg-vehicle__form-actions { display: flex; align-items: center; gap: 12px; }

.cg-notify { margin: 0 0 24px; padding: 12px 14px; border: 1px solid var(--cg-border); font-size: 14px; }
.cg-notify[hidden] { display: none; }
.cg-notify p { margin: 0; }
.cg-notify__toggle { display: flex; gap: 10px; align-items: flex-start; margin: 0; cursor: pointer; }
.cg-notify__toggle input { margin-top: 3px; accent-color: var(--cg-primary); }
.cg-notify__toggle span { display: flex; flex-direction: column; gap: 2px; }
.cg-notify small { color: var(--cg-muted); font-size: 12px; }

/* Udostępniony garaż – kafelki produktów */
.cg-sug-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.cg-garage:not(.cg-garage--full) .cg-sug-list { grid-template-columns: 1fr; }
.cg-sug {
	display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px;
	background: var(--cg-bg); border: 1px solid var(--cg-border); transition: border-color .2s, box-shadow .2s;
}
.cg-sug:hover { border-color: var(--cg-primary); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.cg-sug__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f7f7f7; }
.cg-sug__name { color: var(--cg-text); font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.cg-sug__name:hover { color: var(--cg-primary); }
.cg-sug__price { font-weight: 700; font-size: 15px; }
.cg-sug__price del { color: var(--cg-muted); font-weight: 400; }
.cg-sug__actions { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: auto; }
.cg-sug__actions .cg-button, .cg-sug__actions .cg-btn { width: 100%; box-sizing: border-box; white-space: nowrap; }
.cg-btn--mini { min-height: 32px; padding: 5px 8px; font-size: 12px; gap: 6px; }
.cg-btn--mini .cg-btn__icon { margin-right: 0; }
.cg-btn--mini .cg-icon-svg { width: 16px; height: 16px; }
/* Panel boczny: kompaktowo – obrazek obok tekstu */
.cg-garage:not(.cg-garage--full) .cg-sug { display: grid; grid-template-columns: 64px 1fr; column-gap: 10px; }
.cg-garage:not(.cg-garage--full) .cg-sug__img { grid-row: span 4; }
.cg-garage:not(.cg-garage--full) .cg-sug__actions { grid-column: 1 / -1; }

.cg-shared { margin: 0 0 24px; padding: 18px; border: 2px dashed var(--cg-primary); }
.cg-shared__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cg-shared__head .cg-hero__label { color: var(--cg-primary); display: block; }
.cg-shared__title { font-size: 20px; }
.cg-shared__actions { display: flex; align-items: center; gap: 14px; }

/* Okno "Zapytaj o wycenę" */
.cg-dialog {
	width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0;
	border: 0; border-radius: 0; color: var(--cg-text); background: var(--cg-bg);
}
.cg-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.cg-quote { position: relative; display: grid; gap: 12px; padding: 28px 28px 24px; }
.cg-quote h2 { margin: 0; font-size: 24px; }
.cg-quote p { margin: 0; }
.cg-dialog__x { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: var(--cg-text); font-size: 30px; line-height: 1; cursor: pointer; padding: 2px 8px; }
.cg-dialog__x:hover, .cg-dialog__x:focus { background: none; color: var(--cg-primary); box-shadow: none; }
.cg-quote__items { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--cg-border); }
.cg-quote__item { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--cg-border); }
.cg-quote__item:last-child { border-bottom: 0; }
.cg-quote__item label { display: flex; align-items: flex-start; gap: 8px; flex: 1; margin: 0; font-size: 14px; cursor: pointer; }
.cg-quote__item label span { display: flex; flex-direction: column; }
.cg-quote__item small { color: var(--cg-muted); font-size: 12px; }
.cg-quote__item input[type="number"] { width: 64px; padding: 6px; border: 1px solid var(--cg-border); border-radius: var(--cg-btn-radius); text-align: center; }
.cg-quote__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cg-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.cg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.cg-quote__error { padding: 8px 12px; background: #fdecea; color: #8a1c0f; font-size: 14px; }
.cg-quote__error[hidden] { display: none; }
.cg-quote__actions { display: flex; justify-content: flex-end; gap: 10px; }
.cg-quote__done { display: grid; justify-items: center; gap: 12px; padding: 20px 0; text-align: center; }
.cg-quote__done > .cg-fit__check { width: 48px; height: 48px; padding: 10px; background: var(--cg-success); color: #fff; }

/* Ikona w nagłówku z nazwą auta */
.cg-header-icon__icon { position: relative; display: inline-flex; }
.cg-header-icon__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.cg-header-icon__text:empty { display: none; }
.cg-header-icon__label { font-weight: 600; font-size: 13px; }
.cg-header-icon__vehicle { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; opacity: .8; }
.cg-header-icon__vehicle[hidden] { display: none; }

@media (max-width: 640px) {
	.cg-quote { padding: 22px 16px 18px; }
	.cg-quote__actions { flex-direction: column-reverse; }
	.cg-quote__actions .cg-button { width: 100%; }
	.cg-sug-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.cg-sug__actions { grid-template-columns: 1fr; }
	.cg-header-icon__text { display: none; }
}