/* ============================================================================
   EGT RESPONSIVE 2026 — site-wide mobile / tablet layer
   Plain CSS, no framework, no build step. Loaded LAST so it wins.
   Breakpoints: 1024px (tablet landscape), 768px (tablet portrait / large
   phones), 480px (phones). Desktop (>1024px) is intentionally untouched.
   ============================================================================ */

/* --------------------------------------------------------------------------
   0. GLOBAL SAFETY NETS (all viewports)
   -------------------------------------------------------------------------- */
img { max-width: 100%; }
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* --------------------------------------------------------------------------
   1. TABLET LANDSCAPE AND BELOW (<=1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Fluid type scale — tablet */
  h1, .h1, .egt-title { font-size: clamp(28px, 4.5vw, 42px) !important; line-height: 1.15 !important; }
  h2, .h2 { font-size: clamp(23px, 3.6vw, 32px) !important; line-height: 1.2 !important; }
  h3, .h3 { font-size: clamp(18px, 2.6vw, 24px) !important; line-height: 1.3 !important; }
  body { font-size: 16px !important; }
  p, li { line-height: 1.65 !important; }

  /* Section rhythm — every section reads as its own block */
  section, .egt-page-section { padding-left: 20px !important; padding-right: 20px !important; }
  .egt-page-section { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* 4-up grids -> 2-up on tablet */
  .egt-products-grid,
  .egt-trust-strip,
  .svx-grid,
  .pdm-specs-meta-strip,
  .egt-ds-features-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* 2/3-col content grids -> single column stack */
  .eq-grid2,
  .gsc-grid,
  .ct-grid,
  .egt-ds-grid,
  .fg-row,
  .pdm-row2,
  .gscm-row2,
  .eq-commercial-grid,
  .egt-supplier-grid,
  .egt-supplier-shipping-grid,
  .ab-mv-grid,
  .egt-b2b-brief__grid,
  .egt-footer-grid,
  .ab-vals-wrap { grid-template-columns: 1fr !important; }

  /* Footer contact list -> 1 column */
  .egt-footer-contact-list { grid-template-columns: 1fr !important; }

  /* Tap targets */
  nav a, .egt-mobile-menu a, button { min-height: 44px; }
  .egt-mobile-menu a { display: flex !important; align-items: center !important; }

  /* Forms: full-width fields */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], select, textarea {
    width: 100% !important; max-width: 100% !important;
    font-size: 16px !important; /* stops iOS auto-zoom */
  }
}

/* --------------------------------------------------------------------------
   2. PHONES AND SMALL TABLETS (<=768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Fluid type scale — phones */
  h1, .h1, .egt-title { font-size: clamp(26px, 7vw, 34px) !important; }
  h2, .h2 { font-size: clamp(22px, 5.6vw, 28px) !important; }
  h3, .h3 { font-size: clamp(18px, 4.4vw, 22px) !important; }

  /* Tighter, consistent section spacing */
  section, .egt-page-section { padding-left: 16px !important; padding-right: 16px !important; }
  .egt-page-section { padding-top: 40px !important; padding-bottom: 40px !important; }
  section > h2:first-child, section > h1:first-child,
  .egt-page-section > h2:first-child { margin-top: 0 !important; }

  /* All multi-column grids -> single column */
  .egt-products-grid,
  .egt-trust-strip,
  .svx-grid,
  .pdm-specs-meta-strip,
  .egt-ds-features-row,
  .egt-inline-tools { grid-template-columns: 1fr !important; }

  /* Product cards: image on top, text below, breathing room */
  .egt-products-grid { gap: 20px !important; }
  .cs-card { grid-template-columns: 1fr !important; }
  .cs-ring { max-width: 100% !important; }

  /* Content images: never overflow, keep aspect */
  section img, main img, .egt-page-section img,
  .cs-card img, .egt-products-grid img {
    height: auto !important;
  }
  /* ...except fixed-height cover imagery (slider, card art) */
  .egt-slide-img { height: 100% !important; }

  /* Slideshow: shorter on phones, text readable */
  .egt-slideshow-wrap { margin: 12px auto !important; }
  .egt-slide-overlay { padding: 20px !important; align-items: flex-end !important; }
  .egt-slide-content h2, .egt-slide-content .egt-slide-title {
    font-size: clamp(20px, 5.4vw, 26px) !important;
  }
  .egt-slide-content p { font-size: 14px !important; }

  /* Quote / RFQ form: one field per row */
  .eq-grid2, .eq-commercial-grid, .gscm-row2, .pdm-row2 { grid-template-columns: 1fr !important; }
  .eq-bottom { grid-template-columns: 1fr !important; }

  /* Footer stacks */
  .egt-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Buttons: full-width-ish, thumb-friendly */
  .egt-btn, .mobile-quote, .egt-b2b-button {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Tables scroll instead of breaking layout */
  table { display: block !important; overflow-x: auto !important; max-width: 100% !important; }

  /* Long words / URLs don't force horizontal scroll */
  p, li, h1, h2, h3, h4, td, th { overflow-wrap: break-word !important; word-break: break-word !important; }
}

