/* Colours follow the logo (grafiki/): ink #171717, blue #2c6bae, red #b3362b.
   Site CSS over the kit (system.css, layout.css): the palette and type as `start.mjs brand` printed
   them, the catalog pages, and the second theme. Themes: html[data-theme], set by "theme" in
   var/settings.json (panel: Wygląd). */
:root {
  --p-bg: #ffffff; --p-surface: #f1f4f7; --p-ink: #171717; --p-muted: #676c71;
  --p-accent: #2c6bae; --p-accent-ink: #ffffff; --p-action: #2c6bae; --p-action-ink: #ffffff;
  --p-inv-bg: #171717; --p-inv-surface: #242424; --p-inv-ink: #ffffff; --p-inv-muted: #9a9da0;
  --p-inv-accent: #ffffff; --p-inv-accent-ink: #171717; --p-inv-action: #ffffff; --p-inv-action-ink: #171717;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-text: "Archivo", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.025em;
  --display-tracking-xl: -0.035em;
  --display-stretch: 110%;
  --ly-scale: 0.9;
  --hot: #b3362b;
  --cold: var(--p-accent);
}
::selection { background: var(--p-accent); color: var(--p-accent-ink); }
html { accent-color: var(--p-accent); caret-color: var(--p-accent); }

/* ---- catalog pages: as tall as their content, not one screen each ---- */
html[data-page="flow"] main > section, main > section.section--flow, html[data-page="flow"] footer.closing { height: auto; min-height: 0; }
html[data-page="flow"] main > section > .wrap, main > section.section--flow > .wrap { height: auto; }
html[data-page="flow"] main > section:first-child { padding-top: calc(var(--nav) + var(--s-7)); }
html[data-page="flow"] main > section { padding-bottom: var(--s-9); }
html[data-page="flow"] .closing__cta { padding-bottom: var(--s-8); }
main > section.section--flow { padding-bottom: var(--s-9); }

/* ---- product code: tabular figures, one width per digit ---- */
.code { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: 0.01em; }
.code--lg { font-size: var(--t-lead); color: var(--muted); }

