/* Mobile reading and controls, shared by every published locale. */
.info-brand, .info-brand > div, .brand, .brand > div { min-width: 0; max-width: 100%; }
.info-brand h1, .info-brand .eyebrow, .info-brand .beta-note,
.brand h1, .brand .eyebrow, .brand .beta-note { overflow-wrap: anywhere; max-width: 100%; }
.note-main > *, .note-section > *, .ja-search-actions, .tw-tags { min-width: 0; max-width: 100%; }
.note-section { grid-template-columns: minmax(0, 1fr); }
.note-detailed-search, #note-iherb-link { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.analysis-row bdi, .match-pill bdi { unicode-bidi: isolate; }
.analysis-row strong[dir="auto"] { unicode-bidi: plaintext; }
.analysis-row small { display: block; }
.analysis-original-label { font-size: 13px; color: #526270; }
.mobile-result-tools { display: none; }
.mobile-result-pages[hidden] { display: none; }
.note-directory-caution { margin-block: 12px; color: #526270; font-size: 13px; line-height: 1.6; }
.note-directory-caution > summary { min-height: 44px; padding-block: 10px; cursor: pointer; font-weight: 600; }
.note-directory-caution > p { margin: 4px 0 12px; }
.note-directory-caution:focus-within { outline-offset: 3px; }

@media (max-width: 760px) {
  .unified-site-header { gap: 12px; padding: 14px 12px; }
  .unified-site-header .info-brand, .unified-site-header .brand { gap: 10px; align-items: flex-start; }
  .unified-site-header .brand-mark { width: 36px; height: 36px; box-shadow: none; }
  .unified-site-header h1 { font-size: 24px; line-height: 1.35; margin-block: 4px 8px; }
  .unified-site-header .eyebrow { font-size: 12px; margin-block: 0 4px; }
  .unified-site-header .beta-note { font-size: 14px; line-height: 1.6; margin-block: 0; }
  .unified-site-header .data-status { font-size: 12px; margin-block: 6px 0; }
  .info-body, .note-detail-unified .info-body.note-layout { padding: 16px 12px; }
  .note-main, .note-section, .note-section > *, .note-search-links,
  .ja-search-actions, .ja-aliases, .tw-tags, .ar-note-aliases { min-width: 0; max-width: 100%; }
  .info-body h2 { overflow-wrap: anywhere; max-width: 100%; }
  .notes-grid { grid-template-columns: minmax(0, 1fr); }
  .notes-shell .info-body { gap: 12px; }
  .note-directory-search { margin-bottom: 0; }
  .note-directory-caution { margin-block: 0; }
  .note-directory-caution + section { margin-top: 0; }
  .ja-index-intro { margin-block: 8px; }
  .ja-index-intro h2 { font-size: 16px; margin-block: 4px; }
  .ja-index-intro p { font-size: 13px; margin-block: 4px; }
  .ingredient-autocomplete { position: static; width: 100%; margin-top: 6px; max-height: min(220px, 35dvh); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
  .ingredient-input-wrap { min-width: 0; }
  .ingredient-autocomplete-option { min-height: 48px; }
  .search-guide-entry { flex-direction: column; align-items: flex-end; }
  .search-guide-entry .search-guide-hint { position: static; width: 100%; margin-top: 8px; }
  .search-guide-entry .search-guide-hint::before { display: none; }
  .search-guide-entry .search-guide-hint button { min-height: 44px; }
  .icon-button.remove-condition { width: 44px; height: 44px; min-width: 44px; }
  .condition-row, .condition-list.is-advanced .condition-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .sort-button, .type-button, #foodLikeFilterButton,
  #brandFilterToggleButton, #clearBrandFilterButton,
  #prevPageButton, #nextPageButton { min-height: 44px; padding: 8px 10px; font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
  #brandFilterToggleButton, #clearBrandFilterButton { min-width: 44px; }
  .sort-button, .type-button, #foodLikeFilterButton { color: #465663; }
  .type-button span, .type-button.active span { font-size: 13px; color: #465663; }
  .sort-button.active, .type-button.active { color: #17242d; }
  .match-pill.included { color: #116436; }
  .match-pill, .match-pill .amount, .meta-line, .active-summary { font-size: 13px; line-height: 1.6; }
  .meta-line, .active-summary, .match-pill.excluded-ok { color: #526270; }
  .product-side .analysis-trigger-button { min-height: 44px; padding: 8px 3px; font-size: 12px; color: #116436; word-break: keep-all; }
  .brand-filter-option { min-height: 44px; }
  .brand-filter-head { flex-wrap: wrap; gap: 8px; }
  .brand-filter-actions { flex-wrap: wrap; }
  .type-switch { flex-wrap: wrap; }
  .analysis-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; }
  .analysis-card-topline { min-height: 44px; padding-inline-end: 56px; }
  .analysis-image-frame { width: 72px; margin: 0; border-width: 1px; border-radius: 6px; }
  .analysis-product-meta { min-width: 0; }
  .analysis-product-meta h2 { font-size: 16px; line-height: 1.5; padding: 0; overflow-wrap: anywhere; }
  .analysis-product-meta > p { font-size: 14px; line-height: 1.6; }
  .analysis-row { min-width: 0; }
  .analysis-row > span { min-width: 0; overflow-wrap: anywhere; }
  .analysis-sheet { max-height: calc(100dvh - 20px); }
  .analysis-close { width: 44px; height: 44px; }
}
@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  .mobile-result-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; position: sticky; top: 0; z-index: 8; padding: 6px 0; background: #f7fafb; border-block: 1px solid #cfdfdf; }
  .mobile-result-tools button { min-height: 44px; min-width: 44px; padding: 8px 10px; border: 1px solid #bdced4; border-radius: 5px; color: #174663; background: #fff; font-size: 14px; font-weight: 600; }
  .mobile-result-tools button:disabled { color: #65717a; background: #edf1f4; cursor: default; }
  .mobile-result-tools button:focus-visible { outline: 2px solid #2468ce; outline-offset: 2px; }
  .mobile-result-pages { display: flex; align-items: center; gap: 6px; }
  .mobile-result-tools .mobile-page-status { font-size: 13px; color: #465663; }
  .analysis-open .mobile-result-tools, body:has(dialog[open]) .mobile-result-tools { visibility: hidden; }
  #resultList { scroll-margin-top: 70px; }
}
@media (max-width: 360px) {
  .unified-site-header .info-brand, .unified-site-header .brand { display: block; }
  .unified-site-header .brand-mark { float: inline-start; margin-inline-end: 8px; margin-block-end: 4px; }
  .unified-site-header h1 { clear: both; }
  .analysis-hero { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
  .analysis-image-frame { width: 56px; }
}