/* =====================================================================
 * KS-RESPONSIVE-POLISH-V1 — 2026-05-13
 *
 * Drop-in fixes from the responsive audit (/tmp/responsive-audit-2026-05-13.md).
 * Bundled because each is a small isolated rule and they share theme assumptions.
 *
 * Inventory:
 *   1. Product-page description tables → scroll horizontally on mobile (P1)
 *   2. (DEFERRED — template change) Move Add-to-Cart CTA above the fold (P2)
 *   3. Cart icon visible at tablet 768 (P2)
 *   4. Equal-height product cards on category grids (P2)
 *   5. Bump small fonts: product-card meta, SEO description, trust badges (P2)
 *   6. Chat-widget z-index/offset so it doesn't clip CTAs (bonus P3)
 *   7. Blog grid 2-col at 768 (bonus P3)
 *   8. Breadcrumb top-padding (bonus P3)
 *
 * All rules namespaced to `body` selectors or specific classes to avoid
 * bleeding into the cart/checkout (which has its own ks-cart-v1.css and
 * ks-checkout-fix.css already loaded).
 * ===================================================================== */

/* =============================================================
 * 1) PRODUCT PAGE — long-form description tables overflow fix [P1]
 *
 * The product description (.product-description / .ks-pdp /
 * #product-description) is rendered from PrestaShop's CMS text field and
 * may include comparison/spec tables. Those tables hard-wrap to natural
 * width and overflow off the right edge on mobile. Force them into a
 * horizontally scrollable container so the rest of the layout stays
 * intact and customers can swipe-scan the table.
 * ============================================================= */
body.product .product-description table,
body.product .product-information table,
body.product .ks-pdp table,
body.product #description table,
body.product .tabs table,
body.product article table,
body.product .page-content table {
  display: block;
  max-width: 100%;
  width: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 12px 0;
}
body.product .product-description table th,
body.product .product-description table td,
body.product .ks-pdp table th,
body.product .ks-pdp table td,
body.product #description table th,
body.product #description table td,
body.product article table th,
body.product article table td {
  white-space: normal;
  vertical-align: top;
  word-break: normal;
  min-width: 90px;
}
/* Hint that the table is scrollable on touch devices */
@media (max-width: 767px) {
  body.product .product-description table::-webkit-scrollbar,
  body.product .ks-pdp table::-webkit-scrollbar,
  body.product #description table::-webkit-scrollbar { height: 6px; }
  body.product .product-description table::-webkit-scrollbar-thumb,
  body.product .ks-pdp table::-webkit-scrollbar-thumb,
  body.product #description table::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.20);
    border-radius: 3px;
  }
}

/* Category-page Office comparison table — same treatment */
body.category .category-seo-description table,
body.category #category-description table,
body.category .page-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =============================================================
 * 3) CART ICON visible at tablet (768) — keep it out of the hamburger [P2]
 *
 * PS classic + Bootstrap hides the cart icon under .hidden-md-down on
 * smaller breakpoints. KS uses `.ks-icons` wrapper for the header
 * actions row. Force the cart link visible at >= 576px so tablet users
 * can see "cart count" without opening the menu.
 * ============================================================= */
@media (min-width: 576px) and (max-width: 991px) {
  body .ks-icons #_desktop_cart,
  body .ks-icons .blockcart,
  body #header .ks-icons .blockcart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 4px;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  body #header .ks-icons .blockcart a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
  }
  body #header .ks-icons .blockcart .cart-products-count {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
  }
}

/* =============================================================
 * 4) PRODUCT-CARD equal-height alignment on category grids [P2]
 *
 * Cards with 1-line vs 3-line titles caused the "Do koszyka" buttons
 * to misalign across rows. Use flex to push the CTA to the bottom of
 * each card regardless of title length, and reserve room for 2 lines
 * of title text so prices align cleanly.
 * ============================================================= */
.product-miniature .product-description,
.product-miniature .product-meta,
.product-miniature .ks-product-card-body {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 0;
}
.product-miniature {
  display: flex !important;
  flex-direction: column;
}
.product-miniature .product-thumbnail,
.product-miniature .ks-card-image {
  flex: 0 0 auto;
}
.product-miniature .product-title,
.product-miniature h3.product-title,
.product-miniature .product-title a,
.product-miniature .h3.product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
  margin-bottom: 8px;
}
.product-miniature .product-price-and-shipping,
.product-miniature .price,
.product-miniature .ks-product-card-price {
  margin-top: auto;
}

/* =============================================================
 * 5) BUMP SMALL FONTS — product-card meta, SEO blocks, trust badges [P2]
 *
 * Audit flagged sub-12px text in three areas. Bump to readable sizes
 * without disturbing parent layouts.
 * ============================================================= */
/* Product-card secondary metadata (License / Period / Device / System) */
.product-miniature .ks-product-meta,
.product-miniature .ks-product-meta-row,
.product-miniature .product-attributes,
.product-miniature .product-specs,
.product-miniature [class*="meta-pill"] {
  font-size: 12.5px;
  line-height: 1.4;
}

/* SEO description blocks on category + product pages (long-form prose) */
@media (max-width: 991px) {
  body.category .category-seo-description,
  body.category #category-description,
  body.product .product-description,
  body.product .ks-pdp,
  body.product #description {
    font-size: 15px;
    line-height: 1.6;
  }
  body.category .category-seo-description p,
  body.category #category-description p,
  body.product .product-description p,
  body.product #description p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 12px;
  }
  body.category .category-seo-description h2,
  body.category .category-seo-description h3,
  body.product .product-description h2,
  body.product .product-description h3 {
    line-height: 1.3;
  }
}

/* Trust-strip badge labels (top + bottom strips) */
.ks-trust-strip .ks-trust-strip-item,
.ks-trust-strip-item span,
.ks-cat-trust .ks-cat-trust-item,
.ks-cat-trust span,
[class*="ks-trust"] [class*="label"] {
  font-size: 12.5px;
  line-height: 1.35;
}

/* =============================================================
 * 6) CHAT WIDGET z-index — stop it overlapping CTAs [bonus P3]
 *
 * The fixed-position chat bubble (kscchat / livechat etc.) clips
 * "Do koszyka" buttons on tablet + desktop product cards. Don't move
 * the widget; instead lower its z-index slightly so CTAs receive the
 * click first, and add a small right padding so it doesn't hover
 * directly over card content at desktop widths.
 * ============================================================= */
[id^="kscchat"],
[id^="livechat"],
#chat-widget-container,
.lc-1u8d4e,
#ks-chat-bubble,
#tawk_default_container,
[class*="liveagent-chat"] {
  z-index: 40 !important; /* below .btn-primary (PS classic uses z-index 1+ default; this stays above content but below CTAs that we'll bump if needed) */
}
@media (min-width: 992px) {
  body .product-miniature .add-to-cart,
  body .product-miniature .btn-primary,
  body .ks-product-card .btn,
  body .product-miniature .ks-add-to-cart {
    position: relative;
    z-index: 50;
  }
}

/* =============================================================
 * 7) BLOG GRID — 2 columns at 768 (was 3) [bonus P3]
 * ============================================================= */
@media (min-width: 768px) and (max-width: 991px) {
  .ks-blog-grid,
  .ybc-blog-list .row,
  .ybc-blog-list .blog-list,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ks-blog-grid .ks-blog-card,
  .ybc-blog-list .blog-post {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* =============================================================
 * 8) BREADCRUMB — top breathing room [bonus P3]
 * ============================================================= */
body.category .breadcrumb,
body.product .breadcrumb,
body .breadcrumb {
  padding-top: 12px;
  padding-bottom: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}