.oto-page {
  font-family: "Poppins", "Inter", sans-serif;
}

.oto-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

.oto-page .announcement {
  background: #acf4a1;
  color: #000;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}

.oto-page .announcement strong {
  font-weight: 700;
}

.oto-page .announcement__text {
  font-weight: 400;
  color: #000;
  text-transform: none;
  letter-spacing: 0;
}

.oto-page .upsell-header-bar__step--active .upsell-header-bar__step-label {
  font-weight: 700;
  color: #000;
}

.oto-page .upsell-header-bar__logo .wr-brand__mark img {
  width: 100%;
  height: auto;
  max-height: none;
}

.oto-hero {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 32px 0 96px;
}

.oto-hero__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
}

.oto-hero__offer {
  color: #e0201c;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 6px;
}

.oto-hero__line {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.oto-hero__highlight {
  color: #e0201c;
}

.oto-offer {
  background: #fff;
  padding: 0 0 8px;
}

.oto-card {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  margin-top: -72px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 45%;
  grid-template-areas: "content gallery" "content badges";
}

.oto-card__content {
  grid-area: content;
  padding: 28px 32px;
}

.oto-card__gallery {
  grid-area: gallery;
  background: #fff;
  padding: 20px 20px 8px;
}

.oto-card__badges {
  grid-area: badges;
  background: #fff;
  padding: 12px 20px 24px;
  text-align: center;
}

.oto-gallery__main {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.oto-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.oto-gallery__thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  overflow: hidden;
}

.oto-gallery__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.oto-gallery__thumb.is-active {
  border-color: #000;
}

.oto-product__name {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
}

.oto-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e5e5;
}

.oto-rating__stars {
  display: inline-flex;
  gap: 2px;
  color: #3aa63a;
}

.oto-rating__star {
  width: 16px;
  height: 16px;
}

.oto-rating__text {
  font-size: 13px;
}

.oto-features {
  list-style: none;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid #e5e5e5;
  display: grid;
  gap: 12px;
}

.oto-features__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}

.oto-features__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: #000;
}

.oto-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 20px 0;
  text-align: center;
}

.oto-prices__col--retail {
  border-right: 1px solid #e5e5e5;
}

.oto-prices__label {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.oto-prices__pct {
  color: #3aa63a;
}

.oto-prices__retail {
  font-size: 32px;
  font-weight: 700;
  color: #9a9a9a;
  text-decoration: line-through;
  line-height: 1.1;
}

.oto-prices__offer {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  line-height: 1.1;
}

.oto-prices__note {
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: 0.2px;
}

.oto-prices__note--retail {
  color: #e0201c;
  text-decoration: line-through;
}

.oto-prices__note--offer {
  color: #3aa63a;
}

.oto-btn {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 4px auto 20px;
  padding: 16px 36px;
  background: #5cb63d;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  text-align: center;
}

.oto-btn:hover {
  background: #4ea533;
}

.oto-shipping {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #2f6db5;
  border-radius: 4px;
  padding: 12px 14px;
  background: #fff;
}

.oto-shipping__logo {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

.oto-shipping__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #222;
}

.oto-badges__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
}

.oto-badges__row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.oto-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #555;
  line-height: 1.15;
  text-align: left;
}

.oto-decline-wrap {
  text-align: center;
  padding: 28px 0 40px;
}

.oto-decline {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  color: #555;
  font-size: 14px;
  text-decoration: underline;
  text-align: center;
}

.oto-decline__icon {
  width: 16px;
  height: 16px;
  color: #333;
  flex: 0 0 auto;
  margin-top: 2px;
}

.oto-footer {
  background: #000;
  color: #fff;
  padding: 40px 0 28px;
}

.oto-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.4fr 1fr;
  gap: 32px;
}

.oto-footer__heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #333;
}

.oto-footer__link {
  display: block;
  color: #ddd;
  font-size: 12px;
  line-height: 1.9;
  text-decoration: none;
}

.oto-footer__link:hover {
  color: #fff;
}

.oto-footer__text {
  color: #ddd;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

.oto-footer__payments {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.oto-footer__cards {
  height: 20px;
  width: auto;
}

.oto-footer__wallet {
  height: 20px;
  width: auto;
  background: #fff;
  border-radius: 3px;
  padding: 2px 4px;
}

.oto-footer__col--brand {
  text-align: right;
}

.oto-footer__brand {
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.5px;
}

.oto-footer__rule {
  border-top: 1px solid #333;
  margin: 28px 0 16px;
}

.oto-footer__copy {
  text-align: center;
  font-size: 11px;
  color: #ddd;
  margin: 0;
}

@media (min-width: 768px) {
  .oto-footer__payments {
    flex-wrap: nowrap;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .oto-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .oto-footer__col--brand {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .oto-hero {
    padding: 24px 0 72px;
  }

  .oto-hero__title {
    font-size: 28px;
  }

  .oto-hero__offer {
    font-size: 18px;
  }

  .oto-hero__line {
    font-size: 16px;
  }

  .oto-card {
    grid-template-columns: 1fr;
    grid-template-areas: "gallery" "content" "badges";
    margin-top: -56px;
  }

  .oto-card__content {
    padding: 20px 16px;
  }

  .oto-card__gallery {
    padding: 16px 16px 8px;
  }

  .oto-prices__retail,
  .oto-prices__offer {
    font-size: 28px;
  }

  .oto-btn {
    width: 100%;
  }

  .oto-footer__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .oto-footer__col--brand {
    text-align: left;
  }
}

/* ---- QA round 2: design match ---- */
/* Announcement bar: slimmer, as in the design. */
.oto-page .announcement { padding: 7px 10px; }
.oto-page .announcement .announcement__block { padding: 0; }
.oto-page .announcement .announcement__text { font-size: 14px; line-height: 1.4; }
/* Review stars are green tiles; the count reads as plain grey text next to them. */
.oto-rating { align-items: center; }
.oto-rating__stars { gap: 2px; align-items: center; }
.oto-rating__star { width: 15px; height: 15px; display: inline-flex; }
.oto-rating__star svg { width: 100%; height: 100%; display: block; }
.oto-rating__text { font-weight: 400; color: #6b6b6b; line-height: 15px; }
.oto-shipping__flag { display: inline-block; width: 18px; height: 12px; vertical-align: -1px; margin: 0 1px; }
/* Footer payment marks as individual white tiles. */
.oto-footer__payments { gap: 6px; }
.oto-footer__tile { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 24px; background: #fff; border-radius: 3px; padding: 3px 4px; box-sizing: border-box; }
.oto-footer__tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

/* QA round 3: footer tagline uses the header lockup (Barlow, tracking, red dashes) on its own line. */
.oto-footer__col--brand { display: flex; flex-direction: column; align-items: flex-end; }
.oto-footer__brand-line.wr-brand__line { color: #fff; width: auto; margin-top: 6px; }
@media (max-width: 1023px) { .oto-footer__col--brand { align-items: flex-start; } }
.oto-footer__brand-line.wr-brand__line:before, .oto-footer__brand-line.wr-brand__line:after { flex: 0 0 20px; }

/* QA round 4: payment tiles follow the Figma footer. Card marks fill their tile (the SVGs are
   card-shaped), PayPal sits on its yellow, Apple Pay and Google Pay stay on white. */
.oto-footer__tile--card { background: transparent; padding: 0; }
.oto-footer__tile--card img { width: 100%; height: 100%; max-width: none; max-height: none; }
.oto-footer__tile--paypal { background: #ffc439; }