/* ════════════════════════════════════════════════════════════════
   PROSPER LABS — Mobile Overhaul Stylesheet (v4.0)
   Loaded AFTER theme.min.css so it overrides cleanly.
   Pure additive — does not touch existing rules unless overriding.
═══════════════════════════════════════════════════════════════════ */

/* ── Touch targets: 44px minimum (Apple HIG) ── */
@media (max-width: 768px) {
  .btn,
  .pl-btn,
  button:not(.pl-co-coupon-apply):not(.pl-pdp-thumb),
  input[type="submit"],
  .woocommerce-button,
  .add_to_cart_button,
  .single_add_to_cart_button,
  .pl-order-view,
  .pl-portal-link,
  .pl-section-link {
    min-height: 44px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    font-size: 0.92rem !important;
  }

  /* Form inputs: bigger tap targets, prevent zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* prevents iOS zoom-on-focus */
    padding: 11px 14px !important;
  }

  /* Checkbox/radio: bigger hit area via wrapper */
  label {
    min-height: 28px;
    line-height: 1.45;
  }
}

/* ── iPhone SE / 375px overflow defense ── */
@media (max-width: 380px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  * {
    max-width: 100vw;
  }
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  .container,
  .pl-container,
  .pl-co-wrap,
  .pl-portal-wrap,
  .pl-contact-section .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  h1 { font-size: 1.55rem !important; }
  h2 { font-size: 1.25rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   STICKY MOBILE ADD-TO-CART BAR (PDP)
═══════════════════════════════════════════════════════════════════ */
.pl-mobile-sticky-cart {
  display: none;
}
@media (max-width: 768px) {
  body.single-product .pl-mobile-sticky-cart {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-top: 1.5px solid rgba(143, 103, 255, 0.2);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    gap: 12px;
    align-items: center;
  }
  .pl-mobile-sticky-cart .pl-msc-info {
    flex: 1;
    min-width: 0;
  }
  .pl-mobile-sticky-cart .pl-msc-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .pl-mobile-sticky-cart .pl-msc-price {
    font-size: 1.05rem;
    font-weight: 900;
    color: #8f67ff;
    display: block;
    letter-spacing: -0.01em;
  }
  .pl-mobile-sticky-cart .pl-msc-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #8f67ff, #b44fff);
    color: #fff;
    border: none;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    min-height: 44px;
    box-shadow: 0 4px 14px rgba(143, 103, 255, 0.35);
  }

  /* Make room above footer for the sticky bar */
  body.single-product .footer-main,
  body.single-product footer {
    padding-bottom: 80px;
  }
  body.single-product {
    padding-bottom: 70px;
  }
}

/* ════════════════════════════════════════════════════════════════
   PORTAL: stacked row layout on mobile
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pl-order-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 16px !important;
  }
  .pl-order-row .pl-order-info {
    flex: 1 1 100%;
    min-width: 0;
  }
  .pl-order-row .pl-order-status {
    order: 2;
    align-self: flex-start;
  }
  .pl-order-row .pl-order-total {
    order: 3;
    margin-left: auto;
    font-size: 1.1rem !important;
  }
  .pl-order-row .pl-order-actions {
    flex: 1 1 100%;
    order: 4;
    display: flex;
    gap: 8px;
  }
  .pl-order-row .pl-order-actions a,
  .pl-order-row .pl-order-actions .pl-complete-btn,
  .pl-order-row .pl-order-actions .pl-order-view {
    flex: 1;
    justify-content: center;
    text-align: center;
    min-height: 44px;
  }

  /* Portal grid: single column on mobile */
  .pl-portal-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .pl-portal-link {
    padding: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   PORTAL BOTTOM NAV (mobile only, for /my-account/*)
═══════════════════════════════════════════════════════════════════ */
.pl-portal-bottom-nav {
  display: none;
}
@media (max-width: 768px) {
  body.woocommerce-account .pl-portal-bottom-nav,
  body.woocommerce-page.woocommerce-account .pl-portal-bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: #fff;
    border-top: 1.5px solid rgba(0, 0, 0, 0.08);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
  }
  .pl-portal-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    color: #6b7280;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    min-height: 44px;
  }
  .pl-portal-bottom-nav a.is-active {
    color: #8f67ff;
  }
  .pl-portal-bottom-nav a svg {
    width: 22px;
    height: 22px;
  }
  body.woocommerce-account {
    padding-bottom: 84px;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE CHECKOUT — collapse + autofill optimization
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pl-co-cols {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .pl-co-box {
    padding: 18px !important;
  }
  .pl-co-box .form-row {
    flex-direction: column;
  }
  .pl-co-box .form-row.form-row-first,
  .pl-co-box .form-row.form-row-last {
    width: 100% !important;
    float: none !important;
  }
  /* Smaller progress steps on tight screens */
  .pl-progress .pl-prog-step span {
    font-size: 0.75rem;
  }
  /* Trust strip stack */
  .pl-co-trust-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* International notice fits */
  .pl-co-intl-notice {
    font-size: 0.82rem !important;
    padding: 12px 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE HEADER / MENU DRAWER
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Bigger header touch targets */
  .header-actions a,
  .header-actions button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Slide-in menu drawer (when class is added by JS) */
.pl-menu-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(85%, 360px);
  height: 100vh;
  background: #fff;
  z-index: 99999;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: 70px 22px 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pl-menu-drawer.is-open {
  right: 0;
}
.pl-menu-drawer a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
  text-decoration: none;
  border-radius: 12px;
  min-height: 44px;
}
.pl-menu-drawer a:hover,
.pl-menu-drawer a:active {
  background: rgba(143, 103, 255, 0.08);
}
.pl-menu-drawer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 999px;
  font-size: 1.2rem;
  cursor: pointer;
}
.pl-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99998;
}
.pl-menu-overlay.is-open {
  display: block;
}

/* ════════════════════════════════════════════════════════════════
   PORTAL: rewards page mobile
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .pl-rewards-tier-banner {
    padding: 18px !important;
  }
  .pl-rewards-tier-banner h2 {
    font-size: 1.1rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   CART DRAWER: free-shipping progress + coupon pill
═══════════════════════════════════════════════════════════════════ */
.pl-cart-shipping-progress {
  background: linear-gradient(135deg, rgba(143, 103, 255, 0.08), rgba(180, 79, 255, 0.04));
  border: 1.5px solid rgba(143, 103, 255, 0.30);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  font-size: 0.85rem;
}
.pl-cart-shipping-progress.is-unlocked {
  background: linear-gradient(135deg, rgba(94, 206, 117, 0.10), rgba(94, 206, 117, 0.04));
  border-color: rgba(94, 206, 117, 0.40);
}
.pl-cart-shipping-progress .bar {
  margin-top: 8px;
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.pl-cart-shipping-progress .bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8f67ff, #b44fff);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.pl-cart-coupon-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(94, 206, 117, 0.12);
  border: 1px solid rgba(94, 206, 117, 0.40);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2d8847;
  margin: 8px 0;
}

/* ════════════════════════════════════════════════════════════════
   LOW STOCK / TRUST STRIP — PDP polish
═══════════════════════════════════════════════════════════════════ */
.pl-low-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 138, 76, 0.12);
  border: 1px solid rgba(255, 138, 76, 0.35);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #cc5c1b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 8px 0;
}
.pl-low-stock-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ff8a4c;
  animation: pl-pulse 1.6s ease-in-out infinite;
}
@keyframes pl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.pl-pdp-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  background: rgba(143, 103, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(143, 103, 255, 0.18);
}
.pl-pdp-trust-strip > div {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.3;
}
.pl-pdp-trust-strip > div span {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 2px;
}
@media (max-width: 480px) {
  .pl-pdp-trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ════════════════════════════════════════════════════════════════
   REWARDS PORTAL: tighter spacing on small screens
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .pl-checkout-rewards,
  .pl-checkout-rewards-guest {
    padding: 14px !important;
    font-size: 0.85rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   TAP HIGHLIGHTS off for nicer feel
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  a, button, input, select, textarea {
    -webkit-tap-highlight-color: rgba(143, 103, 255, 0.15);
  }
  body {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   v4.1.1 — CATALOG ("ALL PEPTIDES") SECTION CLEANUP
   Loaded after theme.css/theme.min.css so these rules win.
═══════════════════════════════════════════════════════════════════ */

/* 1. Background: pure white so the section blends with neighbors
      (was #faf7ff which created a visible band on the page). */
.catalog-section { background: #fff !important; }

/* 2. "FULL CATALOG" eyebrow: dark/black instead of pale lavender
      so it's actually readable. We scope it tight to the catalog
      so we don't change the hero/other eyebrows. */
.catalog-section .section-head .eyebrow {
  color: #140d25 !important;         /* near-black on the catalog */
  border-color: #140d25 !important;  /* outline matches the text */
  background: #fff !important;
  font-weight: 800;
}

/* 3. "48 products" count-pill: stop the awkward two-line wrap on
      mobile and pin it to the top-right of the section head. */
.catalog-section .section-head .count-pill {
  white-space: nowrap;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #140d25;
  font-weight: 800;
}

/* On mobile, the section-head is column-stacked. Right-align the pill
   in its own row above the title, and keep it on a single line. */
@media (max-width: 640px) {
  .catalog-section .section-head.stacked {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .catalog-section .section-head.stacked > div { order: 2; }
  .catalog-section .section-head.stacked .count-pill {
    order: 1;
    align-self: flex-end;
    padding: 8px 14px;
    font-size: .78rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   v4.1.1 — COA LIBRARY: HORIZONTAL CATEGORY PILLS ON MOBILE
   Mirrors the catalog/.filter-pills horizontal-scroll pattern.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* The wrapper itself needs to allow the inner row to scroll. */
  .coa-controls {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .coa-controls .coa-search-wrap {
    max-width: 100% !important;
    width: 100%;
  }
  /* Convert from wrap+center to single-line horizontal scroll. */
  .coa-filter-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    justify-content: flex-start !important;
    padding: 4px 4px 8px !important;
    margin: 0 -4px;       /* let pills bleed slightly to the edges */
    scroll-snap-type: x proximity;
  }
  .coa-filter-pills::-webkit-scrollbar { display: none !important; }
  .coa-filter-pills .coa-pill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }
}

/* ════════════════════════════════════════════════════════════════
   v4.1.1 — KILL LEGACY STICKY BAR (safety net)
   The .pl-mobile-sticky-cart "Select" button bounced users back to
   the same page without picking up their selected variation. We've
   already stopped injecting the template via wp_footer, but this
   rule ensures it cannot reappear if a cached page or plugin still
   prints it.
═══════════════════════════════════════════════════════════════════ */
.pl-mobile-sticky-cart { display: none !important; }


/* v4.2 — Prosper mobile polish requested 2026-05-20 */
/* Safety net: remove the old international-order banner everywhere, even from cached markup. */
.pl-intl-banner { display: none !important; }

/* Make COA library filter pills look like the catalog horizontal category pills. */
.coa-controls {
  background: #f8f6fe !important;
  border-bottom: 1.5px solid #ede8f8 !important;
}
.coa-filter-pills {
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 4px 2px 10px !important;
  margin: 0 !important;
}
.coa-filter-pills::-webkit-scrollbar { display: none !important; }
.coa-filter-pills .coa-pill {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-height: 44px !important;
  padding: 11px 20px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .01em !important;
  background: #fff !important;
  color: #5f5b68 !important;
  border: 1.5px solid #ede8f8 !important;
  box-shadow: 0 8px 22px rgba(67,45,118,.045) !important;
}
.coa-filter-pills .coa-pill.active,
.coa-filter-pills .coa-pill:hover {
  background: #432D76 !important;
  border-color: #432D76 !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(67,45,118,.16) !important;
}

/* Make View COA/Open COA buttons feel like the clean horizontal pill system too. */
.coa-card-actions { flex-wrap: wrap !important; gap: 10px !important; }
.coa-btn-view,
.pl-coa-head .pl-btn,
.pl-acc__body .pl-btn[href*="pl-coa"] {
  border-radius: 999px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 20px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.coa-btn-view::before,
.pl-coa-head .pl-btn::before,
.pl-acc__body .pl-btn[href*="pl-coa"]::before {
  content: '✓';
  margin-right: 8px;
  font-weight: 900;
}
.coa-btn-dl {
  border-radius: 999px !important;
  min-height: 44px !important;
}

@media (max-width: 768px) {
  .pl-coa-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .pl-coa-head .pl-btn {
    width: 100% !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v4.3.4 — MOBILE PERFORMANCE: quiet decorative + paint-heavy loops
   On phones these infinite animations (box-shadow/filter paints and a
   stack of transform loops) compete with scroll for the main thread.
   They're purely cosmetic, so we stop them on small screens and for
   anyone who prefers reduced motion. Zero functional impact.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-art-front,
  .hero-art-back,
  .hero-floating-card-pop,
  .hero-stage:before,
  .hero-orb-a,
  .hero-orb-b,
  .peptide-motion-glow-a,
  .peptide-motion-glow-b {
    animation: none !important;
  }
  /* free the compositor: drop will-change hints once animations are off */
  .hero-art-front,
  .hero-art-back,
  .product-card,
  .proof-pill,
  .coa-point,
  .about-card-box,
  .closing-cta {
    will-change: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art-front,
  .hero-art-back,
  .hero-floating-card-pop,
  .hero-stage:before,
  .hero-orb-a,
  .hero-orb-b,
  .peptide-motion-glow-a,
  .peptide-motion-glow-b,
  .peptide-marquee,
  .trust-bar-track {
    animation: none !important;
  }
}