/* ─────────────────────────────────────────────────────────────
   FM Mobile UX Fix — 2026-04-21
   Global mobile patches for footballmasters.pro
   Priority: koszyk, PDP, sklep, index
   Goal: kill horizontal overflow, fix proportions, thumb-reach CTA
   ───────────────────────────────────────────────────────────── */

/* ═══ GLOBAL: stop horizontal overflow (root cause: "mogę rozszerzać") ═══ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
* {
  min-width: 0;
  /* allow flex/grid children to shrink below content size */
}
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* ═══ Mobile breakpoint: ≤720px ═══ */
@media (max-width: 720px) {

  /* --- Body padding guard — no content hits viewport edge --- */
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .wrap, main, section, .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* --- Prevent any element from forcing horizontal scroll --- */
  .topbar, header, nav, footer {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* --- Sticky topbar: reduce margin, softer radius on mobile --- */
  .topbar {
    border-radius: 14px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    margin-bottom: 16px !important;
    top: 6px !important;
  }

  /* ═══ KOSZYK.HTML mobile fixes ═══ */

  /* Grid was 1fr 380px — forced to 1fr at 820px already, but tighten */
  body > .wrap > .grid {
    gap: 16px !important;
  }

  /* Cart row: 86px 1fr auto — on very narrow screens, 86px takes too much */
  .cart-row {
    grid-template-columns: 72px 1fr !important;
    gap: 10px !important;
    padding: 14px 0 !important;
  }
  .cart-row img {
    width: 72px !important;
    height: 72px !important;
  }
  .cart-row .title {
    font-size: 13px !important;
  }
  /* Price-box: move below content, full width horizontal row */
  .cart-row .price-box {
    grid-column: 1 / -1;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,0.08);
  }
  .cart-row .price {
    font-size: 15px !important;
  }

  /* Summary card: full width, no overflow */
  .summary {
    overflow: hidden;
  }
  .summary .total {
    font-size: 20px !important;
  }

  /* Delivery labels: stack name on top when price can't fit */
  .delivery-list label {
    font-size: 12px !important;
    padding: 10px 12px !important;
    gap: 6px;
    flex-wrap: wrap;
  }
  .delivery-list label .name {
    flex: 1 1 auto;
    min-width: 0;
  }
  .delivery-list label .cost {
    flex: 0 0 auto;
  }

  /* Pay button: bigger tap target, thumb-reach comfort */
  .pay-btn {
    padding: 18px !important;
    font-size: 15px !important;
  }

  /* Form row-2: stack on mobile — kod pocztowy + miasto can't share line */
  .row-2 {
    grid-template-columns: 1fr !important;
  }
  .form input, .form select {
    font-size: 16px !important; /* iOS: prevent zoom-on-focus */
    padding: 14px !important;
  }

  /* Upsell items: tighter columns */
  .upsell-item {
    grid-template-columns: 48px 1fr !important;
    padding: 10px !important;
  }
  .upsell-item img {
    width: 48px !important;
    height: 48px !important;
  }
  .upsell-item > div:last-child {
    grid-column: 1 / -1;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 6px;
  }

  /* Trust row: 4 cols → 2 cols on mobile (already defined at 560px) */
  .trust-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  /* ═══ PDP mobile fixes ═══ */

  /* Product layout: already 1fr at 960px */
  .product-layout {
    gap: 22px !important;
  }

  /* Gallery: larger but not cropped weirdly — keep 1:1 aspect */
  .gallery-main {
    border-radius: 18px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.4) !important;
  }
  .gallery-main img {
    object-fit: contain !important; /* packshot on white → contain is better than cover */
    padding: 10px !important;
  }

  /* Hide tooltip on touch devices (no hover) */
  .gallery-main::after {
    display: none !important;
  }

  /* Product title: scale down */
  .product-info h1 {
    font-size: clamp(36px, 10vw, 52px) !important;
  }
  .tagline {
    font-size: 15px !important;
  }
  .price-row .price {
    font-size: 44px !important;
  }

  /* Color switcher: scroll-snap on overflow */
  .variant-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .variant-chips::-webkit-scrollbar { display: none; }
  .variant-chip {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    width: 62px !important;
    height: 62px !important;
  }

  /* Size chips: 48x48 → 44x44 min (Apple HIG tap target) */
  .size-chip {
    min-width: 52px !important;
    padding: 14px 8px !important;
    font-size: 15px !important;
    margin-right: 4px !important;
    margin-bottom: 6px !important;
  }

  /* Thumbs (gallery): smaller on mobile */
  .thumb {
    flex: 0 0 64px !important;
  }

  /* Trust strip: 4 → 2 cols */
  .trust-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  /* Perso style row: 5 cols can be too tight */
  .perso-style-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  /* ═══ SKLEP.HTML mobile fixes ═══ */

  /* Grid is already 2fr at 720px — ensure no overflow */
  .grid .card {
    min-width: 0;
  }

  /* Search input: full width, no min-width */
  #search {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    font-size: 16px !important; /* iOS anti-zoom */
  }

  /* Filter row: wrap properly */
  .filters, [style*="flex-wrap:wrap"] {
    gap: 6px !important;
  }
  .filter-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Live strip: reduce padding */
  .live-strip {
    font-size: 11px !important;
    padding: 8px 12px !important;
    gap: 10px !important;
  }

  /* Bestseller section: tighter padding */
  .bs-section {
    padding: 18px 14px 20px !important;
    border-radius: 18px !important;
  }

  /* ═══ INDEX.HTML mobile fixes ═══ */

  /* Hero video must have playsinline + muted (checked in HTML) */
  video {
    max-width: 100%;
    height: auto;
  }

  /* Hero heading: prevent enormous */
  h1 {
    word-break: break-word;
    hyphens: auto;
  }

  /* Trust bar on index: many components use 5-col → squeeze to 2 */
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Fix any inline max-width that's too wide for mobile */
  [style*="max-width:420px"],
  [style*="max-width: 420px"] {
    max-width: 100% !important;
  }

  /* ═══ STICKY ADD-TO-CART on PDP (thumb-reach) ═══ */
  /* Body gets extra bottom padding, sticky bar fixed at bottom */
  body.pdp-has-sticky {
    padding-bottom: 90px !important;
  }
  .fm-mobile-sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(6,6,6,0.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line, rgba(255,255,255,0.1));
    z-index: 100;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .fm-mobile-sticky-cta .fmsc-price {
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    color: var(--lime, #d8ff62);
    line-height: 1;
    flex: 0 0 auto;
  }
  .fm-mobile-sticky-cta .fmsc-btn {
    flex: 1;
    padding: 14px;
    background: var(--lime, #d8ff62);
    color: #000;
    border: 0;
    border-radius: 999px;
    font: 800 13px/1 "Space Grotesk", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .fm-mobile-sticky-cta .fmsc-btn:active {
    transform: scale(0.98);
  }
  /* When sticky bar is visible, push Konsultant FM chat FAB up so they don't overlap */
  body.sticky-visible .fm-chat-fab {
    bottom: 88px !important;
    transition: bottom .25s cubic-bezier(.2,.8,.2,1);
  }
}

/* ═══ Very narrow devices (≤360px — iPhone SE 1st gen) ═══ */
@media (max-width: 360px) {
  .wrap, main, section {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  h1 {
    font-size: clamp(32px, 9vw, 44px) !important;
  }
  .card-body {
    padding: 10px 8px !important;
  }
  .size-chip {
    min-width: 46px !important;
    padding: 12px 6px !important;
  }
}