/*
 * Wersja B „Ciepła” (wzór: Chleboteka): krem, brąz i terakota. Ten plik: tokeny, typografia, przyciski, etykiety
 * wersalikami, nagłówek z menu (także mobilnym), stopka w ciemnym brązie i pieczątka.
 * Strona główna: ciepla-glowna.css, sklep, karta, koszyk i kasa: ciepla-sklep.css, konto i strony treści: ciepla-konto.css.
 * Kontrast (WCAG AA, 4,5:1): tekst #3B302A i #6E6158 na #FFF9F1 i #F4EADB, terakota #B5532F tylko na #FFF9F1/#FFFDF9
 * albo w dużych tytułach, na #F4EADB drobny tekst w #96421F; na brązie #2A211C tekst #F4EADB i etykiety #D9774F.
 */

:root {
	--c-paper: #FFF9F1;
	--c-card: #FFFDF9;
	--c-ink: #3B302A;
	--c-muted: #6E6158;
	--c-line: #E9DCCB;
	--c-accent: #B5532F;
	--c-accent-dark: #96421F;
	--c-accent-soft: #F3DDD0;
	--c-accent-faint: #FAEEE6;
	--c-sun: #E8D8BF;
	--c-sun-soft: #F4EADB;
	--c-ink-20: rgba(59, 48, 42, .18);
	--c-ink-25: rgba(59, 48, 42, .28);
	--c-dark: #2A211C;
	--c-cream: #F4EADB;
	--c-cream-dark: #EADCC6;
	--c-title: #1F1512;
	--c-on-dark: #F4EADB;
	--c-on-dark-label: #D9774F;

	--font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 22px;
	--radius-xl: 28px;
	--shadow: 0 14px 34px rgba(59, 48, 42, .08);
	--section-y: 4rem;

	--c-pieczatka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Ccircle cx='80' cy='80' r='80' fill='%232A211C'/%3E%3Cpath id='p' d='M80,80 m-56,0 a56,56 0 1,1 112,0 a56,56 0 1,1 -112,0' fill='none'/%3E%3Ctext fill='%23FFF9F1' font-family='Helvetica, Arial, sans-serif' font-size='11.5' font-weight='600' textLength='346' lengthAdjust='spacing'%3E%3CtextPath href='%23p' textLength='346' lengthAdjust='spacing'%3EPRANE %C2%B7 SPRAWDZONE %C2%B7 GOTOWE DO DROGI %C2%B7 %3C/textPath%3E%3C/text%3E%3Cpath d='M80 64v32M64 80h32M68.7 68.7l22.6 22.6M91.3 68.7L68.7 91.3' stroke='%23D9774F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
	--c-pieczatka-jasna: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Ccircle cx='80' cy='80' r='80' fill='%23F4EADB'/%3E%3Cpath id='p' d='M80,80 m-56,0 a56,56 0 1,1 112,0 a56,56 0 1,1 -112,0' fill='none'/%3E%3Ctext fill='%232A211C' font-family='Helvetica, Arial, sans-serif' font-size='11.5' font-weight='600' textLength='346' lengthAdjust='spacing'%3E%3CtextPath href='%23p' textLength='346' lengthAdjust='spacing'%3ELITTLE TRAVELLER %C2%B7 WROC%C5%81AW %C2%B7 NOSID%C5%81A %C2%B7 %3C/textPath%3E%3C/text%3E%3Cpath d='M80 64v32M64 80h32M68.7 68.7l22.6 22.6M91.3 68.7L68.7 91.3' stroke='%23B5532F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (min-width: 1024px) {
	:root { --section-y: 5rem; }
}

