/* SiteHub Promo v18 — rotating offers panel.
   Additive layer over sitehub-promo-v17.css: slide 1 keeps its original markup and styles;
   everything below is scoped to .shp-promo.shp-slider, which sitehub-promo-v18.js adds. */

/* ---------- no layout shift on init ----------
   The slider adds a control row and takes the height of the tallest slide. Until the script runs, reserve that
   height (measured on the live layout, per breakpoint) so the content below the hero does not jump. */
.shp-promo:not(.shp-slider) { display: flex; flex-direction: column; min-height: 838px; }
.shp-promo:not(.shp-slider) .shp-promo__inner { flex: 1; display: flex; flex-direction: column; }
.shp-promo:not(.shp-slider) .shp-promo__body { flex: 1; justify-content: center; }
@media (max-width: 520px) { .shp-promo:not(.shp-slider) { min-height: 872px; } }
@media (max-width: 450px) { .shp-promo:not(.shp-slider) { min-height: 895px; } }
@media (max-width: 340px) { .shp-promo:not(.shp-slider) { min-height: 918px; } }

/* ---------- stage: all slides share one grid cell, so the height is always the tallest slide ---------- */
.shp-promo.shp-slider .shp-slides { position: relative; display: grid; overflow: hidden; touch-action: pan-y; }
.shp-promo.shp-slider .shp-slide {
  grid-area: 1 / 1; min-width: 0; justify-content: center;
  visibility: hidden; opacity: 0; pointer-events: none;
}
.shp-promo.shp-slider .shp-slide.is-active,
.shp-promo.shp-slider .shp-slide.is-leaving { visibility: visible; opacity: 1; }
.shp-promo.shp-slider .shp-slide.is-active { pointer-events: auto; }
.shp-promo.shp-slider .shp-slide.is-leaving { pointer-events: none; }

/* ---------- slides 2–4: reuse v17 components, but they are not part of the one-time intro ---------- */
.shp-promo.shp-slider .shp-slide--x .shp-excl,
.shp-promo.shp-slider .shp-slide--x .shp-chip,
.shp-promo.shp-slider .shp-slide--x .shp-sub,
.shp-promo.shp-slider .shp-slide--x .shp-cta,
.shp-promo.shp-slider .shp-slide--x .shp-free { opacity: 1; transform: none; filter: none; animation: none; }
.shp-promo.shp-slider .shp-slide--x .shp-free--md { font-size: 30px; line-height: 1.12; letter-spacing: -.5px; max-width: 440px; text-wrap: balance; }
.shp-promo.shp-slider .shp-slide--x.is-active .shp-free::after { animation: shp-shine 4.5s ease-in-out 1.2s infinite; }
.shp-promo.shp-slider .shp-slide--x .shp-cta { animation: none; }

.shp-num small { font-size: .46em; letter-spacing: 0; margin-left: 3px; vertical-align: .62em; font-weight: 800; }
.shp-promo.shp-slider .shp-slide--x .shp-chip { height: 40px; padding: 0 12px; gap: 7px; font-size: 13.5px; }
.shp-promo.shp-slider .shp-slide--x .shp-chip svg { width: 17px; height: 17px; }

/* social links (offer 4) */
.shp-soc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 460px; margin-top: 16px; }
.shp-soc a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 12px;
  background: #171717; border: 1px solid #2A2A2A; color: var(--t1, #F5F5F5); text-decoration: none;
  font: 700 13px/1 var(--sh-font, 'Manrope', sans-serif);
  transition: border-color .2s, background-color .2s, transform .2s;
}
.shp-soc a:hover { border-color: rgba(255, 138, 0, .55); background: #1C1C1C; transform: translateY(-1px); }
.shp-soc a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 138, 0, .5); }
.shp-soc svg { width: 16px; height: 16px; flex: none; color: var(--o, #FF8A00); }
.shp-soc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the footer text changes per slide: never wrap, so the card keeps one height */
.shp-promo.shp-slider .shp-promo__foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- controls ---------- */
.shp-ctl { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px 14px; transition: opacity .4s; }
.shp-promo.shp-slider:not(.is-ready) .shp-ctl { opacity: 0; visibility: hidden; }
.shp-ctl__btn {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  background: #151515; border: 1px solid #2A2A2A; color: var(--t2, #B3B3B3); cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s, transform .2s;
}
.shp-ctl__btn::before { content: ''; position: absolute; inset: -6px; } /* 44px hit area */
.shp-ctl__btn svg { width: 14px; height: 14px; display: block; }
.shp-ctl__btn:hover { color: #fff; border-color: rgba(255, 138, 0, .55); background: #1C1C1C; }
.shp-ctl__btn:active { transform: scale(.94); }
.shp-ctl__btn:focus-visible, .shp-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 138, 0, .5); }
.shp-ctl__btn[hidden] { display: none; }
.shp-ctl__pause { margin-left: 6px; }

.shp-dots { display: flex; gap: 2px; margin: 0 6px; }
.shp-dot { position: relative; width: 28px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.shp-dot::before, .shp-dot i {
  content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px;
}
.shp-dot::before { background: #2A2A2A; transition: background-color .2s; }
.shp-dot:hover::before { background: #3A3A3A; }
.shp-dot i { background: linear-gradient(90deg, var(--o, #FF8A00), var(--r, #FF3B30) 55%, var(--p, #FF2D55)); transform: scaleX(0); transform-origin: left center; }
.shp-promo.shp-slider.is-static .shp-dot[aria-current="true"] i { transform: none; }

/* ---------- keep the slide-1 stamp from being clipped on narrow stages ---------- */
@media (max-width: 520px) {
  /* the badge text changes per slide: let it wrap and keep the top bar the same height for all of them */
  .shp-promo.shp-slider .shp-promo__bar { min-height: 80px; }
  .shp-promo.shp-slider .shp-badge { height: auto; min-height: 28px; padding: 5px 12px; line-height: 1.2; text-align: center; }
  .shp-promo.shp-slider .shp-slide--x .shp-chip { height: 36px; font-size: 13px; }
  .shp-promo.shp-slider .shp-slide--x .shp-free--md { font-size: 24px; }
  .shp-soc { grid-template-columns: 1fr; max-width: 320px; }
  .shp-slide--x .shp-eq--soc { display: none; } /* the three links below already name the networks */
  .shp-ctl { padding-inline: 8px; }
}
@media (max-width: 360px) {
  .shp-dot { width: 24px; }
  .shp-ctl__pause { margin-left: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .shp-promo.shp-slider .shp-slide--x.is-active .shp-free::after { animation: none !important; }
  .shp-ctl, .shp-ctl__btn, .shp-soc a { transition: none; }
}