:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;

  --primary:#ef394e;
  --primary2:#d61f35;

  --danger:#ef4444;
  --shadow: 0 10px 26px rgba(17, 24, 39, .10);

  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
}

*{ box-sizing:border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body{ margin:0; background:var(--bg); color:var(--text); }

.container{ max-width:1100px; margin:0 auto; padding:0 16px; }

a{ color:inherit; text-decoration:none; }
.muted{ color:var(--muted); font-size:14px; }

.topbar{ background:#111827; color:#cbd5e1; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; gap:10px; flex-wrap:wrap; }
.top-links{ display:flex; gap:14px; flex-wrap:wrap; }
.top-links a{ color:#cbd5e1; font-size:14px; }
.top-links a:hover{ color:#fff; }

.header{ background:#fff; border-bottom:1px solid var(--border); }
.header-inner{ display:flex; gap:14px; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; gap:10px; align-items:center; flex: 0 0 auto; }
.logo{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff; font-weight:900;
}
.brand-title{ font-weight:900; letter-spacing:-0.2px; }
.brand-sub{ font-size:12px; color:var(--muted); }

.search{ flex:1; display:flex; gap:8px; max-width:520px; min-width: 260px; }
.search input{
  width:100%; padding:10px 12px;
  border:1px solid var(--border); border-radius:12px;
  outline:none; background:#fff;
}
.search input:focus{
  border-color: rgba(239,57,78,.45);
  box-shadow:0 0 0 4px rgba(239,57,78,.12);
}

.mini-cart{
  display:flex; gap:10px; align-items:center;
  background:#f3f4f6; border:1px solid var(--border);
  padding:10px 12px; border-radius:12px;
  font-weight:800;
  flex: 0 0 auto;
}
.pill{
  min-width:28px; height:22px; padding:0 8px;
  display:inline-grid; place-items:center;
  background:var(--primary); color:#fff; border-radius:999px;
  font-size:12px;
}

.menu{ background:var(--primary); }
.menu-inner{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 0;
}
.menu a{
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  background: rgba(255,255,255,.12);
  white-space: nowrap;
}
.menu a:hover{ background: rgba(255,255,255,.20); }

.main{ padding:18px 0 28px; }

.hero{
  background:linear-gradient(135deg, #ffffff, #fff3f4);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:18px;
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:stretch;
  margin-bottom:16px;
}
.hero-text h1{ margin:0 0 8px; font-size:22px; }
.hero-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.hero-card{
  width:280px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  position:relative;
}
.badge{
  position:absolute; top:12px; left:12px;
  background:#10b981; color:#fff;
  padding:4px 8px; border-radius:999px;
  font-size:12px; font-weight:900;
}
.hero-card-title{ font-weight:1000; margin-bottom:6px; }

.layout{ display:grid; grid-template-columns: 280px 1fr; gap:14px; }
.sidebar{ display:flex; flex-direction:column; gap:12px; }
.content{ display:flex; flex-direction:column; gap:14px; }

.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:12px;
}
.panel-title{ font-weight:900; margin-bottom:10px; }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.field label{ font-size:13px; color:var(--muted); }
.field input{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.check{ display:flex; gap:10px; align-items:center; color:var(--muted); margin:8px 0; }

.section-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.section-head h2{ margin:0; font-size:18px; }
.link{ color:var(--primary2); font-weight:900; }

.toolbar{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.toolbar h1{ margin:0; font-size:20px; }
.toolbar-right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
select{
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.grid.list{ grid-template-columns: 1fr; }

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.card .img{
  height:150px;
  background: radial-gradient(circle at 20% 20%, #ffe4e6, #fff);
  border-bottom:1px solid var(--border);
  position:relative;
}
.card .img-link{ display:block; color:inherit; }
.tag{
  position:absolute; top:10px; right:10px;
  background: rgba(239,57,78,.12);
  color: var(--primary2);
  border:1px solid rgba(239,57,78,.18);
  padding:4px 8px; border-radius:999px;
  font-size:12px; font-weight:900;
}
.tag.sale{ background: rgba(239,68,68,.10); color:#b91c1c; border-color: rgba(239,68,68,.20); }

.card-body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.title{ font-weight:900; }
.meta{ display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; }
.price{ font-weight:1000; }
.old{ color:var(--muted); text-decoration:line-through; font-weight:800; font-size:13px; }
.stock{ font-size:13px; color:var(--muted); }

.card-actions{ display:flex; gap:8px; margin-top:auto; flex-wrap:wrap; }
.btn{
  border:1px solid var(--border);
  background:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
}
.btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn.primary:hover{ background:var(--primary2); border-color:var(--primary2); }
.btn.danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn.full{ width:100%; }

.note{
  background:#fff;
  border:1px dashed var(--border);
  padding:12px;
  border-radius:16px;
  color:var(--muted);
}
.hidden{ display:none; }

.table-wrap{ overflow:auto; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:10px; border-bottom:1px solid var(--border); text-align:right; }
.table th{ background:#f9fafb; }

.qty{ width:90px; padding:8px 10px; border-radius:10px; border:1px solid var(--border); }

.cart-footer{ margin-top:12px; display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.total{ font-weight:1000; }

.crumbs{ color:var(--muted); font-size:13px; margin-bottom:10px; }

.content-only{ display:flex; flex-direction:column; gap:14px; }

/* Blog banners */
.banners{ display:grid; gap:12px; }
.banners-6{ grid-template-columns: repeat(3, 1fr); }

.banner{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  min-height:170px;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.banner:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(17, 24, 39, .14);
  border-color: rgba(239,57,78,.26);
}
.banner-img{
  height:110px; width:100%;
  display:block; object-fit:cover;
  background:#e2e8f0;
}
.banner-inner{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.banner-title{ font-weight:1000; }
.banner-excerpt{ color:var(--muted); font-size:13px; line-height:1.8; }
.banner-meta{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:12px; }

/* Blog pages */
.blog-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px; }
.blog-card{ background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); overflow:hidden; }
.blog-card .img{ height:140px; border-bottom:1px solid var(--border); position:relative; background:#f3f4f6; }
.blog-card .body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.blog-card .title{ font-weight:1000; }
.blog-card .excerpt{ color:var(--muted); font-size:13px; line-height:1.8; }

.post{ background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); padding:16px; }
.post h1{ margin:0 0 8px; font-size:22px; }
.post .meta{ color:var(--muted); font-size:13px; margin-bottom:12px; }
.post p{ line-height:2; color:#111827; }

/* Product page */
.product-page{ display:grid; grid-template-columns: 420px 1fr; gap:14px; }
.product-gallery{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow: var(--shadow); overflow:hidden;
}
.product-gallery img{ width:100%; height:360px; object-fit:cover; display:block; background:#e2e8f0; }
.product-info{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow: var(--shadow);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.product-title{ font-size:22px; font-weight:1000; margin:0; }
.product-meta{ display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:13px; }
.product-price-line{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.product-price{ font-weight:1000; font-size:20px; }
.product-old{ color:var(--muted); text-decoration:line-through; font-weight:800; }
.product-stock{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--border);
  background:#f9fafb;
  color:var(--muted);
  font-size:12px;
}
.product-desc{ color:#111827; line-height:2; margin:0; }
.specs{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:4px; }
.spec{ border:1px solid var(--border); border-radius:14px; padding:10px 12px; background:#fff; }
.spec .k{ color:var(--muted); font-size:12px; margin-bottom:6px; }
.spec .v{ font-weight:900; }

.footer{ border-top:1px solid var(--border); background:#fff; }
.footer-inner{ display:flex; justify-content:space-between; padding:14px 0; gap:10px; flex-wrap:wrap; }


/* ========================================
   RESPONSIVE FIXES
   ======================================== */

/* Tablet: Blog banners 2 columns */
@media (max-width: 980px){ 
  .banners-6{ grid-template-columns: repeat(2, 1fr); }
  
  /* Stack sidebar below content */
  .layout{ 
    grid-template-columns: 1fr; 
    gap: 14px;
  }
  
  .sidebar {
    order: 2;
  }
  
  .content {
    order: 1;
  }
  
  /* Make sidebar panels horizontal on tablets */
  .sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
  }
  
  /* Product page: single column */
  .product-page{ 
    grid-template-columns: 1fr; 
  }
}

/* Mobile adjustments */
@media (max-width: 640px){
  .container{ padding: 0 12px; }

  /* Stack header elements */
  .header-inner{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 0;
  }

  .brand{ justify-content: flex-start; }
  .search{ max-width: none; min-width: 0; width: 100%; }
  .mini-cart{ width: 100%; justify-content: space-between; }

  /* Horizontal scrolling menu */
  .menu-inner{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .menu-inner::-webkit-scrollbar{ height: 6px; }
  .menu-inner::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.35); border-radius: 999px; }

  /* Hero adjustments */
  .hero{ 
    flex-direction: column;
    padding: 14px; 
  }
  .hero-text h1{ font-size: 20px; }
  .hero-card{ width: auto; }

  /* Buttons */
  .btn{ padding: 10px 10px; }
  .card-actions{ gap: 8px; }

  /* Product grid: 2 columns on mobile */
  .grid{ 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
  .card .img{ height: 120px; }
  .card-body{ padding: 10px; }

  /* Blog banners: 2 columns mobile */
  .banners-6{ 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }

  /* Table responsive */
  .table th, .table td{ padding: 8px; font-size: 13px; }
  .qty{ width: 70px; }
  
  /* Toolbar: stack vertically */
  .toolbar{ 
    flex-direction: column; 
    align-items: stretch;
  }
  
  .toolbar-left,
  .toolbar-right { 
    width: 100%; 
  }
  
  .toolbar-right {
    flex-direction: row;
    justify-content: space-between;
  }
  
  /* Full width sort select */
  #sortSelect {
    flex: 1;
  }
  
  /* Smaller view toggle buttons */
  #gridBtn, #listBtn {
    padding: 10px 16px;
  }
  
  /* Specs: single column */
  .specs{ 
    grid-template-columns: 1fr; 
  }
}

/* Very small devices: single column */
@media (max-width: 420px){
  .grid{ 
    grid-template-columns: 1fr; 
  }
  .banners-6{ 
    grid-template-columns: 1fr; 
  }
  
  /* Hide view toggles */
  #gridBtn, #listBtn {
    display: none;
  }
}

/* Small mobile: blog banners single column */
@media (max-width: 560px){ 
  .banners-6{ 
    grid-template-columns: 1fr; 
  }
}