/*
  Miniania GC — warstwa bazowa.
  Tokeny pochodzą z theme.json (zmienne --wp--preset--*). Tu tylko layout, chrome i komponenty.
  Docelowe style sekcji dokładamy odtwarzając projekty Stitcha.
*/

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip kapuje stronę do szerokości ekranu (bez poziomego scrolla),
   nie psując position: sticky (inaczej niż overflow: hidden). */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
	margin: 0;
	color: var(--wp--preset--color--ink, #3A3A3A);
	background: var(--wp--preset--color--base, #fff);
	font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
	line-height: 1.6;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--wp--preset--color--terracotta, #C97B5B); }

h1, h2, h3, h4 {
	font-family: var(--wp--preset--font-family--heading, system-ui, sans-serif);
	line-height: 1.2;
	font-weight: 600;
	margin: 0 0 .5em;
}

/* ---------- Layout ---------- */
.container {
	width: min(100% - 2rem, 1200px);
	margin-inline: auto;
}
.site-main { padding-block: 2rem; overflow-x: clip; }

/* Treść stron (m.in. shortcode koszyka/kasy) — kontener z paddingiem, by nic
   nie wychodziło poza ekran na mobile. */
.page-content > .entry-content {
	width: min(100% - 2rem, 1240px);
	margin-inline: auto;
}

/* ---------- Dostępność ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	word-wrap: normal !important;
}
.skip-link:focus {
	position: fixed; top: .5rem; left: .5rem; z-index: 1000;
	width: auto; height: auto; clip: auto; clip-path: none;
	background: #fff; padding: .5rem 1rem; border-radius: 6px;
}

/* ---------- Logo (EB Garamond italic) ---------- */
.site-logo {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic; font-weight: 500;
	font-size: 1.6rem; letter-spacing: .01em;
	color: var(--wp--preset--color--ink); text-decoration: none; line-height: 1;
}

/* ---------- Header ---------- */
.site-header {
	background: var(--wp--preset--color--surface, #F7F4EF);
	border-bottom: 1px solid var(--wp--preset--color--line, #E5DFD6);
}
.site-header__inner {
	display: flex; align-items: center; gap: 1.5rem;
	min-height: 84px;
}
.site-branding { flex: 0 0 auto; }

.site-nav { margin-inline: auto; }
.site-nav__menu {
	list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0;
}
.site-nav__menu a {
	text-decoration: none; color: var(--wp--preset--color--ink);
	font-size: .9rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
	padding-block: .35rem; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a {
	color: var(--wp--preset--color--terracotta);
	border-color: var(--wp--preset--color--terracotta);
}

/* ---------- Ikony akcji ---------- */
.site-header__actions { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.hicon {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--wp--preset--color--ink); background: none; border: 0; padding: 4px; cursor: pointer;
	position: relative; transition: color .15s;
}
.hicon:hover { color: var(--wp--preset--color--terracotta); }

.header-cart { text-decoration: none; }
.mgc-cart-count {
	position: absolute; top: -2px; right: -6px;
	min-width: 18px; height: 18px; padding: 0 5px;
	background: var(--wp--preset--color--blush, #E8C5C0);
	color: #3A3A3A; font-size: .68rem; font-weight: 700;
	border-radius: 999px; display: grid; place-items: center;
}
.mgc-cart-count[hidden] { display: none; }

.site-header__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.site-header__burger span { width: 24px; height: 2px; background: var(--wp--preset--color--ink); display: block; }

/* ---------- Buttons ---------- */
.button, .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
	background: var(--wp--preset--color--terracotta, #C97B5B); color: #fff;
	padding: .85rem 1.75rem; border-radius: 10px; font-weight: 600; border: 0; cursor: pointer;
	font-size: .95rem; transition: background .15s, color .15s;
}
.button:hover, .button--primary:hover { background: var(--wp--preset--color--terracotta-dark, #B5674A); }
.button--outline {
	background: transparent; color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
}
.button--outline:hover { background: #fff; border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }

.site-main--flush { padding: 0; }

/* ---------- Hero ---------- */
.hero {
	background:
		radial-gradient(80% 90% at 88% 18%, rgba(201,123,91,.55) 0%, rgba(201,123,91,0) 55%),
		linear-gradient(135deg, #FBEEE9 0%, #F6DCD2 55%, #ECC2B2 100%);
}
.hero__inner {
	min-height: 64vh; display: flex; flex-direction: column; justify-content: center;
	align-items: stretch; gap: 1.25rem; padding-block: 4.5rem; max-width: 720px;
}
/* align-items:stretch (zamiast flex-start) sprawia, że dzieci wypełniają szerokość
   kontenera zamiast przyjmować max-content — dzięki temu pille i tekst się zawijają. */
.hero__inner > * { max-width: 100%; min-width: 0; }
.hero__pills { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .6rem; margin: 0; padding: 0; }
.hero__pills li {
	display: inline-flex; align-items: center; gap: .4rem;
	background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9);
	color: var(--wp--preset--color--ink); font-size: .82rem; font-weight: 500;
	padding: .4rem .85rem; border-radius: 999px;
}
.hero__pills .icon { width: 16px; height: 16px; }
.hero__title { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0; line-height: 1.08; }
.hero__lead { color: var(--wp--preset--color--ink); font-size: 1.1rem; margin: 0; max-width: min(32rem, 100%); opacity: .85; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; }

/* ---------- Karty kategorii ---------- */
.cat-cards {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
	padding-block: 3.5rem;
}
.cat-card {
	position: relative; display: block; min-height: 280px; border-radius: 16px; overflow: hidden;
	text-decoration: none; background-size: cover; background-position: center;
	transition: transform .2s ease, box-shadow .2s ease;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(58,58,58,.12); }
.cat-card__body {
	position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: .35rem;
	padding: 1.25rem;
}
.cat-card__name { font-family: var(--wp--preset--font-family--heading); font-size: 1.3rem; line-height: 1.1; }
.cat-card__more { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; }
.cat-card__more .icon { width: 16px; height: 16px; }

/* Karta ze zdjęciem — etykieta na ciemnym gradiencie */
.cat-card--image::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(58,58,58,.6) 0%, rgba(58,58,58,0) 55%);
}
.cat-card--image .cat-card__body { color: #fff; z-index: 1; }

/* Karta kolorystyczna (bez zdjęcia) — wyśrodkowana */
.cat-card--tint .cat-card__body {
	position: static; inset: auto; min-height: 280px; align-items: center; justify-content: center;
	text-align: center; color: var(--wp--preset--color--ink);
}
.cat-card--tint .cat-card__more { color: var(--wp--preset--color--terracotta); }
.cat-card.is-blush   { background: var(--wp--preset--color--blush, #E8C5C0); }
.cat-card.is-sage    { background: var(--wp--preset--color--sage, #A8B8A0); }
.cat-card.is-cream   { background: var(--wp--preset--color--surface-2, #EFEAE2); }
.cat-card.is-surface { background: var(--wp--preset--color--surface, #F7F4EF); border: 1px solid var(--wp--preset--color--line); }

@media (max-width: 980px) { .cat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cat-cards { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { margin-top: 4rem; background: var(--wp--preset--color--surface-2, #EFEAE2); }
.site-footer__cols {
	display: grid; gap: 2.5rem;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	padding-block: 3.5rem 2.5rem;
}
.site-footer__brand .site-logo--footer { color: var(--wp--preset--color--terracotta); }
.site-footer__tagline { color: var(--wp--preset--color--muted); margin: .75rem 0 0; max-width: 22rem; }
.site-footer__title {
	font-family: var(--wp--preset--font-family--body); font-size: .8rem; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--ink);
	margin: 0 0 1rem;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer__col a { color: var(--wp--preset--color--muted); text-decoration: none; font-size: .95rem; }
.site-footer__col a:hover { color: var(--wp--preset--color--terracotta); }

.site-footer__bottom { border-top: 1px solid var(--wp--preset--color--line, #E5DFD6); }
.site-footer__bottom .container { padding-block: 1.25rem; text-align: center; }
.site-footer__copy { margin: 0; color: var(--wp--preset--color--muted); font-size: .85rem; }

@media (max-width: 860px) {
	.site-footer__cols { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	/* Nagłówek musi się zmieścić w 390px (logo + burger + ikony) — inaczej body
	   robi się szersze i rozpycha hero. */
	.site-header__inner { gap: .5rem; min-height: 64px; flex-wrap: nowrap; }
	.site-branding { min-width: 0; overflow: hidden; }
	.site-logo { font-size: 1.15rem; white-space: nowrap; }
	.site-header__actions { gap: .1rem; margin-left: auto; flex: 0 0 auto; }
	.hicon { padding: 4px; }
	.hicon .icon { width: 19px; height: 19px; }

	/* Hero — luźniejszy, mniejsze pille, by pewnie się mieściły i zawijały */
	.hero__inner { padding-block: 3rem; gap: 1rem; }
	.hero__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
	.hero__lead { font-size: 1rem; }
	.hero__pills li { font-size: .72rem; padding: .35rem .7rem; }
}

@media (max-width: 860px) {
	.site-header__burger { display: flex; }
	.site-nav {
		position: fixed; inset: 72px 0 auto 0; background: #fff;
		border-bottom: 1px solid var(--wp--preset--color--line);
		transform: translateY(-150%); transition: transform .25s ease; z-index: 50;
	}
	.site-nav.is-open { transform: translateY(0); }
	.site-nav__menu { flex-direction: column; gap: 0; padding: .5rem 1rem; }
	.site-nav__menu > li { border-bottom: 1px solid var(--wp--preset--color--line); }
	.site-nav__menu a { display: block; padding: .75rem 0; }
}





/* Audyt: bardzo wąskie ekrany (≤400px) — twardy cap treści hero, by pille i tekst
   się zawijały niezależnie od ew. min-szerokości nagłówka. Większe telefony mają luz. */
@media (max-width: 460px) {
	.hero { overflow-x: clip; }
	.hero__pills, .hero__lead, .hero__title { max-width: 21rem !important; }
	.hero__pills { gap: .4rem; }
	.hero__pills li { font-size: .68rem; padding: .3rem .55rem; }
	.hero__pills .icon { width: 14px; height: 14px; }
}