/* Layout-only refinements. Load after revision.css and product-media.css. */

#ingredient-routes .source-powder-image { margin:26px 0 0; width:100%; aspect-ratio:3/2; max-height:280px; background:#f9f9f9; overflow:hidden; }
#ingredient-routes .source-powder-image img { display:block; width:100%; height:100%; object-fit:contain; padding:18px; }
@media(max-width:600px) {
  #ingredient-routes .source-powder-image { margin-top:22px; }
  #ingredient-routes .source-powder-image img { padding:10px; }
}

/* Keep short final lines balanced without changing the approved copy. */
.hero h1,
.hero-line,
.page-hero h1,
.section-heading h2,
.source-card h3,
.factory-extension h3,
.expertise-bridge h2,
.feature-copy h2,
.application-scene h2,
.cta h2 {
  text-wrap: balance;
}

/* Percentage tracks previously consumed the full row before its 10px gap. */
.specs > div {
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
}

.specs dt,
.specs dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Long bilingual labels can wrap while their arrow keeps its own space. */
.btn,
.text-link,
.section-link {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.btn > span,
.text-link > span,
.section-link > span {
  min-width: 0;
}

/* Equal-height format cards retain a common action baseline. */
.real-format-card,
.real-format-copy {
  display: flex;
  flex-direction: column;
}

.real-format-copy {
  flex: 1;
}

.real-format-copy .format-components {
  margin-bottom: 25px;
}

.real-format-copy .text-link {
  align-self: flex-start;
  margin-top: auto;
}

/* Give the seven manufacturing stages readable tracks on smaller desktops. */
@media (min-width: 601px) and (max-width: 1100px) {
  .factory-capability-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .factory-capability-item {
    border-bottom: 1px solid #dce4e9;
  }

  .factory-capability-item:nth-child(4n) {
    border-right: 0;
  }

  .factory-capability-item:nth-child(n + 5) {
    border-bottom: 0;
  }
}

@media (max-width: 900px) {
  /* A short landscape viewport must still expose the last navigation link. */
  #navigation {
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .nav-actions {
    flex-shrink: 0;
  }

  .nav-actions button {
    min-width: 44px;
    min-height: 44px;
  }

  #menu {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
}

@media (max-width: 600px) {
  .specs > div {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  }

  .text-link,
  .section-link {
    gap: 16px;
  }

  .factory-capability-item:nth-child(2n) {
    border-right: 0;
  }

  .factory-capability-item:last-child {
    border-bottom: 0;
  }
}