/* ---- product tiles ---- */
.tiles { row-gap: var(--s-7); }
.tile--product { --tile-ratio: 1 / 1; text-decoration: none; }
.tile--product .tile__media { background: #fff; border: 1px solid var(--line); }
.tile--product .tile__media > img { object-fit: contain; padding: 8%; }
.tile--product .tile__head > h3 { text-wrap: balance; }
@media (max-width: 1023px) { .tiles > .tile--product { grid-column: span 6; } }
@media (max-width: 639px) { .tiles { row-gap: var(--s-6); } }

/* ---- hero line-up: the first products side by side on the page ground ---- */
.hero__stage > .lineup { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.lineup > a { display: block; min-height: 0; }
.lineup img { width: 100%; height: 100%; object-fit: contain; transition: transform 600ms var(--ease); }
.lineup > a:hover img { transform: scale(1.03); }
@media (max-width: 639px) { .hero__stage > .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lineup > a:nth-child(n+3) { display: none; } }

/* ---- categories on the home page ---- */
.cats { align-items: stretch; }
.cat { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: var(--s-4); min-height: 0; }
.cat__media { display: block; overflow: clip; border-radius: var(--r-lg); background: var(--surface); min-height: 0; }
.cat__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.cat__media:hover > img { transform: scale(1.03); }
.cat > h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.cat > h3 > a { text-decoration: none; color: inherit; }

/* ---- chips: subcategory links ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-btn); text-decoration: none; color: var(--ink); font-weight: 500; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.chips a:hover { border-color: var(--ink); background: var(--surface); }
html[data-page="flow"] .chips { margin-bottom: var(--s-7); }

/* ---- breadcrumbs, pager ---- */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s-5); }
.crumbs a { color: inherit; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }
.crumbs a + a::before { content: "/"; margin-right: var(--s-2); color: var(--line-strong, var(--muted)); display: inline-block; }
.pager { display: flex; gap: var(--s-2); margin-top: var(--s-8); }
.pager a { display: grid; place-items: center; min-width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-btn); text-decoration: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.pager a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---- product page ---- */
.product__media { display: grid; gap: var(--s-5); }
.product__shot { display: block; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: clip; background: #fff; }
.product__shot > img { width: 100%; height: auto; display: block; }
.product__info { display: grid; gap: var(--s-4); align-content: start; position: sticky; top: calc(var(--nav) + var(--s-5)); }
.product__info > h2 { margin-top: var(--s-5); color: var(--muted); }
.product__price { font-size: var(--t-h3); font-variant-numeric: tabular-nums; }
.product .rows__value { font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 1023px) { .product__media, .product__info { grid-column: 1 / -1; position: static; } }

/* ---- forms: what the kit's .form leaves open ---- */
.form textarea, .form select, .search input { font: inherit; }
.form select { height: 48px; padding: 0 var(--s-3); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); }
.form--narrow { max-width: 420px; grid-template-columns: 1fr; }
fieldset.form { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.form > legend { grid-column: 1 / -1; padding: 0; margin-bottom: var(--s-4); font-weight: 500; }
.field--check label { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; font-weight: 400; font-size: var(--t-body); }
.field--check input { width: 20px; height: 20px; flex: none; }
.field__error { color: #b42318; font-weight: 400; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--s-5); }
.notice--error { border-color: #b42318; color: #7a1710; background: #fef3f2; }
.search { display: grid; gap: var(--s-2); max-width: 560px; font-size: var(--t-small); font-weight: 500; margin-top: var(--s-5); }
.search__row { display: flex; gap: var(--s-2); }
.search input { flex: 1; min-width: 0; height: 48px; padding: 0 var(--s-4); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font-size: 16px; }
.contact__address { font-style: normal; font-size: var(--t-lead); line-height: 1.5; }
html[data-page="flow"] .section-head { margin-bottom: var(--s-7); }
@media (max-width: 1023px) { html[data-page="flow"] .grid > [class*="span-"] { grid-column: 1 / -1; } html[data-page="flow"] .grid.tiles > .tile--product { grid-column: span 6; } }

/* ---- theme "pion": the page as a riser diagram, a hot and a cold line running down it ---- */
.pipe { display: none; }
html[data-theme="pion"] { --p-surface: #eef2f6; }
html[data-theme="pion"] .pipe { display: block; position: absolute; top: 0; bottom: 0; width: 6px; z-index: 0; pointer-events: none; }
html[data-theme="pion"] .pipe--hot { left: calc(50% + min(50% - var(--gut), 640px) - 34px); background: var(--hot); }
html[data-theme="pion"] .pipe--cold { left: calc(50% + min(50% - var(--gut), 640px) - 6px); background: var(--cold); }
html[data-theme="pion"] main > section { position: relative; }
html[data-theme="pion"] .hero .pipe { top: var(--nav); }
html[data-theme="pion"] .hero--product .hero__stage > .lineup { right: 72px; }
html[data-theme="pion"] #kategorie .cats { padding-right: 72px; }
/* each category is a tap point: a branch from both lines ends at its picture */
html[data-theme="pion"] .cat { position: relative; }
html[data-theme="pion"] .cat__media { border-radius: 0; border: 1.5px solid var(--ink); }
html[data-theme="pion"] .cat:last-child::before, html[data-theme="pion"] .cat:last-child::after { content: ""; position: absolute; left: 100%; height: 6px; }
html[data-theme="pion"] .cat:last-child::before { top: 30%; width: 44px; background: var(--hot); }
html[data-theme="pion"] .cat:last-child::after { top: calc(30% + 28px); width: 72px; background: var(--cold); }
html[data-theme="pion"] .tile--product .tile__media, html[data-theme="pion"] .product__shot, html[data-theme="pion"] .chips a, html[data-theme="pion"] .pager a { border-radius: 0; border-color: var(--ink); }
html[data-theme="pion"] :is(h1, h2, .cat > h3) { font-stretch: 85%; font-weight: 600; letter-spacing: -0.02em; }
@media (max-width: 1023px) { html[data-theme="pion"] .pipe, html[data-theme="pion"] .cat::before, html[data-theme="pion"] .cat::after { display: none; } html[data-theme="pion"] .hero--product .hero__stage > .lineup { right: 0; } html[data-theme="pion"] #kategorie .cats { padding-right: 0; } }

/* the line-up stands on the page ground: the kit's lit stage is for a single render */
.hero--product .hero__stage:has(> .lineup) { background: none; border-radius: 0; }

/* the statement fills its screen */
#dane .mo-wh__text { font-size: clamp(30px, 4.6vw, 72px); line-height: 1.1; max-width: 20em; }
html[data-theme="pion"] .hero--product .hero__head { padding-right: 72px; }
@media (max-width: 1023px) { html[data-theme="pion"] .hero--product .hero__head { padding-right: 0; } }
@media (max-width: 1023px) { .hero--product .hero__stage:has(> .lineup) { flex: 1 1 auto; aspect-ratio: auto; min-height: 200px; margin-bottom: 0; } }

.contact__form > h2 { margin-bottom: var(--s-5); }

/* the client's logo: taller than the kit's 24px wordmark, it carries a second line */
.nav__logo img { height: 40px; }
.footer .nav__logo img { height: 48px; }
@media (max-width: 639px) { .nav__logo img { height: 30px; } }