/* --------------------------------------------------------------------------
   3. SMALL PHONES (<=480px) — 375px / 414px sweet spot
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

  h1, .h1, .egt-title { font-size: clamp(24px, 7.4vw, 30px) !important; }
  h2, .h2 { font-size: clamp(20px, 6vw, 25px) !important; }

  section, .egt-page-section { padding-left: 14px !important; padding-right: 14px !important; }
  .egt-page-section { padding-top: 36px !important; padding-bottom: 36px !important; }

  /* Tighter gaps so sections don't feel endless */
  .egt-products-grid, .egt-trust-strip, .svx-grid { gap: 16px !important; }

  /* Header: compact */
  #egtMainHeader .egt-main-nav { padding: 0 12px !important; gap: 8px !important; }
}

/* ==========================================================================
   T. MOBILE VISUAL FIXES — 2026-09-26
   Root causes found by rendering the live site at real mobile widths:
   T1  Mobile menu: theme CSS forces white bg (!important) while the older
       inline header style keeps white links (!important) -> invisible text.
       Enforce one consistent dark pair here (sits under the dark header).
   T2  Stray "0" badge: #egtMainHeader .egt-cart-count absolute positioning
       also catches the menu's RFQ-cart count -> ripped to header corner.
   T3  DS hero collapsed: egt-experience-refresh.css forces
       min-height:0 !important + border-radius on .egt-home-hero, pushing the
       H1/kicker up behind the fixed header. Restore the DS hero design.
   T4  Showcase slider: egt-index-reference.css forces 300px height on mobile,
       clipping slide text under the 01/05 + Auto badges.
   ========================================================================== */

