/*
 * NLM Mobile — Product page overrides
 * Gated by [data-nlm-mobile="1"]. Inert when shell is off.
 * Layered on top of the existing product.twig markup; no template changes.
 */

/* =============================================================================
   1. CONTAINER & LAYOUT
   ============================================================================= */
[data-nlm-mobile="1"] #product-product.container,
[data-nlm-mobile="1"] body.route-product-product .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* The outer Bootstrap row collapses into vertical stack on mobile already,
   but we strip padding so the gallery can go edge-to-edge. */
[data-nlm-mobile="1"] #product-product > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[data-nlm-mobile="1"] #product-product > .row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  width: 100% !important;
}

/* Breadcrumb: keep but compact. */
[data-nlm-mobile="1"] .breadcrumb {
  font-size: 12px;
  padding: 8px 14px;
  background: var(--nlm-c-surface-alt);
  border-radius: 0;
  margin: 0;
  border: none;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
[data-nlm-mobile="1"] .breadcrumb::-webkit-scrollbar { display: none; }
[data-nlm-mobile="1"] .breadcrumb > li + li::before { padding: 0 6px; }

/* =============================================================================
   2. IMAGE GALLERY — Swiper-wrapped on mobile
   ============================================================================= */
[data-nlm-mobile="1"] #product-product .thumbnails {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--nlm-c-surface);
  position: relative;
}

/* Default look while JS is initializing — show only first image edge-to-edge. */
[data-nlm-mobile="1"] #product-product .thumbnails:not(.nlm-swiper) > li {
  display: none;
}
[data-nlm-mobile="1"] #product-product .thumbnails:not(.nlm-swiper) > li:first-child {
  display: block;
  width: 100%;
  margin: 0;
}
[data-nlm-mobile="1"] #product-product .thumbnails:not(.nlm-swiper) > li:first-child .thumbnail {
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: var(--nlm-c-surface);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
[data-nlm-mobile="1"] #product-product .thumbnails:not(.nlm-swiper) > li:first-child .thumbnail img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* Once JS adds .nlm-swiper, Swiper takes over presentation. */
[data-nlm-mobile="1"] #product-product .thumbnails.nlm-swiper {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
[data-nlm-mobile="1"] #product-product .thumbnails.nlm-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nlm-c-surface);
}
[data-nlm-mobile="1"] #product-product .thumbnails.nlm-swiper .swiper-slide img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
}
[data-nlm-mobile="1"] #product-product .thumbnails.nlm-swiper .swiper-pagination {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
}
[data-nlm-mobile="1"] #product-product .thumbnails.nlm-swiper .swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.25);
  opacity: 1;
  width: 8px;
  height: 8px;
  margin: 0 4px !important;
  transition: width 200ms, background 200ms;
}
[data-nlm-mobile="1"] #product-product .thumbnails.nlm-swiper .swiper-pagination-bullet-active {
  background: var(--nlm-c-primary);
  width: 24px;
  border-radius: 4px;
}
[data-nlm-mobile="1"] #product-product .thumbnails.nlm-swiper .swiper-button-prev,
[data-nlm-mobile="1"] #product-product .thumbnails.nlm-swiper .swiper-button-next {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: var(--nlm-shadow-sm);
  color: var(--nlm-c-text);
  margin-top: -18px;
}
[data-nlm-mobile="1"] #product-product .thumbnails.nlm-swiper .swiper-button-prev::after,
[data-nlm-mobile="1"] #product-product .thumbnails.nlm-swiper .swiper-button-next::after {
  font-size: 14px;
  font-weight: 700;
}
/* On very small screens, hide nav arrows (swipe is plenty). */
@media (max-width: 480px) {
  [data-nlm-mobile="1"] #product-product .thumbnails.nlm-swiper .swiper-button-prev,
  [data-nlm-mobile="1"] #product-product .thumbnails.nlm-swiper .swiper-button-next {
    display: none;
  }
}

/* =============================================================================
   3. PRODUCT INFO BLOCK
   ============================================================================= */
[data-nlm-mobile="1"] #product-product h1 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin: 16px 14px 8px;
  color: var(--nlm-c-text);
}

/* The right-column meta list (brand, model, reward, availability) */
[data-nlm-mobile="1"] #product-product .list-unstyled {
  margin: 0 14px 12px;
  padding: 12px;
  background: var(--nlm-c-surface-alt);
  border-radius: var(--nlm-radius);
  font-size: 13px;
  list-style: none;
}
[data-nlm-mobile="1"] #product-product .list-unstyled li {
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* Price block */
[data-nlm-mobile="1"] #product-product h2,
[data-nlm-mobile="1"] #product-product .price,
[data-nlm-mobile="1"] #product-product .h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 12px 14px 4px;
  color: var(--nlm-c-text);
}
[data-nlm-mobile="1"] #product-product h2 .price-old,
[data-nlm-mobile="1"] #product-product .price-old {
  font-size: 16px;
  color: var(--nlm-c-text-muted);
  text-decoration: line-through;
  margin-right: 8px;
  font-weight: 400;
}
[data-nlm-mobile="1"] #product-product h2 .price-new,
[data-nlm-mobile="1"] #product-product .price-new {
  color: var(--nlm-c-danger);
}

