/* ---------------------------------------------------------------
   Presell template — shared styles
   Covers the 10 shared section includes used by all 3 variants.
   Variant-specific body styles are appended in Phase 2.
--------------------------------------------------------------- */

/* Base */
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--surface-bg);
  /* Reserve space below content so the bottom-fixed .promo-bar (~64px tall,
     revealed past 50% scroll) never sits on top of footer / disclosure /
     final-cta content. */
  padding-bottom: 80px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.presell-container { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* ----- promo-bar -----
   Bottom-fixed. Hidden by default; JS adds .is-visible after the user
   scrolls past 50% of the page. Stays visible from that point on.
   See assets/js/presell.js → initPromoBarReveal. */
.promo-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--brand-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transform: translateY(100%);
  transition: transform 0.4s ease-out;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
}
.promo-bar.is-visible { transform: translateY(0); }
.promo-bar__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
  text-align: center;
  min-height: 44px;
}
.promo-bar__text { margin: 0; }
.promo-bar__cta {
  display: inline-block;
  background: #fff;
  color: var(--brand-accent);
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.promo-bar__cta:hover { opacity: 0.9; }
@media (max-width: 600px) {
  .promo-bar__inner { gap: 10px; padding: 8px 14px; }
  .promo-bar__text { font-size: 12.5px; line-height: 1.3; }
  .promo-bar__cta { padding: 6px 10px; font-size: 13px; }
}
/* Variant 3 override (kept for backward compatibility; variant.css also
   broadens red coverage via the .presell-hype body scope). */
.promo-bar--hype { background: var(--hype-warning); }
.promo-bar--hype .promo-bar__cta { color: var(--hype-warning); }

/* ----- advertorial-header -----
   Thin newspaper-style classification strip. Centered ADVERTORIAL label
   in a 3-column grid so the center stays centered while flag + "Trending"
   right-aligns. Unobtrusive: small text, muted gray, subtle bottom border. */
.advertorial-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 6px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-default);
}
.advertorial-header__spacer { display: block; }
.advertorial-header__label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}
.advertorial-header__trending {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
}
.advertorial-header__flag svg {
  display: block;
  height: 11px;
  width: auto;
  border-radius: 1px;
}
.advertorial-header__trending-text { line-height: 1; }
@media (max-width: 480px) {
  .advertorial-header {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 6px 16px 8px;
    gap: 4px;
  }
  .advertorial-header__spacer { display: none; }
  .advertorial-header__trending { justify-content: center; }
  .advertorial-header__label { font-size: 10.5px; }
  .advertorial-header__trending { font-size: 11px; }
}

/* ----- author-byline ----- */
.author-byline {
  max-width: 760px;
  margin: 16px auto 20px;
  padding: 0 20px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-default);
}
.author-byline__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-card);
}
.author-byline__meta {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.author-byline__meta strong { color: var(--text-primary); font-weight: 700; }
.author-byline__dot { margin: 0 4px; color: var(--border-default); }

/* ----- rating-badge ----- */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-primary);
}
.rating-badge__stars { display: inline-flex; gap: 2px; }
.rating-badge__stars svg { display: block; }
.rating-badge__value { font-weight: 700; }
.rating-badge__count { color: var(--text-secondary); font-weight: 400; }

/* ----- cta-button ----- */
.cta-button-wrap {
  max-width: 760px;
  margin: 24px auto;
  padding: 0 20px;
  display: flex;
  justify-content: center;
}
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  background: var(--brand-accent);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(245, 145, 51, 0.32);
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  text-align: center;
}
.cta-button:hover { transform: translateY(-1px); opacity: 0.96; }
.cta-button:active { transform: translateY(0); }
.cta-button__arrow { display: inline-flex; }
.cta-button--hype {
  background: var(--hype-warning);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.32);
}
@media (max-width: 600px) {
  .cta-button { font-size: 16px; padding: 14px 20px; }
}

/* ----- cta-stock-pill (landing CTAs — green pulsing dot + ship date) ----- */
.cta-stock-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 12px;
  padding: 0 20px;
}
.cta-stock-pill__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: cta-stock-pulse 1.6s ease-in-out infinite;
}
.cta-stock-pill__text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}
@keyframes cta-stock-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
@media (max-width: 600px) {
  .cta-stock-pill__text { font-size: 13px; }
}

/* ----- cta-trust-row (landing CTAs — 3-icon single-line row) -----
   Like .cta-trust-badges but enforces nowrap so it stays on one line on
   mobile. Icon color uses brand-accent (orange) to match presell pattern. */
.cta-trust-row {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.cta-trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.cta-trust-row__icon {
  color: var(--brand-accent);
  display: inline-flex;
  flex-shrink: 0;
}
.cta-trust-row__icon svg { display: block; }
@media (max-width: 600px) {
  .cta-trust-row { gap: 12px; padding: 0 12px; }
  .cta-trust-row li { font-size: 11px; gap: 4px; }
  .cta-trust-row__icon svg { width: 16px; height: 16px; }
}

/* ----- cta-trust-badges (presell — 3-icon row, single line, no wrap) ----- */
.cta-trust-badges {
  list-style: none;
  margin: 12px auto 0;
  padding: 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  max-width: 760px;
}
.cta-trust-badges__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.cta-trust-badges__icon {
  color: var(--brand-accent);
  display: inline-flex;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .cta-trust-badges { gap: 10px; padding: 0 8px; }
  .cta-trust-badges__item { font-size: 11px; gap: 5px; }
  .cta-trust-badges__icon svg { width: 18px; height: 18px; }
}

/* ----- guarantee-block ----- */
.guarantee-block {
  background: var(--surface-card);
  padding: 36px 20px;
  margin: 36px 0;
}
.guarantee-block__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.guarantee-block__seal { flex: 0 0 120px; }
.guarantee-block__copy { flex: 1; }
.guarantee-block__heading {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text-primary);
}
.guarantee-block__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
@media (max-width: 600px) {
  .guarantee-block__inner { flex-direction: column; text-align: center; gap: 16px; }
  .guarantee-block__seal { flex: 0 0 auto; }
}

/* ----- final-cta-section ----- */
.final-cta-section {
  padding: 40px 20px;
  background: var(--surface-bg);
}
.final-cta-section__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.final-cta-section__image {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.final-cta-section__headline {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.final-cta-section__subhead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 20px;
}
.final-cta-section__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.final-cta-section__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--text-primary);
}
.final-cta-section__check { color: var(--state-success); flex-shrink: 0; margin-top: 2px; }
.final-cta-section .cta-button-wrap { margin: 0 0 12px; padding: 0; justify-content: flex-start; }
.final-cta-section .cta-trust-badges { padding: 0; justify-content: flex-start; }
@media (max-width: 760px) {
  .final-cta-section__inner { grid-template-columns: 1fr; gap: 20px; }
  .final-cta-section__headline { font-size: 26px; }
  .final-cta-section .cta-button-wrap,
  .final-cta-section .cta-trust-badges { justify-content: center; }
}

/* ----- footer-presell ----- */
.footer-presell {
  background: var(--surface-bg);
  padding: 32px 20px 40px;
  border-top: 1px solid var(--border-default);
}
.footer-presell__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.footer-presell__logo {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.footer-presell__links {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}
.footer-presell__links a {
  color: var(--text-secondary);
  text-decoration: none;
}
.footer-presell__links a:hover { color: var(--brand-accent); text-decoration: underline; }
.footer-presell__copyright {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}