/* ---- T1. Mobile menu: consistent dark background + white links ---- */
.egt-mobile-menu{
  background:linear-gradient(180deg,#0c2c46,#061a2b) !important;
  background-image:linear-gradient(180deg,#0c2c46,#061a2b) !important;
  background-color:#0c2c46 !important;
}
.egt-mobile-menu a{ color:#ffffff !important; }
.egt-mobile-menu a:hover,
.egt-mobile-menu a:focus-visible{ background:rgba(255,255,255,.09) !important; }
/* supplier-portal row keeps its light card look inside the dark menu */
.egt-mobile-menu a[href="#supplier"]{
  background:#F1F5F9 !important;
  color:#0F172A !important;
}

/* ---- T2. Menu cart count stays inside its link ---- */
#egtMainHeader .egt-mobile-menu .egt-cart-count{
  position:static !important;
  top:auto !important; right:auto !important;
  margin-left:6px !important;
  transform:none !important;
}

/* ---- T3. DS hero: beat the legacy overrides (higher specificity wins) ---- */
main.egt-main-corridor .egt-home-hero.egt-ds-hero{
  min-height:clamp(560px,86vh,800px) !important;
  border-radius:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  width:100vw !important;
  max-width:100vw !important;
}
/* (desktop keeps DS content padding; mobile clearance is handled in the
   media query below) */

/* ---- T4. Showcase slider: room for text on phones ---- */
@media (max-width:768px){
  .egt-main-corridor .egt-slider-container{ height:450px !important; }
  #egtShowcaseSlider .egt-slide-overlay{ padding:20px 16px 48px !important; }
  #egtShowcaseSlider .egt-slider-status{ top:10px !important; right:10px !important; }
  #egtShowcaseSlider .egt-slide-heading{ font-size:1.18rem !important; line-height:1.3 !important; }
  #egtShowcaseSlider .egt-slide-desc{ font-size:.85rem !important; }
  /* DS hero: a little shorter on phones, content always clears the header */
  main.egt-main-corridor .egt-home-hero.egt-ds-hero{
    min-height:clamp(500px,80vh,640px) !important;
  }
  main.egt-main-corridor .egt-ds-hero-content{
    padding-top:110px !important;
    padding-bottom:56px !important;
  }
}

/* ---- T5. Contact: readable sub-line on the dark card ---- */
.ct-icard-sub{ color:rgba(255,255,255,.78) !important; }

/* ---- T6. Eyebrow kicker: don't break mid-phrase on small phones ---- */
@media (max-width:480px){
  .egt-b2b-brief__eyebrow{
    font-size:.66rem !important;
    letter-spacing:.1em !important;
    white-space:nowrap !important;
  }
  .ab-kicker{ font-size:.68rem !important; letter-spacing:.08em !important; }
  .gsc-head .ab-kicker{ max-width:calc(100% - 84px) !important; }
  /* search placeholders: smaller so the hint stays readable */
  .gsc-search-input::placeholder,
  .egt-prod-search-input::placeholder,
  .egt-catalogue-search input::placeholder,
  input[type="search"]::placeholder{ font-size:12px !important; }
}

/* ---- T7. Anchor jumps: never hide a heading under the fixed header ---- */
#egtQuoteFormSection, #sectors, #egtShowcaseSlider,
.egt-products-wrap, .egt-slideshow-wrap, .ab,
section[id]{ scroll-margin-top:92px !important; }

/* ==========================================================================
   U. COMPACT MOBILE PASS — 2026-09-26 (Sukh: "too lengthy, zoom out a little")
   U1  Slider arrows sat on top of the slide description text on phones.
       Dock them at the bottom corners beside the dots instead.
   U2  Founder name sat flush against the photo's gold frame — breathing room.
   U3  Trend chips were forced to 44px tall by the tap-target rule, making the
       sectors block very long. 38px keeps them tappable but compact.
   U4  General tightening: less section padding, smaller red pill, so the page
       feels like a normal website instead of an endless scroll.
   ========================================================================== */
@media (max-width:768px){
  /* U1 — slider arrows to bottom corners */
  #egtShowcaseSlider .egt-slider-arrow{
    top:auto !important;
    bottom:12px !important;
    transform:none !important;
    width:44px !important;
    height:44px !important;
    z-index:6 !important;
  }
  #egtShowcaseSlider .egt-slider-prev{ left:12px !important; right:auto !important; }
  #egtShowcaseSlider .egt-slider-next{ right:12px !important; left:auto !important; }
  #egtShowcaseSlider .egt-slider-dots{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    bottom:22px !important;
  }
  /* U2 — founder name breathing room */
  .cs-ring{ margin-bottom:30px !important; }
  .cs-name{ text-shadow:0 2px 10px rgba(0,0,0,.45); }
  /* U4 — tighter founder card */
  .cs{ padding-top:28px !important; padding-bottom:28px !important; }
}
@media (max-width:480px){
  /* U3 — compact trend chips */
  .gsc-trend-chip{ min-height:38px !important; font-size:.72rem !important; }
  /* U4 — less lengthy sections */
  .egt-page-section{ padding-top:28px !important; padding-bottom:28px !important; }
  .gsc-head{ margin-bottom:18px !important; }
  .gsc-trending-wrap{ margin-top:14px !important; }
  /* red "Global Sourcing Hub" pill: single line, clears the truck badge */
  .gsc-head .ab-kicker{
    font-size:.62rem !important;
    letter-spacing:.06em !important;
    padding:8px 18px !important;
    max-width:calc(100% - 120px) !important;
    white-space:nowrap !important;
  }
}

/* ==========================================================================
   X. HERO BANNER FULL-BLEED — 2026-09-26 (Sukh: "fix banner image")
   Overrides the mobile-only rule below for this one case: legacy rules
   (main.egt-main-corridor .egt-home-hero img @ 0,2,1 with height:auto +
   aspect-ratio + radius) were shrinking the hero photo into a band with a
   grey void below it on desktop too. This 0,3,2 rule beats them at every
   width so the slide photo always covers the whole banner.
   ========================================================================== */
main.egt-main-corridor .egt-ds-hero .egt-ds-hero-slide img{
  width:100% !important; height:100% !important; max-height:none !important;
  aspect-ratio:auto !important; border-radius:0 !important;
  object-fit:cover !important; object-position:center !important;
  display:block !important; margin:0 !important; padding:0 !important;
}

/* ==========================================================================
   W. MOBILE DESIGN POLISH — 2026-09-26 (Sukh: make mobile look professional)
   STRICTLY mobile (max-width:768px). Desktop untouched.
   W1  Hero goes cinematic: Ken Burns drift on the active slide, staggered
       entrance re-enabled on mobile, lighter scrim so the photo shows,
       tighter content balance.
   W2  Ghost numerals ("01") shrunk/contained on phones.
   W3  Product images locked to a consistent 4:3 frame.
   W4  Buttons get press feedback; cards get refined elevation.
   ========================================================================== */
