*{box-sizing:border-box}html,body{margin:0;padding:0}
html,body{height:100%}
body{display:flex;flex-direction:column;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0f172a;background:#ffe4e6;line-height:1.6}
img{max-width:100%;height:auto}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 16px}
.announcement{background:#4f46e5;color:#fff;font-size:14px}
.announcement .container{padding:8px 16px;text-align:center}
.site-header{position:sticky;top:0;background:#4f46e5;border-bottom:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:700;color:#fff;text-decoration:none;font-size:20px}
.nav a{margin:0 12px;color:#fff;text-decoration:none}
.nav a:hover{text-decoration:underline}
.header-actions{display:flex;align-items:center;gap:12px}
.search input{height:36px;border:1px solid #cbd5e1;border-radius:999px;padding:0 12px;width:240px}
.search input:focus{outline:2px solid #94a3b8}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;width:36px;border-radius:999px;border:1px solid #cbd5e1;background:#fff;cursor:pointer}
.icon-btn:hover{background:#f8fafc}
.icon{font-size:16px}
.cart-btn{position:relative}
.badge{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;border-radius:999px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:0 4px;border:2px solid #fff}
.menu-toggle{display:none;border:0;background:transparent;font-size:24px}
.site-main{display:block;flex:1 0 auto}
.hero{padding:96px 0;background:linear-gradient(180deg,#f8fafc,transparent)}
.hero h1{font-size:40px;margin:0 0 8px}
.hero p{margin:0 0 16px;color:#475569}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;color:#111;text-decoration:none}
.btn:hover{background:#f8fafc}
.btn-primary{background:#4f46e5;color:#fff;border-color:#4f46e5}
.btn-primary:hover{background:#4338ca}
.btn-outline{background:#fff;color:#111;border-color:#94a3b8}
.btn-block{display:flex;width:100%;text-align:center}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{border:1px solid #e2e8f0;border-radius:12px;padding:16px;background:#fff}
.products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.product-card{border:1px solid #e2e8f0;border-radius:12px;padding:12px;background:#fff;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease}
.product-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.06);border-color:#cbd5e1}
.product-card img{width:100%;height:220px;object-fit:cover;border-radius:8px;background:#f1f5f9}
.product-card h4{margin:8px 0 4px;font-size:16px}
.price{font-weight:600}
.contact-form{max-width:640px}
.form-row{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.form-row input,.form-row textarea{border:1px solid #cbd5e1;border-radius:8px;padding:10px 12px;font:inherit}
.categories{padding:32px 0}
.categories-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.category-card{position:relative;border-radius:16px;overflow:hidden;height:220px}
.category-card img{width:100%;height:100%;object-fit:cover;display:block}
.category-card .overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55))}
.category-card .label{position:absolute;left:12px;bottom:12px;color:#fff;font-weight:600}
.usp-band{background:#f8fafc;padding:32px 0;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;margin:32px 0}
.testimonials{padding:32px 0}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.testimonial{border:1px solid #e2e8f0;border-radius:12px;padding:16px;background:#fff}
.newsletter-section{padding:32px 0;background:linear-gradient(180deg,#fff,#f8fafc)}
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 16px}
.shop-controls{display:flex;align-items:center;gap:8px}
.dropdown{position:relative}
.dropdown .dropdown-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.08);padding:8px;display:none;min-width:220px;z-index:20}
.dropdown .dropdown-menu a{display:block;padding:8px 10px;color:#0f172a;text-decoration:none;border-radius:6px}
.dropdown .dropdown-menu a:hover{background:#f8fafc}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.tab{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:999px;border:1px solid #cbd5e1;background:#fff;color:#0f172a;text-decoration:none;font-weight:500}
.tab:hover{background:#f8fafc}
.tab.active{background:#4f46e5;color:#fff;border-color:#4f46e5}
.brands-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:24px 0;justify-items:center}
.brand-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:140px}
.brand-logo img{max-width:140px;max-height:60px;object-fit:contain;filter:grayscale(20%)}
.brand-name{font-weight:600;color:#0f172a;font-size:14px}
.site-footer{margin-top:56px;padding:32px 0;border-top:0;background:#4f46e5;color:#fff}
.site-footer a{color:#eef2ff}
.site-footer h4{color:#fff}
.site-footer .btn-primary{background:#fff;color:#4f46e5;border-color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.newsletter{display:flex;gap:8px}
.newsletter input{flex:1;border:1px solid #cbd5e1;border-radius:8px;height:40px;padding:0 12px}
/* Cart drawer */
.cart-drawer{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:60}
.cart-drawer.open{opacity:1;pointer-events:auto}
.cart-panel{position:absolute;right:0;top:0;height:100%;width:380px;max-width:100%;background:#fff;box-shadow:-2px 0 12px rgba(0,0,0,.08);display:flex;flex-direction:column}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #e2e8f0}
.cart-items{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.cart-item{display:flex;gap:12px;border:1px solid #e2e8f0;border-radius:8px;padding:8px}
.cart-item img{width:64px;height:64px;object-fit:cover;border-radius:8px;background:#f1f5f9}
.cart-item .meta{flex:1}
.cart-footer{padding:16px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:8px}
/* Large screens tweak */
@media (min-width:1200px){.container{max-width:1280px}}

/* Tablets */
@media (max-width:900px){
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:1fr}
  .categories-grid{grid-template-columns:1fr 1fr}
  .testimonial-grid{grid-template-columns:1fr}
  .brands-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .footer-grid{grid-template-columns:1fr}
  .menu-toggle{display:block}
  .nav{display:none}
  .search input{width:160px}
  .hero{padding:72px 0}
  .hero h1{font-size:32px}
  .product-card img{height:200px}
  .cart-panel{width:88vw}
}
.categories-grid {
  display: flex;
  flex-wrap: wrap; /* allows wrapping if there are many items */
  gap: 20px;        /* optional spacing between cards */
  justify-content: center; /* optional: centers the cards */
}


/* Phones */
@media (max-width:600px){
  .header-inner{height:56px}
  .logo{font-size:18px}
  .search{display:none}
  .hero h1{font-size:28px}
  .hero p{font-size:14px}
  .products-grid{grid-template-columns:1fr}
  .categories-grid{grid-template-columns:1fr}
  .brands-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .product-card img{height:180px}
  .btn{height:38px}
  .cart-panel{width:100vw}
}