:root {
  --page: #f5f2e9;
  --surface: #ffffff;
  --surface-soft: #f9fbf7;
  --ink: #17251d;
  /* Pomocniczy tekst: ≥ 4,5:1 na każdym jasnym tle sklepu (tests/text-contrast.test.cjs). */
  --muted: #5a665f;
  --line: #dce3dc;
  --line-strong: #c8d3ca;
  --green: #103d2d;
  --green-2: #265440;
  --green-3: #426653;
  --mint: #e9f5e4;
  --mint-2: #dff0d7;
  /* Tints of --green for hover and selection; a page design derives them from its primary colour. */
  --tint: #f4f8f3;
  --tint-line: #b7c9bb;
  --selected: #eaf5e8;
  --selected-line: #a9c9b1;
  --green-dark: #092f22;
  --lime: #8ce750;
  --lime-dark: #67c82e;
  --warning: #fff4dd;
  --warning-ink: #79520b;
  --warning-strong: #9a6200;
  --danger: #a9434b;
  --danger-soft: #fff0f1;
  --success: #247c4a;
  --success-soft: #e6f6eb;
  --info: #205d87;
  --info-soft: #e9f4fb;
  /* A disabled control is grey but still readable: its text keeps 4.5:1 (no opacity). */
  --disabled-surface: #e7ebe8;
  --disabled-line: #c3cbc6;
  --disabled-ink: #4d5852;
  --shadow: 0 12px 34px rgba(19, 50, 37, .08);
  --shadow-strong: 0 24px 70px rgba(8, 31, 22, .25);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  /* Two-tone focus indicator: a dark ring (≥10:1 on white and on the page) separated
     from the control by a white gap, so it stays visible on dark buttons too. */
  --focus-ring: var(--green);
  --focus-gap: 0 0 0 3px #fff;
  --focus: 0 0 0 2px #fff, 0 0 0 5px var(--focus-ring);
  /* Global layers only. Component-local layers stay next to their components. */
  --layer-header: 50;
  --layer-comfort-dock: 70;
  --layer-comfort-sharing: 75;
  --layer-cookie: 140;
  --layer-toast: 160;
  --layer-accessibility: 200;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--page); }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--lime) 9%, transparent), transparent 28rem),
    var(--page);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 1; color: var(--disabled-ink); }
:is(.primary-button, .secondary-button, .ghost-button, .danger-button, .add-button):disabled,
html[data-comfort] :is(.primary-button, .secondary-button, .ghost-button, .danger-button, .add-button):disabled {
  border-color: var(--disabled-line);
  background: var(--disabled-surface);
  color: var(--disabled-ink);
  box-shadow: none;
}
input, select, textarea { min-width: 0; }
img, svg { display: block; }
a { color: inherit; }
::selection { background: var(--lime); color: var(--green); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; box-shadow: var(--focus-gap); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  left: 18px;
  top: 10px;
  z-index: var(--layer-accessibility);
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--lime);
  color: var(--green);
  font-weight: 900;
  transform: translateY(-160%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }
.skip-link:focus-visible { outline-color: var(--green); }
.shell { width: min(1540px, calc(100% - 44px)); margin-inline: auto; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--layer-header);
  border-bottom: 1px solid color-mix(in srgb, var(--green) 12%, transparent);
  background: rgba(250, 248, 242, .94);
  box-shadow: 0 4px 18px rgba(19, 50, 37, .04);
  backdrop-filter: blur(18px);
}
.header-row {
  min-height: 80px;
  display: grid;
  grid-template-columns: 210px minmax(430px, 1fr) auto;
  align-items: center;
  gap: 22px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 4px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  text-align: left;
}
.brand-mark {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 14px 14px 14px 5px;
  background: var(--green);
  color: var(--lime);
  font-size: 28px;
  font-weight: 1000;
  letter-spacing: -.06em;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--green) 16%, transparent);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
/* Logo ustawione w panelu (Wygląd sklepu) zastępuje domyślny znak TEDI. */
.brand-logo { display: block; width: auto; max-width: 220px; height: 52px; object-fit: contain; }
.brand-logo[hidden] { display: none; }
.brand.has-logo .brand-mark,
.brand.has-logo .brand-copy { display: none; }
.brand-copy strong { color: var(--green); font-size: 1.375rem; font-weight: 1000; letter-spacing: .06em; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: .75rem; font-weight: 750; }
.main-nav { display: grid; grid-template-columns: repeat(4, minmax(120px, 180px)); justify-content: center; gap: 10px; }
.nav-item {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  color: #44544b;
  font-size: .9375rem;
  font-weight: 850;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.nav-item span { font-size: 22px; }
.nav-item:hover { border-color: var(--green-3); transform: translateY(-1px); }
.nav-item.active { border-color: var(--green); background: var(--green); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--green) 15%, transparent); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.icon-button, .cart-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  color: var(--green);
  font-size: .875rem;
  font-weight: 850;
  white-space: nowrap;
  transition: transform .18s ease, border-color .18s ease;
}
.icon-button:hover, .cart-button:hover { transform: translateY(-1px); border-color: var(--green-3); }
.cart-button { min-width: 136px; border-color: var(--green); background: var(--green); color: #fff; }
/* After adding a product the header cart button unfolds downwards into a card (app.js: showCartPeek). */
.cart-button-wrap { position: relative; display: inline-flex; }
.cart-button.is-peeking { border-bottom-right-radius: 0; border-bottom-left-radius: 0; transform: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 45%, transparent); }
.cart-peek {
  position: absolute;
  z-index: 1;
  top: 100%;
  right: 0;
  width: min(330px, calc(100vw - 32px));
  display: grid;
  gap: 11px;
  padding: 12px;
  border-radius: 18px 0 18px 18px;
  background: var(--green);
  color: #fff;
  box-shadow: 0 22px 48px rgba(8, 31, 22, .32);
  cursor: pointer;
  transform-origin: top right;
}
.cart-peek[hidden] { display: none; }
.cart-peek.is-open { animation: cart-peek-in .32s cubic-bezier(.2, .9, .3, 1.15) both; }
.cart-peek.is-leaving { animation: cart-peek-out .22s ease both; }
.cart-peek-label { display: flex; align-items: center; gap: 7px; color: var(--lime); font-size: .8125rem; font-weight: 900; letter-spacing: .02em; }
.cart-peek-label svg { width: 18px; height: 18px; stroke-width: 3; }
.cart-peek-product { width: 100%; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 14px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.cart-peek-product:hover { box-shadow: 0 0 0 2px var(--lime); }
.cart-peek-product:active { transform: scale(.98); }
.cart-peek-product:focus-visible { box-shadow: var(--focus); outline: 0; }
.cart-peek-visual { width: 96px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: var(--surface-soft); animation: cart-peek-pop .45s .12s cubic-bezier(.2, .9, .3, 1.3) both; }
.cart-peek-visual img { width: 100%; height: 100%; object-fit: contain; }
.cart-peek-visual .product-emoji { font-size: 46px; }
.cart-peek-copy { min-width: 0; display: grid; gap: 5px; }
.cart-peek-copy strong { display: -webkit-box; overflow: hidden; font-size: .875rem; font-weight: 850; line-height: 1.3; white-space: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cart-peek-copy small { color: var(--muted); font-size: .75rem; font-weight: 750; white-space: normal; }
.cart-peek-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px 2px; font-size: .875rem; font-weight: 850; }
.cart-peek-total small { margin-left: 4px; color: rgba(255, 255, 255, .72); font-size: .75rem; font-weight: 750; }
.cart-peek-total b { color: var(--lime); font-size: 1.375rem; font-weight: 1000; letter-spacing: -.01em; }
@keyframes cart-peek-in { from { opacity: 0; transform: scaleY(.25); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes cart-peek-out { to { opacity: 0; transform: translateY(-6px) scaleY(.6); } }
@keyframes cart-peek-pop { from { opacity: 0; transform: scale(.6); } }
.count-badge {
  min-width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--green);
  font-size: .8125rem;
  font-weight: 950;
}

main { padding: 24px 0 78px; }
.mode-banner {
  min-height: 62px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 11px 14px 11px 17px;
  border: 1px solid #e7ca82;
  border-radius: 16px;
  background: var(--warning);
  color: var(--warning-ink);
}
.mode-banner > span:nth-child(2) { display: flex; flex-direction: column; }
.mode-banner strong { font-size: .875rem; font-weight: 900; }
.mode-banner small { font-size: 1rem; }
.mode-banner button { min-height: 48px; padding: 0 14px; border: 1px solid rgba(121,82,11,.25); border-radius: 11px; background: #fff9ed; color: inherit; font-size: .875rem; font-weight: 850; }
.mode-dot { width: 10px; height: 10px; border-radius: 50%; background: #d08b19; box-shadow: 0 0 0 5px rgba(208,139,25,.14); }

.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; align-items: start; gap: 23px; }
.catalog-column { min-width: 0; }
.panel { border: 1px solid color-mix(in srgb, var(--green) 11%, transparent); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); }
.filter-panel { margin-bottom: 18px; padding: 20px; }
.section-heading { display: flex; align-items: center; gap: 12px; }
.section-heading.compact { margin-bottom: 15px; }
.section-heading h1, .section-heading h2 { margin: 0; color: var(--green); font-size: clamp(1.3125rem, calc(2vw * var(--text-zoom, 1)), 1.75rem); line-height: 1.15; letter-spacing: -.025em; }
.section-heading.compact h1 { font-size: 1.3125rem; }
.eyebrow { margin: 0 0 3px; color: var(--green-3); font-size: .75rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.audience-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.audience-chip {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-soft);
  color: #526058;
  font-size: .875rem;
  font-weight: 800;
  transition: .18s ease;
}
.audience-chip span { font-size: 23px; }
.audience-chip:hover { border-color: var(--green-3); transform: translateY(-1px); }
.audience-chip.active { border-color: var(--green); background: var(--green); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--green) 13%, transparent); }

.catalog-panel { padding: 23px; }
.catalog-head { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(280px, 420px); align-items: center; gap: 18px; margin-bottom: 18px; }
.search-box { min-height: 52px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 0 10px 0 15px; border: 1px solid var(--line-strong); border-radius: 15px; background: #fff; color: #718078; }
.search-box:focus-within { border-color: var(--green-2); box-shadow: var(--focus); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .9375rem; }
.search-box input::placeholder { color: #829088; }
/* The field has its own "Wyczyść wyszukiwanie" button; the browser's built-in × would be a second one. */
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-box button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--tint); color: var(--green); }
.search-box button svg { width: 18px; height: 18px; }
/* Category browser in the categories tile: one level deeper than the section row, drawn as a
   nested box with "Wstecz" and the path on top. The chips wrap instead of scrolling sideways. */
