/* Blue gradients for shared surfaces and editorial templates. */
:root {
  --sp-gradient-paper: #f6f9fe;
  --sp-gradient-header: linear-gradient(105deg, #fff 24%, #eaf2ff 100%);
  --sp-gradient-hero: linear-gradient(120deg, #fff 12%, #f2f7ff 58%, #dbeaff 100%);
  --sp-gradient-card: linear-gradient(145deg, #fff 12%, #edf4ff 100%);
  --sp-gradient-media: linear-gradient(145deg, #f8fbff, #e5efff);
  --sp-gradient-primary: linear-gradient(115deg, #275ba7, #1c4790);
  --sp-gradient-primary-hover: linear-gradient(115deg, #235098, #153a79);
  --sp-gradient-dark: linear-gradient(125deg, #142b4b, #1f457b);
  --sp-gradient-border: #d4e3f5;
}

body > header {
  background-image: var(--sp-gradient-header);
  border-bottom-color: var(--sp-gradient-border);
}

#main-content {
  background-image: linear-gradient(180deg, var(--sp-gradient-paper) 0, #fff 340px);
}

.sp-home {
  background-color: transparent;
}

.sp-home .sp-home-hero--wide {
  background-color: #e9f2ff;
}

.sp-home .sp-home-hero--wide::after {
  background-image: linear-gradient(
    90deg,
    #f7fbff 0%,
    rgba(232, 242, 255, .96) 29%,
    rgba(219, 234, 255, .4) 48%,
    transparent 63%
  );
}

@media (max-width: 760px) {
  .sp-home .sp-home-hero--wide {
    background-image: var(--sp-gradient-hero);
  }
}

#main-content :is(
  .sp-home-coupon-section,
  .sp-coupon-hero,
  .sp-magazine-hero,
  .sp-review-intro,
  .sp-profile-hero,
  .sp-brand-hero
),
.sp-esn-v2 .hero,
.sp-more-page .more-hero {
  background-image: var(--sp-gradient-hero);
  border-color: var(--sp-gradient-border);
}

.sp-cmp-page {
  background-image: radial-gradient(ellipse at 15% 0%, #deecff 0%, transparent 70%);
}

#main-content :is(
  .sp-listing-card,
  .sp-home-feature-ribbon,
  .sp-home-path,
  .sp-bv1-card,
  .sp-test-context,
  .sp-cmp-guide-card,
  .sp-cmp-guide-note,
  .sp-cmp-chart
) {
  background-image: var(--sp-gradient-card);
  border-color: var(--sp-gradient-border);
}

#main-content .sp-cmp-guide-note {
  border-inline-start-color: #4c94ce;
}

#main-content :is(.sp-home-path:hover, .sp-bv1-card:hover) {
  border-color: #b5cdef;
}

#main-content .sp-listing-card :is(.product-art, .sp-card-empty, .sp-listing-image, .sp-comparison-tile-media),
#main-content .sp-review-intro .sp-intro-product .product-art {
  background-image: var(--sp-gradient-media);
}

#main-content .btn:not(.secondary):not(.sp-home-method-button):not([data-copy]):not([data-esn-copy]):not([data-more-copy]),
#main-content :is(.sp-listing-button, .sp-card-button, .sp-finder-more),
#main-content .sp-news-coupon .sp-news-coupon-button,
#main-content .sp-esn-v2 :is(.offer-primary, .esn-hero-offer .shop-link),
#main-content .sp-more-page .more-shop {
  background-image: var(--sp-gradient-primary);
  border-color: #25549b;
  color: #fff;
}

#main-content .btn:not(.secondary):not(.sp-home-method-button):not([data-copy]):not([data-esn-copy]):not([data-more-copy]):hover,
#main-content :is(.sp-listing-button, .sp-card-button, .sp-finder-more):hover,
#main-content .sp-comparison-tile-link:hover .sp-listing-button,
#main-content .sp-news-coupon .sp-news-coupon-button:hover,
#main-content .sp-esn-v2 :is(.offer-primary, .esn-hero-offer .shop-link):hover,
#main-content .sp-more-page .more-shop:hover {
  background-image: var(--sp-gradient-primary-hover);
  border-color: #1b4281;
}

#main-content :is(.darkpanel, .sp-intro-product .sp-intro-rating, .sp-coupon-brand-panel),
body > footer {
  background-image: var(--sp-gradient-dark);
}

body > footer :is(p, a, button, .footer-note) {
  color: #e1ecfb;
}

body > footer :is(a, button):hover {
  color: #fff;
}

body > footer .footer-note {
  border-top-color: #49658d;
}

/* Mobile reviews use one background and align controls to the content gutter. */
@media (max-width: 760px) {
  .single-sbp_review.review-design-practice #main-content .sp-intro-grid {
    background: transparent;
  }
}

@media (max-width: 700px) {
  .single-sbp_review.review-design-practice .sp-intro-product .sp-intro-rating {
    width: 100%;
  }

  .single-sbp_review.review-design-practice .sp-intro-actions {
    column-gap: 16px;
  }

  .single-sbp_review.review-design-practice .sp-intro-actions .btn.secondary {
    font-size: 13px;
  }

  .single-sbp_review.review-design-practice #main-content .sp-review-credits-inline {
    row-gap: 6px;
  }

  .single-sbp_review.review-design-practice .sp-review-credits-inline .sp-credit-details {
    column-gap: 14px;
  }

  .single-sbp_review.review-design-practice .sp-review-credits-inline .sb-preferred-source-row {
    padding-block: 0;
  }

  .single-sbp_review.review-design-practice #main-content .sp-test-context {
    margin: 0 0 20px;
    padding: 0;
    border: 1px solid var(--sp-gradient-border);
    border-radius: 10px;
    background: #ffffffb3;
  }

  .single-sbp_review.review-design-practice .sp-test-context > summary {
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 14px;
    line-height: 1.5;
  }

  .single-sbp_review.review-design-practice .sp-test-context-content {
    padding: 0 14px 12px;
  }
}

/* Keep the draft preview controls usable on narrow screens. */
@media (max-width: 700px) {
  body #wpvibe-preview-banner {
    gap: 8px;
    padding: 6px 10px;
  }

  body #wpvibe-preview-banner .wpvibe-info {
    display: none;
  }

  body #wpvibe-preview-banner .wpvibe-badge {
    margin-inline-end: auto;
    font-size: 11px;
  }

  body #wpvibe-preview-banner .wpvibe-btn {
    flex: none;
    padding: 6px 8px;
    white-space: nowrap;
    font-size: 11px;
  }
}