/*
 * Gemkibo Clean — main stylesheet
 * Modern CSS: custom properties, grid, flexbox, clamp(), :has(), aspect-ratio
 * Design tokens (kolory, fonts, spacing) — wypełnione w Fazie 0.4 (Playwright extract)
 */

@import url('./design-tokens.css');

/* === Reset + base === */
*, *::before, *::after { box-sizing: border-box; }
/* FIX 2026-05-30: overflow-x: clip — guard anti-poziomy-scroll (np. mega-menu na hover
   kategorii). clip NIE łamie position:sticky (w przeciwieństwie do hidden). */
html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; overflow-x: clip; }
body {
	margin: 0;
	font-family: var(--gk-font-body, system-ui, sans-serif);
	font-size: var(--gk-fs-body, 1rem);
	line-height: var(--gk-lh-body, 1.6);
	color: var(--gk-c-text, #1a1a1a);
	background: var(--gk-c-bg, #ffffff);
	-webkit-font-smoothing: antialiased;
	/* FIX 2026-06-01: dodatkowy guard (clip = bez scroll-context, OK dla sticky) —
	   twardo ucina poziomy bleed gdyby mega-menu/drawer wyszły poza viewport. */
	overflow-x: clip;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 1rem;
	font-family: var(--gk-font-heading, inherit);
	font-weight: 700;
	line-height: 1.2;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--gk-c-accent, #5cb85c); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Accessibility === */
.gk-skip-link {
	position: absolute; left: -9999px; top: 1rem;
	background: var(--gk-c-text); color: #fff; padding: .75rem 1rem; border-radius: .25rem;
	z-index: 9999;
}
.gk-skip-link:focus { left: 1rem; }

:focus-visible {
	outline: 2px solid var(--gk-c-accent, #5cb85c);
	outline-offset: 2px;
}

/* === Layout === */
.gk-container {
	max-width: var(--gk-container-max, 1280px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
}

/* === Generic page styles (1:1 typography z prod content pages) === */
.gk-page { padding-block: 60px; }
.gk-page__header { margin-bottom: 40px; }
.gk-page__title {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 700;
	color: rgb(17, 17, 17);
	margin: 0;
	line-height: 1.2;
}
.gk-page__content {
	max-width: 800px;
	font-size: 16px;
	line-height: 25.6px;
	color: rgb(17, 17, 17);
}
.gk-page__content img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	margin: 24px 0;
}
.gk-page__content strong { font-weight: 700; }
.gk-page__content h2 {
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	margin: var(--gk-sp-6) 0 var(--gk-sp-3);
}
.gk-page__content h3 {
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	margin: var(--gk-sp-5) 0 var(--gk-sp-2);
}
.gk-page__content p { margin: 0 0 var(--gk-sp-4); }
.gk-page__content ul, .gk-page__content ol {
	margin: 0 0 var(--gk-sp-4); padding-left: var(--gk-sp-5);
}
.gk-page__content li { margin-bottom: var(--gk-sp-2); }
.gk-page__content a { color: var(--gk-c-accent); }
.gk-page__content table {
	width: 100%; border-collapse: collapse; margin: var(--gk-sp-4) 0;
}
.gk-page__content th, .gk-page__content td {
	padding: var(--gk-sp-3); border-bottom: 1px solid var(--gk-c-border); text-align: left;
}
.gk-page__content th { font-weight: 700; background: var(--gk-c-bg-soft); }
.gk-page__content blockquote {
	border-left: 4px solid var(--gk-c-accent);
	padding-left: var(--gk-sp-4);
	margin: var(--gk-sp-5) 0;
	font-style: italic;
	color: var(--gk-c-text-muted);
}
.gk-page__content code {
	background: var(--gk-c-bg-soft); padding: 2px 6px; border-radius: 4px;
	font-size: .9em;
}

/* ============================================================ */
/* TOP USP BAR — marquee infinite scroll (clean reimpl. wd_marquee) */
/* ============================================================ */
.gk-topbar {
	background: #ffffff;
	color: rgb(0, 0, 0); /* z prod (was #111) */
	padding: 0;
	min-height: 94px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #f0f0f0;
	overflow: hidden;
	position: relative;
}
.gk-topbar__marquee {
	display: flex;
	width: max-content;
	animation: gk-marquee 30s linear infinite; /* z prod */
	will-change: transform;
}
.gk-topbar__track {
	display: flex;
	align-items: center;
	gap: 20px; /* z prod */
	padding-right: 20px;
	flex-shrink: 0;
}
.gk-topbar__item {
	display: flex; /* z prod (NIE inline-flex) */
	align-items: center;
	gap: 10px; /* z prod */
	font-size: 14px; /* z prod */
	font-weight: 700; /* z prod */
	color: rgb(0, 0, 0); /* z prod */
	white-space: nowrap;
	flex-shrink: 0;
}
.gk-topbar__icon {
	width: 42px;
	height: 42px;
	object-fit: contain;
	flex-shrink: 0;
}
.gk-topbar__label { line-height: 1; }

@keyframes gk-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.gk-topbar__marquee {
		animation: none;
		justify-content: center;
		width: 100%;
	}
	.gk-topbar__track:nth-child(2) { display: none; }
	.gk-topbar__track {
		justify-content: space-around;
		flex: 1;
		padding-right: 0;
	}
}

.gk-topbar:hover .gk-topbar__marquee { animation-play-state: paused; }

/* ============================================================ */
/* MAIN HEADER — z prod: transparent default, white+shadow na scroll */
/* ============================================================ */
.gk-header {
	background: transparent; /* z prod (was white) */
	padding: 0;
	min-height: 82px; /* z prod natural height */
	display: flex;
	align-items: center;
	border-bottom: 0; /* z prod (was 1px border) */
	position: sticky;
	top: 0;
	z-index: var(--gk-z-header);
	transition: background .25s ease, box-shadow .25s ease;
}
.gk-header.is-scrolled {
	background: #ffffff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.gk-header__inner {
	max-width: var(--gk-container-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
	display: grid;
	grid-template-columns: auto auto 1fr auto auto;
	align-items: center;
	gap: var(--gk-sp-5);
}
@media (max-width: 1024px) {
	.gk-header__inner {
		grid-template-columns: auto auto 1fr auto;
		grid-template-areas:
			"hamburger logo search tools"
			"nav nav nav nav";
		gap: var(--gk-sp-3);
	}
	.gk-header__hamburger { grid-area: hamburger; }
	.gk-header__logo { grid-area: logo; }
	.gk-header__search { grid-area: search; max-width: 100%; }
	.gk-header__tools { grid-area: tools; }
	.gk-header__nav { grid-area: nav; display: none; }
	.gk-header__nav.is-open { display: block; padding: var(--gk-sp-3) 0; border-top: 1px solid var(--gk-c-border); }
}

.gk-header__hamburger {
	display: none;
	background: transparent; border: 0; cursor: pointer;
	width: 32px; height: 32px;
	flex-direction: column; justify-content: center; gap: 4px;
	padding: 0;
}
.gk-header__hamburger span {
	display: block; width: 24px; height: 2px;
	background: var(--gk-c-text);
	transition: transform .25s ease;
}
@media (max-width: 1024px) {
	.gk-header__hamburger { display: flex; }
}

.gk-header__logo {
	display: inline-flex; align-items: center;
	text-decoration: none;
	color: var(--gk-c-text);
	padding: 0 10px;
}
.gk-header__logo img { height: 36px; width: auto; max-width: 250px; }
.gk-header__logo-text { font-weight: 800; font-size: 1.5rem; letter-spacing: 1px; }

.gk-header__nav-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: var(--gk-sp-5);
}
.gk-header__nav-list a {
	color: rgb(51, 51, 51);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	line-height: 19.6px;
	text-transform: capitalize;
	padding: 5px 0;
	transition: color .15s ease;
}
.gk-header__nav-list a:hover { color: var(--gk-c-accent); }

/* Search (parity: pill, soft border, no background fill) */
.gk-header__search {
	display: flex; align-items: center;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.106);
	border-radius: 42px;
	padding: 4px 8px 4px 20px;
	min-width: 280px;
	max-width: 420px;
	height: 42px;
}
.gk-header__search input[type="search"] {
	flex: 1;
	background: transparent; border: 0; outline: 0;
	padding: 0;
	font-size: 14px;
	color: rgb(51, 51, 51);
	min-width: 0;
}
.gk-header__search input[type="search"]::placeholder { color: rgb(120, 120, 120); }
.gk-header__search button {
	background: transparent; border: 0; cursor: pointer;
	color: rgb(51, 51, 51);
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}

/* Tools row (parity: icon buttons 42x42 pill) */
.gk-header__tools {
	display: flex; align-items: center; gap: 8px;
}
/* Header icons — flat z prod (no border, no pill) */
.gk-header__icon {
	color: rgb(51, 51, 51);
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border-radius: 0;
	background: transparent;
	border: 0;
	transition: color .15s ease;
	position: relative;
}
.gk-header__icon:hover {
	color: var(--gk-c-accent);
}
/* Cart — same look as other icons (NOT solid green); count badge shows green */
.gk-header__icon--cart {
	color: rgb(51, 51, 51);
	background: transparent;
}
.gk-header__cart-count {
	position: absolute;
	top: -2px; right: -4px;
	background: #ffffff;
	color: rgb(93, 169, 53);
	font-size: 11px;
	font-weight: 500;
	line-height: 18px;
	min-width: 18px; height: 18px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
}
.gk-header__cart-count:empty,
.gk-header__cart-count[data-cart-count="0"] { display: none; }

/* Cart icon as button (reset default browser styles) */
button.gk-header__icon {
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: transparent;
}

/* ============================================================ */
/* MINI-CART slide-out panel (right side, like prod Woodmart)    */
/* ============================================================ */
.gk-minicart {
	position: fixed;
	top: 0;
	right: 0;
	width: 400px;
	max-width: 90vw;
	height: 100vh;
	background: #fff;
	z-index: var(--gk-z-modal);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .3s ease;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}
.gk-minicart[hidden] {
	display: flex;
	transform: translateX(100%);
}
.gk-minicart.is-open {
	transform: translateX(0);
}
.gk-minicart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid rgb(229, 229, 229);
	flex-shrink: 0;
}
.gk-minicart__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}
.gk-minicart__close {
	background: rgb(247, 247, 247);
	border: 0;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: rgb(17, 17, 17);
	transition: background .2s ease;
}
.gk-minicart__close:hover {
	background: rgb(93, 169, 53);
	color: #fff;
}
.gk-minicart__body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px;
}