.type-tabs { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-left: 4px solid var(--green-3); border-radius: 16px; background: var(--surface-soft); }
.type-tabs[hidden] { display: none; }
.category-drill-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.category-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--muted); font-size: .875rem; font-weight: 700; }
.category-path strong { color: var(--green); font-size: 1rem; font-weight: 900; }
.category-path-sep { color: var(--green-3); }
.category-drill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.type-chip { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 0 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: #536158; font-size: .875rem; font-weight: 800; }
.type-chip:hover { border-color: var(--green-3); }
.type-chip.active { border-color: var(--green); background: var(--mint); color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 10%, transparent); }
.category-back { border-color: var(--green-3); background: #fff; color: var(--green); }
.category-count { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--green) 8%, transparent); color: inherit; font-size: .75rem; font-weight: 800; line-height: 1.2; text-align: center; }
.active > .category-count { background: rgba(255,255,255,.22); }
.results-toolbar { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.results-toolbar > p { margin: 0; color: var(--muted); font-size: .875rem; }
.results-toolbar > p strong { color: var(--ink); }
.results-toolbar > p span:not(:empty)::before { content: " · "; }
.results-toolbar > label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8125rem; font-weight: 700; }
.results-toolbar > label > select { min-height: 48px; padding: 0 38px 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-size: .875rem; font-weight: 750; }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.product-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover { transform: translateY(-2px); border-color: var(--tint-line); box-shadow: 0 14px 28px rgba(19,50,37,.09); }
/* Zdjęcie produktu jest zawsze kwadratowe; inne proporcje mieszczą się w całości na białym tle. */
.product-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  padding: 0;
  border: 0;
  background: #fff;
  cursor: pointer;
}
.product-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0;
  position: relative;
  z-index: 2;
}
.product-emoji { position: relative; z-index: 2; font-size: clamp(48px, 6vw, 72px); filter: drop-shadow(0 10px 9px rgba(35,60,42,.15)); }
.stock-badge { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--success); font-size: .75rem; font-weight: 900; box-shadow: 0 3px 10px rgba(17,43,31,.08); }
.stock-badge.low { background: var(--warning); color: var(--warning-ink); }
.stock-badge.out { background: var(--danger-soft); color: var(--danger); }
.product-content { display: flex; flex: 1; flex-direction: column; padding: 12px 14px 14px; }
/* Producent i waga: kapsułki nachodzące na dolną krawędź zdjęcia zamiast osobnych wierszy. */
.product-tags { position: relative; z-index: 3; display: flex; min-width: 0; gap: 5px; margin: -25px 0 8px; padding: 0; list-style: none; }
.product-tag { min-width: 0; overflow: hidden; padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: #44524a; font-size: .75rem; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 2px 6px rgba(17,43,31,.06); }
.product-tag.product-brand { color: var(--green-3); letter-spacing: .04em; text-transform: uppercase; }
.product-weight { flex-shrink: 0; }
/* Pełna nazwa bez wielokropka: kafelek rośnie o tyle wierszy, ile trzeba (rzędy siatki mierzą najwyższą kartę). */
.product-name-button { display: block; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 1rem; font-weight: 850; line-height: 1.35; text-align: left; overflow-wrap: anywhere; hyphens: auto; text-wrap: pretty; }
.product-buy { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 8px; margin-top: auto; padding-top: 10px; }
.price-block { min-width: 0; }
.price-block small { display: block; color: var(--muted); font-size: .75rem; }
.price-block strong { display: block; color: var(--green); font-size: 1.25rem; font-weight: 950; line-height: 1.25; }
/* Omnibus: the lowest price of the 30 days before a cut, in a tip under the "i" next to the price. */
.detail-price-row { display: flex; align-items: center; gap: 8px; }
/* The Omnibus line is the smallest print in the shop on purpose (10 px at the base size), on the tile
   and under the price on the product page. */
.price-block .omnibus-price { margin-top: 1px; color: var(--muted); font-size: .625rem; font-weight: 500; line-height: 1.2; }
.detail-price .omnibus-price { margin-top: 3px; color: var(--muted); font-size: .625rem; font-weight: 500; line-height: 1.2; }
.price-block .unit-price, .detail-price .unit-price { margin-top: 2px; font-weight: 700; }
/* Promotion price cut (also the promotion autopilot): sale price in red, list price crossed out. */
/* Labels on the product photo: the promotion badge and the coloured tags lie over the picture. */
.photo-labels { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: calc(100% - 20px); pointer-events: none; }
.photo-labels .promotion-badge { position: static; }
.photo-tag { max-width: 100%; overflow: hidden; padding: 2px 7px; border-radius: 4px; background: var(--tag-color, #c2410c); color: var(--tag-ink, #fff); font-size: .75rem; font-weight: 900; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 2px 6px rgba(17,43,31,.18); }
.product-gallery-main { position: relative; }
.product-gallery-main .photo-labels { top: 14px; left: 14px; }
.product-gallery-main .photo-tag { padding: 4px 9px; font-size: .8125rem; }
.promotion-badge { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 5px 9px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .8125rem; font-weight: 950; box-shadow: 0 3px 10px rgba(17,43,31,.12); }
.detail-price .promotion-badge { position: static; display: inline-block; margin-bottom: 6px; }
.price-block.is-promotion strong, .detail-price .promotion-badge ~ .detail-price-row strong { color: var(--danger); }
.regular-price { display: block; color: var(--muted); font-size: .8125rem; font-weight: 700; }
.similar-price .regular-price { display: inline; margin-left: 6px; }
.add-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--lime); color: var(--green); font-size: .875rem; font-weight: 950; }
.add-button:hover { background: var(--lime-dark); }
.add-button svg { width: 18px; height: 18px; }
.inline-qty { display: grid; grid-template-columns: 44px 34px 44px; align-items: center; border: 1px solid var(--green); border-radius: 12px; overflow: hidden; background: var(--green); color: #fff; }
.inline-qty button { width: 44px; height: 48px; display: grid; place-items: center; border: 0; background: transparent; color: #fff; }
.inline-qty button:hover { background: rgba(255,255,255,.1); }
.inline-qty svg { width: 16px; height: 16px; }
.inline-qty b { text-align: center; font-size: .8125rem; }
.product-buy .add-button, .product-buy .inline-qty { width: 100%; }
.product-buy .inline-qty { grid-template-columns: 48px minmax(0, 1fr) 48px; border: 0; }
.product-buy .inline-qty button { width: auto; }
.skeleton-card { height: 330px; border-radius: 19px; background: linear-gradient(100deg, #eef1ed 35%, #f8faf7 50%, #eef1ed 65%); background-size: 300% 100%; animation: shimmer 1.25s infinite; }
@keyframes shimmer { to { background-position-x: -100%; } }
.empty-state { padding: 60px 20px; text-align: center; }
.empty-state > span { font-size: 52px; }
.empty-state h3 { margin: 10px 0 4px; color: var(--green); font-size: 1.3125rem; }
.empty-state p { margin: 0 0 16px; color: var(--muted); }
.empty-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; max-width: 640px; }
.empty-categories p { flex-basis: 100%; margin: 0; }
.empty-categories button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--green); font: inherit; font-weight: 750; cursor: pointer; }
.empty-categories button:hover { background: var(--mint); }
.empty-help { margin-top: 22px !important; }
.empty-help button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--green); font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Marks the end of the loaded cards; reaching it on screen loads the next screen of products. */
.catalog-sentinel { height: 1px; }
/* A short footer band between products (every few screens of the endless list): low but complete. */
.catalog-break { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 8px 24px; padding: 16px 22px; border-radius: 15px; background: #e9e8df; color: #536158; font-size: .8125rem; line-height: 1.4; }
.catalog-break > div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.catalog-break strong, .catalog-break-title { margin: 0; color: var(--green); font-weight: 900; }
.catalog-break-title { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.catalog-break :is(a, button) { padding: 0; border: 0; background: transparent; color: var(--green); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.catalog-break :is(a, button):hover { text-decoration: underline; }
.catalog-gap { display: none; }

.cart-panel {
  position: sticky;
  top: 104px;
  max-height: calc(100vh - 126px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--green) 14%, transparent);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow);
}
.cart-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cart-head h2 { margin: 0; color: var(--green); font-size: 1.4375rem; line-height: 1.1; }
.cart-head-actions { display: flex; align-items: center; gap: 7px; }
.cart-body { min-height: 180px; overflow-y: auto; padding: 12px 15px; scrollbar-width: thin; }
.empty-cart { min-height: 245px; display: grid; place-items: center; padding: 28px 14px; text-align: center; }
.empty-cart-visual { width: 84px; height: 84px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 26px; background: var(--mint); color: var(--green); }
.empty-cart-visual svg { width: 38px; height: 38px; }
.empty-cart h3 { margin: 0 0 5px; color: var(--green); font-size: 1.1875rem; }
.empty-cart p { margin: 0; color: var(--muted); font-size: 1rem; }
.cart-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.cart-item:last-child { border-bottom: 1px solid var(--line); }
.cart-thumb { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--mint); font-size: 27px; }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cart-item-main { min-width: 0; }
.cart-item-name { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: .875rem; font-weight: 850; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cart-item-meta { display: block; margin: 2px 0 8px; color: var(--muted); font-size: .75rem; }
.cart-item-controls { display: flex; align-items: center; gap: 7px; }
.cart-item-controls .inline-qty { grid-template-columns: 44px 56px 44px; background: #fff; color: var(--green); }
.cart-item-controls .inline-qty button { width: 44px; height: 44px; color: var(--green); }
/* The quantity is a number field between − and + (typing 20 beats nineteen clicks). */
.inline-qty input[data-cart-quantity] { width: 100%; min-width: 3.2rem; height: 44px; padding: 0 2px; border: 0; border-inline: 1px solid var(--line); background: #fff; color: var(--green); font: inherit; font-size: 1rem; font-weight: 900; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.inline-qty input[data-cart-quantity]::-webkit-inner-spin-button, .inline-qty input[data-cart-quantity]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.inline-qty input[data-cart-quantity]:focus-visible { box-shadow: var(--focus); outline: 0; }
.remove-button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--danger); }
.remove-button:hover { background: var(--danger-soft); }
.remove-button svg { width: 17px; height: 17px; }
.cart-item-price { padding-top: 3px; color: var(--green); font-size: .875rem; font-weight: 900; white-space: nowrap; }
.cart-foot { padding: 16px 18px 18px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.coupon-box { width: min(100%, 460px); margin-top: 2px; }
.coupon-box > label { display: block; margin-bottom: 7px; color: var(--ink); font-size: .8125rem; font-weight: 900; }
.coupon-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin: 0; }
.coupon-row input { min-height: 50px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 11px; background: #fff; color: var(--ink); font-size: .9375rem; font-weight: 700; text-transform: uppercase; outline: 0; }
.coupon-row input::placeholder { color: #8a948d; font-weight: 500; text-transform: none; }
.coupon-row input:focus { border-color: var(--green); box-shadow: var(--focus); }
.coupon-row button { min-height: 50px; padding: 0 16px; border: 1px solid var(--green); border-radius: 11px; background: var(--green); color: #fff; font-size: .875rem; font-weight: 900; }
.coupon-row button:hover { background: var(--green-dark); }
.primary-button, .secondary-button, .ghost-button, .danger-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 19px;
  border-radius: 13px;
  font-size: .875rem;
  font-weight: 900;
}
.primary-button { border: 1px solid var(--green); background: var(--green); color: #fff; box-shadow: 0 9px 20px color-mix(in srgb, var(--green) 15%, transparent); }
.primary-button:hover { background: var(--green-dark); }
.primary-button svg { width: 19px; height: 19px; }
.secondary-button { border: 1px solid var(--green); background: var(--mint); color: var(--green); }
.secondary-button:hover { background: var(--mint-2); }
.ghost-button { border: 1px solid var(--line-strong); background: #fff; color: var(--green); }
.ghost-button:hover { border-color: var(--green-3); }
.danger-button { border: 1px solid #e5b8bb; background: var(--danger-soft); color: var(--danger); }
.checkout-button { width: 100%; }
.secure-note { display: flex; align-items: flex-start; gap: 7px; margin: 10px 2px 0; color: var(--muted); font-size: 1rem; line-height: 1.4; }
.secure-note svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--success); }

.site-footer { padding: 30px 0 100px; border-top: 1px solid color-mix(in srgb, var(--green) 12%, transparent); background: #e9e8df; color: #536158; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.footer-grid strong { color: var(--green); }
.footer-grid span, .footer-grid a, .footer-grid button { font-size: 1rem; }
.footer-grid button { padding: 0; border: 0; background: transparent; color: var(--green); font-weight: 800; }

dialog {
  width: min(1120px, calc(100% - 34px));
  max-width: none;
  max-height: calc(100dvh - 34px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 25px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-strong);
}
dialog::backdrop { background: rgba(5, 20, 14, .62); backdrop-filter: blur(5px); }
dialog[open] { animation: dialog-in .18s ease both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.dialog-shell { position: relative; max-height: calc(100dvh - 34px); overflow: auto; }
.dialog-close { position: sticky; z-index: 10; top: 14px; float: right; width: 44px; height: 44px; display: grid; place-items: center; margin: 14px 14px -58px 0; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.94); color: var(--green); box-shadow: 0 4px 12px rgba(17,43,31,.08); backdrop-filter: blur(8px); }
.dialog-close svg { width: 20px; height: 20px; }
/* Category menu (☰ Kategorie, app.js): a panel sliding in from the left over the dimmed page.
   The inner panel fills the dialog, so only a click on the dimmed page reaches the dialog itself. */
dialog.category-drawer { position: fixed; inset: 0 auto 0 0; width: min(88vw, 23rem); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border-radius: 0 22px 22px 0; overflow: hidden; }
.category-drawer[open] { animation: drawer-in .22s cubic-bezier(.2, .75, .25, 1) both; }
@keyframes drawer-in { from { transform: translateX(-100%); } }
.category-drawer-panel { height: 100%; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
.category-drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.category-drawer-head h2 { margin: 0; color: var(--green); font-size: 1.35rem; line-height: 1.2; }
.category-drawer-close { min-height: 48px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--green); font-weight: 850; }
.category-drawer-close svg { width: 20px; height: 20px; }
.drawer-tree, .drawer-group { margin: 0; padding: 0; list-style: none; }
.drawer-tree { display: grid; gap: 2px; padding: 10px; }
.drawer-row { width: 100%; min-height: 48px; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); font-weight: 750; line-height: 1.3; text-align: left; }
.drawer-tree > li > .drawer-row { min-height: 56px; font-weight: 900; }
.drawer-row:hover { border-color: var(--tint-line); background: var(--tint); }
.drawer-icon { grid-column: 1; font-size: 1.25em; line-height: 1; text-align: center; }
.drawer-label { grid-column: 2; min-width: 0; overflow-wrap: break-word; }
.drawer-row .category-count { grid-column: 3; }
.drawer-caret { grid-column: 4; width: 1.2rem; color: var(--green); font-size: 1.1em; text-align: center; }
.drawer-caret::before { content: "▸"; }
.drawer-toggle[aria-expanded="true"] .drawer-caret::before { content: "▾"; }
.drawer-toggle.is-inside { color: var(--green); }
/* The open category: colour, a frame and a check mark, not colour alone. */
.drawer-row.is-current { border-color: var(--selected-line); background: var(--selected); color: var(--green); }
.drawer-row.is-current::after { content: "✓"; grid-column: 4; font-weight: 950; text-align: center; }
.drawer-all .drawer-label { color: var(--green); font-weight: 850; }
.drawer-group { margin: 2px 0 8px 1.15rem; padding-left: .55rem; border-left: 2px solid var(--line); }
.category-drawer-more { display: grid; gap: 2px; margin-top: auto; padding: 12px 10px 16px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.category-drawer-more button { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--green); font-weight: 800; text-align: left; }
.category-drawer-more button:hover { background: var(--tint); }
.category-drawer-more svg { width: 20px; height: 20px; flex: none; }
.category-drawer-more span[aria-hidden] { width: 20px; flex: none; text-align: center; }
/* Phones and tablets only (≤960 px): on a computer the categories are always beside the products. */
.category-menu-button { display: none; }
.header-find { display: contents; }

.dialog-header { padding: 24px 76px 20px 26px; border-bottom: 1px solid var(--line); }
.dialog-header .eyebrow { margin-bottom: 5px; }
.dialog-header h2 { margin: 0; color: var(--green); font-size: clamp(1.4375rem, calc(3vw * var(--text-zoom, 1)), 1.9375rem); line-height: 1.15; letter-spacing: -.025em; }
.dialog-header p:last-child { margin: 7px 0 0; color: var(--muted); }
.dialog-body { padding: 24px 26px 28px; }

/* Product page (October 2026): a view of the one-page shop shown in place of the product list,
   with the categories still on the left. Photo and everything needed to buy at the top, then the
   description and the label information. */
.product-page { min-width: 0; padding: 22px 28px 30px; animation: product-page-in .2s ease-out; }
@keyframes product-page-in { from { opacity: 0; transform: translateY(8px); } }
.product-page:focus { outline: 0; }
.product-page-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 20px; }
.product-back, .product-page-end .text-button { gap: 7px; }
.product-back svg, .product-page-end svg { width: 18px; height: 18px; }
.product-crumbs { min-width: 0; }
.product-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .8125rem; }
.product-crumbs li { min-width: 0; display: inline-flex; align-items: center; }
.product-crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--green-3); font-size: 1rem; }
.product-crumbs button { min-height: 36px; padding: 4px 2px; border: 0; background: none; color: var(--green); font: inherit; font-weight: 800; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; cursor: pointer; }
.product-crumbs button:hover { text-decoration-color: currentColor; }
.product-crumbs [aria-current] { display: block; max-width: 40ch; overflow: hidden; color: #48574e; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.product-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 34px; }
.product-gallery { min-width: 0; display: grid; gap: 10px; }
.product-gallery-main { aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.product-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
/* One row and column as tall as the box: the photo shrinks to fit instead of being cut off. */
.product-gallery-main { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.product-gallery-main img { min-width: 0; min-height: 0; }
.product-gallery-main .product-emoji { font-size: clamp(96px, 11vw, 160px); }
.product-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.product-thumbs button { width: 68px; height: 68px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.product-thumbs button:hover { border-color: var(--green-3); }
.product-thumbs button[aria-pressed="true"] { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.product-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.product-summary { min-width: 0; padding-top: 4px; }
.product-summary .eyebrow { margin-bottom: 8px; }
.product-summary h1 { margin: 0; color: var(--green); font-size: clamp(1.625rem, calc(2.5vw * var(--text-zoom, 1)), 2.25rem); line-height: 1.15; letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
.product-lead { margin: 12px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.product-buy-box { display: grid; gap: 14px; margin-top: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); }
.detail-price small, .detail-price strong { display: block; }
.detail-price small { margin-top: 2px; color: var(--muted); font-size: .8125rem; }
.detail-price strong { color: var(--green); font-size: clamp(1.875rem, calc(3vw * var(--text-zoom, 1)), 2.375rem); font-weight: 950; line-height: 1.1; letter-spacing: -.02em; }
.product-stock { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--success); font-size: .9375rem; font-weight: 850; }
.product-stock span { width: 10px; height: 10px; flex: none; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent); }
.product-stock.is-low { color: var(--warning-strong); }
.product-stock.is-out { color: var(--danger); }
.detail-action-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.detail-action-row .primary-button { flex: 1 1 190px; min-height: 54px; justify-content: center; font-size: 1rem; }
.detail-action-row .primary-button svg { width: 20px; height: 20px; }
.detail-action-row .buy-now-button { flex: 1 1 150px; min-height: 54px; justify-content: center; font-size: 1rem; }
/* InPost Pay: przycisk widgetu (rysuje go skrypt InPost) pod „Dodaj do koszyka”, w podsumowaniu koszyka i w formularzu zamówienia. */
.detail-action-row .inpost-pay-slot { flex: 1 1 100%; }
.inpost-pay-cart { margin-top: 12px; }
.checkout-inpost-pay { display: grid; gap: 10px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.checkout-inpost-pay p { margin: 0; }
.inpost-pay-thank-you { display: grid; gap: 12px; }
.quantity-picker { display: grid; grid-template-columns: 46px 52px 46px; min-height: 54px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 13px; background: #fff; }
.quantity-picker button { display: grid; place-items: center; border: 0; background: #fff; color: var(--green); }
.quantity-picker button:disabled { color: var(--disabled-ink); }
.quantity-picker input { width: 52px; border: 0; border-inline: 1px solid var(--line); outline: 0; font-size: 1rem; text-align: center; font-weight: 900; -moz-appearance: textfield; }
.quantity-picker input::-webkit-inner-spin-button { appearance: none; }
.quantity-picker input:focus-visible { box-shadow: inset 0 0 0 3px var(--focus-ring); }
.product-in-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--success-soft); color: var(--success); font-size: .875rem; font-weight: 850; }
.product-in-cart svg { width: 18px; height: 18px; stroke-width: 3; }
.product-in-cart button { min-height: 40px; margin-left: auto; padding: 4px 12px; border: 1px solid var(--green); border-radius: 10px; background: #fff; color: var(--green); font: inherit; font-weight: 850; cursor: pointer; }
.product-perks { display: grid; gap: 9px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); color: #48574e; font-size: .875rem; list-style: none; }
.product-perks li { display: flex; align-items: center; gap: 10px; }
.product-perks svg { width: 20px; height: 20px; flex: none; color: var(--green); }
.product-dispatch:empty { display: none; }
.product-dispatch time { color: var(--green); font-weight: 900; font-variant-numeric: tabular-nums; }
.product-dispatch strong { color: var(--green); font-weight: 900; }
.product-dispatch-label { font-weight: 850; }
.product-phone-order { margin: 12px 0 0; color: var(--green); font-size: 1rem; font-weight: 850; line-height: 1.45; }
.product-phone-order a { color: inherit; white-space: nowrap; text-decoration: none; }
.product-phone-order a:hover, .product-phone-order a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.product-delivery-prices { padding-top: 12px; border-top: 1px solid var(--line); }
.product-delivery-prices h2 { margin: 0 0 6px; color: var(--green); font-size: .875rem; font-weight: 900; }
.product-delivery-prices dl { display: grid; gap: 4px; margin: 0; font-size: .875rem; }
.product-delivery-prices dl div { display: flex; justify-content: space-between; gap: 12px; }
.product-delivery-prices dt { color: #48574e; }
.product-delivery-prices dd { margin: 0; color: var(--green); font-weight: 850; white-space: nowrap; }
.product-warnings { margin: 26px 0 0; padding: 14px 16px; border: 1px solid #e3c678; border-radius: 14px; background: var(--warning); color: var(--warning-ink); font-size: .875rem; }
.product-warnings h2 { margin: 0; color: var(--warning-ink); font-size: 1rem; }
.product-warnings ul { margin: 6px 0 0; padding-left: 20px; }
/* Leki weterynaryjne i produkty biobójcze: obowiązkowe informacje widoczne bez rozwijania. */
.product-regulatory { margin: 26px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-size: .875rem; }
.product-regulatory h2 { margin: 0 0 6px; color: var(--green); font-size: 1rem; }
.product-regulatory p { margin: 6px 0 0; }
.product-regulatory.is-biocide { border-color: #e3c678; }
.product-prescription { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-weight: 750; }
.ghs-pictograms { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 10px 0 0; padding: 0; list-style: none; }
.ghs-pictograms li { display: inline-flex; align-items: center; gap: 10px; }
.ghs-diamond { position: relative; isolation: isolate; width: 30px; height: 30px; display: inline-grid; place-items: center; margin: 5px; font-size: .75rem; font-weight: 900; }
.ghs-diamond::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 3px solid #c8102e; background: #fff; transform: rotate(45deg); }
.hazard-statements { margin: 6px 0 0; padding-left: 20px; }
.vet-online-sales { margin-top: 10px; }
.vet-online-sales img { display: block; max-width: 140px; height: auto; }
.product-section { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.product-section > h2 { margin: 0 0 14px; color: var(--green); font-size: 1.4375rem; letter-spacing: -.02em; }
.product-description { max-width: 78ch; color: #37443c; font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.product-description p { margin: 0 0 14px; }
.product-description ul { margin: 0 0 16px; padding-left: 22px; }
.product-description li { margin: 4px 0; }
.product-description .check-list { padding-left: 0; list-style: none; }
.product-description .check-list li { position: relative; padding-left: 32px; }
.product-description .check-list li::before { content: "✓"; position: absolute; top: .2em; left: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--success); color: #fff; font-size: .8125rem; font-weight: 900; line-height: 1; }
.product-description h3 { margin: 20px 0 6px; color: var(--green); font-size: 1.0625rem; }
.product-spec { display: grid; max-width: 900px; margin: 0; }
.product-spec div { display: grid; grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.product-spec div:first-child { border-top: 1px solid var(--line); }
.product-spec dt { color: var(--muted); font-size: .875rem; }
.product-spec dd { margin: 0; color: var(--ink); font-size: .875rem; font-weight: 700; overflow-wrap: anywhere; white-space: pre-line; }
.product-parameters-group { margin: 20px 0 6px; color: var(--ink); font-size: 1rem; }
.product-parameters-group:first-of-type { margin-top: 0; }
.product-spec dd.is-unknown { color: var(--muted); font-weight: 400; font-style: italic; }
.product-documents { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; color: var(--muted); font-size: .8125rem; }
.product-documents > strong { width: 100%; color: var(--green); font-size: .8125rem; }
.product-documents a { min-height: 44px; display: inline-flex; align-items: center; color: var(--green); font-weight: 850; text-underline-offset: 3px; }
.product-manufacturer { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 30px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.product-manufacturer h3 { margin: 0 0 4px; color: var(--green); font-size: .9375rem; }
.product-manufacturer p { margin: 0; color: #48574e; font-size: 1rem; overflow-wrap: anywhere; }
.product-manufacturer strong, .product-manufacturer span { display: block; }
.product-manufacturer a { color: var(--green); font-weight: 800; text-underline-offset: 3px; }
.product-page-end { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.product-loading, .product-missing { display: grid; justify-items: center; gap: 10px; padding: 70px 20px; text-align: center; }
.product-loading .spinner { margin-bottom: 4px; }
.product-loading p { margin: 0; color: var(--muted); font-weight: 700; }
.product-missing > span { font-size: 3rem; }
.product-missing h1 { margin: 0; color: var(--green); font-size: 1.625rem; }
.product-missing p { max-width: 52ch; margin: 0 0 8px; color: var(--muted); }
/* Product links in the list look like the former buttons. */
a.product-visual, a.product-name-button { text-decoration: none; }
a.product-name-button:hover { text-decoration: underline; text-underline-offset: 3px; }

.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); align-items: start; }
.checkout-main { padding: 24px 27px 30px; }
.checkout-main h2 { margin: 0; color: var(--green); font-size: 1.6875rem; letter-spacing: -.025em; }
.checkout-lead { margin: 5px 0 20px; color: var(--muted); }
.checkout-summary { min-height: 0; padding: 24px; border-left: 1px solid var(--line); background: var(--surface-soft); }
.checkout-summary h3 { margin: 0 0 15px; color: var(--green); font-size: 1.125rem; }
.summary-lines { display: grid; gap: 8px; margin-top: 0; padding-top: 0; border-top: 0; }
.summary-lines span { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .875rem; }
.summary-lines span.total { margin-top: 3px; padding-top: 10px; border-top: 1px dashed var(--line-strong); color: var(--ink); font-size: 1.0625rem; font-weight: 900; }
.summary-lines span.total strong { color: var(--green); font-size: 1.3125rem; }
.form-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-section-title { margin: 0 0 13px; color: var(--green); font-size: 1.0625rem; }
.required-note { margin: -7px 0 12px; color: var(--muted); font-size: 1rem; }
.choice-grid + .required-note { margin-top: 10px; }
.choice-grid + .field-error + .required-note { margin-top: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { margin-bottom: 5px; color: #435249; font-size: .875rem; font-weight: 800; }
.field label small { color: var(--muted); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 49px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: .9375rem;
  outline: 0;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-2); box-shadow: var(--focus); }
.field input.invalid, .field select.invalid { border-color: var(--danger); background: var(--danger-soft); }
.field-error { display: none; margin-top: 5px; color: #8b2530; font-size: 1rem; font-weight: 800; }
.field-error.visible { display: block; }
.field-help { margin-top: 4px; color: var(--muted); font-size: 1rem; }
.choice-fieldset { min-width: 0; margin-inline: 0; padding-inline: 0; padding-bottom: 0; border-right: 0; border-bottom: 0; border-left: 0; }
.choice-fieldset legend { float: left; width: 100%; padding: 0; }
.choice-fieldset legend + * { clear: both; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.channel-title { margin: 22px 0 10px; font-size: 1rem; color: var(--green); }
.channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }
.channel-card { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 96px; padding: 12px 8px; border: 1px solid var(--line-strong); border-radius: 13px; background: #fff; text-align: center; overflow-wrap: anywhere; }
.channel-card:hover { border-color: var(--green-3); }
.channel-card.active { border: 2px solid var(--green); padding: 11px 7px; background: var(--mint); }
.channel-card img { max-width: 100%; height: 34px; object-fit: contain; }
.channel-card .channel-mark { font-size: 1.625rem; line-height: 34px; }
.channel-card strong { color: var(--green); font-size: .8125rem; line-height: 1.25; }
.channel-card span:not(.channel-mark) { color: var(--muted); font-size: .75rem; }
.blik-panel { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; }
.blik-panel h3 { margin: 0; font-size: 1rem; color: var(--green); }
.blik-panel p { margin: 0; }
.blik-code input { max-width: 11rem; font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: .12em; text-align: center; }
/* Row 1: icon | name | price; row 2: the description under the name and the price; row 3: why the
   option is unavailable. The name keeps the free width (minmax(0, 1fr)) and the price never takes
   more than 40% of the card (fit-content), so a long note in the price column cannot squeeze the
   name into one letter per line. */
.choice-card { position: relative; min-height: 118px; display: grid; grid-template-columns: 43px minmax(0, 1fr) fit-content(40%); grid-template-rows: auto auto; align-content: center; align-items: start; column-gap: 12px; row-gap: 3px; padding: 15px; border: 1px solid var(--line-strong); border-radius: 15px; background: #fff; text-align: left; overflow-wrap: break-word; }
.choice-card:hover { border-color: var(--green-3); }
/* The chosen option must stand out at a glance: a dark border, a lime ring outside it and a deeper tint. */
.choice-card.active { border: 2px solid var(--green); padding: 14px; background: var(--mint-2); box-shadow: 0 0 0 3px var(--lime), 0 6px 18px rgb(16 61 45 / .14); }
.choice-card.unavailable { cursor: not-allowed; border-style: dashed; background: var(--surface-soft); }
/* The reason stays at full contrast; only the rest of an unavailable option is faded. */
.choice-card.unavailable > :not(.choice-reason) { color: var(--disabled-ink); filter: grayscale(1); }
.choice-icon { width: 43px; height: 43px; display: grid; grid-row: 1 / 3; grid-column: 1; place-items: center; border-radius: 12px; background: var(--selected); color: var(--green); }
.choice-card strong { grid-row: 1; grid-column: 2; align-self: center; color: var(--green); font-size: .9375rem; line-height: 1.3; }
.choice-card > span:nth-of-type(2) { grid-row: 2; grid-column: 2 / -1; color: var(--muted); font-size: .75rem; }
.choice-kind { display: block; margin-bottom: 2px; color: var(--green-3); font-size: .75rem; font-weight: 900; letter-spacing: .025em; text-transform: uppercase; }
.choice-detail { display: block; margin-top: 2px; color: var(--muted); font-size: .75rem; }
.choice-price { grid-row: 1; grid-column: 3; align-self: center; color: var(--green); font-size: .8125rem; font-weight: 900; line-height: 1.3; text-align: right; }
.choice-card.active .choice-icon { position: relative; background: var(--green); color: #fff; }
/* The chosen option carries a check mark too, so the choice does not rest on colour alone. */
.choice-card.active .choice-icon::after { content: "✓"; position: absolute; right: -7px; bottom: -7px; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--lime); color: var(--green); font-size: 12px; font-weight: 950; line-height: 1; }
.choice-reason { grid-row: 3; grid-column: 2 / -1; display: block; margin-top: 4px; color: var(--danger); font-size: 1rem; font-weight: 700; }
/* A pickup far from the customer's postal code is said in words on the tile itself. */
.choice-note { grid-row: 3; grid-column: 2 / -1; display: block; margin-top: 4px; color: #7a4a00; font-size: 1rem; font-weight: 800; }
/* No delivery chosen yet: the whole group is marked, with the message under it. */
.choice-grid.invalid { outline: 2px solid #8b2530; outline-offset: 4px; border-radius: 15px; }
#deliveryChoicesError { margin: 8px 3px 2px; }
.loading-line { min-height: 46px; display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 9px 12px; border-radius: 11px; background: var(--info-soft); color: var(--info); font-size: .8125rem; font-weight: 800; }
.mini-spinner { width: 19px; height: 19px; flex: 0 0 auto; border: 3px solid #b9d9eb; border-top-color: var(--info); border-radius: 50%; animation: spin .8s linear infinite; }
.pickup-info, .notice-box { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border-radius: 14px; background: var(--mint); color: var(--green); }
.pickup-info svg, .notice-box svg { flex: 0 0 auto; margin-top: 1px; }
.pickup-info strong, .pickup-info span { display: block; }
.pickup-info span { font-size: .8125rem; }
.pickup-point-grid { display: grid; gap: 8px; }
.pickup-more { margin-top: 8px; }
.pickup-point { min-height: 68px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 2px 9px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; text-align: left; }
.pickup-point > span { grid-row: 1 / 3; font-size: 1.375rem; }
.pickup-point strong, .pickup-point small { display: block; grid-column: 2; min-width: 0; }
.pickup-point strong { color: var(--green); font-size: .875rem; }
.pickup-point small { overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.pickup-point.active { grid-template-columns: 34px minmax(0,1fr) auto; border: 2px solid var(--green); padding: 9px 11px; background: var(--mint); }
.pickup-point.active::after { content: "✓ Wybrany"; grid-column: 3; grid-row: 1 / 3; padding: 4px 9px; border-radius: 999px; background: var(--green); color: #fff; font-size: .75rem; font-weight: 800; white-space: nowrap; }
#pickupPointGroup.invalid { padding: 8px; border: 2px solid var(--danger); border-radius: 13px; background: var(--danger-soft); }
#pickupPointGroup .field-error { margin: 7px 3px 2px; }
.empty-inline { margin: 0; padding: 13px; border-radius: 11px; background: var(--warning); color: var(--warning-ink); font-size: 1rem; }
.notice-box { margin: 14px 0; background: var(--info-soft); color: var(--info); font-size: .8125rem; }
.checkbox-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 17px; padding: 12px; border: 1px solid transparent; border-radius: 12px; }
.checkbox-row.invalid { border-color: #e3aab0; background: var(--danger-soft); }
.checkbox-row input { width: 24px; height: 24px; margin: 0; accent-color: var(--green); }
.checkbox-row label { color: #48574e; font-size: 1rem; }
.checkbox-row .field-error { grid-column: 2; margin-top: 0; }
.checkbox-row .field-help { grid-column: 2; margin-top: -4px; }
.checkout-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; }
.checkout-actions .primary-button { margin-left: auto; }
/* The last step is long (documents, seller, legal notes): the order button always stays in view. */
.checkout-actions.review-pay-bar { position: sticky; bottom: 0; z-index: 5; align-items: center; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.review-pay-bar .pay-hint { margin: 0; color: var(--danger); font-size: .8125rem; }
.success-pay { display: grid; gap: 10px; max-width: 520px; margin: 18px auto 6px; padding: 16px; border: 2px solid var(--green); border-radius: 16px; background: var(--mint); text-align: left; }
.success-pay p { margin: 0; font-size: .875rem; }
.success-pay button { width: 100%; }
.success-pay .pay-now { min-height: 52px; font-size: 1.0625rem; }
.payment-note { margin-top: 16px; padding: 15px; border: 1px solid #ead18e; border-radius: 14px; background: var(--warning); color: var(--warning-ink); font-size: .8125rem; }
.review-sections { display: grid; gap: 12px; }
.review-box { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.review-box h3 { margin: 0 0 7px; color: var(--green); font-size: .9375rem; }
.review-box p { margin: 0; color: #526058; font-size: 1rem; }
.review-payment { margin-top: 14px; display: grid; gap: 10px; }
.review-payment .choice-grid, .review-payment .payment-note, .review-payment .required-note { margin: 0; }
.legal-summary { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); }
.legal-summary > h3 { margin: 0 0 12px; color: var(--green); font-size: 1.0625rem; }
.legal-facts { display: grid; gap: 9px; }
.legal-facts > div { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.legal-facts small, .legal-facts strong, .legal-facts span { display: block; }
.legal-facts small { color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.legal-facts strong { margin-top: 2px; color: var(--green); font-size: .875rem; }
.legal-facts span { margin-top: 3px; color: var(--muted); font-size: .75rem; }
.legal-documents { margin-top: 14px; }
.legal-documents h4 { margin: 0 0 7px; color: var(--green); font-size: .875rem; }
.legal-documents ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.legal-documents li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.legal-documents li > a, .legal-documents li > strong { color: var(--green); font-size: .8125rem; font-weight: 900; text-underline-offset: 3px; }
.legal-documents li > small { margin-left: 7px; color: var(--muted); font-size: .75rem; }
.legal-documents li > span { display: block; margin-top: 3px; color: var(--muted); font-size: .75rem; }
.readiness-panel { margin-top: 14px; padding: 14px 15px; border-radius: 13px; }
.readiness-panel strong, .readiness-panel span { display: block; }
.readiness-panel strong { font-size: .9375rem; }
.readiness-panel span { margin-top: 3px; font-size: .8125rem; }
.readiness-panel ul { margin: 6px 0 0; padding-left: 20px; font-size: .8125rem; }
.readiness-panel button { margin-top: 10px; }
.readiness-panel.ready { border: 1px solid #a9d7b6; background: var(--success-soft); color: var(--success); }
.readiness-panel.blocked { border: 1px solid #e3c678; background: var(--warning); color: var(--warning-ink); }
.processing { min-height: 520px; display: grid; place-items: center; padding: 40px; text-align: center; }
.spinner { width: 62px; height: 62px; margin: 0 auto 18px; border: 6px solid var(--mint-2); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.processing h2 { margin: 0; color: var(--green); font-size: 1.75rem; }
.processing p { color: var(--muted); }
.success-view { padding: 52px 30px; text-align: center; }
.success-check { width: 82px; height: 82px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.success-check svg { width: 42px; height: 42px; stroke-width: 2.6; }
.success-view h2 { margin: 0; color: var(--green); font-size: clamp(1.6875rem, calc(4vw * var(--text-zoom, 1)), 2.375rem); }
.success-view > p { max-width: 650px; margin: 8px auto; color: var(--muted); }
.order-number { display: inline-block; margin: 15px 0; padding: 10px 15px; border-radius: 11px; background: var(--green); color: #fff; font-weight: 900; letter-spacing: .03em; }
.success-cards { max-width: 760px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 17px auto; }
.success-cards div { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.success-cards small, .success-cards strong { display: block; }
.success-cards small { color: var(--muted); font-size: .75rem; }
.success-cards strong { margin-top: 4px; color: var(--green); font-size: .875rem; }
.success-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.payment-confirmed { max-width: 620px; margin: 16px auto 0; text-align: left; }
.payment-confirmed strong, .payment-confirmed span { display: block; }
.payment-confirmed span span { margin-top: 2px; color: var(--muted); }
.payment-result { max-width: 620px; margin: 16px auto 0; text-align: left; }
.payment-state { margin: 14px 0; padding: 14px 16px; border: 1px solid transparent; border-radius: 14px; background: var(--info-soft); color: var(--info); }
.payment-state strong, .payment-state span { display: block; }
.payment-state span { margin-top: 4px; font-size: .8125rem; }
.payment-state .payment-deadline { font-weight: 800; }
.payment-state.success { background: var(--success-soft); color: var(--success); }
.payment-state.warning { background: var(--warning); color: var(--warning-ink); }
.payment-state.danger { border-color: #e4b4b8; background: var(--danger-soft); color: var(--danger); }
.payment-state .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.guest-order-key { max-width: 620px; margin: 16px auto 0; text-align: left; }
.guest-order-key > span, .guest-order-key strong { display: block; }
.guest-order-key span span { margin-top: 3px; color: var(--muted); }
.guest-order-key button { margin-top: 10px; }
.payment-simulator-head { background: linear-gradient(135deg, var(--green), var(--green-2)); color: #fff; }
.payment-simulator-head .eyebrow, .payment-simulator-head h2, .payment-simulator-head p { color: #fff; }
.payment-simulator-card { max-width: 650px; margin: 0 auto; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-soft); text-align: center; box-shadow: var(--shadow-soft); }
.simulator-mark { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 13px; border-radius: 20px; background: var(--mint-2); font-size: 36px; }
.payment-simulator-card h3 { margin: 15px 0 5px; color: var(--green); font-size: 1.5rem; }
.payment-simulator-card > p { max-width: 530px; margin: 0 auto; color: var(--muted); font-size: .875rem; }
.simulator-amount { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin: 20px 0; padding: 17px; border-radius: 14px; background: #fff; }
.simulator-amount small { color: var(--muted); }
.simulator-amount strong { color: var(--green); font-size: 1.875rem; }
.simulator-amount span { color: var(--muted); font-size: .8125rem; font-weight: 850; }
.simulator-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }

.account-tabs-row { display: flex; align-items: center; gap: 10px; padding-right: 20px; border-bottom: 1px solid var(--line); }
.tabs { min-width: 0; display: flex; flex-wrap: wrap; flex: 1; gap: 0 7px; padding: 0 0 0 26px; }
.tabs button { min-height: 49px; flex: 0 0 auto; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: .875rem; font-weight: 850; }
.tabs button.active { border-bottom-color: var(--green); color: var(--green); }
.account-logout { min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--danger); font-size: .875rem; font-weight: 850; }
.account-logout:hover { background: var(--danger-soft); }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.auth-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.auth-card h3 { margin: 0 0 6px; color: var(--green); }
.auth-card > p { margin: 0 0 16px; color: var(--muted); font-size: .875rem; }
.auth-card form { display: grid; gap: 12px; }
.auth-card .primary-button { width: 100%; margin-top: 4px; }
.auth-help-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px; }
.auth-help-actions button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--green); font-size: .8125rem; font-weight: 850; }
.auth-help-actions button:hover { border-color: var(--green); background: var(--mint); }
.verification-card { max-width: 650px; margin: 18px auto 0; }
.verification-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.verification-notice { max-width: 650px; margin: 0 auto 12px; }
.verification-notice strong, .verification-notice span { display: block; }
.verification-notice span span { margin-top: 2px; color: var(--muted); }
.token-recognized { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid #a9d7b6; border-radius: 12px; background: var(--success-soft); color: var(--success); }
.token-recognized > span:first-child { width: 27px; height: 27px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--success); color: #fff; font-weight: 950; }
.token-recognized strong, .token-recognized small { display: block; }
.token-recognized small { margin-top: 2px; color: var(--muted); }
.magic-confirm { margin-top: 16px; text-align: center; }
.magic-confirm p { color: var(--muted); font-size: .875rem; }
.magic-confirm .primary-button { width: 100%; }
.account-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-radius: 15px; background: var(--mint); }
.account-header strong, .account-header span { display: block; }
.account-header strong { color: var(--green); font-size: 1.1875rem; }
.account-header span { color: var(--muted); font-size: .8125rem; }
.orders-list { display: grid; gap: 10px; }
.order-card { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.order-card-head { display: flex; justify-content: space-between; gap: 12px; }
.order-card strong { color: var(--green); }
.order-card small { color: var(--muted); }
.order-card-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.status-pill { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; background: var(--warning); color: var(--warning-ink); font-size: .75rem; font-weight: 850; }
.status-pill.success { background: var(--success-soft); color: var(--success); }
.status-pill.danger { background: var(--danger-soft); color: var(--danger); }
.status-timeline { position: relative; display: grid; gap: 0; margin-top: 17px; }
.timeline-row { position: relative; display: grid; grid-template-columns: 31px 1fr; gap: 10px; min-height: 63px; }
.timeline-row::before { content: ""; position: absolute; left: 14px; top: 26px; bottom: -2px; width: 2px; background: var(--line); }
.timeline-row:last-child::before { display: none; }
.timeline-dot { width: 29px; height: 29px; display: grid; place-items: center; z-index: 1; border: 2px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--muted); font-size: .75rem; font-weight: 900; }
.timeline-row.done .timeline-dot { border-color: var(--green); background: var(--green); color: #fff; }
.timeline-copy strong, .timeline-copy small { display: block; }
.timeline-copy strong { color: var(--ink); font-size: .875rem; }
.timeline-copy small { color: var(--muted); font-size: .75rem; }
.error-panel { padding: 16px; border: 1px solid #e4b4b8; border-radius: 14px; background: var(--danger-soft); color: var(--danger); }
.error-panel strong, .error-panel span { display: block; }
.error-panel span { margin-top: 4px; font-size: 1rem; }
.error-panel button { margin-top: 12px; }
.error-panel .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.promotion-summary { margin-top: 13px; padding: 10px 12px; border-radius: 11px; background: var(--success-soft); color: var(--success); font-size: .75rem; }
.promotion-summary ul { margin: 4px 0 0; padding-left: 18px; }
.tax-summary { margin-top: 12px; overflow-x: auto; border-top: 1px solid var(--line); }
.tax-summary summary { min-height: 44px; display: flex; align-items: center; color: var(--green); font-size: .8125rem; font-weight: 900; cursor: pointer; }
.tax-table { min-width: 360px; display: grid; gap: 4px; padding-bottom: 7px; }
.tax-table > div { display: grid; grid-template-columns: .6fr repeat(3, 1fr); gap: 7px; font-size: .75rem; text-align: right; }
.tax-table > div > :first-child { text-align: left; }
.tax-table b { color: var(--muted); }
.summary-meta { margin: 10px 0 0; color: var(--muted); font-size: .75rem; }
.summary-meta strong { color: var(--ink); }

.return-section { display: grid; gap: 13px; }
.return-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.return-section-head h3 { margin-bottom: 3px; }
.return-section-head p, .return-empty { margin: 0; color: var(--muted); font-size: 1rem; }
.return-section-head .secondary-button { flex: 0 0 auto; }
.return-list .order-card-head { align-items: center; }
.return-lines { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }
.return-lines legend { margin-bottom: 9px; color: var(--green); font-size: .9375rem; font-weight: 900; }
.return-line { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.return-line > input { width: 24px; height: 24px; accent-color: var(--green); }
.return-line strong, .return-line small { display: block; }
.return-line strong { color: var(--ink); }
.return-line small { margin-top: 2px; color: var(--muted); }
.return-quantity { display: grid; grid-template-columns: auto 72px; align-items: center; gap: 7px; color: var(--muted); font-size: .75rem; }
.return-quantity input { width: 76px; min-height: 48px; padding: 7px; border: 1px solid var(--line-strong); border-radius: 10px; text-align: center; }
.return-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-bottom: 14px; }
.return-summary-grid > div { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.return-summary-grid small, .return-summary-grid strong { display: block; }
.return-summary-grid small { color: var(--muted); font-size: .75rem; }
.return-summary-grid strong { margin-top: 3px; color: var(--green); font-size: .9375rem; }

.toast-stack { position: fixed; right: 18px; bottom: 20px; z-index: var(--layer-toast); display: grid; gap: 9px; pointer-events: none; }
/* A message only: taps pass through it, so it never blocks the "Dodaj" button it happens to cover. */
.toast { width: min(390px, calc(100vw - 36px)); display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--green) 16%, transparent); border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 16px 38px rgba(8,31,22,.2); animation: toast-in .2s ease both; pointer-events: none; }
.toast::before { content: "✓"; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: .8125rem; font-weight: 1000; }
.toast.error::before { content: "!"; background: var(--danger-soft); color: var(--danger); }
.toast.warning::before { content: "i"; background: var(--warning); color: var(--warning-ink); }
.toast strong, .toast span { display: block; }
.toast strong { font-size: .875rem; }
.toast span { color: var(--muted); font-size: .75rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.noscript { padding: 18px; background: var(--danger-soft); color: var(--danger); font-weight: 800; text-align: center; }

@media (max-width: 1260px) {
  .header-row { grid-template-columns: 175px minmax(390px, 1fr) auto; gap: 14px; }
  .brand-copy small { display: none; }
  .main-nav { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
  .icon-button span { display: none; }
  .shop-layout { grid-template-columns: minmax(0,1fr) 350px; gap: 18px; }
  .audience-list { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 960px) {
  .shell { width: min(100% - 28px, 760px); }
  .header-row { min-height: 70px; grid-template-columns: 1fr auto; }
  .brand-mark { width: 42px; height: 42px; }
  .brand-copy small { display: block; }
  .main-nav { display: none; }
  .header-actions .cart-button, .cart-peek { display: none; }
  .icon-button { width: 45px; min-height: 45px; padding: 0; }
  main { padding-top: 15px; }
  .shop-layout { display: block; }
  .site-footer { padding-bottom: 115px; }
  /* The categories are behind "☰ Kategorie" in the header: the product starts at the top. */
  body.is-product-view .filter-panel { display: none; }
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary { min-height: 0; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 680px) {
  /* One message at a time on a phone (a stack of three covered the question being answered);
     an error stays until it times out, so a later "Gotowe" cannot hide it. */
  .toast-stack > .toast:not(:last-child):not(.error) { display: none; }
  .shell { width: calc(100% - 20px); }
  .brand-copy strong { font-size: 1.1875rem; }
  .brand-copy small { font-size: .75rem; }
  .brand-logo { max-width: 150px; height: 42px; }
  .mode-banner { grid-template-columns: auto 1fr; }
  .mode-banner button { grid-column: 1 / -1; }
  .filter-panel, .catalog-panel { padding: 16px; border-radius: 20px; }
  .section-heading h1, .section-heading h2 { font-size: 1.3125rem; }
  .audience-list { display: flex; flex-wrap: wrap; margin-inline: -2px; padding: 2px; }
  .audience-chip { min-height: 44px; flex: 0 1 auto; }
  .catalog-head { grid-template-columns: 1fr; gap: 14px; }
  .search-box { min-height: 50px; }
  .results-toolbar { align-items: flex-end; }
  .results-toolbar > label { flex-direction: column; align-items: flex-end; gap: 3px; }
  .results-toolbar > label > select { max-width: 172px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { display: grid; grid-template-columns: 122px minmax(0,1fr); min-height: 0; }
  .product-visual { align-self: start; }
  .product-emoji { font-size: 49px; }
  .stock-badge { top: 7px; right: 7px; padding: 4px 6px; }
  .photo-labels { top: 7px; left: 7px; max-width: calc(100% - 14px); }
  .photo-tag { padding: 1px 5px; letter-spacing: .03em; }
  .product-content { padding: 12px; }
  .product-tags { margin: 0 0 6px; }
  .product-name-button { font-size: .9375rem; }
  .product-buy { grid-template-columns: 1fr; align-items: stretch; }
  .add-button, .inline-qty { width: 100%; }
  .inline-qty { grid-template-columns: 1fr 34px 1fr; }
  .inline-qty button { width: auto; }
  .site-footer { padding-top: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 18px; }
  .catalog-break { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 14px 16px; }
  .catalog-break-brand { grid-column: 1 / -1; margin-bottom: 4px; }
  .catalog-break > div { gap: 0; }
  .catalog-break-title { display: none; }
  dialog { width: 100%; max-height: 96dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .dialog-shell { max-height: 96dvh; }
  .dialog-header { padding: 22px 67px 16px 18px; }
  .dialog-body { padding: 18px; }
  /* Phone: one column. Price, quantity and "Dodaj do koszyka" come right under the photo, before
     the description, so the customer never has to look for them at the end of a long text. */
  .product-page { padding: 14px 16px 22px; }
  .product-page-bar { gap: 6px 12px; margin-bottom: 14px; }
  /* The product name is the heading right below: the path ends at its category. */
  .product-crumbs [aria-current] { display: none; }
  .product-hero { grid-template-columns: 1fr; gap: 14px; }
  .product-gallery-main { aspect-ratio: auto; height: clamp(190px, 52vw, 290px); padding: 12px; border-radius: 18px; }
  .product-thumbs button { width: 56px; height: 56px; }
  .product-summary h1 { font-size: 1.5625rem; }
  .product-buy-box { margin-top: 14px; padding: 16px; }
  .product-section { margin-top: 24px; padding-top: 20px; }
  .product-section > h2 { font-size: 1.25rem; }
  .product-description { font-size: 1rem; }
  .product-spec div { grid-template-columns: 1fr; gap: 2px; }
  .checkout-main, .checkout-summary { padding: 18px; }
  .checkout-main h2 { font-size: 1.4375rem; }
  .choice-grid, .form-grid, .auth-grid { grid-template-columns: 1fr; }
  /* On a phone (worst with the largest text) the price column left the name a few letters wide
     ("Pacz / kom / at"): the price moves under the name and the name gets the whole width. */
  .choice-card { grid-template-columns: 43px minmax(0, 1fr); }
  .choice-card strong { grid-column: 2; }
  .choice-price { grid-row: 2; grid-column: 2; text-align: left; }
  .choice-card > span:nth-of-type(2) { grid-row: 3; grid-column: 2; }
  .choice-reason, .choice-note { grid-row: 4; grid-column: 2; }
  .choice-icon { grid-row: 1 / 4; }
  .checkout-actions { flex-direction: column-reverse; }
  .checkout-actions button { width: 100%; }
  .review-pay-bar { gap: 8px; }
  .review-pay-bar .pay-hint { order: 3; }
  .success-view { padding: 42px 18px; }
  .success-cards { grid-template-columns: 1fr; }
  .tabs { padding-inline: 16px; }
  .return-section-head { align-items: stretch; flex-direction: column; }
  .return-line { grid-template-columns: auto minmax(0,1fr); }
  .return-quantity { grid-column: 2; justify-content: start; }
  .return-summary-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 410px) {
  .brand-copy small { display: none; }
  .header-actions { gap: 5px; }
  .product-card { grid-template-columns: 105px minmax(0,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cart-panel { transition: none; }
}

@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; box-shadow: none; }
  .nav-item.active, .audience-chip.active, .comfort-category-parent[aria-pressed="true"], .comfort-subcategory[aria-pressed="true"], .choice-card.active, .pickup-point.active, .cart-button, .primary-button { border: 2px solid ButtonText; }
  .field input.invalid, .field select.invalid, .checkbox-row.invalid { border: 3px solid Mark; }
  .readiness-panel { border: 2px solid CanvasText; }
}

@media print {
  .site-header, .cart-peek, .mode-banner, .catalog-column, .cart-panel, .dialog-close, .success-actions, .success-pay, .site-footer, .cookie-banner, .cookie-dialog, .category-drawer { display: none !important; }
  .cart-panel:has(.success-view) { display: block !important; }
  .cart-panel:has(.success-view) > :not(.checkout-content) { display: none !important; }
  body { background: #fff; }
  dialog[open] { position: static; display: block; width: 100%; max-height: none; box-shadow: none; }
  dialog::backdrop { display: none; }
  .dialog-shell { max-height: none; overflow: visible; }
}

/* One-page storefront, September 2026. The cart is a normal full-width region.
   October 2026: it is a view of its own (header button, ?koszyk), shown instead of the catalogue,
   so the endless product list can never push it out of reach. */
body:is(.is-cart-view, .is-product-view) .design-hero { display: none; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.catalog-column { width: 100%; }
.cart-panel { position: static; display: block; width: 100%; max-height: none; border-radius: var(--radius-xl); transform: none; overflow: hidden; box-shadow: var(--shadow); scroll-margin-top: 105px; }
.cart-body { max-height: none; overflow: visible; padding: 16px 26px 18px; }
.empty-cart { grid-column: 1 / -1; min-height: 180px; }
.cart-foot { display: grid; gap: 12px; padding: 20px 26px 22px; }
.checkout-content { scroll-margin-top: 110px; border-top: 1px solid var(--line); }
.checkout-content .checkout-grid { grid-template-columns: minmax(0, 1fr) 340px; }
.checkout-content .checkout-main { padding: 30px; min-width: 0; }
.checkout-content .checkout-summary { position: sticky; top: 100px; min-height: 0; border-radius: 0; }
.checkout-content .contact-grid { grid-template-columns: 1fr 1fr; }
.checkout-content .contact-grid .full { grid-column: auto; }
.checkout-content .field input, .checkout-content .field select { min-height: 48px; width: 100%; font-size: 1rem; }
.checkout-content .field select { padding: 12px; border: 1px solid var(--line-strong); background: white; border-radius: 12px; color: var(--ink); }
.checkout-content .field select:disabled { background: var(--surface-soft); }
.check-option { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; cursor: pointer; padding: 12px 0; font-weight: 600; }
.check-option input { width: 22px; height: 22px; min-width: 22px; margin: 2px 0 0; accent-color: var(--green); }
.check-option small { display: block; margin-top: 5px; font-size: .8125rem; font-weight: 400; line-height: 1.6; color: var(--muted); }
.nip-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.nip-row .field { flex: 1; min-width: 170px; }
.nip-row button { min-height: 48px; margin-bottom: 4px; }
.invoice-buyer { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 4px 0 12px; padding: 0; border: 0; }
.invoice-buyer legend { width: 100%; margin-bottom: 4px; padding: 0; font-weight: 700; }
.invoice-fields { margin-top: 14px; }
.postal-lookup { max-width: 320px; margin: 18px 0 26px; }
.text-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--green); font: inherit; font-weight: 850; line-height: 1.35; text-decoration: none; cursor: pointer; }
.text-button:hover { border-color: var(--green); background: var(--mint); }
.text-button:focus-visible { border-color: var(--green); box-shadow: var(--focus); outline: 0; }
.text-button:disabled { color: var(--disabled-ink); cursor: not-allowed; }
.text-button[data-privacy="forget"] { border-color: #e5b8bb; background: var(--danger-soft); color: var(--danger); }
.field-hint, .assistance-status { font-size: 1rem; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.tax-summary > summary,
.checkout-extras > summary,
.legal-details > summary,
.summary-coupon > summary,
.store-information details > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: #fff;
  color: var(--green);
  font-size: .8125rem;
  font-weight: 900;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--green) 5%, transparent);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tax-summary > summary::-webkit-details-marker,
.checkout-extras > summary::-webkit-details-marker,
.legal-details > summary::-webkit-details-marker,
.summary-coupon > summary::-webkit-details-marker,
.store-information details > summary::-webkit-details-marker { display: none; }
.tax-summary > summary::after,
.checkout-extras > summary::after,
.legal-details > summary::after,
.summary-coupon > summary::after,
.store-information details > summary::after {
  content: "›";
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 1.375rem;
  line-height: 1;
  transition: transform .2s ease;
}
.tax-summary[open] > summary::after,
.checkout-extras[open] > summary::after,
.legal-details[open] > summary::after,
.summary-coupon[open] > summary::after,
.store-information details[open] > summary::after { transform: rotate(90deg); }
.tax-summary > summary:hover,
.checkout-extras > summary:hover,
.legal-details > summary:hover,
.summary-coupon > summary:hover,
.store-information details > summary:hover { border-color: var(--green); background: var(--mint); }
.tax-summary > summary:focus-visible,
.checkout-extras > summary:focus-visible,
.legal-details > summary:focus-visible,
.summary-coupon > summary:focus-visible,
.store-information details > summary:focus-visible { border-color: var(--green); box-shadow: var(--focus); outline: 0; }
.assistance-status:empty { display: none; }
.address-verification:empty { display: none; }
.address-verification[data-state="verified"] { color: var(--green-3); font-weight: 600; }
.address-verification[data-state="unknown"] { color: var(--warning-ink); }
.address-no-street { grid-column: 1 / -1; }
.address-no-street .check-option { padding: 4px 0; min-height: 0; }
.address-no-street--suggested { padding: 8px 14px; border: 2px solid var(--green-3); border-radius: 11px; background: var(--mint); }
.address-tools { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; font-size: .8125rem; }
.address-suggestions { display: grid; gap: 7px; margin-top: 8px; }
.address-suggestion { min-height: 50px; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; text-align: left; }
.address-suggestion:hover,.address-suggestion:focus-visible { border-color: var(--green-3); background: var(--mint); }
.address-suggestion strong { color: var(--green); }
.address-suggestion small { color: var(--muted); }
.remember-choice { border-radius: 14px; background: var(--mint); padding: 15px; }
.store-information { padding: 30px; }
.store-information details { padding: 14px 0; border-top: 1px solid var(--line); }
.legal-document { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 20px; font-size: 1rem; }

.cookie-banner { position: fixed; z-index: var(--layer-cookie); left: 20px; right: 20px; bottom: 20px; margin: auto; max-width: 960px; padding: 22px 26px; border: 1px solid var(--line-strong); border-radius: 20px; background: white; box-shadow: var(--shadow-strong); }
.cookie-banner h2 { margin: 0 0 6px; color: var(--green); font-size: 1.1875rem; }
.cookie-banner p { margin: 5px 0 12px; font-size: 1rem; line-height: 1.55; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cookie-actions .secondary-button { flex: 1; justify-content: center; min-height: 46px; border: 1px solid var(--green); color: var(--green); background: white; font-size: .875rem; font-weight: 650; }
.cookie-actions .text-button { min-width: 100px; text-align: center; }
.cookie-dialog { max-width: 760px; width: calc(100% - 30px); max-height: 90svh; overflow-y: auto; padding: 0; border: 0; border-radius: 22px; color: var(--ink); }
.privacy-dialog-content { padding: 30px; }
.privacy-dialog-content p, .cookie-list { font-size: 1rem; line-height: 1.65; }
.privacy-close { float: right; margin-left: 15px; }
.cookie-list dt { font-weight: 700; margin-top: 14px; }
.cookie-list dd { margin: 3px 0 0; color: var(--muted); }
.cookie-status { color: var(--green); font-size: 1rem; }
.cookie-list-title { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 1rem; }
/* Room at the end of the page while the cookie banner covers the bottom of the window (privacy.js). */
body::after { content: ""; display: block; height: var(--cookie-banner-space, 0px); }
.cookie-status:empty { display: none; }
/* Catalog error, delivery price pending, review step legal information (2026-09-29). */
.catalog-error { grid-column: 1 / -1; }
.price-pending { color: var(--muted); font-size: .8125rem; font-weight: 700; }
.review-item-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.review-item-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: baseline; padding-top: 6px; border-top: 1px solid var(--line); color: #48574e; }
.review-item-list li:first-child { padding-top: 0; border-top: 0; }
.review-item-list strong { color: var(--green); }
.legal-summary p { margin: 6px 0 0; color: #48574e; font-size: 1rem; line-height: 1.6; }
.legal-summary p:first-of-type { margin-top: 0; }
.legal-summary .error-panel { margin-bottom: 10px; }
.legal-document-link { min-height: 44px; display: inline-flex; align-items: center; padding: 4px 0; border: 0; background: transparent; color: var(--green); font-size: .8125rem; font-weight: 900; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.legal-documents li > .legal-document-link + small { margin-left: 7px; color: var(--muted); font-size: .75rem; }
.legal-acceptance { margin-top: 12px; border-color: var(--line-strong); background: #fff; }
.legal-acceptance label { color: var(--ink); font-size: 1rem; font-weight: 700; }
.legal-acceptance-note { font-weight: 700; }
.store-information .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.accessibility-information ul { margin: 6px 0 14px; padding-left: 20px; line-height: 1.6; }
.accessibility-information h3 { margin: 18px 0 4px; color: var(--green); }
.accessibility-information a { color: var(--green); font-weight: 800; }

[hidden] { display: none !important; }

@media (max-width: 960px) {
  .cart-panel { border-radius: 22px; }
  .checkout-content .checkout-grid { grid-template-columns: 1fr; }
  .checkout-content .checkout-summary { position: static; border-left: 0; border-top: 1px solid var(--line); }
  .cart-body { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cart-foot { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
  .cart-foot .coupon-box, .cart-foot .checkout-button { width: 100%; }
  .cart-body { padding: 12px 16px; }
  .cart-item { grid-template-columns: 48px minmax(0, 1fr); }
  .cart-item .cart-thumb { width: 48px; height: 48px; }
  .cart-item-price { grid-column: 2; justify-self: start; padding-top: 0; }
  .checkout-content .checkout-main { padding: 20px 16px; }
  .checkout-content .contact-grid { grid-template-columns: 1fr; }
  .postal-lookup { max-width: none; }
  .nip-row { flex-direction: column; align-items: stretch; }
  .cookie-banner { left: 9px; right: 9px; bottom: 9px; max-height: 65svh; overflow: auto; padding: 18px; border-radius: 17px; }
  .cookie-actions .secondary-button { flex-basis: 100%; }
  .cookie-actions .text-button { flex: 1; }
  .privacy-dialog-content, .store-information { padding: 21px; }
}


/* One order page: delivery, contact, folded extras, then payment and the order button. */
.checkout-extras[open] > summary { margin-bottom: 14px; }
.checkout-extras > .field, .checkout-extras > .check-option, .checkout-extras > .field-hint { margin-top: 12px; }
.checkout-final { display: grid; gap: 14px; margin-top: 24px; }
.checkout-final .legal-acceptance { margin-top: 0; }
.legal-details[open] > summary { margin-bottom: 4px; }
.legal-details > .legal-summary { margin-top: 10px; }
.review-payment .payment-note { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--muted); }
.final-summary { display: none; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); font-size: .875rem; }
.final-summary ul { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.final-summary li, .final-summary p { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
/* Amounts never break in two ("96,3" / "2 zł" on a narrow phone). */
.final-summary strong, .summary-lines strong, .cart-item-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.final-summary small { color: var(--muted); }
.final-summary p { color: var(--muted); }
.final-summary .total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 900; }
.summary-coupon { width: 100%; margin: 12px 0; }
.summary-coupon[open] > summary { margin-bottom: 10px; }
.summary-coupon > label { display: block; margin-bottom: 7px; }
.summary-qty { width: max-content; margin-top: 6px; grid-template-columns: 44px 56px 44px; color: #fff; }
.summary-qty button, .summary-qty b { width: 44px; height: 44px; color: #fff; }
.summary-qty b { width: auto; height: auto; }
.cart-peek-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.cart-peek-actions button { min-height: 44px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 11px; background: transparent; color: #fff; font: inherit; font-size: .875rem; font-weight: 900; cursor: pointer; }
.cart-peek-actions .cart-peek-checkout { border-color: var(--lime); background: var(--lime); color: var(--green-dark); }
.cart-peek-actions button:focus-visible { box-shadow: var(--focus); outline: 0; }
.toast:has(.toast-action) { grid-template-columns: auto 1fr auto; align-items: center; pointer-events: auto; }
.toast-action { min-height: 44px; padding: 0 16px; border: 0; border-radius: 11px; background: var(--green); color: #fff; font: inherit; font-size: .875rem; font-weight: 900; cursor: pointer; }
.toast-action:focus-visible { box-shadow: var(--focus); outline: 0; }
@media (max-width: 960px) {
  .final-summary { display: block; }
  /* On a narrow screen the order summary with the coupon field comes before the form, so the
     customer enters a code before "Zamawiam i płacę" rather than finding the field under it. */
  .checkout-content .checkout-grid > .checkout-summary { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
}

/* ---- Search suggestions, animal tiles, filters, "Pokaż więcej", reviews ---- */
.header-search { position: relative; }
.search-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; display: grid; gap: 2px; max-height: min(70vh, 420px); margin: 0; padding: 6px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; box-shadow: var(--shadow-strong); list-style: none; }
.search-suggestion { min-height: 44px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; color: var(--ink); cursor: pointer; }
.search-suggestion:hover, .search-suggestion.is-active { background: var(--selected); outline: 2px solid var(--selected-line); }
.search-suggestion-icon { font-size: 1.125rem; text-align: center; }
.search-suggestion-text { display: grid; min-width: 0; }
.search-suggestion-text strong { overflow: hidden; color: var(--green); font-size: .9375rem; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion-text small { overflow: hidden; color: var(--muted); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
/* „Kupuj według zwierzęcia”: niskie pigułki (ikona obok nazwy) nad listą. Nigdy nie przewijają się
   w bok — zawijają się, a zwinięte zajmują jeden wiersz na niskim ekranie i dwa na wyższym; ostatnie
   miejsce zajmuje wtedy „Więcej (n)” (app.js, fitChipRows), więc produkty są na pierwszym ekranie.
   Liczba produktów zostaje w danych. */
.animal-tiles { margin: 0 0 14px; }
.animal-tiles-title { margin: 0 0 8px; color: var(--green); font-size: 1rem; }
.animal-tiles-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 2px; list-style: none; }
.animal-tiles-list > li, .category-chips-list > li { max-width: 100%; }
.animal-tile { max-width: 100%; min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 15px 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--green); font: inherit; font-weight: 850; text-align: left; cursor: pointer; }
.animal-tile:hover { border-color: var(--tint-line); background: var(--tint); }
.animal-tile:focus-visible { box-shadow: var(--focus); outline: 0; }
.animal-tile-icon { flex: none; font-size: 1.375rem; line-height: 1; }
.animal-tile-name { font-size: .9375rem; line-height: 1.2; }
.animal-tile small { display: none; }
/* „Więcej (n)” / „Mniej” na końcu zwiniętego rzędu pigułek. */
.chip-more[hidden] { display: none; }
.chip-more-button { min-height: 44px; padding: 5px 15px; border: 1px dashed var(--line-strong); border-radius: 999px; background: transparent; color: var(--green); font: inherit; font-size: .9375rem; font-weight: 850; white-space: nowrap; cursor: pointer; }
.chip-more-button:hover { border-style: solid; background: var(--tint); }
.chip-more-button:focus-visible { box-shadow: var(--focus); outline: 0; }
.catalog-filters { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.catalog-filters > summary { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--green); font-weight: 900; cursor: pointer; }
.catalog-filters > summary:focus-visible { border-radius: 14px; box-shadow: var(--focus); outline: 0; }
.catalog-filter-count { padding: 2px 9px; border-radius: 999px; background: var(--green); color: #fff; font-size: .75rem; }
.catalog-filter-body { padding: 0 14px 14px; }
.catalog-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.catalog-filter { display: grid; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; }
.catalog-filter > label, .catalog-filter > legend { padding: 0; color: #435249; font-size: .875rem; font-weight: 800; }
.catalog-filter select, .catalog-filter input[type="number"] { min-height: 46px; width: 100%; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 11px; background: #fff; color: var(--ink); font: inherit; font-size: .875rem; }
.catalog-filter-price { grid-template-columns: 1fr auto 1fr; align-items: center; }
.catalog-filter-price > legend { grid-column: 1 / -1; margin-bottom: 5px; }
.catalog-filter.checkbox-row { min-height: 46px; align-self: end; }
.catalog-filter-note { margin: 12px 0 0; color: var(--muted); font-size: 1rem; }
.catalog-filter-clear { margin-top: 12px; }
.catalog-filters .link-button, .product-reviews .link-button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--green); font: inherit; font-weight: 850; text-decoration: underline; cursor: pointer; }
.catalog-more { display: grid; justify-items: center; gap: 10px; margin-top: 22px; text-align: center; }
.catalog-more p { margin: 0; color: var(--muted); font-size: 1rem; font-weight: 700; }
.catalog-more p:focus { outline: 0; }
.order-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.order-reorder-result { display: grid; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--info-soft); color: var(--ink); font-size: .875rem; }
.order-reorder-result.is-empty { background: var(--warning); color: var(--warning-ink); }
.order-reorder-result p { margin: 0; }
.product-reviews-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 0 0 14px; color: var(--muted); }
.product-reviews-score strong { color: var(--green); font-size: 1.25rem; }
.product-reviews-status, .product-reviews-empty { margin: 0 0 12px; color: var(--muted); }
.review-list { display: grid; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; }
.review { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; color: var(--muted); font-size: .8125rem; }
.review-stars { color: var(--warning-strong); font-size: 1rem; letter-spacing: 1px; }
.review-verified { padding: 2px 8px; border-radius: 999px; background: var(--success-soft); color: var(--success); font-weight: 800; }
.review-title { margin: 0 0 4px; color: var(--ink); font-size: 1rem; }
.review-body { margin: 0; overflow-wrap: anywhere; }
.product-reviews-notice { margin: 14px 0; padding: 10px 12px; border-radius: 12px; background: var(--info-soft); color: #33495a; font-size: .8125rem; }
.review-form { display: grid; gap: 12px; max-width: 640px; }
.review-form h3 { margin: 0; color: var(--green); }
.review-rating { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.review-rating legend { width: 100%; margin-bottom: 5px; padding: 0; color: #435249; font-size: .875rem; font-weight: 800; }
.review-star-choice { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 11px; background: #fff; cursor: pointer; }
.review-star-choice:has(input:checked) { border-color: var(--green); background: var(--selected); }
.review-error { margin: 0; color: #8b2530; font-weight: 800; }
.review-sent, .review-login { margin: 0; }
@media (max-width: 680px) {
  .animal-tiles-list { margin-inline: -2px; }
  .catalog-filter-grid { grid-template-columns: 1fr; }
}

/* Okruszki nad listą produktów: te same co na stronie produktu (.product-crumbs). */
.catalog-crumbs { grid-column: 1 / -1; min-height: 36px; }
html[data-comfort] .catalog-crumbs { margin-bottom: 6px; }

/* Strona startowa (app.js, renderStoreIntro): jedna linia o tym, co sprzedajemy i dla kogo, obok
   obietnice tylko z danych sklepu, pod nią kafle zwierząt i od razu lista produktów. Okruszki
   („Sklep › Hodowlane”) i nagłówek „Produkty” nic tu nie mówią, więc zostają tylko dla czytników. */
.store-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 0 0 14px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--mint); }
.store-intro h2 { flex: 1 1 24rem; margin: 0; color: var(--green); font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em; }
.store-promises { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.store-promises li { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 1rem; font-weight: 800; white-space: nowrap; }
.store-promises li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: .75rem; font-weight: 900; }
body[data-start-view="true"] .catalog-panel .catalog-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Filtry jako przycisk na końcu paska z liczbą produktów i sortowaniem; otwarte zajmują całą szerokość
   pod paskiem. */
.results-toolbar { flex-wrap: wrap; row-gap: 10px; }
.results-toolbar > p { flex: 1 1 12rem; }
.results-toolbar > .catalog-filters { margin: 0; }
.results-toolbar > .catalog-filters:not([open]) > summary { min-height: 44px; }
.results-toolbar > .catalog-filters[open] { flex: 1 1 100%; }

@media (max-width: 960px) {
  /* Na telefonie i tablecie kategorie są pod „☰ Kategorie” w nagłówku; strona startowa zaczyna się
     od produktów, jak strona produktu. W dziale panel kategorii wraca nad listę. */
  body[data-start-view="true"]:not(.is-cart-view) .filter-panel { display: none; }
}
/* Podkategorie otwartego działu jako rząd przycisków nad listą — tylko na telefonie (app.js,
   renderCategoryChips); na większym ekranie te same przyciski są w panelu kategorii. */
.category-chips { display: none; }
.category-chips-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 2px; list-style: none; }
.category-chips-list .type-chip { width: auto; max-width: 100%; min-height: 44px; text-align: left; }

@media (max-width: 680px) {
  /* Kategorie są pod „☰ Kategorie” w nagłówku (pełne drzewo z liczbami); nad listą zostają okruszki
     i podkategorie otwartego działu, więc pierwsze produkty są na pierwszym ekranie. */
  .filter-panel { display: none; }
  .category-chips:not([hidden]) { display: block; margin: 0 -2px 12px; }
  .store-intro { gap: 8px; padding: 12px 14px; }
  .store-intro h2 { flex-basis: 100%; font-size: 1.0625rem; }
  .store-promises { gap: 4px 14px; }
  .store-promises li { align-items: flex-start; white-space: normal; }
  .store-promises li::before { flex: none; }
  /* Liczba produktów jest też nad listą, w pasku z sortowaniem. */
  .store-promises li[data-promise="catalog"] { display: none; }
  .mode-banner { gap: 6px 10px; padding: 10px 12px; }
}

/* Porównanie 2–3 produktów: pole na karcie, pasek pod listą i tabela w oknie. */
.compare-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; color: var(--ink); font-size: 1rem; font-weight: 700; cursor: pointer; }
.compare-toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--green); }
.compare-bar { position: sticky; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding: 12px 16px; border: 2px solid var(--green); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-strong); }
.compare-bar p { flex: 1 1 14rem; margin: 0; color: var(--ink); font-size: 1rem; }
.compare-view { padding: 24px; }
.compare-scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.compare-table th, .compare-table td { min-width: 9rem; padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table thead th a { color: var(--green); font-weight: 800; }
.compare-table tbody th { color: var(--muted); font-weight: 700; }
.compare-table .compare-heading th { padding-top: 22px; color: var(--ink); font-size: 1.125rem; font-weight: 800; }
.compare-table .compare-category th { padding-top: 14px; color: var(--green); font-weight: 800; }
.compare-table .compare-notice td { color: var(--muted); font-style: italic; }
.compare-table .compare-parameter.is-absent, .compare-table .compare-parameter.is-unknown { color: var(--muted); }
.compare-original { display: block; margin-top: 2px; color: var(--muted); font-size: .875rem; }
@media (max-width: 680px) {
  /* Nad dolnym paskiem trybu komfortowego (comfort.css). */
  .compare-bar { bottom: calc(max(.5rem, env(safe-area-inset-bottom)) + 76px); }
  .compare-view { padding: 16px; }
}

/* Strony sklepu w miejscu strony produktu: Kontakt i „Nie znaleźliśmy tej strony”. */
.store-page { padding: 6px 4px; }
.store-page h1 { margin: 0 0 8px; color: var(--green); font-size: 1.625rem; }
.store-page-status { color: var(--muted); }
.contact-page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 16px; margin: 18px 0; }
.contact-page-grid section { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.contact-page-grid h2 { margin: 0 0 8px; color: var(--green); font-size: 1.125rem; }
.contact-page-grid p, .contact-page-grid ul { margin: 0 0 6px; padding: 0; list-style: none; }
.contact-page-grid p span { display: block; }
.contact-page-grid a { color: var(--green); font-weight: 800; }
.contact-page .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.store-page-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.store-page-links a { display: inline-flex; align-items: center; text-decoration: none; }

/* Konto: zapisane adresy. */
.address-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.address-card { display: grid; gap: 2px; }
.address-card small { color: var(--muted); font-size: 1rem; }

/* Telefon przy przycisku zamówienia (comfort.js). */
.comfort-order-contact { margin: 10px 0 0; color: var(--ink); font-size: 1rem; }
.comfort-order-contact a { color: var(--green); font-weight: 800; }

/* „Jak weryfikujemy opinie” (?strona=opinie). */
.reviews-policy-summary { margin: 14px 0; padding: 12px 14px; border-radius: 12px; background: var(--info-soft); color: var(--ink); font-size: 1rem; }
.reviews-policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 16px; margin: 18px 0; }
.reviews-policy-grid section { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.reviews-policy-grid h2 { margin: 0 0 8px; color: var(--green); font-size: 1.125rem; }
.reviews-policy-grid p { margin: 0 0 6px; color: var(--ink); font-size: 1rem; }
.reviews-policy-page .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.product-reviews-notice a { color: var(--green); font-weight: 800; }

/* „Zwrot towaru” (?strona=zwroty): warunki, gdzie jest numer paragonu i formularz zgłoszenia. */
.returns-page { max-width: 54rem; }
.return-notice-alert { display: grid; gap: 4px; margin: 14px 0; padding: 14px 16px; border: 2px solid var(--danger); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--ink); font-size: 1rem; }
.return-notice-alert > strong { color: var(--danger); font-size: 1.0625rem; }
.return-rules { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.return-rules h2 { margin: 0 0 8px; color: var(--green); font-size: 1.125rem; }
.return-rules ul { display: grid; gap: 8px; margin: 0; padding-left: 1.2rem; color: var(--ink); font-size: 1rem; }
.receipt-guide { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 22px; margin: 18px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--info-soft); }
.receipt-guide figcaption { flex: 1 1 14rem; color: var(--ink); font-size: 1rem; }
.receipt-guide mark { padding: 1px 6px; border-radius: 6px; background: var(--warning); color: var(--warning-ink); font-weight: 900; }
.receipt-paper { flex: 0 0 auto; width: min(19rem, 100%); padding: 14px 14px 10px; border: 1px solid var(--line-strong); border-bottom: 3px dashed var(--line-strong); background: #fff; color: #222; font-family: "Courier New", Courier, monospace; font-size: .8125rem; line-height: 1.35; box-shadow: var(--shadow); }
.receipt-paper p { margin: 0 0 4px; }
.receipt-center { text-align: center; }
.receipt-strong { font-weight: 900; }
.receipt-row { display: flex; justify-content: space-between; gap: 8px; }
.receipt-sum { margin-top: 6px !important; padding-top: 6px; border-top: 1px dashed #888; }
.receipt-small { color: #444; }
.receipt-number { margin-top: 6px !important; padding: 4px 6px; border: 2px solid var(--danger); border-radius: 6px; }
.receipt-number mark { padding: 0 4px; background: var(--warning); color: #222; font-weight: 900; }
.return-notice-form { display: grid; gap: 14px; margin: 18px 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.return-notice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 14px; }
.return-notice-form .field > span { margin-bottom: 5px; color: #435249; font-size: .875rem; font-weight: 800; }
.return-notice-form .field > span small { color: var(--muted); font-weight: 600; }
.return-notice-hint { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--warning); color: var(--warning-ink); font-size: 1rem; }
.return-notice-terms { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: 1rem; }
.return-notice-terms input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.return-notice-sent { margin: 18px 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--success-soft); color: var(--ink); }
.return-notice-sent h2 { margin: 0 0 8px; color: var(--success); font-size: 1.25rem; }
.return-notice-sent ol { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 1.3rem; }
.return-notice-number { font-size: 1.125rem; letter-spacing: .02em; }
.returns-page .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* "Masz pytanie o ten produkt?" — product-question.js */
.product-question-lead { margin: 0 0 12px; color: var(--muted); }
.product-question-form, .product-question-code, .product-question-done { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.product-question-done { background: var(--success-soft); color: var(--ink); }
.product-question-done p { margin: 0; }
.product-question-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 14px; }
.product-question-form .field > span, .product-question-code .field > span { margin-bottom: 5px; color: #435249; font-size: .875rem; font-weight: 800; }
.product-question-form .field > span small { color: var(--muted); font-weight: 600; }
.product-question-check { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: 1rem; }
.product-question-check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.product-question-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.product-question-step, .product-question-info { margin: 0; }
.product-question-info { padding: 10px 12px; border-radius: 10px; background: var(--info-soft); }
#productQuestionCode { max-width: 12rem; font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: .3em; text-align: center; }
.product-question .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* „Twoje ostatnie zakupy” (zalogowany klient, z historii jego zamówień). */
.recent-purchases { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.recent-purchases.is-account { margin-bottom: 16px; }
.recent-purchases-title { margin: 0 0 4px; color: var(--green); font-size: 1.125rem; }
.recent-purchases-note { margin: 0 0 12px; color: var(--muted); font-size: 1rem; }
.recent-purchases-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.recent-purchase { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.recent-purchase-name { display: grid; gap: 2px; min-width: 0; }
.recent-purchase-name a { color: var(--green); font-weight: 800; overflow-wrap: anywhere; }
.recent-purchase-name small { color: var(--muted); font-size: 1rem; }
.recent-purchase .order-reorder-result { flex-basis: 100%; }

/* Wyprzedany produkt: „Podobne dostępne teraz”. */
.similar-link { display: inline-block; margin-top: 8px; color: var(--green); font-weight: 800; font-size: .875rem; }
.similar-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.similar-item { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.similar-name { color: var(--green); font-weight: 800; overflow-wrap: anywhere; }
.similar-package, .similar-stock { color: var(--muted); font-size: 1rem; }
.similar-price { display: grid; gap: 2px; color: var(--ink); }

/* Konto: zakupy cykliczne. */
.subscription-upcoming p { margin: 8px 0 4px; font-weight: 700; }
.subscription-upcoming ol { margin: 0 0 8px; padding-left: 1.25rem; }
.subscription-note { margin: 6px 0; color: var(--muted); font-size: 1rem; }