* { 
    box-sizing:border-box; 
}
html { 
    overflow-x:hidden; 
}
body { 
    margin:0; 
    font-family:Arial,sans-serif; 
    color:#222; 
    background:#fff; 
    overflow-x:hidden; 
}
.info { 
    background:navy; 
    color:#fff; 
    min-height:55px; 
    padding:10px 5%; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:15px; 
    flex-wrap:wrap; 
    font-size:14px; 
}
.socials { 
    display:flex; 
    gap:6px;
 }
.socials img { 
    width:34px; 
    height:34px; 
    object-fit:cover; 
    border-radius:50%; 
}
.hero { 
    background:#F8F1E8; 
    padding:15px 5%;
     display:flex; 
     align-items:center; 
     justify-content:center; 
     gap:20px; 
    }
.heroimg { 
    width:90px; 
    height:90px; 
    padding:8px; 
    border-radius:50%; 
    background:navy; 
    object-fit:cover; 
}
.name { 
    color:navy; 
    font-size:clamp(32px,5vw,60px); 
    margin:0; 
    font-style:oblique; 
}
nav { 
    background:navy; 
    padding:14px 5%; 
    display:flex; 
    justify-content:flex-end; 
    align-items:center; 
    flex-wrap:wrap; gap:4px; 
}
nav a {
     color:#fff; 
     text-decoration:none; 
     padding:10px 15px; 
     transition:.3s;
     }
nav a:hover { 
    color:navy; 
    background:#F8F1E8;
    }
main { 
    width:min(1100px,92%); 
    margin:30px auto 55px; 
}
.message {
     color:#fff; 
     background:navy; 
     padding:15px;
      text-align:center;
       margin:20px 0 35px; 
    }
.product-details {
     display:grid; 
     grid-template-columns:minmax(0,1fr) minmax(0,1fr); 
     gap:45px; 
     align-items:center;
     }
.product-image-box { 
    text-align:center; 
}
.product-image { 
    width:min(100%,450px); 
    height:430px; 
    object-fit:contain; 
    padding:15px; 
    background:navy; 
    border-radius:35px; 
    box-shadow:0 5px 15px rgba(0,0,0,.2);
 }

.product-info h2 { 
    color:navy; 
    font-size:clamp(28px,4vw,42px); 
    margin:8px 0 15px; 
}
.category { 
    color:#666;
     text-transform:uppercase; 
     letter-spacing:1px; 
     font-weight:bold; 
    }
.prices { 
    margin:15px 0; 
}
.old-price { 
    color:red; 
    text-decoration:line-through; 
    font-size:20px; 
    margin-right:12px; 
}
.new-price { 
    color:green; 
    font-size:25px; 
    font-weight:bold;
 }
.description,.product-info p { 
    line-height:1.7;
 }
#quantity { 
    display:block; 
    width:90px; 
    padding:10px; 
    margin:10px 0 20px; 
    border:2px solid navy; 
    border-radius:5px;
 }
.actions {
     display:flex; 
     gap:12px; 
     flex-wrap:wrap; 
    }
.cart-btn,
.back-btn,
.details-btn {
     display:inline-block; 
     border:2px outset royalblue; 
     padding:12px 18px; 
     background:navy;
      color:#fff;
       text-decoration:none; 
       cursor:pointer; 
       font-weight:bold; 
       border-radius:4px; 
    }
.cart-btn:hover,
.back-btn:hover,
.details-btn:hover { 
    background:royalblue;
 }
.similar-title {
     color:navy; 
     text-align:center; 
     margin:65px 0 25px;
     }
.similar-grid { 
    display:grid; 
    grid-template-columns:repeat(3,minmax(0,1fr)); 
    gap:25px; 
}
.similar-card { 
    text-align:center;
     padding:18px; 
     border:1px solid #eee;
      border-radius:8px; 
      box-shadow:0 3px 12px rgba(0,0,0,.08); 
      background:#fff;
     }
.similar-card img { 
    width:100%; 
    height:220px; 
    object-fit:contain; 
    background:navy; 
    border-radius:20px;
     padding:10px; 
    }
.similar-card h3 { 
    color:navy; 
    min-height:42px; 
}
.similar-price { 
    color:green; 
    font-weight:bold;
 }
footer { 
    color:whitesmoke; 
    background:navy; 
    text-align:center; 
    padding:20px; 
}
@media(max-width:768px){
    .info{
        justify-content:center;
        text-align:center
    }
        .hero{
            flex-direction:column;
            text-align:center
        }
        nav{
            justify-content:center
        }
        .product-details
        {
            grid-template-columns:1fr;
            gap:30px
        }
        .product-image{
            height:350px
        }.product-info{
            
            text-align:center
        }#quantity{
            margin-left:auto;
            margin-right:auto
        }.actions{
            justify-content:center
        }
        .similar-grid{
            grid-template-columns:1fr 1f
        }
    }
@media(max-width:480px){
    .info{
        padding:10px;
        font-size:12px
    }.hero{
        padding:15px 10px
    }
    .heroimg{
        width:75px;
        height:75px
    }
    nav a{
        padding:8px 9px;
        font-size:12px
    }
    main{
        width:94%;
        margin-top:25px
    }
    .message{
        font-size:24px
    }
    .product-image{
        height:280px
    }
    .actions a,
    .actions button{
         width:100%
    }
}
.similar-grid{
    grid-template-columns:1fr
}
.similar-card img
{
    height:200px
}