/* ==========================================================
   Stapo – Opaska Precyzyjna
   Mobile-first replica of the Shopify (Dawn-based) product page
   ========================================================== */

:root {
  --color-text: 18, 18, 18;
  --color-bg: 255, 255, 255;
  --color-accent: 18, 18, 18;
  --color-muted: 112, 112, 112;
  --color-border: 224, 224, 224;
  --color-sale: 200, 0, 0;
  --color-announcement: 18, 18, 18;
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --page-width: 120rem;
  --page-pad: 1.5rem;
  --radius-btn: 0;
  --radius-card: 0;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 62.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.5rem;
  line-height: 1.6;
  color: rgb(var(--color-text));
  background: rgb(var(--color-bg));
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 { margin: 0 0 1rem; line-height: 1.2; font-weight: 700; letter-spacing: .02em; }
p { margin: 0 0 1.4rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-width { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-pad); }
@media (min-width: 750px) { :root { --page-pad: 5rem; } }

:focus-visible { outline: .2rem solid rgb(var(--color-accent)); outline-offset: .3rem; }

/* ---------- Announcement bar ---------- */
.announcement {
  background: rgb(var(--color-announcement));
  color: #fff;
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: .1em;
  font-weight: 600;
  padding: 1rem var(--page-pad);
}

/* ---------- Header ---------- */
.header { border-bottom: .1rem solid rgba(var(--color-text), .08); background: #fff; position: sticky; top: 0; z-index: 40; }
.header__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 6.4rem; }
.header__left, .header__right { display: flex; align-items: center; gap: .4rem; }
.header__right { justify-content: flex-end; }
.header__nav { display: none; gap: 2.4rem; }
.header__nav a { text-decoration: none; font-size: 1.4rem; letter-spacing: .06em; padding: .6rem 0; border-bottom: .1rem solid transparent; }
.header__nav a:hover { border-bottom-color: currentColor; }
.logo { text-decoration: none; font-weight: 800; font-size: 2.4rem; letter-spacing: .28em; text-transform: uppercase; display: flex; align-items: center; }
.logo img { height: 4.8rem; width: auto; }
.icon-btn { background: none; border: 0; padding: 1rem; display: inline-flex; color: inherit; }
.icon-btn svg { width: 2.2rem; height: 2.2rem; }
.cart-count { position: absolute; top: .4rem; right: .2rem; background: rgb(var(--color-text)); color: #fff; font-size: 1rem; line-height: 1; padding: .3rem .5rem; border-radius: 99px; }
.cart-btn { position: relative; }
@media (min-width: 990px) {
  .header__row { grid-template-columns: 1fr auto 1fr; height: 8rem; }
  .header__nav { display: flex; }
  .menu-btn { display: none; }
}

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.drawer[aria-hidden="false"] { visibility: visible; }
.drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .2s; }
.drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(85vw, 40rem); background: #fff; transform: translateX(-100%); transition: transform .25s ease; padding: 2rem; display: flex; flex-direction: column; }
.drawer[aria-hidden="false"] .drawer__overlay { opacity: 1; }
.drawer[aria-hidden="false"] .drawer__panel { transform: none; }
.drawer__panel a { display: block; text-decoration: none; font-size: 1.8rem; padding: 1.4rem 0; border-bottom: .1rem solid rgb(var(--color-border)); }
.drawer__close { align-self: flex-end; }

/* ---------- Product section ---------- */
.product { padding: 1.6rem 0 3rem; }
@media (min-width: 990px) {
  .product { padding: 4rem 0 6rem; }
  .product__grid { display: grid; grid-template-columns: 55% 1fr; gap: 5rem; align-items: start; }
  .product__info { position: sticky; top: 9.6rem; }
}

/* Gallery */
.gallery { margin: 0 calc(var(--page-pad) * -1) 1.2rem; }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; background: #f3f3f3; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__dots { display: flex; justify-content: center; gap: .6rem; margin-top: 1rem; }
.gallery__dot { width: .8rem; height: .8rem; border-radius: 50%; background: rgba(var(--color-text), .25); border: 0; padding: 0; }
.gallery__dot[aria-current="true"] { background: rgb(var(--color-text)); }
.gallery__counter { position: absolute; right: 1.6rem; bottom: 1.2rem; background: rgba(255,255,255,.9); font-size: 1.2rem; padding: .3rem .9rem; border-radius: 99px; }
.gallery__viewport { position: relative; }
.gallery__thumbs { display: none; }
@media (min-width: 990px) {
  .gallery { margin: 0; display: grid; grid-template-columns: 8rem 1fr; gap: 1.2rem; }
  .gallery__viewport { order: 2; }
  .gallery__dots, .gallery__counter { display: none; }
  .gallery__thumbs { display: flex; flex-direction: column; gap: .8rem; order: 1; max-height: 70rem; overflow-y: auto; scrollbar-width: thin; }
  .gallery__thumb { border: .1rem solid transparent; padding: 0; background: #f3f3f3; aspect-ratio: 1; }
  .gallery__thumb[aria-current="true"] { border-color: rgb(var(--color-text)); }
  .gallery__track { overflow: hidden; }
}

/* Info column */
.quote-badge { display: flex; align-items: center; gap: 1.2rem; font-size: 1.4rem; line-height: 1.4; margin-bottom: 1.6rem; padding: 1rem 1.4rem; border: .1rem solid rgb(var(--color-border)); border-radius: .8rem; background: #fff; }
.quote-badge img { width: 5.6rem; height: 5.6rem; object-fit: cover; border-radius: 50%; flex: none; }
.product__title { font-size: 2.6rem; margin-bottom: .8rem; }
@media (min-width: 990px) { .product__title { font-size: 3.4rem; } }
.price { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.price__sale { font-size: 2.2rem; font-weight: 700; }
.price__regular { font-size: 1.6rem; color: rgb(var(--color-muted)); text-decoration: line-through; }
.price__badge { font-size: 1.2rem; letter-spacing: .08em; background: rgb(var(--color-text)); color: #fff; padding: .3rem .8rem; }
.price__omnibus { font-size: 1.2rem; color: rgb(var(--color-muted)); margin-bottom: 1.6rem; }
.product__headline { font-size: 1.7rem; font-weight: 700; margin: 0 0 1.4rem; line-height: 1.4; }
.bullets { list-style: none; padding: 0; margin: 0 0 2rem; font-size: 1.5rem; }
.bullets li { padding: .3rem 0; }

.qty { display: flex; align-items: center; border: .1rem solid rgb(var(--color-text)); width: 13rem; height: 4.6rem; margin-bottom: 1.2rem; }
.qty button { flex: 1; height: 100%; background: none; border: 0; font-size: 2rem; }
.qty input { width: 4rem; text-align: center; border: 0; font: inherit; font-size: 1.5rem; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.qty__label { font-size: 1.3rem; color: rgb(var(--color-muted)); margin-bottom: .4rem; display: block; }

.btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 5.2rem; padding: 1.2rem 2rem; border: .1rem solid rgb(var(--color-accent));
  background: rgb(var(--color-accent)); color: #fff; font-size: 1.5rem; font-weight: 600;
  letter-spacing: .08em; text-decoration: none; border-radius: var(--radius-btn); transition: box-shadow .15s;
}
.btn:hover { box-shadow: 0 0 0 .1rem rgb(var(--color-accent)) inset; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn--secondary { background: #fff; color: rgb(var(--color-text)); }
.btn--express { margin-top: 1rem; background: #5a31f4; border-color: #5a31f4; }

.trust-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: 1.3rem; margin: 1.6rem 0 1.2rem; text-align: center; }
.trust-img { margin: 0 0 1.6rem; }
.trust-img img { width: 100%; }

/* Accordions */
.accordion { border-top: .1rem solid rgb(var(--color-border)); }
.accordion details { border-bottom: .1rem solid rgb(var(--color-border)); }
.accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 0; font-weight: 700; font-size: 1.5rem; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 2rem; font-weight: 400; line-height: 1; transition: transform .2s; }
.accordion details[open] summary::after { content: "–"; }
.accordion .accordion__body { padding: 0 0 1.6rem; font-size: 1.4rem; color: rgba(var(--color-text), .85); }

/* ---------- Image + text sections ---------- */
.feature { padding: 3rem 0 0; }
.feature img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.feature__text { padding: 2rem 0 1rem; }
.feature__text h2 { font-size: 2.2rem; margin-bottom: 1.2rem; }
.feature__text p { font-size: 1.6rem; }
.feature__text p:last-child { margin-bottom: 0; }
@media (min-width: 990px) {
  .feature { padding: 6rem 0 0; }
  .feature .page-width { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
  .feature--reverse .feature__media { order: 2; }
  .feature__text { padding: 0; }
  .feature__text h2 { font-size: 3rem; }
  .feature__text p { font-size: 1.7rem; }
}

/* ---------- Reviews ---------- */
.reviews { padding: 4rem 0 2rem; }
.reviews__grid { display: grid; gap: 2rem; }
.review { border: .1rem solid rgb(var(--color-border)); padding: 0 0 1.6rem; }
.review img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.review__body { padding: 1.4rem 1.6rem 0; }
.review__name { font-weight: 700; margin: 0; }
.review__meta { font-size: 1.3rem; color: rgb(var(--color-muted)); margin: 0 0 .4rem; }
.review__verified { font-size: 1.2rem; color: rgb(var(--color-muted)); display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.review__stars { color: #f5a623; letter-spacing: .1em; font-size: 1.5rem; margin-bottom: .8rem; }
.review__text { margin: 0; font-size: 1.5rem; }
@media (min-width: 750px) { .reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 990px) { .reviews { padding: 7rem 0 3rem; } .reviews__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ ---------- */
.faq { padding: 3rem 0 2rem; }
.faq h2 { font-size: 2.4rem; margin-bottom: 1.6rem; }
@media (min-width: 990px) { .faq { padding: 6rem 0 3rem; } .faq h2 { font-size: 3rem; } .faq .page-width { max-width: 90rem; } }

/* ---------- Newsletter ---------- */
.newsletter { padding: 4rem 0; text-align: center; background: #f6f6f6; margin-top: 3rem; }
.newsletter h2 { font-size: 2.6rem; }
.newsletter p { color: rgb(var(--color-muted)); }
.newsletter form { display: flex; max-width: 40rem; margin: 2rem auto 0; border: .1rem solid rgb(var(--color-text)); background: #fff; }
.newsletter input { flex: 1; border: 0; padding: 1.4rem; font: inherit; min-width: 0; }
.newsletter button { border: 0; background: none; padding: 0 1.6rem; font-size: 2rem; }
.newsletter__ok { margin-top: 1.4rem; font-weight: 600; }

/* ---------- Footer ---------- */
.footer { border-top: .1rem solid rgb(var(--color-border)); padding: 4rem 0 12rem; font-size: 1.4rem; }
.footer__cols { display: grid; gap: 3rem; }
.footer h3 { font-size: 1.5rem; margin-bottom: 1.2rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .8rem; }
.footer a { text-decoration: none; color: rgba(var(--color-text), .75); }
.footer a:hover { text-decoration: underline; }
.payments { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2.4rem 0 1.6rem; }
.payments span { border: .1rem solid rgb(var(--color-border)); padding: .4rem .9rem; font-size: 1.2rem; font-weight: 600; letter-spacing: .04em; }
.footer__legal { font-size: 1.2rem; color: rgb(var(--color-muted)); }
@media (min-width: 750px) { .footer__cols { grid-template-columns: repeat(2, 1fr); max-width: 60rem; } .footer { padding-bottom: 4rem; } }

/* ---------- Sticky add to cart ---------- */
.sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: #fff; border-top: .1rem solid rgb(var(--color-border));
  padding: .8rem var(--page-pad); display: grid; grid-template-columns: 4.8rem 1fr auto; gap: 1rem; align-items: center;
  transform: translateY(110%); transition: transform .25s ease;
}
.sticky-atc.is-visible { transform: none; }
.sticky-atc img { width: 4.8rem; height: 4.8rem; object-fit: cover; }
.sticky-atc__title { font-size: 1.3rem; font-weight: 700; margin: 0; line-height: 1.2; }
.sticky-atc__price { font-size: 1.3rem; margin: 0; }
.sticky-atc .btn { width: auto; min-height: 4.4rem; padding: 0 1.6rem; font-size: 1.3rem; }
@media (min-width: 990px) { .sticky-atc { display: none; } }

/* ---------- Cookie banner ---------- */
.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; background: #fff; border: .1rem solid rgb(var(--color-border));
  box-shadow: 0 .4rem 2rem rgba(0,0,0,.12); padding: 1.6rem; font-size: 1.3rem; display: none;
}
.cookie.is-visible { display: block; }
.cookie p { margin-bottom: 1.2rem; }
.cookie__actions { display: flex; gap: .6rem; }
.cookie__actions .btn { min-height: 4rem; font-size: 1.3rem; }
@media (min-width: 750px) { .cookie { left: auto; max-width: 42rem; } }

/* ---------- Simple pages (legal, success) ---------- */
.page { padding: 3rem 0 5rem; max-width: 80rem; }
.page h1 { font-size: 2.8rem; margin-bottom: 2rem; }
.page h2 { font-size: 1.9rem; margin: 2.6rem 0 1rem; }
.page p, .page li { font-size: 1.5rem; }
.success { text-align: center; padding: 6rem var(--page-pad); }
.success h1 { font-size: 3rem; }
.success .check { width: 6.4rem; height: 6.4rem; margin: 0 auto 2rem; }
.form-row { display: grid; gap: 1.2rem; margin-bottom: 1.2rem; }
.form-row input, .form-row textarea { width: 100%; padding: 1.2rem; border: .1rem solid rgb(var(--color-text)); font: inherit; }

/* ---------- Payment icons (official brand assets in assets/payment-logos/) ---------- */
.pay-icons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; }
.pay-icons img { height: 2.4rem; width: auto; border: .1rem solid rgb(var(--color-border)); border-radius: .4rem; padding: .3rem .5rem; background: #fff; }
@media (min-width: 750px) { .pay-icons img { height: 2.8rem; padding: .3rem .6rem; } }
.pay-icons__txt { font-size: 1.2rem; font-weight: 700; border: .1rem solid rgb(var(--color-border)); border-radius: .4rem; padding: .5rem .8rem; }
.trust-img__note { text-align: center; font-size: 1.2rem; color: rgb(var(--color-muted)); margin: 1rem 0 0; }
.footer .payments { margin: 2.4rem 0 1.6rem; }
.footer .pay-icons { justify-content: flex-start; }
.logo img { height: 3.4rem; width: auto; }
@media (min-width: 990px) { .logo img { height: 4.2rem; } }

/* ---------- v3: announcement badge, rating, bundles, fomo, testimonials, cards ---------- */
.announcement__badge { display: inline-block; border: .15rem solid #fff; padding: .1rem .8rem; margin-right: .8rem; font-weight: 700; }

.rating { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; font-size: 1.3rem; color: rgb(var(--color-muted)); }
.stars { position: relative; display: inline-block; font-size: 1.7rem; line-height: 1; letter-spacing: .1em; color: #ddd; }
.stars::before, .stars::after { content: "★★★★★"; }
.stars::after { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #f5a623; width: calc(var(--rating, 5) / 5 * 100%); }

.bundles { border: 0; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 1rem; }
.bundle { position: relative; display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: 1.2rem; padding: 1.4rem 1.4rem; border: .1rem solid rgb(var(--color-border)); border-radius: .8rem; cursor: pointer; background: #fff; }
.bundle.is-selected { border: .2rem solid rgb(var(--color-text)); padding: 1.3rem; }
.bundle input { position: absolute; opacity: 0; pointer-events: none; }
.bundle__radio { width: 2rem; height: 2rem; border-radius: 50%; border: .15rem solid rgb(var(--color-text)); display: grid; place-items: center; }
.bundle.is-selected .bundle__radio::after { content: ""; width: 1rem; height: 1rem; border-radius: 50%; background: rgb(var(--color-text)); }
.bundle__text { display: flex; flex-direction: column; line-height: 1.3; }
.bundle__text strong { font-size: 1.5rem; }
.bundle__text small { font-size: 1.2rem; color: #2a6fd6; margin-top: .2rem; }
.bundle__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.bundle__price strong { font-size: 1.6rem; }
.bundle__price s { font-size: 1.2rem; color: rgb(var(--color-sale)); }
.bundle__badge { position: absolute; top: -1rem; right: 1.2rem; background: rgb(var(--color-text)); color: #fff; font-size: 1.1rem; font-weight: 700; padding: .3rem .8rem; border-radius: .4rem; }

.fomo { margin: 0 0 1.4rem; border: .1rem solid rgb(var(--color-border)); border-radius: 1rem; background: #fff; overflow: hidden; }
.fomo__row { display: flex; gap: 1.2rem; align-items: center; padding: 1.2rem 1.4rem; }
.fomo__row + .fomo__row { border-top: .1rem solid rgb(var(--color-border)); }
.fomo__icon { flex: none; width: 3.8rem; height: 3.8rem; border-radius: 50%; background: #f2f2f2; color: rgb(var(--color-text)); display: grid; place-items: center; }
.fomo__icon svg { width: 2rem; height: 2rem; }
.fomo__icon--pulse { animation: fomopulse 2s ease-in-out infinite; }
@keyframes fomopulse { 0%,100% { box-shadow: 0 0 0 0 rgba(200,0,0,.25); } 50% { box-shadow: 0 0 0 .7rem rgba(200,0,0,0); } }
.fomo__body { flex: 1; min-width: 0; }
.fomo__label { margin: 0; font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; }
.fomo__value { margin: .2rem 0 .6rem; font-size: 1.6rem; }
.fomo__value strong { color: rgb(var(--color-sale)); font-size: 1.9rem; }
.fomo__bar { height: .6rem; background: #ececec; border-radius: 99px; overflow: hidden; }
.fomo__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c80000, #ff5a3c); border-radius: 99px; transition: width 1s ease-out; }
.fomo__clock { display: flex; gap: .6rem; margin-top: .5rem; }
.fomo__seg { display: flex; flex-direction: column; align-items: center; min-width: 4.6rem; padding: .5rem .4rem .4rem; background: rgb(var(--color-text)); color: #fff; border-radius: .6rem; }
.fomo__seg b { font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.fomo__seg i { font-style: normal; font-size: 1rem; letter-spacing: .06em; opacity: .75; margin-top: .3rem; }
@media (prefers-reduced-motion: reduce) { .fomo__icon--pulse { animation: none; } }

.btn__icon { width: 1.8rem; height: 1.8rem; margin-right: .8rem; }
.more-details { display: inline-block; margin-top: 1rem; font-size: 1.4rem; text-decoration: none; border-bottom: .1rem solid currentColor; }

.testimonials { padding: 3rem 0 1rem; text-align: center; }
.testimonials__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 2rem; }
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonial { flex: 0 0 100%; scroll-snap-align: center; max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
.testimonial img { width: 7.6rem; height: 7.6rem; border-radius: 50%; object-fit: cover; margin: 0 auto 1.2rem; border: .2rem solid #fff; box-shadow: 0 0 0 .1rem rgb(var(--color-border)); }
.testimonial__name { font-weight: 700; margin: 0; }
.testimonial__city { font-size: 1.2rem; color: rgb(var(--color-muted)); margin: 0 0 .4rem; }
.testimonial__verified { font-size: 1.2rem; color: #c47a12; display: block; margin-bottom: .4rem; }
.testimonial .review__stars { margin-bottom: 1rem; }
.testimonial__text { font-size: 1.4rem; margin: 0; }
.testimonials__dots { display: flex; justify-content: center; gap: .6rem; margin-top: 1.6rem; }
.testimonials__dots button { width: .7rem; height: .7rem; border-radius: 50%; border: 0; padding: 0; background: rgba(var(--color-text), .25); }
.testimonials__dots button[aria-current="true"] { background: rgb(var(--color-text)); }
@media (min-width: 990px) { .testimonials { padding: 5rem 0 2rem; } .testimonials__track { justify-content: center; } .testimonial { flex-basis: 46rem; } }


/* ---------- v4: gallery arrows, testimonial cards ---------- */
.gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 4rem; height: 4rem; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.72); color: rgb(var(--color-text)); display: grid; place-items: center; box-shadow: 0 .1rem .6rem rgba(0,0,0,.15); z-index: 2; }
.gallery__arrow svg { width: 2rem; height: 2rem; }
.gallery__arrow--prev { left: 1.2rem; }
.gallery__arrow--next { right: 1.2rem; }
@media (min-width: 990px) { .gallery__arrow { width: 4.4rem; height: 4.4rem; background: rgba(255,255,255,.85); } }

.testimonial { border: .1rem solid rgb(var(--color-border)); border-radius: 1rem; padding: 2.4rem 2rem 2rem; background: #fff; box-shadow: 0 .2rem 1.2rem rgba(0,0,0,.05); }
.testimonials__track { padding: .6rem .4rem 1rem; }
@media (min-width: 990px) { .testimonial { padding: 3rem 2.8rem 2.6rem; } }
.testimonial__avatar-fallback { display: block; width: 7.6rem; height: 7.6rem; border-radius: 50%; background: #e6e6e6; margin: 0 auto 1.2rem; }

/* ---------- Track order ---------- */
.track { display: grid; gap: 2.4rem; border: .1rem solid rgb(var(--color-border)); border-radius: 1rem; padding: 2.4rem 2rem; margin: 2.4rem 0; }
.track__col h2 { margin: 0 0 1.2rem; font-size: 1.8rem; }
.track__col label { display: block; font-size: 1.3rem; margin: 1rem 0 .4rem; }
.track__col input, .track__col select { width: 100%; padding: 1.2rem; border: .1rem solid rgb(var(--color-border)); border-radius: .6rem; font: inherit; font-size: 1.5rem; background: #fff; }
.track__col .btn { max-width: 18rem; margin-top: 1.6rem; border-radius: .6rem; }
.track__hint { font-size: 1.2rem; color: rgb(var(--color-muted)); margin: 1.2rem 0 0; }
.track__or { display: flex; align-items: center; justify-content: center; color: rgb(var(--color-muted)); font-size: 1.4rem; }
.order-no { font-size: 1.6rem; margin: 0 0 1.6rem; }
@media (min-width: 750px) { .track { grid-template-columns: 1fr auto 1fr; gap: 3rem; padding: 3.2rem; } .track__or { border-left: .1rem dashed rgb(var(--color-border)); padding: 0 .6rem; } }

/* ---------- v8: phone order, trust tiles, BNPL ---------- */
.phone-order { display: flex; align-items: center; gap: 1.2rem; margin: 1.6rem 0 1.4rem; padding: 1rem 1.6rem; min-height: 5.6rem; border: .15rem solid #1f3b8f; border-radius: .6rem; text-decoration: none; color: inherit; background: #fff; }
.phone-order__icon { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; flex: none; animation: ring 2.4s ease-in-out infinite; transform-origin: 50% 60%; }
.phone-order__icon svg { width: 2.2rem; height: 2.2rem; }
.phone-order__text { display: flex; flex-direction: column; line-height: 1.2; }
.phone-order__text small { font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--color-text)); font-weight: 600; }
.phone-order__text strong { font-size: 1.9rem; letter-spacing: .06em; font-weight: 800; }
@keyframes ring {
  0%, 60%, 100% { transform: rotate(0); }
  62% { transform: rotate(-14deg); } 66% { transform: rotate(14deg); } 70% { transform: rotate(-12deg); }
  74% { transform: rotate(12deg); } 78% { transform: rotate(-8deg); } 82% { transform: rotate(8deg); } 86% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .phone-order__icon { animation: none; } }

.trust-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1.2rem; }
.trust-tile { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: .1rem solid rgb(var(--color-border)); border-left-width: .4rem; border-radius: .6rem; background: #fff; }
.trust-tile--green { border-left-color: #1a8f3c; } .trust-tile--yellow { border-left-color: #f5c400; }
.trust-tile--black { border-left-color: rgb(var(--color-text)); } .trust-tile--blue { border-left-color: #2a6fd6; }
.trust-tile__icon { font-size: 1.8rem; flex: none; }
.trust-tile strong { display: block; font-size: 1.3rem; line-height: 1.2; }
.trust-tile small { display: block; font-size: 1.1rem; color: rgb(var(--color-muted)); line-height: 1.2; }

.bnpl { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.4rem; border: .1rem solid #f7c7d0; background: #fdf1f4; border-radius: .8rem; margin: 0 0 1.6rem; }
.bnpl img { height: 2.2rem; width: auto; flex: none; }
.bnpl__logo-txt { font-weight: 800; background: #ffb3c7; color: #17120f; padding: .4rem .9rem; border-radius: 99px; font-size: 1.3rem; flex: none; }
.bnpl strong { display: block; font-size: 1.4rem; }
.bnpl small { display: block; font-size: 1.2rem; color: rgb(var(--color-muted)); }

/* ---------- v11: desktop layout ---------- */
@media (min-width: 990px) {
  .product { padding: 3rem 0 6rem; }
  .product__grid { grid-template-columns: 58% 1fr; gap: 6rem; align-items: start; }
  /* gallery pinned, info scrolls (Dawn behaviour) */
  .product__info { position: static; }
  .gallery { position: sticky; top: 9.6rem; display: flex; flex-direction: column; }
  .gallery__viewport { order: 0; }
  .gallery__thumbs { order: 1; }
  .gallery__thumbs { display: flex; flex-direction: row; gap: 1rem; margin-top: 1.2rem; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: .4rem; }
  .gallery__thumb { flex: 0 0 8rem; width: 8rem; }
  .gallery__slide { border-radius: .6rem; overflow: hidden; }
  /* three whole testimonial cards per view */
  .testimonials__track { justify-content: flex-start; gap: 2.4rem; padding: .6rem .2rem 1rem; scroll-padding: 0 .2rem; }
  .testimonial { flex: 0 0 calc((100% - 4.8rem) / 3); max-width: none; margin: 0; scroll-snap-align: start; }
  /* features: give the text column breathing room */
  .feature .page-width { gap: 7rem; }
  .feature__text { padding: 0 2rem; }
  .feature img { border-radius: .8rem; }
  /* reviews grid + FAQ widths */
  .reviews__grid { gap: 2.4rem; }
  .review { border-radius: .8rem; overflow: hidden; }
  .newsletter { margin-top: 5rem; }
}
@media (min-width: 1400px) {
  :root { --page-width: 130rem; }
}

/* ---------- Pay-after-delivery: button + modal ---------- */
.btn--cod { margin-top: 1rem; }
.cod-note { font-size: 1.2rem; color: rgb(var(--color-muted)); margin: .6rem 0 0; text-align: center; }
.modal { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.modal[aria-hidden="false"] { visibility: visible; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; }
.modal[aria-hidden="false"] .modal__overlay { opacity: 1; }
.modal__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 1.4rem 1.4rem 0 0; padding: 2rem 2rem 3rem; transform: translateY(100%); transition: transform .25s ease; -webkit-overflow-scrolling: touch; }
.modal[aria-hidden="false"] .modal__panel { transform: none; }
.modal__close { position: absolute; top: .8rem; right: .8rem; }
.modal__panel h2 { font-size: 2rem; margin: .4rem 4rem 1rem 0; }
.modal__lead { font-size: 1.4rem; color: rgba(var(--color-text), .85); margin-bottom: 1.6rem; }
.field { display: block; margin-bottom: 1.2rem; }
.field span { display: block; font-size: 1.3rem; margin-bottom: .4rem; }
.field input, .field select { width: 100%; padding: 1.3rem 1.2rem; border: .1rem solid rgb(var(--color-border)); border-radius: .6rem; font: inherit; font-size: 1.6rem; background: #fff; }
.field input:focus, .field select:focus { border-color: rgb(var(--color-text)); outline: none; }
.field-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1rem; }
.check { display: flex; gap: .8rem; align-items: flex-start; font-size: 1.3rem; margin: .4rem 0 1.4rem; }
.check input { width: 2rem; height: 2rem; margin-top: .2rem; flex: none; }
.modal__error { color: rgb(var(--color-sale)); font-size: 1.3rem; margin: 0 0 1rem; }
.modal__small { text-align: center; font-size: 1.2rem; color: rgb(var(--color-muted)); margin: 1.2rem 0 0; }
@media (min-width: 750px) { .modal__panel { left: 50%; right: auto; top: 50%; bottom: auto; width: 56rem; max-height: 90vh; transform: translate(-50%, -50%) scale(.98); border-radius: 1.2rem; padding: 2.8rem; } .modal[aria-hidden="false"] .modal__panel { transform: translate(-50%, -50%); } }

/* ---------- Easy order box – compact, expands on tap ---------- */
.easyorder { margin: 1.6rem 0 1.4rem; border: .15rem solid #1a8f3c; border-radius: 1rem; background: #f6fbf7; overflow: hidden; }
.easyorder__head { list-style: none; display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.4rem; cursor: pointer; }
.easyorder__head::-webkit-details-marker { display: none; }
.easyorder__icon { flex: none; width: 4rem; height: 4rem; border-radius: 50%; background: #1a8f3c; color: #fff; display: grid; place-items: center; animation: ring 3s ease-in-out infinite; transform-origin: 50% 60%; }
.easyorder__icon svg { width: 2.2rem; height: 2.2rem; }
.easyorder__headtext { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.easyorder__headtext strong { font-size: 1.6rem; }
.easyorder__headtext small { font-size: 1.3rem; color: #2f4a38; }
.easyorder__chev { flex: none; width: 2.4rem; height: 2.4rem; color: #1a8f3c; transition: transform .2s; }
.easyorder__chev svg { width: 100%; height: 100%; }
.easyorder[open] .easyorder__chev { transform: rotate(180deg); }
.easyorder__form { padding: .4rem 1.4rem 1.6rem; border-top: .1rem solid #cfe4d6; }
.easyorder__field { display: block; margin: 1rem 0; }
.easyorder__field span { display: block; font-size: 1.45rem; font-weight: 600; margin-bottom: .4rem; }
.easyorder__field input { width: 100%; font: inherit; font-size: 1.7rem; padding: 1.2rem 1.2rem; border: .15rem solid #b9d9c3; border-radius: .8rem; background: #fff; }
.easyorder__field input:focus { border-color: #1a8f3c; outline: none; box-shadow: 0 0 0 .3rem rgba(26,143,60,.18); }
.easyorder__row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem; }
.easyorder__bundle { font-size: 1.4rem; margin: .4rem 0 1.2rem; }
.easyorder__btn { width: 100%; min-height: 5.6rem; border: 0; border-radius: .9rem; background: #1a8f3c; color: #fff; font-size: 1.9rem; font-weight: 700; letter-spacing: .06em; cursor: pointer; box-shadow: 0 .3rem 0 #13692c; }
.easyorder__btn:active { transform: translateY(.2rem); box-shadow: 0 .1rem 0 #13692c; }
.easyorder__btn[disabled] { opacity: .7; cursor: progress; }
.easyorder__note { font-size: 1.25rem; color: rgb(var(--color-muted)); text-align: center; margin: 1rem 0 0; }
.easyorder__error { color: rgb(var(--color-sale)); font-size: 1.4rem; font-weight: 600; margin: 0 0 1rem; }
@media (prefers-reduced-motion: reduce) { .easyorder__icon { animation: none; } }

/* ---------- Benefits list (replaces emoji bullets) ---------- */
.benefits { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .8rem; }
.benefit { display: flex; gap: 1.2rem; align-items: center; padding: 1.1rem 1.3rem; border: .1rem solid #dfe6e2; border-radius: .9rem; background: #f6f9f7; }
.benefit__icon { flex: none; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #fff; border: .1rem solid #cfe0d5; color: #1a8f3c; display: grid; place-items: center; }
.benefit__icon svg { width: 1.9rem; height: 1.9rem; }
.benefit strong { display: block; font-size: 1.55rem; line-height: 1.25; }
.benefit small { display: block; font-size: 1.3rem; color: #4d5a52; line-height: 1.3; margin-top: .15rem; }
@media (min-width: 990px) { .benefits { grid-template-columns: 1fr 1fr; } }

/* ---------- v18: minimal (Ankole-style) – bundles are the only accent ---------- */
.benefits { gap: .5rem; margin-bottom: 1.8rem; }
.benefit { padding: 0; border: 0; background: transparent; gap: .9rem; font-size: 1.5rem; line-height: 1.35; color: rgba(var(--color-text), .85); }
.benefit__icon { width: 2.6rem; height: 2.6rem; border: 0; background: transparent; color: #1a8f3c; }
.benefit__icon svg { width: 1.9rem; height: 1.9rem; }
.benefit strong { display: inline; font-size: 1.5rem; color: rgb(var(--color-text)); }
@media (min-width: 990px) { .benefits { grid-template-columns: 1fr; } }

.bundles { gap: .9rem; margin-bottom: 1rem; }
.bundle { border: .1rem solid #d9d9d9; border-radius: .8rem; padding: 1.5rem 1.6rem; background: #fff; box-shadow: none; }
.bundle.is-selected { border: .2rem solid rgb(var(--color-text)); background: #f4f4f4; padding: 1.4rem 1.5rem; }
.bundle__text strong { font-size: 1.6rem; }
.bundle__text small { color: rgb(var(--color-muted)); }
.bundle__price strong { font-size: 1.7rem; }
.bundle__badge { background: rgb(var(--color-text)); }

.fomo-line { font-size: 1.3rem; color: rgb(var(--color-muted)); margin: 0 0 1.4rem; }
.fomo-line strong { color: rgb(var(--color-text)); font-weight: 700; }
.fomo-line [data-stock] strong { color: rgb(var(--color-sale)); }

.trust-tile { border-left-width: .3rem; padding: .9rem 1.1rem; }
.trust-tile__icon { font-size: 1.6rem; }

/* ---------- Poppins tuning (wider glyphs than Assistant) ---------- */
body { letter-spacing: 0; }
h1, h2, h3 { letter-spacing: -.01em; font-weight: 700; }
.product__title { font-size: 2.4rem; }
@media (min-width: 990px) { .product__title { font-size: 3.1rem; } }
.btn { letter-spacing: .02em; font-weight: 600; }
.announcement { letter-spacing: .06em; font-weight: 600; }
.bundle__text strong { font-weight: 600; }
.price__sale { font-weight: 700; }
.easyorder__btn { letter-spacing: .06em; font-weight: 700; }
.header__nav a { letter-spacing: 0; }
.logo { letter-spacing: .2em; }

/* ---------- Easy order: always open, compact ---------- */
.easyorder--static .easyorder__head { pointer-events: none; padding: 1rem 1.2rem .6rem; gap: 1rem; }
.easyorder--static .easyorder__icon { width: 3.4rem; height: 3.4rem; }
.easyorder--static .easyorder__icon svg { width: 1.9rem; height: 1.9rem; }
.easyorder--static .easyorder__headtext strong { font-size: 1.5rem; }
.easyorder--static .easyorder__headtext small { font-size: 1.25rem; }
.easyorder--static .easyorder__form { border-top: 0; padding: 0 1.2rem 1.2rem; }
.easyorder--static .easyorder__field { margin: .7rem 0; }
.easyorder--static .easyorder__field span { font-size: 1.35rem; margin-bottom: .3rem; }
.easyorder--static .easyorder__field input { font-size: 1.6rem; padding: 1rem 1.1rem; }
.easyorder--static .easyorder__row { gap: .8rem; }
.easyorder--static .easyorder__bundle { font-size: 1.3rem; margin: .3rem 0 .9rem; }
.easyorder--static .easyorder__btn { min-height: 5rem; font-size: 1.7rem; }
.easyorder--static .easyorder__note { font-size: 1.15rem; margin-top: .8rem; }

/* ---------- Post-purchase upsell (dziekujemy.html) ---------- */
.upsell { max-width: 46rem; margin: 3rem auto 0; padding: 2.4rem 2rem; border: .2rem solid #1a8f3c; border-radius: 1.2rem; background: #f6fbf7; text-align: center; }
.upsell__eyebrow { font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase; color: #1a8f3c; font-weight: 700; margin: 0 0 .6rem; }
.upsell__title { font-size: 2.2rem; margin: 0 0 1.2rem; }
.upsell__title s { color: rgb(var(--color-muted)); font-weight: 400; font-size: 1.6rem; }
.upsell__img { width: 18rem; height: 18rem; object-fit: cover; margin: 0 auto 1rem; border-radius: 1rem; }
.upsell__text { font-size: 1.5rem; margin: 0 0 1.6rem; }
.upsell__btn { background: #1a8f3c; border-color: #1a8f3c; min-height: 5.6rem; font-size: 1.7rem; }
.upsell__small { font-size: 1.2rem; color: rgb(var(--color-muted)); margin: .8rem 0 1.2rem; }
.upsell__no { background: none; border: 0; color: rgb(var(--color-muted)); text-decoration: underline; font-size: 1.4rem; cursor: pointer; }
.upsell__done { font-size: 1.6rem; font-weight: 700; color: #1a8f3c; margin: 1rem 0 0; }
.upsell__bonus { display: inline-block; font-size: 1.3rem; font-weight: 700; color: #1a8f3c; background: #e6f4ea; border-radius: 99px; padding: .4rem 1.2rem; margin: 0 0 1.4rem; }

/* ---------- Klarna-first inside the easy order box ---------- */
.easyorder__klarna { padding: .2rem 1.2rem 1rem; }
.klarna-btn { width: 100%; min-height: 5.4rem; border: 0; border-radius: .9rem; background: #ffb3c7; color: #17120f; font-size: 1.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 1rem; cursor: pointer; box-shadow: 0 .3rem 0 #e0899f; }
.klarna-btn:active { transform: translateY(.2rem); box-shadow: 0 .1rem 0 #e0899f; }
.klarna-btn[disabled] { opacity: .8; cursor: progress; }
.klarna-btn__pill { background: #17120f; color: #ffb3c7; border-radius: 99px; padding: .3rem .9rem; font-size: 1.3rem; font-weight: 800; }
.easyorder__klarnanote { font-size: 1.3rem; color: #2f4a38; margin: .8rem 0 .8rem; line-height: 1.4; }
.easyorder__fallback summary { list-style: none; cursor: pointer; font-size: 1.35rem; color: #1a8f3c; text-decoration: underline; padding: .4rem 0; }
.easyorder__fallback summary::-webkit-details-marker { display: none; }
.easyorder__form--fallback { border-top: .1rem solid #cfe4d6; }

/* ---------- Popup ---------- */
.popup { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.popup[aria-hidden="false"] { visibility: visible; }
.popup__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .25s; }
.popup[aria-hidden="false"] .popup__overlay { opacity: 1; }
.popup__card { position: absolute; left: 50%; top: 50%; width: min(88vw, 40rem); transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: transform .25s ease, opacity .25s; background: #fff; border-radius: 1.6rem; padding: 1.4rem 1.6rem 1.6rem; text-align: center; box-shadow: 0 2rem 6rem rgba(0,0,0,.25); }
.popup[aria-hidden="false"] .popup__card { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.popup__x { position: absolute; top: .8rem; right: .8rem; width: 4rem; height: 4rem; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 .2rem .8rem rgba(0,0,0,.15); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.popup__x svg { width: 2rem; height: 2rem; }
.popup__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; margin-bottom: 1.2rem; }
.popup__title { font-size: 2.1rem; line-height: 1.2; margin: 0 0 1.4rem; }
.popup__btn { width: 100%; min-height: 6rem; border: 0; border-radius: 1rem; background: #1a8f3c; color: #fff; font-size: 1.9rem; font-weight: 800; letter-spacing: .04em; cursor: pointer; box-shadow: 0 .4rem 0 #13692c; }
.popup__btn:active { transform: translateY(.3rem); box-shadow: 0 .1rem 0 #13692c; }
.popup__sub { font-size: 1.2rem; color: rgb(var(--color-muted)); margin: 1rem 0 .8rem; line-height: 1.4; }
.popup__later { background: none; border: 0; color: rgb(var(--color-muted)); text-decoration: underline; font-size: 1.4rem; cursor: pointer; padding: .4rem; }
@media (prefers-reduced-motion: reduce) { .popup__card, .popup__overlay { transition: none; } }

/* ---------- Popup v2: wider, full-bleed image, pulsing button ---------- */
.popup__card { width: min(94vw, 46rem); padding: 0 0 1.6rem; overflow: hidden; }
.popup__img { border-radius: 1.6rem 1.6rem 0 0; margin: 0 0 1.4rem; aspect-ratio: 4 / 3; }
.popup__title { padding: 0 1.6rem; font-size: 2.2rem; }
.popup__btn { width: calc(100% - 3.2rem); margin: 0 1.6rem; animation: popbtn 1.8s ease-in-out infinite; }
@keyframes popbtn { 0%,100% { transform: scale(1); box-shadow: 0 .4rem 0 #13692c, 0 0 0 0 rgba(26,143,60,.45); } 50% { transform: scale(1.03); box-shadow: 0 .4rem 0 #13692c, 0 0 0 1rem rgba(26,143,60,0); } }
.popup__btn:active { animation: none; }
.popup__sub, .popup__later { padding-left: 1.6rem; padding-right: 1.6rem; }
@media (prefers-reduced-motion: reduce) { .popup__btn { animation: none; } }

/* ---------- Popup v3: square image box, full image visible ---------- */
.popup__img { aspect-ratio: 1 / 1; max-height: 52vh; object-fit: contain; background: #f4f4f4; }

/* ===================== v28: ZAMÓW TERAZ (index) + checkout na stronie (zamowienie.html) ===================== */
.price-free { font-size: 1.5rem; margin: 0 0 1.2rem; color: rgb(var(--color-muted)); }
.price-free strong { color: rgb(var(--color-text)); }
.btn--order { min-height: 5.8rem; font-size: 1.8rem; font-weight: 700; letter-spacing: .1em; gap: 1rem; }
.btn__icon--right { width: 2.2rem; height: 2.2rem; }
.order-note { font-size: 1.3rem; color: rgb(var(--color-muted)); margin: .8rem 0 0; line-height: 1.45; }
.sticky-atc .btn { white-space: nowrap; padding: 1.2rem 1.6rem; }

.co-body { background: #f6f6f6; }
.co-header { background: #fff; border-bottom: .1rem solid rgb(var(--color-border)); }
.co-logo { display: flex; justify-content: center; padding: 1.2rem 0 .8rem; }
.co-logo img { width: 11rem; height: auto; }
.co-marquee { overflow: hidden; background: rgb(var(--color-text)); color: #fff; font-size: 1.25rem; font-weight: 600; letter-spacing: .02em; }
.co-marquee__track { display: flex; gap: 3.2rem; width: max-content; padding: .7rem 0; animation: co-marquee 28s linear infinite; }
.co-marquee__track span { white-space: nowrap; }
@keyframes co-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .co-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .co-marquee__track span:nth-child(n+5) { display: none; } }

.co-main { max-width: 60rem; margin: 0 auto; padding: 1.6rem var(--page-pad) 4rem; }
.co-reserved { text-align: center; background: #fff; border: .2rem dashed rgb(var(--color-text)); border-radius: 1rem; padding: 1.4rem 1.2rem; margin: 0 0 1.6rem; }
.co-reserved__title { margin: 0; font-size: 1.2rem; letter-spacing: .14em; font-weight: 600; color: rgb(var(--color-muted)); }
.co-reserved__badge { margin: .4rem 0 0; font-size: 2rem; font-weight: 700; line-height: 1.2; }
.co-reserved__timer { margin: .6rem 0 0; font-size: 1.3rem; color: rgb(var(--color-sale)); }

.co-step { background: #fff; border: .1rem solid rgb(var(--color-border)); border-radius: 1rem; padding: 1.8rem 1.6rem; margin: 0 0 1.4rem; }
.co-step__title { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; font-size: 1.8rem; font-weight: 700; }
.co-step__no { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgb(var(--color-text)); color: #fff; font-size: 1.5rem; font-weight: 700; flex: none; }

.co-tiers { display: grid; gap: 1rem; }
.co-tier { position: relative; display: grid; grid-template-columns: 2.2rem 6.4rem 1fr auto; align-items: center; gap: 1.2rem; padding: 1.4rem 1.2rem; border: .15rem solid #d9d9d9; border-radius: 1rem; cursor: pointer; background: #fff; }
.co-tier.is-selected { border-color: rgb(var(--color-text)); background: #f4f4f4; box-shadow: 0 0 0 .1rem rgb(var(--color-text)); }
.co-tier input { position: absolute; opacity: 0; pointer-events: none; }
.co-tier__radio { width: 2rem; height: 2rem; border-radius: 50%; border: .15rem solid rgb(var(--color-text)); display: grid; place-items: center; }
.co-tier.is-selected .co-tier__radio::after { content: ""; width: 1rem; height: 1rem; border-radius: 50%; background: rgb(var(--color-text)); }
.co-tier__img img { width: 6.4rem; height: 6.4rem; object-fit: cover; border-radius: .8rem; display: block; }
.co-tier__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.co-tier__text strong { font-size: 1.6rem; line-height: 1.2; }
.co-tier__text small { font-size: 1.2rem; color: rgb(var(--color-muted)); line-height: 1.3; }
.co-tier__badge { align-self: flex-start; background: rgb(var(--color-text)); color: #fff; font-size: 1.05rem; font-weight: 700; padding: .25rem .7rem; border-radius: .4rem; margin-bottom: .3rem; white-space: nowrap; }
.co-tier__badge--grey { background: #e6e6e6; color: rgb(var(--color-text)); }
.co-tier__badge--green { background: #1a8f3c; }
.co-tier__price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.co-tier__price strong { font-size: 1.7rem; line-height: 1.1; }
.co-tier__price s { font-size: 1.2rem; color: rgb(var(--color-muted)); }
.co-tier__price em { font-style: normal; font-size: 1.1rem; font-weight: 700; color: rgb(var(--color-sale)); }
.co-gift { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0 0; padding: 1rem 1.2rem; background: #effaf2; border: .1rem solid #bfe6c9; border-radius: .8rem; }
.co-gift__icon { font-size: 2.2rem; }
.co-gift strong { display: block; font-size: 1.35rem; line-height: 1.25; }
.co-gift small { display: block; font-size: 1.15rem; color: rgb(var(--color-muted)); }
.co-gift small b { color: #1a8f3c; }
.co-omnibus { font-size: 1.15rem; color: rgb(var(--color-muted)); margin: 1rem 0 0; }

.co-field { display: block; margin: 0 0 1.1rem; }
.co-field span { display: block; font-size: 1.35rem; font-weight: 600; margin-bottom: .4rem; }
.co-field input, .co-field select { width: 100%; font: inherit; font-size: 1.6rem; padding: 1.15rem 1.2rem; border: .15rem solid #d9d9d9; border-radius: .8rem; background: #fff; color: rgb(var(--color-text)); -webkit-appearance: none; appearance: none; }
.co-field select { background-image: linear-gradient(45deg, transparent 50%, #777 50%), linear-gradient(135deg, #777 50%, transparent 50%); background-position: calc(100% - 2rem) 50%, calc(100% - 1.4rem) 50%; background-size: .6rem .6rem; background-repeat: no-repeat; }
.co-field input:focus, .co-field select:focus { border-color: rgb(var(--color-text)); outline: none; box-shadow: 0 0 0 .3rem rgba(18,18,18,.12); }
.co-field input:user-invalid { border-color: rgb(var(--color-sale)); }
.co-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1rem; }
.co-row--half { grid-template-columns: 1fr 1fr; }
.co-shipping { display: flex; justify-content: space-between; margin: .4rem 0 0; font-size: 1.4rem; padding-top: 1rem; border-top: .1rem dashed rgb(var(--color-border)); }
.co-shipping strong { color: #1a8f3c; }
.co-hint { font-size: 1.2rem; color: rgb(var(--color-muted)); margin: -.4rem 0 0; }

.co-summary { background: #f6f6f6; border-radius: .8rem; padding: 1.2rem 1.4rem; margin: 0 0 1.4rem; font-size: 1.4rem; }
.co-summary p { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; }
.co-summary__total { margin: .6rem 0 0 !important; padding-top: .8rem; border-top: .1rem solid rgb(var(--color-border)); font-weight: 700; font-size: 1.7rem; }
.co-payment { min-height: 12rem; }
.co-payment__loading { font-size: 1.35rem; color: rgb(var(--color-muted)); text-align: center; padding: 3rem 0; }
.co-error { margin: 1rem 0 0; padding: 1rem 1.2rem; background: #fdecec; color: #8f1111; border: .1rem solid #f3b4b4; border-radius: .8rem; font-size: 1.4rem; }
.co-submit { width: 100%; margin-top: 1.4rem; min-height: 6rem; border: 0; border-radius: .9rem; background: #1a8f3c; color: #fff; font: inherit; font-size: 1.9rem; font-weight: 700; letter-spacing: .06em; cursor: pointer; box-shadow: 0 .3rem 0 #13692c; }
.co-submit:active { transform: translateY(.2rem); box-shadow: 0 .1rem 0 #13692c; }
.co-submit[disabled] { opacity: .7; cursor: progress; }
.co-terms { font-size: 1.2rem; color: rgb(var(--color-muted)); margin: 1rem 0 0; line-height: 1.45; text-align: center; }
.co-terms a { color: inherit; }
.co-ssl { text-align: center; margin: 1.4rem 0 0; font-size: 1.4rem; line-height: 1.4; }
.co-ssl small { color: rgb(var(--color-muted)); font-size: 1.2rem; }

.co-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: .4rem 0 1.6rem; }
.co-trust__tile { background: #fff; border: .1rem solid rgb(var(--color-border)); border-radius: .8rem; padding: 1.2rem .8rem; text-align: center; display: flex; flex-direction: column; gap: .3rem; }
.co-trust__tile span { font-size: 2.2rem; }
.co-trust__tile strong { font-size: 1.25rem; line-height: 1.2; }
.co-trust__tile small { font-size: 1.1rem; color: rgb(var(--color-muted)); line-height: 1.2; }
.co-payicons { justify-content: center; }

.co-footer { text-align: center; padding: 2.4rem var(--page-pad) 3rem; border-top: .1rem solid rgb(var(--color-border)); background: #fff; font-size: 1.2rem; color: rgb(var(--color-muted)); }
.co-footer img { width: 9rem; height: auto; margin-bottom: 1rem; }
.co-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; margin: 0 0 1rem; }
.co-footer nav a { color: rgb(var(--color-text)); text-decoration: none; }
.co-footer p { margin: 0; }

@media (max-width: 420px) {
  .co-tier { grid-template-columns: 2rem 5.2rem 1fr auto; gap: .8rem; padding: 1.2rem 1rem; }
  .co-tier__img img { width: 5.2rem; height: 5.2rem; }
  .co-tier__text strong { font-size: 1.5rem; }
  .co-tier__price strong { font-size: 1.55rem; }
  .co-tier__badge { font-size: .95rem; }
}
@media (min-width: 990px) {
  .co-main { max-width: 64rem; padding-top: 2.4rem; }
  .co-step { padding: 2.2rem 2.4rem; }
}

.co-gift[hidden], .co-reserved__timer[hidden], .co-error[hidden] { display: none; }

/* v29: liczba opasek na miniaturze zestawu */
.co-tier__img { position: relative; display: block; }
.co-tier__img b { position: absolute; right: -.4rem; bottom: -.4rem; min-width: 2.6rem; height: 2.6rem; padding: 0 .5rem; border-radius: 1.3rem; background: rgb(var(--color-text)); color: #fff; font-size: 1.15rem; font-weight: 700; display: grid; place-items: center; border: .2rem solid #fff; line-height: 1; }

/* v30: Apple Pay / Google Pay nad formularzem */
.co-express { margin: 0 0 1.2rem; }
.co-express__or { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0 0; font-size: 1.2rem; font-weight: 600; letter-spacing: .12em; color: rgb(var(--color-muted)); }
.co-express__or::before, .co-express__or::after { content: ""; flex: 1; height: .1rem; background: rgb(var(--color-border)); }
.co-express[hidden] { display: none; }

/* v31: układ jak u wzorca – ciemny nagłówek, pasek promo, dwie kolumny na desktopie, płaskie sekcje, lista z ptaszkami */
.co-header { background: #121212; border: 0; }
.co-logo { padding: 1rem 0; }
.co-logo img { width: 11rem; background: #fff; padding: .5rem .9rem; border: .2rem solid #fff; box-shadow: 0 0 0 .2rem #121212, 0 0 0 .35rem #fff; }
.co-promo { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .6rem 2rem; background: #2a2a2a; color: #fff; font-size: 1.3rem; padding: .7rem var(--page-pad); }
.co-promo__text b { background: #f5a623; color: #121212; font-weight: 700; padding: .15rem .6rem; border-radius: .3rem; margin-right: .4rem; }
.co-promo__timer strong { background: #fff; color: #121212; padding: .15rem .6rem; border-radius: .3rem; font-variant-numeric: tabular-nums; }
.co-body { background: #fff; }
.co-main { max-width: 100rem; padding-top: 2.4rem; }
.co-step { border: 0; border-radius: 0; padding: 0; margin: 0 0 2.6rem; background: transparent; }
.co-step__title { font-size: 1.7rem; margin: 0 0 1.2rem; }
.co-step__no { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
.co-field input, .co-field select { border-width: .1rem; border-radius: .4rem; font-size: 1.5rem; padding: 1.05rem 1.1rem; }
.co-field span { font-size: 1.3rem; }
.co-tier { border-radius: .6rem; }
.co-shipping { border-top: 0; border: .1rem solid rgb(var(--color-border)); border-radius: .4rem; padding: 1rem 1.1rem; margin: 0; font-size: 1.4rem; }
.co-express { margin-bottom: 1.6rem; }
.co-submit { border-radius: .6rem; min-height: 5.6rem; font-size: 1.7rem; }
.co-checks { list-style: none; margin: 1rem 0 2rem; padding: 0; border-top: .1rem solid rgb(var(--color-border)); max-width: 48rem; }
.co-checks li { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: .1rem solid rgb(var(--color-border)); font-size: 1.4rem; font-weight: 600; }
.co-checks li::before { content: "✓"; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: .15rem solid #1a8f3c; color: #1a8f3c; font-size: 1.2rem; flex: none; }
@media (min-width: 990px) {
  .co-main { max-width: 100rem; padding-top: 3.2rem; }
  .co-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5rem; align-items: start; }
  .co-step { padding: 0; }
  .co-checks { max-width: 47.5rem; }
}

/* v32: pasek "zniżka zarezerwowana" + własny wiersz Klarna */
.co-promo { flex-direction: column; gap: .2rem; background: #fff; color: rgb(var(--color-text)); border-bottom: .1rem solid rgb(var(--color-border)); padding: 1rem var(--page-pad); }
.co-promo__eyebrow { font-size: 1.15rem; letter-spacing: .14em; font-weight: 600; color: rgb(var(--color-muted)); }
.co-promo__text { font-size: 1.6rem; font-weight: 700; }
.co-promo__text b { background: #f5a623; color: #121212; }
.co-promo__timer { font-size: 1.3rem; color: rgb(var(--color-sale)); }
.co-promo__timer strong { background: rgb(var(--color-text)); color: #fff; }
.co-klarna { position: relative; display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 1.2rem; margin: 1rem 0 0; padding: 1.2rem 1.4rem; border: .1rem solid #d9d9d9; border-radius: .6rem; background: #fff; cursor: pointer; }
.co-klarna input { position: absolute; opacity: 0; pointer-events: none; }
.co-klarna__radio { width: 2rem; height: 2rem; border-radius: 50%; border: .15rem solid #b5b5b5; display: grid; place-items: center; }
.co-klarna.is-selected { border-color: rgb(var(--color-text)); box-shadow: 0 0 0 .1rem rgb(var(--color-text)); background: #f7f7f7; }
.co-klarna.is-selected .co-klarna__radio { border-color: rgb(var(--color-text)); }
.co-klarna.is-selected .co-klarna__radio::after { content: ""; width: 1rem; height: 1rem; border-radius: 50%; background: rgb(var(--color-text)); }
.co-klarna__text strong { display: block; font-size: 1.5rem; line-height: 1.2; }
.co-klarna__text small { display: block; font-size: 1.2rem; color: rgb(var(--color-muted)); }
.co-klarna__logo img { height: 2.4rem; width: auto; display: block; }
.co-klarna__logo b { background: #ffb3c7; color: #121212; font-size: 1.3rem; padding: .3rem .7rem; border-radius: .4rem; }
.co-payment.is-collapsed { opacity: .45; }

/* v33: przycisk BLIK pod Apple/Google Pay */
.co-blikbtn { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; min-height: 5rem; margin: .8rem 0 0; border: 0; border-radius: .6rem; background: #121212; color: #fff; font: inherit; font-size: 1.7rem; font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.co-blikbtn img { height: 2.4rem; width: auto; background: #fff; border-radius: .3rem; padding: .2rem .5rem; }
.co-blikbtn:hover { background: #000; }
.co-express { margin-bottom: 0; }
.co-express__or { margin: 1.2rem 0; }
.co-payment.is-flash { animation: co-flash 1.2s ease; }
@keyframes co-flash { 0% { box-shadow: 0 0 0 .3rem rgba(18,18,18,.35); } 100% { box-shadow: none; } }