/* Fri: by Helga — storefront (public site). Mobile-first: designed at 375 px, widened at 520 / 800 / 960 px. */
* { box-sizing: border-box; }
a { color: var(--blue); text-decoration: none; }
.desc a, .lead a, .muted a, .acc-body a, .terms a, .archive a, .card-more { text-decoration: underline; text-underline-offset: 3px; }
h2 { font-size: 1.15rem; }
/* skip link */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 20; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 999px; }
.skip:focus { left: 8px; }
.main:focus { outline: none; }
/* header / footer — every link is a 44 px target (M-25) */
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; max-width: 1080px; margin: 0 auto; }
.nav { display: flex; align-items: center; gap: 2px; margin: -10px -8px -10px 0; font-size: .95rem; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink); white-space: nowrap; border-bottom: 2px solid transparent; }
.nav a[aria-current] { border-color: var(--ink); }
.nav .lang { color: var(--muted); }
@media (max-width: 419px) { .brand-sub { display: none; } }
.main { max-width: 1080px; margin: 0 auto; padding: 0 16px 48px; }
.ftr { border-top: 1px solid var(--line); padding: 28px 16px 40px; text-align: center; color: var(--muted); font-size: .9rem; }
.ftr p { margin: 0 0 6px; }
.ftr-logo { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); margin-bottom: 8px; }
.ftr-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 8px; }
.ftr-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.ftr-small { font-size: .8rem; }
/* hero — compact on phones so the first card lands in the top 40 % (L-27) */
.hero { text-align: center; padding: 16px 0 20px; }
.hero-logo { margin: 0; font-weight: 400; }
h1.hero-logo { font-size: clamp(3.2rem, 12vw, 5.5rem); }
.hero-promise { max-width: 34ch; margin: 8px auto 0; font-size: 1.05rem; color: var(--ink); }
/* feed — square cards with «Ny»/«Solgt» chips (§3a) */
.feed { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 519px) {
  .feed .card-about { grid-column: 1 / -1; }
  .feed .card-body { padding: 10px 12px 12px; }
  .feed .card-title { font-size: .95rem; }
  .feed .chip { top: 8px; left: 8px; font-size: .72rem; padding: 4px 9px; }
}
@media (min-width: 520px) { .feed { gap: 22px; } }
@media (min-width: 960px) { .feed { grid-template-columns: 1fr 1fr 1fr; gap: 28px; } }
.card { display: block; background: var(--card); border-radius: 18px; overflow: hidden; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.2); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 32px -18px rgba(0,0,0,.28); }
.card-img { position: relative; aspect-ratio: 1 / 1; background: #eeece6; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.noimg { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--serif); font-size: 3rem; color: #c9c6bd; }
.card.is-sold .card-img img { filter: grayscale(.5); opacity: .8; }
.chip { position: absolute; top: 12px; left: 12px; font-size: .8rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; letter-spacing: .02em; line-height: 1.2; }
.chip-new { background: var(--blue); color: #fff; }
.chip-sold { background: var(--ink); color: #fff; }
.card-body { padding: 14px 16px 16px; }
.card-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 2px; letter-spacing: -0.01em; line-height: 1.25; }
.card-about { background: #f3f1ea; box-shadow: none; display: flex; align-items: center; }
.card-about .card-body { padding: 22px 20px; }
.card-about p { margin: 6px 0 10px; color: var(--muted); font-size: .98rem; }
.card-more { color: var(--blue); font-weight: 600; font-size: .95rem; }
/* archive of sold pieces */
.archive { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.archive h2 { font-size: 1.3rem; }
.archive > p { margin: 0 0 16px; }
.feed-archive { grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 520px) { .feed-archive { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .feed-archive { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.feed-archive .card-body { padding: 10px 12px 12px; }
.feed-archive .card-title { font-size: .95rem; }
.feed-archive .price { font-size: .95rem; color: var(--muted); font-weight: 500; }
/* product page — "a sheet": full uncropped photo, then everything a buyer needs in order (M-21) */
.product { display: grid; gap: 18px; padding-top: 4px; }
@media (min-width: 800px) { .product { grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; } }
.gallery-main { display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #efede8; aspect-ratio: 4 / 5; max-height: 75vh; cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-main.noimg { font-size: 4rem; }
.thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding: 2px; }
.thumb { flex: 0 0 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; background: #eee; cursor: pointer; }
.thumb.is-on { border-color: var(--ink); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.zoom { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; background: #111; }
.zoom::backdrop { background: rgba(0,0,0,.92); }
.zoom img { width: 100%; height: 100%; object-fit: contain; }
.zoom-x { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 10px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.product-info h1 { font-size: 1.7rem; margin-top: 2px; }
.back { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: .95rem; margin: -8px 0 0; }
.desc { margin: 14px 0 16px; }
.desc p { margin: 0 0 .8em; }
.trust { list-style: none; padding: 0; margin: 4px 0 18px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .92rem; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust li::before { content: "✓"; color: var(--ok); font-weight: 700; }
.buyform { display: grid; gap: 10px; }
.dest { display: grid; gap: 8px; }
.dest-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qty { font-weight: 600; font-size: .95rem; }
.shipq { margin: 0; color: var(--muted); font-size: .95rem; min-height: 1.5em; }
.total { margin: 0; font-weight: 600; font-size: 1.15rem; min-height: 1.5em; }
/* sticky bottom bar with the total and one full-width CTA (phones only) */
.buybar { position: sticky; bottom: 0; z-index: 2; background: var(--paper); padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); margin: 4px 0 0; box-shadow: 0 -14px 16px -14px rgba(0,0,0,.2); }
.buybar-sold { position: static; box-shadow: none; }
.buybtns { display: grid; gap: 10px; margin-top: 8px; }
.buybtns .btn { width: 100%; }
.buybtns .notice { margin: 0; }
.buybar .muted.small { margin: 8px 0 0; }
.trust-line { margin: 2px 0 0; font-size: .85rem; }
.trust-line a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px; }
@media (min-width: 600px) {
  .buybtns { display: flex; flex-wrap: wrap; }
  .buybtns .btn { width: auto; min-width: 200px; }
  .buybtns .notice { flex-basis: 100%; }
}
@media (min-width: 800px) { .buybar { position: static; box-shadow: none; padding-bottom: 0; } }
.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; font-weight: 600; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--muted); }
.acc[open] summary::after { content: "–"; }
.acc-body { padding: 0 0 14px; }
.acc-body p { margin: 0 0 .6em; }
.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; }
/* about / thanks / terms */
.about { max-width: 640px; margin: 16px auto; text-align: center; }
.about .desc, .about .steps, .about .addr, .terms-sec { text-align: left; }
.about h2 { margin-top: 32px; }
.lead { font-size: 1.15rem; }
.thanks .btn { margin-top: 12px; }
.contact-links { display: flex; flex-direction: column; align-items: center; }
.contact-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.terms-sec h2 { margin-top: 28px; font-size: 1.2rem; }
.terms-sec p { margin: 0 0 .8em; }
/* order form */
.order { max-width: 560px; margin: 0 auto; }
.order h1 { font-size: 1.6rem; }
.order h2 { margin: 6px 0 -6px; }
.order-item { display: flex; gap: 12px; align-items: center; margin: 0 0 12px; }
.order-item img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.order-sum { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; font-size: .95rem; margin: 0 0 14px; line-height: 1.6; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.order-sum > span, .order-sum > b { white-space: nowrap; }
.order-sum a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 6px; font-weight: 600; }
.order .pform { display: grid; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.order .field { font-weight: 600; }
.order .btn-vipps { width: 100%; padding-left: 14px; padding-right: 14px; }
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 1px; }
/* Vipps status page — big chips that cannot be mistyped (M-27) */
.order-status .lead { margin-bottom: 20px; }
.order-status .steps { padding: 14px 12px 14px 32px; }
.order-status .steps li { margin: 0; }
.chip-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; background: #f6f5f1; border-radius: 12px; padding: 8px 12px; margin: 6px 0; text-align: left; }
.chip-lbl { grid-column: 1; grid-row: 1; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.chip-val { grid-column: 1; grid-row: 2; font-size: 1.3rem; font-weight: 600; letter-spacing: .02em; word-break: break-all; }
.chip-val a { color: inherit; }
.copy { grid-column: 2; grid-row: 1 / span 2; background: #fff; }
.copy.is-done { color: var(--ok); border-color: var(--ok); }
.order-link { margin: 20px 0 0; }
.order-link .chip-val { font-size: .95rem; font-weight: 500; }
.order-status .buybtns .btn-vipps { width: 100%; }
.addr { font-style: normal; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: inline-block; text-align: left; margin: 0 0 12px; }
.order-status .btn-ghost { margin: 8px 4px; }