/* =============================================
   STRAPZY'S — landing page hero extras
   (custom shin pads, carbon fibre, gifts, clubs)
   Price line, Google rating, product photo, delivery + payment line,
   and the phone bar that keeps the main button on screen.
   ============================================= */

/* Price under the headline */
.lp-hero-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: -8px 0 12px; }
.lp-hero-price strong { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(44px, 6vw, 64px); line-height: 1; color: var(--accent); }
.lp-hero-price span { font-size: 14px; color: var(--grey-500); letter-spacing: .2px; }

/* Google rating — filled in by scripts/lp-hero.js, hidden until then */
.lp-hero-rating { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; font-size: 14px; color: var(--white); text-decoration: none; }
.lp-hero-rating[hidden] { display: none; }
.lp-hero-rating .lp-stars { color: #fbbc04; letter-spacing: 1px; font-size: 15px; }
.lp-hero-rating span:last-child { color: var(--grey-500); text-decoration: underline; text-underline-offset: 3px; }
.lp-hero-rating:hover span:last-child { color: var(--white); }

/* Product photo */
.lp-hero-photo { margin: 0 0 28px; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #111; }
.lp-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Delivery + payment line under the buttons */
.lp-hero-trust { margin: 20px 0 0; font-size: 13px; line-height: 1.6; color: var(--grey-500); max-width: 560px; }

/* Desktop: text left, photo right */
@media (min-width: 900px) {
  .lp-hero-inner.has-photo { max-width: 1200px; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); column-gap: clamp(32px, 5vw, 72px); align-items: start; }
  .lp-hero-inner.has-photo > * { grid-column: 1; }
  .lp-hero-inner.has-photo > .lp-hero-photo { grid-column: 2; grid-row: 1 / span 8; align-self: center; aspect-ratio: 1; margin: 0; }
  .lp-hero-inner.has-photo > .lp-hero-rating { justify-self: start; }
}

/* Phone bar: shows whenever the hero buttons are off screen */
.lp-sticky { display: none; }
@media (max-width: 768px) {
  .lp-sticky {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: fixed; left: 76px; right: 16px; bottom: 16px; z-index: 9001;
    min-height: 48px; padding: 0 18px; border-radius: 999px;
    background: var(--accent); color: #0a0a0a; text-decoration: none;
    font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    transform: translateY(140%); transition: transform .25s ease;
  }
  .lp-sticky strong { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: .02em; line-height: 1; }
  .lp-sticky.is-shown { transform: none; }
}