/*
 * Wersja C „Jasna”: biel, czerń i duże zdjęcia (Baby Concept, Piekarnia Warsztat).
 * Białe tło, szare pola #F5F3F0, czarne pigułki, pudrowy róż #F3D9D6 tylko jako tło detali, Instrument Sans
 * we wszystkim i Instrument Serif w logo. Ten plik: tokeny, typografia, przyciski, nagłówek, menu, stopka, cookies.
 * Strona główna: jasna-glowna.css, sklep i karta: jasna-sklep.css, koszyk i kasa: jasna-zamowienie.css,
 * konto i strony treści: jasna-konto.css. Układ HTML: template-parts/wyglady/jasna/, haki: inc/wyglady/jasna.php.
 */

:root {
	--c-paper: #FFFFFF;
	--c-card: #FFFFFF;
	--c-ink: #111214;
	--c-muted: #5F5D5A;
	--c-line: #E7E3DE;
	--c-accent: #111214;
	--c-accent-dark: #3A3B3E;
	--c-accent-soft: #F3D9D6;
	--c-accent-faint: #FBF1EF;
	--c-sun: #F3D9D6;
	--c-sun-soft: #FBF1EF;
	--c-ink-20: rgba(17, 18, 20, .14);
	--c-ink-25: rgba(17, 18, 20, .24);
	--c-soft: #F5F3F0;
	--c-roz: #F3D9D6;

	--font-display: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-logo: "Instrument Serif", Georgia, serif;

	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--shadow: 0 12px 32px rgba(17, 18, 20, .08);
	--section-y: 4.5rem;
}
@media (min-width: 1024px) { :root { --section-y: 6rem; } }

/* Bez płynnego przewijania (base.css): kotwice skaczą od razu, a zrzuty całej strony mają nagłówek u góry. */
html:has(body.wyglad-jasna), .wyglad-jasna { scroll-behavior: auto; }

