/*
 * gemkibo-clean — Home page V4 (Nike-style premium, vanilla CSS)
 * Zastępuje Tailwind CDN który był w page-strona-glowna.php
 */

/* === Design tokens (home-specific, complementary to design-tokens.css) === */
.gk-home {
	--gk-color-bg: #ffffff;
	--gk-color-surface: #f9f9f9;
	--gk-color-surface-low: #f3f3f4;
	--gk-color-surface-cream: #FAF8F4;
	--gk-color-dark: #1F3D14;
	--gk-color-primary: #2a6c00;
	--gk-color-primary-container: #5da935;
	--gk-color-accent-bio: #5DA935;
	--gk-color-emerald: #009668;
	--gk-color-text: #1a1c1c;
	--gk-color-text-muted: #41493a;
	--gk-color-text-soft: #9ba8b8;
	--gk-color-border: #EEEEEE;

	--gk-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--gk-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--gk-fs-display: clamp(38px, 5.5vw, 68px);
	--gk-fs-h1: clamp(32px, 4.2vw, 52px);
	--gk-fs-h2: clamp(26px, 3.4vw, 42px);
	--gk-fs-lead: clamp(15px, 1.3vw, 18px);
	--gk-fs-body: 15px;
	--gk-fs-caption: 12px;

	--gk-sp-sm: 16px;
	--gk-sp-md: 24px;
	--gk-sp-lg: 48px;
	--gk-sp-section: clamp(64px, 8vw, 120px);
	--gk-sp-section-lg: clamp(80px, 10vw, 160px);

	--gk-radius-md: 16px;
	--gk-radius-lg: 20px;
	--gk-radius-xl: 32px;
	--gk-radius-pill: 9999px;

	--gk-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
	--gk-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
	--gk-shadow-lg: 0 20px 50px -12px rgba(0,0,0,0.15);
	--gk-shadow-cta: 0 12px 32px rgba(42, 108, 0, 0.30);

	--gk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--gk-dur-fast: 200ms;
	--gk-dur-base: 300ms;
	--gk-dur-slow: 500ms;

	--gk-container: 1440px;
	--gk-px: clamp(20px, 4vw, 64px);

	color: var(--gk-color-text);
	font-family: var(--gk-font-body);
	font-size: var(--gk-fs-body);
	line-height: 1.6;
}

.gk-home main {
	padding-top: 80px; /* fixed header height */
}

/* Reserve scrollbar gutter — eliminuje skok layoutu gdy mini-cart/drawer
   lockuje body scroll. `overflow-y:scroll` na html GWARANTUJE że scrollbar
   jest zawsze widoczny (nawet gdy content nie scrolluje), więc body lock
   nie zmienia szerokości viewport. `scrollbar-gutter:stable` jako fallback. */
html {
	overflow-y: scroll;
	scrollbar-gutter: stable;
}

body.gk-scroll-locked {
	overflow: hidden;
}

/* Reset leftover section styles (parent theme CSS może wrzucić display:grid / max-width na <section>). */
.gk-home section {
	display: block;
	max-width: none;
	width: 100%;
}

/* === Reset / base ===
 * UWAGA: button-like anchors (.gk-btn, .gk-card__cta) ustawiają własny color.
 * Wymusiliśmy color:inherit na bare anchors tylko, żeby nie nadpisywać CTA.
 */
.gk-home a:not(.gk-btn):not(.gk-card__cta):not(.gk-mini-cart__cta):not(.gk-hero__cta-link):not(.gk-mini-cart__empty-cta):not(.gk-wishlist-drawer__empty-cta):not(.gk-wishlist-drawer__cta):not(.gk-sticky-cta):not(.gk-faq__contact-link):not(.gk-header__account-login-btn):not(.gk-header__promo-link):not(.gk-btn--secondary):not(.gk-blog__cat):not(.gk-article__cat):not(.gk-thankyou__order-cta):not(.gk-thankyou__hint-cta):not(.gk-error__action-btn):not(.gk-error__link):not(.gk-error__product):not(.gk-error__result-link):not(.gk-legal-link):not(.gk-checkout__back):not(.gk-wishlist-share__copy):not(.gk-wishlist-share__social):not(.gk-wishlist-share__close):not(.gk-article__share-btn):not(.gk-wishlist__card-add):not(#select-point) {
	color: inherit;
	text-decoration: none;
}
.gk-home a.gk-btn,
.gk-home a.gk-card__cta,
.gk-home a.gk-mini-cart__cta,
.gk-home a.gk-mini-cart__empty-cta,
.gk-home a.gk-wishlist-drawer__empty-cta,
.gk-home a.gk-wishlist-drawer__cta,
.gk-home a.gk-hero__cta-link,
.gk-home a.gk-sticky-cta {
	text-decoration: none;
}
.gk-home img { max-width: 100%; height: auto; display: block; }
.gk-home button { font-family: inherit; cursor: pointer; }
.gk-home input, .gk-home select, .gk-home textarea { font-family: inherit; }
.gk-home h1, .gk-home h2, .gk-home h3, .gk-home h4 {
	font-family: var(--gk-font-display);
	color: inherit;
}
/* FIX 2026-05-30: reset marginesu jako :where() (specyficzność 0,0,0) — był `margin:0`
   z 0,1,1 który BLOKOWAŁ marginesy nagłówków komponentów (np. tytuł→tekst przyklejone).
   Teraz to tylko domyślna 0, którą każda reguła komponentu (0,1,0) nadpisuje. Strony
   bez własnych marginesów nagłówków zostają na 0 (home bez zmian). */
:where(.gk-home) :where(h1, h2, h3, h4) { margin: 0; }
.gk-home h1, .gk-home h2 { color: var(--gk-color-dark); }
.gk-home .gk-story h1, .gk-home .gk-story h2,
.gk-home .gk-story__title,
.gk-home .gk-newsletter h2, .gk-home .gk-newsletter__title,
.gk-home .gk-newsletter-modal__title,
.gk-home .gk-footer h1, .gk-home .gk-footer h2, .gk-home .gk-footer h3, .gk-home .gk-footer h4 {
	color: #fff;
}

/* === Material Symbols === */
.gk-home .material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}