/* ============================================================
   CHRCOED B2B — shared base (reset + tokens + primitives)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
svg { display: block; }

:root {
  --wrap: 1280px;
  --pad: 24px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* product card primitives shared by JS renderer ------------- */
.pcard__media { position: relative; overflow: hidden; background: #fff; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.pcard:hover .pcard__media img { transform: scale(1.045); }
.stars { display: inline-flex; gap: 2px; align-items: center; }
.stars svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }