/* bbmarkt - mobile refinements (tester routine, 390px).
   Only overrides: the desktop layout above 1100px stays exactly as it was. */

/* the category tiles are a grid on every screen size - no carousel, no arrows */
.mk-cat-slider { position: relative; }
.mk-cat-arrow { display: none !important; }

@media (max-width: 1100px) {
  /* the facet drawer dims the page behind it instead of floating over it */
  .mk-facets.mk-facets-open { box-shadow: 0 0 0 100vmax rgba(9, 18, 44, .5); }
  /* the category drawer must never let the header shine through */
  .mk-catalog-panel { background: #fff; }

  /* a <select> is as wide as its longest option ("Baden-Wuerttemberg, Buesingen
     am Hochrhein"), which used to push the whole checkout column past the screen */
  .mk-checkout-main, .mk-checkout-form, .mk-checkout-step,
  .mk-form-grid, .mk-form-grid > *, .mk-form-grid label,
  .mk-summary, .mk-cart-main { min-width: 0; }
  .mk-checkout select, .mk-checkout input, .mk-checkout textarea,
  .mk-form-grid select, .mk-form-grid input, .mk-form-grid textarea {
    min-width: 0; max-width: 100%;
  }
}

@media (max-width: 760px) {
  /* ---------- header: opaque and steady while scrolling ---------- */
  .mk-header { position: sticky; top: 0; z-index: 60; }
  .mk-navbar, .mk-header { background: var(--td-navy, #162c64); }

  /* the header row lost its side padding (padding: 8px 0 in theme.css), so the
     burger, the cart icon and the whole search field were glued to the screen
     edges. Bring the gutter back and keep burger + logo + icons on one line. */
  .mk-navbar-inner { padding: 8px 12px; gap: 10px; row-gap: 8px; }
  .mk-logo { flex: 0 1 auto; min-width: 0; }
  .mk-logo img { height: auto; max-height: 34px; max-width: 100%; }
  .mk-actions { flex: 0 0 auto; margin-left: auto; gap: 0; }

  /* the icons (account, wishlist, cart) must sit at the same distance from each
     other: the cart keeps justify-content: flex-start from the desktop rule, so
     its glyph was glued to the left edge of its box, and the glyphs themselves
     have different widths (user 15px, heart 17px, cart 19px). Centre the cart
     again and give every glyph the same 22px box, so the optical gaps match. */
  #header-cart { flex: 0 0 auto; }
  .mk-action-cart { justify-content: center; padding: 0; gap: 0; }
  .mk-action > i, .mk-actions .mk-action-ico, .mk-action-cart .mk-cart-ico {
    width: 22px; display: inline-flex; align-items: center; justify-content: center;
  }

  /* ---------- search: full width inside the gutter, not edge to edge ---------- */
  .mk-search { order: 5; flex: 1 1 100%; width: 100%; max-width: none; margin: 0 0 2px; }
  .mk-search-join { display: flex; width: 100%; }
  .mk-search-input { flex: 1 1 auto; min-width: 0; height: 44px; font-size: 16px; border-radius: 4px 0 0 4px; }
  .mk-search-input:focus { height: 44px; }
  .mk-search-btn { flex: 0 0 auto; height: 44px; width: 52px; min-height: 44px; border-radius: 0 4px 4px 0; }
  .mk-suggest { top: 48px; }
}

/* iOS Safari draws type=search as a native pill (-webkit-appearance: searchfield):
   it ignores our radius/height, so the field turns round and the loupe button
   hangs apart from it. Reset the native look so field + button form one bar
   like on desktop. */
.mk-search-join { display: flex; align-items: stretch; flex-wrap: nowrap; }
.mk-search-input,
.mk-search-input:focus {
  -webkit-appearance: none !important; appearance: none !important;
  margin: 0; box-sizing: border-box; line-height: normal;
  border-radius: 4px 0 0 4px !important;
}
.mk-search-input::-webkit-search-decoration,
.mk-search-input::-webkit-search-cancel-button,
.mk-search-input::-webkit-search-results-button,
.mk-search-input::-webkit-search-results-decoration { -webkit-appearance: none; }
.mk-search-btn {
  -webkit-appearance: none; appearance: none;
  margin: 0 0 0 -1px; padding: 0; box-sizing: border-box; min-height: 0;
  border-radius: 0 4px 4px 0 !important;
}
@media (max-width: 760px) {
  .mk-search-btn { min-height: 44px; }
}

/* narrow phones (<= 420px): the logo alone is 184px wide, so the icons used to
   wrap onto a second row. Cap the logo to the space left over by burger + icons. */
@media (max-width: 420px) {
  .mk-navbar-inner { gap: 8px; }
  .mk-burger { padding: 0 10px; }
  .mk-logo { max-width: calc(100% - 166px); overflow: hidden; }
  .mk-action { width: 36px; height: 36px; }
  .mk-action-cart { width: 36px; }
}

@media (max-width: 760px) {

  /* ---------- cards: the card shadow may not be cut off by the track ---------- */
  .mk-slider-track { padding: 6px 2px 10px; }

  /* the buy button is the cart icon only, the heart sits next to it */
  .mk-card-cart span { display: none !important; }
  .mk-card-cart { gap: 0; padding: 0 6px; }
  .mk-card-cart i { font-size: 15px; }

  /* ---------- toast: bottom centre ---------- */
  .mk-toast-wrap { left: 12px; right: 12px; bottom: 16px; }
  .mk-toast-wrap.mk-toast-on { display: flex; justify-content: center; }
  .mk-toast { max-width: 360px; width: 100%; }
}

@media (max-width: 640px) {
  /* all categories at once, two per row - the mobile carousel was removed */
  .mk-cat-slider .mk-cat-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; padding: 0; overflow: visible;
  }
}

/* iOS Safari zooms the page in when a focused field has font-size < 16px
   (checkout, login, search...). 16px on touch devices stops the auto-zoom
   without blocking pinch-zoom via the viewport meta. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea { font-size: 16px !important; }
}