/*!
 * ks-mobile-tablet-fixes.css — 2026-05-20
 * Strict @media (max-width: 1023px) only. Desktop untouched.
 *
 * Fixes mapped to mobile/tablet UX audit findings:
 *   1.1 Ola chat launcher overlap
 *   1.2 Product page tablet 2-col + mobile fold
 *   1.3 Login mobile search overlay bug
 *   2.1 Header chrome height
 *   2.3/2.4 Polish hyphenation
 *   2.5 Sort + pill truncation
 *   2.6 Checkout duplicate "-50%" step badges
 *   2.7 Cart item title 2-line clamp
 *   3.2 Breadcrumb tap zone
 *   3.6 Trust strip horizontal scroll affordance
 */

/* ============================================================
 * SEV 1.1 — Ola chat launcher overlap with primary CTAs
 * Move launcher to bottom-LEFT on mobile/tablet so it never
 * covers the bottom-right sticky checkout CTA.
 * Hide entirely on cart + checkout where the orange CTA is the
 * single most important element on the page.
 * ============================================================ */
@media (max-width: 1023px) {
  .ksc-launcher-card {
    left: 12px !important;
    right: auto !important;
    bottom: 90px !important; /* keep clear of any 80px sticky bar */
    transform: scale(0.82) !important;
    transform-origin: bottom left !important;
    z-index: 998 !important; /* below typical modal + below page sticky CTAs */
  }
  /* Critical conversion pages: hide chat launcher card on cart + checkout.
   * Customers can re-open from in-account or footer if needed. */
  body.page-cart .ksc-launcher-card,
  body.page-checkout .ksc-launcher-card,
  body[class*="module-kscheckout"] .ksc-launcher-card,
  body[class*="page-checkout"] .ksc-launcher-card {
    display: none !important;
  }
  /* The full-screen open chat panel — keep on top, but ensure on
   * mobile it doesn't render permanently */
  .ksc-panel {
    z-index: 99999 !important;
  }
}

/* ============================================================
 * SEV 1.3 — Login mobile search-bar overlay bug
 * On /logowanie at mobile widths, a stuck-open orange search
 * overlay covers the "Zaloguj się do swojego konta" heading.
 * Force-hide any open search panel on auth pages.
 * ============================================================ */
@media (max-width: 767px) {
  body.page-authentication .ks-search-overlay,
  body.page-authentication .ks-search-panel,
  body.page-authentication .ks-search.is-open,
  body.page-authentication [class*="search-expanded"],
  body.page-password .ks-search-overlay,
  body.page-password [class*="search-expanded"] {
    display: none !important;
  }
}

/* ============================================================
 * SEV 1.2 — Product page mobile fold + tablet 2-col layout
 * Mobile: cap product image so title/price/CTA fit above fold
 * Tablet (768-1023): switch to 2-column grid image|buybox
 * ============================================================ */
@media (max-width: 767px) {
  body.page-product .product-cover,
  body.page-product .product-cover img,
  body.page-product .js-qv-product-cover,
  body.page-product .product-flags + .product-cover img {
    max-height: 300px !important;
    width: auto !important;
    object-fit: contain !important;
  }
  body.page-product #main .product-cover-thumbnails,
  body.page-product #main .product-thumbnails,
  body.page-product .product-images.js-qv-product-images,
  body.page-product .product-images {
    max-width: 100% !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.page-product .product-information-wrapper,
  body.page-product #content-wrapper.product-information-wrapper,
  body.page-product .row.product-container,
  body.page-product .product-container {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
  }
  body.page-product .product-cover img,
  body.page-product .js-qv-product-cover img {
    max-height: 480px !important;
    width: 100% !important;
    object-fit: contain !important;
  }
}

/* ============================================================
 * SEV 2.1 — Header chrome height
 * The sticky header is 165px on mobile (banner + trust strip
 * + nav). Compress on scroll and tighten paddings.
 * ============================================================ */
@media (max-width: 1023px) {
  /* tighten promo banner */
  .ks-promo-banner,
  .ks-anniversary-banner,
  header .promo-strip,
  [class*="promo-banner"] {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  /* tighten the trust strip row */
  .ks-trust-strip,
  header .trust-strip {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 36px !important;
  }
  /* hint horizontal scroll on trust strip */
  .ks-trust-strip-inner,
  .ks-trust-strip-track,
  .ks-trust-strip > div:first-child {
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
  }
  /* fade right edge to suggest scrollability */
  .ks-trust-strip {
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent) !important;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent) !important;
  }
}

