/* ==========================================================================
   Tofikolo.pl – style poszczególnych stron
   ========================================================================== */

.page-head { padding-block: 1.8rem .8rem; }
.page-head h1 { margin-bottom: .35rem; }
.page-head p { max-width: 62ch; color: var(--ink-soft); margin-bottom: 0; }
.section { padding-block: clamp(1.8rem, 4.5vw, 3.2rem) 0; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.section__head h2 { margin: 0; }
.more { font-weight: 700; }
@media (pointer: coarse), (max-width: 760px) { .more { display: inline-block; padding-block: .65rem; } }

/* ---------- strona główna: ściana kafelków ---------- */
.hero { padding-block: clamp(1.1rem, 3vw, 2rem) .4rem; }
.wall {
  display: grid; gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(108px, auto);
  padding: 10px;
  background: var(--white);
  border: var(--line); border-radius: 28px;
  box-shadow: 0 8px 0 var(--ink);
}
.wall > .tile { animation: drop .7s cubic-bezier(.2, .9, .25, 1.12) both; }
.wall > :nth-child(1) { animation-delay: .02s; }
.wall > :nth-child(2) { animation-delay: .08s; }
.wall > :nth-child(3) { animation-delay: .14s; }
.wall > :nth-child(4) { animation-delay: .2s; }
.wall > :nth-child(5) { animation-delay: .26s; }
.wall > :nth-child(6) { animation-delay: .32s; }
.wall > :nth-child(7) { animation-delay: .38s; }
.wall > :nth-child(8) { animation-delay: .44s; }
.wall > :nth-child(9) { animation-delay: .5s; }
.wall > :nth-child(10) { animation-delay: .56s; }
.wall > :nth-child(11) { animation-delay: .62s; }
@keyframes drop {
  from { opacity: 0; transform: translateY(-34px) rotate(-4deg) scale(.94); }
  to { opacity: 1; transform: none; }
}

.tile--head { grid-column: 1 / 4; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: clamp(1.2rem, 3vw, 2.3rem); }
.tile--head h1 { margin: 0; font-size: clamp(2.2rem, 4.8vw, 3.8rem); line-height: 1.04; }
.tile--head p { margin: 0; font-size: 1.12rem; max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .3rem; }
.actions--center { justify-content: center; }
.tile--art { padding: 12%; display: grid; place-items: center; }
.tile--art:hover .art { transform: rotate(-8deg) scale(1.08); }
.w1 { grid-column: 4; grid-row: 1; }
.w2 { grid-column: 5; grid-row: 1; }
.w3 { grid-column: 6; grid-row: 1; }
.w4 { grid-column: 6; grid-row: 2; }
.tile--promo { grid-column: 4 / 6; grid-row: 2; display: flex; align-items: center; gap: .9rem; padding: .8rem 1.1rem; }
.tile--promo h2 { margin: 0 0 .15rem; font-family: var(--text); font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.tile--promo p { margin: 0; font-size: .95rem; line-height: 1.3; }
.code { display: inline-flex; align-items: center; gap: .4rem; margin-top: .45rem; padding: .25rem .5rem .25rem .7rem; border: 2px dashed var(--ink); border-radius: 10px; background: rgba(255, 255, 255, .7); font-weight: 800; letter-spacing: .04em; font-size: 1rem; }
.code button { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 8px; background: var(--ink); color: var(--white); cursor: pointer; }
.code button:hover { background: var(--blue); }
@media (pointer: coarse), (max-width: 760px) {
  .code { padding-block: .15rem; padding-right: .2rem; }
  .code button { width: 2.75rem; height: 2.75rem; }
}
.w5 { grid-column: 1; grid-row: 3; }
.w6 { grid-column: 2; grid-row: 3; }
.tile--usp { grid-column: 3 / 5; grid-row: 3; display: flex; align-items: center; gap: .9rem; padding: .8rem 1.1rem; }
.tile--usp .ico { width: 2.4rem; height: 2.4rem; flex: none; }
.tile--usp strong { display: block; font-size: 1.08rem; line-height: 1.2; }
.tile--usp span { font-size: .93rem; }
.w7 { grid-column: 5; grid-row: 3; }
.w8 { grid-column: 6; grid-row: 3; }

.usps { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 1.6rem; }
.usp { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; background: var(--white); border: var(--line); border-radius: 16px; }
.usp .ico { flex: none; width: 2.1rem; height: 2.1rem; padding: .35rem; border-radius: 10px; background: var(--tile, var(--sky)); border: 2px solid var(--ink); box-sizing: content-box; }
.usp strong { display: block; }
.usp span { color: var(--muted); font-size: .95rem; line-height: 1.35; display: block; }

.aisle-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 172px), 1fr)); }
.aisle { display: flex; flex-direction: column; justify-content: space-between; min-height: 182px; padding: 1rem; color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.aisle:hover { color: var(--ink); transform: translateY(-4px) rotate(-1deg); box-shadow: 0 7px 0 var(--tile-d); }
.aisle:hover .art { transform: rotate(-9deg) scale(1.1); }
.aisle .art { width: 78px; height: 78px; margin-bottom: .8rem; }
.aisle strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.1; }
.aisle small { color: var(--ink-soft); }

