/* ==========================================================================
   Marketplace 1.0.0 - styles
   --------------------------------------------------------------------------
   1. Fonts            2. Tokens (light + dark)     3. Base
   4. Buttons, forms   5. Header and footer          6. Price tag (signature)
   7. Cards and grids  8. Home                       9. Browse
  10. Item page       11. Cart, checkout, account   12. Preview frame
  13. Admin           14. Installer                 15. Responsive
  16. Motion, print
   ========================================================================== */

/* 1. Fonts (SIL OFL, bundled) */
@font-face { font-family: "Familjen Grotesk"; font-weight: 500; font-display: swap; src: url("../fonts/familjen-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 600; font-display: swap; src: url("../fonts/familjen-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 700; font-display: swap; src: url("../fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }

/* 2. Tokens */
:root {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #EEEDF3;
  --ink: #16141F;
  --muted: #5D5A6B;
  --rule: #E1DFE8;
  --plum: #4B2A7B;         /* primary */
  --plum-hover: #3A1F61;
  --plum-ink: #FFFFFF;
  --side: #2E1A4F;         /* header, footer, admin sidebar */
  --side-ink: #EDE7FA;
  --tag: #FFD23F;          /* price tag yellow */
  --tag-ink: #1F1A08;
  --teal: #0F7F6F;
  --red: #C2324A;
  --amber: #8F5F00;
  --focus: #FFB000;
  --radius: 8px;
  --display: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --wrap: 1200px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121019; --surface: #1C1926; --surface-2: #262235; --ink: #EDEBF4; --muted: #A6A2B6; --rule: #322D42;
    --plum: #BBA4F2; --plum-hover: #D0BFF8; --plum-ink: #1A1030; --side: #0C0A12; --side-ink: #DCD3F2;
    --teal: #4CC9B4; --red: #F07A8E; --amber: #F0B94A; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121019; --surface: #1C1926; --surface-2: #262235; --ink: #EDEBF4; --muted: #A6A2B6; --rule: #322D42;
  --plum: #BBA4F2; --plum-hover: #D0BFF8; --plum-ink: #1A1030; --side: #0C0A12; --side-ink: #DCD3F2;
  --teal: #4CC9B4; --red: #F07A8E; --amber: #F0B94A; color-scheme: dark;
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--body); }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--plum); text-underline-offset: 3px; }
a:hover { color: var(--plum-hover); }
img { max-width: 100%; height: auto; }
code { font: 14px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
main { display: block; outline: none; }
main.wrap { padding-top: 28px; padding-bottom: 64px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--surface); padding: 10px 14px; border-radius: var(--radius); }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.block { display: block; }
.inline { display: inline; margin: 0; }
.nowrap { white-space: nowrap; }
.icon { flex: none; }
.hp { position: absolute; left: -9999px; }
.flash { padding: 12px 16px; border-radius: var(--radius); margin: 0 0 18px; border-left: 4px solid var(--teal); background: color-mix(in srgb, var(--teal) 12%, var(--surface)); }
.flash--err { border-color: var(--red); background: color-mix(in srgb, var(--red) 11%, var(--surface)); }
.flash--warn { border-color: var(--tag); background: color-mix(in srgb, var(--tag) 18%, var(--surface)); }
main:not(.wrap) > .flash { margin-top: 18px; }
.empty, .empty-state { color: var(--muted); }
.empty-state { text-align: center; padding: 56px 16px; display: grid; justify-items: center; gap: 8px; }
.h2gap { margin-top: 40px; }