/* Backdrop overlay */
.gk-minicart__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: calc(var(--gk-z-modal) - 1);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}
.gk-minicart__backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

/* Mini-cart body — style WC native widget_shopping_cart */
.gk-minicart__body .woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gk-minicart__body .woocommerce-mini-cart__item,
.gk-minicart__body .mini_cart_item {
	display: flex;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid rgb(247, 247, 247);
	position: relative;
}
.gk-minicart__body .mini_cart_item img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: rgb(247, 247, 247);
	border-radius: 8px;
	padding: 4px;
	flex-shrink: 0;
}
.gk-minicart__body .mini_cart_item a:not(.remove) {
	color: rgb(17, 17, 17);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	display: block;
	margin-bottom: 4px;
	line-height: 1.4;
}
.gk-minicart__body .mini_cart_item .quantity {
	font-size: 13px;
	color: rgb(87, 87, 87);
}
.gk-minicart__body .mini_cart_item .amount {
	color: rgb(93, 169, 53);
	font-weight: 700;
}
.gk-minicart__body .mini_cart_item .remove {
	position: absolute;
	top: 16px;
	right: 0;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: rgb(155, 155, 155);
	font-size: 18px;
	font-weight: 300;
	text-decoration: none;
	border-radius: 50%;
}
.gk-minicart__body .mini_cart_item .remove:hover {
	color: rgb(217, 83, 79);
}
.gk-minicart__body .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	padding: 16px 0;
	border-top: 2px solid rgb(229, 229, 229);
	margin-top: 16px;
	font-size: 16px;
	font-weight: 700;
}
.gk-minicart__body .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}
.gk-minicart__body .woocommerce-mini-cart__buttons .button,
.gk-minicart__body .woocommerce-mini-cart__buttons .wc-forward {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 35px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: background .15s ease;
}
.gk-minicart__body .woocommerce-mini-cart__buttons .wc-forward[href*="koszyk"] {
	background: rgb(247, 247, 247);
	color: rgb(17, 17, 17);
}
.gk-minicart__body .woocommerce-mini-cart__buttons .checkout.wc-forward {
	background: rgb(93, 169, 53);
	color: #fff;
}
.gk-minicart__body .woocommerce-mini-cart__empty-message {
	text-align: center;
	padding: 40px 20px;
	color: rgb(87, 87, 87);
}

