:root {
  --bg: #0b0d14;
  --bg-2: #121522;
  --card: #171a2a;
  --line: #262a3d;
  --ink: #f3f4f8;
  --ink-2: #b7bccf;
  --muted: #8a90a8;
  --brand: #ffcb05;
  --brand-2: #ff8a00;
  /* Text on the brand colour: buttons, badges, the announce bar. */
  --on-brand: #1a1200;
  --blue: #3b82f6;
  --red: #ef4444;
  --green: #22c55e;
  /* The same colours as r,g,b, for the see-through shades of them. A shop's
     theme (src/theme.js) sets both forms. */
  --bg-rgb: 11,13,20;
  --brand-rgb: 255,203,5;
  --brand-2-rgb: 255,138,0;
  --blue-rgb: 59,130,246;
  --green-rgb: 34,197,94;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.01em; margin: 0 0 .4em; line-height: 1.15; }
h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1rem; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.block { display: block; }

/* Announce + header */
.announce { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: var(--on-brand); font-size: .85rem; text-align: center; padding: 7px 12px; font-weight: 500; }
/* A service notice, not an offer: dark, so it never reads as a sale. */
.announce-notice { background: var(--bg-2); color: var(--ink); border-bottom: 1px solid var(--brand); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 44px; position: relative; }
.announce-notice strong { color: var(--brand); }
.announce-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--ink-2); font-size: 1.3rem; line-height: 1; padding: 6px 10px; cursor: pointer; }
.announce-close:hover { color: var(--ink); }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(var(--bg-rgb),.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 18px; height: 68px; }
/* The header row is wider than the page grid: six category links, a search
   field and the language pills do not fit in 1200px once the labels are in
   German. Everything below still lines up on the 1200px content column. */
.site-header .nav { max-width: 1400px; }
.logo { display: inline-flex; align-items: center; }
/* Height drives it; width follows the artwork's own ratio, so the box can never
   disagree with the picture and the mark never stretches. */
.logo img { height: 30px; width: auto; }
.site-footer .logo img { height: 26px; }
/* A shop with no logo of its own has its name set in letters instead. */
.logo-text { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-footer .logo-text { font-size: 1.1rem; }
.nav-links { display: flex; gap: 13px; font-size: .85rem; color: var(--ink-2); flex: 1 1 auto; min-width: 0; }
.nav-links a { white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--brand); }
.search { display: flex; flex: 1 1 auto; max-width: 460px; min-width: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
/* 170px is the point where the placeholder still reads as a sentence rather
   than a truncated word, so the field stops shrinking there. */
.search input { flex: 1 1 auto; background: transparent; border: 0; color: var(--ink); padding: 8px 14px; width: 210px; min-width: 170px; outline: none; font: inherit; font-size: .9rem; }
.search button { flex: 0 0 auto; background: transparent; border: 0; padding: 0 12px; cursor: pointer; }
.search-toggle { display: none; background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 7px 11px; font-size: 1rem; line-height: 1; cursor: pointer; }
body.search-open .search-toggle { background: var(--bg-2); border-color: var(--brand); }
.lang-switch { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.lang-switch a { font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 4px 8px; border-radius: 999px; color: var(--muted); }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.active { background: var(--brand); color: var(--on-brand); }
.cart-link { margin-left: auto; position: relative; font-size: 1.3rem; padding: 6px; }
.cart-count { position: absolute; top: -2px; right: -6px; background: var(--brand); color: var(--on-brand); font-size: .7rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.burger { display: none; background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 6px 10px; font-size: 1.1rem; cursor: pointer; }
.mobile-nav { display: none; flex-direction: column; border-top: 1px solid var(--line); background: var(--bg-2); }
.mobile-nav a { padding: 12px 20px; border-bottom: 1px solid var(--line); }
body.nav-open .mobile-nav { display: flex; }
.mobile-nav .lang-row { display: flex; gap: 8px; padding: 12px 20px; }
.mobile-nav .lang-row a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .8rem; }
.mobile-nav .lang-row a.active { background: var(--brand); color: var(--on-brand); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: var(--on-brand); font-weight: 700; border: 0; border-radius: 10px; padding: 10px 18px; cursor: pointer; font: inherit; font-weight: 700; transition: transform .1s, filter .15s; white-space: nowrap; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:disabled, .btn-disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-sm { padding: 7px 12px; font-size: .85rem; border-radius: 8px; }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; border-radius: 12px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
/* Green means act now, and is spent only on the open pre-order list. The
   dark ink is the same one the paid-order badge uses on this green. */
.btn-go { background: var(--green); color: #052e16; }
.lead-go { color: var(--green); font-weight: 700; }
.btn-block { width: 100%; }
.input, .input-sm, select, input[type=number], input[type=text], input[type=search], input[type=tel], input[type=url] { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px 10px; font: inherit; }
.input-sm { width: 90px; }
/* A date needs more room than a number, and the picker adds its own icon. */
input[type=date] { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 7px 9px; font: inherit; font-size: .85rem; color-scheme: dark; }
.input-date { width: 140px; }
select { cursor: pointer; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; padding: 48px 0 30px; min-height: 440px; }
.eyebrow { display: inline-block; color: var(--brand); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; margin-bottom: 14px; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 14px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--ink-2); font-size: 1.1rem; max-width: 520px; }
.hero-cta { display: flex; gap: 12px; margin: 22px 0 18px; flex-wrap: wrap; }
.hero-cards { position: relative; height: 420px; }
.hc { position: absolute; width: 230px; border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.6); transition: transform .4s; }
.hc1 { left: 8%; top: 40px; transform: rotate(-12deg); z-index: 1; }
.hc2 { left: 32%; top: 0; transform: rotate(2deg); z-index: 3; width: 250px; }
.hc3 { left: 58%; top: 50px; transform: rotate(13deg); z-index: 2; }
.hero-cards:hover .hc1 { transform: rotate(-16deg) translateX(-14px); }
.hero-cards:hover .hc3 { transform: rotate(17deg) translateX(14px); }
.hero-cards:hover .hc2 { transform: rotate(0) translateY(-10px) scale(1.03); }

/* Category strip */
.cat-strip { display: flex; gap: 10px; overflow-x: auto; padding: 8px 0 18px; scrollbar-width: none; }
.cat-strip::-webkit-scrollbar { display: none; }
.cat-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); padding: 10px 16px; border-radius: 999px; white-space: nowrap; font-weight: 600; font-size: .9rem; }
.cat-chip:hover { border-color: var(--brand); }

