:root {
  --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* Brand accents */
  --primary-color: #4c7af1;
  --primary-hover: #3b66d1;

  --success-color: #2b9d69;
  --success-light-color: #a1e3c5;
  --failed-color: #e05656;
  --failed-light-color: #f4b0b0;

  /* Surface colors */
  --background-color: #f5f7fb;
  --background-color2: #eef2fb;
  --card-background: #ffffff;

  /* Borders & depth */
  --border1-color: #d6deeb;
  --box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);

  /* Typography */
  --text1-color: #1f2937;
  --text2-color: #576078;

  /* Header */
  --header-color: #ffffff;
  --header-secondary: #f1f4fb;
  --header-hover: #e3eaf8;

  /* Defaults */
  --border: 1px solid var(--border1-color);
  --border-radius: 10px;

  /* Buttons */
  --button-color: #e6ecff;
  --button-text: var(--text1-color);
  --button-hover-color: #d8e2ff;
  --button-active-color: #c4d4ff;
  --button-selected-color: var(--primary-color);
  --button-selected-hover-color: var(--primary-hover);
  --button-border: 1px solid rgba(76, 122, 241, 0.25);
  --button-border-hover: 1px solid rgba(76, 122, 241, 0.45);
}


.page.store-page { display: grid; gap: 24px; }

body.page--store {
  background: var(--background-color);
  color: var(--text1-color);
}

.page--store .store-shell {
  width: 100%;
}

.container { width: 100%; min-height: 100vh; background: var(--background-color); }

/* Full-width search */
.searchbar { width: 100%; padding: 24px 0 0; box-sizing: border-box; }
.searchbar-inner {
  display: grid;
  grid-template-columns: 1fr 56px;
  gap: 12px;
  background: var(--card-background);
  border: var(--border);
  border-radius: 999px;
  padding: 8px;
  align-items: center;
  box-shadow: var(--box-shadow);
}
.search-input {
  background: transparent;
  color: var(--text1-color);
  border: none; height: 40px; padding: 0 8px; font-size: 16px; outline: none;
}
.search-btn {
  height: 40px; border-radius: 999px;
  border: var(--button-border);
  background: var(--button-selected-color);
  color: #ffffff; cursor: pointer;
  box-shadow: 0 10px 18px rgba(76, 122, 241, 0.22);
}
.search-btn:hover { background: var(--button-selected-hover-color); }
.searchbar-actions { margin: 8px 2px 0 2px; display: flex; align-items: center; gap: 10px; }
.per-select {
  background: var(--background-color2); color: var(--text1-color);
  border: var(--border); border-radius: var(--border-radius);
  height: 36px; padding: 0 10px; outline: none;
}
.btn.ghost { background: var(--background-color2); }

/* Featured: compact */
.featured-strip { margin: 24px 0 0; }
.featured-strip.compact .featured-title { color: var(--text1-color); margin-bottom: 8px; font-weight: 600; font-size: 15px; }
.featured-track.compact {
  display: grid; grid-auto-flow: column; grid-auto-columns: 180px;
  gap: 10px; overflow-x: auto; padding-bottom: 4px;
}
.feat-card.compact {
  text-decoration: none; color: inherit;
  background: var(--card-background);
  border: var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--box-shadow);
}
.feat-thumb.compact { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: #ffffff; }
.feat-thumb.compact img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.feat-meta.compact { padding: 8px; display: grid; gap: 4px; }
.feat-meta.compact .feat-title { color: var(--text1-color); font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-meta.compact .price-sale { color: var(--success-color); font-weight: 700; font-size: 14px; }
.feat-meta.compact .price-strike { color: var(--text2-color); text-decoration: line-through; margin-left: 6px; font-size: 12px; }

/* Content grid */
.content-wrap {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0 36px;
}

/* Sidebar */
.sidebar { position: sticky; top: 12px; height: fit-content; }
.sidebar-section {
  background: var(--card-background); border: var(--border);
  border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: 12px; color: var(--text1-color);
}
.sidebar-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.side-block + .side-block { border-top: 1px solid var(--border1-color); margin-top: 10px; padding-top: 10px; }
.side-label { font-size: 12px; color: var(--text2-color); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .02em; }
.side-options {
  display: grid;
  gap: 6px;
  padding: 0 6px;
  box-sizing: border-box;
}
.side-options.grid2 { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* Results */
.results { min-width: 0; }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sort-select {
  background: var(--background-color2); color: var(--text1-color);
  border: var(--border); border-radius: var(--border-radius);
  height: 36px; padding: 0 10px; outline: none;
}

/* Product grid & cards */
.grid-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1180px) { .grid-products { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 860px)  { .grid-products { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px)  { .grid-products { grid-template-columns: 1fr; } }

.product-card {
  border: var(--border); border-radius: 10px;
  background: var(--card-background);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.product-card:hover { transform: translateY(-2px); box-shadow: 0 18px 30px rgba(76, 122, 241, 0.16); }

.card-link { text-decoration: none; color: inherit; display: block; }
.thumb {
  position: relative; width: 100%; aspect-ratio: 4/3;
  background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-bottom: 1px solid var(--border1-color);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.badge { display: inline-block; border-radius: 999px; padding: 4px 10px; background: var(--header-secondary); border: var(--border); font-size: 12px; color: var(--text1-color); }
.badge-featured { position: absolute; left: 10px; top: 10px; background: var(--success-light-color); color: var(--success-color); border-color: var(--success-color); }

.meta { padding: 10px 12px; display: grid; gap: 4px; }
.title { font-size: 14.5px; line-height: 1.3; color: var(--text1-color); }
.sub { color: var(--text2-color); }
.price-wrap { margin-top: 2px; }
.price { font-weight: 600; }
.price-sale { color: var(--success-color); font-weight: 700; }
.price-strike { color: var(--text2-color); text-decoration: line-through; margin-left: 6px; }

.card-actions { padding: 10px 12px; display: flex; gap: 8px; border-top: 1px solid var(--border1-color); }

.btn {
  padding: 10px 14px; border-radius: var(--border-radius); border: var(--button-border);
  background: var(--button-color); color: var(--button-text);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
}
.btn:hover { background: var(--button-hover-color); border: var(--button-border-hover); }

.pager { margin-top: 12px; display: flex; gap: 8px; justify-content: center; }
.empty { padding: 20px; text-align: center; color: var(--text2-color); }
.muted { color: var(--text2-color); }
.small { font-size: 13px; }
.tiny  { font-size: 12px; }
.noimg { width: 100%; height: 100%; display:flex; align-items:center; justify-content:center; opacity:.35; font-size:36px; }


table {
  width: 100%;
  background: var(--card-background);
  color: var(--text1-color);
  border-collapse: collapse;
}
table thead th {
  text-align: left; padding: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text2-color);
}
table tbody td {
  padding: 12px;
  border-top: 1px solid var(--border1-color);
}
:body.page--store? Wait comment? need correct patch.*** End Patch