/* ============================================================
 * SEV 2.3 / 2.4 — Polish hyphenation on headings
 * Stop aggressive hyphens: auto breaking "wyszuki-wania",
 * "klawi-szowych" etc on mobile.
 * ============================================================ */
@media (max-width: 1023px) {
  h1, h2, h3,
  .h1, .h2, .h3,
  .page-heading,
  .product-title,
  .post-title,
  article header h1,
  .search-result h1,
  body[class*="page-search"] h1 {
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* ============================================================
 * SEV 2.5 — Sort dropdown + subcategory pill truncation
 * ============================================================ */
@media (max-width: 767px) {
  /* Sort dropdown: allow wrap or use compact label */
  .products-sort-order select,
  .products-sort-order .select-title,
  .ks-sort-bar select,
  [class*="sort-by"] select {
    white-space: normal !important;
    text-overflow: clip !important;
    font-size: 14px !important;
  }
  /* Subcategory pills: allow horizontal scroll instead of truncate */
  .subcategory-pills,
  .ks-subcategory-pills,
  [class*="subcategory-pill"]:not(a):not(button) {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }
  .subcategory-pills a,
  .ks-subcategory-pill,
  [class*="subcategory-pill"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
  }
}

/* ============================================================
 * SEV 2.6 — kscheckout "-50%" step badges are confusing
 * They look identical to promo discount badges.
 * Hide them per-section; show only one consolidated "Rabat -50%"
 * banner if needed.
 * ============================================================ */
@media (max-width: 1023px) {
  body[class*="module-kscheckout"] .ks-step-card .ks-discount-badge,
  body[class*="module-kscheckout"] .ks-card .ks-discount-badge,
  body[class*="module-kscheckout"] .ks-card__step + .ks-discount-badge,
  body[class*="module-kscheckout"] .ks-section-discount-pill,
  body[class*="module-kscheckout"] [class*="ks-card__"] .ks-promo-pill,
  body[class*="module-kscheckout"] [class*="ks-card__"] .ks-promo-badge {
    display: none !important;
  }
}

/* ============================================================
 * SEV 2.7 — Cart item title truncation
 * Allow 2-line clamp instead of 1-line ellipsis on mobile cart.
 * ============================================================ */
@media (max-width: 767px) {
  body.page-cart .product-line-info .label,
  body.page-cart .cart-item-name,
  body.page-cart .product-line__title,
  body.page-cart [class*="product-line"] .label {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.35 !important;
  }
}

/* ============================================================
 * SEV 3.2 — Breadcrumb tap zone
 * Breadcrumb links measured 4px wide × 18px tall — invisible.
 * Add padding so the hit area is ≥36px tall.
 * ============================================================ */
@media (max-width: 1023px) {
  .breadcrumb a,
  nav.breadcrumb ol li a,
  .breadcrumb__link {
    display: inline-block !important;
    padding: 8px 4px !important;
    min-height: 36px !important;
    line-height: 1 !important;
  }
}

/* ============================================================
 * SEV 3.5 — Stray floating orange icon on tablet
 * Hide unanchored share/scroll-top icons that floated in the
 * middle of search + blog tablet views.
 * ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .ks-floating-share,
  .ks-floating-orange,
  .floating-share-btn,
  .ks-side-share[style*="position: fixed"] {
    display: none !important;
  }
}

/* ============================================================
 * NICE-TO-HAVES — small polish that costs nothing
 * ============================================================ */
@media (max-width: 1023px) {
  /* Bottom sticky CTAs need padding so chat (when shown) doesn't
   * touch them */
  .ks-sticky-bar {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
  /* Modal close (×) buttons that are 24×24 — bump tap area */
  button.close,
  .modal-close,
  [aria-label="Zamknij"],
  [aria-label="close"] {
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* End ks-mobile-tablet-fixes.css */