/* Mobile overrides for the boutique.
   The screens are styled inline (desktop-first), so every rule here needs
   !important to win over the inline declarations. Scoped to <= 760px. */

@media (max-width: 760px) {

  /* ---- Header: wordmark + actions on row 1, nav centered on row 2 ---- */
  .lpm-header-inner {
    grid-template-columns: auto 1fr !important;
    padding: 12px 16px !important;
    gap: 10px 12px !important;
  }
  .lpm-header-inner .lpm-wordmark { grid-row: 1; grid-column: 1; font-size: 15px !important; }
  .lpm-header-actions { grid-row: 1; grid-column: 2; gap: 10px !important; }
  .lpm-nav { grid-row: 2; grid-column: 1 / -1; justify-content: center; gap: 18px !important; flex-wrap: wrap; }
  .lpm-nav a { font-size: 13px !important; }

  /* ---- Reassurance bar: 2 x 2 ---- */
  .lpm-reassurance { grid-template-columns: 1fr 1fr !important; padding: 0 8px !important; }
  .lpm-reassurance > span { padding: 10px 8px !important; font-size: 11.5px !important; }
  .lpm-reassurance > span:nth-child(3) { border-left: none !important; }
  .lpm-reassurance > span:nth-child(3),
  .lpm-reassurance > span:nth-child(4) { border-top: 1px solid var(--border-soft); }

  /* ---- Hero (film / lifestyle photo) ---- */
  .lpm-hero-film { min-height: 460px !important; }
  .lpm-hero-film-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 0 20px 32px !important;
  }
  .lpm-hero-title { font-size: 36px !important; }

  /* ---- Hero (packshot) ---- */
  .lpm-hero-pack { padding: 44px 20px 0 !important; }
  .lpm-hero-headline { font-size: 40px !important; }
  .lpm-hero-pack-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .lpm-hero-pack-grid > div:first-child { padding-top: 8px !important; }
  .lpm-hero-pack-img { margin-top: 0 !important; }
  .lpm-hero-pack-photo { height: 300px !important; }

  /* ---- Collection: single column, aligned header ---- */
  .lpm-collection { padding: 56px 20px 0 !important; }
  .lpm-collection-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
  }
  .lpm-collection-head p { text-align: left !important; max-width: none !important; }
  .lpm-collection-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* ---- Shared section titles ---- */
  .lpm-h2 { font-size: 29px !important; }

  /* ---- Lifestyle band ---- */
  .lpm-life-inner { padding: 44px 20px !important; }

  /* ---- Size guide rows: name + arrow / dims + age / description ---- */
  .lpm-guide { margin-top: 64px !important; padding: 0 20px !important; }
  .lpm-guide-row { grid-template-columns: 1fr auto !important; gap: 4px 14px !important; padding: 16px 2px !important; }
  .lpm-guide-row > :nth-child(1) { grid-row: 1; grid-column: 1; font-size: 21px !important; }
  .lpm-guide-row > :nth-child(5) { grid-row: 1; grid-column: 2; }
  .lpm-guide-row > :nth-child(2) { grid-row: 2; grid-column: 1; }
  .lpm-guide-row > :nth-child(3) { grid-row: 2; grid-column: 2; text-align: right; }
  .lpm-guide-row > :nth-child(4) { grid-row: 3; grid-column: 1 / -1; }

  /* ---- Story band ---- */
  .lpm-story-inner { padding: 52px 20px !important; }
  .lpm-night-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* ---- Footer: brand block full width, link columns 2-up ---- */
  .lpm-footer-grid { grid-template-columns: 1fr 1fr !important; padding: 40px 20px !important; gap: 28px !important; }
  .lpm-footer-grid > div:first-child { grid-column: 1 / -1; }

  /* ---- Product page ---- */
  .lpm-product-main { padding: 20px 20px 0 !important; }
  .lpm-product-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .lpm-product-title { font-size: 34px !important; }

  /* ---- Editorial pages (La maison / Guide du sommeil) ---- */
  .lpm-edit-head { padding: 44px 20px 0 !important; }
  .lpm-edit-title { font-size: 34px !important; }
  .lpm-maison-grid { grid-template-columns: 1fr !important; margin-top: 36px !important; padding: 0 20px !important; }
}