/* ==========================================================================
   Mobile Pro Max — an app-grade layer for phones and small tablets.
   Loaded after every other stylesheet so a single file owns the mobile
   experience instead of leaving it scattered across 22 media queries.

   Principles
   - One breakpoint system: 760px (phone), 520px (compact phone), 380px (SE).
   - Thumb-first: primary actions live at the bottom, within 390x844 reach.
   - Native feel: momentum scrolling, no tap highlight, safe-area insets,
     44px minimum targets, bottom sheets instead of centred modals.
   - Never trap content: anything that can overflow scrolls inside its own box.
   ========================================================================== */

/* Default: the phone-only search entry point stays hidden on desktop. */
.mobile-search-btn { display: none; }

@media (max-width: 760px) {
  :root {
    /* Bottom bar height + the home indicator. Used to pad page bottoms so the
       last row of content is never hidden behind the tab bar. */
    --tabbar-h: 62px;
    --tabbar-total: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    --sheet-radius: 26px;
    --mobile-gutter: 16px;
    --header-h: 58px;
  }

  /* ---------- 1. Base feel --------------------------------------------- */
  html { -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--header-h) + 12px); }
  body {
    font-size: 15px;
    line-height: 1.6;
    overscroll-behavior-y: none;
    padding-bottom: 0;
  }
  * { touch-action: manipulation; }
  /* Long words in supplier titles were the main cause of sideways scrolling. */
  .truncate, .product-title, .supplier-name, .store-title, .pdp-head h1 {
    overflow-wrap: anywhere;
  }

  /* ---------- 2. Header ------------------------------------------------ */
  .site-header {
    height: var(--header-h);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
  .header-inner { height: var(--header-h); gap: 8px; min-width: 0; }
  .header-actions { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
  /* Secondary header controls move into the drawer on phones, so the bar ends
     up as: brand · search · cart · menu — it never overflows. */
  .header-actions .header-only { display: none !important; }

  /* Locale strip in the footer wraps instead of forcing a 320px row. */
  .footer-langstrip, .footer-bottom-lang {
    flex-wrap: wrap;
    max-width: 100%;
    overflow: visible;
  }
  .footer-langstrip .lang-pill, .footer-bottom-lang .lang-pill { flex: 0 0 auto; }
  .brand span { font-size: 16px; letter-spacing: -.02em; }
  .icon-btn { width: 40px; height: 40px; border-radius: 12px; }

  /* Slim search trigger that opens the drawer search — saves the viewport for
     content while keeping search one tap away on every page. */
  .header-inner .header-search { display: none; }
  /* Mobile search entry point: a single icon that opens the catalog search. */
  .mobile-search-btn { display: inline-grid; }
  .header-only.mobile-only-flex { display: none !important; }

  /* ---------- 3. Bottom tab bar ---------------------------------------- */
  .mtb {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 70;
    display: flex;
    align-items: stretch;
    height: var(--tabbar-total);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px -18px rgba(10, 17, 34, .5);
  }
  .mtb-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding-top: 7px;
    color: var(--faint);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 560;
    letter-spacing: .005em;
    transition: color .18s var(--ease);
    -webkit-user-select: none;
    user-select: none;
  }
  .mtb-item:active { transform: scale(.94); }
  .mtb-item.is-active { color: var(--brand); }
  .mtb-item.is-active .mtb-ico::after {
    content: "";
    position: absolute;
    inset-inline: -9px;
    bottom: -5px;
    height: 3px;
    border-radius: 3px;
    background: var(--brand);
    opacity: .9;
  }
  .mtb-ico { position: relative; display: grid; place-items: center; height: 24px; }
  .mtb-ico svg { width: 23px; height: 23px; }
  .mtb-item.is-active .mtb-ico svg { stroke-width: 2.1; }
  .mtb-label { line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mtb-badge {
    position: absolute;
    top: -3px;
    inset-inline-start: 60%;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-elev);
  }

  /* Raised centre action — the one thing every B2B buyer came to do. */
  .mtb-fab {
    flex: 0 0 auto;
    align-self: center;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 8px;
    border-radius: 18px;
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(47, 91, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .28);
    transform: translateY(-12px);
    transition: transform .18s var(--ease-out);
  }
  .mtb-fab:active { transform: translateY(-10px) scale(.94); }
  .mtb-fab svg { width: 25px; height: 25px; stroke-width: 2.2; }

  /* Reserve space so nothing is hidden behind the bar. */
  html.has-tabbar body { padding-bottom: calc(var(--tabbar-total) + 8px); }
  html.has-tabbar .site-footer { padding-bottom: calc(var(--tabbar-total) + 16px); }
  html.has-tabbar .assistant-fab,
  html.has-tabbar .assistant-launcher,
  html.has-tabbar [data-assistant-fab] { bottom: calc(var(--tabbar-total) + 16px) !important; }
  html.has-tabbar .toaster { bottom: calc(var(--tabbar-total) + 12px); }
  /* Screens with their own action bar sit directly above the tab bar. */
  html.has-tabbar .pdp-buy-bar,
  html.has-tabbar .mobile-action-bar {
    position: fixed;
    inset-inline: 0;
    bottom: var(--tabbar-total);
    z-index: 68;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px var(--mobile-gutter) calc(10px + 2px);
    background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
  }
  html.has-tabbar .pdp-buy-bar ~ * ,
  html.has-tabbar body:has(.pdp-buy-bar) #main { padding-bottom: 76px; }

  /* ---------- 4. Page structure ---------------------------------------- */
  .container { padding-inline: var(--mobile-gutter); min-width: 0; }
  /* Grid/flex children default to min-width:auto, so a single wide child
     (a long SKU, a select, an unbroken URL) can widen the whole page. */
  .grid, .grid-auto, .grid-2, .grid-3, .grid-4,
  .catalog-layout, .pdp, .row { min-width: 0; }
  .grid > *, .grid-auto > *, .row > * { min-width: 0; }
  .section { padding-block: 34px; }
  .section-head { gap: 10px; }
  .panel { border-radius: 18px; }
  .card, .product-card, .supplier-card, .panel {
    box-shadow: 0 1px 2px rgba(10, 17, 34, .04);
  }
  .card:active, .product-card:active { transform: scale(.985); transition: transform .12s; }

  h1, .h1, .display { font-size: clamp(1.7rem, 7.4vw, 2.1rem); line-height: 1.12; letter-spacing: -.03em; }
  h2, .h2 { font-size: clamp(1.32rem, 5.4vw, 1.55rem); line-height: 1.2; letter-spacing: -.02em; }
  h3, .h3 { font-size: 1.08rem; }
  .lead { font-size: 15px; line-height: 1.6; }

  /* ---------- 5. Product & supplier grids ------------------------------ */
  .product-grid, .grid-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .product-card { border-radius: 16px; }
  .product-media { aspect-ratio: 1 / 1; }
  .product-body { padding: 10px 11px 11px; gap: 5px; }
  .product-title {
    font-size: 12.8px;
    line-height: 1.35;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-price { gap: 4px; flex-wrap: wrap; }
  .product-price b { font-size: 15.5px; letter-spacing: -.02em; }
  .product-price span { font-size: 10.5px; }
  .product-meta { font-size: 11px; gap: 5px; }
  .product-supplier { font-size: 11px; padding-top: 8px; gap: 5px; }
  .product-fav {
    opacity: 1; transform: none; width: 32px; height: 32px;
    box-shadow: 0 2px 8px rgba(10, 17, 34, .18);
  }
  .product-flags { top: 8px; inset-inline-start: 8px; gap: 4px; }
  .product-flags .badge, .badge { font-size: 10px; padding: 3px 7px; }

  .supplier-card { padding: 16px; border-radius: 16px; gap: 11px; }
  .supplier-logo { width: 46px; height: 46px; border-radius: 13px; }
  .supplier-name { font-size: 14px; }
  .supplier-stats b { font-size: 13px; }

  /* ---------- 6. Horizontal chip rails --------------------------------- */
  /* Category, filter and tab rows become snap-scrolling rails: they stay on
     one line instead of wrapping into three, which keeps the fold intact. */
  .filters, .chips, .tab-rail, .store-tabs, .cat-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--mobile-gutter));
    padding-inline: var(--mobile-gutter);
    padding-bottom: 4px;
  }

  /* Filters are a bottom sheet, not a rail — undo the rail for the sidebar.
     The `aside` prefix outranks the desktop `.filters` rule, which otherwise
     keeps its sticky `top` offset and pushes the sheet off-screen. */
  aside.filters {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    inset-block-start: auto !important;
    z-index: 80;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 86vh;
    margin: 0;
    padding: 22px var(--mobile-gutter) calc(96px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-elev);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    box-shadow: 0 -20px 60px -20px rgba(7, 12, 24, .55);
    animation: mpm-sheet .26s var(--ease-out);
  }
  aside.filters.open { display: flex !important; }
  .filter-block { padding: 14px; border-radius: 14px; }
  /* Pinned apply/reset footer inside the sheet. */
  .filters::after {
    content: "";
    position: sticky;
    bottom: calc(-96px - env(safe-area-inset-bottom, 0px));
    height: 0;
  }
  body.filters-open { overflow: hidden; }
  .filters::-webkit-scrollbar, .chips::-webkit-scrollbar,
  .tab-rail::-webkit-scrollbar, .store-tabs::-webkit-scrollbar { display: none; }
  .filters > *, .chips > *, .store-tabs > * { flex: 0 0 auto; scroll-snap-align: start; }
  .chip { min-height: 34px; padding-inline: 13px; font-size: 13px; }

  /* Catalog toolbar: the button cluster + sort select must never force the
     page wider than the screen. Let it wrap, and cap nested flex rows. */
  .toolbar { gap: 10px; margin-bottom: 14px; min-width: 0; }
  .toolbar > *, .toolbar .row { min-width: 0; max-width: 100%; }
  .toolbar .row { flex-wrap: wrap; gap: 8px; }
  .toolbar .select { min-width: 0; max-width: 100%; }
  .result-count { font-size: 13px; }

  /* ---------- 7. Forms -------------------------------------------------- */

  /* ---------- 7. Forms -------------------------------------------------- */  input.input, select.input, textarea.input {
    min-height: 48px;
    font-size: 16px; /* >=16px stops iOS from zooming the whole page on focus */
    border-radius: 14px;
  }
  textarea.input { min-height: 108px; padding-block: 12px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .btn, .btn-sm { min-height: 46px; border-radius: 14px; font-size: 14.5px; }
  .btn-sm { min-height: 40px; font-size: 13.5px; }
  .btn-block-mobile { width: 100%; }

  /* ---------- 8. Modals -> bottom sheets ------------------------------- */
  .modal, .sheet {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: min(88vh, 720px);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    animation: mpm-sheet .26s var(--ease-out);
  }
  .modal::before {
    content: "";
    position: absolute;
    top: 8px;
    inset-inline: 0;
    margin-inline: auto;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
  }
  .modal-head { padding-top: 20px; }
  .modal-backdrop { background: rgba(7, 12, 24, .5); backdrop-filter: blur(3px); }
  @keyframes mpm-sheet {
    from { transform: translateY(24px); opacity: .5; }
    to { transform: none; opacity: 1; }
  }

  /* ---------- 9. Tables & data ----------------------------------------- */
  .table-wrap { margin-inline: calc(-1 * var(--mobile-gutter)); padding-inline: var(--mobile-gutter); }
  .table-wrap table { min-width: 560px; }
  /* Comparison tables (pricing, specs) scroll sideways inside their own box
     instead of dragging the whole page wider. */
  .pg-compare, .compare-table, .spec-table { width: 100%; }
  .pg-compare-wrap, .table-wrap, .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .pg-compare-wrap {
    /* Must be able to shrink below its content, otherwise the 640px table
       still widens the page: overflow only helps when the box can be narrow.
       `min-width: 0` overrides the inherited `min-width: auto`. */
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: calc(-1 * var(--mobile-gutter));
    padding-inline: var(--mobile-gutter);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .pg-compare { min-width: 640px; }
  .pg-compare th, .pg-compare td { padding: 12px 10px; font-size: 12.5px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px; border-radius: 16px; }

  /* Category browsers (home + catalog) become scrollable rails, not pages. */
  .cat-browser-nav, .cat-nav, .cat-groups {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
  }
  .cat-browser, .cat-browser-body, .cat-panel, .cat-panel-body { min-width: 0; max-width: 100%; overflow-x: hidden; }

  /* ---------- 10. Product detail --------------------------------------- */
  .pdp { grid-template-columns: 1fr; gap: 16px; }
  /* A grid track sizes to its widest child unless children can shrink. Every
     direct child (and the sidebar cards inside them) must opt out of the
     default `min-width: auto` or one wide row widens the whole page. */
  .pdp, .pdp > *, .pdp .stack, .pdp .panel, .pdp .supplier-card,
  .pdp .gallery-main, .pdp .buy-panel, .pdp > div > * { min-width: 0; max-width: 100%; }
  .pdp .stack { overflow-x: hidden; }
  .gallery-main { border-radius: 18px; }
  /* Gallery thumbs: a swipeable rail. Use padding on the parent instead of
     negative margins, which would widen the layout viewport. */
  .gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: 0;
    padding-inline: 0;
    max-width: 100%;
    min-width: 0;
  }

  /* Any full-bleed rail must never contribute to the layout width. */
  .filters, .chips, .tab-rail, .store-tabs, .cat-tabs,
  .table-wrap, .pg-compare-wrap, .store-sticky-actions, .store-cover {
    max-width: 100vw;
    box-sizing: border-box;
  }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
  .pdp-head h1 { font-size: 1.12rem; line-height: 1.4; }
  .pdp-price-block { border-radius: 16px; }
  .spec-grid { grid-template-columns: 1fr; }
  .spec-row { padding-block: 9px; }
  /* Sticky buy bar: the highest-intent control on the page. */
  .pdp-buy-bar {
    display: flex;
    gap: 10px;
    padding: 10px var(--mobile-gutter);
    /* Grid children default to min-width:auto, so the three buttons would
       widen the whole page. Contain the bar and let the label truncate. */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
  }
  .pdp-buy-bar .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; }
  .pdp > * { min-width: 0; }

  /* ---------- 11. Storefront ------------------------------------------- */
  .store-cover { height: 132px; border-radius: 0; margin-inline: calc(-1 * var(--mobile-gutter)); }
  .store-head { padding-top: 54px; gap: 12px; }
  .store-logo { width: 76px; height: 76px; border-radius: 18px; bottom: -38px; inset-inline-start: var(--mobile-gutter); }
  .store-title { font-size: 1.1rem; }
  .store-sticky-actions {
    position: sticky;
    bottom: var(--tabbar-total);
    z-index: 60;
    display: flex;
    gap: 10px;
    padding: 10px var(--mobile-gutter);
    margin-inline: calc(-1 * var(--mobile-gutter));
    background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
  }
  .store-sticky-actions .btn { flex: 1; }

  /* ---------- 11b. Tap-target audit fixes ------------------------------ */
  /* Links that looked fine with a mouse are too small for a thumb. Padding
     grows the hit area without changing the visual rhythm of the layout. */
  .cat-leaf, .cat-group-title, .cat-nav-item,
  .footer-link, .footer-social-link, .lang-pill,
  .hero-tab, .hero-tag, .chip-sm, .drawer-locales .chip {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
  }
  .cat-leaf { width: 100%; padding-block: 9px; }
  .cat-group-title { width: 100%; }
  .footer-link { padding-block: 8px; }
  .hero-tab, .hero-tag { min-height: 36px; }
  .chip-sm { min-height: 38px; }
  /* Favourite buttons overlap the card corner; keep them comfortably tappable
     without visually shrinking the image. */
  .product-fav { width: 38px; height: 38px; }
  /* The whole card is the natural target, but the inner title/supplier links
     also receive taps — give them breathing room. `.product-title` stays a
     -webkit-box so the 2-line clamp keeps working. */
  .product-supplier { min-height: 40px; padding-block: 6px; }
  .supplier-name { min-height: 38px; display: inline-flex; align-items: center; }

  /* ---------- 12. Footer ----------------------------------------------- */
  .site-footer { padding-top: 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .footer-brand, .footer-newsletter { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; text-align: start; }
  /* Payment badges were collapsing to a 10px column inside the flex footer. */
  .footer-paybar-head, .footer-pay-methods {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
  }
  .footer-pay-methods > * { flex: 0 0 auto; }

  /* ---------- 13. Motion & feedback ------------------------------------ */
  /* The desktop route animation uses transform, which makes every descendant
     resolve `position: fixed` against that element instead of the viewport.
     That breaks bottom sheets, the tab bar and any fixed overlay. Phones get
     a cheap opacity transition instead: same polish, no containing block. */
  .route-enter, .route-enter > *, .container { transform: none !important; }
  .route-enter { animation: mpm-enter .2s var(--ease-out); }
  @keyframes mpm-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  /* Skeleton shimmer reads as "app is thinking" rather than "page is broken". */
  .skeleton, .sk-line, .sk-block {
    background: linear-gradient(100deg, var(--surface-3) 30%, var(--surface-2) 50%, var(--surface-3) 70%);
    background-size: 220% 100%;
    animation: mpm-shimmer 1.15s ease-in-out infinite;
  }
  @keyframes mpm-shimmer {
    from { background-position: 140% 0; }
    to { background-position: -40% 0; }
  }
}