/* Pieczątka po angielsku na stronach EN (WPML ustawia lang="en-US") */
:root:lang(en) {
	--c-pieczatka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Ccircle cx='80' cy='80' r='80' fill='%232A211C'/%3E%3Cpath id='p' d='M80,80 m-56,0 a56,56 0 1,1 112,0 a56,56 0 1,1 -112,0' fill='none'/%3E%3Ctext fill='%23FFF9F1' font-family='Helvetica, Arial, sans-serif' font-size='11.5' font-weight='600' textLength='346' lengthAdjust='spacing'%3E%3CtextPath href='%23p' textLength='346' lengthAdjust='spacing'%3EWASHED %C2%B7 CHECKED %C2%B7 READY TO GO %C2%B7 %3C/textPath%3E%3C/text%3E%3Cpath d='M80 64v32M64 80h32M68.7 68.7l22.6 22.6M91.3 68.7L68.7 91.3' stroke='%23D9774F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Typografia */
body.wyglad-ciepla { background: var(--c-paper); color: var(--c-ink); }
.wyglad-ciepla :is(h1, h2, h3, .display) { color: var(--c-title); font-weight: 400; letter-spacing: -.015em; line-height: 1.06; }
.wyglad-ciepla .c-accent { font-style: normal; color: var(--c-accent); }
.wyglad-ciepla .muted { color: var(--c-muted); }
.wyglad-ciepla .eyebrow,
.wyglad-ciepla .c-label {
	display: block;
	margin: 0;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--c-muted);
}
.wyglad-ciepla .link-underline {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	text-decoration-color: var(--c-ink-25);
}
.wyglad-ciepla :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

