/* ============ ONE FILE FOR DESKTOP + MOBILE ============ */
*{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;box-sizing:border-box}
html,body{overflow-x:hidden;width:100%}
body{background:#f4f4f4;color:#222;line-height:1.5}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;font-weight:700;font-size:15px}
img{display:block;max-width:100%;height:auto}

/* SAME EDGE ON EVERY SCREEN */
.hero,.tiles,.breadcrumb,.shop,.usp,.detail,.areas{
  width:100%;max-width:1240px;margin-left:auto;margin-right:auto;
  padding-left:20px;padding-right:20px;
}

.topbar{background:#111;color:#fff;text-align:center;padding:8px 10px;font-size:12px}
.topbar a{color:#f5b301;font-weight:800}

/* HEADER: desktop = 1 row, mobile = wraps clean, never overlaps */
.main-header{background:#222;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;flex-wrap:wrap;position:sticky;top:0;z-index:30}
.logo{font-size:clamp(20px,4vw,26px);font-weight:900;white-space:nowrap}
.logo span{color:#f5b301;margin-left:4px}
.btn-gold{background:#f5b301;color:#111;padding:12px 20px;border-radius:4px;white-space:nowrap}
.btn-white{background:#fff;color:#111;padding:12px 20px;border-radius:4px;white-space:nowrap}
.btn-dark{background:#111;color:#fff;padding:12px 18px;border-radius:4px}
.btn-clear{background:#eee;color:#111;padding:11px;border-radius:4px}
.full{width:100%}

.cat-nav{background:#fff;border-bottom:1px solid #ddd;display:flex;gap:22px;padding:12px 20px;overflow-x:auto;white-space:nowrap;font-weight:700;font-size:14px;-webkit-overflow-scrolling:touch}
.cat-nav a{flex-shrink:0}

/* HERO: desktop 2 columns, mobile 1 column, same order */
.hero{background:#fff;display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;padding-top:26px;padding-bottom:26px;margin-top:16px;margin-bottom:16px}
.hero h1{font-size:clamp(30px,5vw,42px);line-height:1.1;margin-bottom:10px}
.hero p{color:#555;max-width:480px}
.hero-price{margin-top:14px}
.hero img{width:100%;height:300px;object-fit:cover;border-radius:6px}
.hero > div{min-width:0}
.hero > div a{display:inline-block;margin:14px 8px 0 0}

/* TILES: desktop 4, tablet 2, mobile 2 - all same height */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:0;padding-bottom:0}
.tiles a{position:relative;display:block;background:#fff;border-radius:6px;overflow:hidden;height:150px}
.tiles img{width:100%;height:150px;object-fit:cover}
.tiles span{position:absolute;left:10px;bottom:10px;background:#111;color:#fff;padding:6px 10px;border-radius:4px;font-weight:700;font-size:13px;max-width:calc(100% - 20px)}

.areas{margin-top:22px;margin-bottom:6px}
.areas h2{margin-bottom:12px;font-size:clamp(20px,3vw,26px)}
.areas a{display:inline-block;background:#fff;border:1px solid #ddd;padding:9px 14px;border-radius:20px;margin:0 6px 8px 0;font-weight:700}
.breadcrumb{margin-top:16px;color:#777;font-size:13px;word-break:break-word}

/* SHOP: desktop sidebar + grid, mobile sidebar on top, grid below */
.shop{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start;padding-top:14px;padding-bottom:24px}
.filters{background:#fff;border:1px solid #ddd;padding:18px;position:sticky;top:78px}
.filters h3{margin-bottom:10px}
.filters button{margin-bottom:8px}
select,input{width:100%;padding:11px;border:1px solid #ccc;border-radius:4px;font-size:14px;background:#fff;min-width:0}
.count{color:#777;font-size:13px;margin:8px 0}

/* CARDS: desktop 3, tablet 2, mobile 1 - buttons always level */
#grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.card{background:#fff;border:1px solid #ddd;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;height:100%}
.img-wrap{position:relative;flex-shrink:0}
.img-wrap img{width:100%;height:195px;object-fit:cover}
.badge{position:absolute;top:10px;left:10px;background:#0f7a3d;color:#fff;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:800}
.card-body{padding:16px;display:flex;flex-direction:column;flex:1;min-width:0}
.card-body h3{font-size:17px;line-height:1.35;min-height:46px;overflow-wrap:break-word}
.card-body .btn-dark,.card-body .btn-gold{margin-top:auto}
.meta{color:#666;font-size:13px;margin:6px 0;overflow-wrap:break-word}
.price{font-size:24px;font-weight:900;margin:8px 0 12px}
.price small{font-size:12px;color:#888;font-weight:600}
.small-link{display:block;text-align:center;margin-top:10px;font-size:13px;font-weight:700;text-decoration:underline}

.usp{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:0;padding-bottom:24px;align-items:stretch}
.usp div{background:#fff;border:1px solid #ddd;padding:16px;text-align:center}
.usp span{display:block;color:#666;font-size:13px}

.detail{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;padding-top:14px;padding-bottom:24px;align-items:start}
.detail-main{width:100%;height:400px;object-fit:cover;border-radius:6px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.gallery img{width:100%;height:100px;object-fit:cover;border-radius:6px}
.gallery span{font-size:12px;font-weight:700}
.detail-info{background:#fff;padding:22px;border:1px solid #ddd;min-width:0}
.detail-info h1{font-size:clamp(24px,4vw,30px);margin-bottom:10px;overflow-wrap:break-word}
.enquiry-page{background:#fff;max-width:700px;margin:24px auto;padding:28px 20px;text-align:center;border:1px solid #ddd}
.enquiry-page input{width:100%;padding:12px;border:1px solid #ccc;border-radius:4px;margin:8px 0}
.enquiry-page button{width:100%;margin-top:10px}
footer{background:#222;color:#ddd;text-align:center;padding:22px 16px;margin-top:20px;font-size:13px}
footer a{color:#fff;font-weight:700}

/* ============ TABLET: 901px - 1100px ============ */
@media(max-width:1100px){
  #grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .usp{grid-template-columns:repeat(2,1fr)}
}

/* ============ MOBILE: up to 700px - your correct mobile look, kept ============ */
@media(max-width:700px){
  .hero,.tiles,.breadcrumb,.shop,.usp,.detail,.areas{padding-left:14px;padding-right:14px}
  .hero{grid-template-columns:1fr;gap:16px;margin-top:12px}
  .hero img{height:230px;order:-1}
  .hero h1{font-size:30px}
  .main-header{justify-content:center;text-align:center;padding:12px 14px}
  .cat-nav{gap:16px;font-size:13px}
  .tiles{grid-template-columns:repeat(2,1fr);gap:10px}
  .tiles a,.tiles img{height:120px}
  .shop{grid-template-columns:1fr;gap:14px}
  .filters{position:static}
  #grid{grid-template-columns:1fr}
  .card-body h3{min-height:0}
  .img-wrap img{height:200px}
  .detail{grid-template-columns:1fr;gap:16px}
  .detail-main{height:260px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .usp{grid-template-columns:repeat(2,1fr);gap:10px}
  .btn-gold,.btn-white,.btn-dark{padding:11px 14px;font-size:14px}
}