/* Let navigation controls fit beside the logo without widening the page. */
@media (max-width: 1100px) {
  .header { height:76px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; padding:0 4%; }
  .header .brand { min-width:0; max-width:210px; }
  .header .brand img { width:100%; max-width:210px; height:60px; }
  .header .menu { display:block; margin:0; }
  .header .menu,.header .quote-open { min-height:44px; padding:10px 12px; font-size:14px; }
  .header .quote-open { gap:6px; }
  .header .quote-open #quoteCount { margin:0; }
  .header nav { display:none; }
  .header nav.open { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:20px; margin:0; padding:24px 5%; background:#fff; box-shadow:0 15px 30px #00182822; }
}

@media (max-width: 700px) {
  /* Product photos should become smaller on phones, with the full item visible. */
  .catalog-grid .catalog-image { height:170px; }
  .catalog-grid .catalog-image img { max-width:100%; object-fit:contain; }
  .category-modal-head > div { min-width:0; overflow-wrap:anywhere; }
  .catalog-pagination { flex-wrap:wrap; gap:8px; }
  .catalog-pagination span { min-width:0; }

  /* Spacious category cards, with a contained image above readable copy. */
  .categories { grid-template-columns:minmax(0,1fr); gap:16px; padding:0 16px 48px; background:#fff; }
  .categories .category-card { min-width:0; min-height:0; overflow:hidden; border-radius:12px; }
  .categories .photo-category { display:block; padding:0!important; }
  .categories .category-photo,.categories .category-photo-pair,
  .categories .category-photo-grid,.categories .category-showcase { width:100%; height:clamp(128px,36vw,160px); border-radius:0; object-fit:contain; object-position:center; }
  .categories .category-photo-pair img { min-width:0; height:100%; padding:4px; }
  .categories .category-photo-grid img { object-fit:contain; object-position:center; }
  .categories .photo-category > span,.categories .category-copy h3 small { display:none; }
  .categories .category-copy { min-width:0; padding:16px 18px 14px; }
  .categories h3 { font-size:clamp(22px,5.8vw,24px); line-height:1.25; margin:0; overflow-wrap:break-word; }
  .categories .category-copy p { display:block; font-size:16px; line-height:1.5; margin:10px 0 0; }
  .categories .category-open { position:static; display:inline-flex; align-items:center; gap:6px; min-height:44px; max-width:100%; margin-top:10px; padding:6px 0; border:0; font-size:14px; line-height:1.4; white-space:normal; text-align:left; text-decoration:underline; text-underline-offset:4px; }
}

@media (max-width: 560px) {
  .header .brand { max-width:165px; }
  .header .brand img { height:56px; }
  .header .menu,.header .quote-open { padding:10px; }

  .hero h1 { font-size:clamp(34px,10.5vw,42px); overflow-wrap:break-word; }
  .hero-content > p:not(.eyebrow) { font-size:16px; }
  .hero-card { max-width:100%; }
  .hero-card strong { font-size:24px; }
  .intro { padding:0 16px; }
  .intro h2 { font-size:34px; }

  .drawer { overflow-y:auto; overscroll-behavior:contain; padding:20px; }
  .quote-line { grid-template-columns:44px minmax(0,1fr) auto; gap:8px; }
  .quote-thumb { width:44px; height:44px; }
  .quote-info { min-width:0; overflow-wrap:anywhere; }
  .quote-items { padding-right:0; }
  .assistant-basket-lines { overflow-wrap:anywhere; }
  .store-assistant-launcher { max-width:calc(100% - 28px); font-size:13px; padding:11px 14px; min-height:44px; }
}