/* Donut mobile landscape — single authoritative composition.
   Loaded last. Portrait and desktop are intentionally untouched. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 520px) {
  html,
  body,
  .viewport,
  .site {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .viewport,
  .site {
    width: 100vw !important;
    height: 100dvh !important;
  }

  .site {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 68% 32% !important;
    grid-template-rows: clamp(50px, 15dvh, 64px) minmax(0, 56fr) minmax(0, 44fr) !important;
    background: #f2c6c1 !important;
  }

  .topbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  .hero {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 4 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    overflow: hidden !important;
    background-image: url('../assets/images/donut-landscape-hero.webp?v=2') !important;
    background-size: 99% auto !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
  }

  .hero img {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .mobile-message {
    grid-column: auto !important;
    grid-row: auto !important;
    position: absolute !important;
    top: clamp(50px, 15dvh, 64px) !important;
    left: 4% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 4 !important;
    width: 40% !important;
    height: 56% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-items: flex-start !important;
    padding: clamp(8px, 1.4dvh, 12px) 0 !important;
    text-align: left !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .mobile-message h1 {
    color: #fff !important;
    font-size: clamp(34px, min(5vw, 10dvh), 52px) !important;
    text-shadow: 0 2px 8px rgba(59,13,20,.58) !important;
  }

  .mobile-script {
    color: #fff !important;
    font-size: clamp(17px, min(2.5vw, 4.8dvh), 24px) !important;
    text-shadow: 0 2px 7px rgba(59,13,20,.62) !important;
  }

  .mobile-script span {
    color: #fff !important;
  }

  .mobile-script--lower {
    color: #fff !important;
    font-size: clamp(18px, min(2.75vw, 5dvh), 25px) !important;
  }

  .mobile-order-button {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 12px !important;
    gap: 12px !important;
    font-size: clamp(18px, min(2.5vw, 4.8dvh), 23px) !important;
  }

  .features {
    grid-column: 2 !important;
    grid-row: 3 !important;
    position: relative !important;
    inset: auto !important;
    z-index: 4 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    background: linear-gradient(180deg, rgba(255,245,239,.91), rgba(255,237,230,.95)) !important;
  }
}