/*
 * pdp-lean.css — lean mobile layout for the order.css-family product PDPs
 * (retatrutide pens/vials, /product/* pages, tirzepatide). Mirrors the
 * /remedium flagship treatment using the shared template classes.
 *
 * AEO-safe by construction: nothing is removed from the DOM — rules only change
 * mobile VISUAL presentation (hide / full-bleed / compact). Everything is scoped
 * to <=720px (tier layout to <=480px), so DESKTOP RENDERING IS UNTOUCHED.
 * No title/H1/meta/JSON-LD changes. Loaded after order.css so it wins on cascade.
 */

@media (max-width: 720px) {
  /* 0) Hero polish — the biggest quality lift. Tame the oversized serif H1,
        calm the sub/body copy, and make the CTAs clean full-width buttons.
        (Pilot pages already get H1 sizing from density.css — its higher-
        specificity selector wins there, so these are the baseline for the
        15 non-density pages.) */
  .hero-copy h1 {
    font-size: clamp(28px, 7.8vw, 36px);
    line-height: 1.14;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    /* The template caps the title at 10ch for the left-aligned layout; that
       pins a centred title to a narrow left box (empty space on the right).
       Let it use the full column so centring actually centres. */
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  /* Centred hero header on mobile (title + subtitle + lede). The eyebrow tag
     keeps its left alignment so its leading dash stays in line with the text
     (centring it leaves the dash floating away from the wrapped label). */
  .hero-copy h1,
  .hero-copy .hero-sub,
  .hero-copy .hero-desc { text-align: center; }
  /* Centre the "Read more" toggle on the pilot pages (hero-copy is a flex
     column there, so it needs align-self rather than text-align). */
  .hero-copy .density-toggle { align-self: center; text-align: center; }
  .hero .hero-sub {
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .hero .hero-desc {
    font-size: 14.5px;
    line-height: 1.62;
  }
  /* Clamp the long hero paragraph to a lede on pages that don't already use the
     density.css read-more clamp (avoid double-clamping the pilot pages). */
  .hero .hero-desc:not(.d-clamp) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  /* Buttons: stacked, full-width, comfortable tap targets. */
  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary,
  .hero-actions .btn-ghost {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hero-actions .btn-secondary,
  .hero-actions .btn-ghost { min-height: 48px; }

  /* 1) Buy box directly under the hero: the AI-summary block sits between the
        hero and the order section in the DOM. Hiding it (kept in DOM for AEO)
        drops the order section straight under the hero — no risky reorder.
        (Most pages use bare `.research-summary`; pilots add `.ai-summary`.) */
  .research-summary { display: none; }

  /* 2) Drop the hero proof-pill row + the redundant reference-price line on
        mobile (price lives in the buy box; pills' facts live in spec grid /
        COA badge / highlights strip). Kept in DOM for AEO. */
  .hero.density-hero .hero-points,
  .hero .hero-points,
  .hero .price-asof { display: none; }

  /* 3) Keep the buy box lean: hide the duplicated in-box "Verify this batch"
        card (the same batch/purity/COA proof is in the hero COA badge, the
        highlights strip, and the COA section lower down). */
  .order-section .batch-verification { display: none; }

  /* 4) Full-bleed the dark buy-box card so it runs flush with the hero — no
        light side gutters. The inner padding keeps content inset. */
  #main > .hero-buy-wrap .order-section,
  .hero-shell .order-section,
  .order-section {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: none;
  }
  .order-section .order-section-head { padding-left: 16px; padding-right: 16px; }
  .order-section .product-card.order-panel {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
  }
  .order-section .wholesale-inline { margin-left: 16px; margin-right: 16px; }
}

/* 5) Compact, centered tier cards on phones — one column, each card a tight
      horizontal row (qty left-of-centre, price centred), same text size.
      Replaces the cramped 3-up grid / tall stacked cards. */
@media (max-width: 480px) {
  /* Scope to `.product-card .tier-selector` (not #order-panel) so it also
     reaches the SECOND buy box on dual-format pages (ss-31 50mg, bac-water
     40mL) and glow-pen's in-hero buy box. pdp-lean loads last, so it wins the
     specificity tie against the per-page inline `flex-direction: column`. */
  .product-card .tier-selector {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .product-card .tier-selector .tier-card,
  .product-card .tier-selector .tier-card:first-child {
    flex: none;
    width: auto;
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
    column-gap: 8px;
  }
  .product-card .tier-selector .tier-card .qty { font-size: 19px; line-height: 1; margin: 0; }
  .product-card .tier-selector .tier-card .qty-label { font-size: 12px; margin: 0; }
  .product-card .tier-selector .tier-card .price { font-size: 16px; margin: 0; white-space: nowrap; }
  .product-card .tier-selector .tier-card .price-sub { font-size: 11px; margin: 0; white-space: nowrap; }
  .product-card .tier-selector .tier-card .save {
    flex-basis: 100%;
    font-size: 11px;
    text-align: center;
    margin: 3px 0 0;
  }
}