/* ==========================================================================
   GYN Shop 1.2.0 (1.3.0: tokeny kształtu): przyciski nagłówka (Infolinia, Umów się stacjonarnie), cały sklep.
   1.3.1 „dwa pomarańcze”: pasek #F15808 (ustawienia Astry) z białym menu 19 px/700
   (duży tekst, 3,42:1, AA dla dużego tekstu); przyciski primary #C2410C z białym
   tekstem (5,18:1), hover #9A3412. #FF6210 tylko bez tekstu (ikony, markery, linie).
   Na pasku: biały przycisk z tekstem #1C0D0A i przycisk #1C0D0A z białym tekstem.
   ========================================================================== */

:root {
	--gyn-pomarancz: #ff6210;
	--gyn-pomarancz-ciemny: #f15808; /* pasek nagłówka; tekst tylko biały ≥18,66 px bold albo ≥24 px */
	--gyn-primary: #c2410c; /* przyciski zakupu, biały tekst 5,18:1 */
	--gyn-primary-hover: #9a3412; /* biały tekst 7,3:1 */
	--gyn-atrament: #1c0d0a;
	--gyn-tekst: #353535;
	--gyn-tekst-cichy: #6b5e58;
	--gyn-linia: #e5d7d1;
	--gyn-tint: #fff3ec;
	--gyn-fokus: 0 0 0 2px #fff, 0 0 0 4px var(--gyn-atrament);

	/* 1.3.0 „miękka precyzja”: trzy promienie na cały sklep, dwie ramki. */
	--gyn-r-kontrolka: 8px; /* przyciski, pola, select, warianty, paginacja, kafle info, quantity, kupon */
	--gyn-r-karta: 12px; /* karty, ramki, FAQ, banery, boksy, kafle kategorii, zdjęcia */
	--gyn-r-tag: 999px; /* tylko pigułka kategorii i statusy */
	--gyn-ramka-kontrolka: #9a8780; /* pola i niewybrany wariant: 3,4:1 na białym */
	--gyn-link: #c2410c; /* 5,2:1 na białym */
	--gyn-link-hover: #9a3412;
}

/* --------------------------------------------------------------------------
   Nagłówek: Infolinia + Umów się stacjonarnie
   -------------------------------------------------------------------------- */
.gyn-naglowek-cta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gyn-naglowek-cta--desktop {
	margin-right: 16px;
}

.gyn-naglowek-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--gyn-r-kontrolka);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.gyn-naglowek-cta__btn .gyn-ikona {
	flex: none;
	width: 16px;
	height: 16px;
}

.gyn-naglowek-cta__btn--infolinia,
.gyn-naglowek-cta__btn--infolinia:visited {
	background: #fff;
	color: var(--gyn-atrament);
}

.gyn-naglowek-cta__btn--umow,
.gyn-naglowek-cta__btn--umow:visited {
	background: var(--gyn-atrament);
	color: #fff;
}

.gyn-naglowek-cta__btn--infolinia:hover {
	background: var(--gyn-tint);
	color: var(--gyn-atrament);
}

.gyn-naglowek-cta__btn--umow:hover {
	background: #3a2620;
	color: #fff;
}

.gyn-naglowek-cta__btn:focus-visible {
	outline: 2px solid var(--gyn-atrament);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* Numer widoczny od 1280 px; węziej zostaje dla czytników (nazwa linku z numerem). */
.gyn-naglowek-cta__numer {
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1279px) {
	.gyn-naglowek-cta--desktop .gyn-naglowek-cta__numer {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* Mobile: pasek pod nagłówkiem (nagłówek mobilny Astry < 922 px). */
.gyn-naglowek-cta--mobile {
	padding: 8px 16px;
	background: var(--gyn-tint);
	border-bottom: 1px solid var(--gyn-linia);
}

.gyn-naglowek-cta--mobile .gyn-naglowek-cta__btn {
	flex: 1 1 0;
	justify-content: center;
	padding: 0 12px;
}

.gyn-naglowek-cta--mobile .gyn-naglowek-cta__btn--infolinia {
	border: 1px solid var(--gyn-atrament);
}

.gyn-naglowek-cta--mobile .gyn-naglowek-cta__numer {
	display: none;
}

@media (min-width: 922px) {
	.gyn-naglowek-cta--mobile {
		display: none;
	}
}

@media (max-width: 359px) {
	/* Logo 200 px + menu + koszyk nie mieszczą się w 320 px: strona przewijała się w poziomie o 10 px (1.7.5). */
	#ast-mobile-header .custom-logo-link img.custom-logo {
		width: 160px;
		height: auto;
	}

	.gyn-naglowek-cta--mobile {
		flex-direction: column;
		align-items: stretch;
	}
}


@media (prefers-reduced-motion: reduce) {
	.gyn-naglowek-cta__btn {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   1.3.1: menu główne na pasku #F15808. Kolor zawsze biały (Astra), stan
   pokazuje podkreślenie, nie kolor: hover i bieżąca strona.
   -------------------------------------------------------------------------- */
#masthead .main-header-menu > .menu-item > .menu-link {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	transition: text-decoration-color 0.15s ease-out;
}

#masthead .main-header-menu > .menu-item > .menu-link:hover,
#masthead .main-header-menu > .menu-item > .menu-link:focus-visible,
#masthead .main-header-menu > .current-menu-item > .menu-link,
#masthead .main-header-menu > .current-menu-ancestor > .menu-link {
	text-decoration-color: currentColor;
}

#ast-desktop-header .main-header-menu > .menu-item > .menu-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	#masthead .main-header-menu > .menu-item > .menu-link {
		transition: none;
	}
}