/* 4. Buttons and forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--radius);
  border: 1px solid var(--plum); background: var(--plum); color: var(--plum-ink); font: 600 16px/1.1 var(--display); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--plum-hover); border-color: var(--plum-hover); color: var(--plum-ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--muted); }
.btn--tag { background: var(--tag); border-color: var(--tag); color: var(--tag-ink); }
.btn--tag:hover { background: #F5C200; border-color: #F5C200; color: var(--tag-ink); }
.btn--danger { background: transparent; color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.btn--danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn--block { width: 100%; }
.iconbtn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; }
.iconbtn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--plum); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn.danger { color: var(--red); }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 700; align-content: start; }
.field > span { color: var(--ink); }
.field small { font-weight: 400; }
.field--wide { grid-column: 1 / -1; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: 400 16px/1.4 var(--body); }
input[type="file"] { font: 14px var(--body); max-width: 100%; }
textarea { resize: vertical; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace !important; font-size: 14px !important; }
input:focus, select:focus, textarea:focus { border-color: var(--plum); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.stack { display: grid; gap: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin-top: 10px; }
.check input { margin-top: 5px; flex: none; width: 18px; height: 18px; accent-color: var(--plum); }
.radios { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 14px; }
.copyrow { display: flex; gap: 8px; margin: 8px 0; }
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 22px 24px; margin-bottom: 20px; }
.panel--flush { padding: 0; overflow: hidden; }
.panel legend { font: 700 17px var(--display); padding: 0 6px; }
fieldset.panel { margin: 0; }
.panel.danger { border-color: color-mix(in srgb, var(--red) 35%, var(--rule)); }

/* 5. Header and footer */
.hd { background: var(--side); color: var(--side-ink); }
.hd a { color: inherit; text-decoration: none; }
.hd__row { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1.1 var(--display); letter-spacing: -.02em; color: #fff; text-decoration: none; flex: none; }
.hd .logo { --bg: var(--side); }
.hd__search { flex: 1; display: flex; max-width: 520px; position: relative; }
.hd__search input { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .18) !important; color: #fff !important; padding-right: 46px !important; }
.hd__search input::placeholder { color: rgba(237, 231, 250, .7); }
.hd__search button { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 42px; border: 0; background: none; color: var(--side-ink); cursor: pointer; border-radius: var(--radius); }
.hd__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hd__nav > a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: var(--radius); font: 600 15px var(--display); position: relative; }
.hd__nav > a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--tag); color: var(--tag-ink); font: 700 12px var(--display); }
.hd__cats { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.hd__cats a { flex: none; padding: 6px 12px; border-radius: 999px; font: 500 14px var(--display); color: rgba(237, 231, 250, .85); }
.hd__cats a:hover, .hd__cats a[aria-current] { background: rgba(255, 255, 255, .12); color: #fff; }
.ft { background: var(--side); color: var(--side-ink); padding: 48px 0 24px; margin-top: 40px; }
.ft a { color: var(--side-ink); }
.ft__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.ft__brand { font: 700 22px var(--display); color: #fff; margin-bottom: 8px; }
.ft__note { font-size: 14px; opacity: .85; display: flex; gap: 8px; align-items: flex-start; }
.ft__note .icon { margin-top: 3px; }
.ft nav { display: grid; gap: 6px; align-content: start; font-size: 15px; }
.ft nav h2 { font-size: 15px; color: #fff; margin: 0 0 4px; }
.ft nav a { text-decoration: none; }
.ft nav a:hover { text-decoration: underline; }
.ft__legal { font-size: 13px; opacity: .7; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); }

/* 6. Price tag: a yellow swing tag with a punched hole, hung at an angle */
.tag { position: relative; display: inline-flex; align-items: center; background: var(--tag); color: var(--tag-ink); font: 700 16px/1 var(--display);
  padding: 8px 14px 8px 26px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); white-space: nowrap; letter-spacing: -.01em; }
.tag__hole { position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .35); }
.tag--lg { font-size: 30px; padding: 14px 22px 14px 40px; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); }
.tag--lg .tag__hole { left: 17px; width: 11px; height: 11px; margin-top: -5.5px; }

