/* Shared resets + helpers for all three directions */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }

/* Each direction is scoped under its own root class so styles don't leak.
   Common helper: prevent canvas drag interference for nav links etc. */
.byc-root, .byc-root * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.byc-root a { color: inherit; text-decoration: none; }
.byc-root button { font: inherit; }

/* Product placeholder — stylized silhouettes on tinted backgrounds.
   Use across all directions, restyled per-direction via parent class. */
.pp {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e7e1d6;
}
.pp svg { width: 58%; height: 58%; }
.pp[data-tint="sand"]   { background: #e8dfce; }
.pp[data-tint="clay"]   { background: #d8b89a; }
.pp[data-tint="moss"]   { background: #a8b29a; }
.pp[data-tint="dusk"]   { background: #6d7a8c; }
.pp[data-tint="ink"]    { background: #1f2b40; }
.pp[data-tint="rust"]   { background: #b8743c; }
.pp[data-tint="bone"]   { background: #efe8d8; }
.pp[data-tint="slate"]  { background: #3a4a63; }
.pp[data-tint="cream"]  { background: #f4efe7; }
.pp[data-tint="navy"]   { background: #0e1b30; }
.pp[data-tint="ember"]  { background: #c66a3c; }
.pp[data-tint="fog"]    { background: #c8cdd4; }