.band { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap; margin-top: clamp(2rem, 5vw, 3.4rem); padding: clamp(1.2rem, 3vw, 1.9rem) clamp(1.2rem, 3vw, 2.2rem); background: var(--ink); color: var(--white); border: var(--line); border-radius: 24px; box-shadow: 0 7px 0 var(--butter); }
.band h2 { margin: 0 0 .3rem; color: var(--butter); font-size: clamp(1.4rem, 3vw, 2rem); }
.band p { margin: 0; max-width: 52ch; color: var(--on-ink); }

/* ---------- lista produktów ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1rem 0 1.3rem; }
.toolbar .search-inline { flex: 1 1 240px; display: flex; max-width: 420px; }
.toolbar .search-inline .input { border-radius: 12px 0 0 12px; border-right: 0; padding-block: .55rem; }
.toolbar .search-inline button { width: 3rem; display: grid; place-items: center; background: var(--butter); border: var(--line); border-radius: 0 12px 12px 0; cursor: pointer; color: var(--ink); }
.toolbar .sort { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.toolbar .sort label { font-weight: 700; font-size: .95rem; }
.toolbar .sort select { width: auto; padding-block: .55rem; }
.count-line { margin: 0; color: var(--muted); font-weight: 600; }
.empty { text-align: center; padding: clamp(2rem, 6vw, 4rem) 1rem; }
.empty .art { width: 110px; height: 110px; margin: 0 auto 1rem; }
.empty h2 { margin-bottom: .4rem; }
.empty p { color: var(--ink-soft); }

/* ---------- strona produktu ---------- */
.pdp { display: grid; gap: clamp(1.2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
.gallery__main { position: relative; aspect-ratio: 1; background: var(--tile, var(--sky)); border: var(--line); border-radius: 24px; overflow: hidden; box-shadow: 0 7px 0 var(--tile-d, var(--ink)); }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.gallery__main .tags { position: absolute; left: .8rem; top: .8rem; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.gallery__thumbs button { width: 74px; height: 74px; padding: 0; border: var(--line); border-radius: 14px; background: var(--white); overflow: hidden; cursor: pointer; }
.gallery__thumbs button[aria-current="true"] { box-shadow: 0 0 0 3px var(--butter), 0 0 0 5px var(--ink); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.buy h1 { margin-bottom: .3rem; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.buy .cap { display: inline-block; margin-bottom: .8rem; padding: .15rem .7rem; border: 2px solid var(--ink); border-radius: 99px; background: var(--white); font-weight: 700; font-size: .92rem; }
.buy .lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 52ch; }
.buy .price-big { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0 .3rem; flex-wrap: wrap; }
.buy .price-big .price strong { font-size: clamp(2.2rem, 5vw, 3rem); }
.buy .price-big .price s { font-size: 1.15rem; }
.stock { margin: 0 0 1rem; font-weight: 700; display: flex; align-items: center; gap: .45rem; }
.stock::before { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: var(--mint); border: 2px solid var(--ink); }
.stock--low::before { background: var(--orange); }
.stock--out::before { background: var(--berry); }
.buy form.add { display: flex; flex-wrap: wrap; gap: .8rem; align-items: stretch; margin-bottom: 1.2rem; }
.buy form.add .btn { flex: 1 1 200px; }
.perks { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.perks li { display: flex; gap: .6rem; align-items: center; }
.perks .ico { width: 1.5rem; height: 1.5rem; color: var(--mint-deep); }
.detail { margin-top: 1.4rem; }
.detail details { background: var(--white); border: var(--line); border-radius: 16px; margin-bottom: .7rem; }
.detail summary { cursor: pointer; padding: .85rem 1.1rem; font-weight: 800; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.detail summary::-webkit-details-marker { display: none; }
.detail summary::after { content: "+"; font-size: 1.5rem; line-height: 1; font-weight: 600; transition: transform .2s; }
.detail details[open] summary::after { transform: rotate(45deg); }
.detail .body { padding: 0 1.1rem 1rem; max-width: 66ch; }
.detail .body p { white-space: pre-line; }

/* ---------- koszyk ---------- */
.cart-grid { display: grid; gap: clamp(1.1rem, 3vw, 2rem); grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.line { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .8rem; background: var(--white); border: var(--line); border-radius: 18px; }
.line__img { display: block; width: 92px; height: 92px; background: var(--tile, var(--sky)); border: var(--line); border-radius: 14px; overflow: hidden; }
.line__img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.line__info a { color: var(--ink); font-weight: 700; text-decoration: none; }
.line__info a:hover { text-decoration: underline; }
.line__info small { display: block; color: var(--muted); }
.line__price { text-align: right; }
.line__price strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.line__price small { color: var(--muted); }
.line__ctrl { grid-column: 2 / -1; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.line__ctrl form { margin: 0; display: flex; align-items: center; gap: .5rem; }
.summary { position: sticky; top: 6.5rem; }
.summary h2 { font-size: 1.6rem; }
.sum { list-style: none; margin: 0 0 1rem; padding: 0; }
.sum li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; }
.sum li small { color: var(--muted); display: block; }
.sum .discount span:last-child { color: var(--mint-deep); font-weight: 800; }
.sum .total { margin-top: .4rem; padding-top: .8rem; border-top: 2px solid var(--ink); font-weight: 800; font-size: 1.15rem; align-items: baseline; }
.sum .total span:last-child { font-family: var(--display); font-weight: 400; font-size: 1.8rem; }
.promo-form { display: flex; gap: .5rem; margin-bottom: .4rem; }
.promo-form .input { text-transform: uppercase; padding-block: .6rem; }
.promo-on { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .8rem; margin-bottom: .6rem; background: #bfebda; border: var(--line); border-radius: 12px; font-weight: 700; }
.promo-on form { margin: 0; }
.ship-meter { margin: 0 0 1rem; }
.ship-meter p { margin: 0 0 .4rem; font-weight: 600; font-size: .95rem; }
progress.bar-fill { display: block; width: 100%; height: 14px; appearance: none; border: 2px solid var(--ink); border-radius: 99px; background: var(--white); overflow: hidden; }
progress.bar-fill::-webkit-progress-bar { background: var(--white); }
progress.bar-fill::-webkit-progress-value { background: var(--mint); border-radius: 99px; }
progress.bar-fill::-moz-progress-bar { background: var(--mint); }

/* ---------- zamówienie ---------- */
.checkout { display: grid; gap: clamp(1.1rem, 3vw, 2rem); grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
.checkout fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.checkout legend { padding: 0; margin-bottom: .7rem; font-family: var(--display); font-size: 1.45rem; }
.checkout .panel + .panel { margin-top: 1.2rem; }
.mini { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.mini li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.mini img { width: 52px; height: 52px; object-fit: contain; border: 2px solid var(--ink); border-radius: 10px; background: var(--tile, var(--sky)); padding: 3px; }
.mini span { font-size: .95rem; line-height: 1.25; }
.mini b { white-space: nowrap; }
.pow-status { margin: .5rem 0 0; font-size: .92rem; color: var(--muted); display: flex; gap: .5rem; align-items: center; }
.pow-status::before { content: ""; width: .85rem; height: .85rem; border-radius: 50%; border: 3px solid var(--grout); border-top-color: var(--blue); animation: spin .8s linear infinite; }
.pow-status.is-done::before { animation: none; border-color: var(--mint); background: var(--mint); }
@keyframes spin { to { transform: rotate(360deg); } }
.invoice-box { margin: 0 0 1rem; padding: .9rem 1rem 0; border: 2px dashed var(--ink); border-radius: 14px; }

/* ---------- status zamówienia ---------- */
.celebrate { display: flex; align-items: center; gap: 1.2rem 1.6rem; flex-wrap: wrap; margin-bottom: 1.4rem; padding: 1.2rem 1.5rem; background: var(--butter); border: var(--line); border-radius: 22px; box-shadow: 0 7px 0 var(--ink); }
.celebrate h1 { margin: 0 0 .2rem; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.celebrate p { margin: 0; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; list-style: none; margin: 0 0 1.4rem; padding: 0; counter-reset: step; }
.steps li { position: relative; padding-top: 2.5rem; text-align: center; font-weight: 700; font-size: .92rem; color: var(--muted); }
.steps li::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.9rem; height: 1.9rem; margin-left: -.95rem; border: var(--line); border-radius: 50%; background: var(--white); z-index: 1; }
.steps li::after { content: ""; position: absolute; left: calc(-50% + 1rem); right: calc(50% + 1rem); top: .85rem; height: 4px; background: var(--grout); }
.steps li:first-child::after { display: none; }
.steps li.done { color: var(--ink); }
.steps li.done::before { background: var(--mint); }
.steps li.done::after { background: var(--mint); }
.steps li.now::before { background: var(--butter); box-shadow: 0 0 0 4px var(--butter-soft); }
.steps li.now { color: var(--ink); }
.cancelled-box { margin-bottom: 1.4rem; }
.facts { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 1.4rem; }
.facts dl { margin: 0; display: grid; gap: .1rem; }
.facts dt { margin-top: .6rem; color: var(--muted); font-size: .9rem; font-weight: 700; }
.facts dd { margin: 0; font-weight: 600; }
.copyline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.copyline code { padding: .25rem .6rem; background: var(--foam); border: 2px solid var(--ink); border-radius: 8px; font-weight: 700; word-break: break-all; }

.facts-inline { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1.2rem; margin: 0 0 .8rem; align-items: center; }
.facts-inline dt { color: var(--muted); font-weight: 700; font-size: .92rem; }
.facts-inline dd { margin: 0; font-weight: 600; }

/* ---------- logowanie / rejestracja ---------- */
.auth { display: grid; place-items: start center; padding-block: 3.4rem 1rem; }
.auth .panel { width: 100%; max-width: 480px; padding-top: 0; }
.auth__badge { display: grid; place-items: center; width: 84px; height: 84px; margin: -2.6rem auto .7rem; padding: 12px; background: var(--tile, var(--butter-soft)); border: var(--line); border-radius: 22px; box-shadow: 0 5px 0 var(--tile-d, var(--ink)); }
.auth h1 { text-align: center; font-size: clamp(1.8rem, 5vw, 2.3rem); margin-bottom: .3rem; }
.auth .sub { text-align: center; color: var(--ink-soft); margin-bottom: 1.2rem; }
.auth .alt { text-align: center; margin: 1.1rem 0 0; font-size: .98rem; }
.auth .row-between a, .auth .alt a, .contact-grid a[href^="mailto:"] { display: inline-block; padding-block: .65rem; }
.auth .row-between { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; font-size: .95rem; }

/* ---------- konto ---------- */
.acct-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.acct-head form { margin: 0; }
.fold { margin-top: 1rem; background: var(--white); border: var(--line); border-radius: 18px; }
.fold summary { cursor: pointer; padding: .9rem 1.2rem; font-weight: 800; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "+"; font-size: 1.5rem; font-weight: 600; transition: transform .2s; }
.fold[open] summary::after { transform: rotate(45deg); }
.fold > div { padding: 0 1.2rem 1.2rem; max-width: 620px; }

/* ---------- strony tekstowe ---------- */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2rem; font-family: var(--text); font-weight: 800; font-size: 1.4rem; }
.prose h3 { margin-top: 1.4rem; }
.prose li { margin-bottom: .35rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .98rem; }
.prose th, .prose td { padding: .55rem .7rem; text-align: left; border-bottom: 2px solid var(--grout); }
.prose th { color: var(--muted); }
.prose .box { padding: 1rem 1.2rem; background: var(--white); border: var(--line); border-radius: 16px; margin: 1.2rem 0; }
.about-grid { display: grid; gap: clamp(1.2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.about-art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; background: var(--white); border: var(--line); border-radius: 24px; box-shadow: 0 7px 0 var(--ink); }
.about-art .tile { aspect-ratio: 1; padding: 14%; display: grid; place-items: center; }
.contact-grid { display: grid; gap: clamp(1.2rem, 4vw, 2.5rem); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.contact-list li { display: flex; gap: .7rem; align-items: flex-start; }
.contact-list .ico { width: 1.6rem; height: 1.6rem; margin-top: .1rem; }

/* ---------- błędy ---------- */
.oops { text-align: center; padding-block: clamp(2.5rem, 8vw, 5rem) 1rem; }
.oops .art { width: 130px; height: 130px; margin: 0 auto 1rem; animation: float 3.4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-4deg); } }
.oops h1 { margin-bottom: .4rem; }
.oops p { max-width: 46ch; margin-inline: auto; color: var(--ink-soft); }
.oops .actions { justify-content: center; margin-top: 1.4rem; }
.oops code { padding: .15rem .5rem; background: var(--white); border: 2px solid var(--ink); border-radius: 8px; font-weight: 700; }

/* ---------- responsywność ---------- */
@media (max-width: 960px) {
  .cart-grid, .checkout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .pdp, .about-grid, .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(76px, auto); border-radius: 22px; }
  .tile--head, .tile--promo, .tile--usp { grid-column: 1 / -1; grid-row: auto; }
  .w1, .w2, .w3, .w4 { grid-column: auto; grid-row: auto; aspect-ratio: 1; padding: 14%; order: 1; }
  .tile--promo { order: 2; }
  .tile--usp { order: 3; }
  .w5, .w6, .w7, .w8 { display: none; }
  .tile--head { padding: 1.3rem 1.2rem; }
  .tile--head p { max-width: none; }
}
@media (max-width: 640px) {
  .line { grid-template-columns: 72px minmax(0, 1fr); }
  .line__img { width: 72px; height: 72px; }
  .line__price { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: .6rem; }
  .line__ctrl { grid-column: 1 / -1; }
  .steps { font-size: .8rem; }
  .steps li { font-size: .78rem; }
  .toolbar .sort { margin-left: 0; width: 100%; }
  .toolbar .sort select { flex: 1; }
  .auth { padding-top: 3rem; }
  .band .btn { width: 100%; }
}

@media (max-width: 480px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps li { padding: .25rem 0 1.05rem 2.9rem; min-height: 1.9rem; text-align: left; font-size: .95rem; }
  .steps li:last-child { padding-bottom: .25rem; }
  .steps li::before { left: 0; top: 0; margin-left: 0; }
  .steps li::after, .steps li:first-child::after { display: block; left: calc(.95rem - 2px); right: auto; top: 1.9rem; bottom: 0; width: 4px; height: auto; }
  .steps li:last-child::after { display: none; }
  .steps li.done::after { background: var(--grout); }
  .steps li:has(+ li.done)::after, .steps li.done:has(+ li.now)::after { background: var(--mint); }
  /* dodaj do koszyka na karcie produktu: stepper i przycisk w osobnych, pełnych wierszach */
  .buy form.add .qty { flex: 1 1 100%; }
  .buy form.add .qty input { flex: 1 1 auto; width: auto; min-width: 0; }
  .buy form.add .btn { flex: 1 1 100%; }
}

/* ---------- odstępy między sąsiednimi panelami i akapitami ---------- */
.panel + .panel, .panel + p, .panel + .notice { margin-top: 1.4rem; }
.facts > .panel + .panel { margin-top: 0; }
.summary p + .btn { margin-top: 1rem; }
.summary .btn + p { margin-top: .9rem; }

/* ============================================================
   Strony prawne, odstąpienie od umowy, płatności
   ============================================================ */
.wrap--narrow { max-width: calc(760px + var(--gut) * 2); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1rem; }
.no-print { /* tylko na ekranie – patrz @media print */ }
.notice--ok { background: #bfebda; }

/* dokumenty prawne: dłuższe teksty, czytelne numerowanie, kotwice nie chowają się pod nagłówkiem */
.prose.legal { max-width: 74ch; font-size: 1.02rem; line-height: 1.62; }
.prose.legal section { scroll-margin-top: 1rem; margin-bottom: 1.2rem; }
.prose.legal h2 { font-size: 1.3rem; margin-top: 2.2rem; scroll-margin-top: 1rem; }
.prose.legal h3 { font-size: 1.08rem; margin-top: 1.4rem; }
.prose.legal ol { padding-left: 1.5rem; }
.prose.legal ol ol { margin-top: .4rem; list-style: lower-alpha; }
.prose.legal ol ul, .prose.legal ul ul { margin-top: .4rem; }
.prose.legal li { margin-bottom: .55rem; }
.prose.legal code { padding: .05rem .35rem; background: var(--white); border: 1px solid var(--sky); border-radius: 6px; font-size: .92em; overflow-wrap: anywhere; }
.prose.legal .box--cta { background: var(--butter-soft); }
.prose.legal .box--cta p:last-child { margin-bottom: 0; }

/* spis treści regulaminu: „pastylki”, zawijają się na telefonie */
.toc { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; max-width: 74ch; }
.toc a { display: inline-block; padding: .3rem .75rem; background: var(--white); border: 2px solid var(--ink); border-radius: 99px; font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.toc a:hover, .toc a:focus-visible { background: var(--butter-soft); }
.legal-tools { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.2rem; }

/* tabele w dokumentach: na telefonie każdy wiersz staje się kartą z podpisami pól */
.table--stack td code { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack tr { margin-bottom: .9rem; background: var(--white); border: var(--line); border-radius: 16px; padding: .35rem .9rem .5rem; }
  .table--stack td { border: 0; padding: .45rem 0; text-align: left !important; white-space: normal !important; }
  .table--stack td + td { border-top: 2px dashed var(--grout); }
  .table--stack td::before { content: attr(data-label); display: block; margin-bottom: .1rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
}

/* odstąpienie od umowy */
.steps-note { margin: 0 0 1rem; color: var(--muted); font-size: .95rem; }
.summary-list { margin: 0 0 1.2rem; display: grid; gap: .1rem; }
.summary-list > div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .2rem 1rem; padding: .6rem 0; border-bottom: 2px solid var(--grout); }
.summary-list dt { color: var(--muted); font-size: .95rem; font-weight: 600; }
.summary-list dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.form-sheet { margin: 1.2rem 0; padding: 1rem 1.2rem; background: var(--white); border: 2px dashed var(--ink); border-radius: 14px; }
.form-sheet h3 { margin-top: 0; }
.form-sheet p { margin-bottom: .7rem; overflow-wrap: anywhere; }
.order-withdraw { border-style: dashed; box-shadow: none; }
.order-withdraw h2 { font-size: 1.15rem; }
.choices-set { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.choices-set legend { padding: 0; }

/* płatność online: przekierowanie, symulator, stan płatności */
.pay-wait { text-align: center; }
.pay-wait h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-top: 1rem; }
.pay-wait .btn { margin-top: .4rem; }
.pay-demo__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.pay-demo__actions form { margin: 0; }
.pay-box h2 { display: flex; align-items: center; gap: .55rem; }
.badge { display: inline-block; margin: 0 0 .8rem; padding: .2rem .8rem; border: 2px solid var(--ink); border-radius: 99px; background: var(--sky); font-weight: 800; font-size: .85rem; }
.badge--warn { background: var(--butter); }
.spinner { display: inline-block; width: 2.6rem; height: 2.6rem; border: 5px solid var(--sky); border-top-color: var(--ink); border-radius: 50%; animation: spin .9s linear infinite; }
.spinner--sm { width: 1.2rem; height: 1.2rem; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* stopka: dokumenty w jednym wierszu, zawijają się na telefonie */
.foot-legal__links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.foot-legal__links a, .foot-legal a { color: var(--on-ink); }
@media (pointer: coarse), (max-width: 760px) {
  .foot-legal__links { gap: 0 1.2rem; }
  .foot-legal__links a { display: inline-block; padding-block: .7rem; }
}

@media (max-width: 560px) {
  .summary-list > div { grid-template-columns: 1fr; }
  .btn-row .btn, .legal-tools .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .toc a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .88rem; padding: .28rem .85rem; }
  .prose.legal { font-size: 1rem; }
  .prose.legal ol { padding-left: 1.25rem; }
}

/* wydruk: samo pismo, bez menu, stopki i przycisków */
@media print {
  body { background: none !important; font-size: 11pt; color: #000; }
  .site-header, .site-footer, .trim, .announce, .toc, .legal-tools, .no-print, .flashes, .toast, .skip, .btn, .nav-toggle { display: none !important; }
  .wrap, .wrap--narrow { max-width: none; padding: 0; }
  .prose, .prose.legal { max-width: none; font-size: 11pt; }
  .prose.legal h2 { break-after: avoid; }
  .form-sheet { break-inside: avoid; border-color: #000; }
  .fold > div { max-width: none; }
  .fold:not([open]) > :not(summary) { display: block !important; }
  a { color: #000; text-decoration: none; }
  .panel { box-shadow: none; border-color: #000; }
}

/* ---------- własne zdjęcia na stronie głównej (panel: Wygląd strony) ---------- */
.tile--photo { padding: 0 !important; }
.tile--photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.tile--photo:hover img { transform: scale(1.06); }
.herobanner { position: relative; overflow: hidden; background: var(--sky); border: var(--line); border-radius: 28px; box-shadow: 0 8px 0 var(--ink); }
.herobanner__img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 8; min-height: 260px; object-fit: cover; }
.herobanner__card { position: absolute; left: clamp(.8rem, 3vw, 2rem); bottom: clamp(.8rem, 3vw, 2rem); display: grid; gap: .8rem; max-width: min(540px, 72%); padding: clamp(1rem, 2.4vw, 1.8rem); box-shadow: 0 6px 0 var(--ink); }
.herobanner__card h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; }
.herobanner__card p { margin: 0; max-width: 42ch; }
.herostrip { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.herostrip .tile--promo, .herostrip .tile--usp { grid-column: auto; grid-row: auto; min-height: 84px; }
.aisle__img { display: block; width: 78px; height: 78px; margin-bottom: .8rem; object-fit: cover; background: var(--white); border: 2px solid var(--ink); border-radius: 14px; transition: transform .35s cubic-bezier(.2, .9, .3, 1.4); }
.aisle:hover .aisle__img { transform: rotate(-5deg) scale(1.07); }
@media (max-width: 760px) {
  .herobanner__img { aspect-ratio: 4 / 3; min-height: 0; }
  .herobanner__card { position: static; max-width: none; border-width: 2px 0 0; border-radius: 0; box-shadow: none; }
  .herostrip { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Wygoda klienta: filtry na liście, chipy, kafelki kategorii, nagłówek kategorii
   ========================================================================== */
.page-head__title { display: flex; align-items: center; gap: .9rem; }
.page-head__title h1 { margin: 0; }
.cat-ico { flex: none; width: 56px; height: 56px; object-fit: cover; border: 2px solid var(--ink); border-radius: 16px; background: var(--white); }

/* chipy (filtry, kategorie na pustej liście) */
.chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.6rem; padding: .35rem .95rem; border: var(--line); border-radius: 99px; background: var(--white); color: var(--ink); font-family: inherit; font-size: .95rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
.chip:hover { background: var(--butter-soft); color: var(--ink); transform: translateY(-1px); box-shadow: 0 3px 0 var(--ink); }
.chip.is-on { background: var(--ink); color: var(--white); }
.chip.is-on:hover { background: var(--ink-soft); color: var(--white); }
.chip .ico { width: 1.05rem; height: 1.05rem; flex: none; }
.chip--clear { border-style: dashed; background: transparent; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin: 0 0 1.2rem; }
.filters > * { flex: none; }
summary.chip { list-style: none; user-select: none; }
summary.chip::-webkit-details-marker { display: none; }
summary.chip::after { content: ""; width: .45rem; height: .45rem; margin: -.15rem 0 0 .2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
details[open] > summary.chip::after { margin-top: .2rem; transform: rotate(-135deg); }
.chip-pop[open] { flex: 1 1 100%; }
.pricebox { display: grid; gap: .75rem; max-width: 26rem; margin-top: .6rem; padding: .95rem; border: var(--line); border-radius: 18px; background: var(--white); }
.pricebox__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.pricebox label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 700; }
.pricebox__in { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.pricebox__in .input { min-width: 0; }
.pricebox__hint { margin: 0; color: var(--muted); font-size: .88rem; }
.pricebox__act { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.chiplist { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.1rem 0 .4rem; padding: 0; list-style: none; }
.chiplist .chip { background: var(--tile, var(--white)); }

/* kafelki kategorii: liczba kolumn dobrana do liczby kategorii (klasy ac*/bm* z home.ejs), bez samotnego ostatniego kafelka */
.aisle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aisle-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 641px) {
  .aisle-grid { grid-template-columns: repeat(var(--cm, 3), minmax(0, 1fr)); }
  .aisle-grid > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 641px) { .aisle-grid.lm > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .aisle-grid { grid-template-columns: repeat(var(--c, 6), minmax(0, 1fr)); }
  .aisle-grid.lm > :last-child { grid-column: auto; }
  .aisle-grid.lw > :last-child { grid-column: 1 / -1; }
}
.ac1 { --c: 1; } .ac2 { --c: 2; } .ac3 { --c: 3; } .ac4 { --c: 4; } .ac5 { --c: 5; } .ac6 { --c: 6; }
.bm1 { --cm: 1; } .bm2 { --cm: 2; } .bm3 { --cm: 3; } .bm4 { --cm: 4; }

/* ekrany dotykowe: chipy mają ok. 44 px wysokości */
@media (pointer: coarse), (max-width: 760px) { .chip { min-height: 2.75rem; } }

@media (max-width: 640px) {
  /* telefon: kategorie niższe i bardziej zwarte, żeby pierwsze produkty były bliżej */
  .aisle { min-height: 0; padding: .8rem .85rem; }
  .aisle .art, .aisle__img { width: 58px; height: 58px; margin-bottom: .5rem; }
  .aisle strong { font-size: 1.15rem; }
  .aisle-grid > :last-child:nth-child(odd) { flex-direction: row; align-items: center; justify-content: flex-start; gap: .9rem; }
  .aisle-grid > :last-child:nth-child(odd) .art, .aisle-grid > :last-child:nth-child(odd) .aisle__img { margin-bottom: 0; }
  /* wyszukiwarka jest już u góry strony i w dolnym pasku – w pasku listy zostają licznik i sortowanie */
  .toolbar .search-inline { display: none; }
  .toolbar { justify-content: space-between; margin-block: .6rem 1rem; }
  .toolbar .sort { width: auto; margin-left: auto; }
  .toolbar .sort select { flex: none; }
  /* napis „Sortuj” zostaje dla czytników ekranu; widoczne jest samo pole, żeby licznik i sortowanie mieściły się w jednym wierszu */
  .toolbar .sort label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chip { min-height: 2.75rem; }
  .pricebox { max-width: none; }
}