/* Mobile adaptations layered on top of the desktop-first inline styles used across the site.
   Every layout grid in this codebase is written as an inline style (React style objects), so
   the [style*="..."] attribute selectors below retarget them at narrow widths without having
   to touch every component — React renders `gridTemplateColumns` as the literal CSS property
   `grid-template-columns` in the DOM, which is what these selectors match against. */

html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 860px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Grid items default to min-width: auto, sized to their content's minimum — a single
     wide/unwrappable child (like a cart row with several fixed-width columns) can force the
     whole 1-column track wider than the viewport, dragging every sibling card along with it
     even though nothing looks wrong with the sibling itself. This resets that default so
     content can actually shrink to fit instead of pushing the page wide. */
  [style*="grid-template-columns"] > * {
    min-width: 0;
  }

  h1 { font-size: 30px !important; line-height: 1.2 !important; }
  h2 { font-size: 24px !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 26px !important; }
}

/* Hero title ("Fourniture – Innovation – Performance") must stay on one line at any width —
   shrinks fluidly with the viewport instead of wrapping. The slope accounts for the fixed
   32px side padding on the hero section so the text keeps fitting down to ~360px screens. */
.idh-hero-title {
  font-size: clamp(13px, calc(4.6vw - 2px), 42px) !important;
}

/* The hero section's own inline padding (92px 32px 76px) is too tall/wide once the title is
   forced onto one small line — this is the only element using this gradient, so targeting it
   by its distinctive background value avoids needing to touch Home.jsx just for a class hook. */
@media (max-width: 480px) {
  [style*="gradient-navy-hero"] {
    padding: 56px 20px 48px !important;
  }
}

/* Navbar: desktop link row vs. mobile hamburger toggle. Controlled together with the JS
   open/close state in the Navbar component (_ds_bundle.js) — the dropdown panel itself only
   ever renders while that state is true, so it never needs a CSS rule of its own. */
.idh-navbar-links-desktop { display: flex; }
.idh-navbar-toggle { display: none; }

@media (max-width: 860px) {
  .idh-navbar-links-desktop { display: none; }
  .idh-navbar-toggle { display: flex !important; }
  .idh-navbar-phone-desktop { display: none; }
}

/* Cart row (Boutique.jsx): the quantity/price/remove group wraps onto its own line once the
   row is too narrow to fit next to the product image+name — this spreads it out full-width
   instead of leaving it bunched at its natural size on the left. */
@media (max-width: 480px) {
  .idh-cart-item-actions {
    width: 100%;
    justify-content: space-between !important;
  }
}

/* Search bar: the "Rechercher" submit button doesn't shrink below its text's natural width —
   drop it to its own full-width line under the input instead of letting it get clipped. */
@media (max-width: 480px) {
  .idh-searchbar-form button[type="submit"] {
    width: 100%;
    margin-top: 4px;
  }
}