/* =====================================================================
 * KS-PDP-MOBILE-V1 — Product page UX upgrade (2026-05-13)
 *
 * Targets: body.product (PrestaShop classic product page)
 *
 * Scope:
 *   1. Sticky bottom add-to-cart bar on mobile (always visible)
 *   2. Cap product cover image height on mobile so CTA is above the fold
 *   3. Custom quantity stepper matching the cart/checkout style
 *   4. Product-description tabs as accordion on mobile
 *   5. Tighten the in-place add-to-cart row (button + qty side by side)
 *   6. Smoother trust strip + reassurance under price
 *
 * Companion JS: ks-pdp-mobile-v1.js (sticky bar IntersectionObserver,
 *               qty stepper +/-, mirror form submit to sticky button).
 * ===================================================================== */

body.product {
  --ks-primary: #f97316;
  --ks-primary-hover: #ea580c;
  --ks-border: #e2e8f0;
  --ks-border-strong: #cbd5e1;
  --ks-text: #0f172a;
  --ks-text-secondary: #334155;
  --ks-text-muted: #64748b;
  --ks-radius-card: 12px;
  --ks-radius-input: 8px;
}

/* =============================================================
 * 2) PRODUCT COVER — cap height on mobile
 *
 * The cover image was eating ~480px on a 360-wide screen, pushing the
 * price + CTA below the fold. Cap to a comfortable 320 px so the next
 * elements appear immediately.
 * ============================================================= */
@media (max-width: 767px) {
  body.product .product-cover,
  body.product .images-container .product-cover,
  body.product .product-images,
  body.product .images-container {
    max-height: 320px !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  body.product .product-cover img,
  body.product .product-cover picture img,
  body.product .images-container img.js-qv-product-cover {
    max-height: 320px;
    width: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
  }
  /* Thumbnails strip — collapse to small horizontal row */
  body.product .product-images {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding: 8px 0;
    margin: 8px 0;
    -webkit-overflow-scrolling: touch;
  }
  body.product .product-images .thumb-container {
    flex: 0 0 56px;
  }
  body.product .product-images img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid var(--ks-border);
    border-radius: 6px;
    background: #fff;
  }
}

/* =============================================================
 * 5) IN-PLACE ADD-TO-CART ROW
 *
 * PS markup: .product-add-to-cart contains [.product-quantity]
 * (with [.qty] wrapping the input) and [.add] (the button).
 * Force them into a flex row, beef up the CTA, give it Stripe-style
 * orange + shadow.
 * ============================================================= */
body.product .product-add-to-cart {
  margin-top: 16px;
}
body.product .product-add-to-cart .control-label {
  display: none; /* "Quantity" label is redundant when the qty stepper has +/- icons */
}
body.product .product-add-to-cart .product-quantity {
  display: flex !important;
  align-items: stretch;
  gap: 12px;
  margin: 0;
}
body.product .product-add-to-cart .product-quantity .qty {
  flex: 0 0 auto;
}
body.product .product-add-to-cart .product-quantity .add {
  flex: 1 1 auto;
  min-width: 0;
}

/* =============================================================
 * 3) PDP QUANTITY STEPPER — custom +/- matching the cart
 *
 * PrestaShop classic injects `.bootstrap-touchspin` around the qty
 * input + chevron buttons (.bootstrap-touchspin-up/down). Style the
 * same way as in ks-cart-v1.css.
 * ============================================================= */
body.product .product-quantity .qty .input-group.bootstrap-touchspin,
body.product .product-quantity .input-group.bootstrap-touchspin {
  display: inline-flex !important;
  align-items: center;
  border: 1.5px solid var(--ks-border-strong);
  border-radius: var(--ks-radius-input);
  background: #fff;
  overflow: hidden;
  height: 48px;
}
body.product #quantity_wanted {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 44px !important;
  height: 46px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ks-text) !important;
  font-family: inherit !important;
  outline: none !important;
  border-radius: 0 !important;
}
body.product #quantity_wanted::-webkit-inner-spin-button,
body.product #quantity_wanted::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}
body.product .product-quantity .btn.btn-touchspin {
  width: 38px;
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--ks-text-secondary);
  font-size: 0;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
body.product .product-quantity .btn.btn-touchspin:hover {
  background: rgba(249, 115, 22, 0.08);
  color: var(--ks-primary);
}
body.product .product-quantity .btn.bootstrap-touchspin-up::after,
body.product .product-quantity .btn.bootstrap-touchspin-down::after {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.product .product-quantity .btn.bootstrap-touchspin-up::after { content: '+'; }
body.product .product-quantity .btn.bootstrap-touchspin-down::after { content: '−'; }
body.product .product-quantity .btn.bootstrap-touchspin-up { order: 3; border-left: 1px solid var(--ks-border) !important; }
body.product .product-quantity .btn.bootstrap-touchspin-down { order: 1; border-right: 1px solid var(--ks-border) !important; }
body.product .product-quantity .input-group.bootstrap-touchspin #quantity_wanted { order: 2; }
body.product .product-quantity .input-group-btn-vertical { display: contents; }

/* =============================================================
 * IN-PLACE ADD-TO-CART BUTTON
 *
 * Beef up the PS classic .add-to-cart button to Stripe-orange CTA.
 * ============================================================= */
body.product .product-add-to-cart .btn.add-to-cart,
body.product button.add-to-cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  height: 48px;
  background: var(--ks-primary) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--ks-radius-input) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35), 0 2px 4px rgba(234, 88, 12, 0.18) !important;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
}
body.product .product-add-to-cart .btn.add-to-cart:hover,
body.product button.add-to-cart:hover {
  background: var(--ks-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45) !important;
}
body.product .product-add-to-cart .btn.add-to-cart i.material-icons {
  font-size: 18px !important;
}

