/* Phone layouts for the furniture collections and their photo details.
   Keep the original desktop layout and the original photograph proportions. */
@media (max-width: 700px) {
  main[data-page="products"] .catalog-section,
  .collection-overview,
  .collection-overview-hero > *,
  .aurora-block-heading > *,
  .arco-scene > *,
  .serena-wall-spec-layout > *,
  .picnic-size-panel,
  .terra-size-panel {
    min-width: 0;
  }

  main[data-page="products"] .catalog-section :is(figcaption, dt, .aurora-card-description, .aurora-card-link, .filter, .text-link, .aurora-result-count, .aurora-real-note, .lumi-photo-note, .lumi-common-note, .lumi-scene-label, .terra-note, .terra-size-caption, .picnic-size-note, .arco-type-description),
  .collection-overview :is(figcaption, .collection-overview-short, .collection-overview-type, .collection-overview-list-heading p),
  .installed-photos :is(figcaption, .installed-photo-copy > span),
  .store-planning-example :is(figcaption, .store-planning-note, .store-planning-expand) {
    font-size: 14px;
    line-height: 1.8;
  }

  /* Small English section labels remain labels; body copy is at least 14px. */
  main[data-page="products"] .catalog-section .eyebrow {
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .12em;
  }

  main[data-page="products"] .catalog-section :is(p, figcaption, dd, h3, h4),
  .collection-overview :is(p, figcaption, h2, .collection-overview-type),
  .tori-case-story :is(p, figcaption, h2, h3) {
    overflow-wrap: anywhere;
  }

  main[data-page="products"] .catalog-section :is(.text-link, .aurora-spec-link, .arco-text-button, .roen-text-button) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 10px;
    white-space: normal;
  }

  :is(.harvest-section-links, .roen-section-links, .terra-section-links, .picnic-links, .aurora-hero-links, .arco-hero-copy .actions) {
    gap: 10px 18px;
  }

  .collection-overview-controls {
    flex-wrap: wrap;
    gap: 10px;
  }

  .collection-overview-controls button,
  .aurora-filters .filter,
  .roen-photo-switch .filter,
  .harvest-photo-switch .filter,
  .harvest-title-actions .filter,
  .harvest-storage-picks button {
    min-width: 44px;
    min-height: 44px;
    font-size: 14px;
  }

  .roen-photo-switch,
  .harvest-title-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .picnic-size-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .picnic-size-options button,
  .terra-width-options button {
    min-width: 0;
    min-height: 48px;
    font-size: 16px;
  }

  .picnic-dimensions > div,
  .serena-wall-spec-layout dl > div,
  .terra-fixed-sizes > div,
  .serena-sizes dl > div {
    min-width: 0;
  }

  .picnic-dimensions dd,
  .terra-selected-size p {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .picnic-dimensions dd span,
  .terra-fixed-sizes dd span,
  .picnic-size-label span,
  .terra-size-label > span,
  .terra-selected-size > span {
    font-size: 14px;
  }

  .serena-wall-spec-layout dd {
    font-size: 24px;
    overflow-wrap: anywhere;
  }

  /* A photo dialog starts below its close button, including first-photo tabs. */
  #detail-content > :is(.aurora-detail-gallery, .serena-detail-gallery, .harvest-detail, .roen-detail, .picnic-detail, .terra-detail) {
    padding: 64px 16px 18px;
  }

  #detail-content .serena-detail-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  #detail-content :is(.aurora-detail-gallery, .serena-detail-gallery, .harvest-detail, .roen-detail, .picnic-detail, .terra-detail) figure {
    min-width: 0;
    margin-inline: auto;
    width: 100%;
  }

  #detail-content :is(.aurora-detail-gallery > img, .serena-detail-gallery img, .harvest-detail-slide > img, .roen-detail figure img, .picnic-detail figure img, .terra-detail figure img) {
    width: 100%;
    height: auto;
    max-height: 62vh;
    max-height: 62svh;
    object-fit: contain;
  }

  #detail-content :is(.aurora-detail-specs dt, .aurora-detail-specs dd, .harvest-photo-dimensions small, .harvest-storage-hint, .harvest-storage-spec, .product-real-gallery figcaption),
  #detail-content :is(.aurora-detail-gallery, .serena-detail-gallery, .harvest-detail, .roen-detail, .picnic-detail, .terra-detail) figcaption {
    font-size: 14px;
    line-height: 1.8;
    overflow-wrap: anywhere;
  }

  #detail-content .aurora-detail-specs {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  #detail-content .product-real-gallery {
    padding: 24px 16px;
  }

  #detail-content .has-storage-details .harvest-photo-switch {
    padding-top: 0;
  }

  .harvest-photo-dimensions {
    gap: 16px;
    padding: 16px 12px;
  }

  .harvest-storage-picks button {
    padding-inline: 12px;
  }

  .tori-case-story :is(.tori-story-copy, .tori-caption-body, .tori-story-note, .tori-story-consult p, .tori-story-tags, .tori-photo-label) {
    font-size: 14px;
    line-height: 1.8;
  }

  #tori-photo-caption {
    font-size: 14px;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  .collection-overview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }

  .collection-overview-count {
    margin-right: 0;
    flex: 1 1 70px;
  }

  .collection-overview-controls .collection-overview-play {
    min-width: 80px;
    padding-inline: 10px;
  }

  .terra-width-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .terra-width-options button {
    padding-inline: 4px;
  }

  .terra-selected-size strong {
    font-size: 52px;
  }

  .arco-scene,
  .aurora-consult,
  .serena-sizes,
  .aurora-companion-sizes,
  .tori-story-consult {
    padding-inline: 18px;
  }
}