/* ==========================================================
   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: "Assistant", -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.2rem; font-size: 1.3rem; }
.fomo p { margin: 0 0 .4rem; }
.fomo__stock strong { color: rgb(var(--color-sale)); }
.fomo__timer strong { font-variant-numeric: tabular-nums; }

.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; }
}

/* ANPC – pictograme SAL / SOL (obligatorii în România) */
.anpc { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; align-items: center; margin: 2.4rem 0 1.6rem; }
.anpc a { display: inline-block; line-height: 0; }
.anpc img { width: 250px; max-width: 100%; height: auto; border-radius: 6px; }
.anpc__txt { display: inline-block; line-height: 1.3; font-size: 1.3rem; font-weight: 600; padding: 1rem 1.4rem; border: 1px solid currentColor; border-radius: 6px; }
.reviews__title { text-align: center; margin: 0 0 .8rem; }
.reviews__intro { text-align: center; max-width: 64rem; margin: 0 auto 2.8rem; font-size: 1.4rem; opacity: .75; }