/* Sections + grid */
.section { padding: 26px 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.section-head a { color: var(--brand); font-weight: 600; font-size: .9rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.grid > *, .hero > *, .product > *, .cart-layout > *, .order-grid > *, .footer-grid > *, .usp > * { min-width: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, border-color .15s; }
.card:hover { transform: translateY(-3px); border-color: #3a3f58; }
.card-img { position: relative; aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; }
.card-img img { width: 100%; height: 100%; object-fit: contain; }
.card-single .card-img { padding: 14px; background: radial-gradient(circle at 50% 30%, #23273a, var(--bg-2)); }
.card-single .card-img img { object-fit: contain; border-radius: 8px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.ribbon { position: absolute; top: 10px; left: 10px; background: var(--brand-2); color: #fff; font-size: .7rem; font-weight: 700; padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; }
.ribbon-out { background: #475569; }
.ribbon-pre { background: var(--blue); }
.stock.pre .dot { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.stock.pre.open .dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
.card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-set { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.card-title { font-weight: 600; line-height: 1.3; }
.card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; }
.price { font-family: var(--display); font-weight: 800; font-size: 1.15rem; }

/* USP */
.usp { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 30px 0 50px; }
.usp div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.usp span { color: var(--muted); font-size: .9rem; }

/* Product list */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 26px 0 10px; flex-wrap: wrap; }
.crumbs { font-size: .85rem; color: var(--muted); margin: 18px 0 8px; }
.crumbs a:hover { color: var(--brand); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 22px; }
.chip { background: var(--card); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.chip.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.empty { text-align: center; padding: 70px 0; }
.empty .btn { margin-top: 12px; }
/* The 404's offer to search for what an old address named (views/error.ejs). */
.empty .error-search, body.search-open .empty .error-search { display: flex; margin: 0 auto 8px; max-width: 420px; width: 100%; order: 0; }

/* "Someone got there first" — the blocked-checkout page. One row per line of
   the cart that could not be reserved. */
.reserved-list { list-style: none; padding: 0; margin: 18px auto 22px; max-width: 420px; text-align: left; }
.reserved-list li { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 8px; }
.reserved-list strong { display: block; }

/* Product page */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 10px 0 40px; }
.product-media { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 340px; }
.product-media img { max-height: 560px; object-fit: contain; }
.product-media.is-card { padding: 30px; background: radial-gradient(circle at 50% 30%, #23273a, var(--bg-2)); }
.product-media.is-card img { max-height: 620px; border-radius: 14px; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.product-price { font-family: var(--display); font-size: 2rem; font-weight: 800; margin: 8px 0 12px; }
.stock { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.stock .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.stock.out .dot { background: var(--red); box-shadow: none; }
.add-form-lg { display: flex; align-items: flex-end; gap: 12px; margin: 14px 0 20px; }
.qty { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); gap: 4px; }
.qty input { width: 80px; padding: 12px; font-size: 1rem; }
.desc { color: var(--ink-2); font-size: 1.02rem; }
.product-usps { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 8px; color: var(--ink-2); font-size: .95rem; }

/* Payment badges */
.pay-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.pay-badges.center { justify-content: center; }
.badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; font-size: .75rem; font-weight: 800; letter-spacing: .02em; }
.badge-swish { background: #fff; color: #1e2a44; font-style: italic; }
.badge-klarna { background: #ffb3c7; color: #17120f; }
.badge-visa { background: #1a1f71; color: #fff; font-style: italic; }
.badge-mc { background: #eb001b; color: #fff; }
.hero-pay { display: flex; gap: 8px; }

/* Cart */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; padding-bottom: 40px; }
/* Placed rather than ordered, because the two layouts disagree about where the
   band belongs: beside the summary and under the basket on a desktop, below the
   pay button on a phone. The media query below hands it back to auto flow. */
.cart-layout > .cart-lines { grid-column: 1; grid-row: 1; }
.cart-layout > .summary { grid-column: 2; grid-row: 1 / span 2; }
.cart-layout > .upsell { grid-column: 1; grid-row: 2; }
/* There is room for the whole summary beside the basket on a desktop, so the
   spare button is a phone answer to a phone problem and nothing else. */
.paytop { display: none; }
.cart-lines { display: flex; flex-direction: column; gap: 12px; }
.cart-line { display: grid; grid-template-columns: 90px 1fr auto auto auto; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.cart-thumb img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; background: var(--bg-2); }
.cart-name { font-weight: 600; }
.cart-qty input { width: 70px; }
.cart-total { font-weight: 700; min-width: 90px; text-align: right; }
.cart-remove button { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; }
.cart-remove button:hover { color: var(--red); border-color: var(--red); }
.summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: sticky; top: 90px; display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.row.col { flex-direction: column; gap: 4px; }
.row.total { font-family: var(--display); font-weight: 800; font-size: 1.2rem; border-bottom: 0; }
.ship-options { list-style: none; margin: 4px 0 6px; padding: 0; font-size: .85rem; color: var(--ink-2); }
.ship-options li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.country-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.country-row label { color: var(--muted); font-size: .9rem; }
.country-row select { flex: 1; max-width: 60%; }
.notice { background: rgba(var(--brand-rgb),.12); border: 1px solid rgba(var(--brand-rgb),.35); color: var(--brand); padding: 12px 14px; border-radius: 10px; margin: 10px 0; }
/* A release at a set minute: the date, a live clock, and what happens then. */
.release-countdown { border: 1px solid rgba(var(--brand-rgb),.45); background: linear-gradient(180deg, rgba(var(--brand-rgb),.10), rgba(var(--brand-rgb),.03)); border-radius: var(--radius); padding: 16px 18px; margin: 14px 0; }
.release-countdown p { margin: 0; }
.release-countdown-when { color: var(--brand); font-weight: 700; }
.release-countdown-clock { font-family: var(--display); font-size: clamp(30px, 7vw, 40px); font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.15; margin: 4px 0 8px !important; min-height: 1.15em; }
.release-countdown .small { color: var(--ink-2); }
.announce [data-countdown-to] { font-variant-numeric: tabular-nums; font-weight: 700; }
address { font-style: normal; color: var(--ink-2); }

/* Order / success */
.order-page { padding: 30px 0 50px; }
.order-hero { text-align: center; padding: 30px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 22px; }
.order-hero.warn { border-color: rgba(var(--brand-rgb),.4); }
.check { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; font-size: 2rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; font-weight: 800; }
.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #334155; color: #fff; vertical-align: middle; }
.status-paid { background: var(--green); color: #052e16; }
.status-shipped { background: var(--blue); }
.status-pending { background: var(--brand); color: var(--on-brand); }
/* Reserved, not paid: the blue that already means "announced, not yet". */
.status-authorized { background: var(--blue); color: #06121f; }
.status-cancelled, .status-failed { background: var(--red); }
/* Paid in Stripe's test mode: no money moved. */
.status-test { background: transparent; color: var(--ink-2); border: 1px dashed var(--ink-2); }

/* Prose */
.prose { max-width: 760px; padding: 30px 0 60px; color: var(--ink-2); }
.prose h1 { color: var(--ink); }
.shipping-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .9rem; }
.shipping-table th, .shipping-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.shipping-table th { color: var(--muted); font-weight: 600; }
.prose h2 { color: var(--ink); font-size: 1.2rem; margin-top: 1.6em; }

/* Admin */
.admin-head { display: flex; justify-content: space-between; align-items: center; padding: 26px 0 10px; flex-wrap: wrap; gap: 12px; }

/* The admin's sidebar (views/admin/_nav.ejs, public/js/admin-nav.js). On a
   computer it stands on the left of every admin page, and the shop's own
   header, offer bar and footer, which are for customers, step aside. Below
   1000 px it is a drawer behind "Meny". */
.admin-side { display: flex; flex-direction: column; gap: 14px; background: var(--bg-2); border-right: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.admin-side-top { display: flex; flex-direction: column; gap: 10px; }
.admin-side-shop { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.admin-side-shop .small { font-family: var(--font); font-weight: 500; }
.admin-side-shop:hover .small { color: var(--brand); }
.admin-side-search { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; font: inherit; font-size: .92rem; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; text-align: left; }
.admin-side-search:hover, .admin-side-search:focus-visible { border-color: var(--brand); color: var(--ink); }
.admin-kbd { font: 600 .72rem/1 var(--font); border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; color: var(--muted); }
.admin-add { position: relative; }
.admin-add > summary { list-style: none; cursor: pointer; display: block; text-align: center; }
.admin-add > summary::-webkit-details-marker { display: none; }
.admin-add-list { list-style: none; margin: 8px 0 0; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 2px; }
.admin-add-list a { display: flex; flex-direction: column; padding: 7px 9px; border-radius: 8px; text-decoration: none; color: var(--ink); line-height: 1.3; }
.admin-add-list a:hover, .admin-add-list a[aria-current] { background: rgba(var(--brand-rgb), .12); }
.admin-side-nav { display: flex; flex-direction: column; gap: 12px; }
.admin-group-label { font: 700 .7rem/1 var(--font); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 0 4px 10px; }
.admin-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.admin-group a { display: block; padding: 5px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 600; text-decoration: none; font-size: .93rem; line-height: 1.35; }
.admin-group a:hover { background: var(--card); color: var(--ink); }
.admin-group a[aria-current] { background: rgba(var(--brand-rgb), .14); color: var(--brand); }
.admin-group a:focus-visible, .admin-add-list a:focus-visible, .admin-side-shop:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.admin-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.admin-help { color: var(--ink-2); font-weight: 600; font-size: .92rem; text-decoration: none; }
.admin-help:hover { color: var(--brand); }
.admin-logout { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; flex-wrap: wrap; }
.admin-logout .small { overflow-wrap: anywhere; }
.admin-lang { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.admin-lang .chip { cursor: pointer; font: inherit; font-size: 0.8rem; }
.admin-mobilebar { display: none; }
/* The shop's own header, offer bar and footer are for customers; in the admin the sidebar has a link to the shop. */
body:has(.admin-side) :is(.site-header, .site-footer, .announce) { display: none; }
.admin-side-backdrop { position: fixed; inset: 0; z-index: 89; background: rgba(0,0,0,.5); }
@media (min-width: 1000px) {
  body:has(.admin-side) { padding-left: 264px; }
  .admin-side { position: fixed; top: 0; bottom: 0; left: 0; width: 264px; z-index: 50; overflow-y: auto; padding: 22px 16px 18px; }
  .admin-side-backdrop { display: none; }
}
@media (max-width: 999px) {
  .admin-mobilebar { display: flex; gap: 8px; position: sticky; top: 0; z-index: 40; padding: 8px 0; background: var(--bg); }
  .admin-side { position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 88vw); z-index: 90; overflow-y: auto; padding: 18px 16px;
    transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--shadow); }
  .admin-side.is-open { transform: none; }
  .admin-kbd { display: none; }
  html.admin-drawer-open { overflow: hidden; }
  /* Without the script the menu is a plain list above the page. */
  html:not(.admin-js) .admin-side { position: static; transform: none; width: auto; box-shadow: none; border-right: 0; border-radius: var(--radius); margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .admin-side { transition: none; } }

/* The admin's search (public/js/admin-nav.js). */
.admin-search { width: min(640px, calc(100vw - 24px)); max-height: min(70vh, 640px); padding: 0; margin-top: 10vh; background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.admin-search[open] { display: flex; flex-direction: column; }
.admin-search::backdrop { background: rgba(0,0,0,.55); }
.admin-search-box { display: flex; gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); margin: 0; }
.admin-search-input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.admin-search-input:focus { outline: 2px solid var(--brand); outline-offset: 0; }
.admin-search-results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.admin-hit a { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--ink); }
.admin-hit.is-on a, .admin-hit a:hover { background: rgba(var(--brand-rgb), .14); }
.admin-hit-none { padding: 12px; }
.admin-search-hint { padding: 0 16px 14px; margin: 8px 0 0; }
/* A setting a search result pointed at, for a moment. */
.admin-found { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 8px; transition: outline-color 1s ease; }
/* A link in a sentence on an admin page looks like one: in the text's colour
   it read as plain words, and the setting behind it was never found. */
.admin-head ~ :is(p, .notice) a:not([class]),
.admin-head ~ * :is(p, li, .notice) a:not([class]) {
  color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.admin-head ~ :is(p, .notice) a:not([class]):hover,
.admin-head ~ * :is(p, li, .notice) a:not([class]):hover { color: var(--brand); }
/* A choice offered in a sentence ("Graderat kort? ..."), as buttons. */
.admin-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 14px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 10px 0 18px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; }
.stat span { color: var(--muted); font-size: .85rem; }
.stat strong { font-family: var(--display); font-size: 1.6rem; }
.vat-panel { margin: 4px 0 18px; }
.meter { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin: 8px 0 10px; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--brand)); }
.table-wrap { overflow-x: auto; margin-bottom: 30px; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.table tr.inactive { opacity: .5; }
.table tfoot th { text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--ink); border-top: 1px solid var(--line); }
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--bg-2); }
.inline-form { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.inline-form.center { justify-content: center; }

/* Moms. A tax return is read down a column and checked against a receipt, so
   figures are right-aligned and tabular: digits must line up to be compared. */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.neg { color: var(--red); }
.notice-warn { background: rgba(var(--brand-2-rgb),.12); border-color: rgba(var(--brand-2-rgb),.4); color: var(--ink); }
.vat-h { font-family: var(--display); font-size: 1.15rem; margin: 26px 0 10px; }
.vat-picker { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 14px 0 6px; }
.vat-picker label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
.vat-picker select { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; }
.vat-decl { display: grid; gap: 10px; margin-bottom: 6px; }
.vat-field { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.vat-field strong { font-family: var(--display); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
/* The one figure that is actually paid, so it carries the brand colour. */
.vat-field-total { border-color: rgba(var(--brand-rgb),.4); }
.vat-field-total strong { color: var(--brand); }
.vat-falt { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.vat-name { color: var(--ink-2); }
/* Batches and refunds. */
.scheme { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.scheme-VMB { color: #c4b5fd; border-color: rgba(124,58,237,.5); background: rgba(124,58,237,.12); }
.scheme-select { min-width: 74px; }
.batch-actions summary { list-style: none; cursor: pointer; display: inline-block; }
.batch-actions summary::-webkit-details-marker { display: none; }
.batch-actions[open] { position: relative; }
.batch-form { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 8px; min-width: 260px; }
.batch-form strong { display: block; margin-bottom: 2px; }
.batch-form .field { margin: 8px 0; }
.batch-new { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.batch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 18px; }
.batch-grid input[type=text], .batch-grid input[type=date], .batch-grid select { width: 100%; box-sizing: border-box; }
.vmb-decision { border: 1px solid rgba(124,58,237,.5); background: rgba(124,58,237,.08); border-radius: 10px; padding: 12px 16px; margin: 14px 0; }
.vmb-decision legend { color: #c4b5fd; font-weight: 700; padding: 0 6px; }
.check-row { display: block; margin: 8px 0; font-size: .9rem; }
.check-row input { margin-right: 6px; }
.ship-amount { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 8px 24px; }
.ship-amount input { width: 90px; }
.vmb-mark { color: var(--brand); font-weight: 800; }
.vmb-notice { margin: 8px 0 0; }
.row-vat { border-bottom: 0; padding-top: 0; }
.row-refund span:last-child { color: #c4b5fd; font-weight: 700; }
.refund-form { margin-top: 10px; }
.refund-form table { width: 100%; font-size: .9rem; }
.refund-form td { padding: 4px 6px; }
.tax-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: .82rem; color: var(--ink-2); padding: 4px 0 8px; border-bottom: 1px dashed var(--line); }
.tax-line .k { color: var(--muted); }
@media (max-width: 640px) {
  .vat-field { grid-template-columns: 1fr auto; }
  .vat-falt { grid-column: 1 / -1; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 40px; padding: 40px 0 20px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr; gap: 30px; }
.footer-grid h4 { margin: 0 0 10px; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.footer-grid a { display: block; color: var(--ink-2); padding: 3px 0; }
.footer-grid a:hover { color: var(--brand); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .8rem; flex-wrap: wrap; }

/* Toast: a card hanging under the cart icon (placed by public/js/shop.js),
   where the eye goes to see the count change. Top right when the header
   is out of sight. */
.toast { position: fixed; top: var(--toast-top, 16px); right: var(--toast-right, 16px); width: min(340px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--brand); color: var(--ink); padding: 14px 16px; border-radius: 12px; box-shadow: var(--shadow); z-index: 100; display: flex; flex-direction: column; gap: 8px; font-size: .95rem; line-height: 1.4; }
.toast::before { content: ''; position: absolute; top: -8px; right: var(--toast-caret, 18px); width: 14px; height: 14px; background: var(--card); border-left: 1px solid var(--brand); border-top: 1px solid var(--brand); transform: rotate(45deg); }
.toast-free::before { display: none; }
.toast > span:first-child { padding-right: 22px; }
.toast a { display: block; margin-top: 4px; padding: 9px 12px; border-radius: 8px; background: var(--brand); color: var(--on-brand); font-weight: 700; text-align: center; }
.toast a:hover { filter: brightness(1.08); }
.toast-close { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.toast-close:hover { color: var(--ink); background: var(--line); }
.toast-in { animation: toast-in .18s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }
.cart-bump { animation: cart-bump .35s ease-out; }
@keyframes cart-bump { 40% { transform: scale(1.25); } }
@media (max-width: 640px) { .toast { left: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .toast-in, .cart-bump { animation: none; } }

/* Responsive */
/* +40px on every breakpoint since 2026-09-28: the Singles count badge. */
@media (max-width: 1320px) {
  .nav-links { display: none; }
  .burger { display: inline-block; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Measured, not guessed: the six category links are 589px wide in Swedish,
   595px in English and 663px in German, so the longer languages run under the
   search field at widths where Swedish still fits. Each collapses into the
   burger — which lists the same categories — at its own width, with ~60px of
   slack so a failed webfont load cannot bring the overlap back. */
@media (max-width: 1379px) {
  html[lang="en"] .nav-links { display: none; }
  html[lang="en"] .burger { display: inline-block; }
}
@media (max-width: 1439px) {
  html[lang="de"] .nav-links { display: none; }
  html[lang="de"] .burger { display: inline-block; }
}
/* Below this the language pills cost the search field more room than they are
   worth: the burger menu is already showing, and it carries the same three
   languages spelled out in full. */
@media (max-width: 900px) {
  .lang-switch { display: none; }
}
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 28px; }
  .hero-cards { height: 300px; }
  .hc { width: 160px; } .hc2 { width: 175px; }
  .hc1 { left: 2%; } .hc3 { left: 60%; }
  .product { grid-template-columns: 1fr; gap: 20px; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  /* One column, so DOM order decides: basket, pay button, cards, summary. */
  .cart-layout > .cart-lines,
  .cart-layout > .summary,
  .cart-layout > .upsell,
  .cart-layout > .paytop { grid-column: auto; grid-row: auto; }
  .paytop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--line); }
  .paytop-sum { flex: 1 1 120px; display: flex; flex-direction: column; line-height: 1.25; }
  .paytop-sum strong { font-family: var(--display); font-size: 1.25rem; }
  .paytop-free { color: var(--green); font-size: .78rem; font-weight: 600; }
  .paytop form { flex: 1 1 150px; margin: 0; }
  .paytop .btn { padding: 12px 16px; }
  /* The summary keeps the full breakdown and its own button; only its heading
     would read oddly twice, so it says what it is. */
  .cart-layout > .summary { margin-top: 4px; }
  .order-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* The search field cannot share the top bar with the logo on a phone – there
     is room for about 80px of input. So it collapses behind the magnifier and
     opens full width as a second row, which is also where the thumbs are. */
  .nav { gap: 10px; flex-wrap: wrap; height: auto; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
  .logo { flex: 0 1 auto; min-width: 0; }
  .logo img { height: 27px; }
  .search-toggle { display: inline-flex; }
  .search { order: 10; flex: 1 0 100%; max-width: none; display: none; }
  body.search-open .search { display: flex; }
  /* 16px keeps iOS Safari from zooming the page when the field is focused. */
  .search input { width: 100%; min-width: 0; padding: 11px 16px; font-size: 16px; }
  .search button { padding: 0 16px; font-size: 1.05rem; }
  .cart-line { grid-template-columns: 70px 1fr auto; }
  .cart-thumb img { width: 70px; height: 70px; }
  .cart-total { grid-column: 2; text-align: left; }
  .cart-qty { grid-column: 3; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card-foot { flex-direction: column; align-items: flex-start; }
  .card-foot .add-form, .card-foot .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* --- Back-in-stock watch (sold-out product pages) --- */
.watch { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 16px 0; background: var(--panel, transparent); }
.watch h3 { margin: 0 0 4px; font-size: 1rem; }
.watch-form { display: flex; gap: 8px; margin: 10px 0 6px; flex-wrap: wrap; }
.watch-form input[type=email] { flex: 1 1 200px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.watch-ok { margin: 0; padding: 12px 14px; border-radius: 8px; background: rgba(46,160,67,.12); border: 1px solid rgba(46,160,67,.35); }
.watch-err { margin: 6px 0 0; color: #c0392b; font-size: .9rem; }
.xsmall { font-size: .78rem; }
.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; }

/* --- Admin: watch queue --- */
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 18px; }
.stat { flex: 1 1 140px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stat-n { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-l { display: block; font-size: .8rem; color: var(--ink-2); }
.waiting-badge { display: inline-block; min-width: 22px; text-align: center; padding: 2px 7px; border-radius: 999px;
  background: #d9822b; color: #fff; font-weight: 700; font-size: .8rem; text-decoration: none; }
.field { display: block; margin: 10px 0; }
.field > span { display: block; font-size: .8rem; color: var(--ink-2); margin-bottom: 4px; }
.field textarea, .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=url] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: .9rem; background: transparent; color: inherit; }
.field textarea { resize: vertical; }
/* Admin sign-in and accounts (views/admin/login*.ejs, account-setup.ejs, accounts.ejs). */
.auth-box { max-width: 420px; margin: 40px auto; }
.auth-box h1 { margin-top: 0; }
.auth-code { font-size: 1.4rem !important; letter-spacing: .25em; text-align: center; }
.auth-qr { display: block; width: 200px; height: 200px; margin: 10px auto; background: #fff; border-radius: 8px; padding: 6px; }
.auth-qr svg { display: block; width: 100%; height: 100%; }
.auth-secret { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; user-select: all; }
.auth-codes { columns: 2; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05rem; padding-left: 1.2em; }
.auth-link { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; }
.stack { display: block; }
.stack .btn { margin-top: 6px; }

/* Small phones: logo, magnifier, cart and burger are one row of fixed widths
   that measures 350px at 390px wide – no slack at all on a 360px screen, where
   the burger would drop to a line of its own. Everything shrinks a little, and
   the logo is allowed to truncate rather than push anything onto a second row. */
@media (max-width: 400px) {
  .container { padding: 0 14px; }
  .nav { gap: 6px; }
  .logo { min-width: 0; }
  .logo img { height: 22px; }
  .search-toggle { padding: 7px 9px; }
  .cart-link { font-size: 1.15rem; padding: 4px; }
}

/* --- Singles campaign: banner + live ticker --- */
.promo-banner { display: grid; gap: 9px; margin: 12px 0 4px; padding: 12px 15px; border-radius: var(--radius);
  border: 1px solid rgba(var(--brand-rgb),.35); background: linear-gradient(135deg, rgba(var(--brand-rgb),.12), rgba(var(--brand-2-rgb),.06) 60%, transparent); }
.promo-banner-main { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.promo-banner-copy { flex: 1 1 320px; min-width: 0; }
.promo-banner h2 { font-size: 1.1rem; margin: 0 0 2px; }
.promo-banner p { margin: 0; color: var(--ink-2); font-size: .84rem; line-height: 1.4; max-width: 62ch; }
.promo-banner-cta { flex: 0 0 auto; padding: 8px 14px; font-size: .9rem; }
.promo-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 6px 11px;
  border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: var(--on-brand);
  font-family: var(--display); font-weight: 800; font-size: .92rem; white-space: nowrap; }

/* The ticker also stands alone in the cart and on a card's page. */
.promo-ticker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0;
  padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); }
.promo-ticker.is-active { border-color: rgba(var(--brand-rgb),.55); background: rgba(var(--brand-rgb),.10); }
.promo-track { display: flex; gap: 4px; flex: 0 0 auto; }
.promo-slot { width: 22px; height: 4px; border-radius: 999px; background: var(--line); transition: background .25s, box-shadow .25s; }
.promo-slot.is-on { background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow: 0 0 8px rgba(var(--brand-rgb),.45); }
.promo-msg { margin: 0; font-size: .82rem; color: var(--ink-2); }
.promo-ticker.is-active .promo-msg { color: var(--ink); font-weight: 600; }
/* A discount is worth seeing at a glance in a column of grey money rows. */
.row-discount span:last-child { color: var(--green); font-weight: 700; }

@media (max-width: 640px) {
  .promo-banner { padding: 16px; }
  .promo-banner h2 { font-size: 1.15rem; }
  .promo-banner-cta { width: 100%; }
  .promo-ticker { border-radius: 12px; }
}
.toast-promo { color: var(--brand); font-weight: 600; font-size: .9rem; }
.toast-limit { font-size: .9rem; }
.cart-limit { margin-top: 4px; font-weight: 600; color: var(--ink); }
.nc-copy { margin: 14px 0 18px; }
.nc-copy summary { cursor: pointer; padding: 6px 0; }
.nc-copy-form { display: grid; gap: 10px; margin-top: 8px; }
.nc-copy-langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.nc-copy-lang { border: 1px solid var(--line, #2a2f3a); border-radius: 10px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.nc-copy-lang legend { font-weight: 700; padding: 0 4px; }
.nc-copy-lang label { display: grid; gap: 4px; }
.nc-copy-form input[type=text] { width: 100%; }
.nc-copy-form .btn { justify-self: start; }
/* A product's title and description, one block per language. */
/* Admin: the PostNord file */
.fs-intro { max-width: 70ch; }
.fs-table td { vertical-align: top; }
.fs-problem td { background: color-mix(in srgb, #f5a524 10%, transparent); }
.fs-names { margin-top: 28px; }
.fs-names summary { cursor: pointer; font-weight: 600; }
.fs-names-form { display: grid; gap: 10px; max-width: 520px; margin-top: 10px; }
.fs-names-form .btn { justify-self: start; }
.pt-form { display: grid; gap: 14px; max-width: 860px; }
.pt-lang { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 12px; margin: 0; min-width: 0; }
.pt-lang legend { font-weight: 700; padding: 0 4px; }
.pt-lang .field { margin: 8px 0; }
.pt-lang textarea::placeholder, .pt-lang input::placeholder { color: var(--ink-2); opacity: .7; }
.pt-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; }
.pt-form > .btn { justify-self: start; }

/* --- Delivery timeline on the customer's order page --- */
.track-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 20px; margin: 0 0 18px; }
.track-card h3 { margin: 0 0 16px; }
.track-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 6px; padding: 0; }
.track-step { position: relative; padding: 0 12px 0 0; }
/* The connector runs between the marks, so it is drawn from each step except
   the last, at the vertical centre of the mark. */
.track-step:not(:last-child)::after { content: ""; position: absolute; left: 26px; right: 6px; top: 12px; height: 2px; background: var(--line); }
.track-step.is-reached:not(:last-child)::after { background: var(--green); }
.track-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--bg-2); color: #052e16; font-size: .8rem; font-weight: 800; position: relative; z-index: 1; }
.track-step.is-done .track-mark { background: var(--green); border-color: var(--green); }
.track-step.is-current .track-mark { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.18); }
.track-body { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-right: 8px; }
.track-body strong { font-size: .92rem; }
.track-step.is-todo .track-body { color: var(--muted); }
.track-step.is-todo .track-body strong { color: var(--muted); font-weight: 600; }
.track-body time { font-size: .78rem; color: var(--ink-2); }
.track-note { font-size: .78rem; color: var(--muted); }
.track-number { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.track-number code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; letter-spacing: .04em;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; user-select: all; }
.status-delivered { background: var(--green); color: #052e16; }
.status-refunded { background: #7c3aed; }

@media (max-width: 700px) {
  /* Vertical on a phone: four columns would give each step about 80px. */
  .track-steps { grid-template-columns: 1fr; gap: 0; }
  .track-step { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 0 0 16px; }
  .track-step:not(:last-child)::after { left: 12px; right: auto; top: 26px; bottom: 0; width: 2px; height: auto; }
  .track-body { margin-top: 2px; }
}

/* --- Sale --- */
/* The sale flag sits opposite the stock ribbon so a card can carry both. */
.ribbon-sale { left: auto; right: 10px; background: var(--red); font-size: .78rem; letter-spacing: .02em; }
.price.is-sale { color: var(--red); display: inline-flex; flex-direction: column; line-height: 1.15; }
.price-was { color: var(--muted); font-weight: 600; font-size: .85em; text-decoration-thickness: 2px; }
.product-price.is-sale { color: var(--red); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.product-price .price-was { font-size: .5em; }
/* The VAT line under the price is a sentence for VMB goods, not a two-word
   suffix, so it cannot ride along at price size. */
.product-price small { display: block; font: 500 .85rem/1.35 var(--font); color: var(--muted); flex-basis: 100%; margin-top: 2px; }
.sale-flag { background: var(--red); color: #fff; font-family: var(--font); font-size: .8rem; font-weight: 800;
  letter-spacing: .04em; padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
.sale-note { margin: -4px 0 12px; color: var(--red); font-weight: 600; font-size: .92rem; }
.cart-sale { color: var(--red); font-weight: 700; }
/* Admin: the resulting price next to the percentage field. */
.sale-now { color: var(--red); font-weight: 700; white-space: nowrap; }
.money-cell { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.keep { font-weight: 600; cursor: help; }
.keep-neg { color: var(--red); }
.chip-sale { border-color: rgba(239,68,68,.55); color: #ffb3b3; }
.chip-sale.active { background: var(--red); border-color: var(--red); color: #fff; }

/* --- Newsletter --- */
.news-form { margin: 0; }
.news-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
.news-row input[type=email] { flex: 1 1 220px; min-width: 0; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 16px; }
.news-row input[type=email]:focus { outline: none; border-color: var(--brand); }
.news-title { margin: 0 0 4px; font-size: 1.1rem; }
.news-blurb { margin: 0; color: var(--ink-2); font-size: .92rem; }
.news-privacy { margin: 0; color: var(--muted); font-size: .78rem; }

/* Footer column: no heading of its own, the column already has one. */
.footer-news .news-row { margin-top: 8px; }
.footer-news .news-row input[type=email] { flex-basis: 100%; }

/* Home band: the one placement that has to earn its space on the page. */
section.news-band { margin: 30px 0 10px; padding: 26px; border-radius: var(--radius);
  border: 1px solid var(--line); background: linear-gradient(135deg, rgba(var(--blue-rgb),.12), transparent 60%); }
section.news-band .news-title { font-family: var(--display); font-size: 1.4rem; }
section.news-band .news-row { max-width: 520px; }

/* Under the watch box on a sold-out or preorder page. */
.news-compact { margin: 14px 0 0; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; }
.news-compact .news-title { font-size: .98rem; }
.news-compact .news-blurb { font-size: .85rem; }

/* Dedicated page */
.news-page { max-width: 760px; margin: 0 auto; padding: 20px 0 40px; }
.news-hero { text-align: center; margin-bottom: 26px; }
.news-hero .lead { color: var(--ink-2); font-size: 1.05rem; }
.news-usps { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.news-usps li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); }
.news-usps strong { font-size: .95rem; }
.news-usps span { color: var(--ink-2); font-size: .9rem; }
.news-page .news-form { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.news-done { text-align: center; padding: 30px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.news-done .check { font-size: 2.4rem; margin-bottom: 8px; }
.news-result { max-width: 620px; margin: 0 auto; }

/* --- Home: the newsletter beside the campaign banner ---
   The two share a row 60/40 by their widths in the page layout (.pm-promo,
   .pm-newsletter below), both stretched to the taller of the two. */
aside.news-side { display: flex; flex-direction: column; justify-content: center; padding: 12px 15px;
  border-radius: var(--radius); border: 1px solid rgba(var(--blue-rgb),.4);
  background: linear-gradient(135deg, rgba(var(--blue-rgb),.16), rgba(var(--blue-rgb),.04) 60%, transparent); }
.news-side .news-title { font-family: var(--display); font-size: 1rem; margin: 0 0 2px; }
.news-side .news-blurb { font-size: .82rem; line-height: 1.4; }
.news-side .news-row { margin: 9px 0 4px; }
.news-side .news-row input[type=email] { flex: 1 1 140px; padding: 8px 11px; font-size: .9rem; }
.news-side .news-row .btn { padding: 8px 14px; font-size: .9rem; }
.news-side .news-privacy { font-size: .7rem; line-height: 1.35; }


/* --- Mobile: get the offers and the products onto the first screen ---------
   Most visitors arrive here on a phone and land on the start page. The hero was
   823px tall of which 300 was a decorative card fan, so the first product sat
   1.7 screens down. Everything above the products is scaled to the space it
   actually earns. */
@media (max-width: 640px) {
  .hero { min-height: 0; padding: 16px 0 12px; gap: 16px; }
  .hero h1 { font-size: 2rem; margin-bottom: 8px; }
  .hero p { font-size: .95rem; }
  .hero .eyebrow { margin-bottom: 8px; font-size: .68rem; }
  .hero-cta { margin: 14px 0 10px; gap: 8px; }
  .hero-cta .btn-lg { padding: 11px 18px; font-size: .95rem; }
  .hero-pay { transform: scale(.9); transform-origin: left center; }
  /* The card fan is decoration, so it keeps its shape at half the height. */
  .hero-cards { height: 168px; }
  .hc { width: 104px; } .hc2 { width: 114px; }
  .hc1 { top: 16px; } .hc3 { top: 20px; }

  .cat-strip { padding: 4px 0 10px; }
  .promo-banner { padding: 11px 13px; gap: 8px; }
  .promo-banner h2 { font-size: 1.02rem; }
  aside.news-side { padding: 11px 13px; }
  .section { padding: 16px 0; }
  .section-head { margin-bottom: 10px; }
}

/* The last two blocks standing between a phone visitor and the products.
   The card fan is pure decoration, and the newsletter is already in the footer
   of every page — neither is worth a screen of scrolling on the way to a sale
   (the standard layout hides the newsletter module on a phone). */
@media (max-width: 640px) {
  .hero-cards { display: none; }
  .hero h1 { font-size: 1.85rem; }
  .hero p { font-size: .92rem; line-height: 1.45; }
}

/* --- Home: the shop's one-line introduction, above the sale list --- */
.intro-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 16px 0 4px; }
.intro-strip .eyebrow { margin: 0; }
.intro-strip .hero-pay { display: flex; gap: 8px; }
/* The sale list sits directly under it, so it does not need its own top gap. */
.section-first { padding-top: 6px; }

@media (max-width: 640px) {
  .intro-strip { padding: 10px 0 2px; gap: 8px; }
  .intro-strip .eyebrow { font-size: .66rem; }
  .intro-strip .hero-pay { transform: scale(.88); transform-origin: left center; }
  /* The card fan is below the products now, so it costs nothing to show it. */
  .hero-cards { display: block; height: 200px; margin-top: 4px; }
  .hero { padding: 8px 0 16px; }
}

/* --- Admin: the newsletter composer ---------------------------------------
   Three columns: what to insert, what is being written, and what will arrive.
   The palette is a drag source, so it wants to be beside the textarea rather
   than above it — the drag is short and the drop lands where the pointer is. */
.news-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 440px; gap: 14px; align-items: start; margin: 12px 0 18px; }
.news-grid > .panel { margin: 0; }
.news-picker h3, .news-editor h3, .news-preview h3 { margin-top: 0; }
.news-picker input[type=search] { width: 100%; box-sizing: border-box; margin: 8px 0; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: inherit; font: inherit; font-size: .85rem; }
.news-list { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto; }
.news-item { display: flex; align-items: center; gap: 9px; padding: 6px; border: 1px solid transparent; border-radius: 9px; cursor: grab; }
.news-item:hover { background: var(--bg-2); border-color: var(--line); }
.news-item.dragging { opacity: .45; }
.news-item img { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; border-radius: 6px; background: var(--bg-2); }
.news-item-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; font-size: .82rem; line-height: 1.3; }
.news-item-text strong, .news-item-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-item-text strong { font-weight: 600; }
.news-add { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink-2); font-size: 1rem; line-height: 1; cursor: pointer; }
.news-add:hover { border-color: var(--brand); color: var(--brand); }
.news-editor textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; line-height: 1.55; }
/* Highlight the drop target: the browser inserts the text, but nothing in its
   default rendering says the textarea is willing to take it. */
.news-editor textarea.drop-target { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(255, 203, 5, .18); }
.news-editor .inline-form { flex-wrap: wrap; }
/* The actions on a past issue stay on one line and side by side, even though
   the resend is its own form (a POST, so it cannot be a link). */
.news-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.news-actions form { margin: 0; }
.news-help code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: .95em; }
.news-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.news-preview-tools { display: flex; align-items: center; gap: 8px; }
.news-preview-head select { background: var(--bg-2); color: inherit; border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px; font: inherit; font-size: .8rem; }
.news-views { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.news-views button { background: transparent; border: 0; color: var(--muted); font: inherit; font-size: .75rem;
  font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.news-views button.on { background: var(--bg-2); color: var(--brand); }
/* The mail is scaled, never re-laid-out: the iframe keeps the real pixel width
   so the line breaks in the preview are the ones the subscriber will see. */
.news-frame-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.news-preview iframe { display: block; border: 0; background: var(--bg); transform-origin: top left; }

@media (max-width: 1280px) {
  .news-grid { grid-template-columns: 250px minmax(0, 1fr); }
  .news-preview { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .news-list { max-height: 260px; }
}

/* --- Product gallery: own photographs, then the catalogue picture ---------- */
.product-gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-thumb { width: 68px; height: 68px; padding: 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2); overflow: hidden; cursor: pointer; flex: 0 0 auto; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(255, 203, 5, .25); }
.gallery-thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Saying whose photographs these are is the whole reason for taking them. */
.own-photo { margin: 0; font-size: .82rem; color: var(--ink-2); }

/* --- Admin: photographs and copies in the products table ------------------- */
.photo-cell { min-width: 150px; }
.photo-strip { display: flex; gap: 4px; flex-wrap: wrap; }
.photo { position: relative; width: 44px; height: 44px; border-radius: 6px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); flex: 0 0 auto; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The catalogue picture is shown for context but is not ours to delete. */
.photo-stock { opacity: .55; border-style: dashed; }
.photo-del, .photo-first { position: absolute; width: 16px; height: 16px; padding: 0; border: 0; cursor: pointer;
  background: rgba(0,0,0,.72); color: #fff; font-size: .62rem; line-height: 16px; text-align: center; }
.photo-del { top: 0; right: 0; border-bottom-left-radius: 6px; }
.photo-first { top: 0; left: 0; border-bottom-right-radius: 6px; }
.photo-del:hover { background: var(--red); }
.photo-first:hover { background: var(--brand); color: var(--on-brand); }
.photo-add { display: inline-block; margin-top: 5px; padding: 3px 9px; border: 1px dashed var(--line);
  border-radius: 999px; font-size: .74rem; color: var(--ink-2); cursor: pointer; }
.photo-add:hover { border-color: var(--brand); color: var(--brand); }
.photo-status { display: block; margin-top: 3px; }
.copy-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line); font-size: .7rem; color: var(--ink-2); }
.split-form { display: inline-block; margin-top: 5px; }

/* --- Product gallery: arrows, and the large view -------------------------- */
.product-media { position: relative; }
/* The picture is a button so it can be opened from the keyboard; it must not
   look like one. */
.gallery-open { display: block; padding: 0; border: 0; background: none; max-width: 100%; cursor: zoom-in; }
.gallery-open img { display: block; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(var(--bg-rgb),.62); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.gallery-nav.prev { left: 10px; }
.gallery-nav.next { right: 10px; }
/* Hidden until wanted on a mouse, always there on touch where there is no hover
   and no other hint that the picture can be moved through. */
.product-media:hover .gallery-nav, .gallery-nav:focus-visible { opacity: 1; }
@media (hover: none) { .gallery-nav { opacity: .85; } }
.gallery-nav:hover { background: rgba(var(--bg-rgb),.9); border-color: var(--brand); color: var(--brand); }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(6,7,12,.97); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 44px 16px 58px; }
/* Spelled out because the display above is an author rule and would otherwise
   be in a fight with the browser's own [hidden] rule that nobody should have to
   look up the outcome of. */
.lightbox[hidden] { display: none; }
body.lightbox-open { overflow: hidden; }
.lightbox-stage { max-width: 100%; max-height: 100%; overflow: hidden; display: flex;
  align-items: center; justify-content: center; }
.lightbox-stage img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: 8px;
  cursor: zoom-in; transition: transform .18s ease-out; touch-action: none; }
.lightbox.is-zoomed .lightbox-stage img { cursor: zoom-out; transition: none; }
.lightbox-close { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(var(--bg-rgb),.7); color: var(--ink); font-size: 1.5rem;
  line-height: 1; cursor: pointer; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(var(--bg-rgb),.7); color: var(--ink);
  font-size: 1.9rem; line-height: 1; cursor: pointer; }
.lightbox-nav.prev { left: 12px; }
.lightbox-nav.next { right: 12px; }
.lightbox-close:hover, .lightbox-nav:hover { border-color: var(--brand); color: var(--brand); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lightbox-foot { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center;
  font-size: .78rem; color: var(--muted); display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* The zoom is a magnifier that follows the pointer, which is not obvious; while
   it is on, the hint would be in the way. */
.lightbox.is-zoomed .lightbox-hint { display: none; }
@media (max-width: 640px) {
  .lightbox { padding: 40px 6px 52px; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .lightbox-nav.prev { left: 4px; }
  .lightbox-nav.next { right: 4px; }
  .lightbox-hint { display: none; }
}

/* ---------- Release calendar ---------- */
.rel-head { padding: 30px 0 6px; max-width: 760px; }
.rel-intro { color: var(--ink-2); margin: 0 0 4px; }
.rel-h { margin: 34px 0 16px; }
.rel-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 12px; }
.rel-item { display: grid; grid-template-columns: 190px 1fr; gap: 18px; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.rel-when { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rel-date { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
/* An unconfirmed date is still a date on the page; it should not read as loudly
   as one we can stand behind. */
.rel-date-unknown { color: var(--muted); font-weight: 600; font-size: .95rem; }
.rel-status { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); color: var(--muted); }
.rel-confirmed { background: rgba(var(--green-rgb),.12); border-color: rgba(var(--green-rgb),.45); color: var(--green); }
.rel-announced { background: rgba(var(--blue-rgb),.12); border-color: rgba(var(--blue-rgb),.45); color: #93b8ff; }
.rel-body h3 { margin: 0 0 6px; }
.rel-note { color: var(--ink-2); margin: 0 0 8px; }
.rel-label { color: var(--muted); font-size: .8rem; margin: 0; }
.rel-products { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.rel-chip { display: inline-flex; align-items: baseline; gap: 7px; max-width: 100%;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: .85rem; font-weight: 600; }
.rel-chip:hover { border-color: var(--brand); }
.rel-chip-stock { color: var(--green); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.rel-chip.is-out { opacity: .72; }
.rel-chip.is-out .rel-chip-stock { color: var(--muted); }
.rel-more { font-size: .85rem; font-weight: 700; color: var(--brand); }
.rel-source { display: inline-block; margin-top: 8px; font-size: .78rem; color: var(--muted); }
.rel-source:hover { color: var(--ink-2); }
.rel-sets { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rel-sets a { display: flex; flex-direction: column; gap: 3px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; height: 100%; }
.rel-sets a:hover { border-color: #3a3f58; }
.rel-set-name { font-weight: 600; }
.rel-set-meta { color: var(--muted); font-size: .8rem; }
.rel-foot { margin: 34px 0 14px; max-width: 760px; }
.rel-foot p { margin: 0 0 12px; color: var(--ink-2); }
.rel-disclaimer { color: var(--muted); font-size: .78rem; max-width: 760px; padding-bottom: 50px; }
@media (max-width: 680px) {
  .rel-item { grid-template-columns: 1fr; gap: 10px; }
  .rel-when { flex-direction: row; align-items: center; gap: 10px; }
}
/* The set name on a product page is a link to the calendar; underline on hover
   only, so the line still reads as a label rather than as navigation. */
.set-link:hover { color: var(--brand); text-decoration: underline; }

/* ---------- Release calendar admin ---------- */
.rel-admin-form { max-width: 760px; }
.rel-admin-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.rel-admin-form select { width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-2); color: var(--ink); font: inherit; }
.field-check { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: .9rem; color: var(--ink-2); }
.rel-admin-actions { display: flex; gap: 8px; align-items: center; }
.rel-admin-actions form { margin: 0; }

.nc-select, .nc-filter { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-2); color: var(--ink); font: inherit; min-width: 0; }
/* The filter box earns its width only while there is width to spare; the select
   is the control that has to stay usable, so it gets the room first. */
.nc-filter { flex: 0 1 220px; }
.nc-select { flex: 1 1 240px; max-width: 420px; }
/* The feedback mail shown before it is sent: plain text, as the customer's
   client would render the fallback, so nothing is hidden behind styling. */
.feedback-preview { white-space: pre-wrap; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px; font-size: .82rem; line-height: 1.6; color: var(--ink-2);
  max-height: 340px; overflow-y: auto; margin: 0 0 12px; font-family: var(--font); }

/* ---------- Social profiles in the footer ---------- */
/* Payment marks and profile links share one row while there is width for it,
   and drop onto separate lines when there is not. */
.brand-meta { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.brand-meta .pay-badges { margin: 0; }
.social { display: flex; align-items: center; gap: 4px; }
.social a { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; color: var(--muted); transition: color .15s, background .15s; }
.social a:hover { color: var(--brand); background: rgba(255,255,255,.06); }
.social a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Floating clip player ---------- */
/* Sits above the page but below nothing that matters: the cart and the language
   switcher are in the header, and the player clears the footer on its own. */
.miniplayer { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 168px; }
.mp-frame { position: relative; border-radius: 14px; overflow: hidden; background: #000;
  border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.55); }
/* 9:16 — the shape the clips are shot in. */
.mp-video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.miniplayer button { position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(3px); padding: 0; }
.miniplayer button:hover { background: rgba(0,0,0,.78); }
.miniplayer button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mp-close { top: 7px; right: 7px; font-size: 1.15rem; line-height: 1; }
.mp-sound { bottom: 7px; left: 7px; }
/* One button, two glyphs: whichever describes the *current* state is hidden. */
.mp-sound .mp-icon-sound { display: none; }
.miniplayer.has-sound .mp-sound .mp-icon-muted { display: none; }
.miniplayer.has-sound .mp-sound .mp-icon-sound { display: inline; }
.mp-out { position: absolute; right: 7px; bottom: 9px; font-size: .72rem; font-weight: 700;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.mp-out:hover { color: var(--brand); }
.mp-caption { margin: 6px 2px 0; font-size: .74rem; line-height: 1.35; color: var(--muted); }
@media (max-width: 720px) {
  /* Smaller on a phone, where it is covering a much larger share of the screen. */
  .miniplayer { width: 116px; right: 10px; bottom: 10px; }
  .miniplayer button { width: 26px; height: 26px; }
  .mp-out { font-size: .65rem; }
  .mp-caption { display: none; }
}
/* Clip preview in the admin list: tall and narrow, like the clips themselves. */
.admin-clip { width: 108px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px;
  background: #000; border: 1px solid var(--line); }

/* Admin lists that search, filter and fold (public/js/admin-list.js).
   The toolbar sticks because the lists are long and the search box is the
   thing you reach for after scrolling, not before. */
/* Offset by the sticky site header, which is 69px tall and sits at z-index 50 --
   without this the toolbar sticks underneath it and is never seen again. */
.listtools { position: sticky; top: 69px; z-index: 20; display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; padding: 10px 0; margin-bottom: 4px;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.list-search { flex: 1 1 260px; min-width: 200px; max-width: 420px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: inherit;
  font-size: .9rem; padding: 9px 16px; outline: none; }
.list-search:focus { border-color: var(--brand); }
.listtools .filters { margin: 0; }
.listtools .chip { cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink); }
.listtools .chip:hover { border-color: var(--brand); }
.listtools .chip.active { color: var(--on-brand); }
.list-count { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list-empty { padding: 26px 2px; }

/* A heading row inside the table. It keeps the table's columns, so the rows
   under it stay aligned -- which is why this is a <tr> and not a <details>. */
.grp-head > th { text-transform: none; letter-spacing: 0; background: var(--bg-2);
  border-bottom: 1px solid var(--line); padding: 8px 12px; }
.grp-cat > th { background: var(--card); border-top: 1px solid var(--line); }
.grp-set > th { padding-left: 34px; }
.grp-toggle { background: transparent; border: 0; color: var(--ink); font: inherit;
  font-weight: 700; font-size: .95rem; cursor: pointer; padding: 2px 4px 2px 0;
  display: inline-flex; align-items: center; gap: 8px; }
.grp-set .grp-toggle { font-weight: 600; font-size: .88rem; color: var(--ink-2); }
.grp-toggle:hover { color: var(--brand); }
.grp-caret { display: inline-block; transition: transform .12s; color: var(--muted); }
.grp-head.is-open .grp-caret { transform: rotate(90deg); }
.grp-meta, .grp-hits { margin-left: 10px; font-weight: 400; }
.grp-hits { color: var(--brand); }

/* The button on a folded card: how many copies hide under it, and their total
   stock -- the number the row's own stock field cannot show. */
.copy-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); font: inherit; font-size: .75rem; font-weight: 600;
  padding: 2px 10px; cursor: pointer; white-space: nowrap; }
.copy-toggle:hover { border-color: var(--brand); color: var(--ink); }
.copy-caret { display: inline-block; transition: transform .12s; }
.copy-toggle.is-open .copy-caret { transform: rotate(90deg); }
.table tr.is-copy > td:first-child { box-shadow: inset 3px 0 0 var(--line); }
.table tr.is-copy > td { background: rgba(255,255,255,.015); }
/* Set names run long ("Scarlet & Violet: Twilight Masquerade"). Wrapping them
   made every row four lines tall, so they get one line and an ellipsis; the
   full name is in the title, and in the heading when the category is split. */
.set-cell { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 720px) {
  .listtools { position: static; }
  .list-count { margin-left: 0; }
}

/* Produkter & lager as rows (views/admin/_product-row.ejs): a picture, what the
   product is and its state, price and stock to change in place, and the rest
   under "Mer". Side by side on a wide screen, stacked on a phone. */
.plist-order { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.plist-order .chip { text-decoration: none; color: var(--ink); }
.plist-order .chip.active { color: var(--on-brand); }
.plist-bands { margin-bottom: 8px; }
.plist-bands p { margin: 4px 0; }
.plist-edges { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0 4px; }
.plist-edges label { display: grid; gap: 4px; flex: 1 1 220px; max-width: 420px; }
.plist-help { margin-top: 18px; }
.plist .grp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; padding: 8px 12px;
  background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plist .grp-set { padding-left: 30px; background: var(--bg-2); border-top: 0; }
.prow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prow.inactive > :not(.prow-more) { opacity: .6; }
.prow.is-copy { box-shadow: inset 3px 0 0 var(--line); background: rgba(255,255,255,.015); padding-left: 24px; }
.prow-thumb { width: 48px; height: 67px; object-fit: contain; border-radius: 4px; background: var(--bg-2); }
.prow-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; }
.prow-title a { color: var(--ink); }
.prow-title .status { font-size: .72rem; }
.prow-meta { margin-top: 2px; }
.prow-main .copy-toggle { margin: 6px 0 0; }
.prow-quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.prow-quick label { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-2); }
.prow-quick input { width: 84px; }
.prow-quick form { margin: 0; }
.prow-more { grid-column: 2 / -1; }
.prow-more > summary { cursor: pointer; color: var(--ink-2); width: max-content; }
.prow-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 16px; margin: 10px 0 4px; }
.pf { display: grid; gap: 4px; align-content: start; min-width: 0; }
.pf label { display: grid; gap: 4px; }
.pf .swirl-check, .pf-checks label { display: flex; align-items: center; gap: 6px; }
.pf-wide { grid-column: 1 / -1; }
.pf-label { font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pf select, .pf input[type=number], .pf input[type=date] { width: 100%; box-sizing: border-box; }
.pf-links .split-form { display: inline-block; margin-left: 8px; }
.news-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.code-row input[type=text] { flex: 1; min-width: 0; text-transform: uppercase; }
.code-row-set { justify-content: space-between; }
.import-form input[type=text] { width: 100%; max-width: 480px; box-sizing: border-box; }
.import-form .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.prow-delete { border-top: 1px solid var(--line, #e5e5e5); padding-top: 8px; margin-top: 4px; }
.prow-delete .delete-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn-danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.status-sale { background: var(--red); color: #fff; }
.status-move { background: var(--warn, #b26a00); color: #fff; }
@media (max-width: 640px) {
  .prow { grid-template-columns: 48px minmax(0, 1fr); }
  .prow-quick { grid-column: 2; justify-content: flex-start; }
  .prow-more { grid-column: 1 / -1; }
}

/* Card era and condition.
   The grade is a small fixed-width chip so a column of them lines up, and the
   colours run best-to-worst without ever being the only signal — the code is
   always written out. */
.cond { display: inline-block; min-width: 38px; text-align: center; padding: 2px 7px;
  border-radius: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-2); }
.cond-MT { border-color: rgba(16,185,129,.6); color: #6ee7b7; background: rgba(16,185,129,.14); }
.cond-NM { border-color: rgba(var(--green-rgb),.5); color: #86efac; background: rgba(var(--green-rgb),.1); }
.cond-EX { border-color: rgba(52,211,153,.45); color: #a7f3d0; background: rgba(52,211,153,.08); }
.cond-GD { border-color: rgba(163,230,53,.45); color: #d9f99d; background: rgba(163,230,53,.08); }
.cond-LP { border-color: rgba(var(--brand-rgb),.45); color: var(--brand); background: rgba(var(--brand-rgb),.08); }
.cond-PL { border-color: rgba(var(--brand-2-rgb),.5); color: #fdba74; background: rgba(var(--brand-2-rgb),.1); }
.cond-PO { border-color: rgba(239,68,68,.5); color: #fca5a5; background: rgba(239,68,68,.1); }

/* Inline on a card's set line, so a graded card is the same height as one
   without a grade and the titles in a grid stay level. */
.cond-sm { min-width: 0; padding: 1px 5px; font-size: .62rem; vertical-align: 1px; }
.card-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 2px 0 10px; }
.cond-name { font-size: .85rem; color: var(--ink-2); }
.cond-guide, .era-tag { font-size: .8rem; color: var(--muted); border-bottom: 1px dotted var(--line); }
.cond-guide:hover, .era-tag:hover { color: var(--brand); border-color: var(--brand); }
.era-tag { font-weight: 600; }
.cond-look { margin: 0 0 14px; max-width: 54ch; }

/* The era pages */
.era-head, .guide-head { padding: 26px 0 6px; }
.era-intro, .guide-intro { color: var(--ink-2); max-width: 62ch; margin: 0 0 14px; }
.era-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.era-count { opacity: .65; font-weight: 400; }
.era-foot { margin: 22px 0 30px; max-width: 70ch; }

/* The condition guide */
.guide-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; }
.guide-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.guide-grade { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.guide-grade h2 { margin: 0; font-size: 1.05rem; }
.guide-def { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px; }
.guide-def dt { color: var(--muted); font-size: .82rem; }
.guide-def dd { margin: 0; color: var(--ink-2); }
.guide-notes { max-width: 70ch; margin-bottom: 36px; }

/* Admin: the era and grade columns */
.era-cell, .cond-cell { white-space: nowrap; }
.era-select { max-width: 132px; }
.cond-select { max-width: 74px; }
.era-warn { color: #fdba74; }

@media (max-width: 640px) {
  .guide-def { grid-template-columns: 1fr; gap: 2px; }
  .guide-def dt { margin-top: 6px; }
}
.era-nav-label { margin-right: 2px; align-self: center; }

/* The condition decal on the product photograph.
   It reuses the .cond-* colours so the chip beside the price and the mark on
   the picture are the same thing said twice, and it is a link to the guide
   because the code alone means nothing to a first-time buyer. */
.cond-decal { position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(var(--bg-rgb),.82); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.45); line-height: 1; }
.cond-decal:hover { border-color: currentColor; }
.cond-decal-code { font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.cond-decal-name { font-size: .74rem; font-weight: 600; color: var(--ink-2); }
/* The colour comes from the same .cond-NM … .cond-PO rules, but the decal sits
   on a photograph, so it keeps its own dark ground and borrows only the ink. */
.cond-decal.cond-MT, .cond-decal.cond-NM, .cond-decal.cond-EX, .cond-decal.cond-GD,
.cond-decal.cond-LP, .cond-decal.cond-PL, .cond-decal.cond-PO { background: rgba(var(--bg-rgb),.82); }
/* A slab's grade: the grader's, in the shop's accent rather than a condition's colour. */
.cond-decal.cond-slab { color: var(--brand); }
.cond-decal.cond-slab:hover { border-color: var(--line); }

@media (max-width: 520px) {
  .cond-decal-name { display: none; }
  .cond-decal { top: 8px; right: 8px; padding: 5px 9px; }
}

/* Newsletter templates in the composer. */
.news-template { margin-bottom: 18px; }
.news-template h3 { margin: 0 0 10px; font-size: 1rem; }
.tmpl-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.tmpl-row .field { flex: 1 1 180px; min-width: 150px; }
.tmpl-products { margin-top: 12px; }
.tmpl-picked { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.tmpl-picked li { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: .82rem; }
.tmpl-drop { background: transparent; border: 0; color: var(--muted); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 4px; }
.tmpl-drop:hover { color: var(--red); }
.tmpl-extra { margin: 12px 0; }
.tmpl-extra summary { cursor: pointer; color: var(--ink-2); font-size: .88rem; }

/* One collapsible box per language, under the main draft. */
.news-langs { margin: 18px 0 6px; }
.news-langs h3 { margin: 0 0 4px; font-size: 1rem; }
.news-lang { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px;
  background: var(--bg-2); }
.news-lang summary { cursor: pointer; font-weight: 600; display: flex; gap: 10px; align-items: baseline; }
.news-lang[open] summary { margin-bottom: 8px; }
.rel-cell { white-space: nowrap; }
.rel-reset { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.watch-blocks, .watch-manual { margin: 18px 0; }
.watch-blocks summary, .watch-manual summary { cursor: pointer; }
/* Sending a watch list before the stock is in: possible, never the default. */
.ahead-box { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px;
  padding: 11px 13px; border: 1px solid rgba(var(--brand-2-rgb),.4); border-radius: 10px;
  background: rgba(var(--brand-2-rgb),.08); font-size: .85rem; line-height: 1.45; cursor: pointer; }
.ahead-box input { margin-top: 3px; flex: 0 0 auto; }

/* --- The singles upsell in the cart ---------------------------------------
   Free shipping needs a loose card as well as a big enough order, and the card
   half was being missed: four of the first eleven paid orders cleared the
   threshold, held no card and paid postage anyway. So this is deliberately
   louder than the muted line it replaces -- green when the order already
   qualifies and one tap would settle it, yellow while it is still a goal. */
.upsell { margin: 18px 0 4px; padding: 15px; border-radius: var(--radius);
  border: 1px solid rgba(var(--brand-rgb),.35);
  background: linear-gradient(135deg, rgba(var(--brand-rgb),.12), rgba(var(--brand-2-rgb),.05) 60%, transparent); }
.upsell.is-ready { border-color: rgba(var(--green-rgb),.45);
  background: linear-gradient(135deg, rgba(var(--green-rgb),.16), rgba(var(--green-rgb),.04) 60%, transparent); }
.upsell-head { display: flex; gap: 12px; align-items: flex-start; }
.upsell-mark { flex: 0 0 auto; font-size: 1.5rem; line-height: 1.2; }
.upsell-title { font-size: 1.05rem; margin: 0 0 3px; }
.upsell-body { margin: 0; font-size: .85rem; line-height: 1.45; color: var(--ink-2); max-width: 64ch; }
.upsell-body strong { color: var(--ink); }
/* The campaign is a second reason to add cards, not a competing one, so it sits
   on its own line under the shipping sentence rather than beside it. */
.upsell-promo { display: block; margin-top: 4px; color: var(--brand); font-weight: 600; }

/* A scroller, not a grid: on a phone this sits between the basket and the pay
   button, and eight cards in a grid would push the button off the screen. */
.upsell-row { display: flex; gap: 10px; margin: 13px 0 0; padding: 0 0 6px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; }
.upsell-card { flex: 0 0 122px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; }
.upsell-img { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
/* The shop's own sale flag, shrunk to fit a 108px card. */
.upsell-img .ribbon-sale { font-size: .62rem; padding: 2px 5px; }
.upsell-was { opacity: .6; font-weight: 500; }
.upsell-img img { width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; }
.upsell-name { font-size: .78rem; line-height: 1.3; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.upsell-meta { font-size: .68rem; color: var(--muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* Pushed to the bottom so the buttons line up however long the names run. */
.upsell-add { margin-top: auto; padding-top: 4px; }
.upsell-add .btn { font-size: .76rem; padding: 7px 4px; white-space: nowrap; }
.upsell-all { display: inline-block; margin-top: 4px; font-size: .82rem; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; }
.upsell-all:hover { color: var(--brand); }

@media (max-width: 640px) {
  .upsell { padding: 14px 12px; margin-inline: 0; }
  .upsell-title { font-size: 1rem; }
  /* The row bleeds to the screen edges so a card is visibly cut off, which is
     what tells a thumb there is more to the right. */
  .upsell-row { margin-inline: -12px; padding-inline: 12px; }
  .upsell-card { flex-basis: 108px; }
}

/* The one-day sitewide offer: loud on purpose, and only there for 24 hours. */
.sale-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
  margin: 18px 0 26px; padding: 26px 30px; border-radius: 18px; color: var(--on-brand);
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 100%);
  box-shadow: 0 10px 40px rgba(255, 138, 0, .25); }
.sale-hero[hidden] { display: none; }
.sale-hero-kicker { margin: 0 0 4px; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sale-hero-title { margin: 0; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.02; font-weight: 900; letter-spacing: -.02em; color: var(--on-brand); }
.sale-hero-lead { margin: 8px 0 0; font-size: 1rem; font-weight: 500; max-width: 46ch; }
.sale-hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sale-hero-ends { margin: 0; font-size: .95rem; font-weight: 600; }
.sale-hero-ends strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 900; margin-left: 4px; }
.sale-hero-cta { display: inline-block; padding: 14px 26px; border-radius: 12px; background: #0b0d14; color: #fff;
  font-weight: 800; font-size: 1.05rem; text-decoration: none; }
.sale-hero-cta:hover { background: #1a1d2b; }
@media (max-width: 600px) {
  .sale-hero { padding: 20px 18px; margin: 12px 0 20px; }
  .sale-hero-side { width: 100%; }
  .sale-hero-cta { width: 100%; text-align: center; }
}

/* The product id of the exact copy sold, so copies of one card can be told apart when picking. */
.art-no { font-size: .8em; padding: 1px 6px; border-radius: 6px; background: rgba(255, 203, 5, .14); color: var(--brand); white-space: nowrap; }

/* ---------- Admin: Ekonomi */
.econ-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 18px; }
.econ-tile { display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.econ-tile .k { color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.econ-tile strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.econ-tile-result { border-color: var(--brand); }
.econ-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 18px; }
.econ-side { display: grid; gap: 16px; }
.econ-ladder tr.sum td { font-weight: 700; border-top: 1px solid var(--line); }
.econ-ladder tr.total td { font-size: 1.1rem; color: var(--brand); }
.econ-orders td, .econ-orders th { white-space: nowrap; }
.warn-text { color: #f59e0b; }
.ok-text { color: var(--green, #22c55e); }
.order-costs { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.porto-form { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: .9rem; }
.porto-form input { width: 110px; }
@media (max-width: 900px) {
  .econ-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .econ-grid { grid-template-columns: 1fr; }
}
/* On a phone the labels wrap and the amounts keep their width, so no number is cut off. */
.econ-grid .panel { overflow-x: auto; min-width: 0; }
@media (max-width: 600px) {
  .econ-grid .panel { padding: 14px 12px; }
  .econ-grid .table td, .econ-grid .table th { padding: 8px 6px; }
  .econ-grid .table td:first-child { white-space: normal; }
  .econ-tile strong { font-size: 1.2rem; }
}

/* ---------- Singles page: search, filters, grid ---------- */
.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; }
.js-only { display: none; }
.singles-js .js-only { display: revert; }
.singles-head { padding: 26px 0 8px; display: grid; gap: 8px; }
.singles-head h1 { margin: 0; }
.singles-intro { margin: 0; max-width: 70ch; }
.era-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip-ghost { background: transparent; }
.singles-toolbar { position: sticky; top: 68px; z-index: 20; display: flex; gap: 10px; align-items: center;
  padding: 12px 0; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.singles-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; color: var(--muted); }
.singles-search:focus-within { border-color: var(--brand); }
.singles-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ink); font: inherit; font-size: 1rem; padding: 11px 0; outline: none; }
.singles-sort select { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: .92rem; }
.singles-filter-btn { white-space: nowrap; }
.singles-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: start; }
.singles-panel { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; display: grid; gap: 18px;
  padding-right: 6px; scrollbar-width: thin; }
.singles-panel-head { display: none; }
.facet { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; }
.facet legend { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; padding: 0; }
.facet-help { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--brand); margin-left: 6px; }
.facet-find { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: .88rem; margin-bottom: 4px; }
.facet-group { display: grid; gap: 2px; }
.facet-group + .facet-group { margin-top: 8px; }
.facet-group-name { font-size: .78rem; color: var(--ink-2); font-weight: 600; padding: 2px 0; }
.facet-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: .9rem; }
.facet-opt:hover { background: var(--card); }
.facet-opt input, .facet-pill input { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; }
.facet-label { overflow-wrap: anywhere; }
.facet-count { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.facet-opt.is-empty, .facet-pill.is-empty { opacity: .4; }
.facet-row { display: flex; flex-wrap: wrap; gap: 6px; }
.facet-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.facet-pill:has(input:checked) { border-color: var(--brand); background: rgba(var(--brand-rgb),.08); }
.singles-panel-foot { display: grid; gap: 8px; }
.singles-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; color: var(--muted); font-size: .9rem; }
.singles-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-active { display: inline-flex; gap: 6px; align-items: center; background: rgba(var(--brand-rgb),.12); border-color: var(--brand); color: var(--ink); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; }
.singles-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ribbon-copies { background: rgba(var(--bg-rgb),.85); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: .72rem; }
.singles-results .promo-banner { margin-bottom: 16px; }

@media (max-width: 860px) {
  .singles-body { grid-template-columns: 1fr; }
  .singles-toolbar { top: 56px; flex-wrap: wrap; }
  .singles-search { flex-basis: 100%; }
  .singles-filter-btn, .singles-sort { flex: 1; }
  .singles-sort select { width: 100%; }
  /* Without JavaScript the filters simply sit above the cards. With it they
     become a sheet that slides up from the bottom, opened by "Filter". */
  .singles-js .singles-panel { position: fixed; inset: auto 0 0 0; top: auto; z-index: 100; max-height: 82vh;
    background: var(--bg-2); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
    padding: 0 16px; transform: translateY(105%); transition: transform .25s ease;
    box-shadow: 0 -20px 50px rgba(0,0,0,.5); }
  .singles-js .singles-panel.is-open { transform: none; }
  .singles-js .singles-panel-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0;
    background: var(--bg-2); padding: 14px 0 8px; z-index: 1; }
  .singles-close { background: none; border: 0; color: var(--ink); font-size: 1.8rem; line-height: 1; padding: 0 4px; cursor: pointer; }
  .singles-js .singles-panel-foot { position: sticky; bottom: 0; background: var(--bg-2); padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); box-shadow: 0 -12px 16px var(--bg-2); }
  body.singles-sheet-open { overflow: hidden; }
  .singles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .singles-js .singles-panel { transition: none; } }

/* Other copies of the same card, on its product page. */
.copies { margin: 18px 0 6px; }
.copies h3 { font-size: 1rem; margin-bottom: 8px; }
.copies-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.copies-item { display: grid; grid-template-columns: 54px auto 1fr auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.copies-item:hover { border-color: var(--brand); }
.copies-item img { width: 54px; height: 72px; object-fit: cover; border-radius: 6px; background: #fff; }
.copies-price { font-weight: 700; justify-self: end; }
.copies-go { color: var(--muted); }

/* ---------- Singles in the menu ---------- */
.nav-singles { position: relative; display: flex; align-items: center; }
.nav-singles-link { color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.nav-badge { background: var(--brand); color: var(--on-brand); font-size: .68rem; font-weight: 800; border-radius: 999px; padding: 1px 7px; line-height: 1.5; }
.nav-drop { position: absolute; top: calc(100% + 12px); left: -18px; display: none; width: max-content; grid-template-columns: repeat(2, max-content); gap: 28px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; box-shadow: var(--shadow); z-index: 60; }
/* A bridge over the gap, so moving the pointer down does not close it. */
.nav-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-singles:hover .nav-drop, .nav-singles:focus-within .nav-drop { display: grid; }
.nav-drop-col { display: grid; gap: 2px; align-content: start; }
.nav-drop-head { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.nav-drop a { display: flex; justify-content: space-between; gap: 16px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; color: var(--ink); font-size: .88rem; }
.nav-drop a:hover { background: var(--card); color: var(--brand); }
.nav-drop-count { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.nav-drop-all { margin-top: 6px !important; color: var(--brand) !important; font-weight: 700; }
.mobile-nav .mobile-singles { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.mobile-sub { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.mobile-sub a { border-bottom: 0 !important; padding: 10px 12px 12px 20px !important; font-size: .9rem; color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; }

/* ---------- Singles on the home page ---------- */
.home-singles-lead { margin: -4px 0 16px; max-width: 70ch; }
.era-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.era-door { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, transform .15s; }
.era-door:hover { border-color: var(--brand); transform: translateY(-2px); }
.era-door-img { width: 96px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #fff; }
.era-door-img img { width: 100%; height: 100%; object-fit: cover; }
.era-door-text { display: grid; gap: 4px; }
.era-door-text strong { font-family: var(--display); font-size: 1.2rem; }
.home-singles-sub { font-size: 1.05rem; margin: 0 0 12px; }
.home-newest { margin-bottom: 8px; }
@media (max-width: 760px) {
  .era-doors { grid-template-columns: 1fr; gap: 10px; }
  .era-door { grid-template-columns: 64px minmax(0, 1fr); }
  .era-door-img { width: 64px; }
  /* The newest cards scroll sideways on a phone instead of stacking eight tall tiles. */
  .home-newest { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; }
  .home-newest > .stile { flex: 0 0 62%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .era-door { transition: none; } .era-door:hover { transform: none; } }
/* The phone sheet's "show N cards" button has nothing to close on a wide
   screen, and the banner's link to the singles page points at this page. */
@media (min-width: 861px) { #singles-done { display: none !important; } }
.singles-results .promo-banner .btn, .singles-results .promo-banner a.btn { display: none; }

/* ---------- Deal shortcuts and the set checklist ---------- */
.deal-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.deal-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font-weight: 600; font-size: .9rem;
  background: rgba(var(--brand-rgb),.1); border: 1px solid rgba(var(--brand-rgb),.45); color: var(--ink); }
.deal-chip:hover { border-color: var(--brand); background: rgba(var(--brand-rgb),.18); }
.checklist { margin-top: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.checklist summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 16px 18px; cursor: pointer; font-weight: 700; list-style: none; }
.checklist summary::-webkit-details-marker { display: none; }
.checklist summary::after { content: "▾"; color: var(--muted); }
.checklist[open] summary::after { content: "▴"; }
.checklist-count { margin-left: auto; color: var(--brand); font-size: .9rem; }
.checklist-rows { list-style: none; margin: 0; padding: 0 18px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 24px; }
.checklist-rows li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.checklist-no { font-variant-numeric: tabular-nums; }
.checklist-rows li.is-have { color: var(--ink); }
.checklist-rows li.is-have a { color: var(--brand); font-weight: 600; }
.checklist-price { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.checklist-rarity { font-size: .75rem; white-space: nowrap; }
.checklist-name { overflow-wrap: anywhere; }
.checklist-extras { margin: 0; padding: 0 18px 16px; color: var(--muted); }
.checklist-extras a { color: var(--brand); font-weight: 600; }

/* Swirl in the holo foil: a print feature collectors pay extra for. */
.swirl-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  color: #0b0d14; background: linear-gradient(120deg, #ffcb05, #ff8fd8 45%, #7fd7ff 90%); vertical-align: 1px; }
.swirl-sm { padding: 1px 6px; font-size: .62rem; }
.swirl-line { margin: 6px 0 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: var(--ink-2); }
/* An error print: the label is printed slightly off register, like the card. */
.error-tag { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: #1d2030; border: 1px dashed #ff5a7a; vertical-align: 1px;
  text-shadow: -1px 0 rgba(0, 220, 255, .85), 1px 0 rgba(255, 60, 120, .85); }
.error-sm { padding: 1px 6px; font-size: .58rem; }
.swirl-check { display: flex; align-items: center; gap: 4px; margin-top: 4px; white-space: nowrap; }

/* Admin funnel (/admin/tratt). */
.funnel-wrap { overflow-x: auto; margin: 12px 0 6px; }
.funnel { width: 100%; border-collapse: collapse; min-width: 520px; }
.funnel th, .funnel td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.funnel td.num, .funnel th.num { text-align: right; font-variant-numeric: tabular-nums; }
.funnel td strong { font-size: 1.15rem; }
.step-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #0b0d14; font-size: .75rem; font-weight: 700; margin-right: 6px; }
.funnel-rate { display: block; font-size: .8rem; color: var(--ink-2); }
.funnel-rate.is-low { color: var(--red); font-weight: 700; }
.funnel-bar { display: block; height: 4px; margin: 6px 0 0 auto; width: 100%; background: linear-gradient(to left, var(--brand) var(--w), var(--line) var(--w)); border-radius: 2px; }
.funnel-side th { font-weight: 500; color: var(--ink-2); }
.funnel-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 28px; }
.funnel-lists h2 { font-size: 1.05rem; margin: 0 0 6px; }
.funnel-small { width: 100%; border-collapse: collapse; }
.funnel-small th, .funnel-small td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: .9rem; }
.funnel-small .num { text-align: right; font-variant-numeric: tabular-nums; }
.term-list { margin: 0; padding: 0; list-style: none; counter-reset: t; }
.term-list li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.term-list .num { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.funnel-h2 { font-size: 1.05rem; margin: 28px 0 0; }
.traffic .traffic-bar-col { width: 30%; min-width: 80px; }
.traffic-bar { display: block; height: 8px; border-radius: 4px; background: var(--brand); min-width: 2px; }
.traffic tr.is-today th, .traffic tr.is-today td { background: rgba(var(--brand-rgb),.06); }

/* Admin: social videos (/admin/sociala). */
.social-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.social-bar .list-search { flex: 1 1 220px; }
.social-list { max-height: 62vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.social-row { display: grid; grid-template-columns: 22px 54px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.social-row:hover { background: rgba(255,255,255,.03); }
.social-row.is-picked { background: rgba(var(--brand-rgb),.08); }
.social-row img { border-radius: 6px; object-fit: cover; width: 54px; height: 72px; }
.social-row img.is-sealed { object-fit: contain; background: #fff; padding: 3px; }
.social-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.social-go { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 14px 0 8px; }
.social-words { margin: 14px 0 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.social-words summary { cursor: pointer; }
.social-words-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; margin: 10px 0; }
.social-words fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.social-words legend { font-weight: 700; margin-bottom: 4px; }
.social-words label { display: flex; flex-direction: column; gap: 3px; }
.social-words input[type=text] { width: 100%; box-sizing: border-box; }
.social-video { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.social-player video { width: 100%; aspect-ratio: 9 / 16; border-radius: 12px; background: #000; margin-bottom: 10px; }
.social-wait { aspect-ratio: 9 / 16; display: grid; place-content: center; text-align: center; border: 1px dashed var(--line); border-radius: 12px; padding: 20px; }
.social-cards { margin: 4px 0 14px; padding-left: 18px; }
.social-text { margin-bottom: 16px; }
.social-text-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.social-text textarea { width: 100%; font: inherit; font-size: .88rem; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); resize: vertical; }
@media (max-width: 760px) { .social-video { grid-template-columns: 1fr; } .social-row { grid-template-columns: 22px 44px minmax(0, 1fr) auto; } .social-row .social-meta { display: none; } }

.traffic-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-top: 28px; }
.traffic-head .funnel-h2 { margin: 0; }
.traffic-period { display: flex; gap: 6px; }
.traffic-period a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.traffic-period a.is-on { background: var(--brand); border-color: var(--brand); color: #0b0d14; font-weight: 700; }
.traffic .traffic-day { white-space: nowrap; }
@media (max-width: 700px) {
  /* On a phone: date, page views, orders, revenue -- nothing off to the side. */
  .funnel-wrap .funnel.traffic { min-width: 0; }
  .traffic .traffic-bar-col, .traffic .traffic-rate { display: none; }
  .traffic th, .traffic td { padding: 8px 6px; font-size: .88rem; }
  .traffic td strong { font-size: 1rem; }
}
.econ-forecast { margin-bottom: 18px; }
.econ-forecast .inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 12px; }

/* Card bundles: the cards inside, each with its own grade. */
.bundle-box { margin: 10px 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.bundle-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.bundle-cards { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.bundle-cards li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bundle-name { font-weight: 600; }
.bundle-note { margin: 8px 0 0; }
.bundle-cart-note { margin-top: 4px; color: var(--ink-2); }
.bundle-grade { display: inline-flex; gap: 4px; align-items: center; margin-right: 6px; }

/* ---------- Illustrators ---------- */
.card-artist { margin: 6px 0 0; color: var(--ink-2); }
.card-artist a { color: var(--brand); }
.artist-native { margin: -4px 0 8px; font-size: .95rem; }
.facet-select { width: 100%; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: .9rem; }
.artist-bundles { margin-top: 32px; }
.artist-bundles h2, .artist-bio h2 { font-size: 1.25rem; text-wrap: balance; }
.artist-bio { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 68ch; }
.artist-bio p { line-height: 1.65; color: var(--ink-2); }
.artist-sources { margin-top: 24px; }
.artist-sources h3 { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; }
.artist-sources ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.artist-sources a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.artists-head { margin: 8px 0 24px; }
.artists-intro { color: var(--ink-2); max-width: 68ch; line-height: 1.6; }
.artist-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.artist-tiles > * { min-width: 0; }
.artist-tile-link { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; transition: border-color .15s; }
.artist-tile-link:hover { border-color: var(--brand); }
.artist-tile-cover { display: block; aspect-ratio: 5 / 7; max-width: 100%; border-radius: 8px; background: var(--bg-2); overflow: hidden; }
.artist-tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artist-tile-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.artist-tile-name { font-size: 1.1rem; }
.artist-tile-native { font-size: .85rem; }
.artist-tile-lead { color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.artist-tile-count { margin-top: auto; padding-top: 6px; font-size: .82rem; font-weight: 600; color: var(--brand); }
.artists-more { margin-top: 36px; }
.artists-more h2 { font-size: 1.2rem; }
.artists-more-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) {
  .artist-tiles { grid-template-columns: minmax(0, 1fr); }
  .artist-tile-link { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
}

/* ---------- Seasons (src/seasons.js) ----------
   Structure shared by every seasonal look. Colours and artwork live in
   /css/season-<id>.css, which is only loaded while that season is on. */
/* A seasonal logo carries a hat above the ring: the image is taller, and the
   negative margin keeps the wordmark exactly where the ordinary logo sits. */
.logo img.logo-season { height: 55.3px; margin-top: -25.3px; }
.site-footer .logo img.logo-season { height: 47.9px; margin-top: -21.9px; }
.season-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 28px;
  margin: 18px 0 6px; padding: 26px 30px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.season-hero-text { position: relative; z-index: 1; }
.season-hero-kicker { display: inline-block; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; margin: 0 0 10px; }
.season-hero h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 0 0 10px; text-wrap: balance; }
.season-hero p { color: var(--ink-2); max-width: 46ch; margin: 0 0 18px; line-height: 1.6; }
.season-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.season-hero-art { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 800 / 440; border-radius: 14px; }
@media (max-width: 760px) {
  .season-hero { grid-template-columns: minmax(0, 1fr); padding: 0 0 20px; gap: 16px; }
  .season-hero-art { order: -1; border-radius: 0; }
  .season-hero-text { padding: 0 18px; }
}
.season-decor { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .season-decor, .season-decor * { animation: none !important; }
}
.radio-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; max-width: 560px; }
.radio-row input { margin-top: 4px; }
/* The same hat-room arithmetic at the two smaller logo heights (27px, 22px):
   the image is 236/128 of the wordmark's height and starts 108/128 above it. */
@media (max-width: 640px) { .logo img.logo-season { height: 49.8px; margin-top: -22.8px; } }
@media (max-width: 400px) { .logo img.logo-season { height: 40.6px; margin-top: -18.6px; } }

/* Admin: shop settings (/admin/installningar). */
.settings-section { margin: 18px 0; scroll-margin-top: 90px; }
.settings-row { display: flex; flex-wrap: wrap; gap: 0 14px; }
.settings-row .field { flex: 1 1 150px; }
.settings-row .settings-wide { flex: 3 1 260px; }
.offer-pick { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.offer-pick legend { font-weight: 700; }
.offer-pick-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.offer-pick-row { display: flex; gap: 8px; align-items: flex-start; padding: 4px 2px; cursor: pointer; }
.offer-pick-row[hidden] { display: none; }
.offer-pick-row span { display: flex; flex-direction: column; }
.offers-table { margin: 10px 0 14px; }
.offers-table .offer-ended { opacity: .6; }
.offer-status { font-weight: 700; font-size: .85em; }
.offer-status-live { color: var(--ok, #16a34a); }
.settings-colours { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 14px; }
.settings-colours input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.theme-preview { margin: 14px 0; padding: 16px; border-radius: var(--radius); background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.theme-preview-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.theme-preview-card p { flex: 1 1 100%; margin: 0; }
.settings-zone { border: 1px solid var(--line); border-radius: 10px; margin: 12px 0; padding: 6px 14px 10px; }
.settings-zone legend { padding: 0 6px; font-weight: 700; }
.settings-countries { display: flex; flex-wrap: wrap; gap: 0 16px; }
/* Texter (/admin/texter): the search, the pages, one row per text, and the
   one text opened in each language with the shop details it can name. */
.texts-search { display: flex; gap: 8px; }
.texts-search input { flex: 1 1 auto; min-width: 0; font-size: 1rem; padding: 10px 12px; }
.texts-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.texts-pages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.texts-page-link { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--ink); text-decoration: none; }
.texts-page-link:hover, .texts-page-link:focus-visible { border-color: var(--brand); }
.texts-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.texts-page-head h2 { margin: 6px 0; }
.texts-page-head .btn { margin-left: auto; }
.texts-group { margin-top: 14px; }
.texts-group-head { margin: 14px 0 6px; font-size: 1.05rem; }
.texts-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.texts-list li + li { border-top: 1px solid var(--line); }
.texts-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 14px; color: var(--ink); text-decoration: none; }
.texts-row:hover, .texts-row:focus-visible { background: var(--bg-2); }
.texts-list li.is-saved { background: rgba(var(--brand-rgb), .08); }
.texts-label { grid-column: 1 / -1; font-size: .85rem; }
.texts-says { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.texts-state { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.texts-state .text-state { margin-left: 0; white-space: nowrap; }
.text-editor h2 { margin: 4px 0 6px; }
.text-fields { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); padding: 8px 14px; margin: 12px 0 16px; }
.text-fields summary { cursor: pointer; }
.text-needs { border: 1px solid rgba(var(--brand-rgb), .5); border-radius: 10px; padding: 4px 14px 8px; margin: 12px 0; }
.text-field-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
.text-field-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.text-field-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.text-param { cursor: pointer; font: 600 .8rem ui-monospace, Consolas, monospace; color: var(--ink); padding: 4px 10px; white-space: nowrap; }
.text-param:hover, .text-param:focus-visible { border-color: var(--brand); }
.text-lang.has-error textarea { border-color: var(--red); }
.text-lang .field-error { color: #ffb3b3; margin: 4px 0; }
.text-actions { display: flex; gap: 8px; margin-top: 8px; }
@media (max-width: 640px) {
  .texts-row { grid-template-columns: 1fr; }
  .texts-state { justify-content: flex-start; }
}
.text-state { margin-left: 8px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.text-state.is-own { border-color: rgba(var(--brand-rgb), .5); color: var(--brand); }
.text-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.text-where p { flex: 1 1 240px; margin: 2px 0 6px; }
.text-lang { margin: 8px 0 16px; }
.text-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.text-preview { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0; background: var(--bg-2); overflow-wrap: anywhere; }
/* Roughly how a search result looks, on the white a search page is. */
.text-snippet { display: grid; gap: 2px; max-width: 600px; margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: #fff; font-family: Arial, sans-serif; overflow-wrap: anywhere; }
.text-snippet-url { color: #4d5156; font-size: .8rem; }
.text-snippet-title { color: #1a0dab; font-size: 1.1rem; }
.text-snippet-desc { color: #4d5156; font-size: .85rem; }
/* The shop's page opened from Texter at #text=<key> (public/js/shop.js). */
.copy-spot { position: relative; outline: 3px solid var(--brand); outline-offset: 6px; border-radius: 4px; scroll-margin: 140px; }
.copy-spot::after { content: attr(data-copy-label); position: absolute; left: -6px; bottom: calc(100% + 10px); z-index: 5; padding: 1px 8px; border-radius: 6px;
  background: var(--brand); color: var(--on-brand); font: normal 700 .75rem/1.6 var(--font); white-space: nowrap; pointer-events: none; }
.copy-spot-missing { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px;
  background: var(--brand); color: var(--on-brand); font-weight: 700; box-shadow: var(--shadow); }
.settings-section select, .settings-section input[type=number], .settings-section input[type=datetime-local] {
  width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--ink); font: inherit; }
/* The brand images: each picture on the background it will sit on, beside its upload. */
.brand-image { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.brand-image:first-child { border-top: 0; padding-top: 4px; }
.brand-image-preview { flex: 0 0 200px; max-width: 100%; height: 72px; box-sizing: border-box; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  display: grid; place-items: center; color: #8a90a8; font-size: .85rem; }
.brand-image-preview.is-square { flex-basis: 72px; width: 72px; }
.brand-image-preview img { max-width: 100%; max-height: 100%; }
.brand-image-body { flex: 1 1 240px; min-width: 0; }
.brand-image-body p { margin: 4px 0 0; }
.brand-image .inline-form form { margin: 0; }
.brand-pick { position: relative; cursor: pointer; }
.brand-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.brand-pick:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.brand-status.is-warn { color: var(--red); }
.settings-paths { margin: 6px 0 12px; }
.settings-paths summary { cursor: pointer; padding: 6px 0; color: var(--muted); }

/* Admin: a single from the set checklist (/admin/ny-single), phone first. */
.intake-form { max-width: 560px; }
/* The camera and a picture already taken, side by side; the words wrap
   inside the buttons on a phone rather than push the page wider. */
.intake-scan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.intake-scan .btn { flex: 3 1 0; min-width: 0; white-space: normal; font-size: 1.05rem; padding: 14px; }
.intake-scan .btn[data-scan-fill="gallery"] { flex: 2 1 0; }
.intake-scan > a { flex-basis: 100%; }
/* As on Ny single, the camera first. */
.bulk-scan-row { display: flex; gap: 8px; }
.bulk-scan-row .btn { min-width: 0; white-space: normal; }
.bulk-scan-row #bulk-scan { flex: 3; }
.bulk-scan-row #bulk-scan-gallery { flex: 2; width: auto; }

/* The card scanner (public/js/card-scan.js): a sheet over the page with
   the card as it was read and the cards it could be. */
.scan-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); }
.scan-sheet-box { width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: var(--shadow); }
.scan-sheet-head { display: flex; align-items: center; justify-content: space-between; font-size: 1.05rem; }
.scan-sheet-body { overflow-y: auto; display: grid; gap: 10px; }
.scan-sheet-card { width: 120px; justify-self: center; border-radius: 8px; border: 1px solid var(--line); }
.scan-sheet-status { margin: 0; font-weight: 600; line-height: 1.4; }
.scan-sheet-actions { display: grid; gap: 8px; }
.scan-sheet-actions .btn { width: 100%; padding: 14px; font-size: 1.05rem; }
.scan-sheet-row { display: flex; gap: 8px; }
.scan-sheet-row .btn { flex: 1; min-width: 0; width: auto; padding: 14px 10px; white-space: normal; }
.scan-sheet-status { white-space: pre-line; }
.scan-card.scan-manual { color: var(--muted); border-style: dashed; }
.scan-card.scan-back { border-color: var(--brand); font-weight: 600; }
.scan-close { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--line); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.scan-cards { display: grid; gap: 8px; }
.scan-card { text-align: left; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--ink); font: inherit; font-size: .95rem; cursor: pointer; }
.scan-card:hover { border-color: var(--brand); }
.scan-read { margin: 0; font-size: .8rem; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.scan-log { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.scan-log li { display: flex; gap: 10px; align-items: center; }
.scan-log img { width: 48px; border-radius: 4px; }
/* Övrigt is no card: no game, no set (views/admin/intake-sealed-own.ejs). */
.intake-form:has(select[name=category] option[value=misc]:checked) .own-card-only { display: none; }
/* Made by the shop itself: nothing bought, nothing to register. */
.intake-form:has(input[name=scheme][value=OWN]:checked) .intake-purchase { display: none; }
.intake-form select, .intake-form input[type=number], .intake-form input[type=text] {
  width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2); color: var(--ink); font: inherit; font-size: 1rem; }
.intake-card { min-height: 1.5em; margin: 0 0 6px; font-weight: 600; }
.intake-card.is-missing { color: var(--red); font-weight: 400; }
.intake-have { color: var(--ink-2); font-weight: 400; }
.intake-grades, .intake-schemes { border: 0; padding: 0; margin: 12px 0; }
.intake-grades legend, .intake-schemes legend { font-size: .8rem; color: var(--ink-2); margin-bottom: 6px; }
.intake-grades { display: flex; flex-wrap: wrap; gap: 6px; }
.intake-grade input { position: absolute; opacity: 0; }
.intake-grade span { display: inline-block; min-width: 46px; text-align: center; padding: 10px 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.intake-grade input:checked + span { background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-weight: 700; }
.intake-grade input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.intake-submit { width: 100%; padding: 14px; font-size: 1rem; margin-top: 10px; }
.intake-photos .photo-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.intake-photos .photo img { width: 120px; height: 160px; object-fit: cover; border-radius: 8px; }
.intake-purchase { margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px 10px; }
.intake-purchase summary { list-style: none; cursor: pointer; }
.intake-purchase summary::-webkit-details-marker { display: none; }
.intake-purchase[open] summary { margin-bottom: 4px; }
.intake-bundle-card { border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; padding: 4px 12px 6px; }
.intake-bundle-card legend { padding: 0 6px; font-size: .85rem; color: var(--ink-2); }
.intake-bundle-card legend .btn-sm { margin-left: 8px; padding: 2px 8px; font-size: .75rem; }
.intake-row-add { width: 100%; margin: 4px 0 12px; }
.intake-cost { border-top: 1px solid var(--line); padding-top: 4px; }
.intake-own summary { list-style: none; cursor: pointer; }
.intake-own summary::-webkit-details-marker { display: none; }
.intake-own .field-check { margin-top: 2px; }

/* /admin/ny-sats: a whole purchase, a card per row. One column on a phone;
   on a wide screen the fields of a card sit on one line. */
.bulk-drafts { list-style: none; padding: 0; margin: 0; }
.bulk-drafts li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.bulk-total { align-items: flex-end; }
.bulk-total .btn { margin-bottom: 10px; }
.bulk-rows { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.bulk-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.bulk-row.is-error { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.bulk-row.is-done { opacity: .75; }
.bulk-row-head { display: flex; align-items: center; gap: 8px; }
.bulk-row-head strong { white-space: nowrap; }
.bulk-row-head .bulk-remove { margin-left: auto; }
.bulk-name { font-weight: 600; font-size: .9rem; min-width: 0; }
.bulk-name.is-missing { color: var(--red); font-weight: 400; }
.bulk-add-photos { cursor: pointer; }
.bulk-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; min-height: 24px; align-items: center; }
.bulk-photos .photo { width: 84px; height: 112px; }
.bulk-photos .bulk-move { position: absolute; bottom: 0; width: 28px; height: 24px; padding: 0; border: 0; cursor: pointer;
  background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; }
.bulk-photos .bulk-move[title^="Till kortet före"] { left: 0; border-top-right-radius: 6px; }
.bulk-photos .bulk-move[title^="Till kortet efter"] { right: 0; border-top-left-radius: 6px; }
.bulk-photos .photo-del { width: 24px; height: 24px; }
.bulk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.bulk-row select, .bulk-row input:not([type="checkbox"]) { width: 100%; }
.bulk-no-purchase .bulk-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .bulk-fields { grid-template-columns: 1fr 1.4fr 1fr 1fr 1fr; }
  .bulk-no-purchase .bulk-fields { grid-template-columns: 1fr 1.4fr 1fr 1fr; }
}
.bulk-flags { display: flex; flex-wrap: wrap; gap: 0 18px; }
.bulk-flags .field-check { margin: 6px 0 2px; }
.bulk-flags input { flex: none; margin: 0; }
.bulk-paste textarea { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }

/* /admin/ny-sealed: the platform's sealed catalogue to pick from. */
.sealed-search { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; }
.sealed-search .field { flex: 1 1 180px; }
.sealed-search .btn { margin-bottom: 10px; }
.sealed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.sealed-item { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.sealed-item:hover { border-color: var(--brand); }
.sealed-item img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 6px; }
.sealed-item strong { font-size: .9rem; line-height: 1.25; }
.sealed-state { margin-top: auto; color: var(--brand); font-weight: 600; }
.sealed-item.is-sold .sealed-state { color: var(--ink-2); }
.sealed-entry { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.sealed-entry img { width: 160px; height: 160px; object-fit: contain; background: #fff; border-radius: 8px; flex: 0 0 auto; }
.sealed-entry > div { flex: 1 1 240px; }

/* Betalning: the shop's Stripe account under Connect */
.stripe-status { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.stripe-status li { padding-left: 1.4em; position: relative; }
.stripe-status li::before { position: absolute; left: 0; font-weight: 700; }
.stripe-status .is-ok::before { content: "✓"; color: var(--ok, #2e7d32); }
.stripe-status .is-warn::before { content: "!"; color: var(--warn, #b26a00); }
.stripe-choices { display: grid; gap: 18px; margin-top: 16px; }
.stripe-choices form > .btn { width: 100%; }
/* Test or live, side by side on a wide screen (views/admin/stripe.ejs). */
.stripe-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; }
.stripe-mode, .stripe-golive { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stripe-mode h3, .stripe-golive h3 { margin: 0 0 6px; }
.stripe-mode-test { border-style: dashed; }
.stripe-golive { margin: 16px 0; }

/* --- Page layout (src/page-layout.js) ---------------------------------------
   A page's modules, each in a wrapper (.pm) that says how it is drawn on a
   computer (-d) and on a phone (-m, up to 640px). The standard layout gives the
   wrappers no class beyond their name, so it draws every page as before.

   Modules share a row by their widths, in proportion: a wide and a narrow one
   3 : 2, as the campaign and the newsletter always did, two halves 1 : 1. A
   full-width module takes a line of its own, and below 900px every module does. */
.page-modules { display: flex; flex-wrap: wrap; column-gap: 12px; }
.pm { flex: 1 1 100%; min-width: 0; }
.page-modules > .pm-w-wide { flex: 3 1 0; }
.page-modules > .pm-w-half { flex: 1 1 0; }
.page-modules > .pm-w-narrow { flex: 2 1 0; }
.pm-promo, .pm-newsletter { margin: 12px 0 4px; }
.pm-promo > .promo-banner { margin: 0; height: 100%; }
.pm-newsletter > .news-side { height: 100%; box-sizing: border-box; }
@media (max-width: 900px) {
  .page-modules > .pm { flex: 1 1 100%; }
}

@media (min-width: 641px) {
  .pm-hide-d { display: none !important; }
  .pm-cols-d .grid { grid-template-columns: repeat(var(--cols-d), minmax(0, 1fr)); }
  .pm-count-d-4 .grid > :nth-child(n+5), .pm-count-d-8 .grid > :nth-child(n+9),
  .pm-count-d-12 .grid > :nth-child(n+13), .pm-count-d-16 .grid > :nth-child(n+17), .pm-count-d-24 .grid > :nth-child(n+25) { display: none; }
  .pm-size-d-large .cat-chip { padding: 14px 22px; font-size: 1.05rem; }
  .pm-size-d-compact .hero { min-height: 0; padding: 24px 0 18px; }
  .pm-size-d-compact .hero h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
  .pm-size-d-compact .hero-cards { height: 300px; transform: scale(.72); transform-origin: center top; }
  .pm-size-d-large .hero { min-height: 560px; padding: 64px 0 44px; }
  .pm-size-d-large .hero h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); }
  .pm-size-d-large .hero-cards { height: 500px; transform: scale(1.15); transform-origin: center top; }
  .pm-nocards-d .hero { grid-template-columns: 1fr; min-height: 0; }
  .pm-nocards-d .hero-cards, .pm-noeras-d .era-doors { display: none; }
  .pm-btn-d-normal .add-form-lg .btn { padding: 10px 18px; font-size: .95rem; border-radius: 10px; }
  .pm-btn-d-full .add-form-lg .btn { flex: 1; }
}
@media (min-width: 821px) {
  .product.pm-img-d-small { grid-template-columns: 2fr 3fr; }
  .product.pm-img-d-large { grid-template-columns: 3fr 2fr; }
  .product.pm-img-right > .pm-gallery { order: 2; }
}

@media (max-width: 640px) {
  .pm-hide-m { display: none !important; }
  .pm-promo, .pm-newsletter { margin: 8px 0 2px; }
  /* A phone's own order: the modules of a group move among each other. */
  .page-modules.pm-reordered > .pm { order: var(--om); }
  .product.pm-reordered { display: flex; flex-direction: column; gap: 0; }
  .product.pm-reordered > .product-info { display: contents; }
  .product.pm-reordered .pm { order: var(--om); }
  .product.pm-reordered .pm-gallery { margin: 6px 0 20px; }
  .pm-cols-m .grid { grid-template-columns: repeat(var(--cols-m), minmax(0, 1fr)); }
  .pm-count-m-4 .grid > :nth-child(n+5), .pm-count-m-8 .grid > :nth-child(n+9),
  .pm-count-m-12 .grid > :nth-child(n+13), .pm-count-m-16 .grid > :nth-child(n+17), .pm-count-m-24 .grid > :nth-child(n+25) { display: none; }
  .pm-size-m-large .cat-chip { padding: 12px 18px; font-size: 1rem; }
  .pm-size-m-compact .hero { padding: 4px 0 10px; gap: 10px; }
  .pm-size-m-compact .hero h1 { font-size: 1.5rem; }
  .pm-size-m-compact .hero p { font-size: .88rem; }
  .pm-size-m-compact .hero-cards { height: 140px; transform: scale(.7); transform-origin: center top; }
  .pm-size-m-large .hero { padding: 16px 0 22px; }
  .pm-size-m-large .hero h1 { font-size: 2.3rem; }
  .pm-size-m-large .hero-cards { height: 260px; transform: scale(1.3); transform-origin: center top; }
  .pm-nocards-m .hero-cards, .pm-noeras-m .era-doors { display: none; }
  .pm-btn-m-normal .add-form-lg .btn { padding: 10px 18px; font-size: .95rem; border-radius: 10px; }
  .pm-btn-m-full .add-form-lg .btn { flex: 1; }
  .pm-img-m-small .product-media { min-height: 0; padding: 14px; }
  .pm-img-m-small .product-media img, .pm-img-m-small .product-media.is-card img { max-height: 300px; }
  .pm-img-m-large .product-media { padding: 8px; }
  .pm-img-m-large .product-media img, .pm-img-m-large .product-media.is-card img { max-height: 82vh; }
}

/* A layout can make a card narrower than the standard grid ever does (three
   to a row in half the page). Below the width where price and button fit side
   by side, a card's foot stacks the way it does on a phone. */
.page-modules .grid > * { container-type: inline-size; }
@container (max-width: 215px) {
  .card-foot { flex-direction: column; align-items: flex-start; }
  .card-foot .add-form, .card-foot .btn { width: 100%; }
}

/* The modules a seller adds (views/partials/home/list.ejs, carousel.ejs, text.ejs).
   A carousel shows --per-d products on a computer and --per-m and a bit of
   the next one on a phone, and scrolls sideways (public/js/carousel.js). */
.list-lead { margin: -6px 0 14px; }
.carousel .section-head { align-items: center; gap: 12px; }
.carousel-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.carousel-tools a { margin-right: 6px; }
.carousel-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; }
.carousel-arrow:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.carousel-arrow:disabled { opacity: .35; cursor: default; }
.carousel-track { --gap: 18px; display: grid; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: calc((100% - (var(--per-d, 4) - 1) * var(--gap)) / var(--per-d, 4));
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 0 6px; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.carousel-track > * { scroll-snap-align: start; min-width: 0; container-type: inline-size; }
/* A gliding carousel moves a fraction of a pixel at a time: snapping would pull it back. */
.carousel.is-gliding .carousel-track { scroll-snap-type: none; }
/* A headline's looks (views/partials/hero-look.ejs): a picture with the words
   on it, the picture beside the words, a product in focus, a slideshow, just
   the words. --shade is how dark the picture is under the words. */
.look { position: relative; margin: 18px 0; }
.look-title { font-size: clamp(1.9rem, 3.6vw, 3.1rem); margin-bottom: 12px; }
.look-title em { font-style: normal; background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.look-lead { color: var(--ink-2); font-size: 1.08rem; max-width: 560px; margin: 0; }
.look .hero-cta { margin: 20px 0 0; }
.look-banner { position: relative; min-height: 420px; display: flex; align-items: flex-end; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); isolation: isolate; }
.look-banner .look-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.look-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,var(--shade)), rgba(0,0,0,calc(var(--shade) * .45)) 60%, rgba(0,0,0,calc(var(--shade) * .2))); }
.shade-none { --shade: 0; } .shade-light { --shade: .35; } .shade-medium { --shade: .6; } .shade-strong { --shade: .82; }
.look-banner .look-text { padding: 40px 44px; max-width: 760px; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.look-banner .look-lead { color: rgba(255,255,255,.9); }
.look-banner .btn-ghost { color: #fff; border-color: rgba(255,255,255,.7); text-shadow: none; }
.look-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.look-split .look-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; }
.look-split.look-img-left .look-media { order: -1; }
.look-spotlight { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; padding: 30px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.look-spotlight .look-media img { width: 100%; max-height: 480px; object-fit: contain; margin: 0 auto; }
.look-name { margin: -4px 0 10px; font-weight: 600; color: var(--ink-2); }
.look-release { margin: 12px 0 0; color: var(--green); font-weight: 700; }
.look-price { margin: 14px 0 0; font-size: 1.9rem; }
.look-spotlight .hero-cta form { margin: 0; }
.look-words { text-align: center; padding: 26px 0 8px; }
.look-words .look-text { max-width: 780px; margin: 0 auto; }
.look-words .look-lead { margin: 0 auto; }
.look-words .hero-cta { justify-content: center; }
.look-slides { border-radius: var(--radius); overflow: hidden; }
.look-slides .carousel-track { grid-auto-columns: 100%; gap: 0; padding: 0; }
.look-slides .slide { margin: 0; border-radius: 0; }
.look-slides .look-text { padding-left: 72px; padding-right: 72px; }
.look-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.35); color: #fff; }
.look-prev { left: 12px; } .look-next { right: 12px; }
.carousel-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; z-index: 2; }
.carousel-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.carousel-dots button[aria-current] { background: #fff; width: 22px; border-radius: 5px; }
.hero-cards a.hc { display: block; }
.hero-cards a.hc img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: inherit; }
@media (min-width: 641px) {
  .pm-size-d-compact .look-banner { min-height: 280px; }
  .pm-size-d-large .look-banner { min-height: 580px; }
  .pm-size-d-compact .look-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
  .pm-size-d-large .look-title { font-size: clamp(2.4rem, 5vw, 4.2rem); }
}
@media (max-width: 820px) {
  .look-split, .look-spotlight { grid-template-columns: 1fr; gap: 20px; }
  .look-split.look-img-left .look-media, .look-split .look-media { order: -1; }
}
@media (max-width: 640px) {
  .look-banner { min-height: 340px; }
  .pm-size-m-compact .look-banner { min-height: 230px; }
  .pm-size-m-large .look-banner { min-height: 470px; }
  .look-banner .look-text, .look-slides .look-text { padding: 22px 20px 34px; }
  .look-title { font-size: 1.8rem; }
  .look-lead { font-size: .96rem; }
  .look-spotlight { padding: 18px; }
  .look-spotlight .look-media img { max-height: 320px; }
  .look-arrow { display: none; }
}
.pm-text { margin: 14px 0; }
.pm-text > .text-block { height: 100%; }
.product-info .text-block h2 { font-size: 1.25rem; }
.product-info .pm-text { margin: 10px 0 14px; }
.text-block h2 { margin-bottom: .35em; }
.text-block p { margin: 0; color: var(--ink-2); max-width: 72ch; }
.text-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; }
.text-accent { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--on-brand); border-radius: var(--radius); padding: 26px 28px; }
.text-accent p { color: inherit; opacity: .85; }
.text-accent .btn { background: var(--on-brand); color: var(--brand); border-color: var(--on-brand); }
.text-accent .btn-ghost { background: transparent; color: var(--on-brand); }
.text-plain { padding: 6px 0; }
.text-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
@media (min-width: 641px) {
  .pm-align-d-center .text-block { text-align: center; }
  .pm-align-d-center .text-block p { margin-inline: auto; }
  .pm-align-d-center .text-cta { justify-content: center; }
}
@media (max-width: 640px) {
  .carousel-track { --gap: 12px; grid-auto-columns: calc((100% - var(--per-m, 2) * var(--gap)) / (var(--per-m, 2) + .2)); }
  .text-panel, .text-accent { padding: 18px; }
  .pm-align-m-center .text-block { text-align: center; }
  .pm-align-m-center .text-block p { margin-inline: auto; }
  .pm-align-m-center .text-cta { justify-content: center; }
}

/* A module pointed at in the editor's list, outlined in its preview. */
.pm-highlight { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 6px; }

/* --- Admin: Designa dina sidor (views/admin/design.ejs) ---------------------
   The editor beside two frames of the shop's own pages. Wider than the admin's
   other pages, as wide as the window allows, so the computer's frame is not a
   thumbnail. */
.design-intro { max-width: 760px; }
.design { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 16px; align-items: start;
  margin-inline: calc(50% - min(840px, 50vw - 16px)); margin-bottom: 30px; }
/* Below the shop's sticky header (68px), which would otherwise cover the panel's top and its buttons. */
.design-side { margin: 0; position: sticky; top: 80px; max-height: calc(100vh - 92px); overflow: auto; }
/* Lists' toolbars stayed below the shop's header; in the admin they stay at the top, or below Meny and Sök on a phone. */
body:has(.admin-side) .listtools { top: 0; }
@media (max-width: 999px) { body:has(.admin-side) .listtools { top: 50px; } }
/* Beside the admin's sidebar (264px): as wide as what is left of the window, and the shop's header is not there to stay below. */
@media (min-width: 1000px) {
  body:has(.admin-side) .design { margin-inline: calc(50% - min(840px, 50vw - 132px - 16px)); }
  body:has(.admin-side) .design-side { top: 16px; max-height: calc(100vh - 32px); }
}
@media (max-width: 999px) {
  body:has(.admin-side) .design-side { top: 60px; max-height: calc(100vh - 72px); }
}
.design-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; }
.design-tab { flex: 1; border: 0; background: transparent; color: var(--ink-2); padding: 7px 10px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.design-tab[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.design-preset { margin: 14px 0 6px; }
.design-preset-row { display: flex; gap: 8px; margin-top: 4px; }
.design-preset-row select { flex: 1; }
.design-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 6px; }
.dm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dm { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.dm.is-off { opacity: .55; }
.dm.is-dragging { opacity: .35; }
.dm.drop-before { box-shadow: 0 -3px 0 var(--brand); }
.dm.drop-after { box-shadow: 0 3px 0 var(--brand); }
.dm-handle { cursor: grab; border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; padding: 2px 4px; line-height: 1; }
.dm-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-main strong { cursor: pointer; }
.dm-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dm-show { display: flex; gap: 5px; align-items: center; }
.dm-move { display: flex; gap: 2px; }
.dm-move .btn { padding: 2px 8px; }
.dm-opts { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.dm-opt { display: flex; flex-direction: column; gap: 2px; font-size: .75rem; color: var(--muted); }
.dm-opt select { font-size: .85rem; padding: 4px 6px; }
/* A module's texts and links, under its row. */
.dm-content { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.dm-content > summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.dm-content[open] > summary { margin-bottom: 6px; }
.dm-changed { color: var(--brand); font-weight: 500; }
.dm-field { display: flex; flex-direction: column; gap: 3px; margin: 0 0 9px; font-size: .78rem; }
.dm-field-label { color: var(--muted); }
.dm-field input, .dm-field textarea, .dm-field select { width: 100%; font: inherit; font-size: .85rem; padding: 5px 7px; }
.dm-field textarea { resize: vertical; min-height: 60px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; }
.dm-langs > summary { cursor: pointer; color: var(--muted); font-size: .74rem; margin-top: 2px; }
.dm-lang { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; color: var(--muted); }
.dm-url { display: flex; flex-direction: column; gap: 3px; }
.dm-url .is-wrong { color: var(--red); }
.dm-added { display: flex; gap: 6px; margin-top: 8px; }
/* The products picked for a list, and the search that adds to them. */
.dm-picked { list-style: none; margin: 2px 0 6px; padding: 0; display: grid; gap: 4px; }
.dm-picked li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto auto; gap: 4px; align-items: center; font-size: .8rem; }
.dm-picked li.dm-picked-empty { display: block; }
.dm-picked img, .dm-picked-img { width: 28px; height: 38px; object-fit: contain; border-radius: 3px; background: var(--bg-2); }
.dm-picked-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.dm-picked .btn { padding: 1px 6px; }
.dm-results { display: grid; gap: 3px; margin-top: 4px; max-height: 240px; overflow: auto; }
.dm-result { display: flex; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: .8rem; cursor: pointer; }
.dm-result img { width: 22px; height: 30px; object-fit: contain; }
.dm-result:hover:not(:disabled) { border-color: var(--brand); }
.dm-result:disabled { opacity: .55; cursor: default; }
/* A picture, with the point that stays in view, and a slideshow's pictures. */
.dm-image-frame { position: relative; cursor: crosshair; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 3px; }
.dm-image-frame img { width: 100%; max-height: 200px; object-fit: contain; background: var(--bg-2); }
.dm-focus { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.6); pointer-events: none; }
.dm-image-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.dm-library { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.dm-library-item { padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--bg-2); cursor: pointer; aspect-ratio: 4 / 3; }
.dm-library-item:hover { border-color: var(--brand); }
.dm-library-item img { width: 100%; height: 100%; object-fit: cover; }
.dm-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 4px; margin: 4px 0 8px; }
.dm-item legend { font-size: .78rem; font-weight: 700; color: var(--ink-2); padding: 0 4px; }
.dm-item-actions { display: flex; gap: 4px; margin-bottom: 6px; }
.dm-field input[type=search] { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; }
.design-add { margin: 10px 0 4px; }
.design-add-box > summary { list-style: none; display: inline-flex; }
.design-add-box > summary::-webkit-details-marker { display: none; }
.design-add-list { display: grid; gap: 6px; margin-top: 8px; }
.design-add-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 9px 11px; border: 1px dashed var(--line); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.design-add-item:hover:not(:disabled) { border-color: var(--brand); }
.design-add-item:disabled { opacity: .5; cursor: default; }
.design-copy { margin: 12px 0 4px; }
/* Publicera and Släng utkastet stay at the top of the panel as its list scrolls,
   flush with the panel's edge (its padding is 20px). */
.design-actions { position: sticky; top: -20px; z-index: 3; margin: -20px -20px 12px; padding: 12px 20px 10px;
  background: var(--card); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.design-actions p { margin: 6px 0 0; color: var(--ink-2); }
.design-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
/* Färger: the colours two by two beside the preview. */
.design-colours .theme-presets { margin: 0 0 4px; }
.dc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.dc-field { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-2); cursor: pointer; }
.dc-field input[type=color] { flex: 0 0 44px; width: 44px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); cursor: pointer; }
.design-colours .notice { margin-top: 14px; }
.design-colours .notice ul { margin: 6px 0 0; padding-left: 18px; }
/* Utseende: the logo on the shop's ground, and each typeface in its own letters. */
.dl-logo-preview { display: grid; place-items: center; height: 72px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.dl-logo-preview img { max-width: 100%; max-height: 30px; }
.dl-logo-name { font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.dl-logo-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.dl-pick { position: relative; cursor: pointer; }
.dl-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dl-pick:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.dl-fonts { border: 0; margin: 0 0 12px; padding: 0; }
.dl-fonts legend { padding: 0; margin-bottom: 6px; color: var(--ink-2); }
.dl-font-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dl-font { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.dl-font:hover { border-color: var(--muted); }
.dl-font.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.dl-font input { position: absolute; opacity: 0; pointer-events: none; }
.dl-font:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.dl-font-sample { color: var(--ink); line-height: 1.25; }
.dl-font-sample.is-display { font-size: 1.1rem; font-weight: 700; }
.dl-font-sample.is-body { font-size: .9rem; }
/* Ångra beside the buttons, and the list of what the draft changes under them. */
.design-undo { display: inline-flex; gap: 4px; margin-left: auto; }
.design-changes { margin-top: 6px; font-size: .8rem; }
.design-changes summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.design-changes ul { margin: 6px 0 0; padding-left: 18px; max-height: 180px; overflow: auto; color: var(--ink-2); }
.design-changes li { margin: 2px 0; }
.design-buttons form { margin: 0; }
.design-preview-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.design-preview-bar .design-tabs { margin: 0; }
.design-preview-bar .design-tab { flex: 0 0 auto; white-space: nowrap; }
.design-season { flex-wrap: wrap; }
.design-preview-bar label { display: flex; gap: 8px; align-items: center; }
.design-preview-bar select { max-width: 340px; }
.design-frames { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.design-frame { margin: 0; cursor: pointer; }
.design-frame figcaption { font-weight: 600; font-size: .85rem; margin-bottom: 6px; }
.design-frame.is-active figcaption { color: var(--brand); }
.design-frame-box { position: relative; height: calc(100vh - 170px); min-height: 480px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.design-frame.is-active .design-frame-box { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.design-frame iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: var(--bg); }
@media (max-width: 1180px) {
  .design { grid-template-columns: 1fr; margin-inline: 0; }
  .design-side { position: static; max-height: none; }
  /* The page scrolls instead of the panel: below the shop's header. */
  .design-actions { top: 68px; }
}
@media (max-width: 760px) {
  .design-frames { grid-template-columns: 1fr; }
  .design-frame.is-desktop { display: none; }
  .design-frame.is-mobile .design-frame-box { max-width: 390px; }
}

/* /admin/flytt: moving the shop's domain here (views/admin/move.ejs). */
.move-result { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.move-result.is-done { border-color: var(--green); }
.move-result-head { margin: 0 0 8px; font-size: 1.05rem; }
.move-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 10px; }
.move-bar span { display: block; height: 100%; background: var(--green); }
.move-kinds td { padding: 4px 12px 4px 0; font-size: .9rem; }
.move-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.move-miss { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.move-miss-head, .move-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.move-row form { margin-left: auto; }
.move-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; overflow-wrap: anywhere; min-width: 0; }
.move-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.move-tag { font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.move-tag.is-hits { color: var(--ink); border-color: var(--brand); }
.move-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.move-suggest .btn { text-align: left; max-width: 100%; white-space: normal; }
.move-miss-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.move-point { display: flex; gap: 8px; flex: 1 1 280px; min-width: 0; }
.move-point input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .85rem; background: transparent; color: inherit; }
.move-add .field { flex: 1 1 220px; }
.move-form { align-items: flex-end; }
.move-form > .btn { margin: 10px 0; }
.move-kinds td:nth-child(2) { white-space: nowrap; }
.move-dismissed { margin-top: 14px; }
.move-phase { margin: 22px 0 8px; font-size: 1rem; }
.move-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.move-step { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.move-step.is-done { border-color: var(--green); }
.move-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.move-step-mark { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 600; border: 1px solid var(--line); color: var(--muted); }
.move-step.is-done .move-step-mark { background: var(--green); border-color: var(--green); color: #fff; }
.move-step-title { flex: 1 1 200px; min-width: 0; }
.move-step-tick { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.move-step-body { padding-left: 34px; }
.move-step-body > p { margin: 8px 0 0; }
.move-step-body .notice { margin: 8px 0 0; }
.move-step-body form:not(.move-form) { margin-top: 8px; }
.move-step.is-done .move-step-body { color: var(--muted); }
.move-todo { margin: 6px 0 0; padding-left: 18px; }
.move-todo li { margin-bottom: 4px; overflow-wrap: anywhere; }
.move-step-body code { overflow-wrap: anywhere; }
@media (max-width: 560px) { .move-step-body { padding-left: 0; } }

/* Tradera listing form (views/admin/tradera-new.ejs, public/js/admin-tradera.js). */
.tradera-form:has(input[name=kind][value=buy_now]:checked) .tradera-auction { display: none; }
.tradera-form:has(input[name=kind][value=auction]:checked) .tradera-buy-now { display: none; }
.intake-schemes .tradera-buy-now { margin-top: 10px; align-items: flex-start; }
.tradera-images { border: 0; padding: 0; margin: 0 0 14px; }
.tradera-images legend, .tradera-chips legend { font-size: .9rem; color: var(--ink-2); margin-bottom: 6px; }
.tradera-image-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tradera-image { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.tradera-image img, .tradera-image-plus { width: 84px; height: 84px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.tradera-image[hidden] { display: none; }
.tradera-image { position: relative; }
.tradera-image > input[type=checkbox] { position: absolute; top: 6px; left: 6px; z-index: 1; width: 18px; height: 18px; margin: 0; }
.tradera-image:has(> input:checked) img { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.tradera-image-add input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tradera-image-plus { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--ink-2); border-style: dashed; }
.tradera-image-add:hover .tradera-image-plus, .tradera-image-add:focus-within .tradera-image-plus { border-color: var(--brand); color: var(--brand); }
.tradera-upload-status:empty { display: none; }
.tradera-chips { border: 0; padding: 0; margin: 0 0 14px; }
.tradera-chip-search { width: 100%; max-width: 320px; margin-bottom: 8px; }
.tradera-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tradera-chip { position: relative; cursor: pointer; }
.tradera-chip[hidden] { display: none; }
.tradera-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tradera-chip span { display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .88rem; font-weight: 600; }
.tradera-chip input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.tradera-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.tradera-chip input:disabled + span { opacity: .45; cursor: not-allowed; }
.tradera-shipping .field { max-width: 260px; }
.tradera-ship-list { display: flex; flex-direction: column; gap: 8px; }
.tradera-ship { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--card); }
.tradera-ship[hidden] { display: none; }
.tradera-ship:has(input[type=checkbox]:checked) { border-color: var(--brand); }
.tradera-ship-pick { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.tradera-ship-pick input { flex: none; width: 18px; height: 18px; }
.carrier-mark { flex: none; width: 64px; height: 28px; border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 3px 6px; }
.carrier-mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tradera-ship-text { display: flex; flex-direction: column; min-width: 0; }
.tradera-form .tradera-ship-cost { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; width: auto; margin: 0; }
.tradera-ship-kr { display: flex; align-items: center; gap: 6px; }
.tradera-form .tradera-ship-kr input { width: 84px; flex: none; text-align: right; }
.tradera-ship:not(:has(input[type=checkbox]:checked)) .tradera-ship-cost { opacity: .5; }
@media (max-width: 560px) {
  .tradera-ship { flex-wrap: wrap; }
  .tradera-form .tradera-ship-cost { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding-left: 30px; }
}
.carrier-mark:has(img[src$="dhl.svg"]) { background: #ffcc00; }
/* Picking many products (views/admin/tradera-pick.ejs, labels-pick.ejs; public/js/admin-pick.js), and the Tradera listings after. */
.pick-tools[hidden], .pick-group[hidden], .pick-row[hidden] { display: none; }
.pick-tools .field-check { margin: 0; }
.pick-sort { border-radius: 999px; padding: 8px 14px; font-size: .9rem; }
.pick-group { border: 0; padding: 0; margin: 0 0 22px; }
.pick-group legend { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.pick-all { margin-bottom: 8px; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px; }
.pick-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card); cursor: pointer; }
.pick-row:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.pick-row input { flex: none; width: 18px; height: 18px; margin: 0; }
.pick-row img, .pick-noimg { flex: none; width: 44px; height: 60px; object-fit: contain; border-radius: 4px; background: var(--bg); }
.pick-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pick-text strong { overflow-wrap: anywhere; }
.pick-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 18px 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 -6px 18px rgba(0, 0, 0, .08); }
.pick-bar .intake-submit { margin: 0; }
.tradera-bulk-group h2 { margin-top: 0; }
.tradera-bulk-group .tradera-shipping { margin-bottom: 18px; }
.tradera-bulk-rows { display: flex; flex-direction: column; gap: 10px; }
.tradera-bulk-row { display: grid; grid-template-columns: auto 56px 1fr; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.tradera-bulk-row.has-error { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.tradera-bulk-row:not(:has(.tradera-bulk-on input:checked)) > :not(.tradera-bulk-on) { opacity: .45; }
.tradera-bulk-on input { width: 20px; height: 20px; margin: 4px 0 0; cursor: pointer; }
.tradera-bulk-img { width: 56px; height: 78px; object-fit: contain; border-radius: 4px; background: var(--bg); display: block; }
.tradera-bulk-main { min-width: 0; }
.tradera-bulk-name { margin: 0 0 6px; line-height: 1.35; }
.tradera-bulk-errors { margin: 0 0 8px; padding-left: 18px; color: var(--red); font-size: .9rem; }
.tradera-bulk-fields { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.tradera-bulk-fields .field { margin: 0; min-width: 0; }
.tradera-bulk-fields input { width: 100%; min-width: 0; box-sizing: border-box; }
.tradera-bulk-more { margin-top: 6px; }
.tradera-bulk-more summary { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tradera-bulk-more[open] summary { white-space: normal; margin-bottom: 8px; }
.tradera-bulk-more .tradera-chips { margin-bottom: 4px; }
@media (max-width: 560px) {
  .tradera-bulk-row { grid-template-columns: auto 44px 1fr; gap: 10px; padding: 10px; }
  .tradera-bulk-img { width: 44px; height: 62px; }
  .tradera-bulk-fields { grid-template-columns: 1fr; }
  .tradera-bulk-price { max-width: 160px; }
}

/* The shop's visitor statistics (views/admin/stats.ejs). */
.stats-preview { margin-bottom: 16px; }
.stats-periods { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 16px; }
.stats-periods a { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: .9rem; }
.stats-periods a.is-on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.stats-periods .muted { margin-left: 6px; }
.stats-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; margin-bottom: 16px; }
.stats-kpi { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stats-kpi-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.stats-kpi strong { font-size: 1.7rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stats-up { color: var(--green); }
.stats-down { color: var(--red); }
.stats-chart h2, .stats-list h2 { font-size: 1.02rem; margin: 0 0 10px; }
.stats-plot { position: relative; padding-left: 48px; }
.stats-plot svg { display: block; width: 100%; height: 200px; overflow: visible; }
.stats-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.stats-bar { fill: var(--brand); }
.stats-bar:hover { opacity: .75; }
.stats-ylabels { position: absolute; left: 0; top: 0; width: 42px; height: 200px; }
.stats-ylabels span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.stats-xlabels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--ink-2); }
.stats-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; align-items: start; margin-top: 16px; }
.stats-list { min-width: 0; margin: 0; }
.stats-list > p { margin: -4px 0 10px; }
.stats-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.stats-rows li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; min-width: 0; }
.stats-name { min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.stats-name a { color: inherit; text-decoration: none; }
.stats-name a:hover, .stats-name a:focus-visible { text-decoration: underline; }
.stats-num { text-align: right; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end; }
.stats-share { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.stats-share i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.stats-list details { margin-top: 10px; }
.stats-list details summary { cursor: pointer; color: var(--ink-2); }
.stats-list details .stats-rows { margin-top: 10px; }
.stats-about { margin-top: 22px; max-width: 75ch; }
.stats-about h2 { font-size: .95rem; color: var(--ink); margin: 0 0 6px; }
.stats-about ul { margin: 0; padding-left: 18px; }
.stats-about li { margin: 4px 0; }

/* Price stickers and selling at a card show (views/admin/labels.ejs, shows.ejs, show-sale.ejs). */
.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.label-qty { display: flex; gap: 6px; align-items: center; }
.label-qty input { width: 4em; }
.label-print { display: grid; gap: 8px; justify-items: start; margin-top: 12px; }
.label-settings { display: grid; gap: 12px; max-width: 32rem; }
.label-settings select { width: 100%; }
.label-custom { display: flex; flex-wrap: wrap; gap: 12px; }
.label-custom label { display: grid; gap: 4px; }
.label-custom input { width: 7em; }
.label-layouts { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.label-layouts legend { font-weight: 700; margin-bottom: 4px; }
.show-find { display: flex; gap: 8px; }
.show-find input { flex: 1; min-width: 0; font-size: 1.1rem; padding: 12px; }
.show-lines { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.show-line { display: grid; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.show-line-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.show-add { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.show-add > label { font-weight: 700; }
.show-add p { margin: 0; }
.show-cancel { margin: 12px 0 24px; }
.show-trades { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.show-trade { gap: 8px; }
.show-trade-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.show-field { display: grid; gap: 4px; font-weight: 600; min-width: 0; }
.show-field select, .show-field input { width: 100%; min-width: 0; }
.show-own-price { font-weight: 400; }
.show-trade-add { border-top: 0; padding-top: 0; }
.show-trade-add [data-trade-scan] { justify-self: start; }
.show-trade-add summary { cursor: pointer; margin: 4px 0; }
.show-trade-pick { display: grid; gap: 8px; margin-top: 8px; }
.show-trade-pick select { width: 100%; }
.show-party { display: grid; gap: 8px; margin-top: 12px; }
.bulk-lot .bulk-own-purchase { display: none; }
/* Market prices (views/admin/market.ejs, public/js/admin-market-hint.js). */
.market-hint { margin: 2px 0 10px; color: var(--ink-2); }
.market-hint .link-button { margin-left: 4px; }
.prow-mk { color: var(--ink-2); }
.mk-head p { margin: 0 0 8px; }
.mk-summary { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mk-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 6px 16px; padding: 12px; border-bottom: 1px solid var(--line); }
.mk-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.mk-figs > div { display: grid; gap: 2px; align-content: start; }
.mk-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mk-off { justify-self: start; font-size: .75rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--bg-2); }
.mk-over { background: var(--red); color: #fff; }
.mk-under { background: var(--green); color: #052e16; }
.mk-more, .mk-row .tr-row { grid-column: 1 / -1; }
.mk-more > summary { cursor: pointer; color: var(--ink-2); width: max-content; }
.mk-fix, .mk-said, .mk-check { grid-column: 1 / -1; }
/* Tradera's sales of a card, 90 days (views/admin/_tradera-chart.ejs). */
.tr-chart { margin: 6px 0 0; }
.tr-chart svg { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.tr-chart .tr-line { fill: none; stroke: var(--brand, #ffcb05); stroke-width: 1.6; stroke-linejoin: round; opacity: .85; }
.tr-chart .tr-median { stroke: var(--muted, #8a90a8); stroke-width: 1; stroke-dasharray: 3 3; }
.tr-chart .tr-dot { fill: var(--brand, #ffcb05); stroke: var(--bg, #0b0d13); stroke-width: 1.5; }
.tr-chart .tr-dot.auk { fill: var(--bg, #0b0d13); stroke: var(--brand, #ffcb05); stroke-width: 1.6; }
.tr-chart a:hover .tr-dot, .tr-chart a:focus .tr-dot { r: 5.5; }
.tr-chart .tr-note { fill: var(--ink, #e6e8f2); font-size: 12px; font-weight: 700; }
.tr-chart a:hover .tr-note { text-decoration: underline; }
.tr-chart .tr-axis { fill: var(--muted, #8a90a8); font-size: 10.5px; }
.tr-chart figcaption { font-size: .72rem; color: var(--muted); margin-top: 2px; }
/* A shop not yet open, seen by its admin (views/partials/header.ejs), and its panel on the start page. */
.preview-bar { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: center; padding: 8px 16px;
  background: #1d4ed8; color: #fff; font-size: .9rem; text-align: center; }
.preview-bar a { color: #fff; font-weight: 700; text-decoration: underline; }
.store-open .btn { margin-right: 8px; }
/* Tradera: live listings repriced (views/admin/tradera.ejs). */
.tradera-reprice { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.tradera-reprice p { flex-basis: 100%; margin: 0; }
/* A long select with its filter box above it (public/js/admin-picker.js). */
.picker { display: grid; gap: 6px; }
.picker-filter { width: 100%; box-sizing: border-box; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 8px 10px; font: inherit; }
.mk-said { margin: 4px 0 0; }
.mk-fix > summary { cursor: pointer; color: var(--ink-2); width: max-content; }
.mk-cands { display: grid; gap: 6px; margin: 6px 0 10px; }
.mk-cand { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 8px; }
.mk-cand.is-current { border-color: var(--green); }
.mk-cand img { width: 48px; height: auto; border-radius: 3px; }
.mk-url { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; }
.mk-url .field { flex: 1 1 280px; margin: 0; }
@media (max-width: 720px) {
  .mk-row { grid-template-columns: minmax(0, 1fr); }
  .mk-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bulk-lot-note { display: none; }
.bulk-lot .bulk-lot-note { display: block; }
.show-payout { display: grid; gap: 8px; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.show-payout p { margin: 0; }
.show-payout[hidden] { display: none; }
.show-wait { text-align: center; padding: 28px 16px; }
.show-wait-amount { font-size: 1.6rem; font-weight: 800; margin: 6px 0; }
.show-wait-spin { width: 34px; height: 34px; margin: 14px auto; border: 4px solid var(--line); border-top-color: var(--accent, currentColor); border-radius: 50%; animation: show-spin 0.9s linear infinite; }
@keyframes show-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .show-wait-spin { animation-duration: 3s; } }
.swish-modes { display: grid; gap: 10px; }
.swish-modes label { display: block; }
.swish-modes .btn { justify-self: start; }
.swish-row { display: flex; gap: 8px; flex-wrap: wrap; }
.swish-row input { flex: 1 1 180px; min-width: 0; }
.swish-how { padding-left: 20px; }
.swish-how li { margin: 4px 0; }
.swish-renew { display: grid; gap: 8px; margin-top: 8px; }
.swish-renew .btn { justify-self: start; }
.swish-cert + .swish-cert { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.swish-cert h3 { margin: 0 0 4px; }
.swish-cert form { display: grid; gap: 8px; }
.swish-cert textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px 10px; }
.swish-cert .btn { justify-self: start; }
.show-party p { margin: 0; }
.show-sum { margin: 16px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 4px; }
.show-sum > div { display: flex; justify-content: space-between; gap: 12px; }
.show-sum-total { font-size: 1.2rem; font-weight: 800; }
.show-deal dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.show-deal dt { color: var(--muted); }
.show-deal dd { margin: 0; }
@media print {
  .show-deal-tools, .admin-head nav, .site-header, .site-footer { display: none !important; }
}
.show-card { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.show-card img { width: 56px; height: auto; border-radius: 4px; flex: none; }
.show-price, .show-total { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.show-price input, .show-total input { width: 6em; font-size: 1.1rem; padding: 10px; text-align: right; }
.show-sale > label.show-total { display: flex; justify-content: space-between; margin-bottom: 4px; }
.show-methods { border: 0; padding: 0; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.show-methods legend { font-weight: 700; margin-bottom: 6px; }
.show-method { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.show-method:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.show-sale > label { display: grid; gap: 4px; margin-bottom: 8px; }
.pf .money-cell { text-align: left; }
.pf-links { line-height: 1.8; }
@media (max-width: 640px) {
  .prow { padding: 10px 8px; gap: 4px 10px; }
  .prow-quick { gap: 6px 8px; }
  .prow-quick label { gap: 4px; }
  .prow-quick input { width: 62px; }
  .prow-unit { display: none; }
}