/* Przyciski: ciemne pigułki wersalikami ze strzałką ↗ */
.wyglad-ciepla .btn,
html body.wyglad-ciepla :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-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.wyglad-ciepla .btn--primary,
html body.wyglad-ciepla :is(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button:not(.is-link), .wp-element-button, .wp-block-button__link) {
	border-color: var(--c-dark);
	background: var(--c-dark);
	color: #FFF9F1;
}
.wyglad-ciepla .btn--primary:hover,
html body.wyglad-ciepla :is(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button:not(.is-link), .wp-element-button, .wp-block-button__link):hover {
	border-color: var(--c-accent-dark);
	background: var(--c-accent-dark);
	color: #FFFFFF;
}
.wyglad-ciepla .btn::after { content: "↗"; content: "↗" / ""; margin-left: 2px; font-size: 15px; letter-spacing: 0; }
.wyglad-ciepla .btn--lg { padding: 0 1.75rem; font-size: 12px; }
.wyglad-ciepla .btn--outline { border-color: var(--c-ink); background: transparent; color: var(--c-ink); }
.wyglad-ciepla .btn--outline:hover { border-color: var(--c-dark); background: var(--c-dark); color: #FFF9F1; }
.wyglad-ciepla :is(.btn, .button)[disabled],
.wyglad-ciepla .btn.is-disabled { opacity: 1; border-color: var(--c-cream-dark); background: var(--c-cream-dark); color: var(--c-ink); }

/* Pasek komunikatu: ciemny brąz, drobne wersaliki */
.wyglad-ciepla .notice-bar { background: var(--c-dark); color: var(--c-on-dark); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.wyglad-ciepla .notice-bar__text { padding: 9px 0; }
@media (max-width: 639.98px) {
	.wyglad-ciepla .notice-bar { font-size: 10.5px; letter-spacing: .05em; }
	.wyglad-ciepla .notice-bar__text { padding: 7px 0; line-height: 1.45; }
}

/* Nagłówek: logo z lewej, wyszukiwarka jak linia w kremowej pigułce, menu wersalikami z gwiazdkami ✱ */
.wyglad-ciepla .site-header__bar { background: var(--c-paper); border-bottom-color: var(--c-line); }
.wyglad-ciepla .site-logo { font-family: var(--font-display); font-weight: 500; font-size: 28px; letter-spacing: -.02em; color: var(--c-title); }
.wyglad-ciepla .search-pill { border-color: var(--c-line); background: var(--c-card); }
.wyglad-ciepla .search-pill:focus-within { border-color: var(--c-ink); }
.wyglad-ciepla .help-pill { display: none; }
.wyglad-ciepla .lang-switch { border-color: var(--c-ink-20); }
.wyglad-ciepla .lang-switch a { min-width: 32px; justify-content: center; letter-spacing: .08em; }
.wyglad-ciepla .lang-switch a.is-active { background: var(--c-dark); color: #FFF9F1; }
.wyglad-ciepla .icon-button { color: var(--c-ink); }
.wyglad-ciepla .icon-button:hover { background: var(--c-cream); }
.wyglad-ciepla .cart-link .cart-count,
.wyglad-ciepla .cart-count { background: var(--c-accent); color: #FFFFFF; }

.wyglad-ciepla .primary-nav__list a { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink); }
.wyglad-ciepla .primary-nav__list a:hover,
.wyglad-ciepla .primary-nav__list :is(.current-menu-item, .current-menu-ancestor) > a { color: var(--c-accent-dark); }
.wyglad-ciepla .primary-nav .sub-menu a { font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: none; }

/* Menu na telefonie: kremowy panel, duże pozycje Outfit z gwiazdką, podmenu wcięte */
@media (max-width: 1023.98px) {
	.wyglad-ciepla .site-menu { gap: 20px; padding-top: 20px; padding-bottom: 28px; background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
	.wyglad-ciepla .site-menu .search-pill--menu { min-height: 48px; background: var(--c-card); }
	.wyglad-ciepla .primary-nav__list { gap: 0; }
	.wyglad-ciepla .primary-nav__list > li { border-bottom: 1px solid var(--c-line); }
	.wyglad-ciepla .primary-nav__list > li > a {
		flex: 1;
		gap: 12px;
		min-height: 56px;
		font-family: var(--font-display);
		font-size: 24px;
		font-weight: 400;
		letter-spacing: -.01em;
		text-transform: none;
		color: var(--c-title);
	}
	.wyglad-ciepla .primary-nav__list > li > a::before { content: "✱"; content: "✱" / ""; font-family: var(--font-sans); font-size: 14px; color: var(--c-accent); }
	.wyglad-ciepla .submenu-toggle { width: 44px; height: 44px; border: 1px solid var(--c-ink-20); }
	.wyglad-ciepla .primary-nav .sub-menu { padding: 0 0 14px 28px; }
	.wyglad-ciepla .primary-nav .sub-menu a { min-height: 44px; font-size: 16px; color: var(--c-ink); }
	.wyglad-ciepla .lang-switch--menu { align-self: flex-start; }
}
@media (min-width: 1024px) {
	.wyglad-ciepla .site-logo { font-size: 32px; }
	.wyglad-ciepla .search-pill--header { max-width: 30rem; }
	.wyglad-ciepla .site-menu { background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
	.wyglad-ciepla .primary-nav__list { gap: 72px; }
	.wyglad-ciepla .primary-nav__list > li + li::before {
		content: "✱"; content: "✱" / "";
		position: absolute;
		left: -44px;
		top: 50%;
		transform: translateY(-50%);
		color: var(--c-accent);
		font-size: 13px;
		pointer-events: none;
	}
	.wyglad-ciepla .primary-nav .sub-menu { padding: 10px; border-radius: var(--radius-lg); background: var(--c-card); }
	.wyglad-ciepla .primary-nav .sub-menu a { padding: 10px 14px; border-radius: var(--radius); }
	.wyglad-ciepla .primary-nav .sub-menu a:hover { background: var(--c-cream); color: var(--c-ink); }
}

/* Pieczątka: obraca się powoli tylko bez prefers-reduced-motion */
.wyglad-ciepla .c-pieczatka {
	position: absolute;
	z-index: 2;
	display: block;
	width: 96px;
	height: 96px;
	background: var(--c-pieczatka) center / contain no-repeat;
	pointer-events: none;
}
.wyglad-ciepla .c-pieczatka--jasna { background-image: var(--c-pieczatka-jasna); }
@keyframes wyglad-ciepla-obrot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
	.wyglad-ciepla .c-pieczatka { animation: wyglad-ciepla-obrot 24s linear infinite; }
}

/* Stopka: ciemny brąz z zaokrąglonymi górnymi rogami, etykiety kolumn w terakocie */
.wyglad-ciepla .site-footer { margin-top: 72px; background: var(--c-dark); color: var(--c-on-dark); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.wyglad-ciepla .site-footer__grid { padding: 56px 0 48px; }
.wyglad-ciepla .site-footer__name { font-family: var(--font-display); font-weight: 400; font-size: 44px; letter-spacing: -.03em; color: #FFF9F1; }
.wyglad-ciepla .site-footer__text { color: rgba(244, 234, 219, .8); }
.wyglad-ciepla .footer-col__title { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-on-dark-label); }
.wyglad-ciepla .footer-col__list a { display: inline-flex; align-items: center; min-height: 32px; color: rgba(244, 234, 219, .85); }
.wyglad-ciepla .footer-col__list a:hover { color: #FFFFFF; }
.wyglad-ciepla .newsletter__input { border-color: rgba(244, 234, 219, .3); border-radius: 9999px; background: rgba(255, 249, 241, .06); color: #FFF9F1; }
.wyglad-ciepla .newsletter__input::placeholder { color: rgba(244, 234, 219, .7); }
.wyglad-ciepla .newsletter__button {
	min-height: 48px;
	border-radius: 9999px;
	background: var(--c-accent);
	color: #FFF9F1;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.wyglad-ciepla .newsletter__button:hover { background: var(--c-accent-dark); }
.wyglad-ciepla .newsletter__note { color: rgba(244, 234, 219, .8); }
.wyglad-ciepla .newsletter__note a,
.wyglad-ciepla .site-footer a:not([class]) { color: #FFF9F1; }
.wyglad-ciepla .site-footer__bottom { border-top-color: rgba(244, 234, 219, .16); color: rgba(244, 234, 219, .75); }
.wyglad-ciepla .badge { border-color: rgba(244, 234, 219, .25); border-radius: 9999px; padding: 4px 10px; font-size: 11px; letter-spacing: .06em; }
@media (min-width: 768px) {
	.wyglad-ciepla .site-footer { margin-inline: 16px; }
}
@media (min-width: 1024px) {
	.wyglad-ciepla .site-footer__name { font-size: 64px; }
}

/* Strony treści i kontenery: kremowe tło, zaokrąglone karty */
.wyglad-ciepla .chip { min-height: 40px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: transparent; border-color: var(--c-ink-25); color: var(--c-ink); }
.wyglad-ciepla .chip:hover { border-color: var(--c-ink); }
.wyglad-ciepla .chip.is-active { background: var(--c-dark); border-color: var(--c-dark); color: #FFF9F1; }
.wyglad-ciepla .woocommerce-breadcrumb { font-size: 13px; font-weight: 700; letter-spacing: .1em; font-variant-caps: all-small-caps; color: var(--c-muted); }
.wyglad-ciepla .woocommerce-breadcrumb a { color: var(--c-muted); text-decoration: none; }
.wyglad-ciepla .woocommerce-breadcrumb a:hover { color: var(--c-accent-dark); }

/* S4c: cele dotyku min. 44 px na telefonie (ikony nagłówka, pigułki, stopka, linki pod przyciskami), większy obszar
   kliknięcia logo i lupy bez zmiany układu */
@media (max-width: 639.98px) {
	.wyglad-ciepla .icon-button { width: 44px; height: 44px; }
	.wyglad-ciepla .chip { min-height: 44px; }
	.wyglad-ciepla .footer-col__list { gap: 0; }
	.wyglad-ciepla .footer-col__list a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
	.wyglad-ciepla :is(.hero__actions, .not-found__actions) .link-underline { display: inline-flex; align-items: center; min-height: 44px; }
}
.wyglad-ciepla :is(.site-logo, .search-pill__submit) { position: relative; }
.wyglad-ciepla .site-logo::after { content: ""; position: absolute; inset: -8px -4px; }
.wyglad-ciepla .search-pill__submit::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.wyglad-ciepla .wn-link { position: relative; }
.wyglad-ciepla .wn-link::after { content: ""; position: absolute; inset: -10px -4px; }