/* Tax line, discount line, reward points etc. */
[data-nlm-mobile="1"] #product-product .product-info,
[data-nlm-mobile="1"] #product-product .price-tax,
[data-nlm-mobile="1"] #product-product .discount {
  font-size: 12px;
  color: var(--nlm-c-text-muted);
  margin: 0 14px;
}

/* Stock badge */
[data-nlm-mobile="1"] #product-product .product-info > p strong {
  font-weight: 600;
  color: var(--nlm-c-text);
}

/* =============================================================================
   4. HIDE INLINE ADD-TO-CART (the sticky mobile bar takes over)
   ============================================================================= */
/* The inline #button-cart and #input-quantity are kept in the DOM so the
   existing OpenCart product.twig JS handler still wires up correctly. We
   visually hide them via the .nlm-product--ready class that nlm-product.js
   adds to <body> once the sticky CTA is mounted. */
[data-nlm-mobile="1"] body.nlm-product--ready #button-cart {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
/* Keep the qty input accessible in the DOM but visually folded into the
   sticky bar. */
[data-nlm-mobile="1"] body.nlm-product--ready #input-quantity {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Options (size, color, etc.) — surface them as a clean accordion-like block. */
[data-nlm-mobile="1"] #product .form-group {
  margin: 12px 14px;
}
[data-nlm-mobile="1"] #product .form-group .control-label {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nlm-c-text-muted);
  margin-bottom: 6px;
  display: block;
}
[data-nlm-mobile="1"] #product .form-group .form-control,
[data-nlm-mobile="1"] #product .form-group .radio,
[data-nlm-mobile="1"] #product .form-group .checkbox {
  font-size: 15px;
}
[data-nlm-mobile="1"] #product .form-group select.form-control {
  height: 48px;
  padding: 0 12px;
  border-radius: var(--nlm-radius-sm);
  border: 1px solid var(--nlm-c-border-strong);
  background: var(--nlm-c-surface);
  font-size: 16px; /* prevents iOS zoom on focus */
}

/* =============================================================================
   5. STICKY ADD-TO-CART BAR (lives above the bottom tab bar)
   ============================================================================= */
[data-nlm-mobile="1"] .nlm-product-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--nlm-h-tabbar) + env(safe-area-inset-bottom, 0px));
  padding: 8px 14px;
  padding-left: max(14px, env(safe-area-inset-left, 0px));
  padding-right: max(14px, env(safe-area-inset-right, 0px));
  background: var(--nlm-c-surface);
  border-top: 1px solid var(--nlm-c-border);
  z-index: calc(var(--nlm-z-bar) - 1);
  display: flex;
  gap: 8px;
  align-items: center;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}
[data-nlm-mobile="1"] body.nlm-product--ready {
  /* Reserve space below content so the sticky CTA doesn't overlap reviews. */
  padding-bottom: calc(var(--nlm-h-tabbar) + var(--nlm-h-sticky-cta) + env(safe-area-inset-bottom, 0px)) !important;
}
[data-nlm-mobile="1"] .nlm-product-cta .nlm-stepper { flex-shrink: 0; }
[data-nlm-mobile="1"] .nlm-product-cta .nlm-btn { flex: 1; min-height: 48px; padding: 10px 16px; font-size: 15px; }
[data-nlm-mobile="1"] .nlm-product-cta .nlm-btn--unavailable {
  background: var(--nlm-c-border-strong);
  color: var(--nlm-c-text-muted);
  cursor: not-allowed;
}

/* =============================================================================
   6. TABS → ACCORDION conversion
   ============================================================================= */
[data-nlm-mobile="1"] #product-product .nav-tabs {
  display: none !important;
}
[data-nlm-mobile="1"] #product-product .tab-content {
  margin-top: 16px;
  border-top: 1px solid var(--nlm-c-border);
}
[data-nlm-mobile="1"] #product-product .tab-content .tab-pane {
  display: block !important; /* show all panes, accordion gates them */
  border-bottom: 1px solid var(--nlm-c-border);
  opacity: 1 !important;
}
[data-nlm-mobile="1"] #product-product .tab-content .tab-pane > .nlm-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  background: var(--nlm-c-surface);
  font-size: 15px;
  font-weight: 600;
  color: var(--nlm-c-text);
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 56px;
}
[data-nlm-mobile="1"] #product-product .tab-content .tab-pane > .nlm-accordion-head .fa {
  transition: transform var(--nlm-dur) var(--nlm-ease);
  color: var(--nlm-c-text-muted);
}
[data-nlm-mobile="1"] #product-product .tab-content .tab-pane[data-nlm-open="true"] > .nlm-accordion-head .fa {
  transform: rotate(180deg);
}
[data-nlm-mobile="1"] #product-product .tab-content .tab-pane > .nlm-accordion-body {
  padding: 0 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--nlm-c-text);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--nlm-dur) var(--nlm-ease), padding var(--nlm-dur) var(--nlm-ease);
}
[data-nlm-mobile="1"] #product-product .tab-content .tab-pane[data-nlm-open="true"] > .nlm-accordion-body {
  max-height: 5000px;
  padding-bottom: 20px;
}

