/* CSS sticker preview — port of Sticker.dc.html, shared by shop and admin.
   Markup from sticker() in app/helpers.php. --sz: width; --fsf: font factor by label length. */
.stk { --sz: 120px; position: relative; display: block; width: var(--sz); aspect-ratio: 1; flex: none; filter: drop-shadow(0 2px 3px rgba(32, 30, 29, .25)); }
.stk::before, .stk-ring, .stk-face { position: absolute; clip-path: var(--clip); }
.stk::before { content: ""; inset: 0; background: #fbfaf9; }
.stk-ring { inset: 5%; background: var(--ring); }
.stk-face {
  inset: var(--face-in); background: var(--face); color: var(--ink); display: flex; align-items: center; justify-content: center;
  padding: 0 10%; font-family: var(--font-heading); font-weight: 600; font-size: calc(var(--sz) * var(--fsf)); line-height: 1.02;
  text-align: center; letter-spacing: -0.01em; overflow-wrap: normal; word-break: keep-all;
}
.stk-circle { --clip: circle(50% at 50% 50%); }
.stk-square { --clip: inset(0 round 14%); }
.stk-rect { --clip: inset(0 round 14% / 20%); aspect-ratio: 3 / 2; }
.stk-octagon { --clip: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%); }
.stk-triangle { --clip: polygon(50% 2%, 99% 96%, 1% 96%); }
.stk-triangle .stk-ring { inset: 6%; }
.stk-triangle .stk-face { padding: 34% 14% 4%; }
.k-ring    { --ring: var(--color-accent-2); --face: #fbfaf9; --ink: var(--color-text); --face-in: 14%; }
.k-magenta { --ring: #fbfaf9; --face: var(--color-accent-2); --ink: #fbfaf9; --face-in: 9%; }
.k-yellow  { --ring: var(--color-text); --face: var(--color-process-yellow); --ink: var(--color-text); --face-in: 11%; }
.k-cyan    { --ring: #fbfaf9; --face: var(--color-accent); --ink: #fbfaf9; --face-in: 9%; }
.k-black   { --ring: #fbfaf9; --face: var(--color-text); --ink: #fbfaf9; --face-in: 9%; }
.stk-triangle.k-ring    { --face-in: 20%; }
.stk-triangle.k-yellow  { --face-in: 17%; }
.stk-triangle.k-magenta, .stk-triangle.k-cyan, .stk-triangle.k-black { --face-in: 15%; }
.stk-img { height: var(--sz); object-fit: contain; filter: none; }