/* =====================================================
   Apex Peptides Lab
   responsive.css
   ===================================================== */

/* ---------- Laptopy ---------- */

@media (max-width: 1200px){

    .container{
        width:94%;
    }

    .nav ul{
        gap:24px;
    }

    .side-accent{
        display:none;
    }

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

    .jakosc-banner{
        order:-1;
    }

    .cart-layout,
    .checkout-layout{
        grid-template-columns:1fr;
    }

    .cart-summary,
    .checkout-summary{
        position:static;
    }

}

/* ---------- Tablety ---------- */

@media (max-width: 992px){

    section{
        padding:80px 0;
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .header .container{
        min-height:72px;
        gap:20px;
        flex-wrap:wrap;
    }

    .nav{
        width:100%;
        order:3;
    }

    .nav ul{
        justify-content:center;
        flex-wrap:wrap;
        gap:18px;
        padding-bottom:12px;
    }

    .hero{
        min-height:75vh;
        text-align:center;
    }

    .hero-content{
        margin:0 auto;
    }

    .hero p{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .section-header h2{
        font-size:36px;
    }

    .products-grid,
    #featured-products-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:none;
    }

    .cart-row{
        grid-template-columns:56px 1fr;
        grid-template-areas:
            "img info"
            "img qty"
            "img total"
            "img remove";
        row-gap:10px;
    }

    .cart-row img{
        grid-area:img;
        width:56px;
        height:56px;
    }

    .cart-row-info{ grid-area:info; }
    .qty-stepper{ grid-area:qty; justify-self:start; }
    .cart-row-total{ grid-area:total; }
    .cart-row-remove{ grid-area:remove; justify-self:start; }

    .auth-card{
        padding:32px;
    }

}

/* ---------- Telefony ---------- */

@media (max-width: 768px){

    body{
        font-size:15px;
    }

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

    .cookie-banner{
        flex-direction:column;
        align-items:stretch;
    }

    .cookie-banner-actions{
        justify-content:stretch;
    }

    .cookie-banner-actions button{
        flex:1;
    }

    .header .container{
        justify-content:center;
    }

    .logo{
        margin-bottom:8px;
    }

    .header-actions{
        width:100%;
        display:flex;
        justify-content:center;
        gap:12px;
    }

    .nav ul{
        gap:14px;
    }

    .hero{
        min-height:70vh;
    }

    .hero h1{
        font-size:46px;
        line-height:1.05;
    }

    .hero p{
        font-size:1rem;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn-primary,
    .btn-outline,
    .product-card button{
        width:100%;
        max-width:320px;
    }

    .products-grid,
    #featured-products-grid{
        grid-template-columns:1fr;
    }

    .product-card{
        max-width:420px;
        margin:0 auto;
    }

    .section-header{
        margin-bottom:50px;
    }

    .section-header h2{
        font-size:30px;
    }

    #jakosc h2,
    #faq h2,
    #kontakt h2{
        font-size:30px;
    }

}

/* ---------- Małe telefony ---------- */

@media (max-width:480px){

    .hero{
        min-height:60vh;
    }

    .hero h1{
        font-size:38px;
    }

    .hero p{
        font-size:.95rem;
    }

    .header{
        position:relative;
    }

    .nav ul{
        flex-direction:column;
        align-items:center;
    }

    .header-actions{
        flex-direction:column;
        align-items:center;
    }

    .logo img{
        height:46px;
    }

    .product-card h3{
        font-size:1.2rem;
    }

    .product-card strong{
        font-size:1.3rem;
    }

    details{
        padding:16px;
    }

    .footer{
        font-size:.9rem;
    }

}