/* Shared responsive polish for phones and tablets. */
html { -webkit-text-size-adjust: 100%; }
img, svg, canvas { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }

@media (min-width: 701px) and (max-width: 1024px) {
  /* Two complete catalogue cards are more legible than three narrow cards. */
  .product-grid .product,
  #macro .product-grid .product {
    flex-basis: calc((100% - 18px) / 2);
    width: calc((100% - 18px) / 2);
  }

  .product-grid .product { height: 620px; }
  .product-grid .product-shot { aspect-ratio: 4 / 4.7; }
}

@media (max-width: 800px) {
  /* Product pages: keep the photography complete and the form comfortably sized. */
  .product-hero { gap: 8px; }
  .product-hero .main-image,
  body[data-product="secos"] .product-hero .main-image {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 620px;
  }
  .product-hero .main-image img { object-position: center; }
  .buybox h1 { max-width: 100%; overflow-wrap: break-word; }
  .configurator,
  .dose-configurator,
  .price-system-configurator,
  .price-system-configurator.has-product-strain { width: 100%; }
  .content .table,
  .content .equivalence-table { display: block; width: 100%; overflow-x: auto; }
  .related-card { min-width: 0; }

  /* Resource and orientation cards should never force horizontal scrolling. */
  .route,
  .panel,
  .format,
  .network article,
  .route-form,
  .route-result { min-width: 0; }
}

@media (max-width: 600px) {
  /* Centre the catalogue index in two balanced rows. */
  .jump {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: stretch;
    text-align: center;
  }
  .jump a {
    width: 100%;
    padding-inline: 5px;
    text-align: center;
  }

  /* Centre the active product card within the mobile slider viewport. */
  .product-grid,
  #macro .product-grid {
    padding-inline: max(4px, calc((100% - min(82vw, 320px)) / 2));
    scroll-padding-inline: max(4px, calc((100% - min(82vw, 320px)) / 2));
  }
  .product-grid .product,
  #macro .product-grid .product { scroll-snap-align: center; }

  /* Give product-page navigation a dedicated, balanced second row. */
  .top.shell:has(.top-links) {
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 0 9px;
  }
  .top.shell:has(.top-links) .brand { justify-self: center; }
  .top-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  .top-links > a,
  .top-links > a:not(.back),
  .top-links .back {
    display: inline-flex !important;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 7px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .62rem;
    line-height: 1.15;
    letter-spacing: .02em;
    text-align: center;
  }
  .top-links > a:not(.back) { background: rgba(255, 255, 255, .32); }
  .top-links .cart-link { gap: 5px; }

  .product-hero { padding-top: 10px; }
  .product-hero .main-image,
  body[data-product="secos"] .product-hero .main-image {
    aspect-ratio: 4 / 5;
    border-radius: 20px 20px 48px 20px;
  }
  .buybox { padding-top: 18px; }
  .buybox h1 { font-size: clamp(3.25rem, 17vw, 4.6rem); line-height: .9; }
  .buybox .lead { font-size: .96rem; }
  .content section { overflow-wrap: anywhere; }
  .selection-price { gap: 12px; }
  .selection-price > span { max-width: 55%; }
  .selection-price .price { flex: 0 0 auto; }

  /* Stable tap targets and single-column actions on small screens. */
  .form-actions,
  .result-tools { gap: 8px; }
  .form-actions button,
  .result-tools button,
  .cart-add button,
  .cart-add a { min-height: 48px; }
  .route-result h2 { overflow-wrap: anywhere; }
}

@media (max-width: 430px) {
  .top-links > a,
  .top-links > a:not(.back),
  .top-links .back { font-size: .58rem; }

  .cart-header .brand span,
  .top .brand span { font-size: 1.7rem; }
  .cart-header .back { max-width: 55%; text-align: center; line-height: 1.15; }
  .cart-panel { padding-inline: 16px; }

  .route-form .step,
  .route-result { padding-inline: 20px; }
  .step legend { font-size: 2.25rem; }
  .choice span { padding: 16px; }
}