body.gk-minicart-open { overflow: hidden; }

/* TranslatePress + currency switcher inline styling */
.gk-header__tools .trp-language-switcher,
.gk-header__tools .wmc-currency,
.gk-header__tools .switcher_class {
	display: inline-flex; align-items: center;
	font-size: .8125rem;
	font-weight: 700;
}

/* ============================================================ */
/* FOOTER                                                         */
/* ============================================================ */
.gk-footer {
	background: rgb(15, 15, 15);
	color: rgba(255, 255, 255, 0.8);
	margin: 0; /* z prod */
	font-size: 16px;
	line-height: 1.6;
}
.gk-footer a { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 16px; }
.gk-footer a:hover { color: rgb(93, 169, 53); }

.gk-footer__main { padding-block: var(--gk-sp-7); }
.gk-footer__grid {
	display: grid; gap: var(--gk-sp-6);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.gk-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.gk-footer__grid { grid-template-columns: repeat(4, 1fr); }
}
.gk-footer__col-title {
	color: #fff;
	font-size: 1rem; font-weight: 700;
	margin: 0 0 var(--gk-sp-4);
}
.gk-footer__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: var(--gk-sp-2);
}
.gk-footer__list a { font-size: 16px; line-height: 1.6; }
.gk-footer__contact { margin: 0; }
.gk-footer__contact dt {
	font-weight: 700; color: rgba(255,255,255,.6);
	font-size: .75rem; text-transform: uppercase; letter-spacing: 1px;
	margin-top: var(--gk-sp-3);
}
.gk-footer__contact dt:first-child { margin-top: 0; }
.gk-footer__contact dd { margin: var(--gk-sp-1) 0 0; font-size: .9375rem; }
.gk-footer__address {
	font-style: normal;
	font-size: .9375rem;
	line-height: 1.6;
}

