/* ==========================================================================
   PEPTIDE DOSAGES — responsive layer
   Mobile-first breakpoints for navigation, grids, tables and the product page.
   ========================================================================== */

/* Desktop widths where the longer menu would clip */
@media (max-width: 1180px) {
    :root { --header-h: 88px; }
    .brand-mark { width: 50px; height: 50px; }
    .brand-text { font-size: 1.16rem; }
    .brand-text .brand-sub { font-size: 0.66rem; letter-spacing: 0.16em; }
    .main-nav a { font-size: 1rem; padding: 0.48rem 0.28rem; letter-spacing: 0.01em; }
}

/* Large tablets / small laptops */
@media (max-width: 1080px) {
    .product-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .product-aside {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }
    .hero-panel { max-width: 560px; }
    .stats-band .container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.1rem;
    }
    .stat:nth-child(3) { border-left: 0; padding-left: 0; }
    .product-hero {
        grid-template-columns: 1fr;
        gap: 1.3rem;
    }
    .product-hero .ph-media {
        max-width: 360px;
        margin-inline: auto;
        width: 100%;
    }
    .calc-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* Phones */
@media (max-width: 760px) {
    :root { --header-h: 82px; }

    .container { width: min(var(--container), calc(100% - 1.6rem)); }

    /* --- mobile navigation --- */
    .nav-toggle { display: inline-flex; }

    .main-nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        padding: 0.7rem 0.9rem 1rem;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--t-med), opacity var(--t-med), visibility var(--t-med);
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
    }
    .main-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .main-nav a {
        padding: 0.9rem 0.95rem;
        font-size: 1.22rem;
        border-radius: var(--radius-sm);
        border-bottom: 1px solid var(--border);
    }
    .main-nav a:last-child { border-bottom: 0; }
    .main-nav a[aria-current="page"]::after { display: none; }
    .main-nav a[aria-current="page"] { background: var(--accent-soft); }
    .nav-search-btn {
        margin: 0.5rem 0 0;
        justify-content: center;
        border-radius: var(--radius-sm);
        padding: 0.8rem;
    }

    body.nav-open { overflow: hidden; }

    /* --- hero --- */
    .hero { padding: 2.6rem 0 2.8rem; }
    .hero h1 { max-width: none; }
    .search-field { flex-wrap: wrap; }
    .search-field .btn {
        width: 100%;
        border-radius: 0;
        padding-block: 0.8rem;
    }
    .search-field { border-radius: var(--radius); }
    .search-results { border-radius: var(--radius); }

    /* --- sections --- */
    .section { padding: var(--sp-7) 0; }
    .section-head { margin-bottom: var(--sp-5); }

    .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; }
    .product-card { border: 2px solid #5C5C5C; }
    .category-grid { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

    .pc-body { padding: 0.85rem 0.8rem 0.95rem; }
    .pc-name { font-size: 0.95rem; }
    .pc-flags { gap: 0.3rem; }
    .flag { font-size: 0.62rem; padding: 0.2rem 0.45rem; }

    /* --- stats --- */
    .stats-band .container { padding: 1.1rem 0; }
    .stat .stat-value { font-size: 1.2rem; }

    /* --- toolbar --- */
    .toolbar { padding: 0.8rem; }
    .toolbar .search-field { flex-basis: 100%; }
    .filter-select { width: 100%; min-width: 0; }

    /* --- product page --- */
    .product-hero { padding: 1.1rem; border-radius: var(--radius); }
    .content-card .card-head { padding: 0.9rem 1.05rem; }
    .content-card .card-head h2 { font-size: 0.82rem; letter-spacing: 0.12em; }
    .content-card .card-body { padding: 1.1rem; }
    .product-aside { grid-template-columns: 1fr; }

    .facts-grid { grid-template-columns: 1fr; }

    /* Tables: keep readable, scroll horizontally */
    .table-scroll { border-radius: var(--radius-sm); }
    .scroll-hint { display: flex; }
    .reference-table { min-width: 420px; font-size: var(--fs-xs); }
    .reference-table th, .reference-table td { padding: 0.55rem 0.7rem; }

    /* --- calculator --- */
    .calc-grid { grid-template-columns: 1fr; }
    .calc-board { padding: 1rem; border-radius: 16px; }
    .calc-readout .cr-value { font-size: 2.3rem; }
    .syringe-panel h2 { font-size: 1.25rem; }

    /* --- footer --- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.7rem;
        padding: var(--sp-6) 0 var(--sp-5);
    }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Small phones */
@media (max-width: 420px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
    .pc-media { aspect-ratio: 1; }
    .pc-cta { font-size: 0.6rem; letter-spacing: 0.08em; }
    .brand-text { font-size: 1.05rem; }
    .brand-mark { width: 46px; height: 46px; }
    .hero-eyebrow { font-size: 0.66rem; padding: 0.36rem 0.75rem; }
    .steps { grid-template-columns: 1fr; }
    .segmented { width: 100%; border-radius: var(--radius); }
    .segmented button { flex: 1; text-align: center; }
}

/* Print — reference sheets should print cleanly */
@media print {
    .site-header, .site-footer, .toolbar, .nav-toggle, .product-aside,
    .load-more-wrap, .skip-link, .no-print, .segmented { display: none !important; }
    body { background: #fff; font-size: 11pt; }
    .page-head { background: #fff !important; color: #000; border-bottom: 2px solid #000; padding: 0.5cm 0; }
    .page-head h1, .page-head .breadcrumb, .page-head .page-sub { color: #000; }
    .content-card, .product-hero { border: 1pt solid #999; box-shadow: none; break-inside: avoid; }
    .content-card .card-head { background: #fff !important; border-bottom: 1pt solid #ccc; }
    .content-card .card-head h2, .content-card .card-head h2 svg { color: #000 !important; }
    .table-scroll { overflow: visible; background: none; }
    .reference-table { min-width: 0; }
    .reference-table th { background: #eee !important; color: #000 !important; }
    a { color: #000; }
}