/* Approved mobile catalog: two columns and symbols without visible captions. */
@media (max-width:700px) {
  #catalog.wrap { width:calc(100% - 28px) }
  #catalog .section-heading { margin-bottom:1.25rem }
  #catalog .section-heading h2 { font-size:2.3rem }
  #catalog .section-intro { font-size:.9rem }
  #catalog .catalog-group-filters { gap:.65rem; margin-bottom:1rem }
  #catalog .catalog-group-card { padding:.35rem .35rem .6rem; border-radius:.75rem }
  #catalog .catalog-group-photo { aspect-ratio:1.65/1 }
  #catalog .catalog-group-name { font-size:.84rem; margin:.5rem .2rem 0 }
  #catalog .catalog-group-count { font-size:.72rem; margin:.2rem .2rem 0 }
  #products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem .7rem; align-items:stretch }
  #products .product-label-overlay { padding:.4rem; gap:.35rem }
  #products .product-type { font-size:.65rem; padding:.2rem .4rem; line-height:1.25 }
  #products .product-dietary-badges { gap:3px }
  #products .product-dietary-badge { padding:2px 4px; gap:3px; font-size:10px; font-weight:500; line-height:1.15; border-radius:3px; box-shadow:none }
  #products .product-dietary-badge svg { flex:0 0 12px; width:12px; height:12px }
  #products .product-dietary-badge span { overflow-wrap:normal }
  #products .product-details { padding:.7rem 0 .2rem }
  #products .product-category { font-size:.7rem; margin-bottom:.3rem }
  #products .product-title-row { gap:.25rem }
  #products h3 { font-size:1.15rem; line-height:1.2; overflow-wrap:anywhere }
  #products .product-open { font-size:.9rem; flex-shrink:0 }
  #products .product-description { font-size:.8rem; line-height:1.4; margin-top:.45rem }
  #products .product-purchase { flex-direction:column; align-items:stretch; gap:.5rem; padding:.65rem 0 0 }
  #products .product-price { white-space:normal; font-size:1rem; line-height:1.35 }
  #products .product-price span { font-size:.72rem }
  #products .add-product { width:100%; min-height:44px; padding:.5rem .65rem; font-size:.84rem }
}

/* Keep the symbol meanings available to screen readers. */
@media (max-width:700px) {
  #products .product-dietary-badges { gap:4px }
  #products .product-dietary-badge { position:relative; width:24px; height:24px; padding:3px; border-radius:50%; justify-content:center; flex:0 0 24px }
  #products .product-dietary-badge svg { width:16px; height:16px; flex:0 0 16px }
  #products .product-dietary-badge span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
}