/* ECommerce-Lite - Minimal CSS (~10KB) */

/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.5;color:#1a1a2e;background:#f8f9fa}
a{color:#2563eb;text-decoration:none}
a:hover{color:#1d4ed8}
img{max-width:100%;height:auto;display:block}
button,input,select{font:inherit;border:none;outline:none}
table{width:100%;border-collapse:collapse}

/* ===== LAYOUT ===== */
.w{max-width:1280px;margin:0 auto;padding:0 1rem}

/* ===== HEADER ===== */
.hdr{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.hdr .w{display:flex;align-items:center;gap:1rem;height:56px}
.logo{font-size:1.25rem;font-weight:800;color:#1a1a2e;white-space:nowrap}
.srch{flex:1;max-width:480px;display:flex;background:#f1f3f5;border-radius:8px;overflow:hidden}
.srch input{flex:1;padding:.5rem .75rem;background:transparent;min-width:0}
.srch button{padding:.5rem .75rem;background:#2563eb;color:#fff;cursor:pointer}
.srch button:hover{background:#1d4ed8}
.nav{display:flex;gap:1rem;margin-left:auto;font-size:.875rem;white-space:nowrap}
.nav a{color:#4b5563}
.nav a:hover{color:#2563eb}

/* Dropdown */
.dd{position:relative}
.dd-m{display:none;position:absolute;top:100%;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);min-width:180px;padding:.5rem 0;z-index:200}
.dd:hover .dd-m{display:block}
.dd-m a{display:block;padding:.375rem 1rem;color:#333;font-size:.875rem}
.dd-m a:hover{background:#f1f3f5;color:#2563eb}

/* ===== HERO ===== */
.hero{text-align:center;padding:3rem 0 2rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-radius:12px;margin:1.5rem 0}
.hero h1{font-size:2rem;margin-bottom:.5rem}
.hero p{opacity:.9;margin-bottom:1.5rem}
.hero-s{display:flex;max-width:500px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.hero-s input{flex:1;padding:.75rem 1rem;color:#333}
.hero-s button{padding:.75rem 1.5rem;background:#2563eb;color:#fff;cursor:pointer;font-weight:600}

/* ===== SECTION ===== */
.sec-t{font-size:1.5rem;margin:2rem 0 1rem;color:#1a1a2e}
.cta{text-align:center;margin:1.5rem 0}

/* ===== PRODUCT GRID ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-bottom:1.5rem}

/* ===== PRODUCT CARD ===== */
.pcard{background:#fff;border-radius:10px;overflow:hidden;border:1px solid #e5e7eb;transition:box-shadow .2s}
.pcard:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.pcard-img{display:block;aspect-ratio:1;overflow:hidden;background:#f9f9f9}
.pcard-img img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.pcard:hover .pcard-img img{transform:scale(1.05)}
.pcard-body{padding:.75rem}
.pcard-brand{font-size:.7rem;text-transform:uppercase;color:#6b7280;letter-spacing:.5px}
.pcard-title{font-size:.875rem;font-weight:600;line-height:1.3;margin:.25rem 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-title a{color:inherit}
.pcard-title a:hover{color:#2563eb}
.pcard-price{display:flex;align-items:baseline;gap:.5rem;margin:.375rem 0}
.price{font-size:1.125rem;font-weight:700;color:#dc2626}
.price-old{font-size:.8rem;color:#9ca3af;text-decoration:line-through}
.pcard-rating{font-size:.75rem;color:#6b7280;display:flex;align-items:center;gap:.25rem}
.pcard-src{font-size:.7rem;color:#9ca3af;margin-top:.25rem;display:block}

/* Stars */
.stars{color:#d1d5db;position:relative;display:inline-block;letter-spacing:2px}
.stars::before{content:'★★★★★';position:absolute;left:0;color:#f59e0b;overflow:hidden;width:calc(var(--r,0)/5*100%)}

/* ===== CATEGORY GRID ===== */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;margin-bottom:1.5rem}
.cat-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1rem;text-align:center;color:#333;transition:border-color .2s}
.cat-card:hover{border-color:#2563eb;color:#2563eb}
.cat-icon{font-size:2rem;display:block;margin-bottom:.5rem}
.cat-name{font-weight:600;font-size:.875rem;display:block}
.cat-count{font-size:.75rem;color:#9ca3af}

/* ===== PRODUCT DETAIL ===== */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:1.5rem 0}
.pd-main-img{background:#fff;border-radius:10px;border:1px solid #e5e7eb;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.pd-main-img img{max-height:100%;object-fit:contain}
.pd-thumbs{display:flex;gap:.5rem;margin-top:.75rem;overflow-x:auto}
.thumb{width:60px;height:60px;object-fit:cover;border-radius:6px;border:2px solid transparent;cursor:pointer;flex-shrink:0}
.thumb.active,.thumb:hover{border-color:#2563eb}
.pd-brand a{font-size:.8rem;text-transform:uppercase;color:#6b7280;letter-spacing:.5px}
.pd-title{font-size:1.5rem;line-height:1.3;margin:.5rem 0}
.pd-rating{font-size:.875rem;color:#6b7280;margin:.5rem 0}
.pd-price{margin:1rem 0}
.price-lg{font-size:2rem;font-weight:800;color:#dc2626}
.ship{display:block;font-size:.8rem;color:#6b7280;margin-top:.25rem}
.pd-variants{margin:1rem 0}
.var-group{margin-bottom:.75rem}
.var-group label{font-size:.8rem;font-weight:600;color:#4b5563;display:block;margin-bottom:.375rem}
.var-opts{display:flex;flex-wrap:wrap;gap:.375rem}
.var-opt{padding:.25rem .75rem;border:1px solid #d1d5db;border-radius:6px;font-size:.8rem;cursor:pointer}
.var-opt:hover{border-color:#2563eb;color:#2563eb}
.pd-source{font-size:.8rem;color:#6b7280;margin:.5rem 0}
.pd-short{margin:1rem 0;color:#4b5563;font-size:.9rem}
.pd-attrs{margin:1rem 0}
.pd-attrs h3{font-size:1rem;margin-bottom:.5rem}
.pd-attrs table{font-size:.85rem}
.pd-attrs th{text-align:left;padding:.375rem .75rem;background:#f9fafb;font-weight:500;width:35%;border:1px solid #e5e7eb}
.pd-attrs td{padding:.375rem .75rem;border:1px solid #e5e7eb}
.pd-desc{margin:2rem 0;background:#fff;border-radius:10px;padding:2rem;border:1px solid #e5e7eb}
.pd-desc h2{font-size:1.25rem;margin-bottom:1rem}
.desc-content{color:#4b5563;font-size:.9rem;line-height:1.7}
.desc-content h3{font-size:1rem;margin:1rem 0 .5rem;color:#1a1a2e}
.desc-content ul{padding-left:1.25rem;margin:.5rem 0}
.desc-content li{margin:.25rem 0}

/* ===== BUTTONS ===== */
.btn{display:inline-block;padding:.625rem 1.5rem;background:#2563eb;color:#fff;border-radius:8px;font-weight:600;cursor:pointer;font-size:.875rem;text-align:center;transition:background .2s}
.btn:hover{background:#1d4ed8;color:#fff}
.btn-lg{padding:.875rem 2.5rem;font-size:1rem}
.btn-buy{background:#dc2626;display:block;text-align:center;margin:1rem 0}
.btn-buy:hover{background:#b91c1c;color:#fff}
.btn-sm{padding:.375rem 1rem;font-size:.8rem}
.btn-outline{background:transparent;border:1px solid #d1d5db;color:#333}
.btn-outline:hover{border-color:#2563eb;color:#2563eb;background:transparent}

/* ===== BREADCRUMB ===== */
.bc{font-size:.8rem;color:#6b7280;margin:1rem 0;display:flex;flex-wrap:wrap;gap:.25rem}
.bc a{color:#6b7280}
.bc a:hover{color:#2563eb}

/* ===== LIST HEADER ===== */
.list-hdr{display:flex;align-items:center;justify-content:space-between;margin:1.5rem 0 1rem}
.list-hdr h1{font-size:1.5rem}
.sort select{padding:.375rem .75rem;border:1px solid #d1d5db;border-radius:6px;font-size:.8rem;background:#fff}
.result-count{font-size:.85rem;color:#6b7280;margin-bottom:1rem}
.cat-desc{color:#6b7280;font-size:.9rem;margin-bottom:1rem}

/* ===== PAGINATION ===== */
.pag{display:flex;justify-content:center;gap:.25rem;margin:2rem 0;flex-wrap:wrap}
.pag-btn{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:6px;font-size:.85rem;color:#333;background:#fff}
.pag-btn:hover{border-color:#2563eb;color:#2563eb}
.pag-btn.active{background:#2563eb;color:#fff;border-color:#2563eb}
.pag-dots{padding:.5rem .25rem;color:#9ca3af}

/* ===== EMPTY STATE ===== */
.empty{text-align:center;padding:3rem 1rem;color:#6b7280}

/* ===== FOOTER ===== */
.ftr{background:#1a1a2e;color:#a0aec0;margin-top:3rem;padding:2rem 0}
.ftr-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.ftr-g strong{color:#fff;display:block;margin-bottom:.5rem;font-size:.9rem}
.ftr-g a{display:block;color:#a0aec0;font-size:.8rem;margin:.25rem 0}
.ftr-g a:hover{color:#fff}
.ftr-g p{font-size:.8rem;line-height:1.5}
.ftr-b{text-align:center;margin-top:2rem;padding-top:1rem;border-top:1px solid #2d3748;font-size:.75rem}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .hdr .w{flex-wrap:wrap;height:auto;padding:.5rem 1rem}
  .srch{order:3;flex-basis:100%;max-width:100%}
  .nav{font-size:.8rem;gap:.5rem}
  .hero{padding:2rem 1rem;border-radius:0;margin:0 -1rem 1rem}
  .hero h1{font-size:1.5rem}
  .grid{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .pd{grid-template-columns:1fr;gap:1rem}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .ftr-g{grid-template-columns:1fr}
}
@media(max-width:480px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .pcard-body{padding:.5rem}
  .pcard-title{font-size:.8rem}
  .price{font-size:1rem}
}