/**
 * GEMKIBO — batch poprawek mobilnych (2026-06-03). Same overrides @media.
 * Trzymane osobno, żeby nie dłubać w zablokowanych plikach layoutu.
 */

/* #2 — ukryj ikonę wyszukiwarki w nagłówku na mobile (search jest w drawerze;
   ikona powodowała że header wyjeżdżał za ekran). */
@media (max-width: 1023px) {
	#gk-search-toggle { display: none !important; }
}

/* #3 — hero + archiwum: na mobile padding-top od headera ~20px (było ~80+80). */
@media (max-width: 768px) {
	.gk-hero { padding-top: 20px !important; }
	.gk-archive-v5, .gk-archive-v5__hero, .gk-archive-v5__head, .gk-archive-v5__main { padding-top: 20px !important; }
	/* #3b 2026-06-03 — wrapper WooCommerce .site-main (wewnątrz .gk-archive-v5) miał
	   ~80px padding-top → hero listingu był ~74px od headera. Redukcja do 0 (clearance
	   daje już .gk-archive-v5 20px). Scoped do archiwum, by nie ruszać cart/checkout. */
	body.gk-archive-v5-body .site-main { padding-top: 20px !important; }
}

/* #5 — usuń CAŁY zielony pasek sticky CTA na mobile. */
@media (max-width: 768px) {
	#gk-sticky-cta, .gk-sticky-cta { display: none !important; }
}

/* #6 — drawer kafelek „Promocje": animowane gradientowe tło + biały tekst.
   Prefix .gk-drawer--premium, by bić istniejącą regułę (0,3,1) w mobile-drawer.css. */
.gk-drawer--premium .gk-drawer__list a.is-promo {
	background: linear-gradient(120deg, #5DA935, #1F3D14, #4F9028, #74E518, #5DA935) !important;
	background-size: 300% 300% !important;
	animation: gk-promo-gradient 4.5s ease infinite;
	color: #FFFFFF !important;
	border-radius: 12px;
	border: 0 !important;
}
.gk-drawer--premium .gk-drawer__list a.is-promo span,
.gk-drawer--premium .gk-drawer__list a.is-promo .gk-drawer__arrow { color: #FFFFFF !important; stroke: #FFFFFF !important; }
@keyframes gk-promo-gradient {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* #8 — PDP: pływająca ikona cookie (Complianz) wyżej, żeby nie zasłaniała
   sticky paska „dodaj do koszyka". */
@media (max-width: 768px) {
	body.single-product #cmplz-manage-consent .cmplz-manage-consent {
		bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* #9 — breadcrumb na mobile: jedna linia, mniejszy, bez zawijania (oszczędność miejsca). */
@media (max-width: 768px) {
	.gk-archive-hero__breadcrumb {
		font-size: 11px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}
}

/* #10 — ukryj hero thumbs na mobile. */
@media (max-width: 768px) {
	.gk-hero__thumbs { display: none !important; }
}

/* #11 — hero: 2 przyciski (Zobacz produkty / Nasza misja) w jednym wierszu na mobile. */
@media (max-width: 768px) {
	.gk-hero__cta-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; gap: 10px; }
	.gk-hero__cta-row > .gk-btn { flex: 1 1 0; min-width: 0; text-align: center; justify-content: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
}

/* #12 — logo trochę mniejsze na mobile (było 22px). html-prefix bije .gk-header (0,3,0). */
@media (max-width: 1023px) {
	html .gk-header .gk-header__logo img,
	body.single-product .gk-header__logo img { height: 18px !important; }
}

/* #14 — PDP sticky buy-card: mniejszy font „Dodaj do koszyka" (DE „In den Warenkorb"
   jest długie i przepełniało przycisk na mobile). */
@media (max-width: 768px) {
	#gk-pdp-v5-buy-card .gk-pdp-v5__buy-cta,
	#gk-pdp-v5-buy-card .gk-pdp-v5__buy-cta span,
	.gk-pdp-v5__buy-cta.single_add_to_cart_button {
		font-size: 13.5px !important;
		letter-spacing: 0 !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

/* #15 — ukryj pływającą ikonę cookie gdy otwarty jakikolwiek drawer (mini-cart,
   wishlist, mobile) — wcześniej wystawała nad drawer. */
body:has(.gk-drawer--premium.is-open) #cmplz-manage-consent .cmplz-manage-consent,
body:has(#gk-mini-cart.is-open) #cmplz-manage-consent .cmplz-manage-consent,
body:has(#gk-minicart.is-open) #cmplz-manage-consent .cmplz-manage-consent,
body:has(#gk-wishlist-drawer.is-open) #cmplz-manage-consent .cmplz-manage-consent,
body.gk-scroll-locked #cmplz-manage-consent .cmplz-manage-consent { display: none !important; }

/* #7 — opinie na mobile jako swipe-carousel (scroll-snap, bez JS). */
@media (max-width: 768px) {
	.gk-reviews__grid {
		display: flex !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 14px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 6px;
		scroll-padding-left: 16px;
	}
	.gk-reviews__grid::-webkit-scrollbar { display: none; }
	.gk-reviews__grid > * { flex: 0 0 86% !important; scroll-snap-align: center; min-width: 0; }
}

/* #4 — loader/placeholder dla leniwie ładowanych zdjęć (shimmer → fade-in). */
img.gk-img-loading {
	background: linear-gradient(110deg, #eceff1 28%, #f6f8f9 50%, #eceff1 72%);
	background-size: 200% 100%;
	animation: gk-img-shimmer 1.4s ease-in-out infinite;
}
img.gk-img-ready { animation: gk-img-fade .35s ease; }
@keyframes gk-img-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes gk-img-fade { from { opacity: 0; } to { opacity: 1; } }

/* #16 — drawer kontakt: mniejszy font, żeby email (sklep@gemkibo.pl) zmieścił się w całości. */
.gk-drawer--premium .gk-drawer__contact a { font-size: 0.7rem !important; }
.gk-drawer--premium .gk-drawer__contact a span { letter-spacing: -0.01em; }

/* #17 — fix animacji drawera na iOS Safari: stan „is-prep" = kontener widoczny,
   panel wciąż za ekranem (transform zostaje z bazy). Dopiero next-frame is-open
   przesuwa panel → transition ma od czego animować (iOS nie interpoluje gdy
   visibility i transform zmieniają się w tej samej klatce). */
.gk-drawer--premium.is-prep { visibility: visible !important; opacity: 1 !important; }