/* ============================================
   VERIFIED PEPTIDES — 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-fluid.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-fluid.custom-padding {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

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

  /* Hide desktop nav & actions */
  .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-fluid.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-fluid.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-fluid.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; }
}