@keyframes w-rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@media (max-width:768px){
  /* W1 — cinematic hero: full-bleed handled globally in section X above.
     Ken Burns drift ships in the design system (ds-kenburns). */
  body.ds-ready .egt-ds-hero-content > *{ animation:w-rise .8s cubic-bezier(.16,1,.3,1) backwards !important; }
  body.ds-ready .egt-ds-hero-content > *:nth-child(1){ animation-delay:.05s !important; }
  body.ds-ready .egt-ds-hero-content > *:nth-child(2){ animation-delay:.16s !important; }
  body.ds-ready .egt-ds-hero-content > *:nth-child(3){ animation-delay:.28s !important; }
  body.ds-ready .egt-ds-hero-content > *:nth-child(4){ animation-delay:.4s !important; }
  .egt-ds-hero-scrim{
    background:linear-gradient(180deg,
      rgba(8,22,34,.18) 0%,
      rgba(8,22,34,.5) 45%,
      rgba(8,22,34,.93) 100%) !important;
  }
  .egt-ds-hero-content{ padding:60px 22px 36px !important; }
  .egt-ds-hero-title{ text-shadow:0 2px 18px rgba(0,0,0,.35); }
  /* W2 — ghost numerals contained */
  .svx-bignum{ font-size:3.6rem !important; bottom:-8px !important; right:2px !important; }
  /* W3 — consistent product image frames */
  .egt-product-image{ aspect-ratio:4/3 !important; }
  .egt-product-image img{ width:100% !important; height:100% !important; object-fit:cover !important; }
  /* W4 — press feedback + card elevation */
  .egt-ds-btn:active{ transform:scale(.96) !important; }
  .egt-ds-btn{ transition:transform .18s ease, background .25s ease, box-shadow .25s ease !important; }
  .npc-card, .svx-card{ box-shadow:0 10px 28px rgba(15,23,42,.08) !important; }
}
/* ==========================================================================
   Z. DESKTOP SINGLE STATIC BANNER — 2026-09-26 (Sukh: like the approved
   mockup — a contained rounded banner sitting between the side panels, NOT
   full-bleed, image shown whole, never cropped). Strictly min-width:769px.
   Mobile keeps the 4-slide crossfade + headline. NOTE: selectors here are
   deliberately 0,3,1 — legacy !important rules (.egt-home-hero img with
   max-height:520px + object-fit:cover in egt-modern-theme, and
   main.egt-main-corridor .egt-home-hero img with aspect-ratio:3392/1248 in
   egt-index-reference) otherwise crop/squish this image.
   ========================================================================== */
.egt-ds-hero .egt-ds-hero-static{ display:none; }
@media (min-width:769px){
  main.egt-main-corridor .egt-home-hero.egt-ds-hero{
    display:block !important; min-height:0 !important;
    width:auto !important; max-width:100% !important;
    margin:14px 0 !important;
    border:1px solid rgba(15,40,63,.10) !important;
    border-radius:22px !important; overflow:hidden !important;
    box-shadow:0 18px 50px rgba(8,22,34,.14) !important;
    background:#fff !important;
  }
  main.egt-main-corridor .egt-ds-hero .egt-ds-hero-static{
    display:block !important; width:100% !important;
    height:auto !important; max-height:none !important;
    aspect-ratio:auto !important; object-fit:fill !important;
    border-radius:0 !important; transform:none !important;
  }
  .egt-ds-hero .egt-ds-hero-slides,
  .egt-ds-hero .egt-ds-hero-scrim,
  .egt-ds-hero .egt-ds-hero-content,
  .egt-ds-hero .egt-ds-hero-pause{ display:none !important; }
}

/* ==========================================================================
   Z2. MOBILE STATIC BANNER — 2026-09-26 (Sukh: "not this sliding")
   Mobile hero becomes the same single static B2B banner as desktop —
   no slider. 0,3,1 selectors beat the legacy !important img rules,
   same approach as section Z. Desktop (min-width:769px) untouched.
   ========================================================================== */
@media (max-width:768px){
  main.egt-main-corridor .egt-home-hero.egt-ds-hero{
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    width:auto !important;
    max-width:100% !important;
    margin:12px 0 0 !important;
    padding:0 !important;
    border:1px solid rgba(15,40,63,.10) !important;
    border-radius:14px !important;
    overflow:hidden !important;
    box-shadow:0 12px 34px rgba(8,22,34,.12) !important;
    background:#fff !important;
    align-items:stretch !important;
  }
  main.egt-main-corridor .egt-ds-hero .egt-ds-hero-static{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:fill !important;
    border-radius:0 !important;
    transform:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  main.egt-main-corridor .egt-ds-hero .egt-ds-hero-slides,
  main.egt-main-corridor .egt-ds-hero .egt-ds-hero-scrim,
  main.egt-main-corridor .egt-ds-hero .egt-ds-hero-content,
  main.egt-main-corridor .egt-ds-hero .egt-ds-hero-pause{
    display:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .egt-ds-hero-slide.is-active img{ animation:none !important; }
  body.ds-ready .egt-ds-hero-content > *{ animation:none !important; }
}