/* Mobile storefront only. The existing desktop header and footer retain their layout. */
.storefront-bottom-nav, .mobile-footer-brand { display: none; }
@media (max-width: 720px) {
  body.has-storefront-mobile-nav { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  #cycleStoreHeader { background: #07111f !important; position: sticky !important; top: 0 !important; z-index: 70 !important; }
  #cycleStoreHeader .top-service-strip { justify-content: flex-start; font-size: 11px; }
  #cycleStoreHeader .main-row { grid-template-columns: minmax(0, 1fr) auto 40px !important; gap: 12px !important; padding: 10px 14px 14px !important; }
  #cycleStoreHeader .brand { grid-column: 1 !important; max-width: 128px !important; }
  #cycleStoreHeader .brand { background: #07111f !important; isolation: isolate; }
  #cycleStoreHeader .brand-logo { height: 48px !important; }
  #cycleStoreHeader .mobile-menu-toggle { grid-column: 3 !important; width: 40px !important; height: 44px !important; padding: 9px !important; }
  #cycleStoreHeader .header-actions { grid-column: 2 !important; gap: 8px !important; }
  #cycleStoreHeader .header-actions > :is(a, button) { min-width: 40px !important; height: 44px !important; }
  #cycleStoreHeader .header-actions > .account-button { display: none !important; }
  #cycleStoreHeader .header-actions svg { width: 25px !important; height: 25px !important; }
  #cycleStoreHeader .header-actions .cart-button strong { right: 0 !important; top: 0 !important; }
  #cycleStoreHeader .search-form { height: 50px !important; min-height: 50px !important; }
  #cycleStoreHeader .search-form input { font-size: 16px !important; }
  #cycleStoreHeader .search-form button { min-width: 48px !important; width: 48px !important; padding: 12px !important; font-size: 0 !important; color: #233c58 !important; background: #fff !important; }
  #cycleStoreHeader .search-form button::after { content: '' !important; display: block !important; position: static !important; width: 23px; height: 23px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='7' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m16 16 5 5' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat; }
  #cycleStoreHeader .search-form button:focus-visible { outline-color: #006bd1 !important; }
  #cycleStoreHeader .header-actions > :is(#accountButton, #categoryAccountButton) { display: none !important; }
  .storefront-bottom-nav { position: fixed; inset: auto 0 0; z-index: 80; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); min-height: 68px; border-top: 1px solid #e1e7ee; background: #fff; box-shadow: 0 -3px 16px #07111f08; }
  .storefront-bottom-nav > :is(a, button) { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-width: 0; min-height: 54px; margin: 0; padding: 4px 0; border: 0; border-radius: 4px; background: transparent; color: #34445a; font: inherit; font-size: 10px; font-weight: 650; text-decoration: none; }
  .storefront-bottom-nav svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .storefront-bottom-nav [aria-current] { color: #006bd1; }
  .storefront-bottom-nav [data-mobile-action=home][aria-current] svg { fill: currentColor; }
  .storefront-bottom-nav :focus-visible, .mobile-storefront-footer :is(a, button, input, summary):focus-visible { outline: 2px solid #249aff; outline-offset: 3px; }
  .mobile-menu-is-open .storefront-bottom-nav { visibility: hidden; }

  #cycleStoreHome .home-main { padding: 0 16px; }
  #cycleStoreHome .home-intro { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #cycleStoreHome .home-premium-hero { grid-area: auto; display: flex; align-items: end; min-height: 620px; margin: 0 -16px; border-radius: 0; }
  #cycleStoreHome .home-premium-hero picture > img { object-position: 87% 15%; }
  #cycleStoreHome .home-premium-hero::after { background: linear-gradient(0deg, #041321 2%, #041321df 24%, #04132180 58%, #04132100 85%); }
  #cycleStoreHome .home-hero-content { width: 100%; padding: 205px 26px 34px; }
  #cycleStoreHome .home-hero-content .home-kicker { margin-bottom: 12px; font-size: 13px; letter-spacing: .2em; }
  #cycleStoreHome .home-hero-content h1 { font-size: clamp(33px, 9.1vw, 53px); line-height: 1.04; letter-spacing: -.03em; }
  #cycleStoreHome .home-hero-description { max-width: 420px; margin: 18px 0 22px; line-height: 1.5; }
  #cycleStoreHome .home-hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  #cycleStoreHome .home-hero-actions .home-button { min-height: 52px; font-size: 16px; }
  #cycleStoreHome .home-hero-caption { display: none; }
  #cycleStoreHome .home-trust { grid-area: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 20px 0 10px; border: 0; }
  #cycleStoreHome .home-trust > a { flex-direction: column; justify-content: start; align-items: center; gap: 9px; text-align: center; }
  #cycleStoreHome .home-trust svg { width: 28px; height: 28px; }
  #cycleStoreHome .home-trust strong, #cycleStoreHome .home-trust span { font-size: 11px; line-height: 1.4; }
  #cycleStoreHome .home-delivery-note { grid-area: auto; font-size: 10px; line-height: 1.5; margin: 0 0 18px; color: #516175; text-align: center; }
  #cycleStoreHome .home-bike-finder { grid-area: auto; margin-top: 0; padding: 24px 20px; background: #edf6fb; border-color: #e5f0f7; color: #101e2e; }
  #cycleStoreHome .home-finder-heading { float: left; margin: 0 12px 12px 0; }
  #cycleStoreHome .home-finder-heading .home-kicker { display: none; }
  #cycleStoreHome .home-finder-icon { width: 40px; height: 40px; border: 0; background: transparent; color: #142b42; }
  #cycleStoreHome .home-finder-icon svg { width: 38px; height: 38px; }
  #cycleStoreHome .home-bike-finder h2 { font-size: 23px; padding-top: 4px; margin-bottom: 9px; }
  #cycleStoreHome .home-bike-finder > p { clear: both; font-size: 14px; color: #34475b; }
  #cycleStoreHome .home-bike-finder form { clear: both; }
  #cycleStoreHome .home-finder-fields { grid-template-columns: 1fr; gap: 14px; }
  #cycleStoreHome .home-bike-finder input { min-height: 46px; border-color: #dce5ee; }
  #cycleStoreHome .home-bike-finder .home-button { min-height: 50px; }
  #cycleStoreHome .home-finder-note, #cycleStoreHome .home-bike-finder .home-status { color: #465b70; }
  #cycleStoreHome .home-bike-finder .home-text-button { color: #006bd1; font-weight: 700; text-decoration: none; min-height: 44px; padding-top: 14px; }
  #cycleStoreHome .home-section { margin: 28px 0; }
  #cycleStoreHome .home-section-heading { gap: 10px; margin-bottom: 16px; }
  #cycleStoreHome .home-section-heading h2 { font-size: 21px; letter-spacing: -.035em; }
  #cycleStoreHome .home-section-heading .home-kicker { display: none; }
  #cycleStoreHome .home-section-heading .home-section-link { flex-shrink: 0; max-width: 95px; font-size: 11px; line-height: 1.4; }
  #cycleStoreHome .home-ride-grid { grid-template-columns: repeat(5, minmax(110px, 31%)); gap: 9px; scrollbar-width: thin; }
  #cycleStoreHome .home-ride-card { aspect-ratio: 3 / 4.5; border-radius: 7px; }
  #cycleStoreHome .home-ride-card > div { left: 12px; right: 8px; bottom: 34px; }
  #cycleStoreHome .home-ride-card h3 { font-size: 19px; }
  #cycleStoreHome .home-ride-card p { font-size: 12px; line-height: 1.4; }
  #cycleStoreHome .home-ride-card > span { left: 12px; right: auto; bottom: 9px; color: #71c2ff; }
  #cycleStoreHome .home-category-row { grid-auto-columns: calc((100% - 30px) / 4); gap: 10px !important; }
  #cycleStoreHome .home-category-card span { font-size: 11px; }
  #cycleStoreHome .home-product-grid { gap: 10px; }
  #cycleStoreHome .home-product-card { padding: 10px; border-color: #e4eaf1; border-radius: 9px; }
  #cycleStoreHome .home-product-photo { margin: -2px -2px 12px; }
  #cycleStoreHome .home-product-brand { font-size: 10px; }
  #cycleStoreHome .home-product-card h3 { font-size: 13px; height: 37px; }
  #cycleStoreHome .home-product-price { font-size: clamp(17px, 5vw, 22px); white-space: nowrap; }
  #cycleStoreHome .home-product-bottom { flex-wrap: nowrap; }
  #cycleStoreHome .home-product-bottom > div { flex-basis: auto; }
  #cycleStoreHome .home-product-cart { width: 38px; height: 42px; }
  #cycleStoreHome .home-product-tabs { justify-content: space-between; gap: 14px; }
  #cycleStoreHome .home-product-tabs button { min-height: 44px; font-size: 14px; }
  #cycleStoreHome .home-promotion-grid { margin: 28px 0; gap: 12px; }
  #cycleStoreHome .home-promotion { padding: 24px; min-height: 245px; }
  #cycleStoreHome .home-promotion h2 { font-style: italic; font-size: 32px; }
  #cycleStoreHome .home-deals-promotion { min-height: 210px; background: linear-gradient(90deg, #041321ed, #04132155), url('/assets/home-premium/road-640.webp') center / cover; }
  #cycleStoreHome .home-deals-promotion svg { display: none; }
  #cycleStoreHome .home-deals-promotion h2 { font-style: normal; font-size: 27px; }
  #cycleStoreHome .home-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #cycleStoreHome .home-brand-grid a { min-height: 67px; padding: 5px; font-size: 18px; }
  #cycleStoreHome .home-brand-grid img { height: auto; aspect-ratio: 2.26; object-fit: contain; }
  #cycleStoreHome .home-editorial-grid { gap: 14px; }
  #cycleStoreHome .home-editorial-card { background: #f7fafc; border-radius: 7px; }
  #cycleStoreHome .home-editorial-card img { min-height: 148px; }
  #cycleStoreHome .home-editorial-card > a > div { padding: 15px 13px; }
  #cycleStoreHome .home-editorial-card h3 { font-size: 16px; }
  #cycleStoreHome .home-editorial-card .home-kicker { font-size: 10px; }

  body footer.home-footer.mobile-storefront-footer { padding: 30px 20px 22px; background: #07111f; }
  body footer.home-footer.mobile-storefront-footer .footer-main-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body footer.home-footer.mobile-storefront-footer .footer-kicker { font-size: 21px; font-style: normal; text-transform: none; margin: 0 0 22px; line-height: 1.3; }
  body footer.home-footer.mobile-storefront-footer .footer-newsletter form { gap: 15px; }
  body footer.home-footer.mobile-storefront-footer .newsletter-controls { display: flex !important; gap: 0 !important; border-radius: 6px; background: #fff; }
  body footer.home-footer.mobile-storefront-footer .newsletter-controls input { width: 0; flex: 1; padding: 0 12px; min-height: 50px; border-radius: 6px 0 0 6px; font-size: 16px; }
  body footer.home-footer.mobile-storefront-footer .newsletter-controls button { width: auto; min-height: 50px; padding: 0 12px; border-radius: 0 6px 6px 0; color: #fff; background: #006bd1; font-size: 12px; text-transform: none; white-space: nowrap; }
  body footer.home-footer.mobile-storefront-footer .newsletter-consent { gap: 9px; font-size: 12px; color: #ced9e6; }
  body footer.home-footer.mobile-storefront-footer .footer-newsletter small { font-size: 11px; color: #aebdd0; }
  body footer.home-footer.mobile-storefront-footer .newsletter-status:empty { display: none; }
  body footer.home-footer.mobile-storefront-footer .footer-navigation { display: block; width: 100%; }
  body footer.home-footer.mobile-storefront-footer .footer-link-group { border-bottom: 1px solid #26364a; }
  body footer.home-footer.mobile-storefront-footer .footer-link-group h2 { margin: 0; font-size: 14px; font-weight: 600; color: #e8eef5; }
  body footer.home-footer.mobile-storefront-footer .mobile-footer-details { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #e8eef5; }
  body footer.home-footer.mobile-storefront-footer .mobile-footer-details summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 55px; list-style: none; cursor: pointer; }
  body footer.home-footer.mobile-storefront-footer .mobile-footer-details summary::-webkit-details-marker { display: none; }
  body footer.home-footer.mobile-storefront-footer .mobile-footer-details summary::after { content: ''; width: 8px; height: 8px; flex-shrink: 0; border-right: 1.5px solid #d0ddec; border-bottom: 1.5px solid #d0ddec; transform: rotate(45deg); margin-right: 4px; }
  body footer.home-footer.mobile-storefront-footer .mobile-footer-details[open] summary::after { transform: rotate(225deg); }
  body footer.home-footer.mobile-storefront-footer .mobile-footer-details > div { display: grid; gap: 0; padding-bottom: 14px; }
  body footer.home-footer.mobile-storefront-footer .mobile-footer-details a { display: flex; align-items: center; min-height: 44px; color: #c5d5e7; font-size: 14px; }
  body footer.home-footer.mobile-storefront-footer .footer-socials { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; }
  body footer.home-footer.mobile-storefront-footer .footer-socials > div { display: flex; gap: 6px; }
  body footer.home-footer.mobile-storefront-footer .footer-socials a { font-size: 0; min-width: 40px; min-height: 44px; justify-content: center; gap: 0; }
  body footer.home-footer.mobile-storefront-footer .footer-socials .social-icon { width: 30px; height: 30px; border: 0; border-radius: 0; }
  body footer.home-footer.mobile-storefront-footer .footer-wordmark { display: none; }
  body footer.home-footer.mobile-storefront-footer .mobile-footer-brand { display: flex; align-items: center; justify-content: space-between; margin: 20px 0; }
  body footer.home-footer.mobile-storefront-footer .mobile-footer-brand > a { background: #07111f; isolation: isolate; }
  body footer.home-footer.mobile-storefront-footer .mobile-footer-brand img { mix-blend-mode: screen; width: 132px; height: 55px; object-fit: contain; }
  body footer.home-footer.mobile-storefront-footer .mobile-footer-locale { min-height: 44px; border: 0; background: none; color: #d5e2f0; font: inherit; font-size: 13px; }
  body footer.home-footer.mobile-storefront-footer .footer-methods { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 20px 0; border-top: 1px solid #26364a; }
  body footer.home-footer.mobile-storefront-footer .footer-method-group h2 { font-size: 12px; margin: 0 0 10px; color: #c5d5e7; }
  body footer.home-footer.mobile-storefront-footer .footer-methods .method-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  body footer.home-footer.mobile-storefront-footer .footer-methods .method-tile { display: flex; align-items: center; justify-content: center; min-height: 0 !important; height: 64px !important; padding: 0; aspect-ratio: auto; border-radius: 6px; background: #242837; }
  body footer.home-footer.mobile-storefront-footer .footer-methods .method-tile img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; object-position: center; }
  body footer.home-footer.mobile-storefront-footer .method-tile-in3 span { font-size: 28px; line-height: 1; }
  body footer.home-footer.mobile-storefront-footer .footer-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 0; padding: 18px 0 0; color: #aebdd0; font-size: 12px; border-top: 1px solid #26364a; }
}

/* Geen dubbeltik-zoom (knoppen reageren direct); knijpen om in te zoomen blijft gewoon werken. */
html, body { touch-action: manipulation; }

/* iPhone zoomt automatisch in op invulvelden met tekst kleiner dan 16px: op mobiel dus altijd 16px. */
@media (max-width: 820px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select,
  textarea { font-size: 16px !important; }
}

/* Homepage-hero op mobiel compacter: past samen met de zoekbalk ongeveer in één scherm
   en laat de categorieën eronder zien (was min. 620px hoog met 205px loze ruimte). */
@media (max-width: 720px) {
  #cycleStoreHome .home-premium-hero { min-height: clamp(340px, 92vw, 380px); }
  #cycleStoreHome .home-hero-content { padding: 72px 20px 22px; }
  #cycleStoreHome .home-hero-content .home-kicker { margin-bottom: 8px; font-size: 11px; }
  #cycleStoreHome .home-hero-content h1 { font-size: clamp(27px, 7.6vw, 38px); }
  #cycleStoreHome .home-hero-description { margin: 10px 0 16px; font-size: 14px; line-height: 1.45; }
  #cycleStoreHome .home-hero-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
  #cycleStoreHome .home-hero-actions .home-button { min-height: 44px; padding: 10px 12px; font-size: 14px; justify-content: center; }
}