/* forte.deerfox.me/stickers — shared look for the storefront, the sheet builder and the cart.
   Same skin as forte.deerfox.me: cool white label stock, blue-black print ink, die-cut 6px corners, a printed
   sky-blue field, mint status swatches. Mono is for data only: field names, codes, dates, sizes. */
:root {
  --stock: #F4F6F8;      /* cool white label stock */
  --sheet: #FFFFFF;      /* bright white: cards, the sheet on the mat */
  --ink: #10212E;        /* blue-black print ink */
  --ink-2: #51616D;      /* secondary ink */
  --rule: #C9D2DA;       /* light rule */
  --sky: #A4CFF2;        /* printed sky-blue field */
  --sky-deep: #2E7FC4;   /* focus ring */
  --sky-wash: #E7F1FB;   /* a light print of the sky */
  --mint: #8FE3C8;       /* status swatch */
  --mint-wash: #E3F7F0;
  --warn: #B4453A;       /* errors only: the one colour the label doesn't print */
  --warn-wash: #FBEDEA;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --cond: "Barlow Semi Condensed", "Barlow", system-ui, Helvetica, Arial, sans-serif;
  --radius: 6px;         /* die-cut corner */
  --line: 1.5px;         /* print weight of every border */
  --gutter: 40px;
  --focus: 2px solid var(--sky-deep);
  /* the rainbow film under every drawn holographic swatch */
  --holo-film: linear-gradient(135deg, #ffd1e8 0%, #ffe9b8 18%, #d6ffd9 36%, #c4e8ff 54%, #e2ccff 72%, #ffd1e8 90%);

  /* names the three pages use */
  --paper: var(--sheet);
  --paper-2: var(--stock);
  --hairline: var(--rule);
  --ink-soft: var(--ink-2);
  --accent: var(--ink);
  --accent-ink: var(--stock);
  --accent-wash: var(--sky-wash);
  --ok: #1E6F55;
  --ok-wash: var(--mint-wash);
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }   /* the hidden attribute must win over display rules like .facts li { display: grid } */
html { -webkit-text-size-adjust: 100%; background: var(--stock); color: var(--ink); }
body {
  margin: 0;
  font: 400 16px/1.55 var(--sans);
  color: var(--ink);
  background: var(--stock);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-underline-offset: 3px; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Mono: field names, codes, dates ---- */
.mono {
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* a field name with its printed mint swatch */
.field { display: inline-flex; align-items: center; gap: 9px; }
.field::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--mint); box-shadow: inset 0 0 0 1px var(--ink); }
h2.field, h3.field { margin: 0 0 12px; color: var(--ink); }

/* ---- Header: the label's header strip ---- */
.shop-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 28px;
  padding: 14px var(--gutter);
  background: rgba(244, 246, 248, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: var(--line) solid var(--ink);
}
.shop-header .brand {
  display: inline-flex; align-items: baseline; gap: 12px;
  font: 800 26px/1 var(--cond); letter-spacing: -.015em; text-decoration: none; white-space: nowrap;
}
.shop-header .brand .brand-sub { color: var(--ink-2); }
.shop-header nav { display: flex; gap: 30px; }
.shop-header nav a {
  position: relative; display: inline-block; padding: 8px 0 10px;
  font: 500 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
}
.shop-header nav a::after {
  content: ""; position: absolute; left: 0; bottom: 2px; width: 26px; height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
}
.shop-header nav a[aria-current="page"]::after, .shop-header nav a:hover::after { transform: scaleX(1); }
.shop-header .spacer { flex: 1; }
.cart-link {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font: 600 14px/1 var(--sans); white-space: nowrap;
  border: var(--line) solid var(--ink); background: var(--sheet); border-radius: var(--radius); padding: 10px 12px;
}
.cart-link:hover { background: var(--sky); }
.cart-link svg { width: 18px; height: 18px; }
.cart-link .count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 3px;
  background: var(--ink); color: var(--stock);
  font-family: var(--mono); font-stretch: 87.5%; font-weight: 600; font-size: 11px;
  display: inline-grid; place-items: center;
}
.cart-link .count:empty, .cart-link .count[data-zero] { display: none; }
@media (max-width: 760px) {
  .shop-header { gap: 16px; }
  .shop-header .brand .brand-sub { display: none; }
  .shop-header nav { gap: 18px; }
  .shop-header nav a.hide-sm { display: none; }
}
@media (max-width: 560px) {
  .shop-header nav a { font-size: 14px; }
  .cart-link .cart-word { display: none; }
  .cart-link { padding: 9px 10px; }
}

/* ---- Paper: one label per block ---- */
.paper {
  background: var(--sheet);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
}
.wrap { width: min(1100px, 100% - 2 * var(--gutter)); margin: 0 auto; }

