/* Little Cloud Play Co. — focused phone and tablet layout refinements.
   Loaded after the original stylesheet; desktop branding is retained. */
:root { --lc-header-height: 72px; }

@media (max-width: 1023px) {
  :root { --lc-header-height: 64px; }
  html {
    scroll-padding-top: calc(var(--lc-header-height) + 16px);
    scroll-padding-bottom: 112px;
  }
  .lc-main, .lc-container, .lc-main .grid > *, .lc-main fieldset {
    min-width: 0;
  }
  .lc-main fieldset { max-width: 100%; }
  .lc-main :is(h1, h2, h3, p, dd, label, legend) { overflow-wrap: anywhere; }
  .lc-header { background: var(--color-cream); }
  .lc-header-row { height: var(--lc-header-height); gap: 16px; }
  .lc-logo { flex-shrink: 0; }
  .lc-desktop-nav, .lc-header-actions { display: none; }
  .lc-menu-toggle { display: grid; flex-shrink: 0; }
  .lc-mobile-menu {
    display: block;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100dvh - var(--lc-header-height));
  }
  .lc-menu-content {
    height: auto;
    min-height: 100%;
    padding-block: 12px max(24px, env(safe-area-inset-bottom));
  }
  .lc-menu-content > * { flex-shrink: 0; }
  .lc-menu-content > div:last-child { padding-top: 20px; }
  .lc-menu-content a { overflow-wrap: anywhere; }
  .lc-menu-content > div:last-child > a:last-child { min-height: 44px; }

  .lc-button {
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    height: auto;
    padding-block: 11px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    touch-action: manipulation;
  }
  .lc-button--lg { min-height: 52px; padding-inline: 20px; }
  .lc-button > svg { flex-shrink: 0; }
  .lc-main button { touch-action: manipulation; }
  .translated-state-label { position: relative; min-width: 0; max-width: 100%; }
  .translated-state-label > span { min-width: 0; overflow-wrap: anywhere; }
  .translated-state-label > span[data-active="false"] {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .lc-main :is(input, select, textarea) {
    min-width: 0;
    max-width: 100%;
    font-size: 16px; /* Avoid focus zoom on iOS. */
    scroll-margin-block: 96px 120px;
  }
  .lc-field-label { flex-wrap: wrap; row-gap: 4px; }
  .lc-field-label > span { flex-shrink: 0; }
  .lc-package-card-price { gap: 10px; flex-wrap: wrap; }
  .lc-package-card-price > p { flex-wrap: wrap; }
  .lc-package-card-price svg, .lc-package-facts svg { flex-shrink: 0; }
  .lc-package-filters { scroll-padding-inline: 16px; overscroll-behavior-x: contain; }
  .lc-package-filters > button { min-height: 44px; }
  .lc-comparison-scroll {
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-lavender-deep) var(--color-cream);
  }
  .lc-comparison-scroll th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 136px;
    max-width: 160px;
    background: var(--color-white);
    box-shadow: 2px 0 0 var(--color-line);
  }
  .lc-comparison-scroll :is(th, td) { padding: 14px 16px; }
  .lc-comparison-scroll th:first-child a { font-size: 16px; }
  .lc-comparison-scroll th:first-child a span { flex-shrink: 0; }
  .lc-booking-page { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
  .lc-booking-grid { gap: 24px; }
  .lc-booking-panel { min-width: 0; }
  .lc-booking-actions { gap: 10px; margin-top: 28px; }
  .lc-booking-actions > .lc-button { min-width: 0; }
  .lc-booking-actions > .lc-button--lg { flex: 1; }
  .lc-booking-actions > .lc-button:not(.lc-button--lg) { flex-shrink: 0; }
  .lc-package-choice { gap: 12px; align-items: center; }
  .lc-package-choice > span:first-child { width: 72px; height: 80px; }
  .lc-package-choice > span:nth-child(2) { padding-right: 20px; }
  .lc-package-choice > span:nth-child(2) > span:nth-child(3) {
    display: block;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .lc-package-choice > span:nth-child(2) > span:nth-child(3) svg {
    display: inline-block;
    margin-right: 2px;
  }
  .lc-booking-addons [role="group"] button { width: 44px; height: 44px; }
  .lc-booking-addons button[aria-pressed] { height: auto; min-height: 44px; }
  .lc-booking-addons > li > div:last-child { flex-wrap: wrap; gap: 10px; }
  .lc-booking-panel [role="radiogroup"] > button { overflow-wrap: anywhere; }
  .lc-booking-panel [aria-label="Rental length"] > button {
    height: auto;
    min-height: 64px;
    padding: 10px 6px;
  }
  .lc-booking-panel [aria-label="Preferred contact method"] > button {
    height: auto;
    min-height: 44px;
    padding-block: 10px;
  }
  .lc-booking-totalbar {
    position: fixed;
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    max-width: 680px;
    margin: 0 auto;
  }
  .lc-booking-totalbar > button { gap: 12px; min-height: 68px; padding-left: 20px; }
  .lc-booking-totalbar > button > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .lc-booking-totalbar > button > span:last-child { flex-shrink: 0; }
  .lc-mobile-summary-panel {
    max-height: min(65vh, calc(100dvh - 164px - env(safe-area-inset-bottom)));
    overscroll-behavior-y: contain;
  }
  .lc-booking-summary { padding: 20px; }
  .lc-booking-summary dd { flex-shrink: 0; }
  .lc-booking-summary > div > div { gap: 12px; }
  /* Give the keyboard and the focused field room on phone-sized viewports. */
  body:has(.lc-booking-panel :is(input:not([type="checkbox"]), textarea, select):focus) .lc-booking-totalbar {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 639px) {
  .lc-container {
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  }
  .home-section, .section-spacing { padding-block: 32px; }
  .lc-main h1 { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.1; }
  .lc-section-heading h2, .lc-home-cta h2 { font-size: clamp(1.75rem, 7.3vw, 2.125rem); line-height: 1.15; }
  .lc-section-heading > p:last-child { font-size: 16px; line-height: 1.65; margin-top: 12px; }
  .lc-section-heading > p:first-child:not(:last-child) { font-size: 12px; letter-spacing: .14em; margin-bottom: 10px; }
  .lc-hero-grid { gap: 20px; padding-top: 16px; padding-bottom: 32px; }
  .lc-hero-copy { text-align: center; }
  .lc-hero-copy > p:first-child { max-width: 100%; padding: 8px 12px; font-size: 12px; line-height: 1.4; }
  .lc-hero-copy > p:first-child span { flex-shrink: 0; }
  .lc-hero-copy h1 { max-width: 20ch; margin: 18px auto 0; }
  .lc-hero-copy > p:nth-child(3) { margin-top: 16px; font-size: 16px; line-height: 1.65; }
  .lc-hero-actions { gap: 10px; margin-top: 20px; }
  .lc-hero-copy > p:nth-child(5) { margin-top: 10px; font-size: 13px; }
  .lc-hero-trust { justify-content: center; gap: 10px; margin-top: 20px; }
  .lc-hero-trust > div:first-child > span { width: 32px; height: 32px; font-size: 12px; }
  .lc-hero-trust > div:last-child > div { justify-content: center; }
  .lc-hero-trust p { font-size: 12px; }
  .lc-hero-art { max-width: 380px; }
  .hero-visual { padding-block: 8px 20px; }
  .hero-photo-frame { width: 80%; margin-left: 7%; border-radius: 50% 50% 24px 24px; }
  .hero-balloon-photo { left: 0; width: 30%; border-width: 5px; }
  .hero-play-badge { right: 0; width: 29%; }
  .hero-play-doodle { left: 2%; }
  .home-page section[aria-label="Occasions we style"] { padding-block: 12px; }
  .home-page section[aria-label="Occasions we style"] ul { column-gap: 16px; row-gap: 8px; font-size: 12px; }

  .lc-how-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px;
    border-radius: 24px;
  }
  .lc-how-card > span:first-child { top: 12px; right: 14px; font-size: 32px; }
  .lc-how-card > span:nth-child(2) { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; }
  .lc-how-card h3 { position: relative; grid-column: 2; margin-top: 0; padding-right: 20px; font-size: 18px; }
  .lc-how-card p { grid-column: 2; margin-top: 6px; font-size: 14px; line-height: 1.6; }
  .lc-package-card { padding: 10px; border-radius: 26px; }
  .lc-package-card > div:first-child { aspect-ratio: 4 / 3; border-radius: 20px; }
  .lc-package-card-body { padding: 16px 8px 10px; }
  .lc-package-card h3 { font-size: 24px; }
  .lc-package-card dl { margin-block: 16px; column-gap: 12px; }
  .lc-promise-collage { gap: 10px; }
  .lc-promise-collage > div, .lc-promise-collage > div > div { border-radius: 24px; min-width: 0; }
  .lc-promise-collage > div:last-child { gap: 10px; padding-top: 16px; }
  .lc-party-stat { padding: 14px 10px; }
  .lc-party-stat > p:first-child { font-size: clamp(1.5rem, 7.5vw, 2rem); line-height: 1.15; }
  .lc-party-stat > p:last-child { font-size: 12px; line-height: 1.45; }
  .lc-promise-card { gap: 12px; padding: 16px; }
  .lc-promise-card > span { width: 40px; height: 40px; }
  .lc-promise-card > div { min-width: 0; }
  .lc-promise-card p { font-size: 14px; line-height: 1.6; }
  .lc-review-card { padding: 24px; border-radius: 24px; }
  .lc-review-card blockquote { margin-top: 16px; font-size: 16px; line-height: 1.65; }
  .lc-review-card figcaption { margin-top: 20px; }
  .lc-delivery-card { padding: 20px; border-radius: 24px; }
  .lc-delivery-card li { gap: 10px; flex-wrap: wrap; padding: 12px; }
  .lc-faq { border-radius: 24px; padding-inline: 4px; }
  .lc-faq h3 > button { gap: 12px; padding: 18px 14px; font-size: 17px; line-height: 1.4; }
  .lc-faq p { padding: 0 14px 20px; font-size: 15px; line-height: 1.65; }
  .lc-home-cta { padding: 28px 20px; border-radius: 28px; }
  .lc-home-cta p { margin-top: 16px; font-size: 16px; }
  .lc-home-cta .lc-button { width: 100%; }
  .lc-home-cta > div > div { margin-top: 24px; }
  .lc-packages-intro { padding-top: 20px; padding-bottom: 24px; }
  .lc-packages-intro > p:nth-of-type(2) { margin-top: 16px; font-size: 16px; line-height: 1.65; }
  .lc-package-filters { margin-inline: -16px; margin-top: 20px; padding-inline: 16px; padding-bottom: 8px; }
  .lc-package-filters > button { padding-inline: 16px; }
  .lc-comparison-scroll { margin-top: 24px; border-radius: 22px; }
  .lc-addons-section, .lc-included { padding: 24px 16px; border-radius: 26px; }
  .lc-addons-section li { padding: 18px; }
  .lc-package-detail { gap: 24px; padding-top: 12px; padding-bottom: 32px; }
  .lc-package-detail > div:first-child > div:first-child { border-radius: 26px; }
  .lc-gallery-thumbnails { gap: 10px; margin-top: 10px; }
  .lc-package-detail > div:last-child > p { font-size: 16px; line-height: 1.6; }
  .lc-package-detail > div:last-child > div:nth-of-type(1) > p:first-child { font-size: 40px; }
  .lc-package-facts { gap: 10px; margin-top: 24px; }
  .lc-package-facts > div { padding: 14px 12px; }
  .lc-package-facts dt { flex-wrap: wrap; gap: 6px; letter-spacing: .05em; }
  .lc-package-facts dd { font-size: 14px; }

  .lc-booking-page { padding-top: 20px; }
  .lc-booking-page h1 { font-size: 32px; }
  .lc-booking-grid { margin-top: 24px; }
  .lc-booking-panel { padding: 16px 14px; border-radius: 24px; }
  .lc-booking-panel > div:first-child > div:first-child { margin-bottom: 24px; }
  .lc-booking-panel h2 { font-size: 26px; line-height: 1.2; }
  .lc-booking-panel h2 + p { font-size: 15px; line-height: 1.6; }
  .lc-package-choices { gap: 12px; grid-template-columns: minmax(0, 1fr); }
  .lc-package-choice { padding: 12px; gap: 10px; border-radius: 20px; }
  .lc-package-choice > span:first-child { width: 64px; height: 80px; border-radius: 14px; }
  .lc-package-choice > span:nth-child(2) > span:first-child { font-size: 10px; letter-spacing: .06em; }
  .lc-package-choice > span:nth-child(2) > span:nth-child(2) { font-size: 17px; }
  .lc-calendar { padding: 12px 8px; border-radius: 20px; }
  .lc-calendar > div:first-child { gap: 4px; }
  .lc-calendar > div:first-child button { width: 44px; height: 44px; flex-shrink: 0; }
  .lc-calendar > div:first-child p { text-align: center; font-size: 17px; line-height: 1.3; }
  .lc-calendar [role="grid"] { gap: 2px; margin-top: 12px; }
  .lc-calendar [role="columnheader"] { padding-block: 6px; font-size: 10px; }
  .lc-calendar [role="gridcell"] { min-width: 0; height: 44px; max-width: none; aspect-ratio: auto; font-size: 14px; }
  .lc-calendar > div:last-child { gap: 8px 16px; margin-top: 12px; padding-top: 12px; }
  .lc-booking-actions { padding-top: 20px; }
  .lc-booking-actions > .lc-button { width: 100%; padding-inline: 12px; }
  .lc-booking-addons > li { padding: 16px; }
  .lc-booking-addons > li > div:first-child { gap: 12px; }
  .lc-booking-addons > li > div:first-child > span { width: 40px; height: 40px; }
  .lc-booking-totalbar > button { padding-left: 16px; border-radius: 24px; }
  .lc-booking-totalbar > button > span:last-child { padding-inline: 12px; }
  .lc-booking-summary { padding: 18px; border-radius: 24px; }

  .lc-footer { margin-top: 32px; }
  .lc-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 16px; padding-block: 32px; }
  .lc-footer-grid > div { min-width: 0; }
  .lc-footer-grid > div:first-child, .lc-footer-grid > div:last-child { grid-column: 1 / -1; max-width: none; }
  .lc-footer-grid > div:first-child p { margin-top: 14px; font-size: 14px; }
  .lc-footer-grid ul { margin-top: 12px; }
  .lc-footer-grid li + li { margin-top: 0; }
  .lc-footer-grid li a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; overflow-wrap: anywhere; }
  .lc-footer-grid li a svg { flex-shrink: 0; }
  .lc-footer-grid > div:last-child li:last-child { min-height: 44px; font-size: 14px; }
  .lc-footer > div:last-child .lc-container { gap: 8px; padding-block: 20px; font-size: 12px; }
}

@media (min-width: 420px) and (max-width: 639px) {
  .lc-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-hero-actions .lc-button { padding-inline: 12px; }
}
@media (max-width: 359px) {
  .lc-booking-panel { padding-inline: 10px; }
  .lc-package-choice > span:first-child { width: 52px; height: 72px; }
  .lc-how-card { padding: 16px; column-gap: 12px; }
  .lc-party-stat { padding-inline: 8px; }
}
@media (min-width: 640px) and (max-width: 767px) {
  .lc-main .grid:has(> div > .lc-package-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-package-card-body { padding-inline: 8px; }
  .lc-package-choice > span:first-child { width: 56px; height: 72px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .lc-package-choices { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: none) {
  .lc-package-card > div:first-child > div > span:last-child { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .translated-state-label > span { transition: none; }
}