body{margin:0;font-family:Arial,sans-serif;background:#f7f7f7;color:#222}header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:16px;background:#006c35;color:#fff}.logo{display:flex;align-items:center;gap:12px}.logo img{width:64px}.ar{color:#d4af37}#search{padding:10px;border-radius:20px;border:none}.hero{padding:60px;text-align:center;background:#dff0df}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;padding:20px}.card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1)}footer{background:#222;color:#fff;text-align:center;padding:20px}/* Navigation */
nav ul{
    display:flex;
    list-style:none;
    margin:0;
    padding:0;
}

nav li{
    margin:0;
}

nav a{
    color:#fff;
    text-decoration:none;
    margin:0 10px;
    font-weight:bold;
}

nav a:hover{
    color:#d4af37;
}

/* Burger button */
.burger{
    display:none;
    background:none;
    border:none;
    color:#fff;
    font-size:32px;
    cursor:pointer;
    padding:0;
}
#products img{
    width:50%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:8px;
}

/* Mobile */
@media (max-width:768px){

    header{
        position:relative;
    }

    .burger{
        display:block;
        order:2;
    }

    #search{
        width:100%;
        margin-top:12px;
        order:3;
    }

    nav{
        display:none;
        width:100%;
        background:#006c35;
        order:4;
    }

    nav.active{
        display:block;
    }

    nav ul{
        flex-direction:column;
    }

    nav li{
        border-top:1px solid rgba(255,255,255,.2);
    }

    nav a{
        display:block;
        margin:0;
        padding:15px;
    }
}
/* Contact Form */
.contact{
    width:calc(100% - 40px);
    max-width:1200px;
    margin:20px auto;
    padding:20px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    box-sizing:border-box;
}

.contact h2{
    text-align:center;
    margin:0 0 25px;
    font-size:clamp(28px,4vw,48px);
}

.contact form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.contact input,
.contact textarea{
    width:100%;
    padding:16px;
    font-size:16px;
    border:1px solid #ccc;
    border-radius:12px;
    box-sizing:border-box;
    font-family:inherit;
}

.contact textarea{
    min-height:220px;
    resize:vertical;
}

.contact button{
    width:100%;
    padding:16px;
    border:none;
    border-radius:12px;
    background:#0a7a37;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    transition:.25s;
}

.contact button:hover{
    background:#0c8f41;
}

.contact button:active{
    transform:scale(.98);
}

.contact button:disabled{
    opacity:.7;
    cursor:not-allowed;
}

/* Tablet */
@media (max-width:768px){

    .contact{
    width:calc(100% - 32px);
    margin:16px auto;
    padding:18px;
}

    .contact h2{
        font-size:36px;
    }

    .contact input,
    .contact textarea,
    .contact button{
        font-size:18px;
    }

    .contact textarea{
        min-height:180px;
    }
}

/* Small phones */
@media (max-width:480px){

    .contact{
    width:calc(100% - 20px);
    margin:10px auto;
    padding:16px;
    border-radius:12px;
}

    .contact h2{
        font-size:28px;
    }

    .contact input,
    .contact textarea{
        padding:14px;
        font-size:16px;
    }

    .contact button{
        padding:15px;
        font-size:18px;
    }
}
/* Pagination */

.pages{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin:30px auto;
    padding:10px;
}

.pages a{
    min-width:46px;
    height:46px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:#006c35;
    background:#fff;
    border:2px solid #006c35;
    border-radius:50%;
    font-weight:bold;
    transition:.25s;
}

.pages a:hover{
    background:#006c35;
    color:#fff;
    transform:translateY(-2px);
}

.pages a.active{
    background:#006c35;
    color:#fff;
}

@media(max-width:768px){

    .pages{
        gap:8px;
    }

    .pages a{
        min-width:42px;
        height:42px;
        font-size:15px;
    }

}

@media(max-width:480px){

    .pages{
        gap:6px;
    }

    .pages a{
        min-width:38px;
        height:38px;
        font-size:14px;
    }

}
.product-page{
display:flex;
gap:30px;
margin:30px auto;
max-width:1200px;
padding:20px;
background:#fff;
border-radius:15px;
}

.left{
flex:1;
}

.right{
flex:1;
}

#mainImage{
width:100%;
border-radius:10px;
}

.thumbs{
display:flex;
gap:10px;
margin-top:10px;
flex-wrap:wrap;
}

.thumbs img{
width:80px;
height:80px;
object-fit:cover;
cursor:pointer;
border-radius:8px;
border:2px solid #ddd;
}

video{
width:100%;
margin-top:20px;
border-radius:10px;
}

.description{
max-width:1200px;
margin:30px auto;
padding:20px;
background:#fff;
border-radius:15px;
}

@media(max-width:768px){

.product-page{
display:block;
}

.right{
margin-top:20px;
}

}
.cart-btn{
    width:100%;
    padding:16px 20px;
    background:#0a7a37;
    color:#fff;
    border:none;
    border-radius:12px;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
    box-shadow:0 6px 18px rgba(10,122,55,.25);
}

.cart-btn:hover{
    background:#0d9041;
    transform:translateY(-2px);
}

.cart-btn:active{
    transform:translateY(0);
}
.shipping-table{
    width:100%;
    overflow-x:auto;
    margin:20px 0;
}

.shipping-table table{
    width:100%;
    border-collapse:collapse;
}

.shipping-table th,
.shipping-table td{
    border:1px solid #ddd;
    padding:12px;
    text-align:left;
}

.shipping-table th{
    background:#f5f5f5;
}

@media (max-width:768px){
    .shipping-table th,
    .shipping-table td{
        padding:8px;
        font-size:14px;
    }
}