*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#f6f6f6;color:#222;line-height:1.6}
.container{width:min(92%,1200px);margin:auto}
.site-header{background:#111;padding:18px 0}
.header-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}
.logo,nav a{color:#fff;text-decoration:none}
.logo{font-size:24px;font-weight:bold}
nav{display:flex;gap:16px;flex-wrap:wrap}
.hero{min-height:430px;margin:30px 0;border-radius:14px;display:grid;place-items:center;text-align:center;color:white;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),url('/assets/images/hero.jpg') center/cover}
.hero h1{font-size:clamp(36px,6vw,64px);margin:0}
.button{display:inline-block;background:#111;color:#fff;padding:12px 22px;border:0;border-radius:6px;text-decoration:none;cursor:pointer}
.product-grid,.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin:24px 0 40px}
.card,.product-page,.checkout-form{background:#fff;padding:20px;border-radius:12px}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.card a{color:#111;text-decoration:none}
.product-page{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:30px 0}
.product-page img{width:100%;border-radius:12px}
.price{font-size:28px;font-weight:bold}
.stock{color:#16833b;font-weight:bold}
.breadcrumbs{margin:25px 0}
.breadcrumbs a{color:#333}
.checkout-form{max-width:650px}
.checkout-form label{display:block;margin-bottom:16px}
.checkout-form input,.checkout-form textarea{width:100%;padding:12px;margin-top:6px}
.site-footer{background:#111;color:#fff;margin-top:40px;padding:25px 0}
@media(max-width:760px){.header-inner,.product-page{grid-template-columns:1fr;display:grid}.header-inner{justify-items:center}}

.cart-list{display:grid;gap:18px;margin:25px 0}
.cart-row{display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:center;background:#fff;padding:18px;border-radius:12px}
.cart-row img{width:120px;height:90px;object-fit:cover;border-radius:8px}
.cart-summary,.checkout-panel,.status-panel{background:#fff;padding:28px;border-radius:12px;margin:25px 0}
.checkout-panel p{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #ddd;padding-bottom:10px}
.text-button{background:none;border:0;text-decoration:underline;cursor:pointer}
.small-print{font-size:.9rem;color:#555}
@media(max-width:600px){.cart-row{grid-template-columns:1fr}.cart-row img{width:100%;height:auto}}

.main-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav-dropdown{position:relative}
.dropdown-toggle{display:inline-flex;align-items:center;gap:5px}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-35%);width:min(720px,90vw);padding:22px;background:#fff;border-radius:12px;box-shadow:0 18px 45px rgba(0,0,0,.22);grid-template-columns:repeat(3,minmax(170px,1fr));gap:24px;z-index:1000}
.dropdown-menu:before{content:"";position:absolute;top:-12px;left:0;width:100%;height:12px}
.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu{display:grid}
.dropdown-column{display:flex;flex-direction:column;gap:8px}
.dropdown-menu a{color:#333;text-decoration:none;padding:5px 0}
.dropdown-menu a:hover,.dropdown-menu a:focus{text-decoration:underline}
.dropdown-heading{font-size:1.05rem;font-weight:700;padding-bottom:7px!important;margin-bottom:3px;border-bottom:1px solid #ddd}
@media(max-width:820px){.main-nav{justify-content:center}.nav-dropdown{position:static}.dropdown-menu{left:5%;right:5%;width:90%;transform:none;grid-template-columns:1fr;max-height:70vh;overflow-y:auto}}