:root{--accent:#0a5bff;--text:#111;--muted:#6b7280;--bg:#fafafa;--card:#fff}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
header{background:#111;color:#fff;padding:16px 20px}
header .bar{display:flex;gap:14px;align-items:center}
header a.home{color:#fff;text-decoration:none}
header a.home:hover{text-decoration:underline}
main{padding:20px;max-width:1500px;margin:0 auto}
header .crumb{opacity:.85}
header form.search{margin-left:auto;display:flex;gap:8px}
header form.search input[type="search"]{
  padding:6px 10px;border-radius:999px;border:1px solid #ddd;min-width:220px
}
header form.search button{
  border:0;padding:6px 12px;border-radius:999px;background:#0a5bff;color:#fff;cursor:pointer
}
input[type=search]{flex:1;max-width:520px;padding:8px 10px;border-radius:8px;border:1px solid #ccc}

/* grid cards (index/category/search) */
.wrap{display:grid;grid-template-columns:320px 1fr;gap:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.card{background:var(--card);border-radius:12px;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,.08);display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; }
.card img{width:100%;height:auto;object-fit:cover;border-radius:8px;background:#eee}
.cardrows .card{margin-bottom:16px}
.brand{font-size:12px;color:var(--muted);margin-top:4px}
.price{font-weight:700;margin-top:6px}
.badge{display:inline-block;font-size:11px;background:#eef3ff;color:#1a4bff;padding:2px 6px;border-radius:999px;margin-left:6px}

/* search bar */
.searchbar{display:flex;gap:8px;margin:0 0 16px 0}
.searchbar input[type="text"]{flex:1;min-width:220px;padding:8px 10px;border:1px solid #ddd;border-radius:8px}
.searchbar button{padding:8px 12px;background:var(--accent);color:#fff;border:0;border-radius:8px;cursor:pointer}
.searchbar button:hover{filter:brightness(.95)}

/* breadcrumbs + product layout */
.breadcrumb{margin:10px 0 16px 0}
.breadcrumb a{color:var(--muted)}
.product-wrap{display:grid;grid-template-columns:360px 1fr;gap:24px}
.gallery img{width:100%;height:auto;border-radius:12px;background:#eee;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.meta h1{margin:0 0 8px 0;font-size:24px}
.meta .brand{margin-top:6px}
.buybox{margin-top:12px;display:flex;gap:10px;align-items:center;justify-content: space-between;align-items: center;}
.outer_buybox{display: flex;flex-direction: column;justify-content: flex-end;}
.btn{padding:6px 10px;border-radius:999px;border:0;cursor:pointer;background:#16a34a;color:#fff}
.btn-secondary{background:#e5e7eb}

/* responsive */
@media (max-width:860px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .product-wrap{grid-template-columns:1fr}
}

.section{margin:8px 0 22px}
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cat a{display:inline-block;background:#fff;border:1px solid #e6e6e6;border-radius:999px;padding:6px 10px;line-height:1.1;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.cat .cnt{opacity:.65;margin-left:6px;font-size:12px}

.site-footer{
  margin-top:32px;
  padding:16px 12px;
  border-top:1px solid #eee;
  background:#fafafa;
  text-align:center;          /* center everything */
}
.site-footer .links{
  display:block;              /* own line */
  margin:0 0 6px 0;
}

.site-footer .small{ display:block; color:#666; font-size:12px; }

.site-footer .links a{
  color:inherit;
  text-decoration:none;
  margin-right:12px;
  margin-left:12px;
}
.site-footer .links a:hover{
  text-decoration:underline;
}
.site-footer .muted{opacity:.75}

/* Category navigation pills */
.cats{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 18px}
.cats .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:#111;font-size:13px;text-decoration:none}
.cats .pill:hover{border-color:#cbd5e1}
.cats .pill.active{background:#0a5bff;border-color:#0a5bff;color:#fff}
.cats .pill .count{opacity:.7;font-size:12px}

/* Category navigation pager */
.muted{color:#666}
.pager .btn-link{background:transparent;color:var(--accent);border:0;padding:0;cursor:pointer}
.pager_container {
  display: flex;
  justify-content: flex-end; /* Align items to the right */
  gap: 10px; /* Optional spacing between picker and pager */
  font-size: smaller;
}
.picker,
.pager {
  /* Optional styling */
}

/* Product layout */
.product {
  display: grid;
  grid-template-columns: minmax(320px, 520px) 1fr;
  gap: 24px;
  align-items: start;
  margin: 16px 0 24px;
}

@media (max-width: 860px) {
  .product {
    grid-template-columns: 1fr;
  }
}

.product__media { position: relative; }
.product__image { margin: 0; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 12px; }
.product__image img { width: 100%; height: auto; display: block; object-fit: contain; }

.product__title { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.2; }
.product__brand { color: #666; margin-bottom: 12px; }

.product__buybox {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 8px 0 16px;
}
.product__price { font-weight: 700; font-size: 1.25rem; }
.product__cta { text-decoration: none; }

.product__desc { margin-top: 12px; line-height: 1.55; }
.product__desc p { margin: 0 0 0.7em; }

/* Offers table (brief defaults) */
table.offers { width: 100%; border-collapse: collapse; margin-top: 8px; }
.offers th, .offers td { padding: 10px 8px; border-bottom: 1px solid #eee; text-align: left; }
.offers td.price { white-space: nowrap; font-weight: 600; }
.offers td.avail { color: #555; }
.offers a.btn { display: inline-block; padding: 8px 12px; border-radius: 10px; border: 1px solid #ddd; }
.admin-page-with-margin {
	margin-left: 20px;
}
.pp-footer, .pp-footer__meta {
	text-align:center;
}

/* Reviews admin - two-column form rows */
.ms-admin-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 6px 14px;
	align-items: center;
	margin: 6px 0;
}
.ms-admin-row label {
	font-weight: 600;
	text-align: right;
	padding-right: 4px;
	white-space: nowrap;
}
.ms-admin-row input[type="text"],
.ms-admin-row select {
	width: 100%;
	max-width: 520px;
	padding: 4px 6px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}
/* Wrapper used when input + hint text share column 2 */
.ms-admin-input-group {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.ms-admin-input-group input[type="text"] {
	flex-shrink: 0;
}
.ms-admin-hint {
	color: #6b7280;
	font-size: 12px;
}
/* Full-width stacked fields (e.g. Body HTML textarea) */
.ms-admin-field {
	margin: 10px 0;
}
.ms-admin-field label {
	font-weight: 600;
	display: block;
	margin-bottom: 4px;
}
/* Filter bar and action buttons */
.ms-admin-filter-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.ms-admin-btn {
	display: inline-block;
	padding: 5px 12px;
	background: #0a5bff;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
	font-size: 13px;
	cursor: pointer;
	border: 0;
}
.ms-admin-btn:hover {
	filter: brightness(.9);
	text-decoration: none;
	color: #fff;
}
.ms-admin-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
	font-size: 14px;
}
.ms-admin-table th,
.ms-admin-table td {
	padding: 8px 10px;
	border-bottom: 1px solid #e5e7eb;
	text-align: left;
}
.ms-admin-table th {
	background: #f3f4f6;
	font-weight: 600;
}
.ms-admin-flash {
	padding: 10px 14px;
	background: #dcfce7;
	border: 1px solid #86efac;
	border-radius: 6px;
	margin-bottom: 14px;
	color: #166534;
}
.ms-admin-actions {
	margin: 12px 0;
}
.ms-admin-backlink {
	margin-top: 16px;
}
.ms-admin-heading {
	margin: 0 0 16px;
}