/* ==================================================================
   Mobiele navigatie + pagina Op bestelling
   ------------------------------------------------------------------
   Alles wat de telefoon raakt staat onder max-width:768px, het breekpunt
   dat de rest van het thema al gebruikt. Daarboven verandert er niets,
   behalve dat de nieuwe knoppen verborgen blijven.
   ================================================================== */

/* Elementen die alleen op de telefoon bestaan */
.mh-knop, .tb-koers, .shopbalk { display:none; }

/* ------------------------------------------------------------------ */
/* Telefoon                                                            */
/* ------------------------------------------------------------------ */
@media (max-width:768px){

  /* -- Bovenbalk: links de lopende tekst, rechts vast koers, valuta en taal -- */
  .topbar{ padding:0 0 0 12px; min-height:40px; gap:6px; }
  .topbar-msg{ text-align:left; text-overflow:clip; }
  .topbar-msg .tb-promo{ display:inline !important; }
  .topbar-msg .tb-sep-koers,
  .topbar-msg .tb-koers-msg{ display:none !important; }
  .topbar-msg .tb-scroll{ display:inline-flex !important; white-space:nowrap; animation:tb-slide 22s linear infinite !important; }
  .topbar-msg .tb-item{ display:inline-flex !important; align-items:center; padding-right:36px !important; }
  .topbar-controls{ gap:0; padding-right:4px; background:var(--black,#111); position:relative; }
  /* Zachte overgang zodat de lopende tekst onder de knoppen wegloopt */
  .topbar-controls::before{ content:''; position:absolute; top:0; bottom:0; left:-18px; width:18px; background:linear-gradient(to right, rgba(17,17,17,0), var(--black,#111)); pointer-events:none; }
  .tb-koers{ order:1; }
  .topbar-controls .montas-curr{ order:2; }
  .topbar-controls .lang-dd{ order:3; }
  .topbar-controls .tb-home{ order:4; }
  .topbar-controls .lang-code{ display:inline !important; }
  .tb-koers{ display:inline; padding:0 6px; color:#d6d6d6; font-size:12px; font-weight:600; white-space:nowrap; }
  .topbar-controls .montas-curr{ height:40px; padding:0 4px; border:none; background:transparent; font-size:12px; font-weight:700; }
  .topbar-controls .lang-btn{ height:40px; padding:0 6px; border:none; background:transparent; }
  .topbar-controls .lang-btn:hover{ background:rgba(255,255,255,.08); }

  /* -- Kop: Menu links, logo in het midden, Zoeken en Account rechts -- */
  header{ position:relative !important; border-bottom:1px solid #ececec; box-shadow:none; }
  header .container{ padding:0; }
  .header-inner{ display:grid !important; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; height:60px; padding:0 6px !important; gap:0 !important; }
  .mh-knop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:48px; height:52px; padding:0; border:none; background:none; color:#111; cursor:pointer; font-family:'Barlow',sans-serif; font-size:10px; font-weight:500; line-height:1; }
  .mh-knop span{ color:#5f5f5f; }
  .mh-knop svg{ width:20px; height:20px; flex:none; }
  .mh-menu{ grid-column:1; justify-self:start; }
  .header-inner .logo{ grid-column:2; justify-self:center; }
  .header-inner .logo img{ height:24px; }
  .header-actions{ grid-column:3; justify-self:end; margin-left:0 !important; gap:0; align-items:center; }
  .header-actions .icon-btn{ display:flex; width:48px; height:52px; padding:0; justify-content:center; gap:3px; font-size:10px; font-weight:500; color:#5f5f5f; border-radius:0; }
  .header-actions .icon-btn:hover{ background:none; }
  .header-actions .icon-btn svg{ width:19px; height:19px; color:#111; stroke-width:1.8; }
  .header-actions .montas-wish-link{ display:none !important; }
  body.heeft-shopbalk .header-actions .cart-btn{ display:none; }
  header.zoek-open .mh-zoek span,
  header.zoek-open .mh-zoek{ color:var(--red,#E30613); }

  /* Zoekbalk klapt open onder de kop */
  .header-inner .search-wrap{ display:none; position:absolute; left:0; right:0; top:100%; z-index:950; padding:10px 12px 12px; background:#fff; border-bottom:1px solid #ececec; box-shadow:0 14px 24px -14px rgba(0,0,0,.25); }
  header.zoek-open .search-wrap{ display:block; }
  header.zoek-open .search-bar{ display:flex !important; }
  .header-inner .search-bar input{ font-size:16px; padding:10px 12px; min-width:0; } /* 16px: voorkomt inzoomen op iOS */
  .header-inner .search-bar button[type="submit"]{ height:44px; }

  /* De zwarte navbalk is op de telefoon vervangen door kop + menu + onderbalk */
  nav.mainnav{ display:none !important; }

  /* -- Onderbalk -- */
  .shopbalk{
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed; left:0; right:0; bottom:0; z-index:1000;
    background:rgba(255,255,255,.97); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
    border-top:1px solid #e6e6e6;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .sb-vak{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:58px; padding:7px 2px 9px; color:#5f5f5f; font-family:'Barlow',sans-serif; font-size:11px; font-weight:600; line-height:1.1; text-align:center; text-decoration:none; }
  .sb-vak:hover{ color:#111; }
  .sb-vak.is-actief{ color:#111; font-weight:700; }
  .sb-vak.is-actief::after{ content:''; position:absolute; left:50%; bottom:3px; width:18px; height:3px; margin-left:-9px; border-radius:2px; background:var(--red,#E30613); }
  .sb-vak svg{ display:block; flex:none; }
  .sb-ico{ position:relative; display:block; line-height:0; }
  .sb-label{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sb-stip{ position:absolute; top:-2px; right:-3px; width:9px; height:9px; border-radius:50%; background:var(--red,#E30613); box-shadow:0 0 0 2px #fff; }
  .sb-teller{ position:absolute; top:-6px; right:-10px; min-width:18px; height:18px; padding:0 4px; box-sizing:border-box; border-radius:99px; background:#111; color:#fff; font-size:10px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; }
  .sb-teller.is-empty{ display:none; }

  /* Ruimte onder de pagina, en zwevende knoppen boven de balk */
  body.heeft-shopbalk{ padding-bottom:calc(58px + env(safe-area-inset-bottom,0px)); }
  body.heeft-shopbalk .wa-float{ bottom:calc(70px + env(safe-area-inset-bottom,0px)); }
  body.heeft-shopbalk .back-top{ right:12px; bottom:calc(126px + env(safe-area-inset-bottom,0px)); }
  body.heeft-shopbalk .chat-panel{ bottom:calc(128px + env(safe-area-inset-bottom,0px)); }
  body.heeft-shopbalk .toast{ bottom:calc(74px + env(safe-area-inset-bottom,0px)); }
}

/* ------------------------------------------------------------------ */
/* Menulade                                                            */
/* ------------------------------------------------------------------ */
.mobile-menu.mm{ display:none; position:fixed; inset:0; z-index:1200; overflow:hidden; background:#111; color:#fff; font-family:'Barlow',sans-serif; }
.mobile-menu.mm.open{ display:block; }
html.mm-vast, html.mm-vast body{ overflow:hidden; }
.mm a{ text-decoration:none; }
.mm :focus-visible{ outline:2px solid #fff; outline-offset:-2px; }
.mm .mm-laag :focus-visible{ outline-color:#111; }
.mm .mm-laag-kop :focus-visible{ outline-color:#fff; }

.mm-paneel{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:env(safe-area-inset-bottom,0px); }
.mm-hoofd{ background:#111; }
.mm-laag{ background:#fff; color:#111; transform:translateX(100%); transition:transform .26s cubic-bezier(.2,.7,.2,1); }
.mm-laag.is-open{ transform:none; }
@media (prefers-reduced-motion:reduce){ .mm-laag{ transition:none; } }

.mm-kop{ height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 8px 0 20px; border-bottom:1px solid #262626; }
.mm-logo img{ display:block; height:20px; width:auto; filter:brightness(0) invert(1); }
.mm-knop{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; padding:0; border:none; background:none; color:#fff; cursor:pointer; }

.mm-zoek{ margin:16px 20px 8px; display:flex; align-items:center; gap:10px; height:48px; padding:0 14px; border-radius:12px; background:#1f1f1f; color:#a3a3a3; }
.mm-zoek:focus-within{ box-shadow:inset 0 0 0 2px #fff; }
.mm-zoek input{ flex:1; min-width:0; height:100%; border:none; background:transparent; color:#fff; font-family:'Barlow',sans-serif; font-size:16px; font-weight:500; outline:none; }
.mm-zoek input::placeholder{ color:#a3a3a3; }

.mm-agent{ margin:8px 20px 0; display:flex; align-items:center; justify-content:space-between; height:48px; padding:0 14px; border-radius:12px; background:var(--red,#E30613); color:#fff !important; font-weight:700; }

.mm-lijst{ padding-top:8px; }
.mm-rij{ display:flex; align-items:center; gap:14px; width:100%; min-height:64px; margin:0; padding:0 20px; border:none; border-bottom:1px solid #262626; background:none; color:#fff !important; text-align:left; font:inherit; cursor:pointer; }
.mm-nr{ width:22px; flex:none; font-size:12px; font-weight:600; color:#8c8c8c; }
.mm-naam{ flex:1; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:30px; line-height:1; text-transform:uppercase; }
.mm-pijl{ flex:none; }
.mm-rij--groot{ min-height:72px; }
.mm-rij--groot .mm-naam{ font-weight:900; font-size:38px; }
.mm-rij--rood{ min-height:88px; border-bottom:none; background:var(--red,#E30613); }
.mm-rij--rood .mm-nr{ color:#fff; }
.mm-naam-blok{ flex:1; display:flex; flex-direction:column; gap:4px; }
.mm-rij--rood .mm-naam{ font-weight:900; font-size:38px; }
.mm-sub{ font-size:13px; font-weight:600; line-height:1.3; }

.mm-blok{ padding:28px 20px 0; }
.mm-kopje{ margin:0 0 12px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#a3a3a3; }

.mm-rail{ display:flex; gap:8px; margin:0 -20px; padding:0 20px; overflow-x:auto; scrollbar-width:none; }
.mm-rail::-webkit-scrollbar{ display:none; }
.mm-grond{ flex:none; width:92px; height:76px; padding:10px 12px; box-sizing:border-box; border-radius:12px; background:#1f1f1f; color:#fff !important; display:flex; flex-direction:column; justify-content:space-between; }
.mm-grond-code{ font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:26px; line-height:1; }
.mm-grond-naam{ font-size:12px; font-weight:600; color:#c7c7c7; }

.mm-merken{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mm-merk{ height:56px; padding:0 14px; border-radius:12px; border:1px solid #2e2e2e; color:#fff !important; display:flex; align-items:center; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:24px; text-transform:uppercase; }

.mm-punt{ display:flex; align-items:center; gap:12px; min-height:52px; border-bottom:1px solid #262626; color:#fff !important; font-size:16px; font-weight:600; }
.mm-punt span{ flex:1; }
.mm-punt svg{ flex:none; }

.mm-pas{ display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:16px; background:#fff; color:#111; }
.mm-pas-titel{ font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:30px; line-height:1; text-transform:uppercase; }
.mm-pas-tekst{ font-size:15px; line-height:1.4; color:#3d3d3d; }
.mm-pas-knop{ align-self:flex-start; margin-top:6px; height:44px; padding:0 18px; border-radius:99px; background:var(--red,#E30613); color:#fff !important; display:inline-flex; align-items:center; font-weight:700; font-size:15px; }

.mm-service{ padding:24px 20px 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
.mm-service a{ min-height:44px; display:flex; align-items:center; color:#d6d6d6 !important; font-size:15px; font-weight:500; }

.mm-voet{ padding:24px 20px 28px; display:flex; flex-direction:column; gap:14px; }
.mm-wa{ height:52px; border-radius:99px; border:1.5px solid #fff; color:#fff !important; display:flex; align-items:center; justify-content:center; gap:10px; font-size:16px; font-weight:700; }
.mm-instel{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.mm-account{ min-height:40px; display:flex; align-items:center; gap:6px; color:#d6d6d6 !important; font-size:14px; font-weight:600; }
.mm-keuzes{ display:flex; flex-wrap:wrap; gap:8px; }
.mm-keuze{ display:flex; gap:2px; padding:2px; border-radius:10px; background:#1f1f1f; }
.mm-keuze button{ height:36px; padding:0 8px; border:none; border-radius:8px; background:transparent; color:#d6d6d6; font-family:'Barlow',sans-serif; font-size:13px; font-weight:600; cursor:pointer; }
.mm-keuze button[aria-pressed="true"]{ background:#fff; color:#111; font-weight:700; }

/* Laag: Voetbalschoenen */
.mm-laag-kop{ padding-bottom:22px; background:#111; color:#fff; }
.mm-laag .mm-kop{ padding:0 8px; border-bottom:none; }
.mm-terug{ height:48px; padding:0 12px; display:flex; align-items:center; gap:6px; border:none; background:none; color:#fff; font-family:'Barlow',sans-serif; font-size:15px; font-weight:700; cursor:pointer; }
.mm-laag-titel{ margin:4px 20px 0; font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(40px,12.5vw,56px); line-height:.88; letter-spacing:-.01em; text-transform:uppercase; color:#fff; }
.mm-cta{ margin:18px 20px 0; height:52px; padding:0 18px; border-radius:99px; background:var(--red,#E30613); color:#fff !important; display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:700; }
.mm-blok--licht .mm-kopje{ color:#5f5f5f; }
.mm-grond-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mm-grond-tegel{ height:84px; padding:12px; box-sizing:border-box; border-radius:14px; border:1px solid #e3e3e3; color:#111 !important; display:flex; flex-direction:column; justify-content:space-between; }
.mm-grond-tegel .mm-grond-code{ font-size:30px; }
.mm-grond-tegel .mm-grond-naam{ color:#111; font-size:14px; font-weight:700; }
.mm-collectie{ display:flex; align-items:center; gap:12px; min-height:56px; border-bottom:1px solid #ececec; color:#111 !important; }
.mm-col-merk{ width:54px; flex:none; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#5f5f5f; }
.mm-col-naam{ flex:1; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:26px; line-height:1; text-transform:uppercase; }
.mm-uitleg{ margin:-6px 0 12px; font-size:13px; color:#5f5f5f; }
.mm-pillen{ display:flex; flex-wrap:wrap; gap:8px; }
.mm-pil{ height:44px; padding:0 16px; border-radius:99px; border:1.5px solid #111; color:#111 !important; display:inline-flex; align-items:center; font-size:14px; font-weight:700; }
.mm-blok--laatste{ padding-bottom:32px; }
.mm-kids{ min-height:64px; padding:10px 16px; border-radius:14px; background:#f4f4f4; color:#111 !important; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mm-kids strong{ display:block; font-size:16px; }
.mm-kids small{ display:block; font-size:13px; color:#5f5f5f; }

/* ------------------------------------------------------------------ */
/* Pagina Op bestelling (alle schermen)                                */
/* ------------------------------------------------------------------ */
.ob-wrap{ max-width:760px; margin:0 auto; padding:0 20px; }
.ob-held{ background:var(--red,#E30613); color:#fff; padding:40px 0 32px; }
.ob-label{ margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.ob-titel{ margin:0; font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(56px,16vw,104px); line-height:.86; letter-spacing:-.01em; text-transform:uppercase; }
.ob-intro{ margin:14px 0 0; max-width:520px; font-size:clamp(17px,2.4vw,20px); font-weight:600; line-height:1.4; }
.ob-feiten{ margin-top:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-width:420px; }
.ob-feit{ padding:12px 14px; border-radius:12px; background:rgba(0,0,0,.18); }
.ob-feit strong{ display:block; font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:34px; line-height:1; }
.ob-feit span{ font-size:13px; font-weight:600; }
.ob-cta{ margin-top:20px; max-width:420px; height:52px; padding:0 18px; border-radius:99px; background:#111; color:#fff !important; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:16px; font-weight:700; text-decoration:none; }
.ob-cta:hover{ background:#000; }
.ob-inhoud{ padding-bottom:16px; }
.ob-blok{ padding-top:32px; }
.ob-blok--laatste{ display:flex; flex-direction:column; gap:8px; padding-bottom:40px; }
.ob-kopje{ margin:0 0 10px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#5f5f5f; }
.ob-chips + .ob-kopje{ margin-top:24px; }
.ob-stappen{ margin:0; padding:0; list-style:none; }
.ob-stappen li{ display:flex; gap:16px; padding:14px 0; border-bottom:1px solid #ececec; }
.ob-stappen li:last-child{ border-bottom:none; }
.ob-nr{ width:28px; flex:none; font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:40px; line-height:.9; color:var(--red,#E30613); }
.ob-stappen strong, .ob-pico strong, .ob-kaart strong{ display:block; font-size:16px; font-weight:700; color:inherit; }
.ob-stappen li > span:last-child{ font-size:14px; line-height:1.45; color:#5f5f5f; }
.ob-stappen strong{ color:#111; margin-bottom:2px; }
.ob-pico{ margin-top:8px; display:flex; gap:12px; padding:14px 16px; border-radius:14px; background:#f4f4f4; font-size:14px; line-height:1.45; color:#5f5f5f; }
.ob-pico svg{ flex:none; margin-top:1px; color:#111; }
.ob-pico strong{ color:#111; margin-bottom:2px; }
.ob-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ob-chip{ height:44px; padding:0 16px; border-radius:99px; background:#f4f4f4; color:#111 !important; display:inline-flex; align-items:center; font-size:14px; font-weight:700; text-decoration:none; }
.ob-chip--rand{ background:transparent; border:1.5px solid #111; }
.ob-chip:hover{ background:#111; color:#fff !important; }
.ob-kaart{ min-height:64px; padding:12px 16px; box-sizing:border-box; border-radius:14px; border:1px solid #e3e3e3; color:#111 !important; display:flex; align-items:center; gap:12px; font-size:14px; line-height:1.4; text-decoration:none; }
.ob-kaart span{ flex:1; color:#5f5f5f; }
.ob-kaart strong{ color:#111; }
.ob-kaart--donker{ border:none; background:#111; color:#fff !important; }
.ob-kaart--donker span{ color:#c7c7c7; }
.ob-kaart--donker strong{ color:#fff; }
@media (min-width:769px){
  .ob-held{ padding:64px 0 48px; }
}