*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Arial, sans-serif;
background:#f4f3ef;
color:#101010;
}


header{

background:#243958;
color:white;

display:flex;
justify-content:space-between;
align-items:center;

padding:35px 70px;

}


.logo{

font-size:22px;
font-weight:bold;

}


nav a{

color:white;
text-decoration:none;
margin-left:35px;
}



.hero{

background:#243958;
color:white;

display:flex;
align-items:center;
justify-content:space-between;

padding:100px 10%;

}


.hero-text{

width:45%;

}


.hero h1{

font-family:Georgia,serif;

font-size:70px;
line-height:1.1;

}



.hero p{

font-size:20px;
line-height:1.5;

}



.hero img{

width:45%;

}



button{

background:white;
border:none;

padding:20px 60px;

border-radius:40px;

cursor:pointer;

}



.products{

padding:90px 10%;
text-align:center;

}


.products h2,
.gallery h2{

font-family:Georgia,serif;

font-size:55px;

}



.product-grid{

display:flex;
justify-content:center;
gap:80px;

}



.product-grid img{

width:280px;
height:280px;

border-radius:50%;

object-fit:cover;

}


.product-grid button{

background:#243958;
color:white;

padding:15px 50px;

}



.about{

display:flex;
justify-content:space-between;

padding:100px 10%;

}



.about img{

width:40%;

}



.about h2{

font-family:Georgia,serif;

font-size:60px;

}



.gallery{

padding:100px 10%;
text-align:center;

}



.gallery-grid{

display:flex;
gap:40px;

}



.gallery-grid img{

width:22%;
height:300px;

object-fit:cover;

border-radius:50%;

}



footer{

padding:80px;

display:flex;
justify-content:space-between;

background:#f4f3ef;

font-family:Georgia,serif;

}
.product-grid p {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    margin: 18px 0 8px;
    color: #111;
}


.product-grid span {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 18px;
    color: #243958;
}


.product-grid button {
    font-family: Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
}
nav {
    display: flex;
    gap: 45px;
    align-items: center;
}


nav a {
    color: white;
    text-decoration: none;

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;

    letter-spacing: 0.5px;

    position: relative;
    padding: 8px 0;

    transition: 0.3s;
}


/* нижняя линия при наведении */

nav a::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;

    width: 0%;
    height: 2px;

    background: white;

    transition: 0.3s;
}


nav a:hover::after {
    width: 100%;
}


nav a:hover {
    opacity: 0.8;
}
.cart-btn {

    border:1px solid rgba(255,255,255,0.7);

    padding:10px 24px;

    border-radius:30px;

    transition:0.3s;

}


.cart-btn:hover {

    background:white;

    color:#243958;

}


.cart-btn::after {
    display:none;
}
#cart-panel {

position:fixed;

right:-420px;
top:0;

width:380px;
height:100vh;

background:white;

padding:30px;

box-shadow:-5px 0 20px rgba(0,0,0,.2);

transition:.4s;

z-index:1000;

}


#cart-panel.open {

right:0;

}



.cart-header {

display:flex;
justify-content:space-between;
align-items:center;

}


#close-cart {

font-size:30px;
border:none;
background:none;

}


.cart-item {

display:flex;
justify-content:space-between;

margin:20px 0;

}



#buy-btn {

width:100%;

background:#243958;

color:white;

border:none;

padding:18px;

border-radius:30px;

}



#checkout {

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.5);

z-index:2000;

align-items:center;
justify-content:center;

}



#checkout.active {

display:flex;

}



.checkout-box {

background:white;

padding:40px;

border-radius:20px;

width:400px;

text-align:center;

}



.checkout-box input {

width:100%;

padding:15px;

margin:20px 0;

border:1px solid #ccc;

border-radius:10px;

}



#send-order {

background:#243958;

color:white;

border:none;

padding:15px 40px;

border-radius:30px;

}
/* CART DESIGN */

#cart-panel {

    font-family: Arial, sans-serif;

}


#cart-panel h2 {

    font-family: Georgia, serif;
    font-size: 32px;
    color:#243958;

}


.cart-item {

    font-family: Arial, sans-serif;

    font-size:18px;

    color:#333;

    padding:15px 0;

    border-bottom:1px solid #eee;

}


.cart-total {

    font-family: Georgia, serif;

    font-size:22px;

    font-weight:bold;

    margin:25px 0;

    color:#243958;

}


#buy-btn {

    font-family: Arial, sans-serif;

    font-size:14px;

    letter-spacing:2px;

    cursor:pointer;

}


#close-cart {

    cursor:pointer;

    color:#243958;

}
#close-checkout {

position:absolute;

right:20px;
top:15px;

background:none;
border:none;

font-size:32px;

color:#243958;

cursor:pointer;

}


.checkout-box {

position:relative;

}
.cart-item button {

width:30px;
height:30px;

border-radius:50%;

border:1px solid #243958;

background:white;

cursor:pointer;

margin:0 8px;

}


.cart-item {

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 0;

border-bottom:1px solid #ddd;

font-family:Arial,sans-serif;

}
/* quantity buttons */

.cart-item .qty-btn {

    width:32px;
    height:32px;

    padding:0;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:1px solid #243958;

    background:white;

    color:#243958;

    font-size:18px;

    line-height:1;

    cursor:pointer;

    margin:0 8px;

}


.cart-item .qty-btn:hover {

    background:#243958;

    color:white;

}



/* quantity block */

.quantity {

    display:flex;

    align-items:center;

    margin-top:12px;

    font-size:16px;

    color:#333;

}



.quantity span {

    min-width:55px;

    text-align:center;

}
.qty-btn {

    width:32px !important;
    height:32px !important;

    padding:0 !important;

    border-radius:50% !important;

    background:white !important;

    color:#243958 !important;

    border:1px solid #243958 !important;

    font-size:18px !important;

}


.qty-btn:hover {

    background:#243958 !important;

    color:white !important;

}


.quantity {

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:12px;

}


.quantity span {

    min-width:45px;

    text-align:center;

}


.cart-item {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 0;

    border-bottom:1px solid #eee;

}
.checkout-box {
    position: relative;
}


.close-checkout {

    position:absolute;

    top:15px;
    right:20px;

    width:35px;
    height:35px;

    padding:0;

    border:none;

    background:none;

    color:#243958;

    font-size:32px;

    line-height:30px;

    cursor:pointer;

    z-index:10;

}


.close-checkout:hover {

    opacity:0.6;

}