/* 7. Cards and grids */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.card { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.card__media { display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; border-bottom: 1px solid var(--rule); }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__body { padding: 16px 18px 18px; display: grid; gap: 4px; flex: 1; align-content: start; }
.card__type { font: 600 13px var(--display); color: var(--muted); margin: 0; }
.card__title { font-size: 19px; margin: 0; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:focus-visible { outline: none; }
.card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.card__line { font-size: 15px; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__meta { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin: 6px 0 0; }
.card > .tag { position: absolute; top: 14px; right: 12px; transform: rotate(4deg); transform-origin: left center; box-shadow: 0 2px 0 rgba(0, 0, 0, .08); }
.card:hover > .tag { transform: rotate(0deg); transition: transform .2s ease; }
.stars { --pct: 0%; display: inline-block; width: 82px; height: 15px; background: linear-gradient(90deg, var(--amber) var(--pct), var(--rule) var(--pct));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 15'%3E%3Cg id='s'%3E%3Cpath d='M7.5 0l2.2 4.7 5.1.6-3.8 3.5 1 5.1-4.5-2.6L3 13.9l1-5.1L.2 5.3l5.1-.6z'/%3E%3C/g%3E%3Cuse href='%23s' x='16.6'/%3E%3Cuse href='%23s' x='33.2'/%3E%3Cuse href='%23s' x='49.8'/%3E%3Cuse href='%23s' x='66.4'/%3E%3C/svg%3E") no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 15'%3E%3Cg id='s'%3E%3Cpath d='M7.5 0l2.2 4.7 5.1.6-3.8 3.5 1 5.1-4.5-2.6L3 13.9l1-5.1L.2 5.3l5.1-.6z'/%3E%3C/g%3E%3Cuse href='%23s' x='16.6'/%3E%3Cuse href='%23s' x='33.2'/%3E%3Cuse href='%23s' x='49.8'/%3E%3Cuse href='%23s' x='66.4'/%3E%3C/svg%3E") no-repeat;
  vertical-align: -2px; }

/* 8. Home */
.hero { background: var(--side); color: var(--side-ink); padding: 40px 0 64px; position: relative; overflow: hidden; }
.hero__inner { position: relative; }
.hero__title { color: #fff; font-size: clamp(36px, 6vw, 68px); line-height: 1.02; letter-spacing: -.035em; max-width: 15ch; margin-bottom: 16px; }
.hero__sub { font-size: clamp(17px, 2vw, 20px); max-width: 52ch; opacity: .9; }
.hero__search { display: flex; gap: 10px; max-width: 640px; margin: 28px 0 22px; }
.hero__search input { min-height: 54px !important; font-size: 18px !important; border: 0 !important; }
.hero__search .btn { min-height: 54px; padding: 0 24px; }
.hero__types { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.hero__types a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; color: #fff; text-decoration: none; font: 600 15px var(--display); }
.hero__types a:hover { background: rgba(255, 255, 255, .1); }
.hero__types span { font-weight: 500; opacity: .7; }
.shelf { margin-top: 48px; }
.shelf__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.shelf__head h2 { margin: 0; font-size: 28px; }
.shelf__head a { font: 600 15px var(--display); }
.promise { margin-top: 64px; padding: 32px; border-radius: 16px; background: var(--surface); border: 1px solid var(--rule); }
.promise__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 18px; }
.promise p { color: var(--muted); font-size: 15px; margin: 0; }

/* 9. Browse */
.browse__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.browse__head h1 { margin-bottom: 4px; }
.browse__head p { margin: 0; }
.browse__filters { display: flex; gap: 12px; flex-wrap: wrap; }
.browse__filters label { display: grid; gap: 4px; font: 600 13px var(--display); color: var(--muted); }
.browse__filters select { min-width: 180px; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 28px; }
.pager a { min-width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; }
.pager a[aria-current] { background: var(--plum); color: var(--plum-ink); border-color: var(--plum); }

/* 10. Item page */
.crumbs { font: 500 14px var(--display); color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.itemhead h1 { font-size: clamp(30px, 4.5vw, 46px); letter-spacing: -.03em; margin-bottom: 6px; }
.itemhead__line { font-size: 19px; color: var(--muted); max-width: 70ch; }
.itemhead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 15px; color: var(--muted); }
.itemhead__meta a { color: inherit; text-decoration: none; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 600 13px var(--display); }
.itemlayout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; margin-top: 24px; align-items: start; }
.gallery__stage { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.gallery__stage img { display: block; width: 100%; }
.gallery__stage figcaption { padding: 10px 16px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--rule); }
.gallery__stage figcaption:empty { display: none; }
.gallery__thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 12px 2px 4px; }
.gallery__thumb { flex: none; width: 112px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--surface); cursor: pointer; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.gallery__thumb[aria-current="true"] { border-color: var(--plum); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 28px 0 8px; border-bottom: 1px solid var(--rule); }
.tabs a { padding: 10px 14px; font: 600 15px var(--display); color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover, .tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--plum); }
.prose { max-width: 72ch; padding-top: 18px; }
.prose h2 { margin-top: 1.4em; }
.prose h3 { margin-top: 1.2em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .3em; }
.ticks { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 24px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .icon { color: var(--teal); margin-top: 3px; }
.reviews { padding-top: 24px; max-width: 72ch; }
.review { padding: 16px 0; border-top: 1px solid var(--rule); }
.review header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; margin-bottom: 6px; }
.review p { margin: 0; }
.verified { display: inline-flex; align-items: center; gap: 4px; color: var(--teal); font: 600 13px var(--display); }
.reviewform { margin-top: 20px; padding: 20px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); display: grid; gap: 12px; }
.rate { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rate legend { font: 700 14px var(--body); margin-bottom: 6px; float: left; width: 100%; }
.rate input { position: absolute; opacity: 0; }
.rate label { width: 30px; height: 30px; cursor: pointer; background: var(--rule);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M7.5 0l2.2 4.7 5.1.6-3.8 3.5 1 5.1-4.5-2.6L3 13.9l1-5.1L.2 5.3l5.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M7.5 0l2.2 4.7 5.1.6-3.8 3.5 1 5.1-4.5-2.6L3 13.9l1-5.1L.2 5.3l5.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label { background: var(--amber); }
.rate input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.buybox { position: sticky; top: 20px; display: grid; gap: 16px; }
.buybox__card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 22px; display: grid; gap: 12px; }
.buybox__price { margin: -4px 0 4px -22px; }
.licences { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.licence { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; }
.licence:has(input:checked) { border-color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); }
.licence input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--plum); }
.licence small { display: block; color: var(--muted); font-size: 13.5px; }
.licence b { font-family: var(--display); }
.owned { display: flex; gap: 6px; align-items: center; color: var(--teal); font-weight: 700; margin: 0; }
.buybox__small { font-size: 13.5px; color: var(--muted); margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.buybox__small .icon { margin-top: 3px; }
.facts { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 6px 18px; }
.facts div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.facts div:first-child { border-top: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.taglist a { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink); text-decoration: none; font-size: 13px; }
.ainote { font-size: 13.5px; color: var(--muted); padding: 0 4px; margin: 0; }

/* 11. Cart, checkout, account */
.narrow { max-width: 760px; margin: 0 auto; }
.narrow--wide { max-width: 980px; }
.lines, .dl, .summary, .receipts, .plain { list-style: none; padding: 0; margin: 0; }
.line { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--rule); }
.line img, .dl__row img { border-radius: 8px; object-fit: cover; background: var(--surface-2); }
.line__info { display: grid; gap: 6px; }
.line__info a { color: var(--ink); text-decoration: none; }
.line__lic select { max-width: 220px; min-height: 36px; padding: 4px 8px; font-size: 14px; }
.line__price { font: 700 18px var(--display); }
.cartfoot { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; justify-items: end; gap: 8px; }
.cartfoot__total { display: flex; gap: 24px; font-size: 20px; margin: 0; }
.summary li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule); }
.summary li:first-child { border-top: 0; }
.summary small { display: block; color: var(--muted); font-size: 14px; }
.totals { margin: 14px 0 0; display: grid; gap: 6px; }
.totals div { display: flex; justify-content: space-between; gap: 16px; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-weight: 700; }
.totals__grand { border-top: 2px solid var(--ink); padding-top: 10px; margin-top: 4px; font: 700 20px var(--display); }
.totals__grand dt { color: var(--ink); }
.coupon { display: flex; gap: 8px; margin-top: 18px; }
.coupon input { max-width: 240px; text-transform: uppercase; }
.paybox__msg { margin: 10px 0 0; font-weight: 700; }
.paybox__msg:empty { display: none; }
.authbox { max-width: 440px; margin: 20px auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 28px; }
.authbox__alt { margin: 14px 0 0; font-size: 15px; }
.dl__row { display: grid; grid-template-columns: 80px 1fr auto; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--rule); }
.dl__row.is-revoked { opacity: .6; }
.dl__info { display: grid; gap: 4px; min-width: 0; }
.dl__info a { color: var(--ink); text-decoration: none; font-size: 18px; }
.dl__info .muted { font-size: 14px; }
.dl__info .code { font-size: 14px; }
.dl__actions { display: grid; gap: 8px; justify-items: stretch; }
.receipts li { padding: 6px 0; }
.thanks { text-align: center; padding: 28px 16px 36px; }
.cert { max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 36px 40px; }
.cert__store { font: 700 18px var(--display); color: var(--plum); margin-bottom: 18px; }
.cert__item { font: 700 26px var(--display); margin: 12px 0 22px; }
.cert .facts { margin-bottom: 20px; }
.receipt__head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.receipt__no { text-align: right; }
.receipt__no h2 { margin: 0; }
.receipt__no p { margin: 0; }
.rtable { width: 100%; border-collapse: collapse; margin-top: 10px; }
.rtable th, .rtable td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--rule); }
.num { text-align: right !important; white-space: nowrap; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.page h1 { margin-bottom: 4px; }

/* 12. Preview frame */
body.pv { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.pv__bar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--side); color: var(--side-ink); flex: none; }
.pv__back { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 17px var(--display); min-width: 0; --bg: var(--side); }
.pv__back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv__sizes { display: flex; gap: 4px; margin: 0 auto; }
.pv__sizes button { background: transparent; color: var(--side-ink); border: 1px solid rgba(255, 255, 255, .2); border-radius: 6px; padding: 6px 12px; font: 600 14px var(--display); cursor: pointer; }
.pv__sizes button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #fff; }
.pv__actions { display: flex; align-items: center; gap: 12px; }
.pv__plain { color: var(--side-ink); font: 600 14px var(--display); display: inline-flex; gap: 6px; align-items: center; }
.pv__stage { flex: 1; display: flex; justify-content: center; background: #2A2633; }
.pv__stage iframe { border: 0; width: 100%; height: 100%; background: #fff; transition: width .25s ease; }

/* 13. Admin */
body.admin { background: var(--bg); }
.ad { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; }
.ad__side { background: var(--side); color: var(--side-ink); padding: 18px 12px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.logo--admin { font-size: 17px; padding: 6px 8px 20px; --bg: var(--side); }
.ad__side nav { display: grid; gap: 2px; }
.ad__side nav a, .ad__foot a { display: block; padding: 9px 12px; border-radius: var(--radius); color: var(--side-ink); text-decoration: none; font: 500 15px var(--display); }
.ad__side nav a:hover, .ad__foot a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ad__side nav a[aria-current] { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 3px 0 0 var(--tag); }
.ad__foot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 10px; }
.ad__main { min-width: 0; display: flex; flex-direction: column; }
.ad__top { display: flex; align-items: center; gap: 12px; padding: 14px 28px; background: var(--surface); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 5; }
.ad__top h1 { font-size: 22px; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ad .ad__menu { display: none; }
.ad main { padding: 24px 28px 48px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; margin-bottom: 20px; }
.kpis > div { padding: 18px 20px; border-left: 1px solid var(--rule); display: grid; gap: 2px; }
.kpis > div:first-child { border-left: 0; }
.kpis span { color: var(--muted); font-size: 14px; }
.kpis strong { font: 700 26px var(--display); letter-spacing: -.02em; }
.kpis small { color: var(--muted); font-size: 13px; }
.adgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.chart { width: 100%; height: auto; display: block; }
.chart__bar { fill: var(--rule); }
.chart__bar.has { fill: var(--plum); }
.chart__axis { fill: var(--muted); font: 500 12px var(--display); }
.plain li { padding: 7px 0; border-top: 1px solid var(--rule); }
.plain li:first-child { border-top: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.toolbar .tabs { margin: 0 auto 0 0; border: 0; }
.toolbar .tabs a { border: 1px solid var(--rule); border-radius: 999px; margin: 0; padding: 6px 12px; }
.toolbar .tabs a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.search { display: flex; gap: 8px; }
.search input { width: 240px; }
.table-wrap { overflow-x: auto; position: relative; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font: 600 13px var(--display); color: var(--muted); padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table input { min-height: 38px !important; }
.table .w-sm { width: 80px; }
.wrapcell { min-width: 220px; }
.itemcell { display: flex; gap: 12px; align-items: center; }
.itemcell img { border-radius: 6px; object-fit: cover; background: var(--surface-2); }
.spill { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 600 13px var(--display); background: var(--surface-2); color: var(--muted); }
.spill.is-published, .spill.is-paid, .spill.is-active, .spill.is-visible { background: color-mix(in srgb, var(--teal) 16%, var(--surface)); color: var(--teal); }
.spill.is-draft, .spill.is-pending { background: color-mix(in srgb, var(--tag) 30%, var(--surface)); color: var(--amber); }
.spill.is-failed, .spill.is-refunded, .spill.is-revoked, .spill.is-hidden { background: color-mix(in srgb, var(--red) 12%, var(--surface)); color: var(--red); }
.preview { margin-top: 8px; max-width: 280px; border-radius: 6px; border: 1px solid var(--rule); }
.preview--sq { max-width: 120px; }
.shots { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.shots li { display: grid; grid-template-columns: 160px 1fr 90px auto; gap: 14px; align-items: end; padding: 12px; border: 1px solid var(--rule); border-radius: 10px; }
.shots img { border-radius: 6px; width: 160px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.sticky-actions { position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); padding: 12px 0; z-index: 4; }
.msg.is-unread { border-left: 4px solid var(--tag); }
.msg header { margin-bottom: 8px; }
.ad__side.is-open { transform: none; }

/* 14. Installer */
.install { max-width: 760px; margin: 40px auto; padding: 0 16px; }
.checks { list-style: none; padding: 0; margin: 0 0 18px; font-size: 14px; }
.checks .is-ok { color: var(--teal); }
.checks .is-bad { color: var(--red); font-weight: 700; }

/* 15. Responsive */
@media (max-width: 1000px) {
  .itemlayout { grid-template-columns: minmax(0, 1fr); }
  .buybox { position: static; }
  .promise__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft__grid > div:first-child { grid-column: 1 / -1; }
  .adgrid { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis > div:nth-child(3) { border-left: 0; }
  .kpis > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 860px) {
  .ad { grid-template-columns: minmax(0, 1fr); }
  .ad__side { position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 30; transform: translateX(-100%); transition: transform .2s ease; }
  .ad__side.is-open { box-shadow: 0 0 0 100vmax rgba(10, 8, 20, .5); }
  .ad .ad__menu { display: inline-grid; }
  .ad__top { padding: 10px 16px; }
  .ad main { padding: 18px 16px 40px; }
  .form-grid--3, .form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd__row { flex-wrap: wrap; gap: 10px 14px; padding-top: 10px; padding-bottom: 10px; }
  .hd__search { order: 3; flex-basis: 100%; max-width: none; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .pv__sizes { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  main.wrap { padding-top: 20px; }
  .hd__nav > a span { display: none; }
  .hd__nav > a { padding: 9px; }
  .hide-sm { display: none !important; }
  .form-grid, .form-grid--3, .form-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero { padding: 28px 0 40px; }
  .hero__search { flex-direction: column; }
  .promise { padding: 22px 18px; }
  .promise__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ft__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .browse__filters, .browse__filters label { width: 100%; }
  .browse__filters select { min-width: 0; }
  .line { grid-template-columns: 56px 1fr auto; }
  .line img { width: 56px; height: 56px; }
  .line__price { grid-column: 2; }
  .dl__row { grid-template-columns: 56px minmax(0, 1fr); }
  .dl__row img { width: 56px; height: 56px; }
  .dl__actions { grid-column: 1 / -1; }
  .authbox, .cert { padding: 22px 18px; }
  .panel { padding: 18px 16px; }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .kpis > div { border-left: 0 !important; }
  .kpis > div + div { border-top: 1px solid var(--rule); }
  .search, .search input { width: 100%; }
  .shots li { grid-template-columns: minmax(0, 1fr); }
  .shots img { width: 100%; }
  .pv__plain span { display: none; }
  .pv__bar { gap: 10px; padding: 8px 10px; }
  .pv__back span { max-width: 38vw; }
  .tag--lg { font-size: 26px; }
  .receipt__no { text-align: left; }
  .coupon { flex-wrap: wrap; }
}

/* 16. Motion and print */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .card > .tag, .card:hover > .tag { transform: none; }
}
@media print {
  .hd, .ft, .noprint, .skip, .flash, .thanks .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .cert { border: 0; padding: 0; }
}

/* Figures (prices, dates, codes in tables) use the display face: the body
   face draws a slashed zero, which reads oddly in amounts. */
.table, .facts dd, .totals, .summary, .itemhead__meta, .card__meta, .line__price, .cartfoot__total, .rtable, .dl__info .muted, .kpis, .chase, .receipt__no, .ainote { font-family: var(--display); }
.mt { margin-top: 16px; }

.hero__flat { display: flex; align-items: center; gap: 12px; margin: -6px 0 20px; font: 600 16px var(--display); color: #fff; }
.hero__flat .tag__hole { background: var(--side); }