/* Explicit user preferences, never an inferred "senior mode". */
/* Scrolling to an element (a checkout question, a field with an error, the categories) stops below
   the sticky header: comfort.js keeps --header-offset equal to its height (0 when it does not stick). */
html { scroll-padding-block: calc(var(--header-offset, 7.5rem) + 1rem) 8rem; }
/* The header search lies inside that padded strip, so with it the browser would scroll the page up a
   few pixels on every typed letter to "reveal" the caret. Typing in the header keeps the page still. */
html:has(.site-header input:focus) { scroll-padding-top: 0; }
/* A−/A+ text size. All text sizes are in rem, so the root size scales every label, price and heading;
   --text-zoom (root size / 16px) scales the viewport-based part of headings sized with clamp(). */
html, html[data-text-size="0"] { --comfort-font: 16px; --text-zoom: 1; }
html[data-text-size="1"] { --comfort-font: 18px; --text-zoom: 1.125; }
html[data-text-size="2"] { --comfort-font: 20px; --text-zoom: 1.25; }
html[data-comfort] { font-size: var(--comfort-font); }
html[data-comfort] body { font-size: 1rem; padding-bottom: 7rem; min-width: 0; }
html[data-comfort] :is(input,select,textarea) { font-size: 1rem; line-height: 1.5; }
html[data-comfort="true"] :is(.product-card p,.product-card small,.product-card button,.field label,.field-hint,.required-note,.checkout-lead,.cart-item-name,.cart-item-meta,.text-button,.secure-note,.results-toolbar,.coupon-box summary) { font-size: 1rem; line-height: 1.6; }
/* Omnibus na kafelku zostaje drobnym drukiem (10 px), także przy większym tekście karty. */
html[data-comfort] .product-card .price-block .omnibus-price { margin-top: 1px; font-size: .625rem; line-height: 1.2; }
html[data-comfort="true"] .product-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,17rem),19rem)); justify-content: start; align-items: start; gap: 1.2rem; }
html[data-comfort] [hidden] { display: none !important; }
html[data-comfort] :is(.shell,.shop-layout,.catalog-column,.catalog-head,.checkout-main,.checkout-summary,.form-grid,.field,.product-card) { min-width: 0; }
html[data-comfort] :is(button,a,summary) { touch-action: manipulation; }
html[data-comfort] :is(button,input,select,.choice-card,summary) { min-height: 44px; }
html[data-comfort] :is(.product-card,.cart-item,.checkout-main,.checkout-summary,.comfort-help) { overflow-wrap: anywhere; }
.comfort-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding-block: .65rem; border-top: 1px solid var(--line); }
.comfort-toolbar > :last-child { margin-left: auto; }
.comfort-toolbar button,.comfort-question button:not(.primary-button),.comfort-help button,.comfort-sharing button,.comfort-dispatch button { border: 1px solid var(--line-strong); border-radius: .7rem; background: var(--surface); color: var(--green); padding: .55rem .85rem; font: inherit; font-weight: 600; }
.comfort-toolbar button[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green); }
/* The generic question button above (0,2,1) outranked .pickup-point.active (0,2,0): the chosen Paczkomat looked unchosen. */
.comfort-question .pickup-point.active { border: 2px solid var(--green); padding: 9px 11px; background: var(--mint); }
.comfort-size { display: inline-flex; align-items: center; gap: .45rem; }
.comfort-size button { min-width: 48px; }
.comfort-size > span { min-width: 6.8rem; color: var(--muted); font-size: .8rem; text-align: center; }
.comfort-search-scope { font-size: .9rem; color: var(--muted); margin: .4rem 0 1rem; }
.comfort-dock { position: fixed; z-index: var(--layer-comfort-dock); bottom: max(.75rem,env(safe-area-inset-bottom)); right: 1rem; display: grid; grid-template-columns: minmax(13rem,1fr) minmax(10rem,.9fr); max-width: min(35rem,calc(100% - 2rem)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 1rem; box-shadow: var(--shadow-strong); overflow: hidden; }
.comfort-dock button { border: 0; background: var(--surface); color: var(--green); padding: .6rem 1rem; text-align: left; font: inherit; min-height: 64px; }
.comfort-dock button:first-child { display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; }
.comfort-dock small { grid-column: 1/-1; color: var(--muted); font-size: .8rem; }
.comfort-dock button:last-child { border-left: 1px solid var(--line); background: var(--mint); }
.comfort-back-to-top { position: fixed; z-index: var(--layer-comfort-dock); right: 1rem; bottom: max(1.25rem,env(safe-area-inset-bottom)); min-height: 48px; display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--green); color: #fff; font: inherit; font-weight: 800; box-shadow: var(--shadow-strong); cursor: pointer; }
.comfort-back-to-top[hidden] { display: none; }
.comfort-back-to-top:focus-visible { box-shadow: var(--focus); outline: 0; }
.comfort-back-to-top span { font-size: 1.2em; line-height: 1; }
.comfort-sharing { position: fixed; bottom: 6rem; left: 1rem; right: 1rem; z-index: var(--layer-comfort-sharing); padding: .7rem 1rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; background: #edf6ff; border: 2px solid #2d5979; border-radius: .75rem; color: #183e5a; }
html[data-comfort] body.comfort-is-sharing { padding-bottom: 12rem; }
.comfort-question { margin-top: 1.2rem; padding: 1.3rem; border: 1px solid var(--line-strong); border-radius: 1rem; background: var(--surface-soft); }
.comfort-question-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--muted); font-size: .8rem; }
/* The mode switch stays on the right in both modes, also when the step counter is hidden. */
.comfort-question-head [data-comfort="stepped"] { margin-left: auto; }
.comfort-question h3 { font-size: 1.4rem; line-height: 1.3; margin: 1rem 0; }
#comfortQuestionHint { color: var(--muted); font-size: 1rem; }
.comfort-question .form-grid { grid-template-columns: 1fr; }
.comfort-question .postal-lookup { max-width: none; }
.comfort-question .form-section { margin-block: 1rem; }
/* Step by step the step title replaces the section heading; the whole form keeps the headings. */
.comfort-question[data-stepped="true"] :is([data-comfort-part="contact"],[data-comfort-part="address"]) > .form-section-title { display: none; }
.comfort-question-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.comfort-question-actions button { min-width: 6rem; }
.comfort-dialog-help { min-height: 44px; border: 1px solid var(--line-strong); border-radius: .7rem; background: #fff; color: var(--green); font: inherit; font-weight: 800; padding: .55rem .8rem; text-decoration: none; }
.comfort-dialog-help:hover { border-color: var(--green); background: var(--mint); }
/* Next to the floated × of the window (same top edge), leaving room for it on the right. */
.comfort-dialog-help { margin: 14px calc(44px + 1.75rem) 4px 14px; }
@media (max-width: 680px) { .comfort-dialog-help { padding-inline: .7rem; font-size: .85rem; } }
.comfort-help { width: min(40rem,calc(100% - 1.2rem)); max-height: calc(100dvh - 1.2rem); border: 1px solid var(--line-strong); border-radius: 1.2rem; padding: 1.4rem; background: var(--surface); color: var(--ink); overflow-y: auto; }
.comfort-help::backdrop { background: rgba(10,30,20,.5); }
.comfort-help-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.comfort-help h2 { font-size: 1.45rem; margin: 0; }
.comfort-help h3 { font-size: 1.2rem; }
.comfort-help-head button { min-width: 44px; flex-shrink: 0; }
.comfort-help p { line-height: 1.6; }
#comfortContact { display: flex; align-items: flex-start; flex-direction: column; gap: .6rem; }
.comfort-email { display: inline-block; padding-block: .6rem; color: var(--green); }
.comfort-share-choice { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.comfort-share-choice label { display: flex; align-items: flex-start; gap: .65rem; margin: 1rem 0; }
.comfort-share-choice input { width: 1.3rem; height: 1.3rem; min-height: 0 !important; flex-shrink: 0; }
.comfort-contact-warning { background: var(--warning); color: var(--warning-ink); padding: .75rem; border-radius: .7rem; }
.comfort-dispatch { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--mint); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.2rem; margin: 1rem 0; }
.comfort-dispatch p { margin: .4rem 0 0; max-width: 65ch; color: var(--muted); font-size: 1rem; }
.comfort-clock { display: flex; flex-direction: column; gap: .2rem; align-items: center; flex-shrink: 0; }
.comfort-clock span { font-size: .75rem; }
.comfort-clock time { font-size: 1.4rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.comfort-clock button { font-size: .75rem; padding: .25rem .5rem; }
.comfort-lens { position: fixed; z-index: var(--layer-accessibility); width: min(520px,calc(100vw - 24px)); max-height: min(calc(100dvh - 24px),max(11.5rem,45dvh)); display: flex; flex-direction: column; overflow: hidden; padding: 1rem; background: #fff; color: #122c20; border: 3px solid var(--green-2); border-radius: .75rem; box-shadow: var(--shadow-strong); font: 30px/1.45 system-ui,sans-serif; pointer-events: none; overflow-wrap: anywhere; }
.comfort-lens[popover] { inset: auto; margin: 0; }
.comfort-lens-focus { background: #ffe58a; color: inherit; border-radius: .2em; box-shadow: 0 0 0 .08em #ffe58a; }
.comfort-lens-view { min-height: 0; overflow: hidden; }
.comfort-lens-more-below { -webkit-mask-image: linear-gradient(#000 calc(100% - 2.2em),transparent); mask-image: linear-gradient(#000 calc(100% - 2.2em),transparent); }
.comfort-lens-more-above { -webkit-mask-image: linear-gradient(transparent,#000 2.2em); mask-image: linear-gradient(transparent,#000 2.2em); }
.comfort-lens-more-above.comfort-lens-more-below { -webkit-mask-image: linear-gradient(transparent,#000 2.2em,#000 calc(100% - 2.2em),transparent); mask-image: linear-gradient(transparent,#000 2.2em,#000 calc(100% - 2.2em),transparent); }
.comfort-lens[popover]:not(:popover-open) { display: none; }
.comfort-lens-picture { width: auto; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
.comfort-lens img { display: block; max-width: none; object-fit: contain; }
@media (hover: none),(pointer: coarse) { .comfort-lens-control,#comfortLens { display: none !important; } }
@media (max-width: 900px) {
  html[data-comfort] .site-header { position: static; }
  html[data-comfort] .checkout-grid { grid-template-columns: 1fr; }
  .comfort-toolbar > :last-child { margin-left: 0; }
}
@media (max-width: 600px) {
  html { scroll-padding-block: calc(var(--header-offset, 7.5rem) + .75rem) 6.5rem; }
  html[data-comfort] .shell { width: calc(100% - 1rem); }
  html[data-comfort] .product-grid { grid-template-columns: 1fr; }
  html[data-comfort] :is(.catalog-head,.results-toolbar) { flex-wrap: wrap; }
  html[data-comfort] .search-box { width: 100%; }
  html[data-comfort] .checkout-content { padding: .5rem; }
  html[data-comfort] .form-grid { grid-template-columns: 1fr; }
  .comfort-toolbar { gap: .4rem; }
  .comfort-toolbar button { font-size: .85rem; padding: .5rem .65rem; }
  .comfort-toolbar > :last-child { width: 100%; text-align: left; }
  .comfort-question { padding: .8rem; }
  .comfort-question h3 { font-size: 1.15rem; }
  .comfort-dock { left: .5rem; right: .5rem; bottom: max(.5rem,env(safe-area-inset-bottom)); max-width: none; grid-template-columns: 1fr 1fr; }
  .comfort-dock button { padding: .6rem; font-size: .8rem; }
  .comfort-dock button:first-child { grid-template-columns: 1fr; }
  .comfort-dock small { display: none; }
  .comfort-sharing { bottom: 5.5rem; left: .5rem; right: .5rem; font-size: .8rem; }
  .comfort-dispatch { flex-direction: column; align-items: stretch; }
  .comfort-clock { align-items: flex-start; }
  .comfort-help { padding: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-comfort] { scroll-behavior: auto; }
  html[data-comfort] *,html[data-comfort] *::before,html[data-comfort] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print { .comfort-toolbar,.comfort-dock,.comfort-back-to-top,.comfort-sharing,.comfort-lens,.comfort-dispatch,.comfort-help,.comfort-dialog-help { display: none !important; } }

/* Reserve confirmation space: adding a product must not cover a checkout button. */
.comfort-cart-feedback { min-height: 2.8rem; padding: 0 1.25rem; }
.comfort-cart-feedback .toast { position: static; width: auto; max-width: none; box-shadow: none; border: 0; padding: .3rem 0; font-size: .9rem; animation: none; }
.comfort-cart-feedback .toast strong { display: none; }
html[data-comfort] .toast-stack { bottom: 7rem; }
@media (max-width:600px) {
  html[data-comfort] .cart-item { display: grid; grid-template-columns: 3rem minmax(0,1fr); }
  html[data-comfort] .cart-item-price { grid-column: 2; }
  html[data-comfort] .header-row { flex-wrap: wrap; gap: .5rem; }
  html[data-comfort] .header-actions { margin-left: auto; flex-wrap: wrap; }
}

/* Postcode-scoped address suggestions stay within their current question. */
.address-suggestions { max-height: 20rem; overflow-y: auto; overscroll-behavior: contain; }
.address-suggestions[hidden] { display: none; }
.address-suggestion { width: 100%; overflow-wrap: anywhere; }
.address-suggestion[aria-selected="true"] { outline: 2px solid var(--green-3); outline-offset: -2px; background: var(--mint); }

/* Clean storefront: structure and affordances are visible without explanatory copy. */
html[data-comfort] body { padding-bottom: 0; background: #f4f1e8; }
html[data-comfort] .shell { width: min(1600px, calc(100% - 32px)); }

html[data-comfort] .site-header {
  position: sticky;
  top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--green) 16%, transparent);
  background: rgba(244, 241, 232, .96);
  box-shadow: none;
}
html[data-comfort] .header-row {
  min-height: 70px;
  display: grid;
  grid-template-columns: auto auto minmax(230px, 1fr) auto;
  align-items: center;
  gap: 14px;
}
html[data-comfort] .brand { gap: 10px; padding: 0; }
html[data-comfort] .brand-mark {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--green);
  font-size: 30px;
  font-weight: 1000;
  letter-spacing: -.12em;
}
html[data-comfort] .brand-copy { min-width: 76px; }
html[data-comfort] .brand-copy small { margin: 0; color: #6f746f; font-size: .75rem; font-weight: 750; line-height: 1.15; }
html[data-comfort] .header-accessibility { min-width: 0; }
html[data-comfort] .comfort-toolbar { display: flex; flex-wrap: nowrap; gap: 7px; padding: 0; border: 0; }
html[data-comfort] .comfort-toolbar button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid #89928c;
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  color: #303b34;
  font-size: .875rem;
  font-weight: 800;
}
html[data-comfort] .comfort-toolbar button:hover { border-color: var(--green); background: #fff; }
html[data-comfort] .comfort-toolbar button[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
html[data-comfort] .comfort-toolbar button[aria-pressed="true"]:hover { border-color: var(--green); background: var(--green); color: #fff; }
html[data-comfort] .comfort-size { gap: 7px; }
html[data-comfort] .comfort-size > .comfort-size-label {
  min-width: auto;
  color: #6f746f;
  font-size: .75rem;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}
html[data-comfort] .comfort-size-label b { color: #3e4942; font-weight: 700; }
html[data-comfort] .header-search {
  width: min(100%, 430px);
  min-height: 44px;
  justify-self: end;
  border-color: #89928c;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
}
html[data-comfort] .header-search input { font-size: 1rem; }
html[data-comfort] .header-actions { gap: 9px; }
html[data-comfort] :is(.icon-button,.cart-button) {
  min-height: 44px;
  padding-inline: 16px;
  border-color: #89928c;
  border-radius: 12px;
  background: rgba(255,255,255,.85);
  color: #38423c;
  font-size: .875rem;
  box-shadow: none;
}
html[data-comfort] .cart-button { min-width: 138px; border-color: var(--green); background: var(--green); color: #fff; }
html[data-comfort] .cart-button.is-peeking { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
html[data-comfort] .count-badge { min-width: 24px; height: 24px; font-size: .75rem; }

html[data-comfort] main { padding: 14px 0 64px; }
html[data-comfort] .mode-banner { margin-bottom: 14px; }
html[data-comfort] .shop-layout {
  display: grid;
  grid-template-columns: clamp(235px, 20vw, 310px) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
html[data-comfort] .panel,
html[data-comfort] .cart-panel {
  border: 1px solid #8e9690;
  border-radius: 24px;
  box-shadow: none;
}
html[data-comfort] .filter-panel {
  position: static;
  min-height: clamp(540px, calc(100vh - 104px), 800px);
  margin: 0;
  padding: 24px 22px;
}
html[data-comfort] .catalog-column { width: 100%; }
html[data-comfort] .catalog-panel {
  min-height: clamp(540px, calc(100vh - 104px), 800px);
  padding: 24px 26px 28px;
}
html[data-comfort] .cart-panel {
  grid-column: 1 / -1;
  position: static;
  width: 100%;
  max-height: none;
  overflow: hidden;
  transform: none;
}
html[data-comfort] .section-heading { gap: 0; }
html[data-comfort] .section-heading.compact { margin-bottom: 10px; }
html[data-comfort] .section-heading :is(h1,h2) { color: #1c2520; font-size: clamp(1.5rem, calc(2.1vw * var(--text-zoom, 1)), 2rem); letter-spacing: -.035em; }
html[data-comfort] .section-heading.compact h1 { font-size: clamp(1.5rem, calc(2vw * var(--text-zoom, 1)), 1.875rem); }
html[data-comfort] .eyebrow { margin-bottom: 4px; color: var(--green-3); font-size: .75rem; letter-spacing: .08em; }

html[data-comfort] .filter-panel > .main-nav,
html[data-comfort] .filter-panel > .audience-list { grid-template-columns: 1fr; }
html[data-comfort] .comfort-category-tree { display: grid; gap: 8px; margin: 14px 0 2px; }
html[data-comfort] .comfort-category-group { min-width: 0; }
html[data-comfort] :is(.comfort-category-parent,.comfort-subcategory) {
  width: 100%;
  display: grid;
  align-items: center;
  justify-items: start;
  border: 1px solid transparent;
  background: transparent;
  color: #344239;
  font: inherit;
  text-align: left;
}
html[data-comfort] .comfort-category-parent {
  min-height: 52px;
  grid-template-columns: 31px minmax(0, 1fr) 20px;
  gap: 10px;
  padding: 8px 12px;
  border-color: #d2d8d3;
  border-radius: 12px;
  background: #fff;
  font-size: .875rem;
  font-weight: 900;
  transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html[data-comfort] :is(.comfort-category-parent,.comfort-subcategory) > span:first-child { font-size: 1.3125rem; line-height: 1; text-align: center; }
html[data-comfort] .comfort-category-parent:hover { border-color: var(--green); background: var(--tint); transform: translateY(-1px); }
html[data-comfort] .comfort-category-parent[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 5px 14px color-mix(in srgb, var(--green) 12%, transparent); transform: none; }
html[data-comfort] .category-chevron { justify-self: end; font-size: 1.375rem; line-height: 1; transition: transform .24s ease; }
html[data-comfort] .comfort-category-parent[aria-expanded="true"] .category-chevron { transform: rotate(90deg); }
html[data-comfort] .comfort-subcategories {
  display: grid;
  gap: 3px;
  max-height: 1600px;
  margin: 6px 0 2px 16px;
  padding: 3px 0 3px 12px;
  overflow: hidden;
  border-left: 2px solid var(--line);
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: max-height .34s cubic-bezier(.2,.75,.25,1), opacity .2s ease, transform .26s ease, margin .26s ease, padding .26s ease, border-color .2s ease, visibility 0s linear;
}
html[data-comfort] .comfort-subcategories[aria-hidden="true"] {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  opacity: 0;
  transform: translateY(-7px);
  visibility: hidden;
  pointer-events: none;
  transition: max-height .28s cubic-bezier(.4,0,.2,1), opacity .16s ease, transform .22s ease, margin .24s ease, padding .24s ease, border-color .16s ease, visibility 0s linear .28s;
}
html[data-comfort] .comfort-subcategory {
  min-height: 44px;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: .8125rem;
  font-weight: 800;
}
html[data-comfort] .comfort-subcategory > span:first-child { font-size: 1.125rem; }
html[data-comfort] .comfort-subcategory:hover { border-color: var(--tint-line); background: var(--tint); }
html[data-comfort] .comfort-subcategory[aria-pressed="true"] { border-color: var(--selected-line); background: var(--selected); color: var(--green); }
html[data-comfort] .comfort-subcategory[aria-pressed="true"]::after { content: "✓"; font-size: .875rem; font-weight: 950; }
html[data-comfort] .comfort-search-scope {
  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;
}

html[data-comfort] .catalog-head { display: block; margin-bottom: 16px; }
html[data-comfort] .type-tabs { margin-top: 12px; padding: 12px; }
html[data-comfort] .type-chip { min-height: 44px; border-radius: 12px; background: var(--surface); }
html[data-comfort] .type-chip.active { border-color: var(--green); background: var(--green); color: #fff; }
/* Deeper levels nested in the category tree, right under the picked subcategory. */
html[data-comfort] .comfort-subcategories > .type-tabs { grid-column: 1 / -1; gap: 4px; margin: 0 0 4px 14px; padding: 4px 0 4px 12px; border: 0; border-left: 2px solid var(--selected-line); border-radius: 0; background: transparent; }
html[data-comfort] .comfort-subcategories > .type-tabs .category-path > span { display: none; }
html[data-comfort] .comfort-subcategories > .type-tabs .category-path strong { font-size: .8125rem; }
html[data-comfort] .comfort-subcategories > .type-tabs .category-drill-head { gap: 8px; }
html[data-comfort] .comfort-subcategories > .type-tabs .category-drill-list { display: grid; gap: 3px; }
html[data-comfort] .comfort-subcategories > .type-tabs .type-chip { width: 100%; min-height: 40px; padding: 6px 9px; border-color: transparent; border-radius: 10px; background: transparent; color: #344239; font-size: .8125rem; text-align: left; }
html[data-comfort] .comfort-subcategories > .type-tabs .type-chip:hover { border-color: var(--tint-line); background: var(--tint); }
html[data-comfort] .comfort-subcategories > .type-tabs .type-chip.active { border-color: var(--selected-line); background: var(--selected); color: var(--green); }
html[data-comfort] .comfort-subcategories > .type-tabs .type-chip .category-count { margin-left: auto; }
html[data-comfort] .comfort-subcategories > .type-tabs .category-back { width: auto; min-height: 36px; border-color: var(--line); background: #fff; color: var(--green); }
html[data-comfort] .results-toolbar { min-height: 46px; margin-bottom: 12px; }
html[data-comfort] .results-toolbar > label { margin-left: auto; }
html[data-comfort] .results-toolbar > label > select { min-height: 44px; border-color: #bcc4be; }
/* At least 210 px a card: four in a row on a 1280 px laptop, three at 1024 px, so the first row with its
   prices fits on the first screen. Never more than four: a wider screen gets wider cards, not a fifth
   narrow one (a quarter of the row less three gaps, up to the 24 px of the "spacious" density). */
html[data-comfort] .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 210px), (100% - 3 * 25px) / 4), 1fr));
  align-items: stretch;
  justify-content: stretch;
  gap: 14px;
}
html[data-comfort] .product-card { border-color: #d4dad5; border-radius: 17px; box-shadow: none; }
html[data-comfort] .product-card:hover { transform: translateY(-1px); border-color: #76847a; box-shadow: 0 10px 24px rgba(22,47,35,.08); }
html[data-comfort] .product-card:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 22%, transparent); }
html[data-comfort] .product-content { padding: 12px 14px 14px; }
html[data-comfort] .product-tag { font-size: .75rem; }
html[data-comfort] .product-name-button { font-size: .9375rem; line-height: 1.35; }
html[data-comfort] .product-buy { gap: 10px; padding-top: 10px; }
html[data-comfort] .price-block strong { font-size: 1.3125rem; }
html[data-comfort] .add-button { min-width: 94px; min-height: 48px; border-radius: 12px; background: var(--green); color: #fff; }
html[data-comfort] .add-button:hover { background: var(--green-2); }
html[data-comfort] .inline-qty { background: var(--green); }
html[data-comfort] .product-quantity-state { min-width: 124px; }
html[data-comfort] .product-card .inline-qty b.product-quantity-label { display: flex; align-items: center; justify-content: center; white-space: nowrap; }
html[data-comfort] .product-card .inline-qty b.product-quantity-label { font-size: 1rem; font-weight: 900; }
html[data-comfort] .product-quantity-label span { font-size: .8125rem; font-weight: 800; }
html[data-comfort] .product-card.is-in-cart { border-color: var(--green); }
html[data-comfort] .product-card .inline-qty b { align-self: stretch; display: grid; place-items: center; background: var(--tint); color: var(--green); }

html[data-comfort] .cart-item-controls .inline-qty { background: var(--green); color: #fff; }
html[data-comfort] .cart-item-controls .inline-qty button,
html[data-comfort] .cart-item-controls .inline-qty b { color: #fff; }

html[data-comfort] .cart-head { min-height: 78px; padding: 16px 22px; }
html[data-comfort] .cart-head h2 { color: #1c2520; font-size: 1.625rem; }
html[data-comfort] .cart-head-actions .cart-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; font-size: .85rem; white-space: nowrap; }
html[data-comfort] .cart-back svg { width: 18px; height: 18px; flex: none; }
html[data-comfort] .empty-cart .secondary-button { margin-top: 14px; }
@media (max-width: 600px) {
  html[data-comfort] .cart-head { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
}
html[data-comfort] .comfort-cart-feedback:empty { display: none; }
html[data-comfort] .comfort-cart-feedback { min-height: 0; padding: 0 22px; }
html[data-comfort] .comfort-cart-feedback .toast { padding-block: 8px; }
html[data-comfort] .cart-body { padding-inline: 22px; }
html[data-comfort] .cart-body .empty-cart { grid-column: 1 / -1; min-height: 170px; }
html[data-comfort] .cart-foot { padding: 20px 22px; }
html[data-comfort] .checkout-button { min-width: 150px; }

html[data-comfort] .comfort-dock { display: none; }
html[data-comfort] .comfort-dispatch { margin: 0 0 14px; border-radius: 14px; padding: 10px 14px; }
html[data-comfort] .comfort-dispatch p { display: none; }

@media (max-width: 1320px) {
  html[data-comfort] .header-row { grid-template-columns: auto auto minmax(210px,1fr) auto; gap: 10px; }
  html[data-comfort] .comfort-size > .comfort-size-label { display: none; }
  html[data-comfort] .icon-button span { display: none; }
  html[data-comfort] .icon-button { width: 44px; padding: 0; }
  html[data-comfort] .cart-button { min-width: 118px; padding-inline: 12px; }
  html[data-comfort] .shop-layout { grid-template-columns: 235px minmax(0,1fr); }
}

@media (max-width: 960px) {
  html[data-comfort] .site-header { position: sticky; }
  /* Two rows on tablets and phones: logo, text size and "Jak kupić?", account and cart, then the
     search field (a third row for the toolbar took a sixth of a tablet screen). */
  html[data-comfort] .header-row {
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    padding-block: 9px;
  }
  html[data-comfort] .brand { grid-column: 1; grid-row: 1; }
  html[data-comfort] .header-accessibility { grid-column: 2; grid-row: 1; }
  html[data-comfort] .header-actions { grid-column: 3; grid-row: 1; }
  html[data-comfort] .header-search { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-self: stretch; }
  /* Second row: "☰ Kategorie" (with a visible label, not the bare icon) beside the search field. */
  html[data-comfort] .header-find { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: stretch; gap: 8px; min-width: 0; }
  html[data-comfort] .header-find .header-search { flex: 1 1 auto; width: auto; min-width: 0; }
  html[data-comfort] .category-menu-button { display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px; border: 2px solid var(--green); border-radius: 12px; background: #fff; color: var(--green); font-size: .9375rem; font-weight: 850; }
  html[data-comfort] .category-menu-button svg { width: 20px; height: 20px; stroke-width: 2.4; }
  html[data-comfort] .category-menu-button[aria-expanded="true"] { background: var(--green); color: #fff; }
  html[data-comfort] body.is-checkout-view .category-menu-button { display: none; }
  html[data-comfort] .comfort-toolbar { justify-content: flex-start; }
  /* The bottom bar with the cart exists only on phones (≤680 px). Between 681 and 960 px (tablets,
     phones held sideways) the header cart button is the only way to the cart, so it stays. */
  html[data-comfort] .header-actions .cart-button { display: inline-flex; }
  html[data-comfort] .cart-peek:not([hidden]) { display: grid; }
  html[data-comfort] .shop-layout { grid-template-columns: 1fr; gap: 14px; }
  html[data-comfort] .filter-panel { position: static; min-height: auto; padding: 20px; }
  html[data-comfort] .catalog-panel { min-height: 0; padding: 20px; }
  html[data-comfort] .cart-panel { grid-column: 1; }
  html[data-comfort] .comfort-category-tree { grid-template-columns: repeat(4, minmax(0,1fr)); }
  html[data-comfort] .comfort-category-group { display: contents; }
  html[data-comfort] .comfort-category-group:nth-child(1) .comfort-category-parent { grid-column: 1; grid-row: 1; }
  html[data-comfort] .comfort-category-group:nth-child(2) .comfort-category-parent { grid-column: 2; grid-row: 1; }
  html[data-comfort] .comfort-category-group:nth-child(3) .comfort-category-parent { grid-column: 3; grid-row: 1; }
  html[data-comfort] .comfort-category-group:nth-child(4) .comfort-category-parent { grid-column: 4; grid-row: 1; }
  html[data-comfort] .comfort-subcategories { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; padding: 8px 0 0; border-left: 0; border-top: 2px solid var(--line); }
}

@media (max-width: 680px) {
  html[data-comfort] body { padding-bottom: 84px; }
  html[data-comfort] .shell { width: calc(100% - 16px); }
  html[data-comfort] .header-row {
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-rows: auto auto;
  }
  html[data-comfort] .brand { grid-column: 1; grid-row: 1; }
  html[data-comfort] .header-accessibility { grid-column: 2; grid-row: 1; }
  html[data-comfort] .header-actions { grid-column: 3; grid-row: 1; }
  html[data-comfort] .header-search { grid-column: 1 / -1; grid-row: 2; }
  html[data-comfort] .comfort-toolbar { justify-content: center; }
  html[data-comfort] .comfort-lens-control { display: none; }
  html[data-comfort] .brand-mark { font-size: 25px; }
  html[data-comfort] .brand-copy { min-width: 62px; }
  html[data-comfort] .brand-copy small { font-size: .75rem; }
  html[data-comfort] .header-actions { gap: 5px; }
  html[data-comfort] .header-actions .cart-button,
  html[data-comfort] .header-actions .cart-peek { display: none; }
  html[data-comfort] .comfort-toolbar button { min-width: 44px; padding-inline: 9px; }
  html[data-comfort] .filter-panel,
  html[data-comfort] .catalog-panel { padding: 17px; border-radius: 19px; }
  html[data-comfort] .comfort-category-tree { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  html[data-comfort] .comfort-category-group:nth-child(1) .comfort-category-parent { grid-column: 1; grid-row: 1; }
  html[data-comfort] .comfort-category-group:nth-child(2) .comfort-category-parent { grid-column: 2; grid-row: 1; }
  html[data-comfort] .comfort-category-group:nth-child(3) .comfort-category-parent { grid-column: 1; grid-row: 2; }
  html[data-comfort] .comfort-category-group:nth-child(4) .comfort-category-parent { grid-column: 2; grid-row: 2; }
  html[data-comfort] .comfort-category-parent { grid-template-columns: 27px minmax(0,1fr) 18px; padding: 7px 9px; font-size: .8125rem; }
  html[data-comfort] .comfort-subcategories { grid-row: 3; grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-comfort] .comfort-subcategory { font-size: .75rem; }
  html[data-comfort] .section-heading :is(h1,h2),
  html[data-comfort] .section-heading.compact h1 { font-size: 1.5rem; }
  /* The number of products on its own line; sorting and "Filtry" share the row below it. */
  html[data-comfort] .results-toolbar { align-items: center; row-gap: 8px; }
  html[data-comfort] .results-toolbar > p { flex-basis: 100%; }
  html[data-comfort] .results-toolbar > label { flex: 1 1 auto; margin-left: 0; }
  html[data-comfort] .results-toolbar > label > select { width: 100%; max-width: none; padding-right: 28px; }
  html[data-comfort] .product-grid { grid-template-columns: 1fr; }
  html[data-comfort] .product-card { display: grid; grid-template-columns: 112px minmax(0,1fr); min-height: 0; }
  html[data-comfort] .product-visual { align-self: start; }
  html[data-comfort] .product-content { min-height: 0; }
  html[data-comfort] .product-buy { grid-template-columns: 1fr; align-items: stretch; }
  html[data-comfort] .add-button,
  html[data-comfort] .inline-qty,
  html[data-comfort] .product-quantity-state { width: 100%; }
  html[data-comfort] .comfort-dock {
    display: grid;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: none;
    grid-template-columns: minmax(0,1fr) 92px;
    border-radius: 15px;
  }
  html[data-comfort] .comfort-dock button { min-height: 60px; padding: 8px 12px; }
  html[data-comfort] .comfort-dock button:first-child { grid-template-columns: 1fr auto; align-items: center; }
  html[data-comfort] .comfort-dock button:last-child { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
  html[data-comfort] .comfort-dock svg { width: 20px; height: 20px; flex: none; }
  html[data-comfort] .comfort-dock-label { display: inline-flex; align-items: center; gap: 6px; }
  /* In the cart the bar is the next step: the shop's main button colour, the total in lime. */
  html[data-comfort] .comfort-dock .comfort-dock-cart.is-next { background: var(--green); color: #fff; font-weight: 850; }
  html[data-comfort] .comfort-dock .comfort-dock-cart.is-next strong { color: var(--lime); }
  html[data-comfort] .site-footer { padding-bottom: 24px; }
  /* No room in a phone header for the folded banner: the logo, text size, "Jak kupić?" and the
     account button already fill it, and the banner was shown at the top of the page anyway. */
  html[data-comfort][data-store-design] .header-actions .design-hero-dock { display: none; }
  /* Above the bottom dock (60px buttons + 8px gap), as a small arrow at the left edge: there it
     lies over the product photos, never over "Dodaj" or the quantity, which sit on the right. */
  .comfort-back-to-top { left: 8px; right: auto; width: 48px; padding: 0; justify-content: center; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 76px); }
  .comfort-back-to-top-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* A focused field or a scrolled-to error stops above the dock and the arrow (68 + 56 px). */
  html[data-comfort] { scroll-padding-bottom: 8.5rem; }
}

/* Most phones (iPhone 390–430 px): "Centrum Paszowe" beside the logo leaves the toolbar too little
   room for A−, A+ and "👆 Jak kupić?" (213 px), so the header keeps only the TEDI mark. */
@media (max-width: 430px) {
  html[data-comfort] .brand-copy { display: none; }
}

@media (max-width: 380px) {
  html[data-comfort] .header-row { gap: 6px; }
  html[data-comfort] .comfort-toolbar { gap: 4px; }
  html[data-comfort] .product-card { grid-template-columns: 100px minmax(0,1fr); }
}

@media (forced-colors: active) {
  html[data-comfort] .comfort-category-parent[aria-pressed="true"],
  html[data-comfort] .comfort-subcategory[aria-pressed="true"] { border: 2px solid ButtonText; }
}

/* The page's scroll-padding already keeps scrolled-to elements below the sticky header. */
html[data-comfort] :is(.cart-panel, .checkout-content) { scroll-margin-top: .5rem; }

/* Cart, 30.09.2026: one readable list on the left, one summary on the right.
   Checkout opens only after "Dalej: dane i dostawa", so the cart is not buried under a form. */
.cart-head-summary { margin: 4px 0 0; color: var(--muted); font-size: .8rem; font-weight: 700; }
html[data-comfort] .cart-head { min-height: 0; align-items: flex-start; }
html[data-comfort] .cart-panel.is-empty .cart-head { border-bottom: 0; }
html[data-comfort] .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); align-items: start; }
html[data-comfort] .cart-panel.is-empty .cart-layout { grid-template-columns: 1fr; }
html[data-comfort] .cart-body { display: block; min-height: 0; max-height: none; overflow: visible; padding: 8px 22px 18px; }
html[data-comfort] .cart-body .empty-cart { min-height: 150px; padding-block: 12px 24px; }
.cart-list { margin: 0; padding: 0; list-style: none; }
html[data-comfort] .cart-item {
  grid-template-columns: 56px minmax(0, 1fr) auto 7.5rem;
  gap: 8px 16px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
html[data-comfort] .cart-item:last-child { border-bottom: 0; }
html[data-comfort] .cart-thumb { width: 56px; height: 56px; }
html[data-comfort] .cart-item-name {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
html[data-comfort] .cart-item-name:hover { color: var(--green); text-decoration: underline; }
html[data-comfort] .cart-item-meta { margin: 2px 0 0; font-size: .8rem; }
.cart-item-stock { display: inline-block; margin-top: 4px; color: var(--warning-ink); font-size: .75rem; font-weight: 800; }
html[data-comfort] .cart-item-controls { gap: 4px; }
html[data-comfort] .cart-item-controls .inline-qty { grid-template-columns: 44px minmax(2.2rem, auto) 44px; border-radius: 12px; }
html[data-comfort] .remove-button { width: auto; min-width: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--danger); font: inherit; font-size: .8rem; font-weight: 800; }
html[data-comfort] .cart-item-price { padding: 0; font-size: 1.05rem; text-align: right; }

html[data-comfort] .cart-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 8px 22px 22px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-soft);
}
.cart-foot-title { margin: 0; color: var(--ink); font-size: 1.05rem; }
.cart-totals { display: grid; gap: 6px; margin: 0; }
.cart-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cart-totals > div[hidden] { display: none; }
.cart-totals dt { color: var(--muted); font-size: .85rem; }
.cart-totals dd { margin: 0; color: var(--ink); font-weight: 850; white-space: nowrap; }
.cart-totals > div:first-child dd { color: var(--green); font-size: 1.35rem; }
.cart-totals .cart-totals-note { min-width: 0; color: var(--muted); font-size: .85rem; font-weight: 600; text-align: right; white-space: normal; }
.cart-weight { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--mint); color: var(--green); font-size: .85rem; }
.cart-weight svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cart-weight small { display: block; color: var(--green-3); font-size: 1rem; }
html[data-comfort] .cart-foot .coupon-box { width: 100%; margin: 0; }
html[data-comfort] .cart-foot .coupon-box > label { font-size: .8rem; }
html[data-comfort] .cart-foot .checkout-button { width: 100%; min-width: 0; justify-content: center; }
html[data-comfort] .cart-continue { justify-self: center; border-color: transparent; background: transparent; font-size: .85rem; }

@media (max-width: 960px) {
  html[data-comfort] .cart-layout { grid-template-columns: 1fr; }
  html[data-comfort] .cart-foot { margin: 0 18px 18px; }
  html[data-comfort] .cart-body { padding-inline: 18px; }
}
@media (max-width: 600px) {
  html[data-comfort] .cart-item { grid-template-columns: 48px minmax(0, 1fr) auto; }
  html[data-comfort] .cart-thumb { width: 48px; height: 48px; grid-row: 1; }
  html[data-comfort] .cart-item-main { grid-column: 2 / 4; }
  html[data-comfort] .cart-item-controls { grid-column: 1 / 3; grid-row: 2; }
  html[data-comfort] .cart-item-price { grid-column: 3; grid-row: 2; align-self: center; justify-self: end; }
  html[data-comfort] .remove-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  html[data-comfort] .cart-foot { margin: 0 12px 12px; padding: 16px; }
  html[data-comfort] .cart-body { padding-inline: 14px; }
}

/* A price never breaks inside "zł". The price always has its own row and the action slot below it
   ("Dodaj" or the quantity stepper) is the same 48px in both states, so adding a product never
   changes the card height (and therefore never the height of the whole grid row). */
html[data-comfort] .price-block strong { white-space: nowrap; }
html[data-comfort] .product-buy { grid-template-columns: 1fr; align-items: stretch; }
html[data-comfort] .product-buy .add-button { width: 100%; }
html[data-comfort] .product-buy .product-quantity-state { width: 100%; }
html[data-comfort] .product-buy .product-quantity-state .inline-qty { width: 100%; grid-template-columns: 48px minmax(0, 1fr) 48px; }
/* Narrow phone cards: "w koszyku" goes under the number instead of being cut off at both ends. */
@media (max-width: 400px) {
  html[data-comfort] .product-buy .product-quantity-state .inline-qty { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  html[data-comfort] .product-card .inline-qty b.product-quantity-label { flex-direction: column; line-height: 1.05; }
  html[data-comfort] .product-quantity-label span { font-size: .75rem; }
  html[data-comfort] .product-card { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 340px) {
  /* Two section buttons side by side leave no room for "Hodowlane" and the decorative arrow. */
  html[data-comfort] .comfort-category-parent { grid-template-columns: 24px minmax(0, 1fr); gap: 6px; }
  html[data-comfort] .comfort-category-parent .category-chevron { display: none; }
  html[data-comfort] .product-card { grid-template-columns: 84px minmax(0, 1fr); }
}
/* All three cookie choices share one type size, so none looks secondary by accident. */
html[data-comfort] .cookie-actions .text-button { font-size: .875rem; font-weight: 650; }
html[data-comfort] .cart-item-controls .inline-qty { width: auto; }
html[data-comfort] .summary-lines strong { white-space: nowrap; }

/* Checkout, 30.09.2026: after "Dalej: dane i dostawa" the cart collapses and the checkout keeps
   one order summary card (products, coupon, delivery, total) — one set of prices, never two. */
.cart-panel.is-checkout .cart-layout { display: none; }
.cart-panel.is-checkout .checkout-content { border-top: 0; }
.checkout-content .checkout-summary {
  display: grid;
  gap: 14px;
  margin: 30px 22px 22px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-soft);
}
.checkout-summary .summary-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.checkout-summary .summary-head h3 { margin: 0; color: var(--ink); font-size: 1.05rem; overflow-wrap: normal; }
.checkout-summary .summary-edit { flex: none; min-height: 40px; padding: 6px 10px; font-size: .8rem; white-space: nowrap; }
.summary-items { display: grid; gap: 10px; margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--line); list-style: none; }
.summary-items li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.summary-item-thumb { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--mint); font-size: 22px; }
.summary-item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; border-radius: inherit; }
.summary-item-thumb .product-emoji { font-size: 22px; filter: none; }
.summary-item-thumb b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--green); color: #fff; font-size: .75rem; line-height: 1; }
.summary-item-name { color: var(--ink); font-size: .85rem; font-weight: 800; line-height: 1.3; }
.summary-item-name small { display: block; color: var(--muted); font-size: .75rem; font-weight: 600; }
.summary-items strong { color: var(--ink); font-size: .85rem; white-space: nowrap; }
.checkout-summary .summary-coupon { width: 100%; margin: 0; }
.checkout-summary .summary-coupon > label { font-size: .8rem; }
.checkout-summary .coupon-row input, .checkout-summary .coupon-row button { min-height: 44px; }
.checkout-summary .coupon-row :disabled { color: var(--disabled-ink); background: var(--disabled-surface); cursor: not-allowed; }
.checkout-summary .summary-lines { padding-top: 14px; border-top: 1px solid var(--line); }
.checkout-summary :is(.summary-meta, .secure-note) { margin: 0; }
@media (max-width: 960px) {
  .checkout-content .checkout-summary { margin: 0 18px 18px; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .checkout-content .checkout-summary { margin: 0 12px 12px; padding: 16px; }
}

/* A phone held sideways is only ~360 px tall: a sticky header (logo, buttons and search) would
   cover half of it, so on such short screens it scrolls away with the page. */
@media (max-height: 500px) {
  html[data-comfort] .site-header { position: static; }
}

/* Product card on a phone, 05.10.2026. One-column list (NN/g: a list gives each item room for the
   full name), with:
   - the full name, never cut off (Baymard: a truncated title is as harmful as none), in semibold,
     not black, so the price is the strongest element of the card;
   - brand and weight as one plain line above the name instead of two pills that read like buttons;
   - price and "Dodaj" in one row across the whole card: the button sits under the right thumb
     (Hoober: ~75% of touches are thumbs), and the card is about a third shorter, so more products
     fit on a screen;
   - whole złote large and ",grosze zł" smaller, the unit price right below it (dyrektywa 98/6/WE);
   - stock as a strip along the bottom of the photo, only from the real count (never a countdown).
   The "Dodaj" button and the quantity stepper share one 48px slot, so adding never moves the list. */
@media (max-width: 680px) {
  html[data-comfort] .catalog-panel { padding-inline: 12px; }
  html[data-comfort] .product-grid { gap: 10px; }
  html[data-comfort] .product-card {
    grid-template-columns: clamp(96px, 30vw, 132px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 12px;
    padding: 12px;
  }
  html[data-comfort] .product-content { display: contents; }
  html[data-comfort] .product-visual { grid-column: 1; grid-row: 1 / 4; border-radius: 10px; }
  html[data-comfort] .product-card .stock-badge { inset: auto 0 0; padding: 3px 4px; border-radius: 0; background: rgba(255,255,255,.94); box-shadow: 0 -1px 0 var(--line); font-size: .75rem; font-weight: 850; line-height: 1.25; text-align: center; }
  html[data-comfort] .product-card .stock-badge.low { background: var(--warning); color: var(--warning-ink); }
  html[data-comfort] .product-card .stock-badge.out { background: var(--danger-soft); color: var(--danger); }
  html[data-comfort] .product-tags { grid-column: 2; grid-row: 1; flex-wrap: wrap; gap: 0; margin: 0 0 3px; }
  html[data-comfort] .product-tag { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted); font-size: .75rem; font-weight: 750; line-height: 1.35; }
  html[data-comfort] .product-tag.product-brand { color: var(--green-3); }
  html[data-comfort] .product-tag + .product-tag::before { content: "·"; margin-inline: 6px; color: var(--muted); }
  /* Sizes in rem follow the A−/A+ text size; the specificity beats the generic ".product-card button" rule. */
  html[data-comfort] .product-card .product-name-button { grid-column: 2; grid-row: 2; font-size: .9rem; font-weight: 600; line-height: 1.35; }
  /* Price left, action right; on a very narrow screen the action wraps to its own row instead of
     covering the price. */
  html[data-comfort] .product-card .product-buy {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  html[data-comfort] .price-block strong { font-size: 1.4rem; line-height: 1.1; letter-spacing: -.01em; }
  html[data-comfort] .price-block .price-fraction { font-size: .66em; font-weight: 850; letter-spacing: 0; }
  html[data-comfort] .product-card .price-block small { margin-top: 3px; font-size: .75rem; line-height: 1.3; }
  html[data-comfort] .product-card .product-buy .add-button { width: auto; min-width: 116px; padding-inline: 18px; font-size: .9rem; }
  html[data-comfort] .product-card .product-buy .add-button:disabled svg { display: none; }
  html[data-comfort] .product-card .price-block { flex: 1 1 0; min-width: 7.5rem; }
  html[data-comfort] .product-card .product-buy .product-quantity-state { width: 176px; margin-left: auto; }
  html[data-comfort] .product-card .product-buy .product-quantity-state .inline-qty { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  html[data-comfort] .product-card .product-buy .add-button { margin-left: auto; }
  html[data-comfort] .product-card .inline-qty b.product-quantity-label { flex-direction: column; line-height: 1.05; }
  html[data-comfort] .product-card .product-quantity-label span { font-size: .75rem; }
  html[data-comfort] .product-card.is-unavailable .product-visual img { opacity: .55; filter: grayscale(1); }
  html[data-comfort] .product-card.is-unavailable .price-block strong { color: var(--muted); }
}
@media (max-width: 400px) {
  html[data-comfort] .product-card .product-buy .product-quantity-state { width: 160px; }
  html[data-comfort] .product-card .product-buy .add-button { min-width: 104px; padding-inline: 14px; }
  html[data-comfort] .price-block strong { font-size: 1.3rem; }
}
/* The footer band between products stays low: with a mouse its links need no 44 px finger targets
   (on touch screens they keep them, and the group titles go so the band stays short). */
@media (pointer: fine) {
  html[data-comfort] .catalog-break :is(a, button) { min-height: 0; }
}
/* "Porównaj" on a phone card: in the free space next to the photo, above the price and "Dodaj". */
@media (max-width: 680px) {
  html[data-comfort] .product-card .compare-toggle { grid-column: 2; grid-row: 3; align-self: end; margin-top: 0; }
}