/* =============================================================
 * 6) TRUST STRIP UNDER PRICE — compact mobile-friendly chips
 *
 * The blockreassurance hook prints 4 stacked lines. On mobile cram
 * them into a 2x2 grid; on desktop, single row.
 * ============================================================= */
@media (max-width: 767px) {
  body.product .reassurance-block,
  body.product .block-reassurance,
  body.product #blockreassurance {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px !important;
  }
  body.product .block-reassurance ul {
    display: contents;
  }
  body.product .block-reassurance li {
    padding: 8px !important;
    border: 1px solid var(--ks-border) !important;
    border-radius: 8px;
    background: #fff;
    font-size: 12px !important;
    line-height: 1.3;
  }
}

/* =============================================================
 * 4) TABS / ACCORDIONS on mobile — description, specs, FAQ
 *
 * PS classic uses `.nav-tabs` on desktop. On mobile, convert to
 * stacked headers with arrow chevron — looks like an accordion.
 * (Visual only; JS toggle is preserved.)
 * ============================================================= */
@media (max-width: 767px) {
  body.product .nav-tabs.product-tabs,
  body.product .product-tabs.nav-tabs {
    display: flex;
    flex-direction: column;
    border-bottom: 0;
    gap: 4px;
  }
  body.product .nav-tabs.product-tabs .nav-item,
  body.product .nav-tabs.product-tabs li {
    width: 100%;
    margin: 0;
  }
  body.product .nav-tabs.product-tabs .nav-link {
    width: 100%;
    text-align: left;
    border: 1px solid var(--ks-border) !important;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ks-text-secondary);
    background: #fff;
    margin: 0;
    position: relative;
  }
  body.product .nav-tabs.product-tabs .nav-link.active {
    border-color: var(--ks-primary) !important;
    background: rgba(249, 115, 22, 0.04);
    color: var(--ks-text);
  }
  body.product .nav-tabs.product-tabs .nav-link::after {
    content: '⌄';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--ks-text-muted);
  }
}

/* =============================================================
 * 1) STICKY MOBILE ADD-TO-CART BAR
 *
 * HTML injected by ks-pdp-mobile-v1.js at the end of <body>:
 *   <div class="ks-pdp-sticky-bar" hidden>
 *     <div class="ks-pdp-sticky-info">
 *       <span class="ks-pdp-sticky-title">{name}</span>
 *       <span class="ks-pdp-sticky-price">{price}</span>
 *     </div>
 *     <button class="ks-pdp-sticky-cta">{l 'Do koszyka'}</button>
 *   </div>
 * The CTA proxies a click on the in-place .add-to-cart button so the
 * existing prestashop-core add-to-cart JS keeps working.
 * ============================================================= */
.ks-pdp-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #fff;
  border-top: 1px solid var(--ks-border, #e2e8f0);
  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ks-pdp-sticky-bar.ks-pdp-sticky-bar--visible {
  transform: translateY(0);
}
.ks-pdp-sticky-bar[hidden] {
  display: flex; /* overrule [hidden] for transition */
}
.ks-pdp-sticky-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 2px;
}
.ks-pdp-sticky-title {
  font-size: 12.5px;
  color: var(--ks-text-muted, #64748b);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ks-pdp-sticky-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--ks-text, #0f172a);
  font-variant-numeric: tabular-nums;
}
.ks-pdp-sticky-price .regular-price {
  text-decoration: line-through;
  color: var(--ks-text-muted, #64748b);
  font-weight: 500;
  font-size: 13px;
  margin-right: 6px;
}
.ks-pdp-sticky-cta {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  background: var(--ks-primary, #f97316);
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
  transition: background 0.15s;
  white-space: nowrap;
}
.ks-pdp-sticky-cta:hover { background: var(--ks-primary-hover, #ea580c); }
.ks-pdp-sticky-cta:active { transform: scale(0.97); }
.ks-pdp-sticky-cta:disabled,
.ks-pdp-sticky-cta.is-loading {
  background: var(--ks-border-strong, #cbd5e1);
  box-shadow: none;
  cursor: not-allowed;
}
.ks-pdp-sticky-cta .ks-pdp-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ks-pdp-spin 0.6s linear infinite;
  margin-right: 6px;
  vertical-align: -3px;
}
@keyframes ks-pdp-spin { to { transform: rotate(360deg); } }

/* Only on small viewports (the in-place CTA is fine on desktop) */
@media (min-width: 992px) {
  .ks-pdp-sticky-bar { display: none !important; }
}

/* Push page bottom padding so the sticky bar doesn't cover the footer */
@media (max-width: 991px) {
  body.product { padding-bottom: 78px; }
  body.product #footer { padding-bottom: 12px; }
}