*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#211c1c;background:#fff}a{text-decoration:none;color:inherit}.topbar{background:#171313;color:#fff;text-align:center;padding:9px;font-size:12px;letter-spacing:.08em}.nav-wrap{max-width:1200px;margin:auto;padding:18px 24px;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;white-space:nowrap}.brand img{width:45px;height:45px;border-radius:50%;object-fit:cover}.nav-wrap nav{display:flex;gap:20px;margin-left:auto;font-size:14px}.wa{background:#171313;color:#fff;padding:12px 17px;border-radius:999px;font-weight:700}.hero{max-width:1200px;margin:auto;padding:55px 24px 75px;display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:#8d6969}.hero h1{font:700 clamp(44px,6vw,76px)/.98 Georgia,serif;margin:12px 0 20px}.hero-copy>p:not(.eyebrow){font-size:18px;line-height:1.7;max-width:530px;color:#625858}.actions{display:flex;gap:12px;margin-top:28px}.btn{display:inline-block;background:#211c1c;color:#fff;padding:14px 22px;border-radius:4px;font-weight:700}.btn.ghost{background:#f1e9e7;color:#211c1c}.hero-images{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hero-images img{width:100%;height:430px;object-fit:cover;border-radius:6px}.hero-images img+img{margin-top:55px}.section{max-width:1200px;margin:auto;padding:75px 24px}.heading{text-align:center;margin-bottom:30px}.heading h2,.contact h2{font:700 40px Georgia,serif;margin:5px 0 12px}.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.category-grid button{border:1px solid #ddd;background:#faf7f6;padding:30px 15px;border-radius:5px;font:700 19px Georgia,serif;cursor:pointer}.category-grid button:hover{background:#211c1c;color:#fff}.category-grid span{display:block;font:11px Arial;margin-top:8px;opacity:.65}.row{display:flex;justify-content:space-between;align-items:end;text-align:left}.row input{width:260px;padding:13px 15px;border:1px solid #ddd;border-radius:4px}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{border:1px solid #eee;background:#fff;position:relative}.card img{width:100%;height:330px;object-fit:cover;display:block}.card img.second-img{margin-top:6px}.card-body{padding:18px}.badge{position:absolute;top:12px;left:12px;background:#211c1c;color:#fff;padding:7px 10px;border-radius:3px;font-size:11px;font-weight:800}.sale{color:#a33;font-weight:800}.old{text-decoration:line-through;color:#999;margin-right:8px}.card h3{margin:0 0 7px;font:700 21px Georgia,serif}.details{color:#777;font-size:13px}.price{font-weight:800;margin:14px 0;font-size:18px}.order{display:block;text-align:center;background:#211c1c;color:#fff;padding:12px;border-radius:3px}.services{background:#f5efed;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:35px max(24px,calc((100% - 1152px)/2));text-align:center}.services b,.services span{display:block}.services span{margin-top:7px;color:#756969;font-size:13px}.contact{display:flex;justify-content:space-between;align-items:center;gap:25px}footer{background:#171313;color:#fff;padding:35px 24px;text-align:center}footer div{margin:12px 0;color:#ddd;font-size:13px}footer small{color:#aaa}@media(max-width:800px){.nav-wrap nav{display:none}.hero{grid-template-columns:1fr}.category-grid,.products{grid-template-columns:1fr 1fr}.services{grid-template-columns:1fr}.contact{display:block}.row{display:block}.row input{margin-top:15px;width:100%}}@media(max-width:520px){.category-grid,.products{grid-template-columns:1fr}.section{padding:55px 18px}.hero-images img{height:230px}}
/* Responsive customer storefront: compact shopping grid on phones, fuller desktop layout */
@media (min-width: 1200px){
  .nav-wrap,.hero,.section{max-width:1320px}
  .products{grid-template-columns:repeat(4,1fr)}
  .hero{grid-template-columns:1.05fr .95fr}
}
@media (max-width: 800px){
  .nav-wrap{padding:14px 16px}
  .brand{font-size:17px}
  .brand img{width:38px;height:38px}
  .hero{padding:34px 16px 48px;gap:28px}
  .hero h1{font-size:clamp(38px,10vw,58px)}
  .hero-copy>p:not(.eyebrow){font-size:15px}
  .section{padding:48px 16px}
  .heading h2,.contact h2{font-size:32px}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .category-grid button{padding:20px 10px;font-size:16px}
  .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card img{height:230px}
  .card-body{padding:11px}
  .card h3{font-size:16px;line-height:1.25}
  .details{font-size:11px}
  .price{font-size:15px;margin:9px 0}
  .order{font-size:12px;padding:10px 6px}
  .badge{top:8px;left:8px;padding:5px 7px;font-size:9px}
  .services{padding:28px 16px}
}
@media (max-width: 520px){
  .hero-images{gap:8px}
  .hero-images img{height:220px}
  .hero-images img+img{margin-top:28px}
  .row input{font-size:14px}
  .card img{height:210px}
}