/* Mobiele laag voor de Mondial Gifts-mock (Claude Design-handoff zonder <header>). Alleen actief onder 1024px; mobile-mg.js zet de data-mg-attributen. */
.mg-burger { display: none; }
.mg-drawer { display: none; }
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
  img, video { max-width: 100%; }

  /* Bovenste strook: alleen score + taal */
  [data-mg-top] { min-height: 34px !important; }
  [data-mg-top] > div:last-child > span { display: none !important; }

  /* Logo + zoekbalk + account/winkelwagen */
  [data-mg-head] { padding: 12px 16px !important; gap: 12px !important; }
  [data-mg-head] > div:first-child > div:first-child { font-size: 24px !important; }
  [data-mg-search] { flex: 1 1 100% !important; order: 3; min-width: 0 !important; }
  [data-mg-search] input { font-size: 14px !important; padding: 10px 14px !important; min-width: 0 !important; width: 100%; }
  [data-mg-search] button[title="AI-zoeken"] { padding: 0 8px !important; font-size: 0 !important; gap: 0 !important; }
  [data-mg-acts] { margin-left: auto; gap: 6px !important; }
  [data-mg-acts] > button:first-child > span:last-child { display: none !important; }
  [data-mg-acts] > button:first-child { padding: 7px !important; }
  [data-mg-acts] > a[href^="tel"] { display: none !important; }

  /* Navigatie: hamburger + lade i.p.v. de zes menuknoppen */
  [data-mg-navrow] { padding: 6px 12px !important; gap: 8px !important; flex-wrap: nowrap !important; }
  [data-mg-navrow] > button:not(.mg-burger) { display: none !important; }
  [data-mg-navrow] > a { padding: 10px 4px !important; white-space: nowrap; }
  [data-mg-navrow] > span { min-width: 0; }
  .mg-burger {
    display: inline-flex; align-items: center; gap: 10px; flex: none; height: 42px; padding: 0 14px 0 10px;
    border: 1px solid #DFDFDF; background: #fff; color: #495B68; font: 700 14px/1 Lato, sans-serif; letter-spacing: .3px; border-radius: 4px; cursor: pointer;
  }
  .mg-burger svg { width: 22px; height: 22px; display: block; }
  .mg-drawer {
    position: fixed; inset: 0; z-index: 1000; background: #fff; overflow-y: auto; padding: 14px 20px 40px; display: none; flex-direction: column;
    font-family: Lato, sans-serif; color: #3C3C3C;
  }
  .mg-drawer.open { display: flex; }
  .mg-drawer .mg-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #DFDFDF; margin-bottom: 8px; }
  .mg-drawer .mg-drawer-head b { font-size: 24px; font-weight: 300; color: #5B5A57; letter-spacing: -.5px; }
  .mg-drawer .mg-drawer-head b span { color: #EF8232; font-weight: 400; }
  .mg-drawer .mg-close { width: 40px; height: 40px; border: 1px solid #DFDFDF; background: #F5F5F5; border-radius: 4px; font-size: 22px; line-height: 1; color: #495B68; cursor: pointer; }
  .mg-drawer a { display: block; padding: 13px 0; border-bottom: 1px solid #EFEFEF; font-size: 17px; color: #495B68; text-decoration: none; }
  .mg-drawer a.mg-main { font-weight: 700; }
  .mg-drawer .mg-kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #9AA5AD; margin: 22px 0 4px; }
  .mg-drawer .mg-cta { margin-top: 22px; background: #D46B1C; color: #fff; text-align: center; font-weight: 700; border: 0; border-radius: 4px; padding: 15px; }
  body.mg-drawer-open { overflow: hidden; }

  /* Hero: lagere slide, kleinere kop */
  [data-mg-hero] { min-height: 360px !important; }
  [data-mg-hero] > div:last-child { padding: 48px 20px !important; }
  [data-mg-hero] h1 { font-size: 28px !important; }
  [data-mg-hero] p { font-size: 15px !important; }

  /* Carrousels: horizontaal scrollen i.p.v. pijltjes */
  [data-mg-scroll] { overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
  [data-mg-scroll]::-webkit-scrollbar { display: none; }
  [data-mg-scroll] > div { transform: none !important; transition: none !important; }
  [data-mg-scroll] > div > * { scroll-snap-align: start; }
  [data-mg-track="products"] > * { flex: 0 0 76% !important; min-width: 0 !important; }
  [data-mg-track="cats"] > * { flex: 0 0 46% !important; min-width: 0 !important; }
  [data-mg-arrows] { display: none !important; }

  /* Tabs: één kolom, panelen schuiven mee met de tab */
  [data-mg-tabs] > div { padding: 20px !important; grid-template-columns: 1fr !important; }
  [data-mg-tabs] img { height: 180px !important; }

  /* Secties: minder witruimte, kleinere koppen */
  h2 { font-size: 23px !important; }
  footer, [data-mg-foot] { padding-top: 32px !important; }
}
@media (max-width: 640px) {
  [data-mg-top] > div:first-child > span:last-child { display: none !important; }
  [data-mg-top] > div:last-child > div > button { padding: 4px 6px !important; }
  [data-mg-head] > div:first-child > div:first-child { font-size: 22px !important; }
  [data-mg-acts] > button:last-of-type { font-size: 0 !important; padding: 10px 12px !important; gap: 0 !important; }
  [data-mg-acts] > button:last-of-type > span:first-child { font-size: 18px !important; }
  [data-mg-acts] > button:last-of-type > span:last-child { font-size: 12px !important; }
  [data-mg-track="products"] > * { flex: 0 0 84% !important; }
  [data-mg-track="cats"] > * { flex: 0 0 62% !important; }
  [data-mg-acts] > button:last-of-type { padding: 10px 12px !important; }
}