/* Specifications table inside the accordion */
[data-nlm-mobile="1"] #product-product #tab-specification table {
  width: 100% !important;
  font-size: 13px;
  border-collapse: collapse;
}
[data-nlm-mobile="1"] #product-product #tab-specification table td,
[data-nlm-mobile="1"] #product-product #tab-specification table th {
  padding: 8px 6px;
  border-bottom: 1px solid var(--nlm-c-border);
  text-align: left;
}
[data-nlm-mobile="1"] #product-product #tab-specification table tr td:first-child,
[data-nlm-mobile="1"] #product-product #tab-specification table tr th:first-child {
  color: var(--nlm-c-text-muted);
  font-weight: 500;
}

/* Review form */
[data-nlm-mobile="1"] #product-product #tab-review .form-horizontal .form-group {
  margin-left: 0;
  margin-right: 0;
}
[data-nlm-mobile="1"] #product-product #tab-review .form-control,
[data-nlm-mobile="1"] #product-product #tab-review textarea {
  font-size: 16px;
  width: 100%;
}

/* Hide the duplicate disabled "Add to cart" buttons that appear when product
   is unavailable — the sticky bar reflects that state instead. */
[data-nlm-mobile="1"] body.nlm-product--ready #product .btn-primary[disabled],
[data-nlm-mobile="1"] body.nlm-product--ready #product .btn-primary[style*="background: gray"] {
  display: none !important;
}

/* Wishlist / Compare buttons → relegate to a small inline row */
[data-nlm-mobile="1"] #product-product .btn-group {
  display: flex !important;
  gap: 8px;
  margin: 8px 14px 16px;
}
[data-nlm-mobile="1"] #product-product .btn-group > .btn {
  flex: 1;
  height: 44px;
  font-size: 13px;
  border: 1px solid var(--nlm-c-border-strong);
  background: var(--nlm-c-surface);
  color: var(--nlm-c-text);
  border-radius: var(--nlm-radius-sm);
}

/* =============================================================================
   7. RELATED PRODUCTS — horizontal scroller
   ============================================================================= */
[data-nlm-mobile="1"] #product-product h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 20px 14px 8px;
}
[data-nlm-mobile="1"] #product-product .row:has(.product-layout) {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 4px 14px 16px;
  gap: 12px;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
}
[data-nlm-mobile="1"] #product-product .row:has(.product-layout)::-webkit-scrollbar { display: none; }
[data-nlm-mobile="1"] #product-product .product-layout {
  flex: 0 0 160px !important;
  width: 160px !important;
  max-width: 160px;
  padding: 0 !important;
  scroll-snap-align: start;
}
[data-nlm-mobile="1"] #product-product .product-thumb {
  border: 1px solid var(--nlm-c-border);
  border-radius: var(--nlm-radius);
  background: var(--nlm-c-surface);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
[data-nlm-mobile="1"] #product-product .product-thumb .image {
  aspect-ratio: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
[data-nlm-mobile="1"] #product-product .product-thumb .caption {
  padding: 8px 10px 4px;
  flex: 1;
}
[data-nlm-mobile="1"] #product-product .product-thumb .caption h4 {
  font-size: 12px;
  line-height: 1.3;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
}
[data-nlm-mobile="1"] #product-product .product-thumb .caption h4 a {
  color: var(--nlm-c-text);
  text-decoration: none;
}
[data-nlm-mobile="1"] #product-product .product-thumb .caption p {
  display: none;
}
[data-nlm-mobile="1"] #product-product .product-thumb .price {
  padding: 0 10px 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
[data-nlm-mobile="1"] #product-product .product-thumb .button-group {
  display: none;
}

/* =============================================================================
   8. JOURNAL2-STYLE FEATURE PANELS — let any custom blocks in product.twig
   render at full width without the BS3 col-md offsets breaking the layout.
   ============================================================================= */
[data-nlm-mobile="1"] #product-product .alert,
[data-nlm-mobile="1"] #product-product .panel {
  margin: 8px 14px;
  border-radius: var(--nlm-radius-sm);
  font-size: 13px;
}