/* ============================================
   AUSSIE PEPTIDE LAB — RESPONSIVE.CSS (PIXEL PERFECT REWRITE)
   Breakpoints:
   XL  : ≤1200px  (large tablet / small laptop)
   LG  : ≤992px   (tablet landscape)
   MD  : ≤768px   (tablet portrait)
   SM  : ≤576px   (mobile)
   XS  : ≤400px   (small mobile)
   ============================================ */

/* =============================================
   XL — ≤1200px
   ============================================= */
@media (max-width: 1200px) {
  .container-fluid,
  .container.custom-padding {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .header-pill {
    padding: 10px 36px !important;
  }
}

/* =============================================
   LG — ≤992px  (Tablet landscape)
   ============================================= */
@media (max-width: 992px) {

  /* --- Global Padding ---------------------- */
  .container-fluid,
  .container.custom-padding {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* --- Header ------------------------------ */
  .header-pill {
    padding: 10px 24px !important;
    border-radius: 0 !important;
  }

  /* Hide desktop nav on tablet+phone (correct class = .main-nav) */
  .main-nav,
  .main-nav-new,
  .social-links-new,
  .btn-coin-dark,
  .btn-explore-border,
  .flag-dropdown,
  .header-bottom-row {
    display: none !important;
  }

  /* Show hamburger */
  .navbar-hamburger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
  }
  .navbar-hamburger span {
    display: block !important;
    width: 24px;
    height: 2.5px;
    background: #0b1523;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  /* Header right — just show hamburger */
  .header-right {
    flex-direction: row !important;
    align-items: center !important;
  }
  .header-top-row {
    gap: 0 !important;
  }

  /* Mobile menu */
  .mobile-menu {
    padding: 8px 0 !important;
  }
  .mobile-menu .nav-link {
    padding: 14px 24px !important;
    font-size: 15px !important;
  }
  .mobile-menu-btns {
    padding: 12px 24px !important;
    gap: 10px;
  }
  .mobile-menu-btns .btn-coin-dark,
  .mobile-menu-btns .btn-explore-border {
    display: block !important;
  }

  /* Top bar */
  .top-bar .inner { justify-content: center; }
  .top-bar-left   { justify-content: center; }

  /* --- Section spacing --------------------- */
  .section { padding: 56px 0 !important; }
  .section-header { margin-bottom: 36px !important; }
  .section-title  { font-size: 30px !important; }
  .section-subtitle { font-size: 15px !important; }

  /* --- Hero -------------------------------- */
  .hero-section { min-height: 70vh; background-position: right center; }
  .hero-inner   { min-height: 70vh; padding: 50px 0; }
  .hero-left    { max-width: 60%; flex: 0 0 60%; }
  .hero-headline { font-size: 30px; }
  .hero-sub      { font-size: 14px; max-width: 100%; }
  .hero-stat-badge {
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 18px;
    min-width: 110px;
    gap: 12px;
  }
  .hero-stat-badge .stat-num   { font-size: 30px; }
  .hero-stat-badge .stat-icon  { width: 42px; height: 42px; font-size: 20px; }
  .hero-stat-badge .stat-label { font-size: 11px; }

  /* --- Products grid ----------------------- */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
  .product-features { gap: 20px; flex-wrap: wrap; }

  /* --- Peptide grid ----------------------- */
  .peptide-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
  .peptide-categories,
  .peptide-detail-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .peptide-card { padding: 36px 14px 28px; }
  .pc-title     { font-size: 14px; min-height: 52px; }
  .pc-desc      { font-size: 12px; }

  /* --- About Section ---------------------- */
  /* about-right has an absolutely positioned badge — keep it relative here
     but make badge responsive to avoid overflow */
  .about-right { min-height: 260px; }
  .about-badge {
    right: 0 !important;
    bottom: -60px !important;
    max-width: 320px !important;
  }
  .about-trust-banner { margin-top: 80px; padding: 20px 0; }
  .trust-banner-item {
    border-right: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 16px 12px !important;
  }
  .trust-banner-item:last-child { border-bottom: none !important; }

  /* --- How it works ----------------------- */
  /* On tablet, stack left/right columns vertically */
  .how-inner { flex-direction: column !important; }
  .how-left-card {
    max-width: 400px !important;
    margin: 0 auto 40px !important;
  }
  /* Remove absolutely positioned badges from image, show them inline */
  .how-left-badges {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding: 16px 8px 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .how-badge-item {
    flex: 1 1 40% !important;
    border-right: none !important;
    padding: 0 !important;
  }
  /* Reset timeline indent on smaller screens */
  .how-steps { padding-left: 70px !important; }

  /* --- Quality ----------------------------- */
  .quality-pillars {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }

  /* --- Reviews ----------------------------- */
  .review-card { flex: 0 0 calc(50% - 10px) !important; min-width: 260px !important; }

  /* --- Footer ------------------------------ */
  .footer-nav-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }
  .footer-mid-grid  { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-mid-divider { display: none !important; }
  .footer-mid-brand   { padding-right: 0 !important; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fbb-badges { flex-wrap: wrap; gap: 14px; }
}


/* =============================================
   MD — ≤768px  (Tablet portrait)
   ============================================= */
@media (max-width: 768px) {

  /* --- Global Padding ---------------------- */
  .container-fluid,
  .container.custom-padding {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* --- Header ------------------------------ */
  .header-pill {
    padding: 10px 18px !important;
    border-radius: 0 !important;
  }

  /* Top bar hidden */
  .top-bar { display: none !important; }

  /* --- Section spacing --------------------- */
  .section        { padding: 44px 0 !important; }
  .section-header { margin-bottom: 28px !important; }
  .section-title  { font-size: 24px !important; }
  .section-subtitle { font-size: 13.5px !important; }

  /* --- Hero -------------------------------- */
  .hero-section  { min-height: 58vh; background-position: 72% center; }
  .hero-inner    { min-height: 58vh; padding: 36px 0 32px; }
  .hero-left     { max-width: 70% !important; flex: 0 0 70% !important; }
  .hero-headline { font-size: 24px; line-height: 1.28; }
  .hero-sub      { font-size: 13.5px; margin-bottom: 16px; }
  .hero-eyebrow  { font-size: 10px; margin-bottom: 10px; }
  .hero-trust-badges { gap: 7px; }
  .trust-badge   { padding: 7px 10px; font-size: 11px; }
  .trust-badge i { font-size: 12px; }
  .hero-btns     { gap: 10px; }
  .btn-hero-primary,
  .btn-hero-secondary { padding: 11px 16px; font-size: 12.5px; }
  .hero-stat-badge {
    bottom: 16px;
    padding: 10px 14px;
    min-width: 90px;
    gap: 10px;
  }
  .hero-stat-badge .stat-num   { font-size: 22px; }
  .hero-stat-badge .stat-icon  { width: 34px; height: 34px; font-size: 15px; }
  .hero-stat-badge .stat-label { font-size: 9.5px; }

  /* --- Products ---------------------------- */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .product-card { padding: 16px 14px 14px !important; }
  .product-name { font-size: 14px !important; }
  .product-dose { font-size: 12px !important; }
  .product-props li { font-size: 11.5px !important; }
  .btn-view-details { font-size: 12px !important; padding: 7px 14px !important; }

  .product-features { flex-wrap: wrap; gap: 14px; }
  .feat-item strong { font-size: 13px; }
  .feat-item span   { font-size: 11.5px; }

  /* Bespoke banner */
  .bespoke-banner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 22px 18px !important;
    gap: 16px !important;
  }
  .bespoke-left {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .bespoke-text h4 { font-size: 15px !important; }
  .btn-contact {
    width: 100% !important;
    justify-content: center !important;
    padding: 11px 20px !important;
    font-size: 13px !important;
  }

  /* --- Peptide ----------------------------- */
  .peptide-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .peptide-categories { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
  .peptide-detail-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .cat-pill            { padding: 10px 6px !important; }
  .cat-pill .cat-name  { font-size: 10px !important; }
  .peptide-card        { padding: 30px 12px 24px !important; }
  .pc-title            { font-size: 13px !important; min-height: 46px !important; }
  .pc-desc             { font-size: 11px !important; }

  .tagline-label { font-size: 9.5px !important; letter-spacing: 0.08em !important; }

  /* --- About Section ---------------------- */
  .about-section      { padding: 44px 0 0 !important; }
  .about-section .section-title { font-size: 24px !important; }
  .about-body         { font-size: 13.5px !important; line-height: 1.7 !important; margin-bottom: 16px !important; }

  /* On md, about-right col stacks below left.
     Badge is absolutely positioned — reset to relative/static flow */
  .about-right {
    min-height: 0 !important;
    margin-top: 24px !important;
    padding-bottom: 20px !important;
    display: flex !important;
    justify-content: flex-start !important;
  }
  .about-badge {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .about-trust-banner {
    margin-top: 24px !important;
    padding: 20px 0 !important;
  }
  .trust-icon-circle  { width: 46px !important; height: 46px !important; font-size: 17px !important; }
  .trust-text strong  { font-size: 13.5px !important; }
  .trust-text span    { font-size: 12px !important; }

  /* --- How it works ----------------------- */
  .how-it-works { padding: 44px 0 !important; }
  .how-it-works .section-subtitle { font-size: 13.5px !important; margin-bottom: 28px !important; }
  .how-left-card {
    max-width: 360px !important;
    margin: 0 auto 32px !important;
  }
  /* Image overlay badges must be visible — keep them below image */
  .how-left-badges {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 16px !important;
    padding: 14px 8px 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    z-index: auto !important;
  }
  .how-badge-item {
    flex: 1 1 45% !important;
    border-right: none !important;
    padding: 0 !important;
  }
  .badge-text-small { font-size: 10.5px !important; }

  /* Hide dashed timeline decorators (connector lines from steps to timeline) */
  .how-steps::before { display: none !important; }
  .how-step::before,
  .how-step::after   { display: none !important; }
  .how-steps         { padding-left: 0 !important; gap: 12px !important; }
  .how-step          { padding: 16px 18px !important; gap: 14px !important; }
  .step-icon-wrap    { width: 44px !important; height: 44px !important; font-size: 17px !important; flex-shrink: 0; }
  .step-num-text     { font-size: 19px !important; }
  .step-title-text   { font-size: 15px !important; }
  .step-desc-text    { font-size: 12.5px !important; }

  /* --- Reviews ----------------------------- */
  .reviews-section  { padding: 44px 0 !important; }
  .review-card      { flex: 0 0 100% !important; min-width: unset !important; }
  .carousel-nav-btn { width: 36px !important; height: 36px !important; font-size: 12px !important; }
  .prev-btn         { left: -8px !important; }
  .next-btn         { right: -8px !important; }
  .rc-text          { font-size: 12.5px !important; }

  /* --- Quality ----------------------------- */
  .quality-section  { padding: 44px 0 !important; margin-bottom: 24px !important; }
  .quality-pillars  { grid-template-columns: 1fr !important; gap: 16px !important; }
  .quality-pillar   { padding: 24px 18px !important; }
  .qp-title         { font-size: 17px !important; }
  .qp-desc          { font-size: 13px !important; }
  .quality-sub      { font-size: 13.5px !important; }
  .btn-verify,
  .btn-verify-batch {
    padding: 13px 26px !important;
    font-size: 14px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- Footer ------------------------------ */
  .footer-top      { padding: 32px 0 24px !important; }
  .footer-nav-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; }
  .footer-mid      { padding: 28px 0 !important; }
  .footer-mid-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .footer-col-title { font-size: 12px !important; }
  .footer-links a   { font-size: 12.5px !important; padding: 6px 0 !important; }
  .footer-bottom    { padding: 14px 0 !important; }
  .footer-bottom-inner { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .fbb-copy   { font-size: 11.5px !important; }
  .fbb-badges { flex-wrap: wrap !important; gap: 12px !important; }
  .fbb-badge  { font-size: 11.5px !important; }
  .crypto-icons { gap: 20px; }
}


/* =============================================
   SM — ≤576px  (Mobile)
   ============================================= */
@media (max-width: 576px) {

  /* --- Global Padding ---------------------- */
  .container-fluid,
  .container.custom-padding {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* --- Header ------------------------------ */
  .header-pill {
    padding: 8px 15px !important;
    border-radius: 0 !important;
  }
  .brand-logo img { height: 38px !important; }

  /* Mobile menu full width */
  .mobile-menu .nav-link { padding: 13px 15px !important; font-size: 14px !important; }
  .mobile-menu-btns { padding: 12px 15px !important; flex-direction: column !important; }
  .mobile-menu-btns .btn-coin-dark,
  .mobile-menu-btns .btn-explore-border {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
  }

  /* --- Section spacing --------------------- */
  .section        { padding: 36px 0 !important; }
  .section-header { margin-bottom: 24px !important; }
  .section-title  { font-size: 22px !important; }
  .section-subtitle { font-size: 13px !important; }

  /* --- Hero -------------------------------- */
  .hero-section   {
    min-height: 0 !important;
    background-position: 80% center;
    background-size: cover;
  }
  .hero-inner     { min-height: 0 !important; padding: 40px 0 180px !important; }
  .hero-left      { max-width: 100% !important; flex: 0 0 100% !important; }
  .hero-eyebrow   { font-size: 9.5px !important; margin-bottom: 8px !important; }
  .hero-headline  { font-size: 22px !important; line-height: 1.25 !important; margin-bottom: 10px !important; }
  .hero-sub       { font-size: 13px !important; margin-bottom: 16px !important; max-width: 100% !important; }
  .hero-trust-badges {
    flex-direction: column !important;
    gap: 7px !important;
    margin-bottom: 18px !important;
  }
  .trust-badge    { padding: 8px 12px !important; font-size: 11.5px !important; }
  .hero-btns      { flex-direction: column !important; gap: 9px !important; }
  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  .hero-stat-badge {
    bottom: 20px !important;
    left: 15px !important;
    transform: none !important;
    padding: 9px 12px !important;
    gap: 8px !important;
    min-width: 82px !important;
  }
  .hero-stat-badge .stat-num   { font-size: 20px !important; }
  .hero-stat-badge .stat-icon  { width: 30px !important; height: 30px !important; font-size: 13px !important; }
  .hero-stat-badge .stat-label { font-size: 9px !important; }

  /* --- Products ---------------------------- */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .product-card     { padding: 14px 12px 12px !important; }
  .product-name     { font-size: 13.5px !important; }
  .product-dose     { font-size: 11.5px !important; margin-bottom: 8px !important; }
  .product-props li { font-size: 11px !important; }
  .btn-view-details { font-size: 11.5px !important; padding: 7px 12px !important; }
  .product-img      { max-height: 90px !important; margin: 0 auto 10px !important; }

  .product-features { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .feat-item strong { font-size: 12.5px !important; }
  .feat-item span   { font-size: 11px !important; }

  /* Bespoke */
  .bespoke-banner   { padding: 18px 15px !important; }
  .bespoke-icon     { width: 42px !important; height: 42px !important; font-size: 17px !important; }
  .bespoke-text h4  { font-size: 14.5px !important; }
  .bespoke-text p   { font-size: 12.5px !important; }

  /* --- Peptide ----------------------------- */
  .peptide-categories  { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  .peptide-detail-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .cat-pill            { padding: 8px 4px !important; }
  .cat-pill .cat-name  { font-size: 9.5px !important; }
  .peptide-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .peptide-card        { padding: 26px 10px 20px !important; }
  .pc-title            { font-size: 12.5px !important; min-height: 44px !important; margin-bottom: 8px !important; }
  .pc-desc             { font-size: 10.5px !important; }

  /* --- About Section ---------------------- */
  .about-section { padding: 36px 0 0 !important; }
  .about-section .section-title { font-size: 22px !important; }
  .about-body    { font-size: 13px !important; }
  /* Badge is already reset to relative flow from md breakpoint — tune sizing */
  .about-badge {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    max-width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 18px 14px !important;
    gap: 12px !important;
  }
  .badge-title   { font-size: 13.5px !important; }
  .badge-subtitle { font-size: 13px !important; margin-bottom: 10px !important; }
  .badge-desc    { font-size: 12px !important; }
  .about-trust-banner { margin-top: 16px !important; }
  .trust-icon-circle { width: 42px !important; height: 42px !important; font-size: 16px !important; }
  .trust-banner-item {
    gap: 12px !important;
    padding: 14px 10px !important;
    border-right: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  .trust-banner-item:last-child { border-bottom: none !important; }

  /* --- How it works ----------------------- */
  .how-it-works { padding: 36px 0 !important; }
  .how-eyebrow  { font-size: 9.5px !important; }
  .how-it-works .section-subtitle { margin-bottom: 24px !important; }
  .how-left-card {
    max-width: 100% !important;
    margin: 0 0 24px !important;
  }
  /* Image: ensure it doesn't have overlapping badges covering text */
  .how-img-wrap img { border-radius: 12px !important; }
  .how-left-badges {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 14px !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: space-around !important;
    z-index: auto !important;
  }
  .how-badge-item {
    flex: 1 1 28% !important;
    border-right: none !important;
    padding: 0 !important;
    align-items: center !important;
  }
  .badge-text-small { font-size: 10.5px !important; }

  /* Steps - already cleaned up at md */
  .how-step         { padding: 14px 14px !important; gap: 12px !important; }
  .step-icon-wrap   { width: 40px !important; height: 40px !important; font-size: 15px !important; flex-shrink: 0; }
  .step-num-text    { font-size: 17px !important; margin-bottom: 2px !important; }
  .step-title-text  { font-size: 14px !important; margin-bottom: 4px !important; }
  .step-desc-text   { font-size: 12px !important; }

  /* --- Reviews ----------------------------- */
  .reviews-section { padding: 36px 0 !important; }
  .reviews-header  { margin-bottom: 20px !important; }
  .carousel-nav-btn { display: none !important; }
  .rc-header        { padding: 16px 16px 10px !important; }
  .rc-verified-row  { padding: 0 16px 10px !important; }
  .rc-divider       { margin: 0 16px 10px !important; }
  .rc-text          { padding: 0 16px !important; margin-bottom: 16px !important; font-size: 12.5px !important; }
  .rc-footer        { padding: 10px 16px !important; }
  .rc-name          { font-size: 13.5px !important; }

  /* --- Quality ----------------------------- */
  .quality-section  { padding: 36px 0 !important; margin-bottom: 20px !important; }
  .quality-eyebrow  { font-size: 10px !important; }
  .quality-pillar   { padding: 20px 16px !important; }
  .qp-icon-circle   { width: 46px !important; height: 46px !important; }
  .qp-title         { font-size: 16px !important; }
  .qp-desc          { font-size: 12.5px !important; }
  .quality-header   { margin-bottom: 28px !important; }
  /* Make quality bottom boxes full width on mobile */
  .qp-bottom-inner  { width: 100% !important; }
  .heavy-metals-box { width: 100% !important; }

  /* --- Footer ------------------------------ */
  .footer-top      { padding: 26px 0 20px !important; }
  .footer-nav-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .footer-mid      { padding: 22px 0 !important; }
  .footer-mid-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .footer-col-title { font-size: 11.5px !important; }
  .footer-links a   { font-size: 12px !important; }
  .footer-nl-form input { width: 100% !important; font-size: 13px !important; }
  .btn-signup {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
  }
  .footer-bottom    { padding: 14px 0 !important; }
  .fbb-copy         { font-size: 11px !important; }
  .fbb-badges       { flex-wrap: wrap !important; gap: 10px !important; }
  .fbb-badge        { font-size: 11px !important; padding: 5px 10px !important; }
  .crypto-icons     { gap: 18px !important; }
}


/* =============================================
   XS — ≤400px  (Small mobile)
   ============================================= */
@media (max-width: 400px) {

  .container-fluid,
  .container.custom-padding {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .header-pill { padding: 8px 12px !important; }
  .brand-logo img { height: 34px !important; }

  .section        { padding: 30px 0 !important; }
  .section-title  { font-size: 20px !important; }
  .section-subtitle { font-size: 12.5px !important; }

  /* Hero */
  .hero-inner { padding: 36px 0 160px !important; }
  .hero-headline { font-size: 19px !important; }
  .hero-sub      { font-size: 12.5px !important; }

  /* Products — single column */
  .products-grid {
    grid-template-columns: 1fr !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 12px !important;
  }

  /* Peptide */
  .peptide-categories {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .peptide-grid {
    grid-template-columns: 1fr !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* How step */
  .how-step        { padding: 12px 12px !important; gap: 10px !important; }
  .step-title-text { font-size: 13.5px !important; }
  .step-desc-text  { font-size: 11.5px !important; }

  /* Footer */
  .footer-nav-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .footer-col-title { font-size: 11px !important; }
  .footer-links a   { font-size: 11.5px !important; }
}


/* =============================================
   PRINT
   ============================================= */
@media print {
  .top-bar,
  .header-main,
  .navbar-hamburger,
  .mobile-menu,
  .carousel-nav-btn,
  .footer { display: none !important; }
  body    { font-size: 12pt; color: #000; }
  .section { padding: 20pt 0; }
}

/* =============================================
   ABOUT SECTION — Background image text readability
   On mobile the columns stack; the bg image can make text hard to read.
   Add a semi-transparent white overlay on the left text column.
   ============================================= */
@media (max-width: 768px) {
  .about-left {
    background: rgba(255, 255, 255, 0.88);
    border-radius: 12px;
    padding: 20px !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

@media (max-width: 576px) {
  .about-left {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    padding: 18px !important;
  }
}

/* =============================================
   HOW IT WORKS — Stack columns properly on mobile
   The .how-inner has display:flex in style.css which overrides Bootstrap
   grid. Force column stacking at tablet portrait and below.
   ============================================= */
@media (max-width: 992px) {
  .how-inner.row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .how-inner.row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* =============================================
   TARGETED FIXES — BATCH 2
   ============================================= */

/* ── 1. HERO BANNER — text visibility on mobile ──────────────
   On small screens the background image is very dark/busy.
   Add a gradient overlay via pseudo-element so white text is
   always legible. We target the ::before of hero-section which
   is already position:relative.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(5, 15, 35, 0.72) 0%,
      rgba(5, 15, 35, 0.45) 60%,
      rgba(5, 15, 35, 0.10) 100%
    );
    z-index: 0;
    pointer-events: none;
  }
  .hero-inner { position: relative; z-index: 1; }
}

@media (max-width: 576px) {
  .hero-section::before {
    background: linear-gradient(
      to bottom,
      rgba(5, 15, 35, 0.70) 0%,
      rgba(5, 15, 35, 0.60) 60%,
      rgba(5, 15, 35, 0.30) 100%
    );
  }
}

/* ── 2. PRODUCT FEATURES — 2×2 grid with centre divider ─────
   Desktop: 4 items in a row with border-right separators.
   Mobile: 2 items per row, single vertical divider in the middle,
   horizontal rule between rows.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .product-features {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    margin-bottom: 36px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .feat-item {
    border-right: none !important;
    padding-right: 0 !important;
    padding: 16px 14px !important;
    max-width: 100% !important;
    border-bottom: 1px solid #e2e8f0 !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  /* Vertical centre divider: right column items get a left border */
  .feat-item:nth-child(2n) {
    border-left: 1px solid #e2e8f0 !important;
  }
  /* Remove bottom border from last row (items 3 & 4) */
  .feat-item:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
  /* Override the .border-0 utility so grid works */
  .feat-item.border-0 {
    border-right: none !important;
    border-left: none !important;
    border-bottom: none !important;
  }
  /* Last row right column: also no bottom */
  .feat-item:nth-child(4) {
    border-left: 1px solid #e2e8f0 !important;
    border-bottom: none !important;
  }
  .feat-icon { font-size: 24px !important; }
  .feat-item strong { font-size: 12.5px !important; margin-bottom: 2px !important; }
  .feat-item span { font-size: 11px !important; }
}

/* ── 3. PRODUCTS GRID — max-width 100% on mobile ────────────  */
@media (max-width: 992px) {
  .products-grid {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── 4. PEPTIDE GRID — max-width 100% on mobile ─────────────  */
@media (max-width: 992px) {
  .peptide-grid {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── 5. HOW-IMG-WRAP — reduce right padding/space ───────────
   The image container has no explicit right padding but the
   Bootstrap col gutter adds space. We tighten it specifically.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .how-left-card {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
  .how-img-wrap {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  /* Tighten col gutter on how-section left column */
  .how-inner > .col-12:first-child {
    padding-right: 0 !important;
  }
}

@media (max-width: 576px) {
  .how-img-wrap img {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
  .how-img-wrap {
    width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── 6. QUALITY PILLARS — smaller cards on mobile ───────────  */
@media (max-width: 768px) {
  .quality-pillars {
    gap: 12px !important;
  }
  .quality-pillar {
    border-radius: 12px !important;
  }
  .qp-top {
    padding: 16px 16px 12px !important;
  }
  .qp-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }
  .qp-icon-circle i,
  .qp-icon-circle svg {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
  }
  .qp-title {
    font-size: 14px !important;
    margin-bottom: 4px !important;
  }
  .qp-desc {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }
  .qp-bottom {
    padding: 12px 14px !important;
    min-height: 70px !important;
  }
  .qp-bottom-inner {
    padding: 10px 14px !important;
    width: 70% !important;
  }
  .heavy-metals-box {
    padding: 8px 12px !important;
    width: 70% !important;
  }
}

@media (max-width: 576px) {
  .quality-pillars {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .qp-top { padding: 14px 14px 10px !important; }
  .qp-bottom-inner { width: 60% !important; }
  .heavy-metals-box { width: 60% !important; }
}

/* ── 7. FLINK-ARROW — hide on mobile ────────────────────────
   Remove the › arrow from footer links on responsive.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .flink-arrow {
    display: none !important;
  }
}

/* ============================================
   CONTACT US PAGE - RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
  .cu-form-grid { grid-template-columns: 1fr; }
  .cu-faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
  .cu-hero-inner { flex-wrap: wrap; padding: 50px 0; gap: 30px; }
  .cu-hero-left,
  .cu-hero-right { flex: 0 0 100%; max-width: 100%; }
  .cu-hero-right { order: -1; }
  .cu-hero-img { max-width: 220px; }
  .cu-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .cu-form-card,
  .cu-info-card { padding: 28px; }
}

@media (max-width: 768px) {
  .cu-hero-title { font-size: clamp(26px, 5vw, 36px); }
  .cu-hero-sub { font-size: 14px; max-width: 100%; }
  .cu-form-section { padding: 44px 0; }
  .cu-form-row { grid-template-columns: 1fr; gap: 14px; }
  .cu-map-frame { height: 280px; }
  .cu-map-card { position: static; max-width: 100%; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border); }
  .cu-trust-section { padding: 0 0 44px; }
  .cu-trust-grid { padding: 28px 18px; }
  .cu-faq-section { padding: 0 0 56px; }
  .cu-faq-item { padding: 16px 42px 16px 16px; font-size: 13.5px; }
}

@media (max-width: 576px) {
  .cu-hero-inner { padding: 40px 0; }
  .cu-hero-img { max-width: 170px; }
  .cu-form-card,
  .cu-info-card { padding: 20px; border-radius: var(--radius-md); }
  .cu-card-title { font-size: 19px; }
  .cu-trust-grid { grid-template-columns: 1fr; gap: 16px; }
  .cu-info-item { gap: 12px; }
  .cu-info-icon { width: 38px; height: 38px; font-size: 14px; }
  .cu-btn-submit { width: 100%; }
}

@media (max-width: 400px) {
  .cu-hero-title { font-size: 24px; }
  .cu-faq-item { font-size: 13px; padding: 14px 38px 14px 14px; }
}

/* ============================================
   PRODUCT DETAIL PAGE - RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
  .pdp-main-grid { gap: 32px; }
  .pdp-desc-grid { gap: 32px; }
  .pdp-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .pdp-related-card { flex: 0 0 calc(33.333% - 12px); }
}

@media (max-width: 992px) {
  .pdp-main-grid { grid-template-columns: 1fr; gap: 32px; }
  .pdp-gallery { position: static; }
  .pdp-img-main-wrap { min-height: 300px; }
  .pdp-desc-grid { grid-template-columns: 1fr; gap: 32px; }
  .pdp-tab-btn { font-size: 13px; padding: 12px 14px; }
  .pdp-related-card { flex: 0 0 calc(50% - 9px); }
  .pdp-nl-inner { gap: 32px; }
  .pdp-coa-block { gap: 20px; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
  .pdp-main-section { padding: 32px 0 28px; }
  .pdp-trust-bar { padding: 20px 0; }
  .pdp-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pdp-tabs-section { padding: 32px 0 16px; }
  .pdp-tab-btn { padding: 10px 12px; font-size: 12.5px; }
  .pdp-tab-btn i { display: none; }
  .pdp-apps-grid { gap: 10px; }
  .pdp-app-icon { width: 44px; height: 44px; font-size: 15px; }
  .pdp-related-section { padding: 36px 0; }
  .pdp-coa-metrics { gap: 20px; }
  .pdp-newsletter-section { padding: 44px 0; }
  .pdp-nl-form { flex-direction: column; }
  .pdp-nl-btn { width: 100%; }
  .pdp-reviews-summary .pdp-review-score { flex-wrap: wrap; }
  .pdp-review-date { margin-left: 0; }
}

@media (max-width: 576px) {
  .pdp-product-title { font-size: 28px; }
  .pdp-price { font-size: 26px; }
  .pdp-trust-grid { grid-template-columns: 1fr; }
  .pdp-tab-nav { gap: 0; }
  .pdp-tab-btn { padding: 10px 10px; font-size: 12px; }
  .pdp-related-card { flex: 0 0 calc(100% - 0px); }
  .pdp-thumb { width: 60px; height: 60px; }
  .pdp-spec-table { font-size: 12px; }
  .pdp-title-row { flex-wrap: wrap; }
  .pdp-lightbox { padding: 20px; }
  .pdp-lightbox-prev { left: 0; }
  .pdp-lightbox-next { right: 0; }
  .pdp-lightbox-close { top: -44px; right: 0; }
  .pdp-payment-row { gap: 8px; }
  .pdp-spec-key, .pdp-spec-val { padding: 8px 10px; }
  .pdp-coa-block { padding: 18px; }
  .pdp-coa-val { font-size: 18px; }
  .pdp-btn-cart, .pdp-btn-buy { font-size: 14px; padding: 13px 18px; }
  .pdp-strength-btn { padding: 7px 16px; font-size: 13px; }
  .pdp-review-top { gap: 8px; }
}

@media (max-width: 400px) {
  .pdp-product-title { font-size: 24px; }
  .pdp-price { font-size: 22px; }
  .pdp-tab-btn { padding: 8px 8px; font-size: 11.5px; }
  .pdp-apps-grid { gap: 8px; }
}

/* ============================================
   HOMEPAGE TRUST (E-E-A-T) + FAQ - RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
  .eeat-pillars { grid-template-columns: repeat(2, 1fr); }
  .coa-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .eeat-section { padding: 50px 0 44px; }
  .reviewer-card { padding: 22px; gap: 16px; }
  .hp-faq-section { padding: 50px 0; }
  .coa-section { padding: 50px 0; }
  .coa-grid { padding: 20px; }
  .coa-card { padding: 20px; }
  .coa-download-btn { width: 100%; }
  .blog-section { padding: 50px 0; }
}

@media (max-width: 576px) {
  .eeat-pillars { grid-template-columns: 1fr; }
  .site-disclaimer-box { flex-direction: column; padding: 18px; }
  .reviewer-card { flex-direction: column; align-items: flex-start; text-align: left; }
  .reviewer-meta { white-space: normal; }
  .coa-stats-grid { grid-template-columns: 1fr; }
  .coa-batch-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   FINAL POLISH PASS (loads last — wins the cascade)
   ========================================================================= */

/* ---- Breadcrumbs: consistent, readable on dark heroes everywhere ---- */
.cu-hero .cu-breadcrumb a,
.cart-hero .cu-breadcrumb a,
.pdp-hero-breadcrumb a { color: rgba(255, 255, 255, 0.82); opacity: 1; text-decoration: none; font-weight: 600; }
.cu-hero .cu-breadcrumb a:hover,
.cart-hero .cu-breadcrumb a:hover { color: #fff; }
.cu-hero .cu-breadcrumb .cu-breadcrumb-current,
.cu-hero .cu-breadcrumb .crumb-current,
.cart-hero .cu-breadcrumb .crumb-current { color: #c4b5fd; font-weight: 800; }
.cu-breadcrumb { letter-spacing: 0.01em; }

/* ---- Category / shop hero: tighter, balanced, no dead space ---- */
.pdp-cu-hero .cu-hero-inner { min-height: 0; padding: 44px 0 40px; }
.pdp-cu-hero .cu-hero-title { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 10px; }
.pdp-cu-hero .cu-hero-sub { margin-bottom: 18px; }
.pdp-cu-hero .cu-hero-divider { margin-bottom: 14px; }
.pdp-cu-hero .cu-hero-img { max-width: 240px; }
.pdp-cu-hero { background: linear-gradient(120deg, rgba(9, 15, 28, 0.94) 45%, rgba(19, 16, 48, 0.82) 100%), url('../images/peptides_banner.png') center/cover no-repeat; }

/* ---- Cart hero: strong title, clear hierarchy ---- */
.cart-hero { background: linear-gradient(120deg, rgba(9, 15, 28, 0.95) 40%, rgba(26, 20, 64, 0.88) 100%), url('../images/peptides_banner.png') center/cover no-repeat; }
.cart-hero-inner { padding: 44px 0 38px; gap: 10px; }
.cart-hero-title { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; }

/* ---- Cart items: composed rows ---- */
.cart-item-card { grid-template-columns: 84px minmax(0, 1fr) auto auto; column-gap: 20px; }
.cart-item-name a { text-decoration: none; }
.cart-item-qty .cart-qty-ctrl { border: 1.5px solid var(--border, #e2e5ee); border-radius: 10px; overflow: hidden; }

/* ---- Add-on cards: never truncate mid-word, compact action ---- */
.pa-addon-name { white-space: normal; word-break: normal; overflow-wrap: anywhere; }
.pa-addon-btn { padding: 8px 11px; }
.pa-addons-cart .pa-addon-card { padding: 11px 12px; gap: 10px; }
.pa-addons-cart .pa-addon-thumb, .pa-addons-cart .pa-addon-thumb img { width: 44px; height: 44px; }

/* ---- Checkout: order-review wrapper (fragment root) ---- */
.pa-review.woocommerce-checkout-review-order-table { display: block; border: none; padding: 0; margin: 0; }
.pa-review .pa-review-items li { list-style: none; }
.pa-review .pa-review-items li::before { display: none; content: none; }

/* Safety net: prose typography must never restyle Woo UI embedded in content */
.pa-prose .woocommerce a { text-decoration: none; font-weight: inherit; }
.pa-prose .woocommerce ul { padding-left: 0; }
.pa-prose .woocommerce ul li::before { display: none; content: none; }

/* ---- Contact page (premium form) ---- */
.pa-ct-section { padding: 52px 0 70px; background: var(--light-bg, #f8f9ff); }
.pa-ct-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 26px; align-items: start; }
.pa-ct-card { background: #fff; border: 1px solid var(--border, #e2e5ee); border-radius: 18px; padding: 30px; box-shadow: 0 10px 34px rgba(13, 27, 42, 0.06); }
.pa-ct-eyebrow { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary, #6a3de8); margin-bottom: 8px; }
.pa-ct-title { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--text-dark, #1a1a2e); margin: 0 0 6px; letter-spacing: -0.01em; }
.pa-ct-sub { font-size: 14px; color: var(--text-muted, #777); line-height: 1.7; margin: 0 0 22px; }

/* CF7 controls in premium style */
.pa-ct-form .pa-ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pa-ct-form p { margin: 0 0 14px; }
.pa-ct-form label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-dark, #1a1a2e); margin-bottom: 6px; }
.pa-ct-form .wpcf7-form-control-wrap { display: block; }
.pa-ct-form input[type="text"],
.pa-ct-form input[type="email"],
.pa-ct-form input[type="tel"],
.pa-ct-form select,
.pa-ct-form textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-size: 14.5px;
  font-weight: 500;
  font-family: var(--font-main);
  color: var(--text-dark, #1a1a2e);
  background: #fafbfe;
  border: 1.5px solid #dfe3ee;
  border-radius: 10px;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.pa-ct-form textarea { height: auto; min-height: 100px; max-height: 100px; padding: 13px 16px; resize: vertical; }
.pa-ct-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236a3de8' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
.pa-ct-form input:focus, .pa-ct-form select:focus, .pa-ct-form textarea:focus { outline: none; background: #fff; border-color: var(--primary, #6a3de8); box-shadow: 0 0 0 4px rgba(106, 61, 232, 0.12); }
.pa-ct-form input::placeholder, .pa-ct-form textarea::placeholder { color: #a6adbf; font-weight: 400; }
.pa-ct-submit-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.pa-ct-form .wpcf7-submit {
  display: inline-flex; align-items: center; gap: 9px;
  height: 50px; padding: 0 30px;
  background: var(--primary, #6a3de8); color: #fff;
  border: none; border-radius: 10px;
  font-size: 14.5px; font-weight: 800; font-family: var(--font-main);
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.pa-ct-form .wpcf7-submit:hover { background: var(--primary-dark, #5228d4); transform: translateY(-1px); }
.pa-ct-privacy { font-size: 12.5px; color: var(--text-muted, #777); display: inline-flex; align-items: center; gap: 7px; }
.pa-ct-privacy i { color: #0c8b82; }
.pa-ct-form .wpcf7-not-valid { border-color: #ef8a8a !important; background: #fffafa !important; }
.pa-ct-form .wpcf7-not-valid-tip { font-size: 12px; color: #dc2626; margin-top: 5px; }
.pa-ct-form .wpcf7-response-output { margin: 16px 0 0; padding: 13px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; border: 1px solid var(--border, #e2e5ee); }
.pa-ct-form .wpcf7 form.sent .wpcf7-response-output { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.pa-ct-form .wpcf7 form.invalid .wpcf7-response-output,
.pa-ct-form .wpcf7 form.failed .wpcf7-response-output { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.pa-ct-form .wpcf7-spinner { margin: 0 0 0 10px; }

/* Contact rail */
.pa-ct-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.pa-ct-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.pa-ct-info-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border, #e2e5ee); }
.pa-ct-info-list li:last-child { border-bottom: none; }
.pa-ct-info-ic { flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: #f0edfd; color: var(--primary, #6a3de8); border-radius: 11px; font-size: 16px; }
.pa-ct-info-list strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--text-dark, #1a1a2e); margin-bottom: 2px; }
.pa-ct-info-list a, .pa-ct-info-list span.pa-ct-val { font-size: 13.5px; color: var(--text-body, #444); text-decoration: none; }
.pa-ct-info-list a:hover { color: var(--primary, #6a3de8); }
.pa-ct-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-ct-topic { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; background: var(--light-bg, #f8f9ff); border: 1px solid var(--border, #e2e5ee); border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--text-body, #444); }
.pa-ct-topic i { color: var(--primary, #6a3de8); font-size: 11px; }
.pa-ct-compliance { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 14px; padding: 16px 18px; display: flex; gap: 12px; }
.pa-ct-compliance i { color: #ea580c; margin-top: 2px; }
.pa-ct-compliance p { margin: 0; font-size: 12.5px; line-height: 1.65; color: #7c2d12; }

@media (max-width: 900px) {
  .pa-ct-grid { grid-template-columns: 1fr; }
  .pa-ct-rail { position: static; }
  .pa-ct-form .pa-ct-row { grid-template-columns: 1fr; gap: 0; }
}

/* Portrait vial renders tall — cap hero image height so the band stays tight */
.pdp-cu-hero .cu-hero-img { max-height: 300px; width: auto; max-width: none; }
.pdp-cu-hero .cu-hero-inner { min-height: 0; }

/* Cart hero title was inheriting body ink — force hero typography */
.cart-hero-title {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

/* Add-on names: natural word wrap (no mid-word breaks), tidy two-row card */
.pa-addon-name { overflow-wrap: normal; word-break: keep-all; hyphens: none; font-size: 12.5px; line-height: 1.3; }
.pa-addons-cart .pa-addon-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; }
.pa-addons-cart .pa-addon-info { padding-right: 4px; }

/* Contact page: restored editorial content below the form, in a clean card grid */
.pa-ct-info-section { margin-top: 28px; background: #fff; border: 1px solid var(--border, #e2e5ee); border-radius: 18px; padding: 34px 36px; box-shadow: 0 10px 34px rgba(13,27,42,.05); }
.pa-ct-info-head { text-align: center; max-width: 640px; margin: 0 auto 22px; }
.pa-ct-info-head .pa-ct-eyebrow { display: inline-block; }
.pa-ct-info-head .pa-ct-title { font-size: 26px; }
.pa-ct-prose { font-size: 14.5px; line-height: 1.8; color: var(--text-body, #444); }
.pa-ct-prose > p:first-of-type { font-size: 15.5px; color: var(--text-dark, #1a1a2e); }
.pa-ct-prose h2 { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--text-dark, #1a1a2e); margin: 26px 0 12px; padding-left: 13px; border-left: 4px solid var(--primary, #6a3de8); }
.pa-ct-prose p { margin: 0 0 14px; }
.pa-ct-prose ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.pa-ct-prose ul li { position: relative; padding-left: 26px; font-size: 14px; color: var(--text-body, #444); }
.pa-ct-prose ul li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 1px; color: var(--primary, #6a3de8); font-size: 12px; }
@media (max-width: 640px) { .pa-ct-info-section { padding: 24px 20px; } .pa-ct-prose ul { grid-template-columns: 1fr; } }

/* =========================================================================
   PDP refinements (user requests): full-width tabs, heading recolor,
   compact buy-box spacing
   ========================================================================= */

/* 1) All tab content is full width */
.pdp-desc-solo,
.pdp-tab-content-inner,
.pdp-specs-inner { max-width: none !important; }

/* 2) Prose headings: h2 in brand purple, h3 in black — no left border */
.pdp-prose h2 {
  color: var(--primary, #6a3de8) !important;
  border-left: none !important;
  padding-left: 0 !important;
}
.pdp-prose h3 {
  color: #14141f !important;
  border-left: none !important;
  padding-left: 0 !important;
  font-weight: 700;
}
.pdp-prose h2 + h3 { margin-top: 14px; }

/* 3) Compact buy-box vertical rhythm (remove the large empty gaps) */
.pdp-trustchip-row { margin-bottom: 10px; }
.pdp-title-row { margin-bottom: 8px; }
.pdp-meta-row-v3 { margin-bottom: 12px; }
.pdp-price-row-v2 { margin: 0 0 10px; }
.pdp-price-v2 { margin: 0; }
.pdp-overview-wrap { margin: 0 0 14px; }
.pdp-overview-intro { margin: 0; }

/* Buy-box: eliminate the tall line-height around the price and the residual
   whitespace above/below it — user has flagged this repeatedly. */
.pdp-price-v2 { line-height: 1 !important; font-size: 32px !important; }
.pdp-price-row-v2 { margin: 2px 0 !important; padding: 0 !important; }
.pdp-meta-row-v3 { margin-bottom: 6px !important; }
.pdp-overview-wrap { margin: 6px 0 12px !important; }
.pdp-overview-intro p { margin: 0 !important; padding: 0 !important; }
.pdp-overview-intro p + p { margin-top: 6px !important; }
.pdp-overview-toggle { margin-top: 4px !important; }

/* =========================================================================
   CONTACT — new hero (no giant peptide vial)
   ========================================================================= */
.pa-ct-hero {
  background:
    radial-gradient(900px 340px at 90% -20%, rgba(124,82,239,.35), transparent 60%),
    radial-gradient(700px 260px at 10% 110%, rgba(12,139,130,.18), transparent 60%),
    linear-gradient(135deg, #0b1523 0%, #1a1440 55%, #2a1a5e 100%);
  padding: 56px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pa-ct-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
  pointer-events: none;
}
.pa-ct-hero > .container { position: relative; z-index: 1; }
.pa-ct-hero-crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 18px; }
.pa-ct-hero-crumb a { color: #c4b5fd; font-weight: 700; text-decoration: none; }
.pa-ct-hero-crumb a:hover { color: #fff; }
.pa-ct-hero-crumb span:not(:first-child) { color: rgba(255,255,255,.35); }
.pa-ct-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(196,181,253,.35);
  border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #c4b5fd;
  background: rgba(124,82,239,.14);
  margin-bottom: 16px;
}
.pa-ct-hero-dot { width: 7px; height: 7px; border-radius: 50%; background: #7c52ef; }
.pa-ct-hero-title { font-family: var(--font-head); font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: #fff; margin: 0 0 14px; }
.pa-ct-hero-lede { font-size: 16px; line-height: 1.7; color: #cbd5e1; max-width: 620px; margin: 0 auto 26px; }
.pa-ct-hero-chips { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pa-ct-hero-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  font-size: 13.5px; font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: all .2s;
  text-decoration: none;
}
.pa-ct-hero-chip:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.pa-ct-hero-chip i { color: #c4b5fd; font-size: 12.5px; }

/* Nudge the form section up under the tighter hero */
.pa-ct-section { padding-top: 40px; }

/* =========================================================================
   Category filter list — premium treatment (Screen 2)
   ========================================================================= */
.filters-card .filter-cat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.filters-card .filter-cat-list > li { margin: 0; }
.filters-card .filter-cat-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-body, #444);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.18s ease;
  position: relative;
}
.filters-card .filter-cat-link::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d6ccf5;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.filters-card .filter-cat-link:hover {
  background: #f7f5ff;
  color: var(--primary, #6a3de8);
  border-color: transparent;
}
.filters-card .filter-cat-link:hover::before { background: var(--primary, #6a3de8); transform: scale(1.3); }
.filters-card .filter-cat-link.is-active {
  background: #f0edfd;
  color: var(--primary-dark, #4c1d95);
  font-weight: 800;
  border-color: #d6ccf5;
  box-shadow: inset 3px 0 0 var(--primary, #6a3de8);
  padding-left: 15px;
}
.filters-card .filter-cat-link.is-active::before { background: var(--primary, #6a3de8); box-shadow: 0 0 0 3px rgba(106, 61, 232, 0.18); }
.filters-card .filter-cat-count {
  margin-left: auto;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef0f6;
  color: var(--text-muted, #777);
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 999px;
  transition: all 0.18s ease;
}
.filters-card .filter-cat-link:hover .filter-cat-count { background: #e2dcf7; color: var(--primary, #6a3de8); }
.filters-card .filter-cat-link.is-active .filter-cat-count { background: var(--primary, #6a3de8); color: #fff; }
.filters-card .filter-group-title {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--text-muted, #777);
  margin: 6px 4px 12px;
}

/* =========================================================================
   Sitewide footer CTA (Screen 3)
   ========================================================================= */
.pa-foot-cta {
  background: linear-gradient(120deg, #6a3de8 0%, #5228d4 60%, #3b1a8f 100%);
  padding: 34px 0;
}
.pa-foot-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.pa-foot-cta-copy { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 260px; }
.pa-foot-cta-ic {
  width: 56px; height: 56px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  color: #fff;
  font-size: 22px;
}
.pa-foot-cta h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.pa-foot-cta p { font-size: 13.5px; color: rgba(255, 255, 255, 0.85); margin: 0; line-height: 1.6; }
.pa-foot-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  background: #fff;
  color: var(--primary-dark, #4c1d95);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s;
  font-family: var(--font-main);
}
.pa-foot-cta-btn:hover { background: #f0edfd; color: var(--primary, #6a3de8); transform: translateY(-1px); }

/* =========================================================================
   Mobile polish (Screen 4)
   Cart icon + hamburger BOTH visible; tighten hero/buy-box/cards on phones.
   ========================================================================= */
@media (max-width: 991px) {
  /* Header actions row: keep cart + search icons visible, add hamburger */
  .header-actions { display: flex !important; align-items: center; gap: 6px; }
  .header-actions .ha-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; }
  .header-actions .cart-btn { position: relative; }
  .header-actions .cart-badge { position: absolute; top: -2px; right: -2px; }
  /* Hide the account icon on mobile to keep the row tight — keep search + cart */
  .header-actions .ha-btn[aria-label="Account"] { display: none !important; }
  .header-actions .navbar-hamburger { margin-left: 4px; }

  /* Contain the header row */
  .header-inner { flex-wrap: nowrap; }
  .brand-logo-text .brand-text-main { font-size: 17px; }
  .brand-logo-text .brand-text-sub { font-size: 10px; letter-spacing: 0.24em; }
  .brand-icon { width: 40px; height: 40px; font-size: 16px; }

  /* Top bar: trim ornament on small screens */
  .top-bar .tb-mid { display: none; }
  .top-bar .tb-left, .top-bar .tb-right { font-size: 11.5px; }
  .top-bar .tb-right a { display: inline-flex; align-items: center; }
}

@media (max-width: 640px) {
  .top-bar { padding: 4px 0; }
  .top-bar .top-bar-inner { flex-wrap: wrap; gap: 4px 12px; }

  /* Category hero */
  .pdp-cu-hero .cu-hero-inner { padding: 32px 0 28px; }
  .pdp-cu-hero .cu-hero-title { font-size: 26px; }
  .pdp-cu-hero .cu-hero-sub { font-size: 13.5px; }
  .pdp-cu-hero .cu-hero-right { display: none; }
  .pdp-cu-hero .cu-hero-left, .pdp-cu-hero .cu-hero-right { flex: 0 0 100%; max-width: 100%; }

  /* Stats strip: 2×2 with tighter padding */
  .cat-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cat-stat-item { padding: 12px; }
  .cat-stat-icon { width: 40px; height: 40px; }

  /* Sitewide footer CTA */
  .pa-foot-cta { padding: 24px 0; }
  .pa-foot-cta-inner { flex-direction: column; align-items: stretch; text-align: left; gap: 16px; }
  .pa-foot-cta-copy { min-width: 0; }
  .pa-foot-cta h3 { font-size: 17px; }
  .pa-foot-cta-btn { justify-content: center; width: 100%; }

  /* Product cards: 1 per row on very small phones, tighter chrome */
  .products-grid, .shop-products-grid, .products-grid-home { grid-template-columns: 1fr; gap: 14px; }
  .product-card { padding: 14px; }
  .product-img { max-height: 200px; }

  /* PDP buy-box */
  .pdp-info { padding: 20px 4px; }
  .pdp-price-v2 { font-size: 28px !important; }
  .pdp-product-title { font-size: 26px; line-height: 1.2; }
  .pdp-trustchip-row { gap: 6px; }
  .pdp-trustchip { font-size: 10.5px; padding: 4px 10px; }

  /* PDP tabs — allow horizontal scroll instead of squeezing */
  .pdp-tabs-row { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pdp-tabs-row::-webkit-scrollbar { display: none; }
  .pdp-tab-btn { white-space: nowrap; padding: 12px 14px; font-size: 12.5px; }

  /* Contact hero */
  .pa-ct-hero { padding: 40px 0 44px; }
  .pa-ct-hero-title { font-size: 26px; }
  .pa-ct-hero-lede { font-size: 14.5px; }
  .pa-ct-hero-chips { flex-direction: column; align-items: stretch; }
  .pa-ct-hero-chip { justify-content: center; width: 100%; }

  /* Footer link grid: 2 columns on phones so it stays readable */
  .pa-foot-cols-grid { grid-template-columns: 1fr 1fr !important; }
  .pa-foot-col-contact { grid-column: 1 / -1 !important; }
  .pa-foot-band-grid { grid-template-columns: 1fr; gap: 24px; padding: 30px 0; }
  .pa-foot-trust-inner { flex-direction: column; align-items: stretch; text-align: left; gap: 14px; }
  .pa-foot-trust-cta { justify-content: center; }
  .pa-foot-bottom-inner { justify-content: center; text-align: center; }

  /* Cart page: single column, action row wraps */
  .cart-main-layout { grid-template-columns: 1fr; gap: 20px; }
  .cart-summary-col { position: static; }

  /* Contact form 2-col becomes 1-col */
  .pa-ct-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 400px) {
  .brand-logo-text .brand-text-sub { display: none; }
  .header-actions .ha-btn { width: 36px; height: 36px; }
  .cat-stats-grid { grid-template-columns: 1fr; }
}

/* Shop/category hero uses the contact-style band but does NOT sit above a form —
   restore original section spacing rules where needed. */
.pa-cat-hero + .cat-stats { padding-top: 32px; }
.pa-cat-hero .pa-ct-hero-title { font-size: clamp(28px, 4vw, 42px); }

/* =========================================================================
   AUTHOR / REVIEWER card (used on PDP + category pages)
   ========================================================================= */
.pa-author-card {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 22px 24px;
	margin: 32px 0 8px;
	background: linear-gradient(135deg, #f7f5ff 0%, #eef0ff 100%);
	border: 1px solid #d6ccf5;
	border-radius: 14px;
}
.pa-author-avatar {
	flex-shrink: 0;
	width: 56px; height: 56px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--primary, #6a3de8);
	color: #fff;
	border-radius: 50%;
	font-family: var(--font-head);
	font-size: 18px; font-weight: 800;
	letter-spacing: 0.02em;
}
.pa-author-body { min-width: 0; }
.pa-author-label {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 11.5px; font-weight: 800;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--primary, #6a3de8);
	margin-bottom: 4px;
}
.pa-author-label i { font-size: 12px; }
.pa-author-name {
	font-family: var(--font-head);
	font-size: 17px; font-weight: 800;
	color: var(--text-dark, #1a1a2e);
	margin: 0 0 2px;
	line-height: 1.3;
}
.pa-author-cred {
	color: var(--primary-dark, #4c1d95);
	font-weight: 700;
	font-size: 14px;
}
.pa-author-role {
	font-size: 12.5px; font-weight: 600;
	color: var(--text-muted, #6b6d7a);
	margin: 0 0 8px;
}
.pa-author-note {
	font-size: 13.5px; line-height: 1.6;
	color: var(--text-body, #444);
	margin: 0 0 8px;
}
.pa-author-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 800;
	color: var(--primary, #6a3de8);
	text-decoration: none;
}
.pa-author-link:hover { color: var(--primary-dark, #4c1d95); text-decoration: underline; }
.pa-author-link i { font-size: 11px; }

.pa-author-compact {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12.5px; color: var(--text-muted, #777);
	padding: 8px 12px; background: #f7f5ff; border-radius: 999px;
	border: 1px solid #e2dcf7;
}
.pa-author-compact-ic {
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--primary, #6a3de8); color: #fff;
	border-radius: 50%; font-size: 10px; font-weight: 800;
}
.pa-author-compact strong { color: var(--text-dark, #1a1a2e); font-weight: 700; }
.pa-author-compact a { color: var(--primary, #6a3de8); font-weight: 700; text-decoration: none; margin-left: 4px; }
.pa-author-compact a:hover { text-decoration: underline; }

/* Category page long-form intro block (below hero, above filters) */
.pa-cat-intro {
	padding: 40px 0 20px;
	background: #fff;
}
.pa-cat-intro .pa-cat-intro-inner {
	max-width: 900px; margin: 0 auto;
}

@media (max-width: 640px) {
	.pa-author-card { flex-direction: column; padding: 18px; margin: 20px 0; }
	.pa-author-avatar { width: 48px; height: 48px; font-size: 16px; }
}

/* =========================================================================
   Mobile fix: 4-column features pill collapses to a grid instead of cramming
   ========================================================================= */
@media (max-width: 900px) {
	.features-pill {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 14px 20px;
		padding: 18px 16px !important;
		align-items: start;
	}
	.features-pill .fp-divider { display: none !important; }
	.features-pill .fp-item {
		display: flex;
		align-items: center;
		gap: 10px;
		text-align: left;
		flex-direction: row !important;
	}
	.features-pill .fp-icon { flex-shrink: 0; }
	.features-pill .fp-text { display: flex; flex-direction: column; min-width: 0; }
	.features-pill .fp-text strong { font-size: 13.5px; line-height: 1.25; }
	.features-pill .fp-text span { font-size: 11.5px; line-height: 1.35; color: var(--text-muted, #777); }
}
@media (max-width: 480px) {
	.features-pill { grid-template-columns: 1fr; }
}

/* =========================================================================
   Contextual internal links (.pa-ilink) — readable, not shouty
   ========================================================================= */
.pa-ilink {
	color: var(--primary, #6a3de8);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	text-decoration-color: rgba(106, 61, 232, .38);
	transition: color .15s, text-decoration-color .15s;
}
.pa-ilink:hover,
.pa-ilink:focus-visible {
	color: var(--primary-dark, #4c1d95);
	text-decoration-color: currentColor;
}
.pa-ilink:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(106, 61, 232, .25); border-radius: 3px; }

/* Never let an auto link restyle a bullet row's check icon */
.pa-prose li .pa-ilink, .pdp-prose li .pa-ilink { font-weight: 600; }

/* =========================================================================
   View Specifications CTA (jumps to the Specifications tab)
   ========================================================================= */
.pdp-spec-jump {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 22px 0 4px;
	padding: 12px 22px;
	font-family: var(--font-main);
	font-size: 14px;
	font-weight: 800;
	color: var(--primary, #6a3de8);
	background: #f7f5ff;
	border: 1.5px solid #d6ccf5;
	border-radius: 10px;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.pdp-spec-jump:hover {
	background: var(--primary, #6a3de8);
	border-color: var(--primary, #6a3de8);
	color: #fff;
	transform: translateY(-1px);
}
.pdp-spec-jump:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(106, 61, 232, .22); }
.pdp-spec-jump i { font-size: 13px; }

/* =========================================================================
   Editorial prose — restore paragraph rhythm
   -------------------------------------------------------------------------
   content.css sets `.pa-prose > * + * { margin-top: 1.05em }` to space blocks,
   but the later `.pa-prose p { margin: 0 }` is more specific (0,1,1 vs 0,1,0)
   and won, so body paragraphs rendered butted together. These selectors are
   specific enough to restore the intended rhythm without disturbing the
   headings, which carry their own margins.
   ========================================================================= */
.pa-prose > p + p,
.pa-prose > p + ul,
.pa-prose > p + ol,
.pa-prose > ul + p,
.pa-prose > ol + p,
.pa-prose > p + blockquote,
.pa-prose > blockquote + p,
.pa-prose > p + table,
.pa-prose > table + p { margin-top: 1.05em; }

/* Same collapse affects the product description prose. */
.pdp-prose > p + p,
.pdp-prose > p + ul,
.pdp-prose > p + ol,
.pdp-prose > ul + p,
.pdp-prose > ol + p { margin-top: 1.05em; }

/* =========================================================================
   Related-products carousel
   -------------------------------------------------------------------------
   `.pdp-rel-nav` sets display:flex, which overrides the [hidden] attribute,
   so the arrows need an explicit rule to disappear when everything fits.
   The track was overflow:hidden — fine for the arrows, but it blocked touch
   swiping, so it becomes a real scroller with the scrollbar suppressed.
   ========================================================================= */
.pdp-rel-nav[hidden] { display: none !important; }
.pdp-rel-nav { cursor: pointer; }
.pdp-rel-nav:disabled {
	opacity: .35;
	cursor: default;
	border-color: var(--border);
	color: var(--text-body);
	box-shadow: none;
}
.pdp-rel-nav:disabled:hover { border-color: var(--border); color: var(--text-body); }

.pdp-related-track {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
.pdp-related-track::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pdp-related-card { scroll-snap-align: start; }

/* =========================================================================
   Homepage "Our Promise" badges
   -------------------------------------------------------------------------
   These were <h6> tags used purely as visual chips, which put four stray
   headings into the homepage outline. They are now <span>; this reproduces
   the previous appearance exactly (was `.feature-card h6` in style.css).
   ========================================================================= */
.feature-card .promise-badge-title {
	display: block;
	font-size: 16px;
	line-height: normal;
	font-weight: 600;
	color: #111827;
}

/* =========================================================================
   PDP gallery with no thumbnail rail (.pdp-gallery-solo)
   -------------------------------------------------------------------------
   Products carry a single image that is swapped on variant selection, so the
   thumbnail rail is suppressed in the template. With the rail gone, give the
   main image more room so the vial fills the column properly.
   ========================================================================= */
.pdp-gallery-solo .pdp-img-main-wrap { min-height: 500px; }
.pdp-gallery-solo .pdp-img-main { max-height: 500px; padding: 32px; }

@media (max-width: 991px) {
  .pdp-gallery-solo .pdp-img-main-wrap { min-height: 420px; }
  .pdp-gallery-solo .pdp-img-main { max-height: 420px; }
}
@media (max-width: 560px) {
  .pdp-gallery-solo .pdp-img-main-wrap { min-height: 340px; }
  .pdp-gallery-solo .pdp-img-main { max-height: 340px; padding: 22px; }
}

/* =========================================================================
   PEPTIDE RECONSTITUTION CALCULATOR  (page-peptide-calculator.php)
   ========================================================================= */
.pa-calc { background: var(--white, #fff); }
.pa-calc-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #14082e 0%, #2a1466 55%, #3a1e7a 100%);
	color: #fff;
	padding: 62px 0 74px;
}
.pa-calc-hero-glow {
	position: absolute; top: -40%; right: -10%;
	width: 640px; height: 640px; border-radius: 50%;
	background: radial-gradient(circle, rgba(124,77,255,.45), transparent 62%);
	pointer-events: none;
}
.pa-calc-hero .container { position: relative; z-index: 1; }
.pa-calc-crumb { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 18px; }
.pa-calc-crumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.pa-calc-crumb a:hover { color: #fff; text-decoration: underline; }
.pa-calc-crumb span { margin: 0 8px; opacity: .5; }
.pa-calc-kicker {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: #cbb6ff; background: rgba(124,77,255,.16); border: 1px solid rgba(124,77,255,.4);
	padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.pa-calc-dot { width: 7px; height: 7px; border-radius: 50%; background: #9d7bff; box-shadow: 0 0 0 4px rgba(157,123,255,.25); }
.pa-calc-title {
	font-family: var(--pa-serif, inherit); font-weight: 900; letter-spacing: -.02em;
	font-size: clamp(30px, 5vw, 48px); line-height: 1.06; margin: 0 0 16px; color: #fff;
	text-wrap: balance;
}
.pa-calc-lede { max-width: 640px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.82); margin: 0; }

.pa-calc-main { padding: 0 0 72px; }
.pa-calc-main .container { margin-top: -40px; position: relative; z-index: 2; }

.pa-calc-notice {
	display: flex; gap: 14px; align-items: flex-start;
	background: #fff7ed; border: 1px solid #fed7aa; border-left: 4px solid #f59e0b;
	border-radius: 14px; padding: 16px 20px; margin-bottom: 26px;
}
.pa-calc-notice i { color: #d97706; font-size: 18px; margin-top: 2px; }
.pa-calc-notice p { margin: 0; font-size: 14px; line-height: 1.6; color: #7c4a03; }

.pa-calc-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
}
.pa-calc-card {
	background: #fff; border: 1px solid var(--border, #e7e6f0);
	border-radius: 20px; padding: 28px; box-shadow: 0 18px 48px -30px rgba(42,20,102,.4);
}
.pa-calc-card-title {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--pa-serif, inherit); font-weight: 800; font-size: 19px;
	color: #14141f; margin: 0 0 22px;
}
.pa-calc-card-title i { color: var(--primary, #6a3de8); }

.pa-calc-field { display: block; margin-bottom: 22px; }
.pa-calc-label { display: block; font-weight: 700; font-size: 14px; color: #14141f; margin-bottom: 10px; }
.pa-calc-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pa-calc-preset {
	border: 1.5px solid var(--border, #e7e6f0); background: #fff; color: #4a4a63;
	font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
	transition: all .16s ease;
}
.pa-calc-preset:hover { border-color: var(--primary, #6a3de8); color: var(--primary, #6a3de8); }
.pa-calc-preset.is-active {
	background: var(--primary, #6a3de8); border-color: var(--primary, #6a3de8); color: #fff;
	box-shadow: 0 6px 16px -6px rgba(106,61,232,.6);
}
.pa-calc-input-row { display: flex; gap: 10px; }
.pa-calc-input-row input[type="number"] {
	flex: 1; min-width: 0; height: 52px; padding: 0 16px;
	border: 1.5px solid var(--border, #e7e6f0); border-radius: 12px;
	font-size: 18px; font-weight: 700; color: #14141f; background: #fbfbfe;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.pa-calc-input-row input[type="number"]:focus {
	outline: none; border-color: var(--primary, #6a3de8);
	box-shadow: 0 0 0 4px rgba(106,61,232,.14); background: #fff;
}
.pa-calc-input-row select {
	height: 52px; padding: 0 14px; border: 1.5px solid var(--border, #e7e6f0);
	border-radius: 12px; font-size: 15px; font-weight: 700; color: #14141f;
	background: #fff; cursor: pointer; min-width: 92px;
}
.pa-calc-syringe-select { flex: 1; }
.pa-calc-unit-fixed {
	display: inline-flex; align-items: center; justify-content: center; min-width: 60px;
	padding: 0 14px; border-radius: 12px; background: #f2f0fb; color: #6a3de8;
	font-weight: 800; font-size: 15px;
}
.pa-calc-hint { display: block; font-size: 12.5px; color: #8a8aa0; margin-top: 8px; line-height: 1.5; }
.pa-calc-reset {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
	background: none; border: none; color: var(--primary, #6a3de8);
	font-weight: 700; font-size: 13.5px; cursor: pointer; padding: 4px 0;
}
.pa-calc-reset:hover { text-decoration: underline; }

/* Results */
.pa-calc-results {
	background: linear-gradient(165deg, #faf9ff 0%, #f4f1ff 100%);
	border-color: #e5ddff;
}
.pa-calc-headline { text-align: center; margin-bottom: 20px; }
.pa-calc-headline-num {
	font-family: var(--pa-serif, inherit); font-weight: 900; letter-spacing: -.03em;
	font-size: 64px; line-height: 1; color: var(--primary, #6a3de8);
}
.pa-calc-headline-num.pa-calc-over { color: #d92d20; }
.pa-calc-headline-lbl { font-size: 15px; font-weight: 600; color: #4a4a63; margin-top: 6px; }

.pa-calc-syringe { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; }
.pa-calc-syringe-barrel {
	position: relative; flex: 1; height: 34px; border-radius: 8px 4px 4px 8px;
	background: #fff; border: 2px solid #d9d2f5; overflow: hidden;
}
.pa-calc-syringe-fill {
	position: absolute; inset: 0 auto 0 0; height: 100%;
	background: linear-gradient(90deg, #7c4dff, #6a3de8);
	transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.pa-calc-syringe-ticks { position: absolute; inset: 0; pointer-events: none; }
.pa-calc-syringe-tick { position: absolute; top: 0; bottom: 55%; width: 1px; background: rgba(80,60,140,.35); }
.pa-calc-syringe-plunger {
	width: 14px; height: 20px; border-radius: 3px; background: #b9addf; flex-shrink: 0;
}
.pa-calc-syringe-scale {
	display: flex; justify-content: space-between; font-size: 11px; font-weight: 700;
	color: #9a94b8; margin: 4px 22px 22px 2px;
}

.pa-calc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pa-calc-metric {
	background: #fff; border: 1px solid #ece7fb; border-radius: 14px; padding: 16px 18px; text-align: center;
}
.pa-calc-metric-val { display: block; font-weight: 800; font-size: 20px; color: #14141f; letter-spacing: -.01em; }
.pa-calc-metric-lbl { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #8a8aa0; margin-top: 4px; }
.pa-calc-error {
	display: flex; align-items: center; gap: 8px; margin: 18px 0 0;
	background: #fef3f2; border: 1px solid #fecdca; border-radius: 12px; padding: 12px 16px;
	color: #b42318; font-size: 13.5px; font-weight: 600;
}

.pa-calc-prose { max-width: 820px; margin: 52px auto 0; }
.pa-calc-supplies {
	margin-top: 44px; border-radius: 22px; overflow: hidden;
	background: linear-gradient(135deg, #1c0f3d 0%, #3a1e7a 100%); color: #fff;
}
.pa-calc-supplies-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	flex-wrap: wrap; padding: 34px 40px;
}
.pa-calc-supplies-copy h2 { color: #fff; font-size: 24px; margin: 0 0 8px; font-family: var(--pa-serif, inherit); font-weight: 800; }
.pa-calc-supplies-copy p { margin: 0; color: rgba(255,255,255,.8); font-size: 15px; max-width: 460px; }
.pa-calc-supplies-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.pa-calc-btn {
	display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px;
	border-radius: 12px; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: all .18s ease;
}
.pa-calc-btn-primary { background: #fff; color: #2a1466; }
.pa-calc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(0,0,0,.5); }
.pa-calc-btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.pa-calc-btn-ghost:hover { background: rgba(255,255,255,.2); }

@media (max-width: 860px) {
	.pa-calc-grid { grid-template-columns: 1fr; }
	.pa-calc-supplies-inner { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}
@media (max-width: 480px) {
	.pa-calc-headline-num { font-size: 52px; }
	.pa-calc-metrics { grid-template-columns: 1fr; }
	.pa-calc-card { padding: 22px; }
}

/* =========================================================================
   RESEARCH BUNDLES  (page-bundles.php)
   ========================================================================= */
.pa-bundle { background: var(--white, #fff); }
.pa-bundle-hero {
	position: relative; overflow: hidden;
	background: linear-gradient(160deg, #14082e 0%, #2a1466 55%, #3a1e7a 100%);
	color: #fff; padding: 62px 0 78px;
}
.pa-bundle-hero-glow {
	position: absolute; top: -45%; left: -8%;
	width: 680px; height: 680px; border-radius: 50%;
	background: radial-gradient(circle, rgba(124,77,255,.4), transparent 62%);
	pointer-events: none;
}
.pa-bundle-hero .container { position: relative; z-index: 1; }
.pa-bundle-crumb { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 18px; }
.pa-bundle-crumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.pa-bundle-crumb a:hover { color: #fff; text-decoration: underline; }
.pa-bundle-crumb span { margin: 0 8px; opacity: .5; }
.pa-bundle-kicker {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: #cbb6ff; background: rgba(124,77,255,.16); border: 1px solid rgba(124,77,255,.4);
	padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.pa-bundle-dot { width: 7px; height: 7px; border-radius: 50%; background: #9d7bff; box-shadow: 0 0 0 4px rgba(157,123,255,.25); }
.pa-bundle-title {
	font-family: var(--pa-serif, inherit); font-weight: 900; letter-spacing: -.02em;
	font-size: clamp(30px, 5vw, 48px); line-height: 1.06; margin: 0 0 16px; color: #fff; text-wrap: balance;
}
.pa-bundle-lede { max-width: 660px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.82); margin: 0 0 26px; }

.pa-bundle-tiers { display: flex; gap: 12px; flex-wrap: wrap; }
.pa-bundle-tier {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 116px; padding: 12px 18px; border-radius: 14px;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
}
.pa-bundle-tier-pct { font-family: var(--pa-serif, inherit); font-weight: 900; font-size: 26px; color: #c9b6ff; line-height: 1; }
.pa-bundle-tier-lbl { font-size: 12px; color: rgba(255,255,255,.72); margin-top: 4px; }

.pa-bundle-main { padding: 0 0 76px; }
.pa-bundle-main .container { margin-top: -42px; position: relative; z-index: 2; }

.pa-bundle-notice {
	display: flex; gap: 14px; align-items: flex-start;
	background: #fff7ed; border: 1px solid #fed7aa; border-left: 4px solid #f59e0b;
	border-radius: 14px; padding: 16px 20px; margin-bottom: 34px;
}
.pa-bundle-notice i { color: #d97706; font-size: 18px; margin-top: 2px; }
.pa-bundle-notice p { margin: 0; font-size: 14px; line-height: 1.6; color: #7c4a03; }

.pa-bundle-sec-head { margin: 0 0 22px; }
.pa-bundle-sec-head h2 {
	font-family: var(--pa-serif, inherit); font-weight: 800; font-size: 26px; color: #14141f; margin: 0 0 6px;
}
.pa-bundle-sec-head p { margin: 0; color: #5a5a72; font-size: 15px; }
.pa-bundle-byo-head { margin-top: 56px; }

/* Stacks */
.pa-bundle-stacks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pa-bundle-card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--border, #e7e6f0); border-top: 4px solid var(--stack-accent, #6a3de8);
	border-radius: 18px; padding: 22px; box-shadow: 0 18px 46px -32px rgba(42,20,102,.45);
	transition: transform .2s ease, box-shadow .2s ease;
}
.pa-bundle-card:hover { transform: translateY(-4px); box-shadow: 0 26px 56px -30px rgba(42,20,102,.5); }
.pa-bundle-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pa-bundle-card-icon {
	width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--stack-accent, #6a3de8) 14%, #fff);
	color: var(--stack-accent, #6a3de8); font-size: 19px;
}
.pa-bundle-card-name { font-family: var(--pa-serif, inherit); font-weight: 800; font-size: 18px; color: #14141f; margin: 0 0 2px; }
.pa-bundle-card-tag { font-size: 12.5px; color: #8a8aa0; font-weight: 600; }

.pa-bundle-items { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; flex: 1; }
.pa-bundle-item { display: flex; align-items: center; gap: 12px; }
.pa-bundle-item-img {
	width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; overflow: hidden;
	background: #f6f5fc; border: 1px solid #eee; display: flex; align-items: center; justify-content: center;
}
.pa-bundle-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pa-bundle-item-body { flex: 1; min-width: 0; }
.pa-bundle-item-name { display: block; font-weight: 700; font-size: 14px; color: #14141f; text-decoration: none; line-height: 1.3; }
.pa-bundle-item-name:hover { color: var(--stack-accent, #6a3de8); }
.pa-bundle-item-size { font-size: 12px; color: #9a94b8; font-weight: 600; }
.pa-bundle-item-price { font-weight: 700; font-size: 14px; color: #4a4a63; white-space: nowrap; }

.pa-bundle-card-foot { border-top: 1px dashed #e7e6f0; padding-top: 16px; }
.pa-bundle-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pa-bundle-price-was { text-decoration: line-through; color: #a7a4bb; font-weight: 600; font-size: 15px; }
.pa-bundle-price-now { font-family: var(--pa-serif, inherit); font-weight: 900; font-size: 24px; color: #14141f; }
.pa-bundle-price-save {
	flex-basis: 100%; font-size: 12.5px; font-weight: 700; color: #0c8b7f;
	background: #e6f7f3; border-radius: 6px; padding: 3px 8px; display: inline-block; width: fit-content;
}
.pa-bundle-add {
	width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--stack-accent, #6a3de8); color: #fff; border: none; border-radius: 12px;
	padding: 13px 18px; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: filter .16s ease, transform .16s ease;
}
.pa-bundle-add:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pa-bundle-add:disabled { opacity: .7; cursor: default; }

/* Build your own */
.pa-bundle-byo { display: grid; grid-template-columns: 1fr 330px; gap: 24px; align-items: start; }
.pa-bundle-byo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pa-bundle-byo-card {
	position: relative; background: #fff; border: 1.5px solid var(--border, #e7e6f0);
	border-radius: 14px; padding: 14px; text-align: center; transition: border-color .16s ease, box-shadow .16s ease;
}
.pa-bundle-byo-card.is-selected { border-color: var(--primary, #6a3de8); box-shadow: 0 0 0 3px rgba(106,61,232,.12); }
.pa-bundle-byo-img { display: block; height: 92px; margin-bottom: 8px; }
.pa-bundle-byo-img img { width: 100%; height: 100%; object-fit: contain; }
.pa-bundle-byo-name { display: block; font-weight: 700; font-size: 13.5px; color: #14141f; line-height: 1.3; }
.pa-bundle-byo-price { display: block; font-size: 12px; color: #8a8aa0; font-weight: 600; margin-top: 2px; }
.pa-bundle-qty { display: inline-flex; align-items: center; gap: 0; margin-top: 12px; border: 1.5px solid var(--border, #e7e6f0); border-radius: 10px; overflow: hidden; }
.pa-bundle-qty-btn {
	width: 34px; height: 34px; background: #f7f6fc; border: none; color: var(--primary, #6a3de8);
	font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1; transition: background .15s ease;
}
.pa-bundle-qty-btn:hover { background: #ece7fb; }
.pa-bundle-qty-val { width: 40px; text-align: center; font-weight: 800; font-size: 15px; color: #14141f; }

.pa-bundle-summary {
	position: sticky; top: 24px; background: #fff; border: 1px solid var(--border, #e7e6f0);
	border-radius: 18px; padding: 22px; box-shadow: 0 18px 46px -32px rgba(42,20,102,.4);
}
.pa-bundle-summary-title { display: flex; align-items: center; gap: 9px; font-family: var(--pa-serif, inherit); font-weight: 800; font-size: 18px; color: #14141f; margin: 0 0 16px; }
.pa-bundle-summary-title i { color: var(--primary, #6a3de8); }
.pa-bundle-summary-empty { font-size: 14px; color: #7a7a92; line-height: 1.6; margin: 0; }
.pa-bundle-summary-list { list-style: none; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px dashed #e7e6f0; display: grid; gap: 8px; }
.pa-bundle-summary-item { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: #4a4a63; }
.pa-bundle-summary-item span:last-child { font-weight: 700; color: #14141f; white-space: nowrap; }
.pa-bundle-summary-rows { display: grid; gap: 8px; margin-bottom: 14px; }
.pa-bundle-summary-row { display: flex; justify-content: space-between; font-size: 14px; color: #4a4a63; }
.pa-bundle-summary-row span:last-child { font-weight: 700; color: #14141f; }
.pa-bundle-summary-disc span { color: #0c8b7f !important; }
.pa-bundle-summary-total { border-top: 1px solid #eee; padding-top: 10px; font-size: 16px; }
.pa-bundle-summary-total span:last-child { font-family: var(--pa-serif, inherit); font-weight: 900; font-size: 20px; }
.pa-bundle-progress { font-size: 12.5px; font-weight: 600; color: var(--primary, #6a3de8); background: #f4f1ff; border-radius: 8px; padding: 9px 12px; margin: 0 0 14px; }
.pa-bundle-addall {
	width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--primary, #6a3de8); color: #fff; border: none; border-radius: 12px;
	padding: 14px 18px; font-weight: 700; font-size: 15px; cursor: pointer; transition: filter .16s ease, transform .16s ease;
}
.pa-bundle-addall:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.pa-bundle-addall:disabled { opacity: .45; cursor: default; }

.pa-bundle-prose { max-width: 820px; margin: 56px auto 0; }

@media (max-width: 960px) {
	.pa-bundle-stacks { grid-template-columns: 1fr; max-width: 520px; }
	.pa-bundle-byo { grid-template-columns: 1fr; }
	.pa-bundle-summary { position: static; }
}
@media (max-width: 620px) {
	.pa-bundle-byo-grid { grid-template-columns: repeat(2, 1fr); }
	.pa-bundle-tier { min-width: 96px; }
}
@media (max-width: 400px) {
	.pa-bundle-byo-grid { grid-template-columns: 1fr; max-width: 300px; }
}

/* Bundle/fee saving row on the cart summary (negative fee shows as a credit). */
.cart-summary-fee span:last-child { color: #0c8b7f; font-weight: 700; }
.cart-summary-fee span:first-child { color: #0c8b7f; }

/* =========================================================================
   REFERENCES / CITATIONS  (inc/citations.php) — academic style
   ========================================================================= */
.pdp-refs-section { padding: 44px 0; background: var(--white, #fff); }
.pa-refs {
	max-width: 900px; margin: 34px 0 0;
	background: #fff; border: 1px solid #e6e8ec; border-radius: 18px;
	box-shadow: 0 14px 40px -30px rgba(15,60,60,.4); overflow: hidden;
}
.pdp-refs-section .pa-refs { margin: 0 auto; }

/* Header: book badge + title + "N sources" pill */
.pa-refs-head {
	display: flex; align-items: center; gap: 14px;
	padding: 18px 24px; background: linear-gradient(180deg, #f5fbfb, #fbfdfd);
	border-bottom: 1px solid #e6e8ec;
}
.pa-refs-badge {
	width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(150deg, #0f8b82, #0c6e6e); color: #fff; font-size: 17px;
	box-shadow: 0 6px 14px -6px rgba(12,110,110,.6);
}
.pa-refs-title {
	font-family: var(--pa-serif, inherit); font-weight: 800; font-size: 20px;
	color: #14212b; margin: 0; letter-spacing: -.01em;
}
.pa-refs-count {
	margin-left: auto; font-size: 12.5px; font-weight: 600; color: #5b6b6b;
	background: #eef3f3; border: 1px solid #dde7e7; border-radius: 999px; padding: 5px 13px;
}

/* List: numbered teal badge + citation body, divider between */
.pa-refs-list { list-style: none; margin: 0; padding: 6px 24px 8px; }
.pa-refs-item {
	display: flex; gap: 14px; align-items: flex-start;
	padding: 18px 0; border-bottom: 1px solid #eef1f3;
}
.pa-refs-item:last-child { border-bottom: none; }
.pa-refs-num {
	flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(150deg, #0f8b82, #0c6e6e); color: #fff;
	font-weight: 800; font-size: 13.5px; box-shadow: 0 5px 12px -6px rgba(12,110,110,.55);
}
.pa-refs-body { min-width: 0; flex: 1; }
.pa-refs-text {
	display: block; color: #3a4652; font-size: 14.5px; line-height: 1.6; margin-bottom: 6px;
}
.pa-refs-link { display: block; font-size: 13.5px; line-height: 1.5; }
.pa-refs-src-label { color: #6b7785; font-weight: 700; }
.pa-refs-link a {
	color: #1d70b8; font-weight: 600; text-decoration: none; word-break: break-all;
	border-bottom: 1px solid rgba(29,112,184,.3);
}
.pa-refs-link a:hover { color: #0c6e6e; border-bottom-color: #0c6e6e; }
.pa-refs-link a i { font-size: 10px; opacity: .75; }
.pa-refs-note {
	margin: 0; padding: 14px 24px 20px; font-size: 12.5px; color: #8a95a0; line-height: 1.55;
	border-top: 1px solid #eef1f3; background: #fbfcfc;
}
.pa-refs-note i { color: #0f8b82; margin-right: 4px; }
.pa-refs-note code { background: #eef3f3; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

/* Inside prose (category/pages): the block sits inside .pa-prose / .pa-doc-body,
   whose ol styling would add a second (purple) number on top of the teal badge.
   Neutralise the prose list numbering for the references list only. */
.pa-prose .pa-refs, .pa-doc-body .pa-refs { margin-top: 40px; }
.pa-prose .pa-refs-list,
.pa-doc-body .pa-refs-list { list-style: none !important; padding: 6px 24px 8px !important; margin: 0 !important; counter-reset: none !important; }
.pa-prose .pa-refs-list > li,
.pa-doc-body .pa-refs-list > li { padding: 18px 0 !important; margin: 0 !important; }
.pa-prose .pa-refs-list > li::before,
.pa-doc-body .pa-refs-list > li::before,
.pa-prose .pa-refs-list > li::marker,
.pa-doc-body .pa-refs-list > li::marker { content: none !important; display: none !important; }

@media (max-width: 560px) {
	.pa-refs-head { padding: 16px 18px; }
	.pa-refs-list { padding: 4px 18px 6px; }
	.pa-refs-num { width: 26px; height: 26px; font-size: 12.5px; }
	.pa-refs-count { display: none; }
	.pa-refs-note { padding: 14px 18px 18px; }
}