/* Payslashes mobile viewport containment — 2026-09-19 */
html,body{max-width:100%;overflow-x:hidden!important}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas,iframe{max-width:100%}
@media(max-width:575.98px){
  html,body{width:100%!important;min-width:0!important}
  body{position:relative}
  .container,.container-fluid,.ol-premium-shell,.premium-footer-shell,.premium-footer-main,
  main,section,footer,.row,[class*="homepage"],[class*="hero"]{min-width:0!important;max-width:100%!important}
  .container,.ol-premium-shell{width:100%!important;padding-left:12px!important;padding-right:12px!important;margin-left:auto!important;margin-right:auto!important}
  .row{margin-left:-6px!important;margin-right:-6px!important}
  .row>[class*="col-"]{min-width:0!important;padding-left:6px!important;padding-right:6px!important}
  /* Do not allow legacy desktop dimensions to force the 330–375px viewport wider. */
  [style*="min-width"],[style*="width"]{max-width:100%}
  .premium-site-footer,.premium-footer-main,.premium-footer-shell{width:100%!important;overflow:hidden!important}
  .premium-footer-main .row{display:block!important;margin:0!important}
  .premium-footer-main .row>[class*="col-"]{width:100%!important;max-width:100%!important;padding:0!important;margin:0 0 8px!important}
  .premium-footer-accordion-toggle,.premium-footer-accordion-panel{width:100%!important;max-width:100%!important;min-width:0!important}
  /* Hero/banner text must wrap rather than render as a desktop canvas. */
  .hero-section,.hero-slider,.hero-slide,.hero-content,.ps-hero,[class*="hero-"]{min-width:0!important;max-width:100%!important}
  .hero-section h1,.hero-section h2,.hero-section p,.hero-content h1,.hero-content h2,.hero-content p,[class*="hero"] h1,[class*="hero"] h2{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere;font-size:clamp(1.35rem,8vw,2.15rem)!important;line-height:1.08!important}
  /* Product grids/cards: one contained card per row on very small phones. */
  .product-card,.product-item,.pcv2-card,[class*="product-card"],[class*="commerce-card"]{min-width:0!important;max-width:100%!important;width:100%!important}
  .product-card img,.product-item img,.pcv2-card img,[class*="product-card"] img{max-width:100%!important;height:auto;object-fit:contain}
  .pcv2-actions,.product-actions,[class*="product-actions"]{min-width:0!important;max-width:100%!important}
  .pcv2-btn,.product-actions a,.product-actions button{min-width:0!important;max-width:100%!important;white-space:normal!important}
  /* Cookie consent: compact, centered and clear of fixed commerce controls. */
  .cookie-banner{left:8px!important;right:8px!important;bottom:calc(72px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:calc(100% - 16px)!important;padding:10px 12px!important;border-radius:14px!important;font-size:12px!important;line-height:1.35!important}
  .cookie-banner .cookie-content,.cookie-banner .cookie-buttons{max-width:100%!important}
  .cookie-banner .cookie-buttons{display:flex!important;gap:7px!important;flex-wrap:wrap!important}
  .cookie-banner button{min-height:40px!important;flex:1 1 120px!important;margin:0!important;padding:8px 10px!important}
  /* Floating assistant becomes icon-sized so it cannot cover catalogue controls. */
  .ps-ai-shop{right:10px!important;bottom:calc(74px + env(safe-area-inset-bottom))!important;max-width:calc(100% - 20px)!important}
  .ps-ai-shop__launcher{width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;padding:0!important;border-radius:50%!important;font-size:0!important;overflow:hidden!important}
  .ps-ai-shop__launcher span{display:none!important}
  .ps-ai-shop__launcher-emoji{display:block!important;font-size:20px!important}
  .ps-ai-shop__panel{inset:auto 8px calc(132px + env(safe-area-inset-bottom)) 8px!important;width:auto!important;max-width:none!important;height:min(64vh,520px)!important}
}
@media(max-width:360px){
  .container,.ol-premium-shell{padding-left:8px!important;padding-right:8px!important}
  .cookie-banner{left:6px!important;right:6px!important;max-width:calc(100% - 12px)!important}
}

/* 2026-09-19 runtime/mobile safe-area follow-up */
@media (max-width: 767.98px) {
  body { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important; }
  .premium-site-footer, .premium-footer-main, .premium-footer-bottom {
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
  }
  [data-shop-assistant-launcher], .ps-shop-assistant-launcher, .payslashes-shopping-assistant-launcher,
  .shop-assistant-launcher, .shopping-assistant-launcher {
    bottom: calc(106px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    max-width: 54px !important;
    max-height: 54px !important;
  }
  .cookie-banner.show { bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* 2026-09-19 final mobile navigation / rail integration */
@media (max-width: 767.98px) {
  :root { --ps-final-mobile-nav-clearance: calc(138px + env(safe-area-inset-bottom, 0px)); }
  body.mobile-ux-shell { padding-bottom: var(--ps-final-mobile-nav-clearance) !important; }
  body.mobile-ux-shell main { padding-bottom: 18px !important; }
  body.mobile-ux-shell .premium-site-footer {
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 0 !important;
    padding-bottom: var(--ps-final-mobile-nav-clearance) !important;
  }
  body.mobile-ux-shell .premium-footer-main,
  body.mobile-ux-shell .premium-footer-bottom,
  body.mobile-ux-shell .premium-footer-shell {
    max-width: 100% !important;
    overflow: visible !important;
  }
  /* Keep every floating assistant control completely above the fixed nav. */
  body.mobile-ux-shell .ps-ai-shop,
  body.mobile-ux-shell [data-shop-assistant-launcher],
  body.mobile-ux-shell .ps-shop-assistant-launcher,
  body.mobile-ux-shell .payslashes-shopping-assistant-launcher,
  body.mobile-ux-shell .shop-assistant-launcher,
  body.mobile-ux-shell .shopping-assistant-launcher {
    position: fixed !important;
    right: 12px !important;
    bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 10040 !important;
  }
  body.mobile-ux-shell .ps-ai-shop__panel {
    bottom: calc(174px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Fixed nav owns its own layer; page content never needs to sit beneath it. */
  body.mobile-ux-shell .ps-mobile-bottom-nav {
    z-index: 10050 !important;
  }
  body.mobile-ux-shell .cookie-banner.show {
    bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* At phone widths, product *rails* use one readable card per snap point.
   This intentionally does not change normal catalogue grids. */
@media (max-width: 479.98px) {
  body.mobile-ux-shell [data-product-slider],
  body.mobile-ux-shell .ps-mobile-row-track,
  body.mobile-ux-shell [data-product-row] {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 0 !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 0 12px !important;
    max-width: 100% !important;
  }
  body.mobile-ux-shell [data-product-slider] > .jumia-product-card,
  body.mobile-ux-shell .ps-mobile-row-track > .jumia-product-card,
  body.mobile-ux-shell [data-product-row] > .jumia-product-card {
    flex: 0 0 calc(100% - 8px) !important;
    width: calc(100% - 8px) !important;
    min-width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }
  /* Prevent the next card from looking accidentally clipped. */
  body.mobile-ux-shell [data-product-slider] > .jumia-product-card:last-child,
  body.mobile-ux-shell .ps-mobile-row-track > .jumia-product-card:last-child,
  body.mobile-ux-shell [data-product-row] > .jumia-product-card:last-child { margin-right: 0 !important; }

  /* Compact metadata remains readable instead of clipping inside narrow cards. */
  body.mobile-ux-shell .pcv2-meta { display:flex !important; flex-wrap:wrap !important; gap:5px !important; overflow:visible !important; }
  body.mobile-ux-shell .pcv2-category,
  body.mobile-ux-shell .pcv2-brand { min-width:0 !important; max-width:100% !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
  body.mobile-ux-shell .pcv2-badges { max-width:calc(100% - 58px) !important; overflow:visible !important; }
  body.mobile-ux-shell .pcv2-title { overflow-wrap:anywhere !important; }
}