@media (max-width: 520px) {
  :root { --mobile-gutter: 14px; --tabbar-h: 60px; }
  .section { padding-block: 28px; }
  .product-grid, .grid-products { gap: 9px; }
  .product-title { font-size: 12.2px; }
  .footer-grid { grid-template-columns: 1fr; }
  .mtb-fab { width: 48px; height: 48px; border-radius: 16px; margin: 0 4px; }
}

/* Narrow phones (iPhone SE and older Androids). */
@media (max-width: 380px) {
  .product-grid, .grid-products { grid-template-columns: 1fr; }
  .mtb-label { font-size: 9.5px; }
  .product-media { aspect-ratio: 4 / 3; }
}

/* Landscape phones: reclaim vertical space from the header and tab bar. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  :root { --header-h: 48px; --tabbar-h: 52px; }
  .mtb-label { display: none; }
  .mtb-fab { width: 44px; height: 44px; transform: translateY(-6px); }
  .modal { max-height: 96vh; }
}

/* Tablets: two-column product detail, roomier gutters, no tab bar. */
@media (min-width: 761px) and (max-width: 1024px) {
  .container { padding-inline: 22px; }
  .product-grid, .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .section { padding-block: 52px; }
}

/* Respect the OS-level motion preference. */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .mtb-item, .mtb-fab, .card, .product-card { transition: none !important; }
  .route-enter, .skeleton, .modal { animation: none !important; }
}

/* Dark-mode tuning so the glass bars keep contrast. */
@media (max-width: 760px) {
  [data-theme="dark"] .mtb {
    background: rgba(14, 21, 38, .92);
    border-top-color: #1e2942;
  }
  [data-theme="dark"] .mtb-badge { box-shadow: 0 0 0 2px #0e1526; }
  [data-theme="dark"] .pdp-buy-bar,
  [data-theme="dark"] .store-sticky-actions { background: rgba(14, 21, 38, .94); }
}