/* =============================================================================
   MOLECULAR PEPTIDES — Product Page UI Overhaul v1.0
   Clean, modern, premium design (Science.bio / Chemyo / Swiss Chems tier)
   Enqueued AFTER mp-product-page.css to override where needed
   ============================================================================= */

/* --- Step 6: Design Tokens (CSS Custom Properties) --- */
:root {
  --mp-oh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mp-oh-font-heading: 'DM Sans', 'Inter', sans-serif;
  --mp-oh-body: #374151;
  --mp-oh-muted: #6b7280;
  --mp-oh-heading: #111827;
  --mp-oh-primary: #1f3e61;
  --mp-oh-accent: #32808d;
  --mp-oh-border: #e5e7eb;
  --mp-oh-border-light: #f3f4f6;
  --mp-oh-bg-surface: #ffffff;
  --mp-oh-bg-muted: #f9fafb;
  --mp-oh-bg-accent: #f0fdfa;
  --mp-oh-success: #059669;
  --mp-oh-warning: #f97316;
  --mp-oh-cta: #c2410c;
  --mp-oh-cta-hover: #9a3412;
  --mp-oh-radius-sm: 0.375rem;
  --mp-oh-radius-md: 0.5rem;
  --mp-oh-radius-lg: 0.75rem;
  --mp-oh-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --mp-oh-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --mp-oh-transition: 0.2s ease;
}

/* --- Step 2: Global Spacing & Layout --- */
.single-product-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  font-family: var(--mp-oh-font-body);
  color: var(--mp-oh-body);
  line-height: 1.6;
}

/* Section spacing — consistent 40px between major blocks */
.mp-stitch-product-grid {
  margin-bottom: 2.5rem !important;
  margin-top: 0.5rem !important;
  gap: 2.5rem !important;
}

.mp-stitch-bottom-grid {
  margin-top: 0 !important;
  gap: 2.5rem !important;
}

/* Disclaimer banner — tighter */
.mp-top-disclaimer-banner {
  margin-bottom: 1.5rem !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.8rem !important;
  border-radius: var(--mp-oh-radius-md) !important;
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
  line-height: 1.5 !important;
}
.mp-top-disclaimer-banner p {
  margin: 0 !important;
  font-size: 0.8rem !important;
}
.mp-top-disclaimer-banner svg {
  flex-shrink: 0;
  color: #d97706 !important;
}

/* Breadcrumb — tighter spacing */
.mp-breadcrumb {
  margin-bottom: 0.75rem !important;
  padding: 0 !important;
  font-size: 0.8125rem !important;
}

/* --- Step 2: Image Card Refinement --- */
.mp-stitch-image-card {
  border-radius: var(--mp-oh-radius-lg) !important;
  border: 1px solid var(--mp-oh-border) !important;
  box-shadow: var(--mp-oh-shadow-sm) !important;
  padding: 1.5rem !important;
}

.mp-stitch-image-wrapper {
  border-radius: var(--mp-oh-radius-md) !important;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
}

/* Subtle dot pattern */
.mp-stitch-vial-bg {
  opacity: 0.04 !important;
}

/* --- Step 2: Product Info Area --- */
.mp-stitch-product-title {
  font-family: var(--mp-oh-font-heading) !important;
  color: var(--mp-oh-heading) !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.mp-stitch-header-block {
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Shipping notice — subtler */
.mp-stitch-shipping-notice {
  background: var(--mp-oh-bg-muted) !important;
  border: 1px solid var(--mp-oh-border) !important;
  color: var(--mp-oh-body) !important;
  border-radius: var(--mp-oh-radius-md) !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.8125rem !important;
  margin-bottom: 1rem !important;
}
.mp-stitch-shipping-notice i,
.mp-stitch-shipping-notice .fas {
  color: var(--mp-oh-accent) !important;
}
.mp-stitch-shipping-bold {
  color: var(--mp-oh-heading) !important;
}
.mp-stitch-shipping-sub {
  color: var(--mp-oh-muted) !important;
  font-size: 0.75rem !important;
}

/* Purchase controls — cleaner */
.mp-stitch-purchase-controls {
  border-radius: var(--mp-oh-radius-lg) !important;
  border: 1px solid var(--mp-oh-border) !important;
  padding: 1rem !important;
  box-shadow: none !important;
}

/* --- Step 3: Pricing Table Refinement --- */
.mp-pricing-table-container {
  background: var(--mp-oh-bg-surface) !important;
  border: 1px solid var(--mp-oh-border) !important;
  border-radius: var(--mp-oh-radius-lg) !important;
  box-shadow: var(--mp-oh-shadow-sm) !important;
  overflow: hidden !important;
}

.mp-pricing-title {
  font-family: var(--mp-oh-font-heading) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--mp-oh-heading) !important;
  padding: 0.75rem 1rem !important;
  background: var(--mp-oh-bg-muted) !important;
  border-bottom: 1px solid var(--mp-oh-border) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
}

.mp-pricing-header {
  background: transparent !important;
  font-size: 0.75rem !important;
  color: var(--mp-oh-muted) !important;
  padding: 0.5rem 1rem !important;
  border-bottom: 1px solid var(--mp-oh-border-light) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.mp-pricing-row {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--mp-oh-border-light) !important;
  transition: background var(--mp-oh-transition), box-shadow var(--mp-oh-transition) !important;
  font-size: 0.875rem !important;
}
.mp-pricing-row:last-child {
  border-bottom: none !important;
}
.mp-pricing-row[data-qty]:hover {
  background: rgba(31, 62, 97, 0.03) !important;
}
.mp-pricing-row.mp-pricing-active {
  background: rgba(31, 62, 97, 0.06) !important;
  box-shadow: inset 3px 0 0 var(--mp-oh-primary) !important;
}
.mp-pricing-row.mp-pricing-popular {
  background: rgba(5, 150, 105, 0.04) !important;
}
.mp-pricing-row.mp-pricing-popular.mp-pricing-active {
  background: rgba(5, 150, 105, 0.08) !important;
  box-shadow: inset 3px 0 0 var(--mp-oh-success) !important;
}

.mp-badge-popular {
  background: var(--mp-oh-success) !important;
  font-size: 0.625rem !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.03em !important;
  font-weight: 600 !important;
}

.mp-col-qty { font-weight: 500 !important; color: var(--mp-oh-heading) !important; }
.mp-col-price { color: var(--mp-oh-muted) !important; font-size: 0.8125rem !important; }
.mp-col-total { color: var(--mp-oh-heading) !important; font-weight: 600 !important; }
.mp-col-save { color: var(--mp-oh-success) !important; font-weight: 600 !important; font-size: 0.8125rem !important; }


/* --- Step 4: Trust Badges — Horizontal Card Layout --- */
.mp-trust-badges {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  margin: 1rem 0 !important;
  padding: 0.75rem 0 !important;
  border-top: 1px solid var(--mp-oh-border-light) !important;
  border-bottom: 1px solid var(--mp-oh-border-light) !important;
}

.mp-trust-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  font-size: 0.6875rem !important;
  color: var(--mp-oh-muted) !important;
  padding: 0.25rem !important;
  border-right: 1px solid var(--mp-oh-border-light) !important;
  line-height: 1.3 !important;
}
.mp-trust-badge:last-child {
  border-right: none !important;
}
.mp-trust-badge svg,
.mp-trust-badge img {
  width: 20px !important;
  height: 20px !important;
  margin-bottom: 0.25rem !important;
  opacity: 0.6 !important;
}

/* Delivery info — clean key-value pairs */
.mp-store-info-section {
  margin-bottom: 0 !important;
}
.mp-info-list {
  margin: 0 !important;
  padding: 0 !important;
}
.mp-info-list li {
  font-size: 0.8125rem !important;
  color: var(--mp-oh-body) !important;
  gap: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
}
.mp-info-list li:last-child {
  margin-bottom: 0 !important;
}
.mp-info-list svg,
.mp-info-list img {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.5 !important;
  flex-shrink: 0 !important;
}
.mp-info-list strong {
  font-weight: 600 !important;
  color: var(--mp-oh-heading) !important;
}

.mp-mini-faq summary {
  font-size: 0.8125rem !important;
  color: var(--mp-oh-primary) !important;
  font-weight: 500 !important;
  padding: 0.375rem 0 !important;
  border-bottom: 1px solid var(--mp-oh-border-light) !important;
}
.mp-mini-faq-content {
  font-size: 0.8125rem !important;
  color: var(--mp-oh-muted) !important;
  padding: 0.5rem 0 !important;
}


/* --- Step 5: Accordion UI Overhaul --- */
.mp-accordion {
  border: 1px solid var(--mp-oh-border) !important;
  border-radius: var(--mp-oh-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--mp-oh-shadow-sm) !important;
  background: var(--mp-oh-bg-surface) !important;
}

.mp-accordion-item {
  border-bottom: 1px solid var(--mp-oh-border-light) !important;
}
.mp-accordion-item:last-child {
  border-bottom: none !important;
}

.mp-accordion-header {
  background: var(--mp-oh-bg-surface) !important;
  padding: 0.875rem 1.25rem !important;
  font-family: var(--mp-oh-font-heading) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--mp-oh-heading) !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  transition: all var(--mp-oh-transition) !important;
}

.mp-accordion-header:hover {
  background: var(--mp-oh-bg-muted) !important;
}

.mp-accordion-header[aria-expanded="true"] {
  background: var(--mp-oh-bg-muted) !important;
  border-left-color: var(--mp-oh-primary) !important;
  color: var(--mp-oh-primary) !important;
}

/* Replace +/- icon with chevron */
.mp-accordion-icon {
  width: 20px !important;
  height: 20px !important;
  position: relative !important;
  transition: transform 0.3s ease !important;
}

.mp-accordion-icon::before,
.mp-accordion-icon::after {
  content: '' !important;
  position: absolute !important;
  background-color: var(--mp-oh-muted) !important;
  transition: all 0.3s ease !important;
}

/* Chevron down (two lines forming a V) */
.mp-accordion-icon::before {
  width: 10px !important;
  height: 2px !important;
  top: 9px !important;
  left: 1px !important;
  transform: rotate(45deg) !important;
  transform-origin: left center !important;
}
.mp-accordion-icon::after {
  width: 10px !important;
  height: 2px !important;
  top: 9px !important;
  left: 9px !important;
  transform: rotate(-45deg) !important;
  transform-origin: right center !important;
  opacity: 1 !important;
}

/* Rotate chevron when expanded */
.mp-accordion-header[aria-expanded="true"] .mp-accordion-icon {
  transform: rotate(180deg) !important;
}
.mp-accordion-header[aria-expanded="true"] .mp-accordion-icon::before,
.mp-accordion-header[aria-expanded="true"] .mp-accordion-icon::after {
  background-color: var(--mp-oh-primary) !important;
}

/* Smooth content transition */
.mp-accordion-content-wrapper {
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: var(--mp-oh-bg-surface) !important;
}

.mp-accordion-content {
  padding: 1.25rem !important;
  line-height: 1.7 !important;
  color: var(--mp-oh-body) !important;
  font-size: 0.875rem !important;
}

/* Specs table inside accordion */
.mp-specs-table th,
.mp-specs-table td {
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
}
.mp-specs-table th {
  color: var(--mp-oh-muted) !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
}
.mp-specs-table td {
  color: var(--mp-oh-heading) !important;
}
.mp-specs-table tr:nth-child(even) {
  background-color: var(--mp-oh-bg-muted) !important;
}

/* Overview tab content refinement */
.mp-accordion-content .mp-icon-list li {
  font-size: 0.875rem !important;
  margin-bottom: 0.75rem !important;
}
.mp-accordion-content .mp-icon-list svg {
  color: var(--mp-oh-accent) !important;
  opacity: 0.7 !important;
}
.mp-accordion-content h3 {
  font-family: var(--mp-oh-font-heading) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--mp-oh-heading) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}
.mp-accordion-content h3:first-child {
  margin-top: 0 !important;
}
.mp-accordion-content p {
  color: var(--mp-oh-body) !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  margin-bottom: 0.75rem !important;
}
.mp-accordion-content table {
  font-size: 0.875rem !important;
  margin: 0.75rem 0 !important;
}

/* QA Badges inside accordion */
.mp-qa-badges {
  gap: 0.5rem !important;
  margin-top: 0.75rem !important;
}
.mp-qa-badge {
  font-size: 0.8125rem !important;
  padding: 0.375rem 0.625rem !important;
  background: var(--mp-oh-bg-muted) !important;
  border: 1px solid var(--mp-oh-border-light) !important;
  border-radius: var(--mp-oh-radius-sm) !important;
  color: var(--mp-oh-body) !important;
}
.mp-qa-badge svg {
  color: var(--mp-oh-accent) !important;
  opacity: 0.7 !important;
}

/* Research/COA link buttons inside accordion */
.mp-btn-outline {
  font-size: 0.8125rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--mp-oh-radius-md) !important;
  border-color: var(--mp-oh-border) !important;
  color: var(--mp-oh-primary) !important;
  font-weight: 500 !important;
  transition: all var(--mp-oh-transition) !important;
}
.mp-btn-outline:hover {
  background: var(--mp-oh-bg-muted) !important;
  border-color: var(--mp-oh-primary) !important;
}

/* --- Step 5: Research Support sidebar box --- */
.mp-stitch-help-box {
  border-radius: var(--mp-oh-radius-lg) !important;
}