.gk-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-block: var(--gk-sp-4);
}
.gk-footer__bottom-inner {
	display: flex; flex-wrap: wrap; gap: var(--gk-sp-4);
	justify-content: space-between; align-items: center;
}
.gk-footer__copy { font-size: .8125rem; color: rgba(255, 255, 255, .6); }
.gk-footer__payments { display: flex; flex-wrap: wrap; gap: var(--gk-sp-2); }
.gk-payment-badge {
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .85);
	padding: .25rem .5rem;
	border-radius: var(--gk-radius-sm);
	font-size: .75rem;
	font-weight: 600;
}

/* === 404 === */
.gk-404 { text-align: center; padding: 4rem 1rem; }
.gk-404__title { font-size: clamp(4rem, 12vw, 8rem); margin: 0; }
.gk-404__msg { font-size: 1.25rem; margin-bottom: 2rem; }

/* === Btn (1:1 z Woodmart wd-product loop-standard: 12px/600/UPPERCASE/36px) === */
.gk-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 5px 24px; min-height: 36px;
	border-radius: 35px;
	font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.5px;
	text-decoration: none; transition: background .2s ease, transform .15s ease;
	border: 1px solid transparent; cursor: pointer;
	line-height: 1.4;
}
.gk-btn--primary { background: rgb(93, 169, 53); color: #fff; }
.gk-btn--primary:hover { background: rgb(98, 200, 16); color: #fff; text-decoration: none; }

/* Dark button variant (used in Premium Science CTA) */
.gk-btn--dark {
	background: rgb(17, 17, 17);
	color: #fff;
	text-transform: none;
	letter-spacing: 0;
}
.gk-btn--dark:hover { background: rgb(93, 169, 53); color: #fff; text-decoration: none; }