/* ---- Buttons: ink print, sky on hover ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--sans); text-decoration: none; cursor: pointer;
  border: var(--line) solid var(--ink); background: var(--sheet); color: var(--ink);
  border-radius: var(--radius); padding: 13px 20px;
}
.btn:hover { background: var(--sky); }
.btn.primary { background: var(--ink); color: var(--stock); }
.btn.primary:hover { background: var(--sky); color: var(--ink); }
.btn.big { font-size: 15px; padding: 15px 24px; }
.btn.small { font-size: 13px; padding: 9px 12px; }
.btn.danger:hover { background: var(--warn-wash); border-color: var(--warn); color: var(--warn); }
.btn[disabled], .btn[aria-disabled="true"], .btn.primary[disabled] {
  background: var(--stock); border-color: var(--rule); color: var(--ink-2); cursor: not-allowed; pointer-events: none;
}
.btn.block { width: 100%; }

/* ---- Stock pills: a printed swatch and a code ---- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-stretch: 87.5%; font-weight: 500; font-size: 11px; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--ink);
}
.pill::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--mint); box-shadow: inset 0 0 0 1px var(--ink); }
.pill.low::before { background: var(--sky); }
.pill.out { color: var(--ink-2); }
.pill.out::before { background: var(--stock); }
.pill.info { color: var(--ink-2); }
.pill.info::before { background: var(--rule); }

/* ---- Finish swatches: the real photo when there is one, otherwise a drawn stand-in ---- */
.swatch {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--stock);
  border-radius: calc(var(--radius) - 1.5px) calc(var(--radius) - 1.5px) 0 0;
}
.swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatch.paper-fin { background: linear-gradient(160deg, #fbfbf8, #e8ebe3); }
.swatch.matte { background: linear-gradient(160deg, #f4f3ef 0%, #e2e3dc 100%); }
.swatch.gloss { background: linear-gradient(160deg, #ffffff 0%, #dfe6ea 40%, #f7fafb 55%, #c9d4da 100%); }
.swatch.holo {
  background:
    linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 65%, rgba(255,255,255,.45) 100%),
    var(--holo-film);
}
.swatch.star {
  background:
    radial-gradient(circle at 18% 30%, #fff 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 62% 22%, #fff 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 80% 58%, #fff 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 38% 70%, #fff 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 55% 48%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 10% 84%, #fff 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 90% 12%, #fff 0 1px, transparent 2px),
    linear-gradient(135deg, #e5d4ff 0%, #c9e6ff 25%, #d7ffe9 50%, #fff2c2 75%, #ffd3ea 100%);
}
.swatch.glitter {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 70% 40%, rgba(255,255,255,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 45% 75%, rgba(255,255,255,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 30% 55%, rgba(255,255,255,.9) 0 1px, transparent 1.8px),
    linear-gradient(135deg, #f7d9ff 0%, #ffd9e4 50%, #ffe8c9 100%);
}
.swatch.gold { background: linear-gradient(135deg, #f6e3a1 0%, #d9b45a 35%, #fff2c4 55%, #c9a24a 100%); }
.swatch.silver { background: linear-gradient(135deg, #f5f7f8 0%, #c3ccd2 35%, #ffffff 55%, #aeb9c0 100%); }
.swatch.mirror { background: linear-gradient(135deg, #dfe5ea 0%, #ffffff 28%, #98a4ad 48%, #ffffff 68%, #c3ccd3 100%); }
.swatch.pearl {
  background:
    linear-gradient(115deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.6) 60%, rgba(255,255,255,0) 100%),
    linear-gradient(135deg, #fbeff6 0%, #eef3ff 30%, #effff6 55%, #fff6e8 80%, #f7ecff 100%);
}
/* the patterned holographic films: a pattern in white over the same rainbow film */
.swatch.glass {
  background:
    linear-gradient(28deg, transparent 49.4%, rgba(255,255,255,.9) 49.4%, rgba(255,255,255,.9) 50.6%, transparent 50.6%),
    linear-gradient(-55deg, transparent 49.4%, rgba(255,255,255,.9) 49.4%, rgba(255,255,255,.9) 50.6%, transparent 50.6%),
    linear-gradient(80deg, transparent 69.4%, rgba(255,255,255,.9) 69.4%, rgba(255,255,255,.9) 70.6%, transparent 70.6%),
    conic-gradient(from 20deg at 34% 42%, rgba(255,255,255,.45) 0 40deg, transparent 40deg 95deg, rgba(255,255,255,.3) 95deg 135deg, transparent 135deg 210deg, rgba(255,255,255,.4) 210deg 255deg, transparent 255deg 300deg, rgba(255,255,255,.25) 300deg 360deg),
    conic-gradient(from 200deg at 72% 66%, rgba(255,255,255,.4) 0 50deg, transparent 50deg 120deg, rgba(255,255,255,.3) 120deg 160deg, transparent 160deg 250deg, rgba(255,255,255,.35) 250deg 300deg, transparent 300deg 360deg),
    var(--holo-film);
}
.swatch.dots {
  background:
    radial-gradient(circle, rgba(255,255,255,.8) 0 2.4px, transparent 3.2px) 0 0 / 14px 14px,
    radial-gradient(circle, rgba(255,255,255,.6) 0 2px, transparent 2.8px) 7px 7px / 14px 14px,
    var(--holo-film);
}
.swatch.hearts {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20 C5 15 4 10 7.5 8.5 C9.5 7.7 11.3 9 12 10.4 C12.7 9 14.5 7.7 16.5 8.5 C20 10 19 15 12 20Z' fill='white' fill-opacity='.9'/%3E%3C/svg%3E") 0 0 / 22px 22px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20 C5 15 4 10 7.5 8.5 C9.5 7.7 11.3 9 12 10.4 C12.7 9 14.5 7.7 16.5 8.5 C20 10 19 15 12 20Z' fill='white' fill-opacity='.7'/%3E%3C/svg%3E") 11px 11px / 22px 22px,
    var(--holo-film);
}
.swatch.lines { background: repeating-linear-gradient(45deg, rgba(255,255,255,.6) 0 1.5px, transparent 1.5px 7px), var(--holo-film); }
.swatch.sand {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 3 -1.5'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 120px 120px,
    linear-gradient(135deg, #fbe3ef 0%, #fff0d6 30%, #e4fbe8 55%, #dceeff 80%, #efe2ff 100%);
}
.swatch.prism {
  background:
    repeating-linear-gradient(60deg, rgba(255,255,255,.45) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.45) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, transparent 1px 15.6px),
    var(--holo-film);
}
.swatch.mosaic {
  background:
    linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px) 0 0 / 12px 12px,
    repeating-conic-gradient(rgba(255,255,255,.22) 0 25%, transparent 0 50%) 0 0 / 24px 24px,
    var(--holo-film);
}
.swatch.snow {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='white' stroke-opacity='.9' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M14 4v20M5.3 9l17.4 10M5.3 19l17.4-10M14 8l-3-2M14 8l3-2M14 20l-3 2M14 20l3 2M8.8 11l-.6-3.5M8.8 11l-3.5.6M19.2 11l.6-3.5M19.2 11l3.5.6M8.8 17l-.6 3.5M8.8 17l-3.5-.6M19.2 17l.6 3.5M19.2 17l3.5-.6'/%3E%3C/svg%3E") 0 0 / 26px 26px,
    linear-gradient(135deg, #e6ecff 0%, #d8f3ff 30%, #e9fff3 55%, #fff5fb 80%, #ece4ff 100%);
}
.swatch.clear {
  background-color: #fff;
  background-image: linear-gradient(45deg, #e6e9e3 25%, transparent 25%), linear-gradient(-45deg, #e6e9e3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e6e9e3 75%), linear-gradient(-45deg, transparent 75%, #e6e9e3 75%);
  background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
/* a sample sticker on every drawn swatch: mint print, white die-cut border, the cut line in ink */
.swatch.drawn::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 42%; height: 48%;
  transform: translate(-50%, -50%) rotate(-8deg);
  background: var(--mint);
  border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%;
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--ink);
}
.swatch.drawn.out::after { background: var(--rule); }
.swatch.out img { filter: grayscale(.8) brightness(1.05); }

/* ---- Events list (storefront and cart) ---- */
.events { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.events li { padding: 12px 0; border-top: 1px solid var(--rule); display: grid; gap: 3px; }
.events li:first-child { border-top: 0; padding-top: 0; }
.events .when { font-family: var(--mono); font-stretch: 87.5%; font-weight: 500; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.events .what { font-weight: 600; font-size: 17px; line-height: 1.25; }
.events .where { color: var(--ink-2); }
.events .note { font-size: 14px; white-space: pre-line; color: var(--ink-2); }
.events .tag {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: 2px;
  font-family: var(--mono); font-stretch: 87.5%; font-weight: 500; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
.events .tag::before { content: ""; width: 7px; height: 7px; background: var(--mint); box-shadow: inset 0 0 0 1px var(--ink); }
.events .tag.info { color: var(--ink-2); }
.events .tag.info::before { background: var(--rule); }

/* ---- Care-label strip: barcode + code, as on the about page ---- */
.care-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px;
  color: var(--ink-2);
}
.care-head .code { display: inline-flex; align-items: center; gap: 14px; }
.barcode { height: 28px; width: auto; color: var(--ink); display: block; }

/* ---- Small things ---- */
.muted { color: var(--ink-2); }
.notice {
  border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 11px 14px;
  font-size: 14px; font-weight: 500; background: var(--sky-wash);
}
.notice.warn { border-style: dashed; background: var(--warn-wash); }
.notice.ok { background: var(--mint-wash); }
@media (max-width: 920px) { :root { --gutter: 20px; } }
@media (prefers-reduced-motion: no-preference) { .shop-header nav a::after { transition: transform .18s ease-out; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }