/* Makiety strony Narzędzia. Wspólna podstawa trzech wariantów.
   Kolory, kroje, promienie i cień zmierzone na landingu książki (8.10.2026);
   szerokość treści 1152 px jak na landingu, odstępy z przykładów z Mobbina.
   Progi układu: 699 px (telefon), 899 px (jedna kolumna), 74.99em (menu z przycisku, skróty do krawędzi, trzy kolumny kafli). */

@font-face { font-family: "Be Vietnam Pro"; font-weight: 700; font-display: swap; src: url(../../../../../fonts/be-vietnam-pro-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 700; font-display: swap; src: url(../../../../../fonts/be-vietnam-pro-700-latin.woff2) format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 800; font-display: swap; src: url(../../../../../fonts/be-vietnam-pro-800-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 800; font-display: swap; src: url(../../../../../fonts/be-vietnam-pro-800-latin.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url(../../../../../fonts/dm-sans-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url(../../../../../fonts/dm-sans-400-latin.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url(../../../../../fonts/dm-sans-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url(../../../../../fonts/dm-sans-500-latin.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url(../../../../../fonts/dm-sans-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url(../../../../../fonts/dm-sans-700-latin.woff2) format("woff2"); }

:root {
  --bg: #FDF8F5;
  --band: #F5EDE7;
  --card: #FFFFFF;
  --line: #E9DDD3;
  --ink: #2D2A26;
  --text: #4A413A;
  --muted: #6B655F;
  --accent: #CC3366;
  --accent-dark: #A82952;
  --accent-deep: #8C1F45;
  --accent-tint: #F6D5DF;

  --font-display: "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  --fs-h1: clamp(2.25rem, 1.42rem + 3.4vw, 4rem);      /* 36 → 64 px */
  --fs-h2: clamp(1.75rem, 1.28rem + 1.95vw, 2.75rem);  /* 28 → 44 px */
  --fs-h3: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);    /* 20 → 24 px */
  --fs-body: clamp(1.0625rem, 1.03rem + 0.13vw, 1.125rem); /* 17 → 18 px */
  --fs-small: 0.9375rem;                               /* 15 px */

  --wrap: 1152px;
  --gutter: clamp(16px, 4.2vw, 24px);
  --section: clamp(64px, 7vw, 96px);

  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --shadow-photo: 0 8px 32px rgba(45, 42, 38, .08);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* przyklejony rząd skrótów: wysokość skrótu plus odstęp nad i pod */
  --chip-h: 44px;
  --chips-pad: 12px;
  --chips-h: calc(var(--chip-h) + 2 * var(--chips-pad));
}

*, *::before, *::after { box-sizing: border-box; }
/* skróty przenoszą od razu: przy stronie na kilkanaście tysięcy pikseli płynne przewijanie trwało ponad sekundę */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--chips-h) + 20px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/1.62 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.04; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
p { text-wrap: pretty; }
a { color: inherit; }
strong { font-weight: 700; color: var(--ink); }
/* angielskie zwroty w opisach: tak jak dziś na stronie, wyróżnione wagą, nie kursywą */
em { font-style: normal; font-weight: 700; color: var(--ink); }
::selection { background: var(--accent-tint); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: 16px; top: -64px; z-index: 50; padding: 12px 16px; border-radius: var(--r-s); background: var(--ink); color: var(--bg); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* --- pasek makiety (nie jest częścią projektu) --- */
.proto { background: var(--ink); color: #D9CFC6; font: 500 .8125rem/1.3 var(--font-body); }
.proto .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 20px; min-height: 40px; padding-block: 6px; }
.proto ul { display: flex; gap: 2px 4px; }
.proto a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 8px; color: #F3ECE6; text-decoration: none; }
.proto a:hover { background: rgba(255, 255, 255, .1); }
.proto a[aria-current="page"] { background: var(--bg); color: var(--ink); }
.proto :focus-visible { outline-color: #fff; }
@media (max-width: 699px) { .proto-long { display: none; } .proto a { min-width: 32px; justify-content: center; } }

/* --- nagłówek witryny ---
   W kodzie przycisk menu stoi przed menu, żeby po otwarciu Tab wchodził od razu w pozycje menu; kolejność na ekranie ustawia order. */
.site-head { position: relative; z-index: 30; background: var(--bg); }
.head-in { display: flex; align-items: center; gap: 16px; min-height: 76px; }
.logo { flex: none; display: inline-flex; align-items: center; min-height: 44px; font: 800 1.1875rem/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.logo-dot { color: var(--accent); }
.logo-tld { color: var(--muted); font-weight: 700; }
.main-nav { order: 1; display: flex; align-items: center; gap: 20px; margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: 2px; }
.main-nav li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-s); font-size: 1rem; font-weight: 500; color: var(--text); text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.main-nav li a[aria-current] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.btn-line { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-s); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 1rem; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.icon-btn { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-s); background: none; color: var(--ink); cursor: pointer; transition: background-color .15s ease; }
.icon-btn svg { width: 24px; height: 24px; }
.cart { order: 2; }
.burger { order: 3; display: none; }
.burger .i-close, .burger[aria-expanded="true"] .i-open { display: none; }
.burger[aria-expanded="true"] .i-close { display: block; }
@media (hover: hover) and (pointer: fine) {
  .main-nav li a:hover { color: var(--ink); background: var(--band); }
  .main-nav li a[aria-current]:hover { background: none; }
  .btn-line:hover { background: var(--ink); color: var(--bg); }
  .icon-btn:hover { background: var(--band); }
}
/* próg w em rośnie razem z czcionką ustawioną w przeglądarce, więc menu chowa się, zanim przestanie się mieścić */
@media (max-width: 74.99em) {
  .head-in { min-height: 64px; gap: 4px; }
  .logo { margin-right: auto; font-size: clamp(.9375rem, 4.7vw, 1.0625rem); }
  .burger { display: inline-grid; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 16px; margin: 0; padding: 8px var(--gutter) 24px; background: var(--bg); box-shadow: 0 24px 32px -24px rgba(45, 42, 38, .18); }
  .site-head[data-open] .main-nav { display: flex; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav li { padding: 4px 0; }
  .main-nav li + li { border-top: 1px solid var(--line); }
  .main-nav li a { display: flex; padding: 0 4px; font-size: 1.0625rem; border-radius: 0; }
  .main-nav li a[aria-current] { box-shadow: none; color: var(--accent-dark); }
  .btn-line { justify-content: center; min-height: 48px; }
}

/* --- górna sekcja --- */
.hero { padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px); }
.hero h1 { max-width: 20ch; }
.hero .accent { color: var(--accent); }
.lede { max-width: 38rem; margin-top: clamp(16px, 2vw, 24px); font-size: clamp(1.125rem, 1.07rem + .22vw, 1.25rem); line-height: 1.5; }

/* --- skróty do grup: przyklejony rząd; kończy się razem z listą (.listing) --- */
.groups { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.groups::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line); opacity: 0; transition: opacity .2s ease; }
.groups.is-stuck::after { opacity: 1; }
/* 6 px po bokach: obramowanie fokusu skrajnych skrótów mieści się w polu przewijania */
.chips { display: flex; gap: 8px; margin-inline: -6px; padding: var(--chips-pad) 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; min-height: var(--chip-h); padding: 0 16px; border: 0; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 500 var(--fs-small)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease-out; }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--ink); box-shadow: none; color: var(--bg); }
.chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-current="true"]):not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
}
@media (max-width: 74.99em) {
  /* rząd wychodzi do krawędzi ekranu i przewija się w bok */
  .groups .wrap { width: 100%; }
  .chips { margin-inline: 0; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}

/* --- znaczniki przy narzędziu ---
   Kropka należy do poprzedniego znacznika, więc przy łamaniu zostaje na końcu wiersza; druga deklaracja wyłącza ją z czytnika ekranu. */
.facts { display: flex; flex-wrap: wrap; column-gap: .55em; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.facts > :not(:last-child)::after { content: "·"; content: "·" / ""; margin-left: .55em; }

/* --- przycisk (wypukły, jak na landingu) --- */
.btn { display: inline-flex; align-items: center; gap: .55em; min-height: 54px; padding: .85rem 1.6rem; border-radius: var(--r-m); background: var(--accent); box-shadow: 0 5px 0 var(--accent-deep), 0 14px 22px -12px rgba(45, 42, 38, .38); color: var(--card); font: 700 1.0625rem/1.2 var(--font-body); text-decoration: none; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.btn svg { flex: none; width: 1.05em; height: 1.05em; transition: transform .2s var(--ease-out); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-deep), 0 6px 10px -8px rgba(45, 42, 38, .38); transition-duration: .08s; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:active) { transform: translateY(-2px); box-shadow: 0 7px 0 var(--accent-deep), 0 20px 28px -14px rgba(45, 42, 38, .38); }
  .btn:hover svg { transform: translateX(3px); }
}

/* --- materiały do druku --- */
.pack { margin-top: var(--section); padding: var(--section) var(--gutter); background: var(--band); overflow: hidden; }
.pack .wrap { width: min(100%, var(--wrap)); }
.pack-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.pack h2 { max-width: 14ch; }
.pack-text p { max-width: 33rem; margin-top: 28px; }
.scribble { position: relative; display: inline-block; }
/* podkreślenie stoi pod ogonkiem „ę”, nie przecina go */
.scribble::after { content: ""; position: absolute; left: -.12em; right: -.12em; bottom: -.36em; height: .3em; background: url(../img/hand-underline-mobile.webp) center / 100% 100% no-repeat; pointer-events: none; }
.pack-text .actions { margin-top: 32px; }
.pack-fan img { width: 100%; filter: drop-shadow(0 12px 22px rgba(45, 42, 38, .14)); }
@media (max-width: 899px) {
  .pack-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pack-fan { order: -1; margin-inline: calc(var(--gutter) * -1); }
}

/* --- stopka --- */
.site-foot { padding-block: 56px 40px; font-size: var(--fs-small); }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: start; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 4px; justify-content: flex-end; margin-right: -12px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--text); text-decoration: none; }
.foot-nav a[aria-current] { color: var(--ink); font-weight: 700; }
.foot-end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .foot-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .22em; }
}
@media (max-width: 899px) {
  .foot-in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .foot-nav { justify-content: flex-start; margin: 0 0 0 -12px; }
  .foot-end { flex-direction: column; align-items: flex-start; }
}

/* --- bez skryptów: filtry kafli nie działają, więc znikają; menu na telefonie jest od razu rozwinięte --- */
@media (scripting: none) {
  .groups[role="group"] { display: none; }
}
@media (scripting: none) and (max-width: 74.99em) {
  .burger { display: none; }
  .head-in { flex-wrap: wrap; }
  .main-nav { order: 4; display: flex; position: static; flex-basis: 100%; padding: 0 0 16px; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}