:root {
  --black:#000; --ink:#333; --muted:#666; --line:#e5e5e5; --bg:#fff; --soft:#f6f6f6; --red:#c41230;
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--black);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; line-height:1.45; }
a { color:inherit; text-decoration:none; }
button, input, select { font:inherit; }
.topbar {
  border-bottom:1px solid #eee; padding:.65rem 1.25rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  position:sticky; top:0; background:#fff; z-index:20;
}
.logo { font-weight:800; letter-spacing:.12em; font-size:1.05rem; }
.logo span { font-weight:500; letter-spacing:0; font-size:.75rem; color:#666; margin-left:.35rem; }
.nav { display:flex; gap:.2rem; flex-wrap:wrap; }
.nav a, .nav button.linkish {
  border:0; background:transparent; padding:.4rem .7rem; cursor:pointer; font-size:.85rem; color:#444;
}
.nav a.active, .nav button.linkish.active { font-weight:700; color:#000; border-bottom:2px solid #000; }
.wrap { width:min(1200px, calc(100% - 2rem)); margin:0 auto; padding:1.25rem 0 3rem; }
.toolbar { display:flex; gap:.55rem; flex-wrap:wrap; align-items:end; margin-bottom:1rem; }
.field { display:flex; flex-direction:column; gap:.25rem; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.field input, .field select {
  min-width:160px; border:1px solid #000; background:#fff; padding:.5rem .65rem; font-weight:400; text-transform:none; letter-spacing:0;
}
.btn {
  border:1px solid #000; background:#000; color:#fff; padding:.55rem .9rem; cursor:pointer; font-size:.85rem;
}
.btn.secondary { background:#fff; color:#000; }
.btn:disabled { opacity:.35; cursor:not-allowed; }
.progress-wrap { margin:.2rem 0 1rem; max-width:640px; }
.progress { height:10px; background:#eee; border:1px solid #ddd; }
.progress > i { display:block; height:100%; width:0; background:#000; transition:width .25s ease; }
.progress-label { font-size:.85rem; margin-top:.4rem; }
.pill { background:var(--soft); border:1px solid #e5e5e5; border-radius:999px; padding:.25rem .6rem; font-size:.75rem; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:1100px) { .grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:800px) { .grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .grid { grid-template-columns:1fr; } }
.card { border:1px solid #eee; background:#fff; cursor:pointer; display:flex; flex-direction:column; }
.card img { width:100%; aspect-ratio:1; object-fit:contain; background:#fafafa; border-bottom:1px solid #eee; }
.card .body { padding:.75rem; }
.card .brand { font-size:.75rem; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.card h3 { font-size:.92rem; margin:.25rem 0 .45rem; font-weight:600; }
.muted { color:var(--muted); font-size:.8rem; }
.price { font-size:1.15rem; font-weight:700; margin:1rem 0; }
.banner { background:#fff8e8; border:1px solid #f0e0b0; padding:.75rem 1rem; margin-bottom:1rem; font-size:.9rem; }
.error { background:#fff2f2; border:1px solid #f0c0c0; padding:.75rem 1rem; margin-bottom:1rem; }
.login {
  max-width:420px; margin:4rem auto; border:1px solid #eee; padding:1.5rem;
}
.login h1 { font-size:1.2rem; margin:0 0 .5rem; }
.table { width:100%; border-collapse:collapse; font-size:.88rem; }
.table th, .table td { border-bottom:1px solid #eee; padding:.55rem .4rem; text-align:left; vertical-align:top; }
.table code { font-size:.78rem; background:#f6f6f6; padding:.1rem .3rem; }
.breadcrumb { font-size:.8rem; color:var(--muted); margin-bottom:1rem; }
.breadcrumb span::after { content:" / "; }
.breadcrumb span:last-child::after { content:""; }
.pdp { display:grid; grid-template-columns:56px 1fr 1fr; gap:1rem; align-items:start; }
@media (max-width:920px) {
  .pdp { grid-template-columns:1fr; }
  .thumbs-col { order:2; display:flex !important; flex-direction:row; overflow:auto; }
}
.thumbs-col { display:flex; flex-direction:column; gap:.5rem; max-height:560px; overflow:auto; }
.thumbs-col img { width:56px; height:56px; object-fit:cover; border:1px solid #ddd; cursor:pointer; background:#fafafa; }
.thumbs-col img.active { border:2px solid #000; }
.main-stage { background:#fafafa; min-height:520px; display:flex; align-items:center; justify-content:center; border:1px solid #eee; }
.main-stage img { width:100%; max-height:640px; object-fit:contain; }
.info h1 { font-size:1.35rem; font-weight:700; margin:.15rem 0 .5rem; }
.brand-link { font-size:.95rem; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.rating-line { display:flex; align-items:center; gap:.45rem; margin:.5rem 0 1rem; font-size:.9rem; }
.stars { color:#000; letter-spacing:1px; }
.label { font-size:.8rem; font-weight:700; margin:1rem 0 .45rem; text-transform:uppercase; letter-spacing:.04em; }
.swatch-row, .size-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.swatch { width:42px; height:42px; border-radius:50%; border:1px solid #bbb; padding:2px; cursor:pointer; background:#fff; }
.swatch img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.swatch.active { outline:2px solid #000; outline-offset:2px; }
.size-btn { border:1px solid #000; background:#fff; min-width:92px; padding:.55rem .7rem; cursor:pointer; text-align:center; }
.size-btn.active { background:#000; color:#fff; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; }
.chip { border:1px solid #ddd; padding:.25rem .55rem; font-size:.75rem; }
.accordion { border-top:1px solid #ddd; margin-top:1.25rem; }
.acc-item { border-bottom:1px solid #ddd; }
.acc-item summary { list-style:none; cursor:pointer; padding:.9rem 0; font-weight:700; display:flex; justify-content:space-between; }
.acc-item summary::-webkit-details-marker { display:none; }
.acc-item p { margin:0 0 1rem; color:var(--ink); font-size:.92rem; white-space:pre-wrap; }
.section { margin-top:2.5rem; }
.section h2 { font-size:1.2rem; margin:0 0 1rem; }
.nika-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (max-width:800px) { .nika-grid { grid-template-columns:1fr; } }
.nika-block { border:1px solid #eee; padding:1rem; background:#fff; }
.nika-block h3 { margin:0 0 .6rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; }
.nika-block img { width:100%; max-height:220px; object-fit:contain; background:#fafafa; }
.review { border-top:1px solid #eee; padding:1rem 0; }
.pager { display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:1.25rem; }
.pager button { min-width:36px; height:36px; border:1px solid #000; background:#fff; cursor:pointer; }
.pager button.active { background:#000; color:#fff; }
.swatch-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (max-width:800px) { .swatch-cards { grid-template-columns:1fr; } }
.swatch-card { border:1px solid #eee; padding:1rem; }
.swatch-card .mini { display:flex; gap:.35rem; overflow:auto; margin-top:.6rem; }
.swatch-card .mini img { width:72px; height:72px; object-fit:cover; border:1px solid #ddd; flex:0 0 auto; }
.stats-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem; margin-bottom:1.25rem; }
@media (max-width:800px) { .stats-grid { grid-template-columns:repeat(2,1fr); } }
.stat { background:var(--soft); border:1px solid #eee; padding:.8rem; }
.stat b { display:block; font-size:1.35rem; }
.stat span { font-size:.75rem; color:var(--muted); }
.rphotos { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.55rem; }
.rphotos img { width:88px; height:88px; object-fit:cover; border:1px solid #ddd; }
.hidden { display:none !important; }
.stats-mini { display:flex; gap:.5rem; flex-wrap:wrap; font-size:.75rem; color:var(--muted); }
.change-price { color:#0a7; font-weight:700; }
.change-image { color:#06c; }
.change-review { color:#a60; }
.change-stock { color:var(--red); }