/* ─────────────────────────────────────────────────────────────────
   Gentleman Peptides — responsive layer.
   Loads after every other stylesheet so it always wins.

   Breakpoints:
     ≤1280  · large laptop / small desktop
     ≤1024  · tablet landscape
     ≤880   · tablet portrait
     ≤640   · mobile
     ≤420   · small mobile
   ───────────────────────────────────────────────────────────────── */

/* Global overflow guard — prevents any rogue 100vw / negative-margin element
   from creating a horizontal scrollbar on mobile. */
html, body { max-width: 100vw; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }

/* ───────── ≤ 1280 ───────── */
@media (max-width: 1280px) {
  .section, .section-tight, .standard-inner, .editorial-inner, .newsletter-inner,
  .footer-inner, .header-inner, .utility-inner, .plp-layout, .plp-head, .crumbs,
  .pdp, .pdp-tabs, .related, .acct-shell { padding-left: 24px; padding-right: 24px; }

  .footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; }
}

/* ───────── ≤ 1100 ───────── */
@media (max-width: 1100px) {
  .pdp { grid-template-columns: 1.1fr 1fr; gap: 32px; }
  .pdp .buybox { grid-column: span 2; position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .standard-inner { gap: 40px; }
}

/* ───────── ≤ 1024 — tablet landscape ───────── */
@media (max-width: 1024px) {
  .header-inner { gap: 16px; padding: 14px 24px; }
  .nav { gap: 18px; font-size: 13px; }
  .search-pill { width: 160px; }
  .gp-account-name { display: none; }

  .hero-inner { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding: 48px 24px; }
  .hero-product { margin: 0 !important; min-height: 360px; align-self: auto; justify-content: center; }
  .hero-product .hero-custom-image { width: 100%; max-width: 100%; height: auto; max-height: 380px; object-fit: contain; }
  .hero-vial-side, .hero-callout { display: none; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }

  .cat-grid, .ps-grid, .ps-grid-4, .new-grid, .process-grid { grid-template-columns: repeat(2, 1fr); }
  .standard-inner { grid-template-columns: 1fr; }
  .standard-visual { aspect-ratio: 16/9; }

  .plp-layout { grid-template-columns: 220px 1fr; gap: 24px; }

  .acct-layout { grid-template-columns: 200px 1fr; gap: 24px; }
  .dash-grid, .dash-grid.stack { grid-template-columns: 1fr 1fr; }

  .coa-grid { grid-template-columns: repeat(3, 1fr); }
  .quick-help { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .faq-section .faq-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ───────── ≤ 880 — tablet portrait → mobile menu kicks in ───────── */
@media (max-width: 880px) {
  /* Utility bar — hide secondary links */
  .utility-inner { font-size: 10px; }
  .utility-links { display: none; }

  /* Header — hamburger reveals nav */
  .header-inner {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px; padding: 12px 14px;
  }
  .header-inner > .logo { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .logo { font-size: 17px; gap: 6px; white-space: nowrap; text-overflow: ellipsis; }
  .search-pill { display: none; }

  /* Mobile flyout — plain block stacking (no flex, no surprises). */
  .header .nav {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(360px, 88vw) !important;
    height: 100vh !important;
    z-index: 200 !important;
    background: #fff !important;
    padding: 80px 0 24px !important;
    margin: 0 !important;
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -16px 0 40px rgba(0,0,0,0.15);
    overflow-y: auto !important;
    list-style: none;
    text-align: left !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  body.gp-menu-open .header .nav { transform: translateX(0) !important; }
  .header .nav > * { display: block !important; width: 100% !important; }
  .header .nav li { display: block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
  .header .nav a, .header .nav li > a {
    display: block !important;
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line) !important;
    text-decoration: none !important;
    text-align: left !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }
  .header .nav a:hover, .header .nav li > a:hover { color: var(--accent) !important; background: var(--paper-2) !important; }

  /* No backdrop — page stays visible behind the panel. */
  html.gp-menu-open, body.gp-menu-open {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none;
    overscroll-behavior: none;
  }
  body.gp-menu-open .nav { transform: translateX(0); }

  .gp-menu-toggle {
    display: flex !important;
    align-items: center; justify-content: center;
    flex-direction: column;
    width: 40px; height: 40px;
    background: #fff; border: 1px solid var(--line-2);
    border-radius: 999px; color: var(--ink);
    cursor: pointer; flex-shrink: 0;
    position: relative; z-index: 250;
  }
  .gp-menu-toggle span {
    display: block;
    width: 18px; height: 2px;
    background: currentColor;
    margin: 2px 0;
    transition: transform .2s, opacity .2s;
    transform-origin: center;
  }
  body.gp-menu-open .gp-menu-toggle .gp-bar1 { transform: rotate(45deg) translate(3px, 6px); }
  body.gp-menu-open .gp-menu-toggle .gp-bar2 { opacity: 0; }
  body.gp-menu-open .gp-menu-toggle .gp-bar3 { transform: rotate(-45deg) translate(3px, -6px); }

  .header-right { gap: 6px; flex-shrink: 0; }
  .gp-account-link { padding: 7px 10px; font-size: 12px; }
  .gp-account-link svg { width: 14px; height: 14px; }
  .gp-account-link.gp-signin span, .gp-account-link.gp-signup span { display: inline; }
  .icon-btn { width: 36px; height: 36px; flex-shrink: 0; }

  /* Section padding */
  .section { padding: 56px 16px; }
  .section-tight { padding: 40px 16px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-title { font-size: clamp(28px, 7vw, 40px); }

  /* Hero */
  .hero-inner { padding: 32px 16px 0; }
  .hero h1 { font-size: clamp(36px, 9vw, 56px); }
  .hero p { font-size: 15px; }
  .hero-cta { flex-wrap: wrap; }
  .hero-cta .btn { flex: 1; min-width: 180px; }
  .hero-stats { gap: 16px; padding-top: 18px; }
  .hero-stats > div { flex: 1 0 calc(50% - 8px); }
  .stat-n { font-size: 24px; }
  /* Hero image becomes a full-width banner that bleeds edge to edge of the
     viewport, anchored to the hero section bottom. */
  .hero-product { min-height: 0 !important; margin: 16px -16px -16px !important; padding: 0 !important; }
  .hero-product .hero-custom-image {
    width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: 380px !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    display: block !important;
  }

  /* Marquee tighten */
  .marquee-track { gap: 32px; }
  .marquee-track span { gap: 32px; }

  /* Categories */
  .cat-grid, .ps-grid, .ps-grid-4, .new-grid, .process-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cat-card { min-height: 220px; padding: 20px 16px 16px; }
  .cat-name { font-size: 18px; }

  /* Trust strip */
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .trust-cell { padding: 18px 16px; gap: 10px; }
  .trust-cell:nth-child(2n) { border-left: 1px solid var(--line); }
  .trust-cell:nth-child(3) { border-top: 1px solid var(--line); border-left: 0; }
  .trust-cell:nth-child(4) { border-top: 1px solid var(--line); }

  /* Standard split */
  .standard { padding: 56px 16px; }
  .standard-inner { gap: 32px; }
  .standard-coa { width: 80%; max-width: 280px; bottom: 16px; right: 16px; }
  .standard-feat { grid-template-columns: 1fr; gap: 12px; }

  /* Process */
  .process { padding: 56px 16px; }

  /* Editorial */
  .editorial { padding: 64px 24px; }
  .editorial blockquote { font-size: clamp(22px, 4vw, 32px); }

  /* Press */
  .press { padding: 32px 16px; }
  .press-logos { gap: 24px; justify-content: center; }
  .press-logo { font-size: 16px; }

  /* FAQ (homepage two-col) */
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Newsletter */
  .newsletter { padding: 48px 16px; }
  .newsletter-inner { grid-template-columns: 1fr; gap: 24px; }
  .newsletter h2 { font-size: 32px; }
  .newsletter form { flex-direction: column; gap: 8px; }
  .newsletter input { border-radius: 999px; }
  .newsletter button { border-radius: 999px; }

  /* Footer */
  .footer { padding: 48px 16px 24px; margin-top: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 32px; }
  .footer-brand { grid-column: span 2; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }

  /* Crumbs */
  .crumbs { padding: 16px 16px 0; }

  /* Shop / PLP */
  .plp-head { grid-template-columns: 1fr; padding: 12px 16px 24px; gap: 16px; }
  .plp-meta { gap: 18px; }
  .plp-layout { grid-template-columns: 1fr; padding: 24px 16px; gap: 16px; }
  .plp-sidebar { order: 2; }
  .toolbar { flex-wrap: wrap; gap: 12px; }
  .toolbar-right { flex-wrap: wrap; }
  .ps-grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .spotlight { grid-column: span 2; flex-direction: column; padding: 24px; gap: 16px; text-align: center; }
  .spotlight .vial-wrap:last-child { display: none; }

  /* Filter sidebar — collapse to a toggleable drawer */
  .plp-sidebar form#gp-shop-filter-form > .filter-group:first-of-type { padding-top: 8px; }

  /* PDP — single column, with explicit order:
     1. Gallery
     2. Title + CAS + description (info-top)
     3. Buy box (price + Add to cart + Buy now)
     4. Specs + COA card (info-bottom) */
  .pdp { display: flex; flex-direction: column; gap: 24px; padding: 16px 16px 32px; }
  .pdp .gallery { order: 1; }
  .pdp .info { order: 2; display: contents; }
  .pdp .info-top { order: 2; display: block; }
  .pdp .buybox { order: 3; position: static; grid-column: 1; }
  .pdp .info-bottom { order: 4; display: block; }
  .pdp .info-top, .pdp .info-bottom { display: flex; flex-direction: column; gap: 12px; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .info h1, .info-top h1 { font-size: 32px; margin: 8px 0 4px; }

  .pdp-tabs { padding: 0 16px; margin-top: 24px; }
  .tab-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; margin-right: 24px; padding: 14px 0; }
  .pdp-tabs .tab-content.active { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; }

  .gp-pdp-desc-grid { grid-template-columns: 1fr; gap: 24px; }
  .reviews-summary { grid-template-columns: 1fr; gap: 16px; }
  .review-list { grid-template-columns: 1fr; }

  /* My Account */
  .acct-shell { padding: 24px 16px 48px; }
  .acct-greet { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 18px; }
  .acct-greet h1 { font-size: clamp(32px, 7vw, 44px); }
  .acct-stats { gap: 18px; flex-wrap: wrap; }
  .acct-stats .stat { flex: 1 0 calc(50% - 10px); }
  .acct-stats .stat .v, .stat-tile .v { font-size: 28px; }
  .acct-layout, .acct-layout.tabs { grid-template-columns: 1fr; gap: 16px; }
  .acct-rail { position: static; align-self: auto; }
  .acct-rail nav, .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .rail-link, .woocommerce-MyAccount-navigation li a { padding: 10px 12px; font-size: 13px; }
  .rail-link .num { display: none; }
  .pane-h { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pane-h .right { flex-wrap: wrap; }
  .dash-grid, .dash-grid.stack { grid-template-columns: 1fr; gap: 16px; }
  .last-order { grid-template-columns: 60px 1fr; gap: 12px; }
  .last-order > div:last-child { grid-column: 1 / -1; text-align: left; }
  .grid-2 { grid-template-columns: 1fr; }
  .form-section { padding: 22px 18px; }
  .form-section .form-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .tracking-steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tracking-steps::before { display: none; }

  /* Tables — horizontal scroll on mobile */
  .tbl, .woocommerce-MyAccount-content table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .tbl thead, .woocommerce-MyAccount-content table thead { display: table-header-group; }
  .tbl tbody, .woocommerce-MyAccount-content table tbody { display: table-row-group; }
  .tbl tr, .woocommerce-MyAccount-content table tr { display: table-row; }
  .tbl th, .tbl td, .woocommerce-MyAccount-content table th, .woocommerce-MyAccount-content table td { display: table-cell; }

  /* COA list rows on My Account */
  .coa-row { grid-template-columns: 40px 1fr 1fr; gap: 10px; padding: 12px 14px; }
  .coa-row > div:nth-child(n+4) { display: none; }
  .coa-row > div:last-child { display: flex; grid-column: 1 / -1; }

  /* COA Library + FAQ + Contact */
  .coa-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px 16px; }
  .coa-toolbar { grid-template-columns: 1fr; padding: 16px; gap: 12px; }
  .filter-bar { padding: 12px 16px; gap: 6px; }
  .filter-bar .divider { display: none; }
  .quick-help { grid-template-columns: 1fr; padding: 0 16px; gap: 12px; }
  .contact-grid { grid-template-columns: 1fr; padding: 0 16px; margin: 32px auto; gap: 24px; }
  .cu-form { padding: 24px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .info-card { padding: 18px; }
  .info-card h3 { font-size: 18px; }
  .help-card { grid-template-columns: 1fr; padding: 28px; gap: 18px; }
  .help-actions { flex-wrap: wrap; }

  .faq-section { padding: 32px 16px; }
  .faq-section .faq-grid { grid-template-columns: 1fr; gap: 14px; }
  .help-strip { padding: 0 16px; margin-bottom: 48px; }

  /* Page banners */
  .page-banner { padding: 48px 16px 36px; }
  .page-banner h1 { font-size: clamp(36px, 8vw, 56px); }
  .search-wrap { padding: 0 16px; margin-top: 20px; }
  .search-wrap input { padding: 14px 48px; font-size: 14px; }
  .cat-jump { padding: 0 16px; }

  /* Certificate page */
  .cert-shell { padding: 16px 16px 48px; }
  .cert-banner h1 { font-size: clamp(32px, 7vw, 44px); }
  .cert-product { grid-template-columns: 1fr; gap: 16px; }
  .cert-meta-grid { grid-template-columns: 1fr; }
  .cert-lots-head { display: none; }
  .cert-lot-row { grid-template-columns: 50px 1fr; gap: 10px; padding: 12px 14px; }
  .cert-lot-row .lot-type, .cert-lot-row .lot-purity, .cert-lot-row .lot-date { grid-column: 2; padding-left: 0; font-size: 11px; }
  .cert-lot-row .lot-cta { grid-column: 1 / -1; padding-left: 60px; }

  /* Buttons in tight spaces */
  .btn { padding: 10px 18px; font-size: 13px; }
  .btn-sm { padding: 8px 12px; font-size: 12px; }

  /* Reduce hero callouts on mobile */
  .hero-callout { display: none; }
}

/* ───────── ≤ 640 — mobile ───────── */
@media (max-width: 640px) {
  .header-inner { padding: 10px 14px; gap: 8px; }
  .icon-btn { width: 34px; height: 34px; }
  .gp-account-link.gp-signin, .gp-account-link.gp-signup { padding: 6px 10px; font-size: 11px; }

  .hero h1 br { display: none; }

  .acct-stats .stat { flex: 1 0 100%; }
  .acct-stats .stat .v { font-size: 24px; }

  /* Product grids stay 2-col on mobile (per user request) */
  .ps-grid-4, .ps-grid, .new-grid, .cat-grid, .coa-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .process-grid { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .trust-cell { border-left: 0; border-top: 1px solid var(--line); }
  .trust-cell:first-child, .trust-cell:nth-child(2) { border-top: 0; }
  .trust-cell:nth-child(2) { border-left: 1px solid var(--line); }
  .trust-cell:nth-child(4) { border-left: 1px solid var(--line); }

  /* Compact 2-col card spacing */
  .pcard-body { padding: 12px; gap: 4px; }
  .pcard-name { font-size: 13px; line-height: 1.2; }
  .pcard-cas { font-size: 9px; }
  .pcard-meta { font-size: 11px; }
  .pcard-price { font-size: 18px; }
  .pcard-tags { gap: 4px; }
  .pcard-tags .tag { font-size: 9px; padding: 3px 6px; }

  /* Category cards compact */
  .cat-card { min-height: 180px; padding: 16px 12px 12px; }
  .cat-name { font-size: 16px; }
  .cat-img { height: 100px; margin: 8px 0 12px; }
  .cat-arrow { width: 26px; height: 26px; right: 12px; top: 12px; }

  /* COA cards compact */
  .coa-name { font-size: 13px; }
  .coa-card-body { padding: 12px; }
  .coa-card-cta { padding: 0 12px 12px; gap: 6px; }
  .coa-card-cta .btn { padding: 6px 8px; font-size: 11px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: 1; }

  .standard-coa { display: none; }

  .pcard-img { aspect-ratio: 1; }

  .editorial { padding: 48px 18px; }
  .marquee { font-size: 11px; padding: 10px 0; }

  /* Tabs / pills horizontal scroll */
  .gp-tabs, .acct-tabs, .filter-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .gp-tabs::-webkit-scrollbar, .acct-tabs::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
  .gp-tabs .tab, .acct-tabs button, .acct-tabs a { flex-shrink: 0; }
}

/* Stay 2-col even on the smallest screens (don't drop to 1) */
@media (max-width: 420px) {
  .ps-grid-4, .ps-grid, .new-grid, .cat-grid, .coa-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
}

/* ───────── ≤ 420 — small mobile ───────── */
@media (max-width: 420px) {
  .logo { font-size: 16px; }
  .gp-account-name { display: none; }
  .gp-account-link.gp-signup { display: none; }
  .cart-count { font-size: 8px; width: 14px; height: 14px; }
  .info h1 { font-size: 26px; }
  .price-main { font-size: 32px; }
  .acct-greet h1 { font-size: 28px; }
  .pane-h h2 { font-size: 24px; }
  .form-section h3, .card h3 { font-size: 18px; }

  .gp-auth-shell { padding: 0 14px; margin: 32px auto; }
  .gp-auth-card { padding: 24px 18px; }
  .gp-auth-card h2 { font-size: 24px; }
}

/* ───────── Hide menu toggle on desktop ───────── */
.gp-menu-toggle { display: none; }