.wyglad-jasna { background: #FFFFFF; color: var(--c-ink); }
.wyglad-jasna :is(h1, h2, h3, .display) { font-weight: 500 !important; letter-spacing: -.025em; line-height: 1.08; }
.wyglad-jasna .eyebrow,
.wyglad-jasna .j-etykieta { margin: 0; color: var(--c-muted); font-size: 14px; font-weight: 600; letter-spacing: .08em; font-variant-caps: all-small-caps; font-synthesis-small-caps: auto; }
.wyglad-jasna .link-underline { text-decoration-thickness: 1px; text-decoration-color: currentColor; text-underline-offset: 4px; font-weight: 500; }
.wyglad-jasna .muted { color: var(--c-muted); }
.wyglad-jasna :focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* Przyciski: czarne pigułki, bez cieni */
.wyglad-jasna .btn,
html body.wyglad-jasna :is(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button:not(.is-link), .wp-element-button, .wp-block-button__link) {
	min-height: 48px; border-radius: 9999px; font-weight: 500; font-size: 15px; letter-spacing: 0; box-shadow: none;
}
.wyglad-jasna .btn--primary { background: var(--c-ink); color: #FFFFFF; }
.wyglad-jasna .btn--primary:hover { background: var(--c-accent-dark); color: #FFFFFF; }
.wyglad-jasna .btn--outline { border-color: var(--c-ink); color: var(--c-ink); }
.wyglad-jasna .btn--outline:hover { background: var(--c-ink); color: #FFFFFF; }

/* Biała pigułka na zdjęciach (kafle kategorii) */
.wyglad-jasna .j-pigulka {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
	border-radius: 9999px; background: #FFFFFF; color: var(--c-ink); font-size: 15px; font-weight: 500;
}

/* Pasek komunikatu: cienki, czarny, jedna linia */
.wyglad-jasna .notice-bar { background: var(--c-ink); color: #FFFFFF; font-size: 13px; font-weight: 500; letter-spacing: .01em; }

/* Nagłówek: na telefonie menu | logo | konto i koszyk; na komputerze wyszukiwarka | logo | akcje, menu pod spodem */
.wyglad-jasna .site-header__bar { background: #FFFFFF; border-bottom: 1px solid var(--c-line); }
.wyglad-jasna .j-naglowek .site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
.wyglad-jasna .j-naglowek__menu { grid-column: 1; grid-row: 1; justify-self: start; margin-left: -10px; }
.wyglad-jasna .j-naglowek .site-logo { grid-column: 2; grid-row: 1; justify-self: center; max-width: none; font-family: var(--font-logo); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: -.01em; color: var(--c-ink); }
.wyglad-jasna .j-naglowek .search-pill--header { grid-column: 1; grid-row: 1; }
.wyglad-jasna .j-naglowek .site-header__actions { grid-column: 3; grid-row: 1; justify-self: end; gap: 2px; margin: 0 -10px 0 0; }
.wyglad-jasna .icon-button { width: 44px; height: 44px; }
.wyglad-jasna .icon-button:hover { background: var(--c-soft); }
.wyglad-jasna .search-pill { border-color: transparent; background: var(--c-soft); }
.wyglad-jasna .search-pill--menu { min-height: 48px; background: var(--c-soft); }
.wyglad-jasna .lang-switch a { font-weight: 500; }

/* Menu na telefonie: biały panel, duże pozycje z linią, podmenu z wcięciem */
.wyglad-jasna .site-menu { gap: 16px; padding-top: 16px; padding-bottom: 24px; background: #FFFFFF; border-bottom: 1px solid var(--c-line); }
.wyglad-jasna .primary-nav__list { gap: 0; }
.wyglad-jasna .primary-nav__list a { font-weight: 500; font-size: 15px; }
.wyglad-jasna .primary-nav__list a:hover,
.wyglad-jasna .primary-nav__list .current-menu-item > a,
.wyglad-jasna .primary-nav__list .current-menu-ancestor > a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.wyglad-jasna .submenu-toggle:hover { color: var(--c-ink); background: var(--c-soft); }
.wyglad-jasna .submenu-toggle:focus-visible { outline-color: var(--c-ink); }
.wyglad-jasna .primary-nav .sub-menu a:hover { background: var(--c-soft); }
@media (max-width: 1023.98px) {
	.wyglad-jasna .primary-nav__list > li { min-height: 56px; border-bottom: 1px solid var(--c-line); }
	.wyglad-jasna .primary-nav__list > li > a { flex: 1; min-height: 56px; font-size: 20px; letter-spacing: -.01em; }
	.wyglad-jasna .primary-nav__list .submenu-toggle { width: 44px; height: 44px; }
	.wyglad-jasna .primary-nav .sub-menu { padding: 0 0 12px; }
	.wyglad-jasna .primary-nav .sub-menu a { min-height: 44px; padding: 0 0 0 16px; color: var(--c-muted); font-size: 16px; }
	.wyglad-jasna .lang-switch--menu { align-self: flex-start; }
}
@media (min-width: 768px) {
	.wyglad-jasna .j-naglowek .search-pill--header { justify-self: start; width: 100%; max-width: 300px; margin: 0; }
	.wyglad-jasna .j-naglowek .search-pill--header .search-pill__input { font-size: 14px; }
	.wyglad-jasna .j-naglowek .search-pill--header ~ .site-logo { grid-column: 2; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	.wyglad-jasna .j-naglowek .search-pill--header { display: none; }
}
@media (min-width: 1024px) {
	.wyglad-jasna { --header-h: 84px; }
	.wyglad-jasna .j-naglowek .site-logo { font-size: 44px; }
	.wyglad-jasna .j-naglowek .site-header__actions { gap: 6px; margin-right: 0; }
	.wyglad-jasna .site-header__bar { border-bottom: 0; }
	.wyglad-jasna .site-menu { background: #FFFFFF; border-bottom: 1px solid var(--c-line); }
	.wyglad-jasna .primary-nav__list { gap: 40px; }
	.wyglad-jasna .primary-nav__list a { font-size: 15px; }
	.wyglad-jasna .primary-nav .sub-menu { border-color: var(--c-line); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(17, 18, 20, .08); }
}

/* Okruszki: drobne, spokojne */
.wyglad-jasna .woocommerce-breadcrumb { color: var(--c-muted); font-size: 13px; }
.wyglad-jasna .woocommerce-breadcrumb a { color: var(--c-muted); text-decoration: none; }
.wyglad-jasna .woocommerce-breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; }

/* Jasna stopka: szare tło, logo szeryfowe, newsletter jako pigułka */
.wyglad-jasna .site-footer { background: var(--c-soft); color: var(--c-ink); }
.wyglad-jasna .site-footer__name { font-family: var(--font-logo); font-weight: 400; font-size: 44px; line-height: 1; color: var(--c-ink); }
.wyglad-jasna .site-footer__text,
.wyglad-jasna .newsletter__note { color: var(--c-muted); }
.wyglad-jasna .newsletter__note a { color: var(--c-ink); }
.wyglad-jasna .footer-col__title { color: var(--c-ink); font-size: 14px; font-weight: 600; letter-spacing: .08em; font-variant-caps: all-small-caps; font-synthesis-small-caps: auto; }
.wyglad-jasna .footer-col__list a { color: var(--c-muted); text-decoration: none; }
@media (max-width: 1023.98px) {
	.wyglad-jasna .footer-col__list { gap: 0; }
	.wyglad-jasna .footer-col__list a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
}
.wyglad-jasna .footer-col__list a:hover { color: var(--c-ink); text-decoration: underline; }
.wyglad-jasna .newsletter__input { min-height: 48px; border-color: transparent; border-radius: 9999px; background: #FFFFFF; color: var(--c-ink); }
.wyglad-jasna .newsletter__input::placeholder { color: var(--c-muted); }
.wyglad-jasna .newsletter__input:focus { border-color: var(--c-ink); }
.wyglad-jasna .newsletter__button { min-height: 48px; border-radius: 9999px; background: var(--c-ink); color: #FFFFFF; font-weight: 500; }
.wyglad-jasna .newsletter__button:hover { background: var(--c-accent-dark); }
.wyglad-jasna .site-footer__bottom { border-top-color: var(--c-ink-20); color: var(--c-muted); }
.wyglad-jasna .badge { border-color: var(--c-ink-20); background: #FFFFFF; color: var(--c-ink); }
@media (min-width: 1024px) {
	.wyglad-jasna .site-footer__grid { padding: 80px 0 64px; }
}

/* Baner cookies: biała karta z czarnymi pigułkami */
.wyglad-jasna .wz__okno { border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #FFFFFF; color: var(--c-ink); box-shadow: 0 20px 48px rgba(17, 18, 20, .14); font-family: var(--font-sans); }
.wyglad-jasna .wz__okno :is(h2, h3) { font-weight: 500; letter-spacing: -.02em; }
.wyglad-jasna .wz__okno p { color: var(--c-muted); }
.wyglad-jasna .wz__okno a { color: var(--c-ink); }
.wyglad-jasna .wz__przycisk { font-weight: 500; }
.wyglad-jasna .wz__przycisk:hover { border-color: var(--c-accent-dark); background: var(--c-accent-dark); }
.wyglad-jasna .wz__przycisk[data-wz="ustawienia"] { border-color: var(--c-ink); background: #FFFFFF; color: var(--c-ink); }
.wyglad-jasna .wz__przycisk[data-wz="ustawienia"]:hover { background: var(--c-soft); }
.wyglad-jasna :is(.wz__przycisk, .wz__zamknij, .wz__kategoria input):focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* Komunikaty WooCommerce: szare tło, czarny tekst; na telefonie przycisk w osobnym wierszu (nie ściska tekstu) */
.wyglad-jasna :is(.woocommerce-message, .woocommerce-info) { border: 0; border-radius: var(--radius); background: var(--c-soft); color: var(--c-ink); }
@media (max-width: 639.98px) {
	.wyglad-jasna :is(.woocommerce-message, .woocommerce-info) .button { display: flex; float: none; width: fit-content; margin: 0 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.wyglad-jasna *, .wyglad-jasna *::before, .wyglad-jasna *::after { transition: none !important; animation: none !important; }
}

/* S4c: cele dotyku min. 44 px na telefonie (linki pod przyciskami), większy obszar kliknięcia logo i lupy bez zmiany
   układu; widoczny fokus pól wyboru w kasie (styl WooCommerce gasił obrys) */
@media (max-width: 639.98px) {
	.wyglad-jasna :is(.section__head, .not-found__actions) .link-underline { display: inline-flex; align-items: center; min-height: 44px; }
}
.wyglad-jasna :is(.site-logo, .search-pill__submit) { position: relative; }
.wyglad-jasna .site-logo::after { content: ""; position: absolute; inset: -6px -4px; }
.wyglad-jasna .search-pill__submit::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
html body.wyglad-jasna :is(.wc-block-components-radio-control__input, .wc-block-components-checkbox__input):focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.wyglad-jasna .wn-link { position: relative; }
.wyglad-jasna .wn-link::after { content: ""; position: absolute; inset: -10px -4px; }