/* --- Step 6: Typography consistency --- */
/* Tech specs card */
.mp-stitch-tech-specs {
  border-radius: var(--mp-oh-radius-lg) !important;
  border: 1px solid var(--mp-oh-border) !important;
}
.mp-stitch-ts-header {
  background: var(--mp-oh-bg-muted) !important;
  border-bottom: 1px solid var(--mp-oh-border-light) !important;
  padding: 0.625rem 1.25rem !important;
}
.mp-stitch-ts-title {
  font-family: var(--mp-oh-font-heading) !important;
  font-size: 0.875rem !important;
  color: var(--mp-oh-heading) !important;
}
.mp-stitch-ts-grid {
  padding: 1rem 1.25rem !important;
  font-size: 0.8125rem !important;
  row-gap: 0.75rem !important;
}
.mp-stitch-ts-label {
  color: var(--mp-oh-muted) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.mp-stitch-ts-value {
  color: var(--mp-oh-heading) !important;
  font-size: 0.8125rem !important;
}

/* Stock status badge */
.mp-stitch-stock-status.in-stock {
  color: var(--mp-oh-success) !important;
  font-size: 0.8125rem !important;
}

/* Secure SSL text */
.mp-stitch-secure-ssl {
  color: var(--mp-oh-muted) !important;
  font-size: 0.6875rem !important;
  margin-top: 0.5rem !important;
}


/* --- Step 7: Mobile Responsiveness --- */

/* 768px and below */
@media (max-width: 768px) {
  .single-product-container {
    padding: 0 1rem !important;
  }

  .mp-stitch-product-title {
    font-size: 1.375rem !important;
  }

  .mp-stitch-product-grid {
    gap: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .mp-stitch-bottom-grid {
    gap: 1.5rem !important;
  }

  .mp-trust-badges {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }
  .mp-trust-badge {
    border-right: none !important;
    padding: 0.5rem 0.25rem !important;
  }

  .mp-pricing-header {
    display: none !important;
  }
  .mp-pricing-row {
    flex-wrap: wrap !important;
    padding: 0.875rem 1rem !important;
    gap: 0.25rem !important;
  }
  .mp-col-qty {
    flex: 100% !important;
    margin-bottom: 0.25rem !important;
  }
  .mp-col-price,
  .mp-col-total,
  .mp-col-save {
    flex: auto !important;
  }

  .mp-accordion-header {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }

  .mp-accordion-content {
    padding: 1rem !important;
    font-size: 0.8125rem !important;
  }
}

/* 375px and below — tightest spacing */
@media (max-width: 375px) {
  .single-product-container {
    padding: 0 0.75rem !important;
  }

  .mp-stitch-product-title {
    font-size: 1.25rem !important;
  }

  .mp-trust-badges {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .mp-stitch-image-card {
    padding: 1rem !important;
  }
}

/* 1200px breakpoint — tighten grid at medium screens */
@media (min-width: 769px) and (max-width: 1200px) {
  .single-product-container {
    max-width: 100% !important;
  }
}

/* Ensure sidebar is visible on mobile */
@media (max-width: 1023px) {
  .mp-stitch-sidebar-column {
    display: block !important;
  }
  .mp-stitch-sticky-sidebar {
    position: static !important;
  }
}

/* =============================================================================
   LAYOUT FIX v1.1 — Dead space, accordion height, support banner
   ============================================================================= */

/* --- Issue 1: Eliminate dead space — image fills left column --- */
@media (min-width: 1024px) {
  .mp-stitch-product-gallery {
    display: flex !important;
    flex-direction: column !important;
  }

  .mp-stitch-image-card {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .mp-stitch-image-wrapper {
    flex: 1 !important;
    aspect-ratio: unset !important;
    min-height: 280px !important;
  }

  .mp-stitch-image-wrapper img,
  .mp-stitch-image-wrapper .mp-stitch-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* --- Issue 1: Full-width tech specs bar (spans grid) --- */
@media (min-width: 1024px) {
  .mp-stitch-tech-specs {
    grid-column: 1 / -1 !important;
  }

  /* Horizontal layout for specs on desktop */
  .mp-stitch-tech-specs .mp-stitch-ts-header {
    display: none !important;
  }

  .mp-stitch-tech-specs .mp-stitch-ts-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    padding: 0.75rem 1.25rem !important;
    border: 1px solid var(--mp-oh-border) !important;
    border-radius: var(--mp-oh-radius-lg) !important;
    background: var(--mp-oh-bg-muted) !important;
  }

  .mp-stitch-tech-specs .mp-stitch-ts-label {
    margin-right: 0.375rem !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--mp-oh-muted) !important;
  }

  .mp-stitch-tech-specs .mp-stitch-ts-value {
    margin-right: 1.25rem !important;
    padding-right: 1.25rem !important;
    border-right: 1px solid var(--mp-oh-border) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--mp-oh-heading) !important;
  }

  .mp-stitch-tech-specs .mp-stitch-ts-value:last-child {
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
}


/* --- Issue 2: Tighter accordion collapsed items --- */
.mp-accordion-header {
  padding: 0.75rem 1.25rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.3 !important;
  min-height: unset !important;
}

.mp-accordion-icon {
  width: 18px !important;
  height: 18px !important;
}

.mp-accordion-icon::before {
  width: 9px !important;
  height: 2px !important;
  top: 8px !important;
  left: 1px !important;
}

.mp-accordion-icon::after {
  width: 9px !important;
  height: 2px !important;
  top: 8px !important;
  left: 8px !important;
}

/* Mobile accordion — even tighter */
@media (max-width: 768px) {
  .mp-accordion-header {
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
  }

  .mp-accordion-icon {
    width: 16px !important;
    height: 16px !important;
  }
}


/* --- Step 3: Full-width Research Support Banner --- */
.mp-stitch-support-banner {
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}

.mp-stitch-support-banner .mp-stitch-help-box {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  padding: 1.25rem 2rem !important;
  border-radius: var(--mp-oh-radius-lg) !important;
  background: var(--mp-oh-primary) !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
}

.mp-stitch-support-banner .mp-stitch-help-bg-icon {
  display: none !important;
}

.mp-stitch-support-banner .mp-stitch-help-icon-wrap {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  color: #ffffff !important;
}

.mp-stitch-support-banner .mp-stitch-help-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.mp-stitch-support-banner .mp-stitch-help-title {
  margin: 0 0 0.125rem 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.mp-stitch-support-banner .mp-stitch-help-desc {
  margin: 0 !important;
  font-size: 0.8125rem !important;
  color: rgba(191, 219, 254, 0.9) !important;
  line-height: 1.4 !important;
}

.mp-stitch-support-banner .mp-stitch-help-btn {
  flex-shrink: 0 !important;
  width: auto !important;
  white-space: nowrap !important;
  padding: 0.5rem 1.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: var(--mp-oh-radius-md) !important;
  background: #ffffff !important;
  color: var(--mp-oh-primary) !important;
  text-decoration: none !important;
  transition: all var(--mp-oh-transition) !important;
  display: inline-block !important;
  text-align: center !important;
}

.mp-stitch-support-banner .mp-stitch-help-btn:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-1px) !important;
}

/* Mobile: Stack support banner vertically */
@media (max-width: 768px) {
  .mp-stitch-support-banner .mp-stitch-help-box {
    flex-direction: column !important;
    text-align: center !important;
    padding: 1.25rem !important;
    gap: 1rem !important;
  }

  .mp-stitch-support-banner .mp-stitch-help-btn {
    width: 100% !important;
  }
}


/* --- Fix: Hide empty sidebar when help box is removed --- */
@media (min-width: 1024px) {
  .mp-stitch-sidebar-column:empty,
  .mp-stitch-sticky-sidebar:empty {
    display: none !important;
  }

  /* If sidebar only has the bundle (no help box), make bottom grid full-width when empty */
  .mp-stitch-sidebar-column .mp-stitch-sticky-sidebar:only-child:empty {
    display: none !important;
  }
}

/* --- Fix: Make bottom grid full-width (help box moved to banner) --- */
@media (min-width: 1024px) {
  .mp-stitch-bottom-grid {
    grid-template-columns: 1fr !important;
  }
  .mp-stitch-sidebar-column {
    display: none !important;
  }
}


/* =============================================================================
   UI OVERHAUL v3.0 — Tabs + Density + Spacing
   Replaces accordion with horizontal tab bar, tightens spacing, adds price display
   ============================================================================= */

/* --- Priority 1: Horizontal Tab Bar --- */
.mp-product-tabs-container {
  border: 1px solid var(--mp-oh-border);
  border-radius: var(--mp-oh-radius-lg);
  overflow: hidden;
  box-shadow: var(--mp-oh-shadow-sm);
  background: var(--mp-oh-bg-surface);
}

.mp-product-tabs {
  display: flex;
  border-bottom: 1px solid var(--mp-oh-border);
  background: var(--mp-oh-bg-muted);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mp-product-tabs::-webkit-scrollbar {
  display: none;
}

.mp-product-tab {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  font-family: var(--mp-oh-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mp-oh-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--mp-oh-transition), border-color var(--mp-oh-transition), background var(--mp-oh-transition);
  margin-bottom: -1px;
}

.mp-product-tab:hover {
  color: var(--mp-oh-heading);
  background: rgba(0, 0, 0, 0.02);
}

.mp-product-tab--active {
  color: var(--mp-oh-primary);
  border-bottom-color: var(--mp-oh-primary);
  background: var(--mp-oh-bg-surface);
}

.mp-product-panel {
  padding: 1.5rem 1.25rem;
  line-height: 1.7;
  color: var(--mp-oh-body);
  font-size: 0.9375rem;
}

/* Panel inner content styling */
.mp-product-panel h3 {
  font-family: var(--mp-oh-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--mp-oh-heading);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.mp-product-panel h3:first-child {
  margin-top: 0;
}
.mp-product-panel p {
  color: var(--mp-oh-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 0.75rem;
}
.mp-product-panel table {
  font-size: 0.875rem;
  margin: 0.75rem 0;
}
.mp-product-panel .mp-icon-list li {
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}
.mp-product-panel .mp-icon-list svg {
  color: var(--mp-oh-accent);
  opacity: 0.7;
}
.mp-product-panel .mp-qa-badges {
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.mp-product-panel .mp-qa-badge {
  font-size: 0.8125rem;
  padding: 0.375rem 0.625rem;
  background: var(--mp-oh-bg-muted);
  border: 1px solid var(--mp-oh-border-light);
  border-radius: var(--mp-oh-radius-sm);
  color: var(--mp-oh-body);
}
.mp-product-panel .mp-btn-outline {
  font-size: 0.8125rem;
  padding: 0.5rem 1rem;
  border-radius: var(--mp-oh-radius-md);
  border-color: var(--mp-oh-border);
  color: var(--mp-oh-primary);
  font-weight: 500;
  transition: all var(--mp-oh-transition);
}
.mp-product-panel .mp-btn-outline:hover {
  background: var(--mp-oh-bg-muted);
  border-color: var(--mp-oh-primary);
}

/* Specs table in panels */
.mp-product-panel .mp-specs-table th,
.mp-product-panel .mp-specs-table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.mp-product-panel .mp-specs-table th {
  color: var(--mp-oh-muted);
  font-weight: 500;
  font-size: 0.8125rem;
}
.mp-product-panel .mp-specs-table td {
  color: var(--mp-oh-heading);
}
.mp-product-panel .mp-specs-table tr:nth-child(even) {
  background-color: var(--mp-oh-bg-muted);
}

/* Mobile: scrollable tabs, tighter panels */
@media (max-width: 768px) {
  .mp-product-tab {
    padding: 0.625rem 1.125rem;
    font-size: 0.75rem;
  }
  .mp-product-panel {
    padding: 1.25rem 1rem;
    font-size: 0.875rem;
  }
  .mp-product-panel p {
    font-size: 0.875rem;
  }
}


/* --- Priority 3: Prominent Price Display --- */
.mp-stitch-price-prominent {
  margin-bottom: 0.375rem;
}
.mp-stitch-price-prominent .woocommerce-Price-amount,
.mp-stitch-price-prominent .price {
  font-family: var(--mp-oh-font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--mp-oh-heading);
  line-height: 1.2;
}
.mp-stitch-price-prominent del .woocommerce-Price-amount {
  font-size: 1.125rem;
  color: var(--mp-oh-muted);
  font-weight: 400;
}
.mp-stitch-price-prominent ins {
  text-decoration: none;
}

@media (max-width: 768px) {
  .mp-stitch-price-prominent .woocommerce-Price-amount,
  .mp-stitch-price-prominent .price {
    font-size: 1.625rem;
  }
}


/* --- Priority 4: Subtle Research Only pill badge --- */
.mp-stitch-badge-research-pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mp-oh-muted);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--mp-oh-border);
  border-radius: 9999px;
  backdrop-filter: blur(4px);
}

/* Hide conflicting old badge styles */
.mp-stitch-badge-container .mp-stitch-badge-new {
  display: none !important;
}


/* --- Priority 5: Spacing Tightening --- */
/* Section gaps: 40px -> 24px */
.mp-stitch-product-grid {
  margin-bottom: 1.5rem !important;
  gap: 1.5rem !important;
}
.mp-stitch-bottom-grid {
  gap: 1.5rem !important;
}
.mp-stitch-support-banner {
  margin-top: 1.5rem !important;
}

/* Product title: 28px -> 26px, tighter line-height */
.mp-stitch-product-title {
  font-size: 1.625rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Disclaimer banner: ensure 13px / 12px 16px padding */
.mp-top-disclaimer-banner {
  padding: 0.75rem 1rem !important;
  font-size: 0.8125rem !important;
}
.mp-top-disclaimer-banner p {
  font-size: 0.8125rem !important;
}

/* Mobile title */
@media (max-width: 768px) {
  .mp-stitch-product-title {
    font-size: 1.375rem !important;
  }
}


/* =============================================================================
   UI OVERHAUL v4.0 — Compact Layout + Tab Overflow Fix
   Compresses hero section, fixes tab bar overflow, tightens right column
   ============================================================================= */

/* --- FIX 1: Tab Bar Overflow ---
   Total tab width was 1291px in 1116px container. Reduce padding + font to fit.
   Also add scrollbar fallback for narrow screens. */

.mp-product-tabs {
  overflow-x: auto !important;
  scrollbar-width: thin !important;
  scroll-behavior: smooth !important;
}
.mp-product-tabs::-webkit-scrollbar {
  height: 3px !important;
  display: block !important;
}
.mp-product-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 3px !important;
}
.mp-product-tabs::-webkit-scrollbar-track {
  background: transparent !important;
}

.mp-product-tab {
  padding: 0.625rem 0.875rem !important;   /* was 12px 24px → 10px 14px */
  font-size: 0.6875rem !important;          /* was 13px → 11px */
  letter-spacing: 0.03em !important;        /* was 0.05em */
}

/* Mobile tabs: even tighter */
@media (max-width: 768px) {
  .mp-product-tab {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.625rem !important;         /* 10px */
  }
}


/* --- FIX 2: Image Card Compression ---
   Image card was 1100px tall due to flex: 1 + height: 100% from v1.1 Layout Fix.
   Override grid alignment and remove flex stretching. */

/* Stop grid from stretching columns to equal height */
@media (min-width: 1024px) {
  .mp-stitch-product-grid {
    align-items: start !important;
  }

  /* Override v1.1 flex stretching */
  .mp-stitch-product-gallery {
    display: block !important;
  }

  .mp-stitch-image-card {
    flex: none !important;
    display: block !important;
    max-height: 460px !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  .mp-stitch-image-wrapper {
    flex: none !important;
    max-height: 400px !important;
    min-height: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .mp-stitch-image-wrapper img,
  .mp-stitch-image-wrapper .mp-stitch-main-img {
    max-height: 380px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* Mobile image compression */
@media (max-width: 767px) {
  .mp-stitch-image-card {
    max-height: 320px !important;
    padding: 12px !important;
  }
  .mp-stitch-image-wrapper {
    max-height: 280px !important;
    min-height: unset !important;
  }
  .mp-stitch-image-wrapper img,
  .mp-stitch-image-wrapper .mp-stitch-main-img {
    max-height: 260px !important;
    width: auto !important;
    height: auto !important;
  }
}


/* --- FIX 3: Right Column Compression ---
   Tighten gaps between title/price/cart/pricing/badges/delivery sections. */

/* Header block: title + stock + price + shipping */
.mp-stitch-header-block {
  gap: 2px !important;
}

/* Product title */
.mp-stitch-product-title {
  font-size: 1.375rem !important;          /* 22px, was 26px */
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Stock status */
.mp-stitch-stock-status {
  font-size: 0.8125rem !important;         /* 13px */
  margin-bottom: 0 !important;
}

/* Price prominent */
.mp-stitch-price-prominent {
  margin-bottom: 4px !important;
}

/* Shipping notice */
.mp-stitch-shipping-notice {
  padding: 6px 10px !important;            /* was 10px 14px */
  margin-bottom: 6px !important;           /* was 16px */
  font-size: 0.8125rem !important;
}
.mp-stitch-shipping-bold {
  font-size: 0.8125rem !important;
}
.mp-stitch-shipping-sub {
  font-size: 0.75rem !important;
}

/* Purchase controls */
.mp-stitch-purchase-controls {
  padding: 10px 14px !important;           /* was 16px */
}

/* Quantity label */
.mp-stitch-qty-label {
  font-size: 0.8125rem !important;
  margin-bottom: 4px !important;
}

/* Secure SSL text */
.mp-stitch-secure-ssl {
  font-size: 0.6875rem !important;
  margin-top: 6px !important;
}

/* Pricing table container */
.mp-pricing-table-container {
  margin: 8px 0 !important;               /* was 24px 0 */
}

/* Pricing table title */
.mp-pricing-title {
  font-size: 0.8125rem !important;
  margin-bottom: 4px !important;
}

/* Pricing table cells */
.mp-pricing-header,
.mp-pricing-row {
  padding: 6px 10px !important;
}
.mp-pricing-header .mp-pricing-cell,
.mp-pricing-row .mp-pricing-cell {
  font-size: 0.75rem !important;           /* 12px */
  padding: 6px 8px !important;
}

/* Trust badges row */
.mp-trust-badges {
  padding: 6px 0 !important;              /* was 12px 0 */
  margin: 0 !important;                   /* was 0 -32px */
  gap: 4px !important;
}
.mp-trust-badge {
  font-size: 0.625rem !important;          /* 10px */
}
.mp-trust-badge img,
.mp-trust-badge svg {
  width: 18px !important;
  height: 18px !important;
}

/* Store info / delivery section */
.mp-store-info-section {
  padding: 0 !important;
}
.mp-info-list {
  font-size: 0.8125rem !important;
}
.mp-info-list li {
  margin-bottom: 2px !important;
  padding: 2px 0 !important;
  font-size: 0.8125rem !important;
}

/* Shipping & Returns FAQ toggle */
.mp-stitch-faq-toggle,
details[class*="faq"] summary,
.mp-store-info-section details summary {
  font-size: 0.8125rem !important;
  padding: 6px 0 !important;
}


/* --- FIX 4: Tech Specs Bar Compression --- */
.mp-stitch-tech-specs {
  margin: 4px 0 !important;
}
.mp-stitch-ts-grid {
  gap: 0 !important;
}
.mp-stitch-ts-label {
  font-size: 0.6875rem !important;         /* 11px */
  padding: 4px 12px !important;
}
.mp-stitch-ts-value {
  font-size: 0.75rem !important;           /* 12px */
  padding: 4px 12px !important;
}


/* --- FIX 5: Disclaimer Banner Compression — v14.9.3: relocated below tabs --- */
.mp-top-disclaimer-banner {
  padding: 6px 14px !important;
  font-size: 0.75rem !important;           /* 12px, was 13px */
  line-height: 1.35 !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
.mp-top-disclaimer-banner p {
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
}


/* --- FIX 6: Tab Panel Padding (high specificity to beat theme style.css) --- */
.single-product .woocommerce-tabs .mp-product-panel,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel--additional_information,
.single-product .mp-product-tabs-container .mp-product-panel {
  padding: 20px 24px !important;
  min-height: unset !important;
}

@media (max-width: 768px) {
  .single-product .woocommerce-tabs .mp-product-panel,
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 16px !important;
  }
}

/* --- FIX 6b: Trust badges margin fix --- */
.mp-stitch-product-info .mp-trust-badges {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- FIX 6c: Further right column compression --- */
.mp-stitch-cart-actions { gap: 6px !important; }
.mp-stitch-qty-selector { height: 38px !important; }
.mp-stitch-atc-btn { height: 38px !important; padding: 0 16px !important; }
.mp-pricing-row { min-height: unset !important; }
.mp-pricing-cell { padding: 5px 8px !important; font-size: 0.75rem !important; }
.mp-store-info-section .mp-info-list li { padding: 1px 0 !important; margin-bottom: 1px !important; font-size: 0.75rem !important; }


/* --- FIX 7: Grid gap tightening --- */
.mp-stitch-product-grid {
  gap: 20px !important;
  margin-bottom: 16px !important;
  margin-top: 0.25rem !important;
}

/* Support banner spacing */
.mp-stitch-support-banner {
  margin-top: 12px !important;
}



/* =============================================================================
   UI OVERHAUL v6.0 — Info-First Layout + Tab Content Segmentation
   ============================================================================= */

/* --- CHANGE 1: Hero Description Block --- */
.mp-hero-description {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
    margin: 8px 0 12px 0 !important;
    padding: 0 !important;
    max-height: 105px !important;
    overflow: hidden !important;
    position: relative !important;
}

.mp-hero-description::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 28px !important;
    background: linear-gradient(transparent, var(--mp-card-bg, #ffffff)) !important;
    pointer-events: none !important;
}

.mp-hero-description p {
    margin: 0 0 6px 0 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
}

.mp-hero-description p:last-child {
    margin-bottom: 0 !important;
}

/* Dark mode support */
[data-theme="dark"] .mp-hero-description::after,
.dark .mp-hero-description::after {
    background: linear-gradient(transparent, var(--mp-card-bg, #1a1a2e)) !important;
}

/* --- CHANGE 2A: Volume Discount Toggle --- */
.mp-volume-toggle .mp-pricing-table-container {
    display: none !important;
    margin-top: 8px !important;
}

.mp-volume-toggle.open .mp-pricing-table-container {
    display: block !important;
}

.mp-volume-btn {
    background: none !important;
    border: 1px dashed #d1d5db !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    color: #059669 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    width: 100% !important;
    text-align: left !important;
    transition: background 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.4 !important;
}

.mp-volume-btn:hover {
    background: #f0fdf4 !important;
}

.mp-volume-icon {
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.mp-chevron {
    margin-left: auto !important;
    font-size: 12px !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
}

.mp-volume-toggle.open .mp-chevron {
    transform: rotate(90deg) !important;
}

/* --- CHANGE 2B/C: Trust Strip (relocated below tabs) --- */
.mp-trust-strip {
    max-width: 1200px !important;
    margin: 16px auto !important;
    padding: 16px 24px !important;
    background: #f9fafb !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
}

.mp-trust-strip .mp-trust-badges {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mp-trust-strip .mp-trust-badge {
    font-size: 0.7rem !important;
}

.mp-trust-strip .mp-store-info-section {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid #e5e7eb !important;
}

.mp-trust-strip .mp-info-list {
    display: flex !important;
    justify-content: center !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mp-trust-strip .mp-info-list li {
    font-size: 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.mp-trust-strip .mp-mini-faq {
    text-align: center !important;
    margin-top: 8px !important;
}

/* --- CHANGE 3: Tab Panel Content Segmentation Styling --- */
.mp-formatted-description h3 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 16px 0 8px 0 !important;
    padding: 0 !important;
}

.mp-formatted-description h3:first-child {
    margin-top: 0 !important;
}

.mp-formatted-description p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #374151 !important;
    margin: 0 0 12px 0 !important;
}

.mp-research-content h3 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 16px 0 8px 0 !important;
}

.mp-research-content h3:first-child {
    margin-top: 0 !important;
}

.mp-research-content p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #374151 !important;
}

.mp-storage-content h3 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 16px 0 8px 0 !important;
}

.mp-storage-content h3:first-child {
    margin-top: 0 !important;
}

.mp-storage-content p,
.mp-storage-content li {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #374151 !important;
}

/* --- CHANGE 4: Active Tab Visual Indicator --- */
.mp-product-tab[aria-selected="true"],
.mp-product-tab.active {
    border-bottom: 3px solid var(--mp-stitch-primary, #1a2332) !important;
    color: #111827 !important;
    font-weight: 600 !important;
}

.mp-product-tab:not([aria-selected="true"]):not(.active) {
    border-bottom: 3px solid transparent !important;
    color: #6b7280 !important;
}

.mp-product-tabs {
    border-bottom: 1px solid #e5e7eb !important;
}

/* --- Responsive: Mobile adjustments --- */
@media (max-width: 768px) {
    .mp-hero-description {
        max-height: 80px !important;
        font-size: 13px !important;
    }

    .mp-trust-strip {
        padding: 12px 16px !important;
        margin: 12px 16px !important;
    }

    .mp-trust-strip .mp-trust-badges {
        gap: 10px !important;
    }

    .mp-trust-strip .mp-info-list {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .mp-volume-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

/* =============================================================================
   v7.0 — Final Polish Round
   ============================================================================= */

/* --- FIX 1: Hero description — show real content, remove max-height truncation --- */
.mp-hero-description {
    max-height: none !important;
    overflow: visible !important;
    margin: 10px 0 14px 0 !important;
    padding: 0 !important;
}
.mp-hero-description::after {
    display: none !important;
}
.mp-hero-description p {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: #4b5563 !important;
    margin: 0 !important;
}

/* --- FIX 3: Tech specs bar — single line, no wrap --- */
.mp-stitch-tech-specs .mp-stitch-ts-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    padding: 0.5rem 1rem !important;
    align-items: baseline !important;
}
.mp-stitch-tech-specs .mp-stitch-ts-grid::-webkit-scrollbar {
    height: 2px;
}
.mp-stitch-tech-specs .mp-stitch-ts-grid::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}
.mp-stitch-tech-specs .mp-stitch-ts-label {
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0 8px 0 10px !important;
}
.mp-stitch-tech-specs .mp-stitch-ts-value {
    font-size: 0.6875rem !important;
    color: #111827 !important;
    font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding-right: 10px !important;
    border-right: 1px solid #e5e7eb !important;
}
.mp-stitch-tech-specs .mp-stitch-ts-value:last-child {
    border-right: none !important;
}
.mp-stitch-tech-specs .mp-stitch-ts-header {
    display: none !important;
}

/* --- FIX 5: Research Only badge — dark pill style --- */
.mp-stitch-badge-research-pill {
    display: inline-block !important;
    background: #1e293b !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    border: none !important;
    backdrop-filter: none !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 5 !important;
}

/* --- FIX 6: Compact trust badges + delivery info strip --- */
.mp-trust-strip {
    padding: 10px 20px !important;
    margin: 10px auto !important;
    gap: 0 !important;
}
.mp-trust-strip .mp-trust-badges {
    gap: 14px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.mp-trust-strip .mp-trust-badge {
    font-size: 0.65rem !important;
}
.mp-trust-strip .mp-trust-badge svg,
.mp-trust-strip .mp-trust-badge img {
    width: 16px !important;
    height: 16px !important;
}
.mp-trust-strip .mp-store-info-section {
    margin-top: 6px !important;
    padding-top: 6px !important;
}
.mp-trust-strip .mp-info-list {
    gap: 16px !important;
}
.mp-trust-strip .mp-info-list li {
    font-size: 0.7rem !important;
    padding: 0 !important;
    margin: 0 !important;
}
.mp-trust-strip .mp-info-list li svg {
    width: 14px !important;
    height: 14px !important;
}
.mp-trust-strip .mp-mini-faq {
    margin-top: 4px !important;
    font-size: 0.7rem !important;
}

/* --- FIX 7: Overall vertical spacing — tighten --- */
.mp-stitch-product-grid {
    margin-bottom: 10px !important;
}
.mp-stitch-tech-specs {
    margin-bottom: 10px !important;
}
.mp-stitch-bottom-grid {
    margin-bottom: 10px !important;
}
.mp-trust-strip {
    margin-bottom: 10px !important;
}
.mp-stitch-support-banner {
    margin-bottom: 16px !important;
    margin-top: 0 !important;
}
.mp-stitch-support-banner .mp-stitch-help-box {
    padding: 12px 20px !important;
}

/* --- v7 mobile adjustments --- */
@media (max-width: 768px) {
    .mp-stitch-tech-specs .mp-stitch-ts-grid {
        flex-wrap: wrap !important;
        gap: 2px 0 !important;
    }
    .mp-stitch-tech-specs .mp-stitch-ts-label,
    .mp-stitch-tech-specs .mp-stitch-ts-value {
        padding: 2px 6px !important;
    }
    .mp-stitch-tech-specs .mp-stitch-ts-value {
        border-right: none !important;
    }
}

/* =============================================================================
   v8.0 — Above-the-Fold Density & Content Deduplication
   Goal: Tab bar visible without scrolling on 1440×900 viewport (~120px savings)
   ============================================================================= */

/* --- FIX 1a: Hide SSL text — redundant, saves ~18px --- */
.mp-stitch-secure-ssl {
    display: none !important;
}

/* --- FIX 1b: Flatten shipping notice — inline, compact --- */
.mp-stitch-shipping-notice {
    padding: 6px 10px !important;
    gap: 8px !important;
    margin: 0 !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}
.mp-stitch-shipping-notice i,
.mp-stitch-shipping-notice .fas {
    font-size: 14px !important;
    margin-top: 0 !important;
}
.mp-stitch-shipping-bold {
    font-size: 12px !important;
}
.mp-stitch-shipping-sub {
    display: inline !important;
    font-size: 11px !important;
    margin-top: 0 !important;
}

/* --- FIX 1c: Remove cart card border/padding — flatten purchase controls --- */
.mp-stitch-purchase-controls {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.single-product form.cart.mp-stitch-cart-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* --- FIX 1d: Clamp hero description to 3 lines --- */
.mp-hero-description {
    margin: 6px 0 8px 0 !important;
}
.mp-hero-description p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

/* --- FIX 1e: Tighten all internal spacing in right column --- */
.mp-stitch-header-block {
    padding-bottom: 0 !important;
    margin-bottom: 4px !important;
    gap: 4px !important;
}
.mp-stitch-product-title {
    font-size: 1.5rem !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
}
.mp-stitch-product-meta {
    margin-bottom: 2px !important;
}
.mp-stitch-price-prominent {
    margin-bottom: 4px !important;
    font-size: 1.75rem !important;
}
.mp-stitch-product-info {
    gap: 6px !important;
    padding: 0 !important;
}

/* --- FIX 1f: Compress disclaimer banner --- */
.mp-top-disclaimer-banner {
    padding: 6px 12px !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
}
.mp-top-disclaimer-banner svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}
.mp-top-disclaimer-banner p {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* --- FIX 1g: Cart form tightening --- */
.mp-stitch-cart-form {
    gap: 6px !important;
}
.mp-stitch-qty-label {
    margin-bottom: 0 !important;
    font-size: 11px !important;
}
.mp-stitch-cart-actions {
    gap: 8px !important;
}
.mp-stitch-atc-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
}
.mp-stitch-qty-selector {
    height: 38px !important;
}
.mp-stitch-qty-input {
    height: 38px !important;
    width: 48px !important;
    font-size: 14px !important;
}
.mp-stitch-qty-btn {
    width: 34px !important;
    height: 38px !important;
}

/* --- FIX 1h: Volume discount toggle — compact --- */
.mp-volume-toggle {
    margin: 0 !important;
    padding: 0 !important;
}
.mp-volume-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
}

/* --- FIX 1i: Compress product grid gap and tech specs bar --- */
.mp-stitch-product-grid {
    gap: 8px !important;
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
}
.mp-stitch-tech-specs {
    margin: 0 !important;
    padding: 4px 0 !important;
    margin-bottom: 6px !important;
}

/* --- FIX 1j: Compress bottom grid (tabs) margin --- */
.mp-stitch-bottom-grid {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

/* --- FIX 1k: Tighten breadcrumb --- */
.mp-breadcrumb {
    padding: 6px 0 !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
}

/* --- FIX 4: Trust badges — compact inline row with safe wrapping --- */
.mp-trust-strip .mp-trust-badges {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.mp-trust-strip .mp-trust-badge {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.mp-trust-strip .mp-trust-badge svg,
.mp-trust-strip .mp-trust-badge img {
    width: 18px !important;
    height: 18px !important;
}
.mp-trust-strip {
    padding: 8px 16px !important;
    margin: 6px auto !important;
}

/* --- FIX 5: Specs bar dot separators between label-value pairs --- */
.mp-stitch-tech-specs .mp-stitch-ts-value {
    border-right: none !important;
    padding-right: 8px !important;
}
.mp-stitch-tech-specs .mp-stitch-ts-value:not(:last-child)::after {
    content: "\00b7" !important;
    display: inline-block !important;
    margin-left: 10px !important;
    color: #9ca3af !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
}

/* --- v8 mobile adjustments --- */
@media (max-width: 768px) {
    .mp-stitch-shipping-sub {
        display: block !important;
    }
    .mp-trust-strip .mp-trust-badges {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .mp-top-disclaimer-banner {
        font-size: 10px !important;
    }
}

/* =============================================================================
   v9.0 — Phases 2, 3, 5: Sticky ATC, Volume Preview, COA Badge, Payment Icons
   ============================================================================= */

/* --- Phase 2: Sticky Add-to-Cart Bar --- */
.mp-sticky-atc {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}
.mp-sticky-atc.visible {
    transform: translateY(0);
}
.mp-sticky-atc-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    gap: 16px;
}
.mp-sticky-atc-product {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.mp-sticky-atc-thumb {
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.mp-sticky-atc-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mp-sticky-atc-name {
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-sticky-atc-price {
    color: #22c55e;
    font-size: 15px;
    font-weight: 700;
}
.mp-sticky-atc-price .woocommerce-Price-amount {
    color: #22c55e !important;
}
.mp-sticky-atc-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.mp-sticky-atc-qty {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}
.mp-sticky-qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.mp-sticky-qty-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.mp-sticky-qty-btn:active {
    background: rgba(255, 255, 255, 0.28);
}
/* main.js replaces qty buttons at runtime with .mp-qty-btn — style those too */
.mp-sticky-atc .mp-qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
    padding: 0;
}
.mp-sticky-atc .mp-qty-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.mp-sticky-atc .mp-qty-btn:active {
    background: rgba(255, 255, 255, 0.28);
}
.mp-sticky-atc .mp-qty-btn.disabled {
    opacity: 0.4;
    cursor: default;
}
.mp-sticky-qty-input {
    width: 40px;
    height: 36px;
    border: none;
    background: transparent;
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
.mp-sticky-qty-input::-webkit-outer-spin-button,
.mp-sticky-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mp-sticky-atc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: #f97316;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.15s;
}
.mp-sticky-atc-btn:hover {
    background: #ea580c;
    transform: translateY(-1px);
}
.mp-sticky-atc-btn i {
    font-size: 13px;
}

/* --- Phase 3: Inline Volume Discount Preview --- */
.mp-volume-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #92400e;
    margin: 4px 0 2px 0;
}
.mp-volume-preview svg {
    color: #d97706;
    flex-shrink: 0;
}
.mp-volume-preview .woocommerce-Price-amount {
    color: #92400e !important;
}

/* --- Phase 5a: COA Download Badge --- */
.mp-coa-badge {
    margin: 8px 0 4px 0;
}
.mp-coa-badge-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #166534;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.mp-coa-badge-link:hover {
    background: #dcfce7;
    border-color: #86efac;
    color: #14532d;
    text-decoration: none;
}
.mp-coa-badge-link svg {
    color: #22c55e;
    flex-shrink: 0;
}

/* --- Phase 5b: Payment Method Icons --- */
.mp-payment-icons {
    margin: 8px 0 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mp-payment-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}
.mp-payment-icons-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mp-pay-icon {
    font-size: 28px;
    line-height: 1;
}
.mp-pay-svg {
    flex-shrink: 0;
    border-radius: 3px;
}
.mp-pay-visa { color: #1a1f71; }
.mp-pay-btc { color: #f7931a; }

/* --- Phase 6: Related Products Section --- */
.single-product-container .related.products {
    margin: 24px 0 16px 0;
    padding: 24px 0 0;
    border-top: 1px solid #e5e7eb;
}
.single-product-container .related.products > h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}
.single-product-container .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.single-product-container .related.products ul.products li.product {
    margin: 0 !important;
    padding: 12px;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.single-product-container .related.products ul.products li.product:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.single-product-container .related.products ul.products li.product img {
    border-radius: 6px;
    margin-bottom: 8px;
}
.single-product-container .related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
}
.single-product-container .related.products ul.products li.product .price {
    font-size: 14px !important;
    font-weight: 700;
    color: #111827;
}

/* --- v9 mobile adjustments --- */
@media (max-width: 768px) {
    /* Sticky ATC bar — stack on mobile */
    .mp-sticky-atc-inner {
        flex-direction: column;
        padding: 8px 16px 12px;
        gap: 8px;
    }
    .mp-sticky-atc-product {
        width: 100%;
    }
    .mp-sticky-atc-actions {
        width: 100%;
        justify-content: stretch;
    }
    .mp-sticky-atc-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 16px;
    }
    .mp-sticky-atc-thumb {
        width: 32px !important;
        height: 32px !important;
    }

    /* Volume preview — smaller text */
    .mp-volume-preview {
        font-size: 11.5px;
        padding: 5px 8px;
    }

    /* Payment icons — wrap nicely */
    .mp-payment-icons {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Related products — 2 columns on mobile */
    .single-product-container .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    /* Add bottom padding for sticky bar */
    .single-product-container {
        padding-bottom: 80px;
    }
}

/* =============================================================================
   v10.0 — Bug-Fix & Polish Pass
   ============================================================================= */

/* --- Phase 2: Hero description — remove CSS clamp, rely on PHP 2-sentence extraction --- */
.mp-hero-description p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
}
.mp-hero-description {
    margin: 8px 0 10px 0 !important;
}

/* --- Phase 3: Related Products — premium card styling --- */
/* Related products live OUTSIDE .single-product-container — use .single-product body class */
.single-product .related.products {
    margin: 32px auto 24px;
    padding: 28px 1.5rem 0;
    max-width: 1200px;
}
.single-product .related.products > h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-family: var(--mp-oh-font-heading);
}
.single-product .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Related product cards use <article class="product-card"> not <li> */
.single-product .related.products ul.products .product-card {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.25s, transform 0.2s;
    margin: 0 !important;
}
.single-product .related.products ul.products .product-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.single-product .related.products .product-card .product-card-image img {
    aspect-ratio: 1;
    object-fit: contain;
    background: #f9fafb;
    border-radius: 8px;
}
/* Hide clutter from related product cards */
.single-product .related.products .product-card .stock-badge,
.single-product .related.products .product-card .star-rating,
.single-product .related.products .product-card .product-card-ref {
    display: none !important;
}
.single-product .related.products .product-card .product-buttons .button-outline {
    display: none !important;
}
.single-product .related.products .product-card .product-buttons {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.single-product .related.products .product-card .product-buttons .button-primary {
    flex: 1;
    text-align: center;
    font-size: 12px !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    background: var(--mp-oh-primary, #1f3e61) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    transition: background 0.15s !important;
}
.single-product .related.products .product-card .product-buttons .button-primary:hover {
    background: #163052 !important;
}
.single-product .related.products .product-card a {
    text-decoration: none;
    color: inherit;
}
.single-product .related.products .product-card .product-card-content {
    padding: 8px 0 0 0;
}
.single-product .related.products .product-card .product-card-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 0 4px 0 !important;
}
.single-product .related.products .product-card .product-card-name a {
    color: #111827 !important;
}
.single-product .related.products .product-card .product-card-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #059669 !important;
}
/* Remove dead space between image and content */
.single-product .related.products .product-card .product-card-image {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* --- Phase 4a: Tab panel — tighter whitespace --- */
.mp-product-panel {
    padding: 16px 20px !important;
}
.mp-product-panel h3 {
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}
.mp-product-panel h3:first-child {
    margin-top: 0 !important;
}
.mp-product-panel p {
    margin-bottom: 0.5rem !important;
}
.mp-product-panel p:last-child {
    margin-bottom: 0 !important;
}

/* --- Phase 4b: Social proof line --- */
.mp-social-proof {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
    margin: 2px 0 6px 0;
}
.mp-social-proof svg {
    color: #f59e0b;
    flex-shrink: 0;
}
.mp-social-proof strong {
    color: #374151;
    font-weight: 600;
}

/* --- Phase 5: Product gallery improvements --- */
.mp-stitch-image-card {
    position: relative;
    overflow: hidden;
}
.mp-stitch-image-wrapper {
    cursor: zoom-in;
}
.mp-stitch-main-img {
    transition: transform 0.3s ease !important;
}
.mp-stitch-image-wrapper:hover .mp-stitch-main-img {
    transform: scale(1.03);
}

/* PubChem molecular structure thumbnail */
.mp-molecular-structure {
    margin-top: 10px;
    padding: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
}
.mp-molecular-structure img {
    max-width: 100%;
    height: auto;
    max-height: 140px;
    object-fit: contain;
}
.mp-molecular-structure-label {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* Image lightbox improvements */
.mp-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: mp-lightbox-fadein 0.2s ease;
}
@keyframes mp-lightbox-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
.mp-image-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}
.mp-image-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    font-size: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.mp-image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* --- v10 Phase 6: Mobile Responsiveness Pass --- */
@media (max-width: 768px) {
    /* Hero description — full display */
    .mp-hero-description p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* Social proof */
    .mp-social-proof {
        font-size: 11px;
    }

    /* Tab panels — tighter on mobile */
    .mp-product-panel {
        padding: 12px 14px !important;
        font-size: 0.875rem !important;
    }

    /* Related products — 2 col with updated card styling */
    .single-product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    .single-product .related.products ul.products .product-card {
        padding: 10px;
    }
    .single-product .related.products .product-card .product-card-name {
        font-size: 12px !important;
    }
    .single-product .related.products .product-card .product-card-price {
        font-size: 13px !important;
    }

    /* Molecular structure — smaller on mobile */
    .mp-molecular-structure {
        padding: 6px;
    }
    .mp-molecular-structure img {
        max-height: 100px;
    }

    /* Trust strip — ensure wrapping */
    .mp-trust-strip .mp-trust-badges {
        gap: 8px 12px !important;
    }
    .mp-trust-strip .mp-trust-badge {
        font-size: 0.65rem !important;
    }

    /* Sticky bar qty buttons — larger touch targets */
    .mp-sticky-qty-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    .mp-sticky-qty-input {
        height: 40px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .mp-trust-strip .mp-trust-badges {
        justify-content: flex-start !important;
    }

    .mp-volume-preview {
        font-size: 11px !important;
    }

    .single-product .related.products > h2 {
        font-size: 1rem;
    }
}

/* =============================================================================
   v11.0 — Surgical UI Polish & Bug-Fix Pass
   V11 Changes:
   - Fixed breadcrumb colors for light background
   - Sticky ATC bar +/- buttons now visible (override style.css display:none)
   - Related products: hide ATC buttons, fix heading case, make cards clickable
   - Hero reorder: volume toggle grouped with discount, description at bottom
   - Removed social proof, Research Only badge, SSL line
   - Molecular structure moved to SPECIFICATIONS tab
   ============================================================================= */

/* --- Phase 1: Breadcrumb fix — designed for dark bg, needs light bg override --- */
.single-product-container .breadcrumb-nav {
    justify-content: flex-start !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.8125rem !important;
    gap: 0.4rem !important;
}
.single-product-container .breadcrumb-nav a {
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}
.single-product-container .breadcrumb-nav a:hover {
    color: var(--mp-oh-warning, #f97316) !important;
    text-decoration: underline !important;
}
.single-product-container .breadcrumb-nav .sep {
    color: #d1d5db !important;
    font-size: 0.55rem !important;
}
.single-product-container .breadcrumb-nav .current {
    color: #374151 !important;
    font-weight: 500 !important;
}

/* --- Phase 3: Sticky ATC bar — make +/- buttons visible --- */
/* style.css hides .quantity > button:not(.qty-btn) { display: none } */
/* cart-unified.js replaces buttons with .mp-qty-btn class (not .qty-btn) */
.mp-sticky-atc .mp-sticky-atc-qty > button.mp-qty-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- Phase 4: Related products — remove ATC buttons, fix heading --- */
.single-product .related.products > h2 {
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* Hide Add to Cart buttons from related product cards */
.single-product .related.products .product-card .product-buttons {
    display: none !important;
}
/* Make entire card clickable with hover lift */
.single-product .related.products .product-card {
    cursor: pointer !important;
}

/* --- Phase 5: Volume toggle in header — tighter spacing when grouped with discount --- */
.mp-stitch-header-block .mp-volume-toggle {
    margin: 4px 0 8px 0 !important;
}

/* --- Phase 2: Molecular structure in specs tab --- */
.mp-specs-container + .mp-molecular-structure,
.mp-specs-empty + .mp-molecular-structure {
    margin-top: 20px;
    max-width: 280px;
}
.mp-molecular-structure h4 {
    font-size: 13px;
    font-weight: 600;
    color: #1a2332;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mp-molecular-structure .mp-structure-source {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 6px;
    font-style: italic;
}

/* --- Phase 6: Mobile adjustments for V11 changes --- */
@media (max-width: 768px) {
    /* Breadcrumb — wrap on mobile */
    .single-product-container .breadcrumb-nav {
        flex-wrap: wrap;
        font-size: 0.75rem !important;
    }

    /* Molecular structure in specs tab */
    .mp-molecular-structure {
        max-width: 220px;
        margin: 12px auto;
    }

    /* Related product cards without buttons — adjust padding */
    .single-product .related.products .product-card {
        padding-bottom: 12px !important;
    }
}

@media (max-width: 480px) {
    .mp-molecular-structure {
        max-width: 180px;
        padding: 8px;
    }
}

/* =============================================================================
   v12.0 — Visual Polish Pass
   V12 Changes (2026-02-24):
   - Phase 1: Related product cards — orange prices, stronger hover lift, image blend, title clamp
   - Phase 2: Specifications tab table — premium styling, monospace values, molecular structure card
   - Phase 3: Hero description separator — top border to distinguish from purchase elements
   - Phase 4: Breadcrumb separator › (CSS), tech specs bar polish, spacing refinements
   ============================================================================= */

/* --- V12 Phase 1: Related Products Card Polish --- */

/* Enhanced hover lift and shadow */
.single-product .related.products ul.products .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(26, 35, 50, 0.12);
    border-color: #cbd5e1;
}

/* Product image — uniform sizing + white bg removal */
.single-product .related.products .product-card .product-card-image img {
    height: 180px;
    width: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Product title — line clamp for consistent card heights */
.single-product .related.products .product-card .product-card-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1a2332 !important;
    font-size: 13.5px !important;
    font-weight: 600;
    line-height: 1.4;
}

/* Price color — orange accent for consistency with site design */
.single-product .related.products .product-card .product-card-price,
.single-product .related.products .product-card .product-card-price .woocommerce-Price-amount,
.single-product .related.products .product-card .product-card-price .amount {
    color: #f97316 !important;
    font-size: 15px !important;
    font-weight: 700;
}
.single-product .related.products .product-card .product-card-price del,
.single-product .related.products .product-card .product-card-price del .woocommerce-Price-amount {
    color: #9ca3af !important;
    font-size: 12px;
    font-weight: 400;
}

/* Section heading polish */
.single-product .related.products > h2 {
    font-size: 1.2rem !important;
    color: #1a2332 !important;
    margin-bottom: 24px !important;
}

/* --- V12 Phase 2: Specifications Tab Table Polish --- */

/* Specs container inside tab panel */
.mp-product-panel .mp-specs-container {
    max-width: 520px;
}
.mp-product-panel .mp-specs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.mp-product-panel .mp-specs-table th {
    text-align: left;
    padding: 10px 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    width: 38%;
    background: #f8fafc !important;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px !important;
    white-space: nowrap;
}
.mp-product-panel .mp-specs-table td {
    padding: 10px 14px !important;
    color: #1a2332 !important;
    font-weight: 500;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
.mp-product-panel .mp-specs-table tr:last-child th,
.mp-product-panel .mp-specs-table tr:last-child td {
    border-bottom: none;
}
.mp-product-panel .mp-specs-table tr:nth-child(even) {
    background-color: #fafbfc !important;
}
.mp-product-panel .mp-specs-table tr:nth-child(odd) td {
    background: #ffffff;
}

/* Tooltip icon inside specs table */
.mp-product-panel .mp-specs-table .mp-tooltip {
    color: #9ca3af;
    cursor: help;
    vertical-align: middle;
    margin-left: 4px;
}

/* Molecular structure card inside specs tab */
.mp-product-panel .mp-molecular-structure {
    max-width: 280px;
    margin: 24px 0;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-align: center;
}
.mp-product-panel .mp-molecular-structure img {
    max-height: 180px;
}

/* --- V12 Phase 3: Hero Description Visual Separator --- */
.mp-hero-description {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #e5e7eb !important;
}
/* Remove the old fade gradient — description uses PHP 2-sentence extraction now */
.mp-hero-description::after {
    display: none !important;
}
.mp-hero-description {
    max-height: none !important;
    overflow: visible !important;
}

/* --- V12 Phase 4: Breadcrumb Separator Polish --- */
/* Hide the FontAwesome chevron icon, show › via CSS */
.single-product-container .breadcrumb-nav .sep i {
    display: none !important;
}
.single-product-container .breadcrumb-nav .sep::after {
    content: '\203A';
    font-family: inherit;
    font-style: normal;
    font-size: 14px;
    color: #cbd5e1;
    margin: 0 2px;
}

/* --- V12 Phase 4: Tech Specs Bar Readability --- */
.mp-stitch-ts-label {
    font-weight: 600 !important;
    color: #374151 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 10px !important;
}
.mp-stitch-ts-value {
    font-weight: 500 !important;
    color: #1a2332 !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12px !important;
}

/* --- V12 Phase 4: Spacing Refinements --- */

/* Tighter gap before related products */
.single-product .related.products {
    margin-top: 16px !important;
    padding-top: 24px !important;
    border-top: 1px solid #f1f5f9;
}

/* Research Support CTA bottom margin */
.mp-stitch-support-banner {
    margin-bottom: 8px;
}

/* --- V12 Phase 4: Mobile Adjustments --- */
@media (max-width: 768px) {
    .mp-product-panel .mp-specs-container {
        max-width: 100%;
    }
    .mp-product-panel .mp-specs-table th,
    .mp-product-panel .mp-specs-table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    .mp-product-panel .mp-molecular-structure {
        max-width: 220px;
        margin: 16px auto;
    }
    .single-product .related.products .product-card .product-card-image img {
        height: 140px;
    }
}
@media (max-width: 480px) {
    .single-product .related.products ul.products {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .single-product .related.products .product-card .product-card-image img {
        height: 160px;
    }
}

/* =============================================================================
   v13.0 — Surgical Fixes & Visual Polish
   V13 Changes (2026-02-24):
   - Phase 1: Moved description from hero right column to below product image
   - Phase 2: Fixed trust badges overflow (remove flex-shrink: 0, ensure box-sizing)
   - Phase 3: Removed COA/HPLC tab + Feedback tab
   - Phase 4: Related product prices changed from orange to navy blue
   - Phase 4: Related product cards — stronger hover, image zoom on hover
   - Phase 5: Fixed global shipping text to US-only
   ============================================================================= */

/* --- V13 Phase 1: Description below product image --- */
.mp-below-image-desc {
    margin-top: 16px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.65;
    color: #4b5563;
}
.mp-below-image-desc p {
    margin: 0;
}

/* --- V13 Phase 2: Trust badges overflow fix --- */
/* Root cause: .mp-trust-badge had flex-shrink: 0 + badges gap too wide for container */
.mp-trust-strip .mp-trust-badge {
    flex-shrink: 1 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    font-size: 0.68rem !important;
}
.mp-trust-strip {
    box-sizing: border-box !important;
    overflow: hidden !important;
    max-width: 1200px !important;
}
.mp-trust-strip .mp-trust-badges {
    box-sizing: border-box !important;
    width: 100% !important;
    gap: 10px 14px !important;
}

/* --- V13 Phase 4: Related product prices — navy blue, not orange --- */
.single-product .related.products .product-card .product-card-price,
.single-product .related.products .product-card .product-card-price .woocommerce-Price-amount,
.single-product .related.products .product-card .product-card-price .amount,
.single-product .related.products .product-card .product-card-price bdi {
    color: #1a2332 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}
.single-product .related.products .product-card .product-card-price del,
.single-product .related.products .product-card .product-card-price del .woocommerce-Price-amount {
    color: #9ca3af !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* --- V13 Phase 4: Related product cards — enhanced hover + image zoom --- */
.single-product .related.products ul.products .product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(26, 35, 50, 0.12) !important;
    border-color: #cbd5e1 !important;
}
.single-product .related.products .product-card .product-card-image img {
    transition: transform 0.25s ease !important;
}
.single-product .related.products .product-card:hover .product-card-image img {
    transform: scale(1.04);
}

/* Product title — clamp to 2 lines for consistent card heights */
.single-product .related.products .product-card .product-card-name a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- V13 Phase 6: Mobile adjustments --- */
@media (max-width: 768px) {
    .mp-below-image-desc {
        margin-top: 12px;
        padding: 14px 16px;
        font-size: 13px;
    }
    .mp-trust-strip .mp-trust-badges {
        gap: 8px 12px !important;
    }
    .mp-trust-strip .mp-trust-badge {
        font-size: 0.65rem !important;
    }
}

/* =============================================================================
   v14.0 — Visual Foundation (Phase 1)
   V14 Changes (2026-02-25):
   - Plan 01-01: Typography hierarchy — title dominates, price second-largest
   - Plan 01-02: Breadcrumb readability — WCAG AA contrast, 13px minimum, active segment
   - Plan 01-03: Related products polish — heading weight, background separation, card hover
   ============================================================================= */

/* --- V14 Plan 01-01: Product title — largest text element on page --- */
.mp-stitch-product-title {
    font-size: 2rem !important;              /* 32px — dominates page */
    font-weight: 800 !important;             /* Extra-bold for anchor weight */
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--mp-oh-heading) !important;   /* #111827 */
}

@media (max-width: 768px) {
    .mp-stitch-product-title {
        font-size: 1.625rem !important;      /* 26px on mobile — still largest */
    }
}

/* --- V14 Plan 01-01: Product price — second-largest, subordinate to title --- */
.mp-stitch-price-prominent .woocommerce-Price-amount,
.mp-stitch-price-prominent .price {
    font-size: 1.625rem !important;          /* 26px — clearly second to 32px title */
    font-weight: 700 !important;
    color: #0f4c81 !important;               /* Deeper blue — distinct from heading black */
    line-height: 1.2 !important;
}

@media (max-width: 768px) {
    .mp-stitch-price-prominent .woocommerce-Price-amount,
    .mp-stitch-price-prominent .price {
        font-size: 1.375rem !important;      /* 22px on mobile — still second to 26px title */
    }
}

/* --- V14 Plan 01-02: Breadcrumb readability — contrast + minimum size --- */

/* Primary breadcrumb (MP_SEO output) */
.single-product-container .breadcrumb-nav {
    font-size: 0.8125rem !important;         /* 13px — confirmed minimum */
    gap: 0.375rem !important;
    align-items: center !important;
}
.single-product-container .breadcrumb-nav a {
    color: #4b5563 !important;               /* gray-600 — contrast 7.0:1 vs white, solid AA */
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
.single-product-container .breadcrumb-nav a:hover {
    color: #1f2937 !important;               /* gray-800 on hover */
    text-decoration: underline !important;
}
.single-product-container .breadcrumb-nav .sep {
    color: #9ca3af !important;               /* gray-400 separator — decorative, adequate */
    font-size: 0.625rem !important;
}

/* Fallback breadcrumb (inline template) */
.mp-breadcrumb {
    font-size: 0.8125rem !important;         /* 13px minimum */
}
.mp-breadcrumb a {
    color: #4b5563 !important;               /* gray-600 — matches primary */
}
.mp-breadcrumb a:hover {
    color: #1f2937 !important;
}
.mp-breadcrumb-sep {
    color: #9ca3af !important;
}

/* --- V14 Plan 01-02: Current breadcrumb segment — distinct from parent links --- */
.single-product-container .breadcrumb-nav .current {
    color: #111827 !important;               /* gray-900 — clearly darker than gray-600 links */
    font-weight: 600 !important;             /* semi-bold — heavier than regular link weight */
}

/* Fallback breadcrumb */
.mp-breadcrumb-current {
    color: #111827 !important;
    font-weight: 600 !important;
}

/* --- V14 Plan 01-03: Related products section heading — increased visual weight --- */
.single-product .related.products > h2 {
    font-family: var(--mp-oh-font-heading) !important;
    font-size: 1.375rem !important;          /* 22px — up from 19px, noticeably bolder */
    font-weight: 800 !important;             /* Extra-bold for section anchor */
    color: #111827 !important;               /* gray-900 */
    letter-spacing: -0.01em !important;
    margin-bottom: 1.25rem !important;       /* 20px */
    padding-bottom: 0.75rem !important;      /* 12px */
    border-bottom: 2px solid #e5e7eb !important;  /* Subtle underline for section authority */
}

/* --- V14 Plan 01-03: Related products — background separation from main content --- */
.single-product .related.products {
    background: #f8fafc !important;          /* slate-50 — subtle off-white */
    border-top: 1px solid #e2e8f0 !important;  /* slate-200 — slightly stronger than f1f5f9 */
    border-radius: 0 !important;
    margin-left: -1.5rem !important;         /* Bleed to page edges */
    margin-right: -1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 2rem !important;            /* 32px */
    padding-bottom: 2rem !important;         /* 32px */
}

/* --- V14 Plan 01-03: Related product cards — refined hover states --- */
.single-product .related.products ul.products .product-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    border: 1px solid #e5e7eb !important;    /* Ensure base border for contrast */
}

.single-product .related.products ul.products .product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(31, 62, 97, 0.10), 0 4px 10px rgba(31, 62, 97, 0.06) !important;
    border-color: var(--mp-oh-accent, #32808d) !important;  /* Teal accent border on hover */
}

/* Image zoom on hover (reinforce V13) */
.single-product .related.products .product-card .product-card-image img {
    transition: transform 0.3s ease !important;
}
.single-product .related.products .product-card:hover .product-card-image img {
    transform: scale(1.03) !important;
}

/* --- V14 Plan 01-03: Related products — mobile adjustments --- */
@media (max-width: 768px) {
    .single-product .related.products {
        margin-left: -1rem !important;       /* Smaller bleed on mobile */
        margin-right: -1rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    .single-product .related.products > h2 {
        font-size: 1.25rem !important;       /* 20px on mobile */
    }
}

/* =============================================================================
   v14.0 — CTA and Purchase Panel (Phase 2)
   V14 Changes (2026-02-25):
   - Plan 02-01: CTA color & hover — both .mp-stitch-atc-btn and .mp-sticky-atc-btn
     updated simultaneously to --mp-oh-cta (#c2410c) with hover --mp-oh-cta-hover (#9a3412).
     WCAG AA contrast: 5.18:1 (normal) / 7.31:1 (hover) vs white text.
   - Plan 02-02: Stock indicator green dot — ::before pseudo-element on .in-stock
   - Plan 02-02: Quantity stepper touch targets — 44px minimum (Apple HIG / WCAG)
   ============================================================================= */

/* --- V14 Plan 02-01: CTA-01 + CTA-02 + CTA-03 — Add to Cart button, warm CTA color ---
   Both .mp-stitch-atc-btn (main ATC) and .mp-sticky-atc-btn (sticky bar ATC)
   share the same CTA color to prevent visual divergence.
   #c2410c = tailwind orange-700, passes WCAG AA at 5.18:1 vs #ffffff.
   --------------------------------------------------------------------------- */

/* Main Add to Cart button */
.mp-stitch-atc-btn {
    background: var(--mp-oh-cta) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(194, 65, 12, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: center !important;
}

/* CTA-02: Clear hover state — visibly darker, confirms interactivity */
.mp-stitch-atc-btn:hover {
    background: var(--mp-oh-cta-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(154, 52, 18, 0.35) !important;
}

.mp-stitch-atc-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(154, 52, 18, 0.3) !important;
}

/* CTA-03: Sticky bar button — identical CTA color */
.mp-sticky-atc-btn {
    background: var(--mp-oh-cta) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(194, 65, 12, 0.25) !important;
}

.mp-sticky-atc-btn:hover {
    background: var(--mp-oh-cta-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(154, 52, 18, 0.35) !important;
}

.mp-sticky-atc-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(154, 52, 18, 0.3) !important;
}

/* Override legacy style.css gradient — force flat CTA color */
.single-product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button,
.single-product .summary .single_add_to_cart_button {
    background: var(--mp-oh-cta) !important;
    box-shadow: 0 2px 8px rgba(194, 65, 12, 0.25) !important;
}

.single-product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product .single_add_to_cart_button:hover,
.single-product .summary .single_add_to_cart_button:hover {
    background: var(--mp-oh-cta-hover) !important;
    box-shadow: 0 4px 14px rgba(154, 52, 18, 0.35) !important;
}

/* --- ATC Button Loading/Success States ---
   Applied by initSingleProductAjaxCart() to both main and sticky buttons.
   ----------------------------------------------------------------------- */
.mp-stitch-atc-btn.mp-atc-loading,
.mp-sticky-atc-btn.mp-atc-loading {
    opacity: 0.7 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

.mp-stitch-atc-btn.mp-atc-added,
.mp-sticky-atc-btn.mp-atc-added {
    background: var(--mp-oh-success, #059669) !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3) !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* --- V14 Plan 02-02: CTA-04 — In Stock green dot indicator ---
   Conditional via .in-stock class (set by PHP: $product->is_in_stock()).
   Uses ::before pseudo-element — 8px filled circle, vertically centered.
   Color: --mp-oh-success (#059669).
   ------------------------------------------------------------------ */

.mp-stitch-stock-status.in-stock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--mp-oh-success) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

.mp-stitch-stock-status.in-stock::before {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--mp-oh-success) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* Out of stock — no dot, red text */
.mp-stitch-stock-status.out-of-stock {
    color: #dc2626 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

/* --- V14 Plan 02-02: CTA-05 — Quantity stepper touch targets ---
   Minimum 44px x 44px per Apple HIG / WCAG 2.1 SC 2.5.5.
   Stronger border + background on hover for visual affordance.
   --------------------------------------------------------------- */

.mp-stitch-qty-selector {
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    border: 1px solid var(--mp-oh-border) !important;
    border-radius: var(--mp-oh-radius-md) !important;
    overflow: hidden !important;
}

.mp-stitch-qty-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--mp-oh-bg-muted) !important;
    border: none !important;
    color: var(--mp-oh-heading) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.mp-stitch-qty-btn:hover {
    background: #e5e7eb !important;
    color: var(--mp-oh-primary) !important;
}

.mp-stitch-qty-btn:active {
    background: #d1d5db !important;
}

.mp-stitch-qty-input {
    width: 52px !important;
    height: 44px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--mp-oh-heading) !important;
    border: none !important;
    border-left: 1px solid var(--mp-oh-border) !important;
    border-right: 1px solid var(--mp-oh-border) !important;
    background: var(--mp-oh-bg-surface) !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.mp-stitch-qty-input::-webkit-outer-spin-button,
.mp-stitch-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* --- V14 Phase 2: Mobile adjustments --- */
@media (max-width: 768px) {
    /* ATC button fills remaining space beside qty selector */
    .mp-stitch-atc-btn {
        flex: 1 !important;
        width: auto !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
    }

    /* Quantity stepper — maintain 44px touch targets on mobile */
    .mp-stitch-qty-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .mp-stitch-qty-input {
        height: 44px !important;
    }

    .mp-stitch-qty-selector {
        height: 44px !important;
    }
}

/* =============================================================================
   v14.0 — Pricing, Product Meta, and Shipping (Phase 3)
   V14 Changes (2026-02-25):
   - Plan 03-01: Volume pricing table — always-visible, replaces collapsed dropdown
   - Plan 03-02: Key facts chips — Purity, Form, MW pills between stock status and price
   - Plan 03-03: Spec grid reformat + shipping benefit badge
   ============================================================================= */

/* --- V14 Plan 03-02: Key Facts Chips — INFO-01, INFO-02 ---
   Purity, Form, MW as inline pill/badge elements.
   Positioned between stock status and price in purchase panel.
   -------------------------------------------------------------- */

.mp-v14-key-facts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px 0 4px !important;
}

.mp-v14-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--mp-oh-heading) !important;
    background: var(--mp-oh-bg-muted) !important;
    border: 1px solid var(--mp-oh-border) !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.mp-v14-chip-label {
    font-weight: 600 !important;
    color: var(--mp-oh-muted) !important;
    text-transform: uppercase !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.04em !important;
}

/* --- V14 Plan 03-01: Volume Pricing Table — PRIC-01, PRIC-02, PRIC-03 ---
   Always-visible tiered pricing. Positioned between price and quantity selector.
   Compact 3-row table: 1 vial, 3 vials (popular), 5+ vials.
   --------------------------------------------------------------------------- */

/* Hide the old volume toggle and inline preview */
.mp-volume-toggle,
.mp-volume-preview {
    display: none !important;
}

.mp-v14-pricing-table {
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid var(--mp-oh-border) !important;
    border-radius: var(--mp-oh-radius-md) !important;
    overflow: hidden !important;
    margin: 10px 0 !important;
    font-size: 0.8125rem !important;
}

.mp-v14-pricing-row {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--mp-oh-border-light) !important;
}

.mp-v14-pricing-row:last-child {
    border-bottom: none !important;
}

.mp-v14-pricing-row.mp-v14-pricing-popular {
    background: #fffbeb !important;
    border-left: 3px solid var(--mp-oh-warning) !important;
}

.mp-v14-pricing-qty {
    font-weight: 600 !important;
    color: var(--mp-oh-heading) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.mp-v14-badge-popular {
    display: inline-block !important;
    padding: 1px 6px !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #92400e !important;
    background: #fef3c7 !important;
    border-radius: 9999px !important;
    line-height: 1.4 !important;
}

.mp-v14-pricing-price {
    font-weight: 600 !important;
    color: var(--mp-oh-heading) !important;
    white-space: nowrap !important;
}

.mp-v14-pricing-price .woocommerce-Price-amount {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

.mp-v14-pricing-save {
    font-weight: 600 !important;
    color: var(--mp-oh-success) !important;
    white-space: nowrap !important;
    text-align: right !important;
    font-size: 0.75rem !important;
}

/* --- V14 Plan 03-03: Shipping Benefit Badge — SHIP-01, SHIP-02 ---
   Restyled from footnote to benefit badge with success color.
   Bolds threshold ($200) and key benefit ("1-2 business days").
   ----------------------------------------------------------------- */

/* Hide old shipping notice */
.mp-stitch-shipping-notice {
    display: none !important;
}

.mp-v14-shipping-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: var(--mp-oh-radius-md) !important;
    margin: 6px 0 !important;
    font-size: 0.8125rem !important;
    color: #065f46 !important;
    line-height: 1.4 !important;
}

.mp-v14-shipping-badge i,
.mp-v14-shipping-badge .fas {
    color: var(--mp-oh-success) !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

.mp-v14-shipping-badge strong {
    font-weight: 700 !important;
    color: #064e3b !important;
}

/* --- V14 Plan 03-03: Spec Grid Reformat — INFO-03, INFO-04, INFO-05 ---
   Reformats .mp-stitch-ts-grid from horizontal scrolling strip to
   2-column CSS grid with alternating row backgrounds.
   Labels: bold/uppercase. Values: normal weight. Increased font size.
   Collapses to single column on mobile.
   Note: Must use .mp-stitch-tech-specs parent for specificity parity
   with FIX 3 (line ~1648) and FIX 5 (line ~1986) rules.
   ---------------------------------------------------------------------- */

.mp-stitch-tech-specs {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.mp-stitch-tech-specs .mp-stitch-ts-header {
    display: none !important;
}

.mp-stitch-tech-specs .mp-stitch-ts-grid {
    display: grid !important;
    grid-template-columns: auto 1fr auto 1fr !important;
    gap: 0 !important;
    border: 1px solid var(--mp-oh-border) !important;
    border-radius: var(--mp-oh-radius-md) !important;
    overflow: hidden !important;
    white-space: normal !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
}

.mp-stitch-tech-specs .mp-stitch-ts-label {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--mp-oh-muted) !important;
    background: var(--mp-oh-bg-muted) !important;
    border-bottom: 1px solid var(--mp-oh-border-light) !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    white-space: normal !important;
    flex-shrink: unset !important;
}

.mp-stitch-tech-specs .mp-stitch-ts-value {
    padding: 6px 10px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--mp-oh-heading) !important;
    background: var(--mp-oh-bg-surface) !important;
    border-bottom: 1px solid var(--mp-oh-border-light) !important;
    border-right: 1px solid var(--mp-oh-border-light) !important;
    display: flex !important;
    align-items: center !important;
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace !important;
    min-width: 0 !important;
    word-break: break-word !important;
    white-space: normal !important;
    flex-shrink: unset !important;
}

/* Remove the interpunct separator dots from old horizontal layout */
.mp-stitch-tech-specs .mp-stitch-ts-value::after,
.mp-stitch-tech-specs .mp-stitch-ts-value:not(:last-child)::after {
    content: none !important;
    display: none !important;
}

/* Remove right border on last value in each row */
.mp-stitch-tech-specs .mp-stitch-ts-grid .mp-stitch-ts-value:nth-child(4n) {
    border-right: none !important;
}

/* Remove bottom border on last row */
.mp-stitch-tech-specs .mp-stitch-ts-grid .mp-stitch-ts-label:nth-last-child(-n+2),
.mp-stitch-tech-specs .mp-stitch-ts-grid .mp-stitch-ts-value:nth-last-child(-n+2) {
    border-bottom: none !important;
}

/* --- V14 Phase 3: Mobile — spec grid single column, pricing compact --- */
@media (max-width: 768px) {
    .mp-stitch-tech-specs .mp-stitch-ts-grid {
        grid-template-columns: auto 1fr !important;
    }

    .mp-stitch-tech-specs .mp-stitch-ts-value {
        border-right: none !important;
    }

    .mp-stitch-tech-specs .mp-stitch-ts-grid .mp-stitch-ts-label:nth-last-child(-n+2),
    .mp-stitch-tech-specs .mp-stitch-ts-grid .mp-stitch-ts-value:nth-last-child(-n+2) {
        border-bottom: none !important;
    }

    .mp-v14-key-facts {
        gap: 4px !important;
    }

    .mp-v14-chip {
        font-size: 0.6875rem !important;
        padding: 2px 8px !important;
    }

    .mp-v14-pricing-row {
        padding: 6px 10px !important;
        gap: 6px !important;
        font-size: 0.75rem !important;
    }

    .mp-v14-shipping-badge {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
    }
}

/* =============================================================================
   v14.0 — Structural Changes and Trust Signals (Phase 4)
   V14 Changes (2026-02-25):
   - Plan 04-01: Product tabs — Description, COA, 3rd Party Testing, Storage
   - Plan 04-02: COA badge-button with shield icon, secondary button styling
   - Plan 04-03: Trust badge inline row below ATC button
   - Plan 04-04: Disclaimer demotion with collapse toggle
   ============================================================================= */

/* --- V14 Plan 04-01: Tab Content Styling — TABS-01, TABS-02, TABS-03, TABS-04 ---
   Styles for new tab content areas: COA download button, testing checklist.
   ---------------------------------------------------------------------- */

.mp-v14-tab-content {
    padding: 4px 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
    color: var(--mp-oh-body) !important;
}

.mp-v14-tab-content p {
    margin: 0 0 12px !important;
}

.mp-v14-coa-download {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    background: var(--mp-oh-primary) !important;
    color: #fff !important;
    border-radius: var(--mp-oh-radius-md) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: background 0.15s ease !important;
    margin-top: 4px !important;
}

.mp-v14-coa-download:hover {
    background: var(--mp-oh-primary-hover) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.mp-v14-coa-download i {
    font-size: 1rem !important;
}

.mp-v14-testing-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
}

.mp-v14-testing-list li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 0 !important;
    font-size: 0.875rem !important;
    color: var(--mp-oh-body) !important;
}

.mp-v14-testing-list li i {
    color: var(--mp-oh-success) !important;
    font-size: 0.875rem !important;
    flex-shrink: 0 !important;
}

/* --- V14 Plan 04-02: COA Badge-Button — TRST-02, TRST-03 ---
   Prominent secondary button with shield icon in purchase panel.
   Placed below ATC button, above trust badges and payment icons.
   ------------------------------------------------------------- */

.mp-v14-coa-badge {
    margin: 10px 0 6px !important;
    width: 100% !important;
    flex-basis: 100% !important;
}

.mp-v14-coa-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 16px !important;
    background: transparent !important;
    color: var(--mp-oh-primary) !important;
    border: 2px solid var(--mp-oh-primary) !important;
    border-radius: var(--mp-oh-radius-md) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    min-height: 44px !important;
}

.mp-v14-coa-btn:hover {
    background: var(--mp-oh-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.mp-v14-coa-btn i {
    font-size: 1rem !important;
}

/* --- V14 Plan 04-03: Trust Badge Inline Row — TRST-01 ---
   Compact 5-badge row below ATC button, above the fold.
   -------------------------------------------------------- */

.mp-v14-trust-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px 12px !important;
    margin: 10px 0 !important;
    padding: 10px 0 !important;
    border-top: 1px solid var(--mp-oh-border-light) !important;
    border-bottom: 1px solid var(--mp-oh-border-light) !important;
}

.mp-v14-trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    color: var(--mp-oh-muted) !important;
    white-space: nowrap !important;
}

.mp-v14-trust-item i {
    font-size: 0.75rem !important;
    color: var(--mp-oh-success) !important;
}

/* --- V14 Plan 04-04: Disclaimer Demotion — DISC-01, DISC-02, DISC-03 ---
   Lighter background, smaller text, collapse toggle with sessionStorage.
   Banner remains in DOM and accessible (legal requirement).
   ----------------------------------------------------------------------- */

.mp-top-disclaimer-banner {
    display: flex !important;
    flex-direction: column !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: var(--mp-oh-radius-md) !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    overflow: hidden !important;
    gap: 0 !important;
}

.mp-disclaimer-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
}

.mp-disclaimer-header svg {
    flex-shrink: 0 !important;
    color: #9ca3af !important;
    width: 16px !important;
    height: 16px !important;
}

.mp-disclaimer-label {
    flex: 1 !important;
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
}

.mp-disclaimer-label strong {
    color: #4b5563 !important;
    font-weight: 600 !important;
}

.mp-disclaimer-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: transparent !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    padding: 0 !important;
    color: #9ca3af !important;
    font-size: 0.625rem !important;
    transition: transform 0.2s ease, color 0.15s ease !important;
    flex-shrink: 0 !important;
}

.mp-disclaimer-toggle:hover {
    color: #6b7280 !important;
    border-color: #9ca3af !important;
}

.mp-disclaimer-toggle[aria-expanded="true"] i {
    transform: rotate(180deg) !important;
}

.mp-disclaimer-body {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.25s ease, padding 0.25s ease !important;
    padding: 0 12px !important;
}

.mp-disclaimer-body.mp-disclaimer-expanded {
    max-height: 200px !important;
    padding: 0 12px 10px !important;
}

.mp-disclaimer-body p {
    margin: 0 !important;
    font-size: 0.6875rem !important;
    line-height: 1.5 !important;
    color: #9ca3af !important;
}

/* V14 Phase 7: DISC-05 — Compliance phrases list inside disclaimer body */
.mp-disclaimer-phrases {
    margin: 6px 0 4px 0 !important;
    padding-left: 18px !important;
    list-style: disc !important;
}
.mp-disclaimer-phrases li {
    font-size: 0.6875rem !important;
    line-height: 1.5 !important;
    color: #4b5563 !important;
    margin-bottom: 2px !important;
}
.mp-disclaimer-phrases strong {
    color: #374151 !important;
    font-weight: 600 !important;
}

/* --- V14 Phase 4: Mobile adjustments --- */
@media (max-width: 768px) {
    .mp-v14-trust-row {
        gap: 4px 8px !important;
        padding: 8px 0 !important;
    }

    .mp-v14-trust-item {
        font-size: 0.625rem !important;
    }

    .mp-v14-coa-btn {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }
}

/* =============================================================================
   v14.0 — Sticky Bar and Footer (Phase 5)
   V14 Changes (2026-02-25):
   - Plan 05-01: Sticky cart bar restyle — light background, purchase panel design
   - Plan 05-02: Footer trust bar — product pages only, above copyright
   ============================================================================= */

/* --- V14 Plan 05-01: Sticky Cart Bar Restyle — STKY-01, STKY-02, STKY-03 ---
   Restyle from dark generic strip to light design matching purchase panel.
   Product title and price already in HTML — update colors for light bg.
   ----------------------------------------------------------------------- */

.mp-sticky-atc {
    background: #ffffff !important;
    border-top: 1px solid var(--mp-oh-border) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08) !important;
}

.mp-sticky-atc-inner {
    padding: 10px 24px !important;
}

.mp-sticky-atc-name {
    color: var(--mp-oh-heading) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

.mp-sticky-atc-price {
    color: var(--mp-oh-heading) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
}

.mp-sticky-atc-price .woocommerce-Price-amount {
    color: var(--mp-oh-heading) !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.mp-sticky-atc-price .woocommerce-Price-currencySymbol {
    font-size: inherit !important;
    vertical-align: baseline !important;
}

.mp-sticky-atc-thumb {
    border-radius: var(--mp-oh-radius-md) !important;
    border: 1px solid var(--mp-oh-border-light) !important;
}

/* Qty controls — light background style */
.mp-sticky-atc-qty {
    background: var(--mp-oh-bg-muted) !important;
    border: 1px solid var(--mp-oh-border) !important;
    border-radius: var(--mp-oh-radius-md) !important;
}

.mp-sticky-atc-qty .mp-sticky-qty-btn,
.mp-sticky-atc .mp-qty-btn {
    color: var(--mp-oh-heading) !important;
    background: transparent !important;
    border: none !important;
}

.mp-sticky-atc-qty .mp-sticky-qty-btn:hover,
.mp-sticky-atc .mp-qty-btn:hover {
    background: var(--mp-oh-border-light) !important;
    color: var(--mp-oh-heading) !important;
}

.mp-sticky-atc-qty .mp-sticky-qty-input,
.mp-sticky-atc .mp-sticky-qty-input {
    color: var(--mp-oh-heading) !important;
    background: transparent !important;
}

/* ATC button keeps orange CTA from Phase 2 — no changes needed */

/* --- V14 Plan 05-01: Mobile sticky bar — STKY-03 --- */
@media (max-width: 768px) {
    .mp-sticky-atc-inner {
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    .mp-sticky-atc-name {
        font-size: 0.75rem !important;
    }

    .mp-sticky-atc-price {
        font-size: 0.8125rem !important;
    }

    .mp-sticky-atc-thumb {
        width: 32px !important;
        height: 32px !important;
    }
}

/* --- V14 Plan 05-02: Footer Trust Bar — TRST-04 ---
   Full trust strip above copyright line, product pages only.
   Rendered conditionally via is_product() in footer.php.
   ---------------------------------------------------------- */

.mp-v14-footer-trust-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 16px !important;
    padding: 12px 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mp-v14-footer-trust-bar .mp-v14-ft-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
}

.mp-v14-footer-trust-bar .mp-v14-ft-item i {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

@media (max-width: 768px) {
    .mp-v14-footer-trust-bar {
        gap: 4px 12px !important;
        padding: 10px 0 !important;
    }

    .mp-v14-footer-trust-bar .mp-v14-ft-item {
        font-size: 0.625rem !important;
    }
}

/* =============================================================================
   v14.5.0 — Related Product Cards Overhaul (Phase 8)
   V14 Changes (2026-02-25):
   - RLPD-04: Card border, border-radius, light background
   - RLPD-05: Box-shadow lift on hover
   - RLPD-06: "View Product" CTA link styling
   - RLPD-07: Purity chip styling
   - RLPD-08: Uniform image height with object-fit: cover
   - RLPD-09: Bold heading (reinforced)
   - RLPD-10: Section background separation (reinforced)
   ============================================================================= */

/* --- V14 Phase 8: Card base — visible border, radius, light background (RLPD-04) --- */
.single-product .related.products ul.products .product-card {
    border: 1px solid var(--mp-oh-border) !important;       /* #e5e7eb — design system border */
    border-radius: var(--mp-oh-radius-lg) !important;       /* 0.75rem — 12px rounded corners */
    background: var(--mp-oh-bg-surface) !important;         /* #ffffff — clean white card on slate bg */
    padding: 16px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* --- V14 Phase 8: Card hover — box-shadow lift (RLPD-05) --- */
.single-product .related.products ul.products .product-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.single-product .related.products ul.products .product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(31, 62, 97, 0.12), 0 4px 10px rgba(31, 62, 97, 0.06) !important;
    border-color: var(--mp-oh-accent) !important;           /* Teal accent on hover */
}

/* --- V14 Phase 8: "View Product" CTA link (RLPD-06) --- */
.single-product .related.products .product-card .product-buttons {
    display: block !important;                               /* Override Phase 4 display:none */
    margin-top: auto !important;                             /* Push to bottom of flex card */
    padding-top: 10px !important;
    border-top: 1px solid var(--mp-oh-border-light) !important;
}
.single-product .related.products .product-card .mp-v14-related-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 0.8125rem !important;                        /* 13px */
    font-weight: 600 !important;
    color: var(--mp-oh-accent) !important;                  /* Teal accent */
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
.single-product .related.products .product-card .mp-v14-related-cta:hover {
    color: var(--mp-oh-primary) !important;                 /* Navy on hover */
    text-decoration: none !important;
}

/* --- V14 Phase 8: Purity chip — demoted to subtle text (v14.9.2) --- */
.single-product .related.products .product-card .mp-v14-related-purity {
    display: inline-block !important;
    padding: 0 !important;
    font-size: 0.625rem !important;                         /* 10px — secondary text */
    font-weight: 400 !important;
    color: var(--mp-oh-text-muted, #6b7280) !important;    /* Gray-500 */
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 2px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
}

/* --- V14 Phase 8: Uniform image height (RLPD-08) --- */
.single-product .related.products .product-card .product-card-image {
    overflow: hidden !important;
    border-radius: var(--mp-oh-radius-md) !important;       /* Rounded image container */
    margin-bottom: 10px !important;
}
.single-product .related.products .product-card .product-card-image img {
    height: 180px !important;
    width: 100% !important;
    object-fit: cover !important;                            /* COVER — uniform fill, crop overflow */
    border-radius: var(--mp-oh-radius-md) !important;
    background: var(--mp-oh-bg-muted) !important;           /* Light fallback while loading */
    transition: transform 0.25s ease !important;
}
.single-product .related.products .product-card:hover .product-card-image img {
    transform: scale(1.03) !important;
}

/* --- V14 Phase 8: Section heading and background reinforcement (RLPD-09, RLPD-10) ---
   Heading already styled at 1.375rem/800 weight with bottom border (V14 Plan 01-03).
   Section background already #f8fafc with border-top separation (V14 Plan 01-03).
   No changes needed — existing styles satisfy RLPD-09 and RLPD-10.
   Reinforcing font-weight to ensure 800 persists through cascade:
   ----------------------------------------------------------------------- */
.single-product .related.products > h2 {
    font-weight: 800 !important;
}

/* --- V14 Phase 8: Mobile adjustments --- */
@media (max-width: 768px) {
    .single-product .related.products .product-card .product-card-image img {
        height: 150px !important;
    }
    .single-product .related.products .product-card .mp-v14-related-cta {
        font-size: 0.75rem !important;
    }
}
@media (max-width: 480px) {
    .single-product .related.products .product-card .product-card-image img {
        height: 140px !important;
    }
}

/* ===================================================================
   V14 Phase 9: Product Description Formatting (CONT-01, CONT-02)
   Bold tag rendering + mechanism sentence styling
   =================================================================== */

/* CONT-01: Guarantee bold tags render visually in description tab */
.mp-formatted-description strong,
.mp-formatted-description b {
    font-weight: 700 !important;
    color: #111827 !important;
}

/* CONT-02: Mechanism-focused research sentence styling */
.mp-v14-mechanism-sentence {
    margin-top: 16px !important;
    padding: 12px 16px !important;
    background: #f0fdf4 !important;
    border-left: 3px solid #22c55e !important;
    border-radius: 0 6px 6px 0 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #374151 !important;
}

.mp-v14-mechanism-sentence strong {
    font-weight: 700 !important;
    color: #111827 !important;
}

/* ===================================================================
   V14 Phase 10: Grid and Mobile Polish (INFO-06, INFO-07, TRST-05)
   Spec grid row banding, 375px mobile breakpoints, trust badge wrap
   =================================================================== */

/* INFO-06: Full-width alternating row banding for 4-column spec grid */
/* Even visual rows (2nd, 4th, 6th...): children 5-8 of every 8 */
.mp-stitch-tech-specs .mp-stitch-ts-grid > :nth-child(8n+5),
.mp-stitch-tech-specs .mp-stitch-ts-grid > :nth-child(8n+6),
.mp-stitch-tech-specs .mp-stitch-ts-grid > :nth-child(8n+7),
.mp-stitch-tech-specs .mp-stitch-ts-grid > :nth-child(8n+8) {
    background: var(--mp-oh-bg-muted) !important;
}
/* Odd visual rows (1st, 3rd, 5th...): children 1-4 of every 8 */
.mp-stitch-tech-specs .mp-stitch-ts-grid > :nth-child(8n+1),
.mp-stitch-tech-specs .mp-stitch-ts-grid > :nth-child(8n+2),
.mp-stitch-tech-specs .mp-stitch-ts-grid > :nth-child(8n+3),
.mp-stitch-tech-specs .mp-stitch-ts-grid > :nth-child(8n+4) {
    background: var(--mp-oh-bg-surface) !important;
}

/* INFO-07 + TRST-05: 375px mobile breakpoint */
@media (max-width: 375px) {
    /* v14.9.3: Keep 2-column label/value grid at 375px (was single-column stacked) */
    .mp-stitch-tech-specs .mp-stitch-ts-grid {
        grid-template-columns: auto 1fr !important;
    }
    .mp-stitch-tech-specs .mp-stitch-ts-label {
        padding: 4px 8px !important;
        font-size: 0.625rem !important;
        border-bottom: 1px solid var(--mp-oh-border-light) !important;
    }
    .mp-stitch-tech-specs .mp-stitch-ts-value {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        border-bottom: 1px solid var(--mp-oh-border-light) !important;
        border-right: none !important;
    }
    /* Last row has no bottom border */
    .mp-stitch-tech-specs .mp-stitch-ts-grid .mp-stitch-ts-label:last-of-type,
    .mp-stitch-tech-specs .mp-stitch-ts-grid .mp-stitch-ts-value:last-child {
        border-bottom: none !important;
    }
    /* 2-column row banding: label+value pairs */
    .mp-stitch-tech-specs .mp-stitch-ts-grid > :nth-child(4n+3),
    .mp-stitch-tech-specs .mp-stitch-ts-grid > :nth-child(4n+4) {
        background: var(--mp-oh-bg-muted) !important;
    }
    .mp-stitch-tech-specs .mp-stitch-ts-grid > :nth-child(4n+1),
    .mp-stitch-tech-specs .mp-stitch-ts-grid > :nth-child(4n+2) {
        background: var(--mp-oh-bg-surface) !important;
    }

    /* TRST-05: Trust badge wrapping at 375px */
    .mp-v14-trust-row {
        gap: 6px 10px !important;
        padding: 10px 4px !important;
        overflow: visible !important;
        max-width: 100% !important;
    }
    .mp-v14-trust-item {
        white-space: nowrap !important;
        font-size: 0.625rem !important;
    }
}

/* =============================================================================
   v14.8.0 — Mobile Polish (Phase 11)
   Mobile-only fixes — all rules scoped to max-width media queries.
   Desktop layout is untouched.
   ============================================================================= */

/* -------------------------------------------------------------------------
   768px: Primary mobile breakpoint
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* === TASK 1: Hero layout — stacking, spacing, and breathing room === */

    /* Hide below-image description on mobile (redundant — same text in tabs) */
    .mp-stitch-product-gallery .mp-below-image-desc {
        display: none !important;
    }

    /* Full-width image card with reduced padding */
    .mp-stitch-image-card {
        padding: 0.75rem !important;
        margin-bottom: 0 !important;
    }

    /* Force single-column stacking on mobile — prevents implicit 2-column grid.
       Specificity 0,3,1 needed to override style.css [class*="product-grid"] rule (0,3,0). */
    body.single-product .single-product-container .mp-stitch-product-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin-bottom: 0.75rem !important;
        margin-top: 0.25rem !important;
    }

    /* Tech specs full width when stacked */
    .mp-stitch-tech-specs {
        grid-column: 1 / -1 !important;
    }

    /* Product title — comfortable size, tight spacing */
    .mp-stitch-product-title {
        font-size: 1.375rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.25rem !important;
    }

    /* Stock status — compact */
    .mp-stitch-stock-status {
        font-size: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Key facts chips — wrap allowed, compact */
    .mp-v14-key-facts {
        flex-wrap: wrap !important;
        gap: 0.375rem !important;
        margin-bottom: 0.625rem !important;
    }
    .mp-v14-chip {
        font-size: 0.6875rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Price — prominent but not oversized */
    .mp-stitch-price-prominent {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Volume pricing table — tighter rows */
    .mp-v14-pricing-table {
        margin-bottom: 0.625rem !important;
    }
    .mp-v14-pricing-row {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    /* Shipping badge — compact */
    .mp-v14-shipping-badge {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Purchase controls — consistent spacing */
    .mp-stitch-purchase-controls {
        padding: 0 !important;
    }
    .mp-stitch-qty-label {
        font-size: 0.75rem !important;
        margin-bottom: 0.375rem !important;
    }

    /* Cart actions — qty + button side by side, single row on all viewports */
    .mp-stitch-cart-actions {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .mp-stitch-qty-selector {
        width: auto !important;
        flex-shrink: 0 !important;
    }
    .mp-stitch-atc-btn {
        flex: 1 !important;
        justify-content: center !important;
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
        min-height: 48px !important;
    }

    /* COA badge — full width, adequate tap target */
    .mp-v14-coa-badge,
    .mp-v14-coa-btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        font-size: 0.8125rem !important;
        margin-top: 0.5rem !important;
    }

    /* Trust row — allow wrapping with vertical gap */
    .mp-v14-trust-row {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.375rem 0.625rem !important;
        padding: 0.75rem 0.25rem !important;
        margin-top: 0.75rem !important;
    }
    .mp-v14-trust-item {
        font-size: 0.6875rem !important;
        white-space: nowrap !important;
    }

    /* Payment icons — compact row */
    .mp-payment-icons {
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
    }

    /* === TASK 2: Tabs — usable and readable on mobile === */

    /* Tab bar — horizontal scroll, adequate tap targets, scroll-fade cue */
    /* Specificity (0,3,1) needed to override style.css .woocommerce div.product .woocommerce-tabs { margin-top: 3rem } */
    .woocommerce div.product .woocommerce-tabs,
    .mp-product-tabs-container {
        margin-top: 0.75rem !important;
        border-radius: var(--mp-oh-radius-md) !important;
        position: relative !important;
    }
    .mp-product-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
    }
    .mp-product-tabs::-webkit-scrollbar {
        display: none !important;
    }
    /* Right-edge fade gradient — signals horizontal scrollability */
    .mp-product-tabs-container::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 2rem !important;
        height: calc(44px + 1px) !important;
        background: linear-gradient(to right, transparent, var(--mp-oh-bg-muted, #f3f4f6)) !important;
        pointer-events: none !important;
        z-index: 2 !important;
        border-radius: 0 var(--mp-oh-radius-md) 0 0 !important;
    }
    .mp-product-tab {
        padding: 0.75rem 1rem !important;
        font-size: 0.75rem !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        scroll-snap-align: start !important;
    }
    /* Active tab — subtle background tint for visual distinction */
    .mp-product-tab--active {
        background: rgba(31, 62, 97, 0.06) !important;
    }

    /* Tab content panel — comfortable padding, tighter line-height */
    .mp-product-panel {
        padding: 1rem !important;
        font-size: 0.875rem !important;
        line-height: 1.55 !important;
    }
    /* Space between description block and mechanism sentence callout.
       Targets the wrapper div instead of p to avoid p:last-child specificity conflict. */
    .mp-product-panel .mp-formatted-description {
        margin-bottom: 0.5rem !important;
    }
    /* v14.9.1: QA badges — compact on mobile */
    .mp-product-panel .mp-qa-badges {
        gap: 6px !important;
        margin-top: 0.5rem !important;
    }
    .mp-product-panel .mp-qa-badge {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Mechanism sentence callout — full width */
    .mp-v14-mechanism-sentence {
        margin: 0.75rem 0 0 0 !important;
        padding: 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    /* === TASK 3: Typography — comfortable line length and readability === */

    /* Ensure text containers have consistent side padding */
    .single-product-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Tab content — constrain long lines */
    .mp-product-panel p,
    .mp-product-panel li {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Disclaimer banner — now sits below tabs, tight spacing */
    .mp-top-disclaimer-banner {
        margin-top: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    .mp-disclaimer-header {
        font-size: 0.75rem !important;
    }
    .mp-disclaimer-body {
        font-size: 0.75rem !important;
        /* Padding handled by base collapse/expand rules — don't override here */
    }
    .mp-disclaimer-body.mp-disclaimer-expanded {
        padding: 0 0.75rem 0.5rem !important;
    }
    .mp-disclaimer-body li {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* === TASK 4: Related product cards — compact single column === */

    .single-product .related.products {
        padding: 0.75rem 1rem 0 !important;
        margin: 0.625rem auto 0.625rem !important;
    }
    .single-product .related.products > h2 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* 2-column grid on tablets, switch to 1 col below 480px (see next block) */
    .single-product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem !important;
    }

    /* Card — tighter padding */
    .single-product .related.products ul.products .product-card {
        padding: 0.75rem !important;
    }

    /* Card image — smaller, consistent */
    .single-product .related.products .product-card .product-card-image img {
        height: 140px !important;
        object-fit: contain !important;
    }

    /* Card content — compact text, semi-bold name for hierarchy */
    .single-product .related.products .product-card .product-card-name {
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin-bottom: 0.25rem !important;
    }
    .single-product .related.products .product-card .product-card-price {
        font-size: 0.875rem !important;
        margin-bottom: 0.25rem !important;
    }
    .single-product .related.products .product-card .product-buttons {
        padding-top: 6px !important;
        margin-top: 6px !important;
    }
    .single-product .related.products .product-card .mp-v14-related-cta {
        font-size: 0.75rem !important;
    }

    /* === TASK 5: Sticky bar — compact and usable on mobile === */

    /* Single-row layout: product info + actions side by side */
    .mp-sticky-atc-inner {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 5px 10px !important;
        gap: 6px !important;
        align-items: center !important;
    }
    /* Hide thumbnail on mobile to save space */
    .mp-sticky-atc-thumb {
        display: none !important;
    }
    /* Product info — name truncates, price stays visible */
    .mp-sticky-atc-product {
        flex: 0 1 auto !important;
        min-width: 70px !important;
        max-width: 130px !important;
    }
    .mp-sticky-atc-name {
        font-size: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    .mp-sticky-atc-price {
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
    /* Hide qty in sticky bar on mobile — specificity (0,3,0) beats
       style.css .single-product .quantity { display: inline-flex } (0,2,0) */
    .single-product .mp-sticky-atc-qty.quantity {
        display: none !important;
    }
    .mp-sticky-atc-actions {
        flex: 1 !important;
    }
    .mp-sticky-atc-btn {
        width: 100% !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        min-height: 36px !important;
    }
    /* Safe area support for iOS home indicator */
    .mp-sticky-atc {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    /* Bottom padding for sticky bar clearance */
    .single-product-container {
        padding-bottom: 48px !important;
    }

    /* === TASK 6: Section spacing — consistent vertical rhythm === */

    /* Tech specs to tabs */
    .mp-stitch-tech-specs {
        margin-bottom: 1rem !important;
    }

    /* Bottom grid (tabs area) — force single column, minmax prevents content overflow */
    .mp-stitch-bottom-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem !important;
        margin-bottom: 0 !important;
    }

    /* Trust strip section — tight to tabs above */
    .mp-trust-strip {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .mp-trust-badges {
        gap: 0.375rem !important;
        padding: 0.75rem 0.5rem !important;
    }
    .mp-trust-badge {
        padding: 0.375rem 0.25rem !important;
        font-size: 0.6875rem !important;
    }

    /* Store info section */
    .mp-store-info-section {
        padding: 0.75rem !important;
        font-size: 0.8125rem !important;
    }
    .mp-info-list li {
        margin-bottom: 0.5rem !important;
        font-size: 0.8125rem !important;
    }

    /* Research Support banner — compact with full-width CTA */
    .mp-stitch-support-banner {
        margin-top: 0.625rem !important;
        margin-bottom: 0.625rem !important;
    }
    .mp-stitch-support-banner .mp-stitch-help-box {
        padding: 0.75rem 1rem !important;
        gap: 0.5rem !important;
    }
    .mp-stitch-support-banner .mp-stitch-help-icon-wrap {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.125rem !important;
    }
    .mp-stitch-support-banner .mp-stitch-help-title {
        font-size: 0.9375rem !important;
        margin-bottom: 0.125rem !important;
    }
    .mp-stitch-support-banner .mp-stitch-help-desc {
        font-size: 0.8125rem !important;
    }
    .mp-stitch-support-banner .mp-stitch-help-btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 0.625rem 1rem !important;
        margin-top: 0.25rem !important;
    }

    /* Related products to footer gap */
    .single-product .related.products {
        margin-bottom: 0.5rem !important;
    }

    /* === TASK 7: Footer — legible and compact === */

    /* Footer — reduce top padding on mobile */
    .site-footer {
        padding-top: 1.5rem !important;
    }

    /* Footer grid — single column on mobile, compact gap */
    .site-footer .footer-grid,
    .site-footer .footer-content {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding-bottom: 1rem !important;
    }
    .site-footer .footer-column {
        text-align: left !important;
        padding: 0 !important;
    }
    .site-footer .footer-column h2 {
        font-size: 0.875rem !important;
        margin-bottom: 0.375rem !important;
    }
    .site-footer .footer-column li {
        margin-bottom: 0.1875rem !important;
    }
    .site-footer .footer-column a {
        font-size: 0.8125rem !important;
    }

    /* Footer trust bar — wrap and compact */
    .footer-trust-bar,
    .mp-footer-trust-bar,
    .mp-v14-footer-trust-bar {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.375rem 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.6875rem !important;
    }

    /* Footer bottom — copyright section */
    .site-footer .footer-bottom {
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
    }

    /* === TASK 8: Chips and badges — graceful wrapping === */

    /* Key fact chips wrap with vertical spacing */
    .mp-v14-key-facts {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.375rem !important;
    }

    /* Trust badges in purchase panel */
    .mp-v14-trust-row {
        flex-wrap: wrap !important;
        gap: 0.375rem 0.5rem !important;
    }
}

/* -------------------------------------------------------------------------
   480px: Small phone — switch related products to single column
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {

    /* Related products — single column, tighter gap */
    .single-product .related.products ul.products {
        grid-template-columns: 1fr !important;
        gap: 0.375rem !important;
    }

    /* Cards become horizontal layout for space efficiency */
    .single-product .related.products ul.products .product-card {
        flex-direction: row !important;
        align-items: center !important;
        padding: 0.5rem !important;
        gap: 0.625rem !important;
        border-bottom: 1px solid var(--mp-oh-border, #e5e7eb) !important;
    }
    .single-product .related.products ul.products .product-card:last-child {
        border-bottom: none !important;
    }
    /* Card name — slightly larger for scanability in horizontal layout */
    .single-product .related.products .product-card .product-card-name {
        font-size: 0.875rem !important;
    }
    .single-product .related.products .product-card .product-card-image {
        width: 80px !important;
        flex-shrink: 0 !important;
    }
    .single-product .related.products .product-card .product-card-image img {
        height: 80px !important;
        width: 80px !important;
        border-radius: 6px !important;
    }
    .single-product .related.products .product-card .product-card-content {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .single-product .related.products .product-card .product-buttons {
        border-top: none !important;
        padding-top: 4px !important;
        margin-top: 4px !important;
    }

    /* Sticky bar — even more compact */
    .mp-sticky-atc-inner {
        padding: 4px 8px !important;
    }
    .mp-sticky-atc-name {
        font-size: 9px !important;
    }
    .mp-sticky-atc-price {
        font-size: 11px !important;
    }
    .mp-sticky-atc-btn {
        padding: 5px 10px !important;
        font-size: 10px !important;
        min-height: 32px !important;
    }
}

/* -------------------------------------------------------------------------
   375px: Micro mobile — tightest spacing
   ------------------------------------------------------------------------- */
@media (max-width: 375px) {

    /* Container padding */
    .single-product-container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Title slightly smaller */
    .mp-stitch-product-title {
        font-size: 1.25rem !important;
    }

    /* Price slightly smaller */
    .mp-stitch-price-prominent {
        font-size: 1.375rem !important;
    }

    /* Volume pricing — tighter */
    .mp-v14-pricing-row {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.75rem !important;
    }

    /* Tabs — abbreviated labels for narrow screens.
       font-size:0 hides the button's text node, ::after provides short label.
       Screen readers still read the DOM text, so accessibility is preserved. */
    .mp-product-tab {
        padding: 0.625rem 0.75rem !important;
        font-size: 0 !important;
        white-space: nowrap !important;
    }
    .mp-product-tab::after {
        font-size: 0.75rem !important;
        letter-spacing: 0.03em !important;
    }
    #mp-tab-description::after       { content: "Description"; }
    #mp-tab-mp_coa::after            { content: "COA"; }
    #mp-tab-mp_quality_assurance::after { content: "QA"; }
    #mp-tab-mp_storage::after        { content: "Storage"; }

    /* Tab content */
    .mp-product-panel {
        padding: 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    /* Related products — even tighter horizontal cards */
    .single-product .related.products {
        padding: 1rem 0.75rem 0 !important;
    }
    .single-product .related.products .product-card .product-card-image {
        width: 80px !important;
    }
    .single-product .related.products .product-card .product-card-image img {
        height: 80px !important;
        width: 80px !important;
    }
}

/* =============================================================================
   v15.0 — Summary Column Hierarchy & CTA (Phase 11)
   V15 Changes (2026-02-26):
   - Plan 11-01: 3-tier visual hierarchy — title > price > ATC with generous spacing
   - Plan 11-01: Full-width CTA button — maximum visual prominence, fa-cart-plus icon
   - Plan 11-01: Secondary info wrapper below purchase controls
   ============================================================================= */

/* --- V15 Plan 11-01: R-301 — 3-Tier Visual Hierarchy ---
   Title: largest/boldest (already set by V14).
   Price: prominent with generous top/bottom spacing to create visual breathing room.
   ATC: immediately after price with no competing elements.
   --------------------------------------------------------------- */

/* Title tier — ensure it's the largest text element. Already 1.5rem from V14,
   bump to 1.625rem for extra dominance and add bottom margin for tier separation. */
.mp-stitch-product-title {
    font-size: 1.625rem !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
}

/* Price tier — generous vertical spacing to create clear separation from badges above
   and ATC below. This is the visual "anchor" of the hierarchy. */
.mp-stitch-price-prominent {
    margin-top: 12px !important;
    margin-bottom: 16px !important;
    padding: 8px 0 !important;
}
.mp-stitch-price-prominent .woocommerce-Price-amount,
.mp-stitch-price-prominent .price {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--mp-oh-heading) !important;
}

/* Header block — tighten internal gap so title+stock+badges feel grouped,
   with price sitting visually separate below */
.mp-stitch-header-block {
    gap: 4px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Purchase controls — zero top margin so ATC sits tight against price */
.mp-stitch-purchase-controls {
    margin-top: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* --- V15 Plan 11-01: R-302 — Full-Width CTA Button ---
   The ATC button must be the single most visually dominant interactive element.
   Full width, increased padding, highest-contrast accent, prominent shadow.
   ------------------------------------------------------------------- */

/* Cart actions layout — stack qty selector and ATC vertically for full-width CTA.
   Qty selector stays inline (row), ATC becomes its own full-width row below. */
.mp-stitch-cart-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Quantity selector row — centered, auto-width */
.mp-stitch-cart-actions .mp-stitch-qty-selector {
    align-self: flex-start !important;
}

/* Full-width Add to Cart button — R-302 */
.mp-stitch-atc-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    border-radius: 10px !important;
    background: var(--mp-oh-cta) !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 14px rgba(194, 65, 12, 0.3) !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    min-height: 52px !important;
}

/* Hover — darker shade, lift, stronger shadow */
.mp-stitch-atc-btn:hover {
    background: var(--mp-oh-cta-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(154, 52, 18, 0.4) !important;
}

/* Active — press down */
.mp-stitch-atc-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(154, 52, 18, 0.3) !important;
}

/* Focus — visible ring for keyboard navigation (WCAG 2.4.7) */
.mp-stitch-atc-btn:focus-visible {
    outline: 3px solid var(--mp-oh-cta) !important;
    outline-offset: 3px !important;
}

/* ATC icon sizing */
.mp-stitch-atc-btn i,
.mp-stitch-atc-btn .fas {
    font-size: 1.125rem !important;
}

/* --- V15 Plan 11-01: Secondary Info Wrapper ---
   Volume pricing table and shipping badge, repositioned below purchase controls.
   Subtle visual separation via top border + muted background.
   --------------------------------------------------------------- */
.mp-v15-secondary-info {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--mp-oh-border) !important;
}

/* --- V15 Phase 11: Mobile Adjustments --- */
@media (max-width: 768px) {
    .mp-stitch-product-title {
        font-size: 1.375rem !important;
    }
    .mp-stitch-price-prominent {
        margin-top: 8px !important;
        margin-bottom: 12px !important;
        padding: 4px 0 !important;
    }
    .mp-stitch-price-prominent .woocommerce-Price-amount,
    .mp-stitch-price-prominent .price {
        font-size: 1.75rem !important;
    }
    .mp-stitch-atc-btn {
        padding: 14px 20px !important;
        font-size: 1rem !important;
        min-height: 48px !important;
    }
    .mp-v15-secondary-info {
        margin-top: 12px !important;
        padding-top: 12px !important;
    }
}

@media (max-width: 375px) {
    .mp-stitch-product-title {
        font-size: 1.25rem !important;
    }
    .mp-stitch-price-prominent .woocommerce-Price-amount,
    .mp-stitch-price-prominent .price {
        font-size: 1.5rem !important;
    }
    .mp-stitch-atc-btn {
        padding: 12px 16px !important;
        font-size: 0.9375rem !important;
        min-height: 44px !important;
    }
}

/* --- V15 Plan 11-02: R-308 — Product Meta Badges ---
   Pill-style metadata badges (Purity, Form, MW, CAS optional).
   Light background tint, small uppercase labels, CSS variable tokens.
   Builds on existing .mp-v14-chip rules from V14 Phase 3.
   --------------------------------------------------------------- */

/* Badge container — positioned between stock status and price */
.mp-v14-key-facts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 6px 0 !important;
    align-items: center !important;
}

/* Individual badge pill */
.mp-v14-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 12px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--mp-oh-heading) !important;
    background: var(--mp-oh-bg-muted) !important;
    border: 1px solid var(--mp-oh-border) !important;
    border-radius: 100px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* Badge label (e.g., "Purity", "Form", "MW", "CAS") */
.mp-v14-chip-label {
    font-weight: 600 !important;
    color: var(--mp-oh-muted) !important;
    text-transform: uppercase !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.05em !important;
}

/* --- V15 Plan 11-02: Badge mobile adjustments --- */
@media (max-width: 768px) {
    .mp-v14-key-facts {
        gap: 6px !important;
        margin: 4px 0 !important;
    }
    .mp-v14-chip {
        font-size: 0.75rem !important;
        padding: 3px 10px !important;
    }
}

@media (max-width: 375px) {
    .mp-v14-chip {
        font-size: 0.6875rem !important;
        padding: 2px 8px !important;
    }
    .mp-v14-chip-label {
        font-size: 0.5625rem !important;
    }
}

/* =============================================================================
   v16.0 — Purchase Zone Conversion (Phase 12)
   ============================================================================= */

/* --- V16 Plan 12-01: Selectable Volume Pricing Tiers ---
   Converts static pricing rows into interactive tier selector with
   radio indicators, selected/hover states, and bidirectional quantity sync.
   ----------------------------------------------------------------- */

/* Base row: cursor + transitions + transparent left border for selection indicator */
.mp-v14-pricing-row[data-qty] {
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    border-left: 3px solid transparent !important;
    grid-template-columns: auto 1fr auto auto !important;
}

/* Hover state */
.mp-v14-pricing-row[data-qty]:hover {
    background: var(--mp-oh-bg-muted) !important;
}

/* Selected state (all rows) */
.mp-v14-pricing-row.mp-v16-tier-selected {
    background: #f0fdfa !important;
    border-left-color: var(--mp-oh-accent) !important;
}

/* Popular row: amber background + warning border (when NOT selected) */
.mp-v14-pricing-row.mp-v14-pricing-popular {
    background: #fffbeb !important;
    border-left: 3px solid var(--mp-oh-warning) !important;
}

/* Popular row hover (when NOT selected) */
.mp-v14-pricing-row.mp-v14-pricing-popular:hover {
    background: #fef9e7 !important;
}

/* Popular + selected: teal accent wins over warning */
.mp-v14-pricing-row.mp-v14-pricing-popular.mp-v16-tier-selected {
    background: #f0fdfa !important;
    border-left-color: var(--mp-oh-accent) !important;
}

/* Radio indicator (unselected) */
.mp-v16-tier-radio {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 2px solid var(--mp-oh-border) !important;
    background: #fff !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
    display: inline-block !important;
}

/* Radio indicator (selected) — filled with inner dot */
.mp-v16-tier-selected .mp-v16-tier-radio {
    border-color: var(--mp-oh-accent) !important;
    background: var(--mp-oh-accent) !important;
    box-shadow: inset 0 0 0 3px #fff !important;
}

/* Focus visible for keyboard navigation */
.mp-v14-pricing-row[data-qty]:focus-visible {
    outline: 2px solid var(--mp-oh-accent) !important;
    outline-offset: -2px !important;
}

/* --- V16 Mobile: 768px --- */
@media (max-width: 768px) {
    .mp-v16-tier-radio {
        width: 14px !important;
        height: 14px !important;
    }
    .mp-v14-pricing-row[data-qty] {
        padding: 7px 10px !important;
    }
}

/* --- V16 Mobile: 375px --- */
@media (max-width: 375px) {
    .mp-v16-tier-radio {
        width: 12px !important;
        height: 12px !important;
    }
    .mp-v14-pricing-row[data-qty] {
        padding: 6px 8px !important;
        gap: 6px !important;
    }
}

/* =================================================================
   V16 Plan 12-02: R-304 — Trust Badge Strip Below CTA
   Contained horizontal strip with muted background, directly below
   ATC button (after COA badge, before payment icons).
   ================================================================= */

.mp-v16-trust-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 16px !important;
    padding: 12px 16px !important;
    background: var(--mp-oh-bg-muted, #f9fafb) !important;
    border: 1px solid var(--mp-oh-border-light, #f3f4f6) !important;
    border-radius: var(--mp-oh-radius-md, 0.5rem) !important;
    margin: 12px 0 0 !important;
}

.mp-v16-trust-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    color: var(--mp-oh-muted) !important;
    white-space: nowrap !important;
}

.mp-v16-trust-badge i {
    font-size: 0.8125rem !important;
    color: var(--mp-oh-accent, #32808d) !important;
}

/* Hide old trust row (prevents cached markup from showing) */
.mp-v14-trust-row {
    display: none !important;
}

/* =================================================================
   V16 Plan 12-02: R-309 — Shipping Threshold Callout
   Single-line callout with green checkmark icon inside
   .mp-v15-secondary-info after volume pricing table.
   ================================================================= */

.mp-v16-shipping-callout {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.8125rem !important;
    color: #065f46 !important;
    line-height: 1.4 !important;
    margin: 6px 0 0 !important;
}

.mp-v16-shipping-callout i,
.mp-v16-shipping-callout .fas {
    color: var(--mp-oh-success, #059669) !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

/* Hide old shipping badge (prevents cached markup from showing) */
.mp-v14-shipping-badge {
    display: none !important;
}

/* --- V16 Plan 12-02: Mobile 768px --- */
@media (max-width: 768px) {
    .mp-v16-trust-strip {
        gap: 4px 10px !important;
        padding: 10px 12px !important;
    }
    .mp-v16-trust-badge {
        font-size: 0.625rem !important;
    }
    .mp-v16-shipping-callout {
        font-size: 0.75rem !important;
    }
}

/* --- V16 Plan 12-02: Mobile 375px --- */
@media (max-width: 375px) {
    .mp-v16-trust-strip {
        gap: 3px 8px !important;
        padding: 8px 10px !important;
    }
    .mp-v16-trust-badge i {
        font-size: 0.75rem !important;
    }
}

/* =============================================================================
   v16.1 — Tabs & Product Image (Phase 13)
   ============================================================================= */

/* --- Tab Bar Bottom Border --- */
.mp-product-tabs {
    border-bottom: 2px solid var(--mp-oh-border) !important;
}

/* --- Active Tab State --- */
.mp-product-tab--active,
.mp-product-tab[aria-selected="true"] {
    border-bottom: 3px solid var(--mp-oh-accent) !important;
    color: var(--mp-oh-heading) !important;
    background: var(--mp-oh-bg-surface) !important;
    font-weight: 700 !important;
}

/* --- Inactive Tab State --- */
.mp-product-tab:not(.mp-product-tab--active) {
    color: var(--mp-oh-muted) !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* --- Inactive Tab Hover --- */
.mp-product-tab:not(.mp-product-tab--active):hover {
    color: var(--mp-oh-body) !important;
    background: rgba(0, 0, 0, 0.02) !important;
}

/* --- Tab Content Panel Typography --- */
.mp-product-panel {
    padding: 2rem 1.75rem !important;
    line-height: 1.75 !important;
    font-size: 0.9375rem !important;
}

.mp-product-panel p {
    margin-bottom: 1rem !important;
    line-height: 1.75 !important;
}

.mp-product-panel h3 {
    margin-top: 1.75rem !important;
    margin-bottom: 1rem !important;
}

/* --- COA Outlined Button --- */
.mp-v16-coa-view-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    background: transparent !important;
    color: var(--mp-oh-primary) !important;
    border: 2px solid var(--mp-oh-primary) !important;
    border-radius: var(--mp-oh-radius-md) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    margin-top: 8px !important;
}
.mp-v16-coa-view-btn:hover {
    background: var(--mp-oh-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.mp-v16-coa-view-btn i {
    font-size: 1rem !important;
}

/* --- Hide old COA download class (cached markup fallback) --- */
.mp-v14-coa-download { display: none !important; }

/* --- V16.1 Plan 13-02: Product Image Gallery (R-307) --- */

/* Gallery container: full width, off-white background, rounded corners */
.mp-stitch-product-gallery .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

/* Main image wrapper: light neutral background */
.mp-stitch-product-gallery .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    background: #f8f9fa !important;
    border-radius: var(--mp-oh-radius-lg) !important;
    border: 1px solid var(--mp-oh-border) !important;
    overflow: hidden !important;
}

/* Main image: full width, clean presentation */
.mp-stitch-product-gallery .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
    border: none !important;
    background: #f8f9fa !important;
}

/* Zoom icon indicator (WC adds a trigger element) */
.mp-stitch-product-gallery .woocommerce-product-gallery__trigger {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 5 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--mp-oh-shadow-sm) !important;
    opacity: 0.7 !important;
    transition: opacity var(--mp-oh-transition) !important;
}
.mp-stitch-product-gallery .woocommerce-product-gallery__trigger:hover {
    opacity: 1 !important;
}

/* Thumbnail row: flex layout with consistent gap */
.mp-stitch-product-gallery .flex-control-thumbs {
    display: flex !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding: 0 !important;
    list-style: none !important;
    overflow-x: auto !important;
}

/* Individual thumbnail: fixed size, rounded, bordered */
.mp-stitch-product-gallery .flex-control-thumbs li {
    flex: 0 0 72px !important;
    width: 72px !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mp-stitch-product-gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: var(--mp-oh-radius-sm) !important;
    border: 2px solid var(--mp-oh-border) !important;
    cursor: pointer !important;
    transition: border-color var(--mp-oh-transition), opacity var(--mp-oh-transition) !important;
    opacity: 0.6 !important;
    background: #f8f9fa !important;
}

/* Active thumbnail (WC adds .flex-active class to the li, and opacity:1 to img) */
.mp-stitch-product-gallery .flex-control-thumbs li img.flex-active,
.mp-stitch-product-gallery .flex-control-thumbs li img[style*="opacity: 1"],
.mp-stitch-product-gallery .flex-control-thumbs li:first-child img {
    border-color: var(--mp-oh-accent) !important;
    opacity: 1 !important;
}

/* Reset first-child when another is active */
.mp-stitch-product-gallery .flex-control-thumbs li img.flex-active ~ li img,
.mp-stitch-product-gallery .flex-control-thumbs li:first-child img:not(.flex-active) {
    /* Only apply accent border to truly active thumbnail */
}

/* Simplified: just use opacity for active detection since WC sets it */
.mp-stitch-product-gallery .flex-control-thumbs li img:hover {
    opacity: 0.9 !important;
    border-color: var(--mp-oh-body) !important;
}

/* Hide legacy custom image elements replaced by WC gallery */
.mp-stitch-image-card,
.mp-stitch-image-wrapper,
.mp-stitch-vial-bg {
    /* Preserved for backward compat if old markup cached; WC gallery replaces these */
}

/* --- V16.2: Disable WC zoom overflow on mobile (prevents image overlap on scroll) --- */
@media (max-width: 1023px) {
    .woocommerce-product-gallery__image {
        overflow: hidden !important;
        position: relative !important;
    }
    .woocommerce-product-gallery__image .zoomImg {
        display: none !important;
    }
}

/* --- V16.1: Mobile 768px --- */
@media (max-width: 768px) {
    .mp-product-panel {
        padding: 1.25rem 1rem !important;
    }
    .mp-stitch-product-gallery .flex-control-thumbs li {
        flex: 0 0 56px !important;
        width: 56px !important;
        height: 56px !important;
    }
    .mp-stitch-product-gallery .flex-control-thumbs {
        gap: 6px !important;
        margin-top: 8px !important;
    }
}

/* --- V16.1: Mobile 375px --- */
@media (max-width: 375px) {
    .mp-product-panel {
        padding: 1rem 0.75rem !important;
    }
    .mp-stitch-product-gallery .flex-control-thumbs li {
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 48px !important;
    }
}

/* ============================================
   V17.0 — Single Product Layout Fix
   Outer container must be block (not grid) so breadcrumb/sections flow naturally.
   Inner .mp-stitch-product-grid is the actual 2-col grid for gallery | info.
   ============================================ */

/* Override style.css line 4844 which incorrectly applies grid to outer container */
body.single-product .single-product-container.product {
    display: block !important;
    grid-template-columns: none !important;
}

/* The actual gallery | info 2-column grid */
body.single-product .mp-stitch-product-grid {
    display: grid !important;
    grid-template-columns: 7fr 5fr !important;
}

/* Tech specs spans full width below the 2-col area */
body.single-product .mp-stitch-product-grid .mp-stitch-tech-specs {
    grid-column: 1 / -1 !important;
}

/* Override style.css line 4859 — gallery must NOT be sticky.
   The old sticky rule causes the gallery to slide over the tabs/description
   section when scrolling. Kill it completely.
   Specificity (0,3,3) beats style.css ".woocommerce div.product div.images" (0,3,2). */
body.single-product div.mp-stitch-product-grid div.woocommerce-product-gallery {
    position: static !important;
    top: auto !important;
}