/* Refactored stylesheet - preserves current look & colors but uses modern layout, variables and responsive rules.
   Replace current `main-styles.css` with this file when ready.
*/
:root{
  --bg: #f1f1f1;
  --accent: #F6DA01;
  --accent-dark: #F0D000;
  --muted: #f8f8f8;
  --text: #222;
  --muted-text: #666;
  --container-max: 1400px;
  --card-radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);font-family:'Poppins',sans-serif;color:var(--text);margin:0}

.container-center{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 20px}

/* Header / categories bar kept as-is visually */
header.header.shop{box-shadow:0 2px 15px rgba(0,0,0,.08)}

/* Section headers */
.section-header{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem 1rem;text-align:center}
.section-header h2{font-size:2.25rem;margin:0;font-weight:800;text-transform:uppercase}
.section-header p{margin:0;color:var(--muted-text)}
.section-header::after{content:'';width:80px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin-top:.5rem}

/* Grid helpers - auto-fit for responsive columns */
.grid-cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));justify-items:center}

.card{background:#fff;border-radius:var(--card-radius);overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.08);width:100%;max-width:280px}
.card.square{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative}
.card .img-wrap{position:relative;width:100%;padding-top:70%;background:var(--muted);overflow:hidden}
.card .img-wrap img{position:absolute;inset:0;margin:auto;max-width:78%;max-height:78%;object-fit:contain;transition:transform .35s ease}
.card:hover .img-wrap img{transform:scale(1.03)}
.card .card-body{padding:1rem;text-align:center}
.card .card-title{font-weight:700;color:var(--text);margin:0}

/* Products carousel */
.featured-section{background:linear-gradient(135deg,#fff 0%,#fff9e6 25%,var(--accent) 50%,#fff9e6 75%,#fff 100%);padding:3rem 0}
.featured-products-carousel-wrapper{max-width:1200px;margin:0 auto;padding:0 20px;position:relative}
.featured-carousel{display:flex;gap:1rem;overflow:hidden}
.featured-card{min-width:240px;max-width:280px}
.featured-card .img-wrap{padding-top:66%}
.featured-card .card-body{padding:1rem}
.featured-card .price{font-weight:800;font-size:1.25rem;margin:0}
.featured-card .cta{display:block;background:var(--accent);color:var(--text);border-radius:8px;padding:.75rem;text-align:center;margin-top:1rem}

/* utility */
.center{text-align:center}
.small{font-size:.9rem;color:var(--muted-text)}

/* responsive tweaks */
@media(min-width:1200px){.container-center{padding:0 40px}}
@media(max-width:768px){.section-header h2{font-size:1.6rem}.card{max-width:240px}.featured-card{min-width:200px}}

/* keep compatibility classes from original file for minimal HTML changes */
#categories-container,#subcategories-container,#products-container,#services-container{width:100}

/* End refactor */