*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",Arial,sans-serif;background:#e2e7e6;color:#0f1111}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid #febd68;outline-offset:2px}
[hidden]{display:none!important}

/* NAVBAR */
.navbar{min-height:60px;background:#0f1111;color:#fff;display:flex;align-items:center;gap:10px;padding:6px 12px;flex-wrap:wrap}
.border{border:1.5px solid transparent;border-radius:3px;padding:4px 6px}
.border:hover{border-color:#fff}
.menu-btn{display:none;font-size:1.4rem;color:#fff}
.nav-logo{height:50px;width:110px;flex:none}
.logo,.logo1{background:url("amazon.png") center/contain no-repeat;height:100%;width:100%}
.a1{color:#ccc;font-size:.8rem;margin-left:15px}
.a2{font-size:1rem;margin-left:3px;font-weight:700}
.add-icon{display:flex;align-items:center}
.nav-search{display:flex;flex:1;min-width:200px;max-width:800px;height:40px;border-radius:4px;overflow:hidden;border:2px solid transparent}
.nav-search:focus-within{border-color:#febd68}
.search-select{background:#f3f3f3;width:60px;border:0;text-align:center;color:#0f1111}
.search-input{flex:1;min-width:0;font-size:1rem;border:0;padding:0 10px}
.search-icon{width:45px;display:flex;justify-content:center;align-items:center;font-size:1.2rem;background:#febd68;color:#0f1111}
.search-icon:hover{background:#f3a847}
.navbar span{font-size:.75rem}
.nav-second{font-size:.85rem;font-weight:700}
.nav-cart{display:flex;align-items:center;gap:4px;font-weight:700;position:relative;color:#fff}
.nav-cart i{font-size:32px}
.cart-count{position:absolute;top:-4px;left:22px;color:#f08804;font-size:1rem!important;font-weight:700}
.nav-signin,.nav-return{color:#fff}

/* PANEL */
.panel{min-height:40px;background:#222f3d;display:flex;color:#fff;align-items:center;gap:15px;padding:0 15px;overflow-x:auto;white-space:nowrap}
.panel-all{color:#fff;font-weight:700}
.one{display:flex;gap:15px;font-size:.9rem}
.two{font-size:.9rem;font-weight:700;margin-left:auto}
.panel a:hover,.panel button:hover{text-decoration:underline}

/* HERO */
.hero-section{position:relative;background:linear-gradient(#37475a,#e2e7e6) , url("hero1.jpg");background:url("hero1.jpg") center/cover,#37475a;height:250px;display:flex;align-items:center;justify-content:space-between}
.hero-text{color:#fff;text-align:center;padding:0 10px;text-shadow:0 2px 6px rgba(0,0,0,.6);flex:1}
.hero-text h1{font-size:clamp(1.3rem,4vw,2.4rem)}
.hero-text a{display:inline-block;margin-top:12px;background:#febd68;color:#0f1111;padding:8px 18px;border-radius:20px;font-weight:700;text-shadow:none}
.hero-arrow{height:100%;width:60px;font-size:1.8rem;color:#fff;text-align:center}
.hero-arrow:hover{background:rgba(0,0,0,.25)}

/* PRODUCT GRID */
.shop-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;padding:15px;margin-top:-60px;position:relative}
.box{background:#fff;padding:20px 0 15px;display:flex}
.box-content{margin:0 1rem;display:flex;flex-direction:column;width:calc(100% - 2rem)}
.box h2{font-size:1.15rem;margin-bottom:.5rem}
.box-img{height:220px;background:#eaeded center/cover no-repeat;margin:.5rem 0}
.price{font-weight:700;font-size:1.1rem}
.box-actions{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}
.see-more{color:#007185;font-size:.9rem}
.see-more:hover{color:#c7511f;text-decoration:underline}
.add-btn{background:#ffd814;border-radius:20px;padding:6px 14px;font-size:.85rem}
.add-btn:hover{background:#f7ca00}
.no-results{text-align:center;padding:40px 15px;font-size:1.1rem}

/* BUTTONS */
.btn-yellow{background:#ffd814;border-radius:20px;padding:10px;width:100%;text-align:center;font-weight:600}
.btn-yellow:hover{background:#f7ca00}
.btn-link{color:#007185;margin-top:8px;font-size:.9rem}

/* OVERLAY, SIDEBAR, CART */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s;z-index:50}
.overlay.show{opacity:1;pointer-events:auto}
.sidebar,.cart-drawer{position:fixed;top:0;bottom:0;background:#fff;z-index:60;width:min(360px,88vw);transition:transform .25s;display:flex;flex-direction:column;overflow-y:auto}
.sidebar{left:0;transform:translateX(-100%)}
.cart-drawer{right:0;transform:translateX(100%)}
.sidebar.open,.cart-drawer.open{transform:none}
.sidebar-head{background:#232f3e;color:#fff;padding:16px;display:flex;justify-content:space-between;font-weight:700}
.sidebar h3{padding:16px 16px 6px}
.sidebar a{padding:12px 16px;border-bottom:1px solid #eee}
.sidebar a:hover{background:#eaeded}
.close-btn{font-size:1.3rem;color:inherit}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #ddd}
.cart-items{flex:1;overflow-y:auto;padding:10px 16px}
.cart-empty{padding:30px 0;text-align:center;color:#565959}
.cart-row{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #eee;align-items:center}
.cart-thumb{width:64px;height:64px;background:#eaeded center/cover;flex:none}
.cart-info{flex:1;font-size:.9rem}
.qty{display:inline-flex;align-items:center;border:1px solid #d5d9d9;border-radius:8px;margin-top:6px}
.qty button{padding:2px 10px}
.qty span{padding:0 8px}
.cart-foot{padding:16px;border-top:1px solid #ddd;display:flex;flex-direction:column;gap:8px}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:70;padding:15px}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:8px;padding:24px;width:min(380px,100%);display:flex;flex-direction:column;gap:12px;position:relative}
.modal-box .close-btn{position:absolute;top:10px;right:12px}
.modal-box label{display:flex;flex-direction:column;gap:4px;font-size:.9rem;font-weight:600}
.modal-box input{padding:9px;border:1px solid #888;border-radius:3px;font-size:1rem}

.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,100px);background:#0f1111;color:#fff;padding:10px 18px;border-radius:6px;transition:transform .25s;z-index:80}
.toast.show{transform:translate(-50%,0)}

/* FOOTER */
footer{margin-top:15px}
.footpanel1{background:#37475a;color:#fff;height:50px;display:flex;justify-content:center;align-items:center;font-size:.85rem}
.footpanel1:hover{background:#485769}
.footpanel2{background:#222f3d;color:#fff;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;padding:30px 5%}
.footpanel2 p{font-weight:700}
ul a{display:block;font-size:.85rem;margin-top:10px;color:#ddd}
ul a:hover{text-decoration:underline}
.footpanel3{background:#222f3d;border-top:.5px solid #888;height:70px;display:flex;justify-content:center;align-items:center}
.logo1{width:130px;height:45px}
.footpanel4{background:#0f1111;color:#fff;padding:25px 10px}
.pages{font-size:.75rem;text-align:center;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.copyright{font-size:.75rem;text-align:center;padding-top:8px}

/* RESPONSIVE */
@media (max-width:900px){
  .menu-btn{display:block}
  .nav-address,.nav-return,.panel-all{display:none}
  .nav-search{order:10;flex-basis:100%;max-width:none}
  .navbar{justify-content:space-between}
  .nav-logo{margin-right:auto}
  .two{display:none}
}
@media (max-width:520px){
  .nav-signin{display:none}
  .hero-section{height:200px}
  .hero-arrow{width:36px}
  .shop-section{margin-top:-30px;grid-template-columns:1fr 1fr;gap:10px;padding:10px}
  .box h2{font-size:1rem}
  .box-img{height:130px}
  .box-actions{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:360px){.shop-section{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}